* {
  padding: 0;
  margin: 0;
}

.Page1 {
  width: 100%;
  float: left;
  /* background-size: 100% 100%; */
  background-size: cover;
  background-image: url(../tp-images/img1.jpg);
  /* height: 646px; */
  padding-bottom: 270px;
}

.bg {
  width: 100%;
  float: left;
  background-size: 100% 100%;
  background-image: url(../tp-images/img3.png);
  height: 78px;
}
.navbar-expand-lg {
  margin-top: 10px;
}
.navbar-expand-lg .navbar-collapse {
  font-size: 14px;
}

.Stores {
  color: white;
  font-size: 24px;
  font-weight: bold;
  /* margin-left: 10px; */
}
.collapse ul li a {
  color: white !important;
}

/* .Home li a {
  text-decoration-line: underline !important;
  text-decoration-color: white !important;
  text-decoration-thickness: 5px !important;
  color: white !important;
} */
.nav-item a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #fff;
  transition: color 0.3s;
}

.nav-item a::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #fff;
  bottom: -5px;
  left: 0;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}

.nav-item a:hover::after {
  transform: scaleX(1);
  color: #fff !important;
  transform-origin: bottom left;
}
a:hover{
  color: #fff !important;
}

.welcome {
  /* left: 150px; */
  margin-top: 150px;
  font-size: 36px;
  line-height: 1.5;
  color: white;
}

.but button {
  margin-top: 30px;
  padding: 15px;
  width: 20%;
  background-color: white;
  border: 2px solid white;
  font-size: large;
  color: black;
  border-radius: 40px;
}

.but button:hover {
  background-color: transparent;
  border: 2px solid white;
  color: white;
}


.Selfie{
    width: 100%;
    float: left;
    margin-top: 80px;
}
.Selfie1{
    width: 16%;
    float: left;
    text-align: center;
    background-image: url(../tp-images/img4.png);
    background-size: 100% 100%;
    height: 250px;
    margin: 22px;
    /* margin-left: 60px; */
}
.Selfie2{
    width: 16%;
    float: left;
    text-align: center;
    background-image: url(../tp-images/img5.png);
    background-size: 100% 100%;
    height: 250px;
    margin: 22px;
}
.Selfie3{
    width: 16%;
    float: left;
    text-align: center;
    background-image: url(../tp-images/img6.png);
    background-size: 100% 100%;
    height: 250px;
    margin: 22px;
}
.Selfie4{
    width: 16%;
    float: left;
    text-align: center;
    background-image: url(../tp-images/img7.png);
    background-size: 100% 100%;
    height: 250px;
    margin: 22px;
}
.Selfie5{
    width: 16%;
    float: left;
    text-align: center;
    background-image: url(../tp-images/img8.png);
    background-size: 100% 100%;
    height: 250px;
    margin: 22px;
}
.img-fluid{
  width: 100%;
  height: auto;
}

.butt{
    text-align: center;
    margin-bottom: 50px;
}
.butt button{
    margin-top: 30px;
    padding: 15px;
    width: 16%;
    background-color: #407BFF;
    border: 2px solid white;
    font-size: large;
    color: white;
    border-radius: 20px;
    text-align: center;
}

.Page2{
    width: 100%;
    float: left;
    background-size: 100% 100%;
    background-color: #060042;
    height: 500px;
    position: relative;
}
.Image{
    width: 100%;
    float: left;
    background-size: 100% 100%;
    background-image: url(../tp-images/img9.png);
    height: 440px;
    margin-top: 30px;
    position: relative;
}



.Border {
    position: absolute;
    width: 80%;
    height: 1000px; 
    bottom: -920px; 
    left: 125px;
    background-color: white; 
    border: 10px solid white; 
    z-index: 1; 
    box-sizing: border-box;
    border-radius: 20px;
    text-align: center;
    padding-top: 20px; 
}

.text {
    font-size: 36px;
    color: black;
    position: relative;
}

.text::after {
    content: '';
    display: block;
    width: 8%; 
    height: 4px; 
    background-color: #407BFF; 
    margin: 10px auto 0; 
    margin-top: 20px;
}


.text1 {
    /* display: flex; */
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin-top: 40px; 
    margin-left: 30px;
}

.text1 ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.text1 img {
    /* width: 30%;
    max-width: 20px; 
    margin-left: 400px; */
    max-width: 100%;
    height: auto;
}

.text1 li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
    color: black;
}
.text1 li::after {
    content: '';
    display: block;
    width: 100%; 
    height: 2px; 
    background-color: #C8D3DE; 
    position: absolute;
    bottom: -30px; 
    left: 0;
    margin-top: 10px;
}
.text1 li.line::after {
    display: none;
}
.text1 li {
    margin-bottom: 50px; 
}


