:root {
  --primary-color: #f73b28;
  --secondary-color: #fdf3dc;
}

button {
  border: none;
  border-radius: 16px;
}

::-webkit-scrollbar {
  display: none;
}

@keyframes wiggle {
  0% {
    transform: rotate(352deg) translateX(0);
  }
  15% {
    transform: rotate(352deg) translateX(-4px);
  }
  30% {
    transform: rotate(352deg) translateX(4px);
  }
  45% {
    transform: rotate(352deg) translateX(-4px);
  }
  60% {
    transform: rotate(352deg) translateX(4px);
  }
  75% {
    transform: rotate(352deg) translateX(-2px);
  }
  100% {
    transform: rotate(352deg) translateX(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 20px 40px rgba(255, 215, 0, 0.5),
      0 10px 25px rgba(255, 215, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.4),
      inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 25px 50px rgba(255, 215, 0, 0.6),
      0 15px 30px rgba(255, 215, 0, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.5),
      inset 0 -2px 0 rgba(0, 0, 0, 0.3);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 20px 40px rgba(255, 215, 0, 0.5),
      0 10px 25px rgba(255, 215, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.4),
      inset 0 -2px 0 rgba(0, 0, 0, 0.2);
  }
}

.loading {
  .spinner-border {
    color: #004f4e !important;
  }
}

.offcanvas.custom-offcanvas {
  width: 545px;

  &.offcanvas-product-details {
    background-color: #fdf3dc;
    /* padding: 10px; */

    .offcanvas-header {
      padding: 10px;
      .top-noter {
        height: 9px;
        background-color: rgb(241, 245, 249);
        width: 110px;
        border-radius: 5px 5px 10px 10px;
        margin: auto;
      }
    }

    .offcanvas-body {
      padding: 0;
      .product-introduction {
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid #004f4e1a;
        padding: 0 25px;
        padding-bottom: 7px;
        padding-top: 15px;

        .product-title {
          h5 {
            margin-bottom: 5px;
            font-weight: 700;
            font-size: 20px;
            color: #004f4e;
          }

          p {
            font-size: 14px;
            color: #004f4eb3;
          }
        }

        p {
          margin-bottom: 0;
        }

        button {
          font-size: 12px;
        }
      }
      .content {
        padding: 10px 40px;
        margin-top: 50px;

        .product-img-container {
          margin: auto;
          width: 350px;
          height: 350px;

          img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
          }
        }

        .price {
          display: flex;
          justify-content: space-between;
          margin-top: 24px;

          p {
            font-weight: 700;
            color: #004f4e;
            font-size: 18px;
            margin-bottom: 0;
          }
        }

        .description {
          margin-top: 24px;
          h5 {
            font-weight: 700;
            color: #004f4e;
            font-size: 18px;
          }

          p,
          li {
            color: #004f4ecc;
            font-size: 14px;
            margin-bottom: 0;
          }

          .meal-block {
            .tile-list {
              display: flex;
              gap: 18px;
              flex-wrap: wrap;
              margin: 12px 0;
              justify-content: flex-start; /* or center, if you prefer */
            }

            .tile-list p {
              background: #ddcdaa;
              border-radius: 16px;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
              padding: 18px 24px;
              font-weight: 600;
              color: #004f4e;
              font-size: 15px;
              min-width: 120px;
              text-align: center;
              display: inline-block;
              transition: transform 0.2s;
            }

            .tile-list p:nth-child(1) {
              transform: rotate(-4deg);
            }
            .tile-list p:nth-child(2) {
              transform: rotate(2deg);
            }
            .tile-list p:nth-child(3) {
              transform: rotate(-2deg);
            }
            .tile-list p:nth-child(4) {
              transform: rotate(3deg);
            }
          }
        }
      }
    }

    .offcanvas-footer {
      padding: 16px 24px;
      margin: auto;
      border-top: 1px solid #004f4e1a;
      width: 100%;

      button {
        width: 100%;
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),
          0 1px 2px -1px rgb(0 0 0 / 0.1);
        background-color: #f73b28;
        padding: 16px;
        font-size: 16px;
        color: #fff;
        border-radius: 4px;
      }
    }
  }
}

.react-multi-carousel-list {
  overflow-x: visible;
}

