@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Lora:ital,wght@0,400..700;1,400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* Base Reset & Fonts */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* font-family: "Roboto", sans-serif; */
  scroll-behavior: smooth;
}

body {
  background: #E3F7F8;
  padding-top: 30px;
}

section {
  scroll-margin-top: 50px;
}

h1,
h2 {
  color: #006064;
}


/* Navigation Bar */
.nav {
  height: 50px;
  width: 100%;
  background-color: #6c9bcb;
  opacity: 92%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  font-family: "Playfair Display", serif;
  /*(this for the tilte and navigation bar)*/
  font-weight: 400;
}

.nav .nav-links {
  padding-right: 30px;
  gap: 25px;
}

.nav .name {
  padding-left: 30px;
}

.nav .name img{
  width: 50px;
  height: 50px;
}

.nav .name h1 {
  margin: 0;
  font-size: 1.7rem;
  color: white;
  background: transparent;
  align-items: center;
}

.nav>.nav-header {
  display: inline;
}

.nav>.nav-header>.nav-title {
  display: inline-block;
  font-size: 22px;
  color: #fff;
  padding: 10px 10px 10px 10px;
}

.nav>.nav-btn {
  display: none;
}

.nav>.nav-links {
  display: inline;
  float: right;
  font-size: 18px;
}

.nav>.nav-links>a {
  display: inline-block;
  padding: 13px 10px 13px 10px;
  text-decoration: none;
  color: #efefef;
  font-weight: bold;
  letter-spacing: 0.3px;
}

.nav>.nav-links>a:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.nav>#nav-check {
  display: none;
}


.name a h1 {
  text-decoration: none;
  float: left;
  font-size: x-large;
  color: whitesmoke;
  padding: 5.5px 10px 13px 10px;
}

.name img {
  float: left;
}

@media (max-width: 830px) {

  .nav>.nav-btn {
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 0px;
  }

  .nav>.name {
    display: block;
    float: left;
    position: absolute;
    padding-left: 0px;
  }

  .nav .name h1 {
    font-size: 1.9rem;
    align-items: center;
    padding-top: 5.5px !important;
    padding-left: 50px !important;
  }

  .nav>.nav-btn>label {
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 13px;
  }

  .nav>.nav-btn>label:hover,
  .nav #nav-check:checked~.nav-btn>label {
    background-color: rgba(0, 0, 0, 0.3);
  }

  .nav>.nav-btn>label>span {
    display: block;
    width: 25px;
    height: 10px;
    border-top: 2px solid #eee;
  }

  .nav>.nav-links {
    position: absolute;
    display: block;
    width: 100%;
    background-color: #6c9bcb;
    font-weight: bolder;
    height: 0px;
    transition: all 0.3s ease-in;
    overflow-y: hidden;
    top: 50px;
    left: 0px;
  }

  .nav>.nav-links>a {
    display: flex;
    width: 100%;
    font-size: xx-large;
    margin-top: 50px;
    align-items: center;
    justify-content: center;
  }

  .nav>#nav-check:not(:checked)~.nav-links {
    height: 0px;
  }

  .nav>#nav-check:checked~.nav-links {
    height: calc(100vh - 50px);
    overflow-y: auto;
  }
}

@media (max-width: 410px){
  .nav .name h1 {
    padding-left: 20px !important;
  }
}

/* Full Height Sections */
.contact-section {
  min-height: 100vh;
  padding: 4rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* About Section */
/* Doctor Image */

.hero-right {
  display: flex;
  justify-content: center;
  flex-direction: column;
}


.tilt-image {
  perspective: 1000px;
  width: 350px;
}

.tilt-image img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.mainhero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  /* font-family: 'Segoe UI', sans-serif; */
  /* padding: 0 2rem 0 2rem; */
  background-color: #E3F7F8;
  /* flex-direction: row; */
  /* width: 100%; */
}

.text-with-logo-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.text-content {
  flex: 1;
  margin-top: 15px;
}

.logo-side img {
  height: 120px;
  /* Adjust to span badge to designation */
  width: auto;
  object-fit: contain;
  /* fine-tune vertical alignment */
}

.start-container {
  display: flex;
  gap: 4rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1200px;
  width: 100%;
  padding: 40px 20px;
}

div.mainhero-text {
  max-width: 700px;
  text-align: justify;
  padding: 10px 0;
}

.badge {
  background: #d5e3fd;
  color: #1e50d9;
  padding: 6px 16px;
  font-size: 0.9rem;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 10px;
}

