/* ============================================
   Cars for Sale Page - Modern & Interactive
   ============================================ */

/* HERO SECTION */
#cars-hero {
    background-color: #f8f9fc;
    padding: 2rem 1rem;
    text-align: center;
    border-bottom: 3px solid #4C7BE8;
  }
  
  #cars-hero .hero-content h2 {
    font-size: 3rem;
    color: #0D1F47;
    margin-bottom: 0.25rem;
    font-family: 'Libre Baskerville', serif;
  }
  
  #cars-hero .hero-content p {
    font-size: 1.25rem;
    color: #333;
    margin-bottom: 1rem;
  }
  
  .hero-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
  }
  
  .btn-hero {
    background-color: #0D1F47;
    color: #fff;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
  }
  
  .btn-hero:hover {
    background-color: #000000;
    transform: translateY(-3px);
  }
  
  /* Cars List Section */
  #cars-list{
    padding: 2rem 0;
    background-color: #fff;
  }

  #cars-list .container{
    width: min(1100px, 92%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem; /* ✅ spacing between cards */
  }
  
  /* Car Card Layout */
  .car-card {
    display: flex;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .car-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  }
  
  /* Car Image Section */
  .car-image {
    flex: 1;
    min-width: 300px;
    max-width: 500px;
    background-color: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    overflow: hidden;
  }
  
  .car-image img {
    width: 105%;
    height: 105%;
    border-radius: 8px;
    transition: transform 0.3s ease;
  }
  
  .car-image img:hover {
    transform: scale(1.05);
  }

  .nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 1rem;
    cursor: pointer;
    display: none;
    font-size: 24px;
    user-select: none;
    z-index: 10;
  }
  
  .car-image:hover .nav-arrow {
    display: block;
    background-color: rgba(26, 60, 141, 0.7); /* 0.5 = 50% transparent */
  }
  
  .nav-arrow.left {
    left: 0px;
  }
  
  .nav-arrow.right {
    left: 454px;
  }
  
  .lightbox-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    /* Allow scrolling if the screen is smaller than the modal */
    overflow: auto;
  }
  
  .lightbox-content {
    position: relative;
    /* Fixed width and height in pixels */
    width: 600px;  /* Adjust as needed */
    height: 600px; /* Adjust as needed */
  }
  
  .lightbox-image-container {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  .lightbox-image {
    /* Fill the container exactly */
    width: 100%;
    height: 100%;
    object-fit: cover; /* or "contain" if you want to see the entire image */
    display: block;
  }
  
  .lightbox-close {
    position: absolute;
    top: -32px;
    right: -37px;
    width: 40px;
    height: 40px;
    background: #1a30cb;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    z-index: 1010;
  }

  .lightbox-image-container .nav-arrow {
    display: block;
    background-color: rgba(26, 60, 141, 0.7); /* 0.5 = 50% transparent */
  }

  .lightbox-image-container .nav-arrow.left {
    left: -140px;
  }

  .lightbox-image-container .nav-arrow.right {
    left: calc(100% - -14.6%); /* pinned to the right edge of the 600px container */
  }
  
  /* Car Info Section */
  .car-info {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    justify-content: center;
  }
  
  .car-info h3 {
    font-size: 2rem;
    color: #1A3C8D;
    margin: 0;
    text-align: center;
  }
  
  .car-vin {
    font-size: 0.9rem;
    color: #666;
    font-weight: bold;
    margin: 0.5rem 0;
  }
  
  .car-info p {
    font-size: 1.25rem;
    color: #333;
    line-height: 1.5;
  }
  
  /* Interested Button */
  .btn-interest {
    align-self: flex-start;
    background-color: #0D1F47;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-left: auto;
    margin-right: auto;
  }
  
  .btn-interest:hover {
    background-color: #000000 ;
    transform: translateY(-3px);
  }
  
  /* Not Seeing Prompt */
  #not-seeing {
    padding: 2rem 1rem;
    text-align: center;
    font-style: italic;
    background-color: #f2f4f8;
    color: #333;
    font-size: 1.23rem;
  }
  
  /* Responsive Adjustments for 300px - 375px */
  @media (min-width: 300px) and (max-width: 376px) {
    .car-card {
        flex-direction: column; /* Stack image and text vertically */
        align-items: center;
        text-align: center;
        width: 97%;
        margin: 0 auto;
    }

    .car-image {
        width: 103%;
        height: auto;
        max-height: 280px; /* Ensures height scales properly */
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .car-image img {
        width: 103%;
        height: 103%;
        object-fit: cover; /* Fills the container without stretching */
        border-radius: 8px;
    }

    .car-info {
        width: 100%;
        padding: 1.2rem;
        text-align: center;
    }

    .car-info h3 {
        font-size: 1.5rem; /* Reduce heading size */
    }

    .car-vin {
        font-size: 0.85rem;
    }

    .car-info p {
        font-size: 1.1rem;
        line-height: 1.4;
    }

    .btn-interest {
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
        margin: 1rem auto; /* Center button */
    }

    /* Not Seeing Prompt */
    #not-seeing {
      font-size: 0.85rem;
      margin-bottom: -1.5rem;
    }
  }

  /* Responsive Adjustments for 376px - 450px */
  @media (min-width: 376px) and (max-width: 451px) {
    .car-card {
      flex-direction: column; /* Stack image and text vertically */
      align-items: center;
      text-align: center;
      width: 90%;
      margin: 0 auto;
    }

    .car-image {
      width: 103%;
      height: auto;
      max-height: 280px; /* Ensures height scales properly */
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .car-image img {
        width: 103%;
        height: 103%;
        object-fit: cover; /* Fills the container without stretching */
        border-radius: 8px;
    }

    .car-info {
        padding: 1.4rem;
    }

    .car-info h3 {
        font-size: 1.65rem;
    }

    .car-vin {
        font-size: 0.9rem;
    }

    .car-info p {
        font-size: 1.15rem;
    }

    .btn-interest {
        font-size: 0.9rem;
        padding: 0.6rem 1.2rem;
    }

    #not-seeing {
        font-size: 0.9rem;
        margin-bottom: -1.4rem;
    }
  }

  /* Responsive Adjustments for 451px - 550px */
  @media (min-width: 451px) and (max-width: 550px) {
    .car-card {
      flex-direction: column; /* Stack image and text vertically */
      align-items: center;
      text-align: center;
      width: 90%;
      margin: 0 auto;
    }

    .car-image {
      width: 103%;
      height: auto;
      max-height: 280px; /* Ensures height scales properly */
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .car-image img {
        width: 103%;
        height: 103%;
        object-fit: cover; /* Fills the container without stretching */
        border-radius: 8px;
    }

    .car-info {
        padding: 1.5rem;
        text-align: center;
    }

    .car-info h3 {
        font-size: 1.75rem;
    }

    .car-vin {
        font-size: 0.95rem;
    }

    .car-info p {
        font-size: 1.2rem;
    }

    .btn-interest {
        font-size: 0.95rem;
        padding: 0.65rem 1.3rem;
        margin: 1rem auto;
    }

    #not-seeing {
        font-size: 0.95rem;
        margin-bottom: -1.3rem;
    }
  }

  /* Responsive Adjustments for 551px - 650px */
  @media (min-width: 551px) and (max-width: 650px) {
    .car-card {
      flex-direction: column; /* Stack image and text vertically */
      align-items: center;
      text-align: center;
      width: 95%;
      margin: 0 auto;
    }

    .car-image {
      width: 103%;
      height: auto;
      max-height: 280px; /* Ensures height scales properly */
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .car-image img {
        width: 103%;
        height: 103%;
        object-fit: cover; /* Fills the container without stretching */
        border-radius: 8px;
    }

    .car-info {
        padding: 1.6rem;
        text-align: center;
    }

    .car-info h3 {
        font-size: 1.85rem;
    }

    .car-vin {
        font-size: 1rem;
    }

    .car-info p {
        font-size: 1.25rem;
    }

    .btn-interest {
        font-size: 1rem;
        padding: 0.7rem 1.4rem;
        margin: 1rem auto;
    }

    #not-seeing {
        font-size: 1rem;
        margin-bottom: -1.2rem;
    }
  }

  /* Responsive Adjustments for 651px - 750px */
  @media (min-width: 650px) and (max-width: 750px) {
    .car-card {
      flex-direction: column; /* Stack image and text vertically */
      align-items: center;
      text-align: center;
      width: 85%;
      margin: 0 auto;
    }

    .car-image {
      width: 1920px; /* Fixed width */
      max-width: 100%; /* Ensures it does not overflow */
      height: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    
    /* Ensure the image inside fully spans the container */
    .car-image img {
        width: 105%; /* Forces image to scale with the container */
        height: 105%;
        object-fit: cover; /* Maintains aspect ratio without stretching */
        border-radius: 8px;
    }

    .car-info {
        padding: 1.8rem;
        text-align: center;
    }

    .car-info h3 {
        font-size: 1.95rem;
    }

    .car-vin {
        font-size: 1.05rem;
    }

    .car-info p {
        font-size: 1.3rem;
    }

    .btn-interest {
        font-size: 1.05rem;
        padding: 0.75rem 1.5rem;
        margin: 1rem auto;
    }

    #not-seeing {
        font-size: 1.05rem;
        margin-bottom: -1.1rem;
    }
  }

  /* Responsive Adjustments for 751px - 850px */
  @media (min-width: 751px) and (max-width: 850px) {
    .car-card {
      flex-direction: column; /* Stack image and text vertically */
      align-items: center;
      text-align: center;
      width: 80%;
      margin: 0 auto;
    }

    .car-image {
      width: 1920px; /* Fixed width */
      max-width: 100%; /* Ensures it does not overflow */
      height: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    
    /* Ensure the image inside fully spans the container */
    .car-image img {
        width: 105%; /* Forces image to scale with the container */
        height: 105%;
        object-fit: cover; /* Maintains aspect ratio without stretching */
        border-radius: 8px;
    }

    .car-info {
        padding: 2rem;
        text-align: center;
    }

    .car-info h3 {
        font-size: 2rem;
    }

    .car-vin {
        font-size: 1.1rem;
    }

    .car-info p {
        font-size: 1.35rem;
    }

    .btn-interest {
        font-size: 1.1rem;
        padding: 0.8rem 1.6rem;
        margin: 1rem auto;
    }

    #not-seeing {
        font-size: 1.1rem;
        margin-bottom: -1rem;
    }
  }

  /* Responsive Adjustments for 851px - 1000px */
  @media (min-width: 851px) and (max-width: 950px) {
    .car-card {
      flex-direction: column; /* Stack image and text vertically */
      align-items: center;
      text-align: center;
      width: 85%;
      margin: 0 auto;
    }

    .car-image {
      width: 1920px; /* Fixed width */
      max-width: 100%; /* Ensures it does not overflow */
      height: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    
    /* Ensure the image inside fully spans the container */
    .car-image img {
        width: 105%; /* Forces image to scale with the container */
        height: 105%;
        object-fit: cover; /* Maintains aspect ratio without stretching */
        border-radius: 8px;
    }

    .car-info {
        padding: 2.2rem;
        text-align: center;
    }

    .car-info h3 {
        font-size: 2.1rem;
    }

    .car-vin {
        font-size: 1.15rem;
    }

    .car-info p {
        font-size: 1.4rem;
    }

    .btn-interest {
        font-size: 1.15rem;
        padding: 0.85rem 1.7rem;
        margin: 1rem auto;
    }

    #not-seeing {
        font-size: 1.15rem;
        margin-bottom: -0.9rem;
    }
  }

  /* Responsive Adjustments for 851px - 1000px */
  @media (min-width: 951px) and (max-width: 1000px) {
    .car-card {
      flex-direction: column; /* Stack image and text vertically */
      align-items: center;
      text-align: center;
      width: 80%;
      margin: 0 auto;
    }

    .car-image {
      width: 1920px; /* Fixed width */
      max-width: 100%; /* Ensures it does not overflow */
      height: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    
    /* Ensure the image inside fully spans the container */
    .car-image img {
        width: 105%; /* Forces image to scale with the container */
        height: 105%;
        object-fit: cover; /* Maintains aspect ratio without stretching */
        border-radius: 8px;
    }

    .car-info {
        padding: 2.2rem;
        text-align: center;
    }

    .car-info h3 {
        font-size: 2.1rem;
    }

    .car-vin {
        font-size: 1.15rem;
    }

    .car-info p {
        font-size: 1.4rem;
    }

    .btn-interest {
        font-size: 1.15rem;
        padding: 0.85rem 1.7rem;
        margin: 1rem auto;
    }

    #not-seeing {
        font-size: 1.15rem;
        margin-bottom: -0.9rem;
    }
  }

  /* FOOTER */
  #main-footer {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
    /* Increased top/bottom padding slightly for more vertical space */
    padding: 3rem 1rem;
    animation: fadeIn var(--fade-duration) var(--fade-ease) 1.6s forwards;
  }

  /* Wrapper to control layout of columns */
  .footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    /* Space columns more evenly with a larger gap */
    justify-content: space-evenly; /* or space-around, depending on preference */
    gap: 4rem; /* increased from 3rem to 4rem */
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
  }

  /* Each column in the footer */
  .footer-col {
    /* Keep columns flexible but ensure a decent min width */
    flex: 1 1 150px;
    /* If you want columns not to stretch too wide, uncomment:
      max-width: 300px; */
  }

  /* Headings in each footer column */
  .footer-col h3 {
    margin-bottom: 1rem; /* increased from 0.5rem */
    font-size: 1.55rem;
    text-decoration: underline;
    text-decoration-color: var(--color-white);
  }

  /* Regular text and links in the footer */
  .footer-col p,
  .footer-col a {
    margin-bottom: 1rem; /* increased from 0.5rem */
    color: var(--color-white);
    text-decoration: none;
    font-size: 1.25rem;
  }

  .footer-col p:hover,
  .footer-col a:hover {
    text-decoration: underline;
  }

  /* Footer bottom area (copyright, etc.) */
  .footer-bottom {
    text-align: center;
    margin-top: 1rem; /* unchanged to keep copyright placement */
    color: var(--color-white);
    font-size: 0.9rem;
    opacity: 0.8;
  }

  .footer-bottom p {
    color: var(--color-white);
    font-size: 1.25rem; /* unchanged */
  }

  p img {
    width: 27px !important;     /* scales the image to match the font size */
    height: auto !important;       /* keeps the aspect ratio intact */
    vertical-align: middle;  /* aligns the image with the text */
    margin-left: 0.4rem; /* adds spacing between the text and the icon */
    transition: transform 0.3s ease; /* smooth transition for scaling */
  }

  .flag-image {
    width: 75px !important;
    height: auto !important;
    display: inline-block !important;
    margin-bottom: 2rem;
  }

  p img:hover {
    transform: scale(1.1); /* scales the image up by 10% on hover */
  }

