/* RESET & BASE */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #0a0a0a; /* was: background: #0a0a0a; */
  color: #fff;
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
}

/* HEADER */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 60px;
  background: rgba(17, 17, 17, 0.975);
  border-bottom: 1px solid #222;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.logo {
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.logo img {
  height: 40px;
}

.center-info {
  text-align: right;
  font-size: 13px;
  color: #aaa;
  letter-spacing: 0.5px;
}

.tel{
  color: #d4af37;
  font-size: 15px;
}

.location {
  color: #aaa;
  font-size: 14px;
}

/* HERO SECTION */
.hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  /* 80px on sides creates a consistent "frame" */
  padding: 60px 80px; 
  background: url('image_069c70.jpg') no-repeat center center/cover;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #0a0a0acc 20%, #0a0a0a66 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;           
  max-width: 1600px;     
  margin: 0 auto;
  gap: 40px;             
  align-items: center;
  /* This pushes left to the left and right to the right */
  justify-content: space-between; 
}

/* LEFT SIDE */
.left {
  flex: 1.2;
  padding-right: 0; /* Remove the old 50px padding to fix lopsided look */
  zoom: 1.1;
}

.left h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(48px, 6vw, 80px);
  line-height: 0.95;
  margin-bottom: 25px;
  font-weight: 700;
}

.left h1 span {
  color: #d4af37;
  font-style: italic;
}

.description {
  font-size: 18px;
  color: #ccc;
  max-width: 500px;
  margin-bottom: 40px;
  font-weight: 300;
}

.hours strong {
  display: block;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
}

.hours-grid {
  display: grid;
  grid-template-columns: minmax(100px, auto) auto; /* Ensures day names have enough room */
  gap: 2px 30px; /* Reduced vertical gap from 5px to 2px */
  font-size: 14px;
  color: #bbb;
}

.hours {
  margin-bottom: 30px; /* Reduced from 40px to keep the CTA button visible */
  padding: 15px 20px;  /* Slightly tighter padding */
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid #d4af37;
  display: inline-block;
}

.closed {
  color: #881111;
  font-weight: bold;
}

.cta-button {
  display: inline-block;
  background: #d4af37;
  color: #000;
  text-decoration: none;
  border: 1px solid #d4af37;
  transition: all 0.3s ease;
  text-transform: uppercase;
  line-height: 1; /* Keeps the text perfectly centered vertically */

  /* 1. BIG AND BOLD TEXT */
  font-size: 18px; 
  font-weight: 750;
  letter-spacing: 1px;

  /* 2. TALLER AND NARROWER PADDING */
  /* Increased from 14px to 22px for height */
  /* Decreased from 38px to 30px for width */
  padding: 22px 34px; 

  vertical-align: middle;
  margin-bottom: -100px;
}

/* Move your old hover here so it only works on PC */
@media (hover: hover) {
  .cta-button:hover {
    background: transparent;
    color: #d4af37;
  }
}

/* RIGHT SIDE (Slider) */
/* RIGHT SIDE (Slider Container) */
.right {
  flex: 1.5;         /* Increased from 1 to 1.5 to take up more horizontal space */
  position: relative;
  box-shadow: 0 40px 100px rgba(0,0,0,0.9);
  overflow: hidden; 
  display: flex;
  align-items: center;
  background: #000;  /* Pure black background for the box */
  border-radius: 8px;
  max-width: 800px;
  max-height: 800px;
  margin-right: 4%;
}


.slider {
  display: flex;
  width: 100%;
}

.slider img {
  min-width: 100%; 
  width: 100%;
  height: 750px;     /* INCREASED from 500px to 750px */
  object-fit: cover; 
  display: block;
  filter: none;      /* Removed grayscale/brightness to show high-res quality */
  transition: opacity 0.3s ease;
}

/* Updated Arrows to be larger for the larger box */
/* ARROWS */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(212, 175, 55, 0.9);
  color: #000;
  border: none;
  width: 40px;      /* Back to a clean, smaller size */
  height: 50px;     /* Slightly taller than wide looks more 'pro' */
  cursor: pointer;
  font-size: 18px;
  z-index: 10;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Only turn white on PC when hovering with a mouse */
@media (hover: hover) {
  .arrow:hover {
    background: #fff;
  }
}

