/* ===========================
   RESET
=========================== */

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

html,
body{
    width:100%;
    height:100%;
}

/* ===========================
   BODY
=========================== */

body{

    font-family:
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background-image:
        url("../img/background-ct-non-profit-app.png");

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    background-attachment:fixed;

    color:#ffffff;

    display:flex;
    flex-direction:column;

    position:relative;

    overflow-x:hidden;
}

/* ===========================
   OVERLAY
=========================== */

.overlay{

    position:fixed;
    inset:0;

    background:
        linear-gradient(
            rgba(0,0,0,.45),
            rgba(0,0,0,.60)
        );

    z-index:1;
}

/* ===========================
   MAIN
=========================== */

.hero{

    flex:1;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:40px 20px;

    position:relative;
    z-index:2;
}

/* ===========================
   CONTENT BOX
=========================== */

.content{

    width:100%;
    max-width:950px;

    text-align:center;

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.20);

    border-radius:24px;

    padding:50px 40px;

    box-shadow:
        0 20px 40px rgba(0,0,0,.25);
}

/* ===========================
   LOGO
=========================== */

.logo{

    width:min(90vw,700px);
    height:auto;

    margin-bottom:35px;

    filter:
        drop-shadow(
            0 12px 25px rgba(0,0,0,.35)
        );

    animation:
        float 6s ease-in-out infinite;
}

@keyframes float{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0);
    }
}

/* ===========================
   TITOLI
=========================== */

h1{

    font-size:
        clamp(1.8rem,4vw,3rem);

    font-weight:700;

    line-height:1.25;

    margin-bottom:20px;

    text-shadow:
        0 2px 8px rgba(0,0,0,.4);
}

.subtitle{

    font-size:
        clamp(1rem,2vw,1.35rem);

    line-height:1.6;

    max-width:700px;

    margin:0 auto;

    color:#ffffff;

    opacity:.95;
}

h2{

    margin-top:35px;

    color:#f0c34f;

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:
        clamp(1.1rem,2vw,1.6rem);

    font-weight:700;
}

/* ===========================
   FOOTER
=========================== */

footer{

    position:relative;
    z-index:2;

    padding:25px 20px 40px;

    display:flex;
    justify-content:center;
}

.contact-box{

    background:
        linear-gradient(
            135deg,
            rgba(15,52,135,.95),
            rgba(8,28,70,.95)
        );

    border:
        1px solid rgba(240,195,79,.35);

    border-radius:14px;

    padding:18px 30px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:12px;

    flex-wrap:wrap;

    box-shadow:
        0 15px 35px rgba(0,0,0,.30);
}

.contact-box span{

    font-weight:600;
}

.contact-box a{

    color:#f0c34f;

    text-decoration:none;

    font-size:1.25rem;

    font-weight:700;

    transition:all .3s ease;
}

.contact-box a:hover{

    color:#ffd86b;

    text-decoration:underline;
}

/* ===========================
   MOBILE
=========================== */

@media (max-width:768px){

    .content{

        padding:35px 20px;
    }

    .logo{

        width:95%;
    }

    .contact-box{

        width:100%;
    }

    .contact-box a{

        font-size:1rem;

        word-break:break-word;
    }

    h2{

        letter-spacing:2px;
    }
}

/* ===========================
   CTA BUTTON
=========================== */

.cta{

    display:inline-block;

    margin-top:30px;

    padding:16px 32px;

    background:
        linear-gradient(
            135deg,
            #f0c34f,
            #d9a321
        );

    color:#0f3487;

    text-decoration:none;

    font-weight:700;

    font-size:1rem;

    border-radius:10px;

    transition:all .3s ease;

    box-shadow:
        0 8px 20px rgba(0,0,0,.25);
}

.cta:hover{

    transform:translateY(-2px);

    box-shadow:
        0 12px 25px rgba(0,0,0,.35);

    filter:brightness(1.05);
}