@media (min-width: 992px) {
  .rounded-lg-3 { border-radius: .3rem; }
}

.spacer-line {
  height: 1px;
  width: 60%; /* Doesn't go full width, looks sleeker */
  margin: 40px auto; /* 40px space top and bottom, centered */
  background: linear-gradient(to right, transparent, #ccc, transparent);
}

      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }
      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
      .b-example-divider {
        width: 100%;
        height: 3rem;
        background-color: #0000001a;
        border: solid rgba(0, 0, 0, 0.15);
        border-width: 1px 0;
        box-shadow:
          inset 0 0.5em 1.5em #0000001a,
          inset 0 0.125em 0.5em #00000026;
      }
      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }
      .bi {
        vertical-align: -0.125em;
        fill: currentColor;
      }
      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }
      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }


      .btn-bd-primary {
        --bd-violet-bg: #712cf9;
        --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
        --bs-btn-font-weight: 600;
        --bs-btn-color: var(--bs-white);
        --bs-btn-bg: var(--bd-violet-bg);
        --bs-btn-border-color: var(--bd-violet-bg);
        --bs-btn-hover-color: var(--bs-white);
        --bs-btn-hover-bg: #6528e0;
        --bs-btn-hover-border-color: #6528e0;
        --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
        --bs-btn-active-color: var(--bs-btn-hover-color);
        --bs-btn-active-bg: #5a23c8;
        --bs-btn-active-border-color: #5a23c8;
      }
      .bd-mode-toggle {
        z-index: 1500;
      }
      .bd-mode-toggle .bi {
        width: 1em;
        height: 1em;
      }
      .bd-mode-toggle .dropdown-menu .active .bi {
        display: block !important;
      }

:root {
    --brand-orange: #FF8C00;
    --dark-bg: #1a1a1a;
    --text-light: #ffffff;
  }

  .main-header {
    background-color: var(--dark-bg);
    padding: 1rem 5%;
    position: sticky;
    top: 0;
    z-index: 1000;
  }

.main-header {
  /* Your existing code (background-color, padding, etc.) */
  
  border-bottom: 1px solid #FF8C00; /* Thin 2px line in Creative Coyote Orange */
}

  .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
  }

/* This styles the link for the page the user is currently on */
.nav-link.active {
  color: #FF8C00 !important; /* Your Blood Orange */
  font-weight: bold;
  border-bottom: 2px solid #D73502;
}

  /* Brand Styling */
  .brand {
    color: var(--text-light);
    font-weight: 800;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .brand span {
    color: var(--brand-orange);
  }

  /* Links Styling */
  .nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
    margin: 0;
    padding: 0;
  }

  .nav-links a {
    text-decoration: none;
    color: #ccc;
    font-weight: 500;
    transition: color 0.3s;
  }

  .nav-links a:hover {
    color: var(--brand-orange);
  }

  /* WhatsApp Button Styling */
  .whatsapp-btn {
    background-color: #25D366; /* Official WhatsApp Green */
    color: white;
    padding: 8px 16px;
    border-radius: 50px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    transition: transform 0.2s, background-color 0.3s;
  }

  .whatsapp-btn:hover {
    background-color: #128C7E;
    transform: scale(1.05);
  }

 /* Hamburger Icon Styling */
  .menu-toggle {
    display: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
  }

  /* Responsive Logic */
  @media (max-width: 768px) {
    .menu-toggle {
      display: block;
      order: 2; /* Moves toggle after the brand */
    }

    .header-action {
      order: 3; /* Keeps WhatsApp on the far right */
    }

    .whatsapp-btn span { display: none; } /* Icon only on mobile */

    /* The Dropdown Menu */
    .nav-links {
      display: none; /* Hidden by default */
      flex-direction: column;
      position: absolute;
      top: 100%; /* Sits right below the header */
      left: 0;
      width: 100%;
      background-color: #222;
      padding: 0.5rem 0;
      text-align: center;
      border-top: 1px solid #333;
    }

    .nav-links.active {
      display: flex; /* Shown when JS toggles 'active' class */
    }

    .nav-links li { padding: 0.5rem 0; }
  }



@media only screen and (max-width: 767px) {
  .parent-of-icon-container {
    display: flex;
    justify-content: center;
    width: 100%;
	}}


  /* first section */
