/* =========================================================
   BAIG & ASSOCIATES
   HOMEPAGE CSS
   Adapted to the new PHP homepage structure
   Based on the original gold / black law-firm design
========================================================= */

:root {
    --gold: #c5a572;
    --gold-light: #e1c894;
    --gold-dark: #a98755;
    --black: #0b0b0b;
    --black-soft: #111111;
    --navy: #172437;
    --white: #ffffff;
    --text: #252525;
    --muted: #6d6d6d;
    --light: #f7f5f0;
    --border: #e4ded2;
}

main { width:100%; overflow:hidden; }
main, main * { box-sizing:border-box; }

.section-container {
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:0 30px;
}

.section-heading {
    max-width:760px;
    margin:0 auto 55px;
    text-align:center;
}

.section-kicker {
    display:block;
    margin-bottom:12px;
    color:var(--gold);
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
}

.section-heading h2,
.about-content h2 {
    margin:0;
    color:var(--navy);
    font-family:Georgia, "Times New Roman", serif;
    font-size:42px;
    font-weight:700;
    line-height:1.2;
}

.section-line {
    width:70px;
    height:3px;
    margin:18px auto 20px;
    background:var(--gold);
}

.section-heading p {
    max-width:680px;
    margin:0 auto;
    color:var(--muted);
    font-family:Roboto, Arial, sans-serif;
    font-size:16px;
    line-height:1.75;
}

/* =========================================================
   HERO SLIDER
========================================================= */
.hero-slider {
    position:relative;
    width:100%;
    height:650px;
    overflow:hidden;
    background:#111;
}

.slider-wrapper {
    display:flex;
    width:100%;
    height:100%;
    transition:transform .65s ease;
}

.slide {
    position:relative;
    min-width:100%;
    height:100%;
    display:flex;
    align-items:center;
    background-position:center;
    background-size:cover;
}

.slide-1 { background-image:url('/assets/Images/hero.jpg'); }

.slide::before,
.slide-overlay {
    position:absolute;
    inset:0;
    content:"";
    background:linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.62) 45%, rgba(0,0,0,.25) 100%);
}

.hero-container {
    position:relative;
    z-index:2;
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:0 30px;
}

