html {
  scroll-behavior: smooth;
}

* {
  font-family: "changan uni", "changan uni type Regular Placeholder", sans-serif;
  font-weight: 500;
}

[dir="rtl"] * {
  font-family: "Frutiger LT Arabic", sans-serif;
}

.font-en {}

.font-ar {
  font-family: "Frutiger LT Arabic", sans-serif;
}

.underline-animate {
  position: relative;
  display: inline-block;
  text-wrap: nowrap;
}

.underline-animate::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  /* underline thickness */
  background-color: currentColor;
  transition: width 0.5s ease;
  /* smooth animation */
}

[dir="rtl"] .underline-animate::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  /* underline thickness */
  background-color: currentColor;
  transition: width 0.5s ease;
  /* smooth animation */
}

.underline-animate:hover::after {
  width: 100%;
}

.animate-slide-up {
  animation: slide-up 0.5s linear forwards;
}

.animate-button-slide-up {
  animation: slide-up 1s ease-in forwards;
}

.animate-bottom-p-slide-up {
  animation: slide-up 1.5s ease-in forwards;
}

.explore-container {
  height: 20px;
  overflow: hidden;
}

@keyframes slide {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.group-hover\:animate-slide {
  animation: slide 2s linear forwards;
}

@keyframes slide-up {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.car-back-logo {
  top: -14%;
}

@media screen and (width < 1536px) {
  .car-back-logo {
    top: -18%;
  }
}

@media screen and (width < 1100px) {
  .car-back-logo {
    top: -28%;
  }
}

@media screen and (width < 900px) {
  .car-back-logo {
    top: -15%;
  }
}

@media screen and (width < 800px) {
  .car-back-logo {
    top: -7%;
  }
}

@media screen and (width < 700px) {
  .car-back-logo {
    top: -1%;
  }
}

@media screen and (width < 600px) {
  .car-back-logo {
    top: 6%;
  }
}

@media screen and (width < 500px) {
  .car-back-logo {
    top: 13%;
  }
}

@media screen and (width < 400px) {
  .car-back-logo {
    top: 18%;
  }
}

/* Common reset for both checkboxes & radios */
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 1.25rem;
  /* 20px */
  height: 1.25rem;
  border: 2px solid #d1d5db;
  /* gray-300 */
  cursor: pointer;
  display: inline-block;
  position: relative;
}

/* Checkbox specific (square with rounded corners) */
input[type="checkbox"] {
  border-radius: 0.25rem;
  /* Tailwind rounded-md */
}

/* Radio specific (circle) */
input[type="radio"] {
  border-radius: 9999px;
  /* full circle */
}

/* When checked – black fill */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: #000;
  /* black */
  border-color: #000;
}

/* Checkmark for checkbox */
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Dot for radio */
input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 9999px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-in forwards;
}

.get-quote-now-button {
  position: relative;
  color: white;
  overflow: hidden;
}

/* Common before styles */
.get-quote-now-button::before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 0;
  background: white;
  transition: width 0.7s;
  z-index: -1;
}

[dir="rtl"] .get-quote-now-button img {
  transform: rotate(-100deg);
}

.get-quote-now-button:hover img {
  transform: rotate(40deg);
}

[dir="rtl"] .get-quote-now-button:hover img {
  transform: rotate(-145deg);
}

.get-quote-now-button::before {
  left: 0;
}

/* RTL: expand from right to left */
[dir="rtl"] .get-quote-now-button::before {
  right: 0;
}

/* Hover effect (works both LTR & RTL) */
.get-quote-now-button:hover::before {
  width: 100%;
}

.get-quote-now-button:hover {
  color: black;
}

/* 🚀 Opposite Version: White on Black */
.get-quote-now-black-button {
  position: relative;
  color: white;
  overflow: hidden;
  z-index: 0;
}

.get-quote-now-black-button::before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 0;
  background: black;
  transition: width 0.7s;
  z-index: -1;
}

.get-quote-now-black-button::before {
  left: 0;
}

[dir="rtl"] .get-quote-now-black-button::before {
  right: 0;
}

.get-quote-now-black-button:hover::before {
  width: 100%;
}

.get-quote-now-black-button:hover {
  color: white;
}

/* Image effects (mirrored like first button) */
[dir="rtl"] .get-quote-now-black-button img {
  transform: rotate(-100deg);
}

.get-quote-now-black-button:hover img {
  transform: rotate(40deg);
}

[dir="rtl"] .get-quote-now-black-button:hover img {
  transform: rotate(-145deg);
}

.explore-uni-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* ~gap-x-3 */
  background: white;
  color: black;
  font-size: 1rem;
  border-radius: 0.5rem;
  padding: 0.5rem 1.5rem;
  /* py-2 px-6 */
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}

