/*----------------------------------*/
/*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: 14px;
    line-height: 25px;
    color: #777;
  }

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

::selection {
  background: #246e80;
  color: #fff;
}

::-moz-selection {
  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: #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;
  }
}
/*----------------------------------*/
/*Banner section*/
/*----------------------------------*/
.banner-section {
    background-image: url('/assets/img/activities/banner2.png');
    background-size: cover;
    background-position: center;
    height: 50vh; /* Reduced height for a smaller banner */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;


}
.banner-section .overlay {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0; /* Ensure the overlay stays behind */

}
.banner-section h1 {
  font-size: clamp(1.5rem, 5vw, 3rem); /* Responsive between 1.5rem and 3rem */
  text-transform: uppercase;
  margin-bottom: 2rem;
    font-family: 'camera-obscura';
    color: #fff;
    position: relative;
    z-index: 1;
    margin-bottom: 1rem;
}
.banner-section p {
    font-size: 1rem; /* Adjusted for a smaller banner */
    font-family: 'Raleway', sans-serif;
    color: #fff;
    position: relative;
    z-index: 1;
}
/*----------------------------------*/
/*surf lesson details section*/
/*----------------------------------*/
 
/* Center the section and increase width */
.py-5 .container {
    max-width: 1200px; /* Increased width */
    margin: 0 auto;
    text-align: center; /* Center align all text */
}

/* Image Styling */
.py-5 img {
    max-width: 90%; /* Slightly larger image */
    height: auto; /* Maintain aspect ratio */
    max-height: 350px; /* Increased height limit */
    display: block;
    margin: 20px auto; /* Added margin for spacing */
    border-radius: 15px; /* Slightly larger border-radius */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Softer shadow */
}

/* Buttons Styling */
.py-5 .btn {
    font-size: 1.1rem;
    padding: 0.75rem 2rem; /* Larger padding for buttons */
    border: none;
    border-radius: 8px;
    text-decoration: none;
    color: #fff;
    transition: all 0.3s ease;
    margin: 10px 5px; /* Added margin between buttons */
    display: inline-block;
}

.py-5 .btn-primary {
    background-color: #fff;
    color: #050506;
    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;
}

.py-5 .btn-primary:hover {
    background-color: #246e80; /* Red hover effect */
    color: #fff;
}

.py-5 .btn-success {
    background-color: #1e7e34;
    color: #ffffff;
    /* background-color: #fff; */
    /* color: #001f3f; */
    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;
}

.py-5 .btn-success:hover {
    background-color: #fff;
    color: #000;
    /* background-color: #1e7e34; */
    transform: scale(1.05);
}

/* Center the text and spacing */
.py-5 .about-text {
    margin: 0 auto;
    text-align: center;
}

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

.py-5 h2 span {
    display: block;
    height: 3px;
    width: 60px;
    background: #246e80;
    margin: 10px auto 20px auto; /* Centered underline */
}

.py-5 p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 30px; /* More spacing */
}

/* General Section Styling */
.py-5.bg-light {
    padding: 80px 0;
    background-color: #f8f9fa; /* Light background for contrast */
}

.py-5.bg-light h2 {
    font-size: 3rem; /* Larger heading */
    font-weight: bold;
    color: #222;
    /* font-size: 2.5rem; 
    color: #09090a;
    font-weight: bold;
    margin-bottom: 40px;
    text-align: center; */
}

/* Row Styling for Equal Heights */
.py-5.bg-light .row {
    display: flex;
    align-items: stretch; /* Ensure equal heights */
    gap: 20px;
    flex-wrap: nowrap; /* Prevent wrapping */
    justify-content: space-between;
}

/* Left Column Cards */
.py-5.bg-light .col-md-6 .card {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px 25px;
    margin-bottom: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.py-5.bg-light .col-md-6 .card:hover {
    transform: scale(1.02); /* Slight zoom on hover */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    background-color: #f1f3f5; /* Slightly darker on hover */
}

/* Timeline Styling for Right Column */
.py-5.bg-light .timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    border-left: 4px solid #000000; /* Vertical timeline line */
    padding-left: 20px; /* Align text */
}

.py-5.bg-light .timeline li {
    font-size: 1rem;
    color: #555;
    margin-bottom: 30px;
    position: relative;
    padding-left: 20px;
}

.py-5.bg-light .timeline li span {
    font-weight: bold;
    color: #000000;
}

