@font-face {
    font-family: 'Sansation';
    src: url('../font/Sansation_Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Sansation';
    src: url('../font/Sansation_Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Sansation';
    src: url('../font/Sansation_Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Sansation';
    src: url('../font/Sansation_Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

body {
    font-family: 'Sansation', sans-serif;
}

/* Section backgrounds */
.section-pattern-1 {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    position: relative;
}

.section-pattern-1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle at 25% 25%, rgba(53, 189, 211, 0.05) 0%, transparent 50%),
                      radial-gradient(circle at 75% 75%, rgba(2, 80, 159, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.section-pattern-2 {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    position: relative;
}

.section-pattern-2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle at 75% 25%, rgba(224, 32, 43, 0.03) 0%, transparent 50%),
                      radial-gradient(circle at 25% 75%, rgba(245, 205, 12, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.section-pattern-3 {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    position: relative;
}

.section-pattern-3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(45deg, transparent 40%, rgba(53, 189, 211, 0.02) 40%, rgba(53, 189, 211, 0.02) 60%, transparent 60%);
    background-size: 60px 60px;
    pointer-events: none;
}

.hero-bg {
    background-image: url('../img/hero.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

:root {
    --color-red: #e0202b;
    --color-blue: #35bdd3;
    --color-dark-blue: #02509f;
    --color-yellow: #f5cd0c;
}

.bg-custom-red { background-color: var(--color-red); }
.bg-custom-blue { background-color: var(--color-blue); }
.bg-custom-dark-blue { background-color: var(--color-dark-blue); }
.bg-custom-yellow { background-color: var(--color-yellow); }

.text-custom-red { color: var(--color-red); }
.text-custom-blue { color: var(--color-blue); }
.text-custom-dark-blue { color: var(--color-dark-blue); }
.text-custom-yellow { color: var(--color-yellow); }
.text-custom-yellow-dark { color: #b8860b; }

.border-custom-red { border-color: var(--color-red); }
.border-custom-blue { border-color: var(--color-blue); }
.border-custom-dark-blue { border-color: var(--color-dark-blue); }
.border-custom-yellow { border-color: var(--color-yellow); }