body{
    color : #2675a0ff !important;
}
navbar-nav li a{
    color : #2675a0ff !important;
}
h2{
    color: #2675a0ff !important;
}
p{
    color: #2675a0ff !important;
}
#services {
    background-color: #ffffff;
    padding-top: 50px;
    padding-bottom: 50px;
}

/* Horizontal Layout - Service Cards */
.service-card {
    background-color: white;
    border-radius: 15px;
    padding: 35px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    height: 400px; /* Adjusted card height */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.service-title {
    font-size: 2rem; /* Increased font size for title */
    font-weight: 600;
    color: #2675a0ff;
    margin-bottom: 15px;
}

.service-description {
    font-size: 1.25rem; /* Increased font size for description */
    color: #2675a0ff;
    margin-bottom: 15px;
    line-height: 1.7;
}

.service-details p {
    font-size: 1.1rem; /* Increased font size for details */
    color: #2675a0ff;
    margin-bottom: 5px;
}

.service-details i {
    color: #4facfe;
    margin-right: 8px;
}

/* Section Title */
h2 {
    font-size: 3rem; /* Increased font size for section title */
    font-weight: 600;
    color: #2675a0ff;
}

/* Mobile-Responsive Adjustments */
@media (max-width: 768px) {
    .service-card {
        padding: 25px;
        height: auto;
    }

    h2 {
        font-size: 2.5rem;
    }

    .service-title {
        font-size: 1.8rem;
    }

    .service-description {
        font-size: 1.1rem;
    }
}

@media (max-width: 576px) {
    .service-title {
        font-size: 1.5rem;
    }

    .service-description {
        font-size: 1rem;
    }

    .service-details p {
        font-size: 1rem;
    }
}
.team-card {
  border-radius: 20px;
  transition: all 0.3s ease;
  min-height: 280px; /* Equal height */
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical center */
  align-items: center;     /* horizontal center */
  text-align: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Subtle shadow */
}
.team-card:hover {
  transform: translateY(-5px); /* Subtle hover effect */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* Increased shadow on hover */
}
.icon-box {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 28px;
  margin-bottom: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}
h2 {
  font-size: 2.5rem; /* Increased size for section title */
}
h5 {
  font-size: 1.5rem; /* Increased font size for names */
  font-weight: 600;
}
small {
  font-size: 1rem; /* Increased font size for designations */
  color: #6c757d;
}
.our-story {
  padding: 80px 20px;
  display: flex;
  justify-content: center;
  color:blue;
}
.story-div{
  display:block;
  width:60%;
  float:right;
}
.story-card {
  background: #fff;
  padding: 40px !important;
  border-radius: 20px;
  box-shadow: 0px 6px 20px rgba(0,0,0,0.1);
  position: relative;  /* allows absolute positioning inside */
}

.story-image {
  position: absolute;
  top: -50px;   /* moves image upward */
  right: -50px; /* moves image outside card corner */
}
.bottom-img{
    position: absolute;
  bottom: -50px;
  width: 400px;
  height: 220px;
  object-fit: cover;
  box-shadow: 0px 4px 12px rgba(0,0,0,0.1);
  border-radius: 20px;
}
.story-image img {
  width: 400px;
  height: 220px;
  object-fit: cover;
  box-shadow: 0px 4px 12px rgba(0,0,0,0.1);
  border-radius: 20px;
}

.story-text h2 {
  margin-bottom: 15px;
  font-weight: 600;
  color: #333;
}

.story-text p {
  color: #2675a0ff;
  line-height: 1.6;
  margin-bottom: 15px;
  font-size:1.5rem;
}

.story-text .credit {
  font-size: 0.9rem;
  color: #777;
}

.story-text .credit a {
  text-decoration: none;
  color: #007bff;
}

.btn-learn {
  background: #444;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 0.9rem;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.btn-learn:hover {
  background: #222;
}

.tagline {
  font-size:2.5rem !important;
  font-weight: 700;
  color: #1E3A8A; /* dark professional blue */
  display: flex;
  gap: 10px;
  align-items: center;
}

.static {
  color: #3ac2b8; /* static text color */
}

.flip-text {
  display: inline-block;
  overflow: hidden;
  height: 1.2em; /* match line height */
  color: #28897d; /* animated text blue */
}

.flip-text span {
  display: block;
  animation: flipUp 6s infinite;
}

/* Flip animation */
@keyframes flipUp {
  0%, 25% {
    transform: translateY(0%);
  }
  30%, 55% {
    transform: translateY(-100%);
  }
  60%, 100% {
    transform: translateY(0%);
  }
}






.tagline{
  font-size:2.5rem !important;
  font-weight: 700;
  color:#3ac2b8;               /* static blue */
  display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
}

.static{ color:#3ac2b8;
margin-top:-1px; }

.flip-area{
  position:relative;
  display:inline-block;
  min-width:28ch;              /* prevents layout jump; adjust if needed */
  height:1.1em;                /* matches line-height for a single line */
  perspective: 600px;          /* 3D flip depth */
  color:#28897d;               /* animated blue */
  vertical-align:baseline;
}

.phrase{
  position:absolute; inset:0;
  white-space:nowrap;
}

/* Base letter animation styling */
.char{
  display:inline-block;
  transform-origin: bottom;
  will-change: transform, opacity;
}

/* Phrase 1 letters timeline (first half of cycle) */
.p1 .char{
  opacity:0; transform: rotateX(90deg);
  animation: cycle1 6s infinite;
  animation-delay: calc(var(--i) * 0.06s);
}

/* Phrase 2 letters timeline (second half of cycle) */
.p2 .char{
  opacity:0; transform: rotateX(90deg);
  animation: cycle2 6s infinite;
  animation-delay: calc(var(--i) * 0.06s);
}

/* Keyframes for first phrase */
@keyframes cycle1{
  0%   { opacity:0; transform: rotateX(90deg); }
  10%  { opacity:1; transform: rotateX(0); }
  40%  { opacity:1; transform: rotateX(0); }   /* hold */
  50%  { opacity:0; transform: rotateX(-90deg);}
  100% { opacity:0; transform: rotateX(-90deg);}
}

/* Keyframes for second phrase (starts mid-cycle) */
@keyframes cycle2{
  0%   { opacity:0; transform: rotateX(90deg); }
  45%  { opacity:0; transform: rotateX(90deg); }
  55%  { opacity:1; transform: rotateX(0); }
  85%  { opacity:1; transform: rotateX(0); }   /* hold */
  95%  { opacity:0; transform: rotateX(-90deg);}
  100% { opacity:0; transform: rotateX(-90deg);}
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  .flip-area{ perspective:none; }
  .char{ animation:none !important; opacity:1 !important; transform:none !important; }
}
.footer-image{
  display:flex;
  justify-content:center;      /* horizontal */
  align-items:center;          /* vertical */
}
.footer-image img{
  max-height:350px;
  width:auto;
}
footer{
  padding-bottom:10px;
  padding-top:20px !important;
}
.text-muted {
    color : #2675a0ff !important;
}
#appointment label {
    color : #2675a0ff !important;
}
h4,footer a  {
    color : #2675a0ff !important;
}

  .single-profile {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 60px 20px;
      }

      .profile-card {
        display: flex;
        align-items: center;
        background: #fff;
        border-radius: 20px;
        transition: all 0.3s ease;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        overflow: hidden;
      }

      .profile-image img {
        width: 230px;
        height: 270px;
        object-fit: cover;
        border-radius: 20px 0 0 20px;
      }

      .profile-info {
        padding: 20px;
      }

      .profile-info .heading {
        font-size: 24px;
        font-weight: 600;
        color: #2563eb;
        margin-bottom: 10px;
      }

      .profile-info .name {
        font-size: 20px;
        font-weight: 700;
        color: #111827;
        margin: 0;
      }

      .profile-info .role {
        font-size: 16px;
        color: #6b7280;
        margin: 6px 0 20px;
      }

      .profile-info .bio {
        font-size: 15px;
        color: #374151;
        line-height: 1.6;
      }
      .story-image {
          position: absolute;
          top: -50px;
          right: -50px;
     }