/* ------------------------- Components ® Code by Dennis -------------------------------------------------- */

/* .dnone {
   display: none;
} */

/* ------------------------- Nav Height -------------------------------------------------- */

.nav-height {
   display: block;
   width: 100%;
   height: calc(var(--main-navigation-height) + var(--progress-bar-height));
}

main[data-notification-bar-status="visible"] .nav-height {
   height: calc(var(--main-navigation-height) + var(--progress-bar-height) + var(--notification-bar-height));
}

/* ------------------------- Default Header -------------------------------------------------- */

.default-header {
   position: relative;
}

.default-header .container .row {
   flex-direction: column;
   justify-content: space-between;
   gap: calc(var(--section-padding) * 0.66);
}

.default-header .container .row .col {
   display: flex;
   flex-direction: column;
   gap: var(--row-padding-small);
}

.default-header .header-image {
   position: absolute;
   right: 0;
   bottom: 0;
   height: 100%;
   width: 66.666%;
   overflow: hidden;
}

.default-header .overlay-gradient {
   width: 200%;
   background: radial-gradient(circle, rgba(11,38,31, 0.35) 0%, rgba(0,33,27,1) 90%);
}

.default-header .col-row-btn {
   display: flex;
   gap: 0.5em;
   flex-wrap: wrap;
}


@media screen and (min-width: 1024px) {

   .default-header.full-height-desktop .container .row {
      min-height: min(calc(100vh - (var(--main-navigation-height) + var(--progress-bar-height))), 50em);
   } 

   .nav-height[data-sub-navigation="active"] + .default-header.full-height-desktop .container .row {
      padding-top: calc(var(--section-padding) + var(--sub-navigation-height));
   }

}

@media screen and (max-width: 1024px) {

   .default-header {
      padding-top: min(25vw, 8em);
      padding-bottom: min(25vw, 8em);
   }
}   

@media screen and (max-width: 720px) {
   .default-header {
      padding-top: var(--section-padding);
      padding-bottom: min(50vw, 12em);
   }

   .default-header .container .row {
      gap: var(--section-padding);
   }

   .default-header .header-image {
      width: 100%;
      height: 75vw;
   }

   .default-header .overlay-gradient {
      background: linear-gradient(0deg, rgba(11,38,31,0.3) 0%, rgba(0,33,27,1) 100%);
   }
}

/* ------------------------- Split Words -------------------------------------------------- */

.split-words .single-word {
   overflow: hidden;
   padding: 0.125em;
   margin: -0.125em -0.125em -0.22em -0.125em;
}

.split-words .single-word-inner {
   position: relative;
   transform-origin: left bottom;
}

/* ------------------------- Default Block -------------------------------------------------- */

.default-block {
   padding-top: 0;
}

/* ------------------------- Block - Media -------------------------------------------------- */

.block-media .row {
   --gap: var(--col-padding);
   --columns: 1;
   display: flex;
   flex-wrap: wrap;
   gap: var(--row-padding) var(--gap);
}

.block-media .row .col {
   width: calc((100% / var(--columns)) - (var(--gap) * ((var(--columns) - 1) / var(--columns))));
}

/* Count */

.block-media .row.count-2 {
   --columns: 2;   
} 

.block-media .row.count-3 {
   --columns: 3;   
} 

.block-media .row.count-4 {
   --columns: 4;   
} 

@media screen and (max-width: 1024px) {
   .block-media .row.count-3,
   .block-media .row.count-4 {
      --columns: 2;   
   } 
}

/* ------------------------- Table -------------------------------------------------- */

.table {
   display: flex;
   flex-direction: column;
}

.table .single-table-row {
   display: flex;
   border-bottom: 2px solid var(--color-border);
}

.table .single-table-row:first-child {
   border-top: 2px solid var(--color-border);
}

.table .single-table-row .icon {
   flex-shrink: 0;
   width: 3.25em;
   display: flex;
   border-right: 2px solid var(--color-border);
   position: relative;
   display: flex;
   justify-content: center;
   padding: 0.9em 0;
}

