/* =====================================================

   XECURE NETWORKS
   Responsive Stylesheet

===================================================== */





/* =====================================================
        LARGE SCREENS
===================================================== */


@media (max-width: 1280px){



.container{


    max-width:1100px;


}





.hero-container{


    gap:40px;


}




.hero-content h1{


    font-size:52px;


}




.about-grid{


    gap:50px;


}



}









/* =====================================================
        LAPTOPS
===================================================== */


@media(max-width:1100px){





.nav-links{


    gap:22px;


}





.hero-container{


    grid-template-columns:
    1fr;


}





.hero-content{


    text-align:center;


}




.hero-content p{


    margin-left:auto;


    margin-right:auto;


}






.hero-actions{


    justify-content:center;


}







.hero-dashboard{


    width:100%;


    max-width:500px;


    margin:auto;


}







.stats-grid{


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


}







.services-grid{


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


}







.about-grid{


    grid-template-columns:
    1fr;


}




.about-image{


    max-width:500px;


    margin:auto;


}







.process-grid{


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


}







.industries-grid{


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


}







.partners-grid{


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


}







.contact-grid{


    grid-template-columns:
    1fr;


}






.footer-grid{


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


}




}









/* =====================================================
        TABLETS
===================================================== */


@media(max-width:900px){





.header{


    background:white;


}






.navbar{


    height:75px;


}





.nav-links{


    position:fixed;


    top:75px;


    left:-100%;


    width:100%;


    height:calc(100vh - 75px);


    background:white;


    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;


    gap:35px;


    transition:.4s ease;


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


}







.nav-links.active{


    left:0;


}







.menu-toggle{


    display:block;


}







.hero{


    padding-top:120px;


}






.hero-content h1{


    font-size:44px;


}





.section-header h2{


    font-size:36px;


}






.service-card{


    padding:30px;


}






.testimonial-grid{


    grid-template-columns:
    1fr;


}






.partners-grid{


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


}






.trust-content{


    flex-direction:column;


    text-align:center;


}





}

/* =====================================================
        MOBILE DEVICES
===================================================== */


@media(max-width:600px){





.container{


    width:92%;


}






/* =========================
        HEADER
========================= */


.logo{


    font-size:26px;


}





.menu-toggle{


    font-size:24px;


}








/* =========================
        HERO
========================= */


.hero{


    padding-top:110px;


    padding-bottom:70px;


}







.hero-badge{


    font-size:12px;


    padding:8px 14px;


}





.hero-content h1{


    font-size:36px;


    line-height:1.15;


    letter-spacing:-1px;


}







.hero-content p{


    font-size:16px;


}





.hero-actions{


    flex-direction:column;


    width:100%;


}





.hero-actions .btn{


    width:100%;


}





.dashboard-card{


    padding:25px;


}





.metric{


    flex-direction:column;


    align-items:flex-start;


    gap:8px;


}









/* =========================
        SECTIONS
========================= */


.section{


    padding:70px 0;


}





.section-header{


    margin-bottom:40px;


}





.section-header h2{


    font-size:30px;


}





.section-header p{


    font-size:15px;


}











/* =========================
        STATS
========================= */


.stats{


    padding:35px 0;


}






.stats-grid{


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


    gap:15px;


}





.stat-box{


    padding:15px 5px;


}





.stat-box i{


    font-size:28px;


}





.stat-box h3{


    font-size:30px;


}









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


.services-grid{


    grid-template-columns:
    1fr;


}





.service-card{


    padding:28px;


}





.service-card h3{


    font-size:21px;


}











/* =========================
        ABOUT
========================= */


.about-content h2{


    font-size:32px;


}





.about-content p{


    font-size:16px;


}





.about-card{


    padding:25px;


}





.security-status div{


    padding:15px;


}









/* =========================
        PROCESS
========================= */


.process-grid{


    grid-template-columns:
    1fr;


}





.process-card{


    padding:30px 20px;


}











/* =========================
        TRUST BANNER
========================= */


.trust-banner{


    padding:50px 0;


}





.trust-content h2{


    font-size:30px;


}





.trust-content p{


    font-size:16px;


}











/* =========================
        INDUSTRIES
========================= */


.industries-grid{


    grid-template-columns:
    1fr;


}





.industry-card{


    padding:30px;


}









/* =========================
        PARTNERS
========================= */


.partners-grid{


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


}





.partner-logo{


    height:85px;


    font-size:17px;


}











/* =========================
        TESTIMONIALS
========================= */


.testimonial-card{


    padding:25px;


}









/* =========================
        FAQ
========================= */


.faq-question{


    font-size:16px;


    gap:15px;


}





.faq-question i{


    font-size:14px;


}









/* =========================
        CONTACT
========================= */


.contact-info h2{


    font-size:32px;


}





.contact-info > p{


    font-size:16px;


}





.contact-form{


    padding:25px;


}







.form-group input,
.form-group textarea,
.form-group select{


    padding:14px;


}











/* =========================
        FOOTER
========================= */


.footer{


    padding-top:60px;


}





.footer-grid{


    grid-template-columns:
    1fr;


    text-align:center;


    gap:35px;


}





.footer-brand p{


    margin:auto;


}





.social-links{


    justify-content:center;


}









/* =========================
        FLOAT BUTTONS
========================= */


.whatsapp-btn{


    width:52px;


    height:52px;


    right:18px;


    bottom:80px;


    font-size:27px;


}





.back-top{


    width:42px;


    height:42px;


    right:18px;


}





}


