/* Smooth transitions for all reusable effects */
.animate {
  transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out; /* iOS Safari */
}
.animate2 {
  transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
}

/* Button hover grow/shrink */
.btn-animate {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  -webkit-transition: -webkit-transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-animate2 {
  transition: transform 0.25s ease;
  -webkit-transition: -webkit-transform 0.25s ease;
}
.btn-animate:hover {
  transform: translateY(-3px) scale(1.05);
  -webkit-transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.btn-animate2:hover {
  transform: translateY(-3px) scale(1.05);
  -webkit-transform: translateY(-3px) scale(1.05);
}

/* Glow effect on hover */
.hover-glow {
  transition: box-shadow 0.3s ease;
  -webkit-transition: box-shadow 0.3s ease;
}
.hover-glow:hover {
  box-shadow: 0 0 12px rgba(0, 150, 255, 0.6);
}

/* Slight scale on hover */
.hover-scale {
  transition: transform 0.3s ease;
  -webkit-transition: -webkit-transform 0.3s ease;
}
.hover-scale:hover {
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
}

/* Rotate animation on hover */
.hover-rotate {
  transition: transform 0.3s ease;
  -webkit-transition: -webkit-transform 0.3s ease;
}
.hover-rotate:hover {
  transform: rotate(3deg);
  -webkit-transform: rotate(3deg);
}

/* Fade in on hover */
.hover-fade {
  opacity: 0.85;
  transition: opacity 0.3s ease;
  -webkit-transition: opacity 0.3s ease;
}
.hover-fade:hover {
  opacity: 1;
}

/* Pulse animation for CTA buttons */
.pulse {
  animation: pulse 2s infinite;
  -webkit-animation: pulse 2s infinite; /* iOS Safari */
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@-webkit-keyframes pulse {
  0% { -webkit-transform: scale(1); }
  50% { -webkit-transform: scale(1.05); }
  100% { -webkit-transform: scale(1); }
}


 /* Requirement bar */
    .requirement-bar {
      background-color: #e6e6e6;
      height: 40px;
      display: flex;
      align-items: center;
    }

    .requirement-text,
    .inquire-text {
      font-family: 'Manrope', sans-serif;
      font-weight: 400;
      font-size: 15px;
      line-height: 100%;
      color: #000;
      margin: 0;
    }
.inquire-text {
      font-family: 'Manrope', sans-serif;
      font-weight: 400;
      font-size: 15px;
      text-decoration:none;
      line-height: 100%;
      color: #DA2E2E;
      margin: 0;
    }
    .arrow-icon {
      width: 24px;
      height: 24px;
    }
 .arrow-icon2 {
      width: 34px;
      height: 34px;
    }
    /* Navbar */
    .custom-navbar {
      background-color: #FAFAFA;
      height: 120px;
      display: flex;
      align-items: center;
    }

   .custom-navbar .nav-link {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #000;
  padding: 0;
  margin-left: 40px; /* increased gap between links */
  position: relative;
  transition: color 0.3s ease;
}

   .custom-navbar .nav-link {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #000;
  padding: 0;
  margin-left: 40px; /* more gap between links */
  margin-right: 3px;
  position: relative;
  transition: color 0.3s ease;
}

.custom-navbar .nav-link:hover {
  color: #DA2E2E;
}

.custom-navbar .nav-link::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: #DA2E2E;
  transition: width 0.3s ease;
}

.custom-navbar .nav-link:hover::after {
  width: 50px; /* wider dash when hovered */
}

    .navbar-logo {
  height: auto;                 /* keep natural height */
  width: auto;                  /* keep natural width */
  max-height: 120px;             /* control size for navbar */
  max-width: 190px;             /* prevent it from growing too large */
  object-fit: contain;          /* scale without distortion */
  display: block;               /* remove inline gap issues */
}


    /* Get a Quote button */
    .quote-btn {
      background-color: #DA2E2E;
      color: #fff;
      width: 126px;
      height: 44px;
      padding: 16px;
      border: none;
      text-decoration:none;
      font-family: 'Manrope', sans-serif;
      font-size: 16px;
      font-weight: 400;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.3s ease;
    }

    
    /* Mobile responsive styles */

.mobile-controls {
  display: none;
}
/* Mobile Nav Hidden by Default */
.mobile-nav {
  position: fixed;
  top: 0;
  left: -100%;
  width: 80%;
  /* max-width: 300px; */
  height: 100vh;
  background: #fff;
  box-shadow: 2px 0 10px rgba(0,0,0,0.1);
  z-index: 2000;
  transition: left 0.3s ease;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

/* Slide In */
.mobile-nav.active {
  left: 0;
}

/* Slide Out Animation */
.mobile-nav.slide-out {
  left: -100%;
  transition: left 0.3s ease;
}

@media (max-width: 768px) {
.testimonial-left img

 {
  display: none;
}
  /* Requirement Bar */
  .requirement-bar {
    width: 100%;
    max-width: 440px;
    height: 30px;
    /* margin: 24px auto 0; */
    padding: 0 8px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .requirement-text,
  .inquire-text {
    font-size: 10px;
    line-height: 100%;
    text-decoration:none;
    font-weight: 400;
    text-align: center;
  }

  .arrow-icon {
    width: 14px;
    height: 14px;
    margin: 0 6px;
  }

  /* Navbar */
  .custom-navbar {
    height: 70px;
  
  }
.inquire-text{
  color: #DA2E2E;
  text-decoration:none;
}
  .navbar-logo {
    content: url("assets/mobile-new-logo.png");

            width: 60px;
        height: auto;
  }

  .custom-navbar .nav {
    display: none; /* hide desktop nav links */
  }

  .quote-btn {
    width: auto;
    height: 32px;
    padding: 6px 12px;
    font-size: 12px;
  }

  .mobile-controls {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .menu-btn img {
    width: 20px;
    height: 20px;
  }

}
@media (max-width: 768px) {
  .card-carousel {
    margin-top: 80px !important; /* or use top: 80px if you prefer */
    position: relative !important; /* needed for z-index to work */
    z-index: 1 !important; /* lower than arrows */
  }

  #carouselPrev,
  #carouselNext {
    position: relative !important; /* make sure z-index applies */
    z-index: 10 !important; /* higher so arrows are clickable */
  }
}
@media (max-width: 768px) {
  .cta-title {
    font-size: 20px !important;     /* smaller title on mobile */
    line-height: 1.2 !important;    /* adjusted line height for readability */
    margin-bottom: 1rem !important; /* reduced spacing */
    text-align: left !important;  /* optional: center on mobile */
  }

  .cta-subtext {
    font-size: 14px !important;     /* smaller subtext */
    line-height: 1.3 !important;    /* better readability on mobile */
    margin: 0 auto !important;
    text-align: left !important;  /* optional: center subtext */
  }
}
@media (max-width: 768px) {
  .hero-section {
    margin-top: 0;
  }

  /* Red Block */
  .red-block {
    position: relative;   /* no absolute positioning */
    top: 0;
    left: 0;
    transform: none;
    width: 75% !important;
    max-width: 100%;
 padding: 1rem !important;    /* reduced padding */
    text-align: center;
            height: 100%;
  }

.red-block h2 {
  font-size: 20px !important;       /* smaller heading */
  line-height: 1.2 !important;      /* slightly looser than 1.1 for readability */
  padding-bottom: 0.5rem !important;
  width: 100% !important;           /* full width */
  display: block !important;        /* ensures it behaves like a block element */
  text-align: left !important;    /* center text */
}

  .know-more-btn {
    font-size: 12px;      /* smaller button text */
    padding: 0.3rem 0.8rem; /* reduced padding */
    min-width: auto;
  }


  /* Bottom image */
   .bottom-img {
    position: relative !important;   /* remove absolute positioning */
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;  /* keeps aspect ratio */
    /* margin-top: 1rem !important;     */
    display: block !important;
  }

  /* Right hero image */
  .hero-img {
    width: 100%;
    height: 400px;
    display: block;
  }

  /* Stack hero section columns */
  .hero-section .row {
    flex-direction: column;
  }

  .hero-section .col-lg-6 {
    width: 100%;
  }
}



.hero-section {
  margin-top: 0;
  position: relative;
}

.red-block {
  top: 20%;                          /* positions consistently */
  left: 40%;
  transform: translateX(-20%);
  width: 80%;                        /* responsive width */
  max-width: 600px;                  /* works for 1200–1900px screens */
  background-color: #d32222;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 10;
  padding: 2rem;

}

.red-block h2 {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 40px;/* scales with screen */
  line-height: 1.3;
  color: #FAFAFA;
    padding-bottom: 2rem;
  margin: 0 0 1.2rem 0;
}
.know-more-btn {
  width: 100px;
  min-width: 160px;
  padding: 0.6rem 1.2rem;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  gap: 16px;
  font-size: 16px;
  background-color: #FAFAFA;
  color: #d32222;
  border: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  /* Smooth animation */
  transition: all 0.3s ease-in-out;
}

/* Hover effect */
.know-more-btn:hover {
  transform: scale(1.05);          /* gentle grow */
  background-color: #fff;       /* invert colors */
  color: #d32222;                     /* white text */
}

.bottom-img {
  position: absolute;
  bottom: 0;
  right: 0; /* stick to hero-img side */
  width: 100%;
  height: auto;
  object-fit: cover;
  z-index: 2; /* stays above hero-img if needed */
}

/* Overflow fix for the whole site */
body {
  overflow-x: hidden;
}

/* Responsive adjustments */
/* Default: keep your existing layout (desktop/tablet) */

/* Mobile only (max-width: 768px) */
@media (max-width: 768px) {
  /* Force 2x2 layout */
  .info-section .row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0rem !important;
  }

  .info-section .col-12,
  .info-section .col-sm-6,
  .info-section .col-lg-3 {
    width: 100% !important;
    flex: unset !important;
    max-width: unset !important;
  }
  .info-section .vertical-line {
    display: none !important;
  }
  /* Info block styling */
  .info-block {
    padding: 1rem !important;
    border-radius: 0.6rem !important;
    text-align: center !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* Logo responsiveness */
  .info-logo {
    width: 45px !important;   /* smaller logo */
    height: 45px !important;
    margin-bottom: 0.5rem !important;
  }

  /* Title responsiveness */
  .info-title {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  /* Text responsiveness */
  .info-text {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
}




/* Vertical line */
.info-section .container {
  align-items: stretch; /* make children equal height */
}

.vertical-line {
  width: 2px;
  background-color: #DA2E2E;
  align-self: stretch;   /* stretch full height of parent container */
}

/* Info block styling */
.info-block {
  padding: 1.5rem;
  border-radius: 0.8rem;
}

.info-logo {
  width: 60px;  /* smaller than 80px */
  height: 60px;
  object-fit: contain;
}

.info-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 18px !important; /* smaller than 24px */
  margin-bottom: 0.5rem;
  line-height: 1.3 !important;
}

.info-text {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  line-height: 1.3 !important;
  font-size: 16px; /* smaller than 16px */
  color: #555;
}

/* --- Red Section --- */
.cta-section {
  background-color: #DA2E2E;
  height: 300px;
  width: 100%;
  position: relative;
  z-index: 1;
  padding-bottom: 60px;
}
/* New Subtext */
.card-subtext {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  text-align: center;
  margin: 0.5rem 0 1rem;
  color: #333;
}

.cta-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 100%;
  text-transform: capitalize;
    margin-bottom: 1.5rem;
}

.cta-subtext {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 100%;
  margin: 0;
}

.arrow-icon {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

/* --- Card Section (overlap) --- */
.card-carousel-section {
  margin-top: -100px;
  position: relative;
  z-index: 2;
  padding-bottom: 50px;
}

/* Carousel row */
.card-carousel {
  display: flex;
  gap: 2rem;                  /* spacing between cards */
  overflow-x: auto;           /* horizontal scroll only */
  overflow-y: hidden;         /* prevent vertical scrollbar */
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;     /* breathing room, not a scrollbar */
}

/* Hide scrollbar UI (still scrollable) */
.card-carousel::-webkit-scrollbar {
  display: none;
}

.card-carousel {
  -ms-overflow-style: none;   /* IE/Edge */
  scrollbar-width: none;      /* Firefox */
}

/* Card */
.custom-card {
  width: 360px;
  height: 504px;
  border: 1px solid #ddd;
  /* border-radius: 12px; */
  background: #fff;
  text-align: center;
  padding: 1rem;
  flex-shrink: 0;
  overflow: hidden;           /* no inner scrollbars */
  box-sizing: border-box;
}

/* Image: fit container to avoid overflow causing bottom scrollbar */
.card-img {
  width: 100%;
  height: 215px;              /* keep Figma height */
  object-fit: cover;
  /* border-radius: 8px; */
  display: block;
  margin-bottom: 1rem;
}

/* Text styles */
.card-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 100%;
  margin: 1rem 0 0.5rem;
}

.card-text {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  color: #555;
  margin-bottom: 1.5rem;
}

.view-more {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 100%;
  color: #DA2E2E;
  gap: 0.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
text-decoration: none;
            /* space between text and line */
}
.view-more span {
  border-bottom: 2px solid #DA2E2E; /* underline for text only */
  padding-bottom: 4px;  
  font-size: 16px;            /* gap between text and line */
}

.view-more:hover {
  color: #a50000; /* optional hover color change */
}



.view-arrow {
  width: 24px;
  height: 24px;
  display: inline-block; /* Ensures visibility */
}
.arrow-icon2 {
  width: 40px; /* adjust as needed */
  height: auto;
  cursor: pointer;
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

/* Smooth hover effect */
.arrow-icon2:hover {
  transform: scale(1.15) translateX(4px); /* gentle enlarge + shift */
  opacity: 0.9;  /* subtle fade */
}
/* --- Red Banner Section --- */
.red-banner-section {
  background: #DA2E2E;
  height: 187px;
  width: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center; /* vertical centering within 187px height */
}
/* 📱 Mobile Responsive Fix */
@media (max-width: 768px) {
  /* Stack image and content */
  .services-section {
    flex-direction: column;
    width: 100%;
    margin-left: 0;
  }

  .services-image {
    width: 100%;
    height: auto;
    flex: unset;
  }
.view-more {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    color: #DA2E2E;
    gap: 0.5rem;
    cursor: pointer;
    display: inline-flex
;
    align-items: center;
    justify-content: center;
}
  .services-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .services-content {
    flex: unset;
    padding: 2rem 1rem;
  }

  /* 🔹 Make services grid 2x2 */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    position: relative;
    padding-left: 0rem !important;
  }

  /* 🔹 Vertical red divider */
  .services-grid::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background-color: #DA2E2E;
    transform: translateX(-50%);
  }

  /* Service items */
  .service-item {
    padding: 1rem;
    text-align: center;
  }

  /* Text size */
  .service-title {
    font-size: 14px !important;
  }

  .service-text {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  /* Contact block */
  .contact-us-item {
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 0 !important;
    gap: 0.5rem;
  }

  .contact-right {
    flex-direction: row;
    gap: 0.5rem;
    align-self: flex-end;
  }

  .contact-right .robo-img {
    width: 30px;
    height: auto;
  }

  .contact-right .know-more-text {
    font-size: 12px !important;
  }
}
@media (max-width: 768px) {
  .menu-btn {
    border: none !important;      
    outline: none !important;     
    background: transparent !important; 
    /* adjust padding for mobile */
    width: auto !important;        /* ensures button isn’t too wide */
    height: 40px !important;       /* proper touch-friendly height */
    font-size: 16px !important;    /* adjust text/icon size */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
    .menu-btn img {
    width: 32px !important;  /* adjust width for mobile */
    height: 32px !important; /* maintain aspect ratio */
    object-fit: contain;     /* prevent stretching */
  }
}


/* Heading */
.banner-heading {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 100%;
  text-transform: capitalize;
  margin-bottom: 1.5rem;
  color: #fff;
}

/* Subtext */
.banner-subtext {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 100%;
  margin: 0;
  color: #fff;
}
@media (max-width: 768px) {
  .banner-heading {
    font-size: 20px !important;      /* smaller heading on mobile */
    line-height: 1.2 !important;     /* adjusted line height for readability */
    margin-bottom: 1rem !important;  /* reduced spacing */
    text-align: left !important;   /* center text on mobile */
  }

  .banner-subtext {
    font-size: 14px !important;      /* smaller subtext */
    line-height: 1.3 !important;     /* better readability on mobile */
    margin: 0 auto !important;
    text-align: left !important;   /* center text on mobile */
  }
}

/* --- Services Section --- */
.services-section {
  display: flex;
  align-items: stretch;
  width: 100vw;          /* full width of viewport */
  margin-left: calc(-50vw + 50%); /* escape container padding if inside one */
}
.services-image {
  flex: 1;
}

.services-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.services-content {
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
 
  background: #fff;       /* optional: to keep clear background */
}
.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* gap: 2rem 4rem;  */
  position: relative;
  padding-left: 1rem;
}
.services-grid::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%; /* middle */
  width: 1px;
  background-color: #DA2E2E; /* red line */
}
.service-item {
  padding: 1.5rem 1rem;
  border-bottom: 1px solid #DA2E2E;
}

.service-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 100%;
  margin-bottom: 0.5rem;
}

.service-text {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  margin: 0;
  color: #555;
}

/* View More */
/* Only Contact Us item */
.contact-us-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  border-bottom: 1px solid #DA2E2E;
}

/* Left text styling */
.contact-us-item .service-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 100%;
  margin-bottom: 0.5rem;

}

