/* Hero Section Styling */
.hero-section {
    background-color: #FFFFFF;
    border-radius:30px;
    margin-top:1px;
    padding-top:120px;
    padding-bottom:120px;
}
.hero-text {
    font-size: 145px;
    /* text-align:center; */
    font-family: 'tn-condensed-medium';
    text-transform: uppercase;
}
.hero-para {
    font-size: 28px;
    font-family: 'tn-regular';
    line-height: 140%;
}
.hero-talk-btn {
    cursor: pointer;
}
.hero-gif-animation {
    height: 100px;
}

/* About Section */
.about-section {
    background:#FFFFFF;
    border-radius:30px;
    margin-top:1px;
    padding-top:64px;
    padding-bottom:72px;
    padding-left: 0px;
    padding-right: 0px;

}
.about-para {
    font-family: 'tn-regular';
    font-size: 24px;
    line-height: 140%;
}
.about-para-1 {
    margin-top: 60px;
}
.about-para-2, .about-para-3 {
    margin-top: 24px;
}
.impact-block {
    margin-top:160px;
}
#impactHeading {
    font-size: 72px;
    font-family: 'tn-condensed-medium';
    text-transform: uppercase;

}
.impact-metrics {
    font-family: 'ivy-presto-light';
    font-size: 80px;
    color: #241BDC;
}
.impact-metric-text {
    font-size: 24px;
    font-family: 'tn-regular';
    color: #1F2327;
}
.about-cta {
    margin-top: 60px;
}
.about-contact-btn {
    background-color: #241BDC;
    text-transform: uppercase;
    color: #FFFFFF;
    font-size: 24px;
    padding-right: 12px;
    padding-left: 16px;
}
.about-contact-btn:hover {
    background-color: #241BDC;
    color: #FFFFFF;
}
.about-contact-arrow-icon {
    transition: transform 0.3s ease-in-out;
}
.about-contact-arrow-icon.rotated {
    transform: rotate(45deg);
}
.hoko-img {
    height: 113px;
}
.hoko-img-1, .hoko-img-2 {
    width: 0px;
}

/* Hoko Animation block */
.hoko-animation-block {
    background:#FFB62B;
    width:100%;
    height: 350px;
    margin-top: 160px;
}
#hokoAnimationImg {
    margin-top: -50px;
}
#hokoLogoBox1 {
    margin-top: 54px;
}
#hokoLogoBox2 {
    margin-top:12px;
}
/* .expanded-1 {
    width: 284px;
}
.expanded-2 {
    width: 458px;
} */

/* What We Do Section */
.what-we-do-section {
    background:#FFFFFF;
    border-radius:30px;
    margin-top:1px;
    padding-top:120px;
    padding-bottom:120px;
    padding-left: 0px;

}
.secondary-heading {
    font-family: 'tn-condensed-medium';
    font-size: 72px;
    text-transform: uppercase;
}
.service-box-1 {
    margin-top: 80px;
}
.service-left-box {
    width:fit-content;
    height: 180px;
    border-top-right-radius: 120px;
    border-bottom-right-radius: 120px;
    padding-left: 50px;
    padding-right: 50px;
    transition: width 0.2s ease-in-out;
}
.service-left-box-mobile {
    height: auto;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    padding: 30px 20px;
}
.service-box-1:hover > .service-1-left {
    width: 80vw;
}
.service-box-2:hover > .service-2-left {
    width: 80vw;
}
.service-box-3:hover > .service-3-left {
    width: 80vw;
}
.service-box-4:hover > .service-4-left {
    width: 80vw;
}
.service-1-left {
    width: 660px;
    background: #241BDC;
    color: #FFFFFF;
}
.service-2-left {
    width: 580px;
    background: #25C4EF;
    color: #000000;
}
.service-3-left {
    width: 700px;
    background: #D63C22;
    color: #FFFFFF;
}
.service-4-left {
    width: 660px;
    background: #FFB62B;
    color: #000000;
}
.service-title {
    position: relative;
    font-size: 46px;
    font-family: 'tn-medium';
}
.service-title-mobile {
    position: relative;
    font-size: 24px;
    font-family: 'tn-medium';
}
.service-img {
    margin-left: 24px;
}
.service-img-mobile {
    margin-top: 20px;
}
.service-para {
    font-size: 18px;
    font-family: 'tn-regular';
    line-height: 140%;
    margin-left: 24px;
}
.service-para-mobile {
    font-size: 16px;
    font-family: 'tn-regular';
    line-height: 140%;
    margin-top: 20px;
}
.service-para-2, .service-para-4 {
    color: #000000 !important;
}
.service-para-1, .service-para-2, .service-para-3, .service-para-4 {
    display: none;
}
.service-1-right, .service-2-right, .service-3-right, .service-4-right {
    display: none;
}


