@font-face {
  font-family: "Nebulica VF";
  src: url("../fonts/Nebulica/Nebulica-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nebulica VF";
  src: url("../fonts/Nebulica/Nebulica-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nebulica VF";
  src: url("../fonts/Nebulica/Nebulica-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nebulica VF";
  src: url("../fonts/Nebulica/Nebulica-Light.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nebulica VF";
  src: url("../fonts/Nebulica/Nebulica-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

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

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

@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope/Manrope-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html {
  scroll-behavior: smooth;
}

:root {
  --clr-black: #000000;
  --clr-lblack: #7a7a7a;
  --clr-white: #ffffff;

  --txt-18: 18rem;
  --txt-16: 16rem;
  --txt-6xl: 7.2rem;
  --txt-5xl: 6rem;
  --txt-4xl: 3.2rem;
  --txt-3xl: 2.8rem;
  --txt-2xl: 2.4rem;
  --txt-xl: 2.2rem;
  --txt-lg: 2rem;
  --txt-md: 1.8rem;
  --txt-base: 1.6rem;
  --txt-sm: 1.4rem;

  --font-sans: "Nebulica VF", system-ui;
  --font-serif: "Manrope", system-ui;

  --title-spacing: 8rem;
}

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

* {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-serif);
  background-color: var(--clr-black);
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

ul {
  padding: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
  font-family: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

#root,
#__next {
  isolation: isolate;
}

html {
  font-size: 62.5%;
}

body {
  font-size: var(--txt-base);
  background-color: var(--clr-black);
  min-height: 100vh;
}

/* ##### Helper Classes ##### */
.container {
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 6.4rem;
}

.h-screen {
  min-height: 100vh;
}

.title {
  color: var(--clr-lblack);
  font-weight: 400;
  text-transform: uppercase;
}

.bg-black {
  background-color: var(--clr-black);
}

.section-wrapper {
  position: relative;
  z-index: 10;
}

.btn-secondary,
.btn-primary {
  display: inline-block;
  border: 2px solid var(--clr-lblack);
  border-radius: 50px;
  text-transform: capitalize;
  text-decoration: none;
  font-weight: 400;
}

.btn-secondary {
  color: var(--clr-white);
  padding: 20px 28px;
}

.btn-primary {
  padding: 10px 16px;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hide {
  display: none;
}

/* Loader Animation */

.loader {
  background-color: black;
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--clr-lblack);
  font-family: var(--font-sans);
  font-size: var(--txt-4xl);

  div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    .cursor {
      margin-block: 5px;
      display: block;
      width: 2px;
      height: 30px;
      background-color: var(--clr-lblack);
      animation: blink 0.7s infinite;
    }
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* Header styles */
.header {
  color: #fff;
  mix-blend-mode: difference;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  right: 0;

  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 14px;

    .nav__brand {
      img {
        width: 75%;
      }
    }

    .icon-close-btn,
    .nav-toggler {
      display: none;
      cursor: pointer;
    }

    .nav-dropdown {
      flex: 1;

      .nav-menu__wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        /* display: none; */
        /* FOR TEM */
      }
    }

    .nav__menu {
      display: flex;
      align-items: center;
      justify-content: center;
      list-style: none;
      gap: 54px;
    }

    .nav__item,
    .nav__cta {
      a {
        font-weight: 500;
        color: var(--clr-white);
        text-decoration: none;
        font-size: var(--txt-base);
      }


      a:hover {
        color: var(--clr-lblack);
      }
    }
  }
}

header.behind-footer {
  position: absolute;
  /* no longer fixed */
  top: auto;
  bottom: 0;
  z-index: 1;
  /* send it below footer */
}

.s7-banner {
  /* position: sticky; */
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  position: relative;

  .container {
    h1 {
      color: var(--clr-white);
      font-size: 16rem;
      text-align: center;
      font-family: var(--font-sans);
      font-weight: 900;
      text-transform: uppercase;
      line-height: 1;
      display: flex;
      flex-direction: column;
    }
  }

  #myCanvas3D {
    width: 100vw;
    height: 100vh;
    display: block;
    background: transparent;
    /* ✅ this helps too */
    position: absolute;
    /* Optional: to layer over text */
    top: 0;
    left: 0;
    z-index: 1;
  }
}

.videoSec {
  .container {
    position: relative;

    #mainVideo {
      width: 100%;
      height: 100vh;
      object-fit: cover;
    }

    i {
      cursor: pointer;
      color: var(--clr-white);
      font-size: 3rem;
      position: absolute;
      bottom: 5%;
      right: 8%;
      background-color: #191919;
      padding: 10px;
      border-radius: 50%;


    }
  }
}

.solo-title {
  h2 {
    text-align: center;
    font-family: var(--font-sans);
    font-size: var(--txt-6xl);
    text-transform: uppercase;
    font-weight: 900;
    color: var(--clr-white);
    display: flex;
    flex-direction: column;
  }
}

.division-s7 {
  .container {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    /* align-items: center; */
    gap: var(--title-spacing);

  }

  .division-s7__wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-self: stretch;
    row-gap: 12rem;

    .division-first__wrapper {
      grid-column: 1/13;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .item {
        width: 15%;

        img {
          opacity: .8;
        }

        img:hover {
          opacity: 1;
        }
      }
    }

    .division-second__wrapper {
      grid-column: 3/11;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .item {
        width: 22%;

        img {
          opacity: .8;
        }

        img:hover {
          opacity: 1;
        }
      }

    }

    item {
      flex: 1;
    }
  }
}

.our-services {
  padding-block: 100px;
  display: flex;

  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--title-spacing);
  }

  .our-services__wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .service-item {
    position: relative;

    .content {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      h3 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-transform: capitalize;
        font-size: var(--font-size);
        color: white;
        line-height: 1;
        white-space: nowrap;
      }
    }

    .icon {
      position: absolute;
      inset: var(--ps-inset);
    }

    .icon-hover {
      position: absolute;
      inset: var(--ps-inset);
      display: none;
    }
  }

  .service-item:hover .icon {
    display: none;
  }

  .service-item:hover .icon-hover {
    display: block;
  }

  .service-item:first-of-type {
    grid-column: 1/3;
  }
}