.contact-us-item .service-text {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 16px;
  margin-top: 0.5rem;
  color: #DA2E2E;
}

/* Right side image + text */
/* --- Contact Right Animation --- */
.contact-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.contact-right:hover {
  transform: translateY(-4px); /* subtle lift on hover */
}

/* Arrow bounce animation */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.contact-right .robo-img {
  width: 40px;
  height: auto;
  animation: bounce 2s infinite; /* keep bouncing */
}

/* Text fade/slide in on hover */
.contact-right .know-more-text {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  text-align: center;
  opacity: 0.8;
  color: #DA2E2E;  
  transition: all 0.4s ease;
}

.contact-right:hover .know-more-text {
  opacity: 1;
  color: #DA2E2E;           /* highlight on hover */
  transform: translateY(-2px);
}

.contact-us-item .service-text a {
  color: #DA2E2E;       /* red color */
  text-decoration: none; /* remove underline if needed */
  font-weight: 600;      /* match the text style */
}
/* Left column items */
.services-grid .service-item:nth-child(odd) {
  padding: 1.5rem 0; /* top-bottom 1.5rem, left-right 0 */
}

/* Right column items */
.services-grid .service-item:nth-child(even) {
  padding: 1.5rem 1rem; /* top-bottom 1.5rem, left-right 1rem */
}

.testimonial-section {
  display: flex;
  background: #fff;
  overflow: hidden; /* prevent horizontal overflow */
}

.testimonial-left img {
  width: 175px;
  height: 500px;
  object-fit: cover;
  margin-top: -10px;
}

.testimonial-right {
  padding: 50px 40px;
  position: relative;
  flex: 1;
}

.testimonial-heading {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 30px;
  margin-bottom: 30px;
  color: #DA2E2E;
}

.testimonial-carousel-wrapper {
  overflow: hidden; /* hide scrollbar */
  width: 100%;
  max-width: 1240px; /* Show 2 cards (600px each) + gap (20px) + some padding */
}

.testimonial-carousel {
  display: flex;
  gap: 20px;
  flex-wrap: nowrap;
  transition: transform 0.3s ease;
}

.testimonial-card {
  flex: 0 0 auto;
  width: 600px;
  height: 260px;
  padding: 20px;
  background: #FAFAFA;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.testimonial-text {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 16px;
  margin: 0;
}

.card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.card-logo {
  width: 128px;
  height: 72px;
  object-fit: contain;
}

.card-ratings {
  width: 132px;
  height: 32px;
  object-fit: contain;
}
.carousel-arrows {
  display: flex;
  gap: 25px;
  margin-top: 20px;
}

