/* File Path: /src/css/banner-section.css */

/* ============================================================ */
/* 🚀🚀🚀 ENHANCED MANUAL BANNER ADJUSTMENT CONTROLS 🚀🚀🚀 */
/* PURPOSE: Allows manual adjustment of banner height and text box
            positioning on template pages to match index.html. */
/* INSTRUCTIONS: 
   1. Adjust --universal-banner-height to set banner height (e.g., 100vh, 80vh).
   2. Adjust --template-content-position-top/bottom/left/right (in %) to align text box (h1, p, buttons) with index.html.
   3. Use only one or two position properties (e.g., top OR bottom, left OR right) to avoid conflicts.
   4. Test changes in browser, comparing heavy-duty-towing.html to index.html.
   5. Example: Set --template-content-position-top: -15% to match index.html's slide positioning.
   6. Save and refresh to see changes. */
/* 💡 Console Log: Manual controls provided for banner height and template text box alignment */
:root {
  /* --- UNIVERSAL BANNER HEIGHT CONTROL --- */
  /* Controls height for ALL banners (index and templates) */
  --universal-banner-height: 100vh !important; /* Adjust for banner height (default matches index.html) */
  --universal-banner-padding: 250px 0 !important; /* Format: vertical-padding horizontal-padding */


  --universal-banner-padding-horizontal: 15px !important; /* Matches .container padding for horizontal spacing */

    /* --- TEMPLATE-ONLY TEXT BOX POSITIONING --- */
  /* Adjust these pixel values to move the text box on all template pages. */
  --template-horizontal-offset: -50px !important; /* Negative moves left, positive moves right */
  --template-vertical-offset: 0px !important;   /* Negative moves up, positive moves down */


  /* --- TEMPLATE-ONLY TEXT BOX POSITIONING --- */
  /* Aligns text box (h1, p, buttons) on template pages to match index.html */
  --template-content-max-width: 58.3333% !important; /* Matches Bootstrap .col-xxl-7 (7/12 of container) */
  --template-content-position-top: -15% !important; /* Matches index.html slide default; negative moves up */
  --template-content-position-right: auto !important; /* Set to percentage (e.g., 10%) to move left */
  --template-content-position-bottom: -100% !important; /* Matches index.html slide default; negative moves up */
  --template-content-position-left: 0% !important; /* Matches index.html slide default; positive moves right */
}















/* ============================================================ */
/* 🚀 Block Separator: Page-Specific ID Grouping for Template Pages */
/* PURPOSE: Provides manual positioning adjustments for .banner__content
            on specific template pages to match index.html alignment. */
/* NOTES: Targets only listed pages to avoid affecting index.html.
          Uses :root variables for consistency with index.html's --content-position-* approach.
          Adjust variables in :root to fine-tune positioning. */
/* 💡 Console Log: Template page text box alignment adjusted to match index.html */
#banner-section-heavy-duty .template-banner .banner__content,
#banner-section-medium-duty .template-banner .banner__content,
#banner-section-motorcycle .template-banner .banner__content,
#banner-section-rv .template-banner .banner__content,
#banner-section-fuel-fluid .template-banner .banner__content,
#banner-section-jump-start .template-banner .banner__content,
#banner-section-flat-tire .template-banner .banner__content,
#banner-section-vehicle-lockout .template-banner .banner__content,
#banner-section-accident .template-banner .banner__content,
#banner-section-winching .template-banner .banner__content,
#banner-section-secondary .template-banner .banner__content,
#banner-section-police-municipal .template-banner .banner__content,
#banner-section-flatbed .template-banner .banner__content,
#banner-section-wheel-lift .template-banner .banner__content,
#banner-section-dollies .template-banner .banner__content,
#banner-section-hourly-labor .template-banner .banner__content,
#banner-section-storage .template-banner .banner__content {
  max-width: var(--template-content-max-width); /* Matches Bootstrap .col-xxl-7 (58.3333%) */
  position: relative;
  top: var(--template-content-position-top); /* Controlled by :root, default -15% */
  right: var(--template-content-position-right); /* Controlled by :root, default auto */
  bottom: var(--template-content-position-bottom); /* Controlled by :root, default -800% */
  left: var(--template-content-position-left); /* Controlled by :root, default 0% */
  z-index: 3 !important; /* Preserves stacking order */
  display: flex; /* Ensures Flexbox for responsive alignment */
  flex-direction: column; /* Stacks content vertically */
  align-items: flex-start; /* Aligns content to the left */
  text-align: left; /* Ensures text alignment */
  margin: 0; /* Overrides any default margins to rely on position variables */
  /* 💡 Console Log: Applied positioning for template page ID: <page-id> */
}

















