/* Announcement Bar */

@media(max-width:991px){

    .announcement-center{
        display:none;
    }

}

@media(max-width:576px){

    .announcement-content{
        justify-content:center;
    }

    .announcement-right{
        display:none;
    }

}/*==================================================
    HEADER RESPONSIVE
==================================================*/

@media(max-width:1199px){

    .navbar-menu{

        display:none;

    }

    .menu-toggle{

        display:flex;

    }

}

@media(max-width:768px){

    .navbar{

        min-height:88px;

    }

    .site-header.sticky .navbar{

        min-height:80px;

    }

    .navbar-brand img{

        width:92px;

    }

    .site-header.sticky .navbar-brand img{

        width:80px;

    }

    .navbar-right .btn{

        display:none;

    }

}

@media(max-width:480px){

    .mobile-menu{

        width:100%;

    }

}
/*==================================================
    HERO RESPONSIVE
==================================================*/

@media(max-width:991px){

    .hero-section{

        text-align:center;

        padding-top:135px;

    }

    .hero-content h1{

        margin:auto auto 25px;

    }

    .hero-content p{

        margin:0 auto 40px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-stats{

        justify-content:center;

    }

    .hero-image{

        margin-top:50px;

    }

}

@media(max-width:767px){

    /* No .hero-stats sits above this on mobile (hidden in components.css),
       so there's no gap left to close here. */
    .hero-image{

        margin-top:0;

    }

}

@media(max-width:576px){

    .hero-buttons{

        flex-direction:column;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .hero-stat{

        width:100%;

        text-align:center;

    }

}
@media(max-width:991px){

.hero-image{

min-height:auto;

}

.dashboard-window{

width:100%;

max-width:520px;

margin:auto;

}

.analytics-card,
.lead-card,
.review-card{

display:none;

}

}
@media(max-width:992px){

.technology-track{

gap:65px;

}

.technology-item img{

width:auto;

height:38px;

max-width:120px;

}

}

@media(max-width:576px){

.technology-section{

padding:80px 0;

}

.technology-track{

gap:45px;

}

.technology-item img{

width:auto;

height:30px;

max-width:96px;

}

.technology-item span{

font-size:13px;

}

}
/*==================================================
WHY SECTION
==================================================*/

@media(max-width:1199px){

.why-content{

padding-left:20px;

}

.why-content h2{

font-size:48px;

}

}

@media(max-width:991px){

.why-content{

padding-left:0;

margin-top:70px;

}

.why-bottom-stats{

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

margin-top:80px;

}

.card-one{

left:0;

}

.card-two{

right:0;

}

}

@media(max-width:767px){

.why-us-section{

padding:90px 0;

}

.why-content h2{

font-size:38px;

}

.why-features{

grid-template-columns:1fr;

}

.why-buttons{

flex-direction:column;

align-items:stretch;

}

.why-buttons .btn{

width:100%;

}

.why-bottom-stats{

grid-template-columns:1fr;

gap:20px;

}

.floating-info{

position:relative;

left:auto;

right:auto;

top:auto;

bottom:auto;

margin-top:20px;

}

.dashboard-preview{

margin-bottom:30px;

}

}

@media(max-width:576px){

.why-content h2{

font-size:32px;

}

.why-content p{

font-size:16px;

}

.section-tag{

font-size:12px;

}

.stat-box{

padding:35px 20px;

}

.stat-box h3{

font-size:40px;

}

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

@media(max-width:992px){

.services-heading h2{

font-size:48px;

}

.service-content h3{

font-size:32px;

}

.service-content{

padding-left:20px;

}

}

@media(max-width:768px){

.services-section{

padding:90px 0;

}

.service-row{

flex-wrap:wrap;

padding:30px 0;

}

.service-number{

width:100%;

margin-bottom:15px;

}

.service-icon{

width:48px;

height:48px;

font-size:18px;

}

.service-content{

padding:0 0 0 16px;

margin-bottom:20px;

}

.service-content h3{

font-size:28px;

}

.service-arrow{

width:55px;

height:55px;

}

}

@media(max-width:576px){

.services-heading h2{

font-size:36px;

}

.services-heading p{

font-size:16px;

}

.service-content h3{

font-size:24px;

}

.service-content p{

font-size:15px;

}

}/*==================================================
DASHBOARD MOCKUP (small phones)
==================================================*/

@media(max-width:420px){

.dashboard-window{

max-width:100%;

}

.browser-body{

padding:20px;

}

.kpi-row{

gap:10px;

}

.kpi-card{

padding:14px 10px;

}

.kpi-card h4{

font-size:16px;

}

.kpi-card span{

font-size:12px;

}

.floating-card{

padding:14px 16px;

gap:12px;

}

.floating-card strong{

font-size:16px;

}

}