.step-estekhdam {
    --first-color: 254, 204, 0;
    --second-color: 255, 149, 0;
    --radius-size: 25px;
    --shadow-custome: #909090 0px 0px 10px 2px;
}

.container.body-container > .row.justify-content-center > .col-md-12.col-xs-12  > link + .slider {
    display: none;
}

.container.body-container > .row.justify-content-center > .col-md-12.col-xs-12  > link + .slider + .option.estekhdam {
    padding: 0;
    margin: 0;
}

.container.body-container > .row.justify-content-center > .col-md-12.col-xs-12  > link + .slider + .option.estekhdam .row {
    justify-content: center;
}

/* level 01  */

.option.estekhdam .box-options {
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    margin: 20px;
    padding: 20px;
    background: linear-gradient(0deg, rgb(var(--third-color)), rgb(var(--black-custome)));
    border-radius: var(--radius-size);
    text-align: center;
}

.option.estekhdam .box-options img {
    width: 85px;
    margin-bottom: 20px;
}

.option.estekhdam .box-options .text-ontions {
    width: fit-content;
    color: black;
    border: 1px solid;
    padding: 10px 20px;
    background-color: rgb(var(--first-color));
    border-radius: var(--radius-size);
    font-weight: 500;
    transition: 0.4s;
    box-shadow: none;
    margin: 0px auto -40px;
    display: block;
}

.option.estekhdam .box-options .text-ontions:hover {
    background-color: rgb(var(--black-custome));
    color: rgb(var(--first-color));
}

/* level 02 */

.option.estekhdam .box-all-job {
    margin-top: 100px;
    padding: 30px;
    background: linear-gradient(0deg, rgb(var(--third-color)), rgb(var(--black-custome)));
    border-radius: var(--radius-size);
    color: white;
}

.option.estekhdam .box-all-job .title-all-job {
    margin-bottom: 20px;
}

.option.estekhdam .box-all-job .state {
    margin-left: 5px;
    position: relative;
}

.option.estekhdam .box-all-job .state::after {
    content: '/';
    margin-right: 5px;
}

.option.estekhdam .read-more-job {
    width: fit-content;
    color: black;
    border: 1px solid;
    padding: 10px 20px;
    background-color: rgb(var(--first-color));
    border-radius: var(--radius-size);
    font-weight: 500;
    transition: 0.4s;
    box-shadow: none;
    margin: 0px auto -50px 0;
    display: block;
}

.option.estekhdam .read-more-job:hover {
    background-color: rgb(var(--black-custome));
    color: rgb(var(--first-color));
}

/* level 03 */

#jobopportunity-info {
    margin-top: 200px !important;
}

#jobopportunity-info #myTab {
    justify-content: center;
    gap: 20px;
    border: none;
}

#jobopportunity-info #myTab .nav-item {
    border-radius: var(--radius-size);
    overflow: hidden;
}

#jobopportunity-info #myTab .nav-item button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 10px 10px 30px;
    border: none;
    background: linear-gradient(180deg, rgb(var(--third-color)), rgb(var(--black-custome)));
    color: white;
    font-weight: 500;
}

#jobopportunity-info #myTab .nav-item button .number-step {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(var(--first-color));
    color: black;
    border-radius: 50%;
}

#jobopportunity-info #myTab .nav-item button.active,
#jobopportunity-info #myTab .nav-item button:hover {
    background: linear-gradient(180deg, #FFE57E, rgb(var(--first-color))); 
    color: black;
}

#jobopportunity-info #myTab .nav-item button.active .number-step,
#jobopportunity-info #myTab .nav-item button:hover .number-step {
    background: linear-gradient(180deg, rgb(var(--third-color)), rgb(var(--black-custome))); 
    color: white;
}

/* level home */

#jobopportunity-info #home {
    background: linear-gradient(180deg, #ffffff, #f0f0f0);
    box-shadow: #90909061 0px 0px 10px 0px;
    border-radius: var(--radius-size);
    padding: 20px 40px;
    margin: 50px 0 ;
}

#jobopportunity-info #home h4 {
    position: relative;
    margin: 30px 0 20px;
} 

#jobopportunity-info #home h4::before {
    content:"";
    position: absolute;
    bottom: -10px;
    right: 0;
    width: 40px;
    height: 3px;
    background-color: rgb(var(--first-color))
}

#jobopportunity-info #home h6 {
    font-weight: 400;
    margin: 10px 0;
}

#jobopportunity-info #home .col-step {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background: linear-gradient(180deg, rgb(var(--third-color)), rgb(var(--black-custome)));
    color: white;
    border-radius: 20px;
}

#jobopportunity-info #home .col-step .btn-step,
#jobopportunity-info #home .link-modal-login {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: fit-content;
    color: black !important;
    border: 1px solid;
    padding: 10px 20px !important;
    background-color: rgb(var(--first-color)) !important;
    border-radius: var(--radius-size) !important;
    font-weight: 500 !important;
    transition: 0.4s;
    box-shadow: none;
    margin: 0px auto 0 0;
    z-index: 5;
}

#jobopportunity-info #home .col-step .btn-step:hover,
#jobopportunity-info #home .link-modal-login:hover {
    background-color: rgb(var(--black-custome)) !important;
    color: rgb(var(--first-color)) !important;
}