/*CSS Table Of Content Starts Here*/
/*============================================
# Global Banner Styles (Correct Architecture)
# Banner Image & Overlay
# Image Zoom Animation
# Slider Navigation & Pagination
# Banner Content (Universal Height & Alignment Control) - UNIFIED CONTROLLER
# Banner Variations (Preserved)
# Template Banner Styles (300+ Pages) - PRESERVED & MODIFIED
    - Template Banner Container
    - Template Banner Content & Positioning
    - Template Page-Specific ID Grouping
    - Template Text Animation
# Global Button Styles - PRESERVED
    - Call-to-Action Buttons (Forced)
    - Arrow Navigation Buttons
# Global Responsive Styles - UPDATED
    - Screens up to 1399px
    - Screens up to 1199px
    - Screens up to 991px
    - Screens up to 767px
    - Screens up to 575px
    - Screens up to 375px
    - Screens up to 374px (Smallest Devices)
============================================*/
/*CSS Table Of Content Ends Here*/

/* ============================================================ */
/* 💡 Section Divider: Global Banner Styles (Correct Architecture) */
/* Purpose: Defines the banner container. Height is NOT set here.
            The container will grow to fit the content's padding. */
/* ============================================================ */
.banner__section {
  overflow: hidden; /* Prevents child elements (like zoomed images) from spilling out */
  position: relative; /* Establishes a positioning context for child elements */
  display: flex; /* Ensures Flexbox layout for responsiveness */
  flex-direction: column; /* Stacks children vertically */
}

.banner__slider {
  width: 100%; /* Ensures the slider takes up the full width of the banner */
  height: 100%; /* Ensures the slider takes up the full height of the banner */
  display: flex; /* Enables Flexbox for slider alignment */
}

/* ============================================================ */
/* 💡 Section Divider: Banner Image & Overlay */
/* Purpose: Styles for the background image and its dark overlay for text readability. */
/* Notes: Applied to all banner images for a consistent look and feel. */
/* ============================================================ */
.banner__image,
.imagetwo,
.imagethree {
  position: absolute; /* Positions the image within the .banner__section context */
  top: 0; /* Aligns image to the top edge */
  left: 0; /* Aligns image to the left edge */
  width: 100%; /* Ensures image covers the full width */
  height: 100%; /* Ensures image covers the full height */
  background-size: cover; /* Scales the image to cover the entire container */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents the image from tiling */
  z-index: -2; /* Places the image behind the content */
}

.banner__image::before,
.imagetwo::before,
.imagethree::before {
  content: ""; /* Required to generate the pseudo-element */
  position: absolute; /* Positions the overlay relative to the image container */
  top: 0; /* Aligns overlay to the top edge */
  left: 0; /* Aligns overlay to the left edge */
  width: 100%; /* Ensures overlay covers the full width */
  height: 100%; /* Ensures overlay covers the full height */
  background: rgba(0, 0, 0, 0.5); /* Color: rgba(0, 0, 0, 0.5) - Semi-transparent black overlay for text contrast */
  z-index: -1; /* Places the overlay between the image and the content */
}



/* ============================================================ */
/* 💡 Section Divider: Image Zoom Animation */
/* Purpose: Defines a slow zoom-in effect for the active slide's background image. */
/* Notes: The animation is triggered by SwiperJS adding the .swiper-slide-active class. */
/* ============================================================ */
.banner__image,
.imagetwo,
.imagethree {
  transform: scale(1); /* Initial state: no zoom */
  transition: all 8s ease-out 0s; /* Defines a slow 8-second zoom animation */
}

.swiper-slide-active .banner__image,
.swiper-slide-active .imagetwo,
.swiper-slide-active .imagethree {
  transform: scale(1.12); /* Zooms the image to 112% when the slide is active */
}



