/* Zenyt Hotel Boutique - Premium Design System */

:root {
  /* Colors - White Luxury Palette */
  --color-primary: #D4AF37;
  /* Gold - kept as accent */
  --color-primary-dark: #AA8C2C;
  --color-secondary: #253B2F;
  /* Soft Charcoal for text */
  --color-text: #4a4a4a;
  /* Dark Grey for body */
  --color-text-light: #ffffff;
  --color-background: #ffffff;
  /* Pure White */
  --color-bg-alt: #fcfcfc;
  /* Very subtle off-white for sections */
  --color-accent: #f4f4f4;
  /* Light grey for borders/hover */

  /* Typography */
  --font-heading: 'Libre Caslon Text', serif;
  --font-body: 'Jost', sans-serif;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1.5rem;
  --spacing-md: 3rem;
  --spacing-lg: 6rem;
  --spacing-xl: 10rem;
  /* Increased spacing for luxury feel */

  /* Transitions */
  --transition-fast: 0.3s ease;
  --transition-slow: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Global Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.6;
  background-color: var(--color-background);
  overflow-x: hidden;
}

body.no-scroll {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--color-secondary);
  line-height: 1.2;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-fast);
}

img {
  max-width: 100%;
  display: block;
}

/* Utilities */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
}

.btn {
  display: inline-block;
  padding: 12px 30px;
  border: 1px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn:hover {
  background: var(--color-primary);
  color: var(--color-text-light);
}

.btn-solid {
  background: var(--color-primary);
  color: var(--color-text-light);
}

.btn-solid:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.section-title {
  margin-top: 4rem;
  text-align: center;
  margin-bottom: 4rem;
}

.section-title h2 {
  color: var(--color-primary);
  font-size: 3rem;
  margin-bottom: var(--spacing-xs);
}

.title-footer {
  color: var(--color-primary);
}

.section-title p {
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.9rem;
}

/* Header & Nav */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 10px 0;
  transition: var(--transition-fast);
  background: transparent;
  box-shadow: none;
}

header.scrolled {
  background: rgba(255, 255, 255, 0.98);
  padding: 5px 0;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

header.scrolled .nav-links a {
  color: var(--color-secondary);
}

header.scrolled .logo img {
  filter: invert(1);
  /* Assuming logo-white needs to become dark */
}

nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
}

.logo {
  font-family: var(--font-heading);
  display: block;
  justify-self: center;
}

.logo img {
  height: 120px;
  display: block;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 30px;
  justify-self: start;
}

.nav-links a {
  color: var(--color-text-light);
  /* White text for transparent header */
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
}

/* Ensure button aligns right */
nav .btn {
  justify-self: end;
}

.nav-links a:hover {
  color: var(--color-primary);
}

/* Hero Section */
.hero {
  height: 100vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../assets/images/hero.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text-light);
}

.hero-content h1 {
  font-size: 3.4rem;
  margin-bottom: var(--spacing-sm);
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s forwards 0.5s;
  color: #ffffff;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  /* Strong shadow for readability */
}

.hero-content p {
  font-size: 1.4rem;
  margin-bottom: var(--spacing-md);
  font-weight: 400;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s forwards 0.8s;
  color: #f4f4f4;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.hero-content .btn {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s forwards 1.1s;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* About Section Redesign - Full Width Dark + Popout Image */
.about {
  padding: var(--spacing-xxl) 0;
  background-color: var(--color-background);
  /* Keep main page bg */
  position: relative;
  z-index: 1;
}

/* The dark full-width band */
.about::before {
  content: '';
  position: absolute;
  top: 9rem;
  bottom: 0rem;
  left: 0;
  width: 100%;
  height: auto;
  /* Auto height based on top/bottom constraints */
  transform: none;
  background-color: var(--color-secondary);
  z-index: -1;
}

@media (max-width: 900px) {
  .about::before {
    display: none;
  }

  .about-container {
    background-color: var(--color-secondary);
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    /* Ensure clean edges */
    margin: 0 auto;
    width: 100%;
  }
}

.about-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  position: relative;
}

.about-image-wrapper {
  flex: 1;
  position: relative;
  z-index: 10;
  margin-right: var(--spacing-lg);
  /* Space between image and text */
}

