@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Merriweather:wght@700;900&display=swap');







/* ══════════════════════════════════════════



   COLOR SYSTEM — Warm Professional Palette



   Navy + Saffron Gold + Off-White



══════════════════════════════════════════ */



:root {



    --navy:          #0d1f3c;   /* Deep rich navy */



    --navy-mid:      #162d52;   /* Mid navy */



    --navy-light:    #1e3a6a;   /* Lighter navy for hovers */



    --gold:          #c9922a;   /* Warm saffron gold */



    --gold-light:    #e0aa45;   /* Lighter gold for highlights */



    --gold-muted:    #f5e6c8;   /* Very pale gold for bg tints */



    --red-accent:    #c0392b;   /* Press red for alerts/badges */



    --white:         #ffffff;



    --off-white:     #fafaf8;   /* Warm off-white body bg */



    --surface:       #f4f1ec;   /* Warm light surface */



    --border:        #e6e0d4;   /* Warm border */



    --text-dark:     #1a1208;   /* Near-black with warm tint */



    --text-body:     #3d3528;   /* Rich brown-grey for body text */



    --text-muted:    #7a6e5f;   /* Warm muted */



    --shadow-sm:     0 1px 3px rgba(13,31,60,0.08);



    --shadow-md:     0 4px 16px rgba(13,31,60,0.10);



    --shadow-lg:     0 12px 40px rgba(13,31,60,0.14);



    --radius:        6px;



    --radius-lg:     12px;



    --font-sans:     'Inter', sans-serif;



    --font-serif:    'Merriweather', serif;



    --transition:    all 0.22s cubic-bezier(0.4,0,0.2,1);



}







*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }







html { scroll-behavior: smooth; }







body {



    background: var(--off-white);



    color: var(--text-body);



    font-family: var(--font-sans);



    line-height: 1.7;



    -webkit-font-smoothing: antialiased;



    display: flex;



    flex-direction: column;



    min-height: 100vh;



}







a { text-decoration: none; color: inherit; transition: var(--transition); }







img { max-width: 100%; display: block; }







/* ── Layout ── */



/* .container removed to use Bootstrap's container system */



.section-padding { padding: 90px 0; }







.section-bg-light {



    background: var(--surface);



    border-top: 1px solid var(--border);



    border-bottom: 1px solid var(--border);



}







/* ══════════════════════════════════════════



   TOP BAR



══════════════════════════════════════════ */



.top-bar {



    background: var(--navy);



    color: #c8c0b4;



    font-size: 0.82rem;



    padding: 10px 0;



    border-bottom: 1px solid rgba(255,255,255,0.06);



}







.top-bar-container {



    display: flex;



    justify-content: space-between;



    align-items: center;



    flex-wrap: wrap;



    gap: 10px;



}







.top-contacts { display: flex; gap: 24px; }



.top-contacts a {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #c8c0b4;

    font-weight: 500;

    transition: color 0.2s;

}



.top-contacts a i { color: var(--gold-light); font-size: 0.8rem; }

.top-contacts a:hover { color: var(--gold-light); }



.top-socials { display: flex; gap: 10px; align-items: center; }

.top-socials a {

    color: #c8c0b4;

    background: rgba(255, 255, 255, 0.08);

    width: 28px;

    height: 28px;

    border-radius: 50%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 0.78rem;

    border: 1px solid rgba(255, 255, 255, 0.15);

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}

.top-socials a:hover {

    color: var(--navy);

    background: var(--gold-light);

    border-color: var(--gold-light);

    transform: translateY(-3px) rotate(360deg);

    box-shadow: 0 4px 10px rgba(224, 170, 69, 0.45);

}



/* ══════════════════════════════════════════

   NAVIGATION

══════════════════════════════════════════ */

.main-header {

    background: rgba(255,255,255,0.97);

    position: sticky;

    top: 0;

    z-index: 200;

    box-shadow: var(--shadow-sm);

    border-bottom: 2px solid var(--border);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    transition: box-shadow 0.3s ease, border-color 0.3s ease;

}



.main-header.scrolled {



    box-shadow: var(--shadow-md);



    border-bottom-color: var(--gold);



}







.header-container {



    display: flex;



    justify-content: space-between;



    align-items: center;



    padding: 16px 0;



    transition: padding 0.3s ease;



}







.main-header.scrolled .header-container { padding: 10px 0; }







.site-brand {



    display: flex;



    align-items: center;



    gap: 14px;



}







.site-logo { width: 46px; height: 46px; border-radius: 50%; }







.site-title-box h1 {



    font-size: 1.25rem;



    color: var(--navy);



    font-weight: 800;



    line-height: 1.1;



    letter-spacing: -0.3px;



}







.site-title-box p {



    font-size: 0.68rem;



    color: var(--gold);



    font-weight: 700;



    letter-spacing: 1.5px;



    text-transform: uppercase;



    margin-top: 2px;



}







/* Nav links */



