/* Styling the h1s */
#carouselExampleSlidesOnly .carousel-caption h1, 
#carouselHomepageHeader .carousel-caption .md-title,
#carouselPageHeader .carousel-caption .md-title{
    font-family: ClashDisplay-Bold;
    font-size: clamp(2.25rem, 0.643rem + 4.286vw, 4.5rem);
    line-height: 1.05;
    margin-bottom: 12px;
}


/* Homepage sub-heading */
#carouselHomepageHeader .carousel-caption .md-paragraph-lg,
#carouselPageHeader .carousel-caption h2{
    font-size: clamp(1.5rem, 1.143rem + 0.952vw, 2rem); 
    line-height: 1.3;
}


/* ========================================================================= */
/* --- 2. MOBILE LAYOUT OVERRIDES (MAX-WIDTH 767PX) --- */
/* ========================================================================= */

@media (max-width: 767px) {
    /* Fix excessive horizontal padding on HOMEPAGE hero */
    #carouselHomepageHeader .carousel-inner .carousel-item .carousel-caption {
        padding-left: 24px;
        padding-right: 24px;
        width: 100%;
        left: 0;
        right: 0;
    }
}

/* ========================================================================= */
/* --- CASE STUDY CARD & BADGE STYLING --- */
/* ========================================================================= */

/* --- DESKTOP/GENERAL BADGE LAYOUT AND TYPOGRAPHY --- */

.md-case-panel-overlay {
    /* Set specific desktop padding */
    padding: 42px 54px; 
}

.md-badge {
    /* Layout Overrides */
    height: 32px; 
    padding: 8px 12px; 
    display: inline-flex; 
    align-items: center; 
    
    /* Visual Overrides */
    border-radius: 20px; 
    border: 2px solid; 
    
    /* Typography Overrides */
    color: #FFF; 
    font-family: Roboto, sans-serif;
    font-size: 14px; 
    line-height: 16px; 
    font-weight: 500; 
    
    /* Background Overrides */
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(2px);
}

.md-badge-outline-light {
    /* Border Color Override */
    border-color: #FF0; 
}


/* --- MOBILE OVERRIDES (MAX-WIDTH 767PX) --- */

@media (max-width: 767px) {
    
    /* 1. Neutralize fixed spacing on the outer container */
    .md-case-panel-overlay {
        /* Set padding to 0 so it doesn't interfere with inner content margins/padding */
        padding: 0 !important;
    }

    /* 2. Apply spacing to the content wrapper */
    .md-overlay-content {
        left: 20px; 
        right: 20px; 
        padding-bottom: 20px; 
    }
    
    .md-badge {
        font-size: 14px; 
    }
}

/* --- INCREASE MAX-WIDTH CONSTRAINT (Desktop) --- */
.md-navbar .container-fluid {
    /* Set a wide max-width, well above the standard 1320px */
    max-width: 1440px !important; 
    
    /* Ensure there is always a minimum horizontal padding (e.g., 24px) */
    /* This overrides the default 1.5rem padding in container-fluid to ensure consistency */
    padding-left: 24px !important;
    padding-right: 24px !important;
    
    margin-left: auto;
    margin-right: auto;
}


/* --- PREVENT MENU ITEM WRAPPING --- */
.navbar-nav {
    /* Prevents the nav links from wrapping to the next line */
    flex-wrap: nowrap !important;
    
    /* Ensures the list items shrink slightly before forcing the collapse, if needed */
    flex-shrink: 0;
}

/* ========================================================================= */
/* --- VERTICAL STEPS CONTAINER (FIXED ALIGNMENT & MOBILE SCALING) --- */
/* ========================================================================= */

/* 1. ICON & LINE ALIGNMENT (DESKTOP & MOBILE) */
.md-vertical-line {
    display: flex;
    flex-direction: column;
    align-items: center; 
    position: relative;
    padding: 0;
}

/* The Checkbox Icon styling */
.md-vertical-line i {
    font-size: clamp(32px, 8vw, 60px) !important; /* Responsive scaling [cite: 474] */
    line-height: 1 !important;
    background: #FFF; /* Masks the line behind the icon shape */
    z-index: 2;
    margin-bottom: 0;
}

/* The Vertical Line - Centered using percentages instead of hardcoded pixels */
.md-vertical-line::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Precisely centers the line  */
    top: 20px; 
    bottom: 0;
    width: 3px;
    background-color: #000000; 
    z-index: 1;
}

/* Remove the connector line after the very last step  */
.md-step:last-of-type .md-vertical-line::before {
    content: none !important;
}

