/* assets/css/style.css */

:root {
    /* --- TTK BRAND COLORS --- */
    --ttk-green:  #017401;
    --ttk-red:    #d40a0a;
    --ttk-gold:   #ebba28;
    --ttk-white:  #ffffff;
    --ttk-black:  #000000;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
}

/* --- 1. TOP BAR (Green Background) --- */
.top-bar {
    background-color: var(--ttk-green);
    font-size: 0.9rem;
}

/* --- 2. NAVIGATION BAR --- */
.navbar {
    background-color: var(--ttk-white);
    border-bottom: 4px solid var(--ttk-gold); /* Gold Line */
}

.text-ttk-green { color: var(--ttk-green); }
.text-ttk-gold { color: var(--ttk-gold); }

.nav-link {
    color: var(--ttk-black) !important;
    font-weight: 600;
    margin-right: 15px;
    transition: color 0.3s;
}

.nav-link:hover {
    color: var(--ttk-green) !important; /* Turns green on hover */
}

/* --- 3. DONATE BUTTON --- */
.btn-donate {
    background-color: var(--ttk-red);
    color: white;
    font-weight: bold;
    border-radius: 20px;
    padding: 8px 25px;
    transition: transform 0.2s, background-color 0.2s;
}

.btn-donate:hover {
    background-color: #b00000; /* Darker Red */
    transform: scale(1.05); /* Grows slightly */
    color: white;
}

/* --- 4. INTERACTIVE SOCIAL ICONS (The "Interactive" Request) --- */
.social-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.2); /* Semi-transparent white */
    color: white;
    margin-left: 8px;
    text-decoration: none;
    transition: all 0.3s ease; /* Smooth transition */
}

/* Hover Effects */
.social-link:hover {
    transform: translateY(-3px) rotate(360deg); /* Lifts up and spins! */
    color: white;
}

/* Specific Colors on Hover */
.social-link.facebook:hover  { background-color: #1877F2; }
.social-link.twitter:hover   { background-color: #1DA1F2; }
.social-link.instagram:hover { background-color: #E1306C; }
.social-link.tiktok:hover    { background-color: #000000; }
/* Logo Enhancements */
.navbar-brand img {
    transition: transform 0.3s ease;
}

.navbar-brand:hover img {
    transform: scale(1.05); /* Subtle zoom effect when hovering the logo */
}

/* Ensure navbar accommodates larger logo */
.navbar {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}