/* =====================================================
        SMALL MOBILE DEVICES
===================================================== */


@media(max-width:400px){





.container{


    width:94%;


}







.logo{


    font-size:24px;


}







.hero-content h1{


    font-size:32px;


}







.hero-content p{


    font-size:15px;


}





.hero-badge{


    font-size:11px;


}







.btn{


    padding:
    13px 20px;


    font-size:14px;


}







.dashboard-card{


    padding:20px;


}







.dashboard-header h3{


    font-size:18px;


}





.online{


    font-size:11px;


    padding:4px 10px;


}







.metric strong{


    font-size:18px;


}







.stats-grid{


    grid-template-columns:
    1fr;


}







.stat-box h3{


    font-size:36px;


}







.section-header h2{


    font-size:28px;


}







.service-card{


    padding:25px 20px;


}





.service-icon{


    width:55px;


    height:55px;


    font-size:24px;


}







.about-content h2{


    font-size:29px;


}







.feature-item{


    gap:12px;


}







.feature-item h4{


    font-size:16px;


}







.process-number{


    font-size:35px;


}







.trust-content h2{


    font-size:26px;


}







.partners-grid{


    grid-template-columns:
    1fr;


}







.partner-logo{


    height:80px;


}







.contact-form{


    padding:20px;


}







.contact-item i{


    width:45px;


    height:45px;


}





.footer-column h4{


    font-size:17px;


}





}











/* =====================================================
        LANDSCAPE MOBILE
===================================================== */


@media(max-height:500px) and (orientation:landscape){





.hero{


    padding-top:100px;


}





.hero-content h1{


    font-size:34px;


}





.nav-links{


    padding-top:30px;


}





}





/* =====================================================
        ACCESSIBILITY
===================================================== */


/* Reduce animations when requested */


@media(prefers-reduced-motion:reduce){





*,
*::before,
*::after{


    animation-duration:
    .01ms !important;


    animation-iteration-count:
    1 !important;


    transition-duration:
    .01ms !important;


    scroll-behavior:auto !important;


}





}









/* =====================================================
        PRINT OPTIMIZATION
===================================================== */


@media print{





.header,
.whatsapp-btn,
.back-top,
.footer,
.btn{


    display:none !important;


}





body{


    background:white;


    color:black;


}





.section{


    padding:30px 0;


}


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

.support-wrapper{

    grid-template-columns:1fr;

}

.support-left{

    text-align:center;

}

.support-left p{

    margin:auto;

    margin-bottom:30px;

}

.support-list{

    grid-template-columns:1fr;

    max-width:400px;

    margin:auto;

}

}