/* @import url('https://fonts.cdnfonts.com/css/amoera'); */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Marcellus', sans-serif !important;                                                
}


@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.line-fade {
  opacity: 0;
  transform: translateY(50px);
  animation: fadeInUp 0.3s ease-out forwards;
}

.delay-1 {
  animation-delay: 0.2s;
}

.delay-2 {
  animation-delay: 0.5s;
}

.delay-3 {
  animation-delay: 0.8s;
}


 .menu-transition {
            transition: all 0.3s ease-in-out;
        }
        
        /* Mobile menu animation */
        .mobile-menu {
            transform: translateX(100%);
            transition: transform 0.3s ease-in-out;
        }
        
        .mobile-menu.active {
            transform: translateX(0);
        }
        
        /* Hamburger animation */
        .hamburger-line {
            transition: all 0.3s ease-in-out;
            transform-origin: center;
        }
        
        .hamburger.active .line1 {
            transform: rotate(45deg) translate(6px, 6px);
        }
        
        .hamburger.active .line2 {
            opacity: 0;
        }
        
        .hamburger.active .line3 {
            transform: rotate(-45deg) translate(6px, -6px);
        }


          .parallax-container {
            position: relative;
            overflow: hidden;
        }
        
        /* Parallax background */
        .parallax-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            max-width: 100vw;
            height: 400%;
            background-image: url('/assets/images/58926.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            will-change: transform;
            transition: transform 0.1s ease-out;
           opacity: 0.4;
           filter: blur(5px);
        }
        
        /* Overlay for better text readability */
        .parallax-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

        }
        
        /* Content positioning */
        .parallax-content {
            position: relative;
            z-index: 10;
        }
        
        /* Enhanced text styling for better contrast */

        
        /* Mobile optimizations */
        @media (max-width: 768px) {
            .parallax-bg {
                background-attachment: scroll;
                top: 0;
                height: 200%;
            }
        }
        
        /* Smooth animations */
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 1s ease-out forwards;
        }
        
        .fade-in-delay {
            animation-delay: 0.3s;
        }
        
        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

         .hero-slider .swiper-slide img {
            width: 100%;
            height: 900px;
            object-fit: cover;
        }

        

    @media(max-width:800px) {
            .hero-slider .heroSwiper2 .swiper-slide img {
            width: 100%;
            height: 300px;
            object-fit: cover;
        }

    }


        @media(max-width:800px) {
            .hero-slider .heroSwiper3 .swiper-slide img {
            width: 100%;
            height: 300px;
            object-fit: cover;
        }

    }



    .masonry {
        column-count: 2;
        column-gap: 1rem;
    }

    @media (min-width: 768px) {
        .masonry {
        column-count: 3;
        }
    }

    @media (min-width: 1024px) {
        .masonry {
        column-count: 4;
        }
    }

    .masonry-item {
        break-inside: avoid;
        margin-bottom: 1rem;
    }



    .swiper-button-next, .swiper-button-prev {
        color: black !important;
        background-color: white; 
        padding: 25px 15px;
    }

    :root {
    --swiper-navigation-size: 20px !important;
    }


         .custom-mint { background-color: #7dd3c0; }
        .custom-blue { background-color: #4285f4; }
        .custom-brown { background-color: #d4a574; }