* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Noto Sans', 'Hind Siliguri', sans-serif;
        }

        :root {
            --saffron: #FF9933;
            --white: #FFFFFF;
            --green: #138808;
            --blue: #971e2a;
            --dark-blue: #004280;
            --light-blue: #e0f0ff;
            --gray: #f5f5f5;
            --dark-gray: #444;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        body {
            background-color: var(--gray);
            color: #333;
            line-height: 1.6;
            overflow-x: hidden;
        }

        /* Top Header Styles */
        .top-header {
            background: linear-gradient(to right, var(--saffron), var(--white), var(--green));
            padding: 8px 0;
            font-size: 14px;
            border-bottom: 2px solid #ddd;
            position: relative;
        }

        .top-header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .national-emblem {
            display: flex;
            align-items: center;
        }

        .national-emblem img {
            height: 40px;
            margin-right: 10px;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
        }

        .emblem-text {
            font-weight: bold;
            color: var(--blue);
            font-size: 16px;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }

        .top-header-right {
            display: flex;
            gap: 20px;
        }

        .language-selector select {
            padding: 6px 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background: white;
            cursor: pointer;
            transition: all 0.3s;
        }

        .language-selector select:hover {
            border-color: var(--blue);
        }

        .accessibility-options a {
            color: var(--blue);
            text-decoration: none;
            margin-left: 10px;
            padding: 4px 8px;
            border-radius: 4px;
            transition: all 0.3s;
        }

        .accessibility-options a:hover {
            background: rgba(0, 102, 179, 0.1);
        }

        /* Main Header Styles */
        .main-header {
            background: linear-gradient(to bottom, #edeff1, #ffffff);
            color: #000000;
            padding: 15px 0;
            position: relative;
            box-shadow: var(--shadow);
        }

        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .logo-container {
            display: flex;
            align-items: center;
        }

        .logo {
            width: 90px;
            height: 90px;
            margin-right: 15px;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
            transition: transform 0.3s;
        }

        .logo:hover {
            transform: scale(1.05);
        }

        .website-title h1 {
            font-size: 24px;
            font-weight: bold;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .website-title p {
            font-size: 14px;
            opacity: 0.9;
        }

        .search-box {
            display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
        }

        .search-box input {
            padding: 10px 15px;
            border: none;
            border-radius: 4px 0 0 4px;
            width: 250px;
            font-size: 14px;
        }

        .search-box button {
            background: #c99a40;
            border: none;
            padding: 10px 15px;
            border-radius: 0 4px 4px 0;
            color: white;
            cursor: pointer;
            transition: all 0.3s;
        }

        .search-box button:hover {
            background: #e5892a;
        }

        /* Navigation Styles */
        .main-nav {
            background: #971e2a;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: var(--shadow);
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .nav-menu {
            display: flex;
            list-style: none;
        }

        .nav-item {
            position: relative;
        }

        .nav-link {
            display: block;
            color: white;
            text-decoration: none;
            padding: 15px 20px;
            transition: all 0.3s;
            font-weight: 500;
            position: relative;
            font-size: 15px;
        }

        .nav-link:hover {
            background-color: #00264d;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 3px;
            background: var(--saffron);
            transition: all 0.3s;
            transform: translateX(-50%);
        }

        .nav-link:hover::after,
        .nav-link.active::after {
            width: 80%;
        }

        .nav-link.active {
            background-color: #00264d;
        }

        .dropdown-menu {
            display: none;
            position: absolute;
            background-color: white;
            box-shadow: var(--shadow);
            min-width: 220px;
            z-index: 1000;
            border-top: 3px solid var(--saffron);
            border-radius: 0 0 4px 4px;
            overflow: hidden;
            animation: fadeIn 0.3s ease;
        }

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

        .dropdown-item {
            display: block;
            padding: 12px 20px;
            color: #333;
            text-decoration: none;
            border-bottom: 1px solid #eee;
            transition: all 0.3s;
        }

        .dropdown-item:hover {
            background-color: var(--light-blue);
            color: var(--blue);
            padding-left: 25px;
        }

        .dropdown-item i {
            margin-right: 8px;
            color: var(--blue);
        }

        .nav-item:hover .dropdown-menu {
            display: block;
        }

        /* Mobile Menu */
        .mobile-menu-btn {
            display: none;
            background: #971e2a;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            padding: 10px;
            border-radius: 4px;
            transition: all 0.3s;
        }

        .mobile-menu-btn:hover {
            background: #d38f3e;
        }

        /* Content Styles */
        .content {
            max-width: 1200px;
            margin: 30px auto;
            padding: 0 20px;
        }

        .content h2 {
            color: var(--blue);
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--saffron);
            position: relative;
        }

        .content h2::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 60px;
            height: 2px;
            background: var(--green);
        }

        .card-container {
            display: flex;
            gap: 20px;
            margin-top: 30px;
            flex-wrap: wrap;
        }

        .card {
            flex: 1;
            min-width: 250px;
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: transform 0.3s;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        .card-header {
            background: var(--blue);
            color: white;
            padding: 15px;
            font-weight: 600;
        }

        .card-body {
            padding: 20px;
        }

        .card-body ul {
            list-style: none;
        }

        .card-body li {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }

        .card-body li:last-child {
            border-bottom: none;
        }

        .card-body a {
            color: var(--dark-gray);
            text-decoration: none;
            transition: all 0.3s;
            display: flex;
            align-items: center;
        }

        .card-body a:hover {
            color: var(--blue);
            padding-left: 5px;
        }

        .card-body a i {
            margin-right: 8px;
            color: var(--blue);
        }

        /* Footer Styles */
        .main-footer {
            background: linear-gradient(to bottom, #971e2a, #00152c);
            color: white;
            padding: 50px 0 20px;
            margin-top: 40px;
            position: relative;
            overflow: hidden;
        }

        .main-footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(to right, var(--saffron), var(--white), var(--green));
        }

        .footer-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            position: relative;
            z-index: 1;
        }

        .footer-columns {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 20px;
        }

        .footer-column {
            flex: 1;
            min-width: 220px;
            margin-bottom: 30px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .footer-column:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            background: rgba(255, 255, 255, 0.08);
        }

        .footer-column h3 {
            font-size: 18px;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--saffron);
            position: relative;
            display: flex;
            align-items: center;
        }

        .footer-column h3 i {
            margin-right: 10px;
            color: var(--saffron);
        }

        .footer-column h3::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 40px;
            height: 2px;
            background: var(--green);
        }

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

        .footer-links li {
            margin-bottom: 12px;
            position: relative;
            padding-left: 15px;
        }

        .footer-links li::before {
            content: '•';
            color: var(--saffron);
            position: absolute;
            left: 0;
            top: 0;
        }

        .footer-links a {
            color: #ccc;
            text-decoration: none;
            transition: all 0.3s;
            display: block;
            padding: 5px 0;
        }

        .footer-links a:hover {
            color: white;
            padding-left: 5px;
        }

        .contact-info li {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            padding-left: 0;
        }

        .contact-info li::before {
            display: none;
        }

        .contact-info i {
            margin-right: 10px;
            color: var(--saffron);
            width: 20px;
            font-size: 16px;
        }

        .social-links {
            display: flex;
            gap: 12px;
            margin-top: 20px;
        }

        .social-links a {
            color: white;
            background: linear-gradient(145deg, var(--blue), var(--dark-blue));
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: all 0.3s;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: hidden;
        }

        .social-links a::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(145deg, var(--saffron), #e5892a);
            opacity: 0;
            transition: opacity 0.3s;
            border-radius: 50%;
        }

        .social-links a:hover::before {
            opacity: 1;
        }

        .social-links a i {
            position: relative;
            z-index: 1;
        }

        .social-links a:hover {
            transform: translateY(-3px) rotate(5deg);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
        }

        .footer-newsletter {
            display: flex;
            margin-top: 15px;
        }

        .footer-newsletter input {
            flex: 1;
            padding: 10px 15px;
            border: none;
            border-radius: 4px 0 0 4px;
            background: rgba(255, 255, 255, 0.1);
            color: white;
        }

        .footer-newsletter input::placeholder {
            color: #ccc;
        }

        .footer-newsletter button {
            background: var(--saffron);
            border: none;
            padding: 10px 15px;
            border-radius: 0 4px 4px 0;
            color: white;
            cursor: pointer;
            transition: all 0.3s;
        }

        .footer-newsletter button:hover {
            background: #e5892a;
        }

        .national-symbol {
            display: flex;
            justify-content: center;
            margin: 30px 0 20px;
        }

        .national-symbol img {
            width: 100px;
            height: 100px;
            filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
            transition: transform 0.5s;
        }

        .national-symbol img:hover {
            transform: scale(1.1);
        }

        .footer-bottom {
            text-align: center;
            padding-top: 20px;
            margin-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 14px;
            color: #ccc;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .footer-bottom-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .footer-bottom-links a {
            color: #ccc;
            text-decoration: none;
            transition: color 0.3s;
        }

        .footer-bottom-links a:hover {
            color: var(--saffron);
        }

        /* Responsive Styles */
        @media (max-width: 992px) {
            .nav-menu {
                flex-wrap: wrap;
            }
            
            .footer-column {
                flex: 0 0 48%;
            }
            
            .search-box input {
                width: 200px;
            }
        }

        @media (max-width: 768px) {
            .top-header-container {
                flex-direction: column;
                gap: 10px;
            }
            
            .header-container {
                flex-direction: column;
                text-align: center;
            }
            
            .logo-container {
                margin-bottom: 15px;
            }
            
            .search-box {
                margin-top: 15px;
                width: 100%;
            }
            
            .search-box input {
                width: 100%;
            }
            
            .mobile-menu-btn {
                display: block;
                position: absolute;
                top: 20px;
                right: 20px;
            }
            
            .nav-menu {
                display: none;
                flex-direction: column;
            }
            
            .nav-menu.active {
                display: flex;
            }
            
            .nav-item {
                width: 100%;
            }
            
            .dropdown-menu {
                position: static;
                width: 100%;
                box-shadow: none;
            }
            
            .footer-column {
                flex: 0 0 100%;
            }
            
            .card {
                min-width: 100%;
            }
            
            .footer-bottom-links {
                flex-direction: column;
                gap: 10px;
            }
        }

      /* Latest Announcement Styles */
    .announcement-container {
        background: linear-gradient(to right, #1e8397, #771f63);
        color: white;
        margin-top: 10px;
        padding: 12px 0;
        position: relative;
        overflow: hidden;
        border-bottom: 2px solid var(--saffron);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    
    .announcement-label {
        position: absolute;
        left: 0;
        top: 0;
        background: #6c4053;
        color: white;
        padding: 12px 15px;
        font-weight: 600;
        z-index: 10;
        display: flex;
        align-items: center;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
    }
    
    .announcement-label::after {
        content: '';
        position: absolute;
        top: 0;
        right: -15px;
        width: 0;
        height: 0;
        border-top: 24px solid transparent;
        border-left: 15px solid #6c4053;
        border-bottom: 24px solid transparent;
    }
    
    .new-badge {
        background: white;
        color: var(--blue);
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 10px;
        margin-left: 8px;
        font-weight: bold;
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
        70% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }
        100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
    }
    
    .announcement-scroll {
        white-space: nowrap;
        padding-left: 140px;
    }
    
    .announcement-text {
        display: inline-block;
        padding-left: 100%;
        animation: scroll 60s linear infinite;
        font-size: 15px;
        font-weight: 500;
    }
    
    .announcement-text i {
        color: var(--saffron);
        margin-right: 10px;
    }
    
    @keyframes scroll {
        0% { transform: translate(0, 0); }
        100% { transform: translate(-100%, 0); }
    }
    
    .announcement-text:hover {
        animation-play-state: paused;
    }
    
    .announcement-container:hover .announcement-text i {
        animation: bounce 0.5s;
    }
    
    @keyframes bounce {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(-3px); }
    }


    
    /* New Blinking Dot Styles */
    .blinking-dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: var(--saffron);
        margin: 0 15px;
        position: relative;
        vertical-align: middle;
        animation: blink 1.5s infinite;
        box-shadow: 0 0 5px var(--saffron);
    }
    
    @keyframes blink {
        0% { 
            opacity: 0.2;
            transform: scale(0.8);
        }
        20% {
            opacity: 1;
            transform: scale(1.2);
            box-shadow: 0 0 10px var(--saffron), 0 0 20px var(--saffron);
        }
        100% { 
            opacity: 0.2;
            transform: scale(0.8);
        }
    }
    
    .blinking-dot::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 2px solid var(--saffron);
        transform: translate(-50%, -50%);
        opacity: 0;
        animation: pulse-ring 1.5s infinite;
    }
    
    @keyframes pulse-ring {
        0% {
            opacity: 0.7;
            width: 10px;
            height: 10px;
        }
        90% {
            opacity: 0;
            width: 30px;
            height: 30px;
        }
        100% {
            opacity: 0;
            width: 30px;
            height: 30px;
        }
    }

      .datetime-display {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 500;
        color: var(--blue);
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        background: rgba(255, 255, 255, 0.2);
        padding: 6px 12px;
        border-radius: 4px;
    }
    
    .datetime-display i {
        color: #a24612;
        font-size: 14px;
    }
    
    #current-date, #current-time {
        margin-right: 10px;
        font-size: 14px;
    }

  /* Featured Section Styles */
    .featured-section {
        padding: 20px;
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .featured-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-top: 20px;
    }
    
    .featured-box {
        background: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s;
    }
    
    .featured-box:hover {
        transform: translateY(-5px);
    }
    
    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        background: linear-gradient(to right, var(--blue), #7a1a25);
        color: white;
    }
    
    .section-header h3 {
        margin: 0;
        font-size: 18px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    /* Video Slider Styles */
/* Video Slider Styles */
.video-slider-container {
    position: relative;
    width: 100%;
    height: 340px;
    overflow: hidden;
}

.video-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.video-slide.active {
    opacity: 1;
}

.video-thumbnail {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.video-thumbnail:hover img {
    transform: scale(1.05);
}

.youtube-video-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 56.25%; /* Maintain 16:9 aspect ratio */
    overflow: hidden;
}

.youtube-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(151, 30, 42, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 5;
}

.play-btn:hover {
    background: var(--blue);
    transform: translate(-50%, -50%) scale(1.1);
}

.video-info {
    padding: 15px;
}

.video-info h4 {
    margin: 0 0 8px 0;
    color: var(--blue);
}

.video-info p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

.slider-controls {
    display: flex;
    gap: 8px;
}

.auto-play-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 8px;
    border-radius: 4px;
}

