:root {
      --primary: #0061f2;
      --dark-bg: #0b1120;
      --light-bg: #f9f9f9;
      --dark-text: #ffffff;
      --light-text: #000000;
    }
    .py-3 {
      padding-top: 10px !important;
      padding-bottom: 10px !important;
    }
    .bg-dark {
        --bs-bg-opacity: 1;
        background-color: rgb(0, 3, 5) !important;
    }

    .navbar-nav{
        .nav-link {
                text-transform:uppercase;
                font-size: 14px;
                color:#ffffff !important;
                }
          .nav-link:hover {
            color:#ae8b4e !important;
                }
          .nav-link:focus {
            color:#ae8b4e !important;
                }
    }
    .navbar-brand img {
                height:50px !important;
                width: auto;
    }

    [data-theme="dark"] {
      background-color: var(--dark-bg);
      color: var(--dark-text);
    }
    [data-theme="light"] {
      background-color: var(--light-bg);
      color: var(--light-text);
    }
    .btn-theme-toggle {
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 1000;
    }
    .hero {
      margin: auto !important;
      min-height: 100vh;
      background: url('https://7emiratesrealestate.com/wp-content/uploads/2025/07/img320-scaled-1.jpg') center/cover no-repeat;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;  
      text-align: center;
      position: relative;

      .feature-icon {
                    font-size: 2rem;
                    margin-bottom: 1rem;
                    color: var(--primary);
                    }
    }
.contact-form {
  margin: auto !important;
    background-color: #000 !important;
    padding: 2rem;
    border-radius: 10px;
    max-width: 500px;
}
    section .form1 {
    max-width: 270px !important;
    margin: 20px auto !important;
    }

    .form-floating >label {
        border: 4px;
        margin: 5px;
        padding: 6px 5px 3px 12px;
        color: black;

        span {
            color: rgb(174, 139, 78);
        }

    }
    a.forgot-password {
              color:#ae8b4e;;
              font-size: 12px;
              text-decoration: goldenrod;
      }

    a.forgot-password:hover {
              color:whitesmoke;

            }
    a.forgot-password:focus {
              color:whitesmoke;

            }

    a.signup:hover {
              color:whitesmoke;

            }
    a.signup:focus {
              color:whitesmoke;

            }

      a.signup   {
              color:#ae8b4e;;
              font-size: 16px;
              text-decoration: goldenrod;
      }
      a.back-tO-login {
              color:#ae8b4e;;
              font-size: 12px;
              text-decoration: goldenrod;
      }

    a.back-tO-login:hover {
              color:whitesmoke;

            }
    a.back-tO-login:focus {
              color:#ae8b4e;
    }
    .hero {
      background-image: url("http://localhost:8888/Real-Estate-Management-Geofrey/admin-folder/uploads/hero-dubai-image.jpg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
       
  /* Custom CSS for the Black and Gold Theme */
      :root {
          /* Deep dark color for cards and secondary backgrounds */
          --bs-primary: #1a1a1a; 
          /* Golden Yellow accent color */
          --bs-warning: #FFC312; 
      }
      body { 
          font-family: 'Inter', sans-serif; 
          /* Pure Black Background */
          background-color: #000000;
          /* Default text color is white/light */
          color: #ffffff; 
      }
      /* Style for the individual hero slides */
          .hero-slide {
              height: 700px;
              background-size: cover;
              background-position: center;
              flex-shrink: 0; 
              /*width: 100%; this affects the slideshoww*/
              /* To fix the where only 1 slide shows is by customizing the equation with javasscript*/

          }
      /* Wrapper for horizontal movement - essential for the slider effect */
      #slides-wrapper {
          display: flex;
          /* Smooth transition for sliding motion */
          transition: transform 1s ease-in-out; 
      }
      /* Text overlay style for legibility */
      .hero-caption {
          background-color: rgba(0, 0, 0, 0.4);
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
      }
      .position-relative {
          height: 700px;
      }        
      
      /* Positioning for the search bar to overlap the hero and content */
      .search-bar-positioning {
          position: relative;
          bottom: 350px;
          left: 50%;
          /* Centers the element horizontally and shifts it up by half its height */
          transform: translate(-50%, 50%);
          width: 100%;
          max-width: 100%;
          z-index: 100;
                  
      }  


      /* --- Custom Dark Mode Styles --- */
      
      /* White text for main titles and headings (replacing primary/dark) */
      .text-white-primary { color: #ffffff !important; } 
      /* Golden text for accents (prices, highlights) */
      .text-warning { color: var(--bs-warning) !important; } 
      /* Light grey for muted text (descriptions, smaller details) */
      .text-muted { color: #adb5bd !important; } 
      
      /* Backgrounds */
    .bg-dark-card {
        max-height: max-content;
        padding: 10px !important;
        opacity: 0.8;
        background-color: var(--bs-primary) !important;
        border: 1px solid #333;/* Subtle border for definition */
    }

      .bg-black-pure { background-color: #000000 !important; }

      /* Form Controls (Inputs/Selects) */
      .form-control, .form-select {
          background-color: #2c2c2c !important; /* Dark input fields */
          color: #ffffff !important;
          border-color: #444444 !important;
      }
      .form-floating>label {
          color: #adb5bd; /* Label color in dark mode */
      }
      .form-floating>.form-control:focus~label,
      .form-floating>.form-control:not(:placeholder-shown)~label,
      .form-floating>.form-select~label {
          opacity: .8;
          transform: scale(.85) translateY(-.5rem) translateX(.15rem);
      }
      .btn-warning { 
          background-color: var(--bs-warning); 
          border-color: var(--bs-warning); 
          color: #111111 !important; /* Dark text on bright button */
      }
      .btn-warning:hover { 
          background-color: #f3b000; 
          border-color: #f3b000; 
      }
      .btn-outline-warning {
          color: var(--bs-warning);
          border-color: var(--bs-warning);
      }
      .btn-outline-warning:hover {
          background-color: #ae8b4e;
          color: #111111 !important;
      }