/* ==========================================================================
   Dwarkesh Chemicals Pvt. Ltd. — Stylesheet
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --primary: #EFB558;
  --secondary: #FF9E28;
  --white: #ffffff;
  --dark: #121212;
  --dark2: #1B1B1B;
  --black: #000000;
  --gradient: linear-gradient(180deg, #EFB558 0%, #503510 100%);
  --font: 'Exo', sans-serif;
  --container: 1360px;
  --pad: clamp(20px, 5vw, 80px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline:none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background: var(--dark);
  color: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition:all 0.4s
}

ul {
  list-style: none;
}

button {
  font-family: var(--font);
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
  z-index: 2;
}

.eyebrow {
  color: var(--primary);
  font-weight: 500;
  letter-spacing: 12%;
  font-size: 18px;
  line-height: 120%;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 23px;
}

.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--primary);
}

.section-pad {
  padding: clamp(60px, 10vw, 100px) 0;
}

/* cut-corner tag shape used across buttons + cards */
.cut-corner {
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 28px;
  font-weight: 700;
  font-size: 14px;
  line-height: 44px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .5s ease, box-shadow .5s ease, background .5s ease;
}

.btn-primary {
  background: var(--primary);
  color: var(--dark);
}

.btn-primary:hover {
  background: var(--secondary);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(239, 181, 88, .25);
}

.btn svg {
  flex-shrink: 0;
}

		.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.alert h4 {
  margin-top: 0;
  color: inherit;
}

.alert .alert-link {
  font-weight: bold;
}

.alert > p,
.alert > ul {
  margin-bottom: 0;
}

.alert > p + p {
  margin-top: 5px;
}

.alert-dismissable,
.alert-dismissible {
  padding-right: 35px;
}

.alert-dismissable .close,
.alert-dismissible .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}

.alert-success {
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #3c763d;
}

.alert-success hr {
  border-top-color: #c9e2b3;
}

.alert-success .alert-link {
  color: #2b542c;
}

.alert-info {
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #31708f;
}

.alert-info hr {
  border-top-color: #a6e1ec;
}

.alert-info .alert-link {
  color: #245269;
}

.alert-warning {
  background-color: #fcf8e3;
  border-color: #faebcc;
  color: #8a6d3b;
}

.alert-warning hr {
  border-top-color: #f7e1b5;
}

.alert-warning .alert-link {
  color: #66512c;
}

.alert-danger {
  background-color: #f2dede;
  border-color: #ebccd1;
  color: #a94442;
}

.alert-danger hr {
  border-top-color: #e4b9c0;
}

.alert-danger .alert-link {
  color: #843534;
}

/* dotted arrow icon */
.dot-arrow {
  color: currentColor;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 40px 0;
  transition: background 0.5s ease, padding 0.5s ease, box-shadow 0.5s ease;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo img {
  height: 51px;
  width: auto;
  transition: all 0.5s;
}

.site-header.scrolled {
  background: rgba(18, 18, 18, .92);
  backdrop-filter: blur(10px);
  padding: 14px 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .35);
}

.site-header.scrolled .logo img {
  height: 45px;
}

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

.nav-links {
  display: flex;
  gap: 40px;
}

.nav-links > li > a {
  font-size: 15px;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--white);
  position: relative;
  padding-bottom: 4px;
  transition: color .5s ease;

}

.nav-links > li > a:hover{
  color: var(--primary);
}

.nav-links > li > a.active {
  color: var(--primary);
  font-weight: 700;
}

.nav-links > li > a.active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: var(--primary);
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 20px;
}


.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 25px;
  height: 25px;
  z-index: 1100;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--white);
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.nav-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--dark);
}

.hero-section {
  background-color: unset;
  background-image: url('../images/banner/about-banner-img.webp');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 189px 20px 108px;
}

.hero-section:before,
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.96) 0%, rgba(18, 18, 18, 0.1) 100%);
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 18, 18, 0) 25.17%, #121212 100%);

}

.hero-bg-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.hero-bg.is-active {
  opacity: 1;
}

.hero-bg.is-active img{
  transform: scale(1.3);
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition:all 10s;
  display: block;
  transform: scale(1);
}

.hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 392px;
  padding-bottom: 60px;
}

.hero-content {
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: end;
}

/* Stack all slides in the same grid cell; crossfade via opacity.
   Grid auto-sizing makes the container as tall as the tallest slide,
   so no JS height calc or absolute-positioning is needed. */
.hero-slide {
  max-width: 100%;
}

.hero-slides,
.hero-subs {
  display: grid;
}

.hero-slide,
.hero-sub {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease;
}

.hero-slide.is-active,
.hero-sub.is-active {
  opacity: 1;
  visibility: visible;
}

.hero h1 {
  font-weight: 700;
  font-size: 70px;
  line-height: 130%;
  letter-spacing: 0%;
  text-transform: uppercase;
}

.hero-detail {
  position: relative;
  z-index: 10;
}

.hero-section .title {
  text-align: center;
}

.hero-section .title h1 {
  font-size: 50px;
  line-height: 130%;
  margin-bottom: 25px;
  text-transform: uppercase;
}

.hero-section .title p {
  font-weight: 500;
  font-size: 18px;
  line-height: 170%;
  letter-spacing: 0%;
  text-align: center;
}

.hero-bottom {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 0;
  max-width: 21%;
  padding-bottom: 22px;
  margin-right: 10px;
}

.hero-sub {
  font-weight: 500;
  font-size: 16px;
  line-height: 170%;
  letter-spacing: 0%;
  color: var(--white);
}

.hero-bottom .btn {
  line-height: 50px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0px;
  text-transform: uppercase;

}

.hero-indicator {
  position: absolute;
  z-index: 2;
  right: 35px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  line-height: 160%;
}

.hero-indicator button {
  font-weight: 400;
  font-size: 16px;
  line-height: 160%;
  letter-spacing: 0%;
  text-align: center;
  color: var(--white);
  padding: 6px;
  transition: color .2s ease;
}

.hero-indicator button:hover {
  color: var(--primary);
}

.hero-indicator button.is-active {
  color: var(--primary);
  font-weight: 700;
}

.hero-indicator .dots {
  width: 1px;
  height: 60px;
  background: repeating-linear-gradient(to bottom,
      #EFB558 0 4px,
      transparent 4px 8px);
  flex-shrink: 0;
}

.hero-indicator {
  display: flex;
  flex-direction: column;
}

.hero-indicator .dots {
  order: 2;
}

.hero-indicator button:nth-of-type(1) {
  order: 1;
}

.hero-indicator button:nth-of-type(2) {
  order: 3;
}

