/* =====================================================
   site.css — Shared stylesheet for Ravinaescort.com
   Loads on every page. Contains:
   1. Base styles + fonts
   2. Nav CSS
   3. Footer CSS
   4. Tailwind offline fallback utilities
   ===================================================== */

/* 1. FONTS */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=Inter:wght@400;500;600;700&display=swap');

/* 2. BASE */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: #09090b;
  color: #ffffff;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; }

/* 3. HEADING FONT */
.heading-font { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; }

/* 4. NAV CSS — works without Tailwind CDN */
#site-nav {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background-color: rgba(9,9,11,0.95);
  border-bottom: 1px solid rgba(234,179,8,0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav-inner-wrap {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 72px;
}
#nav-desktop-links { display: none; }
#nav-desktop-cta   { display: none; }
#mobile-menu-btn   { display: flex !important; }
@media (min-width: 768px) {
  #nav-desktop-links {
    display: flex !important;
    align-items: center;
    gap: 2rem;
    font-size: 0.9375rem;
  }
  #nav-desktop-cta {
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
  }
  #mobile-menu-btn { display: none !important; }
}
/* Nav link hover */
.nav-link { color: #d4d4d8; transition: color 0.2s; }
.nav-link:hover,
.nav-link.active { color: #facc15; }

/* Cities dropdown */
#cities-dropdown {
  position: absolute !important;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 11rem;
  z-index: 200;
  background: #18181b;
  border: 1px solid #3f3f46;
  border-radius: 0.75rem;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  overflow: hidden;
}
#cities-container { position: relative; }

/* 5. FOOTER CSS */
#site-footer {
  background: #09090b;
  border-top: 1px solid rgba(234,179,8,0.15);
}

