/* Premium Gallery Grid Alignment */
.gallery.gallery-columns-2, .gallery.gallery-columns-3, .gallery.gallery-columns-4 {
    display: grid !important;
    gap: 20px !important;
    align-items: stretch !important;
}
.gallery.gallery-columns-2 { grid-template-columns: repeat(2, 1fr) !important; }
.gallery.gallery-columns-3 { grid-template-columns: repeat(3, 1fr) !important; }
.gallery.gallery-columns-4 { grid-template-columns: repeat(4, 1fr) !important; }

@media (max-width: 768px) {
    .gallery.gallery-columns-2, .gallery.gallery-columns-3, .gallery.gallery-columns-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 480px) {
    .gallery.gallery-columns-2, .gallery.gallery-columns-3, .gallery.gallery-columns-4 {
        grid-template-columns: 1fr !important;
    }
}

.gallery-item {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    background: #f0f4f8 !important; /* Fills empty space with a clean color */
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}

.gallery-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

.gallery-icon a {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
}

.gallery-icon img {
    width: 100% !important;
    height: 250px !important;
    object-fit: contain !important; /* NO CUTTING! */
    transition: transform 0.4s ease, box-shadow 0.4s ease !important;
    display: block !important;
    background: #ffffff !important; /* Fill behind the image */
    padding: 10px !important; /* Creates a nice polaroid/frame effect */
}
.gallery-icon img:hover {
    transform: scale(1.05) !important;
}

/* Premium Button & Hover Pop Effects */
a, .elementor-button, .elementor-image-box-wrapper, .elementor-icon-box-wrapper {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.elementor-image-box-wrapper:hover, .elementor-icon-box-wrapper:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 14px 28px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.08) !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, #ffffff, #f9fafc) !important;
}

/* Parallax Background Class */
.parallax-bg {
    background-attachment: fixed !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}


/* Team Cards Premium Motion Hover Effect */
.elementor-inner-column:has(.elementor-widget-image + .elementor-widget-image-box) > .elementor-widget-wrap {
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(149, 157, 165, 0.1) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; 
    background: #ffffff !important;
}

.elementor-inner-column:has(.elementor-widget-image + .elementor-widget-image-box):hover > .elementor-widget-wrap {
    transform: translateY(-12px) !important;
    box-shadow: 0 20px 40px rgba(149, 157, 165, 0.2) !important;
}

.elementor-inner-column:has(.elementor-widget-image + .elementor-widget-image-box) .elementor-widget-image img {
    border-radius: 16px 16px 0 0 !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    transition: transform 0.6s ease !important;
}

.elementor-inner-column:has(.elementor-widget-image + .elementor-widget-image-box):hover .elementor-widget-image img {
    transform: scale(1.08) !important;
}

.elementor-inner-column:has(.elementor-widget-image + .elementor-widget-image-box) .elementor-image-box-title {
    transition: color 0.3s ease !important;
}

.elementor-inner-column:has(.elementor-widget-image + .elementor-widget-image-box):hover .elementor-image-box-title {
    color: #e74c3c !important;
}

/* Ensure image box wrapper inside team cards doesn't double-animate from previous rules */
.elementor-inner-column:has(.elementor-widget-image + .elementor-widget-image-box) .elementor-image-box-wrapper:hover {
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
}





/* Animated Floating Background Elements */
.floating-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1200px;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.float-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.7;
}

.float-shape.ring {
    background: transparent;
    border: 30px solid rgba(152, 235, 152, 0.4);
}

.float-shape.blob1 { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); }
.float-shape.blob2 { background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); }
.float-shape.blob3 { background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); }

@keyframes floatAnim {
    0% { transform: translateY(0) rotate(0deg) scale(1); }
    50% { transform: translateY(-30px) rotate(180deg) scale(1.05); }
    100% { transform: translateY(0) rotate(360deg) scale(1); }
}

@keyframes floatAnimReverse {
    0% { transform: translateY(0) rotate(360deg) scale(1); }
    50% { transform: translateY(40px) rotate(180deg) scale(0.95); }
    100% { transform: translateY(0) rotate(0deg) scale(1); }
}



/* Rainbow Floating Stars */
.float-shape.star {
    border-radius: 0;
    border: none;
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
    background-size: 1800% 1800%;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: floatAnim 8s infinite ease-in-out alternate, rainbowCycle 8s infinite linear;
    filter: blur(1px);
    opacity: 0.65;
}

@keyframes rainbowCycle {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}