:root {
  --color-theme-blue: #113e5a;
  --color-theme-darker-blue: #103e5a;
  --color-theme-yellow: #eac677;
  --color-light-bg: #efefef;
  --color-dark: #000000;
  --color-blue-bg: #a1b3bc;
  --color-lighter-dark: #707070;
  --color-white: #ffffff;
  --scale-factor: 1;
  font-family: "Sinkin Sans";
}
@media (width <= 1440px) {
  :root{
    --scale-factor: 0.8;
  }
}
@media (width <= 768px) {
  :root{
    --scale-factor: 0.7;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block: 2rem;
}

a{
    cursor: pointer !important;
}

@media(width >= 1000px){
    .contentWrapper{
        --menuWidth: 80px;
        max-width:calc(100% - var(--menuWidth));
    }
}

.container-new {
  --inlinePadding: 2rem;
  --menuWidth: 80px;
  --maxContentWidth: calc(
    max(min(100%, 1920px) - 150px * 2, 1200px) - var(--inlinePadding) * 2
  );
  max-width: min(var(--maxContentWidth), 100%);
  padding-inline: var(--inlinePadding);
  overflow-clip-margin: content-box;
}
.container-new.half {
    /* max-width: min(
      calc((var(--maxContentWidth) / 2) - var(--extraSpace, 0rem)),
      100% */
    /*--maxContentWidth: calc(*/
    /*  max(min(100%, 1920px) / 2 - 150px, 1200px / 2) - var(--inlinePadding) -*/
    /*    var(--extraSpace, 0rem)*/
    max-width: min(var(--maxContentWidth) * 0.5, 100%);
    /*);*/
}
@media (width >= 1000px) {
  .container-new.three-fourth{
          max-width: min(var(--maxContentWidth) * 0.75, 100%);
      }
  }
@media (width <= 1000px) {
  .container-new{
    --maxContentWidth: 100%;
  }
}

.mx-auto {
  margin-inline: auto;
}

.ml-auto {
    margin-inline-start: auto;
}

.txt-45 {
  font-size: calc(45rem / 16 * var(--scale-factor));
  line-height: calc(54 / 45);
}
@media (width<=768px) {
  .txt-45{
    font-size: calc(36rem / 16 * var(--scale-factor));
  }
}

.txt-21-25 {
  font-size: calc(21rem / 16 * var(--scale-factor));
  line-height: calc(25 / 21);
}
.txt-21-36 {
  font-size: calc(21rem / 16 * var(--scale-factor));
  line-height: calc(36 / 21);
}

.txt-24 {
  font-size: calc(24rem / 16 * var(--scale-factor));
  line-height: calc(36 / 24);
}

.txt-18 {
  font-size: calc(18rem / 16 * var(--scale-factor));
  line-height: calc(27 / 18);
}

.txt-31 {
  font-size: calc(31rem / 16 * var(--scale-factor));
  line-height: calc(36 / 31);
}

.col-white {
  color: var(--color-white);
}
.col-blue {
  color: var(--color-theme-blue);
}

.col-darker-blue {
  color: var(--color-theme-darker-blue);
}

.col-lighter-dark {
  color: var(--color-lighter-dark);
}

.bg-light-blue {
  background-color: var(--color-blue-bg);
}

.bg-blue {
  background-color: var(--color-theme-blue);
}

.bg-yellow {
  background-color: var(--color-theme-yellow);
}

.bg-light {
  background-color: var(--color-light-bg);
}

.bg-white {
  background-color: var(--color-white);
}

.font-700 {
  font-weight: 700;
}
.font-600 {
  font-weight: 600;
}
.font-500 {
  font-weight: 500;
}
.font-400 {
  font-weight: 400;
}
.font-300 {
  font-weight: 300;
}
.txt-transform-none {
  text-transform: none;
}
.txt-transform-capitalize {
  text-transform: capitalize;
}
.letter-spacing-0 {
  letter-spacing: 0px;
}

.mt-2 {
  margin-top: 0.5rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}

.contents {
  display: contents;
}

.controlGrid {
  --gap: 2rem;
  display: grid;
  gap: var(--gap);
}
  @media (width >= 1000px) {
      .controlGrid{
            --gap: 3rem;
            grid-template-columns: repeat(2, 1fr);
      }
  }
  .controlGrid .grid-item {
      position: relative;
  }
  .controlGrid .imgWrapper {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  .controlGrid .imgWrapper :is(img, video) {
    height: 100%;
    width: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover;
    object-position: center;
  }

  @media (width <= 1000px) {
    .controlGrid .imgWrapper :is(img, video) {
      position: static;
      height: auto;
      width: 100%;
    }
}

.btn-holder {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
@media (width >= 1440px) {
  .btn-holder{
    gap: 3rem;
  }
}

.btn {
  border-radius: 200vmax !important;
  padding-inline: 2rem;
  padding-block: 1rem;
  line-height: 0.9;
}

.section-gap {
  margin-block: calc(80rem / 16 * var(--scale-factor));
}
.section-gap-padding {
  padding-block: calc(80rem / 16 * var(--scale-factor));
}

:is(.featuredSlider, .bonusSlider) > div {
  display: flex;
  gap: 1rem;
  padding-block: 1rem;
}
 :is(.featuredSlider, .bonusSlider) > div .txt {
    flex-grow: 1;
    min-width: max-content;
    margin-block: auto;
    display: block;
  }
:is(.featuredSlider, .bonusSlider) > div .splide__slide {
    padding-block: 0.5rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgb(from var(--color-theme-blue) r g b / 0.5);
}
    :is(.featuredSlider, .bonusSlider) > div .splide__slide:hover {
      text-decoration-color: var(--color-theme-blue);
    }
    :is(.featuredSlider, .bonusSlider) > div .splide__slide img{
        /*filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(1525%) hue-rotate(152deg) brightness(94%) contrast(95%);*/
        opacity: 0.5;
    }
    :is(.featuredSlider, .bonusSlider) > div .splide__slide a img{
        opacity: 1;
        /*filter: grayscale(0);*/
    }

.overflow-clip {
  overflow: clip;
}

.featuredSlider .splide__slide {
  --gap: 2rem;
  position: relative;
  padding-block: 1rem;
}
  .featuredSlider .splide__slide::after {
    position: absolute;
    content: "";
    top: 0;
    left: calc(var(--gap) / -2);
    width: 2px; /* width of strip */
    height: 200px; /* height of strip */
    background-image: repeating-linear-gradient(
      to bottom,
      #000 0 4px,
      /* dot */ transparent 4px 12px /* gap */
    );
    /* apply gradient *through* the dots */
    -webkit-mask: repeating-linear-gradient(
      to bottom,
      #000 0 4px,
      transparent 4px 12px
    );
    background: linear-gradient(to bottom, black, black);
  }
  .featuredSlider .splide__slide img{
        max-height: 40px;
    }

.controlGrid .container-new.half {
  --extraSpace: calc(var(--gap) / 2);
}

.video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  transition: opacity 220ms ease, visibility 220ms ease;
  opacity: 1;
  cursor: pointer;
  z-index: 5;
  transition: opacity 1s ease;
}
.video-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}
.play-btn {
  width: 96px;
  height: 96px;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.06);
  border: 3px solid rgba(255, 255, 255, 0.95);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}
