@font-face {
    font-family: 'CORBEL';
    src: url('CORBEL.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    }

:root {
    --color-primary: rgb(51, 173, 177);
    --color-white: rgb(255, 255, 255);
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;
    --font-family: 'CORBEL', Calibri, Arial, sans-serif;
    }

body {
    background-color: var(--color-white);
    font-family: var(--font-family);
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    }

    .formulari {
        max-width: 750px; /* Defineix una amplada màxima per al teu contingut */
        margin: 20px auto 0px auto;  /* Centra el contenidor horitzontalment */
        box-sizing: border-box;
        background: transparent;
        opacity: 0.9;
        padding-bottom: 10px;
        }

    #imatgeFons {
        z-index: -1;
        min-width: 800px;
        height: 100vh;
        object-fit: cover;
        position: fixed;
        background-color: rgb(105, 192, 188);
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        opacity: 0.7;
        object-position: top;
    }

    #queFem {
        color: var(--color-primary);
        font-family: var(--font-family);
        margin-top: 25px;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
        position: relative;
        overflow: hidden;
        padding-bottom: 0px;
        background-color: var(--color-white);
    }

    #logoQueFem {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: right top;
            opacity: 1;
            background-color: rgb(105, 192, 188);
            position: absolute;
    }

    .cookie-banner-simple {
        background-color: #333;
        color: var(--color-white);
        padding: 15px 20px;
        text-align: center;
        font-size: 14px;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        z-index: 1000;
        display: block;
    }

    #acceptarCookies {
            background-color: rgb(51, 173, 177);
            color: #fff;
            border: none;
            padding: 8px 15px;
            margin-left: 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
    }

    h3,
    li{
        color: rgb(105, 192, 188);
        font-family: var(--font-family);
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 0px;
    }

    .colorline {
        border: none; /* Elimina el borde por defecto */
        border-top: 1px solid rgba(95, 198, 193); /* Dibuja una línea sólida de 2px de color gris */
        margin-top: 4px;
        width: 100%;
    }

    .whiteline {
        border: none; /* Elimina el borde por defecto */
        border-top: 1px solid white; /* Dibuja una línea sólida de 2px de color gris */
        margin-top: 2px;
        width: 100%;
        
        
    }

    h3 {
        margin-left: 0px;        font-weight: bold;
        font-size: 19px;
        font-family: var(--font-family);
        margin-top: 18px;
        padding-left: 38px;
    }
    
    h4 {
        color: var(--color-white);
        padding-top: 2px;
        font-family: var(--font-family);
        font-size: 19px;
        align-self: right;
        margin-top: 4px;
        margin-right: 18px;
        margin-bottom: 0px;
        padding-bottom: 0px;
        margin-left: 38px;
        }

    .inputs {
        display: flex;
        flex-direction: column;
        line-height: 1.5;
        font-size: 18px;
        font-weight: normal;
        color: var(--color-white);
        background-color: var(--color-primary);
        margin-bottom: 15px;
        width: 100%; /* Perquè ocupin tota l'amplada disponible dins del seu label */
        box-sizing: border-box; /* Inclou el padding i el border en l'amplada total */
        padding-top: 12px;
        padding-bottom: 12px;
        border: 0px;
        overflow: hidden;
    }

    /* Estilos para el texto dentro de la etiqueta */
    .inputs label span {
            flex-grow: 1; /* Permite que el texto ocupe todo el espacio disponible */
            font-size: 18px; /* Tamaño de fuente del texto */
            text-align: right;
    }

    label {
        color: var(--color-white);
        font-family: var(--font-family);
        font-size: 18px;
        text-align: right;
        display: flex; /* Fa que l'input i el text estiguin en la mateixa línia */
        flex-direction: row; /* Explicitly ensure items are in a row */
        align-items: flex-end; /* Alinea els elements al final del contenidor */
         margin-top: 0;
        margin-bottom: 0; /* Elimina el marge superior per defecte */
        padding-right: 12px;
        padding-bottom: 5px; /* Elimina el marge inferior per defecte */
        padding-right: 18px;
        padding-left: 7px;
    }

    .fonsFading {
    animation: fonsFading 12s infinite alternate; /* 12 segundos de duración, se repite indefinidamente, alterna la dirección */
    }

    @keyframes fonsFading {
    0% {
        opacity: 1; /* Completamente invisible */
    }
    12% {
        opacity: 1; /* Completamente visible */
    }
        50% {
        opacity: 0.2; /* Completamente visible */
        }
    65% {
        opacity: 0.1; /* Se mantiene visible */
    }
    100% {
        opacity: 0; /* Completamente invisible */
    }}

    /* Estat inicial per a tots els elements que s'animaran */
