@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@500;800;900&display=swap');

/* Copy Animation */
.base-color {
  color: hsl(var(--main)) !important;
}

/* Global Large CTA Buttons - Updated for 100% Stability */
.btn--cta-white,
.btn--cta-gray {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.25rem !important;
  padding: 15px 35px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;
  /* No transition for transform/border */
  text-transform: none !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  min-height: 65px !important;
  min-width: 280px !important;
  /* Fixed min-width for stability */
  box-sizing: border-box !important;
  position: relative !important;
}

/* First Button: White (Stable Box) */
.btn--cta-white.banner-white-box {
  background-color: #FFFFFF !important;
  color: #F57C00 !important;
  border: 1px solid #E0E0E0 !important;
  padding-right: 45px !important;
  /* Reserve space for caret in RTL or if icon is fixed */
}

.btn--cta-white.banner-white-box:hover,
.btn--cta-white.banner-white-box:focus {
  background-color: #F5F5F5 !important;
  color: #F57C00 !important;
  border: 1px solid #E0E0E0 !important;
  /* Keep border width identical */
  transform: none !important;
  /* REMOVED transform to prevent shifting */
}

/* Stable Caret/Icon Position */
.banner-white-box-wrap {
  position: relative !important;
  display: inline-block !important;
}

.banner-white-box-caret {
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  margin: 0 !important;
}

/* Second Button: Gray (Stable) */
.btn--cta-gray {
  background-color: #757575 !important;
  color: #FFFFFF !important;
  border: 1px solid #757575 !important;
}

.btn--cta-gray:hover,
.btn--cta-gray:focus {
  background-color: #616161 !important;
  color: #FFFFFF !important;
  border: 1px solid #757575 !important;
  transform: none !important;
  /* REMOVED transform to prevent shifting */
}

@media (max-width: 767px) {

  .btn--cta-white,
  .btn--cta-gray {
    width: 100% !important;
    margin-bottom: 15px !important;
    font-size: 1.1rem !important;
  }
}

/* Banner Section Override */
.banner-section {
  background-color: #F57C00 !important;
  background-image: none !important;
  padding: 100px 0 !important;
}

.banner-section::before,
.banner-section::after {
  display: none !important;
  /* Hide any overlays/shapes if they exist */
}

.banner-section .banner-content__title,
.banner-section .banner-content__title span,
.banner-section p,
.banner-section .text-white {
  color: #FFFFFF !important;
}


.copied::after {
  position: absolute;
  top: 8px;
  right: 12%;
  width: 100px;
  display: block;
  content: "COPIED";
  font-size: 1em;
  padding: 5px 5px;
  color: #fff;
  background-color: #FF7000;
  border-radius: 3px;
  opacity: 0;
  will-change: opacity, transform;
  animation: showcopied 1.5s ease;
}

@keyframes showcopied {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  50% {
    opacity: 0.7;
    transform: translateX(40%);
  }

  70% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
  }
}




.cookies-card {
  width: 375px;
  padding: 25px;
  color: #1E2337;
  position: fixed;
  bottom: 30px;
  left: 30px;
  z-index: 999999;
  transition: all .5s;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 18px rgb(0 0 0 / 20%);
  border-radius: 20px;
}

.cookies-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 12px;
}

.cookies-card__title {
  font-size: inherit;

}

.cookies-card__close {
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  color: #797878;
  transition: all 0.2s;
}

.cookies-card__close:hover {
  color: #000;

}

