body {
  font-family: 'Roboto Condensed', sans-serif;
  margin: 5px;
  padding: 0;
}

section {
  padding: 50px 0;
  text-align: center;
}

.hero {
  position: relative;
  background: linear-gradient(to bottom right, #006B38FF, #00A4CCFF);
  background-size: cover;
  padding: 20px;
  color: white;
}



.logo {
  position: relative; /* Relative positioning for the logo container */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px; /* Size of the outer circle */
  height: 100px; /* Size of the outer circle */
}


/* Logo styles */
.logo {
  position: relative; /* Relative positioning for the logo container */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px; /* Size of the outer circle */
  height: 100px; /* Size of the outer circle */
  margin-right: auto; /* Push everything else to the right */
}

.outer-circle {
  border-radius: 50%; /* Make it round */
  border: 15px solid #0cbc8b; /* Outer circle border styling */
  width: 100%;
  height: 100%;
  box-sizing: border-box; /* Includes border in the width and height */
}

.inner-circle {
  border-radius: 50%; /* Make it round */
  border: 15px solid #0cbc8b; /* Inner circle border styling */
  width: 45px; /* Size of the inner circle */
  height: 45px; /* Size of the inner circle */
  box-sizing: border-box; /* Includes border in the width and height */
  position: absolute; /* Positioned absolutely within the .logo container */
}



/* Base styles for navbar */
.navbar {
  /* backdrop-filter: blur(7px) saturate(181%);
  -webkit-backdrop-filter: blur(7px) saturate(181%); */
  /* background-color: rgba(212, 238, 229, 0.46); */
        /* background: linear-gradient(to right, limegreen, crystal); */
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.125);
  padding: 10px 20px; /* Adjust based on your design */
  margin: 0px;
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hamburger {
  display: none; /* Hidden by default, shown in mobile view */
  cursor: pointer;
  font-size: 24px;
  color: #fff;
}

.sidebar {
  display: flex;
  justify-content: space-between;
  list-style: none;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 20px; /* Adjust gap between nav items */
}

.sidebar li a {
  text-decoration: none;
  color: #fff; /* Adjust text color */
}

/* Mobile view */
@media (max-width: 768px) {
  .hamburger {
      display: block;
  }

  .sidebar {
      position: fixed;
      right: -100%; /* Start off-screen */
      top: 0;
      flex-direction: column;
      backdrop-filter: blur(7px) saturate(181%);
      -webkit-backdrop-filter: blur(7px) saturate(181%);
      background-color: rgba(109, 165, 180, 0.46);
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.125);
      height: 100%;
      width: 250px; /* Sidebar width */
      transition: left 0.3s;
      padding-top: 60px; /* Space for hamburger */
      z-index: 10000;
  }

  .sidebar ul {
      flex-direction: column;
  }

  .sidebar li a {
      padding: 10px;
      display: block;
  }

  .sidebar.active {
      right: 0; /* Slide in */
  }

  .hero-inner {
    flex-direction: column;
    align-items: flex-start;
    margin-left: 0;
}

.hero-content {
    text-align: left;
    flex-basis: 100%;
    max-width: 100%; /* Ensure content doesn't overflow the screen width */
}

.hero-content h1 {
    font-size: 1.5rem;
}

.hero-content p {
    font-size: 0.9rem;
}

.hero-buttons {
    flex-direction: column;

}

.hero-buttons .btn {
    width: 50%;
    margin-bottom: 10px;

}


.hero-images .boats{
    display: none;
}

}



.hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}

.hero-content {
  flex-basis: 50%;
  margin-left: 40px;
  text-align: left;
}

.hero-text {
  display: block;
}

.hero-content h1 span {
  display: block;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  padding: 10px;
  width: fit-content;
  margin-left: 5px;
}