/* 2. MOBILE OVERRIDES (MAX-WIDTH 991.98PX) */
@media (max-width: 991.98px) {
    
    /* Ensure the row is the anchor for absolute elements  */
    section.md-steps-vertical .row.md-step {
        --bs-gutter-x: 0.5rem; 
        position: relative;
        display: flex; /* Keeps Icon and Text aligned  */
        flex-wrap: nowrap;
    }

    /* Column 1: Icon width adjustment */
    section.md-steps-vertical .md-vertical-line {
        flex: 0 0 auto;
        width: 16.666667%; /* Standard col-2 equivalent  */
    }

    /* Column 2: Text forced to 80% width [cite: 337] */
    section.md-steps-vertical .md-step > .col-8 {
        width: 80%;
        flex: 0 0 auto;
    }

    /* Step Paragraph Typography  */
    section.md-steps-vertical .md-step p {
        font-size: 19px; 
        line-height: 1.3; /* 130% line-height  */
        margin-bottom: 35px; /* [cite: 476] */
    }

    /* 3. POSITIONING THE DECORATIVE NUMBER ELEMENT */
    /* Target the third column container to be "out of the grid" */
    section.md-steps-vertical .md-step > div:last-child {
        position: absolute;
        top: -1.5rem; /* Adjust vertical sit */
        right: 0;
        width: auto;
        padding: 0;
        z-index: 0;
        margin-right: -2rem;
        pointer-events: none; /* Allows interaction with text underneath */
    }
  section.md-steps-vertical .row.md-step:first-of-type {
        margin-top: 2.5rem; /* Accounts for the -1.5rem pull + extra spacing */
    }
    /* Large background step numbers styling */
    .md-nr {
        font-size: clamp(80px, 10vw, 120px); 
        line-height: 1; 
        font-family: ClashDisplay-Bold;
        -webkit-text-stroke: 2px #1E609120;
        color: transparent; 
        position: static; 
        opacity: 0.6;
        /* left: unset;  Reset v2 hardcoded left */
    }
}

@media (max-width: 991.98px) {
    /* 1. Reset the container to center on mobile screens */
    .sticker-container {
        left: 0; 
        margin: 0 auto;
        width: 100px; 
        height: 100px;
        overflow: visible; 
    }

    /* 2. Adjust the smiley size and trigger mobile-specific animation */
    .rolling-image {
        width: 100px; 
        height: 100px;
        top: 0;
        animation: rollInMobile 3s ease-out forwards;
    }
}

/* 3. Mobile specific keyframes with Bounce and Scale */
@keyframes rollInMobile {
    0% {
        left: -150px; 
        transform: rotate(0deg);
    }
    100% {
        left: 0; 
        transform: rotate(360deg);
    }
}

@media (max-width: 991.98px) {
    /* 1. Spacing adjustments for content sections */
    .md-text-and-image {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    

section .row.py-5 [data-per="4"] {
        margin-bottom: 24px;
    }
}


/* ========================================================================= */
/* --- TESTIMONIAL SECTION - CASE PAGES (BACKGROUND WRAPPER APPROACH) --- */
/* ========================================================================= */

.md-testimonial-section.md-testimonial-case {
    background-color: transparent;
    margin-bottom: -30px; /* Allow image to extend below section */
    overflow: visible;
}

/* Ensure the row allows overflow */
.md-testimonial-section.md-testimonial-case .row {
    overflow: visible;
}

/* Image column needs overflow visible */
.md-testimonial-section.md-testimonial-case .row > div:first-child {
    overflow: visible;
}

.md-testimonial-section.md-testimonial-case img.md-testimonial-img {
    max-width: 600px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 20px;
    position: relative;
    z-index: 2;
    transform: translateY(-30px);
}

/* Background wrapper - extends 120px top and bottom, FULL WIDTH */
.md-testimonial-bg {
    position: absolute;
    background-color: #272E36;
    top: -120px;
    bottom: -120px;
    left: -100vw;
    right: -100vw;
    z-index: 0;
}

/* Content needs to be above the background and allow overflow for quote marks */
.md-testimonial-section.md-testimonial-case .md-bg-quote {
    position: relative;
    z-index: 3;
    overflow: visible;
}

/* Make quote marks appear on top and slightly smaller */
.md-testimonial-section.md-testimonial-case .md-bg-quote::before {
    z-index: 10 !important;
    transform: scale(0.7);
    transform-origin: top left;
}

/* Add padding to next section to account for image extending below */
.md-testimonial-section.md-testimonial-case + .md-steps-vertical {
    padding-top: 90px; /* 30px overlap + 60px spacing */
}

@media (max-width: 767px) {
    /* On mobile, apply background to entire section instead */
    .md-testimonial-section.md-testimonial-case {
        background-color: #272E36 !important;
        padding-top: 0px !important;
        padding-bottom: 40px !important;
        margin-bottom: 0px;
        margin-top: 10px;
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 15px;
        padding-right: 15px;
        width: 100vw;
    }

    .md-testimonial-bg {
    left: 0;
    right: 0;

}

    .md-testimonial-section.md-testimonial-case img.md-testimonial-img {
    transform: translateY(-40px); /* Use transform instead of margin for better control */
    aspect-ratio: 3 / 2;
    width: 100%;
}
    
    /* Hide the background wrapper on mobile */
    .md-testimonial-bg {
        display: none;
    }
    
}

/* Reduce container padding for the testimonial section 
body.case-study .md-testimonial {
        padding-top: 40px;
        padding-bottom: 40px;
    }

.md-testimonial-section {
    margin-bottom: 60px;
}

@media (max-width: 991.98px) {
    .md-testimonial-section {
        margin-bottom: 40px;
    }
} */