/*=========================================
            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:auto;

    padding:20px 0;

    flex-direction:column;

    gap:20px;

}

.nav-menu{

    flex-wrap:wrap;

    justify-content:center;

    gap:24px;

}

/*==================
        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:80px;
}

.navbar{
    padding:15px 0;
}

.logo{
    font-size:24px;
}

.logo span{
    font-size:10px;
    letter-spacing:3px;
}

.nav-menu{
    gap:18px;
}

/*=========================
          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:75px;
}

.navbar{
    padding:15px 0;
}

.logo{
    font-size:22px;
    letter-spacing:1px;
}

.logo span{
    font-size:9px;
    letter-spacing:2px;
}

.nav-menu{
    gap:14px;
}

.nav-menu a{
    font-size:14px;
}

/*=========================
            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;

}

}