.service-card {
  height: 58px;
}
.service-card .img-service {
  width: 45px;
  border-color: rgba(91, 90, 90, 0.4039215686);
  border-width: 0.1px;
  filter: grayscale(1);
  transition: 0.5s all ease;
}
.service-card:hover .img-service {
  filter: grayscale(0);
}

* {
  box-sizing: border-box;
}

#articles {
  height: 100vh;
  background-image: url("../media/images/background-hero.webp");
  background-size: cover;
  background-repeat: no-repeat;
}
#articles .article-box > div:first-child {
  background: linear-gradient(180deg, #393B3E 0%, transparent 80%);
  width: 140px;
  padding: 4px;
}
#articles .article-box > div:first-child img {
  transition: 0.3s;
}
#articles .article-box > div:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background-image: url("../media/images/texture.jpg");
  animation: article-hover-box 400s infinite;
  width: calc(100% - 10px);
  aspect-ratio: 1;
  border-radius: 10px;
}
#articles .article-box > div:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background-image: url(../media/images/roundbadge.png);
  width: 68px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #fff;
  background-position: center;
  z-index: 2;
  background-repeat: no-repeat;
  background-size: 68%;
}
#articles .article-box > div:last-child {
  flex: 2;
}
#articles .article-box > div:last-child > p:first-child a {
  transition: 0.3s;
}
#articles .article-box > div:last-child > p:first-child::before {
  content: "";
  position: absolute;
  top: -100%;
  right: 0;
  height: 2px;
  width: 10px;
  background-color: #F1F1F1;
  border-radius: 30px;
  transition: 0.3s;
}
#articles .article-box > div:last-child > p:last-child {
  transition: 0.3s;
}
#articles .article-box > div:last-child > p:last-child::before {
  content: "";
  position: absolute;
  top: 45%;
  right: 0;
  height: 1px;
  width: 25px;
  background-color: #F1F1F1;
  transition: 0.3s;
}
#articles .article-box:hover {
  cursor: pointer;
}
#articles .article-box:hover > div:first-child img {
  opacity: 0;
}
#articles .article-box:hover > div:last-child > p:first-child a {
  color: #bc8971;
}
#articles .article-box:hover > div:last-child > p:first-child::before {
  background-color: #bc8971;
  width: 35px;
}
#articles .article-box:hover > div:last-child > p:last-child {
  color: #F1F1F1;
}
#articles .article-box:hover > div:last-child > p:last-child::before {
  background-color: #bc8971;
}
#articles .articles-info .articles-option-list img {
  filter: grayscale(1) brightness(0.25);
  transition: 0.3s;
}
#articles .articles-info .articles-option-list span {
  transition: 0.3s;
}
#articles .articles-info .articles-option-list:hover img {
  filter: grayscale(0) brightness(1);
}
#articles .articles-info .articles-option-list:hover span {
  color: #bc8971;
}
#articles .articles-info .right-btn {
  padding-left: 0.5rem;
  padding-right: 4rem;
}
#articles .articles-info .left-btn {
  padding-left: 4rem;
  padding-right: 0.5rem;
}

@keyframes article-hover-box {
  from {
    background-position-x: 0px;
  }
  to {
    background-position-x: 9000px;
  }
}
#workSamples {
  height: 100vh;
}
#workSamples .btn {
  padding-right: 3rem;
}
#workSamples div.div:has(.flow):hover .flow {
  opacity: 1;
  transform: translate(0%, -50%) scale(1);
  transition-delay: 400ms;
}
#workSamples .flow {
  transform: translate(0%, -50%) scale(1.5);
  transition: 200ms linear;
}
#workSamples .flow + div:not(:has(img + img)) img {
  filter: grayscale(1);
  cursor: pointer;
  transition: 200ms 0s linear;
}
#workSamples .flow + div:not(:has(img + img)) img:hover {
  filter: grayscale(0);
}
#workSamples .flow + div::after {
  content: "";
  width: 100%;
  height: 1.5px;
  display: inline-block;
  transform-origin: center center;
  background-image: linear-gradient(45deg, transparent, #bc8971, transparent);
  margin-top: -1.6rem;
  z-index: 1;
  transition: 300ms 0s linear;
}
#workSamples .flow + div:hover::after {
  width: 0%;
}
#workSamples .flow + div::before {
  content: "";
  width: 0%;
  height: 1.5px;
  display: inline-block;
  transform-origin: center center;
  background-image: linear-gradient(45deg, transparent, #bc8971, transparent);
  margin-bottom: -1.6rem;
  z-index: 1;
  transition: 300ms 0s linear;
}
#workSamples .flow + div:hover::before {
  width: 100%;
}
#workSamples .flow + div:has(img + img) {
  position: relative;
}
#workSamples .flow + div:has(img + img) img:nth-child(1) {
  opacity: 1;
}
#workSamples .flow + div:has(img + img) img:nth-child(2) {
  opacity: 1;
  cursor: pointer;
  transition: 200ms 0s linear;
  position: absolute;
  top: 0;
  left: 0;
}
#workSamples .flow + div:has(img + img) img:nth-child(2):hover {
  opacity: 0;
}
#workSamples .box {
  transform-origin: right center;
  background-image: url("../media/images/background-hero.webp");
  background-repeat: no-repeat;
  background-size: cover;
}

.badge .badge-box {
  border-top: none;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}
.badge .badge-box .badge-image {
  transform: translateY(35%);
  transition: all 250ms ease-in-out;
}
.badge .badge-box .badge-image:hover {
  transform: translateY(55%);
}
.badge .shadow {
  background-image: radial-gradient(circle at center, #bc8971 0, transparent 70%);
  bottom: 0px;
  left: 0px;
  opacity: 0.2;
  transition: all 250ms ease-in-out;
}
.badge:hover .shadow {
  opacity: 0.4;
}
.badge:hover .badge-image {
  transform: translateY(50%);
}

.desktop-menu .nav-item .nav-icon {
  width: 17px;
  height: fit-content;
  opacity: 0;
  transform: translateY(-60%);
  transition: all 250ms ease-in-out;
}
.desktop-menu .nav-item .new-post {
  position: relative;
}
.desktop-menu .nav-item .new-post::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: #bc8971;
  border-radius: 50%;
  top: -7;
  right: 0;
  transform: translateX(0px);
  opacity: 1;
  transition: 200ms ease-in-out;
}
.desktop-menu .nav-item .nav-link {
  transition: all 250ms ease-in-out;
}
.desktop-menu .nav-item:hover .nav-link {
  color: #bc8971;
}
.desktop-menu .nav-item:hover .nav-icon {
  opacity: 1;
  transform: translateY(0);
}
.desktop-menu .nav-item:hover .new-post::after {
  transform: translateX(-10px);
  opacity: 0;
}

header {
  display: flex;
  grid-template-columns: 1fr 5fr 1fr;
  justify-items: center;
}
header > div:first-child {
  align-items: start;
  width: 100%;
  flex-direction: column;
}
header > div:last-child {
  justify-content: end;
  width: 100%;
  flex-direction: column;
}
header .header-desktop-menu-nav {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
}

.sidebar-menu {
  top: 55px;
  transform: rotateX(90deg);
  transition: all 250ms ease-in-out;
  width: 200px;
  background-color: #000;
  border-color: #120E0C;
}
.sidebar-menu .side .side-image {
  filter: grayscale(1);
  transition: all 250ms ease-in-out;
}
.sidebar-menu .side .side-menu .side-link {
  transition: all 250ms ease-in-out;
  margin-bottom: 0.4rem;
}
.sidebar-menu .side .side-menu .en-side-link {
  transition: all 250ms ease-in-out;
}
.sidebar-menu .side:hover .side-image {
  filter: grayscale(0);
}
.sidebar-menu .side:hover .side-link {
  color: #bc8971;
}
.sidebar-menu .side:hover .en-side-link {
  color: #FFFFFF;
}
.sidebar-menu:hover {
  transform: rotateX(0deg);
}

.toggle-menu:hover + .sidebar-menu {
  transform: rotateX(0deg);
}

.logo-title {
  transform: translateY(-50px);
  opacity: 0;
  animation-timeline: view(block 0% 89%);
  animation-name: show-logo-title-scroll;
  animation-fill-mode: both;
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
  animation-timing-function: linear;
}

.logo-icon {
  z-index: 2;
  cursor: pointer;
}

.logo-title-2 {
  transition: 0.6s linear, opacity 0.6s 0.1s linear;
  position: absolute;
  top: 30%;
  right: 50%;
  transform: translateX(50%);
  opacity: 0;
}

.logo-icon:hover ~ .logo-title-2 {
  top: 38%;
  opacity: 1;
}

