@import url("https://fonts.googleapis.com/css2?family=Neucha&display=swap");

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

html {
  animation: hues 30s linear forwards infinite;
  filter: hue-rotate(235deg) brightness(2);
  font-family: "Neucha", cursive;
}

a {
  text-decoration: none;
  color: white;
}

@keyframes hues {
  0% {
    filter: hue-rotate(0deg);
  }
  17% {
    filter: hue-rotate(0deg);
  }
  20% {
    filter: hue-rotate(30deg);
  }
  37% {
    filter: hue-rotate(30deg);
  }
  40% {
    filter: hue-rotate(180deg);
  }
  57% {
    filter: hue-rotate(180deg);
  }
  60% {
    filter: hue-rotate(120deg);
  }
  77% {
    filter: hue-rotate(120deg);
  }
  80% {
    filter: hue-rotate(275deg);
  }
  87% {
    filter: hue-rotate(275deg);
  }
  100% {
    filter: hue-rotate(0deg);
  }
}

body {
  color: ghostwhite;
  background-color: #030c09;
  width: 100%;
  position: relative;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: black;
  box-shadow: 25px 25px 25px 75px rgba(0, 0, 0, 0.25),
    25px 25px 75px rgba(0, 0, 0, 0.25), inset 5px 5px 10px rgba(0, 0, 0, 0.5),
    inset 5px 5px 20px rgba(255, 255, 255, 0.2),
    inset -5px -5px 15px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #0bda67;
}

.hero {
  width: 100%;
  height: 100vh;
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  top: -4%;
  left: 18%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 350px;
  height: 350px;
  background: #0bda67;
  border-radius: 50%;
  filter: blur(100px);
}

.header {
  padding: 10px 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.nav {
  display: flex;
  list-style: none;
}

.nav li a {
  color: ghostwhite;
  text-decoration: none;
  padding: 10px 30px;
  margin: 0 10px;
  transition: 0.4s;
}

.nav li a:hover {
  color: ghostwhite;
  box-shadow: 0px 0px 10px #0bda67, 0 0 5px #0bda67, inset 3px 0 3px #0bda67,
    inset -5px -5px 5px rgba(0, 0, 0, 0.5),
    inset 10px 10px 10px 5px rgba(255, 255, 255, 0.2);
  border-radius: 20px;
}

.logo {
  font-size: 2.5rem;
  z-index: 10;
}

span {
  color: #0bda8a;
}

h3 {
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 10px;
  line-height: 35px;
}

h1 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: 2px;
}

p {
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 10px;
  line-height: 35px;
  max-width: 500px;
}

section {
  padding: 0 10% 170px 10%;
}

.title h1 {
  font-size: 3.5rem;
}

.box__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  position: absolute;
  width: 100%;
  height: 60%;
  top: 50%;
  left: 0;
  padding: 0 10%;
  transform: translateY(-50%);
}

.home__circle {
  width: 100%;
  height: 100%;
  position: relative;
}

.home__circle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 300px;
  height: 300px;
  box-shadow: 0px 0px 70px #23ff8f79, 0 0 15px #23ff8f79,
    inset 3px 0 3px #0bda67, inset 5px 0 5px #0bda67,
    inset 5px 0 10px 3px #0bda67, inset -5px -5px 5px rgba(0, 0, 0, 0.5),
    inset 30px 10px 35px 5px rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72%;
  height: 85%;
  animation: roti 20s linear forwards infinite;
}

