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

@layer base {
  :root {
    --text-primary-color: #5e5e5e;
    --text-secondary-color: #121820;
    --button-color: #f57c00;
    --text-color: #ffffff;

    --bg-color: #005464;

    /* fonts */
    --montserrat: "Montserrat", sans-serif;

    /* FONT SIZE */
    /* --fs-900: clamp(5rem, 8vw + 1rem, 9.375rem); */
    --fs-800: 3.2rem;
    --fs-700: 2.2rem;
    --fs-600: 1.11rem;
    --fs-500: 0.9rem;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
    /*box-sizing */
    margin: 0;
    padding: 0;
  }

  body {
    font-family: var(--montserrat);
    font-size: var(--fs-500);
    line-height: 1.5;
    text-rendering: optimizeSpeed !important;
    /* min-height: 100%; */
    /* padding-inline: 8rem; */

    font-weight: 500;
    background-color: #f3f3f4;
    transition: all;
    transition: ease-in-out 1s;
    font-weight: 400;
  }

  ul,
  li,
  a,
  button {
    text-decoration: none;
    list-style: none;
  }

  /* img {
    max-width: 100%;
  } */

  h1 {
    font-size: var(--fs-800);
    font-weight: 700;
  }

  h2 {
    font-size: var(--fs-700);
    font-weight: 600;
  }

  h3 {
    font-size: var(--fs-600);
    font-weight: 500;
  }

  h4 {
    font-size: var(--fs-500);
    font-weight: 500;
  }

  button {
    padding: 1rem 2rem;
    border-radius: 100px;
    cursor: pointer;
  }

  input,
  textarea {
    border: none;
    /* background-color: #F3F3F3; */
  }

  input:focus,
  textarea {
    outline: none;
  }
}

@layer utilities {
  .flex-container {
    display: flex;
  }
}

.mobile-nav--toggle {
  display: none;
}

