body, html {
    margin: 0;
    padding: 0;
	padding-left:10px;
	padding-right: 10px;
    height: 100%;
	width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f4f4f4;
    font-family: "Poppins", sans-serif;
	max-width: 500px;
	margin: 0 auto;
	gap: 25px;
	flex-flow: column wrap;
	background-image: url('background.jpg'); /* Replace with your actual image path */
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed; /* Optional: makes background stay fixed on scroll */
	}

.logo {
    width: 500px; /* Adjust the width as necessary */
    margin-bottom: 20px;
}


.container {
    text-align: center;	
}

h1 {
    margin-bottom: 30px;
    font-size: 2.5rem;
    color: #000;
}
h2 {    
    font-size: 3rem;
    color: #000;
}

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

.region-btn {
    padding: 10px 30px;
    font-size: 1.4rem;
    color: #ff9001;
    background-color: #000;
    border: none;
    border-radius: 5px;
    cursor: pointer;
	font-weight: 800;	
    transition: background-color 0.3s ease;
	text-decoration: none; 
	width: 250px;
}

.region-btn:hover {
   
	color: #f2f2f2;
}

@media (max-width: 1024px) {
	
	body, html {
		background-image: url('background-mob.jpg');
		background-attachment: scroll; /* Optional: better performance on mobile */
		width: 100%;
		padding-left: 0px;
		padding-right: 0px; 
		background-size: auto;
	}
	
	
	h1 {
		margin-bottom: 30px;
		font-size: 2rem;
		color: #f2f2f2;
	}
	h2 {
		font-size: 1.8rem;
		padding-left: 10px;
		padding-right: 10px;
	}
	
	.region-btn {
    padding: 15px 20px;
    font-size: 1.2rem;   
  
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
	text-decoration: none; 
	}
	.logo {
		width: 80%; /* Adjust the width as necessary */
		margin-bottom: 20px;
	}	
}