/* ===========================================
   COURSE DETAIL PAGE STYLES
   =========================================== */

/* Breadcrumb Enhancement */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-1);
    font-family: 'Onest', sans-serif;
    font-size: var(--fluid-body-lg);
    /* 18px → 22px fluid */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: #FFF;
    margin-bottom: var(--fluid-space-lg);
    /* 24px → 64px fluid */
}

.breadcrumb a {
    color: white;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumb a:hover {
    color: white;
    text-decoration: underline;
}

.breadcrumb-separator {
    color: white;
    margin: 0 var(--spacing-1);
}

.breadcrumb-current {
    color: white;
}

/* Mobile Breadcrumb - hidden on desktop, shown on mobile */
.breadcrumb-mobile {
    display: none;
}

@media (max-width: 768px) {
    .breadcrumb-mobile {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-1);
        width: 100%;
        max-width: 100%;
        /* Wider breadcrumbs on mobile */
        margin: 0 auto var(--spacing-6);
        text-align: center;
        padding: 0 var(--spacing-4);
    }

    .breadcrumb-mobile a,
    .breadcrumb-mobile .breadcrumb-separator,
    .breadcrumb-mobile .breadcrumb-current {
        color: var(--color-text-dark);
        font-size: var(--fluid-small);
    }

    .breadcrumb-mobile a:hover {
        color: var(--color-secondary);
    }
}

/* Consistent page padding - 11.625rem (186px) at 1920px, scales down */
.course-detail-hero,
.training-info-section,
.objectives-section,
.cta-section {
    padding-left: clamp(1.5rem, 9.69vw, 11.625rem);
    padding-right: clamp(1.5rem, 9.69vw, 11.625rem);
}

.course-detail-hero .container,
.training-info-section .container,
.objectives-section .container,
.cta-section .container {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
}

/* Course Detail Hero Section */
.course-detail-hero {
    position: relative;
    min-height: calc(100vh - 80px);
    padding-top: var(--spacing-16);
    padding-bottom: var(--spacing-8);
    /* padding-left and padding-right inherited from above */
    background: linear-gradient(135deg, #283892 0%, #041A31 100%);
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
    border: none;
    overflow: hidden;
    /* Ensure overlay doesn't spill if needed, though usually fine */
}

.course-detail-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #041A31CC;
    /* 80% opacity overlay */
    z-index: 1;
}

.course-detail-hero .container {
    position: relative;
    z-index: 2;
}

.course-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.75rem;
    /* 60px */
    align-items: center;
}

.course-detail-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.course-detail-title {
    font-family: 'Onest', sans-serif;
    font-size: var(--fluid-h2);
    /* 24px → 48px fluid */
    font-weight: 400;
    line-height: 130%;
    color: #FFF;
    margin-bottom: var(--fluid-space-md);
    /* 16px → 32px fluid */
}

.course-detail-description {
    font-family: 'Onest', sans-serif;
    font-size: var(--fluid-body-lg);
    /* 18px → 22px fluid */
    font-weight: 400;
    color: #FFF;
    line-height: 1.7;
    margin-bottom: var(--spacing-4);
}

/* Duration & Validity Tags */
.course-meta {
    display: flex;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-6);
}

.course-meta-item {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-2);
    /* Scales from ~10rem at 1366px to 14rem at 1920px */
    width: clamp(10rem, 12vw, 14rem);
    /* Scales from ~2.25rem at 1366px to 3.125rem at 1920px */
    height: clamp(2.25rem, 2.6vw, 3.125rem);
    /* Scales padding proportionally */
    padding: clamp(0.53rem, 0.625vw, 0.75rem) clamp(1rem, 1.2vw, 1.4375rem);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.10) 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: clamp(0.4375rem, 0.52vw, 0.625rem);
    box-shadow: 0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.25);
    font-family: var(--font-family-base);
    font-size: var(--fluid-small);
    color: white;
}

.meta-label {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
}

.meta-value {
    font-weight: 400;
    color: white;
}

