/* Responsiveness Styles */

/* #region Global Styles --------------------------------- */
@media (max-width: 991.98px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Global Overflow Protection for all small screens */
    body,
    html {
        overflow-x: hidden;
        max-width: 100%;
        /* Prevent zoom-out */
    }

    /* Keep Carousels Overflowing Visibly (but allow body to clip them at edge) */
    .scroll-carousel-wrapper,
    .news-card-carousel-wrapper,
    .testimonial-carousel-container,
    .testimonial-wrapper,
    .testimonial-carousel-inner {
        overflow: visible !important;
    }

    .spacer-1,
    .spacer-2,
    .spacer-3,
    .spacer-4,
    .spacer-5,
    .spacer-6,
    .spacer-7,
    .spacer-8,
    .spacer-9,
    .spacer-10,
    .spacer-12,
    .spacer-30 {
        margin-top: 20px !important;
    }
}

@media (max-width: 575.98px) {
    .accordion-button {
        font-size: 14px;
    }

    .spacer-1,
    .spacer-2,
    .spacer-3,
    .spacer-4,
    .spacer-5,
    .spacer-6,
    .spacer-7,
    .spacer-8,
    .spacer-9,
    .spacer-10,
    .spacer-12,
    .spacer-30 {
        margin-top: 20px !important;
    }
}

/* #endregion Global Styles --------------------------------- */


/* #region HOME ------------------------------------------ */

/* Hero Section */
@media (max-width: 991.98px) {
    .hero .row {
        text-align: center;
        justify-content: center;
    }

    .row.align-items-center {
        flex-direction: column-reverse;
        /* Stack text below image */
    }

    /* Home Image (Reset overrides from style.css for Tablet) */
    .home-image {
        width: 100% !important;
        /* Reset from 130% */
        margin-top: 0% !important;
        /* Reset from -40% */
        margin-left: 0 !important;
        margin-bottom: 2rem;
    }

    .hero .col-md-6 {
        width: 100%;
    }

    h1.home,
    h2.home,
    h3.home,
    p.home {
        max-width: 100%;
        text-align: center;
    }

    h1.home {
        margin-top: 1rem;
    }

    button.next-button {
        margin: 20px auto 0 auto;
    }
}

@media (max-width: 767.98px) {

    /* Adjust Font Sizes for Tablets/Mobile */
    h1.home {
        font-size: 1.75rem;
    }

    h2.home {
        font-size: 1.5rem;
    }

    h3.home {
        max-width: 100%;
        font-size: 1.125rem;
    }
}

@media (max-width: 575.98px) {
    .home-image {
        width: 100% !important;
        margin-top: 0%;
    }

    /* "Seamless Experience" Tag Center Alignment */
    .laptop-carousel {
        text-align: center;
    }
}

/* Why Choose UMS / Features */
@media (max-width: 991.98px) {
    .features-title {
        text-align: center;
    }
}

/* Deliverables Section */
@media (max-width: 991.98px) {
    .deliverables-image {
        position: relative;
        width: 60%;
        margin: 0 auto 2rem auto;
        display: block;
        top: 0;
        right: 0;
    }
}

@media (max-width: 767.98px) {
    .deliverables.list li {
        text-align: left;
        /* Keep list left aligned even if container is centered */
    }
}

@media (max-width: 575.98px) {
    .deliverables-image {
        width: 80%;
    }
}

/* Solutions & Laptop Carousel */
@media (max-width: 767.98px) {
    .laptop-inner {
        width: 100%;
    }

    .laptop-wrapper {
        max-width: 100%;
        padding: 0 1rem;
    }
}

@media (max-width: 575.98px) {

    .solutions-title,
    .solutions-desc {
        text-align: center;
    }
}

/* Platforms Section */
@media (min-width: 992px) {

    /* Constrain Description on Desktop */
    .platforms-desc {
        width: 45%;
    }
}