@media (max-width: 1010px) and (max-width: 1010px) {
  #main-footer {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
    /* 90% of 3rem → 2.7rem; 90% of 1rem → 0.9rem */
    padding: 2.7rem 0.9rem;
    animation: fadeIn var(--fade-duration) var(--fade-ease) 1.6s forwards;
  }
  
  .footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly; /* or space-around, depending on preference */
    /* 90% of 4rem → 3.6rem */
    gap: 3.6rem;
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
  }
  
  .footer-col {
    /* 90% of 150px → 135px (optional if you want the columns narrower) */
    flex: 1 1 135px;
  }
  
  .footer-col h3 {
    /* 90% of 1rem → 0.9rem */
    margin-bottom: 0.9rem;
    /* 90% of 1.55rem → ~1.395rem */
    font-size: 1.395rem;
    text-decoration: underline;
    text-decoration-color: var(--color-white);
  }
  
  .footer-col p,
  .footer-col a {
    /* 90% of 1rem → 0.9rem */
    margin-bottom: 0.9rem;
    color: var(--color-white);
    text-decoration: none;
    /* 90% of 1.25rem → 1.125rem */
    font-size: 1.125rem;
  }
  
  .footer-col p:hover,
  .footer-col a:hover {
    text-decoration: underline;
  }
  
  .footer-bottom {
    text-align: center;
    /* 90% of 4rem → 3.6rem */
    margin-top: 3.6rem;
    color: var(--color-white);
    /* 90% of 0.9rem → 0.81rem */
    font-size: 0.81rem;
    opacity: 0.8;
  }
  
  .footer-bottom p {
    color: var(--color-white);
    /* 90% of 1.25rem → 1.125rem */
    font-size: 1.125rem;
  }
  
  p img {
    /* 90% of 27px → 24.3px */
    width: 24.3px !important;
    height: auto !important;
    vertical-align: middle;
    /* 90% of 0.4rem → 0.36rem */
    margin-left: 0.36rem;
    transition: transform 0.3s ease;
  }
  
  .flag-image {
    /* 90% of 75px → 67.5px */
    width: 67.5px !important;
    height: auto !important;
    display: inline-block !important;
    /* 90% of -2rem → -1.8rem */
    margin-bottom: -1.8rem;
  }
  
  p img:hover {
    transform: scale(1.1);
  }
}

