/* ============================================================
   ODM LAW FIRM
   ============================================================ */


body {
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #ffffff;
}

/* Headings feel more "law firm" with a serif font */
h1, h2, h3, h4, h5, h6,
.major h2 {
    font-family: 'Playfair Display', 'Times New Roman', serif;
}

/* ------------------------------------------------------------
   BRAND COLORS
   ------------------------------------------------------------ */
:root {
    --odm-dark: #181820;       /* Deep, elegant dark */
    --odm-blue: #201d68;       /* Midnight blue */
    --odm-gold: #d4af37;       /* Premium gold accent */
    --odm-light: #ffffff;      /* White */
}

/* ------------------------------------------------------------
   1. DARK BACKGROUND SECTIONS → WHITE TEXT
   ------------------------------------------------------------*/
#banner,
.wrapper.style3,
.wrapper.style4,
#footer {
    color: var(--odm-light) !important;
}

#banner a,
.wrapper.style3 a,
.wrapper.style4 a,
#footer a {
    color: var(--odm-light) !important;
}

/* ------------------------------------------------------------
   2. HEADER / NAVBAR WITH LOGO
   ------------------------------------------------------------ */
#header {
    background: var(--odm-dark);
}

/* Logo + brand container */
.odm-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

/* Logo image */
.odm-logo {
    height: 40px;
    width: auto;
    display: inline-block;
}

/* Brand text next to logo */
.odm-brand-text {
    display: inline-flex;
    flex-direction: column;
    font-family: 'Playfair Display', serif;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--odm-light);
}

.odm-brand-sub {
    font-size: 0.7rem;
    opacity: 0.85;
}

/* Navbar links */
#header nav a {
    color: var(--odm-light) !important;
}

/* Mobile dropdown menu */
#menu {
    background: var(--odm-dark) !important;
}
#menu ul li a {
    color: var(--odm-light) !important;
}

/* ------------------------------------------------------------
   3. BANNER (HOME HERO) - More premium gradient
   ------------------------------------------------------------ */
#banner {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.9),
        rgba(30, 28, 105, 0.92)
    ) !important;
}

#banner h2 {
    font-size: 3rem;
}

/* ------------------------------------------------------------
   4. CTA SECTION
   ------------------------------------------------------------ */
.wrapper.style4 {
    background: var(--odm-blue) !important;
    color: var(--odm-light) !important;
}

.wrapper.style4 a.button {
    background: var(--odm-gold) !important;
    color: var(--odm-dark) !important;
    border: none !important;
}


/* Match CTA section background to the same premium banner gradient */
#cta.wrapper.style4 {
    background: linear-gradient(
        to bottom,
        rgba(30, 28, 105, 0.92),
        rgba(0, 0, 0, 0.9)
    ) !important;
    color: #ffffff !important;
    padding: 4rem 0;
}

/* Make CTA text more elegant */
#cta h2 {
    color: #ffffff !important;
    font-family: 'Playfair Display', serif;
}

#cta p {
    color: #e0e0e0 !important;
}

/* CTA buttons styling (gold accents) */
#cta .button.primary {
    background-color: #d4af37 !important;
    border-color: #d4af37 !important;
    color: #000 !important;
}

#cta .button.primary:hover {
    background-color: #f5d776 !important;
    border-color: #f5d776 !important;
}



/* ------------------------------------------------------------
   5. BUTTON STYLING
   ------------------------------------------------------------ */
.button.primary {
    background-color: var(--odm-blue) !important;
    border-color: var(--odm-blue) !important;
    color: var(--odm-light) !important;
}

.button.primary:hover {
    background-color: var(--odm-gold) !important;
    border-color: var(--odm-gold) !important;
}

/* General buttons */
.button {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* -----------Home Misc.--------------*/

/* Gold-accent elegant section */
#one.wrapper.special {
    background: #515491 !important;
    border-top: 2px solid #d4af37;
    border-bottom: 2px solid #d4af37;
    color: #ffffff !important;
    padding: 5rem 0;
}

