/* =========================
   Oakstone Estates
   Main Stylesheet
========================= */


/* =========================
   GLOBAL RESET
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {

    font-family: Arial, Helvetica, sans-serif;

    background: #F7F3EB;

    color: #242424;

    line-height: 1.6;

}


/* =========================
   HEADER
========================= */


.header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 8%;

    background:#242424;

}



/* Logo Area */

.logo {

    display:flex;

    align-items:center;

    gap:15px;

}



.logo img {

    width:55px;

    height:55px;

    object-fit:contain;

    border-radius:8px;

}



.logo span {

    color:white;

    font-size:30px;

    font-weight:bold;

    letter-spacing:1px;

}



/* Navigation */

.navbar {

    display:flex;

    align-items:center;

    gap:35px;

}



.navbar a {

    color:white;

    text-decoration:none;

    font-weight:500;

    font-size:16px;

    transition:.3s;

}



.navbar a:hover {

    color:#C8A96A;

}



/* Consultation Button */

.nav-button {

    background:#8B6F47;

    color:white;

    padding:13px 26px;

    border-radius:8px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}



.nav-button:hover {

    background:#A88A5C;

}



/* =========================
   MOBILE HEADER
========================= */


@media(max-width:900px){


    .header {

        flex-direction:column;

        gap:25px;

        text-align:center;

    }



    .navbar {

        flex-direction:column;

        gap:20px;

    }


}

/* =========================
   HERO SECTION
========================= */


.hero {

    position: relative;

    height: 85vh;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;


    background-image:

    url("../images/hero-home.jpeg");


    background-size: cover;

    background-position: center;


}



.hero-overlay {

    position: absolute;

    inset: 0;

    background: rgba(0,0,0,.45);

}



.hero-content {

    position: relative;

    z-index: 1;

    max-width: 900px;

    padding: 20px;

}



.hero-content h1 {


    color: white;

    font-size: 68px;

    line-height: 1.15;

    margin-bottom: 25px;


}



.hero-content p {


    color: white;

    font-size: 21px;

    max-width: 700px;

    margin: 0 auto 40px;


}



/* =========================
   BUTTONS
========================= */


.hero-buttons {

    display: flex;

    justify-content: center;

    gap: 20px;

}



.primary-button {


    background: #8B6F47;

    color: white;

    padding: 16px 34px;

    border-radius: 8px;

    text-decoration: none;

    font-weight: 600;

    transition: .3s;


}



.primary-button:hover {

    background: #A88A5C;

}




.secondary-button {


    border: 2px solid white;

    color: white;

    padding: 14px 34px;

    border-radius: 8px;

    text-decoration: none;

    font-weight: 600;

    transition: .3s;


}



.secondary-button:hover {


    background: white;

    color: #242424;


}




/* =========================
   FEATURED PROPERTIES
========================= */


.properties {

    padding: 90px 8%;

    background: #F7F3EB;

}



.section-title {

    text-align: center;

    margin-bottom: 50px;

}



.section-title h2 {

    font-size: 42px;

    color: #242424;

    margin-bottom: 15px;

}



.section-title p {

    font-size: 18px;

    color: #6B6B6B;

}



.property-cards {

    display: flex;

    justify-content: center;

    gap: 30px;

    flex-wrap: wrap;

}



.property-card {

    background: white;

    width: 350px;

    border-radius: 14px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0,0,0,.10);

    transition: .3s;

}



.property-card:hover {

    transform: translateY(-8px);

}



.property-card img {

    width: 100%;

    height: 260px;

    object-fit: cover;

}



.property-info {

    padding: 30px;

}



.property-info h3 {

    font-size: 24px;

    color: #242424;

    margin-bottom: 10px;

}



.property-info h4 {

    color: #8B6F47;

    font-size: 22px;

    margin-bottom: 15px;

}



.property-info p {

    color: #6B6B6B;

    margin-bottom: 25px;

}



.property-button {

    display: inline-block;

    padding: 12px 25px;

    background: #242424;

    color: white;

    text-decoration: none;

    border-radius: 6px;

    font-weight: 600;

    transition: .3s;

}



.property-button:hover {

    background: #8B6F47;

}



/* =========================
   MOBILE PROPERTY CARDS
========================= */


@media(max-width:900px){


    .property-cards {

        flex-direction: column;

        align-items: center;

    }


    .property-card {

        width: 100%;

        max-width: 380px;

    }


}

/* =========================
   WHY OAKSTONE SECTION
========================= */


.why-oakstone {

    padding: 90px 8%;

    background: #93897b;

}



.why-oakstone .section-title h2 {

    color: #242424;

}



.why-oakstone .section-title p {

    color: #000000;

}



.benefit-cards {

    display: flex;

    justify-content: center;

    gap: 30px;

    margin-top: 50px;

}



.benefit-card {

    background: #F7F3EB;

    width: 320px;

    padding: 40px 30px;

    text-align: center;

    border-radius: 14px;

    box-shadow: 0 10px 25px rgba(0,0,0,.12);

    transition: .3s;

}



.benefit-card:hover {

    transform: translateY(-8px);

}



.benefit-card h3 {

    color: #242424;

    font-size: 25px;

    margin-bottom: 20px;

}



.benefit-card h3::after {

    content:"";

    display:block;

    width:50px;

    height:2px;

    background:#8B6F47;

    margin:15px auto;

}



.benefit-card p {

    color:#6B6B6B;

    font-size:16px;

    line-height:1.8;

}



@media(max-width:900px){


    .benefit-cards {

        flex-direction:column;

        align-items:center;

    }


}

/* =========================
   MARKET STATISTICS
========================= */


.stats {

    display:flex;

    justify-content:space-around;

    align-items:center;

    padding:70px 8%;

    background:#242424;

    text-align:center;

}



