@charset "UTF-8";
:root {
  --primary-color: rgba(171, 150, 111, 1);
  --secondary-color: rgba(16, 17, 50, 1);
  --light-secondary: rgba(27, 91, 167, 1);
  --dark-color: rgba(36, 36, 36, 1);
  --sec-dark-color: rgba(21, 52, 72, 1);
  --basic-color: rgba(255, 255, 255, 1);
  --light-font: rgba(178, 207, 232, 1);
  --light-bg: rgba(16, 17, 50, 0.8);
  --sec-light-bg: rgba(16, 17, 50, 0.5);
  --th-light-bg: rgba(255, 255, 255, 0.08);
  --light-border: rgba(255, 255, 255, 0.12);
  --secondary-bg: rgba(16, 17, 50, 0.95);
  --gray-color: rgba(255, 255, 255, 0.7);
  --sec-gray-color: rgba(232, 232, 232, 1);
  --gray-font: rgba(128, 128, 128, 1);
  --sec-gray-font: rgba(171, 171, 171, 1);
  --light-gray-bg: rgba(246, 246, 246, 1);
  --sec-light-border: rgba(237, 237, 237, 1);
  --th-light-border: rgba(238, 238, 238, 1);
  --dark-gray-font: rgba(102, 102, 102, 1);
  --dark-gray: rgba(64, 68, 76, 1);
  --green-color: rgba(11, 205, 116, 1);
  --light-active: rgba(247, 245, 241, 1);
  --black-color: rgba(0, 0, 0, 1);
}

body {
  font-family: "Alexandria", sans-serif;
}

a {
  text-decoration: none;
  cursor: pointer;
}

