/* =====================================================
    RESPONSIVE
====================================================== */
.container{

    width:100%;

    max-width:var(--container-width);

    margin:auto;

    padding:0 var(--container-padding);

}
/* ==========================================
    Large Desktop
========================================== */

@media (max-width:1400px){



.products-grid{

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

}

.security-grid{

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

}

}

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

@media (max-width:1024px){

h1{

    font-size:52px;

}

h2{

    font-size:40px;

}

.hero-wrapper{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-content p{

    margin:auto;
    margin-top:25px;

}

.hero-buttons{

    justify-content:center;

}

.hero-trust{

    justify-content:center;

}

.about-wrapper{

    grid-template-columns:1fr;

}

.services-grid{

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

}

.products-grid{

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

}

.stats-wrapper{

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

}

.feature-strip{

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

}

.process-grid{

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

}

.footer-grid{

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

}

}

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

@media (max-width:991px){

section{

    padding:80px 0;

}

.nav-menu{

    position:fixed;

    top:85px;

    right:-100%;

    width:320px;

    height:calc(100vh - 85px);

    background:#fff;

    flex-direction:column;

    justify-content:flex-start;

    align-items:flex-start;

    padding:40px;

    gap:25px;

    transition:.35s;

    box-shadow:-10px 0 30px rgba(0,0,0,.08);

}

.nav-menu.active{

    right:0;

}

.menu-toggle{

    display:flex;

}

.hero{

    padding-top:150px;

}

.hero-content h1{

    font-size:46px;

}

.stats-wrapper{

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

}

.services-grid{

    grid-template-columns:1fr;

}

.products-grid{

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

}

.security-grid{

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

}

.security-list{

    grid-template-columns:1fr;

}

.security-badge{

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

}

.process-grid{

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

}

.support-wrapper{

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

}

.footer-grid{

    grid-template-columns:1fr;

}

.timeline::before{

    left:20px;

}

.timeline-item{

    width:100%;

    left:0!important;

    text-align:left!important;

    padding-left:70px;

    padding-right:0;

}

.timeline-dot{

    left:8px!important;

}

}

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

@media (max-width:768px){

.container{

    padding-inline:18px;

}

h1{

    font-size:38px;

}

h2{

    font-size:32px;

}

h3{

    font-size:26px;

}

.hero{

    padding-top:130px;

}

.hero-buttons{

    flex-direction:column;

}

.hero-buttons .btn{

    width:100%;

}

.hero-image{

    margin-top:40px;

}

.stats{

    margin-top:30px;

}

.stats-wrapper{

    grid-template-columns:1fr;

    padding:35px;

}

.products-grid{

    grid-template-columns:1fr;

}

.feature-strip{

    grid-template-columns:1fr;

}

.security-grid{

    grid-template-columns:1fr;

}

.security-badge{

    grid-template-columns:1fr;

}

.process-grid{

    grid-template-columns:1fr;

}

.support-wrapper{

    grid-template-columns:1fr;

}

.cta-box{

    padding:50px 25px;

}

.cta-box h2{

    font-size:34px;

}

.footer-bottom{

    flex-direction:column;

    gap:20px;

    text-align:center;

}

}

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

@media (max-width:480px){

.hero-content h1{

    font-size:32px;

}

.hero-content p{

    font-size:16px;

}

.section-title{

    margin-bottom:40px;

}

.card{

    padding:25px;

}

.service-card{

    padding:30px;

}

.product-body{

    padding:25px;

}

.timeline-card{

    padding:25px;

}

.cta-box{

    border-radius:25px;

}

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

.nav-action{

    display:none;

}

.menu-toggle{

    display:flex;

}

}

/* Tablet */

@media(max-width:992px){

    .support-wrapper{

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

    }

}

/* Mobile */

@media(max-width:576px){

    .support-wrapper{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

.logo img{

    width:46px;

    height:auto;

}

}

@media (max-width:768px){

.logo-text p{

    font-size:11px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

}
/* =====================================================
   MOBILE HEADER
====================================================== */

@media (max-width:768px){

    /* Header */

    .header{

        padding:6px 0;

    }

    .navbar{

        display:flex;

        align-items:center;

        justify-content:space-between;

        min-height:64px;

    }

    /* Logo */

    .logo{

        display:flex;

        align-items:center;

        gap:10px;

        flex:1;

        min-width:0;

        text-decoration:none;

    }

    .logo img{

        width:38px !important;

        height:38px !important;

        object-fit:contain;

        flex-shrink:0;

    }

    .logo-text{

        display:flex;

        flex-direction:column;

        justify-content:center;

        min-width:0;

        overflow:hidden;

    }

    .logo-text h3{

        margin:0;

        font-size:18px;

        line-height:1.1;

        font-weight:700;

        white-space:nowrap;

        overflow:hidden;

        text-overflow:ellipsis;

    }

    .logo-text span{

    display:block;

    font-size:10px;

    line-height:1.2;

    color:#6b7280;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

    /* Hamburger */

    .menu-toggle{

        width:42px;

        height:42px;

        display:flex;

        justify-content:center;

        align-items:center;

        border-radius:12px;

        font-size:22px;

        flex-shrink:0;

        margin-left:12px;

    }

}

@media (min-width:1600px){

    .container{

        max-width:1180px;

    }

}