.py-5.bg-light .timeline li:before {
    content: '';
    position: absolute;
    left: -12px; /* Align with the vertical line */
    top: 5px;
    width: 12px;
    height: 12px;
    background-color: #000000;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* addd */
.py-5.bg-light .about-text {
  text-align: left;
  max-width: 100%;
}

.py-5.bg-light p.lead {
  font-size: 1.05rem;
  color: #444;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.py-5.bg-light .btn {
  padding: 10px 20px;
  font-size: 1rem;
  border-radius: 30px;
  text-transform: uppercase;
}

.py-5.bg-light img {
  max-width: 100%;
  height: auto;
  border-radius: 15px;
  object-fit: cover;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Optional: Keep text short by default and reveal on 'Read More' */
#moreAbout.collapse:not(.show) {
  display: none;
}

@media (max-width: 768px) {
  .py-5.bg-light .row {
    flex-direction: column;
  }

  .py-5.bg-light .about-text {
    text-align: center;
  }
}

/*----------------------------------*/
/*Activities section*/
/*----------------------------------*/
.activities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.activities .card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  transition: transform 0.3s, box-shadow 0.3s;
  overflow: hidden;
}

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

.activities .card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.activities .card-body {
  padding: 15px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.activities .card-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.activities .card-text {
  font-size: 1rem;
  color: #555;
  line-height: 1.5;
  flex-grow: 1;
  margin-bottom: 10px;
}

.card-text.full {
  display: none;
}

.card.expanded .card-text.full {
  display: block;
}

.card.expanded .card-text.short {
  display: none;
}

.activities .btn {
  background-color: #1c1b1b;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1rem;
  transition: background-color 0.3s;
  margin: 0 15px 15px;
  text-align: center;
}

.activities .btn:hover {
  background-color: #246e80;
  color: #fff;
}

/*------------------------*/
/* Booking Form  Section */
/*-------------------------*/
/* General Section Styling */
.py-5.bg-white {
    padding: 80px 0;
    background-color: #ffffff; /* Full white background */
}

.py-5.bg-white h2 {
    font-size: 3rem; /* Larger heading */
    font-weight: bold;
    color: #222;
    /* font-size: 2.5rem; 
    color: #000000; 
    font-weight: bold;
    margin-bottom: 40px;
    text-align: center; */
}

/* Form Styling */
.py-5.bg-white form {
    max-width: 700px; /* Adjust for wider forms */
    margin: 0 auto; /* Center the form */
}

.py-5.bg-white .form-control {
    border: 1px solid #ddd;
    border-radius: 6px; /* Slightly rounded edges */
    padding: 15px;
    font-size: 1rem;
    margin-bottom: 20px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle inner shadow */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.py-5.bg-white .form-control:focus {
    border-color: #000000; /* Match your website’s color scheme */
    box-shadow: 0 0 6px rgba(0, 51, 102, 0.3); /* Glow effect on focus */
    outline: none;
}

/* Checkbox Group Styling */
.py-5.bg-white .checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.py-5.bg-white .checkbox-group label {
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: #555;
    cursor: pointer;
}

.py-5.bg-white .checkbox-group input[type="checkbox"] {
    margin-right: 10px;
    width: 20px;
    height: 20px;
    accent-color: #246e80; /* Match checkbox color to the site */
    cursor: pointer;
}

/* Submit Button Styling */
.py-5.bg-white .btn {
    width: 100%;
    padding: 15px;
    font-size: 1rem;
    font-weight: bold;
    background-color: #000000;
    color: #fff;
    border: none;
    border-radius: 6px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.py-5.bg-white .btn:hover {
    background-color: #246e80; /* Darker shade on hover */
    transform: scale(1.02); /* Slight zoom effect */
}

/* Responsive Adjustments */
@media (max-width: 576px) {
    .py-5.bg-white form {
        padding: 20px;
    }
    .py-5.bg-white h2 {
        font-size: 2rem;
    }
}

/* adddd */
.card-text.full {
  display: none;
}

.card.expanded .card-text.full {
  display: block;
}

.card.expanded .card-text.short {
  display: none;
}

.toggle-description {
  display: inline-block;
  margin-bottom: 10px;
  background: transparent;
  border: 1px solid #000;
  color: #000;
  padding: 6px 12px;
  font-size: 0.9rem;
  border-radius: 4px;
  transition: 0.3s;
}

.toggle-description:hover {
  background-color: #246e80;
  color: #fff;
  border-color: #246e80;
}
/* Button group wrapper to stay at bottom */
.activities .card .btn {
  margin: 5px 10px;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1rem;
}
/*----------------------------------*/
/*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 */
}