.hero-section {
    background-color: #1a1a1a; /* Matching your dark header */
    padding: 80px 5%;
    color: white;
    overflow: hidden;
  }

  .hero-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    align-items: center;
    gap: 40px;
  }

  /* Typography */
  .hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 10px;
    color: #fff;
    line-height: 1.1;
  }

  .hero-content h3 {
    font-size: 1.5rem;
    color: var(--brand-orange, #FF8C00); /* Using your brand orange */
    margin-bottom: 25px;
    font-weight: 400;
  }

  .cta-btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--brand-orange, #FF8C00);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: 0.3s;
  }

  .cta-btn:hover {
    background-color: #FF4F00;
    transform: translateY(-3px);
  }

  /* The Floating Animation */
  .hero-image-wrapper {
    display: flex;
    justify-content: center;
  }

/* Add this to control the size */
.hero-image-wrapper img {
  width: 70%;      /* Adjust this percentage to make it smaller (e.g., 50% or 60%) */
  max-width: 400px; /* This prevents it from getting too big on huge screens */
  height: auto;     /* Keeps the proportions correct */
}

  .floating-img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    /* Apply the animation here */
    animation: float 4s ease-in-out infinite;
  }

  @keyframes float {
    0% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-20px); /* Moves up 20px */
    }
    100% {
      transform: translateY(0px);
    }
  }

  /* Mobile Responsiveness */
  @media (max-width: 992px) {
    .hero-container {
      grid-template-columns: 1fr; /* Stack vertically on tablets/phones */
      text-align: center;
    }

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

    .hero-image-wrapper {
      order: -1; /* Puts image above text on mobile for better visual flow */
    }
  }

/* second section */
.why-choose-us {
    padding: 80px 5%;
    background-color: #fcfcfc; /* Light contrast to your dark header/hero */
    text-align: center;
  }

  .section-title {
    font-size: 2.5rem;
    margin-bottom: 50px;
    color: #FF8C00;
    font-weight: 800;
  }

  .features-grid {
    display: grid;
    /* Responsive logic: 1 column mobile, 2 tablet, 4 desktop */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .feature-card {
    background: #ffffff;
    padding: 40px 25px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 4px solid transparent;
  }

  .feature-card:hover {
    transform: translateY(-10px);
    border-bottom: 4px solid #FF8C00; /* Creative Coyote Orange */
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
  }

  .feature-card i {
    font-size: 3rem;
    color: #FF8C00;
    margin-bottom: 20px;
    display: inline-block;
  }

  .feature-card h4 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: #333;
  }

  .feature-card p {
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
  }

  /* Force "Fit Full" on smallest mobile devices */
  @media (max-width: 480px) {
    .features-grid {
      grid-template-columns: 1fr;
    }
  }

/* contact section */
.about-contact-section {
    padding: 100px 5%;
    background-color: #111; /* Dark theme to match your brand */
    color: white;
  }

  .about-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
  }

  /* About Content Styling */
  .about-content h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
	     color: #F4760C;
  }

  .about-lead {
    font-size: 1.2rem;
    color: #FF8C00;
    margin-bottom: 20px;
  }

  .about-content p {
    line-height: 1.8;
    color: #ccc;
  }

  .about-stats {
    display: flex;
    gap: 30px;
    margin-top: 30px;
  }

  .stat-item strong {
    display: block;
    font-size: 2rem;
    color: #FF8C00;
  }

  /* Form Styling */
  .contact-form-wrapper {
    background: #1e1e1e;
    padding: 40px;
    border-radius: 15px;
    border: 1px solid #333;
  }

  .contact-form h3 {
    margin-bottom: 25px;
    font-size: 1.5rem;
  }

  .form-group {
    margin-bottom: 20px;
  }

  .form-group input, 
  .form-group textarea {
    width: 100%;
    padding: 12px 15px;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 5px;
    color: white;
    font-size: 1rem;
    outline: none;
  }

  .form-group input:focus, 
  .form-group textarea:focus {
    border-color: #FF8C00;
  }

  .submit-btn {
    width: 100%;
    padding: 15px;
    background: #FF8C00;
    border: none;
    color: white;
    font-weight: bold;
    font-size: 1rem;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
  }

  .submit-btn:hover {
    background: #FF6600;
    transform: translateY(-2px);
  }

  /* Responsive Fix */
  @media (max-width: 992px) {
    .about-contact-grid {
      grid-template-columns: 1fr;
    }
    
    .about-content {
      text-align: center;
    }

    .about-stats {
      justify-content: center;
    }
  }

