/* 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: 7vh;  }
}

/* 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: 4vh;  }
}

/* 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: 3vh;  }
}

/* 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 */
}
  
    
   
   
.grid-container {
	display: grid;
	grid-template-rows: auto auto; /* Two rows */
	gap: 20px; /* Space between rows */
	justify-items: center; /* Centers items horizontally within the grid */
}

.card-container {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between rows */
    max-width: 1200px; /* Set a max-width for the card container */
    width: 100%; /* Ensures it can shrink if the screen is smaller */
    padding: 0 20px; /* Adds some space around the container */
}

.grid-row {
    display: flex;
    justify-content: space-between; /* Distribute cards evenly */
    gap: 20px; /* Space between cards */
    width: 100%; /* Make the row take the full width of the container */
    margin-top: 45px;
}

.grid-row.centered {
    justify-content: center; /* Center the cards in the row */
}

.card {
    flex: 1; /* Make cards flexible */
    max-width: 30%; /* Each card takes up to 30% of the row */
   
    min-width: 120px; /* Prevent cards from becoming too small */
    height: 150px; 
    display: flex;
    flex-direction: column; /* Stack content vertically */
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  
    background-color: transparent;
    border: 2px solid #43b8bf;
    padding: 10px;
    background-image: linear-gradient(45deg, rgba(3, 80, 113, 0.6), rgba(3, 80, 113, 0.6));
    margin-top: 35px;
    color: #21f7f7;
    font-family: "Rajdhani", sans-serif;
    border-radius: 0.7rem; 
    text-align: center; /* Ensure text is centered */
}

.card h3 {
    margin-bottom: 10px; /* Space between title and small text */
	margin-top: 0;
}

.card small {
    color: white; /* White text color for small text */
    font-size: 0.9rem; /* Slightly smaller text for small */
    display: block; /* Ensure small text is on a new line */
}

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

.lottie {
    margin-top: -90px  ;
    width: 50%;
    margin: 0px auto;
}
     
.services .lottie_row { 
    width: 90%;
    margin: 0px auto;
}

.services .card.cyber {
    background-color: transparent;
    border: 2px solid #43b8bf;
    padding: 6px 12px;
    background-image: linear-gradient(45deg, rgba(3, 80, 113, 0.6), rgba(3, 80, 113, 0.6));
    margin-top: 35px;
    color: #21f7f7;
    font-family: "Rajdhani", sans-serif;
    border-radius: 0.7rem;
    max-height: 200px;
    height: 200px;
}
.services .card-img-top { 
    margin-top: -225px;
    width: 185px;
    margin: 0px auto;
}  
 .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
}



/* For large screens (1920px and above) */
@media (min-width: 1920px) { 

.grid-row { width: 1200px;  margin: 0 auto; }
	.row2 .card { width: 30%;   }
	.lottie {    width: 50%; margin-top: -100px;}
	.card {  height: 150px;}
	.row2 {margin-top: 30px; }
 
}

/* For medium-large screens (1280px to 1919px) */
@media (min-width: 1280px) and (max-width: 1919px) { 
     
	.grid-row { width: 1000px;  margin: 0 auto; }
	.row2 .card { width: 30%;   }
	.lottie {    width: 35%; margin-top: -50px;}
	.lottie-flag {    width: 50%; margin-top: -62px;}
	.lottie-text { margin-top: -20px;}
	.card {  height: 122px;}

}

/* For medium screens (1024px to 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) { 
    .card { max-width: 45%; }
}

/* For small screens (768px to 1023px) */
@media (min-width: 768px) and (max-width: 1023px) { 
    .card { max-width: 45%; }
}

/* For extra-small screens (up to 767px) */
@media (max-width: 767px) {  
	
	
	.lottie-flag {    width: 50%; margin-top: -62px;}
	.lottie-text { margin-top: -20px;}
	.lot {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns per row */
    gap: 10px; /* Add spacing between cards */
}

.lot .card:nth-child(5) {
    grid-column: span 2; /* Make the last card span the entire row */
}

.card { 
    height: 110px;
	font-size: 8px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.card h3 {font-size: 0.9rem; 
        margin-bottom: 0;  line-height: 1;}
.card small {font-size: 0.7rem; 
        line-height: 0.9;}



}

 
@media (max-width: 480px) {
    .card { max-width: 90%;  }
}