/* 6. SHARED COMPONENTS */
.keyword-highlight { color: #facc15; font-weight: 600; }

/* Fixed call/whatsapp buttons */
.fixed-call-btn, .fixed-whatsapp-btn {
  position: fixed;
  bottom: 1.5rem;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  z-index: 40;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.fixed-call-btn { left: 1.5rem; background: #facc15; color: #09090b; }
.fixed-whatsapp-btn { right: 1.5rem; background: #25d366; color: #fff; }
.fixed-call-btn:hover, .fixed-whatsapp-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(0,0,0,0.5);
}

/* 7. ESCORT PROFILE CARDS */
/* Card wrapper — hover lift + glow */
.model-card.escort-profile-card {
  background: #18181b;
  border-radius: 1.25rem;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #27272a;
  transition: transform 0.35s cubic-bezier(.4,0,.2,1),
              box-shadow 0.35s cubic-bezier(.4,0,.2,1),
              border-color 0.35s;
}
.model-card.escort-profile-card:hover {
  transform: translateY(-10px) scale(1.015);
  box-shadow: 0 28px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(250,204,21,.25);
  border-color: rgba(250,204,21,.4);
}
/* Image zoom on card hover */
.model-card.escort-profile-card:hover .escort-card-img {
  transform: scale(1.07);
}

/* Pulse dot animation */
@keyframes escort-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.7); }
  70%  { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.escort-pulse-dot {
  animation: escort-pulse 2s infinite;
}

/* 8. TAILWIND OFFLINE FALLBACK
   Full utility CSS — page renders perfectly without CDN internet */
.hidden{display:none!important}
.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}
.grid{display:grid}.inline-block{display:inline-block}
.relative{position:relative}.absolute{position:absolute}
.fixed{position:fixed}.sticky{position:sticky}
.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}
.top-4{top:1rem}.right-4{right:1rem}.inset-0{top:0;right:0;bottom:0;left:0}
.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.z-\[100\]{z-index:100}
.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}
.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}
.flex-1{flex:1 1 0%}.flex-grow{flex-grow:1}.flex-shrink-0{flex-shrink:0}
.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}
.justify-start{justify-content:flex-start}.justify-center{justify-content:center}
.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}
.self-center{align-self:center}.self-end{align-self:flex-end}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}
.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}
.gap-10{gap:2.5rem}.gap-12{gap:3rem}
.w-full{width:100%}.w-auto{width:auto}.w-10{width:2.5rem}.w-12{width:3rem}
.w-16{width:4rem}.w-20{width:5rem}.w-48{width:12rem}.w-64{width:16rem}
.h-full{height:100%}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}
.h-64{height:16rem}.h-72{height:18rem}.h-80{height:20rem}.h-96{height:24rem}
.min-h-screen{min-height:100vh}
.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-xl{max-width:36rem}.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}
.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-full{max-width:100%}
.mx-auto{margin-left:auto;margin-right:auto}
.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}
.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-10{margin-bottom:2.5rem}
.mb-12{margin-bottom:3rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}
.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}
.p-0{padding:0}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}
.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.p-10{padding:2.5rem}
.px-2{padding-left:.5rem;padding-right:.5rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.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-1{padding-top:.25rem;padding-bottom:.25rem}
.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.py-24{padding-top:6rem;padding-bottom:6rem}
.pt-0{padding-top:0}.pt-4{padding-top:1rem}.pt-8{padding-top:2rem}
.pt-12{padding-top:3rem}.pt-16{padding-top:4rem}.pt-20{padding-top:5rem}
.pb-0{padding-bottom:0}.pb-4{padding-bottom:1rem}.pb-8{padding-bottom:2rem}
.pb-12{padding-bottom:3rem}.pl-4{padding-left:1rem}.pr-4{padding-right:1rem}
.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}
.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}
.font-bold{font-weight:700}.font-extrabold{font-weight:800}
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-5xl{font-size:3rem;line-height:1}
.text-6xl{font-size:3.75rem;line-height:1}
.leading-none{line-height:1}.leading-tight{line-height:1.25}
.leading-snug{line-height:1.375}.leading-normal{line-height:1.5}
.leading-relaxed{line-height:1.625}.leading-loose{line-height:2}
.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}
.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}
.underline{text-decoration:underline}.no-underline{text-decoration:none}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whitespace-nowrap{white-space:nowrap}
.text-white{color:#fff}.text-black{color:#000}
.text-zinc-950{color:#09090b}.text-zinc-900{color:#18181b}
.text-zinc-700{color:#3f3f46}.text-zinc-600{color:#52525b}
.text-zinc-500{color:#71717a}.text-zinc-400{color:#a1a1aa}
.text-zinc-300{color:#d4d4d8}.text-zinc-200{color:#e4e4e7}
.text-zinc-100{color:#f4f4f5}
.text-yellow-300{color:#fde047}.text-yellow-400{color:#facc15}
.text-yellow-500{color:#eab308}
.text-green-400{color:#4ade80}.text-red-400{color:#f87171}
.text-gray-400{color:#9ca3af}
.bg-white{background-color:#fff}.bg-black{background-color:#000}
.bg-zinc-950{background-color:#09090b}.bg-zinc-900{background-color:#18181b}
.bg-zinc-800{background-color:#27272a}.bg-zinc-700{background-color:#3f3f46}
.bg-yellow-400{background-color:#facc15}.bg-yellow-300{background-color:#fde047}
.bg-gray-200{background-color:#e5e7eb}.bg-transparent{background-color:transparent}
.bg-black\/30{background-color:rgba(0,0,0,.3)}
.bg-black\/50{background-color:rgba(0,0,0,.5)}
.bg-black\/60{background-color:rgba(0,0,0,.6)}
.bg-black\/95{background-color:rgba(0,0,0,.95)}
.bg-zinc-950\/90{background-color:rgba(9,9,11,.9)}
.bg-yellow-400\/10{background-color:rgba(250,204,21,.1)}
.bg-yellow-400\/20{background-color:rgba(250,204,21,.2)}
.border{border-width:1px;border-style:solid}
.border-0{border:none}.border-2{border-width:2px;border-style:solid}
.border-b{border-bottom-width:1px;border-bottom-style:solid}
.border-t{border-top-width:1px;border-top-style:solid}
.border-white{border-color:#fff}.border-zinc-700{border-color:#3f3f46}
.border-zinc-800{border-color:#27272a}.border-yellow-400{border-color:#facc15}
.border-yellow-400\/30{border-color:rgba(250,204,21,.3)}
.border-yellow-400\/40{border-color:rgba(250,204,21,.4)}
.border-yellow-500\/20{border-color:rgba(234,179,8,.2)}
.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}
.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}
.rounded-full{border-radius:9999px}.rounded-none{border-radius:0}
.shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.object-cover{object-fit:cover}.object-contain{object-fit:contain}
.object-top{object-position:top}.object-center{object-position:center}
.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}
.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.opacity-100{opacity:1}
.scale-105{transform:scale(1.05)}
.translate-x-full{transform:translateX(100%)!important}
.-translate-x-full{transform:translateX(-100%)!important}
.translate-x-0{transform:translateX(0)!important}
.rotate-180{transform:rotate(180deg)}
.transition{transition:all .15s ease}
.transition-all{transition:all .15s ease}
.transition-transform{transition:transform .3s ease}
.transition-colors{transition:color .15s ease,background-color .15s ease,border-color .15s ease}
.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}
.ease-in-out{transition-timing-function:ease-in-out}
.select-none{user-select:none}.pointer-events-none{pointer-events:none}
.list-none{list-style:none}
.outline-none{outline:none}
.focus\:outline-none:focus{outline:none}
.backdrop-blur-sm{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.backdrop-blur-lg{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.space-y-2>*+*{margin-top:.5rem}.space-y-3>*+*{margin-top:.75rem}
.space-y-4>*+*{margin-top:1rem}.space-y-5>*+*{margin-top:1.25rem}
.space-y-6>*+*{margin-top:1.5rem}.space-y-8>*+*{margin-top:2rem}
.divide-y>*+*{border-top-width:1px;border-top-style:solid}
.divide-zinc-800>*+*{border-color:#27272a}
/* Hover */
.hover\:bg-yellow-400:hover{background-color:#facc15}
.hover\:bg-yellow-300:hover{background-color:#fde047}
.hover\:bg-zinc-800:hover{background-color:#27272a}
.hover\:bg-white:hover{background-color:#fff}
.hover\:bg-gray-200:hover{background-color:#e5e7eb}
.hover\:text-yellow-400:hover{color:#facc15}
.hover\:text-zinc-950:hover{color:#09090b}
.hover\:text-white:hover{color:#fff}
.hover\:scale-105:hover{transform:scale(1.05)}
.hover\:underline:hover{text-decoration:underline}
.hover\:border-yellow-400:hover{border-color:#facc15}
/* Focus */
.focus\:ring-0:focus{box-shadow:none}
/* Responsive sm */
@media(min-width:640px){
  .sm\:flex{display:flex!important}.sm\:hidden{display:none!important}.sm\:block{display:block!important}
  .sm\:flex-row{flex-direction:row}.sm\:flex-col{flex-direction:column}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm\:text-sm{font-size:.875rem;line-height:1.25rem}
  .sm\:text-base{font-size:1rem;line-height:1.5rem}
  .sm\:text-lg{font-size:1.125rem;line-height:1.75rem}
  .sm\:text-xl{font-size:1.25rem;line-height:1.75rem}
  .sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}
  .sm\:px-0{padding-left:0;padding-right:0}
  .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .sm\:px-10{padding-left:2.5rem;padding-right:2.5rem}
  .sm\:py-5{padding-top:1.25rem;padding-bottom:1.25rem}
  .sm\:gap-6{gap:1.5rem}
}
/* Responsive md */
@media(min-width:768px){
  .md\:flex{display:flex!important}.md\:hidden{display:none!important}
  .md\:block{display:block!important}.md\:grid{display:grid!important}
  .md\:flex-row{flex-direction:row}.md\:flex-col{flex-direction:column}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .md\:text-sm{font-size:.875rem;line-height:1.25rem}
  .md\:text-base{font-size:1rem;line-height:1.5rem}
  .md\:text-lg{font-size:1.125rem;line-height:1.75rem}
  .md\:text-xl{font-size:1.25rem;line-height:1.75rem}
  .md\:text-2xl{font-size:1.5rem;line-height:2rem}
  .md\:text-3xl{font-size:1.875rem;line-height:2.25rem}
  .md\:text-4xl{font-size:2.25rem;line-height:2.5rem}
  .md\:text-5xl{font-size:3rem;line-height:1}
  .md\:text-6xl{font-size:3.75rem;line-height:1}
  .md\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .md\:px-10{padding-left:2.5rem;padding-right:2.5rem}
  .md\:py-0{padding-top:0;padding-bottom:0}
  .md\:py-5{padding-top:1.25rem;padding-bottom:1.25rem}
  .md\:py-16{padding-top:4rem;padding-bottom:4rem}
  .md\:py-20{padding-top:5rem;padding-bottom:5rem}
  .md\:py-24{padding-top:6rem;padding-bottom:6rem}
  .md\:pt-20{padding-top:5rem}.md\:pt-24{padding-top:6rem}
  .md\:pb-0{padding-bottom:0}.md\:pb-12{padding-bottom:3rem}
  .md\:p-4{padding:1rem}.md\:p-6{padding:1.5rem}.md\:p-8{padding:2rem}
  .md\:pl-4{padding-left:1rem}
  .md\:mb-0{margin-bottom:0}.md\:mb-5{margin-bottom:1.25rem}
  .md\:mb-6{margin-bottom:1.5rem}.md\:mb-8{margin-bottom:2rem}
  .md\:mb-10{margin-bottom:2.5rem}.md\:mt-0{margin-top:0}
  .md\:gap-4{gap:1rem}.md\:gap-6{gap:1.5rem}.md\:gap-8{gap:2rem}
  .md\:gap-10{gap:2.5rem}.md\:gap-12{gap:3rem}
  .md\:w-full{width:100%}.md\:w-auto{width:auto}
  .md\:rounded-2xl{border-radius:1rem}.md\:rounded-3xl{border-radius:1.5rem}
  .md\:items-center{align-items:center}
  .md\:justify-between{justify-content:space-between}
  .md\:w-1\/2{width:50%}
  .md\:h-auto{height:auto}
  .md\:space-y-0>*+*{margin-top:0}
}
/* Responsive lg */
@media(min-width:1024px){
  .lg\:flex{display:flex!important}.lg\:hidden{display:none!important}
  .lg\:block{display:block!important}.lg\:grid{display:grid!important}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}
  .lg\:text-xl{font-size:1.25rem;line-height:1.75rem}
  .lg\:text-2xl{font-size:1.5rem;line-height:2rem}
  .lg\:text-4xl{font-size:2.25rem;line-height:2.5rem}
  .lg\:text-5xl{font-size:3rem;line-height:1}
  .lg\:text-6xl{font-size:3.75rem;line-height:1}
  .lg\:gap-8{gap:2rem}.lg\:gap-12{gap:3rem}
  .lg\:py-32{padding-top:8rem;padding-bottom:8rem}
  .lg\:p-16{padding:4rem}.lg\:p-12{padding:3rem}
  .lg\:h-96{height:24rem}
  .lg\:min-h-\[500px\]{min-height:500px}
}
/* Responsive xl */
@media(min-width:1280px){
  .xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
}
/* Missing utilities */
.pt-28{padding-top:7rem}.pb-28{padding-bottom:7rem}
.pt-32{padding-top:8rem}.pb-32{padding-bottom:8rem}
.top-0{top:0}.top-1\/2{top:50%}.left-1\/2{left:50%}
.-translate-y-1\/2{transform:translateY(-50%)}.-translate-x-1\/2{transform:translateX(-50%)}
.translate-y-0{transform:translateY(0)}.translate-x-0{transform:translateX(0)}
.backdrop-blur{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.h-48{height:12rem}.h-56{height:14rem}
.top-3{top:.75rem}.right-3{right:.75rem}.bottom-3{bottom:.75rem}.left-3{left:.75rem}
.top-2{top:.5rem}.right-2{right:.5rem}.bottom-2{bottom:.5rem}.left-2{left:.5rem}
.col-span-2{grid-column:span 2/span 2}
.col-span-3{grid-column:span 3/span 3}
.mb-14{margin-bottom:3.5rem}.mb-16{margin-bottom:4rem}.mb-20{margin-bottom:5rem}
.mt-14{margin-top:3.5rem}.mt-16{margin-top:4rem}.mt-20{margin-top:5rem}
.bg-green-500{background-color:#22c55e}.bg-green-400{background-color:#4ade80}
.text-green-400{color:#4ade80}.text-green-500{color:#22c55e}
.hover\:bg-green-400:hover{background-color:#4ade80}
.bg-zinc-800\/50{background-color:rgba(39,39,42,.5)}
.bg-zinc-800\/40{background-color:rgba(39,39,42,.4)}
.bg-zinc-800\/60{background-color:rgba(39,39,42,.6)}
.bg-zinc-900\/80{background-color:rgba(24,24,27,.8)}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(min-width:640px){
  .sm\:h-72{height:18rem}
  .sm\:gap-6{gap:1.5rem}
  .sm\:gap-4{gap:1rem}
}
@media(min-width:768px){
  .md\:h-80{height:20rem}
  .md\:h-auto{height:auto}
  .md\:min-h-\[500px\]{min-height:500px}
  .md\:col-span-1{grid-column:span 1/span 1}
  .md\:p-10{padding:2.5rem}.md\:p-12{padding:3rem}
  .md\:mt-6{margin-top:1.5rem}.md\:mt-8{margin-top:2rem}.md\:mt-10{margin-top:2.5rem}
  .md\:mt-16{margin-top:4rem}
  .md\:mb-12{margin-bottom:3rem}.md\:mb-14{margin-bottom:3.5rem}
  .md\:mb-16{margin-bottom:4rem}
}