.nav-menu {



    display: flex;



    gap: 4px;



    align-items: center;



    list-style: none;



}







.nav-link {



    font-size: 0.9rem;



    font-weight: 600;



    color: var(--text-body);



    padding: 8px 14px;



    border-radius: var(--radius);



    position: relative;



    letter-spacing: 0.01em;



    transition: color 0.2s ease, background 0.2s ease;



}







/* Animated underline */



.nav-link::after {



    content: '';



    position: absolute;



    bottom: 4px;



    left: 14px;



    width: 0;



    height: 2px;



    background: var(--gold);



    border-radius: 2px;



    transition: width 0.28s cubic-bezier(0.4,0,0.2,1);



}







.nav-link:hover { color: var(--navy); background: var(--gold-muted); }



.nav-link:hover::after,



.nav-link.active::after { width: calc(100% - 28px); }



.nav-link.active { color: var(--navy); font-weight: 700; }







/* Register button */



.btn-nav-register {



    background: var(--gold);



    color: var(--navy) !important;



    font-weight: 700;



    border-radius: var(--radius);



    padding: 9px 22px;



    box-shadow: 0 2px 8px rgba(201,146,42,0.25);



    transition: background 0.22s, transform 0.18s, box-shadow 0.22s;



}







.btn-nav-register::after { display: none !important; }







.btn-nav-register:hover {



    background: var(--gold-light);



    color: var(--navy) !important;



    transform: translateY(-1px);



    box-shadow: 0 6px 18px rgba(201,146,42,0.35);



}







.menu-toggle {



    display: none;



    background: none;



    border: 1px solid var(--border);



    border-radius: var(--radius);



    padding: 8px 12px;



    font-size: 1.2rem;



    color: var(--navy);



    cursor: pointer;



    transition: background 0.2s;



}







.menu-toggle:hover { background: var(--surface); }







/* ══════════════════════════════════════════



   HERO SECTION



══════════════════════════════════════════ */



.hero-section {



    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 60%, #1a3060 100%);



    color: #fff;



    padding: 100px 0 90px;



    position: relative;



    overflow: hidden;



    border-bottom: 3px solid var(--gold);



}







/* Decorative background elements */



.hero-section::before {



    content: '';



    position: absolute;



    inset: 0;



    background:



        radial-gradient(ellipse 60% 80% at 100% 0%, rgba(201,146,42,0.14) 0%, transparent 60%),



        radial-gradient(ellipse 40% 60% at 0% 100%, rgba(22,45,82,0.8) 0%, transparent 50%);



    z-index: 0;



}







/* Floating mesh pattern */



.hero-section::after {



    content: '';



    position: absolute;



    top: -50%;



    right: -10%;



    width: 500px;



    height: 500px;



    border-radius: 50%;



    border: 80px solid rgba(201,146,42,0.05);



    animation: heroOrb 10s ease-in-out infinite alternate;



    z-index: 0;



}







@keyframes heroOrb {



    0%   { transform: scale(1) translateY(0) rotate(0deg);   }



    100% { transform: scale(1.1) translateY(30px) rotate(8deg); }



}







.hero-container {



    position: relative;



    z-index: 2;



    max-width: 820px;



    animation: heroFadeUp 0.8s cubic-bezier(0.22,1,0.36,1) both;



}







@keyframes heroFadeUp {



    from { opacity:0; transform: translateY(28px); }



    to   { opacity:1; transform: translateY(0); }



}







/* Small badge above heading */



.hero-badge {



    display: inline-flex;



    align-items: center;



    gap: 8px;



    background: rgba(201,146,42,0.15);



    border: 1px solid rgba(201,146,42,0.3);



    color: var(--gold-light);



    font-size: 0.78rem;



    font-weight: 700;



    letter-spacing: 1.2px;



    text-transform: uppercase;



    padding: 6px 14px;



    border-radius: 100px;



    margin-bottom: 22px;



    animation: heroFadeUp 0.8s 0.1s cubic-bezier(0.22,1,0.36,1) both;



}







.hero-badge i { font-size: 0.75rem; }







/* Hero heading — fixed single line using nowrap on typewriter */



.hero-section h2 {



    font-family: var(--font-serif);



    font-size: 2.75rem;



    font-weight: 900;



    line-height: 1.22;



    color: #fff;



    margin-bottom: 22px;



    letter-spacing: -0.5px;



    /* NO min-height — dynamic height from content */



}







/* Typewriter container keeps content on one visual block */



.tw-wrap {



    display: inline-block;



    position: relative;



}







/* The typing text */



#typewriterText {



    display: inline;



    white-space: pre-wrap;



    word-break: break-word;



}







/* Blinking cursor */



.typewriter-cursor {



    display: inline-block;



    width: 3px;



    height: 0.82em;



    background: var(--gold-light);



    margin-left: 3px;



    vertical-align: middle;



    border-radius: 1px;



    animation: cursorBlink 0.7s step-end infinite;



    position: relative;



    top: -1px;



}







