/* =========================================
       MODAL
    ========================================= */

    #campaignModal .modal-dialog {
        max-width: 520px;
    }


    #campaignModal .modal-content {

        position: relative;

        overflow: hidden;

        border: 1px solid rgba(243, 166, 22, 0.35);

        border-radius: 18px;

        background:
            linear-gradient(180deg,
                #113871 0%,
                #0d1a2d 100%);

        box-shadow:
            0 30px 80px rgba(0, 0, 0, 0.5);

        color: #ffffff;

    }


    /* =========================================
       TOP ACCENT
    ========================================= */

    #campaignModal .modal-content::before {

        content: "";

        position: absolute;

        top: 0;
        left: 0;
        right: 0;

        height: 5px;

        background: #f3a616;

    }


    /* =========================================
       CLOSE BUTTON
    ========================================= */

    #campaignModal .btn-close {

        position: absolute;

        top: 18px;
        right: 18px;

        z-index: 10;

        width: 36px;
        height: 36px;

        margin: 0;

        padding: 0;

        border-radius: 50%;

        background-color:
            rgba(255, 255, 255, 0.12);

        background-image: none;

        opacity: 1;

        display: flex;

        align-items: center;
        justify-content: center;

        transition: all 0.25s ease;

    }


    #campaignModal .btn-close::before {

        content: "\f00d";

        font-family:
            "Font Awesome 6 Free";

        font-weight: 900;

        color: #ffffff;

        font-size: 14px;

    }


    #campaignModal .btn-close:hover {

        background-color: #f3a616;

        transform: rotate(90deg);

    }


    #campaignModal .btn-close:hover::before {

        color: #000000;

    }


    /* =========================================
       BODY
    ========================================= */

    #campaignModal .modal-body {

        padding: 55px 45px 45px;

        text-align: center;

    }


    /* =========================================
       ICON
    ========================================= */

    .campaign-modal-icon {

        width: 75px;
        height: 75px;

        margin: 0 auto 20px;

        display: flex;

        align-items: center;
        justify-content: center;

        border-radius: 50%;

        background:
            rgba(243, 166, 22, 0.12);

        border:
            1px solid rgba(243, 166, 22, 0.35);

        color: #f3a616;

        font-size: 30px;

    }


    /* =========================================
       TITLES
    ========================================= */

    .campaign-modal-subtitle {

        margin: 0 0 12px;

        color: #f3a616;

        font-size: 12px;

        font-weight: 700;

        text-transform: uppercase;

        letter-spacing: 2.5px;

    }


    .campaign-modal-title {

        margin: 0;

        color: #ffffff;

        font-size: 32px;

        line-height: 1.2;

        font-weight: 700;

    }


    .campaign-modal-subtitle-title {

        margin: 8px 0 25px;

        color: #ffffff;

        font-size: 20px;

        font-weight: 400;

        opacity: 0.8;

    }


    /* =========================================
       TEXT
    ========================================= */

    .campaign-modal-text {

        margin: 8px 0;

        color:
            rgba(255, 255, 255, 0.82);

        font-size: 15px;

        line-height: 1.7;

    }


    /* =========================================
       WATCH BUTTON
    ========================================= */

    .campaign-modal-watch {

        display: inline-flex;

        align-items: center;
        justify-content: center;

        gap: 10px;

        margin-top: 25px;

        padding: 14px 30px;

        border: 0;

        border-radius: 30px;

        background: #f3a616;

        color: #000000;

        font-size: 15px;

        font-weight: 700;

        cursor: pointer;

        transition: all 0.25s ease;

    }


    .campaign-modal-watch:hover {

        background: #f3a616;

        color: #000000;

        transform: translateY(-3px);

    }


    /* =========================================
       BOOTSTRAP BACKDROP
    ========================================= */

    .modal-backdrop {

        background-color: #0d1a2d;

    }


    .modal-backdrop.show {

        opacity: 0.88;

    }


    /* =========================================
       MOBILE
    ========================================= */

    @media (max-width: 575px) {

        #campaignModal .modal-body {

            padding: 50px 25px 30px;

        }


        .campaign-modal-title {

            font-size: 26px;

        }


        .campaign-modal-subtitle-title {

            font-size: 18px;

        }


        .campaign-modal-text {

            font-size: 14px;

        }


        .campaign-modal-watch {

            width: 100%;

        }

    }