/* ============================================================ */
/* 💡 Section Divider: Slider Navigation & Pagination */
/* Purpose: Styles for the arrow buttons and pagination dots. */
/* Notes: These controls are part of the SwiperJS integration. */
/* ============================================================ */
.banner__section .arry__button {
  position: absolute; /* Positions buttons relative to the banner */
  top: 50%; /* Vertically centers the button container */
  right: 50px; /* Positions buttons from the right edge */
  transform: translateY(-50%); /* Fine-tunes vertical centering */
  z-index: 5; /* Ensures buttons are above all other content */
  display: flex; /* Enables flexbox for button alignment */
  flex-direction: column; /* Stacks buttons vertically */
  gap: 10px; /* Adds space between the up and down arrow buttons */
}

.banner__section .arry__button .arry__prev,
.banner__section .arry__button .arry__next {
  width: 51px; /* Sets a fixed width for the buttons */
  height: 51px; /* Sets a fixed height for the buttons */
  border-radius: 100%; /* Creates a circular shape */
  border: 1px solid var(--theme); /* Color: Variable (Theme Color) - Sets the border color */
  background: transparent; /* Color: Transparent - Makes background see-through */
  transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
  display: flex; /* Enables flexbox for icon centering */
  align-items: center; /* Centers icon vertically */
  justify-content: center; /* Centers icon horizontally */
}

.banner__section .arry__button .arry__next {
  background-color: var(--theme); /* Color: Variable (Theme Color) - Fills the next button with the theme color */
}

.banner__section .arry__button button:hover {
  background-color: var(--theme); /* Color: Variable (Theme Color) - Changes background on hover */
  border-color: var(--theme); /* Color: Variable (Theme Color) - Changes border on hover */
}

.banner__section .arry__button i {
  color: #ffffff; /* Color: #FFFFFF (White) - Sets the icon color to white */
}

.banner__section .banner__pagination__wrapper {
  position: absolute; /* Positions the pagination wrapper relative to the banner */
  z-index: 2; /* Places pagination above the image but below content */
  bottom: 10%; /* Positions from the bottom edge */
  left: 50%; /* Horizontally centers the wrapper */
  transform: translateX(-50%); /* Fine-tunes horizontal centering */
}

.banner__section .banner-pagination {
  display: flex; /* Enables Flexbox for pagination layout */
  gap: 8px; /* Adds space between pagination bullets */
}

.banner__section .banner-pagination .swiper-pagination-bullet {
  width: 20px; /* Sets the default width of pagination bullets */
  height: 8px; /* Sets the height of pagination bullets */
  border-radius: 20px; /* Creates a pill shape */
  background-color: #ffffff; /* Color: #FFFFFF (White) - Default bullet color */
  opacity: 1; /* Ensures bullets are fully visible */
  transition: all 0.6s ease; /* Smooth transition for the active state */
}

.banner__section .banner-pagination .swiper-pagination-bullet:hover {
  background: #ffffff; /* Color: #FFFFFF (White) - Ensures color remains white on hover */
}

.banner__section .banner-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 30px; /* Widens the bullet when its corresponding slide is active */
  background-color: var(--theme); /* Color: Variable (Theme Color) - Active bullet color */
}






/* ======================================================================================================= */
/* 🚀🚀🚀 UNIVERSAL HEIGHT & ALIGNMENT CONTROLLER 🚀🚀🚀 */
/* ======================================================================================================= */
/* 💡 Section Divider: Banner Content (Universal Controller) */
/* PURPOSE: This ONE rule now controls the height AND alignment for ALL banners,
            including index.html and all template pages, ensuring they are identical. */
/* ============================================================ */
/* 💡 Console Log: Banner height is controlled by --universal-banner-padding variable */
/* ============================================================ */
.banner__content {
  position: relative;
  z-index: 1;
  padding: var(--universal-banner-padding); /* Controlled by :root variable for consistent height */
  transition: padding 0.3s ease-in-out;
  /* Alignment properties to apply to ALL banners for consistency */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Aligns content to the left */
  text-align: left;
  max-width: 800px; /* Constrains the width of the content box */
  margin: 0 auto; /* Centers the constrained content box */
}

.banner__content h1 {
  text-transform: capitalize;
  color: #ffffff; /* Color: #FFFFFF (White) - Heading text color */
  line-height: 92px;
  margin-bottom: 20px;
}

