/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Mulish', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #efefef;
    padding-top: 125px; /* compensate for fixed header */
}

@media (min-width: 768px) {
    body {
        padding-top: 0px;
    }
}    

/* Header */
.hero-banner {
    top: 0;
    left: 0;
    z-index: 10;
    background-color: #3C1D17;  
    /* Set the background image (your wide photo) */
    background-image: url('banner_shaded.jpg');
    background-size: cover;          /* Makes sure the image covers the entire container */
    background-position: center;    /* Centers the background image */
    background-repeat: no-repeat;    /* Prevents the image from repeating */

    /* Define the height of your banner area */
    /* Adjust this value as needed to fit your design */
    height: 110px; /* mobile height */

    /* Set positioning context for absolutely positioned children */
    position: fixed; /* <-- Crucial for positioning the logo on top */
    width: 100%;        /* Ensure it takes full width */
    overflow: hidden;   /* Hides any overflow if image is too large for height */

    color: #FFFFFF;
}

.hero-banner h1 {
    color: #FFFFFF; 
    position: absolute; /* <-- This makes the logo position relative to .hero-banner */
    top: 68%;           /* Move its top edge to the vertical center of the banner */
    left: 50%;          /* Move its left edge to the horizontal center of the banner */
    transform: translate(-50%, -50%); /* <-- Magic for perfect centering */
    /* This transform shifts the element back by half its own width and height,
       so its *center* is aligned with the parent's center. */

    /*font-size: 2.4em; */
    font-size: 15px; /* this is mobile size */

    z-index: 10;        /* <-- Ensures the logo is on top of the background image */
                        /* (Higher z-index means it's "closer" to the viewer) */

    /* Optional: Max width for the logo so it doesn't get too big on large screens */
    max-width: 800px; /* Adjust as needed */
    /*width: 80%; */      /* Make it responsive for smaller screens */
    /* Optional: padding/margin if needed around the logo */
    white-space: nowrap; /*does not collapse to two lines*/
}

.hero-banner h2 a {
    color: #FFFFFF; 
    position: absolute; /* <-- This makes the logo position relative to .hero-banner */
    top: 85%;           /* Move its top edge to the vertical center of the banner */
    left: 50%;          /* Move its left edge to the horizontal center of the banner */
    transform: translate(-50%, -50%); /* <-- Magic for perfect centering */
    /* This transform shifts the element back by half its own width and height,
       so its *center* is aligned with the parent's center. */

    /*font-size: 1em; */
    font-size: 11px; /* mobile size */

    z-index: 10;        /* <-- Ensures the logo is on top of the background image */
                        /* (Higher z-index means it's "closer" to the viewer) */

    /* Optional: Max width for the logo so it doesn't get too big on large screens */
    max-width: 800px; /* Adjust as needed */
    /*width: 80%; */      /* Make it responsive for smaller screens */
    /* Optional: padding/margin if needed around the logo */
    white-space: nowrap; /*does not collapse to two lines*/
}

.logo-container {
    position: absolute; /* <-- This makes the logo position relative to .hero-banner */
    top: 30%;           /* Move its top edge to the vertical center of the banner */
    left: 50%;          /* Move its left edge to the horizontal center of the banner */
    transform: translate(-50%, -50%); /* <-- Magic for perfect centering */
    /* This transform shifts the element back by half its own width and height,
       so its *center* is aligned with the parent's center. */

    z-index: 10;        /* <-- Ensures the logo is on top of the background image */
                        /* (Higher z-index means it's "closer" to the viewer) */

    /* Optional: Max width for the logo so it doesn't get too big on large screens */
    /* max-width: 350px; */ /* Adjust as needed */
    /* width: 80%; */       /* Make it responsive for smaller screens */
    width: 182px; /* mobile screen */
    height: 61px; /* mobile screen */
    /* Optional: padding/margin if needed around the logo */
}

.logo-container img {
    max-width: 100%; /* Ensure the logo image itself scales within its container */
    height: auto;    /* Maintain aspect ratio */
    display: block;  /* Remove any extra space below the image */
}



@media (min-width: 768px) {
    .hero-banner {
        height: 340px;
        background-color: #3C1D17;  
        /* Set the background image (your wide photo) */
        background-image: url('banner_shaded.jpg');
        background-size: cover;       /* fills width, crops top/bottom */
        background-position: center;  /* centers horizontally and vertically */
        background-repeat: no-repeat;
        position: static;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 1rem;
        color: #FFFFFF;
    }

    .logo-container {      
        position: static;
        width: 693px;
        height: 235px;
        transform: none;
    }

    .logo-container img {
        width: 630px;            /* Adjust this to the size you want */
        max-width: 100%;         /* Prevents overflow */
        height: auto;            /* Keeps the aspect ratio intact */
        display: block;
        margin: 0 auto;          /* Centers it horizontally */
    }

    .hero-banner h1 {
        margin-top: -1.5rem;        
        position: static;
        font-size: 52px;
        transform: none;
    }

    .hero-banner h2 a {
        margin-top: -1.5rem;
        position: static;
        font-size: 31px;
        transform: none;
    }
}





