/* styles.css — white + light blue theme */
:root{
  --bg:#ffffff;
  --tint:#e6f3ff;
  --ink:#0f172a;
  --muted:#475569;
  --brand:#0ea5e9;   /* light blue */
  --brand-2:#22c55e; /* green accent */
  --card:#ffffff;
  --line:#cfe7ff;
  --ring:#0ea5e955;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  /* font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; */
  font-family: "Tw Cen MT";
  line-height:1.6; color:var(--ink); background:
    radial-gradient(900px 600px at 100% -10%, var(--tint), #ffffff 70%),
    linear-gradient(180deg, #f8fbff, #fff);
  min-height:100dvh;
}

.container{width:min(1100px, 92%); margin-inline:auto}

.site-header{
  position:sticky; top:0; z-index:100;
  backdrop-filter:saturate(150%) blur(8px);
  background: linear-gradient(180deg, #ffffffd9, #ffffffb0 60%, #ffffff00);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; gap:.6rem; align-items:center; text-decoration:none; color:var(--ink); font-weight:700}
.brand-mark{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--brand); color:white; font-weight:900}
.brand-text{letter-spacing:.2px}
.menu{display:flex; gap:.6rem; align-items:center}
.menu a{color:var(--ink); text-decoration:none; opacity:.85; padding:.5rem .7rem; border-radius:10px}
.menu a:hover{background: var(--tint)}
.menu .cta{background:var(--brand); color:#fff; border-radius:999px; padding:.5rem .9rem}
.menu .cta:hover{filter:brightness(0.95)}
.nav-toggle{display:none; background:transparent; border:0; font-size:1.4rem; color:var(--ink)}

.hero{padding:72px 0 40px; background: radial-gradient(600px 300px at 20% 0%, var(--tint), transparent 60%)}
.hero-inner{display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center}
.hero h1{font-size:clamp(1.8rem, 2.6vw + 1rem, 3rem); line-height:1.15; margin:0 0 .8rem}
.hero p{color:var(--muted); margin:0 0 1.2rem}
.hero-art svg{width:100%; height:auto; stroke:var(--brand); fill:none; stroke-width:4; filter: drop-shadow(0 10px 30px #0ea5e955)}

.btn{display:inline-block; padding:.8rem 1.1rem; border-radius:14px; text-decoration:none; font-weight:600; border:1px solid transparent; transition:.2s}
.btn.primary{background:linear-gradient(90deg, var(--brand), #0284c7); color:white; box-shadow:0 10px 25px #0ea5e933}
.btn.ghost{border-color:#00000018; color:var(--ink); background:#00000005}
.btn:hover{transform: translateY(-1px)}

.section{padding:56px 0}
.section.alt{background:linear-gradient(180deg, #f6fbff, #ffffff)}
.section-title{font-size:clamp(1.4rem, 1.3vw + 1rem, 2rem); margin:0 0 1rem}

.grid{display:grid; gap:1rem}
.cards{grid-template-columns: repeat(auto-fit, minmax(260px,1fr))}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1rem; box-shadow:0 8px 20px #00000008}
.card h3{margin-top:0}
.card ul{margin:.5rem 0 0 1.2rem}
.prose ul{padding-left:1.2rem}

.features{grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); margin-top:1rem}
.features article{border:1px dashed var(--line); border-radius:14px; padding:1rem; background:#ffffff77}

.page-hero{padding:64px 0; background: radial-gradient(600px 300px at 100% -20%, var(--tint), transparent 60%)}
.page-hero h1{margin:0 0 .4rem}

.two{grid-template-columns: repeat(auto-fit, minmax(260px,1fr))}

.contact-wrap{display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(260px,1fr))}
.contact-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1rem}

.form{display:grid; gap:.8rem}
.form label{display:grid; gap:.3rem; font-weight:600}
.form input,.form textarea,.form select{
  width:100%; padding:.8rem .9rem; border-radius:12px; border:1px solid #bfdcff;
  background:#fff; color:var(--ink); outline:none;
}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--brand); box-shadow:0 0 0 4px var(--ring)}
.form-note{margin-left:.6rem; color:var(--muted)}

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

.site-footer{padding:26px 0; border-top:1px solid var(--line); text-align:center; color:var(--muted)}

@media (max-width: 860px){
  .hero-inner{grid-template-columns:1fr}
  .menu{display:none; position:absolute; right:4%; top:56px; flex-direction:column; background:#fff; border:1px solid var(--line); padding:.6rem; border-radius:14px; box-shadow:0 10px 30px #00000014}
  .menu.show{display:flex}
  .nav-toggle{display:inline-block}
}


.hero {
  padding: 60px 0;
  background-color: #f5f5f5;
}

.hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* for responsive stacking */
  gap: 2rem;
}

.hero-copy {
  flex: 1 1 50%;
  min-width: 280px;
}

.hero-copy h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.hero-copy p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

.cta-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn {
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
}

.primary {
  background-color: #007bff;
  color: white;
}

.ghost {
  border: 2px solid #007bff;
  color: #007bff;
  background: transparent;
}

.hero-art {
  flex: 1 1 40%;
  min-width: 280px;
}

.hero-art img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* Partner Section Styles */
.partners {
  padding: 40px 0;
  background-color: #f9f9f9;
  overflow: hidden;
}

.partner-carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.partner-track {
  display: flex;
  gap: 40px;
  animation: scrollLeft 30s linear infinite;
  width: max-content;
}

.partner-track img {
  height: 60px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.partner-track img:hover {
  transform: scale(1.1);
}

/* Scrolling animation */
@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Responsive for mobile */
@media (max-width: 768px) {
  .partner-track {
    gap: 20px;
  }

  .partner-track img {
    height: 40px;
  }

  .section-title {
    font-size: 18px;
    text-align: center;
  }
}

.partners .section-title {
  text-align: center;
}


/* ===== Why Us Section ===== */
.why-us {
  padding: 60px 0;
  background: #fff;
}

.why-us .section-title {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 40px;
  color: #0f172a;
}

.why-us .section-title span {
  color: #00a859; /* highlight keyword in green */
}

.why-content {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}

.why-video {
  flex: 1 1 500px;
  max-width: 550px;
}

.why-video iframe {
  width: 100%;
  height: 315px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.why-text {
  flex: 1 1 400px;
  font-size: 16px;
  line-height: 1.6;
  color: #444;
}

.why-text p {
  margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 992px) {
  .why-content {
    flex-direction: column;
    text-align: center;
  }

  .why-text {
    text-align: left;
    padding: 10px;
  }
}



/* ===== Trusted Brand Section ===== */
.trusted-brand {
  padding: 60px 0;
  background: #fff;
}

.trusted-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.section-tag {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #e63946; /* red accent */
  text-transform: uppercase;
  margin-bottom: 10px;
}

.trusted-text {
  flex: 1 1 50%;
  font-size: 16px;
  line-height: 1.7;
  color: #444;
}

.trusted-text .section-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #0f172a;
}

.trusted-text .section-title span {
  color: #0077ff; /* blue highlight */
}

.trusted-text p {
  margin-bottom: 15px;
}

.ceo-profile {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.ceo-profile img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 15px;
}

.ceo-profile h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.ceo-profile span {
  font-size: 14px;
  color: #666;
}

/* Right Image with Frame */
.trusted-image {
  flex: 1 1 40%;
  position: relative;
}

.image-frame {
  position: relative;
  display: inline-block;
  border: 4px solid #ff6f00; /* orange border like Avyukt */
  padding: 6px;
}

.image-frame img {
  display: block;
  width: 100%;
  border-radius: 6px;
}

/* Responsive */
@media (max-width: 992px) {
  .trusted-content {
    flex-direction: column;
  }

  .trusted-image {
    order: -1;
    margin-bottom: 20px;
  }
}



/* ===== Health Goals Section ===== */
.health-goals {
  padding: 60px 0;
  background: #2c2c34; /* dark background */
  color: #fff;
}

.goals-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.goals-image {
  flex: 1 1 40%;
}

.goals-image .image-frame {
  border: 4px solid #ff6f00; /* orange border */
  padding: 6px;
  display: inline-block;
}

.goals-image img {
  width: 100%;
  border-radius: 6px;
}

.goals-text {
  flex: 1 1 50%;
}

.goals-text .section-tag {
  font-size: 14px;
  font-weight: 600;
  color: #ff6f00;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 10px;
}

.goals-text .section-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.4;
  color: white;
}

.goals-text .section-title span {
  color: white;
}

.goals-text p {
  font-size: 16px;
  margin-bottom: 25px;
  color: #ddd;
  line-height: 1.6;
}

/* Progress Bars */
.progress-item {
  margin-bottom: 20px;
}

.progress-item span {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
}

.progress-bar {
  background: #444;
  border-radius: 20px;
  height: 10px;
  overflow: hidden;
}

.progress-bar .fill {
  background: linear-gradient(90deg, #0077ff, #00c853);
  height: 100%;
  border-radius: 20px;
}

/* Responsive */
@media (max-width: 992px) {
  .goals-content {
    flex-direction: column;
  }

  .goals-image {
    margin-bottom: 20px;
  }
}


/* Hero Section */
.appointment-hero {
  position: relative;
  background: #f1f7ff;
  padding: 80px 20px;
}
.appointment-hero .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.hero-text {
  flex: 1 1 50%;
}
.hero-text h1 {
  font-size: 40px;
  margin-bottom: 15px;
  color: #0f172a;
}
.hero-text p {
  font-size: 18px;
  color: #555;
}
.hero-img {
  flex: 1 1 40%;
  text-align: center;
}
.hero-img img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

/* Appointment Section */
.appointment-section {
  padding: 60px 0;
  background: #fff;
}
.form.card {
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
.form.card h2 {
  margin-bottom: 20px;
  text-align: center;
  color: #0077ff;
}
.form.card input,
.form.card select,
.form.card textarea {
  width: 100%;
  padding: 12px;
  margin-top: 6px;
  border: 1px solid #ccc;
  border-radius: 6px;
}
.form.card button {
  display: block;
  width: 100%;
  background: linear-gradient(90deg, #0077ff, #00c853);
  color: #fff;
  border: none;
  padding: 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 15px;
}
.form.card button:hover {
  opacity: 0.9;
}

/* Services Grid */
.services-online {
  padding: 60px 20px;
  background: #f9f9f9;
  text-align: center;
}
.services-online .section-title {
  font-size: 28px;
  margin-bottom: 40px;
  color: #0f172a;
}
.grid.four {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
}
.service-card {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}
.service-card:hover {
  transform: translateY(-6px);
}
.service-card img {
  height: 60px;
  margin-bottom: 15px;
}
.service-card h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #0077ff;
}
.service-card p {
  font-size: 14px;
  color: #555;
}


/* CSS */
.about-hero {
  position: relative;
  width: 100%;
  height: 60vh; /* adjust height */
  background: url("img/Ambulance.jpg") no-repeat center center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-hero .overlay {
  background: rgba(0, 0, 0, 0.5); /* dark overlay */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-hero h1 {
  color: #fff;
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
}


/* About Section Styles */
.about-section {
  padding: 60px 10%;
  background: #fff;
}

.about-container {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.about-image img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.about-content {
  flex: 1;
  color: #444;
}

.about-content h2 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.about-content p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 15px;
}

/* Responsive */
@media (max-width: 992px) {
  .about-container {
    flex-direction: column;
    text-align: center;
  }

  .about-content {
    margin-top: 20px;
  }
}

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

body {
font-family: "Tw Cen MT";
}

/* CONTACT SECTION */
.contact {
  background: linear-gradient(135deg, #0077ff, #00c853);
  color: #fff;
  text-align: center;
  padding: 60px 20px;
}

.contact .section-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 40px;
  letter-spacing: 1px;
}

.contact-wrap {
  display: grid;
  gap: 25px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 1100px;
  margin: 0 auto;
}

.contact-card {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 30px 20px;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.contact-card:hover {
  transform: translateY(-8px) scale(1.03);
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
}

.contact-card .icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.contact-card p {
  font-size: 1.1rem;
  margin-bottom: 10px;
  font-weight: 400;
}

.contact-link {
  display: inline-block;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 10px;
  transition: color 0.3s;
}

.contact-link:hover {
  color: #ffeb3b;
}


/* ===== Services Section ===== */
.section.services {
  padding: 60px 0;
  background: #fff;
  text-align: center;
}

.section.services .section-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 40px;
  color: #1a1a1a;
}

.grid.service-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

.service-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  text-align: left;
  display: flex;
  flex-direction: column; /* ensures proper spacing */
  height: 100%;           /* cards equal height */
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 18px rgba(11,107,211,0.25), 0 4px 10px rgba(46,139,87,0.2); 
  /* 🔹 blue + green glow on hover */
}

.service-card img {
  width: 100%;
  height: 290px;       /* 🔹 fits your 600x600 source images */
  object-fit: cover;   /* 🔹 crops the image proportionally */
  display: block;
  border-bottom: 1px solid #eee;
}

.service-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 15px 15px 10px;
  color: #222;
}

.service-card p {
  font-size: 14px;
  color: #666;
  margin: 0 15px 20px;
  line-height: 1.5;
  flex-grow: 1; /* ensures text fills space evenly */
}

/* Gradient Button */
.service-card .btn.small {
  display: inline-block;
  margin: 0 15px 20px;
  padding: 6px 18px;
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(90deg, #0b6bd3, #2e8b57); /* 🔹 Blue → Green gradient */
  color: #fff;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.service-card .btn.small:hover {
  background: linear-gradient(90deg, #094fa5, #1f6b40); /* 🔹 Darker hover gradient */
}

/* About Section Styling */
.about-hh {
  margin-top: 40px;
}

.about-hh .about-img {
  display: flex;
  justify-content: center;
}

.img-frame {
  border: 6px solid #f15a5a; /* outer frame color */
  padding: 6px;
  display: inline-block;
  border-radius: 8px;
}

.img-frame img {
  display: block;
  max-width: 100%;
  border-radius: 6px;
}

.about-hh h2 {
  color: var(--brand-blue);
  font-weight: 700;
  margin-bottom: 12px;
  font-size: 1.5rem;
}

.about-hh h3 {
  margin-top: 24px;
  color: var(--brand-green);
  font-size: 1.2rem;
  font-weight: 600;
}

.about-hh p {
  margin-bottom: 1em;
  color: #333;
  line-height: 1.7;
  text-align: justify;
}


/* Make sure the video container is responsive */
.why-video iframe {
  width: 100%;  /* Ensure iframe takes up the full width of its container */
  height: 315px;  /* You can adjust the height as needed */
  max-width: 100%;  /* Prevent overflow */
  aspect-ratio: 16/9;  /* Maintain the video aspect ratio */
  border: none;  /* Optional: removes border */
}

/* For small screens, ensure everything is aligned well */
@media (max-width: 768px) {
  .why-content {
    display: block; /* Stack content on top of each other on smaller screens */
  }
  .why-video, .why-text {
    width: 100%;  /* Ensure each element takes full width */
    margin-bottom: 20px; /* Add some space between video and text */
  }
}