* {
    box-sizing:border-box;
}

body {
     font-size:1.2rem;
      font-family: "Poppins", sans-serif;
}

img {
    max-width:100%;
}

.posters {
    display:flex;
    gap:20px;
    justify-content:center;
}

.event {
    flex-basis:17%;
}

.footer {
    background-color:#88629f;
    color:#fff;
    display:flex;

}
.prpl {
    color:#88629f!important;
}

.datea {
    color: #fff;
    text-decoration:none;
}

h1 {
     color: #fff;
    font-family: "Playfair", serif;
    text-align:center;
    font-size:5rem;
}

.logo {
    width:20%;
    margin: 2% 40%;
}

.contactcontainer {
    display:flex;
    justify-content:space-evenly;
    width:100%;
}

.datea svg {
    fill:#fff;
    width:2rem;
    height:2rem;
}

.datea {
    display:flex;
    align-items:center;
    gap:10px;
}

.footer {
    padding:2%;
    position:fixed;
    bottom:0;
    width:100%;
    left:0;
    z-index:4;
}

body {
    margin:0;
    padding:0;
}
.icon-door {
    fill: none;
    width:2rem;
    height:2rem;
    stroke-width: 1.5px;
    transform: scaleX(-1);
    stroke:#111;
}

p, .hover {display:block;width:100%;text-align:center;font-weight:800}

.doors {
    display:flex;
    width:100%;
    height:100vh;
    position:absolute;
    z-index:2;
}
.doors img {
    flex-basis:50%;
    object-fit:cover;
}

.header {
    position:absolute;
    z-index:3;
    width:100%;
}

.door2 {
      transform: scaleX(-1);
}

.overlay {
    background-color:rgb(54 26 70 / 50%);
}

p {
    color:#fff;
}

h1 {
    margin:0;
}

.hover {
    color:#fff;
}

.trd1 {
    transform:translateX(-100%);
   
}

.trd2 {
    transform:translateX(100%);
   
}

.transparent {
   opacity:0;
}

#door1, #door2 {
    transition: all 1s ease-in-out;
}
#door1 {
     transform-origin: left;
     object-position: right center;
}
#door2 {
     /* transform-origin:right; */
     object-position: right center;
}

#head {
    transition: all 0.5s ease-in-out; 
}

.ontop {
    z-index: 1001;
    position: relative;
}
body {
    overflow-x:hidden;
}
#lg {
    cursor:pointer;
}

 @media only screen and (max-width: 768px)  {
    h1 {
        font-size:3rem;
    }

    .logo {
        width:50%;
        margin:5% 25%;
    }

    .doors {
        max-width:100vw;
        overflow:hidden;
    }
    .doors img {
max-width:50%;
    }

    .contactcontainer  {
    flex-direction: column;
    align-items: center;
}

.event {
    flex-basis:45%;
}

.posters {
    flex-wrap:wrap;
}
}