.banner__content p {
  color: #ffffff; /* Color: #FFFFFF (White) - Paragraph text color */
  line-height: 28px;
}

.banner__content .banner__button {
  margin-top: 30px;
  gap: 20px;
  display: flex;
  align-items: center;
}

/* ============================================================ */
/* 💡 Block Separator: Template Banner Alignment Fix */
/* Purpose: Compensates for HTML structural difference in template pages
            (no Bootstrap grid column) to match index.html alignment. */
/* Notes: Applies max-width and margin to mimic .col-xxl-7.col-lg-7 constraints
          and uses :root variables for user-controlled positioning. */
/* ============================================================ */
/* 💡 Console Log: Template banner content alignment adjusted to match index.html */
/* ============================================================ */
.template-banner .banner__content {
  max-width: 616px; /* Matches Bootstrap .col-xxl-7 (approx. 7/12 of 1140px container) */
  margin-left: calc(50% - 308px + var(--template-horizontal-offset)); /* Centers and applies user-controlled offset */
  margin-top: var(--template-vertical-offset); /* Applies user-controlled vertical offset */
  /* Preserve existing styles */
  z-index: 3 !important; /* Preserving unique z-index */
}

/* ======================================================================================================= */
/* 🚀🚀🚀 END OF UNIVERSAL CONTROLLER 🚀🚀🚀 */
/* ======================================================================================================= */



/*
 ============================================================
 💡 Section Divider: Banner Variation: Banner Two
 Purpose: Styles for an alternative banner layout.
 Notes: Preserved from the original file for pages using the .banner__two variation.
 ============================================================
*/
/*
.banner__two {
  background: url(../img/banner/banner4.jpg) no-repeat center center;
  background-size: cover;
  position: relative;
}

.banner__two::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

.banner__two .banner__content {
  padding: var(--universal-banner-padding);
  max-width: 650px;
  margin: 0 auto;
}




*/
/* ============================================================ */
/* 💡 Section Divider: Banner Variation: Breadcrumb */
/* Purpose: Styles for the breadcrumb banner layout. */
/* Notes: Preserved for pages using the .breadcumd__banner class. Features a fixed background. */
/* ============================================================ */
.breadcumd__banner {
  background: url(../img/banner/breadcumd-bg.jpg) no-repeat center center; /* Color: None - Image-based background */
  background-size: cover;
  background-attachment: fixed;
  position: relative;
}

.breadcumd__banner::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Color: rgba(0, 0, 0, 0.5) - Overlay for text contrast */
}

.breadcumd__banner .breadcumd__wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  position: relative;
  padding: 150px 0;
}

.breadcumd__banner .left__content {
  color: #ffffff; /* Color: #FFFFFF (White) - Text color */
  font-weight: 600;
}

.breadcumd__banner .right__content {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcumd__banner .right__content li {
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--theme); /* Color: Variable (Theme Color) - Active breadcrumb item */
}

.breadcumd__banner .right__content li:not(:last-child) {
  margin-right: 10px;
  color: #ffffff; /* Color: #FFFFFF (White) - Inactive breadcrumb items */
}

