@font-face 
{
  font-family: 'OpenSans-All';
  src: url(betuk/OpenSans-VariableFont_wdth,wght.ttf) format('truetype');
}

@font-face {
  font-family: 'Calibri';
  src: url(betuk/calibri.ttf) format('truetype');
}

@font-face {
  font-family: 'CalibriB';
  src: url(betuk/calibrib.ttf) format('truetype');
}

@font-face {
  font-family: 'CalibriL';
  src: url(betuk/calibril.ttf) format('truetype');
}

@font-face {
  font-family: 'Playfair';
  src: url(betuk/PlayfairDisplay-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'PlayfairM';
  src: url(betuk/PlayfairDisplay-Medium.ttf) format('truetype');
}

@font-face {
  font-family: 'CabinR';
  src: url(betuk/Cabin-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Lato';
  src: url(betuk/Lato-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'LatoL';
  src: url(betuk/Lato-Light.ttf) format('truetype');
}

@font-face {
  font-family: 'NotoSansL';
  src: url(betuk/NotoSans-Light.ttf) format('truetype');
}

@font-face {
  font-family: 'NotoSans';
  src: url(betuk/NotoSans-Thin.ttf) format('truetype');
}

/* CSS Color Variables */
:root {
  /* Text colors */
  --white: rgba(255, 255, 255, 0.95);
  --white-pure: white;
  --blue: #1f206b;
  --blue2: #111245;
  --blue2-transparent: #11124591;
  --blue-light: #2d2f9e;
  --blue-transparent: #1f206b80;
  --blue-border: rgba(31, 32, 107, 0.4);
  
  /* Accent colors */
  --gold: #caac02;
  --gold-light: #dbd6b8;
  --gold-medium: #c5c0a3;
  --gold-border: #a39e7c;
  --hatter: #d1cebf;
  
  /* Background colors */
  --beige: #dbd2aa;
  --beige-light: #cac4a9d8;
  --beige-light2: #cac4a98c;
  --beige-card: #f5f3e8;
  --button-bg: #afa98e42;
  --button-bg-hover: #afa98e69;
  --button-bg-hover-mobile: #a76f14;
  
  /* Shadow and hover colors */
  --shadow: rgba(0, 0, 0, 0.3);
  --shadow-card: rgba(31, 32, 107, 0.15);
  --shadow-card-hover: rgba(31, 32, 107, 0.25);
  --purple: #2d2f9e;
  
  /* Font Variables - consistent across all devices */
  --font-offer-title: 'PlayfairM';
  --font-offer-description: 'CalibriL';
  --font-offer-icon-title: 'NotoSansL';
  --font-offer-features: 'Calibri';
  --font-offer-price: 'CalibriB';
  --font-flip-text: 'NotoSans';
  --font-button-secondary: 'NotoSansL';
}

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

body {
  overflow-x: hidden;
  width: 100%;
}

/* Desktop styles (min-width: 768px) */
@media screen and (min-width: 768px) {
  :root {
    --section-height: clamp(400px, 50vw, 900px);
  }

  #offers-container {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative; /* Required for absolute positioning of arrows and pagination */
    background-color: #edeae1;
    min-height: 100vh;
    padding: clamp(8rem, 12vw, 14rem) clamp(2rem, 4vw, 4rem);
  }
  
  #offers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(2rem, 3vw, 3rem);
    max-width: 1400px;
    width: 100%;
    margin: clamp(2rem, 4vw, 4rem) auto;
    padding: 0 clamp(2rem, 4vw, 4rem);
  }
  
  .offer-card {
    background: var(--white-pure);
    border-radius: clamp(0.6rem, 1vw, 1.2rem);
    overflow: hidden;
    box-shadow: 0 clamp(0.25rem, 0.5vw, 0.5rem) clamp(1rem, 2vw, 2rem) var(--shadow-card);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0;
    transform: translateY(clamp(1rem, 2vw, 2rem));
    animation: slideInFromBottom 0.6s ease forwards;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  
  .offer-card:nth-child(1) { animation-delay: 0.1s; }
  .offer-card:nth-child(2) { animation-delay: 0.2s; }
  .offer-card:nth-child(3) { animation-delay: 0.3s; }
  .offer-card:nth-child(4) { animation-delay: 0.4s; }
  
  .offer-card:hover {
    transform: translateY(clamp(-0.3rem, -0.5vw, -0.5rem));
    box-shadow: 0 clamp(0.5rem, 1vw, 1rem) clamp(2rem, 3vw, 3rem) var(--shadow-card-hover);
  }
  
  .offer-media-section {
    position: relative;
    height: clamp(220px, 28vw, 350px);
    overflow: hidden;
  }
  
  .offer-media-section img,
  .offer-media-section video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  
  /* Picture element should fill container */
  .offer-media-section picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  
  /* Fit images properly in normal view - show full image */
  .offer-main-image {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .offer-card:hover .offer-media-section img,
  .offer-card:hover .offer-media-section video {
    transform: scale(1.05);
  }
  
  .offer-title-overlay {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: var(--white-pure);
    padding: clamp(2rem, 3vw, 3.5rem) clamp(1rem, 1.5vw, 1.5rem) clamp(1rem, 1.5vw, 1.5rem);
    font-family: var(--font-offer-title), serif;
    font-size: clamp(1.5rem, 2.2vw, 2.2rem);
    font-weight: 600;
    text-align: center;
    text-shadow: 0 clamp(0.05rem, 0.1vw, 0.1rem) clamp(0.2rem, 0.3vw, 0.3rem) rgba(0,0,0,0.5);
    width: 100%;
  }
  
  .offer-content-section {
    background-color: var(--beige-card);
    padding: clamp(1.5rem, 2.5vw, 2.5rem);
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  
  .offer-description {
    font-family: var(--font-offer-description), sans-serif;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    line-height: 1.6;
    color: #333;
    margin-bottom: clamp(1.5rem, 2vw, 2rem);
    text-align: justify;
  }

  /* Icon Squares - Blue Style */
  .offer-icons-row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: clamp(1rem, 2vw, 2rem);
    margin-bottom: clamp(1.5rem, 2vw, 2rem);
  }

  .offer-icon-square {
    flex: 1;
    max-width: clamp(120px, 12vw, 160px);
    min-height: clamp(100px, 10vw, 130px);
    border: solid clamp(0.05rem, 0.08vw, 0.1rem) var(--blue-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: clamp(0.4rem, 0.6vw, 0.8rem);
    background-color: rgba(31, 32, 107, 0.03);
    padding: clamp(0.8rem, 1vw, 1.2rem);
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.5s ease, transform 0.5s ease, background-color 0.3s ease;
  }

  .offer-icon-square.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .offer-icon-square:hover {
    background-color: rgba(31, 32, 107, 0.08);
  }

  .offer-icon-square img {
    width: clamp(40px, 4vw, 55px);
    height: clamp(40px, 4vw, 55px);
    object-fit: contain;
    margin-bottom: clamp(0.5rem, 0.8vw, 0.8rem);
    filter: brightness(0) saturate(100%) invert(12%) sepia(50%) saturate(3000%) hue-rotate(230deg) brightness(80%) contrast(100%);
  }

  .offer-icon-title {
    font-family: var(--font-offer-icon-title), sans-serif;
    font-size: clamp(0.75rem, 0.9vw, 1rem);
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: clamp(0.02rem, 0.03vw, 0.04rem);
  }
  
  /* Features list - Two columns */
  .offer-features {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: clamp(1.5rem, 2vw, 2rem);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.4rem, 0.6vw, 0.6rem) clamp(1.5rem, 2vw, 2.5rem);
  }
  
  .offer-features li {
    font-family: var(--font-offer-features), sans-serif;
    font-size: clamp(0.8rem, 0.95vw, 1rem);
    color: #555;
    padding-left: clamp(1.3rem, 1.5vw, 1.5rem);
    position: relative;
  }
  
  .offer-features li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(0.8rem, 1vw, 1rem);
    height: clamp(0.8rem, 1vw, 1rem);
    background-image: url('icons/check.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .offer-price {
    font-family: var(--font-offer-price), sans-serif;
    font-size: clamp(1.1rem, 1.4vw, 1.5rem);
    color: var(--blue);
    font-weight: bold;
    text-align: center;
    margin-top: auto;
    padding-top: clamp(1rem, 1.2vw, 1.5rem);
    border-top: clamp(0.03rem, 0.05vw, 0.05rem) solid #ddd;
  }
  
  .offer-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: clamp(0.7rem, 1.5vw, 1rem) clamp(1.2rem, 2.5vw, 1.8rem);
    background-color: var(--blue-transparent);
    color: var(--white-pure);
    border: clamp(0.05rem, 0.08vw, 0.1rem) solid var(--blue-border);
    border-radius: clamp(0.3rem, 0.5vw, 0.5rem);
    font-family: var(--font-offer-description), sans-serif;
    font-size: clamp(0.85rem, 1.5vw, 1.05rem);
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: clamp(1rem, 2vw, 1.5rem);
    width: 100%;
    box-sizing: border-box;
  }
  
  .offer-contact-btn:hover {
    background-color: var(--blue-light);
    border-color: var(--blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow);
  }
  
  .offer-contact-btn:focus {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
  
  /* ===========================================
     EXPANDABLE OFFER CARD STYLES
     =========================================== */

  /* View/Close Details Buttons */
  .view-offer-details-btn,
  .close-offer-details-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: clamp(0.7rem, 1.5vw, 1rem) clamp(1.2rem, 2.5vw, 1.8rem);
    background-color: var(--blue);
    color: var(--white-pure);
    border: none;
    border-radius: clamp(0.3rem, 0.5vw, 0.5rem);
    font-family: var(--font-offer-description), sans-serif;
    font-size: clamp(0.85rem, 1.5vw, 1.05rem);
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: clamp(1rem, 2vw, 1.5rem);
    width: 100%;
  }

  .view-offer-details-btn:hover,
  .close-offer-details-btn:hover {
    background-color: var(--purple);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow);
  }

  .view-offer-details-btn:focus {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }

  .close-offer-details-btn:focus,
  .close-offer-details-btn:active,
  .close-offer-details-btn:hover,
  .close-offer-details-btn:visited {
    outline: none !important;
  }

  .close-offer-details-btn {
    position: absolute;
    top: clamp(1rem, 2vw, 1.5rem);
    right: clamp(1rem, 2vw, 1.5rem);
    z-index: 10;
    margin-top: 0;
    padding: clamp(0.5rem, 1vw, 0.7rem) clamp(0.8rem, 1.5vw, 1.2rem);
    width: auto;
    outline: none !important;
  }

  .close-offer-details-btn .btn-icon {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
  }

  /* Hide icons, extended description, features, price, and close button in normal view */
  .offer-icons-row {
    display: none !important;
  }

  .offer-extended-description {
    display: none;
  }

  .close-offer-details-btn {
    display: none;
  }
  
  .offer-features {
    display: none !important;
  }
  
  .offer-price {
    display: none !important;
  }

  /* ===========================================
     MODAL OVERLAY FOR EXPANDED OFFERS
     =========================================== */
  
  .offer-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 3vw, 2rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: fadeInOverlay 0.3s ease forwards;
  }
  
  .offer-modal-overlay.active {
    display: flex;
  }
  
  @keyframes fadeInOverlay {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  .offer-modal-content {
    position: relative;
    width: 100%;
    max-width: clamp(600px, 85vw, 1200px);
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--white-pure);
    border-radius: clamp(0.6rem, 1vw, 1.2rem);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    z-index: 100000;
  }
  
  @keyframes modalSlideIn {
    from {
      transform: translateY(-50px) scale(0.95);
      opacity: 0;
    }
    to {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  }
  
  /* Scrollbar for modal content */
  .offer-modal-content::-webkit-scrollbar {
    width: 10px;
  }
  
  .offer-modal-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 5px;
  }
  
  .offer-modal-content::-webkit-scrollbar-thumb {
    background: var(--blue2);
    border-radius: 5px;
  }
  
  .offer-modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--purple);
  }
  
  /* Expanded offer card state - now in modal */
  .offer-card.expanded {
    min-width: 100%;
    max-width: 100%;
    box-shadow: none;
    border: none;
    display: flex;
    flex-direction: column;
  }

  /* Expanded media section */
  .offer-card.expanded .offer-media-section {
    height: clamp(350px, 45vh, 500px);
    position: relative;
  }
  
  /* Video in expanded modal view */
  .offer-card.expanded .offer-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Image in expanded modal view - fill all available space */
  .offer-card.expanded .offer-main-image {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Hide title overlay in expanded view by default */
  .offer-card.expanded .offer-title-overlay {
    display: none !important;
  }
  
  /* Show title overlay in expanded view for all kepstilus values */
  .offer-card.expanded .offer-title-overlay.show-title-overlay {
    display: block !important;
    position: absolute;
    top: 50%;
    left: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    padding: clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 3vw, 2.5rem);
    border-radius: clamp(0.5rem, 0.8vw, 0.8rem);
    text-align: center;
    width: auto;
    max-width: 80%;
  }

  /* Content section becomes flex container in expanded view to control order */
  .offer-card.expanded .offer-content-section {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: clamp(3.5rem, 5vw, 4.5rem);
    padding-bottom: clamp(2rem, 3vw, 3rem);
    gap: clamp(1.5rem, 2.5vw, 2.5rem);
  }

  /* Hide normal description and view button in expanded view */
  .offer-card.expanded .offer-description {
    display: none !important;
  }

  .offer-card.expanded .view-offer-details-btn {
    display: none !important;
  }

  /* Show and position close button in expanded view - Modal context */
  .offer-card.expanded .close-offer-details-btn {
    display: inline-flex !important;
    position: absolute;
    top: clamp(1rem, 2vw, 1.5rem);
    right: clamp(1rem, 2vw, 1.5rem);
    z-index: 100001;
    margin-top: 0;
    padding: clamp(0.5rem, 1vw, 0.7rem) clamp(0.8rem, 1.5vw, 1.2rem);
    width: auto;
  }

  /* Show and order elements in expanded view */
  /* Order: 1. Extended description, 2. Icons, 3. Facilities, 4. Price */
  .offer-card.expanded .offer-extended-description {
    display: block !important;
    order: 1;
    animation: fadeInContent 0.4s ease 0.2s forwards;
    opacity: 0;
    margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
  }

  .offer-card.expanded .offer-icons-row {
    display: flex !important;
    order: 2;
    margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
  }

  .offer-card.expanded .offer-features {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.4rem, 0.6vw, 0.6rem) clamp(1.5rem, 2vw, 2.5rem);
    order: 3;
    margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
  }

  .offer-card.expanded .offer-price {
    display: block !important;
    order: 4;
    margin-top: clamp(1rem, 1.5vw, 1.5rem);
  }
  
  .offer-card.expanded .offer-contact-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    order: 5;
    margin-top: clamp(1rem, 1.5vw, 1.5rem);
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    padding: clamp(0.8rem, 1.2vw, 1rem) clamp(1.3rem, 2vw, 1.8rem);
    background-color: var(--blue);
    border: none;
    width: auto;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .offer-card.expanded .offer-contact-btn:hover {
    background-color: var(--purple);
  }
  
  .offer-share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: clamp(0.6rem, 1vw, 0.8rem) clamp(1rem, 1.5vw, 1.5rem);
    background-color: transparent;
    color: var(--blue);
    border: clamp(0.05rem, 0.08vw, 0.1rem) solid var(--blue-border);
    border-radius: clamp(0.3rem, 0.5vw, 0.5rem);
    font-family: var(--font-offer-description), sans-serif;
    font-size: clamp(0.75rem, 1.2vw, 0.95rem);
    font-weight: 500;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: clamp(0.5rem, 1vw, 0.8rem);
    width: auto;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .offer-share-link:hover {
    background-color: var(--blue-transparent);
    border-color: var(--blue);
    transform: translateY(-2px);
  }
  
  .offer-share-link:focus {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }

  @keyframes fadeInContent {
    to {
      opacity: 1;
    }
  }

  /* Extended description styling */
  .offer-extended-description {
    font-family: var(--font-offer-description), sans-serif;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    line-height: 1.7;
    color: #333;
    margin-top: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: clamp(1.5rem, 2vw, 2rem);
    text-align: justify;
    padding: clamp(1rem, 2vw, 1.5rem);
    background: rgba(255, 255, 255, 0.5);
    border-radius: clamp(0.3rem, 0.5vw, 0.5rem);
    border-left: 4px solid var(--blue);
  }
  
  @keyframes slideInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes slideInFromLeft {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes slideInFromBottom {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Offer section (ajanlat) */
  #ajanlat {
     width: 100%;
     min-height: var(--section-height);
     background-image: url("./estimainiris.avif");
     background-size: cover;
     background-position: center center;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: transform 0.3s ease;
     overflow: hidden;
  }

  .ajanlat-tartalom {
     text-align: center;
     width: 100%;
     /*max-width: 1400px;*/
     padding: clamp(1rem, 3vw, 2rem);
  }

  .text-wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: clamp(0.8rem, 1.5vw, 2rem);
     flex-wrap: wrap;
  }

  .flip-text {
     color: var(--white-pure);
     font-family: var(--font-flip-text);
     font-size: clamp(1.8rem, 3vw, 5rem);
     letter-spacing: clamp(0.05rem, 0.08vw, 0.1rem);
     text-transform: uppercase;
     opacity: 0;
     transform: rotateX(30deg);
     transform-origin: bottom;
     margin: 0;
  }

  .flip-text.animate {
     animation: flipIn 0.5s forwards;
  }

  .flip-text.delayed {
     animation-delay: 0.5s;
  }

  @keyframes flipIn {
     0% {
        opacity: 0;
        transform: rotateX(30deg);
     }
     100% {
        opacity: 1;
        transform: rotateX(0deg);
     }
  }

  #agomb {
     border: solid clamp(0.05rem, 0.12vw, 0.2rem) #c4bda0;
     background-color: var(--button-bg);
     color: var(--white-pure);
     text-decoration: none;
     padding: clamp(1rem, 1.1vw, 1.5rem) clamp(1.5rem, 1.2vw, 2.5rem);
     border-radius: clamp(0.4rem, 0.6vw, 0.8rem);
     font-family: var(--font-button-secondary);
     font-size: clamp(1rem, 1vw, 1.3rem);
     text-transform: uppercase;
     transition: all 0.6s ease;
     opacity: 0;
     display: inline-block;
     margin-top: clamp(1.5rem, 8vw, 8.5rem);
  }

  #agomb.show {
     animation: fadeIn 0.5s forwards;
     animation-delay: 1.5s;
  }

  @keyframes fadeIn {
     0% {
        opacity: 0;
     }
     100% {
        opacity: 1;
     }
  }

  #agomb:hover {
     background-color: var(--button-bg-hover);
     transform: translateY(-2px);
  }

  .details-button {
    display: none;
  }
  
}

