/* ===========================
        HERO
=========================== */

.hero {
  position: relative;
  margin-top: 75px;

  width: 100%;
  height: 80vh;
  min-height: 550px;

  overflow: hidden;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {

  position: absolute;
  inset: 0;

  background: linear-gradient(rgba(0, 0, 0, .60),
      rgba(0, 0, 0, .35));
}

.hero-content {

  position: absolute;

  top: 50%;
  left: 10%;

  transform: translateY(-50%);

  max-width: 560px;

  z-index: 2;
}

.hero-content h1 {

  font-size: 4rem;

  line-height: 1.1;

  margin-bottom: 20px;
}

.hero-content p {
  color: var(--primary-color);
  font-style: italic;
  font-size: 2rem;
  margin-bottom: 35px;
}

.hero-btn {

  display: inline-block;

  background: var(--primary-color);

  color: #111;

  text-decoration: none;

  padding: 16px 34px;

  border-radius: 40px;

  font-weight: 600;

  transition: var(--transition);
}

.hero-btn:hover {

  background: var(--primary-hover);

  transform: translateY(-4px);
}


/* ===========================
        INFO SECTION
=========================== */

.info-section {
  width: 90%;
  max-width: 1100px;

  margin: 40px auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
}

.info-card {

  background: var(--secondary-color);

  border: 1px solid var(--border-color);

  border-radius: 20px;

  padding: 35px;
}

.info-card h2 {

  color: var(--primary-color);

  font-size: 2rem;

  margin-bottom: 25px;
}


/* ===========================
        ADDRESS
=========================== */

.address {

  display: inline-block;

  margin-bottom: 30px;

  color: white;

  text-decoration: none;

  line-height: 1.7;
}

.address:hover {

  color: var(--primary-color);
}


/* ===========================
        HOURS
=========================== */

.hours-list {

  list-style: none;
}

.hours-item {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 12px 0;

  border-bottom: 1px solid var(--border-color);

  font-size: .95rem;
}

.hours-item:last-child {

  border: none;
}

.hours-item span:last-child {

  color: var(--text-secondary);
}


/* ===========================
        CONTACT
=========================== */

.contact-row {

  margin-bottom: 18px;

  color: var(--text-secondary);

  font-size: 1rem;
}

.contact-links {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 35px;
}

.contact-link-row {
  text-decoration: none;
  color: var(--primary-color);
  margin-left: 5px;
}

.contact-link-row:hover {
  text-decoration: underline;
  color: var(--primary-hover);
}

.contact-links a {

  text-decoration: none;

  background: #222;

  border: 1px solid var(--border-color);

  color: white;

  padding: 10px 18px;

  border-radius: 30px;

  transition: var(--transition);
}

.contact-links a:hover {

  background: var(--primary-color);

  color: #111;
}

.map-section {
  width: 85%;
  max-width: 1100px;
  margin: 40px auto 80px;

  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;

  align-items: start;
}

.map-container {

  grid-column: 1 / -1;

}

.map-container iframe {

  width: 100%;

  height: 450px;

  border: none;

  border-radius: 20px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);

}


/* ===========================
        MOBILE
=========================== */
@media (min-width: 1024px) {
  .hero img {
    object-position: center 50%;
  }
}



@media(max-width:768px) {

  .hero {

    height: 65vh;

    min-height: 430px;
  }

  .hero-content {

    left: 8%;
    right: 8%;
  }

  .hero-content h1 {

    font-size: 2rem;
  }

  .hero-content p {

    font-size: .85rem;
  }

  .info-section {
    grid-template-columns: 1fr;

    width: 92%;
  }

  .info-card {
    padding: 25px;
  }

  .info-card h2 {

    font-size: 1.8rem;
  }

  .hours-item {

    font-size: .9rem;
  }

  .contact-links {

    justify-content: flex-start;
  }

  .map-section {
    width: 92%;
    margin-top: 40px;
    grid-template-columns: 1fr;

  }

  .map-container iframe {
    height: 320px;
  }
}