body, html {
  margin: 0;
  padding: 0;
  background: rgb(245, 245, 245);
  color: white;
  font-family: 'Poppins', sans-serif;
}
.main{
  width: 100vw;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.navbar{
  display: flex;
  justify-content: center;
}
.nav {
  margin-top: 4vh;
  width: 30vw;
  height: 5vh;
  border: 2px solid black;
  border-radius: 5vw;
  background-color: black;
  display: flex;
  box-shadow: 0px 8px 20px 5px rgb(0, 0, 0, .3);
  z-index: 2;
}
a{
  text-decoration: none;
  color: rgb(149, 149, 149);
  margin: auto;
  font-size: 1.5vw;
}
a:hover{
  transition: .3s;
  color: white;
}
.hero{
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}
.hero h1{
  font-size: 8vw;
  color: black;
  margin-bottom: 0;
}
#typewriter {
  margin-top: 0;
  font-size: 10vw;
  color: black;
  animation: type .8s linear infinite;
}
@keyframes type {
  50%{
    border-right: 1px solid rgb(193, 37, 37);
  }
  100%{
    border: none;
  }
}
.name{
  position: fixed;
  font-size: 35vw;
  color: rgb(0, 0, 0);
  transform: rotate(-20deg);
  opacity: 20%;
  z-index: 0;
}
span{
  margin-top: 4vh;
}
.strip {
  width: 100vw;
  height: 8vh;
  margin-top: 20vh;
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  z-index: 1;
}
.stripContent {
  width: 100%;
  display: flex;
  gap: 20vw;
  white-space: nowrap;
  animation: scrollStrip 10s linear infinite;
}
@keyframes scrollStrip {
  0% {
    transform: translateX(100%);
  }
  100%{
    transform: translateX(-100%);
  }
}
.section1{
  width: 100vw;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgb(245, 245, 245);
  z-index: 1;
}
.section1 h1{
  font-size: 8vw;
  color: black;
}
.s1A, .s1B, .s1C, .s1a, .s1b{
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}
.C{
  width: 15vw;
  height: 15vw;
  background-color: white;
  color: #000;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.section1 img{
  width: 60%;
  height: 60%;
  object-fit: contain;
}
.s1a, .s1b{
  justify-content: space-around;
}
.c{
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
  background-color: white;
}
.section2{
  width: 100vw;
  height: auto;
  display: flex;
  justify-content: center;
  background-size: contain;
  z-index: 1;
}
.section2 img{
  width: 100vw;
  height: 60vh;
  position: absolute;
  z-index: -1;
}
.liner{
  position: relative;
  font-size: 3vw;
  line-height: .5;
  color: rgb(245, 245, 245, .9);
}
.focused{
  font-weight: 800;
  position: absolute;
  color: white;
  top: 3.5vw;
  left: 20vw;
  box-shadow: 0px 0px 20px 5px rgb(0, 0, 0);
}
.section3{
  width: 100vw;
  height: auto;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.p{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.phone{
  display: flex;
}
.ph{
  margin-top: 40vh;
  height: 60vh;
  width: 25vw;
  border: 10px solid black;
  border-bottom-left-radius: none;
  border-radius: 8vh;
  overflow: hidden;
}
.ph iframe{
  pointer-events: none;
}
.dot{
  visibility: visible;
  z-index: 2;
}
.ph2{
  width: auto;
  background-color: rgb(236, 236, 236);
}
.ph2 img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.ph1, .ph3{
  visibility: hidden;
}
.tag{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40vw;
  min-height: 8vh;
  font-size: 5vh;
  background-color: black;
  border: 2px solid black;
  border-radius: 5vw;
  text-align: center;
}
.tag:active{
  border: 2px solid black;
  background-color: transparent;
  color: black;
}
.contact{
  width: 100vw;
  height: 80vh;
  display: flex;
  flex-wrap: wrap;
  background-color: black;
  z-index: 2;
}
.contact h1, .contact span{
  font-size: 6vw;
}
.contact span{
  border: .5vw solid white;
  border-radius: 50%; 
}

@media (max-width: 740px) {
  .nav{
    width: 80vw;
    margin-top: 3vh;
  }
  .nav a{
    font-size: 1.5vh;
  }
  .hero{
    margin-top: 15vh;
  }
  .hero h1{
    font-size: 4vh;
  }
  .section2 img{
    height: 20vh;
  }
  .section3 .ph{
    display: flex;
    justify-content: center;
    border-radius: 5vh;
    width: 70vw;
  }
  .section3 .ph1, .section3 .ph3{
    visibility: hidden;
  }
  .tag{
    width: 60vw;
    height: 6vh;
    margin-top: 2vh;
    font-size: 2vh;
  }
  .ph2{
    height: 50vh;
    width: auto;
  }
}