/* ==========================================
   JOB DETAILS PAGE
========================================== */

.job-details-page{
    width:100%;
}


/* ==========================================
   JOB HERO
========================================== */

.job-details-hero{

    background:var(--primary);

    color:#fff;

}


.job-details-hero-container{

    width:90%;
    max-width:1400px;

    margin:auto;

    min-height:240px;

    display:flex;
    align-items:center;

    gap:30px;

    padding:45px 10px;

}


/* ==========================================
   COMPANY LOGO
========================================== */

.job-details-company-logo{

    width:130px;
    height:130px;

    flex-shrink:0;

    background:#fff;

    border-radius:6px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

}


.job-details-company-logo img{

    width:100%;
    height:100%;

    object-fit:contain;

}


.job-details-company-logo-placeholder{

    width:65px;
    height:65px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#f1f5f9;

    color:var(--primary);

    font-size:30px;
    font-weight:700;

}


/* ==========================================
   HERO CONTENT
========================================== */

.job-details-hero-content{

    flex:1;

}


.job-details-title{

    margin:0 0 8px;

    color:#fff;

    font-size:38px;

    line-height:1.2;

}


.job-details-company-name{

    margin:0 0 25px;

    color:#fff;

    font-size:18px;

}


.job-details-meta{

    display:flex;

    flex-wrap:wrap;

    gap:28px;

}


.job-details-meta-item{

    display:flex;
    align-items:center;

    gap:9px;

    font-size:15px;

}


.job-details-meta-icon{

    font-size:16px;

}

.job-details-meta-icon img{
    width: 16px;
}


.job-details-posted{

    margin-top:25px;

    display:flex;
    align-items:center;

    gap:15px;

    font-size:14px;

    color:#e6edf7;

}


/* ==========================================
   HERO ACTIONS
========================================== */

.job-details-hero-actions{

    min-width:210px;

    display:flex;
    flex-direction:column;

    align-items:center;

    gap:18px;

}


.job-details-apply-button-upper{

    width:100%;

    padding:15px 20px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    border-radius:6px;

    background:#fff;

    color:var(--primary);

    font-weight:700;

    text-decoration:none;

    transition:.25s;

}


.job-details-apply-button-upper:hover{

    background:var(--secondary);

    color:#fff;

    transform:translateY(-2px);

}


/* ==========================================
   MAIN CONTENT
========================================== */

.job-details-content-section{

    padding:30px 0 70px;

}


.job-details-content-container{

    width:94%;
    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:minmax(0, 2fr) minmax(300px, 1fr);

    gap:18px;

}


/* ==========================================
   CONTENT CARDS
========================================== */

.job-details-content-card,
.job-details-sidebar-card{

    background:#fff;

    border:1px solid #e4e8ee;

    border-radius:8px;

    padding:28px;

}


.job-details-main-content{

    display:flex;

    flex-direction:column;

    gap:0;

}


/* ==========================================
   SECTION HEADINGS
========================================== */

.job-details-section-heading,
.job-details-sidebar-heading{

    display:flex;

    align-items:center;

    gap:14px;

}


.job-details-section-heading{

    margin-bottom:20px;

}


.job-details-section-heading img,
.job-details-sidebar-heading img{

    width: 34px;
}


.job-details-section-heading h2,
.job-details-sidebar-heading h2{

    margin:0;

    color:var(--primary);

    font-size:20px;

}


/* ==========================================
   DESCRIPTION
========================================== */

.job-details-description{

    color:#20252c;

    font-size:15px;

    line-height:1.8;

}


.job-details-description p{

    margin-bottom:15px;

}


.job-details-description p:last-child{

    margin-bottom:0;

}


/* ==========================================
   LISTS
========================================== */

.job-details-list{

    margin:0;

    padding-left:20px;

    color:#20252c;

    font-size:15px;

    line-height:1.9;

}


.job-details-list li{
    font-size: 15px;
    margin-bottom:3px;

}


/* ==========================================
   SEPARATOR BETWEEN CONTENT CARDS
========================================== */

.job-details-content-card + .job-details-content-card{

    border-top-left-radius:0;
    border-top-right-radius:0;

    border-top:0;

}


