* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
}

:root {
  /* fonts */
  --primary-font: "Nimbus-Sans-Regular";
  --primary-font-bold: "Nimbus-Sans-Bold";
  --universal-padding: 0vw 8vw;
}

@font-face {
  font-family: "Nimbus-Sans-Regular";
  src: url("/public/assets/fonts/NimbusSanL-Reg.otf");
}
@font-face {
  font-family: "Nimbus-Sans-Bold";
  src: url("/public/assets/fonts/NimbusSanL-Bol.otf");
}

.main {
  width: 100%;
  /* No Height because we dont know what will be the whole website height. */
  .home-section {
    .nav {
      padding: 6.5vh 8vw;
      height: 1px;
      font-family: var(--primary-font);
      background-color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      a {
        display: inline-block;
        text-decoration: none;
        color: black;
        font-weight: 700;
      }
      .center-logo {
        font-family: var(--primary-font-bold);
      }
      .left-links,
      .right-links {
        gap: 30px;
        display: flex;
        /* background-color: red; */
        font-size: 15px;
      }
    }
    .hero-section {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      /* background-color: red; */
      margin-top: 16vw;
      padding: var(--universal-padding);
      font-family: var(--primary-font);
      .sustain {
        width: 10vw;
        p {
          line-height: 1.3;
          font-size: 12px;
          margin: 10px 0;
          font-family: var(--primary-font);
          font-weight: 800;
          opacity: 0.5;
        }
      }
      .sustain .sustain-image-wrapper {
        width: 100%;
        height: 15vw;
        /* background-color: red; */
        position: relative;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .ephemeral {
        width: 30vw;
        min-height: 36vw;
        /* background-color: blue; */
        position: relative;
        .heading {
          position: absolute;
          top: -18%;
          left: -12%;
          h1 {
            font-size: 5.8vw;
            font-weight: 400;
            letter-spacing: -0.4vw;
            line-height: 1;
          }
        }
        img {
          width: 100%;
          object-fit: cover;
          object-position: bottom;
        }
        p {
          /* background: red; */
          width: 11vw;
          font-size: 18px;
          line-height: 1.3;
          letter-spacing: -0.6px;
          margin-top: 2vw;
        }
        /* position: absolute; */
      }
      .visit-gallery {
        width: fit-content;
        height: 2.8vw;
        /* background-color: green; */
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        font-size: 12px;
        text-transform: lowercase;
        align-items: center;
        /* justify-content: space-between; */
        h3 {
          opacity: 0.5;
        }
        .arrow-circle {
          padding: 10px 12px;
          /* background-color: red; */
          border: 2px solid black;
          border-radius: 50%;
          i {
            font-size: 1.2rem;
          }
        }
      }
    }
  }
  .motive-section {
    margin-top: 5vw;
    padding: var(--universal-padding);
    font-family: var(--primary-font);
    h1 {
      font-size: 1rem;
      opacity: 0.5;
      font-weight: 400;
    }
    .para-div {
      width: 100%;
      /* background-color: red; */
      display: flex;
      justify-content: flex-end;
      margin-top: 4vw;
      p {
        text-align: right;
        width: 70%;
        /* background-color: green; */
        font-size: 2vw;
        line-height: 1.3;
        letter-spacing: -0.15vw;
        position: relative;
        right: 0;
        span {
          display: inline-block;
          /* background-color: red; */
          border-radius: 100px;
          margin-bottom: -14px;
        }
        #onespan {
          width: 80px;
          height: 50px;
          background-image: url("/public/assets/images/bluegirl.jpg");
          background-size: cover;
          background-position: 0% 60%;
        }
        #twospan {
          width: 100px;
          height: 50px;
          background-image: url("/public/assets/images/shaljam.jpg");
          background-size: cover;
          background-position: center;
        }
        #threespan {
          width: 70px;
          height: 50px;
          background-image: url("/public/assets/images/grass.jpg");
          background-size: cover;
          background-position: center;
        }
      }
    }
  }
  .picture-section {
    font-family: var(--primary-font);
    padding: var(--universal-padding);
    margin-top: 10vw;
    .picture-container {
      width: 100%;
      /* background-color: green; */
      display: flex;
      justify-content: space-between;
      .left-pic {
        width: 16vw;
        height: 23vw;
        /* background-color: red; */
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: 12% 0%;
        }
        .name-and-desc {
          /* background-color: red; */
          margin-top: 1.2vw;
          width: 15vw;
          h1 {
            letter-spacing: -0.07vw;
          }
          p {
            line-height: 1.2;
          }
        }
      }
      .right-pic {
        width: 22vw;
        height: 35vw;
        /* background-color: rgb(0, 4, 255); */
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .name-and-desc {
          /* background-color: red; */
          margin-top: 1.2vw;
          text-align: right;
          width: 22vw;
          h1 {
            letter-spacing: -0.07vw;
          }
          p {
            line-height: 1.2;
          }
        }
      }
    }
  }
  .medix-section {
    width: 100%;
    height: fit-content;
    margin-top: 12vw;
    /* background-color: red; */
    padding: 0vw 8vw 0vw 0vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--primary-font);
    .image-container {
      width: 70vw;
      height: 40vw;
      /* background-color: green; */
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 5% 67%;
      }
    }
    .details-container {
      width: 18vw;
      height: 9vw;
      /* background-color: green; */
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      h1 {
        text-align: left;
        font-weight: 400;
        line-height: 1;
      }
      p {
        text-align: left;
        /* font-weight: 600; */
        letter-spacing: -0.04vw;
        line-height: 1.2;
      }
    }
  }
  .future-section {
    font-family: var(--primary-font);
    width: 100%;
    height: 100vh;
    padding: var(--universal-padding);
    /* background-color: green; */
    margin-top: 8vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-direction: column;
    gap: 1vw;
    video {
      opacity: 1;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(1.2);
    }
    .video-details{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        padding: 1.5vw 2.5vw;
        background-color: white;
        border-radius: .5vw;
      h1 {
        font-weight: 400;
        letter-spacing: -1.3px;
        font-size: 2vw;
      }
      button {
        padding: 1vw 1.6vw;
        font-size: 1.26vw;
        border-radius: 100px;
        border: none;
        letter-spacing: -1px;
        background-color: rgba(185, 185, 185, 0.824);
        cursor: pointer;
      }
    }
    button:hover video {
      opacity: 1;
    }
  }
}