:root {
  /* Base font sizes for different sections */
  --font-size-deskMainHeader-xl: 72px;
  --font-size-mobileMainHeader-xl: 45px;
  --font-size-topBannerText-xl: 18px;
  --font-size-para-xl: 18px;
  --font-size-button-xl: 18px;
  --font-size-button-secondary-xl: 16px;
  --font-size-main-xl: 36px;
  --font-size-48: 48px;

  /* Scaling factors */
  --scale-xxs: 0.8;
  --scale-xs: 1;
  --scale-sm: 1;
  --scale-md: 1;
  --scale-lg: 1;
  --scale-2xl: 1.2;
  --scale-3xl: 1.5;
  --scale-4xl: 1.8;
}

:root {
  --font-size-deskMainHeader: calc(
    var(--font-size-mobileMainHeader-xl) * var(--scale-xxs)
  );
  --font-size-topBannerText: calc(
    var(--font-size-topBannerText-xl) * var(--scale-xxs)
  );
  --font-size-para: calc(var(--font-size-para-xl) * var(--scale-xxs));
  --font-size-main: calc(var(--font-size-main-xl) * var(--scale-xxs));
  --font-size-48: calc(var(--font-size-48-xl) * var(--scale-xxs));
  --font-size-button: calc(var(--font-size-button-xl) * var(--scale-xxs));
  --font-size-button-secondary: calc(
    var(--font-size-button-secondary-xl) * var(--scale-xxs)
  );
}
/* } */
@media (min-width: 360px) {
  :root {
    --font-size-deskMainHeader: calc(
      var(--font-size-mobileMainHeader-xl) * var(--scale-xs)
    );
    --font-size-topBannerText: calc(
      var(--font-size-topBannerText-xl) * var(--scale-xs)
    );
    --font-size-para: calc(var(--font-size-para-xl) * var(--scale-xs));
    --font-size-main: calc(var(--font-size-main-xl) * var(--scale-xs));
    --font-size-48: calc(var(--font-size-48-xl) * var(--scale-xs));
    --font-size-button: calc(var(--font-size-button-xl) * var(--scale-xs));
    --font-size-button-secondary: calc(
      var(--font-size-button-secondary-xl) * var(--scale-xs)
    );
  }
}

@media (min-width: 640px) {
  :root {
    --font-size-deskMainHeader: calc(
      var(--font-size-mobileMainHeader-xl) * var(--scale-sm)
    );
    --font-size-topBannerText: calc(
      var(--font-size-topBannerText-xl) * var(--scale-sm)
    );
    --font-size-para: calc(var(--font-size-para-xl) * var(--scale-sm));
    --font-size-main: calc(var(--font-size-main-xl) * var(--scale-sm));
    --font-size-48: calc(var(--font-size-48-xl) * var(--scale-sm));
    --font-size-button: calc(var(--font-size-button-xl) * var(--scale-sm));
    --font-size-button-secondary: calc(
      var(--font-size-button-secondary-xl) * var(--scale-sm)
    );
  }
  /* .about-ul ul {
    position: relative;
  }
  .about-ul ul::after {
    content: "";
    position: absolute;
    top: 0;
    right: 20px;
    bottom: 0;
    width: 1px;
    background-color: red;
  } */
}

@media (min-width: 768px) {
  :root {
    --font-size-deskMainHeader: calc(
      var(--font-size-mobileMainHeader-xl) * var(--scale-md)
    );
    --font-size-topBannerText: calc(
      var(--font-size-topBannerText-xl) * var(--scale-md)
    );
    --font-size-para: calc(var(--font-size-para-xl) * var(--scale-md));
    --font-size-main: calc(var(--font-size-main-xl) * var(--scale-md));
    --font-size-48: calc(var(--font-size-48-xl) * var(--scale-md));
    --font-size-button: calc(var(--font-size-button-xl) * var(--scale-md));
    --font-size-button-secondary: calc(
      var(--font-size-button-secondary-xl) * var(--scale-md)
    );
  }
  /* .about-ul ul::after {
    right: -20px;
  } */
}

@media (min-width: 1024px) {
  :root {
    --font-size-deskMainHeader: calc(
      var(--font-size-deskMainHeader-xl) * var(--scale-lg)
    );
    --font-size-topBannerText: calc(
      var(--font-size-topBannerText-xl) * var(--scale-lg)
    );
    --font-size-para: calc(var(--font-size-para-xl) * 1);
    --font-size-main: calc(var(--font-size-main-xl) * 0.8);
    --font-size-48: calc(var(--font-size-48-xl) * var(--scale-lg));
    --font-size-button: calc(var(--font-size-button-xl) * var(--scale-lg));
    --font-size-button-secondary: calc(
      var(--font-size-button-secondary-xl) * var(--scale-lg)
    );
  }
  /* .about-ul ul::after {
    right: 20px;
  } */
}

@media (min-width: 1280px) {
  :root {
    --font-size-deskMainHeader: var(--font-size-deskMainHeader-xl);
    --font-size-topBannerText: var(--font-size-topBannerText-xl);
    --font-size-para: var(--font-size-para-xl);
    --font-size-main: var(--font-size-main-xl);
    --font-size-48: var(--font-size-48-xl) *;
    --font-size-button: var(--font-size-button-xl);
    --font-size-button-secondary: var(--font-size-button-secondary-xl);
  }
}
@media (min-width: 1408px) {
  :root {
    --font-size-deskMainHeader: calc(var(--font-size-deskMainHeader-xl) * 1.1);
  }
}

