/*
 * MOBILE 
---------------------------------------*/
/* ONLY mobile */ 
@media (max-width: 1279px) {
  .hero.custom-parallax-container {
    overflow: hidden;
  }

  #custom-parallax-hero {
    grid-column: 1 / -1;
    height: 1628px;
    min-height: 0;
    display: block;
  }

  #custom-parallax-hero .cards-container {
    width: 100%;
    display: flex;
    gap: 20px;
  }

  #custom-parallax-hero .cards-container .card {
    width: auto;
    overflow: hidden;
    border-radius: 12px;
  }

  #custom-parallax-hero .card .corner-tab {
    width: 74px;
    height: 25px;
  }

  #custom-parallax-hero .card .corner-tab .corner-tab-inner {
    width: 100%;
    height: 100%;
    background-size: cover;
  }
  
}

/* Mobile */ 
.hero {
  padding: 64px 0;
  background: var(--colors-common-secondary-100, #F3F4F6);
  opacity: 0; /* we'll animate this in */ 
}

.hero #pin-me {
  grid-column: 1 / -1;
}

.hero h1, 
.hero .include-h1 {
  grid-column: 1 / -1;
  margin-top: 0;
  margin-bottom: 32px;
  color: #333742;

  > color-me {
    background: var(--Colorful, linear-gradient(90deg, #083A8E 0%, #084DA8 33.33%, #7B52BA 67%, #EC393E 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.hero h6 {
  margin-bottom: 32px;
}


/*
 * PARALLAX HERO  
---------------------------------------*/
#custom-parallax-hero {
  position: relative;
}

#custom-parallax-hero .cards-container {
  z-index: 2;
}

#custom-parallax-hero .shapes-container, 
#custom-parallax-hero .cards-container {
  position: absolute;
  top: 0;
}

#custom-parallax-hero .shapes-container {
  z-index: 1;
  position: relative;
  width: 100%;
  height: 100%;
}

#custom-parallax-hero .cards-container .left-col {
  text-align: right;
  flex-grow: 1;
  flex-basis: 0;
}

#custom-parallax-hero .cards-container .left-col .card:nth-child(1) {
  margin-top: 86px;
}

#custom-parallax-hero .cards-container .left-col .card:nth-child(2) {
  margin-bottom: 56px;
}

#custom-parallax-hero .cards-container .left-col .card:nth-child(4) {
  margin-bottom: 204px;
  margin-bottom: 32px;
}

/*#custom-parallax-hero .cards-container .left-col .card:nth-child(n+4) {
  margin-right: -96px
}*/

#custom-parallax-hero .cards-container .right-col {
  flex-grow: 1;
  flex-basis: 0;
}

#custom-parallax-hero .cards-container .right-col .card:nth-child(1) {
  margin-top: 164px;
}

/*#custom-parallax-hero .cards-container .right-col .card:nth-child(n+3) {
  margin-left: 96px
}*/

#custom-parallax-hero .shapes-container .shape {
  position: absolute;
}

#custom-parallax-hero #shape2, 
#custom-parallax-hero #shape3 {
  background: var(--colors-common-primary-500, #1976D2);
}

#custom-parallax-hero #shape4, 
#custom-parallax-hero #shape7 {
  background: #18181B;
}

#custom-parallax-hero #shape2, 
#custom-parallax-hero #shape7 {
  border-radius: 19.2px;
}

#custom-parallax-hero #shape3, 
#custom-parallax-hero #shape4 {
  border-radius: 24px;
}

#custom-parallax-hero .shapes-container .shape:nth-child(1) {
  left: calc(50% + 16px); /* 50% + 16px (half of center gutter) */
}

#custom-parallax-hero .shapes-container .shape:nth-child(2) {
  left: -16px;
  width: calc(230px / 2);
  height: calc(188px / 2);
  top: 180px;
}

#custom-parallax-hero .shapes-container .shape:nth-child(3) {
  width: 150px;
  height: 115px;
  left: 0;
  top: 527px;
}

#custom-parallax-hero .shapes-container .shape:nth-child(4) {
  width: calc(248px / 2);
  height: calc(283px / 2);
  right: -8px;
  top: 296px;
  left: auto;
}

#custom-parallax-hero .shapes-container .shape:nth-child(5) {
  left: 55px;
  top: 504px;
}

#custom-parallax-hero .shapes-container .shape:nth-child(6) {
  left: auto;
  right: 0;
  top: 400px;
}

#custom-parallax-hero .shapes-container .shape:nth-child(7) {
  width: 160px;
  height: 140px;
  left: 232px;
  top: 700px
}

#custom-parallax-hero .shapes-container .shape:nth-child(8) {
  left: -12px;
  top: 1140px;
}

#custom-parallax-hero .shapes-container .shape:nth-child(9) {
  left: calc(50% + 16px); /* 50% + 16px (half of center gutter) */
  top: 1300px;
}

#custom-parallax-hero .card {
  display: block;
  width: 250px;
  border-radius: 24px;
  grid-column: span 5;
  overflow: hidden;
  position: relative;
}

#custom-parallax-hero .card .relative-wrapper {
  overflow: hidden;
  border-radius: 12px;
}

#custom-parallax-hero .card .info-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 1;
  color: #fff;
  opacity: 0;
  -webkit-transition : opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  margin-bottom: calc( 48px + 32px );
}

#custom-parallax-hero .card .info-overlay > div:not(.corner-tab) {
  margin-left: 19.2px;
  text-align: left;
}

#custom-parallax-hero .card .corner-tab {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  bottom: -1px;
  right: -1px;
  -webkit-transition : opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
  z-index: 2;
}

