/* ===================== GLOBAL FONT RESET ===================== */
html {
    font-size: 15px;
}

body {
    background-color: #0F1115 !important;
    color: #E3E3E3 !important;
    font-size: 1rem !important;
    line-height: 1.6;
}

/* ===================== NAVBAR ===================== */
.navbar {
    background-color: #1A1C20 !important;
    border-bottom: 1px solid #2A2D33;
}

.navbar-brand {
    color: #E3E3E3 !important;
    font-weight: 700;
    font-size: 1.25rem;
}

.navbar-nav .nav-link {
    color: #E3E3E3 !important;
    font-weight: 500;
    font-size: 0.95rem;
    transition: .25s ease;
}

.navbar-nav .nav-link:hover {
    color: #3B4FA3 !important;
    transform: translateY(-1px);
}

.nav-link.active {
    color: #3B4FA3 !important;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(59,79,163,0.4);
}

/* ===================== NAVBAR BUTTONS ===================== */
.btn-outline-light {
    border-color: #3B4FA3 !important;
    color: #3B4FA3 !important;
    font-weight: 600;
    transition: .25s ease;
    border-radius: 10px;
}

.btn-outline-light:hover {
    background-color: #3B4FA3 !important;
    color: white !important;
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(59,79,163,0.55);
}

.navbar .btn-primary {
    background-color: #3B4FA3 !important;
    border-color: #3B4FA3 !important;
    color: white !important;
    font-weight: 600;
    border-radius: 10px;
    transition: .25s ease;
}

.navbar .btn-primary:hover {
    background-color: #364894 !important;
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(59,79,163,0.55);
}

/* ===================== GLOBAL BUTTONS ===================== */
.btn-primary {
    background-color: #3B4FA3 !important;
    border-color: #3B4FA3 !important;
    font-weight: 600 !important;
    color: white !important;
    border-radius: 10px;
}

.btn-primary:hover {
    background-color: #364894 !important;
    transform: scale(1.03);
}

.btn-secondary {
    background-color: #2A2D33 !important;
    border-color: #2A2D33 !important;
    color: #E3E3E3 !important;
    border-radius: 10px;
}

.btn-secondary:hover {
    background-color: #3A3D45 !important;
    transform: scale(1.03);
}

/* ===================== INPUTS ===================== */
.form-control,
.form-control-lg,
.form-select {
    background-color: #141518 !important;
    border: 1px solid #2A2D33 !important;
    color: #E3E3E3 !important;
    border-radius: 10px !important;
    font-size: 0.95rem !important;
}

.form-control::placeholder {
    color: #8A8A8A !important;
}

.form-control:focus {
    border-color: #3B4FA3 !important;
    box-shadow: 0 0 0 4px rgba(59,79,163,0.35) !important;
    color: #ffffff !important;
}

/* ===================== GLOBAL CARDS ===================== */
.card,
.section-box,
.company-card,
.interviewer-card,
.result-card {
    background-color: #141518 !important;
    border: 1px solid #2A2D33 !important;
    color: #E3E3E3 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 12px rgba(120, 21, 21, 0.35);
    font-size: 0.95rem;
}

/* Hover glow for ALL cards */
.card:hover,
.company-card:hover,
.interviewer-card:hover,
.result-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 20px rgba(59,79,163,0.35) !important;
}

