/* ==========================================================================
   Power of Us - Styles
   ========================================================================== */

/* Base Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #F5F0E8;
    overflow-x: hidden;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero-gradient {
    background:
        radial-gradient(ellipse at 20% 20%, rgba(155, 141, 199, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(255, 107, 74, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(125, 155, 118, 0.15) 0%, transparent 70%);
}

/* ==========================================================================
   Components
   ========================================================================== */

/* Card Hover Effect */
.card-hover {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-hover:hover {
    transform: translateY(-8px) rotate(1deg);
}

/* Text Stroke Effect */
.text-stroke {
    -webkit-text-stroke: 2px #1A1A1A;
    -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   Animations
   ========================================================================== */

/* Marquee Animation */
.marquee {
    animation: marquee 20s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Blob Morphing Animation */
.blob {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: blob-morph 8s ease-in-out infinite;
}

@keyframes blob-morph {

    0%,
    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
}

/* ==========================================================================
   FAQ Accordion
   ========================================================================== */

/* Remove default marker */
.faq-item summary {
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

/* ==========================================================================
   Decorative Shapes Animation
   ========================================================================== */

.shape-float {
    animation: shapeFloat 8s ease-in-out infinite;
}

.shape-float-reverse {
    animation: shapeFloatReverse 10s ease-in-out infinite;
}

@keyframes shapeFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

@keyframes shapeFloatReverse {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(20px) rotate(-5deg);
    }
}