:root {
    /* Fontes */
    --font-main: 'Inter', sans-serif;
    --font-heading: 'Space Grotesk', Helvetica, sans-serif;

    /* Cores */
    --color-primary: #24A0D6;
    --color-primary-dark: #127597;
    --color-primary-light: #2F97C1;
    --color-secondary: #1C8DBB;
    --color-accent: #2D91B8;
    --color-text-dark: #0B3C49;
    --color-text-light: #ffffff;
    --color-text-gray: #444444;
    --color-bg-light: #EAF4F8;
    --color-bg-card: #EDF8FD;
    --color-border: #bab9b96c;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&display=swap');

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

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
    border-radius: 10px;
    height: 10rem;
}

html,
body {
    height: 100%;
    position: relative;
    overflow-x: hidden;
}

/* SECTION1 */
.s1 {
    width: 100%;
    min-height: 100px;
    background-image: url("../assets/capa.jpeg");
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: var(--font-heading);
    color: var(--color-text-light);
    display: flex;
    justify-content: center;
    padding: 0px 0;
    box-sizing: border-box;

    .s1-content {
        width: 100%;
        max-width: 1300px;
        padding: 60px;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;

        .side-block {
            text-align: left;
            margin: 0;
            flex: 0 1 auto;

            .s1-title {
                font-size: 35px;
                font-family: var(--font-heading);
                max-width: 580px;
                font-weight: 500;
            }

            .s1-subtitle {
                font-size: 18px;
                font-weight: 100;
                font-family: var(--font-heading);
                max-width: 580px;
            }
        }
    }
}

/* SECTION2 */
.s2 {
    width: 100vw;
    background-color: #fff;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    font-family: var(--font-main) !important;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
    z-index: 2;

    * {
        font-family: var(--font-main) !important;
    }

    .s2-jump {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 20px 10px;
        max-width: 1300px;
        width: 100%;
        overflow: hidden;
    }

    .s2-jump-label {
        color: var(--color-primary-dark);
        font-size: 9px;
        font-weight: 500;
        white-space: nowrap;
        margin-left: 1rem;
        padding-left: 1rem;
        flex-shrink: 0;
    }

    .s2-buttons {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: none;
        flex: 1;

        &::-webkit-scrollbar {
            display: none;
        }

        .s2-btn {
            background-color: transparent;
            border: 1.5px solid var(--color-primary-dark);
            border-radius: 30px;
            padding: 11px 18px;
            color: var(--color-primary-dark);
            font-size: 12px;
            font-weight: 500;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.3s ease;
            flex-shrink: 0;

            &:hover {
                background-color: var(--color-primary-dark);
                color: var(--color-text-light);
            }
        }
    }
}