.hero-indicator button:nth-of-type(3) {
  order: 5;
}

/* ==========================================================================
   About
   ========================================================================== */
.about {
  text-align: center;
  background: var(--dark);
}

.about h2 {
  font-size: 50px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 130%;
  max-width: 950px;
  margin: 0 auto 21px;
}

.about p {
  max-width: 1004px;
  margin: 0 auto;
  font-weight: 400;
  font-size: 18px;
  line-height: 170%;
  letter-spacing: 0%;
  text-align: center;
  color: var(--white);
}

.about-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 1050px;
  margin: 50px auto 0;
}

.feature-circle {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid #2a2a2a;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 58px;
  min-width: 350px;
  margin: 0 auto;
}

.feature-circle .icon-wrap {
  width: 80px;
  height: 80px;
  margin-bottom: 24px;
}

.feature-circle .icon-wrap svg {
  width: 100%;
  height: 100%;
}

.feature-circle h3 {
  font-weight: 600;
  font-size: 26px;
  line-height: 130%;
  letter-spacing: 0%;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: var(--white);
}

.feature-circle p {
  max-width: 172px;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0%;
  text-align: center;
  color: var(--white);

}

.about .btn-primary {
  margin-top: 51px;
  line-height: 50px;
  padding: 0 33px;
}

/* ==========================================================================
   Products
   ========================================================================== */
.products {
  padding-top: 20px;
}

.products-head-title {
  font-size: 90px;
  line-height: 120%;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 32px;
}

.products-head-title span {
  display: block;
}

.view-all-badge {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  /* border: 1px dashed #555; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 10%;
  line-height: 130%;
  text-transform: uppercase;
  text-align: center;
  color: var(--white);
  transition: border-color .5s ease, color .5s ease;
  flex-shrink: 0;
  position: relative;
}

.view-all-badge::after {
  position: absolute;
  content: "";
  width: 95%;
  height: 95%;
  border-radius: 50%;
  background-image: url('../images/Star 1.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  top: 4px;
  left: 4px;
}

.view-all-badge:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.view-all-badge svg {
  color: var(--primary);
}

.products-grid {
  position: relative;
}

.product-card-left {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  z-index: 1;
}

.product-card-wrap {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-start;

}

a.product-card {
  position: relative;
  overflow: hidden;
  width: 54%;
}

a.product-card:nth-child(1),
a.product-card:nth-child(7) {
  margin-left: auto;
}
a.product-card:nth-child(3),
a.product-card:nth-child(4),
a.product-card:nth-child(5),
a.product-card:nth-child(6) {
  width: 23%;
 
}
a.product-card:nth-child(3),
.product-card:nth-child(5){
 margin-top: auto;
}



/* =========================================================
   DARK IMAGE OVERLAY
========================================================= */

.products-grid-wrap .product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 8.86%, rgba(0, 0, 0, 0) 54.5%);
  z-index: 1;
  pointer-events: none;
}


/* =========================================================
   GOLD ICON
========================================================= */

