/* =========================
   POPUP MAIN
========================= */

#trainingPopup{
    position: fixed;
    top: 70%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 90%;
    max-width: 650px;

    background: #ffffff;

    border-radius: 24px;

    z-index: 999999;

    overflow: hidden;

    isolation: isolate;

    box-shadow:
        0 20px 60px rgba(0,0,0,0.18),
        0 8px 25px rgba(37,99,235,0.08);

    animation: popupFade .4s ease;
}


/* =========================
   POPUP CONTENT
========================= */

.popup-content{
    position: relative;

    padding: 45px 40px;

    display: flex;
    flex-direction: column;

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

    text-align: center;

    z-index: 2;
}


/* =========================
   TOP BAR
========================= */

.popup-content::before{
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 6px;

    background: linear-gradient(
        90deg,
        #2563eb,
        #3b82f6,
        #60a5fa
    );

    pointer-events: none;
}


/* =========================
   HEADING
========================= */

.popup-heading{
    font-size: 34px;
    font-weight: 800;

    line-height: 1.3;

    color: #111827;

    margin-bottom: 18px;

    max-width: 500px;
}


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

.popup-text{
    font-size: 17px;
    font-weight:bold;
    line-height: 1.8;

    color: #4b5563;

    margin-bottom: 30px;

    max-width: 540px;
}


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

.popup-btn{
    display: inline-flex;

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

    padding: 14px 30px;

    background: linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    color: #ffffff;

    border-radius: 12px;

    text-decoration: none;

    font-size: 15px;
    font-weight: 700;

    transition: .3s ease;

    box-shadow: 0 8px 20px rgba(37,99,235,.25);
}

.popup-btn:hover{
    transform: translateY(-3px);
}


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

#popupClose{
    position: absolute;

    top: 14px;
    right: 18px;

    width: 38px;
    height: 38px;

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

    border-radius: 50%;

    background: #f3f4f6;

    color: #111827;

    font-size: 24px;
    font-weight: 600;

    cursor: pointer;

    z-index: 999999999;

    pointer-events: auto;

    user-select: none;

    transition: .3s ease;
	
}

#popupClose:hover{
    background: #e5e7eb;
    transform: rotate(90deg);
}


/* =========================
   ANIMATION
========================= */

@keyframes popupFade{

    from{
        opacity: 0;
        transform: translate(-50%, -45%);
    }

    to{
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}


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

@media(max-width:768px){

    #trainingPopup{
        width: 92%;
        border-radius: 20px;
    }

    .popup-content{
        padding: 35px 24px;
    }

    .popup-heading{
        font-size: 26px;
    }

    .popup-text{
        font-size: 15px;
    }

    .popup-btn{
        width: 100%;
    }
}