@media (min-width: 812px) and (max-width: 910px) {
  #main-footer {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
    /* 80% of 3rem → 2.4rem; 80% of 1rem → 0.8rem */
    padding: 2.4rem 0.8rem;
    animation: fadeIn var(--fade-duration) var(--fade-ease) 1.6s forwards;
  }
  
  .footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly; /* or space-around, depending on preference */
    /* 80% of 4rem → 3.2rem */
    gap: 3.2rem;
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
  }
  
  .footer-col {
    /* 80% of 150px → 120px */
    flex: 1 1 120px;
  }
  
  .footer-col h3 {
    /* 80% of 1rem → 0.8rem for margin-bottom */
    margin-bottom: 0.8rem;
    /* 80% of 1.55rem → ~1.24rem */
    font-size: 1.24rem;
    text-decoration: underline;
    text-decoration-color: var(--color-white);
  }
  
  .footer-col p,
  .footer-col a {
    /* 80% of 1rem → 0.8rem */
    margin-bottom: 0.8rem;
    color: var(--color-white);
    text-decoration: none;
    /* 80% of 1.25rem → 1rem */
    font-size: 1rem;
    transform: scale(1.10);
  }
  
  .footer-col p:hover,
  .footer-col a:hover {
    text-decoration: underline;
  }
  
  .footer-bottom {
    text-align: center;
    /* 80% of 4rem → 3.2rem */
    margin-top: 3.2rem;
    color: var(--color-white);
    /* 80% of 0.9rem → 0.72rem */
    font-size: 0.72rem;
    opacity: 0.8;
  }
  
  .footer-bottom p {
    color: var(--color-white);
    /* 80% of 1.25rem → 1rem, but if you want exactly scaled from your 90% version use 0.9rem */
    font-size: 0.9rem;
  }
  
  p img {
    /* 80% of 27px → 21.6px */
    width: 21.6px !important;
    height: auto !important;
    vertical-align: middle;
    /* 80% of 0.4rem → 0.32rem */
    margin-left: 0.32rem;
    transition: transform 0.3s ease;
  }
  
  .flag-image {
    /* 80% of 75px → 60px */
    width: 60px !important;
    height: auto !important;
    display: inline-block !important;
    /* 80% of -2rem → -1.6rem */
    margin-bottom: -1.6rem;
  }
  
  p img:hover {
    transform: scale(1.1);
  }
}

@media (min-width: 712px) and (max-width: 811px) {
  #main-footer {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
    /* 70% scaling: 3rem * 0.7 = 2.1rem, 1rem * 0.7 = 0.7rem */
    padding: 2.1rem 0.7rem;
    animation: fadeIn var(--fade-duration) var(--fade-ease) 1.6s forwards;
  }
  
  .footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    /* 70% of 4rem → 2.8rem */
    gap: 2.8rem;
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
  }
  
  .footer-col {
    /* 70% of 150px → 105px */
    flex: 1 1 105px;
  }
  
  .footer-col h3 {
    /* 70% of 1rem → 0.7rem margin-bottom; 70% of 1.55rem → ~1.085rem */
    margin-bottom: 0.7rem;
    font-size: 1.185rem;
    text-decoration: underline;
    text-decoration-color: var(--color-white);
  }
  
  .footer-col p,
  .footer-col a {
    margin-bottom: 0.7rem;
    color: var(--color-white);
    text-decoration: none;
    /* 70% of 1.25rem → 0.875rem */
    font-size: 0.875rem;
    transform: scale(1.10);
  }
  
  .footer-col p:hover,
  .footer-col a:hover {
    text-decoration: underline;
  }
  
  .footer-bottom {
    text-align: center;
    /* 70% of 4rem → 2.8rem */
    margin-top: 2.8rem;
    color: var(--color-white);
    /* 70% of 0.9rem → 0.63rem */
    font-size: 0.63rem;
    opacity: 0.8;
  }
  
  .footer-bottom p {
    color: var(--color-white);
    /* 70% of 1.25rem → 0.875rem */
    font-size: 0.875rem;
  }
  
  p img {
    /* 70% of 27px → 18.9px; 70% of 0.4rem → 0.28rem */
    width: 18.9px !important;
    height: auto !important;
    vertical-align: middle;
    margin-left: 0.28rem;
    transition: transform 0.3s ease;
  }
  
  .flag-image {
    /* 70% of 75px → 52.5px; 70% of -2rem → -1.4rem */
    width: 58.5px !important;
    height: auto !important;
    display: inline-block !important;
    margin-bottom: -1.4rem;
  }
  
  p img:hover {
    transform: scale(1.1);
  }
}

