/* General Reset */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Rajdhani', sans-serif;
}

/* Video Background */
.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Centered Content */
.content {
    position: absolute;
    bottom: 10%; /* Position 10% from the bottom */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: white;
    opacity: 1;
    transition: opacity 1s ease;
}

h1 { 
    color: #16C6C5;
    font-size: clamp(24px, 1.8vw, 32px);
    font-weight: bold;
    margin-bottom: 20px;
    text-shadow: 0px 0px 40px rgba(0, 0, 0, 1);
    padding-top: 55px;
}
h2 {
    color: #16C6C5;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 20px;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.9);
}

h3 { 
color: #16C6C5;
}

/* Button Styling */
.enter-button { 
    cursor: pointer;
	transition: all 0.5s ease; /* Smooth hover transition */
}

/* Hidden Content */
.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Flicker Effect */
.flicker {
    opacity: 1;
    visibility: visible;
    animation: flicker 2s infinite alternate; /* Flicker for 2 seconds */
}

@keyframes flicker {
    0% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.8;
    }
}

/* Typewriter text style */
.typewriter-text {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    font-family: 'Rajdhani', sans-serif;
    font-size: 30px;
    color: #16C6C5;
    display: inline-block;
    white-space: nowrap;
    padding-right: 5px;
}

/* Cursor blinking effect */
.cursor {
    display: inline-block;
    width: 15px;
    height: 20px;
    background-color: #16C6C5;
    animation: blink 0.7s step-end infinite;
}

@keyframes blink {
    50% {
        background-color: transparent;
    }
}

/* Initially hide the mobile video */
.mobile {
    display: none;
}

/* Ensure the desktop video is shown by default */
.desktop {
    display: block;
}

/* Hide the cursor on mobile devices */
@media (max-width: 768px) {
    .cursor {
        display: none;
    }
	.typewriter-text {
		font-size: 22px;
	}
}




/* Sub Page */

/* Parent container styling */
#content_sub_pages {
display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 100vh;
    padding: 5px;
    box-sizing: border-box;
    color: #fff;
    font-size: clamp(16px, 1.2vw, 22px);
    transition: 1s;
}

/* For large screens (1920px and above) */
@media (min-width: 1920px) {
    #content_sub_pages {
        font-size: clamp(18px, 1.2vw, 24px);
        padding: 10px;
    }
	h1 {padding-top: 0;}
	.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;
    }
	h1 {padding-top: 5%;}
	.enter-button {
        max-width: 150px;
        padding-top: 60px;
		}
		
		 
h2 {
    margin-bottom: -25px;
    font-size: 20px; 
}


}

/* 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;
    }
	h1 {padding-top: 5%;}
	.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;
    }
	h1 {padding-top: 5%;}
	.enter-button {
        max-width: 150px;
        padding-top: 60px;
		}
}

/* For extra-small screens (up to 767px) */
@media (max-width: 767px) {
    #content_sub_pages {
        font-size: clamp(10px, 0.8vw, 16px);
        padding: 2px;
    }
	h1 {padding-top: 5%;}
	.enter-button {
        max-width: 150px;
        padding-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 */
	
}







#content_sub_pages_services {
display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 100vh;
    padding: 5px;
    box-sizing: border-box;
    color: #fff;
    font-size: clamp(16px, 1.2vw, 22px);
    transition: 1s;
}

/* For large screens (1920px and above) */
@media (min-width: 1920px) {
    #content_sub_pages_services {
        font-size: clamp(18px, 2.0vw, 26px);
        padding: 40px;
    }
	h1 {padding-top: 75px;}
}

/* For medium-large screens (1280px to 1919px) */
@media (min-width: 1280px) and (max-width: 1919px) {
    #content_sub_pages_services {
        font-size: clamp(14px, 1.1vw, 22px);
        padding: 8px;
    }
	h1 {padding-top: 5%;}
}

/* For medium screens (1024px to 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
    #content_sub_pages_services {
        font-size: clamp(14px, 1vw, 20px);
        padding: 6px;
    }
	h1 {padding-top: 5%;}
}

/* For small screens (768px to 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    #content_sub_pages_services {
        font-size: clamp(12px, 0.9vw, 18px);
        padding: 4px;
    }
	h1 {padding-top: 5%;}
}

/* For extra-small screens (up to 767px) */
@media (max-width: 767px) {
    #content_sub_pages_services {
        font-size: clamp(10px, 0.8vw, 16px);
        padding: 2px;
    }
	h1 {padding-top: 5%;}
}



/* Constrain the width */
#content_sub_pages_services .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 */
    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 */
}


/* Menu */
.top-menu {
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    top: 0; /* Align it to the top */
    width: 100%; /* Full width of the page */
    z-index: 1000; /* Ensure it stays above other elements */
    padding-top: 2.5%;
    padding-bottom: 2.5%;
	
position: absolute;

    opacity: 0; /* Hidden initially */
    visibility: hidden; /* Avoid flicker before animation starts */
    animation: flicker 2s infinite; /* Flicker effect */
}

/* Add this class dynamically to display the menu */
.top-menu.visible {
    opacity: 1;
    visibility: visible;
    animation: fadeIn 0.5s ease-out forwards; /* Smooth fade-in */
}

/* Flicker Keyframes */
@keyframes flicker {
    0% { opacity: 0.4; }
    50% { opacity: 0.8; }
    100% { opacity: 0.4; }
}

/* Fade-in Keyframes */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* List Styling */
.top-menu ul {
    display: flex; /* Flexbox for the list */
    gap: 20px; /* Space between items */
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* List Item Styling */
.top-menu ul li {
    display: inline-block; /* Inline styling for the list items */
}

/* Link Styling */
.top-menu ul li a {
    color: white;
    font-size: clamp(16px, 1.2vw, 24px); /* Fluid font size */
    font-family: "Rajdhani", sans-serif;
    font-weight: 600;
    font-style: normal;
    transition: 0.5s;
    text-align: center;
    padding: 14px 24px;
    text-decoration: none;
    text-transform: uppercase;
}

/* Hover State */
.top-menu ul li a:hover {
    color: #16C6C5;
    transition: 1s;
}

/* Active Class */
.top-menu ul li a.active {
    color: #16C6C5; /* Highlight active menu item */
}