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

body {
  font-family: 'Inter', 'Segoe UI', 'Trebuchet MS', Arial, sans-serif;
}

.link {
  color: oklch(27.9% 0.041 260.031);
}

p {
  color: #333333;
}

.bg-theme {
  background: linear-gradient(180deg, oklch(82.8% 0.189 84.429), oklch(76.9% 0.188 70.08));
}

.bg-accent {
  background: linear-gradient(180deg, oklch(27.9% 0.041 260.031), oklch(20.8% 0.042 265.755));
}

.btn-theme {
  background: linear-gradient(180deg, oklch(82.8% 0.189 84.429), oklch(76.9% 0.188 70.08));
  color: oklch(27.9% 0.041 260.031);
  font-size: 16px;
  font-weight: 700;
  padding: 12px 20px;
}

.btn-theme:hover {
  background: linear-gradient(180deg, oklch(27.9% 0.041 260.031), oklch(20.8% 0.042 265.755));
  color: #ffffff;
}

.btn-accent {
  background: linear-gradient(180deg, oklch(27.9% 0.041 260.031), oklch(20.8% 0.042 265.755));
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  padding: 12px 20px;
}

.btn-accent:hover {
  background: linear-gradient(180deg, #ffffff, #d1d5db);
  color: oklch(27.9% 0.041 260.031);
}

/* topbar */

#topbar {
  background-color: oklch(27.9% 0.041 260.031);
  /* background-color: #1E5FA9; */
  /* background-color: #D4AF37; */
}

/* hero */

#hero {
  background-image: url('../images/hero.png');
  background-color: oklch(27.9% 0.041 260.031);
  background-position: top right;
  background-size: cover;
  padding: 80px 0;
}

@media (max-width: 768px) {
  #hero {
    background-image: none;
    background-color: #ffffff; /* white background */
  }
}
/* offer */

#offer {
  padding: 80px 0;
}

/* cta one */

#cta-one {
  background-image: url('../images/cta-one.jpg');
  padding: 80px 0;
}

#cta-one .count {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 120px;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.05);
  pointer-events: none;
  user-select: none;
}

/* process */

#process {
  padding: 80px 0;
}

#process .card {
  background: linear-gradient(180deg, oklch(82.8% 0.189 84.429), oklch(76.9% 0.188 70.08));
}

#process .card-icon {
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: oklch(27.9% 0.041 260.031);
  color: #ffffff;
  font-size: 40px;
}

hr {
  width: 20%;
  border-style: dashed;
}

/* benefit */

#benefit {
  background-image: url('../images/benefit.jpg');
  padding: 80px 0;
}

/* support */

#support {
  padding: 80px 0;
}

/* testimonial */

#testimonial {
  background-image: url('../images/testimonial.jpg');
  padding: 80px 0;
}

/* faq */

#faq {
  padding: 80px 0;
}

/* cta two */

#cta-two {
  padding: 80px 0;
}

/*  */

.py-10 {
  padding-top: 40px;
  padding-bottom: 240px;
}

/* footer */

#footer-hero {
  padding: 80px 0;
  background-image: url('../images/footer.jpg');
}

footer .card {}

footer .card-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  font-size: 32px;
  border-radius: 50%;
  background: linear-gradient(180deg, oklch(27.9% 0.041 260.031), oklch(20.8% 0.042 265.755));
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.social-media-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(180deg, oklch(82.8% 0.189 84.429), oklch(76.9% 0.188 70.08));
  color: oklch(27.9% 0.041 260.031);
  display: flex;
  justify-content: center;
  align-items: center;
}

.social-media-icon:hover {
  background: linear-gradient(180deg, #ffffff, #d1d5db);
}

iframe {
  width: 100%;
  height: 400px;
  border-radius: 8px;
}

/* contact */

#contact {
  padding: 80px 0;
}

/* about */

#about-hero {
  background-image: url('../images/hero.png');
  background-color: oklch(27.9% 0.041 260.031);
  background-position: top right;
  background-size: cover;
  padding: 120px 0;
}

@media (max-width: 768px) {
  #about-hero {
    background-image: none;
    background-color: #ffffff; /* white background */
  }
}

#about {
  padding: 80px 0;
}

/* about */

#offer img {
  width: 100%;
  height: 400px;
  border-radius: 8px;
}

#about img {
  width: 100%;
  height: 400px;
  border-radius: 8px;
}

#about-badge {
  padding: 80px 0;
}

/* about-value */

#about-value {
  padding: 80px 0;
}

#about-value img {
  width: 100%;
  height: 400px;
  border-radius: 8px;
}