/* 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; }
	.button-wrapper {  margin-top: 70px;}
	.row.rc-heading {  top: 6vh;  }
}

/* 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; }
	.button-wrapper {        margin-top: 60px;}
	.row.rc-heading {  top: 2vh;  }
}

/* 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;  }
	.button-wrapper { margin-top: 60px;}
	.row.rc-heading {  top: 2vh;  }
}

/* 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;  }
	.button-wrapper {  margin-top: 60px;}
	.row.rc-heading {  top: 2vh;  }
}

/* For extra-small screens (up to 767px) */
@media (max-width: 767px) {
    #content_sub_pages {  font-size: clamp(10px, 0.8vw, 16px);  padding: 2px; } 
	.enter-button {  max-width: 150px; }
	.button-wrapper {  margin-top: 60px;}
}



/* 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 */
	
}
 
  
.button-wrapper {
    display: inline-block; /* Ensure proper alignment for links */
}
 
 
 

 
/* Row styling */
.row {
    width: 100%;
    text-align: center; /* Center-align text */
    padding: 10px 0; /* Space between rows */
}

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

.col-4 {
    width: 30%; /* Even column width */
    text-align: center;
    padding-top: clamp(40px, 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 */
}