/* Font matches the bold geometric look in the image */
body {
    font-family: 'Montserrat', sans-serif;
    background-color: #eeeeee; /* Updated to Light Grey - Guideline 14 */
    margin: 0;
}

html, body {
    overflow-x: hidden; /* Prevents the left-to-right sliding bar */
    width: 100%;
    position: relative;
}

.container {
    overflow: hidden; /* Contains any bleeding absolute elements */
}

/* Guideline 1: Logo Size */
.mmrs-logo-img {
    width: 200px;
    height: 50px;
    object-fit: contain; /* Prevents stretching */
}

/* Guideline 2: Button size (Request a demo) */
.btn-mmrs-red {
    width: 175px;
    height: 32px;
    border-radius: 20px; /* Radius-20 */
    background-color: #F60701; /* Red per Guideline 14 */
    color: #ffffff; /* White - Guideline 14 */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 12px; /* Adjusted to fit 32px height */
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    text-decoration: none;
}

/* Guideline 8: Body fonts (for nav link) */
.nav-text-style {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500; /* Medium */
    font-size: 16px;
}

.hero-wrapper {
    position: relative;
    min-height: 100vh;
    background-color: #eeeeee; /* Updated to Light Grey - Guideline 14 */
    overflow: hidden;
}

/* Silhouettes in the background */
.bg-people-overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background-image: url('BG.png'); /* Your background file */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    opacity: 0.2;
    z-index: 0;
}


.hero-title {
    font-size: 5.0rem;
    font-weight: 800;
    color: #000000; /* Updated to Black - Guideline 14 */
    line-height: 1;
    letter-spacing: -3px;
    position: relative;
    z-index: 2;
}

.text-danger {
    color: #F60701 !important; /* Updated to Red - Guideline 14 */
}

/* Billboard Image + UI Overlays */
.billboard-wrapper {
    position: relative;
    background: #ffffff; /* Updated to White - Guideline 14 */
    padding: 0; /* No white border inside, border is external in prototype */
    border-radius: 4px;
}

.billboard-img {
    display: block;
    width: 100%;
}




/* The White Overlapping Card */
.info-card {
    position: relative;
    z-index: 60;
    margin-left: 120px; /* Crucial overlap */
    margin-bottom: 35px; /* Sits partially in the black zone */
    border-radius: 0;
    max-height: 220px;
    background-color: #ffffff; /* Explicitly set to White - Guideline 14 */
}

.info-card p {
    font-size: 1.1rem;
    color: #2B2626; /* Updated to Dark Grey - Guideline 14 */
    line-height: 1.5;
}

/* Red Demo Button Positioning */
.cta-container {
    position: relative;
    z-index: 70;
    text-align: center;
   margin-top: -25px; /* Pull up into the black zone */
    margin-right: -105px;
    margin-bottom: 60px;
    
}

.btn-danger {
    background-color: #F60701; /* Updated to Red - Guideline 14 */
    border: none;
    font-weight: 500;
    
   
}



/* Split Background: Top Gray / Bottom Black */
.black-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%; /* Matches the black bar height in screenshot */
    background-color: #000000; /* Updated to Black - Guideline 14 */
    z-index: 1;
}

/* Mobile Responsiveness */
@media (max-width: 991px) {
    .hero-title { font-size: 3.5rem; }
    .info-card {
        margin-left: 0;
        margin-top: 20px;
    }
    .cta-container { text-align: center; margin-top: 20px; }
}






/* Additional styles for the rest of the page can be added here, following the same design principles and color guidelines. */
/* Color Guideline 14 */
.text-red { color: #F60701; }

/* Guideline 5: Title 40 Bold */
.journey-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 40px;
}

/* Guideline 17: Image Holder Sizing */
.img-holder {
    width: 306px;
    height: 212px;
    position: relative;
    overflow: visible;
}
.img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Guideline 18 & 19: Icon Circle */
.icon-circle {
    position: absolute;
    bottom: -25px;
    left: 20px;
    width: 50px;
    height: 50px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Guideline 20: Text Background */
.text-holder {
    width: 306px;
    height: 210px;
    background-color: #eeeeee; /* Light Grey - Guideline 14 */
}

/* Guideline 6: Heading 20 Bold */
.body-point-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 10px;
}

