/* =========================================
   LIGHT MODERN CAREER DETAILS UI
========================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* =========================================
   GLOBAL
========================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f3f6fb;
    overflow-x:hidden;
}

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

.career-details-section{
    position:relative;
    padding:90px 0 !important;
    background:
        radial-gradient(circle at top left,
        rgba(37,99,235,0.08),
        transparent 30%),

        radial-gradient(circle at bottom right,
        rgba(139,92,246,0.08),
        transparent 30%),

        #f3f6fb !important;

    overflow:hidden;
}

/* =========================================
   CONTAINER
========================================= */

.career-details-section .container{
    max-width:1280px;
    position:relative;
    z-index:2;
}

/* =========================================
   ROW
========================================= */

.career-details-section .row{
    align-items:flex-start;
}

/* =========================================
   CARD
========================================= */

.career-details-section .card{
    background:#ffffff !important;

    border:none !important;

    border-radius:34px !important;

    overflow:hidden;

    box-shadow:
        0 15px 40px rgba(15,23,42,0.08);

    transition:.4s ease;
}

.career-details-section .card:hover{
    transform:translateY(-4px);

    box-shadow:
        0 20px 50px rgba(37,99,235,0.10);
}

/* =========================================
   CARD BODY
========================================= */

.career-details-section .card-body{
    padding:42px !important;
}

/* =========================================
   BADGE
========================================= */

.badge{
    background:linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    ) !important;

    border:none;

    padding:10px 18px !important;

    border-radius:50px !important;

    font-size:12px;
    font-weight:600;
    letter-spacing:.5px;
}

/* =========================================
   TITLE
========================================= */

.career-details-section h1{
    font-size:54px;
    font-weight:800;
    color:#111827;
    line-height:1.25;
    margin-top:12px;
}

/* =========================================
   META GRID
========================================= */

.career-details-section .row.g-4{
    row-gap:20px;
    margin-bottom:45px !important;
}

/* =========================================
   META BOX
========================================= */

.career-meta-box{
    display:flex;
    align-items:center;
    gap:16px;

    background:#f8fafc;

    border:1px solid #e2e8f0;

    padding:22px;

    border-radius:24px;

    min-height:110px;

    transition:.4s ease;

    position:relative;
    overflow:hidden;
}

.career-meta-box:hover{
    transform:translateY(-5px);

    border-color:#bfdbfe;

    background:#ffffff;

    box-shadow:
        0 15px 30px rgba(37,99,235,0.10);
}

/* =========================================
   META ICON
========================================= */

.career-meta-box i{
    width:56px;
    height:56px;
    min-width:56px;

    border-radius:18px;

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

    background:linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    color:#fff;

    font-size:18px;

    box-shadow:
        0 10px 20px rgba(37,99,235,0.18);

    transition:.4s ease;
}

.career-meta-box:hover i{
    transform:rotate(8deg) scale(1.08);
}

/* =========================================
   META TEXT
========================================= */

.career-meta-box small{
    display:block;

    font-size:12px;

    color:#64748b;

    margin-bottom:5px;
}

.career-meta-box h6{
    font-size:15px;
    color:#111827;
    margin:0;
    line-height:1.6;
}

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

.career-description{
    color:#475569;
    font-size:15px;
    line-height:2;
}

.career-description h4{
    color:#1e293b;
    font-size:34px;
    margin-bottom:24px !important;
}

/* =========================================
   RIGHT FORM CARD
========================================= */

.sticky-top{
    top:110px !important;
}

/* =========================================
   APPLY TITLE
========================================= */

.sticky-top h3{
    font-size:40px;
    font-weight:800;
    color:#1e293b;
    margin-bottom:30px !important;
}

/* =========================================
   LABEL
========================================= */

.form-label{
    color:#475569;
    font-size:14px;
    font-weight:500;
    margin-bottom:10px;
}

/* =========================================
   INPUT
========================================= */