@media (min-width: 1536px) {
  :root {
    --font-size-deskMainHeader: calc(
      var(--font-size-deskMainHeader-xl) * var(--scale-2xl)
    );
    --font-size-topBannerText: calc(
      var(--font-size-topBannerText-xl) * var(--scale-2xl)
    );
    --font-size-para: calc(var(--font-size-para-xl) * var(--scale-2xl));
    --font-size-main: calc(var(--font-size-main-xl) * var(--scale-2xl));
    --font-size-48: calc(var(--font-size-48-xl) * var(--scale-2xl));
    --font-size-button: calc(var(--font-size-button-xl) * var(--scale-2xl));
    --font-size-button-secondary: calc(
      var(--font-size-button-secondary-xl) * var(--scale-2xl)
    );
  }
}
@media (min-width: 1728px) {
  :root {
    --font-size-deskMainHeader: calc(var(--font-size-deskMainHeader-xl) * 1.35);
  }
}
@media (min-width: 1920px) {
  :root {
    --font-size-deskMainHeader: calc(
      var(--font-size-deskMainHeader-xl) * var(--scale-3xl)
    );
    --font-size-topBannerText: calc(
      var(--font-size-topBannerText-xl) * var(--scale-3xl)
    );
    --font-size-para: calc(var(--font-size-para-xl) * var(--scale-3xl));
    --font-size-main: calc(var(--font-size-main-xl) * var(--scale-3xl));
    --font-size-48: calc(var(--font-size-48-xl) * var(--scale-3xl));
    --font-size-button: calc(var(--font-size-button-xl) * var(--scale-3xl));
    --font-size-button-secondary: calc(
      var(--font-size-button-secondary-xl) * var(--scale-3xl)
    );
  }
}
@media (min-width: 2240px) {
  :root {
    --font-size-deskMainHeader: calc(var(--font-size-deskMainHeader-xl) * 1.65);
  }
}
@media (min-width: 2560px) {
  :root {
    --font-size-deskMainHeader: calc(
      var(--font-size-deskMainHeader-xl) * var(--scale-4xl)
    );
    --font-size-topBannerText: calc(
      var(--font-size-topBannerText-xl) * var(--scale-4xl)
    );
    --font-size-para: calc(var(--font-size-para-xl) * var(--scale-4xl));
    --font-size-main: calc(var(--font-size-main-xl) * var(--scale-4xl));
    --font-size-48: calc(var(--font-size-48-xl) * var(--scale-4xl));
    --font-size-button: calc(var(--font-size-button-xl) * var(--scale-4xl));
    --font-size-button-secondary: calc(
      var(--font-size-button-secondary-xl) * var(--scale-4xl)
    );
  }
}

/* Custom utility classes */

.page-main-header-size {
  font-size: var(--font-size-deskMainHeader);
}
.top-banner-size {
  font-size: var(--font-size-topBannerText);
}
.common-title-size {
  font-size: var(--font-size-main);
}
.common-para-size {
  font-size: var(--font-size-para);
}
.secondary-header-size {
  font-size: var(--font-size-48);
}
.common-button-size {
  font-size: var(--font-size-button);
}
.common-button-secondary-size {
  font-size: var(--font-size-button-secondary);
}

/* common clip paths */
.bottom-right-slant {
  clip-path: polygon(0 0, 100% 0, 100% 75%, 90% 100%, 0 100%);
}
.top-left-slant {
  clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%, 0 14%);
}
@media (min-width: 640px) and (max-width: 767px) {
  /* .about-ul ul::after {
    right: -50px;
  } */
}
/* common components style */

.home-our-services-text {
  color: #ff8200;
}
.auido-explore-text {
  color: #61e063;
}
.accept-btn:hover::before {
  content: "";
  width: 52px;
  height: 20px;
  border: 2px solid #ff8200;
  transform: rotate(239deg);
  position: absolute;
  border-top: 0;
  border-left: 0;
  border-bottom: 0;
  top: 61px;
  right: -2rem;
  backdrop-filter: blur(18px);
}
@media (min-width: 2560px) {
  .accept-btn:hover::before {
    top: 67px;
  }
}
/* .accept-btn:hover::before {
  content: "";
  width: 21px;
  height: 20px;
  background: #1a1a1a;
  border: 2px solid #ff8200;
  transform: rotate(238deg);
  position: absolute;
  border-top: 0;
  border-left: 0;
  border-bottom: 0;
  top: 42px;
  right: -12px;
} */
.accept-all:hover {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 93% 100%, 0 100%);
}
.bottom-right-slant {
  clip-path: polygon(
    calc(100% - 1.4rem) 100%,
    0 100%,
    0 0,
    100% 0,
    100% calc(100% - 0.9rem)
  );
}
.bottom-right-slant-hover:hover {
  clip-path: polygon(
    calc(100% - 1.4rem) 100%,
    0 100%,
    0 0,
    100% 0,
    100% calc(100% - 0.9rem)
  );
}
.bottom-right-slant-hover-sm:hover {
  clip-path: polygon(
    calc(100% - 1rem) 100%,
    0 100%,
    0 0,
    100% 0,
    100% calc(100% - 0.9rem)
  );
}
.bottom-right-slant-hover-lg:hover {
  clip-path: polygon(
    calc(100% - 1.4rem) 100%,
    0 100%,
    0 0,
    100% 0,
    100% calc(100% - 0.9rem)
  );
}
.slide-btn-top-left-slant:hover {
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%, 0 30%);
}
.slide-btn-bottom-right-slant:hover {
  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
}
:root {
  /* Base font sizes for different sections */
  --font-size-ntitle-xl: 18px;
  --font-size-ndate-xl: 18px;
  --font-size-nbutton-xl: 16px;
  --font-size-nheader-xl: 36px;
  /* Card dimensions */
  --card-nwidth-xl: 21rem;
  --card-nheight-xl: 28rem;
  /* Scaling factors */
  --scale-xxs: 0.8;
  --scale-xs: 1;
  --scale-sm: 1;
  --scale-md: 1;
  --scale-lg: 0.84;
  --scale-2xl: 1.2;
  --scale-3xl: 1.5;
  --scale-4xl: 1.8;
}

