/* Parallax Section Styles - Interactive background effects and animations - Mobile First */
.parallax-section {
    /* Positioning & Display */
    position: relative;
    overflow: hidden;
    will-change: transform;

    & .parallax-bg {
        /* Positioning & Display */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        pointer-events: none;
        /* Prevent interaction with parallax elements */

        & .parallax-element {
            /* Positioning & Display */
            position: absolute;
            z-index: 0;

            /* Box Model */
            border-radius: 50%;

            /* Colors & Backgrounds */
            background: linear-gradient(135deg, var(--background-color) 0%, var(--accent-color) 30%, var(--special-color) 100%);
            opacity: 0;

            /* Effects & Transitions */
            transition: transform 0.2s ease;
            will-change: transform;

            /* Initial Animation State */
            transform: scale(0.7);

            &.element-1 {
                /* Positioning & Display */
                top: 20%;
                left: -5%;

                /* Box Model */
                width: 250px;
                height: 250px;

                /* Colors & Backgrounds */
                opacity: 0;

                /* Effects & Transitions */
                animation: fadeInScale1 0.7s ease-out forwards, float1 20s ease-in-out infinite 0.7s;
            }

            &.element-2 {
                /* Positioning & Display */
                bottom: 15%;
                right: 10%;

                /* Box Model */
                width: 150px;
                height: 150px;

                /* Colors & Backgrounds */
                opacity: 0;

                /* Effects & Transitions */
                animation: fadeInScale2 0.8s ease-out forwards 0.1s, float2 25s ease-in-out infinite 0.8s;
            }

            &.element-3 {
                /* Positioning & Display */
                top: 26%;
                right: 10%;

                /* Box Model */
                width: 100px;
                height: 100px;

                /* Colors & Backgrounds */
                opacity: 0;

                /* Effects & Transitions */
                animation: fadeInScale3 0.75s ease-out forwards 0.2s, float3 18s ease-in-out infinite 0.75s;
            }

            &.element-4 {
                /* Positioning & Display */
                bottom: 10%;
                left: 30%;

                /* Box Model */
                width: 170px;
                height: 170px;

                /* Colors & Backgrounds */
                opacity: 0;

                /* Effects & Transitions */
                animation: fadeInScale4 0.85s ease-out forwards 0.3s, float4 22s ease-in-out infinite 0.85s;
            }
        }

        & .rising-bubbles-container {
            /* Positioning & Display */
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 0;
            pointer-events: none;

            & .bubble {
                /* Positioning & Display */
                position: absolute;
                bottom: -20px;
                z-index: 0;

                /* Box Model */
                border-radius: 50%;

                /* Colors & Backgrounds */
                background-color: var(--special-color);
                opacity: 0;
                /* Start invisible */

                /* Effects & Transitions */
                transform: scale(0);

                &.bubble-1 {
                    /* Box Model */
                    width: 20px;
                    height: 20px;

                    /* Positioning & Display */
                    left: 10%;

                    /* Effects & Transitions */
                    animation: bubbleEntrance1 0.4s ease-out forwards 0.1s, rise1 15s linear infinite 0.5s;
                }

                &.bubble-2 {
                    /* Box Model */
                    width: 30px;
                    height: 30px;

                    /* Positioning & Display */
                    left: 20%;

                    /* Effects & Transitions */
                    animation: bubbleEntrance2 0.4s ease-out forwards 0.15s, rise2 18s linear infinite 0.55s;
                }

                &.bubble-3 {
                    /* Box Model */
                    width: 18px;
                    height: 18px;

                    /* Positioning & Display */
                    left: 35%;

                    /* Effects & Transitions */
                    animation: bubbleEntrance3 0.4s ease-out forwards 0.2s, rise3 12s linear infinite 0.6s;
                }

                &.bubble-4 {
                    /* Box Model */
                    width: 25px;
                    height: 25px;

                    /* Positioning & Display */
                    left: 50%;

                    /* Effects & Transitions */
                    animation: bubbleEntrance4 0.4s ease-out forwards 0.25s, rise4 20s linear infinite 0.65s;
                }

                &.bubble-5 {
                    /* Box Model */
                    width: 19px;
                    height: 19px;

                    /* Positioning & Display */
                    left: 65%;

                    /* Effects & Transitions */
                    animation: bubbleEntrance5 0.4s ease-out forwards 0.1s, rise5 14s linear infinite 0.5s;
                }

                &.bubble-6 {
                    /* Box Model */
                    width: 32px;
                    height: 32px;

                    /* Positioning & Display */
                    left: 75%;

                    /* Effects & Transitions */
                    animation: bubbleEntrance6 0.4s ease-out forwards 0.2s, rise6 25s linear infinite 0.6s;
                }

                &.bubble-7 {
                    /* Box Model */
                    width: 16px;
                    height: 16px;

                    /* Positioning & Display */
                    left: 85%;

                    /* Effects & Transitions */
                    animation: bubbleEntrance7 0.4s ease-out forwards 0.3s, rise7 13s linear infinite 0.7s;
                }

                &.bubble-8 {
                    /* Box Model */
                    width: 28px;
                    height: 28px;

                    /* Positioning & Display */
                    left: 25%;

                    /* Effects & Transitions */
                    animation: bubbleEntrance8 0.4s ease-out forwards 0.35s, rise8 17s linear infinite 0.75s;
                }

                &.bubble-9 {
                    /* Box Model */
                    width: 22px;
                    height: 22px;

                    /* Positioning & Display */
                    left: 60%;

                    /* Effects & Transitions */
                    animation: bubbleEntrance9 0.4s ease-out forwards 0.25s, rise9 16s linear infinite 0.65s;
                }

                &.bubble-10 {
                    /* Box Model */
                    width: 24px;
                    height: 24px;

                    /* Positioning & Display */
                    left: 45%;

                    /* Effects & Transitions */
                    animation: bubbleEntrance10 0.4s ease-out forwards 0.15s, rise10 19s linear infinite 0.55s;
                }
            }
        }
    }
}

