body {
    margin: 0;
    padding: 0;
    text-decoration: none;
   
}


/* Remove underline from all links */
a {
    text-decoration: none;
    color: rgb(0, 0, 0); /* Default color */
  }

/* Common styles */
.email,
.foto1,
.lingua,
.indirizzi,
.indirizzi1,
.social,
.intro,
.intro2,
.logo,
.titolo,
.header,
.head,
.testospecia,
.testospecia2,
.slogan
.coracar,
.readalso,
.subtitle,
.footer {
    font-family: "futura-pt", sans-serif;
    font-weight: 500;
     
    }
 
 
    
      
    :root {
        --mouse-x: 0px;
        --mouse-y: 0px;
        --scale-cursor: 1;
    }
    
    .cursor {
        z-index: 999; /* Increased to ensure it's above other elements */
        position: fixed;
        top: var(--mouse-y);
        left: var(--mouse-x);
        width: 3rem;
        height: 3rem;
        transform: translate(-50%, -50%);
        pointer-events:none;
        mix-blend-mode: multiply; /* Optional: makes cursor visible on all backgrounds */
    }
    
    .cursor-center {
        width: 100%;
        height: 100%;
        transform: scale(var(--scale-cursor));
        transition: transform 0.2s ease-in-out;
 
    }
    
    .cursor-shape {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: rgb(255, 0, 0);
        border: 2px dotted red;
        box-sizing: border-box;
    }
    
    .cursor-inner {
        width: calc(100% - 2px);
        height: calc(100% - 2px);
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

    }
    
   

    

    


.header span {
    line-height: 1.5; /* Adjust line height as needed */
    margin-bottom: 0; /* Remove any extra margin */
}

.header {
    top: 5vh;
    width: 62vw;
    position: fixed;
    z-index: 2;
    font-size: 1.4rem;
    padding-top: 34px;
    padding-bottom: 0px;
    text-align: right;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: baseline; /* Align items to the baseline */
    right: 16vw;

    
}



.footer{
    bottom: 0vh;
    margin-left: 4vw;
    padding-bottom: 2vh;
    position: fixed;
    z-index: 1;
    font-size: 1rem;
    line-height: 0.65;
    

} 

.testospecia{
    font-family: "futura-pt", sans-serif;
    font-weight: 600;
}

.testospecia2{
    font-family: "futura-pt", sans-serif;
    font-weight: 600; 
  
}

.solobold{
    font-family: "futura-pt", sans-serif;
    font-weight: 600; 
  
}


.slogan{
    font-family: "futura-pt", sans-serif;
    font-weight: 500; 
    margin-top: 14vh;
    z-index: 2;
    margin-left: 2.5vw;
    max-width: 230px;
    position: fixed;
    left: 1.5vw;
    font-size: 1.4rem; /* Font size for large devices */
}

.intro { 
    z-index: 3;
    position: fixed;
    margin-left: 19vw;
    margin-right: 19vw;
    margin-top: 15vh;
    padding-top: 10px;
    padding-left: 40px;
    padding-right: 40px;
    font-size: 1.4rem; /* Font size for large devices */
    line-height: 1.3;
    border-top: 10px;
   /* border-left: 2px solid #333333;*/
    width: 62vw;
    height: 75vh;
    overflow-y: scroll;
    font-weight: 300;  

}


.foto1{
    z-index: 2;
    max-width: 33vw;
   
    
}

.foto{
    z-index: 2;
    margin-left: 2.5vw;
    top: 5vh;
    max-width: 230px;
    position: fixed;
    left: 1.5vw;
}


#social{
    bottom: 0vh;
    right: 3vw;
    padding-bottom: 2vh;
    position: fixed;
    z-index: 1;
    font-size: 1rem;
    line-height: 0.75;
    text-decoration: none;
    
 } 
 
 
.email{
    text-decoration: underline;
    font-weight: 700;
    
}

.logo {
    z-index: 2;
    margin-left: 2.5vw;
    top: 5vh;
    max-width: 230px;
    position: fixed;
    left: 1.5vw;
}


.coracar{
    display: block;
    margin: auto; /* Center horizontally */
    position: fixed;
    z-index: 1; /* Ensure it's above other content */
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center vertically */
    width: 25%;
}






#lingua {
    display: flex;
}

.lingua {
    font-weight: 300;
    background-color: white;
    color: black;
    border: 1px solid #000000;
    font-size: 1rem;
    margin: 0; /* Remove default margins */
    text-transform: uppercase;
    padding-left: 10px; /* Add padding */
    padding-right: 10px; /* Add padding */
    padding-top: 0px;
    padding-bottom: 0px;
}

.lingua:hover {
    background-color: #000000;
    color: white;
}


.readalso {
    border: 1.5px solid #ff0000;
    background-color: white;
    color: black;
    border-radius: 50px;
    text-align: center;
    margin-bottom: 15px;
    margin-left: 8vw;
    margin-right: 8vw;
    padding-top: 10px;
    padding-bottom: 10px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3); /* Add shadow effect only at the bottom */
}