#one .major h2 {
    color: #ffffff !important;
    font-family: 'Playfair Display', serif;
    letter-spacing: 0.5px;
}

#one .major p {
    color: #e0e0e0 !important;
}

#one .icons.major .icon {
    color: #ffffff !important;
}

#one .icons.major .icon:before {
    color: #d4af37 !important; /* gold icons */
}


/* Spotlight #1 — Group photo
#two .spotlight-group .image img {
    width: 100%;
    height: 550px;
    object-fit: cover;
    object-position: center;
    border-radius: 4px;
}
*/

/* Spotlights #2-4 — Practice areas */
#two .spotlight-practice .image img {
    width: 100%;
    height: 350px;         /* Smaller height */
    object-fit: cover;
    object-position: center;
    border-radius: 4px;
}


/* Make icons in Section #three gold */
#three .features .icon:before {
    color: #d4af37 !important; /* premium gold */
}

/* Optional: Make the icon circle border gold too (looks even more premium) */
#three .features .icon {
    border-color: #d4af37 !important;
}

/* Premium gold-accent border for Section #three */
#three.wrapper.style3.special {
    border-top: 2px solid #d4af37 !important;
    border-bottom: 2px solid #d4af37 !important;
    padding: 5rem 0;
}

/* Make section title more elegant */
#three .major h2 {
    font-family: 'Playfair Display', serif;
    color: #ffffff !important;
}

/* Improve paragraph contrast */
#three .major p {
    color: #e0e0e0 !important;
}

/* Gold icons */
#three .features .icon:before {
    color: #d4af37 !important;
}

/* Optional — gold circle border for icon container */
#three .features .icon {
    border-color: #d4af37 !important;
}

/* Optional — gold hover glow */
#three .features .icon:hover:before {
    color: #f5d776 !important;
}

#three .features .icon:hover {
    border-color: #f5d776 !important;
}

/* ------------------------------------------------------------
   6. LAWYERS PAGE - CARDS
   ------------------------------------------------------------ */
.odm-lawyer-name {
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
    font-size: 1.05rem;
}

.odm-lawyer-role {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Learn More link in “Meet Our Legal Team” */
.odm-meet-link {
    margin-top: 1rem;
}

.odm-underline-link {
    font-size: 0.95rem;
    font-weight: 500;
    color: #ffffff; /* white, since Spotlight section is dark */
    border-bottom: 1px solid rgba(255,255,255,0.4);
    padding-bottom: 2px;
    transition: 0.2s ease;
}

.odm-underline-link:hover {
    color: #f8f8f8;
    border-bottom-color: #ffffff;
    letter-spacing: 0.5px;
}


/* Learn More under 'Why Work With ODM' */
.odm-why-link {
    margin-top: 2rem;
    text-align: center;
}

.odm-why-link .button.small {
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    padding: 0.4rem 1.2rem;
}


/* ============================================================
   ODM LAW FIRM - LAWYERS PAGE PREMIUM STYLING
   ============================================================ */

/* Group banner overlay text */
.odm-group-banner {
    position: relative;
    margin-bottom: 2.5rem;
}

.odm-group-overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 1.25rem 1.75rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    color: #ffffff;
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
}

/* Intro paragraph center + max width */
.odm-lawyers-intro {
    max-width: 800px;
    margin: 0 auto 2.5rem auto;
    text-align: center;
    font-size: 0.98rem;
    opacity: 0.9;
}

/* Grid spacing */
.odm-lawyer-grid {
    margin-top: 1rem;
}

