:root {
    --color1:#E13212;
    --color2:#FEB704;
	--color3:#E18700;
    --white:#fff;
}
* {
    box-sizing:border-box;
}
html {
    min-height:100%;
    font-size:56.25%;
}
body {
    min-height:100vh;
    min-height:100svh;
    margin:0;
    padding:3rem 0 2rem 0;
    color:var(--white);
    background:linear-gradient(rgba(31,40,61,.7),rgba(31,40,61,.7)),url('bg.jpg') left center/cover no-repeat;
    font-family:'Montserrat',sans-serif;
    text-rendering:optimizeLegibility;
    display:flex;
    flex-direction:column;
}
main {
    width:100%;
    flex:1;
    display:flex;
    align-items:center;
}
.logo {
    width:25rem;
    max-width:95%;
    height:auto;
}
.title {
    margin-bottom:0;
    font-size:8rem;
    font-weight:600;
    line-height:1.5;
    letter-spacing:.25rem;
}
.subtitle {
    margin-bottom:0;
    font-size:2.9rem;
    font-weight:400;
    line-height:1.4;
    letter-spacing:.1rem;
}
.text {
    font-size:2rem;
    font-weight:400;
    line-height:1.6;
}
.dida {
    font-size:1.5rem;
    line-height:1.5;
}
.cst-btn {
    min-height:5.5rem;
    padding:0 4rem;
    margin:1rem 2rem 1rem 0;
    border-radius:5rem;
    border:1px solid var(--color1);
    color:var(--white);
    background-color:var(--color1);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:2rem;
    font-weight:400;
    letter-spacing:.1rem;
    text-decoration:none;
    transition:background-color .3s ease,border-color .3s ease,transform .3s ease;
}
.cst-btn:hover {
    border-color:var(--color3);
    color:var(--white);
    background-color:var(--color3);
}
.cst-btn:focus-visible {
    outline:2px solid var(--white);
    outline-offset:4px;
}
.cst-btn .icon {
    width:3rem;
    height:3rem;
    margin-right:1rem;
    display:inline-block;
    background-color:var(--white);
    transition:background-color .3s ease;
}
.cst-btn .icon-email {
    -webkit-mask:url("icons/email.svg") center/contain no-repeat;
    mask:url("icons/email.svg") center/contain no-repeat;
}
.cst-btn .icon-phone {
    -webkit-mask:url("icons/phone.svg") center/contain no-repeat;
    mask:url("icons/phone.svg") center/contain no-repeat;
}
.cst-btn:hover .icon {
    // se voglio cambiare colore all'icona sull'hover (tengo bianco per ora)
	//background-color:var(--color1);
}
#footer {
    width:calc(100% - 8rem);
    margin:5rem 4rem 0;
    display:flex;
    gap:3rem;
    color:var(--white);
}
#footer address {
    margin-bottom:0;
    font-style:normal;
}
#footer a {
    color:var(--white);
}
@media (max-width:1199px) {
    .logo {
        width:15rem;
    }
    .title {
        font-size:4.5rem;
    }
    .subtitle {
        font-size:2.7rem;
    }
    .text {
        font-size:2.2rem;
    }
}
@media (max-width:991px) {
    .title {
        font-size:4rem;
    }
    .subtitle {
        font-size:2.4rem;
    }
    .text {
        font-size:2rem;
    }
    .cst-btn {
        font-size:2rem;
    }
}
@media (max-width:767px) {
    body {
        padding:4rem 0 2rem;
    }
    .title {
        font-size:4rem;
        line-height:1.3;
        letter-spacing:.1rem;
    }
    .subtitle {
        font-size:2.4rem;
    }
    .cst-btn {
        margin:1rem 0;
        font-size:1.7rem;
    }
    #footer {
        width:auto;
        margin:5rem 3rem 0;
        flex-direction:column;
        gap:1rem;
    }
}
@media (max-width:575px) {
    .logo {
        width:10rem;
    }
    .title {
        font-size:3rem;
        line-height:1.2;
    }
    .subtitle {
        font-size:2.3rem;
    }
    .text {
        font-size:1.8rem;
    }
    .cst-btn {
        min-height:auto;
        padding:.7rem 2rem;
		font-size:1.6rem;
		margin:1rem;
    }
    .cst-btn .icon {width:2.5rem; height: 2.5rem;}
}