body {
	
	background-image: url("../img/button_enter_hover.png");
}
/* For large screens (1920px and above) */
@media (min-width: 1920px) {
    #content_sub_pages {
        font-size: clamp(18px, 1.2vw, 24px);
        padding: 10px;
    } 
	.enter-button { max-width: 200px; }
}

/* For medium-large screens (1280px to 1919px) */
@media (min-width: 1280px) and (max-width: 1919px) {
    #content_sub_pages {
        font-size: clamp(15px, 1.1vw, 22px);
        padding: 8px;
    } 
	.enter-button {
        max-width: 150px;
        padding-top: 60px;
		}
}

/* For medium screens (1024px to 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
    #content_sub_pages {
        font-size: clamp(14px, 1vw, 20px);
        padding: 6px;
    } 
	.enter-button {
        max-width: 150px;
        padding-top: 60px;
		}
}

/* For small screens (768px to 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    #content_sub_pages {
        font-size: clamp(12px, 0.9vw, 18px);
        padding: 4px;
    } 
	.enter-button {
        max-width: 150px;
        padding-top: 60px;
		}
}

/* For extra-small screens (up to 767px) */
@media (max-width: 767px) { 	
	.enter-button {
        max-width: 150px; 
		}
}



/* Constrain the width */
#content_sub_pages .container {
    max-width: 70%; /* Set maximum width for the container */
    width: 100%; /* Ensure it adapts to smaller screens */
    margin: 0 auto; /* Center the container */
	
}

 

.bottom-class {
	padding-top: 50px;
}
/* Row styling */
.row {
    width: 100%;
    text-align: center; /* Center-align text */ 
}

/* Column styling for the content section */
.content-section {
    display: flex;
    justify-content: space-between; /* Space between columns */
    gap: 0; /* Space between columns if empty column exists */ 
}

.col-4 {
    width: 30%; /* Even column width */
    text-align: center;
    padding-top: clamp(80px, 6vh, 80px); /* Fluid padding */
    text-shadow: 0px 0px 10px black;
}
.col-5 {
    width: 45%; /* Even column width */
    text-align: left;
    padding-top: clamp(40px, 6vh, 80px); /* Fluid padding */
    text-shadow: 0px 0px 10px black;
}
.col-7 {
    width: 55%; /* Even column width */
    text-align: left;
    padding-top: clamp(40px, 6vh, 80px); /* Fluid padding */
    text-shadow: 0px 0px 10px black;
}
 

/* Optional: Additional button styling */
.enter-button:hover {
    opacity: 0.8; /* Hover effect */
}