:root{
    --dark:#1f1f1f;
    --accent:#b48a5a;
    --accent-light:#e3c39a;
    --glass:rgba(255,255,255,0.85);
}

/* RESET */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Montserrat', sans-serif;
}

body{
    background:#fafafa;
    color:#444;
}

/* ================= HERO ================= */
.about-hero{
    height:65vh;
    max-height:520px;
    background:
        linear-gradient(rgba(0,0,0,0.55),rgba(0,0,0,0.55)),
        url("../images/aboutus1.jpg");
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:40px 20px;
}

.about-hero-content{
    max-width:900px;
}

.about-hero h1{
    font-family:'Playfair Display', serif;
    font-size:52px;
    color:#fff;
    letter-spacing:2px;
    margin-bottom:18px;
}

.about-hero p{
    font-size:17px;
    line-height:1.9;
    color:#f1f1f1;
    max-width:760px;
    margin:auto;
}

/* ================= STORY / LAYOUT ================= */
.story-section{
    max-width:1200px;
    margin:60px auto 80px;
    padding:0 20px;
}

.story-card{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:36px;
    background:var(--glass);
    backdrop-filter:blur(14px);
    border-radius:28px;
    padding:48px;
    align-items:center;
    box-shadow:0 30px 60px rgba(0,0,0,0.08);
}

.story-content h2{
    font-family:'Playfair Display', serif;
    font-size:38px;
    color:var(--dark);
    margin-bottom:12px;
}

.story-content p{color:#444;font-size:16.6px;line-height:1.85}

/* Image for Story Section */
.story-image1{
    border-radius:18px;
    min-height:300px;
    background: url("../images/aboutus1.jpg") center/cover no-repeat;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.03);
}

/* No Image for Address Section */
.story-image{
    border-radius:18px;
    padding: 20px;
    display: flex;
    align-items: center;
}

.gold-divider{margin:40px auto 40px}

/* ================= DIVIDER ================= */
.gold-divider{
    width:90px;
    height:4px;
    background:linear-gradient(90deg,var(--accent),var(--accent-light));
    margin:80px auto;
    border-radius:4px;
}

/* ================= SECTION WRAPPER ================= */
.section{
    max-width:1200px;
    margin:auto;
    padding:0 20px 140px;
}

/* ================= GLASS CARD ================= */
.glass-card{
    background:var(--glass);
    backdrop-filter:blur(14px);
    border-radius:32px;
    padding:80px 70px;
    text-align:center;
    box-shadow:
        0 45px 90px rgba(0,0,0,0.14),
        inset 0 0 0 1px rgba(180,138,90,0.18);
    transition:0.6s ease;
}

.glass-card:hover{
    transform:translateY(-10px);
    box-shadow:
        0 65px 130px rgba(0,0,0,0.2),
        inset 0 0 0 1px rgba(180,138,90,0.25);
}

.glass-card h2{
    font-family:'Playfair Display', serif;
    font-size:44px;
    color:var(--dark);
    margin-bottom:28px;
}

.glass-card p{
    font-size:16.8px;
    line-height:2;
    color:#666;
    max-width:900px;
    margin:0 auto 28px;
}

/* ================= TEXT SECTION ================= */
.text-section{
    max-width:1000px;
    margin:auto;
    text-align:center;
}

.text-section h3{
    font-family:'Playfair Display', serif;
    font-size:36px;
    color:var(--dark);
    margin-bottom:25px;
}

.text-section p{
    font-size:16.5px;
    line-height:2;
    color:#666;
    margin-bottom:25px;
}

/* ================= VALUES (WORK PROCESS) ================= */
.values-section{
    background:linear-gradient(180deg,#ffffff,#faf7f2);
    padding:80px 20px;
}

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

.values-title{
    text-align:center;
    margin-bottom:70px;
}

.values-title h3{
    font-family:'Playfair Display', serif;
    font-size:40px;
    color:var(--dark);
}

/* UPDATED: Flexbox to center orphan items */
.values-grid-1{
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* This centers the items on the last line */
    gap: 28px;
}

.value-card{
    background:#fff;
    border-radius:26px;
    padding:42px 34px;
    box-shadow:0 25px 55px rgba(0,0,0,0.12);
    transition:0.5s ease;
    
    /* ADDED: Sizing logic for centering */
    flex: 1 1 300px;  /* Grow, Shrink, Basis */
    max-width: 380px; /* Prevents single items from becoming too wide */
    width: 100%;      /* Ensures responsive behavior */
}

.value-card:hover{
    transform:translateY(-10px);
    box-shadow:0 40px 85px rgba(0,0,0,0.18);
}

.value-card h4{
    font-size:18px;
    font-weight:600;
    color:var(--dark);
    margin-bottom:14px;
}

.value-card p{
    font-size:15px;
    line-height:1.8;
    color:#666;
}

/* ================= RESPONSIVE ================= */
@media(max-width:768px){
    .about-hero{
        height:55vh;
        max-height:420px;
    }
    .about-hero h1{font-size:38px;}
    .glass-card{padding:34px 20px;}
    .glass-card h2{font-size:28px;}
    .text-section h3{font-size:28px;}
    .values-title h3{font-size:30px;}
    .story-card{grid-template-columns:1fr;padding:28px}
}