.form-control{
    height:58px;

    background:#f8fafc !important;

    border:1px solid #dbe4ee !important;

    border-radius:18px !important;

    color:#111827 !important;

    padding:14px 18px !important;

    font-size:14px;

    transition:.3s ease;
}

.form-control::placeholder{
    color:#94a3b8;
}

.form-control:hover{
    border-color:#cbd5e1 !important;
}

.form-control:focus{
    background:#fff !important;

    border-color:#3b82f6 !important;

    box-shadow:
        0 0 0 4px rgba(37,99,235,0.10) !important;
}

/* =========================================
   TEXTAREA
========================================= */

textarea.form-control{
    height:auto;
    min-height:140px;
    resize:none;
}

/* =========================================
   FILE INPUT
========================================= */

input[type="file"]{
    padding-top:14px !important;
    cursor:pointer;
}

/* =========================================
   BUTTON
========================================= */

#applyBtn{
    position:relative;
    overflow:hidden;

    height:60px;

    border:none !important;

    border-radius:60px !important;

    background:linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    ) !important;

    font-size:15px;
    font-weight:600;

    box-shadow:
        0 12px 28px rgba(37,99,235,0.20);

    transition:.4s ease;
}

/* BUTTON SHINE */

#applyBtn::before{
    content:'';

    position:absolute;

    top:0;
    left:-120%;

    width:100%;
    height:100%;

    background:rgba(255,255,255,0.20);

    transform:skewX(-25deg);

    transition:.6s;
}

#applyBtn:hover::before{
    left:120%;
}

#applyBtn:hover{
    transform:translateY(-3px);

    box-shadow:
        0 18px 35px rgba(37,99,235,0.30);
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:991px){

    .sticky-top{
        position:relative !important;
        top:0 !important;
    }

    .career-details-section h1{
        font-size:42px;
    }

}

@media(max-width:767px){

    .career-details-section{
        padding:55px 0 !important;
    }

    .career-details-section .container{
        padding-left:16px;
        padding-right:16px;
    }

    .career-details-section .row{
        row-gap:24px;
    }

    .career-details-section .card{
        border-radius:24px !important;
    }

    .career-details-section .card-body{
        padding:24px 18px !important;
    }

    .career-details-section h1{
        font-size:32px;
        line-height:1.35;
    }

    .career-description h4{
        font-size:26px;
    }

    .career-description{
        font-size:14px;
        line-height:1.9;
    }

    .career-meta-box{
        padding:18px;
        border-radius:18px;
    }

    .career-meta-box i{
        width:48px;
        height:48px;
        min-width:48px;

        border-radius:14px;
        font-size:15px;
    }

    .sticky-top h3{
        font-size:30px;
    }

    .form-control{
        height:54px;
        border-radius:15px !important;
        font-size:13px;
    }

    textarea.form-control{
        min-height:120px;
    }

    #applyBtn{
        height:54px;
        font-size:14px;
    }

}

/* =========================================
   EXTRA SMALL DEVICE
========================================= */

@media(max-width:480px){

    .career-details-section{
        padding:45px 0 !important;
    }

    .career-details-section h1{
        font-size:26px;
    }

    .career-details-section .card-body{
        padding:20px 16px !important;
    }

    .career-description h4{
        font-size:22px;
    }

    .career-description{
        font-size:13px;
    }

    .career-meta-box{
        padding:16px;
    }

    .career-meta-box i{
        width:42px;
        height:42px;
        min-width:42px;

        border-radius:12px;
        font-size:14px;
    }

    .career-meta-box small{
        font-size:11px;
    }

    .career-meta-box h6{
        font-size:13px;
    }

    .sticky-top h3{
        font-size:24px;
    }

    .form-label{
        font-size:13px;
    }

    .form-control{
        height:50px;
        font-size:12px;
    }

    textarea.form-control{
        min-height:110px;
    }

    #applyBtn{
        height:50px;
        font-size:13px;
    }

}