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

@media (max-width: 1200px){

    .container{
        width:95%;
    }

    .hero-content h1{
        font-size:56px;
    }

    .hero-content h2{
        font-size:38px;
    }

    .journey-content h2{
        font-size:42px;
    }

    .mission-box h2{
        font-size:54px;
    }
}


/* =========================
   TABLET
========================= */

@media (max-width: 991px){

    /* HEADER */

    .navbar{
        flex-direction:column;
        gap:20px;
    }

    nav{
        width:100%;
        overflow-x:auto;
    }

    nav ul{
        width:max-content;
        white-space:nowrap;
        padding-bottom:10px;
    }

    nav::-webkit-scrollbar{
        height:4px;
    }

    /* HERO */

    .hero{
        grid-template-columns:1fr;
    }

    .hero-image{
        height:450px;
    }

    .hero-content{
        padding:60px 40px;
    }

    /* JOURNEY */

    .journey{
        padding:70px 0;
    }

    .journey-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .side-image{
        height:300px;
    }

    .journey-content{
        padding:0 20px;
    }

    /* MISSION */

    .mission{
        padding:70px 0;
    }

    .mission-box{
        padding:70px 40px;
    }

    .mission-box h2{
        font-size:46px;
    }

    /* TEAM */

    .team{
        padding:70px 0;
    }

    .team-grid{
        grid-template-columns:repeat(2,1fr);
        gap:40px;
    }

    .member img{
        width:180px;
        height:180px;
    }

    /* CERTIFICATION */

    .certification{
        padding:70px 0;
    }

    .cert-grid{
        grid-template-columns:1fr;
    }

    /* FOOTER */

    .footer-grid{
        grid-template-columns:1fr;
        gap:40px;
    }
}


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

@media (max-width: 767px){

    body{
        overflow-x:hidden;
    }

    /* HEADER */

    header{
        padding:15px 0;
    }

    .logo{
        font-size:28px;
    }

    nav ul{
        gap:18px;
    }

    nav ul li a{
        font-size:12px;
    }

    /* HERO */

    .hero-image{
        height:260px;
    }

    .hero-content{
        padding:40px 20px;
    }

    .hero-content h1{
        font-size:42px;
        margin-bottom:10px;
    }

    .hero-content h2{
        font-size:30px;
        margin-bottom:20px;
    }

    .hero-content p{
        font-size:14px;
        line-height:1.8;
    }

    /* JOURNEY */

    .journey{
        padding:50px 0;
    }

    .journey-content h2{
        font-size:34px;
        margin-bottom:20px;
    }

    .journey-content p{
        font-size:14px;
        line-height:1.9;
    }

    .side-image{
        height:220px;
    }

    /* MISSION */

    .mission{
        padding:50px 0;
    }

    .mission-box{
        padding:50px 20px;
    }

    .mission-box h3{
        font-size:13px;
        letter-spacing:4px;
    }

    .mission-box h2{
        font-size:34px;
    }

    /* SECTION TITLE */

    .section-title{
        font-size:34px;
        margin-bottom:40px;
    }

    /* TEAM */

    .team{
        padding:50px 0;
    }

    .team-grid{
        grid-template-columns:1fr;
    }

    .member img{
        width:160px;
        height:160px;
    }

    .member h4{
        font-size:24px;
    }

    .member p{
        font-size:14px;
    }

    /* CERTIFICATION */

    .certification{
        padding:50px 0;
    }

    .certification h2{
        font-size:32px;
        margin-bottom:40px;
    }

    .cert-item{
        padding:35px 20px;
    }

    .cert-item h4{
        font-size:22px;
    }

    .cert-item p{
        font-size:14px;
    }

    /* FOOTER */

    footer{
        padding:50px 0;
    }

    .footer-grid{
        gap:30px;
    }

    .footer-grid h4{
        font-size:22px;
    }

    .footer-grid p{
        font-size:14px;
    }

    .contact-form input,
    .contact-form textarea{
        padding:12px;
        font-size:14px;
    }

    .contact-form button{
        width:100%;
    }
}


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

@media (max-width: 480px){

    .hero-content h1{
        font-size:36px;
    }

    .hero-content h2{
        font-size:26px;
    }

    .journey-content h2{
        font-size:28px;
    }

    .mission-box h2{
        font-size:28px;
    }

    .section-title{
        font-size:28px;
    }

    .certification h2{
        font-size:28px;
    }

    .member img{
        width:140px;
        height:140px;
    }
}