@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//lgsship.com/wp-content/themes/woodmart/fonts/woodmart-font-3-400.woff2?v=7.6.0") format("woff2");
}

:root {
	--wd-text-font: "Exo 2", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: rgb(0,0,0);
	--wd-text-font-size: 20px;
	--wd-title-font: "Exo 2", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 700;
	--wd-title-color: rgb(221,51,51);
	--wd-entities-title-font: "Exo 2", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Exo 2", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Exo 2", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 700;
	--wd-widget-title-transform: none;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 20px;
	--wd-header-el-font: "Exo 2", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 600;
	--wd-header-el-transform: none;
	--wd-header-el-font-size: 16px;
	--wd-brd-radius: 16px;
	--wd-primary-color: rgb(3,21,63);
	--wd-alternative-color: #fbbc34;
	--wd-link-color: rgb(136,173,153);
	--wd-link-color-hover: rgb(124,157,139);
	--btn-default-bgcolor: rgb(51,51,51);
	--btn-default-bgcolor-hover: rgb(36,36,36);
	--btn-accented-bgcolor: rgb(136,173,153);
	--btn-accented-bgcolor-hover: rgb(124,157,139);
	--btn-font-family: "Geologica", Arial, Helvetica, sans-serif;
	--btn-font-weight: 500;
	--btn-transform: capitalize;
	--wd-form-brd-width: 1px;
	--notices-success-bg: rgb(136,173,153);
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
}
:is(.shop-content-area.wd-builder-off,.wd-wishlist-content,.related-and-upsells,.cart-collaterals,.wd-shop-product,.wd-fbt) .wd-products-with-bg, :is(.shop-content-area.wd-builder-off,.wd-wishlist-content,.related-and-upsells,.cart-collaterals,.wd-shop-product,.wd-fbt) .wd-products-with-bg :is(.wd-product,.wd-cat) {
	--wd-prod-bg:rgb(247,247,247);
	--wd-bordered-bg:rgb(247,247,247);
}
.woodmart-woocommerce-layered-nav .wd-scroll-content {
	max-height: 223px;
}
.wd-popup.wd-age-verify {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
	--wd-popup-width: 800px;
}
.page-title-default {
	background-color: rgb(247,247,247);
	background-image: none;
	background-size: cover;
	background-position: center center;
}
.footer-container {
	background-color: rgb(15,15,15);
	background-image: none;
}
html .page-title > .container > .title {
	font-size: 28px;
}
html table th {
	text-transform: none;
}
html .wd-checkout-steps li {
	text-transform: none;
}
html .wd-nav-mobile > li > a, html .wd-nav-mobile .wd-sub-menu li a {
	text-transform: capitalize;
}
.woodmart-archive-blog .main-page-wrapper {
	background-color: rgb(247,247,247);
	background-image: none;
}
html .wd-buy-now-btn {
	color: rgb(255,255,255);
	background: rgb(51,51,51);
}
html .wd-buy-now-btn:hover {
	color: rgb(255,255,255);
	background: rgb(36,36,36);
}
body, [class*=color-scheme-light], [class*=color-scheme-dark], .wd-search-form[class*="wd-header-search-form"] form.searchform, .wd-el-search .searchform {
	--wd-form-bg: rgb(255,255,255);
}
.wd-nav-arrows.wd-pos-sep:not(:where(.wd-custom-style)) {
	--wd-arrow-size: 44px;
	--wd-arrow-icon-size: 16px;
	--wd-arrow-offset-h: 15px;
	--wd-arrow-color-hover: rgb(255,255,255);
	--wd-arrow-bg: rgb(247,247,247);
	--wd-arrow-bg-hover: rgb(136,173,153);
	--wd-arrow-bg-dis: rgb(247,247,247);
	--wd-arrow-radius: 20px;
}
.wd-nav-arrows.wd-pos-together:not(:where(.wd-custom-style)) {
	--wd-arrow-gap: 20px;
	--wd-arrow-size: 50px;
	--wd-arrow-icon-size: 20px;
	--wd-arrow-offset-h: 0px;
	--wd-arrow-offset-v: 15px;
	--wd-arrow-bg: rgb(247,247,247);
	--wd-arrow-bg-hover: rgb(136,173,153);
	--wd-arrow-bg-dis: rgb(247,247,247);
	--wd-arrow-radius: 25px;
}
.wd-nav-scroll {
	--wd-nscroll-width: 45%;
	--wd-nscroll-drag-bg: rgb(136,173,153);
	--wd-nscroll-drag-bg-hover: rgba(136,173,153,0.8);
}
.product-labels .product-label.onsale {
	background-color: rgb(255,255,255);
	color: rgb(51,51,51);
}
.product-labels .product-label.new {
	background-color: rgb(255,255,255);
	color: rgb(51,51,51);
}
.product-labels .product-label.featured {
	background-color: rgb(255,255,255);
	color: rgb(51,51,51);
}
.product-labels .product-label.out-of-stock {
	background-color: rgb(255,255,255);
	color: rgb(51,51,51);
}
.wd-popup.popup-quick-view {
	--wd-popup-width: 920px;
}

@media (max-width: 1024px) {
	html .page-title > .container > .title {
		font-size: 24px;
	}
	.wd-nav-arrows.wd-pos-sep:not(:where(.wd-custom-style)) {
		--wd-arrow-offset-h: -50px;
	}
	[class*="thumbs-grid-bottom"] .woocommerce-product-gallery__wrapper.wd-grid {
		--wd-col: 1;
	}

}

@media (max-width: 768.98px) {
	.wd-nav-arrows.wd-pos-sep:not(:where(.wd-custom-style)) {
		--wd-arrow-offset-h: 60px;
	}
	[class*="thumbs-grid-bottom"] .woocommerce-product-gallery__wrapper.wd-grid {
		--wd-col: 1;
	}

}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 35px;
--btn-default-color: #fff;
--btn-default-color-hover: #fff;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 35px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 35px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
}

@media (min-width: 1239px) {
.platform-Windows .wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}

