/*----------------------------------*/
/*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/surf/banner.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: 2rem; 
    font-weight: bold;
    font-family: 'Raleway', sans-serif;
    color: #fff;
    position: relative;
    z-index: 1;
    margin-bottom: 1rem; */
    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;

    /* font-size: 1.0rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 3rem; */
}
.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*/
/*----------------------------------*/

/* Section Headers */
/* h2 {
    font-weight: bold;
    color: #0056b3;
    margin-bottom: 20px;
    text-align: center;
} */
 
/* 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: 3rem; 
    font-weight: bold;
    color: #222; */
    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 */
}
.included-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.included-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 30px 20px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

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

.included-icon {
  font-size: 2rem;
  color: #246e80;
  margin-bottom: 15px;
}

.included-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1c1b1b;
  margin-bottom: 10px;
}

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


/*--------------------------------*/
/* What's Included Section */
/*---------------------------*/
.whats-included {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.whats-included .card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden;
    padding: 20px;
    text-align: center;
    background-color: #fff;
}

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

.whats-included .card i {
    font-size: 2rem;
    color: #246e80;
    margin-bottom: 15px;
}

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

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

/* Responsive Adjustments */
@media (max-width: 768px) {
    .whats-included {
        grid-template-columns: 1fr;
    }
}


/*------------------------*/
/* Pricing Section */
/*-------------------------*/
.py-5 {
    padding: 60px 0;
}
.py-5 h2 {
    font-size: 3rem; /* Larger heading */
    font-weight: bold;
    color: #222;
    /* font-size: 1.8rem;
    color: #0a0a0a;
    font-weight: bold;
    margin-bottom: 30px; */
}
.pricing-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}
.pricing-tabs button {
    background-color: #020202;
    color: white;
    border: none;
    padding: 10px 20px;
    margin-right: 10px;
    border-radius: 5px;
    font-size: 0.9rem;
    cursor: pointer;
}
.pricing-tabs button:hover {
    background-color: #37393a;
}
.pricing-tabs button.active {
    background-color: #246e80;
}

.card {
    border: 1px solid #ddd;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    border-radius: 8px;
}
.card:hover {
    transform: translateY(-10px);
}
.card-body {
    padding: 20px;
    text-align: left;
}
.card-title {
    font-weight: bold;
    color: #000000;
    font-size: 1.2rem;
}
.card-text {
    font-size: 1rem;
    margin-bottom: 15px;
    color: #555;
}
.card .btn {
    background-color: #0e0e0f;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-top: 10px;
}
.card .btn:hover {
    background-color: #246e80;
}
/*------------------------*/
/* 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;
    }
}



/*----------------------------------*/
/*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 */
}