/* Shimmer background */
.shimmer-background {
  position: absolute;
  background: #21252966;
  /* background: #f7eacc94; */
  z-index: 3;
  width: 100%;
  height: 100%;
  /* background: linear-gradient(
    to right,
    #f0f0f085 0%,
    #f0f0f09e 20%,
    #f0f0f085 40%,
    #f0f0f09e 100%
  ); */
  /* background: linear-gradient(
    to right,
    #f0f0f0 0%,
    #e0e0e0 20%,
    #f0f0f0 40%,
    #f0f0f0 100%
  ); */
  background-size: 200% 100%;
  animation: shimmer 2s infinite linear;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Lady cooking animation placeholder */
.cooking-lady {
  width: 350px;
  height: 350px;
  background-image: url("../imgs/cooking-lady.png");
  background-size: cover;
  background-position: center;
  animation: float 2s ease-in-out infinite;
  z-index: 2;
}

/* Shimmer animation */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Floating effect for the image */
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Floating logo */
.floating-logo {
  width: 400px;
  height: 400px;
  background-image: url("../imgs/mangrove-brand.svg"); /* Replace with your logo path */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: float 2.5s ease-in-out infinite;
}

/* Shimmer animation */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Floating animation */
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.header-container {
  background-color: var(--primary-color);
  /* padding: 66px 66px 66px 112px; */
  padding: 0px 50px 0px 80px;
  position: relative;
  z-index: 2;

  .navbar {
    .navbar-brand {
      cursor: pointer;
      padding: 25px 0;
      img {
        width: 250px;
        height: fit-content;
      }
    }

    .menu-items {
      ul {
        margin-left: 90px;
        gap: 35px;
        li a {
          color: var(--secondary-color);
          font-size: 25px;
          line-height: 31px;
          text-transform: uppercase;
        }
      }
    }

    .social-media-icons {
      ul {
        li a {
          i {
            color: #fff;
            font-size: 66px;
          }
        }
      }
    }
  }
}

.embla {
  overflow: hidden;
}
.embla__container {
  display: flex;
  gap: 25px;
}
.embla__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.embla__controllers {
  justify-content: center;
  position: relative;
  z-index: 4;
  height: 100px;
  top: 44px;
  gap: 5px;
  display: flex;

  button.scroll-controller {
    height: 20px;
    width: 18px;
    border-radius: 50%;
    background: #004f4e;
    border: 4px solid #a7b804;

    &.active {
      background: #a7b804;
    }
  }
}

.landing-page {
  .hero-section {
    background-image: url("../imgs/hero-img.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 800px;
    width: 100%;
    overflow-x: clip;

    .hero-section-content {
      position: relative;
      height: 100%;
      .hero-section-img {
        position: absolute;

        &._left-leaves {
          left: -600px;
          top: -300px;
          width: 1100px;

          /* width: calc(100% - 600px);
          left: calc(-33%);
          top: calc(-35%); */
        }

        &._tomatoes {
          left: -370px;
          top: 300px;
          width: 820px;
        }

        &._full-color-flavor {
          left: 170px;
          width: 850px;
          top: 90px;
          z-index: 1;
        }
        &._beans {
          left: 865px;
          top: 118px;
          width: 180px;
        }
        &._leaves-right {
          right: -400px;
          top: -30px;
          width: 840px;
        }
        &._corn {
          right: -315px;
          top: 150px;
          width: 560px;
        }
      }

      button {
        display: flex;
        padding: 10px 15px;
        justify-content: space-between;
        z-index: 1;
        border-radius: 25px;
        position: relative;
        width: 315px;
        height: 48px;
        align-items: center;
        background-color: var(--secondary-color);
        color: var(--primary-color);
        position: absolute;
        bottom: 80px;
        left: 27.5%;

        p {
          margin-bottom: 0;
          text-transform: uppercase;
          font-size: 20px;
          font-weight: 300;
        }

        i {
          font-size: 20px;
        }
      }
    }
  }

  .products-range {
    background-color: var(--secondary-color);
    height: fit-content;

    h5 {
      padding-top: 120px;
      color: #004f4e;
      font-size: 65px;
      font-weight: 700;
      line-height: 83px;
      margin-bottom: 50px;
      text-align: center;
    }

    .products {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      padding: 0 90px;
      margin-bottom: 60px;

      img {
        width: 15%;
      }
    }

    .discover-more-btn {
      display: flex;
      justify-content: center;
      button {
        display: flex;
        padding: 10px 25px;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin-bottom: 100px;
        border-radius: 25px;
        width: 300px;
        background-color: var(--primary-color);
        color: var(--secondary-color);

        p {
          margin-bottom: 0;
          text-transform: uppercase;
          font-size: 20px;
          font-weight: 300;
        }

        i {
          font-size: 20px;
        }
      }
    }
  }

  .about-mangrove {
    background-color: #f7eacc;
    position: relative;
    overflow-x: clip;
    text-align: center;

    h5 {
      text-align: center;
      font-weight: 700;
      font-size: 65px;
      padding-top: 90px;
      color: var(--primary-color);
      margin-bottom: 35px;
    }

    h6 {
      font-size: 25px;
      text-align: center;
      color: #004f4e;
      width: 1066px;
      margin: auto;
      line-height: 35px;
      margin-bottom: 36px;
      font-weight: 300;
    }

    img {
      padding: 40px 8%;
      position: relative;
      z-index: 1;
      width: 1300px;
    }

    .side-img {
      position: absolute;

      &.peas {
        top: -400px;
        width: 1200px;
        right: -530px;
      }

      &.pepper-nut {
        bottom: -195px;
        width: 765px;
        left: -405px;
      }
    }

    .about-mangrove-block-2 {
      background-color: #ddcdaa;
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 250px;
    }
  }

  .our-recipes {
    background-color: #004f4e;

    h5 {
      padding-top: 76px;
      color: #a7b804;
      font-size: 65px;
      font-weight: 700;
      line-height: 83px;
      text-align: center;
    }

    .our-recipes-content {
      position: relative;
      align-items: center;
      justify-content: space-evenly;
      padding: 0;
      /* padding-bottom: 100px; */
      padding-top: 50px;
      gap: 85px;
      overflow: scroll;

      .react-multi-carousel-list {
        margin-bottom: 60px;

        ul {
          gap: 35px;

          li {
            width: 100% !important;
          }
        }
      }

      .custom-dot-list-style {
        /* bottom: 35px; */

        button {
          width: 18px;
          height: 18px;
          border: 3px solid #a7b804;
          background-color: transparent;
        }

        .react-multi-carousel-dot--active {
          button {
            background-color: #a7b804;
          }
        }
      }

      .our-recipes-content-carousel {
        margin-left: 20px;
        justify-content: center;
        ul.react-multi-carousel-track {
          gap: 15px;
        }

        li {
          width: 100% !important;
          .our-recipes-content-item {
            background-color: #ffea55;
            overflow: hidden;

            h6 {
              color: #004772;
            }
          }

          &:nth-child(1) {
            .our-recipes-content-item {
              background-color: #ffea55;

              h6 {
                color: #004772;
              }
            }
          }

          &:nth-child(2) {
            .our-recipes-content-item {
              background-color: #fdf3dc;

              h6 {
                color: #a7b804;
              }
            }
          }

          &:nth-child(3) {
            .our-recipes-content-item {
              background-color: #a7b804;

              h6 {
                color: #fdf3dc;
              }
            }
          }
        }
      }

      .react-multi-carousel-item {
        &:nth-child(1) {
          .our-recipes-content-item {
            background-color: #ffea55;
            h6 {
              color: #004772 !important;
            }
          }
        }

        &:nth-child(2) {
          .our-recipes-content-item {
            background-color: #fdf3dc;
            h6 {
              color: #a7b804 !important;
            }
          }
        }

        &:nth-child(3) {
          .our-recipes-content-item {
            background-color: #a7b804;
            h6 {
              color: #fdf3dc !important;
            }
          }
        }
        .our-recipes-content-item {
          height: 300px;
          display: flex;
          position: relative;
          border-radius: 31px;
          padding: 35px;
          max-width: 690px;
          background: #fcea56;
          overflow: hidden;
          align-items: center;
          min-width: 600px;
          width: 100%;

          h6 {
            color: #004772 !important;
          }

          .our-recipes-content-item-img {
            width: 330px;
            height: 300px;
            padding: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: -27px;

            img {
              object-fit: contain;
              max-width: 100%;
              max-height: 100%;
            }
          }

          .our-recipes-content-item-text {
            z-index: 2;
            width: 300px;
            position: relative;
            left: 250px;

            h6 {
              color: #fff;
              font-size: 45px;
              font-weight: 700;
              margin-bottom: 26px;
              height: fit-content;
              max-height: 100px;
              display: -webkit-box;
              -webkit-line-clamp: 2; /* Limit to 2 lines */
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            p {
              line-height: 24px;
              margin-bottom: 20px;
              color: #004f4e;
              max-height: 100px;
              display: -webkit-box;
              -webkit-line-clamp: 2; /* Limit to 2 lines */
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            button {
              display: flex;
              height: 30px;
              align-items: center;
              justify-content: space-between;
              width: 200px;
              padding: 7px 14px;
              background-color: transparent;
              border: 1px solid #004f4e;

              p {
                margin-bottom: 0;
                text-transform: uppercase;
              }

              i {
                color: #004f4e;
                font-size: 18px;
              }
            }
          }
        }
      }
    }

    .more-recipes-btn-container {
      display: flex;
      justify-content: center;
      padding-bottom: 100px;
      margin-top: 40px;

      button {
        display: flex;
        padding: 10px 25px;
        justify-content: space-between;
        background-color: #a7b804;
        color: #004f4e;
        border-radius: 25px;
        width: 300px;
        align-items: center;

        p {
          margin-bottom: 0;
          text-transform: uppercase;
          font-size: 20px;
          font-weight: 300;
        }

        i {
          font-size: 20px;
        }
      }
    }
  }
}

.products {
  .products-list-page {
    padding: 100px;
    height: 100dvh;
    background-color: var(--secondary-color);

    .products-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
      /* grid-template-columns: 1fr 1fr 1fr; */
      gap: 100px 20px;

      .product-wrapper {
        text-align: center;
        cursor: pointer;
        position: relative;
        height: 355px;
        max-width: 500px;

        &:hover {
          .price {
            animation: wiggle 0.5s;
          }
        }

        .product-img-wrapper {
          width: 300px;
          height: 250px;
          margin: auto;

          img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

            &:hover {
              transform: scale(1.08);
            }
          }
        }

        h6 {
          font-size: 30px;
          font-weight: 700;
          margin-bottom: 10px;
          margin-top: 10px;
        }

        p {
          font-size: 14px;
          font-weight: 400;
          text-align: left;
          padding: 0 70px;
          margin-bottom: 0;

          &.short-description {
            display: -webkit-box;
            -webkit-line-clamp: 2; /* number of lines */
            -webkit-box-orient: vertical;
            overflow: hidden;
          }

          &.price {
            padding: 10px 15px;
            font-size: 15px;
            position: absolute;
            top: -10px;
            right: 65px;
            background-color: #004f4e;
            border-radius: 10px;
            color: #fff;
            font-weight: 400;
            transform: rotate(352deg);
          }
          &.name {
            font-weight: 700;
            font-size: 25px;
            color: #004f4e;
          }
          &.sizes {
            font-size: 15px;
          }
        }
      }
    }
  }
}

.store-locator {
  .store-locator-container {
    background-color: #f7eacc;

    .store-locator-header {
      margin: auto;
      height: 300px;
      background-color: var(--secondary-color);
      padding: 22px;

      h1 {
        text-align: center;
        font-size: 55px;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 20px;
      }

      .store-locator-header_search-container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
        margin-top: 20px;

        .store-locator-header_search-container_form-group {
          border: 1px solid var(--primary-color);
          display: flex;
          align-items: center;
          gap: 10px;
          height: 60px;
          width: 500px;
          border-radius: 25px;
          overflow: hidden;
          position: relative;

          input {
            width: 100%;
            height: inherit;
            background-color: transparent;
            border: none;
            padding: 0 20px;
            &:focus {
              outline: none;
            }
          }

          i {
            position: relative;
            right: 20px;
            cursor: pointer;
          }
        }

        button {
          height: 60px;
          width: 100px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 999px;
          color: #fff;
          background-color: var(--primary-color);

          &:disabled {
            opacity: 0.2;
          }

          .loading .spinner-border {
            width: 20px;
            height: 20px;
            color: #fff !important;
          }
        }
      }
    }

    .store-locator-content {
      .store-locator-content_stores {
        padding: 30px;
        height: fit-content;
        overflow: scroll;

        .header-section {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 24px;
          background-color: var(--secondary-color);
          padding: 0 10px;
          height: 50px;

          p {
            margin-bottom: 0;
          }

          select {
            &:focus {
              outline: none;
            }
          }
        }

        .no-results {
          background-color: var(--primary-gray);
          min-height: 450px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 32px;
          text-align: center;

          i {
            font-size: 30px;
            margin-bottom: 10px;
          }

          h5 {
            font-size: 26px;
            font-weight: 700;
            margin-bottom: 10px;
          }
        }

        .store-list {
          height: 450px;
          overflow: scroll;

          .item {
            background-color: var(--secondary-color);
            margin-bottom: 24px;
            padding: 24px;
            cursor: pointer;

            h5 {
              font-size: 20px;
              font-weight: 700;
              margin-bottom: 10px;
              text-transform: capitalize;
              word-wrap: break-word;
            }

            h6 {
              color: var(--paragraph-color);
              font-size: 16px;
              font-weight: 400;
              margin-bottom: 18px;
            }

            .distance {
              display: flex;
              justify-content: space-between;
              align-items: center;

              p {
                margin-bottom: 0;
                font-size: 16px;
                line-height: 16px;
                font-weight: 400;
                color: #004f4e;
              }

              button {
                height: 40px;
                font-size: 16px;
                font-weight: 400;
                display: flex;
                align-items: center;
                width: 128px;
                justify-content: space-between;
                padding: 0 14px;
                border-radius: 999px;
                background: #004f4e;
                color: #fff;

                p {
                  color: #fff;
                }
              }
            }
          }
        }

        .pagination-container {
          margin-top: 10px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;

          ul {
            padding-left: 0;
            list-style: none;
            display: flex;
            gap: 10px;
            margin-bottom: 0;

            li {
              color: #fff;
              background-color: #004f4e9e;
              border-radius: 35%;
              width: 35px;
              height: 35px;
              display: flex;
              align-items: center;
              justify-content: center;

              a {
                text-decoration: none;
                color: #fff;
              }

              &.selected {
                background-color: #004f4e;
              }
            }
          }
        }
      }
    }
  }
}

.contact-us {
  .contact-us-container {
    background-color: #f7eacc;
    height: 100%;
    padding: 100px;
    .heading {
      text-align: center;

      h4 {
        font-size: 40px;
        font-weight: 700;
        margin-bottom: 3px;
      }

      p {
        margin-bottom: 0;
        width: 55%;
        margin: auto;
        margin-bottom: 20px;
        color: #292929;
      }
    }
    .content {
      background-color: #fff;
      padding: 30px 50px;
      border-radius: 20px;
      margin: 0 150px;

      h4 {
        font-weight: 700;
        font-size: 28px;
        margin-bottom: 10px;
      }

      p {
        font-size: 16px;
        font-weight: 400;
        margin-bottom: 0;
      }

      .social-icons {
        display: flex;
        gap: 30px;
        margin-top: 20px;

        a {
          font-size: 24px;
          color: #292929;
          margin-bottom: 0;
          cursor: pointer;
        }
      }

      .thank-you-message {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        animation: slideUpFadeIn 0.7s cubic-bezier(0.4, 0, 0.2, 1);

        i {
          font-size: 50px;
        }

        h3 {
          font-size: 25px;
          font-weight: 700;
        }

        p {
          font-size: 16px;
          font-weight: 400;
          margin-bottom: 0;
          min-width: 100%;
        }

        .social-icons {
          a i {
            font-size: 24px;
            color: #004772;
          }
        }
      }

      .form {
        div {
          margin-bottom: 15px;
        }
        .two-inputs {
          display: flex;
          gap: 20px;

          div {
            width: 100%;
          }
        }

        label {
          font-size: 14px;
          margin-bottom: 3px;
          font-weight: 400;
        }

        button {
          width: 200px;
          height: 40px;
          background-color: #004772;
          color: #fff;
          border-radius: 8px;
          border: none;
          font-size: 16px;

          &:disabled {
            opacity: 0.5;
          }

          .loading {
            margin: 0;

            .spinner-border {
              color: #fff !important;
              width: 20px;
              height: 20px;
              margin: 0;
              margin-top: 3px;
            }
          }
        }
      }
    }
  }
}

.privacy-policy-container {
  background-color: #fdf3dc;
  height: 100%;
  padding: 50px 100px;

  ul.nav {
    border-bottom: 1px solid #ddcdaa;
    gap: 30px;
    cursor: pointer;

    li a {
      font-size: 20px;
      color: #ddcdaa;

      &.active {
        color: #f23c28;
      }
    }
  }

  .content {
    margin-top: 35px;

    h3 {
      font-weight: 700;
      font-size: 33px;
      margin-bottom: 15px;
      color: #f23c28;
    }

    h5 {
      font-size: 16px;
      font-weight: 400;
    }

    .point {
      margin-top: 25px;
    }

    ul {
      list-style-type: none;
      li {
        margin-bottom: 10px;
      }
    }

    .point-block {
      background-color: #ddcdaa;
      padding: 24px;
      margin-top: 44px;
      margin-bottom: 96px;
      border-radius: 8px;
      color: #fdf3dc;

      .holder {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #fdf3dc;

        a {
          color: #fdf3dc;
          margin-bottom: 2px;
        }
      }
    }
  }
}

.recipes {
  .hero-block {
    background-color: #f7eacc;
    padding: 150px 200px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 0;
    overflow: hidden;

    img {
      position: absolute;
      right: 200px;
      width: 485px;
      bottom: -41px;
    }

    h3 {
      font-weight: 800;
      font-size: 75px;
      width: 45%;
      color: #004f4e;
    }

    h6 {
      font-size: 20px;
      font-weight: 400;
      width: 30%;
      line-height: 28px;
      margin-bottom: 190px;
      color: #004f4e;
    }

    button {
      width: 315px;
      height: 48px;
      background: red;
      color: #fff;
      margin-bottom: 140px;
      display: flex;
      padding: 10px 15px;
      justify-content: space-between;
      border-radius: 25px;

      p {
        margin-bottom: 0;
        text-transform: uppercase;
        font-size: 20px;
        font-weight: 300;
      }

      i {
        font-size: 20px;
      }
    }
  }
  .recipes-container {
    background-color: #fdf3dc;
    height: 100%;
    padding: 50px 100px;
    padding-top: 70px;

    .page-title {
      text-align: center;
      font-size: 58px;
      font-weight: bold;
      margin-bottom: 25px;
    }

    ul.recipe-categories {
      display: flex;
      gap: 10px;
      list-style: none;
      justify-content: center;
      flex-wrap: wrap;

      li {
        background-color: #fff;
        padding: 5px 15px;
        border-radius: 999px;
        min-width: 90px;
        text-align: center;
        cursor: pointer;

        &.active {
          color: #004f4e;
          font-weight: bolder;
        }
      }
    }

    .recipes-flex-2 {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      margin-top: 35px;
      justify-content: center;

      .recipe-box {
        flex-basis: 325px;
        background-color: #f7eacc;

        .recipe-box-img {
          height: 250px;
          background-color: #ddcdaa;
          border-radius: 10px;
          border-bottom-right-radius: 15px;
          border-bottom-left-radius: 15px;
          display: flex;
          justify-content: center;

          &.fish {
            img {
              width: fit-content;
              padding: 25px;
              margin-top: 8px;
            }
          }

          img {
            height: 100%;
            object-fit: cover;
            padding: 8px;
          }
        }

        .recipe-box-content {
          padding: 20px 30px;

          ul {
            list-style: none;
            padding: 0;
            margin-top: 20px;

            li {
              color: #004f4e;
              margin-bottom: 3px;
            }
          }

          h3 {
            font-size: 23px;
            font-weight: 700;
            color: #004f4e;
          }

          p {
            color: #004f4e;
          }

          button {
            height: 40px;
            width: 100%;
            border: 1px solid #004f4e;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 15px;
            border-radius: 25px;
            margin: auto;
            margin-top: 20px;
            background: transparent;

            p {
              margin-bottom: 0;
              text-transform: uppercase;
              font-size: 15px;
              font-weight: 300;
              color: #004f4e;
            }

            i {
              font-size: 16px;
              color: #004f4e;
            }
          }
        }
      }
    }

    .recipes-flex {
      display: flex;
      margin-top: 200px;
      flex-wrap: wrap;
      justify-content: space-evenly;
      row-gap: 200px;

      .recipe-box {
        flex-basis: 400px;
        position: relative;
        width: 400px;
        min-height: 400px;
        background-color: #ddcdaa;
        border-radius: 30px;

        .recipe-box-img {
          position: absolute;
          top: -200px;

          &.fish {
            width: 400px;
            padding: 55px;
          }
        }

        h3 {
          margin-top: 170px;
          text-align: center;
          font-weight: 700;
          color: #004f4e;
          margin-bottom: 20px;
        }

        ul {
          list-style: none;
          li {
            font-size: 18px;
            margin-bottom: 4px;
            color: #004f4e;
          }
        }

        button {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 200px;
          height: 40px;
          margin: auto;
          gap: 5px;
          background-color: transparent;
          border: 1px solid #004f4e;
          margin-bottom: 20px;
          color: #004f4e;

          i {
            font-size: 14px;
          }
        }
      }
    }
  }
}

.blog-container {
  .blog {
    button {
      background: linear-gradient(to right, #a7b804, #004f4e);
      color: white;
      padding: 1rem 2rem; /* py-4 = 1rem, px-8 = 2rem */
      border-radius: 1rem; /* rounded-2xl = 1rem */
      font-weight: 400; /* font-medium */
      transition: all 0.2s ease-in-out;
      letter-spacing: 1px;
    }

    button:hover {
      box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); /* shadow-lg approximation */
    }

    .blog-header {
      background: linear-gradient(to bottom right, #fdf3dc, white, #ddcdaa);
      padding-top: 4rem; /* py-16 = 4rem top */
      padding-bottom: 4rem;
      margin: auto;

      .fresh-section {
        background-color: #004f4e1a;
        color: #004f4e;
        border-radius: 999px;
        padding: 10px 20px;
        width: fit-content;
        margin: auto;
        margin-bottom: 24px;
        display: flex;
        gap: 14px;
      }

      h3 {
        text-align: center;
        font-weight: 700;
        font-size: 60px;
        padding: 0 30%;
        color: #004f4e;
        margin-bottom: 24px;

        span {
          display: block;
          background: linear-gradient(to right, #a7b804, #f73b28);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }
      }

      p {
        color: #4b5563;
        font-size: 20px;
        text-align: center;
        width: 40%;
        margin: auto;
        font-weight: 300;
        margin-bottom: 30px;
      }

      .search-flex {
        margin: auto;
        display: flex;
        gap: 20px;
        align-items: center;
        justify-content: center;

        input {
          width: 350px;
          height: 55px;

          &:placeholder {
            color: #4b5563;
          }

          &:focus,
          &:active {
            outline: none;
            box-shadow: none;
            border: 1px solid #f23c28;
          }
        }
      }
    }

    .blog-content {
      padding: 4rem 0;
      padding-bottom: 0;

      .featured-story {
        padding: 0px 100px;

        .header {
          display: flex;
          align-items: center;
          gap: 10px;

          .line {
            width: 100%;
            height: 1px;
            background: linear-gradient(
              to right,
              transparent,
              #a7b804,
              transparent
            );
            flex: 1;
          }

          h4 {
            color: #004f4e;
            font-size: 30px;
            font-weight: 700;
            margin-bottom: 0;
          }
        }

        .blog-card {
          background: linear-gradient(to bottom right, #fdf3dc, white);
          border-radius: 1.5rem;
          box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
            0 10px 10px -5px rgba(0, 0, 0, 0.04);
          overflow: hidden;
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          margin: 30px 200px;
          min-height: 550px;
          margin-bottom: 64px;

          .img-wrapper {
            height: 100%;

            img {
              max-width: 100%;
              max-height: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .content {
            padding: 3rem;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .category {
              margin-bottom: 16px;
              background-color: #004f4e;
              color: #fff;
              width: fit-content;
              padding: 4px 12px;
              border-radius: 999px;
              font-size: 14px;
              font-weight: 400;
              line-height: 20px;
            }

            h3 {
              font-size: 30px;
              font-weight: 700;
              color: #004f4e;
              margin-bottom: 16px;
            }

            p {
              font-size: 18px;
              line-height: 1.625;
              color: #4b5563;
              padding-right: 100px;
              display: -webkit-box;
              -webkit-line-clamp: 4; /* Limit to 2 lines */
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              margin-bottom: 24px;
            }

            .creation-details {
              display: flex;
              gap: 24px;
              flex-wrap: wrap;
              margin-bottom: 24px;

              div {
                display: flex;
                gap: 8px;
                color: #6b7280;
                font-size: 14px;
              }
            }
          }

          button {
            width: fit-content;
            display: flex;
            gap: 10px;
            align-items: center;
          }
        }
      }

      .blog-posts {
        background-color: #f9fafb;

        .filters-container {
          border: 1px solid #e5e7eb;
          padding: 32px 0px;
          .filters {
            display: flex;
            padding: 0 100px;
            gap: 8px;
            align-items: center;

            i {
              font-size: 18px;
              margin-right: 20px;
            }

            p {
              margin-bottom: 0;
              font-size: 14px;
              color: #4b5563;
              font-weight: 400;
              line-height: 20px;
              cursor: pointer;
              border: 1px solid #e5e7eb;
              padding: 8px 16px;
              border-radius: 999px;
              background-color: #fff;

              &.active {
                background-color: #004f4e;
                color: #fff;
                border: 1px solid #004f4e;
              }
            }
          }
        }

        .posts {
          padding: 50px 150px;
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 20px;
          &.empty {
            display: flex;
            justify-content: center;
            text-align: center;
            padding: 100px 0;
          }

          .empty-state {
            padding: 20px;

            h3 {
              font-weight: 800;
              font-size: 24px;
              color: #004f4e;
            }

            p {
              font-size: 16px;
            }
          }

          .blog-card {
            /* flex-basis: 450px; */
            background-color: white;
            border-radius: 1rem; /* rounded-2xl */
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
            border: 1px solid #f3f4f6; /* gray-100 */
            overflow: hidden;
            transition: all 0.3s ease;
            cursor: pointer;

            &:hover {
              box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-xl */
              border-color: rgba(
                167,
                184,
                4,
                0.3
              ); /* #a7b804 with 30% opacity */

              .content {
                .title {
                  color: #a7b804;
                }
              }
            }

            .img-wrapper {
              min-height: 180px;
              max-height: 230px;
              width: 100%;
              overflow: hidden;

              img {
                max-width: 100%;
                max-height: 100%;
                width: 100%;
                object-fit: cover;
              }
            }

            .content {
              padding: 24px;

              .title {
                font-size: 18px;
                font-weight: 700;
                color: #004f4e;
              }

              p {
                font-size: 14px;
                color: #4b5563;
                margin-bottom: 16px;
              }

              .creator-details {
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                row-gap: 8px;
                margin-bottom: 16px;

                p {
                  font-size: 12px;
                  color: #6b7280;
                  margin-bottom: 0;
                }

                div {
                  display: flex;
                  gap: 12px;
                  flex-wrap: wrap;

                  i {
                    margin-right: 6px;
                  }
                }
              }

              button {
                background: none;
                color: #a7b804;
                padding: 0;
                font-size: 14px;

                &:hover {
                  background: none;
                  box-shadow: none;
                }
              }
            }
          }
        }
      }
    }
  }
}

.blog-details-container {
  .blog-details {
    .blog-header {
      height: 60vh;
      overflow: hidden;
      position: relative;

      img {
        height: 100%;
        width: 100%;
        object-fit: cover;
      }

      .shadow {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.8),
          rgba(0, 0, 0, 0.4),
          transparent
        );
      }

      .details {
        position: absolute;
        top: 0;
        padding: 20px 100px;

        .badges {
          display: flex;
          gap: 10px;
          flex-wrap: wrap;

          p {
            background-color: #004f4e;
            color: #fff;
            padding: 8px 16px;
            border-radius: 999px;
            font-size: 16px;
            font-weight: 700;
            line-height: 20px;

            &.featured {
              background-color: #f73b28;
            }
          }
        }

        h3 {
          font-size: 60px;
          color: #fff;
          font-weight: 700;
          width: 50%;
          margin-bottom: 16px;
          line-height: 1.1;
        }

        h6 {
          color: #e5e7eb;
          font-size: 20px;
          font-weight: 400;
          padding-bottom: 32px;
          width: 50%;
          line-height: 1.675;
        }
      }

      .blog-title {
      }
    }
    .blog-body {
      position: relative;
      margin: auto;
      display: flex;
      flex-direction: column;

      .author-column {
        background-color: white;
        border-radius: 1rem; /* rounded-2xl */
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
          0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-xl */
        padding: 2rem; /* p-8 */
        margin-bottom: 2rem; /* mb-8 */
        border: 1px solid #f3f4f6; /* border border-gray-100 */
        position: absolute;
        display: flex;
        top: -50px;
        margin: auto;
        align-items: center;
        position: relative;
        justify-content: space-between;
        width: 40%;

        p {
          margin-bottom: 0;
        }

        .user-column {
          display: flex;
          align-items: center;

          .icon-wrapper {
            display: flex;
            align-items: center;
            gap: 10px;
            /* background-color: #004772;
             */
            background-image: linear-gradient(
              to bottom right,
              #004f4e,
              #a7b804
            );
            width: 32px;
            height: 32px;
            border-radius: 999px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            margin-right: 10px;

            i {
              font-size: 20px;
            }
          }

          h5 {
            font-size: 16px;
            font-weight: 700;
            color: #004f4e;
            margin: 0;
          }

          p {
            color: #6b7280;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            margin-bottom: 0;
          }
        }

        .column {
          display: flex;
          align-items: center;

          i {
            color: #a7b804;
            font-size: 18px;
            margin-right: 10px;
          }

          p {
            color: #6b7280;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
          }
        }

        .share {
          display: flex;
          align-items: center;
          gap: 10px;
          background-color: #f9fafb;
          padding: 8px 16px;
          border-radius: 999px;
          cursor: pointer;

          i {
            color: #a7b804;
          }
        }
      }

      .blog-post {
        background-color: white; /* bg-white */
        border-radius: 1rem; /* rounded-2xl (32px or 2rem) */
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
          0 8px 10px -6px rgba(0, 0, 0, 0.1); /* shadow-xl */
        padding: 2rem; /* p-8 */
        margin-bottom: 2rem; /* mb-8 */
        border: 1px solid #f3f4f6;
        width: 60%;
        margin: auto;
        margin-bottom: 40px;
      }

      .back-btn {
        background-image: linear-gradient(to bottom right, #004f4e, #a7b804);
        color: #fff;
        padding: 10px 20px;
        max-width: 200px;
        margin: auto;
        margin-bottom: 40px;
        border-radius: 999px;
        border: none;
        cursor: pointer;
        font-size: 16px;

        i {
          margin-right: 10px;
        }
      }
    }
  }
}

.recipe-details-modal {
  .modal-header {
    background: url("../imgs/table-food-serving.jpg");
    height: 300px;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;

    .bttn-close {
      background: transparent !important;
      top: 0;
      position: absolute;
      right: -2px;
      i {
        font-size: 25px;
        color: white;
      }
    }
  }

  .modal-body {
    padding: 35px 50px;

    h3 {
      font-size: 40px;
      font-size: 50px;
      font-weight: 700;
      margin-bottom: 10px;
    }

    .main-ingredient {
      display: flex;
      gap: 10px;
      color: #004f4e;

      i {
        color: #fcea56;
      }

      h2 {
        font-size: 18px;
        font-weight: 500;
        color: #004f4e;
      }
    }

    .details {
      display: flex;
      gap: 10px;
      margin-top: 15px;

      div {
        display: flex;
        gap: 8px;
        background: #004f4e;
        height: fit-content;
        padding: 5px 15px;
        border-radius: 9px;
        color: white;

        p {
          margin-bottom: 0;
        }
      }
    }

    .description {
      margin-top: 20px;

      p {
        font-size: 15px;
        font-weight: 300;
      }
    }

    .flex {
      display: flex;
      gap: 40px;
      margin-top: 50px;
      align-items: center;

      .food-image {
        width: 400px;
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        border-radius: 18px;

        img {
          height: 100%;
          /* object-fit: cover; */
          object-fit: contain;
          max-width: 100%;
          max-height: 100%;
        }
      }

      .ingredients {
        width: 100%;
        ul {
          list-style: square;
          padding-left: 13px;

          li {
            margin-bottom: 5px;
          }
        }
      }
    }

    .preparation-steps {
      margin-top: 40px;

      ul {
        list-style: circle;
      }

      li {
        margin-bottom: 7px;
        font-size: 18px;
      }
    }
  }
}

.chef-challenge-page {
  background: linear-gradient(135deg, #f7eacc 0%, #fdf3dc 50%, #ddcdaa 100%);
  min-height: 100vh;
  overflow-x: hidden;

  /* Mobile touch improvements */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  .hero-img-section {
    img {
      width: 100%;
      height: 100vh;
      object-fit: cover;
      object-position: center;
    }
  }

  /* Challenge Introduction Section */
  .challenge-intro-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;

    &::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"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23004f4e" opacity="0.03"/><circle cx="75" cy="75" r="1" fill="%23f73b28" opacity="0.03"/><circle cx="50" cy="10" r="0.5" fill="%23a7b804" opacity="0.02"/><circle cx="10" cy="60" r="0.5" fill="%23004f4e" opacity="0.02"/><circle cx="90" cy="40" r="0.5" fill="%23f73b28" opacity="0.02"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
      pointer-events: none;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      position: relative;
      z-index: 2;
    }

    .intro-content {
      text-align: center;

      .intro-badge {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: linear-gradient(135deg, #004f4e, #f73b28);
        color: white;
        padding: 12px 28px;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 24px;
        box-shadow: 0 8px 32px rgba(0, 79, 78, 0.2);

        i {
          color: #ffd700;
          font-size: 16px;
        }
      }

      .intro-title {
        font-size: 3rem;
        font-weight: 800;
        color: #004f4e;
        margin-bottom: 24px;
        line-height: 1.2;

        .gradient-text {
          background: linear-gradient(135deg, #f73b28, #ff6b35);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .intro-description {
        font-size: 1.25rem;
        line-height: 1.6;
        color: #666;
        max-width: 700px;
        margin: 0 auto 40px;
      }

      .intro-cta {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .cta-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* gap: 12px; */
        padding: 18px 36px;
        border-radius: 50px;
        font-size: 18px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
        min-height: 48px; /* Minimum touch target size */
        touch-action: manipulation;
        text-align: center;

        i {
          font-size: 20px;
        }

        &.primary {
          background: linear-gradient(135deg, #f73b28, #e6341a);
          color: white;
          box-shadow: 0 8px 32px rgba(247, 59, 40, 0.3);

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 40px rgba(247, 59, 40, 0.4);
          }
        }

        &.secondary {
          background: rgba(255, 255, 255, 0.9);
          color: #004f4e;
          border: 2px solid #004f4e;
          backdrop-filter: blur(10px);

          &:hover {
            background: #004f4e;
            color: white;
            transform: translateY(-2px);
          }
        }
      }
    }
  }

  /* Hero Section with Image */
  .chef-hero-section-with-image {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .hero-image-container {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }

      .hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          135deg,
          rgba(0, 79, 78, 0.8) 0%,
          rgba(0, 79, 78, 0.6) 50%,
          rgba(247, 59, 40, 0.4) 100%
        );
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 80px 20px;

        .hero-content-overlay {
          max-width: 800px;
          text-align: center;
          color: white;
          z-index: 2;

          .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            padding: 12px 24px;
            border-radius: 50px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            margin-bottom: 24px;
            font-size: 14px;
            font-weight: 600;
            color: white;

            i {
              color: #ffd700;
              font-size: 16px;
            }
          }

          .hero-title {
            font-size: 3.5rem;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 24px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

            .gradient-text {
              background: linear-gradient(135deg, #ffd700, #ff6b35);
              background-clip: text;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              text-shadow: none;
            }
          }

          .hero-subtitle {
            font-size: 1.25rem;
            line-height: 1.6;
            margin-bottom: 40px;
            opacity: 0.95;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
          }

          .hero-cta {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;

            .modern-pulse-button {
              background: linear-gradient(
                135deg,
                rgba(255, 255, 255, 0.95),
                rgba(255, 255, 255, 0.9)
              );
              border: 2px solid rgba(255, 255, 255, 0.3);
              color: #004f4e;
              box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);

              .button-text .main-text {
                color: #004f4e;
                background: linear-gradient(135deg, #004f4e, #f73b28);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }

              &:hover {
                background: linear-gradient(
                  135deg,
                  rgba(255, 255, 255, 1),
                  rgba(255, 255, 255, 0.95)
                );
                border-color: rgba(255, 255, 255, 0.5);
                box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
              }
            }
          }
        }
      }
    }

    .floating-ingredients-section {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 1;

      .floating-elements {
        position: relative;
        width: 100%;
        height: 100%;

        .floating-ingredient {
          position: absolute;
          width: 80px;
          height: 80px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.1);
          backdrop-filter: blur(10px);
          border: 2px solid rgba(255, 255, 255, 0.2);
          display: flex;
          align-items: center;
          justify-content: center;
          animation: float 6s ease-in-out infinite;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

          img {
            width: 50px;
            height: 50px;
            object-fit: contain;
            filter: brightness(1.1) contrast(1.1);
          }

          &.ingredient-1 {
            top: 20%;
            left: 10%;
            animation-delay: 0s;
          }

          &.ingredient-2 {
            top: 60%;
            right: 15%;
            animation-delay: 2s;
          }

          &.ingredient-3 {
            bottom: 30%;
            left: 20%;
            animation-delay: 4s;
          }

          &.ingredient-4 {
            top: 40%;
            right: 30%;
            animation-delay: 1s;
          }
        }
      }
    }
  }

  /* Hero Section */
  .chef-hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 100px 50px;
    position: relative;
    background: linear-gradient(135deg, #f7eacc 0%, #fdf3dc 50%, #ddcdaa 100%);

    .hero-content {
      flex: 1;
      max-width: 600px;
      z-index: 2;
      position: relative;

      .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: rgba(255, 255, 255, 0.9);
        padding: 12px 24px;
        border-radius: 50px;
        margin-bottom: 30px;
        box-shadow: 0 8px 32px rgba(0, 79, 78, 0.1);
        backdrop-filter: blur(10px);

        i {
          color: #f73b28;
          font-size: 20px;
        }

        span {
          color: #004f4e;
          font-weight: 600;
          font-size: 16px;
        }
      }

      .hero-title {
        font-size: 4.5rem;
        font-weight: 800;
        color: #004f4e;
        margin-bottom: 24px;
        line-height: 1.1;

        .gradient-text {
          background: linear-gradient(135deg, #f73b28, #a7b804);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }
      }

      .hero-subtitle {
        font-size: 1.25rem;
        color: #004f4e;
        line-height: 1.6;
        margin-bottom: 40px;
        opacity: 0.9;
      }

      .hero-cta {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
      }
    }

    .hero-visual {
      flex: 1;
      position: relative;
      height: 600px;

      .floating-elements {
        position: relative;
        width: 100%;
        height: 100%;

        .floating-ingredient {
          position: absolute;
          width: 120px;
          height: 120px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.9);
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 8px 32px rgba(0, 79, 78, 0.15);
          backdrop-filter: blur(10px);
          animation: float 3s ease-in-out infinite;

          img {
            width: 80px;
            height: 80px;
            object-fit: contain;
          }

          &.ingredient-1 {
            top: 20%;
            right: 20%;
            animation-delay: 0s;
          }

          &.ingredient-2 {
            top: 50%;
            right: 10%;
            animation-delay: 1s;
          }

          &.ingredient-3 {
            top: 70%;
            right: 30%;
            animation-delay: 2s;
          }
        }
      }
    }
  }

  /* How to Enter Section */
  .how-to-enter-section {
    padding: 100px 50px;
    background: white;

    .section-header {
      text-align: center;
      margin-bottom: 80px;

      h2 {
        font-size: 3rem;
        font-weight: 700;
        color: #004f4e;
        margin-bottom: 20px;
      }

      p {
        font-size: 1.25rem;
        color: #004f4e;
        opacity: 0.8;
        max-width: 600px;
        margin: 0 auto;
      }
    }

    .steps-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 40px;
      max-width: 1200px;
      margin: 0 auto;

      .step-card {
        background: white;
        border-radius: 24px;
        padding: 40px 30px;
        box-shadow: 0 8px 32px rgba(0, 79, 78, 0.1);
        border: 1px solid rgba(0, 79, 78, 0.1);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;

        &:hover {
          transform: translateY(-8px);
          box-shadow: 0 16px 48px rgba(0, 79, 78, 0.15);
        }

        .step-number {
          position: absolute;
          top: -15px;
          left: 30px;
          width: 60px;
          height: 60px;
          background: linear-gradient(135deg, #f73b28, #e6341a);
          color: white;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
          font-weight: 700;
          box-shadow: 0 4px 16px rgba(247, 59, 40, 0.3);
        }

        .step-content {
          margin-top: 20px;

          h3 {
            font-size: 1.5rem;
            font-weight: 700;
            color: #004f4e;
            margin-bottom: 16px;
          }

          p {
            color: #004f4e;
            opacity: 0.8;
            line-height: 1.6;
            margin-bottom: 20px;
          }

          .social-links {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;

            a {
              display: inline-flex;
              align-items: center;
              gap: 8px;
              padding: 8px 16px;
              background: rgba(0, 79, 78, 0.1);
              color: #004f4e;
              text-decoration: none;
              border-radius: 20px;
              font-size: 14px;
              font-weight: 500;
              transition: all 0.3s ease;
              min-height: 40px; /* Minimum touch target size */
              touch-action: manipulation;

              &:hover {
                background: #004f4e;
                color: white;
                transform: translateY(-2px);
              }

              i {
                font-size: 16px;
              }
            }
          }

          .hashtags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;

            .hashtag {
              background: linear-gradient(135deg, #a7b804, #8a9a03);
              color: white;
              padding: 6px 12px;
              border-radius: 16px;
              font-size: 14px;
              font-weight: 600;
            }
          }
        }

        .submit-entry-button {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          padding: 16px 32px;
          background: linear-gradient(135deg, #2e7d32, #1b5e20);
          color: white;
          border: none;
          border-radius: 50px;
          font-size: 18px;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;
          box-shadow: 0 6px 24px rgba(46, 125, 50, 0.3);
          text-align: center;
          margin-top: 16px;

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 32px rgba(46, 125, 50, 0.4);
            background: linear-gradient(135deg, #388e3c, #2e7d32);
          }

          &:active {
            transform: translateY(0);
          }

          i {
            font-size: 20px;
          }
        }
      }
    }
  }

  /* Prizes Section */
  .prizes-section {
    padding: 100px 50px;
    background: linear-gradient(135deg, #004f4e, #003a3a);

    .section-header {
      text-align: center;
      margin-bottom: 80px;

      h2 {
        font-size: 3rem;
        font-weight: 700;
        color: white;
        margin-bottom: 20px;
      }

      p {
        font-size: 1.25rem;
        color: rgba(255, 255, 255, 0.8);
        max-width: 600px;
        margin: 0 auto;
      }
    }

    .prizes-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 40px;
      max-width: 1000px;
      margin: 0 auto;

      .prize-card {
        background: white;
        border-radius: 24px;
        padding: 40px 30px;
        text-align: center;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;

        &:hover {
          transform: translateY(-8px);
          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
        }

        &.first-place {
          border: 3px solid #ffd700;

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #ffd700, #ffed4e);
          }
        }

        &.second-place {
          border: 3px solid #c0c0c0;

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #c0c0c0, #e8e8e8);
          }
        }

        &.third-place {
          border: 3px solid #cd7f32;

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #cd7f32, #daa520);
          }
        }

        .prize-icon {
          font-size: 4rem;
          margin-bottom: 20px;
        }

        .prize-content {
          h3 {
            font-size: 1.5rem;
            font-weight: 700;
            color: #004f4e;
            margin-bottom: 12px;
          }

          .prize-amount {
            font-size: 2.5rem;
            font-weight: 800;
            color: #f73b28;
            margin-bottom: 12px;
          }

          p {
            color: #004f4e;
            opacity: 0.8;
            font-size: 1.1rem;
          }
        }
      }
    }
  }

  /* Judging Section */
  .judging-section {
    padding: 100px 50px;
    background: #fdf3dc;

    .section-header {
      text-align: center;
      margin-bottom: 80px;

      h2 {
        font-size: 3rem;
        font-weight: 700;
        color: #004f4e;
        margin-bottom: 20px;
      }

      p {
        font-size: 1.25rem;
        color: #004f4e;
        opacity: 0.8;
        max-width: 600px;
        margin: 0 auto;
      }
    }

    .criteria-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 40px;
      max-width: 1000px;
      margin: 0 auto;

      .criteria-card {
        background: white;
        border-radius: 24px;
        padding: 40px 30px;
        text-align: center;
        box-shadow: 0 8px 32px rgba(0, 79, 78, 0.1);
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-8px);
          box-shadow: 0 16px 48px rgba(0, 79, 78, 0.15);
        }

        .criteria-icon {
          width: 80px;
          height: 80px;
          background: linear-gradient(135deg, #a7b804, #8a9a03);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 24px;

          i {
            font-size: 2rem;
            color: white;
          }
        }

        h3 {
          font-size: 1.5rem;
          font-weight: 700;
          color: #004f4e;
          margin-bottom: 16px;
          overflow-wrap: break-word;
        }

        p {
          color: #004f4e;
          opacity: 0.8;
          line-height: 1.6;
        }
      }
    }
  }

  /* Timeline Section */
  .timeline-section {
    padding: 100px 50px;
    background: white;
    overflow-x: hidden;

    .section-header {
      text-align: center;
      margin-bottom: 80px;

      h2 {
        font-size: 3rem;
        font-weight: 700;
        color: #004f4e;
        margin-bottom: 20px;
      }

      p {
        font-size: 1.25rem;
        color: #004f4e;
        opacity: 0.8;
        max-width: 600px;
        margin: 0 auto;
      }
    }

    .timeline-container {
      max-width: 800px;
      margin: 0 auto;
      position: relative;
      overflow-x: hidden;

      &::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(180deg, #f73b28, #a7b804);
        transform: translateX(-50%);
      }

      .timeline-item {
        display: flex;
        align-items: center;
        margin-bottom: 60px;
        position: relative;

        &:nth-child(odd) {
          flex-direction: row;

          .timeline-date {
            margin-right: 40px;
          }
        }

        &:nth-child(even) {
          flex-direction: row-reverse;

          .timeline-date {
            margin-left: 40px;
          }
        }

        .timeline-date {
          background: linear-gradient(135deg, #f73b28, #e6341a);
          color: white;
          padding: 20px;
          border-radius: 16px;
          text-align: center;
          min-width: 120px;
          box-shadow: 0 8px 32px rgba(247, 59, 40, 0.3);

          .date {
            display: block;
            font-size: 1.5rem;
            font-weight: 700;
          }

          .year {
            display: block;
            font-size: 1rem;
            opacity: 0.9;
          }
        }

        .timeline-content {
          background: white;
          padding: 30px;
          border-radius: 16px;
          box-shadow: 0 8px 32px rgba(0, 79, 78, 0.1);
          flex: 1;
          max-width: 300px;

          h3 {
            font-size: 1.25rem;
            font-weight: 700;
            color: #004f4e;
            margin-bottom: 12px;
          }

          p {
            color: #004f4e;
            opacity: 0.8;
            line-height: 1.6;
          }
        }
      }
    }
  }

  /* Why Join Section */
  .why-join-section {
    padding: 100px 50px;
    background: linear-gradient(135deg, #f7eacc, #fdf3dc);

    .section-header {
      text-align: center;
      margin-bottom: 80px;

      h2 {
        font-size: 3rem;
        font-weight: 700;
        color: #004f4e;
        margin-bottom: 20px;
      }

      p {
        font-size: 1.25rem;
        color: #004f4e;
        opacity: 0.8;
        max-width: 600px;
        margin: 0 auto;
      }
    }

    .benefits-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 40px;
      max-width: 1000px;
      margin: 0 auto;

      .benefit-item {
        background: white;
        border-radius: 24px;
        padding: 40px 30px;
        text-align: center;
        box-shadow: 0 8px 32px rgba(0, 79, 78, 0.1);
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-8px);
          box-shadow: 0 16px 48px rgba(0, 79, 78, 0.15);
        }

        .benefit-icon {
          width: 80px;
          height: 80px;
          background: linear-gradient(135deg, #f73b28, #e6341a);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 24px;

          i {
            font-size: 2rem;
            color: white;
          }
        }

        h3 {
          font-size: 1.5rem;
          font-weight: 700;
          color: #004f4e;
          margin-bottom: 16px;
        }

        p {
          color: #004f4e;
          opacity: 0.8;
          line-height: 1.6;
        }
      }
    }
  }

  /* Final CTA Section */
  .final-cta-section {
    padding: 100px 50px;
    background: linear-gradient(135deg, #004f4e, #003a3a);
    text-align: center;

    .cta-content {
      max-width: 800px;
      margin: 0 auto;

      h2 {
        font-size: 3rem;
        font-weight: 700;
        color: white;
        margin-bottom: 24px;
      }

      p {
        font-size: 1.25rem;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 40px;
        line-height: 1.6;
      }

      .final-cta-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 20px 40px;
        background: linear-gradient(135deg, #f73b28, #e6341a);
        color: white;
        border: none;
        border-radius: 50px;
        font-size: 20px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 8px 32px rgba(247, 59, 40, 0.3);
        text-align: center;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 12px 40px rgba(247, 59, 40, 0.4);
        }

        i {
          font-size: 24px;
        }
      }
    }
  }

  /* Form Overlay */
  .challenge-form-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;

    .form-container {
      background: white;
      border-radius: 24px;
      width: 100%;
      max-width: 800px;
      height: 80vh;
      position: relative;
      overflow: hidden;

      .close-form {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background: rgba(0, 0, 0, 0.1);
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        transition: all 0.3s ease;
        text-align: center;

        &:hover {
          background: rgba(0, 0, 0, 0.2);
        }

        i {
          font-size: 18px;
          color: #004f4e;
        }
      }
    }
  }

  /* Modal Styles */
  .modal {
    .modal-dialog {
      min-width: 50%;

      .modal-body {
        line-height: 30px;
        padding: 20px;
      }
    }
  }

  /* General button centering for chef challenge page */
  button:not(.btn):not([class*="btn-"]) {
    text-align: center;
  }
}