/* Tablet adjustments */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  :root {
    --section-height: clamp(500px, 55vw, 650px);
  }

  #offers-container {
    padding-top: clamp(10rem, 15vw, 12rem);
    background-attachment: fixed;
  }

  #offers-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 900px;
  }

  .offer-media-section {
    height: clamp(200px, 30vw, 280px);
  }

  .offer-title-overlay {
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  }

  .offer-description {
    font-size: clamp(0.9rem, 1.3vw, 1.1rem);
  }

  .offer-icon-square {
    max-width: clamp(100px, 14vw, 140px);
    min-height: clamp(90px, 12vw, 120px);
  }

  .offer-icon-square img {
    width: clamp(35px, 5vw, 50px);
    height: clamp(35px, 5vw, 50px);
  }

  .offer-icon-title {
    font-size: clamp(0.7rem, 1.1vw, 0.9rem);
  }

  .offer-features li {
    font-size: clamp(0.8rem, 1.2vw, 0.95rem);
  }

  .text-wrapper {
    flex-direction: row;
  }
}

/* Desktop-specific styles */
@media screen and (min-width: 1024px) {
  #offers-container {
    background-attachment: fixed;
  }
}

/* Mobile-specific adjustments */
@media screen and (max-width: 767px) {
  body {
    margin-top: 0;
  }

  #offers-container {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: #edeae1;
    min-height: 100vh;
    padding: clamp(5rem, 15vw, 8rem) clamp(1rem, 4vw, 2rem);
  }
  
  #offers-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 2rem);
    width: 100%;
    max-width: 600px;
    margin: clamp(1.5rem, 4vw, 3rem) auto;
    padding: 0 clamp(1rem, 4vw, 2rem);
  }
  
  .offer-card {
    background: var(--white-pure);
    border-radius: clamp(0.2rem, 1.6vw, 1.2rem);
    overflow: hidden;
    box-shadow: 0 clamp(0.3rem, 1vw, 0.5rem) clamp(1.5rem, 4vw, 2.5rem) var(--shadow-card);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0;
    transform: translateY(clamp(1.5rem, 4vw, 2.5rem));
    animation: slideInFromBottomMobile 0.6s ease forwards;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  
  @keyframes slideInFromBottomMobile {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .offer-card:nth-child(1) { animation-delay: 0.1s; }
  .offer-card:nth-child(2) { animation-delay: 0.2s; }
  .offer-card:nth-child(3) { animation-delay: 0.3s; }
  .offer-card:nth-child(4) { animation-delay: 0.4s; }
  
  .offer-media-section {
    position: relative;
    height: clamp(180px, 45vw, 280px);
    overflow: hidden;
  }
  
  .offer-media-section img,
  .offer-media-section video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Picture element should fill container - Mobile */
  .offer-media-section picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  
  /* Fit images properly in normal view - Mobile - show full image */
  .offer-main-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .offer-title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: var(--white-pure);
    padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 3vw, 1.5rem) clamp(1rem, 2.5vw, 1.5rem);
    font-family: var(--font-offer-title), serif;
    font-size: clamp(1.3rem, 5vw, 1.8rem);
    font-weight: 600;
    text-align: center;
    text-shadow: 0 clamp(0.1rem, 0.2vw, 0.15rem) clamp(0.3rem, 0.6vw, 0.5rem) rgba(0,0,0,0.5);
  }
  
  .offer-content-section {
    background-color: var(--beige-card);
    padding: clamp(1.2rem, 4vw, 2rem);
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  
  .offer-description {
    font-family: var(--font-offer-description), sans-serif;
    font-size: clamp(0.9rem, 3vw, 1.1rem);
    line-height: 1.5;
    color: #333;
    margin-bottom: clamp(1.2rem, 3vw, 1.5rem);
    text-align: justify;
    flex: 1;
  }

  /* Icon Squares - Mobile */
  .offer-icons-row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: clamp(0.6rem, 2vw, 1rem);
    margin-bottom: clamp(1.2rem, 3vw, 1.5rem);
  }

  .offer-icon-square {
    flex: 1;
    max-width: clamp(90px, 25vw, 120px);
    min-height: clamp(80px, 22vw, 110px);
    border: solid clamp(0.05rem, 0.1vw, 0.08rem) var(--blue-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: clamp(0.5rem, 1.5vw, 0.8rem);
    background-color: rgba(31, 32, 107, 0.03);
    padding: clamp(0.5rem, 1.5vw, 0.8rem);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .offer-icon-square.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .offer-icon-square img {
    width: clamp(28px, 8vw, 40px);
    height: clamp(28px, 8vw, 40px);
    object-fit: contain;
    margin-bottom: clamp(0.3rem, 1vw, 0.5rem);
    filter: brightness(0) saturate(100%) invert(12%) sepia(50%) saturate(3000%) hue-rotate(230deg) brightness(80%) contrast(100%);
  }

  .offer-icon-title {
    font-family: var(--font-offer-icon-title), sans-serif;
    font-size: clamp(0.6rem, 2.2vw, 0.85rem);
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: clamp(0.01rem, 0.03vw, 0.03rem);
  }
  
  /* Features list - Single column on mobile */
  .offer-features {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: clamp(1.2rem, 3vw, 1.5rem);
    display: flex;
    flex-direction: column;
    gap: clamp(0.4rem, 1.2vw, 0.6rem);
  }
  
  .offer-features li {
    font-family: var(--font-offer-features), sans-serif;
    font-size: clamp(0.85rem, 2.8vw, 1rem);
    color: #555;
    padding-left: clamp(1.5rem, 5vw, 1.8rem);
    position: relative;
  }
  
  .offer-features li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(0.9rem, 3vw, 1.1rem);
    height: clamp(0.9rem, 3vw, 1.1rem);
    background-image: url('icons/check.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .offer-price {
    font-family: var(--font-offer-price), sans-serif;
    font-size: clamp(1.1rem, 3.5vw, 1.4rem);
    color: var(--blue);
    font-weight: bold;
    text-align: center;
    margin-top: auto;
    padding-top: clamp(1rem, 2.5vw, 1.5rem);
    border-top: clamp(0.05rem, 0.1vw, 0.08rem) solid #ddd;
  }
  
  .offer-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.3rem, 1.5vw, 0.5rem);
    padding: clamp(0.8rem, 2.5vw, 1rem) clamp(1.2rem, 3.5vw, 1.8rem);
    background-color: var(--blue-transparent);
    color: var(--white-pure);
    border: clamp(0.05rem, 0.1vw, 0.08rem) solid var(--blue-border);
    border-radius: clamp(0.4rem, 1.5vw, 0.6rem);
    font-family: var(--font-button-secondary);
    font-size: clamp(0.85rem, 2.8vw, 1rem);
    font-weight: 300;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: clamp(0.02rem, 0.05vw, 0.04rem);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: clamp(1rem, 3vw, 1.5rem);
    width: 100%;
    box-sizing: border-box;
  }
  
  .offer-contact-btn:hover {
    background-color: var(--blue-light);
    border-color: var(--blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow);
  }
  
  .offer-contact-btn:focus {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }
  

  /* ===========================================
     EXPANDABLE OFFER CARD STYLES - MOBILE
     =========================================== */

  /* View/Close Details Buttons - Mobile */
  .view-offer-details-btn,
  .close-offer-details-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.3rem, 1.5vw, 0.5rem);
    padding: clamp(0.8rem, 2.5vw, 1rem) clamp(1.2rem, 3.5vw, 1.8rem);
    background-color: var(--blue);
    color: var(--white-pure);
    border: none;
    border-radius: clamp(0.4rem, 1.5vw, 0.6rem);
    font-family: var(--font-button-secondary);
    font-size: clamp(0.85rem, 2.8vw, 1rem);
    font-weight: 300;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: clamp(1rem, 3vw, 1.5rem);
    width: 100%;
    text-transform: uppercase;
    letter-spacing: clamp(0.02rem, 0.05vw, 0.04rem);
  }

  .view-offer-details-btn:hover,
  .close-offer-details-btn:hover {
    background-color: var(--purple);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow);
  }

  .view-offer-details-btn:focus {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }

  .close-offer-details-btn:focus,
  .close-offer-details-btn:active,
  .close-offer-details-btn:hover,
  .close-offer-details-btn:visited {
    outline: none !important;
  }

  .close-offer-details-btn {
    position: absolute;
    top: clamp(0.8rem, 2.5vw, 1.2rem);
    right: clamp(0.8rem, 2.5vw, 1.2rem);
    z-index: 20;
    margin-top: 0;
    padding: clamp(0.5rem, 1.5vw, 0.7rem) clamp(0.8rem, 2.5vw, 1.2rem);
    width: auto;
    outline: none !important;
  }

  .btn-icon {
    font-size: clamp(1.2rem, 4vw, 1.5rem);
    line-height: 1;
  }

  .close-offer-details-btn .btn-icon {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  /* Hide icons, extended description, features, price, and close button in normal view - Mobile */
  .offer-icons-row {
    display: none !important;
  }

  .offer-extended-description {
    display: none;
  }

  .close-offer-details-btn {
    display: none;
  }
  
  .offer-features {
    display: none !important;
  }
  
  .offer-price {
    display: none !important;
  }

  /* Modal adjustments for mobile */
  .offer-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: -webkit-fill-available;
    padding: clamp(0.5rem, 2vw, 1rem);
    align-items: flex-start;
    padding-top: clamp(1rem, 3vw, 2rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .offer-modal-overlay.active {
    display: flex;
  }
  
  .offer-modal-content {
    max-width: 95vw;
    max-height: none;
    height: auto;
    min-height: auto;
    border-radius: clamp(0.8rem, 2vw, 1rem);
    margin: 0 auto;
    margin-bottom: clamp(1rem, 3vw, 2rem);
    overflow: visible;
  }
  
  .offer-card.expanded {
    overflow: visible;
  }
  
  .offer-card.expanded .offer-content-section {
    overflow: visible;
  }
  
  /* Expanded offer card state in modal - Mobile */
  .offer-card.expanded {
    min-width: 100%;
    max-width: 100%;
    box-shadow: none;
    border: none;
    display: flex;
    flex-direction: column;
  }

  /* Expanded media section - Mobile */
  .offer-card.expanded .offer-media-section {
    height: clamp(300px, 60vw, 450px);
    position: relative;
  }
  
  /* Video in expanded modal view - Mobile */
  .offer-card.expanded .offer-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Image in expanded modal view - fill all available space - Mobile */
  .offer-card.expanded .offer-main-image {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Hide title overlay in expanded view by default - Mobile */
  .offer-card.expanded .offer-title-overlay {
    display: none !important;
  }
  
  /* Show title overlay in expanded view for all kepstilus values - Mobile */
  .offer-card.expanded .offer-title-overlay.show-title-overlay {
    display: block !important;
    position: absolute;
    top: 50%;
    left: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    padding: clamp(1rem, 3vw, 1.5rem) clamp(1.5rem, 4vw, 2rem);
    border-radius: clamp(0.4rem, 1.5vw, 0.6rem);
    width: auto;
    max-width: 85%;
    font-size: clamp(1.4rem, 5.5vw, 2rem);
    text-align: center;
  }

  /* Content section becomes flex container in expanded view - Mobile */
  .offer-card.expanded .offer-content-section {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: clamp(3.5rem, 6vw, 4.5rem);
    padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
    gap: clamp(1.2rem, 3vw, 2rem);
  }

  /* Hide normal description and view button in expanded view - Mobile */
  .offer-card.expanded .offer-description {
    display: none !important;
  }

  .offer-card.expanded .view-offer-details-btn {
    display: none !important;
  }

  /* Show and position close button in expanded view - Mobile in modal */
  .offer-card.expanded .close-offer-details-btn {
    display: inline-flex !important;
    position: absolute;
    top: clamp(0.8rem, 2.5vw, 1.2rem);
    right: clamp(0.8rem, 2.5vw, 1.2rem);
    z-index: 100001;
    margin-top: 0;
    padding: clamp(0.5rem, 1.5vw, 0.7rem) clamp(0.8rem, 2.5vw, 1.2rem);
    width: auto;
  }

  /* Show and order elements in expanded view - Mobile */
  /* Order: 1. Extended description, 2. Icons, 3. Facilities, 4. Price */
  .offer-card.expanded .offer-extended-description {
    display: block !important;
    order: 1;
    animation: fadeInContentMobile 0.4s ease 0.2s forwards;
    opacity: 0;
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
  }

  .offer-card.expanded .offer-icons-row {
    display: flex !important;
    order: 2;
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
  }

  .offer-card.expanded .offer-features {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: clamp(0.4rem, 1.2vw, 0.6rem);
    order: 3;
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
  }

  .offer-card.expanded .offer-price {
    display: block !important;
    order: 4;
    margin-top: clamp(0.8rem, 2vw, 1.2rem);
  }
  
  .offer-card.expanded .offer-contact-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    order: 5;
    margin-top: clamp(0.8rem, 2vw, 1.2rem);
    font-size: clamp(0.95rem, 3vw, 1.1rem);
    padding: clamp(0.8rem, 2.5vw, 1rem) clamp(1.2rem, 3.5vw, 1.7rem);
    background-color: var(--blue);
    border: none;
    width: auto;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .offer-card.expanded .offer-contact-btn:hover {
    background-color: var(--purple);
  }
  
  .offer-card.expanded .offer-share-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: clamp(0.6rem, 2vw, 0.8rem) clamp(1rem, 3vw, 1.5rem);
    background-color: transparent;
    color: var(--blue);
    border: clamp(0.05rem, 0.1vw, 0.08rem) solid var(--blue-border);
    border-radius: clamp(0.4rem, 1.5vw, 0.6rem);
    font-family: var(--font-offer-description), sans-serif;
    font-size: clamp(0.75rem, 2.2vw, 0.9rem);
    font-weight: 500;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: clamp(0.5rem, 1.5vw, 0.8rem);
    width: auto;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    order: 6;
  }
  
  .offer-card.expanded .offer-share-link:hover {
    background-color: var(--blue-transparent);
    border-color: var(--blue);
    transform: translateY(-2px);
  }
  
  .offer-card.expanded .offer-share-link:focus {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
  }

  @keyframes fadeInContentMobile {
    to {
      opacity: 1;
    }
  }

  /* Extended description styling - Mobile */
  .offer-extended-description {
    font-family: var(--font-offer-description), sans-serif;
    font-size: clamp(0.9rem, 3vw, 1.1rem);
    line-height: 1.7;
    color: #333;
    padding: clamp(1rem, 3vw, 1.5rem);
    margin-top: clamp(0.8rem, 2.5vw, 1.2rem);
    margin-bottom: clamp(1.2rem, 3vw, 1.5rem);
    background: rgba(255, 255, 255, 0.5);
    border-radius: clamp(0.3rem, 1.5vw, 0.5rem);
    border-left: 4px solid var(--blue);
    text-align: justify;
  }

  /* Ajanlat section - Mobile */
  #ajanlat {
    width: 100%;
    height: auto;
    min-height: clamp(400px, 90vh, 650px);
    background-image: url("./estimainiris.avif");
    background-size: cover;
    background-position: center center;
    background-attachment: scroll;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    overflow: hidden;
    padding: clamp(3rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
  }

 .ajanlat-tartalom {
    text-align: center;
    width: 100%;
    max-width: 90%;
    padding: clamp(1rem, 3vw, 2rem);
  }

 .flip-container {
    margin-bottom: clamp(2rem, 5vw, 4rem);
 }

 .text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
    margin-bottom: clamp(5rem, 5vw, 3rem);
  }

 .flip-text {
    color: var(--white-pure);
    font-family: var(--font-flip-text);
    font-size: clamp(1.5rem, 6vmin, 2rem);
    text-transform: uppercase;
    margin: 0;
    opacity: 0;
    transform: rotateX(90deg);
    transform-origin: bottom;
    width: 100%;
    line-height: 1.3;
  }

 .flip-text.animate {
    animation: flipIn 0.5s forwards;
  }

 .flip-text.delayed {
    animation-delay: 0.5s;
  }

 @keyframes flipIn {
    0% {
       opacity: 0;
       transform: rotateX(90deg);
    }
    100% {
       opacity: 1;
       transform: rotateX(0deg);
    }
  }  

 #agomb {
    border: solid clamp(0.05rem, 0.1vmin, 0.1rem) #c4bda0;
    background-color: var(--button-bg);
    color: var(--white-pure);
    text-decoration: none;
    padding: clamp(0.8rem, 2vw, 1.5rem) clamp(1rem, 4vw, 2rem);
    border-radius: clamp(0.4rem, 0.8vw, 0.8rem);
    font-family: var(--font-button-secondary);
    font-size: clamp(0.7rem, 2vmin, 1.1rem);
    text-transform: uppercase;
    transition: all 0.6s ease;
    opacity: 0;
    display: inline-block;
  }

 #agomb.show {
    animation: fadeIn 0.5s forwards;
    animation-delay: 1.5s;
  }  

 @keyframes fadeIn {
    0% {
       opacity: 0;
    }
    100% {
       opacity: 1;
    }
  }

 #agomb:hover {
    background-color: var(--button-bg);
    transform: translateY(-2px);
  }
  
}

