/* ==========================================
   Hero Section 
========================================== */

.hero-cta-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.center-cta {
  justify-content: center;
}

.hero-curved-line {
  position: absolute;
  top: 68%;
  left: calc(50% - 45vw);
  width: 90vw;
  max-width: none;
  transform: translateY(-68%);
  z-index: 0;
  pointer-events: none;
}

.cta-container {
  position: relative;
  flex-direction: column;
  display: flex;
  justify-items: start;
  justify-content: start;
  align-items: center;
  overflow: visible;
}

.curved-line {
  position: absolute;
  left: calc(5vw - 68vw);
  width: 90vw;
  top: 68%;
  transform: translateY(-68%);
  min-width: 0;
  max-width: none;
}

.curved-line-cta {
  z-index: 2;
}

/* ==========================================
   Solutions Scroller 
========================================== */

.solutions-section {
  position: relative;
  overflow-x: clip;
  margin: 0 auto;
}

.solutions-inner {
  width: min(100%, 1351px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.solutions-card {
  position: relative;
  isolation: isolate;
  gap: 230px;
  min-height: 320px;
  padding: clamp(28px, 5vw, 48px);
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.solutions-background {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 50%;
  right: 0;
  background-image: url("../images/scroller-Glow.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.oem-grid {
  gap: 50px;
}

/* ==========================================
   Lottie Files
========================================== */

.lottie-home-hero {
  margin-top: 150px;
}

/* ==========================================
   Logo Carousel 
========================================== */

.gs_logo_single {
  max-width: 325px;
  margin: 0 auto;
}

/* ==========================================
   Image Frames
========================================== */

.blog-post-frame,
.image-frame,
.green-frame,
.about-image-frame,
.bio-frame,
.vs-frame {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.green-frame::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: -3%;
  top: 8%;
  width: 103%;
  height: 103%;
  background: url("../images/green-frame.svg") left bottom / 100% 100% no-repeat;
  pointer-events: none;
}

.blog-post-frame img,
.green-frame img,
.bio-frame img,
.image-frame img,
.about-image-frame img,
.vs-frame img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
}

.solutions-frame,
.resources-frame {
  width: min(100%, 675px);
  margin-inline: auto;
  margin-top: 0;
  box-shadow: 0px 0px 20px rgba(255, 168, 0, 0);
  transition:
    box-shadow 0.3s ease,
    transform 0.35s ease;
  transform: translateY(0);
}

.solutions-frame-wide {
  position: relative;
  z-index: 1;
  width: 100%;
}

.solutions-frame-wide-content {
  position: relative;
  margin-left: auto;
}

.image-frame-wide img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
}

.solutions-frame img,
.resources-frame img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
}

.solutions-frame:hover,
.resources-frame:hover {
  box-shadow: 0px 0px 20px rgba(255, 168, 0, 0.8);
  transform: translateY(-20px);
}

.solutions-frame-content {
  padding-bottom: 0;
  transition: padding-bottom 0.5s ease;
}

.solutions-frame:hover .solutions-frame-content {
  padding-bottom: 20px;
}

.blog-post-frame::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: -3%;
  top: 8%;
  width: 103%;
  height: 108%;
  background: url("../images/frame.svg") left bottom / 100% 100% no-repeat;
  pointer-events: none;
}

.image-frame::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 20px 20px -20px -20px;
  width: 100%;
  background: url("../images/L-frame.svg") left bottom / 100% 100% no-repeat;
  pointer-events: none;
}

.vs-frame::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 60px 20px -60px -20px;
  width: 100%;
  background: url("../images/vs-frame.svg") left bottom / 100% 100% no-repeat;
  pointer-events: none;
}

.bio-frame::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 15px 10px -15px -10px;
  width: 100%;
  background: url("../images/green-bio-frame.svg") left bottom / 100% 100%
    no-repeat;
  pointer-events: none;
}