@keyframes show-logo-title-hover {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  50% {
    transform: translateY(-25px);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes show-logo-title-scroll {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-30);
    opacity: 0;
  }
}
@-moz-document url-prefix() {
  .logo-title {
    transform: translateY(0);
    opacity: 1;
    transition: 0.5s;
    animation: show-logo-firefox 0.5s 1s forwards;
  }
  .logo-icon:hover ~ .logo-title {
    opacity: 0;
  }
}
@keyframes show-logo-firefox {
  from {
    transform: translateY(0px);
    opacity: 1;
  }
  to {
    transform: translateY(-30px);
    opacity: 0;
  }
}
@keyframes logo-firefox-hover {
  from {
    transform: translateY(-30px);
    opacity: 0;
  }
  to {
    transform: translateY(0px);
    opacity: 1;
  }
}
@media screen and (max-width: 1024px) {
  #openMenu:checked ~ .menu-overly .circle {
    direction: ltr;
  }
  #openMenu:checked ~ .menu-overly .circle ul li:nth-child(1) {
    animation: menu-item1 1.5s 1s forwards;
  }
  #openMenu:checked ~ .menu-overly .circle ul li:nth-child(1) a span {
    animation: show-menu-text 0.5s 2.2s forwards;
  }
  .circle ul li {
    opacity: 0;
    transform: rotate(0deg);
  }
  .circle ul li:nth-child(1) a {
    transform-origin: left center;
    transform: rotate(-45deg);
  }
  .circle ul li:nth-child(1) a span {
    opacity: 0;
  }
  @keyframes menu-item1 {
    0% {
      opacity: 0;
      transform: rotate(0deg);
    }
    50% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
      transform: rotate(45deg);
    }
  }
  #openMenu:checked ~ .menu-overly .circle {
    direction: ltr;
  }
  #openMenu:checked ~ .menu-overly .circle ul li:nth-child(2) {
    animation: menu-item2 1.5s 1s forwards;
  }
  #openMenu:checked ~ .menu-overly .circle ul li:nth-child(2) a span {
    animation: show-menu-text 0.5s 2.4s forwards;
  }
  .circle ul li {
    opacity: 0;
    transform: rotate(0deg);
  }
  .circle ul li:nth-child(2) a {
    transform-origin: left center;
    transform: rotate(-35deg);
  }
  .circle ul li:nth-child(2) a span {
    opacity: 0;
  }
  @keyframes menu-item2 {
    0% {
      opacity: 0;
      transform: rotate(0deg);
    }
    50% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
      transform: rotate(35deg);
    }
  }
  #openMenu:checked ~ .menu-overly .circle {
    direction: ltr;
  }
  #openMenu:checked ~ .menu-overly .circle ul li:nth-child(3) {
    animation: menu-item3 1.5s 1s forwards;
  }
  #openMenu:checked ~ .menu-overly .circle ul li:nth-child(3) a span {
    animation: show-menu-text 0.5s 2.6s forwards;
  }
  .circle ul li {
    opacity: 0;
    transform: rotate(0deg);
  }
  .circle ul li:nth-child(3) a {
    transform-origin: left center;
    transform: rotate(-25deg);
  }
  .circle ul li:nth-child(3) a span {
    opacity: 0;
  }
  @keyframes menu-item3 {
    0% {
      opacity: 0;
      transform: rotate(0deg);
    }
    50% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
      transform: rotate(25deg);
    }
  }
  #openMenu:checked ~ .menu-overly .circle {
    direction: ltr;
  }
  #openMenu:checked ~ .menu-overly .circle ul li:nth-child(4) {
    animation: menu-item4 1.5s 1s forwards;
  }
  #openMenu:checked ~ .menu-overly .circle ul li:nth-child(4) a span {
    animation: show-menu-text 0.5s 2.8s forwards;
  }
  .circle ul li {
    opacity: 0;
    transform: rotate(0deg);
  }
  .circle ul li:nth-child(4) a {
    transform-origin: left center;
    transform: rotate(-15deg);
  }
  .circle ul li:nth-child(4) a span {
    opacity: 0;
  }
  @keyframes menu-item4 {
    0% {
      opacity: 0;
      transform: rotate(0deg);
    }
    50% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
      transform: rotate(15deg);
    }
  }
  #openMenu:checked ~ .menu-overly .circle {
    direction: ltr;
  }
  #openMenu:checked ~ .menu-overly .circle ul li:nth-child(5) {
    animation: menu-item5 1.5s 1s forwards;
  }
  #openMenu:checked ~ .menu-overly .circle ul li:nth-child(5) a span {
    animation: show-menu-text 0.5s 3s forwards;
  }
  .circle ul li {
    opacity: 0;
    transform: rotate(0deg);
  }
  .circle ul li:nth-child(5) a {
    transform-origin: left center;
    transform: rotate(-5deg);
  }
  .circle ul li:nth-child(5) a span {
    opacity: 0;
  }
  @keyframes menu-item5 {
    0% {
      opacity: 0;
      transform: rotate(0deg);
    }
    50% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
      transform: rotate(5deg);
    }
  }
  #openMenu:checked ~ .menu-overly .circle {
    direction: ltr;
  }
  #openMenu:checked ~ .menu-overly .circle ul li:nth-child(6) {
    animation: menu-item6 1.5s 1s forwards;
  }
  #openMenu:checked ~ .menu-overly .circle ul li:nth-child(6) a span {
    animation: show-menu-text 0.5s 3.2s forwards;
  }
  .circle ul li {
    opacity: 0;
    transform: rotate(0deg);
  }
  .circle ul li:nth-child(6) a {
    transform-origin: left center;
    transform: rotate(5deg);
  }
  .circle ul li:nth-child(6) a span {
    opacity: 0;
  }
  @keyframes menu-item6 {
    0% {
      opacity: 0;
      transform: rotate(0deg);
    }
    50% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
      transform: rotate(-5deg);
    }
  }
  #openMenu:checked ~ .menu-overly .circle {
    direction: ltr;
  }
  #openMenu:checked ~ .menu-overly .circle ul li:nth-child(7) {
    animation: menu-item7 1.5s 1s forwards;
  }
  #openMenu:checked ~ .menu-overly .circle ul li:nth-child(7) a span {
    animation: show-menu-text 0.5s 3.4s forwards;
  }
  .circle ul li {
    opacity: 0;
    transform: rotate(0deg);
  }
  .circle ul li:nth-child(7) a {
    transform-origin: left center;
    transform: rotate(15deg);
  }
  .circle ul li:nth-child(7) a span {
    opacity: 0;
  }
  @keyframes menu-item7 {
    0% {
      opacity: 0;
      transform: rotate(0deg);
    }
    50% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
      transform: rotate(-15deg);
    }
  }
  #openMenu:checked ~ .menu-overly .circle {
    direction: ltr;
  }
  #openMenu:checked ~ .menu-overly .circle ul li:nth-child(8) {
    animation: menu-item8 1.5s 1s forwards;
  }
  #openMenu:checked ~ .menu-overly .circle ul li:nth-child(8) a span {
    animation: show-menu-text 0.5s 3.6s forwards;
  }
  .circle ul li {
    opacity: 0;
    transform: rotate(0deg);
  }
  .circle ul li:nth-child(8) a {
    transform-origin: left center;
    transform: rotate(25deg);
  }
  .circle ul li:nth-child(8) a span {
    opacity: 0;
  }
  @keyframes menu-item8 {
    0% {
      opacity: 0;
      transform: rotate(0deg);
    }
    50% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
      transform: rotate(-25deg);
    }
  }
  #openMenu:checked ~ .menu-overly .circle {
    direction: ltr;
  }
  #openMenu:checked ~ .menu-overly .circle ul li:nth-child(9) {
    animation: menu-item9 1.5s 1s forwards;
  }
  #openMenu:checked ~ .menu-overly .circle ul li:nth-child(9) a span {
    animation: show-menu-text 0.5s 3.8s forwards;
  }
  .circle ul li {
    opacity: 0;
    transform: rotate(0deg);
  }
  .circle ul li:nth-child(9) a {
    transform-origin: left center;
    transform: rotate(35deg);
  }
  .circle ul li:nth-child(9) a span {
    opacity: 0;
  }
  @keyframes menu-item9 {
    0% {
      opacity: 0;
      transform: rotate(0deg);
    }
    50% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
      transform: rotate(-35deg);
    }
  }
  #openMenu:checked ~ .menu-overly .circle {
    direction: ltr;
  }
  #openMenu:checked ~ .menu-overly .circle ul li:nth-child(10) {
    animation: menu-item10 1.5s 1s forwards;
  }
  #openMenu:checked ~ .menu-overly .circle ul li:nth-child(10) a span {
    animation: show-menu-text 0.5s 4s forwards;
  }
  .circle ul li {
    opacity: 0;
    transform: rotate(0deg);
  }
  .circle ul li:nth-child(10) a {
    transform-origin: left center;
    transform: rotate(45deg);
  }
  .circle ul li:nth-child(10) a span {
    opacity: 0;
  }
  @keyframes menu-item10 {
    0% {
      opacity: 0;
      transform: rotate(0deg);
    }
    50% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
      transform: rotate(-45deg);
    }
  }
  header {
    overflow: hidden;
    justify-items: center;
    display: flex !important;
    justify-content: space-between;
  }
  header .header-desktop-menu-nav {
    display: flex;
    width: 100%;
  }
  header .header-desktop-menu-nav ul {
    width: 50% !important;
  }
  header .badge {
    position: fixed;
    bottom: 35px;
    left: 35px;
  }
  header .badge:hover img {
    transform: translateY(33%) !important;
  }
  header .badge .shadow {
    background-image: linear-gradient(to top, #bc8971 0, transparent 70%);
    bottom: -42px;
    left: 6px;
    opacity: 0.4;
    width: 82%;
    height: 105%;
    border-radius: 50% !important;
    z-index: -1;
    filter: blur(9px);
  }
  header .badge .b adge-box {
    border: none;
  }
  header .badge .b adge-box .badge-image:hover {
    transform: translateY(35%);
  }
  header .badge .b adge-box img {
    width: 35px;
  }
  header .logo {
    cursor: pointer;
    direction: ltr;
  }
  header .logo div {
    transition: 0.7s ease-in-out;
    transform-origin: 4px -17px;
  }
  header .logo:hover div {
    transform: rotate(90deg);
  }
  header nav {
    position: relative;
    width: fit-content;
  }
  header nav #openMenu:checked ~ .menu-overly {
    transform: translateX(0%);
  }
  header nav #openMenu:checked ~ .menu-overly .close-menu-icon {
    animation: show-close-icon 0.5s 1s ease-in-out forwards;
  }
  header nav .close-menu-icon {
    opacity: 0;
  }
  header nav .close-menu-icon > div {
    width: 68px;
  }
  header nav .open-menu-icon {
    cursor: pointer;
  }
  header nav .open-menu-icon > div {
    width: 68px;
  }
  header nav .open-menu-icon:hover img, header nav .open-menu-icon:hover i {
    box-shadow: 0 0 37px 6px #45332A;
  }
  header nav .open-menu-icon img, header nav .open-menu-icon i {
    box-shadow: 0 0 40px #45332A;
    transition: 0.2s;
  }
  header nav .menu-overly {
    background: radial-gradient(circle, #000000 40%, rgba(0, 0, 0, 0) 100%);
    background-size: 350%;
    top: 0;
    right: 0;
    backdrop-filter: blur(4px) grayscale(1);
    justify-content: right;
    display: flex;
    transition: 0.5s ease;
    transform: translateX(100%);
  }
  header nav .menu-overly .open-menu-icon {
    right: 10px;
    top: 10px;
    cursor: pointer;
    z-index: 1;
  }
  header nav .menu-overly .open-menu-icon div {
    width: 75px;
    cursor: pointer;
  }
  header nav .menu-overly .open-menu-icon div i {
    display: flex;
  }
  header nav .menu-overly .circle {
    height: 100vh;
    position: relative;
    aspect-ratio: 1/1;
    border-bottom-left-radius: 1000px;
    border-top-left-radius: 1000px;
    transform: translateX(60%);
    background: conic-gradient(transparent 50%, #bc8971 75%, transparent 95%);
  }
  header nav .menu-overly .circle::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: calc(100% - 1px);
    height: calc(100% - 1px);
    background-color: #000;
    border-bottom-left-radius: 1000px;
    border-top-left-radius: 1000px;
  }
  header nav .menu-overly .circle ul {
    position: relative;
    transform: translateX(-15px) rotateZ(0deg);
    z-index: 99;
  }
  header nav .menu-overly .circle ul li {
    position: absolute;
    transform-origin: right center;
  }
  header nav .menu-overly .circle ul li div {
    box-shadow: 0 0 5px 1px #45332A;
  }
  @keyframes show-menu-text {
    0% {
      opacity: 0;
      transform: translateX(-10px);
    }
    100% {
      opacity: 1;
      transform: translateX(5px);
    }
  }
}
@keyframes show-close-icon {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
input {
  display: none;
}

@keyframes arrow {
  0% {
    transform: translateX(-30%) translateY(-80%);
  }
  50% {
    transform: translateX(-30%) translateY(-100%);
  }
  100% {
    transform: translateX(-30%) translateY(-10%);
  }
}
.left-menu {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 999;
}
.left-menu .name {
  transition: 0.3s;
}
.left-menu .menu-content {
  width: 240px;
  aspect-ratio: 1;
  position: relative;
}
.left-menu .menu-content .before {
  width: 18px;
  height: 25px;
  background-position: center;
  background-size: contain;
  transform: rotate(180deg) translateX(20%);
  position: absolute;
  left: 120px;
  top: 0;
  z-index: 100000;
  background-image: url("../media/images/arrow1.png");
  transition: all 0.5s ease;
}
.left-menu .menu-content .before:hover {
  box-shadow: 0 0 20px rgb(142, 138, 138);
  background-color: rgba(142, 138, 138, 0.3);
}
.left-menu .menu-content .after {
  width: 18px;
  height: 25px;
  background-position: center;
  background-size: contain;
  transform: translateX(-30%) translateY(-100%);
  animation: arrow alternate ease-in-out 2s both infinite;
  position: absolute;
  left: 120px;
  top: 240px;
  z-index: 100000;
  background-image: url("../media/images/arrow1.png");
  transition: all 0.5s ease;
}
.left-menu .menu-content .after:hover {
  box-shadow: 0 0 20px rgb(142, 138, 138);
  background-color: rgba(142, 138, 138, 0.3);
}
.left-menu .menu-content .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  cursor: pointer;
  transform: translate(-50%, -50%);
  width: 65px;
  aspect-ratio: 1/1;
  margin: 5px;
  opacity: 1 !important;
  z-index: 1000000000;
}
.left-menu .menu-content .icon img {
  box-shadow: 0 0 40px #45332A;
  transition: all 1s ease;
}
.left-menu .menu-content .icon:hover img {
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.225);
}
.left-menu .menu-content .icon:hover ~ .circle {
  opacity: 1;
}
.left-menu .menu-content .icon:hover ~ .circle .container {
  opacity: 1;
}
.left-menu .menu-content .icon:hover ~ .circle .container .box {
  position: relative;
  opacity: 0.6;
  transition: 0.5s all linear;
}
.left-menu .menu-content .icon:hover ~ .circle .container .box:hover::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  background: #B7977F;
}
.left-menu .menu-content .icon:hover ~ .circle .container:nth-child(1) {
  transform: rotate(222.75deg);
  opacity: 1;
  transition: transform 0.1111111111s, opacity 0.1111111111s 0.1111111111s;
}
.left-menu .menu-content .icon:hover ~ .circle .container:nth-child(2) {
  transform: rotate(233.8875deg);
  opacity: 1;
  transition: transform 0.2222222222s, opacity 0.2222222222s 0.2222222222s;
}
.left-menu .menu-content .icon:hover ~ .circle .container:nth-child(3) {
  transform: rotate(245.025deg);
  opacity: 1;
  transition: transform 0.3333333333s, opacity 0.3333333333s 0.3333333333s;
}
.left-menu .menu-content .icon:hover ~ .circle .container:nth-child(4) {
  transform: rotate(256.1625deg);
  opacity: 1;
  transition: transform 0.4444444444s, opacity 0.4444444444s 0.4444444444s;
}
.left-menu .menu-content .icon:hover ~ .circle .container:nth-child(5) {
  transform: rotate(267.3deg);
  opacity: 1;
  transition: transform 0.5555555556s, opacity 0.5555555556s 0.5555555556s;
}
.left-menu .menu-content .icon:hover ~ .circle .container:nth-child(6) {
  transform: rotate(278.4375deg);
  opacity: 1;
  transition: transform 0.6666666667s, opacity 0.6666666667s 0.6666666667s;
}
.left-menu .menu-content .icon:hover ~ .circle .container:nth-child(7) {
  transform: rotate(289.575deg);
  opacity: 1;
  transition: transform 0.7777777778s, opacity 0.7777777778s 0.7777777778s;
}
.left-menu .menu-content .icon:hover ~ .circle .container:nth-child(8) {
  transform: rotate(300.7125deg);
  opacity: 1;
  transition: transform 0.8888888889s, opacity 0.8888888889s 0.8888888889s;
}
.left-menu .menu-content .icon:hover ~ .circle .container:nth-child(9) {
  transform: rotate(311.85deg);
  opacity: 1;
  transition: transform 1s, opacity 1s 1s;
}
.left-menu .menu-content .icon:hover ~ .circle {
  transform: rotate(0deg);
}
.left-menu .menu-content .circle {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0;
  margin: 0;
  opacity: 0;
  transition: 0.3s all linear;
}
.left-menu .menu-content .circle:hover {
  transform: rotate(0deg);
  opacity: 1;
}
.left-menu .menu-content .circle:hover .container .box {
  opacity: 0.6;
  position: relative;
  border-radius: 2px;
}
.left-menu .menu-content .circle:hover .container .box:hover {
  opacity: 1;
}
.left-menu .menu-content .circle:hover .container .box::after {
  transition: 0.2s ease-in;
}
.left-menu .menu-content .circle:hover .container .box:hover::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  background: #B7977F;
  border-radius: 2px;
}
.left-menu .menu-content .circle:hover .container .box:hover + .name {
  opacity: 1;
}
.left-menu .menu-content .circle:hover .container:nth-child(1) {
  transform: rotate(222.75deg);
  opacity: 1;
  transition: transform 0.1111111111s, opacity 0.1111111111s 0.1111111111s;
}
.left-menu .menu-content .circle:hover .container:nth-child(2) {
  transform: rotate(233.8875deg);
  opacity: 1;
  transition: transform 0.2222222222s, opacity 0.2222222222s 0.2222222222s;
}
.left-menu .menu-content .circle:hover .container:nth-child(3) {
  transform: rotate(245.025deg);
  opacity: 1;
  transition: transform 0.3333333333s, opacity 0.3333333333s 0.3333333333s;
}
.left-menu .menu-content .circle:hover .container:nth-child(4) {
  transform: rotate(256.1625deg);
  opacity: 1;
  transition: transform 0.4444444444s, opacity 0.4444444444s 0.4444444444s;
}
.left-menu .menu-content .circle:hover .container:nth-child(5) {
  transform: rotate(267.3deg);
  opacity: 1;
  transition: transform 0.5555555556s, opacity 0.5555555556s 0.5555555556s;
}
.left-menu .menu-content .circle:hover .container:nth-child(6) {
  transform: rotate(278.4375deg);
  opacity: 1;
  transition: transform 0.6666666667s, opacity 0.6666666667s 0.6666666667s;
}
.left-menu .menu-content .circle:hover .container:nth-child(7) {
  transform: rotate(289.575deg);
  opacity: 1;
  transition: transform 0.7777777778s, opacity 0.7777777778s 0.7777777778s;
}
.left-menu .menu-content .circle:hover .container:nth-child(8) {
  transform: rotate(300.7125deg);
  opacity: 1;
  transition: transform 0.8888888889s, opacity 0.8888888889s 0.8888888889s;
}
.left-menu .menu-content .circle:hover .container:nth-child(9) {
  transform: rotate(311.85deg);
  opacity: 1;
  transition: transform 1s, opacity 1s 1s;
}
.left-menu .menu-content .circle .container {
  position: absolute;
  top: 0;
  left: 120px;
  width: 9px;
  height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  box-sizing: border-box;
  border: transparent 10px solid;
  gap: 6px;
  background: rgba(49, 9, 207, 0);
  transform-origin: center center;
}
.left-menu .menu-content .circle .container:nth-child(1) {
  opacity: 0;
  transform: rotate(215deg);
  transition: all 0.055s 0.2s;
}
.left-menu .menu-content .circle .container:nth-child(2) {
  opacity: 0;
  transform: rotate(215deg);
  transition: all 0.055s 0.2s;
}
.left-menu .menu-content .circle .container:nth-child(3) {
  opacity: 0;
  transform: rotate(215deg);
  transition: all 0.055s 0.2s;
}
.left-menu .menu-content .circle .container:nth-child(4) {
  opacity: 0;
  transform: rotate(215deg);
  transition: all 0.055s 0.2s;
}
.left-menu .menu-content .circle .container:nth-child(5) {
  opacity: 0;
  transform: rotate(215deg);
  transition: all 0.055s 0.2s;
}
.left-menu .menu-content .circle .container:nth-child(6) {
  opacity: 0;
  transform: rotate(215deg);
  transition: all 0.055s 0.2s;
}
.left-menu .menu-content .circle .container:nth-child(7) {
  opacity: 0;
  transform: rotate(215deg);
  transition: all 0.055s 0.2s;
}
.left-menu .menu-content .circle .container:nth-child(8) {
  opacity: 0;
  transform: rotate(215deg);
  transition: all 0.055s 0.2s;
}
.left-menu .menu-content .circle .container:nth-child(9) {
  opacity: 0;
  transform: rotate(215deg);
  transition: all 0.055s 0.2s;
}
.left-menu .menu-content .circle .container .box {
  width: 9px;
  height: 12px;
  border-radius: 2px;
  opacity: 0;
  background: #8C6A58;
  transition: 0.2s;
}
.left-menu .menu-content .circle .container .box::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  background: #8C6A58;
  transition: 0.3s all linear;
}
.left-menu .menu-content .circle .container:nth-child(1):has(.box:hover) ~ .name-circle .name-container:nth-child(1) .name {
  opacity: 1;
}
.left-menu .menu-content .circle .container:nth-child(2):has(.box:hover) ~ .name-circle .name-container:nth-child(2) .name {
  opacity: 1;
}
.left-menu .menu-content .circle .container:nth-child(3):has(.box:hover) ~ .name-circle .name-container:nth-child(3) .name {
  opacity: 1;
}
.left-menu .menu-content .circle .container:nth-child(4):has(.box:hover) ~ .name-circle .name-container:nth-child(4) .name {
  opacity: 1;
}
.left-menu .menu-content .circle .container:nth-child(5):has(.box:hover) ~ .name-circle .name-container:nth-child(5) .name {
  opacity: 1;
}
.left-menu .menu-content .circle .container:nth-child(6):has(.box:hover) ~ .name-circle .name-container:nth-child(6) .name {
  opacity: 1;
}
.left-menu .menu-content .circle .container:nth-child(7):has(.box:hover) ~ .name-circle .name-container:nth-child(7) .name {
  opacity: 1;
}
.left-menu .menu-content .circle .container:nth-child(8):has(.box:hover) ~ .name-circle .name-container:nth-child(8) .name {
  opacity: 1;
}
.left-menu .menu-content .circle .container:nth-child(9):has(.box:hover) ~ .name-circle .name-container:nth-child(9) .name {
  opacity: 1;
}
.left-menu .menu-content .name-circle .name-container .name {
  opacity: 0;
  position: absolute;
  bottom: 0;
  left: 120px;
  transform: translateX(-40%) translateY(-30px);
}

