.logo-hero {
  max-width: 160px;
  /* height: 49px; */
}

.get-started {
  padding: 131px 8px;
  position: relative;

  @media (max-width: 991.99px) {
    padding: 80px 16px;
  }

  @media (max-width: 767.99px) {
    padding: 60px 16px;
  }

  @media (max-width: 575.99px) {
    padding: 48px 16px;
  }

  .right-layer {
    bottom: 27%;
    right: -50%;
    width: 384px;
    height: 384px;
    background-color: rgba(242, 74, 74, 0.5);
    border-radius: 50%;
    filter: blur(430px);
    position: absolute;
    width: 100%;
    pointer-events: none;
    z-index: 10;
  }

  .left-layer {
    bottom: 10%;
    left: -50%;
    width: 384px;
    height: 384px;
    background-color: rgba(242, 74, 74, 0.5);
    border-radius: 50%;
    filter: blur(350px);
    position: absolute;
    width: 100%;
    pointer-events: none;
    z-index: 10;
  }

  .start-btn {
    max-width: 334px;
    width: 100%;
    text-decoration: none;

    @media (max-width: 767.99px) {
      padding: 16px 20px !important;
    }
  }

  .get-started-container {
    max-width: 1386px;
    margin: 0 auto;
    text-align: center;
  }

  .get-started-heading {
    @media (max-width: 567.99px) {
      max-width: 400px;
      margin: 0 auto;
    }
  }

  .get-started-para {
    margin-bottom: 79px !important;

    @media (max-width: 991.99px) {
      margin-bottom: 60px !important;
    }

    @media (max-width: 767.99px) {
      margin-bottom: 32px !important;
    }
  }
}

/* ---------leaning more section---------------- */
.learn-more {
  padding: 0 8px;
  position: relative;

  @media (max-width: 991.99px) {
    padding: 0 16px;
  }

  .bg-img-learn-more {
    background-image: url(/assets/images/webp/bg-img-get-started.webp);
    background-size: cover;
    max-width: 1893px;
    background-repeat: no-repeat;
    border-radius: 10px;
    margin: 0 auto;
    z-index: 10;
    background-position: center;
    position: relative;
    padding: 87px 16px 125px 16px;

    @media (max-width: 991.99px) {
      padding: 80px 16px 80px 16px;
    }

    @media (max-width: 767.99px) {
      padding: 60px 16px 60px 16px;
    }

    @media (max-width: 575.99px) {
      padding: 48px 16px 48px 16px;
    }

    .blur-circle {
      top: -90px;
      left: 50%;
      position: absolute;
      transform: translateX(-50%);
      z-index: 0;
      background-color: rgba(242, 74, 74);
      border-radius: 50%;
      filter: blur(341px);
    }
  }

  .get-btn {
    padding: 18px 32px !important;
    font-size: 28px !important;
    max-width: fit-content;
    text-decoration: none !important;

    @media (max-width: 991.99px) {
      padding: 16px 24px !important;
      font-size: 22px !important;
    }

    @media (max-width: 567.99px) {
      padding: 12px 20px !important;
      font-size: 18px !important;
    }
  }

  .learn-more-container {
    max-width: 1449px;
    margin: 0 auto;
    text-align: center;
  }

  .learn-more-heading {
    @media (max-width: 1399.99px) {
      line-height: var(--leading-106) !important;
      max-width: 900px;
      margin: 0 auto;
    }

    @media (max-width: 991.99px) {
      max-width: 700px;
    }

    @media (max-width: 567.99px) {
      max-width: 400px;
    }
  }

  .learn-more-para {
    margin-bottom: 40px !important;

    @media (max-width: 767.99px) {
      margin-bottom: 32px !important;
    }
  }

  .learn-ellipse {
    position: absolute;
    pointer-events: none;
    left: -231px;
    bottom: 26px;
    width: 384px;
    height: 384px;
    background-color: rgba(242, 74, 74);
    border-radius: 50%;
    filter: blur(341px);

    @media (max-width: 991.99px) {
      width: 250px;
      left: -140px;
      height: 250px;
    }

    @media (max-width: 567.99px) {
      width: 150px;
      height: 150px;
      filter: blur(441px);
    }
  }

  .learn-ellipse1 {
    position: absolute;
    pointer-events: none;
    left: 40%;
    bottom: -50px;
    width: 384px;
    height: 384px;
    background-color: rgba(242, 74, 74);
    border-radius: 50%;
    filter: blur(400px);

    @media (max-width: 991.99px) {
      width: 250px;
      height: 250px;

      @media (max-width: 567.99px) {
        width: 150px;
        height: 150px;
        filter: blur(441px);
      }
    }
  }
}

