/* Animated Background Shapes */
.bg-shapes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.shape {
    position: absolute;
    opacity: 0.1;
    animation: float 20s infinite ease-in-out;
}

.shape1 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #4169e1, #ff6b3d);
    border-radius: 50%;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.shape2 {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #ff8b5c, #4169e1);
    border-radius: 50%;
    top: 60%;
    right: 10%;
    animation-delay: 5s;
}

.shape3 {
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, #2849c5, #ff6b3d);
    border-radius: 50%;
    bottom: 10%;
    left: 10%;
    animation-delay: 7s;
}
.shape4 {
    width: 50px;
    height: 150px;
    background: linear-gradient(135deg, #ff8b5c, #4169e1);
    border-radius: 50%;
    bottom: 20%;
    left: 40%;
    animation-delay: 10s;
}
.shape5 {
    width: 100px;
    height: 150px;
    background: linear-gradient(135deg, #2849c5, #ff6b3d);
    border-radius: 50%;
    bottom: 21%;
    left: 26%;
    animation-delay: 5s;
}

@keyframes float {
    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(50px, -50px) rotate(90deg);
    }

    50% {
        transform: translate(0, -100px) rotate(180deg);
    }

    75% {
        transform: translate(-50px, -50px) rotate(270deg);
    }
}
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;

    border-radius: 12px;
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); */
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    cursor: pointer;

    /* Initial animation state */
    animation: rotateSlideIn 0.8s ease-out both;
    animation-delay: var(--delay);
}

/* Rotate and slide in animation on page load */
@keyframes rotateSlideIn {
    0% {
        opacity: 0;
        transform: translateY(50px) rotateY(-90deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateY(0deg);
    }
}

/* Hover effect - rotate and lift */
.contact-item:hover {
    transform: translateY(-10px) rotateY(5deg) rotateX(5deg);
    /* box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); */
}

/* Icon rotation on hover */
.contact-item:hover .icon-div {
    transform: rotate(360deg) scale(1.1);
}

.icon-div {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eaa166 0%, #060c4442 100%);
    border-radius: 50%;
    transition: transform 0.6s ease;
}

.icon-div img {
    filter: brightness(0) invert(1); /* Make icons white */
}

/* Text styling */
.email-div,
.contact-us,
.address-div {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}



/* Alternative: Continuous rotation animation */
.icon-div.rotating {
    animation: continuousRotate 3s ease-in-out infinite;
}

@keyframes continuousRotate {
    0%,
    100% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(10deg);
    }
}

/* Pulse effect on icon */
@keyframes iconPulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.icon-div:hover {
    animation: iconPulse 1s ease-in-out infinite;
}

/* Responsive */
@media (max-width: 768px) {
    .contact-item {
        flex-direction: column;
        text-align: center;
    }
}

.icon-div {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    /* background: #fff; */
    border-radius: 12px;
    border: 3px dashed transparent;
    background-clip: padding-box;
    transition: all 0.5s ease;
    cursor: pointer;
}

.icon-div::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(
        90deg,
        #667eea 0%,
        #764ba2 25%,
        #f093fb 50%,
        #4facfe 75%,
        #667eea 100%
    );
    border-radius: 12px;
    z-index: -1;
    background-size: 200% 200%;
    animation: moveBorder 3s linear infinite;
}

@keyframes moveBorder {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 200% 0%;
    }
}

.icon-div::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: #fff; */
    border-radius: 9px;
    z-index: -1;
}