/* Projects Section */
.projects-section {
    background:#FFFFFF;
    border-radius:30px;
    margin-top:1px;
    padding-top:120px;
    padding-bottom:120px;
}
.projects-title-row {
    margin-top: 80px;
}
.projects-contact-btn {
    background-color: #241BDC;
    text-transform: uppercase;
    color: #FFFFFF;
    font-size: 24px;
    padding-right: 12px;
    padding-left: 16px;
}
.projects-contact-btn:hover {
    background-color: #241BDC;
    color: #FFFFFF;
}
.projects-contact-arrow-icon {
    transition: transform 0.3s ease-in-out;
}
.projects-contact-arrow-icon.rotated {
    transform: rotate(45deg);
}
.projects-title {
    font-family: 'tn-condensed-medium';
    font-size: 72px;
    text-transform: uppercase;
}
.projects-grid-row-1 {
    margin-top: 60px;
}
.projects-grid-row-2 {
    margin-top: 40px;
}
.project {
    height: 350px;
    border-radius: 24px;
}
.project-1 {
    position: relative;
    background: #FFB62B;
}
.project-1-hover-bg, .project-2-hover-bg, .project-3-hover-bg, .project-4-hover-bg, .project-5-hover-bg{
    background: rgba(0, 0, 0, 0.5);;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 350px;
    border-radius: 24px;
    display: none;
    z-index: 30;
}
.project-hover-cta {
    background: transparent;
    border: 1px solid #FFFFFF;
    text-transform: uppercase;
    color: #FFFFFF !important;
    font-size: 24px;
    padding-left: 24px;
    padding-right: 12px;
    font-family: 'tn-medium';
    position: relative;
    top: 48%;

}
.project-hover-cta:hover {
    background-color: transparent;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
}
.project-hover-contact-arrow-icon {
    transition: transform 0.3s ease-in-out;
}
.project-hover-contact-arrow-icon.rotated {
    transform: rotate(45deg);
}
.project-2 {
    background: #D63C22;
    position: relative;
}
.project-3 {
    background: #25C4EF;
    position: relative;
}
.project-4 {
    background: #BEE5E5;
    position: relative;
}
.project-5 {
    background: #F18F71;
    position: relative;
}
.project-img {
    margin-top: 90px;
    z-index: 29;
}
.projects-lets-talk-btn-row {
    margin-top: 60px;
}

/* Clients Section */
.clients-section {
    background:#FFFFFF;
    border-radius:30px;
    margin-top:1px;
    padding-top:120px;
    padding-bottom:120px;
}
.clients-title {
    font-family: 'tn-condensed-medium';
    font-size: 72px;
    text-transform: uppercase;
}
.clients-para {
    margin-top: 40px;
    font-family: 'tn-regular';
    font-size: 28px;
    line-height: 140%;
}
.clients-list-row {
    margin-top: 40px;
}
.tag-list li{
    padding: 0 !important;
}

.scroller__inner {
    gap: 0 !important;
}

.client-1 {
    width: 350px;
    height: 150px;
    border-radius: 100px;
    background: #D63C22;
}
.client-2 {
    width: 350px;
    height: 150px;
    border-radius: 100px;
    background: #4C7CFF;
}
.client-3 {
    width: 350px;
    height: 150px;
    border-radius: 100px;
    background: #F18F71;
}
.client-4 {
    width: 350px;
    height: 150px;
    border-radius: 100px;
    background: #FFB62B;
}
.client-1-img, .client-2-img, .client-3-img, .client-4-img {
    margin-top: 35px;
}

  /* another scroller */
  .scroller {
    max-width: 100%;
  }
  
  .scroller__inner {
    padding-block: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(
      90deg,
      transparent,
      white 10%,
      white 70%,
      transparent
    );
    mask: linear-gradient(90deg, transparent, white 10%, white 70%, transparent);
  }
  
  .scroller[data-animated="true"] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s)
      var(--_animation-direction, forwards) linear infinite;
  }
  
  .scroller[data-direction="right"] {
    --_animation-direction: reverse;
  }
  
  .scroller[data-direction="left"] {
    --_animation-direction: forwards;
  }
  
  .scroller[data-speed="fast"] {
    --_animation-duration: 20s;
  }
  
  .scroller[data-speed="slow"] {
    --_animation-duration: 60s;
  }
  
  @keyframes scroll {
    to {
      transform: translate(calc(-50% - 0.5rem));
    }
  }
  
  /* general styles */
  
  :root {
    --clr-neutral-100: hsl(0, 0%, 100%);
    --clr-primary-100: hsl(205, 15%, 58%);
    --clr-primary-400: hsl(215, 25%, 27%);
    --clr-primary-800: hsl(217, 33%, 17%);
    --clr-primary-900: hsl(218, 33%, 9%);
  }
  
  .tag-list {
    margin: 0;
    padding-inline: 0;
    list-style: none;
  }
  
  .tag-list li {
    padding: 0.5rem;
    /* background: var(--clr-primary-400); */
    border-radius: 0.5rem;
    /* box-shadow: 0 0.5rem 1rem -0.25rem var(--clr-primary-900); */
  }
  
  

