/*----------------------------------*/
/*Global style*/
/*----------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}
html, body {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    background-color: #fff;
    font-size: 16px;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  } 
a {
    text-decoration: none !important;
  }
  .clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
  }
  
  .clearfix {
    display: inline-block;
  }
  
  html[xmlns] .clearfix {
    display: block;
  }
  
  * html .clearfix {
    height: 1%;
  }
  
  ul, li {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  header, nav, section, article, aside, footer, hgroup {
    display: block;
  }
  
  * {
    box-sizing: border-box;
  }
  h1, h2, h3, h4, h5, h6 {
    margin-top: 0px;
    margin-bottom: 0px;
  }
  
  ul {
    margin-bottom: 0px;
  }
  
  p {
    font-size: 15px;
    line-height: 25px;
    /* color: #777; */
    color: #333232;
  }

  html,
body {
  background: #fff;
  font-family: 'Raleway', sans-serif;
}

::selection {
  /* background: #f00; */
  background: #246e80;
  color: #fff;
}

::-moz-selection {
  /* background: #f00; */
  background: #246e80;
  color: #fff;
}

/*----------------------------------*/
/*Navbar*/
/*----------------------------------*/
.navbar {
    background-color: transparent;
    padding: 1rem;
    transition: background-color 0.3s ease;
}
.navbar.scrolled {
    /* background-color: #000; */
    background-color: #1c1b1b;
}
.navbar .nav-link {
    color: #fff;
    margin-right: 1rem;
    transition: color 0.3s;
}
.navbar .nav-link:hover {
    /* color: #f00; */
    color: #246e80;

}
.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
    text-transform: uppercase;
    color: #fff;
}
@media (max-width: 768px) {
  .navbar {
    padding: 0.5rem 1rem;
  }

  .navbar .nav-link {
    margin-right: 0.5rem;
    font-size: 0.9rem;
  }

  .navbar-brand img {
    width: 80px;
  }
}
/*----------------------------------*/
/*Header*/
/*----------------------------------*/
header.landing-page {
    height: 100vh;
    /* background-image: url('/assets/images/ms/banner11.jpg'); */
    background: url('/assets/img/36609-411342371_small.mp4');
    background-size:cover;
    background-position: center;
    position:relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    top: 0; left: 0;  
}
header.landing-page video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures full background coverage */
  z-index: 0;
}



header.landing-page::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1; 
}

header.landing-page .container {
    position: relative;
    z-index: 2;
    color: white;
}
header.landing-page .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(41, 41, 41, 0.4);
    z-index: 1;
}
header.landing-page .container {
    position: relative;
    z-index: 2;
    color: white;
}
header.landing-page h1 {
  font-size: clamp(1.5rem, 5vw, 3rem); /* Responsive between 1.5rem and 3rem */
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 2rem;
}
header.landing-page p {
  font-size: clamp(1.2rem, 4vw, 2rem);
  color: #f0f0f0;
  margin-bottom: 2rem;
    
}
header.landing-page a.btn {
  font-size: 1rem;
  padding: 0.6rem 1.5rem;
    /* padding: 0.75rem 2rem; */
    border-radius: 50px;
    background: #1c1b1b;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}
header.landing-page a.btn:hover {
    background: #fff;
    color: #1c1b1b;
}
header.landing-page .scroll-indicator {
    position: absolute;
    bottom: -20px; 
    left: 50%; 
    transform: translateX(-50%);
    font-size: 2rem;
    z-index: 3;
}

header.landing-page .scroll-indicator a {
    color: #fff;
    text-decoration: none;
    background: #1c1b1b;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; 
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

header.landing-page .scroll-indicator a:hover {
    background: #f8f7f6;
    color: #1c1b1b;
}

/*----------------------------------*/
/* About Section */
/*----------------------------------*/

#about {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  max-width: 1200px;
  margin: auto;
  padding: 50px 20px; /* Added padding for better spacing */
}

/* About Text */
#about .about-text {
  flex: 1;
  max-width: 600px;
}

#about .about-text h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #1c1b1b;
  font-family: 'Camera Obscura', sans-serif;
}

#about .about-text h2 span {
  display: block;
  height: 3px;
  width: 50px;
  background: #246e80;
  margin-top: 10px;
  margin-bottom: 20px;
}

#about .about-text p {
  font-size: 1rem;
  line-height: 1.8;
  color: #555;
  margin-bottom: 20px;
}

/* About Image - Image Slider */
#about .about-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 500px; 
  /* Ensures images don’t take too much space */
}

.image-slider {
  position: relative;
  width: 100%;
  max-width: 450px; /* Limits image size */
  height: 350px; /* Adjust height as needed */
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Slight shadow for aesthetics */
}

/* Image Transition */
/* .image-slider img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
} */
.image-slider img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center; /* ensure best centering */
  opacity: 0;
  transition: opacity 1s ease-in-out;
}



