body {
  background-color: black;
}

.background1 {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.navBar li {
  list-style-type: none;
  display: inline;
  margin-right: 15px;
  color: #ff305b;
}

.navBar li:not(.home) {
  color: white;
}

.navBar ul {
  position: absolute;
  top: 0;
  right: 190px;
}

.container1 p:not(.logo) {
  color: white;
}

.container1 {
  background-image: url("slider-01.jpg");
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  width: 100%;
  height: 100vh;
}

.text1 :not(h1) {
  color: white;
}

.container1 p {
  position: absolute;
  top: 0px;
  left: 190px;
  font-size: 25px;
  color: #ff305b;
}

.text1 h1 {
  color: #ff305b;
}

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

.effect1 {
  width: 22ch;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 2em;
  animation-duration: 1s;
  animation-name: effect1;
  animation-delay: -4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes effect1 {
  from {
    width: 50%;
  }
  to {
    width: 100%;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

@media screen and (max-width: 600px) {
  .navBar {
    font-size: 0.3em;
  }
  .text1 {
    font-size: 0.3em;
  }
  .container1 {
    background-size: 100%;
  }
  .navBar ul {
    display: flex;
    flex-direction: column;
  }
}

@media screen and (min-width: 601px) and (max-width: 768px) {
  .container1 {
    background-size: 100%;
    font-size: 0.5em;
  }
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
  .container1 {
    background-size: 100%;
    font-size: 0.8em;
  }
}

@media screen and (min-width: 1200) {
  .container1 {
    background-size: 100%;
    font-size: 1em;
  }
}

.clearFix1 {
  clear: both;
}

.container2 {
  color: white;
  position: relative;
  background-color: black;
  z-index: -2;
  padding-left: 200px;
  padding-top: 100px;
  padding-bottom: 100px;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
  /* flex-basis: 40% */
}

.text2 {
  width: 50%;
}
.images2 img {
  position: relative;
  /* z-index: 1; */
  top: 10px;
  left: 10px;
  /* box-shadow: -10px -10px black, -20px -20px darkgray; */
}

/* .images2 img{ */
/* width: 300px; */
/* height: 300px; */
/* border: 3px solid red; */
/* display: flex; */
/* justify-content: center; */
/* align-items: center; */
/* margin: auto; */
/* position: relative  ; */
/* } */

/* .images2 img::before{
    content:"" ;
    height: 540px;
    width: 560px;
    background-color: red;
    position: absolute;
    top: -110px;
    left: 120px;
    border: 5px gray;

}

 .images2 img::after{
    content:"" ;
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    bottom: -25px;
    left: 20px;  */
/* } */

.line {
  border-top: 1px dashed white;
}

.background2 {
  height: 440px;
  width: 360px;
  background-color: black;
  border: 5px solid gray;
  position: absolute;
  z-index: -1;
  top: 200px;
  left: 200px;
}

@media screen and (max-width: 600px) {
  .container2 {
    background-size: 100%;
    font-size: 0.5em;
  }
  .images2 img {
    width: 55%;
  }
  .background2 {
    visibility: hidden;
  }
}

@media screen and (min-width: 601px) and (max-width: 768px) {
  .container2 {
    background-size: 100%;
    font-size: 0.5em;
  }
  .images2 img {
    width: 55%;
  }
  .background2 {
    visibility: hidden;
  }
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
  .container2 {
    background-size: 100%;
    font-size: 0.8em;
  }
  .images2 img {
    width: 75%;
  }
  .background2 {
    visibility: hidden;
  }
}

@media screen and (min-width: 1201) {
  .container2 {
    font-size: 1em;
  }
  .background2 {
    display: none;
  }
}

.container3 h2 {
  color: white;
}

.container3 i {
  font-size: 30px;
  color: white;
  /* width: 25%; */
}

.container3 p {
  color: white;
  /* width: 25%; */
}

.container3 {
  /* display: flex; */
  /* flex: wrap; */
  width: 100%;
  height: 80vh;
}

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

.text3b {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 10vh;
}

.text3c {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
}

.container4 h2 {
  color: white;
  text-align: center;
}
.line1 {
  width: 10%;
  border-top: 1px solid red;
}

.line2 {
  width: 20%;
  border-top: 1px solid red;
}

.text4 {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  color: white;
}

.images4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.images4 img {
  width: 30%;
  margin-bottom: 15px;
}

.container4 {
  height: 100vh;
  margin: 50px;
}

@media screen and (max-width: 600px) {
  .container3 {
    background-size: 100%;
    font-size: 0.5em;
  }
}

/* @property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

div {
  animation: counter 5s infinite alternate ease-in-out;
  counter-reset: num var(--num);
  font: 800 40px system-ui;
  padding: 2rem;
}
div::after {
  content: counter(num);
}

@keyframes counter {
  from {
    --num: 0;
  }
  to {
    --num: 100;
  }
} */

.images5 i {
  color: #ff305b;
  font-size: 2em;
}
.images5 {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.numbers5 p {
  color: white;
  font-size: 2em;
}
.numbers5 {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.text5 p {
  color: white;
  font-size: 2em;
}

.text5 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  /* align-items: center; */
}

.container5 {
  height: 33vh;
  margin: 150px;
  /* margin-top: 50px; */
}

.container6 h2 {
  color: white;
  text-align: center;
}
.container6 p {
  color: white;
  text-align: center;
}
.container6 i {
  color: yellow;
  text-align: center;
}
.container6 h3 {
  color: white;
  /* text-align: center; */
}
.rating6 {
  width: 75%;
  height: 80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  /* align-items: center; */
  /* text-align: center; */
  /* position: absolute; */
  margin: auto;
  background-color: gray;
}

.container6 {
  background-color: black;
  width: 100%;
  height: 70vh;
}
.images6 img {
  border-radius: 50%;
  position: relative;
  top: 10px;
  left: 0px;
}
.corner6a {
  position: absolute;
  left: 195px;
  width: 0;
  height: 0;
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  border-top: 100px solid rgb(255, 0, 0);
  z-index: 0;
}
.corner6b {
  position: absolute;
  left: 195px;
  width: 0;
  height: 0;
  border-top: 75px solid transparent;
  border-left: 100px solid rgb(255, 0, 0);
  border-bottom: 75px solid transparent;
  z-index: 0;
}

.container7 h2 {
  color: white;
  text-align: center;
}

.videos7 {
  display: flex;
  /* height: 70VH; */
  justify-content: space-around;
}
.text7 p {
  color: white;
}
.text7 {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.container8 h2 {
  color: white;
  text-align: center;
}
.form8 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
input {
  width: 50%;
}
@media screen and (max-width: 800px) {
  img {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
@media screen and (max-width: 800px) {
  p,
  h1,
  h2,
  h3,
  h4,
  h5 {
    font-size: 3vw; /* The width is 100%, when the viewport is 800px or smaller */
  }
}

@media screen and (max-width: 800px) {
  div {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}