@media (min-width: 612px) and (max-width: 711px) {
  #main-footer {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
    /* 60% scaling: 3rem * 0.6 = 1.8rem, 1rem * 0.6 = 0.6rem */
    padding: 1.8rem 0.6rem;
    animation: fadeIn var(--fade-duration) var(--fade-ease) 1.6s forwards;
  }
  
  .footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    /* 60% of 4rem → 2.4rem */
    gap: 2.4rem;
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
  }
  
  .footer-col {
    /* 60% of 150px → 90px */
    flex: 1 1 90px;
  }
  
  .footer-col h3 {
    margin-bottom: 0.6rem;
    /* 60% of 1.55rem → 0.93rem */
    font-size: 1.13rem;
    text-decoration: underline;
    text-decoration-color: var(--color-white);
  }
  
  .footer-col p,
  .footer-col a {
    margin-bottom: 0.6rem;
    color: var(--color-white);
    text-decoration: none;
    /* 60% of 1.25rem → 0.75rem */
    font-size: 0.75rem;
    transform: scale(1.10);
  }
  
  .footer-col p:hover,
  .footer-col a:hover {
    text-decoration: underline;
  }
  
  .footer-bottom {
    text-align: center;
    /* 60% of 4rem → 2.4rem */
    margin-top: 2.4rem;
    color: var(--color-white);
    /* 60% of 0.9rem → 0.54rem */
    font-size: 0.54rem;
    opacity: 0.8;
  }
  
  .footer-bottom p {
    color: var(--color-white);
    /* 60% of 1.25rem → 0.75rem */
    font-size: 0.75rem;
  }
  
  p img {
    /* 60% of 27px → 16.2px; 60% of 0.4rem → 0.24rem */
    width: 16.2px !important;
    height: auto !important;
    vertical-align: middle;
    margin-left: 0.24rem;
    transition: transform 0.3s ease;
  }
  
  .flag-image {
    /* 60% of 75px → 45px; 60% of -2rem → -1.2rem */
    width: 50px !important;
    height: auto !important;
    display: inline-block !important;
    margin-bottom: -1.2rem;
  }
  
  p img:hover {
    transform: scale(1.1);
  }
}

@media (min-width: 547px) and (max-width: 611px) {
  #main-footer {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
    /* Still 50% of original padding values */
    padding: 1.5rem 0.5rem;
    animation: fadeIn var(--fade-duration) var(--fade-ease) 1.6s forwards;
  }
  
  .footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 2rem;
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
  }
  
  .footer-col {
    flex: 1 1 75px;
  }
  
  .footer-col h3 {
    margin-bottom: 0.5rem;
    /* Increased from 0.775rem to 0.85rem */
    font-size: 1.03rem;
    text-decoration: underline;
    text-decoration-color: var(--color-white);
  }
  
  .footer-col p,
  .footer-col a {
    margin-bottom: 0.5rem;
    color: var(--color-white);
    text-decoration: none;
    /* Increased from 0.625rem to 0.7rem */
    font-size: 0.67rem;
    transform: scale(1.10);
  }
  
  .footer-col p:hover,
  .footer-col a:hover {
    text-decoration: underline;
  }
  
  .footer-bottom {
    text-align: center;
    margin-top: 2rem;
    color: var(--color-white);
    /* Increased from 0.45rem to 0.5rem */
    font-size: 0.5rem;
    opacity: 0.8;
  }
  
  .footer-bottom p {
    color: var(--color-white);
    /* Increased from 0.625rem to 0.7rem */
    font-size: 0.7rem;
  }
  
  p img {
    /* Kept icon sizes the same, but you can increase if needed */
    width: 16.2px !important;
    height: auto !important;
    vertical-align: middle;
    margin-left: 0.2rem;
    transition: transform 0.3s ease;
  }
  
  .flag-image {
    width: 48.5px !important;
    height: auto !important;
    display: inline-block !important;
    margin-bottom: -1rem;
  }
  
  p img:hover {
    transform: scale(1.1);
  }
}  

@media (min-width: 480px) and (max-width: 546px) {
  #main-footer {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
    /* 40% scaling: 3rem * 0.4 = 1.2rem, 1rem * 0.4 = 0.4rem */
    padding: 1.2rem 0.4rem;
    animation: fadeIn var(--fade-duration) var(--fade-ease) 1.6s forwards;
  }
  
  .footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    /* 40% of 4rem → 1.6rem */
    gap: 1.6rem;
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
  }
  
  .footer-col {
    /* 40% of 150px → 60px */
    flex: 1 1 60px;
  }
  
  .footer-col h3 {
    margin-bottom: 0.4rem;
    /* 40% of 1.55rem → 0.62rem */
    font-size: 0.9rem;
    text-decoration: underline;
    text-decoration-color: var(--color-white);
  }
  
  .footer-col p,
  .footer-col a {
    margin-bottom: 0.4rem;
    color: var(--color-white);
    text-decoration: none;
    /* 40% of 1.25rem → 0.5rem */
    font-size: 0.60rem;
    transform: scale(1.10);
  }
  
  .footer-col p:hover,
  .footer-col a:hover {
    text-decoration: underline;
  }
  
  .footer-bottom {
    text-align: center;
    /* 40% of 4rem → 1.6rem */
    margin-top: 1.6rem;
    color: var(--color-white);
    /* 40% of 0.9rem → 0.36rem */
    font-size: 0.56rem;
    opacity: 0.8;
  }
  
  .footer-bottom p {
    color: var(--color-white);
    /* 40% of 1.25rem → 0.5rem */
    font-size: 0.56rem;
  }
  
  p img {
    /* 40% of 27px → 10.8px; 40% of 0.4rem → 0.16rem */
    width: 13.8px !important;
    height: auto !important;
    vertical-align: middle;
    margin-left: 0.16rem;
    transition: transform 0.3s ease;
  }
  
  .flag-image {
    /* 40% of 75px → 30px; 40% of -2rem → -0.8rem */
    width: 48.5px !important;
    height: auto !important;
    display: inline-block !important;
    margin-bottom: -0.8rem;
  }
  
  p img:hover {
    transform: scale(1.1);
  }
}

