/* J-PRO (Blue / Black / White)*/

/* Brand palette + typography */
:root{
  --servixa-base: #0B5ED7;           /* Blue accent */
  --servixa-base-rgb: 11, 94, 215;
  --servixa-black: #111111;          /* Charcoal */
  --servixa-black-rgb: 17, 17, 17;
  --servixa-white: #ffffff;
  --servixa-white-rgb: 255, 255, 255;

  --jpro-charcoal: #111111;
  --jpro-light-gray: #f5f7fb;
  --jpro-text-muted: #9aa3b2;

  --jpro-heading-font: "Montserrat", sans-serif;
  --jpro-body-font: "Inter", sans-serif;
}

body{
  font-family: var(--jpro-body-font);
  background: var(--servixa-white);
  color: var(--servixa-gray);
}

h1,h2,h3,h4,h5,h6,
.main-slider__title,
.page-header__title,
.section-title__title{
  font-family: var(--jpro-heading-font);
  letter-spacing: -0.02em;
}

/* Navigation: white bg, black text, blue underline on hover */
.main-menu,
.main-menu__wrapper,
.main-menu__wrapper-inner,
.stricky-header,
.stricky-header__inner{
  background-color: var(--servixa-white) !important;
}

.main-menu__list>li>a,
.main-menu__list>li>ul>li>a,
.main-menu__main-menu-box .main-menu__list>li>a{
  color: var(--servixa-white) ;
}

.main-menu__list>li:hover>a,
.main-menu__list>li.current>a,
.main-menu__list>li>a:hover{
  color: var(--servixa-white);
  text-decoration: none;
}

.main-menu__list>li>a:after{
  background-color: var(--servixa-base) !important;
}

/* Buttons: blue with white text */
.thm-btn,
.thm-btn-two,
.main-slider__btn a,
.button a,
.btn,
button.btn{
  background-color: var(--servixa-base);
  border-color: var(--servixa-base);
  color: var(--servixa-white) ;
}

.thm-btn:hover,
.thm-btn-two:hover,
.btn:hover,
button.btn:hover{
  background-color: var(--servixa-black);
  border-color: var(--servixa-black);
  color: var(--servixa-white) ;
}

/* Hero / page header: charcoal bg, white text */
.main-slider,
.page-header,
.page-header__bg,
.main-slider__bg{
  background-color: var(--jpro-charcoal) !important;
}

.main-slider__title,
.page-header__title{
  color: var(--servixa-white) !important;
}

.main-slider__text,
.page-header__text,
.page-header p{
  color: #cfd5e3 !important;
}

/* Services cards: white bg, blue hover */
.services-one__single,
.services-two__single,
.service-details__service-single,
.service-details__category-list li a,
.services-page .services-one__single{
  background-color: var(--servixa-white) !important;
  border: 1px solid var(--servixa-bdr-color) !important;
}

.services-one__title a,
.services-two__title a,
.service-details__title{
  color: var(--servixa-black) !important;
}

.services-one__single:hover,
.services-two__single:hover{
  border-color: var(--servixa-base) !important;
}

.services-one__single:hover .services-one__title a,
.services-two__single:hover .services-two__title a{
  color: var(--servixa-black) !important;
}

/* Thin-line icon feel: keep icons monochrome/blue */
.services-one__icon span,
.services-two__icon span,
.services-one__icon i,
.services-two__icon i{
  color: var(--servixa-black) !important;
}

.services-one__single:hover .services-one__icon span,
.services-two__single:hover .services-two__icon span,
.services-one__single:hover .services-one__icon i,
.services-two__single:hover .services-two__icon i{
  color: var(--servixa-base) !important;
}

/* Specializations / highlight chips (where present) */
.specialization,
.specializations,
.feature-list li:before,
.check-list li:before{
  color: var(--servixa-base) !important;
}

/* Testimonials/Reviews: black bg, white text, blue stars */
.testimonials-page,
.testimonials-page-v2,
.testimonials-page-v2__inner,
.testimonial-one,
.testimonial-two{
  background-color: var(--jpro-charcoal) !important;
}

.testimonial-two__single,
.testimonial-one__single{
  background-color: #171717 !important;
  border-color: rgba(255,255,255,0.10) !important;
}

.testimonial-two__text,
.testimonial-one__text,
.testimonial-two__author-content h3,
.testimonial-two__author-content p{
  color: var(--servixa-white) !important;
}

