/* ===========================
   VEXTON CORP
   RESPONSIVE
=========================== */

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

@media (max-width:1200px){

    .navbar{

        padding:28px 50px;

    }

    .hero h1,
    .page-hero h1{

        font-size:64px;

    }

    .hero p,
    .page-hero p{

        font-size:21px;

    }

}

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

@media (max-width:992px){

    .navbar{

        padding:25px 35px;

    }

    .logo{

        font-size:22px;

        letter-spacing:5px;

    }

    .nav-links{

        gap:28px;

    }

    .hero h1,
    .page-hero h1{

        font-size:56px;

    }

    .hero p,
    .page-hero p{

        font-size:20px;

    }

    .cards{

        grid-template-columns:1fr;

    }

    .timeline-items{

        grid-template-columns:1fr;

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

    .footer-container{

        flex-direction:column;

        gap:50px;

    }

}

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

@media (max-width:768px){

    .navbar{

        flex-direction:column;

        gap:18px;

        padding:22px;

    }

    .nav-links{

        gap:22px;

        flex-wrap:wrap;

        justify-content:center;

    }

    .hero,
    .page-hero{

        padding:180px 25px 80px;

    }

    .hero h1,
    .page-hero h1{

        font-size:46px;

    }

    .hero p,
    .page-hero p{

        font-size:18px;

    }

    .button{

        padding:16px 36px;

    }

    .about-text{

        font-size:18px;

    }

    .section-title h2{

        font-size:40px;

    }

    .card{

        padding:32px;

    }

    .contact-card{

        padding:35px;

    }

    .contact-card h2{

        font-size:28px;

    }

    .legal-content{

        padding:40px;

    }

    footer{

        padding:60px 35px 30px;

    }

}

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

@media (max-width:480px){

    .hero h1,
    .page-hero h1{

        font-size:36px;

    }

    .hero p,
    .page-hero p{

        font-size:17px;

    }

    .logo{

        font-size:18px;

        letter-spacing:3px;

    }

    .nav-links{

        gap:15px;

    }

    .nav-links a{

        font-size:14px;

    }

    .section-title h2{

        font-size:32px;

    }

    .legal-content{

        padding:28px;

    }

    .legal-content h2{

        font-size:28px;

    }

    .contact-card{

        padding:28px;

    }

    .card{

        padding:28px;

    }

}