@media (min-width: 412px) and (max-width: 480px) {
  #main-footer {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
    /* 40% scaling: 3rem * 0.4 = 1.2rem, 1rem * 0.4 = 0.4rem */
    padding: 1.2rem 0.4rem;
    animation: fadeIn var(--fade-duration) var(--fade-ease) 1.6s forwards;
  }
  
  .footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    /* 40% of 4rem → 1.6rem */
    gap: 1.6rem;
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
  }
  
  .footer-col {
    /* 40% of 150px → 60px */
    flex: 1 1 80px;
  }
  
  .footer-col h3 {
    margin-bottom: 0.4rem;
    /* 40% of 1.55rem → 0.62rem */
    font-size: 0.9rem;
    text-decoration: underline;
    text-decoration-color: var(--color-white);
  }
  
  .footer-col p,
  .footer-col a {
    margin-bottom: 0.4rem;
    color: var(--color-white);
    text-decoration: none;
    /* 40% of 1.25rem → 0.5rem */
    font-size: 0.548rem;
    transform: scale(1.10);
  }
  
  .footer-col p:hover,
  .footer-col a:hover {
    text-decoration: underline;
  }
  
  .footer-bottom {
    text-align: center;
    /* 40% of 4rem → 1.6rem */
    margin-top: 1.6rem;
    color: var(--color-white);
    /* 40% of 0.9rem → 0.36rem */
    font-size: 0.56rem;
    opacity: 0.8;
  }
  
  .footer-bottom p {
    color: var(--color-white);
    /* 40% of 1.25rem → 0.5rem */
    font-size: 0.56rem;
  }
  
  p img {
    /* 40% of 27px → 10.8px; 40% of 0.4rem → 0.16rem */
    width: 13.8px !important;
    height: auto !important;
    vertical-align: middle;
    margin-left: 0.16rem;
    transition: transform 0.3s ease;
  }
  
  .flag-image {
    /* 40% of 75px → 30px; 40% of -2rem → -0.8rem */
    width: 45.5px !important;
    height: auto !important;
    display: inline-block !important;
    margin-bottom: -0.8rem;
  }
  
  p img:hover {
    transform: scale(1.1);
  }
}

@media (min-width: 381px) and (max-width: 411px) {
  #main-footer {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
    /* 30% scaling: 3rem * 0.3 = 0.9rem, 1rem * 0.3 = 0.3rem */
    padding: 0.9rem 0.3rem;
    animation: fadeIn var(--fade-duration) var(--fade-ease) 1.6s forwards;
  }
  
  .footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    /* 30% of 4rem → 1.2rem */
    gap: 1.2rem;
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
  }
  
  .footer-col {
    /* 30% of 150px → 45px */
    flex: 1 1 65px;
  }
  
  .footer-col h3 {
    margin-bottom: 0.3rem;
    /* 30% of 1.55rem → ~0.465rem */
    font-size: 0.82rem;
    text-decoration: underline;
    text-decoration-color: var(--color-white);
  }
  
  .footer-col p,
  .footer-col a {
    margin-bottom: 0.3rem;
    color: var(--color-white);
    text-decoration: none;
    /* 30% of 1.25rem → 0.375rem */
    font-size: 0.50rem;
    transform: scale(1.10);
  }
  
  .footer-col p:hover,
  .footer-col a:hover {
    text-decoration: underline;
  }
  
  .footer-bottom {
    text-align: center;
    /* 30% of 4rem → 1.2rem */
    margin-top: 1.2rem;
    color: var(--color-white);
    /* 30% of 0.9rem → 0.27rem */
    font-size: 0.8rem;
    opacity: 0.8;
  }
  
  .footer-bottom p {
    color: var(--color-white);
    /* 30% of 1.25rem → 0.375rem */
    font-size: 0.5rem;
  }
  
  p img {
    /* 30% of 27px → 8.1px; 30% of 0.4rem → 0.12rem */
    width: 9.1px !important;
    height: auto !important;
    vertical-align: middle;
    margin-left: 0.12rem;
    transition: transform 0.3s ease;
  }
  
  .flag-image {
    /* 30% of 75px → 22.5px; 30% of -2rem → -0.6rem */
    width: 45.5px !important;
    height: auto !important;
    display: inline-block !important;
    margin-bottom: -0.6rem;
  }
  
  p img:hover {
    transform: scale(1.1);
  }
}

@media (min-width: 350px) and (max-width: 380px) {
  #main-footer {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
    /* 30% scaling: 3rem * 0.3 = 0.9rem, 1rem * 0.3 = 0.3rem */
    padding: 0.9rem 0.3rem;
    animation: fadeIn var(--fade-duration) var(--fade-ease) 1.6s forwards;
  }
  
  .footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    /* 30% of 4rem → 1.2rem */
    gap: 1.2rem;
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
  }
  
  .footer-col {
    /* 30% of 150px → 45px */
    flex: 1 1 65px;
  }
  
  .footer-col h3 {
    margin-bottom: 0.3rem;
    /* 30% of 1.55rem → ~0.465rem */
    font-size: 0.82rem;
    text-decoration: underline;
    text-decoration-color: var(--color-white);
  }
  
  .footer-col p,
  .footer-col a {
    margin-bottom: 0.3rem;
    color: var(--color-white);
    text-decoration: none;
    /* 30% of 1.25rem → 0.375rem */
    font-size: 0.42rem;
    transform: scale(1.25);
  }
  
  .footer-col p:hover,
  .footer-col a:hover {
    text-decoration: underline;
  }
  
  .footer-bottom {
    text-align: center;
    /* 30% of 4rem → 1.2rem */
    margin-top: 1.2rem;
    color: var(--color-white);
    /* 30% of 0.9rem → 0.27rem */
    font-size: 0.8rem;
    opacity: 0.8;
  }
  
  .footer-bottom p {
    color: var(--color-white);
    /* 30% of 1.25rem → 0.375rem */
    font-size: 0.5rem;
  }
  
  p img {
    /* 30% of 27px → 8.1px; 30% of 0.4rem → 0.12rem */
    width: 9.1px !important;
    height: auto !important;
    vertical-align: middle;
    margin-left: 0.12rem;
    transition: transform 0.3s ease;
  }
  
  .flag-image {
    /* 30% of 75px → 22.5px; 30% of -2rem → -0.6rem */
    width: 45.5px !important;
    height: auto !important;
    display: inline-block !important;
    margin-bottom: -0.6rem;
  }
  
  p img:hover {
    transform: scale(1.1);
  }
}

@media (min-width: 320px) and (max-width: 349px) {
  #main-footer {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
    /* 30% scaling: 3rem * 0.3 = 0.9rem, 1rem * 0.3 = 0.3rem */
    padding: 0.9rem 0.3rem;
    animation: fadeIn var(--fade-duration) var(--fade-ease) 1.6s forwards;
  }
  
  .footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    /* 30% of 4rem → 1.2rem */
    gap: 1.3rem;
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
  }
  
  .footer-col {
    /* 30% of 150px → 45px */
    flex: 1 1 65px;
  }
  
  .footer-col h3 {
    margin-bottom: 0.3rem;
    /* 30% of 1.55rem → ~0.465rem */
    font-size: 0.82rem;
    text-decoration: underline;
    text-decoration-color: var(--color-white);
  }
  
  .footer-col p,
  .footer-col a {
    margin-bottom: 0.3rem;
    color: var(--color-white);
    text-decoration: none;
    /* 30% of 1.25rem → 0.375rem */
    font-size: 0.405rem;
    transform: scale(1.25);
  }
  
  .footer-col p:hover,
  .footer-col a:hover {
    text-decoration: underline;
  }
  
  .footer-bottom {
    text-align: center;
    /* 30% of 4rem → 1.2rem */
    margin-top: 1.2rem;
    color: var(--color-white);
    /* 30% of 0.9rem → 0.27rem */
    font-size: 0.8rem;
    opacity: 0.8;
  }
  
  .footer-bottom p {
    color: var(--color-white);
    /* 30% of 1.25rem → 0.375rem */
    font-size: 0.5rem;
  }
  
  p img {
    /* 30% of 27px → 8.1px; 30% of 0.4rem → 0.12rem */
    width: 9.1px !important;
    height: auto !important;
    vertical-align: middle;
    margin-left: 0.12rem;
    transition: transform 0.3s ease;
  }
  
  .flag-image {
    /* 30% of 75px → 22.5px; 30% of -2rem → -0.6rem */
    width: 45.5px !important;
    height: auto !important;
    display: inline-block !important;
    margin-bottom: -0.6rem;
  }
  
  p img:hover {
    transform: scale(1.1);
  }
}