/* Media queries for scaling */
/* @media (max-width: 424px) { */
:root {
  --font-size-ntitle: calc(var(--font-size-ntitle-xl) * var(--scale-xxs));
  --font-size-ndate: calc(var(--font-size-ndate-xl) * var(--scale-xxs));
  --font-size-nbutton: calc(var(--font-size-nbutton-xl) * var(--scale-xxs));
  --font-size-nheader: calc(var(--font-size-nheader-xl) * var(--scale-xxs));
  --card-nwidth: calc(var(--card-nwidth-xl) * var(--scale-xxs));
  --card-nheight: calc(var(--card-nheight-xl) * var(--scale-xxs));
}
/* } */
@media (min-width: 360px) {
  :root {
    --font-size-ntitle: calc(var(--font-size-ntitle-xl) * var(--scale-xs));
    --font-size-ndate: calc(var(--font-size-ndate-xl) * var(--scale-xs));
    --font-size-nbutton: calc(var(--font-size-nbutton-xl) * var(--scale-xs));
    --font-size-nheader: calc(var(--font-size-nheader-xl) * var(--scale-xs));
    --card-nwidth: calc(var(--card-nwidth-xl) * 0.9);
    --card-nheight: calc(var(--card-nheight-xl) * var(--scale-xs));
  }
}

@media (min-width: 640px) {
  :root {
    --font-size-ntitle: calc(var(--font-size-ntitle-xl) * var(--scale-sm));
    --font-size-ndate: calc(var(--font-size-ndate-xl) * var(--scale-sm));
    --font-size-nbutton: calc(var(--font-size-nbutton-xl) * 0.9);
    --font-size-nheader: calc(var(--font-size-nheader-xl) * 0.8);

    --card-nwidth: calc(var(--card-nwidth-xl) * 0.7);
    --card-nheight: calc(var(--card-nheight-xl) * 0.8);
  }
}

@media (min-width: 768px) {
  :root {
    --font-size-ntitle: calc(var(--font-size-ntitle-xl) * var(--scale-md));
    --font-size-ndate: calc(var(--font-size-ndate-xl) * var(--scale-md));
    --font-size-nbutton: calc(var(--font-size-nbutton-xl) * var(--scale-md));
    --font-size-nheader: calc(var(--font-size-nheader-xl) * var(--scale-md));

    --card-nwidth: calc(var(--card-nwidth-xl) * 0.9);
    --card-nheight: calc(var(--card-nheight-xl) * 1.05);
  }
}

@media (min-width: 1024px) {
  :root {
    --font-size-ntitle: calc(var(--font-size-ntitle-xl) * var(--scale-lg));
    --font-size-ndate: calc(var(--font-size-ndate-xl) * var(--scale-lg));
    --font-size-nbutton: calc(var(--font-size-nbutton-xl) * var(--scale-lg));
    --font-size-nheader: calc(var(--font-size-nheader-xl) * var(--scale-lg));

    /* --card-nwidth: calc(var(--card-nwidth-xl) * var(--scale-lg)); */
    --card-nwidth: 33%;

    --card-nheight: calc(var(--card-nheight-xl) * var(--scale-lg));
  }
}

@media (min-width: 1280px) {
  :root {
    --font-size-ntitle: var(--font-size-ntitle-xl);
    --font-size-ndate: var(--font-size-ndate-xl);
    --font-size-nbutton: var(--font-size-nbutton-xl);
    --font-size-nheader: var(--font-size-nheader-xl);

    /* --card-nwidth: var(--card-nwidth-xl);
     */
    --card-nwidth: 33%;

    --card-nheight: var(--card-nheight-xl);
  }
}

@media (min-width: 1408px) {
  :root {
    --card-nheight: calc(var(--card-nheight-xl) * 1.13);
  }
}