.cookies-card__icon {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: #6e6f70;
  color: #fff;
  font-size: 32px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.cookies-card__content {
  margin-bottom: 0;
  font-size: 13px;
  margin-bottom: 24px;
}

.cookies-card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.cookies-card__btn-outline {
  text-decoration: none;
  padding: 12px 20px;
  color: #001E00;

}

.cookies-card__btn {
  color: #fff !important;
  text-decoration: none;
  padding: 8px 35px;
  margin: 3px 5px;
  display: inline-block;
  border-radius: 999px;
  background-color: hsl(var(--base));
  transition: all 0.2s;
}

.cookies-card__btn:hover {
  background-color: hsl(var(--base)/0.8);
}




@media (max-width: 767px) {
  .cookies-card {
    width: calc(100% - 20px);
    left: 10px;
    bottom: 0;
    font-size: 14px;
    padding: 15px;
  }
}


.cookies-card.hide {
  bottom: -500px !important;
}

.radius--10px {
  border-radius: 10px;
}

.hover-input-popup {
  position: relative;
}

.input-popup {
  display: none;
}

.hover-input-popup .input-popup {
  display: block;
  position: absolute;
  bottom: 130%;
  left: 50%;
  width: 280px;
  background-color: #1a1a1a;
  color: #fff;
  padding: 20px;
  border-radius: 5px;
  transform: translateX(-50%);
  transition: all 0.3s;
}

.input-popup::after {
  position: absolute;
  content: '';
  bottom: -19px;
  left: 50%;
  margin-left: -5px;
  border-width: 10px 10px 10px 10px;
  border-style: solid;
  border-color: transparent transparent #1a1a1a transparent;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.input-popup p {
  padding-left: 20px;
  position: relative;
}

.input-popup p::before {
  position: absolute;
  content: '';
  font-family: 'Line Awesome Free';
  font-weight: 900;
  left: 0;
  top: 4px;
  line-height: 1;
  font-size: 18px;
}

.input-popup p.error {
  text-decoration: line-through;
}

.input-popup p.error::before {
  content: "\f057";
  color: #ea5455;
}

.input-popup p.success::before {
  content: "\f058";
  color: #28c76f;
}



.show-filter {
  display: none;
}

@media(max-width:767px) {
  .responsive-filter-card {
    display: none;
    transition: none;
  }

  .show-filter {
    display: block;
  }
}



/* select 2 css  */
.select2-dropdown {
  border: 0 !important;
  margin-top: 8px !important;
  border-radius: 5px !important;
  box-shadow: 0 3px 9px rgba(50, 50, 9, 0.05), 6px 4px 19px rgb(115 103 240 / 20%)
}

.select2-search--dropdown {
  padding: 10px 10px !important;
  border-color: #ced4da !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border-color: #ced4da !important;
  padding: 10px 20px;
}

.select2-results__option.select2-results__option--selected,
.select2-results__option--selectable,
.select2-container--default .select2-results__option--disabled {
  padding: 12px 14px !important;
  border-bottom: 1px solid #eee;
}

.select2-results__option.select2-results__message {
  text-align: center !important;
  padding: 12px 14px !important;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar {
  width: 8px;
  border-radius: 5px;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb {
  background: #ddd;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb:hover {
  background: #ddd;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow:after {
  position: absolute;
  right: 10px;
  top: 0;
  content: "\f107";
  font-family: "Line Awesome Free";
  font-weight: 900;
  transition: .3s;
}

.select2-container--default .select2-selection--single {
  border-color: #ced4da !important;
  border-width: 2px !important;
  border-radius: .375rem !important;
  padding: .375rem .75rem !important;
  height: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 8px !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow:after {
  transform: rotate(-180deg);
}

.select2-results__option:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.select2-results__option:first-child {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.select2-results__option.select2-results__option--selected,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #f1f1f1 !important;
  color: #000 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: rgb(var(--main)) !important;
  box-shadow: 0 0 25px rgba(115, 103, 240 0.071) !important;
  outline: 0 !important;
}

.select2-dropdown .country-flag {
  width: 25px;
  height: 25px;
  border-radius: 8px;
}

.select2-dropdown .gateway-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0px !important;
}

.select2-dropdown .gateway-subtitle {
  font-size: 12px;
  margin-bottom: 0px !important;
}

.select2-container--open .select2-selection.select2-selection--single,
.select2-container--open .select2-selection.select2-selection--multiple {
  border-color: hsl(var(--base)) !important;
  border-radius: .375rem !important;
}


.gateway-card {
  padding: 15px;
}

.payment-card-title {
  padding: 13px 25px;
  text-align: center;
  background-color: rgb(var(--main));
  border-radius: 5px;
  border: 0;
  margin-bottom: 0px;
  color: #fff;
}

.payment-system-list {
  --thumb-width: 100px;
  --thumb-height: 40px;
  --radio-size: 12px;
  --border-color: #cccccf59;
  --hover-border-color: rgb(var(--main));
  background-color: #fff;
  border-radius: 5px;
  height: 100%;

}


.payment-system-list.is-scrollable {
  max-height: min(388px, 70vh);
  overflow-x: auto;
  padding-block: 4px;
}

.payment-system-list.is-scrollable::-webkit-scrollbar {
  width: 5px;
}

.payment-system-list.is-scrollable::-webkit-scrollbar {
  width: 5px;

}

.payment-system-list.is-scrollable::-webkit-scrollbar-thumb {
  background-color: rgb(var(--main));
  border-radius: 10px;
}

.payment-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 18px;
  border: 1px solid #fff;
  border-top-color: var(--border-color);
  transition: all 0.3s;
  border-left: 3px solid transparent;
}

.payment-item:first-child {
  border-top-color: #fff;
  border-radius: 5px 5px 0 0;
}

.payment-item:has(.payment-item__radio:checked) {
  border-left: 3px solid var(--hover-border-color);
  border-radius: 0px;
}

.payment-item__check {
  border: 3px solid transparent;
}

.payment-item:has(.payment-item__radio:checked) .payment-item__check {
  border: 3px solid rgb(var(--main));
}

.payment-item__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: calc(100% - var(--thumb-width))
}

.payment-item__check {
  width: var(--radio-size);
  height: var(--radio-size);
  border: 1px solid rgb(var(--main));
  display: inline-block;
  border-radius: 100%;

}

.payment-item__name {
  padding-left: 10px;
  width: calc(100% - var(--radio-size));
  transition: all 0.3s;
}

.payment-item__thumb {
  width: var(--thumb-width);
  height: var(--thumb-height);
  text-align: right;
  padding-left: 10px;

  &:has(.text) {
    width: fit-content;
  }
}

.payment-item__thumb img {
  max-width: var(--thumb-width);
  max-height: var(--thumb-height);
  object-fit: cover;
}


.deposit-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

.deposit-info__title {
  max-width: 50%;
  margin-bottom: 0px;
  text-align: left;
}

.deposit-info__input {
  max-width: 50%;
  text-align: right;
  width: 100%;
}

.deposit-info__input-select {
  border: 1px solid var(--border-color);
  width: 100%;
  border-radius: 5px;
  padding-block: 6px;
}

.deposit-info__input-group {
  border: 1px solid var(--border-color);
  border-radius: 5px;

  .deposit-info__input-group-text {
    align-self: center;
    padding-left: 5px;
  }

}

.deposit-info__input-group .form--control {
  padding: 5px;
  border: 0;
  height: 35px;
  text-align: right;
}

.deposit-info__input-group .form--control:focus {
  box-shadow: unset;
}

.info-text .text,
.deposit-info__input .text {
  font-size: 14px;

}

.deposit-info__title .text.has-icon {
  display: flex;
  align-items: center;
  gap: 5px
}

.total-amount {
  border-top: 1px solid var(--border-color);
}

.total-amount .deposit-info__title {
  font-weight: 600;
}

.payment-item__btn {
  border: 0;
  border-block: 1px solid var(--border-color);
  border-bottom: 0;
  background: #fff;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px;
  font-weight: 500;
}

.payment-item:hover+.payment-item__btn {
  border-top-color: #fff;
}

button .spinner-border {
  --bs-spinner-width: 1.5rem;
  --bs-spinner-height: 1.5rem;
}



/* change select 2 style */

/* select 2 */
.select2-dropdown {
  border: 0 !important;
  margin-top: 8px !important;
  border-radius: 5px !important;
  box-shadow: 0 3px 9px rgba(50, 50, 9, 0.05), 6px 4px 19px rgb(115 103 240 / 20%)
}

.select2-search--dropdown {
  padding: 10px 10px !important;
  border-color: #ced4da !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border-color: #ced4da !important;
  padding: 10px 20px;
}

.select2-results__option.select2-results__option--selected,
.select2-results__option--selectable,
.select2-container--default .select2-results__option--disabled {
  padding: 12px 14px !important;
  border-bottom: 1px solid #eee;
}

.select2-results__option.select2-results__message {
  text-align: center !important;
  padding: 12px 14px !important;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar {
  width: 8px;
  border-radius: 5px;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb {
  background: #ddd;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb:hover {
  background: #ddd;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow:after {
  position: absolute;
  right: 10px;
  top: 3px;
  content: "\f107";
  font-family: "Line Awesome Free";
  font-weight: 900;
  transition: .3s;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 35px !important;
}

.select2-container--default .select2-selection--single {
  border-color: rgba(0, 0, 0, 0.08) !important;
  border-width: 1px !important;
  border-radius: .375rem !important;
  padding: .375rem .75rem !important;
  height: 50px !important;
}

.select2-container--open .select2-selection.select2-selection--single,
.select2-container--open .select2-selection.select2-selection--multiple {
  border-color: rgb(var(--r), var(--g), var(--b)) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 8px !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow:after {
  transform: unset !important;
  content: "\f106";
}

.select2-results__option:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.select2-results__option:first-child {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.select2-results__option.select2-results__option--selected,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #f1f1f1 !important;
  color: #000 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: rgb(var(--main)) !important;
  box-shadow: 0 0 25px rgba(115, 103, 240 0.071) !important;
  outline: 0 !important;
}

.select2-dropdown .country-flag {
  width: 25px;
  height: 25px;
  border-radius: 8px;
}

.select2-dropdown .gateway-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0px !important;
}

.select2-dropdown .gateway-subtitle {
  font-size: 12px;
  margin-bottom: 0px !important;
}

.select2-container--default .select2-selection--multiple {
  border-color: rgba(0, 0, 0, 0.1) !important;
}

.button-loader .spinner-border {
  --bs-spinner-width: 1rem;
  --bs-spinner-height: 1rem;
}

/* 
   ==========================================================================
   3ASEKKA BRANDING - FINAL GLOBAL FORCE SYSTEM
   Orange = #FF7A00 
   ==========================================================================
*/

:root {
  --asekka-orange: #F57C00;
  --asekka-white: #FFFFFF;
}

/* 1. GLOBAL PURPLE/VIOLET REMOVAL -> ORANGE */
[class*="violet"],
[class*="purple"],
[class*="indigo"],
[style*="purple"],
[style*="violet"],
[style*="#7367f0"],
[style*="#6f42c1"],
[style*="#6a1b9a"],
[style*="#8e24aa"] {
  background-color: var(--asekka-orange) !important;
  border-color: var(--asekka-orange) !important;
  color: var(--asekka-white) !important;
}

/* 2. ICONS SYSTEM (ORANGE BY DEFAULT) */
i,
svg,
svg path,
svg circle,
svg rect,
svg line,
svg polyline,
svg polygon,
[class^="la-"],
[class*=" la-"],
[class^="fa-"],
[class*=" fa-"] {
  color: var(--asekka-orange) !important;
  fill: var(--asekka-orange) !important;
}

/* Specific Stats & Counter Icons Fix */
.stats i,
.stats svg,
.stats svg path,
.counter-box i,
.counter-box svg,
.counter-box svg path,
.fact i,
.fact svg,
.fact svg path,
[class*="counter"] i,
[class*="counter"] svg,
[class*="counter"] svg path {
  color: var(--asekka-orange) !important;
  fill: var(--asekka-orange) !important;
  stroke: var(--asekka-orange) !important;
}

/* EXCEPTION: Icons inside Primary Buttons MUST be White */
.btn-primary i,
.btn-primary svg,
.btn-primary svg path,
.btn--primary i,
.btn--primary svg,
.btn--primary svg path,
.btn--base i,
.btn--base svg,
.btn--base svg path,
.primary-btn i,
.primary-btn svg,
.primary-btn svg path,
.btn-orange i,
.btn-orange svg,
.btn-orange svg path {
  color: var(--asekka-white) !important;
  fill: var(--asekka-white) !important;
  stroke: var(--asekka-white) !important;
}

/* 3. GREY BACKGROUND RULE: TEXT & ICONS MUST BE WHITE #FFFFFF */
.btn-secondary,
.bg-secondary,
.btn--base-two,
.download-driver,
[class*="bg-gray"],
[class*="bg-grey"],
[style*="background-color: #9E9E9E"],
[style*="background-color: #BDBDBD"],
[style*="background-color: #757575"],
[style*="background: #9E9E9E"],
[style*="background: #BDBDBD"],
[style*="background: #757575"] {
  color: var(--asekka-white) !important;
}

/* Force ALL children (text & icons) to be white when inside a grey container */
.btn-secondary *,
.bg-secondary *,
.btn--base-two *,
.download-driver *,
[class*="bg-gray"] *,
[class*="bg-grey"] *,
[style*="background-color: #9E9E9E"] *,
[style*="background-color: #BDBDBD"] *,
[style*="background-color: #757575"] * {
  color: var(--asekka-white) !important;
  fill: var(--asekka-white) !important;
  stroke: var(--asekka-white) !important;
}

/* 4. PRIMARY ACCENTS & CORE ELEMENTS */
.btn-primary,
.btn--primary,
.btn--base,
.btn-orange,
.bg--base,
.bg--primary {
  background-color: var(--asekka-orange) !important;
  border-color: var(--asekka-orange) !important;
  color: var(--asekka-white) !important;
}

.btn-primary:hover,
.btn--primary:hover,
.btn--base:hover {
  background-color: #E66E00 !important;
  border-color: #E66E00 !important;
}

.text--base,
.text--primary,
.base-color {
  color: var(--asekka-orange) !important;
}

/* Banner / Hero Orange Theme */
.banner-section,
.hero-section {
  background-color: var(--asekka-orange) !important;
  position: relative;
}

/* Ensure background image is visible if provided, with a brand overlay */
.banner-section.bg-img {
  background-size: cover;
  background-position: center;
}

.banner-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4) !important;
  /* Slightly dark overlay to help text readability */
  z-index: 0;
}

.banner-section .container {
  position: relative;
  z-index: 1;
}

/* Force original banner image behavior */
.banner-section.bg-img {
  background-attachment: fixed !important;
  background-size: cover !important;
  background-position: center center !important;
}


/* White Buttons for CTA on Orange background */
.btn--white {
  background-color: var(--asekka-white) !important;
  color: var(--asekka-orange) !important;
  border: 1px solid var(--asekka-white) !important;
  padding: 12px 30px !important;
  border-radius: 5px !important;
  font-weight: 700 !important;
}

.btn--white:hover {
  background-color: transparent !important;
  color: var(--asekka-white) !important;
}

.btn--outline-white {
  background-color: transparent !important;
  color: var(--asekka-white) !important;
  border: 1px solid var(--asekka-white) !important;
  padding: 12px 30px !important;
  border-radius: 5px !important;
  font-weight: 700 !important;
}

.btn--outline-white:hover {
  background-color: var(--asekka-white) !important;
  color: var(--asekka-orange) !important;
}

/* Global Logo Size Consistency */
.navbar-brand.logo img {
  max-height: 50px !important;
}

.footer-item__logo img {
  max-height: 60px !important;
}

/* (C) Feature Icons Fix (Purple -> Orange #F57C00) */
.feature-item__icon img {
  filter: brightness(0) saturate(100%) invert(48%) sepia(85%) saturate(3015%) hue-rotate(15deg) brightness(97%) contrast(101%) !important;
}

/* (D) Stats/Counter PNG Icons Fix (Legacy Fix) */
.counter-section .counter-item__icon img,
.counter-item__icon img {
  filter: brightness(0) saturate(100%) invert(48%) sepia(85%) saturate(3015%) hue-rotate(15deg) brightness(97%) contrast(101%) !important;
}


/* (E) Targeted Feature Icons Fix (Purple -> Orange #F57C00) */
.feature-item__icon i,
.feature-item__icon svg,
.feature-item__icon span,
.feature-thumb__icon i,
.feature-thumb__icon svg,
.feature-item__icon [class^="la-"],
.feature-item__icon [class*=" la-"],
.feature-item__icon [class^="fa-"],
.feature-item__icon [class*=" fa-"] {
  color: #F57C00 !important;
  fill: #F57C00 !important;
  stroke: #F57C00 !important;
}



/* 3ASEKKA HERO TEXT CLASSES */
.hero-line-1 {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 900 !important;
  /* Black */
  display: block;
}

.hero-line-2 {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 800 !important;
  /* ExtraBold */
  display: block;
}

.hero-line-3 {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 500 !important;
  /* Medium */
  display: block;
}

/* 
   FINAL ALIGNMENT & BALANCE FIX: MIDDLE SECTION (HOW IT WORKS)
   Forces consistent container width and eliminates ALL absolute offsets.
*/
.how-it-works .container {
  max-width: 1200px !important;
  /* Forces standard desktop width */
  margin: 0 auto !important;
  padding: 0 15px !important;
  position: relative !important;
}

/* Kill all legacy absolute/offset positioning from main.css */
.how-it-works .row,
.how-it-works .col-lg-6,
.how-it-works .how-it-work-thumb,
.how-it-works .how-it-work-content,
.working-process-thumb,
.working-process-section .section-heading {
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ==========================================================================
   HOW IT WORKS - FINAL LAYOUT FIX
   ========================================================================== */

/* Remove any orange strip or border */
.how-it-works .steps-wrapper,
.how-it-works .steps-container,
.how-it-works .wrapper-step-container {
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Kill all legacy vertical lines */
.how-it-work-item::before,
.how-it-work-item::after {
  display: none !important;
}

/* Two equal columns for Steps + Image */
.how-it-works .section-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: stretch !important;
  /* Equal height */
  gap: 40px !important;
  margin-top: 40px !important;
}

/* Ensure Steps take full height */
.how-it-works .steps-col {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Each step row: number NEXT TO text */
.how-it-works .step-row {
  display: flex !important;
  flex-direction: row !important;
  /* Horizontal */
  align-items: flex-start !important;
  /* Top aligned */
  gap: 20px !important;
  /* Spacing between box and text */
  margin-bottom: 30px !important;
}

/* Global Title Divider line */
.title-divider {
  width: 80px !important;
  height: 2px !important;
  background: #F57C00 !important;
  margin: 12px auto 24px !important;
}

.how-it-works .step-num {
  flex: 0 0 auto !important;
  width: 52px !important;
  height: 52px !important;
  background: #F57C00 !important;
  color: #FFF !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  z-index: 2 !important;
  box-shadow: 0 4px 12px rgba(245, 124, 0, 0.25) !important;
}

/* Image column: Matches height and centers image */
.how-it-works .image-col {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f8f8f8 !important;
  /* Subtle background for balance if needed */
  border-radius: 20px !important;
  padding: 20px !important;
}

.how-it-works .image-col img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 12px !important;
}

/* Mobile: Stack them */
@media (max-width: 991px) {
  .how-it-works .section-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
}




/* Align Testimonials and sections to the SAME edges */
section {
  width: 100% !important;
  overflow-x: hidden !important;
}

/* Remove vertical dividers in Counter Section */
.counter-item::after {
  display: none !important;
}

.counter-wrapper {
  border: none !important;
}

/* Match Hero Title with Section Heading Styles */
.banner-content__title {
  font-size: 5rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

@media screen and (max-width: 1399px) {
  .banner-content__title {
    font-size: 4.5rem !important;
  }
}

@media screen and (max-width: 1199px) {
  .banner-content__title {
    font-size: 4.0625rem !important;
  }
}

@media screen and (max-width: 991px) {
  .banner-content__title {
    font-size: 3.4375rem !important;
  }
}

@media screen and (max-width: 767px) {
  .banner-content__title {
    font-size: 2.8125rem !important;
  }
}

@media screen and (max-width: 575px) {
  .banner-content__title {
    font-size: 2.5rem !important;
  }
}

/* Spacing in Features Section - High Specificity */
.feature-section .feature-item .feature-item__content .feature-item__title {
  margin-bottom: 16px !important;
  display: block !important;
}

/* ==========================================================================
   Transport Section – CSS GRID Layout (2x2 GRID, NOT columns/carousel)
   ========================================================================== */

/* Grid container: 2 cards per row SIDE BY SIDE */
.vehicles-section .transport-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 40px 32px !important;
  padding: 20px 0 !important;
  width: 100% !important;
}

/* Each card wrapper */
.vehicles-section .transport-card {
  display: block !important;
  width: 100% !important;
}

/* Card styling – independent block feel */
.vehicles-section .vehicles-item {
  position: relative;
  background: #FFFFFF !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  height: 100%;
}

.vehicles-section .vehicles-item:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-4px);
}