/* Small tablet adjustments (481px - 767px) */
@media screen and (min-width: 481px) and (max-width: 767px) {
  #offers-container {
    padding-top: clamp(7rem, 18vw, 10rem);
  }

  #offers-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 700px;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    padding: 0 clamp(1.5rem, 4vw, 2.5rem);
  }

  .offer-card {
    border-radius: clamp(0.8rem, 1.5vw, 1rem);
    width: 100%;
  }

  .offer-media-section {
    height: clamp(200px, 40vw, 280px);
  }

  .offer-title-overlay {
    font-size: clamp(1.4rem, 4.5vw, 1.9rem);
  }

  .offer-description {
    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
  }

  .offer-icon-square {
    max-width: clamp(100px, 22vw, 130px);
    min-height: clamp(90px, 20vw, 115px);
  }

  /* Expandable offer styles for small tablets */
  .view-offer-details-btn,
  .close-offer-details-btn {
    padding: clamp(0.8rem, 2vw, 1rem) clamp(1.2rem, 3vw, 1.8rem);
    font-size: clamp(0.9rem, 2.5vw, 1.05rem);
  }

  .offer-card.expanded .offer-content-section {
    padding-top: clamp(3.5rem, 5.5vw, 4.5rem);
  }

  .offer-card.expanded .offer-media-section {
    height: clamp(320px, 50vw, 420px);
  }

  .offer-card.expanded .offer-title-overlay {
    display: none !important;
  }
  
  /* Show title overlay for small tablets for all kepstilus values */
  .offer-card.expanded .offer-title-overlay.show-title-overlay {
    display: block !important;
    font-size: clamp(1.5rem, 5vw, 2.2rem);
    max-width: 80%;
  }

  .offer-card.expanded .offer-extended-description {
    font-size: clamp(0.95rem, 2.5vw, 1.15rem);
  }

  .offer-icon-square img {
    width: clamp(32px, 7vw, 45px);
    height: clamp(32px, 7vw, 45px);
  }

  .offer-icon-title {
    font-size: clamp(0.65rem, 2vw, 0.85rem);
  }

  /* Two columns for features on small tablet */
  .offer-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.3rem, 1vw, 0.5rem) clamp(1rem, 3vw, 1.5rem);
    margin-bottom: clamp(1.2rem, 3vw, 1.5rem);
  }

  .offer-features li {
    font-size: clamp(0.9rem, 2.2vw, 1rem);
  }

  .offer-price {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
  }

  .text-wrapper {
    gap: clamp(1.2rem, 3.5vw, 2rem);
  }

  .columns-container {
    gap: clamp(2.5rem, 8vw, 4rem);
  }
  
}