/* Lawyer card */
.odm-lawyer-card {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1.25rem 1.25rem 1.4rem 1.25rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    text-align: center;              /* center-align since less text now */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Dark theme compatibility: if wrapper is dark, keep cards readable */
.wrapper.style5 .odm-lawyer-card {
    background: #ffffff;
    color: #2c2c35;
}

/* Lawyer image */
.odm-lawyer-photo img {
    border-radius: 0.6rem;
}

/* Name & role */
.odm-lawyer-name {
    margin-top: 0.9rem;
    margin-bottom: 0.2rem;
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    letter-spacing: 0.03em;
}

.odm-lawyer-role {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Short bio */
.odm-lawyer-bio {
    font-size: 0.88rem;
    line-height: 1.5;
    opacity: 0.9;
}

/* Practice area tags */
.odm-lawyer-tags {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0 0;
}

.odm-lawyer-tags li {
    display: inline-block;
    font-size: 0.78rem;
    padding: 0.25rem 0.6rem;
    margin: 0 0.3rem 0.3rem 0;
    border-radius: 999px;
    border: 1px solid rgba(32, 29, 104, 0.18); /* subtle blue border */
    background: rgba(32, 29, 104, 0.03);
}

/* CTA block */
.odm-lawyers-cta {
    margin-top: 3rem;
    text-align: center;
}

.odm-lawyers-cta h3 {
    font-family: 'Playfair Display', serif;
    margin-bottom: 0.5rem;
}

.odm-lawyers-cta p {
    max-width: 680px;
    margin: 0 auto 1.5rem auto;
    font-size: 0.95rem;
    opacity: 0.9;
}

/* ============================
   ODM - About Page Enhancements
   ============================ */

/* Slight spacing tweaks */
.odm-about-values .row h3 {
    font-family: 'Playfair Display', serif;
    margin-bottom: 0.35rem;
}

.odm-about-values .row p {
    font-size: 0.95rem;
    opacity: 0.9;
}

/* =============================================
   ODM Careers Page - Premium Styling
   ============================================= */

/* Intro section spacing & typography */
.odm-careers-intro {
    text-align: center;
    margin-bottom: 2.5rem;
}

.odm-careers-intro h3 {
    font-family: 'Playfair Display', serif;
    margin-bottom: 0.5rem;
}

.odm-careers-intro p {
    max-width: 800px;
    margin: 0 auto;
    opacity: 0.9;
}

/* Main careers box */
.odm-careers-box {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1.75rem;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    text-align: center;
}

.odm-careers-box img {
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Message inside the box */
.odm-careers-message h3 {
    font-family: 'Playfair Display', serif;
    margin-bottom: 0.5rem;
}

.odm-careers-message p {
    max-width: 700px;
    margin: 0.5rem auto;
    font-size: 0.95rem;
    opacity: 0.9;
}

/* Premium looking link */
.odm-careers-message a {
    color: var(--odm-blue);
    font-weight: 600;
    border-bottom: 1px solid rgba(32,29,104,0.3);
    padding-bottom: 2px;
    transition: 0.2s ease;
}

.odm-careers-message a:hover {
    color: var(--odm-gold);
    border-bottom-color: var(--odm-gold);
}

.odm-careers-image {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

/* Control the size of the careers image */
.odm-careers-image img {
    width: 60%;              /* Adjust this: 60% = smaller */
    max-width: 450px;        /* Prevent image from going too big */
    border-radius: 0.5rem;   /* Premium rounded edges */
    display: block;
}

/* =============================================
   ODM Contact Page - Premium Layout & Styling
   ============================================= */

.odm-contact-inner {
    max-width: 1000px;
    margin: 0 auto;
}

/* Shared card style for info + form */
.odm-contact-card {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1.75rem 1.75rem 1.9rem 1.75rem;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

/* Headings and intro text */
.odm-contact-card h3 {
    font-family: 'Playfair Display', serif;
    margin-bottom: 0.5rem;
}

.odm-contact-intro {
    font-size: 0.95rem;
    opacity: 0.9;
    margin-bottom: 1.5rem;
}

/* Office info list */
.odm-contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
}

.odm-contact-list li {
    margin-bottom: 0.9rem;
}

.odm-contact-list strong {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.odm-contact-value {
    font-size: 0.92rem;
    opacity: 0.9;
}

/* Note / Disclaimer text */
.odm-contact-note,
.odm-contact-disclaimer {
    font-size: 0.8rem;
    opacity: 0.8;
    margin-top: 0.75rem;
}

/* Make form labels & placeholders feel cleaner */
.odm-contact-form input[type="text"],
.odm-contact-form input[type="email"],
.odm-contact-form textarea {
    font-size: 0.9rem;
}

/* ============================================================
   Disable Contact Form Buttons (temporary)
   ============================================================ */

.odm-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

input[disabled],
button[disabled] {
    background: #cccccc !important;
    border-color: #cccccc !important;
    color: #666666 !important;
}

/* ============================================================
   ODM Premium Footer Styling
   ============================================================ */

/* Footer overall padding + spacing */
.odm-footer {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Thin gold divider line */
.odm-footer-divider {
    width: 80px;
    height: 2px;
    background: var(--odm-gold);
    margin: 0 auto 1.5rem auto;
    border-radius: 2px;
}

/* Social icon row */
.odm-footer-icons {
    display: flex;
    gap: 1.3rem;
    justify-content: center;
    margin-bottom: 1.2rem;
}

/* Icons: premium scaling, hover glow */
.odm-footer-icon {
    font-size: 1.3rem;
    opacity: 0.9;
    transition: 0.25s ease;
}

.odm-footer-icon:hover {
    opacity: 1;
    transform: scale(1.18);
    color: var(--odm-gold) !important;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* Copyright section */
.odm-footer-copy {
    margin: 0.5rem 0 0.8rem 0 !important;
    font-size: 0.85rem;
    opacity: 0.8;
    letter-spacing: 0.03em;
    text-align: center;
}

/* Back to top link */
.odm-footer-backtop {
    text-align: center;
    margin-top: 0.7rem;
}

.odm-footer-backtop a {
    color: var(--odm-light);
    font-size: 0.85rem;
    opacity: 0.85;
    transition: 0.25s ease;
    border-bottom: 1px solid rgba(255,255,255,0.25);
    padding-bottom: 2px;
}

.odm-footer-backtop a:hover {
    opacity: 1;
    color: var(--odm-gold);
    border-bottom-color: var(--odm-gold);
    letter-spacing: 0.5px;
}

/* =============================================
   ODM News & Updates - Premium Layout
   ============================================= */

/* Top intro row */
.odm-news-header {
    align-items: center;
    margin-bottom: 1.5rem;
}

.odm-news-header h3 {
    font-family: 'Playfair Display', serif;
    margin-bottom: 0.5rem;
}

.odm-news-header p {
    font-size: 0.95rem;
    opacity: 0.9;
}

/* Follow button column */
.odm-news-follow {
    text-align: right;
}

.odm-news-follow p {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    opacity: 0.85;
}

.odm-news-follow-btn {
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

/* On smaller screens, center follow block */
@media screen and (max-width: 736px) {
    .odm-news-follow {
        text-align: left;
        margin-top: 1rem;
    }
}

/* Subheader before grid */
.odm-news-subheader {
    text-align: center;
    margin-bottom: 1.5rem;
}

.odm-news-subheader h3 {
    font-family: 'Playfair Display', serif;
}

.odm-news-subheader p {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Instagram grid (3 columns on desktop, fluid) */
.odm-instagram-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.8rem;
    margin-top: 2rem;
}

/* Instagram card */
.odm-instagram-item {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 0.8rem;
    box-shadow: 0 12px 30px rgba(0,0,0,0.06);
    display: flex;
    justify-content: center;
}

/* Make the embed responsive-ish */
.odm-instagram-item iframe {
    width: 100%;
    min-height: 500px;
    border-radius: 0.5rem;
}

/* Small note at bottom */
.odm-news-footer-note {
    margin-top: 2.5rem;
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.85;
}

/* Hidden state before element scrolls into view */
.odm-fade {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

/* Visible state when triggered */
.odm-fade.visible {
    opacity: 1;
    transform: translateY(0);
}