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

body {
  font-family: "Poppins", "Segoe UI", Tahoma, sans-serif;
  color: #333;
  background-color: #fafafa;
  padding: 0;
  margin: 0;
  background: linear-gradient(270deg, #89fbff, #93f0f3, #ffaca9, #fd9c9c);
  background-size: 800% 800%;
  animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

/* Layout */
.container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
  padding: 2rem 0;
}

header {
  text-align: center;
  padding: 2rem 0;
}

header h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2c3e50;
  padding-bottom: 1rem;
}

header p {
  font-size: 1.1rem;
  color: #555;
}

.hero img {
  width: 50%;        /* makes the image 70% of screen width */  /* prevents it from overflowing */
  height: auto;      /* keeps the aspect ratio */
  display: block;    /* removes inline spacing */
  margin: 0 auto; 
  border-radius: 25px;   /* centers the image */
}


.what-is-mri {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1600px;
  margin: 40px auto;
  gap: 20px;
  padding: 20px;
}

.what-is-mri .first,
.what-is-mri .second {
  flex: 1; /* 50% width each */
}

.what-is-mri .first h2 {
  font-size: 2rem;
  margin-bottom: 15px;
  color: #00545a;
}

.what-is-mri .first p {
  font-size: 1.2rem;
  color: #444;
}

.what-is-mri .second img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}

/* All Other Sections */




#mri-at-ncure,
#why-we-are-best,
#safety,
#trust,
#types-of-mri,
#cta {
  max-width: 1300px;
  margin: 60px auto;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  text-align: center;
}

#mri-at-ncure{
  margin: 60px auto;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  text-align: center;
}

#mri-at-ncure h2,
#why-we-are-best h2,
#safety h2,
#trust h2,
#types-of-mri h2,
#cta h2 {
  font-size: 1.8rem;
  margin: 35px;
  color: #00545a;
}

#mri-at-ncure p,
#why-we-are-best p,
#safety p,
#trust p,
#types-of-mri p,
#cta p {
  font-size: 1.15rem;
  color: #555;
  margin-bottom: 55px;
}

.youtube-video {
  border-radius: 15px;    /* curves the corners */
  overflow: hidden;       /* hides the square edges */
}

.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 840px;   /* optional: limit max size on desktop */
  margin: 0 auto;
  padding-bottom: 56.25%; /* 16:9 ratio → 315/560 = 0.5625 */
  height: 0;
  overflow: hidden;
  border-radius: 15px; /* curved corners */
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Lists */
#why-we-are-best ul,
#types-of-mri ul {
  text-align: left;
  margin: 20px auto;
  max-width: 600px;
  font-size: 1.1rem;
  color: #444;
}

#why-we-are-best li,
#types-of-mri li {
  margin-bottom: 10px;
}

/* CTA */
#cta {
  background: #00545a;
  color: white;
}

#cta h2 {
  color: #fff;
}

#cta p {
  color: #f0f0f0;
}


/* Footer */
footer {
  text-align: center;
  padding: 2rem 0;
  color: #777;
  font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
  header h1 {
    font-size: 2rem;
  }

  section {
    padding: 1.5rem;
  }

  section h2 {
    font-size: 1.4rem;
  }

  header h1 {
  padding: 0px;
  padding-top: 80px;
   }
  
  .hero img {
  width: 100%;        /* makes the image 70% of screen width */   /* centers the image */
   }

    .what-is-mri {
    flex-direction: column;
    text-align: center;
  }

  .what-is-mri .first,
  .what-is-mri .second {
    flex: none;
    width: 100%;
  }

  .what-is-mri .first h2 {
    font-size: 1.6rem;
  }

  .what-is-mri .first p {
    font-size: 1rem;
  }

  #mri-at-ncure h2,
  #why-we-are-best h2,
  #safety h2,
  #trust h2,
  #types-of-mri h2,
  #cta h2 {
    font-size: 1.5rem;
  }

  #mri-at-ncure p,
  #why-we-are-best p,
  #safety p,
  #trust p,
  #types-of-mri p,
  #cta p {
    font-size: 1rem;
  }
}