@media (min-width: 1222px) {
html:not(.platform-Windows) .wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


@font-face {
	font-family: "Geologica";
	src: url("//lgsship.com/wp-content/uploads/2024/03/Geologica_Auto-Medium.woff2") format("woff2"), 
url("//lgsship.com/wp-content/uploads/2024/03/Geologica_Auto-Medium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
}

.wd-scrollbar {
    --wd-scroll-w: 0px !important;
}



/* ===== Fleet tabs ===== */
.fleet-tab-content { display: none; }
.fleet-tab-content.active { display: flex !important; }

.fleet-tab-btn {
  cursor: pointer;
  padding: 10px 20px;
  background: #fff;
  border: 1px solid #ddd;
  margin-right: 10px;
  border-radius: 5px;
  transition: 0.3s;
}
.fleet-tab-btn.active,
.fleet-tab-btn:hover {
  background: #e53935;
  color: #fff;
  border-color: #e53935;
}







.wd-nav[class*="wd-style-"]>li:is(.current-menu-item,.wd-active,.active)>a {
    color: rgb(4 49 88);
}


@media (min-width: 1025px) {
    .wd-header-main-nav .menu > li {
        margin-right: 32px;
    }

    .wd-header-main-nav .menu > li:last-child {
        margin-right: 0;
    }
}

/* Desktop – large screens */
@media (min-width: 1200px) {
    .wd-nav.wd-gap-l {
        --nav-gap: 100px;   /* jo tumhein desktop pe chahiye */
    }
}

/* Laptop / small desktop */
@media (max-width: 1199px) and (min-width: 1025px) {
    .wd-nav.wd-gap-l {
        --nav-gap: 60px;   /* thora kam */
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .wd-nav.wd-gap-l {
        --nav-gap: 16px;   /* aur kam */
    }
}

/* Mobile – usually menu hamburger hota hai, phir bhi safe */
@media (max-width: 767px) {
    .wd-nav.wd-gap-l {
        --nav-gap: 8px;
    }
}




/* ================= SECTION ================= */
.sustain-section {
    background: #ffffff;
    padding: 40px 20px;
    font-family: 'Exo 2', sans-serif;
}

/* ================= GRID ================= */
.sustain-wrapper {
    max-width: 1300px;
    margin: 0 auto;
    overflow: visible;
}

.sustain-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    overflow: visible;
}



/* ================= CARD ================= */
.sustain-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 0px;
    aspect-ratio: 3 / 4;
    min-height: 300px;

    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    overflow: visible; /* ❗ allow content to grow */
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    will-change: transform;
}

.sustain-card:hover {
    transform: scale(1.10);   /* balanced zoom */
    z-index: 10;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

/* ================= OVERLAY ================= */
.sustain-card .overlay {
    position: absolute;
    inset: 0;
    padding: 24px 20px 80px; /* extra space so text never cuts */
    display: flex;
    flex-direction: column;
    overflow: visible;

    background: linear-gradient(
        180deg,
        rgba(15,23,42,0.35) 0%,
        rgba(15,23,42,0.25) 55%,
        rgba(15,23,42,0.55) 100%
    );
}

/* ================= HEADING ================= */
.sustain-card .text-wrapper h1,
.sustain-card .text-wrapper h3 {
    font-weight: 600;
    color: #ffffff;
    font-size: 20px;
    line-height: 1.3;  /* safer */
    margin-bottom: 10px;
    transition: transform 0.35s ease;
}

.sustain-card:hover .text-wrapper h1,
.sustain-card:hover .text-wrapper h3 {
    transform: scale(1.05);   /* safe grow */
}

/* ================= PARAGRAPH ================= */
.sustain-card .text-wrapper p {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.5;
text-align:justify;
    margin-top: 8px;
    margin-bottom: 0;

    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.35s ease;
}

.sustain-card:hover .text-wrapper p {
    opacity: 1;
    transform: translateY(0);
}

/* ================= READ MORE BUTTON ================= */
.sustain-card .elementor-widget-button {
    position: absolute;
    bottom: 20px;
    margin: 0 !important;
}

/* BUTTON ITSELF */
.sustain-card .elementor-button {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 4px 14px;
    height: 28px;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;

    color: #ffffff;
    background: transparent;

    opacity: 0;
    transition: all 0.3s ease;

    box-shadow: none !important;
    border-radius: 4px;
    transform: none !important;
}

.sustain-card:hover .elementor-button {
    opacity: 1;
    transform: scale(1.05) !important;
}

/* BUTTON HOVER */
.sustain-card .elementor-button:hover {
    background: #ffffff;
    color: #0f172a;
}

/* SHINE EFFECT */
.sustain-card .elementor-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.2),
        transparent
    );
    transition: left 0.5s ease;
}

.sustain-card .elementor-button:hover::before {
    left: 100%;
}

/* ================= EDGE CUT FIX ================= */
.sustain-grid > .sustain-card:first-child {
    margin-left: 12px;
}
.sustain-grid > .sustain-card:last-child {
    margin-right: 12px;
}

/* Elementor overflow fix */
.elementor-column,
.elementor-widget-wrap,
.elementor-container {
    overflow: visible !important;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1024px) {
    .sustain-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sustain-card:hover {
        transform: scale(1.05); /* mobile safe */
    }

    .sustain-card .text-wrapper h1,
    .sustain-card .text-wrapper h3 {
        font-size: 18px;
    }
}

@media (max-width: 1024px) {

  /* Heading spacing fix */
  .sustain-card .text-wrapper h1,
  .sustain-card .text-wrapper h3 {
      margin-bottom: 4px;   /* pehle 10px tha */
      line-height: 1.15;   /* thori compact */
  }

  /* Paragraph spacing fix */
  .sustain-card .text-wrapper p {
      margin-top: 2px;     /* pehle 8px tha */
      line-height: 1.35;  /* mobile pe compact feel */
  }
}





/* ===== Dropdown menu ===== */
.wd-dropdown-menu {
    position: absolute;
    top: 100%;
	
    left: 0;
    min-width: 200px;           /* fits content, prevents shift */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ===== Sub menu links ===== */
.wd-sub-menu li > a {
    display: inline-block;
    width: 50%;                 /* fixed width hover BG */
    padding: 6px 0;
	        line-height: 24px;
        font-weight: 400;
        font-size: 16px;
    background: transparent;
    color: #fff;
    text-decoration: none;
    transition: none;           /* hover color/width disabled */
}

/* ===== Sub menu line ===== */
.wd-sub-menu li > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40%;                 /* same as hover bg */
    height: 1px;
    background: #ffffff;
}