.carousel-arrow {
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

/* Hover effect for all arrows */
.carousel-arrow:hover {
  transform: scale(1.15);
  opacity: 0.9;
}

/* Specific movement depending on direction */
.carousel-arrow.prev:hover {
  transform: scale(1.15) translateX(-4px);
}

.carousel-arrow.next:hover {
  transform: scale(1.15) translateX(4px);
}
/* 📱 Testimonial Responsive */

/* Mobile styles */
@media (max-width: 768px) {
  .services-header {
            /* margin-top: 20px; */
    width: 440px;
    max-width: 100%; /* prevent overflow on small screens */
  padding: 20px 20px !important;
     /* instead of top absolute positioning */
    opacity: 1;
    text-align: left;
  }
  .testimonial-carousel .testimonial-card {
  flex: 0 0 auto;
  width: auto !important;
  max-width: none !important;
}

  .testimonial-text {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 14px;
            width: 300px;
    margin: 0;
}
.carousel-arrow {
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}
.carousel-arrows {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.red-banner-section {
    background: #DA2E2E;
    height: 127px;
    width: 100%;
    position: relative;
    z-index: 1;
    display: flex
;
    align-items: center;
}
.testimonial-card {
  flex: 0 0 auto;
  width: 300px !important;
  height: 260px !important;
  padding: 20px;
  background: #FAFAFA;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
  .services-header .services-title {
    font-size: 22px;
    margin-bottom: 1rem;
    margin-top: 1rem;
  }
.breadcrumb a {
    color: white;
    text-decoration: none;
    font-size: 12px !important;
    font-weight: 500;
}
  .services-header .services-subtitle {
    font-size: 0.9rem;
    line-height: 1.4;
    /* margin: 0 auto; */
    max-width: 90%;
  }

  .services-header .breadcrumb {
    font-size: 0.8rem;
    /* justify-content: center; */
    margin-bottom: 0.5rem;
  }

  .breadcrumb-icon {
    width: 6px !important;
    margin: 0 4px;
  }
}
/* ✅ Responsive Fix for Mobile */
/* ✅ Mobile Responsive (up to 576px) */
/* ✅ Mobile Responsive (up to 576px) */
@media (max-width: 576px) {
  .service-card {
    flex-direction: row !important;   /* keep row layout */
    align-items: flex-start !important;
    gap: 12px !important;
    /* margin-top: 24px !important; */
  }
  .services-list{
margin-top: 64px !important;
  }

  .service-img {
    width: 196px !important;
    height: 196px !important;
    object-fit: cover !important;     /* crop nicely */
    border-radius: 0 !important;      /* keep sharp edges */
    flex-shrink: 0 !important;        /* don’t shrink */
  }

  .service-heading {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600 !important;      /* SemiBold */
    font-style: normal !important;
    font-size: 20px !important;
    line-height: 100% !important;     /* 1:1 with font size */
    letter-spacing: 0 !important;
    text-transform: capitalize !important;
    margin-bottom: 8px !important;
  }

  .service-text {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 400 !important;      /* Regular */
    font-style: normal !important;
    font-size: 12px !important;
    line-height: 100% !important;
    letter-spacing: 0 !important;
  }
}


 .services-header {
      background-color: #DA2E2E;
      color: white;
      padding: 80px 0 100px;
      font-family: 'Manrope', sans-serif;
      position: relative;
      z-index: 1;
      flex-shrink: 0; /* Prevent header from shrinking */
    }

    .services-list {
      margin-top: 0; /* Removed negative margin to center properly */
      position: relative;
      z-index: 2;
      padding: 0 15px;
      flex-grow: 1; /* Allow it to grow and center vertically */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .service-card {
      display: flex;
      align-items: center;
      /* gap: 20px; */
      margin-bottom: 40px;
      margin-top: -50px;
      padding: 20px 0;
      max-width: 800px; /* Limit total width for better centering */
      width: 100%;
    }

    .service-img {
      width: 350px;
      height: 360px;
      object-fit: cover;
      
      border-radius: 0;
    }

.service-heading {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;         /* SemiBold */
  font-style: normal;       /* SemiBold is weight, not style */
  font-size: 24px;
  line-height: 100%;        /* same as Figma spec */
  letter-spacing: 0;        /* 0% means normal */
  text-transform: capitalize;
  margin-bottom: 20px;      /* optional spacing */
  color: #333333;              /* adjust as per your design */
}


 .service-text {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;         /* Regular */
  font-style: normal;       /* "Regular" means normal */
  font-size: 18px;
  line-height: 150%;        /* same as your spec */
  letter-spacing: 0;        /* no extra spacing */
  color: #333333;              /* optional, adjust to match design */
  margin-bottom: 16px;      /* spacing tweak */
}

  .breadcrumb {
  display: flex;
  align-items: center;   /* centers text + icon vertically */
  gap: 15px;              /* space between items */
  margin-bottom: 20px;
}

.breadcrumb a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
}

.breadcrumb a:hover {
  text-decoration: underline; /* small hover effect */
}

.breadcrumb-icon {
  width: 8px;
  height: 8px;
  display: inline-block;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

    .services-title {
      font-size: 32px;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .services-subtitle {
      font-size: 18px;
      font-weight: 400;
      /* max-width: 600px; */
    }

    .custom-navbar {
      flex-shrink: 0; /* Prevent navbar from shrinking */
    }

    .requirement-bar {
      flex-shrink: 0; /* Prevent requirement bar from shrinking */
    }
.video-box {
  background: #fff; /* placeholder background */
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  position: relative;
}

.play-btn {
  background: none;
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); /* subtle shadow */
  cursor: pointer;
}

.d-none {
  display: none;
}

.play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); /* subtle shadow */
  height: 80px;
  background: rgba(230, 7, 7, 0.8);
  border-radius: 50%;
  transition: background 0.3s ease;
}

.play-btn:hover {
  background: rgb(163, 150, 150);
}

  .play-btn svg {
    width: 20px;
    height: 20px;
    fill: #fff;
  }

.d-none {
  display: none;
}

@media (max-width: 767px) {
  .connect-section {
    width: 440px !important;
    height: 180px !important;
    margin: 0 auto !important;
    padding-right: 20px !important;
    padding-left: 10px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .connect-section .container {
    padding-right: 20px !important;
    padding-left: 0px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .connect-left {
    max-width: 50% !important;
  }

  .connect-title {
    font-size: 16px !important;
    font-weight: 400 !important;
    margin-bottom: 10px !important;
  }

  .connect-btn {
    font-size: 12px !important;
    padding: 8px 16px !important;
  }

  .connect-right {
    position: relative !important;
    right: 0 !important;
    top: 0 !important;
  }

  .connect-img {
    width: 134px !important;
    height: 240px !important;
    margin-left: 10px !important;
    object-fit: contain !important;
    margin-top: -38px;
  }
}

    .custom-section {
    width: 100%; /* Instead of fixed 1728px, make it responsive */
    max-width: 1728px;
    height: 120px;
    margin: 0 auto;
    background: #fff; /* light gray background */
    opacity: 1;
  }

  .section-text {
    font-size: 16px;
    font-weight: 400;
      font-family: 'Manrope', sans-serif;
    line-height: 33px; /* matches height */
    max-width: 742px;
    color: #000;
  }
.contact-btn {
  display: inline-flex;              /* flex for icon + text */
  align-items: center;               /* vertical center */
  justify-content: center;           /* center content */
  gap: 8px;                          /* space between text & icon */
  
  padding: 10px 10px;              /* balanced padding */
  background: #DA2E2E;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
                /* subtle rounded corners */
  transition: background 0.3s ease, transform 0.2s ease;
  cursor: pointer;
}

.contact-btn:hover {
  background: #DA2E2E;
  transform: translateY(-2px);       /* small hover lift */
}

.contact-btn img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;                    /* keeps icon size fixed */
}

  @media (max-width: 768px) {
  .custom-section {
    flex-direction: column !important;
    text-align: center !important;
    gap: 15px !important;
    padding: 20px 10px !important;
    min-height: auto !important;
    height: auto !important;
  }

  .section-text {
    font-size: 10px !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
    padding-right: 10px;
    text-align: left;
  }


}@media (max-width: 768px) {
  .contact-btn {
                width: 150px !important;
        height: 32px !important;
        padding: 2px 6px !important;
        font-weight: 400 !important;
        font-size: 12px !important;
        gap: 3px !important;
  }

.contact-btn img {
  width: 14px;
  height: 14px;
  opacity: 1;
  margin-left: 6px; /* keeps spacing clean */
}

}

  /* --- Red Section --- */


/* Product carousel section */
.product-carousel-section {
  margin-top: -100px;
  position: relative;
  z-index: 2;
  padding-bottom: 50px;
}

/* Carousel row */
.product-carousel {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
}
.product-carousel::-webkit-scrollbar { display: none; }
.product-carousel { -ms-overflow-style: none; scrollbar-width: none; }

/* Product card */
/* Product card */
/* Product card */
.product-card2 {
  width: 360px;
  border: 1px solid #ddd;
  background: #FAFAFA;
  text-align: center;
  padding: 0 0 1rem;  /* ⬅️ removed left/right padding */
  flex-shrink: 0;
  overflow: hidden;
  box-sizing: border-box;
}

/* Image */
/* Image */
.card-img {
  width: 100%;
  height: 215px;
  object-fit: cover;
  display: block;
  margin: 0 0 1rem; /* only bottom margin */
}

/* Image */
.card-img {
  width: 100%;
  height: 215px;
  object-fit: cover;
  display: block;
  margin: 0 0 1rem; /* ⬅️ remove extra space above */
}

/* Image */
.card-img {
  width: 100%;
  height: 215px;
  object-fit: cover;
  display: block;
  margin-bottom: 1rem;
}

/* Text styles */
.card-title2 {
  font-family: 'Manrope', sans-serif;
 
  font-size: 18px;
  line-height: 120%;
  margin: 1rem 0 0.5rem;
  padding: 0.6rem;
  text-align: left;   /* ⬅️ force left */
}


.card-text {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  color: #555;
  margin-bottom: 1.5rem;
  text-align: center;   /* ⬅️ added */
}
/* Product view more */
.product-view {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 100%;
  color: #DA2E2E;
  gap: 0.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.product-date {
  margin-top: 12px;
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 100%;
  padding-top: 20px;
  letter-spacing: 0;
  padding:0.8rem;
}

.date-text {
  color: #000; /* adjust if needed */
  font-size: 16px;
}

.date-arrow {
  width: 34px;
  height: auto;
}

.view-arrow {
  width: 24px;
  height: 24px;
}
/* 🔹 Mobile Responsive (max-width: 768px) */
@media (max-width: 768px) {
  .cta-section {
    height: auto !important;
    padding: 40px 15px !important;
  }

  .product-carousel-section {
    margin-top: -60px !important;
    padding-bottom: 30px !important;
  }

  .product-carousel {
    gap: 1rem !important;
    padding: 0 10px !important;
      margin-top: 40px !important;
  }

  .product-card2 {
    width: 85% !important;   /* take most of screen */
    max-width: 320px !important;
    margin: 0 auto !important; /* center */
  }

  .card-img {
    height: 180px !important;
  }

  .card-title2 {
    font-size: 16px !important;
    padding: 0.4rem !important;
  }

  .card-text {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .product-date {
    font-size: 14px !important;
    padding: 0.5rem !important;
  }

  .product-view {
    font-size: 16px !important;
  }

  .date-arrow {
    width: 24px !important;
  }
  .view-arrow {
    width: 18px !important;
  }
}

.network-section {
  margin: 60px auto;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s ease forwards;
}

.left-content {
  padding-right: 30px;
}

.network-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 100%;
  text-transform: capitalize;
  color: #DA2E2E;
  margin-bottom: 3rem;
  opacity: 0;
  transform: translateX(-30px);
  animation: slideInLeft 1s ease forwards;
  animation-delay: 0.3s;
}
.network-block {
  margin-bottom: 1.5rem;
}

.network-heading {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 100%;
  color: #000;
  margin-bottom: 1rem;
  opacity: 0;
  transform: translateX(-20px);
  animation: slideInLeft 0.8s ease forwards;
  animation-delay: 0.6s;
}

.network-text {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 100%;
  color: #666666;
  margin-bottom: 2rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease forwards;
  animation-delay: 0.8s;
}
.vertical-divider {
  border: none;
  border-left: 2px solid #DA2E2E;
  height: 0;
  margin: 0;
  animation: growLine 1s ease forwards;
  animation-delay: 1s;
}
.right-content {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.map-wrapper {
  position: relative;
  width: fit-content;
}

.network-map {
  width: 562px;
  height: 619px;
  object-fit: contain;
  display: block;
  margin-left: 100px;
  opacity: 0;
  transform: scale(0.9);
  animation: zoomIn 1s ease forwards;
  animation-delay: 1.2s;
}

/* Glowing dots */
.location-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #DA2E2E;
  border-radius: 50%;
  box-shadow: 0 0 10px #DA2E2E, 0 0 20px #DA2E2E, 0 0 30px #DA2E2E;
  animation: pulse 1s infinite;
}

/* Adjust positions based on your map image */
.maharashtra {
  top: 55%;    /* tweak as needed */
  left: 40%;   /* tweak as needed */
}

.madhyapradesh {
  top: 40%;    /* tweak as needed */
  left: 50%;   /* tweak as needed */
}

/* Optional: pulsing effect */
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 0.7; }
}

/* ===== Animations ===== */
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes growLine {
  to {
    height: 100%;
  }
}

@keyframes zoomIn {
  to {
    opacity: 1;
    transform: scale(1);
  }}
/* ===== Hover Animations ===== */

/* Heading hover: subtle lift + color */
.network-heading:hover {
  color: #DA2E2E;
  transform: translateX(5px);
  transition: all 0.3s ease;
}

/* Text hover: fade a little darker */
.network-text:hover {
  color: #333;
  transition: color 0.3s ease;
}

/* Map hover: smooth zoom */
.network-map:hover {
  transform: scale(1.05);
  transition: transform 0.4s ease;
}


/* Divider hover: glow effect */
.vertical-divider:hover {
  border-left: 2px solid #ff5050;
  transition: border-color 0.3s ease;
}



 .services-header {
      background-color: #DA2E2E;
      color: white;
      padding: 40px 0 60px;
      font-family: 'Manrope', sans-serif;
      position: relative;
      z-index: 1;
      flex-shrink: 0; /* Prevent header from shrinking */
    }

    .services-list {
      margin-top: 0; /* Removed negative margin to center properly */
      position: relative;
      z-index: 2;
      padding: 0 15px;
      flex-grow: 1; /* Allow it to grow and center vertically */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .service-card {
      display: flex;
      align-items: center;
      /* gap: 20px; */
      margin-bottom: 40px;
      margin-top: -50px;
      padding: 20px 0;
      max-width: 800px; /* Limit total width for better centering */
      width: 100%;
    }

    .service-img {
      width: 350px;
      height: 360px;
      object-fit: cover;
      
      border-radius: 0;
    }

.service-heading {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;         /* SemiBold */
  font-style: normal;       /* SemiBold is weight, not style */
  font-size: 20px;
  line-height: 100%;        /* same as Figma spec */
  letter-spacing: 0;        /* 0% means normal */
  text-transform: capitalize;
  /* margin-bottom: 20px;      */
  color: #333333;              /* adjust as per your design */
}


 .service-text {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;         /* Regular */
  font-style: normal;       /* "Regular" means normal */
  font-size: 16px;
  line-height: 150%;        /* same as your spec */
  letter-spacing: 0;        /* no extra spacing */
  color: #333333;              /* optional, adjust to match design */
  margin-bottom: 16px;      /* spacing tweak */
}
.breadcrumb {
  display: flex;
  align-items: center;   /* centers text + icon vertically */
  gap: 15px;             /* space between items */
  margin-bottom: 20px;
}

.breadcrumb a {
  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  opacity: 0.6;              /* faded by default */
  transition: opacity 0.3s ease;
}

.breadcrumb a:hover {
  text-decoration: underline; 
  opacity: 0.8;              /* brighten a bit on hover */
}

/* keep the last breadcrumb link fully visible */
.breadcrumb a:last-of-type {
  opacity: 1;
  font-weight: 400;          /* optional: slightly bolder */
}
.breadcrumb-icon:last-of-type {
  width: 8px;
  height: 8px;
  opacity: 1;
  display: inline-block;
  object-fit: contain;
  filter: brightness(0) invert(1);
}


.breadcrumb-icon {
  width: 8px;
  height: 8px;
  opacity: 0.5;
  display: inline-block;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

    .services-title {
      font-size: 30px;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .services-subtitle {
      font-size: 18px;
      font-weight: 400;
      /* max-width: 600px; */
    }

   
     /* Requirement bar */
.requirement-bar {
  background-color: #FAFAFA;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
  position: relative; /* stays normal at top initially */
  z-index: 1500;
}

/* Hidden state on scroll */
.requirement-bar.hidden {
  display: none;
}
/* Fix navbar layout for medium-large screens (1000px–1300px) */
@media (max-width: 1400px) and (min-width: 1000px) {
  .custom-navbar {
    height: 100px; /* shrink navbar a little */
    padding: 0 1rem;
  }

  .navbar-logo {
    height: 80px;
    width: auto;
  }

  .custom-navbar .nav-link {
    margin-left: 25px; /* reduce spacing */
    font-size: 15px;   /* slightly smaller text */
  }

  .quote-btn {
    width: auto;
    padding: 10px 10px; /* reduce padding so it fits */
    font-size: 14px;
  }
}

/* Medium screens: 1000px–1300px */
@media (max-width: 1300px) and (min-width: 1000px) {
  .custom-navbar {
    height: 100px;
    padding: 0 1rem;
  }

  .navbar-logo {
    height: 80px;
    width: auto;
  }

  .custom-navbar .nav-link {
    margin-left: 25px; /* reduced spacing */
    font-size: 15px;
  }

  .quote-btn {
    width: auto;
    padding: 10px 10px;
    font-size: 14px;
  }
}

/* Tablet screens: 769px–999px */
@media (max-width: 999px) and (min-width: 769px) {
  .custom-navbar {
    height: 90px;
    padding: 0 0.8rem;
  }

  .navbar-logo {
    height: 65px;
    width: auto;
  }

  .custom-navbar .nav-link {
    margin-left: 18px; /* tighter spacing */
    font-size: 14px;
  }

  .quote-btn {
    width: auto;
    padding: 8px 14px;
    font-size: 13px;
  }
}
/* Fix navbar wrapping issue around 1137px */
@media (max-width: 1140px) and (min-width: 1000px) {
  .custom-navbar .nav-link {
    margin-left: 15px;   /* reduce spacing */
    font-size: 14px;     /* slightly smaller font */
  }

  .quote-btn {
    padding: 6px 12px;
    font-size: 13px;
  }

  .nav {
    flex-wrap: nowrap;        /* prevent wrapping */
  }

  .quote-btn {
    margin-left: auto;        /* stick button to far right */
    flex-shrink: 0;           /* don’t let it shrink too much */
  }
}

/* Navbar styles */
.custom-navbar {
  position: relative; /* default: normal flow */
  top: 0;
  left: 0;
  width: 100%;
  background: white;
  z-index: 2000;
  transition: all 0.3s ease-in-out;
  padding: 0.8rem 0;
}

/* Default navbar state */
.custom-navbar .navbar-logo {
  transition: all 0.3s ease-in-out;
  
}

/* When sticky */
.custom-navbar.scrolled {
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.custom-navbar.scrolled .navbar-logo {
  content: url("assets/mobile-new-logo.png");
        height: 70px;
        object-fit: contain;
    width: 70px;
}
/* Large screens default ( > 1300px ) works fine */


/* Default mobile nav - hidden */
/* Default mobile nav - hidden */
.mobile-nav {
  position: fixed;
  top: 0;
  left: -100%; /* start off-screen */
  width: 100%;
  height: 100vh;
  background-color: #d32222;
  color: #fff;
  text-align: center;
  z-index: 1000;
  padding-top: 3rem;
  overflow: hidden;
  transition: left 0.3s ease-in-out; /* smooth slide */
}

/* Show nav */
.mobile-nav.active {
  left: 0; /* slides into view */
}


body.no-scroll {
  height: 100vh;
  overflow: hidden; /* Disable body scroll */
}

.mobile-nav ul {
  list-style: none;
  margin: 2rem 0 0 0;
  padding: 0;
}

.mobile-nav li {
  margin: 1.2rem 0; /* Spacing between links */
}

.mobile-nav a {
  color: #fff;
  font-family: 'Manrope', sans-serif;
  text-decoration: none;
  font-size: 1rem;
  display: block;
  padding: 0.7rem 0; /* Increase height */
}

/* Back button */
.back-btn {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: inline-block;
  z-index: 1100;
}

.back-btn img {
  width: 28px;
  height: auto;
  margin-top: -40px;
}

/* Show nav */
.mobile-nav.active {
  display: block;
}
.space {
  padding-top: 100px;
}

.faq-cta-section {
  width: 100%;
  min-height: 92px;
  background-color: #DA2E2E;
  display: flex;
  align-items: center;
  padding: 0 1rem;
}

.faq-cta-text {
  font-family: 'Manrope', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  color: #FAFAFA;
  margin: 0;
  line-height: 1.2;
}

/* FAQ Section */
.faq-section {
  padding: 3rem 0;
  background-color: #ffffff;
}

.faq-item {
  margin-bottom: 1.6rem;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.faq-question h4 {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 18px;
  margin: 0;
  color: #333;
}

.dropdown-icon {
  width: 1.6rem;
  height: 1.6rem;
  transition: transform 0.3s ease;
}

/* Animated answer */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
}

.faq-answer.open {
  max-height: 500px; /* enough to show text */
  padding-top: 0.6rem;
}

hr {
  border: none;
  border-top: 1px solid #dcdcdc;
  margin-top: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
  .faq-cta-text {
    font-size: 1.4rem;
    text-align: left;
  }
  .testimonial-heading {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 20px !important;
    margin-bottom: 30px;
    color: #DA2E2E;
}
.card-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 18px !important;
    line-height: 100%;
    margin: 1rem 0 0.5rem;
}
.faq-cta-section {
    width: 100%;
    min-height: 92px;
    background-color: #DA2E2E;
    display: flex;
    align-items: center;
    padding: 0rem;
}
  .faq-question h4 {
    font-size: 1rem !important;
  }

  .dropdown-icon {
    width: 1.2rem;
    height: 1.2rem;
  }

  .faq-answer {
    font-size: 0.95rem;
  }
}
/* Disable body scrolling when menu is active */

  @media (max-width: 768px) {
  .testimonial-right {
    padding: 20px 10px;
    position: relative; /* so ::before anchors here */
  }

  /* Move red line to testimonial-right */
  .testimonial-right::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;  /* full height of container */
    width: 4px;
    background: #DA2E2E;
  }

  /* remove the old red line from heading */
  .testimonial-heading::before {
    display: none;
  }
  .custom-navbar.scrolled .navbar-logo{
    width: 60px;
    height: auto;
  }
    .network-section .row::before {
    display: none;
  }
}
/* Mobile: keep text + button on one line; button at right */
@media (max-width: 576px) {
  .cta-sections {
    width: 440px !important;
    height: 64px !important;
    margin: 0 auto !important;
    display: block !important;                 /* avoid outer flex interference */
    padding: 0 !important;
    background-color: #DA2E2E;                 /* keep your bg */
  }

  .cta-sections .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
    height: 100% !important;
  }

  .cta-sections .row {
    display: flex !important;
    flex-wrap: nowrap !important;              /* keep in one line */
    align-items: center !important;
    justify-content: space-between !important; /* text left, button right */
    gap: 12px !important;
    height: 64px !important;
  }

  /* Text column behaves as fluid space */
  .cta-sections .col-md-8 {
    flex: 1 1 auto !important;
    min-width: 0 !important;                   /* allow wrapping */
    text-align: right !important;
  }



  /* Text specs */
  .cta-texts {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 100% !important;
    letter-spacing: 0 !important;
    color: #FAFAFA !important;
    margin: 0 !important;
    text-align: left !important;
    width: 200px ;
          
  }

  /* Button specs & sizing */
  .cta-btns {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 132px !important;
    height: 32px !important;
    padding: 8px !important;                   /* as requested */
    gap: 10px !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 100% !important;
    text-align: center !important;
    background: #FAFAFA !important;
    color: #DA2E2E !important;
    
      margin-right: -100px;
  }
}

.cta-sections {
  width: 100%;
  height: 92px;
  background-color: #DA2E2E;
  display: flex;
  align-items: center;
}

.cta-texts {
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #FAFAFA;
  margin: 0;
  /* aligns with .services-title */
  line-height: 100%;
}
.cta-btns {
  display: inline-block;
  background-color: #FAFAFA;
  color: #DA2E2E;
  font-family: 'Manrope', sans-serif;
  font-size: 16px;       /* smaller font */
  font-weight: 600;
  padding: 12px 24px;    /* reduced padding */
 /* slightly smaller radius */
  text-decoration: none;
  transition: 0.3s ease;
  height: 48px;          /* reduced height */
  line-height: 24px;     /* centers text inside */
}

.cta-btns:hover {
  background-color: #fff;
  color: #b32222;
}

@media (max-width: 768px) {
  .network-blocks {
    display: grid;
    grid-template-columns: 1fr 1fr;   /* 2 equal columns */
    column-gap: 20px;
    row-gap: 0px;
    position: relative;
    align-items: start;
  }
.network-block {
  margin-bottom: 0rem;
}
  /* Divider line exactly in the middle */
  .network-blocks::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;                 /* true center */
    transform: translateX(-50%);
    width: 1.5px;              /* slimmer for neat look */
    background: #DA2E2E;
  }

  .network-title {
    font-size: 22px;
    margin-bottom: 16px;
   
  }


  .network-heading {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 14px !important;
    line-height: 1.2;
    color: #000;
    margin: 0 0 4px 0;
  }
   .network-text a {
  text-decoration: none; /* removes underline */
  color: inherit;        /* keeps the text color same as surrounding */
  cursor: pointer; 
  font-size: 12px !important;      /* indicates clickable link */
}

/* Override Elementor default margin for .network-text */

    .network-text {
        font-family: 'Manrope', sans-serif;
        font-weight: 400;
        font-size: 12px !important;
        line-height: 100%;
        color: #666666;
        margin-bottom: 2rem !important; /* override Elementor margin-block-end */
        opacity: 0;
        transform: translateY(20px);
        animation: fadeUp 0.8s ease forwards;
        animation-delay: 0.8s;
    }


  .network-map {
    max-width: 309px;
    height: auto;
    display: block;
    margin-left: 50px !important;
    margin: 20px auto 0 auto;
    object-fit: contain;
  }

  .right-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
  }
}

    @media (max-width: 768px) {
            html, body {
                max-width: 100%;
                overflow-x: hidden;
            }
        }

 .footer-cert-logos {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  gap: 10px 20px !important;                        /* more spacious: 40px row gap, 60px column gap */
  justify-items: center;                 /* center logos in their cell */
  align-items: center;                   /* vertically center logos */
                    /* extra top/bottom spacing */
}


        /* Mobile Responsive Styles */
        @media (max-width: 768px) {
            html, body {
                max-width: 100%;
                overflow-x: hidden;
            }

            .custom-footer {
                padding: 14px 0 20px;
            }

            .container-fluid.px-5 {
                padding-left: 10px !important;
                padding-right: 10px !important;
            }

            /* Hide desktop icons */
            .footer-icons {
                display: none !important;
            }

            /* Show mobile icons */
            .footer-social-mobile {
                display: flex !important;
                justify-content: center;
                gap: 14px;
                height: 24px;
                width: 24px;
                margin-top: 30px;
                margin-bottom: 30px;
                width: 100%;
            }

            /* Title */
            .footer-title {
                font-family: 'Manrope', sans-serif;
                font-weight: 600;
                font-size: 16px !important;
                line-height: 1.3;
                text-align: center;
                width: 100%;
                margin-bottom: 14px;
                color: #DA2E2E;
                padding: 0 6px;
            }

            /* Divider */
            .footer-line {
                width: 100%;
                height: 2px;
                margin: 1px auto;
                background-color: #DA2E2E;
                border: none;
            }

            /* Resources & logos container */
            .d-flex.justify-content-between.align-items-start.mt-4 {
                flex-direction: column;
                /* gap: 20px; */
                margin-top: 0 !important;
                align-items: center;
            }

            /* Hide "Resources" heading */
            .footer-subtitle {
                font-size: 14px;
            }

        }

        .footer-cert-logos img {
            max-width: 120px;
            height: auto;
        }

        .custom-footer {
            width: 100%;
            /* max-width: 1728px; */
            margin: auto;
            padding: 40px 0;
            font-family: 'Manrope', sans-serif;
            background-color: #FAFAFA;
        }

        .footer-title {
            font-weight: 600;
            font-size: 18px;
            color: #DA2E2E;
            margin: 0;
        }

        .footer-icons .footer-icon {
            width: 32px;
            height: 32px;
            transition: transform 0.3s ease, opacity 0.3s ease;
        }

        .footer-icons .footer-icon:hover {
            transform: scale(1.2) rotate(5deg);
            opacity: 0.85;
        }

        .footer-line {
            border: none;
            height: 2px;
            background-color: #DA2E2E;
            opacity: 1;
            margin: 40px 0 60px 0;
        }

        .footer-resources-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, auto);
            gap: 20px;
            margin-bottom: 30px;
            align-items: start;
        }

        .footer-subtitle {
           font-size: 16px;
    font-weight: 200;
    color: #666666;
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
            margin: 0 !important;
            grid-column: 1;
            grid-row: 1;
        }

        .footer-links-item {
            font-size: 16px;
            font-weight: 600;
            color: #000;
            text-decoration: none;
            transition: color 0.3s ease;
            position: relative;
        }

        .footer-links-item:hover {
            color: #DA2E2E;
        }

        .footer-links-item::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -3px;
            width: 0;
            height: 2px;
            background-color: #DA2E2E;
            transition: width 0.3s ease;
        }

        .footer-resources-grid .footer-links-item:nth-child(2) { grid-column: 1; grid-row: 2; } /* Downloads */
        .footer-resources-grid .footer-links-item:nth-child(3) { grid-column: 2; grid-row: 1; } /* Blogs */
        .footer-resources-grid .footer-links-item:nth-child(4) { grid-column: 2; grid-row: 2; } /* Products */
        .footer-resources-grid .footer-links-item:nth-child(5) { grid-column: 3; grid-row: 1; } /* Contact Us */
        .footer-resources-grid .footer-links-item:nth-child(6) { grid-column: 3; grid-row: 2; } /* Get a Quote */

     /* Desktop logos - 3 columns, 2 rows grid */
