/* =========================
   HOME PAGE
========================= */


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

.hero {

    width:100%;

    padding:60px 30px;

    background:white;

    border-radius:20px;

    text-align:center;

    overflow:hidden;

}



.hero h1 {

    overflow-wrap:anywhere;

    margin-bottom:25px;

}



.hero p {

    line-height:1.6;

    margin-bottom:20px;

    color:#444;

}



/* =========================
   SEARCH
========================= */


.search {

    margin-top:35px;

    margin-bottom:25px;

}



.search input {

    width:100%;

    max-width:700px;

    padding:15px;

    border-radius:10px;

    border:1px solid #ddd;

}



/* =========================
   HERO BUTTONS
========================= */


.hero-buttons {

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin-top:25px;

    flex-wrap:wrap;

}



.career-nav-button {

    background:#f1f3f5;

    color:#222;

    padding:14px 25px;

    border-radius:10px;

    text-decoration:none;

    font-weight:bold;

}




/* =========================
   HERO INFO
========================= */


.hero-info {

    margin-top:35px;

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

}



.hero-info p {

    margin:0;

}



/* =========================
   CATEGORIES
========================= */


.categories {

    width:100%;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(180px,1fr));

    gap:20px;

    margin-top:30px;

}



.category-card {

    width:100%;

    background:white;

    padding:30px 20px;

    border-radius:18px;

    text-align:center;

    font-size:18px;

    font-weight:bold;

    box-shadow:
    0 5px 15px rgba(0,0,0,0.05);

}




/* =========================
   JOB CARDS
========================= */


.job-card {

    width:100%;

    background:white;

    padding:25px;

    margin:20px 0;

    border-radius:15px;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    flex-wrap:wrap;

}



.job-title {

    overflow-wrap:anywhere;

}



.job-button {

    display:flex;

    align-items:center;

    gap:10px;

    background:#2563eb;

    color:white;

    padding:12px 20px;

    border-radius:12px;

    text-decoration:none;

    max-width:100%;

}




/* =========================
   EMAIL BOX
========================= */


.email-box {

    background:white;

    padding:40px;

    margin-top:50px;

    border-radius:20px;

}




/* =========================
   CV PROMO
========================= */


.cv-promo {

    background:#f1f5ff;

    padding:25px;

    border-radius:20px;

    max-width:420px;

}




/* =========================
   PAGE SECTIONS
========================= */


.page-section {

    margin-top:70px;

    margin-bottom:70px;

}




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


@media(max-width:700px){


    .hero {

        padding:30px 20px;

    }



    .hero h1 {

        margin-bottom:20px;

    }



    .hero-buttons {

        flex-direction:column;

        gap:15px;

    }



    .hero-buttons a {

        width:100%;

        text-align:center;

    }



    .hero-info {

        flex-direction:column;

        gap:10px;

    }



    .categories {

        grid-template-columns:1fr;

    }



    .job-card {

        flex-direction:column;

    }



    .job-button {

        width:100%;

        justify-content:center;

    }


}