/* 
 * Custom styles for FW Carpet And Upholstery Boston
 * Color Palette:
 * $coffee: #684B3B;
 * $khaki: #B3A195;
 * $raw-umber: #8A6D58;
 * $khaki-2: #BEADA0;
 * $black-bean: #34180F;
 */

/* Root CSS Variables */
:root {
  --coffee: #684B3B;
  --khaki: #B3A195;
  --raw-umber: #8A6D58;
  --khaki-2: #BEADA0;
  --black-bean: #34180F;
}

/* Additional Color Elements */
.bg-box::after {
  background: linear-gradient(135deg, rgba(104, 75, 59, 0.3) 0%, rgba(52, 24, 15, 0.4) 50%, rgba(179, 161, 149, 0.25) 100%);
  backdrop-filter: blur(1px);
}

.heading_container.heading_center::before {
  background-color: var(--coffee);
}

.offer_section .box .img-box::before {
  background: linear-gradient(to bottom, rgba(104, 75, 59, 0.8), rgba(52, 24, 15, 0.9)); /* coffee to black-bean gradient */
}

.about_section .img-box::before {
  background: linear-gradient(to bottom, rgba(104, 75, 59, 0.8), rgba(52, 24, 15, 0.9)); /* coffee to black-bean gradient */
}

.client_section .box {
  background-color: var(--khaki-2);
}

.contact-info i {
  color: var(--coffee);
}

/* Text colors */
h1, h2, h3, h4, h5 {
  color: var(--black-bean);
}

/* Ensure headings are visible on dark backgrounds */
.heading_container h2 {
  color: var(--khaki-2) !important;
}

/* Hero section text enhancements for better visibility */
.slider_section .detail-box h1 {
  color: #ffffff !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  font-weight: 700;
}

.slider_section .detail-box p {
  color: #ffffff !important;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
  font-weight: 500;
}

.slider_section .detail-box .btn1 {
  background: linear-gradient(135deg, var(--coffee) 0%, var(--black-bean) 100%);
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.slider_section .detail-box .btn1:hover {
  background: linear-gradient(135deg, var(--black-bean) 0%, var(--coffee) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.about_section .heading_container h2,
.client_section .heading_container h2,
.footer_section .heading_container h2 {
  color: var(--khaki-2) !important;
}

.heading_container.heading_center h2 {
  border-bottom: none;
}

/* Add some styling for the service areas */
.service-areas-list li {
  margin-bottom: 8px;
  color: var(--black-bean);
  padding-left: 0;
  display: flex;
  align-items: center;
}

.service-areas-list li i {
  color: var(--coffee);
  margin-right: 8px;
  width: 15px;
}

/* Contact section */
#contact {
  background-color: var(--khaki-2);
  padding: 60px 0;
}

#contact .heading_container h2 {
  color: var(--black-bean);
}

/* Service section background */
.food_section {
  background-color: #f8f6f4; /* Light version of khaki-2 */
}

/* Make card components match color scheme */
.card {
  border-color: var(--khaki);
}

.card-header {
  border-color: var(--khaki);
}

/* Improve accordion appearance */
.accordion .btn-link {
  text-decoration: none;
  font-weight: bold;
  color: var(--coffee);
}

.accordion .card-header {
  background-color: var(--khaki-2);
}

.accordion .btn-link:hover, 
.accordion .btn-link:focus {
  text-decoration: none;
  color: var(--black-bean);
}

/* List styles */
ul li {
  list-style-type: none;
}

ul li:before {
  content: "•";
  color: var(--coffee);
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

.service-areas-list li:before {
  content: none; /* Remove default bullets for service area list */
}

/* About section lists */
.about_section ul {
  padding-left: 20px;
}

/* Box styling */
.box {
  background-color: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

/* Footer tweaks */
.footer_section {
  background-color: var(--black-bean);
}

.footer-address {
  color: var(--khaki-2);
}

/* Navigation */
.navbar-brand {
  display: flex;
  align-items: center;
}

.navbar-brand img {
  height: 70px;
  margin-right: 10px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

/* Responsive logo sizing for larger screens */
@media (min-width: 768px) {
  .navbar-brand img {
    height: 85px;
  }
}

@media (min-width: 992px) {
  .navbar-brand img {
    height: 100px;
  }
}

@media (min-width: 1200px) {
  .navbar-brand img {
    height: 120px;
  }
}

@media (min-width: 1400px) {
  .navbar-brand img {
    height: 140px;
  }
}



.custom_nav-container .navbar-nav .nav-item .nav-link {
  color: var(--black-bean);
}

.custom_nav-container .navbar-nav .nav-item.active .nav-link {
  color: var(--coffee);
  font-weight: bold;
}

/* Override button colors */
.btn1 {
  background-color: var(--coffee);
  border-color: var(--coffee);
}

.btn1:hover {
  background-color: var(--black-bean);
  border-color: var(--black-bean);
}

.btn-primary, .cta-button .btn {
  background-color: var(--coffee) !important;
  border-color: var(--coffee) !important;
}

.btn-primary:hover, .cta-button .btn:hover {
  background-color: var(--black-bean) !important;
  border-color: var(--black-bean) !important;
}

/* Call Button */
.order_online {
  background-color: var(--coffee);
}

.order_online:hover {
  background-color: var(--black-bean);
}

/* Fix offer section image alignment and visibility */
.offer_section .box .img-box {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.offer_section .box .img-box img {
  border-radius: 100%;
  object-fit: cover;
}

.offer_section .box .detail-box h5,
.offer_section .box .detail-box h6,
.offer_section .box .detail-box p {
  color: #ffffff !important;
}

.offer_section .box .detail-box h6 span {
  color: var(--coffee) !important;
}

/* Remove buttons from service cards */
.food_section .box .options {
  display: none !important;
}

/* Carousel indicators styling for better visibility */
.slider_section .carousel-indicators {
  z-index: 10;
  position: relative;
}

.slider_section .carousel-indicators li {
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.slider_section .carousel-indicators li:hover {
  transform: scale(1.2);
  border-color: rgba(255, 255, 255, 0.8);
}

.slider_section .carousel-indicators li.active {
  border-color: var(--coffee);
  box-shadow: 0 0 10px rgba(104, 75, 59, 0.5);
}