/* ========================================
   NEW MODERN LANDING PAGE STYLES
   ======================================== */

.new-landing-page {
  background: linear-gradient(135deg, #f7eacc 0%, #fdf3dc 50%, #ddcdaa 100%);
  min-height: 100vh;
  overflow-x: hidden;

  /* Modern Hero Section */
  .modern-hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 100px 50px;
    position: relative;
    background: linear-gradient(135deg, #f7eacc 0%, #fdf3dc 50%, #ddcdaa 100%);

    .hero-content-wrapper {
      flex: 1;
      max-width: 600px;
      z-index: 2;
      position: relative;

      .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: rgba(255, 255, 255, 0.9);
        padding: 12px 24px;
        border-radius: 50px;
        margin-bottom: 30px;
        box-shadow: 0 8px 32px rgba(0, 79, 78, 0.1);
        backdrop-filter: blur(10px);

        i {
          color: #f73b28;
          font-size: 20px;
        }

        span {
          color: #004f4e;
          font-weight: 600;
          font-size: 16px;
        }
      }

      .hero-main-title {
        font-size: 4.5rem;
        font-weight: 800;
        color: #004f4e;
        margin-bottom: 24px;
        line-height: 1.1;

        .gradient-accent {
          background: linear-gradient(135deg, #f73b28, #a7b804);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }
      }

      .hero-description {
        font-size: 1.25rem;
        color: #004f4e;
        line-height: 1.6;
        margin-bottom: 40px;
        opacity: 0.9;
      }

      .hero-actions {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;

        .primary-action-btn {
          display: inline-flex;
          align-items: center;
          gap: 12px;
          padding: 18px 36px;
          border-radius: 50px;
          font-size: 18px;
          font-weight: 600;
          text-decoration: none;
          transition: all 0.3s ease;
          border: none;
          cursor: pointer;
          min-height: 48px;
          touch-action: manipulation;
          text-align: center;
          background: linear-gradient(135deg, #f73b28, #e6341a);
          color: white;
          box-shadow: 0 8px 32px rgba(247, 59, 40, 0.3);

          i {
            font-size: 20px;
          }

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 40px rgba(247, 59, 40, 0.4);
          }
        }
      }
    }

    .hero-visual-elements {
      flex: 1;
      height: 500px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      .floating-ingredients {
        position: relative;
        width: 100%;
        height: 100%;

        .ingredient-item {
          position: absolute;
          width: 80px;
          height: 80px;
          background: rgba(255, 255, 255, 0.9);
          border-radius: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 8px 32px rgba(0, 79, 78, 0.1);
          backdrop-filter: blur(10px);
          animation: float 6s ease-in-out infinite;

          img {
            width: 50px;
            height: 50px;
            object-fit: contain;
          }

          &.ingredient-1 {
            top: 10%;
            right: 20%;
            animation-delay: 0s;
          }

          &.ingredient-2 {
            top: 30%;
            right: 10%;
            animation-delay: 2s;
          }

          &.ingredient-3 {
            top: 50%;
            right: 30%;
            animation-delay: 4s;
          }

          &.ingredient-4 {
            top: 70%;
            right: 15%;
            animation-delay: 1s;
          }

          &.ingredient-5 {
            top: 20%;
            right: 5%;
            animation-delay: 3s;
          }

          &.ingredient-6 {
            top: 60%;
            right: 5%;
            animation-delay: 5s;
          }
        }
      }
    }
  }

  /* Enhanced Products Showcase */
  .enhanced-products-showcase {
    padding: 100px 50px;
    background: white;

    .showcase-header {
      text-align: center;
      margin-bottom: 80px;

      .showcase-title {
        font-size: 3rem;
        font-weight: 700;
        color: #004f4e;
        margin-bottom: 20px;
      }

      .showcase-subtitle {
        font-size: 1.25rem;
        color: #004f4e;
        opacity: 0.8;
        max-width: 600px;
        margin: 0 auto;
      }
    }

    .products-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 40px;
      max-width: 1200px;
      margin: 0 auto;

      .product-card {
        background: white;
        border-radius: 20px;
        padding: 30px;
        text-align: center;
        box-shadow: 0 8px 32px rgba(0, 79, 78, 0.1);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;

        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 4px;
          background: linear-gradient(135deg, #f73b28, #a7b804);
        }

        &:hover {
          transform: translateY(-8px);
          box-shadow: 0 16px 48px rgba(0, 79, 78, 0.15);
        }

        .product-image {
          width: 120px;
          height: 120px;
          margin: 0 auto 20px;
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 4px 16px rgba(0, 79, 78, 0.1);

          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }

        .product-name {
          font-size: 1.1rem;
          font-weight: 600;
          color: #004f4e;
          margin-bottom: 8px;
        }

        .product-description {
          font-size: 0.9rem;
          color: #004f4e;
          opacity: 0.7;
        }
      }
    }
  }

  /* Modern About Section */
  .modern-about-section {
    padding: 100px 50px;
    background: linear-gradient(135deg, #f7eacc 0%, #fdf3dc 50%, #ddcdaa 100%);
    position: relative;
    overflow: hidden;

    .about-content-wrapper {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;

      .about-text-content {
        .about-badge {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          background: rgba(255, 255, 255, 0.9);
          padding: 12px 24px;
          border-radius: 50px;
          margin-bottom: 30px;
          box-shadow: 0 8px 32px rgba(0, 79, 78, 0.1);
          backdrop-filter: blur(10px);

          i {
            color: #f73b28;
            font-size: 18px;
          }

          span {
            color: #004f4e;
            font-weight: 600;
            font-size: 16px;
          }
        }

        .about-main-title {
          font-size: 3rem;
          font-weight: 700;
          color: #004f4e;
          margin-bottom: 24px;
          line-height: 1.2;
        }

        .about-description {
          font-size: 1.1rem;
          color: #004f4e;
          line-height: 1.6;
          margin-bottom: 40px;
          opacity: 0.9;
        }

        .about-features {
          display: flex;
          flex-direction: column;
          gap: 20px;

          .feature-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px 20px;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 12px;
            backdrop-filter: blur(10px);

            .feature-icon {
              width: 40px;
              height: 40px;
              background: linear-gradient(135deg, #f73b28, #e6341a);
              border-radius: 10px;
              display: flex;
              align-items: center;
              justify-content: center;
              color: white;
              font-size: 18px;
            }

            .feature-text {
              font-size: 1rem;
              color: #004f4e;
              font-weight: 500;
            }
          }
        }
      }

      .about-visual-content {
        position: relative;

        .main-product-showcase {
          width: 100%;
          max-width: 500px;
          margin: 0 auto;
          border-radius: 20px;
          overflow: hidden;
          box-shadow: 0 16px 48px rgba(0, 79, 78, 0.15);

          img {
            width: 100%;
            height: auto;
            display: block;
          }
        }

        .floating-decorations {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          pointer-events: none;

          .decoration-item {
            position: absolute;
            width: 60px;
            height: 60px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 16px rgba(0, 79, 78, 0.1);
            backdrop-filter: blur(10px);
            animation: float 8s ease-in-out infinite;

            img {
              width: 35px;
              height: 35px;
              object-fit: contain;
            }

            &.decoration-1 {
              top: 10%;
              left: -30px;
              animation-delay: 0s;
            }

            &.decoration-2 {
              top: 60%;
              right: -30px;
              animation-delay: 3s;
            }

            &.decoration-3 {
              bottom: 20%;
              left: -20px;
              animation-delay: 6s;
            }
          }
        }
      }
    }
  }

  /* Enhanced Recipes Section */
  .enhanced-recipes-section {
    padding: 100px 50px;
    background: white;

    .recipes-header {
      text-align: center;
      margin-bottom: 80px;

      .recipes-title {
        font-size: 3rem;
        font-weight: 700;
        color: #004f4e;
        margin-bottom: 20px;
      }

      .recipes-subtitle {
        font-size: 1.25rem;
        color: #004f4e;
        opacity: 0.8;
        max-width: 600px;
        margin: 0 auto;
      }
    }

    .recipes-carousel-wrapper {
      max-width: 1200px;
      margin: 0 auto;

      .recipe-card {
        background: white;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 8px 32px rgba(0, 79, 78, 0.1);
        transition: all 0.3s ease;
        margin: 0 15px;

        &:hover {
          transform: translateY(-8px);
          box-shadow: 0 16px 48px rgba(0, 79, 78, 0.15);
        }

        .recipe-image-container {
          position: relative;
          overflow: hidden;

          .recipe-image {
            width: 100%;
            height: 250px;
            object-fit: cover;
            transition: transform 0.3s ease;
          }

          &:hover .recipe-image {
            transform: scale(1.05);
          }
        }

        .recipe-content {
          padding: 30px;

          .recipe-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: #004f4e;
            margin-bottom: 12px;
            line-height: 1.3;
          }

          .recipe-description {
            font-size: 1rem;
            color: #004f4e;
            opacity: 0.8;
            line-height: 1.5;
            margin-bottom: 20px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }

          .recipe-action-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 24px;
            background: linear-gradient(135deg, #f73b28, #e6341a);
            color: white;
            border: none;
            border-radius: 25px;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            cursor: pointer;
            text-align: center;

            i {
              font-size: 16px;
            }

            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 8px 24px rgba(247, 59, 40, 0.3);
            }
          }
        }
      }
    }

    .view-all-recipes-container {
      text-align: center;
      margin-top: 60px;

      .view-all-btn {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 18px 36px;
        background: rgba(255, 255, 255, 0.9);
        color: #004f4e;
        border: 2px solid #004f4e;
        border-radius: 50px;
        font-size: 18px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
        cursor: pointer;
        text-align: center;
        backdrop-filter: blur(10px);

        i {
          font-size: 20px;
        }

        &:hover {
          background: #004f4e;
          color: white;
          transform: translateY(-2px);
        }
      }
    }
  }

  /* Floating Animation */
  @keyframes float {
    0%,
    100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-20px);
    }
  }

  /* Bounce Animation */
  @keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-8px);
    }
    60% {
      transform: translateY(-4px);
    }
  }

  /* Modern Pulse Button Animation */
  @keyframes pulse-glow {
    0% {
      box-shadow: 0 0 0 0 rgba(247, 59, 40, 0.7);
    }
    70% {
      box-shadow: 0 0 0 20px rgba(247, 59, 40, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(247, 59, 40, 0);
    }
  }

  @keyframes pulse-scale {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }

  @keyframes arrow-bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-3px);
    }
    60% {
      transform: translateY(-1px);
    }
  }

  @keyframes text-shimmer {
    0% {
      background-position: -200% center;
    }
    100% {
      background-position: 200% center;
    }
  }

  .modern-gradient-button {
    position: relative;
    overflow: hidden;
    border: none;
    background: linear-gradient(135deg, #004f4e 0%, #f73b28 50%, #ff6b35 100%);
    padding: 0;
    min-height: 70px;
    border-radius: 60px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    box-shadow: 0 12px 40px rgba(0, 79, 78, 0.3);
    transform: perspective(1000px) rotateX(0deg);

    .button-inner {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 20px 40px;
      position: relative;
      z-index: 3;

      .button-icon-wrapper {
        width: 50px;
        height: 50px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(10px);
        border: 2px solid rgba(255, 255, 255, 0.3);
        transition: all 0.3s ease;

        i {
          color: white;
          font-size: 20px;
          filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
        }
      }

      .button-text-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;

        .button-main-text {
          font-size: 18px;
          font-weight: 800;
          color: white;
          line-height: 1;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
          letter-spacing: 0.5px;
        }

        .button-sub-text {
          font-size: 13px;
          font-weight: 500;
          color: rgba(255, 255, 255, 0.9);
          line-height: 1;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        }
      }

      .button-arrow {
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        transition: all 0.3s ease;
        margin-left: auto;

        i {
          color: white;
          font-size: 16px;
          transition: transform 0.3s ease;
        }
      }
    }

    .button-shine {
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
      );
      transition: left 0.6s ease;
      z-index: 2;
    }

    .button-ripple {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.3) 0%,
        transparent 70%
      );
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: all 0.6s ease;
      z-index: 1;
    }

    &:hover {
      transform: translateY(-5px) scale(1.05) perspective(1000px) rotateX(5deg);
      box-shadow: 0 20px 60px rgba(0, 79, 78, 0.4);
      background: linear-gradient(
        135deg,
        #f73b28 0%,
        #ff6b35 50%,
        #ffd700 100%
      );

      .button-inner {
        .button-icon-wrapper {
          background: rgba(255, 255, 255, 0.3);
          border-color: rgba(255, 255, 255, 0.5);
          transform: scale(1.1) rotate(10deg);

          i {
            transform: scale(1.1);
          }
        }

        .button-arrow {
          background: rgba(255, 255, 255, 0.25);
          border-color: rgba(255, 255, 255, 0.4);
          transform: translateX(5px);

          i {
            transform: translateX(3px);
          }
        }
      }

      .button-shine {
        left: 100%;
      }

      .button-ripple {
        width: 300px;
        height: 300px;
        opacity: 0;
      }
    }

    &:active {
      transform: translateY(-2px) scale(1.02) perspective(1000px) rotateX(2deg);
      transition: transform 0.1s ease;

      .button-inner {
        .button-icon-wrapper {
          transform: scale(0.95) rotate(5deg);
        }

        .button-arrow {
          transform: translateX(2px) scale(0.95);
        }
      }
    }

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1),
        transparent
      );
      border-radius: 60px;
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 1;
    }

    &:hover::before {
      opacity: 1;
    }
  }
}

