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

body {
  font-family: 'Roboto', sans-serif;
  background: #0a0f14;
  color: #e8f1f2;
}

/* HERO */
header {
  background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.9)), url("images/about/cover.webp") no-repeat center center/cover;
  text-align: center;
  padding: 120px 20px;
}

header h1 {
  font-family: 'Oswald', sans-serif;
  font-size: 3.5em;
  letter-spacing: 3px;
}

header p {
  opacity:.8;
  margin-top:10px;
  font-size: 1.5em;
}

/* NAV */
nav {
  position:sticky;
  top:0;
  z-index:999;
  background:#05080b;
  text-align:center;
  padding:15px;
  border-bottom:1px solid #0f2a33;
}

nav a {
  color:#8fd3dd;
  margin:0 20px;
  text-decoration:none;
  font-weight:bold;
  letter-spacing:1px;
}

nav a:hover {
  color:white;
}

/* SECTION */
section {
  max-width:1200px;
  margin:auto;
  padding:60px 20px;
}

h2 {
  font-family:'Oswald';
  letter-spacing:2px;
  margin-bottom:25px;
  color:#8fd3dd;
}

/* PACKAGE GRID */
.package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 packages per row */
  gap: 20px;
}

.package-card {
  position:relative;
  height:280px;
  cursor:pointer;
  border-radius:12px;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  transition: transform .3s ease, box-shadow .3s ease;
}

.package-card:hover {
  transform:scale(1.05);
  box-shadow:0 0 20px rgba(0,255,255,.25);
}

.package-overlay {
  position:absolute;
  bottom:0;
  width:100%;
  padding:20px;
  background:linear-gradient(transparent, rgba(0,0,0,.9));
}

.package-overlay h3 {
  font-family:'Oswald';
  letter-spacing:1px;
}

/* DETAILS PANEL */
.details {
  display:none;
  margin-top:30px;
  padding:25px;
  background:#05080b;
  border-left:4px solid #8fd3dd;
  border-radius:8px;
  animation:fadeIn .4s ease;
}

.logo-container {
  text-align: center;
  margin-bottom: 20px; /* space between logo and title */
}

@keyframes fadeIn {
  from {opacity:0; transform:translateY(10px);}
  to {opacity:1; transform:translateY(0);}
}

/* TEAM */
.team-member {
  margin-bottom:20px;
  padding:15px;
  background:#05080b;
  border-left:3px solid #8fd3dd;
}

#team a{
  color: inherit;
  text-decoration: none;
}

#team a:hover{
  color: #8fd3dd;
}

/* FOOTER */
footer {
  text-align:center;
  padding:25px;
  background:#05080b;
  border-top:1px solid #0f2a33;
  margin-top:40px;
}

html {
  scroll-behavior:smooth;
}

.hero-logo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #8fd3dd;
  transition: all 0.5s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 30px rgba(0,255,255,.3);
  backface-visibility: hidden;
}

/* Floating logo */
.logo-float {
  position: fixed;
  top: 15px;
  left: 20px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(0,255,255,.7);
  z-index: 9999;
}

.logo-wrapper {
  text-align: center;
  margin-bottom: 20px;
  position: relative; /* keep in flow */
}

/* Invisible spacer to prevent jump */
.logo-wrapper::after {
  content: "";
  display: block;
  height: 0; /* will update dynamically via JS */
}

#packages h2 {
  text-align: center;
  width: 100%;
  margin-bottom: 30px;
}

.package-item {
  position: relative;
  display: flex;
  flex-direction: column;
}

.package-details {
  max-height: 0; /* start hidden */
  overflow: hidden;
  background: #05080b;
  border-left: 4px solid #8fd3dd;
  border-radius: 8px;
  margin-top: 10px;
  padding: 0 20px; /* padding will animate */
  transition: max-height 0.4s ease, padding 0.4s ease;
}

/* When visible */
.package-details.show {
  max-height: 500px; /* large enough for content */
  padding: 20px;
}

.read-more-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 15px;
  background: #8fd3dd;
  color: #05080b;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  transition: background 0.3s ease;
}

.read-more-btn:hover {
  background: #5fa6ad;
}

#reviews h2 {
  text-align: center;
  margin-bottom: 30px;
}

#reviews {
  text-align: center;
  padding: 60px 20px;
}

.reviews-container {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.review-card {
  background: #05080b;
  border: 1px solid #0f2a33;
  border-radius: 15px;
  padding: 30px;
  max-width: 350px;
  text-align: center;
  transition: 0.3s ease;
}

.review-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(0,255,255,0.3);
}

.review-profile {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
  border: 3px solid #8fd3dd;
}

.review-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.review-card p {
  font-style: italic;
  margin: 15px 0;
  line-height: 1.6;
}

.review-card h4 {
  margin-top: 15px;
  color: #8fd3dd;
}

.stars {
  color: gold;
  font-size: 20px;
  margin-bottom: 15px;
}

/* MOBILE RESPONSIVE FIX */
@media (max-width: 768px) {
  .package-grid {
    display: grid;
    grid-template-columns: 1fr; /* single column for mobile */
    gap: 20px;
  }

  .package-card {
    height: 200px; /* smaller height on mobile */
  }

  .package-overlay {
    padding: 10px;
  }

  .package-overlay h3 {
    font-size: 1.2em;
  }

  .package-overlay p {
    font-size: 0.9em;
  }

  .package-details {
    padding: 15px 10px;
  }

  .read-more-btn {
    padding: 6px 12px;
    font-size: 0.9em;
  }
}

@keyframes fadeSlide {
  from {opacity:0; transform:translateY(-10px);}
  to {opacity:1; transform:translateY(0);}
}

@media (max-width: 768px) {
  .package-item {
    display: flex;
    flex-direction: column; /* stack image first, details below */
  }
  .package-details {
    margin-top: 0;
    margin-left: 10px;
  }
  nav {
    padding: 20px 10px;
  }

  nav a {
    display: inline-block;
    margin: 10px 15px;   /* adds vertical AND horizontal spacing */
    font-size: 0.95em;   /* slightly smaller for better fit */
  }
}

@media (max-width: 768px) {
  .logo-float {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 160px;       /* revert to original size */
    height: 160px;
    box-shadow: none;   /* remove glow */
    margin: 0 auto;     /* center it */
    display: block;
  }
}