@layer mobile {
  @media (max-width: 768px) {
    .mobile-nav--toggle {
      display: block !important;
      position: absolute;
      width: 2rem !important;
      padding: 0 !important;
      z-index: 999;
      right: 1rem;
      top: 2rem;
      background: transparent;
      background-image: url(/assets/mobile/icon-hamburger.svg);
      border: none;
      background-position: center;
      background-repeat: no-repeat;
      aspect-ratio: 1;
      transition: ease-in-out 0.5s;
      transform: translateY(30%);
    }

    .mobile-nav--toggle[aria-expanded="true"] {
      background-image: url(/assets/mobile/icon-close.svg);
    }

    .navigation {
      position: fixed;
      inset: 10% 0 0 0;
      transform: translate(100%);
      transition: ease-in-out 1s;
      background-color: #ffffff;
      /* background-color: transparent; */
      /* z-index: -1; */
    }

    .navigation[data-visible="true"] {
      transform: translate(0);
    }

    .primary-navigation {
      margin-inline: 2rem !important;
      padding-inline: 2rem !important;
      padding-top: 3rem;
      flex-direction: column;
      border-radius: 10px;
      gap: 2.5rem !important;
      font-size: 1.5rem;
      font-weight: 700;
    }

    .logoDiv {
      z-index: 999;
    }

    .primary-navigation li {
      text-align: center;
    }

    .primary-header {
      padding-inline: 2rem !important;
      gap: 0 !important;
      justify-content: space-between !important;

      button {
        &:hover {
          color: var(--text-secondary-color) !important;
        }
      }

      li a {
        &:hover {
          color: var(--text-primary-color) !important;
        }
      }
    }

    .sub-menu {
      display: none;
      /* display: none; */
      flex-direction: column !important;
      position: relative !important;
      background-color: transparent !important;
      gap: 0;
      box-shadow: none;
      padding: 0rem 0.5rem;
      border-radius: 0;
      bottom: 0;
      right: 0 !important;
      top: 0 !important;
      left: 0 !important;
      .left {
        gap: 1.5rem;
        align-items: center;
        img {
          display: none;
        }
        p {
          color: #000000 !important;
        }
      }

      .right {
        display: none;
      }
    }

    .sub-menu .active {
      display: flex;
    }

    .hero {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;

      .hero-text {
        align-items: center !important;
        padding-inline: 2rem !important;
        text-align: center;
        padding-top: 4rem !important;
        gap: 1rem;

        h1 {
          font-size: 2.5rem !important;
          line-height: 1;
        }
      }
    }

    .services-container {
      padding-block: 3rem;
      padding-inline: 2rem !important;
      gap: 2rem !important;

      .services {
        gap: 3rem !important;

        .service-head {
          flex-direction: column;
          gap: 3rem;
          text-align: left;
          /* margin-bottom: -2.5rem !important; */
          margin: 0 auto !important;
        }

        .learn-more {
          text-align: center;
          /* gap: 2rem !important; */

          .boat-building {
            min-width: 280px !important;
            height: 450px !important;

            img {
              width: 100%;
            }

            p:first-of-type {
              font-size: 12px !important;
            }
          }

          .text-more {
            gap: 4rem !important;
          }
        }
      }
    }

    .demodemo {
      opacity: 0.3 !important;
    }

    .marine-text {
      z-index: 1;
      padding-inline: 2rem;

      h2 {
        font-size: 1.5rem !important;
        font-weight: 900;
      }
    }

    .logo-company {
      padding-block: 2rem !important;

      .logos-company {
        flex-wrap: wrap;
        gap: 2rem !important;

        img {
          max-width: 30% !important;
        }
      }
    }

    .case-container {
      padding: 2.2rem !important;
    }

    .case-three--img {
      flex-direction: column;
      text-align: center;
    }

    .workers-container {
      padding: 2rem !important;
      flex-direction: column;
      gap: 2rem !important;

      .workers-img {
        position: relative;

        > img {
          height: 100% !important;
          width: 100% !important;
        }

        .second-image {
          max-width: 50% !important;
          right: 25% !important;
          bottom: -50% !important;
        }
      }

      .workers-text {
        gap: 1.5rem !important;
        text-align: center;

        h2 {
          font-size: 30px !important;
        }

        ul {
          font-weight: 700;
        }
      }
    }

    .copyright {
      padding-inline: 6.5rem;
      text-align: center;
    }

    .footer-copy {
      gap: 3rem;
    }

    .footer-container {
      padding-inline: 5rem !important;
      padding-top: 3rem !important;

      .footer-head {
        flex-direction: column;
        justify-content: center !important;
        /* align-items: end; */
        gap: 0rem !important;

        .footer-head--text {
          text-align: center;

          h2 {
            font-size: 1.6rem;
          }

          p {
            padding-block: 1rem;
          }
        }

        .footer-input {
          background-color: transparent !important;
          z-index: 50;

          input {
            padding: 1em 3rem;
            border-radius: 100px;
          }

          button {
            padding: 1em 5.2rem;
            font-weight: 700;
            /* border-radius: 50px; */
            /* border: none; */
            margin-top: 0.5rem;
            /* margin-right: -30px !important; */
          }
        }
      }

      .footer-line {
        padding-block: 1rem !important;
        width: 100px !important;
        display: none;
      }

      .footer-bottom {
        padding-top: 3rem !important;
        padding-inline: 3rem !important;
        display: flex;
        flex-direction: column;
        justify-content: center !important;
        align-items: center !important;
        gap: 0 !important;

        .footer-one {
          display: flex;
          flex-direction: column;
          justify-content: center !important;
          align-items: center !important;
        }

        .footer-two {
          padding-top: 2rem;
          display: none !important;
        }
      }
    }
  }
}

