.table-striped > tbody > tr:nth-child(even) > * {
  --t4-table-color-type: var(--t4-table-striped-color);
  --t4-table-bg-type: rgba(0, 0, 0, 0);
}

@media screen and (max-width: 768px) {
  div.page-header {
    margin-top: 1rem !important;
  }
}

@media (min-width: 768px) {
  .t4-main-body {
    padding-top: 0;
    padding-bottom: 3rem;
  }
}

.t4-section.t4-breadcrumbs .breadcrumb {
  background: transparent;
  border-radius: 0;
  margin: 0;
  font-size: 16px;
}

.hero-fade-bg {
  position: relative;
  min-height: 500px; 
  padding: 80px 12% 80px 12% !important; 
  box-sizing: border-box;
  
  /* 1. Traps the blurred edges inside the section so they don't leak out */
  overflow: hidden; 
}

/* This layer handles the background image, gradient, and blur */
.hero-fade-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  background: 
    linear-gradient(
      to bottom, 
      rgba(34, 83, 156, 0.6) 0%,    
      rgba(34, 83, 156, 0.4) 40%,   
      #22539c 100%                  
    ), 
    url('/images/background/Blur_IMG_20260709_131439.jpg') no-repeat center/cover !important;
  
  pointer-events: none;
  z-index: 0;
}

/* 3. Forces your HTML row, text, and module to sit safely on top of the blur */
.hero-fade-bg > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   1. IMAGE PROPPORTIONS (UNTOUCHED)
   ============================================================ */
.your-slider-class img,
.swiper-slide img, 
.slick-slide img {
    width: 100% !important;
    height: 450px !important; 
    object-fit: contain !important; 
    object-position: center !important; 
    background-color: transparent !important; 
}

/* ============================================================
   2. EXPAND THE SLIDER BOTTOM ONLY
   ============================================================ */
.swiper,
.swiper-container,
.your-slider-class {
    padding-bottom: 40px !important; /* Creates a clean gap at the bottom */
    overflow: visible !important;   /* Allows scrollbar to move into the padding */
}

/* ============================================================
   3. LOWER THE SCROLLBAR SAFELY (SCOPED TO THE SLIDER ONLY)
   ============================================================ */
/* By putting the slider classes first, this will NEVER touch your header */
.swiper .swiper-scrollbar,
.swiper-container [class*="scrollbar"],
.your-slider-class [class*="scrollbar"] {
    bottom: 5px !important;        
    position: absolute !important;
}


/* Container spacing */
.brand-showcase {
    text-align: center;
    padding: 30px 15px;
    width: 100%;
}

/* Style the "Powered By" text */
.brand-title {
    color: #ffffff !important;
    font-size: 20px;
    margin-bottom: 25px;
}

/* THE WHITE CARD WITH ENHANCED SHADOW */
.brand-card {
    display: flex !important;
    justify-content: space-around !important; 
    align-items: center !important;
    gap: 20px !important;               
    flex-wrap: wrap !important;         
    
    background-color: #ffffff !important;
    border-radius: 16px !important;     
    padding: 35px 40px !important;      
    
    max-width: 1100px;                  
    margin: 0 auto !important;          
    
    /* PREMIUM MODERN DROP SHADOW */
    /* This combines a deep soft blur with a tighter dark base for a realistic 3D lift */
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.50), 
                0 5px 15px rgba(0, 0, 0, 0.08) !important; 
}

/* 1. THE EQUALIZER: This creates identical invisible boxes for every logo */
.brand-item {
    flex: 1 1 160px !important;   /* Forces slots to distribute width equally */
    max-width: 180px !important;  /* Caps the maximum width so logos don't stretch too far */
    height: 65px !important;      /* Strict uniform height for the logo space */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 2. FORCE IMAGES TO SCALE SAFELY INSIDE THEIR FIXED SLOTS */
.brand-card img {
    max-width: 100% !important;   /* Prevents wide logos (like Yanmar) from breaking out */
    max-height: 100% !important;  /* Prevents tall logos from breaking out */
    width: auto !important;        /* Maintains perfect original proportions */
    height: auto !important;       /* Maintains perfect original proportions */
    object-fit: contain !important;/* Ensures absolutely no cropping happens */
    display: block !important;
}

/* Mobile responsive layout */
@media (max-width: 768px) {
    .brand-card {
        padding: 25px 20px !important;
    }
    .brand-item {
        flex: 1 1 120px !important; /* Slightly smaller invisible boxes on smartphones */
        height: 50px !important;
    }
}





/* Increase Main Navbar Text Size */
.t4-megamenu .navbar-nav .nav-link,
.t4-navbar .navbar-nav .nav-link {
    font-size: 18px !important; /* Change 18px to whatever size looks best to you */
    font-weight: 500 !important; /* Optional: Makes it slightly sharper/bolder */
}


/* 1. Base link state - updated to include a hidden border and transition timer */
.navbar-nav .nav-link {
    color: #333333 !important;
    padding-bottom: 12px !important;
    /* Keeps a invisible 4px bar here so the text doesn't jitter when the real bar appears */
    border-bottom: 4px solid transparent !important;
    /* Smoothly fades both the text color and the line color over 0.3 seconds */
    transition: color 0.3s ease-in-out, border-bottom-color 0.3s ease-in-out !important;
}

/* 2. Active & Hover states - updated to smoothly morph the border color */
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item.current .nav-link,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.current,
.navbar-nav .nav-link:hover {
    color: #0c63b0 !important;
    /* Changes just the color of the border, triggering the smooth transition fade */
    border-bottom-color: #0c63b0 !important;
}


/* =========================================================
   COMPACT SCROLL-TRIGGERED HEADER ANIMATION
   ========================================================= */

/* 1. Base Header State (Top of Page - Compact) */
body #t4-header, 
body .t4-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1050 !important;
    
    /* Reduced top/bottom padding at page top */
    padding-top: 12px !important;
    padding-bottom: 12px !important;

    background-color: rgba(255, 255, 255, 1) !important;
    backdrop-filter: blur(0px) !important;
    -webkit-backdrop-filter: blur(0px) !important;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;

    transition: padding 0.4s ease-in-out, 
                background-color 0.4s ease-in-out, 
                backdrop-filter 0.4s ease-in-out, 
                box-shadow 0.4s ease-in-out !important;
}

/* 2. Scrolled State (Ultra-slim on scroll) */
body #t4-header.scrolled, 
body .t4-header.scrolled {
    /* Extra slim padding when scrolled */
    padding-top: 5px !important;
    padding-bottom: 5px !important;

    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}