/* Special Offer */
 .special-offer {
    position: relative;
    padding: 100px 5%;
    /* Replace with your actual image URL */
    background-image: url('https://images.unsplash.com/photo-1497215728101-856f4ea42174?auto=format&fit=crop&q=80&w=1600');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax effect */
    color: white;
    text-align: center;
  }

/* Targets the icons specifically within your list */
.check-list li i, 
.services-highlight li i {
  color: #D73502 !important; /* Blood Orange */
  margin-right: 10px;
  font-size: 1.1rem;
}

/* Optional: If you want the text to stay dark but the bullet to pop */
.check-list li {
  color: #333; 
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

  .offer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Adjust transparency here */
    z-index: 1;
  }

  .offer-container {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
  }

  .offer-badge {
    background: #FF8C00;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.8rem;
    margin-bottom: 20px;
  }

  .special-offer h2 {
    font-size: 3rem;
    margin-bottom: 10px;
  }

  .price-tag {
    font-size: 2rem;
    font-weight: 300;
    margin-bottom: 30px;
  }

  .price-tag span {
    font-size: 4rem;
    font-weight: 800;
    color: #FF8C00;
  }

  .offer-list {
    list-style: none;
    padding: 0;
    margin: 30px auto;
    display: inline-block;
    text-align: left;
  }

  .offer-list li {
    font-size: 1.2rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
  }

 

  .offer-btn {
    display: inline-block;
    background: #FF8C00;
    color: white;
    padding: 10px 25px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    font-size: 1.1rem;
    transition: 0.3s;
    margin-top: 20px;
    box-shadow: 0 10px 20px rgba(255, 140, 0, 0.3);
	 
  }

  .offer-btn:hover {
    transform: scale(1.05);
    background: #e67e00;
  }

  @media (max-width: 768px) {
    .special-offer h2 { font-size: 2.2rem; }
    .price-tag span { font-size: 3rem; }
  }