#jobopportunity-info #home .list-modal-code {
    display: flex;
    gap: 30px;
    margin: 10px 40px;
}

/* level profile */

#jobopportunity-info #profile {
    background: linear-gradient(0deg, rgb(var(--third-color)), rgb(var(--black-custome)));
    color: white ;
    border-radius: var(--radius-size);
    padding: 20px 40px;
    margin: 50px 0 ;
}

#jobopportunity-info #profile .col-step-two .col-uploads {
    display: flex;
    justify-content: space-between;
    background: linear-gradient(180deg, #ffffff, #f0f0f0);
    color: black;
    box-shadow: #90909061 0px 0px 10px 0px;
    border-radius: 15px;
    padding: 20px 40px;
    margin: 30px 0 ;
}

#jobopportunity-info #profile .col-step-two .col-uploads .fas {
    padding: 0 10px;
}

#jobopportunity-info #profile .box-info-estekhdam  {
    background: linear-gradient(180deg, #ffffff, #f0f0f0);
    color: black;
    box-shadow: #90909061 0px 0px 10px 0px;
    border-radius: 15px;
    padding: 20px 40px;
    margin: 50px 0 ;
}

#jobopportunity-info #profile .box-info-estekhdam h3 {
    position: relative;
    margin: 20px 0 40px;
} 

#jobopportunity-info #profile .box-info-estekhdam h3::before {
    content:"";
    position: absolute;
    bottom: -10px;
    right: 0;
    width: 40px;
    height: 3px;
    background-color: rgb(var(--first-color))
}

#jobopportunity-info #profile .box-info-estekhdam input,
#jobopportunity-info #profile .box-info-estekhdam fieldset,
#jobopportunity-info #profile .box-info-estekhdam select,
#jobopportunity-info #profile .box-info-estekhdam textarea{
    background: linear-gradient(180deg, #FFE57E, rgb(var(--first-color)));
    color: black !important;
    border: none;
    margin: 15px;
    border-radius: 10px;
}

#jobopportunity-info #profile .box-info-estekhdam input::placeholder {
    color: black;
}

#jobopportunity-info #profile .box-info-estekhdam fieldset {
    margin-left: -15px;
}

#jobopportunity-info #profile .box-info-estekhdam .form-check {
    display: inline-block;
    margin-top: 7px;
    padding: 0 20px;
}

#jobopportunity-info #profile .box-info-estekhdam .form-check input {
    margin: 5px -15px 0px 15px;
}

#jobopportunity-info #profile .box-info-estekhdam:nth-child(2) legend {
    display: none;
}

#jobopportunity-info #profile .box-info-estekhdam:nth-child(2) fieldset legend {
    display: flex;
}

#jobopportunity-info #profile .box-info-estekhdam .add-button,
#jobopportunity-info #profile .footer-box-estekhdam .btn {
    width: fit-content;
    color: black;
    border: 1px solid;
    padding: 10px 35px;
    background-color: rgb(var(--first-color));
    border-radius: var(--radius-size);
    font-weight: 500;
    transition: 0.4s;
    box-shadow: none;
    margin: 0px auto -40px 0;
    display: block;
}

#jobopportunity-info #profile .box-info-estekhdam .add-button:hover,
#jobopportunity-info #profile .footer-box-estekhdam .btn:hover{
    background-color: rgb(var(--black-custome));
    color: rgb(var(--first-color));
}

#jobopportunity-info #profile .box-info-estekhdam .btn-danger {
    width: fit-content;
    color: black;
    border: 1px solid;
    padding: 3px 25px 0px;
    margin: 0 15px;
    background-color: rgb(var(--black-custome));
    color: rgb(var(--first-color));
    border-radius: var(--radius-size);
    font-weight: 500;
    transition: 0.4s;
    font-size: 20px;
}

#jobopportunity-info #profile .box-info-estekhdam .btn-danger:hover {
    background-color: rgb(var(--first-color));
    color:black;
}

@media (max-width: 768px) {
    #jobopportunity-info #profile {
        padding: 20px ;
    }

    #jobopportunity-info #profile .col-step-two .col-uploads {
        flex-direction: column;
        gap: 20px;
    }

    #jobopportunity-info #profile .box-info-estekhdam  {
        padding: 20px 20px 20px 40px;
    }

    #jobopportunity-info #profile .box-info-estekhdam fieldset {
        padding: 40px 0 10px;
        position: relative;
    }

    #jobopportunity-info #profile .box-info-estekhdam fieldset legend {
        position: absolute;
        top: 4px;
    }
}

/* level contact */

#jobopportunity-info #contact {
    background: linear-gradient(180deg, #ffffff, #f0f0f0);
    box-shadow: #90909061 0px 0px 10px 0px;
    border-radius: var(--radius-size);
    padding: 20px 40px;
    margin: 50px 0 ;
}

#jobopportunity-info #contact a {
    width: fit-content;
    color: black;
    border: 1px solid;
    padding: 10px 35px;
    background-color: rgb(var(--first-color));
    border-radius: var(--radius-size);
    font-weight: 500;
    transition: 0.4s;
    box-shadow: none;
    margin: 0px auto -40px 0;
    display: block;
}

#jobopportunity-info #contact a:hover {
    background-color: rgb(var(--black-custome));
    color: rgb(var(--first-color));
}