@keyframes cursorBlink {



    0%, 100% { opacity: 1; }



    50%       { opacity: 0; }



}







/* Sub-heading line (static, below typewriter) */



.hero-subline {



    font-size: 1.05rem;



    color: rgba(255,255,255,0.62);



    margin-bottom: 38px;



    font-weight: 400;



    max-width: 600px;



    line-height: 1.7;



    animation: heroFadeUp 0.9s 0.3s cubic-bezier(0.22,1,0.36,1) both;



}







.hero-btns {



    display: flex;



    gap: 14px;



    flex-wrap: wrap;



    animation: heroFadeUp 0.9s 0.5s cubic-bezier(0.22,1,0.36,1) both;



}







/* Trust strip below buttons */



.hero-trust {



    margin-top: 36px;



    display: flex;



    align-items: center;



    gap: 20px;



    opacity: 0.55;



    font-size: 0.8rem;



    font-weight: 600;



    letter-spacing: 0.5px;



    color: #fff;



    animation: heroFadeUp 0.9s 0.7s cubic-bezier(0.22,1,0.36,1) both;



}







.hero-trust span::before {



    content: '✓ ';



    color: var(--gold-light);



}







.hero-trust-divider {



    width: 1px;



    height: 14px;



    background: rgba(255,255,255,0.25);



}







/* ══════════════════════════════════════════



   BUTTONS



══════════════════════════════════════════ */



.btn {



    display: inline-flex;



    align-items: center;



    justify-content: center;



    gap: 8px;



    background: var(--gold);



    color: var(--navy);



    padding: 13px 28px;



    border-radius: var(--radius);



    font-size: 0.92rem;



    font-weight: 700;



    border: 2px solid var(--gold);



    cursor: pointer;



    letter-spacing: 0.02em;



    transition: background 0.22s, transform 0.18s, box-shadow 0.22s, border-color 0.22s;



    box-shadow: 0 2px 8px rgba(201,146,42,0.2);



}







.btn:hover {



    background: var(--gold-light);



    border-color: var(--gold-light);



    transform: translateY(-2px);



    box-shadow: 0 8px 24px rgba(201,146,42,0.3);



}







.btn-secondary {



    background: transparent;



    color: #fff;



    border-color: rgba(255,255,255,0.3);



    box-shadow: none;



}







.btn-secondary:hover {



    background: rgba(255,255,255,0.1);



    border-color: rgba(255,255,255,0.6);



    color: #fff;



    box-shadow: none;



}







.btn-navy {



    background: var(--navy);



    border-color: var(--navy);



    color: #fff;



}







.btn-navy:hover {



    background: var(--navy-light);



    border-color: var(--navy-light);



    color: #fff;



}







.btn-block { display: flex; width: 100%; }







/* btn-accent = gold (alias) */



.btn-accent {



    background: var(--gold);



    border-color: var(--gold);



    color: var(--navy);



}



.btn-accent:hover {



    background: var(--gold-light);



    border-color: var(--gold-light);



    color: var(--navy);



    transform: translateY(-2px);



    box-shadow: 0 8px 24px rgba(201,146,42,0.3);



}







/* Global form title bar */



.form-title {



    font-size: 1.15rem;



    font-weight: 700;



    color: var(--navy);



    margin-bottom: 24px;



    padding-bottom: 14px;



    border-bottom: 2px solid var(--surface);



    display: flex;



    align-items: center;



    gap: 10px;



}



.form-title i { color: var(--gold); }







/* ══════════════════════════════════════════



   PAGE HEADERS (inner pages) — Professional Centered Design



══════════════════════════════════════════ */







/* ── Base page-header ── */



.page-header {



    position: relative;



    overflow: hidden;



    padding: 40px 0 35px;



    text-align: center;







    /* Navy gradient base */



    background:



        linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 55%, #1a3060 100%);







    /* SVG dot-grid texture overlay (data URI) */



    background-image:



        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(255,255,255,0.045)'/%3E%3C/svg%3E"),



        linear-gradient(135deg, %230d1f3c 0%25, %23162d52 55%25, %231a3060 100%25);







    border-bottom: 3px solid var(--gold);



}







/* Decorative background orbs */



.page-header::before {



    content: '';



    position: absolute;



    top: -80px; right: -80px;



    width: 340px; height: 340px;



    border-radius: 50%;



    background: radial-gradient(circle, rgba(201,146,42,0.12) 0%, transparent 70%);



    pointer-events: none;



}







.page-header::after {



    content: '';



    position: absolute;



    bottom: -60px; left: -60px;



    width: 260px; height: 260px;



    border-radius: 50%;



    background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);



    pointer-events: none;



}







/* Inner container */



.page-header .container {



    position: relative;



    z-index: 2;



    animation: phFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) both;



}







@keyframes phFadeUp {



    from { opacity:0; transform: translateY(20px); }



    to   { opacity:1; transform: translateY(0); }



}