.stat h2 {

    font-size:48px;

    color:#C8A96A;

    margin-bottom:10px;

}



.stat p {

    color:white;

    font-size:18px;

    letter-spacing:.5px;

}




@media(max-width:900px){


    .stats {

        flex-direction:column;

        gap:40px;

    }


}


/* =========================
   REALTOR SECTION
========================= */


.realtor {

    display:flex;

    align-items:center;

    gap:70px;

    padding:100px 8%;

    background:#93897b;

}



.realtor-image {

    flex:1;

}



.realtor-image img {

    width:100%;

    max-width:450px;

    height:550px;

    object-fit:cover;

    border-radius:16px;

    box-shadow:0 15px 35px rgba(0,0,0,.15);

}



.realtor-content {

    flex:1;

}



.realtor-content h2 {

    font-size:44px;

    color:#242424;

    margin-bottom:10px;

}



.realtor-content h3 {

    font-size:22px;

    color:#8B6F47;

    margin-bottom:25px;

}



.realtor-content p {

    color:#5E5040;

    font-size:18px;

    line-height:1.8;

    margin-bottom:35px;

}



.realtor-stats {

    display:flex;

    gap:40px;

}



.realtor-stats div {

    display:flex;

    flex-direction:column;

}



.realtor-stats strong {

    font-size:32px;

    color:#242424;

}



.realtor-stats span {

    color:#6B6B6B;

    font-size:14px;

}



@media(max-width:900px){


    .realtor {

        flex-direction:column;

        text-align:center;

    }


    .realtor-image img {

        height:450px;

    }


    .realtor-stats {

        justify-content:center;

        flex-wrap:wrap;

    }


}

/* =========================
   TESTIMONIALS SECTION
========================= */

.testimonials {

    padding:90px 8%;
    background:#F7F3EB;
    text-align:center;

}


.testimonials h2 {

    font-size:42px;
    color:#000;
    margin-bottom:20px;

}


.testimonials-description {

    font-size:18px;
    color:#000;
    max-width:700px;
    margin:0 auto 50px;
    line-height:1.6;

}



.testimonial-cards {

    display:flex;
    justify-content:center;
    align-items:stretch;
    gap:30px;
    flex-wrap:wrap;

}



.testimonial-card {

    background:#F7F3EB;

    width:350px;

    padding:35px;

    border-radius:14px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.3s;

}


.testimonial-card:hover {

    transform:translateY(-6px);

}



.testimonial-card p {

    color:#000;

    font-size:17px;

    line-height:1.8;

    font-style:italic;

    margin-bottom:25px;

}



.testimonial-card h3 {

    color:#000;

    font-size:18px;

}



/* =========================
   CONSULTATION SECTION
========================= */


.consultation {

    display:flex;

    justify-content:center;

    align-items:center;

    gap:70px;

    padding:100px 8%;

    background:#93897b;

}



.consultation-text {

    max-width:450px;

}



.consultation-text h2 {

    font-size:44px;

    color:#242424;

    margin-bottom:25px;

}



.consultation-text p {

    color:#000000;

    font-size:18px;

    line-height:1.8;

    margin-bottom:20px;

}



.consultation-form {

    background:#F7F3EB;

    width:450px;

    padding:40px;

    border-radius:16px;

    box-shadow:0 15px 35px rgba(0,0,0,.12);

}



.consultation-form input,
.consultation-form select,
.consultation-form textarea {

    width:100%;

    padding:15px;

    margin-bottom:15px;

    border:1px solid #ccc;

    border-radius:8px;

    font-size:16px;

}



.consultation-form textarea {

    height:130px;

}



.consultation-form button {

    width:100%;

    padding:15px;

    background:#242424;

    color:white;

    border:none;

    border-radius:8px;

    font-size:17px;

    cursor:pointer;

}



.consultation-form button:hover {

    background:#8B6F47;

}



/* =========================
   FOOTER
========================= */


.footer {

    background:#1F1F1F;

    color:#F7F3EB;

    padding:70px 8% 25px;

}



.footer-container {

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:60px;

    flex-wrap:wrap;

}



.footer-brand {

    flex:1;

    min-width:250px;

}



.footer-logo {

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;

}



.footer-logo img {

    width:60px;

    height:60px;

    object-fit:contain;

    border-radius:8px;

}



.footer-logo h3 {

    font-size:30px;

    color:#F7F3EB;

    margin:0;

}



.footer-brand p {

    color:#d6d6d6;

    line-height:1.8;

    max-width:350px;

}



.footer-links {

    flex:1;

    min-width:180px;

}



.footer-links h4,
.footer-contact h4 {

    font-size:20px;

    margin-bottom:20px;

}



.footer-links ul {

    list-style:none;

    padding:0;

}



.footer-links li {

    margin-bottom:12px;

}



.footer-links a {

    color:#d6d6d6;

    text-decoration:none;

}



.footer-contact {

    flex:1;

    min-width:220px;

}



.footer-contact p {

    color:#d6d6d6;

    margin-bottom:12px;

}



.footer-bottom {

    margin-top:50px;

    text-align:center;

    border-top:1px solid rgba(255,255,255,.15);

    padding-top:25px;

}


.footer-bottom p {

    color:#b8b8b8;

}

/* =========================
   MOBILE RESPONSIVE
========================= */


@media(max-width:900px){


    .consultation {

        flex-direction:column;

        text-align:center;

    }



    .consultation-form {

        width:100%;

        max-width:450px;

    }



    .footer-container {

        flex-direction:column;

        text-align:center;

        align-items:center;

    }



    .footer-brand p {

        margin:auto;

    }



    .footer-logo {

        justify-content:center;

    }



}