body {
    margin: 0;
    padding: 0;
    background-color: rgb(69, 69, 72);
}

.loadscreen-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('./img/2025-02-08_19.png') no-repeat center center, black;
    background-size: cover;
    filter: blur(10px);
    z-index: 1;
    transition: opacity 2s ease-in-out, visibility 2s ease-in-out;
}

.loadscreen-logo {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 2s infinite;
    transition: opacity 2s ease-in-out, visibility 2s ease-in-out;
    height: 200px;
    width: 200px;
    z-index: 2;
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

.hidden {
    opacity: 0;
    visibility: hidden;
}

.new-image-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50vh; /* Set the height to 50% of the viewport height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 2s ease-in-out;
    z-index: 2;
}

.new-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the image covers the area without distortion */
    filter: blur(10px); /* Apply the blur effect */
}

.new-logo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 220px; /* Adjust the height as needed */
    width: auto;
    z-index: 3;
}

.new-text {
    font-family: 'Poppins', sans-serif; /* Usa il font Poppins */
    font-weight: 700; /* Grassetto */
    text-transform: uppercase; /* Maiuscolo */
    position: absolute;
    top: 10%; /* Mantieni il posizionamento originale */
    z-index: 4;
    color: rgb(255, 255, 255); /* Colore originale */
    font-size: 24px; /* Mantieni la dimensione originale */
    text-decoration: solid;
    text-shadow: 0 0 3px black;
    cursor: pointer; /* Indica che è cliccabile */
}

.new-image-container.visible {
    opacity: 1;
}

/* Tooltip styles */
.tooltip {
    position: absolute;
    background-color: rgb(69, 69, 72);
    color: white;
    padding: 5px;
    border-radius: 5px;
    font-size: 14px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s;
    transform: translateY(10px); /* Position the tooltip below the text */
    z-index: 5; /* Ensure the tooltip is above all other elements */
}

/* Styles for the lower container and sections */
.lower-container {
    position: fixed;
    top: 50vh; /* Start at the middle of the viewport */
    left: 0;
    width: 100%;
    height: 50vh; /* Cover the lower half of the viewport */
    display: flex;
    flex-direction: row;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

/* Make the lower container visible at the same time as other transitions */
.new-image-container.visible + .lower-container {
    opacity: 1;
}

.section1 {
    flex: 1; /* Each section takes up an equal amount of space */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: rgb(157, 157, 157);
    padding: 35px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;
    animation: moveUp 2s ease-in-out forwards;
    text-align: center; /* Center the text */
}

.section1-wrapper {
    /* Adjust the width as needed */
    width: 100%;
}

.tt {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 10px; /* Add some space below the title */
}

.section2 {
    flex: 1; /* Each section takes up an equal amount of space */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Optional: Add borders to distinguish sections */
    color: rgb(157, 157, 157);
    padding: 35px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;       
    animation: moveUp 3s ease-in-out forwards;
    text-align: center; /* Center the text */
}

.section2 img {
    width: 50px; /* Set the width to 50px */
    height: 50px; /* Set the height to 50px */
    margin: 0 10px; /* Add some space between the images */
}

.section3 {
    flex: 1; /* Each section takes up an equal amount of space */
    /* Optional: Add borders to distinguish sections */
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(157, 157, 157);
    padding:35px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 700;
    animation: moveUp 4s ease-in-out forwards;
}

/* Define keyframe animation for moving up */
@keyframes moveUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Ensure the sections are initially hidden */
.lower-container {
    position: fixed;
    top: 50vh; /* Start at the middle of the viewport */
    left: 0;
    width: 100%;
    height: 50vh; /* Cover the lower half of the viewport */
    display: flex;
    flex-direction: row;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

/* Make the lower container visible at the same time as other transitions */
.new-image-container.visible + .lower-container {
    opacity: 1;
}

.align a {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    text-align: left;
    text-decoration: none; /* Remove underline from links */
    color: rgb(157, 157, 157); /* Set link color to the same as text */
    transition: color 0.6s ease; /* Smooth transition for color change */
}

.align a:hover {
    color: white; /* Change link color to white on hover */
}

hr {
    border: 0;
    height: 1px;
    background-color: gray; /* Set the color to gray */
    margin: 10px 0; /* Optional: Add some margin for spacing */
}

.shoplink {
    background-color: rgb(88, 88, 157);
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 20px;
    color: white;
    transition: transform 0.6s ease; /* Add transition for smooth scaling */
}
@media (max-width: 800px) {
    .lower-container {
        position: static; /* Allow the container to flow with the document */
        flex-direction: column; /* Stack sections vertically */
        height: auto; /* Adjust height to fit content */
        margin-top: 50vh; /* Add margin to compensate for fixed elements */
    }

    .section1, .section2, .section3 {
        height: auto; /* Adjust height to fit content */
     /* Add margin to compensate for fixed elements */
    }
}