/* main.css */

/* === Color Palette === */
:root {
  --color-maroon: #7B2123; /*#99215d; */       /* Deep Maroon */
  --color-orange: #F19D38;       /* Warm Orange */
  --color-gold: #FFC35C;         /* Golden Yellow */
  --color-slate-blue: #2F3E50;   /* Dark Slate Blue - text */
  --color-warm-bg: #FFF9EF;      /* Soft warm off-white */
  --color-white: #FFFFFF;
  --color-muted-text: #6c757d;   /* For secondary text */
  --color-warm-blue: #f1fdfd;    /* light blue shade*/
  --color-brown: #87402c; 		 /*Brown*/
}

/* === Global Styles === */
body {
  background-color: var(--color-warm-bg);
  color: var(--color-slate-blue);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* === Headings === */
h1, h2, h3, .page-heading {
  color: var(--color-maroon);
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
}

/* === Headings Spacing */
h1 { font-size: 2.5rem;}
h2 {font-size: 2rem;}
h3 {font-size: 1.5rem;}

/* === Text Muted === */
.text-muted {
  color: var(--color-muted-text) !important;
}

/* === Navbar === */
.navbar {
  background-color: var(--color-gold);
}

.navbar-brand, 
.navbar a.nav-link {
  color: var(--color-maroon);
  font-weight: 600;
  padding: 0.5rem 1rem;   /* give space for background highlight */
  border-radius: 6px;     /* smooth corners */
  transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar a.nav-link:hover,
.navbar a.nav-link:focus,
.navbar a.nav-link.active {
  background-color: var(--color-brown); /* highlight background */
  color: var(--color-white);            /* contrast text */
}

/* Dropdown menu links */
.dropdown-menu a.dropdown-item {
  color: var(--color-maroon);
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.dropdown-menu a.dropdown-item:hover,
.dropdown-menu a.dropdown-item:focus,
.dropdown-menu a.dropdown-item.active {
  background-color: var(--color-brown); /* same highlight as navbar */
  color: var(--color-white);
}



/* Wrapper for combined bars */
.header-wrapper {
  height: 140px;
  position: relative;
  z-index: 1000;
  background: var(--color-gold);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: height 0.4s cubic-bezier(.4,0,.2,1), background 0.3s ease;
}

/* Make header sticky and shrink on scroll */
.header-wrapper.scrolled {
  position: fixed  /* fixed to viewport */
  top: 0;
  left: 0;
  right: 0;
  height: 60px;   /* consistent shrink */
  background: var(--color-white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 1050;
}


.logo-container {
  width: 90px;
  height: 100%;  /* full height of container */
  display: flex;
  align-items: center;
  padding-left: 12px;
  z-index: 1060; /* above navbar */
}


#topContactBar, #navbarNavDropdown, #mainNav{
background: var(--color-gold); /*var(--color-maroon);*/
}	

#topContactBar, #mainNav {
  margin-left: 90px; /* space for logo on the left */
}

#topContactBar {
  height: 40px;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: var(--color-maroon);
}


#mainNav {
  height: 100px;
  padding-top: 0;
  padding-bottom: 0;
  /*background: var(--color-gold);*/
}

/* Responsive adjustments */
  .logo-container img {
    max-height: 120px;
    width: auto;
    display: block;
    transition: max-height 0.4s ease;
  }

  @media (max-width: 768px) {
    .header-wrapper {
      height: auto !important;
      padding-bottom: 0.5rem;
    }
	
    #topContactBar {
      flex-direction: column;
      height: auto !important;
      padding: 0.25rem 15px;
      font-size: 0.6rem;
      text-align: left;
    }
    .logo-container {
      position: static !important;
      max-width: 70px;
      margin: 0 auto 0.5rem;
      height: auto !important;
      padding-left: 0 !important;
      justify-content: center !important;
    }
    #mainNav {
      margin-left: 0 !important;
      height: auto !important;
      padding: 0.25rem 15px;
      justify-content: center !important;
    }
    #navbarNavDropdown {
      padding-left: 0 !important;
    }
	#topContactBar, #mainNav, #navbarNavDropdown {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  }

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: 0.1rem;
  margin-right: 0.1rem;
}

#mission.text-center {
background-color: var(--color-warm-bg);
}


/* @media (max-width: 768px) {
  .header-wrapper {
    height: auto;
  }
  .logo-container {
    position: static;
    width: 100%;
    padding-left: 0;
    justify-content: center;
    height: auto;
    margin-bottom: 10px;
  }
  #topContactBar, #mainNav {
    margin-left: 0;
  }
}
 */

