/* RESPONSIVE DESIGN START */

/* TABLETS */

@media(max-width:992px){
    .navbar{
        padding:20px 40px;
    }
    .hero-content h1{
        font-size:55px;
    }
    .about{
        gap:40px;
   }
}

/* MOBILE NAVBAR */

@media(max-width:768px){

    .navbar{

        flex-direction:row;

        justify-content:space-between;

        padding:15px 20px;

    }


    .menu-toggle{

        /* display:block; */

        font-size:30px;

        padding:5px 10px;
         display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:2px;

    }

.menu-toggle span{

    font-size:8px;

    font-weight:600;

    letter-spacing:0.3px;

    line-height:1;

    white-space:nowrap;

}
    .nav-links {

    position: absolute;

    top: calc(100% + 12px);

    right: 20px;

    left: 20px;

    width: auto;

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: center;

    align-items: center;

    gap: 8px;

    padding: 18px;

    background: rgba(15, 23, 42, 0.94);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 18px;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.35);

    opacity: 0;

    visibility: hidden;

    transform: translateY(-15px) scale(0.97);

    transform-origin: top center;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0.3s ease;

}


/* OPEN STATE */

.nav-links.active {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);

}


   .nav-links li {

    list-style: none;

}


   .nav-links a {

    display: block;

    padding: 9px 14px;

    border-radius: 10px;

    white-space: nowrap;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;

}
.nav-links a:hover {

    background: rgba(244, 197, 66, 0.12);

    color: #f4c542;

    transform: translateY(-2px);

}

    


    /* baaki existing mobile CSS */

    .hero{

        padding:0 20px;


    }

    .hero-content h1{

        font-size:42px;

    }

    .hero-content p{

        font-size:16px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .about{

        flex-direction:column;

    }

    .section-heading h2{

        font-size:34px;

    }

    .cta-content h2{

        font-size:36px;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

}

/* SMALL MOBILE */

@media(max-width:480px){
    .hero-content h1{
        font-size:32px;
    }
    .hero-content h4{
        font-size:18px;
    }
    .section-heading h2{
        font-size:28px;
    }
    .cta-content h2{
        font-size:30px;
    }
    .stat-card h3{
        font-size:36px;
    }
}

@media(max-width:768px){
    .hero-stats{
        gap:25px;
    }
    .hero-stats h3{
        font-size:24px;
    }
}



@media(max-width:768px){
    .floating-card{
        display:none;

    }
}

@media(max-width:768px){
    .banner-content{
        flex-direction:column;
    }
    .banner-left{
        text-align:center;
    }
}
/* RESPONSIVE DESIGN END */

/* =====================================================
   QUICK ACCESS MOBILE
   ===================================================== */

.quick-toggle{

    display:none;

}


/* MOBILE */

@media(max-width:768px){

    /* TOGGLE BUTTON */

    .quick-toggle{

        display:flex;

        flex-direction:column;

         gap:2px;
        position:fixed;

        left:18px;

        top:102px;

        width:52px;

        height:52px;

        align-items:center;

        justify-content:center;

        border:none;

        border-radius:50%;

        background:rgba(15,23,42,0.88);

        color:#fff;

        font-size:21px;

        cursor:pointer;

        z-index:1600;

        box-shadow:
            0 8px 25px rgba(0,0,0,0.25);

        backdrop-filter:blur(12px);

        -webkit-backdrop-filter:blur(12px);

        transition:
            transform 0.3s ease,
            background 0.3s ease;

    }


    .quick-toggle:hover{

        transform:scale(1.08);

    }
.quick-toggle i{
    font-size:24px;
    line-height: 1;
}

.quick-toggle span{

    font-size:8px;

    font-weight:600;

    letter-spacing:0.3px;

    line-height:1;

    white-space:nowrap;

}

@media(max-width:768px){

    .quick-sidebar{

        position:fixed;

        top:102px;
        left:55%;

        bottom:auto;

        transform:
            translateX(-50%)
            translateY(-15px);

        height:56px;
        width: auto;

        padding:6px 10px;

        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:center;

        gap:8px;

        border-radius:16px;

        background:rgba(15,23,42,0.92);

        border:1px solid rgba(255,255,255,0.12);

        box-shadow:
            0 10px 25px rgba(0,0,0,0.25);

        opacity:0;
        visibility:hidden;
        pointer-events:none;

        transition:
            opacity 0.3s ease,
            transform 0.3s ease,
            visibility 0.3s ease;

    }


    .quick-sidebar.show{

        opacity:1;

        visibility:visible;

        pointer-events:auto;

        transform:
            translateX(-50%)
            translateY(0);

    }


    .quick-link{

        width:42px;
        height:42px;

        display:flex;
        align-items:center;
        justify-content:center;

        flex-shrink:0;

    }

}

    /* ERP */

    .quick-link.erp{

        width:48px;

        height:48px;

        gap:2px;

    }


    .quick-link.erp i{

        font-size:17px;

    }


    .quick-link.erp span{

        font-size:10px;

    }


    /* HOVER / TOUCH FEEDBACK */

    .quick-link:hover{

        transform:
            translateY(-3px)
            scale(1.05);

    }

}


/* SMALL MOBILE */

@media(max-width:480px){

    .quick-sidebar{

        bottom:82px;

        gap:7px;

        padding:9px 11px;

    }


    .quick-link{

        width:39px;

        height:39px;

        font-size:16px;

        border-radius:11px;

    }


    .quick-link.erp{

        width:44px;

        height:44px;

    }


    .quick-link.erp i{

        font-size:15px;

    }


    .quick-link.erp span{

        font-size:9px;

    }


    .quick-toggle{

        right:15px;

        bottom:18px;

        width:48px;

        height:48px;

        font-size:19px;

    }

}

/* =========================================
   ABOUT IMAGE SLIDER - MOBILE RESPONSIVE
   ========================================= */

@media (max-width:768px){

    .about-image{

        flex:0 0 100%;

        width:100%;

        min-width:0;

        height:320px;

        position:relative;

        display:block;

        overflow:hidden;

        perspective:1200px;

        border-radius:20px;

    }

    .about-slide{

        position:absolute;

        top:0;

        left:0;

        right:0;

        bottom:0;

        width:100%;

        height:100%;

        display:block;

        object-fit:cover;

        object-position:center center;

        border-radius:18px;

    }

}


/* SMALL MOBILE */

@media (max-width:480px){

    .about-image{

        flex:0 0 100%;

        width:100%;

        height:270px;

    }

    .about-slide{

        width:100%;

        height:100%;

        object-fit:cover;

        object-position:center center;

        border-radius:16px;

    }

}

/* =========================================
   ABOUT IMAGE SLIDER — MOBILE FIX
   ========================================= */

@media (max-width:768px){

    .about{
        flex-direction:column;
        align-items:stretch;
    }

    .about-image{

        flex:0 0 auto;

        width:100%;
        min-width:0;
        height:320px;

        position:relative;

        display:block;

        overflow:hidden;

        opacity:1;
        visibility:visible;

    }

    .about-slide{

        position:absolute;

        top:0;
        left:0;

        width:100%;
        height:100%;

        display:block;

        object-fit:cover;

        border-radius:18px;

    }

}