#custom-parallax-hero .corner-tab .corner-tab-inner {
  width: 147px;
  height: 48px;
  background-position: bottom right;
  position: relative;
}

#custom-parallax-hero .corner-tab .corner-tab-inner img.logo {
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: auto;
  max-height: 80%;
  width: auto;
  max-width: 43px;
}

#custom-parallax-hero .card:hover .info-overlay, 
#custom-parallax-hero .card:hover .corner-tab {
  opacity: 1;
}

#custom-parallax-hero .card > .relative-wrapper > .img-wrapper {
  height: 100%;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
}

#custom-parallax-hero .card > .relative-wrapper > .img-wrapper > img {
  -webkit-transition : all 0.3s;
  transition: all 0.3s;
}

#custom-parallax-hero .card::after {
  content: '';
  width: 100%;
  height: 70%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(4, 95, 190, 0.00) 20.5%, rgba(4, 95, 190, 0.75) 50.25%, #034C98 100%);
  opacity: 0;
  -webkit-transition : opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

#custom-parallax-hero .card:hover::after {
  opacity: 0.9;
}

#custom-parallax-hero .card:hover > .relative-wrapper > .img-wrapper > img {
  -webkit-filter: contrast(110%) grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: contrast(110%) grayscale(100%);
  transform: scale(1.03);
  display: block;
}

#custom-parallax-hero .card:not(:last-child) {
  margin-bottom: 32px;
}

#custom-parallax-hero .card > .relative-wrapper > .img-wrapper > img {
  object-fit: cover;
  width: 100%;
  object-position: top;
}

/*
 * TABLET  
---------------------------------------*/
@media (min-width: 768px) {

  .home .site .grid:not(:has(.grid.inner)) {
    grid-template-columns: repeat(12, 1fr);
  }

  #custom-parallax-hero {
    grid-column: 7 / span 6;
    min-height: 1073px;
  }

  .home .hero h1, 
  .home .hero .include-h1, 
  .hero #pin-me {
    grid-column: 1 / span 6;
    text-align: left;
  }

  #custom-parallax-hero .card .relative-wrapper {
    border-radius: 24px;
  }

  #custom-parallax-hero .card > .relative-wrapper > .img-wrapper {
    border-radius: 24px;
  }

  #custom-parallax-hero .corner-tab .corner-tab-inner img.logo {
    max-width: 85px;
    margin-left: 6px;
  }

  #custom-parallax-hero .card .corner-tab {
    width: 142px;
    height: 48px;
  }

}

/*
 * DESKTOP 
---------------------------------------*/
@media (min-width: 1280px) {

  .hero.block {
    padding: 112px 0 64px;
  }

  .hero.custom-parallax-container {
    position: relative;
    overflow: hidden;
    margin-bottom: 112px;
  }

  .hero.custom-parallax-container .gradient-overlay {
    content: "";
    background-image: linear-gradient(to bottom, rgba(243, 244, 246, 1), rgba(243, 244, 246, 0));
    position: absolute;
    height: 100px;
    width: 100%;
    z-index: 2;
  }

  .hero .include-h1 {
    margin-bottom: 20px;
  }

  .hero h6 {
    grid-column: 1 / span 6;
    font-size: 28px;
    margin: 0;
  }

  #custom-parallax-hero {
    opacity: 0;
    /*min-height: 2602px;*/
    margin-top: -48px;
  }

  #custom-parallax-hero .cards-container {
    display: flex;
    gap: 32px;
  }

  #custom-parallax-hero .cards-container .left-col .card:nth-child(4) {
    right: -96px;
    position: relative;
  }

  #custom-parallax-hero .cards-container .right-col .card:nth-child(3), 
  #custom-parallax-hero .cards-container .right-col .card:nth-child(4) {
    left: 96px;
    position: relative;
  }
  
  #custom-parallax-hero .card.short {
    height: 250px; 
  }
  
  #custom-parallax-hero .card.med {
    height: 330px; 
  }
  
  #custom-parallax-hero .card.tall {
    height: 372px; 
  }

  #custom-parallax-hero .shapes-container .shape:nth-child(2) {
    width: 230px;
    height: 188px;
    left: 458px;
    top: 285px;
  }

  #custom-parallax-hero .shapes-container .shape:nth-child(4) {
    width: 248px;
    height: 283px;
    left: 624px;
    top: 666px;
  }

  #custom-parallax-hero .shapes-container .shape:nth-child(5) {
    top: 814;
  }

  #custom-parallax-hero .shapes-container .shape:nth-child(6) {
    left: 605px;
    top: 1308px
  }

  #custom-parallax-hero .shapes-container .shape:nth-child(7) {
    top: 1400px;
  }

  #custom-parallax-hero .shapes-container .shape:nth-child(8) {
    top: 1614px;
  }

  #custom-parallax-hero .shapes-container .shape:nth-child(9) {
    left: calc(50% + 16px);
    top: 900px;
  }

  #custom-parallax-hero .shapes-container .shape:nth-child(10) {
    width: 150px;
    height: 115px;
    background: var(--colors-common-primary-500, #1976D2);
    top: 1360px;
    left: 470px;
    border-radius: 19.2px;
  }

  #custom-parallax-hero .shapes-container .shape:nth-child(11) {
    left: 16px;
    top: 2050px;
  }

}

/* Larger Screens */ 
@media ( min-width: 1568px ) {
  .hero #pin-me {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-height: 100vh !important;
  }

  .home .hero .include-h1 {
    margin-top: -40vh;
  }
}