.image-slider img.active {
  opacity: 1;
}

/* Responsive Design */
@media screen and (max-width: 992px) {
  #about {
    flex-direction: column; /* Stacks elements on smaller screens */
    text-align: center;
  }

  #about .about-text,
  #about .about-image {
    max-width: 100%;
  }
  .image-slider {
    max-width: 100%;
    height: auto;  }

}
/*----------------------------------*/
/* Statistics Section */
/*----------------------------------*/

#stats {
  background: #f7f7f7;
  padding: 80px 20px;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1c1b1b;
  margin-bottom: 50px;
  font-family: 'Camera Obscura', sans-serif;
  text-align: center;
}

.stats-container {
  display: flex;
  justify-content: center;
  gap: 60px; /* Increased spacing between cards */
  flex-wrap: wrap;
  max-width: 1200px;
  margin: auto;
}

.stat {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  text-align: center;
  width: 250px; /* Increased width */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.stat:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.stat h3 {
  font-size: 2rem; /* Increased font size */
  color: #246e80;
  /* color: #555; */
  font-weight: 700;
}

.stat p {
  font-size: 1rem; /* Slightly larger text */
  color: #555;
  margin-top: 10px;
}
.stat i {
  color: #246e80;
  /* color: #555; */
  margin-bottom: 10px;
}

/* Responsive Design */
@media screen and (max-width: 992px) {
  .stats-container {
    gap: 40px; /* Reduce gap on smaller screens */
  }
  
  .stat {
    width: 280px; /* Slightly larger on tablets */
  }
}

@media screen and (max-width: 768px) {
  .stats-container {
    flex-direction: column;
    align-items: center;
    gap: 30px; /* Adjust for mobile */
  }
  
  .stat {
    width: 100%; /* Full width on mobile */
    max-width: 320px;
  }
}
@media screen and (max-width: 768px) {
  .stat h3 {
    font-size: 2.2rem;
  }

  .stat p {
    font-size: 1.1rem;
  }
}
/*----------------------------------*/
/*Features*/
/*----------------------------------*/
#features h2 {
 
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #1c1b1b;
  font-family: 'Camera Obscura', sans-serif;

}

#features hr {
  background-color: #246e80;
  height: 2px;
  width: 60px;
  border: none;
  margin: 0 auto;
}

#features p {
  font-size: 1.1rem;
  color: #555;
  line-height: 1.8;
  max-width: 700px;
  margin: 0 auto;
}
#features .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centers the cards horizontally */
  align-items: stretch; /* Ensures all cards align properly */
}

/* Card Styling */
.feature-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%; /* Makes all cards the same height */
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.feature-card img {


  height: 280px;           /* Increase height for better visibility */
  /* height: 400px; */
  object-fit: cover;
  width: 100%; /* Ensures images stretch fully across the card */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.feature-card .card-body {
  display: flex;
  flex-direction: column; /* Stack content */
    justify-content: space-between; /* Push button to the bottom */
    flex-grow: 1; /* Stretch body to fill space */
  padding: 20px;
}

.feature-card .card-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: #222;
  text-transform: uppercase;
}

.feature-card .card-text {
  flex-grow: 1; /* Ensure text takes up available space */
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
  flex-grow: 1; /* Fills available space for consistent height */
  margin-bottom: 1.5rem;
}

/* Button Styles */
.feature-btn {
  margin-top: auto; /* Push button to the bottom */
    
  font-size: 1rem;
  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: 5px;
  /* background-color: #f00; */
  background-color: #246e80;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.3s ease;
  align-self: center; /* Centers the button horizontally */
}

.feature-btn:hover {
  background-color: rgb(16, 16, 16); /* Change to your hover color */
  color: #fff;
}

/* addddddd */
.feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

#features .card-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1c1b1b;
}

#features .card-text {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}

#features .feature-btn {
  background-color: #246e80;
  color: #fff;
  padding: 0.6rem 1.6rem;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

#features .feature-btn:hover {
  background-color: #1c1b1b;
}

/*----------------------------------*/
/*Dream quotes*/
/*----------------------------------*/

#dream-section {
  /* background-color: #b2bfca;  */
  color: #fff; /* White text color */
  padding: 50px 0;
  
  background-image: url('/assets/img/header1.jpg');
  background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
#dream-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Black overlay with 50% opacity */
  z-index: 1;
}

/* Ensures that the content remains visible above the overlay */
#dream-section > * {
  position: relative;
  z-index: 2;
}


#dream-section h2 {
  /* font-size: 2.5rem;
  font-weight: 700; */
  /* text-transform: uppercase; */
  /* margin-bottom: 1rem; */
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  /* color: #222; */
  color: #f1eded;

  font-family: 'Camera Obscura', sans-serif;
  z-index: -3;
                                                
}