.hero-content { max-width:720px; color:#fff; }

.hero-content h1,
.hero-content h2 {
    margin:0 0 22px;
    color:#fff;
    font-family:Georgia, "Times New Roman", serif;
    font-size:58px;
    font-weight:700;
    line-height:1.12;
    text-shadow:0 2px 15px rgba(0,0,0,.3);
}

.hero-content p {
    max-width:650px;
    margin:0 0 32px;
    color:rgba(255,255,255,.92);
    font-family:Roboto, Arial, sans-serif;
    font-size:18px;
    line-height:1.8;
}

.hero-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:0 28px;
    border:1px solid var(--gold);
    background:var(--gold);
    color:#111;
    font-family:Arial, sans-serif;
    font-size:14px;
    font-weight:700;
    letter-spacing:.6px;
    text-decoration:none;
    transition:.3s ease;
}
.hero-btn:hover { background:transparent; color:#fff; }

.slider-arrow {
    position:absolute;
    top:50%;
    z-index:5;
    width:48px;
    height:48px;
    transform:translateY(-50%);
    border:1px solid rgba(255,255,255,.5);
    border-radius:50%;
    background:rgba(0,0,0,.35);
    color:#fff;
    font-size:25px;
    line-height:1;
    cursor:pointer;
    transition:.3s ease;
}
.slider-arrow:hover { background:var(--gold); border-color:var(--gold); color:#111; }
.prev-arrow { left:25px; }
.next-arrow { right:25px; }

.slider-dots {
    position:absolute;
    left:50%;
    bottom:28px;
    z-index:6;
    display:flex;
    gap:10px;
    transform:translateX(-50%);
}

.slider-dots .dot {
    width:11px;
    height:11px;
    padding:0;
    border:1px solid #fff;
    border-radius:50%;
    background:transparent;
    opacity:.55;
    cursor:pointer;
    transition:.3s ease;
}
.slider-dots .dot.active { background:var(--gold); border-color:var(--gold); opacity:1; transform:scale(1.12); }

/* =========================================================
   PRACTICE AREAS
========================================================= */
.practice-section { padding:100px 0; background:#fff; }
.practice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }

.practice-card {
    position:relative;
    min-height:290px;
    padding:35px 30px;
    overflow:hidden;
    border:1px solid var(--border);
    background:#fff;
    color:inherit;
    text-decoration:none;
    transition:.35s ease;
}
.practice-card::before {
    content:"";
    position:absolute;
    left:0; top:0;
    width:100%; height:4px;
    background:var(--gold);
    transform:scaleX(0);
    transform-origin:left;
    transition:.35s ease;
}
.practice-card:hover { transform:translateY(-7px); border-color:var(--gold); box-shadow:0 18px 40px rgba(0,0,0,.09); }
.practice-card:hover::before { transform:scaleX(1); }
.practice-icon { color:var(--gold); font-family:Georgia,serif; font-size:38px; line-height:1; margin-bottom:20px; }
.practice-card h3 { margin:0 0 14px; color:var(--navy); font-family:Georgia,serif; font-size:24px; }
.card-line { display:block; width:42px; height:2px; margin-bottom:18px; background:var(--gold); }
.practice-card p { margin:0; color:#666; font:15px/1.75 Roboto,Arial,sans-serif; }

/* =========================================================
   ABOUT
========================================================= */
.about-section { padding:105px 0; background:var(--light); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:75px; align-items:center; }
.about-content .section-kicker { text-align:left; }
.about-content h2 { font-size:44px; }
.about-content .section-line { margin:18px 0 24px; }
.about-content p { margin:0 0 18px; color:#555; font:16px/1.85 Roboto,Arial,sans-serif; }
.about-content blockquote {
    margin:28px 0;
    padding:20px 24px;
    border-left:3px solid var(--gold);
    background:#fff;
    color:#444;
    font:italic 16px/1.75 Georgia,serif;
}
.about-image-wrap { position:relative; padding:14px; background:#fff; box-shadow:0 20px 45px rgba(0,0,0,.12); }
.about-image-wrap::before { content:""; position:absolute; inset:-12px 12px 12px -12px; border:1px solid var(--gold); z-index:0; }
.about-image-wrap img { position:relative; z-index:1; display:block; width:100%; height:520px; object-fit:cover; }
.dark-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:50px;
    margin-top:8px;
    padding:0 25px;
    background:var(--navy);
    color:#fff;
    text-decoration:none;
    font:700 14px Arial,sans-serif;
    transition:.3s ease;
}
.dark-btn:hover { background:var(--gold); color:#111; }

/* =========================================================
   ATTORNEYS
========================================================= */
.attorneys-section { padding:100px 0; background:#fff; }
.attorneys-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.attorney-card { overflow:hidden; border:1px solid var(--border); background:#fff; transition:.35s ease; }
.attorney-card:hover { transform:translateY(-7px); box-shadow:0 18px 40px rgba(0,0,0,.1); }
.attorney-card > img { display:block; width:100%; height:390px; object-fit:cover; }
.attorney-content { padding:26px; }
.attorney-content h3 { margin:0 0 6px; color:var(--navy); font:700 25px Georgia,serif; }
.attorney-content > span { color:var(--gold-dark); font:700 12px Arial,sans-serif; letter-spacing:1.5px; text-transform:uppercase; }
.attorney-content p { margin:15px 0 20px; color:#666; font:15px/1.7 Roboto,Arial,sans-serif; }
.attorney-social { display:flex; gap:9px; }
.attorney-social a { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid var(--gold); color:var(--gold-dark); text-decoration:none; font:700 13px Arial,sans-serif; transition:.3s ease; }
.attorney-social a:hover { background:var(--gold); color:#111; }

/* =========================================================
   TESTIMONIALS
========================================================= */
.testimonials-section { padding:100px 0; background:var(--navy); }
.testimonials-section .section-heading h2 { color:#fff; }
.testimonials-section .section-heading p { color:rgba(255,255,255,.72); }
.testimonial-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }
.testimonial-card { position:relative; padding:35px 30px; background:#fff; border-top:3px solid var(--gold); }
.quote-mark { color:var(--gold); font:700 55px/1 Georgia,serif; height:45px; }
.testimonial-card > p { margin:10px 0 28px; color:#555; font:15px/1.8 Roboto,Arial,sans-serif; }
.testimonial-person { display:flex; align-items:center; gap:14px; }
.initials { width:46px; height:46px; display:flex; align-items:center; justify-content:center; flex:none; background:var(--gold); color:#111; font:700 13px Arial,sans-serif; }
.testimonial-person h3 { margin:0 0 3px; color:var(--navy); font:700 15px Arial,sans-serif; }
.testimonial-person span { color:#777; font:12px/1.4 Arial,sans-serif; }

/* =========================================================
   CONTACT
========================================================= */
.contact-section { padding:100px 0; background:#f8f7f4; }
.contact-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:35px; align-items:stretch; }
.contact-form-card, .office-card { background:#fff; border:1px solid var(--border); box-shadow:0 12px 35px rgba(0,0,0,.05); }
.contact-form-card { padding:38px; }
.form-group { margin-bottom:20px; }
.form-group label { display:block; margin-bottom:8px; color:var(--navy); font:700 13px Arial,sans-serif; }
.form-group input, .form-group select, .form-group textarea {
    display:block; width:100%; border:1px solid #d8d4cc; border-radius:0; outline:none; background:#fff; color:#333;
    padding:13px 14px; font:15px Roboto,Arial,sans-serif; transition:.25s ease;
}
.form-group textarea { min-height:130px; resize:vertical; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--gold); box-shadow:0 0 0 2px rgba(197,165,114,.18); }
.form-group .input-error { border-color:#c0392b !important; box-shadow:0 0 0 2px rgba(192,57,43,.1) !important; }
.form-btn { width:100%; min-height:52px; border:1px solid var(--gold); background:var(--gold); color:#111; cursor:pointer; font:700 14px Arial,sans-serif; letter-spacing:.5px; transition:.3s ease; }
.form-btn:hover { background:var(--navy); border-color:var(--navy); color:#fff; }

.office-card { padding:38px; background:var(--navy); color:#fff; }
.office-card > h3 { margin:0 0 30px; color:#fff; font:700 30px Georgia,serif; }
.office-item { display:flex; gap:15px; margin-bottom:25px; }
.office-icon { width:38px; height:38px; display:flex; align-items:center; justify-content:center; flex:none; border:1px solid var(--gold); color:var(--gold); font-size:17px; }
.office-item h4 { margin:0 0 5px; color:var(--gold); font:700 12px Arial,sans-serif; letter-spacing:1.2px; text-transform:uppercase; }
.office-item p { margin:0; color:rgba(255,255,255,.78); font:14px/1.7 Roboto,Arial,sans-serif; }
.office-item a { color:#fff; text-decoration:none; }
.office-item a:hover { color:var(--gold-light); }
.map-placeholder { height:175px; margin-top:10px; border-radius:4px; overflow:hidden; border:1px solid rgba(197,165,114,.45); }
.map-placeholder iframe { width:100%; height:100%; border:0; display:block; }
.map-placeholder::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,.48); }
.map-placeholder span { position:relative; z-index:1; color:#fff; font:700 15px Arial,sans-serif; letter-spacing:.5px; }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:1100px) {
    .hero-content h1, .hero-content h2 { font-size:50px; }
    .practice-grid, .attorneys-grid, .testimonial-grid { grid-template-columns:repeat(2,1fr); }
    .about-grid { gap:45px; }
    .about-image-wrap img { height:450px; }
}

@media (max-width:900px) {
    .section-container, .hero-container { padding-left:22px; padding-right:22px; }
    .hero-slider { height:600px; }
    .hero-content { max-width:620px; }
    .hero-content h1, .hero-content h2 { font-size:44px; }
    .hero-content p { font-size:16px; }
    .about-grid, .contact-grid { grid-template-columns:1fr; }
    .about-image-wrap { max-width:760px; margin:20px auto 0; }
}

@media (max-width:650px) {
    .section-container, .hero-container { padding-left:16px; padding-right:16px; }
    .section-heading { margin-bottom:38px; }
    .section-heading h2, .about-content h2 { font-size:32px; }
    .section-heading p { font-size:14px; }
    .practice-section, .about-section, .attorneys-section, .testimonials-section, .contact-section { padding:70px 0; }
    .hero-slider { height:560px; }
    .hero-content h1, .hero-content h2 { font-size:36px; line-height:1.18; margin-bottom:17px; }
    .hero-content p { font-size:15px; line-height:1.65; margin-bottom:25px; }
    .hero-btn { min-height:48px; padding:0 20px; font-size:13px; }
    .slider-arrow { width:40px; height:40px; font-size:20px; }
    .prev-arrow { left:12px; }
    .next-arrow { right:12px; }
    .slider-dots { bottom:18px; }
    .practice-grid, .attorneys-grid, .testimonial-grid { grid-template-columns:1fr; }
    .practice-card { min-height:auto; }
    .attorney-card > img { height:360px; }
    .about-content .section-kicker { text-align:left; }
    .about-image-wrap img { height:320px; }
    .contact-form-card, .office-card { padding:25px 20px; }
    .office-card > h3 { font-size:27px; }
}

@media (max-width:400px) {
    .hero-slider { height:530px; }
    .hero-content h1, .hero-content h2 { font-size:31px; }
    .hero-content p { font-size:14px; }
    .hero-btn { width:100%; }
}

/* =========================================================
   HERO SLIDER IMAGES
   ========================================================= */

.slide-2 {
    background-image: url('/assets/Images/slide2.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.slide-3 {
    background-image: url('/assets/Images/slide3.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.slide-4 {
    background-image: url('/assets/Images/slide4.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

@media (max-width: 768px) {

    .slide-2,
    .slide-3,
    .slide-4 {
        background-position: center center;
    }

}