/* Screens Resolution : 992px
-------------------------------------------------------------------------- */
@media only screen and (max-width: 1200px) {

}

/* Screens Resolution : 992px
-------------------------------------------------------------------------- */
@media only screen and (max-width: 992px) {
	
	

}


/* Screens Resolution : 767px
-------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
	
	/* ---------------------------------
	1. PRIMARY STYLES
	--------------------------------- */

	p{ line-height: 1.4; }

	h1{ font-size: 2.8em; line-height: 1; }
	h2{ font-size: 2.2em; line-height: 1.1; }
	h3{ font-size: 1.8em; }
	
	
	/* ---------------------------------
	3. MAIN SECTION
	--------------------------------- */
	
	.main-area-wrapper{ padding: 0px; }
	
	
	.main-area{ padding-bottom: 0px; }
	

	
	/* TIME COUNTDOWN */

	#normal-countdown .time-sec{ height: 70px; width: 70px; margin: 7px; }

	#normal-countdown .time-sec .main-time{ line-height: 55px; font-size: 1.8em; }
	
	#normal-countdown .time-sec span{ bottom: 12px; }
	
}

/* Screens Resolution : 479px
-------------------------------------------------------------------------- */
@media only screen and (max-width: 479px) {

	/* ---------------------------------
	1. PRIMARY STYLES
	--------------------------------- */

	body{ font-size: 12px; }
	
	/* ---------------------------------
	3. MAIN SECTION
	--------------------------------- */
	
	/* TIME COUNTDOWN */

	#normal-countdown .time-sec{ height: 60px; width: 60px; }

	#normal-countdown .time-sec .main-time{ line-height: 45px; font-size: 1.5em; }
	
}

/* Screens Resolution : 359px
-------------------------------------------------------------------------- */
@media only screen and (max-width: 359px) {
	
	
}

/* Screens Resolution : 290px
-------------------------------------------------------------------------- */
@media only screen and (max-width: 290px) {
	
	
}
/* Flexbox layout for better responsiveness */
.display-table {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 20px 0; /* Adjust padding */
}

.display-table-cell {
    text-align: center;
    flex-direction: column;
}

/* Main Area adjustments */
.main-area {
    position: relative;
    height: auto; /* Remove fixed height */
    padding: 5px 5px;
    background-size: cover;
    background-position: center;
    box-shadow: 2px 5px 30px rgba(0, 0, 0, 0.3);
}

/* Adjusting font sizes based on viewport */
h1.title {
    font-size: 3.5em; /* Default for large screens */
}

h2.title {
    font-size: 1.5em;
}

/* Smaller screens (tablets and phones) */
@media (max-width: 1024px) {
    h1.title {
        font-size: 2.5em;
    }
    h2.title {
        font-size: 1.2em;
    }
    .desc {
        font-size: 1em;
    }
    .main-area {
        padding: 20px;
    }
}

@media (max-width: 768px) {
    h1.title {
        font-size: 2em;
    }
    h2.title {
        font-size: 1.1em;
    }
    .desc {
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    h1.title {
        font-size: 1.8em;
    }
    h2.title {
        font-size: 1em;
    }
    .desc {
        font-size: 0.8em;
    }
    .main-area {
        padding: 10px;
    }
}

/* Ensure image stays centered and maintains aspect ratio */
.main-area {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}