@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@700&display=swap');

.hero-container {
  position: relative;
  width: 100%;
  max-height: 500px;  /* Adjust height as needed */
  overflow: hidden;
  font-family: 'Exo 2', sans-serif;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-overlay-text {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 900px;
  text-align: center;
  pointer-events: none;
  z-index: 10;
}

.hero-overlay-text .slide {
  display: none;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  white-space: nowrap;  /* Heading ek line mein rahe */
}

.hero-overlay-text .slide.active {
  display: block;
  opacity: 1;
}

.headline {
  font-weight: 700;
  font-size: 48px;
  line-height: 48px;
  color: white;
  display: block;
  margin-bottom: 0.3em;
  white-space: nowrap;
  text-transform: uppercase;
}

.subline {
  font-weight: 400;
  font-size: 24px;
  line-height: 28px;
  color: white;
  font-style: normal;
}


/* Video container */
.elementor-element-e09707e {
  position: relative !important;
  height: 400px; /* Hero height */
  max-height: 600px;
  overflow: hidden;
}

.elementor-element-e09707e .elementor-video,
.wd-el-video video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* Overlay text slightly above bottom */
.hero-overlay-text {
  position: absolute;
  bottom: 80px;  /* slightly above bottom */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
  max-width: 900px;
  z-index: 10;
  pointer-events: none;
  color: white;
  font-family: 'Exo 2', sans-serif;
}

/* Slide animation */
.hero-overlay-text .slide {
  position: absolute;
  width: 100%;
  opacity: 0;
  top: 0;
  left: 0;
  transition: opacity 1s ease, transform 1s ease;
  transform: translateY(20px);
}

.hero-overlay-text .slide.active {
  opacity: 1;
  position: relative;
  transform: translateY(0);
}

/* Headline */
.hero-overlay-text .headline {
  font-family: 'Exo 2', sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 48px;
  color: #fff;
  margin-bottom: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Subline */
.hero-overlay-text .subline {
  font-weight: 400;
  font-size: 24px;
  line-height: 28px;
  color: #fff;
}

/* MAIN & STICKY LOGO SIZE FIX */
.site-logo img {
    max-height: 90px;   /* yahan height control karo */
    width: auto;
}

/* Header ki height bhi adjust karo */
.whb-main-header,
.whb-top-bar-inner {
    min-height: 110px;
    align-items: center;
}



/*popup */
.simple-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.popup-content {
  background: #fff;
  padding: 30px;
  max-width: 600px;
  width: 90%;
}

.popup-close {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 30px;
  background: none;
  border: none;
  cursor: pointer;
}



/* hide popup backend widget but keep JS alive */
.popup-backend {
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}





.main-page-wrapper {
    margin-top: -40px;
    /* padding-top: 40px; */
    min-height: 50vh;
    background-color: var(--wd-main-bgcolor);
}

.wd-toolbar {
    display: none !important;
}

.site-content {
    margin-bottom: -40px !important;
}
.wd-prefooter {
    display: none;
    padding-bottom: 40px;
    background-color: var(--wd-main-bgcolor);
}

footer,
footer * {
    color: inherit; /* optional: footer text normal color */
}

footer:has(:contains("jQuery(document).ready")) {
    display: none !important;
}

html {
  scroll-behavior: smooth;
}




/* ===== Besiktas-like hover text effect ===== */
.wd-header-main-nav .nav-link-text {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.wd-header-main-nav .bt-layer {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  white-space: nowrap;
}

.wd-header-main-nav .bt-layer-1 {
  position: relative;
}

.wd-header-main-nav .bt-char {
  display: inline-block;
  will-change: transform, opacity;
}


@media only screen and (min-width: 992px) and (max-width: 1241.82px) {
    .wd-nav.wd-gap-l {
        --nav-gap: 22px;
     
    }
}



/* DESKTOP - HIDE READ MORE BUTTON */
@media (min-width: 769px) {
  .elementor-element[data-id="7d77293"] > .sustain-card .read-more-btn,
  .elementor-element[data-id="82fc594"] > .sustain-card .read-more-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}


/* Desktop & Tablet – Clean Justify */
@media (min-width: 768px) {

    /* Heading */
    .text-left h1,
    .text-left h2,
    .text-left h3,
    .text-left h4,
    .text-left h5,
    .text-left h6 {
        text-align: justify !important;
        text-justify: inter-word;
        hyphens: auto;
        word-spacing: normal;
        letter-spacing: normal;
    }

    /* Paragraph */
    .text-left p {
        text-align: justify !important;
        text-justify: inter-word;
        hyphens: auto;
        word-spacing: normal;
        letter-spacing: normal;
        line-height: 1.7;
    }
}

/* Mobile – Readable (NO Justify) */
@media (max-width: 767px) {

    .text-left h1,
    .text-left h2,
    .text-left h3,
    .text-left h4,
    .text-left h5,
    .text-left h6,
    .text-left p {
        text-align: left !important;
        hyphens: none;
    }
}


.email-list .email-row {
    margin-bottom: 7px;
}@media (min-width: 1025px) {
	.custom-three-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;  /* clamp text to 3 lines */
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Exo 2', sans-serif;
 
  margin: 0 auto;
}

root {
    --wd-text-font: "Exo 2", sans-serif;
    --wd-title-font: "Exo 2", sans-serif;
    --wd-entities-title-font: "Exo 2", sans-serif;
    --wd-widget-title-font: "Exo 2", sans-serif;
    --wd-header-el-font: "Exo 2", sans-serif;
    --btn-font-family: "Exo 2", sans-serif;
}

p {
   
text-wrap: pretty;
    
}

.main-page-wrapper {
    margin-top: -40px;
    padding-top: 0px; 
    min-height: 50vh;
    background-color: var(--wd-main-bgcolor);
}


/* MENU LINK BASE */
.wd-header-main-nav .menu > li > a {
    position: relative;
   
}

.our-story-section {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Arial', sans-serif;
  
}

.our-story-section h2 {
   
    margin-bottom: 20px;
   
    text-transform: uppercase;
}

/* Common paragraph styling */
.our-story-section p {
    margin-bottom: 15px;
   
}

/* Individual paragraph styles */
.story-intro {
   
    color: #444;
}

.story-advantage {
    color: #555;
}

.story-solutions {
    color: #666;
}

.story-commitment {
    font-style: italic;
   
    border-left: 3px solid #0073aa;
    padding-left: 15px;
}

.reset-last-child>*:last-child {
    margin-bottom: 0;
   
    font-family: "Exo 2", sans-serif;
}

/* ===== Finder Buttons (Logo + Icons) ===== */
a[href="/finder"],
a[href="/finder#hubs"],
a[href="/finder#fleet"] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 100%;
    height: 100%;                 /* 👈 IMPORTANT: full column hover */
    padding: 18px 30px;

    text-align: center;
    text-decoration: none;

    font-family: "Exo 2", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #ffffff;

    border: none !important;
}

/* All SVG icons */
a[href="/finder"] svg,
a[href="/finder#hubs"] svg,
a[href="/finder#fleet"] svg {
    fill: currentColor;
    color: #ffffff;
    height: auto;
}

/* Finder main logo */
a[href="/finder"] svg {
    width: 90px;
}

/* Small icons (Hubs + Fleet) */
a[href="/finder#hubs"] svg,
a[href="/finder#fleet"] svg {
    width: 20px;
}

/* Text (explicit – safe override) */
a[href="/finder#hubs"] span,
a[href="/finder#fleet"] span {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #ffffff;
}



/* Remove dashed borders */
a[href="/finder"],
a[href="/finder#hubs"],
a[href="/finder#fleet"] {
    border-right: none !important;
}


 position: relative;
  width: 100%;
  min-height: 450px;
  display: flex;
  overflow: hidden;
}

/* CENTER CONTAINER */
.trades-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  z-index: 2;
}