.footer-cert-logos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.footer-cert-logos img {
    width: 100%;
    max-width: 160px;
    height: 80px;
    object-fit: contain;
    justify-self: center;
    
    /* optional: white background for contrast */
    padding: 6px;
    border-radius: 6px;
    transition: transform 0.3s ease;
}

.footer-line {
    opacity: 1;
    width: 100%;
}

.footer-cert-logos img:hover {
    transform: scale(1.05);
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.footer-center-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

.footer-center-logo::before,
.footer-center-logo::after {
    content: "";
    flex: 1;
    height: 2px;
    background-color: #DA2E2E;
    opacity: 1;
}

.footer-center-logo img {
    margin-top: -2px;
    display: block;
}

.footer-credit {
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    max-width: 550px;
}

.footer-bottom-links a {
    font-size: 14px;
    font-weight: 200;
    text-decoration: none;
    color: #666666;
}

.footer-bottom-links a:hover {
    color: #DA2E2E;
}

/* Hide mobile social icons on desktop */
.footer-social-mobile {
    display: none;
}

/* Mobile divider line - hidden on desktop */
.footer-mobile-divider {
    display: none;
}
        /* Show mobile divider only on mobile */
        @media (max-width: 768px) {
            .footer-mobile-divider {
                display: block !important;
                width: 100%;
                height: 2px;
                margin: 0 auto;
                background-color: #DA2E2E;
                border: none;
                opacity: 1;
            }
        }
        /* --- Red Section --- */
.prod-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.prod-breadcrumb a {
  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  opacity: 0.6; /* faded by default */
  transition: opacity 0.3s ease;
}
.prod-breadcrumb a:hover {
  text-decoration: underline;
  opacity: 0.8; /* slightly brighter on hover */
}
/* keep the last link fully visible */
.prod-breadcrumb a:last-of-type {
  opacity: 1;
  font-weight: 400; /* optional emphasis */
}
.prod-breadcrumb-icon:last-of-type {
  width: 8px;
  height: 8px;
    opacity: 1;
  display: inline-block;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.prod-breadcrumb-icon {
  width: 8px;
  height: 8px;
  display: inline-block;
  opacity: 0.6;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.prod-cta-section {
    background-color: #DA2E2E;
    height: 300px;
    width: 100%;
    position: relative;
    z-index: 1;
    padding-bottom: 60px;
    margin-top: -20px;
}
.prod-cta-section-careers {
    background-color: #DA2E2E;
    height: 250px;
    width: 100%;
    position: relative;
    z-index: 1;
    /* padding-bottom: 60px; */
    margin-top: -20px;
}
.prod-cta-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 100%;
  text-transform: capitalize;
  margin-bottom: 1.5rem;
}

.prod-cta-subtext {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  width: 770px;
  font-size: 18px;
  line-height: 130%;
  margin: 0;
}

/* --- Card Section --- */
.prod-card-grid-section {
  margin-top: -100px;
  position: relative;
  z-index: 2;
  padding-bottom: 50px;
}

.prod-custom-card {
  height: 100%;
  border: 1px solid #ddd;
  background: #fff;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding: 1rem;
  overflow: hidden;
  gap: 50px;
  box-sizing: border-box;
}
.prod-custom-card:hover {
  transform: translateY(-5px); /* lifts card slightly */
  box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* stronger shadow */
}

.prod-card-img {
  width: 100%;
  height: 215px;
  object-fit: cover;
  display: block;
  margin-bottom: 1rem;
}

.prod-card-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin: 1rem 0 0.5rem;
}

.prod-card-text {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #555;
}

.prod-view-more {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #DA2E2E;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  text-decoration: none;
}
.prod-view-more span {
  border-bottom: 2px solid #DA2E2E; /* underline for text only */
  padding-bottom: 4px;       
         /* gap between text and line */
}
.prod-view-arrow {
  width: 20px;
  height: 20px;
}

/* Mobile responsive (up to 767px) */
@media (max-width: 767px) {
  .prod-card-grid-section .row {
    justify-content: center !important;
    margin-top: 100px;
  }

  .prod-cta-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 22px !important;
    line-height: 100%;
    text-transform: capitalize;
    margin-bottom: 1.5rem;
  }

  .prod-breadcrumb a {
    font-size: 10px;
  }

  .prod-breadcrumb-icon {
    width: 6px;
    height: 6px;
    display: inline-block;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }

  .prod-cta-subtext {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 100%;
    max-width: 420px; /* or width: 400px */
    margin: 0;
  }
.prod-view-more span {
  border-bottom: 2px solid #DA2E2E; /* underline for text only */
  padding-bottom: 0px;       
         /* gap between text and line */
}
  .prod-custom-card .prod-card-img {
    width: 187px !important;
    height: 117px !important;
    position: relative !important;
    margin-left: -20px;
    opacity: 1 !important;
    object-fit: contain !important;
  }

  .prod-card-grid-section .col-12 {
    flex: 0 0 auto !important;
    width: 50% !important;
    max-width: 50% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .prod-cta-section {
    background-color: #DA2E2E;
    height: 210px;
    width: 100%;
    position: relative;
    z-index: 1;
    padding-bottom: 0px;
  }

  .prod-custom-card {
    width: 205px !important;
    height: 295px !important;
    border-width: 1px !important;
    opacity: 1 !important;
    position: relative !important;
  }

  .prod-card-img {
    height: 100px !important;
    object-fit: contain !important;
  }

  .prod-card-title {
    font-size: 14px !important;
    margin: 0.5rem 0 !important;
  }

  .prod-card-text {
    font-size: 8px !important;
    line-height: 1.3 !important;
    max-height: 55px !important;
    overflow: hidden !important;
  }

  .prod-view-more {
    font-size: 14px !important;
  }

  .prod-view-arrow {
    width: 16px !important;
    height: 16px !important;
  }
}
@media (max-width: 767px) {
  .client-section {
    width: 440px !important;
    height: 180px !important;
    margin: 0 auto !important;
      padding-right: 20px !important;
    padding-left: 10px !important;
    
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .client-section .container {
    padding-right: 20px !important;
    padding-left: 0px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .client-left {
    max-width: 50% !important;
  }

  .client-title {
    font-size: 14px !important;
    font-weight: 400 !important;
    margin-bottom: 10px !important;
  }

  .client-btn {
    font-size: 12px !important;
    padding: 8px 16px !important;
  }

  .client-right {
    position: relative !important;
    right: 0 !important;
    top: 0 !important;
  }

  .client-img {
   width: 164px !important;
        height: 240px !important;
        margin-left: 10px !important;
        object-fit: contain !important;
        margin-top: -58px;
  }
}

.client-section {
  position: relative;
  width: 100%;
  height: 278px;
  background-color: #DA2E2E;
  display: flex;
  align-items: center;
  overflow: visible; /* allows image overlap */
}

.client-section .container {
  max-width: 1728px;
  margin: 0 auto;
  padding: 0 125px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Left content */
.client-left {
  max-width: 987px;
}

.client-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.4;
  color: #FAFAFA;
  margin-bottom: 20px;
}

.client-btn {
  display: inline-block;
  padding: 16px 32px;
  background-color: #FAFAFA;
  color: #DA2E2E;
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 600;

  text-decoration: none;
  transition: all 0.3s ease;
}

.client-btn:hover {
  background-color: #fff;
  color: #b32222;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Right image */
.client-right {
  position: absolute;
  right: 80px;
  top: -60px; /* overlaps only from top */
}

.client-img {
  width: 244px;
  height: 338px;
  
  object-fit: contain;
}

@media (max-width: 992px) {
  /* Image size */
  .feature-icon {
    width: 40px !important;
    height: 40px !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    opacity: 1 !important;
  }

  /* Feature title */
  .feature-title {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600 !important;   /* SemiBold */
    font-size: 12px !important;
    line-height: 120% !important;  /* loosened slightly */
    letter-spacing: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    margin: 6px auto !important; 
    max-width: 90% !important;     /* ✅ let text spread more */
    white-space: normal !important;
  }

  /* Feature text */
  .feature-text {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 400 !important;   /* Regular */
    font-size: 10px !important;     /* a bit bigger for readability */
    line-height: 120% !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    margin: 0 auto !important;
    max-width: 85% !important;     /* ✅ prevents 3rd line */
    white-space: normal !important;
  }
}


/* ✅ Responsive with !important */
@media (max-width: 992px) {
  .camera-section {
    flex-direction: column !important;
            width: 150px;
  }

  .camera-left {
    flex: unset !important;
    width: 100% !important;
    height: 250px !important; /* smaller height for mobile */
  }

  .camera-right {
    grid-template-columns: 1fr 1fr !important;  /* keep 2x2 layout */
    border-left: none !important;              
    border-top: 1px solid #b32222 !important;  /* add top border for separation */
  }

  .camera-feature {
    border-right: 1px solid #b32222 !important; 
    border-bottom: 1px solid #b32222 !important;
  }

  /* remove right border for 2nd and 4th (last column) */
  .camera-feature:nth-child(2),
  .camera-feature:nth-child(4) {
    border-right: none !important;
  }

  /* remove bottom border for 3rd and 4th (last row) */
  .camera-feature:nth-child(3),
  .camera-feature:nth-child(4) {
    /* border-bottom: none !important; */
  }
}

.camera-section {
  width: 100vw;               /* full width */
  min-height: 524px;
  padding-top: 70px;
  padding-bottom: 70px;
  display: flex;
  border-top: 1px solid #b32222;
  border-bottom: 1px solid #b32222;
}

.camera-left {
  flex: 0 0 45%;              /* 45% of width */
}

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

.camera-right {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-left: 1px solid #b32222;
}

.camera-feature {
  padding: 40px;
  border-bottom: 1px solid #b32222;
  border-right: 1px solid #b32222;
}

/* Remove right border for last column in each row */
.camera-feature:nth-child(2),
.camera-feature:nth-child(4) {
  border-right: none;
}

/* Remove bottom border for last row */
.camera-feature:nth-child(3),
.camera-feature:nth-child(4) {
  /* border-bottom: none; */
}

/* ✅ Add top border for first row */
.camera-feature:nth-child(1),
.camera-feature:nth-child(2) {
  border-top: 1px solid #b32222;
}
.feature-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
  opacity: 1;
  transform: rotate(0deg); /* angle 0° */
  display: block;
  margin-left: auto;
  margin-right: auto; /* centers icon */
}

.feature-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;          /* SemiBold */
  font-size: 18px;
  line-height: 100%;         /* tighter line spacing */
  letter-spacing: 0;
  text-align: center;        /* center align */
  vertical-align: middle;
  color: #333333;
  margin: 0 0 12px 0;        /* a little more breathing space */
}

.feature-text {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;          /* Regular */
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0;
  text-align: center;        /* center align */
  color:  #333333;
;
  margin: 0;
}


/* ✅ Responsive */
@media (max-width: 992px) {
  .camera-section {
    flex-direction: column;
  }

  .camera-left {
    flex: unset;
    width: 100%;
    height: 300px; /* smaller height for mobile */
  }

  .camera-right {
    grid-template-columns: 1fr;
    border-left: none;
  }

  .camera-feature {
    border-right: none;
  }
}

  .help-cta {
  width: 100%;
  background-color: #DA2E2E;
  padding: 2rem 0;
  box-sizing: border-box;
  color: #ffffff;
  display: flex;

  justify-content: center;
}
/* ✨ Initial hidden state */
.help-heading,
.help-box {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ✨ When in view */
.help-heading.animate,
.help-box.animate {
  opacity: 1;
  transform: translateY(0);
}

/* Add a stagger effect for boxes */
.help-box:nth-child(1) {
  transition-delay: 0.2s;
}
.help-box:nth-child(2) {
  transition-delay: 0.4s;
}

.help-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1400px;
  padding-left: 100px;
  padding-right: 3rem;
  box-sizing: border-box;
}

.help-heading {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 100%;
  text-transform: capitalize;
  margin: 0;
  color: #ffffff;
}

.help-boxes {
  display: flex;
  gap: 2rem;
}
.help-box {
  border: 1px solid #ffffff;
  padding: 1rem;          /* reduced padding */
  width: 14rem;            /* smaller width */
        /* smaller height */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: transparent;
  transition: all 0.3s ease;
}
.help-box span{
    font-size: 18px;
}
.help-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;            /* smaller gap */
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 12px;        /* reduced from 16px */
  line-height: 100%;
  padding-bottom: 1rem;
}

.help-title img {
  width: 1.5rem;            /* smaller icon */
  height: auto;
}

.help-box p {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 14px;        /* smaller text */
  line-height: 130%;
  margin: 0;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .help-container {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 40px;
    padding-right: 40px;
  }

  .help-heading {
    font-size: 3rem;
    margin-bottom: 2rem;
  }

  .help-boxes {
    
    gap: 1.5rem;
    width: 100%;
  }

  .help-box {
    width: 100%;
    max-width: 600px;
    height: auto;
    padding: 1.6rem;
  }

  .help-title {
    font-size: 2rem;
    gap: 1rem;
  }

  .help-title img {
    width: 2rem;
  }

  .help-box p {
    font-size: 1.4rem;
  }
}
/* Responsive Styling */
@media (max-width: 768px) {
  .help-container {
    flex-direction: column;
    gap: 2rem;
    padding: 0 1.6rem;
  }

 .help-heading {
  font-size: 20px !important;
  text-align: left !important;
}

  .help-boxes {
    display: flex;

    align-items: center;
    gap: 1.5rem; /* spacing between boxes */
  }

  .help-box {
    width: 176px !important;
    height: 90px !important;
    border: 1px solid #ffffff !important;
    display: flex;
    
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem !important;
    box-sizing: border-box;
    gap: 0.4rem; /* spacing between title and text */
  }

  .help-box span {
    font-size: 14px !important;
    font-weight: 600;
  }

  .help-title {
    font-size: 12px !important;
    font-weight: 600;
    padding-bottom: 0px;
    margin: 0;
  }

  .help-box p {
    font-size: 12px !important;
    margin: 0;
    line-height: 1.2;
  }
}
.help-box:hover {

 
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  border-color: #fff;
    /* Add smooth + fast transition */
  transition: all 0.3s ease-in-out; 
}

/* Ensure child elements also change color nicely */
.help-box:hover .help-title span,
.help-box:hover p {

  transition: color 0.1s ease-in-out;
}

.rb-cta-section {
  background-color: #DA2E2E;
  height: 160px;
  width: 100%;
  position: relative;
  z-index: 1;
  /* padding-bottom: 120px; */
}
.rb-cta-title2 {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 100%;
  text-transform: capitalize;
  margin-bottom: 1.5rem;
  max-width: 800px; /* adjust to force text wrap */
  word-wrap: break-word;
}

.rb-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.rb-breadcrumb a {
  color: white;
  text-decoration: none;
  font-weight: 400; /* optional: highlight last item */
  font-size: 14px;
  opacity: 0.6; /* faded by default */
  transition: opacity 0.3s ease;
}

.rb-breadcrumb a:hover {
  text-decoration: underline;
  opacity: 0.8; /* slightly brighter on hover */
}
.rb-breadcrumb-icon:hover {
  text-decoration: underline;
  opacity: 0.8; /* slightly brighter on hover */
}
/* last link stays full opacity */
.rb-breadcrumb a:last-of-type {
  opacity: 1;
  font-weight: 400; /* optional: highlight last item */
}
.rb-breadcrumb-icon {
  width: 8px;
  opacity: 0.6;
  height: 8px;
  display: inline-block;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.rb-breadcrumb-icon:last-of-type {
  width: 8px;
  height: 8px;
    opacity: 1;
  display: inline-block;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.vid-video-section {
  background: #f8f9fa;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.rb-cta-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 100%;
  text-transform: capitalize;
  margin-bottom: 1.5rem;
}
/* Works in Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 10px; /* scrollbar width */
}

::-webkit-scrollbar-track {
  background: #f1f1f1; /* track (background) */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #da2e2e; /* scrollbar handle */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a71c1c; /* darker on hover */
}

/* Works in Firefox */
html {
  scrollbar-width: thin;               /* "auto" | "thin" | "none" */
  scrollbar-color: #da2e2e #f1f1f1;    /* thumb | track */
}
/* Hide scrollbar on mobile */
@media (max-width: 768px) {
  /* Chrome, Edge, Safari */
  ::-webkit-scrollbar {
    display: none;
  }

  /* Firefox */
  html {
    scrollbar-width: none; /* hides scrollbar */
  }
}

.rb-floating-product {
  position: absolute;
  top: 50%;                 /* middle of section */
  right: 20px;              /* spacing from right */
  transform: translateY(20%); /* adjust lift (less than -50%) */
  max-width: 300px;         /* cap size */
  width: 25%;               /* responsive */
  z-index: 10;
}

.rb-floating-product img {
  width: 100%;
  height: auto;
  object-fit: contain;      /* keep entire image visible */
  display: block;
}


.rb-blower-description {
  padding-bottom: 120px;
  padding-top: 60px;
}

.rb-blower-description p {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 180%;
  letter-spacing: 0;
  color: #333;
  max-width: 768px;
  margin: 0;
}

.rb-hero-bg {
  width: 100%;
  height: 400px;
  background: #DA2E2E;
  position: relative;
  top: 0;
  left: 0;
}

.rb-breadcrumbs {
  position: absolute;
  top: 40px;
  left: 23%;
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: white;
}

.rb-breadcrumbs a {
  color: white;
  text-decoration: none;
}

.rb-breadcrumbs span {
  color: white;
}

.rb-polygon-img {
  position: absolute;
  top: 60px;
  left: 18%;
  width: 60px;
  height: auto;
}

.rb-hero-title {
  position: absolute;
  top: 100px;
  left: 18%;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 100%;
  color: #fff;
  text-transform: capitalize;
}

.rb-hero-subtitle {
  position: absolute;
  top: 170px;
  left: 18%;
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 100%;
  color: #fff;
}

@media (max-width: 768px) {
  .rb-cta-section {
    width: 440px !important;
    /* height: 280px !important; */
    opacity: 1 !important;
  }
  .rb-blower-description {
    padding-bottom: 60px;
    padding-top: 160px;
}

  .rb-cta-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 20px !important;
    line-height: 100%;
    text-transform: capitalize;
    margin-bottom: 1.5rem;
  }

  .rb-breadcrumb-icon {
    width: 6px !important;
  }

  .rb-breadcrumb a {
    font-size: 10px !important;
  }

  .rb-floating-product {
    position: absolute !important;
    top: 200px !important;
    margin-top: -80px !important;
    width: 260px !important;
    height: 200px !important;
  }

  .rb-floating-product img {
    width: 260px !important;
    height: 180px !important;
    object-fit: contain !important;
    opacity: 1 !important;
    
  }

  .rb-blower-description p {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    text-align: left !important;
    margin-top: 20px;
  }
}
/* Desktop (unchanged) */
.rb-floating-product {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(20%);
  max-width: 300px;
  width: 25%;
  z-index: 10;
}

/* Mobile override */
@media (max-width: 767px) {
  .rb-floating-product {
    right: auto !important;
    left: 50% !important;
    width: 260px !important;
    transform: translate(-50%, 20%) !important;
  }
}

 .solutions-section {
  width: 100%;               /* full width */
        /* optional max width */
  height: 106px;             /* fixed height */
  background-color: #DA2E2E;
  display: flex;
  align-items: center;       /* vertical center */
  justify-content: center;   /* horizontal center */
  position: relative;
              /* position relative to top of page */
  opacity: 1;
}

.solutions-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;          /* SemiBold */
  font-size: 30px;
  line-height: 100%;
  letter-spacing: 0;
  text-transform: capitalize;
  color: #fff;               /* white text */
  margin: 0;
}
/* Container */
.industry-section {
  width: 100%;
  display: flex;
  border-top: 1px solid #DA2E2E;
  border-bottom: 1px solid #DA2E2E;
  min-height: 333px;
  margin-bottom: 70px;
  flex-wrap: wrap; /* allow stacking on small screens */
}

