@font-face {
  font-family: 'Rubik';
  src: url('../fonts/Rubik-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rubik';
  src: url('../fonts/Rubik-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rubik';
  src: url('../fonts/Rubik-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Teko';
  src: url('../fonts/Teko-Bold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Teko';
  src: url('../fonts/Teko-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


body {
  font-family: 'Rubik', Arial, sans-serif;
  line-height: 1.5;
  color: #333;
}


h1, h2, h3 {
  font-family: 'Teko', sans-serif;
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



/* Simple container */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.auto-container {
    position: static;
    max-width: 1200px; /* Or whatever your site's max-width is */
    padding: 0px 20px;
    margin: 0 auto;
}




/* ===========================================
   Reusable Gradient Buttons
   Reverse animation (right to left)
=========================================== */

/* Base button style shared by both */
.btn-gradient {
  position: relative;
  display: inline-block;
  padding: 15px 40px;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  transition: color 0.4s ease;
  z-index: 0;
}

.btn-gradient::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    to bottom right,
    #FFB733 0%,
    #FFAA18 75%,
    #b8740d 100%
  );
  transition: transform 0.8s ease;
  z-index: -1; /* gradient behind */
  transform: translateX(0); /* initially visible */
}

.btn-gradient span {
  position: relative;
  z-index: 1; /* keep text above gradient */
}

/* Reverse animation – gradient slides LEFT on hover */
.btn-gradient:hover::before {
  transform: translateX(-100%);
}

/* ===========================================
   Dark version: for dark backgrounds
=========================================== */
.btn-gradient-dark {
  background-color: #222429; /* Base color after gradient slides out */
  color: #222429; /* Dark text by default */
}

.btn-gradient-dark:hover {
  color: #fff; /* Text turns white on hover */
}



.btn-gradient-light {
  background-color: #fff;
  color: #fff;
  border: 0px solid #eee; /* optional subtle border for definition */
}

.btn-gradient-light:hover {
  background-color: transparent;
  color: #222429;
  border-color: #ccc; /* adjust as needed */
}



/* ===================================================================
   HEADER STYLES (COMPLETE AND STABLE VERSION)
=================================================================== */

/* --- Main Header & Grid --- */
.site-header {
  background-color: #222429;
  color: #fff;
  padding: 10px 0;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.header-grid {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 0 40px;
}

.header-logo img {
  max-height: 140px;
  width: auto;
}

/* --- Desktop Navigation --- */
.header-nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-nav li {
  position: relative;
}

/* Base styles for ALL TOP-LEVEL links */
.header-nav > ul > li > a {
  display: block;
  position: relative;
  padding: 20px 15px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
}

/* 1. UNDERLINE effect for links that ARE NOT dropdowns */
.header-nav > ul > li:not(.dropdown) > a::after {
  content: '';
  position: absolute;
  bottom: 15px; /* Positioned at the bottom */
  left: 15px;
  width: calc(100% - 30px);
  height: 2px;
  background: #FFAA18;
  transform: scaleX(0); /* Hidden by default */
  transition: transform 0.3s ease;
  transform-origin: center;
}

/* Show underline on hover/active */
.header-nav > ul > li:not(.dropdown) > a:hover::after,
.header-nav > ul > li:not(.dropdown) > a.active::after {
  transform: scaleX(1); /* Visible on hover */
}

/* 2. ARROW icon for links that ARE dropdowns */
.header-nav > ul > li.dropdown > a {
  padding-right: 30px; /* Make space for the arrow */
}

.header-nav > ul > li.dropdown > a::after {
  content: '▼';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%); /* Center vertically */
  font-size: 0.6rem;
  color: #FFAA18;
}

/* --- Desktop Dropdown Menu --- */
.header-nav li ul {
  display: none; /* Hidden by default */
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  background: #ECEEEF;
  padding: 5px 0;
  list-style: none;
  min-width: 250px;
  z-index: 10;
}

/* Show dropdown on hover */
.header-nav li.dropdown:hover > ul {
  display: flex;
}

/* Links WITHIN the dropdown */
.header-nav li ul li a {
  display: block;
  padding: 8px 16px;
  font-size: 0.85rem;
  line-height: 1.6; /* Correct, readable line-height */
  font-weight: 500;
  text-transform: none;
  color: #000;
  transition: color 0.3s ease, font-weight 0.3s ease;
}

.header-nav li ul li a:hover,
.header-nav li ul li a.active {
  color: #222429;
  font-weight: 600;
}

/* --- Header Contact & Burger Icon --- */
.header-contact {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 0.85rem;
  justify-content: flex-end;
}

.header-contact .email-icon, .burger, .header-nav .nav-info, .header-nav .nav-info .facebook-icon {
  display: none; /* All special items hidden by default */
}

.header-contact .email-icon {
  display: flex; /* Re-enable for desktop */
  font-size: 1.2rem;
  background: #FFAA18;
  color: #222429;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
}

.header-contact .email-text span {
  display: block;
  font-size: 0.7rem;
  color: #ccc;
}

.header-contact .email-text a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.burger span {
  display: block;
  height: 3px;
  background: #ffc107;
  border-radius: 2px;
}

/* ===================================================================
   MOBILE & TABLET STYLES (< 992px)
=================================================================== */
@media (max-width: 992px) {

  .header-grid {
    grid-template-columns: 1fr auto;
  }

  .header-contact {
    display: none;
  }

  .burger {
    display: flex; /* Show burger on mobile */
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    height: 18px;
    cursor: pointer;
    justify-self: end;
  }

  /* --- Mobile Navigation Container --- */
  .header-nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #ECEEEF;
    z-index: 100;
    max-height: 0;
    overflow-y: auto;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    padding: 0;
  }

  .header-nav.active {
    max-height: 85vh; /* Safe height */
    padding: 20px 0;
  }

  .header-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding-left: 40px;
  }

  .header-nav > ul > li > a {
    padding: 8px 0;
    line-height: 1.9;
    color: #9ca3a9;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
  }

  /* --- Mobile Icon Handling --- */
  /* 1. Explicitly turn OFF the ::after element for ALL top-level links */
  .header-nav > ul > li > a::after {
    display: none;
  }

  /* 2. Turn ON the arrow icon for ONLY dropdowns on mobile */
  .header-nav li.dropdown > a::after {
    display: inline-block; /* This overrides the 'display: none' above */
    content: "▼";
    font-size: 0.6rem;
    margin-left: 8px;
    color: #FFAA18;
    transition: transform 0.3s ease;
  }

  .header-nav li.dropdown.open > a::after {
    transform: rotate(180deg);
  }

  /* --- Mobile Submenu & Info Box --- */
  .header-nav li.dropdown:hover > ul {
    display: none; /* Disable hover on mobile */
  }

  .header-nav li ul {
    position: static;
    display: none;
    background: none;
    padding-left: 15px;
    width: 100%;
  }

  .header-nav li.dropdown.open > ul {
    display: block;
  }
  
  /* Show the nav-info block on mobile */
  .header-nav .nav-info {
    display: block;
    padding: 20px 40px;
    margin-top: 20px;
    color: #222429;
    background: #ECEEEF;
    border-top: 1px solid #ccc;
  }

  .header-nav .nav-info p { margin-bottom: 10px; }
  .header-nav .nav-info p:last-child { margin-bottom: 20px; }

  .header-nav .nav-info .facebook-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: #ffc107;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 320 512'><path d='M279.14 288l14.22-92.66h-88.91V127.77c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S293.48 0 267.27 0c-73.23 0-121.05 44.38-121.05 124.72v70.62H86.41V288h59.81v224h92.66V288z'/></svg>") no-repeat center;
  }
}
/* ===============================
   END NAV
================================ */


/* ===============================
   CONTACT BANNER
================================ */


/* Contact Banner */
.contact-banner {
  background-color: #242527; /* dark background */
  padding: 60px 20px;
  text-align: center;
}

.contact-banner .content-box h3 {
  font-family: 'Teko', sans-serif;
  font-size: 64px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 15px;
}

/* Breadcrumb styling */
.contact-banner .breadcrumbs {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
	color: #fff;
}

.contact-banner .breadcrumbs a {
  color: #ffad1f; /* highlight color */
  text-decoration: none;
}

.contact-banner .breadcrumbs a:hover {
  text-decoration: underline;
}

.contact-banner .breadcrumbs span {
  color: #fff;
  margin: 0 5px;
}













/* === WEB DESIGN PORTFOLIO SECTION === */

.webdesign-portfolio {
  padding: 80px 20px;
  background-color: #f9f9f9;
}

.webdesign-portfolio .portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.webdesign-portfolio .sec-title h2 {
  font-size: 58px;
  margin-bottom: 50px;
  line-height: 1.2;
}

.webdesign-portfolio .portfolio-item {
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.webdesign-portfolio .portfolio-item:hover {
  transform: translateY(-5px);
}

.webdesign-portfolio .portfolio-item img {
  width: 100%;
  height: auto;
  display: block;
}

.webdesign-portfolio .portfolio-item h3 {
  font-size: 18px;
  margin: 20px 0 10px;
  padding: 0 10px;
}

.webdesign-portfolio .portfolio-link {
  margin-bottom: 20px;
}

.webdesign-portfolio .portfolio-link .btn-style-one {
  padding: 10px 25px;
  display: inline-block;
  font-weight: 500;
}

/* === RESPONSIVE === */

@media (max-width: 1024px) {
  .webdesign-portfolio .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .webdesign-portfolio .portfolio-grid {
    grid-template-columns: 1fr;
  }
}


/* === REVIEW SECTION === */   

.reviews-section.desktop-only {
  background-color: #0f0f0f;
  background-image: image-set(
    url("../images/background/web-design-testimonials.webp") type("image/webp"),
    url("../images/background/web-design-testimonials.jpg") type("image/jpeg")
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 80px 20px 420px; /* top, sides, bottom */
  color: #fff;
}

.reviews-section .sec-title h2 {
  color: #fff;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.review-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 20px;
  color: #fff;
}

.review-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}

.review-stars {
  font-size: 1.2em;
  color: #ffcc00;
}

.reviewer-name {
  font-weight: 700;
  font-size: 1.1em;
}

.review-date {
  font-size: 0.9em;
  color: #ccc;
}

.google-icon {
  width: 20px;
  height: auto;
}




/* MOBILE ACCORDION - GOOGLE REVIEWS ONLY */
@media (max-width: 767px) {
  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }

  .mobile-only .sec-title h2 {
    color: #111;
  }

  .mobile-only .accordion details {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 14px;
    margin-bottom: 14px;
    background: #fff;
    color: #333;
  }

  .mobile-only .accordion summary {
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #111;
  }

  .mobile-only .accordion summary::marker {
    display: none;
  }

  .mobile-only .accordion summary::after {
    content: "▶";
    margin-left: auto;
    transition: transform 0.3s ease;
    color: #DAA520; /* gold */
  }

  .mobile-only .accordion details[open] summary::after {
    transform: rotate(90deg);
    content: "▼";
  }

  .mobile-only .accordion p {
    margin-top: 10px;
    line-height: 1.5;
    color: #444;
  }

  .mobile-only .accordion .google-icon {
    width: 18px;
    height: auto;
    flex-shrink: 0;
  }

  .mobile-only .accordion summary span.stars {
    color: #DAA520; /* gold stars */
    margin-left: 4px;
  }
}


/* DEFAULT: hide mobile-only content on desktop */
.mobile-only {
  display: none;
}

/* Show only on screens 767px and smaller */
@media (max-width: 767px) {
  .mobile-only {
    display: block;
  }
}



/* === Contact Section === */
.contact-section {
  padding: 100px 20px;
  background: #fff;
  font-family: 'Rubik', sans-serif;
}

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

.contact-grid {
  display: grid;
  grid-template-columns: 35% 65%;
  gap: 60px;
  align-items: start;
}

/* === Left Column === */
.contact-left .sec-title h2 {
  font-family: 'Teko', sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: #111;
  line-height: 1.1;
  margin-bottom: 20px;
}

.contact-left .dot {
  color: #ffad1f;
}

.contact-text {
  color: #555;
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 30px;
}

.social-icons a {
  display: inline-block;
  font-size: 20px;
  color: #111;
  margin-right: 20px;
  transition: 0.3s ease;
}

.social-icons a:hover {
  color: #ffad1f;
}

/* === Form Layout === */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form .form-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.contact-form input,
.contact-form textarea {
  flex: 1;
  font-size: 16px;
  padding: 18px 20px;
  border: none;
  background-color: #f6f7fa;
  color: #111;
  border-radius: 6px;
  resize: none;
}

.contact-form textarea {
  min-height: 200px;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px #ffad1f66;
}

/* === Button (Yellow w/ Diagonal Overlay) === */
.btn-yellow {
  position: relative;
  display: inline-block;
  background: #ffad1f;
  color: #111;
  font-family: 'Teko', sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: 6px;
  overflow: hidden;
  border: none;
  transition: background 0.3s ease;
  cursor: pointer;
  width: 40%;
  min-width: 200px;
}

.btn-yellow .btn-title {
  position: relative;
  z-index: 2;
}

.btn-yellow .btn-overlay {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  background: #d0891a;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  z-index: 1;
}

/* === Responsive === */
@media (max-width: 991px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-form .form-row {
    flex-direction: column;
  }

  .btn-yellow {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    display: block;
  }
}




/* === FOOTER === */

.main-footer {
  background-color: #111;
  background-image: image-set(
    url("../images/background/footer-bg.webp") type("image/webp"),
    url("../images/background/footer-bg.png") type("image/png")
  );
  background-size: cover;
  background-position: center;
  color: #fff;
  font-size: 15px;
  line-height: 1.7;
  padding: 80px 20px 40px;
}

.widgets-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.footer-widget h6 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #fff;
}

.footer-widget .text {
  margin: 20px 0;
  color: #ccc;
}

.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.footer-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-widget ul li {
  margin-bottom: 10px;
}

.footer-widget ul li a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-widget ul li a:hover {
  color: #ffad1f;
}

.social-links {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.social-links a {
  color: #ffad1f;
  font-size: 20px;
  transition: transform 0.3s ease;
}

.social-links a:hover {
  transform: scale(1.2);
}

.contact-info .icon {
  margin-right: 10px;
  color: #ffad1f;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 60px;
  padding-top: 20px;
  text-align: center;
  font-size: 14px;
  color: #999;
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
  .widgets-section {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .footer-links {
    grid-template-columns: 1fr;
  }
}


/* === PAGES  === */

/* =============================================
   NEW, ISOLATED COMPONENT FOR THE PAGE TITLE
   This uses new class names to avoid all conflicts.
   ============================================= */

.page-hero-section {
  background-color: #fff;
  padding: 100px 0 60px;
}

/* This container is set to 90% width on desktop to align 
  with the image section below it.
*/
.page-hero-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto; /* This centers the container */
  padding: 0;
}

.page-hero-container h1 {
  font-family: 'Rubik', sans-serif;
  font-weight: 800;
  font-size: clamp(3.2rem, 8vw, 8rem);
  line-height: 1.2; /* This is 1.2 times the current font size */
  letter-spacing: 0.1rem;
  margin: 0;
  width: 100%;
  text-align: left;
}

/* On smaller screens, switch to full width with padding */
@media (max-width: 768px) {
  .page-hero-container {
    width: 100%;
    padding: 0 20px;
	  line-height: 1.0rem;
  }
}




/* === Static Website Hero Section === */
.static-hero-section {
  background-color: #f8f9fb; /* slightly different from plain white */
  padding: 90px 0 50px;
  border-bottom: 0px solid #ffad1f; /* subtle accent for differentiation */
}

.static-hero-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

.static-hero-container h1 {
  font-family: 'Rubik', sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 4.5rem); /* reduced min, mid, and max sizes */
  line-height: 1.2;
  letter-spacing: 0.05rem;
  margin: 0;
  width: 100%;
  text-align: left;
  color: #111;
}


/* Optional: adjust spacing & font for mobile */
@media (max-width: 768px) {
  .static-hero-section {
    padding: 60px 0 40px;
  }
  .static-hero-container h1 {
    font-size: clamp(2.2rem, 8vw, 3.8rem);
  }
}



.small-business-header {
  background-color: #fff;
  padding: 100px 0 60px;
}

.small-business-header h1 {
  font-family: 'Rubik', sans-serif;
  font-weight: 800;
  font-size: 100px;
  line-height: 1.1;
  margin: 0 0 40px 0;
  width: 80%;
  text-align: left;
}


.small-business-header .auto-container {
  max-width: 1200px;
  padding: 0 20px;
  margin: 0 auto;
}

/* === SMALL BUSINESS WEBSITE DESIGN ABOUT SECTION=== */



.small-business-intro {
  position: relative;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

.image-wrapper {
  position: relative;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 0;
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  top: 30%;
  right: -80px; /* more space for larger text */
  transform: rotate(90deg) translateY(-50%);
  transform-origin: right center;
  font-family: 'Rubik', sans-serif;
  font-size: 1.25rem; /* increased from 0.9rem */
  color: #111;
  letter-spacing: 0.05em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 12px;
}

.scroll-indicator .arrow {
  font-size: 1.5rem; /* larger arrow */
  animation: floatArrow 1.8s ease-in-out infinite;
  display: inline-block;
	 color: #FFAA18;
}



@keyframes floatArrow {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-6px); /* appears like upward motion */
  }
}




