/* ===================================================
   Layout: Hover animation CTA section
   File:   template-parts/flexible/hover_animation_cta_section/hover_animation_cta_section.css
=================================================== */

.hover-animation-cta-section {
  margin: 40px 0;
}

.hover-animation-cta-section .row {
  position: relative;
  z-index: 10;
  pointer-events: none;
}

.hover-animation-cta-section-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 90px 0;
  padding-top: 120px;
  position: relative;
  z-index: 10;
  pointer-events: none;
}
.hover-animation-cta-section-content p {
  margin: 0 !important;
}
.hover-animation-cta-section-content .primary-btn {
  min-width: 300px;
  position: relative;
  z-index: 99;
  cursor: pointer;
  pointer-events: auto;
}
.hover-animation-cta-section-content a {
  pointer-events: auto;
}

.hover-animation-cta-section {
  position: relative;
  overflow: hidden;
  height: 460px;
}

.polygon-section {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 3fr);
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  z-index: 2;
  pointer-events: none;
}

/* =========================================
           POLYGON WRAPPER
        ========================================= */

.polygon-wrapper {
  width: 460px;
  height: 200px;
  position: relative;
  pointer-events: auto;
}

/* .polygon-image {
        position: absolute;
      } */

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

.polygon-image {
  width: var(--polygon-width);
  height: var(--polygon-height);

  position: relative;
  overflow: hidden;

  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

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

.polygon-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;

  transition: transform 0.6s ease;
}

/* =========================================
           INDIVIDUAL POLYGON SIZES 1
        ========================================= */

/* 1-1  */
.polygon-1-1 {
  --polygon-width: 44px;
  --polygon-height: 50px;
  top: 0;
  left: 0;
}

.polygon-1-2 {
  --polygon-width: 118px;
  --polygon-height: 136px;
  top: -5%;
  left: 0;
}

.polygon-1-3 {
  --polygon-width: 56px;
  --polygon-height: 62px;
  top: 0;
  left: 17%;
}

/* 2-1  */
.polygon-2-1 {
  width: 54px;
  height: 62px;
  top: 0%;
  left: 0;
}

.polygon-2-2 {
  width: 66px;
  height: 76px;
  top: -6%;
  left: 10%;
}

/* 3-1  */
.polygon-3-1 {
  width: 54px;
  height: 62px;
  top: 0;
  left: 0;
}

.polygon-3-2 {
  width: 54px;
  height: 62px;
  top: -20%;
  left: 26%;
}

.polygon-3-3 {
  width: 150px;
  height: 172px;
  top: -35%;
  left: 0%;
}

.polygon-3-4 {
  width: 78px;
  height: 89px;
  top: -45%;
  left: 20%;
}

/* 4-1  */
.polygon-4-1 {
  width: 60px;
  height: 68px;
  top: 22%;
  left: 17%;
}

.polygon-4-2 {
  width: 60px;
  height: 70px;
  top: 20%;
  left: 10%;
}

.polygon-4-3 {
  width: 74px;
  height: 85px;
  top: -16%;
  left: 26%;
}

/* 5-1  */
.polygon-5-1 {
  width: 78px;
  height: 90px;
  bottom: -67%;
  right: -20%;
}

.polygon-5-2 {
  width: 86px;
  height: 100px;
  bottom: -36%;
  right: -39%;
}

/* 6-1  */
.polygon-6-1 {
  width: 58px;
  height: 68px;
  bottom: -30%;
  right: -24%;
}

.polygon-6-2 {
  width: 108px;
  height: 128px;
  bottom: -30%;
  right: -5%;
}

.polygon-6-3 {
  width: 72px;
  height: 85px;
  bottom: 20%;
  right: -34%;
}
.polygon-wrapper-1,
.polygon-wrapper-2,
.polygon-wrapper-3,
.polygon-wrapper-4,
.polygon-wrapper-5,
.polygon-wrapper-6 {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.polygon-wrapper-1:hover,
.polygon-wrapper-2:hover,
.polygon-wrapper-3:hover,
.polygon-wrapper-4:hover,
.polygon-wrapper-5:hover,
.polygon-wrapper-6:hover {
  opacity: 1;
}

.row-top {
  position: relative;
  z-index: 10;
  pointer-events: none;
}

/* RWD  */
@media (max-width: 991px) {
  .hover-animation-cta-section {
    height: auto;
  }
  .polygon-section {
    display: none;
  }
  .hover-animation-cta-section-content {
    padding: 74px 0;
  }
}