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


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


html{
    scroll-behavior:smooth;
}


body{

    font-family:"Poppins",sans-serif;

    background:#f8fafc;

    color:#1f2937;

}


.container{

    width:100%;

    max-width:1200px;

    margin:auto;

    padding:0 20px;

}



a{

    text-decoration:none;

}





/* =====================================
   HEADER
===================================== */


.header{

    position:sticky;

    top:0;

    z-index:999;

    background:white;

    box-shadow:
    0 5px 20px rgba(0,0,0,.08);

}



.nav-container{

    height:80px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo{

    font-size:28px;

    font-weight:800;

    color:#0b1f3a;

    font-family:"Playfair Display",serif;

}


.logo span{

    color:#f4b400;

}



nav{

    display:flex;

    gap:30px;

}


nav a{

    color:#333;

    font-weight:500;

    transition:.3s;

}


nav a:hover{

    color:#0066ff;

}



.nav-btn{

    background:#0066ff;

    color:white;

    padding:12px 25px;

    border-radius:30px;

}






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


.career-hero{

    background:

    linear-gradient(
    135deg,
    #0b1f3a,
    #0066ff
    );

    padding:100px 0;

    color:white;

}



.hero-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:50px;

}



.hero-text h1{

    font-size:55px;

    line-height:1.2;

    font-family:"Playfair Display",serif;

}



.hero-text p{

    margin:25px 0;

    font-size:18px;

    color:#e5e7eb;

    line-height:1.7;

}



.hero-buttons{

    display:flex;

    gap:20px;

}



.primary-btn{

    background:#f4b400;

    color:#111;

    padding:15px 35px;

    border-radius:50px;

    font-weight:600;

    display:inline-block;

}



.secondary-btn{

    border:2px solid white;

    color:white;

    padding:13px 35px;

    border-radius:50px;

}



.puzzle-box{

    width:300px;

    height:300px;

    margin:auto;

    background:

    rgba(255,255,255,.15);

    border-radius:40px;

    display:flex;

    justify-content:center;

    align-items:center;

    animation:float 3s infinite ease-in-out;

}


.puzzle-box i{

    font-size:120px;

    color:#f4b400;

}



@keyframes float{

    50%{

        transform:translateY(-20px);

    }

}






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


.section-title{

    text-align:center;

    margin-bottom:50px;

}


.section-title h2{

    font-family:"Playfair Display",serif;

    font-size:42px;

    color:#0b1f3a;

}



.section-title p{

    color:#666;

    margin-top:10px;

}





/* =========================
   WHY JOIN US SECTION
========================= */

.why-section{
    position:relative;
    padding:20px 20px;
    overflow:hidden;
    background:var(--smoke-color);
}


.why-section::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    top:-180px;
    right:-150px;
    border-radius:50%;
    background:var(--theme-color);
    opacity:.05;
}


.why-section::after{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    bottom:-120px;
    left:-100px;
    border-radius:50%;
    background:var(--theme-color2);
    opacity:.06;
}



.why-section .container{
    position:relative;
    z-index:2;
    max-width:var(--main-container);
    margin:auto;
}



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

.why-section .section-title{
    text-align:center;
    max-width:750px;
    margin:0 auto 60px;
}


.why-section .section-title h2{

    margin:0 0 15px;

    font-family:var(--title-font);

    font-size:48px;

    font-weight:700;

    color:var(--title-color);

}



.why-section .section-title p{

    margin:0;

    color:var(--body-color);

    font-size:18px;

    line-height:1.7;

}



/* =========================
 WHY GRID
========================= */


.why-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}



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


.why-card{

    position:relative;

    padding:40px 30px;

    text-align:center;

    background:var(--white-color);

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

    border-radius:20px;

    transition:var(--transition);

    overflow:hidden;

}



.why-card::before{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:3px;

    background:var(--theme-color2);

    transform:scaleX(0);

    transform-origin:left;

    transition:.5s ease;

}



.why-card:hover::before{

    transform:scaleX(1);

}



.why-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 60px rgba(0,0,0,.10);

}




/* ICON */


