/*==================================================
=                    CONTENITORE                   =
==================================================*/

.container {
    width: min(90vw, var(--container));
    margin-inline: auto;
}

/*==================================================
=                    SFONDI DIV                  =
==================================================*/
/* VERSIONE A */

.sfondo-soft-a{
    position:relative;
    overflow:hidden;
    background:#f4f8fb;
}

.sfondo-soft-a::before{
    content:"";
    position:absolute;
    top:-10rem;
    right:-7rem;
    width:24rem;
    height:24rem;
    border-radius:50%;
    background:rgba(12,53,87,.07);
    pointer-events:none;
}

.sfondo-soft-a::after{
    content:"";
    position:absolute;
    left:-6rem;
    bottom:-6rem;
    width:18rem;
    height:18rem;
    border-radius:50%;
    background:rgba(188,0,19,.08);
    pointer-events:none;
}

.sfondo-soft-a > .container{
    position:relative;
    z-index:1;
}

/* VERSIONE B */

.sfondo-soft-b{
   position:relative;
    overflow:hidden;
   background:#f4f8fb;
}

.sfondo-soft-b::before{
    content:"";
    position:absolute;
    top:-10rem;
    left:-7rem;
    width:24rem;
    height:24rem;
    border-radius:50%;
    background:rgba(12,53,87,.07);
    pointer-events:none;
}

.sfondo-soft-b::after{
    content:"";
    position:absolute;
    right:-6rem;
    bottom:-6rem;
    width:18rem;
    height:18rem;
    border-radius:50%;
    background:rgba(188,0,19,.08);
    pointer-events:none;
}

.sfondo-soft-b > .container{
    position:relative;
    z-index:1;
}

/*==================================================
=                     HEADER                       =
==================================================*/

.header {
    background: var(--bianco);
    border-bottom: 0.0625rem solid #e5e5e5;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    min-height: clamp(5.5rem, 13vh, 8.8rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1rem, 2vw, 2rem);
    width: clamp(92%, 95%, 96%);
}

.logo img {
    display: block;
    width: clamp(15rem, 34vw, 31rem);
    height: auto;
}

.nav {
    display: flex;
    align-items: center;
    gap: clamp(1.4rem, 2.6vw, 2.7rem);
}

.nav a {
    position: relative;

    padding-bottom: 0.8rem;

    color: var(--blu);
    text-decoration: none;
    font-size: clamp(1.08rem, 1.35vw, 1.3rem);
    font-weight: 800;

    transition: color 0.3s ease;
}

.nav a:hover {
    color: var(--rosso);
}

.nav a.active {
    color: var(--rosso);
}

.nav a.active::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 0.18rem;

    background: var(--rosso);
    border-radius: 2rem;
}

.menu-toggle {
    display: none;

    background: none;
    border: none;

    font-size: 2rem;
    cursor: pointer;
}


/*==================================================
=               HEADER RESPONSIVE                  =
==================================================*/

@media (max-width: 48rem) {

    .header-content {
        min-height: 5rem;
    }

    .logo img {
        width: clamp(12rem, 58vw, 15.5rem);
    }

    .menu-toggle {
        display: block;
    }

    .nav {
        position: absolute;
        top: 100%;
        left: 0;

        width: 100%;

        display: none;
        flex-direction: column;
        align-items: center;

        gap: 0;

        background: var(--bianco);
        border-bottom: 0.0625rem solid #dddddd;
    }

    .nav.active {
        display: flex;
    }

    .nav a {
        width: 100%;

        padding: 1rem;

        text-align: center;
        font-size: 1.05rem;

        border-top: 0.0625rem solid #eeeeee;
    }
}


/*==================================================
=                VARIABILI GLOBALI                 =
==================================================*/

:root {
    --rosso: #BC0013;
    --nero: #050505;
    --nero-soft: #111111;
    --grigio: #f5f5f5;
    --testo: #333333;
    --bianco: #ffffff;
    --verde: #22C55E;
    --blu: #07324b;
    --container: 75rem;
    --hero-container: 90rem;

    --radius-medium: 1.4rem;
    --radius-large: 1.8rem;
}


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

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;

    color: var(--testo);
    background: var(--bianco);

    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
}