/* Navigation */
.main-nav {
    background-color: #B63D32;
    padding: 0;
}

.main-nav ul {
    list-style: none;
    display: flex;
    margin: 0 auto;
    max-width: 800px;
    justify-content: space-around;
}

.main-nav a {
    display: block;
    padding: 10px 30px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    background-color: #B63D32;
    white-space: nowrap;
}

.main-nav a:hover,
.main-nav a.active {
    color: black;
    background-color: rgba(255, 255, 255, 0.2);
}

/* ANIMATION TRANSITION DEFINITIONS */
@keyframes fadeInGrow {
    0% {
        opacity: 0;
        transform: scale(0.8); /* Start at 80% size */
    }
    100% {
        opacity: 1;
        transform: scale(1); /* End at 100% size */
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}


/* Main Content - no changes unless you want specific layout adjustments */
.main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
    text-align: center;
}

.main-content .main-heading {
    line-height: 1.3;
    padding-bottom: 0.3em;
}

.main-heading {
    font-size: 2.5rem;
    color: #B63D32;
    margin-bottom: 20px;
    font-weight: 900; /* 700 is reg bold */
    letter-spacing: 2px;

    /* Animation properties */
    animation: fadeInGrow 1.2s ease-out forwards; /* Name, duration, timing, fill-mode */
}

.content-container {
    padding: 2rem 0rem 0.8rem;
}

.second-heading {
    font-size: 2.5rem;
    color: #B63D32;
    /* margin-bottom: 20px; */
    font-weight: bold;
    letter-spacing: 3px;
    text-align:center;

    /* Animation properties */
    animation: fadeSlideDown 0.9s ease-out forwards;
}


@keyframes fadeSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.home-page .description {
    margin-top: -0.3rem;
    margin-bottom: 0rem;
    margin-left: auto;
    margin-right: auto;    
}

.home-page h4 {
    font-size: 1.7rem;
    margin-top: -0.2em;
}

.home-page .services {
    margin-top: -0.8em;
}

.description {
    font-size: 1.1rem;
    color: #303030;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 0.03em;

    /* Animation properties */
    animation: fadeInGrow 1.2s ease-out forwards;
    /*animation-delay: 0.2s;*/ /* Optional: delay this text slightly after the heading */
}

.home-page .flex-container {
    padding-top: 1.5rem;
    align-items: center;
}

.home-page .warranty {
    white-space: pre-wrap;
    padding: 0.4rem 1.2rem;
    align-items: center;  
    font-size: 1.1rem;
    text-align: center;  
    margin-top: -0.8em; 
    margin-bottom: 1.2em;   
}

@media (min-width: 768px) {
    .home-page .description {
        max-width: 750px;
        margin-top: -0.7rem;
    }

    .home-page h4 {
        margin-top: 0.2rem;
    }

    .home-page .services {
        max-width: 650px;
    }

    .home-page .warranty {
        font-size: 1.4rem;
    }
}

.contact-page .description{
    margin-left: 5%;
    margin-right: 5%
}

/* Carousel */
.carousel-container {
   /* margin: 15px auto; */
    overflow: hidden; /* Crucial to hide off-screen slides */
    /* width: 380px; */ /* past 390 and above and the other images are visible */
     /* max-width: 800px; */ /* Keep if you want a maximum container width */
    /* height: 250px; */ /* **This defines the uniform height for all images** */
    /* position: relative; */
    /* border: 1px solid blue; /* For debugging viewport */
}

.home-page .carousel-container {
    width: 100%;
    height: 100%;
    margin-top: 1.4rem;
}

.towing-page .carousel-container {
    margin-bottom: 2rem;
}

.auto-repair-page .carousel-container {
    margin-bottom: 2rem;
}

.carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.carousel {
    display: flex; /* normally is flex */
    height: 100%;
    /* Transition for smooth movement between slides */
    transition: transform 0.8s ease-in-out; /* Adjust movement time as needed */
    /* We'll let flex handle the natural width, no fixed width needed here */
    /* border: 1px solid green; /* For debugging the flex container */
    will-change: transform; /* Hint to browser for performance */
}

.carousel-slide {
    flex-shrink: 0; /* Prevents slides from shrinking */
    margin: 0;
    padding: 0;
    border: none; /* No borders */
    /* border: 1px dashed red; /* For debugging individual slides */
}

.carousel-image,
.image-placeholder {
    height: 100%; /* Forces uniform height */
    width: auto;  /* Allows width to vary based on aspect ratio */
    display: block; /* Removes any extra space */
    margin: 0;
    padding: 0;
    border: none;
}

