/* Prevent horizontal overflow / empty space on mobile (zoom-out, edge-drag) */
html {
    overflow-x: hidden;
    width: 100%;
}

/* Custom Typography & Utility Classes */
body { 
    font-family: 'Inter', sans-serif; 
    overflow-x: hidden;
    width: 100%;
    position: relative;
}


.bg-navy { 
    background-color: #0c1829; 
}

.bg-red-custom { 
    background-color: #e62329; 
}

.text-red-custom { 
    color: #e62329; 
}

.font-urdu { 
    font-family: 'Noto Nastaliq Urdu', serif; 
    line-height: 2.2; 
}

/* Custom Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom Red Hover Style for Navigation Dropdowns */

.dropdown-item {
    display: block;
    padding: 0.5rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #374151; /* gray-700 */
    border-radius: 0.375rem; /* rounded-md */
    transition: all 0.2s ease-in-out;
}

.dropdown-item:hover {
    background-color: #e62329; /* Red theme color */
    color: #ffffff !important;
    transform: translateX(3px);
}

/* Rotate Chevron Arrow on Hover */
.dropdown-wrapper:hover button i {
    transform: rotate(180deg);
    color: #e62329;
}

/* Mobile Dropdown Item Style */
.mobile-dropdown-item {
    display: block;
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    color: #4b5563;
    border-radius: 0.375rem;
    transition: all 0.2s ease-in-out;
}

.mobile-dropdown-item:hover {
    background-color: #e62329;
    color: #ffffff !important;
}
/* Navigation Links Uppercase */
nav a, .dropdown-item {
    text-transform: uppercase;
}

/* Top Utility Bar Custom Styling */
.top-utility-bar {
    background-color: #1d4ed8 !important; /* Royal Blue Background */
    border-bottom-color: #1e40af !important; /* Slightly darker shade for subtle bottom border */
}

/* Contact Icons Color Adjustments */
.top-utility-bar .custom-icon {
    color: #f87171; /* Bright red-400 for high visibility on royal blue */
}

/* Social Icons & Announcement Text Clarity */
.top-utility-bar a,
.top-utility-bar span {
    color: #ffffff;
}

.top-utility-bar a:hover {
    color: #fca5a5 !important; /* Soft red hover effect for social icons */
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.25s ease-out forwards;
}

/* Pulse Animation for Sticky WhatsApp Button */
@keyframes pulse-green {
    0% { 
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); 
    }
    70% { 
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); 
    }
    100% { 
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); 
    }
}

.whatsapp-float {
    animation: pulse-green 2s infinite;
}

/* Swiper Custom Navigation & Pagination Colors */
.swiper-button-next, 
.swiper-button-prev { 
    color: #ffffff; 
}

.swiper-pagination-bullet-active { 
    background: #e62329 !important; 
}

/* Desktop Smooth Dropdown Animation */
.dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease-in-out;
}

.dropdown-wrapper:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Footer Custom Links (Main Links Arrows) */
.footer-arrow-link {
    display: flex;
    align-items: center;
    transition: all 0.2s ease-in-out;
}

.footer-arrow-link i {
    color: #e62329;
    font-size: 11px;
    margin-right: 8px;
    transition: transform 0.2s ease-in-out;
}

.footer-arrow-link:hover {
    color: #ffffff;
    transform: translateX(3px);
}

.footer-arrow-link:hover i {
    color: #ffffff;
}

/* Footer Custom Links (Key Programs Dots) */

/* Base Dot Styling */
.dot-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
}

/* Unique Color Classes */
.dot-amber   { background-color: #f59e0b !important; }
.dot-red     { background-color: #e62329 !important; }
.dot-blue    { background-color: #3b82f6 !important; }
.dot-cyan    { background-color: #06b6d4 !important; }
.dot-indigo  { background-color: #6366f1 !important; }
.dot-emerald { background-color: #10b981 !important; }
.dot-purple  { background-color: #a855f7 !important; }
.dot-pink    { background-color: #ec4899 !important; }
.footer-dot-link {
    display: flex;
    align-items: center;
    transition: all 0.2s ease-in-out;
}

.footer-dot-link:hover {
    color: #ffffff;
    transform: translateX(3px);
}
/* Custom Timeline Styles */
.timeline-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.timeline-container::after {
    content: '';
    position: absolute;
    width: 3px;
    background-color: #e5e7eb;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1.5px;
}

.timeline-dot {
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    border: 4px solid #1d4ed8;
    border-radius: 50%;
    z-index: 10;
}

.timeline-dot.active {
    border-color: #e62329;
    background-color: #e62329;
    box-shadow: 0 0 0 4px rgba(230, 35, 41, 0.2);
}

/* Glassmorphic Card Effect */
.glass-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustment for Mobile screens */
@media (max-width: 768px) {
    .timeline-container::after {
        left: 20px;
    }
    .timeline-dot {
        margin-left: 10px !important;
    }
}
/* Color Palette Standardization */
:root {
  --color-navy: #0c1829;
  --color-blue-primary: #1d4ed8;
  --color-red-custom: #e62329;
  --color-bg-slate: #0f172a;
}

/* Contrast Helper Utility Classes */
.bg-navy { background-color: var(--color-navy) !important; }
.bg-red-custom { background-color: var(--color-red-custom) !important; }
.text-red-custom { color: var(--color-red-custom) !important; }

/* Dark Section Text Readability Overrides */
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4,
.bg-slate-900 h1, .bg-slate-900 h2, .bg-slate-900 h3, .bg-slate-900 h4 {
  color: #ffffff !important;
}

.bg-navy p, .bg-slate-900 p {
  color: #cbd5e1 !important; /* High contrast slate-300 for paragraph text */
}

/* Timeline Custom Styles */
.timeline-container {
  position: relative;
}
.timeline-container::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: #e2e8f0;
  transform: translateX(-50%);
}
@media (max-width: 768px) {
  .timeline-container::before {
    left: 20px;
  }
}

.timeline-dot {
  width: 16 h;
  height: 16px;
  background-color: var(--color-red-custom);
  border: 4px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(230, 35, 41, 0.2);
  z-index: 10;
}