@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');

:root {
  --bg:#000515;
  --text:#fff;
  --muted:#00D1E2;
  --radius:10px;
  --accent:#FF2E01;
  --btn:#07102f;
  --btn-text:#fff;
  --max-width:1080px;
  --shadow:0 2px 4px rgba(0,0,0,.08);
}

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body {
  font-family:'Roboto', sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3 {
  font-family:'Montserrat',system-ui,sans-serif;
  font-weight:700;
  line-height:1.15;
  text-wrap:balance;
}

.container {
  max-width:var(--max-width);
  margin-inline:auto;
  padding:0 1.25rem;
}

.site-header {
  background:#fff;
}

.nav-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.85rem 0;
  font-family:'Montserrat',sans-serif;
  font-weight:600;
}

.logo {
  font-size:1.05rem;
  letter-spacing:.5px;
}

nav ul {
  list-style:none;
  display:flex;
  gap:2.25rem;
}

nav a {
  text-decoration:none;
  color:var(--text);
  font-size:.95rem;
  position:relative;
}

nav a:focus-visible,
nav a:hover {
  outline:none;
}

nav a:hover::after,
nav a:focus-visible::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-4px;
  height:2px;
  background:var(--text);
}

.hero {
  position:relative;
  /* aspect-ratio: 16/6.8; */
  aspect-ratio: 16 / 8.6;
  width:100%;
  overflow:hidden;
  border-top:1px solid #ddd;
}



.hero-img {
    width: 100%;
    height: calc(100% + 30px);
    object-fit: cover;
    display: block;
    transform: translateY(-30px);
}


/* .hero {
    position: relative;
    aspect-ratio: 16 / 8.6;
    width: 100%;
    overflow: hidden;
    border-top: 1px solid #ddd;
}

.hero-img {
width: 100%;
    height: 108%;
    display: block;
    object-fit: cover;
    object-position: center center;
    transform: translateY(-20px);
} */


.hero-overlay {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:2.5rem 3rem;
  color:#fff;
  background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.05) 50%,rgba(0,0,0,0));
  text-transform:uppercase;
}

.hero-overlay h1 {
  font-size:clamp(1.9rem,3.4vw + 1rem,3.4rem);
  max-width:20ch;
  margin-bottom:1.2rem;
}

.hero-overlay p {
  font-size:1.05rem;
  line-height:1.35;
  text-transform:none;
  margin-bottom:1.75rem;
  font-weight:500;
}

.btn {
  background:var(--btn);
  color:var(--btn-text);
  text-decoration:none;
  padding:.85rem 1.6rem;
  border-radius:6px;
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.5px;
  transition:background .25s, transform .25s;
}

.btn:hover,
.btn:focus-visible {
  background:#fff;
  transform:translateY(-2px);
}

.tours {
  padding:3.2rem 0 2rem;
}

.tours h2 {
  font-size:1.9rem;
  margin-bottom:1.4rem;
}

.cards {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1.3rem;
}

.card {
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid #e5e5e5;
  box-shadow:var(--shadow);
  transition:box-shadow .3s, transform .3s;
}

.card:hover {
  box-shadow:0 6px 24px -6px rgba(0,0,0,.15);
  transform:translateY(-4px);
}

.card-media {
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
}

.card-media img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.card-body {
  padding:1rem 1rem 1.2rem;
  display:flex;
  flex-direction:column;
  gap:.55rem;
}

.card-body h3 {
  font-size:1.05rem;
  font-weight:700;
}

.card-body p {
  font-size:.82rem;
  color:var(--muted);
}

.learn {
  font-size:.8rem;
  text-decoration:none;
  font-weight:600;
  letter-spacing:.4px;
  color:#000;
  margin-top:.25rem;
  align-self:flex-start;
  position:relative;
}

.learn::after {
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:100%;
  height:1px;
  background:#000;
  transform:scaleX(.3);
  transform-origin:left;
  transition:transform .3s;
}

.learn:hover::after,
.learn:focus-visible::after {
  transform:scaleX(1);
}

.about {
  margin-top:3.8rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.4rem;
  align-items:start;
  padding-bottom:4rem;
}

.about-media {
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  aspect-ratio:4/3;
}

.about-media img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.about-text h2 {
  font-size:1.9rem;
  margin-bottom:1rem;
}

.about-text p + p {
  margin-top:1rem;
}

.site-footer {
  background:#fafafa;
  border-top:1px solid #e5e5e5;
  padding:1.8rem 0;
  font-size:.8rem;
  text-align:center;
}

@media (max-width:920px) {
  .hero-overlay {
    padding:2rem 2rem;
  }
  .about {
    grid-template-columns:1fr;
  }
  .about-media {
    order:-1;
  }
}

@media (max-width:640px) {
  nav ul {
    gap:1.3rem;
  }
  .hero {
    aspect-ratio: 16/10;
  }
  .hero-overlay h1 {
    font-size:clamp(1.9rem,6.5vw + 1rem,2.7rem);
  }
  .hero-overlay p {
    font-size:.95rem;
  }
  .about-text h2,
  .tours h2 {
    font-size:1.6rem;
  }
}