/* WhatsApp Button */
.whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: 12px 24px;
    background: #25D366;
    color: white;
    border-radius: var(--radius-full);
    font-family: var(--font-family-base);
    font-size: var(--fluid-small);
    /* 14px → 16px fluid, meets button min size */
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-fast);
    width: fit-content;
    border: none;
    cursor: pointer;
}

.whatsapp-btn:hover {
    background: #1DA851;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.whatsapp-btn svg {
    width: 20px;
    height: 20px;
}

/* Course Image */
.course-detail-image {
    border-radius: 1.25rem;
    /* 20px */
    overflow: hidden;
    box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.25), 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.25);
    max-width: 90%;
    align-self: center;
}

.course-detail-image img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16/10;
    object-fit: cover;
}

/* ===========================================
   TRAINING INFORMATION SECTION
   =========================================== */

.training-info-section {
    position: relative;
    padding-top: var(--spacing-16);
    padding-bottom: var(--spacing-16);
    background: #fff;
    border: none;
}

/* Blue patch on left side */
.training-info-section::before {
    content: '';
    position: absolute;
    width: 450px;
    height: 450px;
    left: -225px;
    top: calc(50% + 30px);
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(215, 239, 250, 0.7) 0%, rgba(215, 239, 250, 0.4) 40%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Orange patch on right side */
.training-info-section::after {
    content: '';
    position: absolute;
    width: 450px;
    height: 450px;
    right: -225px;
    top: calc(50% + 230px);
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(249, 231, 215, 0.7) 0%, rgba(249, 231, 215, 0.4) 40%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.training-info-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    /* 80px */
    align-items: start;
}

.training-info-title {
    font-family: 'Onest', sans-serif;
    font-size: var(--fluid-h2);
    /* 24px → 48px fluid */
    font-weight: 400;
    line-height: 1.1;
    color: #041A31;
}

/* Accordion Styles */
.accordion-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* 16px spacing between items */
}

.accordion-item {
    border: none;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px 20px;
    background: #ffffff4a;
    border: none;
    border-radius: 1.25rem;
    /* 20px */
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    font-family: 'Onest', sans-serif;
    font-size: var(--fluid-h3);
    /* 20px → 32px fluid */
    font-weight: 400;
    color: #041A31;
    text-align: left;
    transition: box-shadow var(--transition-fast), color var(--transition-fast);
}

.accordion-header:hover {
    color: var(--color-secondary);
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
}

.accordion-icon {
    transition: transform var(--transition-base);
    color: var(--color-secondary);
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
}

.accordion-header[aria-expanded="true"] .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-content[data-expanded="true"] {
    max-height: 500px;
}

.accordion-content p {
    padding: 15px;
    font-family: 'Onest', sans-serif;
    font-size: var(--fluid-body-lg);
    /* 18px → 22px fluid */
    color: #666666;
    line-height: 1.7;
    margin: 0;
}

/* ===========================================
   OBJECTIVES SECTION
   =========================================== */

.objectives-section {
    position: relative;
    padding-top: var(--spacing-16);
    padding-bottom: var(--spacing-16);
    background: white;
}

/* Orange patch on right top */
.objectives-section::before {
    content: '';
    position: absolute;
    width: 450px;
    height: 450px;
    right: -225px;
    top: -150px;
    background: radial-gradient(circle, rgba(249, 231, 215, 0.7) 0%, rgba(249, 231, 215, 0.4) 40%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.objectives-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    /* 80px - match training-info-grid */
    align-items: start;
}

.objectives-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

.objectives-title {
    font-family: 'Onest', sans-serif;
    font-size: var(--fluid-h3);
    /* 20px → 32px fluid */
    font-weight: 500;
    line-height: 1.4;
    color: #041A31;
}

/* Objectives Illustration */
.objectives-illustration {
    width: 100%;
    max-width: 25rem;
    /* 400px */
    margin-top: var(--spacing-6);
}

.objectives-illustration img,
.objectives-illustration svg {
    width: 100%;
    height: auto;
    max-height: 18.75rem;
    /* 300px */
}

.objectives-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    /* 40px - more spacing between items */
}

.objectives-list li {
    display: flex;
    gap: 1rem;
    /* 16px */
    align-items: flex-start;
}

