@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes slide-in-bottom {
  0% {
    transform: translateY(200px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
body {
  margin: 0;
  line-height: normal;
}
.layer-2-1 {
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: transparent;
  position: absolute;
  top: 277px;
  left: 548px;
  width: 824px;
  height: 824px;
  background-image: url(./public/layer21@3x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  display: none;
}
.layer-2-1:hover {
  cursor: default;
  animation: 20s ease 0s infinite normal none rotate-center;
  opacity: 1;
}
.rectangle-div {
  position: absolute;
  top: 6693px;
  left: 0;
  background-color: var(--color-gray-1700);
  width: 1512px;
  height: 908px;
}
.group-icon,
.layer-3-1 {
  position: absolute;
  top: 149.84px;
  left: calc(50% - 295px);
  width: 589px;
  height: 159.31px;
}
.layer-3-1 {
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: transparent;
  top: 408px;
  left: calc(50% - 284px);
  width: 567px;
  height: 567px;
  background-image: url(./public/layer31@3x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}
.layer-3-1:hover {
  animation: 15s ease 0s infinite normal none rotate-center;
  opacity: 1;
}
.home {
  position: relative;
  background-color: var(--color-gray-1600);
  width: 100%;
  height: 1167px;
  overflow: hidden;
}
.popup-overlay {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.chevron-down-icon {
  position: absolute;
  top: 784px;
  left: 680px;
  width: 153px;
  height: 153px;
  overflow: hidden;
  display: none;
}
.rectangle-div4 {
  position: absolute;
  top: 6693px;
  left: 0;
  background-color: var(--color-gray-1700);
  width: 1512px;
  height: 908px;
}
.layer-3-12,
.social-dribbble {
  position: absolute;
  display: none;
}
.social-dribbble {
  top: 7889px;
  left: 898px;
  width: 80px;
  height: 80px;
  overflow: hidden;
}
.layer-3-12 {
  top: 285px;
  left: 562px;
  width: 795px;
  height: 795px;
  object-fit: cover;
}
.tired-man-working-at-a-compute-icon {
  position: absolute;
  top: 0;
  left: calc(50% - 242.5px);
  border-radius: var(--br-lg);
  width: 485px;
  height: 485px;
  object-fit: cover;
}
.about3 {
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: transparent;
  position: absolute;
  top: 382px;
  left: calc(50% - 114.5px);
  font-size: var(--font-size-7xl);
  font-weight: 500;
  font-family: var(--font-playfair-display);
  color: var(--color-gray-1100);
  text-align: left;
  display: inline-block;
}
.about3:hover {
  color: var(--color-tan-100);
}
.group-div5,
.image-29-icon1 {
  position: absolute;
  width: 485px;
  height: 485px;
}
.group-div5 {
  top: 73px;
  left: calc(50% - 243px);
}
.image-29-icon1 {
  top: 0;
  left: 0;
  border-radius: var(--br-lg);
  object-fit: cover;
}
.work4 {
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: transparent;
  position: absolute;
  top: 382px;
  left: 139px;
  font-size: var(--font-size-7xl);
  font-weight: 500;
  font-family: var(--font-playfair-display);
  color: var(--color-gray-1200);
  text-align: left;
  display: inline-block;
}
.work4:hover {
  color: var(--color-gray-300);
}
.group-div6,
.image-30-icon1 {
  position: absolute;
  width: 485px;
  height: 485px;
}
.group-div6 {
  top: 73px;
  left: 120px;
}
.image-30-icon1 {
  top: 0;
  right: 0;
  border-radius: var(--br-lg);
  object-fit: cover;
}
.contact3 {
  cursor: pointer;
  border: 0;
  padding: 0;
  background-color: transparent;
  position: absolute;
  top: 382px;
  right: 81px;
  font-size: var(--font-size-7xl);
  font-weight: 500;
  font-family: var(--font-playfair-display);
  color: var(--color-gray-1300);
  text-align: left;
  display: inline-block;
}
.contact3:hover {
  color: var(--color-gray-400);
}
.group-div7 {
  position: absolute;
  top: 73px;
  right: 120px;
  width: 485px;
  height: 485px;
}
.drawer {
  position: relative;
  background-color: var(--color-black);
  width: 100%;
  height: 631px;
  overflow: hidden;
  opacity: 0;
  max-height: 90%;
}
.drawer.animate {
  animation: 0.25s ease 0s 1 normal forwards slide-in-bottom;
}