.our-works {
  display: flex;
  align-items: center;

  .our-works__title {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  h2 {
    font-family: var(--font-sans);
    font-size: var(--txt-18);
    color: var(--clr-white);
    line-height: 1;
    text-transform: uppercase;
  }
}

.our-works-img {
  .container {
    display: flex;
    align-items: center;
    justify-content: center;

    .title__wrapper {
      height: 100%;

      div img {
        border-radius: 20px;
      }
    }
  }
}

.our-works-img__wrapper {
  gap: 220px;
  display: flex;
  flex-direction: column;
}

.scroller {
  color: var(--clr-lblack);

  .container {
    padding-inline: 29%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
  }

  h3 {
    padding-top: 150px;
    text-align: justify;
    font-size: 25px;
    font-weight: 500;
  }
}

.our-clients {
  padding-block: 10rem;

  .container {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--title-spacing);

    .title {
      text-align: center;
    }

    .our-client__wrapper {
      list-style: none;
      padding: 0;
      align-self: stretch;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      justify-items: center;
      row-gap: 100px;

      li {
        align-items: center;
        text-align: center;
        display: flex;
        justify-content: center;


        img {
          width: 50%;
        }
      }
    }
  }
}

.who-we-are {
  background-color: var(--clr-white);
  position: relative;

  #myCanvas {
    margin-top: -15px;
    pointer-events: none;
    position: absolute;
    inset: 0;
    display: block;
    z-index: 11;
  }

  ul {
    list-style: none;
    padding: 0;
  }

  .wrapper {
    width: 100%;
    height: 100%;

    /* position: relative; */


    .container {
      overflow: hidden;

      .title {
        min-height: 100vh;
        display: flex;
        align-items: center;
        width: fit-content;

        .title__wrapper {
          display: flex;
          align-items: center;
          gap: 40px;

          h2 {
            font-size: 55rem;
            color: var(--clr-black);
            white-space: nowrap;
            user-select: none;
            font-family: var(--font-sans);
            text-transform: uppercase;
            line-height: 0.8;
            letter-spacing: 5px;


          }

          img {
            height: auto;
            /* or whatever fits the font size visually */
            width: 25%;
            flex-shrink: 0;


          }
        }
      }

      /* .images {
        position: absolute;
        inset: 0;
        display: flex;
        justify-content: space-between;
      } */
    }
  }



  .who-we__content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;

    padding-block: 5rem;

    /* .who-content-img {
      grid-column: 2/5;
    } */

    .container {
      /* grid-column: 5/12; */
      display: flex;
      flex-direction: column;
      gap: 30px;

      .content {
        font-size: 2rem;
        line-height: 3.5rem;
        text-align: justify;
      }

      .btn-primary {
        font-weight: 600;
        font-size: 1.8rem;
        align-self: start;
        color: var(--clr-black);
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 5px 15px;

        i {
          display: block;
          padding: 10px;
          border: 1px solid var(--clr-black);
          border-radius: 50vh;
        }
      }
    }
  }
}

.sister-companies {
  --gap-comp: 100px;

  .container {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--title-spacing);

    .sister-companies__container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--gap-comp);

      .sister-companies__wrapper {
        padding-left: 0;
        list-style: none;
        display: flex;
        justify-content: space-between;
        gap: var(--gap-comp);

        .company {
          background: transparent;
          border-radius: 10px;
          padding: 10px 50px;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 60%;
            object-fit: contain;
          }
        }
      }

      .sister-companies__wrapper:last-child {
        width: 70%;
      }
    }
  }
}

.blog {
  padding-inline: 100px;

  .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    color: white;
    gap: 20px;
  }

  .blog-loop {
    align-content: center;
    position: relative;
    background-color: #0a0a0a;
    border-radius: 20px;
    padding: 50px;
    overflow: hidden;

    img {
      /* width: 100%; */
      /* height: 100%; */
      /* object-fit: cover; */
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
    }

    .blog-loop__content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 20px;

      h5 {
        font-size: var(--txt-xl);
        font-family: var(--font-sans);
        font-weight: 400;
        text-transform: uppercase;
      }

      p {
        font-size: var(--txt-lg);
        font-family: var(--font-serif);
      }
    }
  }

  .blog-loop:nth-of-type(2) {
    grid-column: 2/3;
    grid-row: 1/3;
  }

  .blog-loop:nth-of-type(3) {
    grid-column: 1/2;
    grid-row: 2/4;
  }
}

.catalogue {
  display: grid;
  place-items: center;
  padding-block: 18rem;

  .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px;
    padding-inline: 15rem;

    .catalogue-item {
      display: flex;
      gap: 20px;
      color: white;

      .catalogue-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 20px;
        text-align: justify;
      }
    }
  }
}