.carousel-image img {
    height: 100%;
    width: auto;
    /* object-fit: contain; */ /* Use 'contain' if you want the whole image visible.
                                  Otherwise, remove for default behavior (scales to height, width auto). */
    object-position: center;
    display: block;
}

/* Placeholder specific styles (give a default min-width so it's visible) */
.image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    min-width: 150px; /* Ensure placeholders have some initial width */
}




/* Footer */

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}


/* --- Existing Footer & Gray Line Styles (for context) --- */

.footer-line {
    width: 80%; /* Example: 80% width for the line */
    height: 5px;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    background-color: #cccccc;
    margin: 5px auto 5px auto; /* Centered with margin below it */
}

/* --- Main Footer Container --- */
.main-footer {
    background-color: #B63D32; /* Red Brick */
    color: white;
    /* Set a minimum height to ensure it's "tall" */
    min-height: 400px; /* Example: adjust this total height as needed */
    width: 100%;

    display: flex;           /* Make the footer a flex container */
    flex-direction: column;  /* Stack its two main sections vertically */
    justify-content: space-between; /* Pushes top and bottom sections to edges */
    align-items: center;     /* Center content horizontally (if it doesn't take full width) */
    text-align: center;      /* Default for text within the footer */
    padding: 20px 0 40px 0;         /* Padding for the entire footer, visible as red */
                             /* This padding will show the red background at the very top/bottom */
}

/* --- Top 50% Section of the Footer --- */
.main-footer-top-section {
    width: 100%;
    flex: 1; /* This makes it take up roughly 50% of the available space */
             /* You could use height: 50%; but flex: 1 is more flexible with content */
    display: flex;           /* Make this a flex container too */
    flex-direction: column;  /* Stack its contents vertically */
    align-items: center;     /* Center its content horizontally */
    justify-content: center; /* Center its content vertically if height allows */
}

/* --- Example: Messaging above the ribbon --- */
.pre-ribbon-message {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 20px; /* Space between message and ribbon */
    color: #3C1D17; /* Dark Brown */
    padding: 0 15px; /* Prevent text from hitting edges on small screens */
    max-width: 600px; /* Limit width on larger screens */
}