.about-image-frame::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 15px 20px -15px -20px;
  width: 100%;
  background: url("../images/about-frame.svg") left bottom / 100% 100% no-repeat;
  pointer-events: none;
}

.contact-form-frame::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 5% 2% -5% -2%;
  width: 100%;
  background: url("../images/form-frame.svg") left bottom / 100% 100% no-repeat;
  pointer-events: none;
}

.form-frame {
  position: relative;
}

.form-frame > *:not(.frame-decoration) {
  position: relative;
  z-index: 2;
}

.frame-decoration {
  position: absolute;
  top: 30px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background-image: url("../images/form-frame.svg");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% auto;
  pointer-events: none;
  z-index: 1;
}

.solutions-frame::before,
.resources-frame::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 20px 20px -20px -20px;
  width: 100%;
  background: url("../images/solutions-frame.svg") left bottom / 100% 100%
    no-repeat;
  pointer-events: none;
}

.solutions-frame-wide-wrapper {
  position: relative;
  width: 100%;
  overflow: visible;
}

.solutions-frame-wide-wrapper::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -20px;
  right: 20px;
  top: 50px;
  bottom: -20px;
  background: url("../images/wide-frame.svg") left bottom / 100% 100% no-repeat;
  pointer-events: none;
}

/* ==========================================
   Tablet Styles
========================================== */

@media (max-width: 1025px) {
  .solutions-frame-wide {
    aspect-ratio: auto;
    height: auto;
    min-height: 750px;
  }
  .vs-frame::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 30px 10px -30px -10px;
    width: 100%;
    background: url("../images/vs-frame.svg") left bottom / 100% 100% no-repeat;
    pointer-events: none;
  }
}

.contact-form-frame::before {
  content: "";
  display: none;
}

.hero-curved-line {
  position: absolute;
  top: 68%;
  left: calc(50% - 47.5vw);
  width: 95vw;
  max-width: none;
  transform: translateY(-68%);
  z-index: 0;
  pointer-events: none;
}

/* ==========================================
   Mobile Styles 
========================================== */

@media (max-width: 767px) {
  .contact-form-frame::before {
    content: "";
    display: none;
  }

  .solutions-frame,
  .resources-frame {
    width: 100%;
    margin-inline: auto;
    margin-top: 0;
  }

  .solutions-frame::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 15px 15px -15px -15px;
    width: 100%;
    height: 100%;
    background: url("../images/solutions-frame-m.svg") left bottom / 100% 100%
      no-repeat;
    pointer-events: none;
  }

  .vs-frame::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 15px 10px -15px -10px;
    width: 100%;
    background: url("../images/vs-frame.svg") left bottom / 100% auto no-repeat;
    pointer-events: none;
  }

  .resources-frame::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 60px 15px -60px -15px;
    width: 100%;
    height: 100%;
    background: url("../images/solutions-frame-m.svg") left bottom / 100% 100%
      no-repeat;
    pointer-events: none;
  }

  .hero-curved-line {
    position: absolute;
    top: 70%;
    left: -50%;
    width: 150%;
    max-width: none;
    transform: translateY(-70%);
    z-index: 0;
    pointer-events: none;
  }

  .solutions-inner {
    width: min(100%, 1351px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0px;
  }

  .frame-decoration {
    display: none;
  }
}

/* ==========================================
   Desktop Only Styles for Scroller
========================================== */

@media (min-width: 1025px) {
  .solutions-inner {
    grid-template-columns:
      minmax(500px, 0.7fr)
      minmax(0, 1.7fr);
    align-items: center;
    gap: 32px;
  }

  .solutions-intro {
    position: sticky;
    top: clamp(110px, 16vh, 170px);
    align-self: start;
    padding-top: 158px;
    margin-left: 13%;
  }

  .solutions-cards {
    gap: 0;
    padding: 158px 37px 0 23px;
  }

  .solutions-card {
    margin-bottom: 30vh;
  }

  .solutions-card:last-child {
    margin-bottom: 0;
  }
}