@media (min-width: 1528px) {
  :root {
    --font-size-ntitle: calc(var(--font-size-ntitle-xl) * var(--scale-2xl));
    --font-size-ndate: calc(var(--font-size-ndate-xl) * var(--scale-2xl));
    --font-size-nbutton: calc(var(--font-size-nbutton-xl) * var(--scale-2xl));
    --font-size-nheader: calc(var(--font-size-nheader-xl) * var(--scale-2xl));

    /* --card-nwidth: calc(var(--card-nwidth-xl) * var(--scale-2xl)); */
    --card-nwidth: 33%;

    --card-nheight: calc(var(--card-nheight-xl) * var(--scale-2xl));
  }
}
@media (min-width: 1728px) {
  :root {
    --card-nheight: calc(var(--card-nheight-xl) * 1.35);
  }
}
@media (min-width: 1910px) {
  :root {
    --font-size-ntitle: calc(var(--font-size-ntitle-xl) * var(--scale-3xl));
    --font-size-ndate: calc(var(--font-size-ndate-xl) * var(--scale-3xl));
    --font-size-nbutton: calc(var(--font-size-nbutton-xl) * var(--scale-3xl));
    --font-size-nheader: calc(var(--font-size-nheader-xl) * var(--scale-3xl));

    /* --card-nwidth: calc(var(--card-nwidth-xl) * var(--scale-3xl)); */
    --card-nwidth: 33%;

    --card-nheight: calc(var(--card-nheight-xl) * var(--scale-3xl));
  }
}
@media (min-width: 2240px) {
  :root {
    --card-nheight: calc(var(--card-nheight-xl) * 1.65);
  }
}
@media (min-width: 2560px) {
  :root {
    --font-size-ntitle: calc(var(--font-size-ntitle-xl) * var(--scale-4xl));
    --font-size-ndate: calc(var(--font-size-ndate-xl) * var(--scale-4xl));
    --font-size-nbutton: calc(var(--font-size-nbutton-xl) * var(--scale-4xl));
    --font-size-nheader: calc(var(--font-size-nheader-xl) * var(--scale-4xl));

    /* --card-nwidth: calc(var(--card-nwidth-xl) * var(--scale-4xl) * 1.11); */
    --card-nwidth: 33%;

    --card-nheight: calc(var(--card-nheight-xl) * var(--scale-4xl) * 1.05);
  }
}

/* Custom utility classes */
.text-events-ntitle {
  font-size: var(--font-size-ntitle);
}

.text-events-ndate {
  font-size: var(--font-size-ndate);
}

.text-events-nbutton {
  font-size: var(--font-size-nbutton);
}
.text-events-nheader {
  font-size: var(--font-size-nheader);
}
.events-card {
  width: var(--card-nwidth);
  height: var(--card-nheight);
}
.events-card-child {
  height: var(--card-nheight);
}

:root {
  --font-size-ltitle: calc(var(--font-size-ltitle-xl) * var(--scale-xxs));
  --font-size-ldesc: calc(var(--font-size-ldesc-xl) * var(--scale-xxs));
  --font-size-lbutton: calc(var(--font-size-lbutton-xl) * var(--scale-xxs));
  --font-size-pheader: calc(var(--font-size-pheader-xl) * var(--scale-xxs));
  --img-pwidth: calc(var(--img-pwidth-xl) * var(--scale-xxs));
  --img-pheight: calc(var(--img-pheight-xl) * var(--scale-xxs));
  --card-cwidth: calc(var(--card-cwidth-xl) * var(--scale-xxs));
}
/* } */
@media (min-width: 425px) {
  :root {
    --font-size-ltitle: calc(var(--font-size-ltitle-xl) * var(--scale-xs));
    --font-size-ldesc: calc(var(--font-size-ldesc-xl) * var(--scale-xs));
    --font-size-lbutton: calc(var(--font-size-lbutton-xl) * var(--scale-xs));
    --font-size-pheader: calc(var(--font-size-pheader-xl) * var(--scale-xs));
    --img-pwidth: calc(var(--img-pwidth-xl) * var(--scale-xs));
    --img-pheight: calc(var(--img-pheight-xl) * var(--scale-xs));
    --card-cwidth: calc(var(--card-cwidth-xl) * var(--scale-xs));
  }
}

@media (min-width: 640px) {
  :root {
    --font-size-ltitle: calc(var(--font-size-ltitle-xl) * var(--scale-sm));
    --font-size-ldesc: calc(var(--font-size-ldesc-xl) * var(--scale-sm));
    --font-size-lbutton: calc(var(--font-size-lbutton-xl) * var(--scale-sm));
    --font-size-pheader: calc(var(--font-size-pheader-xl) * var(--scale-sm));

    --img-pwidth: calc(var(--img-pwidth-xl) * var(--scale-sm));
    --img-pheight: calc(var(--img-pheight-xl) * var(--scale-sm));
    --card-cwidth: calc(var(--card-cwidth-xl) * var(--scale-sm));
  }
}

@media (min-width: 768px) {
  :root {
    --font-size-ltitle: calc(var(--font-size-ltitle-xl) * var(--scale-md));
    --font-size-ldesc: calc(var(--font-size-ldesc-xl) * var(--scale-md));
    --font-size-lbutton: calc(var(--font-size-lbutton-xl) * var(--scale-md));
    --font-size-pheader: calc(var(--font-size-pheader-xl) * var(--scale-md));

    --img-pwidth: calc(var(--img-pwidth-xl) * var(--scale-md));
    --img-pheight: calc(var(--img-pheight-xl) * var(--scale-md));
    --card-cwidth: calc(var(--card-cwidth-xl) * var(--scale-md));
  }
}

@media (min-width: 1024px) {
  :root {
    --font-size-ltitle: calc(var(--font-size-ltitle-xl) * var(--scale-lg));
    --font-size-ldesc: calc(var(--font-size-ldesc-xl) * var(--scale-lg));
    --font-size-lbutton: calc(var(--font-size-lbutton-xl) * var(--scale-lg));
    --font-size-pheader: calc(var(--font-size-pheader-xl) * var(--scale-lg));

    --img-pwidth: calc(var(--img-pwidth-xl) * var(--scale-lg));
    --img-pheight: calc(var(--img-pheight-xl) * var(--scale-lg));
    --card-cwidth: calc(var(--card-cwidth-xl) * var(--scale-lg));
  }
}

