@media (max-width: 768px) {
    html{
        overflow-x: hidden;
    }
}
/*----------------navbar-------------------*/
    @media (max-width: 768px) {
        .menu-toggle {
            display: block!important;
        }

        .nav-links {
            position: absolute;
            top: 100%; /* Sits right under the navbar */
            left: 0;
            width: 100%;
            background: #f2f5fa;
            flex-direction: column; /* Stack links vertically */
            gap: 0;
            max-height: 0; /* Hidden by default */
            overflow: hidden;
            transition: max-height 0.4s ease-in-out;
            border-bottom: 2px solid var(--red);
            box-shadow: 0 10px 15px rgba(0,0,0,0.05);
        }

        /* When the "active" class is added via JS */
        .nav-links.active {
            max-height: 100vh; /* Adjust based on number of links */
        }

        .nav-links li {
            width: 100%;
            text-align: center;
        }

        .nav-links a {
            display: block;
            padding: 15px 0;
            border-bottom: 1px solid var(--border-color);
            font-size: 1.1rem;
            width: 100%;
        }

        .nav-links a:hover {
            background: var(--light-bg);
            letter-spacing: 2px;
        }
    }
/*--------------------banner------------------*/
    @media (max-width: 1024px) {
        .hero-content h1 {
            font-size: 3rem;
            max-width: 800px;
        }
    }
    /* --- Responsive Layout for Mobile --- */
    @media (max-width: 992px) {
        .hero-grid {
            flex-direction: column;
            text-align: center;
            gap: 6px;
        }
        
        .hero-banner {
            padding-top: 100px;
        }

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

        .hero-content h1 {
            font-size: 2.8rem;
        }
        
        .hero-video {
            width: 90%;
            margin-top: 40px;
        }
    }

    @media (max-width: 768px) {
        .hero-banner {
            padding-top: 60px; /* Reduced space for mobile */
            padding-bottom: 30px;
        }

        .hero-content h1 {
            font-size: 2.4rem;
            line-height: 1.3;
        }

        /* Scaling the animated SVG arrow */
        .logo-arrow {
            height: 35px;
            top: -8px;
            width: 115%;
        }

        .hero-content p {
            font-size: 1.1rem;
            padding: 0 15px;
        }

        /* Construction Road Scaling */
        .construction-road {
            margin-top: 40px;
        }

        .crane-move {
            height: 70px; /* Smaller crane so it doesn't crowd the screen */
            bottom: 41px;
        }

        .jcb-move {
            height: 50px; /* Smaller JCB */
            bottom: 41px;
        }

        .marquee-ribbon {
            margin-top: 40px;
            padding: 10px 0;
        }
    }

    @media (max-width: 480px) {
        .hero-banner {
            padding-top: 40px;
        }

        .hero-content h1 {
            font-size: 1.9rem;
            text-align: center;
        }

        /* Adjusting the SVG for very small screens */
        .logo-arrow {
            height: 30px;
            top: -6px;
            left: -5%;
            width: 120%;
        }

        /* Stack buttons vertically on mobile for better thumb reach */
        .hero-btns {
            flex-direction: column;
            gap: 12px;
            padding: 0 20px;
        }

        .btn {
            width: 100%;
            padding: 12px 20px;
            font-size: 1rem;
        }

        /* Slow down the vehicles slightly on mobile to prevent "flicker" on short screens */
        .crane-move {
            animation-duration: 15s;
            height: 55px;
        }

        .jcb-move {
            animation-duration: 10s;
            height: 40px;
        }

        .marquee-content {
            gap: 30px; /* Tighter gap for small screens */
        }

        .marquee-content span {
            font-size: 0.85rem;
        }
    }
