@charset "utf-8";
/* CSS Document */

/******************************

COLOR PALETTE


[Table of Contents]

1. Fonts
2. Body and some general stuff
3. Header
	3.1 Logo
	3.2 Main Nav
4. Home
	4.1 Main Carousel
	4.2 Main Carousel Navigation
5. main Boxes
6. Page Section
7. Animation for Title and Content
8. About Us
9. Notices
10. Timings
	10.1 Left Side Of Timings
	10.2 Right Side Of Timings
11. Footer
	11.1 Footer Content
	11.2 Footer Copyright


******************************/

/***********
1. Fonts
***********/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800|Roboto:400,500,700');

/*********************************
2. Body and some general stuff
*********************************/

*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
body
{
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 400;
	background: #F1EAEA;
	color: #333;
}
div
{
	display: block;
	position: relative;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

p
{
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 1.4;
	font-weight: 400;
	color: #333;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p a
{
	display: inline;
	position: relative;
	color: inherit;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
a, a:hover, a:visited, a:active, a:link
{
	text-decoration: none;
	color: #778DA9;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p a:active
{
	position: relative;
	color: #FF6347;
}
p a:hover::after
{
	opacity: 0.2;
}
::selection
{
	background: #778DA9;
	color: white;
}
p::selection
{
	background: #778DA9;
	color: white;
}
h1{font-size: 36px;}
h2{font-size: 22px;}
h3{font-size: 18px;}
h4{font-size: 14px;}
h5{font-size: 11px;}
h1, h2, h3, h4, h5, h6
{
	font-family: 'Roboto', sans-serif;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}

::-webkit-input-placeholder
{
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #414141 !important;
}
:-moz-placeholder /* older Firefox*/
{
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #a5a5a5 !important;
}
::-moz-placeholder /* Firefox 19+ */ 
{
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #a5a5a5 !important;
} 
:-ms-input-placeholder
{ 
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #414141 !important;
}
::input-placeholder
{
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #414141 !important;
}
.form-control
{
	color: #db5246;
}
section
{
	display: block;
	position: relative;
	box-sizing: border-box;
}

.fill_height
{
	height: 100%;
}
.super_container
{
	width: 100%;
	overflow: hidden;
}
.prlx_parent
{
	overflow: hidden;
}
.prlx
{
	height: 130% !important;
}
.nopadding
{
	padding: 0px !important;
}

/*********************************
3. Header
*********************************/

.header
{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100% !important;
	height: 95px;
	background: #252257;
	z-index: 10;
	
}

.header_content
{
	width: 100%;
	height: 100%;
}

/*********************************
3.1 Logo
*********************************/


/* Resize the image */
.resized-image {
    width: 100px; /* Set the desired width */
    height: 95px; /* Maintain aspect ratio */
    display: block;
    margin: auto; /* Center the image */
	margin-right: 20px;
	margin-left: 20px;
	
}

/*********************************
3.2 Main Nav
*********************************/

.main_nav_container
{
	display:flex;
	margin-left: auto;
	padding-right: 63px;
}
.main_nav
{
	margin-top: 0px;
}
.main_nav_item
{
	position: relative;
    padding: 2px 16px;
}
.main_nav_item:last-child
{
	margin-right: 0px;
}
.main_nav_item a
{
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	text-transform: uppercase;
	font-weight: 700;
	color: #ffffff;
	text-decoration: none;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
	white-space: nowrap;
}
.main_nav_item a:hover
{
	color: #778DA9;
}

.main_nav_list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

/* Arrow style */
.arrow {
    margin-left: 5px;
    font-size: 12px; /* Arrow size */
    transition: transform 0.3s ease; /* Smooth transition for rotation */
}

/* Hide the dropdown menu by default */
.dropdown_menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: whitesmoke;
    min-width: 300px;
    border-radius: 5px;
}

.dropdown_menu a {
    display: block;
    padding: 5px;
	padding-left: 20px;
	padding-right: 20px;
    color: black;
	font-family: 'Open Sans', sans-serif !important;
    text-decoration: none;
	font-size: 14px; /* Smaller font size for dropdown links */
    font-weight: normal !important; /* Remove bold */
}
.dropdown_menu p {
    display: block;
    padding: 5px;
	margin-top: 10px;
	padding-left: 20px;
	padding-right: 50px;
    color: black;
	font-family: 'Open Sans', sans-serif !important;
    text-decoration: none;
	font-size: 17px; /* Smaller font size for dropdown links */
    font-weight: normal !important; /* Remove bold */
	line-height: 0.4 !important;
}

/* Show dropdown when hovering over the parent item */
.main_nav_item:hover .dropdown_menu {
    display: block;
}

/* Style the dropdown items on hover */
.dropdown_menu a:hover {
    background-color: #778DA9;
	color: #000000;
}

/* Media Query for Small Screens (e.g., Mobile) */
@media (max-width: 768px) {
    /* Main navigation container */
	body, html {
        overflow-x: hidden; /* Prevent horizontal scrollbars */
    }

    .main_nav_container {
        flex-direction: column; /* Stack navigation items vertically */
        padding-right: 20px; /* Reduce padding */
        align-items: flex-start;
		height: auto; /* Allow navbar height to adjust */
        padding: 10px 0; /* Add padding for text breathing room */
		width: 100%; /* Ensure navbar spans full width */
        overflow: hidden; /* Prevent inner content overflow */
    }

    /* Main navigation */
    .main_nav {
        margin-top: 10px; /* Add some margin for spacing */
		width: 100%;
    }

    /* Navigation list */
    .main_nav_list {
        flex-direction: column; /* Stack items vertically */
    }

    /* Navigation items */
    .main_nav_item {
        padding: 10px 0; /* Reduce padding */
        text-align: left; /* Align text to the left */
        width: 100%; /* Full width for better visibility */
    }

    .main_nav_item a {
		font-size: 12px; /* Smaller size for mobile */
        line-height: 1.5; /* Ensure line spacing for clarity */
    }

    /* Dropdown menu */
    .dropdown_menu {
        position: relative; /* Keep it inline with its parent */
        min-width: 100%; /* Make dropdown span the width of its container */
        padding: 10px 0; /* Add spacing inside dropdown */
    }

    .dropdown_menu a {
        padding: 10px; /* Adjust padding for easier touch targets */
        font-size: 14px; /* Smaller text for mobile */
    }
	.resized-image {
		width: 60px !important; /* Set the desired width */
    	height: 65px; /* Maintain aspect ratio */
		margin-right: 0px;
		margin-left: 0px;
	}

}

/* Media Query for Extra Small Screens (e.g., Very Small Mobile) */
@media (max-width: 480px) {
    .main_nav_container {
        padding-right: 10px; /* Further reduce padding */
        align-items: stretch; /* Stretch navigation container */
    }

    .main_nav_item {
        padding: 8px 0; /* Reduce padding even more */
    }

    .main_nav_item a {
        font-size: 30px; /* Further reduce font size */
    }

    .dropdown_menu a {
        font-size: 12px; /* Smaller dropdown font size */
    }
}

/*********************************
3.3 Hamburger
*********************************/

.hamburger_container
{
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 20px;
	display: none;
	cursor: pointer;
}
.hamburger_container i
{
	font-size: 45px;
	padding: 0px;
	color: white;
}
.hamburger_container:hover i
{
	color: #778DA9;
}

/*********************************
3.4 Menu
*********************************/

.menu_container {
    position: fixed;
    top: 0;
    right: -50vw;
    width: 75vw;
    height: 100vh;
    background: #FFFFFF;
    z-index: 12;
    transition: all 0.6s ease;
    visibility: hidden;
    opacity: 0;
    
    /* Enable scrolling */
    overflow-y: auto;  
    max-height: 100vh; /* Prevent overflow */
}

/* Optional: Hide scrollbar in Webkit browsers (Chrome, Safari) */
.menu_container::-webkit-scrollbar {
    width: 6px;
}

.menu_container::-webkit-scrollbar-thumb {
    background-color: #778DA9;
    border-radius: 10px;
}

.menu_container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.menu_container.active
{
	visibility: visible;
	opacity: 1;
	left: 0;
}
.menu
{
	position: absolute;
	top:80px;
	left: 0;
	padding-left: 15%;
}
.menu_list
{
	-webkit-transform: translateY(3.5rem);
	-moz-transform: translateY(3.5rem);
	-ms-transform: translateY(3.5rem);
	-o-transform: translateY(3.5rem);
	transform: translateY(3.5rem);
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 1000ms 600ms ease;
	opacity: 0;
}
.menu_container.active .menu_list
{
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	-o-transform: translateY(0px);
	transform: translateY(0px);
	opacity: 1;
}
.menu_item
{
	margin-bottom: 9px;
}
.menu_item a
{
	font-family: 'Open Sans', sans-serif;
	font-size: 26px;
	font-weight: 700;
	color: #3a3a3a;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.menu_item a:hover
{
	color: #778DA9;
}
.menu_close_container
{
	position: absolute;
	top: 36px;
	right: 79px;
	width: 21px;
	height: 21px;
	cursor: pointer;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.menu_close
{
	top: 9px;
	width: 21px;
	height: 3px;
	background: #3a3a3a;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.menu_close::after
{
	display: block;
	position: absolute;
	top: -9px;
	left: 9px;
	content: '';
	width: 3px;
	height: 21px;
	background: #3a3a3a;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.menu_close_container:hover .menu_close,
.menu_close_container:hover .menu_close::after
{
	background: #778DA9;
}

.submenu {
    display: none; /* Initially hidden */
    list-style: none;
    padding-left: 30px; /* Indentation */
}

.submenu li {
    margin-top: 5px;
}

.submenu li p {
	font-family: 'Open Sans', sans-serif;
    font-size: 22px !important;
	font-weight: 700;
    color: #555;
    text-decoration: none;
}

.submenu li p:hover {
    color: #778DA9;
}

.submenu li a {
    font-size: 22px !important;
    color: #555;
    text-decoration: none;
}

.submenu li a:hover {
    color: #778DA9;
}

/*********************************
4. Home
*********************************/

.home
{
	width: 100%;
	height: 100vh;
	background-color: white;
}

/*********************************
4.1 Main Carousel
*********************************/

.main_carousel_container
{
	width: 100%;
	height: 70%;
}
.main_carousel_slide
{
	width: 100%;
	height: 100%;
	background-color: #000000;
}
.main_carousel_slide_background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	filter: opacity(0.6); /* Makes the image 30% opaque */
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.main_carousel_slide_container
{
	width: 100%;
	height: 110vh;
}
.main_carousel_slide_content
{
	max-width: 80%;
	-webkit-transform: translateY(30px);
	-moz-transform: translateY(30px);
	-ms-transform: translateY(30px);
	-o-transform: translateY(30px);
	transform: translateY(30px);
}
.main_carousel_slide_content h1
{
	font-size: 60px;
	font-weight: 400;
	color: #FFFFFF;
}

.animated
{
	-webkit-animation-duration : 1s !important;
	animation-duration : 1s !important;
	-webkit-animation-delay : 500ms;
	animation-delay : 500ms;
}
.animate-out
{
	-webkit-animation-delay : 0ms;
	animation-delay : 0ms;
}
.hamburger_container i {
	font-size: 30px !important;
}

.custom-header {
	background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
	color: #fff; /* White text for contrast */
	padding: 10px 20px; /* Add some padding inside the rectangle */
	margin-bottom: 25%;
	border-radius: 15px; /* Make the corners rounded */
	display: inline-block; /* Fit the background tightly around the text */
}

.custom-header h1 {
	font-size: 35px;
}

/*********************************
4.2 Main Carousel Navigation
*********************************/

.main_carousel_nav
{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 50%;
	border-radius: 15px; /* Makes the rectangle rounded */
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(calc(-50% + 30px));
	width: 52px;
	height: 52px;
	background: #252257;
	z-index: 9;
	cursor: pointer;
}
.main_carousel_nav:hover
{
	background: #778DA9;
}
.main_carousel_nav:hover span
{
	color: #000000;
}
.main_carousel_nav span
{
	display: block;
	text-transform: uppercase;
	font-size: 20px;
	font-weight: 700;
	color: #FFFFFF;
	line-height: 1;
}
.main_carousel_left
{
	left: 4.32%;
}
.main_carousel_right
{
	right: 4.32%;
}

/*********************************
5. main Boxes
*********************************/

.main_boxes
{
	width: 100%;
	height: 0px;
	z-index: 9;
	padding-top: 0px;
}
.main_boxes_inner
{
	position: absolute;
	top: -160px;
	left: 0;
	width: 100%;
	transition: all 0.3s ease; /* Ensure smooth hover effects */
}
.main_box
{
	width: 100%;
	height: 130px;
	background: linear-gradient(to right, #030041, #251a5f);
	padding-left: 50px;
	margin-right: 20px;
	cursor: pointer;
	border-radius: 20px;
}
.main_box:hover
{
	background-color: #778DA9; /* Lighter color on hover */
	color: black;
    transform: scale(1.05); /* Slight enlargement */
}

.main_box:active {
    transform: scale(0.95); /* Slightly smaller on click */
}

.main_box img
{
	width: 62px;
	height: auto;
	margin-top: -6px;
}
.svg path
{
	fill: #778DA9;
}
.main_box svg
{
	width: 50px;
	height: auto;
}
.main_box:hover svg path
{
	fill: #979999;
}
.main_box_content
{
	padding-left: 13px;
	padding-top: 11px;
	margin-top: -6px;
}
.main_box_title
{
	font-size: 28px;
	font-weight: 500;
	color: #e2ccdf;
	margin-bottom: 7px;
}
.main_box_link
{
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	color: #e2ccdf;
	padding-left: 3px;
}

.main_box_link_wrapper {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Keep the original text color */
    display: block; /* Ensures the anchor covers the entire box */
	width: 33%;
	height: 130px;
	padding-left: 20px;
	padding-right: 20px;
	cursor: pointer;
}

.main_box:hover .main_box_title {
    color: white; /* New color on hover */
}

.main_box:hover .main_box_link {
    color: white; /* New color on hover */
}

/*********************************
6. Page Section
*********************************/

.page_section
{
	padding-top: 40px;	
	
}

.section_title h1
{
	display: block;
	color: #1a1a1a;
	font-weight: 500;
	padding-top: 24px;
}
.section_title h1::before
{
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 55px;
	height: 4px;
	content: '';
	background: #252257;
}

/*********************************
7. Animation for Title and Content
*********************************/

/* Animation for title */
.animate-main {
    opacity: 0;
    transform: translateY(-20px); /* Starts slightly above */
    transition: all 0.8s ease-out;
}

.animate-main.active {
    opacity: 1;
    transform: translateY(0); /* Moves to normal position */
}

/* Animation for content*/
.animate-group {
    opacity: 0; /* Initially hidden */
    transform: translateY(50px); /* Start below */
    transition: all 0.8s ease-out;
}

.animate-group.active {
    opacity: 1;
    transform: translateY(0);
}

/*********************************
8. About Us
*********************************/

/* Splitting About Section */

#aboutDetails {
	padding-top: 50px;
	margin-top: -50px;
}

.scroll-adjust-about {
    position: relative;
    top: 50px; /* Adjust based on your header height */
}

.container-fluid {
	margin-top: 30px;
}

#about_text {
    padding-left: 30px; /* Add padding to the right */
	padding-right: 20px;
	padding-top: 20px;
    background: linear-gradient(to bottom, #081122, #1B263B); /* Change the background color */
    color: #778DA9; /* Optional: Set text color for contrast */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add subtle shadow */
	padding-bottom:48px;
}

.about_img_section
{
	width: 100%;
	height: 100%;
	padding-top: 0px !important;
	padding-bottom: 0px !important;
	background: #778DA9;
}

.image-container {
    position: relative; /* Enable positioning for child elements */
    text-align: center; /* Center align text and button */
	width: 100%; /* Ensure it spans its parent container */
    height: 100%; /* Set an explicit height, or use auto for dynamic sizing */
	overflow: hidden !important;
}

.image-container img {
	width: 100%; /* Ensure the image stretches to fill the container's width */
    height: 100% !important; /* Ensure the image stretches to fill the container's height */
    object-fit: cover; /* Force the image to stretch and fill both dimensions */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Add shadow */
}

.shadow-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80%; /* Covers one-fourth of the image height */
    background: linear-gradient(to top, rgba(0, 0.9, 0.9, 1), rgba(0, 0, 0, 0));
    pointer-events: none; /* Ensure it doesn't block interactions with other elements */
}

#history_button {
    position: absolute; /* Place the button over the image */
    bottom: 5px; /* Position at the bottom of the image */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for centering */
    padding-bottom: 20px; /* Add space around the button */
}

#history_button a {
	color: white;
}

/* Styling for the Know More button */
#knowMoreButton {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #101929;
    color: white;
    cursor: pointer;
    font-size: 18px;
    text-align: center;
	border-width: 3px;
    border-radius: 15px;
	border-color: white;
    transition: background-color 0.3s ease;
}

#knowMoreButton:hover {
    background-color: #778DA9;
	color: #000000;
	border-color: #000000;
}

/* Hidden class to hide elements */
.hidden {
    display: none !important;
}

/* Flex layout for the details section */
#detailsSection {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: space-between;
    margin-top: 20px;
    margin-left: -1px;
    border: 1px solid #ddd;
    padding: 20px;
    background-color: #1B263B;
}

/* Styling for each section (Membership, Faculty) */
.half-section {
    flex: 1;
    min-width: 300px; /* Prevents them from becoming too small */
    text-align: left;
    padding: 20px;
    margin: 15px;
    background-color: #a7bfdf;
    border: 1px solid #ccc;
    font-size: 18px;
    font-weight: bold;
}

/* Ensure they stack on smaller screens */
@media (max-width: 768px) { /* Adjust breakpoint as needed */
    #detailsSection {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center the sections */
    }

    .half-section {
        width: 100%; /* Full width when stacked */
        max-width: 500px; /* Optional: Prevent them from being too wide */
		margin-left: -5px;
    }
}