/* Left Image */
.industry-left {
  flex: 0 0 760px;
}

.industry-img {
  width: 100%;
  height: 333px;
  object-fit: cover;
  opacity: 1;
}

/* Right Grid */
.industry-right {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columns on desktop */
  grid-template-rows: repeat(3, 1fr);
  border-left: 1px solid #DA2E2E;
}

/* Individual feature card */
.industry-feature {
  padding: 20px 30px;
  border-bottom: 1px solid #DA2E2E;
  border-right: 1px solid #DA2E2E;
   text-align: left !important;   /* ✅ force content to left */
}

/* Remove unnecessary borders */
.industry-feature:nth-child(2),
.industry-feature:nth-child(4),
.industry-feature:nth-child(6) {
  border-right: none;
}

.industry-feature:nth-child(5),
.industry-feature:nth-child(6) {
  border-bottom: none;
}

/* Typography */
.feature-title2 {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 18px;

    margin: 0 0 8px 0;
    padding-bottom: 10px;
    color: #333;
}

.feature-text2 {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 130%;
  margin: 0;
  color: #333;
}

/* ✅ Responsive */
@media (max-width: 768px) {
  .industry-section {
    flex-direction: column !important;
  }
  .industry-left {
    flex: 0 0 100% !important;
    height: 250px !important;
    border-bottom: 1px solid #DA2E2E !important;
  }
  .industry-img {
    height: 250px !important;
  }
  .industry-right {
    border-left: none !important;
    grid-template-columns: 1fr 1fr !important; /* keep 2 columns */
  }
  .feature-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 12px;
    margin: 0 0 8px 0;
    color: #333;
}
.feature-text {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 10px;
    margin: 0;
    color: #333;
}
.solutions-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0;
    text-transform: capitalize;
    color: #fff;
    margin: 0;
}
}
/* --- Red Section --- */
.pv-cta-section {
  background-color: #DA2E2E;
  height: 300px;
  width: 100%;
  position: relative;
  z-index: 1;
  padding-bottom: 120px;
}

