/* Header layout with photo on the left and centered text */
.header-container {
    display: flex;
    align-items: center; /* vertically center the text next to photo */
    justify-content: center; /* center the whole container horizontally */
    max-width: 1000px;
    margin: auto;
    gap: 30px; /* space between photo and text */
    padding: 20px;
}
.corner-logo {
  position: absolute;
  top: 10px;
  left: 15px;

  width: 80px;      /* smaller size */
  max-width: 80px;  /* prevents it from stretching */
  height: auto;

  z-index: 1000;
}
/* ===== Fair Housing Logo - Top Right ===== */
.fair-logo {
  position: absolute;
  top: 15px;
  right: 15px;   /* 👈 puts it on the right side */
  width: 80px;   /* adjust size here */
  height: auto;
  z-index: 1000;
}


/* Header background with image and rounded bottom corners */
header {
    background-image: url(images/header-photo.jpg'); /* correct syntax */
    background-size: cover;       /* ensures image covers the header */
    background-position: center;  /* centers the image */
    background-repeat: no-repeat; /* prevents tiling */
    padding: 40px 20px;
    /border-bottom-left-radius: 30px;   /* rounded top left corner */
    /border-bottom-right-radius: 30px;  /* rounded top right corner */
    color: white;                    /* ensures text is visible over image */
    min-height: 300px;               /* ensures header is visible */
}
/* Header styling */
header {
  background:#5a6b70;
  color:white;
  padding:40px 20px;
  text-align:center;
}

/* Centered content inside header */
.header-container {
  max-width:1000px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:30px;
}

/* NAVIGATION */
nav {
  background:#5a6b70;   /* gray bar */
  padding:15px 0;
  display:flex;
  justify-content:center;
  box-shadow:0 2px 5px rgba(0,0,0,0.1);
}

.nav-inner {
  max-width:1000px;
  width:100%;
  display:flex;
  justify-content:center;
  gap:25px;
}

nav a {
  text-decoration:none;
  color:white;        /* text white on gray background */
  font-weight:bold;
}



nav a:hover {
  background:#7aa1d6;
  color:white;
  transform:translateY(-2px);
  box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

/* Responsive: stack nav links vertically */
@media(max-width:768px){
  .nav-inner {
    flex-direction:column;
    gap:10px;
    align-items:center;
  }
}


  }
}



/* Nav links */
nav a {
    text-decoration: none;
    color: #7aa1d6;           /* main tab color */
    font-weight: bold;
    padding: 8px 15px;
    border-radius: 5px;
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

/* Hover effect for tabs */
nav a:hover {
    background: #7aa1d6;       /* hover background color */
    color: white;              
    transform: translateY(-2px); /* slight lift effect */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Active tab (optional) */
nav a.active {
    background: #074a9e;       /* slightly darker for active tab */
    color: white;
}

/* Responsive: stack nav links vertically on mobile */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
}

/* Agent photo with hover effect */
.agent-photo {
    width: 350px; /* adjust photo size */
    height: 350px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.agent-photo:hover {
    transform: scale(1.05); /* slightly enlarge photo */
    box-shadow: 0 10px 20px rgba(0,0,0,0.3); /* subtle shadow */
}

/* Agent info: vertical centering and text centering */
.agent-info {
    text-align: center; /* center title and bio */
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertical centering */
}

.agent-info h1 {
    margin-bottom: 10px;
    font-size: 2.2rem;
    transition: color 0.3s ease;
}

.agent-info h1:hover {
    color: #78b3b0; /* changes color on hover, gold accent */
}

.agent-info p {
    margin: 0;
    color: white;
    font-size: 1.1rem;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.agent-info p:hover {
    color: #e0e0e0; /* subtle lightening on hover */
}




/* Responsive: stack photo above text on small screens */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .agent-info {
        text-align: center;
    }

    .agent-photo {
        margin-bottom: 15px;
    }
}
.preapprove-card {
  margin: 20px auto;        /* centers the card */
  width: 90%;               /* responsive width */
  max-width: 1000px;        /* keeps desktop size */
  height: 150px;

  background-color: #429bf5;
  color: white;
  text-decoration: none;
  border-radius: 8px;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  font-weight: bold;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: 0.2s ease;
}

.preapprove-card:hover {
  transform: translateY(-5px);
  background-color: #20c972;
}
/* Property listings grid */
.property-list { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 20px; 
}

/* Individual property card */
.property-card { 
    background: white; 
    border: 1px solid #ddd; 
    border-radius: 0;   /* square corners */
    overflow: hidden; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    position: relative;
}

/* Images inside property cards */
.property-card img {
    border-radius: 0;   /* make image corners square */
    display: block;     /* remove gaps below images */
    width: 100%;        /* fill card width */
    height: auto;
    object-fit: cover; 
}
html {
  scroll-behavior: smooth;
}