@media (max-width: 768px) {
  .scroll-indicator {
    display: none;
  }
}






/* General Section Styles */
.web-options-section {
    background-color: #F6F7FA;
    padding: 100px 20px;
}

/* Base Layout (Desktop First) */
.web-options-layout {
    display: grid;
    grid-template-columns: 35% 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

/* Grid Column Placement */
.intro-column {
    grid-column: 1 / 2;
    grid-row: 1 / span 2;
}

.option-item:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.option-item:nth-of-type(3) { grid-column: 3; grid-row: 1; }
.option-item:nth-of-type(4) { grid-column: 2; grid-row: 2; }
.option-item:nth-of-type(5) { grid-column: 3; grid-row: 2; }

/* Content Styling */
.section-label {
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    font-weight: 600;
    color: #FFAA18;
    margin-bottom: 10px;
}

.intro-column h2 {
    font-family: 'Teko', sans-serif;
    font-size: 42px;
    font-weight: 600;
    line-height: 1.2;
    color: #111;
}

.option-item .option-number {
    font-size: 1rem;
    color: #FFAA18;
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.option-item h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: #111;
    border-bottom: 1px solid #FFD97A;
    display: block;
    padding-bottom: 4px;
    width: 100%;
}

.option-item p {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.6;
}

/* Re-using this class from your code, assuming it's for a header */
.small-business-header .auto-container {
    max-width: 1200px;
    padding: 0 20px;
    margin: 0 auto;
}

/* --- Responsive Styles --- */

/* Tablet Breakpoint */
@media (max-width: 1024px) {
    .web-options-layout {
        /* This rule was present in your original code, but it's identical to the base style.
           It's kept here in case you intended to change it. If not, it can be removed. */
        grid-template-columns: 1fr; /* Example change: stack columns */
        grid-template-rows: auto;
    }

    .intro-column {
        grid-column: 1 / -1; /* Make intro span full width */
        grid-row: 1;
    }

    /* Place other items below the intro */
    .option-item:nth-of-type(2) { grid-column: 1 / -1; grid-row: 2; }
    .option-item:nth-of-type(3) { grid-column: 1 / -1; grid-row: 3; }
    .option-item:nth-of-type(4) { grid-column: 1 / -1; grid-row: 4; }
    .option-item:nth-of-type(5) { grid-column: 1 / -1; grid-row: 5; }
}

/* Mobile Breakpoint */
@media (max-width: 600px) {
    .web-options-layout {
        display: flex; /* Switch to flexbox for a simple stack */
        flex-direction: column;
    }

    .intro-column,
    .option-item {
        width: 100%;
        /* Padding can be applied to the parent container instead if preferred */
    }
}










/* --- 6 HEADERS AND 3 COLUMNS --- */


/* === ICON OPTIONS SECTION === */

.icon-options-section {
  background-color: #fff;
  padding: 100px 20px;
}

.icon-options-layout {
  display: grid;
  grid-template-columns: 35% 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

.icon-options-section .intro-column {
  grid-column: 1 / 2;
  grid-row: 1 / span 3;
}

.icon-option-item:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.icon-option-item:nth-of-type(3) { grid-column: 3; grid-row: 1; }
.icon-option-item:nth-of-type(4) { grid-column: 2; grid-row: 2; }
.icon-option-item:nth-of-type(5) { grid-column: 3; grid-row: 2; }
.icon-option-item:nth-of-type(6) { grid-column: 2; grid-row: 3; }
.icon-option-item:nth-of-type(7) { grid-column: 3; grid-row: 3; }

.icon-option-item .option-icon {
  width: 40px;
  height: auto;
  margin-bottom: 10px;
}

.icon-option-item h4 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 20px;
  color: #111;
  border-bottom: 1px solid #FFD97A;
  padding-bottom: 4px;
}

.icon-option-item p {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.6;
}

/* Responsive */

@media (max-width: 1024px) {
  .icon-options-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .icon-options-section .intro-column {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .icon-option-item:nth-of-type(n+2) {
    grid-column: 1 / -1;
  }

  .icon-option-item {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .icon-options-layout {
    display: flex;
    flex-direction: column;
  }

  .icon-option-item,
  .icon-options-section .intro-column {
    width: 100%;
  }
}


/* 2 COLUMN SMALL BUSINESS SECTION */


.business-benefits-section {
  background-color: #f6f7fa;
  padding: 100px 20px;
}

.two-column-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
}

.image-column {
  flex: 1 1 45%;
}

.image-column img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}

.text-column {
  flex: 1 1 50%;
}

.text-column h2 {
  font-family: 'Teko', sans-serif;
  font-size: 42px;
  font-weight: 600;
  line-height: 1.2;
  color: #111;
  margin-bottom: 20px;
}

.text-column p {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.6;
  margin-bottom: 16px;
}

.benefit-list {
  list-style: none;
  padding-left: 0;
  margin-top: 20px;
}

.benefit-list li {
  font-size: 0.95rem;
  margin-bottom: 10px;
  color: #333;
}

/* Responsive */
@media (max-width: 768px) {
  .two-column-layout {
    flex-direction: column;
  }

  .image-column,
  .text-column {
    width: 100%;
  }

  .text-column h2 {
    font-size: 32px;
  }
}




/* === WordPress Two Column Section === */
.wordpress-two-column {
  padding: 100px 20px;
  background: #fff;
  font-family: 'Rubik', sans-serif;
}

.wordpress-two-column .two-column-layout {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 60px;
  align-items: center;
}

/* LEFT COLUMN IMAGE */
.wordpress-two-column .column-left picture,
.wordpress-two-column .column-left img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* RIGHT COLUMN TEXT */
.wordpress-two-column .column-right h2 {
  font-family: 'Teko', sans-serif;
  font-size: 42px;
  font-weight: 700;
  color: #111;
  line-height: 1.2;
  margin-bottom: 20px;
}

.wordpress-two-column .column-right p {
  font-size: 16px;
  line-height: 2.1;
  color: #555;
  margin-bottom: 20px;
}

.wordpress-two-column .column-right ul {
  list-style: none;
  margin: 0 0 25px;
  padding: 0;
}

.wordpress-two-column .column-right ul li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: #111;
}