/* TOUCHING THE SIDES */
.left-arrow { 
  left: 0; 
  border-radius: 0 4px 4px 0; /* Rounds only the inner corners */
}

.right-arrow { 
  right: 0; 
  border-radius: 4px 0 0 4px; /* Rounds only the inner corners */
}

/* FOOTER */
footer {
  background: rgba(17, 17, 17, 0.95);
  color: #999;           /* Lightened from #555 for better visibility */
  text-align: center;
  padding: 20px 40px;    /* Reduced from 40px to 20px to make it less tall */
  font-size: 14px;       /* Increased from 13px */
  letter-spacing: 1px;   /* Added for a cleaner, premium look */
  border-top: 1px solid #1a1a1a;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .hero-content { flex-direction: column; text-align: center; }
  .hero-overlay { background: rgba(10, 10, 10, 0.85); }
  .description { margin: 0 auto 40px; }
  .hours { display: block; border-left: none; border-top: 2px solid #d4af37; }
  .left-arrow { left: 10px; }
  .right-arrow { right: 10px; }
}

.center-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: right;
}

.info-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  font-size: 13px;
  color: #aaa;
}

.info-item i {
  color: #d4af37; /* Matches your gold theme */
  font-size: 14px;
  width: 16px; /* Keeps icons aligned */
  text-align: center;
}

.info-item-2 i {
  color: #aaa; /* Matches your gold theme */
  font-size: 14px;
  width: 16px; /* Keeps icons aligned */
  text-align: center;
}

/* FIND US SECTION */
.find-us {
  background-color: #0a0a0a;
  padding: 50px 0;
  border-top: 1px solid #222;
}

.find-us .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.find-us-content {
    text-align: center;
    margin-bottom: 50px;
}

.find-us-content h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 4.5rem; 
  font-weight: 700;  
  letter-spacing: 10px; /* Even more spacing for that high-end look */
  text-transform: uppercase;
  color: #d4af37;
  margin-bottom: 20px;
  line-height: 1;
}

.address-box {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 25px;
  background: #111;
  border: 1px solid #d4af37; /* Thin gold border to make it pop */
  border-radius: 4px;
  color: #fff;
  font-family: 'Inter', sans-serif;
  letter-spacing: 1px;
  font-weight: 600;
}

.address-box i {
  color: #d4af37;
}

.map-wrapper {
  width: 100%;
  max-width: 1100px; /* Matches the layout in image_942902.png */
  height: 550px; 
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #333;
  box-shadow: 0 30px 60px rgba(0,0,0,0.8);
}

.preview-banner {
    background-color: #d4af37;
    color: #000;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    position: relative; /* This is the magic change */
    width: 100%;
    z-index: 10001;
}

/* Hide mobile break on PC */
.mobile-break {
  display: none;
}

/* ============================================================
   MOBILE RESPONSIVE FIXES (Only for screens 768px and below)
   ============================================================ */