.testimonial-two__ratting i,
.testimonial-one__ratting i{
  color: var(--servixa-base) !important;
}

/* FAQ: white bg, blue hover */
.faq-one,
.faq-two,
.faq-page{
  background-color: var(--servixa-white) !important;
}

.faq-one-accrodion .accrodion-title h4,
.faq-two-accrodion .accrodion-title h4{
  color: var(--servixa-black) !important;
}

.faq-one-accrodion .accrodion.active .accrodion-title h4,
.faq-two-accrodion .accrodion.active .accrodion-title h4{
  color: var(--servixa-base) !important;
}

.faq-one-accrodion .accrodion-title:before,
.faq-two-accrodion .accrodion-title:before{
  color: var(--servixa-base) !important;
}

/* Footer: black bg, white links, blue hover */
.site-footer,
.site-footer__top,
.site-footer__bottom{
  background-color: var(--jpro-charcoal) !important;
}

.site-footer a,
.site-footer p,
.site-footer__title{
  color: var(--servixa-white) !important;
}

.site-footer a:hover{
  color: var(--servixa-base) !important;
}

/* Forms + inputs: premium clean */
input, textarea, select{
  border-radius: 10px;
}

/* ============================================================
   Logo badge (bigger + slight downward overlap like dealerships)
   ============================================================ */
.main-menu-two__logo{
  padding: 0 !important;                   /* slimmer bar */
}

.main-menu-two__logo a{
  display: inline-flex;
  align-items: center;
  background: var(--servixa-white);
  padding:0 30px 15px 30px;                      /* BIGGER badge (dealership style) */
  border-radius: 14px;
  position: relative;
  top: 15px;                               /* more downward overlap */
  z-index: 1001;
}

.main-menu-two__logo img{
  height: 135px;                           /* MUCH bigger logo */
  width: auto;
  display: block;
}

