* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; background: #fff; }

.container {
    max-width: 1200px;
    margin: auto;
    padding: 1rem;
}

header {
    background: #1c1c1e;      /* charcoal black */
    color: #d4af37;           /* gold text */
    text-align: center;
    padding: 1rem;
}

header img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

nav {
    background-color: #000;
    padding: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
nav ul,
nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}


/*  Navbar Hover Effects */

nav a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 6px; /* softer  shape */
    transition:
            background 0.25s ease,
            color 0.25s ease,
            transform 0.25s ease,
            box-shadow 0.25s ease;

}

nav a:hover {
    background: #d4af37;      /* gold */
    color: #000;              /* black text */
    transform: translateY(-2px); /* small lift */
    box-shadow: 0 6px 16px rgba(212,175,55,0.25); /* subtle gold glow */
}



.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
}

/* Wrapper to center buttons and add spacing */
.nav-box {
    text-align: center;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

/* Button style */
.nav-btn {
    background: #d4af37;                 /* gold */
    color: #000;                         /* dark text */
    padding: 10px 22px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    font-size: 1rem;
    display: inline-block;
    transition: all 0.25s ease;
    box-shadow: 0 4px 10px rgba(212,175,55,0.25);
}

/* Hover effect */
.nav-btn:hover {
    background: #f2cf58;                 /* lighter gold */
    transform: translateY(-3px);
    box-shadow:
            0 8px 20px rgba(212,175,55,0.35),
            0 4px 12px rgba(0,0,0,0.25);
    color: #000;
}

/* Mobile tweaks */
@media (max-width: 600px) {
    .nav-box {
        gap: 14px;
    }
    .nav-btn {
        padding: 10px 18px;
        font-size: 0.95rem;
    }
}

.dropdown { position: relative; display: inline-block; }
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-content { display: block; }
.dropdown-content a:hover { background-color: #f1f1f1; }

.layout-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    min-height: 80vh;
    margin-top: 2rem;
}

.left-column { width: 30%; }
.center-column { width: 45%; }
.right-column { width: 25%; }

.services {
    background: #e5e5e5;
    padding: 1rem;
    text-align: center;
    margin-bottom: 2rem;
}
.services h2 { margin-bottom: 1rem; }
.services table {
    width: 100%;
    border-collapse: collapse;
}
.services td {
    padding: 10px;
    color: white;
    font-weight: bold;
    text-align: center;
}
.services a {
    display: block;
    width: 100%;
    height: 100%;
    color: white;
    text-decoration: none;
}
/* =====  Carousel Styling (Charcoal + Gold) ===== */
.carousel {
    position: relative;
    max-width: 100%;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 1rem;
    background: linear-gradient(180deg, #111111 0%, #0f0f10 100%); /* subtle charcoal backdrop */
    box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.carousel .slide img {
    transition:
            transform 0.45s ease,
            box-shadow 0.45s ease,
            filter 0.45s ease;
}

/* On hover: image zoom + glow + subtle darkening */
.carousel:hover .slide.active img {
    transform: scale(1.08);                           /* smooth zoom */
    filter: brightness(0.90);                         /* slight dark for contrast */
    box-shadow: 0 12px 30px rgba(212,175,55,0.25),    /* gold glow */
    0 8px 18px rgba(0,0,0,0.45);          /* deeper shadow */
}

/* Slides container */
.slides {
    display: flex;
    width: 100%;
    will-change: transform;
}

/* Link wrapper behaves like a full slide */
.slide-link {
    display: none;
    min-width: 100%;
    position: relative;
    text-decoration: none;
    color: inherit;
}
.slide.active {
    display: block;
}
.slide.active:first-child,
.slide.active {
    display: block;
}

.slide.active {
    display: block;
}

/* Slide container */
.slide {
    width: 100%;
    height: 100%;
    position: relative;
    display: none; /* only .active will show */
}

/* Active slide */
.slide.active {
    display: block;
}

/* Image fills slide */
.slide-link img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.45s ease, filter 0.45s ease;
}

/* Hover zoom only on visible slide */
.slide-link:hover img {
    transform: scale(1.08);
    filter: brightness(0.90);
}
.slide-link .slide.active {
    display: block;
}

/* Force visible wrapper when child slide is active */
.slide.active {
    display: block;
}
.slide.active.parent-active,
.slide-link:has(.slide.active) {
    display: block;
}
/* Caption (gold pill link look) */
.caption {
    position: absolute;
    left: 12px;
    bottom: 12px;
    background: rgba(212,175,55,0.95);
    color: #0a0a0a;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: clamp(14px, 2.2vw, 20px);
    font-weight: 800;
    letter-spacing: 1px;
    box-shadow: 0 6px 18px rgba(212,175,55,0.12);
    text-decoration: none;
    pointer-events: auto; /* ensure caption clickable */
}

/* Caption hover */
.caption:hover {
    background: #f2cb53;
    transform: scale(1.05);
}

/* Controls (prev/next) — charcoal buttons with gold icons */
.controls {
    position: absolute;
    right: 12px;
    top: 12px;
    display: flex;
    gap: 8px;
    z-index: 30;
}
.controls button {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: rgba(28,28,30,0.85);
    color: #d4af37;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
    transition: transform .16s ease, box-shadow .16s ease, background .12s ease;
}.controls button:hover,
 .controls button:focus {
     transform: translateY(-3px);
     background: rgba(212,175,55,0.95);
     color: #0a0a0a;
     outline: none;
     box-shadow: 0 10px 30px rgba(212,175,55,0.18);
 }
.controls button:active { transform: translateY(-1px); }

/* Make controls larger on small screens */
@media (max-width: 480px) {
    .controls button { width: 44px; height: 44px; font-size: 20px; }
    .caption { left: 10px; bottom: 10px; padding: 8px 12px; font-size: 14px; }
}

/* Accessibility: visible focus ring */
.controls button:focus {
    box-shadow: 0 0 0 3px rgba(212,175,55,0.15), 0 10px 30px rgba(0,0,0,0.45);
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .slides { transition: none !important; }
    .controls button { transition: none !important; transform: none !important; }
}
/* --- Option A: Dark Navy + Emerald --- */
.right-column .profile,
    /* ===== PROFILE CARD — GOLD TEXT BOX + ROUNDED IMAGE ===== */

    /* Container */
.profile {
    margin-top: 20px !important;
    text-align: center !important;
}

/* Heading */
.profile-head {
    color: #d4af37 !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    margin-bottom: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Card background */
.profile-card {
    background: #e5e5e5;
    border-radius: 14px !important;
    padding: 18px !important;
    max-width: 260px !important;
    margin: 0 auto !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.14) !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
}

/* Strong rounded image */
.profile-card img {
    width: 120px !important;
    height: auto !important;
    border-radius: 16px !important;  /* stronger rounding */
    display: block !important;
    margin: 0 auto 14px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.20) !important;
    transition:
            transform 0.45s ease,
            box-shadow 0.45s ease,
            filter 0.45s ease;
}
.profile-card img:hover {
    transform: scale(1.08);  /* smooth zoom */
    filter: brightness(0.92); /* slight dark for contrast */
    box-shadow:
            0 12px 30px rgba(212,175,55,0.28),  /* gold glow */
            0 8px 18px rgba(0,0,0,0.40);        /* deeper drop shadow */
}

/* GOLD TEXT BOX STYLE */
.profile-line {
    background: rgba(212,175,55,0.22) !important; /* soft gold background */
    padding: 8px 10px !important;
    margin: 6px 0 !important;
    border-radius: 8px !important; /* rounded text boxes */
    color: #0a0a0a !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10) !important;
}

/* "More" button updated to match new design */
.profile-more {
    display: block !important;
    margin-top: 12px !important;
    background: #d4af37 !important; /* solid gold button */
    color: #000 !important;
    text-decoration: none !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 10px rgba(212,175,55,0.30) !important;
}

.profile-more:hover {
    background: #f1cf58 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(212,175,55,0.35) !important;
}
/* GOLD BOX FOR EACH PROFILE LINE */
.profile-box {
    background: #d4af37;                  /* gold background */
    color: #000;                          /* readable dark text */
    padding: 10px 12px;
    margin: 8px 0;                        /* spacing between lines */
    border-radius: 10px;                  /* rounded corners */
    font-weight: 600;
    font-size: 0.95rem;
    text-align: left;                     /* keeps the text neat */
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

/* MAKE "MORE" look like a button but same box style */
.profile-more-box {
    display: block;
    margin-top: 14px !important;
    padding: 10px 14px !important;

    background: #3a3a3a !important; /* grey like footer buttons */
    color: #ffffff !important;      /* white text */

    text-align: center;
    text-decoration: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;

    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* Hover effect — lighter grey + soft gold glow */
.profile-more-box:hover {
    background: #555555 !important;   /* lighter grey */
    color: #000 !important;           /* black text on hover */

    transform: translateY(-2px);
    box-shadow:
            0 8px 20px rgba(212,175,55,0.25),  /* subtle gold glow */
            0 6px 14px rgba(0,0,0,0.35);        /* deeper shadow */
}
/* Responsive scaling */
@media (max-width: 600px) {
    .profile-card { max-width: 320px !important; }
    .profile-card img { width: 150px !important; }
}
/* Ensure profile-card never collapses when parent has flex or grid rules */
.right-column,
.center-column,
.left-column {
    box-sizing: border-box !important;
}

/* Responsive tweaks */
@media (max-width: 900px) {
    .profile-card { max-width: 320px !important; padding: 14px !important; }
    .profile-card img { width: 140px !important; }
}
/*  Charcoal + Gold Feedback Card */
.feedback-card-a {
    max-width: 260px;
    margin: 0 auto;
    background: #e5e5e5; /* SAME as left-column services box */
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    text-align: center;
    transition: transform .18s ease, box-shadow .18s ease;
    overflow: hidden;
    color: #333; /* dark text for contrast */
    border: 1px solid rgba(0,0,0,0.12);
}

.feedback-card-a:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(0,0,0,0.25);
}

/* Feedback button/header */
.feedback-card-a .feedback-header {
    display: inline-block;
    background: #d4af37;      /* GOLD */
    color: #0b0b0b;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    border: 1px solid rgba(212,175,55,0.28);
    transition: background .15s ease, transform .15s ease;
}

.feedback-card-a .feedback-header:hover {
    background: #f2cb53;      /* lighter gold hover */
    transform: translateY(-2px);
}

/* Feedback image */
.feedback-card-a img {
    width: 200px;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    margin: 0.6rem auto 0;

    transition: transform .25s ease, box-shadow .25s ease;
    box-shadow: 0 6px 14px rgba(0,0,0,0.22);
}

.feedback-card-a img:hover {
    transform: scale(1.05);
    box-shadow: 0 16px 28px rgba(0,0,0,0.25);
}

/* Caption text */
.feedback-card-a .feedback-caption {
    margin-top: 0.6rem;
    font-size: 0.88rem;
    color: #444;
}
/* responsive */
@media (max-width:420px) {
    .feedback-card-a { max-width: 100%; padding: 12px; }
    .feedback-card-a img { width: 160px; }
}
/*  Charcoal + Gold Footer — drop-in replacement */

/* Base footer wrapper (replaces previous footer & .site-footer rules) */
.site-footer,
footer {
    background: linear-gradient(180deg, #1c1c1e 0%, #0f0f10 100%); /* charcoal -> deep charcoal */
    color: #e6e6e6;
    padding: 48px 0 32px 0;
    text-align: center;
    width: 100%;
    border-top: 2px solid rgba(212,175,55,0.18); /* subtle gold top line */
    box-sizing: border-box;
}

/* Container that limits link widths */
.footer-link-block {
    max-width: 920px; /* a little wider for modern layouts */
    margin: 0 auto;
    padding: 0 1rem;
}

/* Top link rows (keeps your layout) */
.footer-links-row {
    display: flex;
    justify-content: center;
    gap: 48px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

/* Individual link style — gold theme */
.footer-links-row a,
.footer-link {
    color: #d4af37;                 /* Soft gold */
    text-decoration: none;
    font-family: "Roboto", Arial, sans-serif;
    font-size: clamp(13px, 2.5vw, 17px);
    font-weight: 600;
    transition: all 0.28s ease;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(212,175,55,0.06); /* subtle gold tint */
    box-shadow: none;
}

/* Hover effect: boxed gold + glow + lift  */
.footer-links-row a:hover,
.footer-link:hover {
    background: rgba(212,175,55,0.20);
    color: #0a0a0a; /* dark text for contrast on gold bg */
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(212,175,55,0.14), 0 2px 6px rgba(0,0,0,0.45);
}

/* Divider between top and lower area */
.footer-divider {
    border: none;
    border-top: 1px solid rgba(212,175,55,0.14);
    margin: 28px auto;
    max-width: 760px;
}
/* Lower footer nav — keeps EXACT same layout */
.footer-lower-nav-links {
    margin-bottom: 20px;
    text-align: center; /* ensures links stay centered horizontally */
}

/* Individual links — replicates your exact inline margins */
.footer-lower-nav-links .footer-lower-link {
    margin: 0 15px;           /* SAME as before */
    color: white;             /* SAME as before */
    text-decoration: none;
    font-size: 16px;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.25s ease;
}

/*  hover (charcoal + gold) */
.footer-lower-nav-links .footer-lower-link:hover {
    background: rgba(255,255,255,0.12);  /* soft white highlight */
    color: #d4af37;                      /* gold text */
    transform: translateY(-2px);         /* subtle  lift */
}
/* Copyright / small text */
.footer-copy {
    color: #bdbdbd;
    font-size: 14px;
    margin-top: 14px;
    opacity: 0.95;
}

/* Footer lower nav container */
.footer-lower-nav {
    margin-bottom: 20px;
    text-align: center;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    row-gap: 12px; /* THIS is the vertical spacing between wrapped lines */
}

/* Navbar-style footer buttons */
.footer-lower-btn {
    margin: 0 15px; /* preserve your original spacing */
    padding: 8px 18px;
    border-radius: 8px;
    text-decoration: none;

    background: rgba(255,255,255,0.08); /* subtle charcoal box */
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;

    transition: all 0.28s ease;
    display: inline-block;
}

/* Hover: gold + lift + glow */
.footer-lower-btn:hover {
    background: rgba(212,175,55,0.35); /* gold tint */
    color: #000;                      /* readable on gold */
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(212,175,55,0.28), 0 3px 8px rgba(0,0,0,0.4);
}

/* Optional: stronger gold border for a more "navbar" feel */
.footer-lower-btn:active {
    transform: translateY(-1px);
    background: rgba(212,175,55,0.45);
}

/* Responsive tweaks */
@media (max-width: 720px) {
    .footer-links-row { gap: 18px; }
    .footer-link, .footer-links-row a { font-size: 15px; padding: 8px 10px; }
    .footer-lower-links { gap: 18px; }
}

@media (max-width: 420px) {
    .site-footer { padding: 28px 0 20px 0; }
    .footer-links-row { gap: 12px; }
    .footer-links-row a { font-size: 14px; }
}


@media (max-width: 768px) {
    .footer-links-row {
        gap: 24px;
        margin-bottom: 18px;
    }
    .footer-links-row a {
        font-size: 18px;
    }
    .site-footer {
        padding: 32px 0 24px 0;
    }
}

@media (max-width: 480px) {
    .footer-link-block {
        max-width: 98vw;
    }
    .footer-links-row {
        gap: 10vw;
        flex-wrap: wrap;
    }
    .footer-links-row a {
        font-size: 16px;
        margin-bottom: 8px;
    }
}

/* Add this at the bottom of your <style> */
@media (max-width: 992px) {
    .layout-section {
        flex-direction: column;
        align-items: center;
    }
    .left-column,
    .center-column,
    .right-column {
        width: 100%;
    }
    .services table td {
        font-size: 14px;
        padding: 8px;
    }
    .caption {
        font-size: 18px;
    }
}

@media (max-width: 576px) {
    nav {
        flex-direction: column;
    }
    .nav-links {
        flex-direction: column;
        gap: 0.5rem;
    }
    .services h2 {
        font-size: 16px;
    }
    .feedback img {
        width: 150px;
    }
    .profile-card {
        padding: 0.5rem;
        font-size: 14px;
    }
}