@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');



/************************************************** PALETTE */
:root {
    --bg-dark: linear-gradient( 90deg,#030304,#1b1b1f);
    
    /**/

    --btn-cta: linear-gradient( 90deg,var(--accent-rev-start), var(--accent-rev-end));
    --btn-cta-h: linear-gradient( 90deg, var(--accent-start),  var(--accent-end));

    --nav-height: 70px;
    --margin-top: 100px;
    
    --accent-start: #c60606;
    --accent-middle: #ff3300;
    --accent-end:#340b15;

    --accent-rev-start: #1c8b3d;
    --accent-rev-middle: #36be5f;
    --accent-rev-end: #0f4c21;

    --accent-rev-start: #0fad76;
    --accent-rev-middle: #1be8a1;
    --accent-rev-end: #107c56;


    --bg-hero: linear-gradient( 90deg,#ffffff, #f2f2f3);
    --bg-hero: linear-gradient( 120deg,#e6e6ed, #ffffff, #e6e6ed);
    --bg-dark: linear-gradient( 120deg,#0d0e0e, #131517, #0d0e0e);
    --bg-light: #f2f2f3;
    --bg-grey: #eeeef3;

    --tx-header: #5e5e68;
    --tx-main: #878282;
    --tx-light: #f5f5f7;
    --tx-dark: #3a3636;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { 
    font-family: "Raleway", sans-serif;

    background: var(--bg-light); 
    color: var(--text-main);
    line-height: 1.6;
}

::selection {
  background-color: var(--accent-start);
  color: #ffffff;
}
/* solo sui paragrafi */
p::selection {
  background-color: var(--accent-rev-start);
  color: #fff;
}

/* solo sui titoli */
h1::selection, h2::selection {
  background-color: #333;
  color: #ff6600;
}
.tx-center{text-align: center;}
.tx-logo-1{color: var(--tx-header);}
.tx-logo-2{color: var(--accent-start)}
.tx-accent{color: var(--accent-start)}
.tx-gradient-1{
    background: linear-gradient( 90deg, var(--accent-end), var(--accent-start) , var(--accent-middle), var(--accent-end), var(--accent-end));

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    min-height: 55px;
}
.tx-gradient-2{
    background: linear-gradient( 90deg, var(--accent-rev-start) , var(--accent-rev-middle), var(--accent-rev-end), var(--accent-rev-end));

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    min-height: 55px;
}

.tx-testo{font-size: 1.1rem; font-weight: 400; line-height: 2.2rem; color: var(--tx-main) ; align-items: center; }
hr{border: 0.5px solid var(--hr); margin-bottom: 25px;}
hr {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, #333, transparent);
    width: 80%;
    margin: 20px auto;
}

.btn-cta{
    padding: 15px 22px;
    border-radius: 50px;
    background: var(--btn-cta);
    background: var(--bg-dark);

    color: var(--tx-light);

    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 2.2px;

    transition: 0.3s;
}.btn-cta:hover{
    background: var(--btn-cta);
    padding: 18px 26px;

    transition: 0.3s;
}

.space-20{height: 20px !important;}
.space-50{height: 50px !important;}

a {text-decoration: none;}
a:link {color:none;}
a:visited {color: #4a4a4a;}
a:hover {text-decoration: none;}
a:focus {outline: 3px solid rgba(47,107,255,.4);}
a:active {color: #143cb8;}


/************************************************** HEADER */
.menu-link{
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--nav-height); 
    z-index: 1000;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: right;
    padding-right: 50px;
}
.nav-links { display: flex; list-style: none; gap: 20px; }
.nav-links a { 
    text-decoration: none; 
    color: var(--tx-header); 
    font-weight: 700; 
    font-size: 1.2rem;
    transition: 0.3s;
}
.nav-links a:hover { color: var(--accent-rev-start);}
.ico-nav{height: 25px;}
.nav-links a.active {color: var(--accent-start); }

#main-header {
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--nav-height); 
    z-index: 999;
    background: rgba(37, 52, 69, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    
    transform: translateY(-100%);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
#main-header.header-visible {
    transform: translateY(0);
    opacity: 1;
}
.nav-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
}
.logo-header { font-weight: 800; font-size: 1.3rem; letter-spacing: -1px; line-height: 1.1rem; color: var(--tx-header);}


@media (max-width: 768px) {

    .menu-link{visibility: hidden;}
}