.play-btn svg {
  width: 42px;
  height: 42px;
  display: block;
  fill: rgba(255, 255, 255, 0.95);
  margin-left: 6px;
}
.play-label {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.2px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.txt-center {
  text-align: center;
}

.frameworkGrid {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); */
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
  @media (width <= 1024px) {
      .frameworkGrid{
        grid-template-columns: repeat(2, 1fr);
      }
  }
  @media (width <= 768px) {
      .frameworkGrid{
            grid-template-columns: repeat(1, 1fr);
      }
  }
  .frameworkGrid .frameworkCard {
    height: 100%;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(2, auto);
    padding: 2.625rem 2rem;
    /* max-width: 400px; */
    background-color: var(--color-white);
  }
   .frameworkGrid .frameworkCard .cardLeft {
          font-size: calc(120rem / 16 * var(--scale-factor)) !important;
          /* line-height: calc(178 / 120); */
          line-height: 0.9;
          font-family: Oswald;
          color: var(--color-theme-yellow);
          font-weight: 300;
        }
    
    .frameworkGrid .frameworkCard .cardRight * {
            margin-block: 0;
        }
    .frameworkGrid .frameworkCard .hoverContent {
          opacity: 0;
          pointer-events: none;
          position: absolute;
          inset: 0;
          overflow: clip;
          display: grid;
          place-content: center;
          font-weight: 600;
          cursor: pointer;
          transition: opacity 400ms ease;
    }
          .frameworkGrid .frameworkCard .hoverContent img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            object-position: center;
            position: absolute;
            transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
          }
          .frameworkGrid .frameworkCard .hoverContent div {
            position: absolute;
            display: grid;
            place-content: center;
            inset: 0;
            z-index: 1;
            background: rgb(from var(--color-theme-darker-blue) r g b / 0.6);
            color: var(--color-white);
            transition: all 400ms ease;
          }
        /*&:hover .hoverContent {*/
        /*  opacity: 1;*/
        /*  pointer-events: auto;*/
        /*}*/
    .frameworkGrid .grid-item {
        display: flex;
    }
  .frameworkGrid .grid-item:last-child {
      min-height: 200px;
    }
  .frameworkGrid .grid-item:last-child .hoverContent {
      opacity: 1;
      pointer-events: auto;
    }
    