/* Slimmer nav height while keeping spacing professional */
.main-menu-two .main-menu__list>li,
.stricky-header.main-menu-two .main-menu__list>li{
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

/* Keep badge consistent on sticky header too */
.stricky-header.main-menu-two .main-menu-two__logo a{
  top: 0px;
   padding:0 30px 5px 30px;      
}
.stricky-header.main-menu-two .main-menu-two__logo img{height: 80px;}
/* Keep dropdowns aligned after reducing padding */
.main-menu-two .main-menu__list>li>ul{
  top: 100%;
}

/* On small screens, avoid overlap pushing layout too far */
@media (max-width: 991px){
  .main-menu-two__logo a{ top: 0px; padding: 14px 18px; border-radius: 12px; }
  .main-menu-two__logo img{ height: 72px; }
  .main-menu-two .main-menu__list>li{ padding-top: 16px !important; padding-bottom: 16px !important; }
}

@media (max-width: 480px){
  .main-menu-two__logo a{ top: 8px; padding: 12px 14px; }
  .main-menu-two__logo img{ height: 100px; }
}

/* =========================
   FAQs (Home + FAQ Page)
   ========================= */
.faq-page__subtext{
  max-width: 760px;
  margin: 12px auto 0;
  font-size: 16px;
  line-height: 28px;
  color: rgba(0,0,0,.65);
}
.faq-page__subtext a{
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Ensure accordion styling applies (template expects .faq-one-accrodion) */
.accrodion-grp.faq-one-accrodion .accrodion + .accrodion{ margin-top: 18px; }

/* Cleaner FAQ card look */
.accrodion-grp.faq-one-accrodion .accrodion{
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
}
.accrodion-grp.faq-one-accrodion .accrodion-title{
  padding: 18px 22px;
}
.accrodion-grp.faq-one-accrodion .accrodion-title h4{
  font-size: 18px;
  line-height: 28px;
}
.accrodion-grp.faq-one-accrodion .accrodion-content{
  padding-left: 22px;
  padding-right: 22px;
  padding-bottom: 22px;
}

.faq-home__cta{
  margin-top: 34px;
}

@media (max-width: 991px){
  .faq-page__subtext{ font-size: 15px; line-height: 26px; }
}



/* === JPRO Custom: Gallery images in Brand strip + Contact/Appointment image === */
.brand-one__single-inner{
  width:168px;
  height:82px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ffffff;
  border-radius:12px;
  padding:0;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  overflow:hidden;
}
.brand-one__single-inner img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Keep the right-side appointment image clean and fully visible */
.appointment-two__img-1{
  overflow:hidden;
  border-radius:18px;
}
.appointment-two__img-1 img{
  width:100%;
  height:100%;
  min-height:360px;
  object-fit:cover;
  display:block;
}

/* ============================================================
   HERO BANNER FIX: Hide blocking placeholder boxes
   Allow full visibility of the beautiful car slideshow
   ============================================================ */
.jpro-hero__media{
  display: none !important;
}

/* Optimize hero grid for single column when placeholders are hidden */
.jpro-hero__grid{
  grid-template-columns: 1fr !important;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.jpro-hero__content{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.jpro-hero__text{
  max-width: 680px;
}

.jpro-hero__actions{
  justify-content: center;
}

/* Alternative: If you want to keep them but make them subtle and non-blocking */
/*
.jpro-hero__man,
.jpro-hero__wide{
  opacity: 0.15 !important;
  pointer-events: none;
}
*/

/* ============================================================
   PRICING SECTION: Clean version with ORIGINAL LAYOUT
   - Keep 4 services on left, 4 on right
   - Remove dotted connector lines
   - Remove circle background
   - Make badge and photo BIGGER
   ============================================================ */

/* REMOVE ALL DOTTED CONNECTORS - Keep layout clean */
.pricing-two__price-list:not(.pricing-two__price-list-2) li::after,
.pricing-two__price-list-2 li::before{
  display: none !important;
}

/* REMOVE THE CIRCLE PLACEHOLDER BEHIND IMAGES */
.pricing-two__img-box::before{
  display: none !important;
}

/* Keep original spacing but cleaner */
.pricing-two__img-box{
  margin-top: 70px !important;
  padding: 0 !important;
}

/* MAKE BADGE BIGGER - from ~300px to 450px */
.pricing-two__badge-wrap{
  width: 100% !important;
  max-width: 450px !important;
  margin: 0 auto 35px !important;
  top: 100px;
}
@media (max-width:768px){
  .pricing-two__badge-wrap{top: 40px !important;}
}
.pricing-two__badge{
  width: 100% !important;
  height: auto !important;
  border-radius: 100px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15) !important;
  background: white !important;
  padding: 25px 35px !important;
}

/* MAKE PHOTO BIGGER - from ~400px to 550px */
.pricing-two__photo-wrap{
  width: 100% !important;
  max-width: 550px !important;
  margin: 0 auto !important;
}

.pricing-two__center-photo{
  width: 100% !important;
  height: auto !important;
  border-radius: 25px !important;
  box-shadow: 0 25px 60px rgba(0,0,0,0.20) !important;
}

/* Keep original z-index stacking for proper layout */
.pricing-two .row.align-items-center{
  position: relative !important;
  overflow: visible !important;
}

.pricing-two .row.align-items-center > .col-xl-4:nth-child(1),
.pricing-two .row.align-items-center > .col-xl-4:nth-child(3){
  position: relative !important;
  z-index: 5 !important;
}

.pricing-two .row.align-items-center > .col-xl-4:nth-child(2){
  position: relative !important;
  z-index: 10 !important;
}

.pricing-two__price-list li{
  overflow: visible !important;
}

.pricing-two__price-list-box{
  position: relative !important;
  z-index: 5 !important;
}

/* Responsive - maintain original structure */
@media (max-width: 1199px){
  .pricing-two__img-box{
    margin-top: 40px !important;
  }
  
  .pricing-two__badge-wrap{
    max-width: 380px !important;
    margin-bottom: 28px !important;
  }
  
  .pricing-two__badge{
    padding: 22px 30px !important;
    border-radius: 80px !important;
  }
  
  .pricing-two__photo-wrap{
    max-width: 450px !important;
  }
  
  .pricing-two__center-photo{
    border-radius: 22px !important;
  }
}

@media (max-width: 767px){
  .pricing-two__img-box{
    margin-top: 30px !important;
  }
  
  .pricing-two__badge-wrap{
    max-width: 320px !important;
    margin-bottom: 20px !important;
  }
  
  .pricing-two__badge{
    padding: 18px 25px !important;
    border-radius: 60px !important;
  }
  
  .pricing-two__photo-wrap{
    max-width: 380px !important;
  }
  
  .pricing-two__center-photo{
    border-radius: 18px !important;
  }
}