/* Guideline 8: Body fonts 16 Medium */
.body-font {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #2B2626; /* Dark Grey */
}

/* Guideline 15 & 16: Red Ring */
.red-ring {
    width: 168px;
    height: 168px;
    border: 8px solid #F60701;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    text-align: center;
}

/* Guideline 7: Fonts in Circle 16 Bold */
.fonts-in-circle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
}

.ring-icon {
    width: 30px;
    margin-bottom: 10px;
}

/* Guideline 13: Arrow size */
.journey-arrow {
    width: 26px;
    height: 25px;
}


/* Custom shadow for the icon circle to match prototype */
.icon-circle.shadow-sm {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

/* The small down-facing triangle at the bottom of the grey cards */
.down-triangle {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid #999999; /* Grey to match the arrow style */
    display: inline-block;
    margin-top: 42px;
}

/* CSS generated right-facing arrow for the red rings section */
.right-arrow-icon {
    width: 26px; /* Guideline 13 */
    height: 25px; /* Guideline 13 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Ensure cards don't touch even on smaller screens */
.journey-card {
    margin-bottom: 30px;
    height: 100%;
}

.text-holder {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}














/* Container & Card Alignment */


/* Image Holder Guideline 17 */
.img-holder {
    width: 306px;
    height: 212px;
    position: relative;
    overflow: visible;
}

/* Text Holder Guideline 20 */
.text-holder {
    width: 306px;
    height: 210px;
    background-color: #eeeeee; /* Light Grey Guideline 14 */
    border-top: none;
}

/* Vertical Triangle Separator */
.down-triangle {
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 15px solid #2B2626; /* Dark Grey Guideline 14 */
    margin: 15px 0;
}

/* Icon Circle & Shadow Guideline 18 */
.icon-circle.shadow-sm {
    position: absolute;
    bottom: -25px;
    left: 20px;
    width: 50px;
    height: 50px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Red Ring Alignment Guideline 15 */
.red-ring {
    width: 168px;
    height: 168px;
    border: 8px solid #F60701;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15px;
    background-color: #ffffff;
}

/* Connector Arrows (Right Facing) */
.right-arrow-icon {
    width: 26px; /* Guideline 13 */
    height: 25px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2626' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Responsive Gutter Adjustment */
@media (min-width: 1200px) {
    .container {
        max-width: 1320px;
    }
}

/* Guideline 14: Colors */
.text-red { color: #F60701; }

/* Guideline 5: Title 40 Bold */
.journey-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 40px;
}

/* Updated Journey Card: Removes gap between image and text */

/* Guideline 17: Image Holder Sizing */
.img-holder {
    width: 306px;
    height: 212px;
    position: relative;
    overflow: visible;
    margin-bottom: 0; /* Removed white space */
}

.img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Guideline 18 & 19: Icon Circle & Shadow */
.icon-circle.shadow-sm {
    position: absolute;
    bottom: -25px;
    left: 20px;
    width: 50px;
    height: 50px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Guideline 20: Text Background */
.text-holder {
    width: 306px;
    height: 210px;
    background-color: #eeeeee; /* Light Grey Guideline 14 */
    padding: 40px 24px 24px 24px; /* Added top padding for icon clearance */
    text-align: left;
}

/* Guideline 6: Heading 20 Bold */
.body-point-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 10px;
}

/* Guideline 8: Body fonts 16 Medium */
.body-font {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #2B2626; /* Dark Grey */
}

/* Vertical Triangle Separator */
.down-triangle {
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 15px solid #2B2626; /* Dark Grey Guideline 14 */
    margin: 25px auto;
}

/* Guideline 15 & 16: Red Ring */
.red-ring {
    width: 168px;
    height: 168px;
    border: 8px solid #F60701;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15px;
    background-color: #ffffff;
    margin: 0 auto;
}

/* Guideline 7: Fonts in Circle 16 Bold */
.fonts-in-circle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
}

/* Guideline 13: Arrow size */
.right-arrow-icon {
    width: 26px;
    height: 25px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2626' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 15px;
}








/* Mobile Responsiveness */
@media (max-width: 991px) {
    .journey-title {
        font-size: 32px; /* Smaller title for mobile */
    }

    /* Stack cards with space between each step */
    .col-md-3 {
        margin-bottom: 40px;
    }

    /* Hide horizontal arrows on mobile as the layout becomes vertical */
    .right-arrow-icon {
        display: none; 
    }
    
    .red-ring {
        margin-bottom: 20px;
    }
}

@media (max-width: 576px) {
    .journey-card, .img-holder, .text-holder {
        width: 100%; /* Make cards full width on very small screens */
        max-width: 306px;
    }
    
    .img-holder {
        height: auto;
        aspect-ratio: 306 / 212;
    }
}

/* This allows you to tint the black silhouette icons to your brand red */
.icon-circle img {
    filter: invert(12%) sepia(95%) saturate(7181%) hue-rotate(358deg) brightness(97%) contrast(107%);
}

/* Guideline 19: Icon size inside the white circle */
.icon-circle i {
    font-size: 24px;
    color: #F60701; /* Brand Red */
}

/* Adjusting Red Ring icons to match Brand Red */
.red-ring i {
    color: #2B2626; /* Dark Grey for the inner icon */
}

/* Responsive fix: Ensure icons center perfectly */
.icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Vertical Alignment & Separation Fix */
.journey-card {
    
}

/* Remove the gap between image and text */
.img-holder {
    width: 100%;
    height: 212px;
    margin-bottom: 0 !important; 
}

.text-holder {
    width: 100%;
    height: 210px;
    margin-top: 0 !important;
    padding: 40px 24px 24px 24px !important;
}

/* Mobile Fixes for Overflow */
@media (max-width: 1200px) {
    /* If the screen is too small for 4 cards across, Bootstrap stacks them, 
       but we must ensure the width doesn't break the container */
    .journey-card, .img-holder, .text-holder {
        max-width: 100%; 
    }
}

@media (max-width: 991px) {
    /* Stop the "sliding" by hiding horizontal arrows and centering vertical flow */
    .right-arrow-icon {
        display: none !important; 
    }
    
    .col-auto, .col-md-3 {
        width: 100%; /* Force vertical stacking */
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }

    .down-triangle {
        margin: 10px auto 30px auto !important;
    }
}

/* --- EXTENSIVE MOBILE RESPONSIVENESS --- */

/* 1. Large Tablets & Small Laptops (992px to 1199px) */
@media (max-width: 1199px) {
    .hero-title {
        font-size: 4.5rem;
    }
    .info-card {
        margin-left: 60px; /* Reduced overlap */
        padding: 2.5rem !important;
    }
    .cta-container {
        margin-right: -50px;
    }
}

/* 2. Tablets (768px to 991px) */
@media (max-width: 991px) {
    .hero-wrapper {
        min-height: auto;
        padding-bottom: 50px;
    }

    .hero-title {
        font-size: 3.8rem;
        text-align: center;
        letter-spacing: -1px;
    }

    /* Stack Billboard and Info Card */
    .billboard-wrapper {
        margin-bottom: 0;
    }

    .info-card {
        margin-left: 0; /* Remove horizontal overlap */
        margin-top: -30px; /* Create a slight vertical overlap on the image */
        width: 100%;
        max-height: none;
        padding: 2rem !important;
        text-align: center;
        z-index: 65;
    }

    .cta-container {
        margin-top: 20px;
        margin-right: 0;
        text-align: center;
    }

    /* Adjust the background split */
    .black-footer {
        height: 15%; /* Shorter black bar for stacked layout */
    }

    .bg-people-overlay {
        height: 50%;
    }
    
    .ps-lg-0 {
        padding-left: 15px !important; /* Restore padding on mobile */
    }
}

/* 3. Large Mobile / Phablets (576px to 767px) */
@media (max-width: 767px) {
    .hero-title {
        font-size: 3rem;
        line-height: 1.1;
    }

    .badge {
        display: block;
        width: fit-content;
        margin: 10px auto;
    }

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

    .btn-mmrs-red, .btn-danger {
        width: 100%; /* Full width buttons for better UX */
        max-width: 280px;
    }
}

/* 4. Small Mobile (Under 576px) */
@media (max-width: 575px) {
    .hero-title {
        font-size: 2.2rem;
        letter-spacing: 0;
    }

    .hero-wrapper {
        padding-top: 20px;
    }

    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .info-card {
        padding: 1.5rem !important;
    }

    /* Ensure the Minadi Image (Guideline 3) maintains aspect ratio */
    .billboard-img {
        width: 100%;
        height: auto;
    }

    /* Black footer acts more like a standard footer here */
    .black-footer {
        position: relative;
        height: 100px;
        margin-top: 40px;
    }
}

/* 5. Landscape Mode Fix for Mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-wrapper {
        min-height: auto;
    }
    .hero-title {
        font-size: 2.5rem;
    }
    .black-footer {
        display: none; /* Hide decorative background to save space */
    }
}




/* --- EXTENSIVE MOBILE RESPONSIVENESS: RETARGET JOURNEY --- */

/* 1. Large Tablets (Up to 1199px) */
@media (max-width: 1199px) {
    .journey-card {
        width: 280px; /* Slight scale down to fit 4-up on smaller laptops */
    }
    .img-holder, .text-holder {
        width: 100%;
    }
    .right-arrow-icon {
        margin: 0 5px; /* Tighten ring spacing */
    }
}

/* 2. Tablets & Small Laptops (Up to 991px) */
@media (max-width: 991px) {
    .journey-title {
        font-size: 32px;
        margin-bottom: 40px;
    }

    /* Stack the 4 cards into a 2x2 grid */
    .retarget-journey-section .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
        display: flex;
        justify-content: center;
        margin-bottom: 50px;
    }

    /* Red Rings: Stack into a 2x2 grid as well */
    .retarget-journey-section .row.align-items-center {
        display: flex;
        flex-wrap: wrap;
    }
    
    .retarget-journey-section .row.align-items-center .col-auto {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 30px;
    }

    /* Hide horizontal arrows on 2x2 or 1x1 layouts */
    .right-arrow-icon {
        display: none !important;
    }

    /* Ensure the vertical triangle separator is visible between stacked steps */
    .down-triangle {
        display: block;
        margin: 20px auto 0;
    }
}

