@media (min-width: 992px) {
    .navbar .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: all 0.3s ease;
    }

    /* Moved from style.css */
    .advanced-layout-wrapper .advanced-sidebar-sticky {
        display: block;
        position: sticky;
        top: 110px;
        align-self: start;
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        z-index: 50;
        margin-bottom: 0;
    }
}

.hero {
    min-height: 91vh;
}

.hero .carousel-item {
    height: 91vh;
}

/* Fix for mid-sized screens to prevent hero overlap (e.g. 1220px) */
@media (max-width: 1366px) {
    .hero .container {
        padding-left: 80px !important;
        padding-right: 80px !important;
        max-width: 100% !important;
    }

    .carousel-control-prev.custom-slider-btn {
        left: 10px !important;
        width: 45px !important;
        height: 45px !important;
    }

    .carousel-control-next.custom-slider-btn {
        right: 10px !important;
        width: 45px !important;
        height: 45px !important;
    }

    .hero-title {
        font-size: 2.4rem !important;
    }

    .hero-text-content {
        max-width: 500px !important;
        padding: 20px !important;
    }
}

@media (max-width: 991.98px) {
    .navbar .dropdown-menu {
        position: static;
        float: none;
        background: rgba(0, 0, 0, 0.1);
        backdrop-filter: none;
        border: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        margin-top: 0;
    }

    .navbar .dropdown-menu.show {
        display: block;
    }

    .navbar .dropdown-item:hover {
        padding-left: 20px;
        background: transparent !important;
    }

    .navbar .dropdown-item::before {
        display: none;
    }
}

@media(max-width:992px) {
    .card-column {
        width: 50%;
    }
}

@media (max-width: 768px) {
    .card-column {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .card-column {
        width: 100%;
        padding: 0 15px;
        margin-bottom: 70px;
        /* Increased margin to prevent border overlap */
    }

    .card-details {
        padding: 25px 10px;
        max-width: 270px;
        /* Reduced fixed width */
        margin: 0 auto;
    }

    /* Center the skew background */
    .card-details:before {
        left: 50%;
        width: 100%;
        /* Fit container */
        min-width: 0;
        /* Remove min-width constraint to avoid overflow */
        height: 100%;
        min-height: 0;
        transform: translate(-50%, -50%) skew(-20deg);
        z-index: -1;
        border-radius: 8px;
    }

    /* Remove animated border on mobile */
    .card-details:after {
        display: none;
    }

    /* Adjust icon box for mobile */
    .card-icons {
        width: 60px;
        /* Tiny icon */
        height: 60px;
        margin-bottom: 15px;
        border-radius: 8px;
        left: auto;
    }

    /* Ensure image counter-skews correctly */
    .card-icons img {
        transform: skew(20deg) scale(1.1);
    }

    .card-details h3 {
        font-size: 16px;
        margin-top: 10px;
        margin-bottom: 5px;
        text-align: center;
        width: 100%;
    }

    .card-details p {
        font-size: 12px;
        text-align: center;
        width: 100%;
        line-height: 18px;
    }
}




@media (max-width: 1199px) {
    .capability-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        border-right: none;
    }
}

@media (max-width: 768px) {
    .capability-item {
        padding: 50px 25px;
    }

    .cap-number {
        font-size: 70px;
    }
}

@media (max-width: 991.98px) {
    .hero-modern {
        padding: 120px 0 60px;
        height: auto;
        text-align: center;
    }

    .hero-text-content {
        padding-right: 0;
        margin-bottom: 60px;
    }

    .hero-description {
        margin: 0 auto 30px;
    }

    .hero-collage-wrapper {
        height: 400px;
        /* Smaller height for mobile/tablet */
    }

    .img-main {
        width: 200px;
        height: 280px;
        left: 50%;
        transform: translateX(-50%);
    }

    .img-secondary {
        width: 160px;
        height: 200px;
        left: 10%;
    }

    .img-accent {
        width: 140px;
        height: 180px;
        right: 10%;
    }
}

/* Fix for 990px to 991px screen range - Home Page Banner Consistency */
@media (min-width: 990px) and (max-width: 991.98px) {
    .hero-modern {
        padding: 80px 0 30px 0 !important;
        text-align: left !important;
    }

    .hero-modern .container .row {
        display: flex !important;
        align-items: center !important;
        text-align: left !important;
    }

    .hero-modern .col-lg-6 {
        width: 50% !important;
        flex: 0 0 calc(50% - 15px) !important;
    }

    .hero-text-content {
        margin-bottom: 0 !important;
        padding-right: 20px !important;
        text-align: left !important;
    }

    .hero-description {
        margin: 0 0 30px 0 !important;
        /* Restore left alignment for description */
    }

    .hero-collage-wrapper {
        height: 600px !important;
        /* Desktop height */
        margin-top: 0 !important;
    }

    /* Restore Desktop Collage Image sizes and positions */
    .img-main {
        width: 320px !important;
        height: 420px !important;
        top: 18% !important;
        left: 20% !important;
        transform: none !important;
    }

    .img-secondary {
        width: 240px !important;
        height: 300px !important;
        bottom: 5% !important;
        left: 0 !important;
    }

    .img-accent {
        width: 200px !important;
        height: 260px !important;
        top: 12% !important;
        right: 10% !important;
    }

    /* Ensure dots/pagination from transition don't interfere if any */

    /* Remove carousel controls for all tablet and mobile widths (as requested for 769-989 and 990-991) */
    .carousel-control-prev.custom-slider-btn,
    .carousel-control-next.custom-slider-btn {
        display: none !important;
    }
}