.inner-list {
	margin-left: 30px;  /* Adjust the value to get the desired indentation */
}

/* General Styling */

.about.page_section {
    background-color: #F1EAEA;
    color: #000000;
    font-family: 'Open Sans', sans-serif;
    overflow: hidden;
}

#about_text h2 {
	color: #778DA9; /* Replace with desired color */
}

#about_text p {
    color: white; /* Replace with desired color */
    font-size: 16px; /* Optional: adjust font size */
}

/* Button Style */

#about_text history_button {
	padding-left: 20px;
	padding-bottom: 60px;
}

.outline-button {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: white;
    border: 2px solid white;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 1.6rem;
    margin-top: 20px;
	margin-bottom: 60px;
    transition: background 0.3s ease, color 0.3s ease;
}

.outline-button:hover {
    background: #778DA9;
    color: black !important;
	border: 2px solid black;
}

.outline-button i {
    margin-left: 8px;
}

@media (max-width: 768px) {
    .content-section {
        flex-direction: column; /* Stack content vertically */
        text-align: center; /* Center align text and image */
    }
    .image-container img {
        max-width: 800%; /* Ensure the image adjusts to smaller screens */
		height:145%;
		margin-top: -120px;
    }
	.shadow-overlay {
		height: 120%; /* Covers one-fourth of the image height */
		margin-bottom: -140px;
	}
	.outline-button {
		margin-bottom: 0px;
	}
}