/* Page icon badge */



.page-header-icon {



    display: inline-flex;



    align-items: center;



    justify-content: center;



    width: 52px; height: 52px;



    border-radius: 14px;



    background: rgba(201,146,42,0.15);



    border: 1px solid rgba(201,146,42,0.3);



    color: var(--gold-light);



    font-size: 1.4rem;



    margin: 0 auto 18px;



}







/* Breadcrumb */



.page-breadcrumb {



    display: flex;



    align-items: center;



    justify-content: center;



    gap: 8px;



    font-size: 0.78rem;



    font-weight: 600;



    color: rgba(255,255,255,0.45);



    letter-spacing: 0.5px;



    margin-bottom: 14px;



    text-transform: uppercase;



}







.page-breadcrumb a {



    color: rgba(255,255,255,0.5);



    transition: color 0.2s;



}



.page-breadcrumb a:hover { color: var(--gold-light); }



.page-breadcrumb i { font-size: 0.6rem; }



.page-breadcrumb span { color: var(--gold-light); }







/* Heading */



.page-header h2 {



    font-size: 2.2rem;



    color: #ffffff;



    font-weight: 900;



    font-family: var(--font-serif);



    line-height: 1.2;



    letter-spacing: -0.5px;



    margin-bottom: 0;



}







/* Gold underline accent under heading */



.page-header h2::after {



    content: '';



    display: block;



    width: 56px;



    height: 3px;



    background: linear-gradient(90deg, var(--gold), var(--gold-light));



    border-radius: 3px;



    margin: 14px auto 0;



}







/* Sub-description */



.page-header p {



    color: rgba(255,255,255,0.55);



    font-size: 1rem;



    margin-top: 16px;



    font-weight: 400;



    max-width: 520px;



    margin-left: auto;



    margin-right: auto;



    line-height: 1.65;



}







/* ── Per-page theme variants ── */







/* Members — teal accent */



.page-header.ph-members {



    background-image:



        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(255,255,255,0.045)'/%3E%3C/svg%3E"),



        linear-gradient(135deg, %230d1f3c 0%25, %23133854 60%25, %230f2d45 100%25);



}



.page-header.ph-members::before {



    background: radial-gradient(circle, rgba(20,184,166,0.12) 0%, transparent 70%);



}







/* Register — green accent */



.page-header.ph-register {



    background-image:



        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(255,255,255,0.045)'/%3E%3C/svg%3E"),



        linear-gradient(135deg, %230d2a1a 0%25, %23162d52 55%25, %230d1f3c 100%25);



}



.page-header.ph-register::before {



    background: radial-gradient(circle, rgba(34,197,94,0.12) 0%, transparent 70%);



}







/* Complaints — red accent */



.page-header.ph-complaints {



    background-image:



        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(255,255,255,0.045)'/%3E%3C/svg%3E"),



        linear-gradient(135deg, %232a0d0d 0%25, %23162d52 55%25, %230d1f3c 100%25);



}



.page-header.ph-complaints::before {



    background: radial-gradient(circle, rgba(192,57,43,0.18) 0%, transparent 65%);



}







/* Contact — blue accent */



.page-header.ph-contact {



    background-image:



        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(255,255,255,0.045)'/%3E%3C/svg%3E"),



        linear-gradient(135deg, %230d1f3c 0%25, %231e3a6a 60%25, %230d2040 100%25);



}



.page-header.ph-contact::before {



    background: radial-gradient(circle, rgba(59,130,246,0.13) 0%, transparent 65%);



}







/* Download — purple accent */



.page-header.ph-download {



    background-image:



        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(255,255,255,0.045)'/%3E%3C/svg%3E"),



        linear-gradient(135deg, %231a0d2e 0%25, %23162d52 55%25, %230d1f3c 100%25);



}



.page-header.ph-download::before {



    background: radial-gradient(circle, rgba(139,92,246,0.14) 0%, transparent 65%);



}







/* Feedback — amber accent */



.page-header.ph-feedback {



    background-image:



        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(255,255,255,0.045)'/%3E%3C/svg%3E"),



        linear-gradient(135deg, %232a1c0d 0%25, %23162d52 55%25, %230d1f3c 100%25);



}



.page-header.ph-feedback::before {



    background: radial-gradient(circle, rgba(251,191,36,0.15) 0%, transparent 65%);



}







/* Mobile */



@media (max-width: 768px) {



    .page-header { padding: 30px 0 25px; }



    .page-header h2 { font-size: 1.7rem; }



    .page-header p { font-size: 0.92rem; }



}







/* ══════════════════════════════════════════



   HOME PAGE — ABOUT + ANNOUNCEMENTS



══════════════════════════════════════════ */



.page-grid {



    display: grid;



    grid-template-columns: 2fr 1fr;



    gap: 52px;



    align-items: start;



}







.content-block { margin-bottom: 32px; }