/* 3. Phablets & Large Phones (Up to 767px) */
@media (max-width: 767px) {
    /* Switch Journey Cards to a single column vertical stack */
    .retarget-journey-section .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .journey-card {
        width: 306px; /* Return to guideline fixed width */
        margin-bottom: 20px;
    }

    /* Red Rings: Single column vertical stack */
    .retarget-journey-section .row.align-items-center .col-auto {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .red-ring {
        margin-bottom: 10px;
    }
}

/* 4. Small Mobile Phones (Up to 480px) */
@media (max-width: 480px) {
    .journey-title {
        font-size: 28px;
        padding: 0 15px;
    }

    /* Adjust the card width to ensure no overflow on very narrow screens */
    .journey-card, .img-holder, .text-holder {
        width: 100%;
        max-width: 306px; /* Adhere to Guideline 17/20 but allow shrink */
    }

    .img-holder {
        height: auto;
        aspect-ratio: 306 / 212; /* Maintain proportions even if width shrinks */
    }

    .text-holder {
        height: auto; /* Allow text to grow if translated or font-size changes */
        min-height: 210px;
    }

    /* Guideline 15 Red Ring: scale down slightly for very small screens */
    .red-ring {
        width: 150px;
        height: 150px;
        border-width: 6px; /* Slight reduction for visual balance */
    }

    .fonts-in-circle {
        font-size: 14px;
    }
}

/* 5. Special Fix for "Down Triangle" Positioning */
/* This ensures the triangle looks like a connector in the vertical stack */
@media (max-width: 991px) {
    .text-holder {
        position: relative;
    }
    
    .down-arrow-container {
        position: absolute;
        bottom: -45px;
        left: 0;
        right: 0;
    }

    /* Hide the triangle on the very last step in mobile view */
    .col-md-3:last-child .down-triangle,
    .col-auto:last-child .down-triangle {
        display: none;
    }
}




/* Container for the text (Guideline 20) */
.text-holder {
    width: 306px;
    height: 210px;
    background-color: #eeeeee; /* Light Grey */
    padding: 25px 24px 10px 24px; /* Room for content and arrow */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}

/* Pins the arrow to the exact bottom of the fixed-height card */
.down-arrow-container {
    margin-top: auto; 
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 5px; /* Adjust distance from the bottom edge */
}

/* Triangle styling (Guideline 14) */
.down-triangle {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 12px solid #2B2626; /* Dark Grey */
}


/* --- Journey Card Alignment --- */

.text-holder {
    width: 306px;     /* Guideline 20 */
    height: 210px;    /* Guideline 20 */
    background-color: #eeeeee; /* Guideline 14 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: 30px 20px 10px 20px;
    box-sizing: border-box;
    position: relative;
}

.body-font {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500; /* Medium - Guideline 8 */
    font-size: 16px;  /* Guideline 8 */
    line-height: 1.4; 
    margin-bottom: 0;
}

/* The Ghost Text Hack */
.ghost-text {
    color: #eeeeee;   /* Matches background exactly */
    user-select: none;
    pointer-events: none;
}

/* Align Arrow to Bottom */
.down-arrow-container {
    margin-top: auto; /* Pushes to the bottom of the flex container */
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 5px;
}

.down-triangle {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 12px solid #2B2626; /* Dark Grey - Guideline 14 */
}

/* --- Red Ring Row Alignment --- */

.retarget-journey-section .row.align-items-center {
    display: flex;
    align-items: center; /* Vertically centers rings and arrows */
    justify-content: center;
}

.red-ring {
    width: 168px;               /* Guideline 15 */
    height: 168px;              /* Guideline 15 */
    border: 8px solid #F60701;  /* Guideline 14 & 16 */
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
}

.right-arrow-icon {
    width: 60px;  /* Guideline 13 */
    height: 6px; /* Guideline 13 */
    background-color: #2B2626; /* Dark Grey */
    /* Use a mask or clip-path for an arrow shape if not using an <img> */
    clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
    margin: 0 25px;
}


/* Guideline 17: Image Holder for Retarget journey */
.img-holder {
    width: 306px;
    height: 212px;
    
    position: relative;
}

.img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images fill the 212px height without stretching */
}