.wordpress-two-column .column-right ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #ffad1f;
  font-weight: bold;
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .wordpress-two-column .two-column-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}


/* === WORDPRESS COMPARISON === */


.website-comparison {
  padding: 80px 20px;
  background: #F6F7FA;
  font-family: 'Rubik', sans-serif;
}

.website-comparison h2 {
  font-family: 'Teko', sans-serif;
  font-size: 42px;
  font-weight: 700;
  color: #111;
  margin-bottom: 20px;
}

.website-comparison p {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
}

.website-comparison .comparison-list {
  margin-top: 40px;
}

.website-comparison .comparison-item {
  background: #fff;
  border-radius: 8px;
  padding: 25px;
  margin-bottom: 25px;
}

.website-comparison .comparison-item h3 {
  font-family: 'Teko', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #111;
  margin-bottom: 10px;
}

.website-comparison .comparison-item ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 20px;
}

.website-comparison .comparison-item ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: #111;
}

.website-comparison .comparison-item ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #ffad1f;
  font-weight: bold;
}



/* === Static HTML & CSS Two Column Section === */
.static-two-column {
  padding: 100px 20px;
  background: #f9fafb; /* subtle light grey to differentiate from WordPress section */
  font-family: 'Rubik', sans-serif;
}

.static-two-column .two-column-layout {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 60px;
  align-items: center;
}