/* SECTION3 */
.s3 {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 80px 20px;
    padding-bottom: 40px;
    font-family: var(--font-main);

    .s3-main-container {
        width: 100%;
        max-width: 1200px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .s3-image {
        flex: 1;
        display: flex;
        justify-content: flex-start;

        img {
            width: 100%;
            max-width: 520px;
            height: auto;
            object-fit: contain;
        }
    }

    .s3-content {
        flex: 1;
        max-width: 520px;

        h2 {
            color: var(--color-primary);
            font-size: 34px;
            font-weight: 700;
            margin-bottom: 20px;
            font-family: var(--font-heading);
        }

        p {
            color: var(--color-text-dark);
            font-size: 16px;
            line-height: 1.6;
        }
    }
}

/* SECTION4 */
.s4 {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 80px 20px;
    padding-top: 20px;
    font-family: var(--font-heading);

    .s4-container {
        width: 100%;
        max-width: 1200px;
    }

    .s4-card {
        overflow: hidden;
        background: #E6F4FB;

        border: 1px solid var(--color-primary);
        border-radius: 30px;
    }

    .s4-content {
        display: flex;
        gap: 60px;
        padding: 60px;
        align-items: center;
        border: 1px solid var(--color-primary);
        border-radius: 30px;
        background-color: white;

    }

    .s4-left {
        flex: 1;

        h2 {
            font-size: 34px;
            color: var(--color-primary);
            font-weight: 500;
            margin-bottom: 20px;
            line-height: 1.2;
        }

        p {
            font-size: 16px;
            line-height: 1.3;
            color: var(--color-text-dark);
            font-family: var(--font-main);
        }
    }

    .s4-right {
        flex: 1.5;
    }

    .chart-wrapper {
        text-align: center;

        h4 {
            font-size: 12px;
            margin-bottom: 10px;
            font-family: var(--font-main);
            color: var(--color-text-dark);
        }

        small {
            display: block;
            margin-top: 12px;
            font-size: 12px;
            text-align: left;
            padding-left: 40px;
            font-family: var(--font-main);
        }
    }

    .chart-area {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .donut {
        width: 300px;
        height: 300px;
        transform: rotate(-200deg);
    }

    .donut-bg {
        fill: none;
        stroke: #eee;
        stroke-width: 14;
    }

    .donut-segment {
        fill: none;
        stroke-width: 14;
        stroke-dasharray: 0 100;
        animation: fill 1.5s ease forwards;
    }

    .donut g text {
        font-size: 2px;
        font-family: var(--font-main);
        font-weight: 400;
    }

    .seg1 {
        stroke: #0F4A55;
        stroke-dasharray: 23 77;
        stroke-dashoffset: 0;
    }

    .seg2 {
        stroke: #2E95BF;
        stroke-dasharray: 21 79;
        stroke-dashoffset: -23;
    }

    .seg3 {
        stroke: #6FB0CC;
        stroke-dasharray: 52 48;
        stroke-dashoffset: -44;
    }

    .seg4 {
        stroke: #B7D8E6;
        stroke-dasharray: 5 95;
        stroke-dashoffset: -96;
    }

    @keyframes fill {
        from {
            stroke-dasharray: 0 100;
        }
    }

    .chart-text {
        font-size: 3.8px;
        fill: var(--color-text-light);
        font-weight: 600;
        text-anchor: middle;
        dominant-baseline: middle;
        transform: rotate(90deg);
        transform-origin: 21px 21px;

        &.small {
            fill: var(--color-text-dark);
            display: flex;
        }
    }

    .chart-legend {
        display: flex;
        flex-direction: column;
        gap: 12px;
        font-size: 14px;
        text-align: left;
        font-weight: bold;
        font-family: var(--font-main);

        span {
            display: inline-block;
            width: 14px;
            height: 14px;
            margin-right: 8px;
            border-radius: 3px;
        }

        .diferent {
            width: fit-content;
            font-weight: 200;
            padding-left: 24px;
            color: #3C4242;
        }

        .c1 {
            background: #0F4A55;
        }

        .c2 {
            background: #2E95BF;
        }

        .c3 {
            background: #6FB0CC;
        }

        .c4 {
            background: #B7D8E6;
        }
    }

    .s4-bottom {
        background: #E6F4FB;
        padding: 30px 60px;
        font-size: 16px;
        line-height: 1.2;
        color: var(--color-primary-dark);
        font-family: var(--font-main);
    }

    @media (max-width: 900px) {
        .s4-content {
            flex-direction: column;
            text-align: center;
        }

        .chart-area {
            flex-direction: column;
        }
    }
}

/* SECTION5 */
.s5 {
    width: 100%;
    background: var(--color-bg-light);
    padding: 40px 20px;
    font-family: var(--font-heading);

    .s5-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .s5-title {
        font-size: 34px;
        font-weight: 700;
        color: var(--color-primary);
        margin-bottom: 20px;
    }

    .s5-description {
        font-family: var(--font-main);
        font-size: 16px;
        color: var(--color-text-dark);
        margin-bottom: 40px;
    }

    .s5-card {
        background: #ffffff;
        border-radius: 30px;
        padding: 20px 40px;
    }

    .s5-accordion {
        .s5-item {
            border-bottom: 1px solid #D9E3E8;

            &:last-child {
                border-bottom: none;
            }

            &.is-active {
                .arrow {
                    transform: rotate(225deg);
                }

                .s5-content {
                    max-height: 5000px;
                    opacity: 1;
                    padding-bottom: 40px;
                }
            }

            .s5-trigger {
                width: 100%;
                background: none;
                border: none;
                padding: 25px 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 18px;
                font-weight: 500;
                color: var(--color-primary);
                font-family: var(--font-main);
                cursor: pointer;
            }

            .arrow {
                width: 14px;
                height: 14px;
                border-right: 2px solid #1C8DBE;
                border-bottom: 2px solid #1C8DBE;
                transform: rotate(45deg);
                transition: transform 0.3s ease;
            }

            .s5-content {
                max-height: 0;
                overflow: hidden;
                opacity: 0;
                transition: all 0.4s ease;

                p {
                    font-family: var(--font-main);
                    font-size: 14px;
                    line-height: 1.3;
                    color: var(--color-text-dark);

                    sup {
                        font-size: 10px;
                    }
                }

                .s5-content-grid {
                    display: grid;
                    grid-template-columns: 1fr 400px;
                    gap: 40px;
                    align-items: center;

                    img {
                        width: 100%;
                    }
                }

                .s5-intro {
                    margin-bottom: 30px;
                }

                .s5-highlight {
                    margin-top: 30px;
                    background: #DDE5EA;
                    border-radius: 30px;
                    overflow: hidden;

                    .s5-highlight-header {
                        background: #2F95BD;
                        color: #fff;
                        padding: 22px 30px;
                        font-size: 22px;
                        font-weight: 500;
                        font-family: var(--font-main);
                        border-radius: 30px 30px 0 0;

                        sup {
                            font-size: 15px;
                        }
                    }

                    .s5-highlight-body {
                        padding: 30px;
                        background: var(--color-bg-card);
                    }

                    .s5-highlight-row {
                        display: flex;
                        gap: 20px;
                        align-items: flex-start;

                        .icon {
                            min-width: 52px;
                            height: 52px;
                            background: #2F95BD;
                            border-radius: 50%;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            img {
                                width: 25px;
                                height: 25px;
                                object-fit: contain;
                            }

                            .first {
                                width: 16px;
                                height: 16px;
                            }
                        }

                        p {
                            margin: 0;
                            font-size: 16px;
                            line-height: 1.3;
                            color: #312C2A;
                        }
                    }

                    .divider {
                        height: 1px;
                        background: rgba(0, 0, 0, 0.08);
                        margin: 25px 0;
                    }
                }

                .ngs-subtitle {
                    margin: 50px 0 30px;
                    text-align: center;
                    font-size: 22px;
                    font-weight: 600;
                    color: #000000;

                    sup {
                        font-size: 12px;
                    }
                }

                .ngs-grid {
                    gap: 30px;
                    align-items: start;
                    margin-bottom: 30px;

                    img {
                        width: 100%;
                    }

                    img:nth-child(2) {
                        padding-left: 40px;
                    }
                }

                .ngs-bottom {
                    margin-top: 20px;

                    img {
                        width: 100%;
                        padding-left: 40px;
                    }
                }

                .ngs-caption {
                    margin-top: 15px;
                    font-size: 12px;
                    line-height: 1.4;
                    color: #666;
                }
            }
        }
    }
}

/* SECTION6 */
.s6 {
    width: 100%;
    padding: 100px 20px;
    padding-bottom: 0;
    font-family: var(--font-heading);

    .s6-top {
        max-width: 1200px;
        margin: 0 auto 80px;
        display: flex;
    }

    .s6-left {
        flex: .9;
        margin-top: 25px;

        .s6-title {
            font-size: 34px;
            font-weight: 700;
            color: var(--color-primary);
            line-height: 1.2;
            margin-bottom: 23px;
            max-width: 650px;
        }

        .s6-text {
            font-family: var(--font-main);
            font-size: 16px;
            color: #2C3E50;
            max-width: 650px;


            sup {
                font-size: 9px;
            }
        }
    }

    .s6-stats {
        width: 350px;
        display: flex;
        flex-direction: column;
        gap: 20px;

        .s6-stat {
            display: flex;
            align-items: center;
            font-family: var(--font-main);
            gap: 20px;

            strong {
                display: block;
                font-size: 18px;
                font-weight: 600;
                color: #1F3C4A;
            }

            span {
                font-size: 12px;
                color: #5C6F7A;
            }
        }

        .icon-circle {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: var(--color-accent);
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 35px;
                object-fit: contain;
            }
        }

        .s6-note {
            font-size: 11px;
            color: #445B67;
            margin-top: 10px;
            font-family: var(--font-main);
            padding-left: 90px;
        }
    }

    .s6-bottom {
        max-width: 1200px;
        margin: 0 auto;

        .s6-subtitle {
            font-size: 34px;
            color: var(--color-primary);
            font-weight: 700;
            margin-bottom: 20px;
        }

        .s6-cards {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }

        .s6-card {
            background: var(--color-bg-card);
            padding: 20px 25px;
            border-radius: 32px;
            min-height: 320px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            font-family: var(--font-main);
            color: #1E2F3A;

            .card-icon {
                width: 48px;
                height: 48px;
                object-fit: contain;
            }

            p {
                font-size: 13px;
                line-height: 1.3;
                margin: 0;

                strong {
                    font-weight: 700;
                }
            }
        }
    }
}

/* SECTION7 */
.s7 {
    padding: 40px 20px;
    background: #ffffff;
    font-family: var(--font-main);

    .s7-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .s7-main-title {
        font-size: 20px;
        font-weight: 600;
        color: #0B3C49;
        margin-bottom: 60px;
        line-height: 1.4;
    }

    .s7-grid {
        display: grid;
        grid-template-columns: 0.8fr 1.4fr;
        margin-bottom: 20px;
    }

    .s7-col:first-child {
        padding: 0 30px 0 0;
        border-right: 2px solid #000000a4;
        text-align: center;
    }

    .s7-col:last-child {
        padding: 0 0 0 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        text-align: center;

        .s7-icon-row {
            max-width: 400px;
        }
    }

    .s7-col-title {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 30px;
        font-family: var(--font-heading);
    }

    .s7-icon-row-top {
        margin-top: 40px;
    }

    .s7-icon-row {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-bottom: 25px;
        max-width: 300px;
        text-align: start;

        p {
            font-size: 15px;
            margin: 0;
            line-height: 1.2;
            padding-left: 16px;
            font-family: var(--font-heading);
        }
    }

    .s7-icon {
        width: 50px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .s7-illustration {
        width: 100%;
        object-fit: cover;
        margin-bottom: 12px;
        display: block;
    }

    .s7-bar {
        background: #BDBDBD;
        padding: 8px;
        text-align: center;
        font-size: 12px;
        font-weight: 500;
    }

    .s7-subgrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .s7-subtitle {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 15px;
        font-family: var(--font-heading);
    }

    .s7-footnote {
        font-size: 12px;
        color: #555;
        padding-bottom: 20px;
    }

    .s7-bottom {
        margin-top: 30px;
    }

    .s7-bottom-card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: #E6F0F6;
        border-radius: 40px;
        overflow: hidden;
    }

    .s7-bottom-left {
        padding: 30px 60px;

        h2 {
            font-size: 34px;
            color: var(--color-primary);
            margin-bottom: 25px;
            line-height: 1.2;
            font-family: var(--font-heading);
        }

        p {
            font-size: 14px;
            line-height: 1.5;
            margin-bottom: 18px;
            font-family: "Inter", sans-serif;
            color: #0B3C49;
        }

        sup {
            font-size: 15px;
        }
    }

    .s7-bottom-right img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}

/* SECTION8 */
.s8 {
    padding: 0px 20px;
    font-family: var(--font-main);
    background: #ffffff;

    .s8-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .s8-title {
        font-size: 34px;
        font-weight: 600;
        color: var(--color-primary);
        margin-bottom: 20px;
        font-family: var(--font-heading);
    }

    .s8-description {
        font-size: 16px;
        margin-bottom: 15px;
        color: var(--color-text-dark);
    }

    .s8-highlight {
        font-weight: 600;
        margin-bottom: 40px;
        color: var(--color-text-dark);
    }

    .s8-graphic {
        margin: 30px 0;

        img {
            width: 100%;
            height: auto;
            display: block;
        }
    }

    .s8-footnote {
        font-size: 12px;
        color: #3C4242;
        line-height: 1.6;
        padding-bottom: 10px;
    }

    .s8-bottom {
        margin-top: 50px;
        display: flex;
        justify-content: center;
        max-width: 1200px;
        padding-left: 70px;
    }

    .s8-card {
        position: relative;
        background: var(--color-primary-light);
        border-radius: 30px;
        padding: 50px 50px 20px 100px;
        width: 100%;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
        overflow: visible;
    }

    .s8-icon-box {
        position: absolute;
        left: -60px;
        top: 50%;
        transform: translateY(-50%);
        width: 130px;
        height: 130px;
        background: #E6F0F6;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 60px;
            height: auto;
        }
    }

    .s8-card-text {
        color: var(--color-text-light);
        font-size: 15px;

        p {
            margin-bottom: 20px;
            font-weight: 300;
        }

        strong {
            font-weight: 700;
        }

        sup {
            font-size: 11px;
            vertical-align: super;
        }
    }
}

