.services-section {
  display: flex;
  /* flex-wrap: wrap; */
  justify-content: space-between;
  align-items: center;
  background-color: #f3fbfe;
  padding-left: 40px;
  padding-right: 40px;
  max-width: 100%;
  /* margin: 40px auto; */
  border-radius: 8px;
}

.service-box {
  display: flex;
  /* Align items in a row */
  align-items: center;
  width: 48%;
  /* Adjust width for responsiveness */
  padding: 15px;
  border-radius: 8px;
  /* background: #f8f8f8; */
}

.row-features {
  flex-shrink: 0;
  /* Prevent image from shrinking */
  margin-right: 15px;
}

.service-box img {
  width: 60px;
  height: 60px;
}

.service-content {
  display: flex;
  flex-direction: column;
}

.service-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #1c352d;
}

.service-description {
  font-size: 14px;
  color: #666;
}

.swiper {
  width: 80%;
  position: relative;
}

.swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.swiper-slide img {
  width: 100px;
  /* Adjust size as needed */
  height: auto;
  margin-bottom: 10px;
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  /* Adjust color */
}

.swiper-button-prev {
  left: -40px;
  /* Adjust positioning */
}

.swiper-button-next {
  right: -40px;
}

/* Ensure the buttons are visible on all screen sizes */
@media (max-width: 768px) {
  .swiper {
    width: 100%;
  }

  .swiper-button-prev,
  .swiper-button-next {
    display: block;
  }
}

.tp-category-content {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s ease-in-out,
    transform 0.8s ease-in-out;
}

/* This class is added when the element enters the viewport */
.tp-category-content.show {
  opacity: 1;
  transform: translateY(0);
}

/* Delayed animation for each element */
.tp-category-content.one {
  transition-delay: 0.2s;
}

.tp-category-content.two {
  transition-delay: 0.6s;
}

.tp-category-content.three {
  transition-delay: 1s;
}

.tp-category-content.four {
  transition-delay: 1.4s;
}

.tp-category-content.five {
  transition-delay: 1.8s;
}

body {
  overflow-x: hidden;
}

/* General Styles */
.maincon {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #f3fbfe;
  text-align: center;
}

/* Container */
.main-container {
  padding: 50px 20px;
  overflow: hidden;
}

/* Section Title */
.section-title {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 20px;
}

/* Grid Layout */
.grid-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 3 Columns by default */
  gap: 30px;
  padding: 0 20px;
}

/* Grid Items */
.grid-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* Icon */
.icon {
  width: 40px;
  height: 40px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(1, 1fr);
    /* 2 Columns on Mobile */
  }
}

textarea.form-input {
  height: 180px;
  padding: 15px !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
  resize: none;
  overflow-y: auto;
  color: #000;
  box-sizing: border-box;
  font-size: 16px;
  line-height: normal !important;
}

textarea.form-input::placeholder {
  color: #888;
  opacity: 1;
}

.submit-full {
  width: 100%;
  border: none !important;
}

.submit-full::before {
  width: 300% !important;
  height: 600px !important;
  top: 100% !important;
  left: 100% !important;
  transition: all 1s ease-out 0s !important;
  transform: translate(-10%, -10%) scale(0) !important;
}

.submit-full:hover::before {
  transform: translate(-50%, -50%) scale(1) !important;
}

/* ==========================================================================
    Mobile Header & Mobile Menu Responsiveness Overrides
    ========================================================================== */

