/* ---------------------------------------------------
  FONTS IMPORT
----------------------------------------------------- */
@import url('../fonts/fonts.css');
/* ---------------------------------------------------
  BODY STYLE
----------------------------------------------------- */
body{font-family:Rubik,sans-serif;color:#333}
/* ---------------------------------------------------
  FONT SIZES
----------------------------------------------------- */
h1{font-size:65px;color:#1A365D;font-weight:500}
h2{font-size:40px}
h3{font-size:30px}
h5{font-size:22px}
h6{font-size:20px}
.p-xs{font-size:12px}
.p-md{font-size:15px}
.p-sm{font-size:14px}
/* ---------------------------------------------------
  GLOBAL STYLES
----------------------------------------------------- */
a{color:inherit;display:inline-block;transition: all 0.5s ease;text-decoration: none;}
a:hover{color: #e7bd01;}
ul{list-style:none;padding-left:0}
:focus{outline:0}
.site-label{display:block;position:relative;margin-bottom:4px;margin-left:25px}
.site-label::after{content:'';background:#1A202C;height:5px;width:77px;position:absolute;left:0;bottom:-5px}
/* ---------------------------------------------------
  FONT WEIGHTS
----------------------------------------------------- */
.regular{font-weight:400!important}
.medium{font-weight:500!important}
.semi-bold{font-weight:600!important}
.bold{font-weight:700!important}
/* ---------------------------------------------------
  COLORS
----------------------------------------------------- */
.d-green-text{color:#1A365D}
.green-text{color:#1A202C}
.grey-text{color:#666}
.red-text{color:red}
/* ---------------------------------------------------
  BUTTON STYLING 
----------------------------------------------------- */
.site-btn{background:#1A365D;border:1px solid #1A365D;color:#fff;border-radius:50px;padding:12px 25px;min-width:160px;transition:ease-in-out .2s;text-align: center;}
.site-btn:hover{background:#fff;color:#1A202C}
.white-border-btn{background:0 0;color:#fff;border:1px solid #fff;box-shadow:0 3px 6px rgb(63,181,139,.08)}
.white-border-btn:hover{color:#1A202C}
/* ---------------------------------------------------
  INPUT STYLING
----------------------------------------------------- */
.site-input:focus,
.site-input{
  /*border:1px solid #d5d5d5;*/
  /*border: 1px solid #1A202C !important;*/
  padding:12px 15px;
  border-radius:50px;
  width:100%;
  appearance:none;
  font-weight: 500;
  /*color:#666*/
}
select.site-input{background:url(../images/select-arrow.png) no-repeat 95% 50%}
.site-input::placeholder{color:#666}
.site-input:focus{outline:0;border:1px solid #1A365D}
textarea.site-input{border-radius:12px;resize:none}


/* ---------------------------------------------------
  PRELOADER
----------------------------------------------------- */
.ctn-preloader{align-items:center;display:flex;height:100%;justify-content:center;position:fixed;left:0;top:0;width:100%;z-index:900}
.ctn-preloader .animation-preloader{position:absolute;z-index:100}
/* Spinner cargando */
.ctn-preloader .animation-preloader .spinner{animation:spinner 1s infinite linear;border-radius:50%;border:3px solid rgb(0 0 0 / 20%);border-top-color:#1A365D;height:18em;margin:0 auto 3.5em auto;width:18em}
/* Texto cargando */
.ctn-preloader .animation-preloader .txt-loading{font:bold 4em "Circular Std Book";text-align:center;user-select:none}
.ctn-preloader .animation-preloader .txt-loading .letters-loading:before{animation:letters-loading 4s infinite;color:#1A365D;content:attr(data-text-preloader);left:0;opacity:0;position:absolute;top:0;transform:rotateY(-90deg)}
.ctn-preloader .animation-preloader .txt-loading .letters-loading{color:rgba(0,0,0,.2);position:relative}
.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before{animation-delay:.2s}
.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before{animation-delay:.4s}
.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before{animation-delay:.6s}
.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before{animation-delay:.8s}
.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before{animation-delay:1s}
.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before{animation-delay:1.2s}
.ctn-preloader .loader-section{background-color:#fff;height:100%;position:fixed;top:0;width:calc(50% + 1px)}
.ctn-preloader .loader-section.section-left{left:0}
.ctn-preloader .loader-section.section-right{right:0}

.loaded .animation-preloader{opacity:0;transition:.3s ease-out}
/* Efecto de cortina */
.loaded .loader-section.section-left{transform:translateX(-101%);transition:.7s .3s all cubic-bezier(.1,.1,.1,1)}
.loaded .loader-section.section-right{transform:translateX(101%);transition:.7s .3s all cubic-bezier(.1,.1,.1,1)}
.animation-preloader img{width:250px;height:170px; object-fit: contain; position:absolute;top:34%;left:0;right:0;margin:auto;transform:translateY(-45%)}
@keyframes spinner{to{transform:rotateZ(360deg)}}@keyframes letters-loading{0%,100%,75%{opacity:0;transform:rotateY(-90deg)}25%,50%{opacity:1;transform:rotateY(0)}}
/* ---------------------------------------------------
  HEADER
----------------------------------------------------- */ 
header{
  z-index: 9;
  position:absolute;width:100%;
  background: linear-gradient(180deg, white,  transparent);
  /*height: 200px;*/
  
}
.navbar{padding:20px 0;background:0 0!important;border:none;border-radius:0}
.navbar a{font-size:16px!important;text-transform:capitalize;font-weight:500}
.site-logo{width:200px}
.navbar-toggler{padding:0;border:0;color:#1A365D!important}
.navbar-toggler:focus{box-shadow:none!important}
.nav-line{display:flex;align-items:center;opacity:0;transition:ease-in-out .2s}
header li.nav-item a{padding-left:0!important;padding-right:0!important;padding-bottom:0!important}
.navbar-collapse li.active .nav-line,.navbar-collapse li:hover .nav-line{opacity:1}
.navbar-collapse li a:hover,.navbar-collapse li.active a{color:#1A202C!important}
/* ---------------------------------------------------
  BANNER
----------------------------------------------------- */
.banner{
  /*background:url(../images/banner-bg.png) no-repeat;*/
  background:url(../images/client/hero.jpg) no-repeat;
  background-size:cover;
  /*background-position:top right;*/
  background-position: center;
  padding:170px 0 50px 0;
  min-height: 800px;
  position: relative;
}

.banner::before {
  z-index: 0;
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, white, transparent,transparent, transparent);
}

.banner h1 {
  position: relative;
  z-index: 1;
  font-size: 48px;
  text-shadow: 1px 1px 1px #1A202C;
}
.filter-card{
  position: relative;
  z-index: 1;
  /*border:1px dashed rgb(90,90,90,.34);*/
  background-color: rgba(255,255,255,0.85);
  border:2px solid #1A202C;
  border-radius:20px;
  padding:25px;
  box-shadow: 0 7px 10px rgb(26, 32, 44,.11);
  overflow: unset;
  transition: height 0.5s ease; /* Перехід для зміни висоти */
  height: fit-content;

}

/* ---------------------------------------------------
  SERVICES
----------------------------------------------------- */
.services{padding:70px 0}
.service-card{background:#f5f5f5;border:1px solid rgb(214,214,214,.36);border-radius:20px;padding:25px 20px;text-align:center;box-shadow:0 3px 6px rgb(63,181,139,.14);transition:ease-in-out .5s}
.service-card-img{transition:ease-in-out .2s}
.service-card:hover{background:#1A365D;color:#fff}
.service-card:hover .green-text,.service-card:hover p{color:#fff}
.service-card:hover .service-card-img{filter:brightness(4) grayscale(1) contrast(4)}
.green-line{background:#1A365D;width:33px;height:5px;border-radius:50px;display:inline-block}
.service-card:hover .green-line{background-color:#fff}
.service-card p{font-size:14px}
/* ---------------------------------------------------
  NEW CAR DEALS
----------------------------------------------------- */
.new-car-deals{text-align:center;padding:70px 0}
.car-deal-card{
  border:1px solid rgb(26, 32, 44,.13);
  box-shadow:0 7px 10px rgb(26, 32, 44,.11);
  padding:0px 0 30px 0;
  background:#fff;
  border-radius:15px;
  height:100%;
  position:relative;
  transition:ease-in-out .2s;
  overflow: hidden;
  display: flex;
  flex-flow: column;
}

.car-deal-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-flow: column;
  height: 100%;
}

.car-deal-link:hover {
  text-decoration: none;
  color: inherit;
}

.car-deal-card:hover img{
  transform: scale(1.1);
}
.car-deal-card img{
  transition: all 0.5s ease;
}

.car-deal-img{
  max-height: 300px;
  overflow: hidden;
  position:relative;
  /*z-index:3;*/
  /*height:121px;*/
  padding:0px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.deal-overlay{position:absolute;width:100%;height:100%;border-radius:15px;color:#fff;top:0;left:0;background:rgb(63,181,139,.93);display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:20px;opacity:0;z-index:-3;transition:all .2s;align-items:center}
.car-deal-card:hover .deal-overlay{opacity:1;z-index:0}
.car-deal-tags{background:#1A365D;height:30px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;position:relative}
.car-deal-tags::after{content:'';border-top:14.5px solid #3fb58b;border-left:14.5px solid transparent;position:absolute;top:0;right:0}
.car-deal-inner{
  padding:15px 20px 0 20px;
  flex-flow: column;
  display: flex;
  justify-content: end;
  flex-grow: 1;
}

.car-deal-inner h6{
  font-size: 16px !important;
}
/* ---------------------------------------------------
  NEW MODEL RELEASES
----------------------------------------------------- */
.new-model-releases{background:url(../images/new-releases-bg.png) no-repeat,#f5f5f5;background-size:cover;padding:70px 0;text-align:center;color:#fff;background-position:right}
.white-line{background-color:#fff}
.new-model-releases .one-model {
  max-height: 100px;
  display: contents;
}
.new-model-releases p.description {
  max-width: 800px;
}
/* ---------------------------------------------------
  ABOUT US
----------------------------------------------------- */
.about-us{padding:70px 0}
.about-us img {max-height: 400px;}
/* ---------------------------------------------------
  BEST CARS
----------------------------------------------------- */
.best-cars{padding-bottom:70px}
.best-cars .car-deal-card{text-align:center}
.best-cars .car-deal-card .deal-overlay{padding:10px 20px;align-items:flex-start;text-align:left}
.best-cars .car-deal-card:hover .deal-overlay{opacity:1;z-index:4}
/* ---------------------------------------------------
  TESTIMONIALS
----------------------------------------------------- */
.testimonials{background:url(../images/testimonial-bg.png) no-repeat;background-size:cover;color:#fff;padding:70px 0;text-align:center}
.testimonial-carousel.owl-theme .owl-dots button span{background:#3fb58b;transition:ease-in-out .2s}
.testimonial-carousel.owl-theme .owl-dots button:hover span{background:#fff}
.testimonial-carousel.owl-theme .owl-dots button.active span{background:#fff;width:45px}
/* ---------------------------------------------------
  LATEST FROM TRADER
----------------------------------------------------- */
.latest-from-trader{padding:70px 0}
.trader-card{min-height:340px;display:flex;flex-direction:column;padding:20px;justify-content:flex-end;position:relative;border-radius:25px;color:#fff}
.trader-card-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:25px;z-index:-1}
.trader-card::after{content:'';background:linear-gradient(to bottom,rgb(0 0 0 / 0) 55%,rgb(0,0,0,1));position:absolute;width:100%;height:100%;border-radius:25px;left:0;top:0}
.trader-card-inner{position:relative;z-index:2}
/* ---------------------------------------------------
  FOOTER
----------------------------------------------------- */
footer{background:#1A365D;color:#fff}
footer a{text-decoration:none}
.footer-logo{width:250px}
/* ---------------------------------------------------
  INNER BANNER
----------------------------------------------------- */
.inner-banner{background:url(../images/inner-banner.png) no-repeat;padding:120px 0 50px 0;background-size:cover;background-position:bottom right;max-height:467px}
/* ---------------------------------------------------
  CAR FOR SALE
----------------------------------------------------- */
.car-for-sale{padding:70px 0}
/* ---------------------------------------------------
  CONTACT US
----------------------------------------------------- */
.contact-us{padding:70px 0}
.contact-card{border-radius:0 11px 11px 11px;border:1.5px dashed rgb(90,90,90,.34);padding:20px;text-align:center}
.contact-img{width:100px;height:100px;margin:0 auto}
.no-underline{text-decoration:none}
.contact-us .site-input{padding:12px 25px}
/* ---------------------------------------------------
  PRODUCT DETAILS
----------------------------------------------------- */
.slider-card img{width:100%;max-height:320px;object-fit:cover;object-position:center;border-radius:20px}
.item.item-sliderNav img{width:143px;height:128px;object-fit:cover;object-position:center;cursor:pointer;border-radius:10px}
.green-tag{background:#1A365D;width:200px;height:60px;border-radius:35px 0 0 35px;display:flex;align-items:center;justify-content:center;margin-left:auto;color:#fff; transition: all 0.5s ease; cursor: pointer;}
a .green-tag:hover {
  background:rgba(4, 26, 32, 0.9);
  text-decoration: none !important;
  color: #e7bd01 ;
}

a:hover { 
  text-decoration: none !important;
}

/* ---------------------------------------------------
  LOAN CALCULATOR
----------------------------------------------------- */

.loan-calculator {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.loan-calculator:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.calculator-header {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.calculator-header h6 {
    color: #1A365D;
    font-weight: 600;
    margin: 0;
}

.calculator-body .form-label {
    font-weight: 500;
    color: #495057;
    margin-bottom: 5px;
}

.calculator-body .form-select,
.calculator-body .form-control {
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.8rem;
    padding: 6px 10px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.calculator-body .form-select:focus,
.calculator-body .form-control:focus {
    border-color: #1A365D;
    box-shadow: 0 0 0 0.2rem rgba(26, 54, 93, 0.25);
}

.calculator-body .input-group-sm .input-group-text {
    background-color: #1A365D;
    color: white;
    border: 1px solid #1A365D;
    font-size: 0.75rem;
    font-weight: 600;
}

.calculator-body .input-group-sm .form-control {
    border-left: none;
}

.calculator-results {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 12px;
    margin-top: 10px;
}

.result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.result-item:last-child {
    margin-bottom: 0;
}

.result-item small {
    font-size: 0.75rem;
}

.result-item hr {
    margin: 8px 0;
    border-color: #e9ecef;
}

.calculator-disclaimer {
    text-align: center;
    padding-top: 8px;
    border-top: 1px solid #e9ecef;
}

.calculator-disclaimer small {
    font-size: 0.7rem;
    color: #6c757d;
}

/* Car card integration styles */
.car-deal-card .loan-calculator {
    margin-top: 10px;
    padding: 12px;
    font-size: 0.8rem;
}

.car-deal-card .loan-calculator .calculator-header {
    margin-bottom: 10px;
    padding-bottom: 8px;
}

.car-deal-card .loan-calculator .calculator-header h6 {
    font-size: 0.9rem;
}

.car-deal-card .loan-calculator .form-label {
    font-size: 0.75rem;
    margin-bottom: 3px;
}

.car-deal-card .loan-calculator .form-select,
.car-deal-card .loan-calculator .form-control {
    font-size: 0.75rem;
    padding: 4px 8px;
    height: auto;
}

.car-deal-card .loan-calculator .input-group-sm .input-group-text {
    font-size: 0.7rem;
    padding: 4px 6px;
}

.car-deal-card .loan-calculator .calculator-results {
    padding: 8px;
    margin-top: 8px;
}

.car-deal-card .loan-calculator .result-item {
    margin-bottom: 6px;
}

.car-deal-card .loan-calculator .result-item small {
    font-size: 0.7rem;
}

.car-deal-card .loan-calculator .calculator-disclaimer {
    padding-top: 6px;
}

.car-deal-card .loan-calculator .calculator-disclaimer small {
    font-size: 0.65rem;
}

/* Debug Information Styling */
.calculator-debug {
    background-color: #f8f9fa;
    border-radius: 4px;
    padding: 8px;
    font-family: 'Courier New', monospace;
    line-height: 1.3;
}

.calculator-debug small {
    font-size: 0.7rem;
    color: #6c757d;
}

.calculator-debug strong {
    color: #495057;
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .loan-calculator {
        padding: 10px;
        font-size: 0.8rem;
    }
    
    .calculator-header h6 {
        font-size: 0.85rem;
    }
    
    .calculator-results {
        padding: 8px;
    }
    
    .result-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    
    .result-item small:last-child {
        align-self: flex-end;
    }
}
.detail-card{border-radius:10px;padding:20px}
.phone-icon{width:32px;object-fit:contain}
/* ---------------------------------------------------
  CAR DETAILS
----------------------------------------------------- */
.car-details{padding:70px 0}
/* ---------------------------------------------------
  CAR REVIEWS
----------------------------------------------------- */
.car-reviews{padding-bottom:70px}
.review-card{padding:20px;border-radius:0 11px 11px 11px;border:1.5px dashed rgb(90,90,90,.34);text-align:center}
.big-icon{font-size:40px}
.review-carousel.owl-theme .owl-dots button span{background:#3fb58b;transition:ease-in-out .2s;margin-top:20px}
.review-carousel.owl-theme .owl-dots button:hover span{background:#1A365D}
.review-carousel.owl-theme .owl-dots button.active span{background:#1A365D;width:45px}
.review-carousel .owl-stage-outer, .review-carousel .owl-stage{display: flex;}
.review-carousel .item{display: flex; height: 100%; padding-bottom: 20px;}
.review-carousel .item .review-card{display: flex; height: 100%; align-items: center; justify-content: center; flex-direction: column;}
/* ---------------------------------------------------
  SEARCH RESULTS
----------------------------------------------------- */
/*
.search-results{padding:70px 0}
.pagination .page-item:first-child .page-link,.pagination .page-item:last-child .page-link{color:#1A365D}
.pagination{border:1px solid #1A365D;display:inline-flex;border-radius:6px}
.pagination .page-item:first-child,.pagination .page-item:first-child .page-link{border-radius:6px 0 0 6px}
.pagination .page-item .page-link{padding:0 15px;line-height:1;border:0;border-right:1px solid #97a2c9!important;margin-left:0;border-radius:0!important;background:0 0!important;color:#2b2541}
.pagination .page-item{padding:15px 0}
.pagination .page-item:first-child .page-link,.pagination .page-item:last-child .page-link{border-right:0!important}
.pagination .page-item.active,.pagination .page-item:hover{background:#1A365D}
.pagination .page-item.active .page-link,.pagination .page-item:hover .page-link{color:#fff;border-right:1px solid transparent!important}
.pagination .page-item.active:first-child .page-link,.pagination .page-item.active:last-child .page-link,.pagination .page-item:hover:first-child .page-link,.pagination .page-item:hover:last-child .page-link{color:#3fb58b!important}
.pagination .page-item.active:first-child,.pagination .page-item.active:last-child,.pagination .page-item:hover:first-child,.pagination .page-item:hover:last-child{background:0 0!important}
.pagination .page-item .page-link:focus{box-shadow:none}
*/