/*
    Custom Colors
*/
:root {
  --color-green: #44AF69;
  --color-red: #F8333C;
  --color-orange: #FCAB10;
  --color-blue: #2B9EB3;
  --color-beige: #DBD5B5;
  --color-grey: #6E7E85;
  --color-black:#101419;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: "Google Sans Flex", sans-serif;
        position: relative;
    overflow-x: hidden;
}

/*
    Animated Background
*/
body::before {
    content: "";
    position: absolute;
    height: 100%;
    inset: 0;

    z-index: -1;
    pointer-events: none;

    opacity: 0.8;
    filter: blur(8px);

    transform: translateY(calc(var(--scroll, 0) * -0.15px));

    transition: transform .1s linear;

    background:
        linear-gradient(var(--color-green), var(--color-green)) 2% 5% / 340px 340px no-repeat,
        linear-gradient(var(--color-blue), var(--color-blue)) 96% 8% / 300px 300px no-repeat,

        /* Upper sides */
        linear-gradient(var(--color-red), var(--color-red)) 8% 22% / 220px 220px no-repeat,
        linear-gradient(var(--color-orange), var(--color-orange)) 88% 25% / 260px 260px no-repeat,
        linear-gradient(var(--color-grey), var(--color-grey)) 18% 15% / 100px 100px no-repeat,
        linear-gradient(var(--color-green), var(--color-green)) 78% 18% / 150px 150px no-repeat,

        /* Middle sides */
        linear-gradient(var(--color-orange), var(--color-orange)) 0% 42% / 380px 380px no-repeat,
        linear-gradient(var(--color-blue), var(--color-blue)) 100% 45% / 360px 360px no-repeat,
        linear-gradient(var(--color-green), var(--color-green)) 12% 55% / 180px 180px no-repeat,
        linear-gradient(var(--color-red), var(--color-red)) 86% 58% / 220px 220px no-repeat,

        /* Smaller floating details */
        linear-gradient(var(--color-blue), var(--color-blue)) 25% 38% / 90px 90px no-repeat,
        linear-gradient(var(--color-orange), var(--color-orange)) 70% 35% / 120px 120px no-repeat,
        linear-gradient(var(--color-red), var(--color-red)) 40% 52% / 80px 80px no-repeat,
        linear-gradient(var(--color-green), var(--color-green)) 60% 55% / 110px 110px no-repeat,

        /* Lower page */
        linear-gradient(var(--color-blue), var(--color-blue)) 5% 75% / 340px 340px no-repeat,
        linear-gradient(var(--color-green), var(--color-green)) 94% 78% / 320px 320px no-repeat,
        linear-gradient(var(--color-orange), var(--color-orange)) 18% 88% / 240px 240px no-repeat,
        linear-gradient(var(--color-red), var(--color-red)) 80% 90% / 280px 280px no-repeat,

        /* Bottom accents */
        linear-gradient(var(--color-green), var(--color-green)) 35% 96% / 160px 160px no-repeat,
        linear-gradient(var(--color-blue), var(--color-blue)) 65% 92% / 130px 130px no-repeat,
        linear-gradient(var(--color-grey), var(--color-grey)) 50% 85% / 90px 90px no-repeat,

        /* Edge details */
        linear-gradient(var(--color-red), var(--color-red)) 0% 90% / 120px 120px no-repeat,
        linear-gradient(var(--color-orange), var(--color-orange)) 100% 65% / 140px 140px no-repeat,
        linear-gradient(var(--color-beige), var(--color-beige)) 12% 65% / 100px 100px no-repeat,
        linear-gradient(var(--color-beige), var(--color-beige)) 88% 35% / 120px 120px no-repeat,

        linear-gradient(var(--color-green), var(--color-green)) 3% 92% / 350px 350px no-repeat,
        linear-gradient(var(--color-red), var(--color-red)) 97% 90% / 300px 300px no-repeat,

        linear-gradient(var(--color-orange), var(--color-orange)) 15% 98% / 220px 220px no-repeat,
        linear-gradient(var(--color-blue), var(--color-blue)) 85% 98% / 260px 260px no-repeat,

        linear-gradient(var(--color-green), var(--color-green)) 25% 86% / 160px 160px no-repeat,
        linear-gradient(var(--color-red), var(--color-red)) 75% 82% / 140px 140px no-repeat,

        linear-gradient(var(--color-orange), var(--color-orange)) 8% 78% / 120px 120px no-repeat,
        linear-gradient(var(--color-blue), var(--color-blue)) 92% 75% / 180px 180px no-repeat,

        linear-gradient(var(--color-grey), var(--color-grey)) 50% 88% / 100px 100px no-repeat,
        linear-gradient(var(--color-beige), var(--color-beige)) 60% 96% / 140px 140px no-repeat,
        linear-gradient(var(--color-green), var(--color-green)) 0% 88% / 350px 350px no-repeat,
linear-gradient(var(--color-green), var(--color-green)) 0% 88% / 350px 350px no-repeat,

linear-gradient(var(--color-orange), var(--color-orange)) 12% 95% / 220px 220px no-repeat,

linear-gradient(var(--color-blue), var(--color-blue)) 100% 90% / 400px 400px no-repeat,

linear-gradient(var(--color-red), var(--color-red)) 85% 98% / 280px 280px no-repeat,

linear-gradient(var(--color-green), var(--color-green)) 40% 92% / 140px 140px no-repeat,

linear-gradient(var(--color-orange), var(--color-orange)) 65% 85% / 180px 180px no-repeat,

linear-gradient(var(--color-blue), var(--color-blue)) 25% 98% / 120px 120px no-repeat,
linear-gradient(var(--color-orange), var(--color-orange)) 12% 95% / 220px 220px no-repeat,

linear-gradient(var(--color-blue), var(--color-blue)) 100% 90% / 400px 400px no-repeat,

linear-gradient(var(--color-red), var(--color-red)) 85% 98% / 280px 280px no-repeat,

linear-gradient(var(--color-green), var(--color-green)) 40% 92% / 140px 140px no-repeat,

linear-gradient(var(--color-orange), var(--color-orange)) 65% 85% / 180px 180px no-repeat,

linear-gradient(var(--color-blue), var(--color-blue)) 25% 98% / 120px 120px no-repeat;
    animation: backgroundFloat 35s ease-in-out infinite;
}

