@font-face {
  font-family: CROWNHEAVEN;
  src: url(../fonts/CROWNHEAVEN.woff) format("woff");
       
}
@font-face {
  font-family: HavenFont;
  src: url(../fonts/HeavenKeratom.woff2) format("woff2"),
       url(../fonts/HeavenKeratom.woff) format("woff");
}
body {
    background-color: #eee7ee;
    
    cursor: url('../Images/paintbrush.png'), auto !important;
    overflow-x: hidden;
}

.sparkle {
  position: absolute; /* Needed to position it based on mouse coordinates */
  z-index: 9999;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  pointer-events: none; /* Makes the sparkles unclickable */
  animation: fadeOut 1s forwards;
}

/* Animation to make the sparkles fade and shrink */
@keyframes fadeOut {
  to {
    opacity: 0;
    transform: scale(0);
  }
}
.font-display {
            font-family: HavenFont;
        }
.FONT-CROWNHEAVEN {
            font-family: CROWNHEAVEN;
        }


 @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        header {
            animation: fadeInDown 1s ease-out forwards;
           
        }
.header-bg{
     background-color: #fff6;
}
        /* Styles for header on scroll */
        header.scrolled {
            position: fixed;
            background-color: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
        }
        header.scrolled nav {
            color: #5a5a5a;
        }
        header.scrolled .nav-link::after {
            background-color: #5a5a5a;
        }

        /* Underline animation for nav links */
        .nav-link {
            position: relative;
            transition: color 0.3s ease;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 1px;
            bottom: -4px;
            left: 50%;
            background-color: currentColor; /* Use text color for the line */
            transition: all 0.3s ease-out;
        }
        .nav-link:hover::after {
            width: 100%;
            left: 0;
        }
