body {
    margin: 0;
    font-family: "Roboto", Arial, sans-serif;
}

.bold {
    font-weight: bold;
}

.red {
    color: #d41d23;
}

.font-big {
    font-size: 2.5rem;
}

.underlined {
    text-decoration: underline;
}

.uppercase {
    text-transform: uppercase;
}

.centered {
    text-align: center;
}
.back-to-map-section {
    background: #fdf6d1;
}
.back-to-map-section > div {
    display: flex; 
    justify-content: space-between; 
    padding: 1rem 0;
}
.back-to-map-section .left {
    font-size: 1.25rem;
}
.back-to-map-section .right {
    text-align: right;
}
.back-to-map-section img {
    width: 130px;
}
.button {
    background: #d31317;
    color: #fff;
    padding: 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    display: inline-block;
    margin-left: 1rem;
}
.mt1 {
    margin-top: 1rem;
}

.mt4 {
    margin-top: 4rem;
}

h1 {
    font-weight: bold;
    text-transform: uppercase;
    color: #d41d23;
    margin-bottom: 0;
    padding-bottom: 0;
    font-size: 2.5rem;
}

h2 {
    margin-top: 0;
    font-size: 2rem;
}

footer {
    padding: 4rem;
    text-align: center;
    background: #eee;
    margin-top: 4rem;
}

.social {
    margin-bottom: 3rem;
}

.social a {
    text-decoration: none;
    font-size: 3rem;
    color: black;
    color: #d41d23;
}

.wrapper {
    width: 100%;
    max-width: 960px;
    margin: auto;
    box-sizing: border-box;
    padding: 1rem;

}

.page {
    display: flex;
    justify-content: center;
}

.home-headlines {
    text-align: center;
    margin-bottom: 4rem;
}

.home-headlines img {
    height: 100px;
    margin: 0 3rem;
}

h1,
.big-headline {
    margin-bottom: 0.5rem;
    color: white;
    text-shadow: rgb(46, 34, 47) 6px 0px 0px, rgb(46, 34, 47) 5.91686px 0.995377px 0px, rgb(46, 34, 47) 5.66974px 1.96317px 0px, rgb(46, 34, 47) 5.2655px 2.87655px 0px, rgb(46, 34, 47) 4.71532px 3.71022px 0px, rgb(46, 34, 47) 4.03447px 4.44106px 0px, rgb(46, 34, 47) 3.24181px 5.04883px 0px, rgb(46, 34, 47) 2.35931px 5.51667px 0px, rgb(46, 34, 47) 1.41143px 5.83163px 0px, rgb(46, 34, 47) 0.424423px 5.98497px 0px, rgb(46, 34, 47) -0.574341px 5.97245px 0px, rgb(46, 34, 47) -1.55719px 5.79441px 0px, rgb(46, 34, 47) -2.49688px 5.45579px 0px, rgb(46, 34, 47) -3.36738px 4.96596px 0px, rgb(46, 34, 47) -4.14455px 4.33852px 0px, rgb(46, 34, 47) -4.80686px 3.59083px 0px, rgb(46, 34, 47) -5.33596px 2.74364px 0px, rgb(46, 34, 47) -5.71718px 1.8204px 0px, rgb(46, 34, 47) -5.93995px 0.84672px 0px, rgb(46, 34, 47) -5.99811px -0.150428px 0px, rgb(46, 34, 47) -5.89004px -1.14341px 0px, rgb(46, 34, 47) -5.61874px -2.1047px 0px, rgb(46, 34, 47) -5.19172px -3.00766px 0px, rgb(46, 34, 47) -4.62082px -3.82727px 0px, rgb(46, 34, 47) -3.92186px -4.54082px 0px, rgb(46, 34, 47) -3.11421px -5.12852px 0px, rgb(46, 34, 47) -2.22026px -5.57409px 0px, rgb(46, 34, 47) -1.26477px -5.86518px 0px, rgb(46, 34, 47) -0.274238px -5.99373px 0px, rgb(46, 34, 47) 0.723898px -5.95617px 0px, rgb(46, 34, 47) 1.70197px -5.75355px 0px, rgb(46, 34, 47) 2.63288px -5.39147px 0px, rgb(46, 34, 47) 3.49082px -4.87998px 0px, rgb(46, 34, 47) 4.25202px -4.23324px 0px, rgb(46, 34, 47) 4.89538px -3.46919px 0px, rgb(46, 34, 47) 5.40307px -2.60899px 0px, rgb(46, 34, 47) 5.76102px -1.67649px 0px, rgb(46, 34, 47) 5.95932px -0.697531px 0px;
}

