@font-face {
  font-family: "messengerrough";
  src: url("/wp-content/themes/cacique/assets/fonts/messenger-rough-webfont.woff2")
      format("woff2"),
    url("/wp-content/themes/cacique/assets/fonts/messenger-rough-webfont.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "hoverage_vintagevintage";
  src: url("/wp-content/themes/cacique/assets/fonts/hoverage_vintage-webfont.woff2")
      format("woff2"),
    url("/wp-content/themes/cacique/assets/fonts/hoverage_vintage-webfont.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;
}

:root {
  --font-main: "hoverage_vintagevintage", sans-serif;
  --font-head: "messengerrough", sans-serif;
  --font-body: "minion-pro", serif;

  --font-size-body: 1.6rem;
  --font-size-headlines: 4.5rem;
  --font-sub-size-headlines: 3rem;

  --font-lh: 1.75;

  --font-c-forest: #004c43;
  --font-c-grass: #8dc63f;
  --font-c-cloud: #ffffff;

  --h-trans: all 0.15s ease-out;
}

h1,
h2 {
  font-family: var(--font-main);
  font-size: var(--font-size-headlines);
}
h3 {
  font-family: var(--font-head);
  font-weight: normal;
}
p {
  margin-bottom: 20px;
}

.content-area,
.content-area p {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: normal;
  font-size: var(--font-size-body);
  color: var(--font-c-cloud);
}
.intro--wrap {
  background-color: #004c43;
  padding: 80px 0;
  position: relative;
}
.intro {
  background-color: var(--font-c-grass);
  padding: 60px 15%;
  text-align: center;
  position: relative;
}
.video-container {
  position: relative;
}
.intro::after,
.video-container::after {
  content: "";
  background-image: url("/wp-content/uploads/2023/07/intro-bottom-shadow.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  position: absolute;
  bottom: -82px;
  left: 0;
  width: 100%;
  height: 90px;
}

.video-container::after {
  background-size: contain;
  bottom: -82px;
}
.intro h2 {
  margin-top: 0;
}
.intro h2 img {
  width: 100%;
  max-width: 400px;
}
.intro p {
  color: var(--font-c-forest);
}

.product-education {
  background-color: var(--font-c-forest);
  padding: 0 0 80px 0;
  position: relative;
}

.products-link-wrap {
  display: block;
  transition: var(--h-trans);
  z-index: 2;
  position: relative;
}
.products-link-wrap:hover {
  transform: rotate(-2deg);
}
.circle {
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(
    255,
    255,
    255,
    0.05
  ); /* Adjust the background color and opacity as desired */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -65%);
  transition: all 0.15s ease-out;
  z-index: 1;
}

.circle-container:hover .circle {
  width: 195px; /* Adjust the final size of the circle */
  height: 195px; /* Adjust the final size of the circle */
}

.videos {
  background: var(--font-c-forest);
  background: -moz-linear-gradient(
    180deg,
    rgba(0, 76, 67, 1) 6%,
    rgba(255, 255, 255, 1) 6%
  );
  background: -webkit-linear-gradient(
    180deg,
    rgba(0, 76, 67, 1) 6%,
    rgba(255, 255, 255, 1) 6%
  );
  background: linear-gradient(
    180deg,
    rgba(0, 76, 67, 1) 6%,
    rgba(255, 255, 255, 1) 6%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#004c43",endColorstr="#ffffff",GradientType=1);
  overflow: hidden;
  padding: 40px 0 25px 0;
}
.video {
  position: relative;
  margin-bottom: 120px;
}

.video-intro {
  background-image: url("/wp-content/uploads/2023/07/pattern-tan-new.jpg");
  background-repeat: repeat;
  background-size: 1200px;
  position: relative;
}
.video-intro::before {
  content: "";
  background-image: url("/wp-content/uploads/2023/07/patt-02.png");
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: repeat-x;
  width: 100%;
  height: 35px;
  background-size: cover;
}
.video-container {
  padding: 40px 80px 80px 80px;
}

.tan p {
  color: var(--font-c-forest);
}

.dark-green .video-intro {
  background-image: url("/wp-content/uploads/2023/07/pattern-green-new.jpg");
}
.dark-green p {
  color: var(--font-c-grass);
}
.light-green .video-intro {
  background-image: url("/wp-content/uploads/2023/07/pattern-light-green-new.jpg");
}
.light-green p {
  color: var(--font-c-forest);
}

.light-green .video-intro::before {
  content: "";
  background-image: url("/wp-content/uploads/2023/07/patt-03.png");
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: repeat-x;
  width: 100%;
  height: 35px;
  background-size: cover;
}

.video-intro-inner {
  padding: 80px 25% 0 25%;
  text-align: center;
  position: relative;
}
.video-intro-inner h2 img {
  height: 45px;
}

.where-to-find {
  background-color: #004c43;
  padding: 80px 0;
  color: #ffffff;
}
.where-to-find-inner {
  padding: 0 25% 40px 25%;
  text-align: center;
  position: relative;
}
.where-to-find h2 {
  color: #8dc63f;
  font-family: "hoverage_vintagevintage";
}
.where-to-find h3 {
  text-transform: uppercase;
}

.product .image img {
  max-width: 170px;
}

.offsides {
  position: absolute;
  top: -20px;
  left: -45%;
  max-width: 550px;
  overflow: hidden;
}
.o-main {
  left: -60% !important;
}

.o-right,
.o-left {
  position: absolute;
  top: -130px;
  overflow: hidden;
  max-width: 700px;
  z-index: 1;
}
.o-right {
  left: inherit;
  right: -35%;
}

.o-left {
  right: inherit;
  left: -35%;
}
.product-education h2 {
  color: #8dc63f;
  font-family: "hoverage_vintagevintage";
  font-weight: 600;
  font-size: 3rem;
}

.product-education p {
  padding: 1px 25% 20px 25%;
}

/* MOBILE STYLES
------------------------- */
@media screen and (max-width: 39.9375em) {
  .mob {
    background-image: url("/wp-content/uploads/2023/06/hero-mobile-new.jpg") !important;
    min-height: 350px !important;
  }
  .intro::after {
    background-size: contain;
    bottom: -87px;
  }
  .product-education p {
    padding: 1px 10% 20px 10%;
  }
  .offsides {
    max-width: 120px;
  }
  .col-sx-6 {
    width: 50%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
  }
  .o-left {
    top: -80px;
    left: -20%;
    max-width: 280px !important;
  }
  .o-right {
    position: absolute;
    top: -70px;
    right: -60px;
    max-width: 260px !important;
  }
  .video-intro-inner h2 img {
    height: 30px;
  }
  .video-intro-inner,
  .where-to-find-inner {
    padding: 80px 10% 0 10%;
  }
  .video-container::after {
    background-size: contain;
    bottom: -85px;
  }
  .video-container {
    padding: 10px 40px 40px 40px;
  }
  .product-education-inner h2 img {
    width: 85%;
  }
  .where-to-find {
    padding: 0 0 40px 0;
  }
  .product-education h2 {
    font-size: 2.5rem;
  }
}