/* Standard size for carousel images */
#imageCarousel .carousel-inner img {
  width: 100%;
  height: 500px;
  object-fit: contain;      /* show entire image, may add letterboxing */
  background-color: var(--color-warm-bg) /* neutral background for empty space */
}

/* Optional: make it responsive */
@media (max-width: 768px) {
  #imageCarousel .carousel-inner img {
    height: 250px;
object-fit: contain;	/* smaller height for mobile */
  }
}

/*animated counter card: on-hover effect */
.counter-card {
  transition: box-shadow 0.4s ease, transform 0.4s ease;
  }

.counter-card:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 255, 0.25);
  transform: translateY(-4px);
}

/* Card images */
.card-img-top {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;  /* ensures full image is shown */
  background-color: #f8f9fa; /* neutral background for empty space */
  border-radius: 0.25rem 0.25rem 0 0;
}


/*...........(Torch Bearer, Our highlights).....................*/
/* Effect for entire card  */
.card-hover-effect {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  border-radius: 0.25rem;
}

.card-hover-effect:hover {
  box-shadow: 0 12px 24px rgba(217, 119, 6, 0.25);
  transform: translateY(-6px);
}

/* Card body layout */
.card-body.card-custom-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
/* Button alignment at bottom */
.card-body .btn {
  margin-top: auto; /* pushes button to bottom */
}

/* Card body */
.card-custom-body {
  background-color: var(--color-white);
  padding: 1.5rem;
  border-radius: 0 0 0.5rem 0.5rem; /* smooth bottom corners if needed */
  transition: background-color 0.3s ease , box-shadow 0.3s ease;
}

.card-custom-body h5 {
  color: var(--color-maroon);
  font-weight: 700;
  /*text-align: center; */
}
.card:hover .card-custom-body {
/* background-color: #F59E0B; /* Darker warm orange on hover */
  box-shadow: 0 8px 20px rgba(217, 119, 6, 0.5); /* Warm orange shadow */
 transform: translateY(-4px);
}

/* Swiper slide - success stories */

.swiper-wrapper {
  display: flex;           /* already true by Swiper */
  align-items: stretch;    /* forces all slides to same height */
}
/* Ensure Swiper slides stretch */
.swiper-slide {
  display: flex;
  padding: 0.5rem;
  flex-direction: column;
}

/* Stretch cards inside slides */
.swiper-slide .card {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.swiper-slide .card:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
  transform: translateY(-6px);
}



/* === Footer === */
footer {
  background-color: var(--color-maroon);
  color: var(--color-white);
  text-align: left;
  padding: 1rem 1rem;
  font-size: 0.9rem;
	}
/* Footer styles */
footer h5 {
  margin-bottom: 1rem;
}

footer a {
  color: var(--color-gold);
  font-weight: 500;
  padding: 0.25rem 0.5rem;   /* some breathing space */
  border-radius: 6px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

footer a:hover,
footer a:focus {
  background-color: var(--color-gold); /* same highlight style */
  color: var(--color-white);
  text-decoration: none; /* remove underline */
}


 /*Show dropdown menu on hover for desktop*/
@media (min-width: 992px) {
  .navbar-nav .dropdown:hover > .dropdown-menu {
    display: block;
  }
  /* Optional: add fade effect */
  .navbar-nav .dropdown > .dropdown-menu {
    transition: opacity 0.3s ease;
    opacity: 0;
    display: block;
    visibility: hidden;
  }
  .navbar-nav .dropdown:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
  }
}

.contact-info span {
  font-size: 1rem;
  font-weight: 500;
}

/* Responsive adjustments
@media (max-width: 768px) {
  .header-bar nav {
    padding-left: 0 !important;
  }
  .logo-container {
    position: static;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
  }
}*/

/*  === Responsive Image with Rounded Corners === 
img.rounded-logo {
  border-radius: 0.75rem;
  max-width: 100%;
  height: auto;
  box-shadow: 0 6px 15px rgba(26, 35, 126, 0.2);
}
 */
 
 /* back-to-top.css */
#backToTopBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background: #007bff;
  color: white;
  cursor: pointer;
  padding: 12px 18px;
  border-radius: 50%;
  font-size: 24px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.17);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.3s ease;
  opacity: 0;
  visibility: hidden;
}

#backToTopBtn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(-10px); /* slight lift effect */
}

#backToTopBtn:hover {
  background: #0056b3;
  transform: scale(1.1);
}