/* 
 * DM Sans Variable Font
 * Single file for all weights (100-1000) and italics
 */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/DMSans-VariableFont_opsz,wght.ttf') format('truetype');
}

@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/DMSans-Italic-VariableFont_opsz,wght.ttf') format('truetype');
}

/* 
 * Montserrat Variable Font
 */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
}

/* 
 * Noto Serif Variable Font
 */

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/NotoSerif-VariableFont_wdth,wght.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/NotoSerif-Italic-VariableFont_wdth,wght.ttf') format('truetype');
}

/* System font fallback */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
               Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  font-weight: 400;
}

.fonts-loaded body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 
               Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

/* Font classes for specific uses */
.font-dm-sans {
  font-family: 'DM Sans', sans-serif;
}

.font-montserrat {
  font-family: 'Montserrat', sans-serif;
}

.font-noto-serif {
  font-family: 'Noto Serif', serif;
}



:root {
  /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
  --primary: #91ddcf;
  --primaryLight: #ffba43;
  --secondary: #ffba43;
  --secondaryLight: #ffba43;
  --headerColor: #1a1a1a;
  --bodyTextColor: #4e4b66;
  --bodyTextColorWhite: #fafbfc;
  /* 13px - 16px */
  --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
  /* 31px - 49px */
  --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
  --bodyFontSize: 1rem;
  /* 60px - 100px top and bottom */
  --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
  margin: 0;
  padding: 0;
}

*,
*:before,
*:after {
  /* prevents padding from affecting height and width */
  box-sizing: border-box;
}
.cs-topper {
  font-size: var(--topperFontSize);
  line-height: 1.2em;
  text-transform: uppercase;
  text-align: inherit;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
  display: block;
}

.cs-title {
  font-size: var(--headerFontSize);
  font-weight: 900;
  line-height: 1.2em;
  text-align: inherit;
  max-width: 43.75rem;
  margin: 0 0 1rem 0;
  color: var(--headerColor);
  position: relative;
}