.content-block h3 {



    font-size: 1.55rem;



    color: var(--navy);



    font-weight: 800;



    margin-bottom: 16px;



    font-family: var(--font-serif);



    line-height: 1.3;



}







.content-block p {



    font-size: 1rem;



    color: var(--text-body);



    margin-bottom: 18px;



    line-height: 1.75;



}







/* Announcements card */



.announcements-card {



    background: var(--navy);



    color: #fff;



    padding: 32px;



    border-radius: var(--radius-lg);



    border: 1px solid rgba(255,255,255,0.05);



    box-shadow: var(--shadow-lg);



}







.announcements-card h4 {



    color: var(--gold-light);



    font-size: 1.05rem;



    margin-bottom: 20px;



    font-weight: 700;



    border-bottom: 1px solid rgba(255,255,255,0.08);



    padding-bottom: 14px;



    display: flex;



    align-items: center;



    gap: 8px;



}







.announcements-card ul {



    list-style: none;



    display: flex;



    flex-direction: column;



    gap: 0;



}







.announcement-item {



    padding: 14px 0;



    border-bottom: 1px solid rgba(255,255,255,0.07);



}







.announcement-item:last-child { border-bottom: none; }







.announcement-item strong {



    color: var(--gold);



    display: block;



    font-size: 0.7rem;



    text-transform: uppercase;



    letter-spacing: 1px;



    margin-bottom: 4px;



}







.announcement-item a {



    color: #d8d0c4;



    font-weight: 500;



    font-size: 0.88rem;



    line-height: 1.5;



    display: block;



    transition: color 0.2s;



}







.announcement-item a:hover { color: var(--gold-light); }







/* ══════════════════════════════════════════



   STATS STRIP



══════════════════════════════════════════ */



.stats-strip {



    display: flex;



    justify-content: space-around;



    gap: 20px;



    margin-top: 30px;



}







.stat-item {



    flex: 1;



    text-align: center;



    padding: 28px 16px;



    background: var(--white);



    border-radius: var(--radius-lg);



    border: 1px solid var(--border);



    box-shadow: var(--shadow-sm);



    transition: transform 0.22s, box-shadow 0.22s;



}







.stat-item:hover {



    transform: translateY(-4px);



    box-shadow: var(--shadow-md);



}







.stat-num {



    font-size: 2.8rem;



    font-weight: 900;



    color: var(--navy);



    line-height: 1;



    font-family: var(--font-serif);



}







.stat-label {



    font-size: 0.82rem;



    font-weight: 700;



    color: var(--text-muted);



    text-transform: uppercase;



    letter-spacing: 1px;



    margin-top: 8px;



}







.stat-icon {



    font-size: 1.6rem;



    color: var(--gold);



    margin-bottom: 10px;



}







/* ══════════════════════════════════════════



   FORMS



══════════════════════════════════════════ */



.form-box {



    background: var(--white);



    border: 1px solid var(--border);



    border-radius: var(--radius-lg);



    padding: 40px;



    box-shadow: var(--shadow-sm);



}







.form-group { margin-bottom: 22px; }







label {



    display: block;



    font-size: 0.82rem;



    font-weight: 700;



    margin-bottom: 7px;



    color: var(--navy);



    text-transform: uppercase;



    letter-spacing: 0.6px;



}







label span { color: var(--red-accent); }







.form-control {



    width: 100%;



    border: 1.5px solid var(--border);



    border-radius: var(--radius);



    padding: 11px 15px;



    font-size: 0.95rem;



    color: var(--text-dark);



    background: var(--white);



    font-family: var(--font-sans);



    transition: border-color 0.2s, box-shadow 0.2s;



}







.form-control:focus {



    outline: none;



    border-color: var(--navy);



    box-shadow: 0 0 0 3px rgba(13,31,60,0.07);



}







.grid-2 {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 22px;



}







/* ══════════════════════════════════════════



   MEMBERS TABLE



══════════════════════════════════════════ */



.members-table-wrapper {



    width: 100%;



    overflow-x: auto;



    border: 1px solid var(--border);



    border-radius: var(--radius-lg);



    background: var(--white);



    box-shadow: var(--shadow-sm);



}







.members-table {



    width: 100%;



    border-collapse: collapse;



    text-align: left;



}







.members-table th {



    background: var(--surface);



    color: var(--navy);



    font-weight: 700;



    font-size: 0.8rem;



    text-transform: uppercase;



    letter-spacing: 0.8px;



    padding: 14px 20px;



    border-bottom: 2px solid var(--border);



}







.members-table td {



    padding: 14px 20px;



    border-bottom: 1px solid var(--border);



    font-size: 0.9rem;



    color: var(--text-body);



}







.members-table tr:last-child td { border-bottom: none; }



.members-table tbody tr:hover { background: var(--surface); }







.member-profile-cell {



    display: flex;



    align-items: center;



    gap: 14px;



}