.why-card i{

    display:flex;

    align-items:center;

    justify-content:center;

    width:75px;

    height:75px;

    margin:0 auto 25px;

    border-radius:50%;

    background:var(--smoke-color);

    color:var(--theme-color);

    font-size:34px;

    transition:.4s ease;

}



.why-card:hover i{

    background:var(--theme-color);

    color:var(--white-color);

    transform:rotateY(180deg);

}



/* TITLE */


.why-card h3{

    margin:0 0 15px;

    font-family:var(--title-font);

    font-size:22px;

    font-weight:600;

    color:var(--title-color);

}



/* TEXT */


.why-card p{

    margin:0;

    color:var(--body-color);

    font-size:15px;

    line-height:1.7;

}




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


@media(max-width:1200px){

    .why-grid{

        grid-template-columns:repeat(2,1fr);

    }

}



@media(max-width:768px){

    .why-section{

        padding:80px 20px;

    }


    .why-section .section-title h2{

        font-size:36px;

    }


    .why-grid{

        grid-template-columns:1fr;

    }


    .why-card{

        padding:35px 25px;

    }

}



/* =========================
 UNIQUE DEPARTMENT SECTION
========================= */


.pd-department-area{

    position:relative;

    padding:20px 20px;

    background:var(--white-color);

    overflow:hidden;

}



.pd-department-area::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:var(--theme-color);

    opacity:.04;

    border-radius:50%;

    top:-250px;

    left:-200px;

}



.pd-department-area .container{

    position:relative;

    z-index:2;

}



/* Heading */


.pd-department-heading{

    text-align:center;

    max-width:750px;

    margin:auto auto 70px;

}


.pd-department-heading span{

    display:inline-block;

    padding:8px 22px;

    border-radius:40px;

    background:var(--smoke-color);

    color:var(--theme-color2);

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

}



.pd-department-heading h2{

    font-size:50px;

    line-height:1.2;

    color:var(--title-color);

    margin-bottom:20px;

}



.pd-department-heading p{

    color:var(--body-color);

    font-size:18px;

}



/* Grid */


.pd-department-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



/* Card */


.pd-department-box{

    position:relative;

    padding:45px 35px;

    border-radius:28px;

    background:var(--smoke-color);

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

    overflow:hidden;

    transition:var(--transition);

}



.pd-department-box:hover{

    transform:translateY(-12px);

    background:var(--white-color);

    box-shadow:0 30px 70px rgba(0,0,0,.12);

}




/* Number */


.pd-card-number{

    position:absolute;

    right:25px;

    top:20px;

    font-size:70px;

    font-weight:800;

    color:var(--border-color);

}



/* Icon */


.pd-icon-wrap{

    width:80px;

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    background:var(--theme-color);

    color:var(--white-color);

    font-size:35px;

    margin-bottom:30px;

    transition:.5s ease;

}



.pd-department-box:hover .pd-icon-wrap{

    background:var(--theme-color2);

    transform:rotateY(180deg);

}



/* Title */


.pd-department-box h3{

    font-size:26px;

    color:var(--title-color);

    margin-bottom:12px;

}



/* Description */


.pd-department-box p{

    color:var(--body-color);

    line-height:1.7;

    margin-bottom:25px;

}



/* Jobs */


.pd-job-list{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:30px;

}



.pd-job-list span{

    padding:8px 14px;

    border-radius:30px;

    background:var(--white-color);

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

    color:var(--body-color);

    font-size:13px;

}




/* Link */


.pd-department-box a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--theme-color);

    font-weight:600;

    text-decoration:none;

}



.pd-department-box a i{

    transition:.3s;

}


.pd-department-box a:hover i{

    transform:translateX(6px);

}



/* Responsive */


@media(max-width:992px){

.pd-department-grid{

grid-template-columns:repeat(2,1fr);

}

}



@media(max-width:768px){

.pd-department-heading h2{

font-size:36px;

}


.pd-department-grid{

grid-template-columns:1fr;

}

}





/* =========================
 JOB OPENINGS
========================= */


.pd-jobs-section{

    position:relative;

    padding:30px 20px;

    background:var(--smoke-color);

    overflow:hidden;

}



.pd-jobs-heading{

    text-align:center;

    max-width:700px;

    margin:0 auto 70px;

}



