.nav-bar {
    position:relative !important;
}

.head {
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content:center;
    width:100%;
    gap:30px;

    h1 {
        color:var(--prpl-b-col);
    }

    .flag {
        width:200px;
        display:flex;
        align-items: center;
        justify-content:space-around;
        text-transform: uppercase;
        font-size:20px;
        gap:10px;
        padding:10px;
        font-weight:600;
        border:2px solid var(--prpl-b-col);
        color:var(--prpl-b-col);
        cursor:pointer;
        border-radius:10px;
    }
}

.switching-tabs {
    display:flex;
    align-items: center;
    justify-content:center;
    margin-top:20px;

    .tabs {
        display:flex;
        align-items: center;
        justify-content:center;
        border-radius:20px;
        border:2px solid var(--prpl-b-col);
    }

    .tab {
        width:200px;
        padding:10px 20px;
        font-weight:600;
        cursor:pointer;
        color:var(--prpl-b-col);
        transition:all 0.3s ease-in-out;
        text-align: center;

        &.active {
            background-color:var(--prpl-b-col);
            border-radius:15px;
            color:white;
        }
    }
}

.memberships {
    display:flex;
    align-items: flex-start;
    justify-content:center;
    gap:20px;
    margin-top:30px;
    flex-wrap:wrap;

    .membership {
        background-color:white;
        border-radius:20px;
        width:400px;
        box-shadow:0 0 10px rgba(0,0,0,0.1);
        display:flex;
        flex-direction: column;
        align-items: center;
        gap:15px;
        transition:all 0.3s ease-in-out;

        .top {
            border-radius: 20px 20px 0 0;
            background-color: var(--prpl-b-col);
            width:100%;
            text-align:center;
            padding:20px;
            color:white;

            text-transform:uppercase;
        }

        .mid {
            width:100%;
            padding:20px;
        }

        &:hover {
            transform:translateY(-10px);
            box-shadow:0 0 20px rgba(0,0,0,0.2);
        }


        ul {
            list-style-type:none;
            padding:0;
            text-align:center;
            i {
                color:rgb(179, 250, 179);
            }

            li {
                margin:10px 0;
                font-size:16px;
                color:gray;
            }
        }

        .bottom { 
            padding:20px;
        }

        .bottom button {
            background-color:var(--prpl-b-col);
            color:white;
            border:none;
            padding:10px 20px;
            border-radius:10px;
            cursor:pointer;
            font-weight:600;
            transition:background-color 0.3s ease-in-out;

            &:hover {
                background-color:var(--prpl-col);
            }
        }
    }
}