.product-card:before {
  content: "";
  position: absolute;
  width: 55px;
  height: 52px;
  top: 31px;
  right: 29px;
  background-image: url('data:image/svg+xml,<svg width="55" height="52" viewBox="0 0 55 52" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M29.0535 9.34455C29.8209 10.3268 29.6469 11.745 28.6648 12.5123C27.6828 13.2795 26.2646 13.1053 25.4972 12.123C24.7298 11.1408 24.9038 9.72257 25.8859 8.95531C26.8679 8.18805 28.2861 8.36231 29.0535 9.34455Z" fill="%23EFB558"/><path d="M32.3699 17.2545C33.3519 16.4872 33.5259 15.069 32.7585 14.0867C31.9911 13.1045 30.5729 12.9302 29.5909 13.6975C28.6088 14.4648 28.4348 15.883 29.2022 16.8652C29.9696 17.8474 31.3878 18.0217 32.3699 17.2545Z" fill="%23EFB558"/><path d="M36.0752 21.9966C37.0573 21.2294 37.2313 19.8112 36.4639 18.8289C35.6965 17.8467 34.2783 17.6724 33.2962 18.4397C32.3142 19.2069 32.1402 20.6252 32.9076 21.6074C33.675 22.5896 35.0932 22.7639 36.0752 21.9966Z" fill="%23EFB558"/><path d="M40.1692 23.5731C40.9367 24.5553 40.7627 25.9735 39.7806 26.7408C38.7986 27.508 37.3804 27.3338 36.613 26.3515C35.8456 25.3693 36.0196 23.9511 37.0016 23.1838C37.9837 22.4166 39.4018 22.5908 40.1692 23.5731Z" fill="%23EFB558"/><path d="M43.8744 28.3133C44.6418 29.2955 44.4678 30.7138 43.4857 31.481C42.5037 32.2483 41.0855 32.074 40.3181 31.0918C39.5507 30.1095 39.7247 28.6913 40.7067 27.9241C41.6888 27.1568 43.107 27.3311 43.8744 28.3133Z" fill="%23EFB558"/><path d="M37.5299 10.3582C38.2973 11.3405 38.1233 12.7587 37.1412 13.5259C36.1592 14.2932 34.741 14.1189 33.9736 13.1367C33.2062 12.1545 33.3802 10.7362 34.3622 9.96898C35.3443 9.20172 36.7627 9.37626 37.5299 10.3582Z" fill="%23EFB558"/><path d="M41.2352 15.1024C42.0026 16.0846 41.8286 17.5028 40.8466 18.2701C39.8646 19.0373 38.4464 18.8631 37.679 17.8808C36.9116 16.8986 37.0856 15.4804 38.0676 14.7131C39.0496 13.9459 40.4678 14.1201 41.2352 15.1024Z" fill="%23EFB558"/><path d="M46.2049 11.3387C46.9723 12.3209 46.7983 13.7392 45.8163 14.5064C44.8342 15.2737 43.416 15.0994 42.6486 14.1172C41.8812 13.1349 42.0552 11.7167 43.0373 10.9495C44.0193 10.1822 45.4375 10.3565 46.2049 11.3387Z" fill="%23EFB558"/><path d="M22.0598 30.202C22.8272 31.1842 22.6532 32.6024 21.6712 33.3697C20.6891 34.137 19.2709 33.9627 18.5035 32.9804C17.7361 31.9982 17.9101 30.58 18.8922 29.8127C19.8742 29.0455 21.2924 29.2197 22.0598 30.202Z" fill="%23EFB558"/><path d="M17.2447 33.9617C18.0121 34.944 17.8381 36.3622 16.8561 37.1295C15.874 37.8967 14.4559 37.7224 13.6885 36.7402C12.921 35.758 13.095 34.3398 14.0771 33.5725C15.0591 32.8052 16.4773 32.9795 17.2447 33.9617Z" fill="%23EFB558"/><path d="M12.4145 37.7391C13.1819 38.7213 13.0079 40.1395 12.0258 40.9068C11.0438 41.6741 9.6256 41.4998 8.8582 40.5176C8.09079 39.5353 8.26479 38.1171 9.24684 37.3498C10.2289 36.5826 11.6471 36.7569 12.4145 37.7391Z" fill="%23EFB558"/><path d="M26.8916 26.4266C27.659 27.4088 27.485 28.827 26.503 29.5943C25.5209 30.3616 24.1027 30.1873 23.3353 29.2051C22.5679 28.2228 22.7419 26.8046 23.724 26.0373C24.706 25.2701 26.1242 25.4444 26.8916 26.4266Z" fill="%23EFB558"/><path d="M31.7219 22.6532C32.4893 23.6354 32.3153 25.0536 31.3332 25.8209C30.3512 26.5881 28.933 26.4139 28.1656 25.4316C27.3982 24.4494 27.5722 23.0312 28.5542 22.2639C29.5363 21.4966 30.9544 21.6709 31.7219 22.6532Z" fill="%23EFB558"/><path d="M44.9406 19.8426C45.708 20.8248 45.534 22.2431 44.552 23.0103C43.5699 23.7776 42.1517 23.6033 41.3843 22.6211C40.6169 21.6388 40.7909 20.2206 41.773 19.4534C42.755 18.6861 44.1732 18.8604 44.9406 19.8426Z" fill="%23EFB558"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 55px 52px;
  z-index: 4;
}

/* Small cards */
.product-card:nth-child(4)::before,
.product-card:nth-child(5)::before,
.product-card:nth-child(6)::before,
.product-card:nth-child(3)::before {
  content: "";
  position: absolute;
  width: 31px;
  height: 29px;
  top: 24px;
  right: 22px;
  background-image: url('data:image/svg+xml,<svg width="31" height="29" viewBox="0 0 31 29" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.1411 5.1923C16.5674 5.73799 16.4708 6.52589 15.9252 6.95214C15.3796 7.3784 14.5917 7.28158 14.1654 6.7359C13.739 6.19021 13.8357 5.40231 14.3813 4.97606C14.9269 4.5498 15.7147 4.64661 16.1411 5.1923Z" fill="%23EFB558"/><path d="M17.9835 9.58691C18.5291 9.16066 18.6258 8.37275 18.1994 7.82707C17.7731 7.28139 16.9852 7.18457 16.4396 7.61082C15.8941 8.03708 15.7974 8.82498 16.2237 9.37067C16.6501 9.91635 17.4379 10.0132 17.9835 9.58691Z" fill="%23EFB558"/><path d="M20.0421 12.2217C20.5876 11.7954 20.6843 11.0075 20.258 10.4618C19.8316 9.91616 19.0437 9.81934 18.4982 10.2456C17.9526 10.6718 17.8559 11.4598 18.2823 12.0054C18.7086 12.5511 19.4965 12.6479 20.0421 12.2217Z" fill="%23EFB558"/><path d="M22.3165 13.0966C22.7428 13.6423 22.6462 14.4302 22.1006 14.8564C21.555 15.2827 20.7671 15.1859 20.3408 14.6402C19.9145 14.0945 20.0111 13.3066 20.5567 12.8804C21.1023 12.4541 21.8902 12.5509 22.3165 13.0966Z" fill="%23EFB558"/><path d="M24.3749 15.7294C24.8013 16.2751 24.7046 17.063 24.159 17.4893C23.6134 17.9155 22.8255 17.8187 22.3992 17.273C21.9729 16.7273 22.0695 15.9394 22.6151 15.5132C23.1607 15.0869 23.9486 15.1837 24.3749 15.7294Z" fill="%23EFB558"/><path d="M20.8502 5.75481C21.2765 6.30049 21.1799 7.08839 20.6343 7.51465C20.0887 7.9409 19.3008 7.84409 18.8745 7.2984C18.4481 6.75271 18.5448 5.96481 19.0904 5.53856C19.636 5.1123 20.424 5.20927 20.8502 5.75481Z" fill="%23EFB558"/><path d="M22.9087 8.39152C23.3351 8.93721 23.2384 9.72511 22.6928 10.1514C22.1472 10.5776 21.3594 10.4808 20.933 9.93512C20.5067 9.38943 20.6033 8.60153 21.1489 8.17528C21.6945 7.74902 22.4824 7.84584 22.9087 8.39152Z" fill="%23EFB558"/><path d="M25.6697 6.29973C26.096 6.84541 25.9993 7.63331 25.4537 8.05957C24.9082 8.48582 24.1203 8.38901 23.6939 7.84332C23.2676 7.29764 23.3643 6.50974 23.9099 6.08348C24.4554 5.65723 25.2433 5.75404 25.6697 6.29973Z" fill="%23EFB558"/><path d="M12.2558 16.7802C12.6821 17.3259 12.5854 18.1138 12.0399 18.54C11.4943 18.9663 10.7064 18.8695 10.2801 18.3238C9.85373 17.7781 9.95039 16.9902 10.496 16.5639C11.0416 16.1377 11.8294 16.2345 12.2558 16.7802Z" fill="%23EFB558"/><path d="M9.58066 18.8681C10.007 19.4138 9.91033 20.2017 9.36475 20.6279C8.81917 21.0542 8.03129 20.9574 7.60495 20.4117C7.17862 19.866 7.27528 19.0781 7.82086 18.6518C8.36645 18.2256 9.15433 18.3224 9.58066 18.8681Z" fill="%23EFB558"/><path d="M6.89719 20.9657C7.32353 21.5114 7.22686 22.2993 6.68128 22.7256C6.1357 23.1518 5.34782 23.055 4.92148 22.5093C4.49514 21.9637 4.59181 21.1758 5.13739 20.7495C5.68297 20.3232 6.47085 20.4201 6.89719 20.9657Z" fill="%23EFB558"/><path d="M14.94 14.6825C15.3664 15.2282 15.2697 16.0161 14.7241 16.4424C14.1785 16.8686 13.3907 16.7718 12.9643 16.2261C12.538 15.6804 12.6347 14.8925 13.1802 14.4663C13.7258 14.04 14.5137 14.1369 14.94 14.6825Z" fill="%23EFB558"/><path d="M17.6235 12.5849C18.0498 13.1306 17.9532 13.9185 17.4076 14.3447C16.862 14.771 16.0741 14.6742 15.6478 14.1285C15.2215 13.5828 15.3181 12.7949 15.8637 12.3686C16.4093 11.9424 17.1972 12.0392 17.6235 12.5849Z" fill="%23EFB558"/><path d="M24.9673 11.0243C25.3936 11.57 25.2969 12.3579 24.7513 12.7842C24.2058 13.2104 23.4179 13.1136 22.9915 12.5679C22.5652 12.0222 22.6619 11.2343 23.2075 10.8081C23.753 10.3818 24.5409 10.4787 24.9673 11.0243Z" fill="%23EFB558"/></svg>');
  background-repeat: no-repeat;
  background-size: 31px 29px;
  z-index: 4;
}


.product-card img {
  width: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.product-card:hover img {
  transform: scale(1.08);
}

.product-card .label {
  position: absolute;
  top: 34px;
  left: 32px;
  right: 30px;
  z-index: 2;
  font-size: 30px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 120%;
}


/* Small cards */
.product-card:nth-child(4) .label,
.product-card:nth-child(5) .label,
.product-card:nth-child(6) .label,
.product-card:nth-child(3) .label {
  font-size: 20px;
}

.product-card.p-cbfs .label {
  font-size: 20px;
}

/* ==========================================================================
   Industries We Serve
   ========================================================================== */
.industries {
  position: relative;
  background: url('../images/we-serve/we-serve-img.webp') center top/cover no-repeat;
  padding-top: clamp(101px, 10vw, 21px);
  padding-bottom: clamp(500px, 48vw, 730px);
}

.industries-inner {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.industries h2 {
  font-size: 70px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 125%;
  flex-shrink: 0;
}

.industries-lists {
  align-content: start;
  flex: 1;
  min-width: 240px;
  max-width: 740px;
}

.industries-lists ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 60px;
}

.industries-lists li {
  padding: 18px 0px 18px 40px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-weight: 600;
  font-size: 20px;
  line-height: 130%;
  letter-spacing: 0%;
  text-transform: uppercase;
  position: relative;
}

.industries-lists li svg {
  color: var(--primary);
  flex-shrink: 0;
  display: none;
}

.industries-lists li::before {
  position: absolute;
  content: '';
  width: 31px;
  height: 29px;
  background-image: url('data:image/svg+xml,<svg width="31" height="29" viewBox="0 0 31 29" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.1411 5.19035C16.5674 5.73603 16.4707 6.52393 15.9252 6.95019C15.3796 7.37644 14.5917 7.27963 14.1654 6.73394C13.739 6.18826 13.8357 5.40036 14.3813 4.97411C14.9268 4.54785 15.7147 4.64466 16.1411 5.19035Z" fill="%23EFB558"/><path d="M17.9835 9.58496C18.5291 9.15871 18.6257 8.3708 18.1994 7.82512C17.7731 7.27944 16.9852 7.18262 16.4396 7.60887C15.894 8.03512 15.7974 8.82303 16.2237 9.36871C16.65 9.91439 17.4379 10.0112 17.9835 9.58496Z" fill="%23EFB558"/><path d="M20.042 12.2197C20.5876 11.7935 20.6843 11.0056 20.2579 10.4599C19.8316 9.9142 19.0437 9.81739 18.4981 10.2436C17.9526 10.6699 17.8559 11.4578 18.2822 12.0035C18.7086 12.5492 19.4965 12.646 20.042 12.2197Z" fill="%23EFB558"/><path d="M22.3165 13.0946C22.7428 13.6403 22.6462 14.4282 22.1006 14.8545C21.555 15.2807 20.7671 15.1839 20.3408 14.6382C19.9145 14.0926 20.0111 13.3047 20.5567 12.8784C21.1023 12.4521 21.8902 12.549 22.3165 13.0946Z" fill="%23EFB558"/><path d="M24.3749 15.7294C24.8012 16.2751 24.7046 17.063 24.159 17.4893C23.6134 17.9155 22.8255 17.8187 22.3992 17.273C21.9729 16.7273 22.0695 15.9394 22.6151 15.5132C23.1607 15.0869 23.9486 15.1837 24.3749 15.7294Z" fill="%23EFB558"/><path d="M20.8502 5.75481C21.2765 6.30049 21.1798 7.08839 20.6343 7.51465C20.0887 7.9409 19.3008 7.84409 18.8745 7.2984C18.4481 6.75271 18.5448 5.96481 19.0904 5.53856C19.636 5.1123 20.4239 5.20927 20.8502 5.75481Z" fill="%23EFB558"/><path d="M22.9087 8.38957C23.335 8.93526 23.2384 9.72316 22.6928 10.1494C22.1472 10.5757 21.3593 10.4789 20.933 9.93317C20.5066 9.38748 20.6033 8.59958 21.1489 8.17332C21.6945 7.74707 22.4824 7.84388 22.9087 8.38957Z" fill="%23EFB558"/><path d="M25.6697 6.29777C26.096 6.84346 25.9993 7.63136 25.4538 8.05762C24.9082 8.48387 24.1203 8.38706 23.694 7.84137C23.2676 7.29568 23.3643 6.50778 23.9099 6.08153C24.4555 5.65527 25.2433 5.75209 25.6697 6.29777Z" fill="%23EFB558"/><path d="M12.2557 16.7782C12.6821 17.3239 12.5854 18.1118 12.0398 18.5381C11.4942 18.9643 10.7064 18.8675 10.28 18.3218C9.85368 17.7762 9.95034 16.9883 10.4959 16.562C11.0415 16.1357 11.8294 16.2326 12.2557 16.7782Z" fill="%23EFB558"/><path d="M9.58066 18.8681C10.007 19.4138 9.91033 20.2017 9.36474 20.6279C8.81916 21.0542 8.03128 20.9574 7.60494 20.4117C7.17861 19.866 7.27527 19.0781 7.82086 18.6518C8.36644 18.2256 9.15432 18.3224 9.58066 18.8681Z" fill="%23EFB558"/><path d="M6.89718 20.9657C7.32352 21.5114 7.22686 22.2993 6.68127 22.7256C6.13569 23.1518 5.34781 23.055 4.92147 22.5093C4.49514 21.9637 4.5918 21.1758 5.13738 20.7495C5.68297 20.3232 6.47085 20.4201 6.89718 20.9657Z" fill="%23EFB558"/><path d="M14.94 14.6825C15.3664 15.2282 15.2697 16.0161 14.7241 16.4424C14.1785 16.8686 13.3906 16.7718 12.9643 16.2261C12.538 15.6804 12.6346 14.8925 13.1802 14.4663C13.7258 14.04 14.5137 14.1369 14.94 14.6825Z" fill="%23EFB558"/><path d="M17.6235 12.5849C18.0498 13.1306 17.9532 13.9185 17.4076 14.3447C16.862 14.771 16.0741 14.6742 15.6478 14.1285C15.2214 13.5828 15.3181 12.7949 15.8637 12.3686C16.4093 11.9424 17.1971 12.0392 17.6235 12.5849Z" fill="%23EFB558"/><path d="M24.9673 11.0243C25.3936 11.57 25.2969 12.3579 24.7513 12.7842C24.2058 13.2104 23.4179 13.1136 22.9915 12.5679C22.5652 12.0222 22.6619 11.2343 23.2075 10.8081C23.753 10.3818 24.5409 10.4787 24.9673 11.0243Z" fill="%23EFB558"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 31px 29px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: relative;
  background: var(--dark);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  position: relative;
  background-color: linear-gradient(180deg, #121212 2.12%, rgba(18, 18, 18, 0) 74.58%);
  padding-top: clamp(50px, 8vw, 48px);
  overflow: hidden;
  margin: 20px;
  background-image: url('data:image/svg+xml,<svg width="1480" height="560" viewBox="0 0 1480 560" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1419.58 559L1479 498.672V1H1V498.672L60.4199 559H1419.58Z" stroke="url(%23paint0_linear_1133_873)" stroke-opacity="0.14" stroke-width="2"/><defs><linearGradient id="paint0_linear_1133_873" x1="740" y1="730" x2="740" y2="-0.000130534" gradientUnits="userSpaceOnUse"><stop stop-color="white"/><stop offset="1" stop-color="white" stop-opacity="0"/></linearGradient></defs></svg>');
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr 1fr;
  gap: 30px;
  align-items: stretch;
  margin-bottom: 50px;
}

.footer-card {
  background: var(--dark2);
  padding: 50px;
  clip-path: polygon(40px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
}

.footer-card.footer-contact {
  clip-path: polygon(40px 0,
      calc(100% - 40px) 0,
      100% 40px,
      100% 100%,
      40px 100%,
      0 calc(100% - 40px),
      0 0);
  padding: 25px 40px;
}

.footer-links h4,
.footer-contact h4 {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 24px;
  line-height: 130%;
  margin-bottom: 37px;
}

.footer-links ul li {
  margin-bottom: 20px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 24px;
  line-height: 130%;
}

.footer-links ul li a:hover {
  color: var(--primary);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  text-align: center;
  gap: 30px;
  padding: 44px 0;

}

.footer-brand img {
  height: 71px;
}

.footer-brand p {
  font-weight: 400;
  font-size: 16px;
  line-height: 170%;
  letter-spacing: 0%;
  text-align: center;
  color: var(--white);
  max-width: 300px;
}

.social-row {
  display: flex;
  gap: 6px;
}

.social-row a {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  border: 1px solid #FFFFFF1A;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .5s ease, background .5s ease, color .5s ease;
}

.social-row a:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--dark);
}

.footer-contact p {
  font-weight: 500;
  font-size: 20px;
  line-height: 170%;
  letter-spacing: 0%;
  color: var(--white);
  margin-bottom: 24px;
}

.footer-contact a:hover {
  color: var(--primary);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  font-size: 16px;
  line-height: 160%;
  font-weight: 400;
  color: var(--white);
}


.footer-bottom p svg {
  width: 13px;
  height: 13px;
}

.footer-bottom .laxraj-love svg,
.footer-bottom .laxraj-love .fa {
  color: var(--secondary);
  animation: pound 0.35s infinite alternate;
  -webkit-animation: pound 0.35s infinite alternate;
}

@-webkit-keyframes pound {
  to {
    transform: scale(1.1);
  }
}

@keyframes pound {
  to {
    transform: scale(1.1);
  }
}

.footer-wordmark {
  font-size: 118px;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  line-height: 79%;
  white-space: nowrap;
  letter-spacing: 0;
  padding: 10px 0 0;
  transform: translateY(21%);
}
.section-pedding{
  padding-top:100px;
  padding-bottom:100px;
}
.masonry-gallery {
  column-count: 3;
  column-gap: 16px; 
}
.masonry-gallery .grid-item {
  break-inside: avoid; 
  margin-bottom: 16px; 
}
.masonry-gallery .grid-item a {
    display: block;
}
.masonry-gallery .grid-item .gallery-box {
    overflow: hidden;
    position: relative;
}
.masonry-gallery .grid-item .gallery-box img {
    display: block;
    width: 100%;  
    transition: all 0.5s;
}
.masonry-gallery .grid-item .gallery-box:hover img {
    transform: scale(1.1);
}

.masonry-gallery .grid-item .gallery-box:before{
  background: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><foreignObject x="-3" y="-3" width="66" height="66"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(1.5px);clip-path:url(%23bgblur_0_468_273_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="3"><rect width="60" height="60" rx="30" fill="white" fill-opacity="0.5"/><rect x="0.5" y="0.5" width="59" height="59" rx="29.5" stroke="white" stroke-opacity="0.08"/><path d="M36.875 36.875L42.375 42.375" stroke="%23121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M39.625 28.625C39.625 22.5499 34.7002 17.625 28.625 17.625C22.5499 17.625 17.625 22.5499 17.625 28.625C17.625 34.7002 22.5499 39.625 28.625 39.625C34.7002 39.625 39.625 34.7002 39.625 28.625Z" stroke="%23121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M23.8125 28.625H33.4375M28.625 23.8125V33.4375" stroke="%23121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="bgblur_0_468_273_clip_path" transform="translate(3 3)"><rect width="60" height="60" rx="30"/></clipPath></defs></svg>');
  width:60px;
  height:60px;
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
  z-index:2;
  opacity:0;
  transition: all 0.5s;
  content:'';
}
.masonry-gallery .grid-item .gallery-box:hover:before{
  opacity:1;
}
.masonry-gallery .grid-item .gallery-box::after{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  z-index:1;
  opacity:0;
  transition: all 0.5s;
  content:'';
  background: #121212;
}
.masonry-gallery .grid-item .gallery-box:hover:after{
  opacity:0.6;
}
.hero-section:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 20%;
    background: linear-gradient(180deg, rgba(18, 18, 18, 0) 25.17%, #121212 100%);
}






.product-hero .title {
  text-align: left;
}


.product-hero .container {
  width: 100%;
  text-align: left;
}
section.hero-section.product-hero {
    padding: 148px 0 51px;
}

.product-hero-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}

.breadcrumb {
    display: block;
    font-size: 16px;
    color: var(--white);
    line-height: 170%;
    margin-bottom: 10px;
}
.breadcrumb a {
  transition: color .25s ease;
}

.breadcrumb a:hover {
  color: var(--primary);
}

.breadcrumb span {
  color: var(--primary);
}

.product-hero-title h1 {
  font-size: clamp(32px, 4.5vw, 50px);
  font-weight: 700;
  text-transform: uppercase;
  line-height:130%;
}

.inquiry-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 11px;
}

.btn-whatsapp {
  background: #25D366;
  color: #0b2b16;
}

.btn-whatsapp:hover {
  background: #1ebe5a;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(37, 211, 102, .25);
}

section.product-body.section-pad {
    padding-top: 0;
}
.product-featured-img {
  margin-bottom: 50px;
}

.product-featured-img img {
  width: 100%;
  display:block;
}
.product-des{
color: var(--white);

}
.product-des p {
font-weight: 400;
font-size: 16px;
line-height: 170%;
letter-spacing: 0%;
  margin-bottom: 12px;
}


.product-des  h2 {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 500;
    line-height: 130%;
    margin-bottom: 18px;
    margin-top: 40px;
}
.product-des ul {
    display: flex;
    flex-wrap: wrap;
}

.product-des ul li {
    font-size: 16px;
    line-height: 1.5;
    padding: 0 0 0 30px;
    width: 50%;
    margin: 0 0 20px;
    background: url('data:image/svg+xml,<svg width="9" height="15" viewBox="0 0 9 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.35675 1.17841C2.35675 1.82924 1.82929 2.35683 1.17862 2.35683C0.52795 2.35683 0.000488281 1.82924 0.000488281 1.17841C0.000488281 0.527584 0.52795 0 1.17862 0C1.82929 0 2.35675 0.527584 2.35675 1.17841Z" fill="%23EFB558"/><path d="M1.17862 5.49746C1.82928 5.49746 2.35675 4.96986 2.35675 4.31904C2.35675 3.66822 1.82928 3.14063 1.17862 3.14063C0.527956 3.14062 0.000488281 3.66822 0.000488281 4.31904C0.000488281 4.96986 0.527956 5.49746 1.17862 5.49746Z" fill="%23EFB558"/><path d="M1.17862 8.64199C1.82928 8.64199 2.35675 8.11439 2.35675 7.46357C2.35675 6.81275 1.82928 6.28516 1.17862 6.28516C0.527956 6.28516 0.000488281 6.81275 0.000488281 7.46357C0.000488281 8.11439 0.527956 8.64199 1.17862 8.64199Z" fill="%23EFB558"/><path d="M2.35626 10.6042C2.35626 11.255 1.8288 11.7826 1.17813 11.7826C0.527462 11.7826 0 11.255 0 10.6042C0 9.95337 0.527462 9.42578 1.17813 9.42578C1.8288 9.42578 2.35626 9.95337 2.35626 10.6042Z" fill="%23EFB558"/><path d="M2.35675 13.7468C2.35675 14.3976 1.82929 14.9252 1.17862 14.9252C0.52795 14.9252 0.000488281 14.3976 0.000488281 13.7468C0.000488281 13.0959 0.52795 12.5684 1.17862 12.5684C1.82929 12.5684 2.35675 13.0959 2.35675 13.7468Z" fill="%23EFB558"/><path d="M5.51788 4.31904C5.51788 4.96987 4.99042 5.49746 4.33975 5.49746C3.68908 5.49746 3.16162 4.96987 3.16162 4.31904C3.16162 3.66821 3.68908 3.14062 4.33975 3.14063C4.99042 3.14063 5.51788 3.66839 5.51788 4.31904Z" fill="%23EFB558"/><path d="M5.51788 7.46357C5.51788 8.1144 4.99042 8.64199 4.33975 8.64199C3.68908 8.64199 3.16162 8.1144 3.16162 7.46357C3.16162 6.81275 3.68908 6.28516 4.33975 6.28516C4.99042 6.28516 5.51788 6.81275 5.51788 7.46357Z" fill="%23EFB558"/><path d="M8.77228 7.51435C8.77228 8.16518 8.24482 8.69277 7.59415 8.69277C6.94348 8.69277 6.41602 8.16518 6.41602 7.51435C6.41602 6.86353 6.94348 6.33594 7.59415 6.33594C8.24482 6.33594 8.77228 6.86353 8.77228 7.51435Z" fill="%23EFB558"/><path d="M5.51837 10.6042C5.51837 11.255 4.99091 11.7826 4.34024 11.7826C3.68957 11.7826 3.16211 11.255 3.16211 10.6042C3.16211 9.95337 3.68957 9.42578 4.34024 9.42578C4.99091 9.42578 5.51837 9.95337 5.51837 10.6042Z" fill="%23EFB558"/></svg>');
    background-repeat: no-repeat;
    background-position: 0px 3px;
}

    .table-responsive {
        overflow-x: auto;
        width: 100%;
        margin-bottom: 1rem;
        -webkit-overflow-scrolling: touch;
    }

.product-des table{
  margin-top: 16px;
  border-radius: 12px;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, .1);
  width: 100%;
  border-collapse: collapse;
}

.product-des table th,
.product-des table td {
  text-align: left;
  padding: 18px 24px;
  font-size: 15px;
  white-space: nowrap;
}

.product-des table th:nth-child(2),
.product-des table td:nth-child(2) {
  white-space: normal;
}

.product-des table thead th {
  background: var(--dark2);
  font-weight: 600;
  text-transform: none;
  color: var(--white);
}

.product-des table tbody tr {
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.product-des table tbody td {
  color: var(--white);
  opacity: .85;
}

.product-des table tbody td:first-child {
  opacity: 1;
}

/* ==========================================================================
   Responsive — breakpoints match css/responsive.css (1024 / 992 / 767)
   ========================================================================== */
@media (max-width: 1024px) {
  .product-hero-inner {
    align-items: flex-start;
  }
}

@media (max-width: 992px) {
  .product-hero-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .points-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 767px) {
  .inquiry-actions {
    width: 100%;
  }

  .inquiry-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

}











.main_pop_wrapper {
    position: relative;
    padding-block: 54px;
    overflow: hidden;
    height: 100%;
}
.inquiry-box {
    margin-inline: auto;
    width: 100%;
    max-width: 800px;
    position: relative;
    z-index: 10;
}

.inquiry-box h2 {
    text-align: center;
    font-size: 30px;
    margin: 0 0 30px;
}

.pop_wave_block {
    background-color: var(--primary);
    width: 100%;
    height: 240px;
    margin-top: -54px;
}

.main_pop_box {
    background: linear-gradient(180deg, rgba(10, 10, 14, .78) 0%, rgba(10, 10, 14, .55) 35%, rgba(10, 10, 14, .82) 100%),
    url('../images/we-serve-img.webp') center center / cover no-repeat;
    width: 100%;
}

/* 08-07-2026 end */

.popup_overlay {
    width: 100%;
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: .35s ease;
    z-index: 99999;
}

.popup_overlay.active {
    opacity: 1;
    visibility: visible;
}

.popup_box {
    position: relative;
    width: 100%;
    max-width: 900px;
    transform: translateY(40px) scale(.9);
    transition: .35s ease;
}

.popup_overlay.active .popup_box {
    transform: translateY(0) scale(1);
}

.popup_close {
    position: absolute;
    right: 33px;
    top: 30px;
    border: none;
    color: var(--white);
    font-size: 40px;
    cursor: pointer;
    z-index: 100;
    background-color: transparent;
    transition: .3s;
}

.popup_close:hover {
    transform: rotate(90deg);
}

body.popup-open {
    overflow: hidden;
}






.contact-hero .container {
  width: 100%;
}

.contact-section {
  position: relative;
  background:
    linear-gradient(180deg, rgba(10, 10, 14, .78) 0%, rgba(10, 10, 14, .55) 35%, rgba(10, 10, 14, .82) 100%),
    url('../images/contact/contact.png') center top / cover no-repeat;
}

.contact-wrap {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: start;
}

/* Info column ---------------------------------------------------------------- */
.contact-info h2 {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 20px;
}

.contact-info h2 span {
  display: block;
}

.contact-info > p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--white);
  opacity: .85;
  max-width: 460px;
  margin-bottom: 44px;
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.contact-info-list li {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.icon-circle {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}

.info-text {
  padding-top: 8px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--white);
  opacity: .9;
}

.info-text strong {
  display: block;
  font-weight: 600;
  opacity: 1;
  margin-bottom: 2px;
}

.info-text a {
  display: block;
  transition: color .25s ease;
}

.info-text a:hover {
  color: var(--primary);
}

/* Form card ------------------------------------------------------------------ */
.contact-form-card {
  background: rgba(20, 20, 24, .55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .1);
  padding: 48px;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px 40px;
}

.form-field-full {
  grid-column: 1 / -1;
}

.form-field label {
  display: block;
  font-size: 15px;
  margin-bottom: 10px;
  color: var(--white);
}

.form-field label span {
  color: var(--primary);
  margin-left: 2px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  color: var(--white);
  font-family: var(--font);
  font-size: 16px;
  padding: 4px 0 12px;
  transition: border-color .25s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255, 255, 255, .5);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-bottom-color: var(--primary);
}

