﻿.page-about {
  font-family: 'Roboto', sans-serif;
}

.about-hero {
  padding: 100px 0 60px;
}

.about-hero-copy {
  max-width: 620px;
}

.about-hero-copy .subheading {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #007bff;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.about-hero-copy h2 {
  font-size: 2.85rem;
  line-height: 1.1;
  margin-bottom: 24px;
}

.about-hero-copy p {
  color: #4c4c4c;
  font-size: 1rem;
  line-height: 1.85;
}

.about-hero-image {
  background-size: cover;
  background-position: center;
  min-height: 460px;
  box-shadow: 0 30px 80px rgba(36, 51, 79, 0.12);
}

.about-feature-list .about-feature-card {
  background: #ffffff;
  border: 1px solid #e7eefb;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 42px rgba(0, 123, 255, 0.14);
}

/* ===============================
   Estate Statistics Cards
==================================*/

.estate-stat-card{
    position: relative;
    background: #fff;
    border-radius: 22px;
    padding: 40px 25px;
    text-align: center;
    overflow: hidden;
    transition: .4s ease;
    border: 1px solid #ececec;
    box-shadow: 0 12px 35px rgba(0,0,0,.08);
}

.estate-stat-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
}

.estate-stat-card:hover{
    transform:translateY(-10px);
    box-shadow:0 22px 45px rgba(0,0,0,.15);
}

.estate-stat-icon{
    width:75px;
    height:75px;
    margin:0 auto 22px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:30px;
}

.estate-stat-number{
    font-size:48px;
    font-weight:800;
    color:#1e293b;
    margin-bottom:8px;
    line-height:1;
}

.estate-stat-title{
    font-size:17px;
    font-weight:600;
    color:#6b7280;
    margin:0;
    letter-spacing:.4px;
}

@media(max-width:768px){

    .estate-stat-card{
        padding:32px 20px;
    }

    .estate-stat-number{
        font-size:40px;
    }

    .estate-stat-icon{
        width:65px;
        height:65px;
        font-size:26px;
    }

}

/*==============================
    ESTATE VALUES SECTION
==============================*/

.estate-values-section{
    background:#f8fbff;
}

.estate-subtitle{
    color:#00b894;
    font-size:15px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
}

.estate-title{
    font-size:42px;
    font-weight:800;
    color:#1e293b;
    margin-bottom:15px;
}

.estate-description{
    max-width:700px;
    margin:auto;
    color:#6b7280;
    font-size:17px;
    line-height:1.8;
}

/*==============================
        VALUE CARD
==============================*/

.estate-value-card{
    background:#fff;
    border-radius:22px;
    padding:35px 25px;
    text-align:center;
    height:100%;
    transition:.35s;
    border:1px solid #edf2f7;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.estate-value-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.estate-value-icon{
    width:80px;
    height:80px;
    margin:0 auto 25px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:34px;
}

.estate-value-card h4{
    font-size:22px;
    font-weight:700;
    color:#1e293b;
    margin-bottom:15px;
}

.estate-value-card p{
    color:#6b7280;
    line-height:1.8;
    margin:0;
}

/*==============================
        STAT CARD
==============================*/

.estate-stat-card{
    background:#fff;
    border-radius:22px;
    padding:40px 20px;
    text-align:center;
    transition:.35s;
    position:relative;
    overflow:hidden;
    border:1px solid #edf2f7;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.estate-stat-card::before{
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
}

.estate-stat-card:hover{
    transform:translateY(-10px);
    box-shadow:0 22px 45px rgba(0,0,0,.15);
}

.estate-stat-icon{
    width:75px;
    height:75px;
    margin:0 auto 25px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:30px;
}

.estate-stat-number{
    font-size:52px;
    font-weight:800;
    color:#1e293b;
    margin-bottom:8px;
}

.estate-stat-title{
    color:#64748b;
    font-size:18px;
    font-weight:600;
    margin:0;
}

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

@media(max-width:991px){

    .estate-title{
        font-size:34px;
    }

}

@media(max-width:767px){

    .estate-title{
        font-size:28px;
    }

    .estate-value-card,
    .estate-stat-card{
        padding:30px 20px;
    }

    .estate-stat-number{
        font-size:42px;
    }

    .estate-value-icon,
    .estate-stat-icon{
        width:70px;
        height:70px;
        font-size:28px;
    }

}

/*==============================
      OUR STORY SECTION
==============================*/

.estate-story-section{
    background:#ffffff;
    padding:90px 0;
}

.estate-story-subtitle{
    display:inline-block;
    color:#00b894;
    font-size:15px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:10px;
}

.estate-story-title{
    font-size:42px;
    font-weight:800;
    color:#1e293b;
    margin-bottom:20px;
}

.estate-story-description{
    max-width:720px;
    margin:auto;
    color:#64748b;
    font-size:17px;
    line-height:1.8;
}

/*==============================
         STORY CARD
==============================*/