.pv-breadcrumb {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.pv-breadcrumb a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
}

.pv-breadcrumb a:hover {
  text-decoration: underline;
}

.pv-breadcrumb-icon {
  width: 8px;
  height: 8px;
  display: inline-block;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.pv-cta-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 100%;
  text-transform: capitalize;
  margin-bottom: 1.5rem;
}

.pv-hero-bg {
  width: 100%;
  height: 400px;
  background: #DA2E2E;
  position: relative;
  top: 0;
  left: 0;
}

.pv-breadcrumbs {
  position: absolute;
  top: 40px;
  left: 23%;
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: white;
}

.pv-breadcrumbs a {
  color: white;
  text-decoration: none;
}

.pv-breadcrumbs span {
  color: white;
}

.pv-polygon-img {
  position: absolute;
  top: 60px;
  left: 18%;
  width: 60px;
  height: auto;
}

.pv-hero-title {
  position: absolute;
  top: 100px;
  left: 18%;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 100%;
  color: #fff;
  text-transform: capitalize;
}

.pv-hero-subtitle {
  position: absolute;
  top: 170px;
  left: 18%;
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 100%;
  color: #fff;
}

/* --- Card Section --- */
.pv-card-grid-section {
  margin-top: -200px;
  position: relative;
  z-index: 2;
  padding-bottom: 100px;
}

.pv-custom-card {
  height: 100%;
  border: 1px solid #ddd;
  background: #fff;
  text-align: center;
  padding: 1rem;
  overflow: hidden;
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* ✅ smooth transition */
}
.pv-custom-card:hover {
  transform: translateY(-8px); /* slight lift */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* shadow on hover */
}
.pv-card-img {
  width: 100%;
  height: 215px;
  object-fit: cover;
  display: block;
  margin-bottom: 1rem;
}

.pv-card-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin: 1rem 0 0.5rem;
}

.pv-card-text {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #555;
}

.pv-view-more {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #DA2E2E;
  display: inline-flex;      /* keeps it only as wide as content */
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  text-decoration: none;
  position: relative;        /* needed for ::after */
  padding-bottom: 7px;      /* gap between text and line */
}

.pv-view-more::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 90%;              /* exactly the button width */
  height: 2px;              /* thickness of line */
  background-color: #DA2E2E;
}


@media (max-width: 768px) {
  .pv-card-grid-section {
    margin-top: -170px !important;
    padding-top: 0 !important;
  }

  .pv-card-grid-section .row {
    justify-content: center !important;
  }

  .pv-cta-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 22px !important;
    line-height: 100%;
    text-transform: capitalize;
    margin-bottom: 1.5rem;
  }

  .pv-breadcrumb a {
    font-size: 0.8rem;
  }

  .pv-breadcrumb-icon {
    width: 6px;
    height: 6px;
    display: inline-block;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }

  .pv-custom-card .pv-card-img {
    width: 187px !important;
    height: 117px !important;
    position: relative !important;
    margin-left: -20px;
    opacity: 1 !important;
    object-fit: contain !important;
  }

  .pv-card-grid-section .col-12 {
    flex: 0 0 auto !important;
    width: 50% !important;
    max-width: 50% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .pv-cta-section {
    background-color: #DA2E2E;
    height: 300px;
    width: 100%;
    position: relative;
    z-index: 1;
    padding-bottom: 120px;
  }

  .pv-custom-card {
    width: 205px !important;
    height: 325px !important;
    border-width: 1px !important;
    opacity: 1 !important;
    position: relative !important;
  }

  .pv-card-img {
    height: 100px !important;
    object-fit: contain !important;
  }

  .pv-card-title {
    font-size: 14px !important;
    margin: 0.5rem 0 !important;
  }

  .pv-card-text {
    font-size: 8px !important;
    line-height: 1.3 !important;
    max-height: 55px !important;
    overflow: hidden !important;
  }

  .pv-view-more {
    font-size: 12px !important;
    white-space: nowrap;
    display: inline-block;
    padding-bottom: 0px;
  }

  .pv-view-arrow {
    width: 16px !important;
    height: 16px !important;
  }
}
.faq-cta-texts {
  font-family: 'Manrope', sans-serif;
  font-size: 30px;
  font-weight: 600;
  color: #FAFAFA;
  margin: 0;
  line-height: 100%;
}
.why-choose-us {
  padding: 60px 0px;
  background-color: #fff;
  color: #00233B;
}

/* Full-width red heading background */
.heading-red {
  width: 100%;
  background-color: #DA2E2E;
  padding: 20px 0; /* vertical padding for the heading */
}

.heading-red h3 {
  font-family: 'Fahkwang', sans-serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 100%;
  text-transform: capitalize;
  color: #fff;
  text-align: left;          /* left align text */
  margin: 0;
  padding-left: 40px;        /* space from the left edge */
}

.why-choose-us .reasons {
  list-style-type: disc;
  padding-left: 40px;        /* aligns list with heading */
  padding-top: 40px;
}

.why-choose-us .reasons li {
   font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  margin-bottom: 24px;
  color: #333333;
}
@media (max-width: 767px) {

  .faq-cta-texts {
    font-size: 22px;
  }
  .why-choose-us .reasons {
    padding-left: 20px; /* less padding on mobile */
    padding-top: 24px;
  }
  .why-choose-us .reasons li {
    font-size: 18px;
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .faq-cta-texts {
    font-size: 18px;
  }
  .why-choose-us .reasons li {
    font-size: 16px;
  }
}



/* --- Red Section --- */
.pv2-cta-section {
  background-color: #DA2E2E;
  width: 100%;
  position: relative;
  z-index: 1;
  padding-bottom: 120px;
}

.pv2-breadcrumb {
     display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: -60px;
    margin-top: 100px;
}

.pv2-breadcrumb a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
}

.pv2-breadcrumb a:hover {
  text-decoration: underline;
}

.pv2-breadcrumb-icon {
  width: 8px;
  height: 8px;
  display: inline-block;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.pv2-cta-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 100%;
  text-transform: capitalize;
  margin-bottom: 1.5rem;
  /* margin-left: 100px; */
  padding-top: 100px;
}

/* --- Card Section --- */
.pv2-card-grid-section {
  margin-top: -100px;
  position: relative;
  z-index: 2;
  margin-left: 300px;
  padding-bottom: 50px;
}