.cs-text {
  font-size: var(--bodyFontSize);
  line-height: 1.5em;
  text-align: inherit;
  width: 100%;
  max-width: 40.625rem;
  margin: 0;
  color: var(--bodyTextColor);
}

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #contact-1750 {
    padding: var(--sectionPadding);
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #contact-1750 .cs-container {
    width: 100%;
    /* changes to 1024 on desktop */
    max-width: 44rem;
    margin: auto;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    /* 48px - 64px */
    gap: clamp(3rem, 5vw, 4rem);
  }
  #contact-1750 .cs-content {
    /* set text align to center if content needs to be centrally aligned */
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* aligns content to the left, set to center to centrally align */
    align-items: flex-start;
  }
  #contact-1750 .cs-form-group {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    /* resets to 0 at tablet */
    margin: auto;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #contact-1750 .cs-title {
    margin: 0 0 1.5rem;
  }
  #contact-1750 .cs-form {
    width: 100%;
    /* prevents flexbox from affecting height and width */
    box-sizing: border-box;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
  }
  #contact-1750 .cs-label {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2em;
    color: var(--headerColor);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-column: span 12;
    gap: 0.5rem;
  }
  #contact-1750 .cs-input {
    font-size: 1rem;
    width: 100%;
    /* 46px - 56px */
    height: clamp(2.875rem, 4.5vw, 3.5rem);
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    padding: 0;
    padding-left: 1.5rem;
    background-color: #f7f7f7;
    color: var(--headerColor);
    border: none;
  }
  #contact-1750 .cs-input::placeholder {
    color: var(--bodyTextColor);
  }
  #contact-1750 .cs-textarea {
    font-family: inherit;
    min-height: 7.5rem;
    padding-top: 1.5rem;
  }
  #contact-1750 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    background-color: var(--primary);
    overflow: hidden;
    color: #1a1a1a;
    border: none;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #contact-1750 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #contact-1750 .cs-button-solid:hover {
    color: #fff;
  }
  #contact-1750 .cs-button-solid:hover:before {
    width: 100%;
  }
  #contact-1750 .cs-submit {
    margin: 1rem 0 0;
    color: var(--bodyTextColorWhite);
    grid-column: span 12;
    justify-self: flex-start;
  }
  #contact-1750 .cs-submit:hover {
    cursor: pointer;
  }
  #contact-1750 .cs-info-group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  #contact-1750 .cs-detail {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2em;
    color: var(--bodyTextColor);
    display: block;
  }
  #contact-1750 .cs-picture-group {
    width: 110%;
    height: 100vw;
    /* removed at desktop */
    max-height: 31.375rem;
    margin-top: 3rem;
    overflow: hidden;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  #contact-1750 .cs-iframe {
    width: 100%;
    height: 100%;
    display: block;
  }
  #contact-1750 .cs-graphic {
    width: 100%;
    min-width: 80rem;
    height: auto;
    object-fit: cover;
    position: absolute;
    left: 50%;
    z-index: 0;
    transform: translateX(-50%);
  }
  #contact-1750 .cs-top {
    top: 0;
  }
  #contact-1750 .cs-left {
    left: 4%;
    transform: rotate(270deg);
    transform-origin: left;
  }
  #contact-1750 .cs-bottom {
    bottom: 0;
    left: 0;
    transform: rotateX(180deg);
  }
  #contact-1750 .cs-dark {
    display: none;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #contact-1750 {
    /* using flex: 1 on both group elements to ensure they're both the same width */
  }
  #contact-1750 .cs-container {
    flex-direction: row;
    align-items: center;
  }
  #contact-1750 .cs-form-group {
    flex: 1;
  }
  #contact-1750 .cs-info-group {
    flex: 1;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #contact-1750 .cs-container {
    width: 65%;
    max-width: 64rem;
    margin: 0 auto 0 0;
    padding: 2.5rem 1.5rem;
  }
  #contact-1750 .cs-picture-group {
    width: 90%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    z-index: -1;
    transform: none;
  }
  #contact-1750 .cs-picture-group {
    margin-left: -12.75rem;
    left: 50%;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #contact-1750 .cs-label:nth-of-type(2),
  #contact-1750 .cs-label:nth-of-type(3) {
    grid-column: span 6;
  }
}
/* Largest Desktop - 1920px */
@media only screen and (min-width: 120rem) {
  #contact-1750 {
    padding-top: 7vw;
    padding-bottom: 9vw;
  }
  #contact-1750 .cs-container {
    margin: 0 auto;
    transform: translateX(-22rem);
  }
}

/*-- -------------------------- -->
<---            Hero            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-1946 {
    padding: var(--sectionPadding);
    /* 160px - 200px */
    /* padding-top: clamp(10rem, 20vw, 12.5rem); */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #hero-1946 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  #hero-1946 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    /* 40px - 52px */
    margin-bottom: clamp(2.5rem, 5vw, 3.25rem);
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
    position: relative;
    z-index: 1;
  }
  #hero-1946 .cs-flex {
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #hero-1946 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.438rem, 5vw, 3.813rem);
  }
  #hero-1946 .cs-text {
    margin-bottom: 1.25rem;
  }
  #hero-1946 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    /* 32px - 48px */
    padding: 0 clamp(2rem, 4vw, 3rem);
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
    transition: background-color 0.3s;
  }
  #hero-1946 .cs-button-solid:hover {
    background-color: #000;
    color: #fff;
  }
  #hero-1946 .cs-picture {
    width: 100%;
    /* 280px - 510px */
    height: clamp(17.5rem, 58.6vw, 31.875rem);
    /* 16px - 20px */
    margin-bottom: clamp(1rem, 2vw, 1.25rem);
    display: block;
    position: relative;
  }
  #hero-1946 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2.5rem;
    position: absolute;
  }
  #hero-1946 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #hero-1946 .cs-item {
    text-align: center;
    list-style: none;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    /* 24px - 32px */
    padding: clamp(1.5rem, 3vw, 2rem);
    background-color: #f7f7f7;
    border-radius: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-column: span 12;
    position: relative;
    z-index: 1;
    transition: border-color 0.3s;
  }
  #hero-1946 .cs-item:hover {
    border-color: var(--primary);
  }
  #hero-1946 .cs-item:hover .cs-h3 {
    color: var(--primary);
  }
  #hero-1946 .cs-item:hover .cs-icon {
    transform: rotateY(360deg);
  }
  #hero-1946 .cs-icon-picture {
    margin-bottom: 1.25rem;
    perspective: 700px;
    transform-style: preserve-3d;
  }
  #hero-1946 .cs-icon {
    width: 2.5rem;
    height: auto;
    display: block;
    transition: transform 0.5s;
  }
  #hero-1946 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.5em;
    text-align: inherit;
    margin: 0;
    margin-bottom: 0.75rem;
    color: var(--headerColor);
    transition: color 0.3s;
  }
  #hero-1946 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColor);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-1946 .cs-text {
    font-size: 1.25rem;
  }
  #hero-1946 .cs-item {
    text-align: left;
    margin: 0;
    align-items: flex-start;
    grid-column: span 6;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #hero-1946 .cs-content {
    display: flex;
    flex-direction: column;
  }
  #hero-1946 .cs-title {
    max-width: 46.875rem;
  }
  #hero-1946 .cs-item {
    grid-column: span 3;
  }
}
/* Large Desktop 1300px */
@media only screen and (min-width: 81.25rem) {
  #hero-1946 .cs-title {
    margin: 0;
  }
  #hero-1946 .cs-container {
    flex-direction: column;
  }
  #hero-1946 .cs-content {
    text-align: left;
    max-width: 80rem;
    gap: 1.25rem;
    flex-direction: row;
    align-items: flex-start;
  }
  #hero-1946 .cs-flex {
    width: 50%;
    max-width: 39.375rem;
  }
}

