@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@400;500;600;700;800&display=swap');

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
}

/* Custom Colors Configuration for Tailwind to use via arbitary values or we can just define some utilities if needed, but Tailwind arbitrary values are easier. We will use them in HTML directly. */

/* Custom Hover Animations */
.hover-scale {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.hover-scale:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.btn-magenta {
    background-color: #E32B70;
    transition: all 0.3s ease;
}
.btn-magenta:hover {
    background-color: #c01d5a;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px 0 rgba(227, 43, 112, 0.39);
}

.link-hover-magenta {
    position: relative;
    text-decoration: none;
}
.link-hover-magenta::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 5px;
    right: 0;
    background: #E32B70;
    transition: width 0.3s ease;
    -webkit-transition: width 0.3s ease;
}
.link-hover-magenta:hover::after {
    width: 100%;
    left: 0;
    background: #E32B70;
}

/* Dark Mode Specific Overrides */
.dark-section {
    background-color: #0F172A;
    color: #F8FAFC;
}

/* Hero Section Image Overlay */
.hero-overlay {
    background: linear-gradient(rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.8));
}

/* Form Styles */
.form-input {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-input:focus {
    border-color: #E32B70;
    box-shadow: 0 0 0 3px rgba(227, 43, 112, 0.2);
    outline: none;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 15px rgba(227, 43, 112, 0.4); }
    50% { box-shadow: 0 0 30px rgba(227, 43, 112, 0.8); }
}
.animate-pulse-glow {
    animation: pulse-glow 2s infinite;
}

/* Infinite Marquee */
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
}
.marquee-content {
    display: flex;
    width: max-content;
    animation: scroll-left 40s linear infinite;
}
.marquee-content:hover {
    animation-play-state: paused;
}
@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}