@keyframes roti {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

.aisa1 {
  transform: rotate(288deg);
  width: 100%;
  height: 100%;
}

.aisa1::before {
  content: "";
  width: 67%;
  height: 67%;
  position: absolute;
  top: 14%;
  left: 24%;
  transform: translate(-50%, -50%);
  border-top: 4px solid #0bda67;
  border-top-left-radius: 480px;
  z-index: -1;
}

.aisa1::after {
  content: "";
  width: 64%;
  height: 72%;
  position: absolute;
  top: 78%;
  left: 93%;
  transform: translate(-50%, -50%);
  border-bottom: 4px solid #0bda67;
  border-bottom-right-radius: 480px;
  z-index: -1;
}

.aisa2 {
  transform: rotate(288deg);
  width: 85%;
  height: 85%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(14deg);
}

.aisa2::before {
  content: "";
  width: 90%;
  height: 90%;
  position: absolute;
  top: 84%;
  left: 91%;
  transform: translate(-50%, -50%);
  border-bottom: 4px solid #0bda67;
  border-bottom-right-radius: 480px;
  z-index: -1;
}

.aisa2::after {
  content: "";
  width: 67%;
  height: 67%;
  position: absolute;
  top: 16%;
  left: 21%;
  transform: translate(-50%, -50%);
  border-top: 4px solid #0bda67;
  border-top-left-radius: 480px;
  z-index: -1;
}

.aisa3 {
  transform: rotate(288deg);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 47%;
  left: 47%;
  transform: translate(-50%, -50%) rotate(64deg) scale(0.8);
}

.aisa3::before {
  content: "";
  width: 67%;
  height: 67%;
  position: absolute;
  top: 76%;
  left: 82%;
  transform: translate(-50%, -50%);
  border-bottom: 4px solid #0bda67;
  border-bottom-right-radius: 480px;
  z-index: -1;
}

.aisa3::after {
  content: "";
  width: 37%;
  height: 37%;
  position: absolute;
  top: 3%;
  left: 30%;
  transform: translate(-50%, -50%);
  border-top: 4px solid #0bda67;
  border-top-left-radius: 480px;
  z-index: -1;
}

.aisa4 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 43%;
  left: 49%;
  transform: translate(-50%, -50%) rotate(152deg) scale(0.6);
}

.aisa4::before {
  content: "";
  width: 67%;
  height: 67%;
  position: absolute;
  top: 76%;
  left: 82%;
  transform: translate(-50%, -50%);
  border-bottom: 4px solid #0bda67;
  border-bottom-right-radius: 480px;
  z-index: -1;
}

.aisa4::after {
  content: "";
  width: 67%;
  height: 67%;
  position: absolute;
  top: 15%;
  left: 21%;
  transform: translate(-50%, -50%);
  border-top: 4px solid #0bda67;
  border-top-left-radius: 480px;
  z-index: -1;
}

.about {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  align-items: center;
  position: relative;
  grid-gap: 100px;
  text-align: center;
}

.about::before {
  content: "";
  position: absolute;
  top: 121%;
  left: -8%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 300px;
  height: 300px;
  background: #0bda67;
  border-radius: 50%;
  filter: blur(150px);
  z-index: -5;
}

.about__rim {
  display: flex;
  flex-direction: column;
  grid-gap: 50px;
  flex: 120%;
  align-items: center;
}

.grid__flex {
  display: flex;
  grid-gap: 20px;
  align-items: center;
}

.second {
  position: relative;
  content: "";
  width: 100%;
  height: 700px;
  z-index: -1;
}

.second::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 150px;
  height: 150px;
  box-shadow: 0px 0px 70px #23ff8f79, 0 0 15px #23ff8f79,
    inset 3px 0 3px #0bda67, inset 5px 0 5px #0bda67,
    inset 5px 0 10px 3px #0bda67, inset -5px -5px 5px rgba(0, 0, 0, 0.5),
    inset 30px 10px 35px 5px rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.center2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52%;
  height: 46%;
  animation: roti 20s linear forwards infinite;
}

.rim {
  display: flex;
  align-items: center;
  grid-gap: 50px;
  padding: 15px;
}

.icon i {
  font-size: 2rem;
  padding: 15px;
  border-radius: 50%;
  box-shadow: 0px 0px 10px #23ff8f79, 0px 0px 10px #23ff8f79,
    inset 0px 0px 0px 0px #0bda67, inset 0px 0px 5px 0px #0bda67,
    inset 18px 8px 100px rgba(0, 0, 0, 0.5),
    inset 30px 10px 35px 5px rgba(255, 255, 255, 0.2);
  border: 1px solid #a2cbd7;
}

.icon,
.icon2 {
  position: relative;
}

/* .icon:hover,
.icon2:hover {
  transform: rotate(-360deg);
  transition: 0.5s;
} */

.icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 100px;
  height: 100px;
  box-shadow: 0px 0px 70px #23ff8f79, inset 2px 0 0px 1px #0bda67,
    inset 5px 5px 10px rgba(0, 0, 0, 0.8), inset 5px 5px 20px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
}

.text__center h1,
.text__center h3,
.text__center p {
  max-width: none;
  text-align: center;
  padding: 10px 20px;
}

.work {
  padding: 170px 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  grid-gap: 50px;
}
.third {
  width: 500px;
  height: 500px;
  position: relative;
}

.f1__circle {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 12px solid #0bda67;
  border-radius: 50%;
  z-index: -1;
}

.f2__circle {
  content: "";
  width: 70%;
  height: 70%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 9px solid #0bda67;
  border-radius: 50%;
  z-index: -1;
}

.f1__circle::before,
.f2__circle::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 6px solid #030c09;
  border-radius: 50%;
  z-index: -1;
  box-shadow: 0px 0px 10px #23ff8f79, inset 2px 0 0px 1px #0bda67,
    inset 5px 5px 10px rgba(0, 0, 0, 0.8), inset 5px 5px 20px rgba(0, 0, 0, 0.2);
}

.f3__circle {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 40%;
  height: 40%;
  box-shadow: 0px 0px 10px #23ff8f79, 0 0 10px #23ff8f79,
    inset 3px 0 3px #0bda67, inset 5px 0 5px #0bda67,
    inset 5px 0 10px 3px #0bda67, inset -5px -5px 5px rgba(0, 0, 0, 0.5),
    inset 30px 10px 35px 5px rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.circle {
  content: "";
  position: absolute;
  top: 79%;
  left: 102%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 50px;
  height: 50px;
  box-shadow: 0px 0px 70px #23ff8f79, 0 0 15px #23ff8f79,
    inset 3px 0 3px #0bda67, inset 5px 0 5px #0bda67,
    inset -5px -5px 5px rgba(0, 0, 0, 0.5),
    inset 10px 10px 10px 5px rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  z-index: -1;
}

.circle2 {
  content: "";
  position: absolute;
  top: 60%;
  left: 10%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 30px;
  height: 30px;
  box-shadow: 0px 0px 70px #23ff8f79, 0 0 15px #23ff8f79,
    inset 3px 0 3px #0bda67, inset 5px 0 5px #0bda67,
    inset -5px -5px 5px rgba(0, 0, 0, 0.5),
    inset 10px 10px 10px 5px rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  z-index: -1;
}

.square {
  content: "";
  position: absolute;
  top: 1%;
  left: 10%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 50px;
  height: 50px;
  box-shadow: 0px 0px 70px #23ff8f79, 0 0 15px #23ff8f79,
    inset 3px 0 3px #0bda67, inset 5px 0 5px #0bda67,
    inset -5px -5px 5px rgba(0, 0, 0, 0.5),
    inset 10px 10px 10px 5px rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  z-index: -1;
}

.center3 {
  height: 100%;
  animation: deg 10s infinite;
}

@keyframes deg {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.box1 {
  background: #030c09;
  box-shadow: 0px 0px 10px #23ff8f79, inset 1px 0 0 0px #0bda67,
    inset 13px 20px 10px rgba(0, 0, 0, 0.9),
    inset -20px -19px 20px rgba(255, 255, 255, 0.2);
  width: 300px;
  height: 200px;
  text-align: center;
  border-radius: 30px;
  position: absolute;
  top: 12%;
  left: -26%;
  animation: opa1 10s ease forwards infinite;
}

.box__on1 {
  background: #030c09;
  box-shadow: 0px 0px 10px #23ff8f79, inset 1px 0 0 0px #0bda67,
    inset 13px 20px 10px rgba(0, 0, 0, 0.9),
    inset -20px -19px 20px rgba(255, 255, 255, 0.2);
  width: 300px;
  height: 200px;
  text-align: center;
  border-radius: 30px;
  position: absolute;
  top: 36%;
  left: -26%;
  opacity: 0;
  animation: opa2 10s ease-in forwards infinite;
}

.box2 {
  background: #030c09;
  box-shadow: 0px 0px 10px #23ff8f79, inset 1px 0 0 0px #0bda67,
    inset 13px 20px 10px rgba(0, 0, 0, 0.9),
    inset -20px -19px 20px rgba(255, 255, 255, 0.2);
  width: 300px;
  height: 300px;
  text-align: center;
  border-radius: 30px;
  position: absolute;
  top: 5%;
  left: 50%;
  animation: opa1 10s ease forwards infinite;
}

.box__on2 {
  background: #030c09;
  box-shadow: 0px 0px 10px #23ff8f79, inset 1px 0 0 0px #0bda67,
    inset 13px 20px 10px rgba(0, 0, 0, 0.9),
    inset -20px -19px 20px rgba(255, 255, 255, 0.2);
  width: 300px;
  height: 300px;
  text-align: center;
  border-radius: 30px;
  position: absolute;
  top: -22%;
  left: 32%;
  opacity: 0;
  animation: opa2 10s ease-in forwards infinite;
}

@keyframes opa1 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes opa2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  51% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.box3 {
  background: #030c09;
  box-shadow: 0px 0px 10px #23ff8f79, inset 1px 0 0 0px #0bda67,
    inset 13px 20px 10px rgba(0, 0, 0, 0.9),
    inset -20px -19px 20px rgba(255, 255, 255, 0.2);
  width: 300px;
  height: 100px;
  text-align: center;
  border-radius: 30px;
  position: absolute;
  top: 89%;
  left: 9%;
}

.box__space {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px;
}

.box__space2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 20px;
}

.box__space3 {
  transform: translateY(40px) scale(1.5);
}

.box1 h1,
.box__on1 h1 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 40px;
  margin-bottom: 10px;
  letter-spacing: 2px;
  max-width: 500px;
}

