:root {
    --primary-color: #808;
    --secondary-color: #f0f;
    --text-color: #404;
    --background-color: #FFF;
    --accent-color: #0FF;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
}

header {
    background: var(--background-color);
    background: #101;
    color: var(--primary-color);
    padding: .5rem 0;
    text-align: center;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.contact-link {
    color: #FFF;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 99px;
    transition: background-color .3s;
    background: none;
}

.contact-link:hover {
    background: #404;
}

#logo svg {
    max-width: 300px;
    width: 100%;
    height: auto;
}

h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

@media (max-width: 599px) {
    h1 {
        font-size: 2.5rem;
    }
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

@media (max-width: 599px) {
    h2 {
        font-size: 2rem;
    }
}

section {
    padding: 4rem 0;
}

.hero {
    background-color: #202;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='1' y1='1' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23F0F'/%3E%3Cstop offset='.25' stop-color='%23220022'/%3E%3Cstop offset='.75' stop-color='%23220022'/%3E%3Cstop offset='1' stop-color='%23F0F'/%3E%3C/linearGradient%3E%3CradialGradient id='b' x1='0' x2='1' y1='1' y2='1' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23101'/%3E%3Cstop offset='1' stop-color='%23220022'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url(%23b)' stroke='url(%23a)' stroke-width='1'%3E%3Ccircle cx='1000' cy='750' r='1350'%3E%3CanimateTransform attributeName='transform' type='rotate' dur='6s' begin='-3s' values='0 1000 750%3B180 1000 750' repeatCount='999'%3E%3C/animateTransform%3E%3C/circle%3E%3Ccircle cx='1000' cy='750' r='1150'%3E%3CanimateTransform attributeName='transform' type='rotate' dur='6s' begin='-3s' values='0 1000 750%3B-180 1000 750' repeatCount='999'%3E%3C/animateTransform%3E%3C/circle%3E%3Ccircle cx='1000' cy='750' r='950'%3E%3CanimateTransform attributeName='transform' type='rotate' dur='6s' begin='-3s' values='0 1000 750%3B180 1000 750' repeatCount='999'%3E%3C/animateTransform%3E%3C/circle%3E%3Ccircle cx='1000' cy='750' r='750'%3E%3CanimateTransform attributeName='transform' type='rotate' dur='6s' begin='-3s' values='0 1000 750%3B-180 1000 750' repeatCount='999'%3E%3C/animateTransform%3E%3C/circle%3E%3Ccircle cx='1000' cy='750' r='550'%3E%3CanimateTransform attributeName='transform' type='rotate' dur='6s' begin='-3s' values='0 1000 750%3B180 1000 750' repeatCount='999'%3E%3C/animateTransform%3E%3C/circle%3E%3Ccircle cx='1000' cy='750' r='350'%3E%3CanimateTransform attributeName='transform' type='rotate' dur='6s' begin='-3s' values='0 1000 750%3B-180 1000 750' repeatCount='999'%3E%3C/animateTransform%3E%3C/circle%3E%3Ccircle cx='1000' cy='750' r='150'%3E%3CanimateTransform attributeName='transform' type='rotate' dur='6s' begin='-3s' values='0 1000 750%3B180 1000 750' repeatCount='999'%3E%3C/animateTransform%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    color: white;
    padding: 4rem 0 6rem 0;
}
@media (min-width: 768px) {
    .hero {
        padding: 6rem 0 8rem 0;
    }
}

.hero-card {
    background-color: #11001111;
    padding: 2rem 2.5rem;
    border-radius: 1rem;
    backdrop-filter: blur(5px);
    max-width: 1000px;
    margin: 0 auto;
    box-shadow: inset 0 0 100px 0 rgba(255, 0, 255, 0.2),
        inset 0 1px 1px 1px rgba(255, 255, 255, 0.2),
        10px 10px 20px 0 rgba(0, 0, 0, 0.5);
}
@media (min-width: 768px) {
    .hero-card {
        padding: 3rem 5rem;
    }
}

.hero-card hr, 
.hero-card-bottom hr {
    border: none;
    height: 30px;
    padding: 30px;
    width: 100%;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100"><path fill="%23FF00FF" d="M925 48c-11.1 1.3-22.2 2.7-33.3 4.3.4-.5.7-1.1.8-1.8l14-7.3c1.7-.9 1-4-1-3.7l-8 1 4-1.4c2.4-.9 1.4-4.2-1.1-3.9-13 1.8-25.9 4.1-38.7 6.8l-29.5 4.2 10-4.4c1.7-.8 1.1-4.1-1.6-3.7-7.4 1.2-14.8 2.7-22 4.6 1.2-1.1.8-3.8-1.3-3.5-21.4 2.4-41 5-60.9 7.9l4.1-1.6c2.6-1 1.4-4-.5-4l-17.7 1.6c.6-1.5-.5-3-2.4-2.7-12 2-24 4-35.9 6.4l-7.2.5c.9-1.2.3-3.3-1.5-3.2h-.6c-.2-.8-1-1.6-1.9-1.5-13 1.5-26.1 3-39.2 4.7 1.8-.7 0-.1 6.5-1.9 2.5-.7 1.5-4.3-1-3.9L641.6 45a2 2 0 0 0-2.4-1.5l-7.9 1.4c-.2-.9-.8-1.6-1.8-1.5a476 476 0 0 0-22 2.5 2 2 0 0 0-2.4-1.6l-9.2 1.5c-.5-.6-1.2-.8-2-.6l-25 4 1.5-.4c2-.7 1.8-4-.5-4-6.6.3-13 .7-19.6 1.2-.2-1.2-1.3-1.8-2.5-1.6l-12.7 2c0-.8-.7-1.6-1.9-1.6-10.2.4-20.3 2.1-30 5.3.2-1-.2-2.2-1.4-2.5-5.4-1.6-11-.5-16.5.4 1.9-.7 1.3-4-.8-3.8a865.5 865.5 0 0 0-35.2 4.4c4.7-1.2 4.6-1 11.8-2.5.7-.2 1.1-.6 1.3-1.2l1-.3c2-.6 1.8-4.1-.6-4-11 1-21.9 2.3-32.8 4-.3-.3-.6-.4-1-.3-3.1.1-6.3.4-9.4.7.4-1.2-.2-2.8-1.8-2.7a605.2 605.2 0 0 0-45.1 5c-.3-.4-.9-.7-1.5-.6L343.5 49l9.1-2.7a2 2 0 0 0-1-3.8L313 47.8l6.6-1.4c2.2-.5 1.7-4.2-.5-4-11.8 1.1-23.6 2.4-35.4 3.8.7-1.2 0-3.3-1.7-3.2l-7.2.6.7-.1c1-.3 1.6-1.5 1.4-2.5-.3-1.1-1.4-1.6-2.5-1.4L253 42.9c-.7-.5-.9-.3-4.7 0-15.5.3-31 1.3-46.4 2.4-.3-.7-.8-1-1.4-1.2l1.9-.4c2.2-.6 2-4.3-1-3.9-13.3 2-26.6 4.2-39.8 6.6.4-1.3-.2-3-1.8-2.8l-7.7.6v-.3c.6 0 1-.2 1.6-.4 2-.5 1.7-4-.6-3.9C119.2 42.4 87 46 55 50.5c-2.2.3-1.8 4 .6 3.9.2.8.8 1.4 1.8 1.3L93 54.2C70.7 57 75 57.4 46 58.7c-1.6 0-2.2 1.8-1.7 3-3.1.5-6.2 1-9.3 1.7-2.2.4-1.7 4 .6 3.9l19-1.6-2.7 1c-2 .8-2 4 .5 4 13.4-.4 26.9-1.3 40.3-2.7.4.7 1.3 1 2.2.9 8.3-1.4 13.1-2.5 16-3-.4 1.3.7 2.6 1.9 2.5 9.3-.6 18.7-1.3 28-2.2l-.7.2c-1.4.4-1.7 2-1.1 3l-13 2.7c-2.2.4-1.7 4 .5 3.9a474 474 0 0 0 44.1-5.7c.6.2.5.2 7.3-.6l-4 1.2c-2.5.7-1.4 4.2 1.1 3.8 11.4-1.6 22.7-3.7 34-6.2l.2.5-5.5 1.7c-2.5.8-1.5 4.3 1 3.8l33.8-5.7.5.2c.2.9 1 1.8 2 1.7l8.8-1.1c6.2.2 12.4.1 18.6-.1v.3l-2.5.4c-2.2.4-1.7 4 .5 4l7.5-.5c.3.5.8.8 1.5.8 12-.6 24.2-1 36.2-2l-1.2.4c-2.5.9-1.4 4.3 1 3.9 15.8-2.5 31.6-5.4 47.2-8.7.7 1.2 1.8.8 4.2.5 0 .3.2.5.3.6l-6.6 2.8c-2.4 1-1.5 4.3 1 3.9 67.2-11.4 66.8-11.2 67.2-11.5 1.8 0 3.5-.2 5.3-.3l-10.6 2.3c-2.2.5-1.7 4.2.5 4 33.7-3.2 26-2.9 45.9-4.2-1.4 1-.9 3.7 1.1 3.6a268 268 0 0 0 15.6-1.2c.3.5.8.9 1.6.8 12.4-.6 24.8-1.6 37.2-2.8-.1 1 .5 2 1.9 2l1.4-.1-1.1.3c-2.3.5-2 4.3 1 3.8 53-8 46.4-7.2 53-7.1-2.7 1-5.4 2-8.1 3.2-2.4 1-1.5 4.2 1 3.8l22.9-3.5c.3.6.8 1 1.7 1 15.8-.8 22.5-2.8 28.1-3.2.4.5.9.8 1.6.7l15.7-1.4-8.2 2.5c-2.2.6-1.8 3.9.5 3.9 7.2 0 14.4-.3 21.6-1 .2.7.8 1.3 1.8 1.3 16.9-.4 33.7-2 50.3-4.8 12-2 10.5-1.5 17.4-2.8l.1.2-8.6 3.5c-2.4 1-2.6 5.8 6 3.8 13.6-3.2 25.5-5.2 41-5.9.3.3.7.5 1.2.4l13.4-1.4a2 2 0 0 0-.4.3l-14.2 3.5c-2.5.7-1.4 4.3 1 3.9 37.5-6.7 32.2-5.7 39.4-6.7.2.8.9 1.4 1.9 1.4 7.7 0 15.4-.4 23.1-.9 0 1.1 1 2.3 2.5 2l8.7-1.5c.3.2.6.2 1 .2 2-.2 4.1-.7 6.1-1.4l5.7-1c.4.5 1 .7 1.7.6l28.1-4.7c-1.3 1.3 0 3.6 1.5 3.4 8-.9 15.8-3.4 22.8-7.5 1.4-.8 1.2-2.3.3-3 4.9-.7 10.1-1.4 18.9-2.4 1-.1 2-.8 2-2 0-1-1-2.1-2-2ZM92.4 64c-8 .9-16.2 1.6-24.3 2l5.4-1c.7 0 1.2-.6 1.4-1.2 11.6-1 9.2-.8 18.7-1.8-.9.3-1.3 1.2-1.2 2Zm105.1-5.7c-.6-.4-1.4-.5-2 0l-1.8 1.1-13 1.2 2.8-.6c1-.2 1.7-1.4 1.4-2.4l15-1c0 .3.2.6.5.9-2 .4-2.4.3-2.9.8ZM605.7 61l15.1-2.7c.1.3.3.6.6.8-8.4 1.8-6.8 1.6-15.7 2Zm46.1 6c10.9-3.3 6.2-2.4 19.7-3.6l-19.7 3.5Zm40.8-10.5c-11.8 1.6-9.6 1.3-16.6 2l18.6-4h.2c-1 .4-2 .6-2.2 2Zm113.3-2.4-1.7.1V54l1.6-.2v.3Zm-36.3-3.4c0-.5-.1-1-.4-1.4l20-2.7c-6.5 1.5-13 2.9-19.6 4.1Zm16.4 9.5.3.1v.2l-2.4.3 2.1-.6Zm36.6-.8 11.5-2.6v.1c-6.6 1.4-9.6 2.2-11.5 2.5Zm16.5 3c-1 .2-8.7.7-9.8.8 6.3-1.3 8.8-2 10.5-2.2-.4.4-.7.8-.7 1.4Zm49.6-14.7a2 2 0 0 0-2.3-1.2l-5.6 1 5.3-2 9.1-.8c-6.4 3.2-5.8 2.9-6.5 3Z"></path></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.hero h1 {
    font-size: 3rem;
    color: white;
    line-height: 1.2;
    text-shadow: 2px 0px 0 #F0F, -2px -0px 0 #0FF;
    margin-bottom: 1rem;
}
@media (max-width: 599px) {
    .hero h1 {
        font-size: 2.5rem;
    }
}

.text-center {
    text-align: center;
}

.hero .tagline {
    font-size: 1.5rem;
    font-weight: bold;
    color: #0FF;
    margin-bottom: 1.5rem;
}

.hero p:last-child {
    margin-top: 1.5rem;
    font-weight: 600;
}

.description {
    font-size: 1.2rem;
    margin: 0 auto;
}

@media (max-width: 599px) {
    .hero-card .description {
        font-size: 1rem;
    }
}

.event-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.details {
    background-color: #FFF;
    background-image: url("img/pvdbg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.info-card {
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.info-card h2 {
    color: var(--primary-color);
    margin: 1rem 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.info-card p {
    margin-bottom: 0.5rem;
    color: #333;
    font-size: 1.1rem;
}

.info-card.big {
    background-color: #FFFFFF88;
    backdrop-filter: blur(6px);
    border-radius: 1.5rem;
    box-shadow: inset 0 0 100px 0 rgba(255,255,255,0.1),
        inset 0 0 0 1px rgba(255,255,255,0.9),
        8px 4px 32px 0 rgba(32, 0, 32, 0.1);
    padding: 2.5rem 2rem;
    max-width: 800px;
    margin: 2rem auto;
    text-align: left;
}

.info-card.big h2,
.info-card.big p {
    text-align: left;
    margin: 0.3rem 0;
}

.info-card.big h2 {
    font-size: 1.4rem;
}

.info-card.big p {
    margin: 0;
    color: #333;
    font-size: 1.1rem;
}
@media (max-width: 599px) {
    .info-card.big p {
        font-size: 0.95rem;
    }
}

@media (max-width: 900px) {
    .info-card.big {
        max-width: 100%;
    }
}

.hosts {
    text-align: center;
    background-color: #220022;
    color: white;
    padding: 5rem 0;
}

@media (min-width: 768px) {
    .hosts {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080"><path fill="%23220022" d="M0 0h1920v1080H0z"/><defs><linearGradient id="b" x1="-960" x2="960" y1="540" y2="540" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="%23202"><animate attributeName="offset" begin="0" dur="10s" repeatCount="999" values=".25;.4;.25"/></stop><stop offset=".5" stop-color="%23808"/><stop offset="1" stop-color="%23202"><animate attributeName="offset" begin="0" dur="10s" repeatCount="999" values=".75;.6;.75"/></stop><animateTransform attributeName="gradientTransform" begin="0" dur="10s" repeatCount="999" type="rotate" values="0 0 0;360 0 0"/></linearGradient><g id="a" fill="none" stroke-width="2" transform="translate(960)"><ellipse rx="2122.6" ry="1195.3"/><ellipse rx="2059.8" ry="1159.9"/><ellipse rx="1997" ry="1124.5"/><ellipse rx="1934.2" ry="1089.1"/><ellipse rx="1871.4" ry="1053.7"/><ellipse rx="1808.6" ry="1018.3"/><ellipse rx="1745.8" ry="982.9"/><ellipse rx="1683" ry="947.5"/><ellipse rx="1620.2" ry="912.1"/><ellipse rx="1557.4" ry="876.7"/><ellipse rx="1494.6" ry="841.3"/><ellipse rx="1431.8" ry="805.9"/><ellipse rx="1369" ry="770.5"/><ellipse rx="1306.2" ry="734.6"/><ellipse rx="1243.4" ry="699.1"/><ellipse rx="1180.6" ry="663.6"/><ellipse rx="1117.8" ry="628.1"/><ellipse rx="1055" ry="592.7"/><ellipse rx="992.1" ry="557.2"/><ellipse rx="929.3" ry="521.7"/><ellipse rx="866.5" ry="486.2"/><ellipse rx="803.7" ry="450.7"/><ellipse rx="740.9" ry="415.3"/><ellipse rx="678.1" ry="379.8"/><ellipse rx="615.3" ry="344.3"/><ellipse rx="552.5" ry="308.8"/><ellipse rx="489.7" ry="273.4"/><ellipse rx="426.9" ry="237.9"/><ellipse rx="364" ry="202.4"/><ellipse rx="301.2" ry="166.9"/><ellipse rx="238.4" ry="131.4"/><ellipse rx="175.6" ry="96"/><ellipse rx="112.8" ry="60.5"/><ellipse rx="50" ry="25"/></g></defs><use stroke="url(%23b)" href="%23a"/><use stroke="%23880088" stroke-opacity=".1" href="%23a"/></svg>');
        background-size: cover;
        background-position: bottom;
        background-repeat: no-repeat;
    }
}

.host-list {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.host {
    text-align: center;
    max-width: 200px;
}

.host-image {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 1rem;
    position: relative;
    box-shadow: 5px 5px 20px -8px #0FF,
        -5px -5px 20px -8px#F0F,
        -10px 10px 40px -4px rgba(0, 0255, 255, 0.4),
        10px -10px 40px -4px rgba(255, 0, 255, 0.4);
}

.host-image::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, #F0F, transparent);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.5;
    filter: blur(8px);
}

.host-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.host p {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.host span {
    display: block;
    font-size: 0.9rem;
    font-weight: 400;
    color: white;
    opacity: 0.8;
}

.partner {
    margin-top: 3rem;
}

.partner-head {
    font-size: 1.25rem;
    color: #FFF;
    margin-bottom: 0.5rem;
}

footer {
    background-color: var(--text-color);
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000'%3E%3CradialGradient id='a' cx='0' fx='.9' cy='.1' fy='-0.9' r='.3' fr='1.7' gradientUnits='objectBounbdingBox' gradientTransform='rotate(0 .5 .5) '%3E%3Cstop offset='.5' stop-color='%230FF' stop-opacity='0'/%3E%3Cstop offset='.6' stop-color='%230FF' stop-opacity='.5' /%3E%3Cstop offset='.9' stop-color='%23f0f' /%3E%3Cstop offset='1' stop-color='%23F00' stop-opacity='.1' /%3E%3C/radialGradient%3E%3CradialGradient id='b' href='%23a' r='.9' gradientTransform='rotate(270 .2 .9) translate(-.18 0) scale(-1) '%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='1.2' fx='.5' cy='.95' fy='.65' r='.8' frgradientUnits='objectBounbdingBox' gradientTransform='rotate(355 .5 .5) '%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='1'/%3E%3Cstop offset='.5' stop-color='%230FF' stop-opacity='0' /%3E%3C/radialGradient%3E%3ClinearGradient id='g' x1='1' y1='.3' x2='0' y2='0' gradientUnits='objectBoundingBox'%3E%3Cstop offset='.0' stop-color='%230C7' /%3E%3Cstop offset='.3' stop-color='%230FF' stop-opacity='.6'/%3E%3Cstop offset='.6' stop-color='%23ffffff' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='%23f0f' /%3E%3C/linearGradient%3E%3ClinearGradient id='g2' href='%23g' gradientTransform='rotate(30 .5 .5)'%3E%3C/linearGradient%3E%3Crect fill='url(%23g)' width='100%25' height='100%25' /%3E%3Crect fill='url(%23b)' width='100%25' height='100%25' /%3E%3Crect fill='url(%23a)' width='100%25' height='100%25' /%3E%3Crect fill-opacity='.5' fill='url(%23g2)' width='100%25' height='100%25' /%3E%3Crect fill='url(%23c)' width='100%25' height='100%25' /%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
    color: white;
    padding: 1rem 0;
    text-align: center;
}

.hosts h1,
.hosts h2 {
    color: white;
}

#rihub {
    display: inline-block;
    max-width: 275px;
    padding: 10px;
}


#rihub svg {
    width: 100%;
    height: auto;
}

#rihub svg path {
    transition: fill 0.2s ease;
    fill: white;
}


#rihub:hover svg .logo-mark {
    fill: #ff6006;
}

@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }

    section {
        padding: 2rem 0;
    }

    .event-info {
        grid-template-columns: 1fr;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.mask-container {
    container-type: inline-size;
    --mask-head-size: calc(0.025 * 100cqw);
    --mask-foot-size: calc(0.025 * 100cqw);
}

.mask-box {
    margin-block: calc(-1 * var(--mask-head-size) - 1px) calc(-1 * var(--mask-foot-size) - 1px);
    padding-block: calc(var(--mask-head-size) + 1px) calc(var(--mask-foot-size) + 1px);
    mask-image:
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none" width="1000" height="25"><g transform="scale(1,-1)" transform-origin="50%"><path d="M0 0v4s250 96 500 96 500-96 500-96V0H0Z"></path></g></svg>'),
        linear-gradient(transparent calc(var(--mask-head-size) - 1px), black calc(var(--mask-head-size) - 1px), black calc(100% - var(--mask-foot-size) + 1px), transparent calc(100% - var(--mask-foot-size) + 1px)),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none" width="1000" height="25"><path d="M0 0v100S250 4 500 4s500 96 500 96V0H0Z"></path></svg>');
    mask-repeat: no-repeat;
    mask-position: top, center, bottom;
    mask-size: 100%;
    background-color: #FFF;
}

.box-wrap {
    padding: 4rem 0 6rem 0;
}

.reg-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
    padding: 15px 30px;
    background: white;
    color: #808;
    text-decoration: none;
    border-radius: 99px;
    border: none;
    cursor: pointer;
    transition: padding .3s, box-shadow .2s;
    box-shadow: 5px 5px 20px -8px #0FF,
                -5px -5px 20px -8px #F0F;
}