/* Extra small mobile adjustments */
@media screen and (max-width: 360px) {
  #offers-container {
    padding: clamp(4rem, 12vw, 6rem) clamp(0.75rem, 3vw, 1.5rem);
  }

  #offers-grid {
    gap: clamp(1.5rem, 5vw, 2.5rem);
  }

  .offer-media-section {
    height: clamp(150px, 40vw, 200px);
  }

  .offer-title-overlay {
    font-size: clamp(1.1rem, 5vw, 1.5rem);
    padding: clamp(2rem, 5vw, 2.5rem) clamp(0.8rem, 2vw, 1rem) clamp(0.8rem, 2vw, 1rem);
  }

  .offer-content-section {
    padding: clamp(1rem, 3vw, 1.5rem);
  }

  .offer-description {
    font-size: clamp(0.8rem, 3vw, 1rem);
  }

  .offer-icon-square {
    max-width: clamp(75px, 23vw, 100px);
    min-height: clamp(70px, 20vw, 95px);
    padding: clamp(0.4rem, 1vw, 0.6rem);
  }

  .offer-icon-square img {
    width: clamp(22px, 7vw, 32px);
    height: clamp(22px, 7vw, 32px);
  }

  .offer-icon-title {
    font-size: clamp(0.5rem, 1.8vw, 0.7rem);
  }

  .offer-features li {
    font-size: clamp(0.75rem, 2.5vw, 0.9rem);
  }

  .offer-price {
    font-size: clamp(1rem, 3.5vw, 1.2rem);
  }

  .flip-text {
    font-size: clamp(1.3rem, 5.5vw, 2rem);
  }

  #agomb {
    padding: clamp(0.8rem, 2.5vw, 1.2rem) clamp(1.2rem, 3.5vw, 1.8rem);
    font-size: clamp(0.8rem, 2.5vw, 1rem);
  }
}