/* Black bullet dot */
.objective-icon {
    width: 0.375rem;
    /* 6px */
    height: 0.375rem;
    /* 6px */
    min-width: 0.375rem;
    flex-shrink: 0;
    margin-top: 0.625rem;
    /* 10px - align with text */
    border-radius: 50%;
    background: #000000;
    /* Pure black */
}

.objective-text {
    font-family: 'Onest', sans-serif;
    font-size: 1rem;
    /* 16px */
    color: #333333;
    line-height: 1.75;
}

.objective-text strong {
    color: #041A31;
    font-weight: 600;
}

/* ===========================================
   CTA SECTION - "Are you interested?"
   =========================================== */

.cta-section {
    position: relative;
    padding-top: var(--fluid-section);
    /* 48px → 120px fluid */
    padding-bottom: var(--fluid-section);
    background: #1E3A5F;
    overflow: hidden;
}

/* Background Image */
.cta-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../assets/background/courses-cta-banner.webp');
    background-size: cover;
    background-position: center;
    z-index: 0;
}

/* Dark Overlay */
.cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(4, 26, 49, 0.8);
    z-index: 1;
}

/* Dotted Pattern Overlay - Hidden */
.cta-dots-pattern {
    display: none;
}

/* Blur Effect in Center */
.cta-blur {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    max-width: 85.625rem;
    /* 1370px */
    height: 70%;
    max-height: 30.625rem;
    /* 490px */
    background: rgba(0, 0, 0, 0.00);
    box-shadow: 0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.25);
    border-radius: 1.25rem;
    /* 20px */
    z-index: 3;
}

/* Content Container */
.cta-container {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    /* 24px */
    max-width: 43.75rem;
    /* 700px */
    margin: 0 auto;
}

.cta-title {
    font-family: 'Onest', sans-serif;
    font-size: var(--fluid-h1);
    /* 28px → 64px fluid */
    font-weight: 400;
    color: #FFF;
    line-height: 105%;
    text-align: center;
}

.cta-description {
    font-family: 'Onest', sans-serif;
    font-size: var(--fluid-body-lg);
    /* 18px → 22px fluid */
    font-weight: 400;
    color: #FFF;
    line-height: 1.7;
    text-align: center;
    max-width: 34.375rem;
    /* 550px */
}

/* Register Now Button */
.cta-section .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 2.5rem;
    /* 14px 40px */
    margin: 25px 0;
    border-radius: 999px;
    border: 1px solid #FFF;
    background: transparent;
    font-family: var(--font-family-base);
    font-weight: 400;
    font-size: 1.125rem;
    /* 18px */
    color: #FFF;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cta-section .btn-primary:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

/* ===========================================
   RESPONSIVE STYLES
   =========================================== */

@media (max-width: 1365px) {

    /* Hide course image - background image is the visual */
    .course-detail-image {
        display: none;
    }
}

@media (max-width: 1024px) {

    /* Limit hero height on tablet */
    .course-detail-hero {
        min-height: auto;
        padding-top: var(--spacing-12);
        padding-bottom: var(--spacing-12);
        /* padding-left/right stay at 1.5rem from clamp */
        background-size: cover !important;
        background-position: center !important;
    }

    /* Center content on tablet and below */
    .course-detail-hero,
    .training-info-section,
    .objectives-section {
        text-align: center;
    }

    .course-detail-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        /* 40px */
    }

    .course-detail-content {
        align-items: center;
    }

    .course-detail-image {
        order: -1;
        margin: 0 auto;
        max-width: 50%;
    }

    /* Center meta items */
    .course-meta {
        justify-content: center;
    }

    /* Center booking button */
    .banner-wrapper {
        margin-left: auto;
        margin-right: auto;
    }

    /* Training info section */
    .training-info-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        /* 40px */
    }

    .training-info-title {
        text-align: center;
    }

    /* Keep accordion content left-aligned for readability */
    .accordion-section {
        text-align: left;
        gap: 2.0625rem;
        /* 33px */
    }

    /* Objectives section */
    .objectives-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        /* 32px */
    }

    .objectives-header {
        align-items: center;
    }

    .objectives-illustration {
        max-width: 18.75rem;
        /* 300px */
        margin: 0 auto;
    }

    /* Keep objectives list left-aligned for readability */
    .objectives-list {
        text-align: left;
        max-width: 37.5rem;
        /* 600px */
        margin: 0 auto;
    }

    .cta-blur {
        width: 90%;
        height: 80%;
    }
}

