#heading{
    margin-inline: 2rem;
    padding: 1rem;
    margin-top: 100px;
    background-color: var(--secondary-button);
    border: 2px solid var(--accent);
    box-shadow: 5px 5px var(--accent);
}
#heading h1{
    text-align: left;
    margin: 0;
    text-shadow: 3px 3px var(--accent);
}
#heading h2{
    text-align: right;
    margin: 0;
}


#card-container{
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding-inline: 2rem;
    display: flex;
    gap: 2rem;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.card{
    max-width: 30em;
    min-height: 37em;

    background-image: url(/img/Rights.jpg) ;
    background-repeat: no-repeat;
    /* background-position: horizontal vertical; */
    background-position: 50% 100%;
    background-size: cover;


    border-radius: 10px;
    border: 2px solid var(--accent);
    box-shadow: 5px 5px var(--accent);

    transition-duration: 300ms;
    transition-property: border-radius;
    transition-timing-function: cubic-bezier(.46,.03,.52,.96);
}

.card .overlay{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 30px;
    background: rgba(0,0,0,0.5);
    border-radius: 10px;

    transition-duration: 300ms;
    transition-property: border-radius;
    transition-timing-function: ease-in-out;
}


.card .overlay .heading{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    transition-duration: 400ms;
    transition-timing-function: cubic-bezier(.35,.47,.43,1.23);
}

.card .overlay .heading h1{
    text-align: center;
    font-size: clamp(3rem, 2rem + 3VW, 4rem);
    margin: 0;
    text-shadow: 3px 3px var(--accent);
}

.card .overlay p{
    padding: 0px;
    transform: translateY(+100px);
    color: var(--text-light);
    opacity: 0;
    font-size: 1.2rem;

    transition-duration: 400ms;
    transition-timing-function: cubic-bezier(.35,.47,.43,1.23);
}

.card .overlay ul{
    color: var(--text-light);
    opacity: 0;
    transition: 0.4s;
    transform: translateY(+100px);
    transition-timing-function: ease;

    padding: 0px;
    font-size: clamp(0.8rem, 1rem + 0.1VW, 1.2rem);
}

.card .overlay ul li{
    margin-top: 1em;
}



/* Hover */
.card:hover{
    border-radius: 0;
}
.card:hover .overlay{
    background: rgba(0,0,0,0.8);
    border-radius: 0;
}
.card:hover .overlay .heading{
    transition: 0.4s;
    transform: translateY(-240px);
    opacity: 0;
}
.card:hover .overlay p{
    opacity: 1;
    transform: translateY(0);
}
.card:hover .overlay ul{
    opacity: 1;
    transform: translateY(0);
}

#party{
    background-image: url(/img/party.jpg);
}
#rights{
    background-image: url(/img/Rights.jpg) ;
}
#public{
    background-image: url(/img/publicservices.jpg);
}
#work{
    background-image: url(/img/workandincome.jpg);
}
#mass{
    background-image: url(/img/lefleting.jpg);
}
#socialism{
    background-image: url(https://wallpapercave.com/wp/wp1997879.jpg);
}






/* --------------------Media querys-------------------- */
@media screen and (max-width: 1500px) {}
@media screen and (max-width: 1300px) {}
@media screen and (max-width: 1000px) {
    .card{
        height: 40em;
    }
}
@media screen and (max-width: 800px) {}