/* for cursor */
.custom-cursor {
  position: fixed;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background-color: #2aa22e;
  box-shadow: 0px 0px 20px rgb(0, 255, 0);
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
}

@font-face {
  font-family: "Norwester";
  src: url(../font/norwester.otf) format("opentype");
  font-weight: normal;
  font-style: normal;
}

@media (max-width: 1600px) {

  html,
  body {
    overflow-x: hidden;
  }
}

html {
  scroll-behavior: smooth;
}

.vision-img,
.mission-img {
  width: 70%;
}

body {
  font-family: "Roboto", sans-serif;
  background-color: #f0f0f0;
  cursor: none;
}

/*for animation */
/* Card hover effect */
.col-md-4.mb-4 {
  transition: transform 0.3s, box-shadow 0.3s;
}

.col-md-4.mb-4:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 8px 32px rgba(76, 175, 80, 0.15);
  /* background-color: #35b239; */
}

/* SVG icon animation */
.col-md-4.mb-4 svg {
  transition: transform 0.3s, filter 0.3s;
}


/* Section fade-in animation */
.section-animate {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s, transform 0.8s;
}

.section-animate.visible {
  opacity: 1;
  transform: none;
}

/* Image reveal animation */
.vision-img,
.mission-img {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.8s, transform 0.8s;
}

.visible-img {
  opacity: 1;
  transform: scale(1);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-200px);
  }

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

@keyframes fadeInDelay {
  from {
    opacity: 0;
    transform: translateX(-200px);
  }

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

.ani {
  animation: fadeIn 1s ease-in;
  color: #fff;
}

.ani-p {
  animation: fadeInDelay 2.5s ease-in;
}

#bus-icon {
  fill: #fff;
}

/* testimonial section */
.testimonial-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.testimonial-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="%23ffffff" opacity="0.1"/><circle cx="80" cy="80" r="2" fill="%23ffffff" opacity="0.1"/><circle cx="40" cy="60" r="1" fill="%23ffffff" opacity="0.1"/></svg>');
  pointer-events: none;
}

.section-title {
  color: #2c3e50;
  font-weight: 700;
  margin-bottom: 15px;
  position: relative;
}

.section-subtitle {
  color: #6c757d;
  font-size: 1.1rem;
  margin-bottom: 50px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.testimonial-slider {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.testimonial-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  text-align: center;
  position: relative;
  margin: 20px;
  transition: transform 0.3s ease;
  box-shadow: .2px .2px 20px hsl(0, 0%, 40%);

}

.testimonial-card:hover {
  transform: translateY(-5px);
}

.quote-icon {
  font-size: 3rem;
  color: #2aa22e;
  margin-bottom: 20px;
  opacity: 0.3;
}

.testimonial-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #495057;
  margin-bottom: 30px;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.author-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2aa22e, #1e7e34);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
}

.author-info h5 {
  margin: 0;
  color: #2c3e50;
  font-weight: 600;
}

.author-info p {
  margin: 0;
  color: #6c757d;
  font-size: 0.9rem;
}

.stars {
  color: #ffc107;
  margin-bottom: 20px;
}

.slider-nav {
  text-align: center;
  margin-top: 30px;
}

.testimonial-nav-btn {
  background: #2aa22e;
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 0 10px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.testimonial-nav-btn:hover {
  background: #1e7e34;
  transform: scale(1.1);
}

.testimonial-nav-btn:disabled {
  background: #dee2e6;
  cursor: not-allowed;
  transform: none;
}

.slider-dots {
  text-align: center;
  margin-top: 20px;
}

.testimonial-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #dee2e6;
  display: inline-block;
  margin: 0 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: inset .2px .2px 3px hsla(0, 0%, 71%, 0.678);
}

.testimonial-dot.active {
  background: #2aa22e;
  transform: scale(1.2);
  box-shadow: inset 0px 0px 3px hsla(0, 0%, 71%, 0.678);
}

.testimonial-slide {
  display: none;
  animation: fadeIn 0.5s ease-in-out;
}

.testimonial-slide.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

@media (max-width: 768px) {
  .testimonial-section {
    padding: 60px 0;
  }

  .testimonial-card {
    padding: 30px 20px;
    margin: 10px;
  }

  .testimonial-text {
    font-size: 1rem;
  }

  .author-avatar {
    width: 50px;
    height: 50px;
    font-size: 1rem;
  }
}

