/* --- Custom Color Palette --- */
 :root {
   --champagne-pink: #e8d6cbff;
   --tea-rose-red: #d0ada7ff;
   --redwood: #ad6a6cff;
   --violet-jtc: #5d2e46ff;
   --african-violet: #b58db6ff;

   --primary-bg: #fdfaf8;
   --secondary-bg: #f1e9e5;
   --tertiary-bg: #b58db6ff;
   --nav-bg: var(--violet-jtc);
   --nav-text: var(--champagne-pink);
   --nav-hover-bg: var(--redwood);
   --heading-color: var(--violet-jtc);
   --text-color: #4f4f4f;
   --accent-color: var(--redwood);
 }

 /* --- General Styling --- */
 html {
   scroll-behavior: smooth;
 }

 body {
   font-family: 'PT Sans', sans-serif;
   background-color: var(--primary-bg);
   color: var(--text-color);
   padding-left: 280px;
   position: relative;
 }

 h1,
 h2,
 h3 {
   color: var(--heading-color);
   font-weight: 700;
 }

 .display-3 {
   font-weight: 700;
 }

 .lead {
   color: #555;
 }

 .section {
   min-height: 100vh;
   padding: 100px 40px;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

 /* --- Vertical Navigation (Desktop) --- */
 .vertical-nav {
   position: fixed;
   top: 0;
   left: 0;
   width: 280px;
   height: 100vh;
   background-color: var(--nav-bg);
   color: var(--nav-text);
   display: flex;
   flex-direction: column;
   padding: 2rem;
   transition: all 0.3s ease;
   z-index: 1030;
   overflow: hidden;
 }

 .vertical-nav::after {
   content: '';
   position: absolute;
   bottom: -50px;
   left: -50px;
   right: -50px;
   height: 450px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23e8d6cb' fill-opacity='1'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
   opacity: 0.04;
   pointer-events: none;
 }

 .vertical-nav .navbar-brand {
   font-size: 1.8rem;
   font-weight: 700;
   color: var(--champagne-pink);
   text-align: center;
 }

 .vertical-nav .navbar-brand .bi-lightning-charge-fill {
   color: var(--african-violet);
 }

 .vertical-nav .nav-link {
   color: var(--nav-text);
   font-size: 1.1rem;
   padding: 0.8rem 1rem;
   margin: 0.3rem 0;
   border-radius: 8px;
   transition: all 0.3s ease;
 }

 .vertical-nav .nav-link i {
   margin-right: 15px;
 }

 .vertical-nav .nav-link:hover,
 .vertical-nav .nav-link.active {
   background-color: var(--nav-hover-bg);
   color: white;
   transform: translateX(5px);
 }

 .nav-footer {
   margin-top: auto;
 }

 .phone-contact {
   text-align: center;
   padding: 1.5rem 1rem;
   background-color: rgba(0, 0, 0, 0.2);
   border-radius: 12px;
   display: block;
   /* makes the <a> behave like a block container */
   text-decoration: none;
   /* remove underline */
 }

 .phone-contact .phone-label {
   font-size: 0.9rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   opacity: 0.8;
   color: var(--nav-text);
 }

 .phone-contact {
   font-size: 1.5rem;
   font-weight: 600;
   color: white;
 }

 .phone-contact:hover {
   color: var(--african-violet);
 }

 .nav-socials {
   text-align: center;
   padding-top: 1.5rem;
 }

 .nav-socials a {
   color: var(--nav-text);
   opacity: 0.7;
   font-size: 1.2rem;
   margin: 0 10px;
   transition: all 0.3s ease;
 }

 .nav-socials a:hover {
   opacity: 1;
   color: white;
 }

 /* Makes the hamburger lines white */
.navbar-toggler {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

 /* --- Horizontal Navbar (Mobile) --- */
 .horizontal-nav {
   background-color: var(--nav-bg);
 }

 .horizontal-nav .navbar-brand,
 .horizontal-nav .navbar-toggler {
   color: var(--nav-text);
   border: none;
 }

 .horizontal-nav .mobile-phone-link {
   color: var(--nav-text);
   font-size: 1.4rem;
   text-decoration: none;
 }

 .mobile-phone-link:hover {
   color: var(--african-violet);
 }

 .horizontal-nav .offcanvas {
   background-color: var(--nav-bg);
 }

 .horizontal-nav .offcanvas-title {
   color: var(--nav-text);
 }

 .horizontal-nav .nav-link {
   color: var(--champagne-pink);
   font-size: 1.2rem;
   padding: 0.8rem 1rem;
 }

 .horizontal-nav .nav-link.active,
 .horizontal-nav .nav-link:hover {
   color: white;
   font-weight: 700;
 }

 /* --- Sections General --- */
 .section-title span {
   text-transform: uppercase;
   font-weight: bold;
   color: var(--accent-color);
 }

 .fixed-width-750 {
   max-width: 750px;
   margin: 0 auto;
 }

 .btn-custom {
   background-color: var(--accent-color);
   color: white;
   border-radius: 50px;
   padding: 12px 30px;
   font-weight: 700;
   transition: all 0.3s ease;
 }

 .btn-custom:hover {
   background-color: var(--violet-jtc);
   color: white;
   transform: translateY(-3px);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }

 /* --- Home Section --- */
#home {
  background: linear-gradient(rgba(45, 22, 35, 0.7), rgba(93, 46, 70, 0.55)),
              url('assets/main-bg.jpg');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  color: #fff;
  padding: 5rem 0 3rem;
}

/* Center text only on small screens */
#home .section-title {
  text-align: center;
}

