:root 
{
    /* Define theme colors as variables */

    --distinct-bg-0 :#f5f5f5;
    --distinct-bg-1 : #dad3d3; 
    --distinct-bg-2 : #dcd9d9;

}
        body
        {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }


        .macro-box
        {
            margin: 80px auto;
            max-width: 1180px;
            padding: 20px;
            background-color: #ffffff;
            border: 1px solid #ddd;
            border-radius: 5px;
        }


        .event-listing
        {
            display: grid;
    grid-template-columns: 2fr 3fr 1fr; 
   
            align-items: center;
            gap: 20px;
            margin-bottom: 20px;
            transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
        }




@media screen and (max-width: 840px) 
{


.event-image-container 
{
    grid-area: ImageArea;
}

.event-particulars 
{
    grid-area: EventParticularArea;
}

.right-column 
{
    grid-area: EventDateArea;
}

    .event-listing 
    {
        grid-template-columns: 3fr 1fr; /* Adjusts columns for better scaling */
        grid-template-areas: 
            "ImageArea ImageArea ImageArea EventDateArea"
            "EventParticularArea EventParticularArea EventParticularArea EventParticularArea";
    }
}

@media screen and (max-width: 540px) 
{


.event-image-container 
{
    grid-area: ImageArea;
}

.event-particulars 
{
    grid-area: EventParticularArea;
}

.right-column 
{
    grid-area: EventDateArea;
}

    .event-listing 
    {
        grid-template-columns: 3fr 1fr; /* Adjusts columns for better scaling */
        grid-template-areas: 
            "EventParticularArea EventParticularArea EventParticularArea EventDateArea"
            "ImageArea ImageArea ImageArea ImageArea";
    }
}

	.event-list ul
	{
    		list-style: none;
    		padding: 0;
	}

	.event-list li
	{
    		margin-bottom: 20px;
	}

      	.distinct-bg
        {
            background-color: var(--distinct-bg-1);
            padding: 10px;
            border-radius: 5px; /* Rounded corners for better appearance */
        }






        .event-listing:hover .event-title
        {
            transform: scale(1.03);
        }

       .event-listing:hover .know-more-button
        {
            transform: scale(1.02);
        }


        .event-listing:hover .event-image-container
        {
            transform: scale(1.02);
        }


        /* Apply hover effects to the event-listing container */
        .event-listing:hover .calendar-image-container .line-image 
        {
            opacity: 0; /* Hide line image */
        }

        .event-listing:hover .calendar-image-container .solid-image 
        {
            opacity: 0.6; /* Show solid image */
        }



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

        .event-image-container img
        {
            width: 100%;
          
           /* object-fit: cover; */
           /* border-radius: 5px; */
        }

        .calendar
        {
            position: relative;
            width: 110px;
            height: 120px;
            margin: 0 auto 10px auto;
            transition: transform 0.3s ease;
        }

        .calendar-image-container
        {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 120px;
        }

        .calendar-image-container img
        {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            transition: opacity 0.3s ease;
        }

        .calendar-image-container .line-image
        {
            opacity: 0.6;
        }

        .calendar-image-container .solid-image
        {
            opacity: 0;
        }

        .calendar-date-container
        {
            position: absolute;
            top: 35px;
            left: 2px;
            width: 95px;
            text-align: center;
            padding: 5px;
            background-color: #41b9ec;   
            color: #fff; 

    font-size: 16px;
    line-height: 1;


        }

        .calendar-date-container .big-day
        {
            font-size: 35px;
            font-weight: 600;
        }

        .calendar-date-container .small-month
        {
            font-size: 20px;
            font-weight: bold;
            letter-spacing: 2px;
        }

.event-particulars
{
    display: flex; /* Flexbox for layout */
    flex-direction: column; /* Vertically align delivery type and title */
align-items: flex-start; /* Align items to the top */
    justify-content: center; /* Center contents vertically */
  
}

.event-delivery-type ul
{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Align capsules in a row */
    gap: 10px; /* Add space between capsules */
}

.event-hours
{

    display: flex; /* Align  in a row */
    gap: 10px; /* Add space between capsules */

         align-items: center; /* Horizontally center items */
}

.event-location
{

    display: flex; /* Align  in a row */
    gap: 10px; /* Add space between capsules */

         align-items: center; /* Horizontally center items */
}

.event-title
{
    font-size: 18px;
    font-weight: bold;
    color: #333;
   /*  margin-top: 10px; */  /* Space between delivery type and title */
    
    padding: 10px;
}

.icon-image
{
  width: 25px;
  height: 30px;
}


.mini-capsule-red
{
    height: 22px;
    line-height: 22px;
    padding: 0 13px;
    border-radius: 50px;
    display: inline-block;
    font-size: 13px;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;


    background-color: #ff6e30;
    color: #fff;
}

.mini-capsule-green
{
    height: 22px;
    line-height: 22px;
    padding: 0 13px;
    border-radius: 50px;
    display: inline-block;
    font-size: 13px;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;


    background-color: #06b284;
    color: #fff;
}

.mini-capsule-purple
{
    height: 22px;
    line-height: 22px;
    padding: 0 13px;
    border-radius: 50px;
    display: inline-block;
    font-size: 13px;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;

             background-color: #e1e6fa;
            color: #0066ff;
}


        .right-column
        {
            display: flex;
            flex-direction: column; /* Vertical layout */
            justify-content: center; /* Vertically center items */
            align-items: center; /* Horizontally center items */
        }

        .know-more-button
        {
            text-align: center; /* Centered alignment */
        }

        .know-more-button button
        {
            padding: 10px 20px;
            font-size: 16px;
            font-weight: bold;
            color: #fff;
            background-color: #41b9ec;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .know-more-button button:hover
        {
            background-color: #3399d4;
        }