.Page3{
    width: 100%;
    float: left;
    background-size: 100% 100%;
    background-color: white;
    height: 1120px;
}

.Page4{
    width: 100%;
    float: left;
    background-size: 100% 100%;
    background-image: url(../tp-images/img12.jpg);
    height: 400px;
}
.IMAGE{
    width: 100%;
    float: left;
    background-size: 100% 100%;
    background-image: url(../tp-images/img13.png);
    height: 400px;
}

.Page5{
    width: 100%;
    float: left;
    background-size: 100% 100%;
    background-color: white;
    height: 1200px;
    /* padding-left: 180px; */
    /* padding-right: 180px; */
}

.help {
    display: flex;
    align-items: center;
    margin-top: 30px;
}

.help img {
    margin-right: 20px; 
}

.help h4 {
    margin: 0; 
    color: black;
}

.small{
    margin-top: 30px;
}

.part{
    width: 100%;
    float: left;
    margin-top: 50px;
}
.part1{
    width: 40%;
    float: left;
}
.part1 h4{
    color: black;
}
.part2{
    width: 60%;
    float: left;
}

.part2 img{
    width: 90%;
    float: right;
    margin-top: 30px;
}

.arrow {
    display: flex;
    align-items: center;
    margin-top: 30px;
}
.arrow h5{
  font-weight: normal;
}

.arrow img {
    margin-right: 20px; 
}

.arrow h4 {
    margin: 0; 
    color: black;
}

.newpart{
    width: 100%;
    float: left;
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
}
.newpart1{
    width: 60%;
    float: left;
}
.newpart2{
    width: 40%;
    float: left;
    padding-left: 20px;
    padding-top: 50px;
}
.newpart2 h4{
    color: black;
}

.newpart1 img{
    width: 90%;
    float: left;
    margin-top: 30px;
}

.Page6 {
    width: 100%;
    float: left;
    background-size: 100% 100%;
    background-color:#2073c2;
    height: 150px;
    clear: both; 
    position: relative; 
}