/* ========================================
   MODERN STORE LOCATOR STYLES
   ======================================== */

.modern-store-locator {
  background: linear-gradient(135deg, #f7eacc 0%, #fdf3dc 50%, #ddcdaa 100%);
  min-height: 100vh;
  overflow-x: hidden;

  /* Modern Hero Section */
  .modern-store-hero {
    padding: 100px 50px 60px;
    background: linear-gradient(135deg, #f7eacc 0%, #fdf3dc 50%, #ddcdaa 100%);
    text-align: center;
    position: relative;

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(255, 255, 255, 0.9);
      padding: 12px 24px;
      border-radius: 50px;
      margin-bottom: 30px;
      box-shadow: 0 8px 32px rgba(0, 79, 78, 0.1);
      backdrop-filter: blur(10px);

      i {
        color: #f73b28;
        font-size: 20px;
      }

      span {
        color: #004f4e;
        font-weight: 600;
        font-size: 16px;
      }
    }

    .hero-title {
      font-size: 3.5rem;
      font-weight: 800;
      color: #004f4e;
      margin-bottom: 20px;
      line-height: 1.1;

      .gradient-accent {
        background: linear-gradient(135deg, #f73b28, #a7b804);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
    }

    .hero-subtitle {
      font-size: 1.25rem;
      color: #004f4e;
      opacity: 0.8;
      margin-bottom: 50px;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
    }

    .enhanced-search-container {
      max-width: 800px;
      margin: 0 auto;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 20px;
      padding: 30px;
      box-shadow: 0 16px 48px rgba(0, 79, 78, 0.15);
      backdrop-filter: blur(20px);

      .search-form {
        display: flex;
        gap: 20px;
        align-items: center;
        flex-wrap: wrap;

        .search-input-group {
          flex: 1;
          min-width: 300px;
          position: relative;

          .search-input {
            width: 100%;
            padding: 18px 60px 18px 20px;
            border: 2px solid #e0e0e0;
            border-radius: 50px;
            font-size: 16px;
            background: white;
            transition: all 0.3s ease;
            box-shadow: 0 4px 16px rgba(0, 79, 78, 0.1);

            &:focus {
              outline: none;
              border-color: #f73b28;
              box-shadow: 0 8px 24px rgba(247, 59, 40, 0.2);
            }

            &::placeholder {
              color: #999;
            }
          }

          .search-actions {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            gap: 8px;

            .action-btn {
              width: 40px;
              height: 40px;
              border: none;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              transition: all 0.3s ease;
              background: transparent;

              &.location-btn {
                color: #f73b28;
                background: rgba(247, 59, 40, 0.1);

                &:hover {
                  background: rgba(247, 59, 40, 0.2);
                  transform: scale(1.1);
                }
              }

              &.clear-btn {
                color: #999;
                background: rgba(0, 0, 0, 0.05);

                &:hover {
                  background: rgba(0, 0, 0, 0.1);
                  color: #666;
                }

                &.disabled {
                  opacity: 0.5;
                  cursor: not-allowed;
                }
              }

              i {
                font-size: 18px;
              }
            }
          }
        }

        .search-button {
          padding: 18px 36px;
          background: linear-gradient(135deg, #f73b28, #e6341a);
          color: white;
          border: none;
          border-radius: 50px;
          font-size: 16px;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;
          box-shadow: 0 8px 24px rgba(247, 59, 40, 0.3);
          min-width: 140px;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;

          &:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 12px 32px rgba(247, 59, 40, 0.4);
          }

          &:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
          }

          .loading-spinner {
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-top: 2px solid white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
          }
        }
      }
    }
  }

  /* Enhanced Store Results */
  .enhanced-store-results {
    padding: 60px 50px;
    background: white;

    .results-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40px;
      flex-wrap: wrap;
      gap: 20px;

      .results-info {
        .results-count {
          font-size: 1.5rem;
          font-weight: 700;
          color: #004f4e;
          margin-bottom: 8px;
        }

        .results-subtitle {
          color: #666;
          font-size: 1rem;
        }
      }

      .results-controls {
        display: flex;
        gap: 15px;
        align-items: center;

        .distance-toggle {
          display: flex;
          background: #f5f5f5;
          border-radius: 25px;
          padding: 4px;
          border: none;

          .toggle-option {
            padding: 8px 16px;
            border: none;
            background: transparent;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            font-weight: 500;
            color: #666;

            &.active {
              background: #f73b28;
              color: white;
              box-shadow: 0 2px 8px rgba(247, 59, 40, 0.3);
            }
          }
        }
      }
    }

    .store-results-grid {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 40px;
      min-height: 600px;

      .stores-list {
        .stores-list-header {
          background: linear-gradient(135deg, #f73b28, #e6341a);
          color: white;
          padding: 20px;
          border-radius: 16px 16px 0 0;
          margin-bottom: 0;

          h3 {
            margin: 0;
            font-size: 1.25rem;
            font-weight: 600;
          }
        }

        .stores-container {
          background: white;
          border-radius: 0 0 16px 16px;
          box-shadow: 0 8px 32px rgba(0, 79, 78, 0.1);
          overflow: hidden;
          max-height: 600px;
          overflow-y: auto;

          .store-card {
            padding: 20px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;

            &:last-child {
              border-bottom: none;
            }

            &:hover {
              background: #f8f9fa;
              transform: translateX(4px);
            }

            &.selected {
              background: rgba(247, 59, 40, 0.05);
              border-left: 4px solid #f73b28;
            }

            .store-header {
              display: flex;
              justify-content: space-between;
              align-items: flex-start;
              margin-bottom: 12px;

              .store-name {
                font-size: 1.1rem;
                font-weight: 600;
                color: #004f4e;
                margin: 0;
                line-height: 1.3;
              }

              .store-distance {
                background: rgba(247, 59, 40, 0.1);
                color: #f73b28;
                padding: 4px 12px;
                border-radius: 20px;
                font-size: 0.85rem;
                font-weight: 500;
                white-space: nowrap;
              }
            }

            .store-address {
              color: #666;
              font-size: 0.95rem;
              line-height: 1.4;
              margin-bottom: 15px;
            }

            .store-actions {
              display: flex;
              gap: 10px;

              .action-button {
                padding: 8px 16px;
                border: 1px solid #e0e0e0;
                background: white;
                border-radius: 20px;
                font-size: 0.85rem;
                font-weight: 500;
                cursor: pointer;
                transition: all 0.3s ease;
                display: flex;
                align-items: center;
                gap: 6px;

                &.primary {
                  background: #f73b28;
                  color: white;
                  border-color: #f73b28;

                  &:hover {
                    background: #e6341a;
                    transform: translateY(-1px);
                  }
                }

                &.secondary {
                  color: #666;

                  &:hover {
                    background: #f5f5f5;
                    border-color: #ccc;
                  }
                }

                i {
                  font-size: 12px;
                }
              }
            }
          }

          .no-stores-message {
            padding: 60px 20px;
            text-align: center;
            color: #666;

            .message-icon {
              font-size: 3rem;
              color: #ddd;
              margin-bottom: 20px;
            }

            h4 {
              color: #004f4e;
              margin-bottom: 10px;
              font-size: 1.25rem;
            }

            p {
              font-size: 1rem;
              line-height: 1.5;
            }
          }
        }

        .pagination-container {
          padding: 20px;
          background: white;
          border-top: 1px solid #f0f0f0;

          .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            list-style: none;
            margin: 0;
            padding: 0;

            .page-item {
              .page-link {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 40px;
                border: 1px solid #e0e0e0;
                background: white;
                color: #666;
                text-decoration: none;
                border-radius: 8px;
                transition: all 0.3s ease;
                font-weight: 500;

                &:hover {
                  background: #f73b28;
                  color: white;
                  border-color: #f73b28;
                }

                &.active {
                  background: #f73b28;
                  color: white;
                  border-color: #f73b28;
                }
              }

              &.disabled .page-link {
                opacity: 0.5;
                cursor: not-allowed;
                background: #f5f5f5;
              }
            }
          }
        }
      }

      .map-container {
        .map-wrapper {
          border-radius: 16px;
          overflow: hidden;
          box-shadow: 0 8px 32px rgba(0, 79, 78, 0.15);
          height: 600px;

          #map {
            width: 100%;
            height: 100%;
            border-radius: 16px;
          }
        }
      }
    }
  }

  /* Loading States */
  .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    backdrop-filter: blur(5px);

    .loading-spinner {
      width: 40px;
      height: 40px;
      border: 4px solid rgba(247, 59, 40, 0.1);
      border-top: 4px solid #f73b28;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
  }

  /* Animations */
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes slideInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-slide-up {
    animation: slideInUp 0.6s ease-out;
  }
}

