.input-design {
    background-color: transparent;
    border: 2px solid #43b8bf; 
    margin-bottom: 20px;
    color: #21f7f7;
    font-family: "Rajdhani", sans-serif;
    background-image: linear-gradient(45deg, rgba(67, 184, 191, 0.2), rgba(67, 184, 191, 0.2));
    padding: 10px;
    width: 80%;
    font-size: 20px;
}

/* 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;  }
	
	.input-design { 
    margin-bottom: 10px; 
    padding: 10px; 
    font-size: 15px;
}


}

/* 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;  }
	.input-design { 
    margin-bottom: 10px; 
    padding: 10px; 
    font-size: 15px;
}

}

/* 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;  }
	.input-design { 
    margin-bottom: 10px; 
    padding: 10px; 
    font-size: 15px;
}

}

/* 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;}
	.input-design { 
    margin-bottom: 10px; 
    padding: 10px; 
    font-size: 15px;
}

.container.mmm { 
    height: 90vh;
	
}
}



/* 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 */
}



input[placeholder], [placeholder], *[placeholder] {
    color: #21f7f7 !important;
  opacity: 0.75; /* Firefox */
}
::placeholder {
    color: #21f7f7;
  opacity: 0.75; /* Firefox */
}