@media (max-width: 768px) {
  
  /* 1. HEADER & LOGO */
  header {
    flex-direction: column; /* Stack logo above info */
    padding: 15px 20px;
    gap: 10px;
    text-align: center;
  }

  .center-info {
    text-align: center;
    align-items: center;
  }

  .info-item, .info-item-2 {
    justify-content: center;
    font-size: 11px; /* Smaller text for small screens */
  }

  /* 2. HERO SECTION */
  .hero {
    padding: 40px 20px;
    min-height: auto;
    display: block; /* Switch from flex to block for vertical flow */
  }

  .hero-content {
    flex-direction: column;
    gap: 30px;
  }

  /* 3. LEFT SIDE (Text & Hours) */
  .left {
    zoom: 1.0; /* Reset the desktop zoom */
    text-align: center;
    padding-right: 0;
  }

  .left h1 {
    font-size: 40px; /* Smaller heading */
    margin-bottom: 15px;
  }

  .description {
    font-size: 16px;
    margin: 0 auto 30px;
  }

  .hours {
    display: block;
    width: 100%;
    border-left: none;
    border-top: 2px solid #d4af37;
    padding: 15px;
  }

  .hours-grid {
    grid-template-columns: 1fr 1fr; /* Two even columns */
    gap: 5px 10px;
    text-align: left;
  }

/* 4. BOOK BUTTON - Taller for Mobile */
  .cta-button {
    margin-bottom: 20px; 
    width: 100%; 
    display: block;      /* Ensures it takes up the full width */
    text-align: center;
    
    /* Increased the first number (top/bottom) for more height */
    padding: 22px 0; 
    
    font-size: 18px;     /* Keeps the text bold and readable */
    font-weight: 750;
    margin-top: 20px;
    line-height: 1;      /* Keeps the text perfectly centered */
  }

  /* 5. SLIDER (Right Side) */
  .right {
    margin-right: 0;
    max-width: 100%;
    flex: none;
    width: 100%;
  }

  .slider img {
    height: 400px; /* Reduce height so it doesn't take the whole screen */
  }

  .arrow {
    width: 35px;
    height: 45px;
  }

  /* 6. LOCATION / FIND US SECTION */
  .find-us-content h2 {
    font-size: 2.5rem; /* Shrink the giant 'LOCATION' text */
    letter-spacing: 5px;
  }

  .address-box {
    font-size: 12px;
    padding: 10px 15px;
    width: 100%;
    justify-content: center;
  }

  .map-wrapper {
    height: 350px; /* Smaller map for mobile */
  }

  /* 7. PREVIEW BANNER */
  .preview-banner {
    font-size: 11px;
    padding: 8px 5px;
  }

  /* 5. SLIDER & ARROWS - Mobile Optimization */
  .right {
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100%;
    position: relative;
    left: 0 !important;
    right: 0 !important;
    border-radius: 4px; /* Slight rounding looks better than sharp edges */
    flex: none;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  }

  .slider img {
    height: 380px; /* Shorter for mobile screens */
    width: 100%;
    object-fit: cover;
  }

  /* Smaller, centered arrows */
  .arrow {
    width: 34px;      /* Smaller width */
    height: 45px;      /* Smaller height */
    font-size: 14px;   /* Smaller icon */
    background: rgba(212, 175, 55, 0.8); 
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .left-arrow {
    left: 0 !important; 
    border-radius: 0 4px 4px 0;
  }

  .right-arrow {
    right: 0 !important; 
    border-radius: 4px 0 0 4px;
  }

  /* 6. LOCATION & MAP - Mobile Optimization */
  .find-us-content h2 {
    font-size: 2.8rem; 
    letter-spacing: 4px;
    margin-bottom: 15px;
  }

  .address-box {
    font-size: 13px;
    padding: 10px 15px;
    width: 90%;
    margin: 0 auto;
  }

  .map-wrapper {
    height: 300px;
    margin-top: 20px;
  }
  
  /* Keep arrows gold on phone taps */
  .arrow:active {
    background: rgba(212, 175, 55, 0.8) !important;
  }

  /* Hide Logo and Text in Header on Mobile */
  .logo {
    display: none;
  }

  /* Center the remaining contact info */
  header {
    justify-content: center;
    padding: 15px;
  }

  .center-info {
    text-align: center;
    margin-top: 0;
  }

  /* 6. LOCATION SECTION - Tightened & Clearer */
  .address-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;                /* Space between pin and text */
    padding: 12px 15px;       /* Reduced vertical padding */
    width: 90%;               /* Keeps it from hitting screen edges */
    margin: 0 auto;           /* Centers the box */
    border: 1px solid #d4af37;
  }

  .address-box i {
    font-size: 18px;          /* Bigger, clearer gold pin */
    flex-shrink: 0;           /* Stops icon from getting squished */
    color: #d4af37;
  }

  .address-box span {
    font-size: 14px;
    line-height: 1.2;         /* Keeps the two lines of text close together */
    text-align: left;
    letter-spacing: 0.5px;
  }

  /* 7. FOOTER - Slimmer & Clean */
  footer {
    padding: 20px 10px;       /* Reduced from 30px to make it less 'fat' */
    font-size: 12px;          /* Slightly smaller for a cleaner look */
    line-height: 1.4;
  }

  .mobile-break {
    display: block;
    margin: 4px 0;           /* Small gap between the two lines */
  }
}

/* Fix for very small phones (iPhone SE, etc) */
@media (max-width: 380px) {
  .left h1 {
    font-size: 32px;
  }
  .hours-grid {
    font-size: 12px;
  }
}