/* Consolidate carousel control removal for everything below desktop */
@media (max-width: 991.98px) {

    .carousel-control-prev.custom-slider-btn,
    .carousel-control-next.custom-slider-btn {
        display: none !important;
    }
}

@media (max-width: 768px) {

    .hero h1,
    .hero-title {
        font-size: 1.6rem;
        margin-bottom: 12px;
        letter-spacing: -0.5px;
    }

    .hero {
        min-height: 80vh !important;
        padding-top: 0 !important;
    }

    .hero .container {
        padding-top: 100px !important;
    }

    .hero .carousel-item {
        height: 80vh !important;
        min-height: 500px !important;
    }

    .hero-buttons .btn {
        padding: 10px 20px;
        font-size: 14px;
    }

    .hero-text-content {
        max-width: none !important;
        padding: 20px !important;
        background: rgba(77, 136, 163, 0.4) !important;
        /* Slightly lighter to show image more */
        border-radius: 0 15px 15px 0 !important;
    }

    .hero .col-lg-6 {
        padding-left: 0 !important;
    }





    .section-title {
        font-size: 1.5rem !important;
        margin-bottom: 40px !important;
        padding-top: 20px !important;
        /* color: #0b3c5d !important; */
    }

    .hero-collage-wrapper {
        height: 450px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative;
    }

    .collage-slider-track {
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 0;
        width: 100%;
        height: 100%;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        /* Hide scrollbar */
        scrollbar-width: none;
        -ms-overflow-style: none;
        z-index: 5;
    }

    .collage-slider-track::-webkit-scrollbar {
        display: none;
    }

    /* Slider Item Layout */
    .collage-image {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        min-width: 100% !important;
        flex: 0 0 100% !important;
        height: 100% !important;
        margin: 0 !important;
        border-radius: 0px;
        scroll-snap-align: center;
        transform: none !important;
        border: 4px solid #fff;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;

    }

    /* Refined Navigation Arrows */
    .collage-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        border: none;
        color: #fff;
        font-size: 2.5rem;
        z-index: 25;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        opacity: 0.8;
    }

    .collage-nav.prev {
        left: 10px;
    }

    .collage-nav.next {
        right: 10px;
    }

    /* Bar Indicators */
    .collage-pagination {
        position: absolute;
        bottom: 25px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 12px;
        z-index: 20;
        width: auto;
    }

    .indicator-bar {
        width: 60px;
        height: 4px;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    .indicator-bar.active {
        background: #fff;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }

    .img-main,
    .img-secondary,
    .img-accent {
        width: 100% !important;
        height: 100% !important;
        animation: none !important;
    }

    .collage-decoration {
        display: none;
    }

    .hero-buttons .btn {
        margin-bottom: 15px;
    }
}


@media (max-width: 768px) {
    .about-modern-text {
        padding-left: 0;
        /* margin-top: 40px; */
    }

    .modern-title {
        font-size: 2.5rem;
    }

    .modern-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .modern-features-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

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

    .cta-glass-card {
        padding: 40px 20px;
    }
}

@media (max-width: 768px) {

    .services-hero h1,
    .about-hero h1,
    .about-hero-1 h1 {
        font-size: 28px;
        margin-top: 30px;
    }

    .services-hero p,
    .about-hero p,
    .about-hero-1 p {
        font-size: 0.7rem !important;
        line-height: 1.5 !important;
    }
}

@media (max-width: 576px) {
    .service-features-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {

    /* Stacking main content and sidebar for mobile */
    .container-custom {
        display: block;
    }

    .sidebar {
        position: relative;
        top: 0;
        width: 100%;
        /* Sidebar will take full width on mobile */
        margin-top: 30px;
        /* Add some space at the top for mobile */
        padding: 20px;
        min-height: 500px;
        /* Set a reasonable min-height on mobile */
    }
}

@media (min-width: 992px) {
    .container-custom {
        display: flex;
        gap: 30px;
        align-items: flex-start;
        /* CRITICAL: Allows sidebar to stick while scrolling */
    }

    .main-content {
        flex: 3;
    }

    .sidebar {
        flex: 1;
        align-self: flex-start;
    }
}

@media (max-width: 991.98px) {
    .container-custom {
        display: block;
    }

    .faq-item h4 {
        font-size: 1.3rem;
    }

    .faq-item p {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .contact-form {
        padding: 30px;
    }

    .contact-info h4 {
        font-size: 1.2rem;
    }

    .contact-info p {
        font-size: 1rem;
    }
}

@media (max-width: 767px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
        /* Stack testimonials in one column on mobile */
        gap: 20px;
        /* Reduce gap between testimonials */
    }

    /* Optional: Reduce padding and font size for mobile */
    .testimonial {
        padding: 20px;
        /* Reduced padding */
    }

    .testimonial p {
        font-size: 1rem;
        /* Smaller font size for mobile */
    }

    .testimonial h4 {
        font-size: 1rem;
        /* Smaller font size for mobile */
    }
}

@media (max-width: 767px) {
    .sidebar {
        padding: 15px;
        /* Reduce padding on mobile */
        width: 100%;
        /* Ensure full width on mobile */
        margin-bottom: 20px;
        /* Adds space between sidebar and testimonials */
        min-height: calc(100vh - 40px);
        /* Ensures the sidebar doesn't overflow and fits in the viewport */
        overflow-y: auto;
        /* Allows scrolling if the content overflows */
    }

    /* Adjust list items in the sidebar */
    .sidebar ul li {
        font-size: 1rem;
        /* Adjust font size for mobile */
        padding: 10px 15px;
        /* Adjust padding for mobile */
    }

    .sidebar ul li a {
        font-size: 1rem;
        /* Adjust font size for mobile */
        gap: 10px;
        /* Reduce space between text and icon */
    }

    .sidebar ul li a i {
        font-size: 1.2rem;
        /* Smaller icon for mobile */
    }

    /* Adjust the testimonials grid to stack vertically */
    .testimonials-grid {
        grid-template-columns: 1fr;
        /* Stack testimonials in one column */
        gap: 20px;
        /* Reduced gap between testimonials */
    }

    /* Reduce padding and font size for testimonials */
    .testimonial {
        padding: 20px;
        /* Reduced padding */
    }

    .testimonial p {
        font-size: 1rem;
        /* Smaller font size for mobile */
    }

    .testimonial h4 {
        font-size: 1rem;
        /* Smaller font size for mobile */
    }


}

@media(max-width: 991.98px) {

    .about-grid,
    .why-grid,
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .about-hero h1,
    .about-hero-1 h1,
    .contact-hero h1,
    .services-hero h1 {
        font-size: 28px;
    }

    .about-hero p,
    .about-hero-1 p,
    .contact-hero p,
    .services-hero p {
        font-size: 0.9rem !important;
    }

    .about-hero-content {
        margin-top: 0;
    }

    .about-hero,
    .services-hero,
    .contact-hero {
        padding-top: 0 !important;
        min-height: 450px !important;
    }

    .about-hero-content,
    .services-hero-content,
    .contact-hero-content {
        margin-top: 90px !important;
    }

    /* ===== MOBILE SIDE MENU (Unique Glass Drawer) ===== */
    .navbar-collapse {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 85%;
        /* Drawer width */
        max-width: 400px;
        background: var(--primary);
        /* Solid Brand Blue */
        padding: 30px 30px 30px;
        /* Adjusted padding */
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
        border-radius: 30px 0 0 30px;
        /* Added rounded corners for premium feel */
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1), visibility 0s linear 0.4s;
        z-index: 1050;
        display: block !important;
        /* Override BS collapse display toggling */
        visibility: hidden;
        overflow-y: auto;
        /* Allow scrolling within menu */
    }

    .navbar-collapse.show {
        transform: translateX(0);
        visibility: visible;
        transition-delay: 0s;
    }

    /* Mobile Logo Header */
    .mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 40px;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .mobile-logo {
        height: 60px;
        /* Adjust size as needed */
        width: auto;
        border-radius: 8px;
        background-color: white;
        padding: 5px;
    }

    /* Close Button Styles */
    .side-menu-close {
        position: absolute;
        top: 35px;
        /* Aligned with logo */
        right: 30px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: white;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .side-menu-close:hover {
        background: var(--secondary);
        border-color: var(--secondary);
        transform: rotate(90deg);
    }

    /* Mobile Nav Links Styling */
    .navbar-nav .nav-link {
        font-size: 1.1rem;
        padding: 15px 0;
        border: none !important;
        /* Clean, no borders */
        color: rgba(255, 255, 255, 0.9) !important;
        transition: all 0.3s ease;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .navbar-nav .nav-link:hover {
        color: var(--secondary) !important;
        padding-left: 10px;
        background: rgba(255, 255, 255, 0.02);
    }

    /* Chevron Rotation Animation */
    .navbar-nav .nav-link i.fa-chevron-right {
        transition: transform 0.3s ease;
    }

    .navbar-nav .nav-link[aria-expanded="true"] i.fa-chevron-right {
        transform: rotate(90deg);
    }

    /* Keep Mobile Nav Links White on Scroll */
    .navbar-animate .navbar-nav .nav-link {
        color: rgba(255, 255, 255, 0.9) !important;
    }

    .navbar-animate .navbar-nav .nav-link:hover {
        color: var(--secondary) !important;
    }

    /* Restore Chevron / Arrow */
    /* We use the custom one we added in HTML */
    .navbar-nav .nav-link::after {
        content: none !important;
    }

    .navbar-nav .nav-link:hover::after {
        display: none !important;
    }

    /* STRICTLY Remove desktop green underline on mobile */
    .navbar-nav .nav-link::before {
        display: none !important;
        content: none !important;
        width: 0 !important;
        height: 0 !important;
        border: none !important;
    }

    /* HIDE ALL GREEN DASHES AND BORDERS (Mobile Only) */
    /* We use real <i> tags in HTML for chevron now, so we can hide all pseudos */
    .mega-menu-content .mega-column h6::before,
    .mega-menu-content .mega-column h6::after,
    .dropdown-menu.mega-menu::before,
    .dropdown-menu.mega-menu::after,
    .navbar-nav .nav-link::before,
    .navbar-nav .nav-link::after,
    .mega-column h6::after {
        display: none !important;
        content: none !important;
        width: 0 !important;
        height: 0 !important;
        border: none !important;
    }

    /* Force remove any borders on containers */
    .mega-column,
    .mega-menu-content .mega-column h6,
    .dropdown-menu.mega-menu,
    .navbar-collapse {
        border: none !important;
        box-shadow: none !important;
    }
}

@media (max-width: 992px) {
    .creative-cards.style-one .row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .creative-cards.style-one .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 15px !important;
        padding-bottom: 20px !important;

        /* Center the first/last items: (100vw - 75vw) / 2 = 12.5vw */
        padding-left: 12.5vw !important;
        padding-right: 12.5vw !important;

        scroll-snap-type: x mandatory;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch;

        /* Hide Scrollbar */
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE 10+ */
    }

    .creative-cards.style-one .row::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
    }

    .creative-cards.style-one .card-column {
        min-width: 75vw !important;
        /* Slightly wider card */
        width: 75vw !important;
        flex: 0 0 auto !important;
        scroll-snap-align: center;
        margin: 0 !important;
    }

    /* Compact Content Logic */
    .card-icons {
        width: 140px;
        height: 140px;
        margin: 0 auto 15px !important;
        /* Restored gap */
        left: auto;
    }

    .card-details {
        min-height: 240px !important;
        padding: 15px;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        /* User reported issues with centering, switching to Flexbox */
        justify-content: flex-start !important;
    }

    .card-details h3 {
        font-size: 12px;
        padding: 8px 15px;
        margin: 10px auto 15px !important;
        /* Restored gap & Centered */
        white-space: nowrap;
        transform: none !important;
    }

    .card-details p {
        font-size: 11px;
        line-height: 1.3;
        text-align: center;
        /* Explicitly centered */
        transform: none !important;
    }

    /* Remove Slant/Skew on Mobile */
    .card-details:before,
    .card-details:after,
    .card-icons,
    .card-icons img {
        transform: translate(-50%, -50%) skew(0deg) !important;
        border-radius: 12px !important;
    }

    /* Fix transform for icons specifically since they dont use translate -50 -50 */
    .card-icons,
    .card-icons img {
        transform: skew(0deg) !important;
    }
}

@media (max-width: 768px) {
    .custom-accordion .accordion-button {
        padding: 15px;
        font-size: 1rem;
        gap: 10px;
    }

    .custom-accordion .icon-wrapper {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .custom-accordion .accordion-body {
        padding: 5px 15px 20px 15px;
        /* Less padding on mobile */
    }
}

@media (max-width: 768px) {
    .innova-brand-band {
        padding: 60px 20px;
    }

    .brand-large-text {
        font-size: 2rem;
    }

    .brand-small-text {
        font-size: 0.8rem;
        letter-spacing: 2px;
    }
}

@media (min-width: 992px) {
    .interactive-collage.about-collage {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 220px);
    }

    /* Default layout when nothing is featured */
    .interactive-collage:not(.has-featured) .collage-item:nth-child(1) {
        grid-column: span 2;
        grid-row: span 2;
    }
}

@media (min-width: 992px) {
    .interactive-collage.has-featured .collage-item {
        grid-column: span 1;
        grid-row: span 1;
    }

    .interactive-collage.has-featured .collage-item.featured {
        grid-column: span 2;
        grid-row: span 2;
    }
}

@media (max-width: 768px) {
    .interactive-collage.about-collage {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    /* Mobile Fan Stack Layout for About Section */
    .about-collage {
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 30px;
    }

    .about-collage .collage-shape {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 250px;
        height: 250px;
    }

    /* Hide floating elements for cleaner look */
    .about-collage .floating-img-1,
    .about-collage .floating-img-2 {
        display: none;
    }

    /* Reset Common Item Styles */
    .about-collage .main-img,
    .about-collage .secondary-img,
    .about-collage .accent-img {
        width: 200px !important;
        height: 280px !important;
        left: 50% !important;
        top: 50% !important;
        margin-left: -100px;
        /* Half width */
        margin-top: -140px;
        /* Half height */
        border-radius: 15px !important;
        /* Ensure uniform radius */
        position: absolute !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    }

    .about-collage .main-img {
        z-index: 10;
        transform: rotate(0deg) !important;
    }

    .about-collage .secondary-img {
        z-index: 5;
        transform: rotate(-6deg) translate(-15px, 0) !important;
        opacity: 1;
    }

    .about-collage .accent-img {
        z-index: 5;
        transform: rotate(6deg) translate(15px, 0) !important;
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .custom-accordion .accordion-button {
        padding: 15px;
        font-size: 1rem;
        gap: 10px;
    }

    .custom-accordion .icon-wrapper {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .custom-accordion .accordion-body {
        padding: 5px 15px 20px 15px;
        /* Less padding on mobile */
    }
}

@media (max-width: 768px) {
    .innova-brand-band {
        padding: 60px 20px;
    }

    .brand-large-text {
        font-size: 2rem;
    }

    .brand-small-text {
        font-size: 0.8rem;
        letter-spacing: 2px;
    }
}

@media (max-width: 768px) {
    .services-bg .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 15px !important;
        padding-bottom: 20px !important;
        padding-left: 12.5vw !important;
        /* Centering */
        padding-right: 12.5vw !important;
        scroll-snap-type: x mandatory;

        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .services-bg .row::-webkit-scrollbar {
        display: none;
    }

    .services-bg .col-md-4 {
        /* The Service Cards are inside these cols */
        flex: 0 0 75vw !important;
        max-width: 75vw !important;
        scroll-snap-align: center;
    }

    /* Smaller Content for Mobile */
    .services-bg .service-visual-box {
        width: 100px !important;
        height: 100px !important;
        margin: 0 auto 15px auto !important;
        /* Explicitly centered */
        transform: none !important;
        /* Reset desktop scale */
    }

    /* Force wrapper to respect parent size */
    .services-bg .service-img-wrapper {
        width: 100px !important;
        height: 100px !important;
    }

    .services-bg .service-icon-badge {
        width: 35px !important;
        height: 35px !important;
        bottom: -10px !important;
    }

    .services-bg .service-icon-badge i {
        font-size: 0.9rem !important;
    }

    .services-bg .service-card h5 {
        font-size: 1.1rem !important;
        margin-bottom: 10px !important;
        margin-top: 10px !important;
        /* Extra clearance */
    }

    .services-bg .service-card p {
        font-size: 0.85rem !important;
        margin-bottom: 15px !important;
        line-height: 1.4 !important;
    }

    .services-bg .read-more-btn {
        padding: 6px 20px !important;
        font-size: 0.8rem !important;
        min-width: auto !important;
    }

    .services-bg .card.service-card {
        padding: 20px 15px !important;
        /* Reduced padding */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
}

/* Slider for Services Section - Range 769px to 809px */
@media (min-width: 769px) and (max-width: 810px) {
    .services-bg .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 15px !important;
        padding-bottom: 20px !important;
        padding-left: 12.5vw !important;
        padding-right: 12.5vw !important;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .services-bg .row::-webkit-scrollbar {
        display: none;
    }

    .services-bg .col-md-4 {
        flex: 0 0 75vw !important;
        max-width: 75vw !important;
        scroll-snap-align: center;
    }

    .services-bg .service-visual-box {
        width: 100px !important;
        height: 100px !important;
        margin: 0 auto 15px auto !important;
        transform: none !important;
    }

    .services-bg .service-img-wrapper {
        width: 100px !important;
        height: 100px !important;
    }

    .services-bg .service-icon-badge {
        width: 35px !important;
        height: 35px !important;
        bottom: -10px !important;
    }

    .services-bg .service-card h5 {
        font-size: 1.1rem !important;
        margin-bottom: 10px !important;
        margin-top: 10px !important;
    }

    .services-bg .service-card p {
        font-size: 0.85rem !important;
        margin-bottom: 15px !important;
        line-height: 1.4 !important;
    }

    .services-bg .read-more-btn {
        padding: 8px 20px !important;
        font-size: 0.9rem !important;
    }

    .services-bg .card.service-card {
        padding: 20px 15px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
}

/* Match 768px styling for 769px to 890px range as requested */
@media (min-width: 769px) and (max-width: 891px) {
    .innova-brand-band {
        padding: 30px 0 !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    .brand-content-wrapper {
        padding: 0 20px !important;
        display: block !important;
        width: 100% !important;
        white-space: normal !important;
        max-width: 100% !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .brand-large-text {
        font-size: 1.3rem !important;
        white-space: normal !important;
        line-height: 1.5 !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        display: block !important;
    }

    .brand-small-text {
        font-size: 0.75rem !important;
        letter-spacing: 1px !important;
        white-space: normal !important;
        margin-bottom: 10px !important;
        display: block !important;
    }
}

@media (max-width: 768px) {
    .innova-brand-band {
        padding: 30px 0 !important;
    }

    .brand-content-wrapper {
        padding: 0 15px !important;
        display: block !important;
        width: 100% !important;
        white-space: normal !important;
        max-width: 100% !important;
    }

    .brand-large-text {
        font-size: 1.3rem !important;
        white-space: normal !important;
        line-height: 1.4 !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        hyphens: auto !important;
    }

    .brand-small-text {
        font-size: 0.7rem !important;
        letter-spacing: 1px !important;
        white-space: normal !important;
        margin-bottom: 10px !important;
        overflow-wrap: break-word !important;
    }
}

@media (max-width: 991.98px) {
    .tech-intro-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .tech-title {
        font-size: 1.8rem !important;
    }

    .tech-features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .tech-feature-pill {
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    .tech-feature-pill span {
        font-size: 0.75rem !important;
    }

    .tech-pill-icon {
        min-width: 30px !important;
        height: 30px !important;
        font-size: 0.9rem !important;
    }
}

@media (max-width: 768px) {
    #aboutMobileCarousel .carousel-img-fixed {
        height: 250px !important;
        object-fit: cover !important;
    }
}

@media (max-width: 360px) {
    #aboutMobileCarousel .carousel-img-fixed {
        height: 180px !important;
    }
}

@media (max-width: 480px) {
    .modern-features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .about-modern-text .feature-pill {
        background: #fff !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
        border: 1px solid #eee !important;
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    .about-modern-text .pill-icon {
        background: rgba(8, 68, 96, 0.1) !important;
        color: #084460 !important;
        min-width: 30px !important;
        height: 30px !important;
        font-size: 0.9rem !important;
    }

    .about-modern-text .feature-pill span {
        font-size: 0.75rem !important;
    }
}

@media (max-width: 360px) {
    .timeline-item {
        padding-left: 45px !important;
    }

    .timeline-marker {
        width: 35px !important;
        height: 35px !important;
        line-height: 35px !important;
    }

    .timeline-section::before {
        left: 17px !important;
    }
}

@media (max-width: 480px) {
    .tech-intro-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    .gallery-main {
        height: 250px !important;
    }

    .gallery-thumbs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 10px !important;
        padding-bottom: 10px !important;
    }

    .thumb-item {
        flex: 0 0 80px !important;
        height: 60px !important;
    }

    .tech-text-content {
        padding-top: 0 !important;
        text-align: left !important;
    }

    .tech-subtitle {
        font-size: 0.8rem !important;
    }

    .tech-lead {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    .tech-description {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }

    .timeline-header h4 {
        font-size: 1.1rem !important;
        word-wrap: break-word !important;
    }

    .timeline-specs {
        gap: 10px !important;
    }

    .spec-item {
        font-size: 0.8rem !important;
        padding: 6px 10px !important;
    }
}

@media (max-width: 350px) {
    .tech-title {
        font-size: 1.4rem !important;
    }

    .gallery-main {
        height: 180px !important;
    }

    .timeline-content {
        padding: 15px !important;
    }
}

@media (max-width: 991.98px) {
    .tech-intro-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .timeline-img-wrapper {
        height: 400px;
    }
}

@media (max-width: 768px) {
    .timeline-section::before {
        left: 20px;
    }

    .timeline-item {
        padding-left: 60px;
    }

    .timeline-marker {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
    }

    .timeline-content {
        padding: 15px;
    }

    .timeline-specs {
        flex-direction: column !important;
    }

    .tech-features-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .tech-title {
        font-size: 1.8rem !important;
    }

    .tech-features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .tech-feature-pill {
        padding: 10px 12px !important;
        gap: 8px !important;
    }
}

@media (max-width: 768px) {
    #aboutMobileCarousel .carousel-img-fixed {
        height: 450px !important;
        object-fit: cover !important;
    }
}

@media (max-width: 360px) {
    #aboutMobileCarousel .carousel-img-fixed {
        height: 180px !important;
    }
}

@media (max-width: 480px) {
    .modern-features-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-top: 20px;
    }

    .about-modern-text .feature-pill {
        display: flex !important;
        align-items: center !important;
        background: #fff !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
        border: 1px solid #eee !important;
        padding: 10px 12px !important;
        gap: 8px !important;
        border-radius: 50px !important;
    }

    .about-modern-text .pill-icon {
        background: rgba(8, 68, 96, 0.1) !important;
        color: #084460 !important;
        min-width: 30px !important;
        height: 30px !important;
        font-size: 0.9rem !important;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .about-modern-text .feature-pill span {
        font-size: 0.75rem !important;
        font-weight: 600;
        color: #333;
    }
}

@media (max-width: 768px) {
    .tech-features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 100% !important;
    }
}

@media (max-width: 350px) {

    /* Features Grid - 2 Columns (Synced with About page) */
    .tech-features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        max-width: 100% !important;
    }

    .tech-feature-pill {
        padding: 8px 10px !important;
        width: 100% !important;
        gap: 8px !important;
    }

    .tech-feature-pill span {
        font-size: 0.75rem !important;
        line-height: 1.1 !important;
        white-space: normal !important;
    }

    .tech-pill-icon {
        min-width: 25px !important;
        height: 25px !important;
        font-size: 0.75rem !important;
    }

    /* Gallery Adjustments */
    .gallery-main {
        height: 180px !important;
        margin-bottom: 15px !important;
    }

    .gallery-thumbs {
        justify-content: center !important;
        gap: 8px !important;
    }

    .thumb-item {
        width: 60px !important;
        height: 45px !important;
        flex: 0 0 60px !important;
    }

    /* Title scaling */
    .tech-title {
        font-size: 1.4rem !important;
    }

    .tech-lead {
        font-size: 0.95rem !important;
    }
}

@media (max-width: 768px) {
    .scroll-to-top {
        width: 45px;
        height: 45px;
        bottom: 20px;
        right: 20px;
        font-size: 18px;
    }
}

@media (max-width: 991.98px) {
    .hero-collage-wrapper {
        margin-top: 20px !important;
        /* Fix overlap with buttons */
        /* Kill Container Animations */
        animation: none !important;
        -webkit-animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .hero-collage-wrapper .collage-image {
        width: 100% !important;
        height: 450px !important;
        min-height: 450px !important;
        background-size: cover !important;
        background-position: center center !important;
        border-radius: 20px !important;
    }

    .hero-collage-wrapper .collage-slider-track {
        height: 450px !important;
        width: 100% !important;
    }

    /* Slider Logic: Reset Positions & Use Opacity Transition */
    .hero-collage-wrapper .img-main,
    .hero-collage-wrapper .img-secondary,
    .hero-collage-wrapper .img-accent,
    .hero-collage-wrapper .img-4,
    .hero-collage-wrapper .img-5 {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        margin: 0 !important;
        transform: none !important;
        /* Kill up/down fan animation */
        opacity: 0 !important;
        z-index: 1 !important;
        transition: opacity 0.5s ease-in-out !important;
    }

    /* Active Image */
    .hero-collage-wrapper .img-main {
        opacity: 1 !important;
        z-index: 10 !important;
    }
}

@media (max-width: 1200px) {
    .sidebar-nav a {
        padding: 8px 16px;
        font-size: 12px;
    }
}

@media (max-width: 992px) {
    .advanced-layout-wrapper {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .advanced-sidebar-sticky {
        position: static;
        box-shadow: none;
        border-bottom: 1px solid rgba(8, 68, 96, 0.1);
        margin-bottom: 30px;
    }

    .sidebar-nav {
        gap: 8px;
    }

    .sidebar-nav a {
        padding: 8px 14px;
        font-size: 12px;
    }

    .sidebar-nav a i {
        font-size: 12px;
        margin-right: 6px;
    }
}

@media (max-width: 576px) {
    .sidebar-navigation-section {
        padding: 10px 0;
    }

    .sidebar-widget {
        padding: 10px 0;
    }

    .sidebar-nav {
        gap: 6px;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 10px;
    }

    .sidebar-nav a {
        font-size: 11px;
        padding: 6px 12px;
    }

    .sidebar-nav a i {
        display: none;
        /* Hide icons on very small screens to save space */
    }
}

@media (max-width: 1200px) {
    .sidebar-nav a {
        padding: 8px 16px;
        font-size: 12px;
    }
}

@media (max-width: 992px) {
    .advanced-layout-wrapper {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .advanced-sidebar-sticky {
        position: static;
        box-shadow: none;
        border-bottom: 1px solid rgba(8, 68, 96, 0.1);
        margin-bottom: 30px;
        margin-top: 30px
    }

    .sidebar-nav {
        gap: 8px;
    }

    .sidebar-nav a {
        padding: 8px 14px;
        font-size: 12px;
    }

    .sidebar-nav a i {
        font-size: 12px;
        margin-right: 6px;
    }
}

@media (max-width: 576px) {
    .sidebar-navigation-section {
        padding: 10px 0;
    }

    .sidebar-widget {
        padding: 10px 0;
    }

    .sidebar-nav {
        gap: 6px;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 10px;
    }

    .sidebar-nav a {
        font-size: 11px;
        padding: 6px 12px;
    }

    .sidebar-nav a i {
        display: none;
        /* Hide icons on very small screens to save space */
    }
}

@media (max-width: 991.98px) {

    .slider-container,
    .slider-container .carousel,
    .slider-container .carousel-inner,
    .slider-container .carousel-item,
    .slider-container .carousel-item img,
    .carousel-inner.rounded-3.shadow-lg {
        height: 400px !important;
    }
}

@media (max-width: 768px) {

    .slider-container,
    .slider-container .carousel,
    .slider-container .carousel-inner,
    .slider-container .carousel-item,
    .slider-container .carousel-item img,
    .carousel-inner.rounded-3.shadow-lg {
        height: 500px !important;
    }
}

@media (max-width: 576px) {

    .slider-container,
    .slider-container .carousel,
    .slider-container .carousel-inner,
    .slider-container .carousel-item,
    .slider-container .carousel-item img,
    .carousel-inner.rounded-3.shadow-lg {
        height: 250px !important;
    }
}

@media (max-width: 768px) {
    .toughening-process-area {
        padding: 0 15px;
    }

    .process-step {
        padding-left: 70px;
    }

    .step-number {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item.dropdown:hover .dropdown-menu.mega-menu {
        animation: megaSlideDown 0.3s ease forwards;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item.dropdown:hover .dropdown-menu.mega-menu::before {
        animation: expandLine 0.4s ease-out forwards;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item.dropdown:hover .mega-column h6::after {
        width: 40px;
    }
}

@media (max-width: 991.98px) {
    .dropdown-menu.mega-menu {
        position: static;
        padding: 0;
        max-height: 400px;
        /* Scrollable height */
        overflow-y: auto;
        /* Enable scrolling */
        background: var(--primary) !important;
        border-radius: 0 !important;
        /* Remove rounded corners inside drawer */
        box-shadow: none !important;
    }

    /* Force background to be transparent/blue for all mega menu parts on mobile */
    .mega-menu-content,
    .mega-menu-content .container,
    .dropdown-menu.mega-menu .container {
        background: transparent !important;
    }

    .mega-menu-content {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .mega-column {
        padding: 0;
        border-bottom: none;
        /* Removed white separator */
    }

    .mega-column:last-child {
        border-bottom: none;
    }

    /* Responsive overrides - Keep Blue on Scroll */
    .navbar-animate .dropdown-menu.mega-menu {
        background: var(--primary) !important;
    }

    .mega-column h6 {
        padding: 15px 20px;
        margin: 5px 0;
        /* Added margin for separation */
        color: #fff !important;
        position: relative;
        pointer-events: auto;
        background: rgba(0, 0, 0, 0.2);
        /* Distinct header background */
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        text-transform: none;
        border-radius: 12px;
        /* Rounded corners for headers */
    }

    /* Keep Dark Header on Scroll */
    .navbar-animate .mega-column h6 {
        color: #fff !important;
        background: rgba(0, 0, 0, 0.3) !important;
        border-bottom: none;
    }

    /* Reset border for white theme */
    .navbar-animate .mega-column {
        border-bottom: none;
    }

    /* List Container Styling on Mobile */
    .mega-column .collapse,
    .mega-column .collapsing {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 0 0 12px 12px;
        /* Rounded bottom for list */
        margin-top: -5px;
        /* Join with header */
        padding-bottom: 5px;
    }

    /* Keep Dark List Container on Scroll */
    .navbar-animate .mega-column .collapse,
    .navbar-animate .mega-column .collapsing {
        background: rgba(0, 0, 0, 0.1) !important;
    }

    /* Force Light Links on Scroll */
    .navbar-animate .mega-column ul li a {
        color: rgba(255, 255, 255, 0.8) !important;
    }

    .navbar-animate .mega-column ul li a:hover {
        color: #fff !important;
    }

    .mega-column ul {
        padding: 15px 20px;
    }

    /* Rotate chevron when collapsed is open */
    .mega-column h6[aria-expanded="true"] i {
        transform: rotate(180deg);
    }

    /* Transition for chevron */
    .mega-column h6 i {
        transition: transform 0.3s ease;
    }
}

@media (max-width: 991.98px) {
    .design-possibilities .row>[class*="col-"] {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

@media (min-width: 769px) and (max-width: 1179px) {

    .creative-cards .card-details:before,
    .creative-cards .card-details:after {
        transform: translate(-50%, -50%) skew(0deg) !important;
        border-radius: 12px !important;
    }

    .creative-cards .card-icons,
    .creative-cards .card-icons img {
        transform: skew(0deg) !important;
        left: 0 !important;
    }

    .card-details p,
    .creative-cards .card-details h3 {
        transform: none !important;
    }

    /* Adjust sizing and layout for tablet/small desktop */
    .creative-cards.style-one .card-column {
        max-width: 280px !important;
        margin: 0 auto 20px !important;
    }

    .creative-cards.style-one .row {
        gap: 20px !important;
        justify-content: center !important;
    }

    .card-icons {
        margin: 0 auto 15px !important;
        position: relative !important;
        left: auto !important;
    }
}

@media (min-width: 769px) and (max-width: 1280px) {

    .creative-cards .card-details:before,
    .creative-cards .card-details:after {
        transform: translate(-50%, -50%) skew(0deg) !important;
    }

    .creative-cards .card-icons,
    .creative-cards .card-icons img {
        transform: skew(0deg) !important;
        left: 0 !important;
    }

    .card-details p {
        transform: none !important;
    }

    .creative-cards .card-details h3 {
        transform: none !important;
    }

    /* Reduce card width to prevent cutting off */
    .creative-cards.style-one .card-column {
        max-width: 390px !important;
        margin: 0 auto !important;

    }

    .creative-cards.style-one .row {
        gap: 20px !important;

    }

    .card-icons {
        margin: 0px;
    }
}


/* map for tablet */

.map-container {
    width: 100%;
}

.map-container iframe {
    width: 100%;
    height: 500px;
    /* default tablet height */
    border: 0;
}

/* Tablet portrait */
@media (max-width: 834px) {
    .map-container iframe {
        height: 450px;
    }
}

/* Tablet landscape */
@media (min-width: 835px) and (max-width: 1194px) {
    .map-container iframe {
        height: 550px;
    }
}

@media (min-width: 1200px) {
    .why-choose-container {
        max-width: 1330px;
    }
}

@media (min-width: 1220px) and (max-width: 1329px) {
    .why-choose-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .why-choose-container {
        width: 100% !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
        padding: 0 15px 50px !important;
    }
}

@media (min-width: 992px) {
    .sidebar {
        flex: 0 0 260px;
        /* Reduced width as requested */
        max-width: 360px;
        margin-left: auto;
    }
}

@media (max-width: 991.98px) {
    .product-gallery-container {
        flex-direction: column;
        height: auto;
    }

    .thumbnail-sidebar {
        flex-direction: row;
        width: 100%;
        height: auto;
        border-left: none;
        border-top: 1px solid #dee2e6;
        padding: 4px 0 0 0;
        margin: 4px 0 0 0;
        overflow-x: auto;
    }

    .thumb-item {
        width: 80px;
        min-width: 80px;
        height: 80px;
    }

    .main-image-frame {
        height: 350px;
        border-right: none;
    }
}

@media (max-width: 576px) {
    .main-image-frame {
        height: 250px;
    }
}



@media (max-width: 768px) {
    .gallery-layout {
        flex-direction: column;
        height: auto;
    }

    .gallery-main-image {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: #fff;
    }

    .gallery-thumbnails {
        width: 100%;
        height: auto;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        border-left: none;
        border-top: 1px solid #dee2e6;
        padding: 10px 0;
        margin: 10px 0 0 0;
        display: flex;
        gap: 10px;
    }

    .thumb-item {
        width: 70px;
        height: 70px;
        min-width: 70px;
        flex-shrink: 0;
    }

    .modal-main-image-box {
        height: 300px;
    }

    .modal-thumbs-scroll {
        max-height: 300px;
    }
}

@media (max-width: 576px) {
    .modal-main-image-box {
        height: 250px;
    }
}


/* 360px to 410px Screen Adjustments */
@media (min-width: 360px) and (max-width: 415px) {
    .hero-title {
        font-size: 1.5rem !important;
    }

    .hero-buttons .btn {
        padding: 10px 18px !important;
        font-size: 13px !important;
    }
}

/* 320px Screen Scaling (Last override) */
@media (max-width: 320px) {
    .hero-title {
        font-size: 1.4rem !important;
        line-height: 1.2 !important;
    }

    .hero-text-content {
        max-width: none !important;
        padding: 15px !important;
    }

    .hero-buttons {
        margin-top: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .hero-buttons .btn {
        padding: 8px 18px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        margin-right: 0 !important;
        width: fit-content !important;
    }

    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}


@media (min-width: 1200px) {
    .service-slide {
        width: calc((100vw - 150px) / 4) !important;
    }
}

@media (max-width: 991px) {
    .service-slide {
        width: calc((100vw - 60px) / 2) !important;
    }
}

@media (max-width: 576px) {
    .service-slide {
        width: calc(100vw - 40px) !important;
    }
}