.main-btn {
  z-index: 2;
  position: relative;
  gap: 6px;
  padding: 16px;
  font-size: 16px;
  font-weight: 400;
  border-radius: 8px;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 136px;
  color: var(--basic-color);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.main-btn .fa-angles-right:dir(rtl) {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.main-btn:hover {
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
          box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}

.primary-bg {
  background-color: var(--primary-color);
}

.primary-light {
  background-color: var(--basic-color);
  border: 1px solid rgb(171, 150, 111);
  color: var(--primary-color);
}
.primary-light:hover {
  background-color: var(--primary-color);
  color: var(--basic-color);
}

.gap-4 {
  gap: 4px !important;
}

.gap-8 {
  gap: 8px !important;
}

.gap-10 {
  gap: 10px !important;
}

.gap-16 {
  gap: 16px !important;
}

.gap-24 {
  gap: 24px !important;
}

.gap-32 {
  gap: 32px !important;
}

.py-64 {
  padding: 64px 0 !important;
}

.py-16 {
  padding: 16px 0 !important;
}

.pb-32 {
  padding-bottom: 32px !important;
}

.pb-16 {
  padding-bottom: 16px !important;
}

.mb-64 {
  margin-bottom: 64px !important;
}

.mb-48 {
  margin-bottom: 48px !important;
}

.mb-40 {
  margin-bottom: 40px !important;
}

.mb-32 {
  margin-bottom: 32px !important;
}

.mb-24 {
  margin-bottom: 24px !important;
}

.mb-16 {
  margin-bottom: 16px !important;
}

.mb-12 {
  margin-bottom: 12px !important;
}

.mb-8 {
  margin-bottom: 8px !important;
}

.mh-100 {
  min-height: 100% !important;
}

.head-box {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.head-box.club-bg {
  position: relative;
  background-position: center;
  background-size: cover;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(16, 17, 50, 0.6980392157))), url("../images/footer-bg.jpg");
  background-image: linear-gradient(to bottom rgba(16, 17, 50, 0.6980392157), rgba(16, 17, 50, 0.6980392157)), url("../images/footer-bg.jpg");
}
.head-box.club-bg .intro-content {
  position: relative;
  z-index: 0;
}
.head-box.club-bg .blog-shape {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  height: 100%;
  z-index: 0;
}

.top-header {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid var(--light-border);
  background-color: var(--light-bg);
  padding: 16px 0;
}
@media (max-width: 991px) {
  .top-header {
    display: none;
  }
}
.top-header .nav-logo .navbar-logo {
  max-height: 80px;
  width: auto;
}

.nav-links ul {
  margin: 0;
  list-style: none;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  gap: 16px;
}
.nav-links ul li a {
  color: var(--basic-color);
  background-color: var(--th-light-bg);
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 8px;
}

.mobile-navigation {
  position: relative;
  z-index: 1000;
  background: var(--secondary-bg);
  display: none;
  width: 100%;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  padding: 6px 0;
  -webkit-box-shadow: 0px 11px 22.5px 0px rgba(124, 124, 124, 0.06);
          box-shadow: 0px 11px 22.5px 0px rgba(124, 124, 124, 0.06);
}
.mobile-navigation .mobile-logo a img {
  max-height: 60px;
}
@media (max-width: 991px) {
  .mobile-navigation {
    display: block;
  }
}
.mobile-navigation .menu-icon .open-icon {
  color: var(--primary-color);
  background-color: var(--secondary-color);
  height: 40px;
  text-align: center;
  width: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 20px;
}
.mobile-navigation .menu-icon .select-box,
.mobile-navigation .menu-icon .fa-bars {
  display: block;
}
.mobile-navigation .exit-icon {
  color: var(--primary-color);
  background-color: var(--secondary-color);
  height: 40px;
  text-align: center;
  width: 40px;
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 20px;
}
.mobile-navigation .list-container {
  background-color: var(--secondary-color);
  position: fixed;
  top: 0;
  width: 310px;
  height: 100vh;
  padding: 6px 12px;
  -webkit-box-shadow: 0px 8px 25px rgba(179, 179, 179, 0.15);
          box-shadow: 0px 8px 25px rgba(179, 179, 179, 0.15);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.mobile-navigation .list-container:dir(rtl) {
  left: auto;
  right: -100%;
}
.mobile-navigation .list-container:dir(ltr) {
  left: -100%;
  right: auto;
}
.mobile-navigation .list-container .mobile-logo {
  padding-bottom: 18px;
  margin-bottom: 18px;
  width: 100%;
  border-bottom: 1px solid var(--light-bg);
}
.mobile-navigation .list-container .nav-list {
  padding: 0;
  list-style: none;
}
.mobile-navigation .list-container .nav-list li {
  margin-bottom: 16px;
  padding: 6px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.mobile-navigation .list-container .nav-list li:hover, .mobile-navigation .list-container .nav-list li.active {
  background-color: var(--primary-color);
  width: 100%;
}
.mobile-navigation .list-container .nav-list li:hover a, .mobile-navigation .list-container .nav-list li.active a {
  color: var(--basic-color);
}
.mobile-navigation .list-container .nav-list li a {
  color: var(--basic-color);
  font-size: 16px;
  font-weight: 500;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.open-menu .open-icon {
  display: none !important;
}
.open-menu .list-container:dir(rtl) {
  right: 0% !important;
}
.open-menu .list-container:dir(ltr) {
  left: 0% !important;
}
.open-menu .exit-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.close-menu .open-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.close-menu .list-container:dir(rtl) {
  right: -100% !important;
}
.close-menu .list-container:dir(ltr) {
  left: -100% !important;
}
.close-menu .exit-icon {
  display: none !important;
}

.devolum-menu {
  position: relative;
  z-index: 1;
  background-color: var(--sec-light-bg);
  padding: 24px 0;
}
@media (max-width: 991px) {
  .devolum-menu {
    display: none;
  }
}
.devolum-menu .menu-icons ul {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 24px;
}
.devolum-menu .menu-list {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: start;
  gap: 32px;
}
.devolum-menu .menu-list .dropdown-menu {
  -webkit-transform: translate3d(-0.666667px, 32.6667px, 0px);
          transform: translate3d(-0.666667px, 32.6667px, 0px);
  background-color: var(--basic-color);
  padding: 0;
  background-color: var(--basic-color);
  padding: 0;
  border-radius: 12px; /* حسب الشكل اللي عندك */
  border-top: 4px solid var(--primary-color); /* الشريط اللي فوق */
}
.devolum-menu .menu-list .dropdown-menu li {
  padding: 8px 0;
  border-bottom: 1px solid var(--sec-light-border);
}
.devolum-menu .menu-list .dropdown-menu li:last-child {
  border-bottom: none;
}
.devolum-menu .menu-list .dropdown-menu li a {
  color: var(--dark-color);
}
.devolum-menu .menu-list .dropdown-menu li a:hover {
  background-color: var(--th-light-bg);
}
@media (max-width: 1200px) {
  .devolum-menu .menu-list {
    gap: 10px;
  }
}
.devolum-menu .menu-list li a {
  font-size: 14px;
  font-weight: 400;
  color: var(--basic-color);
}

.devolum-intro {
  padding: 64px 0;
}

.heading-title {
  color: var(--basic-color);
  line-height: 1.5;
  font-size: 40px;
  font-weight: 700;
}
@media (max-width: 1200px) {
  .heading-title {
    font-size: 36px;
  }
}
@media (max-width: 767px) {
  .heading-title {
    font-size: 28px;
  }
}
@media (max-width: 500px) {
  .heading-title {
    font-size: 24px;
  }
}

.sub-title {
  font-size: 20px;
  font-weight: 600;
}
@media (max-width: 767px) {
  .sub-title {
    font-size: 16px;
  }
}

.title {
  font-size: 24px;
  font-weight: 600;
}
@media (max-width: 1200px) {
  .title {
    font-size: 22px;
  }
}
@media (max-width: 767px) {
  .title {
    font-size: 20px;
  }
}
@media (max-width: 500px) {
  .title {
    font-size: 18px;
  }
}

.description {
  margin-bottom: 0;
  font-size: 16px;
  color: var(--dark-color);

}
@media (max-width: 500px) {
  .description {
    font-size: 14px;
  }
}

.fs-12 {
  font-size: 12px !important;
}

.fs-14 {
  font-size: 14px !important;
}

.fs-16 {
  font-size: 16px !important;
}

.fs-18 {
  font-size: 18px !important;
}

.fs-20 {
  font-size: 20px !important;
}

.c-white {
  color: var(--basic-color) !important;
}

.c-primary {
  color: var(--primary-color) !important;
}

.c-dark {
  color: var(--dark-color) !important;
}

.c-font {
  color: var(--font-gray) !important;
}

.devolum-footer {
  background-position: center;
  background-size: cover;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(16, 17, 50, 0.95))), url("../images/footer-bg.jpg");
  background-image: linear-gradient(to bottom rgba(16, 17, 50, 0.95), rgba(16, 17, 50, 0.95)), url("../images/footer-bg.jpg");
  color: var(--basic-color);
}
.devolum-footer .description {
  font-size: 14px;
  color: var(--gray-color);
  font-weight: 300;
}
.devolum-footer .sub-menu-title {
  font-size: 18px;
  font-weight: 500;
}
@media (max-width: 767px) {
  .devolum-footer .sub-menu-title {
    font-size: 16px;
  }
}
.devolum-footer .py-64 {
  padding-bottom: 24px !important;
  border-bottom: 1px solid var(--light-border);
  margin-bottom: 64px;
}
@media (max-width: 991px) {
  .devolum-footer .py-64 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
@media (max-width: 575px) {
  .devolum-footer .py-64 {
    padding-bottom: 32px !important;
    margin-bottom: 32px;
  }
}
@media (max-width: 991px) {
  .devolum-footer .footer-content {
    margin-bottom: 16px;
  }
}
.devolum-footer .info-links span {
  color: var(--font-gray);
  font-size: 14px;
}
.devolum-footer .info-links a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.devolum-footer .info-links a:hover i {
  color: var(--basic-color);
}
.devolum-footer .info-links a i {
  color: var(--primary-color);
  -webkit-transition: 0.2s;
  transition: 0.2s;
  font-size: 16px;
}
.devolum-footer .footer-logo img {
  max-height: 76px;
  width: auto;
  max-width: 100%;
}
@media (max-width: 767px) {
  .devolum-footer .footer-logo img {
    max-height: 70px;
  }
}
.devolum-footer .menu-list {
  list-style: none;
  padding: 0;
}
.devolum-footer .menu-list li {
  margin-bottom: 16px;
}
.devolum-footer .menu-list li a {
  font-size: 14px;
  font-weight: 300;
  color: var(--gray-color);
}
.devolum-footer .menu-list li a:hover {
  color: var(--primary-color);
}
.devolum-footer .end-text {
  padding: 24px 0;
  margin-bottom: 0;
}
@media (max-width: 575px) {
  .devolum-footer .end-text {
    padding: 16px 0;
  }
}
.devolum-footer .end-text .text-center {
  font-size: 14px;
  font-weight: 300;
  color: var(--gray-color);
}
@media (max-width: 767px) {
  .devolum-footer .end-text .text-center {
    font-size: 12px;
  }
}

@media (max-width: 991px) {
  .devolum-main-content {
    margin-top: 72px;
  }
}

.nav-link {
  padding: 0px;
  color: var(--dark-color);
}
@media (max-width: 767px) {
  .nav-link {
    font-size: 14px;
  }
}

.nav-pills .nav-link.active,
.nav-pills .nav-link:hover,
.nav-pills .show > .nav-link {
  background-color: transparent;
  color: var(--primary-color);
  position: relative;
}
.nav-pills .nav-link.active::after,
.nav-pills .nav-link:hover::after,
.nav-pills .show > .nav-link::after {
  position: absolute;
  content: "";
  background-color: var(--primary-color);
  bottom: -4px;
  right: 0;
  height: 2px;
  width: 100%;
}

.about-us {
  padding-top: 64px;
  position: relative;
  z-index: 1;
}

.about-shape {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -2;
}

.border-gary {
  position: relative;
}
.border-gary .col-lg-2 {
  position: relative;
}
.border-gary .col-lg-2::after {
  position: absolute;
  content: "";
  background-color: var(--sec-gray-color);
  height: 2px;
  width: 100%;
  left: 0;
  top: 32%;
  z-index: -1;
  -webkit-transform: translate(0%, -50%);
          transform: translate(0%, -50%);
  right: 32px;
}
@media (max-width: 575px) {
  .border-gary .col-lg-2::after {
    background-color: transparent;
    right: 0;
  }
}

.about-box .box-title {
  color: var(--dark-color);
}
.about-box .box-icon {
  height: 61px;
  position: relative;
}
@media (max-width: 575px) {
  .about-box .box-icon::after {
    position: absolute;
    content: "";
    background-color: var(--sec-gray-color);
    height: 2px;
    width: 100%;
    left: 0;
    top: 50%;
    z-index: -1;
  }
}
.about-box .box-icon::before {
  position: absolute;
  content: "";
  background-color: var(--sec-gray-color);
  height: 10px;
  width: 10px;
  border-radius: 50%;
  inset-inline-end: 30%;
  top: 50%;
  z-index: 1;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
@media (max-width: 575px) {
  .about-box .box-icon::before {
    inset-inline-end: 45%;
    top: 51%;
  }
}
.about-box .box-icon img {
  width: auto;
  height: 73px;
}
.about-box .box-icon .icon {
  max-width: 30px;
  height: auto;
  position: absolute;
  right: 0px;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.about-box .description {
  color: var(--gray-font);
  font-size: 14px;
  max-width: 145px;
}

.sponsor-box {
  cursor: pointer;
  min-height: 170px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  color: var(--sec-gray-font);
  background-color: var(--light-gray-bg);
  padding: 32px;
  border-radius: 20px;
}
.sponsor-box:hover {
  background-color: var(--light-secondary);
  color: var(--basic-color);
}
.sponsor-box:hover img {
  -webkit-filter: none;
          filter: none;
}
.sponsor-box .sponsor-text {
  font-size: 12px;
}
.sponsor-box .sponsor-text,
.sponsor-box .sponsor-title {
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.sponsor-box .sponsor-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 0;
}
.sponsor-box img {
  -webkit-transition: 0.2s;
  transition: 0.2s;
  max-width: 136px;
  height: auto;
  -webkit-filter: grayscale(100%) brightness(0.65);
          filter: grayscale(100%) brightness(0.65); /* make white icon appear gray */
}

.see-more {
  position: relative;
  z-index: 2;
  font-weight: 500;
  color: var(--primary-color);
}
@media (max-width: 767px) {
  .see-more {
    font-size: 14px;
  }
  .see-more i {
    font-size: 12px;
  }
}
.see-more i {
  -webkit-padding-start: 12px;
          padding-inline-start: 12px;
  font-size: 14px;
}

.product-card {
  height: calc(100% - 32px);
  text-align: center;
  padding: 16px;
  position: relative;
  border: 1px solid var(--sec-gray-color);
  border-radius: 10px;
}
.product-card .discount-code {
  position: absolute;
  font-size: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--basic-color);
  font-weight: 600;
  width: 60px;
  height: 30px;
  background: var(--primary-color);
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 20% 100%, 0 50%);
}
.product-card .product-title {
  color: var(--dark-color);
}
.product-card .product-title,
.product-card .product-price {
  font-size: 14px;
  font-weight: 600;
}
.product-card .product-price {
  color: var(--primary-color);
}
.product-card .product-img {
  width: 100%;
  height: 280px;
  margin-bottom: 14px;
  object-fit: contain;
}

.club-staff {
  color: var(--basic-color) !important;
  padding: 64px 0;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(16, 17, 50, 0.9))), url("../images/footer-bg.jpg");
  background-image: linear-gradient(to bottom rgba(16, 17, 50, 0.9), rgba(16, 17, 50, 0.9)), url("../images/footer-bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.club-staff .nav-link {
  color: var(--basic-color);
}

.staffSwiper .swiper-slide img {
  width: 100%;
  border-radius: 8px;
}
.staffSwiper .swiper-button-next:after,
.staffSwiper .swiper-button-prev:after {
  display: none;
}
.staffSwiper .swiper-button-next,
.staffSwiper .swiper-button-prev {
  color: var(--primary-color);
  font-size: 12px;
  border: 1px solid var(--primary-color);
  border-radius: 4px;
  padding: 4px;
  height: 32px;
  width: 32px;
}

.player-box {
  position: relative;
  padding: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-radius: 8px;
  height: 100%;
  min-height: 270px;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: linear-gradient(180.05deg, rgba(122, 123, 160, 0) 59.25%, rgba(16, 17, 50, 0.9) 99.96%), url("../images/player.png");
}
.player-box .badge {
  background: #a78b5c;
  color: #fff;
  font-weight: bold;
  padding: 14px 18px;
  display: inline-block;
  text-align: center;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
  position: absolute;
  top: 0;
  inset-inline-end: 0;
}

.devolum-tables {
  padding-top: 64px;
}

.table {
  --bs-table-border-color: var(--sec-light-border);
}
.table thead tr {
  border-top: 1px solid var(--sec-light-border);
}
.table thead tr th {
  padding: 12px 0;
  background-color: var(--light-gray-bg);
  font-size: 12px;
  font-weight: 400;
  color: var(--gray-font);
}
.table thead tr th:first-child {
  text-align: center;
}
.table tbody tr:nth-child(even) td,
.table tbody tr:nth-child(even) th {
  background-color: var(--light-gray-bg);
}
.table tbody tr th {
  text-align: center;
}
.table tbody tr td,
.table tbody tr th {
  padding: 14px 0;
  font-weight: 400;
  font-size: 12px;
  color: var(--dark-color);
}
.table tbody tr td.club-box img {
  height: 20px;
  width: auto;
}

.matches-box {
  position: relative;
  z-index: 1;
}
.matches-box .border-light {
  border-bottom: 1px solid var(--sec-light-border);
}
.matches-box .match-title {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--basic-color);
  background-color: var(--primary-color);
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.matches-box .match-card {
  background-color: var(--basic-color);
  margin-bottom: 16px;
  border: 1px solid var(--sec-light-border);
}
.matches-box .match-card:last-child {
  margin-bottom: 0;
}
.matches-box .match-logo img {
  height: 40px;
  width: auto;
  margin-bottom: 8px;
}
.matches-box .logo-title {
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--dark-color);
}
.matches-box .match-shape {
  padding: 12px;
  background-color: var(--primary-color);
  min-width: 40px;
  height: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--basic-color);
  font-weight: 700;
  font-size: 14px;
}
.matches-box .match-description {
  padding: 14px 12px;
}
.matches-box .match-description .match-time {
  position: relative;
}
.matches-box .match-description .match-time::after {
  position: absolute;
  content: "";
  background-color: var(--sec-light-border);
  height: 100%;
  width: 1px;
  inset-inline-end: -4px;
  top: 0;
}
.matches-box .match-description .match-time,
.matches-box .match-description .match-text {
  font-size: 10px;
  color: var(--dark-color);
  margin-bottom: 0;
}
.matches-box .match-description .see-more {
  font-size: 10px;
}