/* Animation keyframes */
@keyframes rise {
    0% {
        /* Positioning & Display */
        bottom: -20px;
        transform: translateX(0);

        /* Colors & Backgrounds */
        opacity: 0.02;
    }

    20% {
        /* Positioning & Display */
        transform: translateX(-15px);

        /* Colors & Backgrounds */
        opacity: 0.04;
    }

    40% {
        /* Positioning & Display */
        transform: translateX(-10px);

        /* Colors & Backgrounds */
        opacity: 0.04;
    }

    45% {
        /* Colors & Backgrounds */
        opacity: 0.03;
    }

    50% {
        /* Positioning & Display */
        bottom: 50%;
        transform: translateX(10px);

        /* Colors & Backgrounds */
        opacity: 0.03;
    }

    65% {
        /* Positioning & Display */
        transform: translateX(-5px);

        /* Colors & Backgrounds */
        opacity: 0.01;
    }

    80% {
        /* Colors & Backgrounds */
        opacity: 0.005;
    }

    100% {
        /* Positioning & Display */
        bottom: 120%;
        transform: translateX(0);

        /* Colors & Backgrounds */
        opacity: 0;
    }
}

/* Animation keyframes for floating elements */
@keyframes float1 {
    0% {
        /* Positioning & Display */
        transform: translateY(0) rotate(0);
    }

    25% {
        /* Positioning & Display */
        transform: translateY(-15px) rotate(0.5deg);
    }

    50% {
        /* Positioning & Display */
        transform: translateY(-20px) rotate(1deg);
    }

    75% {
        /* Positioning & Display */
        transform: translateY(-10px) rotate(0.5deg);
    }

    100% {
        /* Positioning & Display */
        transform: translateY(0) rotate(0);
    }
}

@keyframes float2 {
    0% {
        /* Positioning & Display */
        transform: translateY(0) rotate(0);
    }

    25% {
        /* Positioning & Display */
        transform: translateY(10px) rotate(-0.5deg);
    }

    50% {
        /* Positioning & Display */
        transform: translateY(15px) rotate(-1deg);
    }

    75% {
        /* Positioning & Display */
        transform: translateY(5px) rotate(-0.5deg);
    }

    100% {
        /* Positioning & Display */
        transform: translateY(0) rotate(0);
    }
}