/*---------------who we are----------------*/
    @media (max-width: 1024px) {
        .grid-2 {
            gap: 40px; /* Reducing gap for tablets */
        }
    }

    @media (max-width: 768px) {
        .who-we-are .grid-2 {
            grid-template-columns: 1fr; /* Stack left and right sections */
            text-align: center;
            padding: 60px 20px;
        }

        .who-left {
            order: 2; /* Put the text below the cards for a better mobile flow */
        }

        .who-right {
            order: 1; /* Cards appear first */
            margin-bottom: 30px;
        }

        .sub-heading {
            margin: 0 auto 10px;
        }

        /* Center the counters on mobile */
        .counters-grid {
            justify-content: center;
            max-width: 500px;
            margin: 30px auto;
        }

        .counter-box {
            padding: 15px;
        }

        /* Adjusting the pointer cards for mobile */
        .pointer-card {
            text-align: left; /* Keep text left-aligned inside the card for readability */
            margin-bottom: 15px;
        }

        .pointer-card i {
            font-size: 2.2rem; /* Slightly smaller icons */
        }
    }

    @media (max-width: 480px) {
        .section-title {
            font-size: 2rem;
        }

        /* Make counters stack in a single column or stay 2x2 */
        .counters-grid {
            grid-template-columns: repeat(2, 1fr); /* Keep 2x2 for compactness */
            gap: 15px;
        }

        .counter-box h3 {
            font-size: 1.6rem;
        }

        /* Adjust the geometric shadow so it doesn't look too bulky on small screens */
        .pointer-card {
            box-shadow: 6px 6px 0px var(--border-color);
            padding: 20px 15px;
            gap: 15px;
        }

        .pointer-card h4 {
            font-size: 1.1rem;
        }

        .pointer-card p {
            font-size: 0.85rem;
        }
    }
/*--------------growth--------------*/
    /* --- Growth & Form Section Responsive --- */

    @media (max-width: 1024px) {
        .growth-section .grid-2 {
            gap: 40px;
        }
        
        .form-container {
            padding: 30px; /* Slightly tighter padding for tablets */
        }
    }

    @media (max-width: 768px) {
        .growth-section {
            padding: 60px 20px; /* Add padding at bottom since it's no longer just 0 */
        }

        .growth-section .grid-2 {
            grid-template-columns: 1fr; /* Stack text and form */
            text-align: center;
        }

        .growth-features {
            justify-items: center; /* Center the list items for mobile */
            margin-bottom: 40px;
        }

        .growth-features li {
            justify-content: center; /* Center text with icons */
        }

        .form-container {
            max-width: 550px;
            margin: 0 auto; /* Center the form on the page */
            text-align: left; /* Keep form labels/text left-aligned for UX */
        }
    }

    @media (max-width: 480px) {
        .growth-section h2 {
            font-size: 1.8rem;
        }

        /* Change feature list to single column for small phones */
        .growth-features {
            grid-template-columns: 1fr;
            gap: 12px;
        }

        .growth-features li {
            font-size: 0.9rem;
            justify-content: flex-start; /* Better readability on very small screens */
            padding-left: 20px;
        }

        .form-container {
            padding: 25px 20px;
        }

        .form-container h3 {
            font-size: 1.3rem;
        }

        /* Make the button full width and chunky for easy tapping */
        .main-form .btn {
            width: 100%;
            padding: 15px;
        }
        
        /* Ensure icons in inputs stay centered vertically */
        .input-group i {
            top: 16px;
        }
    }
