/* Global Font */
      body {
        font-family: "Montserrat", sans-serif;
      }

      /* Navbar Styles */
      .navbar {
        background-color: rgba(0, 0, 0, 0.5);
        transition: background-color 0.3s, backdrop-filter 0.3s;
        padding-left: 30px; /* Add padding to the left */
        padding-right: 30px; /* Add padding to the right */
      }

      .navbar.scrolled {
        background-color: rgba(0, 0, 0, 0.75);
        backdrop-filter: blur(9px);
      }

      /* Navbar Links */
      .navbar-nav .nav-link {
        padding-top: 15px;
        padding-bottom: 20px;
        text-transform: uppercase;
        font-size: 0.7rem;
        color: #fff;
        font-family: "Montserrat", sans-serif;
        transition: color 0.3s;
        letter-spacing: 2px;
      }

      /* Hover Effect for Navbar Links */
      .navbar-nav .nav-link:hover {
        color: #ccc; /* Optional hover color */
      }

      /* Logo Container */
      .logo {
        font-family: "Playfair Display", serif; /* Stylish serif font */
        font-weight: 700;
        font-size: 1.2rem; /* Size of the logo */
        color: #2c3e50; /* Dark blue-gray */
        letter-spacing: 0.1rem; /* Slight spacing between letters */
        position: relative;
        display: inline-block;
        /* Glow Effect */
        text-shadow: 0 0 5px rgba(44, 62, 80, 0.8),
          0 0 10px rgba(44, 62, 80, 0.6), 0 0 20px rgba(44, 62, 80, 0.4);
      }

      /* Ampersand Styling */
      .logo .ampersand {
        font-family: "Roboto", sans-serif; /* Clean sans-serif for contrast */
        font-weight: 400;
        font-size: 1.5rem; /* Slightly smaller than the letters */
        vertical-align: middle;
        color: #ffffff; /* Red for emphasis */
        margin: 0 0.2rem;
      }

      /* Decorative Line */
      .logo::after {
        content: "";
        display: block;
        width: 80%;
        height: 3px;
        background: #ffffff; /* Matches the ampersand color */
        margin: 0.5rem auto 0;
      }

      /* Ensure the video and overlay fill the section */
      #home {
        position: relative;
        overflow: hidden;
      }

      #home video {
        z-index: -1;
      }

      /* Overlay styling */
      .carousel-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.8),
          rgba(0, 0, 0, 0.7)
        );
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      /* Carousel content styling */
      .carousel-content {
        padding: 3rem;
        border-radius: 8px;
        text-align: center;
        color: #fff;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
      }

      .carousel-content h1 {
        font-family: "Nunito Sans", serif;
        font-size: 3.5rem;
        text-transform: uppercase;
        margin-bottom: 1rem;
        color: #f4f4f4;
      }

      .carousel-content p {
        font-size: 1rem;
        padding-top: 10px;
        padding-bottom: 20px;
        margin-bottom: 20px;
        color: #ddd;
      }

      .carousel-content .btn {
        padding: 15px 25px;
        border: 2px solid #fff;
        border-radius: 30px;
        font-size: 0.9rem;
        text-transform: uppercase;
        transition: all 0.3s ease;
      }

      .carousel-content .btn:hover {
        background-color: #4c5864;
        color: #ffffff;
        font-weight: bold;
      }

      /* Carousel navigation icons */
      .carousel-control-prev,
      .carousel-control-next {
        filter: brightness(0) invert(1);
        opacity: 0.7;
        transition: opacity 0.3s;
      }

      .carousel-control-prev:hover,
      .carousel-control-next:hover {
        opacity: 1;
      }

      /* Style for the navigation tabs */
      .nav-tabs .nav-link {
        background-color: #f1f1f1;
        color: #333;
        border: 1px solid #ddd;
        border-radius: 5px;
        transition: all 0.3s ease-in-out;
        font-size: 12px;
        margin-bottom: 20px;
      }

      .nav-tabs .nav-link:hover {
        background-color: #000000; /* Hover background */
        opacity: 0.2;
        color: #fff; /* Hover text */
      }

      .nav-tabs .nav-link.active {
        background-color: #2c3e50;
        font-size: 12px;
        color: #fff;
      }

      .nav-tabs .nav-link i {
        font-size: 18px;
        color: #2c3e50;
      }

      .nav-tabs .nav-link:hover i,
      .nav-tabs .nav-link.active i {
        color: #fff;
      }

      /* Add margin bottom to give space between the nav and the content */
      .nav-tabs {
        margin-bottom: 20px;
      }

      /* Optional: Add space between the tab content and the container */
      #serviceTabsContent {
        padding-top: 20px;
      }

      /* Set the font size for headings */
      .tab-pane h3 {
        font-size: 20px; /* Set the font size of the headings */
        margin-bottom: 15px; /* Add margin below the heading to create space between the heading and the text */
      }

      /* Adjust the padding between the heading and text */
      .tab-pane p {
        padding-top: 10px; /* Add padding at the top of the paragraph */
      }

      /* Style for the button */
      .custom-btn {
        color: #2c3e50; /* Set the font color */
        background-color: transparent; /* Make background transparent */
        border: 2px solid #2c3e50; /* Set border color */
        border-radius: 0; /* Remove border radius */
        padding: 10px 20px; /* Adjust padding for better button size */
        text-align: center; /* Align text inside the button */
        transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for background and color */
        text-decoration: none;
        margin-bottom: 20px;
      }

      /* Add hover effect */
      .custom-btn:hover {
        background-color: #2c3e50; /* Change background on hover */
        color: white; /* Change text color on hover */
      }

      /* Add space between text and button */
      .col-md-6 p {
        margin-bottom: 30px; /* Adjust the space between the paragraph and the button */
      }

      /* Ensures the images are aligned properly with the text */
      .row.align-items-center {
        display: flex;
        align-items: center;
      }

      /* Ensure images fill the container without distortion */
      .img-overlay-container img {
        width: 100%; /* Make sure the image spans the full width */
        height: 100%; /* Fill the entire height */
        object-fit: cover; /* Preserve aspect ratio while covering the container */
      }

      /* If the container has a fixed height, ensure that images fill it */
      .img-container {
        position: relative;
        height: 100px; /* Adjust this as per your desired height */
        overflow: hidden;
      }

      @media (max-width: 768px) {
        .img-container {
          height: 200px; /* Adjust for mobile screens */
        }
      }

      /* Ensure paragraphs are not bold */
      p {
        font-weight: normal; /* Resets boldness */
      }

      .fav-color {
        color: #2c3e50;
      }

      /* Progress Bar Styling */
      .progress {
        height: 8px; /* Tiny height */
        background-color: #e9ecef; /* Light background */
        border-radius: 5px;
        overflow: hidden;
      }

      .progress-bar {
        background-color: #2c3e50; /* Desired color */
        position: relative;
        font-size: 12px; /* Adjust font size */
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: #fff; /* Label color */
      }

      .progress-bar {
        background-color: #2c3e50;
        color: white;
        height: 8px; /* Tiny height */
        line-height: 8px; /* Center text vertically */
        font-size: 12px;
        text-align: right; /* Align percentage to the right */
        padding-right: 5px; /* Add padding for label */
        transition: width 0.3s ease; /* Smooth transition */
      }

      .hover-effect:hover {
        background-color: #2c3e50;
        color: #fff; /* Text turns white on hover */
        opacity: 0.5;
      }

      .hover-effect .card-title,
      .hover-effect .card-text {
        color: inherit; /* Inherits hover color */
      }

      /* Icon Styling */
      .icon-style {
        color: #2c3e50;
        font-size: 22px;
      }

      .hover-effect:hover {
        background-color: #2c3e50;
        color: #fff;
      }

      .hover-effect .card-title,
      .hover-effect .card-text {
        color: inherit;
      }

      /* Keep Icons Visible and Styled on Hover */
      .hover-effect:hover .icon-style {
        color: #ffffff; /* Change icon color on hover if desired */
      }

      .hover-effect:hover .card-title,
      .hover-effect:hover .card-text {
        color: #ffffff; /* Keep text visible on hover */
      }

      /* General Section Styling */
      #team {
        background: #f8f9fa;
        color: #4c5864;
      }

      #team h3 {
        font-family: "Roboto", sans-serif;
        font-weight: bold;
        color: #343a40;
      }

      #team hr {
        background-color: #4c5864;
      }

      /* Card Styling */
      #team .card {
        border-radius: 10px;
        position: relative;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }

      #team .card:hover {
        transform: translateY(-10px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      }

      /* Card Image Styling */
      #team .card-img-top {
        object-fit: cover;
        height: 305px;
        border-bottom: 5px solid #4c5864;
      }

      /* Social Media Buttons */

      #team .btn:hover {
        background-color: #343a40;
        transform: scale(1.1);
      }

      #team .btn i {
        font-size: 1.2rem;
      }

      /* General Accordion Item Shadow */
      .accordion-item {
        margin-bottom: 1rem; /* Adds spacing between accordion items */
        border: 1px solid #dee2e6; /* Consistent border for all items */
        border-radius: 0.25rem;
        overflow: hidden;
        background-color: #ffffff; /* White background for the whole item */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Default shadow */
      }

      /* Header Styling */
      .accordion-button {
        background-color: #f8f9fa; /* Light gray background */
        color: #333;
        border: none;
        box-shadow: none; /* Removes default box shadow */
        transition: all 0.3s ease;
      }

      /* Add Shadow when Expanded */
      .accordion-item.show {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); /* Shadow for expanded item */
        border: 1px solid #ced4da; /* Slightly darker border when active */
      }

      /* Shadow for Accordion Button when Expanded */
      .accordion-button:not(.collapsed) {
        box-shadow: none; /* Prevent double shadows */
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6; /* Keep visual separation */
      }

      /* Accordion Body */
      .accordion-body {
        background-color: #ffffff;
        padding: 1rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Matches item shadow */
        border-top: 1px solid #dee2e6;
      }

      /* Remove Blue Focus Outline */
      .accordion-button:focus {
        box-shadow: none;
      }

      /* Ensure consistent corner radius for first and last items */
      .accordion-item:first-child .accordion-button:not(.collapsed) {
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
      }
      .accordion-item:last-child .accordion-body {
        border-bottom-left-radius: 0.25rem;
        border-bottom-right-radius: 0.25rem;
      }

      /* Style for the icons in the contact section */
      .fas {
        font-size: 20px; /* Set the font size of the icons */
      }

      /* Remove border and outline on form fields when focused */
      input:focus,
      textarea:focus,
      select:focus {
        outline: none !important; /* Remove the outline */
        box-shadow: none !important; /* Remove any box shadow */
        border: none !important; /* Remove border on focus */
      }

      /* Remove borders and outlines for all form fields */
      input,
      textarea,
      select {
        border: none !important; /* Remove the border */
        outline: none !important; /* Remove the outline */
        box-shadow: none !important; /* Remove any box shadow */
      }

      /* Remove border on the hamburger menu */
      .navbar-toggler:focus,
      .navbar-toggler:active {
        outline: none !important; /* Remove the focus outline */
        box-shadow: none !important; /* Remove any box shadow */
        border: none !important; /* Remove the border around the hamburger button */
      }

      /* Container to position the image for hover effects */
      .img-overlay-container {
        position: relative;
        overflow: hidden;
        border-radius: 8px; /* Ensures rounded corners for the image */
      }

      /* Hover effect on the image */
      .img-overlay-container img {
        transition: all 0.3s ease-in-out; /* Smooth transition for hover effect */
      }

      /* On hover, scale the image and apply a shadow */
      .img-overlay-container:hover img {
        transform: scale(1.05); /* Slightly zoom the image */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Add shadow */
      }

      /* Optional: Adding a fade effect for the image (opacity change) */
      .img-overlay-container:hover img {
        opacity: 0.9; /* Makes the image a bit transparent on hover */
      }

      /* Style the hidden text */
      .more-text {
        margin-top: 10px;
        color: #555;
      }

      /* Optional: Add a transition effect for the expanded content */
      .more-text {
        transition: max-height 0.3s ease-in-out;
        overflow: hidden;
      }

      /* Footer Section */
      #footer {
        background-color: #343a40; /* Dark background */
        color: #fff; /* White text */
        padding: 50px 0; /* Padding for spacing */
      }

      #footer h4 {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 15px;
        color: #a18e41; /* Gold color for headings */
      }

      #footer p {
        font-size: 14px;
        line-height: 1.5;
      }

      #footer .list-unstyled li {
        margin-bottom: 10px;
      }

      #footer .list-unstyled a {
        color: #fff;
        text-decoration: none;
        transition: color 0.3s ease-in-out;
      }

      #footer .list-unstyled a:hover {
        color: #86742c; /* Gold color on hover */
      }

      #footer .form-control {
        border-radius: 20px;
        border: 1px solid #ccc;
        padding: 10px;
      }

      #footer .btn-primary {
        background-color: #5e5327; /* Gold button */
        border: 1px solid #978439;
        color: #fff;
        transition: background-color 0.3s ease;
      }

      #footer .btn-primary:hover {
        background-color: #745840; /* Darker gold on hover */
        border-color: #e67e22;
      }

      /* Footer Bottom Section */
      .footer {
        background-color: #343a40; /* Dark background */
        color: #fff;
        padding: 20px 0;
        font-size: 14px;
      }

      .footer p {
        margin: 0;
      }

      .footer .fas {
        font-size: 20px;
        color: #937d23; /* Gold color for icons */
        transition: color 0.3s ease;
      }

      .footer .fas:hover {
        color: #8a8b4c; /* Darker gold on icon hover */
      }

      /* Scroll to Top Button */
      .scrollup {
        position: fixed;
        bottom: 20px;
        right: 20px;
        color: #fff; /* White text */
        padding: 2px; /* Reduced padding for a smaller button */
        border-radius: 55%; /* Circular shape */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Shadow for better visibility */
        transition: background-color 0.3s ease, transform 0.3s ease;
      }

      .scrollup a {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px; /* Reduced icon size */
        color: #2c3e50; /* Icon color set to #2c3e50 */
        text-decoration: none;
        transition: color 0.3s ease;
      }

      .scrollup a:hover {
        color: #fff; /* Change icon color to white on hover */
      }

      .scrollup i {
        font-size: 18px; /* Slightly smaller icon size */
        transition: color 0.3s ease;
      }

      .scrollup:hover i {
        color: #fff; /* Icon turns white when hovered */
      }

      /* Social Media Links */
      .footer .text-white {
        color: #fff;
      }

      .footer .text-white:hover {
        color: #706227; /* Gold color on hover */
      }

      .footer .me-3 {
        margin-right: 15px;
      }

      /* Responsive Styles */
      @media (max-width: 991px) {
        #footer .col-md-6 {
          margin-bottom: 20px;
        }

        .footer .scrollup {
          bottom: 10px;
          right: 10px;
        }
      }

      /* Styling for the active nav link */
      .navbar-nav .nav-item .nav-link.active {
        color: white; /* Make the text white */
        border-bottom: 2px solid white; /* White underline */
        width: 50%; /* Make the underline 50% shorter */
      }

      /* Optional: Add hover effect */
      .navbar-nav .nav-item .nav-link:hover {
        color: white; /* Ensure hover also turns text white */
      }

      .text-facebook {
        color: #3b5998; /* Facebook Blue */
      }

      .text-twitter {
        color: #1da1f2; /* Twitter Blue */
      }

      .text-instagram {
        color: orangered;
      }