.mainhero-text h1 {
  font-size: 2.6rem;
  color: #071c34;
  font-weight: bolder;
  line-height: 1.2;
  margin-bottom: 5px;
  text-align: left !important;
}

.mainhero-text h3 {
  color: #1e50d9;
  font-size: 1.2rem;
  margin-bottom: 15px;
  margin-top: 0;
}

.desc {
  font-size: 1rem;
  font-weight: 600;
  color: #555;
  line-height: 1.6;
  margin-bottom: 15px;
  font-family: "Lora", serif;
  /*italics for your description and normal for testimonials */
  /* font-style: italic; */
}

.buttons {
  display: flex;
  gap: 1rem;
}

.btn {
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
}

.btn.primary {
  background: linear-gradient(135deg, #1e50d9, #6bbcff);
  color: white;
  box-shadow: 0 8px 20px rgba(30, 80, 217, 0.3);
  transition: all 0.3s ease;
}

.btn.outline {
  border: 2px solid #1e50d9;
  color: #1e50d9;
  background-color: transparent;
  transition: all 0.3s ease;
}

.btn.primary:hover,
.btn.outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(30, 80, 217, 0.4);
}

/* Services Section */
.section-ourservices {
  min-height: 100vh;
  width: 100%;
  position: relative;
  z-index: 0;
  background-color: #E3F7F8;
  padding: 10px;
}

.section-ourservices::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.section-ourservices::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  /* flex-direction: row; */
  margin-bottom: 40px;
}

.container .card {
  position: relative;
  width: 500px;
  height: 380px;
  margin: 15px 50px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: linear-gradient(145deg, rgba(88, 150, 195, 0.6), rgba(52, 116, 167, 0.6));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.5s ease;
  z-index: 1;
  border-radius: 16px;
}

