*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100dvh;
  width: 100%;
  margin: 0;
  display: flex;
  flex-flow: column;
  background: linear-gradient(#07182be0),
    url("https://divineerp-resource.s3.ap-south-1.amazonaws.com/wallpaper/aurora/C0EDFF8E-7FF2-4774-83A2-772B25B624B6.jpg")
      center/cover no-repeat;
  font-family: "Segoe UI light", Tahoma, Geneva, Verdana, sans-serif;
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-y: hidden;
}

header,
footer {
  display: none;
}

.side-menu {
  position: fixed;
  left: 2rem;
  top: 0;
  width: 17%;
  height: 100%;
  overflow-y: auto;
  color: #dbe7f5;
  z-index: 20;
  align-items: center;

  .side-menu-wraper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 86dvh;

    .logo {
      text-align: center;
      height: 20%;

      img {
        height: 40%;
      }

      .title {
        font-size: 1.25rem;
      }
    }

    .menu {
      display: flex;
      flex-direction: column;
      gap: 0.9375rem;

      a {
        padding: 0.62rem;
        color: #dbe7f5;
        text-decoration: none;
        font-size: 0.93rem;
        transition: background 0.2s ease, color 0.2s ease;
        border-radius: 1.25rem;
        backdrop-filter: blur(6px);
        border: 1px solid #122e4d;
        background: #02254c59;

        i {
          margin: 0px 0.62rem;
          width: 9%;
        }
      }

      a:hover {
        background: #07182b;
        color: #ffffff;
        font-weight: 600;
      }

      a.active {
        background: #041324;
        color: #fff;
      }
    }

    .actions {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.62rem;
      flex-wrap: wrap;

      button {
        min-width: 2.375rem;
        height: 2.375rem;
        padding: 10px;
        border: none;
        border-radius: 0.37rem;
        background: #122e4d91;
        font-size: 1rem;
        cursor: pointer;
        backdrop-filter: blur(6px);
        border: 1px solid #122e4d;

        display: flex;
        align-items: center;
        justify-content: center;

        transition: background-color 0.2s ease, transform 0.1s ease;

        i {
          font-size: 18px;
        }

        .fa-whatsapp {
          color: #65cb83;
        }

        .fa-phone-volume {
          color: #65cb83;
        }
      }

      button:hover {
        background: rgba(112, 168, 248, 0.25);
      }

      button:active {
        transform: scale(0.95);
      }

      button:not(:has(i)) {
        font-weight: bold;
        font-size: 17px;
      }
    }
  }
}

main {
  width: 90%;
  display: flex;
  flex: 1;
  height: auto;
  justify-content: center;
  align-items: center;
  overflow: visible;
  z-index: 10;
  position: relative;
  place-self: anchor-center;

  .main-wrapper {
    width: 56%;
    background: #02254c59;
    color: #f5f5f5;
    backdrop-filter: blur(0.3125rem);
    border-radius: 0.6rem 0.3125rem 0.3125rem 0.6rem;
    max-height: 86vh;
    height: auto;
    overflow-y: auto;
    scrollbar-width: auto;
    scroll-behavior: smooth;
    scrollbar-gutter: stable edges;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
      rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
      rgba(0, 0, 0, 0.09) 0px 32px 16px;

    &::-webkit-scrollbar {
      width: 6px;
    }

    .section {
      .head_1 {
        /* font-size: 1.5rem; */
        font-size: 20px;
        background-color: #041324;
        color: #dbe7f5;
        padding: 0.62rem 1.25rem;
        border-radius: 0.1875rem 0 0 0.1875rem;
        position: sticky;
        top: 0;
      }

      .head_2 {
        margin-top: 1.25rem;
        margin-left: 0.9375rem;
        color: #f5f5f5;
        /* font-size: 1.375rem; */
        font-size: 22px;
        font-weight: 100;
      }

      ul {
        margin-top: 1.25rem;
        list-style-type: "\2713";
        padding-right: 0.4rem;
      }

      li {
        margin-top: 0.62rem;
        margin-left: 0.3125rem;
        margin-right: 0.62rem;
        padding-left: 0.5em;
        text-align: justify;
        letter-spacing: 1px;
        font-weight: 100;
        color: #dbe7f5;
      }

      li > ul {
        list-style-type: square;
      }
    }
  }

  .main-wrapper::-webkit-scrollbar-track {
    background: transparent;
  }

  .main-wrapper::-webkit-scrollbar-thumb {
    background: #07182b;
    border-radius: 0 0.62rem 0.62rem 0;
  }
}

