@import "tailwindcss";

body {
    overflow-x: hidden;
}

.smooth-scroll {
    scroll-behavior: smooth;
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.modal-backdrop {
    backdrop-filter: blur(4px);
}


/*Nuvens*/

        
 
        
        /* Versão com CSS puro */
        .cloud-container-css {
            position: absolute;
            width: 100%;
            height: 200px;
            top: 100px;
        }
        
        .cloud {
            position: absolute;
            background: white;
            border-radius: 50%;
            filter: blur(5px);
        }
        
        .cloud:before, .cloud:after {
            content: '';
            position: absolute;
            background: white;
            border-radius: 50%;
            filter: blur(5px);
        }
        
        /* Cloud 1 */
        .cloud1 {
            width: 100px;
            height: 60px;
            top: 50px;
            animation: moveCloud 25s linear infinite;
        }
        
        .cloud1:before {
            width: 50px;
            height: 50px;
            top: -20px;
            left: 20px;
        }
        
        .cloud1:after {
            width: 30px;
            height: 30px;
            top: -10px;
            left: 60px;
        }
        
        /* Cloud 2 */
        .cloud2 {
            width: 150px;
            height: 80px;
            top: 100px;
            animation: moveCloud 40s linear infinite;
            animation-delay: -20s;
        }
        
        .cloud2:before {
            width: 70px;
            height: 70px;
            top: -30px;
            left: 30px;
        }
        
        .cloud2:after {
            width: 40px;
            height: 40px;
            top: -15px;
            left: 90px;
        }
        
        /* Cloud 3 */
        .cloud3 {
            width: 80px;
            height: 50px;
            top: 180px;
            animation: moveCloud 30s linear infinite;
            animation-delay: -10s;
        }
        
        .cloud3:before {
            width: 40px;
            height: 40px;
            top: -15px;
            left: 15px;
        }
        
        .cloud3:after {
            width: 25px;
            height: 25px;
            top: -5px;
            left: 50px;
        }
        
        /* Animações */
        @keyframes moveClouds {
            from {
                background-position: 0 0;
            }
            to {
                background-position: -2000px 0;
            }
        }
        
        @keyframes moveCloud {
            from {
                transform: translateX(-200px);
            }
            to {
                transform: translateX(calc(100vw + 200px));
            }
        }