pre {
  margin-top: -60px;
}

pre + img {
  transform: translate(0%, -50%);
}

.gradient-back-name {
  background-image: linear-gradient(#0E0E0E 0%, #030303 75%);
}
.gradient-back-name span {
  animation-timeline: view(block 41% 1%);
  animation-name: text-animation-wave;
  animation-fill-mode: both;
  animation-duration: 10s;
  animation-timing-function: linear;
  -moz-animation: text-animation 0s 0s linear;
}

@keyframes text-animation-wave {
  0% {
    transform: perspective(10px) rotateX(10deg) translate(-5%, -100%);
    opacity: 0;
  }
  100% {
    transform: perspective(10px) rotateX(0deg) translate(0%, 0%);
    opacity: 1;
  }
}
@keyframes text-media-animation-opacity {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes text-title-media-animation {
  0% {
    transform: translateY(110%);
    opacity: 0;
  }
  50% {
    transform: translateY(10%);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes text-subtitle-media-animation {
  0% {
    transform: translateY(110%);
    opacity: 0;
  }
  50% {
    transform: translateY(10%);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
.child:nth-child(1) {
  transform: rotate(-25deg);
}
.child:nth-child(1):hover ~ .circle-cursor .cursor {
  rotate: -25deg !important;
}
.child:nth-child(1):hover ~ .circle-cursor .term-image1 {
  opacity: 1 !important;
  z-index: 12;
}
.child:nth-child(1):not(:hover) ~ .circle-cursor .term-image1 {
  opacity: 0;
}
.child:nth-child(1):hover ~ .circle-cursor .term-image1 .image-icon > img {
  animation: service-icon 2s alternate infinite;
  top: 0px;
  opacity: 1;
}
.child:nth-child(1):hover ~ .circle-cursor .term-image1 .service-title h4 {
  opacity: 1 !important;
}

.term-image1 .image-icon > img, .term-image2 .image-icon > img, .term-image3 .image-icon > img {
  position: relative;
  top: -70px;
  opacity: 0;
  transition: 2s;
}

.termItemsInput1:checked ~ .parent-circle .circle-cursor .cursor {
  rotate: -25deg;
}

.termItemsInput1:checked ~ .parent-circle .circle-cursor .term-image1 {
  opacity: 1;
}

.termItemsInput1:checked ~ .parent-circle .circle-cursor .term-image1 .service-title h4 {
  opacity: 1 !important;
}

.termItemsInput1:checked ~ .parent-circle .circle-cursor .term-image1 .image-icon > img {
  animation: service-icon 2s alternate infinite;
  top: 0px;
  opacity: 1;
}

.child:nth-child(2) {
  transform: rotate(0deg);
}
.child:nth-child(2):hover ~ .circle-cursor .cursor {
  rotate: 0deg !important;
}
.child:nth-child(2):hover ~ .circle-cursor .term-image2 {
  opacity: 1 !important;
  z-index: 24;
}
.child:nth-child(2):not(:hover) ~ .circle-cursor .term-image2 {
  opacity: 0;
}
.child:nth-child(2):hover ~ .circle-cursor .term-image2 .image-icon > img {
  animation: service-icon 2s alternate infinite;
  top: 0px;
  opacity: 1;
}
.child:nth-child(2):hover ~ .circle-cursor .term-image2 .service-title h4 {
  opacity: 1 !important;
}

.term-image1 .image-icon > img, .term-image2 .image-icon > img, .term-image3 .image-icon > img {
  position: relative;
  top: -70px;
  opacity: 0;
  transition: 2s;
}

.termItemsInput2:checked ~ .parent-circle .circle-cursor .cursor {
  rotate: 0deg;
}

.termItemsInput2:checked ~ .parent-circle .circle-cursor .term-image2 {
  opacity: 1;
}

.termItemsInput2:checked ~ .parent-circle .circle-cursor .term-image2 .service-title h4 {
  opacity: 1 !important;
}

.termItemsInput2:checked ~ .parent-circle .circle-cursor .term-image2 .image-icon > img {
  animation: service-icon 2s alternate infinite;
  top: 0px;
  opacity: 1;
}

.child:nth-child(3) {
  transform: rotate(25deg);
}
.child:nth-child(3):hover ~ .circle-cursor .cursor {
  rotate: 25deg !important;
}
.child:nth-child(3):hover ~ .circle-cursor .term-image3 {
  opacity: 1 !important;
  z-index: 36;
}
.child:nth-child(3):not(:hover) ~ .circle-cursor .term-image3 {
  opacity: 0;
}
.child:nth-child(3):hover ~ .circle-cursor .term-image3 .image-icon > img {
  animation: service-icon 2s alternate infinite;
  top: 0px;
  opacity: 1;
}
.child:nth-child(3):hover ~ .circle-cursor .term-image3 .service-title h4 {
  opacity: 1 !important;
}

.term-image1 .image-icon > img, .term-image2 .image-icon > img, .term-image3 .image-icon > img {
  position: relative;
  top: -70px;
  opacity: 0;
  transition: 2s;
}

.termItemsInput3:checked ~ .parent-circle .circle-cursor .cursor {
  rotate: 25deg;
}

.termItemsInput3:checked ~ .parent-circle .circle-cursor .term-image3 {
  opacity: 1;
}

.termItemsInput3:checked ~ .parent-circle .circle-cursor .term-image3 .service-title h4 {
  opacity: 1 !important;
}

.termItemsInput3:checked ~ .parent-circle .circle-cursor .term-image3 .image-icon > img {
  animation: service-icon 2s alternate infinite;
  top: 0px;
  opacity: 1;
}

@keyframes show-term-image {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0px);
    opacity: 1;
  }
}
@keyframes hover-show-term-image {
  from {
    top: -70px;
    opacity: 0;
  }
  to {
    top: 0px;
    opacity: 1;
  }
}
#termItems {
  height: 110vh;
  background-image: url("../media/images/background-hero.webp");
  background-size: cover;
  background-repeat: no-repeat;
}
@media screen and (max-width: 1024px) {
  #termItems {
    height: fit-content;
    overflow-x: hidden;
    overflow-y: hidden;
  }
  #termItems .circle-cursor .cursor, #termItems .circle-cursor .service-icon {
    width: 350px !important;
    height: 350px !important;
    rotate: 0deg;
  }
}
@media screen and (max-width: 1024px) and (max-width: 767px) {
  #termItems .circle-cursor .cursor, #termItems .circle-cursor .service-icon {
    width: 250px !important;
    height: 250px !important;
  }
}
@media screen and (max-width: 1024px) {
  #termItems .circle-cursor::after, #termItems .circle-cursor::before {
    display: block !important;
  }
  #termItems .circle-cursor .responsive-cursor {
    display: flex !important;
  }
  #termItems .site-info {
    display: flex;
    align-items: center;
  }
  #termItems .site-info h3 {
    color: #bc8971;
  }
}
#termItems .responsive-cursor {
  display: none !important;
}
#termItems .container:last-child > p {
  line-height: 2rem;
}
#termItems .container:last-child .site-option-list span, #termItems .container:last-child .site-option-list img {
  transition: 0.2s;
}
#termItems .container:last-child .site-option-list img {
  filter: grayscale(1) brightness(0.25);
}
#termItems .container:last-child .site-option-list:hover span {
  color: #bc8971;
}
#termItems .container:last-child .site-option-list:hover img {
  filter: grayscale(0) brightness(1);
}
#termItems .site-info > div {
  position: absolute;
  transform: rotateY(90deg);
  padding-left: 7rem;
}
#termItems .site-info > div > p {
  line-height: 2;
}
@media screen and (max-width: 1024px) {
  #termItems .site-info > div {
    position: unset;
  }
}
@media screen and (max-width: 767px) {
  #termItems .site-info > div {
    padding: 0rem;
  }
}
#termItems #web-design-company:checked ~ .site-info .web-design-company {
  transform: rotateY(0deg);
  transition: 0.5s;
}
#termItems #marketing:checked ~ .site-info .marketing {
  transform: rotateY(0deg);
  transition: 0.5s;
}
#termItems #web-design-sell:checked ~ .site-info .web-design-sell {
  transform: rotateY(0deg);
  transition: 0.5s;
}
#termItems #web-design-sell:checked ~ .parent-circle > div > div .icon-service-1::before {
  opacity: 0.5;
  transform: scale(1.1);
}
#termItems #web-design-sell:checked ~ .parent-circle > div > div .icon-service-1 .icon-back {
  border-color: #bc8971;
}
#termItems #web-design-company:checked ~ .parent-circle > div > div .icon-service-2::before {
  opacity: 0.5;
  transform: scale(1.1);
}
#termItems #web-design-company:checked ~ .parent-circle > div > div .icon-service-2 .icon-back {
  border-color: #bc8971;
}
#termItems #marketing:checked ~ .parent-circle > div > div .icon-service-3::before {
  opacity: 0.5;
  transform: scale(1.1);
}
#termItems #marketing:checked ~ .parent-circle > div > div .icon-service-3 .icon-back {
  border-color: #bc8971;
}
#termItems .image-icon {
  position: relative;
  background-color: #080808;
  border: 19px solid #080808;
}
#termItems .image-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 90%;
  aspect-ratio: 1/1;
  background-color: #0D0D0D;
  border-radius: 50%;
  z-index: 9;
}
#termItems .image-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 80%;
  aspect-ratio: 1/1;
  background-image: linear-gradient(1800deg, #0E0E0E 10%, #030303 90%);
  border-radius: 50%;
  z-index: 10;
}
#termItems .image-icon img {
  z-index: 11;
}
#termItems .circle-cursor {
  transition: all 350ms ease-in-out;
  position: relative;
}
#termItems .circle-cursor::after {
  content: "";
  position: absolute;
  width: 22%;
  height: 70px;
  border-radius: 50%;
  background-color: #bc8971;
  filter: blur(30px);
  right: -15%;
  z-index: -1;
  display: none;
}
#termItems .circle-cursor::before {
  content: "";
  position: absolute;
  width: 22%;
  height: 70px;
  border-radius: 50%;
  background-color: #bc8971;
  filter: blur(30px);
  left: -15%;
  z-index: -1;
  display: none;
}
#termItems .circle-cursor .responsive-cursor {
  transform: rotateY(180deg);
  position: absolute;
  display: flex;
}
#termItems .circle-cursor .cursor {
  width: 400px;
  height: 400px;
  transition: all 350ms ease-in-out;
}
#termItems .circle-cursor .cursor::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: black;
  border-radius: 1000px;
  position: absolute;
  z-index: 10;
  top: 0px;
}
#termItems .circle-cursor .cursor::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1000px;
  position: absolute;
  background: conic-gradient(transparent 0%, #bc8971 15%, transparent 85%);
  right: -3px;
  top: 0px;
}
#termItems .circle-cursor .cursor .arrow-image {
  width: 50%;
  filter: contrast(1.05) sepia(1) saturate(1.5) hue-rotate(-24deg) brightness(8);
  transform: rotate(90deg) translateY(-55%);
}
#termItems .circle-cursor .service-icon {
  width: 400px;
  height: 400px;
}
#termItems .circle-cursor .service-icon .service {
  animation: service-icon 2s alternate infinite;
}
#termItems .circle-cursor .img-top {
  top: 0px;
  left: 0px;
  transform: translateY(-4%);
}
#termItems .circle-cursor .img-top img {
  width: 45%;
}
#termItems .circle-cursor .img-top .top {
  transform: rotateZ(90deg);
}
#termItems .circle-cursor .img-bottom {
  bottom: 0px;
  left: 0px;
  transform: translateY(28%);
}
#termItems .circle-cursor .service-title {
  transform: translateY(-50%);
  background: linear-gradient(#0E0E0E 0%, #030303 75%);
}
#termItems .circle-cursor .service-title h4 {
  transition: 0.8s;
}
#termItems .child {
  transform-origin: left center;
}
#termItems .child .icon-service {
  width: 80px;
  aspect-ratio: 1/1;
  border: 10px solid #0D0D0D;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