/******* highlight Page *****/
.highlights {
  background-color: var(--clr-white);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 150px 0px;

  .container {
    flex: 1;

    .highlights-grid {
      width: 100%;

      display: grid;
      grid-template-areas: "grid-item1 grid-item1 grid-item1 grid-item1" "grid-item2 grid-item2 grid-item3 grid-item3" "grid-item4 grid-item5 grid-item6 grid-item6";
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: auto auto;

      border: solid 1px #25252594;

      .grid-item {
        height: 500px;
        position: relative;
        background-color: #fff;
        overflow: hidden;
        box-sizing: border-box;
        border: solid 1px #25252594;
        padding: 15px;
        display: flex;
        align-items: end;

        .content-box {
          padding: 60px;
          position: relative;
          z-index: 5;

          h2 {
            color: var(--clr-white);
            font-size: 5.6rem;
            font-weight: 700;
            line-height: 5.8rem;

          }

          p {
            padding-top: 2rem;
            color: var(--clr-white);
            font-size: 2.4rem;
            font-weight: 400;
          }
        }

        img {
          padding: 15px;
          position: absolute;
          width: 100%;
          height: 100%;
          inset: 0;
          z-index: 1;

        }
      }



      .grid-item1 {
        grid-area: grid-item1;
      }

      .grid-item2 {
        grid-area: grid-item2;
      }

      .grid-item3 {
        grid-area: grid-item3;
      }

      .grid-item4 {
        grid-area: grid-item4;
      }

      .grid-item5 {
        grid-area: grid-item5;
      }

      .grid-item6 {
        grid-area: grid-item6;
      }
    }
  }

}

/******* highlight End *****/
/******* contact page  *****/
.banner-contact {

  overflow: hidden;

  .container {
    position: relative;
    display: flex;
    justify-content: start;
    align-items: center;
    min-height: 600px;

    h1 {
      color: var(--clr-white);
      font-size: 12rem;
      font-weight: 800;
      text-transform: uppercase;
      font-family: var(--font-sans);
    }

    img {
      position: absolute;
      inset: unset;
      left: 0;
      z-index: -1;
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }
}

.contact-main {
  padding: 150px 0px;

  .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    .contact-details {


      .content-box {
        h3 {
          color: var(--clr-white);
          font-size: 5rem;
          font-weight: 400;
          line-height: 6rem;
        }

        p {
          font-size: 2.4rem;
          font-weight: 400;
          color: #FFFFFFCC;
          padding: 40px 0px;
          width: 70%;
        }

        .contact-icon-box {
          padding-top: 40px;
          display: flex;
          gap: 30px;

          li {
            display: flex;
            gap: 15px;
            color: var(--clr-white);
          }
        }
      }
    }

    .contact-form-sec {
      background-color: #0f0f0f;
      border-radius: 20px;
      padding: 50px;

      h3 {
        font-size: 3rem;
        color: var(--clr-white);
        font-weight: 500;
      }

      p {
        padding-top: 24px;
        color: #FFFFFF80;
        font-size: 2rem;
      }

      .contact-form {
        padding-top: 60px;
        display: flex;
        flex-direction: column;

        gap: 30px;

        .form-group {
          display: flex;
          flex-direction: column;
          background-color: #232323;
          color: var(--clr-white);
          padding: 16px;
          border-radius: 16px;
          border: 1px solid #B5B5B526;
          gap: 5px;

          input,
          textarea {
            background-color: transparent;
            border: none;
            color: #EEEEEE4D;
          }

          textarea {
            min-height: 100px;
          }

          select {
            background-color: #232323;
            outline: none;
            border: none;
            color: #EEEEEE4D;
          }

          select option {
            background-color: #373737;
            color: #fff;
          }

          input:focus,
          textarea:focus {
            outline: none;
            box-shadow: none;
            border: none;
          }


        }

        button {
          margin-top: 40px;
          padding: 12px;
          color: var(--clr-black);
          font-size: 16PX;
          font-weight: 500;
          border-radius: 16PX;
        }
      }
    }
  }
}

/******* contact page  End *****/
/* services inner page */
.S7-inner-header {

  background-color: #0000006f;
  mix-blend-mode: normal;

  .nav {
    min-height: 90px;

    .nav__brand {
      img {
        width: 100%;
      }
    }
  }
}

.services-inner-banner {
  /* margin-top: 90px; */

  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    position: relative;

    h1 {
      color: var(--clr-white);
      font-size: 7rem;
      font-weight: 900;
      line-height: 8rem;
      font-family: var(--font-sans);
      text-align: center;
      text-transform: uppercase;
    }

    p {
      color: #EEEEEE;
      font-size: 2.4rem;
      font-weight: 600;
    }

    img {
      position: absolute;
      object-fit: cover;
      width: 100%;
      height: 100%;
      inset: 0;
      z-index: -1;
    }

    .btn-primary {
      margin-top: 40px;
      border: solid 1px #EEEEEE33;
      color: #EEEEEE;
      backdrop-filter: blur(10px);
      font-size: 20;
      font-weight: 400;
    }
  }
}

.services-vision-sec {
  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;

    h3 {
      color: #EEEEEE;
      font-weight: 500;
      font-size: 3.2rem;
      text-align: center;
    }

    p {
      color: #EEEEEE80;
      font-size: 2.4rem;
      font-weight: 400;
      text-align: center;
      width: 85%;
    }
  }
}

.services-cta {

  position: relative;
  overflow: hidden;

  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    h3 {
      text-transform: uppercase;
      color: #EEEEEE;
      font-size: 4rem;
      font-weight: 800;
      font-family: var(--font-sans);
      text-align: center;
    }

    img {
      position: absolute;
      inset: 0;
      width: 100%;
      z-index: -1;
    }

  }
}

.what-we-offer {
  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 70px;

    h3 {
      color: #EEEEEE;
      font-size: 3.2rem;
      font-weight: 500;
      text-align: center;
    }

    .inner-services {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 25px;

      .item {

        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 70px 35px;
        gap: 20px;
        position: relative;
        overflow: hidden;
        background-color: #00000053;

        h3 {
          color: #EEEEEE;
          font-size: 2.4rem;
          font-weight: 500;
        }

        p {
          font-size: 2rem;
          color: #EEEEEE80;
          font-weight: 400;
          text-align: center;
        }

        img {
          position: absolute;
          z-index: -1;
          inset: 0;
          opacity: .4;
        }
      }
    }

  }
}