.slider-indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 15px;
}

.indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ddd;
    cursor: pointer;
    transition: all 0.3s;
}

.indicator.active {
    background: var(--blue);
    transform: scale(1.2);
}

.video-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

.video-progress {
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: var(--saffron);
    border-radius: 2px;
    transition: width 0.1s linear;
}

/* Responsive Styles */
@media (max-width: 992px) {
    .video-slider-container {
        height: 300px;
    }

    .video-thumbnail {
        height: 210px;
    }
}

@media (max-width: 576px) {
    .video-slider-container {
        height: 260px;
    }

    .video-thumbnail {
        height: 170px;
    }

    .video-info h4 {
        font-size: 16px;
    }
}
    
    /* Breaking News Styles */
    .breaking-news {
        display: flex;
        flex-direction: column;
    }
    
    .live-indicator {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        font-weight: bold;
        background: rgba(255, 0, 0, 0.2);
        padding: 4px 8px;
        border-radius: 4px;
    }
    
    .live-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ff0000;
        animation: blink 1s infinite;
    }
    
    .news-container {
        height: 340px;
        overflow: hidden;
        position: relative;
        background: #f9f9f9;
    }
    
    .news-ticker {
        position: absolute;
        width: 100%;
        animation: newsScroll 15s linear infinite;
    }
    
    .news-item {
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        gap: 15px;
        background: white;
        transition: all 0.3s;
    }
    
    .news-item:hover {
        background: #f0f7ff;
    }

   
    
    .news-time {
        background: linear-gradient(to right, var(--blue), var(--dark-blue));
        color: white;
        padding: 4px 8px;
        border-radius: 10px;
        font-size: 12px;
        font-weight: bold;
        min-width: 70px;
        text-align: center;
    }
    
    .news-text {
        flex: 1;
        font-weight: 500;
    }
    
    @keyframes newsScroll {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-50%);
        }
    }
    
    /* Pause animation on hover */
    .news-container:hover .news-ticker {
        animation-play-state: paused;
    }
    
    /* Responsive Styles */
    @media (max-width: 992px) {
        .featured-container {
            grid-template-columns: 1fr;
        }
        
        .video-slider-container,
        .news-container {
            height: 300px;
        }
    }
    
    @media (max-width: 576px) {
        .video-info h4 {
            font-size: 16px;
        }
        
        .news-item {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }
        
        .news-time {
            align-self: flex-start;
        }

    }

.youtube-video-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.youtube-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Image Slider Styles */
/* Image Slider Styles */
.image-slider-section {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.image-slider-container {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Image box wider than content box */
    gap: 20px;
    width: 100%;
    height: 400px;
    margin: 20px 0;
    background: #f5f5f5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

.image-slider-left {
    position: relative;
    overflow: hidden;
}

.image-slider-right {
    background: linear-gradient(135deg, #104158, #663c0a);
    color: white;
    padding: 20px;
    position: relative;
    border-left: 3px solid var(--saffron);
    overflow: hidden;
}


.image-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: slideShow 18s infinite;
}

.image-slide:nth-child(1) {
    animation-delay: 0s;
}

.image-slide:nth-child(2) {
    animation-delay: 6s;
}

.image-slide:nth-child(3) {
    animation-delay: 12s;
}

@keyframes slideShow {
    0% { opacity: 0; }
    5% { opacity: 1; }
    33.33% { opacity: 1; }
    38.33% { opacity: 0; }
    100% { opacity: 0; }
}

.image-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.5s ease;
    filter: brightness(0.85);
}

.image-slide:hover img {
    transform: scale(1.05);
    filter: brightness(1);
}

.image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    color: white;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-slide:nth-child(1) .image-overlay,
.image-slide:nth-child(2) .image-overlay,
.image-slide:nth-child(3) .image-overlay {
    animation: overlayShow 18s infinite;
}

.image-slide:nth-child(1) .image-overlay {
    animation-delay: 0s;
}

.image-slide:nth-child(2) .image-overlay {
    animation-delay: 6s;
}

.image-slide:nth-child(3) .image-overlay {
    animation-delay: 12s;
}

@keyframes overlayShow {
    0% { opacity: 0; }
    5% { opacity: 1; }
    33.33% { opacity: 1; }
    38.33% { opacity: 0; }
    100% { opacity: 0; }
}

.image-overlay h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.image-overlay p {
    margin: 5px 0 0;
    font-size: 13px;
    opacity: 0.9;
    margin-bottom: 15px;
}

.content-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    opacity: 0;
    animation: contentShow 18s infinite;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-slide:nth-child(1) {
    animation-delay: 0s;
}

.content-slide:nth-child(2) {
    animation-delay: 6s;
}

.content-slide:nth-child(3) {
    animation-delay: 12s;
}

@keyframes contentShow {
    0% { opacity: 0; }
    5% { opacity: 1; }
    33.33% { opacity: 1; }
    38.33% { opacity: 0; }
    100% { opacity: 0; }
}

.content-slide h4 {
    font-size: 24px;
    margin-bottom: 12px;
    position: relative;
    padding-bottom: 8px;
}

.content-slide h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--saffron);
}

.content-slide p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 15px;
}

.content-slide a {
    display: inline-block;
    padding: 8px 16px;
    background: var(--saffron);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s, transform 0.3s;
    font-size: 13px;
}

.content-slide a:hover {
    background: #e5892a;
    transform: translateY(-2px);
}
.image-slider-indicators {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.image-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.3s;
    border: 1px solid var(--saffron);
}

.image-indicator:nth-child(1) {
    animation: indicatorShow 18s infinite 0s;
}

.image-indicator:nth-child(2) {
    animation: indicatorShow 18s infinite 6s;
}

.image-indicator:nth-child(3) {
    animation: indicatorShow 18s infinite 12s;
}

@keyframes indicatorShow {
    0% { background: rgba(255, 255, 255, 0.5); transform: scale(1); }
    5% { background: var(--saffron); transform: scale(1.3); }
    33.33% { background: var(--saffron); transform: scale(1.3); }
    38.33% { background: rgba(255, 255, 255, 0.5); transform: scale(1); }
    100% { background: rgba(255, 255, 255, 0.5); transform: scale(1); }
}

/* Responsive Styles */
@media (max-width: 992px) {
    .image-slider-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
        min-height: 500px;
    }
    .image-slider-left {
        position: relative;
        overflow: hidden;
        height: 300px;
    }
    .image-slide {
        width: 100%;
        height: 100%;
    }
    .image-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }
    .image-overlay {
        opacity: 1;
        padding: 10px;
    }
    .image-overlay h4 {
        font-size: 18px;
    }
    .image-overlay p {
        font-size: 12px;
    }
    .image-slider-right {
        height: auto;
        min-height: 200px;
        padding: 15px;
        display: flex;
        align-items: center;
    }
   .content-slide h4 {
        font-size: 20px;
    }

    .content-slide p {
        font-size: 13px;
    }
    .image-slider-indicators {
        bottom: 10px;
    }
}

@media (max-width: 576px) {
    .image-slider-container {
        grid-template-rows: auto auto;
        min-height: 400px;
    }
    .image-slider-left {
        height: 200px;
    }
    .image-slide {
        width: 100%;
        height: 100%;
    }
    .image-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }
    .image-overlay {
        padding: 8px;
        opacity: 1;
    }
    .image-overlay h4 {
        font-size: 16px;
    }
    .image-overlay p {
        font-size: 11px;
    }
    .image-slider-right {
        padding: 10px;
        min-height: 180px;
    }
   .content-slide h4 {
        font-size: 18px;
    }

    .content-slide p {
        font-size: 12px;
    }

    .content-slide a {
        padding: 6px 12px;
        font-size: 12px;
    }
    .image-slider-indicators {
        bottom: 8px;
    }
    .image-indicator {
        width: 8px;
        height: 8px;
    }
}