/* Left arrow (absolute) */
.explore-uni-button img:first-of-type {
  position: absolute;
  left: -5px;
  transform: translateX(-2rem);
  /* like -translate-x-8 */
  transition: transform 0.7s;
}

/* Text link */
.explore-uni-button a {
  transition: transform 0.7s;
  transform: translateX(0);
}

/* Right arrow */
.explore-uni-button img:last-of-type {
  transition: transform 0.7s;
  transform: translateX(0);
}

/* Hover effects LTR */
.explore-uni-button:hover img:first-of-type {
  transform: translateX(2rem);
  /* arrow comes inside */
}

.explore-uni-button:hover a {
  transform: translateX(1.6rem);
  /* text moves right */
}

.explore-uni-button:hover img:last-of-type {
  transform: translateX(4rem);
  /* arrow moves further right */
}

[dir="rtl"] .explore-uni-button img:first-of-type {
  right: -15px;
  transform: translateX(2rem) rotate(-180deg);
}

[dir="rtl"] .explore-uni-button img:last-of-type {
  left: 0px;
  transform: translateX(2rem);
  transform: rotate(-180deg);
}

[dir="rtl"] .explore-uni-button:hover img:first-of-type {
  transform: translateX(-2rem) rotate(-180deg);
}

[dir="rtl"] .explore-uni-button:hover a {
  transform: translateX(-1rem);
}

[dir="rtl"] .explore-uni-button:hover img:last-of-type {
  transform: translateX(-4rem) rotate(-180deg);
}

.video-play-button-animation {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 1px solid white;
  width: 36px;
  height: 36px;
  padding: 4px;
  cursor: pointer;
}

/* First arrow: hidden to left (LTR) */
.video-play-button-animation img:first-of-type {
  position: absolute;
  left: -5px;
  transform: translateX(-2rem);
  transition: transform 0.7s;
}

/* Animate in (LTR) */
.video-play-button-animation:hover img:first-of-type {
  transform: translateX(0.5rem);
}

/* Second arrow (LTR): moves further */
.video-play-button-animation img:last-of-type {
  transform: translateX(0);
  transition: transform 0.7s;
}

.video-play-button-animation:hover img:last-of-type {
  transform: translateX(4rem);
}

/* RTL adjustments */
[dir="rtl"] .video-play-button-animation img:first-of-type {
  right: -5px;
  transform: translateX(2rem) rotate(180deg);
}

[dir="rtl"] .video-play-button-animation:hover img:first-of-type {
  transform: translateX(-0.5rem) rotate(180deg);
}

[dir="rtl"] .video-play-button-animation img:last-of-type {
  transform: translateX(0) rotate(180deg);
}

[dir="rtl"] .video-play-button-animation:hover img:last-of-type {
  transform: translateX(-4rem) rotate(180deg);
}

.carousel-arrows {
  display: flex;
}

.carousel-arrows img {
  cursor: pointer;
  transition: transform 0.3s ease;
}

/* Default hover effect */
.carousel-arrows img:hover {
  transform: scale(1.1);
}

/* --- LTR Layout --- */
.carousel-arrows img:first-of-type {
  content: url("/themes/custom/changan/assets/images/long-left-arrow.png");
}

.carousel-arrows img:last-of-type {
  content: url("/themes/custom/changan/assets/images/long-right-arrow.png");
}

[dir="rtl"] .carousel-arrows img:first-of-type {
  content: url("/themes/custom/changan/assets/images/long-right-arrow.png");
}

[dir="rtl"] .carousel-arrows img:last-of-type {
  content: url("/themes/custom/changan/assets/images/long-left-arrow.png");
}

.footer-email-icon {
  position: absolute;
  width: 12px;
  height: 12px;
  top: 10px;
  cursor: pointer;
  right: 2px;
}

[dir="rtl"] .footer-email-icon {
  left: 2px;
  right: unset;
  transform: rotate(180deg);
}

[dir="rtl"] .single-arrow {
  transform: rotate(180deg);
}

.get-quote-now-prefilled-button {
  position: relative;
  color: white;
  overflow: hidden;
}

/* Common before styles */
.get-quote-now-prefilled-button::before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background: black;
  transition: width 0.5s;
  z-index: -1;
}

.get-quote-now-prefilled-button::before {
  left: 0;
}

/* RTL: expand from right to left */
[dir="rtl"] .get-quote-now-prefilled-button::before {
  right: 0;
}

/* Hover effect (works both LTR & RTL) */
.get-quote-now-prefilled-button:hover::before {
  width: 0%;
}

.get-quote-now-prefilled-button:hover {
  color: black;
}