/* ===========================
   BANNER styles
   =========================== */
@import url(https://db.onlinewebfonts.com/c/c9a373f96f6fecc4246ed4511a629d50?family=Playfair+Display+SC);

/* banner outer container (large rounded) */
.banner {
  position: relative;
  width: 98%;
  margin: 10px auto;
  min-height: 100vh;
  border-radius: 40px;
  /* overflow: visible; */
  /* we want panels visible */
  display: flex;
  align-items: center;
  justify-content: center;
  /* big outer green page background like screenshot */
  /* background: linear-gradient(180deg, #0b7f3f 0%, #0b7f3f 5%, transparent 5%); */
  z-index: 1;
  overflow: hidden;
  margin-bottom: -100px;
}

/* inner dark region (the main rounded card) */
.banner .inner-frame {
  position: absolute;
  inset: 18px;
  border-radius: 35px;
  /* smooth radial gradient for subtle center brightness */
  background: radial-gradient(circle at center, rgba(3, 20, 25, 0.6), rgba(0, 12, 12, 1));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55) inset, 0 10px 30px rgba(0, 0, 0, 0.2);
  z-index: 10;
  overflow: hidden;
  border-top-left-radius: 135px;
  border-bottom-right-radius: 135px;
}



/* LEFT / RIGHT image panels */
.side-panel {
  position: absolute;
  top: 36px;
  bottom: 36px;
  width: 18%;
  background-size: cover;
  background-position: center;
  z-index: 12;
  /* inner rounded corners to match screenshot */
  /* box-shadow: inset 0 0 0 8px rgba(1, 8, 20, 0.9);
  opacity: 0.9; */
}

/* left panel: rounds on top-left & bottom-left */
.left-panel {
  left: 36px;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
  background-image: url("../IMAGES/Left-side-bg.png");
  background-repeat: no-repeat;
  filter: grayscale(6%) contrast(0.9) brightness(0.6);
  /* dark overlay using linear-gradient */
  background-blend-mode: multiply;
  /* background-color: rgba(3, 6, 10, 0.5); */
}

/* right panel: rounds on top-right & bottom-right */
.right-panel {
  right: 36px;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  background-image: url("../IMAGES/Right-side-bg.png");
  background-repeat: no-repeat;
  filter: contrast(0.9) brightness(0.7);
  background-blend-mode: multiply;
  background-color: rgba(3, 6, 25, 0.5);
}

/* Pinstripe overlay – thicker, more defined stripes */
.pinstripes {
  position: absolute;
  inset: 36px;
  border-radius: 45px;
  z-index: 20;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right,
      rgba(255, 255, 255, 0.06) 0px,
      rgba(255, 255, 255, 0.06) 3px,
      transparent 2px,
      transparent 16px);
  mix-blend-mode: overlay;
  opacity: 0.8;
}


/* banner content (center) */
.banner-content {
  position: relative;
  z-index: 30;
  text-align: center;
  color: #fff;
  max-width: 820px;
  padding: 0 28px;
}

/* subtitle */
.subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  margin-bottom: 12px;
  letter-spacing: 0.4px;
}

/* main heading — large elegant style */
.banner-content h1 {
  font-size: 4.2rem;
  /* big like screenshot */
  line-height: 1.05;
  font-weight: normal;
  margin: 10px 0 12px;
  color: rgba(255, 255, 255, 0.96);
  text-wrap: balance;
}

/* green second-line word */
.banner-content h1 span {
  display: block;
  margin-top: 10px;
  color: rgba(56, 176, 0, 0.85);
  font-weight: normal;
  font-size: 3.6rem;
  font-weight: normal;
  font-family: 'Playfair Display', serif;
  opacity: 0.95;
  letter-spacing: 1px;
  mix-blend-mode: screen;
  transform: translateY(6px);
}

.btn-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2%;
}

/* === BUTTON BASE === */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* space between text and icon */
  border: 1.6px solid rgba(255, 255, 255, 0.75);
  background: transparent;
  color: #fff;
  border-radius: 28px;
  padding: 12px 28px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(2px);
  position: relative;
  overflow: hidden;
  /* ensures icon stays inside */
}

