style.scss

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}

$action_btn: #3B94EE;

$slide1_left_bg: #5C00A1;
$slide1_right_bg: #CBCACD;

$slide2_left_bg: #4A16C6;
$slide2_right_bg: #1A005D;

$slide3_left_bg: #0E0D37;
$slide3_right_bg: #141245;

$slide4_left_bg: #17253A;
$slide4_right_bg: #0D121A;

$slide5_left_bg: #164B9B;
$slide5_right_bg: #3ADBDA;

$slide6_left_bg: #04278B;
$slide6_right_bg: #D7C2B5;

$slide7_left_bg: #0A924B;
$slide7_right_bg: #0FCE69;

::-webkit-scrollbar {
  width: 0px;
}

body {
  position: relative;
}

.wrapper {
  height: 190vh;
  z-index: -1;
}

.mother-con {
  top: 0;
  left: 0;
  position: fixed;
  height: 100vh;
  width: 100vw;

  .mail-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 2%;
    right: 2%;
    background-color: #50A0D5;
    color: #fff;
    width: 60px;
    height: 60px;
    font-size: 2em;
    border-radius: 50%;
    cursor: pointer;
  }

}

.display-none {
  display: none !important;
}

.circle {
  position: fixed;
  left: 27%;
  top: 13%;
  height: 400px;
  width: 400px;
  z-index: 1;

  g {
    cursor: pointer;
  }

  .svg-bg {
    border-radius: 50%;
  }

  .svg-bg-1 {
    background-color: #0E0D37 !important;
  }

  .svg-bg-2 {
    background-color: #17253A !important;
  }

  .svg-bg-3 {
    background-color: #164B9B !important;
  }

  .svg-bg-4 {
    background-color: #04278B !important;
  }

  .svg-bg-5 {
    background-color: #0A924B !important;
  }

  .svg-bg-6 {
    background-color: #5C00A1 !important;
  }

  .svg-bg-7 {
    background-color: #4A16C6 !important;
  }

}

.container-1 {
  width: 100vw;
  height: 100vh;
  display: grid;
  position: relative;
  grid-template-columns: 35% 65%;
  overflow: hidden;

  .left1 {
    // width: 40%;
    height: 100%;
    background-color: #0E0D37;
    position: relative;

    .heading {
      position: absolute;
      top: 30%;
      right: -5%;
      z-index: 2;

      .heading-c2 {
        position: relative;

        #cwr-p1 {
          position: absolute;
          top: -40%;
          left: -20%;
          color: white;
          font-size: 1.3em;
        }

        #cwr-p2 {
          position: absolute;
          bottom: -35%;
          right: 4%;
          color: white;
          font-size: 1.3em;
        }

      }
    }

    .left1-bp {
      margin-left: 40px;

      .left1-bottom-text {
        position: absolute;
        bottom: 20%;

        #bt-h1 {
          color: white;
          font-size: 2.5em;
          margin-bottom: 30px;
        }

        #bt-p {
          color: white;
          font-size: 1.3em;
        }
      }

      .left1-footer {
        position: absolute;
        bottom: 5%;
        width: 90%;
        display: flex;
        justify-content: space-between;
        color: white;
        font-size: 1.3em;

        p {
          cursor: pointer;
        }
      }
    }
  }

  .c1-rp {
    // width: 60%;
    height: 100%;
    display: grid;
    grid-template-columns: 50% 50%;
    background-color: #141245;
    // position: relative;

    .nasa-fitness-app-img1 {
      // position: absolute;
      // bottom: 0%;
      // left: 10%;
      height: 60%;
      position: relative;
      margin-top: 70%;
      margin-left: 40%;
      height: 550px;
      width: 320px;

      img {
        position: absolute;
        top: 0;
        height: 550px;
        width: 320px;
      }
    }

    .nasa-fitness-app-img2 {
      // position: absolute;
      // right: 10%;
      height: 60%;
      position: relative;
      margin-top: -40%;
      margin-left: 20%;
      height: 550px;
      width: 270px;

      img {
        position: absolute;
        top: 0;
        height: 550px;
        width: 270px;
      }
    }
  }
}