.readalso:hover {
    background-color: #ff0000;
    color: white;
  
}



.hamburger-menu {
    display: none; /* Hide the menu by default */
}



/* Small devices (phones) */
@media (max-width: 600px) {
    .header {
        display: none;
    }

    .cursor {
        display: none;
    }
      
    .cursor-center {
        display: none;
    }
       
    .cursor-shape {
        display: none;
    }
      
    .cursor-inner {
        display: none;
    }

    #social{
        display: none;
    }

    #indirizzi1{
        display: none;
    }


    .logo {
        padding-left: 6.5vw;
        top: 5vh;
        max-width: 130px;
        position: fixed;
        left: 1.5vw;  
    }

    .slogan{
        font-family: "futura-pt", sans-serif;
        font-weight: 500; 
        margin-top: 14vh;
        z-index: 2;
        padding-left: 6.5vw;
        max-width: 130px;
        position: fixed;
        left: 1.5vw;
        font-size: 1rem;
    }

    .intro {
        margin: 0 auto;
        margin-top: 14vh;
        font-size: 1rem; /* Font size for large devices */
        line-height: 1.2;
        width: 80vw;
        height: 70vh;
        overflow-y: scroll;
        font-weight: 300;
        z-index: 0; /* Ensure intro has a lower z-index */
        position: relative; /* Make sure it is positioned */
    }
    
    .intro::before {
        content: '';
        position: fixed; /* Position relative to the viewport */
        top: 13.5vh; /* Align with the top margin of the .intro */
        left: 0;
        right: 0;
        height: 40px; /* Height of the gradient border */
        z-index: 1; /* Ensure the gradient is above the text */
        pointer-events: none; /* Allow clicks to pass through */
    }
    
    .foto1{
        z-index: 2;
        max-width: 70vw;
    }
    

    .hamburger-menu {
        display: block; /* Show the hamburger menu on small devices */
        position: relative; /* Ensure the parent container is positioned */
    }

    .navbar {
        display: none; /* Hide the menu by default */
        width: 100%;
       
    }
   .navbar.active {
    display: flex;
    position: fixed;
    top: 13vh;
   /* left: 50%;  Start positioning from the center of the viewport */
   /* transform: translateX(-50%);  Adjust position to center the element */
    width: 100vw;
    height: calc(55vh - 22vh); /* Adjust height to cover the screen minus top and bottom space */
    padding-top: 3%;
    line-height: 1.4;
    font-family: "futura-pt", sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
    background-color: rgb(255, 255, 255); /* Set background to a light color */
    z-index: 2; /* Ensure navbar has a higher z-index */
    overflow-y: auto; /* Allow scrolling if content overflows */
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); /* Add shadow effect only at the bottom */
   /* border-top: 2px solid rgb(0, 0, 0);  Add red border at the bottom */
}

    
    

    .navbar.active li {
        margin-left: 8vw;
        margin-right: 10vw; /* Maintain margins for list items */
        z-index: 2; /* Ensure list items also have a higher z-index */
    }
    .hamburger-icon {
        width: 30px;
        height: 30px;
        position: fixed; /* Change from absolute to fixed */
        top: 5vh; /* Adjust distance from top */
        right: 7vw; /* Adjust distance from right */
        cursor: pointer;
        z-index: 3; /* Ensure hamburger icon has the highest z-index */
    }

    .line {
        width: 100%;
        height: 4px;
        background-color: #000000;
        position: absolute;
        left: 0;
    }

    .line:nth-child(1) {
        top: 0;
    }

    .line:nth-child(2) {
        top: 10px;
    }

    .line:nth-child(3) {
        top: 20px;
    }

    .coracar {
        top: 60%;
        left: 48%;
        width: 55%;
    }

    .readalso {
        
        text-align: center;
        margin-bottom: 10px;
        margin-left: 4vw;
        margin-right: 4vw;
        padding: 10px;
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3); /* Add shadow effect only at the bottom */    
    }

    .footer {
        bottom: 0;
        left: 0;
        right: 0;
        width: 100vw;
        padding-left: 8vw;
        padding-top: 4vh;
        z-index: 1;
        font-size: 0.9rem;
        text-decoration: none;
        background-color: rgb(255, 255, 255); /* Ensure the footer has a background */
        position: fixed;
    }
    
    .footer::before {
        content: '';
        position: fixed; /* Position relative to the viewport */
        bottom: 6vh; /* Align with the bottom of the viewport */
        left: 0;
        right: 0;
        z-index: 0; /* Ensure the gradient is behind the footer content but above the content below the footer */
        pointer-events: none; /* Allow clicks to pass through */
    }
    
    


    li {
        list-style-type: none;
    }
    /* Hide bullet points for unordered lists */
}