.contact-us {
  background-image: url("../images/maaap.png");
  padding: 64px 0 32px 0;
}

.form-box {
  background-color: var(--basic-color);
  min-height: 500px;
  border: 2px solid var(--primary-color);
  border-radius: 10px;
  padding: 30px;
}
.form-box .form-title {
  color: var(--dark-color);
  font-size: 24px;
  font-weight: 600;
}
.form-box .form-description {
  line-height: 1.5;
  max-width: 80%;
  font-size: 12px;
  color: var(--gray-font);
}

.contact-card {
  border-radius: 10px;
  -webkit-box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.06);
          box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.06);
  background-color: var(--basic-color);
  padding: 16px;
  padding-bottom: 0;
}
@media (max-width: 600px) {
  .contact-card {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .contact-card .logo-box,
  .contact-card .card-content {
    width: 100% !important;
  }
}
.contact-card .logo-box {
  margin-bottom: 16px;
  border-radius: 10px;
  padding: 16px;
  border: 1px solid var(--th-light-border);
  height: 100%;
  min-height: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.contact-card .logo-box img {
  max-height: 40px;
  width: auto;
}
.contact-card .card-content {
  margin-bottom: 16px;
}
.contact-card .card-content .card-text {
  font-size: 12px;
  color: var(--dark-gray-font);
}
.contact-card .card-content .card-title {
  font-weight: 400;
  font-size: 14px;
  color: var(--dark-color);
  border-bottom: 1px solid var(--th-light-border);
  padding-bottom: 12px;
}
.contact-card .card-content .btn-link {
  text-decoration: none;
  border-radius: 5px;
  padding: 10px 14px;
  border: 1px solid var(--th-light-border);
  font-weight: 700;
  font-size: 12px;
  color: var(--dark-gray);
}
.contact-card .card-content .btn-link img {
  -webkit-padding-end: 8px;
          padding-inline-end: 8px;
}
.contact-card .card-content .whatsapp-btn {
  background-color: var(--green-color);
  height: 40px;
  width: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 18px;
}

.z-index-2 {
  position: relative;
  z-index: 2 !important;
}

.devolum-news {
  padding: 64px 0 32px 0;
  background-color: var(--secondary-color);
  position: relative;
}

.news-card {
  min-height: 400px;
  padding: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-radius: 10px;
  height: calc(100% - 32px);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(41.87%, rgba(16, 17, 50, 0)), color-stop(59.42%, rgba(26, 26, 78, 0.64)), color-stop(73.33%, #101132)), url("../images/news-1.png");
  background-image: linear-gradient(to bottom, rgba(16, 17, 50, 0) 41.87%, rgba(26, 26, 78, 0.64) 59.42%, #101132 73.33%), url("../images/news-1.png");
}

.news-card .text-time,
.news-content .text-time {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: var(--light-font);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
}
.news-card .text-time img,
.news-content .text-time img {
  -webkit-padding-end: 4px;
          padding-inline-end: 4px;
}
.news-card .card-title,
.news-content .card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--basic-color);
  font-size: 17px;
  font-weight: 400;
  margin-bottom: 16px;
  line-height: 1.5;
}
.news-card .see-more,
.news-content .see-more {
  font-weight: 400;
}

.card-img img {
  width: 100%;
  border-radius: 10px;
}

.achievements {
  padding: 64px 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(16, 17, 50, 0.94)), to(rgba(16, 17, 50, 0.94))), url("../images/achievements.jpg");
  background-image: linear-gradient(to bottom, rgba(16, 17, 50, 0.94), rgba(16, 17, 50, 0.94)), url("../images/achievements.jpg");
}

.achieve-box {
  cursor: pointer;
}
.achieve-box:hover .gradient-overlay {
  bottom: 0 !important;
}
.achieve-box:hover .img-title {
  bottom: 32px !important;
}
.achieve-box .achieve-shape {
  width: 22%;
}
.achieve-box .img-box {
  overflow: hidden;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(36.89%, rgba(0, 0, 0, 0)), color-stop(56.53%, rgba(16, 17, 50, 0.5)), to(#101132));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 36.89%, rgba(16, 17, 50, 0.5) 56.53%, #101132 100%);
  position: relative;
  width: 78%;
  border: 2px solid rgba(171, 150, 111, 0.1019607843);
  border-radius: 4px 0px 0px 4px;
}
.achieve-box .img-box .gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -100%;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(36.89%, rgba(0, 0, 0, 0)), color-stop(56.53%, rgba(16, 17, 50, 0.5)), to(#101132));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 36.89%, rgba(16, 17, 50, 0.5) 56.53%, #101132 100%);
  z-index: 2;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.achieve-box .img-box .img-title {
  -webkit-transition: 0.2s;
  transition: 0.2s;
  line-height: 1.5;
  z-index: 3;
  text-align: center;
  position: absolute;
  color: var(--basic-color);
  bottom: -100%;
  width: 80%;
  -webkit-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
  inset-inline-end: 50%;
}
.achieve-box .img-box img {
  max-height: 300px;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the div */
  border-radius: 4px 0px 0px 4px;
}

.achieveSwiper .swiper-btn {
  position: absolute;
  top: 22px;
  left: 0;
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
}
.achieveSwiper .swiper-button-next:after,
.achieveSwiper .swiper-button-prev:after {
  display: none;
}
.achieveSwiper .swiper-button-next,
.achieveSwiper .swiper-button-prev {
  position: static;
  color: var(--primary-color);
  font-size: 12px;
  border: 1px solid var(--primary-color);
  border-radius: 4px;
  padding: 4px;
  height: 32px;
  width: 32px;
}

.breadcrumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
}
.breadcrumb i {
  font-size: 8px;
}
.breadcrumb span,
.breadcrumb a {
  font-size: 14px;
  color: var(--basic-color);
}
.breadcrumb span:last-child {
  color: var(--primary-color);
}

.blog-card {
  position: relative;
  min-height: 400px;
  padding: 32px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-radius: 10px;
  height: calc(100% - 32px);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(45.23%, rgba(16, 17, 50, 0)), color-stop(57.67%, rgba(26, 26, 78, 0.635231)), color-stop(71.51%, #101132)), url("../images/news-1.png");
  background-image: linear-gradient(to bottom, rgba(16, 17, 50, 0) 45.23%, rgba(26, 26, 78, 0.635231) 57.67%, #101132 71.51%), url("../images/news-1.png");
}

.blog-card .text-time,
.blog-content .text-time {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: var(--light-font);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
}
.blog-card .text-time img,
.blog-content .text-time img {
  -webkit-padding-end: 4px;
          padding-inline-end: 4px;
}
.blog-card .card-title,
.blog-content .card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--basic-color);
  font-size: 17px;
  font-weight: 400;
  margin-bottom: 16px;
  line-height: 1.5;
}
.blog-card .see-more,
.blog-content .see-more {
  font-weight: 400;
}

.blog-pagination ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
}
.blog-pagination ul li a {
  color: var(--dark-color);
  font-weight: 500;
  height: 40px;
  width: 40px;
  border-radius: 6px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.blog-pagination ul li a.active, .blog-pagination ul li a:hover {
  background-color: var(--light-active);
  color: var(--primary-color);
}

.devolum-single .title {
  position: relative;
}
.devolum-single .title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 2px;
  width: 45px;
  border-radius: 16px;
  background-color: var(--primary-color);
}