@keyframes float3 {
    0% {
        /* Positioning & Display */
        transform: translateY(0) rotate(0);
    }

    25% {
        /* Positioning & Display */
        transform: translateY(-8px) rotate(0.75deg);
    }

    50% {
        /* Positioning & Display */
        transform: translateY(-12px) rotate(1.5deg);
    }

    75% {
        /* Positioning & Display */
        transform: translateY(-6px) rotate(0.75deg);
    }

    100% {
        /* Positioning & Display */
        transform: translateY(0) rotate(0);
    }
}

@keyframes float4 {
    0% {
        /* Positioning & Display */
        transform: translateY(0) rotate(0);
    }

    25% {
        /* Positioning & Display */
        transform: translateY(5px) rotate(-0.75deg);
    }

    50% {
        /* Positioning & Display */
        transform: translateY(10px) rotate(-1.5deg);
    }

    75% {
        /* Positioning & Display */
        transform: translateY(3px) rotate(-0.75deg);
    }

    100% {
        /* Positioning & Display */
        transform: translateY(0) rotate(0);
    }
}

/* New animation for entrance effect */
@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.7) translateY(20px);
    }

    60% {
        opacity: 0.07;
        transform: scale(1.05) translateY(-3px);
    }

    100% {
        opacity: 0.1;
        /* Final opacity for element-1 */
        transform: scale(1) translateY(0);
    }
}

/* Bubble entrance animation */
@keyframes bubbleEntrance {
    0% {
        opacity: 0;
        transform: scale(0) translateY(5px);
    }

    50% {
        opacity: 0.04;
        transform: scale(1.2);
    }

    100% {
        opacity: 0.03;
        transform: scale(1);
    }
}

/* New animations with unique opacities for large elements */
@keyframes fadeInScale1 {
    0% {
        opacity: 0;
        transform: scale(0.7) translateY(20px);
    }

    60% {
        opacity: 0.09;
        transform: scale(1.05) translateY(-3px);
    }

    100% {
        opacity: 0.12;
        /* Slightly more visible */
        transform: scale(1) translateY(0);
    }
}

@keyframes fadeInScale2 {
    0% {
        opacity: 0;
        transform: scale(0.7) translateY(20px);
    }

    60% {
        opacity: 0.06;
        transform: scale(1.05) translateY(-3px);
    }

    100% {
        opacity: 0.08;
        /* Less visible */
        transform: scale(1) translateY(0);
    }
}

@keyframes fadeInScale3 {
    0% {
        opacity: 0;
        transform: scale(0.7) translateY(20px);
    }

    60% {
        opacity: 0.10;
        transform: scale(1.05) translateY(-3px);
    }

    100% {
        opacity: 0.14;
        /* Most visible */
        transform: scale(1) translateY(0);
    }
}

@keyframes fadeInScale4 {
    0% {
        opacity: 0;
        transform: scale(0.7) translateY(20px);
    }

    60% {
        opacity: 0.08;
        transform: scale(1.05) translateY(-3px);
    }

    100% {
        opacity: 0.10;
        /* Medium visibility */
        transform: scale(1) translateY(0);
    }
}

/* Unique bubble entrance animations with varying opacities */
@keyframes bubbleEntrance1 {
    0% {
        opacity: 0;
        transform: scale(0) translateY(5px);
    }

    50% {
        opacity: 0.045;
        transform: scale(1.2);
    }

    100% {
        opacity: 0.035;
        transform: scale(1);
    }
}

@keyframes bubbleEntrance2 {
    0% {
        opacity: 0;
        transform: scale(0) translateY(5px);
    }

    50% {
        opacity: 0.06;
        transform: scale(1.2);
    }

    100% {
        opacity: 0.05;
        transform: scale(1);
    }
}

@keyframes bubbleEntrance3 {
    0% {
        opacity: 0;
        transform: scale(0) translateY(5px);
    }

    50% {
        opacity: 0.025;
        transform: scale(1.2);
    }

    100% {
        opacity: 0.02;
        transform: scale(1);
    }
}

@keyframes bubbleEntrance4 {
    0% {
        opacity: 0;
        transform: scale(0) translateY(5px);
    }

    50% {
        opacity: 0.055;
        transform: scale(1.2);
    }

    100% {
        opacity: 0.045;
        transform: scale(1);
    }
}

@keyframes bubbleEntrance5 {
    0% {
        opacity: 0;
        transform: scale(0) translateY(5px);
    }

    50% {
        opacity: 0.03;
        transform: scale(1.2);
    }

    100% {
        opacity: 0.025;
        transform: scale(1);
    }
}