.member-table-avatar {



    width: 40px;



    height: 40px;



    border-radius: 50%;



    object-fit: cover;



    border: 2px solid var(--border);



}







/* ══════════════════════════════════════════



   FLOATING WIDGETS



══════════════════════════════════════════ */



.floating-widgets {



    position: fixed;



    bottom: 28px;



    right: 28px;



    display: flex;



    flex-direction: column;



    gap: 12px;



    z-index: 1000;



}







.btn-float {



    width: 50px;



    height: 50px;



    border-radius: 50%;



    display: flex;



    align-items: center;



    justify-content: center;



    box-shadow: var(--shadow-md);



    cursor: pointer;



    border: none;



    color: #fff;



    transition: transform 0.2s, box-shadow 0.2s;



}







.btn-whatsapp {



    background: #25D366;



    animation: pulseWA 2.2s infinite;



}







.btn-whatsapp:hover { transform: scale(1.1); background: #20ba5a; }







.btn-back-to-top {



    background: var(--navy);



    opacity: 0;



    visibility: hidden;



    transition: opacity 0.3s, visibility 0.3s, transform 0.2s;



}







.btn-back-to-top.show { opacity: 1; visibility: visible; }



.btn-back-to-top:hover { transform: translateY(-3px); background: var(--gold); }







@keyframes pulseWA {



    0%   { box-shadow: 0 0 0 0   rgba(37,211,102,0.55); }



    70%  { box-shadow: 0 0 0 14px rgba(37,211,102,0); }



    100% { box-shadow: 0 0 0 0   rgba(37,211,102,0); }



}







/* ══════════════════════════════════════════



   FOOTER



══════════════════════════════════════════ */



.site-footer {



    background: var(--navy);



    color: #e4decb;



    padding: 72px 0 36px;



    border-top: 4px solid var(--gold);



    margin-top: auto;



}







.footer-grid {



    display: grid;



    grid-template-columns: 2fr 1fr 1fr;



    gap: 56px;



    margin-bottom: 56px;



}







.footer-about h3,



.footer-links h4 {



    color: var(--white);



    margin-bottom: 20px;



    font-size: 1.1rem;



    font-weight: 700;



}







.footer-about p { color: #d4ccba; font-size: 0.9rem; line-height: 1.75; }







.footer-socials {



    margin-top: 20px;



    display: flex;



    gap: 14px;



}







.footer-socials a {



    color: #c8c0b4;



    font-size: 1.05rem;



    width: 34px;



    height: 34px;



    border-radius: 50%;



    border: 1px solid rgba(255,255,255,0.15);



    display: flex;



    align-items: center;



    justify-content: center;



    transition: color 0.2s, border-color 0.2s, background 0.2s;



}







.footer-socials a:hover {



    color: var(--gold-light);



    border-color: var(--gold);



    background: rgba(201,146,42,0.1);



}







.footer-links ul { list-style: none; }



.footer-links ul li { margin-bottom: 10px; }



.footer-links ul li a { color: #d4ccba; font-size: 0.9rem; transition: color 0.2s, padding-left 0.2s; }



.footer-links ul li a:hover { color: var(--gold-light); padding-left: 4px; }







.footer-contact-item {



    display: flex;



    align-items: flex-start;



    gap: 10px;



    margin-bottom: 12px;



    font-size: 0.88rem;



    color: #d4ccba;



}







.footer-contact-item i { color: var(--gold-light); margin-top: 3px; font-size: 0.8rem; flex-shrink: 0; }







.footer-bottom {



    border-top: 1px solid rgba(255,255,255,0.06);



    padding-top: 28px;



    display: flex;



    justify-content: space-between;



    font-size: 0.82rem;



    color: #a49d8e;



    flex-wrap: wrap;



    gap: 10px;



}







/* ══════════════════════════════════════════



   SCROLL REVEAL



══════════════════════════════════════════ */



.reveal {



    opacity: 0;



    transform: translateY(32px);



    transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);



}







.reveal.visible { opacity: 1; transform: translateY(0); }







.reveal-children > * {



    opacity: 0;



    transform: translateY(22px);



    transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1), transform 0.5s cubic-bezier(0.22,1,0.36,1);



}







.reveal-children.visible > *:nth-child(1) { transition-delay: 0.05s; opacity:1; transform:none; }



.reveal-children.visible > *:nth-child(2) { transition-delay: 0.15s; opacity:1; transform:none; }



.reveal-children.visible > *:nth-child(3) { transition-delay: 0.25s; opacity:1; transform:none; }



.reveal-children.visible > *:nth-child(4) { transition-delay: 0.35s; opacity:1; transform:none; }







/* ══════════════════════════════════════════



   UPLOAD / DROPIFY



══════════════════════════════════════════ */



.dropify-wrapper {



    position: relative;



    width: 100%;



    height: 180px;



    border: 2px dashed var(--border);



    border-radius: var(--radius);



    background: var(--surface);



    display: flex;



    flex-direction: column;



    align-items: center;



    justify-content: center;



    text-align: center;



    cursor: pointer;



    overflow: hidden;



    transition: border-color 0.2s, background 0.2s;



}







.dropify-wrapper:hover { border-color: var(--navy); background: var(--gold-muted); }







.dropify-message { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-muted); }