.single-content .post-img {
  border: 1px solid var(--sec-gray-color);
  border-radius: 10px;
}
.single-content .post-img .p-box {
  padding: 16px 24px;
}
.single-content .post-img .post-time,
.single-content .post-img .post-view,
.single-content .post-img .post-share {
  color: var(--dark-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  font-size: 14px;
}
.single-content .post-img .post-image,
.single-content .post-img img {
  border-radius: 0px 0px 10px 10px;
}
.single-content .description {
  color: var(--dark-gray-font);
  line-height: 1.7;
}
.single-content .box-images {
  gap: 16px;
}
.single-content .box-images img {
  width: 48%;
  border-radius: 10px;
  height: 100%;
}

.post-card {
  position: relative;
  border: 1px solid var(--sec-gray-color);
  border-radius: 10px;
  padding: 12px;
}
.post-card .post-img img {
  width: 100%;
  min-height: 100px;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
}
.post-card .text-time {
  font-size: 10px;
  color: var(--primary-color);
  margin-bottom: 8px;
}
.post-card .text-time img {
  height: 16px;
  width: auto;
}
.post-card .card-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--dark-color);
  margin-bottom: 8px;
  line-height: 1.5;
}
.post-card .see-more {
  font-size: 12px;
  font-weight: 500;
}

.video-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: opacity 0.8s ease-in-out;
  transition: opacity 0.8s ease-in-out;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  z-index: 0;
}

.content-wrapper {
  position: relative;
  z-index: 0;
  direction: rtl;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (min-width: 991px) {
  .content-wrapper {
    height: calc(100vh - 189px);
  }
}

.thumbnail {
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}
.thumbnail img {
  width: 170px;
  height: 130px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
}

.thumbnail:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  border-color: #f59e0b;
}

.thumbnail.active {
  border-radius: 16px;
  border: 6px solid var(--primary-color);
  -webkit-box-shadow: 0 0 20px rgb(171, 150, 111);
          box-shadow: 0 0 20px rgb(171, 150, 111);
}

.nav-arrow {
  width: 40px;
  height: 40px;
  border: 1px solid var(--basic-color);
  border-radius: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.nav-arrow:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.scroll-indicator {
  height: 120px;
  width: 4px;
  border-radius: 2px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 8px 0;
}

.indicator-segment {
  border-radius: 30%;
  width: 8px;
  height: 24px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 30px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.indicator-segment.active {
  background: white;
  -webkit-box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
          box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.text-content {
  -webkit-animation: fadeInUp 1s ease-out;
          animation: fadeInUp 1s ease-out;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.btn-custom {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.btn-custom:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  -webkit-box-shadow: 0 10px 25px rgba(245, 158, 11, 0.4);
          box-shadow: 0 10px 25px rgba(245, 158, 11, 0.4);
}

@media (max-width: 768px) {
  .content-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .left-sidebar {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    height: auto;
    padding: 20px 0;
  }
  .center-content {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    text-align: center;
    padding: 40px 20px;
  }
  .right-sidebar {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    height: auto;
    padding: 20px 0;
  }
  .video-container {
    height: 100vh;
  }
}
.text-black {
  color: #000;
}

.slider-box {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
}
@media (max-width: 991px) {
  .slider-box {
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
  }
}

.club-logo {
  background-image: url("../images/Vector 39.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 300px;
  width: 250px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  inset-inline-end: -126px;
  top: -40px;
  bottom: 0;
}
.club-logo img {
  height: 210px;
  width: auto;
}
@media (max-width: 991px) {
  .club-logo {
    height: 180px;
    width: 150px;
  }
  .club-logo img {
    height: 100px;
    width: auto;
  }
}

.about-club {
  position: relative;
  background-color: var(--light-active);
  padding: 64px 0;
  max-width: 83%;
}
.about-club .about-content {
  -webkit-padding-start: 123px;
          padding-inline-start: 123px;
}
.about-club .about-content .title {
  position: relative;
}
.about-club .about-content .title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 2px;
  width: 45px;
  border-radius: 16px;
  background-color: var(--primary-color);
}
.about-club .about-content .description {
  color: var(--dark-gray-font);
  max-width: 829px;
}
.about-club .club-logo {
  background-image: url("../images/Vector 39.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 300px;
  width: 250px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  inset-inline-end: -126px;
  top: -40px;
  bottom: 0;
}
.about-club .club-logo img {
  height: 210px;
  width: auto;
}
@media (max-width: 991px) {
  .about-club .club-logo {
    height: 180px;
    width: 150px;
  }
  .about-club .club-logo img {
    height: 100px;
    width: auto;
  }
}
@media (max-width: 1400px) {
  .about-club {
    position: relative;
    background-color: var(--light-active);
    padding: 64px 0;
    max-width: unset;
  }
  .about-club .about-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 16px;
    -webkit-padding-start: unset;
            padding-inline-start: unset;
  }
  .about-club .about-container .about-content {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    -webkit-padding-start: 0px;
            padding-inline-start: 0px;
  }
  .about-club .about-container .club-logo {
    position: relative;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    top: unset;
    inset-inline-end: unset;
  }
}

.historySwiper .swiper-btn {
  position: absolute;
  top: 22px;
  left: 0;
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
}
.historySwiper .swiper-button-next:after,
.historySwiper .swiper-button-prev:after {
  display: none;
}
.historySwiper .swiper-button-next,
.historySwiper .swiper-button-prev {
  position: static;
  color: var(--primary-color);
  font-size: 12px;
  border: 1px solid var(--primary-color);
  border-radius: 4px;
  padding: 4px;
  height: 32px;
  width: 32px;
}
.historySwiper .swiper-slide {
  position: relative;
}
.historySwiper .swiper-slide .about-box .box-icon::before {
  inset-inline-end: 40% !important;
}
.historySwiper .swiper-slide::after {
  position: absolute;
  content: "";
  background-color: var(--sec-gray-color);
  height: 2px;
  width: 100%;
  left: 0;
  top: 32%;
  z-index: -1;
  -webkit-transform: translate(0%, -50%);
          transform: translate(0%, -50%);
  right: 32px;
}
@media (max-width: 575px) {
  .historySwiper .swiper-slide::after {
    background-color: transparent;
    right: 0;
  }
}

.Club-companies {
  padding: 64px 0 32px 0;
  color: var(--basic-color);
  position: relative;
  background-color: var(--secondary-color);
}
.Club-companies .companies-shape {
  position: absolute;
  top: 0;
  z-index: -1;
  height: 100%;
  inset-inline-end: 0px;
  z-index: 1;
}

.company-card {
  height: calc(100% - 32px);
  z-index: 3;
  position: relative;
  background-color: var(--basic-color);
  padding: 24px;
  border-radius: 8px;
  border: 3px solid var(--primary-color);
}
.company-card .company-logo {
  position: absolute;
  top: -32px;
  inset-inline-end: 8px;
  background-image: url("../images/logo-bg.png");
  background-size: cover;
  background-position: center;
  width: 82px;
  height: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.company-card .company-logo img {
  max-width: 62px;
}
.company-card .company-title,
.company-card .company-description {
  max-width: 80%;
}
.company-card .company-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--dark-color);
}
.company-card .company-description {
  font-size: 14px;
  color: var(--gray-font);
  line-height: 1.7;
}
.company-card .see-more {
  font-size: 14px;
  font-weight: 400;
}

.grid-boxes {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2, 1fr); /* 2 equal columns = 50% each */
  width: 100%; /* container takes full width */
}
.grid-boxes .inner-container {
  max-width: 450px; /* adjust like your global .container */
  margin: 0 auto; /* center content */
  padding-inline: 12px;
}
@media (max-width: 767px) {
  .grid-boxes {
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: repeat(1, 1fr);
  }
}

.grid-box {
  height: 100%;
}
@media (max-width: 767px) {
  .grid-box.iconone {
    -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
            order: 0;
  }
  .grid-box.icontwo {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .grid-box.content-box {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}

.content-box {
  padding: 64px 0;
  position: relative;
}
.content-box img {
  position: absolute;
  height: 100%;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
}
.content-box .title {
  position: relative;
}
.content-box .title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 2px;
  width: 45px;
  border-radius: 16px;
  background-color: var(--primary-color);
}
.content-box .description {
  color: var(--dark-gray-font);
}

.icon-box {
  min-height: 200px;
  position: relative;
  background-color: var(--light-active);
}
.icon-box img {
  position: absolute;
  top: 0;
  max-height: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.icon-box.icontwo img {
  bottom: 0;
  top: auto;
}

.directors-box {
  padding: 64px 0;
}
@media (max-width: 767px) {
  .directors-box {
    padding-top: 52px;
  }
}

.director-content {
  min-height: 420px;
  background-color: var(--primary-color);
  border-radius: 12px;
  position: relative;
  color: var(--basic-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 32px;
}
@media (max-width: 1200px) {
  .director-content {
    min-height: 300px;
  }
}
@media (max-width: 767px) {
  .director-content {
    min-height: 200px;
  }
  .director-content .box-title {
    font-size: 20px !important;
  }
  .director-content .box-description {
    font-size: 16px !important;
  }
}
.director-content .directors-shape1,
.director-content .directors-shape2 {
  position: absolute;
  height: 100%;
  top: 0;
  bottom: 0;
}
.director-content .directors-shape1 {
  inset-inline-end: 0;
}
.director-content .directors-shape2 {
  inset-inline-start: 0;
}
.director-content .box-content {
  text-align: center;
}
.director-content .director-img {
  position: absolute;
  top: -100px;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
  max-height: 100%;
}
@media (max-width: 1200px) {
  .director-content .director-img {
    max-height: 250px;
    top: -64px;
  }
}
@media (max-width: 767px) {
  .director-content .director-img {
    max-height: 150px;
    top: -52px;
  }
}
.director-content .box-title {
  font-size: 26px;
  font-weight: 600;
}
.director-content .box-description {
  font-size: 20px;
}

.member-card {
  text-align: center;
  height: calc(100% - 32px);
}
.member-card .member-img {
  width: 100%;
  height: auto;
}
.member-card .member-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--dark-color);
}
@media (max-width: 575px) {
  .member-card .member-title {
    font-size: 16px;
  }
}
.member-card .member-description {
  font-size: 14px;
  color: var(--primary-color);
}
@media (max-width: 575px) {
  .member-card .member-description {
    font-size: 12px;
  }
}

.contact-page {
  position: relative;
  padding-bottom: 200px;
}
@media (max-width: 767px) {
  .contact-page {
    padding-bottom: 100px;
  }
  .contact-page .form-box {
    min-height: 500px !important;
  }
  .contact-page .map-bg {
    height: 30% !important;
  }
}
.contact-page .map-bg {
  position: absolute;
  bottom: 0;
  height: 50%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.contact-page .form-box {
  position: relative;
  border: 1px solid var(--primary-color);
  min-height: 600px;
}
.contact-page .form-box .form-description {
  max-width: 450px;
  line-height: 1.7;
}

.contact-box {
  background-color: var(--basic-color);
  margin-bottom: 32px;
  height: calc(100% - 32px);
  position: relative;
  border: 1px solid var(--primary-color);
  border-radius: 8px;
  padding: 12px 20px;
}
.contact-box .contact-icon {
  position: absolute;
  background-image: url("../images/contact-bg.png");
  background-size: cover;
  background-position: center;
  height: 60px;
  width: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  inset-inline-end: 20px;
  top: -22px;
}
.contact-box .contact-icon img {
  max-width: 20px;
  height: auto;
}
.contact-box .contact-content .contact-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--dark-color);
  position: relative;
}
.contact-box .contact-content .contact-title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 2px;
  width: 45px;
  border-radius: 16px;
  background-color: var(--primary-color);
}
.contact-box .contact-content .contact-description {
  font-size: 16px;
  color: var(--dark-gray-font);
  margin-bottom: 0;
}

.club-teams .swiper-slide {
  position: relative;
}

.teams-filter {
  background-color: var(--light-active);
  border-radius: 8px;
  padding: 12px;
}
.teams-filter ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.teams-filter ul .team-tab {
  background-color: var(--basic-color);
  padding: 16px;
  margin-bottom: 8px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.teams-filter ul .team-tab:first-child {
  border-radius: 8px 8px 0 0;
}
.teams-filter ul .team-tab.active, .teams-filter ul .team-tab:hover {
  background-color: var(--primary-color);
}
.teams-filter ul .team-tab.active a, .teams-filter ul .team-tab:hover a {
  color: var(--basic-color);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.teams-filter ul .team-tab:last-child {
  margin-bottom: 0;
  border-radius: 0px 0px 8px 8px;
}
.teams-filter ul .team-tab a {
  color: var(--dark-color);
  font-size: 14px;
  font-weight: 500;
}

.team-content .title {
  color: var(--dark-color);
  position: relative;
}
.team-content .title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 2px;
  width: 45px;
  border-radius: 16px;
  background-color: var(--primary-color);
}
.team-content .description {
  color: var(--dark-gray-font);
}
.team-content .team-img {
  max-height: 380px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
}

@media (max-width: 991px) {
  .sticky-top {
    position: static;
  }
}

.club-team {
  color: var(--basic-color) !important;
}
.club-team .staff-title {
  color: var(--basic-color) !important;
}
.club-team .swiper-btn {
  position: absolute;
  top: 22px;
  left: 0;
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
}
.club-team .swiper-button-next:after,
.club-team .swiper-button-prev:after {
  display: none;
}
.club-team .swiper-button-next,
.club-team .swiper-button-prev {
  position: static;
  color: var(--primary-color);
  font-size: 12px;
  border: 1px solid var(--primary-color);
  border-radius: 4px;
  padding: 4px;
  height: 32px;
  width: 32px;
}

/* Style for second-level dropdown */
.dropdown-menu li {
  position: relative;
}

.dropdown-menu .dropdown-submenu {
  display: none;
  position: absolute;
  right: 100%;
  top: -7px;
}

.dropdown-menu .dropdown-submenu-left {
  left: 100%;
  right: auto;
}

.dropdown-menu > li:hover > .dropdown-submenu {
  display: block;
}

.no-match {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.no-match img {
  max-width: 170px;
  height: auto;
}
.no-match .no-match-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--dark-color);
}
.no-match .no-match-text {
  color: var(--dark-gray-font);
}

.matches-result .table .club-box img {
  height: 28px;
  width: auto;
}
.matches-result .matches-box {
  height: calc(100% - 32px);
}
.matches-result .matches-box .match-logo img {
  height: 60px;
  width: auto;
}
.matches-result .matches-box .match-title {
  border-radius: 8px 8px 0 0;
}
.matches-result .matches-box .match-card:last-child {
  border-radius: 0 0 8px 8px;
}

.results-filter label {
  margin-bottom: 12px;
  color: var(--dark-color);
}
.results-filter label img {
  -webkit-padding-end: 8px;
          padding-inline-end: 8px;
}
.results-filter .form-select {
  color: var(--dark-color);
}
.results-filter .form-select:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
  border-color: var(--primary-color);
}