.pv2-card-grid-section .col-12 {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

.pv2-custom-card {
  width: 752px;
  height: 410px;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  padding: 30px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.pv2-card-img {
  width: 344px;
  height: 215px;
  object-fit: cover;
  margin: 0 auto 20px;
  display: block;
  opacity: 1;
}

.pv2-card-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 150%;
  text-align: left;
  margin-bottom: 10px;
}

.pv2-card-subtitle {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  text-align: left;
  margin-bottom: 10px;
}

.pv2-card-list {
  list-style-type: disc;
  padding-left: 20px;
  margin-bottom: 20px;
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 16px;
  text-align: left;
}

.pv2-card-list li {
  margin-bottom: 5px;
  line-height: 150%;
}

.pv2-card-footer,
.pv2-bottom-icon {
  text-align: center;
  margin-top: 10px;
}

.pv2-text-link {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #DA2E2E;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  justify-content: center;
}

.pv2-text-link:hover {
  text-decoration: underline;
}

.pv2-link-icon {
  width: 20px;
  height: 20px;
}

/* --- Client Section --- */
.pv2-client-section {
  position: relative;
  width: 100%;
  height: 278px;
  background-color: #DA2E2E;
  display: flex;
  align-items: center;
  overflow: visible;
  margin-top: 100px;
}

.pv2-client-section .container {
  max-width: 1728px;
  margin: 0 auto;
  padding: 0 125px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pv2-client-left {
  max-width: 987px;
}

.pv2-client-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.4;
  color: #FAFAFA;
  margin-bottom: 20px;
}

.pv2-client-btn {
  display: inline-block;
  padding: 16px 32px;
  background-color: #FAFAFA;
  color: #DA2E2E;
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.pv2-client-btn:hover {
  background-color: #fff;
  color: #b32222;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.pv2-client-right {
  position: absolute;
  right: 80px;
  top: -60px;
}

.pv2-client-img {
  width: 244px;
  height: 338px;
  object-fit: contain;
}

/* --- Responsive --- */
@media (max-width: 992px) {
  .pv2-custom-card {
    width: 100%;
    height: auto;
  }

  .pv2-card-img {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 768px) {
  .pv2-cta-section {
    background-color: #DA2E2E;
    width: 100%;
    position: relative;
    z-index: 1;
    padding-bottom: 0px;
  }

  .pv2-cta-title {
    margin-left: 0;
    font-size: 24px;
    padding-top: 24px !important;
  }

  .pv2-breadcrumb a {
    font-size: 0.8rem;
  }

  .pv2-breadcrumb-icon {
    width: 6px;
    height: 6px;
  }

  .pv2-card-grid-section {
    margin-left: 0;
    margin-top: 20px;
    padding: 0 15px;
    padding-bottom: 100px;
  }

  .pv2-custom-card {
    flex-direction: column;
    text-align: center;
    width: 340px !important;
    height: 600px !important;
    padding: 20px;
    margin: 0 auto;
  }

  .pv2-card-img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
  }

  .pv2-card-content {
    text-align: center;
  }

  .pv2-card-title {
    font-size: 16px;
  }

  .pv2-card-subtitle,
  .pv2-card-list li {
    font-size: 14px;
  }

  .pv2-text-link {
    font-size: 16px;
  }

  .pv2-link-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .pv2-client-section {
    width: 440px !important;
    height: 180px !important;
    margin: 0 auto !important;
    padding-right: 20px !important;
    padding-left: 10px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .pv2-client-section .container {
    padding-right: 20px !important;
    padding-left: 0px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .pv2-client-left {
    max-width: 50% !important;
  }

  .pv2-client-title {
    font-size: 16px !important;
    font-weight: 400 !important;
    margin-bottom: 10px !important;
  }

  .pv2-client-btn {
    font-size: 12px !important;
    padding: 8px 16px !important;
  }

  .pv2-client-right {
    position: relative !important;
    right: 0 !important;
    top: 0 !important;
  }

  .pv2-client-img {
    width: 164px !important;
    height: 268px !important;
    margin-left: 10px !important;
    object-fit: contain !important;
    margin-top: -85px;
  }
}
.connect-section {
  position: relative;
  width: 100%;
  height: 188px;
  background-color: #DA2E2E;
  display: flex;
  align-items: center;
  overflow: visible; /* allows image overlap */
}

.connect-section .container {
  max-width: 1728px;
  margin: 0 auto;
  padding: 0 125px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Left content */
.connect-left {
  max-width: 987px;
}

.connect-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.4;
  color: #FAFAFA;
  margin-bottom: 20px;
}

.connect-btn {
display: inline-block;
    padding: 8px 16px;
    background-color: #FAFAFA;
    color: #DA2E2E;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.connect-btn:hover {
  background-color: #fff;
  color: #b32222;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Right image */
.connect-right {
  position: absolute;
  right: 80px;
  top: -60px; /* overlaps only from top */
}

.connect-img {
  width: 244px;
  height: 248px;
  object-fit: contain;
}

@media (max-width: 767px) {
  .connect-section {
    width: 440px !important;
    height: 180px !important;
    margin: 0 auto !important;
    padding-right: 20px !important;
    padding-left: 10px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .connect-section .container {
    padding-right: 20px !important;
    padding-left: 0px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .connect-left {
    max-width: 50% !important;
  }

  .connect-title {
    font-size: 14px !important;
    font-weight: 400 !important;
    margin-bottom: 10px !important;
  }

  .connect-btn {
    font-size: 12px !important;
    padding: 8px 16px !important;
  }

  .connect-right {
    position: relative !important;
    right: 0 !important;
    top: 0 !important;
  }

  .connect-img {
    width: 134px !important;
    height: 240px !important;
    margin-left: 10px !important;
    object-fit: contain !important;
    margin-top: -38px;
  }
}
/* --- Card Section --- */
.blower-card {
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  text-align: center;
  padding: 16px;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  
  justify-content: space-between;
  gap: 12px;
  height: 100%;
}

.blower-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.blower-card-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.blower-card-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #333333;
}

.blower-view-more {

    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    color: #DA2E2E;
    gap: 0.5rem;
    cursor: pointer;
    padding-bottom: 20px;
    align-items: center;
    text-decoration: none;

}
.blower-view-more span {
    border-bottom: 2px solid #DA2E2E;
    padding-bottom: 4px;
}
.blower-view-arrow {
  width: 16px;
  height: 16px;
}

/* Ensure all cards same height */
.row.g-4 > .col-12 > .blower-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* --- Responsive Grid --- */
/* 2 per row for tablets */
/* Tablet: 2 per row */
@media (max-width: 992px) {
  .row.g-4 > .col-12.col-md-6.col-lg-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  
}

/* Mobile: 2 per row */
@media (max-width: 576px) {
    .blower-card {
        padding: 8px;        /* smaller padding */
        gap: 5px;      
         font-family: 'Manrope', sans-serif;      /* tighter spacing between elements */
        height: 200px !important;        /* adjust height automatically */
    }.blower-grid-section {
    position: relative;
    z-index: 2;
     margin-top: 0px !important; 
    padding-bottom: 50px;
}
.blower-date {
    font-size: 12px !important;
    color: gray;
    margin: 0;
}
    .blower-card-img {
        height: 160px !important;       /* smaller image height */
    }

    /* Ensure 2 cards per row on mobile */
    .row.g-4 > .col-12.col-md-6.col-lg-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .blower-card-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #333333;
}
}
/* Make cards overlap the section above */
.blower-grid-section {
  position: relative;
  z-index: 2; /* ensures cards appear above the red section */
  margin-top: -100px; /* adjust this value to control overlap */
  padding-bottom: 50px;
}
    .prod-highlight-section {
  background-color: #DA2E2E;
  height: 250px;
  width: 100%;
  position: relative;
  z-index: 1;
  padding-bottom: 120px;
}

.prod-highlight-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 100%;
  text-transform: capitalize;
  margin-bottom: 1.5rem;
}

.prod-highlight-subtext {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 100%;
  margin: 0;
}
/* Mobile screens */
@media (max-width: 576px) {
    .prod-highlight-section h1 {
        font-size: 20px;
    }
    .blower-view-more span {
    border-bottom: 2px solid #DA2E2E;
    padding-bottom: 4px;
    font-size: 12px;
}
}
/* Adjust font size and spacing on tablets */
@media (max-width: 992px) {
    .rb-desc-list {
        font-size: 17px;
        padding-left: 15px;
        max-width: 600px;  /* optional: restrict width on tablets */
    }
    .prod-highlight-section {
    background-color: #DA2E2E;
    height: 50px;
    width: 100%;
    position: relative;
    z-index: 1;
    padding-bottom: 0px;
}
}

/* Adjust for mobile screens */
@media (max-width: 576px) {
    .rb-desc-list {
        font-size: 16px;
        padding-left: 10px;
        line-height: 1.6;
        max-width: 100%; /* take full width on mobile */
    }
}

.rb-desc-list {
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  color: #333333;
  padding-left: 20px;
  width: 600px; /* or width: 100% for responsiveness */
  line-height: 1.8; /* more spacing between lines */
}

.rb-desc-list li {
  margin-bottom: 20px; /* more space between main points */
  position: relative;
}

/* Add a subtle bullet style for main list */
.rb-desc-list > li::marker {
  font-size: 16px;
  color: #333333; /* accent color for bullets */
  font-weight: bold;
}

/* Sublist styling */
.rb-desc-list li ul {
  margin-top: 12px; /* more spacing above sublist */
  padding-left: 25px;
  list-style-type: disc;
}

.rb-desc-list li ul li {
  margin-bottom: 12px; /* space between sub-items */
  font-size: 16px; /* slightly smaller for sub-items */
  color: #333333;
  line-height: 1.6;
}

/* Optional: subtle hover highlight for readability */
 .blower-date {
    font-size: 16px;
    color: gray;
    margin: 0;
  }
  .rb-cta-subtitle {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-style: normal; /* "Regular" corresponds to normal */
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0;
  margin-top: 10px; /* spacing below H2 */
  color: #fff; /* match your text-white */
}
.rb-cta-section2 {
    background-color: #DA2E2E;
    height: 190px;
    width: 100%;
    position: relative;
    z-index: 1;
    /* padding-bottom: 120px; */
}
 .blower-card2 {
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  text-align: center;
  padding: 16px;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  height: 500px !important;
  justify-content: space-between;
  gap: 12px;
  height: 100%;
}

.blower-card2:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.blower-card-img2 {
  width: 100%;
  height: 470px;
  object-fit: cover;
}
.blower-grid-section2 {
  position: relative;
  z-index: 2; /* ensures cards appear above the red section */
  margin-top: -100px; /* adjust this value to control overlap */
  padding-bottom: 50px;
}
.rb-desc-list2 {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    color: #333333;
    padding-left: 20px;
    font-weight: 400;
    width: 600px;
    line-height: 1.8;
    padding-bottom: 50px;
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .blower-card-img2 {
    max-height: 250px;
  }
  .rb-desc-list2 {
    width: 100%;
    padding-left: 0;
  }
}

@media (max-width: 576px) {
  .blower-card-img2 {
    max-height: 200px;
  }
}
/* Medium screens (tablet) */
@media (max-width: 992px) {
  .blower-card2 {
            height: auto !important;
  }
  .blower-card-img2 {
    max-height: 250px;
  }
  .rb-desc-list2 {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: #333333;
    padding-left: 20px;
    font-weight: 400;
    width: auto;
    line-height: 1.8;
    padding-bottom: 50px;
}
}

/* Small screens (mobile) */
@media (max-width: 576px) {
  .blower-card2 {
  
  }
  .blower-card-img2 {
    max-height: 200px;
  }
}
/* Quote Section */
.quote-section {
  width: 1126px;
  height: 788px;
  max-width: 100%;
  padding: 40px 30px;
  margin: 60px auto;
  border: 1px solid #ccc;
  background: #FAFAFA;
  box-sizing: border-box;
  position: relative;
}

.quote-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 32px;
  margin-bottom: 15px;
  color: #000;
}

.quote-subtitle {
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  color: #333;
  margin-bottom: 25px;
}

.quote-form .form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.quote-form .form-group {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.quote-form input,
.quote-form select {
  padding: 12px 15px;
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  border: 1px solid #333333;
  /* border-radius: 4px; */
  box-sizing: border-box;
  width: 100%;
}

.quote-submit {
 background-color: #DA2E2E;
      color: #fff;
      width: 126px;
      height: 44px;
      padding: 16px;
      border: none;
      text-decoration:none;
      font-family: 'Manrope', sans-serif;
      font-size: 16px;
      font-weight: 400;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.3s ease;
}

/* fix checkbox alignment */
.quote-terms{
  display: flex;          /* sit on one line, but wraps nicely */
  align-items: center;           /* vertical centering */
  gap: 10px;                     /* space between box and text */
  margin: 15px 0;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  color: #333;
  cursor: pointer;               /* whole label clickable */
}
.quote-terms input{
  width: 18px;
  height: 18px;
  margin: 0;                     /* remove default offset */
  vertical-align: middle;
  accent-color: #DA2E2E;         /* optional: brand color */
}


.quote-note {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #444;
}

/* How it Works Section */
.how-it-works {
  width: 1126px;
  max-width: 100%;
  margin: 60px auto;
  /* padding: 40px 30px; */
  background: #fff;
  text-align: center;
  font-family: 'Manrope', sans-serif;
}

.how-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 40px;
  text-align: left; /* matches quote-section alignment */
  color: #000;
}

.steps-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  padding-top: 20px;
}

/* Red line across steps */
.steps-wrapper::before {
  content: "";
  position: absolute;
  top: 80px;   /* move line well below the icons */
  left: 0;
  right: 0;
  height: 2px;
  background: #DA2E2E;
  z-index: 1;
}

/* Each step */
.step {
  /* flex: 1; */
  position: relative;
  text-align: left;
}

/* Dot sitting on the line */
.step::before {
  content: "";
  position: absolute;
  top: 55px;  /* aligns with line */
  left: 0%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background: #DA2E2E;
  border-radius: 50%;
  z-index: 2;
}

/* Icons ABOVE the line */
.step-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 40px;
  margin-top: -20px;
  position: relative;
  text-align: left;
  z-index: 3;  /* ensures icons always on top */
}

.step h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;   /* tighter spacing */
  color: #000;
  text-align: left;
}

.step p {
  font-size: 16px;
  color: #233;
  max-width: 250px;
  text-align: left;
  font-weight: 400;
  margin: 0;            /* remove auto centering */
  line-height: 1.6;     /* improve readability */
  padding-top: 6px;     /* adds gap below the heading */
}

/* Add a wrapper inside each step for better vertical alignment */
.step-content {
  margin-top: 20px;     /* pushes text down so it feels under the icon/dot */
  padding-left: 10px;   /* small left padding for balance */
}
/* Responsive for tablets and smaller devices */
@media (max-width: 992px) {
  .steps-wrapper {
    justify-content: space-around;
  }
  .step {
    flex: 1 1 45%; /* two per row */
    min-width: 180px;
  }
}

/* Responsive for mobile */
@media (max-width: 576px) {
  .steps-wrapper {
    flex-direction: column; /* stack vertically */
    padding-top: 60px;
  }
  .steps-wrapper::before {
    top: 0;
    left: 36px; /* offset from left */
    width: 2px;
    height: 100%;
  }
  .step {
    flex: 1 1 100%;
    margin-bottom: 60px;
    text-align: left;
    padding-left: 50px; /* space for vertical line */
  }
  .step::before {
    top: 0;
    left: 30px;
    transform: translateX(0);
  }
  .step-icon {
    margin-top: 0;
    margin-bottom: 20px;
  }
}

