@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

@font-face {
  font-family: "Tropical Country";
  src: url("/fonts/TropicalCountry-51PZj.ttf") format("truetype");
}

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

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* home styling */
.banner-video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: flex;
  justify-content: center;
  align-items: center;
 
}



.banner-video::-webkit-media-controls {
  display: none !important;
  -webkit-appearance: none;
}

.banner-video::-webkit-media-controls-enclosure {
  display: none !important;
  -webkit-appearance: none;
}

.banner-video::-webkit-media-controls-panel {
  display: none !important;
  -webkit-appearance: none;
}

.banner-video::-webkit-media-controls-play-button {
  display: none !important;
  -webkit-appearance: none;
}

.mobile-banner{
  display: none;
}



.data-security {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5vw 15vw 0 15vw;
}

.section-1 p,
.section-2 p,
.section-3 {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-size: 3vw;
  line-height: 5vw;
}

.data-security p {
  padding: 5vw 0vw 3vw 0vw;
  width: 27vw;
}

.span-text {
  color: #3dc5f2;
  font-family: "Tropical Country" !important;
  font-style: normal;
  font-weight: 400;
  font-size: 9vw;
  line-height: 2vw;
  padding-bottom: 0.8vw;
}

.benefits {
  display: flex;
  flex-direction: column;
  width: 50%;
  gap: 0;
}

.benefits p {
  margin: 0;
  padding: 0;
  margin-left: 2.8vw;
  
}

.benefits ul {
  list-style: none;
  text-decoration: none;
}

.benefits ul li {
  margin: 3vw;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-size: 1.5vw;
  line-height: 2vw;
  white-space: nowrap;
}

.benefits ul li:nth-child(1) {
  margin-top: 1.5vw;
}

.benefits ul li span {
  margin-left: 3vw;
}
.benefits ul li {
  display: flex;
  align-items: center;
}

/* dot animation Starts Here */

.dot {
  width: 1vw;
  height: 1vw;
  border-radius: 50%;
  background-color: #3dc5f2;
  position: relative;
  animation: glow 3s linear infinite;
}

.dot:first-child {
  background-color: #acdabd;
  animation-delay: 0s;
}

.dot:nth-child(2) {
  background-color: #3dc5f2;
  animation-delay: 2s;
}

.dot:last-child {
  background-color: #3dc5f2;
  animation-delay: 4s;
}

.dot:after {
  content: "";
  display: block;
  height: 4vw;
  width: 1px;
  background-color: #3dc5f2;
  position: absolute;
  top: 1vw;
  left: 0.4vw;
}

.dot:last-child:after {
  display: none;
}

@keyframes glow {
  0%,
  16.67% {
    background-color: #acdabd;
  }
  33.33%,
  50% {
    background-color: #3dc5f2;
  }
  66.67%,
  83.33% {
    background-color: #3dc5f2;
  }
  100% {
    background-color: #acdabd;
  }
}

/* dot animation ends here */

.data-security-img {
  display: flex;
  align-items: center;
  justify-content: center;
}

.data-security-img img {
  height: 55vw;
  width: 78vw;
  margin-left: 4vw;
}

.section-2,
.section-3 {
  padding: 0 10vw;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  gap: 3vw;
}

.section-2 img,
.section-3 img {
  height: 60vw;
  width: 31vw;
}

.section-2 .content,
.section-3 .content {
  padding-top: 14vw;
  width: 45vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-2 .content p,
.section-3 .content p {
  /* line-height: 5vw; */
  text-align: center;
  
}

/* .section-2 .benefits p,
.section-3 .benefits p {
  text-align: left;
} */

.section-2 .benefits,
.section-3 .benefits {
  margin-top: 2.5vw;
}

.section-3 .benefits  p,
.section-2 .benefits p{
  padding:0; 
  margin: 0;
}


.section-2 .benefits ul{
  margin-left:2vw;
}

.section-3 .benefits ul{
  margin-left:1vw;
}

.section-3 .content {
  width: 38vw;
}

/* .section-3 img {
  height: 60vw;
  width: 27vw;
} */

.manifesto {
  padding: 4vw 15vw;
}

.manifesto h1 {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-size: 3vw;
  line-height: 3.5vw;
  width: 28vw;
}

.manifesto h5 {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-size: 2vw;
  line-height: 6vw;
  color: #094d8e;
}

.manifesto p {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-size: 1.2vw;
  line-height: 1.7vw;
  margin: 1.3vw 0;
}

@media (min-width: 319px) and (max-width: 600px) {

  .mobile-banner{
    display: block;
  }

  .desktop-banner{
    display: none;
  }
  

  .data-security {
    flex-direction: column;
    gap: 10vw;
    padding-top: 15vw;
  }

  .data-security p {
    padding: 0vw;
    width: 100%;
  }

  .section-1 p,
  .section-2 p,
  .section-3 {
    font-weight: 600;
    font-size: 6vw;
    line-height: 9vw;
  }

  .span-text {
    font-size: 15vw;
    padding-bottom: 0.8vw;
  }

  .benefits {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
  }

  .benefits p {
    display: none;
  }

  .benefits ul li {
    margin: 10vw 0;
    font-size: 4vw;
    line-height: 4vw;
  }

  .benefits ul li:nth-child(1) {
    margin-top: 0vw;
  }

  .benefits ul li span {
    margin-left: 15vw;
  }

  .dot {
    width: 4vw;
    height: 4vw;
  }

  .dot:after {
    height: 11vw;
    width: 1px;
    top: 4vw;
    left: 1.5vw;
  }

  .dot:last-child:after {
    display: none;
  }

  .section-2,
  .section-3 {
    padding: 0;
    flex-direction: column-reverse;
    align-items: center;
    gap: 0vw;
  }

  .section-3 {
    flex-direction: column;
  }

  .section-2 img,
  .section-3 img {
    height: 133vw;
    width: 70vw;

  }

  .section-2 .content,
  .section-3 .content {
    padding-top: 14vw;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .section-2 .content p,
  .section-3 .content p {
    line-height: 10vw;
    text-align: center;
  }

  .section-2 .benefits,
  .section-3 .benefits {
    margin-top: 2.5vw;
    width: 50%;
    margin-top: 7vw;
  }

  .section-3 .content {
    width: 100%;
  }

 

  /*manifesto page */

  .manifesto {
    padding: 2vw 5vw;
  }

  .manifesto h1 {
    font-size: 5vw;
    line-height: 6vw;
    width: 48vw;
    margin-bottom: 4vw;
  }
  .manifesto h5 {
    font-size: 4.3vw;
    line-height: 6vw;
    margin: 4vw 0;
    margin-top: 10vw;
  }

  .manifesto p {
    font-size: 4vw;
    line-height: 6vw;
    margin: 5vw 0;
  }
}

@media (min-width: 600px) and (max-width: 1024px) {
  .dot {
    width: 1.5vw;
    height: 1.5vw;
  }

  .dot:after {
    height: 5;
    width: 1px;
    top: 1vw;
    left: 0.6vw;
  }

  .dot:last-child:after {
    display: none;
  }

  /*manifesto page */

  .manifesto {
    padding: 2vw 12vw;
  }

  .manifesto h1 {
    font-size: 4vw;
    line-height: 6vw;
    width: 38vw;
    margin-bottom: 0vw;
  }
  .manifesto h5 {
    font-size: 2.5vw;
    line-height: 3vw;
    /* margin:4vw 0; */
    margin-top: 5vw;
  }

  .manifesto p {
    font-size: 2vw;
    line-height: 3vw;
    margin: 2vw 0;
  }
}