/* === HOVER STYLE FOR BUTTON === */
.btn-outline:hover {
  background: rgba(255, 255, 255, 0.95);
  color: #009444;
}

/* === ICON INSIDE BUTTON === */
.btn-outline .seven-symbol {
  width: 22px;
  height: auto;
  transition: transform 0.4s ease, filter 0.4s ease;
  transform-origin: center;
  display: none;
}

/* === HOVER ANIMATION === */
.btn-outline:hover .seven-symbol {
  transform: rotate(5deg);
  display: block;
  filter: drop-shadow(0 0 6px rgba(0, 255, 120, 0.6));
  width: 15px;
}

/* filled */
.btn-filled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* space between text and icon */
  border: 1.6px solid rgba(255, 255, 255, 0.75);
  background: #000;
  color: #fff;
  border-radius: 28px;
  padding: 12px 28px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(2px);
  position: relative;
  overflow: hidden;
  /* ensures icon stays inside */
}

/* === ICON INSIDE BUTTON === */
.btn-filled .seven-symbol {
  width: 22px;
  height: auto;
  transition: transform 0.4s ease, filter 0.4s ease;
  transform-origin: center;
  display: none;
}


.btn-filled:hover .seven-symbol {
  transform: rotate(5deg);
  display: block;
  filter: drop-shadow(0 0 6px rgba(0, 255, 120, 0.6));
  width: 15px;
}

.banner-circular-bg {
  position: absolute;
  left: 47%;
  bottom: -285px;
  /* raises a bit for more “arc” visibility */
  transform: translateX(-50%);
  width: 820px;
  /* slightly wider for a luxurious visual arc */
  height: 580px;
  background: url('../IMAGES/circular-bg.png') center center no-repeat;
  background-size: contain;
  opacity: 0.19;
  z-index: 18;
  pointer-events: none;
  border-radius: 50%;
  animation: rotate-circular-bg 52s linear infinite;
}

.banner-circular-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 60% 50%, rgba(0, 90, 60, 0.08), transparent 78%);
  pointer-events: none;
}

@keyframes rotate-circular-bg {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }

  100% {
    transform: translateX(-50%) rotate(-360deg);
  }
}


.clarity-animated {
  display: inline-block;
  position: relative;
  opacity: 0;
  transform: translateX(70px);
  transition: all 0.6s cubic-bezier(0.62, 0.09, 0.27, 1);
}

.clarity-animated.in {
  opacity: 1;
  transform: translateX(0);
}

.clarity-animated.out {
  opacity: 0;
  transform: translateX(-70px);
  transition: all 0.5s cubic-bezier(0.72, 0.11, 0.43, 0.97);
}

@keyframes claritySlide {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  15% {
    opacity: 1;
    transform: translateX(0);
  }

  85% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%);
  }
}

.clarity-animated {
  display: inline-block;
  min-width: 210px;
  font-family: 'Playfair Display', serif;
  font-size: 3.6rem;
  opacity: 0;
}


/* === GLOBAL LAYOUT === */
section {
  color: #fff;
}

/* === WHO WE ARE === */
.who-we-are {
  background: linear-gradient(145deg, #0e1113, #101214);
  border-radius: 40px;
  box-shadow: 0 0 20px rgba(0, 255, 120, 0.40);
  padding: 60px 80px;
  margin: 0px auto;
  /* max-width: 1200px; */
  width: 95%;
  position: relative;
  overflow: hidden;
  z-index: 2;
  transform: translateY(120px);
  position: relative;

}

.who-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 300px;
}

/* === PINSTRIPE OVERLAY === */
.about-pinstripes {
  position: absolute;
  inset: 36px;
  /* controls stripe padding inside the section */
  border-radius: 45px;
  z-index: 20;
  /* sits below text but above background */
  pointer-events: none;
  /* ensures it doesn’t block clicks */
  background-image: repeating-linear-gradient(to right,
      rgba(255, 255, 255, 0.15) 0px,
      rgba(255, 255, 255, 0.15) 3px,
      transparent 3px,
      transparent 16px);
  mix-blend-mode: overlay;
  opacity: 1;
}

.who-text h2 {
  font-size: 2rem;
  font-weight: 700;
}