.individual-games {
  padding: 64px 0 32px;
  position: relative;
}
.individual-games .box-shape {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  height: 100%;
}
.individual-games .game-card {
  background-color: var(--basic-color);
  height: calc(100% - 32px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  position: relative;
  border: 1px solid var(--primary-color);
  border-radius: 10px;
  padding: 32px;
}
.individual-games .game-card .card-shape {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  height: 100%;
}
.individual-games .game-card .game-icon {
  max-width: 90px;
  height: auto;
  margin-bottom: 32px;
}
.individual-games .game-card .icon-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--dark-color);
}

.game-staff {
  padding: 0;
  background-image: none;
}
.game-staff .nav-link {
  color: var(--dark-color);
}

.first-shape {
  position: relative;
}
.first-shape .home-shape {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  height: 100%;
  z-index: 1;
  max-width: 100%;
}

.sec-shape {
  position: relative;
}
.sec-shape .home-shape {
  max-width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  height: 100%;
}

@media (max-width: 991px) {
  .first-shape .home-shape,
  .sec-shape .home-shape {
    display: none;
  }
}

.title-border {
  position: relative;
}
.title-border::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 2px;
  width: 45px;
  border-radius: 16px;
  background-color: var(--primary-color);
}

.about-academy {
  padding-top: 32px;
}
@media (max-width: 991px) {
  .about-academy {
    padding-top: 0px;
  }
}
.about-academy .description {
  color: var(--dark-gray-font);
}
@media (max-width: 991px) {
  .about-academy .about-content {
    margin-bottom: 64px !important;
  }
}

.academy-img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  position: relative;
}
.academy-img img {
  height: auto;
  width: 100%;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
}
.academy-img .aca-img,
.academy-img .sec-img {
  width: 55%;
  border-radius: 18px;
  -webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12);
  border: 8px solid var(--basic-color);
}
.academy-img .aca-img {
  position: absolute;
  inset-inline-start: 0;
  top: -32px;
}

.academy-feature {
  background-color: var(--light-active);
}
@media (max-width: 991px) {
  .academy-feature {
    padding: 64px 0 32px 0;
  }
}
.academy-feature .col-lg-4:last-child .feature-box {
  -webkit-border-end: 0;
          border-inline-end: 0;
}