.how-we-help {
  background-color: #111111;

  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;

    h3 {
      color: #EEEEEE;
      font-size: 3.2rem;
      font-weight: 500;
      text-align: center;
    }

    p {
      color: #EEEEEE80;
      font-size: 2.4rem;
      font-weight: 400;
      text-align: center;
      width: 80%;

    }
  }
}

/* services inner page End*/

/* about page */
.about-s7 {
  padding: 150px 0px;

  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 100px;
    padding: 0;

    .grid-s {
      display: grid;
      grid-template-columns: 20% auto;
      gap: 50px;
      padding-left: 6.4rem;

      .item {
        display: flex;
        flex-direction: column;
        justify-content: end;
        gap: 32px;

        .line {
          width: 70%;
          border: solid 1px var(--clr-white);
        }

        .line-mob {
          width: 100%;
          border: solid 1px var(--clr-white);
          display: none;
        }

        p {
          color: #FFFFFFCC;
          font-size: 2.2rem;
          text-align: justify;
          padding-right: 6.4rem;
        }
      }
    }

    .grid-7 {
      display: grid;
      grid-template-columns: auto 20%;
      gap: 50px;
      padding-right: 6.4rem;

      .item {
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-items: end;
        gap: 32px;

        .line {
          width: 70%;
          border: solid 1px var(--clr-white);
        }

        .line-mob {
          width: 100%;
          border: solid 1px var(--clr-white);
          display: none;
        }

        p {
          color: #FFFFFFCC;
          font-size: 2.2rem;
          text-align: justify;
          padding-left: 6.4rem;

        }
      }
    }
  }
}

.about-mission {
  padding: 150px 0px;

  .container {
    display: flex;
    justify-content: center;


    .mission-grid {
      display: grid;
      grid-template-columns: auto 40%;

      .content-box {

        display: flex;
        flex-direction: column;
        gap: 80px;

        .item {
          display: flex;
          width: 70%;
          gap: 24px;

          h4 {
            color: var(--clr-white);
            font-size: 2.4rem;
            font-weight: 400;
            font-family: var(--font-sans);
            text-transform: uppercase;
          }

          p {
            color: #FFFFFFCC;
            font-size: 2.8rem;
            font-weight: 400;
          }
        }
      }


    }
  }
}

/* about page end*/
footer {
  padding-top: 15rem;
  display: flex;
  align-items: flex-end;
  background-color: var(--clr-black);
  position: relative;
  z-index: 99999;

  .container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 100px;

    .footer__wrapper {
      display: grid;
      grid-template-columns: repeat(12, 1fr);

      .footer__about-us {
        grid-column: 1/5;
        display: flex;
        flex-direction: column;
        gap: 48px;

        img {
          width: 143px;
        }

        p {
          color: white;
          font-size: var(--txt-xl);
        }
      }

      .footer__quick-links {
        grid-column: 8/13;
        display: flex;
        justify-content: space-between;

        h6 {
          font-size: var(--txt-base);
          font-weight: 500;
          text-transform: uppercase;
          color: var(--clr-lblack);
        }

        .quick-links {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 40px;
        }

        ul {
          list-style: none;
          padding: 0;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          gap: 15px;

          a {
            text-decoration: none;
            color: white;
            font-weight: 500;
          }
        }
      }
    }

    .footer-subsec {
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding-bottom: 20px;

      .footer-scroll {
        border-top: 1px solid var(--clr-lblack);
        border-bottom: 1px solid var(--clr-lblack);
        padding-block: 10px;
        overflow: hidden;

        h4 {
          color: white;
          font-size: var(--txt-16);
          font-family: var(--font-sans);
          text-transform: uppercase;
          font-weight: 600;
          line-height: 1;
          white-space: nowrap;
          width: fit-content;
        }
      }

      .footer-copyright {
        display: flex;
        align-items: center;
        justify-content: space-between;

        small {
          font-size: 14px;
          color: var(--clr-lblack);
          font-weight: 500;
        }

        button {
          cursor: pointer !important;
          all: unset;
          color: white;
          display: flex;
          align-items: center;
          gap: 10px;
        }
      }
    }
  }
}

