/*==================================================
RESPONSIVE CSS
SB Mailer Landing Page
==================================================*/

/*=========================
Large Devices
==========================*/

@media (max-width:1400px){

    .hero-title{
        font-size:52px;
    }

    h2{
        font-size:42px;
    }

}

/*=========================
Laptop
==========================*/

@media (max-width:1200px){

    section{
        padding:80px 0;
    }

    .hero-title{
        font-size:46px;
    }

    h2{
        font-size:38px;
    }

    .feature-card{
        padding:30px;
    }

}

/*=========================
Tablet Landscape
==========================*/

@media (max-width:992px){

    .navbar{
        background:#fff;
        padding:15px 0;
    }

    .navbar-collapse{

        margin-top:20px;

        background:#fff;

        padding:20px;

        border-radius:20px;

        box-shadow:0 15px 40px rgba(0,0,0,.08);

    }

    .navbar-nav{

        margin-bottom:20px;

    }

    .nav-link{

        padding:12px 0;

    }

    .hero-section{

        text-align:center;

        padding-top:140px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-list{

        grid-template-columns:1fr;

        text-align:left;

        max-width:320px;

        margin:40px auto 0;

    }

    .dashboard-wrapper{

        margin-top:50px;

    }

    .section-title{

        margin-bottom:50px;

    }

    .workflow-image{

        margin-bottom:40px;

    }

    .analytics-image{

        margin-bottom:40px;

    }

    .cta-box{

        text-align:center;

        padding:50px 35px;

    }

    .cta-box .btn{

        margin-top:25px;

    }

}

/*=========================
Tablet Portrait
==========================*/

@media (max-width:768px){

    h1{

        font-size:38px;

    }

    h2{

        font-size:32px;

    }

    h3{

        font-size:28px;

    }

    .hero-description{

        font-size:16px;

    }

    .btn{

        width:100%;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .feature-card{

        text-align:center;

    }

    .feature-icon{

        margin:0 auto 20px;

    }

    .workflow-item{

        flex-direction:column;

        text-align:center;

    }

    .workflow-icon{

        margin:0 auto;

    }

    .analytics-card{

        padding:25px;

    }

    .why-card{

        padding:30px;

    }

    .footer-area{

        text-align:center;

    }

    .footer-logo{

        margin:0 auto 20px;

    }

}

/*=========================
Mobile
==========================*/

@media (max-width:576px){

    section{

        padding:70px 0;

    }

    .container{

        padding-left:20px;

        padding-right:20px;

    }

    .hero-title{

        font-size:34px;

    }

    .hero-badge{

        font-size:13px;

        padding:8px 16px;

    }

    .dashboard-wrapper img{

        border-radius:18px;

    }

    .stat-box{

        padding:30px 20px;

    }

    .stat-box h2{

        font-size:34px;

    }

    .feature-card{

        padding:28px;

    }

    .workflow-item{

        padding:20px;

    }

    .analytics-card{

        padding:20px;

    }

    .cta-box{

        padding:35px 25px;

    }

    .scroll-top{

        width:48px;

        height:48px;

        right:18px;

        bottom:18px;

    }

}

/*=========================
Extra Small
==========================*/

@media (max-width:400px){

    .hero-title{

        font-size:30px;

    }

    h2{

        font-size:28px;

    }

    .hero-list{

        gap:12px;

    }

}