/* Base Styling */
html {
    scroll-behavior: smooth;
}
body {
    font-family: "Inter", sans-serif;
    color: #333;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Montserrat", sans-serif;
}

/* Diagonal Strip Section - Brand Guideline */
.diagonal-strip {
    clip-path: polygon(0 4vw, 100% 0, 100% calc(100% - 4vw), 0 100%);
    padding: 8vw 0;
    margin-top: -4vw;
    position: relative;
    z-index: 10;
}

/* Bubble Effect CSS */
.bubble-btn {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}
.bubble-btn:active {
    transform: scale(0.98);
}
.water-bubble {
    position: absolute;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4) 60%, rgba(255, 255, 255, 0) 100%);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    animation: bubble-float 0.8s ease-out forwards;
    box-shadow:
        inset -2px -2px 6px rgba(0, 0, 0, 0.1),
        inset 2px 2px 6px rgba(255, 255, 255, 0.8);
}
@keyframes bubble-float {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, calc(-50% - 40px)) scale(1.5);
        opacity: 0;
    }
}

/* Gradient Text */
.text-gradient {
    background: linear-gradient(90deg, #2299f2, #f4217e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}