/* LEFT COLUMN IMAGE */
.static-two-column .column-left picture,
.static-two-column .column-left img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
 
}

/* RIGHT COLUMN TEXT */
.static-two-column .column-right h2 {
  font-family: 'Teko', sans-serif;
  font-size: 40px; /* slightly smaller than WordPress section */
  font-weight: 700;
  color: #111;
  line-height: 1.2;
  margin-bottom: 20px;
}

.static-two-column .column-right p {
  font-size: 16px;
  line-height: 1.9; /* slightly tighter for cleaner reading */
  color: #444; /* slightly darker text for contrast on light grey */
  margin-bottom: 20px;
}

.static-two-column .column-right ul {
  list-style: none;
  margin: 0 0 25px;
  padding: 0;
}

.static-two-column .column-right ul li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: #111;
}

.static-two-column .column-right ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #ffad1f;
  font-weight: bold;
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .static-two-column .two-column-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}







/* === FOUR SECTIONS WEBSITE OPTIONS === */


/* === Best Website Options Rows === */
.best-website-rows {
  padding: 80px 20px;
  background: #ECECEC;
  font-family: 'Rubik', sans-serif;
}

.best-website-rows .auto-container {
  max-width: 1200px;
  margin: 0 auto;
}

.bw-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  margin-bottom: 60px;
}