.footer-container {
  background: linear-gradient(135deg, #004f4e 0%, #006b6a 100%);
  padding: 80px 100px 40px;
  position: relative;
  overflow: hidden;

  &::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"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.03)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.04)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
  }

  .footer-cards-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;

    .footer-card {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border-radius: 24px;
      padding: 32px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #f73b28, #ffd700, #004f4e);
        z-index: 1;
      }

      &:hover {
        transform: translateY(-8px);
        box-shadow: 0 32px 64px rgba(0, 0, 0, 0.15),
          0 16px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      }

      .card-header {
        margin-bottom: 24px;

        h4 {
          font-size: 1.5rem;
          font-weight: 700;
          color: #004f4e;
          margin-bottom: 12px;
          line-height: 1.3;
        }

        p {
          color: #666;
          font-size: 14px;
          line-height: 1.6;
          margin: 0;
        }
      }

      .card-content {
        flex: 1;
      }

      .card-footer {
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid rgba(0, 79, 78, 0.1);
      }
    }

    .brand-card {
      .logo-wrapper {
        cursor: pointer;
        margin-bottom: 20px;
        transition: transform 0.3s ease;

        &:hover {
          transform: scale(1.05);
        }

        img {
          width: 200px;
          height: auto;
        }
      }

      .brand-description {
        margin-bottom: 20px;

        p {
          color: #666;
          font-size: 14px;
          line-height: 1.6;
          margin: 0;
        }
      }

      .social-links {
        display: flex;
        gap: 16px;

        .social-link {
          width: 44px;
          height: 44px;
          border-radius: 12px;
          background: linear-gradient(135deg, #004f4e, #006b6a);
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          text-decoration: none;
          transition: all 0.3s ease;
          font-size: 18px;

          &:hover {
            background: linear-gradient(135deg, #f73b28, #e6341a);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(247, 59, 40, 0.3);
          }
        }
      }
    }

    .links-card {
      .footer-links {
        list-style: none;
        padding: 0;
        margin: 0;

        li {
          margin-bottom: 12px;

          a {
            display: flex;
            align-items: center;
            gap: 12px;
            color: #004f4e;
            text-decoration: none;
            font-weight: 500;
            font-size: 14px;
            padding: 12px 16px;
            border-radius: 12px;
            transition: all 0.3s ease;
            background: rgba(0, 79, 78, 0.02);
            border: 1px solid rgba(0, 79, 78, 0.05);

            i {
              font-size: 16px;
              color: #f73b28;
              width: 20px;
              text-align: center;
            }

            &:hover {
              background: rgba(247, 59, 40, 0.05);
              border-color: rgba(247, 59, 40, 0.2);
              transform: translateX(8px);
              color: #f73b28;
            }
          }
        }
      }
    }

    .newsletter-card {
      .newsletter-form {
        .input-group {
          display: flex;
          gap: 12px;
          margin-bottom: 16px;

          .form-control {
            flex: 1;
            height: 48px;
            border: 2px solid rgba(0, 79, 78, 0.1);
            border-radius: 12px;
            padding: 0 16px;
            font-size: 14px;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.8);

            &:focus {
              outline: none;
              border-color: #f73b28;
              box-shadow: 0 0 0 3px rgba(247, 59, 40, 0.1);
            }

            &::placeholder {
              color: #999;
            }
          }

          .subscribe-btn {
            width: 48px;
            height: 48px;
            border: none;
            border-radius: 12px;
            background: linear-gradient(135deg, #f73b28, #e6341a);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 16px;

            &:hover:not(:disabled) {
              background: linear-gradient(135deg, #e6341a, #d42a16);
              transform: translateY(-2px);
              box-shadow: 0 8px 25px rgba(247, 59, 40, 0.3);
            }

            &:disabled {
              opacity: 0.6;
              cursor: not-allowed;
            }
          }
        }

        .newsletter-note {
          color: #666;
          font-size: 12px;
          margin: 0;
          text-align: center;
          font-style: italic;
        }
      }
    }
  }

  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 2;

    .copyright {
      p {
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
        margin: 0;
        font-weight: 300;
      }
    }

    .footer-brand {
      .mangrove-brand {
        width: 120px;
        height: auto;
        opacity: 0.8;
        transition: opacity 0.3s ease;

        &:hover {
          opacity: 1;
        }
      }
    }
  }
}

