/* ===================================================
   LEGALANT ENGINEERING
   RESPONSIVE STYLES
=================================================== */

/* ==========================
   LARGE DEVICES
========================== */

@media (max-width:1200px){

    .hero h1{
        font-size:58px;
    }

    .container{
        max-width:1140px;
    }

}

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

@media (max-width:992px){

    :root{

        --section-padding:80px;

    }

    .top-bar{
        display:none;
    }

    .navbar{
        padding:15px 0;
    }

    .navbar-collapse{
        background:#fff;
        margin-top:15px;
        padding:20px;
        border-radius:12px;
        box-shadow:var(--shadow-md);
    }

    .navbar-nav{
        gap:0;
    }

    .nav-link{
        padding:14px 0 !important;
    }

    .navbar .btn{
        margin:20px 0 0;
        width:100%;
        text-align:center;
    }

    .hero{
        min-height:85vh;
        text-align:center;
    }

    .hero-content{
        margin:auto;
    }

    .hero h1{
        font-size:48px;
    }

    .hero-buttons{
        justify-content:center;
    }

    .section-title h2{
        font-size:36px;
    }

    .footer{
        text-align:center;
    }

    .footer-social{
        justify-content:center;
    }

    .footer-bottom{
        flex-direction:column;
        text-align:center;
    }

}

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

@media (max-width:768px){

    :root{

        --section-padding:70px;

    }

    .hero{

        min-height:80vh;

    }

    .hero h1{

        font-size:40px;

    }

    .hero p{

        font-size:16px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .btn{

        width:100%;

        max-width:300px;

        text-align:center;

    }

    .section-title h2{

        font-size:32px;

    }

    .service-card{

        padding:30px;

    }

    .stat-box{

        margin-bottom:30px;

    }

    .footer{

        padding-top:60px;

    }

}

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

@media (max-width:576px){

    .hero h1{

        font-size:32px;

    }

    .hero-subtitle{

        font-size:13px;

        letter-spacing:1px;

    }

    .logo-main{

        font-size:24px;

    }

    .logo-sub{

        font-size:11px;

        letter-spacing:2px;

    }

    h2{

        font-size:28px;

    }

    h3{

        font-size:24px;

    }

    .section-title{

        margin-bottom:40px;

    }

    .section-title p{

        font-size:15px;

    }

    .service-card{

        padding:25px;

    }

    .service-icon{

        width:65px;

        height:65px;

    }

    .service-icon i{

        font-size:28px;

    }

    .stat-box h2{

        font-size:38px;

    }

    #backToTop{

        width:45px;

        height:45px;

        right:15px;

        bottom:15px;

    }

}

/* ==========================
   EXTRA SMALL DEVICES
========================== */

@media (max-width:360px){

    .hero h1{

        font-size:28px;

    }

    .btn{

        font-size:14px;

        padding:12px 24px;

    }

    .logo-main{

        font-size:22px;

    }

}