body {background: var(--primary-bg) !important;}
.theme-light{
   --overall-bg: #F3F4F6 !important;
   --primary-bg: #F9FAFB !important;
}
.theme-dark{
   --overall-bg: #1f2937 !important;
   --primary-bg: #111827 !important;
}
#autocomplete {font-weight:normal !important;text-shadow: unset !important;-webkit-text-fill-color: unset !important;}
.mode-switch {display: block !important;}
.dsmax-width {width: 980px !important;max-width: 980px !important;padding: 0 10px !important;margin: 0 auto;}
.adg_heading h3 {font-size:16px !important;}
#adg_native_ocean {float:left;}
.fb-footer-wrapper {float:left;padding:0px !important;margin-top:40px !important;}
.fb-footer-grid {padding: 40px 0 !important;}
.footer-divider {margin:0 !important;}
.fb-footer-copy {padding:20px 0px !important;}
.header-container {padding:10px 0px !important;}
.nav-max-width {padding:0px !important;}
.nav-items {padding:8px 5px !important;}
.nav-top-line {height:0px !important;background:none !important;}
#are-slot-1, #are-slot-2, #are-slot-3, #are-slot-4, #are-slot-5, #are-slot-mr1, #are-slot-mr2 {min-height:250px !important;}
.filter-bar {margin:40px 0 !important;}
.search-box-wrapper {position: relative;flex: 1;}
.search-box {padding:15px 16px !important;width: 100% !important;box-sizing: border-box !important;}
.search-box-filter {
    position: absolute;
    margin-top: 10px;
    border-radius: 16px;
    background: var(--filter-bg);
    border: 1px solid var(--filter-border);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    z-index: 20000;
    transition: all 0.5s ease-out;
    height: 360px;
    overflow-x: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    width: 100%;
    display: none;
}
.search-box-filter.active{display: block;}
.adg_heading h3, .adg_ocean_article_heading, .adg_ocean_ad_heading, .ctaButton, .ad_icon_txt {
    color: var(--section-header-subtitle) !important;
}
.headerMain-ad { border:none !important; }
.fixed-left-ad, .fixed-right-ad {display: none !important;}
@media only screen and (min-width: 1300px) {.fixed-left-ad, .fixed-right-ad {display: block !important;}}
/*=================THEME COLOR==============*/
/*================LIGHT THEME============*/
.theme-light{
   /*==============Breadcrumb===================*/
   --db-breadcrumb: #4b5563;
   --db-breadcrumb-hover: #111827;
   --db-breadcrumb-icon: #9ca3af;
   --db-breadcrumb-active: #111827;
   /*==============DESC===================*/
   --db-dec-bg: rgba(243, 244, 246, 0.5);
   --desc-overlay-grandient: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #f6f7f8 100%);
   --about-overlay-grandient: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #f6f7f8 100%);
   --db-dec-text: #4b5563;
   --db-dec-grad: linear-gradient(to top, #f9fafb, transparent);
   --db-top-btn-bg: #e5e7eb;
   --db-top-btn-icon: #9ca3af;
   --db-top-btn-hover: #08f4fb;
   --db-bottom-btn-icon: #4b5563;
   --db-bottom-btn-hover: #e5e7eb;
   --db-table-bg: #FFF;
   --db-table-header-bg: #f3f4f6;
   --db-table-header-text: #111827;
   --db-table-td-border: #e5e7eb;
   --db-table-first-td: #111827;
   --db-table-td: #374151;
   /*==============Category===================*/
   --category-text: #4b5563;
   --category-text-hover: #1f2937;
   --category-border: #e5e7eb;
   /*==============body type===================*/
   --body-type-bg: #f3f4f6;
   --body-type-hover: #e5e7eb;
   --body-type-icon: #374151;
   --body-type-label: #1f2937;
   /*==============Brand===================*/
   --brand-bg: #d1d5db;
   --brand-border: #d1d5db;
   --brand-text: #111827;
   /*==============Best car option===================*/
   --best-option-bg: #d1d5db;
   --best-option-text: #111827;
   --best-option-hover: #9ca3af;
   --car-slider-nav-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -4px rgba(0, 0, 0, 0.1);
   --car-slider-nav-bg: #ffffff;
   --car-slider-nav-color: #111827;
   --car-slider-nav-hover: #f3f4f6;
   --car-slider-nav-disable-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -4px rgba(0,0,0,0.1);
   --car-slider-nav-disable-bg: rgba(156, 163, 175, 0.2);
   --car-slider-nav-disable-color: #d1d5db;
}
/*================DARK THEME============*/
.theme-dark{
   /*==============Breadcrumb===================*/
   --db-breadcrumb: #9ca3af;
   --db-breadcrumb-hover: #ffffff;
   --db-breadcrumb-icon: #4b5563;
   --db-breadcrumb-active: #FFF;
   /*==============DESC===================*/
   --db-dec-bg: rgba(31, 41, 55, 0.5);
   --desc-overlay-grandient: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #18212f 100%);
   --about-overlay-grandient: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #111827 100%);
   --db-dec-text: #9ca3af;
   --db-dec-grad: linear-gradient(to top, rgba(31, 41, 55, 0.5), transparent);
   --db-top-btn-bg: rgba(55, 65, 81, 0.5);
   --db-top-btn-icon: #6b7280;
   --db-bottom-btn-icon: #9ca3af;
   --db-bottom-btn-hover: #374151;
   --db-table-bg: #1f2937;
   --db-table-header-bg: #374151;
   --db-table-header-text: #e5e7eb;
   --db-table-td-border: #374151;
   --db-table-first-td: #d1d5db;
   --db-table-td: #9ca3af;
   /*==============Category===================*/
   --category-text: #9ca3af;
   --category-text-hover: #d1d5db;
   --category-border: #374151;
   /*==============body type===================*/
   --body-type-bg: #1f2937;
   --body-type-hover: #374151;
   --body-type-icon: #6b7280;
   --body-type-label: #d1d5db;
   /*==============Brand===================*/
   --brand-bg: #0A1733;
   --brand-border: #2A323D;
   --brand-text: #fff;
   /*==============Best car option===================*/
   --best-option-bg: #3f3f46;
   --best-option-text: #FFF;
   --best-option-hover: #52525b;
   --car-slider-nav-shadow: 0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -4px rgba(0,0,0,0.1);
   --car-slider-nav-bg: #1f2937;
   --car-slider-nav-color: #FFF;
   --car-slider-nav-hover: #374151;
   --car-slider-nav-disable-shadow: 0 4px 6px rgba(0,0,0,0.1),0 2px 4px rgba(0,0,0,0.06);
   --car-slider-nav-disable-bg: rgba(156, 163, 175, 0.5);
   --car-slider-nav-disable-color: #d1d5db;
}
.db-section-container{
   margin: 40px 0;
}
/* .db-headersection-container{
   margin-bottom: 40px;
} */
.section-header{
   margin-bottom: 32px !important;
}
.section-header__title{
   font-size: 40px !important;
}
.section-header__top{
   margin-bottom: 12px !important;
}
.car-things-subsection__title{
   font-size: 20px !important;
   margin-top: 12px !important;
   margin-bottom: 12px !important;
}
/*==============Breadcrumb===================*/
.db-breadcrumb {
   margin-bottom: 24px;
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
}
.db-breadcrumb a {
   color: var(--db-breadcrumb);
   text-decoration: none;
   transition: color 0.2s ease;
}
.db-breadcrumb a:hover {
   color: var(--db-breadcrumb-hover);
}
.db-breadcrumb svg {
   color: var(--db-breadcrumb-icon);
}
.db-active-breadcrumb {
   font-weight: 500;
   color: var(--db-breadcrumb-active);
}
/*==============DESC Container===================*/
.ds-desc-container {
   background: var(--db-dec-bg);
   padding: 24px;
   border-radius: 12px;
}
.ds-desc-wrapper{
   display: flex;
   gap: 16px;
}
.ds-desc-text {
   flex: 1;
   position: relative;
}
.ds-desc-wrapper {
   color: var(--db-dec-text);
   font-size: 16px;
   line-height: 25px;
}
#expended-text {
   display: none;
   transition: all 0.5s ease-in-out;
}
#expended-text.show{
   display: inline;
}
.brand-table-wrapper-head {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--section-header-title);
    transition: color 0.3s ease;
    margin-top: 32px;
    display: none;
}
.brand-table-wrapper-head.expand{
   display: block;
}
.desc-overlay-grandient {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 32px;
   pointer-events: none;
   background: var(--desc-overlay-grandient);
}
.desc-overlay-grandient.hide{
   display: none;
}
.desc-expand-btn {
   width: 40px;
   height: 40px;
   background: var(--db-top-btn-bg);
   border: none;
   border-radius: 8px;
   color: var(--db-bottom-btn-icon);
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   transition: all 0.3s;
   margin-top: 16px;
}
.desc-expand-btn:hover {
   opacity: 0.7;
   background: var(--db-bottom-btn-hover);
}
#desc-expand-arrow{
   transform: rotate(0deg);
   transition: transform 0.2s ease;
}
.car-vs-car-desc {
   color: var(--db-dec-text);
   font-size: 16px;
   line-height: 25px;
   padding-bottom: 20px;
}
.car-things-imppoints ul {
   padding-left: 40px;
   padding-bottom: 20px;
}
.car-things-imppoints ul li {
   color: var(--lowertext-color);
   font-size: 18px;
   line-height: 28px;
   list-style-type: disc;
}
.car-things-imppoints ol {
   padding-left: 40px;
   padding-top: 20px;
}
.car-things-imppoints ol li {
   color: var(--lowertext-color);
   font-size: 18px;
   line-height: 28px;
   list-style-type:decimal;
}
/* #desc-expand-arrow.rotate-down {
   transform: rotate(180deg);
} */
/* .expand-btn-table-wrapper{
   display: flex;
   justify-content: flex-end;
}
.expand-btn-table{
   width: 40px;
   height: 40px;
   background: transparent;
   border-radius: 50%;
   display: grid;
   place-content: center;
   border: none;
   color: var(--db-bottom-btn-icon);
   cursor: pointer;
   transition: all 0.2s ease;
}
.expand-btn-table:hover {
   opacity: 0.7;
   background: var(--db-bottom-btn-hover);
}
.expand-btn-table-arrow {
   transform: rotate(180deg);
   transition: transform 0.2s ease;
}
.expand-btn-table-arrow.rotate-down {
   transform: rotate(0deg);
} */
/*==============Brand table in desc===================*/
.brand-table-wrapper{
   border-radius: 8px;
   overflow: hidden;
   border: 1px solid var(--brand-border);
   background: var(--db-table-bg);
   margin-top: 24px;
   display: none;
}
.brand-table-wrapper.active{
   display: table;
}
.brand-table {
   width: 100%;
   border-collapse: collapse;
   transition: all 0.2s ease-in-out;
}
.brand-table thead tr {
   background: var(--db-table-header-bg);
}
.brand-table th {
   padding: 16px;
   text-align: left;
   font-weight: 600;
   color: var(--db-table-header-text);
}
/* Body rows */
.brand-table tbody tr {
   border-bottom: 1px solid var(--db-table-td-border);
}
.brand-table tbody tr:last-child {
   /*border-bottom: none;*/
}
.brand-table td {
   padding: 16px;
   color: var(--db-table-td);
   font-weight: 400;
   /* text-align: center; */
}
.brand-table td:first-child{
   color: var(--db-table-first-td);
   font-weight: 500;
   text-align: left;
}
/*==============Price Category===================*/
.price-category{
   display: flex;
   gap: 25px;
   margin-bottom: 24px;
   border-bottom: 1px solid var(--category-border);
}
.price-btn {
   padding-bottom: 12px;
   font-size: 16px;
   font-weight: 500;
   color: var(--category-text);
   background: transparent;
   border: none;
   cursor: pointer;
   transition: all 0.2s ease;
   position: relative;
}
.price-btn:hover {
   color: var(--category-text-hover);
}
.price-btn.active{
   color: #dc2626;
}
.price-btn.active::before{
   position: absolute;
   content: '';
   width: 100%;
   height: 2px;
   background: #dc2626;
   left: 0;
   bottom: 0;
}
/*==============cars slider container===================*/
.cars-slider-container{
   position: relative;
   overflow: hidden;
   /* padding-bottom: 10px; */
}
/*==============cars slider inner container===================*/
.cars-slider-innercontainer{
   position: relative;
   /* border: 1px solid red; */
   margin-bottom: 10px;
}
/*==============Cars Slider===================*/
.cars-slider{
   display: flex;
   gap: 20px;
   transition: transform 0.5s ease;
   will-change: transform;
}
/*==============Cars Slider Card===================*/
.cars-slider-card{
   overflow: hidden;
   cursor: pointer;
   transition: all 0.5s ease;
   width: 100%;
   flex: 0 0 230px;
   border: 0;
}
/*==============cars slider nav button===================*/
.cars-slider-nav-btn{
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 30;
   width: 48px;
   height: 48px;
   border-radius: 9999px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 200ms;
   cursor: pointer;
   border: none;
   box-shadow: var(--car-slider-nav-shadow);
   background-color: var(--car-slider-nav-bg);
   color: var(--car-slider-nav-color);
   margin: 3px;
}
.cars-slider-nav-btn:not(:disabled):hover{
   background: var(--car-slider-nav-hover);
}
/* Left button */
.cars-slider-nav-prev {
   left: 0px;
}
.cars-slider-nav-prev.disable{
   box-shadow: var(--car-slider-nav-disable-shadow);
   background-color: var(--car-slider-nav-disable-bg);
   color: var(--car-slider-nav-disable-color);
   cursor: not-allowed;
   pointer-events: none;
}
.cars-slider-nav-next{
   right: 0;
}
.cars-slider-nav-next.disable{
   box-shadow: var(--car-slider-nav-disable-shadow);
   background-color: var(--car-slider-nav-disable-bg);
   color: var(--car-slider-nav-disable-color);
   cursor: pointer;
   pointer-events: unset;
}
/*==============cars slider dots wrapper===================*/
.cars-dots-wrapper {
   display: flex;
   justify-content: center;
   margin-top: 32px;
   gap: 8px;
}
.cars-dot {
   width: 8px;
   height: 8px;
   border-radius: 9999px;
   background-color: var(--reels-dot-bg);
   border: none;
   cursor: pointer;
   transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.cars-dot:hover {
   background-color: var(--reels-dot-hover-bg);
}
.cars-dot.active {
   background-color: #FF0000;
   width: 24px;
}
/*==============Car Body Type===================*/
.car-body-type {
   display: flex;
   gap: 32px;
   flex-wrap: wrap;
   padding-bottom: 12px;
}
.car-btn {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
   cursor: pointer;
   background: none;
   border: none;
   transition: all 0.2s ease;
   flex-shrink: 0;
}
.car-btn:hover {
   transform: scale(1.05);
}
.car-icon-block {
   width: 112px;
   height: 112px;
   border-radius: 9999px;
   background: var(--body-type-bg);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s ease;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.car-btn:hover .car-icon-block {
   background: var(--body-type-hover);
}
.car-icon{
   width: 95px;
   height: 95px;
}
.car-label {
   font-weight: 500;
   font-size: 14px;
   color: var(--body-type-label);
}
/*==============Car brand grid===================*/
.car-brand-grid{
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 24px;
   margin-bottom: 32px;
}
.car-brand-grid.collapsed .brand-card:nth-child(n + 13) {
   display: none;
}
.brand-card {
   aspect-ratio: 1 / 1;
   border-radius: 8px;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   transition: all 0.2s ease;
   border: 1px solid var(--brand-border);
}
.brand-card:hover {
   transform: translateY(-4px);
   box-shadow: 0px 4px 12px rgba(0,0,0,0.4);
}
/* Top section */
.brand-card-top {
   height: 70%;
   width: 100%;
   background: white;
   display: flex;
   justify-content: center;
   align-items: center;
}
.brand-card-top img {
   width: 80px;
   height: auto;
   object-fit: contain;
}
/* Bottom section */
.brand-card-bottom {
   height: 30%;
   width: 100%;
   background: var(--brand-bg);
   display: flex;
   justify-content: center;
   align-items: center;
}
.brand-card-bottom span {
   color: var(--brand-text);
   font-size: 12px;
   font-weight: 500;
   text-align: center;
   padding: 0 8px;
}
/*==============more button===================*/
.more-brand-btn{
   display: flex;
   align-items: center;
   justify-content: center;
}
.more-brand-btn button{
   padding: 12px 32px;
   background: linear-gradient(to right, #dc2626, #ef4444, #dc2626);
   color: #ffffff;
   border: none;
   border-radius: 12px;
   font-weight: 500;
   cursor: pointer;
   overflow: hidden;
   transition: transform 0.3s, box-shadow 0.3s;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
}
.more-brand-btn button:hover {
   transform: scale(1.10);
   box-shadow: 0 8px 20px rgba(239, 68, 68, 0.5);
}
/*==============best car grid===================*/
.best-grid{
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
}
.best-category-btn{
   padding: 16px 24px;
   border-radius: 12px;
   background: var(--best-option-bg);
   color: var(--best-option-text);
   text-align: left;
   transition: all 0.2s ease;
   font-weight: 500;
   font-size: 14px;   /* font-size: 16px;*/
   border: none;
   cursor: pointer;
   width: 233px !important;
}
.best-category-btn:hover{
   transform: scale(1.05);
   background: var(--best-option-hover);
}
/*==============DB Articles Grid===================*/
.db-articles-grid{
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
}
.db-articles-card{
   border-radius: 12px;
   border: 1px solid var(--card-border);
   background: var(--card-bg);
   box-shadow: var(--card-shadow);
   overflow: hidden;
   cursor: pointer;
   transition: all 0.5s ease;
   backdrop-filter: blur(4px);
   border: 0;
   /* width: 100%;
   height: 100%; */
}
.db-articles-card:hover {
   box-shadow: var(--card-shadow-hover);
   /*transform: translateY(-4px);*/
}
.db-articles-image-wrapper {
   position: relative;
   overflow: hidden;
}
.db-articles-image-container{
   width: 100%;
   aspect-ratio: 16 / 9;
}
.db-articles-image-container .db-articles-image{
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.7s ease-out;
}
.db-articles-card:hover .db-articles-image {
   transform: scale(1.02);
}
.db-articles-content {
   padding: 20px;
}
/*.latest-news-slider .db-articles-content {
   height: 90px;
   overflow: hidden;
}*/
.db-articles-title{
   font-size: 16px;
   font-weight: 600;
   line-height: 1.4;
   color: var(--card-title);
   transition: color 0.3s ease;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}
.db-articles-content p {
   font-size: 14px;
   color: var(--card-label);
}
/* readmore-readless-style */
.desc-info-card{display: flex;gap: 16px;}
.desc-text-wrapper {position: relative;flex: 1;}
.desc-text {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   line-height: 1.6;
   color: var(--db-dec-text);
   font-size: 16px;
   line-height: 25px;
}
.desc-text.expanded {
   -webkit-line-clamp: unset;
}
.desc-text.expanded p {
   padding-bottom: 15px;
}
.desc-text.expanded + .desc-overlay-grandient {
   display: none;
}
.desc-toggle-btn {
   background: var(--db-top-btn-bg);
   color: var(--db-bottom-btn-icon);
   border: none;
   border-radius: 8px;
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   transition: all 0.3s;
   width: 40px;
   height: 40px;margin: 0 auto;margin-top: 20px;
}
.desc-toggle-btn svg {
   transition: transform 0.3s ease;
}
.desc-toggle-btn.active svg {
   transform: rotate(180deg);
}
.desc-toggle-btn.active {
   top: 0;
}
.desc-toggle-btn.active #desc-expand-arrow {
   transform: rotate(180deg);
}
.tab-content {display: none;position: relative;}
.tab-content.active {display: block;}
.section-header__link{position: absolute;top: -117px;right: 0;}
.no-hover-underline:hover {
  text-decoration: none !important;
}
.best-grid {
   overflow: hidden;
   max-height: calc(3 * ROW_HEIGHT);
}
.best-grid.expanded {
   max-height: 2000px;
}
.more-brands-btn.active .arrow {
   transform: rotate(-135deg);
}
.more-btn-wrap{
   margin-top: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
}
.more-cars-btn{
   padding: 12px 32px;
   background: linear-gradient(to right, #dc2626, #ef4444, #dc2626);
   color: #ffffff;
   border: none;
   border-radius: 12px;
   font-weight: 500;
   cursor: pointer;
   overflow: hidden;
   transition: transform 0.3s, box-shadow 0.3s;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
}
.more-cars-btn:hover {
   transform: scale(1.10);
   box-shadow: 0 8px 20px rgba(239, 68, 68, 0.5);
}
.more-cars-btn.active .arrow svg{transform: rotate(180deg);}
.cars-hide-controls .cars-slider-nav-prev,
.cars-hide-controls .cars-slider-nav-next,
.cars-hide-controls .cars-dot {
  display: none !important;
}
.sub-heading-table{
   font-size: 28px !important;
   padding: 25px 10px;
   color: var(--section-header-title);
}
.dropdownlist-box .dropdown-list {
   height: 300px;
   overflow-y: auto;
}
.active:before {display: none;}