// CONTAINER-2

.container-2 {
  width: 100vw;
  height: 100vh;
  display: grid;
  position: relative;
  grid-template-columns: 35% 65%;
  overflow: hidden;

  .left2 {
    // width: 40%;
    height: 100%;
    background-color: #17253A;
    position: relative;

    .heading {
      position: absolute;
      top: 33%;
      right: -5%;
      z-index: 2;

      .heading-c2 {
        position: relative;

        #cwr-p1 {
          position: absolute;
          top: -75%;
          left: -20%;
          color: white;
          font-size: 1.3em;
        }

        h1 {
          font-size: 2.2em;
          color: white;
        }

        #cwr-p2 {
          position: absolute;
          bottom: -75%;
          right: -15%;
          color: white;
          font-size: 1.3em;
        }

      }
    }

    .left1-bp {
      margin-left: 40px;

      .left1-bottom-text {
        position: absolute;
        bottom: 20%;

        #bt-h1 {
          color: white;
          font-size: 2.5em;
          margin-bottom: 30px;
        }

        #bt-p {
          color: white;
          font-size: 1.3em;
        }
      }

      .left1-footer {
        position: absolute;
        bottom: 5%;
        width: 90%;
        display: flex;
        justify-content: space-between;
        color: white;
        font-size: 1.3em;

        p {
          cursor: pointer;
        }
      }
    }
  }

  .c2-rp {
    // width: 60%;
    height: 100%;
    position: relative;
    // display: grid;
    // grid-template-columns: 50% 50%;
    background-color: #0D121A;
    // position: relative;

    .img-1 {
      position: absolute;
      bottom: 0;
      left: 20%;
      height: 430px;
      width: 285px;
    }

    .img-2 {
      position: absolute;
      top: 15%;
      right: 10%;
      height: 550px;
      width: 270px;
    }

    .img-3 {
      position: absolute;
      top: -17%;
      right: 0;
      height: 200px;
      width: 280px;
    }

    .img-4 {
      position: absolute;
      bottom: -10%;
      right: 0;
      height: 200px;
      width: 280px;
    }

    .img-5 {
      position: absolute;
      top: -10%;
      left: 0;
      height: 200px;
      width: 350px;
    }
  }


}

// CONTAINER-3

.container-3 {
  width: 100vw;
  height: 100vh;
  display: grid;
  position: relative;
  grid-template-columns: 35% 65%;
  overflow: hidden;

  .left3 {
    // width: 40%;
    height: 100%;
    background-color: #164B9B;
    position: relative;

    .heading {
      position: absolute;
      top: 33%;
      right: -5%;
      z-index: 2;

      .heading-c2 {
        position: relative;

        #cwr-p1 {
          position: absolute;
          top: -60%;
          left: 20%;
          color: white;
          font-size: 1.3em;
        }

        h1 {
          font-size: 3em;
          color: white;
        }

        #cwr-p2 {
          position: absolute;
          bottom: -60%;
          right: -15%;
          color: white;
          font-size: 1.3em;
        }

      }
    }

    .left1-bp {
      margin-left: 40px;

      .left1-bottom-text {
        position: absolute;
        bottom: 20%;

        #bt-h1 {
          color: white;
          font-size: 2.5em;
          margin-bottom: 30px;
        }

        #bt-p {
          color: white;
          font-size: 1.3em;
        }
      }

      .left1-footer {
        position: absolute;
        bottom: 5%;
        width: 90%;
        display: flex;
        justify-content: space-between;
        color: white;
        font-size: 1.3em;

        p {
          cursor: pointer;
        }
      }
    }
  }

  .c3-rp {
    // width: 60%;
    height: 100%;
    max-width: 100%;
    position: relative;
    // display: grid;
    // grid-template-columns: 50% 50%;
    background-color: #3ADBDA;
    // position: relative;

    .c3-rp-img-1 {
      position: absolute;
      bottom: 25%;
      right: 0%;
      height: 430px;
      width: 245px;
    }

    .c3-rp-img-2 {
      position: absolute;
      bottom: -45%;
      right: 30%;
      height: 550px;
      width: 270px;
    }

    .c3-rp-img-3 {
      position: absolute;
      top: -20%;
      left: 20%;
      height: 500px;
      width: 280px;
    }

    .c3-rp-img-4 {
      position: absolute;
      bottom: -20%;
      left: 20%;
      height: 500px;
      width: 280px;
    }

    .c3-rp-img-5 {
      position: absolute;
      top: -5%;
      left: 50%;
      height: 500px;
      width: 280px;
    }
  }

}

