@media (max-width: 1020px) {
  :root {
    --contentPadding: 20px;
    --extraPadding: 60px;
  }
}

#full-service h1 {
  margin: 0 0 var(--contentPadding, 50px);
}
#full-service > div {
  background: transparent linear-gradient(43deg, #ffc612 0%, 54%, #ffe8a1 80%);
  background-position: center center;
  border-radius: var(--extraPadding, 80px) 0;
}
#full-service ul {
  list-style: none;
  display: grid;
  align-items: stretch;
  align-content: center;
  justify-content: center;
  justify-items: stretch;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--contentPadding, 50px);
  max-width: 850px;
  margin: 0 auto;
  padding: 0;
}
@media (max-width: 600px) {
  #full-service ul {
    grid-template-columns: 1fr;
    max-width: 400px;
  }
}
#full-service ul li {
  margin: 0;
  padding: var(--contentPadding, 50px);
  background: #00b9f1;
  color: #0d1c4f;
  box-sizing: border-box;
}
#full-service ul li:first-child {
  border-top-left-radius: 50px;
}
#full-service ul li:last-child {
  border-bottom-right-radius: 50px;
}
#full-service ul li h4, #full-service ul li p {
  margin: 0;
  text-align: center;
}
#full-service ul li h4 {
  margin-bottom: 1rem;
}

@media (min-width: 1401px) {
  :root {
    --promoHeroOverlap: 120px;
  }
}

:root {
  --headerOverlap: calc(var(--contentPadding, 50px) * 2.5 + 36px);
}

body.page-promo #container > header, body.page-promo #container > footer {
  z-index: 6;
}
body.page-promo main {
  margin-top: calc(var(--headerOverlap) * -1);
}

#promo-carousel > header {
  position: absolute;
  top: var(--headerOverlap);
  left: 0;
  width: 100%;
  padding: 0 var(--contentPadding, 50px);
  z-index: 2;
  box-sizing: border-box;
}
#promo-carousel > header h1, #promo-carousel > header p {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: #fff;
}
#promo-carousel > div {
  width: 700%;
  z-index: 1;
}
#promo-carousel > nav {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  left: 0;
  right: 0;
  bottom: var(--contentPadding, 50px);
  z-index: 3;
}
#promo-carousel > nav a {
  display: block;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
}
#promo-carousel > nav a:hover {
  background: #ededed;
}
#promo-carousel > nav a.active {
  background: #ffc612;
}
#promo-carousel section {
  margin: 0;
  padding: calc(var(--headerOverlap) + 150px) var(--contentPadding, 50px) var(--contentPadding, 50px);
}
#promo-carousel section::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 350px;
}
#promo-carousel section#example-sundara {
  background: radial-gradient(ellipse 250% 100% at bottom center, #4F8570, #344C41, #2B302E);
}
#promo-carousel section#example-sundara::before {
  background: radial-gradient(ellipse 150% 100% at 50% 80%, #344C41, #2B302E);
}
#promo-carousel section#example-skyhigh {
  background: radial-gradient(ellipse 250% 100% at bottom center, #2D6C8B, #1B2840);
}
#promo-carousel section#example-skyhigh::before {
  background: radial-gradient(ellipse 150% 100% at 50% 80%, #2D6C8B, #1B2840);
}
#promo-carousel section#example-athleisure {
  background: radial-gradient(ellipse 250% 100% at bottom center, #F1309C, #523064);
}
#promo-carousel section#example-athleisure::before {
  background: radial-gradient(ellipse 150% 100% at 50% 80%, #F1309C, #523064);
}
#promo-carousel section#example-soldout {
  background: radial-gradient(ellipse 250% 100% at bottom center, #7C93D3, #2D4FA1, #1D2858);
}
#promo-carousel section#example-soldout::before {
  background: radial-gradient(ellipse 150% 100% at 50% 80%, #2D4FA1, #1D2858);
}
#promo-carousel section#example-coast {
  background: radial-gradient(ellipse 250% 100% at bottom center, #96EAEB, #5957D4, #23253C);
}
#promo-carousel section#example-coast::before {
  background: radial-gradient(ellipse 150% 100% at 50% 80%, #5957D4, #23253C);
}
#promo-carousel section#example-sureguard {
  background: radial-gradient(ellipse 250% 100% at bottom center, #F26451, #ED1C24, #911518);
}
#promo-carousel section#example-sureguard::before {
  background: radial-gradient(ellipse 150% 100% at 50% 80%, #ED1C24, #911518);
}
#promo-carousel section#example-homecraft {
  background: radial-gradient(ellipse 250% 100% at bottom center, #686666, #272525);
}
#promo-carousel section#example-homecraft::before {
  background: radial-gradient(ellipse 150% 100% at 50% 80%, #686666, #272525);
}
#promo-carousel section > div {
  padding: var(--extraPadding, 80px) calc(var(--extraPadding, 80px) * 2) 0;
}
#promo-carousel section > div > picture {
  display: block;
  margin: 0 auto;
}
#promo-carousel section > div > picture img {
  display: block;
  width: 100%;
  height: auto;
}
#promo-carousel section > div > div {
  padding-top: var(--contentPadding, 50px);
}
#promo-carousel section > div > div p {
  color: #fff;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0 var(--contentPadding, 50px) 1rem;
}
#promo-carousel section > div > button {
  top: 30%;
}
@media (max-width: 1100px) {
  #promo-carousel section > div {
    padding-top: 150px;
  }
}
@media (max-width: 1020px) {
  #promo-carousel section > div {
    padding: 150px var(--extraPadding, 80px) 0;
  }
  #promo-carousel section > div > picture {
    max-width: 600px;
  }
  #promo-carousel section::before {
    height: 250px;
  }
}
@media (max-width: 800px) {
  #promo-carousel section {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (max-width: 500px) {
  #promo-carousel section > div {
    padding-top: 250px;
  }
  #promo-carousel section > div > button {
    top: 40%;
  }
  #promo-carousel section::before {
    height: 300px;
  }
}