/* Very narrow viewports */
@media screen and (max-width: 320px) {
  #offers-container {
    padding: clamp(3.5rem, 10vw, 5rem) clamp(0.5rem, 2.5vw, 1rem);
  }
  #offers-grid {
    gap: clamp(1rem, 4vw, 2rem);
  }
  .offer-title-overlay {
    font-size: clamp(1rem, 4.5vw, 1.35rem);
  }
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Body scroll lock when modal is open */
body.modal-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
  height: 100%;
  padding-right: var(--scrollbar-width, 0);
}

/* Ensure modal is above everything on mobile */
@media screen and (max-width: 767px) {
  .offer-modal-overlay {
    display: none !important;
    position: fixed !important;
    z-index: 99999 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: -webkit-fill-available;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .offer-modal-overlay.active {
    display: flex !important;
  }
  
  .offer-modal-content {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  .offer-card.expanded {
    overflow: visible !important;
  }
  
  .offer-card.expanded .offer-content-section {
    overflow: visible !important;
    min-height: auto !important;
  }
  
  body.modal-open {
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* Print styles */
@media print {
  #offers-container,
  #ajanlat {
    background-image: none;
    background-color: var(--white-pure);
  }
  
  .desktop {
    display: none;
  }
  
  .offer-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ddd;
  }
  
  .offer-modal-overlay {
    display: none !important;
  }
}