.feature-box {
  padding: 64px 0;
  -webkit-border-end: 6px solid var(--basic-color);
          border-inline-end: 6px solid var(--basic-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (max-width: 991px) {
  .feature-box {
    -webkit-border-end: 0;
            border-inline-end: 0;
    padding: 0;
    padding-bottom: 32px;
  }
}
.feature-box .box-icon {
  height: 61px;
  position: relative;
}
.feature-box .box-icon img {
  width: auto;
  height: 73px;
}
.feature-box .box-icon .icon {
  max-width: 30px;
  height: auto;
  position: absolute;
  right: 0px;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.feature-box .box-title {
  color: var(--dark-color);
  font-size: 18px;
  font-weight: 600;
}
.feature-box .description {
  color: var(--gray-font);
  font-size: 14px;
}

@media (min-width: 1400px) {
  .player-modal {
    --bs-modal-width: 55vw;
  }
}
@media (min-width: 991px) {
  .player-modal {
    --bs-modal-width: 65vw;
  }
}
.player-modal .modal-dialog .modal-content .modal-body {
  padding: 0;
  border: 6px solid var(--primary-color);
  border-radius: 10px;
}
@media (max-width: 991px) {
  .player-modal .modal-dialog .modal-content .modal-body .gap-16 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .player-modal .modal-dialog .modal-content .modal-body .gap-16 .player-img {
    /*  width: 100%;
    order: 2;*/
    display: none;
  }
  .player-modal .modal-dialog .modal-content .modal-body .gap-16 .player-content {
    width: 100%;
  }
}
.player-modal .modal-dialog .modal-content .modal-body .h-100 {
  height: 1;
}
.player-modal .modal-dialog .modal-content .modal-body .player-img {
  width: 40%;
  height: 100%;
  position: relative;
  padding: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-radius: 8px;
  height: 100%;
  min-height: 432px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../images/player.png");
}
.player-modal .modal-dialog .modal-content .modal-body .player-img .badge {
  background: #a78b5c;
  color: #fff;
  font-weight: bold;
  padding: 14px 18px;
  display: inline-block;
  text-align: center;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
  position: absolute;
  top: 0;
  inset-inline-end: 0;
}
.player-modal .modal-dialog .modal-content .modal-body .player-content {
  width: 60%;
  padding: 20px;
}
.player-modal .modal-dialog .modal-content .modal-body .player-content .box-title {
  color: var(--primary-color);
  font-size: 20px;
  font-weight: 700;
}
.player-modal .modal-dialog .modal-content .modal-body .player-content .player-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--sec-gray-color);
  border-radius: 8px;
}
.player-modal .modal-dialog .modal-content .modal-body .player-content .player-list li {
  padding: 20px 16px;
  color: var(--dark-color);
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid var(--sec-gray-color);
}
.player-modal .modal-dialog .modal-content .modal-body .player-content .player-list li:last-child {
  border-bottom: 0;
}
.player-modal .modal-dialog .modal-content .modal-body .player-content .player-list li span {
  font-size: 14px;
  color: var(--dark-gray-font);
  -webkit-padding-end: 16px;
          padding-inline-end: 16px;
}

.auctions-tenders .nav-pills {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 16px;
  background-color: var(--light-active);
  padding: 10px;
  border-radius: 8px;
}
@media (max-width: 575px) {
  .auctions-tenders .nav-pills {
    gap: 8px;
  }
}
.auctions-tenders .nav-pills .nav-item .nav-link {
  font-size: 12px;
  font-weight: 500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 40px;
  padding: 16px 32px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border-radius: 8px;
  color: var(--dark-color);
}
@media (max-width: 575px) {
  .auctions-tenders .nav-pills .nav-item .nav-link {
    height: 34px;
    padding: 16px 24px;
  }
}
.auctions-tenders .nav-pills .nav-item .nav-link.active, .auctions-tenders .nav-pills .nav-item .nav-link:hover {
  background-color: var(--primary-color);
  color: var(--basic-color);
}
.auctions-tenders .nav-pills .nav-item .nav-link::after {
  background-color: transparent;
}

.auction-card {
  position: relative;
  margin-bottom: 32px;
  /* width: max-content; */
  height: calc(100% - 32px);
  border: 1px solid var(--sec-light-border);
  border-radius: 10px;
  padding: 24px;
}



@media (min-width: 768px) {
  .auction-card {
    width: 100%;
  }
}

.auction-card .card-img {
  position: relative;
}
@media (max-width: 575px) {
  .auction-card .card-img {
    margin-bottom: 16px;
  }
}
.auction-card .card-img img {
  border-radius: 10px;
  width: 100%;
  height: 200px;
  -o-object-fit: contain;
     object-fit: contain;
}
.auction-card .card-img span {
  inset-inline-end: 16px;
  top: 0;
  left: 0;
  width: fit-content;
  position: absolute;
  color: var(--basic-color);
  font-size: 12px;
  background-color: var(--primary-color);
  padding: 10px 16px;
  border-radius: 8px;
}

.aucation-img img {
  height: 200px;
  width: 250px;
  object-fit: cover;
}

html[dir="rtl"] .auction-card .card-img span {
  right: 0;
}


.text {
  background-color: var(--primary-color);
  border-radius: 8px;
  padding: 8px;
  color: var(--basic-color);
    position: absolute;
  top: 12px;
  right: 12px
}

.auction-card .card-content .card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--dark-color);
  margin-bottom: 16px;
}
.auction-card .card-content .card-description {
  font-size: 14px;
  color: var(--gray-font);
}
.auction-card .card-content .crad-time {
  font-size: 14px;
  color: var(--primary-color);
}
.auction-card .card-content .crad-time span {
  color: var(--dark-color);
  -webkit-padding-start: 8px;
          padding-inline-start: 8px;
}
.auction-card .card-content .main-btn {
  font-size: 14px;
  font-weight: 500;
  width: fit-content;
  color: var(--dark-gray-font);
  color: var(--basic-color);
}


.single-main-card {
  padding: 24px;
  margin-bottom:18px;
  border-radius: 12px;
  background-color: var(--basic-color);
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12);
}

.aucation-img .box-img {
width: -webkit-fill-available;
height: 300px;
object-fit: cover;
}

.main-contact-form {
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12);
  padding: 24px;
border-radius: 16px;
}

.gallery-photos {
  margin: 32px 0px;
  padding: 16px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.12);
  border-radius: 16px;
}

.club-health .description {
  font-size: 14px;
  color: var(--dark-color);
}
.club-health .health-box .box-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-color);
}

.list-club {
  font-size: 14px;
  color: var(--dark-color);
  list-style: none;
  margin: 0;
  padding: 0;
}
.list-club li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  gap: 12px;
  margin-bottom: 8px;
}

.devolum-gallery .row .gallery-box img {
  width: 100%;
  height: 208px;
  -o-object-fit: cover;
     object-fit: cover;
  margin-bottom: 24px;
}
@media (max-width: 991px) {
  .devolum-gallery .row .gallery-box img {
    border-radius: 10px;
  }
}
@media (max-width: 767px) {
  .devolum-gallery .row .gallery-box img {
    border-radius: 10px !important;
  }
}

.rad-r img {
  border-radius: 0px 10px 0px 0px;
}

@media (max-width: 991px) {
  .rad-r-md img {
    border-radius: 0px 10px 10px 0px !important;
  }
}

.rad-t img {
  border-radius: 10px 0px 0px 0px;
}

.rad-b img {
  border-radius: 0px 0px 10px 0px;
}

.rad-l img {
  border-radius: 0px 0px 0px 10px;
}

@media (max-width: 991px) {
  .rad-l-md img {
    border-radius: 10px 0px 0px 10px !important;
  }
}

.gallerySwiper .swiper-btn {
  position: absolute;
  top: 22px;
  left: 0;
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
}
.gallerySwiper .swiper-button-next:after,
.gallerySwiper .swiper-button-prev:after {
  display: none;
}
.gallerySwiper .swiper-button-next,
.gallerySwiper .swiper-button-prev {
  position: static;
  color: var(--primary-color);
  font-size: 12px;
  border: 1px solid var(--primary-color);
  border-radius: 4px;
  padding: 4px;
  height: 32px;
  width: 32px;
}

.timing-table .table-box {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #ddd;
}
.timing-table .table-box table {
  margin-bottom: 0;
  border-style: hidden;
  border-collapse: collapse;
  width: 100%;
}
.timing-table .table-box table thead tr th {
  height: 54px;
  text-align: center;
  background-color: var(--primary-color);
  color: var(--basic-color);
  font-size: 16px;
  font-weight: 500;
}
@media (max-width: 767px) {
  .timing-table .table-box table thead tr th {
    font-size: 14px;
  }
}
.timing-table .table-box table tbody tr td {
  vertical-align: middle;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: var(--dark-color);
  height: 64px;
}
@media (max-width: 767px) {
  .timing-table .table-box table tbody tr td {
    font-size: 12px;
  }
}

.booking-packages .col-lg-3:nth-child(odd) .package-box .box-shape {
  inset-inline-end: 0;
}
.booking-packages .col-lg-3:nth-child(even) .package-box .box-shape {
  inset-inline-start: 0;
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}