/* LEFT CONTENT */
.trades-left {
  width: 50%;
  padding: 60px 20px;
}

.trades-left h2 {
  color: #ffffff;
  font-size: 52px;
  margin-bottom: 20px;
}

.trades-left p {
  color: #d6e4ec;
  font-size: 16px;
  line-height: 1.6;
  max-width: 420px;
}

/* RIGHT IMAGE FULL SCREEN */
.trades-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  background-image: url('YOUR-IMAGE-URL.jpg');
  background-size: cover;
  background-position: center;
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%);
  z-index: 1;
}

/* LEFT BACKGROUND */
.trades-fw::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #00324a, #001a26);
  z-index: 0;
}

.wd-nav {
    --nav-gap: 20px;
    display: inline-flex;
    flex-wrap: wrap; /* yeh nowrap issue fix karta hai */
    justify-content: var(--text-align);
    text-align: left;

    gap: 1px var(--nav-gap);
}






.wd-nav-main > li > a,
.wd-nav-secondary > li > a {
    height: 40px;
    font-family: "Exo 2", sans-serif !important;
    font-weight: 600;
    font-style: normal;
    font-size: var(--wd-header-el-font-size);
    text-transform: ca;
    line-height: 24px;
    color: #fff;
}

/* BASE MENU LINK FIX */
.wd-header-main-nav .menu > li > a {
    position: relative;       /* for the ::after to position relative to link */
    padding: 0 14px;          /* left-right spacing */
    display: inline-block;    /* ensures width behaves properly */
    transition: all 0.3s ease;
    color: #000;
    font-family: "Exo 2", sans-serif !important;
    font-weight: 600;
    font-style: normal;
    font-size: var(--wd-header-el-font-size);
    line-height: 40px;        /* matches your a height */
    text-transform: uppercase;
}





/* ===============================
   FEATURE BOX – BASE (FINAL)
================================ */
.lgs-feature-box {
    min-height: 560px;
    padding: 45px 30px 70px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    text-align: center;
    border-radius: 0;
    transition: transform 0.3s ease, all 0.3s ease;
}

/* ===============================
   TEXT WIDGETS – STABLE HEIGHT
================================ */
.lgs-feature-box .elementor-widget-heading,
.lgs-feature-box .elementor-widget-text-editor {
    flex: 0 0 auto;
}

/* ===============================
   IMAGE – PERFECT ALIGN (FINAL FIX)
================================ */
.lgs-feature-box .elementor-widget-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lgs-feature-box .elementor-widget-image img {
    width: 170px;
    height: auto;
    display: block;
	object-fit: contain;
    transition: transform 0.3s ease;
}

/* ===============================
   BUTTON CONTAINER – ALWAYS BOTTOM
================================ */
.lgs-feature-box .elementor-widget-button {
    margin-top: auto;
}

/* ===============================
   READ MORE BUTTON – FINAL MATCH
================================ */
.lgs-feature-box .elementor-button {
    background: transparent !important;
    border: none !important; /* Remove border */
    border-radius: 0;

    font-family: "Exo 2", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    padding: 4px 24px;
    height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    transform: skewX(-27deg);
    transition: all 0.3s ease;
}

/* Unskew text */
.lgs-feature-box .elementor-button-text {
    transform: skewX(39deg);
    display: inline-block;
}

/* ===============================
   BUTTON COLORS – PER COLUMN
================================ */

/* Card 1 */
.elementor-element.e-parent > .lgs-feature-box:nth-child(1) .elementor-button {
    color: #043148;
}

/* Cards 2–5 */
.elementor-element.e-parent > .lgs-feature-box:nth-child(n+2) .elementor-button {
    color: #ffffff;
}

/* ===============================
   BUTTON HOVER – Only change text color, no border or background
================================ */

/* Card 1 - Hover: Only change text color */
.elementor-element.e-parent > .lgs-feature-box:nth-child(1) .elementor-button:hover {
    background: transparent !important;
    color: #2d2d2d !important;
}

/* Card 2 - Hover: Only change text color */
.elementor-element.e-parent > .lgs-feature-box:nth-child(2) .elementor-button:hover {
    background: transparent !important;
    color: #ffffff !important;
}