.main-wrapper img {
  width: 100%;
  display: block;
}
.main-wrapper a {
  color: #000;
  text-decoration: none;
}
.main-wrapper ul li {
  list-style-type: none;
}
.navbar {
  background: #fff;
  padding: 0 1rem;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  z-index: 10;
}
.brand-and-icon {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid #ddd;
}
.navbar-brand {
  font-size: 1.8rem;
  letter-spacing: 3px;
  font-weight: 700;
}
.navbar-toggler {
  display: block;
  border: none;
  background: transparent;
  font-size: 1.8rem;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  transition: all 0.4s ease;
  /* border: 2px solid #000; */
  border-radius: 4px;
}
.navbar-toggler:hover {
  opacity: 0.7;
}
.navbar-collapse {
  overflow-y: scroll;
  display: none;
}
.navbar-nav > li > a {
  text-transform: uppercase;
  font-size: 1.1rem;
  font-weight: 700;
  display: block;
  padding: 0.6rem 0;
  margin: 0.2rem 0;
  border-bottom: 1px solid #ddd;
  border-radius: 1px;
  position: relative;
  transition: all 0.4s ease;
}
.drop-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.navbar-nav > li > a:hover {
  opacity: 0.7;
}
.sub-menu h4 {
  text-transform: capitalize;
  font-size: 1rem;
  padding: 0.5rem 0;
}
.sub-menu ul li {
  text-transform: capitalize;
  padding: 0.2rem 0;
  margin: 0.2rem 0;
  font-size: 0.95rem;
}
.sub-menu ul li a {
  opacity: 0.8;
  transition: all 0.5s ease;
}
.sub-menu ul li a:hover {
  padding-left: 14px;
  opacity: 0.9;
}
.sub-menu {
  display: none;
}