.hero-content h1 {
  font-size: 3em;
  line-height: 1.5;
  margin: 40px 0 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-content p {
  font-size: 1.2em;
  line-height: 1.5;
  max-width: 400px;
}

.hero-images {
  flex-basis: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.hero-images img {
  max-width: 416px;
  height: auto;
  border-radius: 10px;
}




@media (max-width: 768px) {
  .company-logos-section {
      padding: 20px; /* Reduce padding on small screens */
  }

  .company-logos {
      flex-wrap: wrap; /* Allow logos to wrap onto multiple lines */
      justify-content: center; /* Center logos on small screens */
  }

  .company-logos img {
      margin: 10px; /* Add some margin around each logo */
      width: 100px; /* Adjust logo size for small screens */
      height: auto; /* Maintain aspect ratio */
  }

  .content-wrapper {
      flex-direction: column; /* Stack the image and text on top of each other */
  }

  .card-image,
  .company-text {
      width: 100%; /* Full width on small screens */
  }

  .company-text {
      padding-top: 20px; /* Add space above the text */
  }
}



/* boat images in hero */
.ellipse-wrapper {
    position: absolute;
    width: 75px;
    height: 75px;
    top: 10px;
    left: 114px;
    border-radius: 37.5px;
    border: 12px solid;
    border-color: #17ffc6;
  }
  
 .ellipse-2 {
    position: relative;
    width: 34px;
    height: 34px;
    top: 8px;
    left: 8px;
    border-radius: 16.88px;
    border: 12px solid;
    border-color: #17ffc6;
  }

  .boats {
    position: absolute;
    width: 548px;
    height: 552px;
    top: 104px; /* Update this value */
    right: 0; /* Position to the right instead of using 'left' */
  }


  .overlap-3 {
    position: relative;
    height: 552px;
  }
  .mask-group {
    position: absolute;
    width: 293px;
    height: 320px;
    top: 15px;
    left: 255px;
  }

  /* .mask-group-9 {
        position: relative;
        height: 467px;
        top: 1px;
        left: 196px;
      }
       */
  .mask-group-2 {
    position: absolute;
    width: 286px;
    height: 313px;
    top: 206px;
    left: 119px;
  }
  
  .mask-group-3 {
    position: absolute;
    width: 192px;
    height: 200px;
    top: 70px;
    left: 5px;
  }
  
  .mask-group-4 {
    position: absolute;
    width: 283px;
    height: 309px;
    top: 243px;
    left: 0;
  }

  .mask-group, .mask-group-2, .mask-group-3, .mask-group-4, .mask-group-9 {
    object-fit: cover;
  }
  
  /* boat images in hero end*/

  /* Buttons Row */
.hero-buttons {
    margin-top: 20px; /* Space above the buttons */
    display: flex;
    gap: 20px; /* Space between buttons */
  }
  
  .btn {
    padding: 10px 20px;
    text-decoration: none;
    text-align: center;
    border-radius: 12px; /* Rounded corners for buttons */
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border: 2px solid transparent; /* Default border to maintain button size when switching between solid and outline */
  }
  
  .btn-outline {
    background-color: transparent; /* Translucent background */
    color: #f7f8f9; /* Text color */
    border-color: #16b362; /* Green outline */
  }
  
  .btn-outline:hover {
    background-color: rgba(0, 164, 204, 0.1); /* Slightly darker translucent on hover */
  }
  
  .btn-solid {
    background-color: #16b362; /* Solid green background */
    color: white; /* Text color */
    border-color: #00A4CC; /* Same as background to maintain button size */
  }
  
  .btn-solid:hover {
    background-color: darken(#16b362, 30%); /* Make button darker on hover */
    /* This requires a preprocessor like SASS to work directly; 
       otherwise, replace darken(#00A4CC, 10%) with the actual darker color value */
  }
  

  /* SECTION 2 ABOUT */

  .company-logos-section {
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(220,238,226,0.9996790952709209) 100%);
    /* background: linear-gradient(to right, limegreen, crystal); */
    backdrop-filter: blur(10px);
    padding: 50px;
    color: white;
}

.company-logos {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding-bottom: 20px;
}

.company-logos img {
    height: 50px; /* Adjust based on actual logo sizes */
    margin-right: 20px;
}

.divider {
    height: 4px;
    background-color: #000;
    width: 50%;
    margin: 40px auto;
}

.content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-image {
    flex-basis: 50%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 20px;
}

.card-image img {
    width: 100%;
    height: auto;
    border-radius: 20px;
}

.company-text {
    flex-basis: 50%;
    padding-left: 40px; /* Spacing between text and image */
}

.company-text h2 {
    font-size: 2em;
    color: #000;
}

.company-text p {
    font-size: 0.9rem;
    color: #000;
}

.btn {
    padding: 10px 20px;
    text-decoration: none;
    text-align: center;
    border-radius: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    margin-top: 20px;
    display: inline-block;
}

.btn-outline {
    background-color: transparent;
    color: #000;
    border: 2px solid #000;
}

.btn-solid {
    background-color: #000;
    color: white;
    border: none;
}

/* Adjustments for glassmorphic effect */
.card-image, .company-text {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.75); /* Semi-transparent white for the glass effect */
    border-radius: 20px;
}

/* If you want to adjust for mobile screens */
@media (max-width: 768px) {
    .content-wrapper {
        flex-direction: column;
    }

    .card-image, .company-text {
        flex-basis: 100%;
    }

    .company-text {
        padding-left: 0;
    }
}


.services-section {
    background: url('/static/image/rectangle-92.png') no-repeat center center;
    background-size: cover;
    padding: 50px;
    color: white;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 0; /* Establish a new stacking context */
  }

  .services-section::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* Green color overlay */
    background: rgba(0, 128, 0, 0.5); 
    mask-image: url('/static/image/rectangle-116-1.svg'); /* Path to your SVG mask */
    -webkit-mask-image: url('/static/image/rectangle-116-1.svg'); /* Fallback for Webkit browsers */
    mask-mode: alpha; /* Use the luminance to mask */
    -webkit-mask-mode: alpha;
    z-index: -1; /* Behind the cards */
  }
  
  .services-content {
    width: 50%;
  }
  
  .services-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    width: 50%;
  }
  
  .card {
    padding: 20px;
    border-radius: 10px;
    z-index: 2; /* Higher than the mask pseudo-element */
  }
  
  .outlined {
    background: rgba(255, 255, 255, 0.1); /* Inherits the background color with some opacity */
    border: 2px solid white; /* White border */
    z-index: 2; /* Higher than the mask pseudo-element */
  }
  
  .solid {
    background: white; /* Your theme's solid color */
    z-index: 2; /* Higher than the mask pseudo-element */
  }

  .solid p{
    color: #000;
  }

  .solid h3{
    color: #000;
  }
  
  .card h3 {
    margin-top: 0;
  }
  
  /* Add responsiveness if necessary */
  @media (max-width: 768px) {
    .services-section {
      flex-direction: column;
    }
    .services-content, .services-cards {
      width: 100%;
    }
    .services-cards {
      grid-template-columns: 1fr;
    }
  }
  

  /* WHY CHOOSE US? SECTION */
  .why-choose-us {
    padding: 50px;
}

  .why-choose-us {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 50px;
}