.table .single-table-row .icon i {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 1.2em;
   height: 1.2em;
}

.table .single-table-row .icon i svg {
   width: 100%;
}

.table .single-table-row .icon i svg path {
   stroke: var(--color-secondary);
}

.table .single-table-row .text {
   padding: 0.75em 1.25em;
}

[data-theme-section="dark"] .table .single-table-row .icon i svg path {
   stroke: var(--color-light);
}

/* ------------------------- flickity Slider - Setup -------------------------------------------------- */

.flickity-slider-group {
   width: 100%;
   position: relative;
}

.flickity-slider-group .flickity-carousel {
   width: 100%;
   position: relative;
   display: flex;
}


.flickity-slider-group .flickity-slide {
   width: calc((99.99% / var(--columns)) - (var(--gap) * ((var(--columns) - 1) / var(--columns))));
   margin-right: var(--gap);
   flex-shrink: 0;
   display: block;
}

/* Turn Flickity ON */
.flickity-slider-group .flickity-carousel::after {
   content: "flickity";
   display: none;
}

/* Remove Flex from for Flickity */
.flickity-slider-group .flickity-carousel {
   display: block;
}

.flickity-slider-group .flickity-viewport {
   overflow: visible;
   width: 100%;
}

/* Flickity Controls */

.flickity-slider-group .flickity-controls {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: var(--container-width);
   height: 100%;
   pointer-events: none;
   z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   justify-content: center;
   padding: var(--row-padding-small);
   gap: 0.5em;
}

@media screen and (max-width: 720px) {
   .flickity-slider-group .flickity-controls {
      padding: 0;
      display: none;
   }
}

.flickity-slider-group .flickity-controls .flickity-arrow {
   pointer-events: all;
   cursor: pointer;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 3.4em;
   height: 3.4em;
   border-radius: 50%;
   flex-shrink: 0;
   transition: all var(--animation-primary);
   transform: scale(1) rotate(0.001deg);
}

.flickity-slider-group .flickity-controls .flickity-arrow::before {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(0.001deg);
   width: 100%;
   height: 100%;
   border-radius: 20em;
   transition: all var(--animation-bounce), border var(--animation-primary), background-color var(--animation-primary);
   background-color: var(--color-dark);
}

.flickity-slider-group .flickity-controls .flickity-arrow:hover::before {
   background-color: var(--color-light);
   height: 80%;
}

.flickity-slider-group .flickity-controls .flickity-arrow svg {
   width: 45%;
   z-index: 2;
}

.flickity-slider-group .flickity-controls .flickity-arrow svg :is(polyline, line, path) {
   stroke: var(--color-secondary);
   stroke-width: 1.5px;
   transition: var(--animation-primary);
}

.flickity-slider-group .flickity-controls .flickity-arrow:hover svg :is(polyline, line, path) {
   stroke: var(--color-dark);
}

.flickity-slider-group .flickity-controls .flickity-arrow[data-flickity-control="prev"] svg {
   transform: scaleX(-1);
}

.flickity-slider-group .flickity-controls .flickity-arrow.flickity-button-disabled {
   transform: scale(0) rotate(0.001deg);
   pointer-events: none;
}

/*  Flickity Dots (Behind Progress Bar)  */

.flickity-slider-group[data-flickity-slider-type="cards"] .flickity-page-dots {
   width: var(--container-width);
   background-color: transparent;
   height: var(--slides-progress-height);
   display: flex;
   left: 50%;
   transform: translate(-50%, var(--slider-info-distance));
   bottom: unset;
   border-radius: 2em;
   overflow: hidden;
}

.flickity-slider-group[data-flickity-slider-type="cards"] .flickity-page-dots .dot {
   width: 100%;
   height: 100%;
   margin: 0;
   border-radius: 0em;
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 0;
   background: var(--color-light);
   background:  linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
   transition: var(--animation-primary);
   border-radius: 2em;
}

.flickity-slider-group[data-flickity-slider-type="cards"] .flickity-page-dots .dot:hover {
   opacity: 0.15;
}