/*********************************
9. Notices
*********************************/

#text-box {
    width: 80%; /* Adjust width as needed */
    height: 390px;
    background: linear-gradient(to bottom, #09131f, #1B263B);
    margin: 50px auto; /* Center the box horizontally and add spacing on top */
    padding: 20px; /* Inner padding for text */
    border: 3px solid black; /* Solid border for the box */
    border-radius: 10px; /* Optional: rounded corners */
    text-align: left; /* Left-align the text */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow */
    font-family: Arial, sans-serif; /* Clean font */
    line-height: 0.8 !important; /* Better readability */
    overflow-y: auto; /* Enable vertical scrolling if content overflows */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Text styling */
#text-box p {
    display: block; /* Ensures each notice is displayed on a new line */
    margin-bottom: 15px; /* Spacing between paragraphs */
    color: #ffffff; /* Base text color */
    font-size: 20px; /* Base text size */
    transition: color 0.3s, font-size 0.3s ease; /* Smooth hover transition */
	line-height: 1.8;
}

/* Hover effect for links */
#text-box p:hover {
    color: #778DA9 !important; /* Change color on hover */
    font-size: 21px !important; /* Enlarge text on hover */
    transform: scale(1.0); /* Slight scale animation */
}

#notices_head {
	margin-top: 50px;
	padding-bottom: 0px;
	margin-bottom: -20px;
}
#notices {
	padding-top: 25px;
	margin-top: -25px;
} 