.sub-menu-item {
  padding-left: 1.2rem;
}
.sub-menu-item:nth-child(3) {
  background: #ddd;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.sub-menu-item:nth-child(3) h2 {
  text-transform: capitalize;
  margin: 1.5rem 0;
}
.sub-menu-item:nth-child(3) .btn {
  border: 1px solid #000;
  text-transform: uppercase;
  font-size: 0.9rem;
  padding: 0.6rem 1rem;
  cursor: pointer;
  background: #000;
  color: #fff;
  transition: all 0.5s ease;
}
.sub-menu-item:nth-child(3) .btn:hover {
  background: transparent;
  color: #000;
}
.sub-menu-item:nth-child(1) {
  /* width: 50%; */
  /* margin: 0 auto; */
  padding: 1rem;
  /* padding-left: 0; */
}
.sub-menu-item:nth-child(2) {
  padding: 1rem;
  /* margin: 0 auto; */
  padding-left: 0;
}
.sub-menu-item:nth-child(3) {
  padding: 1rem;
  padding-bottom: 1.5rem;
  /* margin: 0 auto; */
  padding-left: 0;
}
.sub-menu-item:nth-child(4) {
  /* width: 50%; */
  /* margin: 0 auto; */
  padding-left: 0;
}
/* Media Queries */
@media screen and (min-width: 992px) {
  .navbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding: 0 5rem;
    position: relative;
  }
  .navbar-toggler {
    display: none;
  }
  .brand-and-icon {
    flex: 0 0 100px;
    border-bottom: none;
    padding: 0;
  }
  .navbar-collapse {
    display: block !important;
    overflow-y: hidden;
    flex: 1 0 auto;
  }
  .navbar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .navbar-nav > li > a {
    border-bottom: none;
    margin: 0 0.4rem;
    padding: 1.7rem 1.8rem 1.7rem 0.8rem;
    font-size: 0.8rem;
  }
  .sub-menu {
    position: absolute;
    left: 0;
    width: 100%;
    top: 100%;
    background: #f8f8f8;
  }
  .navbar-nav > li:hover .sub-menu {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    /* padding: 0 5rem; */
  }
  .navbar-nav > li {
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.4s ease;
  }
  .navbar-nav > li:hover {
    border-bottom-color: #000;
  }
  .sub-menu-item {
    padding-left: 1rem;
  }
  .sub-menu-item:nth-child(3) {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/*start global */

/* @import url("https://fonts.googleapis.com/css?family=Roboto"); */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "DM Sans", sans-serif;
}

.container {
  margin: auto;
  padding-right: 15px;
  padding-left: 15px;
}

.heading h1:after {
  content: "";
  display: block;
  width: 8px;
  height: 2px;
  background: #bababa;
  margin-top: 4px;
}

.clear-fix {
  clear: both;
}

.hidden {
  visibility: hidden !important;
}

/* end global */

/* start of our services section */

#our-services {
  background: #f6f6f6;
  min-height: fit-content;
  padding-top: 10vh;
  padding-bottom: 10vh;
}

/* OUR SEERVICES LEFT SIDE */

#our-services .desc {
  width: 33%;
  float: left;
}

#our-services .desc .heading h1 {
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1.4px;
  margin-bottom: 30px;
}

#our-services .desc .text {
  color: #bababa;
}

/* OUR SERVICES RIGHT SIDE */

#our-services .services {
  width: 67%;
  float: left;
}

#our-services .services .column {
  float: left;
  margin-right: 60px;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

#our-services .services .column .service {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  background: #ffffff;
  transition: all 0.1s ease;
  margin-bottom: 7px;
}

#our-services .services .column .service:hover {
  background: #28282e;
  color: #fff;
}

#our-services .services .column .service:hover .service-icon {
  color: #fff;
}

#our-services .services .column .service .service-desc {
  transform: rotate(-45deg);
  text-align: center;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: bold;
  transition: transform 0.3s ease;
}

#our-services .services .column .service .service-desc .service-icon {
  font-size: 20px;
  margin-bottom: 5px;
  color: var(--primary);
}

/* end of our services section */

/* media query */

@media all and (max-width: 967px) {
  #our-services {
    padding-top: 60px;
  }

  #our-services .desc {
    width: 100%;
    float: none;
    margin-bottom: 30px;
  }

  #our-services .services {
    width: 100%;
  }

  #our-services .services .column {
    transform: rotate(0deg);
    margin-right: 10px;
  }

  #our-services .services .column .service .service-desc {
    transform: rotate(0deg);
  }
}

/* Custom Scrollbar Styling */
.custom-scrollbar::-webkit-scrollbar {
  height: 6px; /* Height of the horizontal scrollbar */
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent; /* Transparent track */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #319795; /* Tailwind's teal-500 */
  border-radius: 3px; /* Rounded corners for the thumb */
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #2c7a7b; /* Tailwind's teal-600 on hover */
}

