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

/* adddddddddddddddddddddddddd */
/*----------------------------------*/
/* Multi-Step Form */
/*----------------------------------*/
#booking form .step {
    max-width: 700px;
    margin: 0 auto;
  }
  
  #booking h2 span {
    display: block;
    height: 3px;
    width: 60px;
    background: #246e80;
    margin: 10px auto 20px auto;
  }
  
  .form-control, .form-select {
    border: 1px solid #ccc;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 20px;
  }
  
  /* Buttons */
  button {
    border-radius: 30px;
    padding: 10px 30px;
    font-weight: bold;
  }
  
  .btn-primary {
    background-color: #000;
    border: none;
  }
  
  .btn-primary:hover {
    background-color: #246e80;
  }
  
  .btn-success {
    background-color: #1e7e34;
    border: none;
  }
  
  .btn-success:hover {
    background-color: #155d27;
  }
  
  .btn-secondary {
    background-color: #6c757d;
    border: none;
  }
  
  /*----------------------------------*/
  /* Custom Card Inputs */
  /*----------------------------------*/
  .room-card,
  .activity-card {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    cursor: pointer;
    width: 200px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #f9f9f9;
    position: relative;
    text-align: center;
  }
  
  .room-card:hover,
  .activity-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  
  .room-card input,
  .activity-card input {
    position: absolute;
    top: 10px;
    right: 10px;
    transform: scale(1.2);
  }
  
  .activity-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 10px;
  }
  
  /* Responsive Fix for Buttons */
  .d-flex.justify-content-center.gap-3 button {
    flex: 1 1 auto;
    max-width: 200px;
  }
  
  @media (max-width: 576px) {
    .d-flex.justify-content-center.gap-3 {
      flex-direction: column;
      gap: 10px;
    }
  }
/* Responsive adjustments for booking form */
@media (max-width: 768px) {
    #multiStepForm .form-control,
    #multiStepForm .form-select {
      font-size: 0.95rem;
      padding: 10px;
    }
  
    .room-card,
    .activity-card {
      width: 100% !important;
      max-width: 100%;
    }
  
    .d-flex.justify-content-center.gap-3 {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }
  
    .btn {
      width: 100%;
      padding: 12px;
    }
  
    .summary-box {
      padding: 20px 15px;
    }
  }
  
  @media (max-width: 576px) {
    .room-card i,
    .activity-card img {
      font-size: 1.5rem;
      height: 100px;
    }
  
    #booking h4,
    #booking h2 {
      font-size: 1.4rem;
    }
  
    .activity-card img {
      height: auto;
      max-height: 140px;
    }
  }
/* Responsive button group layout */
@media (max-width: 768px) {
    .d-flex.justify-content-center.gap-3 {
      flex-direction: column !important;
      align-items: stretch;
      gap: 10px;
    }
  
    .d-flex.justify-content-center.gap-3 button {
      width: 100%;
    }
  }
      
  @media (max-width: 768px) {
    .step .d-flex.gap-3 {
      flex-direction: column;
      gap: 10px;
    }
  
    .step .d-flex.gap-3 button {
      width: 100%;
    }
  }
  

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