/*********************************
10. Timings
*********************************/

.scroll-adjust-timings {
    position: relative;
    top: 55px; /* Adjust based on your header height */
}

#timings {
	padding-top: 20px !important;
}

#timings_head {
	margin-top: 30px;
	padding-bottom: 30px;
}

/*********************************
10.1. Left Side of Timings Section
*********************************/

.timingsBoard
{
	width: 100%;
	margin-bottom: 50px;
	background-color: #1B263B;
}
/* Container for the entire section */
#timings-section {
	width: 80%; /* Set the width of the section */
	margin: 0 auto; /* Center the section horizontally */
	padding: 20px;
}
  
/* Container for timings */
.timings-container {
	margin-left: -60px;
	margin-bottom: 20px; /* Space between timings and the textbox */
}

/* Text displaying the timings */
.timings {
    font-size: 18px;
    color: white;
    margin-top: 20px;
    margin-left: 20px;
    line-height: 1.5; /* Adjusted for better readability */
    word-wrap: break-word; /* Ensures words wrap properly */
    white-space: normal; /* Allows text to wrap naturally */
}

#first-timing {
	margin-top: 30px !important;
}

/* Style for the entire table section */
#timmings-table {
	width: 100%;
	margin: 20px auto;
	padding: 20px;
	border: 1px solid #1B263B;
	border-radius: 8px;
	background-color: #1B263B;
  }
  