// CONTAINER-4

.container-4 {
  width: 100vw;
  height: 100vh;
  display: grid;
  position: relative;
  grid-template-columns: 35% 65%;
  overflow: hidden;

  .left4 {
    // width: 40%;
    height: 100%;
    background-color: #04278B;
    position: relative;

    .heading {
      position: absolute;
      top: 30%;
      right: -5%;
      z-index: 2;

      .heading-c2 {
        position: relative;

        #cwr-p1 {
          position: absolute;
          top: -60%;
          left: -20%;
          color: white;
          font-size: 1.3em;
        }

        h1 {
          font-size: 3em;
          color: white;
        }

        #cwr-p2 {
          position: absolute;
          bottom: -60%;
          right: -15%;
          color: white;
          font-size: 1.3em;
        }

      }
    }

    .left1-bp {
      margin-left: 40px;

      .left1-bottom-text {
        position: absolute;
        bottom: 25%;

        #bt-h1 {
          color: white;
          font-size: 2.5em;
          margin-bottom: 30px;
        }

        #bt-p {
          color: white;
          font-size: 1.3em;
        }
      }

      .left1-footer {
        position: absolute;
        bottom: 10%;
        width: 90%;
        display: flex;
        justify-content: space-between;
        color: white;
        font-size: 1.3em;

        p {
          cursor: pointer;
        }
      }
    }
  }

  .c4-rp {
    // width: 60%;
    height: 100%;
    // display: grid;
    // grid-template-columns: 50% 50%;
    background-color: rgb(230, 227, 217);
    // position: relative;

    .c4-rp-img {
      height: 100%;
      width: 100%;
    }
  }

}

// CONTAINER-5

.container-5 {
  width: 100vw;
  height: 100vh;
  display: grid;
  position: relative;
  grid-template-columns: 35% 65%;
  overflow: hidden;

  .left5 {
    // width: 40%;
    height: 100%;
    background-color: #0A924B;
    position: relative;

    .heading {
      position: absolute;
      top: 33%;
      right: 2%;
      z-index: 2;

      .heading-c2 {
        position: relative;

        #cwr-p1 {
          position: absolute;
          top: -60%;
          left: -20%;
          color: white;
          font-size: 1.3em;
        }

        h1 {
          font-size: 3em;
          color: white;
        }

        #cwr-p2 {
          position: absolute;
          bottom: -60%;
          right: -15%;
          color: white;
          font-size: 1.3em;
        }

      }
    }

    .left1-bp {
      margin-left: 40px;

      .bottom-img {
        position: absolute;
        bottom: 40%;
      }

      .left1-bottom-text {
        position: absolute;
        bottom: 20%;

        #bt-h1 {
          color: white;
          font-size: 2.5em;
          margin-bottom: 30px;
        }

        #bt-p {
          color: white;
          font-size: 1.3em;
        }
      }

      .left1-footer {
        position: absolute;
        bottom: 5%;
        width: 90%;
        display: flex;
        justify-content: space-between;
        color: white;
        font-size: 1.3em;

        p {
          cursor: pointer;
        }
      }
    }
  }

  .c5-rp {
    // width: 60%;
    height: 100%;
    position: relative;
    // display: grid;
    // grid-template-columns: 50% 50%;
    background-color: #0FCE69;
    // position: relative;

    .c5-rp-img1 {
      position: absolute;
      bottom: -10%;
      right: 20%;
      height: 600px;
      width: 300px;
    }

    .c5-rp-img2 {
      position: absolute;
      bottom: -15%;
      right: 37%;
      height: 600px;
      width: 350px;
    }

  }

}

