:root {
  --primary-color: #477ea0;
  --black: #000000;
  --light: #ffffff7e;
  --text-color: #292929;
  --background-color: #efefefef;
  --theme-dark: #15242e;
  --theme-warning: #f7b868;
  --theme-danger: #e15f80;
  --theme-success: #8dd95c;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-size: 15px;
}

p {
  font-size: 15px;
}

@media screen and (min-width: 768px) {
  body,
  p {
    font-size: 16px;
  }
}

.text-warning {
  color: var(--theme-warning) !important;
}

/* The parent container - defines the perspective */
.flip-box {
  background-color: transparent;
  width: 100%;
  aspect-ratio: 16/9;
  perspective: 1000px; /* Essential for 3D effect */
}

/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

@media screen and (min-width: 768px) {
  /* Do the horizontal flip when you move the mouse over the flip box container */
  .flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
  }
}

/* Style both sides */
.flip-box-front,
.flip-box-back {
  position: absolute;
  width: 100%;
  aspect-ratio: 16/9;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
}

/* Style the front side (Image) */
.flip-box-front {
  color: white;
}
.flip-box-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Style the back side (Text) */
.flip-box-back {
  color: white;
  transform: rotateY(180deg); /* Starts already rotated */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.facts__single__counter p{
  font-size: 1rem;
  line-height: 1.3;
}

.service__item h4 {
  font-size: 1.2rem;
  font-weight: 600;
  position: relative;
  left: 2rem;
}
.service__item h4::before {
  content: "";
  position: absolute;
  width: 1rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--theme-success);
  box-shadow: 0 0 10px 2px var(--theme-success);
  top: 50%;
  transform: translateY(-50%);
  left: -2rem;
}

.service__single__4 {
  border: 1px solid white;
}

.studio-name {
  position: absolute;
  content: "";
  width: 100%;
  height: auto;
  bottom: 2%;
  border: 1px solid #ffffff4a;
  padding: 10px;
  backdrop-filter: blur(10px);
  background: linear-gradient(
      140deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.5) 43%,
      rgba(255, 255, 255, 0) 100%
    ),
    #ffffff29;
  padding: 0.6rem 2rem;
}

.studio-name h4 {
  font-size: 1.2rem;
  font-weight: 400;
}

.studio-name img {
  filter: invert(1) contrast(10);
  width: 30px;
}

/* .testimonial__3__content {
    backdrop-filter: blur(10px);
    border-radius: 2rem;
    background: linear-gradient(224deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 43%, rgba(255, 255, 255, 0) 100%), #ffffff29;
} */
.service .service__single__4 {
  padding: 20px 20px;
}

.color-cover {
  background-color: rgba(28, 30, 26, 0.75);
  width: 100%;
  height: 100%;
  display: block;
}

.glass-card {
  backdrop-filter: blur(10px);
  border-radius: 2rem;
  padding: calc(max(3.5vmin, 1rem));
  background: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 35%,
      rgba(255, 255, 255, 1) 37%,
      rgba(255, 255, 255, 1) 67%,
      rgba(255, 255, 255, 0) 70%,
      rgba(255, 255, 255, 0) 100%
    ),
    #ffffff29;
  box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.06);
  border: 2px solid white;
}

.glass-card:has(.action-icon) {
  position: relative;
}
.glass-card:has(.action-icon) .action-icon.action-icon--2 {
  position: absolute;
  bottom: 1rem;
  right: 1rem;

  backdrop-filter: blur(10px);
  border-radius: 1rem;
  color: var(--black);
  padding: 1rem;
  background: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 35%,
      rgba(255, 255, 255, 1) 37%,
      rgba(255, 255, 255, 1) 67%,
      rgba(255, 255, 255, 0) 70%,
      rgba(255, 255, 255, 0) 100%
    ),
    #ffffff29;
  box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.06);
  border: 2px solid white;
}

.glass-card .card-image {
  border-radius: 1rem;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.glass-card .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.glass-card.dark {
  backdrop-filter: blur(10px);
  border-radius: 2rem;
  padding: 1rem;
  color: var(--light) !important;
  background: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 35%,
      rgba(255, 255, 255, 0.05) 35%,
      rgba(255, 255, 255, 0.05) 70%,
      rgba(255, 255, 255, 0) 70%,
      rgba(255, 255, 255, 0) 100%
    ),
    #ffffff29;
  box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.233);
}

.award-tile {
  width: 100%;
  height: 300px;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.06);
  margin: 1.5rem 0.5rem;
}
.award-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.section {
  padding: calc(max(5%, 2rem)) 0;
  background-image: var(--background-image);
  background-size: cover;
  background-attachment: fixed;
}

.section-dark {
  background-color: var(--theme-dark);
}
.section-dark p {
  color: var(--background-color);
}

.section__title__heading {
  max-width: 100%;
}
.section__title__heading h3 {
  font-size: calc(max(2rem, 3vw));
  line-height: 1.3;
  color: #000000;
  text-transform: capitalize;
  text-align: left;
}

.testimonial-card .icon {
  position: absolute;
  right: 1rem;
  bottom: -3rem;
  font-size: 5rem;
  color: var(--theme-warning);
}

.goal__card .icon {
  mix-blend-mode: overlay;
}

.headerarea__transparent {
  /*background-color: transparent !important;*/
}
.headerarea__transparent.sticky {
  background-color: var(--black) !important;
}
.herobanner .page__heading h1 {
  font-size: calc(max(32px, 3vw));
  color: var(--white);
  line-height: 1.2;
}
.herobanner .page__heading h1 {
  line-height: 1.5;
}
.herobanner .page__heading #typewriter-text {
  border-bottom: 2px solid var(--background-color);
}

.herobanner__small__text span {
  color: var(--theme-danger);
}
.herobanner__small__text span::before {
  background-color: var(--theme-danger);
}

.swiper-slide .glass-card {
  margin: 1rem 0;
}

footer .copyright p {
  margin: 0;
}
footer .copyright * {
  font-size: 14px;
  color: var(--background-color);
}

.copyright__right {
  font-size: 14px;
}