/* Style for the table */
table {
	width: 110%;
	border-collapse: collapse; /* Ensures table cells have no space between them */
	border: 2px solid #000000; /* Change the border color here */
}
  
th, td {
	padding: 10px;
	text-align: left;
	border: 1px solid #000000;
	background-color: white;
}
  
th {
	background-color: #09131f;
	color: #fff;
}
  
/* Header for Timings section */
.timings-header {
	font-size: 24px;
	font-weight: bold;
	color: white;
	margin-top: 0px;
	margin-bottom: 5px;
	margin-left: 20px;
  }

/*********************************
10.2. Right Side of Timings Section
*********************************/

.calendar-section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
	max-height: 600px;
    position: relative;
}

.calendar_content p {
	font-size: 24px;
	font-weight: bold;
	color: #000000;
	margin-top: 10px;
	align-self: flex-start;
	
}

.calendar-section .text {
    display: block;
    justify-self: start;   /* Controls horizontal alignment in the item’s own container */
    align-self: start;   /* Prevents vertical centering */
    font-size: 2rem;
    color: white;
    opacity: 0; /* Start invisible */
    transform: translateY(50px); /* Start slightly below */
    transition: all 1s ease; /* Smooth animation */
    position: absolute; /* Position relative to the section */
    top: 50; /* Align to top */
    left: 50; /* Align to left */
}