/* ---------footer-section------ */
.footer-section {
  padding: 150px 8px 50px 8px;

  @media (max-width: 991.99px) {
    padding: 80px 16px 50px 16px;
  }

  @media (max-width: 767.99px) {
    padding: 60px 16px 50px 16px;
  }

  @media (max-width: 567.99px) {
    padding: 48px 16px 48px 16px;
  }

  .footer-container {
    max-width: 1620px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
  }

  .footer-content {
    padding: 12px 16px;
    border-radius: 12px;
  }

  .footer-logo {
    width: 202px;

    @media (max-width: 767.99px) {
      width: 150px;
      /* height: 50px; */
    }
  }

  .footer-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0;
  }

  .all-right-text {
    padding-top: 34px;

    @media (max-width: 1023.99px) {
      text-align: center;
      padding-top: 30px;
    }

    @media (max-width: 567.99px) {
      padding-top: 20px;
    }
  }

  @media (max-width: 1078.99px) {
    .footer-wrapper {
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
  }

  .footer-menu-link {
    gap: 60px;

    @media (max-width: 1399.99px) {
      gap: 30px;
    }

    @media (max-width: 768.99px) {
      gap: 24px;
    }

    @media (max-width: 567.99px) {
      gap: 20px;
    }
  }

  .footer-link {
    transition: all 0.3s ease;

    &:hover {
      color: #f24a4a !important;
    }
  }

  .social-wrapper {
    gap: 30px;

    @media (max-width: 1199.99px) {
      gap: 20px;
    }
  }

  .social-link {
    transition: all 0.3s ease;

    svg path {
      transition: fill 0.3s ease;
    }

    &:hover {
      svg path {
        fill: #f24a4a;
      }
    }
  }

  .footer-menu-link li {
    width: max-content;
    display: inline-flex;

    @media (max-width: 567.99px) {
      margin: 0 auto;
    }
  }
}

/* ---------common------ */
.common-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto;
  padding: 18px 22px;
  border-radius: 18.18px;
  border: none;
  cursor: pointer;
  border: none;
  font-size: 27px;
  background-color: var(--red);
  color: var(--white);
  box-shadow: 0px 3.02px 0px 0px #ffffff;
  transition: all 0.3s ease;

  svg {
    width: 28px;
    height: 28px;
    transition: all 0.3s ease;
  }

  @media (max-width: 1199.99px) {
    font-size: 22px !important;
    padding: 16px 20px !important;
    font-size: 22px;
  }

  @media (max-width: 767.99px) {
    font-size: 18px !important;
    padding: 15px 20px !important;
    font-size: 18px;

    svg {
      width: 20px;
      height: 20px;
    }
  }

  &:hover {
    /* box-shadow: 0 6px 15px rgba(242, 74, 74, 0.6); */
    /* transform: translateY(-2px); */
    background-color: var(--white);
    color: var(--black);
    box-shadow: 0px 3.02px 0px 0px var(--red);

    svg path {
      fill: black;
    }
  }
}

.common-blur {
  position: absolute;
  width: 268px;
  height: 268px;
  background-color: rgba(242, 74, 74, 0.5);
  border-radius: 50%;
  filter: blur(150px);
  pointer-events: none;

  @media (max-width: 991.99px) {
    width: 200px;
    height: 200px;
    filter: blur(140px);
  }

  @media (max-width: 767.99px) {
    width: 150px;
    height: 150px;
    filter: blur(120px);
  }
}

.common-heading {
  font-size: var(--fs-12xl) !important;
  line-height: var(--leading-140) !important;
  font-weight: 600;
  color: var(--white);

  @media (max-width: 991.99px) {
    line-height: var(--leading-120) !important;
  }
}