@media (max-width: 991.98px) {

    /* Tablet: Stacked cards need spacing */
    .feature-card {
        margin-bottom: 2rem;
    }

    /* Center Platforms Description on Tablet and add spacing */
    .platforms-desc {
        text-align: center;
        margin: 0 auto 3rem auto;
        /* Added 3rem spacing below description */
    }

    /* FAQ Section Centering */
    .features-title,
    .faq-desc {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .faq-desc {
        max-width: 100%;
        /* restored from inline style */
    }
}

@media (max-width: 575.98px) {

    /* Platforms Use Full Width on Mobile */
    .platforms-desc {
        max-width: 100%;
        text-align: center;
    }

    /* Add Vertical Spacing between stacked cards */
    .feature-card {
        margin-bottom: 2rem;
    }
}

/* Team Insights (Testimonials) */
@media (max-width: 991.98px) {

    /* Fluid scaling for Tablets/Mobile */
    .testimonial-card {
        width: 35vw;
        /* Reduced from 45vw */
        min-width: 35vw;
        max-width: 400px;
        height: auto;
        min-height: 350px;
        padding: 1.5rem;
    }

    .testimonial-text {
        font-size: 0.85rem;
        line-height: 1.5;
        margin-bottom: 1rem;
    }

    .testimonial-carousel-inner {
        gap: 1rem;
        transform: translateX(calc(50% - (35vw / 2) - (var(--testimonial-current-index, 0) * (35vw + 1rem))));
    }

    /* Fix Quote Icon Overlap on Tablet */
    .quote-icon {
        font-size: 3rem;
        /* Smaller than desktop (4rem) */
        top: 1rem;
        left: 1rem;
    }

    .testimonial-text {
        margin-top: 3rem;
        /* Push text down to clear icon */
    }
}

@media (max-width: 767.98px) {

    /* Tablets Portrait / Larger Phones */
    .testimonial-card {
        width: 80vw;
        min-width: 80vw;
        max-width: none;
        /* Remove caps, rely on vw */
        min-height: 300px;
        /* Further reduced min-height */
    }

    .testimonial-carousel-inner {
        gap: 1rem;
        transform: translateX(calc(50% - (80vw / 2) - (var(--testimonial-current-index, 0) * (80vw + 1rem))));
    }

    .quote-icon {
        font-size: 2.5rem;
        /* Smaller quote icon */
        top: 0.5rem;
        left: 0.5rem;
    }

    .author-image {
        width: 2.5rem;
        height: 2.5rem;
    }
}

@media (max-width: 575.98px) {

    /* Mobile Phones - Scaled Down Further */
    .testimonial-card {
        width: 75vw;
        min-width: 75vw;
        max-width: none;
        height: auto !important;
        min-height: 250px;
        /* Compact height */
        padding: 1.25rem;
        margin-bottom: 2rem;
    }

    .testimonial-text {
        font-size: 0.8rem;
        /* Compact font */
        margin-bottom: 0.75rem;
    }

    .testimonial-indicators {
        margin-top: 1rem;
        /* Bring indicators closer */
    }

    .testimonial-carousel-inner {
        gap: 1rem;
        padding-bottom: 2rem;
        transform: translateX(calc(50% - (75vw / 2) - (var(--testimonial-current-index, 0) * (75vw + 1rem))));
    }
}

/* News Carousel */
@media (max-width: 991.98px) {

    /* Tablet/Intermediate */
    .news-card {
        width: 45vw;
        min-width: 45vw;
        height: auto;
        min-height: 280px;
    }

    .news-card-carousel-track {
        gap: 20px;
        transform: translateX(calc(50% - (45vw / 2) - (var(--current-index, 0) * (45vw + 20px))));
    }
}

@media (max-width: 767.98px) {

    /* Mobile/Tablet Portrait */
    .news-card {
        width: 85vw;
        min-width: 85vw;
    }

    .news-card-carousel-track {
        gap: 20px;
        transform: translateX(calc(50% - (85vw / 2) - (var(--current-index, 0) * (85vw + 20px))));
    }
}

@media (max-width: 575.98px) {

    /* Small Mobile - Scaled Down */
    .news-card {
        width: 85vw;
        min-width: 85vw;
    }

    .news-card-carousel-track {
        gap: 20px;
        transform: translateX(calc(50% - (85vw / 2) - (var(--current-index, 0) * (85vw + 20px))));
    }
}

/* #endregion HOME ------------------------------------------ */


/* #region Why Us ------------------------------------------ */

@media (max-width: 991.98px) {

    .why-us-feature-box {
        margin-bottom: 1.5rem;
    }

    /* Feature Descriptions full width on mobile */
    .why-us-feature-desc.desc-narrow,
    .why-us-feature-desc.desc-wide {
        max-width: 100%;
        text-align: left;
    }

    /* Keep images overflowing (override img-fluid) and push them further out, make sure they ignore parent overflow */
    .why-us-yellow-circle {
        max-width: none !important;
        left: -35% !important;
        opacity: 0.5;
    }

    .why-us-blue-triangle {
        max-width: none !important;
        right: -35% !important;
        opacity: 0.5;
    }

    .why-us-orange-circle {
        max-width: none !important;
        right: -25% !important;
        opacity: 0.5;
    }
}

@media (max-width: 575.98px) {

    /* Benefits Section Stacking & Centering */
    .benefits-title,
    .benefits-desc,
    .benefits-header {
        text-align: center !important;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }

    /* Keep images overflowing (override img-fluid) and push them further out, make sure they ignore parent overflow */
    .why-us-yellow-circle {
        max-width: none !important;
        left: -85% !important;
        opacity: 0.5;
    }

    .why-us-blue-triangle {
        max-width: none !important;
        right: -65% !important;
        opacity: 0.5;
    }

    .why-us-orange-circle {
        max-width: none !important;
        right: -55% !important;
        opacity: 0.5;
    }
}

/* #endregion Why Us ------------------------------------------ */


/* #region Platforms --------------------------------------- */

/* Desktop Specifics */
@media (min-width: 992px) {
    .platform-page .platform-hero-section .col-lg-6:first-child {
        padding-right: 5rem;
    }

    .platform-page p.platform {
        max-width: 90%;
    }

    .platform-page .platform-benefits-text {
        max-width: 80%;
    }
}

/* Tablet & Mobile Specifics */
@media (max-width: 991.98px) {
    .platform-page .platform-hero-section {
        text-align: center !important;
    }

    .platform-page .platform-hero-section .row {
        flex-direction: column !important;
        display: flex !important;
        gap: 1rem !important;
    }

    .platform-page .platform-hero-section .col-lg-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .platform-page .platform-hero-image {
        width: 80% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        display: none !important;
    }

    .platform-page .platform-hero-image-hidden {
        width: 100% !important;
        max-width: 120% !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
        margin-top: -20% !important;
    }

    .platform-page .platform-hero-title {
        margin-top: 2rem !important;
        /* Spacing below the image on mobile */
    }

    /* Centering and wrapping all text in Platforms sections when stacked */
    .platform-page .platform-hero-section h2,
    .platform-page .platform-hero-section p,
    .platform-page .platform-feature h3,
    .platform-page .platform-feature p,
    .platform-page .platform-benefits-section h2,
    .platform-page .platform-benefits-section p,
    .platform-page .platform-title,
    .platform-page .platform-benefits-text {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        width: 100% !important;
    }

    /* Benefits Section Stacking */
    .platform-page .platform-benefits-section {
        flex-direction: column !important;
        text-align: center !important;
        gap: 1rem !important;
    }

    .platform-page .platform-benefits-section .col-lg-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        align-items: center !important;
        display: flex !important;
        flex-direction: column !important;
        text-align: center !important;
    }

    .platform-page .platform-benefits-text {
        max-width: 100% !important;
    }

    .platform-page .platform-benefits-image {
        margin-top: 0 !important;
        width: 80% !important;
        max-width: 100% !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: none !important;
    }

    /* Tablet: Stacked cards need spacing */
    .platform-page .platform-feature {
        margin-bottom: 2rem !important;
        height: auto !important;
        min-height: 400px !important;
    }

    /* Fix image resolution/blurriness on mobile zoom */
    .platform-page .feature-image img,
    .platform-page .platform-hero-image,
    .platform-page .platform-hero-image-hidden,
    .platform-page .platform-benefits-image,
    .platform-page .platform-benefits-image-hidden {
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: high-quality !important;
        -ms-interpolation-mode: bicubic !important;
        transform: translateZ(0);
        will-change: transform;
    }
}