h2 {
    background: #f9c22b;
    color: #2e222f;
    outline: 5px solid #2e222f;
    border-top: 5px solid #fbff86;
    display: inline-block;
    padding: 0rem 1rem;
    border-radius: 0.25rem;
    box-shadow: 0px 5px 0px 7px #2e222f;
}

.headlines h3 {
    font-size: 2rem;
    padding: 0;
    margin: 0;
    color: #2e222f;
    text-shadow: 3px 3px 0px #fff;
}

.overlay {

    position: absolute;
    inset: 0;
    background: rgba(199, 233, 255, 0.75);
    z-index: 1;
    /* overlay sopra lo sfondo */
    pointer-events: none;
    /* non blocca click */

}

.hero {
    position: relative;
    height: 30rem;
    width: 100%;
    background-color: #c9e9fe;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* PARALLASSE */
    overflow: hidden;
}

.jam-page .hero {
    height: 36rem;
}

/* Oscuramento immagine */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1;
}

/* Contenuto sopra l’immagine */
/*
.hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 40px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}
    */


.hero-header-image {
    width: 100%;
    height: 100%;
}

.hero-content .logo-1 {
    width: 30rem;
}

.hero-content .logo-2 {
    height: 10rem;
}

.hero-header-image-2 {
    width: 20rem;
}

.hero-sponsors {
    background-color: #eee;
    text-align: center;
}

.hero-sponsors .hero-content img {}

.hero-logo-jam {
    max-width: 320px;
}

.hero-logo-igda {
    max-width: 100px;
}

.container {
    width: 100%;
    display: flex;
    background: white;
    margin-top: 3rem;

}

/* MAPPA */
.map-container {
    position: relative;
    flex: 1;
}

.map {
    width: 100%;
    height: auto;
    display: block;
}

/* PIN ancorati percentualmente */
.pin {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: 18px;
    height: 18px;
    background: #000;
    border: 5px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 0 10px #565656;

}

.pin.active {
    transform: translate(-50%, -50%) scale(1.6);
    box-shadow: 0 0 10px #d41d23;
    background: #d41d23;
}

