@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Belanosima:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');

* {
  box-sizing: border-box;
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

body,
html {
  overflow-x: hidden;
  font-family: 'Rubik', sans-serif;
  background-color: #12192c;
}

/*..............................................comman code we ca use in thi page.........................................................*/

/*........................................................... why us tittle in front page start...................................................... */

.tittle {
  width: 100%;
  height: 50vh;
  background-image: url(../img/crystal\ Background.webp);
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  border-radius: 30px;
  background-color: rgba(243, 240, 240, 0.1);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-top: 2px solid rgba(255, 255, 255, 0.5);
  border-left: 2px solid rgba(246, 232, 232, 0.5);
  opacity: 0.7;
}

.tittle h2 {
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
  font-size: 6vw;
  font-weight: bold;
  margin-top: 4%;

}

/*........................................................... why us tittle in front page End...................................................... */


/*....................................................... section 1.......................................... */
.section1 {
  width: 100%;
  height: auto;
}

.about {
  width: 100%;
  height: 70vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
  overflow: hidden;
}

.about p {
  position: absolute;
  width: 50%;
  height: auto;
  color: white;
  font-size: 1.5vw;
  line-height: 2.5vw;
  padding-left: 10%;
  overflow-wrap: break-word;
  white-space: normal;
}

.section1 h1 {
  font-size: 5vw;
  line-height: 3;
  padding-left: 20%;
  color: white;
}

.about img {
  float: right;
  width: 40%;
  height: 40vh;

}

/*....................................................... section 1 end.......................................... */


/*....................................................... section 2 START.......................................... */

.our-vision-section {
  width: 100%;
  height: auto;

}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.section-title {
  color: white;
  font-size: 5vw;
  line-height: 10vw;
  overflow-wrap: break-word;
  margin-top: 10vw;
}

.vision-description {
  color: white;
  font-size: 1.5vw;
  line-height: 2.5vw;
  overflow-wrap: break-word;
}

.vision-image {
  width: 30%;
  height: auto;
  top: 2vw;
}

/*....................................................... section 2 END.......................................... */


/*....................................................... section 3 START.......................................... */
.section3 {
  width: 100%;
  height: auto;
}

.section3 ul {
  width: 60%;
  height: auto;
  padding-left: 5%;
  list-style: square;

}

.section3 li {
  font-family: 'Poppins', sans-serif;
  font-size: 1.5vw;
  line-height: 2.5vw;
  font-weight: 400;
  letter-spacing: normal;
  margin-bottom: 1vw;
  color: white;

}

.our-Mission {
  width: 100%;
  height: 140vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
  overflow: hidden;

}


.our-Mission h1 {
  color: white;
  padding-left: 10%;
  font-size: 5vw;
  margin-top: 3vw;
}


.Mission-img {
  float: right;
  width: 50%;
  height: 70%;

}

/*....................................................... section 3 END.......................................... */

/*....................................................... section 4 START.......................................... */
.section4 {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 5%;

}

.section4 h1 {
  margin-bottom: 5%;
  text-align: center;
  color: white;
  font-size: 5vw;
}

/* Apply initial styles to the image in section4 */
.section4 img {
  width: 60%;
  height: auto;
  transition: all 0.3s;
  /* Add a transition for smooth effect */
  border: 5px solid white;
  border-radius: 3%;
  box-shadow: 0 0 20px rgba(198, 200, 86, 0.8);
  margin-bottom: 3%;
}

/* If you want to change the source on hover */
.section4 img:hover {
  content: url(../img/1.webp);
  /* Change the source URL on hover */
}

/*....................................................... section 4 END.......................................... */

/*.................................................. Responsive design start .............................................*/
@media (min-width: 601px) and (max-width: 1000px) {

  /*...................................... section1 start............................................ */
  .section1 {
    width: 100vw;
    height: auto;
    flex-direction: column;
    /* Stack items vertically on smaller screens */
  }

  .about {
    width: 100vw;
    height: auto;

  }

  .about img {
    /* margin-top: 200px; */
    width: 100%;
    height: 60vh;
    margin-top: 70vw;
  }

  .about p {
    padding: 20px;
    /* Add padding to separate text from edges */
    width: 100%;
    height: auto;
    font-size: 5vw;
    line-height: 6vw;
    text-align: center;

  }

  .about h1 {

    font-size: 14vw;
  }

  /*...................................... section1 end............................................ */
  /*...................................... section2 Start............................................ */

  .our-vision-section {
    width: 100vw;
    height: auto;
  }

  .container {
    width: 100vw;
    height: auto;

  }

  .section-title {
    color: white;
    text-align: center;
    font-size: 14vw;
    line-height: 10vw;
    margin-bottom: 10vw;
  }

  .vision-description {
    text-align: center;
    font-size: 7vw;
    line-height: 10vw;
    overflow-wrap: break-word;

  }

  .vision-image {
    width: 100vw;
    margin-top: 10vw;
  }



  /*...................................... section2 End............................................ */
  /*...................................... section3 Start............................................ */


  .section3 {
    width: 100vw;
    height: auto;
    flex-direction: column;
    /* Stack items vertically on smaller screens */
  }

  .our-Mission {
    width: 100vw;
    height: auto;

  }

  .section3 ul {
    width: 100vw;
    /* Adjust the width for smaller screens */
    font-size: 5vw;
    padding-left: 2%;
    /* Adjust the padding for smaller screens */
  }

  .our-Mission h1 {
    font-size: 14vw;
    /* Increase font size for smaller screens */
    text-align: center;
    /* Center the text on smaller screens */
    padding: 0;
    /* Remove left padding on smaller screens */


  }

  .Mission-img {
    margin-top: 10vw;
    width: 100vw;
    /* Make the image full width on smaller screens */
    height: auto;
    /* Maintain aspect ratio on smaller screens */

  }

  .section3 li {
    font-size: 5vw;
    line-height: 6vw;
  }

  .tittle h2 {
    font-size: 15vw;
  }

  /*...................................... section3 End............................................ */

  /*...................................... section4 Start............................................ */


  .section4 img {
    width: 98%;

  }

  .section4 h1 {
    margin-top: 15vw;
    font-size: 10vw;
  }

  /*...................................... section4 End............................................ */
}

@media (max-width: 600px) {

  /*...................................... section1 start............................................ */
  .section1 {
    width: 100vw;
    height: auto;
    flex-direction: column;
    /* Stack items vertically on smaller screens */
  }

  .about {
    width: 100vw;
    height: 100vh;

  }

  .about img {
    /* margin-top: 200px; */
    width: 100%;
    height: 60vh;
    margin-top: 50vw;
  }

  .about p {
    padding: 2vw;
    /* Add padding to separate text from edges */
    width: 100%;
    height: auto;
    font-size: 5vw;
    line-height: 6vw;
    text-align: center;

  }

  .about h1 {

    font-size: 14vw;
  }

  /*...................................... section1 end............................................ */

  /*...................................... section2 Start............................................ */

  .our-vision-section {
    width: 100vw;
    height: auto;
  }

  .section-title {
    color: white;
    text-align: center;
    font-size: 14vw;
    line-height: 10vw;
    margin-bottom: 10vw;
  }

  .vision-description {
    text-align: center;
    font-size: 5vw;
    line-height: 10vw;
    overflow-wrap: break-word;

  }

  .vision-image {
    width: 100vw;
    margin-top: 10vw;
  }




  /*...................................... section2 End............................................ */
  /*...................................... section3 Start............................................ */


  .section3 {
    width: 100vw;
    flex-direction: column;
    /* Stack items vertically on smaller screens */
  }

  .section3 ul {
    width:98%;
    /* Adjust the width for smaller screens */
    font-size: 5vw;
    
  }
  .section3 li{
   padding-bottom: 10px;
  margin-left: 10px;
    list-style: circle;
  }

  .our-Mission {
    width: 100vw;
    height: auto;
  }

  .our-Mission h1 {
    font-size: 14vw;
    /* Increase font size for smaller screens */
    text-align: center;
    /* Center the text on smaller screens */
    padding: 0;
    /* Remove left padding on smaller screens */
    margin: 10px 0;
    /* Adjust the margin for smaller screens */

  }

  .Mission-img {
    margin-top: 10vw;
    width: 100%;
    /* Make the image full width on smaller screens */
    height: auto;
    /* Maintain aspect ratio on smaller screens */

  }

  .section3 li {

    font-size: 5vw;
    line-height: 7vw;
  }

  .tittle h2 {
    font-size: 15vw;
  }

   .section4 img{
    width: 100%;
    height: 100%;
   }
}

/*...................................... section3 End............................................ */

/*.................................................. Responsive design End .............................................*/