.bg-spider{
    background-image:url(../Images/bgm-01.png);
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
}
.bg-spiderP {
    background-image: url(../Images/bgpm-01.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
   
}
.text-purple {
    color: #8d3391;
}
.text-purpledark {
    color: #69287b;
}
        /* Keyframe animations */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

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

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

        @keyframes subtleZoom {
            from { transform: scale(0.95); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }
        
        @keyframes growAndFade {
            from { transform: scale(0.8) translate(-10%, -10%); opacity: 0; filter: blur(10px); }
            to { transform: scale(1) translate(0, 0); opacity: 1; filter: blur(0px); }
        }

        /* Animation utility classes */
        .animate-fade-in { animation: fadeIn 1.2s ease-in-out forwards; }
        .animate-slide-up { animation: slideUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
        .animate-slide-in-right { animation: slideInFromRight 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
        .animate-subtle-zoom { animation: subtleZoom 1.2s ease-out forwards; }
        .animate-grow { animation: growAndFade 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

        /* Applying animation delays */
        .delay-200 { animation-delay: 200ms; }
        .delay-400 { animation-delay: 400ms; }
        .delay-600 { animation-delay: 600ms; }
        .delay-800 { animation-delay: 800ms; }

        /* Styling for the vertical text */
        .vertical-text {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            transform: rotate(180deg);
             font-family: CROWNHEAVEN;
        }
        
        /* Ensure all elements start invisible before animation */
        .animated {
            opacity: 0;
        }

           /* Styling for the decorative background curtain effect */
        .background-curtain {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(248, 246, 242, 0.9) 20%, rgba(248, 246, 242, 1) 40%, rgba(248, 246, 242, 1) 60%, rgba(248, 246, 242, 0.9) 80%, rgba(255, 255, 255, 0) 100%),
                              url('https://www.transparenttextures.com/patterns/washi.png');
            opacity: 0.5;
            z-index: -1;
        }

        /* Animation classes */
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Staggered animation delays for the gallery */
        .gallery-item:nth-child(1) { transition-delay: 0.1s; }
        .gallery-item:nth-child(2) { transition-delay: 0.2s; }
        .gallery-item:nth-child(3) { transition-delay: 0.3s; }
        .gallery-item:nth-child(4) { transition-delay: 0.4s; }

        /* Custom styles for image frames to mimic the original design */
        .frame {
            padding: 1rem;
            border-radius: 0.25rem;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.05);
            background-color: #fff;
        }

        .frame-wood {
            background-color: #d1b59a; /* Wood color */
            border: 10px solid #856d54;
        }
        
        .frame-gold {
            background: linear-gradient(145deg, #fce5a3, #d4af37, #b8860b);
            border: 12px solid #a67c00;
            box-shadow: 0 0 5px #d4af37 inset, 0 10px 25px rgba(0, 0, 0, 0.2);
            padding: 1.25rem;
        }
        
        .frame-dark {
             background-color: #606060;
             border: 10px solid #333;
        }

        .frame-silver {
            background: linear-gradient(145deg, #e0e0e0, #c0c0c0, #a9a9a9);
            border: 10px solid #8d8d8d;
            box-shadow: 0 0 5px #c0c0c0 inset, 0 10px 25px rgba(0, 0, 0, 0.2);
        }
        
        .section-title {
            letter-spacing: 0.2em;
            font-weight: 600;
        }

         .text-teal {
            color: #2F4F4F; /* Dark Slate Gray / Teal */
        }
        .bg-teal {
            background-color: #2F4F4F;
        }
        
        .border-teal {
            border-color: #2F4F4F;
        }
        /* Custom animation for subtle background movement */
        @keyframes subtle-pan {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .animated-bg {
            background-size: 150% 150%;
            animation: subtle-pan 25s infinite linear;
        }

            /* Initial state for scroll-triggered animations */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        
        /* Final state for animated elements when they become visible */
        .animate-on-scroll.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

      /* Custom styles for the carousel for a more artistic feel */
        .carousel-container {
            position: relative;
        }

        .carousel-track {
            /* This enables the smooth sliding animation */
            transition: transform 0.5s ease-in-out;
        }

        .carousel-item {
            /* Ensures items don't shrink and maintain their specified width */
            flex-shrink: 0;
            backface-visibility: hidden; /* Helps with animation performance */
            transform: translateZ(0);
        }

        /* An elegant hover effect for the items, including the new cloth animation */
        .cloth-container {
            position: relative; /* Needed for the ::after pseudo-element */
        }
        
        .cloth-container::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(244, 244, 242, 0.85); /* A soft overlay matching the page background */
            clip-path: circle(0% at 100% 100%); /* Start collapsed at the bottom-right */
            transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1); /* A nice easing for cloth-like movement */
            pointer-events: none; /* Make sure the overlay doesn't block mouse events */
        }

        .carousel-item:hover .cloth-container::after {
            clip-path: circle(150% at 100% 100%); /* Expand to cover the entire container */
        }

        .carousel-item .image-wrapper {
            transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
        }
        
        .carousel-item:hover .image-wrapper {
            transform: scale(1.05);
        }

        /* Styling for the navigation buttons */
        .carousel-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            background-color: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(4px);
            border-radius: 9999px;
            width: 3.5rem; /* 56px */
            height: 3.5rem; /* 56px */
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }
        .carousel-button:hover {
            background-color: white;
            box-shadow: 0 6px 20px rgba(0,0,0,0.1);
            transform: translateY(-50%) scale(1.05);
        }
        .carousel-button:disabled {
            opacity: 0.4;
            cursor: not-allowed;
            transform: translateY(-50%) scale(0.95);
        }
        .carousel-button svg {
            width: 1.5rem;
            height: 1.5rem;
            color: #004643; /* Deep teal from inspiration */
        }
        .carousel-button.prev {
            left: -1.75rem; /* Position buttons slightly outside the container */
        }
        .carousel-button.next {
            right: -1.75rem;
        }

        /* Hide buttons on mobile where swiping is more common */
        @media (max-width: 768px) {
            .carousel-button {
                display: none;
            }
        }
/* Applying custom fonts */
.font-dancing-script {
    font-family: 'Dancing Script', cursive;
}

.font-inter-black {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
}



/* Keyframes for eye-catching animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }

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

@keyframes zoomInRotate {
    from {
        opacity: 0;
        transform: scale(0.5) rotate(-20deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(-4deg);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

/* Animation utility classes */
.animate-fade-in-down {
    animation: fadeInDown 1s ease-out forwards;
}

.animate-zoom-in-rotate {
    animation: zoomInRotate 1s ease-out forwards;
}

.animate-fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
}

/* Keyframes for animations */
@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

@keyframes imageFadeIn {
    from {
        opacity: 0.3;
    }

    to {
        opacity: 1;
    }
}

/* Animation utility classes */
.animate-slide-left {
    animation: slideInFromLeft 0.8s ease-out forwards;
}

.animate-slide-right {
    animation: slideInFromRight 0.8s ease-out forwards;
}

.animate-fade-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.main-image-transition {
    animation: imageFadeIn 0.5s ease-in-out;
}

/* Styling for the active thumbnail */
.active-thumbnail {
    border-color: #f59e0b; /* amber-500 */
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.5);
}

/* Initial state for elements to be animated */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

    /* Final state for animated elements */
    .animate-on-scroll.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Staggered animation delay for the image */
    .animate-on-scroll.delay-200 {
        transition-delay: 200ms;
    }


.floating-label-container {
    position: relative;
}

.floating-label-input {
    border: 1px solid #D1D5DB;
    border-radius: 0.5rem;
    padding: 1.25rem 1rem 0.75rem;
    width: 100%;
    transition: border-color 0.2s;
}

    .floating-label-input:focus {
        outline: none;
        border-color: #4F46E5;
        box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
    }

.floating-label {
    position: absolute;
    top: 1rem;
    left: 1rem;
    color: #6B7280;
    pointer-events: none;
    transition: all 0.2s ease-out;
    transform-origin: 0 0;
}

.floating-label-input:focus + .floating-label,
.floating-label-input:not(:placeholder-shown) + .floating-label {
    transform: translateY(-0.65rem) scale(0.85);
    color: #4F46E5;
}
 .teal-btn {
    /* Sizing and Spacing */
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
   
    /* Border and Shape */
    border: 2px solid #2F4F4F;
    /* Key style: 2px solid red border */
    border-radius: 25px; /* Creates the rounded corners */
    /* Colors and Text */
    background-color: transparent;
    color: #2F4F4F;
    
    font-weight: bold;
    /* Smooth transition for hover effect */
    transition: all 0.3s ease;
}

    /* Hover Effect: Inverts colors on mouse-over */
.teal-btn:hover {
    background-color: #2F4F4F;
    
    color: white;
}

/* Responsive Behavior: Makes the button full-width on screens smaller than 600px */
@media (max-width: 600px) {
    .teal-btn {
        width: 100%;
        box-sizing: border-box; /* Ensures padding doesn't break the layout */
    }
    
}