// CONTAINER-6

.container-6 {
  width: 100vw;
  height: 100vh;
  display: grid;
  position: relative;
  grid-template-columns: 35% 65%;
  overflow: hidden;

  .left6 {
    // width: 40%;
    height: 100%;
    background-color: #5C00A1;
    position: relative;

    .heading {
      position: absolute;
      top: 30%;
      right: -5%;
      z-index: 2;

      .heading-c2 {
        position: relative;

        h1 {
          font-size: 3em;
          color: white;
        }

        #cwr-p2 {
          position: absolute;
          bottom: -60%;
          right: -5%;
          color: white;
          font-size: 1.3em;
        }

      }
    }

    .left1-bp {
      margin-left: 40px;

      .bottom-img {
        position: absolute;
        bottom: 40%;
      }

      .left1-bottom-text {
        position: absolute;
        bottom: 20%;

        #bt-h1 {
          color: white;
          font-size: 2.5em;
          margin-bottom: 30px;
        }

        #bt-p {
          color: white;
          font-size: 1.3em;
        }
      }

      .left1-footer {
        position: absolute;
        bottom: 5%;
        width: 90%;
        display: flex;
        justify-content: space-between;
        color: white;
        font-size: 1.3em;

        p {
          cursor: pointer;
        }
      }
    }
  }

  .c6-rp {
    // width: 60%;
    height: 100%;
    position: relative;
    // display: grid;
    // grid-template-columns: 50% 50%;
    background-color: #CBCACD;
    // position: relative;

    .c6-rp-img1 {
      position: absolute;
      bottom: 10%;
      left: 10%;
      height: 650px;
      width: 400px;
    }

    .c6-rp-img2 {
      position: absolute;
      bottom: 10%;
      right: 20%;
      height: 650px;
      width: 400px;
    }

  }

}

// CONTAINER-7

.container-7 {
  width: 100vw;
  height: 100vh;
  display: grid;
  position: relative;
  grid-template-columns: 35% 65%;
  overflow: hidden;

  .left7 {
    // width: 40%;
    height: 100%;
    background-color: #4A16C6;
    position: relative;

    .heading {
      position: absolute;
      top: 33%;
      right: -5%;
      z-index: 2;

      .heading-c2 {
        position: relative;

        #cwr-p1 {
          position: absolute;
          top: -60%;
          left: 0%;
          color: white;
          font-size: 1.3em;
        }

        h1 {
          font-size: 3em;
          color: white;
        }

        #cwr-p2 {
          position: absolute;
          bottom: -60%;
          right: 0%;
          color: white;
          font-size: 1.3em;
        }

      }
    }

    .left1-bp {
      margin-left: 40px;

      .left1-bottom-text {
        position: absolute;
        bottom: 20%;

        #bt-h1 {
          color: white;
          font-size: 2.5em;
          margin-bottom: 30px;
        }

        #bt-p {
          color: white;
          font-size: 1.3em;
        }
      }

      .left1-footer {
        position: absolute;
        bottom: 5%;
        width: 90%;
        display: flex;
        justify-content: space-between;
        color: white;
        font-size: 1.3em;

        p {
          cursor: pointer;
        }
      }
    }
  }

  .c7-rp {
    // width: 60%;
    height: 100%;
    position: relative;
    // display: grid;
    // grid-template-columns: 50% 50%;
    background-color: #1A005D;
    // position: relative;

    .c7-rp-img1 {
      position: absolute;
      top: 0%;
      right: 10%;
      height: 550px;
      width: 350px;
    }

    .c7-rp-img2 {
      position: absolute;
      bottom: 0%;
      left: 20%;
      height: 550px;
      width: 350px;
    }

  }
}

// MOBILE

