/* =========================
   COSMOS – Styles
========================= */

/* Fonts */
@font-face{
  font-family:"Gilroy";
  src:url("public/fonts/Gilroy-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Gilroy";
  src:url("public/fonts/Gilroy-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Gilroy";
  src:url("public/fonts/Gilroy-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Gilroy";
  src:url("public/fonts/Gilroy-Black.woff2") format("woff2");
  font-weight:900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Myriad Pro";
  src:url("public/fonts/MyriadPro-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

/* Font Utilities */
.font-gilroy{ font-family:"Gilroy","Inter",system-ui,sans-serif; }
.font-gilroy-medium{ font-family:"Gilroy","Inter",system-ui,sans-serif; font-weight:500; }
.font-gilroy-bold{ font-family:"Gilroy","Inter",system-ui,sans-serif; font-weight:700; }
.font-gilroy-black{ font-family:"Gilroy","Inter",system-ui,sans-serif; font-weight:900; }
.font-myriad-regular{ font-family:"Myriad Pro","Gilroy","Inter",system-ui,sans-serif; font-weight:400; }

/* Additional Tailwind-like utilities for buttons */
.bg-green-500{ background-color:rgb(34,197,94); }
.bg-gray-500{ background-color:rgb(107,114,128); }
.bg-gray-600{ background-color:rgb(75,85,99); }
.border-2{ border-width:2px; }
.border-gray-400{ border-color:rgb(156,163,175); }
.hover\:bg-green-600:hover{ background-color:rgb(22,163,74); }
.bg-white{ background-color:rgb(255,255,255); }
.hover\:bg-white\/90:hover{ background-color:rgba(255,255,255,0.9); }
.text-white{ color:rgb(255,255,255); }
.text-black{ color:rgb(0,0,0); }
.px-6{ padding-left:1.5rem; padding-right:1.5rem; }
.py-3{ padding-top:0.75rem; padding-bottom:0.75rem; }
.px-8{ padding-left:2rem; padding-right:2rem; }
.py-4{ padding-top:1rem; padding-bottom:1rem; }
.rounded-full{ border-radius:9999px; }
.font-gilroy-bold{ font-family:"Gilroy","Inter",system-ui,sans-serif; font-weight:700; }
.transition-colors{ transition-property:color,background-color,border-color,text-decoration-color,fill,stroke; transition-timing-function:cubic-bezier(0.4,0,0.2,1); transition-duration:150ms; }
.duration-200{ transition-duration:200ms; }
.border{ border-width:1px; }
.border-white\/30{ border-color:rgba(255,255,255,0.3); }
.hover\:bg-white\/10:hover{ background-color:rgba(255,255,255,0.1); }
.bg-white\/10{ background-color:rgba(255,255,255,0.1); }
.hover\:bg-white\/20:hover{ background-color:rgba(255,255,255,0.2); }
.bg-white\/5{ background-color:rgba(255,255,255,0.05); }
.backdrop-blur-sm{ backdrop-filter:blur(4px); }
.rounded-2xl{ border-radius:1rem; }
.text-white\/80{ color:rgba(255,255,255,0.8); }
.text-white\/90{ color:rgba(255,255,255,0.9); }

/* Additional utilities for back button */
.fixed{ position:fixed; }
.top-4{ top:1rem; }
.top-20{ top:5rem; }
.top-40{ top:10rem; }
.left-4{ left:1rem; }
.bottom-4{ bottom:1rem; }
.right-4{ right:1rem; }
.z-50{ z-index:50; }
.inline-flex{ display:inline-flex; }
.items-center{ align-items:center; }
.gap-2{ gap:0.5rem; }
.px-4{ padding-left:1rem; padding-right:1rem; }
.py-2{ padding-top:0.5rem; padding-bottom:0.5rem; }
.backdrop-blur-sm{ backdrop-filter:blur(4px); }
.border-white\/20{ border-color:rgba(255,255,255,0.2); }
.border-black\/20{ border-color:rgba(0,0,0,0.2); }
.bg-white\/90{ background-color:rgba(255,255,255,0.9); }
.bg-white{ background-color:white; }
.bg-black{ background-color:black; }
.bg-black\/10{ background-color:rgba(0,0,0,0.1); }
.bg-black\/20{ background-color:rgba(0,0,0,0.2); }
.bg-black\/80{ background-color:rgba(0,0,0,0.8); }
.bg-black\/90{ background-color:rgba(0,0,0,0.9); }
.text-black{ color:black; }
.text-white{ color:white; }
.text-base{ font-size:1rem; line-height:1.5rem; }
.border-white\/20{ border-color:rgba(255,255,255,0.2); }
.shadow-lg{ box-shadow:0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); }
.w-4{ width:1rem; }
.h-4{ height:1rem; }
.w-5{ width:1.25rem; }
.h-5{ height:1.25rem; }
.w-6{ width:1.5rem; }
.h-6{ height:1.5rem; }
.hidden{ display:none; }

/* Responsive utilities */
@media (min-width:640px){
  .sm\:inline{ display:inline; }
  .sm\:hidden{ display:none; }
}

@media (min-width:1024px){
  .lg\:block{ display:block; }
  .lg\:inline{ display:inline; }
  .lg\:hidden{ display:none; }
  .lg\:top-6{ top:1.5rem; }
  .lg\:left-6{ left:1.5rem; }
  .lg\:bottom-auto{ bottom:auto; }
  .lg\:right-auto{ right:auto; }
  .lg\:px-6{ padding-left:1.5rem; padding-right:1.5rem; }
  .lg\:py-3{ padding-top:0.75rem; padding-bottom:0.75rem; }
  .lg\:w-5{ width:1.25rem; }
  .lg\:h-5{ height:1.25rem; }
  .lg\:w-6{ width:1.5rem; }
  .lg\:h-6{ height:1.5rem; }
  .lg\:bg-black\/10{ background-color:rgba(0,0,0,0.1); }
  .lg\:bg-black\/90{ background-color:rgba(0,0,0,0.9); }
  .lg\:hover\:bg-black:hover{ background-color:black; }
  .lg\:hover\:bg-black\/20:hover{ background-color:rgba(0,0,0,0.2); }
  .lg\:text-black{ color:black; }
  .lg\:text-white{ color:white; }
  .lg\:text-lg{ font-size:1.125rem; line-height:1.75rem; }
  .lg\:max-w-sm{ max-width:24rem; }
  .lg\:border-black\/20{ border-color:rgba(0,0,0,0.2); }
  .lg\:border-white\/20{ border-color:rgba(255,255,255,0.2); }
}

/* Base */
html{ scroll-behavior:smooth; }
html,body{ width:100%; margin:0; padding:0; overflow-x:hidden; }
body{ font-family:"Gilroy","Inter",system-ui,sans-serif; background-color:#000; color:#fff; min-height:100vh; }
img{ max-width:100%; height:auto; display:block; }
button, a, .dots button { transition: opacity .2s ease, transform .2s ease, background-color .2s ease, color .2s ease; }

/* Layout skipping for offscreen sections */
#tower, #home-section, #contacto, #flex { content-visibility:auto; contain-intrinsic-size: 1px 800px; }

/* ---------- Immersive 50/50 layout (Tower/Home only) ---------- */
@media (min-width:1024px){
  .two-up{
    display:grid !important;
    grid-template-columns:50vw 50vw !important;
    width:100vw !important; max-width:100vw !important;
    gap:0 !important; min-height:100vh !important; height:100vh !important;
  }
}

/* ---------- Contact section grid (normal centered layout) ---------- */
.contact-grid{ display:block; }
@media (min-width:1024px){
  .contact-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:3rem; align-items:center; max-width:1200px; margin:0 auto; height:auto;
  }
}

/* Galleries */
.gallery-track{
  display:flex !important; height:100% !important; width:100% !important;
  transition: transform .5s ease-out; cursor:grab;
}
.gallery-track:active{ cursor:grabbing; }
.gallery-track > div{
  flex-shrink:0 !important; flex-grow:0 !important; flex-basis:100% !important;
  height:100% !important; position:relative; width:100% !important;
  aspect-ratio: 16 / 9; /* avoids CLS; adjust to real asset ratio if different */
}
.gallery-track img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Ensure galleries visible */
#cosmos-tower-gallery, #cosmos-home-gallery,
#cosmos-tower-gallery .gallery-track, #cosmos-home-gallery .gallery-track{
  display:flex !important; visibility:visible !important; opacity:1 !important;
}

/* Touch helpers */
[id*="gallery"] > .relative{ overflow:hidden !important; touch-action: pan-y pinch-zoom; user-select:none; -webkit-user-select:none; }

/* Dots */
.dots{ z-index:10; pointer-events:auto; }
.dots button{
  background: rgba(255,255,255,.15);
  border:2px solid rgba(255,255,255,.6);
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  width:.75rem; height:.75rem; border-radius:9999px;
}
@media (min-width:1024px){ .dots button{ width:1.5rem; height:1.5rem; } }
.dots button:hover{ background: rgba(255,255,255,.2); transform:scale(1.1); }
.dots button.active{ background: rgba(255,255,255,.8); border-color: rgba(255,255,255,.8); }

/* Hero video */

#playOverlay{
  position:absolute; inset:0; margin:auto; height:5rem; width:5rem; border-radius:50%;
  background-color: rgba(0,0,0,.3); backdrop-filter: blur(8px);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.3);
  transition: opacity .2s ease, background-color .2s ease; border:none; cursor:pointer;
  z-index: 5;
}
#playOverlay:hover{ background-color: rgba(0,0,0,.8); }
#playOverlay.opacity-0{ opacity:0; pointer-events:none; }
#playOverlay .triangle{ display:block; margin-left:.25rem; border-style:solid; border-width:18px 0 18px 30px; border-color:transparent transparent transparent #ffffff; }

#home{ 
  margin-bottom:0; 
  height:100vh !important; 
  overflow:hidden; 
  margin-top:0; 
}
#home > div{ 
  height:100vh !important; 
  width:100%; 
}
#home video{ 
  width:100%; 
  height:100vh !important; 
  object-fit:cover; 
}

