@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

:root {
  --primary-color: #59057B; /* Purple from palette */
  --secondary-color: #000957; /* Deep Navy */
  --accent-color: #1ABC9C; /* Teal */
  --light-color: #FEFAE0; /* Cream */
  --dark-color: #0F1021;
  --gradient-primary: linear-gradient(135deg, #59057B 0%, #1ABC9C 100%);
  --hover-color: #344CB7;
  --background-color: #F2F2F2;
  --text-color: #2C3E50;
  --border-color: rgba(90, 5, 123, 0.2);
  --divider-color: rgba(26, 188, 156, 0.2);
  --shadow-color: rgba(15, 7, 102, 0.1);
  --highlight-color: #ECE852;
  --main-font: 'Playfair Display', serif;
  --alt-font: 'Inter', sans-serif;
}

body {
    -webkit-font-smoothing: antialiased;
}

/* Custom shadow for components */
.section-card {
    background: #ffffff;
    box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
}

/* Link underline effect */
nav a {
    position: relative;
    padding-bottom: 2px;
}
nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--highlight-color);
    transition: width 0.3s ease;
}
nav a:hover::after {
    width: 100%;
}

@media (max-width: 768px) {
    header nav {
        display: none;
        flex-direction: column;
        padding: 20px;
    }
}