.bw-row:last-child { margin-bottom: 0; }

/* Swap columns visually on alt rows (desktop) */
.bw-row.bw-alt .bw-image { order: 2; }
.bw-row.bw-alt .bw-text  { order: 1; }

/* Image */
.bw-image picture,
.bw-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Text */
.bw-text h3 {
  font-family: 'Teko', sans-serif;
  font-size: 34px;
  font-weight: 700;
  color: #111;
  margin: 0 0 12px;
  line-height: 1.15;
}

.bw-text p {
  font-size: 16px;
  line-height: 1.85;
  color: #555;
  margin: 0 0 16px;
}

.bw-text ul {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.bw-text ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  color: #111;
  line-height: 1.6;
  font-size: 16px;
}

.bw-text ul li::before {
  content: "✔";
  position: absolute;
  left: 0; top: 0;
  color: #ffad1f;
  font-weight: 700;
}

/* Responsive */
@media (max-width: 991px) {
  .bw-row {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 50px;
  }
  /* On mobile, always stack image first then text for consistency */
  .bw-row.bw-alt .bw-image { order: 1; }
  .bw-row.bw-alt .bw-text  { order: 2; }

  .bw-text h3 { font-size: 28px; }
}




/* === Business Cards 3-Column Section === */
.business-cards-section {
  padding: 80px 20px;
  background: #fff;
  font-family: 'Rubik', sans-serif;
}

