/* index  */

/* font start
@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2'),
    url('fonts/JetBrainsMono-Regular.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/JetBrainsMono-Bold.woff2') format('woff2'),
    url('fonts/JetBrainsMono-Bold.woff') format('woff');
    font-weight: 700;

} */
/*font finish */

/* root start */
:root {
    --primary-color: #f8f9fa;
    --third-color: #6d6c6c;
    --chatbox-color: #f0f0f0;
    --borderChatbox-color: #ccccccae;
    --shadow-color: rgba(255, 255, 255, 0.73);
    --shadow2-color: rgba(0, 0, 0, 0.689);
    --abbox-color: #ff4000;
    --footer-color: #EAE8E8;
    --margin-x: 8rem;
}

/*root finish */

.red {
    color: #ff0000;
    font-weight: 100;
}

/* base index start */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'JetBrains Mono', monospace;
    background-color: rgba(33, 32, 32, 0.897);
    overflow-x: hidden;
    cursor: none;
}
/* base index finish */

/* cursore start */
.cursor {
    position: absolute;
    background-color: red;
    top: 0;
    width: 8px;
    height: 8px;
    z-index: 3;
    transition: 0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform,
    0.5s cubic-bezier(0.75, -1.27, 0.3, 2.33) opacity;
    user-select: none;
    pointer-events: none;
    transform: scale(0.8);
    border-radius: 50%;
}

.cursor::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 100%;
    opacity: 0;
}

.cursor.active {
    content: 'VIEW MORE';
    opacity: 1;
    transform: scale(12);
}

.cursor.active::before {
    opacity: 1;
}

/* cursore finish */

/* preloader start  */
.start {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99;
}

.counter::before {
    content: '[ ';
    color: var(--third-color);
    font-weight: 100;
}

.counter::after {
    content: ' ]';
    color: var(--third-color);
    font-weight: 100;
}

.loader-text {
    position: fixed;
    color: var(--third-color);
    z-index: 4;
    font-size: 1.3vw;
    top: 50%;
    left: 30%;
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: left;
    z-index: 11;
}

.background-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 10;
}

.counter {
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    z-index: 12;
    color: red;
    padding: 0 2em 0 4em;
    font-size: 8vw;
}

/* preloader finish */

/* navbar start */
.navbar {

    display: flex;
    align-items: end;
    justify-content: space-between;
    padding:  0 var(--margin-x);
    top: 0;
    right: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    margin: 1rem 0;
}

.navbar-logo a:hover {
    color: var(--borderChatbox-color);
}

.navbar-logo a {
    color: var(--third-color);
    text-align: center;
    text-decoration: none;
    padding: .4rem 1rem;
}
.navbar-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.available-pointer {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #4CAF50;
    animation: blink 2s linear infinite;
}

.nav-info {
    color: var(--third-color);
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: .5rem 1rem;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
    80% {
        opacity: .5;
    }
}
/* navbar finish */



/* section hero start */
.section-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 10rem;
    margin-top: 500px;
}

.section-hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5rem;
    font-size: 1.5rem;
    color: var(--third-color);
    width: 100vw;
    height: 100vh;
}
#giona {
    font-size: 5rem;
    color: red;
}
.pipe-char {
    font-weight: 100;
    color: red;
    display: inline-block;
    transform: translateX(0);
    transition: transform 2s;
}

.pipe-char.animate {
    transform: translateX(45px);
}

/*section hero finish */

/* footer start */
footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
    color: var(--third-color);
}

.footer-init {
    margin: 2rem 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
}

.footer-up {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
    width: 100%;
    font-size: 3rem;
    padding: .8rem;
}

.name {
    flex: 1;
    text-align: left;
}

#footer-send a {
    flex: 1;
    text-align: right;
    text-decoration: none;
    color: var(--third-color);
    padding: 0 1rem;
    font-size: 1rem;
    background-color: red;
}

#footer-info {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
}

#footer-info a {
    text-decoration: none;
    color: red;
}

