@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');

:root {
--global-font-family: "Rubik", sans-serif;
--rubik: "Rubik", sans-serif;
--PlayfairDisplay: "Playfair Display", serif;
--global-font-size: 24px;
--black: #000;
--red: #ED2D51;
--overlayRed: rgba(237, 45, 81, 0.75);
--white: #fff;
--gray: #808080;
--blackishGrey: #333333;
--primary-title-size: 52px;
--secondry-title-size: 64px;
--allura-font: 'Allura', cursive;
}


body {
position: relative;
}

.hide {
display: none !important;
}

.event-container {
height: 570px;
width: 75%;
display: flex;
position: fixed;
top: -100%;
left: 50%;
transform: translateX(-50%);
transition: top 0.8s ease, opacity 0.8s ease;
opacity: 0;
z-index: 99999;
}

.event-container a{
background-color:var(--white) !important;
color: black !important;
}

.event-container a:hover{
color:var(--white) !important;
}

.event-container.show {
top: 55%;
transform: translate(-50%, -50%);
opacity: 1;
}

.event-container-left {
width: 50%;
min-height: 100%;
}

.event-container-right {
width: 50%;
background-image: linear-gradient(rgba(237, 45, 81, 0.9), rgba(237, 45, 81, 0.9)),
url('/images/event-modal/img.png');
background-color: rgba(237, 45, 81, 0.9);
padding: 30px 45px;
background-size: cover;
background-position: 100% center;
background-repeat: no-repeat;
}


.logo {
width: 140px;
}

.logo img {
width: 100%;
}

.event-container-left img {
height: 100%;
width: 100%;
object-fit: cover;
}

ul.event-details {
list-style: none;
padding: 0;
margin-top:-5px;
}

ul.event-details li {
display: flex;
align-items: center;
gap: 8px;
color: white;
font-size: 16px;
}

.event-cross-btn {
position: absolute;
right: 40px;
top: 22px;
background-color: transparent;
font-size: 20px;
outline: none;
border: none;
color: white;
cursor: pointer;
}

.event-text-conten {
margin-top: 27px !important;
}

.event-text-content>* {
color: white !important;
}

.event-text-content {
margin-top: 38px;
}

.event-text-content h3 {
font-size: 24px;
font-family: var(--allura-font);
/*text-transform: capitalize;*/
}

.event-text-content h2 {
font-size: 28px !important;
margin-top: -22px;
color:black !important;
margin-bottom:0 !important;
}

.event-text-content p {
margin: 0;
font-size: 16px !important;
margin-top: -20px;
font-family: var(--rubik);
font-weight: 700 !important;
}

.event-content {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom:12px;
margin-top:30px;
}


/*button.cta {*/
/*max-width: 70%;*/
/*min-width: 60%;*/
/*text-transform: uppercase;*/
/*font-weight: bold;*/
/*font-size: 16px;*/
/*border: none;*/
/*font-family: var(--rubik) !important;*/
/*letter-spacing: 0.5px;*/
/*margin-top: 15px;*/
/*height:50px;*/
/*background-color:#FFFFFF;*/
/*color:black !important;*/
/*}*/

.event-footer {
margin-top: 58px;
width: 330px;
/*width: fit-content;*/
}

.event-footer p {
font-size: 32px;
color: white;
font-family: var(--allura-font);
}

.event-footer img {
width: 150px;
display: block;
margin-left: auto;
margin-top: -10px;
}

.event-overlay {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.6); /* black with transparency */
z-index: 998;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
}

/* When modal is active */
.event-overlay.show {
opacity: 1;
pointer-events: all;
}


@media (max-width:1200px) {
.event-container-left {
display: none;
}

.event-container-right {
width: 100%;
}

.event-container {
min-width: 50%;
}
}


@media (max-width: 546px) {
.event-container {
min-width: 90%;
min-height: fit-content !important;
}

.event-container-right {
min-height: fit-content;
padding: 20px;
}

.event-text-content h3 {
margin-bottom: 24px;
}
.event-footer{
    width: 290px;
}
}