.business-cards-section .cards-layout {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.business-cards-section .card-item picture,
.business-cards-section .card-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.business-cards-section .card-item h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 16px 0 10px;
  color: #111;
}

.business-cards-section .card-item p {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
}

/* Responsive */
@media (max-width: 991px) {
  .business-cards-section .cards-layout {
    grid-template-columns: 1fr;
  }
}






/* === Shared Fade-up Animation === */

.web-options-layout .intro-column,
.web-options-layout .option-item,
.icon-options-layout .intro-column,
.icon-options-layout .icon-option-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.web-options-layout .intro-column.in-view,
.web-options-layout .option-item.in-view,
.icon-options-layout .intro-column.in-view,
.icon-options-layout .icon-option-item.in-view {
  opacity: 1;
  transform: translateY(0);
}


.web-options-layout .option-item:nth-of-type(2).in-view { transition-delay: 0.1s; }
.web-options-layout .option-item:nth-of-type(3).in-view { transition-delay: 0.2s; }
.web-options-layout .option-item:nth-of-type(4).in-view { transition-delay: 0.3s; }
.web-options-layout .option-item:nth-of-type(5).in-view { transition-delay: 0.4s; }



.icon-options-layout .icon-option-item:nth-of-type(2).in-view { transition-delay: 0.1s; }
.icon-options-layout .icon-option-item:nth-of-type(3).in-view { transition-delay: 0.2s; }
.icon-options-layout .icon-option-item:nth-of-type(4).in-view { transition-delay: 0.3s; }
.icon-options-layout .icon-option-item:nth-of-type(5).in-view { transition-delay: 0.4s; }
.icon-options-layout .icon-option-item:nth-of-type(6).in-view { transition-delay: 0.5s; }
.icon-options-layout .icon-option-item:nth-of-type(7).in-view { transition-delay: 0.6s; }