@media (max-width: 48em) {
  :root {
    --txt-18: 6.8rem;
    --txt-16: 5rem;
    --txt-6xl: 7.2rem;
    --txt-5xl: 6rem;
    --txt-4xl: 3.2rem;
    --txt-3xl: 2.8rem;
    --txt-2xl: 2.4rem;
    --txt-xl: 2.2rem;
    --txt-lg: 2rem;
    --txt-md: 1.8rem;
    --txt-base: 1.6rem;

    --title-spacing: 5rem;
  }

  .section-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10rem;
  }

  .container {
    padding-inline: 1rem;
  }

  .h-screen {
    min-height: 100%;
  }

  .btn-secondary {
    padding: 10px 28px;
  }

  .mobile__nav {
    transform: translateY(0) !important;
    backdrop-filter: blur(10px);
    display: block;
    top: 0% !important;
  }

  .header {
    position: fixed;
    background-color: var(--clr-black);
    mix-blend-mode: normal;

    .nav {

      .icon-close-btn,
      .nav-toggler {
        display: block;
        cursor: pointer;
      }

      .nav-toggler {
        /* display: none !important; */
        all: unset;
        color: white;
        font-size: var(--txt-3xl);
        background-color: #141414;
        border-radius: 100vh;
        line-height: 0;
        padding: 15px;
      }
    }

    .nav-dropdown {
      display: flex;
      flex-direction: column;
      position: absolute;
      gap: 30px;
      inset: 0;
      background-color: transparent;
      transform: translateY(-100%);
      will-change: transform;
      transition: 0.5s ease;
      top: -200%;

      .nav-menu__wrapper {
        flex-direction: column;
        background-color: #141414;
        text-transform: uppercase;
        font-size: var(--txt-lg);
        padding-block: 40px 50px;
        padding-inline: 20px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;


        i {
          color: white;
          font-size: var(--txt-3xl);
          align-self: flex-end;
        }

        .nav__menu {
          width: 100%;
          padding: 0;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;

          .nav__item {
            width: 100%;
            padding-block: 10px;
            border-bottom: 1px solid var(--clr-lblack);
          }
        }

        .nav__cta {
          padding-block: 10px;
        }
      }
    }
  }

  .s7-banner {
    min-height: 100vh;

    .container {
      h1 {
        font-size: 6rem;
      }
    }

    #myCanvas3D {
      width: 50vw !important;
      height: 50vh !important;
      display: block;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .videoSec {
    background-color: var(--clr-black);

    .container {
      #mainVideo {
        height: 100%;
      }

      i {
        font-size: 1.5rem;
      }
    }
  }

  .solo-title {
    h2 {
      font-size: var(--txt-4xl);
      line-height: 1;
    }
  }

  .division-s7 {
    .title {
      font-size: 1.8rem;
    }

    .division-s7__wrapper {
      gap: 2.5rem;
      grid-template-columns: repeat(2, 1fr);

      .division-first__wrapper,
      .division-second__wrapper {
        grid-column: 1/3;
        gap: 5rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;

        .item {
          width: 100%;

          img {
            opacity: 1;
          }
        }
      }

      .division-second__wrapper .item:last-child {
        margin-inline: auto;
        grid-column: 1/3;
        width: 50%;

      }

      .item {
        flex: 1;
        flex-shrink: 0;
      }
    }
  }

  .our-services {
    padding-block: 10px;

    .title {
      font-size: 1.8rem;
    }

    .our-services__wrapper {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .service-item {
      img {
        width: 100%;
        aspect-ratio: 1/.5;
        object-fit: cover;
      }

      .content {
        h3 {
          font-size: var(--txt-4xl);
        }
      }

      .icon,
      .icon-hover {
        width: 20%;
        aspect-ratio: unset;
      }
    }
  }

  .who-we-are {
    .wrapper {
      .container {
        .title {
          .title__wrapper {
            h2 {
              font-size: 20rem;
            }
          }
        }
      }
    }

    .who-we__content {
      grid-template-columns: 1fr;

      .container {
        .content {
          font-size: 2rem;
        }
      }
    }
  }

  .our-works {
    h2 {
      font-size: 5rem;
    }

    .our-works-img__wrapper {
      gap: 30px;
      padding-top: 30px;
    }
  }

  .scroller {
    .container {
      padding-inline: 10px;
    }

    h3 {
      font-size: var(--txt-md);
    }
  }

  .our-clients {
    .container {
      .title {
        font-size: 1.8rem;
        text-align: center;
      }

      .our-client__wrapper {
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        column-gap: 30px;
        row-gap: 50px;

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

          img {
            width: 80%;
          }
        }
      }
    }
  }

  .sister-companies {
    --gap-comp: 20px;
    padding-block: 10rem;

    .container {
      .title {
        font-size: 1.8rem;
      }

      .sister-companies__container {

        .sister-companies__wrapper {
          flex-direction: column;
          gap: 10px;

          .company {
            background: transparent;
            border-radius: 10px;
            padding: 10px 50px;
            display: flex;
            align-items: center;
          }
        }

        .sister-companies__wrapper:last-child {
          width: 100%;
        }
      }

    }
  }

  .blog {
    padding-inline: 10px;

    .container {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      color: white;
      gap: 20px;
    }

    .blog-loop {
      align-content: center;
      position: relative;
      background-color: #0a0a0a;
      border-radius: 20px;
      padding: 20px;
      overflow: hidden;

      img {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
      }

      .blog-loop__content {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 20px;

        h5 {
          font-size: var(--txt-lg);
          font-family: var(--font-sans);
          font-weight: 400;
          text-transform: uppercase;
        }

        p {
          font-size: var(--txt-base);
          font-family: var(--font-serif);
        }
      }
    }

    .blog-loop:nth-of-type(2) {
      grid-column: 1/2;
      grid-row: 1/2;
    }
  }

  .catalogue {
    .container {
      grid-template-columns: 1fr;
      padding-inline: 2rem;

      .catalogue-item {
        align-items: start;

        img {
          width: 35%;
          object-fit: contain;
        }

        .catalogue-content {
          width: 75%;

          img {
            width: 40%;
            object-fit: contain;

          }

        }

      }
    }
  }

  /******* highlight Page *****/
  .highlights {

    .container {
      .highlights-grid {
        grid-template-areas: "grid-item1" "grid-item2" "grid-item3" "grid-item4" "grid-item5 " "grid-item6";
        grid-template-columns: 1fr;
        grid-template-rows: auto;

        border: solid 1px #25252594;

        .grid-item {
          height: 500px;
          position: relative;
          background-color: #fff;
          overflow: hidden;
          box-sizing: border-box;
          border: solid 1px #25252594;

          .content-box {
            padding: 15px;
            position: relative;
            z-index: 5;

            h2 {
              color: var(--clr-white);
              font-size: 3.6rem;
              font-weight: 700;
              line-height: 3.8rem;

            }

            p {
              padding-top: 2rem;
              color: var(--clr-white);
              font-size: 2rem;
              font-weight: 400;
            }
          }

          img {
            padding: 15px;
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;

          }
        }


      }
    }

  }

  /******* highlight End *****/

  /******* contact page  *****/
  .banner-contact {
    .container {
      min-height: 400px;

      h1 {
        font-size: 5rem;
      }

      img {
        position: absolute;

        z-index: -1;
        object-fit: cover;
      }
    }
  }

  .contact-main {
    padding: 100px 0px;

    .container {
      display: grid;
      grid-template-columns: 1fr;

      .contact-details {


        .content-box {
          h3 {

            font-size: 3rem;
            line-height: 4rem;
          }

          p {
            font-size: 16px;
            font-weight: 400;
            color: #FFFFFFCC;
            padding: 20px 0px;
          }

          .contact-icon-box {
            padding: 20px 0px;
            display: flex;
            flex-direction: column;
            gap: 30px;

            li {
              display: flex;
              gap: 15px;
              color: var(--clr-white);
            }
          }
        }
      }

      .contact-form-sec {
        background-color: #0f0f0f;
        border-radius: 20px;
        padding: 20px;

        h3 {
          font-size: 3rem;
          color: var(--clr-white);
          font-weight: 500;
        }

        p {
          padding-top: 24px;
          color: #FFFFFF80;
          font-size: 2rem;
        }

        .contact-form {


          .form-group {

            padding: 10px;
            border-radius: 12px;


            input,
            textarea {
              background-color: transparent;
              border: none;
              color: #EEEEEE4D;
            }

            textarea {
              min-height: 100px;
            }

            input:focus,
            textarea:focus {
              outline: none;
              box-shadow: none;
              border: none;
            }


          }

          button {
            padding: 12px;
            color: var(--clr-black);
            font-size: 16PX;
            font-weight: 500;
            border-radius: 16PX;
          }
        }
      }
    }
  }

  /******* contact page  End *****/

  /* services inner page */
  .services-inner-banner {
    margin-top: 0;
    padding: 100px 0px;

    .container {
      gap: 10px;
      min-height: 50vh;

      h1 {
        font-size: 4rem;
        line-height: 5rem;
      }

      p {
        font-size: 2rem;
        text-align: center;
      }

      .btn-primary {
        margin-top: 20px;
      }
    }
  }

  .services-vision-sec {
    .container {
      gap: 20px;
      padding: 50px 0px;

      h3 {
        font-size: 3rem;
        text-align: center;
      }

      p {
        font-size: 1.8rem;
        width: 100%;
      }
    }
  }

  .services-cta {
    .container {
      min-height: 50vh;

      h3 {
        text-align: center;
      }

      img {
        position: absolute;
        inset: 0;
        width: 100%;
        object-fit: cover;
        height: 100%;
        z-index: -1;
      }

    }
  }

  .what-we-offer {
    padding: 50px 0px;

    .container {
      gap: 40px;

      h3 {
        font-size: 3rem;
      }

      .inner-services {
        grid-template-columns: 1fr;
        gap: 50px;

        .item {
          padding: 50px 35px;

        }
      }

    }
  }

  .how-we-help {
    padding: 70px 0px;

    .container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 20px;

      h3 {
        color: #EEEEEE;
        font-size: 3rem;
      }

      p {
        color: #EEEEEE80;
        font-size: 2rem;
        width: 100%;

      }
    }
  }

  /* services inner page End*/
  /* about page */
  .about-s7 {
    padding: 150px 0px;

    .container {

      .grid-s {
        grid-template-columns: 1fr;
        padding-left: 2rem;

        .item {
          display: flex;
          flex-direction: row;
          justify-content: end;
          align-items: center;
          gap: 32px;

          img {
            width: 20%;
          }

          .line {
            display: none;
          }

          .line-mob {
            display: block;
            height: 1px;
          }

          p {
            padding-right: 2rem;
          }

        }
      }

      .grid-7 {
        grid-template-columns: 1fr;
        gap: 50px;
        padding-right: 2rem;

        .item {
          display: flex;
          flex-direction: row;
          justify-content: end;
          align-items: center;
          gap: 32px;

          img {
            width: 20%;
          }

          .line {
            display: none;
          }

          .line-mob {
            display: block;
            height: 1px;
          }

          p {
            padding-left: 2rem;

          }
        }

        .item1 {
          order: 2;
        }

        .item2 {
          order: 1;
        }
      }
    }
  }

  .about-mission {
    padding: 100px 0px;

    .container {
      display: flex;
      justify-content: center;


      .mission-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 80px;


        .content-box {
          gap: 40px;
          order: 2;

          .item {
            display: flex;
            width: 100%;
            gap: 24px;

            h4 {
              font-size: 2.4rem;
            }

            p {
              font-size: 2rem;
              text-align: justify;
            }
          }
        }

        .img-box {
          order: 1;
        }


      }
    }
  }

  /* about page end*/
  footer {
    padding-top: 10rem;

    .container {
      gap: 5rem;

      .footer__wrapper {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3rem;

        .footer__about-us {
          grid-column: 1/6;
          display: flex;
          flex-direction: column;
          gap: 48px;

          p {
            font-size: var(--txt-base);
          }
        }

        .footer__quick-links {
          grid-column: 1/6;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 30px;

          h6 {
            font-size: var(--txt-sm);
          }

          .quick-links {
            align-items: flex-start;
            gap: 20px;

            ul {
              align-items: flex-start;
              font-size: var(--txt-sm);
            }
          }

          .quick-links:nth-of-type(2) {
            order: 1;
          }

          .quick-links:nth-of-type(3) {
            order: 2;
          }

          .quick-links:nth-of-type(2) {
            grid-column: 1/4;
            order: 3;
          }
        }
      }
    }
  }
}

