/* ==========================================
   CyberShield
   File: css/responsive.css
   Responsive Design
========================================== */

/* ==========================
   Large Desktop (1400px)
========================== */

@media (max-width:1400px){

    .container{
        width:92%;
    }

}


/* ==========================
   Laptop (1200px)
========================== */

@media (max-width:1200px){

    h1{
        font-size:54px;
    }

    h2{
        font-size:38px;
    }

    .hero-content{
        max-width:800px;
    }

}


/* ==========================
   Tablet Landscape (992px)
========================== */

@media (max-width:992px){

    .navbar{

        flex-direction:column;

        padding:18px;

    }

    .navbar ul{

        margin-top:20px;

        gap:20px;

        flex-wrap:wrap;

        justify-content:center;

    }

    h1{

        font-size:46px;

    }

    h2{

        font-size:34px;

    }

    .hero{

        padding:140px 25px 80px;

    }

    .cards{

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

    }

    .features{

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

    }

}


/* ==========================
   Tablet Portrait (768px)
========================== */

@media (max-width:768px){

    body{

        font-size:16px;

    }

    h1{

        font-size:38px;

    }

    h2{

        font-size:30px;

    }

    h3{

        font-size:22px;

    }

    p{

        font-size:16px;

    }

    .hero{

        min-height:90vh;

    }

    .hero p{

        font-size:18px;

    }

    .btn{

        padding:14px 28px;

        font-size:15px;

    }

    .cards{

        grid-template-columns:1fr;

    }

    .stats{

        grid-template-columns:1fr 1fr;

    }

    .features{

        grid-template-columns:1fr;

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

    form{

        width:100%;

    }

    input,
    textarea{

        font-size:16px;

    }

}


/* ==========================
   Mobile (576px)
========================== */

@media (max-width:576px){

    .navbar{

        padding:15px;

    }

    .logo{

        font-size:26px;

    }

    .navbar ul{

        gap:15px;

    }

    .navbar ul li a{

        font-size:14px;

    }

    h1{

        font-size:30px;

    }

    h2{

        font-size:26px;

    }

    .hero{

        padding:130px 20px 60px;

    }

    .hero p{

        font-size:16px;

    }

    .container{

        width:94%;

    }

    section{

        padding:70px 0;

    }

    .card{

        padding:25px;

    }

    .stats{

        grid-template-columns:1fr;

    }

    .stat-box h3{

        font-size:40px;

    }

    .contact-box{

        padding:25px;

    }

    footer{

        padding:20px;

    }

}


/* ==========================
   Small Mobile (400px)
========================== */

@media (max-width:400px){

    h1{

        font-size:26px;

    }

    h2{

        font-size:22px;

    }

    .btn{

        width:100%;

        text-align:center;

    }

    .navbar ul{

        flex-direction:column;

        gap:10px;

    }

}


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

@media (max-height:500px){

    .hero{

        min-height:auto;

        padding:120px 20px 80px;

    }

}


/* ==========================
   Images
========================== */

img{

    max-width:100%;

    height:auto;

}


/* ==========================
   Tables
========================== */

table{

    width:100%;

    display:block;

    overflow-x:auto;

}


/* ==========================
   Video
========================== */

video,
iframe{

    max-width:100%;

}