#termItems .child .icon-service .icon-back {
  transition: all 350ms ease-in-out;
  padding: 7px;
  aspect-ratio: 1;
}
#termItems .child .icon-service::before {
  content: "";
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  transform: scale(1.3);
  border: 1px solid #bc8971;
  border-radius: 1000px;
  opacity: 0;
  transition: all 350ms ease-in-out;
}
#termItems .child .icon-service:hover::before {
  opacity: 0.5;
  transform: scale(1.1);
}
#termItems .child .icon-service:hover .icon-back {
  border-color: #bc8971;
}

@keyframes service-icon {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(20px);
  }
}
pre {
  margin-top: -60px;
}

pre + img {
  transform: translate(0%, -50%);
}

.gradient-back-name {
  background-image: linear-gradient(#0E0E0E 0%, #030303 75%);
}
.gradient-back-name span {
  animation-timeline: view(block 41% 1%);
  animation-name: text-animation-wave;
  animation-fill-mode: both;
  animation-duration: 10s;
  animation-timing-function: linear;
  -moz-animation: text-animation 0s 0s linear;
}

@keyframes text-animation-wave {
  0% {
    transform: perspective(10px) rotateX(10deg) translate(-5%, -100%);
    opacity: 0;
  }
  100% {
    transform: perspective(10px) rotateX(0deg) translate(0%, 0%);
    opacity: 1;
  }
}
@keyframes text-media-animation-opacity {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes text-title-media-animation {
  0% {
    transform: translateY(110%);
    opacity: 0;
  }
  50% {
    transform: translateY(10%);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes text-subtitle-media-animation {
  0% {
    transform: translateY(110%);
    opacity: 0;
  }
  50% {
    transform: translateY(10%);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
.small-circle {
  width: 6px;
  aspect-ratio: 1;
  border-radius: 10000px;
  background-color: #bc8971;
}

.crown {
  transform: rotate(90deg) translate(67%, 0%);
  width: 210px;
  margin-top: -5rem;
}

.crown + div:has(.back-border-box) {
  border: 40px solid #080808;
}
@media screen and (max-width: 767px) {
  .crown + div:has(.back-border-box) {
    border-width: 30px;
  }
}

.back-border-box {
  border: 25px solid #0D0D0D;
  background-image: linear-gradient(#080808 10%, #0D0D0D 90%);
}
@media screen and (max-width: 767px) {
  .back-border-box {
    border-width: 15px;
  }
}
.back-border-box img {
  margin-top: -40px;
}

.btn {
  background-color: #000000;
  color: #bc8971;
  padding-right: 0.7rem;
  padding-left: 0.7rem;
  transition: 300ms 0s linear;
  position: relative;
  filter: drop-shadow(0px 0px 0px #45332a);
  margin: 4px 0px;
  z-index: 1;
  cursor: pointer;
}
@media screen and (max-width: 1024px) {
  .btn {
    padding-left: 0.7rem;
  }
}
.btn div.hover-btn {
  width: 100%;
  height: 100%;
  background-color: #000000;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 7px;
}
.btn *:not(div.hover-btn) {
  transition: 200ms linear;
  filter: contrast(0.7);
}
.btn p {
  margin-top: 0.7rem;
  margin-bottom: 0.7rem;
}
.btn:hover {
  filter: drop-shadow(0px 0px 2px #45332a);
}
.btn:hover *:not(div.hover-btn) {
  filter: contrast(1);
}
.btn::before {
  content: "";
  width: 20%;
  height: 100%;
  padding: 1px 0px;
  background-color: #bb8970;
  position: absolute;
  left: 0;
  z-index: -1;
  transform: translate(510%, 0px);
  transition: 600ms 0s linear;
}
.btn:hover::before {
  transform: translate(-510%, 0px);
}

.line label {
  cursor: pointer;
  width: 20px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;
}
.line label::after {
  content: "";
  width: 100%;
  background-color: #424242;
  height: 3px;
}
.line #tab1:checked + label::after {
  background-color: #bc8971 !important;
}
.line .tab-content-1 {
  opacity: 0;
  transition: 700ms linear;
  transform: translateX(100%) scale(1) perspective(300px) rotateY(-90deg);
  transform-origin: center center;
}
.line #tab1:checked ~ .box .tab-content-1 {
  transform: translateX(0%) scale(1) perspective(300px) rotateY(0deg);
  opacity: 1;
}
.line #tab1:checked ~ .box .tab-content-2 {
  transform: translateX(-100%) scale(1) perspective(300px) rotateY(90deg);
  opacity: 0;
}
.line #tab1:checked ~ .box .tab-content-3 {
  transform: translateX(-100%) scale(1) perspective(300px) rotateY(90deg);
  opacity: 0;
}
.line #tab1:checked ~ .box .tab-content-4 {
  transform: translateX(-100%) scale(1) perspective(300px) rotateY(90deg);
  opacity: 0;
}
.line #tab1:checked ~ .box .tab-content-5 {
  transform: translateX(-100%) scale(1) perspective(300px) rotateY(90deg);
  opacity: 0;
}
.line #tab2:checked + label::after {
  background-color: #bc8971 !important;
}
.line .tab-content-2 {
  opacity: 0;
  transition: 700ms linear;
  transform: translateX(100%) scale(1) perspective(300px) rotateY(-90deg);
  transform-origin: center center;
}
.line #tab2:checked ~ .box .tab-content-2 {
  transform: translateX(0%) scale(1) perspective(300px) rotateY(0deg);
  opacity: 1;
}
.line #tab2:checked ~ .box .tab-content-3 {
  transform: translateX(-100%) scale(1) perspective(300px) rotateY(90deg);
  opacity: 0;
}
.line #tab2:checked ~ .box .tab-content-4 {
  transform: translateX(-100%) scale(1) perspective(300px) rotateY(90deg);
  opacity: 0;
}
.line #tab2:checked ~ .box .tab-content-5 {
  transform: translateX(-100%) scale(1) perspective(300px) rotateY(90deg);
  opacity: 0;
}
.line #tab3:checked + label::after {
  background-color: #bc8971 !important;
}
.line .tab-content-3 {
  opacity: 0;
  transition: 700ms linear;
  transform: translateX(100%) scale(1) perspective(300px) rotateY(-90deg);
  transform-origin: center center;
}
.line #tab3:checked ~ .box .tab-content-3 {
  transform: translateX(0%) scale(1) perspective(300px) rotateY(0deg);
  opacity: 1;
}
.line #tab3:checked ~ .box .tab-content-4 {
  transform: translateX(-100%) scale(1) perspective(300px) rotateY(90deg);
  opacity: 0;
}
.line #tab3:checked ~ .box .tab-content-5 {
  transform: translateX(-100%) scale(1) perspective(300px) rotateY(90deg);
  opacity: 0;
}
.line #tab4:checked + label::after {
  background-color: #bc8971 !important;
}
.line .tab-content-4 {
  opacity: 0;
  transition: 700ms linear;
  transform: translateX(100%) scale(1) perspective(300px) rotateY(-90deg);
  transform-origin: center center;
}
.line #tab4:checked ~ .box .tab-content-4 {
  transform: translateX(0%) scale(1) perspective(300px) rotateY(0deg);
  opacity: 1;
}
.line #tab4:checked ~ .box .tab-content-5 {
  transform: translateX(-100%) scale(1) perspective(300px) rotateY(90deg);
  opacity: 0;
}
.line #tab5:checked + label::after {
  background-color: #bc8971 !important;
}
.line .tab-content-5 {
  opacity: 0;
  transition: 700ms linear;
  transform: translateX(-100%) scale(1) perspective(300px) rotateY(90deg);
  transform-origin: center center;
}
.line #tab5:checked ~ .box .tab-content-5 {
  transform: translateX(0%) scale(1) perspective(300px) rotateY(0deg);
  opacity: 1;
}