.why-choose-us h2 {
    font-size: 2em;
    margin-bottom: 20px;
    /* Center the heading if needed */
    text-align: center;
}

.why-choose-us-content {
    display: flex;

}

.values {
    flex: 1; /* Take up the available space */
}

/* .value-item {
    display: flex;
    align-items: start;
    margin-bottom: 20px;
} */
.value-item {
    display: flex;
    align-items: center; /* This will vertically center all the direct children of .value-item */
    margin-bottom: 20px;
}





.icon-container {
    display: flex; /* Center the icon in the box */
    align-items: center; /* Center vertically, now effective due to .value-item's center alignment */
    justify-content: center; /* Center horizontally */
    width: 50px; /* Size of the icon container */
    height: 50px; /* Size of the icon container */
    background-color: limegreen; /* Your choice of green */
    border-radius: 15px; /* Rounded corners */
    /* Additional styling, such as padding or exact positioning if necessary */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Optional: Adds some depth with shadow */
}

.icon-container img {
    padding: 1px;
    width: 2px; /* Or adjust size as needed, relative to the container */
    height: auto; /* Maintain aspect ratio */
}



/* .value-text {
    display: flex;
    flex-direction: column;
} */


.value-text {
    display: flex;
    flex-direction: column;
        /* This will override the center alignment from .value-item for the text */
    align-self: start; 

    margin-left: 10px; /* Add some space between the icon and the text */
}

