* {
    box-sizing: border-box;
    user-select: none;
    scroll-behavior: smooth;
}

body {
    font-family: 'noto-sans', sans-serif;
}

img {
    object-fit: cover;
}

header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.page {
    animation: fadeOut 1.5s ease-out forwards;
}

.animate2:hover {
    transition: all 0.3s ease-in-out;
    border-bottom: 1px solid #03346E;
}

.animate:hover {
    transition: all 0.3s ease-in-out;
    border-bottom: 1px solid #03346E;
    animation: slide 0.5s ease-in-out;
}

.scale:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
}

.shadow-hover:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
}

.scale:active {
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
}

.box-shadow {
    box-shadow: 0 4px 8px #ffffff;
}

#carousel {
    scroll-behavior: smooth;
    scrollbar-width: none;
    scrollbar-color: #3D74B6 transparent;
}

#carousel:hover {
    scrollbar-width: thin;
}

#about {
    background-color: #3d73b600;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='505' height='60.6' viewBox='0 0 1000 120'%3E%3Cg fill='none' stroke='%23011731' stroke-width='10.5' stroke-opacity='0.3  '%3E%3Cpath d='M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3C/g%3E%3C/svg%3E");
}

#contact {
    background-color: #3d73b600;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 20 20'%3E%3Cg fill-opacity='0.05'%3E%3Cpolygon fill='%2303346E' points='20 10 10 0 0 0 20 20'/%3E%3Cpolygon fill='%2303346E' points='0 10 0 20 10 20'/%3E%3C/g%3E%3C/svg%3E");
}

@keyframes slide {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from 0% {
        transform: translateY(20px);
        opacity: 0;
    }

    to 100% {
        transform: translateY(0);
        opacity: 1;
    }
}