@media (min-width: 300px) and (max-width: 319px) {
  #main-footer {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
    /* 30% scaling: 3rem * 0.3 = 0.9rem, 1rem * 0.3 = 0.3rem */
    padding: 0.9rem 0.3rem;
    animation: fadeIn var(--fade-duration) var(--fade-ease) 1.6s forwards;
  }
  
  .footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    /* 30% of 4rem → 1.2rem */
    gap: 1.3rem;
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
  }
  
  .footer-col {
    /* 30% of 150px → 45px */
    flex: 1 1 65px;
  }
  
  .footer-col h3 {
    margin-bottom: 0.3rem;
    /* 30% of 1.55rem → ~0.465rem */
    font-size: 0.82rem;
    text-decoration: underline;
    text-decoration-color: var(--color-white);
  }
  
  .footer-col p,
  .footer-col a {
    margin-bottom: 0.3rem;
    color: var(--color-white);
    text-decoration: none;
    /* 30% of 1.25rem → 0.375rem */
    font-size: 0.37rem;
    transform: scale(1.10);
  }
  
  .footer-col p:hover,
  .footer-col a:hover {
    text-decoration: underline;
  }
  
  .footer-bottom {
    text-align: center;
    /* 30% of 4rem → 1.2rem */
    margin-top: 1.2rem;
    color: var(--color-white);
    /* 30% of 0.9rem → 0.27rem */
    font-size: 0.8rem;
    opacity: 0.8;
  }
  
  .footer-bottom p {
    color: var(--color-white);
    /* 30% of 1.25rem → 0.375rem */
    font-size: 0.5rem;
  }
  
  p img {
    /* 30% of 27px → 8.1px; 30% of 0.4rem → 0.12rem */
    width: 9.1px !important;
    height: auto !important;
    vertical-align: middle;
    margin-left: 0.12rem;
    transition: transform 0.3s ease;
  }
  
  .flag-image {
    /* 30% of 75px → 22.5px; 30% of -2rem → -0.6rem */
    width: 45.5px !important;
    height: auto !important;
    display: inline-block !important;
    margin-bottom: -0.6rem;
  }
  
  p img:hover {
    transform: scale(1.1);
  }
}

@media (min-width: 300px) and (max-width: 650px) {
  .nav-arrow {
    position: fixed;
    top: 20%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 1rem;
    cursor: pointer;
    display: none;
    font-size: 24px;
    user-select: none;
    z-index: 10;
  }
  
  .car-image:hover .nav-arrow {
    display: block;
  }
  
  .nav-arrow.left {
    left: 0px;
  }
  
  .nav-arrow.right {
    left: calc(100% - 46px);
  }
}

@media (min-width: 650px) and (max-width: 1000px) {
  .nav-arrow {
    position: fixed;
    top: calc(100% - 70%);
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 1rem;
    cursor: pointer;
    display: none;
    font-size: 24px;
    user-select: none;
    z-index: 10;
  }
  
  .car-image:hover .nav-arrow {
    display: block;
  }
  
  .nav-arrow.left {
    left: 0px;
  }
  
  .nav-arrow.right {
    left: calc(100% - 46px);
  }
}

/* For viewports from 1025px to 1049px: right arrow is calc(100% - 57%) */
@media (min-width: 1000px) and (max-width: 1024px) {
  .nav-arrow {
    position: absolute;
    top: calc(100% - 50%);
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 1rem;
    cursor: pointer;
    display: none;
    font-size: 24px;
    user-select: none;
    z-index: 10;
  }
  .car-image:hover .nav-arrow {
    display: block;
  }
  .nav-arrow.left {
    left: 0px;
  }
  .nav-arrow.right {
    left: calc(100% - 56.80%);
  }
}

/* For viewports from 1025px to 1049px: right arrow is calc(100% - 57%) */
@media (min-width: 1025px) and (max-width: 1049px) {
  .nav-arrow {
    position: absolute;
    top: calc(100% - 50%);
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 1rem;
    cursor: pointer;
    display: none;
    font-size: 24px;
    user-select: none;
    z-index: 10;
  }
  .car-image:hover .nav-arrow {
    display: block;
  }
  .nav-arrow.left {
    left: 0px;
  }
  .nav-arrow.right {
    left: calc(100% - 57%);
  }
}

/* For viewports from 1050px to 1074px: right arrow is calc(100% - 58%) */
@media (min-width: 1050px) and (max-width: 1074px) {
  .nav-arrow {
    position: fixed;
    top: calc(100% - 50%);
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 1rem;
    cursor: pointer;
    display: none;
    font-size: 24px;
    user-select: none;
    z-index: 10;
  }
  .car-image:hover .nav-arrow {
    display: block;
  }
  .nav-arrow.left {
    left: 0px;
  }
  .nav-arrow.right {
    left: calc(100% - 56.7%);
  }
}

/* For viewports from 1075px to 1099px: right arrow is calc(100% - 59%) */
@media (min-width: 1075px) and (max-width: 1099px) {
  .nav-arrow {
    position: absolute;
    top: calc(100% - 50%);
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 1rem;
    cursor: pointer;
    display: none;
    font-size: 24px;
    user-select: none;
    z-index: 10;
  }
  .car-image:hover .nav-arrow {
    display: block;
  }
  .nav-arrow.left {
    left: 0px;
  }
  .nav-arrow.right {
    left: calc(100% - 56.5%);
  }
}

/* For viewports from 1100px to 1124px: right arrow is calc(100% - 60%) */
@media (min-width: 1100px) and (max-width: 1124px) {
  .nav-arrow {
    position: fixed;
    top: calc(100% - 50%);
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 1rem;
    cursor: pointer;
    display: none;
    font-size: 24px;
    user-select: none;
    z-index: 10;
  }
  .car-image:hover .nav-arrow {
    display: block;
  }
  .nav-arrow.left {
    left: 0px;
  }
  .nav-arrow.right {
    left: calc(100% - 56.35%);
  }
}

