/* =========================================================
   METODO ARS
   HOME V1
   ========================================================= */


:root {

    --ars-blue: #254783;

    --ars-blue-dark: #17386c;

    --ars-cyan: #29a9e0;

    --ars-text: #52647e;

    --ars-white: #ffffff;

    --ars-border: #d6e7f1;

}


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

* {

    box-sizing: border-box;

}


html,
body {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    overflow: hidden;

}


body {

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

    background: white;

    color: var(--ars-text);

}


a {

    text-decoration: none;

}


/* =========================================================
   PAGINA COMPLETA
   ========================================================= */

.home-page {

    width: 100vw;

    height: 100vh;

    min-width: 1180px;

    display: flex;

    flex-direction: column;

    background: white;

}


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

.header {

    flex: 0 0 112px;

    width: 100%;

    display: flex;

    align-items: center;

    padding:
        6px
        4.3%;

    background: white;

    border-top:
        5px
        solid
        var(--ars-blue);

    border-bottom:
        1px
        solid
        var(--ars-border);

    position: relative;

    z-index: 50;

}


/* LOGO */

.logo-container {

    width: 445px;

    height: 94px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

}


.logo-container img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

    object-position:
        left
        center;

}


/* MENU */

.navigation {

    margin-left: auto;

    padding-right: 8%;

    display: flex;

    align-items: center;

    gap: 39px;

}


.navigation a {

    position: relative;

    padding:
        15px
        0
        12px;

    color: var(--ars-blue-dark);

    font-size: 16px;

    font-weight: 500;

    white-space: nowrap;

}


.navigation a::after {

    content: "";

    position: absolute;

    left: 0;

    right: 100%;

    bottom: 5px;

    height: 2px;

    background:
        var(--ars-cyan);

    transition:
        right
        0.2s
        ease;

}


.navigation a:hover::after,
.navigation a.active::after {

    right: 0;

}


.navigation a:hover,
.navigation a.active {

    color:
        #087fc3;

}


/* =========================================================
   HERO
   ========================================================= */

.hero {

    flex: 1;

    position: relative;

    width: 100%;

    min-height: 0;

    overflow: hidden;

    background:
        #f5fbfe;

}


/* IMMAGINE */

.hero-background {

    position: absolute;

    inset: 0;

    background-image:
        url("/static/images/hero.png");

    background-repeat:
        no-repeat;

    background-size:
        cover;

    background-position:
        center
        center;

    z-index: 0;

}


/* SFUMATURA BIANCA SINISTRA */

.hero-gradient {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(

            90deg,

            rgba(255,255,255,1) 0%,

            rgba(255,255,255,1) 23%,

            rgba(255,255,255,.97) 35%,

            rgba(255,255,255,.83) 44%,

            rgba(255,255,255,.40) 57%,

            rgba(255,255,255,.04) 75%,

            rgba(255,255,255,0) 100%

        );

}


/* =========================================================
   TESTO HERO
   ========================================================= */

.hero-content {

    position: absolute;

    left: 4.35%;

    top: 9%;

    z-index: 10;

    width: 54%;

}


.hero-content h1 {

    margin: 0;

    padding: 0;

    color:
        var(--ars-blue);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            58px,
            4.65vw,
            80px
        );

    line-height:
        0.99;

    font-weight:
        700;

    letter-spacing:
        -1.7px;

}


.hero-content h1 span {

    display: block;

    white-space: nowrap;

}


/* LINEA */

.title-line {

    width: 320px;

    height: 4px;

    margin:
        29px
        0
        24px;

    border-radius:
        4px;

    background:

        linear-gradient(

            90deg,

            var(--ars-cyan),

            var(--ars-blue)

        );

}


/* SOTTOTITOLO */

.hero-content h2 {

    margin:
        0
        0
        21px;

    padding: 0;

    color:
        #087fc3;

    font-size:
        clamp(
            21px,
            1.5vw,
            27px
        );

    font-weight:
        500;

    line-height:
        1.36;

}


