@font-face {
  font-family: Gilroy-SemiBold;
  src: url(Fonts/Gilroy-SemiBold.ttf);
}

@font-face {
  font-family: Gilroy-Black;
  src: url(Fonts/Gilroy-Black.ttf);
}

@font-face {
  font-family: Gilroy-Medium;
  src: url(Fonts/Gilroy-Medium.ttf);
}

@font-face {
  font-family: Gilroy-Light;
  src: url(Fonts/Gilroy-Light.ttf);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Gilroy-SemiBold;
}
html,
body {
  height: 100%;
  width: 100%;
}

#main {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #eef8ff;
  overflow: hidden;
}

nav {
  display: flex;
  width: 100%;
  height: 10vh;
  /* background-color: aquamarine; */
}

.lft-nav,
.rght-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25vw;
  height: 100%;
  gap: 1.5vw;
  /* background-color: #fff; */
}

.lft-nav a {
  font-size: 2vw;
  text-decoration: none;
  color: #ff8000;
}

.cntr-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2vw;
  width: 50vw;
  height: 100%;
  /* background-color: olive; */
}

.cntr-nav a {
  font-family: Gilroy-Medium;
  color: #333;
  font-size: 0.9vw;
  text-decoration: none;
}

.search {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12vw;
  height: 5vh;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.search input {
  padding: 0.5vw 1vw;
  outline: none;
  border: none;
  background: none;
}

.search i {
  font-size: 1vw;
}

.cart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5vw;
  height: 2.5vw;
  background-color: #ff8000;
  border-radius: 5px;
  color: #fff;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.main-content {
  width: 100%;
  height: 90%;
  display: flex;
}

.lft {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3vh;
  padding-left: 9vw;
  width: 60%;
  height: 100%;
}

.lft h1 {
  font-size: 5vw;
  color: #333;
  font-family: Gilroy-Black;
}

.lft h1:nth-child(2) {
  font-family: Gilroy-Light;
}

.lft p {
  width: 25vw;
  color: #aeaeae;
}

.lft .search {
  width: 25vw;
  padding: 1.5vw 1vw;
  justify-content: space-between;
}

.lft .search input {
  width: 25vw;
}

.lft .search i {
  color: #ff8000dd;
}

.lft button {
  width: 8vw;
  padding: 1vw 2vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ff8000;
  color: #fff;
  border: none;
  border-radius: 5px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.rght {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40%;
  height: 100%;
  /* background-color: #FF8000; */
}
#background {
  width: 33vw;
}

#all-plate {
  position: absolute;
  width: 30vw;
  height: 30vw;
  /* background-color: #FF8000; */
  animation: circle 15s infinite linear;
}

#img-three {
  width: 18vw;
  position: absolute;
  top: 0%;
  left: -12%;
  animation: circle 20s infinite linear;
}

#img-two {
  width: 20vw;
  position: absolute;
  bottom: -18%;
  right: 0%;
  animation: circle 20s infinite linear;
}

#img-one {
  width: 12vw;
  position: absolute;
  top: 10%;
  right: -5%;
  animation: circle 20s infinite linear;
}

@keyframes circle {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}

#glass {
  position: absolute;
  bottom: 10%;
  right: 25%;
  width: 20vw;
  height: 20vh;
  background: rgba(0, 0, 0, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
}

.ri-menu-3-line{
    display: none;
}

.resp-nav{
    display: none;
}


@media (max-width:500px) {
    .lft-nav a{
        font-size: 10vw;
    }

    #main{
        height: auto;
        min-height: 100vh;
    }
    nav{
        justify-content: space-between;
        padding: 0vw 10vw;
        align-items: center;
    }
    .cntr-nav{
        display: none;
    }
    .rght-nav{
        display: none;
    }
    .ri-menu-3-line{
        display: initial;
        font-size: 5vw;
    }

    .resp-nav{
        position: absolute;
        top: 0;
        right: -100%;
        display: initial;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5vh;
        width: 100%;
        height: 100vh;
        background-color: #ffffff;
        z-index: 9;
        transition: all cubic-bezier(0.19, 1, 0.22, 1)1s;
    }

    .resp-nav a{
        text-decoration: none;
        font-size: 6vw;
        color: #333;
    }

    .resp-nav i{
        position: absolute;
        top: 3%;
        right: 8%;
        font-size: 7vw;
    }
    .main-content{
        height: auto;
        min-height: 100vh;
        flex-direction: column-reverse;
    }
    .rght{
        width: 100%;
        height: 60vh;
    }
    #background{
        width: 70vw;
    }
    #all-plate{
        width: 50vw;
        height: 50vw;
    }
    #img-one{
        width: 40vw;
        right: -50%;
    }
    #img-three{
        width: 33vw;
        left: -40%;
        top: -15%;
    }
    #img-two{
        width: 40vw;
        bottom: -50%;
        right: 44%;
    }
    #glass{
        top: 45%;
        right: -8%;
        width: 58vw;
        height: 16vh;
    }
    .lft{
        width: 100%;
        height: 60vh;
        gap: 1vh;
    }
    .lft h1{
        font-size: 10vw;
    }
    .lft p{
        width: 70vw;
        font-size: 4vw;
        margin-top: 3vh;
        margin-bottom: 3vh;
    }
    .lft .search{
        padding: 1vw 2vw;
        width: 70vw;
        height: 10vw;
    }
    .lft .search input{
        width: 70vw;
    }
    .lft .search i{
        font-size: 5vw;
    }
    .lft button{
        margin-top: 1.5vh;
        width: 30vw;
        height: 10vw;
    }
}