.star {
  font-size: 25px;              /* size of the star */
  display: inline-block;
  background: linear-gradient(45deg, #ff0057, #ff7b00, #00c6ff, #7b00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: spin 4s linear infinite, flash 1s ease-in-out infinite alternate;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes flash {
  from { opacity: 1; }
  to   { opacity: 0.3; }
}


 /* Button Grid Section Styles */
    .button-grid-section {
        padding: 40px 20px;
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .section-title {
        text-align: center;
        margin-bottom: 40px;
        position: relative;
        padding-bottom: 15px;
    }
    
    .section-title h2 {
        color: var(--blue);
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 10px;
    }
    
    .section-title p {
        color: #666;
        font-size: 18px;
        max-width: 700px;
        margin: 0 auto;
    }
    
    .section-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background: linear-gradient(to right, var(--saffron), var(--green));
        border-radius: 2px;
    }
    
    .button-grid-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        margin-top: 20px;
    }
    
    .grid-button {
        position: relative;
        height: 200px;
        border-radius: 12px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        transition: all 0.4s ease;
        background: linear-gradient(135deg, var(--blue), #7a1a25);
    }
    
    .grid-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg, rgba(151, 30, 42, 0.8), rgba(0, 66, 128, 0.8));
        opacity: 0.9;
        transition: all 0.4s ease;
    }
    
    .grid-button:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    }
    
    .grid-button:hover::before {
        opacity: 0.95;
    }
    
    .button-content {
        position: relative;
        z-index: 2;
        text-align: center;
        padding: 20px;
        color: white;
    }
    
    .button-icon {
        font-size: 40px;
        margin-bottom: 15px;
        color: var(--saffron);
        transition: all 0.3s ease;
    }
    
    .grid-button:hover .button-icon {
        transform: scale(1.2) rotate(5deg);
        color: white;
    }
    
    .button-title {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 10px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    .button-description {
        font-size: 14px;
        opacity: 0.9;
        line-height: 1.5;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .button-badge {
        position: absolute;
        top: 15px;
        right: 15px;
        background: var(--saffron);
        color: white;
        font-size: 12px;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 20px;
        z-index: 3;
        animation: pulse 2s infinite;
    }
    
    /* Responsive Styles */
    @media (max-width: 768px) {
        .button-grid-container {
            grid-template-columns: 1fr;
            gap: 20px;
        }
        
        .grid-button {
            height: 180px;
        }
        
        .section-title h2 {
            font-size: 28px;
        }
        
        .section-title p {
            font-size: 16px;
        }
    }
    
    @media (max-width: 480px) {
        .grid-button {
            height: 160px;
        }
        
        .button-title {
            font-size: 20px;
        }
        
        .button-icon {
            font-size: 35px;
        }
    }

 /* Digital Initiatives Section Styles */
    .digital-initiatives {
        padding: 60px 20px;
        background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
        position: relative;
        overflow: hidden;
    }
    
    .digital-initiatives::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(to right, var(--saffron), var(--white), var(--green));
    }
    
    .initiatives-container {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .initiatives-header {
        text-align: center;
        margin-bottom: 50px;
        position: relative;
    }
    
    .initiatives-header h2 {
        font-size: 36px;
        color: var(--blue);
        margin-bottom: 15px;
        position: relative;
        display: inline-block;
    }
    
    .initiatives-header h2::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background: linear-gradient(to right, var(--saffron), var(--green));
        border-radius: 2px;
    }
    
    .initiatives-header p {
        font-size: 18px;
        color: #555;
        max-width: 700px;
        margin: 0 auto;
    }
    
    .initiatives-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 30px;
        margin-top: 30px;
    }
    
    .initiative-card {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        transition: all 0.4s ease;
        position: relative;
        height: 380px;
        display: flex;
        flex-direction: column;
    }
    
    .initiative-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    }
    
    .card-image {
        height: 160px;
        overflow: hidden;
        position: relative;
    }
    
    .card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
    
    .initiative-card:hover .card-image img {
        transform: scale(1.05);
    }
    
    .card-badge {
        position: absolute;
        top: 15px;
        right: 15px;
        background: var(--saffron);
        color: white;
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        z-index: 2;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }
    
    .card-content {
        padding: 20px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
    
    .card-content h3 {
        color: var(--blue);
        margin-bottom: 12px;
        font-size: 20px;
        position: relative;
        padding-bottom: 10px;
    }
    
    .card-content h3::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 40px;
        height: 3px;
        background: var(--saffron);
        border-radius: 2px;
    }
    
    .card-content p {
        color: #555;
        margin-bottom: 20px;
        line-height: 1.6;
        flex-grow: 1;
    }
    
    .progress-container {
        margin-bottom: 20px;
    }
    
    .progress-info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        font-size: 14px;
        color: #666;
    }
    
    .progress-bar {
        height: 8px;
        background: #e9ecef;
        border-radius: 4px;
        overflow: hidden;
    }
    
    .progress-fill {
        height: 100%;
        background: linear-gradient(to right, var(--blue), var(--saffron));
        border-radius: 4px;
        position: relative;
        overflow: hidden;
    }
    
    .progress-fill::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-image: linear-gradient(
            -45deg, 
            rgba(255, 255, 255, 0.2) 25%, 
            transparent 25%, 
            transparent 50%, 
            rgba(255, 255, 255, 0.2) 50%, 
            rgba(255, 255, 255, 0.2) 75%, 
            transparent 75%, 
            transparent
        );
        z-index: 1;
        background-size: 20px 20px;
        animation: move 1s linear infinite;
    }
    
    @keyframes move {
        0% { background-position: 0 0; }
        100% { background-position: 20px 0; }
    }
    
    .card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: auto;
    }
    
    .stats {
        display: flex;
        gap: 15px;
    }
    
    .stat-item {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 13px;
        color: #666;
    }
    
    .stat-item i {
        color: var(--blue);
    }
    
    .card-action {
        background: var(--blue);
        color: white;
        text-decoration: none;
        padding: 8px 16px;
        border-radius: 4px;
        font-size: 14px;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    
    .card-action:hover {
        background: var(--dark-blue);
        transform: translateY(-2px);
    }
    
    .initiatives-cta {
        text-align: center;
        margin-top: 50px;
    }
    
    .cta-button {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: linear-gradient(to right, var(--blue), var(--dark-blue));
        color: white;
        text-decoration: none;
        padding: 12px 30px;
        border-radius: 30px;
        font-weight: 600;
        transition: all 0.3s ease;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    
    .cta-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        background: linear-gradient(to right, var(--dark-blue), var(--blue));
    }
    
    /* Responsive Styles */
    @media (max-width: 768px) {
        .initiatives-grid {
            grid-template-columns: 1fr;
        }
        
        .initiative-card {
            height: auto;
        }
        
        .initiatives-header h2 {
            font-size: 28px;
        }
        
        .initiatives-header p {
            font-size: 16px;
        }
    }

    /* Membership & Donation Section - Unique Classes */
    .upm-membership-section {
        padding: 3rem 2rem;
        background: linear-gradient(to bottom, #f0f4f8, #e2e8f0);
        position: relative;
        overflow: hidden;
        margin: 2rem 0;
    }

    .upm-membership-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(to right, #ff9933, #ffffff, #138808);
        z-index: 1;
    }

    .upm-section-title {
        text-align: center;
        margin-bottom: 3rem;
        position: relative;
    }

    .upm-section-title h2 {
        font-size: 2.2rem;
        color: #ae6652;
        margin-bottom: 0.5rem;
        font-weight: 700;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    }

    .upm-section-title p {
        color: #546e7a;
        font-size: 1.1rem;
        max-width: 600px;
        margin: 0 auto;
    }

    .upm-button-grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
        max-width: 1200px;
        margin: 0 auto;
    }

    .upm-grid-button {
        display: block;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        position: relative;
        text-decoration: none;
        color: white;
        height: 100%;
        border: none;
    }

    .upm-grid-button:hover {
        transform: translateY(-7px) scale(1.02);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        color: white;
    }

    .upm-grid-button:active {
        transform: translateY(-3px) scale(1.01);
    }

    .upm-button-badge {
        position: absolute;
        top: 15px;
        right: 15px;
        background: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(10px);
        color: white;
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        z-index: 2;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .upm-button-content {
        padding: 25px 20px;
        position: relative;
        z-index: 2;
    }

    .upm-button-icon {
        width: 60px;
        height: 60px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        color: white;
        font-size: 1.5rem;
        transition: all 0.3s ease;
        backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .upm-grid-button:hover .upm-button-icon {
        transform: scale(1.15) rotate(5deg);
        background: rgba(255, 255, 255, 0.3);
    }

    .upm-button-title {
        font-size: 1.3rem;
        color: white;
        margin-bottom: 12px;
        font-weight: 600;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    }

    .upm-button-description {
        color: rgba(255, 255, 255, 0.9);
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 20px;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    }

    .upm-button-hover-effect {
        display: flex;
        align-items: center;
        color: white;
        font-weight: 600;
        font-size: 0.9rem;
        opacity: 0.8;
        transform: translateY(10px);
        transition: all 0.3s ease;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    }

    .upm-grid-button:hover .upm-button-hover-effect {
        opacity: 1;
        transform: translateY(0);
    }

    .upm-button-hover-effect i {
        margin-left: 8px;
        transition: transform 0.3s ease;
    }

    .upm-grid-button:hover .upm-button-hover-effect i {
        transform: translateX(4px);
    }

    .upm-button-shine {
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
        transform: rotate(45deg) translateY(-200%);
        transition: transform 0.8s ease;
    }

    .upm-grid-button:hover .upm-button-shine {
        transform: rotate(45deg) translateY(100%);
    }

    /* Beautiful gradient backgrounds for each button */
    .upm-grid-button:nth-child(1) {
        background: linear-gradient(135deg, #500f30 0%, #333c70 50%, #9fa8da 100%);
    }
    
    .upm-grid-button:nth-child(2) {
        background: linear-gradient(135deg, #00695c 0%, #00897b 50%, #26a69a 100%);
    }
    
    .upm-grid-button:nth-child(3) {
        background: linear-gradient(135deg, #37474f 0%, #546e7a 50%, #78909c 100%);
    }
    
    .upm-grid-button:nth-child(4) {
        background: linear-gradient(135deg, #850f0f 0%, #9f120f 50%, #ef5350 100%);
    }
    
    .upm-grid-button:nth-child(5) {
        background: linear-gradient(135deg, #8b530a 0%, #9a7215 50%, #ffca28 100%);
    }
    
    .upm-grid-button:nth-child(6) {
        background: linear-gradient(135deg, #7b093a 0%, #a01e4d 50%, #9575cd 100%);
    }
    
    .upm-grid-button:nth-child(7) {
        background: linear-gradient(135deg, #0e4473 0%, #1d4f88 50%, #9fa8da 100%);
    }

    /* Add a subtle pattern overlay to each button */
    .upm-grid-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
        background-size: 10px 10px;
        z-index: 1;
        opacity: 0.5;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .upm-button-grid-container {
            grid-template-columns: 1fr;
            gap: 1.2rem;
        }
        
        .upm-membership-section {
            padding: 2rem 1rem;
        }
        
        .upm-section-title h2 {
            font-size: 1.8rem;
        }
    }


    /* Administrative Council Section - Stunning Design */
.admin-council-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #0c246100 0%, #1e379900 30%, #191a1b00 70%);
    font-family: 'Montserrat', sans-serif;
    position: relative;
    overflow: hidden;
}

.admin-council-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.05" d="M0,128L48,117.3C96,107,192,85,288,112C384,139,480,213,576,218.7C672,224,768,160,864,138.7C960,117,1056,139,1152,149.3C1248,160,1344,160,1392,160L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
    background-size: cover;
    background-position: bottom;
    opacity: 0.7;
}

.admin-council-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.admin-section-header {
    text-align: center;
    margin-bottom: 70px;
}

.admin-section-header h2 {
    font-size: 3.2rem;
    font-weight: 700;
    color: #1b565f;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.admin-section-header h2::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 5px;
    background: linear-gradient(90deg, #0080ff, #ff6a00);
    border-radius: 3px;
    animation: linePulse 2s infinite;
}

@keyframes linePulse {
    0%, 100% { width: 100px; }
    50% { width: 150px; }
}

.admin-section-header p {
    font-size: 1.2rem;
    color: rgb(105 36 36 / 85%);
    margin-top: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* Filter Buttons */
.admin-council-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 60px;
    gap: 15px;
}

.admin-filter-btn {
    padding: 12px 25px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgb(14 14 14 / 53%);
    color: #301919;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.admin-filter-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #1499b4, #a51c44);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: -1;
    border-radius: 50px;
}

.admin-filter-btn:hover::before, 
.admin-filter-btn.admin-active::before {
    width: 100%;
}

.admin-filter-btn:hover, 
.admin-filter-btn.admin-active {
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(255, 106, 0, 0.3);
    border-color: transparent;
}

/* Council Grid */
.admin-council-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 35px;
    perspective: 1000px;
}

.admin-council-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    opacity: 0;
    transform: translateY(50px) rotateX(15deg);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.admin-council-card.admin-visible {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}

.admin-council-card:hover {
    transform: translateY(-15px) scale(1.03);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.admin-card-image {
    position: relative;
    height: 300px;
    overflow: hidden;
}

.admin-card-image img {
    width: 100%;
    height: 130%;
    object-fit: cover;
    transition: all 0.5s ease;
    filter: grayscale(20%);
}

.admin-council-card:hover .admin-card-image img {
    transform: scale(1.1);
    filter: grayscale(0%);
}

.admin-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
    opacity: 0.7;
    transition: opacity 0.4s ease;
}

.admin-council-card:hover .admin-image-overlay {
    opacity: 0.9;
}

.admin-card-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(90deg, #ff9a00, #0f787e);
    color: #fff;
    padding: 8px 15px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 2;
    box-shadow: 0 5px 15px rgba(255, 106, 0, 0.3);
}

.admin-card-content {
    padding: 18px;
    text-align: center;
    position: relative;
}

.admin-card-content h3 {
    font-size: 1.4rem;
    color: #b88e63;
    margin-bottom: 10px;
    font-weight: 700;
}

.admin-designation {
    color: #604213;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 1rem;
    letter-spacing: 1px;
}

.admin-department {
    color: rgb(39 36 36 / 80%);
    margin-bottom: 20px;
    font-size: 0.95rem;
    position: relative;
    display: inline-block;
}

.admin-department::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
}

.admin-contact-info {
    margin-bottom: 25px;
    text-align: left;
    background: rgb(154 93 93 / 14%);
    padding: 15px;
    border-radius: 12px;
}

.admin-contact-info p {
    font-size: 0.9rem;
    color: rgb(76 10 10 / 80%);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.admin-contact-info p:hover {
    color: rgb(76 10 10 / 80%);
    transform: translateX(5px);
}

.admin-contact-info i {
    margin-right: 10px;
    color: #c85017;
    width: 20px;
    text-align: center;
}

.admin-profile-btn {
    padding: 12px 30px;
    background: linear-gradient(90deg, #6c2953, #ff6a00);
    color: #fff;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    z-index: 1;
    width: 100%;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.admin-profile-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: all 0.6s ease;
    z-index: -1;
}

.admin-profile-btn:hover::before {
    left: 100%;
}

.admin-profile-btn:hover {
    box-shadow: 0 10px 20px rgba(255, 106, 0, 0.4);
    transform: translateY(-3px);
}

/* Floating elements animation */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

.floating-element {
    position: absolute;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    z-index: 1;
    animation: float 15s infinite ease-in-out;
}

.floating-element:nth-child(1) {
    top: 15%;
    left: 5%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}

.floating-element:nth-child(2) {
    top: 65%;
    right: 5%;
    width: 120px;
    height: 120px;
    animation-delay: -5s;
}

.floating-element:nth-child(3) {
    bottom: 15%;
    left: 10%;
    width: 60px;
    height: 60px;
    animation-delay: -10s;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .admin-council-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 25px;
    }
    
    .admin-section-header h2 {
        font-size: 2.8rem;
    }
}

@media (max-width: 768px) {
    .admin-council-section {
        padding: 70px 0;
    }
    
    .admin-council-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }
    
    .admin-section-header h2 {
        font-size: 2.4rem;
    }
    
    .admin-section-header p {
        font-size: 1.1rem;
    }
    
    .admin-council-filters {
        flex-direction: column;
        align-items: center;
    }
    
    .admin-filter-btn {
        width: 220px;
        margin-bottom: 10px;
    }
    
    .floating-element {
        display: none;
    }
}

@media (max-width: 480px) {
    .admin-council-section {
        padding: 50px 0;
    }
    
    .admin-section-header h2 {
        font-size: 2rem;
    }
    
    .admin-card-image {
        height: 240px;
    }
    
    .admin-card-content {
        padding: 18px;
    }
    
    .admin-card-content h3 {
        font-size: 1.4rem;
    }
}


 /* Council Auth Button Styles */
    .council-auth-container {
        margin: 25px 0;
        display: flex;
        justify-content: center;
    }

    .council-auth-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 24px 62px;
        background: linear-gradient(135deg, #a23274, #11435a);
        color: white;
        text-decoration: none;
        border-radius: 42px;
        font-weight: 600;
        font-size: 1.4rem;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        box-shadow: 0 8px 25px rgba(26, 58, 108, 0.4);
        z-index: 1;
        border: 2px solid rgba(255, 255, 255, 0.15);
    }

    .council-auth-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #2c5282, #1a3a6c);
        opacity: 0;
        transition: opacity 0.4s ease;
        z-index: -1;
    }

    .council-auth-btn:hover {
        transform: translateY(-5px) scale(1.05);
        box-shadow: 0 15px 35px rgba(26, 58, 108, 0.6);
    }

    .council-auth-btn:hover::before {
        opacity: 1;
    }

    .council-auth-text {
        margin-right: 12px;
        letter-spacing: 1px;
        font-family: 'Montserrat', sans-serif;
    }

    .council-auth-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        transition: transform 0.4s ease;
    }

    .council-auth-btn:hover .council-auth-icon {
        transform: rotate(15deg) scale(1.2);
    }

    /* Orbit animation elements */
    .council-auth-orbits {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none;
    }

    .council-orbit-ring {
        position: absolute;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
    }

    .council-orbit-1 {
        width: 80px;
        height: 80px;
        animation: council-orbit-pulse 3s ease-in-out infinite;
    }

    .council-orbit-2 {
        width: 100px;
        height: 100px;
        animation: council-orbit-pulse 3s ease-in-out 0.5s infinite;
    }

    .council-orbit-dot {
        position: absolute;
        background: white;
        border-radius: 50%;
        opacity: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .council-dot-1 {
        width: 6px;
        height: 6px;
        animation: council-dot-orbit 4s linear infinite;
    }

    .council-dot-2 {
        width: 4px;
        height: 4px;
        animation: council-dot-orbit 3s linear 0.3s infinite;
    }

    .council-dot-3 {
        width: 5px;
        height: 5px;
        animation: council-dot-orbit 5s linear 0.7s infinite;
    }

    @keyframes council-orbit-pulse {
        0%, 100% {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.5);
        }
        50% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    }

    @keyframes council-dot-orbit {
        0% {
            opacity: 1;
            transform: rotate(0deg) translate(40px) rotate(0deg);
        }
        100% {
            opacity: 0;
            transform: rotate(360deg) translate(40px) rotate(-360deg);
        }
    }

    /* Pulse animation for the button */
    .council-login-pulse {
        animation: council-pulse-effect 2s infinite;
    }

    @keyframes council-pulse-effect {
        0% {
            box-shadow: 0 0 0 0 rgba(26, 58, 108, 0.4);
        }
        70% {
            box-shadow: 0 0 0 12px rgba(26, 58, 108, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(26, 58, 108, 0);
        }
    }

    /* Hover effects for orbit animation */
    .council-auth-btn:hover .council-orbit-ring {
        opacity: 1;
    }

    .council-auth-btn:hover .council-orbit-dot {
        opacity: 1;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .council-auth-btn {
            padding: 12px 25px;
            font-size: 1rem;
        }
        
        .council-auth-text {
            margin-right: 8px;
        }
    }

     /* Council Login Popup Styles */
    .council-login-popup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(5px);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .council-login-popup.council-popup-active {
        opacity: 1;
        visibility: visible;
    }
    
    .council-popup-content {
        background: linear-gradient(135deg, #efcab9 0%, #0a3a5c 100%);
        width: 90%;
        max-width: 450px;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
        transform: scale(0.9);
        transition: transform 0.4s ease;
    }
    
    .council-popup-active .council-popup-content {
        transform: scale(1);
    }
    
    .council-popup-header {
        background: rgba(0, 0, 0, 0.2);
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .council-popup-header h3 {
        color: #fff;
        margin: 0;
        font-size: 1.4rem;
        font-weight: 600;
    }
    
    .council-popup-close {
        color: #fff;
        font-size: 24px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .council-popup-close:hover {
        color: #ff5252;
        transform: rotate(90deg);
    }
    
    .council-popup-body {
        padding: 25px;
    }
    
    .council-popup-icon {
        text-align: center;
        margin-bottom: 20px;
    }
    
    .council-popup-icon i {
        font-size: 50px;
        color: #eecfcf;
        background: rgba(255, 255, 255, 0.1);
        width: 80px;
        height: 80px;
        line-height: 80px;
        border-radius: 50%;
        text-align: center;
    }
    
    .council-login-form {
        margin-top: 20px;
    }
    
    .council-form-group {
        margin-bottom: 20px;
    }
    
    .council-form-group label {
        display: block;
        color: #ffffff;
        margin-bottom: 8px;
        font-weight: 500;
    }
    
    .council-input-with-icon {
        position: relative;
    }
    
    .council-input-with-icon i {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #d1265d;
    }
    
    .council-input-with-icon input {
        width: 100%;
        padding: 12px 15px 12px 45px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(0, 0, 0, 0.2);
        border-radius: 6px;
        color: #fff;
        font-size: 16px;
        transition: all 0.3s ease;
    }
    
    .council-input-with-icon input:focus {
        outline: none;
        border-color: #4db8ff;
        box-shadow: 0 0 0 2px rgba(77, 184, 255, 0.3);
    }
    
    .council-input-with-icon input::placeholder {
        color: rgba(255, 255, 255, 0.5);
    }
    
    .council-login-submit {
        width: 100%;
        padding: 14px;
        background: linear-gradient(135deg, #181818 0%, #c44862 100%);
        border: none;
        border-radius: 6px;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        margin-top: 10px;
    }
    
    .council-login-submit:hover {
        background: linear-gradient(135deg, #302309 0%, #118495 100%);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 119, 204, 0.4);
    }
    
    .council-login-submit:active {
        transform: translateY(0);
    }
    
    .council-submit-loader {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
    }
    
    .council-login-submit.council-submitting .council-submit-text {
        opacity: 0;
    }
    
    .council-login-submit.council-submitting .council-submit-loader {
        opacity: 1;
    }
    
    .council-popup-footer {
        margin-top: 25px;
        text-align: center;
    }
    
    .council-forgot-link {
        color: #4db8ff;
        text-decoration: none;
        font-size: 14px;
        transition: color 0.3s ease;
    }
    
    .council-forgot-link:hover {
        color: #fff;
        text-decoration: underline;
    }
    
    .council-security-note {
        color: rgba(255, 255, 255, 0.6);
        font-size: 12px;
        margin-top: 15px;
    }
    
    .council-security-note i {
        margin-right: 5px;
    }
    
    /* Animation for the popup */
    @keyframes councilPopupIn {
        0% {
            opacity: 0;
            transform: translateY(30px) scale(0.9);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    
    .council-popup-content {
        animation: councilPopupIn 0.4s ease forwards;
    }

    /* Error message styling */
.council-error-message {
    background-color: #ffe6e6;
    color: #d32f2f;
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-left: 4px solid #d32f2f;
    animation: councilErrorFadeIn 0.3s ease;
}

.council-field-error {
    color: #ffb6b6;
    font-size: 0.85rem;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.council-input-error {
    border-color: #d32f2f !important;
}

.council-input-error + i {
    color: #d32f2f !important;
}

@keyframes councilErrorFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Shake animation for form */
.council-shake {
    animation: councilShake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes councilShake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

.council-input-with-icon {
    position: relative;
}

.council-password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #666;
    z-index: 2;
}

.council-password-toggle:hover {
    color: #1a73e8;
}


.polling-modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(6px);
        z-index: 1000;
        justify-content: center;
        align-items: center;
        animation: fadeIn 0.3s ease;
        transition: opacity 0.3s ease;
    }

    .polling-modal-content {
        background: linear-gradient(135deg, #ffffff, #f0f4f8);
        border-radius: 15px;
        padding: 30px;
        width: 90%;
        max-width: 400px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        position: relative;
        animation: scaleUp 0.3s ease;
        border-top: 4px solid #ff9933;
        border-bottom: 4px solid #138808;
    }

    .polling-close-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 28px;
        color: #666;
        cursor: pointer;
        transition: color 0.3s, transform 0.3s;
    }

    .polling-close-btn:hover {
        color: #000;
        transform: scale(1.2);
    }

    .polling-modal-header {
        text-align: center;
        margin-bottom: 25px;
    }

    .polling-modal-header .polling-icon {
        font-size: 40px;
        color: #d1273e;
        margin-bottom: 10px;
    }

    .polling-modal-header h2 {
        margin: 0;
        font-size: 24px;
        color: #333;
    }

    .polling-modal-header p {
        margin: 5px 0 0;
        color: #666;
        font-size: 14px;
    }

    .polling-login-form {
        display: flex;
        flex-direction: column;
    }

    .polling-input-group {
        margin-bottom: 20px;
    }

 .polling-input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.polling-input-group input[type="tel"] {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

.polling-input-group input[type="tel"]:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

  .polling-input-group input {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

    .polling-input-group input:focus {
        border-color: #007bff;
        outline: none;
    }

    .polling-submit-btn {
        background: linear-gradient(135deg, #ff9933, #138808);
        color: white;
        border: none;
        padding: 12px;
        border-radius: 8px;
        font-size: 16px;
        cursor: pointer;
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .polling-submit-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .polling-modal-footer {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        font-size: 14px;
    }

    .polling-modal-footer a {
        color: #007bff;
        text-decoration: none;
        transition: color 0.3s;
    }

    .polling-modal-footer a:hover {
        color: #0056b3;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes scaleUp {
        from { transform: scale(0.8); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }

/* Enhanced validation styles */
.validation-message {
    margin-top: 8px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 20px;
    padding: 6px 10px;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.validation-message.green {
    color: #28a745;
    background-color: #f8fff9;
    border-left: 3px solid #28a745;
}

.validation-message.red {
    color: #dc3545;
    background-color: #fff8f8;
    border-left: 3px solid #dc3545;
}

.validation-message i.fa-spinner {
    color: #007bff;
}

.validation-message i.fa-info-circle {
    color: #6c757d;
    background-color: #f8f9fa;
}

.validation-message i.fa-exclamation-circle,
.validation-message i.fa-exclamation-triangle {
    color: #dc3545;
}

/* Input states */
.polling-input-group input:invalid {
    border-color: #dc3545;
}

.polling-input-group input:valid {
    border-color: #28a745;
}

/* Button loading state */
.polling-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.polling-submit-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Required field indicators */
.polling-input-group label::after {
    content: " *";
    color: #dc3545;
}

/* Focus states for better accessibility */
.polling-input-group input:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

/* Error shake animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.polling-input-group input.error {
    animation: shake 0.5s ease-in-out;
    border-color: #dc3545;
}

.password-hint {
  background: #f0f8ff;
  border-left: 4px solid #2196F3;
  padding: 8px 12px;
  margin: 10px 0;
  border-radius: 4px;
  font-size: 12px;
  color: #1565C0;
}

.password-hint i {
  margin-right: 5px;
}

.polling-submit-btn.disabled {
  background-color: #cccccc !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}





/* Polling Agenda — Fixes for text visibility & full button display (no :root) */

/* Overlay & Container */
.polling-agenda-overlay{
  display: none; /* toggle via JS: add .open to show */
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(2,6,23,0.5), rgba(8,10,20,0.72)), rgba(10,14,20,0.72);
  backdrop-filter: blur(6px) saturate(120%);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 28px;
  transition: opacity .35s cubic-bezier(.2,.9,.3,1), transform .35s cubic-bezier(.2,.9,.3,1);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.polling-agenda-overlay.open{ display:flex; animation: fadeInOverlay .32s ease; }

/* Modal Card */
.polling-agenda-content{
  width: min(98%, 1200px);
  max-width: 1200px;
  max-height: 92vh;
  display:flex;
  flex-direction:column;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(245,249,255,0.96));
  border-radius: 20px;
  border: 1px solid rgba(12,18,32,0.04);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(2,6,23,0.32);
  transform: translateY(8px) scale(.995);
  animation: sheetIn .45s cubic-bezier(.2,.9,.3,1) both;
  box-sizing: border-box;
}

/* Header */
.polling-agenda-header{
  display:grid;
  grid-template-columns: 68px 1fr auto;
  gap:18px;
  align-items:center;
  padding: 28px 34px;
  background: linear-gradient(90deg, rgb(131 18 76 / 95%), rgb(28 95 125 / 92%));
  color:#fff;
  position:relative;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}
.polling-agenda-close-btn{
  background: rgba(255,255,255,0.08);
  color:#5e2222;
  width:48px;height:48px;border-radius:12px;
  display:inline-grid;place-items:center;font-size:20px;cursor:pointer;
  border:1px solid rgba(255,255,255,0.12);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.polling-agenda-close-btn:hover{ transform: translateY(-3px) rotate(-6deg); background: rgba(255,255,255,0.12); }

/* Icon block */
.polling-agenda-icon{
  width:68px;height:68px;display:grid;place-items:center;border-radius:14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06));
  border:1px solid rgba(255,255,255,0.08); font-size:28px;
  filter: drop-shadow(0 6px 14px rgba(37,99,235,0.18)); animation: float 4s ease-in-out infinite;
}
.polling-agenda-header h2{
  margin:0;font-size:1.45rem;font-weight:700;line-height:1.12;text-shadow:0 2px 18px rgba(4,12,30,0.12);
}
.polling-agenda-header p{ margin:6px 0 0; opacity:0.95; font-weight:500; font-size:.98rem; color: rgba(255,255,255,0.94); }

/* Body (scrollable) */
.polling-agenda-body{
  flex:1; overflow-y:auto; padding:26px; display:flex; flex-direction:column; gap:20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.02));
}
.polling-agenda-body::-webkit-scrollbar{ width:10px; height:10px; }
.polling-agenda-body::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(37,99,235,0.18), rgba(37,99,235,0.26));
  border-radius:999px; border:2px solid rgba(255,255,255,0.06);
}

/* Loading */
.loading-indicator{
  display:flex; gap:12px; align-items:center; justify-content:center; padding:18px 20px;
  border-radius:14px; background: linear-gradient(180deg, rgba(6,95,212,0.06), rgba(14,165,233,0.03));
  box-shadow: 0 6px 18px rgba(2,6,23,0.18); color:#2563eb; font-weight:700;
}

/* Agendas grid & card */
.agendas-container{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:22px; align-items:start;
}
.agenda-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,250,255,0.98));
  border-radius:12px; border:1px solid rgba(12,18,32,0.04);
  display:grid; grid-template-rows: auto 1fr auto; overflow:hidden;
  transition: transform .28s ease, box-shadow .28s ease; position:relative;
  box-shadow: 0 10px 30px rgba(4,12,30,0.06);
}
.agenda-card:hover{ transform: translateY(-8px); box-shadow: 0 28px 60px rgba(2,6,23,0.14); }

/* Header row inside card */
.agenda-card-header{
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  background: linear-gradient(90deg, rgba(99,102,241,0.10), rgba(59,130,246,0.04));
  border-bottom: 1px solid rgba(12,18,32,0.03);
}

/* Serial badge */
.agenda-card-serial{
  min-width:44px; min-height:44px; display:grid; place-items:center; border-radius:12px;
  font-weight:800; color:#fff; background: linear-gradient(135deg,#2563eb,#06b6d4);
  box-shadow: 0 8px 18px rgba(37,99,235,0.16); font-size:1.05rem;
}

/* Title & meta (ALLOW WRAP) */
.agenda-card-title{
  font-size:1.12rem; font-weight:700; color:#0f172a; margin:0; line-height:1.28;
  white-space:normal; /* allow wrapping */
  overflow: visible;
  word-break: break-word;
}
.agenda-meta{ font-size:0.86rem; color:#64748b; margin-top:6px; display:block; }

/* Description (wraps) */
.agenda-card-description{
  padding:16px; font-size:0.98rem; color:#253249; line-height:1.6;
  background: linear-gradient(180deg, rgba(250,252,255,0.6), rgba(247,250,255,0.9));
  border-bottom: 1px dashed rgba(12,18,32,0.03);
  white-space:normal;
  word-wrap: break-word;
}

/* Results / progress */
.agenda-results{ padding:12px 16px; display:flex; gap:12px; align-items:center; justify-content:space-between; }
.vote-progress{ flex:1; height:12px; background: linear-gradient(180deg, rgba(12,18,32,0.04), rgba(12,18,32,0.02)); border-radius:999px; overflow:hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,0.32); }
.vote-progress .fill{ height:100%; width:0%; border-radius:999px; transition: width .8s ease; background: linear-gradient(90deg,#06b6d4,#2563eb); box-shadow: 0 6px 18px rgba(37,99,235,0.12); }
.vote-percent{ min-width:56px; text-align:right; font-weight:700; color:#0f172a; font-size:.95rem; }

/* Voting buttons row - ensure full visibility */
.agenda-card-voting{
  padding:16px; display:flex; gap:12px; align-items:center; justify-content:space-between;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,247,255,0.98));
  box-sizing: border-box;
}

/* BUTTON FIXES:
   - allow them to shrink on small viewports (min-width:0),
   - use flex:1 so two buttons share available space,
   - allow label wrapping if needed,
   - keep icons sized and spaced.
*/
.polling-option-btn{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 14px; border-radius:14px; border:none; cursor:pointer;
  min-width:0; /* important so flex children can shrink */
  flex:1; /* share space evenly */
  font-weight:700; font-size:0.98rem; letter-spacing:0.2px; text-transform:none;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  box-shadow: 0 8px 22px rgba(3,7,18,0.06);
  color:#fff; white-space:normal; /* allow wrap */
  word-break: break-word;
  line-height:1.1;
  box-sizing: border-box;
}

/* Make sure icon doesn't force overflow */
.polling-option-btn i{ font-size:1.3rem; display:inline-block; flex:0 0 auto; margin-right:6px; line-height:1; }

/* If you want text and icon separated for small widths, make labels wrap */
.polling-option-btn span{ display:inline-block; white-space:normal; }

/* Specific button styles */
.satisfied-btn{ background: linear-gradient(90deg,#10b981 0%,#059669 100%); box-shadow: 0 10px 30px rgba(16,185,129,0.12); }
.neutral-btn{ background: linear-gradient(90deg,#60a5fa 0%,#3b82f6 100%); box-shadow: 0 10px 30px rgba(59,130,246,0.12); }
.not-satisfied-btn{ background: linear-gradient(90deg,#f87171 0%,#ef4444 100%); box-shadow: 0 10px 30px rgba(239,68,68,0.12); }

.polling-option-btn:hover{ transform: translateY(-3px); filter: brightness(1.03); }
.polling-option-btn:disabled{ opacity:0.6; cursor:not-allowed; transform:none; box-shadow:none; filter:grayscale(.12); }

/* small badge */
.agenda-badge{ position:absolute; top:12px; right:12px; background:#fff; color:#0f172a; border-radius:10px; padding:6px 10px; font-weight:700; font-size:0.86rem; box-shadow:0 8px 20px rgba(2,6,23,0.06); border:1px solid rgba(12,18,32,0.03); }

/* No agendas message */
.no-agendas-message{ width:100%; padding:32px; text-align:center; background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,250,255,0.95)); border-radius:14px; box-shadow: 0 12px 30px rgba(4,12,30,0.06); color:#64748b; }
.no-agendas-message i{ display:block; font-size:64px; margin-bottom:12px; color:rgba(99,102,241,0.95); animation: pop 2.6s infinite; }
.no-agendas-message h3{ margin:8px 0; font-size:1.4rem; color:#09203a; }

/* Footer */
.polling-agenda-footer{
  padding:16px 22px; background: linear-gradient(180deg, rgba(247,250,255,0.95), rgba(250,252,255,0.98));
  color:#64748b; border-top:1px solid rgba(12,18,32,0.03); font-weight:600;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}

/* Accessibility focus */
.polling-agenda-content :focus{ outline:none; box-shadow: 0 0 0 3px rgba(37,99,235,0.14); border-radius:8px; }

/* Responsive tweaks */
@media (max-width:1024px){
  .polling-agenda-header{ padding:22px; grid-template-columns:58px 1fr auto; gap:12px; }
  .polling-agenda-content{ max-width:980px; }
}
@media (max-width:768px){
  .polling-agenda-content{ width:98%; max-height:96vh; border-radius:14px; }
  .polling-agenda-header{ padding:18px; grid-template-columns:56px 1fr auto; gap:10px; }
  .polling-agenda-icon{ width:56px; height:56px; font-size:24px; border-radius:12px; }
  .agenda-card{ border-radius:14px; }
  /* On smaller screens, stack voting buttons vertically so labels NEVER get cut */
  .agenda-card-voting{ flex-direction: column; align-items:stretch; gap:10px; padding:14px; }
  .polling-option-btn{ min-width:0; width:100%; flex:none; }
  .polling-option-btn i{ margin-right:10px; }
}
@media (max-width:480px){
  .polling-agenda-header{ grid-template-columns:48px 1fr auto; padding:14px; gap:8px; }
  .polling-agenda-header h2{ font-size:1.05rem; }
  .agenda-card-description{ padding:12px; font-size:.94rem; }
  .agenda-card-title{ font-size:1rem; }
}

/* Animations */
@keyframes sheetIn{ 0%{ opacity:0; transform: translateY(16px) scale(.995); } 60%{ opacity:.98; transform: translateY(-6px) scale(1.003); } 100%{ opacity:1; transform: translateY(0) scale(1); } }
@keyframes float{ 0%{ transform: translateY(0) } 50%{ transform: translateY(-6px) } 100%{ transform: translateY(0) } }
@keyframes pop{ 0%{ transform: scale(1); opacity:0.9; } 50%{ transform: scale(1.06); opacity:1; } 100%{ transform: scale(1); opacity:0.9; } }
@keyframes fadeInOverlay{ from{ opacity:0; } to{ opacity:1; } }

/* Utilities */
.text-muted{ color:#64748b !important; }
.flex{ display:flex; align-items:center; gap:8px; }
.center{ display:flex; align-items:center; justify-content:center; }
.round-sm{ border-radius:8px; }
.badge{ padding:6px 10px; border-radius:999px; font-weight:700; font-size:.85rem; }

/* Integration notes:
   - For animated progress set .fill width inline or via JS.
   - Toggle overlay by adding/removing `.open` on .polling-agenda-overlay.
   - On desktop two buttons share space; on small screens they stack so labels remain visible.
*/
.voting-buttons {
    display: flex;
    gap: 10px;
}

.vote-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
    margin-top: 20px;
}

.vote-btn.satisfied {
    background: #1a8648;
    color: white;
}

.vote-btn.not-satisfied {
    background: #c33e30;
    color: white;
}

.vote-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.vote-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.vote-status {
    margin-top: 10px;
    padding: 8px;
    border-radius: 4px;
    text-align: center;
    font-weight: 600;
}

.vote-status.submitting {
    background: #f39c12;
    color: white;
}

.vote-status.success {
    background: #1a8648;
    color: white;
}

.vote-status.error {
    background: #e74c3c;
    color: white;
}

.loading-indicator, .no-agendas {
    text-align: center;
    padding: 40px;
    color: #666;
}

.custom-vote-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10000;
    border-left: 4px solid #ff4757;
}

.custom-alert-content {
    text-align: center;
    font-size: 14px;
}

.custom-alert-content i {
    color: #ff4757;
    font-size: 24px;
    margin-bottom: 10px;
}

.custom-alert-content button {
    margin-top: 10px;
    padding: 6px 16px;
    background: #ff4757;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}


/* Complain & Suggestion Modal Styles */
.complain-suggestion-modal-overlay,
.complain-suggestion-form-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.complain-suggestion-modal-content,
.complain-suggestion-form-content {
    background: white;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: modalFadeIn 0.3s ease-out;
}

.complain-suggestion-modal-header,
.complain-suggestion-form-header {
    background: linear-gradient(135deg, #721e1e, #2a5298);
    color: white;
    padding: 20px;
    text-align: center;
    position: relative;
}

.complain-suggestion-icon,
.complain-suggestion-form-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
    display: block;
}

.complain-suggestion-modal-header h2,
.complain-suggestion-form-header h2 {
    margin: 10px 0 5px;
    font-size: 1.5rem;
}

.complain-suggestion-modal-header p,
.complain-suggestion-form-header p {
    margin: 0;
    opacity: 0.9;
    font-size: 0.9rem;
}

.complain-suggestion-close-btn,
.complain-suggestion-form-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 1.8rem;
    cursor: pointer;
    color: white;
    background: none;
    border: none;
}

.complain-suggestion-login-form,
.complain-suggestion-form {
    padding: 20px;
}

.complain-suggestion-input-group {
    margin-bottom: 20px;
}

.complain-suggestion-input-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
}

.complain-suggestion-input-group input,
.complain-suggestion-input-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
}

.complain-suggestion-input-group textarea {
    resize: vertical;
    min-height: 100px;
}

.complain-suggestion-validation-message {
    font-size: 0.85rem;
    margin-top: 5px;
    padding: 5px;
    border-radius: 3px;
}

.complain-suggestion-validation-message.green {
    color: #27ae60;
    background-color: #e8f6ef;
}

.complain-suggestion-validation-message.red {
    color: #e74c3c;
    background-color: #fdedec;
}

.complain-suggestion-submit-btn,
.complain-suggestion-form-submit-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #721e1e, #982d2a);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.complain-suggestion-submit-btn:hover,
.complain-suggestion-form-submit-btn:hover {
    background: linear-gradient(135deg, #2a5298, #1e3c72);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.complain-suggestion-submit-btn.disabled,
.complain-suggestion-form-submit-btn:disabled {
    background: #bdc3c7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.complain-suggestion-modal-footer,
.complain-suggestion-form-footer {
    padding: 15px 20px;
    text-align: center;
    border-top: 1px solid #eee;
}

.complain-suggestion-modal-footer a,
.complain-suggestion-form-footer a {
    color: #3498db;
    text-decoration: none;
}

.complain-suggestion-radio-group {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.complain-suggestion-radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
}

.complain-suggestion-radio-label input {
    display: none;
}

.radio-custom {
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 50%;
    margin-right: 10px;
    position: relative;
    transition: all 0.3s ease;
}

.complain-suggestion-radio-label input:checked + .radio-custom {
    border-color: #1e3c72;
    background-color: #1e3c72;
}

.complain-suggestion-radio-label input:checked + .radio-custom::after {
    content: '';
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.feedback-fields {
    margin-top: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 5px;
    border-left: 4px solid #1e3c72;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* UPMTSOA About Overview Styles */
.upmtsoa-about-overview {
    font-family: 'Noto Sans', sans-serif;
    color: #333;
    line-height: 1.6;
}

.upmtsoa-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Hero Section */
.upmtsoa-hero-section {
    background: linear-gradient(135deg, #911b22 0%, #2c5c8a 100%);
    color: white;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.upmtsoa-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,197.3C1248,203,1344,149,1392,122.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
    background-size: cover;
    background-position: bottom;
}

.upmtsoa-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.upmtsoa-main-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.upmtsoa-hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 40px;
    opacity: 0.9;
}

.upmtsoa-hero-stats {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-top: 50px;
}

.upmtsoa-stat-item {
    text-align: center;
}

.upmtsoa-stat-number {
    display: block;
    font-size: 3rem;
    font-weight: 700;
    color: #ffcc00;
}

.upmtsoa-stat-label {
    font-size: 1.1rem;
    opacity: 0.8;
}

/* Mission Section */
.upmtsoa-mission-section {
    padding: 100px 0;
    background-color: #f8f9fa;
}

.upmtsoa-mission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.upmtsoa-section-title {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 30px;
    color: #1a3a5f;
    position: relative;
}

.upmtsoa-section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 80px;
    height: 4px;
    background: #ffcc00;
    border-radius: 2px;
}

.upmtsoa-mission-text {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: #555;
}

.upmtsoa-values-list {
    margin-top: 30px;
}

.upmtsoa-value-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.upmtsoa-value-item i {
    color: #ffcc00;
    margin-right: 15px;
    font-size: 1.3rem;
}

.upmtsoa-mission-visual {
    display: flex;
    justify-content: center;
}

.upmtsoa-visual-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.upmtsoa-visual-card:hover {
    transform: translateY(-5px);
}

.upmtsoa-visual-img {
    width: 100%;
    height: auto;
    display: block;
}

/* History Section */
.upmtsoa-history-section {
    padding: 100px 0;
    background: linear-gradient(to bottom, #ffffff 0%, #f0f4f8 100%);
}

.upmtsoa-centered {
    text-align: center;
}

.upmtsoa-centered::after {
    left: 50%;
    transform: translateX(-50%);
}

.upmtsoa-section-subtitle {
    font-size: 1.2rem;
    color: #666;
    max-width: 700px;
    margin: 0 auto 50px;
    text-align: center;
}

.upmtsoa-timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.upmtsoa-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #ffcc00;
    transform: translateX(-50%);
}

.upmtsoa-timeline-item {
    display: flex;
    margin-bottom: 50px;
    position: relative;
}

.upmtsoa-timeline-item:nth-child(odd) {
    flex-direction: row-reverse;
}

.upmtsoa-timeline-year {
    flex: 0 0 120px;
    height: 120px;
    background: #bba178;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    z-index: 2;
    margin: 0 40px;
}

.upmtsoa-timeline-content {
    flex: 1;
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.upmtsoa-timeline-content h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #c85757;
}

/* Leadership Section */
.upmtsoa-leadership-section {
    padding: 100px 0;
    background-color: #f8f9fa;
}

.upmtsoa-leadership-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(00px, 1fr));
    gap: 40px;
    margin-top: 50px;
}

.upmtsoa-leader-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.upmtsoa-leader-card:hover {
    transform: translateY(-10px);
}

.upmtsoa-leader-img {
    height: 280px;
    overflow: hidden;
}

.upmtsoa-leader-img img {
    width: 100%;
    height: 120%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.upmtsoa-leader-card:hover .upmtsoa-leader-img img {
    transform: scale(1.05);
}

.upmtsoa-leader-info {
    padding: 25px;
}

.upmtsoa-leader-info h3 {
    font-size: 1.5rem;
    margin-bottom: 5px;
    color: #c17070;
}

.upmtsoa-leader-role {
    color: #c6a00a;
    font-weight: 600;
    margin-bottom: 15px;
}

.upmtsoa-leader-desc {
    color: #666;
    line-height: 1.6;
}

/* CTA Section */
.upmtsoa-cta-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #8e0f33 0%, #2c8a88 100%);
    color: white;
    text-align: center;
}

.upmtsoa-cta-content {
    max-width: 700px;
    margin: 0 auto;
}

.upmtsoa-cta-title {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.upmtsoa-cta-text {
    font-size: 1.2rem;
    margin-bottom: 40px;
    opacity: 0.9;
}

.upmtsoa-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.upmtsoa-btn {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 5px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.upmtsoa-btn-primary {
    background: #ffcc00;
    color: #1a3a5f;
}

.upmtsoa-btn-primary:hover {
    background: #e6b800;
    transform: translateY(-3px);
}

.upmtsoa-btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.upmtsoa-btn-secondary:hover {
    background: white;
    color: #1a3a5f;
    transform: translateY(-3px);
}

/* Responsive Design */
@media (max-width: 992px) {
    .upmtsoa-main-title {
        font-size: 2.8rem;
    }
    
    .upmtsoa-mission-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .upmtsoa-hero-stats {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .upmtsoa-main-title {
        font-size: 2.2rem;
    }
    
    .upmtsoa-hero-subtitle {
        font-size: 1.2rem;
    }
    
    .upmtsoa-hero-stats {
        flex-direction: column;
        gap: 30px;
    }
    
    .upmtsoa-timeline::before {
        left: 30px;
    }
    
    .upmtsoa-timeline-item,
    .upmtsoa-timeline-item:nth-child(odd) {
        flex-direction: row;
    }
    
    .upmtsoa-timeline-year {
        flex: 0 0 80px;
        height: 80px;
        font-size: 1.2rem;
        margin: 0 20px 0 0;
    }
    
    .upmtsoa-cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .upmtsoa-btn {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 576px) {
    .upmtsoa-hero-section,
    .upmtsoa-mission-section,
    .upmtsoa-history-section,
    .upmtsoa-leadership-section,
    .upmtsoa-cta-section {
        padding: 60px 0;
    }
    
    .upmtsoa-main-title {
        font-size: 1.8rem;
    }
    
    .upmtsoa-section-title {
        font-size: 2rem;
    }
    
    .upmtsoa-leadership-grid {
        grid-template-columns: 1fr;
    }
}



/* UPMTSOA Organisation Structure Styles */
.upmtsoa-org-structure {
    font-family: 'Noto Sans', sans-serif;
    color: #2c3e50;
    line-height: 1.7;
}

.upmtsoa-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Organisation Hero Section */
.upmtsoa-org-hero {
    background: linear-gradient(135deg, #992626 0%, #3e8d91 100%);
    color: white;
    padding: 120px 0 80px;
    position: relative;
    overflow: hidden;
}

.upmtsoa-org-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
}

.upmtsoa-org-pattern {
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(255,255,255,0.3) 2px, transparent 0),
        radial-gradient(circle at 75% 75%, rgba(255,255,255,0.2) 1px, transparent 0);
    background-size: 50px 50px, 30px 30px;
}

.upmtsoa-org-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.upmtsoa-org-breadcrumb {
    font-size: 0.9rem;
    margin-bottom: 30px;
    opacity: 0.8;
}

.upmtsoa-org-breadcrumb a {
    color: white;
    text-decoration: none;
}

.upmtsoa-org-breadcrumb span {
    color: #f39c12;
    font-weight: 600;
}

.upmtsoa-org-main-title {
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.upmtsoa-org-hero-text {
    font-size: 1.3rem;
    margin-bottom: 40px;
    opacity: 0.9;
}

.upmtsoa-org-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.1);
    padding: 12px 25px;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
}

.upmtsoa-org-badge i {
    color: #f39c12;
}

/* Section Header */
.upmtsoa-section-header {
    text-align: center;
    margin-bottom: 60px;
}

.upmtsoa-org-section-title {
    font-size: 2.6rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #2c3e50;
    position: relative;
    display: inline-block;
}

.upmtsoa-org-section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #3498db, #f39c12);
    border-radius: 2px;
}

.upmtsoa-org-section-desc {
    font-size: 1.2rem;
    color: #7f8c8d;
    max-width: 600px;
    margin: 0 auto;
}

/* Governance Section */
.upmtsoa-governance-section {
    padding: 100px 0;
    background: #f8f9fa;
}

.upmtsoa-governance-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.upmtsoa-gov-card {
    background: white;
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.upmtsoa-gov-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #3498db, #2ecc71);
}

.upmtsoa-gov-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.upmtsoa-gov-highlight {
    transform: scale(1.05);
    border: 2px solid #cc8d89;
}

.upmtsoa-gov-highlight::before {
    background: linear-gradient(90deg, #f39c12, #e74c3c);
    height: 8px;
}

.upmtsoa-gov-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #dbc034, #2996b9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    color: white;
    font-size: 2rem;
}

.upmtsoa-gov-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #2c3e50;
}

.upmtsoa-gov-card p {
    color: #7f8c8d;
    margin-bottom: 25px;
}

.upmtsoa-gov-features {
    list-style: none;
    padding: 0;
}

.upmtsoa-gov-features li {
    padding: 8px 0;
    border-bottom: 1px solid #ecf0f1;
    color: #34495e;
}

.upmtsoa-gov-features li:last-child {
    border-bottom: none;
}

/* Organisational Chart */
.upmtsoa-org-chart-section {
    padding: 100px 0;
    background: white;
}

.upmtsoa-org-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.upmtsoa-org-level {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
    width: 100%;
}

.upmtsoa-org-level-1 {
    margin-bottom: 30px;
}

.upmtsoa-org-level-2 {
    margin-bottom: 30px;
}

.upmtsoa-org-level-3 {
    gap: 60px;
}

.upmtsoa-org-level-4 {
    gap: 20px;
    flex-wrap: wrap;
}

.upmtsoa-org-node {
    background: #daccbc;
    border: 2px solid #e18585;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    min-width: 180px;
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.2);
    position: relative;
    z-index: 2;
}

.upmtsoa-org-node-main {
    background: linear-gradient(135deg, #dbae34, #2980b9);
    color: white;
    border: none;
    min-width: 220px;
}

.upmtsoa-org-node-central {
    border-color: #f39c12;
    box-shadow: 0 5px 15px rgba(243, 156, 18, 0.2);
}

.upmtsoa-node-content h4 {
    margin: 0 0 5px;
    font-size: 1.1rem;
}

.upmtsoa-node-content span {
    font-size: 0.9rem;
    opacity: 0.8;
}

.upmtsoa-org-connector {
    width: 5px;
    height: 20px;
    background: #bdc3c7;
    margin: 0 auto 15px;
    position: relative;
}

.upmtsoa-org-connector::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #bdc3c7;
}

/* Regional Section */
.upmtsoa-regional-section {
    padding: 100px 0;
    background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%);
}

.upmtsoa-regional-map {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 50px;
    align-items: center;
}

.upmtsoa-map-container {
    position: relative;
    height: 400px;
    background: #34495e;
    border-radius: 15px;
    overflow: hidden;
}

.upmtsoa-map-base {
    width: 100%;
    height: 100%;
    position: relative;
    background: 
        radial-gradient(circle at 30% 40%, #4a6a8b 0%, #34495e 100%);
}

.upmtsoa-zone {
    position: absolute;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.upmtsoa-zone-west {
    top: 30%;
    left: 20%;
}

.upmtsoa-zone-central {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.upmtsoa-zone-east {
    top: 40%;
    right: 25%;
}

.upmtsoa-zone-pin {
    width: 20px;
    height: 20px;
    background: #e74c3c;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    position: relative;
    margin: 0 auto;
}

.upmtsoa-zone-pin::after {
    content: '';
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    left: 5px;
}

.upmtsoa-zone-info {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0.3s ease;
    width: 180px;
    text-align: center;
    pointer-events: none;
}

.upmtsoa-zone:hover .upmtsoa-zone-info {
    opacity: 1;
}

.upmtsoa-zone-info h4 {
    margin: 0 0 5px;
    color: #2c3e50;
}

.upmtsoa-zone-info p {
    margin: 0 0 5px;
    color: #7f8c8d;
    font-size: 0.9rem;
}

.upmtsoa-zone-info span {
    font-size: 0.8rem;
    color: #3498db;
}

.upmtsoa-regional-stats {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.upmtsoa-regional-stat {
    text-align: center;
    padding: 30px;
    background: #eed8cd;
    border-radius: 10px;
    border: 2px solid #d9acac;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.upmtsoa-regional-number {
    display: block;
    font-size: 3rem;
    font-weight: 700;
    color: #e47272;
    margin-bottom: 10px;
}

.upmtsoa-regional-label {
    font-size: 1.1rem;
    color: #7f8c8d;
}

/* Committees Section */
.upmtsoa-committees-section {
    padding: 100px 0;
    background: white;
}

.upmtsoa-committees-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.upmtsoa-committee-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgb(0 0 0 / 40%);
    transition: transform 0.3s ease;
}

.upmtsoa-committee-card:hover {
    transform: translateY(-5px);
}

.upmtsoa-committee-header {
    background: linear-gradient(135deg, #92495578, #8b8678);
    color: #7a4e4e;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.upmtsoa-committee-header i {
    font-size: 2rem;
}

.upmtsoa-committee-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.upmtsoa-committee-body {
    padding: 25px;
}

.upmtsoa-committee-body p {
    color: #7f8c8d;
    margin-bottom: 20px;
}

.upmtsoa-committee-members {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.9rem;
    color: #34495e;
}

/* Membership Section */
.upmtsoa-membership-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #727011 0%, #2e86c1 100%);
    color: white;
}

.upmtsoa-membership-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.upmtsoa-membership-text .upmtsoa-org-section-title {
    color: white;
}

.upmtsoa-membership-text .upmtsoa-org-section-title::after {
    background: #f39c12;
}

.upmtsoa-membership-text p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.upmtsoa-membership-tiers {
    margin-bottom: 40px;
}

.upmtsoa-tier {
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.upmtsoa-tier:last-child {
    border-bottom: none;
}

.upmtsoa-tier h4 {
    margin: 0 0 5px;
    color: #f39c12;
}

.upmtsoa-tier p {
    margin: 0;
    font-size: 0.95rem;
    opacity: 0.8;
}

.upmtsoa-org-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.1);
    color: white;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
}

.upmtsoa-org-cta-btn:hover {
    background: rgba(255,255,255,0.2);
}

.upmtsoa-membership-pyramid {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.upmtsoa-pyramid-tier {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    position: relative;
}

.upmtsoa-tier-1 {
    border-bottom: 80px solid #e74c3c;
}

.upmtsoa-tier-2 {
    border-bottom: 80px solid #f39c12;
    margin-top: -40px;
}

.upmtsoa-tier-3 {
    border-bottom: 80px solid #3498db;
    margin-top: -40px;
}

.upmtsoa-tier-4 {
    border-bottom: 80px solid #2ecc71;
    margin-top: -40px;
}

.upmtsoa-tier-5 {
    border-bottom: 80px solid #703838;
    margin-top: -40px;
}

.upmtsoa-pyramid-tier span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    text-align: center;
    font-size: 0.8rem;
}

/* Responsive Design */
@media (max-width: 992px) {
    .upmtsoa-org-main-title {
        font-size: 2.5rem;
    }
    
    .upmtsoa-regional-map {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .upmtsoa-membership-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .upmtsoa-org-level-3,
    .upmtsoa-org-level-4 {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .upmtsoa-org-main-title {
        font-size: 2rem;
    }
    
    .upmtsoa-org-section-title {
        font-size: 2rem;
    }
    
    .upmtsoa-governance-cards {
        grid-template-columns: 1fr;
    }
    
    .upmtsoa-gov-highlight {
        transform: scale(1);
    }
    
    .upmtsoa-committees-grid {
        grid-template-columns: 1fr;
    }
    
    .upmtsoa-org-level {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
}

@media (max-width: 576px) {
    .upmtsoa-org-hero,
    .upmtsoa-governance-section,
    .upmtsoa-org-chart-section,
    .upmtsoa-regional-section,
    .upmtsoa-committees-section,
    .upmtsoa-membership-section {
        padding: 60px 0;
    }
    
    .upmtsoa-org-main-title {
        font-size: 1.8rem;
    }
    
    .upmtsoa-map-container {
        height: 300px;
    }
}


/* UPMTSOA Contact Us Styles */
.upmtsoa-contact-main {
    font-family: 'Noto Sans', sans-serif;
    color: #2c3e50;
    line-height: 1.7;
}

.upmtsoa-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Contact Hero Section */
.upmtsoa-contact-hero {
    background: linear-gradient(135deg, #cd4c4c, #1a5376);
    color: white;
    padding: 100px 0 80px;
    position: relative;
    overflow: hidden;
}

.upmtsoa-contact-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.upmtsoa-contact-pattern {
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.1) 0%, transparent 50%);
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 100%;
    background-repeat: no-repeat;
}

.upmtsoa-contact-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.upmtsoa-contact-title {
    font-size: 3.2rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.upmtsoa-contact-subtitle {
    font-size: 1.3rem;
    margin-bottom: 40px;
    opacity: 0.9;
    line-height: 1.6;
}

.upmtsoa-contact-badges {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.upmtsoa-contact-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.1);
    padding: 12px 25px;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    font-size: 1rem;
}

.upmtsoa-contact-badge i {
    color: #f39c12;
}

/* Contact Methods Section */
.upmtsoa-contact-methods {
    padding: 100px 0;
    background: #f8f9fa;
}

.upmtsoa-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 50px;
}

/* Contact Info Card */
.upmtsoa-contact-info-card {
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    height: fit-content;
}

.upmtsoa-contact-info-header {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid #ecf0f1;
}

.upmtsoa-contact-info-header h2 {
    font-size: 2.2rem;
    color: #c48217;
    margin-bottom: 10px;
}

.upmtsoa-contact-info-header p {
    color: #7f8c8d;
    font-size: 1.1rem;
}

.upmtsoa-contact-details {
    margin-bottom: 40px;
}

.upmtsoa-contact-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    align-items: flex-start;
}

.upmtsoa-contact-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #db8f34, #2980b9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.upmtsoa-contact-text h4 {
    margin: 0 0 8px;
    color: #2c3e50;
    font-size: 1.1rem;
}

.upmtsoa-contact-text p {
    margin: 0;
    color: #7f8c8d;
    line-height: 1.6;
}

.upmtsoa-contact-text a {
    color: #b4861f;
    text-decoration: none;
    transition: color 0.3s ease;
}

.upmtsoa-contact-text a:hover {
    color: #2980b9;
    text-decoration: none;
}

.upmtsoa-social-connect h4 {
    margin-bottom: 15px;
    color: #2c3e50;
    font-size: 1.2rem;
}

.upmtsoa-social-links {
    display: flex;
    gap: 15px;
}

.upmtsoa-social-link {
    width: 40px;
    height: 40px;
    background: #ecf0f1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7f8c8d;
    text-decoration: none;
    transition: all 0.3s ease;
}

.upmtsoa-social-link:hover {
    background: #3498db;
    color: white;
    transform: translateY(-3px);
}

/* Contact Form Card */
.upmtsoa-contact-form-card {
    background: white;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.upmtsoa-form-header {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid #ecf0f1;
}

.upmtsoa-form-header h2 {
    font-size: 2.2rem;
    color: #998491;
    margin-bottom: 10px;
}

.upmtsoa-form-header p {
    color: #7f8c8d;
    font-size: 1.1rem;
}

.upmtsoa-contact-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.upmtsoa-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.upmtsoa-form-group {
    position: relative;
}

.upmtsoa-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #b1954a;
}

.upmtsoa-form-group input,
.upmtsoa-form-group select,
.upmtsoa-form-group textarea {
    width: 100%;
    padding: 15px 15px 15px 45px;
    border: 2px solid #ecf0f1;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    font-family: 'Noto Sans', sans-serif;
}

.upmtsoa-form-group input:focus,
.upmtsoa-form-group select:focus,
.upmtsoa-form-group textarea:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.upmtsoa-form-group i {
    position: absolute;
    left: 15px;
    top: 42px;
    color: #7f8c8d;
    transition: color 0.3s ease;
}

.upmtsoa-form-group input:focus + i,
.upmtsoa-form-group select:focus + i,
.upmtsoa-form-group textarea:focus + i {
    color: #3498db;
}

.upmtsoa-form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.upmtsoa-form-submit {
    margin-top: 10px;
}

.upmtsoa-submit-btn {
    background: linear-gradient(135deg, #dba834, #2980b9);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.upmtsoa-submit-btn:hover {
    background: linear-gradient(135deg, #2980b9, #2471a3);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}

.upmtsoa-form-note {
    font-size: 0.9rem;
    color: #7f8c8d;
    margin-top: 15px;
}

/* Regional Offices Section */
.upmtsoa-regional-offices {
    padding: 100px 0;
    background: white;
}

.upmtsoa-section-header {
    text-align: center;
    margin-bottom: 60px;
}

.upmtsoa-section-title {
    font-size: 2.6rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #997977;
    position: relative;
    display: inline-block;
}

.upmtsoa-section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #3498db, #f39c12);
    border-radius: 2px;
}

.upmtsoa-section-subtitle {
    font-size: 1.2rem;
    color: #7f8c8d;
    max-width: 600px;
    margin: 0 auto;
}

.upmtsoa-offices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.upmtsoa-office-card {
    background: #f8f9fa;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.upmtsoa-office-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

.upmtsoa-office-header {
    background: linear-gradient(135deg, #cd4c75, #34495e);
    color: white;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.upmtsoa-office-header i {
    font-size: 1.5rem;
    color: #f39c12;
}

.upmtsoa-office-header h3 {
    margin: 0;
    font-size: 1.4rem;
}

.upmtsoa-office-body {
    padding: 25px;
}

.upmtsoa-office-body p {
    margin-bottom: 12px;
    color: #2c3e50;
}

.upmtsoa-office-body a {
    color: #ac8212;
    text-decoration: none;
}

.upmtsoa-office-body a:hover {
    text-decoration: none;
}

/* FAQ Section */
.upmtsoa-contact-faq {
    padding: 100px 0;
    background: #f8f9fa;
}

.upmtsoa-faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.upmtsoa-faq-item {
    background: white;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    overflow: hidden;
}

.upmtsoa-faq-question {
    padding: 20px 25px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #2c3e50;
    transition: background 0.3s ease;
}

.upmtsoa-faq-question:hover {
    background: #f8f9fa;
}

.upmtsoa-faq-question i {
    transition: transform 0.3s ease;
}

.upmtsoa-faq-item.active .upmtsoa-faq-question i {
    transform: rotate(180deg);
}

.upmtsoa-faq-answer {
    padding: 0 25px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.upmtsoa-faq-item.active .upmtsoa-faq-answer {
    padding: 0 25px 25px;
    max-height: 500px;
}

.upmtsoa-faq-answer p {
    margin: 0;
    color: #7f8c8d;
    line-height: 1.6;
}

/* Map Section */
.upmtsoa-contact-map {
    padding: 100px 0;
    background: white;
}

.upmtsoa-map-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    background: #eae0e0;
    border-radius: 15px;
    overflow: hidden;
}

.upmtsoa-map-info {
    padding: 40px;
}

.upmtsoa-map-info h3 {
    font-size: 1.8rem;
    color: #2c3e50;
    margin-bottom: 15px;
}

.upmtsoa-map-info p {
    color: #7f8c8d;
    margin-bottom: 30px;
    line-height: 1.6;
}

.upmtsoa-map-details {
    margin-bottom: 30px;
}

.upmtsoa-map-details p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.upmtsoa-map-details i {
    color: #db6a34;
    width: 20px;
}

.upmtsoa-direction-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #c84d67;
    color: white;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s ease;
    font-weight: 600;
}

.upmtsoa-direction-btn:hover {
    background: #2980b9;
}

.upmtsoa-map-placeholder {
    height: 300px;
    background: #34495e00;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.upmtsoa-map-image {
    text-align: center;
}

.upmtsoa-map-image i {
    font-size: 3rem;
    margin-bottom: 15px;
    color: #f39c12;
}

.upmtsoa-map-image p {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.upmtsoa-map-image span {
    opacity: 0.8;
}

/* Responsive Design */
@media (max-width: 992px) {
    .upmtsoa-contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .upmtsoa-contact-title {
        font-size: 2.5rem;
    }
    
    .upmtsoa-map-wrapper {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .upmtsoa-contact-title {
        font-size: 2rem;
    }
    
    .upmtsoa-section-title {
        font-size: 2rem;
    }
    
    .upmtsoa-form-row {
        grid-template-columns: 1fr;
    }
    
    .upmtsoa-offices-grid {
        grid-template-columns: 1fr;
    }
    
    .upmtsoa-contact-badges {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 576px) {
    .upmtsoa-contact-hero,
    .upmtsoa-contact-methods,
    .upmtsoa-regional-offices,
    .upmtsoa-contact-faq,
    .upmtsoa-contact-map {
        padding: 60px 0;
    }
    
    .upmtsoa-contact-info-card,
    .upmtsoa-contact-form-card {
        padding: 25px;
    }
    
    .upmtsoa-contact-title {
        font-size: 1.8rem;
    }
    
    .upmtsoa-contact-subtitle {
        font-size: 1.1rem;
    }
}


/* Breaking News Details Section Styles */
.upmtsoa-breaking-news-details {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 60px 0;
    font-family: 'Noto Sans', sans-serif;
}

.upmtsoa-breaking-news-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.upmtsoa-breaking-news-header {
    text-align: center;
    margin-bottom: 50px;
}

.upmtsoa-breaking-news-title {
    font-size: 2.5rem;
    color: #1a365d;
    margin-bottom: 15px;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.upmtsoa-breaking-news-title:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(to right, #e53e3e, #dd6b20);
    border-radius: 2px;
}

.upmtsoa-breaking-news-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, #cbd5e0, transparent);
    margin-top: 25px;
}

.upmtsoa-news-item {
    display: flex;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-left: 4px solid #e53e3e;
}

.upmtsoa-news-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.upmtsoa-news-featured {
    border-left: 4px solid #64a7a4;
    position: relative;
}

.upmtsoa-news-featured:before {
    content: 'UPMTSOA';
    position: absolute;
    top: 15px;
    right: -30px;
    background: #dd6b20;
    color: white;
    padding: 5px 30px;
    font-size: 0.75rem;
    font-weight: 600;
    transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.upmtsoa-news-date {
    background: linear-gradient(135deg, #892727 0%, #245173 100%);
    color: white;
    padding: 25px 20px;
    text-align: center;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.upmtsoa-news-day {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    display: block;
}

.upmtsoa-news-month {
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 5px 0;
    display: block;
}

.upmtsoa-news-year {
    font-size: 1rem;
    font-weight: 500;
    display: block;
}

.upmtsoa-news-content {
    padding: 25px 30px;
    flex: 1;
}

.upmtsoa-news-headline {
    font-size: 1.5rem;
    color: #2d3748;
    margin-bottom: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.upmtsoa-news-description {
    font-size: 1rem;
    line-height: 1.6;
    color: #4a5568;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .upmtsoa-news-item {
        flex-direction: column;
    }
    
    .upmtsoa-news-date {
        min-width: 100%;
        padding: 15px;
        flex-direction: row;
        justify-content: center;
        gap: 15px;
    }
    
    .upmtsoa-news-day {
        font-size: 2rem;
    }
    
    .upmtsoa-news-month, .upmtsoa-news-year {
        font-size: 1rem;
    }
    
    .upmtsoa-news-content {
        padding: 20px;
    }
    
    .upmtsoa-news-headline {
        font-size: 1.3rem;
    }
    
    .upmtsoa-breaking-news-title {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .upmtsoa-breaking-news-details {
        padding: 40px 0;
    }
    
    .upmtsoa-breaking-news-container {
        padding: 0 15px;
    }
    
    .upmtsoa-news-date {
        gap: 10px;
    }
    
    .upmtsoa-news-day {
        font-size: 1.8rem;
    }
    
    .upmtsoa-news-headline {
        font-size: 1.2rem;
    }
}


/* News link styles */
.news-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.news-link:hover {
    color: #ff6b35;
    text-decoration: none;
}

/* Error styles for news details page */
.upmtsoa-news-error {
    text-align: center;
    padding: 60px 20px;
    background: #f8f9fa;
    border-radius: 10px;
    margin: 20px 0;
}

.upmtsoa-news-error i {
    font-size: 4rem;
    color: #6c757d;
    margin-bottom: 20px;
}

.upmtsoa-news-error h3 {
    color: #495057;
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.upmtsoa-news-error p {
    color: #6c757d;
    margin-bottom: 25px;
    font-size: 1.1rem;
}

.upmtsoa-back-link {
    display: inline-block;
    padding: 10px 20px;
    background: #0066cc;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s ease;
}

.upmtsoa-back-link:hover {
    background: #0052a3;
    text-decoration: none;
    color: white;
}


.agenda-item {
    background-color: #ffffff;        /* White background */
    border: 2px solid #77181870;       /* Green border */
    border-radius: 12px;              /* Rounded corners */
    padding: 20px;                    /* Space inside */
    margin: 15px 0;                   /* Space outside */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Subtle shadow */
    transition: all 0.3s ease;       /* Smooth hover transition */
}

.agenda-serial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #8f8188;       /* Green background */
    color: #fff;               /* White text */
    font-weight: bold;
    font-size: 1rem;
    border-radius: 50%;        /* Circular shape */
    border: 2px solid #ffffff; /* Optional: border for pop */
    box-shadow: 0 4px 8px rgb(0 0 0 / 54%); /* Subtle shadow */
    margin-right: 15px;        /* Space from text */
    flex-shrink: 0;            /* Prevent shrinking in flex layout */
}

.coming-soon {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  background: linear-gradient(135deg, #00416a, #799f0c, #ffe000);
  color: #fff;
  text-align: center;
  font-family: 'Noto Sans', sans-serif;
  padding: 40px 20px;
}

.coming-soon-content {
  background: rgba(0, 0, 0, 0.6);
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  max-width: 600px;
  width: 100%;
}

.coming-soon-content i {
  font-size: 3rem;
  margin-bottom: 20px;
  color: #ffd700;
  animation: pulse 1.5s infinite;
}

.coming-soon-content h1 {
  font-size: 2.5rem;
  margin-bottom: 15px;
  font-weight: 700;
}

.coming-soon-content p {
  font-size: 1.1rem;
  margin-bottom: 0;
  color: #ddd;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.card-image.icon-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, #f1f5f9, #b45c5c, #8b8f92);

    height: 150px;
    font-size: 3rem;
    color: #8c3131;
    position: relative;
    border-radius: 8px 8px 0 0;
}

.card-image.icon-bg i {
    font-size: 3rem;
}


/* UPMTSOA About Section - Modern Professional Design */
.about-upmtsoa-section {
    background: linear-gradient(135deg, #e3f2fd, #f9fbff, #ffffff);
    padding: 80px 20px;
    font-family: 'Poppins', sans-serif;
    color: #1a1a1a;
}

.about-upmtsoa-container {
    max-width: 1100px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 25px rgb(0 0 0 / 58%);
    padding: 50px;
    transition: all 0.3s ease;
}

.about-upmtsoa-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 35px rgba(0, 0, 0, 0.12);
}

.about-upmtsoa-title {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    color: #a46161;
    position: relative;
    margin-bottom: 30px;
}

.about-upmtsoa-title::after {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, #1a5276, #3498db);
    margin: 10px auto 0;
    border-radius: 3px;
}

.about-upmtsoa-text {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 20px;
    text-align: justify;
}

.about-upmtsoa-highlight-box {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}

.about-upmtsoa-highlight-item {
    background: #f9fcff;
    border: 2px dashed #aab2be;
    border-radius: 14px;
    display: flex;
    align-items: flex-start;
    padding: 20px 25px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.about-upmtsoa-highlight-item:hover {
    transform: translateY(-6px);
    border-color: #3498db;
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.15);
    background: #f0f8ff;
}

.about-upmtsoa-highlight-item i {
    font-size: 2rem;
    color: #db3434;
    margin-right: 15px;
    transition: transform 0.4s ease;
}

.about-upmtsoa-highlight-item:hover i {
    transform: rotate(10deg) scale(1.1);
    color: #1a5276;
}

.about-upmtsoa-highlight-content h4 {
    margin: 0 0 5px;
    font-size: 1.2rem;
    font-weight: 600;
    color: #6e6266;
}

.about-upmtsoa-highlight-content p {
    margin: 0;
    color: #555;
    font-size: 0.95rem;
}

/* OTP Form Styles */
.polling-otp-form {
    margin-top: 20px;
}

.otp-info {
    font-size: 0.9rem;
    color: #666;
    margin: 5px 0 10px;
    text-align: center;
}

.otp-resend {
    font-size: 0.9rem;
    color: #666;
    text-align: center;
    margin-top: 15px;
}

.otp-resend a {
    color: #0066cc;
    text-decoration: none;
    cursor: pointer;
}

.otp-resend a:hover {
    text-decoration: underline;
}

.polling-verify-btn {
    width: 100%;
    padding: 12px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

.polling-verify-btn:hover {
    background: #218838;
}

.polling-verify-btn.disabled {
    background: #cccccc;
    cursor: not-allowed;
}

#backToLogin {
    display: block;
    text-align: center;
    margin-top: 15px;
    color: #0066cc;
    text-decoration: none;
    cursor: pointer;
}

#backToLogin:hover {
    text-decoration: underline;
}


/* OTP form styling */
.validation-message.yellow {
    color: #f39c12;
    background-color: #fef9e7;
    border-left: 4px solid #f39c12;
}

.polling-otp-form {
    margin-top: 20px;
    animation: fadeIn 0.3s ease-in;
}

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

.otp-info {
    font-size: 0.9em;
    color: #666;
    margin-top: 5px;
}

.otp-resend {
    font-size: 0.9em;
    margin-top: 10px;
}

.otp-resend a {
    color: #3498db;
    text-decoration: none;
    font-weight: 500;
}

.otp-resend a:hover {
    text-decoration: underline;
}

/* Complain & Suggestion OTP form styling */
.complain-suggestion-otp-form {
    margin: 30px 0 20px 0;
    padding: 20px 15px;
    animation: fadeIn 0.3s ease-in;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.complain-suggestion-otp-info {
    font-size: 0.9em;
    color: #666;
    margin-top: 5px;
}

.complain-suggestion-otp-resend {
    font-size: 0.9em;
    margin-top: 10px;
}

.complain-suggestion-otp-resend a {
    color: #3498db;
    text-decoration: none;
    font-weight: 500;
}

.complain-suggestion-otp-resend a:hover {
    text-decoration: underline;
}

.complain-suggestion-verify-btn {
    width: 100%;
    padding: 12px;
    background-color: #27ae60;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    margin-top: 15px;
    transition: background-color 0.3s;
}

.complain-suggestion-verify-btn:hover {
    background-color: #219653;
}

.complain-suggestion-verify-btn:disabled {
    background-color: #95a5a6;
    cursor: not-allowed;
}

.agenda-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.agenda-header-content {
    flex: 1;
}

.view-details-btn {
    background: #777180;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    margin-top: 5px;
    transition: background 0.3s;
}

.view-details-btn:hover {
    background: #4c7985;
}

.agenda-details {
    transition: all 0.3s ease;
}

.vote-result {
    background: #27ae60;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 10px;
    font-weight: 500;
}

.vote-result i {
    margin-right: 8px;
}

.voting-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
}

.vote-btn {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s;
}

.vote-btn.satisfied {
    background: #27ae60;
    color: white;
}

.vote-btn.satisfied:hover {
    background: #219653;
}

.vote-btn.not-satisfied {
    background: #e74c3c;
    color: white;
}

.vote-btn.not-satisfied:hover {
    background: #c0392b;
}

.vote-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.vote-status {
    margin-top: 10px;
    padding: 10px;
    border-radius: 5px;
    font-weight: 500;
}

.vote-status.submitting {
    background: #f9f9f9;
    color: #666;
}

.vote-status.success {
    background: #d4edda;
    color: #155724;
}

.vote-status.error {
    background: #f8d7da;
    color: #721c24;
}


.vote-result.satisfied-bg {
    background: #27ae60;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.vote-result.not-satisfied-bg {
    background: #e74c3c;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 10px;
}