@keyframes bubbleEntrance6 {
    0% {
        opacity: 0;
        transform: scale(0) translateY(5px);
    }

    50% {
        opacity: 0.07;
        transform: scale(1.2);
    }

    100% {
        opacity: 0.06;
        transform: scale(1);
    }
}

@keyframes bubbleEntrance7 {
    0% {
        opacity: 0;
        transform: scale(0) translateY(5px);
    }

    50% {
        opacity: 0.035;
        transform: scale(1.2);
    }

    100% {
        opacity: 0.03;
        transform: scale(1);
    }
}

@keyframes bubbleEntrance8 {
    0% {
        opacity: 0;
        transform: scale(0) translateY(5px);
    }

    50% {
        opacity: 0.05;
        transform: scale(1.2);
    }

    100% {
        opacity: 0.04;
        transform: scale(1);
    }
}

@keyframes bubbleEntrance9 {
    0% {
        opacity: 0;
        transform: scale(0) translateY(5px);
    }

    50% {
        opacity: 0.04;
        transform: scale(1.2);
    }

    100% {
        opacity: 0.035;
        transform: scale(1);
    }
}

@keyframes bubbleEntrance10 {
    0% {
        opacity: 0;
        transform: scale(0) translateY(5px);
    }

    50% {
        opacity: 0.05;
        transform: scale(1.2);
    }

    100% {
        opacity: 0.04;
        transform: scale(1);
    }
}

/* Unique rise animations with varying opacity patterns */
@keyframes rise1 {
    0% {
        bottom: -20px;
        transform: translateX(0);
        opacity: 0.025;
    }

    20% {
        transform: translateX(-15px);
        opacity: 0.035;
    }

    40% {
        transform: translateX(-10px);
        opacity: 0.035;
    }

    50% {
        bottom: 50%;
        transform: translateX(10px);
        opacity: 0.025;
    }

    65% {
        transform: translateX(-5px);
        opacity: 0.015;
    }

    80% {
        opacity: 0.01;
    }

    100% {
        bottom: 120%;
        transform: translateX(0);
        opacity: 0;
    }
}

@keyframes rise2 {
    0% {
        bottom: -20px;
        transform: translateX(0);
        opacity: 0.04;
    }

    20% {
        transform: translateX(-15px);
        opacity: 0.05;
    }

    40% {
        transform: translateX(-10px);
        opacity: 0.05;
    }

    50% {
        bottom: 50%;
        transform: translateX(10px);
        opacity: 0.04;
    }

    65% {
        transform: translateX(-5px);
        opacity: 0.02;
    }

    80% {
        opacity: 0.01;
    }

    100% {
        bottom: 120%;
        transform: translateX(0);
        opacity: 0;
    }
}

@keyframes rise3 {
    0% {
        bottom: -20px;
        transform: translateX(0);
        opacity: 0.015;
    }

    20% {
        transform: translateX(-15px);
        opacity: 0.02;
    }

    40% {
        transform: translateX(-10px);
        opacity: 0.02;
    }

    50% {
        bottom: 50%;
        transform: translateX(10px);
        opacity: 0.015;
    }

    65% {
        transform: translateX(-5px);
        opacity: 0.01;
    }

    80% {
        opacity: 0.005;
    }

    100% {
        bottom: 120%;
        transform: translateX(0);
        opacity: 0;
    }
}

@keyframes rise4 {
    0% {
        bottom: -20px;
        transform: translateX(0);
        opacity: 0.035;
    }

    20% {
        transform: translateX(-15px);
        opacity: 0.045;
    }

    40% {
        transform: translateX(-10px);
        opacity: 0.045;
    }

    50% {
        bottom: 50%;
        transform: translateX(10px);
        opacity: 0.035;
    }

    65% {
        transform: translateX(-5px);
        opacity: 0.02;
    }

    80% {
        opacity: 0.01;
    }

    100% {
        bottom: 120%;
        transform: translateX(0);
        opacity: 0;
    }
}