.dropify-message i { font-size: 2rem; color: var(--gold); }



.dropify-message span { font-size: 0.88rem; font-weight: 600; }







.dropify-preview {



    position: absolute; top: 0; left: 0;



    width: 100%; height: 100%;



    background: var(--white);



    display: none;



    align-items: center;



    justify-content: center;



    z-index: 5;



}







.dropify-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }







.dropify-clear {



    position: absolute; top: 10px; right: 10px;



    background: rgba(13,31,60,0.8);



    color: #fff;



    border: none;



    border-radius: 50%;



    width: 28px; height: 28px;



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



    cursor: pointer;



    z-index: 10;



    transition: background 0.15s;



}







.dropify-clear:hover { background: rgba(192,57,43,0.9); }



.dropify-wrapper.is-invalid { border-color: var(--red-accent) !important; background: rgba(192,57,43,0.03) !important; }







/* Image editor modal */



.image-editor-overlay {



    position: fixed; inset: 0;



    background: rgba(13,31,60,0.82);



    z-index: 1000;



    display: none;



    align-items: center;



    justify-content: center;



    padding: 20px;



}







.image-editor-modal {



    background: var(--white);



    width: 100%;



    max-width: 600px;



    border-radius: var(--radius-lg);



    box-shadow: var(--shadow-lg);



    overflow: hidden;



    display: flex;



    flex-direction: column;



}







.editor-header {



    background: var(--navy);



    color: #fff;



    padding: 16px 22px;



    display: flex;



    justify-content: space-between;



    align-items: center;



}







.editor-header h4 { margin: 0; font-size: 1rem; font-weight: 700; }







.editor-body { padding: 22px; display: flex; flex-direction: column; gap: 18px; }







.cropper-container-box {



    width: 100%; height: 300px;



    background: var(--surface);



    border-radius: var(--radius);



    overflow: hidden;



}







.editor-controls { display: flex; flex-direction: column; gap: 12px; }



.control-row { display: flex; align-items: center; gap: 14px; }



.control-row label { width: 100px; margin-bottom: 0; font-size: 0.78rem; }



.control-row input[type="range"] { flex: 1; cursor: pointer; }







.editor-footer {



    border-top: 1px solid var(--border);



    padding: 14px 22px;



    display: flex;



    justify-content: flex-end;



    gap: 12px;



    background: var(--surface);



}







/* Validation */



.error-msg {



    color: var(--red-accent);



    font-size: 0.8rem;



    font-weight: 600;



    margin-top: 5px;



    display: none;



}







.form-control.is-invalid {



    border-color: var(--red-accent) !important;



    box-shadow: 0 0 0 3px rgba(192,57,43,0.08) !important;



}







/* ══════════════════════════════════════════



   RESPONSIVE (Overrides for Bootstrap integration)



══════════════════════════════════════════ */



@media (max-width: 1024px) {



    .page-grid { grid-template-columns: 1fr; gap: 36px; }



}







@media (max-width: 768px) {



    /* Hero */



    .hero-section { padding: 72px 0 64px; }



    .hero-section h2 { font-size: 1.75rem; }



    .hero-subline { font-size: 0.97rem; }



    .hero-trust { flex-wrap: wrap; gap: 12px; }







    /* Forms */



    .form-box { padding: 24px; }







    /* Stats */



    .stats-strip { flex-direction: column; gap: 14px; }







    /* Footer */



    .footer-bottom { flex-direction: column; text-align: center; }







    .section-padding { padding: 60px 0; }



    



    /* Navbar fix */



    .site-brand img { height: 38px !important; }



    .site-title-h1 { font-size: 1.05rem !important; }



    .site-tagline { font-size: 0.55rem !important; letter-spacing: 1px !important; }



}







@media (max-width: 480px) {



    .hero-section h2 { font-size: 1.45rem; }



    .hero-btns { flex-direction: column; }



    .hero-btns .btn { width: 100%; justify-content: center; }



    .top-contacts { flex-direction: column; gap: 8px; }



    



    .site-brand img { height: 32px !important; }



    .site-title-h1 { font-size: 0.9rem !important; }



}







/* Bootstrap compatibility overrides */



.form-control { width: 100%; } /* ensure custom form controls match bootstrap */



.navbar-toggler:focus { box-shadow: none; outline: none; }



.site-title-box { display: flex; flex-direction: column; line-height: 1.2; }



.site-title-h1 { font-size: 1.25rem; font-weight: 800; color: var(--navy); }



.site-tagline { font-size: 0.68rem; color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; }