@layer header {
  /* @media (min-width: 560px) { */
  header {
    display: flex;
    gap: 9rem;
    padding-inline: 4rem;
    padding-left: 8rem;
    padding-block: 1.1rem;

    top: 0;
    width: 100%;
    background-color: #fff;
    padding-top: 1rem;
    z-index: 999;
    position: fixed;
    align-items: center;
    transition: opacity 500ms linear, transform 750ms ease-in-out;

    nav {
      width: 100%;
    }

    ul {
      display: flex;
      justify-content: end;
      gap: 4rem;
      font-weight: 500;
      max-width: 70.25rem;
      font-size: 1.1rem;
      align-items: center;

      li a {
        color: #1d232a;

        &:hover {
          color: var(--text-primary-color);
        }
      }

      .circle {
        justify-content: center;
        align-items: center;
        display: flex;
        gap: 0.5rem;

        > img {
          transform: rotate(180deg);

          &.active {
            transform: rotate(0deg);
            transition: ease-in-out 1s;
          }
        }
      }

      .circle-li {
        display: flex;
      }

      .circle-li span {
        width: 5px !important;
        height: 5px !important;
        border: 2px solid red;
        border-radius: 50%;
      }

      button {
        background-color: var(--button-color);
        color: #ffffff;
        border: 1px solid var(--button-color);

        &:hover {
          border: 1px solid var(--button-color) !important;
          color: var(--button-color);
          background-color: transparent;
        }
      }
    }
  }

  .sub-menu {
    display: none;
    flex-direction: row;
    position: absolute;
    background-color: #005464;
    gap: 1rem;
    box-shadow: 0px 0px 1px 1px rgba(255, 255, 255, 0.45);
    padding: 2rem 1rem;
    border-radius: 10px;
    right: 35%;
    top: 100%;
    font-weight: 300;
    display: none;
    /* transition: opacity 500ms linear, transform 750ms ease-in-out; */

    /* transition: 1s ease-in-out; */
  }

  .active .sub-menu {
    /* transition: opacity 500ms linear, transform 750ms ease-in-out; */

    display: flex;
  }

  .left {
    display: flex;
    flex-direction: column;
    padding-left: 1rem;
    justify-content: space-between;

    p {
      color: #ffffff;

      display: flex;
      gap: 1rem;
      cursor: pointer;
    }
  }

  .right {
    background-color: #ffffff;
    color: #000;
    border-radius: 10px;
    padding: 1rem;

    p {
      padding-bottom: 1rem;
      font-weight: 400;
      font-size: 0.9rem;
    }
  }
}

/* } */

/* } */