.value-text h3 {
    margin: 0;
    font-size: 1.2em;
}

.value-text p {
    margin: 0;
    text-align: left; /* Ensure text is aligned to the left */
}



.value-item img {
    margin-right: 10px;
    width: 50px; /* Adjust as necessary */
}

.value-item h3 {
    margin: 0;
    margin-right: 10px;
    text-align: left;
    font-size: 1.2em;
}

.value-item p {
    margin: 0;
    text-align: left;
    margin-right: 20px;
}


.image-container {
    overflow: hidden;
    padding-left: 20px; 
    position: relative; /* This is required to position the badge absolutely relative to the image */

}

.image-container img {
    width: 100%;
    height: auto;
    border-radius: 10px; 
  
}


/* common */
.ribbon {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
  }
  .ribbon::before,
  .ribbon::after {
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    border: 5px solid #2980b9;
  }
  .ribbon span {
    position: absolute;
    display: block;
    width: 225px;
    padding: 15px 0;
    background-color: #3498db;
    box-shadow: 0 5px 10px rgba(0,0,0,.1);
    color: #fff;
    font-size: 0.7em;
    /* font: 700 18px/1 'Lato', sans-serif; */
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    text-transform: uppercase;
    text-align: center;
  }
  

  /* top right*/
  .ribbon-top-right {
    top: -10px;
    right: -10px;
  }
  .ribbon-top-right::before,
  .ribbon-top-right::after {
    border-top-color: transparent;
    border-right-color: transparent;
  }
  .ribbon-top-right::before {
    top: 0;
    left: 0;
  }
  .ribbon-top-right::after {
    bottom: 0;
    right: 0;
  }
  .ribbon-top-right span {
    left: -25px;
    top: 30px;
    transform: rotate(45deg);
  }
  
  


@media (max-width: 768px) {
    .why-choose-us {
        flex-direction: column;
    }
    .values, .image-container {
        width: 100%;
    }
    .experience-card {
        position: static;
        transform: none;
        margin-top: 20px;
    }
}

/* OUR CLIENTS SECTION  */
.clients-section {
    position: relative;
    background: url('/static/image/rectangle-83.png') no-repeat center center / cover;
    text-align: center;
    padding: 50px;
}

.clients-section::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 128, 0, 0.5); /* Adjust the opacity for the green overlay */
    z-index: 0; /* Ensure this is below the text and client names */
}


.clients-section h2 {
    position: relative;
    font-size: 2.5em;
    margin-bottom: 1em;
    color: white; /* Or another color that stands out against your overlay */
    z-index: 3; /* Ensures the text appears above the overlay */
}

.client-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3-column grid */
    gap: 20px; /* Adjust the gap as needed */
    max-width: 1200px;
    margin: 0 auto;
    z-index: 2; /* Ensures the grid appears above the overlay */
}

.client-name {
    background-color: #fff; /* For the client name cards */
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-weight: bold;
    color: #333;
    /* Other styles */
}

@media (max-width: 768px) {
    .client-grid {
        grid-template-columns: 1fr; /* Single column grid for mobile */
    }
}

#testimonials {
    padding: 50px;
    background: #f7f7f7;
    text-align: center;
}

.testimonial-carousel {
    display: flex;
    overflow-x: auto; 
    /* white-space: nowrap; */
}