@media (min-width: 1280px) {
  :root {
    --font-size-ltitle: var(--font-size-ltitle-xl);
    --font-size-ldesc: var(--font-size-ldesc-xl);
    --font-size-lbutton: var(--font-size-lbutton-xl);
    --font-size-pheader: var(--font-size-pheader-xl);

    --img-pwidth: var(--img-pwidth-xl);
    --img-pheight: var(--img-pheight-xl);
    --card-cwidth: var(--card-cwidth-xl);
  }
}

@media (min-width: 1536px) {
  :root {
    --font-size-ltitle: calc(var(--font-size-ltitle-xl) * var(--scale-2xl));
    --font-size-ldesc: calc(var(--font-size-ldesc-xl) * var(--scale-2xl));
    --font-size-lbutton: calc(var(--font-size-lbutton-xl) * var(--scale-2xl));
    --font-size-pheader: calc(var(--font-size-pheader-xl) * var(--scale-2xl));

    --img-pwidth: calc(var(--img-pwidth-xl) * var(--scale-2xl));
    --img-pheight: calc(var(--img-pheight-xl) * var(--scale-2xl));
    --card-cwidth: calc(var(--card-cwidth-xl) * var(--scale-2xl));
  }
}

@media (min-width: 1920px) {
  :root {
    --font-size-ltitle: calc(var(--font-size-ltitle-xl) * var(--scale-3xl));
    --font-size-ldesc: calc(var(--font-size-ldesc-xl) * var(--scale-3xl));
    --font-size-lbutton: calc(var(--font-size-lbutton-xl) * var(--scale-3xl));
    --font-size-pheader: calc(var(--font-size-pheader-xl) * var(--scale-3xl));

    --img-pwidth: calc(var(--img-pwidth-xl) * var(--scale-3xl));
    --img-pheight: calc(var(--img-pheight-xl) * var(--scale-3xl));
    --card-cwidth: calc(var(--card-cwidth-xl) * var(--scale-3xl));
  }
}
@media (min-width: 2560px) {
  :root {
    --font-size-ltitle: calc(var(--font-size-ltitle-xl) * var(--scale-4xl));
    --font-size-ldesc: calc(var(--font-size-ldesc-xl) * var(--scale-4xl));
    --font-size-lbutton: calc(var(--font-size-lbutton-xl) * var(--scale-4xl));
    --font-size-pheader: calc(var(--font-size-pheader-xl) * var(--scale-4xl));

    --img-pwidth: calc(var(--img-pwidth-xl) * var(--scale-4xl));
    --img-pheight: calc(var(--img-pheight-xl) * var(--scale-4xl));
    --card-cwidth: calc(var(--card-cwidth-xl) * var(--scale-4xl));
  }
}

/* Custom utility classes */
.text-lab-ltitle {
  font-size: var(--font-size-ltitle);
}

.text-lab-ldesc {
  font-size: var(--font-size-ldesc);
}

.text-lab-lbutton {
  font-size: var(--font-size-lbutton);
}
.text-patner-header {
  font-size: var(--font-size-pheader);
}
.patner-img {
  width: var(--img-pwidth);
  height: var(--img-pheight);
}
.shadows .leftShadow,
.shadows .rightShadow {
  height: 9rem;
  position: absolute;
  width: 10rem;
  z-index: 2;
}
.shadows .leftShadow {
  left: 0;
}
.shadows .rightShadow {
  right: 0;
}
:root {
  --font-size-title: calc(var(--font-size-mtitle-xl) * 1);
  --font-size-desc: calc(var(--font-size-desc-xl) * var(--scale-xxs));
  --font-size-button-project: calc(
    var(--font-size-button-project-xl) * var(--scale-xxs)
  );
  --project-img-width: "100%";
  --project-img-height: calc(var(--project-img-mheight-xl) * var(--scale-xxs));
  --bar-width: calc(var(--bar-mwidth-xl) * var(--scale-xxs));
}
/* } */
@media (min-width: 425px) {
  :root {
    --font-size-title: calc(var(--font-size-title-xl) * var(--scale-xs));
    --font-size-desc: calc(var(--font-size-desc-xl) * var(--scale-xs));
    --font-size-button-project: calc(
      var(--font-size-button-project-xl) * var(--scale-xs)
    );
    --project-img-width: "100%";
    --project-img-height: calc(var(--project-img-mheight-xl) * var(--scale-xs));
    --bar-width: calc(var(--bar-mwidth-xl) * var(--scale-xs));
  }
}

@media (min-width: 640px) {
  :root {
    --font-size-title: calc(var(--font-size-mtitle-xl) * var(--scale-sm));
    --font-size-desc: calc(var(--font-size-desc-xl) * 0.8);
    --font-size-button-project: 16px;

    --project-img-width: calc(var(--project-img-tWidth-xl) * 0.8);
    --project-img-height: calc(var(--project-img-tHeight-xl) * 0.8);
    --bar-width: calc(var(--bar-tWidth-xl) * 0.8);
  }
}

@media (min-width: 768px) {
  :root {
    --font-size-title: calc(var(--font-size-mtitle-xl) * var(--scale-md));
    --font-size-desc: calc(var(--font-size-desc-xl) * var(--scale-md));
    --font-size-button-project: calc(
      var(--font-size-button-project-xl) * var(--scale-md)
    );

    --project-img-width: calc(var(--project-img-tWidth-xl) * var(--scale-md));
    --project-img-height: calc(var(--project-img-tHeight-xl) * var(--scale-md));
    --bar-width: calc(var(--bar-tWidth-xl) * var(--scale-md));
  }
}