/* BOX */
.info-container {
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.info-box {
    padding: 20px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
    background: #eee;
    text-decoration: none;
    border: 3px solid #d41d23;
    color: black;
}

.info-box.active {
    background: #d41d23;
    color: white;

    .red {
        color: white;
    }
}




.header {
    display: flex;
    margin-bottom: 3rem;
}

.header .left {
    width: 55%
}

.header .right {
    width: 45%;
}

.left img {
    width: 100%;
}

.right {
    padding: 1rem;
}

.jam-page p {
    font-size: 1.5rem;
    line-height: 2.5rem;
    font-family: "Noto Serif";
    margin-top: 0;
}

.jam-page h4 {
    font-size: 2rem;
    margin-bottom: 0;
    padding-bottom: 0;
}

hr {
    border-top: 0px;
    color: #ddd;
    margin: 4rem 0;
}




.choose-day.is-active {
  background-color: #222;
  color: #fff;
  font-weight: 600;
}

.box-row {
  display: none;
}

.box-row.is-visible {
  display: block;
}
.box ul {
    padding-left: 0;
}

.box li {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 5px dotted white;
    list-style-position: inside;
    list-style: none;
    padding: 0 1.75rem 1.5rem;
}
.time {
    color: #333;
    font-size: 1rem;
}
.title {
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1.5rem;
}
.small {
    font-size: 1rem;
    line-height: 1.2rem;
}
.box li:last-child {
    border-bottom: 0px;
}

.box li div {
}
.flex-even {
    display: flex;
    justify-content: space-evenly;
}
.flex-center {
    display: flex;
    justify-content: center;
}
.partners-new {
    margin-top: 4rem;
    font-weight: bold;
    text-transform: uppercase;
}
.partners-new hr {
    margin: 2rem 0;
}
.partners-new > div {
    text-align: center;
}
.partners-new a {
    text-decoration: none;
}
.partners-new img {
    max-height: 60px;
    margin: 1rem;
}
.partners {
    margin-top: 4rem;


    display: flex;
    flex-wrap: wrap;
    /* abilita più righe */
    justify-content: center;
    gap: 1.5rem;
    /* spazio uniforme tra loghi */
}

.partners a {
    text-decoration: none;
}

.partners img {
    height: 60px;
    margin: 0 1rem;
}

.faqs {
    width: 100%;
    max-width: 800px;
    margin: auto;
    font-size: 1.5rem;
}

.faqs-row {
    margin: 3rem 0;
}

.faqs-question {
    font-weight: bold;
}


.row {
    display: grid;
    gap: 3rem;
    align-items: center;
    margin-bottom: 5rem;
    align-items: flex-start;
}

.row h4 {
    margin-top: 0;
    padding-top: 0;
}

/* Alternanza (desktop / tablet) */
.row.reverse {
    direction: rtl;
}

.row.reverse>* {
    direction: ltr;
}

.image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.image img.shadow {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);

}





.hide-mobile {
    display: none;
}

.hide-tablet {
    display: block;
}

.hide-desktop {
    display: block;
}

.hero-content {
    position: relative;
    z-index: 2;
    /* SEMPRE sopra overlay */

    height: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 40px;

    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    text-align: center;
}

.hero-content .logo-2 {
    height: 6rem;
    /* mobile */
}

.hero {
    height: 22rem;
    /* mobile */

    position: relative;
    height: 22rem;
    width: 100%;
    background-color: #c9e9fe;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.box {
    padding: 2rem 2rem 0.5rem;
    font-size: 1.5rem;
    line-height: 2.5rem;
    margin-bottom: 5rem;

    background: #f9c22b;
    color: #2e222f;
    outline: 5px solid #2e222f;
    border-top: 5px solid #fbff86;
    border-radius: 0.25rem;
    box-shadow: 0px 5px 0px 7px #2e222f;
}
.choose-day {
  cursor: pointer;
  padding: 0.75rem 1rem;
  border: 5px solid #222;
  font-size: 1rem;
  background: white;
  margin-top: 1rem;
}

/* MOBILE */
@media (min-width: 768px) {
    .hide-mobile {
        display: block;
    }

    .row {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hero-content {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }

    .hero-content .logo-2 {
        height: 10rem;
    }

    .hero {
        height: 30rem;
    }
    .box { 
        margin: 0;
        max-width: 100%;
    }
    .choose-day {
        display: block;
        margin-top: 4rem;
    }


}

/* TABLET */
@media (min-width: 768px) and (max-width: 1023px) {
    .hide-tablet {
        display: none;
    }

    .row {
        grid-template-columns: 1.3fr 1fr;
    }
}

/* DESKTOP */
@media (min-width: 1024px) {
    .hide-desktop {
        display: none;
    }

    .row {
        grid-template-columns: 1.3fr 1fr;
    }
    .box {
        margin: 0 4rem;
    }
    .choose-day {
        display: inline;

    }

}