.box3 h1 {
  font-size: 1rem;
  font-weight: 600;

  margin-top: 10px;
  letter-spacing: 2px;
}

.box2 h1,
.box__on2 h1 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: 2px;
  max-width: 500px;
}

.box2 p,
.box__on2 p {
  font-size: 0.8rem;
  font-weight: 400;
  margin-bottom: 0px;
}

.box1 p,
.box__on1 p,
.box3 p {
  font-size: 0.8rem;
  font-weight: 400;
  margin-bottom: 35px;
  line-height: 35px;
}

.icon2 i {
  font-size: 1.5rem;
  position: relative;
  padding: 10px;
  border-radius: 50%;
  box-shadow: 0px 0px 10px #23ff8f79, 0px 0px 10px #23ff8f79,
    inset 0px 0px 0px 0px #0bda67, inset 0px 0px 5px 0px #0bda67,
    inset 18px 8px 100px rgba(0, 0, 0, 0.5),
    inset 30px 10px 35px 5px rgba(255, 255, 255, 0.2);
  border: 1px solid #a2cbd7;
  margin: 0 5px;
}

.text a {
  padding: 10px 25px;
  font-size: 1.2rem;
  text-decoration: none;
  color: ghostwhite;
  z-index: 1;
  position: relative;
  border-radius: 40px;
  background: #030c09;
  box-shadow: 0px 0px 10px #23ff8f79, 0px 0px 10px #23ff8f79,
    inset 0px 0px 3px 0px #0bda67, inset 0px 0px 5px 0px #0bda67,
    inset 18px 8px 100px rgba(0, 0, 0, 0.5),
    inset 30px 10px 35px 5px rgba(255, 255, 255, 0.2);
  transition: 0.4s;
}

.text a:hover {
  box-shadow: 0px 0px 10px #281c9979, 0px 0px 10px #281c9979,
    inset 0px 0px 3px 0px #0bb1da, inset 0px 0px 5px 0px #0bb1da,
    inset 18px 8px 100px rgba(0, 0, 0, 0.5),
    inset 30px 10px 35px 5px rgba(255, 255, 255, 0.2);
}

.text p {
  margin-bottom: 30px;
}

.footer {
  display: flex;
  justify-content: space-between;
}

.last__center {
  width: 300px;
  height: 400px;
  position: absolute;
  top: 35%;
  left: 11%;
  content: "";
}

