/*==================================================
    SS ONE
    RESPONSIVE.CSS
==================================================*/


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

@media (max-width:1400px){

    .container{

        max-width:1200px;

    }

}


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

@media (max-width:1200px){

    h1{

        font-size:54px;

    }

    h2{

        font-size:38px;

    }

    .hero .container{

        gap:50px;

    }

    .features-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .modules-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .stats{

        grid-template-columns:1fr;

    }

}


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

@media (max-width:992px){

    header .container{

        height:80px;

    }

    nav{

        display:none;

    }

    .mobile-menu{

        display:flex;

    }

    .hero{

        padding:140px 0 80px;

    }

    .hero .container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-text p{

        margin-left:auto;

        margin-right:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-image{

        margin-top:40px;

    }

    .dashboard{

        max-width:100%;

    }

    .dashboard-body{

        grid-template-columns:150px 1fr;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-text{

        max-width:none;

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

}


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

@media (max-width:768px){

    .container{

        padding:0 20px;

    }

    h1{

        font-size:40px;

    }

    h2{

        font-size:32px;

    }

    p{

        font-size:16px;

    }

    .features-grid{

        grid-template-columns:1fr;

    }

    .modules-grid{

        grid-template-columns:1fr;

    }

    .dashboard-body{

        grid-template-columns:1fr;

    }

    .sidebar{

        display:none;

    }

    .content{

        padding:20px;

    }

    .chart-bars{

        height:120px;

    }

    .about-box{

        padding:35px 25px;

    }

}


/*=========================================
576px
=========================================*/

@media (max-width:576px){

    .hero{

        padding:120px 0 70px;

    }

    h1{

        font-size:34px;

    }

    h2{

        font-size:28px;

    }

    .btn,
    .btn2{

        width:100%;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .feature-card{

        padding:28px;

    }

    .module-item{

        padding:25px;

    }

    .contact-card{

        padding:28px;

    }

    .about-box{

        padding:28px 20px;

    }

    .dashboard-top{

        padding:0 15px;

    }

    .content{

        padding:15px;

    }

    .chart{

        padding:15px;

    }

    .row{

        grid-template-columns:1fr;

        gap:6px;

    }

    #topButton{

        width:48px;

        height:48px;

        right:18px;

        bottom:18px;

    }

}