#company {
  height: 100vh;
  background-image: url("../media/images/background-hero.webp");
  background-size: cover;
  background-repeat: no-repeat;
}
#company button {
  padding-right: 3rem;
}
#company .gallery img {
  backdrop-filter: blur(3px);
  border-radius: 3px;
  transform-origin: right top;
  transform: rotateX(60deg) rotateY(-20deg);
  animation-name: imageGallery;
  animation-duration: 10s;
  animation-fill-mode: both;
  animation-timeline: view(block 0% 7%);
}
@media screen and (max-width: 767px) {
  #company .gallery img:nth-child(12) ~ img {
    display: none;
  }
}

@keyframes imageGallery {
  to {
    transform: rotateX(0deg) rotateY(0deg);
  }
}
html {
  scroll-behavior: smooth;
}

#hero {
  background-image: url("../media/images/background-hero.webp");
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (max-width: 767px) {
  #hero .box-text .title-creative {
    color: #987360;
  }
}
@media screen and (max-width: 767px) {
  #hero .box-text .text-title-media-animation {
    animation: text-title-media-animation 1.5s linear;
  }
}
@media screen and (max-width: 767px) {
  #hero .box-text .text-subtitle-media-animation {
    animation: text-subtitle-media-animation 1.5s linear;
  }
}
#hero .box-text .subtitle-about-us {
  line-height: 2;
}