/* Firefox scrollbar styling */
.custom-scrollbar {
  scrollbar-width: thin; /* Makes scrollbar thinner */
  scrollbar-color: #319795 transparent; /* Thumb color and track color */
}

/* Hide scrollbar for IE, Edge, and Firefox when not scrolling */
.custom-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.custom-scrollbar::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome, Safari, and Opera */
}

@media (hover: hover) and (pointer: fine) {
  /* Show custom scrollbar on hover for devices that support hover */
  .custom-scrollbar::-webkit-scrollbar {
    display: block;
  }

  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #319795 transparent;
  }
}

/* animation of snowflake */
.spin-slow {
  animation: spin 10s linear infinite;
}

.teal-filter {
  @apply filter brightness-0 sepia saturate-500 hue-rotate-170;
}

/* Hide scrollbar for all browsers */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Services section */
.service-card {
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-8px);
}

.sub-category {
  transition: all 0.2s ease;
}

.sub-category:hover {
  color: #0d9488;
  padding-left: 0.5rem;
}

.icon-wrapper {
  transition: all 0.3s ease;
}

.service-card:hover .icon-wrapper {
  background-color: #0d9488;
}

.service-card:hover .icon-wrapper svg {
  color: white;
}

.view-all-btn {
  transition: all 0.3s ease;
}

.view-all-btn:hover span {
  transform: translateX(4px);
}

.top-icon {
  filter: drop-shadow(0 4px 6px rgba(13, 148, 136, 0.1));
}

/* CTA section */

.gradient-bg {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
}

.floating {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

.shine-effect {
  position: relative;
  overflow: hidden;
}

.shine-effect::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 45%,
    rgba(255, 255, 255, 0.1) 47%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.1) 53%,
    transparent 55%
  );
  transform: rotate(45deg);
  animation: shine 3s infinite;
}

@keyframes shine {
  0% {
    transform: translateX(-100%) rotate(45deg);
  }
  80%,
  100% {
    transform: translateX(100%) rotate(45deg);
  }
}

.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.4);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(13, 148, 136, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(13, 148, 136, 0);
  }
}

.dot {
  animation: dot-pulse 1.5s infinite;
  opacity: 0;
}

.dot:nth-child(2) {
  animation-delay: 0.2s;
}
.dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes dot-pulse {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* yt lite embed */
lite-youtube {
  background-color: #000;
  position: relative;
  display: block;
  contain: content;
  background-position: center center;
  background-size: cover;
  cursor: pointer;
  max-width: 100%;
  border-radius: 1rem;
  height: 100%;
}

lite-youtube::after {
  content: "";
  display: block;
  padding-bottom: calc(100% / (16 / 9));
}

lite-youtube > .lty-playbtn {
  width: 70px;
  height: 46px;
  background-color: #212121;
  z-index: 1;
  opacity: 0.8;
  border-radius: 14%;
  transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
  border: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

lite-youtube:hover > .lty-playbtn {
  background-color: red;
  opacity: 1;
}

lite-youtube > .lty-playbtn:before {
  content: "";
  border-style: solid;
  border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

lite-youtube > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
}

.swiper-button-next,
.swiper-button-prev {
  color: #0d9488 !important;
  background: white;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 20px !important;
}

.swiper-pagination-bullet-active {
  background: #0d9488 !important;
}
.client-tab {
  transition: all 0.3s ease;
  border-bottom: 2px solid transparent;
}
.client-tab.active {
  border-bottom: 2px solid #2563eb;
  background: linear-gradient(to right, #eef2ff, transparent);
}
.case-study-content {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.case-study-content.active {
  display: block;
  opacity: 1;
}
.metric-card {
  background: linear-gradient(145deg, #ffffff, #f3f4f6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.progress-bar {
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
}
.progress-value {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  transition: width 0.5s ease;
}
.slides-container {
  position: relative;
  height: 100%;
}

.slide {
  top: 0;
  left: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.slide.active {
  opacity: 1 !important;
  visibility: visible !important;
}

.slide-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #e5e7eb;
  cursor: pointer;
  transition: all 0.3s ease;
}

.slide-indicator.active {
  width: 24px;
  border-radius: 4px;
  background-color: #2563eb;
}