/* Image inside card – UNIFORM CROP, CENTER-CENTER */
.vehicles-section .vehicles-item img {
  width: 100% !important;
  height: 280px !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* Reduce the heavy gray overlay – make it lighter */
.vehicles-section .vehicles-item__overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 120px !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%) !important;
  mix-blend-mode: normal !important;
}

/* Card content styling */
.vehicles-section .vehicles-item__content {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 20px 16px !important;
  z-index: 2;
}

.vehicles-section .vehicles-item__title {
  color: #FFFFFF !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}

.vehicles-section .vehicles-item__subtitle {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  margin: 0 !important;
}

/* Responsive: 1 card per row on mobile ONLY */
@media (max-width: 767px) {
  .vehicles-section .transport-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .vehicles-section .vehicles-item img {
    height: 220px !important;
  }
}

/* FORCE 2 columns on tablet and desktop */
@media (min-width: 768px) {
  .vehicles-section .transport-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Contact Hero Banner - Specific Orange Overlay */
.contact-hero-banner {
  position: relative !important;
  z-index: 1;
  /* Ensure content is above if we use negative z-index for before, or just general stacking context */
  background-color: transparent !important;
  /* Ensure no conflicting bg */
}

.contact-hero-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #F57C00;
  /* Brand Orange */
  opacity: 0.85;
  /* Adjustable opacity as requested (0.18-0.25 was suggested, but typically overlays need to be visible. User said 'brand orange very light: opacity: 0.18 to 0.25'. Let's stick to their request 0.20) */
  opacity: 0.20;
  z-index: -1;
  /* Behind the content */
  pointer-events: none;
}

/* Ensure the background image still shows if it's there, the overlay goes ON TOP of image but BEHIND text? 
   If the user wants 'overlay', usually it's on top of the bg image. 
   If z-index is -1, it might go behind the section background image depending on stacking.
   However, .bg-img usually sets background-image on the element itself.
   To overlay a background-image set on the element, the pseudo-element needs to be z-index: 0 or 1, and content z-index higher.
*/

.contact-hero-banner .container {
  position: relative;
  z-index: 2;
}

/* Footer Newsletter Section - Remove Decorations, Center & Fix Position */
.newslatter {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding-bottom: 50px !important;
}

.newslatter>div {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

.newslatter__heading {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  max-width: none !important;
  letter-spacing: -2px !important;
  font-size: 5rem !important;
  margin-bottom: 40px !important;
  margin-top: 0 !important;
}

.newslatter__heading::before,
.newslatter__heading::after,
.newslatter::before,
.newslatter::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

.newslatter__form {
  margin: 0 auto !important;
  max-width: 600px !important;
  width: 100% !important;
}

@media screen and (max-width: 1399px) {
  .newslatter__heading {
    font-size: 4.5rem !important;
  }
}

@media screen and (max-width: 1199px) {
  .newslatter__heading {
    font-size: 4.0625rem !important;
  }
}

@media screen and (max-width: 991px) {
  .newslatter__heading {
    font-size: 3.4375rem !important;
  }
}

@media screen and (max-width: 767px) {
  .newslatter__heading {
    font-size: 2.8125rem !important;
  }
}

@media screen and (max-width: 575px) {
  .newslatter__heading {
    font-size: 2.5rem !important;
  }
}

@media screen and (max-width: 424px) {
  .newslatter__heading {
    font-size: 2.125rem !important;
  }
}

/* ==========================================================================
   LOGO VARIANT SYSTEM (White vs Orange)
   ========================================================================== */

.logo--white {
  display: inline-block !important;
}

.logo--orange {
  display: none !important;
}

/* 1. When header is fixed (White Background) -> Show Orange Logo */
.header.fixed-header .logo--white {
  display: none !important;
}

.header.fixed-header .logo--orange {
  display: inline-block !important;
}

/* 2. On Light Pages (Blog, etc.) -> Show Orange Logo by default */
.header.header--light .logo--white {
  display: none !important;
}

.header.header--light .logo--orange {
  display: inline-block !important;
}

/* Apply Brand Orange Filter to facilitate switching if assets are identical */
.logo--orange img {
  filter: brightness(0) saturate(100%) invert(48%) sepia(85%) saturate(3015%) hue-rotate(15deg) brightness(97%) contrast(101%) !important;
}