/* SECTION10 */
.s9 {
    padding: 20px 20px;
    font-family: var(--font-main);

    .s9-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .s9-title {
        text-align: center;
        font-size: 34px;
        font-weight: 600;
        font-family: var(--font-heading);
        color: var(--color-primary);
        margin-bottom: 20px;

        sup {
            font-size: 12px;
            vertical-align: super;
        }
    }

    .s9-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        margin-bottom: 40px;
    }

    .s9-card {
        background: #e9eff4;
        border-radius: 30px;
        overflow: hidden;
    }

    .s9-card-header {
        padding: 18px;
        font-weight: 500;
        text-align: center;
        color: #fff;
        font-size: 18px;

        &.dark {
            background: #0F5D78;
        }

        &.light {
            background: var(--color-primary-light);
        }
    }

    .s9-card-body {
        padding: 30px;
    }

    .s9-item {
        display: flex;
        gap: 15px;
        padding: 20px 0;
        align-items: center;
        border-bottom: 1px solid #d5dde3;

        &:last-child {
            border-bottom: none;
        }

        p {
            font-size: 18px;
            font-weight: 300;
            color: var(--color-text-dark);

            strong {
                font-weight: 600;
            }
        }
    }

    .s9-icon {
        min-width: 49px;
        height: 49px;
        border-radius: 50%;
        background: var(--color-primary-light);
    }

    .s9-footnote {
        text-align: center;
        font-size: 16px;
        color: #4d4d4d;
        max-width: 1100px;
        margin: 0 auto 50px auto;

        sup {
            font-size: 10px;
        }
    }

    .s9-bottom {
        background-image: url('../assets/bg-conclusao.jpg');
        background-size: cover;
        background-position: right center;
        background-repeat: no-repeat;
        border-radius: 40px;
        padding: 40px 80px;
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }

    .s9-bottom-content {
        max-width: 600px;
        font-family: var(--font-heading);

        h3 {
            font-size: 34px;
            color: var(--color-accent);
            margin-bottom: 20px;

            sup {
                font-size: 14px;
            }
        }

        p {
            font-weight: 400;
            font-size: 16px;
            line-height: 1.4;
            color: #0B3C49;
            font-family: var(--font-main);
        }
    }
}