.inputs,
.final {
    opacity: 0;
    animation-fill-mode: forwards;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
}

/* Animacions temporitzades per a cada element */

#queFem {
    animation: fadeInUp 1.5s ease-out 0s forwards;
}

#primer {
    animation: fadeInUp 1.5s ease-out 9s forwards;
}

#segon {
    animation: fadeInUp 1.5s ease-out 19s forwards;
}

#tercer {
    animation: fadeInUp 1.5s ease-out 24s forwards;
}

.final {
    animation: fadeInUp 1.5s ease-out 32s forwards;
}

    li {
        line-height: 1.4;
    }

    ul {

        margin-top: 0;
        margin-bottom: 0; /* Elimina el marge superior per defecte */
        margin-left: 24px;
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: 12px; /* Elimina el marge inferior per defecte */
    }

    input {
        margin-left: 8px;
        text-align: right;
        margin-top: 2px;
        height: 25px;
        vertical-align: text-bottom;
    }

    input::placeholder,
    textarea::placeholder {
                        color: var(--color-primary);
                        font-family: var(--font-family);
                        font-size: 17px;
                        padding: 7px;
                        }

    .final {
        width: 100%;
        gap: 2px;
        height: 130px;
        flex-direction: row;
        display: flex; /* Fa que l'input i el text estiguin en la mateixa línia */
    }

    .comentaris {                        
                        box-sizing: border-box;
                        background-color: var(--color-white);
                        padding: 10px;
                        font-family: var(--font-family);
                        flex-grow: 1;
                        border-width: 12px;
                        color: var(--color-primary);
                        border-color: var(--color-primary);
                        border-style: solid;
                        resize: vertical;
                        font-size: 17px;
    }

    button {
         width: 130px;
                        box-sizing: border-box;
                        color: var(--color-white);
                        background-color: var(--color-primary);
                        border-width: 0px;
                        font-family: var(--font-family);
                        font-size: 20px;
                        font-weight: bold;
                        flex-shrink: 0;
    }

    input:focus,
    textarea:focus {
                    outline: none; /* Remove default browser outline */
                    box-shadow: 0 0 0 3px rgba(51, 173, 177, 0.3); /* Custom focus ring */
                    border-color: var(--color-primary);
                    transform: scale(1.02); /* Subtle scale effect */
                    transition: all 0.2s ease;
    }

    #nom,
    #contact {
        padding: 3px;
        font-family: var(--font-family);
        width: 300px; /* Amplada fixa per als inputs */
        box-sizing: border-box; /* Inclou el padding i el border en l'amplada total */
        right: 20px;
        height: 30px; /* Alçada fixa per als inputs */
        font-size: 17px;
        margin-top: 6px;
        justify-self: flex-end;
        margin-right: 22px;
    }

    .copyright {
                color: var(--color-primary);
                font-size: 14px;
                text-align: center;
                position: relative;
                margin-top: 25 15 auto;
                }

    button:hover,
    a:hover,
    #docs:hover {
        box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
        transform: translateY(-1px);
    }

    input[type="radio"] {
        accent-color: teal; /* Els radio buttons seleccionats seran de color teal */
    }

    .missatgeError {
        color: red;
        font-size: 0.9em;
        margin-top: 5px; /* Ajusta el margen si es necesario */
        display: block;
    }

    /* Afegeix aquestes regles al teu form.css */

    
@keyframes fadeInUp {   /* Animació d'aparició amb opacitat i transformació */
        from {
            opacity: 0;
            transform: translateY(40px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
}
    
    h3 {font-size: 16px;}

    textarea:hover,
    button:hover,
    .inputs label span:hover {
        box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
        transform: translateY(-1px);
        font-size: 21px;
    }

@media (max-width: 768px) {

    #imatgeFons {
            height: 100vh;
            object-position: top;
            background-color: rgb(105, 192, 188);
            position: fixed;
            object-position: top;
        }

    .formulari {
        object-fit: cover;
        width: 100%;
        margin: 0 auto; /* Centra el formulari */
        padding: 10px 15px; /* Afegeix espai a les vores */
    }
}