/* For viewports from 1125px to 1149px: right arrow is calc(100% - 61%) */
@media (min-width: 1125px) and (max-width: 1149px) {
  .nav-arrow {
    position: fixed;
    top: calc(100% - 50%);
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 1rem;
    cursor: pointer;
    display: none;
    font-size: 24px;
    user-select: none;
    z-index: 10;
  }
  .car-image:hover .nav-arrow {
    display: block;
  }
  .nav-arrow.left {
    left: 0px;
  }
  .nav-arrow.right {
    left: calc(100% - 56.15%);
  }
}

/* For viewports from 1150px to 1161px: right arrow is calc(100% - 62%) */
@media (min-width: 1150px) and (max-width: 1161px) {
  .nav-arrow {
    position: fixed;
    top: calc(100% - 50%);
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 1rem;
    cursor: pointer;
    display: none;
    font-size: 24px;
    user-select: none;
    z-index: 10;
  }
  .car-image:hover .nav-arrow {
    display: block;
  }
  .nav-arrow.left {
    left: 0px;
  }
  .nav-arrow.right {
    left: calc(100% - 56%);
  }

  .lightbox-image-container .nav-arrow {
    display: block;
  }

  .lightbox-image-container .nav-arrow.left {
    left: 12.25% !important;
  }

  .lightbox-image-container .nav-arrow.right {
    left: 83.87% !important; /* pinned to the right edge of the 600px container */
  }
}

@media (min-width: 1100px) and (max-width: 1150px) {
  .lightbox-image-container .nav-arrow {
    display: block;
  }

  .lightbox-image-container .nav-arrow.left {
    left: 9.9% !important;
  }

  .lightbox-image-container .nav-arrow.right {
    left: 85.9% !important; /* pinned to the right edge of the 600px container */
  }
}

@media (min-width: 1073px) and (max-width: 1099px) {
  .lightbox-image-container .nav-arrow {
    display: block;
  }

  .lightbox-image-container .nav-arrow.left {
    left: -19.5%;
  }

  .lightbox-image-container .nav-arrow.right {
    left: 111.5%; /* pinned to the right edge of the 600px container */
  }
}

@media (min-width: 1050px) and (max-width: 1072px) {
  .lightbox-image-container .nav-arrow {
    display: block;
  }

  .lightbox-image-container .nav-arrow.left {
    left: 9.5%;
  }

  .lightbox-image-container .nav-arrow.right {
    left: 85.5%; /* pinned to the right edge of the 600px container */
  }
}

@media (min-width: 1001px) and (max-width: 1049px) {
  .lightbox-image-container .nav-arrow {
    display: block;
  }

  .lightbox-image-container .nav-arrow.left {
    left: -19.5%;
  }

  .lightbox-image-container .nav-arrow.right {
    left: 111.5%; /* pinned to the right edge of the 600px container */
  }
}

@media (min-width: 1000px) {
  .lightbox-image-container .nav-arrow {
    display: block;
    top: 50%;
  }

  .lightbox-image-container .nav-arrow.left {
    left: -10.55%;
  }

  .lightbox-image-container .nav-arrow.right {
    left: 104.07%; /* pinned to the right edge of the 600px container */
  }

  .lightbox-content {
    position: relative;
    /* Fixed width and height in pixels */
    width: 720px;  /* Adjust as needed */
    height: 720px; /* Adjust as needed */
  }
}

@media (min-width: 880px) and (max-width: 999px) {
  .lightbox-image-container .nav-arrow {
    display: block;
    top: 50%;
  }

  .lightbox-image-container .nav-arrow.left {
    left: 4.55%;
  }

  .lightbox-image-container .nav-arrow.right {
    left: 90.1%; /* pinned to the right edge of the 600px container */
  }

  .lightbox-content {
    position: relative;
    /* Fixed width and height in pixels */
    width: 673px;  /* Adjust as needed */
    height: 673px; /* Adjust as needed */
  }
}

@media (min-width: 780px) and (max-width: 879px) {
  .lightbox-image-container .nav-arrow {
    display: block;
    top: 50%;
  }

  .lightbox-image-container .nav-arrow.left {
    left: 4.0%;
  }

  .lightbox-image-container .nav-arrow.right {
    left: 90.1%; /* pinned to the right edge of the 600px container */
  }
}

@media (min-width: 694px) and (max-width: 779px) {
  .lightbox-image-container .nav-arrow {
    display: block;
    top: 50%;
  }

  .lightbox-image-container .nav-arrow.left {
    left: 5.0%;
  }

  .lightbox-image-container .nav-arrow.right {
    left: 88.3%; /* pinned to the right edge of the 600px container */
  }

  .lightbox-content {
    position: relative;
    /* Fixed width and height in pixels */
    width: 520px;  /* Adjust as needed */
    height: 520px; /* Adjust as needed */
  }
}

@media (min-width: 579px) and (max-width: 693px) {
  .lightbox-image-container .nav-arrow {
    display: block;
    top: 50%;
  }

  .lightbox-image-container .nav-arrow.left {
    left: 4.0%;
  }

  .lightbox-image-container .nav-arrow.right {
    left: 88%; /* pinned to the right edge of the 600px container */
  }

  .lightbox-content {
    position: relative;
    /* Fixed width and height in pixels */
    width: 425px;  /* Adjust as needed */
    height: 425px; /* Adjust as needed */
  }
}

@media (min-width: 518px) and (max-width: 578px) {
  .lightbox-image-container .nav-arrow {
    display: block;
    top: 46.5%;
    transform: scale(0.80);
  }

  .lightbox-image-container .nav-arrow.left {
    left: calc(100% - 98.15%) /* pinned to the right edge of the 600px container */
  }

  .lightbox-image-container .nav-arrow.right {
    left: calc(100% - 10.9%) /* pinned to the right edge of the 600px container */
  }

  .lightbox-content {
    position: relative;
    /* Fixed width and height in pixels */
    width: 400px;  /* Adjust as needed */
    height: 400px; /* Adjust as needed */
  }

  .lightbox-close {
    width: 40px;
    height: 40px;
    top: -17px;
    right: -17px
  }
}

@media (min-width: 450px) and (max-width: 517px) {
  .lightbox-image-container .nav-arrow {
    display: block;
    top: 46.5%;
    transform: scale(0.65);
  }

  .lightbox-image-container .nav-arrow.left {
    left: calc(100% - 99.35%) /* pinned to the right edge of the 600px container */
  }

  .lightbox-image-container .nav-arrow.right {
    left: calc(100% - 10.6%) /* pinned to the right edge of the 600px container */
  }

  .lightbox-content {
    position: relative;
    /* Fixed width and height in pixels */
    width: 370px;  /* Adjust as needed */
    height: 370px; /* Adjust as needed */
  }

  .lightbox-close {
    width: 40px;
    height: 40px;
    top: -17px;
    right: -17px
  }
}

@media (min-width: 400px) and (max-width: 450px) {
  .lightbox-image-container .nav-arrow {
    display: block;
    top: 46.5%;
    transform: scale(0.80);
  }

  .lightbox-image-container .nav-arrow.left {
    left: calc(100% - 94.25%) /* pinned to the right edge of the 600px container */
  }

  .lightbox-image-container .nav-arrow.right {
    left: calc(100% - 17.3%) /* pinned to the right edge of the 600px container */
  }

  .lightbox-content {
    position: relative;
    /* Fixed width and height in pixels */
    width: 345px;  /* Adjust as needed */
    height: 345px; /* Adjust as needed */
  }

  .lightbox-close {
    width: 40px;
    height: 40px;
    top: -17px;
    right: -17px
  }
}