.reg-button svg {
    width: 36px;
    height: 36px;
    display: inline-block;
    vertical-align: middle;
}

.reg-button:hover {
    padding: 15px 40px;
    box-shadow: 5px 5px 20px -8px #0FF,
        -5px -5px 20px -8px #F0F,
        -10px 10px 40px -4px rgba(0, 255, 255, 0.4),
        10px -10px 40px -4px rgba(255, 0, 255, 0.4);
}

.info-row {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.info-card svg {
    display: block;
    width: 40px;
    height: 40px;
}

.info-row:last-child {
    margin-bottom: 0;
}

.info-icon {
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.social {
    background-color: #202;
    padding: 4rem 0;
    text-align: center;
}

.social .container {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}

.social-container {
    display: inline-block;
}

@media (min-width: 1025px) {
    .social .container {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-items: center;
    }

    .form-container {
        width: 100%;
        max-width: 500px;
        margin: 0;
    }
}
.emailoctopus-success-message {
    background-color: #9FF;
    padding: .5rem;
}

.social-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: #808;
    text-decoration: none;
    padding: 1rem 2rem;
    border-radius: 99px;
    background: #FFF;
    transition: padding .2s, box-shadow .2s;
    box-shadow: 5px 5px 20px -8px #0FF,
                -5px -5px 20px -8px #F0F;
}

.social-button:hover {
    padding: 1rem 3rem;
    box-shadow: 5px 5px 20px -8px #0FF,
                -5px -5px 20px -8px #F0F,
                -10px 10px 40px -4px rgba(0, 255, 255, 0.4),
                10px -10px 40px -4px rgba(255, 0, 255, 0.4);
}

.social-button svg {
    width: 24px;
    height: 24px;
    fill: #f0f;
}

.form-container {
    max-width: 600px;
    margin: 2rem auto 0 auto;
    text-align: center;
    color: white;
}

.form-container p {
    color: white;
}

/* Contact Form Styles */
.contact {
    min-height: 100vh;
    background-color: #330033;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 2000 1200'%3E%3Cdefs%3E%3Cg id='a' fill='%23220022' %3E%3Cpath d='M0 0 234 140.1 0 10z'/%3E%3Cpath d='M0 10 234 150.1 0 20z'/%3E%3Cpath d='M0 20 234 160.1 0 30z'/%3E%3C/g%3E%3Cg id='b'%3E%3Cuse xlink:href='%23a' y='0'/%3E%3Cuse xlink:href='%23a' y='30'/%3E%3Cuse xlink:href='%23a' y='60'/%3E%3C/g%3E%3Cg id='c'%3E%3Cpath fill='%23330033' d='M234 135.1 0 0 0 270.2 234 405.3z'/%3E%3Cuse xlink:href='%23b' y='0'/%3E%3Cuse xlink:href='%23b' y='90'/%3E%3Cuse xlink:href='%23b' y='180'/%3E%3C/g%3E%3Cg id='d'%3E%3Cuse xlink:href='%23c' x='0' y='0'/%3E%3Cuse xlink:href='%23c' x='-233.8' y='-405.1' transform='rotate(120)'/%3E%3Cuse xlink:href='%23c' x='-467.8' y='0' transform='rotate(-120)'/%3E%3C/g%3E%3Cpattern id='p' width='936' height='810.6' patternUnits='userSpaceOnUse'%3E%3Cuse xlink:href='%23d' x='0' y='0'/%3E%3Cuse xlink:href='%23d' x='468' y='0'/%3E%3Cuse xlink:href='%23d' x='234' y='405.3'/%3E%3Cuse xlink:href='%23d' x='-234' y='405.3'/%3E%3Cuse xlink:href='%23d' x='702' y='405.3'/%3E%3Cuse xlink:href='%23d' x='0' y='810.6'/%3E%3Cuse xlink:href='%23d' x='468' y='810.6'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23p)' width='100%25' height='100%25'/%3E%3C/svg%3E");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 4rem 0;
}

.contact-form {
    margin-top: 2rem;
}

.contact-form form {
    text-align: center;
}

.form-group {
    margin-bottom: 1.5rem;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #fff;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #f0f;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.contact .reg-button {
    margin-top: 1rem;
}

.success-message {
    margin-top: 2rem;
    text-align: center;
    padding: 2rem 3rem;
    background: #202;
    border-radius: 1rem;
    box-shadow: 0 0 1px 1px #202,
        inset 0 1px 1px 1px #404;
}

.success-message svg {
    width: 60px;
    height: 60px;
}

.success-message h2 {
    color: #0FF;
    font-size: 2rem;
    margin-bottom: 1rem;
}
@media (max-width: 599px) {
    .success-message h2 {
        font-size: 1.8rem;
    }
}

.success-message p {
    color: white;
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.success-message .reg-button {
    margin: 0 auto;
}

/* Gallery Teaser Section */
.gallery-teaser {
    background-color: #101;
    padding: 4rem 0;
    text-align: center;
}

.gallery-teaser h2 {
    color: white;
    margin-bottom: 1rem;
}

.gallery-teaser .description {
    color: #0FF;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 4rem;
}

.gallery-teaser .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    margin: 0 auto 2rem auto;
}

.teaser-link {
    margin-top: 2rem;
}

.teaser-link .reg-button {
    display: inline-block;
    margin: 0;
}

/* Navigation Links */
.nav-links {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.nav-link {
    color: #FFF;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 99px;
    transition: background-color .3s;
    background: none;
}

.nav-link:hover,
.nav-link.active {
    background: #404;
}

/* Gallery Styles */
.gallery {
    min-height: 100vh;
    background-color: #330033;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 2000 1200'%3E%3Cdefs%3E%3Cg id='a' fill='%23220022' %3E%3Cpath d='M0 0 234 140.1 0 10z'/%3E%3Cpath d='M0 10 234 150.1 0 20z'/%3E%3Cpath d='M0 20 234 160.1 0 30z'/%3E%3C/g%3E%3Cg id='b'%3E%3Cuse xlink:href='%23a' y='0'/%3E%3Cuse xlink:href='%23a' y='30'/%3E%3Cuse xlink:href='%23a' y='60'/%3E%3C/g%3E%3Cg id='c'%3E%3Cpath fill='%23330033' d='M234 135.1 0 0 0 270.2 234 405.3z'/%3E%3Cuse xlink:href='%23b' y='0'/%3E%3Cuse xlink:href='%23b' y='90'/%3E%3Cuse xlink:href='%23b' y='180'/%3E%3C/g%3E%3Cg id='d'%3E%3Cuse xlink:href='%23c' x='0' y='0'/%3E%3Cuse xlink:href='%23c' x='-233.8' y='-405.1' transform='rotate(120)'/%3E%3Cuse xlink:href='%23c' x='-467.8' y='0' transform='rotate(-120)'/%3E%3C/g%3E%3Cpattern id='p' width='936' height='810.6' patternUnits='userSpaceOnUse'%3E%3Cuse xlink:href='%23d' x='0' y='0'/%3E%3Cuse xlink:href='%23d' x='468' y='0'/%3E%3Cuse xlink:href='%23d' x='234' y='405.3'/%3E%3Cuse xlink:href='%23d' x='-234' y='405.3'/%3E%3Cuse xlink:href='%23d' x='702' y='405.3'/%3E%3Cuse xlink:href='%23d' x='0' y='810.6'/%3E%3Cuse xlink:href='%23d' x='468' y='810.6'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23p)' width='100%25' height='100%25'/%3E%3C/svg%3E");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 4rem 0;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    aspect-ratio: 4/3;
    cursor: pointer;
    display: block;
    text-decoration: none;
}

.gallery-item:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.8s ease;
}

.gallery-item:hover img {
    filter: contrast(1.2) hue-rotate(360deg) saturate(1.2);
}

/* Responsive adjustments for gallery */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 0.75rem;
    }
    
    .nav-links {
        gap: 0.5rem;
    }
    
    .nav-link {
        font-size: 1rem;
        padding: 0.4rem 0.8rem;
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}

/* Lightbox Styles */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-image-container {
    position: relative;
    max-width: 100%;
    max-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: background-color 0.3s ease;
    z-index: 1001;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    padding: 1rem 0.75rem;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    z-index: 1001;
}

.lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev {
    left: -80px;
}

.lightbox-next {
    right: -80px;
}

.lightbox-counter {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.5rem 1rem;
    border-radius: 20px;
}

/* Responsive lightbox */
@media (max-width: 768px) {
    .lightbox-nav {
        padding: 0.75rem 0.5rem;
    }
    
    .lightbox-prev {
        left: 10px;
    }
    
    .lightbox-next {
        right: 10px;
    }
    
    .lightbox-close {
        top: 10px;
        right: 10px;
        font-size: 1.5rem;
    }
    
    .lightbox-counter {
        bottom: 10px;
        font-size: 0.9rem;
    }
}