/* ============================================ MONLIS Website - Studio Page Hero Section Full-screen hero with background image Figma node:2:2859 ============================================ *//* ========================================== HERO CONTAINER Figma specs:- Height:960px - Background:Image with overlays ========================================== */.studio-hero {position:relative;width:100%;height:95vh;min-height:600px;overflow:hidden;}/* ========================================== HERO BACKGROUND Image with dark overlay ========================================== */.studio-hero__background {position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;}.studio-hero__image {width:100%;height:100%;object-fit:cover;}/* Dark overlay */.studio-hero__overlay {position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.2);z-index:2;}/* Bottom gradient overlay */.studio-hero__gradient {position:absolute;bottom:0;left:0;width:100%;height:400px;background:linear-gradient( 180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 50%,rgba(0,0,0,0.75) 100% );z-index:3;}/* ========================================== HERO CONTENT Centered content with badge,title,text,CTAs ========================================== */.studio-hero__content {position:absolute;bottom:120px;left:50%;transform:translateX(-50%);width:100%;max-width:1200px;padding:0 20px;z-index:10;display:flex;flex-direction:column;align-items:center;text-align:center;}/* ========================================== BADGE "Premium Nail & Brow Bar" ========================================== */.studio-hero__badge {display:inline-flex;align-items:center;justify-content:center;gap:16px;padding:0 24px;height:38px;background-color:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.4);border-radius:9999px;margin-bottom:32px;}.studio-hero__badge-dot {width:6px;height:6px;background-color:white;border-radius:50%;opacity:0.957;transition:background-color 0.3s ease;}.studio-hero__badge-text {font-family:var(--font-secondary);font-weight:500;font-size:14px;line-height:14px;letter-spacing:2.8px;text-transform:uppercase;color:rgba(255,255,255,0.9);transition:color 0.3s ease;}.studio-hero__badge:hover .studio-hero__badge-text {color:#D4AF37;}.studio-hero__badge:hover .studio-hero__badge-dot {background-color:#D4AF37;}/* ========================================== TITLE "MONLIS" Location ========================================== */.studio-hero__title-wrapper {display:flex;flex-direction:column;align-items:center;gap:20px;margin-bottom:32px;}.studio-hero__title {font-family:var(--font-primary);font-weight:700;font-size:64px;line-height:64px;letter-spacing:3.2px;text-transform:uppercase;color:var(--color-white);margin:0;}.studio-hero__location {display:flex;align-items:center;justify-content:center;gap:24px;}.studio-hero__location-line {width:48px;height:1px;background-color:rgba(255,255,255,0.6);}.studio-hero__location-text {font-family:var(--font-secondary);font-weight:400;font-size:20px;line-height:20px;letter-spacing:6px;text-transform:uppercase;color:rgba(255,255,255,0.9);}/* ========================================== DESCRIPTION ========================================== */.studio-hero__description {max-width:800px;font-family:var(--font-secondary);font-weight:400;font-size:18px;line-height:26px;color:rgba(255,255,255,0.85);text-align:center;margin-bottom:48px;}/* ========================================== CTA BUTTONS ========================================== */.studio-hero__cta-wrapper {display:flex;align-items:center;justify-content:center;gap:24px;}.studio-hero__cta {display:inline-flex;align-items:center;justify-content:center;height:58px;padding:0 48px;font-family:var(--font-secondary);font-weight:600;font-size:16px;line-height:16px;letter-spacing:2.4px;text-transform:uppercase;transition:all 0.3s ease;}.studio-hero__cta--primary {background-color:var(--color-white);color:#101828;border:none;}.studio-hero__cta--primary:hover {background-color:rgba(255,255,255,0.9);transform:translateY(-2px);}.studio-hero__cta--secondary {background-color:transparent;color:var(--color-white);border:1px solid rgba(255,255,255,0.7);}.studio-hero__cta--secondary:hover {background-color:rgba(255,255,255,0.1);border-color:var(--color-white);}/* ========================================== RESPONSIVE STYLES ========================================== *//* Large Desktop (1440px) */@media (max-width:1440px) {.studio-hero {height:800px;}.studio-hero__title {font-size:56px;line-height:56px;}}/* Desktop (1200px) */@media (max-width:1200px) {.studio-hero {height:700px;}.studio-hero__content {bottom:80px;}.studio-hero__title {font-size:48px;line-height:48px;}.studio-hero__location-text {font-size:18px;letter-spacing:4px;}.studio-hero__description {font-size:16px;line-height:24px;}}/* Tablet (1024px) */@media (max-width:1024px) {.studio-hero {height:600px;}.studio-hero__badge {height:32px;padding:0 16px;gap:12px;}.studio-hero__badge-text {font-size:12px;letter-spacing:2px;}.studio-hero__title {font-size:40px;line-height:40px;}.studio-hero__location-line {width:32px;}.studio-hero__location-text {font-size:16px;letter-spacing:3px;}.studio-hero__cta {height:50px;padding:0 32px;font-size:14px;}}/* Mobile (768px) */@media (max-width:768px) {.studio-hero {height:500px;}.studio-hero__content {bottom:60px;}.studio-hero__badge {margin-bottom:24px;}.studio-hero__title {font-size:32px;line-height:32px;}.studio-hero__title-wrapper {gap:16px;margin-bottom:24px;}.studio-hero__location-text {font-size:14px;letter-spacing:2px;}.studio-hero__description {font-size:14px;line-height:22px;margin-bottom:32px;}.studio-hero__cta-wrapper {flex-direction:column;gap:16px;width:100%;}.studio-hero__cta {width:100%;max-width:280px;height:48px;font-size:13px;padding:0 24px;}}/* Small Mobile (480px) */@media (max-width:480px) {.studio-hero {height:450px;}.studio-hero__badge {padding:0 12px;gap:8px;}.studio-hero__badge-text {font-size:10px;letter-spacing:1.5px;}.studio-hero__title {font-size:28px;line-height:28px;}.studio-hero__location-line {width:24px;}.studio-hero__location-text {font-size:12px;}.studio-hero__description {font-size:13px;line-height:20px;}}