@media (min-width: 440px) and (max-width: 441px) {
  .lightbox-image-container .nav-arrow {
    display: block;
    top: 46.5%;
    transform: scale(0.75);
  }

  .lightbox-image-container .nav-arrow.left {
    left: calc(100% - 98.35%) /* pinned to the right edge of the 600px container */
  }

  .lightbox-image-container .nav-arrow.right {
    left: calc(100% - 12.05%) /* pinned to the right edge of the 600px container */
  }

  .lightbox-content {
    position: relative;
    /* Fixed width and height in pixels */
    width: 345px;  /* Adjust as needed */
    height: 345px; /* Adjust as needed */
  }

  .lightbox-close {
    width: 40px;
    height: 40px;
    top: -17px;
    right: -17px
  }
}

@media (min-width: 430px) and (max-width: 431px) {
  .lightbox-image-container .nav-arrow {
    display: block;
    top: 46.5%;
    transform: scale(0.75);
  }

  .lightbox-image-container .nav-arrow.left {
    left: calc(100% - 99.35%) /* pinned to the right edge of the 600px container */
  }

  .lightbox-image-container .nav-arrow.right {
    left: calc(100% - 11.05%) /* pinned to the right edge of the 600px container */
  }

  .lightbox-content {
    position: relative;
    /* Fixed width and height in pixels */
    width: 345px;  /* Adjust as needed */
    height: 345px; /* Adjust as needed */
  }

  .lightbox-close {
    width: 40px;
    height: 40px;
    top: -17px;
    right: -17px
  }
}

@media (min-width: 413px) and (max-width: 414px) {
  .lightbox-image-container .nav-arrow {
    display: block;
    top: 46.5%;
    transform: scale(0.80);
  }

  .lightbox-image-container .nav-arrow.left {
    left: calc(100% - 93.05%) /* pinned to the right edge of the 600px container */
  }

  .lightbox-image-container .nav-arrow.right {
    left: calc(100% - 18.10%) /* pinned to the right edge of the 600px container */
  }

  .lightbox-content {
    position: relative;
    /* Fixed width and height in pixels */
    width: 345px;  /* Adjust as needed */
    height: 345px; /* Adjust as needed */
  }

  .lightbox-close {
    width: 40px;
    height: 40px;
    top: -17px;
    right: -17px
  }
}

@media (min-width: 402px) and (max-width: 403px) {
  .lightbox-image-container .nav-arrow {
    display: block;
    top: 46.5%;
    transform: scale(0.80);
  }

  .lightbox-image-container .nav-arrow.left {
    left: calc(100% - 94.05%) /* pinned to the right edge of the 600px container */
  }

  .lightbox-image-container .nav-arrow.right {
    left: calc(100% - 17.20%) /* pinned to the right edge of the 600px container */
  }

  .lightbox-content {
    position: relative;
    /* Fixed width and height in pixels */
    width: 345px;  /* Adjust as needed */
    height: 345px; /* Adjust as needed */
  }

  .lightbox-close {
    width: 40px;
    height: 40px;
    top: -17px;
    right: -17px
  }
}

@media (min-width: 350px) and (max-width: 400px) {
  .lightbox-image-container .nav-arrow {
    display: block;
    top: 46.5%;
    transform: scale(0.80);
  }

  .lightbox-image-container .nav-arrow.left {
    left: calc(100% - 97.25%) /* pinned to the right edge of the 600px container */
  }

  .lightbox-image-container .nav-arrow.right {
    left: calc(100% - 16.10%) /* pinned to the right edge of the 600px container */
  }

  .lightbox-content {
    position: relative;
    /* Fixed width and height in pixels */
    width: 320px;  /* Adjust as needed */
    height: 320px; /* Adjust as needed */
  }

  .lightbox-close {
    width: 35px;
    height: 35px;
    top: -15px;
    right: -15px
  }
}

@media (min-width: 375px) and (max-width: 376px) {
  .lightbox-image-container .nav-arrow {
    display: block;
    top: 46.5%;
    transform: scale(0.80);
  }

  .lightbox-image-container .nav-arrow.left {
    left: calc(100% - 94.65%) /* pinned to the right edge of the 600px container */
  }

  .lightbox-image-container .nav-arrow.right {
    left: calc(100% - 17.5%) /* pinned to the right edge of the 600px container */
  }

  .lightbox-content {
    position: relative;
    /* Fixed width and height in pixels */
    width: 325px;  /* Adjust as needed */
    height: 325px; /* Adjust as needed */
  }

  .lightbox-close {
    width: 35px;
    height: 35px;
    top: -15px;
    right: -15px
  }
}

@media (min-width: 360px) and (max-width: 361px) {
  .lightbox-image-container .nav-arrow {
    display: block;
    top: 46.5%;
    transform: scale(0.80);
  }

  .lightbox-image-container .nav-arrow.left {
    left: calc(100% - 96.35%) !important; /* pinned to the right edge of the 600px container */
  }

  .lightbox-image-container .nav-arrow.right {
    left: calc(100% - 16.1%) !important; /* pinned to the right edge of the 600px container */
  }

  .lightbox-content {
    position: relative;
    /* Fixed width and height in pixels */
    width: 325px;  /* Adjust as needed */
    height: 325px; /* Adjust as needed */
  }

  .lightbox-close {
    width: 35px;
    height: 35px;
    top: -15px;
    right: -15px
  }
}

@media (min-width: 344px) and (max-width: 345px) {
  .lightbox-image-container .nav-arrow {
    display: block;
    top: 46.5%;
    transform: scale(0.60);
  }

  .lightbox-image-container .nav-arrow.left {
    left: calc(100% - 99.95%) !important; /* pinned to the right edge of the 600px container */
  }

  .lightbox-image-container .nav-arrow.right {
    left: calc(100% - 13.7%) !important; /* pinned to the right edge of the 600px container */
  }

  .lightbox-content {
    position: relative;
    /* Fixed width and height in pixels */
    width: 325px;  /* Adjust as needed */
    height: 325px; /* Adjust as needed */
  }

  .lightbox-close {
    width: 35px;
    height: 35px;
    top: -15px;
    right: -15px
  }
}

@media (min-width: 299px) and (max-width: 349px) {
  .lightbox-image-container .nav-arrow {
    display: block;
    top: 46.5%;
    transform: scale(0.80);
  }

  .lightbox-image-container .nav-arrow.left {
    left: calc(100% - 95%) /* pinned to the right edge of the 600px container */
  }

  .lightbox-image-container .nav-arrow.right {
    left: calc(100% - 20.45%) /* pinned to the right edge of the 600px container */
  }

  .lightbox-content {
    position: relative;
    /* Fixed width and height in pixels */
    width: 260px;  /* Adjust as needed */
    height: 260px; /* Adjust as needed */
  }

  .lightbox-close {
    width: 35px;
    height: 35px;
    top: -15px;
    right: -15px
  }
}