@media (max-width: 1199px) {

  /* 1. Header heights & layout */
  .tp-header-logo {
    height: 70px !important;
    line-height: 70px !important;
    padding-left: 0px !important;
  }

  .tp-header-bottom,
  .tp-header-height,
  #header-sticky,
  .tp-header-sticky {
    height: 70px !important;
  }

  .tp-header-sticky .tp-header-logo {
    height: 70px !important;
    line-height: 70px !important;
    padding-left: 0px !important;
  }

  /* 2. Hamburger button alignment, centering & sizing */
  .tp-header-hamburger-btn {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    margin-right: 0 !important;
    width: 70px !important;
    height: 70px !important;
    line-height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .tp-header-hamburger-btn button {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }

  .tp-header-hamburger-btn button span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .tp-header-sticky .tp-header-hamburger-btn,
  .tp-header-sticky .tp-header-2-hamburger-btn {
    height: 70px !important;
    line-height: 70px !important;
  }

  /* 3. Off-canvas drawer width and overflow responsiveness */
  .offcanvas__area {
    max-width: 100% !important;
    width: 400px !important;
    /* Keep default 400px if space allows */
  }

  @media (max-width: 450px) {
    .offcanvas__area {
      width: 100% !important;
    }
  }

  .offcanvas__close-btn {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 4. Hide contact details, social media widgets, and gallery popup in off-canvas */
  .offcanvas__contact,
  .offcanvas__social,
  .offcanvas__popup {
    display: none !important;
  }

  /* Reduce spacing for a compact and clean off-canvas menu */
  .offcanvas__top {
    margin-bottom: 20px !important;
  }

  .offcanvas__wrapper {
    padding-top: 30px !important;
    padding-bottom: 25px !important;
  }

  /* Reset mean-container and mean-bar bottom margin to reduce empty space below Contact Us */
  .mean-container,
  .mean-container .mean-bar {
    margin-bottom: 0px !important;
  }

  /* Style the injected mobile button container */
  .offcanvas__btn-mobile {
    padding: 0 15px !important;
    margin-top: 15px !important;
    margin-bottom: 25px !important;
    clear: both !important;
  }

  /* MeanMenu compact, consistent height & flex alignment overrides */
  .mean-container .mean-nav {
    background: transparent !important;
    float: none !important;
    width: 100% !important;
  }

  .mean-container .mean-nav ul {
    width: 100% !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Flexbox alignment for menu rows with consistent borders & equal left-right padding */
  .mean-container .mean-nav ul li {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    border-top: 1px solid #ebebeb !important;
    padding: 0 15px !important;
    /* Equal left/right padding for all menu items */
    box-sizing: border-box !important;
    float: none !important;
    position: relative !important;
    background: transparent !important;
  }

  .mean-container .mean-nav>ul>li:first-child {
    border-top: none !important;
  }

  /* Consistent row height, font, and baseline alignment for text links */
  .mean-container .mean-nav ul li a {
    display: flex !important;
    align-items: center !important;
    height: 48px !important;
    line-height: 48px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #4a4a4a !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-top: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-grow: 1 !important;
    float: none !important;
    width: auto !important;
    box-sizing: border-box !important;
    order: 1 !important;
    /* Align left */
  }

  .mean-container .mean-nav ul li a:hover {
    color: var(--tp-theme-primary) !important;
  }

  /* Expand button absolute overlay spanning 100% width of the row */
  .mean-container .mean-nav ul li a.mean-expand {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 48px !important;
    line-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    /* Align arrow to the right */
    padding-right: 15px !important;
    z-index: 5 !important;
    /* Sits on top of the text link to intercept all clicks */
    color: #4a4a4a !important;
    background: transparent !important;
    border: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    order: 2 !important;
    flex-shrink: 0 !important;
    font-size: 14px !important;
  }

  .mean-container .mean-nav ul li a.mean-expand.mean-clicked {
    transform: none !important;
  }

  /* Arrow icon rotation animation transition inside mean-expand */
  .mean-container .mean-nav ul li a.mean-expand i {
    display: inline-block !important;
    transition: transform 0.3s ease-in-out !important;
    transform: rotate(0deg) !important;
  }

  .mean-container .mean-nav ul li a.mean-expand.mean-clicked i {
    transform: rotate(180deg) !important;
    color: var(--tp-theme-primary) !important;
  }

  /* Force submenu container to take full width and wrap to new line */
  .mean-container .mean-nav ul li ul {
    flex-basis: 100% !important;
    width: 100% !important;
    order: 3 !important;
    /* Always sits below the first row (parent link + expand arrow) */
  }

  /* Submenu items padding, dividers, and level-2 indentation */
  .mean-container .mean-nav ul li li {
    border-top: 1px solid #ebebeb !important;
    padding: 0 15px 0 25px !important;
    /* Indented left padding for level-2 */
  }

  .mean-container .mean-nav ul li li a {
    height: 44px !important;
    line-height: 44px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    order: 1 !important;
  }

  .mean-container .mean-nav ul li li a.mean-expand {
    height: 44px !important;
    line-height: 44px !important;
    order: 2 !important;
  }

  .mean-container .mean-nav ul li li ul {
    order: 3 !important;
  }

  /* Submenu level-3 indentation */
  .mean-container .mean-nav ul li li li {
    padding: 0 15px 0 35px !important;
    /* Further indented left padding for level-3 */
  }
}

/*----------------------------------------
    Mobile Spacer Collapse & Spacing Reset
    ----------------------------------------*/
@media (max-width: 1199px) {

  /* Collapse empty divs that have an inline height attribute */
  div[style*="height"][style*="px"]:empty {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Reset common Bootstrap spacing utilities that may create gaps */
  .pt-5,
  .pb-5,
  .mt-5,
  .mb-5 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Ensure section wrappers are not forcing fixed heights on mobile */
  .section-wrapper,
  .tp-split-section,
  .tp-about-3 {
    min-height: auto !important;
    height: auto !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {

  .tp-header-bottom,
  .tp-header-height,
  #header-sticky,
  .tp-header-sticky {
    height: 90px !important;
  }

  .tp-header-bottom-space {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  .tp-header-main-left {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .tp-header-logo {
    order: 1 !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    display: flex !important;
    align-items: center !important;
  }

  .tp-header-logo img {
    max-width: 220px !important;
    height: auto !important;
  }

  .tp-header-hamburger-btn {
    order: 2 !important;
    margin-left: auto !important;
    position: static !important;
    right: auto !important;
    left: auto !important;
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #020626 !important;
    /* Solid theme dark blue background */
    background-image: none !important;
    /* Remove blurry PNG shape */
    border-radius: 4px !important;
    /* Clean modern corner radius */
  }

  .tp-header-hamburger-btn button {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Hide request button on tablet */
  .tp-header-btn {
    display: none !important;
  }
}

@media (max-width: 767px) {

  /* 5. Header container padding on mobile screens */
  .tp-header-bottom-space {
    padding-left: 15px !important;
    padding-right: 0px !important;
  }

  /* 6. Logo size and scaling constraint on mobile screens */
  .tp-header-logo {
    max-width: calc(100% - 90px) !important;
    /* 70px hamburger + 20px buffer */
    display: flex !important;
    align-items: center !important;
  }

  .tp-header-logo img {
    max-width: 150px !important;
    height: auto !important;
  }
}

@media (max-width: 359px) {

  /* Handle extra small mobile screens (e.g. 320px) */
  .tp-header-logo img {
    max-width: 120px !important;
  }
}

/* ==========================================================================
    Split Sections and Miscellaneous Responsive Overrides
    ========================================================================== */

/* Universal overflow-x safety block */
html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

img {
  max-width: 100%;
  height: auto;
}

/* Split section overrides below 992px */
@media (max-width: 991px) {
  .tp-split-section {
    flex-direction: column !important;
    height: auto !important;
    width: 100% !important;
  }

  .tp-split-text {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 20px 15px 35px 15px !important;
  }

  .tp-split-image {
    width: 100% !important;
    height: auto !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
  }

  .tp-split-image img,
  .tp-split-image video {
    width: 100% !important;
    height: auto !important;
    max-height: 450px !important;
    object-fit: cover !important;
  }

  /* FAQ image shapes horizontal overflow fix */
  .tp-support-shape .shape-1,
  .tp-category-shape .shape-1 {
    width: 100% !important;
    max-width: 350px !important;
    height: auto !important;
  }
}

/* Service Details thumb fixed size override */
@media (max-width: 991px) {
  .tp-service-details-thumb {
    width: 100% !important;
    height: auto !important;
  }

  .tp-service-details-thumb img {
    width: 100% !important;
    height: auto !important;
  }
}

/* Service page portfolios thumbs fixed sizes override */
@media (max-width: 480px) {
  .tp-portfolio-item-thumb {
    width: 100% !important;
    height: auto !important;
  }

  .tp-portfolio-item-thumb img {
    width: 100% !important;
    height: auto !important;
  }
}

/* Service 3 Title fixed width constraint override */
@media (max-width: 575px) {
  .tp-service-3-title {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Heading scaling on mobile to prevent clipping and text wrapping issues */
@media (max-width: 767px) {

  .title-text,
  h2.title-text {
    font-size: 1.8rem !important;
  }

  h1[style*="font-size:3.5rem"],
  h1[style*="font-size: 3.5rem"],
  h1[style*="font-size:4rem"],
  h1[style*="font-size: 4rem"] {
    font-size: 2.2rem !important;
  }
}

/* Timeline step icons margin alignment overrides for tablet and mobile */
@media (max-width: 1199px) {
  .timeline-item .icon-wrapper img {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 768px) {
  .timeline-item .icon-wrapper img {
    width: 60px !important;
    height: 60px !important;
  }
}

/* Specific margin-left underline fix on Sustainability page and similar */
@media (max-width: 1199px) {
  svg[style*="margin-left:200px"] {
    margin-left: 0 !important;
  }
}

/* ==========================================================================
    Responsive Touch Targets and Additional Responsiveness Adjustments
    ========================================================================== */

/* Improve touch targets for search close button and Read More links on mobile */
@media (max-width: 991px) {

  button.search-close-btn,
  button.search__close-btn {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .tp-service-btn a,
  .tp-portfolio-item-content-btn a {
    padding: 10px 18px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}

/* Desktop Header Fix */
@media (min-width: 1200px) {
  .tp-header-hamburger-btn {
    display: none !important;
  }

  .tp-header-main-left,
  .tp-header-main-right {
    height: auto !important;
  }

  .tp-main-menu-area {
    justify-content: center !important;
  }

  .tp-header-main-right {
    justify-content: flex-end !important;
  }

  .tp-header-logo img {
    height: 50px !important;
    width: auto !important;
  }

  .tp-header-bottom {
    background: #ffffff !important;
  }
}

/* Make "Learn More" buttons in the process section visible on mobile/tablet */
@media (max-width: 1199px) {
  .tp-category-area .tp-header-btn.d-none {
    display: flex !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    margin-top: 20px !important;
    justify-content: center !important;
    align-items: center !important;
  }
}

/* Fix header background and stacking behavior globally */
.tp-header-bottom {
  background: #ffffff !important;
}

.tp-header-sticky,
#header-sticky.tp-header-sticky {
  z-index: 999 !important;
  background: #ffffff !important;
}

/* ============================================================
    MOBILE IMAGE SQUARE FIX — max-width: 768px ONLY
    All content images display as perfect 1:1 squares on mobile.
    Desktop and tablet layouts are completely unchanged.
    ============================================================ */
@media (max-width: 768px) {

  /* ----------------------------------------------------------
        1. SIDE/ABOUT SECTION IMAGES (.tp-about-3-img)
            Used on: it-disposal-recycling, laptop-recycling, it-decommissioning,
            weee-recycling, tablet-mobile, it-buyback, data-destruction,
            audit-reporting, city, itemswecollect, social-impact, etc.
            These have inline height styles that must be overridden.
        ---------------------------------------------------------- */
  .tp-about-3-img {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .tp-about-3-img img,
  .tp-about-3-img video {
    width: 100% !important;
    height: auto !important;
    max-height: 450px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  /* ----------------------------------------------------------
        2. ABOUT US PAGE PORTRAIT IMAGE (.tp-about-breadcrumb-img)
            about-us.html: <img style="width:493px;height:683px;">
            This renders as a very tall portrait on mobile — fix to square.
        ---------------------------------------------------------- */
  .tp-about-breadcrumb-img {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }

  .tp-about-breadcrumb-img img {
    width: 100% !important;
    height: auto !important;
    max-height: 450px !important;
    object-fit: cover !important;
    object-position: top center !important;
    /* preserve face/top area */
  }

  /* ----------------------------------------------------------
        3. SPLIT SECTION LAYOUTS (.tp-split-section / .tp-split-image)
            Used on: it-disposal-recycling, social-impact, data-destruction,
            it-buyback, Sustainability.
            Desktop: display:flex; height:70vh–80vh (row layout).
            Mobile: stack vertically; image takes full width.
        ---------------------------------------------------------- */
  .tp-split-section {
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
  }

  .tp-split-image {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }

  .tp-split-image img {
    width: 100% !important;
    height: auto !important;
    max-height: 450px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Text counterpart in split sections also goes full width */
  .tp-split-text {
    width: 100% !important;
    padding: 24px 16px !important;
  }

  /* ----------------------------------------------------------
        4. PORTFOLIO ITEM THUMBNAILS (.tp-portfolio-item-thumb)
            Used on: service.html, portfolio.html.
            Desktop: width:375px; height:390px (inline styles).
            Mobile: full-width square.
        ---------------------------------------------------------- */
  .tp-portfolio-item-thumb {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }

  .tp-portfolio-item-thumb img {
    width: 100% !important;
    height: auto !important;
    max-height: 400px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* ----------------------------------------------------------
        5. BLOG POST MAIN IMAGES (.postbox__thumb)
            Used on: blog.html, blog-details.html.
            These are landscape images that can appear tall on mobile.
        ---------------------------------------------------------- */
  .postbox__thumb,
  .postbox__thumb.w-img,
  .postbox__thumb.m-img {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }

  .postbox__thumb img,
  .postbox__thumb.w-img img,
  .postbox__thumb.m-img img {
    width: 100% !important;
    height: auto !important;
    max-height: 400px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* ----------------------------------------------------------
        6. AUDIT-REPORTING PAGE SIDE IMAGE (id="side-img")
            audit-reporting.html: <img id="side-img" style="height:65vh; width:100%">
            The inline height:65vh causes a very tall portrait on mobile.
        ---------------------------------------------------------- */
  #side-img {
    width: 100% !important;
    height: auto !important;
    max-height: 450px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  /* Ensure the parent container doesn't fight the aspect ratio */
  .tp-about-3-img .shape-2 {
    display: none !important;
    /* hide decorative shape overlay on mobile */
  }

  /* ----------------------------------------------------------
        7. PREVENT HORIZONTAL OVERFLOW from fixed inline widths
            Some images have inline style="width:493px" which causes
            horizontal scrolling on small screens.
        ---------------------------------------------------------- */
  .tp-about-breadcrumb-img img,
  .tp-about-3-img img {
    max-width: 100% !important;
  }
}

/* END MOBILE IMAGE SQUARE FIX */

/* ============================================================
    SECTOR PAGES — MOBILE FORM REPOSITIONING
    On mobile (max-width: 768px): hide the sidebar form and show
    the inline duplicate placed below "Seamless Service".
    On desktop: show sidebar form, hide inline duplicate.
    ============================================================ */

/* Inline form (below Seamless Service) — hidden on desktop */
.sector-mobile-form {
  display: none;
}

@media (max-width: 768px) {

  /* Hide original sidebar form on mobile */
  .sector-sidebar-form {
    display: none !important;
  }

  /* Show inline form below Seamless Service on mobile */
  .sector-mobile-form {
    display: block;
    margin-top: 30px;
    padding: 0 4px;
  }
}

/* END SECTOR PAGES — MOBILE FORM REPOSITIONING */

/* ============================================================
    DESKTOP GRID ALIGNMENT — Header, Hero & Our Services
    Aligns Header and Hero section to the exact same horizontal
    container as the Our Services section (.container in Bootstrap).
    Reference:  Bootstrap 5 .container
        ≥1200px  → max-width: 1140px, padding: 0 0.9375rem, margin: auto
        ≥1400px  → max-width: 1210px, padding: 0 0.9375rem, margin: auto
    ONLY applied on desktop (min-width: 1200px).
    Mobile and tablet layouts are completely untouched.
    ============================================================ */

@media (min-width: 1200px) {
  /* ----------------------------------------------------------
        1. HEADER — inner nav container alignment
            The sticky header uses container-fluid + manual padding.
            We constrain the inner row to the same max-width and
            centering as Bootstrap's .container.
        ---------------------------------------------------------- */

  /* Reset the template's fixed padding on the header bottom space */
  .tp-header-bottom-space {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Constrain and center the header's inner grid row
        to match the Bootstrap .container width/alignment */
  .tp-header-bottom-space .container-fluid {
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.9375rem !important;
    padding-right: 0.9375rem !important;
    box-sizing: border-box !important;
  }

  /* Also align the announcement / top bar with the same container */
  .tp-header-2-top .container-fluid {
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.9375rem !important;
    padding-right: 0.9375rem !important;
    box-sizing: border-box !important;
  }

  /* ----------------------------------------------------------
        2. HERO SECTION — title wrapper alignment
            The hero content sits inside a full-width absolutely
            positioned div. The title wrapper has a hardcoded
            padding-left: 3rem inline style which shifts content
            to the right relative to the .container below.
            We override it to use the exact same left edge as
            a Bootstrap .container (max-width centred, same padding).
        ---------------------------------------------------------- */

  .tp-hero-3 .hero-content-container {
    max-width: 1140px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.9375rem !important;
    padding-right: 0.9375rem !important;
    box-sizing: border-box !important;
    /* Cancel the justify-content-center which can shift content */
    justify-content: flex-start !important;
  }

  /* Remove the hardcoded padding-left: 3rem from the title wrapper
        so it starts flush with the container left edge */
  .tp-hero-3-title-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ----------------------------------------------------------
        3. HEADER COLUMNS — remove extra column-level padding
            The logo column has pl-10 (10px extra left padding) and
            the CTA column has pr-40 (40px extra right padding) which
            offset the logo and button from the container edges.
            Neutralise these so the logo aligns exactly with the
            Our Services heading left edge.
        ---------------------------------------------------------- */

  /* Cancel pl-10 on the logo column — logo left edge = container left */
  .tp-header-bottom-space .container-fluid .row>.col-xxl-2.pl-10,
  .tp-header-bottom-space .container-fluid .row>.col-xl-3.pl-10 {
    padding-left: 0 !important;
  }

  /* Cancel pr-40 on the CTA button wrapper — use auto alignment */
  .tp-header-btn.pr-40 {
    padding-right: 0 !important;
  }

  /* ----------------------------------------------------------
        4. NAV COMPACTION — prevent menu items from wrapping
            The constrained container (1140px) split across 3 cols
            leaves ~570px for the nav. Reduce spacing & font-size
            so all links fit on ONE line.
            No layout, colour, or typography changes beyond sizing.
        ---------------------------------------------------------- */

  /* Reduce nav link font size and vertical padding */
  .tp-main-menu ul li a {
    font-size: 16px !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  /* Tighten gap between nav items */
  .tp-main-menu ul li:not(:last-of-type) {
    margin-right: 14px !important;
  }

  /* Remove the template's extra left indent on the nav */
  .tp-main-menu {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  /* Shrink the Request Collection button so it fits neatly */
  .tp-header-btn .tp-btn,
  .tp-header-btn a.tp-btn {
    font-size: 13px !important;
    padding: 12px 18px !important;
    white-space: nowrap !important;
  }

  /* ----------------------------------------------------------
        6. REQUEST COLLECTION BUTTON — reduce decorative teal circle
            .tp-btn::after is the static teal dot visible in the
            bottom-right corner of the button at rest.
            .tp-btn::before is the hover fill animation — untouched.
        ---------------------------------------------------------- */
  .tp-header-btn .tp-btn::after {
    height: 18px !important;
    width: 20px !important;
    border-radius: 8px !important;
    right: -7px !important;
    bottom: -7px !important;
  }

  /* ----------------------------------------------------------
        5. DROPDOWN SUBMENU COMPACTION
            The default submenu is 200px wide with large padding,
            making it appear oversized on desktop. Reduce width,
            item padding and link vertical spacing.
            Mobile/tablet submenus are untouched (handled by
            the MeanMenu offcanvas styles).
        ---------------------------------------------------------- */

  /* Narrower dropdown panel */
  .tp-main-menu ul li .submenu {
    width: 170px !important;
    padding-bottom: 8px !important;
  }

  /* Less horizontal padding inside each list item */
  .tp-main-menu ul li .submenu li {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Smaller vertical padding on each link */
  .tp-main-menu ul li .submenu li a {
    font-size: 12px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }
}

/* ≥1400px breakpoint — standard desktop */
@media (min-width: 1400px) {

  .tp-header-bottom-space .container-fluid,
  .tp-header-2-top .container-fluid,
  .container {
    max-width: 1210px !important;
    padding-left: 0.9375rem !important;
    padding-right: 0.9375rem !important;
  }

  .tp-hero-3 .hero-content-container {
    max-width: 1210px !important;
  }

  /* Keep dropdown submenu link text at 13px on standard laptops */
  .tp-main-menu ul li .submenu li a {
    font-size: 13px !important;
  }
}

/* ≥1600px breakpoint — widescreen displays */
@media (min-width: 1600px) {

  .tp-header-bottom-space .container-fluid,
  .tp-header-2-top .container-fluid,
  .container {
    max-width: 1390px !important;
  }

  .tp-hero-3 .hero-content-container {
    max-width: 1390px !important;
  }

  /* Make dropdown submenu link text 16px (same as header links) on widescreen */
  .tp-main-menu ul li .submenu li a {
    font-size: 16px !important;
  }
}

/* END DESKTOP GRID ALIGNMENT */

/* ============================================================
    iPAD-SPECIFIC HEADER FIXES
    iPad Mini  : 768×1024
    iPad Air   : 820×1180
    iPad Pro   : 1024×1366
    ============================================================ */

/* --- iPad Mini, iPad Air, & iPad Pro (768px to 1199px): Fix header alignment --- */
@media only screen and (min-width: 768px) and (max-width: 1199px) {

  /* Header height */
  .tp-header-bottom,
  .tp-header-height,
  #header-sticky,
  .tp-header-sticky,
  #header-sticky.tp-header-sticky {
    height: 80px !important;
  }

  /* Container padding */
  .tp-header-bottom-space,
  .tp-header-sticky .tp-header-bottom-space {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Main left area: flex row with logo left, hamburger right */
  .tp-header-main-left,
  .tp-header-sticky .tp-header-main-left {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Logo on the left */
  .tp-header-logo,
  .tp-header-sticky .tp-header-logo {
    order: 1 !important;
    height: 80px !important;
    line-height: 80px !important;
    display: flex !important;
    align-items: center !important;
    padding-left: 0 !important;
  }

  .tp-header-logo img,
  .tp-header-sticky .tp-header-logo img {
    max-width: 200px !important;
    height: auto !important;
  }

  /* Hamburger button on the right, properly aligned */
  body .tp-header-hamburger-btn,
  body .tp-header-sticky .tp-header-hamburger-btn {
    order: 2 !important;
    position: static !important;
    right: auto !important;
    margin-left: auto !important;
    width: 55px !important;
    height: 55px !important;
    line-height: normal !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #020626 !important;
    background-image: none !important;
    border-radius: 4px !important;
  }

  body .tp-header-hamburger-btn button,
  body .tp-header-sticky .tp-header-hamburger-btn button {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }

  /* Hide the CTA button on tablet */
  .tp-header-btn,
  .tp-header-sticky .tp-header-btn {
    display: none !important;
  }

  /* Make the first column take full width so left section stretches across */
  .tp-header-bottom .row>.col-xxl-3.col-xl-3:first-child,
  .tp-header-sticky .row>.col-xxl-3.col-xl-3:first-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Hide the other columns (nav and right CTA) */
  .tp-header-bottom .row>.col-xxl-6.col-xl-6,
  .tp-header-bottom .row>.col-xxl-3.col-xl-3:last-child,
  .tp-header-sticky .row>.col-xxl-6.col-xl-6,
  .tp-header-sticky .row>.col-xxl-3.col-xl-3:last-child {
    display: none !important;
  }
}

/* END iPAD-SPECIFIC HEADER FIXES */

/* ============================================================
    7. OFFCANVAS MENU & BODY OVERLAY Z-INDEX FIX
        Ensure the offcanvas drawer and dark background overlay
        always sit above the sticky header when scrolling down.
    ============================================================ */
.offcanvas__area {
  z-index: 99999 !important;
}

.body-overlay {
  z-index: 99998 !important;
}

/* ============================================================
    8. MOBILE & TABLET VERTICAL SPACING OPTIMIZATION
        Applies to screens <= 1199px (mobile & tablet/iPad devices)
        Reduces excessive gaps and paddings for a professional vertical rhythm.
    ============================================================ */
@media (max-width: 1199px) {

  /* --- Padding Top overrides --- */
  .pt-250,
  .pt-200,
  .pt-190,
  .pt-185,
  .pt-150 {
    padding-top: 70px !important;
  }

  .pt-120,
  .pt-110,
  .pt-105,
  .pt-100 {
    padding-top: 50px !important;
  }

  .pt-80,
  .pt-65,
  .pt-60 {
    padding-top: 35px !important;
  }

  /* --- Padding Bottom overrides --- */
  .pb-210,
  .pb-170 {
    padding-bottom: 70px !important;
  }

  .pb-120,
  .pb-110,
  .pb-115,
  .pb-100 {
    padding-bottom: 50px !important;
  }

  .pb-90,
  .pb-85,
  .pb-80,
  .pb-65,
  .pb-60 {
    padding-bottom: 35px !important;
  }

  /* --- Margin Top & Bottom overrides --- */
  .mt-50,
  .mt-30 {
    margin-top: 20px !important;
  }

  .mb-70,
  .mb-50,
  .mb-40,
  .mb-30 {
    margin-bottom: 20px !important;
  }

  /* Ensure no double padding collapse issues on nested sections */
  section,
  .tp-section-wrapper {
    margin-top: 0 !important;
  }

  /* Mobile Utility to hide elements */
  .d-none-mobile {
    display: none !important;
  }

  /* Responsive split layout sections on mobile & tablet */
  .tp-split-section {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    width: 100vw !important;
    max-width: 100% !important;
  }

  /* Automatically stack image above text in split sections when the image is the second/last child */
  .tp-split-section:has(> .tp-split-image:last-child) {
    flex-direction: column-reverse !important;
  }

  /* Automatically reverse Bootstrap row columns on mobile/tablet when the image column is second */
  .row:has(> div:nth-child(2) .tp-about-3-img),
  .row:has(> div:nth-child(2) .tp-about-breadcrumb-img),
  .row:has(> div:nth-child(2) .tp-about-3-img-wrapper) {
    display: flex !important;
    flex-direction: column-reverse !important;
  }

  /* Mobile/Tablet Utility to reverse column stacking */
  .tp-split-section.flex-column-reverse-mobile {
    flex-direction: column-reverse !important;
  }

  .tp-split-image {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    margin-bottom: 15px !important;
    /* Controlled gap to separate image from title directly below it */
    padding: 0 !important;
  }

  .tp-split-image img {
    height: auto !important;
    min-height: 250px !important;
    max-height: 450px !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  .tp-split-text {
    width: 100% !important;
    padding: 20px 20px 35px 20px !important;
    /* Reduced top padding to visually connect title to image above, keeping bottom space */
    margin: 0 !important;
  }

  /* Reset large padding-bottom on intro images to avoid huge empty spacing on stacking */
  .tp-about-3-img {
    padding-bottom: 0px !important;
    margin-bottom: 20px !important;
    /* Controlled gap between image bottom and title top */
  }

  .tp-about-3-img img {
    height: auto !important;
    max-height: 450px !important;
    object-fit: cover !important;
  }

  /* Modal alignment and responsiveness overrides on mobile & tablet/iPad */
  .modal-overlay {
    display: none;
    position: fixed !important;
    z-index: 99999 !important;
    /* Ensure it stays above sticky header and offcanvas overlay */
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    justify-content: center !important;
    align-items: center !important;
    /* Center vertically and horizontally */
    padding: 10px !important;
  }

  .modal-content {
    background-color: #fff !important;
    padding: 25px 20px !important;
    /* Compact padding for mobile space saving */
    border-radius: 12px !important;
    max-width: 480px !important;
    width: 92% !important;
    margin: auto !important;
    /* Perfect center */
    position: relative !important;
    box-sizing: border-box !important;
    float: none !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15) !important;
    max-height: 85vh !important;
    /* Restrict height to fit viewports */
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    /* Hide overflow on the card itself to keep close button fixed */
  }

  .close-btn {
    font-size: 28px !important;
    top: 10px !important;
    right: 15px !important;
    z-index: 9999 !important;
    padding: 5px !important;
    /* Easy tap target */
    line-height: 1 !important;
    color: #05dac3 !important;
    /* Keep cyan close button brand color consistent */
  }

  .form-wrapper {
    overflow-y: auto !important;
    /* Enable smooth scrolling inside the form */
    flex-grow: 1 !important;
    padding-right: 5px !important;
    /* Space for scrollbar */
    -webkit-overflow-scrolling: touch;
  }

  .modal-content h2 {
    font-size: 24px !important;
    /* Sized down for mobile titles */
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    padding: 0 25px !important;
    /* Prevent overlap with absolute close button */
    line-height: 1.2 !important;
  }

  /* Save vertical space on mobile form controls */
  .form-group {
    margin-bottom: 12px !important;
  }

  textarea.form-input {
    height: 90px !important;
    /* Fit comfortably within mobile modals */
  }
}

/* Mobile-only overrides (<= 768px) */
@media (max-width: 768px) {

  /* Hero button mobile stacking and spacing */
  .tp-hero-3-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 15px !important;
    margin-top: 25px !important;
  }

  .tp-hero-3-btn .tp-btn-2 {
    display: inline-block !important;
    width: 100% !important;
    max-width: 280px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    padding: 16px 30px !important;
    font-size: 14px !important;
    line-height: normal !important;
    white-space: nowrap !important;
  }

  .tp-hero-3-btn .tp-btn-2::after {
    height: 16px !important;
    width: 18px !important;
    border-radius: 8px !important;
    right: -6px !important;
    bottom: -6px !important;
  }
}

/* ==========================================================================
    Footer White Gap Fix — Desktop + iPad
    ========================================================================== */

/* Prevent the CTA area from ever inheriting white as its background */
.tp-cta-4-area,
.tp-service-cta-area {
  background: #f1fbfe !important;
}

/* Reduce the massive 140px top padding on the footer content block
    so no blank white strip appears between the CTA and footer text */
.tp-footer-3-main-area {
  padding-top: 60px !important;
}

/* Reduce further on tablet sizes (iPad mini / Air / Pro) */
@media (max-width: 1199px) {
  .tp-footer-3-main-area {
    padding-top: 50px !important;
  }
}

/* ==========================================================================
    Quote Card Form Spacing, Padding, and Textarea Layout Fixes
    ========================================================================== */

/* Desktop layout styling for "Get A Quote" form card container */
.get-quote-container {
  padding: 40px 30px !important;
  border-radius: 16px !important;
}

.get-quote-form-wrapper {
  padding-bottom: 0 !important;
}

/* Mobile & Tablet responsiveness styling (under 992px) */
@media (max-width: 991px) {

  /* 1. Reduce top padding of the section on mobile */
  .tp-support-breadcrumb.desc {
    padding-top: 20px !important;
  }

  /* 2. Spacing above the "Get A Quote" card and inner padding */
  .get-quote-container {
    margin-top: 10px !important;
    padding: 35px 20px !important;
  }

  /* 3. Minimize spacing below the call-to-action button above the card */
  .tp-support-breadcrumb-btn {
    margin-bottom: 15px !important;
  }

  /* 4. Make the single-line summary of equipment textarea a rounded card,
        force height, and wrap long placeholder text without cutting off */
  textarea.summary-textarea {
    border-radius: 16px !important;
    height: 85px !important;
    min-height: 85px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow-y: auto !important;
  }

  textarea.summary-textarea::placeholder {
    font-size: 13px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
  }
}

/* 5. Ensure header top bar email address is always white in all states */
.header-location a,
.header-location a span,
.header-location a:hover,
.header-location a:hover span,
.header-location a:focus,
.header-location a:focus span {
  color: #ffffff !important;
}

/* ==========================================================================
    RESPONSIVE SAFETY GUARDS
    Non-breaking protective rules that prevent overflow and clipping
    without altering existing design, typography, or layout.
    ========================================================================== */

/* ------------------------------------------------------------------
    1. INLINE FIXED-WIDTH IMAGE OVERRIDES
    Override inline style="width:Xpx; height:Ypx" that can cause
    horizontal overflow on narrower viewports.
    ------------------------------------------------------------------ */

/* FAQ / support shape images (inline 578×591px) */
.tp-support-shape .shape-1,
.tp-category-shape .shape-1 {
  max-width: 100% !important;
  height: auto !important;
}

/* Service details thumb (inline 776×517px on sector pages) */
.tp-service-details-thumb[style*="776px"] {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
}

.tp-service-details-thumb[style*="776px"] img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* About breadcrumb image (inline 493×683px) */
.tp-about-breadcrumb-img img[style*="493px"] {
  max-width: 100% !important;
  height: auto !important;
}

/* Sustainability page accreditation logos */
.img-1 {
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Timeline/process step icons — override inline margin-left:100px */
.icon-wrapper img[style*="margin-left:100px"],
.icon-wrapper img[style*="margin-right:100px"] {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Decorative SVGs inside titles should never cause overflow */
.tp-section-title__pre svg,
.title-left-shape svg {
  max-width: 100% !important;
  height: auto !important;
}

/* ------------------------------------------------------------------
    2. CTA EMAIL SECTION — prevent email text overflow
    ------------------------------------------------------------------ */
.tp-cta-4-mail a {
  word-break: break-all !important;
  overflow-wrap: break-word !important;
}

/* ------------------------------------------------------------------
    3. WIDESCREEN (≥ 2560px) — scale container gracefully
    ------------------------------------------------------------------ */
@media (min-width: 2560px) {
  .container {
    max-width: 1600px !important;
  }

  .tp-header-bottom-space .container-fluid,
  .tp-header-2-top .container-fluid {
    max-width: 1600px !important;
  }

  .tp-hero-3 .hero-content-container {
    max-width: 1600px !important;
  }
}

/* ------------------------------------------------------------------
    END RESPONSIVE SAFETY GUARDS
    ------------------------------------------------------------------ */

/* Scoped Fix: Request a Collection Popup Layout (Desktop screens) */
@media (min-width: 1200px) {

  /* Overlay Display and Centering */
  .modal-overlay {
    display: none !important;
  }

  .modal-overlay[style*="display: block"],
  .modal-overlay[style*="display: flex"] {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    z-index: 99999 !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Modal Card Dimensions, Padding and Spacing */
  .modal-content {
    background-color: #ffffff !important;
    padding: 2rem !important;
    border-radius: 8px !important;
    width: 95% !important;
    max-width: 500px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    margin: 20px auto !important;
    position: relative !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Heading Size, Alignment and Spacing */
  .modal-content h2 {
    font-size: 2rem !important;
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
    color: #000000 !important;
    text-align: center !important;
  }

  /* Form Fields spacing & layout */
  .form-group {
    margin-bottom: 1rem !important;
  }

  .form-input {
    width: 100% !important;
    padding: 0.75rem !important;
    border-radius: 4px !important;
    border: 1px solid #ccc !important;
    color: #000000 !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    line-height: normal !important;
    text-indent: 0 !important;
  }

  .form-input::placeholder {
    color: #888888 !important;
    opacity: 1 !important;
  }

  textarea.form-input {
    height: 180px !important;
    padding: 15px !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    resize: none !important;
    overflow-y: auto !important;
    color: #000000 !important;
  }

  /* Close Button styling and positioning */
  .close-btn {
    position: absolute !important;
    top: 8px !important;
    right: 12px !important;
    font-size: 24px !important;
    cursor: pointer !important;
    color: #333030 !important;
    font-weight: normal !important;
    transform: none !important;
    transition: none !important;
  }

  .close-btn:hover {
    transform: none !important;
    color: #000000 !important;
  }

  /* Submit Button Layout */
  .submit-full {
    width: 100% !important;
    border: none !important;
  }
}

/* Compact Modal Layout for Short Viewport Heights (1300px - 1500px width and max-height 700px) */
@media (min-width: 1200px) and (max-height: 700px) {

  /* Prevent scrollbars inside the modal */
  .modal-content,
  .form-wrapper {
    overflow: visible !important;
    overflow-y: visible !important;
  }

  /* Compact Modal Wrapper paddings and margins */
  .modal-content {
    padding: 1.25rem 2rem !important;
    /* Compact padding */
    margin: auto !important;
    /* Vertically and horizontally center */
  }

  /* Compact Heading sizing and spacing */
  .modal-content h2 {
    font-size: 1.5rem !important;
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
  }

  /* Compact Form Fields spacing & paddings */
  .form-group {
    margin-bottom: 0.5rem !important;
  }

  .form-input {
    padding: 0.5rem 0.75rem !important;
    /* Shorter inputs */
    font-size: 14px !important;
  }

  /* Compact Textarea height */
  textarea.form-input {
    height: 100px !important;
    /* Shorter height to fit vertical space */
    padding: 10px 15px !important;
  }

  /* Compact Submit button sizing */
  .submit-full {
    padding: 0.5rem 1rem !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}

/* ============================================================
    9. DESKTOP SPLIT SECTION RESPONSIVE HEIGHT OVERRIDES
       Prevents text and titles from getting cut off on short viewport heights
       by converting rigid inline height values (like height: 70vh/80vh)
       into min-height values, allowing the container to grow if needed.
    ============================================================ */
@media (min-width: 1200px) {
  .tp-split-section {
    height: auto !important;
    min-height: 70vh !important;
  }

  /* Match other inline height style variations */
  .tp-split-section[style*="height:80vh"],
  .tp-split-section[style*="height: 80vh"] {
    min-height: 80vh !important;
  }

  .tp-split-section[style*="height:100vh"],
  .tp-split-section[style*="height: 100vh"] {
    min-height: 100vh !important;
  }

  /* Stretch split images to match the dynamic flex container height */
  .tp-split-image {
    height: auto !important;
    align-self: stretch !important;
  }

  .tp-split-image img {
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* Reduce vertical padding in split sections on short viewports to conserve space */
@media (min-width: 1200px) and (max-height: 750px) {

  .content.tp-split-text,
  .tp-split-text {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
}

/* Equal-height service cards with Read More pinned to bottom, gap preserved */

/* Remove the margin that was overflowing past the stretched column */
.tp-service-3-content.mb-30 {
  margin-bottom: 0 !important;
}

/* Put the spacing on the column itself instead — contained safely inside its box */
.tp-service-3-area .col-xl-3.col-md-6 {
  padding-bottom: 30px;
}

.tp-service-3-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tp-service-3-content-thumb,
.tp-service-3-title {
  flex-shrink: 0;
}

.tp-service-btn {
  margin-top: auto; /* keeps Read More pinned to the bottom of every card */
}

/* Extra breathing room between the two service rows and before the CTA bar */
.tp-service-3-area .row + .row {
  margin-top: 30px;
}