/* Card 3 - Hover: Only change text color */
.elementor-element.e-parent > .lgs-feature-box:nth-child(3) .elementor-button:hover {
    background: transparent !important;
    color: #ffffff !important;
}

/* Card 4 - Hover: Only change text color */
.elementor-element.e-parent > .lgs-feature-box:nth-child(4) .elementor-button:hover {
    background: transparent !important;
    color: #ffffff !important;
}

/* Card 5 - Hover: Only change text color */
.elementor-element.e-parent > .lgs-feature-box:nth-child(5) .elementor-button:hover {
    background: transparent !important;
    color: #ffffff !important;
}

/* ===============================
   COLUMN BACKGROUNDS - DEFAULT
================================ */

/* 1 */
.elementor-element.e-parent > .lgs-feature-box:nth-child(1) {
    background: radial-gradient(circle, #d1d9e0, #8a9399);
    color: #043148;
}

/* 2 */
.elementor-element.e-parent > .lgs-feature-box:nth-child(2) {
    background: radial-gradient(circle, #ac4d41, #74180f);
    color: #ffffff;
}

/* 3 */
.elementor-element.e-parent > .lgs-feature-box:nth-child(3) {
    background: radial-gradient(circle, #22526c, #010a0e);
    color: #ffffff;
}

/* 4 */
.elementor-element.e-parent > .lgs-feature-box:nth-child(4) {
    background: radial-gradient(circle, #b4bdc3, #6f7274);
    color: #ffffff;
}

/* 5 */
.elementor-element.e-parent > .lgs-feature-box:nth-child(5) {
    background: #2d2d2d;
    color: #ffffff;
}

/* ===============================
   BOX ZOOM EFFECT ON HOVER (Only first 2 boxes)
================================ */
.elementor-element.e-parent > .lgs-feature-box:nth-child(1):hover,
.elementor-element.e-parent > .lgs-feature-box:nth-child(2):hover,
.elementor-element.e-parent > .lgs-feature-box:nth-child(3):hover,
.elementor-element.e-parent > .lgs-feature-box:nth-child(4):hover,
.elementor-element.e-parent > .lgs-feature-box:nth-child(5):hover

{
    transform: scale(1.08);        /* ⬅️ box enlarge */
    z-index: 10;
    box-shadow: 0 20px 40px rgba(0,0,0,0.18);
}




/* ===============================
   BOX BACKGROUND CHANGE ON HOVER (Boxes 3, 4, 5)
================================ */

/* Third box hover gradient background change */
.elementor-element.e-parent > .lgs-feature-box:nth-child(3):hover {
    background: radial-gradient(circle, #3a7b9e, #0c2532) !important;
    color: #ffffff !important;
}

/* Fourth box hover gradient background change */
.elementor-element.e-parent > .lgs-feature-box:nth-child(4):hover {
    background: radial-gradient(circle, #d1d9e0, #8a9399) !important;
    color: #ffffff !important;
}

/* Fifth box hover gradient background change */
.elementor-element.e-parent > .lgs-feature-box:nth-child(5):hover {
    background: radial-gradient(circle, #4a4a4a, #1a1a1a) !important;
    color: #ffffff !important;
}

/* Boxes 3,4,5 keep white text color on hover */
.elementor-element.e-parent > .lgs-feature-box:nth-child(3):hover *,
.elementor-element.e-parent > .lgs-feature-box:nth-child(4):hover *,
.elementor-element.e-parent > .lgs-feature-box:nth-child(5):hover * {
    color: #ffffff !important;
}

/* Boxes 3,4,5 button text color stays white on hover */
.elementor-element.e-parent > .lgs-feature-box:nth-child(3):hover .elementor-button,
.elementor-element.e-parent > .lgs-feature-box:nth-child(4):hover .elementor-button,
.elementor-element.e-parent > .lgs-feature-box:nth-child(5):hover .elementor-button {
    color: #ffffff !important;
}

/* Boxes 3,4,5 image hover effect */
.elementor-element.e-parent > .lgs-feature-box:nth-child(3):hover .elementor-widget-image img,
.elementor-element.e-parent > .lgs-feature-box:nth-child(4):hover .elementor-widget-image img,
.elementor-element.e-parent > .lgs-feature-box:nth-child(5):hover .elementor-widget-image img {
    transform: scale(1.05);
    filter: brightness(1.1);
}


/* ===============================
   COMMON HOVER ANIMATION – ALL BOXES
================================ */

/* Box hover effect */
.elementor-element.e-parent > .lgs-feature-box:hover {
    
}

/* Image hover effect */
.elementor-element.e-parent > .lgs-feature-box:hover .elementor-widget-image img {
   transform: scale(1.08);       /* ⬅️ image thori zoom */
    filter: brightness(1.1);
    
}

/* Text color consistency on hover */
.elementor-element.e-parent > .lgs-feature-box:hover * {
    color: #ffffff !important;
}

/* Button stays clean */
.elementor-element.e-parent > .lgs-feature-box:hover .elementor-button {
    background: transparent !important;
    color: #ffffff !important;
}

/* ===============================
   FINAL: REAL +2px FONT SIZE
   NO SCALE / NO ZOOM
================================ */

/* Smooth transition */
.lgs-feature-box h1,
.lgs-feature-box h2,
.lgs-feature-box h3,
.lgs-feature-box h4,
.lgs-feature-box h5,
.lgs-feature-box h6,
.lgs-feature-box p,
.lgs-feature-box span,
.lgs-feature-box a {
    transition: font-size 0.3s ease;
}

/* Hover increase – EXACT +2px */
.elementor-element.e-parent > .lgs-feature-box:hover h1 { font-size: calc( var(--h1-size, 32px) + 2px ); }
.elementor-element.e-parent > .lgs-feature-box:hover h2 { font-size: calc( var(--h2-size, 28px) + 2px ); }
.elementor-element.e-parent > .lgs-feature-box:hover h3 { font-size: calc( var(--h3-size, 24px) + 2px ); }
.elementor-element.e-parent > .lgs-feature-box:hover h4 { font-size: calc( var(--h4-size, 20px) + 2px ); }
.elementor-element.e-parent > .lgs-feature-box:hover h5 { font-size: calc( var(--h5-size, 18px) + 2px ); }
.elementor-element.e-parent > .lgs-feature-box:hover h6 { font-size: calc( var(--h6-size, 16px) + 2px ); }

.elementor-element.e-parent > .lgs-feature-box:hover p,
.elementor-element.e-parent > .lgs-feature-box:hover span {
    font-size: calc(16px + 2px) !important;
}

/* Read more button text */
.elementor-element.e-parent > .lgs-feature-box:hover .elementor-button-text {
    font-size: calc(12px + 2px) !important;
}



.custom-search-wrapper {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  height: 32px;           /* h-8 = 2rem = 32px */
  margin-left: 0.5rem;    /* ml-2 = 8px */
  background-color: #fee2e2; /* bg-red-100 */
  width: max-content;
  
}

.custom-search-input {
  flex: 1 1 auto;
  width: 100%;
  height: 32px;           /* h-8 */
  padding: 8px;           /* p-2 */
  margin-bottom: 0;
  font-size: 0.875rem;    /* text-sm = 14px */
  border: 1px solid #000; /* border-coolgray-500 approx #6b7280 */
  
  color: #1e293b;         /* placeholder navy-500 approx */
  background-color: white;
  outline: none;
  
}

.custom-search-input::placeholder {
  color: #64748b;         /* placeholder text-navy-400 */
}

.custom-search-input:focus {
  
  border-color: #6b7280;  /* focus-visible:border-coolgray-500 */
  outline: none;
}

/* ===== SUB MENU FINAL – BG + BORDER 40% ===== */



/* anchor (controls bg width) */
.wd-sub-menu li > a {
    position: relative;
    display: inline-block;
    width: 60%;                 /* ✅ BG width */
    padding: 8px 14px;          /* ✅ top-bottom spacing */
    color: #ffffff;
    background: transparent;
    text-decoration: none;
    box-sizing: border-box;
}

/* underline (same width as bg) */
.wd-sub-menu li > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;                /* = 40% */
    height: 1px;
    background-color: #ffffff;
}

/* hover bg */
.wd-sub-menu li > a:hover {
    background-color:#03273A;
    color: white;
}

/* dropdown container bg */
.wd-dropdown-menu.wd-dropdown.wd-design-full-width.color-scheme-dark {
    margin-top: 5px;
    background-color: #043148;
}


.wd-header-main-nav .menu > li > a {
text-transform: capitalize;
}


/* ===============================
   GLOBAL HEADER RESET
================================ */
.whb-main-header * {
  box-sizing: border-box;
}

/* ===============================
   TOP BAR (LOGO + SEARCH)
================================ */
.whb-top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
}

/* LOGO */
.whb-col-left .site-logo img {
  max-width: 310px;
  height: auto;
}

/* CENTER EMPTY COLUMN REMOVE */
.whb-col-center.whb-empty-column {
  display: none;
}

/* SEARCH WRAPPER */
.whb-col-right {
  display: flex;
  align-items: center;
}



/* ACTIVE / HOVER */
.wd-nav-main > li:hover > a {
  color: #c8102e;
}



/* HOVER */
.wd-nav-main > li:hover > a {
  color: #c8102e;
}

/* Hero Video Section */
.hero-video {
  width: 100%;
  aspect-ratio: 96 / 25;
  overflow: hidden;
  position: relative;
}

.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mobile / Tablet Adjustment */
@media (max-width: 1024px) {
  .hero-video {
    aspect-ratio: 16 / 9; /* Mobile-friendly ratio */
  }
}

/*popup*/
/* ===== ELEMENTOR REUSABLE CARD SECTION ===== */
/* ===== PARENT CONTAINER LAYOUT ===== */
.my-card-section .e-con-inner {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 10px;
    padding: 10px 0;
    width: 100%;
}

/* ===== EACH CARD (CONTAINER) ===== */
.my-card-section .e-con-inner > .e-con {
    flex: 1;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    min-height: 220px;
}

/* ===== IMAGE STYLING ===== */
.my-card-section .elementor-widget-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

/* ===== TEXT BOX ===== */
.my-card-section .elementor-heading-title {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    margin: 0;
    padding: 12px 8px;
    background: rgba(4, 49, 72, 0.95);
    color: #FFFFFF;
    text-align: center;
    font-size: 14px;
    z-index: 2;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(4, 49, 72, 0.3);
}

/* ===== FOR BETTER SPACING ON TABLET ===== */
@media (max-width: 1024px) {
    .my-card-section .e-con-inner {
        gap: 15px;
        flex-wrap: wrap;
    }
    
    .my-card-section .e-con-inner > .e-con {
        flex: 0 0 calc(33.333% - 10px);
        min-height: 200px;
    }
    
    .my-card-section .elementor-widget-image img {
        height: 200px;
    }
    
    .my-card-section .elementor-heading-title {
        padding: 10px 6px;
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .my-card-section .e-con-inner > .e-con {
        flex: 0 0 calc(50% - 10px);
    }
}

@media (max-width: 480px) {
    .my-card-section .e-con-inner > .e-con {
        flex: 0 0 100%;
    }
}

.copyrights-wrapper {
    border-top: 1px solid var(--brdcolor-gray-300);
    background: #001932;
}

/* Small screens - mobile/tablet */
@media (max-width: 1023px) {
    .wd-nav.wd-nav-main.wd-gap-l {
        --nav-gap: 50px !important;
    }
}

/* Small laptops / medium screens */
@media (min-width: 1024px) and (max-width: 1199px) {
    .wd-nav.wd-nav-main.wd-gap-l {
        --nav-gap: 80px !important;
    }
}

/* Normal laptops / desktops */
@media (min-width: 1200px) and (max-width: 1439px) {
    .wd-nav.wd-nav-main.wd-gap-l {
        --nav-gap: 100px !important;
    }
}

/* Large screens */
@media (min-width: 1440px) and (max-width: 1599px) {
    .wd-nav.wd-nav-main.wd-gap-l {
        --nav-gap: 160px !important;
    }
}

/* Extra-large screens */
@media (min-width: 1600px) and (max-width: 1799px) {
    .wd-nav.wd-nav-main.wd-gap-l {
        --nav-gap: 240px !important;
    }
}

/* Ultra-wide screens */
@media (min-width: 1800px) {
    .wd-nav.wd-nav-main.wd-gap-l {
        --nav-gap: 300px !important;
    }
}

/* Prevent wrapping */
.wd-nav.wd-nav-main {
    flex-wrap: nowrap;
}

/* Optional: link padding for aesthetics */
.wd-nav.wd-nav-main > li > a {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

/* Make menu items vertically centered */
.wd-nav.wd-nav-main {
    display: flex;          /* ensure flex container */
    align-items: center;    /* vertical centering */
}

/* Optional: menu links same height as container */
.wd-nav.wd-nav-main > li > a {
    display: flex;
    align-items: center;
    height: 100%;           /* fill container height */
}

/* Small screens - mobile/tablet */
@media (max-width: 1023px) {
    .wd-nav.wd-nav-main.wd-gap-l {
        --nav-gap: 60px !important;
    }
}


/* Resize specific logos to 70% */
#e34de30 img,
#fadb399 img,
#96c6cdf img {
    max-width: 70%;   /* Reduce size */
    height: auto;     /* Maintain aspect ratio */
}

/* Add spacing between the logos */
#e34de30,
#fadb399,
#96c6cdf {
    margin-right: 20px;  /* Horizontal spacing */
    margin-bottom: 20px; /* Vertical spacing if stacked */
}

/* Optional: make logos align nicely in one row on larger screens */
.elementor-element-45d3e95 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px; /* spacing between all logos */
}


.wd-nav.wd-nav-main {
    display: flex;
    gap: 50px;
    align-items: center;
}

.title-wrapper p {
    line-height: 1.7;
    word-spacing: 0.05em;
}
}

@media (min-width: 768px) and (max-width: 1024px) {
	root {
    --wd-text-font: "Exo 2", sans-serif;
    --wd-title-font: "Exo 2", sans-serif;
    --wd-entities-title-font: "Exo 2", sans-serif;
    --wd-widget-title-font: "Exo 2", sans-serif;
    --wd-header-el-font: "Exo 2", sans-serif;
    --btn-font-family: "Exo 2", sans-serif;
}

/* FORCE 2 COLUMNS ON MOBILE – ELEMENTOR CONTAINER FIX */
@media (max-width: 767px) {

  /* parent container */
  .elementor-element-7d77293 > .e-con-inner {
    --flex-direction: row !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  /* each card */
  .elementor-element-7d77293 .e-con.e-child {
    --width: 50% !important;
    width: 50% !important;
    flex: 0 0 50% !important;
  }

}

}

@media (min-width: 577px) and (max-width: 767px) {
	root {
    --wd-text-font: "Exo 2", sans-serif;
    --wd-title-font: "Exo 2", sans-serif;
    --wd-entities-title-font: "Exo 2", sans-serif;
    --wd-widget-title-font: "Exo 2", sans-serif;
    --wd-header-el-font: "Exo 2", sans-serif;
    --btn-font-family: "Exo 2", sans-serif;
}
}

@media (max-width: 576px) {
	@media (max-width: 767px) {
    .main-page-wrapper {
        margin-top: -46px;
        padding-top: 0;
        display: block; /* ya jo bhi actual display chahiye */
        min-height: 50vh;
        background-color: var(--wd-main-bgcolor);
    }
}
/* MOBILE HEADER FIX */
@media (max-width: 1024px) {

  /* LEFT COLUMN: menu icon */
  .whb-mobile-left {
    display: flex;
    align-items: center;
  }

  .wd-header-mobile-nav {
    margin-right: auto; /* push logo away */
  }

  /* LOGO CENTER */
  .whb-mobile-left .site-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

}

.wd-nav-mobile li:is(.current-menu-item,.wd-active)>a {
    color: #03153f;
}
}


/* MOBILE ONLY - SPACE FIX */
@media (max-width: 768px) {
  /* HEADING - MINIMUM SPACE */
  .elementor-element[data-id="7d77293"] > .sustain-card .elementor-heading-title,
  .elementor-element[data-id="82fc594"] > .sustain-card .elementor-heading-title {
    margin: 0 0 5px 0 !important; /* Reduced from 8px to 5px */
    padding: 0 !important;
    line-height: 1.2 !important;
  }
  
  /* TEXT CONTAINER - COLLAPSED */
  .elementor-element[data-id="7d77293"] > .sustain-card .wd-text-block,
  .elementor-element[data-id="82fc594"] > .sustain-card .wd-text-block {
    display: -webkit-box !important;
    -webkit-line-clamp: 8 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.4 !important;
    margin: 0 !important; /* No margin top/bottom */
    padding: 0 !important;
    flex: 1 !important;
    max-height: 112px !important;
    transition: max-height 0.3s ease !important;
  }
  
  /* PARAGRAPH - MINIMAL SPACING */
  .elementor-element[data-id="7d77293"] > .sustain-card .wd-text-block p,
  .elementor-element[data-id="82fc594"] > .sustain-card .wd-text-block p {
    margin: 0 !important; /* Remove all margins */
    padding: 0 !important;
    line-height: 1.4 !important;
  }
  
  /* EXPANDED STATE - MAINTAIN MINIMAL SPACE */
  .elementor-element[data-id="7d77293"] > .sustain-card.expanded .wd-text-block,
  .elementor-element[data-id="82fc594"] > .sustain-card.expanded .wd-text-block {
    -webkit-line-clamp: unset !important;
    display: block !important;
    overflow-y: auto !important;
    max-height: 250px !important;
    margin-bottom: 250px !important; /* Reduced space for button */
  }
  
  /* READ MORE BUTTON */
  .elementor-element[data-id="7d77293"] > .sustain-card .read-more-btn,
  .elementor-element[data-id="82fc594"] > .sustain-card .read-more-btn {
    display: block !important;
    width: 120px !important;
    margin: 10px auto 0 auto !important; /* Reduced top margin */
    background: rgba(0, 0, 0, 0.8) !important;
    color: white !important;
    padding: 8px 20px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    font-size: 14px !important;
    text-align: center !important;
    cursor: pointer !important;
    text-decoration: none !important;
  }
}



/* ============================================ */
/* MOBILE SUSTAIN CARDS - PERFECT VERSION */
/* ============================================ */

@media (max-width: 768px) {
  /* SLIDER CONTAINER */
  .elementor-element[data-id="7d77293"],
  .elementor-element[data-id="82fc594"] {
    display: flex !important;
    overflow-x: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0 !important; /* No gap between cards */
    padding: 0 !important; /* No padding */
    scroll-behavior: smooth !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    position: relative !important;
    scroll-snap-type: x mandatory !important;
  }
  
  /* Hide scrollbar */
  .elementor-element[data-id="7d77293"]::-webkit-scrollbar,
  .elementor-element[data-id="82fc594"]::-webkit-scrollbar {
    display: none !important;
  }
  
  /* CARDS - ONE PER SCREEN */
  .elementor-element[data-id="7d77293"] > .sustain-card,
  .elementor-element[data-id="82fc594"] > .sustain-card {
    flex: 0 0 100vw !important; /* Full screen width */
    width: 100vw !important;
    min-height: 280px !important;
    position: relative !important;
    padding: 20px 15px !important;
    box-sizing: border-box !important;
    scroll-snap-align: start !important;
    border-right: 1px solid rgba(255,255,255,0.1) !important;
  }
  
  /* LAST CARD - NO BORDER */
  .elementor-element[data-id="7d77293"] > .sustain-card:last-child,
  .elementor-element[data-id="82fc594"] > .sustain-card:last-child {
    border-right: none !important;
  }
  
  /* TEXT */
  .elementor-element[data-id="7d77293"] > .sustain-card .wd-text-block,
  .elementor-element[data-id="82fc594"] > .sustain-card .wd-text-block {
    display: -webkit-box !important;
    -webkit-line-clamp: 8 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    max-height: 120px !important;
    line-height: 1.4 !important;
    margin-bottom: 15px !important;
  }
  
  /* READ MORE BUTTON */
  .elementor-element[data-id="7d77293"] > .sustain-card .read-more-btn,
  .elementor-element[data-id="82fc594"] > .sustain-card .read-more-btn {
    display: block !important;
    width: 120px !important;
    margin: 10px auto 0 auto !important;
    background: rgba(0, 0, 0, 0.8) !important;
    color: white !important;
    padding: 8px 20px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    font-size: 13px !important;
    text-align: center !important;
    cursor: pointer !important;
    text-decoration: none !important;
  }
  
  /* EXPANDED STATE */
  .elementor-element[data-id="7d77293"] > .sustain-card.expanded .wd-text-block,
  .elementor-element[data-id="82fc594"] > .sustain-card.expanded .wd-text-block {
    -webkit-line-clamp: unset !important;
    display: block !important;
    overflow-y: auto !important;
    max-height: 250px !important;
    margin-bottom: 40px !important;
  }
  
 


/* ====================================== */
/* MOBILE SUSTAIN CARDS - SIMPLE FIX */
/* ====================================== */

@media (max-width: 768px) {
  /* 1. SLIDER CONTAINER - SIMPLE */
  .elementor-element[data-id="7d77293"],
  .elementor-element[data-id="82fc594"] {
    display: flex !important;
    overflow-x: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 15px !important;
    padding: 15px !important;
    width: 100% !important;
    position: relative !important;
    scroll-behavior: smooth !important;
  }
  
  /* Hide scrollbar */
  .elementor-element[data-id="7d77293"]::-webkit-scrollbar,
  .elementor-element[data-id="82fc594"]::-webkit-scrollbar {
    display: none !important;
  }
  
 
  /* 3. TEXT - 8 lines with proper spacing */
  .elementor-element[data-id="7d77293"] > .sustain-card .wd-text-block,
  .elementor-element[data-id="82fc594"] > .sustain-card .wd-text-block {
    display: -webkit-box !important;
    -webkit-line-clamp: 8 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.4 !important;
    max-height: 120px !important;
    margin-bottom: 250px !important;
  }
  
  /* 4. READ MORE BUTTON - SINGLE LINE, PROPER */
  .elementor-element[data-id="7d77293"] > .sustain-card .read-more-btn,
  .elementor-element[data-id="82fc594"] > .sustain-card .read-more-btn {
    display: inline-block !important;
    white-space: nowrap !important;
    width: auto !important;
    min-width: 120px !important;
    margin: 10px auto 0 auto !important;
    background: rgba(0, 0, 0, 0.8) !important;
    color: white !important;
    padding: 8px 20px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    font-size: 13px !important;
    text-align: center !important;
    cursor: pointer !important;
    text-decoration: none !important;
    position: absolute !important;
    bottom: 15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  
  /* 5. EXPANDED STATE */
  .elementor-element[data-id="7d77293"] > .sustain-card.expanded .wd-text-block,
  .elementor-element[data-id="82fc594"] > .sustain-card.expanded .wd-text-block {
    -webkit-line-clamp: unset !important;
    display: block !important;
    overflow-y: auto !important;
    max-height: 200px !important;
    margin-bottom: 40px !important;
  }
  
  .elementor-element[data-id="7d77293"] > .sustain-card.expanded,
  .elementor-element[data-id="82fc594"] > .sustain-card.expanded {
    min-height: 350px !important;
  }
  
 /* ARROWS - SIRF IN SECTIONS MEIN */
.elementor-element[data-id="7d77293"] .sustain-arrow,
.elementor-element[data-id="82fc594"] .sustain-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(0, 0, 0, 0.8) !important;
    color: white !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    z-index: 1000 !important;
    cursor: pointer !important;
    opacity: 0.8 !important;
    transition: opacity 0.3s !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.elementor-element[data-id="7d77293"] .sustain-arrow.left,
.elementor-element[data-id="82fc594"] .sustain-arrow.left {
    left: 10px !important;
}

.elementor-element[data-id="7d77293"] .sustain-arrow.right,
.elementor-element[data-id="82fc594"] .sustain-arrow.right {
    right: 10px !important;
}

/* Hide arrows in all other sections */
.elementor-element:not([data-id="7d77293"]):not([data-id="82fc594"]) .sustain-arrow {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
}