.who-text h2 span {
  color: #0B9444;
}

.who-text p {
  color: #ccc;
  margin: 15px 0 25px;
  max-width: 480px;
  font-size: 15px;
  line-height: 1.7;
}

.explore-btn {
  display: inline-block;
  padding: 8px 25px;
  border: 1px solid #0B9444;
  color: #fff;
  border-radius: 30px;
  transition: 0.3s;
}

.explore-btn:hover {
  background: #0B9444;
  color: #000;
}

.who-logo img {
  width: 100%;
  height: 400px;
  margin-top: 15%;
  margin-left: 20%;
}

/* === OUR SERVICES === */
.our-services {
  background: linear-gradient(160deg, #0e1113, #101314);
  border-radius: 40px;
  box-shadow: 0 0 20px rgba(0, 255, 120, 0.15);
  padding: 60px 80px;
  /* max-width: 1200px; */
  margin: 80px auto;
  position: relative;
  /* Needed for absolute positioning of the circle */
  overflow: hidden;
  /* Ensures the circular bg doesn't overflow section */
  z-index: 1;

}


.our-services h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 40px;
}

.our-services h2 span {
  color: #0B9444;
}

.services-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 50px;
  position: relative;
  z-index: 2;
}

/* === CIRCULAR BACKGROUND (left side behind list) === */
.service-circular-bg {
  position: absolute;
  left: -23%;
  top: 50%;
  transform: translate(-25%, -50%);
  /* shifts slightly off-screen for a natural glow */
  width: 900px;
  height: 550px;
  background: url('../IMAGES/circular-bg.png') center center no-repeat;
  background-size: contain;
  opacity: 0.15;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  animation: rotate-circular-bg 52s linear infinite;
  box-shadow:
    0 60px 120px 0 rgba(192, 192, 192, 0.25),
    /* soft silver outer glow */
    0 0 0 60px rgba(192, 192, 192, 0.05) inset;
  /* faint inner glow */
}

@keyframes rotate-circular-bg {
  from {
    transform: translate(-25%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-25%, -50%) rotate(-360deg);
  }
}

/* === SERVICES LIST === */
.services-list {
  flex: 1;
  position: relative;
  z-index: 2;
  /* ensure above circle */
}


.service-box {
  background: #1a1c1d;
  /* border-radius: 20px; */
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding: 20px;
  margin-bottom: 15px;
  border: 1px solid #2a2a2a;
  color: #aaa;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  /* align-items: center; */
  justify-content: space-between;

}

.service-box h3 {
  color: #ddd;
  margin-bottom: 5px;
  font-weight: 400;
  font-size: 26px;
}

.service-box p {
  font-weight: 400;
  font-size: 16px;
  font-weight: 400;

}

.service-box.active,
.service-box:hover {
  border-color: #0B9444;
  box-shadow: 0 0 15px rgba(0, 255, 120, 0.3);
  color: #fff;
}


.service-box .service-icon {
  height: 100%;
  margin-top: 0;
}

.service-icon img {
  height: 60px;
}


.services-image {
  flex: 1;
  text-align: center;
  border: 2px solid #0B9444;
  border-top-left-radius: 45px;
  border-bottom-right-radius: 45px;
  padding: 20px;
  background: #111;
  position: relative;
  height: 100%;

}