.last__center::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 40%;
  height: 30%;
  box-shadow: 0px 0px 70px #23ff8f79, 0 0 10px #23ff8f79,
    inset 3px 0 3px #0bda67, inset 5px 0 5px #0bda67,
    inset 5px 0 10px 3px #0bda67, inset -5px -5px 5px rgba(0, 0, 0, 0.5),
    inset 30px 10px 35px 5px rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.bg__footer {
  position: relative;
}

.bg__footer::before {
  content: "";
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 110%;
  /* box-shadow: 0px 0px 10px #23ff8f79, inset -5px -5px 5px rgba(0, 0, 0, 0.5),
    inset -20px 4px 29px 10px rgba(0, 0, 0, 0.4); */
  z-index: -2;
  padding: 150px 0 0 0;
  box-shadow: none;
  border-top: 1px solid #0bda67;
  padding: 100px;
}

.flex__footer {
  display: flex;
  padding-top: 250px;
}

.col {
  display: flex;
  flex-direction: column;
  margin: 0 75px;
}

.col a {
  color: #ebe6f1c0;
  margin-bottom: 10px;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 400;
  transition: 0.4s;
  position: relative;
}

.col a::after {
  content: "";
  position: absolute;
  top: 56%;
  left: -28%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 20px;
  height: 20px;
  box-shadow: 0px 0px 30px #23ff8f79, 0 0 10px #23ff8f79,
    inset 5px 0 5px #0bda67, inset -5px -5px 5px rgba(0, 0, 0, 0.5),
    inset 10px 10px 10px 5px rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.col-an.col a::after {
  left: -10%;
}

.col a:hover {
  color: ghostwhite;
  transform: scale(1.2);
}

.col a:hover::after {
  background: #13a856;
  box-shadow: 0px 0px 20px #23ff8f79, 0 0 15px #23ff8f79,
    inset 5px 0px 5px rgba(255 255 255 /20%),
    inset 10px 10px 10px 5px rgba(150, 238, 188);
}

.privacy__banner {
  position: fixed;
  bottom: 2%;
  left: 0;
  right: 0;
  background: #1b1b1c;
  padding: 10px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
  border-radius: 8px;
  flex-direction: column;
  text-align: center;
  color: white;
}

.privacy__button {
  background-color: white;
  padding: 3px 8%;
  border-radius: 5px;
  color: black;
  font-size: 15px;
  cursor: pointer;
}

.privacy__link {
  color: green;
}

@media (max-width: 1350px) {
  h3 {
    font-size: 1.4rem;
  }
  h1 {
    font-size: 2.3rem;
  }
  .title h1 {
    font-size: 3.2rem;
  }
  p {
    font-size: 1.1rem;
  }
  section {
    padding: 0 8% 170px 8%;
  }
  .header {
    padding: 40px 8%;
  }
  .box__grid {
    padding: 0 8%;
  }
  .third {
    transform: scale(0.8);
  }

  .last__center {
    left: 2%;
  }

  .text p {
    max-width: none;
  }
}

@media (max-width: 1100px) {
  h1 {
    font-size: 2.1rem;
  }
  .text a {
    font-size: 1rem;
  }
  .home__circle {
    transform: scale(0.9);
  }
  .about__rim {
    flex: 180%;
  }
  .text a:hover::after {
    width: 200px;
  }
  .col {
    margin: 0 60px;
  }
  .center {
    width: 485px !important;
    height: 485px !important;
  }
}

@media (max-width: 970px) {
  h3 {
    font-size: 1.2rem;
  }
  h1 {
    font-size: 1.9rem;
  }
  .title h1 {
    font-size: 2.8rem;
  }
  .title p {
    font-size: 1rem;
  }

  .work {
    text-align: center;
    grid-gap: 100px;
  }

  p {
    font-size: 1rem;
    max-width: none;
  }
  section {
    padding: 0 6% 170px 6%;
  }
  .header {
    padding: 40px 6%;
  }
  .box__grid {
    padding: 0 6%;
  }
  .home__circle {
    transform: scale(0.8);
  }
  .home__circle::before {
    width: 300px;
    height: 300px;
  }

  .icon {
    order: -1px;
  }

  .third {
    display: block;
    margin: 0 auto;
  }
  .card1,
  .card2 {
    width: 100%;
  }
  .work {
    grid-template-columns: repeat(1, 1fr);
  }
  col {
    margin: 0 30px;
  }
  .center2 {
    width: 310px;
    height: 280px;
  }
  .grid__flex {
    flex-direction: column;
  }
  .about__rim {
    display: flex;
    grid-gap: 40px;
    flex-direction: column;
  }
  .rim {
    justify-content: center;
    width: 400px;
  }
}

@media (max-width: 788px) {
  h1 {
    font-size: 1.7rem;
  }
  .title h1 {
    font-size: 2.8rem;
    max-width: none;
    text-align: center;
  }

  .title p {
    font-size: 1rem;
    max-width: none;
    text-align: center;
  }

  section {
    padding: 0 4% 170px 4%;
  }
  .header {
    padding: 40px 4%;
  }
  .box__grid {
    padding: 0 4%;
    grid-template-columns: repeat(1, 1fr);
  }

  .nav li a {
    padding: 10px 20px;
    margin: 0 5px;
  }

  .hero::before {
    width: 250px;
    height: 250px;
  }
  .hero::before {
    width: 200px;
    height: 200px;
  }
  .about {
    grid-template-columns: repeat(1, 1fr);
    text-align: center;
  }

  .home__circle .center {
    width: 75%;
    height: 237%;
  }

  .flex__footer {
    margin-top: 350px;
  }
  .footer {
    text-align: center;
    flex-direction: column;
  }
  .last__center {
    top: 9%;
    left: 50%;
    transform: translateX(-50%);
  }
  .col a {
    font-size: 1rem;
  }
  .col a::after {
    left: -8%;
    width: 15px;
    height: 15px;
  }
  .text {
    text-align: center;
  }
  .icon i {
    font-size: 1.4em;
  }
  .icon::before {
    width: 70px;
    height: 70px;
  }
  .work {
    padding: 0;
  }
  .flex__footer {
    margin-top: 170px;
    flex-direction: column;
    gap: 30px;
  }
  .col {
    width: 250px;
    margin: 0 auto;
  }
  .col a:hover {
    transform: scale(1.1);
  }
  .bg__footer::before {
    box-shadow: none;
    border-top: 1px solid #0bda67;
    padding: 100px;
  }
}

@media (max-width: 650px) {
  .privacy__banner {
    margin: 0 5%;
  }
}

@media (max-width: 550px) {
  h3 {
    font-size: 1rem;
  }

  p {
    font-size: 0.9rem;
  }

  .title h1 {
    font-size: 2.6rem;
  }

  section {
    padding: 0 2% 170px 2%;
  }
  .header {
    padding: 40px 2%;
  }
  .box__grid {
    padding: 0 2%;
  }
  .nav li a {
    padding: 10px 10px;
    margin: 0 5px;
  }
  .text a {
    font-size: 0.8rem;
  }
  .icon::before {
    width: 85px;
    height: 85px;
  }
  .work::before {
    top: 46.3%;
    width: 254%;
  }
  .footer {
    flex-direction: column;
  }

  .third {
    width: 350px;
    height: 350px;
  }
  .box1,
  .box__on1,
  .box2,
  .box__on2,
  .box3 {
    transform: scale(0.7);
  }
  .box2,
  .box__on2 {
    left: 40%;
  }
  .box1 {
    top: -25%;
    left: -20%;
  }
  .box__on1 {
    left: -20%;
  }

  .last__center .center {
    width: 230px !important;
    height: 240px !important;
    margin: 0 auto;
  }
  .bg__footer {
    padding-bottom: 0 !important;
  }
  .about {
    grid-gap: 35px;
    margin-top: 90px;
  }

  .text p {
    font-size: 0.7rem;
  }
}

@media (max-width: 470px) {
  .icon i {
    font-size: 1.2em;
  }
  .icon::before {
    width: 60px;
    height: 60px;
  }
  .rim {
    width: 300px;
  }
  .header {
    flex-wrap: wrap;
  }
  .center {
    width: 400px !important;
    height: 400px !important;
    margin: 0 auto;
  }
  .center2 {
    width: 300px !important;
    height: 300px !important;
    margin: 0 auto;
  }
  /* html {
    overflow-x: hidden;
  } */
}