.breadcumd__banner .right__content li a {
  color: #ffffff; /* Color: #FFFFFF (White) - Link text color */
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.breadcumd__banner .right__content li a:hover {
  color: var(--theme); /* Color: Variable (Theme Color) - Hover color */
}

/* ============================================================ */
/* 💡 Section Divider: Template Banner Styles (300+ Pages) - CORRECTED */
/* Purpose: This rule now ONLY contains styles UNIQUE to template pages, like animations. */
/* Notes: !!! HEAVY COMMENT ALERT !!! All conflicting height and alignment styles have been moved to the universal controller or alignment fix block. */
/* ============================================================ */
.template-banner .banner__content {
  /* Animation styles preserved */
  z-index: 3 !important; /* Preserving unique z-index */
  /* ============================================================ */
  /* 💡 Block Separator: Animation and Visibility Enforcement */
  /* Purpose: Forces flow-in animation with random angles for text and instant button visibility */
  /* Notes: Applies animation to h1 and p on page load with random entry angles using data attributes. 
           Forces button visibility with high z-index and opacity 1. 
           Removes scroll-dependent triggers to fix glitches. */
  /* ============================================================ */
}

.template-banner .banner__content h1,
.template-banner .banner__content p {
  opacity: 0; /* Start hidden */
  animation: flowInRandom 0.8s ease-out forwards; /* Random angle flow-in animation on load */
  animation-delay: 0s !important; /* No delay to ensure immediate start */
  animation-fill-mode: forwards !important; /* Enforce final state */
  /* Use data-angle attribute in HTML (e.g., data-angle="45") for random angle per element */
}

.template-banner .banner__content .banner__button {
  opacity: 1 !important; /* Force instant visibility */
  visibility: visible !important; /* Ensure buttons are not hidden */
  z-index: 4 !important; /* Above other content */
  margin-top: 30px !important; /* Ensures buttons are below text contents; Color: None - Spacing */
  animation: none; /* Remove any animation delays */
  transition: none; /* Prevent transition delays */
}

/* ============================================================ */
/* 💡 Block Separator: Animation Keyframes */
/* Purpose: Defines the flow-in animation with random angles for text contents */
/* Notes: Animates text from a random angle (via data-angle) to original position with fading in. 
         Applies to all template pages with .template-banner class. 
         Random angles are set via HTML data-angle attributes (e.g., 0deg to 360deg). */
/* ============================================================ */
@keyframes flowInRandom {
  0% {
    transform: translate(-50px) rotate(var(--angle, 0deg)); /* Start off-screen with random angle */
    opacity: 0; /* Start invisible */
  }
  100% {
    transform: translate(0) rotate(0deg); /* End at original position and upright */
    opacity: 1; /* Fully visible */
  }
}





/* ============================================================ */
/* 💡 Section Divider: Global Button Styles */
/* Purpose: Defines the appearance of all CTA and navigation buttons. */
/* Notes: These styles are forced with high specificity to ensure consistency. */
/* ============================================================ */
n.banner__button {
  display: flex; /* Enables Flexbox for button layout */
  justify-content: flex-start; /* Aligns buttons to the left */
  align-items: flex-start; /* Aligns buttons to the start of the cross axis */
  gap: 15px; /* Adds space between buttons */
  flex-wrap: wrap; /* Allows buttons to wrap onto the next line on small screens */
  width: 100%; /* Ensures the container takes full width for proper alignment */
  z-index: 4; /* Keeps buttons above other content */
  margin-top: 30px; /* Adds space above the button group */
}

/* 💡 Block Separator: Call-to-Action Buttons (Forced) */
/* Purpose: Ensures the "View Services" and "Contact Us" buttons look identical everywhere. */
/* ============================================================ */
body .banner__button .cmn--btn,
body .banner__button .cmn--btn2 {
  padding: 12px 24px !important; /* Sets padding for button size */
  font-size: 1rem !important; /* Sets font size for readability */
  font-weight: 700 !important; /* Sets font to bold */
  border-radius: 5px !important; /* Applies slightly rounded corners */
  transition: all 0.3s ease !important; /* Smooth transition for all properties */
  display: inline-flex !important; /* Enables Flexbox for internal alignment */
  align-items: center !important; /* Centers content vertically */
  justify-content: center !important; /* Centers content horizontally */
  text-decoration: none !important; /* Removes underline from links */
  cursor: pointer !important; /* Shows a pointer on hover */
  text-transform: capitalize !important; /* Capitalizes button text */
}

/* Primary Button: "View Services" */
body .banner__button .cmn--btn {
  background-color: #c6c4c9d8 !important; /* Color: #2e0c5e (Purple) - Primary button background */
  color: #ffffff !important; /* Color: #FFFFFF (White) - Text color */
  border: 2px solid #facc15 !important; /* Color: #facc15 (Yellow) - Border color */
}

body .banner__button .cmn--btn:hover {
  background-color: #facc15 !important; /* Color: #facc15 (Yellow) - Hover background color */
  color: #f5f4f7 !important; /* Color: #2e0c5e (Purple) - Hover text color */
  border-color: #ffffff !important; /* Color: #2e0c5e (Purple) - Hover border color */
  transform: translateY(-2px) !important; /* Lifts the button slightly on hover */
}

/* Secondary Button: "Contact Us" */
body .banner__button .cmn--btn2 {
  background-color: transparent !important; /* Color: Transparent - No background fill */
  border: 2px solid #ffffff !important; /* Color: #FFFFFF (White) - Border color */
  color: #ffffff !important; /* Color: #FFFFFF (White) - Text color */
}

body .banner__button .cmn--btn2:hover {
  background-color: #ffffff !important; /* Color: #FFFFFF (White) - Hover background color */
  color: #2e0c5e !important; /* Color: #2e0c5e (Purple) - Hover text color */
  transform: translateY(-2px) !important; /* Lifts the button slightly on hover */
}

/* ============================================================ */
/* 🚀 INJECTED RULE: Force White Button Fonts on Template Pages 🚀 */
/* Purpose: Guarantees that the text inside buttons on template
            pages is white, overriding any other conflicting styles. */
/* ============================================================ */
.template-banner .banner__button .cmn--btn span,
.template-banner .banner__button .cmn--btn2 span {
  color: #ffffff !important; /* Color: #FFFFFF (White) - FORCED */
}























/* ============================================================ */
/* 💡 Section Divider: Global Responsive Styles - FINAL RESTORED VERSION */
/* PURPOSE: Reverts all banner adjustments to align with the site's overlay menu architecture. */
/* ============================================================ */
@media (max-width: 1399px) {
  .banner__content {
    padding: 180px 0; /* Original height */
  }
  .banner__content h1 {
    font-size: 56px;
    line-height: 80px;
  }
}

@media (max-width: 1199px) {
  .banner__content {
    padding: 140px 0; /* Original height */
  }
  .banner__content h1 {
    font-size: 48px;
    line-height: 65px;
  }
}

@media (max-width: 991px) {
  .banner__section .arry__button {
    display: none;
  }
  .banner__content {
    padding: 110px 0; /* Original height */
  }
  .banner__content h1 {
    font-size: 36px;
    line-height: 50px;
    margin-bottom: 25px;
  }
}

@media (max-width: 767px) {
  .banner__content {
    padding: 90px 0; /* Original height */
  }
  .breadcumd__banner .breadcumd__wrapper {
    gap: 20px;
  }
}

@media (max-width: 575px) {
  .banner__content {
    padding: 60px 0; /* Original height */
  }
  .banner__content h1 {
    font-size: 28px;
    line-height: 38px;
    margin-bottom: 20px;
  }
  .breadcumd__banner .breadcumd__wrapper .left__content {
    font-size: 24px;
  }
}

@media (max-width: 374px) {
  .template-banner .banner__content h1 {
    font-size: 1.4rem !important;
    line-height: 1.4 !important;
    margin-bottom: 15px !important;
  }
  .template-banner .banner__content p {
    font-size: 0.8rem !important;
    display: none;
  }
  .banner__button {
    gap: 8px !important;
    margin-top: 20px !important;
  }
  body .banner__button .cmn--btn,
  body .banner__button .cmn--btn2 {
    padding: 8px 12px !important;
    font-size: 0.75rem !important;
  }
}









/* ============================================================ */
/* 🚨 PRESERVED RESPONSIVE BREAKPOINT 🚨 */
/* 💡 Section Divider: Styles for Smallest Devices (374px down to 200px) */
/* Purpose: Ensures the banner is usable on extremely narrow screens. */
/* Notes: This is critical for accommodating older or smaller mobile devices. */
/* ============================================================ */
@media (max-width: 374px) {
  .banner__section {
    min-height: 60vh; /* Reduces min-height to prevent content being cut off vertically */
  }

  .template-banner .banner__content h1 {
    font-size: 1.4rem !important; /* Drastically reduce font size for readability */
    line-height: 1.4 !important; /* Adjust line height for smaller text */
    margin-bottom: 15px !important; /* Reduce space below heading */
  }

  .template-banner .banner__content p {
    font-size: 0.8rem !important; /* Make paragraph text smaller */
    display: none; /* Hides the paragraph on the smallest screens to save space */
  }

  .banner__button {
    gap: 8px !important; /* Reduce space between buttons */
    margin-top: 20px !important; /* Reduce space above buttons */
  }

  body .banner__button .cmn--btn,
  body .banner__button .cmn--btn2 {
    padding: 8px 12px !important; /* Smaller padding for buttons to fit */
    font-size: 0.75rem !important; /* Smaller font for buttons */
  }
}