.contact-form textarea {
  resize: vertical;
  min-height: 130px;
}

.select-wrap {
  position: relative;
}

.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 26px;
}

.contact-form select option {
  background: var(--dark2);
  color: var(--white);
}

.select-chevron {
  position: absolute;
  right: 0;
  top: 6px;
  color: var(--white);
  pointer-events: none;
}

.form-submit-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 8px;
}

.form-status {
  font-size: 14px;
  color: var(--primary);
}

/* ==========================================================================
   Responsive — breakpoints match css/responsive.css (1024 / 992 / 767)
   ========================================================================== */
@media (max-width: 1024px) {
  .contact-wrap {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .contact-info > p {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  .contact-form-card {
    padding: 30px 24px;
  }

  .contact-form {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .contact-info-list li {
    gap: 14px;
  }

  .icon-circle {
    width: 46px;
    height: 46px;
  }
}




/* about-us page */
.bg-img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.about {
  min-height: auto;
  padding: 70px 0 59px;
}

.about.hero .container {
  padding: 119px 20px 51px;
}

.about.hero .bg-img img {
  height: 100%;
  object-fit: cover;
}

.title {
  text-align: center;
}

.about-wrap {
  display: flex;
  align-items: flex-start;
  gap: 50px;
}

.fueling-img {
  position: sticky;
  top: 100px;
  width: 60%;
}

.fueling-detail {
  text-align: left;
width: 76%
}

.fueling-detail h2 {
  padding-right: 50px;
  margin-bottom: 30px;
}

.fueling-detail p {
  text-align: left;
  font-size: 16px;
  line-height: 169%;
  margin-bottom: 14px;
}

.fueling-detail h6 {
  display: block;
  font-weight: 600;
  font-size: 20px;
  line-height: 170%;
  letter-spacing: 0%;
}


.products-section {
    padding: 72px 0;
}

.products-wrap {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    gap: 40px 20px;
}

.products-wrap .products-box {
    border: 1px solid #FFFFFF1A;
    padding: 8px;
    display: flex;
    flex-flow: column;
    gap: 17px;
    transition: all 0.5s ease;
    width: 26%;
    overflow: hidden;
    position:relative;
}

.products-wrap .products-box .product-image {
    width: 100%;
    height: 296px;
    overflow: hidden;
}

.products-wrap .products-box .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.products-wrap .products-box:hover {
    border: 1px solid #FFFFFF;
}

.products-wrap .products-box:hover .product-image img {
    scale: 1.1;
}

.products-wrap .products-box .product-content {
    font-weight: 600;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0%;
    text-transform: uppercase;
    color: var(--white);
    background-image: url('data:image/svg+xml,<svg width="31" height="29" viewBox="0 0 31 29" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.141 5.19035C16.5673 5.73603 16.4706 6.52393 15.9251 6.95019C15.3795 7.37644 14.5916 7.27963 14.1653 6.73394C13.7389 6.18826 13.8356 5.40036 14.3812 4.97411C14.9267 4.54785 15.7146 4.64466 16.141 5.19035Z" fill="%23EFB558"/><path d="M17.9834 9.58496C18.529 9.15871 18.6256 8.3708 18.1993 7.82512C17.773 7.27944 16.9851 7.18262 16.4395 7.60887C15.8939 8.03512 15.7973 8.82303 16.2236 9.36871C16.6499 9.91439 17.4378 10.0112 17.9834 9.58496Z" fill="%23EFB558"/><path d="M20.042 12.2197C20.5876 11.7935 20.6842 11.0056 20.2579 10.4599C19.8316 9.9142 19.0437 9.81739 18.4981 10.2436C17.9525 10.6699 17.8559 11.4578 18.2822 12.0035C18.7085 12.5492 19.4964 12.646 20.042 12.2197Z" fill="%23EFB558"/><path d="M22.3163 13.0946C22.7426 13.6403 22.6459 14.4282 22.1003 14.8545C21.5548 15.2807 20.7669 15.1839 20.3405 14.6382C19.9142 14.0926 20.0109 13.3047 20.5565 12.8784C21.102 12.4521 21.8899 12.549 22.3163 13.0946Z" fill="%23EFB558"/><path d="M24.3749 15.7294C24.8012 16.2751 24.7045 17.063 24.1589 17.4893C23.6134 17.9155 22.8255 17.8187 22.3991 17.273C21.9728 16.7273 22.0695 15.9394 22.6151 15.5132C23.1606 15.0869 23.9485 15.1837 24.3749 15.7294Z" fill="%23EFB558"/><path d="M20.8502 5.75481C21.2765 6.30049 21.1799 7.08839 20.6343 7.51465C20.0887 7.9409 19.3008 7.84409 18.8745 7.2984C18.4481 6.75271 18.5448 5.96481 19.0904 5.53856C19.636 5.1123 20.424 5.20927 20.8502 5.75481Z" fill="%23EFB558"/><path d="M22.9085 8.38957C23.3349 8.93526 23.2382 9.72316 22.6926 10.1494C22.1471 10.5757 21.3592 10.4789 20.9328 9.93317C20.5065 9.38748 20.6032 8.59958 21.1487 8.17332C21.6943 7.74707 22.4822 7.84388 22.9085 8.38957Z" fill="%23EFB558"/><path d="M25.6698 6.29777C26.0961 6.84346 25.9994 7.63136 25.4539 8.05762C24.9083 8.48387 24.1204 8.38706 23.6941 7.84137C23.2677 7.29568 23.3644 6.50778 23.91 6.08153C24.4556 5.65527 25.2434 5.75209 25.6698 6.29777Z" fill="%23EFB558"/><path d="M12.2557 16.7782C12.682 17.3239 12.5854 18.1118 12.0398 18.5381C11.4942 18.9643 10.7063 18.8675 10.28 18.3218C9.85366 17.7762 9.95033 16.9883 10.4959 16.562C11.0415 16.1357 11.8294 16.2326 12.2557 16.7782Z" fill="%23EFB558"/><path d="M9.58066 18.8681C10.007 19.4138 9.91033 20.2017 9.36475 20.6279C8.81917 21.0542 8.03129 20.9574 7.60495 20.4117C7.17862 19.866 7.27528 19.0781 7.82086 18.6518C8.36645 18.2256 9.15433 18.3224 9.58066 18.8681Z" fill="%23EFB558"/><path d="M6.89707 20.9657C7.32341 21.5114 7.22674 22.2993 6.68116 22.7256C6.13558 23.1518 5.3477 23.055 4.92136 22.5093C4.49502 21.9637 4.59169 21.1758 5.13727 20.7495C5.68285 20.3232 6.47073 20.4201 6.89707 20.9657Z" fill="%23EFB558"/><path d="M14.94 14.6825C15.3664 15.2282 15.2697 16.0161 14.7241 16.4424C14.1785 16.8686 13.3907 16.7718 12.9643 16.2261C12.538 15.6804 12.6347 14.8925 13.1802 14.4663C13.7258 14.04 14.5137 14.1369 14.94 14.6825Z" fill="%23EFB558"/><path d="M17.6234 12.5849C18.0497 13.1306 17.9531 13.9185 17.4075 14.3447C16.8619 14.771 16.074 14.6742 15.6477 14.1285C15.2213 13.5828 15.318 12.7949 15.8636 12.3686C16.4092 11.9424 17.1971 12.0392 17.6234 12.5849Z" fill="%23EFB558"/><path d="M24.9671 11.0243C25.3935 11.57 25.2968 12.3579 24.7512 12.7842C24.2056 13.2104 23.4178 13.1136 22.9914 12.5679C22.5651 12.0222 22.6618 11.2343 23.2073 10.8081C23.7529 10.3818 24.5408 10.4787 24.9671 11.0243Z" fill="%23EFB558"/></svg>');
    background-repeat: no-repeat;
    background-size: 31px 29px;
    background-position: center right;
    padding: 4px 0;
}
.products-wrap .products-box .product-content:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 6;
}
.products-wrap .products-box:nth-child(5n + 1){
    width: 44.5%;
}
.inquiry-box .contact-form {
    display: block;
}
.inquiry-box .contact-form .form-field {
    margin: 0 0 30px;
}
.inquiry-box .contact-form .form-field-wrap{
    display:flex;
    gap: 40px;
}
.inquiry-box .contact-form .form-field-wrap .form-field{
    width:100%;
}


.h_hero .bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    overflow: hidden;
}
.h_hero .bg img {
    width: 100%;
    display: block;
    height: 100%;
    transition: all 8s;
    object-fit: cover;
}
.h_hero .active .bg img{
    transform:scale(1.1)
}
.h_hero .item {
    min-height: 650px;
    height: 100vh;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 80px;
}

.h_hero .active .bg::before {
    content: '';
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(18, 18, 18, 0.96) 0%, rgba(18, 18, 18, 0.5) 100%);
    left:0;
    right:0;
    bottom:0;
    top:0;
}
.h_hero .item .container {
    width: 100%;
    display: flex;
    align-items: flex-end;
    gap: 60px;
}
.h_hero .item h1 {
    flex-grow: 1;
    font-size: 70px;
    margin: 0;
    line-height: 120%;
    text-transform: uppercase;
    transform:translateY(120px);
    opacity:0;
    transition:all 0.8s;
}
.h_hero .active .item h1,
.h_hero .active .item .txt p  {
    transform:translateY(0);
    opacity:1;
}
.h_hero .item .txt {
    width: 350px;
}
.h_hero .item .txt p{
  font-size:18px;
  margin-bottom:20px;
    transform:translateY(120px);
    opacity:0;
    transition:all 0.8s;
}
.h_hero .owl-dots {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 30px;
}
.h_hero .owl-dots button.owl-dot:before {
    content: "01";
}
.h_hero .owl-dots button.owl-dot:nth-child(2):before {
    content: "02";
}
.h_hero .owl-dots button.owl-dot:nth-child(3):before {
    content: "03";
}
.h_hero .owl-dots button.owl-dot:nth-child(4):before {
    content: "04";
}
.h_hero .owl-dots button.owl-dot:nth-child(5):before {
    content: "05";
}
.h_hero .owl-dots button.owl-dot {
    width: auto;
    height: auto;
    font-size: 16px;
    line-height: 120%;
    display: flex;
    flex-direction: column;
    gap: 8px;
  transition:all 0.5s;
    color:#fff;
}
.h_hero .owl-dots button.owl-dot:after{
  content:'';
  width: 2px;
  border-right:2px dashed var(--primary) ;
  margin:0 auto;
  transition:all 0.5s;
  height:0;
  margin-bottom:14px;
}
.h_hero .owl-dots button.owl-dot.active{
  color:var(--primary);
}
.h_hero .owl-dots button.owl-dot.active:after{
    height:60px;
}