@media (max-width: 768px) {
  h1 {
    font-size: 1.5rem;
  }

  .content {
    padding: 1rem;
  }

  .images img {
    max-width: 100%;
    margin: 0.5rem 0;
  }

  .vintage-box {
    width: 100%;
  }
  .news-tile {
    width: 100%;
  }
}

@media (min-width: 992px) {
    .d-flex .justify-content-between .mt-3 {
      margin-left:20%;
    }
    .card-title {
      color: #0a0805;
    }
      #navbarNav {
        font-size: 0.9em;

      }
      #navbarNav ul li {
        border: 2px solid #523d1e;
        border-radius: 25px;
        margin-left: 0.4%;
        width: -webkit-fill-available;
        width: auto;
        font-size: 0.8em;
        text-align: center;
        font-weight: 500;
        white-space: nowrap;
    }

      
      .navbar-expand-lg .navbar-nav .nav-link {
        font-size: 1.6em;
      }
    }

@media (min-width: 992px) and (max-width: 1199px) {
        #navbarNav ul li {
        border: 2px solid #523d1e;
        border-radius: 25px;
        margin-left: 0.4%;
        width: -webkit-fill-available;
        width: auto;
        font-size: 0.5em;
        text-align: center;
        font-weight: 500;
        white-space: nowrap;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
        #navbarNav ul li {
        border: 2px solid #523d1e;
        border-radius: 25px;
        margin-left: 0.4%;
        width: -webkit-fill-available;
        width: auto;
        font-size: 0.7em;
        text-align: center;
        font-weight: 500;
        white-space: nowrap;
    }
}


@media (min-width: 1400px) and (max-width: 2400px) {
    #navbarNav ul li {
        border: 2px solid #523d1e;
        border-radius: 25px;
        margin-left: 0.4%;
        width: -webkit-fill-available;
        width: auto;
        font-size: 0.8em;
        text-align: center;
        font-weight: 500;
        white-space: nowrap;
  }
}