.calendar-section .text.visible {
    opacity: 1; /* Fade in */
    transform: translateY(0); /* Move into place */
}

/* Calendar Container */
.calendar-container {
    width: 90%;
	height: 90%;
    background: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    text-align: center;
    padding: 20px;
	margin-bottom: 50px;
}

/* Calendar Header */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.calendar-header button {
    background: #09131f;
    color: white;
    border: none;
    padding: 18px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 20px;
    line-height: 1; /* Ensure line-height doesn't cause expansion */
    overflow: hidden; /* Prevent any text overflow */
    transition: color 0.3s ease, transform 0.3s ease; /* Smooth text transition */
}

.calendar-header button:hover {
    color: white;
}

.calendar-header button span {
    display: inline-block;
    transition: transform 0.3s ease; /* Smooth text enlargement */
}

.calendar-header button:hover span {
    transform: scale(1.4); /* Enlarge the text only */
}


.calendar-header h3 {
	font-size: 20px;
    margin: 0;
    color: #333;
}

/* Weekday Labels */

/* Empty cells for alignment */
.empty-cell {
    width: 100%;
    height: 100%;
    background-color: #f4f4f4; /* Optional, gives a subtle grid look */
    border: 1px solid transparent; /* Matches date cells */
}

/* Date cells */
.date {
    text-align: center;
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #fff;
}