.featured-image {
  width: 100%;
  height: 600px;
  /* Fixed height for uniformity between video and images */
  object-fit: cover;
  box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.2);
}

.about-text-panel {
  flex: 1;
  background-color: transparent;
  /* Transparent so it sits on the ::before strip */
  color: #ffffff;
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 5;
}

.panel-content {
  max-width: 600px;
  margin: 0 auto;
}

/* Override section title for inside the dark panel */
.about-text-panel .section-title {
  text-align: left;
  margin-bottom: var(--spacing-md);
}

.about-text-panel .section-title p {
  color: #253b2f;
  opacity: 0.7;
}

.about-text-panel .section-title h2 {
  color: #d4af37;
  font-size: 3rem;
}

/* Feature List Styling */
.features-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.feature-item {
  display: flex;
  gap: var(--spacing-sm);
  align-items: flex-start;
}

.feature-number {
  font-family: var(--font-body);
  font-size: 3.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1;
}

.feature-text h3 {
  font-family: var(--font-body);
  /* Modern look for headers in list */
  font-size: 1.5rem;
  margin-bottom: 5px;
  color: #ffffff;
}

.feature-text p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  line-height: 1.6;
}

.link-arrow {
  display: inline-block;
  margin-top: var(--spacing-md);
  color: #ffffff;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 5px;
}

.link-arrow:hover {
  border-color: #ffffff;
}

/* Responsive adjustments for About Section */
@media (max-width: 900px) {
  .feature-item {
    display: block;
    margin-bottom: var(--spacing-sm);
  }

  .about-container {
    flex-direction: column;
    padding: 0;
  }

  .about-image-wrapper {
    height: 400px;
    width: 100%;
    margin: 0 auto;
  }

  .featured-image {
    height: 100%;
  }

  .about-text-panel {
    height: auto;
    /* padding: var(--spacing-md); */
    padding: 1rem;
    margin: 2rem;
  }

  .about-text-panel .section-title h2 {
    font-size: 2.5rem;
  }
}


/* Rooms Section - Accordion Gallery */
/* .rooms {
  padding: 0 0 var(--spacing-md) 0;
} */

.rooms-gallery {
  display: flex;
  height: 600px;
  width: 100%;
  overflow: hidden;
}

.gallery-item {
  flex: 1;
  position: relative;
  background-size: cover;
  background-position: center;
  transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  overflow: hidden;
  cursor: pointer;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.gallery-item:last-child {
  border-right: none;
}

/* Hover Effect: Expand */
.gallery-item:hover {
  flex: 3;
}

/* Standard state: other items shrink slightly is implicit via flex */

.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
  transition: background 0.4s;
}

.gallery-item:hover .gallery-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0) 60%);
}

.gallery-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: var(--spacing-md);
  color: #ffffff;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}

.gallery-number {
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-md);
  font-family: var(--font-body);
  font-size: 3rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1;
}

.gallery-info h3 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: #ffffff;
  margin-bottom: 0;
  white-space: nowrap;
  /* Prevent wrap when narrow */
  transition: margin-bottom 0.4s;
}

.gallery-item:hover .gallery-info h3 {
  margin-bottom: var(--spacing-xs);
}

.gallery-details {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.5s ease;
  transform: translateY(20px);
}

.gallery-item:hover .gallery-details {
  max-height: 200px;
  /* Enough space for text + button */
  opacity: 1;
  transform: translateY(0);
}

.gallery-details p {
  font-size: 1rem;
  margin-bottom: var(--spacing-sm);
  color: rgba(255, 255, 255, 0.9);
  max-width: 400px;
}

.btn-gallery {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-color: #ffffff;
  color: #ffffff;
  padding: 10px 25px;
  margin-top: 10px;
  min-width: 160px;
  text-align: center;
  font-family: inherit;
  font-size: 0.9rem;
  box-sizing: border-box;
  line-height: 1.5;
}

/* Services Section - Reverse Layout */
.services-section .about-container {
  flex-direction: row-reverse;
}

.services-section .about-image-wrapper {
  margin-right: 0;
  margin-left: var(--spacing-lg);
  /* Swap margin for overlap */
}