.testimonial-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-right: 20px;
    padding: 20px;
    display: inline-block;
    min-width: 300px; /* Adjust based on your preferred size */
    max-width: 300px; /* Set a max-width to ensure the cards don't grow too large */
    overflow: hidden; /* Ensures content does not spill out */
    padding: 20px;

}

.testimonial-text {
    font-style: italic;
    overflow-wrap: break-word; /* Ensures proper word wrapping */
    word-wrap: break-word; /* For older browsers */
    word-break: break-word; /* Ensure proper word breaking */
    margin-bottom: 10px; /* Space below the testimonial text */
}
.testimonial-rating {
    color: #ffd700; /* Gold color for stars */
    margin: 10px 0;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.testimonial-image {
    width: 50px; /* Adjust as needed */
    height: 50px; /* Adjust as needed */
    border-radius: 50%; /* Makes image round */
    object-fit: cover;
    border: 3px solid #fff; /* Optional: Adds a white border around the image */
}

/* Ensure the container of the text has adequate width to contain the text */
.testimonial-card p {
    max-width: 100%; /* Ensures the paragraph does not exceed the width of the card */
    box-sizing: border-box; /* Include padding in the width calculation */
}

/* footer or contact section */
#contact {
    background-color: #000; /* Black background */
    color: #fff; /* White text */
    padding: 50px;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Four equal columns */
    gap: 20px; /* Space between grid items */
}

.footer-content {
    display: contents; /* Let child elements participate in the grid directly */
}


.footer-brand {
    grid-column: 1 / 2; /* Take up the first column */
    flex-direction: row; /* Logo and brand name side by side */
    justify-content: flex-start; /* Align to the start of the grid area */
}

/* .footer-brand, .links-column, .contact-column {
    display: flex;
    align-items: center;
} */

.footer-logo {
    width: 80px; /* Adjust as needed */
    margin-bottom: 10px;
}

.brand-name {
    font-size: 1.5em;
    color: #36b37e; /* BB Consult brand color, adjust as needed */
}

/* .footer-links {
    display: flex;
    justify-content: space-between;
    width: 100%;
} */



.footer-links {
    display: flex;
    justify-content: space-between;
    width: 100%;
}



.links-column {
    list-style-type: none; /* Remove bullet points from list */
    padding: 0; /* Remove padding */
    margin: 0 20px; /* Add some horizontal margin */
    grid-column: 3 / 4; /* Take up the third column */
    justify-content: flex-start; /* Align to the start of the grid area */
    /* List styles are removed by default from the previous code */
}

.contact-column {
    list-style-type: none; /* Remove bullet points from list */
    padding: 0; /* Remove padding */
    margin: 0 20px; /* Add some horizontal margin */
    grid-column: 4 / 5; /* Take up the fourth column */
    justify-content: flex-start; /* Align to the start of the grid area */
}

.footer-links a {
    color: #fff; /* White text for links */
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.footer-links a:hover {
    text-decoration: underline; /* Underline on hover */
}

.logo {
    position: relative; /* Relative positioning for the logo container */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px; /* Size of the outer circle */
    height: 100px; /* Size of the outer circle */
}


.logo .outer-circle {
    border-radius: 50%; /* Make it round */
    border: 15px solid #0cbc8b; /* Outer circle border styling */
    width: 100%;
    height: 100%;
    box-sizing: border-box; /* Includes border in the width and height */
}

.logo .inner-circle {
    border-radius: 50%; /* Make it round */
    border: 15px solid #0cbc8b; /* Inner circle border styling */
    width: 45px; /* Size of the inner circle */
    height: 45px; /* Size of the inner circle */
    box-sizing: border-box; /* Includes border in the width and height */
    position: absolute; /* Positioned absolutely within the .logo container */
}

  

.social-media-links a {
  margin: 0 10px;
  color: white; /* Icon color */
  font-size: 24px; /* Icon size */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #contact {
        grid-template-columns: 1fr; /* Single column layout for smaller screens */
    }

    .footer-brand, .links-column, .contact-column {
        grid-column: 1; /* All take up the single column */
        justify-content: center; /* Center content on smaller screens */
    }
}