@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');



* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --theme-color1: #ffffff;
  --theme-color2: #8fc33d;
  --theme-color3: #153d4b;
  --theme-color4: #838a8d;
}
body {
  background-color: #ffffff !important;
  font-family: "Noto Sans", sans-serif;
}

.text-italic{
  font-style: italic !important;
  font-weight: normal;
}


.white-color {
  color: var(--theme-color1) !important;
}

.primary-color {
  color: var(--theme-color2) !important;
}

.secondary-color {
  color: var(--theme-color3) !important;
}

.dark-gray {
  color: var(--theme-color4) !important;
}

.black_color {
  color: #000000 !important;
}

/* Default - Desktop first (>1300px) */
.fs-96 {
  font-size: 96px !important;
}
.fs-74 {
  font-size: 74px !important;
}
.fs-50 {
  font-size: 50px !important;
}
.fs-40 {
  font-size: 40px !important;
}
.fs-28 {
  font-size: 28px !important;
}
.fs-26 {
  font-size: 26px !important;
}
.fs-24 {
  font-size: 24px !important;
}
.fs-20 {
  font-size: 20px !important;
}
.fs-18 {
  font-size: 18px !important;
}
.fs-16 {
  font-size: 16px !important;
}
.fs-14 {
  font-size: 14px !important;
}

/* Large devices (≤1199px) */
@media (max-width: 1300px) {
  .fs-96 {
    font-size: 60px !important;
  }
  .fs-74 {
    font-size: 64px !important;
  }
  .fs-50 {
    font-size: 50px !important;
  }
  .fs-40 {
    font-size: 36px !important;
  }
  .fs-28 {
    font-size: 24px !important;
  }
  .fs-26 {
    font-size: 22px !important;
  }
  .fs-24 {
    font-size: 20px !important;
  }
  .fs-20 {
    font-size: 18px !important;
  }
  .fs-18 {
    font-size: 16px !important;
  }
  .fs-16 {
    font-size: 14px !important;
  }
}

/* Medium devices (≤991px) */
@media (max-width: 991.98px) {
  .fs-96 {
    font-size: 44px !important;
  }
  .fs-74 {
    font-size: 40px !important;
  }
  .fs-50 {
    font-size: 36px !important;
  }
  .fs-40 {
    font-size: 32px !important;
  }
  .fs-28 {
    font-size: 22px !important;
  }
  .fs-26 {
    font-size: 20px !important;
  }
  .fs-24 {
    font-size: 18px !important;
  }
  .fs-20 {
    font-size: 16px !important;
  }
  .fs-18 {
    font-size: 15px !important;
  }
  .fs-16 {
    font-size: 14px !important;
  }
}

/* Small devices (≤767px) */
@media (max-width: 767.98px) {
  .fs-96 {
    font-size: 38px !important;
  }
  .fs-74 {
    font-size: 34px !important;
  }
   .fs-50{
    font-size: 30px !important;
  }
  .fs-40 {
    font-size: 28px !important;
  }
  .fs-28 {
    font-size: 20px !important;
  }
  .fs-26 {
    font-size: 18px !important;
  }
  .fs-24 {
    font-size: 16px !important;
  }
  .fs-20 {
    font-size: 15px !important;
  }
  .fs-18 {
    font-size: 14px !important;
  }
  .fs-16 {
    font-size: 13px !important;
  }
}

/* Extra small devices (≤575px) */
@media (max-width: 575.98px) {
  .fs-96 {
    font-size: 18px !important;
  }
  .fs-74 {
    font-size: 32px !important;
  }
  .fs-50{
    font-size: 28px !important;
  }
  .fs-40 {
    font-size: 24px !important;
  }
  .fs-28 {
    font-size: 18px !important;
  }
  .fs-26 {
    font-size: 16px !important;
  }
  .fs-24 {
    font-size: 14px !important;
  }
  .fs-20 {
    font-size: 13px !important;
  }
  .fs-18 {
    font-size: 12px !important;
  }
  .fs-16 {
    font-size: 12px !important;
  }
}

.py-100 {
  padding: 100px 0px;
}

.top-60 {
  top: 60% !important;
}

.cursor-pointer {
  cursor: pointer;
}


.text-justify {
  text-align: justify;
}

a {
  text-decoration: none;
}

.redirect-btn {
  color: #ffffff;
  border: 1px dashed #ffffff;
  border-radius: 50px;
}

.redirect-btn-black{
  color: #000000;
  border: 1px dashed #000000;
  border-radius: 50px;
}

.redirect-arrow {
  width: 50px !important;
  height: 50px;
}

.w-fit {
  width: fit-content;
}

.section-icon{
  height: 80px;
  width: 80px;
}

.tracking-wider{
  letter-spacing: 2px;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
  width: 5px;
}

::-webkit-scrollbar-thumb {
  background: var(--theme-color2);
  width: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--theme-color4);
  width: 5px;
}

@media only screen and (max-width: 992px) {
  .py-100 {
    padding: 40px 0px;
  }
}

@media only screen and (max-width: 450px) {
  .redirect-arrow {
    width: 30px !important;
    height: 30px;
  }
}