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

/* ================== 1400px ================== */

@media (max-width:1400px){

    .container{
        width:92%;
    }

    .hero-video{
        max-width:1100px;
    }

}


/* ================== 1200px ================== */

@media (max-width:1200px){

    .container{
        width:94%;
    }

    .hero{
        padding:160px 0 90px;
    }

    .hero-content{
        max-width:850px;
    }

    .hero h1{
        font-size:60px;
    }

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

    .hero-video{
        max-width:980px;
        margin-top:60px;
    }

    .project-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .services-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .clients-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .about-container{
        gap:60px;
    }

    .contact-container{
        gap:50px;
    }

    .footer-container{
        gap:40px;
    }

}


/* ================== 992px ================== */

@media (max-width:992px){

    /*==================
            NAVBAR
    ===================*/

    .navbar{
        height:80px;

        padding:0;

        display:flex;

        flex-direction:row;

        align-items:center;

        justify-content:flex-start;

        position:relative;
    }

    .nav-menu{
        flex-wrap:nowrap;
        justify-content:flex-start;
    }


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

    .hero{
        padding:145px 0 80px;
    }

    .hero-container{
        width:100%;
    }

    .hero-content{
        max-width:100%;
    }

    .hero h1{
        font-size:52px;
        line-height:1.15;
    }

    .hero p{
        font-size:18px;
        max-width:700px;
    }

    .hero-buttons{
        justify-content:center;
        flex-wrap:wrap;
    }

    .hero-video{
        width:100%;
        margin-top:50px;
        border-radius:22px;
    }


    /*==================
            STATS
    ===================*/

    .stats-container{
        grid-template-columns:repeat(2,1fr);
    }


    /*==================
            ABOUT
    ===================*/

    .about-container{
        grid-template-columns:1fr;
        text-align:center;
        gap:50px;
    }

    .about-left{
        justify-content:center;
    }

    .about-list{
        grid-template-columns:repeat(2,1fr);
    }


    /*==================
            SERVICES
    ===================*/

    .services-grid{
        grid-template-columns:repeat(2,1fr);
    }


    /*==================
            PROJECTS
    ===================*/

    .project-grid{
        grid-template-columns:repeat(2,1fr);
    }


    /*==================
            CLIENTS
    ===================*/

    .clients-grid{
        grid-template-columns:repeat(2,1fr);
    }


    /*==================
            CONTACT
    ===================*/

    .contact-container{
        grid-template-columns:1fr;
        gap:50px;
    }


    /*==================
            FOOTER
    ===================*/

    .footer-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .social-icons{
        justify-content:center;
    }

}


/* ================== 768px ================== */

@media (max-width:768px){

    /*=========================
            NAVBAR
    =========================*/

    .header{
        height:75px;
    }

    .navbar{
        height:75px;
        padding:0;

        display:flex;
        flex-direction:row;
        align-items:center;

        justify-content:flex-start;
    }


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

    .hero{
        padding:130px 0 70px;
    }

    .hero-container{
        width:100%;
    }

    .hero-content{
        max-width:100%;
    }

    .hero-tag{
        font-size:12px;
        letter-spacing:3px;
    }

    .hero h1{
        font-size:40px;
        line-height:1.2;
        margin-bottom:20px;
    }

    .hero p{
        font-size:17px;
        line-height:1.8;
        max-width:100%;
        padding:0 10px;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
        gap:16px;
    }

    .hero-buttons .primary-btn,
    .hero-buttons .secondary-btn{
        width:240px;
        text-align:center;
    }

    .hero-video{
        width:100%;
        margin-top:40px;
        border-radius:18px;
    }

    .hero-video video{
        border-radius:18px;
    }

    .scroll-down{
        display:none;
    }


    /*=========================
            STATS
    =========================*/

    .stats-container{
        grid-template-columns:1fr;
    }


    /*=========================
            ABOUT
    =========================*/

    .about-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .image-box{
        width:320px;
        height:320px;
    }

    .image-box i{
        font-size:110px;
    }

    .about-right h2{
        font-size:38px;
    }

    .about-list{
        grid-template-columns:1fr;
    }


    /*=========================
          SERVICES
    =========================*/

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

    .service-card{
        min-height:auto;
    }


    /*=========================
          PROJECTS
    =========================*/

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

    .project-card{
        min-height:auto;
    }


    /*=========================
          CLIENTS
    =========================*/

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


    /*=========================
          CONTACT
    =========================*/

    .contact-left h2{
        font-size:38px;
    }

    .contact-right{
        width:100%;
    }


    /*=========================
            FOOTER
    =========================*/

    .footer-container{
        text-align:center;
    }

    .social-icons{
        justify-content:center;
    }

    .section-title h2{
        font-size:38px;
    }

}


/* ================== 480px ================== */

@media (max-width:480px){

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

    .container{
        width:92%;
    }


    /*=========================
            NAVBAR
    =========================*/

    .header{
        height:70px;
    }

    .navbar{
        height:70px;
        padding:0;

        display:flex;
        flex-direction:row;
        align-items:center;

        justify-content:flex-start;
    }


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

    .hero{
        padding:115px 0 50px;
    }

    .hero-content{
        width:100%;
    }

    .hero-tag{
        font-size:11px;
        letter-spacing:2px;
        margin-bottom:16px;
    }

    .hero h1{
        font-size:32px;
        line-height:1.2;
        margin-bottom:18px;
    }

    .hero p{
        font-size:15px;
        line-height:1.8;
        color:#666;
        padding:0;
    }

    .hero-buttons{
        width:100%;
        gap:14px;
        margin-top:35px;
    }

    .hero-buttons .primary-btn,
    .hero-buttons .secondary-btn{
        width:100%;
        padding:15px;
        font-size:15px;
    }

    .hero-video{
        width:100%;
        margin-top:35px;
        border-radius:14px;
        box-shadow:0 15px 40px rgba(0,0,0,.12);
    }

    .hero-video video{
        width:100%;
        border-radius:14px;
    }

    .scroll-down{
        display:none;
    }


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

    .section-title{
        margin-bottom:45px;
    }

    .section-title h5{
        font-size:12px;
        letter-spacing:3px;
    }

    .section-title h2{
        font-size:28px;
        line-height:1.3;
    }

    .section-title p{
        font-size:15px;
    }


    /*=========================
            STATS
    =========================*/

    .stat-card{
        padding:30px 20px;
    }

    .stat-card h2{
        font-size:36px;
    }


    /*=========================
            ABOUT
    =========================*/

    .image-box{
        width:250px;
        height:250px;
    }

    .image-box i{
        font-size:90px;
    }

    .about-right h2{
        font-size:28px;
    }


    /*=========================
          SERVICES
    =========================*/

    .service-card{
        padding:35px 20px;
    }

    .service-card h3{
        font-size:22px;
    }

    .service-card i{
        font-size:48px;
    }


    /*=========================
          PROJECTS
    =========================*/

    .project-card{
        padding:35px 20px;
    }

    .project-card h3{
        font-size:22px;
    }

    .project-card i{
        font-size:48px;
    }


    /*=========================
          CLIENTS
    =========================*/

    .client-card{
        height:90px;
        font-size:18px;
    }


    /*=========================
          CONTACT
    =========================*/

    .contact-left h2{
        font-size:28px;
    }

    .contact-right input,
    .contact-right textarea{
        padding:15px;
        font-size:15px;
    }


    /*=========================
            FOOTER
    =========================*/

    .footer{
        text-align:center;
    }

    .footer-container{
        gap:35px;
    }

    .social-icons{
        justify-content:center;
    }

    .copyright{
        font-size:13px;
    }

}