#promo-amplify {
  margin: 0;
  padding: 0 var(--contentPadding, 50px) 0;
  overflow: hidden;
}
#promo-amplify::after {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--promoHeroOverlap, 10vw);
  background: linear-gradient(to bottom, #ededed, #fff);
  z-index: 1;
}
#promo-amplify h1 {
  font-size: 1.3rem;
  text-align: left;
}
#promo-amplify > div {
  display: grid;
  grid-template-columns: auto 300px;
  gap: 0 var(--contentPadding, 50px);
  align-items: center;
  justify-content: center;
  margin-top: var(--contentPadding, 50px);
  padding: 0 0 var(--promoHeroOverlap, 10vw);
  overflow: visible;
  z-index: 2;
}
#promo-amplify > div > picture {
  grid-row: 1/3;
  grid-column: 2;
  margin: calc(var(--extraPadding, 80px) * -1) 0 calc(var(--promoHeroOverlap, 10vw) * -1);
}
#promo-amplify > div > picture img {
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
  max-height: 90vh;
  object-fit: contain;
}
#promo-amplify > div > div {
  grid-row: 1;
  grid-column: 1;
}
#promo-amplify > div p, #promo-amplify > div > ul {
  max-width: 580px;
}
#promo-amplify > div > ul {
  grid-row: 2;
  grid-column: 1;
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
}
#promo-amplify > div > ul li {
  position: relative;
  display: block;
  margin: 1rem 0;
  padding: 0 0 0 0.75em;
}
#promo-amplify > div > ul li::before {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  top: 0.6em;
  width: 0;
  height: 0;
  border: 0.25em solid transparent;
  border-left: 0.5em solid #00b9f1;
}
@media (max-width: 800px) {
  #promo-amplify > div {
    grid-template-columns: auto;
    margin-top: 0;
    padding-top: 0;
  }
  #promo-amplify > div > picture, #promo-amplify > div > div, #promo-amplify > div > ul {
    grid-column: 1;
  }
  #promo-amplify > div > picture {
    grid-row: 2;
    margin: var(--contentPadding, 50px) auto;
  }
  #promo-amplify > div > picture img {
    max-height: 400px;
  }
  #promo-amplify > div > div {
    grid-row: 1;
  }
  #promo-amplify > div > ul {
    grid-row: 3;
  }
}

/*# sourceMappingURL=promo.css.map */