/* ===================== TEXT COLORS ===================== */
h1 { font-size: 2.1rem; color: #E3E3E3 !important; }
h2 { font-size: 1.7rem; color: #E3E3E3 !important; }
h3 { font-size: 1.35rem; color: #E3E3E3 !important; }
h4 { font-size: 1.15rem; color: #E3E3E3 !important; }
h5 { font-size: 1rem; color: #E3E3E3 !important; }

p, span, li {
    color: #CFCFCF !important;
}

strong {
    color: #FFFFFF !important;
}

.text-muted {
    color: #9A9A9A !important;
}

/* Default links (text links only) */
a.text-link {
    color: #3B4FA3 !important;
    text-decoration: none;
}

a.text-link:hover {
    color: #E3E3E3 !important;
    text-decoration: underline;
}

/* ===================== FOOTER ===================== */
footer {
    margin-top: 50px;
    background-color: #1A1C20 !important;
    color: #9A9A9A !important;
    padding: 25px 0;
    border-top: 1px solid #2A2D33;
    text-align: center;
}


/* ===== FORCE FOOTER LINKS STYLE ===== */
.footer-dark a {
    color: #9A9A9A !important;
    text-decoration: none !important;
}

.footer-dark a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* ===================== GLOBAL ANIMATIONS ===================== */
html { scroll-behavior: smooth; }

.fade-in {
    opacity: 0;
    animation: fadeIn 1.1s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.glow-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 18px rgba(59, 79, 163, 0.35) !important;
}

.btn-glow:hover {
    transform: scale(1.06);
    box-shadow: 0 0 14px rgba(59, 79, 163, 0.55) !important;
}

.search-animate {
    animation: slideIn 0.9s ease-out forwards;
    opacity: 0;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===================== HERO SECTION ===================== */
.hero-section {
    background: #1A1C20 !important;
    border: 1px solid #2A2D33 !important;
    border-radius: 16px;
    padding: 60px 30px; /* Reduced padding to make it less bulky */
    margin-bottom: 40px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.45);
    transition: all 0.28s ease;
}

.hero-section:hover,
.community-banner:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 22px rgba(59, 79, 163, 0.35) !important;
}

.hero-title {
    font-size: 3rem; /* Reduced from 4.25rem to look more professional */
    font-weight: 800;
    color: #E3E3E3 !important;
}

.hero-subtitle {
    font-size: 1.25rem; /* Reduced from 1.75rem */
    color: #CFCFCF !important;
    max-width: 650px;
    margin: 0 auto;
}

/* ===================== UNIFIED SEARCH & BUTTON ALIGNMENT ===================== */
/* This ensures the Search Input and Search Button match perfectly in height */
.search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px; 
}

.search-bar .form-control {
    height: 45px !important; 
    font-size: 0.95rem !important;
    background-color: #0F1115 !important;
    border: 1px solid #2A2D33 !important;
    border-radius: 8px !important;
}

/* THE SEARCH BUTTON (Filled Purple) */
.search-bar .btn-accent {
    height: 45px !important;
    padding: 0 25px !important; 
    background-color: #3B4FA3 !important;
    border: 1px solid #3B4FA3 !important;
    color: white !important;
    border-radius: 8px !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* THE THREE BUTTONS BELOW (Outline Style) */
/* Used for Home Page and Benefits Page */
.action-btn-container {
    display: flex;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

.btn-outline-accent {
    flex: 1; 
    max-width: 160px; /* Keeps them compact */
    height: 40px !important; 
    background-color: transparent !important;
    border: 1px solid #2A2D33 !important;
    color: #CFCFCF !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.btn-outline-accent:hover {
    background-color: #3B4FA3 !important;
    border-color: #3B4FA3 !important;
    color: white !important;
    transform: translateY(-3px);
}

/* ===================== VALUE CARDS ===================== */
.value-card {
    background: #141518 !important;
    border: 1px solid #2A2D33 !important;
    padding: 25px 20px;
    border-radius: 14px;
    transition: none;
    text-align: center;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: default;
}

.value-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #3B4FA3 !important;
    margin-bottom: 10px;
}

/* ===================== COMMUNITY BANNER ===================== */
.community-banner {
    background: #141518 !important;
    border: 1px solid #2A2D33 !important;
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    margin-top: 50px;
}

.community-banner h3 {
    color: #3B4FA3 !important;
    font-size: 1.8rem;
    font-weight: 700;
}

/* ===================== MOBILE FIXES ===================== */
@media (max-width: 576px) {
    .action-btn-container {
        flex-direction: column;
        align-items: center;
    }
    .btn-outline-accent {
        width: 100%;
        max-width: 100%;
    }
}
/* ===================== COMMUNITY BANNER ===================== */
.community-banner {
    background: #141518 !important;
    border: 1px solid #2A2D33 !important;
    border-radius: 16px;
    padding: 55px 30px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}

.community-banner h3 {
    color: #3B4FA3 !important;
    font-size: 2rem;
    font-weight: 700;
}

.community-banner p {
    font-size: 1.35rem;
    color: #CFCFCF !important;
}

/* ===================== MOBILE FIXES ===================== */
@media (max-width: 576px) {
    .hero-title {
        font-size: 2.6rem;
        line-height: 1.15;
    }

    .hero-section {
        padding: 40px 20px;
        margin-bottom: 40px;
    }

    .hero-subtitle {
        font-size: 1.25rem;
    }

    .search-bar {
        flex-direction: column;
        gap: 12px;
    }

    .search-bar button {
        width: 100%;
    }

    .value-card {
        min-height: auto;
        padding: 22px 18px;
    }

    .value-title {
        font-size: 1.3rem;
    }

    .value-text {
        font-size: 1.1rem;
    }
}


.delay-4 { animation-delay: .4s; }
.delay-5 { animation-delay: .5s; }
.delay-6 { animation-delay: .6s; }
.delay-7 { animation-delay: .7s; }
.delay-8 { animation-delay: .8s; }


@media (hover: none) {
    .card:hover,
    .glow-hover:hover,
    .hero-section:hover {
        transform: none;
    }
}


.cta-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 14px 26px;
    border-radius: 14px;

    background: #141518;
    border: 1px solid #2A2D33;
    color: #E3E3E3;
    font-weight: 600;
    font-size: 1.05rem;

    text-decoration: none;
    transition: all 0.25s ease;
}

.cta-box:hover {
    background: #1A1C20;
    color: #ffffff;
}


/* Restore homepage action button card-like appearance */
.btn-accent,
.btn-outline-accent {
    background-color: #141518;
    border-width: 1px;
    border-color: #2A2D33;
}

.btn-accent:hover,
.btn-outline-accent:hover {
    background-color: #1A1C20;
    box-shadow: 0 0 18px rgba(59, 79, 163, 0.35);
    transform: translateY(-4px);
}



/* ===================== HOMEPAGE CTA BUTTON FIX ===================== */
/* Only affects Add Review / Interviewers / Companies */

.hero-section .btn {
    min-width: 220px;
    height: 54px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 14px;

    text-decoration: none !important;
    transition: all 0.25s ease;
}

/* ADD REVIEW — always purple */
.hero-section .btn-accent {
    background-color: #3B4FA3 !important;
    border: 1px solid #3B4FA3 !important;
    color: #ffffff !important;
}

/* ADD REVIEW hover */
.hero-section .btn-accent:hover {
    background-color: #364894 !important;
    box-shadow: 0 0 16px rgba(59,79,163,0.45);
    transform: translateY(-3px);
}

/* INTERVIEWERS & COMPANIES — neutral */
.hero-section .btn-outline-accent {
    background-color: transparent !important;
    border: 1px solid #2A2D33 !important;
    color: #E3E3E3 !important;
    min-width: 140px;
    border-radius: 8px !important;
}

/* INTERVIEWERS & COMPANIES — purple on hover */
.hero-section .btn-outline-accent:hover {
    background-color: #3B4FA3 !important;
    border-color: #3B4FA3 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* =====================
   NAVBAR LOGO
===================== */
.navbar-logo {
    height: 28px;
    width: auto;
    display: block;
}

@media (max-width: 768px) {
    .navbar-logo {
        height: 24px;
    }
}

#logo
.navbar-logo {
    height: 34px;
    width: auto;
    display: block;
  }
  
  .brand-text {
    font-weight: 500;
    font-size: 1.05rem;
    color: #E6E7EB;
    white-space: nowrap;
  }
  

  .navbar-brand {
    cursor: default;
}

.navbar-brand:hover {
    opacity: 0.9;
}