:root {
--font-family: "frank", Verdana, Arial, Helvetica, sans-serif;
--font-family_menu: "frank", Verdana, Arial, Helvetica, sans-serif;
--font-scale: 2vw;
--menu-bg: #ffffff;
--menu-color: #000;
--text-color: #989898;
--text-color2: #000000;
--text-blue: #0075BF;
--text-black: #000000;
--text-white: #ffffff;
--text-red: #E5241C;
--text-grey: #676767;
--light-grey: #f9fafb;
--light-grey_border: #b0b0b0;
--link-color: #ffffff;
--link-color2: #ffa500;
--height_menu: 80px;
--width: 1300px;
}

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

body {
    font-family: 'frank', sans-serif;
    color: #333;
    line-height: 1.6;
}

img {
    width: 100%;
    display: block;
}

a {
    text-decoration: none;
}

@font-face {
  font-family: "frank";
  src: url("FrankRuhlLibre-Light.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
}

.container {
    width: 90%;
    max-width: 1300px;
    margin: auto;
}

.titolo_sopra {
  font-size: 1.2rem;
  line-height: 1.2rem;
    font-family: 'frank', Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
}

/* TOP BAR */

.top-bar {
    background: #111;
    color: #fff;
    padding: 20px 0;
    font-size: 18px;
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-2 {
    color: #fff;
    padding: 20px 0;
    font-size: 18px;
}
.top-2 .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.header{transition: background-color 0.3s; position: fixed; top: 0; left: 0; z-index: 9997; width: 100%; padding: 10px 15px;}
.header.scrolled {background-color: #000000; border-bottom: 1px solid var(--text-grey); 	-webkit-box-shadow: 0 8px 10px 0 rgba(0, 0, 0, .1);
	-moz-box-shadow: 0 8px 10px 0 rgba(0, 0, 0, .1); 	box-shadow: 0 8px 10px 0 rgba(0, 0, 0, .1);}
.header__content{max-width: var(--width);width: 100%;margin: 0 auto;display: flex; align-items: center;}
.header__logo{display: flex;align-items: center;color: #000; flex: 1;}
.header__logo_imm {position: relative;top: 0px; width: 130px; max-width: 100%; height: auto;}
.header__quick{display: none;}
.header__menu{display: flex; justify-content: space-between; align-items: center;padding: 0; margin: 0;}
.header__menu li{display: inline-block;}
.header__menu li a{color: var(--text-white); opacity: 0.8; transition: opacity .25s ease-in-out;display: block;padding: 12px; font-family: var(--font-family_menu); font-size: 18px; position: relative;}

.header__menu li a::before { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background-color: var(--link-color); transition: width 0.5s; }
.header__menu li a:hover::before { width: 100%; }
.header__menu li a:hover { color: var(--text-white); opacity: 1.0;}
.header__menu li.current a::before { width: 100%; }
.header__menu li.current a { color:var(--text-white); }

@media (max-width: 1024px) {
.header__menu{
  position: absolute;top: 80px;left: 0; background-color: var(--menu-bg);width: 100%; height: 100vh;
  height: 0vh;overflow: hidden;transition: all 0.3s cubic-bezier(.215, .61, .355, 1);
}
.header__menu li a{color: #5b5b5b; opacity: 0.8; transition: opacity .25s ease-in-out;display: block;padding: 14px; font-family: var(--font-family_menu); font-size: 18px; position: relative;}

.header__menu li{width: 100%;border-bottom: 1px solid #c4c4c4}
.header__menu li a::before { content: ""; position: absolute; left: 0; bottom: 0; height: 50px; width: 0; background-color: var(--link-color); transition: width 0.5s; }
.header__menu li a:hover::before { width: 3px; color: #a8a8a8;}
.header__menu li a:hover { color: #000; opacity: 1.0;}
.header__menu li.current a::before { width: 3px; }
.header__menu li.current a { color:#000; }

.menu-open .header__menu {height: 100vh; padding:3%;}

.icon-hamburger{cursor: pointer;height: 50px;width: 40px;margin-left: 20px;padding-top: 10px;}
.icon-hamburger span{height: 2px;width: 25px; background:var(--menu-color); position: relative; display: block; margin-top: 6px;transition: all 0.5s cubic-bezier(.215, .61, .355, 1);}

.menu-open .icon-hamburger span:nth-child(1){transform: rotate(45deg) translateY(9px) translateX(3px);}
.menu-open .icon-hamburger span:nth-child(2){transform: rotate(-45deg) translateY(-3px) translateX(-5px);}
.menu-open .icon-hamburger span:nth-child(3){transform: rotate(-45deg) translateY(-9px) translateX(1px);}

.header__quick{display: flex;justify-content: flex-end;width: 20%;}

}


.contact-info {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.social {
    display: flex;
    gap: 15px;
}

.social a {
    color: white;
}

/* HERO */

.hero {
  z-index: 1;
    min-height: 90vh;

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

    position: relative;
    text-align: center;

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

}

.hero-content {
    max-width: 900px;
    padding: 20px;
    color: #fff;
}

.hero-content h1 {
    font-size: clamp(3rem, 6vw, 5rem);
    line-height: 1.0;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 0 4px 20px rgba(0,0,0,.5);
}

.hero-content p {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    margin-bottom: 35px;
    text-shadow: 0 2px 10px rgba(0,0,0,.5);
}

.btn {
    display: inline-block;
    padding: 5px 15px;
    background: #d8a35d;
    color: white;
    border-radius: 4px;
    transition: 0.3s;
}

.btn:hover {
    background: #c38e47;
}

/* SEZIONI */

.section {
    padding: 100px 0;
}

.two-columns {
    display: flex;
    align-items: center;
    gap: 60px;
}

.text-content,
.image-content {
    flex: 1;
    z-index: 1;
}

.text-content h2 {
    font-size: 2.5rem;
    line-height: 2.8rem;
    margin-bottom: 20px;
}

.text-content p {
    margin-bottom: 30px;
    font-size: 1.3rem;
}

.image-content img {
    border-radius: 10px;
    height: 500px;
    object-fit: cover;
}

.section-dx {
    background: #f7f7f7;
}
.section-center-2 {
    background: #000000;
}

.btn-secondary {
    display: inline-block;
    padding: 12px 28px;
    background: #222;
    color: white;
    border-radius: 4px;
    transition: 0.3s;
}

.btn-secondary:hover {
    background: #444;
}

/* FOOTER */

footer {
    background: #111;
    color: white;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 40px;
    padding-top: 80px;
    padding-bottom: 80px;
}

.footer-content a {
    color: white;
}

.footer-logo {
    width: 120px;
}


.copyright {
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.15);
    padding: 20px;
    font-size: 14px;
}

/* MOBILE */

@media (max-width: 768px) {

    .top-bar .container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .contact-info {
        justify-content: center;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-content p {
        font-size: 1rem;
    }

    .two-columns,
    .reverse {
        flex-direction: column;
    }

    .image-content {
        order: 1;
    }

    .text-content {
        order: 2;
    }

    .image-content img {
        height: 300px;
    }

    .text-content h2 {
        font-size: 2rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-logo {
        width: 120px;
        text-align: center;
    }

}