@charset "UTF-8";
/* CSS Document */

/* =========================================
   CATERING
   ========================================= */

.catering {
  position: relative;
  padding-top: 120px;
  padding-bottom: 120px;
  background:
    linear-gradient(
      180deg,
      rgba(247, 243, 238, 1) 0%,
      rgba(255, 253, 249, 1) 100%
    );
  overflow: hidden;
}

.catering:before {
  content: "";
  position: absolute;
  top: -120px;
  left: -120px;
  width: 320px;
  height: 320px;
  background-color: var(--alpine-lake-blue);
  border-radius: 50%;
  opacity: 0.07;
}

.catering:after {
  content: "";
  position: absolute;
  bottom: -140px;
  right: -120px;
  width: 300px;
  height: 300px;
  background-color: var(--sunrise-coral);
  border-radius: 50%;
  opacity: 0.07;
}

.catering .container {
  position: relative;
  z-index: 2;
}

.catering .section-heading {
  max-width: 860px;
  margin: 0 auto 58px;
  text-align: center;
}

/* =========================================
   GRID
   ========================================= */

.catering-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 42px;
}

/* =========================================
   CARD
   ========================================= */

.catering-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(247, 243, 238, 0.92) 100%
    );
  border: 1px solid rgba(31, 108, 139, 0.12);
  box-shadow: 0 18px 40px rgba(16, 37, 35, 0.10);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  overflow: hidden;
}

.catering-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 52px rgba(16, 37, 35, 0.14);
  border-color: rgba(31, 108, 139, 0.2);
}

.catering-card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  z-index: 2;
}

.catering-card:nth-child(1):before {
  background: linear-gradient(
    90deg,
    var(--summit-teal) 0%,
    var(--wildflower-purple) 100%
  );
}

.catering-card:nth-child(2):before {
  background: linear-gradient(
    90deg,
    var(--alpine-lake-blue) 0%,
    var(--summit-teal) 100%
  );
}

.catering-card:nth-child(3):before {
  background: linear-gradient(
    90deg,
    var(--sunrise-coral) 0%,
    var(--golden-wheat) 100%
  );
}

.catering-card:nth-child(4):before {
  background: linear-gradient(
    90deg,
    var(--golden-wheat) 0%,
    var(--sunrise-coral) 100%
  );
}

/* =========================================
   IMAGE
   ========================================= */

.catering-thumb {
  position: relative;
  width: 100%;
  height: 210px;
  overflow: hidden;
  background-color: var(--cream);
}

.catering-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.5s ease;
}

.catering-card:hover .catering-thumb img {
  transform: scale(1.04);
}

/* =========================================
   TEXT
   ========================================= */

.catering-card h3 {
  margin: 0;
  padding: 22px 22px 10px;
  color: var(--forest-shadow);
  font-size: 22px;
  line-height: 1.2;
}

.catering-card p {
  margin: 0;
  padding: 0 22px 22px;
  color: var(--charcoal);
  font-size: 15px;
  line-height: 1.7;
}

/* =========================================
   CTA
   ========================================= */

.catering-cta {
  text-align: center;
}

.catering-cta .btn {
  box-shadow: 0 16px 34px rgba(16, 37, 35, 0.14);
}

/* =========================================
   1920
   ========================================= */

@media screen and (max-width: 1920px) {
  .catering {
    padding-top: 116px;
    padding-bottom: 116px;
  }

  .catering .section-heading {
    max-width: 820px;
    margin-bottom: 52px;
  }

  .catering-grid {
    gap: 22px;
    margin-bottom: 38px;
  }

  .catering-thumb {
    height: 198px;
  }

  .catering-card h3 {
    padding: 20px 20px 8px;
    font-size: 21px;
    line-height: 1.22;
  }

  .catering-card p {
    padding: 0 20px 20px;
    font-size: 14px;
    line-height: 1.66;
  }

  .catering:before {
    top: -110px;
    left: -110px;
    width: 290px;
    height: 290px;
  }

  .catering:after {
    bottom: -120px;
    right: -100px;
    width: 270px;
    height: 270px;
  }
}

/* =========================================
   1400
   ========================================= */

@media screen and (max-width: 1400px) {
  .catering-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }

  .catering-thumb {
    height: 230px;
  }
}

/* =========================================
   1200
   ========================================= */

@media screen and (max-width: 1200px) {
  .catering {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .catering .section-heading {
    max-width: 760px;
    margin-bottom: 46px;
  }

  .catering-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 36px;
  }

  .catering-card {
    border-radius: calc(var(--radius-lg) - 1px);
  }

  .catering-thumb {
    height: 210px;
  }

  .catering-card h3 {
    padding: 20px 20px 8px;
    font-size: 20px;
    line-height: 1.22;
  }

  .catering-card p {
    padding: 0 20px 20px;
    font-size: 14px;
    line-height: 1.62;
  }

  .catering:before {
    top: -95px;
    left: -95px;
    width: 250px;
    height: 250px;
  }

  .catering:after {
    bottom: -105px;
    right: -95px;
    width: 230px;
    height: 230px;
  }
}