/*---------------services-----------------------*/
    /* --- Services Section Responsive --- */

    @media (max-width: 1100px) {
        /* Step down to 3 columns for small laptops/large tablets */
        .services-grid-4 {
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }
    }

    @media (max-width: 992px) {
        .services-section {
            padding: 80px 0;
        }
        
        /* Step down to 2 columns for standard tablets */
        .services-grid-4 {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 768px) {
        .section-title {
            font-size: 2.2rem;
        }

        .section-desc {
            font-size: 1rem;
            padding: 0 20px;
        }

        .service-card {
            padding: 30px 20px;
        }
        
        /* Ensure the hover effect isn't too jarring on touch devices */
        .service-card:hover {
            transform: translateY(-5px) !important;
        }
    }

    @media (max-width: 576px) {
        /* Step down to 1 column for mobile phones */
        .services-grid-4 {
            grid-template-columns: 1fr;
            gap: 20px;
            margin-top: 40px;
        }

        .service-card {
            text-align: center;
            align-items: center; /* Center the icons and text */
        }

        .service-card h3 {
            font-size: 1.3rem;
        }

        /* Make the "Know More" button slightly larger for mobile tapping */
        .btn-sm {
            font-size: 1rem;
            padding: 10px 0;
        }
        
        .badge {
            top: 10px;
            right: 10px;
        }
    }
/*-------------why choose us--------------*/
    /* --- Why Choose Us (Dark Section) Responsive --- */

    @media (max-width: 1100px) {
        .why-grid {
            grid-template-columns: repeat(2, 1fr); /* 2x2 grid for tablets */
            gap: 20px;
            padding: 0 20px;
        }
    }

    @media (max-width: 768px) {
        .dark-section {
            padding: 60px 0;
        }

        .why-card-dark {
            padding: 30px 20px;
        }

        /* Scaling down the icon box slightly for mobile */
        .why-card-dark .why-icon-box {
            width: 55px;
            height: 55px;
            font-size: 1.4rem;
            margin-bottom: 20px;
        }

        .why-card-dark h4 {
            font-size: 1.1rem;
        }
    }

    @media (max-width: 576px) {
        .why-grid {
            grid-template-columns: 1fr; /* Single column for phones */
            gap: 15px;
        }

        .why-card-dark {
            max-width: 400px;
            margin: 0 auto; /* Keep cards centered and neat */
        }

        .dark-section .section-title {
            font-size: 1.8rem;
            line-height: 1.2;
        }

        .dark-section .section-desc {
            font-size: 0.95rem;
        }

        /* Disable the hover translate effect on mobile to prevent scroll lag */
        .why-card-dark:hover {
            transform: translateY(-5px);
        }
    }
/*---------------faq------------------*/
    /* --- FAQ Section Responsive --- */

    @media (max-width: 992px) {
        .faq-container {
            padding: 0 20px; /* Prevent boxes from touching screen edges */
        }
    }

    @media (max-width: 768px) {
        .faq-section {
            padding: 60px 0;
        }

        .faq-btn {
            padding: 18px 20px; /* Slightly tighter padding */
            font-size: 1rem; /* Adjusting font for medium screens */
            gap: 15px; /* Ensures space between text and arrow */
        }

        .faq-content p {
            padding: 0 20px 20px 20px;
            font-size: 0.95rem;
        }
    }

    @media (max-width: 480px) {
        .faq-section .section-title {
            font-size: 1.8rem;
        }

        .faq-btn {
            font-size: 0.95rem;
            padding: 15px;
            line-height: 1.4; /* Better spacing for multi-line questions */
        }

        .faq-btn i {
            font-size: 0.8rem; /* Smaller arrow for small screens */
        }

        .faq-content p {
            padding: 0 15px 15px 15px;
            font-size: 0.9rem;
        }

        /* Reduce the lift effect on mobile to keep it stable */
        .faq-item:hover {
            transform: translateY(-1px);
        }
    }
/*-------------footer-----------------*/
    /* --- Footer Section Responsive --- */

    @media (max-width: 1024px) {
        .grid-3 {
            gap: 40px; /* Reducing the large desktop gap */
            grid-template-columns: 1.5fr 1fr 1.2fr;
        }
    }

    @media (max-width: 768px) {
        .footer {
            padding: 60px 0 20px;
            text-align: center;
        }

        .grid-3 {
            grid-template-columns: 1fr; /* Stack everything in one column */
            gap: 40px;
        }

        .footer-left img {
            margin: 0 auto 20px; /* Center the logo */
        }

        .footer-left p {
            max-width: 450px;
            margin: 0 auto;
        }

        .footer-middle ul {
            padding: 0;
        }

        .social-icons {
            justify-content: center; /* Center social media circles */
        }

        .footer-right p i {
            margin-right: 5px;
        }
    }

    @media (max-width: 480px) {
        .footer {
            padding: 50px 0 20px;
        }

        .footer-bottom p {
            font-size: 0.8rem;
            line-height: 1.5;
            padding: 0 15px;
        }

        .footer-middle ul li {
            margin-bottom: 15px; /* Bigger tap area for links */
        }
        
        .footer-right p {
            font-size: 0.9rem;
        }
    }
/*-------------sticky whatspp------------*/
    /* Responsive adjustment for small phones */
    @media (max-width: 480px) {
        .whatsapp-sticky {
            bottom: 50px;
            right: 20px;
            width: 50px;
            height: 50px;
            font-size: 30px;
        }
        .tooltip-text {
            display: none; /* Hide tooltip on small mobile to save space */
        }
    }


/* ================================================================
   ABOUT PAGE RESPONSIVE STYLES
   ================================================================ */

@media (max-width: 1024px) {
    .about-banner h1 { font-size: 3rem; }
    .grid-70-30, .grid-30-70 { gap: 30px; }
}

@media (max-width: 768px) {
    /* --- General Spacing --- */
    .section { padding: 60px 20px; }

    /* --- About Banner --- */
    .about-banner { padding: 120px 20px 60px; }
    .about-banner h1 { font-size: 2.2rem; }
    .about-banner p { font-size: 1rem; }

    /* --- About Intro (WHO WE ARE) --- */
    .about-intro .grid-2 {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    .about-intro-text { text-align: center; order: 1; }
    .about-intro-img { order: 2; width: 90%; margin: 0 auto; }
    .about-intro h2 { font-size: 2rem; }

    /* --- Vision & Mission (Zig-Zag Flip) --- */
    .grid-70-30, .grid-30-70 {
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    /* Keep Heading/Text on TOP for Mission too */
    .grid-30-70 { flex-direction: column; } 
    .grid-30-70 .vm-cards-grid { order: 2; }
    .grid-30-70 .vm-main-content { order: 1; }

    .vm-main-content h2 { font-size: 2.2rem; }
    .lead-text { font-size: 1.1rem; }

    .vm-cards-grid {
        max-width: 500px;
        margin: 0 auto;
    }

    /* --- Values Section --- */
    .values-section h2 { font-size: 2rem; }
    .values-grid {
        grid-template-columns: 1fr; /* Stack cards on mobile */
        gap: 20px;
    }
    .value-card { padding: 30px 20px; }

    /* --- Why Choose Us --- */
    .why-choose-form .grid-2 {
        display: flex;
        flex-direction: column;
    }
    
    .why-choose-form h2 { font-size: 2rem; text-align: center; }
    .intro-p { font-size: 1rem; text-align: center; padding-left: 0; border-left: none; border-top: 3px solid var(--red); padding-top: 15px; }

    .why-feature-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }

    /* --- Sticky Form Behavior --- */
    .form-container {
        position: relative; /* Remove sticky on mobile */
        top: 0;
        margin-top: 40px;
        padding: 30px 20px;
    }
}

@media (max-width: 480px) {
    .about-banner h1 { font-size: 1.8rem; }
    .vm-main-content h2 { font-size: 1.8rem; }
    
    .vm-cards-grid {
        grid-template-columns: 1fr; /* Single column for stats on tiny screens */
    }
    .colspan-2 { grid-column: span 1; }
    
    .footer-bottom p { font-size: 0.8rem; }
}
/* Mobile Fixes */
@media (max-width: 992px) {
    .contact-main-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .contact-sidebar { text-align: center; }
    .contact-item { flex-direction: column; align-items: center; text-align: center; }
    .contact-form-card { padding: 30px 20px; }
}

/*--------------------------------------------career page-----------------------------*/

/* --- Careers Page Responsive --- */

@media (max-width: 1024px) {
    .career-hero h1 {
        font-size: 2.8rem;
    }
    
    .openings-orbit {
        height: 600px; /* Shrink orbit slightly for tablets */
    }

    .social-media { transform: rotate(0deg) translateY(-220px) rotate(0deg); }
    .graphic      { transform: rotate(60deg) translateY(-220px) rotate(-60deg); }
    .sales-head   { transform: rotate(120deg) translateY(-220px) rotate(-120deg); }
    .tele         { transform: rotate(180deg) translateY(-220px) rotate(-180deg); }
    .crm          { transform: rotate(240deg) translateY(-220px) rotate(-240deg); }
    .sales-exec   { transform: rotate(300deg) translateY(-220px) rotate(-300deg); }
}

@media (max-width: 768px) {
    .career-hero {
        padding: 60px 0;
    }

    .career-hero h1 {
        font-size: 2.2rem;
    }

    .career-hero p {
        font-size: 1.1rem;
    }

    .career-hero svg {
        width: 180px;
        height: 180px;
    }

    /* Transform Orbit into a manageable Grid */
    .openings-orbit {
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 40px 10px;
    }

    .orbit-center {
        display: none; /* Hide the spinning SVG on mobile to save space */
    }

    .job-node {
        position: relative; /* Reset from absolute */
        transform: none !important; /* Kill the rotation/translation */
        width: 100%;
        margin: 0 auto;
    }

    /* CTA Section */
    .cta-title {
        font-size: 2.2rem;
    }

    /* Modal Adjustments */
    .modal-content {
        padding: 30px 20px;
        width: 95%;
        margin: 10px;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .modal-title {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .career-hero h1 {
        font-size: 1.8rem;
    }

    .openings-orbit {
        grid-template-columns: 1fr; /* Single column on very small phones */
    }

    .btn-lg {
        padding: 15px 30px;
        font-size: 0.9rem;
        width: 100%;
    }

    .job-node {
        flex-direction: row; /* Horizontal cards on small phones */
        text-align: left;
        padding: 12px;
        gap: 15px;
    }

    .node-icon {
        margin-bottom: 0;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    .job-node span {
        text-align: left;
    }
}
/* Mobile Adjustments */
@media (max-width: 991px) {
    .service-hero h1{
        font-size: 2.3rem;
    }
    .flex-strip {
        flex-direction: column;
        gap: 30px;
    }
    .signal-divider { display: none; }
    .service-hero-grid {
        grid-template-columns: 1fr; /* Stack on top of each other */
        text-align: center;
    }
    
    .service-hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .benefit-bullets li {
        text-align: left;
    }
    
    .service-hero-image-container {
        max-width: 500px;
        margin: 0 auto;
    }
    
    .floating-card {
        left: 10px; /* Adjust position for small screens */
    }
    .service-hero-btns {
        margin-bottom: 0;
    }
}
/* Responsive */
@media (max-width: 991px) {
    .intro-grid, .why-matters-grid {
        grid-template-columns: 1fr;
    }
    .mid-section-cta {
        padding: 40px 20px;
    }
}
/* Responsive Tablet/Mobile */
@media (max-width: 1200px) {
    .reasons-grid { grid-template-columns: repeat(2, 1fr); }
    /* Reset centering on tablets */
    .reason-card:nth-child(5), .reason-card:nth-child(6) { grid-column: span 1; }
}

@media (max-width: 768px) {
    .reasons-grid { grid-template-columns: 1fr; }
    .section-header h2 { font-size: 2rem; }
}
/* Desktop Only: Push the last two cards to the middle */
@media (min-width: 992px) {
    .reason-card:nth-child(5) {
        grid-column: 2 / 3; /* Starts at line 2 */
    }
    .reason-card:nth-child(6) {
        grid-column: 3 / 4; /* Starts at line 3 */
    }
}

/* Responsive */
@media (max-width: 768px) {
    .roadmap-container { padding-left: 40px; }
    .roadmap-line { left: 15px; }
    .roadmap-dot { left: -38px; }
}
/* Mobile Adjustments */
@media (max-width: 768px) {
    .final-cta-section {
        padding: 80px 20px;
    }
    .cta-content h2 {
        font-size: 1.8rem;
    }
    .btn-white {
        width: 100%; /* Full width button on mobile for easier tapping */
        padding: 15px 25px;
    }
}