/* testimonial section */
/* .bgimg {
    background-image: url("../images/aboutbag.jpg");
} */
.aboutImg {
  height: auto;
  object-fit: cover;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#WCU {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 25px;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.0);
}

#WCU:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.10);
}

/* distributors section */
.distributor-section {
  background-color: #c2f0c3;
  padding: 60px 0;
}

.distributor-text h2 {
  font-size: 2.5rem;
  font-weight: 700;
}

.distributor-text p {
  font-size: 1.50rem;
  line-height: 1.7;
  color: #555;
}

.distributor-list {
  list-style: none;
  padding-left: 0;
  margin-top: 20px;
}

.distributor-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 16px;
  font-weight: 700;
}

.distributor-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #4CAF50;
  font-weight: bold;
}

.country-flags img {
  width: 46px;
  margin: 5px 4px;
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}

/* Scroll animation */
.truck-on-scroll {
  opacity: 0;
  transform: translateX(100px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.truck-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Headlight Flash on Hover */
.truck-hover-wrap {
  position: relative;
  display: inline-block;
}

.truck-hover-wrap::after {
  content: "";
  position: absolute;
  top: 70%;
  left: 30%;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, transparent 80%);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
  box-shadow: 0 0 10px 5px rgba(255, 215, 0, 0.8);
}

.truck-hover-wrap:hover::after {
  opacity: 1;
  animation: flashlight 0.6s ease-out;
}

@keyframes flashlight {

  0%,
  100% {
    opacity: 0;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.4);
  }
}

.feature-card {
  background-color: #f9f9f9;
  border-radius: 12px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.goals-branches-clients {
  background: linear-gradient(to right, #fafafa, #f0f0f0);
  padding: 80px 0;
  overflow-x: hidden;
}

.timeline-wrapper {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 40px;
}

.timeline-item {
  min-width: 320px;
  flex: 0 0 auto;
  background: white;
  padding: 30px;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  scroll-snap-align: start;
  transition: transform 0.3s ease;
}

.timeline-item:hover {
  transform: scale(1.05);
}

.timeline-item h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: #2d2d2d;
}

.timeline-item p {
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
}

.milestone-section {
  position: relative;
  padding: 100px 0;
  background-color: #f2f2f2;
  overflow: hidden;
  z-index: 1;
}

.milestone-bg {
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: radial-gradient(circle, rgba(76, 175, 80, 0.08) 10%, transparent 80%);
  background-size: 400% 400%;
  animation: moveBackground 30s linear infinite;
  z-index: 0;
}

@keyframes moveBackground {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  z-index: 2;
  position: relative;
}

.section-subtitle {
  color: #666;
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto 3rem auto;
  z-index: 2;
  position: relative;
}

.impact-section {
  background: linear-gradient(to bottom, #f6fdf8, #ffffff);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.impact-container {
  max-width: 1100px;
  margin: auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 100px;
}

.impact-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.impact-icon {
  width: 120px;
  height: 120px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 30px;
  animation: floatIcon 6s ease-in-out infinite;
}

.goals-icon {
  background-image: url('https://www.svgrepo.com/show/276264/target-goal.svg');
}

.branches-icon {
  background-image: url('https://www.svgrepo.com/show/276486/world-globe.svg');
}

.clients-icon {
  background-image: url('https://www.svgrepo.com/show/306162/handshake-business.svg');
}

.impact-text h2 {
  font-size: 2rem;
  color: #1a3e2f;
  font-weight: 700;
  margin-bottom: 15px;
}

.impact-text p {
  font-size: 1.1rem;
  color: #444;
  max-width: 800px;
  margin: auto;
  line-height: 1.8;
}

@keyframes floatIcon {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .impact-icon {
    width: 80px;
    height: 80px;
  }

  .impact-text h2 {
    font-size: 1.5rem;
  }

  .impact-text p {
    font-size: 1rem;
  }
}

.flip-gallery {
  padding: 60px 0;
  background: #fefefe;
}

.flip-card {
  perspective: 1000px;
  width: 100%;
  height: 100%;
}

.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s;
}

.flip-card:hover .flip-inner {
  transform: rotateY(180deg);
}


/* our goals  */
.flip-gallery-section {
  padding: 80px 20px;
  background: #f8f8f8;
  text-align: center;
}

.container-flip {
  max-width: 1200px;
  margin: auto;
}

.flip-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 50px;
  color: #333;
}

/* Flip Card Gallery Layout */
.flip-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