@media (min-width: 48em) and (max-width: 76.8em) {
  :root {
    --txt-18: 6.8rem;
    --txt-16: 5rem;
    --txt-6xl: 7.2rem;
    --txt-5xl: 6rem;
    --txt-4xl: 3.2rem;
    --txt-3xl: 2.8rem;
    --txt-2xl: 2.4rem;
    --txt-xl: 2.2rem;
    --txt-lg: 2rem;
    --txt-md: 1.8rem;
    --txt-base: 1.6rem;

    --title-spacing: 5rem;
  }

  .solo-title {
    h2 {
      font-size: var(--txt-5xl);
      line-height: 1;
    }
  }

  .our-services {
    .our-services__wrapper {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .service-item {
      img {
        width: 100%;
        height: 100%;
      }

      .content {
        h3 {
          font-size: var(--txt-4xl);
        }
      }

      .icon {
        display: none;
      }
    }
  }

  .who-we-are {


    .who-we__content {
      grid-template-columns: 1fr;

      .container {
        .content {
          font-size: 2rem;
        }
      }
    }
  }

  .sister-companies {
    --gap-comp: 10px;

    .container {
      gap: 30px;

      .sister-companies__container {
        .sister-companies__wrapper {
          flex-direction: column;
          gap: 10px;

          .company {
            background: #111111;
            border-radius: 10px;
            padding: 10px 50px;
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }

  .blog {
    padding-inline: 10px;

    .container {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 1fr;
    }

    .blog-loop {
      .blog-loop:nth-of-type(2) {
        grid-column: 1/2;
        grid-row: 1/2;
      }

      .blog-loop:nth-of-type(3) {
        grid-row: 2/3;
      }
    }
  }

  /* services inner page */
  .services-inner-banner {
    .container {
      gap: 10px;
      min-height: 50vh;



      p {

        text-align: center;
      }

      .btn-primary {
        margin-top: 20px;
      }
    }
  }

  .services-vision-sec {
    .container {
      gap: 20px;
      padding: 50px 0px;

      h3 {

        text-align: center;
      }

      p {

        width: 100%;
      }
    }
  }

  .services-cta {
    .container {
      min-height: 50vh;

      h3 {
        text-align: center;
      }

      img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
      }

    }
  }

  .what-we-offer {
    padding: 50px 0px;

    .container {
      gap: 40px;



      .inner-services {
        grid-template-columns: 1fr;
        gap: 50px;

        .item {
          padding: 50px 35px;

        }
      }

    }
  }

  .how-we-help {
    padding: 70px 0px;

    .container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 20px;



      p {
        color: #EEEEEE80;

        width: 100%;

      }
    }
  }

  /* services inner page End*/

  /* about page */
  .about-s7 {
    padding: 150px 0px;

    .container {

      .grid-s {
        grid-template-columns: 1fr;
        padding-left: 2rem;

        .item {
          display: flex;
          flex-direction: row;
          justify-content: end;
          align-items: center;
          gap: 32px;

          img {
            width: 20%;
          }

          .line {
            display: none;
          }

          .line-mob {
            display: block;
            height: 1px;
          }

          p {
            padding-right: 2rem;
          }

        }
      }

      .grid-7 {
        grid-template-columns: 1fr;
        gap: 50px;
        padding-right: 2rem;

        .item {
          display: flex;
          flex-direction: row;
          justify-content: end;
          align-items: center;
          gap: 32px;

          img {
            width: 20%;
          }

          .line {
            display: none;
          }

          .line-mob {
            display: block;
            height: 1px;
          }

          p {
            padding-left: 2rem;

          }
        }

        .item1 {
          order: 2;
        }

        .item2 {
          order: 1;
        }
      }
    }
  }

  .about-mission {
    padding: 100px 0px;

    .container {
      display: flex;
      justify-content: center;


      .mission-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 80px;


        .content-box {
          gap: 40px;
          order: 2;

          .item {
            display: flex;
            width: 100%;
            gap: 24px;

            h4 {
              font-size: 2.4rem;
            }

            p {
              font-size: 2rem;
              text-align: justify;
            }
          }
        }

        .img-box {
          order: 1;
        }


      }
    }
  }

  /* about page end*/

  footer {
    padding-top: 10rem;

    .container {
      gap: 5rem;

      .footer__wrapper {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3rem;

        .footer__about-us {
          grid-column: 1/6;
          display: flex;
          flex-direction: column;
          gap: 48px;

          p {
            font-size: var(--txt-base);
          }
        }

        .footer__quick-links {
          grid-column: 1/6;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 30px;

          h6 {
            font-size: var(--txt-sm);
          }

          .quick-links {
            align-items: flex-start;
            gap: 20px;

            ul {
              align-items: flex-start;
              font-size: var(--txt-sm);
            }
          }

          .quick-links:nth-of-type(2) {
            order: 1;
          }

          .quick-links:nth-of-type(3) {
            order: 2;
          }

          .quick-links:nth-of-type(2) {
            grid-column: 1/4;
            order: 3;
          }
        }
      }
    }
  }
}

@media (min-width: 76.8em) and (max-width: 102.4em) {
  :root {
    --txt-18: 12rem;
  }
}

@media (min-width: 130em) {
  :root {
    --txt-18: 8vw;
    --txt-16: 8vw;
    --txt-6xl: 5vw;
    --txt-5xl: 3vw;
    --txt-4xl: 2.5vw;
    --txt-3xl: 2.3vw;
    --txt-2xl: 2vw;
    --txt-xl: 1.5vw;
    --txt-lg: 1.3vw;
    --txt-md: 1.2vw;
    --txt-base: 1vw;

    --title-spacing: 3vw;
  }

  /* ##### Helper Classes ##### */
  .container {
    padding-inline: 4vw;
  }

  .header {
    .nav {
      .nav__brand {
        img {
          width: 10vw;
        }
      }
    }
  }

  .s7-banner {
    /* position: sticky; */
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;

    .container {
      h1 {
        font-size: 10vw;
      }
    }

  }

  .our-services {
    .container {
      flex: 1;
    }

    .our-services__wrapper {
      width: 100%;
      padding-inline: 6%;

      .service-item {
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .content {
          img {
            width: auto;
            height: auto;
          }
        }
      }
    }
  }

  .our-works {
    .container {
      max-width: 100% !important;
      width: 100% !important;
      padding-inline: 3vw;

      .our-works__title {
        display: flex;
      }

      .our-works-img__wrapper {
        display: flex;
        padding-inline: 3vw;

        .work-img {
          img {
            width: 100%;
          }
        }
      }
    }
  }

  .who-we-are {
    .wrapper {
      .container {
        .title {
          .title__wrapper {
            h2 {
              font-size: 34vw;
            }
          }
        }
      }
    }


    .who-we__content {
      .container {
        .content {
          font-size: 1.5vw;
          line-height: 2.5vw;
        }
      }
    }
  }

  .our-clients {
    .container {
      .our-client__wrapper {
        justify-items: unset;

        li {
          img {
            width: 50%;
            margin-inline: auto;
          }
        }
      }
    }
  }

  .sister-companies {
    .container {
      .sister-companies__container {
        width: 100%;
        padding-inline: 7vw;

        .sister-companies__wrapper {
          width: 100%;

          li {
            width: 80%;

            img {
              width: 100%;
              object-fit: cover;
            }
          }
        }

        .sister-companies__wrapper:last-child {
          width: 70%;
        }
      }
    }
  }

  .catalogue {
    .container {
      padding-inline: 10vw;
      gap: 5vw;
    }
  }

  /******* highlight Page *****/
  .highlights {
    padding: 10vw 0vw;

    .container {
      flex: 1;
      padding-inline: 12%;

      .highlights-grid {
        width: 100%;

        div {
          height: 30vw;

          img {
            padding: 15px;
            position: absolute;
            width: 100%;
            height: 100%;

          }
        }

        .grid-item1 {
          grid-area: grid-item1;
        }

        .grid-item2 {
          grid-area: grid-item2;
        }

        .grid-item3 {
          grid-area: grid-item3;
        }

        .grid-item4 {
          grid-area: grid-item4;
        }

        .grid-item5 {
          grid-area: grid-item5;
        }

        .grid-item6 {
          grid-area: grid-item6;
        }
      }
    }

  }

  /******* highlight End *****/
  /******* contact page  *****/
  .banner-contact {
    .container {

      min-height: 30vw;

      h1 {

        font-size: 5vw;

      }


    }
  }

  .contact-main {
    padding: 10vw 0vw;

    .container {
      .contact-details {
        .content-box {
          h3 {
            font-size: 3vw;
            line-height: 4vw;
          }

          p {
            font-size: 1.5vw;
            font-weight: 400;
            color: #FFFFFFCC;
            padding: 40px 0px;
          }

          .contact-icon-box {


            li {
              font-size: 1.1vw;
              width: 35%;

            }
          }
        }
      }

      .contact-form-sec {
        background-color: #0f0f0f;
        border-radius: 20px;
        padding: 3vw;

        h3 {
          font-size: 2vw;
        }

        p {
          padding-top: 24px;
          color: #FFFFFF80;
          font-size: 1.2vw;
        }

        .contact-form {



          button {
            padding: 12px;
            color: var(--clr-black);
            font-size: 1.3vw;
            font-weight: 500;
            border-radius: 16PX;
          }
        }
      }
    }
  }

  /******* contact page  End *****/

  /* services inner page */
  .services-inner-banner {

    .container {

      h1 {
        font-size: 5vw;
      }

      p {
        font-size: 1.4vw;
      }

      .btn-primary {
        font-size: 1.3vw;

      }
    }
  }

  .services-vision-sec {
    .container {

      h3 {
        font-size: 4vw;
      }

      p {
        font-size: 1.4vw;
      }
    }
  }

  .services-cta {

    .container {

      h3 {
        font-size: 4vw;
      }



    }
  }

  .what-we-offer {
    .container {
      gap: 70px;

      h3 {
        font-size: 4vw;
      }

      .inner-services {
        gap: 3vw;

        .item {

          h3 {

            font-size: 2vw;

          }

          p {
            font-size: 1.3vw;
          }


        }
      }

    }
  }

  .how-we-help {

    .container {

      h3 {

        font-size: 4vw;
      }

      p {
        font-size: 1.4vw;

      }
    }
  }

  /* services inner page End*/
  /* about page */
  .about-s7 {
    padding: 15vw 0vw;

    .container {
      gap: 10vw;

      .grid-s {
        gap: 5vw;
        padding-left: 4vw;

        .item {
          gap: 3vw;


          p {
            font-size: 1.5vw;
            padding-right: 4vw;
          }
        }
      }

      .grid-7 {
        gap: 5vw;
        padding-right: 4vw;

        .item {
          gap: 3vw;

          p {
            font-size: 1.5vw;
            padding-left: 4vw;

          }
        }
      }
    }
  }

  .about-mission {
    padding: 15vw 0vw;

    .container {
      .mission-grid {
        .content-box {

          display: flex;
          flex-direction: column;
          gap: 4vw;

          .item {
            display: flex;
            width: 80%;
            gap: 2.4vw;

            h4 {
              font-size: 1.2vw;
            }

            p {
              font-size: 1.5vw;
            }
          }
        }


      }
    }
  }

  /* about page end*/
  footer {
    .container {
      .footer__wrapper {
        .footer__about-us {
          img {
            width: 10vw;
          }
        }
      }
    }
  }
}