.package-box {
  height: calc(100% - 32px);
  position: relative;
  border-radius: 10px;
  border: 1px solid var(--sec-gray-color);
  padding: 24px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.package-box .health-icon2 {
  display: none;
}
.package-box .box-shape {
  position: absolute;
  top: 0;
  max-height: 100%;
  z-index: 0;
}
.package-box:hover, .package-box.active {
  background-color: var(--primary-color);
}
.package-box:hover .box-title,
.package-box:hover .price-text,
.package-box:hover .list-club li, .package-box.active .box-title,
.package-box.active .price-text,
.package-box.active .list-club li {
  color: var(--basic-color) !important;
}
.package-box:hover .main-btn, .package-box.active .main-btn {
  background-color: var(--basic-color);
  color: var(--primary-color);
}
.package-box:hover .health-icon, .package-box.active .health-icon {
  display: none;
}
.package-box:hover .health-icon2, .package-box.active .health-icon2 {
  display: block;
}
.package-box .box-title {
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  z-index: 1;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  text-align: center;
  color: var(--primary-color);
  font-weight: 600;
}
.package-box .price-text {
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  z-index: 1;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  text-align: center;
  color: var(--dark-color);
  font-size: 16px;
  font-weight: 500;
}
.package-box .price-text span {
  font-size: 24px;
  font-weight: 700;
}
.package-box .main-btn {
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  z-index: 1;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  position: static;
}
.package-box .main-btn:hover {
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

.auction-page .aucation-img {
  position: relative;
}
.auction-page .aucation-img .aucation-list {
  position: absolute;
  inset-inline-end: 24px;
  top: 0%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 24px;
}
@media (max-width: 767px) {
  .auction-page .aucation-img .aucation-list {
    gap: 12px;
    inset-inline-end: 12px;
  }
}
.auction-page .aucation-img .aucation-list li {
  background-color: var(--basic-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-radius: 8px;
  border: 2px solid var(--primary-color);
  padding: 16px;
  width: 110px;
}
@media (max-width: 767px) {
  .auction-page .aucation-img .aucation-list li {
    padding: 10px;
    width: 60px;
  }
  .auction-page .aucation-img .aucation-list li .time-text {
    font-size: 16px !important;
    margin-bottom: 6px !important;
  }
  .auction-page .aucation-img .aucation-list li .img-text {
    font-size: 12px !important;
  }
}
.auction-page .aucation-img .aucation-list li .time-text {
  font-size: 24px;
  font-weight: 700;
  color: var(--dark-color);
}
.auction-page .aucation-img .aucation-list li .img-text {
  font-size: 16px;
  color: var(--primary-color);
}
.auction-page .aucation-img .box-img {
  border-radius: 10px;
}
.auction-page .card-content .text {
  color: var(--basic-color);
  font-size: 12px;
  background-color: var(--primary-color);
  padding: 10px 16px;
  border-radius: 8px;
}
.auction-page .card-content .card-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--dark-color);
  margin-top: 24px;
}
.auction-page .card-content .description {
  color: var(--dark-gray-font);
}
.auction-page .card-content .crad-time {
  font-size: 14px;
  color: var(--primary-color);
  margin-bottom: 24px;
}
@media (max-width: 1200px) {
  .auction-page .card-content .crad-time {
    margin-bottom: 54px;
  }
}
.auction-page .card-content .crad-time span {
  color: var(--dark-color);
  -webkit-padding-start: 8px;
          padding-inline-start: 8px;
}
.auction-page .card-content .main-btn {
  font-size: 14px;
  font-weight: 500;
  color: var(--dark-gray-font);
  color: var(--basic-color);
}

.attached-card {
  position: relative;
  background-color: rgba(229, 37, 42, 0.08);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 32px;
}
.attached-card .icon {
  width: 45px;
  height: auto;
}
.attached-card .download-icon {
  width: 30px;
  height: auto;
}
.attached-card .card-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--dark-color);
}

.app-form {
  border: 2px solid var(--primary-color);
  border-radius: 10px;
  padding: 30px;
  width: 100%;
  min-height: 600px;
}

.application-form .card-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--dark-color);
}
.application-form .description {
  color: var(--dark-gray-font);
}

.package-modal .modal-content {
  border: 6px solid var(--primary-color);
  border-radius: 10px;
}
.package-modal .modal-content .modal-body {
  text-align: center;
  padding: 24px;
}
.package-modal .modal-content .modal-body .exit-button {
  text-align: end;
}
.package-modal .modal-content .modal-body img {
  margin-bottom: 32px;
}
.package-modal .modal-content .modal-body .box-title {
  font-weight: 600;
  font-size: 16px;
  color: var(--dark-color);
  margin-bottom: 8px;
}
.package-modal .modal-content .modal-body .description {
  color: var(--dark-gray-font);
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 32px;
}

.gallery-images .gallery-box {
  margin-bottom: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
}
.gallery-images .gallery-box img {
  width: 100%;
  border-radius: 10px;
  height: 273px;
}
@media (max-width: 767px) {
  .gallery-images .gallery-box img {
    height: 100% !important;
  }
}
.gallery-images .img-box img {
  height: 570px;
  -o-object-fit: cover;
     object-fit: cover;
}

.gallery-videos .gallery-box img {
  width: 100%;
}

.gallerymodal .modal-dialog {
  max-width: 1170px;
}
.gallerymodal .modal-dialog .modal-content {
  border: 6px solid var(--primary-color);
  border-radius: 10px;
}
.gallerymodal .modal-dialog .modal-content .modal-body .modal-head .modal-head-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  margin-bottom: 40px;
}
.gallerymodal .modal-dialog .modal-content .modal-body .modal-head .modal-head-content .info-box {
  width: 50%;
}
@media (max-width: 767px) {
  .gallerymodal .modal-dialog .modal-content .modal-body .modal-head .modal-head-content .info-box {
    width: 85%;
  }
}
.gallerymodal .modal-dialog .modal-content .modal-body .modal-head .modal-head-content .modal-info .modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--dark-color);
  margin-bottom: 12px;
}
@media (max-width: 767px) {
  .gallerymodal .modal-dialog .modal-content .modal-body .modal-head .modal-head-content .modal-info .modal-title {
    font-size: 16px;
  }
}
.gallerymodal .modal-dialog .modal-content .modal-body .modal-head .modal-head-content .modal-info .date {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
}
@media (max-width: 767px) {
  .gallerymodal .modal-dialog .modal-content .modal-body .modal-head .modal-head-content .modal-info .date {
    font-size: 14px;
  }
}
.gallerymodal .modal-dialog .modal-content .modal-body .modal-head .modal-head-content .modal-info .date .date-title {
  font-weight: 500;
  color: var(--dark-gray-font);
}
.gallerymodal .modal-dialog .modal-content .modal-body .modal-head .modal-head-content .image-count {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  max-width: 34px;
}
@media (max-width: 767px) {
  .gallerymodal .modal-dialog .modal-content .modal-body .modal-head .modal-head-content .image-count img {
    max-width: 24px;
  }
}
.gallerymodal .modal-dialog .modal-content .modal-body .swiper-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 40px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (max-width: 767px) {
  .gallerymodal .modal-dialog .modal-content .modal-body .swiper-container {
    gap: 16px;
  }
}
.gallerymodal .modal-dialog .modal-content .modal-body .swiper-container .main-swipper {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 640px;
  max-height: 100%;
}
@media (max-width: 767px) {
  .gallerymodal .modal-dialog .modal-content .modal-body .swiper-container .main-swipper {
    height: 300px;
  }
}
.gallerymodal .modal-dialog .modal-content .modal-body .swiper-container .main-swipper .swiper-slide img,
.gallerymodal .modal-dialog .modal-content .modal-body .swiper-container .main-swipper .swiper-slide video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.gallerymodal .modal-dialog .modal-content .modal-body .swiper-container .thum-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media (max-width: 767px) {
  .gallerymodal .modal-dialog .modal-content .modal-body .swiper-container .thum-container {
    width: 30%;
  }
}
.gallerymodal .modal-dialog .modal-content .modal-body .swiper-container .thum-container .thumb {
  height: 520px;
  max-height: 100%;
  position: relative;
}
@media (max-width: 767px) {
  .gallerymodal .modal-dialog .modal-content .modal-body .swiper-container .thum-container .thumb {
    height: 300px;
  }
}
.gallerymodal .modal-dialog .modal-content .modal-body .swiper-container .thum-container .thumb .swiper-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  gap: 20px;
}
.gallerymodal .modal-dialog .modal-content .modal-body .swiper-container .thum-container .thumb .swiper-slide {
  height: 160px;
  border-radius: 8px;
  overflow: hidden;
  opacity: 0.5;
  margin-bottom: unset !important;
}
@media (max-width: 767px) {
  .gallerymodal .modal-dialog .modal-content .modal-body .swiper-container .thum-container .thumb .swiper-slide {
    height: 87px;
  }
}
.gallerymodal .modal-dialog .modal-content .modal-body .swiper-container .thum-container .thumb .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}
.gallerymodal .modal-dialog .modal-content .modal-body .swiper-container .thum-container .thumb .swiper-slide img,
.gallerymodal .modal-dialog .modal-content .modal-body .swiper-container .thum-container .thumb .swiper-slide video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.gallerymodal .modal-dialog .modal-content .modal-body .swiper-container .swiper-button-prev {
  position: relative !important;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  width: 40px;
  margin-bottom: 20px;
  margin-top: 0;
  height: 40px;
  border-radius: 4px;
  left: 0;
  right: 0;
}
.gallerymodal .modal-dialog .modal-content .modal-body .swiper-container .swiper-button-prev::after {
  font-size: 12px;
}
.gallerymodal .modal-dialog .modal-content .modal-body .swiper-container .swiper-button-next {
  position: relative !important;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  margin-top: 20px;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  left: 0;
  right: 0;
}
.gallerymodal .modal-dialog .modal-content .modal-body .swiper-container .swiper-button-next::after {
  font-size: 12px;
}