.services-section .about-text-panel .section-title {
  text-align: right;
  /* Align title inside panel if used, though we moved it out */
}

/* Services List Styling */
.services-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 2 Columns */
  gap: 15px 30px;
  list-style: none;
  margin-top: var(--spacing-sm);
}

.services-list li {
  position: relative;
  padding-left: 25px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  line-height: 1.4;
}

.services-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  /* Gold checkmark */
  font-weight: bold;
}

/* Adjust overlay margins for reverse layout */
@media (min-width: 900px) {
  .services-section .about-image-wrapper {
    margin-left: -50px;
    margin-right: 0;
  }

  .services-section .about-text-panel {
    padding-left: var(--spacing-md);
    padding-right: 100px;
    /* Extra padding on right for overlap */
  }
}

/* Responsive adjustment */
@media (max-width: 900px) {
  .services-section .about-container {
    /* flex-direction: column; */
    padding: 40px 0;
    flex-direction: column;
  }

  .services-section .about-image-wrapper {
    margin: 0;
    margin-bottom: 50px;
  }

  .services-section .about-text-panel {
    padding: var(--spacing-md);
  }

  .services-section {
    padding-top: 0;
  }

  .services-section .about-text-panel {
    margin-top: 0;
    padding-top: 0;
  }

  /* Ensure background starts lower for services too if needed, 
     but since it shares .about class, the previous rule handles it. 
     We might need to ensure the title is indeed above the bg.
  */
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
  .rooms-gallery {
    flex-direction: column;
    height: auto;
  }

  .gallery-item {
    height: 300px;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-right: none;
  }

  /* On mobile maybe always show or basic active state */
  .gallery-item:hover {
    flex: 1;
    /* Disable expansion on scroll/touch just to keep it simple or expand height */
    height: 400px;
  }
}

/* Map Section */
.map-section {
  width: 100%;
  height: 450px;
  margin-top: 80px;
}

.map-section iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(100%) invert(0%);
  /* Optional: grayscale map for style */
}

/* Footer with Background */
footer {
  position: relative;
  background-image: url('../assets/images/footer-bg.jpg');
  background-size: cover;
  background-position: center;
  color: #ffffff;
  padding: var(--spacing-xl) 0 var(--spacing-md);
  text-align: center;
  border-top: none;
}

/* Overlay for readability */
footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));
  z-index: 1;
}

.container {
  position: relative;
  z-index: 2;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.footer-col a:hover {
  color: var(--color-primary);
}

/* Responsive */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2.6rem;
  }

  .about-content {
    flex-direction: column;
  }

  .nav-links {
    display: none;
    /* simple hide for now, would add hamburger later */
  }
}

/* Policy Modal */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  z-index: 2000;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
}

.modal-content {
  background-color: #fefefe;
  margin: 5% auto;
  /* 5% from top */
  padding: 40px;
  border: 1px solid #888;
  width: 90%;
  max-width: 800px;
  /* Wider for text */
  position: relative;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
  animation: fadeIn 0.4s;
  max-height: 90vh;
  /* Prevent scroll off screen */
  overflow-y: auto;
  /* Internal scroll */
  border-radius: 4px;
}

.close {
  color: #aaa;
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 28px;
  font-weight: bold;
  transition: color 0.3s;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: var(--color-secondary);
  text-decoration: none;
  cursor: pointer;
}

.policy-text {
  margin-top: 20px;
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.6;
}

.policy-text h4 {
  font-family: var(--font-heading);
  color: var(--color-secondary);
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 1.3rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

.policy-text ul {
  list-style: disc;
  padding-left: 20px;
  margin-bottom: 15px;
}

.policy-text p {
  margin-bottom: 10px;
  font-size: 0.95rem;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Lightbox Styles */
.lightbox {
  display: none;
  position: fixed;
  z-index: 3000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
  align-items: center;
  justify-content: center;
}

.lightbox.active {
  display: flex;
}

.lightbox-content {
  margin: auto;
  display: block;
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  animation: zoomIn 0.3s;
}

@keyframes zoomIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
  z-index: 3001;
}

.lightbox-close:hover,
.lightbox-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.lightbox-prev,
.lightbox-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: rgba(0, 0, 0, 0.3);
  border: none;
  z-index: 3001;
}