.services-image img {
  width: 100%;
  height: 410px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.services-image p {
  margin-top: 20px;
  color: #ccc;
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  width: 350px;
}

.arrow-indicator {
  position: absolute;
  right: 30px;
  bottom: 25px;
  width: 48px;
  height: 48px;
  border: 2px solid #0B9444;
  /* outline color */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0B9444;
  /* arrow color */
  font-size: 20px;
  transition: all 0.3s ease;
  cursor: pointer;
  background: transparent;
}

/* Hover effect */
.arrow-indicator:hover {
  background: #0B9444;
  color: #fff;
  box-shadow: 0 0 12px rgba(11, 148, 68, 0.4);
  transform: scale(1.1);
}


/* === HOW BENEFIT === */
.how-benefit {
  background: linear-gradient(145deg, #0e1113, #101214);
  border-radius: 40px;
  box-shadow: 0 0 20px rgba(0, 255, 120, 0.40);
  padding: 30px 40px;
  margin: 40px auto;
  /* max-width: 1200px; */
  width: 95%;
  transform: translateY(-120px);
  position: relative;
  z-index: 2;
}


.our-pinstripes {
  position: absolute;
  inset: 36px;
  /* controls stripe padding inside the section */
  border-radius: 45px;
  z-index: 20;
  /* sits below text but above background */
  pointer-events: none;
  /* ensures it doesn’t block clicks */
  background-image: repeating-linear-gradient(to right,
      rgba(255, 255, 255, 0.15) 0px,
      rgba(255, 255, 255, 0.15) 3px,
      transparent 3px,
      transparent 16px);
  mix-blend-mode: overlay;
  opacity: 0.98;
}

.benefit-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
  height: 300px;
}

.benefit-text h2 {
  font-size: 2rem;
}

.benefit-text h2 span {
  color: #0B9444;
}

.benefit-text p {
  color: #ccc;
  margin: 20px 0;
  max-width: 500px;
  line-height: 1.7;
}

/* ===== ICON + TEXT MARQUEE ===== */
.benefit-icon {
  position: relative;
  overflow: hidden;
  width: 50%;
}

/* --- ICON TRACK (moves left) --- */
.icon-track {
  display: flex;
  gap: 25px;
  animation: moveLeft 5s linear infinite;
  /* margin-top: 25px; */
  width: 400px;
}

/* Icons */
.icon-wrapper {
  flex: 0 0 auto;
}

.icon-wrapper img {
  height: 250px;
}

/* --- TEXT TRACK (moves right) --- */
.text-track {
  position: absolute;
  top: 80%;
  left: 0;
  width: 600px;
  display: flex;
  gap: 40px;
  align-items: center;
  white-space: nowrap;
  animation: moveRight 10s linear infinite;
  transform: translateY(-50%);
  pointer-events: none;
}

.benefit-badge {
  background: #fff;
  color: #000;
  padding: 10px 20px;
  border-radius: 25px;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}

/* === KEYFRAMES === */
@keyframes moveLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes moveRight {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}


/* === CLIENTS SECTION === */
.clients-section {
  text-align: center;
  padding: 20px 0;
  margin-top: -125px;
  position: relative;
  overflow: hidden;
}

.clients-section h2 {
  font-size: 32px;
  font-weight: 600;
  color: white;
  margin-bottom: 30px;
  margin-top: 0;
}

/* === MARQUEE WRAPPER === */
.marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Moving track */
.marquee-track {
  display: flex;
  align-items: center;
  gap: 30px;
  white-space: nowrap;
  animation: scroll 20s linear infinite;
}

/* === ANIMATION === */
@keyframes scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* === LOGO BOX === */
.logo-box {
  flex: 0 0 220px;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(180deg, #0d8040, #1d643e);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
  border-radius: 12px;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .logo-box {
    height: 100px;
    flex: 0 0 140px;
    font-size: 16px;
  }

  .marquee-track {
    gap: 20px;
    animation: scroll 15s linear infinite;
  }
}

/* === RESPONSIVE === */
@media (max-width: 900px) {

  .who-container,
  .services-container,
  .benefit-container {
    flex-direction: column;
    text-align: center;
  }

  .services-image {
    margin-top: 30px;
  }

  .who-logo img {
    width: 120px;
    margin-top: 20px;
  }
}


@media (max-width: 900px) {
  .banner-circular-bg {
    width: 400px;
    height: 300px;
    bottom: -60px;
  }
}


/* responsive adjustments */
@media (max-width:1100px) {

  .left-panel,
  .right-panel {
    display: none
  }

  .banner .inner-frame {
    inset: 14px
  }

  .pinstripes {
    inset: 14px
  }

  .banner-content h1 {
    font-size: 2.6rem
  }

  .banner-content h1 span {
    font-size: 2rem
  }
}

@media (max-width:700px) {
  .banner {
    width: 100%;
    margin: 16px 0;
    border-radius: 0
  }

  .banner-content h1 {
    font-size: 2rem
  }

  .banner-content h1 span {
    font-size: 1.6rem
  }
}