.fixed-right-img {
  position: fixed;
  right: 0px;
  bottom: 0px;
  max-width: 30%;
  min-width: 10%;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 1100px) {
  .fixed-right-img {
    display: none;
  }
  .side-menu {
    width: 25%;
  }
  main {
    width: 90%;
    justify-content: right;

    .main-wrapper {
      width: 70%;
    }
  }
}

@media (max-width: 1024px) {
  .side-menu {
    width: 25%;
    justify-content: space-around;
  }

  main {
    width: 90%;
  }
}

/* Hide side menu and show header */
@media (max-width: 860px) {
  header {
    display: flex;

    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 0.5rem 1.5rem;
      background-color: #06213fbd;

      color: #dbe7f5;
      position: relative;
      z-index: 1000;

      .nav-links {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: -100%;
        right: 0;
        width: 100%;
        text-align: center;
        backdrop-filter: blur(6px);
        background: rgba(6, 33, 63, 0.77);
        transition: 0.3s ease-in-out;
        list-style: none;
        z-index: -1;

        &.active {
          top: calc(100% - 93%);
          padding: 0;
        }

        li {
          padding: 1.5rem 0;
        }

        a {
          padding: 0.62rem;
          color: #dbe7f5;
          text-decoration: none;
          font-size: 0.9rem;
          font-weight: 600;
          transition: background 0.2s ease, color 0.2s ease;

          i {
            margin: 0 0.62rem;
          }
        }

        a:hover {
          background: #07182b;
          color: #dbe7f5;
        }
      }

      .hamburger {
        display: block;
        cursor: pointer;
        background: none;
        border: none;
        order: 2;
        padding: 0;

        .bar {
          display: block;
          width: 1.5625rem;
          height: 0.1875rem;
          margin: 0.3125rem auto;
          background-color: white;
          transition: 0.3s;
        }
      }

      .logo {
        text-align: center;
        display: flex;
        gap: 0.62rem;
        align-items: center;

        img {
          height: 1.875rem;
        }
      }
      .title {
        font-size: 1.3rem;
        text-align: center;
      }
    }
  }

  footer {
    display: flex;
    justify-content: space-around;

    .actions,
    .resize {
      display: flex;
      max-width: 30%;
      padding: 0.5rem 1rem;
      background-color: #122e4df7;
      color: #dbe7f5;
      position: fixed;
      z-index: 1000;
      align-items: center;
      gap: 0.62rem;
      flex-wrap: nowrap;
      justify-content: space-around;
      border-radius: 2rem;
      bottom: 10px;
      right: 10px;

      button {
        min-width: 38px;
        height: 38px;
        padding: 0 0.62rem;
        border: none;
        border-radius: 6px;
        background: #122e4d00;
        font-size: 1rem;
        cursor: pointer;
        /* backdrop-filter: blur(6px);
        border: 1px solid #4a6981; */
        display: flex;
        align-items: center;
        justify-content: center;

        transition: background-color 0.2s ease, transform 0.1s ease;

        i {
          font-size: 1.25rem;
        }

        .fa-whatsapp {
          color: #269346;
        }

        .fa-phone-volume {
          color: #269346;
        }
      }

      button:hover {
        background: rgba(112, 168, 248, 0.25);
      }

      button:active {
        transform: scale(0.95);
      }

      button:not(:has(i)) {
        font-weight: bold;
        font-size: 17px;
      }
    }

    .resize {
      max-width: 29%;
      left: 10px;

      button {
        color: #dbe7f5;
        font-size: x-large;

        i {
          color: #dbe7f5;
        }
      }
    }
  }

  .side-menu {
    display: none;
  }

  main {
    .main-wrapper {
      width: 100%;
      max-height: 80dvh;
    }
  }
}