/* Responsive */

 .contact-section {
  width: 1126px;
  max-width: 100%;
  /* min-height: 909px; */
  padding: 60px 30px;
  margin: 60px auto; /* added vertical spacing above and below */
  border: 1px solid #ccc;
  background: #fff;
  box-sizing: border-box;
  position: relative;
}
.contact-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 32px; /* reduced from 40px */
  line-height: 100%;
  text-transform: capitalize;
  margin-bottom: 20px;
}
.contact-subtitle {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #333333;
  line-height: 100%;
  margin-bottom: 15px;
}

.contact-required {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #333333;
  line-height: 100%;
  margin-bottom: 30px;
}

.contact-form .form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.contact-form input,
.contact-form select {
  flex: 1;
  padding: 12px 15px;
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  border: 1px solid #333333;
  
  box-sizing: border-box;
}
.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url('assets/chevron-down.png') no-repeat right 15px center;
  background-size: 12px 12px;
  padding-right: 40px; /* extra space for arrow */
}

.contact-submit {
  padding: 12px 30px;
  background-color: #DA2E2E;
  color: #fff;
  border: none;
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  cursor: pointer;
  margin-top: 10px;

}

.contact-terms {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: 14px !important;
  margin: 15px 0;
}

.contact-note {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #444;
}
.contact-form .form-group {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.contact-form label {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 5px;
  color: #333;
}



  .intl-enquiry {
  max-width: 420px; /* fixed width, same across devices */
}

.intl-enquiry p {
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  line-height: 1.5;  /* ensures consistent spacing */
  margin: 6px 0;
  color: #333;
}

.intl-enquiry a {
  text-decoration: none;
  color: #333;
  font-weight: 600;
}

 .gateway-section {
  width: 100%;
  border: 1px solid #ccc;
  background: #fff;
  margin: 60px auto;
  box-sizing: border-box;
  position: relative;
  height: 466px;
  overflow: hidden;
}

.gateway-section .container {
  width: 1126px;
  max-width: 100%;
  height: 100%;
  display: flex;
  align-items: center; /* centers content vertically */
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.gateway-content {
  flex: 1;
  padding-right: 40px;
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: #333;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gateway-content h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

.gateway-content h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 20px 0 10px;
}

.gateway-content p {
  display: flex;
  align-items: center; /* centers icons vertically with text */
  gap: 12px;           /* proper spacing between icon and text */
  margin: 6px 0;
}

.gateway-content p img.icon {
  width: 20px;   /* slightly larger for balance */
  height: 20px;
  flex-shrink: 0; /* prevents resizing */
  margin: 0;      /* remove top offset */
}

.gateway-content a {
  text-decoration: none;
  color: #333;
  font-weight: 600;
}

.gateway-content a:hover {
  text-decoration: underline;
}

.gateway-image {
  position: absolute;
  top: 0;
  right: 0;
  height: 466px;
  z-index: 1;
}

.gateway-image img {
  width: 521px;
  height: 466px;
  object-fit: cover;
  display: block;
}



   .other-offices {
  padding: 60px 0;
}

.other-offices h3 {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 40px;
  color: #d32f2f;
}

.office-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.office-card {
  display: flex;
  align-items: flex-start;
  width: 555px;
  height: 300px;
  padding: 20px;
  border: 1px solid #ddd;
  
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.office-icon {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.office-divider {
  width: 1px;
  background: #ccc;
  margin: 0 20px;
}

.office-details {
  max-width: 520px; /* keeps content readable */
  margin-bottom: 30px; /* space below each office block */
}

.office-details h4 {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 15px; /* spacing after heading */
  color: #333;
}

.office-line {
  display: flex;
   /* center icon and text vertically */
  gap: 10px;
  margin-bottom: 12px;
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: #333;
}


.office-line:last-child {
  margin-bottom: 0; /* remove extra space on last line */
}

.office-icon-sm {
  width: 12px;   /* slightly bigger for clarity */
  height: 12px;
  flex-shrink: 0;
  margin-top: 5px;     /* remove top offset */
}
.office-line a {
  text-decoration: none;
  color: #0066cc;
}

.office-line a:hover {
  text-decoration: underline;
}


.office-details p {
  margin: 0 0 16px 0;   /* 16px bottom gap between lines */
  font-size: 14px;
  line-height: 1.4;
}

.office-details p:last-child {
  margin-bottom: 0;     /* remove gap after last line */
}

.office-details a {
  text-decoration: none;
  color: #000;
}
.office-divider {
  width: 1px;                /* keep it as vertical line */
  height: 250px;             /* match the given size */
  background: #333333;       /* your specified color */
  margin: 0 20px;
  flex-shrink: 0;
}
/* Media Queries for Responsive Design */

/* Tablet and smaller desktop screens */
@media (max-width: 1200px) {
  .gateway-section .container {
    width: 100%;
    padding: 0 20px;
  }
  
  .gateway-image img {
    width: 450px;
  }
  
  .office-card {
    width: 100%;
    max-width: 520px;
  }
}

/* Tablet landscape */
@media (max-width: 1024px) {
  .gateway-section {
    height: auto;
    min-height: 400px;
    margin: 40px auto;
  }
  
  .gateway-section .container {
    padding: 20px;
  }
  
  .gateway-image img {
    width: 400px;
    height: 400px;
  }
  
  .gateway-content {
    padding-right: 20px;
    font-size: 16px;
  }
  
  .office-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  
  .office-card {
    height: auto;
    min-height: 280px;
  }
}

/* Tablet portrait */
@media (max-width: 768px) {
  .gateway-section {
    height: auto;
    padding: 30px 0;
  }
  
  .gateway-section .container {
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
  }
  
  .gateway-image {
    position: relative;
    height: 250px;
    width: 100%;
    order: -1;
    margin-bottom: 20px;
  }
  
  .gateway-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
  }
  
  .gateway-content {
    padding-right: 0;
    order: 1;
  }
  
  .other-offices {
    padding: 40px 0;
  }
  
  .other-offices h3 {
    font-size: 28px;
    margin-bottom: 30px;
    text-align: center;
  }
  
  .office-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .office-card {
    flex-direction: column;
    height: auto;
    padding: 20px;
    text-align: center;
  }
  
  .office-icon {
    align-self: center;
    margin-bottom: 15px;
  }
  
  .office-divider {
    display: none;
  }
  
  .office-details {
    text-align: left;
    margin-bottom: 0;
  }
  
  .office-details h4 {
    text-align: center;
    margin-bottom: 20px;
  }
}

/* Mobile landscape */
@media (max-width: 640px) {
  .gateway-section {
    margin: 20px auto;
    padding: 20px 0;
  }
  
  .gateway-content h3 {
    font-size: 16px;
  }
  
  .gateway-content h4 {
    font-size: 14px;
  }
  
  .gateway-content {
    font-size: 14px;
  }
  
  .other-offices h3 {
    font-size: 24px;
  }
  
  .office-details h4 {
    font-size: 20px;
  }
  
  .office-line {
    font-size: 16px;
  }
}

/* Mobile portrait */
@media (max-width: 480px) {
  .gateway-section .container {
    padding: 15px;
  }
  
  .gateway-image {
    height: 200px;
    margin-bottom: 15px;
  }
  
  .gateway-image img {
    height: 200px;
  }
  
  .gateway-content {
    font-size: 14px;
  }
  
  .gateway-content h3 {
    font-size: 16px;
    margin-bottom: 10px;
  }
  
  .gateway-content h4 {
    font-size: 14px;
    margin: 15px 0 8px;
  }
  
  .gateway-content p {
    gap: 8px;
    margin: 4px 0;
  }
  
  .intl-enquiry {
    /* padding: 15px; */
    margin: 15px 0;
  }
  
  .other-offices {
    padding: 30px 0;
  }
  
  .other-offices .container {
    padding: 0 15px;
  }
  
  .other-offices h3 {
    font-size: 22px;
    margin-bottom: 25px;
  }
  
  .office-card {
    padding: 15px;
  }
  
  .office-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 12px;
  }
  
  .office-details h4 {
    font-size: 18px;
    margin-bottom: 15px;
  }
  
  .office-line {
    font-size: 14px;
    gap: 8px;
    margin-bottom: 10px;
  }
  
  .office-icon-sm {
    width: 10px;
    height: 10px;
    margin-top: 3px;
  }
}

/* Small mobile devices */
@media (max-width: 320px) {
  .gateway-section .container {
    padding: 10px;
  }
  
  .gateway-content {
    font-size: 13px;
  }
  
  .gateway-content h3 {
    font-size: 15px;
  }
  
  .other-offices h3 {
    font-size: 20px;
  }
  
  .office-card {
    padding: 12px;
  }
  
  .office-details h4 {
    font-size: 16px;
  }
  
  .office-line {
    font-size: 13px;
  }
}

.semiconductor-section {
    padding: 60px 0;
    background: #fff;
  }

  /* Paragraph Styling */
  .semiconductor-section p {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    width: 60%;
    letter-spacing: 0;
    margin-bottom: 25px;
    color: #444;
  }

  /* Headings */
  .semi-heading {
    font-size: 30px;
    font-weight: 600;
    margin: 40px 0 20px;
    color: #222;
  }

  /* Subtitles (bold labels inside paragraphs) */
  .semi-subtitle {
    font-weight: 600;
    margin: 20px 0 10px;
    color: #333333;
  }

  /* Extra spans inside paragraphs */
  .semi-text {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
        width: 60%;
    letter-spacing: 0;
    color: #555;
    margin-bottom: 25px;
  }
     @media (max-width: 768px) {
            .container {
                padding: 0 10px; /* Reduce padding for smaller screens */
            }

            .row {
                /* Stack columns vertically */
            }

            .col-lg-12 {
                padding: 10px; /* Adjust padding for content */
            }

            /* .rb-floating-product {
                max-width: 250px; 
                margin: 15px auto;
            } */
.rb-cta-title2
 {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    text-transform: capitalize;
    margin-bottom: 1.5rem;
    max-width: 800px;
    word-wrap: break-word;
}
.rb-cta-subtitle{
  font-size: 12px;
}
              .rb-floating-product img {
      
    }
    .rb-breadcrumb-current {
    color: #fff;
    display: inline-block;
    max-width: 250px;
    font-size: 10px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.rb-desc-list li {
    margin-bottom: 20px;
    position: relative;
    font-size: 14px;
}.rb-desc-list li ul li {
    margin-bottom: 12px;
    font-size: 12px;
    color: #333333;
    line-height: 1.6;
}
            .semi-heading {
                font-size: clamp(1.3rem, 3.5vw, 1.8rem); /* Smaller headings */
            }

            .semi-intro,
            .semi-text,
            .semi-subtitle {
                font-size: clamp(0.85rem, 2.2vw, 0.95rem); /* Smaller text */
                line-height: 1.5; /* Tighter line spacing */
            }

            .semi-subtitle {
                font-size: clamp(0.95rem, 2.8vw, 1.1rem); /* Adjust subtitle size */
            }
        }

        /* Responsive adjustments for mobile screens (max-width: 576px) */
        @media (max-width: 576px) {
            .container {
                padding: 0 8px; /* Further reduce padding for mobile */
            }

            /* .rb-floating-product {
                max-width: 200px; 
                margin: 10px auto;
            } */

            .semi-heading {
                font-size: clamp(1.2rem, 3vw, 1.5rem); /* Even smaller headings */
            }

            .semi-intro,
            .semi-text,
            .semi-subtitle {
                font-size: clamp(0.8rem, 2vw, 0.9rem);
                width: 100%; /* Smallest text size */
                line-height: 1.4;
            }

            .semi-subtitle {
                font-size: clamp(0.9rem, 2.5vw, 1rem); /* Smaller subtitle */
            }

            .semiconductor-section p {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-top: 0px;
    font-size: 12px;
    width: 100%;
    letter-spacing: 0;
    margin-bottom: 25px;
    color: #444;
}
.semi-intro{
  margin-top: 180px !important;
}
        }
        .red-link {
  color: #DA2E2E;
  text-decoration: none; /* removes underline */
  font-weight: 500;      /* makes it stand out */
}

.red-link:hover {
  text-decoration: underline; /* underline on hover */
}
   /* Paragraph Styling */
  .semiconductor-section2 p {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    width: 80%;
    letter-spacing: 0;
    margin-bottom: 25px;
    padding-top: 20px;
    color: #444;
  }
   .semi-text2 {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
        width: 80%;
    letter-spacing: 0;
    color: #555;
    margin-bottom: 25px;
  }
          .semi-text2 ol li {
  margin-bottom: 1.2rem; /* adjust spacing as needed */
  line-height: 1.6;      /* improves readability */
}
        @media (max-width: 576px) {
                .semiconductor-section2 p {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-top: 0px;
    font-size: 12px;
    width: 100%;
    letter-spacing: 0;
    margin-bottom: 25px;
    color: #444;
    
}
/* Data Sheet Button */
.datasheet-btn {
  display: inline-block;      /* so it behaves like a button */
  background-color: #DA2E2E; /* button color */
  color: #fff;                /* text color */
  font-weight: 600;
  padding: 10px 20px;         /* adjust size */
  
  text-decoration: none;      /* remove underline */
  transition: all 0.3s ease;
  margin-top: 20px;           /* spacing from text */
}

.datasheet-btn:hover {
  background-color: #b12727;  /* slightly darker on hover */
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

 .semi-intro2,
            .semi-text2,
            .semi-subtitle {
                font-size: clamp(0.85rem, 2.2vw, 0.95rem); /* Smaller text */
                line-height: 1.5; /* Tighter line spacing */
            }
            .semi-intro2,
            .semi-text2,
            .semi-subtitle {
                font-size: clamp(0.8rem, 2vw, 0.9rem);
                width: 100%; /* Smallest text size */
                line-height: 1.4;
            }
    
        }