/*Imported fonts*/
@import url('https://fonts.googleapis.com/css2?family=Rouge+Script&display=swap'); /* Import Rouge Script font */
@import url('https://fonts.googleapis.com/css2?family=Monsieur+La+Doulaise&family=Rouge+Script&display=swap'); /* Import Monsieur La Doulaise and Rouge Script fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); /* Import Roboto font with weights 400 and 700 */
@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap'); /* Import Pinyon Script font */
@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap'); /* Import Pinyon Script and Playfair Display fonts */

/* Reset and base styles */
* {
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  box-sizing: border-box; /* Use border-box for box sizing */
  font-family: 'Poppins', sans-serif; /* Set default font */
}
body {
  background-image: url('../Images/BG08.jpg'); /* Set background image */
  background-size: cover; /* Cover entire background */
  background-position: center; /* Center background image */
  background-repeat: no-repeat; /* Do not repeat background */
  width: 100%; /* Full width */
  height: 100vh; /* Full viewport height */
}
footer {
  bottom: 0.3rem; /* Position footer slightly above bottom */
  width: 100%; /* Full width */
  background-color: rgba(0, 0, 0, 1.5); /* Black background with opacity (invalid alpha, should be max 1) */
  text-align: center; /* Center text */
  font-size: 14px; /* Set font size */
}
.management {
  display: flex; /* Use flexbox */
  flex-direction: column; /* Stack children vertically */
  height: 80%; /* Set height */
  background-color: rgba(236, 235, 232, 0); /* Transparent background */
  justify-content: center; /* Center content vertically */
  text-align: center; /* Center text */
}
.management-info {
  position: absolute; /* Absolute positioning */
  top: 10em; /* Position from top */
  width: 100%; /* Full width */
  z-index: 1000; /* High stacking order */
}
.management-info h1{
  color: rgba(255, 255, 255, 2); /* White color with invalid alpha (should be max 1) */
  font-weight: 100; /* Thin font weight */
  text-shadow: 1px 1px 3px rgba(5, 0, 0, 1.5); /* Text shadow (invalid alpha) */
  max-width: 1000px; /* Max width */
  margin: 0 auto 1rem auto; /* Center and add bottom margin */
  font-size: 2.5rem; /* Large font size */
  font-family:pinyon; /* Use Pinyon font (should be in quotes and imported) */
}
.management-info p{
  color: rgba(255, 255, 255, 2); /* White color with invalid alpha */
  max-width: 100%; /* Full width */
  margin: 0 auto; /* Center horizontally */
  font-size: 1.2rem; /* Medium font size */
  line-height: 1.3; /* Line height */
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; /* Serif font stack */
}
header nav a {
  color: rgb(11, 39, 39); /* Dark teal color */
  font-weight: 600; /* Semi-bold */
}
.reviews-grid {
  display: grid; /* Use CSS grid */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
  gap: 18px; /* Gap between grid items */
  padding: 32px 20px; /* Padding around grid */
  background-color: rgba(0,0,0,0.5); /* Semi-transparent black background */
}

.review-card {
  border: 1px solid #edf2f7; /* Light border */
  border-radius: 12px; /* Rounded corners */
  text-align: center; /* Center text */
  padding: 16px; /* Padding inside card */
  box-shadow: 0 4px 12px rgb(56, 56, 99); /* Box shadow */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth transitions */
  background: linear-gradient(to right, rgba(0,0,0,0.4), rgba(30,30,30,0.6)); /* Gradient background */
}

.review-card:hover {
  transform: translateY(-3px); /* Move up on hover */
  box-shadow: 0 6px 16px rgba(0,0,0,0.06); /* Larger shadow on hover */
}

.avatar {
  display: inline-block; /* Inline block for avatar */
  width: 64px; /* Set width */
  height: 64px; /* Set height */
  margin-bottom: 10px; /* Space below */
  border-radius: 50%; /* Circular avatar */
  overflow: hidden; /* Hide overflow */
}

.avatar-svg {
  display: block; /* Block display */
  width: 100%; /* Full width */
  height: 100%; /* Full height */
}

.review-card p {
  font-size: 0.95rem; /* Slightly smaller font */
  line-height: 1.4; /* Line height */
  color: #f8dc05; /* Yellow color */
  margin: 0; /* No margin */
  padding: 0 6px; /* Horizontal padding */
}
.avatar img {
  width: 64px; /* Set width */
  height: 64px; /* Set height */
  border-radius: 50%; /* Circular image */
  object-fit: cover; /* Cover object fit */
}
.cta-btn {
  display: inline-block; /* Inline block */
  background-color:  #fe5816; /* Orange background */
  color: white; /* White text */
  padding: 0.8rem 1.5rem; /* Padding */
  font-size: 1.1rem; /* Font size */
  font-weight: bold; /* Bold text */
  border: .5px solid #fe5816; /* Orange border */
  border-radius: 25%; /* Rounded corners (should be px or rem for circles) */
  text-decoration: none; /* Remove underline */
  transition: all .5s ease; /* Smooth transition */
  margin-top: 2rem; /* Top margin */
}
.cta-btn:hover {
  transform: scale(1.5); /* Enlarge on hover */
}

.cta-button {
  background-color: #FF6B00; /* Orange background */
  color: white; /* White text */
  font-weight: bold; /* Bold text */
  padding: 12px 24px; /* Padding */
  border-radius: 6px; /* Rounded corners */
  border: none; /* No border */
  cursor: pointer; /* Pointer cursor */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth transitions */
}

.cta-button:hover {
  transform: scale(1.05); /* Slightly enlarge on hover */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Shadow on hover */
}

.trust-badge {
  display: flex; /* Flexbox */
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
  gap: 6px; /* Gap between items */
  font-size: 0.75rem; /* Small font */
  color: #0a0000; /* Green color */
  margin-top: 14px; /* Top margin */
}

.trust-badge img {
  width: 25px; /* Set width */
  height: 25px; /* Set height */
}

/* Responsive */
@media (max-width: 900px) {
  .reviews-grid { 
  grid-template-columns: repeat(2, 1fr); /* Two columns on medium screens */
  background-color: #edf2f7; /* Light background */
  }
}
@media (max-width: 480px) {
  .reviews-grid { 
  grid-template-columns: 1fr; /* Single column on small screens */
  }
}