.common-para {
  font-size: var(--fs-4xl) !important;
  font-weight: 500;
  color: var(--deep-gray);
}

.back-to-top {
  width: 31px;
  height: 31px;
  border-radius: 80px;
  border: none;
}

.back-to-top-wrapper {
  position: fixed;
  bottom: 43px;
  right: calc((100vw - 1620px) / 2);
  cursor: pointer;
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 14px;

  @media (max-width: 1640px) {
    right: 20px;
    bottom: 20px;
  }

  p {
    font-size: var(--fs-3xl);
    color: white;
    line-height: 140%;
    margin-bottom: 0;
  }
}

.back-to-top-wrapper.show {
  opacity: 1;
  pointer-events: auto;
}

html {
  scroll-behavior: smooth;
}

.pt-20 {
  padding-top: 20px;
}

/* <!-- ---------------Smarter Book Procurement-------- --> */
.bg-img-smarter {
  background-image: url(/assets/images/webp/Smartbook.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 100px 8px;
  max-width: 1920px;
  margin: 0 auto;

  @media (max-width: 991.99px) {
    padding: 80px 16px;
  }

  @media (max-width: 767.99px) {
    padding: 60px 16px;
  }

  @media (max-width: 567.99px) {
    padding: 48px 16px;
  }

  .smarter-container {
    position: relative;
    z-index: 2;
    max-width: 1617px;
    margin: 0 auto;
  }

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

  .smarter-para {
    max-width: 1386px;
    margin: 0 auto;
    color: var(--white) !important;
    line-height: 218%;

    @media (max-width: 1199.99px) {
      line-height: 170%;
    }
  }

  .smarter-card-wrapper {
    margin-top: 60px;
    gap: 49px;

    @media (max-width: 991.99px) {
      margin-top: 40px;
      gap: 36px;
    }

    @media (max-width: 767.99px) {
      margin-top: 32px;
      gap: 24px;
    }

    @media (max-width: 767.99px) {
      gap: 16px;
    }
  }

  .smarter-card {
    max-width: 784px;
    padding: 59px 53px 78px 53px;
    border-radius: 25px;

    @media (max-width: 991.99px) {
      padding: 32px 32px 50px 32px;
    }

    @media (max-width: 767.99px) {
      padding: 20px 20px 32px 20px;
    }
  }

  .icon-box {
    width: 63.95px;
    height: 63.95px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 27px;
    margin-left: auto;
    margin-right: auto;

    @media (max-width: 991.99px) {
      width: 50px;
      height: 50px;
      margin-bottom: 20px;

      svg {
        width: 24px;
        height: 24px;
      }
    }

    @media (max-width: 767.99px) {
      width: 40px;
      height: 40px;
      margin-bottom: 16px;

      svg {
        width: 18px;
        height: 18px;
      }
    }
  }

  .card-para {
    margin-top: 18px !important;
    max-width: 678px;
    margin: 0 auto;

    @media (max-width: 767.99px) {
      margin-top: 12px !important;
      max-width: 478px;
    }
  }

  .smarter-card-big {
    position: relative;
    max-width: 1446px;
    margin: 0 auto;
    margin-top: 53px;
    padding: 51px 20px 39px 20px;
    border-radius: 20px;

    @media (max-width: 991.99px) {
      padding: 40px 20px 39px 20px;
      margin-top: 40px;
    }

    @media (max-width: 767.99px) {
      padding: 32px 16px 31px 16px;
      margin-top: 24px;
    }

    @media (max-width: 567.99px) {
      margin-top: 16px;
    }
  }

  .smarter-card-big-wrapper {
    gap: 36px;
    align-items: center;

    @media (max-width: 1299.99px) {
      gap: 24px;
    }

    @media (max-width: 991.99px) {
      gap: 16px;
    }
  }

  .big-card {
    max-width: 312px;

    @media (max-width: 767.99px) {
      max-width: 280px;
    }

    @media (max-width: 575.99px) {
      max-width: 228px;
    }
  }

  .box-bottom {
    margin-bottom: 11px !important;
  }

  .big-para {
    padding-top: 1px;
  }

  .icon-svg {
    display: block;
    max-width: 165px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    flex-grow: 1;
    /* margin-top: 102px; */

    @media (max-width: 1199.99px) {
      display: none !important;
    }
  }

  .common-arrow {
    position: absolute;
    width: 302px;
    height: 282px;
    z-index: 6;
    display: block;
    overflow: hidden;

    img {
      width: 302px;
      height: 282px;
    }

    @media (max-width: 1023.99px) {
      display: none !important;
    }
  }

  .left-arrow {
    /* pointer-events: none; */
    top: -130px;
    left: 27%;
    transform: rotate(15deg);

    @media (max-width:1440px) {
      left: 17%;
    }
  }

  .right-arrow {
    /* transform: rotate(44deg); */
    /* pointer-events: none; */
    top: -130px;
    right: 27%;
    transform: rotate(-15deg);

    @media (max-width:1440px) {
      right: 17%;
    }
  }
}

/* -------------trusted------------/ */
.trusted-bg-img {
  background-image: url(/assets/images/webp/trusted-bg-img.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  max-width: 1902px;
  margin: 0 auto;
  padding: 35px 16px;
  border-radius: 10px;

  @media (max-width: 767.99px) {
    padding: 24px 16px;
  }

  .trusted-container {
    max-width: 1600px;
    margin: 0 auto;

    .trusted-heading {
      @media (max-width: 767.99px) {
        line-height: 130% !important;
      }
    }
  }

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

  .trusted-wrapper {
    gap: 20px;
    margin-top: 40px;

    @media (max-width: 991.99px) {
      gap: 16px;
      margin-top: 32px;
    }
  }

  .trusted-card {
    max-width: 385px;
    width: 100%;
    text-align: center;

    @media (max-width: 991.99px) {
      max-width: 170px;
    }

    @media (max-width: 767.99px) {
      max-width: 167px;
    }

    @media (max-width: 567.99px) {
      max-width: 155px;
    }

    @media (max-width: 425.99px) {
      max-width: 144px;
    }
  }

  .gap-17 {
    gap: 10px;
  }

  .border-left {
    background: #ffffff80;
    height: 72px;
    width: 1px;
    display: block;

    @media (max-width: 767.99px) {
      display: none !important;
    }
  }
}

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

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: var(--red);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--red);
}