@media (min-width: 1024px) {
  :root {
    --font-size-title: calc(var(--font-size-title-xl) * var(--scale-md));
    --font-size-desc: calc(var(--font-size-desc-xl) * 1.05);
    --font-size-button-project: calc(
      var(--font-size-button-project-xl) * var(--scale-md)
    );

    --project-img-width: calc(var(--project-img-width-xl) * 0.8);
    --project-img-height: calc(var(--project-img-height-xl) * var(--scale-lg));

    --car-height: calc(var(--project-img-height-xl) * var(--scale-lg));
    --bar-width: calc(var(--bar-width-xl) * 0.8);
  }
}

@media (min-width: 1280px) {
  :root {
    --font-size-title: calc(var(--font-size-title-xl) * 1.1);
    --font-size-desc: calc(var(--font-size-desc-xl) * 1);
    --font-size-button-project: calc(var(--font-size-button-project-xl) * 1.1);

    --project-img-width: var(--project-img-width-xl);
    --project-img-height: var(--project-img-height-xl);
    --bar-width: var(--bar-width-xl);
  }
}
@media (min-width: 1408px) {
  :root {
    --project-img-height: calc(var(--project-img-height-xl) * 1.16);
  }
}

@media (min-width: 1536px) {
  :root {
    --font-size-title: calc(var(--font-size-title-xl) * 1.3);
    --font-size-desc: calc(var(--font-size-desc-xl) * var(--scale-2xl));
    --font-size-button-project: calc(
      var(--font-size-button-project-xl) * var(--scale-2xl)
    );

    --project-img-width: calc(var(--project-img-width-xl) * var(--scale-2xl));
    --project-img-height: calc(var(--project-img-height-xl) * var(--scale-2xl));
    --bar-width: calc(var(--bar-width-xl) * var(--scale-2xl));
  }
}
@media (min-width: 1728px) {
  :root {
    --project-img-height: calc(var(--project-img-height-xl) * 1.35);
  }
}

@media (min-width: 1920px) {
  :root {
    --font-size-title: calc(var(--font-size-title-xl) * var(--scale-3xl));
    --font-size-desc: calc(var(--font-size-desc-xl) * var(--scale-3xl));
    --font-size-button-project: calc(
      var(--font-size-button-project-xl) * var(--scale-3xl)
    );

    --project-img-width: calc(var(--project-img-width-xl) * var(--scale-3xl));
    --project-img-height: calc(var(--project-img-height-xl) * var(--scale-3xl));
    --bar-width: calc(var(--bar-width-xl) * var(--scale-3xl));
  }
}
@media (min-width: 2240px) {
  :root {
    --project-img-height: calc(var(--project-img-height-xl) * 1.65);
  }
}
@media (min-width: 2560px) {
  :root {
    --font-size-title: calc(var(--font-size-title-xl) * var(--scale-4xl));
    --font-size-desc: calc(var(--font-size-desc-xl) * var(--scale-4xl));
    --font-size-button-project: calc(
      var(--font-size-button-project-xl) * var(--scale-4xl)
    );

    --project-img-width: calc(var(--project-img-width-xl) * var(--scale-4xl));
    --project-img-height: calc(var(--project-img-height-xl) * 2);
    --bar-width: calc(var(--bar-width-xl) * var(--scale-4xl));
  }
}

/* Custom utility classes */
.text-projects-title {
  font-size: var(--font-size-title);
}

.text-projects-desc {
  font-size: var(--font-size-desc);
}

.text-projects-button {
  font-size: var(--font-size-button-project);
}
.text-projects-header {
  font-size: var(--project-img-width);
}
.projects-img-size {
  /* width: var(--project-img-width); */
  height: var(--project-img-height);
}
.projects-bar {
  width: var(--bar-width);
}
.audio-project-color {
  color: #fff647;
}
.audio-project-border-color {
  border-color: #fff647;
}
.audio-project-bg-hover:hover {
  background-color: #fff647;
}
.home-page-project-color {
  color: #ff8200;
}
.home-page-border-color {
  border-color: #ff8200;
}

.home-page-projects-btn-hover:hover {
  background-color: #ff8200;
}
.hide-scroll {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none;
}
.hide-scroll::-webkit-scrollbar {
  display: none;
}
:root {
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-30: 30px;
  --font-size-32: 32px;
  --font-size-36: 36px;
  --font-size-45: 45px;
  --font-size-48: 48px;
  --font-size-60: 60px;
  --font-size-72: 72px;

  --scaleN-xxs: 0.8;
  --scaleN-xs: 1;
  --scaleN-sm: 0.9;
  --scaleN-md: 1;
  --scaleN-lg: 0.9;
  --scaleN-xl: 1;
  /* 
  --scaleN-xl2: 1.05;
  --scaleN-2xl: 1.1;
  --scaleN-2xl2: 1.17;
--scaleN-3xl: 1.25;
  --scaleN-3xl2: 1.37;
  --scaleN-4xl: 1.5; */

  --scaleN-xl2: 1.1;
  --scaleN-2xl: 1.2;
  --scaleN-2xl2: 1.35;
  --scaleN-3xl: 1.5;
  --scaleN-3xl2: 1.65;
  --scaleN-4xl: 1.8;
}

