/* Custom Styles */
    body {
      font-family: 'Tajawal', sans-serif;
      background-color: #f8f9fa;
      margin: 0;
      padding: 0;
    }


    

    /* Header styles */
   header {
   background-color: #161f48; /* Header background color */
   }

  .container {
  max-width: 1200px;
  margin: auto;
   }

   .navbar {
  padding: 1rem;
  }

  .navbar-brand {
  margin-left: auto; /* Push the logo to the right side */
  text-align: right; /* Ensure proper alignment */
  }

  .navbar-brand img {
  max-height: 50px; /* Adjust logo size for larger screens */
  height: auto; /* Maintain aspect ratio */
  }

  .navbar-nav .nav-link {
  color: #fff;
  padding: 0.5rem 1rem;
 }

 .navbar-nav .nav-link.active {
  font-weight: bold;
 }

 .navbar-toggler {
  border: none;
 }

  /* Adjust the .oh-logo */
  .oh-logo {
  width: 30% !important;
  z-index: 1220;
  height: auto; /* Maintain aspect ratio */
  margin-top: 20px;
 }

 /* Center align the .oh-logo */
 .text-left {
  text-align: left;
  margin-left: 20px;
  margin-top: -100px;;

 }


    /* Floating WhatsApp Button */
    .float {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: #25d366;
      border-radius: 50%;
      padding: 10px;
      z-index: 1000;
    }

    .float img {
      width: 40px;
      height: 40px;
    }

    /* Breadcrumb Area */
    .breadcrumb-area {
      background-color: #161f48; /* Solid fallback color */
      color: #fff !important;
      padding: 30px 0;
      background: #161f48 url('path-to-pattern.png') repeat; /* Rectangle pattern */
      background-size: 20px 20px; /* Adjust size of the pattern */
    }

    .breadcrumb-inner .page-title {
      color: #fff;
    }

    .breadcrumb-list ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 5px;
      align-items: center;
    }

    .breadcrumb-list ul li {
      color: #fff;
    }

    .breadcrumb-list ul li a {
      color: #fff; /* Highlight for links */
      text-decoration: none;
    }

    .breadcrumb-list ul li a i {
      margin-right: 5px;
    }