.estate-story-card{
    background:#fff;
    border-radius:20px;
    padding:40px 30px;
    text-align:center;
    height:100%;
    transition:.35s ease;
    border:1px solid #edf2f7;
    box-shadow:0 12px 35px rgba(0,0,0,.06);
    position:relative;
    overflow:hidden;
}

.estate-story-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
}

.estate-story-card:hover{
    transform:translateY(-10px);
    box-shadow:0 22px 45px rgba(0,0,0,.12);
}

.estate-story-icon{
    width:85px;
    height:85px;
    margin:0 auto 25px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:34px;
    box-shadow:0 12px 25px rgba(0,184,148,.35);
    transition:.35s;
}

.estate-story-card:hover .estate-story-icon{
    transform:rotate(12deg) scale(1.08);
}

.estate-story-card h4{
    font-size:24px;
    font-weight:700;
    color:#1e293b;
    margin-bottom:15px;
}

.estate-story-card p{
    color:#64748b;
    line-height:1.8;
    margin:0;
    font-size:16px;
}

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

@media(max-width:991px){

    .estate-story-title{
        font-size:34px;
    }

}

@media(max-width:767px){

    .estate-story-section{
        padding:70px 0;
    }

    .estate-story-title{
        font-size:28px;
    }

    .estate-story-card{
        padding:30px 20px;
    }

    .estate-story-icon{
        width:75px;
        height:75px;
        font-size:30px;
    }

}/* ==========================================
   BUILD ESTATE - GOLD THEME
   Primary Color : #d4ca68
==========================================*/

/* Section Background */
.estate-values-section{
    background:#faf9f2;
}

/* Headings */
.estate-subtitle,
.estate-story-subtitle{
    color:#d4ca68;
}

/* ---------- VALUE CARD ---------- */

.estate-value-card{
    background:#fff;
    border:1px solid #efe8b3;
    box-shadow:0 10px 30px rgba(212,202,104,.15);
}

.estate-value-card:hover{
    transform:translateY(-10px);
    border-color:#d4ca68;
    box-shadow:0 20px 40px rgba(212,202,104,.35);
}

.estate-value-icon{
    background:linear-gradient(135deg,#d4ca68,#b7ab43);
    color:#fff;
    box-shadow:0 12px 25px rgba(212,202,104,.45);
}

/* ---------- STAT CARD ---------- */

.estate-stat-card{
    background:#fff;
    border:1px solid #efe8b3;
    box-shadow:0 12px 30px rgba(212,202,104,.15);
}

.estate-stat-card::before{
    background:linear-gradient(90deg,#d4ca68,#b7ab43);
}

.estate-stat-card:hover{
    transform:translateY(-10px);
    border-color:#d4ca68;
    box-shadow:0 20px 45px rgba(212,202,104,.35);
}

.estate-stat-icon{
    background:linear-gradient(135deg,#d4ca68,#b7ab43);
    color:#fff;
    box-shadow:0 12px 25px rgba(212,202,104,.45);
}

.estate-stat-number{
    color:#2b2b2b;
}

.estate-stat-title{
    color:#6b7280;
}

/* ---------- STORY CARD ---------- */

.estate-story-card{
    background:#fff;
    border:1px solid #efe8b3;
    box-shadow:0 12px 30px rgba(212,202,104,.15);
}

.estate-story-card::before{
    background:linear-gradient(90deg,#d4ca68,#b7ab43);
}

.estate-story-card:hover{
    transform:translateY(-10px);
    border-color:#d4ca68;
    box-shadow:0 22px 45px rgba(212,202,104,.35);
}

.estate-story-icon{
    background:linear-gradient(135deg,#d4ca68,#b7ab43);
    color:#fff;
    box-shadow:0 12px 25px rgba(212,202,104,.45);
}

.estate-story-card:hover .estate-story-icon{
    transform:rotate(10deg) scale(1.08);
}

/* ---------- TEXT ---------- */

.estate-title,
.estate-story-title{
    color:#222;
}

.estate-description,
.estate-story-description,
.estate-value-card p,
.estate-story-card p{
    color:#666;
}

/* ---------- Premium Hover ---------- */

.estate-value-card,
.estate-story-card,
.estate-stat-card{
    transition:all .35s ease;
}

.estate-value-card:hover .estate-value-icon,
.estate-story-card:hover .estate-story-icon,
.estate-stat-card:hover .estate-stat-icon{
    transform:scale(1.08);
}

/* ---------- Responsive ---------- */

@media (max-width:991px){

    .estate-title,
    .estate-story-title{
        font-size:34px;
    }

}

@media (max-width:767px){

    .estate-title,
    .estate-story-title{
        font-size:28px;
    }

    .estate-value-card,
    .estate-story-card,
    .estate-stat-card{
        padding:30px 20px;
    }

    .estate-value-icon,
    .estate-story-icon,
    .estate-stat-icon{
        width:70px;
        height:70px;
        font-size:28px;
    }

    .estate-stat-number{
        font-size:42px;
    }

} 