/*  Flickity Progress Bar  */

.flickity-slider-group[data-flickity-slider-type="cards"] .flickity-progress {
   display: flex;
   justify-content: center;
   align-items: center;
   margin: var(--slider-info-distance) 0;
   pointer-events: none;
   position: absolute;
   top: 100%;
   width: 100%;
   gap: 1em;
   height: var(--slides-progress-height);
}

.flickity-slider-group[data-flickity-slider-type="cards"] .flickity-progress::before {
   content: '';
   position: absolute;
   width: var(--slides-progress-width);
   height: var(--slides-progress-height);
   border: 2px solid var(--color-secondary);
   border-radius: 2em;
}

.flickity-slider-group[data-flickity-slider-type="cards"] .flickity-progress .flickity-progress-bar {
   width: calc(var(--slides-progress-width) - var(--slides-progress-height));
   background: transparent;
   height: 4px;
   position: relative;
   overflow: hidden;
   border-radius: 1em;
}

.flickity-slider-group[data-flickity-slider-type="cards"] .flickity-progress .flickity-progress-bar-inner {
   width: 25%;
   height: 100%;
   position: relative;
   transition: width ease-out 0.2s;
   left: -24%;
   background-color: var(--color-secondary);
   border-radius: 1em;
}

.flickity-slider-group[data-flickity-slider-type="cards"] .flickity-slides-count {
   width: 1em;
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
   height: var(--slides-progress-height);
   padding-top: 0.1em
}

.flickity-slider-group[data-flickity-slider-type="cards"] .flickity-slides-count span {
   font-size: 0.9em;
}

/* ------------------------- Single Accordion -------------------------------------------------- */

.accordion {
   width: 100%;
   position: relative;
   display: flex;
   flex-wrap: wrap;
   gap: var(--row-padding) var(--gap);
   --gap: var(--col-padding);
   --columns: 3;
   padding-top: var(--row-padding);
}

.accordion .single-accordion-item {
   display: flex;
   flex-direction: column;
   width: calc((99.99% / var(--columns)) - (var(--gap) * ((var(--columns) - 1) / var(--columns))));
   background: var(--color-light);
}

.accordion .single-accordion-item:first-child {
   border-top: 0;
}

.accordion .single-accordion-item .top {
   padding: 1.5em 1.75em;
   display: flex;
   align-items: center;
   gap: 0.5em;
   position: relative;
   justify-content: space-between;
}

.accordion .single-accordion-item .top [data-card-toggle] {
   cursor: pointer;
}

.accordion .single-accordion-item .bottom {
   padding: 0 1.75em 1.75em 1.75em;
   display: none;
}

.accordion .single-accordion-item .bottom-inner {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   height: 100%;
   gap: 1.5em;
   margin-top: -0.25em;
}

.accordion .single-accordion-item .bottom-inner .col-row-btn {
   display: flex;
}


.accordion .open-close-icon {
   width: 1em;
   height: 1em;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
}

.accordion .open-close-icon::before,
.accordion .open-close-icon::after {
   content: "";
   height: 2px;
   width: 100%;
   background: var(--color-secondary);
   display: block;
   position: absolute;
   transform: rotate(0.001deg);
   transition: var(--animation-bounce);
}

.accordion .open-close-icon::after {
   transform: rotate(-90deg);
}

.accordion [data-card-status="active"] .open-close-icon::before {
   transform: rotate(180deg);
}

.accordion [data-card-status="active"] .open-close-icon::after {
   transform: rotate(0.001deg);
}

@media screen and (min-width: 1024px) {  
   .accordion .single-accordion-item .top [data-card-toggle] {
      display: none;
   }

   .accordion .single-accordion-item .bottom {
      display: block !important;
      height: 100%;
   }

   .accordion .single-accordion-item .bottom .answer-content p {
      font-size: 0.95em;
   }

   .accordion .open-close-icon {
      display: none;
   }
}

@media screen and (max-width: 1024px) {
   .accordion {
      --columns: 1;
      gap: var(--row-padding-small) var(--gap);
   }
}