#dream-section hr {
  /* background-color: #f00;  */
  background-color: #246e80;
  height: 2px;
  width: 60px;
  border: none;
  margin: 0 auto;
}

#dream-section p {
  font-size: 1.2rem;
  line-height: 1.8;
  max-width: 800px;
  margin: 0 auto;
  color: #f0f0f0; /* Light gray for better readability */
}

#dream-section .btn {
  background-color: #08bb2f;
  border: none;
  color: #ffffff;
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  /* font-family: 'Camera Obscura'; */
}

#dream-section .btn:hover {
  /* background-color: #f00;  */
  background-color: #246e80;
  color: #fff;
}

/*----------------------------------*/
/*Feedback*/
/*----------------------------------*/

#feedback {
  background-color: #fffbfb; /* Light gray background */
  color: #333; /* Dark text */
  padding: 50px 0;
  text-align: center;
}

#feedback h2 {
  /* font-size: 2.5rem;
  font-weight: 700;
  color: #001f3f; 
  margin-bottom: 1rem; */
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #222;
  font-family: 'Camera Obscura', sans-serif;

}


#feedback h2::after {
  content: "♡";
  font-size: 1.5rem;
  color: #001f3f;
  margin-left: 10px;
}
#feedback hr {
  /* background-color: #f00;  */
  background-color: #246e80;
  height: 2px;
  width: 60px;
  border: none;
  margin: 0 auto;
}

#feedback p {
  font-size: 1.2rem;
  font-style: italic;
  color: #555;
  line-height: 1.8;
  max-width: 800px;
  margin: 0 auto 20px auto;
}

#feedback .fw-bold {
  font-size: 1rem;
  font-weight: 700;
  color: #333;
}

#feedback .carousel-indicators [data-bs-target] {
 /* background-color: #333;  Dark indicators */
  border: none;
}

#feedback .carousel-indicators .active {
  background-color: #001f3f; /* Active indicator color */
}

#feedback .carousel-control-prev-icon,
#feedback .carousel-control-next-icon {
  /* background-color: #001f3f; Navy for controls */
  border-radius: 50%;
  padding: 10px;
}







/* ---------------------------------- */
/*FAQ's*/
/*----------------------------------*/
#faq h2 {
 
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #222;
  font-family: 'Camera Obscura', sans-serif;

}
#faq hr {
  /* background-color: #f00;  */
  background-color: #246e80;
  height: 2px;
  width: 60px;
  border: none;
  margin: 0 auto;

}


/* h  */
.accordion-button {
  background-color: #f9f9f9; /* Light gray background for default state */
  color: #222; /* Default text color */
  font-size: 1.2rem;
  font-weight: bold;
  border: none; /* No border */
  padding: 15px;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}

.accordion-button:not(.collapsed) {
  /* color: #f00;  */
  color: #246e80;
  background-color: #fdfdfd; /* Very light gray background for active state */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for active button */
}

.accordion-button:focus {
  color: rgb(72, 66, 66); /* Red text for focus */
  background-color: #a8ccd5; /* Slightly darker gray for focus state */
  outline: none; /* Remove outline */
  box-shadow: 0 0 0 3px rgba(0, 238, 255, 0.2); /* Red focus shadow */
}

/* Optional: Custom styling for the accordion-body */
.accordion-body {
  background-color: #fff; /* White background for content */
  color: #555; /* Text color */
  font-size: 1rem;
  line-height: 1.6;
  padding: 20px;
}


/*----------------------------------*/
/*Footer*/
/*----------------------------------*/
footer {
  background-color: #171717; /* Black background */
  color: #fff; /* White text */
  padding: 40px 0;
  font-size: 0.9rem;
}

footer h5 {
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: #fff;
}

footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

footer ul li {
  margin-bottom: 10px;
}

footer ul li i {
  margin-right: 10px; /* Spacing for icons */
  /* color: #f00;  */
  color: #edf6f8;
}

footer ul li a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s;
}

footer ul li a:hover {
  /* color: #f00;  */
  color: #246e80;
}

footer p {
  margin: 0;
  color: #ccc; /* Light gray for less emphasis */
}

footer .text-white a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s;
}

footer .text-white a:hover {
  /* color: #f00;  */
  color: #246e80;
}

footer .fab {
  font-size: 1.5rem;
  margin-right: 10px;
}

footer .me-3 {
  margin-right: 1rem;
}

footer a:hover {
  color: #246e80 !important; /* golden hover */
}

footer .btn-light:hover {
  background-color: #ddd;
}
footer .btn-light {
  margin-top: 30px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

footer .btn-light:hover {
  background-color: #ddd;
  color: #000;
}

footer .fab {
  font-size: 1.5rem;
  transition: color 0.3s;
}

footer .fab:hover {
  color: #246e80;
}
footer .row {
  min-height: 200px; /* or whatever height suits your footer */
}