/*
Theme Name: Magma
Theme URI: https://www.mazzmedia.com/
Author: MazzMedia
Author URI: https://www.mazzmedia.com/
GitHub Theme URI: https://github.com/understrap/understrap
Description: The renowned WordPress starter theme framework that combined Underscores and Bootstrap. Trusted by more than 100,000 developers for building handcrafted, custom WordPress sites.
Version: 1.2.4
Requires at least: 5.0
Tested up to: 6.1
Requires PHP: 5.2
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: understrap
Tags: one-column, two-columns, three-columns, left-sidebar, right-sidebar, custom-background, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, theme-options, translation-ready, block-styles, wide-blocks, editor-style, threaded-comments, accessibility-ready

Understrap WordPress Theme, (C) 2021 Howard Development & Consulting, LLC
Understrap is distributed under the terms of the GNU GPL.

Resource Licenses:
Understrap is based on Underscores https://underscores.me/, (C) Automattic, Inc.
Font Awesome: https://fontawesome.com/v4.7/license/ (Font: SIL OFL 1.1, (S)CSS: MIT)
Bootstrap: https://getbootstrap.com | https://github.com/twbs/bootstrap/blob/master/LICENSE (MIT)
WP Bootstrap Navwalker by Edward McIntyre & William Patton: https://github.com/twittem/wp-bootstrap-navwalker (GNU GPLv3)
*/

:root {
    --purple: #4a1875;
    --magenta: #ff00b7;
    --yellow: #c8d400;
    --lime-green: #b4d333;
    --dark-purple: #0f2234;
    --black: #000000;
}

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

body {
    font-family: 'Arial', sans-serif;
    overflow-x: hidden;
    font-size: 18px;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, var(--purple) 0%, var(--dark-purple) 100%);
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"><defs><linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23e6007e;stop-opacity:0.8" /><stop offset="100%" style="stop-color:%234a1875;stop-opacity:0.9" /></linearGradient></defs><polygon points="100,300 200,200 300,250 400,150 500,200 600,100 700,150 400,400 300,500 200,450" fill="none" stroke="url(%23grad)" stroke-width="2"/><polygon points="150,400 250,350 350,400 450,300 550,350 650,250 750,300 500,600 350,700 200,600" fill="none" stroke="url(%23grad)" stroke-width="2"/></svg>');
    background-size: cover;
    opacity: 0.3;
}

.hero-image-container {
    position: relative;
    height: 100vh;
    background: linear-gradient(135deg, rgba(230, 0, 126, 0.8) 0%, rgba(74, 24, 117, 0.9) 100%);
}

.hero-image-container::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: 
        repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(230, 0, 126, 0.1) 50px, rgba(230, 0, 126, 0.1) 51px),
        repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(230, 0, 126, 0.1) 50px, rgba(230, 0, 126, 0.1) 51px);
    opacity: 0.5;
}

.logo {
    max-width: 200px;
    height: auto;
}

.text-yellow {
    color: var(--yellow) !important;
}

.text-magenta {
    color: var(--magenta) !important;
}

.event-date {
    font-size: 4rem;
    font-weight: 700;
    color: var(--magenta);
    line-height: 1;
}

.event-date .year {
    font-size: 2.5rem;
}

.btn-light {
    background-color: white;
    border: none;
    padding: 12px 40px;
    font-size: 1.1rem;
}

.btn-light:hover {
    background-color: #f8f9fa;
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* Event Info Section */
.event-info h2 {
    font-size: 1.8rem;
    line-height: 1.6;
}

/* Rinascita Section */
.rinascita-section {
    background-color: white;
}

.rinascita-section h2 {
    line-height: 1.2;
}

.image-container-purple {
    background: linear-gradient(135deg, var(--dark-purple) 0%, var(--magenta) 100%);
    height: 500px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.image-container-purple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

/* Settori Section */
.settori-section {
    background-color: #f8f9fa;
}

.section-title-green {
    background-color: var(--lime-green);
    color: var(--dark-purple);
}

.settori-list li {
    font-size: 1.1rem;
}

/* Registration Section */
.registration-section {
    background-color: var(--lime-green);
}

.registration-form .form-control {
    padding: 12px;
    border: 2px solid white;
    border-radius: 5px;
}

.registration-form .form-control:focus {
    border-color: var(--magenta);
    box-shadow: 0 0 0 0.2rem rgba(230, 0, 126, 0.25);
}

.registration-form textarea.form-control {
    resize: none;
}

/* Countdown Section */
.countdown-section {
    background-color: white;
}

.countdown-box {
    background-color: #f8f9fa;
    padding: 30px 70px;
    max-width: 100%;
}

.countdown-magenta {
    background-color: var(--magenta);
}

.countdown-number {
    font-size: 4.5rem;
    font-weight: 800;
    color: var(--black);
}

.countdown-label {
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    line-height:20px;
    color: var(--black);
}

/* Responsive */
@media (max-width: 991px) {
    .hero-section {
        min-height: auto;
    }
    
    .hero-image-container {
        height: 50vh;
    }
    
    .hero-section .ps-5 {
        padding: 40px 20px !important;
    }
    
    .event-date {
        font-size: 3rem;
    }
    
    .countdown-number {
        font-size: 3rem;
    }
}

@media (max-width: 767px) {
    .event-date {
        font-size: 2.5rem;
    }
    
    .event-date .year {
        font-size: 2rem;
    }
    
    .rinascita-section h2 {
        font-size: 2rem;
    }
    
    .image-container-purple {
        height: 300px;
        margin-top: 30px;
    }
    
    .countdown-number {
        font-size: 2.5rem;
    }
}

.absolute-centerY {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.absolute-centerX {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

@media screen and (min-width:992px){
    .absolute-lg-centerY {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .absolute-lg-centerX {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

.button-absolute {
    position: absolute;
    bottom: 0;
}

.border-left{
    border-left-style: solid;
}
.border-magenta {
    border-color: var(--magenta) !important;
}

.bg-gray-light{
    background-color: #f3f3f3 !important;
}
.bg-magenta{
    background-color: var(--magenta);
}
.bg-dark-puple{
    background-color: var(--dark-purple);
}