img {
    max-width: 100%;
}




/*==================================================
=                      SEZIONI                     =
==================================================*/

section {
    scroll-margin-top: 8rem;
}

.section {
    padding-block: clamp(5.5rem, 10vh, 8rem);
}

.section-light {
    background: var(--grigio);
}

.section-title {
    max-width: 54rem;
    margin-bottom: clamp(3rem, 6vh, 4.8rem);
}

.section-title.center {
    margin-inline: auto;
    text-align: center;
}


.section-header{
    text-align:center;
    margin-bottom:3.5rem;
}

.section-header .section-title{
    display:table;
    width:auto;
    max-width:none;
    margin:0 auto;
    text-align:center;
    color:var(--blu);
    font-size: clamp(2rem, 2.7vw, 2.5rem);
    font-weight:800;
}

.section-header .section-title::after{
    content:"";
    display:block;
    width:100%;
    height:.35rem;
    margin-top:1rem;
    background:var(--rosso);
    border-radius:999rem;
}


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

h2 {
    margin-bottom: clamp(1.4rem, 3vh, 2rem);

    color: var(--blu);
font-weight: 900;
    font-size: clamp(2.3rem, 4vw, 3.4rem);
    line-height: 1.15;
}


/*==================================================
=                   DUE COLONNE                    =
==================================================*/

.two-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    align-items: center;

    gap: clamp(3rem, 6vw, 5rem);
}

.two-columns > * {
    min-width: 0;
}

.two-columns p {
    margin-bottom: 1.4rem;
    font-size: clamp(1.05rem, 1.3vw, 1.2rem);
}


/*==================================================
=                     PULSANTI                     =
==================================================*/

.btn {
    display: inline-block;

    padding: 0.95rem 1.9rem;

    border-radius: 999rem;

    text-decoration: none;
    font-weight: 700;

    transition:
        background-color 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease,
        transform 0.25s ease;
}

.btn-primary {
    color: var(--bianco);
    background: var(--rosso);

    border: 0.125rem solid var(--bianco);
}

.btn-primary:hover {
    color: var(--nero);
    background: var(--bianco);

    border-color: var(--rosso);

    transform: translateY(-0.2rem);
}

.btn-secondary {
    color: var(--bianco);
    background: transparent;

    border: 0.125rem solid var(--bianco);
}

.btn-secondary:hover {
    color: var(--nero);
    background: var(--bianco);

    border-color: var(--rosso);

    transform: translateY(-0.2rem);
}


/*==================================================
=             ELEMENTI COMUNI RESPONSIVE           =
==================================================*/

@media (max-width: 68.75rem) {

    .two-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 48rem) {

    section {
        scroll-margin-top: 6rem;
    }

    .section-title {
        margin-bottom: 3rem;
    }

    h2 {
        font-size: clamp(2rem, 10vw, 2.8rem);
    }
}



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

.footer {
    padding: clamp(3.5rem, 7vh, 4.5rem) 0 1.5rem;
    color: var(--bianco);
    background: #052a3f;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.1fr 0.8fr 1.5fr;
    gap: 4rem;
}

/*-------------------- COLONNA LOGO --------------------*/

.footer-content > div:first-child {
    text-align: center;
}

.footer-content > div:first-child > img {
    display: block;
    width: 100%;
    max-width: 18rem;
    height: auto;
    margin: 0 auto 2rem;
}

.footer-content > div:first-child > p {
    max-width: 20rem;
    margin: 0 auto;
}

/*-------------------- COLONNE SERVIZI E CONTATTI --------------------*/

.footer-content > div:nth-child(2),
.footer-content > div:nth-child(3) {
    padding-left: 3.5rem;
}

.footer h3 {
    margin: 0 0 1rem;
    font-size: 1.8rem;
    line-height: 1.2;
}