.forGrid {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); */
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
}
  @media (width <= 1024px) {
      .forGrid{
        grid-template-columns: repeat(3, 1fr);
      }
  }
  @media (width <= 1000px) {
  .forGrid{
        grid-template-columns: repeat(2, 1fr);
    }
  }
  .forGrid .frameworkCard {
    position: relative;
    box-sizing: border-box;
    display: grid;
    gap: 1.25rem;
    /* max-width: 400px; */
  }
    .forGrid .frameworkCard .cardTop {
      font-size: calc(120rem / 16 * var(--scale-factor));
      /* line-height: calc(178 / 120); */
      line-height: 0.9;
      font-family: Oswald;
      color: var(--color-theme-yellow);
      font-weight: 300;
      display: flex;
    }
    .forGrid .frameworkCard .cardTop img {
        margin-inline: auto;
        place-self: center;
        max-width: 80px;
    }
    .forGrid .frameworkCard .cardBottom *{
        margin-block: 0;
        text-align: center;
    }

.btn-light {
  background-color: var(--color-white);
  color: var(--color-lighter-dark);
  border: 1px solid var(--color-dark);
}

/* Testimonial Section */
.testimonialSection {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow-x: clip;
}

#testimonialSplide {
  position: relative;
  padding-inline: 6rem;
}
@media (width <= 768px) {
  .#testimonialSplide{
       padding-inline: 4rem;
  }
}

#testimonialSplide .splide__track {
  padding-block: 2rem;
}

.testimonialGrid {
  box-sizing: border-box;
  display: grid;
  gap: 3rem;
  align-items: center;
  /*grid-template-columns: auto 1fr;*/
}
@media (width <= 768px) {
  .testimonialGrid{
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
}

.testimonialLeft {
  display: none;
  justify-content: center;
}
  @media (width <= 768px) {
      .testimonialLeft{
    order: -1;
  }
}

.profileCircle {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
@media (width <= 768px) {
  .profileCircle {
    width: 200px;
    height: 200px;
  }
}

.profileCircle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.testimonialRight {
  display: grid;
  gap: 1.5rem;
}

.testimonialQuote {
  margin: 0;
  padding: 0;
  text-align: center;
}

.testimonialQuote::before {
  display: none;
}

.testimonialQuote p {
  margin: 0;
  font-style: normal;
  color: var(--color-darker-blue);
}

/* .testimonialAuthor {
  padding-top: 1.5rem;
  border-top: 2px solid var(--color-light-bg);
} */

.testimonialAuthor{
    text-align: center;
}

.testimonialAuthor h3 {
  margin: 0;
}

.testimonialAuthor p {
  margin: 0;
}

/* Testimonial Splide Arrows */
#testimonialSplide .splide__arrow {
  width: auto;
  height: auto;
  background-color: transparent;
  border: none;
  border-radius: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 300ms ease;
  padding: 0;
}

#testimonialSplide .splide__arrow:hover {
  background-color: transparent;
  transform: translateY(-50%) scale(1.1);
}