#aboutOurBoss {
  background-image: url("../media/images/background-hero.webp");
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (max-width: 767px) {
  #aboutOurBoss .title-creative {
    color: #987360;
  }
}
#aboutOurBoss .line-height-paragraph {
  line-height: 30px;
}
#aboutOurBoss .gradient-back-name span:nth-child(1) {
  animation-delay: 1s;
}
#aboutOurBoss .gradient-back-name span:nth-child(2) {
  animation-delay: 2s;
}
#aboutOurBoss .gradient-back-name span:nth-child(3) {
  animation-delay: 3s;
}
#aboutOurBoss .gradient-back-name span:nth-child(4) {
  animation-delay: 4s;
}
#aboutOurBoss .gradient-back-name span:nth-child(5) {
  animation-delay: 5s;
}
#aboutOurBoss .gradient-back-name span:nth-child(6) {
  animation-delay: 6s;
}
#aboutOurBoss .gradient-back-name span:nth-child(7) {
  animation-delay: 7s;
}
#aboutOurBoss .gradient-back-name span:nth-child(8) {
  animation-delay: 8s;
}
#aboutOurBoss .gradient-back-name span:nth-child(9) {
  animation-delay: 9s;
}
#aboutOurBoss .gradient-back-name span:nth-child(10) {
  animation-delay: 10s;
}
#aboutOurBoss .gradient-back-name span:nth-child(11) {
  animation-delay: 11s;
}
#aboutOurBoss .gradient-back-name span:nth-child(12) {
  animation-delay: 12s;
}
#aboutOurBoss .gradient-back-name span:nth-child(13) {
  animation-delay: 13s;
}
#aboutOurBoss .gradient-back-name span:nth-child(14) {
  animation-delay: 14s;
}
#aboutOurBoss .gradient-back-name span:nth-child(15) {
  animation-delay: 15s;
}
#aboutOurBoss .gradient-back-name span:nth-child(16) {
  animation-delay: 16s;
}
#aboutOurBoss .gradient-back-name span:nth-child(17) {
  animation-delay: 17s;
}
#aboutOurBoss .gradient-back-name span:nth-child(18) {
  animation-delay: 18s;
}
#aboutOurBoss .gradient-back-name span:nth-child(19) {
  animation-delay: 19s;
}
#aboutOurBoss .gradient-back-name span:nth-child(20) {
  animation-delay: 20s;
}