@media (max-width: 538px), (max-height: 430px) {
  header {
    display: flex;

    .navbar {
      padding: 5px 0.62rem;
      gap: 0.92rem;

      .hamburger {
        display: block;
        cursor: pointer;
        background: none;
        border: none;

        .bar {
          display: block;
          width: 1.25rem;
          height: 2px;
          margin: 5px auto;
          background-color: #f5f5f5;
          transition: 0.3s;
        }
      }

      .logo {
        gap: 0.62rem;
        flex-direction: column;

        img {
          height: 1.56rem;
        }
      }
      .title {
        font-size: 1.2rem;
      }
    }
  }

  main {
    .main-wrapper {
      max-height: 80vh;

      .section {
        .head_1 {
          font-size: 22px;
          top: -1;
        }

        .head_2 {
          font-size: 1.25rem;
          margin-top: 0.62rem;
          margin-left: 0.62rem;
          font-weight: 600;
        }
        ul {
          margin-left: 0;
          margin-top: 0.62rem;
        }

        li {
          margin-top: 5px;
          margin-left: 0px;
          margin-right: 5px;
          padding-left: 5px;
          /* font-size: 14px; */
          letter-spacing: 2px;
        }
      }
    }
  }
}

@media (max-width: 359px) {
  header {
    .navbar {
      .nav-links.active {
        top: calc(100% - 90%);
      }
    }
  }

  footer {
    .actions,
    .resize {
      max-width: 40%;
      gap: 0.2rem;
    }
  }
}

@media (max-width: 307px) {
  header {
    .navbar {
      gap: 0.25rem;

      .logo {
        gap: 0.35rem;
      }
    }
  }

  footer {
    .actions,
    .resize {
      max-width: 50%;
    }
  }

  main {
    .main-wrapper {
      .section {
        .head_1 {
          font-size: 18px;
          padding: 0.35rem 0.65rem;
        }

        .head_2 {
          font-size: 18px;
          margin: 0 0.65rem;
        }

        ul {
          margin-top: 0.35rem;
        }
      }
    }
  }
}

@media (max-width: 290px) {
  header {
    .navbar {
      .nav-links.active {
        top: calc(100% - 89%);
      }

      .logo {
        flex-direction: column;
      }
    }
  }
}

@media (max-width: 261px) {
  header {
    .navbar {
      .nav-links.active {
        top: calc(100% - 87%);
      }
    }
  }
}

@media (max-width: 222px) {
  header {
    .navbar {
      .nav-links.active {
        top: calc(100% - 85%);
      }
    }
  }
}

/* Height Responsive  */
@media (max-height: 850px) {
  .fixed-right-img {
    max-width: 30%;
  }
}

@media (max-height: 700px) {
  .side-menu {
    justify-content: space-evenly;
    gap: 0;

    .logo {
      .title {
        font-size: 1rem;
      }
    }

    .menu a {
      font-size: 0.86rem;
    }
  }

  .fixed-right-img {
    max-width: 25%;
  }
}

@media (max-height: 600px) {
  .side-menu {
    .side-menu-wraper {
      .logo {
        .title {
          font-size: 1rem;
        }
      }

      .menu {
        gap: 0.3rem;
      }
    }
  }

  .fixed-right-img {
    max-width: 23%;
  }
}

@media (max-height: 550px) {
  .side-menu {
    overflow-y: hidden;

    .side-menu-wraper {
      .actions {
        button {
          min-width: 2rem;
          height: 2rem;
          padding: 5px;
        }
      }
    }
  }

  header {
    .navbar {
      padding: 0.3rem 1.25rem;
    }
  }

  main {
    .main-wrapper {
      margin-top: 0;
      max-height: 86vh;
    }
  }

  .fixed-right-img {
    max-width: 19%;
  }
}

@media (max-height: 400px) {
  .side-menu {
    .side-menu-wraper {
      .logo {
        flex-shrink: 0;
        height: 30%;
      }

      .menu {
        height: 100%;
        overflow-y: auto;
        scrollbar-width: auto;
        scroll-behavior: smooth;
        flex: 1;
      }

      .actions {
        flex-shrink: 0;
        padding-top: 0.6rem;
      }
    }
  }

  .fixed-right-img {
    max-width: 20%;
  }
}

@media (max-height: 450px) {
  .side-menu {
    width: 20%;

    .side-menu-wraper {
      .logo {
        .title {
          font-size: 0.8rem;
        }
      }

      .menu {
        a {
          padding: 0.4rem;
          font-size: 0.8rem;
        }
      }

      .actions {
        button {
          min-width: 1.5rem;
          height: 1.7rem;
          padding: 6px;
        }
      }
    }
  }

  main {
    margin: 0.62rem;

    .main-wrapper {
      max-height: 86dvh;
    }
  }

  .fixed-right-img {
    max-width: 16%;
  }
}

@media (max-height: 450px) and (max-width: 860px) {
  main {
    margin: 0.62rem;

    .main-wrapper {
      max-height: 72dvh;
    }
  }
}