/* Guideline 20: Text Background holder */
.text-holder {
    width: 306px;
    height: 210px;
    background-color: #eeeeee; /* Light Grey */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 24px;
    box-sizing: border-box;
    text-align: left; /* Aligned with typical prototype layouts */
}

/* THE FIX: Pins the arrow container to the absolute bottom of the text-holder */
.down-arrow-container {
    margin-top: 28px; 
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 10px;
}

/* The Ghost Text for invisible padding */
.ghost-text {
    color: #eeeeee; /* Matches background color exactly */
    user-select: none;
    pointer-events: none;
}

/* Guideline 14: Dark Grey Triangle */
.down-triangle {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 12px solid #2B2626;
}

/* Guideline 18 & 19: Icon Circle Styling */
.icon-circle {
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: -25px; /* Centers the circle on the seam between image and text */
    left: 24px;
    z-index: 2;
}

.icon-circle i {
    font-size: 24px; /* Guideline 19 */
}




/*Feature Section*/
/* Features Section */
.bg-dark-custom {
    background-color: #1a1a1a;
}

.feature-card {
    border: none;
    border-radius: 0;
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-10px);
}

.icon-img {
    height: 60px;
    width: auto;
    object-fit: contain;
}

/* Guideline 14: Exact Color Definitions */
.bg-dark-mmrs {
    background-color: #2B2626 !important; /* Dark Grey */
}