/* Between 993px and 1680px → add left margin for breathing room */
@media (max-width: 1680px) and (min-width: 993px) {
  #home .section-title {
    margin-left: 3rem;
  }
}

/* At desktop and above (≥992px) → left-align text */
@media (min-width: 992px) {
  #home .section-title {
    text-align: left;
  }
}

/* At 992px and below → remove margin */
@media (max-width: 992px) {
  #home .section-title {
    margin-left: 0;
  }
}

/* Accent and headings */
#home .section-title span {
  color: var(--tea-rose-red);
}

#home h1 {
  color: #fff;
}

/* Paragraph styles */
#home .lead {
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  max-width: 650px;
}

#home .small-text {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}

/* Button */
#home .btn-custom {
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
  margin-top: 1.5rem;
}

/* Tweak font sizes on tiny screens */
@media (max-width: 576px) {
  #home h1 {
    font-size: 2.2rem;
  }

  #home .lead {
    font-size: 1rem;
  }
}

 /* --- Oferta Section --- */
 #oferta {
   background-color: var(--secondary-bg);
 }
#oferta .col-md-6 {
  max-width: 500px;
}
#oferta .row.g-4 {
  justify-content: center;
}
 .service-card {
   background-color: var(--primary-bg);
   border-radius: 15px;
   padding: 30px;
   text-align: center;
   border: 1px solid var(--champagne-pink);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
   transition: all 0.3s ease-in-out;
   cursor: pointer; /* adds visual feedback */
 }

 .service-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   border-color: var(--redwood);
 }
 /* little arrow indicator for full-card link */
.service-card::after {
  content: "→"; /* or "\2192" if you prefer Unicode */
  position: absolute;
  bottom: 12px;
  right: 18px;
  font-size: 1.5rem;
  color: var(--redwood);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none; /* don't block the link */
}

.service-card:hover::after {
  opacity: 1;
  transform: translateX(0);
}

 
 .service-card:hover h3,
 .service-card:hover .icon {
   color: var(--redwood);
   transition: color 0.3s ease-in-out;
 }

 .service-card .icon {
   font-size: 3rem;
   color: var(--accent-color);
   margin-bottom: 20px;
   display: inline-block;
 }

 .service-card h3 {
   font-size: 1.3rem;
   margin-bottom: 15px;
 }

 .service-card p {
   font-size: 0.95rem;
 }

 /* --- O Nas (Why Us) Section --- */
 .advantage-item {
   display: flex;
   align-items: flex-start;
   margin-bottom: 2rem;
 }

 .advantage-item .icon {
   font-size: 2rem;
   color: var(--accent-color);
   margin-right: 20px;
   margin-top: 5px;
 }

 .advantage-item h4 {
   font-weight: 700;
   color: var(--heading-color);
 }

 /* --- Kontakt Section --- */
 #kontakt {
   background-color: var(--secondary-bg);
   background: linear-gradient(rgba(45, 22, 35, 0.9), rgba(93, 46, 70, 0.55)),
     url('assets/contact.-bg.jpg');
   background-size: cover;
   background-position: center center;
   background-attachment: fixed;
   color: #FFF;
   /* default text in this section is white */
 }

 /* Headings */
 #kontakt h2 {
   font-size: 4rem;
   color: var(--tertiary-bg);
   /* override to special color */
 }

 #kontakt h3 {
   font-size: 2rem;
   color: var(--tertiary-bg);
   /* override to special color */
 }

 /* Links in this section */
 #kontakt a {
   color: #FFF;
   text-decoration: none;
 }

 #kontakt a:hover {
   color: var(--accent-color);
 }

 /* Placeholder hiding */
 input:focus::placeholder,
 textarea:focus::placeholder {
   color: transparent;
 }

 /* Contact info block (works for both div and a) */
 .contact-info-item {
   display: flex;
   align-items: center;
   margin-bottom: 1.5rem;
   font-size: 1.25rem;
   text-decoration: none;
   color: inherit;
 }

 /* Icon follows text color */
 .contact-info-item i {
   font-size: 1.8rem;
   margin-right: 20px;
   color: currentColor;
   /* important! follows parent color */
 }

 /* Contact form */
 .contact-form .form-control {
   border-radius: 8px;
   padding: 12px;
 }

 .contact-form .form-control:focus {
   box-shadow: 0 0 0 0.25rem rgba(173, 106, 108, 0.25);
   border-color: var(--redwood);
 }

 .contact-form label {
   font-size: 1.25rem;
 }

 /* --- Region list layout (Zasięg działania) --- */