/* --- The Dark Brown Contact Ribbon (from previous discussion) --- */
.contact-ribbon {
    background-color:#3C1D17; /* Dark brown color */
    width: 100%;             /* Make it span the full width */
    padding: 25px 15px;      /* Vertical and horizontal padding inside the ribbon */
    /* Remove margin here, as its parent (.main-footer-top-section) now manages vertical space */
    margin: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* --- Styling for Ribbon Contents (same as before) --- */
.contact-ribbon-icon {
    max-width: 60px;
    height: auto;
    display: block;
    margin-bottom: 15px;
    filter: drop-shadow(3px 4px 6px rgba(0, 0, 0, 0.3));
}
.contact-ribbon-message {
    color: #B63D32;
    font-size: 1.1em;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
    margin-bottom: 8px;
    line-height: 1.4;
    max-width: 90%;
}
.contact-ribbon-phone {
    color: #B63D32;
    font-size: 1.6em;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    /*text-decoration: none; */
    padding: 5px 10px;
    display: inline-block;
}
.contact-ribbon-phone:hover {
    /* transition: ease-in; */
    color: #FFE08C;
    text-decoration: underline;
}


/* --- Bottom 50% Section of the Footer --- */
.main-footer-bottom-section {
    width: 100%;
    flex: 1; /* This makes it take up roughly 50% of the available space */
    display: flex;           /* Make this a flex container */
    flex-direction: column;  /* Stack icons and copyright vertically on mobile */
    align-items: center;     /* Center items horizontally */
    justify-content: center; /* Center content vertically */
    padding: 20px 0 20px 0;         /* Padding for this section if needed */
}

/* --- Contact Icons Container (Now Always Side-by-Side, Mobile-First) --- */
.contact-icons-container {
    display: flex;
    flex-direction: row;     /* <-- CRITICAL CHANGE: Always row, even on mobile */
    justify-content: space-evenly; /* <-- Distributes space evenly between and around icons */
    align-items: center;     /* Aligns icons vertically (if they have different heights) */
    gap: 15px;               /* <-- Reduced space BETWEEN icons on mobile */
                             /* Adjust this value if they're too close or too far */

    margin-bottom: 20px;     /* Space between icons and copyright */
    padding: 0 5px;          /* <-- REDUCED horizontal padding for the container itself */
                             /* This gives icons more room to breathe on very small screens */

    max-width: 300px;        /* Optional: Limits the max width of the icon row on wide mobile screens */
    width: 100%;             /* Ensures it takes full available width for justification to work */
}

.contact-method-link {
    text-decoration: none; /* Remove underline from links */
    display: block;         /* Ensure link block respects margins/padding */
    padding: 5px;           /* Make the clickable area slightly larger */
}


.contact-icon {
    max-width: 70px; /* Adjust icon size for mobile */
    height: auto;    /* Maintain aspect ratio */
    display: block;  /* Remove extra space below image */
}

/* --- Copyright Message --- */
.footer-copyright {
    font-size: 0.9em;
    color: #ffffff; /* Lighter Brown */
    margin-top: 10px; /* Space above copyright if icons don't push it down */

        /* Add or increase this line for space BELOW the copyright */
    margin-bottom: 10px; /* Adjust this value as needed. E.g., 30px, 40px, etc. */
    padding-bottom: 40px;
}


/* --- Media Query for Desktop --- */
@media (min-width: 768px) { /* Adjust this breakpoint as needed */

    /* --- Main Footer Adjustments --- */
    .main-footer {
        min-height: 300px; /* Taller on desktop */
        padding: 30px 0 0 0; /* More padding on desktop */
        margin-top: 1em;
    }

    /* --- Top Section Adjustments --- */
    .pre-ribbon-message {
        font-size: 1.4em;
    }
    .contact-ribbon {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        /*gap: 1rem; */
        padding: 27px 0px 38px 0px;
    }
    .contact-ribbon-icon {
        max-width: 75px; /* Slightly larger icon on desktop */
    }
    .contact-ribbon-message {
        font-size: 1.3em;
    }
    .contact-ribbon-phone {
        font-size: 1.5em;
        text-align: center;
        padding: 0em 1em;
    }

    .contact-flex-row {
        display: flex;
        flex-direction: row;     /* ← THIS is the magic */
        justify-content: space-between;
        align-items: center;  
    }

    /* --- Bottom Section Adjustments --- */
    .main-footer-bottom-section {
        padding: 30px 0; /* Adjust padding for desktop bottom section */
    }
    
    .contact-icons-container {
        /* You can increase gap and max-width for desktop to spread them out more */
        gap: 30px;               /* More space between icons on desktop */
        max-width: 430px;        /* A bit wider for desktop */
        justify-content: space-around; /* Or space-evenly, center, etc. */
        padding: 0;
        margin-top: -1.2em; 
        margin-bottom: 1.3em;
    }

    .contact-icon {
        max-width: 90px; /* Larger icon size on desktop */
    }

    .contact-ribbon .footer-line {
        width: 124px;
        text-align: center;
    }

    .contact-ribbon div.footer-line:nth-of-type(1) {
        text-align: left;
    }

    .contact-ribbon div.footer-line:nth-of-type(2) {
        text-align: right;
    }


    .footer-copyright {
        font-size: 1em; /* Slightly larger copyright text on desktop */
                /* You can set a different margin-bottom for desktop if desired */
        color: #ffffff; /* Lighter Brown */
        margin-top: 0px; /* Space above copyright if icons don't push it down */

            /* Add or increase this line for space BELOW the copyright */
        margin-bottom: 0px; /* Adjust this value as needed. E.g., 30px, 40px, etc. */
        padding-bottom: 0px;
    }
}




/* THIS HIDES main-nav ON MOBILE */

@media (max-width: 768px) {
  .main-nav {
    display: none;
  }
}


/* --- Desktop Adjustments (if you want it different or hidden on desktop) --- */
@media (min-width: 768px) {
    button#scrollTopBtn {
        display: none;
    }

    .scroll-to-top-button {
        /* Example: Make it slightly larger on desktop */
        /*width: 60px;
        height: 60px;
        bottom: 30px;
        right: 30px; */
        /* If you want it to always be visible on desktop, no changes needed */
        /* If you want to hide it on desktop: */
        display: none;
    }

    .caret-icon {
        display: none;
        /*width: 25px;
        height: 25px;
        border-width: 0 4px 4px 0;
        margin-top: 5px; */
    }
}

.desktop-visible {
    display: none;
}


/* Text containers */
.flex-container {
    display: flex;
    flex-direction: column;  /* Or 'row' for horizontal */
    gap: 1rem;               /* Spacing between blocks */
    justify-content: center; /* centers horizontally */
    /* align-items: center; */    /* centers vertically (if you want vertical centering too) */
    padding-left: 0.4rem;
    text-align: center;      /* ensures multi-line text is centered */
    /*flex-wrap: wrap; */ /* in case they don't fit in one line */
    font-size: 1.3rem;
}

.towing-page .list_class {
    margin-top: -0.5rem;
    /*padding-left: 3.5rem;
    padding-left: clamp(10px, 9%, 80vw); */   
    position: relative;
    max-width: 15rem;
    margin-left: auto;
    margin-right: auto;
    left: -3rem;
}

.towing-page .list_class h4 {
    font-size: 0.9em;
    padding-left: clamp(10px, 9%, 80vw);    
}

