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

      @font-face {
          font-family: 'Montserrat';
          src: url('./fonts/Montserrat-Medium.ttf');
          font-weight: 500;
          font-style: normal;
          font-display: swap;
      }

      @font-face {
          font-family: 'Montserrat';
          src: url('./fonts/Montserrat-SemiBold.ttf');
          font-weight: 600;
          font-style: normal;
          font-display: swap;
      }

      @font-face {
          font-family: 'Montserrat';
          src: url('./fonts/Montserrat-Bold.ttf');
          font-weight: 700;
          font-style: normal;
          font-display: swap;
      }

      @font-face {
          font-family: 'Montserrat';
          src: url('./fonts/Montserrat-ExtraBold.ttf');
          font-weight: 800;
          font-style: normal;
          font-display: swap;
      }

      body {
          font-family: "Montserrat", Arial, sans-serif;
          margin: 0;
          height: 100vh;
          width: 100vw;
      }

      .outer-wrapper {
          height: 100%;
          width: 100%;
          display: flex;
          overflow: hidden;
      }

      .main-wrapper {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
          overflow: auto;
      }

      .head-bg-wrapper {
          display: flex;
          justify-content: center;
          width: 100%;
          max-height: 33%;
          min-height: 20%;
          overflow: hidden;
          background-color: #93b9dd;
      }

      .head-bg-wrapper img {
          height: 100%;
          width: 100%;
          object-fit: contain;
      }

      .info-section {
          width: 100%;
          max-width: 1920px;
          display: flex;
          flex-direction: column;
          gap: 80px;
          padding: 80px 100px 0 100px;
          box-sizing: border-box;
      }

      .info-section-body {
          display: flex;
          justify-content: space-between;
          align-items: center;
      }

      .services-wrapper ul {
          display: flex;
          flex-direction: column;
          gap: 12px;
          padding-left: 16px;
      }

      .services-wrapper>ul li {
          font-size: 20px;
          font-weight: 500;
      }

      .info-section-head h1 {
          font-size: 40px;
          margin-top: 0;
          margin-bottom: 10px;
      }

      .info-section-head p {
          font-size: 28px;
          font-weight: 500;
          color: #7f817f;
          margin: 0;
      }

      .coming-soon-wrapper {
          display: flex;
          align-items: center;
          gap: 24px;
      }

      .coming-soon-wrapper img {
          object-fit: contain;
          width: 162px;
      }

      .coming-soon-wrapper>div {
          display: flex;
          flex-direction: column;
          gap: 12px;
      }

      .coming-soon-wrapper>div>div {
          display: flex;
          flex-direction: column;
          gap: 8px;
          font-weight: 500;
      }

      .coming-soon-wrapper>div h2 {
          margin: 0;
          font-size: 28px;
          color: #3481be;
      }

      footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 24px 0;
          border-top: 1px solid #d6d6d6;
          width: 88%;
          box-sizing: border-box;
          margin-top: auto;
          color: #615e5e;
      }

      footer div {
          display: flex;
          gap: 12px;
      }

      .overlay-wrapper {
          padding: 36px 48px;
          overflow: auto;
      }

      .d-none {
          display: none;
      }

      @media(max-width:1000px) {
          .info-section {
              padding: 40px 60px 0 60px;
              gap: 40px;
          }

          .info-section-head h1 {
              font-size: 32px;
          }

          .info-section-head p {
              font-size: 22px;
          }

          .info-section-body {
              flex-direction: column-reverse;
              align-items: flex-start;
              gap: 24px;
          }

          .coming-soon-wrapper {
              gap: 8px;
              flex-direction: column;
              align-items: flex-start;
          }

          .coming-soon-wrapper>div h2 {
              font-size: 22px;
          }


          .coming-soon-wrapper img {
              width: 100px;
          }

          .overlay-wrapper h1 {
              font-size: 22px;
          }

          .overlay-wrapper h2 {
              font-size: 18px;
          }
      }

      @media(max-width:500px) {
          .info-section {
              padding: 36px 24px;
          }

          footer {
              flex-direction: column;
              gap: 20px;
              align-items: flex-start;
          }
      }