@keyframes goldGradientShift {



    0% { background-position: 0% 50%; }



    50% { background-position: 100% 50%; }



    100% { background-position: 0% 50%; }



}







@keyframes breatheGlow {



    0% { 



        box-shadow: 0 0 10px rgba(255,200,0,0.5), 0 0 20px rgba(255,140,0,0.3); 



        transform: scale(1); 



    }



    50% { 



        box-shadow: 0 0 25px rgba(255,200,0,0.8), 0 0 45px rgba(255,140,0,0.6); 



        transform: scale(1.04); 



    }



    100% { 



        box-shadow: 0 0 10px rgba(255,200,0,0.5), 0 0 20px rgba(255,140,0,0.3); 



        transform: scale(1); 



    }



}







.btn-register {



    background: linear-gradient(270deg, #ffcc00, #ff8c00, #ffb300, #ffcc00) !important;



    background-size: 300% 300% !important;



    color: var(--navy) !important;



    font-weight: 900 !important;



    border: 2px solid rgba(255, 255, 255, 0.4) !important;



    border-radius: 50px !important;



    text-transform: uppercase;



    letter-spacing: 1.5px;



    animation: goldGradientShift 3s ease infinite, breatheGlow 2s ease-in-out infinite !important;



    transition: all 0.3s ease !important;



}







.btn-register:hover {



    animation: goldGradientShift 1.5s ease infinite !important;



    transform: scale(1.08) !important;



    box-shadow: 0 0 35px #ffcc00, 0 0 65px #ff9900 !important;



    color: #000 !important;



    border-color: #fff !important;



}

/* Refined Page Header styling matching centered screenshot layout */

.page-header {

    text-align: center !important;

    padding: 35px 0 30px !important;

    position: relative;

    overflow: hidden;

    background: linear-gradient(135deg, %230d1f3c 0%25, %23162d52 55%25, %231a3060 100%25);

    background-image: 

        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(255,255,255,0.03)'/%3E%3C/svg%3E"),

        linear-gradient(135deg, #0d1f3c 0%, #162d52 55%, #1a3060 100%) !important;

    border-bottom: 3px solid var(--gold) !important;

}

.page-header-icon {

    width: 48px;

    height: 48px;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 12px !important;

    font-size: 1.15rem;

    color: var(--gold) !important;

}

.page-breadcrumb {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    font-size: 0.72rem;

    font-weight: 700;

    color: rgba(255, 255, 255, 0.45);

    letter-spacing: 1px;

    margin-bottom: 12px !important;

    text-transform: uppercase;

}

.page-breadcrumb a {

    color: rgba(255, 255, 255, 0.45) !important;

    text-decoration: none;

    transition: color 0.2s;

}

.page-breadcrumb a:hover {

    color: var(--gold) !important;

}

.page-breadcrumb i {

    font-size: 0.6rem;

    color: rgba(255, 255, 255, 0.3);

}

.page-breadcrumb span {

    color: var(--gold) !important;

}

.page-header h2 {

    color: #ffffff !important;

    font-size: 1.85rem !important;

    font-weight: 800 !important;

    margin: 0 auto 14px !important;

    position: relative;

    display: inline-block;

    padding-bottom: 12px !important;

}

.page-header h2::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 40px;

    height: 3px;

    background-color: var(--gold);

    border-radius: 4px;

}

.page-header p {

    color: rgba(255, 255, 255, 0.6) !important;

    font-size: 0.9rem !important;

    max-width: 580px;

    margin: 10px auto 0 !important;

    line-height: 1.45;

}



/* Responsive and compact crop editor modal for mobile */

@media (max-width: 576px) {

    .image-editor-overlay {

        padding: 8px !important;

    }

    .image-editor-modal {

        max-height: 98vh !important;

        overflow-y: auto !important;

        border-radius: 8px !important;

    }

    .editor-header {

        padding: 10px 14px !important;

    }

    .editor-header h4 {

        font-size: 0.9rem !important;

    }

    .editor-body {

        padding: 12px !important;

        gap: 10px !important;

    }

    .cropper-container-box {

        max-height: 200px !important;

    }

    .editor-controls {

        gap: 8px !important;

    }

    .control-row {

        margin-bottom: 4px !important;

        font-size: 0.8rem !important;

    }

    .control-row label {

        font-size: 0.8rem !important;

    }

    .editor-body .btn {

        padding: 6px 12px !important;

        font-size: 0.78rem !important;

    }

    .editor-footer {

        padding: 8px 14px !important;

        background: var(--surface);

    }

    .editor-footer .btn {

        padding: 6px 14px !important;

        font-size: 0.8rem !important;

    }

}


/* Lighter grey placeholder styling */
::placeholder {
    color: #a8a095 !important;
    opacity: 0.6 !important;
}
:-ms-input-placeholder {
    color: #a8a095 !important;
    opacity: 0.6 !important;
}
::-ms-input-placeholder {
    color: #a8a095 !important;
    opacity: 0.6 !important;
}