@media (min-width: 300px) and (max-width: 1024px) {
 
  .images img {
    max-width: 180px;
    
  }
    .card-body {
    color: #000;
  }
  #newsGrid .news-tile {
    width: 90%;
  }
}
body html {
      background-color: #F9FAFC;
      font-family: "Georgia", serif;
      color: #2d2d2d;
      line-height: 1.7;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;


    }

    header {
      background-color: #f5e5c0;
      padding: 2rem;
      text-align: center;
      border-bottom: 2px solid #d4c19c;
    }

    h1 {
      font-size: 2.5rem;
      margin: 0 0 1rem;
      color: #523d1e;
      font-family: 'IM Fell English SC', serif;
    }

    .tagline {
      font-size: 1.2rem;
      color: #6d5536;
    }

    .content {
      padding: 2rem;
      max-width: 900px;
      margin: auto;
      flex: 1; /* This pushes footer down */
    }

    #navbar {
      background-color: #fffaf0!important;
      border: 1px solid #ddd1ae;
      
    }
    .section  {
      font-size: small;
      background-color: #fffaf0;
      border: 1px solid #ddd1ae;
      border-radius: 8px;
      padding: 1.5rem;
      margin-bottom: 2rem;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    .section h2 {
      font-size: 0.8rem;
      color: #4d3922;
      margin-top: 0;
    }

    .images {
      text-align: center;
      margin: 1.5rem 0;
    }

    .images img {
      max-width: 260px;
      margin: 0.5rem;
      border: 3px solid #cab58c;
      border-radius: 6px;
      box-shadow: 1px 1px 6px #aaa;
    }

    footer {
 padding: 20px;
  text-align: center;
  
  border-top: 1px solid #ccc;


      background-color: #f5e5c0;
      text-align: center;
      padding: 1rem;
      font-size: 0.9rem;
      color: #6d5536;
      border-top: 2px solid #d4c19c;
    }

    .navbar-light .navbar-nav .nav-link {
      color: black!important;
    }

    /* VINTAGE PRICING STYLE */
    .vintage-pricing {
      font-family: 'Special Elite', 'Georgia', serif;
      background-color: #f1e1ba;
      border: 3px solid #826644;
      padding: 2rem;
      text-align: center;
      color: #2b1f10;
      margin-top: 2rem;
      box-shadow: 3px 3px 6px rgba(0,0,0,0.1);
    }

    .vintage-title {
      font-size: 2rem;
      color: #3b2c18;
      margin-bottom: 1rem;
      text-transform: uppercase;
    }

    .vintage-box {
      border: 2px solid #5c4223;
      padding: 1.5rem;
      background: #fffaf0;
      display: inline-block;
      max-width: 500px;
      margin-top: 1rem;
    }

    .vintage-subtitle {
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 1rem;
      text-transform: uppercase;
    }

    .vintage-list {
      list-style: none;
      padding: 0;
      font-size: 1.2rem;
      margin-bottom: 1rem;
      line-height: 2;
    }

    .vintage-note {
      font-style: italic;
      font-size: 1rem;
      color: #5a4325;
    }

    .free {
      color: #c43a3a;
      font-weight: bold;
    }

    #navbar  .navbar-expand-lg .navbar-light .bg-light {
      background-color: #F5E5C0!important;
      border: 3px solid #826644;
      padding: 2rem;
      text-align: center;
      color: #0a0805;
      margin-top: 2rem;
      box-shadow: 3px 3px 6px rgba(0,0,0,0.1);
    }

    #repair-banner {
      background: linear-gradient(135deg, #0d6efd, #6610f2);
      colour: white;
      padding: 2rem;
      border-radius: 1rem;
      position: relative;
      overflow: hidden;
      animation: fadeIn 1.2s ease;
    }
    #repair-banner h2, #repair-banner p {
      color: #fff;
    }
    .badge-offer {
      background-color: #ffc107;
      colour: #000;
      font-size: 1rem;
      padding: 0.5em 1em;
      border-radius: 50rem;
      font-weight: bold;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
@media (max-width: 991.98px) { 
  .navbar-expand-lg>.container, 
  .navbar-expand-lg>.container-fluid, 
  .navbar-expand-lg>.container-lg, 
  .navbar-expand-lg>.container-md, 
  .navbar-expand-lg>.container-sm, 
  .navbar-expand-lg>.container-xl {
       background-color: #f5e5c0;
      }
}

@media (min-width: 1000px) {
  .navbar-expand-lg>.container, .navbar-expand-lg>.container-fluid, .navbar-expand-lg>.container-lg, .navbar-expand-lg>.container-md, .navbar-expand-lg>.container-sm, .navbar-expand-lg>.container-xl
Specificity: (0,2,0)
 {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        background-color: antiquewhite!important;
    }
}

.btn-primary {
    color: #212529!important;
    background-color: #f5e5c0!important;
    
}

.btn-success {
    color: #212529!important;
    background-color: #f5e5c0!important;
    border-color: #28a745;
  }

  /* Star (Start) */
  /* Star Rating (AliExpress Style) */
.star-rating {
  direction: rtl;
  display: inline-flex;
  font-size: 2rem;
  font-family: "Arial", "Helvetica", sans-serif; /* ensures stars render correctly */
}

.star-rating input {
  display: none;
}

.star-rating label {
  cursor: pointer;
  color: #ccc;
  padding: 0 3px;
  transition: color 0.2s;
}

/* Default: empty outlined star */
.star-rating label::before {
  content: "☆";
}

/* Hover: fill current + previous stars */
.star-rating label:hover::before,
.star-rating label:hover ~ label::before {
  content: "★";
  color: gold;
}

/* Selected: fill current + previous stars */
.star-rating input:checked ~ label::before {
  content: "★";
  color: gold;
}

.zoomable-photo {
    transition: transform 0.2s ease-in-out;
}

.zoomable-photo:hover {
    transform: scale(1.05);
}
  /* Star (End) */