@layer main {
  main {
    margin-top: 5rem;
    overflow: hidden;

    > button {
      background-image: url(/assets/message-square.svg);
      background-color: var(--button-color);
      background-position: center;
      background-repeat: no-repeat;
      padding: 2rem;
      border-radius: 50%;
      border: none;
      position: fixed;
      top: 85%;
      right: 10%;
      z-index: 88;
      animation: pulse 1500ms infinite;

      &:hover::before {
        opacity: 1;
        transform: scale(1.3);
        /* animation: none; */
      }

      &::before {
        content: "";
        top: 0%;

        right: 0%;
        position: absolute;
        z-index: -9999;
        width: 100%;
        height: 100%;
        background: #f57b0061;
        border-radius: 50%;
        opacity: 0;
        transition: opacity 500ms linear, transform 750ms ease-in-out;
        /* animation: pulse 1500ms cubic-bezier(0.9, 0.7, 0.5, 0.9) infinite; */
      }
    }
  }

  .hidden {
    opacity: 0;
    transition: all 1s;
    transform: translateY(-15%);
    filter: blur(5px);
  }

  .show {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }

  .semi-hidden {
    opacity: 0;
    transition: all 1s;
    transform: translateY(-100%);
    filter: blur(5px);
  }

  .semi-show {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
    transition: all 0.3s;
  }

  .hero {
    background: linear-gradient(90deg, #1c2d59 0%, rgba(28, 45, 89, 0) 97.36%),
      url(/assets/Hero.png) center center / cover no-repeat;

    /* background-image:  url(/assets/Hero.png); */

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: -90px;
    height: 100vh;
    display: flex;
    justify-content: start;
    align-items: center;

    filter: drop-shadow(#1c2d59 0px 10px 80px);

    .hero-text {
      display: flex;
      /* background: linear-gradient(45deg, rgba(28, 45, 89, 1) 0%, rgba(28, 45, 89, 0) 100%); */
      gap: 2rem;
      flex-direction: column;
      justify-content: center;
      align-items: start;
      max-width: 70ch;
      color: var(--text-color);
      /* padding-left: 3rem; */
      padding-left: 8rem;

      button {
        border: none !important;
        color: #1c2d59;

        &:hover {
          background-color: #1c2d59;
          color: #ffffff;
        }
      }
    }
  }

  .services-container {
    display: flex;
    flex-direction: column;
    padding-block: 3rem;
    padding-left: 8rem;
    gap: 3rem;
    color: var(--text-secondary-color);

    > .deco-part {
      position: relative;
      width: 100%;

      /* font-size: 17px; */
      img {
        position: absolute;
        right: 20%;
        top: -5rem;
      }
    }

    .services {
      display: flex;
      flex-direction: column;
      gap: 4rem;

      .service-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 4rem;

        .arrow-btn {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 1.5rem;
          font-weight: 700;

          .prev-btn {
            display: flex;
            gap: 10px;
            /* color: rgba(18, 24, 32, 0.4); */
            cursor: pointer;
          }

          .next-btn {
            display: flex;
            flex-direction: row-reverse;
            gap: 10px;
            cursor: pointer;
          }
        }
      }

      .learn-more {
        display: flex;
        overflow: hidden;
        gap: 3rem;
        width: 100%;

        .boat-building {
          /* white-space: nowrap; */
          padding: 2.5rem;
          width: 100%;
          min-width: 450px;
          height: 517px;
          border-radius: 10px;
          box-shadow: 5px -5px 28px #ededed, -5px 5px 28px #ffffff;
          background: #ffffff;
          /* background: #000; */

          cursor: pointer;

          h3 {
            font-weight: 600;
          }

          img {
            margin-top: 1rem;
            margin-bottom: 2.5rem;
          }

          .text-more {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            height: 70%;
          }

          p:first-of-type {
            color: #5e5e5e !important;
            font-size: 15px;
            line-height: 2.5;
          }

          p:last-of-type {
            font-weight: 600;
            /* justify-self: end; */

            button {
              border: none;
              background-image: url(/assets/arrow-right-circle-dis.svg);
              background-repeat: no-repeat;
              padding: 1rem !important;
              background-color: transparent;
            }
          }
        }

        .boat-building:hover,
        p:first-of-type:hover {
          background-color: #005464;
          color: #ffffff !important;
          box-shadow: 0, 0;

          p:first-of-type {
            color: #ffffff !important;
          }

          button {
            background-image: url(/assets/arrow-right-circle.svg);
          }
        }
      }
    }
  }

  .marine-container {
    background-image: url(/assets/Rectangle\ 17.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 568px;
    margin-top: 2rem;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    .demodemo {
      position: absolute;
      left: 5%;
      top: 0%;
    }

    .marine-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3.2rem;
      max-width: 60ch;
      text-align: center;

      h3 {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
      }

      span {
        border: 2px solid var(--button-color);
        border-radius: 50%;
        height: 5px;
        width: 5px;
      }

      button {
        border: none;
        background-image: url(/assets/arrow-right-circle.svg);
        background-repeat: no-repeat;
        padding: 1rem !important;
        background-color: transparent;
      }
    }
  }

  .logo-company {
    padding-inline: 4rem;
    padding-block: 6rem;
    background-color: white;

    .logos-company {
      object-fit: contain;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 4rem;

      img {
        max-width: 10%;
      }
    }
  }

  .case-container {
    padding: 5rem;
    padding-inline: 8rem;

    .case-header * {
      margin-bottom: 2rem;
    }

    .case-three--img {
      display: flex;
      gap: 2rem;

      .supply-container {
        background-color: #ffffff;
        border-radius: 23px;
        box-shadow: 0px 24px 50.79999923706055px 0px #0000001a;

        background: linear-gradient(145deg, #e6e6e6, #ffffff);

        img {
          max-width: 100%;
          min-height: 210px !important;
        }

        .supply-text {
          padding-block: 3rem;
          padding-inline: 2rem;
          display: flex;
          flex-direction: column;

          h3 {
            /* font-size: 17px; */
            font-weight: 600;
            padding-bottom: 1rem;
            color: #1d232a;
          }

          p {
            color: #5e5e5e;
          }
        }
      }
    }
  }

  .workers-container {
    background-color: #ffffff;
    padding: 5rem;
    padding-inline: 8rem;
    display: flex;
    gap: 5rem;
    position: relative;

    > img {
      position: absolute;
      right: 10%;
      top: 0;
      max-width: 15%;
    }

    .workers-img {
      position: relative;

      > img {
        width: 100%;
      }

      .first-image {
        width: 500px;
        height: 500px;
      }

      .second-image {
        max-width: 40%;
        position: absolute;
        right: -15%;
        bottom: 10%;
      }
    }

    .workers-text {
      display: flex;
      flex-direction: column;
      gap: 2.5rem;
      line-height: 2;
      padding-top: 2rem;

      h2 {
        line-height: 1.3;
        font-size: 35px;
      }

      h3 {
        font-weight: 500;
      }

      h3,
      p {
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 5px;
      }

      span {
        border: 2px solid var(--button-color);
        border-radius: 50%;
        height: 5px;
        width: 5px;
      }
    }
  }

  footer {
    position: relative;
    background-color: #005464;
    color: #ffffff;
    /* height: 120vh; */
    padding-bottom: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;

    > img {
      position: absolute;
      margin-bottom: 9rem;
      height: 100%;
    }
  }

  .footer-copy {
    display: flex;
    flex-direction: column;
    background-color: #005464;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: 6rem;
  }

  .footer-container {
    color: #ffffff;
    padding-inline: 8rem;
    padding-top: 5rem;

    .footer-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 4rem;

      .footer-head--text {
        span {
          color: var(--button-color);
        }

        p {
          padding-top: 1rem;
        }
      }

      .footer-input {
        background-color: #ffffff;
        padding: 0.2em 3rem;
        border-radius: 100px;
        z-index: 50;

        input {
          border: none;

          &:focus {
            outline: none;
          }
        }

        button {
          background-color: var(--button-color);
          color: #ffffff !important;
          font-weight: 700;
          border: none;
          margin-right: -45px;
        }
      }
    }

    .footer-line {
      padding-block: 3rem;
      width: 100%;
      z-index: 99999;
    }

    .footer-bottom {
      display: flex;
      justify-content: center;
      align-items: start;
      gap: 7rem;

      .footer-one {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
      }

      .footer-two {
        padding-top: 2rem;
      }

      .footer-content {
        padding-top: 2rem;
        line-height: 4;
        z-index: 77;

        p {
          cursor: pointer;
          color: #fff;

          &:hover {
            color: #f57c00;
          }
        }
      }

      h2 {
        font-size: 20px;
      }

      .w-logo {
        align-items: start;
        max-width: 40ch;
        gap: 4rem;

        p {
          padding-top: 1rem;
        }

        .social-media {
          display: flex;
          align-items: center;
          justify-content: center;
          /* border: 2px solid white; */
          gap: 1rem;
          z-index: 50;

          > img {
            cursor: pointer;

            &:hover {
              color: #f57c00;
            }
          }
        }
      }
    }
  }
}

.about-page {
  background: linear-gradient(90deg, #1c2d59 0%, rgba(28, 45, 89, 0) 30%),
    url(/assets/About-us-home.png) center center / cover no-repeat !important;
  margin-top: 10px;
  height: 100%;
  height: 313px;

  display: flex;
  align-items: end;
  filter: drop-shadow(#1c2d59 0px 10px 80px);

  .about-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    height: 50%;
    color: var(--text-color);
    padding-left: 8rem;
    padding-bottom: 1rem;

    span {
      color: #f57c00;
    }
  }
}

.about-page--group {
  display: flex;
  flex-direction: column;
  padding-top: 8rem;
  background-color: #ffffff;
  padding-inline: 8rem;

  p {
    color: #5e5e5e;
    font-size: 1rem;
  }

  .deco-deco {
    position: absolute;
    right: 20%;
    top: 50%;
    z-index: 5;
  }

  .deco-part {
    img {
      padding-block: 2rem;
    }
  }

  .group-content {
    display: flex;
    padding-top: 6rem;
    gap: 12rem;
    position: relative;

    .group-left {
      .dot-dot {
        position: absolute;
        max-width: 100%;
        top: 7%;
        right: 67%;
      }

      .big-ship {
        position: relative;
        max-width: 120%;
      }

      .stars {
        max-width: 60%;
        position: relative;
        bottom: 30%;
        right: -75%;
      }
    }

    .group-right {
      display: flex;
      flex-direction: column;
      gap: 1.7rem;
      line-height: 1.8;

      .head-work {
        display: flex;
        gap: 0.4rem;
        /* justify-content: center; */
        align-items: center;
      }
    }
  }

  .learn-moree {
    font-weight: 600;
  }

  button {
    border: none;
    background-image: url(/assets/arrow-right-circle.svg);
    background-repeat: no-repeat;
    padding: 1rem !important;
    background-color: transparent;
  }
}

.vision-mision--container {
  background-image: url(/assets/vision-mission.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 455px;
  color: var(--text-color);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  /* padding-top: -5rem; */
  position: relative;

  .v-m--text {
    max-width: 48ch;
  }

  p {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.1rem;

    span {
      border: 2px solid var(--button-color);
      border-radius: 50%;
      background-color: #f57c00;
      height: 5px;
      width: 5px;
    }
  }

  .vision-mission {
    /* margin-inline: 20rem; */

    display: flex;
    position: absolute;
    justify-self: center;
    text-align: start;
    align-items: center;
    gap: 3rem;
    z-index: 9999;

    bottom: 20%;
    /* left: 168px; */
    top: 100%;
    z-index: 1;

    .box {
      /* height: 275px; */
      border-radius: 13px;
      padding: 2rem 2rem 6rem;
      width: 650px;

      img {
        margin-block: 1rem;
        max-width: 90%;
      }
    }

    .vision-box {
      background-color: #005464;
      color: #ffffff;
      box-shadow: 0px 24px 58.29999923706055px 0px #00000038;
    }

    .mission-box {
      background-color: #ffffff;
      color: #5e5e5e;
      box-shadow: 0px 24px 58.29999923706055px 0px #00000038;
    }
  }
}

.belief {
  background-color: #ffffff;
  padding-block: 10rem;
  padding-top: 15rem;
  text-align: center;
  padding-inline: 8rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;

  .belief-head {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    font-weight: 500;
    font-size: 17px;

    span {
      border: 2px solid var(--button-color);
      border-radius: 50%;
      background-color: #f57c00;
      height: 5px;
      width: 5px;
    }
  }

  .belief-message {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
  }
}

@media (max-width: 768px) {
  .about-page {
    align-items: end;
    justify-content: start;

    .about-text {
      justify-content: space-evenly;
      height: 100%;
      padding-left: 2rem;

      h1 {
        font-size: 2rem;
      }

      span {
        font-weight: 700;
      }
    }
  }

  .about-page--group {
    padding-top: 4rem;
    padding-inline: 2rem;

    p {
      color: #5e5e5e;
      font-size: 1rem;
    }

    .deco-deco {
      display: none;
    }

    .deco-part {
      img {
        /* display: none; */
        padding-block: 1rem;
        max-width: 100px;
      }
    }

    .group-content {
      flex-direction: column;
      padding-top: 4rem;
      gap: 4rem;
      position: relative;

      .group-left {
        .dot-dot {
          display: none;
        }

        .big-ship {
          position: relative;
          max-width: 100%;
        }

        .stars {
          max-width: 60%;
          position: absolute;
          top: 0% !important;

          right: 20%;
        }
      }

      .group-right {
        text-align: center;
        padding-bottom: 3rem;
      }
    }

    .learn-moree {
      font-weight: 600;
    }
  }

  .vision-mision--container {
    height: 455px;

    position: relative;

    .v-m--text {
      max-width: 48ch;
      padding-inline: 2rem;
    }

    .vision-mission {
      flex-direction: column;
      position: absolute;
      text-align: center;
      gap: 3rem;
      top: 80%;
      z-index: 2;

      .box {
        /* height: 275px; */
        border-radius: 13px;
        padding: 2rem;
        width: 250px;
      }
    }
  }

  .belief {
    padding-block: 4rem;
    padding-top: 35rem;
    padding-inline: 2rem;
  }
}

.hotline-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  padding-block: 10rem;
  padding-inline: 8rem;

  .mini-box {
    background-color: #ffffff;
    box-shadow: 0px 10px 28px -1px #00000012;
    padding: 3rem 4rem 1rem;
    text-align: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;
    max-width: 45ch;

    width: 520px;
    height: 206px;

    .image {
      display: grid;
      place-content: center;
      height: 80px;
      width: 80px;
      background-color: #005464;
      border-radius: 50%;
      position: absolute;
      top: -20%;
      /* padding: 1.5rem; */
    }

    .mini-text {
      h2 {
        font-size: 1.5rem;
        padding-bottom: 1rem;
      }
    }
  }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.reach-out--container {
  background-color: #f3f3f4;
  padding: 4rem 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;

  .reach-out--left {
    .reach-out--text {
      h2 {
        font-weight: 700;
      }

      p {
        font-weight: 600;
        max-width: 60ch;
        padding-block: 1rem;
      }
    }

    img {
      max-width: 100%;
    }
  }

  .reach-out--right {
    display: flex;
    flex-direction: column;
    /* justify-content: start; */
    align-items: center;

    .reach--reach {
      background-color: #ffffff;
      width: 700px;
      display: flex;
      padding: 1rem 2rem;
      flex-direction: column;
      gap: 2rem;
      border-radius: 10px;

      .input-flex {
        display: flex;
        flex-direction: column;

        label {
          color: #000000;
          font-weight: 600;
        }

        input,
        textarea {
          padding: 1rem 2rem;
          background-color: #f3f3f3;
          border-radius: 10px;
        }
      }
    }

    button {
      background-color: #f57c00;
      color: #ffffff;
      border-radius: 8px;
      padding: 1rem 6rem;
      border: none;
      width: 90%;
      letter-spacing: 2px;
      font-weight: 600;
    }
  }
}

@media (max-width: 768px) {
  .hotline-section {
    padding-block: 5rem;
    padding-inline: 2rem;
    flex-direction: column;
    gap: 5rem;

    .mini-box {
      box-shadow: 13px 13px 26px #bdbdbd, -13px -13px 26px #ffffff;
      padding: 3rem 0rem 1rem;
      width: 100%;
    }
  }

  .reach-out--container {
    padding: 4rem 2rem;
    flex-direction: column;

    .reach-out--left {
      .reach-out--text {
        h2 {
          text-align: center;
        }
      }
    }

    .reach-out--right {
      max-width: 100%;

      .reach--reach {
        width: 100%;
      }
    }
  }
}

.quote-top {
  background-image: url(/assets/vision-mission.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 455px;
  color: var(--text-color);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  word-spacing: 4px;
}

.quote-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-block: 5rem;

  .quote-container--head {
    text-align: center;

    h3 {
      padding-block: 1rem 2.5rem;
      font-size: 1.4rem;
      word-spacing: 3px;
    }
  }
}

.quote-form {
  background-color: #ffffff;
  border-radius: 10px;
  display: grid;
  place-items: center;
  padding: 0 1rem 2rem;

  .reach--reach {
    /* background-color: #ffffff; */
    width: 100%;
    display: flex;
    padding: 2rem;
    /* flex-wrap: 4; */
    flex-direction: column;
    gap: 2rem;
    border-radius: 10px;

    .input-flex {
      display: flex;
      flex-direction: column;

      label {
        color: #000000;
        font-weight: 600;
      }

      select > option {
        font-size: 1.2rem;
      }

      input,
      textarea,
      select {
        padding: 1rem 2rem;
        background-color: #f3f3f3;
        border-radius: 10px;
      }

      textarea {
        min-width: 500px;
      }
    }
  }

  button {
    background-color: #f57c00;
    color: #ffffff;
    border-radius: 8px;
    /* padding: 1rem 4rem; */
    border: none;
    width: 50%;
    letter-spacing: 2px;
    font-weight: 600;
  }
}

@media (max-width: 768px) {
  .quote-top h1 {
    font-size: 2.3rem;
  }

  .quote-container {
    padding-inline: 2rem;
  }

  .quote-form {
    max-width: 100%;

    .reach--reach {
      padding: 0.5rem;
      gap: 1.5rem;

      .input-flex {
        textarea {
          min-width: 100%;
          max-width: 200px;
        }
      }
    }
  }
}

.services-content {
  display: flex;
  flex-direction: column;
  padding: 6rem 8rem;
  gap: 4rem;

  .content-one {
    display: flex;
    gap: 9rem;
    /* justify-content: center; */
    align-items: center;
    /* border: 2px solid black; */

    img {
      height: 100%;
      width: 450px;
      border-radius: 10px;
    }

    .services-text {
      align-items: start;
      display: grid;
      gap: 1rem;

      h1 {
        font-size: 2.5rem;
        color: var(--text-secondary-color);
      }

      p {
        max-width: 45ch;
        font-size: 1.2rem;
      }

      button {
        background-color: var(--text-secondary-color);
        padding-inline: 4rem;
        border-radius: 10px;
        font-weight: 600;
        color: #ffffff;

        &:hover {
          background-color: #f3f3f4;
          color: var(--text-secondary-color);
        }
      }
    }
  }

  .service-two {
    /* background-color: #ffffff; */
    flex-direction: row-reverse;
  }
}

@media (max-width: 768px) {
  .services-content {
    background-color: #ffffff;
    padding: 6rem 0em;
    gap: 4rem;

    .content-one {
      flex-direction: column;
      gap: 2rem;

      img {
        height: 100%;
        width: 100%;
        border-radius: 0px;
      }

      .services-text {
        padding-inline: 2rem;
        text-align: center;
        gap: 1.2rem;

        h1 {
          font-size: 1.5rem;
        }

        p {
          font-size: 1.1rem;
        }
      }
    }

    .service-two {
      flex-direction: column;
    }

    hr {
      margin-inline: 2rem;
    }
  }
}

.career-content {
  padding-inline: 8rem;
  color: var(--text-secondary-color);
  padding-block: 6rem;
  padding-top: 8rem;

  .text-para {
    font-size: 1.2rem;
    display: flex;
    gap: 2rem;
    flex-direction: column;
    color: var(--text-primary-color);
    font-weight: 500;
  }

  hr {
    margin-block: 4rem;
  }
  .career-text--one {
    display: flex;
    gap: 4rem;
    /* padding-bottom: 2rem; */

    h1 {
      padding-bottom: 2rem;
    }
  }
  .career-text--two {
    display: flex;
    gap: 4rem;
    /* padding-top: 2rem; */

    img {
      max-width: 50%;
      border-radius: 10px;
    }
  }
}

@media (max-width: 768px) {
  .career-content {
    padding-inline: 2rem !important;
    padding-block: 4rem;

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

    hr {
      margin-block: 4rem;
    }
    .career-text--one {
      flex-direction: column;

      gap: 4rem;

      h1 {
        padding-bottom: 2rem;
      }
    }
    .career-text--two {
      flex-direction: column-reverse;

      img {
        max-width: 100%;
      }
    }
  }
}

.clients-sec {
  /* background-color: #ffffff; */
  display: flex;
  gap: 2rem;
  padding-inline: 8rem;
  padding-block: 8rem;

  .client-box {
    border-radius: 34px;
    /* background: #ffffff; */
    box-shadow: -5px -5px 21px #666666, 5px 5px 21px #ffffff;
    padding: 3rem 2rem;
    width: 500px;
    min-height: 300px;
    display: grid;
    place-items: center;
    gap: 2rem;
    align-items: start;
    text-align: center;

    p {
      font-size: 1.2rem;
      font-weight: 450;
      color: var(--text-primary-color);
    }
  }
}

@media (max-width: 768px) {
  .clients-sec {
    flex-direction: column;
    padding-inline: 2rem;
    padding-block: 2rem;
    .client-box {
      width: 100%;
      min-height: 100%;
    }
  }
}

.health-safety--content {
  padding-inline: 8rem;
  color: var(--text-secondary-color);
  background-color: #ffffff;
  padding-block: 5rem;

  h1 {
    font-size: 3rem;
  }

  p {
    color: var(--text-primary-color);
    font-size: 1.2rem;
    font-weight: 500;
  }
  .health-first--content {
    padding-inline: 12rem;
    padding-bottom: 3rem;
    h1 {
      text-align: center;
      max-width: 15ch;
      margin: 0 auto;
    }
    .health-innertext {
      display: grid;

      gap: 2rem;
    }
  }

  .health-second--content {
    /* display: grid; */
    /* gap: 2rem; */

    hr {
      margin-block: 4rem;
    }

    .health-text--one {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 3rem;
      line-height: 1.7;

      img {
        /* max-height: 400px; */
        /* width: 600px; */
        align-self: center;
      }

      .health-text {
        max-width: 50%;

        h1 {
          font-size: 2.5rem;
          padding-bottom: 2rem;
        }

        .text-para {
          display: grid;
          gap: 2rem;
        }
        span {
          color: var(--text-secondary-color);
          font-weight: 700;
        }
      }
    }

    .health-odd {
      flex-direction: row-reverse;
    }
  }
}

@media (max-width: 768px) {
  .health-safety--content {
    padding-inline: 2rem;
    padding-block: 3rem;

    h1 {
      font-size: 2rem;
    }

    p {
      color: var(--text-primary-color);
      font-size: 1.2rem;
      font-weight: 500;
    }
    .health-first--content {
      padding-inline: 2rem;
      padding-bottom: 3rem;
      text-align: center;
    }

    .health-second--content {
      hr {
        margin-block: 4rem;
      }

      .health-text--one {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        text-align: center;

        img {
          align-self: center;
        }

        .health-text {
          max-width: 100%;

          h1 {
            font-size: 2rem;
            padding-bottom: 2rem;
          }
        }
      }

      .health-odd {
        flex-direction: column;
      }
    }
  }
}