@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,400&family=Open+Sans:wght@300;400;500;600;700&display=swap');

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-edu-primary { background-color: #1A365D; } /* Navy Blue */
    .bg-edu-secondary { background-color: #2B6CB0; } /* Blue */
    .bg-edu-accent { background-color: #F6AD55; } /* Orange/Yellow */
    .bg-edu-light { background-color: #F7FAFC; } /* Very Light Gray */
    .bg-edu-white { background-color: #FFFFFF; }
    
    .text-edu-primary { color: #1A365D; }
    .text-edu-secondary { color: #2B6CB0; }
    .text-edu-accent { color: #DD6B20; } /* Darker Orange for text */
    .text-edu-muted { color: #718096; }
    
    .font-serif-edu { font-family: 'Merriweather', serif; }
    .font-sans-edu { font-family: 'Open Sans', sans-serif; }
}

.edu-btn {
    @apply inline-flex items-center justify-center px-8 py-3.5 bg-[#F6AD55] text-[#1A365D] font-sans-edu font-bold rounded shadow-md hover:bg-[#ED8936] hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300;
}

.edu-btn-outline {
    @apply inline-flex items-center justify-center px-8 py-3.5 border-2 border-[#1A365D] text-[#1A365D] font-sans-edu font-bold rounded hover:bg-[#1A365D] hover:text-white transition-all duration-300;
}

.edu-card {
    @apply bg-white p-8 border border-gray-200 rounded shadow-sm hover:shadow-xl hover:border-[#2B6CB0] transition-all duration-300 relative overflow-hidden group;
}

.edu-card::before {
    content: '';
    @apply absolute top-0 left-0 w-full h-1 bg-[#F6AD55] transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left;
}

/* Subtle Grid Pattern for academic feel */
.grid-pattern {
    background-size: 40px 40px;
    background-image: 
        linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px);
}

.grid-pattern-light {
    background-size: 40px 40px;
    background-image: 
        linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
}

/* Diagonal Cut */
.clip-diagonal {
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}