/* Responsive Layout for Mobile */
@media (max-width: 480px) {
  .navbar-nav .nav-link {
    display: none; /* Hide navigation links */
  }

  .navbar-nav .nav-link.active {
    display: none; /* Hide active links as well */
  }
}

    
    
    /* body start */

    .bg_ele {
        position: relative;
        background-image: url('https://oh.sa/wp-content/uploads/2025/03/room.jpeg');
        background-size: cover;  /* Ensures the image covers the entire area */
        background-position: center center;  /* Centers the image */
        background-repeat: no-repeat;  /* Prevents the image from repeating */
        width: 50%;
        }
      
        .bg_ele::after {
        content: ''; 
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.579);  /* Dark semi-transparent overlay */
        z-index: 1;  /* Ensures the overlay is above the image but below text */
         }
      
       .project-btn-actions {
        position: relative;
        z-index: 2;  /* Ensures the content (text and buttons) is above the overlay */
        }
      
        .btn_actions_tpo {
        background-color: #f4f4f4;
       }
      
       .form-filter input, .form-filter select, .form-filter button {
        width: 100%;
        padding: 10px;
        margin: 5px 0;
       }
      
       .form-filter button {
        background-color: #161f48;
        color: white;
       }
      
       .form-filter button:hover {
        background-color: #161f48;
       }
      
       .row.gx-3 {
       
        padding: 20px 0; /* Add padding above and below */
        border-radius: 10px; /* Rounded corners for the background */
       }
      
       /* Download Link Styling */
       .download-link {
        display: flex;
        align-items: center;
        background-color: #161f48; /* Dark background for the link */
        color: white; /* White text */
        padding: 10px 15px; /* Padding for the link */
        border-radius: 8px; /* Rounded corners */
        text-decoration: none; /* Remove underline from the link */
        transition: background-color 0.3s ease; /* Smooth transition on hover */
        font-size: 16px;
       }
      
       /* Hover effect for the link */
       .download-link:hover {
        background-color: #161f48;/* Darker shade on hover */
       }
      
       /* Icon styling */
       .download-link i {
        margin-right: 10px; /* Space between the icon and text */
        font-size: 18px; /* Icon size */
       }
      
       /* Responsive Layout for Mobile */
       @media (max-width: 480px) {
        .oh-logo {
        width: 25% !important;
        height: auto; /* Maintain aspect ratio */
        z-index: 1220;
        margin-top: 20px;
        }
      
       /* Center align the .oh-logo */
       .text-left {
        text-align: left;
        margin-left: 20px;
        padding-top: 0px;
      
       }
       .navbar-brand img {
          width: auto !important; /* Keeps the original aspect ratio */
          max-width: 100%; /* Limits size for better responsiveness */
          padding-bottom: 20px !important; 
          display: block;
          margin: 0 auto; /* Centers the image */
        }
      
      
        .row.gx-3 {
          padding: 15px 0; /* Adjust padding for smaller screens */
        }
      
        /* Ensure download link takes full width on small screens */
        .download-link {
          width: 100%;
          justify-content: center;
        }
      
        /* Icon size adjustment on mobile */
        .download-link i {
          font-size: 20px;
        }
      
      
        .bg_ele {
        position: relative;
        background-image: url('https://oh.sa/wp-content/uploads/2025/03/room.jpeg');
        background-size: cover;  /* Ensures the image covers the entire area */
        background-position: center center;  /* Centers the image */
        background-repeat: no-repeat;  /* Prevents the image from repeating */
        width: 100%;
       }
       }
      
        .unit-item {
          display: block;
          text-decoration: none;
          color: inherit; /* Inherit color from the container */
       }
      
       .unit-img {
          position: relative;
          width: 100%;
          height: 200px; /* Set a fixed height for images */
          overflow: hidden;
          border-radius: 2px;
       }
      
       .unit-img img {
          object-fit: cover;
          width: 100%;
          height: 100%;
          border-radius: 2px;
       }
       .unit-img i {
          position: absolute;
          top: 10px;
          right: 10px;
          color: white;
          z-index: 2;
       }
       .unit-info {
          background-color: #fff;
          padding: 20px;
          border-radius: 10px;
          margin-top: -20px;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
       }
      
       .unit-price {
          font-size: 18px;
          font-weight: bold;
          color: #161f48;
       }
      
       .project-title {
          font-size: 20px;
          font-weight: bold;
          margin-top: 10px;
          color: #161f48;
       }
      
       .listings-features li {
          font-size: 14px;
          color: #161f48;
          margin-bottom: 5px;
       }
      
       .listings-features i {
        color: #161f48; /* Example: Bootstrap primary blue */}
      
      
      
      
      
        /* Modal Styling */
        .modal-content {
          border-radius: 10px;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
       }
      
       .modal-header {
          background-color: #202428;
          color: white;
          border-radius: 10px 10px 0 0;
       }
      
       .modal-footer {
          background-color: #f9f9f9;
          border-top: 1px solid #ddd;
       }
      
       .modal-body {
          padding: 30px;
          color: #161f48; /* Example: Bootstrap primary blue */}
      
       .modal-body img {
          border-radius: 10px;
          margin-top: 10px;
       }
      
       /* Responsive for smaller screens */
        @media (max-width: 768px) {
          .unit-info {
              padding: 15px;
          }
      
          .unit-price {
              font-size: 16px;
          }
      
          .project-title {
              font-size: 18px;
          }
      
          .modal-body {
              padding: 20px;
          }
       }
      
       /* General Styling */
       .units-available-for-sale {
        width: 90%; /* Adjust width to 90% */
        margin: 0 auto; /* Center the container horizontally */
        display: flex;
        justify-content: center; /* Align items in the center */
        align-items: flex-start;
        padding: 40px 0;
        background-color: #f9f9f9; /* Light background for the section */
       }
      
       .unit-item {
        display: block;
        text-decoration: none;
        color: inherit; /* Inherit color from the container */
        margin: 0 auto; /* Center each item */
        width: 100%; /* Make the items take full width on smaller screens */
       }
      
       .unit-info {
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        margin-top: -20px;
       }
      
       .unit-price {
          font-size: 1rem; /* Adjust font size of the price */
          font-weight: bold;
          color: #161f48; /* Example: Bootstrap primary blue */
          margin-bottom: 0.5rem; /* Adds spacing below the price */
       }
       .title_inf h1, .title_inf h4 {
        margin-top: 20px; /* Adds space above the title */
       }
      
       .project-title {
          font-size: 1.2rem; /* Adjust font size for project title */
          font-weight: bold;
          color: #333;
          margin-top: 0; /* Remove margin-top to prevent the title from shifting */
       }
      
       .project-info {
        display: flex;
        flex-direction: column; /* Stack children vertically */
        gap: 10px; /* Add spacing between rows */
       }
      
       .unit-price, .project-title {
        margin: 0;
       }
      
      
       .listings-features {
        list-style-type: none;
        padding: 0;
        margin-top: 10px;
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Two columns for the features */
        gap: 10px;
        justify-content: center; /* Center features */
       }
      
       .listings-features li {
        font-size: 0.9rem;
        color: #161f48; /* Example: Bootstrap primary blue */
        background-color: #f7f7f7dc;
        display: flex;
        align-items: center;
       }
      
        .listings-features li i {
        color: #090b0a;
        margin-right: 5px;
        }
       .modal-body {
        padding: 20px;
       }
      
       .unit-info {
        font-size: 1.1rem;
        line-height: 1.6;
       }
      
        .details-table table {
        width: 100%;
        text-align: right;
       }
      
       .unit-blueprint img {
        max-width: 100%;
        height: 50%;
        margin-top: 20px;
       }
       .unit-images{
        max-width: 100%;
        width: 1600px !important;
       }
      
       .unit-item {
        display: block;
        text-decoration: none;
        position: relative;
        transition: background-color 0.3s ease, transform 0.3s ease;
        border-radius: 4px; /* Matches the rounded image corners */
        overflow: hidden; /* Ensures overlay stays within bounds */
       }
      
       .unit-img {
        position: relative;
        overflow: hidden; /* Ensure overlay is bounded by the image area */
        border-radius: 4px; /* Matches image border */
       }
      
       .unit-img img {
        transition: transform 0.3s ease, filter 0.3s ease;
        width: 100%;
        height: auto;
       }
      
       .unit-item:hover .unit-img img {
        transform: scale(1.05); /* Slight zoom on image */
        filter: brightness(1.1); /* Slight brightness effect */
       }
      
       .unit-img::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 123, 255, 0); /* Transparent by default */
        /* background-color: #161f48; Example: Bootstrap primary blue */
        transition: background-color 0.3s ease;
        z-index: 1;
       }
      
       .unit-item:hover .unit-img::after {
        background-color: rgba(0, 123, 255, 0.3); /* Blue overlay with transparency */
       }
      
       .modal-header {
        background-color: #ffffff; /* White background */
        color: #161f48; /* Example: Bootstrap primary blue */
        border-bottom: 1px solid #ddd; /* Optional border for separation */
       }
      
       .modal-header .modal-title {
        color: #000000; /* Ensure the title text is black */
        font-weight: bold; /* Optional: make the title bold */
       }
      
       .modal-header .btn-close {
        background-color: transparent; /* Ensure no background */
        border: none; /* Remove any border */
       }
      
       .modal-header .btn-close::before, 
       .modal-header .btn-close::after {
        content: '';
        display: block;
        position: absolute;
        width: 12px;
        height: 2px;
        background-color: #000; /* Black color for the close icon */
        transform-origin: center;
       }
      
       .modal-header .btn-close::before {
        transform: rotate(45deg); /* Creates one diagonal line */
       }
      
       .modal-header .btn-close::after {
        transform: rotate(-45deg); /* Creates the other diagonal line */
       }
      
      
      
       .form{
        margin-top: 180px;
       }
      
       /* Ensure swiper container takes up the full space of the parent */
       .swiper-container {
        width: 100%; /* Full width */
        height: auto; /* Adjust height as needed */
        margin: 20px auto; /* Center the swiper */
        border-radius: 10px;
        overflow: hidden;
        position: relative; /* Important for positioning the buttons correctly */
       }
      
       /* Style for the navigation buttons */
       .swiper-button-next,
       .swiper-button-prev {
        color: #fff;
        width: 10px;
          height: 30px;
          font-size: 16px;
        /* background: rgba(0, 0, 0, 0.5); */
      
       }
      
       .swiper-button-next {
        right: 10px; /* Place the next button on the right side */
       } 
      
       .swiper-button-prev {
        left: 10px; /* Place the prev button on the left side */
       }
      
       /* Optional: Style for the pagination */
       .swiper-pagination {
        bottom: 10px;
        text-align: center;
        position: absolute;
        left: 0;
        /* width: 100%; */
       }
      
       .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
          /* color: black; */
          /* background-color: black !important; */
       }
       .unit-label {
        position: absolute;
        top: 100px; /* Adjust to set the vertical position */
        left: 50%;
        transform: translateX(-50%); /* Centers the label horizontally */
        /* background-color: rgba(47, 47, 52, 0.7); Semi-transparent black */
        color: #fff; /* White text */
        padding: 5px 10px; /* Padding around the text */
        border-radius: 4px; /* Rounded corners */
        font-size: 14px; /* Adjust text size */
        font-weight: bold; /* Bold text */
        z-index: 10; /* Ensure it appears above the image */
        }
      
      
      
      
      
      
       /* General Footer Styling */
       footer {
        background-color: #161f48;
        color: #fff;
        font-size: 16px;
        padding: 20px 0; /* Adjusted padding */
       }
      
       footer a {
        color: #fff;
        text-decoration: none;
        transition: color 0.3s ease;
       }
      
       footer a:hover {
        color: #ac9055;
       }
      
       footer .logo-footer2 {
        filter: brightness(0) invert(1);
        transition: transform 0.3s ease;
        margin-top: -60px;
       }
      
       footer .logo-footer:hover {
        transform: scale(1.1);
       }
      
       footer .title {
        color: #ac9055;
        font-size: 18px;
        font-weight: bold;
       }
      
       footer .links li {
        margin-bottom: 10px;
        list-style: none;
       }
      
       footer .links li a {
        display: flex;
        align-items: center;
       }
      
       footer .links li a i {
        margin-right: 10px;
       }
      
       footer .social-media {
        display: flex;
        justify-content: flex-start; /* Align social icons to the left */
        gap: 15px;
        list-style: none;
        margin-right: 10px;
       }
      
       footer .social-media li a {
        font-size: 20px;
        color: white;
        transition: color 0.3s ease, transform 0.3s ease;
       }
      
       footer .social-media li a:hover {
        color: #ac9055;
        transform: scale(1.2);
       }
      
       footer p {
        margin: 0;
       }
      
       @media (max-width: 768px) {
        footer .links li {
          font-size: 14px;
        }
      
        footer .social-media li a {
          font-size: 18px;
        }
      
        footer .logo-footer {
          width: 60%; /* Reduce logo size on mobile */
        }
      
        footer .social-media {
          justify-content: center; /* Center icons on small screens */
        }
      
        footer .text-left, footer .text-right {
          text-align: center; /* Center text on small screens */
        }
       }
       /* Specific styles for the logo and text inside the footer */
       .footer-logo-container {
        display: flex;
        flex-direction: column;
        align-items: center;
       }
      
       .footer-logo-container .logo-footer {
        margin-bottom: 0; /* Remove any bottom margin to maintain the layout */
       }
      
       .footer-logo-container .logo-text {
        margin-top: -75px; /* Adjust this value to fine-tune the alignment */
        font-size: 14px; /* Set the desired font size */
        color: white; /* Set text color if needed */
        text-align: center; /* Center the text under the logo */
        margin-left: 50px;
       }
       .logo-text {
        margin-left: -8px !important;
       }
      
       .nav-pills .nav-link {
          color: #ac9055;
        }
       .warranty-list {
        gap: 20px;
        justify-content: space-between;
       }
      
      
        @media (max-width: 480px) {
        .warranty-list {
          gap: 10px; /* Adjust gap for mobile */
          justify-content: flex-start; /* Align items to the start */
          flex-wrap: wrap; /* Allow wrapping of items */
        }
      
        .footer-logo-container .logo-text {
        margin-top: -95px; /* Adjust this value to fine-tune the alignment */
        font-size: 14px; /* Set the desired font size */
        color: white; /* Set text color if needed */
        text-align: center; /* Center the text under the logo */
        margin-left: 0px;
       }
      
        .warranty-list li {
          flex: 0 0 48%; /* 2 columns layout on mobile */
          margin-bottom: 10px; /* Reduced space between items */
          font-size: 0.9rem; /* Adjust font size for mobile */
          display: flex;
          align-items: center;
        }
      
        .icon-box {
          width: 25px; /* Smaller icon size for mobile */
          height: 25px; /* Smaller icon size for mobile */
          margin-left: 8px; /* Adjust left margin */
          font-size: 0.8rem; /* Smaller icon font size */
        }
      
        .nav-pills .nav-link {
          font-size: 0.9rem; /* Adjust font size of the nav links */
          color: #ac9055;
          background-color:#161f48;
          padding: 5px 10px; /* Adjust padding for mobile */
        }
      
        .nav-pills .nav-link.active {
          background: #ac9055;;
          background-color:#161f48;
          color: #fff;
        }
        .form{
        margin-top: 100px !important;
       }
       }
       /* Align logo and social media icons perfectly */
       .footer-logo-and-social {
        display: flex;
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center align everything horizontally */
        justify-content: center; /* Center align everything vertically if needed */
       }
      
       .footer-logo-and-social .logo-footer {
        margin-bottom: 20px; /* Space between the logo and the social media icons */
       }
      
       .footer-logo-and-social .social-media {
        list-style: none; /* Remove default list styling */
        padding: 0;
        margin-top: -35px;
        display: flex;
        gap: 10px; /* Space between icons */
        justify-content: center; /* Center align the icons */
       }
      
       .footer-logo-and-social .social-media li a {
        font-size: 20px; /* Adjust icon size */
        color: #fff; /* Default icon color */
        transition: color 0.3s; /* Smooth transition for hover effect */
       }
      
       .footer-logo-and-social .social-media li a:hover {
        color: #ac9055; /* Change color on hover */
       }
      
      
      
      
       /* Center-align the middle section */
       .col-lg-6 {
        text-align: center; /* Center all text and inline elements */
       }
      
       .col-lg-6 h5 {
        font-size: 1.5rem; /* Adjust heading size for better appearance */
        margin-bottom: 1.5rem; /* Add consistent spacing below heading */
       }
      
       .col-lg-6 .links {
        list-style: none; /* Remove list styles */
        padding: 0; /* Remove padding */
        margin: 0 auto; /* Center the list horizontally */
       }
      
       .col-lg-6 .links li {
        margin-bottom: 1rem; /* Space between each link */
       }
      
       .col-lg-6 .links li a {
        display: inline-flex; /* Align icon and text horizontally */
        align-items: center; /* Vertically align icon and text */
        text-decoration: none; /* Remove link underline */
        font-size: 1rem; /* Adjust font size */
        color: #fff; /* Default link color */
       }
      
       .col-lg-6 .links li a i {
        margin-right: 8px; /* Space between icon and text */
        color: #ac9055; /* Set icon color */
       }
      
       .col-lg-6 .links li a:hover i {
        color: #000; /* Change icon color on hover */
       }
       .oh-logo{
       margin-left: 20px;
       direction: left;
       z-index: 1220;
       }
      
      
       /* Highlight the name with yellow background and styling */
       .highlight {
        background-color: #ceac24;
        color: #ffffff; ; /* Optional: Adjust text color for contrast */
        font-weight: bold;
        padding: 0 5px; /* Add some padding for better appearance */
        border-radius: 4px; /* Optional: Add rounded corners */
       }
       .icon-box {
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f0f0f0;
        border-radius: 50%;
      }
      
      .warranty-list li {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
      }
      
      .warranty-list .icon-box {
        margin-right: 10px;
      }
      
      @media (max-width: 767px) {
        .warranty-list {
          justify-content: center;
        }
      }
      
      @media (max-width: 576px) {
        .nav-link {
          margin-right: 5px;  /* Adjust this value to your preference */
          margin-bottom: 10px; /* Add some space between rows on small screens */
        }
      }
      .custom-logo img {
        width: auto; /* Adjust size as needed */
        max-width: 400px;
        height: auto; /* Maintain aspect ratio */
      }
      
      @media (max-width: 576px) {
            .custom-logo img {
              width: 80px !important ; /* Adjust size as needed */
           max-width: 400px;
        height: 150px !important; 
        }
      }
      @media (max-width: 768px) {
        .oh-logo {
          pointer-events: none; /* If this exists, remove it */
        }
      }
      
      .page-title-link {
        text-decoration: none; /* Remove underline */
        color: inherit; /* Keep original text color */
      }
      
      .page-title-link:hover {
        color: #007bff; /* Change color on hover (optional) */
      }
      
      /* Style for the list */
      ul {
        list-style-type: none; /* Removes the default list bullets */
        padding: 0; /* Removes default padding */
      }
      
      /* Style for the list item */
      li {
        font-size: 18px; /* Adjust font size */
        margin-bottom: 10px; /* Space between list items */
      }
      
      /* Style for the link */
      a {
        text-decoration: none; /* Removes the underline */
        color: #333; /* Default text color */
        font-weight: bold; /* Make the link bold */
      }
      
      /* Hover effect for the link */
      a:hover {
        color: #007bff; /* Change color on hover */
      }