.body-shop-page .list_class {
    padding-left: clamp(20px, 10%, 80vw);
}

@media (min-width: 768px) {
    .body-shop-page .list_class {
        max-width: 675px;        /* your content width */
        margin: 0 auto;          /* center the whole list */
        padding-left: 1rem;
    }
    .body-shop-page .list_class li.flex-container {
        display: flex;
        justify-content: flex-start;  /* make sure text hugs the left */
        /*padding-left: 30%; */           /* ← this is your "nudge" inward */
        padding-left: clamp(60px, 10%, 200px);
        text-align: left;
    }
}

.auto-repair-page .list_class h4 {
    font-size: 0.8em;
}

.auto-repair-page .list_class {
    margin-top: -0.2rem;
    padding-left: 2rem;
    padding-left: clamp(20px, 13%, 80vw);    
}

.auto-repair-page .flex-block img {
    max-width: 300px;
    height: auto;
}


.flex-block-list {
  /* background: transparent; */
  padding: 0.3rem;
  border-radius: 6px;
  /* box-shadow: 0 1px 4px #0001; */
  /*width: 40%; */
  /*margin-left: 12px;
  margin-right: 12px; */
  justify-content: center; /* centers horizontally */
  align-items: center;     /* centers vertically (if you want vertical centering too) */
  text-align: left;      /* ensures multi-line text is centered */
}

.flex-block {
  background: #EFEFEF;
  padding: 1rem;
 /* border-radius: 6px;
  box-shadow: 0 1px 4px #0001;
  /*margin-left: 12px;
  margin-right: 12px; */
  justify-content: center; /* centers horizontally */
  align-items: center;     /* centers vertically (if you want vertical centering too) */
  text-align: center;      /* ensures multi-line text is centered */
}