.calendar-days {
	font-size: 16px;
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7 columns for the 7 days */
    gap: 5px; /* Optional spacing between labels */
    
}

.weekday {
    font-weight: bold;
    text-align: center; /* Centers the text */
    color: #333;
}

/* Calendar Grid */
#calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    position: relative; /* Ensure positioning works for tooltips */
}

/* Day Styles */
#calendar-grid div {
	font-size: 18px;
    padding: 10px 0;
    background: #fff; /* White background for better visibility */
    color: #333; /* Dark text */
    border-radius: 5px;
    text-align: center;
    font-weight: bold; /* Makes the text stand out */
    border: 1px solid #ddd; /* Adds a subtle border */
}

#calendar-grid .important {
    background: #e74c3c;
    color: white;
    cursor: pointer;
}

/* Tooltip Styles */
#calendar-grid .important::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    background: #09131f;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.9rem;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1000;
	margin-left: 5px;
	margin-right: 5px;
}

#calendar-grid .important:hover::after {
    visibility: visible;
    opacity: 1;
}

.calendar_section
{
	width: 100%;
	height: 100%;
	padding-top: 0px !important;
	padding-bottom: 0px !important;
	background: #778DA9;
}
.calendar_content
{
	width: 522px;
}
.calendar_background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	opacity: 0.23;
}

/*********************************
11. Mini Sections
*********************************/

#generalinfo {
	margin-top: 0px;
	margin-bottom: 30px;
}

#generalinfo_head {
	padding-bottom: 30px;
}

.section {
	background: white;
	padding: 2rem;
	margin-bottom: 2rem;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
  
.section h2 {
	color: #1B263B;
	font-size: 26px;
	margin-bottom: 1.5rem;
	border-bottom: 2px solid #09131f;
}

.section h3 {
	font-size: 20px;
}

.section ul {
	line-height: 1.8rem;
}
  
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	margin-top: 2rem;
}
  
.card {
	background: #a7bfdf;
	padding: 1.5rem;
	border-radius: 8px;
	transition: transform 0.3s;
}
  
.card:hover {
	transform: translateY(-5px);
}

/* Button styling */

.know-more {
    position: absolute; /* Position it relative to the section */
    top: 10px; /* Adjust distance from the top */
    right: 20px; /* Adjust distance from the right */
    background-color: #1B263B; /* Button background color */
    color: white !important; /* Text color */
    text-decoration: none; /* Remove underline */
    border-radius: 25px; /* Rounded rectangle shape */
    padding: 5px 10px; /* Button padding */
    font-size: 12px; /* Font size */
    font-weight: bold; /* Bold text */
    cursor: pointer; /* Pointer cursor on hover */
    text-transform: uppercase; /* Capitalize text */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    transition: background-color 0.3s, transform 0.3s; /* Smooth hover effects */
}

