@import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@400;700&family=Lato:wght@400;700&family=Montserrat:wght@400;700&family=Playfair+Display:wght@400;700&family=Raleway:wght@400;700&family=Roboto:wght@400;700&display=swap');

.hero {
  background-image: url('https://www.zennioptical.com/blog/wp-content/uploads/2011/01/ugc-blog-image.jpg'); /* Update with your actual path */
  background-size: cover;
  background-position: center;
  min-height: calc(100vh - 80px); /* Adjust 80px to match your header height */
  color: #222;
  position: relative;
  display: flex;
  align-items: flex-end; /* Push content to bottom */
  padding: 0 20px 60px; /* Bottom padding for spacing */
  top: 0px; /* Adjust to ensure hero section is below the header */
  z-index: 0; /* Ensure hero is below the header */
}

/* Optional overlay for better contrast */
.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, .8));
}

/* Ensure content sits above overlay */
.hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Wrapper for hero text */
.hero-content {
  text-align: center;
  max-width: 100%;
  margin: 60px auto;
}

/* Typography tweaks */
.hero-title {
  font-family: "Lato", sans-serif;
  font-size: 4rem;
  font-weight: 400;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.hero-subtitle {
  font-family: "Lato", sans-serif;
  font-size: 2rem;
  color: #eee;
}

.btn-clinic {
  background-color: rgb(109, 60, 94);
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
}

.btn-clinic:hover {
  background-color: rgb(89, 49, 78);
  color: #fff;
}

body{font-optical-sizing:auto;
    font-family: "Lato", sans-serif;
    font-size: 1.10rem;
    line-height: 1.5;
    background-color: #f2eef5;
}


/* First Section */
/* Custom CSS for the section background */
.eye-care-section {
  margin-top: 3rem; /* Adjust margin as needed */
  background-color: #f2eef5; /* A light, warm off-white/pinkish color */
}

/* Optional: Adjust heading font if you have a custom font loaded */
.eye-care-section h2 {
  font-family: "Georgia", serif; /* Example: Use a serif font for elegance */
  color: #333; /* Darker text for contrast */
}

/* Optional: Adjust paragraph font */
.eye-care-section p {
  font-family: "Inter", sans-serif; /* Example: Use a sans-serif font for readability */
  color: #555;
}

/* Ensure the button color matches the image if different from Bootstrap primary */
.eye-care-section .btn-primary {
  background-color: #6d3c5e; /* Your clinic-purple or a specific button color */
  border-color: #6d3c5e;
}

.eye-care-section .btn-primary:hover {
  background-color: #5a324d; /* Slightly darker on hover */
  border-color: #5a324d;
}

.purple {
    color: rgb(109,60,94) !important;
}

.image-strip img {
  object-fit: cover;
  width: 100%;
  height: 300px;
}

.btn-purple {
  background-color: rgb(109,60,94);
  border-color: rgb(109,60,94);
  color: #fff;
}

.btn-purple:hover,
.btn-purple:focus {
  background-color: rgb(75, 41, 65);
  border-color: rgb(75, 41, 65);
  color: #fff;
}

.btn-outline-white {
  border-color: rgb(255, 255, 255);
  color: rgb(255, 255, 255);
}

.card-outline-purple {
  border-color: rgb(109,60,94);
}


.btn-outline-white:hover,
.btn-outline-white:focus {
  border-color: rgb(207, 207, 207);
  color: rgb(207, 207, 207);
}