.region-lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.5rem 2rem;
  font-size: 1rem;
}

.region-lists ul {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
}

.region-lists li::before {
  content: "• ";
  opacity: 0.6;
}

@media (max-width: 576px) {
  /* Stack icon above text */
  .contact-info-item {
    flex-direction: column; /* icon on top */
    align-items: flex-start; /* keep text left-aligned */
  }

  .contact-info-item i {
    margin-right: 0;        /* remove side spacing */
    margin-bottom: 0.5rem;  /* space below icon */
  }

  /* center ONLY the geo icon */
  .contact-info-item > i.bi.bi-geo-alt-fill {
    align-self: center;    /* Center this specific item horizontally */
    margin-bottom: 0.5rem; /* Keep the space below the icon */
  }

  /* Keep the phone item horizontal */
  .contact-info-item.phone-item {
    flex-direction: row;     /* Set direction back to horizontal */
    align-items: center;   /* Vertically center the icon and text */
  }

  /* Restore side margin for the phone icon */
  .contact-info-item.phone-item i {
    margin-right: 0.8rem;  /* Add space between icon and text */
    margin-bottom: 0;      /* Remove the bottom margin */
  }

  /* Keep two columns even on mobile */
  .region-lists {
    grid-template-columns: repeat(2, 1fr);
  }
}



/* --- RODO notice --- */
.rodo-note {
  font-size: 0.95rem;
  color: #ddd;
  line-height: 1.5;
}

.rodo-note a {
  color: var(--accent-color);
  text-decoration: underline;
}

.rodo-note a:hover {
  color: #fff;
  text-decoration: none;
}


/* --- Porady i Opinie --- */
#porady .accordion-button i {
  color: var(--accent-color);
}

#porady .accordion-button.collapsed:hover i,
#porady .accordion-button:not(.collapsed) i {
  color: #fff;
}

#porady .bg-light {
  background-color: #f8f6f4 !important;
}

#porady .shadow-sm {
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

#porady .fst-italic {
  font-size: 0.95rem;
}

#porady h3 i {
  color: var(--accent-color);
}
/* --- Opinie: podpis zawsze na dole --- */
.opinion-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
  height: 100%;
}