/* ==========================================
   WHAT WE OFFER
========================================== */

.job-details-offers-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;

}


/* ==========================================
   INLINE APPLY
========================================== */

.job-details-apply-container{
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.job-details-apply-button-bottom{

    width: 200px;

    border: none;

    padding:13px 20px;

    background:var(--primary);

    color:#fff;

    border-radius:5px;

    text-decoration:none;

    font-size:18px;

    font-weight:500;

    white-space:nowrap;

    text-align:center;

}


.job-details-apply-button-bottom:hover{

    background:var(--secondary);

}


/* ==========================================
   SIDEBAR
========================================== */

.job-details-sidebar{

    display:flex;

    flex-direction:column;

    gap:15px;

}


.job-details-sidebar-card{

    padding:26px;

}


.job-details-sidebar-heading{

    margin-bottom:20px;

}


/* ==========================================
   JOB OVERVIEW
========================================== */

.job-details-overview-list{

    display:flex;

    flex-direction:column;

}


.job-details-overview-item{

    display:flex;

    gap:15px;

    padding:15px 0;

    border-bottom:1px solid #e7ebf0;

}


.job-details-overview-item:first-child{

    padding-top:0;

}


.job-details-overview-item:last-child{

    border-bottom:0;

    padding-bottom:0;

}


.job-details-overview-item > img{

    width:22px;
    height: 22px;
    flex-shrink:0;

    color:var(--primary);

    font-size:17px;

    margin-top:3px;

}


.job-details-overview-item div{

    display:flex;

    flex-direction:column;

    gap:5px;

}


.job-details-overview-item span{

    font-size:14px;

    color:#555;

}


.job-details-overview-item strong{

    font-size:14px;

    color:#20252c;

    font-weight:500;

}


/* ==========================================
   ABOUT COMPANY
========================================== */

.job-details-company-description p{

    margin:0;

    color:#444;

    font-size:14px;

    line-height:1.8;

}


.job-details-company-website{

    margin-top:22px;

    display:inline-flex;

    align-items:start;

    gap:10px;

    padding:11px 18px;

    border:1px solid var(--primary);

    border-radius:5px;

    color:var(--primary);

    text-decoration:none;

    font-size:14px;

    font-weight:600;

}


.job-details-company-website:hover{

    background:var(--primary);

    color:#fff;

}

.job-details-company-website img{
    width: 14px;
}


/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:1000px){

    .job-details-hero-container{

        flex-wrap:wrap;

    }


    .job-details-hero-actions{

        width:100%;

        flex-direction:row;

        justify-content:flex-start;

    }


    .job-details-apply-button-upper{

        width:auto;

    }


    .job-details-content-container{

        grid-template-columns:1fr;

    }

}


@media(max-width:700px){

    .job-details-breadcrumb{

        width:90%;

        font-size:12px;

        overflow:hidden;

        white-space:nowrap;

    }


    .job-details-hero-container{

        width:90%;

        padding:35px 0;

        gap:20px;

    }


    .job-details-company-logo{

        width:90px;
        height:90px;

    }


    .job-details-title{

        font-size:28px;

    }


    .job-details-company-name{

        margin-bottom:18px;

    }


    .job-details-meta{

        flex-direction:column;

        gap:12px;

    }


    .job-details-hero-actions{

        flex-direction:column;

        align-items:stretch;

    }


    .job-details-apply-button-bottom{

        width:100%;

    }


    .job-details-content-section{

        padding-top:20px;

    }


    .job-details-content-container{

        width:92%;

    }


    .job-details-content-card,
    .job-details-sidebar-card{

        padding:20px;

    }


    .job-details-offers-grid{

        grid-template-columns:1fr;

        gap:0;

    }


    .job-details-inline-apply{

        flex-wrap:wrap;

    }


    .job-details-inline-apply-button{

        width:100%;

        text-align:center;

    }

}

/* ==========================================
   JOB APPLICATIO FORM SHOW
========================================== */
.job-application-form-section {
    display: none;
}

.job-application-form-section.active {
    display: block;
}