#testimonialSplide .splide__arrow svg {
  width: 32px;
  height: 32px;
  color: var(--color-theme-yellow);
}

#testimonialSplide .splide__arrow:hover svg {
  color: var(--color-theme-yellow);
}

#testimonialSplide .splide__arrow--prev {
  left: 1rem;
  transform: translateY(-50%) scaleX(-1);
}

#testimonialSplide .splide__arrow--prev:hover {
  transform: translateY(-50%) scaleX(-1) scale(1.1);
}

#testimonialSplide .splide__arrow--next {
  right: 1rem;
}

#testimonialSplide .splide__pagination {
  display: none;
}

/* Meet Author Section */
.meetAuthorSection {
  box-sizing: border-box;
}

.meetAuthorGrid {
  display: grid;
  gap: calc(100rem / 16);
  align-items: center;
  grid-template-columns: auto 1fr;
}
@media (width <= 768px) {
  .meetAuthorGrid{
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
}

.authorImageWrapper {
  display: flex;
  justify-content: center;
}
@media (width <= 768px) {
  .authorImageWrapper{
    order: -1;
  }
}

.authorCircle {
  width: 300px;
  height: auto;
  overflow: hidden;
  flex-shrink: 0;
}
@media (width <= 1000px) {
  .authorCircle{
    width: 220px;
    height: auto;
  }
}

.authorCircle img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

.authorContent {
  /* display: grid; */
  /* gap: 3rem; */
}

.authorContent h2 {
  margin-block-end: 3.5rem;
}

.authorContent p {
  /* margin: 0; */
  color: var(--color-darker-blue);
}

.authorSocial {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
@media (width <= 768px) {
.authorSocial{
    justify-content: center;
    flex-direction: column;
  }
}

.socialLinks {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.social-link {
  display: grid;
  place-items: center;
  width: 51px;
  height: 51px;
  transition: all 300ms ease;
}

.social-link img {
  width: 51px;
  height: 51px;
  display: block;
  transition: filter 400ms ease;
}
  .social-link img:not(:hover){
      filter: saturate(0);
  }

.subscribe-link {
  color: var(--color-theme-blue);
  text-decoration: none;
  display: inline-block;
  transition: color 300ms ease;
  margin-inline-start: 2rem;
  transition: color 400ms ease;
}
  .subscribe-link:hover{
      color: hsl(var(--color-theme-blue) h s calc(l - l * 0.5));
  }
@media (width <= 768px) {
  .subscribe-link {
    margin-inline-start: 0;
  }
}

/* Footer Navigation */
.footerNav {
  border-top: 1px solid var(--color-light-bg);
}

.footerNavLinks {
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
}
@media (width <= 768px) {
  .footerNavLinks{
    gap: 1rem;
    flex-direction: column;
    align-items: flex-start;
  }
}

.footer-link {
  color: var(--color-theme-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgb(from var(--color-theme-blue) r g b / 0.5);
  font-size: calc(18rem / 16 * var(--scale-factor));
  font-weight: 500;
  letter-spacing: 0.2px;
  transition: color 300ms ease, text-decoration-color 300ms ease;
}

.footer-link:hover {
  color: var(--color-theme-darker-blue);
  text-decoration-color: var(--color-theme-blue);
}

button.bg-yellow:hover{
    background-color: hsl(from var(--color-theme-yellow) h s calc(l - l *0.2));
}

.btn-light:hover{
    background-color: hsl(from var(--color-white) h s calc(l - l *0.2));
    color: hsl(from var(--color-lighter-dark) h s calc(l - l *0.2));
}

.hero-section .controlGrid .imgWrapper img, 
.hero-section .controlGrid .imgWrapper video {
        height: auto;
        width: 100%;
        position: relative;
        inset: 0;
        object-fit: scale-down;
        object-position: center;
}

.bonus-form{
    /*display: flex;*/
    flex-wrap: wrap;
    list-style: none;
    gap: 1rem;
    margin-block: auto;
    a{
        cursor: pointer;
    }
}

.featured-slider-wrap{
    flex-grow: 2;
}   


    
      .menu-btn {
        position: relative;
        width: 2em;
        height: 1.4em;
        cursor: pointer;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-inline: auto;
        margin-block: 3em;
        span {
          display: block;
          height: 2px;
          background: #fff;
          @media(width<=1000px){
                background: var(--color-theme-yellow, yellow);
            }
        }
        &:hover {
          span {
            background: var(--color-theme-yellow, yellow);
          }
        }
      }

      /* Overlay */
      .overlay {
        position: fixed;
        inset-block: 0;
        inset-inline-end: 0;
        background: #1d1d1d;
        transform: translateX(100%);
        transition: transform 0.4s ease;
        padding: 8.5714em 3em;
        box-sizing: border-box;
        max-width: min(100%, 300px);
        z-index: 100;
      }
      .overlay.open {
        transform: translateX(0);
      }

      /* Close Button */
      .close-btn {
        position: absolute;
        top: 24px;
        right: 24px;
        width: 32px;
        height: 32px;
        cursor: pointer;
      }
      .close-btn:before,
      .close-btn:after {
        content: "";
        position: absolute;
        left: 0;
        top: 14px;
        width: 32px;
        height: 3px;
        background: #fff;
        transition: background 400ms ease;
      }
      .close-btn:is(:before,:after) {
          background: var(--color-theme-yellow);
      }
      .close-btn:before {
        transform: rotate(45deg);
      }
      .close-btn:after {
        transform: rotate(-45deg);
      }
    
      /* Links */
      nav ul {
        list-style: none;
        padding: 0;
        margin: 40px 0;
        > li{
            margin-block: 0.25em;
        }
      }
      nav li a {
        margin: 0;
        letter-spacing: 0.2rem;
        font-size: 0.8571em;
        padding: 0.5em 0;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--color-white,#fff) !important;
      }
      nav li a:is(.active,:hover) {
        color: var(--color-theme-yellow,#d0b02d) !important;
      }

      /* Search Box */
      .search-box {
        margin-top: 40px;
        background: #333;
        padding: 16px;
        border-radius: 6px;
        display: flex;
        align-items: center;
      }
      .search-box input {
        flex: 1;
        background: none;
        border: none;
        color: #fff;
        font-size: 1rem;
        outline: none;
      }
      .search-box svg {
        width: 20px;
        height: 20px;
        fill: #bbb;
      }
      .burgerArea {
        position: fixed;
        right: 0;
        top: 0;
        height: 100vh;
        width: 80px;
        background-color: transparent;
        @media(width>=1000px){
        background-color: #1d1d1d;
        }
      /* Hamburger Button */
      }
      .bonus-form{
          padding-inline-start:0;
      }
      
      .arrow{
        transform: translateX(0);
        text-decoration: none !important;
      }
      *:has(>.arrow){
          display: flex;
          gap: 1rem;
        transition: all 400ms ease;
      }
      *:has(>.arrow):hover {
          gap: 2rem;
      }
      h2{
          letter-spacing: 0px !important;
      }
      
    .sub-menu {
        padding-inline-start: 1rem;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        margin-block: 0 !important;
    }
    
    /* Chevron icon */
    .has-submenu > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .chevron {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.3s ease;
    }
    
    /* When menu is open, rotate chevron downwards */
    .has-submenu.open > a .chevron {
        transform: rotate(225deg);
    }
    
    a:not(:has(button,.btn)):hover{
        span:not(:has(span)):first-child{
            text-decoration: underline;
        }
    }