:root {
  --bs-primary: #3338A0 !important;
  --bs-secondary: #C59560;
  --bs-warning: #FCC61D;
  --bs-light: #F7F7F7;
  --bs-dark: #111111;
}

.btn-outline-primary {
  --bs-btn-color: #3338A0;
  --bs-btn-border-color: #3338A0;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #3338A0;
  --bs-btn-hover-border-color: #3338A0;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #3338A0;
  --bs-btn-active-border-color: #3338A0;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #3338A0;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #3338A0;
  --bs-gradient: none;
}

.text-primary {
  color: #3338A0 !important;
}

.bg-primary {
  background-color: #3338A0 !important;
}

.btn-primary {
  background-color: #3338A0 !important;
  border: none;
  border-radius: 0 !important;
}

/* Login Modal Form  */
.modal-content {
  border: none;
  border-radius: 0 !important;
}

/* custom.css */

.user-menu-link {
  font-size: 10px !important;
  color: #3338A0 !important;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.user-menu-link:hover {
  color: #C59560;
}

.user-icon {
  font-size: 1.4rem;
  color: #C59560;
  line-height: 1;
}

.user-name {
  font-size: 12px;
  color: #3338A0;
}

/* Target the placeholder text */
.custom-search::placeholder {
  color:#a57a48;              /* Change placeholder color */
  font-size: 0.9rem;        /* Adjust font size */       /* Optional for style */
  opacity: 1;               /* Ensures the color is applied fully */
}

/* Optional: focus state for better UX */
.custom-search:focus::placeholder {
  color: #bbb;              /* Slightly lighter when focused */
}


/* 

/* ✅ Mobile version navbar styles */
/* Avatar Circle */
.mobile-avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #3338A0;
  /* your theme primary */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
}

/* Wrapper for avatar + arrow */
.mobile-avatar-toggle {
  text-decoration: none;
  color: inherit;
}

/* Arrow icon styling */
.mobile-arrow {
  font-size: 12px;
  color: #555;
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
}

/* Remove bootstrap’s default caret */
.mobile-avatar-toggle::after {
  display: none !important;
}



/* Optional: Adjust hover and border tones */
.btn-primary:hover, .bg-primary:hover {
  background-color: #2a2e85 !important;
}

.btn-secondary:hover, .bg-secondary:hover {
  background-color: #a57a48 !important;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #F7F7F7;
  color: #111111;
}

.bg-primary-custom {
  background-color: #3338A0;
}

.text-accent {
  color: #FCC61D;
}

.btn-primary-custom {
  background-color: #3338A0;
  color: #fff;
  border: none;
}

.btn-primary-custom:hover {
  background-color: #C59560;
  color: #fff;
}

.btn-accent {
  background-color: #FCC61D;
  color: #111;
  border: none;
}

.btn-accent:hover {
  background-color: #C59560;
  color: #fff;
}

/* Banner */
.banner {
  position: relative;
  overflow: hidden;
}

.banner-img {
  height: 40vh;
  object-fit: cover;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(17, 17, 17, 0.55);
}

.banner-content h1 {
  font-size: 2.5rem;
}



/* ----------------------------------------------------
   Most Booked Service Section (Clean & Optimized)
-----------------------------------------------------*/

/* ----------------------------------------------------
   Install New Services Section (Optimized & Clean)
-----------------------------------------------------*/

/* Section background */
#installation {
    background: #fff !important;
     font-family: 'Montserrat', sans-serif;
}

/* Section title */
.section-title-wrapper {
    position: relative;
}

.section-icon {
    font-size: 1.5rem;
    color: #C59560;
}

