:root {
  --primary-red: #92021a;      /* Header / authority */
  --secondary-green: #1b7f6b;   /* Medical tone */
  --accent-red: #b11226;        /* CTA only */
  --light-bg: #f8f9fa;          /* Section background */
  --dark-text: #222;
  --muted-text: #666;

   /* Defining shades based on your base color #92021a */
   --lighter-red: #b50321;
  --primary-red: #92021a;
  --darker-red: #700114;


  /* Defined Colors */
  
  --secondary-green: #1b7f6b;
  
  /* Optional: a mid-tone color for a smoother transition */
  --mid-tone: #574143;
}
/* .header-area {
  background: var(--primary-red);
 
  
} */
.header-area {
  background: linear-gradient(-45deg, #92021a,#700114,#a0031d,#92021a);
  background-size: 400% 400%;
  animation: gradientShift 10s ease infinite;
}

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


.header-area .logo img {
  filter: brightness(1.1);
}

.header-area .nav li a {
  color: #ffffff;
  font-weight: 500;
}

.header-area .nav li a.active,
.header-area .nav li a:hover {
  color: #ff0202;
}

.menu-trigger span {
  color: #fff;
}
.main-banner .caption h6 {
  color: #e0e0e0;
  letter-spacing: 1px;
}

.main-banner .caption h2 {
  font-size: 42px;
  line-height: 1.3;
  color: #ffffff;
}

.main-banner .caption p {
  color: #f1f1f1;
  max-width: 700px;
}
.services .item {
  background: var(--accent-red);
  border-radius: 16px;
  padding: 30px 20px;
  color: #fff;
  min-height: 280px;
}
.nav-link {
     color: #3498db; /* Blue color */
  text-decoration: none; /* Removes underline if desired */


  }

.nav-link:hover { color: #ab0303; }    /* When mouse is over link */
.nav-link:active { color: red; }       /* While link is being clicked */

.services .item h4 {
  color: #fff;
  font-size: 18px;
  margin-bottom: 12px;
}

.services .item p {
  color: #f5f5f5;
  font-size: 14px;
}

.services .icon img {
  width: 60px;
  margin-bottom: 15px;
}
.apply-now,
.upcoming-meetings {
  background: var(--light-bg);
}

.section-heading h2 {
  color: var(--primary-red);
}

.section-heading p {
  color: var(--muted-text);
}
.our-courses .item {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.our-courses .down-content h4 {
  color: var(--primary-red);
}

.our-courses .down-content span {
  color: var(--secondary-green);
  font-weight: 500;
}

#gallery .row {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 20px;
  padding-bottom: 15px;
  /* scroll-snap-type: x mandatory; */
}

#gallery .col-lg-3 {
  flex: 0 0 280px;
  scroll-snap-align: center;
}

#gallery img {
  border-radius: 14px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

#gallery img:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}

/* Hide ugly scrollbar */
#gallery .row::-webkit-scrollbar {
  height: 6px;
}

#gallery .row::-webkit-scrollbar-thumb {
  background: var(--secondary-green);
  border-radius: 10px;
}
.contact-us input,
.contact-us textarea {
  border-radius: 8px;
  border: 1px solid #ccc;
}

.contact-us button {
  background: var(--secondary-green);
  border-radius: 30px;
  padding: 10px 30px;
}

.contact-us button:hover {
  background: var(--accent-red);
}
.footer-area {
  /* background: #760115; */
   background: linear-gradient(-45deg, #92021a, #700114, #a0031d, #92021a);
  background-size: 400% 400%;
  animation: gradientShift 10s ease infinite;

  color: #ddd;
}

.footer-area h4 {
  color: #fff;
}

.footer-area a {
  color: #bbb;
}

.footer-area a:hover {
  color: var(--accent-red);
}

.footer-bottom p {
  color: #cac5c5;
  font-size: 14px;
}
.footer-brand img{
  height: 80px;
  width: auto;
}
.footer-top p{
  color: #e3dede;
}
.grid-form {
  display: grid;
  /* Creates 3 equal columns */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
}

/* Header, Textarea, and Button should span all 3 columns */
.form-header, 
.grid-form textarea, 
.grid-form button {
  grid-column: 1 / -1; 
}

/* Basic styling to ensure inputs look good */
.grid-form input, 
.grid-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.grid-form textarea {
  height: 150px;
}
.grid-form .button{
  /* background: var(--secondary-green); */
  background: linear-gradient(-45deg, var(--primary-red), var(--mid-tone), var(--secondary-green), var(--primary-red));
  
  /* Ensures the gradient is larger than the container so it can move */
  background-size: 400% 400%;
  
  /* Apply the animation */
  animation: gradientShift 10s ease infinite;
}

/* Responsive: Stack inputs on tablets and phones */
@media (max-width: 992px) {
  .grid-form {
    grid-template-columns: 1fr 1fr; /* 2 columns for tablets */
  }
}

@media (max-width: 600px) {
  .grid-form {
    grid-template-columns: 1fr; /* 1 column for mobile */
  }
}

/* footer animation */