/* =========================================================
   MODERN EVENT + PRODUCT CARDS
========================================================= */

.modern-card {

    position: relative;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 18px;

    background: #fff;

    transition: 0.3s ease;

    box-shadow: 0 2px 10px rgba(0,0,0,0.08);

}

.modern-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 8px 25px rgba(0,0,0,0.15);

}

.modern-card-image {

    width: 100%;

    height: 300px;

    object-fit: cover;

    display: block;
	
	margin-left: 3px;
		
	
	
	

}

.modern-card-body {

    padding: 12px;

}

.modern-card-title {

    font-size: 16px;

    font-weight: 700;

    color: #111;

    margin-bottom: 6px;

    line-height: 1.3;

}

.modern-card-price {

    font-size: 15px;

    font-weight: 600;

    color: #d60000;

}

.modern-card-meta {

    font-size: 14px;

    color: #666;

    margin-top: 4px;

}

.live-location-link {

    display: inline-block;

    margin-top: 8px;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

}

/* =========================================================
   HERO BANNER
========================================================= */

.hero-banner{

    height: 420px;

    object-fit: cover;

    border-radius: 20px;

}

/* =========================================================
   EVENT DETAIL PAGE
========================================================= */

.event-main-image{

    width: 100%;

    height: 450px;

    object-fit: cover;

    border-radius: 20px;

}

.ticket-card{

    border-radius: 18px;

    transition: 0.3s ease;

    box-shadow: 0 2px 10px rgba(0,0,0,0.08);

}

.ticket-card:hover{

    transform: translateY(-3px);

    box-shadow: 0 8px 20px rgba(0,0,0,0.15);

}

.event-description{

    line-height: 1.8;

    font-size: 16px;

    color: #444;
	
	
	
		
		

}

.progress{

    height: 24px;

    border-radius: 20px;

}

.progress-bar{

    font-weight: 600;

}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

    .modern-card-image{

        height: 230px;

    }

    .modern-card-title{

        font-size: 15px;

    }

    .hero-banner{

        height: 220px;

    }

    .event-main-image{

        height: 260px;

    }
	
	/* =========================================================
	   SECTION HEADINGS
	========================================================= */

	.section-title {

	    text-align: center;

	    margin-bottom: 10px;

	    font-size: 32px;

	    font-weight: 700;

	}

	.section-description {

	    text-align: center;

	    color: #666;

	    margin-bottom: 30px;

	}

	/* =========================================================
	   MODERN CARDS
	========================================================= */

	.modern-card {

	    background: #fff;

	    border-radius: 18px;

	    overflow: hidden;

	    transition: 0.3s ease;

	    box-shadow: 0 2px 10px rgba(0,0,0,0.08);

	    height: 100%;
	}

	.modern-card:hover {

	    transform: translateY(-4px);

	    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
	}

	.modern-card-image {

	    width: 100%;

	    height: 260px;

	    object-fit: cover;
	}

	.modern-card-body {

	    padding: 15px;
	}

	.modern-card-title {

	    font-size: 17px;

	    font-weight: 700;

	    margin-bottom: 8px;
	}

	.modern-card-price {

	    color: #d60000;

	    font-size: 16px;

	    font-weight: 700;
	}

	.modern-card-meta {

	    color: #666;

	    font-size: 14px;

	    margin-top: 5px;
	}

	/* =========================================================
	   EVENT DETAILS
	========================================================= */

	.event-main-image {

	    width: 100%;

	    height: 500px;

	    object-fit: cover;

	    border-radius: 20px;

	    cursor: pointer;
	}

	.event-thumbnail {

	    height: 70px;

	    border-radius: 10px;

	    cursor: pointer;

	    transition: 0.2s ease;
	}

	.event-thumbnail:hover {

	    transform: scale(1.05);
	}

	.ticket-box {

	    border-radius: 20px;

	    padding: 20px;

	    background: #fff;

	    box-shadow: 0 2px 12px rgba(0,0,0,0.08);

	    margin-bottom: 20px;
	}

	

	.ticket-type-title {

	    font-size: 18px;

	    font-weight: 700;
	}

	.ticket-price {

	    color: #d60000;

	    font-size: 20px;

	    font-weight: 700;
	}

	.event-description {

	    line-height: 1.9;

	    color: #444;
	}

	/* =========================================================
	   MOBILE
	========================================================= */

	@media(max-width:768px){

	    .modern-card-image {

	        height: 220px;
	    }

	    .event-main-image {

	        height: 280px;
	    }
	}
	
	/* =========================================================
	   GLOBAL SECTION SPACING (HEADINGS + DESCRIPTIONS)
	========================================================= */

	/* =========================================================
	   UNIVERSAL SECTION SPACING (DESKTOP + MOBILE)
	========================================================= */

	.section-header-row,
	.section-description-row{
	    padding-left:15px;
	    padding-right:15px;
	}

}