.store-sidebar {
  -webkit-border-start: 2px solid var(--primary-color);
          border-inline-start: 2px solid var(--primary-color);
}
.store-sidebar .stor-list {
  /* لما يتعمله تحديد */
  position: relative;
}
.store-sidebar .stor-list .form-check {
  padding: 0;
}
.store-sidebar .stor-list input[type=radio].checkbox-look {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--sec-gray-color);
  border-radius: 4px; /* مربع */
  display: inline-block;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
  -webkit-margin-end: 6px;
          margin-inline-end: 6px;
}
.store-sidebar .stor-list input[type=radio].checkbox-look:checked {
  background-color: #b79c72;
  border-color: var(--primary-color);
}
.store-sidebar .stor-list input[type=radio].checkbox-look:checked::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  top: 2px;
  left: 2px;
  background: url("../images/check.svg") no-repeat center/contain;
}
.store-sidebar .stor-list::after {
  content: "";
  position: absolute;
  top: 0;
  width: 24px;
  height: 2px;
  background-color: var(--primary-color);
}
.store-sidebar .stor-list .list-title {
  margin-bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 50px;
  background-color: var(--light-active);
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 400;
  color: var(--dark-color);
}
.store-sidebar .stor-list .checks--box {
  padding: 24px 16px;
}
.store-sidebar .stor-list .checks--box .form-check {
  margin-bottom: 8px;
}
.store-sidebar .stor-list .checks--box .form-check .form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.store-sidebar .stor-list .checks--box .form-check:last-child {
  margin-bottom: 0;
}
.store-sidebar .stor-list .checks--box .form-check .form-check-label {
  color: var(--sec-dark-color);
  font-size: 12px;
}

.range-container {
  padding: 24px 16px;
}
.range-container .noUi-target {
  margin-bottom: 24px;
  border: none;
  background: var(--sec-gray-color);
  -webkit-box-shadow: none;
          box-shadow: none;
  border-radius: 20px;
}
.range-container .noUi-horizontal {
  height: 4px !important;
}
.range-container .noUi-connect {
  background-color: var(--primary-color);
}
.range-container .noUi-handle {
  top: 2px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 26px;
  height: 26px;
  background: var(--primary-color);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  -webkit-box-shadow: none;
          box-shadow: none;
  border: none;
}
.range-container .noUi-handle:after, .range-container .noUi-handle::before {
  background: transparent;
}
.range-container .main-btn {
  height: 32px;
  min-width: 64px;
  background-color: var(--primary-color);
  border: none;
  padding: 8px 20px;
  color: #fff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
}
.range-container #slider {
  width: 100%;
}
.range-container .price-output {
  font-size: 10px;
  font-weight: 400;
  color: var(--dark-color);
}

.store-content {
  gap: 16px;
  margin-bottom: 32px;
}
.store-content .store-text {
  font-size: 16px;
  font-weight: 400;
  color: var(--dark-color);
  margin-bottom: 0;
}
.store-content .select-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}
.store-content .select-box .form-select {
  min-width: 170px;
  height: 50px;
}
.store-content .select-box label {
  width: 100%;
  font-size: 16px;
  font-weight: 400;
  color: var(--dark-gray-font);
}

.search-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--basic-color); /* أي لون خلفية */
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(-20px);
          transform: translateY(-20px); /* يبدأ طالع لفوق */
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.search-menu.active {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
          transform: translateY(0); /* ينزل مكانه الطبيعي */
}

.search-content {
  padding: 32px 0;
}
.search-content .logo img {
  max-height: 80px;
  width: auto;
}
@media (max-width: 991px) {
  .search-content .logo img {
    max-height: 60px;
  }
}
.search-content .exit-icon {
  color: var(--black-color);
  font-size: 20px;
  cursor: pointer;
}
.search-content .search-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border: 1px solid var(--sec-gray-color);
  border-radius: 10px;
  padding: 8px 12px;
}
.search-content .search-box input {
  width: 100%;
  border: none;
  color: var(--dark-gray-font);
  font-size: 14px;
}
.search-content .search-box input:focus {
  outline: none;
}
.search-content .search-box .main-btn {
  height: 48px;
  min-width: 100px;
  background-color: var(--primary-color);
  border: none;
  padding: 8px 20px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
}
.search-content .links-box .box-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark-color);
}
.search-content .links-box ul {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  gap: 12px;
}
.search-content .links-box ul li a {
  font-size: 14px;
  color: var(--primary-color);
  background-color: var(--light-active);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 14px 28px;
  border-radius: 10px;
}

.login-modal .modal-dialog {
  max-width: 500px;
}
.login-modal .modal-dialog .modal-content {
  border: 6px solid var(--primary-color);
  border-radius: 10px;
}
.login-modal .modal-dialog .modal-content .modal-body {
  padding: 24px;
}
.login-modal .modal-dialog .modal-content .modal-body .modal-head {
  text-align: center;
  margin-bottom: 24px;
}
.login-modal .modal-dialog .modal-content .modal-body .modal-head img {
  margin-bottom: 16px;
}
.login-modal .modal-dialog .modal-content .modal-body .modal-head .modal-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--dark-color);
}
.login-modal .modal-dialog .modal-content .modal-body form label {
  font-size: 12px;
  font-weight: 400;
  color: var(--dark-color);
  margin-bottom: 8px;
}
.login-modal .modal-dialog .modal-content .modal-body form input {
  width: 100%;
  border: 1px solid var(--sec-gray-color);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--dark-gray-font);
  font-size: 12px;
}
.login-modal .modal-dialog .modal-content .modal-body form input:focus {
  outline: none;
}
.login-modal .modal-dialog .modal-content .modal-body form .forget-password-text {
  font-size: 12px;
  font-weight: 400;
  color: var(--primary-color);
  margin-bottom: 24px;
  display: block;
}
.login-modal .modal-dialog .modal-content .modal-body form .main-btn {
  margin-bottom: 24px;
  border: none;
  width: 100%;
}
.login-modal .modal-dialog .modal-content .modal-body .otp-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 24px;
}
@media (max-width: 500px) {
  .login-modal .modal-dialog .modal-content .modal-body .otp-container {
    gap: 16px;
  }
}
.login-modal .modal-dialog .modal-content .modal-body .otp-container .otp-input {
  width: 60px;
  height: 50px;
  text-align: center;
  font-size: 24px;
  border-radius: 10px;
  outline: none;
  -webkit-transition: border-color 0.3s;
  transition: border-color 0.3s;
}
@media (max-width: 500px) {
  .login-modal .modal-dialog .modal-content .modal-body .otp-container .otp-input {
    width: 52px;
    height: 46px;
  }
}
.login-modal .modal-dialog .modal-content .modal-body .otp-container .otp-input:focus {
  border-color: var(--primary-color);
}
.login-modal .modal-dialog .modal-content .modal-body .create-account-text,
.login-modal .modal-dialog .modal-content .modal-body .login-with-account-text,
.login-modal .modal-dialog .modal-content .modal-body .time-end-text {
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: var(--dark-color);
  margin-bottom: 0;
}
.login-modal .modal-dialog .modal-content .modal-body .create-account-text a,
.login-modal .modal-dialog .modal-content .modal-body .create-account-text span,
.login-modal .modal-dialog .modal-content .modal-body .login-with-account-text a,
.login-modal .modal-dialog .modal-content .modal-body .login-with-account-text span,
.login-modal .modal-dialog .modal-content .modal-body .time-end-text a,
.login-modal .modal-dialog .modal-content .modal-body .time-end-text span {
  color: var(--primary-color);
}

.password-input {
  position: relative;
}
.password-input i {
  position: absolute;
  cursor: pointer;
  color: var(--sec-gray-font);
  bottom: 14px;
}
.password-input .fa-eye {
  inset-inline-end: 16px;
}
.password-input .fa-eye-slash {
  inset-inline-end: 15px;
}

.menu-icons .dropdown a {
  color: var(--basic-color);
}
.menu-icons .dropdown .dropdown-menu {
  display: none;
  -webkit-transform: translate3d(-0.666667px, 32.6667px, 0px);
          transform: translate3d(-0.666667px, 32.6667px, 0px);
  background-color: var(--basic-color);
  padding: 0;
  background-color: var(--basic-color);
  padding: 0;
  border-radius: 12px; /* حسب الشكل اللي عندك */
  border-top: 4px solid var(--primary-color); /* الشريط اللي فوق */
}
.menu-icons .dropdown .dropdown-menu li {
  padding: 8px 0;
  border-bottom: 1px solid var(--sec-light-border);
}
.menu-icons .dropdown .dropdown-menu li:last-child {
  border-bottom: none;
}
.menu-icons .dropdown .dropdown-menu li a {
  color: var(--dark-color);
}
.menu-icons .dropdown .dropdown-menu li a:hover {
  background-color: var(--th-light-bg);
}
.menu-icons .dropdown .dropdown-menu.show {
  display: block;
}

.cover-sc-button {
  display: flex;
  justify-content: end;
}

.sec-btn {
    z-index: 2;
  position: relative;
  gap: 6px;
  padding: 16px;
  font-size: 16px;
  font-weight: 400;
  border-radius: 8px;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 136px;
  color: var(--basic-color);
  background-color: transparent;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.sec-btn:hover  {
  background-color: #101132;
}


.side-sec-btn {
    z-index: 2;
  position: relative;
  gap: 6px;
  padding: 16px;
  font-size: 16px;
  font-weight: 400;
  border-radius: 8px;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 136px;
  color: var(--basic-color);
  background-color: rgb(25 27 79);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}