@media (max-width: 575.98px) {
    .platform-page .platform-hero-image {
        width: 100% !important;
    }

    .platform-page .platform-benefits-image {
        width: 100% !important;
    }

    .platform-page .platform-feature {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* #endregion Platforms --------------------------------------- */

/* #region Footer --------------------------------------- */
@media (max-width: 991.98px) {
    .footer-container {
        justify-content: center;
        gap: 2rem;
    }

    .footer-section {
        flex: 1 1 40%;
        /* Keep 2 columns for links */
        text-align: center;
    }

    /* Make the Logo/Description section full width (Sandwich Top) */
    .footer-section:first-child {
        flex: 1 1 100%;
        width: 100%;
        margin-bottom: 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Compact the description text on tablets */
    .footer-section:first-child p {
        max-width: 400px;
        /* Constrain width so it's not spanning entire screen */
        margin: 0 auto;
    }

    .footer-section ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    button.footer-button {
        margin: 0 auto;
    }

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

    .footer-bottom-left,
    .footer-bottom-right {
        justify-content: center;
    }
}

@media (max-width: 575.98px) {

    /* Grid Layout for Mobile Footer to prevent stacking length */
    .footer-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem 1rem;
        text-align: left;
        justify-items: start;
        padding-bottom: 2rem;

        /* Overflow Protection */
        width: 100%;
        overflow: hidden;
    }

    .footer-section {
        flex: unset;
        width: 100%;
        text-align: left;
        word-wrap: break-word;
        overflow-wrap: break-word;
        min-width: 0;
    }

    /* Logo Section: Spans full width */
    .footer-section:first-child {
        grid-column: 1 / -1;
        text-align: center;
        margin-bottom: 1rem;
        justify-self: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-section h4 {
        text-align: left;
        font-size: 16px;
    }

    .footer-section ul {
        align-items: flex-start;
        text-align: left;
    }
}

/* #endregion Footer --------------------------------------- */


/* #region Contact Us Page Styles */
@media (max-width: 991.98px) {
    .contact-us-secion {
        padding-bottom: 5rem !important;
        /* Forces space before footer */
    }

    .contact-us-hero {
        position: static;
        width: 80%;
        margin: 0 auto 2rem auto;
        display: block;
        opacity: 1;
        transform: none;
    }

    h1.contact-us,
    h2.contact-us,
    h3.contact-us {
        text-align: center;
    }

    .contact-button {
        display: block;
        margin: 2rem auto 4rem auto;
    }
}

@media (max-width: 575.98px) {
    .contact-us-hero {
        position: absolute;
        width: 120%;
        /* Larger for artistic flair */
        max-width: none;
        top: 0%;
        right: -25%;
        opacity: 0.1;
        /* Watermark effect only on phone */
        z-index: -1;
        pointer-events: none;
        margin: 0;
    }
}

/* #endregion Contact Us Page Styles */


/* #region Integrated Solutions --------------------------- */

/* Small Desktop Protection (Zoom Safety) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .integrated-solutions-page .integrated-row-text {
        max-width: 45% !important;
        /* Tighten text so it doesn't hit the image */
        font-size: 1rem !important;
    }
}

@media (max-width: 991.98px) {
    .integrated-cards-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 0 3%;
        /* Reduced from 5% */
        /* Add side breathing room */
    }

    .integrated-solutions-page .integrated-image-row {
        margin-bottom: 0 !important;
    }

    .integrated-solutions-page .integrated-hero-section {
        text-align: center !important;
        padding-top: 3rem !important;
    }

    .integrated-solutions-page .integrated-hero-section .row {
        flex-direction: column-reverse !important;
        display: flex !important;
        gap: 2rem !important;
    }

    .integrated-solutions-page .integrated-hero-section .col-lg-6,
    .integrated-solutions-page .integrated-hero-section .col-lg-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .integrated-solutions-page .integrated-image {
        max-width: 80% !important;
        margin: 0 auto !important;
    }

    .integrated-solutions-page p.integrated,
    .integrated-solutions-page .integrated-hero-section h2 {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Redesign Cards for Tablet & Mobile: Hide icons, rely on script.js set background */
    .integrated-solutions-page .integrated-image-row {
        height: auto !important;
        min-height: 400px !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        border: 1px solid #eee !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 60px 40px !important;
        position: relative !important;
        overflow: hidden !important;
        margin-bottom: 0 !important;
        /* Managed by grid gap */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    }

    /* Hide the solution icons on mobile/tablet */
    .integrated-solutions-page .integrated-row-image {
        display: none !important;
    }

    .integrated-solutions-page .integrated-row-title,
    .integrated-solutions-page .integrated-row-text {
        position: static !important;
        z-index: 1 !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        color: #000 !important;
    }

    .integrated-solutions-page .integrated-row-title {
        font-size: 1.875rem !important;
        margin-bottom: 2rem !important;
        font-weight: 700 !important;
    }

    .integrated-solutions-page .integrated-row-text {
        font-size: 1.125rem !important;
        line-height: 1.7 !important;
    }

    .integrated-solutions-page .integrated-cta-section {
        margin-top: 5rem !important;
        margin-bottom: 5rem !important;
    }

    .integrated-solutions-page .integrated-cta-text {
        max-width: 95% !important;
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
    }

    h2.integrated-contact-us {
        font: bold var(--font-60) 'IBM Plex Sans', sans-serif;
        letter-spacing: 0px;
        color: var(--color-secondary);
        max-width: 70%;
        margin-inline: auto;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .integrated-solutions-page .integrated-hero-section {
        padding-top: 3rem !important;
    }

    .integrated-solutions-page .integrated-row-title {
        font-size: 1.5rem !important;
    }

    .integrated-solutions-page .integrated-image-row {
        padding: 50px 20px !important;
        min-height: 350px !important;
    }
}

/* #endregion Integrated Solutions --------------------------- */

/* #region Pricing ------------------------------------------ */
@media (max-width: 991.98px) {
    .pricing-page .pricing-hero-section {
        text-align: center !important;
        padding-top: 3rem !important;
    }

    .pricing-page .pricing-hero-section .row {
        flex-direction: column-reverse !important;
        display: flex !important;
        gap: 2rem !important;
    }

    .pricing-page .pricing-hero-section .col-lg-6,
    .pricing-page .pricing-hero-section .col-lg-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .pricing-page .pricing-hero {
        max-width: 80% !important;
        margin: 0 auto !important;
    }

    .pricing-page p.pricing {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .pricing-page .pricing-image-column {
        height: auto !important;
        min-height: 250px !important;
        padding: 30px 20px !important;
    }
}

@media (max-width: 575.98px) {
    .pricing-page .pricing-hero-section {
        padding-top: 2rem !important;
        padding-bottom: 0 !important;
    }

    .pricing-page .pricing-cards-section {
        margin-top: 0 !important;
    }

    .pricing-page .pricing-image-column {
        min-height: 220px !important;
        text-align: center !important;
        align-items: center !important;
    }

    .pricing-page .pricing-panel-title,
    .pricing-page .pricing-panel-desc,
    .pricing-page p.pricing,
    .pricing-page h1,
    .pricing-page h2 {
        text-align: center !important;
        padding-left: 5% !important;
        padding-right: 5% !important;
    }
}

/* #endregion Pricing ------------------------------------------ */

/* #region Services ------------------------------------------ */
@media (min-width: 992px) {
    .services-image-column {
        min-height: 400px;
    }

    .services-card-tall {
        min-height: 800px !important;
    }
}

@media (max-width: 991.98px) {
    .services-image-column {
        align-items: center !important;
        text-align: center !important;
    }

    /* Move centering and spacing to Tablet breakpoint */
    .services-page h2.home,
    .services-page p.services,
    .services-page .text-end {
        text-align: center !important;
    }

    .services-hero-section .row {
        flex-direction: column-reverse;
        text-align: center;
    }

    /* Increase gap between title and image on tablet */
    .services-hero {
        margin-bottom: 3rem;
        width: 120%;
        /* Allow overflow */
        margin-left: -10%;
        /* Center the width container relative to screen */
        display: block;
        transform: translateX(25%);
        /* Push RIGHT to center the square (Increased from 20%) */
    }

    .services-yellow-circle {
        width: 70%;
    }

    .service-panel-title,
    .service-panel-desc {
        text-align: center !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .services-card-col {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .services-cards-section .row {
        padding: 0 3% !important;
        /* Reduced from 5% */
        /* Increase breathing room to match Integrated Solutions */
    }
}

@media (max-width: 575.98px) {
    /* Mobile specific adjustments */

    .services-partner-text {
        width: 100% !important;
    }
}

/* Specific fix for iPad Pro / Small Desktop text overflow */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .services-image-column {
        padding: 20px !important;
        /* Reduce padding to give text more room */
    }

    .service-panel-title {
        font-size: 1.75rem !important;
        /* Slightly smaller title */
    }
}

/* #endregion Services ------------------------------------------ */

/* #region Company ------------------------------------------ */
@media (max-width: 991.98px) {
    .company-hero-col {
        margin-top: 2rem;
        text-align: center;
    }

    h1.company,
    h3.company {
        text-align: center !important;
        margin-left: auto;
        margin-right: auto;
    }

    h3.company,
    p.company {
        max-width: 100% !important;
    }

    .company-quotes {
        margin-top: 5%;
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
        margin-inline: auto;
    }

    .company-quote-end {
        align-self: center;
        text-align: center;
        max-width: 100%;
    }

    .company-story-col {
        margin-bottom: 3rem;
    }

    /* Images */
    .company-blue-triangle {
        width: 300px;
        left: -10%;
        top: 10%;
        opacity: 0.3;
        z-index: -1;
    }

    .company-orange-circle {
        width: 250px;
        right: -10%;
        opacity: 0.3;
        z-index: -1;
    }
}

@media (max-width: 575.98px) {
    p.company {
        margin-bottom: 2rem !important;
    }

    .company-blue-triangle {
        width: 200px;
        left: -20%;
    }

    .company-orange-circle {
        width: 150px;
        right: -20%;
    }

    .company-quotes {
        max-width: 85%;
        margin-left: auto;
        margin-right: auto;
        margin-inline: auto;
    }
}

/* #endregion Company ------------------------------------------ */

/* #region Request Demo Popup ------------------------------------------ */
@media (max-width: 991.98px) {
    p.demo-popup {
        max-width: 100%;
        margin-bottom: 2rem;
    }

    .demo-popup-body {
        margin: 1rem;
        /* Reduce margin on smaller screens */
        padding: 0;
    }

    /* Ensure toast doesn't get cut off on mobile */
    .demo-popup-toast-container {
        width: 100%;
        left: 0;
        bottom: 0;
        top: auto !important;
        /* Move to bottom on mobile if preferred, or keep top */
    }

    .demo-popup-close {
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 1056;
        /* Above body content */
        background-color: white;
        /* Ensure visibility mostly */
        opacity: 1;
        padding: 0.5rem;
        background-size: 1em;
    }
}

/* #endregion Request Demo Popup ------------------------------------------ */

/* #region Solutions ------------------------------------------ */

/* PC / Standard Desktop (Laptop 15", 1920x1080) */
@media (max-width: 1700px) {
    .solutions-modules-carousel-container {
        min-height: 520px !important;
        height: auto !important;
    }

    .solutions-modules-card {
        width: 460px !important;
    }

    .solutions-modules-card-title {
        font-size: 1.7rem !important;
        min-height: 75px !important;
    }

    .solutions-modules-card-desc {
        font-size: 1.3rem !important;
    }

    .solutions-modules-card.active {
        transform: scale(1.06) !important;
    }

    .solutions-modules-carousel-track::before {
        width: calc(50% - 230px - 1.5%) !important;
    }
}

/* Large Tablets & Small Desktops (iPad Pro, Small Laptops) */
@media (max-width: 1399.98px) {

    .solutions-hero-image,
    .course-repeat-image,
    .select-course-image,
    .certificate-request-image,
    .courses-image,
    .coverage-image,
    .results-image,
    .results-summary-image,
    .enrollment-image,
    .scholarships-image,
    .exams-image,
    .attendance-summary-image,
    .add-and-drop-image,
    .solutions-blue-triangle-image,
    .tuition-blue-triangle-image,
    .enrollment-blue-triangle-image,
    .build-your-own-blue-triangle-image {
        width: 45% !important;
        /* Increased for better visibility on iPad Pro */
        height: auto !important;
    }

    /* Wrap long text lines to prevent overflow on small desktops */
    .text-nowrap {
        white-space: normal !important;
    }

    /* Force columns to stack for key functionalities on small desktops to ensure centering */
    .row:has(.key-functionalities-image)>div,
    .row:has(.course-management-key-image)>div,
    .row:has(.result-management-key-image)>div,
    .row:has(.tuition-management-key-image)>div,
    .row:has(.attendance-management-key-image)>div,
    .row:has(.admission-management-key-image)>div,
    .row:has(.build-your-own-key-image)>div,
    .row:has(.slots-image)>div,
    .row:has(.schedules-image)>div {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    /* Schedules Management Images - Increased Size for Small Desktop */
    .schedules-image,
    .slots-image {
        width: 75% !important;
        position: relative !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 20px auto !important;
        display: block !important;
    }

    /* Prevent decorative triangle overflow */
    .solutions-blue-triangle-image,
    .tuition-blue-triangle-image,
    .enrollment-blue-triangle-image,
    .build-your-own-blue-triangle-image {
        right: -10% !important;
        width: 30% !important;
    }

    /* Adjust specific positions if they overlap too much */
    .solutions-hero-image {
        right: -5% !important;
        width: 45% !important;
    }

    .courses-image {
        right: -5% !important;
        width: 45% !important;
    }

    .coverage-image {
        left: -10% !important;
        width: 45% !important;
    }

    .key-functionalities-image,
    .course-management-key-image,
    .result-management-key-image,
    .tuition-management-key-image,
    .attendance-management-key-image,
    .admission-management-key-image,
    .build-your-own-key-image {
        width: 75% !important;
        position: relative !important;
        right: auto !important;
        left: -10% !important;
        top: auto !important;
        margin: 40px auto !important;
        display: block !important;
        transform: none !important;
    }

    .add-and-drop-image {
        right: -5% !important;
        width: 45% !important;
    }

    .results-image {
        right: -5% !important;
        width: 45% !important;
    }

    .enrollment-image {
        right: -5% !important;
        width: 45% !important;
    }

    .scholarships-image {
        right: -5% !important;
        width: 45% !important;
    }

    /* Icons Row Tracking & Wrapping - Push to Bottom */
    #course-management .col-lg-12.mt-10-pct.position-relative,
    #results\ management .col-lg-12.mt-10-pct.position-relative,
    #attendance\ management .col-lg-12.mt-10-pct.position-relative,
    #admission\ and\ enrollment\ management .col-lg-12.mt-10-pct.position-relative,
    #tuition\ management .col-lg-12.mt-10-pct.position-relative {
        display: flex !important;
        flex-direction: column !important;
    }

    .icons-row {
        order: 2 !important;
        /* Move below the text items */
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 3rem !important;
        margin: 1rem 0 0rem 0 !important;
    }

    /* Coverage Image Scaling & Centering */
    .coverage-image {
        left: 50% !important;
        top: -10% !important;
        transform: translateX(-50%) !important;
        width: 75% !important;
        /* Increased for better visibility */
        object-fit: contain !important;
    }

    /* Full Solution Banner Scaling for Small Desktop */
    .full-solution-banner {
        width: 100% !important;
        height: 400px !important;
        border-radius: 40px !important;
    }

    .full-solution-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    h3.full-solution {
        font-size: var(--font-42) !important;
        top: 15% !important;
    }

    h4.solutions {
        text-align: start !important;
    }

    .full-solution-columns {
        width: 90% !important;
        top: 45% !important;
    }

    .full-solution-column {
        width: 28% !important;
        padding: 1% !important;
        min-height: 120px !important;
    }

    /* Text width constraints to prevent overlap */
    p.solutions.max-w-50,
    p.solutions.max-w-45,
    h4.solutions.max-w-50 {
        max-width: 60% !important;
    }

    /* Carousel Responsiveness - Small Desktop */
    .solutions-modules-carousel-container {
        min-height: 500px !important;
        height: auto !important;
    }

    .solutions-modules-card {
        width: 450px !important;
    }

    .solutions-modules-card-title {
        font-size: 1.5rem !important;
        min-height: 65px !important;
    }

    .solutions-modules-card-desc {
        font-size: 1.1rem !important;
    }

    .solutions-modules-card.active {
        transform: scale(1.05) !important;
    }

    .solutions-modules-carousel-track::before {
        width: calc(50% - 225px - 1.5%) !important;
    }
}

@media (max-width: 991.98px) {

    /* Force Grid Columns to full-width on mobile */
    .col-lg-12,
    .col-lg-6,
    .col-lg-4,
    .col-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Reset Width Constraints with high specificity to override small desktop query */
    .max-w-33,
    .max-w-40,
    .max-w-45,
    .max-w-50,
    .max-w-55,
    .max-w-60,
    .max-w-70,
    .max-w-80,
    .max-w-85,
    .max-w-90,
    .max-w-100,
    p.solutions.max-w-50,
    p.solutions.max-w-45,
    h4.solutions.max-w-50,
    h3.solutions.max-w-80,
    h3.solutions.max-w-70,
    h3.solutions.max-w-60,
    p.solutions-benefits,
    h3.solutions-benefits,
    .solutions-benefits {
        max-width: 100% !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Reset Percentage Margins */
    .mt-1-pct,
    .mt-2-pct,
    .mt-3-pct,
    .mt-5-pct,
    .mt-10-pct,
    .mt-15-pct,
    .mt-20-pct,
    .mt-25-pct,
    .mt-30-pct,
    .mt-40-pct,
    .mb-1-pct,
    .mb-2-pct,
    .mb-3-pct,
    .mb-5-pct,
    .my-5-pct,
    .my-10-pct {
        margin-top: 2rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Text Alignment & Core Centering */
    .text-start,
    p.solutions,
    h1.solutions,
    h2.solutions,
    h2.solutions-bold,
    h3.solutions,
    h4.solutions,
    h3.solutions-benefits,
    p.solutions-benefits,
    h5.solutions,
    h6.solutions,
    .solutions-modules-card-title,
    .solutions-modules-card-desc,
    .solutions-modules-card-footer-title,
    .solutions-modules-card-footer-desc {
        text-align: center !important;
        display: block !important;
        width: 100% !important;
    }

    .solutions-benefits,
    p.solutions {
        max-width: 100% !important;
    }

    /* Carousel Responsiveness - Tablet */
    .solutions-modules-carousel-container {
        min-height: 380px !important;
        height: auto !important;
    }

    .solutions-modules-card {
        width: 360px !important;
        min-height: 380px !important;
    }

    .solutions-modules-card-title {
        font-size: 1.3rem !important;
        padding-inline-start: 10px !important;
        min-height: 55px !important;
    }

    .solutions-modules-card-desc {
        font-size: 1rem !important;
        padding: 10px !important;
    }

    .solutions-modules-card.active {
        transform: scale(1.03) !important;
    }

    .solutions-modules-carousel-track::before {
        width: calc(50% - 180px - 1.5%) !important;
    }

    .solutions-modules-card-footer {
        padding: 10px 0 !important;
    }

    /* Images - Reset Absolute Positioning */
    .solutions-hero-image,
    .courses-image,
    .coverage-image,
    .schedules-image,
    .slots-image,
    .key-functionalities-image,
    .add-and-drop-image,
    .course-management-key-image,
    .results-image,
    .results-summary-image,
    .result-management-key-image,
    .enrollment-image,
    .enrollment-blue-triangle-image,
    .scholarships-image,
    .tuition-management-key-image,
    .attendance-management-key-image,
    .admission-management-key-image,
    .build-your-own-key-image,
    .course-repeat-image,
    .select-course-image,
    .certificate-request-image,
    .exams-image,
    .solutions-blue-triangle-image,
    .tuition-blue-triangle-image,
    .build-your-own-blue-triangle-image,
    .attendance-summary-image {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        margin: 20px 0 !important;
        object-fit: contain !important;
    }

    .coverage-image,
    .course-management-key-image,
    .result-management-key-image,
    .attendance-management-key-image,
    .tuition-management-key-image,
    .admission-management-key-image,
    .build-your-own-key-image {
        margin-top: -25% !important;
        left: -8% !important;
    }

    .key-functionalities-image {
        left: -8% !important;
    }

    /* Hide decorative elements */
    .solutions-blue-triangle-image,
    .tuition-blue-triangle-image,
    .enrollment-blue-triangle-image,
    .build-your-own-blue-triangle-image {
        display: none !important;
    }

    /* Text Split & Visibility */
    span.title-secondary-bold {
        display: inline !important;
    }

    .build-your-own-box,
    .build-your-own-number,
    .build-your-own-title,
    .build-your-own-desc {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .build-your-own-desc {
        max-width: 100% !important;
    }

    /* Wrap long text lines to prevent overflow on mobile/tablet */
    .text-nowrap {
        white-space: normal !important;
    }

    /* Buttons Alignment */
    .solutions-filter-button,
    button.focus-area {
        display: inline-flex !important;
        margin: 2px !important;
        justify-content: center !important;
        padding: 0% 2.5% !important;
    }

    .solutions-schedules-filter-button {
        display: inline-flex !important;
        margin: 4px 4px !important;
        justify-content: center !important;
        padding: 0% 2.5% !important;
    }

    button.solutions {
        display: inline-flex !important;
        margin: 3px 1px !important;
        justify-content: center !important;
        padding: 0% 2.5% !important;
    }

    /* Center Pill Buttons Container */
    section[id="solutions buttons"] .col-lg-12,
    #solutions\ buttons .col-lg-12,
    #focus\ area\ buttons .col-lg-12.spacer-1 {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        text-align: center !important;
    }

    /* Icons Row - Force 3 in a row strictly */
    .icons-row {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }

    /* Center Benefits Icons */
    img.h-80px {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 1rem !important;
    }

    /* Remove excessive height gap in Schedules Management for phone view */
    #course\ schedule,
    #exam\ schedule,
    #proctoring\ schedule {
        height: auto !important;
        min-height: auto !important;
        margin-bottom: 2rem !important;
    }


    .icons-row .icon {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .icons-row .icon img {
        height: 45px !important;
        width: auto !important;
        object-fit: contain !important;
        margin: 0 !important;
    }

    .icons-row .icon p {
        margin-top: 0.5rem !important;
        font-size: 0.75rem !important;
        min-height: 2.5rem !important;
        font-weight: bold !important;
        text-align: center !important;
    }

    /* Full Solution Section - EXACT Desktop Mirror (Absolute Positions) */
    .full-solution {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        margin: 2rem 0 !important;
        text-align: center !important;
    }

    .full-solution-banner {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 200px !important;
        /* Scaled frame height */
        border-radius: 20px !important;
        background-color: #0B3A9683 !important;
        overflow: hidden !important;
        z-index: 1 !important;
    }

    .full-solution-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        opacity: 0.8 !important;
    }

    /* Title - Absolute like Desktop (Breathing Room) */
    h3.full-solution {
        position: absolute !important;
        top: 10% !important;
        /* Move down a bit */
        left: 0 !important;
        right: 0 !important;
        z-index: 10 !important;
        color: white !important;
        font-size: 1.1rem !important;
        /* Better readability */
        background: transparent !important;
        box-shadow: none !important;
        text-align: center !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Columns - Absolute like Desktop (Artistic Overflow) */
    .full-solution-columns {
        position: absolute !important;
        top: 45% !important;
        /* Start lower to force bottom row overflow */
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 95% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 8px !important;
        /* Space between cards */
        z-index: 20 !important;
        margin-top: 0 !important;
        padding: 0 !important;
    }

    .full-solution-column {
        width: 30.5% !important;
        margin: 1% 0 !important;
        background: #FFFEE8 !important;
        padding: 8px !important;
        /* Breathing room for text */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 6px !important;
        min-height: 70px !important;
        /* Increase card height */
        height: auto !important;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15) !important;
    }

    .full-solution-column p.full-solution {
        font-size: 0.62rem !important;
        /* Readable micro-font */
        line-height: 1.2 !important;
        color: black !important;
        text-align: center !important;
        margin: 0 !important;
        font-weight: 500 !important;
    }

    /* Next content push down - account for larger banner and overflow cards */
    h5.solutions.mx-auto.mt-10-pct {
        margin-top: 15rem !important;
    }

    /* Carousel Responsiveness - Mobile */
    .solutions-modules-carousel-container {
        min-height: 280px !important;
        height: auto !important;
        padding: 40px 0 !important;
    }

    .solutions-modules-card {
        width: 260px !important;
        min-height: 280px !important;
    }

    .solutions-modules-card-title {
        font-size: 1.1rem !important;
        padding-inline-start: 8px !important;
        min-height: 45px !important;
    }

    .solutions-modules-card-desc {
        font-size: 0.85rem !important;
        padding: 8px !important;
    }

    .solutions-modules-card-footer-title,
    .solutions-modules-card-footer-desc {
        font-size: 0.75rem !important;
    }

    .solutions-modules-card.active {
        transform: scale(1.02) !important;
    }

    .solutions-modules-carousel-track::before {
        width: calc(50% - 130px - 1.5%) !important;
    }

    .solutions-modules-card-footer {
        padding: 10px 5% 20px 5% !important;
        margin-top: auto !important;
    }

    .solutions-modules-indicators {
        margin-top: 0rem !important;
    }
}

/* Mobile Tweaks */
@media (max-width: 575.98px) {
    h1.solutions {
        font-size: 1.6rem !important;
    }

    .full-solution-banner {
        height: 180px !important;
    }

    /* Taller banner for mobile */
    h3.full-solution {
        font-size: 0.95rem !important;
        top: 8% !important;
    }

    .full-solution-columns {
        top: 40% !important;
        width: 98% !important;
        gap: 4px !important;
    }

    .full-solution-column {
        padding: 6px !important;
        min-height: 60px !important;
        width: 31% !important;
    }

    .full-solution-column p.full-solution {
        font-size: 0.52rem !important;
    }

    .icons-row .icon img {
        height: 40px !important;
    }

    h5.solutions.mx-auto.mt-6-pct {
        margin-top: 60px !important;
    }
}

/* #endregion Solutions ------------------------------------------ */