/* Body Font */

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Outfit", sans-serif;
}

:root {
    --primary-color: #1e336a;
    --secondary-color: #E9F2FF;
    --orange: #F89C45;
}

.tilt-btn {
    display: inline-block;
    transform-style: preserve-3d;
    animation: tiltLoop 3s infinite ease-in-out;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


/* Loop Animation */

@keyframes tiltLoop {
    0% {
        transform: perspective(800px) rotateX(0deg) rotateY(0deg);
    }
    25% {
        transform: perspective(800px) rotateX(5deg) rotateY(-5deg);
    }
    50% {
        transform: perspective(800px) rotateX(0deg) rotateY(0deg);
    }
    75% {
        transform: perspective(800px) rotateX(-5deg) rotateY(5deg);
    }
    100% {
        transform: perspective(800px) rotateX(0deg) rotateY(0deg);
    }
}


/* Hover → pause loop + stronger tilt */

.tilt-btn:hover {
    animation: none;
    transform: perspective(800px) rotateX(6deg) rotateY(-6deg) scale(1.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}


/* Click press */

.tilt-btn:active {
    transform: perspective(800px) scale(0.97);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}


/* Headings Font */

h1,
h2,
h3,
h4,
h5,
h6 {
    /* font-family: "Fjalla One", sans-serif; */
    font-family: "Google Sans Flex", sans-serif;
    /* font-family: "Poppins", sans-serif; */
}

.pulse-btn {
    position: relative;
    animation: pulseGlow 1s infinite;
}


/* Pulse Animation */

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(227, 166, 138, 0.7);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(227, 166, 138, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(227, 166, 138, 0);
    }
}

.outline-text {
    text-shadow: 1px 1px 4px rgba(60, 60, 60, 0.531);
    font-family: "Playfair Display", serif;
}