@keyframes rise5 {
    0% {
        bottom: -20px;
        transform: translateX(0);
        opacity: 0.02;
    }

    20% {
        transform: translateX(-15px);
        opacity: 0.025;
    }

    40% {
        transform: translateX(-10px);
        opacity: 0.025;
    }

    50% {
        bottom: 50%;
        transform: translateX(10px);
        opacity: 0.02;
    }

    65% {
        transform: translateX(-5px);
        opacity: 0.01;
    }

    80% {
        opacity: 0.005;
    }

    100% {
        bottom: 120%;
        transform: translateX(0);
        opacity: 0;
    }
}

@keyframes rise6 {
    0% {
        bottom: -20px;
        transform: translateX(0);
        opacity: 0.05;
    }

    20% {
        transform: translateX(-15px);
        opacity: 0.06;
    }

    40% {
        transform: translateX(-10px);
        opacity: 0.06;
    }

    50% {
        bottom: 50%;
        transform: translateX(10px);
        opacity: 0.05;
    }

    65% {
        transform: translateX(-5px);
        opacity: 0.025;
    }

    80% {
        opacity: 0.01;
    }

    100% {
        bottom: 120%;
        transform: translateX(0);
        opacity: 0;
    }
}

@keyframes rise7 {
    0% {
        bottom: -20px;
        transform: translateX(0);
        opacity: 0.025;
    }

    20% {
        transform: translateX(-15px);
        opacity: 0.03;
    }

    40% {
        transform: translateX(-10px);
        opacity: 0.03;
    }

    50% {
        bottom: 50%;
        transform: translateX(10px);
        opacity: 0.025;
    }

    65% {
        transform: translateX(-5px);
        opacity: 0.015;
    }

    80% {
        opacity: 0.005;
    }

    100% {
        bottom: 120%;
        transform: translateX(0);
        opacity: 0;
    }
}

@keyframes rise8 {
    0% {
        bottom: -20px;
        transform: translateX(0);
        opacity: 0.03;
    }

    20% {
        transform: translateX(-15px);
        opacity: 0.04;
    }

    40% {
        transform: translateX(-10px);
        opacity: 0.04;
    }

    50% {
        bottom: 50%;
        transform: translateX(10px);
        opacity: 0.03;
    }

    65% {
        transform: translateX(-5px);
        opacity: 0.015;
    }

    80% {
        opacity: 0.01;
    }

    100% {
        bottom: 120%;
        transform: translateX(0);
        opacity: 0;
    }
}

@keyframes rise9 {
    0% {
        bottom: -20px;
        transform: translateX(0);
        opacity: 0.028;
    }

    20% {
        transform: translateX(-15px);
        opacity: 0.035;
    }

    40% {
        transform: translateX(-10px);
        opacity: 0.035;
    }

    50% {
        bottom: 50%;
        transform: translateX(10px);
        opacity: 0.028;
    }

    65% {
        transform: translateX(-5px);
        opacity: 0.015;
    }

    80% {
        opacity: 0.008;
    }

    100% {
        bottom: 120%;
        transform: translateX(0);
        opacity: 0;
    }
}

@keyframes rise10 {
    0% {
        bottom: -20px;
        transform: translateX(0);
        opacity: 0.032;
    }

    20% {
        transform: translateX(-15px);
        opacity: 0.042;
    }

    40% {
        transform: translateX(-10px);
        opacity: 0.042;
    }

    50% {
        bottom: 50%;
        transform: translateX(10px);
        opacity: 0.032;
    }

    65% {
        transform: translateX(-5px);
        opacity: 0.018;
    }

    80% {
        opacity: 0.009;
    }

    100% {
        bottom: 120%;
        transform: translateX(0);
        opacity: 0;
    }
}