#aboutOurEmployees {
  height: 100vh;
  background-image: url("../media/images/background-hero.webp");
  background-repeat: no-repeat;
  background-size: cover;
}
#aboutOurEmployees div.container:has(img + img + img) img {
  width: 9%;
}
@media screen and (max-width: 1280px) {
  #aboutOurEmployees div.container:has(img + img + img) img {
    border-radius: 18px;
  }
}
#aboutOurEmployees .back-border-box {
  background-image: linear-gradient(#080808, #1d1d1d);
}
#aboutOurEmployees .gradient-back-name span:nth-child(1) {
  animation-delay: 1s;
}
#aboutOurEmployees .gradient-back-name span:nth-child(2) {
  animation-delay: 2s;
}
#aboutOurEmployees .gradient-back-name span:nth-child(3) {
  animation-delay: 3s;
}
#aboutOurEmployees .gradient-back-name span:nth-child(4) {
  animation-delay: 4s;
}
#aboutOurEmployees .gradient-back-name span:nth-child(5) {
  animation-delay: 5s;
}
#aboutOurEmployees .gradient-back-name span:nth-child(6) {
  animation-delay: 6s;
}
#aboutOurEmployees .gradient-back-name span:nth-child(7) {
  animation-delay: 7s;
}
#aboutOurEmployees .gradient-back-name span:nth-child(8) {
  animation-delay: 8s;
}
#aboutOurEmployees .gradient-back-name span:nth-child(9) {
  animation-delay: 9s;
}
#aboutOurEmployees .gradient-back-name span:nth-child(10) {
  animation-delay: 10s;
}
#aboutOurEmployees .gradient-back-name span:nth-child(11) {
  animation-delay: 11s;
}
#aboutOurEmployees .gradient-back-name span:nth-child(12) {
  animation-delay: 12s;
}
#aboutOurEmployees .gradient-back-name span:nth-child(13) {
  animation-delay: 13s;
}
#aboutOurEmployees .crown {
  width: 150px;
  transform: rotate(90deg) translate(50%, 0%);
}

#tandis {
  background-image: url("../media/images/background-hero.webp");
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}
@media screen and (max-width: 767px) {
  #tandis {
    height: fit-content;
  }
  #tandis div div .between-tandis {
    margin-bottom: 7%;
  }
  #tandis div div .first-tandis {
    margin-top: 7%;
  }
}
@media screen and (max-width: 767px) {
  #tandis {
    position: relative;
    display: flex;
    align-items: center;
    justify-items: center;
  }
}
#tandis .tandis-md-right {
  box-shadow: 0px 20px 20px 20px black;
  width: 250px;
}
#tandis .tandis-md-right::before {
  content: "";
  top: 100px;
  position: absolute;
  border: 2px #987360 solid;
  border-radius: 1000px;
  width: 349px;
  height: 297px;
  z-index: -1;
}
#tandis .tandis-right-container {
  margin-top: -50px;
}
@media screen and (max-width: 767px) {
  #tandis .tandis-right-container {
    height: 70vh;
    margin-top: 0px;
  }
}
#tandis .tandis-right-container .background {
  width: fit-content;
}
#tandis .tandis-right-container .background .forground {
  z-index: 3;
  top: 20%;
  right: 14%;
}
#tandis .tandis-right-container .background .forground img {
  width: 200px;
}
@media screen and (max-width: 1024px) {
  #tandis .tandis-right-container .background .forground img {
    width: 120px;
  }
}
#tandis .tandis-right-container .background .forground .bottom-text {
  background-color: #030303;
}
#tandis .tandis-right-container .background .before {
  z-index: 2;
}
#tandis .tandis-right-container .background .before .tazhib-top {
  width: 159px;
  z-index: 1;
  aspect-ratio: 1;
  transform: translateX(-6%) translateY(64%) rotate(90deg);
  background-repeat: no-repeat;
}
@media screen and (max-width: 1024px) {
  #tandis .tandis-right-container .background .before .tazhib-top {
    width: 100px;
  }
}
#tandis .tandis-right-container .background .before .tick-border {
  width: 350px;
  aspect-ratio: 1;
  z-index: 1;
  object-fit: contain;
  border-radius: 10000px;
  border: 15px #191919 solid;
  background-color: #030303;
}
@media screen and (max-width: 1024px) {
  #tandis .tandis-right-container .background .before .tick-border {
    width: 250px;
  }
}
#tandis .tandis-right-container .background .before .tazhib-bottom {
  width: 200px;
  aspect-ratio: 1;
  z-index: 0;
  transform: translateY(-40%);
}
@media screen and (max-width: 1024px) {
  #tandis .tandis-right-container .background .before .tazhib-bottom {
    width: 150px;
  }
}
@media screen and (max-width: 767px) {
  #tandis .tandis-right-container .background::before {
    content: "";
    top: 89px;
    left: -19px;
    position: absolute;
    border: double 2px transparent;
    background-clip: content-box, border-box;
    border-radius: 1000px;
    aspect-ratio: 1;
    z-index: auto;
    width: 281px;
    aspect-ratio: 1;
    background-image: linear-gradient(#030303, #030303), linear-gradient(to top, transparent, #987360, transparent);
    transform: translateY(-2%) translateX(0%);
  }
}
@media screen and (max-width: 767px) {
  #tandis .tandis-right-container .tandis-title {
    color: #987360;
  }
  #tandis .tandis-right-container .bottom-tandis-row {
    margin-top: -90px;
  }
}

