:root {
    --prudent-red: #DD221B;
    --dark-bg: #1E1E1E;
    --border-gray: #F6F6F6;
    --font-main: 'Neue Haas Grotesk Display Pro', 'Inter', sans-serif;
    --radius: 5px;
}

body.contact-page-body { background-color: #fff; margin: 0; font-family: var(--font-main); color: #111; }
.main-container { width: 1400px; margin: 0 auto; }

/* HERO */
.contact-hero { background: var(--dark-bg); color: #fff; padding: 45px 0; }
.hero-flex { display: flex; justify-content: space-between; align-items: center; }
.hero-text h1 { font-size: 32px; font-weight: 700; margin-bottom: 8px; }
.hero-text p { font-size: 15px; color: #888; }
.hero-actions { display: flex; gap: 15px; }
.hero-pill { border: 1px solid #fff; border-radius: 50px; padding: 10px 25px; color: #fff; text-decoration: none; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 10px; }

/* TOP GRID LAYOUT (690px COLUMNS) */
.contact-mt { padding-top: 40px; padding-bottom: 60px; }
.contact-top-grid { display: grid; grid-template-columns: 690px 690px; gap: 20px; margin-bottom: 30px; }

/* OFFICE INFO CARD */
.office-info-box { border: 2px solid var(--border-gray); border-radius: var(--radius); padding: 40px; background: #fff; }
.info-segment { margin-bottom: 35px; }
.info-segment.border-top { border-top: 1px solid #eee; padding-top: 35px; }
.label-red { color: var(--prudent-red); font-weight: 800; font-size: 12px; display: block; margin-bottom: 12px; }
.office-info-box h2 { font-size: 22px; font-weight: 800; margin-bottom: 25px; }
.sub-label { display: block; font-size: 11px; font-weight: 700; color: #999; margin-bottom: 8px; }
.address-txt { font-size: 15px; line-height: 1.5; max-width: 550px; }

.grid-3-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.g-item p { font-size: 15px; font-weight: 600; }

.follow-h { font-size: 18px; font-weight: 800; display: block; margin-bottom: 20px; }
.social-pills-row { display: flex; gap: 10px; }
.social-btn { border: 1px solid #111; border-radius: 50px; padding: 10px 22px; font-size: 13px; font-weight: 700; color: #111; text-decoration: none; display: flex; align-items: center; gap: 8px; }

/* CONTACT FORM BOX */
.contact-form-box { border: 2px solid var(--border-gray); border-radius: var(--radius); overflow: hidden; background: #fff; }
.form-dark-head { background: #333; color: #fff; padding: 30px 40px; }
.form-dark-head h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.form-dark-head p { font-size: 12px; color: #888; }

.form-body-gray { background: #F6F6F6; padding: 35px 40px; }
.form-flex-row { display: flex; gap: 15px; margin-bottom: 20px; }
.field { flex: 1; display: flex; flex-direction: column; margin-bottom: 20px; }
.field label { font-size: 13px; color: #888; margin-bottom: 8px; }
.field input, .field select, .field textarea { background: #fff; border: 1px solid #E5E5E5; border-radius: 5px; padding: 12px 15px; font-size: 14px; width: 100%; }
.field textarea { height: 110px; resize: none; }
.contact-submit { background: var(--prudent-red); color: #fff; border: none; border-radius: 5px; padding: 14px 45px; font-weight: 800; cursor: pointer; width: fit-content; }
.direct-mail { font-size: 12px; color: #777; margin-top: 15px; }
.direct-mail a { color: #111; text-decoration: underline; font-weight: 600; }

/* ADVERTISING BOTTOM GRID */
.advertising-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.adv-card { border: 2px solid var(--border-gray); border-radius: var(--radius); padding: 35px; }
.adv-card.dark { background: #333; color: #fff; border: none; }
.adv-card h3 { font-size: 20px; line-height: 1.3; margin: 15px 0; font-weight: 800; }
.adv-card p { font-size: 13px; color: #888; line-height: 1.5; margin-bottom: 30px; }

.adv-btn-stack { display: flex; flex-direction: column; gap: 12px; }
.btn-fill { background: var(--prudent-red); color: #fff; border-radius: 50px; padding: 13px; text-align: center; text-decoration: none; font-weight: 800; font-size: 14px; }
.btn-line { border: 1px solid #fff; color: #fff; border-radius: 50px; padding: 13px; text-align: center; text-decoration: none; font-weight: 800; font-size: 14px; }

.adv-card.white h4 { font-size: 16px; font-weight: 800; border-bottom: 1px solid #eee; padding-bottom: 20px; margin-bottom: 25px; }
.list-split { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.list-split ul { list-style: none; padding: 0; margin: 0; }
.list-split li { font-size: 16px; margin-bottom: 18px; position: relative; padding-left: 15px; font-weight: 500; }
.list-split li::before { content: "•"; position: absolute; left: 0; color: #000; font-weight: bold; }
.grey-out { color: #7F919B; }

/* MOBILE RESPONSIVE */
@media (max-width: 991px) {
    .main-container { width: 100% !important; padding: 0 20px; }
    .hero-flex { flex-direction: column; text-align: center; gap: 25px; }
    .contact-top-grid, .advertising-grid { grid-template-columns: 1fr; }
    .grid-3-col, .form-flex-row, .list-split { grid-template-columns: 1fr; }
    .office-info-box, .form-body-gray { padding: 25px; }
    .contact-submit { width: 100%; }
}

/* --- TEAM SECTION STRICT LAYOUT --- */

.team-section {
    padding-bottom: 80px;
    margin-top: 50px;
}

.team-heading {
    font-size: 18px;
    font-weight: 800;
    color: #111;
    margin-bottom: 25px;
}

.mt-50 { margin-top: 50px; }

.team-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 335px) !important;
    gap: 20px !important;
}

/* Card Design based on Figma Specs */
.team-card {
    width: 335px !important;
    background-color: #F6F6F6 !important;
    border: 2px solid #F6F6F6 !important;
    border-radius: 5px !important;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* Editorial specific height */
.team-grid.editorial .team-card { height: 123px !important; }

/* Field Reporters specific height */
.team-grid.field .team-card { height: 115px !important; }

.card-inner {
    padding: 0 20px;
    width: 100%;
}

.team-card strong {
    font-size: 16px;
    font-weight: 800;
    color: #111;
    display: block;
    margin-bottom: 4px;
}

.team-card p {
    font-size: 14px;
    color: #7F919B; /* Specific gray from layout */
    margin-bottom: 12px;
    font-weight: 500;
}

/* Red Chief Label */
.chief-label {
    color: var(--prudent-red);
    font-weight: 900;
    margin-left: 5px;
}

/* Contact Pills */
.contact-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid #7F919B; /* Gray border from design */
    border-radius: 50px;
    padding: 6px 15px;
    font-size: 16px;
    color: #7F919B;
    text-decoration: none;
    font-weight: 400;
    transition: 0.2s;
}

.contact-pill i {
    font-size: 11px;
}

.contact-pill:hover {
    background: #7F919B;
    color: #fff;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 991px) {
    .team-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        padding: 0 15px;
    }

    .team-card {
        width: 100% !important;
        height: auto !important; /* Allow wrapping on mobile */
        padding: 20px 0;
    }
    
    .team-heading {
        text-align: left;
        padding-left: 15px;
    }
}

/* --- FIX FOR PHONE ICON DIRECTION --- */

.contact-pill i.fa-phone-alt, 
.btn-line i.fa-phone-alt,
.hero-pill i.fa-phone-alt,
.contact-pill i.fa-phone {
    transform: scaleX(-1) !important; /* Mirrored horizontally to face right */
    display: inline-block !important; /* Ensures the transform applies correctly */
}

/* ============================================================
   STRICT FULLY MOBILE RESPONSIVE CODE - CONTACT US
   ============================================================ */

@media (max-width: 991px) {
    /* 1. Global Layout Reset */
    .main-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px !important;
        overflow-x: hidden !important;
    }

    /* 2. Hero Section Adjustments */
    .contact-hero {
        padding: 40px 0 !important;
    }

    .hero-flex {
        flex-direction: column !important;
        text-align: center !important;
        gap: 25px !important;
    }

    .hero-actions {
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
    }

    .hero-pill {
        justify-content: center !important;
        width: 100% !important;
    }

    /* 3. Top Grid (Office Info & Form) */
    .contact-top-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    .office-info-box, 
    .contact-form-box {
        width: 100% !important;
        max-width: 100% !important;
        padding: 25px !important;
    }

    /* Reset internal 3-column info grid to stack */
    .grid-3-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .social-pills-row {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .social-btn {
        width: calc(50% - 5px) !important; /* Two per row */
        justify-content: center !important;
        font-size: 12px !important;
        padding: 10px !important;
    }

    /* 4. Form Adjustments */
    .form-dark-head, 
    .form-body-gray {
        padding: 20px !important;
    }

    .form-flex-row {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .contact-submit {
        width: 100% !important;
        padding: 15px !important;
    }

    /* 5. Advertising Bottom Grid */
    .advertising-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
    }

    .adv-card {
        width: 100% !important;
        padding: 25px !important;
    }

    /* Split bullets back to single list on mobile */
    .list-split {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* 6. Team Section Responsive Fixes */
    .team-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 15px !important;
    }

    .team-card {
        width: 100% !important;
        height: auto !important; /* Allow growth for wrapped text */
        padding: 20px 0 !important;
    }

    .team-heading {
        font-size: 20px !important;
        margin-top: 40px !important;
    }

    /* 7. General Text Scaling for Mobile */
    h2 { font-size: 20px !important; }
    h3 { font-size: 18px !important; }
    
    .address-txt {
        font-size: 14px !important;
        max-width: 100% !important;
    }

    /* 8. Padding for Bottom Floating Nav */
    body {
        padding-bottom: 90px !important;
    }
}

/* Extra Small Phone Fixes */
@media (max-width: 480px) {
    .social-btn {
        width: 100% !important; /* Single column buttons on very small screens */
    }

    .contact-pill {
        font-size: 14px !important;
        width: 100% !important;
        justify-content: center !important;
    }
}

/* --- STRICT MOBILE BACKGROUND & TEXT FIX --- */

@media (max-width: 991px) {
    /* 1. Force the entire page body and main content area to white */
    body.contact-page-body,
    .contact-mt,
    .main-container {
        background-color: #ffffff !important;
    }

    /* 2. Force the Advertising and Info cards to stay white */
    .office-info-box,
    .adv-card,
    .adv-card.white {
        background-color: #ffffff !important;
        border: 2px solid #F6F6F6 !important; /* Restore the light border */
    }

    /* 3. Force Text, Headings, and Bullets to be Dark/Visible */
    .office-info-box h2,
    .adv-card h4,
    .team-heading,
    .team-card strong {
        color: #111111 !important;
    }

    .address-txt,
    .d-item p,
    .bullet-grid li,
    .adv-card p {
        color: #333333 !important;
    }

    /* Ensure bullets (dots) are visible and dark */
    .bullet-grid li::before {
        color: #111111 !important;
    }

    /* 4. Keep the 'REACH ALL OF GOA' dark card as it was designed */
    .adv-card.dark {
        background-color: #333333 !important;
    }
    
    .adv-card.dark h3, 
    .adv-card.dark p {
        color: #ffffff !important;
    }

    /* 5. Team Section Background Fix */
    .team-card {
        background-color: #F6F6F6 !important; /* Keep the light gray for team cards */
    }
}

/* --- STRICT CONTACT HERO FIX FOR MOBILE --- */

@media (max-width: 991px) {
    /* 1. Restore the dark background specifically for the Hero section */
    .contact-hero {
        background-color: #1E1E1E !important;
        padding: 40px 0 !important;
        display: block !important;
        text-align: center !important;
    }

    /* 2. Prevent the inner container from forcing a white background here */
    .contact-hero .main-container {
        background-color: transparent !important;
        display: block !important;
    }

    /* 3. Force the Title (h1) to be visible and white */
    .hero-text h1 {
        display: block !important;
        visibility: visible !important;
        color: #FFFFFF !important;
        font-size: 26px !important;
        margin-bottom: 10px !important;
        text-align: center !important;
    }

    /* 4. Fix the Paragraph text color and centering */
    .hero-text p {
        color: #AAAAAA !important; /* Lighter gray for dark background */
        text-align: center !important;
        font-size: 14px !important;
        max-width: 100% !important;
        padding: 0 20px !important;
        margin-bottom: 25px !important;
    }

    /* 5. Center the hero items vertically */
    .hero-flex {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 20px !important;
    }

    /* 6. Ensure hero buttons stay white-on-dark */
    .hero-pill {
        border-color: #ffffff !important;
        color: #ffffff !important;
        background: transparent !important;
    }
}

/* --- MOBILE FOLLOW US ROW FIX --- */

@media (max-width: 991px) {
    /* 1. Force the heading and icons into one row */
    .info-segment:has(.follow-h) {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 15px !important;
        padding-bottom: 20px !important;
    }

    /* 2. Reset heading margin to align vertically with icons */
    .follow-h {
        margin-bottom: 0 !important;
        font-size: 18px !important;
        white-space: nowrap !important;
    }

    /* 3. Group icons together on the right */
    .social-pills-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        margin-top: 0 !important;
    }

    /* 4. Transform buttons into perfect circular icons */
    .social-btn {
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important; /* Hides the text labels like 'YouTube' */
        border: 1px solid #333 !important;
        background: #fff !important;
        flex-shrink: 0 !important;
    }

    /* 5. Ensure only the FontAwesome icon is visible and sized correctly */
    .social-btn i {
        font-size: 16px !important;
        color: #333 !important;
        margin: 0 !important;
    }
}

/* --- STRICT MOBILE CENTERED SOCIAL ICONS FIX --- */

@media (max-width: 991px) {
    /* 1. Force Heading and Icons into a single row */
    .info-segment:has(.follow-h) {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 20px 0 !important;
    }

    .follow-h {
        margin: 0 !important; /* Removes bottom spacing */
        font-size: 18px !important;
    }

    .social-pills-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        margin: 0 !important;
    }

    /* 2. Create the perfect circular button */
    .social-btn {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        
        /* Strict Centering Logic */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        font-size: 0 !important; /* Hides text labels */
        line-height: 0 !important; /* Critical: prevents text line-height from pushing icon down */
        
        border: 1px solid #333 !important;
        background: #fff !important;
        flex-shrink: 0 !important;
    }

    /* 3. Center the Icon itself */
    .social-btn i {
        font-size: 15px !important;
        color: #333 !important;
        margin: 0 !important; /* Resets any inherited margins */
        display: inline-block !important;
        line-height: 1 !important; /* Ensures icon height matches font size */
    }
}


.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 75px;
    background-color: #000000;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    display: none;
    /* Changed via media query */
    justify-content: space-around;
    align-items: center;
    z-index: 9999;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    padding: 0 10px;
}

/* Visibility Logic */
@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
    }

    /* Add padding to the bottom of the body so the nav doesn't hide content */
    body {
        padding-bottom: 75px;
    }
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #ffffff;
    font-family: "Neue Haas Grotesk Display Pro", sans-serif;
    transition: all 0.2s ease;
    flex: 1;
}

.nav-icon {
    width: 24px;
    height: 24px;
    fill: #ffffff;
    /* Default icon color */
    margin-bottom: 5px;
}

.nav-item span {
    font-size: 12px;
    font-weight: 700;
    /* Bold as per image */
    text-align: center;
}

/* Active State Styles */
.nav-item.active {
    color: #E11B22;
    /* Prudent Red */
}

.nav-item.active .nav-icon {
    fill: #E11B22;
    /* Active Icon Color */
}

/* Optional: Slight feedback when clicking */
.nav-item:active {
    transform: scale(0.92);
}