.section-title {
    font-size: 1.6rem;
    color: #2a2e80 !important;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 150px;
    height: 3px;
    background: linear-gradient(90deg, #3338A0, #C59560);
    border-radius: 10px;
    transition: width 0.4s ease;
}

.section-title-wrapper:hover .section-title::after {
    width: 100%;
}

/* View all button */
.view-all-btn {
    font-size: 0.9rem;
    font-weight: 600;
    color: #3338A0;
    border: 2px solid #3338A0;
    padding: 3px 9px;
    text-decoration: none;
    border-radius: 0;
    letter-spacing: 0.3px;
    transition: 0.3s ease;
}

.view-all-btn:hover {
    background: #3338A0;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(51, 56, 160, 0.3);
}

/* ------------------------------------------
   SERVICE CARD
---------------------------------------------*/

.service-card {
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-top: 2px solid #C59560;
    transition: 0.3s ease;
    font-family:  'Montserrat', sans-serif;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Service image wrapper */
.service-img-wrapper {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-bottom: 1px solid #eee;
}

.service-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.4s ease;
}

.service-card:hover .service-img {
    transform: scale(1.08);
}

/* Book Now Button */
.btn-primary-custom {
    background-color: #3338A0;
    color: #fff;
    border-radius: 0 !important;
    transition: 0.3s ease;
}

.btn-primary-custom:hover {
    background-color: #a57a48;
    transform: scale(1.05);
}

/* Brand Logo */
.brand-logo {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border: 1px solid #ddd;
    border-radius: 50%;
}
/* Price layout in header */
.price-wrapper {
    min-width: 80px;
}

/* Old (striked) price */
.old-price {
    font-size: 0.75rem;
    text-decoration: line-through;
    color: #9b9b9b;
    line-height: 1.1;
}

/* New (offer) price */
.new-price {
    font-size: 0.9rem;
    font-weight: 700;
    color: #2a8f4a; /* nice green for price */
    line-height: 1.1;
}

/* Discount pill */
/* .discount-badge {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    background: #ffecec;
    color: #d9534f;
} */
/* Discount Ribbon Badge */
.discount-badge {
    background: #ff4d4f;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px 4px 4px 0;
    position: relative;
    display: inline-block;
}

/* Small triangle notch on the left */
.discount-badge::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 0;
    width: 0;
    height: 0;
    border-top: 6px solid #ff4d4f;
    border-bottom: 6px solid transparent;
    border-right: 6px solid transparent;
}


/* ----------------------------------------------------
   RESPONSIVE DESIGN (400px, 576px, 768px)
-----------------------------------------------------*/

@media (max-width: 400px) {
    .service-img-wrapper {
        height: 120px;
    }
    .card-body h6 {
        font-size: 8px;
    }
    .card-body p {
        font-size: 11px;
    }
    .brand-logo {
        width: 26px;
        height: 26px;
    }
    .new-price {
        font-size: 0.8rem;
    }
    .old-price {
        font-size: 0.7rem;
    }
}

@media (max-width: 576px) {
    .service-img-wrapper {
        height: 140px;
    }
    .service-card {
        border-radius: 0.75rem;
    }
}

@media (max-width: 768px) {
    .service-img-wrapper {
        height: 160px;
    }
    .section-title {
        font-size: 1.4rem;
    }
    .view-all-btn {
        padding: 3px 8px;
        font-size: 0.85rem;
    }
}





/* -----------------------------------------
   INSTALL NEW APPLIANCE SECTION STARTS HERE
------------------------------ --------------*/

#install{
  background: #F7F7F7 !important;
}

.new-installation-service-card {
  transition: all 0.3s ease;
  cursor: pointer;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #e9a1a1;
}

.new-installation-service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* Image Styling */
.new-installation-img-wrapper {
  width: 100%;
  height: 180px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.new-installation-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ensures full image visible without cutting */
  transition: transform 0.4s ease;
}

.new-installation-service-card:hover img {
  transform: scale(1.05);
}

