.card {
    width:181px;
    margin-right:-150px;
    transition:all .4s;
    z-index: 0;
    cursor:pointer;
}

.card:hover {
    margin-top: -20px; 
}


.card-tab-content {
    display:none;     
    margin-right:150px; 
}

.card-tab-content.active {
    display:flex;
}

.tab-button {
    border-radius:25px;
    display:flex;
    justify-content: center;
    align-items: center;
    padding-left:30px;
    padding-right:30px;
    border:1px solid #BEA04B;
    color:#fff;
    text-transform: uppercase;
    font-size:16px;
    height:40px;
}

.tab-button.active{
   background:#BEA04B !important;
   color:#100820;
}

.cards-content-wrapper {
    margin-top:30px;
}

.tabs {
    display:flex;
    justify-content: center;
    gap:10px;
}

.card-tab-content {    
    justify-content: center;
}

.card-content {
   
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:936px;
    max-width: 100%;
    background:#4D2F86;
    z-index: 1000;
    border-radius:18px;
    height:auto; 
     
}

.close-card {
   position: absolute;
   top:20px;
   right:20px;
   width:40px;
   height:40px;
   font-size:40px;
   cursor: pointer;
   color:#fff;
}

.card-wrapper {
    display:flex;
    justify-content: space-between;
    padding:30px;
    align-items: flex-start;
    gap:30px;
}

.card-wrapper img {
    width:242px;
    flex:0 0 20%;
    
}

.card-wrapper .main-content {
    flex:0 0 70%;
}

.card-wrapper .main-content h2 {
    font-size:40px;
    text-transform: uppercase;
    color:#C3A551;
}