.lines{
   /* border: none;  */
    height: 100px; 
    background-color: white; 
    /*margin: 20px 0;   */
    /* margin-left: 100px; */
    width: 100%; 
    border-top: 3px solid white;
    margin-top: 80px;
}
.Inc{
    /* margin-left: 130px; */
    color: white;
}
.arrow h5{
  font-weight: normal;
}
@media (max-width: 1024px){
  .Selfie1, .Selfie2, .Selfie3, .Selfie4, .Selfie5{
    width: 20%;
  }
  .bg{
    height: 100px;
  }

}
@media (max-width: 1440px){
  .Page5{
    height: 1300px;
  }
  
}
/* Media Queries for max-width: 768px */
@media (max-width: 768px) {
  .bg {
    height: auto;
  }

  .navbar-brand {
    padding-left: 20px;
    padding-top: 10px;
    font-size: 1rem;
  }

  .navbar-brand img {
    width: 150px;
  }

  .navbar-expand-lg {
    margin-top: 5px;
  }

  .Stores {
    font-size: 18px;
    text-align: center;
  }

  .welcome {
    margin-top: 100px;
    font-size: 24px;
    /* margin-left: 80px; */
  }

  .but {
    margin-bottom: 30px;
  }

  .but button {
    margin-top: 30px;
    padding: 10px;
    width: 30%;
    font-size: medium;
    /* margin-left: 80px; */
  }

  .Page1 {
    /* height: auto; */
    background-size: cover;
    /* padding-bottom: initial; */
  }

  .Selfie1, .Selfie2, .Selfie3, .Selfie4, .Selfie5 {
    width: 40%;
    margin-left: 25px;
    margin-right: 0;
  }

  .butt button {
    width: 130px;
  }

  .Page2 {
    height: 400px;
  }

  .Image {
    height: 350px;
    width: 100%;
  }

  .Border {
    width: 90%;
    left: 5%;
    bottom: -1170px;
    height: auto;
  }

  .text {
    font-size: 28px;
  }

  .text::after {
    width: 10%;
  }

  .text1 {
    padding: 10px;
    margin-left: 0;
    margin-top: 20px;
  }

  .text1 li {
    align-items: flex-start;
    display: flex;
    text-align: left;
    color: black;
  }

  .text1 img {
    margin-top: 10px;
  }

  .Page3 {
    height: 1200px;
  }

  .Page4 {
    height: 400px;
    background-size: cover;
  }

  .IMAGE {
    height: 400px;
    background-size: cover;
    background-position: bottom;
  }

  /* .Page5 {
    padding-left: 20px;
    padding-right: 20px;
  } */

  .help {
    display: flex;
    align-items: flex-start;
    margin-top: 20px;
  }

  .help h4 {
    margin-top: 10px;
  }

  .help img {
    margin-right: 20px;
    margin-bottom: 10px;
  }

  .small {
    margin-top: 20px;
  }

  .part {
    flex-direction: column;
    margin-top: 20px;
  }

  .part1, .part2 {
    width: 100%;
    float: none;
  }

  .part2 img {
    width: 100%;
    margin-top: 20px;
    float: none;
  }

  .arrow {
    margin-top: 20px;
  }

  .newpart {
    margin-top: 20px;
    flex-direction: column;
  }

  .newpart1 {
    order: 2;
    width: 100%;
    float: none;
    padding-left: 0;
    padding-top: 20px;
  }
  .newpart2 {
    order: 1;
    width: 100%;
    float: none;
    padding-left: 0;
    padding-top: 20px;
  }

  .newpart1 img {
    width: 100%;
    margin-top: 20px;
  }

  .lines {
    /* margin-left: 5%; */
    width: 100%;
    margin-top: 20px;
  }

  .Inc {
    /* margin-left: 5%; */
    font-size: medium;
    text-align: left;
  }

  .Page6 {
    height: auto;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .Page5 {
    height: 1840px;
  }
}

/* Media Queries for max-width: 320px */

@media (max-width: 425px){
  .bg {
    height: auto;
  }

  .navbar-brand {
    padding-left: 20px;
    padding-top: 10px;
    font-size: 1rem;
  }

  .navbar-brand img {
    width: 150px;
  }

  .navbar-expand-lg {
    margin-top: 5px;
  }

  .Stores {
    font-size: 18px;
    text-align: center;
  }
  .welcome {
          
    margin-top: 100px;
    font-size: 24px;
    
    /* margin-left: 80px; */
  }
  .but{
    margin-bottom: 30px;
  }

  .but button {
    margin-top: 30px;
    padding: 10px;
    width: 50%;
    font-size: medium;
    /* margin-left: 80px; */
  }
  .Page1{
    /* height: auto; */
    background-size: cover;
    padding-bottom: initial;
  }
}


    /* @media (min-width: 0px) and (max-width: 768px)  */
    /* @media (min-width: 0px) and (max-width: 768px) */
    @media (max-width: 425px){
        .Selfie1, .Selfie2, .Selfie3, .Selfie4, .Selfie5 {
          width: 60%;
          margin-left: 75px;
          margin-right: 0;
        }
      
        .butt button {
          width: 42%;
        }
      }
      
      
       /* @media (min-width: 0px) and (max-width: 768px), (min-width: 0px) and (max-width: 828px) { */
       /* @media (min-width: 0px) and (max-width: 768px) */
       @media (max-width: 425px){
        .Page2{
            height: 300px;
        }
        .Image {
            height: 245px;
            width: 100%;
            background-size: cover;
        }
      
        .Border {
          width: 90%;
          left: 5%;
          bottom: -1440px;
          height: auto;
        }
      
        .text {
          font-size: 28px;
        }
      
        .text::after {
          width: 10%;
        }
      
        .text1 {
          padding: 10px;
          margin-left: 0;
          margin-top: 20px;
        }
      
        .text1 li {
          /* flex-direction: column; */
          align-items: flex-start;
          display: flex;
          text-align: left;
          color: black;
        }
      
        .text1 img {
          margin-top: 10px;
        }
        .Page3{
            height: 1500px;
        }
      }
      

      /* @media (min-width: 0px) and (max-width: 768px), (min-width: 0px) and (max-width: 828px) { */
      /* @media (min-width: 0px) and (max-width: 768px) */
      @media (max-width: 425px){
        .Page4 {
          height: 300px;
          background-size: cover;
        }
      
        .IMAGE {
          height: 300px;
          background-size: cover;
          background-position: bottom;
        }
      
        /* .Page5 {
          padding-left: 20px;
          padding-right: 20px;
        } */
      
        .help {
          /* flex-direction: column; */
          display: flex;
          align-items: flex-start;
          margin-top: 20px;
        }
        .help h4{
            margin-top: 10px;
        }
      
        .help img {
          margin-right: 20px;
          margin-bottom: 10px;
        }
      
        .small {
          margin-top: 20px;
        }
      
        .part {
          flex-direction: column;
          margin-top: 20px;
        }
      
        .part1, .part2 {
          width: 100%;
          float: none;
        }
      
        .part2 img {
          width: 100%;
          margin-top: 20px;
          float: none;
        }
      
        .arrow {
          margin-top: 20px;
        }
      
        .newpart {
          margin-top: 20px;
          flex-direction: column;
        }
      
        .newpart1 {
          order: 2;
          width: 100%;
          float: none;
          padding-left: 0;
          padding-top: 20px;
        }
        .newpart2 {
          order: 1;
          width: 100%;
          float: none;
          padding-left: 0;
          padding-top: 20px;
        }
      
        .newpart1 img {
          width: 100%;
          margin-top: 20px;
        }
        .lines {
            /* margin-left: 5%; */
            width: 100%; 
            margin-top: 20px; 
        }
    
        .Inc {
            /* margin-left: 5%; */
            font-size: medium; 
            text-align: left; 
        }
    
        .Page6 {
            height: auto; 
            padding-top: 20px; 
            padding-bottom: 20px; 
        }
        .Page5{
            height: 1800px;
        }
      }
      @media (max-width: 375px){
        .Page5{
          height: 1900px;
        }
      }
      @media (max-width: 375px){
        .Selfie1, .Selfie2, .Selfie3, .Selfie4, .Selfie5 {
          width: 66%;
          margin-left: 55px;
          margin-right: 0;
        }
      
        .butt button {
          width: 42%;
        }
        .Border{
          bottom: -1495px;
        }
      }
      @media (max-width: 320px) {
        .bg {
          height: auto;
        }
      
        .navbar-brand {
          padding-left: 20px;
          padding-top: 10px;
          font-size: 1rem;
        }
      
        .navbar-brand img {
          width: 150px;
        }
      
        .navbar-expand-lg {
          margin-top: 5px;
        }
      
        .Stores {
          font-size: 18px;
          text-align: center;
        }
      
        .welcome {
          margin-top: 100px;
          font-size: 24px;
          /* margin-left: 80px; */
        }
      
        .but {
          margin-bottom: 30px;
        }
      
        .but button {
          margin-top: 30px;
          padding: 10px;
          width: 50%;
          font-size: medium;
          /* margin-left: 80px; */
        }
      
        .Page1 {
          /* height: auto; */
          background-size: cover;
          padding-bottom: initial;
        }
      
        .Selfie1, .Selfie2, .Selfie3, .Selfie4, .Selfie5 {
          width: 75%;
          margin-left: 38px;
          margin-right: 0;
        }
      
        .butt button {
          width: 50%;
        }
      
        .Page2 {
          /* height: 400px; */
          height: 200px;
        }
      
        .Image {
          /* height: 350px; */
          height: 140px;
          width: 100%;
        }
      
        .Border {
          width: 80%;
          left: 10%;
          bottom: -1820px;
          height: auto;
        }
      
        .text {
          font-size: 28px;
        }
      
        .text::after {
          width: 10%;
        }
      
        .text1 {
          padding: 10px;
          margin-left: 0;
          margin-top: 20px;
        }
      
        .text1 li {
          align-items: flex-start;
          display: flex;
          text-align: left;
          color: black;
        }
      
        .text1 img {
          margin-top: 10px;
        }
      
        .Page3 {
          height: 1850px;
        }
      
        .Page4 {
          height: 200px;
          background-size: cover;
        }
      
        .IMAGE {
          height: 200px;
          background-size: cover;
          background-position: bottom;
        }
      
        /* .Page5 {
          padding-left: 20px;
          padding-right: 20px;
        } */
      
        .help {
          display: flex;
          align-items: flex-start;
          margin-top: 20px;
        }
      
        .help h4 {
          margin-top: 10px;
        }
      
        .help img {
          margin-right: 20px;
          margin-bottom: 10px;
        }
      
        .small {
          margin-top: 20px;
        }
      
        .part {
          flex-direction: column;
          margin-top: 20px;
        }
      
        .part1, .part2 {
          width: 100%;
          float: none;
        }
      
        .part2 img {
          width: 100%;
          margin-top: 20px;
          float: none;
        }
      
        .arrow {
          margin-top: 20px;
        }
      
        .newpart {
          margin-top: 20px;
          flex-direction: column;
        }
      
        .newpart1, .newpart2 {
          width: 100%;
          float: none;
          padding-left: 0;
          padding-top: 20px;
        }
      
        .newpart1 img {
          width: 100%;
          margin-top: 20px;
        }
      
        .lines {
          /* margin-left: 5%; */
          width: 100%;
          margin-top: 20px;
        }
      
        .Inc {
          /* margin-left: 5%; */
          font-size: medium;
          text-align: left;
        }
      
        .Page6 {
          height: auto;
          padding-top: 20px;
          padding-bottom: 20px;
        }
      
        .Page5 {
          height: 1960px;
        }
      }