/* Testimonials Section */
.testimonials-section {
    background:#FFFFFF;
    border-radius:30px;
    margin-top:1px;
    padding-top:120px;
    padding-bottom:120px;
}
.testimonials-title {
    font-family: 'tn-condensed-medium';
    font-size: 72px;
    text-transform: uppercase;
}
.testimonials-para {
    margin-top: 30px;
    font-family: 'tn-regular';
    font-size: 28px;
    line-height: 140%;
}
.testimonial-arrows {
    margin-top: 80px;
}
.testimonial-images {
    margin-top: 100px;
}
.testimonial-content {
    margin-top: 40px;
}
.testimonial-content-text {
    font-family: 'tn-regular';
    font-size: 30px;
    font-style: italic;
    line-height: 110%;
}
.testimonial-founder-label {
    margin-top: 56px;
    font-family: 'tn-regular';
    font-size: 28px;
}
.light-text {
    color: #7B7B7B;
}
.testimonial-img:hover {
    cursor: pointer;
}
.testimonial-arrow:hover {
    cursor: pointer;
}

/* Insights Section */
.insights-section {
    background:#FFFFFF;
    border-radius:30px;
    margin-top:1px;
    padding-top:120px;
    padding-bottom:120px;
}
.insights-title {
    font-family: 'tn-condensed-medium';
    font-size: 72px;
    text-transform: uppercase;
}
.insights-contact-btn {
    background-color: #241BDC;
    text-transform: uppercase;
    color: #FFFFFF;
    font-size: 24px;
    padding-right: 12px;
    padding-left: 16px;
}
.insights-contact-btn:hover {
    background-color: #241BDC;
    color: #FFFFFF;
}
.insights-contact-arrow-icon {
    transition: transform 0.3s ease-in-out;
}
.insights-contact-arrow-icon.rotated {
    transform: rotate(45deg);
}
.insight-row {
    padding-top: 50px;
    padding-bottom: 50px;
    border-top: 1px solid #CECECE;
    /* height: 240px; */
}
.insight-row-1 {
    margin-top: 80px;
}
.insight-img {
    height: 199px;
    background: url('../../assets/other/insight-img.png') no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 24px;

}
.insight-img-1, .insight-img-2 {
    width:0px;
    transition: width 0.3s ease-in-out;
}
.insight-row:hover > div > div > .insight-img-1 {
    width: 318px;
}
.insight-row:hover > div > div > .insight-img-2 {
    width: 318px;
}
.insight-title {
    font-family: 'tn-medium';
    font-size: 46px;
    line-height: 110%;
}
.insight-label {
    margin-top: 52px;
    font-family: 'tn-regular';
    font-size: 18px;
    color: #404145;
}