/* Tablet Responsive Styles */
@media (max-width: 1024px) and (min-width: 769px) {
  .footer-container {
    padding: 60px 40px 30px;

    .footer-cards-container {
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      margin-bottom: 50px;

      .footer-card {
        padding: 28px;
        border-radius: 20px;

        .card-header {
          margin-bottom: 20px;

          h4 {
            font-size: 1.3rem;
          }

          p {
            font-size: 13px;
          }
        }

        .brand-card {
          grid-column: 1 / -1;
          text-align: center;

          .logo-wrapper {
            img {
              width: 180px;
            }
          }

          .brand-description {
            max-width: 500px;
            margin: 0 auto 24px;

            p {
              font-size: 13px;
            }
          }

          .social-links {
            justify-content: center;
            gap: 20px;

            .social-link {
              width: 48px;
              height: 48px;
              font-size: 20px;
            }
          }
        }

        .links-card {
          .footer-links {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;

            li {
              a {
                padding: 14px 16px;
                font-size: 13px;
                flex-direction: row;
                text-align: left;

                i {
                  font-size: 16px;
                  width: 20px;
                  margin-bottom: 0;
                }
              }
            }
          }
        }

        .newsletter-card {
          .newsletter-form {
            .input-group {
              flex-direction: row;
              gap: 12px;

              .form-control {
                height: 46px;
                font-size: 14px;
              }

              .subscribe-btn {
                width: 60px;
                height: 46px;
                font-size: 16px;
              }
            }

            .newsletter-note {
              font-size: 12px;
            }
          }
        }
      }
    }

    .footer-bottom {
      padding-top: 32px;

      .copyright {
        p {
          font-size: 13px;
        }
      }

      .footer-brand {
        .mangrove-brand {
          width: 100px;
        }
      }
    }
  }
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
  .timeline-section {
    padding: 60px 20px !important;

    .section-header {
      margin-bottom: 50px !important;

      h2 {
        font-size: 2rem !important;
      }

      p {
        font-size: 1rem !important;
      }
    }

    .timeline-container {
      max-width: 100% !important;

      &::before {
        left: 20px !important;
        width: 2px !important;
      }

      .timeline-item {
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 40px !important;
        padding-left: 50px !important;
        position: relative !important;

        &:nth-child(odd),
        &:nth-child(even) {
          flex-direction: column !important;

          .timeline-date {
            margin-right: 0 !important;
            margin-left: 0 !important;
            margin-bottom: 20px !important;
            min-width: auto !important;
            width: auto !important;
            max-width: 200px !important;
            display: inline-block !important;
          }
        }

        &::before {
          content: "";
          position: absolute;
          left: 11px;
          top: 0;
          width: 18px;
          height: 18px;
          background: linear-gradient(135deg, #f73b28, #e6341a);
          border-radius: 50%;
          border: 3px solid white;
          box-shadow: 0 4px 12px rgba(247, 59, 40, 0.3);
        }

        .timeline-date {
          padding: 15px !important;
          border-radius: 12px !important;

          .date {
            font-size: 1.25rem !important;
          }

          .year {
            font-size: 0.9rem !important;
          }
        }

        .timeline-content {
          padding: 20px !important;
          border-radius: 12px !important;
          max-width: 100% !important;
          width: 100% !important;
          margin-top: 80px !important;

          h3 {
            font-size: 1.1rem !important;
            margin-bottom: 8px !important;
          }

          p {
            font-size: 0.9rem !important;
            line-height: 1.5 !important;
          }
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .timeline-section {
    padding: 40px 15px !important;

    .section-header {
      margin-bottom: 40px !important;

      h2 {
        font-size: 1.75rem !important;
      }
    }

    .timeline-container {
      .timeline-item {
        padding-left: 45px !important;
        margin-bottom: 30px !important;
        display: flex !important;
        flex-direction: column !important;

        &::before {
          left: 8px !important;
          width: 16px !important;
          height: 16px !important;
        }

        .timeline-date {
          padding: 12px !important;
          width: auto !important;
          max-width: 180px !important;
          display: inline-block !important;
          margin-bottom: 15px !important;

          .date {
            font-size: 1.1rem !important;
          }

          .year {
            font-size: 0.8rem !important;
          }
        }

        .timeline-content {
          padding: 16px !important;
          margin-top: 70px !important;

          h3 {
            font-size: 1rem !important;
          }

          p {
            font-size: 0.85rem !important;
          }
        }
      }
    }
  }
}

/* ===========================================
   CHALLENGE WINNERS PAGE STYLES - ELEGANT & CLEAN
   =========================================== */

.challenge-winners-page {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
  min-height: 100vh;
  font-family: "Gelica", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  position: relative;

  /* Subtle background pattern */
  &::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at 20% 20%,
        rgba(247, 59, 40, 0.03) 0%,
        transparent 50%
      ),
      radial-gradient(
        circle at 80% 80%,
        rgba(0, 79, 78, 0.03) 0%,
        transparent 50%
      ),
      radial-gradient(
        circle at 40% 60%,
        rgba(255, 215, 0, 0.02) 0%,
        transparent 50%
      );
    z-index: 0;
  }

  /* Winners Hero Section - Elegant & Clean */
  .winners-hero-section {
    padding: 140px 0 100px;
    background: linear-gradient(135deg, #004f4e 0%, #006b6a 50%, #004f4e 100%);
    position: relative;

    &::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"><defs><pattern id="elegant-pattern" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23elegant-pattern)"/></svg>');
      opacity: 0.4;
    }

    .hero-content {
      text-align: center;
      position: relative;
      z-index: 2;
      max-width: 900px;
      margin: 0 auto;
      padding: 0 20px;

      .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(20px);
        padding: 14px 28px;
        border-radius: 50px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        margin-bottom: 35px;
        font-weight: 600;
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: white;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-2px);
          background: rgba(255, 255, 255, 0.2);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        i {
          font-size: 18px;
          color: #ffd700;
        }
      }

      .hero-title {
        font-size: 4rem;
        font-weight: 800;
        margin-bottom: 30px;
        line-height: 1.1;
        color: white;
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

        .gradient-text {
          background: linear-gradient(135deg, #ffd700, #ffed4e, #ffd700);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          animation: shimmer 3s ease-in-out infinite;
        }
      }

      .hero-description {
        font-size: 1.3rem;
        line-height: 1.7;
        margin-bottom: 35px;
        color: rgba(255, 255, 255, 0.9);
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
        font-weight: 400;
      }

      .announcement-date {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(20px);
        padding: 14px 28px;
        border-radius: 50px;
        font-size: 15px;
        font-weight: 500;
        border: 1px solid rgba(255, 215, 0, 0.3);
        color: #ffd700;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-2px);
          background: rgba(0, 0, 0, 0.3);
          box-shadow: 0 8px 25px rgba(255, 215, 0, 0.2);
        }

        i {
          color: #ffd700;
        }
      }
    }
  }

  /* Winners Section - Modern Card Design */
  .winners-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;

    &::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"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(0,79,78,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
      opacity: 0.6;
    }

    .section-header {
      text-align: center;
      margin-bottom: 80px;
      position: relative;
      z-index: 2;

      h2 {
        font-size: 3.2rem;
        font-weight: 900;
        background: linear-gradient(135deg, #004f4e, #f73b28);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 20px;
        line-height: 1.1;
      }

      p {
        font-size: 1.2rem;
        color: #666;
        max-width: 600px;
        margin: 0 auto;
        line-height: 1.6;
        font-weight: 400;
      }
    }

    .winners-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
      gap: 40px;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 20px;
      position: relative;
      z-index: 2;

      .winner-card {
        background: linear-gradient(
          135deg,
          #ffffff 0%,
          #f8fafc 50%,
          #ffffff 100%
        );
        border-radius: 40px;
        padding: 0;
        box-shadow: 0 32px 100px rgba(0, 0, 0, 0.15),
          0 16px 40px rgba(0, 0, 0, 0.1), 0 8px 20px rgba(0, 0, 0, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.9),
          inset 0 -1px 0 rgba(0, 0, 0, 0.05);
        border: 3px solid transparent;
        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: 100%;
        backdrop-filter: blur(25px);
        transform: translateY(0);
        cursor: pointer;

        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 12px;
          background: linear-gradient(
            90deg,
            #004f4e,
            #f73b28,
            #ffd700,
            #f73b28,
            #004f4e
          );
          background-size: 300% 100%;
          animation: gradientShift 4s ease-in-out infinite;
          z-index: 1;
          border-radius: 40px 40px 0 0;
        }

        &::after {
          content: "";
          position: absolute;
          top: -50%;
          left: -50%;
          /* width: 200%;
          height: 200%; */
          background: radial-gradient(
            circle,
            rgba(247, 59, 40, 0.06) 0%,
            rgba(255, 215, 0, 0.03) 30%,
            transparent 70%
          );
          opacity: 0;
          transition: opacity 0.8s ease;
          z-index: 0;
        }

        &:hover {
          transform: translateY(-12px) scale(1.02);
          box-shadow: 0 40px 120px rgba(0, 0, 0, 0.2),
            0 20px 50px rgba(0, 0, 0, 0.15), 0 10px 25px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);

          &::after {
            opacity: 1;
          }
        }

        &.first-place {
          border: 4px solid transparent;
          background: linear-gradient(
                135deg,
                #ffffff 0%,
                #fffef7 50%,
                #ffffff 100%
              )
              padding-box,
            linear-gradient(135deg, #ffd700, #ffed4e, #ffd700, #ffed4e)
              border-box;
          box-shadow: 0 40px 120px rgba(255, 215, 0, 0.3),
            0 20px 50px rgba(255, 215, 0, 0.2),
            0 10px 25px rgba(255, 215, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.9),
            inset 0 -1px 0 rgba(255, 215, 0, 0.2);

          &::before {
            background: linear-gradient(
              90deg,
              #ffd700,
              #ffed4e,
              #ffd700,
              #ffed4e,
              #ffd700
            );
            background-size: 300% 100%;
            animation: gradientShift 2.5s ease-in-out infinite;
            height: 16px;
            border-radius: 40px 40px 0 0;
          }

          &::after {
            background: radial-gradient(
              circle,
              rgba(255, 215, 0, 0.08) 0%,
              rgba(255, 237, 78, 0.04) 30%,
              transparent 70%
            );
          }

          &:hover {
            transform: translateY(-15px) scale(1.03);
            box-shadow: 0 50px 140px rgba(255, 215, 0, 0.35),
              0 25px 60px rgba(255, 215, 0, 0.25),
              0 15px 30px rgba(255, 215, 0, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.9);
          }
        }

        &.second-place {
          border: 4px solid transparent;
          background: linear-gradient(
                135deg,
                #ffffff 0%,
                #f8fafc 50%,
                #ffffff 100%
              )
              padding-box,
            linear-gradient(135deg, #c0c0c0, #e8e8e8, #c0c0c0, #e8e8e8)
              border-box;
          box-shadow: 0 40px 120px rgba(192, 192, 192, 0.3),
            0 20px 50px rgba(192, 192, 192, 0.2),
            0 10px 25px rgba(192, 192, 192, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.9),
            inset 0 -1px 0 rgba(192, 192, 192, 0.2);

          &::before {
            background: linear-gradient(
              90deg,
              #c0c0c0,
              #e8e8e8,
              #c0c0c0,
              #e8e8e8,
              #c0c0c0
            );
            background-size: 300% 100%;
            animation: gradientShift 3s ease-in-out infinite;
            height: 16px;
            border-radius: 40px 40px 0 0;
          }

          &::after {
            background: radial-gradient(
              circle,
              rgba(192, 192, 192, 0.08) 0%,
              rgba(232, 232, 232, 0.04) 30%,
              transparent 70%
            );
          }

          &:hover {
            transform: translateY(-12px) scale(1.02);
            box-shadow: 0 45px 130px rgba(192, 192, 192, 0.35),
              0 22px 55px rgba(192, 192, 192, 0.25),
              0 12px 28px rgba(192, 192, 192, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.9);
          }
        }

        &.third-place {
          border: 4px solid transparent;
          background: linear-gradient(
                135deg,
                #ffffff 0%,
                #fff8f0 50%,
                #ffffff 100%
              )
              padding-box,
            linear-gradient(135deg, #cd7f32, #daa520, #cd7f32, #daa520)
              border-box;
          box-shadow: 0 40px 120px rgba(205, 127, 50, 0.3),
            0 20px 50px rgba(205, 127, 50, 0.2),
            0 10px 25px rgba(205, 127, 50, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.9),
            inset 0 -1px 0 rgba(205, 127, 50, 0.2);

          &::before {
            background: linear-gradient(
              90deg,
              #cd7f32,
              #daa520,
              #cd7f32,
              #daa520,
              #cd7f32
            );
            background-size: 300% 100%;
            animation: gradientShift 3.5s ease-in-out infinite;
            height: 16px;
            border-radius: 40px 40px 0 0;
          }

          &::after {
            background: radial-gradient(
              circle,
              rgba(205, 127, 50, 0.08) 0%,
              rgba(218, 165, 32, 0.04) 30%,
              transparent 70%
            );
          }

          &:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 42px 125px rgba(205, 127, 50, 0.35),
              0 21px 52px rgba(205, 127, 50, 0.25),
              0 11px 26px rgba(205, 127, 50, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.9);
          }
        }

        /* Card Header */
        .card-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px 24px 16px;
          background: linear-gradient(
            135deg,
            #f8f9fa 0%,
            #ffffff 50%,
            #f8f9fa 100%
          );
          border-bottom: 2px solid rgba(0, 0, 0, 0.06);
          position: relative;
          z-index: 2;
          border-radius: 40px 40px 0 0;

          &::before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(
              90deg,
              transparent,
              rgba(0, 79, 78, 0.3),
              rgba(247, 59, 40, 0.3),
              rgba(0, 79, 78, 0.3),
              transparent
            );
            background-size: 200% 100%;
            animation: gradientShift 4s ease-in-out infinite;
          }

          &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(
              circle at 50% 0%,
              rgba(255, 255, 255, 0.8) 0%,
              transparent 70%
            );
            pointer-events: none;
          }

          .position-indicator {
            display: flex;
            align-items: center;
            gap: 20px;
            position: relative;
            z-index: 3;

            .position-number {
              width: 64px;
              height: 64px;
              border-radius: 50%;
              background: linear-gradient(135deg, #004f4e, #006b6a, #004f4e);
              color: white;
              display: flex;
              align-items: center;
              justify-content: center;
              font-weight: 900;
              font-size: 24px;
              box-shadow: 0 12px 30px rgba(0, 79, 78, 0.5),
                0 6px 15px rgba(0, 79, 78, 0.3),
                inset 0 2px 0 rgba(255, 255, 255, 0.3),
                inset 0 -2px 0 rgba(0, 0, 0, 0.2);
              position: relative;
              transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
              border: 3px solid rgba(255, 255, 255, 0.2);
              display: none;

              &::before {
                content: "";
                position: absolute;
                top: -3px;
                left: -3px;
                right: -3px;
                bottom: -3px;
                border-radius: 50%;
                background: linear-gradient(
                  45deg,
                  #ffd700,
                  #f73b28,
                  #004f4e,
                  #ffd700
                );
                background-size: 300% 300%;
                animation: gradientShift 3s ease-in-out infinite;
                z-index: -1;
                opacity: 0;
                transition: opacity 0.3s ease;
              }

              &:hover {
                transform: scale(1.1);
                box-shadow: 0 12px 30px rgba(0, 79, 78, 0.5),
                  inset 0 1px 0 rgba(255, 255, 255, 0.3);

                &::before {
                  opacity: 1;
                }
              }
            }

            .position-medal {
              font-size: 46px;
              color: #004f4e;
              animation: bounce 2s infinite;
              filter: drop-shadow(0 2px 4px rgba(0, 79, 78, 0.2));
            }
          }

          .prize-display {
            text-align: right;
            position: relative;
            z-index: 3;

            .prize-amount {
              display: block;
              font-size: 2.8rem;
              font-weight: 900;
              background: linear-gradient(
                135deg,
                #004f4e,
                #f73b28,
                #ffd700,
                #f73b28
              );
              background-size: 200% 200%;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
              line-height: 1;
              text-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
              position: relative;
              animation: gradientShift 3s ease-in-out infinite;
              filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));

              &::before {
                content: "";
                position: absolute;
                top: -8px;
                left: -8px;
                right: -8px;
                bottom: -8px;
                background: linear-gradient(
                  45deg,
                  #ffd700,
                  #f73b28,
                  #004f4e,
                  #ffd700
                );
                background-size: 300% 300%;
                animation: gradientShift 4s ease-in-out infinite;
                z-index: -1;
                opacity: 0;
                transition: opacity 0.3s ease;
                border-radius: 12px;
              }

              &::after {
                content: "";
                position: absolute;
                bottom: -6px;
                left: 0;
                right: 0;
                height: 2px;
                background: linear-gradient(90deg, #004f4e, #f73b28);
                border-radius: 1px;
                opacity: 0.6;
              }
            }

            .prize-label {
              font-size: 12px;
              color: #666;
              text-transform: uppercase;
              letter-spacing: 1.5px;
              font-weight: 700;
              margin-top: 4px;
            }
          }
        }

        /* Winner Profile Section */
        .winner-profile-section {
          padding: 24px 20px;
          text-align: center;
          background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
          position: relative;
          z-index: 2;

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(
              circle at 50% 0%,
              rgba(255, 255, 255, 0.6) 0%,
              transparent 70%
            );
            pointer-events: none;
          }

          .avatar-container {
            position: relative;
            display: inline-block;
            margin-bottom: 20px;

            .winner-avatar {
              width: 100px;
              height: 100px;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 2rem;
              font-weight: 800;
              color: white;
              text-transform: uppercase;
              letter-spacing: 1.5px;
              position: relative;
              z-index: 2;
              transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
              box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2),
                0 8px 20px rgba(0, 0, 0, 0.15),
                inset 0 2px 0 rgba(255, 255, 255, 0.3),
                inset 0 -2px 0 rgba(0, 0, 0, 0.2);
              border: 4px solid rgba(255, 255, 255, 0.3);

              &.first-place-avatar {
                background: linear-gradient(135deg, #ffd700, #ffed4e, #ffd700);
                color: #004f4e;
                box-shadow: 0 20px 40px rgba(255, 215, 0, 0.5),
                  0 10px 25px rgba(255, 215, 0, 0.3),
                  inset 0 2px 0 rgba(255, 255, 255, 0.4),
                  inset 0 -2px 0 rgba(0, 0, 0, 0.2);
                border: 4px solid rgba(255, 215, 0, 0.6);
                animation: pulse 2s ease-in-out infinite;
              }

              &.second-place-avatar {
                background: linear-gradient(135deg, #c0c0c0, #e8e8e8, #c0c0c0);
                color: #004f4e;
                box-shadow: 0 18px 38px rgba(192, 192, 192, 0.5),
                  0 9px 23px rgba(192, 192, 192, 0.3),
                  inset 0 2px 0 rgba(255, 255, 255, 0.4),
                  inset 0 -2px 0 rgba(0, 0, 0, 0.2);
                border: 4px solid rgba(192, 192, 192, 0.6);
              }

              &.third-place-avatar {
                background: linear-gradient(135deg, #cd7f32, #daa520, #cd7f32);
                color: white;
                box-shadow: 0 18px 38px rgba(205, 127, 50, 0.5),
                  0 9px 23px rgba(205, 127, 50, 0.3),
                  inset 0 2px 0 rgba(255, 255, 255, 0.4),
                  inset 0 -2px 0 rgba(0, 0, 0, 0.2);
                border: 4px solid rgba(205, 127, 50, 0.6);
              }
            }

            .avatar-ring {
              position: absolute;
              top: -6px;
              left: -6px;
              right: -6px;
              bottom: -6px;
              border-radius: 50%;
              background: linear-gradient(
                45deg,
                #004f4e,
                #f73b28,
                #ffd700,
                #004f4e
              );
              background-size: 300% 300%;
              z-index: 1;
              opacity: 0;
              transition: opacity 0.5s ease;
              animation: gradientShift 3s ease-in-out infinite;
              filter: blur(1px);

              &::before {
                content: "";
                position: absolute;
                top: 2px;
                left: 2px;
                right: 2px;
                bottom: 2px;
                border-radius: 50%;
                background: linear-gradient(
                  45deg,
                  #ffd700,
                  #f73b28,
                  #004f4e,
                  #ffd700
                );
                background-size: 300% 300%;
                animation: gradientShift 2s ease-in-out infinite reverse;
              }
            }

            &:hover {
              .winner-avatar {
                transform: scale(1.08) rotate(5deg);
                box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3),
                  0 12px 25px rgba(0, 0, 0, 0.2),
                  inset 0 2px 0 rgba(255, 255, 255, 0.5),
                  inset 0 -2px 0 rgba(0, 0, 0, 0.3);
              }

              .avatar-ring {
                opacity: 0.8;
                transform: scale(1.1);
                filter: blur(0.5px);
              }
            }
          }

          .winner-details {
            position: relative;
            z-index: 2;

            .winner-name {
              font-size: 1.6rem;
              font-weight: 800;
              background: linear-gradient(135deg, #004f4e, #006b6a, #004f4e);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
              margin-bottom: 8px;
              text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
              letter-spacing: 0.5px;
              line-height: 1.3;
            }

            .winner-location {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 6px;
              color: #666;
              font-size: 14px;
              margin-bottom: 16px;
              font-weight: 500;

              i {
                color: #f73b28;
                font-size: 12px;
              }
            }

            .instagram-link {
              display: inline-flex;
              align-items: center;
              gap: 8px;
              color: #e1306c;
              text-decoration: none;
              font-weight: 600;
              font-size: 14px;
              padding: 8px 16px;
              border-radius: 20px;
              background: rgba(225, 48, 108, 0.1);
              border: 1px solid rgba(225, 48, 108, 0.2);
              transition: all 0.3s ease;

              &:hover {
                color: white;
                background: linear-gradient(135deg, #e1306c, #c13584);
                transform: translateY(-2px);
                box-shadow: 0 6px 20px rgba(225, 48, 108, 0.3);
              }

              i {
                font-size: 16px;
              }
            }
          }
        }

        /* Stats Grid */
        .stats-grid {
          display: grid;
          /* grid-template-columns: 1fr 1fr; */
          gap: 2px;
          background: linear-gradient(
            135deg,
            rgba(0, 0, 0, 0.08),
            rgba(0, 0, 0, 0.12)
          );
          margin: 0 20px;
          border-radius: 16px;
          overflow: hidden;
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
            0 4px 12px rgba(0, 0, 0, 0.1);

          .stat-item {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            padding: 16px 12px;
            text-align: center;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            border: 1px solid rgba(255, 255, 255, 0.5);

            &::before {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background: linear-gradient(
                135deg,
                rgba(247, 59, 40, 0.03),
                rgba(0, 79, 78, 0.03)
              );
              opacity: 0;
              transition: opacity 0.3s ease;
            }

            &:hover {
              background: linear-gradient(
                135deg,
                #ffffff 0%,
                #f8f9fa 50%,
                #ffffff 100%
              );
              transform: translateY(-4px) scale(1.02);
              box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15),
                0 4px 12px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);

              &::before {
                opacity: 1;
              }
            }

            .stat-icon {
              width: 32px;
              height: 32px;
              border-radius: 10px;
              background: linear-gradient(135deg, #f73b28, #ff6b47, #f73b28);
              color: white;
              display: flex;
              align-items: center;
              justify-content: center;
              margin: 0 auto 10px;
              font-size: 14px;
              box-shadow: 0 6px 16px rgba(247, 59, 40, 0.4),
                0 3px 8px rgba(247, 59, 40, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
              transition: all 0.3s ease;
              position: relative;
              z-index: 2;

              &::before {
                content: "";
                position: absolute;
                top: -2px;
                left: -2px;
                right: -2px;
                bottom: -2px;
                border-radius: 14px;
                background: linear-gradient(
                  45deg,
                  #ffd700,
                  #f73b28,
                  #004f4e,
                  #ffd700
                );
                background-size: 300% 300%;
                animation: gradientShift 3s ease-in-out infinite;
                z-index: -1;
                opacity: 0;
                transition: opacity 0.3s ease;
              }
            }

            .stat-value {
              font-size: 1.4rem;
              font-weight: 900;
              background: linear-gradient(135deg, #004f4e, #006b6a, #004f4e);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
              margin-bottom: 4px;
              line-height: 1;
              text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
              position: relative;
              z-index: 2;
            }

            .stat-label {
              font-size: 0.75rem;
              font-weight: 600;
              color: #666;
              text-transform: uppercase;
              letter-spacing: 0.6px;
              position: relative;
              z-index: 2;
            }

            &:hover {
              .stat-icon {
                transform: scale(1.1) rotate(5deg);
                box-shadow: 0 8px 20px rgba(247, 59, 40, 0.5),
                  0 4px 10px rgba(247, 59, 40, 0.3),
                  inset 0 1px 0 rgba(255, 255, 255, 0.4);

                &::before {
                  opacity: 0.6;
                }
              }
            }
          }
        }

        /* Card Actions */
        .card-actions {
          padding: 20px;
          margin-top: auto;
          background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
          border-radius: 0 0 40px 40px;
          position: relative;
          z-index: 2;

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(
              90deg,
              transparent,
              rgba(0, 79, 78, 0.2),
              rgba(247, 59, 40, 0.2),
              rgba(0, 79, 78, 0.2),
              transparent
            );
          }

          .view-post-btn {
            width: 100%;
            padding: 14px 20px;
            background: linear-gradient(135deg, #004f4e, #006b6a, #004f4e);
            background-size: 200% 200%;
            color: white;
            text-decoration: none;
            border-radius: 14px;
            font-weight: 700;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 25px rgba(0, 79, 78, 0.4),
              0 4px 12px rgba(0, 79, 78, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
            border: 2px solid rgba(255, 255, 255, 0.1);
            animation: gradientShift 4s ease-in-out infinite;

            &::before {
              content: "";
              position: absolute;
              top: 0;
              left: -100%;
              width: 100%;
              height: 100%;
              background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.2),
                transparent
              );
              transition: left 0.5s ease;
            }

            &:hover {
              background: linear-gradient(135deg, #006b6a, #004f4e, #006b6a);
              background-size: 200% 200%;
              transform: translateY(-4px) scale(1.02);
              box-shadow: 0 12px 35px rgba(0, 79, 78, 0.5),
                0 6px 18px rgba(0, 79, 78, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);

              &::before {
                left: 100%;
              }

              i {
                transform: translateX(4px);
              }
            }

            i {
              font-size: 12px;
              transition: transform 0.3s ease;
            }
          }
        }
      }
    }
  }

  /* Statistics Section - Clean Grid */
  .stats-section {
    padding: 120px 0;
    background: linear-gradient(135deg, #004f4e 0%, #006b6a 100%);
    color: white;
    position: relative;
    z-index: 2;

    .section-header {
      text-align: center;
      margin-bottom: 80px;

      h2 {
        font-size: 3.5rem;
        font-weight: 800;
        margin-bottom: 25px;
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      }

      p {
        font-size: 1.3rem;
        opacity: 0.9;
        max-width: 700px;
        margin: 0 auto;
        line-height: 1.7;
      }
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 40px;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;

      .stat-card {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 25px;
        padding: 50px 30px;
        text-align: center;
        transition: all 0.4s ease;
        position: relative;
        overflow: hidden;

        &:hover {
          transform: translateY(-10px);
          background: rgba(255, 255, 255, 0.15);
          box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
        }

        .stat-icon {
          width: 80px;
          height: 80px;
          background: linear-gradient(135deg, #ffd700, #ffed4e);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 25px;
          font-size: 32px;
          color: #004f4e;
          transition: all 0.3s ease;
        }

        .stat-number {
          font-size: 3rem;
          font-weight: 900;
          margin-bottom: 15px;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .stat-label {
          font-size: 16px;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 1.5px;
          opacity: 0.9;
        }
      }
    }
  }

  /* Thank You Section - Clean & Elegant */
  .thank-you-section {
    padding: 120px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    text-align: center;
    position: relative;
    z-index: 2;

    .thank-you-content {
      max-width: 900px;
      margin: 0 auto;
      padding: 0 20px;

      h2 {
        font-size: 3.5rem;
        font-weight: 800;
        color: #004f4e;
        margin-bottom: 40px;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          bottom: -15px;
          left: 50%;
          transform: translateX(-50%);
          width: 100px;
          height: 4px;
          background: linear-gradient(135deg, #f73b28, #e6341a);
          border-radius: 2px;
        }
      }

      p {
        font-size: 1.3rem;
        color: #666;
        line-height: 1.8;
        margin-bottom: 25px;
        font-weight: 400;

        &:last-of-type {
          margin-bottom: 50px;
        }
      }

      .cta-buttons {
        display: flex;
        gap: 30px;
        justify-content: center;
        flex-wrap: wrap;

        .cta-button {
          display: inline-flex;
          align-items: center;
          gap: 12px;
          padding: 18px 36px;
          border-radius: 50px;
          text-decoration: none;
          font-weight: 700;
          font-size: 16px;
          transition: all 0.3s ease;
          text-transform: uppercase;
          letter-spacing: 1px;

          &.primary {
            background: linear-gradient(135deg, #f73b28, #e6341a);
            color: white;
            box-shadow: 0 10px 30px rgba(247, 59, 40, 0.3);

            &:hover {
              transform: translateY(-3px);
              box-shadow: 0 15px 40px rgba(247, 59, 40, 0.4);
            }
          }

          &.secondary {
            background: transparent;
            color: #004f4e;
            border: 2px solid #004f4e;

            &:hover {
              background: #004f4e;
              color: white;
              transform: translateY(-3px);
            }
          }

          i {
            font-size: 18px;
          }
        }
      }
    }
  }

  /* Social Media Section - Clean Cards */
  .social-media-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #004f4e 0%, #006b6a 100%);
    color: white;
    position: relative;
    z-index: 2;

    .section-header {
      text-align: center;
      margin-bottom: 80px;

      h2 {
        font-size: 3rem;
        font-weight: 800;
        margin-bottom: 25px;
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      }

      p {
        font-size: 1.3rem;
        opacity: 0.9;
        max-width: 600px;
        margin: 0 auto;
        line-height: 1.7;
      }
    }

    .social-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 40px;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;

      .social-card {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 25px;
        padding: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: all 0.4s ease;

        &:hover {
          transform: translateY(-8px);
          background: rgba(255, 255, 255, 0.15);
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
        }

        .social-profile {
          display: flex;
          align-items: center;
          gap: 20px;

          img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 3px solid rgba(255, 255, 255, 0.3);
            transition: all 0.3s ease;
          }

          .profile-details {
            h4 {
              font-size: 1.3rem;
              font-weight: 700;
              margin-bottom: 8px;
            }

            p {
              font-size: 16px;
              opacity: 0.8;
              margin: 0;
            }
          }
        }

        .follow-button {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          padding: 16px 32px;
          background: linear-gradient(135deg, #e1306c, #c13584);
          color: white;
          text-decoration: none;
          border-radius: 50px;
          font-weight: 700;
          font-size: 16px;
          transition: all 0.3s ease;

          &:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(225, 48, 108, 0.4);
          }

          i {
            font-size: 18px;
          }
        }
      }
    }
  }
}