:root {
  --font-size-45-48-72: calc(var(--font-size-45) * var(--scaleN-xxs));
  --font-size-36-48-72: calc(var(--font-size-36) * var(--scaleN-xxs));
  --font-size-30-36-60: calc(var(--font-size-30) * var(--scaleN-xxs));
  --font-size-36-36-48: calc(var(--font-size-36) * var(--scaleN-xxs));
  --font-size-36-36-36: calc(var(--font-size-36) * var(--scaleN-xxs));
  --font-size-24-36-36: calc(var(--font-size-24) * var(--scaleN-xxs));
  --font-size-18-18-24: calc(var(--font-size-18) * var(--scaleN-xxs));
  --font-size-18-18-18: calc(var(--font-size-18) * var(--scaleN-xxs));
  --font-size-16-16-16: calc(var(--font-size-16) * var(--scaleN-xxs));
  --font-size-18-20-20: calc(var(--font-size-18) * var(--scaleN-xxs));
}

@media (min-width: 360px) {
  :root {
    --font-size-45-48-72: calc(var(--font-size-45) * var(--scaleN-xs));
    --font-size-36-48-72: calc(var(--font-size-36) * var(--scaleN-xs));
    --font-size-30-36-60: calc(var(--font-size-30) * var(--scaleN-xs));

    --font-size-36-36-48: calc(var(--font-size-36) * var(--scaleN-xs));
    --font-size-36-36-36: calc(var(--font-size-36) * var(--scaleN-xs));

    --font-size-24-36-36: calc(var(--font-size-24) * var(--scaleN-xs));
    --font-size-18-18-24: calc(var(--font-size-18) * var(--scaleN-xs));

    --font-size-18-18-18: calc(var(--font-size-18) * var(--scaleN-xs));
    --font-size-16-16-16: calc(var(--font-size-16) * var(--scaleN-xs));

    --font-size-18-20-20: calc(var(--font-size-18) * var(--scaleN-xs));
  }
}

@media (min-width: 640px) {
  :root {
    --font-size-45-48-72: calc(var(--font-size-48) * var(--scaleN-sm));
    --font-size-36-48-72: calc(var(--font-size-48) * var(--scaleN-sm));
    --font-size-30-36-60: calc(var(--font-size-36) * var(--scaleN-sm));

    --font-size-24-36-36: calc(var(--font-size-36) * var(--scaleN-sm));
    --font-size-18-20-20: calc(var(--font-size-20) * var(--scaleN-sm));
  }
}

@media (min-width: 768px) {
  :root {
    --font-size-45-48-72: calc(var(--font-size-48) * var(--scaleN-md));
    --font-size-36-48-72: calc(var(--font-size-48) * var(--scaleN-md));
    --font-size-30-36-60: calc(var(--font-size-36) * var(--scaleN-md));

    --font-size-24-36-36: calc(var(--font-size-36) * var(--scaleN-md));
    --font-size-18-20-20: calc(var(--font-size-20) * var(--scaleN-md));
  }
}

@media (min-width: 1024px) {
  :root {
    --font-size-45-48-72: calc(var(--font-size-72) * var(--scaleN-lg));
    --font-size-36-48-72: calc(var(--font-size-72) * var(--scaleN-lg));
    --font-size-30-36-60: calc(var(--font-size-60) * var(--scaleN-lg));

    --font-size-36-36-48: calc(var(--font-size-48) * var(--scaleN-lg));
    --font-size-24-36-36: calc(var(--font-size-36) * var(--scaleN-lg));
    --font-size-18-18-24: calc(var(--font-size-24) * var(--scaleN-lg));
    --font-size-18-20-20: calc(var(--font-size-20) * var(--scaleN-lg));
  }
}

@media (min-width: 1280px) {
  :root {
    --font-size-45-48-72: calc(var(--font-size-72) * var(--scaleN-xl));
    --font-size-36-48-72: calc(var(--font-size-72) * var(--scaleN-xl));
    --font-size-30-36-60: calc(var(--font-size-60) * var(--scaleN-xl));

    --font-size-36-36-48: calc(var(--font-size-48) * var(--scaleN-xl));
    --font-size-24-36-36: calc(var(--font-size-36) * var(--scaleN-xl));
    --font-size-18-18-24: calc(var(--font-size-24) * var(--scaleN-xl));
    --font-size-18-20-20: calc(var(--font-size-20) * var(--scaleN-xl));
  }
}
@media (min-width: 1408px) {
  :root {
    --font-size-45-48-72: calc(var(--font-size-72) * var(--scaleN-xl2));
    --font-size-36-48-72: calc(var(--font-size-72) * var(--scaleN-xl2));
    --font-size-30-36-60: calc(var(--font-size-60) * var(--scaleN-xl2));

    --font-size-36-36-36: calc(var(--font-size-36) * var(--scaleN-xl2));

    --font-size-36-36-48: calc(var(--font-size-48) * var(--scaleN-xl2));
    --font-size-24-36-36: calc(var(--font-size-36) * var(--scaleN-xl2));
    --font-size-18-18-24: calc(var(--font-size-24) * var(--scaleN-xl2));
    --font-size-18-18-18: calc(var(--font-size-18) * var(--scaleN-xl2));
    --font-size-16-16-16: calc(var(--font-size-16) * var(--scaleN-xl2));
    --font-size-18-20-20: calc(var(--font-size-20) * var(--scaleN-xl2));
  }
}