@media (max-width: 768px) {
    /* Hero Section */
    .hero-section {
        background-color: #FFFFFF;
        border-radius:30px;
        margin-top:1px;
        padding-top:40px;
        padding-bottom:40px;
    }
    .hero-gif-animation {
        height: 50px;
    }
    .hero-text {
        font-size: 62px;
        font-family: 'tn-condensed-medium';
        text-transform: uppercase;
        line-height: 72px;
    }
    .hero-para {
        font-size: 18px;
        font-family: 'tn-regular';
        line-height: 140%;
    }

    /* About Section */
    .about-section {
        background:#FFFFFF;
        border-radius:30px;
        margin-top:1px;
        padding-top:20px;
        padding-bottom:0px;
    }
    .about-para {
        font-family: 'tn-regular';
        font-size: 16px;
        line-height: 140%;
    }
    .about-contact-btn {
        font-size: 16px;
    }
    .about-contact-arrow-icon {
        height: 40px;
    }
    .about-img {
        margin-top: 40px;
    }
    .impact-block {
        margin-top: 40px;
    }
    #impactHeading {
        font-size: 36px;
    }
    .metrics-box {
        margin-top: 30px
    }
    .impact-metrics {
        font-family: 'ivy-presto-light';
        font-size: 42px;
        color: #241BDC;
    }
    .impact-metric-text {
        font-size: 16px;
        font-family: 'tn-regular';
        color: #1F2327;
    }
    .hoko-animation-block {
        background:#FFB62B;
        width:100%;
        padding-top: 40px;
        padding-bottom: 40px;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;;
        margin-top: 40px;
        height: auto;
    }
    #hokoLogoBox1 {
        margin-top: 0;
    }
    .hoko-img {
        height: 40px;
    }

    .hoko-img-1{
        width: 40% !important;
    }
    .hoko-img-2 {
        width: 60% !important;
    }

    /* What We Do Section */
    .what-we-do-section {
        background:#FFFFFF;
        border-radius:30px;
        margin-top:1px;
        padding-top:40px;
        padding-bottom:40px;
        padding-left: 0px;

    }
    .secondary-heading {
        font-family: 'tn-condensed-medium';
        font-size: 36px;
        text-transform: uppercase;
    }
    .service-box-1 {
        margin-top: 40px;
    }
    .projects-contact-btn {
        font-size: 16px;
    }
    .projects-contact-arrow-icon {
        height: 40px;
    }

    /* Projects Section */
    .projects-section {
        background:#FFFFFF;
        border-radius:30px;
        margin-top:1px;
        padding-top:40px;
        padding-bottom:40px;
    }
    .projects-title-row {
        margin-top: 40px;
    }   
    .projects-title {
        font-size: 36px;
    }

    .project-1-hover-bg, .project-2-hover-bg, .project-3-hover-bg, .project-4-hover-bg, .project-5-hover-bg{
        background: none;
        display: inline !important;
    }
    .project-hover-cta span {
        display: none;
    }
    .project-hover-cta {
        border: none;
        padding-left: 0px;
        padding-right: 0px;
        top: 75%;
        left: 35%;
    }
    .project-hover-cta:hover {
        border: none;
        padding-left: 0px;
        padding-right: 0px;
        top: 75%;
        left: 35%;
    }

    /* Clients Section */
    .clients-section {
        background:#FFFFFF;
        border-radius:30px;
        margin-top:1px;
        padding-top:40px;
        padding-bottom:40px;
    }
    .clients-title {
        font-family: 'tn-condensed-medium';
        font-size: 36px;
        text-transform: uppercase;
    }
    .clients-para {
        margin-top: 20px;
        font-family: 'tn-regular';
        font-size: 18px;
        line-height: 140%;
    }
    .client-1 {
        width: 120px;
        height: 60px;
        border-radius: 100px;
        background: #D63C22;
    }
    .client-2 {
    width: 120px;
    height: 60px;
    border-radius: 100px;
    background: #4C7CFF;
    }
    .client-3 {
        width: 120px;
        height: 60px;
        border-radius: 100px;
        background: #F18F71;
    }
    .client-4 {
        width: 120px;
        height: 60px;
        border-radius: 100px;
        background: #FFB62B;
    }
    .client-1-img, .client-2-img, .client-3-img, .client-4-img {
        height: 28px;
        margin-top: 16px;
    }

    /* Testimonials Section */
    .testimonials-section {
        background:#FFFFFF;
        border-radius:30px;
        margin-top:1px;
        padding-top:40px;
        padding-bottom:40px;
    }
    .testimonials-title {
        font-family: 'tn-condensed-medium';
        font-size: 36px;
        text-transform: uppercase;
    }
    .testimonials-para {
        margin-top: 20px;
        font-family: 'tn-regular';
        font-size: 18px;
        line-height: 140%;
    }
    .testimonial-images {
        margin-top: 30px;
    }
    .testimonial-content {
        margin-top: 30px;
    }
    .testimonial-content-text {
        font-family: 'tn-regular';
        font-size: 20px;
        font-style: italic;
        line-height: 110%;
    }
    .testimonial-founder-label {
        margin-top: 20px;
        font-size: 16px;
    }

    /* Insights Section */
    .insights-section {
        background:#FFFFFF;
        border-radius:30px;
        margin-top:1px;
        padding-top:40px;
        padding-bottom:40px;
    }
    .insights-title {
        font-family: 'tn-condensed-medium';
        font-size: 36px;
        text-transform: uppercase;
    }
    .insights-contact-btn {
        font-size: 16px;
        margin-top: 20px;
    }
    .insight-row-1 {
        margin-top: 40px;
}

    .insights-contact-arrow-icon {
        height: 40px;
    }
    .insight-img-1, .insight-img-2 {
        width:100%;
    }
    .insight-row:hover > div > div > .insight-img-1, .insight-row:hover > div > div > .insight-img-2 {
        width: 100%;
    }

    .insight-title {
        margin-top: 20px;
        font-size: 20px;
    }
    .insight-label {
        font-size: 18px;
        margin-top: 24px;
    }
    .insight-link-arrow {
        margin-top: 20px;
    }
}