/* ---thanks---------- */
.thanks-section {
  padding: 150px 8px 0 8px;

  @media (max-width: 991.99px) {
    padding: 80px 16px 0 16px;
  }

  @media (max-width: 767.99px) {
    padding: 60px 16px 0 16px;
  }

  @media (max-width: 567.99px) {
    padding: 48px 16px 0 16px;
  }

  .thanks-container {
    position: relative;
    border-radius: 21px;

    max-width: 1620px;
    margin: 0 auto;
    padding: 67px 26px 0 26px;

    @media (max-width: 991.99px) {
      padding: 40px 26px 0 26px;
    }

    @media (max-width: 991.99px) {
      padding: 26px 26px 0 26px;
    }

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 21px;
      padding: 1px;
      background: linear-gradient(0deg, #f24a4a 0%, #000000 100%);
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }

    .thanks-heading {
      text-align: center;
    }

    .bg-red-gradient {
      background: linear-gradient(180deg,
          rgba(140, 43, 43, 0) 0%,
          #f24a4a 184.41%);
      border: radius top left 20px;
      border: radius top right 20px;
      padding: 37px 56px;
      max-width: 514px;
      margin: 0 auto;
      margin-top: 68px;

      @media (max-width: 991.99px) {
        margin-top: 40px;
        padding: 24px 40px;
      }

      @media (max-width: 767.99px) {
        margin-top: 32px;
        padding: 24px;
      }

      .thanks-wraaper {
        gap: 46px;

        @media (max-width: 991.99px) {
          gap: 30px;
        }

        .man-img {
          width: 128px;
          height: 128px;
          border-radius: 100%;
          border: 4px solid var(--red);

          @media (max-width: 991.99px) {
            width: 80px;
            height: 80px;
          }
        }

        .logo-img {
          @media (max-width: 991.99px) {
            width: 120px;
            height: 60px;
          }
        }
      }
    }
  }
}

.text-decroation-none{
  text-decoration: none;
}