.footer p {
    margin: 0 0 0.7rem;
    color: #cccccc;
    font-size: 1.4rem;
    line-height: 1.7;
}

.footer a {
    color: #cccccc;
    text-decoration: none;
    font-size: 1.4rem;
}

.footer a:hover {
    color: var(--rosso);
}

/*-------------------- TELEFONO, EMAIL, INDIRIZZO --------------------*/

.contact-item {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    align-items: center;
    column-gap: 0.8rem;

    margin: 0 0 1.2rem;
}

.contact-item img {
    display: block;
    width: 2.75rem;
    height: 2.75rem;
    max-width: none;
    margin: 0;

    object-fit: contain;
}

.contact-item a,
.contact-item span {
    display: block;
    margin: 0;

    color: #cccccc;
    line-height: 1.4;
    text-decoration: none;
}

.contact-item a:hover {
    color: var(--rosso);
    text-decoration: underline;
}

/* Anche l'indirizzo su due righe resta centrato rispetto all'icona */
.contact-item.address {
    align-items: center;
}


/*==================================================
=              DICONO DI NOI & SOCIAL              =
==================================================*/

.social-section {
    width: 100%;
    margin-top: 4rem;
    text-align: center;
}

.social-section > h2 {
    margin: 0 0 2.8rem;

    color: var(--bianco);
    font-size: 2.2rem;
    line-height: 1.2;
}

.social-cards {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 5rem;

    width: 100%;
    margin: 0 auto;
}

.social-card {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: min(100%, 28rem);
    padding: 2rem 1.6rem;
    background: #ffffff;
    border-radius: 1.2rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.social-card:hover {
    transform: translateY(-0.4rem);
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.22);
}

.social-card .social-icon {
    display: block;

    width: 7rem;
    height: 7rem;
    max-width: none;
    margin: 0 auto 1.4rem;

    object-fit: contain;
}

.social-card .social-icon-google {
    width: 16rem;
height: auto;
}

.social-card h3 {
    margin: 0 0 1.4rem;

    color: #222222;
    font-size: 1.7rem;
    line-height: 1.3;
    text-align: center;
}

.social-card p {
    margin: 0 0 2.4rem;

    color: #555555;
    font-size: 1.4rem;
    line-height: 1.7;
    text-align: center;
}

.social-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: auto;
    padding: 1rem 2.4rem;

    color: #ffffff !important;
    background: #052a3f;

    border-radius: 99rem;

    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease;
}

.social-button:hover {
    color: #ffffff !important;
    background: var(--rosso);
    transform: translateY(-0.15rem);
}

/*-------------------- PARTE INFERIORE --------------------*/

.footer-bottom {
    margin-top: 2.5rem;
    padding-top: 1.4rem;

    color: #999999;
    text-align: center;
    font-size: 1.3rem;

    border-top: 0.0625rem solid #222222;
}

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

@media (max-width: 48rem) {

    .footer-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .footer-content > div {
        text-align: center;
    }

    .footer-content > div:nth-child(2),
    .footer-content > div:nth-child(3) {
        padding-left: 0;
    }

    .footer h3 {
        font-size: 1.5rem;
    }

    .footer p,
    .footer a {
        font-size: 1.2rem;
    }

    .contact-item {
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
        text-align: left;
    }

    /*==============================
    =      SOCIAL RESPONSIVE       =
    ==============================*/

    .social-section {
        margin-top: 3rem;
    }

    .social-section h2 {
        font-size: 1.8rem;
    }

    .social-cards {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

.social-card {
    max-width: 20rem;   /* invece di 34rem */
    padding: 1.5rem 1.2rem;
}

.social-card h3 {
    font-size: 1.5rem;
}

.social-card p {
    font-size: 1.2rem;
    margin-bottom: 1.6rem;
}

    .social-icon {
        width: 6rem;
        height: 6rem;
    }

    .social-icon-google {
        width: 10rem;
        height: auto;
    }

    .social-button {
        width: 100%;
        max-width: 26rem;
    }

    .footer-bottom {
        font-size: 0.95rem;
    }

}