/* DESCRIZIONE */

.hero-content p {

    margin: 0;

    padding: 0;

    color:
        #5e6e86;

    font-size:
        clamp(
            14px,
            1vw,
            17px
        );

    line-height:
        1.65;

}


/* =========================================================
   PULSANTE UNICO
   ========================================================= */

.access-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    min-height: 61px;

    margin-top: 28px;

    padding:
        0
        31px;

    border-radius:
        18px;

    background:

        linear-gradient(

            135deg,

            #176ebb,

            #078fd2

        );

    color:
        white;

    font-size:
        18px;

    font-weight:
        700;

    box-shadow:

        0
        12px
        30px
        rgba(0,110,185,.20);

    transition:
        transform
        .15s
        ease,
        box-shadow
        .15s
        ease;

}


.access-button:hover {

    transform:
        translateY(-2px);

    box-shadow:

        0
        16px
        35px
        rgba(0,110,185,.27);

}


.arrow {

    font-size:
        24px;

    line-height:
        1;

}


/* =========================================================
   CLAIM DESTRO
   ========================================================= */

.motivational-claim {

    position: absolute;

    top: 8%;

    right: 7%;

    z-index: 12;

    color:
        #087cc3;

    font-family:
        "Segoe Script",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(
            21px,
            1.7vw,
            29px
        );

    line-height:
        1.18;

    transform:
        rotate(-5deg);

    text-align:
        left;

    text-shadow:

        0
        1px
        2px
        rgba(255,255,255,.7);

}


/* =========================================================
   BENEFICI
   ========================================================= */

.benefits {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 53px;

    z-index: 20;

    height: 145px;

    padding:
        8px
        7%;

    display: grid;

    grid-template-columns:

        1fr
        1px
        1fr
        1px
        1fr
        1px
        1fr;

    align-items:
        center;

    background:

        rgba(
            255,
            255,
            255,
            .82
        );

    backdrop-filter:
        blur(8px);

    border-top:

        1px
        solid
        rgba(
            255,
            255,
            255,
            .95
        );

}


.divider {

    width: 1px;

    height: 73px;

    background:
        #c8deeb;

}


/* BENEFICIO SINGOLO */

.benefit {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align:
        center;

}


/* ICONA */

.benefit-icon {

    width: 58px;

    height: 58px;

    margin-bottom: 7px;

    display: grid;

    place-items:
        center;

    border-radius:
        50%;

    background:

        rgba(
            255,
            255,
            255,
            .67
        );

    border:

        1px
        solid
        #c4e3f1;

    color:
        var(--ars-blue);

    font-size:
        29px;

}


/* TITOLO */

.benefit strong {

    color:
        var(--ars-blue);

    font-size:
        16px;

    line-height:
        1.2;

}


/* SOTTOTITOLO */

.benefit span {

    margin-top:
        4px;

    color:
        #687a93;

    font-size:
        13px;

}


/* =========================================================
   CLAIM IN BASSO
   ========================================================= */

.bottom-claim {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 13px;

    z-index: 30;

    text-align:
        center;

    color:
        var(--ars-blue);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        20px;

    font-style:
        italic;

}


/* =========================================================
   PICCOLI AGGIUSTAMENTI PER NOTEBOOK
   ========================================================= */

@media (max-height: 850px) {

    .header {

        flex-basis:
            98px;

    }


    .logo-container {

        height:
            82px;

        width:
            390px;

    }


    .hero-content {

        top:
            6%;

    }


    .hero-content h1 {

        font-size:
            clamp(
                52px,
                4.1vw,
                69px
            );

    }


    .title-line {

        margin:
            22px
            0
            18px;

    }


    .hero-content h2 {

        margin-bottom:
            15px;

    }


    .access-button {

        min-height:
            54px;

        margin-top:
            20px;

    }


    .benefits {

        height:
            130px;

    }

}


/* =========================================================
   NON VOGLIAMO SCROLL
   ========================================================= */

body {

    overflow:
        hidden;

}