#footer-info a:hover {
    color: red;
}

.popover-text {
    width: 100%;
    color: red;
    text-align: left;
    transition: opacity 2s;
    font-size: 1rem;
}

#form-container {
    display: flex;
}

form {
    justify-content: center;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="submit"] {
    width: 100%;
    padding: .3rem;
    margin-bottom: .3rem;
    border: none;
    transition: all 0.3s ease;
    background-color: transparent;
}

input[type="submit"] {
    background-color: red;
    color: var(--shadow-color);
    cursor: pointer;
    filter: blur(1px);
}

input[type="submit"]:hover {
    background-color: blue;
    filter: blur(.3px);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="text"]:active,
input[type="number"]:active,
input[type="email"]:active {
    border: none;
    border-bottom: 3px solid #4CAF50;
    color: var(--shadow-color);
}

input[type="text"]:invalid:not(:placeholder-shown),
input[type="number"]:invalid:not(:placeholder-shown),
input[type="email"]:invalid:not(:placeholder-shown) {
    border-bottom: 3px solid red;
}

input[type="text"]:valid:not(:placeholder-shown),
input[type="number"]:valid:not(:placeholder-shown),
input[type="email"]:valid:not(:placeholder-shown) {
    border-bottom: 3px solid #4CAF50;
    color: var(--third-color);
}

/* footer finish */


/* works section scroll start */
.scroll-section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.horizontal-scroll {
    display: flex;
    gap: 15px;
    width: 200%;
}

.horizontal-scroll video {
    width: 45vw;
    height: auto;
    object-fit: cover;
}

/* finish works section */

/* Mobile Styles */
@media (max-width: 768px) {
    body {
        font-size: 25px; /* Dimensione del font più piccola per i dispositivi mobili */
        overflow-x: auto; /* Permetti lo scrolling orizzontale */
        width: 400%;
    }
    .navbar {
        width: 100%;
        flex-direction: column;
        justify-content: center;
    }
    #giona {
        visibility: collapse;
    }

    .section-hero {
        flex-direction: column; /* Allinea gli elementi verticalmente */
        gap: 5rem; /* Riduci il gap */
        width: 100%;
        font-size: 2rem;
    }

    .section-hero-text {
        font-size: 2.5rem; /* Dimensione del testo più piccola */
        padding: 0 2rem; /* Riduci il padding */
    }

    .footer-init {
        margin: 1rem 2rem; /* Riduci il margine */
        gap: 0.5rem; /* Riduci il gap tra gli elementi */
    }

    .footer-up {
        flex-direction: column; /* Cambia la direzione per schermi piccoli */
        align-items: center; /* Centra gli elementi */
        font-size: 2rem; /* Dimensione del font più piccola */
    }

    #footer-send a {
        text-align: center; /* Centra il testo */
        padding: 1rem; /* Aggiungi padding per il pulsante */
    }

    #footer-info {
        flex-direction: column; /* Cambia la direzione per schermi piccoli */
        align-items: center; /* Centra gli elementi */
        gap: 0.5rem; /* Gap ridotto */
    }

    #footer-info a {
        font-size: 0.9rem; /* Riduci la dimensione del font */
    }

    .popover-text {
        font-size: 0.9rem; /* Riduci la dimensione del font per il testo popover */
    }

    #form-container {
        width: 100%; /* Imposta la larghezza del modulo al 100% */
    }

    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="submit"] {
        font-size: 1rem; /* Dimensione del font per i campi input */
    }

    .horizontal-scroll {
        flex-direction: column; /* Cambia la direzione per schermi piccoli */
    }

    .horizontal-scroll video {
        width: 100%; /* Imposta la larghezza del video al 100% */
        height: auto; /* Mantieni le proporzioni */
    }

    .navbar {
        font-size: 1rem; /* Dimensione del font più piccola */
    }

    .loader-text {
        font-size: 1rem; /* Riduci la dimensione del font del caricamento */
    }

    .counter {
        font-size: 5vw; /* Dimensione del font per il contatore */
    }
}