.container .card .content {
  padding: 12px;
  text-align: center;
  transition: 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.container-up{
  margin-bottom: 15px ;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row ;
}
.container-down{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row ;
}

.container .card:hover {
  transform: translateY(-10px);
  background: rgba(28, 66, 106, 0.45);
  box-shadow: 0 12px 40px 0 rgba(108, 155, 203, 0.5);
  transition: 0.5s;
  transform: scale(1.1);
  z-index: 2;
}

.container .card .content h3 {
  font-size: 2em;
  font-weight: bolder;
  /* color: #ffffff; */
  color: #1c2c3d;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  z-index: 1;
  margin-bottom: 15px;
  margin-top: 10px;
}

.container .card .content p {
  font-size: 1.1em;
  font-weight: 400;
  pointer-events: none;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(78, 78, 78, 0.2);
}

.text-box {
  max-height: 250px;
  max-width: 450px;
  overflow: hidden;
  transition: max-height 0.3s ease;
  margin-bottom: 15px;
  text-align: inherit;
  /* font-family: "Roboto", sans-serif; */
  font-family: "Lora", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1em;
  letter-spacing: 1px;
  line-height: 1.4rem;
}

.text-box.expanded {
  max-height: 250px;
  overflow-y: auto;
  border: 1px dashed rgb(94, 198, 250);
  border-radius: 5px;
  padding: 5px;
  font-size: 1em;
  font-family: "Lora", serif;
  font-style: italic;
  font-weight: 400;
}

.text-box::-webkit-scrollbar {
  width: 6px;
}

.text-box::-webkit-scrollbar-thumb {
  background-color: #1e50d9;
  border-radius: 10px;
}

.more-text {
  display: none;
}

.text-box.expanded .more-text {
  display: inline;
}

.container .card .content .read-more-btn {
  position: relative;
  display: inline-block;
  padding: 10px 25px;
  border-radius: 20px;
  text-decoration: none;
  box-shadow: 0 5px 15px rgba(136, 207, 231, 0.4);
  background: linear-gradient(to right, #6C9BCB, #88CFE7);
  color: #fff;
  font-weight: bold;
  transition: 0.3s ease;
  border-radius: 25px;
  cursor: pointer;
  border: none;
}

.container .card .content .read-more-btn:hover {
  background: #4a84a7;
  transform: scale(1.05);
}

@media (max-width: 450px) {
  .card{
    height: 440px !important;
    width: 335px !important;
    margin: 10px 15px !important;
  }
  .text-box.expanded{
    max-height: 280px !important;
  }
}

@media (min-width: 800px) and (max-width: 1024px) {
  .card{
    height: 440px !important;
    width: 360px !important;
    margin: 10px 15px !important;
  }
}

/* Testimonials Section */

.wrapper {
  /* min-height: 92vh !important; */
  width: 100%;
  display: inline-block;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  line-height: 1.2;
  background: #E3F7F8;
  font-weight: 300;
  box-sizing: border-box;
  min-height: auto;
  padding: 0 1rem 2rem 1rem;
}

.wrapper p {
  line-height: 1.6;
  font-family: "Lora", serif;
  /*italics for your description and normal for testimonials */
  font-style: italic;
}

.wrapper img {
  width: 300px;
  height: 300px;
  padding-bottom: 10px;
}

.wrapper .button {
  position: relative;
  display: table;
  padding: 0.75em 3em;
  background: #000;
  color: #071c34;
  text-decoration: none;
  margin-top: 1.5em;
  text-transform: uppercase;
}

.wrapper .button:hover {
  background: #2f2f2f;
}

.wrapper header {
  text-align: center;
  color: #071c34;
  background: #18181b;
  /* font-family: "Roboto Condensed", sans-serif; */
  padding: 2em;
  font-size: x-large;
}

.swiper .content-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
  width: 100%;
  justify-content: center !important;
  align-items: center;
  overflow: hidden;
  padding: 1em 0;
}

.swiper .content-wrapper .content {
  text-align: justify;
  display: flex;
  flex-direction: column;
  justify-content: center !important;
  align-items: center;
  margin: 0 auto;
  color: #000;
  /* height: auto; */
  padding: 1.5em;
  font-size: 0.95rem;
  /* max-width: 600px; */
  line-height: 1.5;
  border-radius: 10px;
}

.swiper .content-wrapper .content :first-child {
  margin: 0;
}

.swiper .content-wrapper .content .swiper-avatar {
  width: 100%;
  height: auto;
  max-width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper .content-wrapper .content .swiper-avatar img {
  border-radius: 15px;
}

.swiper .content-wrapper .content .swiper-avatar .citetext {
  text-align: left;
  font-family: "Lora", serif;
  /*italics for your description and normal for testimonials */
  font-style: italic;
  font-weight: 400;
}

.swiper .content-wrapper .content .cite {
  font-size: 14px;
  font-weight: bold;
  margin-top: 10px;
  font-family: "Lora", serif;
  /*italics for your description and normal for testimonials */
  font-style: normal !important;
}

.swiper .swiper-slide {
  margin: 0 auto;
  height: auto;
  width: 100%;
  padding: 0;
  opacity: 0.2;
  border-radius: 10px;
  transition: all 0.5s ease-in-out;
  background: #d5eff4;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.swiper .swiper-slide.swiper-slide-active {
  background: linear-gradient(135deg, #a8d8ea, #dcedf4) !important;
  opacity: 1 !important;
  transform: scale(1.02) !important;
  border-radius: 10px !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 2;
}

.swiper .swiper-avatar img {
  max-width: 100%;
  border-radius: 10px;
}

.swiper .swiper-nav-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: auto;
  /* flex-direction: row; */
  gap: 1rem;
  margin-top: 1rem;
  padding: 0;
}

.swiper .swiper-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background: #E3F7F8;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
}

.swiper .swiper-nav-wrapper .swiper-button-next,
.swiper .swiper-nav-wrapper .swiper-button-prev {
  width: 30px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  position: relative !important;
}

.swiper .swiper-nav-wrapper .swiper-button-next:after,
.swiper .swiper-nav-wrapper .swiper-button-prev:after {
  display: none;
}

.swiper .swiper-nav-wrapper .swiper-button-next,
.swiper .swiper-nav-wrapper .swiper-container-rtl .swiper-button-prev {
  background-image: url("data:image/svg+xml,%0A%3Csvg width='9px' height='16px' viewBox='0 0 9 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='chevron-right' fill='%23071c34' fill-rule='nonzero'%3E%3Cpath d='M8.674805,7.066406 L1.924805,0.316406 C1.696288,0.105468 1.432619,0 1.133789,0 C0.834959,0 0.57129,0.105468 0.342773,0.316406 C0.114257,0.544923 0,0.808592 0,1.107422 C0,1.406251 0.114257,1.669921 0.342773,1.898438 L6.301758,7.857422 L0.342773,13.816406 C0.114257,14.044923 0,14.308592 0,14.607422 C0,14.906251 0.114257,15.169921 0.342773,15.398438 C0.465821,15.521485 0.584472,15.609375 0.69873,15.662109 C0.812989,15.714844 0.958007,15.741211 1.133789,15.741211 C1.309571,15.741211 1.454589,15.714844 1.568848,15.662109 C1.683106,15.609375 1.801757,15.521485 1.924805,15.398438 L8.674805,8.648438 C8.903321,8.419921 9.017578,8.156251 9.017578,7.857422 C9.017578,7.558592 8.903321,7.294923 8.674805,7.066406 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
  width: 30px;
  height: 30px;
  background-size: 30px 30px;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
}

.swiper .swiper-nav-wrapper .swiper-button-prev,
.swiper .swiper-nav-wrapper .swiper-container-rtl .swiper-button-next {
  background-image: url("data:image/svg+xml,%0A%3Csvg width='9px' height='16px' viewBox='0 0 9 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='chevron-right' transform='translate(4.508789, 7.870605) rotate(-180.000000) translate(-4.508789, -7.870605) translate(-0.000000, -0.000000)' fill='%23071c34' fill-rule='nonzero'%3E%3Cpath d='M8.674805,7.066406 L1.924805,0.316406 C1.696288,0.105468 1.432619,0 1.133789,0 C0.834959,0 0.57129,0.105468 0.342773,0.316406 C0.114257,0.544923 0,0.808592 0,1.107422 C0,1.406251 0.114257,1.669921 0.342773,1.898438 L6.301758,7.857422 L0.342773,13.816406 C0.114257,14.044923 0,14.308592 0,14.607422 C0,14.906251 0.114257,15.169921 0.342773,15.398438 C0.465821,15.521485 0.584472,15.609375 0.69873,15.662109 C0.812989,15.714844 0.958007,15.741211 1.133789,15.741211 C1.309571,15.741211 1.454589,15.714844 1.568848,15.662109 C1.683106,15.609375 1.801757,15.521485 1.924805,15.398438 L8.674805,8.648438 C8.903321,8.419921 9.017578,8.156251 9.017578,7.857422 C9.017578,7.558592 8.903321,7.294923 8.674805,7.066406 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
  width: 30px;
  height: 30px;
  background-size: 30px 30px;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
}

.swiper-pagination {
  margin: 0;
  padding: 0;
  width: auto;
  position: relative !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
}

.swiper-pagination .swiper-pagination-bullets {
  margin: 0;
  background: #1e50d9 !important;
  opacity: 0.6;
}

.swiper-pagination .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0;
  background: #071c34 !important;
}

.swiper-pagination-bullet {
  background: #071c34 !important;
  transition: all 0.2s ease-in-out;
  background: #1e50d9 !important;
  opacity: 0.6;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.swiper-pagination-bullets.swiper-pagination-horizontal {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  bottom: 0;
  top: 0;
  bottom: 0;
  width: auto;
  padding: 0 1.5em;
}

.swiper-pagination-bullet-active {
  transform: scale(1.5);
  background: #0f336d !important;
  opacity: 1;
}

/* Gallery Section */
.container3 {
  display: flex;
  width: 100%;
  height: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .container3 {
    padding: 32px;
  }
}

@media (min-width: 1024px) {
  .container3 {
    padding: 40px;
  }
}

.carousel-container {
  display: block;
  width: 100%;
  /* max-width: 1280px; */
  align-items: center;
  justify-content: center;
  position: relative;
}

.carousel-wrapper {
  display: flex;
  width: 100%;
  height: auto;
  overflow: auto;
  border-radius: 20px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.carousel-wrapper::-webkit-scrollbar {
  display: none;
}

.carousel-wrapper.dragging {
  scroll-behavior: auto;
}

.carousel {
  display: flex;
  width: max-content;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 25px;
  animation: scroll 30s linear infinite;
  overflow: visible;
}

.carousel:hover {
  animation-play-state: paused;
}


@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.carousel .carousel-slide {
  display: flex;
  flex: 0 0 auto;
  width: 420px;
  min-width: 144px;
  height: 300px;
  flex-grow: 0;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background-color: #fff;
  transition-property: width, min-width, height, flex, flex-grow, flex-shrink, flex-basis, opacity;
  transition-duration: 240ms;
}

.carousel .carousel-slide:hover {
  /* transform: translateY(-10px); */
  transform: scale(1.05);
  transition: 0.8s;
  z-index: 2;
}

.carousel .carousel-slide .carousel-image {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center;
  transition: all 2s;
}


.carousel .carousel-slide.loaded img,
.carousel .carousel-slide.loaded .carousel-image {
  opacity: 1;
  transition-delay: 100ms;
}

.carousel .carousel-slide:hover {
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
}

.carousel:hover .carousel-slide:not(:hover):not(.active) {
  opacity: 0.5;
}


/* Contact Section */
.contact-title {
  /* color: #1c2c3d; */
  color: #071c34;
  font-weight: 700;
  margin-bottom: 50px;
  text-align: center;
  font-family: "Playfair Display", serif;
  /*(this for the tilte and navigation bar)*/
}

.contact-title h1 {
  font-size: 3rem;
  font-weight: bolder;
  color: #071c34;
  margin: 0;
  padding: 0;
  position: relative;
}

@media (max-width: 768px) {
  .contact-title h1 {
    font-size: 28px;
  }
}

.contact-page-sec {
  padding: 60px 0;
  min-height: 100vh;
  background-color: #E3F7F8;
}

.container2 {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

/* Contact Info Boxes */
.contact-info-row {
  justify-content: space-between;
  gap: 20px;
}

.contact-info {
  flex: 1;
  min-width: 280px;
  text-decoration: none;
}

.contact-info-item {
  background: #071c34;
  text-align: center;
  padding: 30px 20px;
  border-radius: 6px;
}

.contact-info-icon i:hover {
  cursor: pointer;
  color: #ffffff;
}

.contact-info-icon i {
  font-size: 40px;
  color: #fda40b;
  margin-bottom: 15px;
  padding: 0 20px;
}

.contact-info-text h2 {
  color: #fff;
  font-size: 22px;
  margin-bottom: 10px;
}

.contact-info-text span {
  color: #bbb;
  display: block;
  font-size: 15.5px;
}

/* Contact icons in a single responsive row */
.contact-info-icon {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  white-space: nowrap;
  margin-bottom: 16px;
}

.contact-info-icon a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* Remove vertical spacing within the icon row */
.contact-info-icon i {
  margin-bottom: 0;
  padding: 0 12px;
}

/* Ensure all four icons fit on one line on small screens */
@media (max-width: 480px) {
  .contact-info-icon {
    gap: 8px;
  }
  .contact-info-icon i {
    font-size: 28px;
    padding: 0 6px;
  }
}

/* Form & Map Section */
.form-map-row {
  gap: 40px;
  flex-wrap: wrap;
}

.contact-page-form {
  flex: 2;
  min-width: 280px;
}

.contact-page-form h2 {
  font-size: 24px;
  font-weight: 700;
  color: #071c34;
  margin-bottom: 20px;
}

.input-group {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  position: relative !important;
}

.input-group.full {
  flex-direction: column;
}

.input-group .border {
  border: 2px solid #071c34;
  border-radius: 6px;
  padding: 10px;
}

.contact-page-form input,
.contact-page-form select,
.contact-page-form textarea {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #f0f0f0;
  background: #f9f9f9;
  border-radius: 4px;
  font-size: 14px;
  width: 100%;
  cursor: pointer;
}

.contact-page-form textarea {
  height: 120px;
  resize: vertical;
}

.btn-group {
  margin-top: 20px;
}

.btn-group input[type="submit"] {
  background: #fda40b;
  color: #fff;
  padding: 12px 30px;
  border: none;
  border-radius: 4px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.btn-group input[type="submit"]:hover {
  background: #071c34;
}

/* Floating Labels */
.form-field {
  position: relative;
  flex: 1;
  min-width: 240px;
  height: 40px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 16px 14px 10px 14px; /* extra top space for label */
}

.form-field label {
  position: absolute;
  top: 12px;
  left: 14px;
  font-size: 16px;
  color: #6b7280; /* gray-500 */
  pointer-events: none;
  transition: all 0.15s ease-in-out;
  background: #f9f9f9;
  padding: 0 4px;
}

/* Text inputs & textarea: float when focused or has value */
.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label,
.form-field textarea:focus + label,
.form-field textarea:not(:placeholder-shown) + label {
  top: -8px;
  left: 10px;
  font-size: 12px;
  color: #071c34;
}

/* Select: float on focus or when valid (not the disabled placeholder option) */
.form-field select:focus + label,
.form-field select:valid + label {
  top: -8px;
  left: 10px;
  font-size: 12px;
  color: #071c34;
}

/* Ensure required select with empty value is treated invalid */
.form-field select:invalid {
  color: #6b7280;
}

/* iOS: normalize select and input heights */
.form-field select,
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="number"] {
  -webkit-appearance: none;
  appearance: none;
  min-height: 40px;
  line-height: 1.2;
}

/* Extra padding right for select arrow space */
.form-field select {
  padding-right: 36px;
}

/* Ensure enough top padding for floating label with fixed height */
.form-field input,
.form-field select {
  padding-top: 16px;
  padding-bottom: 10px;
}

.form-field textarea {
  height: 60px !important;
}

/* ********Calender******** */

.flatpickr-calendar .flatpickr-day:not(.flatpickr-disabled) {
    color: #071c34 !important;       /* your desired color */
    font-weight: bold;                 /* optional */
}
.flatpickr-calendar {
  z-index: 99999 !important;
}

/* Ensure placeholder visible and styled consistently */
.contact-page-form input::placeholder {
  color: #7a7a7a;
  opacity: 1; /* Safari/iOS */
}
/* iOS Safari specific placeholder vendor prefix */
.contact-page-form input::-webkit-input-placeholder {
  color: #7a7a7a;
  opacity: 1;
}
.contact-page-form input::-moz-placeholder { /* Firefox */
  color: #7a7a7a;
  opacity: 1;
}
.contact-page-form input:-ms-input-placeholder { /* IE 10-11 */
  color: #7a7a7a;
  opacity: 1;
}
.contact-page-form input::-ms-input-placeholder { /* Edge Legacy */
  color: #7a7a7a;
  opacity: 1;
}

/* iOS Safari autofill text color safeguard */
.contact-page-form input:-webkit-autofill,
.contact-page-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #071c34;
  transition: background-color 9999s ease-out 0s;
}


/* Hover effect for dates */
.flatpickr-calendar .flatpickr-day:hover {
  background: #071c34 !important;
  /* dark background */
  color: #fff !important;
  /* text color on hover */
  border-radius: 50%;
}

/* Selected date */
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.today {
  background: #fff !important;
  /* selected date background */
  color: #fda40b !important;
  /* selected date text color */
}
/* Disabled dates (e.g., past dates) */
.flatpickr-calendar .flatpickr-day.disabled {
    color: #999999 !important;
}

.flatpickr-calendar .flatpickr-month,
.flatpickr-calendar .flatpickr-weekday {
    color: #071c34 !important;   /* Month text color */
}

/* ********Clock******** */
.clockpicker-popover {
  width: 250px !important;
  height: 250px !important;
  background: #071c34 !important;
  border-radius: 12px;
  color: #fda40b !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  position: absolute;
  margin: 0;
  overflow: visible !important;
  z-index: 99999 !important;
}

.clockpicker-popover .popover-title {
  color: #fda40b !important;
}

/* Clock numbers & ticks */
.clockpicker-tick {
  color: #071c34 !important;
  font-weight: 600;
}

/* AM/PM buttons */
.clockpicker-am-pm-block button {
  background-color: #fff !important;
  color: #fda40b !important;
  border-radius: 15px;
  border-color: #071c34 !important;
  padding: 5px 10px;
  margin: 2px;
  font-weight: 600;
}

/* For Loading symbol */
.loader {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #fda40b;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 0.8s linear infinite;
  margin: auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#response-message{
  display:none; 
  color: green; 
  margin-bottom: 20px;
}
#form-loader{
  display:none; 
  text-align:center; 
  margin-bottom:20px;
}

/* Map */
.contact-page-map {
  flex: 1;
  min-width: 280px;
  border: 1px solid #071c34;
}

/* Responsive */
@media (max-width: 820px) {
  .form-map-row {
    flex-direction: column;
  }

  .input-group {
    flex-direction: column;
  }

  .contact-info-row {
    flex-direction: column;
  }
}

@media (min-width: 978px) and (max-width: 1251px) {
  .contact-info-icon i {
    font-size: 40px;
    color: #fda40b;
    margin-bottom: 15px;
    padding: 0 9px;
  }

  .contact-info-item {
    height: 210px;
  }
}

/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  width: 50px;
  height: 50px;
}

.whatsapp-float img {
  border-radius: 65px;
  width: 100%;
  height: auto;
}

/* Footer */
footer {
  background-color: #E3F7F8;
  padding: 1.5rem;
  text-align: center;
  color: #004d40;
}

/* Animations */
@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fade-in-up 1s ease-out;
}

.appear {
  opacity: 1 !important;
  transform: translateY(0) !important;
}