.elementor-2949 .elementor-element.elementor-element-6a10334{--display:flex;}.elementor-2949 .elementor-element.elementor-element-6a10334 > .elementor-shape-top svg, .elementor-2949 .elementor-element.elementor-element-6a10334 > .e-con-inner > .elementor-shape-top svg{height:0px;}.elementor-2949 .elementor-element.elementor-element-2ba338c{--display:flex;}.elementor-2949 .elementor-element.elementor-element-f91a67e{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-2949 .elementor-element.elementor-element-3523282{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-2949 .elementor-element.elementor-element-bce0111.elementor-element{--align-self:flex-start;}.elementor-2949 .elementor-element.elementor-element-bce0111 img{border-style:none;}.elementor-2949 .elementor-element.elementor-element-4ec7f9a{--display:flex;}.elementor-2949 .elementor-element.elementor-element-090c8df.elementor-element{--align-self:flex-start;}.elementor-2949 .elementor-element.elementor-element-090c8df img{border-style:none;}.elementor-2949 .elementor-element.elementor-element-ecd38ac{--display:flex;}.elementor-2949 .elementor-element.elementor-element-2b4a560.elementor-element{--align-self:flex-start;}.elementor-2949 .elementor-element.elementor-element-2b4a560 img{border-style:none;}.elementor-2949 .elementor-element.elementor-element-7ffdc87{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-2949 .elementor-element.elementor-element-4fab9fc{--display:flex;}.elementor-2949 .elementor-element.elementor-element-1f44afa.elementor-element{--align-self:flex-start;}.elementor-2949 .elementor-element.elementor-element-1f44afa img{border-style:none;}.elementor-2949 .elementor-element.elementor-element-8202a5a{--display:flex;}.elementor-2949 .elementor-element.elementor-element-40727a4.elementor-element{--align-self:flex-start;}.elementor-2949 .elementor-element.elementor-element-40727a4 img{border-style:none;}.elementor-2949 .elementor-element.elementor-element-b0c6062{--display:flex;}.elementor-2949 .elementor-element.elementor-element-4c54bfc.elementor-element{--align-self:flex-start;}.elementor-2949 .elementor-element.elementor-element-4c54bfc img{border-style:none;}.elementor-2949 .elementor-element.elementor-element-b1858fa{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-2949 .elementor-element.elementor-element-a2433ad{--display:flex;}.elementor-2949 .elementor-element.elementor-element-049f735.elementor-element{--align-self:flex-start;}.elementor-2949 .elementor-element.elementor-element-049f735 img{border-style:none;}.elementor-2949 .elementor-element.elementor-element-87aba1c{--display:flex;}.elementor-2949 .elementor-element.elementor-element-ba38dfb.elementor-element{--align-self:flex-start;}.elementor-2949 .elementor-element.elementor-element-ba38dfb img{border-style:none;}.elementor-2949 .elementor-element.elementor-element-c6c77a3{--display:flex;}.elementor-2949 .elementor-element.elementor-element-1f34d9e.elementor-element{--align-self:flex-start;}.elementor-2949 .elementor-element.elementor-element-1f34d9e img{border-style:none;}.elementor-2949 .elementor-element.elementor-element-239c3bb{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-2949 .elementor-element.elementor-element-416ea2e{--display:flex;}.elementor-2949 .elementor-element.elementor-element-f8fa154.elementor-element{--align-self:flex-start;}.elementor-2949 .elementor-element.elementor-element-f8fa154 img{border-style:none;}.elementor-2949 .elementor-element.elementor-element-5f255f5{--display:flex;}.elementor-2949 .elementor-element.elementor-element-cb6c58b.elementor-element{--align-self:flex-start;}.elementor-2949 .elementor-element.elementor-element-cb6c58b img{border-style:none;}.elementor-2949 .elementor-element.elementor-element-6b3ac5f{--display:flex;}.elementor-2949 .elementor-element.elementor-element-218e2f0.elementor-element{--align-self:flex-start;}.elementor-2949 .elementor-element.elementor-element-218e2f0 img{border-style:none;}/* Start custom CSS for image, class: .elementor-element-bce0111 *//* 1. THE MAIN CONTAINER */
.beautiful-card {
    position: relative;
    width: 320px;
    height: 350px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 30px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    
    /* Layered Box Shadow for realistic depth */
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 10px 15px -3px rgba(0, 0, 0, 0.03),
        inset 0 0 0 1px rgba(255, 255, 255, 0.4);

    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Initial state for Scroll Animation */
    opacity: 0;
    transform: translateY(100px) scale(0.9);
    animation: elasticReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    
    /* Scroll Trigger */
    animation-timeline: view();
    animation-range: entry 10% cover 40%;
}

/* 2. THE GRADIENT BORDER (The "Aura") */
.beautiful-card::after {
    content: "";
    position: absolute;
    inset: -2px; /* Pulls it slightly outside the card */
    z-index: -1;
    background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
    border-radius: 32px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* 3. THE GLOSSY REFLECTION */
.beautiful-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg, 
        rgba(255,255,255,0.4) 0%, 
        rgba(255,255,255,0) 50%, 
        rgba(255,255,255,0.1) 100%
    );
    border-radius: 30px;
    opacity: 0.5;
    pointer-events: none;
}

/* 4. THE LOGO / CONTENT */
.beautiful-card img {
    width: 200px;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 2;
}

/* 5. THE "WOW" HOVER EFFECTS */
.beautiful-card:hover {
    transform: translateY(-20px) scale(1.03) rotateZ(1deg);
    background: rgba(255, 255, 255, 0.9);
    
    /* Deep "Elevated" Shadow */
    box-shadow: 
        0 30px 60px -12px rgba(50, 50, 93, 0.15),
        0 18px 36px -18px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 1);
}

/* Show the gradient border on hover */
.beautiful-card:hover::after {
    opacity: 0.4;
    filter: blur(10px);
}

.beautiful-card:hover img {
    transform: scale(1.15) translateZ(50px); /* Fake 3D pop */
    filter: drop-shadow(0 20px 30px rgba(99, 102, 241, 0.3));
}

/* 6. ADVANCED REVEAL KEYFRAMES */
@keyframes elasticReveal {
    0% {
        opacity: 0;
        transform: translateY(120px) scale(0.8) rotateX(-20deg);
        filter: blur(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
        filter: blur(0);
    }
}

/* 7. TEXT STYLING (Optional additions) */
.beautiful-card h3 {
    margin-top: 25px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.5px;
    z-index: 2;
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-090c8df *//* 1. THE CONTAINER (The Card) */
.beautiful-card {
    background: #ffffff;
    padding: 30px 40px;
    border-radius: 16px; /* Smooth rounded corners */
    border: 1px solid rgba(0, 0, 0, 0.04); /* Very subtle border */
    
    /* Centering the content */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Default Shadow */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 
                0 2px 4px -1px rgba(0, 0, 0, 0.03);
    
    /* Smooth transition for the hover effect */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Set up for the scroll animation */
    opacity: 0; /* Start hidden */
    animation: fadeInUp 0.8s ease-out forwards;
    
    /* MODERN BROWSER SCROLL TRIGGER (Works in Chrome/Edge) */
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
}

/* 2. THE IMAGE (The Logo) */
.beautiful-card img {
    max-width: 100%;
    height: auto;
    display: block;
    
    /* Optional: Start slightly grayscale for a clean look */
    filter: grayscale(100%) opacity(0.7); 
    transition: all 0.4s ease;
}

/* 3. HOVER EFFECTS */
.beautiful-card:hover {
    /* Lift the card up */
    transform: translateY(-8px);
    
    /* Make shadow stronger and softer (Glow effect) */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
                0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    border-color: rgba(0, 0, 0, 0.0);
}

.beautiful-card:hover img {
    /* Bring back full color and opacity */
    filter: grayscale(0%) opacity(1);
    
    /* Slight zoom on the logo */
    transform: scale(1.05);
}

/* 4. SCROLL ANIMATION KEYFRAMES */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2b4a560 *//* 1. THE CONTAINER (The Card) */
.beautiful-card {
    background: #ffffff;
    padding: 30px 40px;
    border-radius: 16px; /* Smooth rounded corners */
    border: 1px solid rgba(0, 0, 0, 0.04); /* Very subtle border */
    
    /* Centering the content */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Default Shadow */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 
                0 2px 4px -1px rgba(0, 0, 0, 0.03);
    
    /* Smooth transition for the hover effect */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Set up for the scroll animation */
    opacity: 0; /* Start hidden */
    animation: fadeInUp 0.8s ease-out forwards;
    
    /* MODERN BROWSER SCROLL TRIGGER (Works in Chrome/Edge) */
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
}

/* 2. THE IMAGE (The Logo) */
.beautiful-card img {
    max-width: 100%;
    height: auto;
    display: block;
    
    /* Optional: Start slightly grayscale for a clean look */
    filter: grayscale(100%) opacity(0.7); 
    transition: all 0.4s ease;
}

/* 3. HOVER EFFECTS */
.beautiful-card:hover {
    /* Lift the card up */
    transform: translateY(-8px);
    
    /* Make shadow stronger and softer (Glow effect) */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
                0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    border-color: rgba(0, 0, 0, 0.0);
}

.beautiful-card:hover img {
    /* Bring back full color and opacity */
    filter: grayscale(0%) opacity(1);
    
    /* Slight zoom on the logo */
    transform: scale(1.05);
}

/* 4. SCROLL ANIMATION KEYFRAMES */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f44afa *//* 1. THE CONTAINER (The Card) */
.beautiful-card {
    background: #ffffff;
    padding: 30px 40px;
    border-radius: 16px; /* Smooth rounded corners */
    border: 1px solid rgba(0, 0, 0, 0.04); /* Very subtle border */
    
    /* Centering the content */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Default Shadow */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 
                0 2px 4px -1px rgba(0, 0, 0, 0.03);
    
    /* Smooth transition for the hover effect */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Set up for the scroll animation */
    opacity: 0; /* Start hidden */
    animation: fadeInUp 0.8s ease-out forwards;
    
    /* MODERN BROWSER SCROLL TRIGGER (Works in Chrome/Edge) */
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
}

/* 2. THE IMAGE (The Logo) */
.beautiful-card img {
    max-width: 100%;
    height: auto;
    display: block;
    
    /* Optional: Start slightly grayscale for a clean look */
    filter: grayscale(100%) opacity(0.7); 
    transition: all 0.4s ease;
}

/* 3. HOVER EFFECTS */
.beautiful-card:hover {
    /* Lift the card up */
    transform: translateY(-8px);
    
    /* Make shadow stronger and softer (Glow effect) */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
                0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    border-color: rgba(0, 0, 0, 0.0);
}

.beautiful-card:hover img {
    /* Bring back full color and opacity */
    filter: grayscale(0%) opacity(1);
    
    /* Slight zoom on the logo */
    transform: scale(1.05);
}

/* 4. SCROLL ANIMATION KEYFRAMES */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-40727a4 *//* 1. THE CONTAINER (The Card) */
.beautiful-card {
    background: #ffffff;
    padding: 30px 40px;
    border-radius: 16px; /* Smooth rounded corners */
    border: 1px solid rgba(0, 0, 0, 0.04); /* Very subtle border */
    
    /* Centering the content */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Default Shadow */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 
                0 2px 4px -1px rgba(0, 0, 0, 0.03);
    
    /* Smooth transition for the hover effect */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Set up for the scroll animation */
    opacity: 0; /* Start hidden */
    animation: fadeInUp 0.8s ease-out forwards;
    
    /* MODERN BROWSER SCROLL TRIGGER (Works in Chrome/Edge) */
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
}

/* 2. THE IMAGE (The Logo) */
.beautiful-card img {
    max-width: 100%;
    height: auto;
    display: block;
    
    /* Optional: Start slightly grayscale for a clean look */
    filter: grayscale(100%) opacity(0.7); 
    transition: all 0.4s ease;
}

/* 3. HOVER EFFECTS */
.beautiful-card:hover {
    /* Lift the card up */
    transform: translateY(-8px);
    
    /* Make shadow stronger and softer (Glow effect) */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
                0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    border-color: rgba(0, 0, 0, 0.0);
}

.beautiful-card:hover img {
    /* Bring back full color and opacity */
    filter: grayscale(0%) opacity(1);
    
    /* Slight zoom on the logo */
    transform: scale(1.05);
}

/* 4. SCROLL ANIMATION KEYFRAMES */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4c54bfc *//* 1. THE CONTAINER (The Card) */
.beautiful-card {
    background: #ffffff;
    padding: 30px 40px;
    border-radius: 16px; /* Smooth rounded corners */
    border: 1px solid rgba(0, 0, 0, 0.04); /* Very subtle border */
    
    /* Centering the content */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Default Shadow */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 
                0 2px 4px -1px rgba(0, 0, 0, 0.03);
    
    /* Smooth transition for the hover effect */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Set up for the scroll animation */
    opacity: 0; /* Start hidden */
    animation: fadeInUp 0.8s ease-out forwards;
    
    /* MODERN BROWSER SCROLL TRIGGER (Works in Chrome/Edge) */
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
}

/* 2. THE IMAGE (The Logo) */
.beautiful-card img {
    max-width: 100%;
    height: auto;
    display: block;
    
    /* Optional: Start slightly grayscale for a clean look */
    filter: grayscale(100%) opacity(0.7); 
    transition: all 0.4s ease;
}

/* 3. HOVER EFFECTS */
.beautiful-card:hover {
    /* Lift the card up */
    transform: translateY(-8px);
    
    /* Make shadow stronger and softer (Glow effect) */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
                0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    border-color: rgba(0, 0, 0, 0.0);
}

.beautiful-card:hover img {
    /* Bring back full color and opacity */
    filter: grayscale(0%) opacity(1);
    
    /* Slight zoom on the logo */
    transform: scale(1.05);
}

/* 4. SCROLL ANIMATION KEYFRAMES */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-049f735 *//* 1. THE CONTAINER (The Card) */
.beautiful-card {
    background: #ffffff;
    padding: 30px 40px;
    border-radius: 16px; /* Smooth rounded corners */
    border: 1px solid rgba(0, 0, 0, 0.04); /* Very subtle border */
    
    /* Centering the content */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Default Shadow */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 
                0 2px 4px -1px rgba(0, 0, 0, 0.03);
    
    /* Smooth transition for the hover effect */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Set up for the scroll animation */
    opacity: 0; /* Start hidden */
    animation: fadeInUp 0.8s ease-out forwards;
    
    /* MODERN BROWSER SCROLL TRIGGER (Works in Chrome/Edge) */
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
}

/* 2. THE IMAGE (The Logo) */
.beautiful-card img {
    max-width: 100%;
    height: auto;
    display: block;
    
    /* Optional: Start slightly grayscale for a clean look */
    filter: grayscale(100%) opacity(0.7); 
    transition: all 0.4s ease;
}

/* 3. HOVER EFFECTS */
.beautiful-card:hover {
    /* Lift the card up */
    transform: translateY(-8px);
    
    /* Make shadow stronger and softer (Glow effect) */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
                0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    border-color: rgba(0, 0, 0, 0.0);
}

.beautiful-card:hover img {
    /* Bring back full color and opacity */
    filter: grayscale(0%) opacity(1);
    
    /* Slight zoom on the logo */
    transform: scale(1.05);
}

/* 4. SCROLL ANIMATION KEYFRAMES */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ba38dfb *//* 1. THE CONTAINER (The Card) */
.beautiful-card {
    background: #ffffff;
    padding: 30px 40px;
    border-radius: 16px; /* Smooth rounded corners */
    border: 1px solid rgba(0, 0, 0, 0.04); /* Very subtle border */
    
    /* Centering the content */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Default Shadow */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 
                0 2px 4px -1px rgba(0, 0, 0, 0.03);
    
    /* Smooth transition for the hover effect */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Set up for the scroll animation */
    opacity: 0; /* Start hidden */
    animation: fadeInUp 0.8s ease-out forwards;
    
    /* MODERN BROWSER SCROLL TRIGGER (Works in Chrome/Edge) */
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
}

/* 2. THE IMAGE (The Logo) */
.beautiful-card img {
    max-width: 100%;
    height: auto;
    display: block;
    
    /* Optional: Start slightly grayscale for a clean look */
    filter: grayscale(100%) opacity(0.7); 
    transition: all 0.4s ease;
}

/* 3. HOVER EFFECTS */
.beautiful-card:hover {
    /* Lift the card up */
    transform: translateY(-8px);
    
    /* Make shadow stronger and softer (Glow effect) */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
                0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    border-color: rgba(0, 0, 0, 0.0);
}

.beautiful-card:hover img {
    /* Bring back full color and opacity */
    filter: grayscale(0%) opacity(1);
    
    /* Slight zoom on the logo */
    transform: scale(1.05);
}

/* 4. SCROLL ANIMATION KEYFRAMES */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1f34d9e *//* 1. THE CONTAINER (The Card) */
.beautiful-card {
    background: #ffffff;
    padding: 30px 40px;
    border-radius: 16px; /* Smooth rounded corners */
    border: 1px solid rgba(0, 0, 0, 0.04); /* Very subtle border */
    
    /* Centering the content */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Default Shadow */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 
                0 2px 4px -1px rgba(0, 0, 0, 0.03);
    
    /* Smooth transition for the hover effect */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Set up for the scroll animation */
    opacity: 0; /* Start hidden */
    animation: fadeInUp 0.8s ease-out forwards;
    
    /* MODERN BROWSER SCROLL TRIGGER (Works in Chrome/Edge) */
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
}

/* 2. THE IMAGE (The Logo) */
.beautiful-card img {
    max-width: 100%;
    height: auto;
    display: block;
    
    /* Optional: Start slightly grayscale for a clean look */
    filter: grayscale(100%) opacity(0.7); 
    transition: all 0.4s ease;
}

/* 3. HOVER EFFECTS */
.beautiful-card:hover {
    /* Lift the card up */
    transform: translateY(-8px);
    
    /* Make shadow stronger and softer (Glow effect) */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
                0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    border-color: rgba(0, 0, 0, 0.0);
}

.beautiful-card:hover img {
    /* Bring back full color and opacity */
    filter: grayscale(0%) opacity(1);
    
    /* Slight zoom on the logo */
    transform: scale(1.05);
}

/* 4. SCROLL ANIMATION KEYFRAMES */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8fa154 *//* 1. THE CONTAINER (The Card) */
.beautiful-card {
    background: #ffffff;
    padding: 30px 40px;
    border-radius: 16px; /* Smooth rounded corners */
    border: 1px solid rgba(0, 0, 0, 0.04); /* Very subtle border */
    
    /* Centering the content */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Default Shadow */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 
                0 2px 4px -1px rgba(0, 0, 0, 0.03);
    
    /* Smooth transition for the hover effect */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Set up for the scroll animation */
    opacity: 0; /* Start hidden */
    animation: fadeInUp 0.8s ease-out forwards;
    
    /* MODERN BROWSER SCROLL TRIGGER (Works in Chrome/Edge) */
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
}

/* 2. THE IMAGE (The Logo) */
.beautiful-card img {
    max-width: 100%;
    height: auto;
    display: block;
    
    /* Optional: Start slightly grayscale for a clean look */
    filter: grayscale(100%) opacity(0.7); 
    transition: all 0.4s ease;
}

/* 3. HOVER EFFECTS */
.beautiful-card:hover {
    /* Lift the card up */
    transform: translateY(-8px);
    
    /* Make shadow stronger and softer (Glow effect) */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
                0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    border-color: rgba(0, 0, 0, 0.0);
}

.beautiful-card:hover img {
    /* Bring back full color and opacity */
    filter: grayscale(0%) opacity(1);
    
    /* Slight zoom on the logo */
    transform: scale(1.05);
}

/* 4. SCROLL ANIMATION KEYFRAMES */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb6c58b *//* 1. THE CONTAINER (The Card) */
.beautiful-card {
    background: #ffffff;
    padding: 30px 40px;
    border-radius: 16px; /* Smooth rounded corners */
    border: 1px solid rgba(0, 0, 0, 0.04); /* Very subtle border */
    
    /* Centering the content */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Default Shadow */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 
                0 2px 4px -1px rgba(0, 0, 0, 0.03);
    
    /* Smooth transition for the hover effect */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Set up for the scroll animation */
    opacity: 0; /* Start hidden */
    animation: fadeInUp 0.8s ease-out forwards;
    
    /* MODERN BROWSER SCROLL TRIGGER (Works in Chrome/Edge) */
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
}

/* 2. THE IMAGE (The Logo) */
.beautiful-card img {
    max-width: 100%;
    height: auto;
    display: block;
    
    /* Optional: Start slightly grayscale for a clean look */
    filter: grayscale(100%) opacity(0.7); 
    transition: all 0.4s ease;
}

/* 3. HOVER EFFECTS */
.beautiful-card:hover {
    /* Lift the card up */
    transform: translateY(-8px);
    
    /* Make shadow stronger and softer (Glow effect) */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
                0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    border-color: rgba(0, 0, 0, 0.0);
}

.beautiful-card:hover img {
    /* Bring back full color and opacity */
    filter: grayscale(0%) opacity(1);
    
    /* Slight zoom on the logo */
    transform: scale(1.05);
}

/* 4. SCROLL ANIMATION KEYFRAMES */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-218e2f0 *//* 1. THE CONTAINER (The Card) */
.beautiful-card {
    background: #ffffff;
    padding: 30px 40px;
    border-radius: 16px; /* Smooth rounded corners */
    border: 1px solid rgba(0, 0, 0, 0.04); /* Very subtle border */
    
    /* Centering the content */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Default Shadow */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 
                0 2px 4px -1px rgba(0, 0, 0, 0.03);
    
    /* Smooth transition for the hover effect */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Set up for the scroll animation */
    opacity: 0; /* Start hidden */
    animation: fadeInUp 0.8s ease-out forwards;
    
    /* MODERN BROWSER SCROLL TRIGGER (Works in Chrome/Edge) */
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
}

/* 2. THE IMAGE (The Logo) */
.beautiful-card img {
    max-width: 100%;
    height: auto;
    display: block;
    
    /* Optional: Start slightly grayscale for a clean look */
    filter: grayscale(100%) opacity(0.7); 
    transition: all 0.4s ease;
}

/* 3. HOVER EFFECTS */
.beautiful-card:hover {
    /* Lift the card up */
    transform: translateY(-8px);
    
    /* Make shadow stronger and softer (Glow effect) */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
                0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    border-color: rgba(0, 0, 0, 0.0);
}

.beautiful-card:hover img {
    /* Bring back full color and opacity */
    filter: grayscale(0%) opacity(1);
    
    /* Slight zoom on the logo */
    transform: scale(1.05);
}

/* 4. SCROLL ANIMATION KEYFRAMES */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}/* End custom CSS */