@media (max-width: 768px) {

    /* Hide hero breadcrumb on mobile - per Figma design */
    .breadcrumb:not(.breadcrumb-mobile) {
        display: none;
    }

    /* More generous side padding - 24px → 40px */
    .course-detail-hero,
    .training-info-section,
    .objectives-section,
    .cta-section {
        padding-left: 0;
        padding-right: 0;
    }

    .course-detail-hero .container,
    .training-info-section .container,
    .objectives-section .container,
    .cta-section .container {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }

    .course-detail-hero {
        padding-top: var(--fluid-space-xl);
        /* 32px → 80px */
        padding-bottom: var(--fluid-space-lg);
        min-height: auto;
    }

    .course-detail-content {
        gap: var(--spacing-6);
    }

    .course-detail-title {
        font-size: var(--fluid-h2);
        /* 24px → 48px fluid */
        margin-bottom: var(--spacing-4);
    }

    .course-detail-description {
        font-size: var(--fluid-body);
        line-height: 1.7;
        margin-bottom: var(--spacing-6);
    }


    /* Course meta - better mobile sizing */
    .course-meta {
        display: flex;
        /* Changed from inline-flex to fill width */
        width: 100%;
        max-width: 21rem;
        /* Match banner max-width */
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-3);
        /* 0.75rem = 12px */
        margin-bottom: var(--spacing-6);
    }

    /* Center elements within content area */
    .course-detail-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .course-meta-item {
        width: auto;
        flex: 1;
        /* Allow items to grow to fill the container */
        min-width: 8rem;
        /* Flexible - grows with content */
        height: auto;
        padding: var(--spacing-3) var(--spacing-4);
        font-size: var(--fluid-small);
        border-radius: 0.625rem;
        /* 10px */
    }

    /* WhatsApp button - full width to align with boxes above */
    .whatsapp-btn {
        width: 100%;
        justify-content: center;
    }

    /* Booking button - same width as course-meta via shared flex container */
    .banner-wrapper {
        width: 100%;
        max-width: 21rem;
        /* Increased to match course-meta width (~298px) */
        height: 6.375rem;
        margin-top: var(--spacing-6);
    }

    .glass-bg {
        height: 4.25rem;
        left: 0.85rem;
        right: 0;
        border-radius: 0.625rem;
        /* 10px on mobile */
    }

    .avatar-wrapper {
        width: 4.75rem;
        height: 4.75rem;
        left: 0;
    }

    .booking-text {
        font-size: 0.875rem;
        margin-left: 5.5rem;
    }

    .whatsapp-icon {
        width: 2.125rem;
        height: 2.125rem;
        top: -0.425rem;
        right: -0.625rem;
    }

    .whatsapp-icon svg {
        width: 1.0625rem;
        height: 1.0625rem;
    }

    /* Training Info Section - mobile */
    .training-info-section {
        padding-top: var(--fluid-space-xl);
        /* 32px → 80px */
        padding-bottom: var(--fluid-space-lg);
    }

    .training-info-title {
        font-size: 2.25rem;
        /* 36px */
        margin-bottom: var(--spacing-8);
    }

    .accordion-section {
        gap: 2.0625rem;
        /* 33px gap between accordion items */
    }

    .accordion-header {
        padding: 12px 16px;
        font-size: var(--fluid-body-lg);
        /* 18px → 22px fluid */
        border-radius: 0.75rem;
        /* 12px */
    }

    .accordion-content p {
        padding: 15px;
        font-size: var(--fluid-body);
        /* 16px → 18px fluid */
        line-height: 1.7;
    }

    /* Objectives Section - mobile */
    .objectives-section {
        padding-top: var(--fluid-space-xl);
        /* 32px → 80px */
        padding-bottom: var(--fluid-space-lg);
    }

    .objectives-title {
        font-size: var(--fluid-h3);
        /* 20px → 32px fluid */
        text-align: center;
        margin-bottom: var(--spacing-6);
    }

    .objectives-illustration {
        display: block;
        max-width: 14rem;
        margin: 0 auto var(--spacing-8);
    }

    .objectives-list {
        gap: var(--spacing-6);
        max-width: 100%;
        padding: 0;
    }

    .objectives-list li {
        gap: var(--spacing-3);
    }

    .objective-icon {
        margin-top: 0.5rem;
    }

    .objective-text {
        font-size: var(--fluid-body);
        line-height: 1.7;
    }

    /* CTA Section - mobile */
    .cta-section {
        padding-top: var(--fluid-section);
        padding-bottom: var(--fluid-section);
    }

    .cta-container {
        gap: var(--spacing-6);
        padding: 0;
    }

    .cta-title {
        font-size: var(--fluid-h2);
    }

    .cta-description {
        font-size: var(--fluid-body);
        line-height: 1.7;
    }

    .cta-section .btn-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 14px 40px;
        font-size: 1rem;
        font-weight: 400;
        width: auto;
        max-width: 100%;
        white-space: nowrap;
        background: transparent;
        border: 1px solid #FFF;
        border-radius: 999px;
        color: #FFF;
    }

    .cta-blur {
        display: none;
    }
}