/* Make portfolio image responsive & centered */
.portfolio-image {
  display: block;
  max-width: 100%;
  margin: 20px auto 0; /* centers it and adds spacing */
  text-align: center;
}

.portfolio-image img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 8px; /* optional for rounded corners */
}


/* Checklist with checkmark icon */
.checklist {
  list-style: none;
  margin: 0 0 25px;
  padding: 0;
}

.checklist li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: #111;
}

.checklist li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #ffad1f;
  font-weight: bold;
}


/* === SEO SERVICES PAGE === */


.seo-video .auto-container {
  max-width: 800px; /* same as video max-width */
  margin: 0 auto;   /* center the whole block but keep text left */
}

.seo-services-intro,
.seo-strategies,
.seo-structured-data,
.seo-video {
  padding: 80px 20px;
}

.seo-services-intro {
  background: #f9f9f9;
  text-align: center;
}

.seo-services-intro h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #111;
}

.seo-services-intro p {
  max-width: 900px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.6;
}

.seo-strategies ul,
.seo-structured-data ul {
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 20px;
}

.seo-strategies li,
.seo-structured-data li {
  list-style-type: disc;
  margin-bottom: 10px;
}

.seo-strategies h2,
.seo-structured-data h2,
.seo-video h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #111;
}

.seo-strategies p,
.seo-structured-data p,
.seo-video p {
  font-size: 1rem;
  line-height: 1.6;
}

.seo-video {
  background: #f9f9f9;
  text-align: left;
}

.seo-video h3 {
  margin-top: 40px;
  font-size: 1.4rem;
  color: #111;
}

.video-container {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 6px;
  background: #000;
}

.video-container img {
  display: block;
  width: 100%;
  height: auto;
}

.video-container iframe {
  width: 100%;
  height: 450px;
  border: none;
}

/* Responsive */
@media (max-width: 768px) {
  .seo-services-intro h1 {
    font-size: 2rem;
  }

  .seo-strategies h2,
  .seo-structured-data h2,
  .seo-video h2 {
    font-size: 1.5rem;
  }

  .video-container iframe {
    height: 250px;
  }
}


/* === SEO video block (fits existing layout) === */
.seo-video { padding: 80px 20px; background: #f9f9f9; text-align: center; }
.seo-video h2 { margin-bottom: 16px; }
.video-container { position: relative; cursor: pointer; overflow: hidden; border-radius: 6px; background: #000; max-width: 800px; margin: 0 auto; }
.video-container img { display: block; width: 100%; height: auto; }
.video-container iframe { width: 100%; height: 450px; border: 0; }

@media (max-width: 768px) {
  .seo-video { padding: 60px 16px; }
  .video-container iframe { height: 250px; }
}




/* Yellow checkmark list style */
.seo-video ul {
  list-style: none;
  margin: 1em 0 1.5em;
  padding: 0;
}

.seo-video ul li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: #111;
}

.seo-video ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #ffad1f;
  font-weight: bold;
}

.seo-video h2,
.seo-video h3,
.seo-video p,
.seo-video ul {
  text-align: left;
}


.webdesign-portfolio .theme-btn.btn-style-one,
.webdesign-portfolio .theme-btn.btn-style-one .btn-gradient {
  color: #000 !important;
}




/* 404 Error Section */
.error-404 {
  background-color: #fff; /* same dark theme */
  color: #000;
  text-align: center;
  padding: 80px 20px;
}

.error-404 h1 {
  font-size: 100px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #ffad1f; /* highlight */
  font-family: 'Teko', sans-serif;
}

.error-404 h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  font-family: 'Teko', sans-serif;
	color: #000;
}

.error-404 p {
  font-size: 18px;
  max-width: 600px;
  margin: 0 auto 30px;
  color: #000;
  font-family: 'Rubik', sans-serif;
}

/* Button */
.home-button {
  display: inline-block;
  background-color: #ffad1f;
  color: #111;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.home-button:hover {
  background-color: #e89c1b;
}




/* Container to allow absolute overlay */
/* Unique background for this section */
/* Unique background for this section */
.ai-friendly-section {
  background-color: #f8f9fa; /* light grey, change as needed */
  padding: 70px 0; /* more breathing room top/bottom */
}

/* Two-column layout with spacing */
.ai-friendly-section .two-column-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 50px; /* space between columns */
}

/* Column padding for breathing room */
.ai-friendly-section .column-left,
.ai-friendly-section .column-right {
  flex: 1;
  min-width: 300px;
  padding: 20px 25px; /* inner padding inside each column */
  box-sizing: border-box;
}