.opinion-card p.fw-bold {
  margin-top: auto; 
}


 /* --- Cennik Section --- */
 .price-list-item {
   display: block;
   padding: 15px 20px;
   background: var(--secondary-bg);
   border-radius: 8px;
   margin-bottom: 10px;
   text-decoration: none;
   color: var(--text-color);
   font-weight: 700;
   transition: all 0.3s ease;
 }

 .price-list-item:hover {
   background-color: var(--redwood);
   color: white;
   transform: translateX(5px);
 }

 .price-list-item i {
   margin-right: 15px;
   color: var(--accent-color);
 }

 .price-list-item:hover i {
   color: white;
 }

 /* --- Footer --- */
 .footer {
   background-color: #e5ddd9;
   color: var(--violet-jtc);
   text-align: center;
   padding: 2rem;
   font-size: 0.9rem;
 }

 .social-icons a {
   color: var(--violet-jtc);
   font-size: 1.5rem;
   margin: 0 15px;
   text-decoration: none;
   transition: color 0.3s ease;
 }

 .social-icons a:hover {
   color: var(--accent-color);
 }

 .footer-links a {
   color: var(--redwood);
   text-decoration: none;
 }

 .footer-links a:hover {
   text-decoration: underline;
 }

 /* ---- ACCORDION ---- */

 /* 1. Default (all closed or open, all text gray) */
 .accordion,
 .accordion .accordion-button,
 .accordion .accordion-body {
   color: #4f4f4f !important;
   --bs-accordion-btn-color: #4f4f4f;
   --bs-accordion-btn-active-color: #fff;
   --bs-accordion-btn-active-bg: var(--redwood);
 }

 /* 2. Hover on collapsed → rose bg, white text + white arrow */
 .accordion-button.collapsed:hover {
   background-color: var(--redwood) !important;
   color: #fff !important;
   --bs-accordion-btn-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M1.5 5.5a.5.5 0 0 1 .707 0L8 11.293l5.793-5.793a.5.5 0 0 1 .707.707l-6 6a.5.5 0 0 1-.707 0l-6-6a.5.5 0 0 1 0-.707z'/></svg>");
 }

 /* 3. Open (active) → rose bg, white text + white arrow */
 .accordion-button:not(.collapsed) {
   background-color: var(--redwood) !important;
   color: #fff !important;
   --bs-accordion-btn-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M1.5 10.5a.5.5 0 0 0 .707 0L8 4.707l5.793 5.793a.5.5 0 0 0 .707-.707l-6-6a.5.5 0 0 0-.707 0l-6 6a.5.5 0 0 0 0 .707z'/></svg>");
 }

 /* ---- TABLES INSIDE ACCORDION ---- */

 .table-custom,
 .accordion .table {
   --bs-table-color: #4f4f4f;
   --bs-table-striped-color: #4f4f4f;
   --bs-table-hover-color: #4f4f4f;
   --bs-table-active-color: #4f4f4f;
   color: #4f4f4f !important;
 }

 /* --- Responsive Adjustments --- */
 @media (max-width: 991.98px) {
   body {
     padding-left: 0;
   }

   .section {
     min-height: auto;
     padding: 80px 20px;
   }

   #home {
     background-attachment: scroll;
     min-height: 100vh;
   }
 }

 /* --- Info (List) Page --- */
 #info {
   background-color: var(--primary-bg);
   color: var(--text-color);
 }

 .info-card {
   background-color: var(--secondary-bg);
   border: 1px solid var(--champagne-pink);
   border-radius: 15px;
   overflow: hidden;
   transition: all 0.3s ease;
   box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);

   /* make the card stretch nicely */
   display: flex;
   flex-direction: column;
   height: 100%;
 }

 .info-card-body {
   padding: 1.5rem;

   /* flex layout for inside content */
   display: flex;
   flex-direction: column;
   flex-grow: 1; /* fills the remaining height of card */
 }

 .info-card-summary {
   flex-grow: 1; /* takes up available space and pushes button down */
 }

 .info-card-body .btn {
   margin-top: auto;      /* keeps it at the bottom */
   align-self: flex-end;  /* moves it to the right */
 }

 .info-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
   border-color: var(--accent-color);
 }

 .info-card-img img {
   width: 100%;
   height: 220px;
   object-fit: cover;
 }

 .info-card-title a {
   color: var(--heading-color);
   text-decoration: none;
   transition: color 0.2s ease;
 }

 .info-card-title a:hover {
   color: var(--accent-color);
 }

 .info-card-summary {
   font-size: 0.95rem;
   margin: 1rem 0;
   color: var(--text-color);
 }

 /* --- Info Detail Page --- */
 #info-detail {
   background-color: var(--primary-bg);
   color: var(--text-color);
 }

 .info-article {
   max-width: 800px;
 }

 .info-article-img img {
   object-fit: cover;
   border-radius: 15px;
 }

 .info-article-content {
   font-size: 1.05rem;
   line-height: 1.8;
   color: var(--text-color);
 }

 .info-article-content h2,
 .info-article-content h3 {
   color: var(--heading-color);
   margin-top: 2rem;
   margin-bottom: 1rem;
 }

 .info-article-content p {
   margin-bottom: 1.2rem;
 }

 .info-article-content a {
   color: var(--accent-color);
   text-decoration: underline;
 }

 .info-article-content a:hover {
   color: var(--violet-jtc);
 }

 .info-article blockquote {
   background-color: var(--secondary-bg);
   border-left: 4px solid var(--accent-color);
   padding: 1rem 1.5rem;
   font-style: italic;
   color: var(--heading-color);
   margin: 2rem 0;
   border-radius: 8px;
 }

 .info-article img {
   max-width: 100%;
   border-radius: 10px;
   margin: 1.5rem 0;
 }

 #info-detail .lead {
   color: var(--text-color);
   font-style: italic;
   max-width: 750px;
   margin: 0 auto;
 }

 #info-detail .small-text {
   font-size: 0.9rem;
 }

 .info-article-content a.phone-contact-number {
   text-decoration: none;
 }

 /* --- Shared Button --- */
 .btn-outline-custom {
   border: 1px solid var(--accent-color);
   color: var(--accent-color);
   border-radius: 25px;
   padding: 0.5rem 1.5rem;
   font-size: 0.9rem;
   transition: all 0.3s ease;
 }

 .btn-outline-custom:hover {
   background-color: var(--accent-color);
   color: #fff;
 }