.mother-container-mob {
  display: none;
  height: 100vh;
  width: 100vw;
  overflow-y: hidden;

  .owl-carousel {
    .owl-item {
      display: grid;
      // grid-template-rows: 1fr 1fr;

      .top-panel-cnt {
        display: grid;
        width: 100%;
        height: 100%;
        grid-template-columns: 1fr 1fr;
        background-color: yellowgreen;
        height: 40vh;
        padding: 0 20px;
        align-items: center;
        overflow: hidden;

        @media screen and (min-width: 500px) {
          height: 60vh;
        }

        img {
          margin-right: 20%;
          justify-self: center;
          width: 130%;
        }

        .img1 {
          width: 110%;
          margin: auto 10% -25% 0;
        }

        .img2 {
          width: 110%;
          margin: -25% 0 auto 15%;
        }
      }

      .top-panel-1 {
        background-color: $slide1_right_bg;
      }

      .top-panel-2 {
        background-color: $slide2_right_bg;
      }

      .top-panel-3 {
        background-color: $slide3_right_bg;

        .img1 {
          width: 110%;
          margin: auto 10% -25% 0;
        }

        .img2 {
          width: 100%;
          margin: -40% 0 auto 15%;
        }
      }

      .top-panel-3 {
        background-color: $slide3_right_bg;
      }

      .top-panel-4 {
        background-color: $slide4_right_bg;

        .img1 {
          position: absolute;
          width: 20%;
          top: -3%;
          left: 0%;
          z-index: 0;
        }

        .img2 {
          width: 90%;
          margin: auto -5% -10% -5%;
        }

        .img3 {
          width: 90%;
          margin: -10% 0 auto -5%;
        }

        .img4 {
          position: absolute;
          width: 30%;
          right: -20%;
          top: 30%;
        }
      }

      .top-panel-5 {
        background-color: $slide5_right_bg;

        .img1 {
          position: absolute;
          width: 25%;
          top: -10%;
          left: 3%;
          z-index: 0;
        }

        .img2 {
          position: absolute;
          top: -5%;
          width: 30%;
          margin: auto -5% -20% -5%;
        }

        .img3 {
          width: 65%;
          margin: auto 0 -50% -30%;
        }

        .img4 {
          position: absolute;
          width: 35%;
          right: -20%;
          top: 10%;
        }
      }

      .top-panel-6 {
        background-color: $slide6_right_bg;
      }

      .top-panel-7 {
        background-color: $slide7_right_bg;
      }

      .bottom-panel-cnt {
        // background-color: lightseagreen;
        height: 60vh;
        width: 100%;
        padding: 20px 20px 50px 20px;
        z-index: 10;

        h1 {
          position: absolute;
          top: 55%;
        }

        p {
          position: absolute;
          top: 70%;
        }

        img {
          position: absolute;
          bottom: 45%;
          width: 70%;
          margin: auto;
        }

        @media screen and (min-width: 500px) {
          height: 40vh;

          h1 {
            top: 73%;
          }

          p {
            top: 85%;
          }

          img {
            bottom: 30%;
            width: 40%;
            margin-left: 20%;
          }
        }
      }

      .bottom-panel-1 {
        background-color: $slide1_left_bg;
        color: #fff;
      }

      .bottom-panel-2 {
        background-color: $slide2_left_bg;
        color: #fff;
      }

      .bottom-panel-3 {
        background-color: $slide3_left_bg;
        color: #fff;
      }

      .bottom-panel-4 {
        background-color: $slide4_left_bg;
        color: #fff;
      }

      .bottom-panel-5 {
        background-color: $slide5_left_bg;
        color: #fff;
      }

      .bottom-panel-6 {
        background-color: $slide6_left_bg;
        color: #fff;
      }

      .bottom-panel-7 {
        background-color: $slide7_left_bg;
        color: #fff;
      }
    }

    .bottom-footer {

      color: #fff;
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 20px;
      z-index: 50;
      display: flex;
      justify-content: space-between;
    }
  }
}



@media screen and (max-width: 900px) {
  .wrapper {
    display: none !important;
  }

  .mother-con {
    display: none !important;
  }

  .mother-container-mob {
    display: block !important;
  }
}