html, body {
  max-width: 100%;
  overflow-x: hidden;
}
.fs-14 {
  font-size: 1.4rem;
}

.category-title {
  font-size: clamp(1rem, 4vw, 2rem);
}

.category-tagline {
  font-size: clamp(0.8rem, 2.5vw, 1.25rem);
}

.overlay-row {
  padding-top: 3%;
}

.choices__button {
  display: none !important;
}

.tagline {
  /*background: #00449E;*/
  background: #C8C0B3;
}

.icon-badge {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(135deg, #4caf50, #81c784); /* smooth green glow */
  border-radius: 50%;
  padding: 10px;
  margin-right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.badge-lg {
  font-size: 0.8rem;
  padding: 0.4em 0.7em;
  border-radius: 0.45rem;
}

@media (max-width: 576px) {
  #trustTab .nav-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }
}

a {
  text-decoration: none !important;
}

.default-profile-icon {
  
  margin-right: -2px;
}

.btn-primary,
[data-bs-theme=dark] .product-card:hover .product-card-button {
  --fn-btn-color: #1A1A1A;
  --fn-btn-bg: #C8C0B3;
  --fn-btn-border-color: #C8C0B3;
  --fn-btn-hover-color: #FFF;
  --fn-btn-hover-bg: #3A3F52;
  --fn-btn-hover-border-color: #3A3F52;
  --fn-btn-focus-shadow-rgb: 222, 107, 107;
  --fn-btn-active-color: #1A1A1A;
  --fn-btn-active-bg: #C8C0B3;
  --fn-btn-active-border-color: #C8C0B3;
  --fn-btn-active-shadow: none;
  --fn-btn-disabled-color: #1A1A1A;
  --fn-btn-disabled-bg: #C8C0B3;
  --fn-btn-disabled-border-color: #C8C0B3;
}

.text-golden {
  /* color: #BD921A; */
  color: #333;
  font-weight: 700 !important;
  font-size: 1.4rem;
}

@media (min-width: 768px) {
  .text-golden {
    font-size: 1.6rem;
  }
}

@media (min-width: 992px) {
  .text-golden {
    font-size: 1.8rem;
  }
}

@media (min-width: 1200px) {
  .text-golden {
    font-size: 2rem;
  }
}

.cke_notifications_area {
  display: none !important;
}

.product-description table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 30px;
}

.product-description table,
.product-description table th,
.product-description table td,
.product-description table tr {
  border: 1px solid #ccc;
}

.product-description table th,
.product-description table td {
  padding: 8px;
  text-align: left;
}

.small-dot {
  font-size: 8px;
  color:#FFB000;
}

.big-dot {
  font-size: 12px;
}

/* Fix: lift the button above the stretched-link overlay */

/* Golden Gradient Background */
.premium-gold-btn {
  background: linear-gradient(135deg, #FFD700, #FFA500, #FFD700);
  background-size: 200% 200%;
  animation: goldShimmer 3s linear infinite;
  border: none;
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover Effect */
.premium-gold-btn:hover {
  text-decoration: none;
}

/* Shimmer Animation */
@keyframes goldShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Add to Cart Button - Premium Blue */
.add-cart-btn {
  background: linear-gradient(135deg, #2575fc, #6a11cb, #2575fc);
  background-size: 200% 200%;
  animation: blueShimmer 4s linear infinite;
  border: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.add-cart-btn:hover {
  text-decoration: none;
}

/* Buy Now Button - Sparkling Golden */
.buy-now-btn {
  background: linear-gradient(135deg, #FFD700, #FFA500, #FFD700);
  background-size: 200% 200%;
  animation: goldShimmer 3s linear infinite;
  border: none;
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.buy-now-btn:hover {
  text-decoration: none;
}

/* Shimmer Animations */
@keyframes goldShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes blueShimmer {
  0% { background-position: 100% 50%; }
  50% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Seller Contact Card - Rich Premium Green Sparkling */
.seller-contact-info {
  background: linear-gradient(135deg, #006400, #008000, #00a86b, #006400);
  background-size: 400% 400%;
  color: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 25px rgba(0,0,0,0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: gradientShift 8s ease infinite;
}

.seller-contact-info:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(0,0,0,0.35);
}

/* Gradient Animation */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.seller-contact-info i.fi-phone {
  color: #ffd700;
}

.seller-contact-info .fw-bold {
  font-weight: 600;
  color: #fff;
}

.seller-contact-info .text-light {
  color: rgba(255,255,255,0.85);
}

article.card .card-footer {
  position: relative;
  z-index: 2;
}

/* DESKTOP / TABLET – keep your original look */
.custom-underline {
  text-decoration: none;
  border-bottom: 3px solid #FFF;
  padding-bottom: 4px;
}

.fs-a {
  font-size: 16px;
}

/* NARROW PHONES (=460px) */
@media (max-width: 460px) {
  .quick-links {
    gap: .5rem;
  }
  .quick-links .btn {
    padding-inline: .5rem;
    font-size: 14px;
  }
  .dataTables_length, .dataTables_filter{ float:right !important;}
}

/* ULTRANARROW PHONES (=380px) */
@media (max-width: 380px) {
  .quick-links {
    gap: .4rem;
  }
  .quick-links .btn {
    padding-inline: .4rem;
    font-size: 13px;
  }
  .dataTables_length, .dataTables_filter{ float:right !important;}
}

/* Dropdown focus expand */
select.form-select:focus {
  min-width: 300px;
  position: absolute;
  z-index: 10;
}

.dropdown-menu {
  min-width: 300px !important;
  white-space: normal;
}

.category-icon {
  width: 30px;
  text-align: center;
  font-size: 1.3rem;
}

.arrow-icon {
  font-size: 1rem;
  color: #007bff !important;
}

.category-row:hover {
  background-color: #f8f9fa;
}

/* premium background to primary button start */
.btn-primary,
[data-bs-theme=dark] .product-card:hover .product-card-button {
  --fn-btn-color: #FFF;
  --fn-btn-bg: #3A3F52;
  --fn-btn-border-color: #3A3F52;
  
  --fn-btn-hover-color: #1A1A1A; 
  --fn-btn-hover-bg: #C8C0B3; 
  --fn-btn-hover-border-color: #C8C0B3; 
  
  --fn-btn-focus-shadow-rgb: 222, 107, 107;
  --fn-btn-active-color: #1A1A1A;
  --fn-btn-active-bg: #C8C0B3;
  --fn-btn-active-border-color: #C8C0B3;
  --fn-btn-active-shadow: none;
  --fn-btn-disabled-color: #1A1A1A;
  --fn-btn-disabled-bg: #C8C0B3;
  --fn-btn-disabled-border-color: #C8C0B3;

  border: none;  
  border-radius: 8px;
  padding: 10px 10px;
}
/* premium background to primary button end */

/* === Free Package Card === */
.card-free {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background: #f9f9f9;
  transition: all 0.3s ease;
  margin-bottom: 10px !important;
}

.card-free .btn {
  border-bottom: 3px solid #666;
  border-radius: 8px;
  font-weight: 500;
}

/* === Premium Package Card === */
.card-premium {
  background: linear-gradient(180deg, #E8F0FF 0%, #BFD8FF 100%);
  border: 1px solid #C8C0B3;
  border-radius: 12px;
  padding: 30px 20px;
  position: relative;
  text-align: center;
}

.card-premium-promote-ad {
  background: linear-gradient(180deg, #E8F0FF 0%, #BFD8FF 100%);
  border: 1px solid #C8C0B3;
  border-radius: 12px;
  padding: 30px 20px;
  position: relative;
  text-align: left;
}

/* Swiper pagination */
.swiper-pagination {
  position: relative !important;
  margin-top: 40px;
  text-align: center;
}

.swiper-pagination-bullet {
  width: 14px;
  height: 14px;
  background: #ccc;
  opacity: 1;
  margin: 0 6px !important;
  transition: background 0.3s ease;
}

.swiper-pagination-bullet-active {
  background: #007bff;
}

.text-secondary-emphasis,
.text-body-secondary,
.text-muted,
.choices__placeholder {
  color: #000 !important;
}

.choices__list--dropdown {
  min-width: 360px !important;
  width: max-content;
  max-width: 100vw;
}

header {
  position: fixed !important;
  top: 0;
  width: 100%;
  z-index: 9999;
}

/* Mobile & Tablet (= 991px) */
@media (max-width: 991px) {
  body {
    padding-top: 120px !important;
  }
  .btn-vehicles,
  .btn-marketplace,
  .btn-properties {
    font-size: 16px !important;
  }
}

/* Desktop & Larger (= 992px) */
@media (min-width: 992px) {
  body {
    padding-top: 74px !important;
  }
}

/****** FOLLOWING CSS PUSHES SEARCH FILTER AND CONTENTS DOWN IN ALL THE PAGES *****/

.search-filter-bar, .content-wrapper {
    position: relative;
    top: 46px;
	margin-bottom:46px;
}
@media (max-width: 1200px) {
    .search-filter-bar, .content-wrapper {
        top: 41px;
    }
}
/* Medium */
@media (max-width:768px){
     .search-filter-bar, .content-wrapper {
        top: 38px;
    }
}
/* Small */
@media (max-width: 576px) {
    .search-filter-bar, .content-wrapper {
        top: 38px;
    }
}

/****** FOLLOWING CSS PUSHES THE SLIDER DOWN (HOMEPAGE ONLY)*****/

.homepage-contents-wrapper{
    position: relative;
    top: 55px;
	margin-bottom:55px;
}
@media (max-width: 1200px) {

    .homepage-contents-wrapper{
        top: 54px;
    }
}
/* Medium */
@media (max-width: 992px) {
    .homepage-contents-wrapper{
        top: 50px;
    }
}
@media (max-width:768px){
     .homepage-contents-wrapper{
        top: 48px;
    }
}
/* Small */
@media (max-width: 576px) {
    .homepage-contents-wrapper{
        top: 48px;
    }
}

/*******THE END**********/


.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.section-title h2 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.section-title .line {
  flex: 1;
  max-width: 120px;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    #f5b301,
    transparent
  );
}



.main-search{
    box-shadow: -2px 2px 2px #CCC;
    border-radius: 10px;
	background:#FFF;
}

/* =========================================
   AALABABA HEADER
   VERY FAINT BLUE / PURPLE MESH + WAVES
   ========================================= */

.aalababa-header {
    position: relative;
    /* overflow: hidden; */ 

    /* background:
        radial-gradient(
            circle at 12% 15%,
            rgba(170, 210, 235, 0.42),
            transparent 45%
        ),
        radial-gradient(
            circle at 88% 85%,
            rgba(215, 200, 235, 0.28),
            transparent 45%
        ),
        radial-gradient(
            circle at 50% 45%,
            rgba(255, 255, 255, 0.65),
            transparent 55%
        ),
        #f1f6f9 !important; */
		
		background: linear-gradient(    to right,    #f7f9fa 0%,  #FFF 50%,   #f7f9fa 100%) !important; 
}


/* Keep header content above background */

.aalababa-header > * {
    position: relative;
    /* z-index: 2; */ 
}


/* =========================================
   VERY FAINT INVERTED WHITE WAVES
   ========================================= */

.aalababa-header::before {
    content: "";

    position: absolute;
    z-index: 1;

    left: -2%;
    top: 0;

    width: 104%;
    height: 52%;

    pointer-events: none;

    opacity: 0.16;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 400' preserveAspectRatio='none'%3E%3Cpath d='M-100 150 C180 320 340 300 570 170 C790 45 930 50 1130 195 C1300 320 1450 320 1700 190 L1700 0 L-100 0 Z' fill='%23ffffff' fill-opacity='.35'/%3E%3Cpath d='M-100 85 C180 230 330 230 550 125 C760 25 940 30 1160 155 C1350 265 1490 250 1700 140 L1700 0 L-100 0 Z' fill='%23ffffff' fill-opacity='.22'/%3E%3Cpath d='M-100 190 C170 380 360 355 590 225 C820 95 980 100 1190 245 C1380 375 1510 355 1700 245 L1700 190 C1500 290 1380 300 1200 195 C970 65 800 60 560 195 C340 320 180 330 -100 140 Z' fill='%23ffffff' fill-opacity='.18'/%3E%3C/svg%3E");

    background-size: 100% 100%;
    background-position: center top;
    background-repeat: no-repeat;
}


.aalababa-header::after {
    content: "";

    position: absolute;
    z-index: 1;

    left: -2%;
    top: 0;

    width: 104%;
    height: 35%;

    pointer-events: none;

    opacity: 0.10;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 300' preserveAspectRatio='none'%3E%3Cpath d='M-100 110 C150 260 320 255 520 150 C750 30 930 30 1130 150 C1320 265 1490 255 1700 145 L1700 0 L-100 0 Z' fill='%23ffffff' fill-opacity='.40'/%3E%3Cpath d='M-100 65 C160 190 340 195 550 95 C760 -5 960 0 1170 115 C1370 225 1510 210 1700 120 L1700 0 L-100 0 Z' fill='%23ffffff' fill-opacity='.20'/%3E%3C/svg%3E");

    background-size: 100% 100%;
    background-position: center top;
    background-repeat: no-repeat;
}


/* Search box placeholder like blink it */
.search-input-wrapper { position: relative; flex: 1 1 auto; min-width: 0; overflow:hidden;} .search-input-wrapper .form-control { width: 100%; position: relative; z-index: 2; background: transparent; } .animated-search-placeholder { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #777; pointer-events: none; z-index: 1; white-space: nowrap; transition: transform 0.45s ease, opacity 0.45s ease; } /* Hide visual placeholder when user types */ .search-input-wrapper.has-value .animated-search-placeholder { opacity: 0; }

/***** CUSTOM MENUS BY KP ***/
.custom-primary{
    background-color: #FFFFFF;
    border-color: #CCC;
    border: 1px solid #CCC;
    color: #1a1a1a;
}
.custom-primary:hover{
    background-color: #3A3F52;
    border: 1px solid #3A3F52;
    color: #FFF;
}
.custom-danger{
    background-color: #FFFFFF;
	border-color: #e9a5a5;
    border: 1px solid #e9a5a5;
    color: #e81212;
}
.custom-danger:hover{
    background-color: #e81212;
    border: 1px solid #e9a5a5;
    color: #FFFFFF;
}
.custom-success{
    background-color: #FFFFFF;
	border-color: #6ece84;
    border: 1px solid #6ece84;
    color: #06611b;
}
.custom-success:hover{
    background-color: #06611b;
    border: 1px solid #06611b;
    color: #FFFFFF;
}
.custom-box-shadow{
    box-shadow: 1px 5px 3px #b9c1ed; 
}

/* =========================================
   AALABABA CATEGORY MENU
   LARGER ICONS & TEXT
   NO INDIVIDUAL SVG HOVER EFFECT
   ========================================= */

/* Transparent menu */

.aalababa-header .ababa-menu {
    background: transparent !important;
    border: none !important;
}

.ababa-menu {
    width: 100%;
    height: 52px;
    min-height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 36px;
    padding: 3px 20px;

    background: #ffffff;
    border-top: 1px solid #f0f1f3;
    border-bottom: 1px solid #e9ebef;

    box-shadow: 0 2px 5px rgba(20, 35, 60, 0.04);

    box-sizing: border-box;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.ababa-menu::-webkit-scrollbar {
    display: none;
}


/* =========================================
   MENU ITEM
   ========================================= */

.ababa-menu-item {
    position: relative;

    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;
    width: max-content;
    height: 44px;

    gap: 5px;
    padding: 5px 12px;
    margin: 0;

    color: #424750;
    text-decoration: none;
    background: transparent;

    border: none;
    border-radius: 9px;

    box-sizing: border-box;
    white-space: nowrap;

    transition:
        color 0.18s ease,
        background-color 0.18s ease;
}


/* =========================================
   ICON CONTAINER
   Larger icons
   No individual background or hover effect
   ========================================= */

.ababa-menu-icon {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;

    background: transparent;
    border-radius: 0;

    box-sizing: border-box;
}


/* =========================================
   SVG ICONS
   ========================================= */

.ababa-menu-icon svg {
    display: block;

    width: 33px;
    height: 33px;

    max-width: 100%;
    max-height: 100%;

    overflow: visible;

    stroke-linecap: round;
    stroke-linejoin: round;

    /* No icon scaling or movement */
    transform: none !important;
    transition: none !important;
}


/* Standard outline icons */
.ababa-menu-icon .icon-main {
    fill: none;
    stroke: #414141;
    stroke-width: 1.8;
}

/* Yellow icon details */
.ababa-menu-icon .icon-detail {
    fill: none;
    stroke: #e5b900;
    stroke-width: 2.2;
}


/* =========================================
   MENU LABEL
   Larger text
   ========================================= */

.ababa-menu-label {
    display: inline-block;
    flex: 0 0 auto;

    margin: 0;
    padding: 0;

    font-size: 15px;
    line-height: 20px;
    font-weight: 500;

    color: inherit;

    text-align: left;
    white-space: nowrap;

    transition:
        color 0.18s ease,
        font-weight 0.18s ease;
}


/* =========================================
   HOVER
   Highlight the WHOLE menu item only
   ========================================= */

.ababa-menu-item:hover {
    color: #172b4d;
    background-color: #f0f4f9;
}

/* Keep the icon unchanged on hover */
.ababa-menu-item:hover .ababa-menu-icon {
    background: transparent;
    transform: none;
}

.ababa-menu-item:hover .ababa-menu-icon svg {
    transform: none !important;
    width: 33px;
    height: 33px;
}

.ababa-menu-item:hover .ababa-menu-label {
    color: #172b4d;
}


/* =========================================
   ACTIVE MENU
   Whole item gets background
   No underline
   ========================================= */

.ababa-menu-item.active {
    color: #172b4d;
    background-color: #e9edf2;
    border-radius: 9px;
}

.ababa-menu-item.active .ababa-menu-icon {
    background: transparent;
}

.ababa-menu-item.active .ababa-menu-icon svg {
    transform: none !important;
}

.ababa-menu-item.active .ababa-menu-label {
    color: #172b4d;
    font-weight: 600;
}

/* Remove active underline */
.ababa-menu-item.active::after {
    content: none !important;
    display: none !important;
}


/* =========================================
   LAPTOPS
   ========================================= */

@media (max-width: 1200px) {

    .ababa-menu {
        height: 52px;
        min-height: 52px;

        justify-content: flex-start;

        gap: 28px;
        padding: 3px 18px;
    }

    .ababa-menu-item {
        height: 40px;
        gap: 5px;
        padding: 4px 10px;
    }

    .ababa-menu-icon {
        width: 33px;
        height: 34px;
        flex-basis: 33px;
    }

    .ababa-menu-icon svg {
        width: 30px;
        height: 30px;
    }

    .ababa-menu-item:hover .ababa-menu-icon svg {
        width: 30px;
        height: 30px;
    }

    .ababa-menu-label {
        font-size: 14px;
        line-height: 19px;
    }
}


/* =========================================
   TABLETS AND MOBILE
   Horizontal scrolling when necessary
   ========================================= */

@media (max-width: 768px) {

    .ababa-menu {
        width: 100%;
        height: 50px;
        min-height: 50px;
        justify-content: flex-start;
        gap: 20px;
        padding: 2px 12px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .ababa-menu-item {
        height: 40px;
        flex: 0 0 auto;
        gap: 4px;
        padding: 3px 8px;
    }

    .ababa-menu-icon {
        width: 30px;
        height: 32px;
        flex-basis: 30px;
    }

    .ababa-menu-icon svg {
        width: 28px;
        height: 28px;
    }

    .ababa-menu-item:hover .ababa-menu-icon svg {
        width: 28px;
        height: 28px;
    }

    .ababa-menu-label {
        font-size: 14px;
        line-height: 18px;
    }
}


/* =========================================
   SMALL PHONES
   ========================================= */

@media (max-width: 360px) {

    .ababa-menu {
        height: 54px;
        min-height: 54px;

        gap: 15px;
        padding: 2px 8px;
    }

    .ababa-menu-item {
        height: 46px;
        gap: 4px;
        padding: 3px 6px;
    }

    .ababa-menu-icon {
        width: 27px;
        height: 29px;
        flex-basis: 27px;
    }

    .ababa-menu-icon svg {
        width: 25px;
        height: 25px;
    }

    .ababa-menu-item:hover .ababa-menu-icon svg {
        width: 25px;
        height: 25px;
    }

    .ababa-menu-label {
        font-size: 13px;
        line-height: 16px;
    }
}
/* Make Cars, Bikes and Scooters icons slightly larger */

/* Cars */
.ababa-menu-item[href*="type=car"] .ababa-menu-icon svg {
    width: 38px;
    height: 38px;
}

/* Bikes */
.ababa-menu-item[href*="type=bike"] .ababa-menu-icon svg {
    width: 38px;
    height: 38px;
}

/* Scooters */
.ababa-menu-item[href*="type=scooter"] .ababa-menu-icon svg {
    width: 38px;
    height: 38px;
}

/* Active menu */
.ababa-menu-item[href*="type=car"].active .ababa-menu-icon svg,
.ababa-menu-item[href*="type=bike"].active .ababa-menu-icon svg,
.ababa-menu-item[href*="type=scooter"].active .ababa-menu-icon svg {
    width: 38px;
    height: 38px;
    transform: none !important;
	margin-right:4px;
}

/* Prevent the icons from being clipped */
.ababa-menu-item[href*="type=car"] .ababa-menu-icon,
.ababa-menu-item[href*="type=bike"] .ababa-menu-icon,
.ababa-menu-item[href*="type=scooter"] .ababa-menu-icon {
    overflow: visible;
	margin-right:4px;
}