@font-face {
    font-family: "Guminert";
    src: url("/fonts/Century Gothic.otf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

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

    .hero-banner {

        width: 100%;

        min-height: 50vh;

        display: flex;

        align-items: center;

        background: #fff;

        padding: 150px 0 20px;

    }

    .hero-banner-container {

        width: 90%;

        max-width: 1550px;

        margin: auto;

    }

    .hero-banner h1 {

        font-size: clamp(50px, 5vw, 82px);

        font-weight: 800;

        line-height: 1.08;

        color: #111;

        max-width: 1350px;

        font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;

        margin: 0;

    }

    .hero-banner h1 span {

        background: linear-gradient(90deg,
                #ff944d,
                #ff5f8f,
                #7b3ff2,
                #4f46e5);

        -webkit-background-clip: text;

        -webkit-text-fill-color: transparent;
        font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;

    }

    .hero-banner p {

        margin-top: 35px;

        font-size: 20px;

        line-height: 1.6;

        color: #222;

        font-weight: 400;
        font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;

    }

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

/* Large Desktop */
@media screen and (max-width:1440px){

    .hero-banner-container{
        max-width:1400px;
    }

    .hero-banner h1{
        font-size:clamp(48px,5vw,76px);
        max-width:1200px;
    }

    .hero-banner p{
        font-size:19px;
    }

}

/* Laptop */
@media screen and (max-width:1152px){

    .hero-banner{
        padding:140px 0 40px;
    }

    .hero-banner-container{
        width:92%;
    }

    .hero-banner h1{
        font-size:clamp(44px,5vw,64px);
        line-height:1.1;
    }

    .hero-banner p{
        font-size:18px;
        margin-top:28px;
    }

}

/* Tablets */
@media (max-width:992px){

    .hero-banner{
        min-height:auto;
        padding:120px 0 50px;
    }

    .hero-banner-container{
        width:92%;
    }

    .hero-banner h1{
        font-size:52px;
        line-height:1.15;
        letter-spacing:-1px;
    }

    .hero-banner p{
        margin-top:22px;
        font-size:18px;
        line-height:1.7;
    }

}

/* Large Phones */
@media (max-width:768px){

    .hero-banner{
        padding:100px 0 40px;
    }

    .hero-banner-container{
        width:94%;
    }

    .hero-banner h1{
        font-size:40px;
        line-height:1.2;
        letter-spacing:-1px;
    }

    .hero-banner p{
        margin-top:18px;
        font-size:17px;
        line-height:1.7;
    }

}

/* Medium Phones */
@media (max-width:576px){

    .hero-banner{
        padding:90px 0 35px;
    }

    .hero-banner-container{
        width:95%;
    }

    .hero-banner h1{
        font-size:34px;
        line-height:1.25;
        letter-spacing:-0.5px;
    }

    .hero-banner p{
        margin-top:16px;
        font-size:16px;
        line-height:1.7;
    }

}

/* Small Phones */
@media (max-width:480px){

    .hero-banner{
        padding:85px 0 30px;
    }

    .hero-banner-container{
        width:95%;
    }

    .hero-banner h1{
        font-size:30px;
        line-height:1.3;
    }

    .hero-banner p{
        margin-top:15px;
        font-size:15px;
        line-height:1.7;
    }

}

/* Extra Small Phones */
@media (max-width:320px){

    .hero-banner{
        padding:100px 0 25px;
    }

    .hero-banner-container{
        width:96%;
    }

    .hero-banner h1{
        font-size:28px;
        line-height:1.35;
        letter-spacing:0;
    }

    .hero-banner p{
        margin-top:12px;
        font-size:16px;
        line-height:1.6;
    }

}


    /* Opening Setion */

    .container {
      width: 100%;
      max-width: 900px;
      text-align: center;
      padding: 80px 0 150px 0;
    }

    /* Heading */
    .heading {
      font-size: 2.5rem;
      font-weight: 600;
      color: black;
      margin-bottom: 25px;
      font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;
    }


    /* Job List Container */
    .job-list {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    /* Single Job Item */
    .job-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 25px;
      border-bottom: 1px solid #e0e0e0;
      text-align: left;
      padding-top: 30px;
    }

    .job-title {
      font-size: 18px;
      font-weight: 500;
      color: black;
      flex: 1;
      font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;
    }

    .job-details {
      display: flex;
      align-items: center;
      gap: 40px;
      font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;
    }

    .job-type {
      font-size: 0.9rem;
      color: #555555;
      font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;
    }

    .btn-know-more {
      background-color: #01526d;
      color: #ffffff;
      border: none;
      padding: 10px 22px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.2s ease;
      border-radius: 5px;
      font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;
    }

    .btn-know-more:hover {
      background-color: white;
      color: #01526d;
      border: 1px solid #01526d;

    }

    /* Modal */

.job-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
    padding:20px;
}

.job-modal-content{
    background:#fff;
    width:100%;
    max-width:850px;
    max-height:90vh;
    overflow-y:auto;
    border-radius:12px;
    padding:35px;
    position:relative;
    animation:popup .3s ease;
}

@keyframes popup{
    from{
        transform:scale(.9);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}

.close-btn{
    position:absolute;
    top:15px;
    right:20px;
    font-size:30px;
    cursor:pointer;
    color:#444;
}

.close-btn:hover{
    color:#01526d;
}

.job-modal-content h2{
    margin-bottom:20px;
    color:#01526d;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;
}

.job-modal-content h3{
    margin-top:25px;
    margin-bottom:10px;
    color:#222;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;
}

.job-modal-content p{
    line-height:1.7;
    color:#555;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;
}

.job-modal-content ul{
    padding-left:20px;
}

.job-modal-content li{
    margin-bottom:8px;
    line-height:1.7;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;
}

.apply-btn{
    margin-top:30px;
    background:#01526d;
    color:#fff;
    border:none;
    padding:13px 35px;
    cursor:pointer;
    font-size:16px;
    font-weight: 600;
    transition:.3s;
    border-radius: 5px;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;
}

.apply-btn:hover{
    background-color: white;
      color: #01526d;
      border: 1px solid #01526d;
}

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

/* Large Desktop */
@media screen and (max-width:1440px){

    .container{
        max-width:850px;
    }

}

/* Laptop */
@media screen and (max-width:1152px){

    .container{
        width:92%;
        max-width:850px;
        padding:70px 0 120px;
    }

    .heading{
        font-size:2.3rem;
    }

    .job-details{
        gap:30px;
    }

}

/* Tablets */
@media (max-width:992px){

    .container{
        width:92%;
        padding:60px 0 100px;
    }

    .heading{
        font-size:2.1rem;
        margin-bottom:20px;
    }

    .job-item{
        padding-top:25px;
        padding-bottom:20px;
    }

    .job-title{
        font-size:17px;
    }

    .job-details{
        gap:25px;
    }

    .job-modal-content{
        max-width:90%;
        padding:30px;
    }

}

/* Large Phones */
@media (max-width:768px){

    .container{
        width:94%;
        padding:50px 0 80px;
    }

    .heading{
        font-size:1.9rem;
        line-height:1.3;
    }

    .job-item{
        flex-direction:column;
        gap:15px;
    }

    .job-details{
        width:100%;
        justify-content:space-between;
        gap:15px;
        flex-wrap:wrap;
    }

    .job-title{
        font-size:16px;
    }

    .btn-know-more{
        padding:10px 18px;
        font-size:14px;
    }

    .job-modal-content{
        padding:25px;
        max-height:85vh;
    }

    .job-modal-content h2{
        font-size:24px;
    }

}

/* Medium Phones */
@media (max-width:576px){

    .container{
        width:95%;
        padding:45px 0 70px;
    }

    .heading{
        font-size:1.7rem;
    }

    .job-item{
        gap:12px;
        padding-top:20px;
        padding-bottom:18px;
    }

    .job-title{
        font-size:15px;
        line-height:1.5;
    }

    .job-details{
        flex-direction:column;
        gap:10px;
    }

    .job-type{
        font-size:14px;
    }

    .btn-know-more{
        width:30%;
        text-align:center;
        padding:12px;
    }

    .job-modal{
        padding:15px;
    }

    .job-modal-content{
        padding:20px;
        border-radius:10px;
    }

    .job-modal-content h2{
        font-size:22px;
        padding-right:25px;
    }

    .job-modal-content h3{
        font-size:18px;
    }

    .job-modal-content p,
    .job-modal-content li{
        font-size:14px;
        line-height:1.7;
        font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;
    }

    .apply-btn{
        width:100%;
        padding:12px;
    }

}

/* Small Phones */
@media (max-width:480px){

    .container{
        width:95%;
        padding:40px 0 60px;
    }

    .heading{
        font-size:1.5rem;
    }

    .job-title{
        font-size:14px;
    }

    .job-type{
        font-size:13px;
    }

    .btn-know-more{
        font-size:13px;
        padding:11px;
    }

    .job-modal-content{
        padding:18px;
    }

    .job-modal-content h2{
        font-size:20px;
    }

    .job-modal-content h3{
        font-size:17px;
    }

    .close-btn{
        top:10px;
        right:15px;
        font-size:26px;
    }

}

/* Extra Small Phones */
@media (max-width:320px){

    .container{
        width:96%;
        padding:35px 0 50px;
    }

    .heading{
        font-size:1.3rem;
        line-height:1.4;
    }

    .job-item{
        padding-top:15px;
        padding-bottom:15px;
    }

    .job-title{
        font-size:13px;
    }

    .job-type{
        font-size:12px;
    }

    .btn-know-more{
        font-size:12px;
        padding:10px;
    }

    .job-modal{
        padding:10px;
    }

    .job-modal-content{
        padding:15px;
        border-radius:8px;
    }

    .job-modal-content h2{
        font-size:18px;
    }

    .job-modal-content h3{
        font-size:16px;
    }

    .job-modal-content p,
    .job-modal-content li{
        font-size:13px;
        font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
letter-spacing: 0.5px;
    }

    .apply-btn{
        font-size:14px;
        padding:10px;
    }

    .close-btn{
        font-size:22px;
        right:12px;
    }

}