/* Headings spacing */
.ai-friendly-section h2,
.ai-friendly-section h3 {
  margin-top: 0;
  margin-bottom: 20px;
}

/* Paragraph spacing */
.ai-friendly-section p {
  margin-bottom: 18px;
  line-height: 1.6;
}

/* Video styling */
.ai-friendly-section .video-container img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  margin-top: 20px; /* space between intro text and video */
}

/* Check-list style */
.check-list {
  list-style: none;
  margin: 0 0 25px;
  padding: 0;
}
.check-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 14px;
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #000;
}
.check-list li:before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 18px;
  line-height: 1.5;
  color: #ffad1f; /* brand yellow */
  font-weight: bold;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .ai-friendly-section {
    padding: 50px 0;
  }
  .ai-friendly-section .column-left,
  .ai-friendly-section .column-right {
    padding: 15px 15px;
  }
}




/* === Two Column Video + Text Section (legacy page) === */
.video-text-section {
  padding: 80px 20px;
  background: #fff;
  font-family: 'Rubik', sans-serif;
}

.video-text-section .two-column-layout {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 50px;
  align-items: center;
}

.video-text-section .column-right h2 {
  font-family: 'Teko', sans-serif;
  font-size: 42px;
  font-weight: 700;
  color: #111;
  margin-bottom: 20px;
}

.video-text-section .column-right h3 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 20px;
  color: #111;
}

.video-text-section .column-right p {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 16px;
}

/* === AI page section wrapper (safe to theme separately) === */
.ai-friendly-section {
  background: #f8f9fa;
  padding: 70px 20px;
}
.ai-friendly-section .two-column-layout {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 50px;
  align-items: start;
}
.ai-friendly-section .column-left,
.ai-friendly-section .column-right {
  padding: 20px 25px;
  box-sizing: border-box;
}

/* === Unified VIDEO component (shared across pages) === */
.video-container {
  position: relative;
  aspect-ratio: 16 / 9;  /* keeps shape before iframe loads */
  background: #000;
  border-radius: 8px;
  overflow: hidden;      /* clips iframe & prevents corner bleed */
  cursor: pointer;
}

/* Child elements fill the box */
.video-container img,
.video-container iframe,
.video-container .play-button,
.video-container .video-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.video-container img { 
  object-fit: cover; 
  display: block; 
}

/* Play button (centered triangle) */
.play-button {
  pointer-events: none; /* clicks go to container */
  display: flex;
  align-items: center;
  justify-content: center;
}
.play-button::before {
  content: '';
  border-style: solid;
  border-width: 18px 0 18px 28px;
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
  margin-left: 4px;
}

/* Smoothly hide overlays when playing */
.video-container .play-button,
.video-container .video-overlay,
.video-container::before,
.video-container::after {
  transition: opacity .2s ease;
}

/* The iframe */
.video-container iframe {
  border: 0;
  display: block;
  z-index: 2; /* content sits above background but below overlays initially */
}

/* PLAYING STATE — hide everything above the iframe */
.video-container.is-playing > img,
.video-container.is-playing .play-button,
.video-container.is-playing .video-overlay {
  opacity: 0;
  pointer-events: none;
}
.video-container.is-playing::before,
.video-container.is-playing::after {
  opacity: 0;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 991px) {
  .video-text-section .two-column-layout,
  .ai-friendly-section .two-column-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ai-friendly-section .column-left,
  .ai-friendly-section .column-right {
    padding: 15px;
  }
}




/* Cookie Banner */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #222;
  color: #fff;
  text-align: center;
  padding: 15px 20px;
  font-size: 14px;
  display: none; /* hidden until triggered */
  z-index: 9999;
}

.cookie-banner p {
  margin: 0;
  display: inline;
}

.cookie-banner a {
  color: #ffad1f;
  text-decoration: underline;
}

.cookie-banner button {
  margin-left: 15px;
  background: #ffad1f;
  color: #000;
  border: none;
  padding: 6px 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
}


/* Privacy Policy Section */
.privacy-section {
  max-width: 900px;
  margin: 0 auto;          /* center the container */
  padding: 40px 20px;
  font-family: 'Rubik', sans-serif;
  line-height: 1.7;
  color: #333;
}

.privacy-section h2 {
  font-size: 32px;
  margin-bottom: 25px;
  font-weight: 700;
  color: #000;
}

.privacy-section h3 {
  margin-top: 30px;
  margin-bottom: 15px;
  font-size: 22px;
  font-weight: 600;
  color: #111;
}

.privacy-section p {
  margin-bottom: 20px;
  font-size: 16px;
}

.privacy-section ul {
  margin: 0 0 20px 20px;
  padding: 0;
  list-style-type: disc;
}

.privacy-section ul li {
  margin-bottom: 10px;
  font-size: 16px;
}

.privacy-section a {
  color: #ffad1f; /* highlight link */
  text-decoration: underline;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.privacy-section a:hover {
  color: #e69500; /* darker shade on hover */
  text-decoration: none;
}