@keyframes backgroundFloat {

    0% {
        transform: translateY(calc(var(--scroll, 0) * -0.15px))
                   rotate(0deg)
                   scale(1);
    }

    25% {
        transform: translateY(calc(var(--scroll, 0) * -0.15px - 20px))
                   rotate(2deg)
                   scale(1.03);
    }

    50% {
        transform: translateY(calc(var(--scroll, 0) * -0.15px - 45px))
                   rotate(-3deg)
                   scale(1.06);
    }

    75% {
        transform: translateY(calc(var(--scroll, 0) * -0.15px - 20px))
                   rotate(2deg)
                   scale(1.02);
    }

    100% {
        transform: translateY(calc(var(--scroll, 0) * -0.15px))
                   rotate(0deg)
                   scale(1);
    }
}
/*
    hero carousel
*/
.hero {
  margin-top: 0;
  height: 70vh;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.hero-carousel {
  display: grid;
  width: 100%;
  height: 100%;
}

.hero-image {
  grid-column: 1;
  grid-row: 1;

  width: 100%;
  height: 100%;

  opacity: 0;
  z-index: 0;

  transition: opacity 1s ease-in-out;
}

.hero-image.active {
  opacity: 1;
  z-index: 1;
}

.hero-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  display: block;
}

/*
    Hero slider text!
*/
.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);
  padding: 1%;
  border-radius: 30px;
  z-index: 5;
  background: color-mix(in srgb, var(--color-beige) 80%, transparent);
}

.hero-content h1 {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 800;
  line-height: 0.9;
  margin: 0;

  text-shadow: 0 4px 15px rgba(0,0,0,0.6);
}

.hero-content h1 span {
  color:   var(--color-red);
}

.hero-content p {
  font-size: clamp(1rem, 2vw, 1.5rem);
  margin-top: 1rem;

  text-shadow: 0 3px 10px rgba(0,0,0,0.6);
}

.hero-button {
  display: block;
  margin: 1.5rem auto 0;
  padding: 0.8rem 2rem;
  width: fit-content;
  border-radius: 50px;
  background: white;
  color: black;

  text-decoration: none;
  font-weight: bold;
}

/*
    Navbar
*/

.navbar {
  width: 80vw;

  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  background: var(--color-green);

  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;

  padding: 1rem 2rem;

  z-index: 1000;

  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}


.navbar nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
}


.navbar a {
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 600;
  transition: 0.3s ease;
}


.navbar a:hover {
  color: var(--color-orange);
  transform: translateY(-2px);
}


/* =====================
   Footer
===================== */
.footer {
  width: 80vw;

  margin: auto auto 0;

  background: var(--color-blue);

  border-top-right-radius: 30px;
  border-top-left-radius: 30px;

  padding: 0.25rem;

  text-align: center;

  color: white;

  box-shadow: 0 -8px 20px rgba(0,0,0,0.1);

  position: relative;
}

/*
    info blocks
*/
.info-blocks {
  width: 80vw;
  margin: 5rem auto;

  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.info-card {
  width: 100%;

  display: grid;
  grid-template-columns: 1fr 1fr;

  background: var(--color-beige);

  border-radius: 30px;
  overflow: hidden;

  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

.block-left,
.block-right {
  position: relative;
  min-height: 400px;
}

.block-image {
  overflow: hidden;
}

.block-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  display: block;
}

.block-text {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 3rem;
}

.block-text h2 {
  font-size: 2.5rem;
  color: var(--color-green);
  margin-bottom: 1rem;
}

.block-text p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #333;
}

/* Fade image into the text (image on the left) */
.block-left.block-image::after {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    to right,
    transparent 65%,
    var(--color-beige) 100%
  );

  pointer-events: none;
}

/* Fade image into the text (image on the right) */
.block-right.block-image::after {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    to left,
    transparent 65%,
    var(--color-beige) 100%
  );

  pointer-events: none;
}