html, body { /* Set base font and background for the whole page */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Font stack */
  background-image: url('../Images/BG01.jpg'); /* Background image */
  background-size: cover; /* Cover entire viewport */
  background-attachment: fixed; /* Fixed background on scroll */
  color: #333; /* Default text color */
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  height: 100%; /* Full height */
  display: grid; /* Use grid layout */
}
#about-cards { /* Container for about cards */
  display: grid; /* Grid layout */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
  gap: 20px; /* Space between cards */
  padding: 40px 20px; /* Padding around cards */
}

.card { /* Individual card styling */
  background: rgba(255, 255, 255, 0.1); /* semi-transparent white */
  backdrop-filter: blur(10px); /* frosted glass effect */
  -webkit-backdrop-filter: blur(10px); /* Safari support */
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  padding: 20px;
  color: #fff;
  transition: transform 0.3s ease;
  animation: fadeInUp 0.6s ease forwards;
}

.card:hover { /* Card hover effect */
  transform: translateY(-5px); /* Lift card up */
  box-shadow: 0 6px 16px rgba(219, 107, 10, 0.15); /* Stronger shadow */
}

.card:nth-child(1) { animation-delay: 0.1s; } /* Staggered animation delay */
.card:nth-child(2) { animation-delay: 0.3s; }
.card:nth-child(3) { animation-delay: 0.5s; }
.card:nth-child(4) { animation-delay: 0.7s; }

@keyframes fadeInUp { /* Animation for cards */
  from { opacity: 0; transform: translateY(20px); } /* Start faded and down */
  to { opacity: 1; transform: translateY(0); } /* End visible and in place */
}

#contact-icons { /* Contact icons section */
  text-align: center; /* Center content */
  margin: 40px 0; /* Vertical spacing */
}

.icon-row { /* Row of icons */
  display: flex; /* Flex layout */
  justify-content: center; /* Center horizontally */
  gap: 40px; /* Space between icons */
  font-size: 24px; /* Base icon size */
}

.icon-row a { /* Icon links */
  color: #f1ac0a; /* Default icon color */
  transition: transform 0.3s ease, color 0.3s ease; /* Smooth hover transitions */
}

.fa-facebook-f { font-size: 40px; } /* Facebook icon size */
.fa-instagram { font-size: 40px; } /* Instagram icon size */
.fa-twitter { font-size: 40px; } /* Twitter icon size */
.fas-fa-envelope { font-size: 40px; } /* Envelope icon size (incorrect selector) */
.fas-fa-phone { font-size: 40px; } /* Phone icon size (incorrect selector) */

.icon-row a:hover { /* Icon hover effect */
  transform: scale(2); /* Enlarge icon */
  color:rgb(251, 85, 20); /* Change color on hover */
}

.site-title { /* Main site title */
  text-align: center; /* Centered text */
  font-size: 4rem; /* Large font size */
  font-weight: 900; /* Bold text */
  margin-bottom: 30px; /* Space below */
}

.site-title span { /* Each letter/word in title */
  display: inline-block; /* Allow styling each span */
  color: rgb(0, 0, 0); /* Default color */
}

.site-title span:nth-child(even) { /* Even spans */
  color:rgba(252, 252, 252, 0.8); /* Light color */
}
.site-title span:nth-child(odd) { /* Odd spans */
  color:rgb(251, 85, 20); /* Accent color */
}

header { /* Header bar */
    background-color: rgba(0, 0, 0, 0.1); /* Transparent black background */
    box-shadow: 0 2px 4px rgba(0,0,0,2.0); /* Shadow under header */
    color: white; /* Header text color */
    top: 0; /* Stick to top */
    z-index: 1000; /* Stay above other elements */
}
.platform-card {
  background: rgba(255, 255, 255, 0.1); /* semi-transparent white */
  backdrop-filter: blur(10px); /* frosted glass effect */
  -webkit-backdrop-filter: blur(10px); /* Safari support */
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  padding: 20px;
  color: #fff;
  transition: transform 0.3s ease;
}
.card:hover {
  transform: translateY(-5px);
}

.platform-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.platform {
  background-color: #0078D4;
  color: #fdffff;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 400;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.platform:hover {
  background-color: #457c09;
  transform: scale(1.05);
}

/* Optional: Brand-specific colors */
.platform.airbnb { background-color: #FF5A5F; }
.platform.vrbo { background-color: #003580; }
.platform.booking { background-color: #0758d1; }
.platform.expedia { background-color: #FEC700; color: #000; }

.platform:hover::after {
  content: "Click for more info";
  position: absolute;
  top: 110%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(6, 110, 24, 0.8);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  white-space: nowrap;
  z-index: 10;
}
.platform:nth-child(1) { animation-delay:1.0s; }
.platform:nth-child(2) { animation-delay: 1.5s; }
.platform:nth-child(3) { animation-delay: 2.0s; }
.platform:nth-child(4) { animation-delay: 2.5s; }