/* Individual Flip Card */
.flip-card {
  background: transparent;
  width: 400px;
  height: 300px;
  perspective: 1000px;
}

.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-inner {
  transform: rotateY(180deg);
}

.flip-front,
.flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
}

/* Front (Image Side) */
.flip-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* Back (Text Side) */
.flip-back {
  background-color: #4CAF50;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  transform: rotateY(180deg);
  font-size: 1rem;
  border-radius: 12px;
}

.network-card h-100 {
  background-color: #92e394;
}

#globe {
  width: 600px;
}

.svg-bg {
  /* background-color: #4CAF50; */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  height: 65px;
  width: 55px;
  margin-left: auto;
  margin-right: auto;
}

.col3 svg {
  fill: #fff;
  width: 44px;
  height: 40px;
}


@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* This class will be toggled by JavaScript */
.spin-once {
  animation: spin 0.8s linear;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.10);
}

.custom-shape-divider-bottom-1752749162 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom-1752749162 svg {
  position: relative;
  display: block;
  width: calc(115% + 1.3px);
  height: 370px;
}

.custom-shape-divider-bottom-1752749162 .shape-fill {
  fill: #92E394;
}

.hero {
  height: 800px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.hero-bg-blur {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url('../images/aboutbag.jpg');
  background-size: cover;
  background-position: center;
  filter: blur(1px) brightness(0.6);
  z-index: 0;
}

.hero .container {
  position: relative;
  z-index: 1;
}

.cl3 svg {
  fill: #fff;
}

.section-title bg-white text-center px-3 {
  color: #35b239;
}

/* 3 cards style */
.choose-us-card {
  background-color: #f8f9fa;
  color: #35b239;
  transition: background-color 0.4s ease, color 0.4s ease, transform 0.4s ease;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

/* Smooth transition on SVG fill */
.choose-us-card svg {
  fill: currentColor;
  transition: fill 0.4s ease, color 0.4s ease;
}

/* Smooth transition for text */
.choose-us-card h5,
.choose-us-card p {
  transition: color 0.4s ease;
}

/* Hover lift */
.choose-us-card:hover {
  transform: translateY(-10px);
}

/* Individual hover background and color */
.choose-us-1:hover {
  transition: fill 0.4s ease, color 0.4s ease;
  background-color: #92e394;
  color: #1b4c1e;
}

.choose-us-2:hover {
  background-color: #92e394;
  color: #1b4c1e;
}

.choose-us-3:hover {
  background-color: #92e394;
  color: #1b4c1e;
}

/* Inherit hover text and icon color */
.choose-us-card:hover h5,
.choose-us-card:hover p,
.choose-us-card:hover svg {
  color: inherit;
  fill: currentColor;
}



/* globla network section */
/* Base style: white background and green text */
.network-card {
  background-color: #ffffff;
  /* Start with white */
  color: #2c662d;
  /* Calm green text */
  border-radius: 12px;
  transition: background-color 0.4s ease, color 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
  padding: 30px 20px;
  height: 100%;
}

/* Icon default: green fill matching text */
.network-card .network-icon {
  width: 50px;
  height: 50px;
  fill: currentColor;
  margin-bottom: 15px;
  transition: fill 0.4s ease;
}

/* Text transition too */
.network-card h5,
.network-card p {
  transition: color 0.4s ease;
}

/* Hover lift stays */
.network-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Individual card hover backgrounds (reverse gradient) */
.network-1:hover {
  background-color: #92e394;
  /* light green */
  color: #103c15;
}

.network-2:hover {
  background-color: #92e394;
  /* medium green */
  color: #103c15;
}

.network-3:hover {
  background-color: #92e394;
  /* dark green */
  color: #103c15;
}

.network-3:hover svg {
  fill: #1b4c1e;
}

/* Inherit color inside the card */
.network-card:hover .network-icon,
.network-card:hover h5,
.network-card:hover p {
  color: inherit;
  fill: currentColor;
}

.svg-ani:hover svg {
  transform: scale(1.2) rotate(-8deg);
  filter: drop-shadow(0 0 10px #4CAF50);
}

/* css for vison and mission*/
.vision-mission-section h2 {
  font-size: 2.2rem;
}

.vision-mission-section h3 {
  font-size: 2rem;
  margin-bottom: 12px;
  color: #2e7d32;
}

.vision-mission-section p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #444;
}

#mission1:hover,
#mission3:hover {
  transform: scale(1.10);
}

/* #vision-mission{
  background-image: linear-gradient( 135deg, #81FBB8 10%, #28C76F 100%);
} */
/* New testimonial css */
.testimonial-box {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05);
  max-width: 650px;
  transition: transform 0.3s ease;
}