/* Tablet styles */
@media (min-width: 768px) {
    .parallax-section {
        & .parallax-bg {

            /* Large parallax elements - bigger for tablets */
            & .parallax-element {
                &.element-1 {
                    width: 350px;
                    height: 350px;
                }

                &.element-2 {
                    width: 200px;
                    height: 200px;
                }

                &.element-3 {
                    width: 150px;
                    height: 150px;
                }

                &.element-4 {
                    width: 250px;
                    height: 250px;
                }
            }

            /* Bigger rising bubbles for tablets */
            & .rising-bubbles-container {
                & .bubble {
                    &.bubble-1 {
                        width: 26px;
                        height: 26px;
                    }

                    &.bubble-2 {
                        width: 38px;
                        height: 38px;
                    }

                    &.bubble-3 {
                        width: 22px;
                        height: 22px;
                    }

                    &.bubble-4 {
                        width: 32px;
                        height: 32px;
                    }

                    &.bubble-5 {
                        width: 24px;
                        height: 24px;
                    }

                    &.bubble-6 {
                        width: 46px;
                        height: 46px;
                    }

                    &.bubble-7 {
                        width: 20px;
                        height: 20px;
                    }

                    &.bubble-8 {
                        width: 36px;
                        height: 36px;
                    }

                    &.bubble-9 {
                        width: 28px;
                        height: 28px;
                    }

                    &.bubble-10 {
                        width: 34px;
                        height: 34px;
                    }
                }
            }
        }
    }
}

/* Desktop styles */
@media (min-width: 992px) {
    .parallax-section {
        & .parallax-bg {

            /* Large parallax elements - even bigger for desktops */
            & .parallax-element {
                &.element-1 {
                    width: 420px;
                    height: 420px;
                }

                &.element-2 {
                    width: 240px;
                    height: 240px;
                }

                &.element-3 {
                    width: 180px;
                    height: 180px;
                }

                &.element-4 {
                    width: 300px;
                    height: 300px;
                }
            }
        }
    }
}

/* Large desktop styles */
@media (min-width: 1200px) {
    .parallax-section {
        & .parallax-bg {

            /* Large parallax elements - even bigger for large desktops */
            & .parallax-element {
                &.element-1 {
                    width: 500px;
                    height: 500px;
                }

                &.element-2 {
                    width: 280px;
                    height: 280px;
                }

                &.element-3 {
                    width: 210px;
                    height: 210px;
                }

                &.element-4 {
                    width: 350px;
                    height: 350px;
                }
            }

            /* Bigger rising bubbles for desktops */
            & .rising-bubbles-container {
                & .bubble {
                    &.bubble-1 {
                        width: 38px;
                        height: 38px;
                    }

                    &.bubble-2 {
                        width: 54px;
                        height: 54px;
                    }

                    &.bubble-3 {
                        width: 32px;
                        height: 32px;
                    }

                    &.bubble-4 {
                        width: 46px;
                        height: 46px;
                    }

                    &.bubble-5 {
                        width: 34px;
                        height: 34px;
                    }

                    &.bubble-6 {
                        width: 64px;
                        height: 64px;
                    }

                    &.bubble-7 {
                        width: 28px;
                        height: 28px;
                    }

                    &.bubble-8 {
                        width: 48px;
                        height: 48px;
                    }

                    &.bubble-9 {
                        width: 38px;
                        height: 38px;
                    }

                    &.bubble-10 {
                        width: 46px;
                        height: 46px;
                    }
                }
            }
        }
    }
}

/* Extra large screens */
@media (min-width: 1600px) {
    .parallax-section {
        & .parallax-bg {

            /* Large parallax elements - maximum size for extra large screens */
            & .parallax-element {
                &.element-1 {
                    width: 600px;
                    height: 600px;
                }

                &.element-2 {
                    width: 320px;
                    height: 320px;
                }

                &.element-3 {
                    width: 250px;
                    height: 250px;
                }

                &.element-4 {
                    width: 400px;
                    height: 400px;
                }
            }

            /* Even bigger rising bubbles for extra large screens */
            & .rising-bubbles-container {
                & .bubble {
                    &.bubble-1 {
                        width: 46px;
                        height: 46px;
                    }

                    &.bubble-2 {
                        width: 64px;
                        height: 64px;
                    }

                    &.bubble-3 {
                        width: 38px;
                        height: 38px;
                    }

                    &.bubble-4 {
                        width: 54px;
                        height: 54px;
                    }

                    &.bubble-5 {
                        width: 40px;
                        height: 40px;
                    }

                    &.bubble-6 {
                        width: 76px;
                        height: 76px;
                    }

                    &.bubble-7 {
                        width: 34px;
                        height: 34px;
                    }

                    &.bubble-8 {
                        width: 56px;
                        height: 56px;
                    }

                    &.bubble-9 {
                        width: 46px;
                        height: 46px;
                    }

                    &.bubble-10 {
                        width: 54px;
                        height: 54px;
                    }
                }
            }
        }
    }
}