/* =========================================
   900
   ========================================= */

@media screen and (max-width: 900px) {
  .catering {
    padding-top: 90px;
    padding-bottom: 90px;
  }

  .catering .section-heading {
    max-width: 100%;
    margin-bottom: 40px;
  }

  .catering-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 32px;
  }

  .catering-thumb {
    height: 260px;
  }

  .catering-card h3 {
    padding: 20px 20px 8px;
    font-size: 20px;
    line-height: 1.24;
  }

  .catering-card p {
    padding: 0 20px 20px;
    font-size: 14px;
    line-height: 1.6;
  }

  .catering-cta .btn {
    width: auto;
    max-width: 100%;
  }

  .catering:before {
    top: -82px;
    left: -82px;
    width: 205px;
    height: 205px;
  }

  .catering:after {
    bottom: -88px;
    right: -78px;
    width: 185px;
    height: 185px;
  }
}

/* =========================================
   768
   ========================================= */

@media screen and (max-width: 768px) {
  .catering {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .catering .section-heading {
    margin-bottom: 36px;
  }

  .catering-grid {
    gap: 16px;
    margin-bottom: 30px;
  }

  .catering-thumb {
    height: 230px;
  }

  .catering-card h3 {
    padding: 18px 18px 8px;
    font-size: 19px;
  }

  .catering-card p {
    padding: 0 18px 18px;
    font-size: 14px;
    line-height: 1.58;
  }
}

/* =========================================
   600
   ========================================= */

@media screen and (max-width: 600px) {
  .catering {
    padding-top: 78px;
    padding-bottom: 78px;
  }

  .catering .section-heading {
    margin-bottom: 32px;
  }

  .catering-grid {
    gap: 14px;
    margin-bottom: 26px;
  }

  .catering-thumb {
    height: 200px;
  }

  .catering-card {
    border-radius: calc(var(--radius-lg) - 2px);
  }

  .catering-card h3 {
    padding: 17px 16px 8px;
    font-size: 18px;
    line-height: 1.24;
  }

  .catering-card p {
    padding: 0 16px 16px;
    font-size: 14px;
    line-height: 1.56;
  }

  .catering-cta .btn {
    width: 100%;
  }

  .catering:before {
    top: -62px;
    left: -62px;
    width: 150px;
    height: 150px;
  }

  .catering:after {
    bottom: -70px;
    right: -62px;
    width: 140px;
    height: 140px;
  }
}

/* =========================================
   480
   ========================================= */

@media screen and (max-width: 480px) {
  .catering {
    padding-top: 74px;
    padding-bottom: 74px;
  }

  .catering .section-heading {
    margin-bottom: 30px;
  }

  .catering-thumb {
    height: 180px;
  }

  .catering-card h3 {
    padding: 16px 15px 8px;
    font-size: 17px;
  }

  .catering-card p {
    padding: 0 15px 15px;
    font-size: 13px;
    line-height: 1.52;
  }
}

/* =========================================
   360
   ========================================= */

@media screen and (max-width: 300px) {
  .catering {
    padding-top: 30px;
    padding-bottom: 66px;
  }

  .catering .section-heading {
    margin-bottom: 24px;
  }

  .catering-grid {
    gap: 12px;
    margin-bottom: 22px;
  }

  .catering-thumb {
    height: 155px;
  }

  .catering-card {
    border-radius: calc(var(--radius-lg) - 3px);
  }

  .catering-card h3 {
    padding: 14px 12px 6px;
    font-size: 16px;
  }

  .catering-card p {
    padding: 0 12px 14px;
    font-size: 12px;
    line-height: 1.46;
  }

  .catering:before {
    top: -44px;
    left: -44px;
    width: 105px;
    height: 105px;
    opacity: 0.06;
  }

  .catering:after {
    bottom: -46px;
    right: -44px;
    width: 100px;
    height: 100px;
    opacity: 0.06;
  }
}

/* =========================================
   300
   ========================================= */

@media screen and (max-width: 300px) {
  .catering {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .catering .section-heading {
    margin-bottom: 20px;
  }

  .catering-grid {
    gap: 10px;
    margin-bottom: 20px;
  }

  .catering-thumb {
    height: 135px;
  }

  .catering-card {
    border-radius: calc(var(--radius-lg) - 4px);
  }

  .catering-card h3 {
    padding: 12px 10px 6px;
    font-size: 14px;
  }

  .catering-card p {
    padding: 0 10px 12px;
    font-size: 12px;
    line-height: 1.42;
  }

  .catering:before {
    top: -40px;
    left: -40px;
    width: 95px;
    height: 95px;
    opacity: 0.06;
  }

  .catering:after {
    bottom: -42px;
    right: -40px;
    width: 90px;
    height: 90px;
    opacity: 0.06;
  }
}