.pd-jobs-heading span{

    display:inline-block;

    padding:8px 20px;

    background:var(--white-color);

    color:var(--theme-color2);

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

}



.pd-jobs-heading h2{

    font-size:50px;

    color:var(--title-color);

    margin-bottom:15px;

}



.pd-jobs-heading p{

    color:var(--body-color);

    font-size:17px;

}



/* Grid */


.pd-jobs-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



/* Card */


.pd-job-card{

    position:relative;

    padding:35px;

    background:var(--white-color);

    border-radius:25px;

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

    transition:var(--transition);

    overflow:hidden;

}



.pd-job-card::before{

    content:"";

    position:absolute;

    width:100%;

    height:4px;

    left:0;

    top:0;

    background:var(--theme-color);

    transform:scaleX(0);

    transition:.4s;

}



.pd-job-card:hover::before{

    transform:scaleX(1);

}



.pd-job-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}



/* Top */


.pd-job-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}



.pd-job-top i{

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    background:var(--smoke-color);

    color:var(--theme-color);

    font-size:25px;

}



.pd-job-top span{

    padding:7px 15px;

    border-radius:30px;

    background:var(--smoke-color);

    color:var(--body-color);

    font-size:13px;

}




/* Content */


.pd-job-card h3{

    font-size:24px;

    color:var(--title-color);

    margin-bottom:12px;

}



.pd-job-card p{

    color:var(--body-color);

    line-height:1.7;

}



/* Experience */


.pd-experience{

    margin:20px 0;

    color:var(--theme-color2);

    font-weight:600;

}



/* Skills */


.pd-skills{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:25px;

}



.pd-skills span{

    padding:7px 12px;

    border-radius:20px;

    background:var(--smoke-color);

    color:var(--body-color);

    font-size:13px;

}



/* Button */


.pd-job-card a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--theme-color);

    font-weight:600;

    text-decoration:none;

}



.pd-job-card a i{

    transition:.3s;

}


.pd-job-card a:hover i{

    transform:translateX(6px);

}



/* Responsive */


@media(max-width:992px){

.pd-jobs-grid{

grid-template-columns:repeat(2,1fr);

}

}


@media(max-width:768px){

.pd-jobs-grid{

grid-template-columns:1fr;

}


.pd-jobs-heading h2{

font-size:36px;

}

}




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


@media(max-width:992px){


.hero-content{

grid-template-columns:1fr;

text-align:center;

}


.why-grid,
.department-grid,
.job-grid,
.benefits-grid,
.process-wrapper{

grid-template-columns:repeat(2,1fr);

}


nav{

display:none;

}


}


@media(max-width:576px){


.hero-text h1{

font-size:35px;

}


.hero-buttons,
.cta-buttons{

flex-direction:column;

}


.why-grid,
.department-grid,
.job-grid,
.benefits-grid,
.process-wrapper{

grid-template-columns:1fr;

}



.internship-box{

flex-direction:column;

gap:30px;

text-align:center;

}


}







.career-application{

padding:90px 0;
background:#f8fafc;

}


.application-form{

background:white;

padding:40px;

border-radius:25px;

box-shadow:
0 15px 40px rgba(0,0,0,.08);

}



.form-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:25px;

}



.form-group{

display:flex;

flex-direction:column;

gap:8px;

}



.form-group label{

font-weight:600;

color:#0b1f3a;

}



.form-group input,
.form-group select,
.form-group textarea{


padding:14px;
height:60px;

border:1px solid #ddd;

border-radius:10px;

font-size:15px;

outline:none;

}


.full-width{

grid-column:1/-1;

}
.submit-btn{

margin-top:30px;

/* width:100%; */

padding:16px;

border:none;

border-radius:50px;

background:

linear-gradient(
135deg,
#0066ff,
#0b1f3a
);

color:white;

font-size:17px;

font-weight:600;

cursor:pointer;

transition:.3s;

}



.submit-btn:hover{

transform:translateY(-3px);

box-shadow:
0 15px 30px rgba(0,102,255,.3);

}



@media(max-width:768px){

.form-grid{

grid-template-columns:1fr;

}

.application-form{

padding:25px;

}

}