#support {
  min-height: fit-content;
  height: 100vh;
  background-image: url("../media/images/background-hero.webp");
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (max-width: 1024px) {
  #support {
    height: fit-content;
  }
}
#support .luxima {
  position: relative;
}
@media screen and (max-width: 1024px) {
  #support .luxima {
    margin-bottom: -10rem;
  }
  #support .luxima::after, #support .luxima::before {
    width: 70% !important;
    bottom: 50% !important;
  }
}
#support .luxima::after {
  content: "";
  aspect-ratio: 1;
  position: absolute;
  background: linear-gradient(to top, transparent, #987360, transparent);
  border-radius: 50%;
  width: 90%;
  bottom: 58%;
  right: calc(50% - 2px);
  transform: translateX(50%) translateY(50%);
}
#support .luxima::before {
  content: "";
  aspect-ratio: 1;
  position: absolute;
  background: #000;
  border-radius: 50%;
  width: 90%;
  bottom: 58%;
  right: 50%;
  transform: translateX(50%) translateY(50%);
  z-index: 1;
}
#support .crown + div:has(.back-border-box) {
  border-width: 20px;
  z-index: 1;
}
#support .crown {
  transform: rotate(90deg) translate(38%, 0%);
  z-index: 1;
}
#support .support-left {
  position: relative;
  height: 50vh;
}
#support .support-left::before {
  content: "";
  top: 0;
  position: absolute;
  border: double 3px transparent;
  background-image: linear-gradient(#030303, #030303), linear-gradient(to top, transparent, transparent, #987360);
  background-origin: border-box;
  background-clip: content-box, border-box;
  border-radius: 1000px;
  width: 500px;
  aspect-ratio: 1;
  transform: rotate(80deg) translateY(-2%) translateX(-10%);
  z-index: auto;
}
@media screen and (max-width: 1024px) {
  #support .support-left::before {
    width: 230px;
    aspect-ratio: 1;
    background-image: linear-gradient(#030303, #030303), linear-gradient(to top, transparent, #987360, transparent);
    transform: translateY(-2%) translateX(0%);
  }
}
#support .support-left .support-left-box {
  position: absolute;
  z-index: 1;
}
#support .support-left .support-left-box img, #support .support-left .support-left-box .support-text {
  background-color: #030303;
}
@media screen and (max-width: 1024px) {
  #support .support-left .support-left-box img {
    width: 130px;
  }
}
#support .support-left .support-left-box::before {
  width: 200px;
  aspect-ratio: 1;
  position: absolute;
  top: 0px;
  z-index: -1;
  content: "";
  background-image: url("../media/images/tazhib.webp");
  background-size: contain;
  transform: translateX(-17%) translateY(-35%) rotate(90deg);
  background-repeat: no-repeat;
}
@media screen and (max-width: 1024px) {
  #support .support-left .support-left-box::before {
    width: 100px;
  }
}
#support .support-left .support-left-box::after {
  content: "";
  width: 300px;
  aspect-ratio: 1;
  position: absolute;
  z-index: -1;
  bottom: 0px;
  transform: translateY(69%);
  background-image: url("../media/images/tazhib.webp");
  background-size: contain;
  background-repeat: no-repeat;
}
@media screen and (max-width: 1024px) {
  #support .support-left .support-left-box::after {
    width: 150px;
  }
}
@media screen and (max-width: 767px) {
  #support .support-title {
    color: #987360;
    z-index: 7;
  }
}

.img-top {
  top: 0px;
  left: 0px;
  transform: translateY(-10%);
}
.img-top .top {
  transform: rotateZ(90deg);
}

.img-bottom {
  bottom: 0px;
  left: 0px;
  transform: translateY(28%);
}

.service-title {
  transform: translateY(-50%);
}

.cursor {
  width: 400px;
  height: 400px;
  transition: all 350ms ease-in-out;
}
.cursor > div {
  background-color: #000;
  border: 20px solid #0D0D0D;
  border-radius: 50%;
  z-index: 9;
  width: 400px;
  height: 400px;
}
.cursor::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: black;
  border-radius: 1000px;
  position: absolute;
  z-index: 8;
  top: 0px;
}
.cursor::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1000px;
  position: absolute;
  background: conic-gradient(transparent 0%, #bc8971 15%, transparent 85%);
  right: -3px;
  top: 0px;
}
.cursor .arrow-image {
  width: 65%;
  filter: contrast(1.05) sepia(1) saturate(1.5) hue-rotate(-24deg) brightness(8);
  transform: rotate(90deg) translateY(-55%);
}

#footer {
  height: 100vh;
  min-height: fit-content;
  overflow-y: hidden;
  position: relative;
  background-image: url("../media/images/background-hero.webp");
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (max-width: 1024px) {
  #footer {
    height: fit-content;
  }
}
#footer button p {
  white-space: nowrap;
}
#footer .footer-right .right-image {
  min-width: 220px;
  transform: scaleX(-1) translateX(25%) translateY(30%) rotateZ(-5deg);
  animation: flower1 alternate ease-in-out 4s both infinite;
}
#footer .footer-right .left-image {
  min-width: 310px;
  transform: translateX(50%) translateY(17%) rotateZ(0deg);
  animation: flower2 alternate ease-in-out 4s both infinite;
}
#footer .footer-md-left {
  position: relative;
}
#footer .footer-md-left::before {
  content: "";
  top: 0;
  position: absolute;
  border: double 3px transparent;
  background-image: linear-gradient(#030303, #030303), linear-gradient(to top, transparent, transparent, #987360);
  background-origin: border-box;
  background-clip: content-box, border-box;
  border-radius: 1000px;
  width: 500px;
  aspect-ratio: 1;
  transform: rotate(80deg) translateY(-13%) translateX(-10%);
  z-index: auto;
}
@media screen and (max-width: 1024px) {
  #footer .footer-md-left::before {
    width: 330px;
    aspect-ratio: 1;
    background-image: linear-gradient(#030303, #030303), linear-gradient(to top, transparent, #987360, transparent);
    transform: translateY(-2%) translateX(0%);
  }
}
#footer .footer-md-left .footer-left-box {
  position: absolute;
  z-index: 1;
}
#footer .footer-md-left .footer-left-box img, #footer .footer-md-left .footer-left-box .support-text {
  background-color: #030303;
}
@media screen and (max-width: 767px) {
  #footer .footer-md-left .footer-left-box img {
    width: 230px;
  }
}
#footer .footer-md-left .footer-left-box::before {
  width: 200px;
  aspect-ratio: 1;
  position: absolute;
  top: 0px;
  z-index: -1;
  content: "";
  background-image: url("../media/images/tazhib.webp");
  background-size: contain;
  transform: translateX(-17%) translateY(-35%) rotate(90deg);
  background-repeat: no-repeat;
}
@media screen and (max-width: 1024px) {
  #footer .footer-md-left .footer-left-box::before {
    width: 100px;
  }
}
#footer .footer-md-left .footer-left-box::after {
  content: "";
  width: 300px;
  aspect-ratio: 1;
  position: absolute;
  z-index: -1;
  bottom: 0px;
  transform: translateY(69%);
  background-image: url("../media/images/tazhib.webp");
  background-size: contain;
  background-repeat: no-repeat;
}
@media screen and (max-width: 1024px) {
  #footer .footer-md-left .footer-left-box::after {
    width: 200px;
  }
}
#footer .line-height-paragraph {
  line-height: 30px;
}
#footer .policy {
  position: absolute;
  bottom: 0;
  right: 0;
}
#footer .back-border-box img {
  margin: 0px;
}
#footer .footer-text-color {
  transition: 200ms linear;
  cursor: pointer;
}
#footer .footer-text-color:hover {
  color: #808080;
}

@keyframes flower1 {
  0% {
    transform: scaleX(-1) translateX(25%) translateY(30%) rotateZ(-5deg);
  }
  50% {
    transform: scaleX(-1) translateX(25%) translateY(30%) rotateZ(-5deg);
  }
  100% {
    transform: scaleX(-1) translateX(30%) translateY(30%);
  }
}
@keyframes flower2 {
  0% {
    transform: translateX(50%) translateY(17%);
  }
  100% {
    transform: translateX(45%) translateY(17%);
  }
}
@media screen and (max-width: 767px) {
  .txt-md-justify {
    text-align: justify;
  }
}
.txt-justify {
  text-align: justify;
}

.line-height-paragraph {
  line-height: 30px;
}

.cursor-pointer {
  cursor: pointer;
}

section:not(#workSamples) {
  position: relative;
}
section:not(#workSamples)::after {
  content: "";
  width: 100%;
  height: 30%;
  background-image: linear-gradient(transparent 10%, black 50%, transparent 90%);
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateY(50%);
  z-index: 6;
}
section:not(#workSamples):not(#hero), section:not(#workSamples) .box {
  background-size: 195% !important;
}
@media screen and (max-width: 1024px) {
  section:not(#workSamples):not(#hero), section:not(#workSamples) .box {
    background-size: cover !important;
    padding-bottom: 4rem;
    height: fit-content;
  }
}

#workSamples .line::after {
  content: "";
  width: 100%;
  height: 35%;
  background-image: linear-gradient(transparent 10%, black 50%, transparent 90%);
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateY(50%);
  z-index: 2;
}

body {
  direction: rtl;
}

/*# sourceMappingURL=style.css.map */