.testimonial-box:hover {
  transform: translateY(-6px);
}

.customer-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #4CAF50;
}

.star-rating {
  font-size: 1.2rem;
  color: #fbbc04;
  /* Google Yellow */
  letter-spacing: 2px;
}

/* Indicator dots */
.carousel-indicators [data-bs-target] {
  width: 25px;
  height: 5px;
  background-color: #4CAF50;
  margin: 0 6px;
  opacity: 0.4;
  transition: all 0.3s ease;
  margin-top: 15px;
}

.carousel-indicators .active {
  opacity: 1;
  background-color: #2e7d32;
}

.fullscreen-section {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* holographic effects  */
#holographic-card {
  /* display: flex; */
  /* position: relative; */
  overflow: hidden;
  border-radius: 15px;
  transition: all 0.5s ease;
}

#holographic-card h2 {
  color: #2aa22e;
  font-size: 2rem;
  position: relative;
  z-index: 2;
}

#holographic-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(0deg,
      transparent,
      transparent 30%,
      #c2f0c3);
  transform: rotate(-45deg);
  transition: all 0.5s ease;
  opacity: 0;
}

#holographic-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px #35b239;
  cursor: pointer;
}

#holographic-card:hover::before {
  opacity: 1;
  transform: rotate(-45deg) translateY(100%);
}

/* holograpic effects for why choose us section */

#holographic-card-2 {
  display: flex;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  transition: all 0.5s ease;
}

#holographic-card-2 h2 {
  color: #2aa22e;
  font-size: 2rem;
  position: relative;
  z-index: 2;
}

#holographic-card-2::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(0deg,
      transparent,
      transparent 30%,
      #c2f0c3);
  transform: rotate(-45deg);
  transition: all 0.5s ease;
  opacity: 0;
}

#holographic-card-2:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px #35b239;
  cursor: pointer;
}

#holographic-card-2:hover::before {
  opacity: 1;
  transform: rotate(-45deg) translateY(100%);
}


footer {
  position: relative;
  background-image: url(../images/leafy-bg2.jpg);
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  margin: 20px;
}

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

/* Uniform section spacing */
.section-space {
  padding: 100px 0;
  /* 80px top and bottom for desktop */
}

@media (max-width: 768px) {
  .section-space {
    padding: 50px 0;
    /* smaller spacing for mobile */
  }
}

/* hero video */
/* .hero-video-section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 40px;
  color: #fff;
  text-align: center;
  margin-left: 5%;
}

.hero-content h1 {
  font-family: Norwester;
  font-size: 3rem;
  font-weight: 700;
}

.hero-content p {
  font-family: Norwester;
  font-size: 1.2rem;
  margin-top: 15px;
  text-align: left;
} */
/* .hero-video-section::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 0;
} */
.hero-video-section {
  position: relative;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 20px;
  color: #fff;
}

.hero-content h1 {
  font-family: Norwester;
  font-size: 8rem;
  /* font-weight: 700; */
}

.hero-content p {
  font-family: Norwester;
  font-size: 1.3rem;
  margin-top: none;
  background-color: #B18F6C;
  padding: 10px;
}

.custom-line {
  background: #B18F6C;
  width: 100%;
  height: 10px;

}

/*Product CARD */
/* product section 2 */
.card__img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* CARD */
.product-container {
  display: grid;
  place-items: center;
  margin-inline: .2rem;
  padding-block: 5rem;
}

.card__container {
  display: grid;
  row-gap: 3rem;
}

.card__article {
  position: relative;
  overflow: hidden;
  /* transition: opacity .5 ease; */
}

.card__img {
  width: 328px;
  border-radius: 1.5rem;
  /* transition: transform .5s ease; */
  /* object-fit: contain; */
}

.card__container:has(.glass-texture:hover) .glass-texture:not(:hover) {
  filter: blur(1.5px);
}

.glass-texture {
  transition: all .5s ease;
}


.card__data {
  width: 200px;
  background-color: hsla(0, 0%, 80%, 0.893);
  padding: 1.5rem 2rem;
  box-shadow: 0 8px 24px hsla(0, 0%, 0%, .15);
  border-radius: 1rem;
  position: absolute;
  bottom: -9rem;
  left: 0;
  right: 0;
  margin-inline: auto;
  opacity: 0;
  transition: opacity 1s 1s;
}