.lightbox-next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.lightbox-prev {
  left: 0;
  border-radius: 3px 0 0 3px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Button Outline Style */
.btn-outline {
  background: transparent;
  border: 1px solid #ffffff;
  color: #ffffff;
  margin-left: 10px;
}

.btn-outline:hover {
  background: #ffffff;
  color: var(--color-text);
  border-color: #ffffff;
}

/* Mobile Navigation Styles */
.mobile-menu-btn {
  display: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
  z-index: 2001;
  /* Above mobile menu */
}

.mobile-menu-btn span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #ffffff;
  transition: all 0.3s ease;
}

/* Header scrolled state: ensure hamburger is visible/colored correctly */
header.scrolled .mobile-menu-btn span {
  background-color: var(--color-secondary);
}

/* Mobile Menu Active State (Hamburger transformation) */
.mobile-menu-btn.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
  background-color: #ffffff;
  /* Always white on active menu bg */
}

.mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
  background-color: #ffffff;
}

@media (max-width: 900px) {
  .mobile-menu-btn {
    display: flex;
  }

  /* Mobile Menu Fix: Ensure full coverage */
  .nav-links {
    display: flex;
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background-color: var(--color-secondary);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: right 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 2000;
    /* High z-index */
    padding-top: 60px;
  }

  .nav-links.active {
    right: 0;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
  }

  .nav-links li {
    margin: 20px 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .nav-links.active li {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
  }

  .nav-links.active li:nth-child(2) {
    transition-delay: 0.3s;
  }

  .nav-links.active li:nth-child(3) {
    transition-delay: 0.4s;
  }

  .nav-links.active li:nth-child(4) {
    transition-delay: 0.5s;
  }

  .nav-links a {
    font-size: 1.5rem;
    color: #ffffff !important;
  }

  nav {
    justify-content: space-between;
  }

  /* Hide header button on mobile */
  nav .btn {
    display: none;
  }

  /* Additional Mobile Optimizations */
  .hero-content h1 {
    font-size: 2.2rem;
  }

  .hero {
    background-attachment: scroll;
    /* Fix for iOS */
  }

  /* .about {
    padding-top: 4rem;
  } */

  /* Ensure logo is BELOW the mobile menu background when active */
  /* We can't easily change logo z-index relative to nav-links if they are siblings without z-index on parent.
     But .nav-links is fixed, so it creates a new context.
     The logo is absolute positioned. */
  .logo {
    z-index: 1001;
    /* Lower than nav-links (2000) */
  }

  /* Rooms Gallery Mobile: Vertical Stack & Always Visible Details */
  .rooms-gallery {
    flex-direction: column;
    height: auto;
  }

  .gallery-item {
    width: 100%;
    height: 500px;
    /* Taller to fit details */
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex: none;
    /* Disable flex grow/shrink logic from desktop */
    transition: none;
    /* Disable transition on mobile */
  }

  /* Explicitly disable hover expansion on mobile */
  .gallery-item:hover {
    flex: none;
    height: 500px;
    /* Maintain fixed height */
  }

  .gallery-item:last-child {
    border-bottom: none;
  }

  /* Always show overlay and details on mobile */
  .gallery-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1));
  }

  .gallery-details {
    max-height: 300px;
    opacity: 1;
    transform: translateY(0);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .gallery-details p {
    max-width: 100%;
    flex-basis: 100%;
    margin-bottom: 10px;
  }

  /* Make buttons side-by-side on mobile */
  .gallery-details>a,
  .gallery-details>button {
    display: inline-block;
    min-width: unset;
    width: auto;
    flex: 1;
    margin: 0;
    font-size: 0.85rem;
    padding: 10px;
    text-align: center;
  }

  .gallery-details-buttons {
    display: flex;
    gap: 10px;
    width: 100%;
  }

  /* We need to restructure HTML slightly or just use flex wrap on container */
  .gallery-details {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .gallery-info h3 {
    margin-bottom: var(--spacing-xs);
    white-space: normal;
    /* Allow wrapping */
  }

  section {
    scroll-margin-top: 90px;
  }
}