/* Global Styles */
:root {
    --primary-color: #6a11cb;
    --secondary-color: #2575fc;
    --accent-color: #00d2ff;
    --dark-bg: #1a1a2e;
    --gradient-main: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    --gradient-hover: linear-gradient(135deg, #5b0eb0 0%, #1e63d8 100%);
    --gradient-text: linear-gradient(to right, #6a11cb, #2575fc);
}

body {
    font-family: 'Poppins', sans-serif;
    color: #333;
    overflow-x: hidden;
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* Navbar */
.navbar {
    transition: all 0.4s ease;
    padding: 1.2rem 0;
}

/* Remove scroll effect styles since it's always white now */
.navbar.scrolled {
    padding: 0.8rem 0;
}

.nav-link {
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    position: relative;
    color: #555 !important; /* Dark text by default */
}

.nav-link:hover, .nav-link.active {
    color: var(--secondary-color) !important;
}

.nav-link::after {
    content: '';
    display: block;
    width: 0;
    height: 3px; /* Thicker underline */
    background: var(--secondary-color); /* Blue underline */
    transition: width .3s;
    position: absolute;
    bottom: 0; /* Align to bottom */
    left: 1rem;
}

.nav-link:hover::after, .nav-link.active::after {
    width: calc(100% - 2rem);
}

/* Dropdown Menu */
.dropdown-menu {
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: none;
    padding: 0.5rem;
    margin-top: 1rem;
    animation: fadeInDropdown 0.3s ease;
}

.dropdown-item {
    border-radius: 8px;
    font-weight: 500;
    color: #555;
    transition: all 0.2s;
    padding: 0.6rem 1rem;
}

.dropdown-item:hover {
    background: #f8f9fa;
    color: var(--secondary-color);
    transform: translateX(5px);
}

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

/* Buttons */
.btn-gradient {
    background: var(--gradient-main);
    border: none;
    color: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-gradient:hover {
    background: var(--gradient-hover);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(37, 117, 252, 0.4);
    color: white;
}

.btn-primary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

/* Hero Section */
.hero-section {
    min-height: 100vh;
    padding-top: 100px; /* Offset navbar height */
    background: var(--gradient-main);
    position: relative;
    z-index: 1;
    border-radius: 0 0 0 100px; /* Curve effect at bottom left or custom shape */
    /* To match screenshot: The screenshot shows a rounded rectangle card for the hero or the navbar cutting into it.
       Actually, the screenshot shows the hero section IS blue, and the navbar IS white.
       The blue hero section seems to have rounded corners. */
    border-radius: 30px;
    margin: 100px 20px 20px 20px; /* Add margin around hero to make it look like a card */
    padding-top: 0; /* Remove padding-top since we have margin */
    display: flex;
    align-items: center;
}

/* Adjust overlay to match rounded corners */
.hero-section .overlay-gradient {
    border-radius: 30px;
}

.hero-image-wrapper img {
    max-height: 450px;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.hover-scale {
    transition: transform 0.3s ease;
}

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

/* Floating Animation */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float 6s ease-in-out infinite 2s;
}

.animate-float-reverse {
    animation: floatReverse 7s ease-in-out infinite 1s;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

@keyframes floatReverse {
    0% { transform: translateY(0px); }
    50% { transform: translateY(15px); }
    100% { transform: translateY(0px); }
}

/* Floating Cards Position */
.top-10 { top: 10%; }
.bottom-10 { bottom: 10%; }
.start-0 { left: -30px !important; }
.end-0 { right: -30px !important; }

/* Typography Gradient */
.text-gradient {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Glassmorphism Cards */
.bg-gradient-dark {
    background: var(--dark-bg);
}

.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    transition: transform 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.1);
}

.icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
}

/* Background Shapes */
.bg-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 1;
}

.shape-1 {
    width: 300px;
    height: 300px;
    background: var(--primary-color);
    top: -50px;
    left: -50px;
    opacity: 0.4;
}

.shape-2 {
    width: 400px;
    height: 400px;
    background: var(--secondary-color);
    bottom: -100px;
    right: -100px;
    opacity: 0.3;
}

/* Program Cards */
.hover-card {
    transition: all 0.3s ease;
    overflow: hidden;
}

.hover-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
}

.hover-card img {
    transition: transform 0.5s ease;
}

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

.btn-link {
    color: var(--secondary-color);
    font-weight: 600;
}

/* Contact Section */
.bg-gradient-sidebar {
    background: var(--gradient-main);
}

.form-control:focus {
    box-shadow: none;
    border: 1px solid var(--secondary-color);
}

/* Footer */
footer {
    background: #0f0f1a;
}

/* Animations */
.animate-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s forwards;
}

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

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* Scroll Reveal Classes (Handled by JS) */
.reveal-left, .reveal-right, .reveal-bottom {
    opacity: 0;
    transition: all 1s ease;
}

.reveal-left { transform: translateX(-50px); }
.reveal-right { transform: translateX(50px); }
.reveal-bottom { transform: translateY(50px); }

.reveal-left.active, .reveal-right.active, .reveal-bottom.active {
    opacity: 1;
    transform: translate(0);
}

/* Call to Action Circle */
.circle-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 0;
    padding-bottom: 120%;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    z-index: 1;
}