.s10 {
    padding: 40px 20px;
    font-family: var(--font-main);

    .s10-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .s10-title {
        font-size: 10px;
        color: var(--color-text-gray);
    }

    .s10-list {
        font-size: 10px;
        line-height: 1.6;
        color: var(--color-text-gray);
        margin-bottom: 30px;
        list-style-type: none;

        li {
            margin-bottom: 5px;
        }
    }

    .s10-disclaimer {
        padding-top: 25px;
        font-size: 12px;
        line-height: 1.6;
        color: #555;

        p {
            margin-bottom: 8px;
        }
    }
}

/* --- ESTILO DO MODAL --- */
.custom-modal {
display: none;
position: fixed;
z-index: 99999;
left: 0; top: 0;
width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.9);
align-items: center;
justify-content: center;
}

.modal-content {
background: #fff;
width: 95%;
max-width: 600px;
padding: 55px 20px 30px;
border-radius: 15px;
position: relative;
max-height: 90vh;
overflow-y: auto;
}

.modal-close-btn {
position: absolute;
right: 15px; top: 15px;
width: 35px; height: 35px;
background-color: #1C8DBB;
color: white;
font-size: 26px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
cursor: pointer;
line-height: 1;
}

#modal-body .s7-zoom-group {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}

#modal-body .s7-subgrid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 20px !important;
}

#modal-body .s7-bar {
background: #BDBDBD !important;
width: 100% !important;
text-align: center !important;
padding: 8px !important;
}

#modal-body img.zoom-click,
#modal-body .s8-graphic img,
#modal-body .s7-illustration {
width: auto !important;
max-width: 100% !important;
max-height: 65vh !important;
display: block !important;
margin: 0 auto !important;
}



/* Overlay do Popup */
.donut-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.donut-overlay.active {
    display: flex;
}

/* Caixa Branca */
.donut-modal-box {
    background: white;
    width: 90%;
    max-width: 500px;
    padding: 40px 20px;
    border-radius: 20px;
    position: relative;
    text-align: center;
}

.modal-body-content .chart-area {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.modal-body-content .donut {
    width: 250px !important;
    height: 250px !important;
    margin-bottom: 20px;
}

.modal-close-btn {
    position: absolute;
    right: 15px; top: 15px;
    width: 35px; height: 35px;
    background-color: #1C8DBB;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}