/* Button hover effect */
.know-more:hover {
    background-color: #778DA9; /* Lighter shade on hover */
    transform: scale(1.05); /* Slight enlargement */
}

/* Arrow styling */
.know-more .arrow {
    font-size: 18px; /* Size of the arrow */
    margin-left: 8px; /* Space between text and arrow */
}

@media (max-width: 400px) {
    .know-more {
        width: 60px; /* Adjust button size */
        height: 30px;
        padding: 0 15px; /* Remove extra padding */
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20%; /* Circular button */
        text-transform: none; /* Remove uppercase transformation */
        font-size: 20px; /* Hide text without affecting arrow */
		margin-left: 10px !important;
    }

    .know-more .arrow {
        font-size: 0px; /* Make the arrow visible */
    }
}
@media (max-width: 420px) {
    .know-more {
        width: 60px; /* Adjust button size */
        height: 30px;
        padding: 0 15px; /* Remove extra padding */
        display: flex;
        align-items: center;
        justify-content: center;
		font-weight: normal !important;
        border-radius: 20%; /* Circular button */
        text-transform: none; /* Remove uppercase transformation */
        font-size: 10px !important; /* Hide text without affecting arrow */
		margin-left: 10px !important;
    }

    .know-more .arrow {
        font-size: 0px; /* Make the arrow visible */
    }
}

@media (min-width: 421px) {
    .know-more .arrow {
        font-size: 18px; /* Restore font size */
    }
}

/*********************************
12. Footer
*********************************/

.footer
{
	width: 100%;
	background: #252257;
}
.footer .section_title h1
{
	color: #FFFFFF;
}

/*********************************
12.1 Footer Content
*********************************/

.footer_content 
{
	padding-top: 50px;
	padding-bottom: 83px;
	padding-right: 50px;
	border-bottom: solid 2px #979999;
}
.footer_content .logo_container
{
	padding-left: 0px;
}
.footer_content .logo span
{
	color: #FFFFFF;
}
.footer_column_title
{
	font-size: 24px;
	font-weight: 500;
	color: #FFFFFF;
	padding-top: 15px;
	padding-left: 170px;
	white-space: nowrap;
}
#footer-img
{
	margin-left: 50px;
}
#footer-logo-text1 {
	margin-right: -350px !important;
}
#footer-logo-text2 {
	padding-right: 100px;
	margin-right: -50px;
	margin-right: -350px !important;
}
.footer_column_content
{
	margin-top: 32px;
	padding-left: 200px;
	padding-right: 500px;
	white-space: nowrap;
}
.footer_list_item
{
	margin-bottom: 11px;
}
.footer_list_item a
{
	font-size: 18px;
	color: #979999 !important;
	margin-left: -30px;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.footer_list_item a:hover
{
	color: #778DA9;
}
.footer_contact_item
{
	font-size: 18px;
	font-weight: 400;
	color: #979999 !important;
	margin-bottom: 22px;
	margin-left: -30px;
	display: flex; /* Aligns the icon and text horizontally */
    align-items: center; /* Centers vertically */
    gap: 10px; /* Adds space between the icon and text */
	
}
.footer_contact_item:last-child
{
	margin-bottom: 0px;
}
.footer_contact_icon
{
	display: inline-block;
	width: 24px;
	height: 24px;
	vertical-align: middle;
	margin-right: 10px;
	flex-shrink: 0; /* Prevents the icon from shrinking */
}
.footer_contact_icon img
{
	width: 100%;
}

.footer_contact_text br {
    display: block; /* Ensures the emails are displayed in different lines */
}

/* Resize the image */
.resized-logo {
    width: 300px; /* Set the desired width */
    height: 260px; /* Maintain aspect ratio */
    display: block;
    margin: auto; /* Center the image */
	margin-top: -15px;
}

.footer_logo_text {
	font-size: 22px;
	font-weight: 500;
	color: #FFFFFF;
	padding-top: 15px;
	padding-left: -40px;
}

/*********************************
12.2 Footer Copyright
*********************************/

.footer_bar
{
	color: white;
	padding-top: 19px;
	padding-bottom: 19px;
}