/* Small mobile - 375px and below */
@media (max-width: 375px) {
    /* Keep fluid padding - it naturally reduces at smaller viewports */

    .course-meta-item {
        min-width: 7.5rem;
        padding: var(--spacing-2) var(--spacing-3);
    }

    /* Booking button already scaled at 768px, no further reduction needed */

    .objectives-illustration {
        max-width: 12rem;
    }
}

/* ===========================================
   BOOKING BUTTON STYLES (Ported from button.html)
   =========================================== */

/* 1. The Layout Wrapper */
.banner-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 21.625rem;
    /* 346px */
    height: 9.25rem;
    /* 148px */
    margin-top: var(--spacing-6);
    overflow: visible;
    text-decoration: none;
    cursor: pointer;
}

/* 2. The Glass Background Layer */
.glass-bg {
    position: absolute;
    left: 1.25rem;
    /* 20px */
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6rem;
    /* 96px */
    z-index: 5;

    /* Glassmorphism Styles */
    background: rgb(255, 255, 255, 0.05);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    border-radius: 1.25rem;
    /* 20px */
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.banner-wrapper:hover .glass-bg {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0.5rem 1.5625rem rgba(0, 0, 0, 0.3);
}

/* 3. The Typography */
.booking-text {
    position: relative;
    z-index: 10;
    color: #FFF;
    font-family: 'Onest', sans-serif;
    font-size: 1.125rem;
    /* 18px */
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
    margin-left: 7.5rem;
    /* 120px */
}

/* 4. The Avatar Positioning */
.avatar-wrapper {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6.125rem;
    /* 98px */
    height: 6.125rem;
    /* 98px */
    z-index: 20;
}

.member-photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: url('../assets/contact/avatar-ezkandar.png') center/cover;
    box-shadow: 0 0.5rem 1.5625rem rgba(0, 0, 0, 0.4);
}

/* 5. The Floating WhatsApp Icon (Glass Bubble) */
.whatsapp-icon {
    position: absolute;
    top: -0.625rem;
    /* -10px */
    right: -1.25rem;
    /* -20px */
    width: 2.875rem;
    /* 46px */
    height: 2.875rem;
    /* 46px */

    /* Glass Bubble Styling */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.01));
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);

    box-shadow: 0 0.25rem 0.9375rem rgba(0, 100, 255, 0.3),
        inset 0 0 0.625rem rgba(0, 100, 255, 0.2);

    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 25;
}

.whatsapp-icon svg {
    width: 1.5rem;
    /* 24px */
    height: 1.5rem;
    /* 24px */
    fill: white;
    filter: drop-shadow(0 0 0.125rem rgba(0, 0, 0, 0.3));
}