.card__description {
  display: block;
  margin-bottom: .25rem;
}

.card__title {
  font-size: 34px;
  font-weight: 500;
  margin-bottom: .75rem;
}

.card__button {
  text-decoration: none;
  font-weight: 500;
}

.card__button:hover {
  text-decoration: underline;
}

/* Naming animations in hover */
.card_article:hover .card_data {
  animation: show-data 1s forwards;
  opacity: 1;
  transition: opacity .3s;
}

/* in mobile version, when clicking activates the info card */
.card_article:active .card_data {
  animation: show-data 1s forwards;
  opacity: 1;
  transition: opacity .3s;
}

.card__article:hover {
  animation: remove-overflow 2s forwards;
}

.card__article:not(:hover) {
  animation: show-overflow 2s forwards;
}

.card_article:not(:hover) .card_data {
  animation: remove-data 1s forwards;
}

/* Card animation */
@keyframes show-data {
  50% {
    transform: translateY(-10rem);
  }

  100% {
    transform: translateY(-7rem);
  }
}

@keyframes remove-overflow {
  to {
    overflow: initial;
  }
}

@keyframes remove-data {
  0% {
    transform: translateY(-7rem);
  }

  50% {
    transform: translateY(-10rem);
  }

  100% {
    transform: translateY(.5rem);
  }
}

@keyframes show-overflow {
  0% {
    overflow: initial;
    pointer-events: none;
  }

  50% {
    overflow: hidden;
  }
}

/* breakpoints */
/* For small devices */
@media screen and (max-width: 340px) {
  .product-container {
    margin-inline: 1rem;
  }

  .card__data {
    width: 250px;
    padding: 1rem;
  }
}

@media (max-width: 500px) {
  .card__title {
    font-size: 1.5rem;
  }
}

/* For medium devices */
@media screen and (min-width: 768px) {
  .card__container {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1.5rem;
  }
}

/* For large devices */
@media screen and (min-width: 1120px) {
  .product-container {
    height: 70vh;
  }

  .card__container {
    grid-template-columns: repeat(4, 1fr);
  }

  .card__img {
    width: 348px;
  }

  .card__data {
    width: 316px;
    padding-inline: 2.5rem;
  }
}

@media (max-width: 768px) {
  .footer-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* This centers all child columns */
  }
}

.green-txt {
  color: #2aa22e;
}

/* points box */
.points-box {
  padding: 1rem;
  border-radius: 1rem;
  transition: all .3s ease;
}

.points-box:hover {
  box-shadow: 1px 1px 10px hsla(0, 0%, 0%, 0.299);
  /* transform: scale(1.02); */
}

/* our journey */
.journey-box {
  height: 12.5rem;
}

.journey-box:hover {
  transform: translateY(-10px);
}

.hrzt-journey-1 {
  background-color: #c2f0c3 !important;
}

.hrzt-journey-2 {
  background-color: #92e394 !important;
}

.hrzt-journey-3 {
  background-color: #5bcd5f !important;
}

.hrzt-journey-4 {
  background-color: #35b239 !important;
  color: white;
}

.journey-box-2 {
  padding: 2rem !important;
}

/* green circle */
.green-circle {
  background-color: #2aa22e;
  display: inline-block;
  padding: .5rem;
  border-radius: 50%;
  color: white;
}

ul.custom-bullets li::marker {
  color: green;
  /* bullet color */
}


/* progress bar animation */
.bar-100 {
  animation: bar-100 4s forwards;
}

.bar-90 {
  animation: bar-90 4s forwards;
}

/* .bar-animation-3 {
  animation: progress-bar-loading 4s ease 1.3s infinite;
}

.bar-animation-4 {
  animation: progress-bar-loading 4s ease .3s infinite;
}

.bar-animation-5 {
  animation: progress-bar-loading 4s ease 1.2s infinite;
}

.bar-animation-6 {
  animation: progress-bar-loading 4s ease .7s infinite;
} */

@keyframes bar-100 {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

@keyframes bar-90 {
  0% {
    width: 0%;
  }

  100% {
    width: 90%
  }
}




/* our journey */
.dotted-line {
  border-bottom: 4px dashed black;
  width: 100px;
  top: 50%;
  right: -80px;
}

@media (max-width: 992px) {
  .dotted-line {
    display: none;
  }
}