@media (min-width: 1528px) {
  :root {
    --font-size-45-48-72: calc(var(--font-size-72) * var(--scaleN-2xl));
    --font-size-36-48-72: calc(var(--font-size-72) * var(--scaleN-2xl));
    --font-size-30-36-60: calc(var(--font-size-60) * var(--scaleN-2xl));

    --font-size-36-36-36: calc(var(--font-size-36) * var(--scaleN-2xl));

    --font-size-36-36-48: calc(var(--font-size-48) * var(--scaleN-2xl));
    --font-size-24-36-36: calc(var(--font-size-36) * var(--scaleN-2xl));
    --font-size-18-18-24: calc(var(--font-size-24) * var(--scaleN-2xl));

    --font-size-18-18-18: calc(var(--font-size-18) * var(--scaleN-2xl));
    --font-size-16-16-16: calc(var(--font-size-16) * var(--scaleN-2xl));
    --font-size-18-20-20: calc(var(--font-size-20) * var(--scaleN-2xl));
  }
}
@media (min-width: 1728px) {
  :root {
    --font-size-45-48-72: calc(var(--font-size-72) * var(--scaleN-2xl2));
    --font-size-36-48-72: calc(var(--font-size-72) * var(--scaleN-2xl2));
    --font-size-30-36-60: calc(var(--font-size-60) * var(--scaleN-2xl2));

    --font-size-36-36-36: calc(var(--font-size-36) * var(--scaleN-2xl2));

    --font-size-36-36-48: calc(var(--font-size-48) * var(--scaleN-2xl2));
    --font-size-24-36-36: calc(var(--font-size-36) * var(--scaleN-2xl2));
    --font-size-18-18-24: calc(var(--font-size-24) * var(--scaleN-2xl2));

    --font-size-18-18-18: calc(var(--font-size-18) * var(--scaleN-2xl2));
    --font-size-16-16-16: calc(var(--font-size-16) * var(--scaleN-2xl2));
    --font-size-18-20-20: calc(var(--font-size-20) * var(--scaleN-2xl2));
  }
}
@media (min-width: 1910px) {
  :root {
    --font-size-45-48-72: calc(var(--font-size-72) * var(--scaleN-3xl));
    --font-size-36-48-72: calc(var(--font-size-72) * var(--scaleN-3xl));
    --font-size-30-36-60: calc(var(--font-size-60) * var(--scaleN-3xl));

    --font-size-36-36-36: calc(var(--font-size-36) * var(--scaleN-3xl));

    --font-size-36-36-48: calc(var(--font-size-48) * var(--scaleN-3xl));
    --font-size-24-36-36: calc(var(--font-size-36) * var(--scaleN-3xl));
    --font-size-18-18-24: calc(var(--font-size-24) * var(--scaleN-3xl));

    --font-size-18-18-18: calc(var(--font-size-18) * var(--scaleN-3xl));
    --font-size-16-16-16: calc(var(--font-size-16) * var(--scaleN-3xl));
    --font-size-18-20-20: calc(var(--font-size-20) * var(--scaleN-3xl));
  }
}
@media (min-width: 2240px) {
  :root {
    --font-size-45-48-72: calc(var(--font-size-72) * var(--scaleN-3xl2));
    --font-size-36-48-72: calc(var(--font-size-72) * var(--scaleN-3xl2));
    --font-size-30-36-60: calc(var(--font-size-60) * var(--scaleN-3xl2));

    --font-size-36-36-36: calc(var(--font-size-36) * var(--scaleN-3xl2));

    --font-size-36-36-48: calc(var(--font-size-48) * var(--scaleN-3xl2));
    --font-size-24-36-36: calc(var(--font-size-36) * var(--scaleN-3xl2));
    --font-size-18-18-24: calc(var(--font-size-24) * var(--scaleN-3xl2));

    --font-size-18-18-18: calc(var(--font-size-18) * var(--scaleN-3xl2));
    --font-size-16-16-16: calc(var(--font-size-16) * var(--scaleN-3xl2));
    --font-size-18-20-20: calc(var(--font-size-20) * var(--scaleN-3xl2));
  }
}
@media (min-width: 2560px) {
  :root {
    --font-size-45-48-72: calc(var(--font-size-72) * var(--scaleN-4xl));
    --font-size-36-48-72: calc(var(--font-size-72) * var(--scaleN-4xl));
    --font-size-30-36-60: calc(var(--font-size-60) * var(--scaleN-4xl));

    --font-size-36-36-36: calc(var(--font-size-36) * var(--scaleN-4xl));
    --font-size-36-36-48: calc(var(--font-size-48) * var(--scaleN-4xl));
    --font-size-24-36-36: calc(var(--font-size-36) * var(--scaleN-4xl));
    --font-size-18-18-24: calc(var(--font-size-24) * var(--scaleN-4xl));
    --font-size-18-18-18: calc(var(--font-size-18) * var(--scaleN-4xl));
    --font-size-16-16-16: calc(var(--font-size-16) * var(--scaleN-4xl));
    --font-size-18-20-20: calc(var(--font-size-20) * var(--scaleN-4xl));
  }
}

/*--------------------- font size classes------------- */
.font-45-48-72 {
  font-size: var(--font-size-45-48-72) !important ;
}
.font-36-48-72 {
  font-size: var(--font-size-36-48-72) !important ;
}
.font-30-36-60 {
  font-size: var(--font-size-36-48-72) !important ;
}
.font-36-36-36 {
  font-size: var(--font-size-36-36-36) !important ;
}
.font-36-36-48 {
  font-size: var(--font-size-36-36-48) !important ;
}
.font-24-36-36 {
  font-size: var(--font-size-24-36-36) !important ;
}
.font-18-18-24 {
  font-size: var(--font-size-18-18-24) !important;
}
.font-18-18-18 {
  font-size: var(--font-size-18-18-18) !important;
}
.font-16-16-16 {
  font-size: var(--font-size-16-16-16) !important;
}
.font-18-20-20 {
  font-size: var(--font-size-18-20-20) !important;
}