header.bg-black {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background-color: rgba(0,0,0,0.95);
  backdrop-filter: blur(10px);
}

@media (min-width: 1024px) {
  .preloader {
    display: none !important;
  }
  
  header.bg-black {
    display: none !important;
  }
  
  main#contenido {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  #home {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    height: 100vh !important;
    overflow: hidden;
    position: relative;
    top: 0;
    transform: translateY(0);
  }
  #home > div {
    height: 100vh !important;
    width: 100%;
    position: relative;
    top: 0;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  #home video {
    width: 100%;
    height: 100vh !important;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  .relative.flex.items-center.justify-center.text-white {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* Desktop thanks page layout */
@media (min-width: 1024px) {
  .mobile-thanks-main {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .mobile-thanks-section {
    width: 100%;
    max-width: 100%;
    padding: 2rem;
  }
}


/* Brand image sizing */
.image-cosmos-tower,.image-cosmos-flex,.image-cosmos-home{ width:12rem; }
@media (min-width:1024px){ .image-cosmos-tower,.image-cosmos-flex,.image-cosmos-home{ width:30vw; } }
@media (max-width:1024px){.image-cosmos-parking, .image-cosmos-shops {width: 43vw;}}
/* Form */
.contact-form input,
.contact-form textarea,
.contact-form select{
  background:transparent; border:none; outline:none; font-family:inherit; width:100%;
  padding:.75rem 0; text-align:center; color:#000; caret-color:#000; box-sizing:border-box; line-height:1.25;
  text-align-last: center;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{ color:rgba(0,0,0,.7); }
.contact-form select:invalid{ color:rgba(0,0,0,.7); }
.contact-form select{ cursor:pointer; }
.contact-form select option{ background:#fff; color:#000; text-align:center; }

.contact-form .border-b{ border-bottom:1px solid #000; margin-bottom:.75rem; }
@media (min-width:1024px){
  .contact-form .border-b{ margin-bottom:1rem; }
}
.contact-form button[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9999px; border:2px solid #000; background-color: #000; padding:.75rem 2.25rem;
  font-weight:600; letter-spacing:.02em; transition: all .2s ease;
  font-family:inherit; background:#000; cursor:pointer; color:#fff;
}
.contact-form button[type="submit"]:hover{ background-color:#fff; color:#000; }
.contact-form button[type="submit"]:disabled{ opacity:.6; cursor:not-allowed; }
.contact-form button[type="submit"]:focus-visible{ outline:3px solid #000; outline-offset:3px; }

/* Fixed contact buttons */
.fixed-contact-whatsapp{
  position:fixed; right:.75rem; top:82%; transform:translateY(-50%);
  z-index:50; background-color:rgb(37,211,102); color:#fff;
  border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(8px);
  padding:.3rem; border-radius:9999px; display:flex; align-items:center; text-decoration:none;
  transition: top 0.4s ease, transform 0.4s ease;
}
.fixed-contact-whatsapp:hover{ background-color:rgb(40,220,105); }
.fixed-contact-whatsapp img{ width:3.25rem; height:3.25rem; filter:brightness(0) invert(1);padding: 8px;}
.fixed-contact-questions{
  position:fixed; right:.75rem; top:80%; transform:translateY(4rem);
  z-index:50; background-color:rgba(0,0,0,.85); color:#fff;
  border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(8px);
  padding:.75rem 1.25rem; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-weight:600;
  transition: top 0.4s ease, transform 0.4s ease;
}
.fixed-contact-questions:hover{ background-color:#000; }
.fixed-contact-questions span{ font-size:1rem; }
.fixed-contact-whatsapp:focus-visible,
.fixed-contact-questions:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
.fixed-contact-whatsapp.footer-position{ top:25%; transform:translateY(0); }
.fixed-contact-questions.footer-position{ top:25%; transform:translateY(5rem); }

/* Utilities */
.select-reset{ -webkit-appearance:none; -moz-appearance:none; appearance:none; background:transparent; border:none; outline:none; font-family:inherit; display:block; }
.select-reset:focus{ outline:none; }

/* Responsive tweaks */
@media (min-width:640px){
  .fixed-contact-whatsapp{ right:1.25rem; }
  .fixed-contact-questions{ right:1.25rem; }
  #playOverlay{ height:6rem; width:6rem; }
  #playOverlay .triangle{ border-width:22px 0 22px 36px; }
}
@media (min-width:768px){
  #playOverlay{ height:7rem; width:7rem; }
  #playOverlay .triangle{ border-width:26px 0 26px 42px; }
}
@media (min-width:1024px){
  header.bg-black{ display:none; }
}

/* Print */
@media (print){
  .fixed-contact-whatsapp, .fixed-contact-questions, #playOverlay{ display:none !important; }
  body{ background:#fff !important; color:#000 !important; }
}

/* Desktop heading fix */
@media (min-width:1024px){
  .desktop-single-line{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #heroVideo, .gallery-track, button, a, .dots button, .fixed-contact-whatsapp, .fixed-contact-questions{ transition:none !important; }
}

/* Tower text */
@media (min-width:1024px){
  .tower-text{ padding: 7rem }
  .logo_cosmos{ width: 13rem; height: 15rem; }
  .logos-container{ display: flex; flex-direction: row; gap: 1rem; padding-top: 4rem; }
  .text-intro{ padding-bottom: 2rem; }

}
@media (max-width:1023px){
  .tower-text{ padding: 2rem }
  .logo_cosmos{ width: 5rem; height: 7rem;}
  .logos-container{ display: flex; column-gap: 3em; row-gap: 1em; flex-wrap: wrap; justify-content: center; align-items: center; padding-top: 2rem;}
}


.select-form {
  width: 100%;
  text-align: center;       /* centra el texto en navegadores que lo soportan */
  text-align-last: center;  /* centra la opción seleccionada */
}

.select-form option {
  text-align: center; /* centra las opciones en el dropdown */
}

/* Safari-specific fixes for select centering */
@supports (-webkit-appearance: none) {
  .select-form {
    text-align-last: center;
    -webkit-text-align-last: center;
  }
  
  .select-form option {
    text-align: center;
    -webkit-text-align: center;
  }
}

/* Additional Safari-specific styling for better centering */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .select-form {
    text-align-last: center !important;
    -webkit-text-align-last: center !important;
  }
  
  .select-form option {
    text-align: center !important;
    -webkit-text-align: center !important;
  }
}

/* ---------- Responsive Images ---------- */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Content images should be responsive */
img[data-src*="images/home/"], img[data-src*="images/tower/"] {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Gallery images maintain their current styling */
.gallery-track img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------- Gallery Loading States ---------- */
.gallery-loading {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Gallery images with fade-in effect */
.gallery-track img {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

.gallery-track img.loaded {
  opacity: 1;
}



/* Success Checkmark Animation */
.success-checkmark {
  animation: checkmark-appear 0.6s ease-out forwards;
  transform: scale(0);
  opacity: 0;
}

.checkmark-icon {
  animation: checkmark-draw 0.8s ease-out 0.3s forwards;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}

@keyframes checkmark-appear {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes checkmark-draw {
  0% {
    stroke-dashoffset: 30;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .success-checkmark,
  .checkmark-icon {
    animation: none;
    transform: scale(1);
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

/* Thanks page layout */
.thanks-main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.thanks-main {
  min-height: calc(100vh - var(--header-height, 7rem));
  height: calc(100vh - var(--header-height, 7rem));
  margin-top: var(--header-height, 7rem);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-thanks-section {
  width: 100%;
  max-width: 100%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100%;
}

/* Responsive utilities for thanks page */
.w-16{ width:4rem; }
.h-16{ height:4rem; }
.w-8{ width:2rem; }
.h-8{ height:2rem; }
.text-2xl{ font-size:1.5rem; line-height:2rem; }
.text-sm{ font-size:0.875rem; line-height:1.25rem; }
.py-2\.5{ padding-top:0.625rem; padding-bottom:0.625rem; }
.px-4{ padding-left:1rem; padding-right:1rem; }
.px-6{ padding-left:1.5rem; padding-right:1.5rem; }
.px-8{ padding-left:2rem; padding-right:2rem; }
.px-10{ padding-left:2.5rem; padding-right:2.5rem; }
.py-4{ padding-top:1rem; padding-bottom:1rem; }
.py-5{ padding-top:1.25rem; padding-bottom:1.25rem; }
.gap-2{ gap:0.5rem; }
.gap-3{ gap:0.75rem; }
.gap-4{ gap:1rem; }
.mb-3{ margin-bottom:0.75rem; }
.mb-6{ margin-bottom:1.5rem; }
.px-2{ padding-left:0.5rem; padding-right:0.5rem; }
.py-8{ padding-top:2rem; padding-bottom:2rem; }
.text-xs{ font-size:0.75rem; line-height:1rem; }
.text-lg{ font-size:1.125rem; line-height:1.75rem; }
.text-xl{ font-size:1.25rem; line-height:1.75rem; }
.text-5xl{ font-size:3rem; line-height:1; }
.w-6{ width:1.5rem; }
.h-6{ height:1.5rem; }
.w-7{ width:1.75rem; }
.h-7{ height:1.75rem; }
.w-12{ width:3rem; }
.h-12{ height:3rem; }
.w-16{ width:4rem; }
.h-16{ height:4rem; }
.w-20{ width:5rem; }
.h-20{ height:5rem; }
.w-24{ width:6rem; }
.h-24{ height:6rem; }
.w-32{ width:8rem; }
.h-32{ height:8rem; }
.max-w-xs{ max-width:20rem; }
.max-w-sm{ max-width:24rem; }
.max-w-md{ max-width:28rem; }
.max-w-lg{ max-width:32rem; }
.max-w-2xl{ max-width:42rem; }
.max-w-4xl{ max-width:56rem; }
.max-w-5xl{ max-width:64rem; }
.max-w-6xl{ max-width:72rem; }

/* Extra small screen adjustments for iPhone SE and similar */
@media (max-width: 375px) {
  .mobile-thanks-section {
    padding: 0.5rem;
    gap: 0.5rem;
  }
  
  .mobile-thanks-section h1 {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
  
  .mobile-thanks-section p {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  
  .mobile-thanks-section h3 {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  
  .mobile-thanks-section .w-16 {
    width: 3rem;
  }
  
  .mobile-thanks-section .h-16 {
    height: 3rem;
  }
  
  .mobile-thanks-section .w-8 {
    width: 1.5rem;
  }
  
  .mobile-thanks-section .h-8 {
    height: 1.5rem;
  }
  
  .mobile-thanks-section .mb-6 {
    margin-bottom: 1rem;
  }
  
  .mobile-thanks-section .py-8 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  
  .mobile-thanks-section .gap-3 {
    gap: 0.5rem;
  }
  
  .mobile-thanks-section .text-sm {
    font-size: 0.75rem;
    line-height: 1rem;
  }
  
  .mobile-thanks-section .py-2\.5 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  
  .mobile-thanks-section .px-4 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  /* Footer adjustments for very small screens */
  footer .text-xs {
    font-size: 0.625rem;
    line-height: 0.875rem;
  }
  
  footer .text-base {
    font-size: 0.75rem;
    line-height: 1rem;
  }
  
  footer .text-lg {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  
  footer .pt-6 {
    padding-top: 1rem;
  }
  
  footer .pb-4 {
    padding-bottom: 0.75rem;
  }
  
  footer .pt-4 {
    padding-top: 0.75rem;
  }
  
  footer .w-12 {
    width: 2.5rem;
  }
  
  footer .h-12 {
    height: 2.5rem;
  }
}

/* Small screen adjustments */
@media (min-width:640px){
  .sm\:w-20{ width:5rem; }
  .sm\:h-20{ height:5rem; }
  .sm\:w-10{ width:2.5rem; }
  .sm\:h-10{ height:2.5rem; }
  .sm\:w-5{ width:1.25rem; }
  .sm\:h-5{ height:1.25rem; }
  .sm\:text-3xl{ font-size:1.875rem; line-height:2.25rem; }
  .sm\:text-lg{ font-size:1.125rem; line-height:1.75rem; }
  .sm\:text-base{ font-size:1rem; line-height:1.5rem; }
  .sm\:px-6{ padding-left:1.5rem; padding-right:1.5rem; }
  .sm\:py-3{ padding-top:0.75rem; padding-bottom:0.75rem; }
  .sm\:gap-3{ gap:0.75rem; }
  .sm\:gap-4{ gap:1rem; }
  .sm\:mb-4{ margin-bottom:1rem; }
  .sm\:px-5{ padding-left:1.25rem; padding-right:1.25rem; }
  .sm\:py-12{ padding-top:3rem; padding-bottom:3rem; }
}

/* Large screen adjustments */
@media (min-width:1024px){
  .lg\:w-6{ width:1.5rem; }
  .lg\:h-6{ height:1.5rem; }
  .lg\:px-8{ padding-left:2rem; padding-right:2rem; }
  .lg\:py-4{ padding-top:1rem; padding-bottom:1rem; }
  .lg\:gap-4{ gap:1rem; }
  .lg\:text-lg{ font-size:1.125rem; line-height:1.75rem; }
}

/* Extra large screen adjustments */
@media (min-width:1280px){
  .xl\:w-7{ width:1.75rem; }
  .xl\:h-7{ height:1.75rem; }
  .xl\:px-10{ padding-left:2.5rem; padding-right:2.5rem; }
  .xl\:py-5{ padding-top:1.25rem; padding-bottom:1.25rem; }
  .xl\:text-xl{ font-size:1.25rem; line-height:1.75rem; }
}