.text-red-mmrs {
    color: #F60701 !important; /* Red */
}

/* Guideline 5: Section Header (Bold - 40) */
.why-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; 
    font-size: 40px;
}

/* Guideline 6: Body Point Heading (Bold - 20) */
.body-point-heading {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #000000; /* Black - Guideline 14 */
    margin-bottom: 1rem;
}

/* Guideline 8: Body Fonts (Medium - 16) */
.body-font {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #2B2626; /* Dark Grey - Guideline 14 */
    line-height: 1.5;
}

/* Feature Card Styling */
.feature-card {
    border: none;
    border-radius: 0; /* Keep it sharp as per the prototype image */
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-10px);
}

.icon-img {
    height: 60px; /* Scaled for balance */
    width: auto;
}


/* Dark Form Styling */
.form-dark {
    background-color: transparent;
    border: 1px solid #333;
    border-radius: 0;
    color: #fff;
    padding: 15px;
}

.form-dark::placeholder { color: #eeeeee; }

.form-dark:focus {
    background-color: #111;
    border-color: #D6252A;
    box-shadow: none;
    color: #fff;
}


/* Guideline 14: Theme Colors */
.bg-black { background-color: #000000 !important; }
.text-red-mmrs { color: #F60701 !important; }

/* Guideline 9: Main Heading Style */
.form-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 24px;
}

/* Guideline 10: Subtitle Style */
.form-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Regular */
    font-size: 16px;
    color: #eeeeee; /* Light Grey for readability on black */
}

/* Guideline 2: Button Specifications */
.btn-mmrs-red {
    background-color: #F60701;
    color: #ffffff;
    width: 175px;  /* Guideline 2 */
    height: 32px;  /* Guideline 2 */
    border-radius: 20px; /* Guideline 2 */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px; /* Scaled to fit 32px height */
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.3s ease;
    margin-right: 25px;
}

.btn-mmrs-red:hover {
    opacity: 0.9;
    color: #ffffff;
}

/* Form Input Styling to match Dark Theme */
.form-dark {
    background-color: transparent;
    border: 1px solid #817d7d; /* Dark Grey border */
    border-radius: 0;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    padding: 12px;
}

.form-dark:focus {
    background-color: transparent;
    border-color: #F60701;
    box-shadow: none;
    color: #ffffff;
}

.form-dark::placeholder {
    color: #eeeeee;
    font-weight: 400;
}

/* Footer Styling */
.footer-section { background-color: #000; border-top: 1px solid #222; }
.social-icons a {
    display: inline-flex;
    width: 40px;
    height: 40px;
    background: #222;
    color: #fff;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    text-decoration: none;
    transition: 0.3s;
}
.social-icons a:hover { background: var(--moto-red); }
.x-small { font-size: 10px; }


/* Guideline 14: Colors */
.bg-black { background-color: #000000 !important; }
.text-red-mmrs { color: #F60701 !important; }
.text-light-grey { color: #eeeeee !important; }
.border-dark-grey { border-color: #2B2626 !important; }

/* Guideline 1: Logo Size */
.footer-logo {
    width: 200px;
    height: 50px;
    object-fit: contain;
}

/* Guideline 11: Let's Connect Font */
.lets-connect {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800; /* Extrabold */
    font-size: 48px;
}

/* Guideline 12: Contact Heading */
.contact-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 24px;
}

/* Guideline 8: Body Fonts */
.body-font {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500; /* Medium */
    font-size: 16px;
}

/* Guideline 2: Button Specifications */
.btn-mmrs-red {
    background-color: #F60701;
    color: #ffffff;
    width: 175px;
    height: 32px;
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.btn-mmrs-red:hover {
    background-color: #ffffff;
    color: #F60701;
}

/* Social Icons to match Image circular style */
.social-icons a {
    display: inline-flex;
    width: 40px;
    height: 40px;
    background: #2B2626; /* Dark Grey */
    color: #fff;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    text-decoration: none;
    transition: 0.3s;
}

.social-icons a:hover {
    background: #F60701;
}

.x-small { font-size: 10px; font-family: 'Montserrat', sans-serif; }


/* Guideline 14: Colors */
.bg-black { background-color: #000000 !important; }
.text-red-mmrs { color: #F60701 !important; }
.text-light-grey { color: #eeeeee !important; }
.border-dark-grey { border-color: #2B2626 !important; }

/* Guideline 1: Logo Size */
.footer-logo {
    width: 200px;
    height: 50px;
    object-fit: contain;
}

/* Guideline 11: Header Font (Extrabold - 48) */
.lets-connect {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 48px;
}

/* Guideline 12: Contact Title (Bold - 24) */
.contact-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 24px;
     margin-left: 75px;
}


/* Guideline 8: Body Font (Medium - 16) */
.body-font {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6;
}

/* Guideline 2: Button Size (175x32px, Radius 20) */
.btn-mmrs-red {
    background-color: #F60701;
    color: #ffffff;
    width: 175px;
    height: 32px;
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Social Icons */
.social-icons a {
    display: inline-flex;
    width: 40px;
    height: 40px;
    background: #2B2626; /* Dark Grey */
    color: #fff;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    text-decoration: none;
}

.x-small { font-size: 15px; opacity: 0.6; }

.contact-details {
    margin-left: 75px;
    color: #ff0000 !important;
}

/* Guideline 1: Logo Size */
.mmrs-logo-img {
    width: 200px;
    height: 50px;
    object-fit: contain;
}

/* Guideline 8: Nav Link Style (Montserrat Bold 16) */
.nav-text-style {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; /* Bold as per nav style commonly used with heading 6 guidelines */
    font-size: 16px;
    color: #000000 !important;
}

/* Guideline 2, 14, 16: Button Specifications */
.btn-nav-red {
    background-color: #F60701; /* Red */
    color: #ffffff;
    width: 175px;      /* Guideline 2 */
    height: 32px;      /* Guideline 2 */
    border-radius: 20px; /* Guideline 2 */
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px; /* Adjusted to fit the 32px height constraint */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.btn-nav-red:hover {
    opacity: 0.85;
    color: #F60701;
}

/* Sticky Navbar consistency */
.navbar {
    min-height: 80px; /* Provides enough room for the 50px logo plus padding */
}

/* Guideline 14: Colors */
.bg-black { background-color: #000000 !important; }
.text-red-mmrs { color: #F60701 !important; }

/* Removing horizontal division line */
.form-section { border: none !important; }

/* Guideline 9 & 10: Typography */
.form-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 24px; }
.form-subtitle { font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 16px; color: #eeeeee; }

/* Custom Form Input Styling */
.form-dark {
    background-color: transparent;
    border: 1px solid #817d7d !important; /* Set box to Light Grey */
    border-radius: 0;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    padding: 12px;
}

.form-dark::placeholder {
    color: #817d7d !important; /* Set placeholder text to Light Grey */
    opacity: 1; 
}

.form-dark:focus {
    background-color: transparent;
    border-color: #F60701 !important; /* Brand Red on focus */
    box-shadow: none;
    color: #ffffff;
}

/* Guideline 2: Button Specifications */
.btn-mmrs-red {
    background-color: #F60701;
    color: #ffffff;
    width: 175px;
    height: 32px;
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Guideline 14: Colors */
.bg-black { background-color: #000000 !important; }
.text-red-mmrs { color: #F60701 !important; }
.text-light-grey { color: #eeeeee !important; }

/* Remove top margin/border line from section */
.footer-section { 
    background-color: #000; 
    border-top: none !important; 
    padding-top: 60px;
}

/* Obvious horizontal line after the Connect section */
.border-bottom-obvious {
    /* Using Dark Grey #2B2626 from guidelines but with increased thickness for visibility */
    border-bottom: 2px solid #f8efef !important;
}

/* Guideline 11: Header Font (Extrabold - 48) */
.lets-connect {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 48px;
}

/* Guideline 12: Contact Title (Bold - 24) */
.contact-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 24px;
}

/* Guideline 1: Logo Size */
.footer-logo {
    width: 200px;
    height: 50px;
    object-fit: contain;
}

/* Guideline 2: Button Specs (175x32px, Radius 20) */
.btn-mmrs-red {
    background-color: #F60701;
    color: #ffffff;
    width: 175px;
    height: 32px;
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* NEW: Dark Grey Text Style for Body Content */
.text-dark-grey-custom { 
    color: #817d7d !important;  
    
}


/* --- Desktop Defaults (Guidelines Applied) --- */
.form-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 24px; }
.lets-connect { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 48px; }
.contact-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 24px; }
.body-font { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 16px; }

/* Guideline 2: Fixed Button Sizes */
.btn-mmrs-red {
    width: 175px;
    height: 32px;
    border-radius: 20px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- Mobile Responsiveness (Media Queries) --- */

/* Tablets and below (992px) */
@media (max-width: 991.98px) {
    .lets-connect { font-size: 36px; } /* Scale down slightly for tablets */
    .form-title { font-size: 22px; }
    .footer-logo { width: 180px; height: auto; }
}

/* Mobile Phones (768px) */
@media (max-width: 767.98px) {
    /* Form Adjustments */
    .form-section .text-end {
        text-align: center !important; /* Center button on mobile for better thumb reach */
    }
    .form-title br {
        display: none; /* Remove manual line breaks for natural wrapping */
    }

    /* Header Adjustments */
    .lets-connect { 
        font-size: 28px; 
        text-align: center;
        margin-bottom: 20px !important;
    }
    
    /* Layout stacking */
    .d-flex.justify-content-between.align-items-center {
        flex-direction: column !important; /* Stack "Let's Connect" and "Contact Us" */
        text-align: center;
    }

    .footer-section .col-md-6 {
        text-align: center !important; /* Center align footer content */
    }

    .footer-logo {
        margin: 0 auto 1.5rem auto; /* Center logo */
    }

    .social-icons {
        justify-content: center;
        display: flex;
        margin-bottom: 2rem;
    }

    .contact-details {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center contact icons and text */
    }

    .w-75 {
        width: 100% !important; /* Full width text on mobile */
    }
}

/* Small Phones (480px) */
@media (max-width: 479.98px) {
    .lets-connect { font-size: 24px; }
    .form-title { font-size: 20px; }
    
    /* Ensure the button doesn't look too small on tiny screens, 
       but keep the guideline width if possible */
    .btn-mmrs-red {
        width: 100%; /* Make button full width on very small screens for UX */
        max-width: 175px; 
    }
}


/* Ensure Navbar is always on top */
.sticky-top {
    top: 0;
    z-index: 1030; /* Bootstrap's default for sticky-top */
    background-color: #ffffff !important; /* Ensure no transparency when scrolling */
}

/* Optional: Add a subtle shadow when scrolling for depth */
.custom-nav-shadow {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Guideline 1: Logo constraints */
.mmrs-logo-img {
    width: 200px;
    height: 50px;
    object-fit: contain;
}

/* Guideline 8: Nav Text */
.nav-text-style {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 16px;
}

/* Guideline 2: Fixed Button Dimensions */
.btn-nav-red {
    background-color: #F60701;
    color: #ffffff;
    width: 175px;
    height: 32px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    border: none;
    transition: background 0.3s ease;
}

.btn-nav-red:hover {
    background-color: #b51414; /* Dark Grey hover */
    color: #ffffff;
}

/* Mobile Responsiveness for Nav */
@media (max-width: 768px) {
    .container.px-5 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .mmrs-logo-img {
        width: 150px; /* Scale logo for smaller screens */
    }
    . {
        display: none; /* Often hidden on mobile to save space for the CTA button */
    }
}

/* Smooth transition for the sticky effect */
.transition-all {
    transition: all 0.3s ease-in-out;
}

/* Base State: Clean */
#mainNav {
    background-color: #ffffff !important;
    border-bottom: 1px solid transparent;
}

/* Scrolled State: Added Shadow and Border */
#mainNav.scrolled {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #eeeeee; /* Guideline 14: Light Grey */
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Guideline 1: Logo Size */
.mmrs-logo-img {
    width: 200px;
    height: 50px;
    object-fit: contain;
}

/* Guideline 2: Fixed Button Dimensions */
.btn-nav-red {
    background-color: #F60701;
    color: #ffffff;
    width: 175px;
    height: 32px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    border: none;
    text-decoration: none;
}

.nav-text-style {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500; /* Medium */
    
    font-size: 16px;
}