/* Footer */
.main-footer {
    background-color: #0f0f0f; /* Very dark background */
    color: #ffffff;
    padding: 60px 5% 20px;
    border-top: 2px solid #222;
  }

  .footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 columns on desktop */
    gap: 40px;
    align-items: start;
  }

  .footer-section h4 {
    color: #FF8C00;
    margin-bottom: 20px;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  /* Contact & Links Styling */
  .footer-section p, .footer-links li {
    margin-bottom: 12px;
    color: #bbb;
  }

  .footer-section a {
    color: #bbb;
    text-decoration: none;
    transition: 0.3s;
  }

  .footer-section a:hover {
    color: #FF8C00;
  }

  .footer-links {
    list-style: none;
    padding: 0;
  }

  /* Social Media Original Colors */
  .footer-socials {
    display: flex;
    gap: 15px;
    margin-top: 20px;
  }

  .social-icon {
    font-size: 1.8rem;
    transition: 0.4s;
  }

  .youtube { color: #FF0000; } /* Original YouTube Red */
  .pinterest { color: #E60023; } /* Original Pinterest Red */

  .social-icon:hover {
    color: #FF8C00 !important; /* Highlight to Brand Orange */
    transform: translateY(-5px);
  }

  /* Right-aligned Logo Section */
  .footer-logo-right {
    text-align: right;
  }

  .footer-logo-right .brand {
    font-size: 1.8rem;
    font-weight: 800;
  }

  .footer-logo-right .brand span {
    color: #FF8C00;
  }

  /* Copyright Bar */
  .footer-bottom {
    text-align: center;
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid #222;
    font-size: 0.8rem;
    color: #555;
  }

.footer-brand-img {
  /* This controls how big the logo appears in the footer */
  max-width: 180px; 
  height: auto;
  display: block;
  margin-left: auto; /* Keeps it pushed to the right on desktop */
}

/* Responsive Fix for Mobile */
@media (max-width: 768px) {
  .footer-logo-right {
    text-align: center;
    order: -1; /* Keeps logo at the top when stacked */
  }

  .footer-brand-img {
    margin: 0 auto 15px; /* Centers the logo when stacked on mobile */
    max-width: 150px;    /* Slightly smaller on phones */
  }
}

  /* Mobile Responsiveness */
  @media (max-width: 768px) {
    .footer-container {
      grid-template-columns: 1fr; /* Stack on mobile */
      text-align: center;
    }
    
    .footer-logo-right {
      text-align: center;
      order: -1; /* Move logo to the top on mobile */
    }

    .footer-socials {
      justify-content: center;
    }
  }

.testimonial-bar {
    background-color: #f4f4f4; /* Light Grey Background */
    padding: 20px 0;
    overflow: hidden;
    position: relative;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }

  .testimonial-wrapper {
    display: flex;
    width: 400%; /* Enough room for 4 slides side-by-side */
    animation: scrollHorizontal 16s infinite ease-in-out;
  }

  .t-slide {
    width: 100%; /* Each slide takes up the full width of the view */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .t-slide p {
    color: #333; /* Darker Text */
    font-style: italic;
    font-size: 1.1rem;
    margin: 0;
    padding: 0 10%;
  }

  .t-slide i {
    color: #FF8C00; /* Creative Coyote Orange */
    font-size: 1.2rem;
  }

  .t-slide i.flip {
    display: inline-block;
    transform: rotate(180deg);
  }

  .client-name {
    display: block;
    margin-top: 5px;
    font-size: 0.8rem;
    color: #666;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  /* Horizontal Scroll Animation */
  @keyframes scrollHorizontal {
    0%, 20% { transform: translateX(0%); }
    25%, 45% { transform: translateX(-25%); }
    50%, 70% { transform: translateX(-50%); }
    75%, 95% { transform: translateX(-75%); }
    100% { transform: translateX(0%); }
  }

  /* Mobile Tuning */
  @media (max-width: 768px) {
    .t-slide p { font-size: 0.95rem; }
    .testimonial-bar { padding: 15px 0; }
  }

/* FAQS page*/
<style>
  /* Import a bold font */
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Inter:wght@400;600&display=swap');

  .onboarding-wrapper {
    background-color: #ffffff; /* Page Background */
    padding: 80px 20px;
    font-family: 'Inter', sans-serif;
  }

  .onboarding-container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .main-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: 60px;
	  margin-top: 40px;
    letter-spacing: -1px;
  }

  .orange-text { color: #ff6600; }

  /* Grid Layout */

/* Ensure the accordion content can expand fully */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0 15px; /* Adjust padding as needed */
}

/* When the accordion is active/open */
.accordion-item.active .accordion-content {
    max-height: none; /* Allows the box to be as tall as the text */
    height: auto;     /* Ensures no fixed height cuts off text */
    padding-bottom: 20px;
}

/* Mobile-specific adjustment */
@media (max-width: 768px) {
    .accordion-item {
        width: 95%;   /* Ensure it doesn't hit the very edge of the screen */
        margin: 0 auto;
    }
    
    .accordion-header {
        font-size: 16px; /* Slightly smaller text for mobile headers */
        padding: 15px;
    }
}
/* Apply this to the div that holds your FAQ text */
.accordion-content {
    max-height: 250px;    /* Limits the height of the box */
    overflow-y: auto;      /* Adds a vertical scrollbar if text is too long */
    padding-right: 10px;  /* Space for the scrollbar so it doesn't overlap text */
}

/* Optional: Make the scrollbar look cleaner (Chrome/Safari/Edge) */
.accordion-content::-webkit-scrollbar {
    width: 6px;
}

.accordion-content::-webkit-scrollbar-thumb {
    background-color: #f7941d; /* Matches your Coyote orange/yellow theme */
    border-radius: 10px;
}

.accordion-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}
/* This targets the panel that opens up */
.accordion-content {
    /* 1. Set a maximum height so it doesn't grow forever */
    max-height: 300px; 
    
    /* 2. Add the scrollbar if the text is longer than 300px */
    overflow-y: auto; 
    
    /* 3. Ensure it doesn't cut off horizontally */
    overflow-x: hidden; 
    
    /* 4. Optional: Add some padding so the text doesn't hit the scrollbar */
    padding-right: 15px;
}



/* Make the scrollbar look professional (Chrome/Safari/Edge) */
.accordion-content::-webkit-scrollbar {
    width: 8px;
}

.accordion-content::-webkit-scrollbar-thumb {
    background: #f7941d; /* Your Coyote Orange */
    border-radius: 10px;
}

.accordion-content::-webkit-scrollbar-track {
    background: #eeeeee;
}
  .faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 80px;
  }

  .faq-item {
    background: #f4f4f4; /* Light Grey Background */
    border-radius: 12px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
  }

  .faq-item:hover {
    background: #fff;
    border-color: #ff6600;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  }

  .faq-trigger {
    width: 100%;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
  }

  .q-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .orange-icon {
    color: #ff6600;
    font-size: 1.4rem;
  }

  .arrow {
    transition: transform 0.4s ease;
    color: #999;
  }

  .faq-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .faq-panel p {
    padding: 20px 30px 30px 75px; /* Aligns text under the question, not the icon */
    margin: 0;
    color: #555;
    line-height: 1.8;
  }

  /* Active State */
  .faq-item.active .arrow { transform: rotate(180deg); color: #ff6600; }
  .faq-item.active { background: #fff; border-color: #ff6600; }
  .faq-item.active .faq-panel { max-height: 300px; }

  /* AGREEMENT BOX */
  .agreement-box {
    background: #1a1a1a; /* Dark Grey/Black Section */
    border-radius: 24px;
    padding: 60px;
    text-align: center;
	  margin-bottom: 50px;
    color: #fff;
    position: relative;
    overflow: hidden;
  }

  .agreement-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2rem;
    margin-bottom: 20px;
    color: #fff;
  }

  .agreement-box p {
    font-size: 1.1rem;
    opacity: 0.8;
    max-width: 800px;
    margin: 0 auto 40px;
    line-height: 1.6;
  }

  .cta-btn {
    display: inline-block;
    background: #ff6600;
    color: #fff;
    padding: 20px 45px;
    border-radius: 50px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
  }

  .cta-btn:hover {
    background: #e65c00;
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(255, 102, 0, 0.3);
  }

  /* Responsive Mobile */
  @media (max-width: 900px) {
    .faq-grid { grid-template-columns: 1fr; }
    .main-title { font-size: 2.2rem; }
    .agreement-box { padding: 40px 20px; }
  }

/* Books page*/
.books-section {
    padding: 80px 5%;
    background-color: #ffffff;
    font-family: sans-serif;
  }

  .books-container {
    max-width: 1000px;
    margin: 0 auto;
  }

  .books-header {
    text-align: center;
    margin-bottom: 60px;
  }

  .books-header h1 {
    font-size: 3rem;
    color: #1a1a1a;
    margin-bottom: 15px;
  }

  .books-header p {
    color: #666;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
  }

  /* The Book Layout */
  .book-row {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 80px;
  }

  /* Alternate layout for desktop */
  .book-row.inverse {
    flex-direction: row-reverse;
  }

  .book-image {
    flex: 1;
  }

  .book-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
  }

  .book-info {
    flex: 1.5;
  }

  .book-info h2 {
    font-size: 2.2rem;
    color: #1a1a1a;
    margin-bottom: 20px;
  }

  .book-info p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 25px;
  }

  .amazon-link {
    display: inline-block;
    background-color: #FF9900; /* Amazon Orange */
    color: #000;
    padding: 12px 25px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: 0.3s;
  }

  .amazon-link:hover {
    background-color: #e68a00;
    transform: translateY(-2px);
  }

  /* Mobile Responsive Fix */
  @media (max-width: 768px) {
    .book-row, .book-row.inverse {
      flex-direction: column; /* Stack vertically */
      text-align: center;
    }

    .book-image {
      width: 100%;
    }

    .book-info h2 {
      font-size: 1.8rem;
      margin-top: 20px;
    }
  }

/* Base Styles */
  .section-container { max-width: 1200px; margin: 0 auto; padding: 60px 5%; }
  .text-center { text-align: center; margin-bottom: 40px; }

  /* Gallery Grid */

  /* CONTAINER WITH MARGINS */
  .gallery-wrapper {
    padding: 60px 20px; /* Top/Bottom padding and Side margins */
    background-color: #ffffff;
  }

  .gallery-grid {
    display: grid;
    /* Desktop: 4 items across */
    grid-template-columns: repeat(4, 1fr);
    gap: 20px; /* Space between each div */
    max-width: 1200px; /* Prevents it from going full-screen */
    margin: 0 auto; /* Centers the whole gallery */
  }

  .gallery-item {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    cursor: pointer;
    background: #1a1a1a;
    border-radius: 12px; /* Smooth rounded corners */
    border: 1px solid #eee; /* Light border around the div */
  }

  .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
  }

  /* ORANGE HOVER STYLE */
  .gallery-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 102, 0, 0.85); /* Brand Orange */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .gallery-overlay i { color: #fff; font-size: 2rem; }
  .gallery-item:hover .gallery-overlay { opacity: 1; }
  .gallery-item:hover img { transform: scale(1.1); }

  /* LIGHTBOX STYLING */
  .modal-overlay {
    display: none;
    position: fixed;
    z-index: 10000;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(26, 26, 26, 0.98);
    align-items: center;
    justify-content: center;
  }

  .modal-img {
    max-width: 85%;
    max-height: 80%;
    border: 5px solid #ff6600; /* Bold Orange Border */
    border-radius: 10px;
  }

  .modal-close {
    position: absolute;
    top: 30px; right: 40px;
    color: #ff6600;
    font-size: 50px;
    cursor: pointer;
  }

  /* MOBILE: 2 ACROSS WITH MARGINS */
  @media (max-width: 768px) {
    .gallery-wrapper {
      padding: 40px 15px; /* Slightly smaller side margins on mobile */
    }
    .gallery-grid {
      grid-template-columns: repeat(2, 1fr); /* 2 items per row */
      gap: 15px; /* Gap between divs on mobile */
    }
  }



/* Mobile-Specific Styles (Full-Width) */
@media (max-width: 767px) {
  .gallery-item {
    padding: 0;      /* Removes all side padding for a true mobile-full look */
  }
  .gallery-img {
    height: auto;    /* Allow natural height on mobile for clarity */
    max-height: 400px; 
  }
}


  /* Video Feature Flex */
  .video-feature { padding: 60px 5%; background: #fff; }
  .feature-flex {
    display: flex;
    align-items: center;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
  }
  .video-container { flex: 1.5; position: relative; padding-bottom: 30%; height: 0; }
  .video-container iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  }
  .feature-text { flex: 1; }

  /* Special Offer Styling */
  .offer-banner { padding: 40px 5%; background: #f4f4f4; }
  .offer-card {
    background: #1a1a1a;
    color: white;
    padding: 30px;
    border-radius: 15px;
    border-left: 8px solid #D73502; /* Your Blood Orange */
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
  }
  .offer-content i { font-size: 2.5rem; color: #FF6600; float: left; margin-right: 20px; }
  .offer-price { text-align: right; }
  .price { display: block; font-size: 2rem; font-weight: 800; color: #FF6600; margin-bottom: 10px; }
  

  /* Responsive Fixes */
  @media (max-width: 900px) {
    .feature-flex { flex-direction: column; text-align: center; }
    .video-container { padding-bottom: 56.25%; width: 100%; } /* 16:9 Aspect Ratio */
    .offer-card { flex-direction: column; text-align: center; gap: 20px; }
    .offer-content i { float: none; margin: 0 0 15px 0; }
    .offer-price { text-align: center; }
  }

/* Design Page */
.design-cta-box {
    background-color: #f9f9f9; /* Subtle light grey */
    padding: 40px 5%;
    display: flex;
    justify-content: center;
  }

  .design-content {
    max-width: 900px;
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    border-left: 6px solid #F4760C; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    text-align: left;
  }

  .design-content i {
    font-size: 2rem;
    color: #F4760C;
    margin-bottom: 15px;
    display: block;
  }

  .design-content h5 {
    font-size: 1.4rem;
    color: #1a1a1a;
    margin-bottom: 15px;
    font-weight: 700;
  }

  .design-content p {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
  }

  .btn-outline {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #D73502;
    color: #D73502;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: 0.3s;
  }

  .btn-outline:hover {
    background: #D73502;
    color: #fff;
  }

  @media (max-width: 768px) {
    .design-content { padding: 20px; }
    .design-content h5 { font-size: 1.2rem; }
  }


.portfolio-section {
    padding: 60px 5%;
    background-color: #fff;
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
  }

  .section-title {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: #1a1a1a;
  }

  .section-subtitle {
    color: #666;
    margin-bottom: 40px;
  }

  /* The Grid */
  .portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
  }

  /* Individual Card */
  .portfolio-item {
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .portfolio-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
  }

  .portfolio-header {
    padding: 20px;
    background: #1a1a1a;
    color: white;
  }

  .portfolio-header h3 {
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: 0.5px;
  }

  .portfolio-img img {
    width: 100%;
    height: 260px;
    object-fit: cover; /* Ensures images fit perfectly without stretching */
    display: block;
    border-bottom: 1px solid #eee;
  }

  .portfolio-footer {
    padding: 20px;
  }

  .site-link {
    color: #D73502; /* Your Blood Orange */
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .site-link:hover {
    color: #FF6600; /* Lighter Orange on Hover */
  }

  /* Responsive Mobile Tweak */
  @media (max-width: 768px) {
    .section-title { font-size: 1.8rem; }
    .portfolio-grid { grid-template-columns: 1fr; }
  }

.gallery-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: #1a1a1a;
	text-align: center;
	padding: 15px;
  }