/* Overlay (Book Now button appears smoothly) */
.new-installation-overlay {
  position: absolute;
  inset: 0;
  background: rgba(51, 56, 160, 0.85);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.new-installation-service-card:hover .new-installation-overlay {
  opacity: 1;
  visibility: visible;
}
.install-btn-book-now{
  background-color: #fff;
  color: #3338A0;
  border: none;
  border-radius: 0 !important;
  transition: background-color 0.3s ease, transform 0.2s ease;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.install-btn-book-now:hover {
  background-color: #a57a48;
  color: #fff;
}



/* Responsive tweaks */
@media (max-width: 768px) {
  .new-installation-img-wrapper {
    height: 150px;
  }
}

/* ---------------------------------------
   INSTALL NEW APPLIANCE SECTION ENDS HERE
------------------------------------------- */



/* ---------------------------------------
  Repair And Maintenance SECTION Start HERE
------------------------------------------- */

#repair {
  background: #fff !important;
}

/* Section Title */
/* .section-title-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-icon {
  font-size: 1.6rem;
  color: #3338A0;
}

.section-title {
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 60%;
  height: 3px;
  background-color: #C59560;
  border-radius: 2px;
} */

/* Card Design */
.repair-service-card {
  position: relative;
  transition: all 0.3s ease;
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  background: #fff;
  border-top: 2px solid #a57a48 !important;
}

.repair-service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Image Handling */
.repair-card-img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.repair-service-card:hover .repair-card-img {
  transform: scale(1.05);
}

/* Overlay Button Centered */
.service-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.repair-service-card:hover .service-overlay {
  opacity: 1;
}

/* Center Button Styling */
.request-repair-btn {
  background-color: #3338A0;
  color: #fff;
  border: none;
  border-radius: 0;
  transition: all 0.3s ease;
}

.request-repair-btn:hover {
  background-color: #a57a48;
  color: #fff;
  transform: scale(1.05);
}



/* ---------------------------------------
  Repair And Maintenance SECTION END HERE
------------------------------------------- */


/* ==============================
   ACCESSORIES SECTION STARTS HERE
   ============================== */
.accessories-section {
  background: #F7F7F7;
  padding: 60px 0;
}

/* Section Title & View All Button Layout */
.accessories-section .section-title-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.accessories-section .section-icon {
  font-size: 1.6rem;
  color: #3338A0;
}

.accessories-section .section-title {
  position: relative;
  font-weight: 700;
  color: #111111;
}

.accessories-section .section-title::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 60%;
  height: 3px;
  background-color: #C59560;
  border-radius: 2px;
}

/* 
   ACCESSORY CARD Start Here
   */
.accessory-card {
  background: #fff;
  border: none;
  border-top: 2px solid #3338A0 !important;
  border-radius: 16px;
  transition: all 0.3s ease;
  overflow: hidden;
  height: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.accessory-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Image */
.accessory-card img {
  width: 100%;
  height: 180px;
  object-fit: contain !important;
  background-color: #fff;
  transition: transform 0.4s ease;
}

.accessory-card:hover img {
  transform: scale(1.07);
}

/* Card Body */
.accessory-card .card-body {
  padding: 15px;
}

.accessory-card h6 {
  font-weight: 600;
  color: #111111;
  margin-bottom: 6px;
}

.accessory-card .price {
  color: #3338A0;
  font-weight: 700;
  margin-bottom: 10px;
}
.order-now-btn{
  background-color: #3338A0;
  color: #fff;
  border: none;
  border-radius: 0;
  transition: all 0.3s ease;
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.order-now-btn:hover {
  background-color: #a57a48;
  color: #fff;
}



/* Responsive Adjustments */
@media (max-width: 576px) {
  .accessory-card img {
    height: 150px;
  }
  .accessories-section {
    padding: 40px 0;
  }
}

/* ==============================
   ACCESSORY CARD END Here
   ============================== */


/* ==============================
   Review Section Start Here
   ============================== */
.review-section {
  background: #fff;
}

.review-card {
  background: #fff;
  border-radius: 16px;
  transition: all 0.3s ease;
}

.review-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.star-rating i {
  color: #FCC61D;
  margin-right: 2px;
}

/* ==============================
   Review Section END Here
   ============================== */


/* ==============================
   ALL SECTION SERVICE NAME, DESCRIPTION ETC
   ============================== */

.service-name{
    font-size: 16px !important;
    text-transform: uppercase;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    color: #3338A0 !important;
  }
  .description-text{
    font-size: 12px !important;
    color: #333 !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
  }
  .heading-description{
    font-size: 14px !important;
    color: #333 !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
  }

/* Footer */

footer {
  background-color: #111111;
}

footer a {
  text-decoration: none;
}