h1 h2 {
    color: white;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/*
ul li {
    text-align: left;
    justify-content: left;
}
    */

h4 {
    color: #3C1D17;
    white-space: nowrap; /* doesn't break into second line */
}

@keyframes slideFadeInRight {
  0% {
    opacity: 0;
    transform: translateX(40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.img-entrance {
  opacity: 0; /* start hidden just in case */
  animation: slideFadeInRight 0.8s ease-out forwards;
}

@keyframes slideFadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.img-entrance-left {
  opacity: 0; /* start hidden just in case */
  animation: slideFadeInLeft 0.8s ease-out forwards;
}

.redfont {
    color:#B63D32;
    font-weight: bold;
}


/* CONTACT page map */
.map-wrapper {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.map-placeholder,
.real-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-placeholder {
    opacity: 0.3;
    backdrop-filter: blur(8px);  
}

.real-map {
  z-index: 5;
}

.map-loading {
  position: absolute;
  top: 22%;
  left: 22%;
  background: rgba(255, 255, 255, 0.7);
  color: #333;
  padding: 4px 15px;
  font-size: 2.2rem;
  border-radius: 4px;
  z-index: 3;
  pointer-events: none;
}

.slides-loading {
  position: absolute;
  top: 22%;
  left: 49%; /* 50% is perfect center */
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.7);
  /* background-color: #FFDC9733; *//*  google map orange gold */
  color: #333;
  padding: 4px 15px;
  font-size: 2.2rem;
  border-radius: 14px;
  z-index: 3;
  white-space: nowrap; 
  pointer-events: none;
  animation: fadeOut 3s ease-out forwards;
}


.contact-block {
    color: #3C1D17;
    margin-top: 20px;
    margin-bottom:40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.contact-block h5 {
    font-size: 25px;
    letter-spacing: 0.02em;
    margin-left: 5%;
}

.contact-block p {
    font-size: 16px;
    letter-spacing: 0.05em;
    font-weight: 400;
    margin-left: 5%;
}

.contact-block a { 
    color: #3C1D17;
    text-decoration: none;
}

.image-group img.ellipse {
   /* width: 591px;
    height: auto; */
    width: 100%;
    max-width: 27rem;
    height: auto;
    border: 7px solid #717070;
    border-radius: 50% / 50%;  
    margin-top: 0.2rem; 
}

.image-group img {
    width: 100%;
    max-width: 18rem;
    height: auto;
    border: 5px solid #717070;
    margin-top: 0.3rem;
    margin-bottom: 0rem;  
}

/* specific mobile version of our story */

.our-story-page .image-group img[alt^="Secon"] {
    max-width: 19rem;
    height: auto;   
}

.our-story-page .image-group img[alt^="Chrys"] {
    max-width: 22rem;
    height: auto;   
}

.our-story-page .image-group img[alt^="CJW"] {
    max-width: 16rem;
    height: auto;   
}

.our-story-page .image-group img[alt^="Horse"] {
    max-width: 20rem;
    height: auto;   
}




.content-block {
    text-align: justify;
    text-justify: inter-word;
}

.content-block p::after {
    content: '';
    display: inline-block;
    width: 100%;   
}

section {
    padding: 0rem 2.7rem;
    letter-spacing: 0.05px;
}


.text-group h5 {
    color:#3C1D17;    
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
    font-size: 1.5em;  
    line-height: 1.2;
    text-align: center;     
} 

.our-story-page .text-group h5 {
    line-height: 1.4;
}

.text-group p {
    /* 17px on desktop */
    color:#303030;
    margin-top: 1.4rem;
    margin-bottom: -0.3rem;
    font-size: 17px;
    position: relative;
}

p.buffer {
    margin-top: -1rem;
}

.image-group {   
    text-align: center;  
}

.image-group h6 {
    color:#3C1D17;
    margin-top: 0.3rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
    font-size: 0.9em;
    line-height: 1.2;
    /* 18px on desktop */
}

.warranty {
    margin-top: -0.5em;
    margin-bottom: 0.5em;
}

/* body shop fading carousel */
.fade-carousel {
  position: relative;
  /* width: auto; */
  max-width: 740px; /* or whatever fits your layout */
  /* height: 480px; */
  aspect-ratio: 3 / 2; /* optional, locks image shape */
  overflow: hidden;
  margin: 2rem auto; /* 2rem on top and bottom */
}

.fade-carousel img {
  z-index: 15;  
}

.carousel-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 0;
}

.carousel-img.active {
  opacity: 1;
  z-index: 1;
}


.piston-flex-row {
    display: flex;
    flex-direction: column;     /* ← THIS is the magic */
    justify-content: space-between;
    /* align-items: center; */    
    /* width: 800px; */    
}

.piston-flex-row .flex-container h4 {
    font-size: 1.1rem;
    padding: 0;
    margin-left: 0.5rem;
    margin-right: auto;
    margin-top: 0.4rem;
    letter-spacing: 0.4px;
}

.mid-list h4 {
    letter-spacing: 0.3px;
    padding-left: 0.4rem;
}
  

/* auto repair */
.engine-flex-row .list_class {
    line-spacing: 0.1px;
}


.slant-cover {
    display: none;
}

/* See GPT "Menu active class issue"
search flex noodle to see how center the stuff */
/* MIDORI IS LEANER BROWSER */

/*auto repair desktop */

@media (min-width: 768px) {

    .piston-flex-row {
        display: flex;
        flex-direction: row;     /* ← THIS is the magic */
        justify-content: space-between;
        align-items: center;     
        /* width: 800px; */
    }

    .piston-flex-row .list_class {
        margin-left: 30rem;
        white-space: nowrap; /*does not collapse to two lines*/    
    }

    .slant-cover {
        display: block;
    }

    /* auto repair */
    .engine-flex-row {
        display: flex;
        flex-direction: row;     /* ← THIS is the magic */
        justify-content: space-between;
        align-items: center;     
        /* width: 800px; */
    }

}








/* --- Desktop Adjustments hide ribbon and mobile menu --- */
@media (min-width: 768px) {
    .ribbon {
        display: none;
    }
    
    body .menu-icon {
        display: none;
    }

    body .menu-btn {
        display:none;
    }

    .mobile-visible {
        display: none;
    }
    
    .desktop-visible {
        display: block;
    } 
    .body-shop-page .flex-block-list .desktop-visible {
        display: block;
    } 
    .body-shop-page .flex-block-list {
        justify-content: left;
    } 
    
    .contact-block {
        width: 20rem;
        margin-left: 0;
        margin-right: 0;;
    }

    .description {
        font-size: 1.1rem;
        color: #303030;
        margin-bottom: 30px;
        max-width: 40rem;
        margin-left: 0;
        margin-right: 0;
        letter-spacing: 0.03em;
        text-align: center;

        /* Animation properties */
        animation: none;
        /*animation-delay: 0.2s;*/ /* Optional: delay this text slightly after the heading */
    }

    .contact-page .description{
        margin-left: auto;
        margin-right: auto;
    }


  /*  .contact-page p {
        margin: 0;
    } */

    /*
    .contact-page .description { 
       margin-left: 0;
       margin-right: 0;
    } */


    .contact-page .row-flex {
        display: flex;
        flex-direction: row;
        justify-content: center; /* Example: center the whole group */
        align-items: flex-start; /* Align to top */
        width: 50rem; /* Example fixed width for container */
        height: 25rem;
        /*border: 2px dashed blue; */
        margin: 50px auto; /* Center the container for visibility */
        /*overflow: hidden; */ /* Important if items extend visually beyond container */
        position: relative; /* Establish stacking context if needed for children, though z-index often works with flex items directly */
    }

    /* Base styles for all flex items */
    .contact-page .flex-item {
        padding: 1rem;
        font-weight: bold;
        /*border: 2px solid rgba(0,0,0,0.5);*/
        flex-shrink: 0; /* Important: don't let them shrink from their base size */
        flex-grow: 0;

        /* --- Crucial for z-index to work: make them positioned --- */
        position: relative; /* This allows z-index to apply */
    }

    /* Reordering the flex items using 'order' */
    .contact-page .column-flex-text {
        order: 1;
        /* order: 1; */
        flex-direction: column;
        display: flex;
        /* gap: 2rem; */
        align-items: flex-start; /* Align columns to the top */
        /*width: 300px; *//* Example base width */
        /*height: 200px; */
        /*background-color: rgba(255, 99, 71, 0.8); *//* Tomato, semi-transparent */
       /* z-index: 10; *//* Highest z-index */

        /*flex-basis: 40%;*/
        top: 1rem;
        /* Shift left to overlap the next item */
        /*left: 3rem;*/ /* Moves it 50px to the right of its original position, causing overlap */
                    /* Think: pushes its "content box" 50px to the right, but its bounding box for flex is still where it was */
    }

    .contact-page .map-wrapper {
        order: 2;
        flex-basis: 60%;
        /* width: 400px; *//* Example base width */
        /* height: 25rem; */
        background-color:#FFDC9733; /*  google map orange gold */
        /*z-index: 0;*/ /* Lowest z-index */
        border: solid 7px white;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);



        /* Shift left to overlap the slant-cover */
        left: 1.4rem; /* Moves it 100px to the left, pulling it OVER the slant-cover */
    }

    .our-story-page .image-group img.ellipse {
        max-width: 34rem;
        height: auto; 
        /* width: 95%;
        height: 95%;
        border: 7px solid #717070;
        border-radius: 50% / 50%; */  
        margin-top: 0.2rem; 
    }

    .our-story-page .image-group img[alt^="Secon"] {
        /* width: 85%;
        height: 85%; */
        max-width: 23rem;
        height: auto;   
        /* border: 5px solid #717070; */
    }

    .our-story-page .image-group img[alt^="Chrys"] {
        /* width: 85%;
        height: 85%; */
        max-width: 25rem;
        height: auto;   
        /* border: 5px solid #717070; */
    }

    .our-story-page .image-group img[alt^="CJW"] {
        /* width: 85%;
        height: 85%; */
        max-width: 19rem;
        height: auto;   
        /* border: 5px solid #717070; */
    }

    .our-story-page .image-group img[alt^="Horse"] {
        /* width: 85%;
        height: 85%; */
        max-width: 25rem;
        height: auto;   
        /* border: 5px solid #717070; */
    }

    .our-story-page .text-group p .ghost-fill {
        display: flex;
        width: 100%;
        height: 0;
        font-size: 0;
        line-height: 0;
        visibility: hidden;
        pointer-events: none;   
    }

    .slant-cover {
        background-color: #008CFF; /* evil blue */
        width: 300px;
        height: 230px;
        clip-path: polygon(25% 0, 100% 0, 75% 100%, 0% 100%);
        /*   clip-path: polygon(75% 0, 0% 0, 25% 100%, 100% 100%); */
        display: block;
        /* position: absolute; */
        /*top: 0;
        left: 0; */
        /* margin-left: -32rem; */
        z-index: 5; /* or whatever floats it above the photo */
    }

    .auto-repair-page .flex-block img {
        max-width: 490px;
        height: auto;
    }

    .auto-repair-page .list_class h4 {
        font-size: 1.1em;
    }


    .piston-flex-row {
        display: flex;
        flex-direction: row;
        justify-content: center; /* Example: center the whole group */
        align-items: flex-start; /* Align to top */
        width: 850px; /* Example fixed width for container */
        height: 22.5rem;
       /* border: 2px dashed blue; */
        margin: 50px auto; /* Center the container for visibility */
       /* overflow: hidden; */ /* Important if items extend visually beyond container */
        position: relative; /* Establish stacking context if needed for children, though z-index often works with flex items directly */
    }


    .engine-flex-row {
        display: flex;
        flex-direction: row;
        justify-content: center; /* Example: center the whole group */
        align-items: flex-start; /* Align to top */
        width: 850px; /* Example fixed width for container */
        height: 22.5rem;
       /* border: 2px dashed blue; */
        margin: 50px auto; /* Center the container for visibility */
        /*overflow: hidden; *//* Important if items extend visually beyond container */
        position: relative; /* Establish stacking context if needed for children, though z-index often works with flex items directly */
    }

    /* Base styles for all flex items */
    .auto-repair-page .flex-item {
        padding: 1rem;
        font-weight: bold;
      /*  border: 2px solid rgba(0,0,0,0.5); */
        flex-shrink: 0; /* Important: don't let them shrink from their base size */
        flex-grow: 0;

        /* --- Crucial for z-index to work: make them positioned --- */
        position: relative; /* This allows z-index to apply */
    }

    /* Reordering the flex items using 'order' */
    .auto-repair-page .flex-block{
        /* order: 1; */
        /* width: 300px; */ /* Example base width */
        /* height: 200px; */
        /*background-color: rgba(255, 99, 71, 0.8); */ /* Tomato, semi-transparent */
        z-index: 5; /* Highest z-index */

        /* Shift left to overlap the next item */
        left: 50px; /* Moves it 50px to the right of its original position, causing overlap */
                    /* Think: pushes its "content box" 50px to the right, but its bounding box for flex is still where it was */
    }

    .piston-flex-row .flex-block {
        order: 3;
        left: -28rem;
        padding: 0.6rem 0 0.1rem 0;
    }

    .engine-flex-row .flex-block {
        order: 1;
        left: 12rem;
        padding: 0.4rem 0 0.1rem 0;
    }

    .auto-repair-page .slant-cover {
        order: 2;
        width: 22rem; /* Example base width */
        height: 22rem;
        /* background-color: rgba(60, 179, 113, 0.8); *//* MediumSeaGreen, semi-transparent */
        z-index: 10; /* Middle z-index */
    }

    .piston-flex-row .slant-cover {
        left: -20.5rem;
        top: -0.5rem;
        background-color: #efefef;
    }

    .engine-flex-row .slant-cover {
        left: 4.6rem;
        top: -0.5rem;
        background-color: #efefef;        
    }

    .auto-repair-page .list_class {
        /* order: 3; */
       /* width: 350px; *//* Example base width */
       /* height: 220px; */
       /* background-color: rgba(255, 215, 0, 0.8);*/ /* Gold, semi-transparent */
        z-index: 15; /* Lowest z-index */

        /* max-width: 0rem; */

        /* Shift left to overlap the slant-cover */
        /*left: -100px; *//* Moves it 100px to the left, pulling it OVER the slant-cover */
    }

    /* list class are bulleted words */
    .piston-flex-row .list_class {
        order: 1;
        left: 0;
        /*padding: 2rem 0rem 3rem 0rem; */       
    }

    .engine-flex-row .list_class {
        order: 3;
        left: -11.5rem;
        padding: 2rem 0rem 3rem 0rem;
    }

}





/* Our Story */
/* --- Media Query for Desktop --- */
@media (min-width: 768px) { 
    .our-story-page main {
        /*max-width: 850px; */
        max-width: 55rem;
        margin-left: auto;
        margin-right: auto;
    }

    .our-story-row {
        width:100%;
        max-width: 55rem;
        display: flex;
        flex-direction: row;
    }

    .our-story-row-one {
        width:102%;
        max-width: 55rem;
        display: flex;
        flex-direction: row;     
    }

    .our-story-column {
        justify-content: space-between; /*makes first obj top, second at bottom */
        width:100%;
        max-width: 25rem;
        display: flex;
        flex-direction: column;
        padding-left: 1.1rem;
    }

    .our-story-column .cjw-div {
        padding: 0 0 0 0;
    }

    .our-story-column .chrys-div {
        padding: 0 0 0 0;
        text-align: left;
        margin-left: -2rem;
        margin-bottom: -0.4rem;
    }

    .our-story-column-two {
        width:100%;
        max-width: 25rem;
        display: flex;
        flex-direction: column;
        padding: 4rem 0 0 0;
    }

    .our-story-column-two .image-group {
        padding-left: 2rem;
        width: 26rem;
        margin-top: -0.3rem; /* raise or lower second and third gen img */
    }

    .our-story-column-two h6 {
        max-width: 22rem;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.4;
        /*margin-top: -0.2px; */
    }

    .our-story-row .text-group {
        width:100%;
        max-width: 24rem;
        display: flex;
        flex-direction: row;
    }

    .text-group p.our-story {
        margin-top: 0.7rem;
        margin-bottom: 0.2rem;
    }

    .our-story-page p.buffer {
        margin-top: 1rem;
    }


    .towing-page .towing-padding {
        display: block;
        /* background: red; */
        height: 2rem;
        width: 100%;
    }

    .towing-flex-row {
        width:100%;
        max-width: 55rem;
        display: flex;
        flex-direction: row;  
        margin-left: auto;
        margin-right: auto;
        margin-bottom: -1rem;    
    }

    .towing-flex-column {
        justify-content: space-between; /*makes first obj top, second at bottom */
        width:100%;
        max-width: 27rem;
        display: flex;
        flex-direction: column;
        padding: 0 0 0 0;
        /*border: dotted 3px green; */
    }

    .towing-page .list_class h4 {
        font-size: 1.2em;
        padding: 0;
        margin-left: -1rem;
    }

    .towing-page .list_class h5 {
        font-size: 1em;
        letter-spacing: 0.3px;
    }

}