/* Animations */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

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

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes shine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* ===========================================
   MOBILE RESPONSIVENESS FOR WINNER CARDS
   =========================================== */

@media (max-width: 768px) {
  .challenge-winners-page {
    .winners-container {
      grid-template-columns: 1fr;
      gap: 24px;
      padding: 0 16px;
    }

    .winner-card {
      border-radius: 32px;

      .card-header {
        padding: 18px 16px 14px;
        flex-direction: column;
        gap: 12px;
        text-align: center;

        .position-indicator {
          justify-content: center;

          .position-number {
            width: 48px;
            height: 48px;
            font-size: 18px;
          }
        }

        .prize-display {
          text-align: center;

          .prize-amount {
            font-size: 1.8rem;
          }
        }
      }

      .winner-profile-section {
        padding: 20px 16px;

        .avatar-container {
          .winner-avatar {
            width: 80px;
            height: 80px;
            font-size: 1.6rem;
          }
        }

        .winner-details {
          .winner-name {
            font-size: 1.4rem;
          }
        }
      }

      .stats-grid {
        margin: 0 16px;
        grid-template-columns: 1fr 1fr;
        gap: 1px;

        .stat-item {
          padding: 14px 12px;

          .stat-icon {
            width: 28px;
            height: 28px;
            font-size: 12px;
            margin-bottom: 8px;
          }

          .stat-value {
            font-size: 1.2rem;
          }

          .stat-label {
            font-size: 0.7rem;
          }
        }
      }

      .card-actions {
        padding: 16px;

        .view-post-btn {
          padding: 12px 16px;
          font-size: 13px;
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .challenge-winners-page {
    .winners-container {
      gap: 20px;
      padding: 0 12px;
    }

    .winner-card {
      border-radius: 28px;

      .card-header {
        padding: 16px 12px 12px;

        .position-indicator {
          .position-number {
            width: 40px;
            height: 40px;
            font-size: 16px;
          }
        }

        .prize-display {
          .prize-amount {
            font-size: 1.5rem;
          }
        }
      }

      .winner-profile-section {
        padding: 18px 12px;

        .avatar-container {
          .winner-avatar {
            width: 70px;
            height: 70px;
            font-size: 1.4rem;
          }
        }

        .winner-details {
          .winner-name {
            font-size: 1.2rem;
          }
        }
      }

      .stats-grid {
        margin: 0 12px;

        .stat-item {
          padding: 12px 8px;

          .stat-icon {
            width: 24px;
            height: 24px;
            font-size: 10px;
            margin-bottom: 6px;
          }

          .stat-value {
            font-size: 1.1rem;
          }

          .stat-label {
            font-size: 0.65rem;
          }
        }
      }

      .card-actions {
        padding: 12px;

        .view-post-btn {
          padding: 10px 12px;
          font-size: 12px;
        }
      }
    }
  }
}