*{
	padding:0px;
	margin:0px;
}

/* Body of the website */
body, html
{
	font-family:roboto, san-serif, arial;
	background :#f0f3fa;
	
}

/* Basic styles for the content */
.content {
    padding: 20px;
    text-align: center;
}

/* This section is for Popup Notification ! */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Dark transparent background */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Make sure the popup is on top of the content */
    visibility: hidden; /* Initially hide the popup */
    opacity: 0; /* Make it fully transparent initially */
    transition: opacity 0.5s ease, visibility 0s linear 0.5s; /* Smooth transition for visibility */
}

/* Popup content styles */
.popup-content {
    width: 50%; /* 50% of the screen width */
    height: 50%; /* 50% of the screen height */
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Message styles */
.popup-message {
    font-size: 35px;
	font-weight: bold;
	margin-top: 6px;
    margin-bottom: 6px;
	color:rgb(44, 110, 44);
}
.popup-message2 {
    font-size: 14.5px;
    margin-bottom: 0px;
	color:rgb(0, 0, 0);
	margin-left:25px;
	margin-right:25px;
}
.popup-image{
	width:60%;
	height:60%;
	border-radius: 5px;
	
}

/* Button styles */
.ok-btn {
    background-color: #f44336;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
	margin-top:200px;
}

.ok-btn:hover {
    background-color: #d32f2f;
}

/* Show the popup with smooth transition */
.popup.show {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s ease, visibility 0s linear 0s;
}





/*This code is for Home page Slider*/

.frame{
	width: 1400px;
	height:600px;
	margin:auto;
	padding-top:20px;
	box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
	/*border: 10px solid #F36804;
	border-radius: 15px;*/
	overflow:hidden;
}
.slider{
	
	display:flex;
	transition: all 2s ease; /* Update: Slower and smoother transition with a duration of 2 seconds */
	
        
	
}
img.slide{
	width:100%;
	height:100%;
	object-fit:cover;
	/*animation:slide 60s infinite;*/
	/*animation:slide 10s linear forwards;*/
}

/* @keyframes slide {
    0%, 16.66% {
        transform: translateX(0);
    }
    33.33% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(-200%);
    }
    66.66% {
        transform: translateX(-300%);
    }
    83.33% {
        transform: translateX(-400%);
    }
    100% {
        transform: translateX(-500%);
    }
}*/


button {
    position: absolute;
    top: 55%;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 1;
	margin:auto;
}
button.prev {
    left: 60px;
}

button.next {
    right: 60px;
}

/* contentt */
.content{
	display: flex;
    flex-direction: row; 
	justify-content: space-between;
    align-items: flex-start;
	width: 91%;
	float:left;
	height:420px;
	border:8px solid #F36804;
	border-radius: 10px;
	padding:10px;
	text-align:justify;
	margin-left:40px;
	margin-top:40px;
	font-size: 0.9em;
    color: #555;
	margin-bottom: 15px;
	margin-left: 60px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	background:#fff;
	
}
.chairman-image{
	border:3px solid #F36804;
	float:right;
	width:20%;
	height:440px;
	margin-right:40px;
	margin-top:40px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	overflow: hidden;
    border-radius: 10px; /* Slightly rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Initial shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
	position: relative;
}
.text-overlay {
            position: absolute;
            color: #fff;
            font-size: 11.6px;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Add a shadow for better visibility */
            text-align: center;
            padding: 10px 10px;
            background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
            border-radius: 5px; /* Rounded corners for the text background */
			margin-top:330px;
			width:92%;
}
/*.chairman{
	width:95%;
	height:440px;
	object-fit:cover;
	width: 100%;
            height: 100%;
            object-fit: cover;
transition: transform 0.3s ease; } */

.chairman{			
	margin-top:10px;
	width:80%;
	height:400px;
    
}
.chairman-image:hover img {
            transform: scale(1.1); /* Zoom in the image slightly */
}

.heading{

	flex-direction: column; 
	font-family: 'Georgia', serif; /* Use a different font for headings */
    font-size: 1.8em;
    text-align: center; /* Centered heading */
    text-transform: uppercase; /* Make the text uppercase */
    letter-spacing: 1px; /* Add some spacing between letters */
	color:#F36804;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 
	
}

.paragraph{
margin-right:40px;
	
}










/*This Part is for the top news section*/	
.widthA-100{
	width: 100%;
    float: left;
	
}
.container1 {
	padding-left:40px;
    margin: 0px auto;
}


.top-header{
	
	background :black;
	padding:4px 0px;
	border-bottom:1px solid #3131315e;
	
}

.news-list{
	background:#F36804;
	color:#fff;
	border: 5px solid #F36804;
	border-radius: 10px;
	font-size:15px;
	padding-left :14px;
	padding-right :14px;
}
.headquote{
	font-size: 12px;
	color:#fff;
	width:88%;
	cursor: pointer;
	
}


/* this section is for logo, home, aboutus ...*/
.widthB-100{
	width: 100%;
    float: left;
	
}
.container2 {
	padding-left:40px;
    margin: 0px auto;
}
.header-menu{
		position:relative;
		box-shadow: 0px 2px 5px 0px #00000036;
}
.logo{
		width:fit-content;
		float:left;
	
}
.logo img {
	padding-top:0px;
    width: 90px; /* set the desired width */
    height: 80px; /* set the desired height */
}
ul.main-menu{
		float:right;
		list-style:none;
		margin-top:20px;
		padding-right:30px;
		
}
ul.main-menu a{
		font-weight:600;
		color:#3a3a3a;
		font-size:16px;
		text-decoration:none;
		
}
ul.main-menu li{
	float:left;
	padding:12px 12px;
	
}
.school-name{
	
	margin-right:110px;
	padding:17px;
	font-family: 'Georgia', serif; /* Use a different font for headings */
    font-size: 19px;
    text-align: center; /* Centered heading */
    text-transform: uppercase; /* Make the text uppercase */
    letter-spacing: 1px; /* Add some spacing between letters */
	color:Black;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 
	float:left;
}



/* This section is for middle photos carosoul*/
.slider-container-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 530px;
	
}

.slider-container {
	position: relative;
	width: 99%;
	max-width: 93%;
	margin-top:30px;
	overflow: hidden;
	
}

.slider-wrapper {
	display: flex;
	/*transition: transform 0.5s ease-in-out;*/
	transition: all 1.5s ease; /* Update: Slower and smoother transition with a duration of 1.5 seconds */
	
}

.slider-item {
	min-width: 25%;
	box-sizing: border-box;
	padding: 10px;
}

.slider-item img {
	width: 100%;
	height: 500px; /* Highlighted change: Increased the height of the photos */
	object-fit: cover; /* Ensures the image scales proportionally */
	border:4px solid #000000;
	border-radius: 7px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}

.slider-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	border: none;
	padding: 10px 20px;
	cursor: pointer;
	border-radius: 50%;
	font-size: 18px;
	z-index: 10;
}

.slider-button:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

.slider-button-left {
	left: 10px;
}

.slider-button-right {
	right: 10px;
}





/* this part is for middle news section*/
.width-100{
	width: 100%;
    float: left;
	
}
.container {
	padding-left:40px;
    margin: 0px auto;
}


.margin-top-50{
	margin-top:50px;
}
.width-33{
	
	
	width:32%;
	float:left;
	
}
.latest-news{
/*	border:3px solid #F36804;  
	border-radius: 10px;         */
	margin-left:10px;
	margin-right:10px;
	background:#fff;
	padding:20px;
	height:250px;
	margin-bottom:30px;
	object-fit: cover;
	overflow:hidden;

}

.heading-section{
	width:95%;
	float:left;
	border-bottom:1px solid #cfcfcf;
	padding-bottom:0px;
	margin:0px;
	margin-bottom:15px;
	border-radius:5px;
	padding-top:15px;
	padding-left:10px;
	background:#1D75DA;
	color:#fff;
}
.head-title{
	margin:0px;
	padding:0px;
	font-size:16px;
	font-weight:600;
	padding-bottom:5px;
}
.leatest-news ul{
	padding:0px;
	list-style:none;
	line-height:40px;
}
img {
    width: 30px;
    height: 30px;
}
.latest-news-ul{
	padding:40px;
	list-style:none;
	height:200px;
	line-height:40px;
	
}
.latest-news-ul a{
	text-decoration:none;
	color:black;
	font-size:15px;
	
}






/* this  is the styling of event section */
.event-list{
/*	border:3px solid #F36804;
	border-radius: 8px;			*/
	margin-left:10px;
	margin-right:10px;
	background:#fff;
	padding:20px;
	height:250px;
	margin-bottom:30px;
	overflow: auto;
}
.upcoming-event-list{
	padding:0px;
	list-style:none;
}
.upcoming-event-list li{
	width:100%;
	float:left;
	margin-bottom:15px;

}
.event-date{
	background:#1D75DA;
	width:30px;
	float:left;
	text-align:center;
	font-size:14px;
	color:#fff;
	padding:8px;
	margin-right:10px;
}




/* this is the styiling of notice board */
.notice-board{
/*	border:3px solid #F36804;
	border-radius: 8px;			*/
	margin-left:10px;
	margin-right:10px;
	background:#fff;
	padding:20px;
	height:250px;
	margin-bottom:30px;
	overflow: auto;
	
}
.notice-board-list{
	padding:5px;
	list-style:none;
	line-height:30px;
}
.notice-board-list li{
	width:100%;
	float:left;
	margin-bottom:15px;
}


/* This section is for designing the drop down menu*/
ul{
	list-style:none;
	/*background:pink;*/
}
ul li{
	display:inline-block;
	position:relative;
}

ul li a{
	font-size:3px;
	display: block;
	text-decoration:none;
	text-align:left;
}

ul li ul.dropdown li{
	
	width:120px;
	height:15px;
	color:#fff;
	border:0.5px solid #fff;
	display:block;
	background:#fff;
	
}
ul li ul.dropdown {
	width:50%;
	display:block;
	position:absolute;
	z-index:999;
	display:none;
}
ul li a:hover{
	border:2px solid #F36804;
	border-radius: 7px;
	
}
ul li:hover ul.dropdown{
	display:block;
}





/* principal's images */
/*.principal-image{
	
	float:left;
	margin-left:30px;
	width:95%;
	display:flex;
	height:220px;
	
	margin-right:40px;
	margin-top:40px;
	
	overflow: hidden;
	position: relative;
}
.principal{
	margin-right:10px;
	margin-left:10px;
	border:5px solid #F36804;
	border-radius: 100px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	width: 100%;
    height:90%;
    object-fit: cover;
	transition: transform 0.3s ease;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.principal-image:hover .principal {
            transform: scale(1.05);
}
*/

.principal{
	margin-top:20px;
	width:100%;
	float:left;
	background:#fff;
	padding:5px;
	color:#fff;
	font-size:13px;
	line-height:20px;
	box-shadow: 0px 6px 5px 0px #00000036;
	
}
.principal-row{
	width: 90%;
	margin:auto;
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	justify-content:space-between;
	margin-left:80px;
	margin-bottom:20px;
	
}
.principal-col{
	flex-basis:23%;
	padding:8px;
	color:#000000;
	position: relative; /* Ensure relative positioning for hover effect */
    overflow: hidden; /* Hide any overflow to keep image within bounds */
	
}


.principal-img{
	
	width:160px;
	height:160px;
	margin-bottom:10px;
	border:7px solid #F36804;
	border-radius:150px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	padding:3px;
}
.principal-col:hover .principal-img {
    transform: scale(1.05); /* Slightly enlarge the image on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Add shadow on hover */
}

.principal-heading{
	color:#000000;
	text-align:center;
	font-family: 'Georgia', serif; 
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 
	font-size:2.2em;
	padding:2px;
	margin-top:30px;
}
.principal-col h3{
	color:#D20103;
	text-transform: uppercase;
	
	font-family: 'Montserrat', sans-serif;
}
.principal-col p{
	color:#000000;
	text-transform: uppercase;
	font-size:0.8em;
	font-family: 'Georgia', serif;
	
	
}

.principal-content{
	width: 87%;
	float:left;
	background:#fff;
	border:3px solid #F36804;
	border-radius: 10px;
	padding:20px;
	text-align:justify;
	margin-left:50px;
	margin-top:20px;
	font-size: 0.9em;
    color: #555;
	margin-bottom: 30px
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	
}
.principal-heading{
	font-family: 'Georgia', serif; /* Use a different font for headings */
    text-align: center; /* Centered heading */
    text-transform: uppercase; /* Make the text uppercase */ /* Add some spacing between letters */
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 
}







.management{
	width:91%;
	float:left;
	
	
	border:3px solid #F36804;
	border-radius: 10px;
	padding:20px;
	text-align:justify;
	margin-left:50px;
	margin-top:20px;
	

	margin-bottom: 30px
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.management-heading{
	margin-top:15px;
	font-size: 1.2em;
	    color: black;
	font-family: 'Georgia', serif; /* Use a different font for headings */
    text-transform: uppercase; /* Make the text uppercase */ /* Add some spacing between letters */
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); 
}
.management-subheading{
	font-size: 0.9em;
	color: #555;
	
}

/* This is the footer Section */


/*footer{
	width:100%;
	position:absolute;
	bottom:0;
	background:black;
	color:#fff;
	padding:50px 0px 30px;
	border-top-left-radius:125px;
	font-size:13px;
	line-height:20px;
	
}*/
.footer-sec{
	margin-top:50px;
	width:100%;
	float:left;
	background:black;
	border-top-left-radius:125px;
	padding:50px 0px 30px;
	color:#fff;
	font-size:13px;
	line-height:20px;

}
.row{
	width: 90%;
	margin:auto;
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	justify-content:space-between;
	margin-left:100px;
}
.col{
	flex-basis:20%;
	padding:10px;
	color:#fff;
	
}
.logo-bottom{
	width:100px;
	height:100px;
	margin-bottom:10px;
	
	
}
.col h3{
	margin-top:20px;
	width:fit-content;
	margin-bottom:40px;
	position:relative;
	text-transform:uppercase;
}
.follow-us{
	height:40px;
	width:50px;
}
.col a{
	text-decoration:none;
	color:#fff;
}




/* this section is for banner image */
.banner{
	margin-top:25px;
	width:100%;
	float:left;
	background:#F28537;
	padding:10px 0px 10px;
	color:#fff;
	font-size:13px;
	line-height:20px;
	box-shadow: 0px 6px 5px 0px #00000036;
	position:relative;

	
}
.banner-row{
	width: 90%;
	margin:auto;
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	justify-content:space-between;
	margin-left:70px;
	
}
.banner-col{
	
	flex-basis:20%;
	padding:20px;
	color:#fff;
	text-align:justify;	
	position: relative; /* Ensure relative positioning for hover effect */
    overflow: hidden; /* Hide any overflow to keep image within bounds */
	text-align:center;
	
}

.banner-img{

	width:200px;
	height:200px;
	margin-bottom:10px;
	border-radius:100px;
	border:4px solid #6EB3C4;
	background:#fff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Initial shadow */
   transition: transform 0.3s ease, box-shadow 0.3s ease;
	
		
}
.banner-col:hover .banner-img {
    transform: scale(1.05); /* Slightly enlarge the image on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Add shadow on hover */
}

.banner-col h3{
	font-size:1.2em;
	margin-top:5px;
	width:fit-content;
	margin-bottom:5px;
	position:relative;
	text-transform:uppercase;
	color:#312E2F;
	font-family: 'Georgia', serif;
	margin: 0 auto; /* The block element will be centered horizontally */
	
}	
.banner-col p{
	font-size:0.9em;
}





/*This is the Excellence Award Section */
.award{
	margin-top:50px;
	width:100%;
	float:left;
	background:#6EB3C4;
	padding:10px 10px 10px;
	color:#fff;
	font-size:13px;
	line-height:20px;
	box-shadow: 0px 6px 5px 0px #00000036;
}
.award-row{
	width: 90%;
	margin:auto;
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	justify-content:space-between;
	margin-left:110px;
	margin-top:20px;
	
}
.award-col{
	flex-basis:31%;
	padding:10px;
	color:#fff;
	position: relative; /* Ensure relative positioning for hover effect */
    overflow: hidden; /* Hide any overflow to keep image within bounds */
	
	
}
.award-img{
	
	width:300px;
	height:220px;
	margin-bottom:10px;
	border:4px solid #fff;
	border-radius:10px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.award-col:hover .award-img {
    transform: scale(1.05); /* Slightly enlarge the image on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Add shadow on hover */
}

.award-heading{
	color:Black;
	text-align:center;
	font-family: 'Georgia', serif; 
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 
	font-size:2.2em;
	padding:15px;
}
.award-col h3{
	color:#AE165F;
	text-transform: uppercase;
	
	font-family: 'Montserrat', sans-serif;
}
.award-col p{
	color:#494848;
	text-transform: uppercase;
	font-size:1.3em;
	font-family: 'Georgia', serif;
	padding-top:5px;
	
}




	

/* this section is for gallery section */
.gallery{
	margin-top:50px;
	width:100%;
	float:left;
	background:#DA79BD;
	padding:10px 10px 10px;
	color:#fff;
	font-size:13px;
	line-height:20px;
	box-shadow: 0px 6px 5px 0px #00000036;
}
.gallery-row{
	width: 90%;
	margin:auto;
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	justify-content:space-between;
	margin: 0 auto; /* The block element will be centered horizontally */
	margin-top:10px;
	
}
.gallery-col{
	flex-basis:23%;
	padding:10px;
	color:#fff;
	position: relative; /* Ensure relative positioning for hover effect */
    overflow: hidden; /* Hide any overflow to keep image within bounds */
	
}


.gallery-img{
	
	width:95%;
	height:180px;
	margin-bottom:10px;
	border:3px solid #fff;
	border-radius:10px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery-col:hover .gallery-img {
    transform: scale(1.05); /* Slightly enlarge the image on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Add shadow on hover */
}

.gallery-heading{
	color:#000000;
	text-align:center;
	font-family: 'Georgia', serif; 
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 
	font-size:2.2em;
	padding:2px;
	margin-top:30px;
	text-transform: uppercase;
}
.gallery-col h3{
	color:#000000;
	text-transform: uppercase;
	
	font-family: 'Montserrat', sans-serif;
}
.gallery-col p{
	color:#fff;
	text-transform: uppercase;
	font-size:0.6em;
	font-family: 'Georgia', serif;
	padding-top:5px;
	
}

/* just to change the alignment of SCHOOL PROGRAMMES of gallery */
.galleryA{
	margin-top:20px;
	width:100%;
	float:left;
	background:#6EB3C4;
	padding:10px 10px 10px;
	color:#fff;
	font-size:13px;
	line-height:20px;
	box-shadow: 0px 6px 5px 0px #00000036;
}
.galleryA-col{
	flex-basis:23%;
	padding:10px;
	color:#fff;
	position: relative; /* Ensure relative positioning for hover effect */
    overflow: hidden; /* Hide any overflow to keep image within bounds */
	
}
.galleryA-col h3{
	color:#D20103;
	text-transform: uppercase;
	
	font-family: 'Montserrat', sans-serif;
}
.galleryA-col p{
	color:#000000;
	text-transform: uppercase;
	font-size:1.2em;
	font-family: 'Georgia', serif;
	padding-top:5px;
	
}
.galleryA-col:hover .gallery-img {
    transform: scale(1.05); /* Slightly enlarge the image on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Add shadow on hover */
}


/* just to change the alignment of SCHOOL COUNCELLOR of gallery */
.galleryB{
	margin-top:40px;
	width:100%;
	float:left;
	background:#F6E889;
	padding:10px 10px 10px;
	color:#fff;
	font-size:13px;
	line-height:20px;
	box-shadow: 0px 6px 5px 0px #00000036;
}
.galleryB img{
	
	width:240px;
	height:300px;
	margin-bottom:10px;
	border:3px solid #fff;
	border-radius:10px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	
}

/* just to change the alignment of DIGNATRIES (PM) of gallery */
.galleryPM{
	margin-top:40px;
	width:100%;
	float:left;
	background:#CDDD67;
	color:#fff;
	font-size:13px;
/*	box-shadow: 0px 6px 5px 0px #00000036;*/
	text-align:center;
}

.galleryPM-row{
	width: 90%;
	margin:auto;
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	justify-content:space-between;
	margin-left:23%;
	margin-top:10px;

	
}
.galleryPM-col{

	padding:15px;
	color:#fff;
	position: relative; /* Ensure relative positioning for hover effect */
    overflow: hidden; /* Hide any overflow to keep image within bounds */
	
}


.galleryPM-img{
	
	width:600px;
	height:300px;
	margin-bottom:10px;
	border:3px solid #fff;
	border-radius:10px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.galleryPM-col:hover .galleryPM-img {
    transform: scale(1.05); /* Slightly enlarge the image on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Add shadow on hover */
}

.galleryPM-heading{
	color:#000000;
	text-align:center;
	font-family: 'Georgia', serif; 
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 
	font-size:2.2em;
	padding:2px;
	margin-top:15px;
	text-transform: uppercase;
}
.galleryPM-col h3{
	color:#D20103;
	text-transform: uppercase;
	
	font-family: 'Montserrat', sans-serif;
}
.galleryPM-col p{
	color:#000000;
	text-transform: uppercase;
	font-size:1.3em;
	font-family: 'Georgia', serif;
	padding-top:5px;
	
}




/* just to change the alignment of DIGNATRIES of gallery */
.galleryC{
	margin-top:40px;
	width:100%;
	float:left;
	background:#F3A4B6;
	padding:10px 10px 10px;
	color:#fff;
	font-size:13px;
	line-height:20px;
	box-shadow: 0px 6px 5px 0px #00000036;
}
.galleryC img{
	
	width:250px;
	height:180px;
	margin-bottom:10px;
	border:3px solid #fff;
	border-radius:10px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	
}


.galleryD{
	margin-top:40px;
	width:100%;
	float:left;
	background:#99F1DA;
	padding:10px 10px 10px;
	color:#fff;
	font-size:13px;
	line-height:20px;
	box-shadow: 0px 6px 5px 0px #00000036;
}
/*.galleryD img{
	
	width:250px;
	height:200px;
	margin-bottom:10px;
	border:3px solid white;
	border-radius:10px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	
}*/




/* this section is for result sectioon inside Academics page */
.result{
	margin-top:35px;
	width:100%;
	float:left;
	background:#CDDD67;
	padding:10px 0px 10px;
	color:#fff;
	font-size:13px;
	line-height:20px;
	box-shadow: 0px 6px 5px 0px #00000036;
	position:relative;
	

	
}
.result-row{
	width: 90%;
	margin:auto;
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	justify-content:space-between;
	margin: 0 auto; /* Horizontally center the child divs */
	
	
	
}
.result-col{
	
	flex-basis:15%;
	padding:6px;
	margin-left:10px;
	color:#fff;
	position: relative; /* Ensure relative positioning for hover effect */
    overflow: hidden; /* Hide any overflow to keep image within bounds */
	
	
}

.result-img{

	width:140px;
	height:150px;
	margin-bottom:10px;
/*	border-radius:100px; */
	border:4px solid #fff;
	background:#fff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Initial shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top-left-radius:30px;
    border-bottom-right-radius:30px;
		
}
.result-col:hover .result-img {
    transform: scale(1.05); /* Slightly enlarge the image on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Add shadow on hover */
}

.result-col h3{
	font-size:1em;
	margin-top:0px;
	width:fit-content;
	
	position:relative;
	text-transform:uppercase;
	color:#312E2F;
	font-family: 'Georgia', serif;
	
}	
.result-col p{
	font-size:1.2em;
	color:#F5005A;
	font-weight: bold;
	margin-bottom:7px;
	text-transform:uppercase;
}
.result-heading{
	color:#F5005A;
	text-align:center;
	font-family: 'Georgia', serif; 
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 
	font-size:2.2em;
	padding:15px;
	text-transform:uppercase;
	margin-bottom:20px;
	margin-top:12px;
}


/* this section is for faculty members table */
table {
            width: 100%;
            border-collapse: collapse;
			
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
			text-transform:uppercase;
			font-family: 'Georgia', serif; 
        }
        th {
            background-color: #F28537;
        }
        tr:hover {
            background-color: #D7F8F3;
			color:#B71479;
        }
.faculty-table{

}		
.faculty-table-img{
	width:100px;
	height:100px;
	border:2px solid #000000;
	border-radius:8px;
}


/*This code is for SPORTS page Slider IMAGES*/

.frameS{
	width: 1200px;
	height:450px;
	margin:auto;
	
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
	/*border: 10px solid #F36804;
	border-radius: 15px;*/
	overflow:hidden;
}
.sliderS{
	
	display:flex;
	transition:all 1s ease;
	
        
	
}
img.slideS{
	width:100%;
	height:100%;
	object-fit:cover;
	animation:slide 50s infinite;
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }
    5% {
        transform: translateX(-100%);
    }
    15% {
        transform: translateX(-100%);
    }
    20% {
        transform: translateX(-200%);
    }
    30% {
        transform: translateX(-200%);
    }
    35% {
        transform: translateX(-300%);
    }
    45% {
        transform: translateX(-300%);
    }
    50% {
        transform: translateX(-400%);
    }
    60% {
        transform: translateX(-400%);
    }
    65% {
        transform: translateX(-500%);
    }
    75% {
        transform: translateX(-500%);
    }
    80% {
        transform: translateX(-600%);
    }
    90% {
        transform: translateX(-600%);
    }
    95% {
        transform: translateX(-700%);
    }
    100% {
        transform: translateX(-800%);
    }
}

/*
button {
    position: absolute;
    top: 45%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 1;
	margin:auto;
}
button.prev {
    left: 60px;
}

button.next {
    right: 60px;
}

*/


/* this section is for the styling of sports A and sports B */
.sportsA{
	margin-top:35px;
	width:100%;
	float:left;
	background:#fff;
	padding:10px 0px 10px;
	color:#fff;
	font-size:13px;
	line-height:20px;
	box-shadow: 0px 6px 5px 0px #00000036;
	position:relative;
	

	
}
.sportsA img{

	width:140px;
	height:150px;
	margin-bottom:10px;
/*	border-radius:100px; */
	border:4px solid #FFCC01;
	background:#fff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Initial shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top-left-radius:30px;
    border-bottom-right-radius:30px;
		
}

.sportsB{
	margin-top:35px;
	width:100%;
	float:left;
	background:#fff;
	padding:10px 0px 10px;
	color:#fff;
	font-size:13px;
	line-height:20px;
	box-shadow: 0px 6px 5px 0px #00000036;
	position:relative;

	
}
.sportsB img{

	width:140px;
	height:150px;
	margin-bottom:10px;
/*	border-radius:100px; */
	border:4px solid #FFCC01;
	background:#fff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Initial shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top-left-radius:30px;
    border-bottom-right-radius:30px;
		
}

/*............................................................. MOBILE VIEW................................................................................ */
/*............................................................. MOBILE VIEW................................................................................ */
/*............................................................. MOBILE VIEW................................................................................ */
/*............................................................. MOBILE VIEW................................................................................ */
.menu-toggle {
    display: none;
    cursor: pointer;
    float: right;
	width:25px;
	height:30px;


}

.menu-toggle .bar {
    display: block;
    width: 25px;
    height: 2px;
    background-color: #333;
    margin: 2px auto;
	
	
}

/* this section is for the mobile view */
@media screen and (max-width:600px)
{
/* this section is for top sliding news section for mobile view */
		.widthA-100 {
		width: 100%;
		height: 18.5px;
		float: left;
		overflow: hidden; /* Ensure content stays within the div */
		white-space: nowrap; /* Prevent text from wrapping */
		}

		.container1 {
			padding-left: 0px;
			margin: 0px 0px;
		}

		.widthC-100 {
			width: 100%;
			height: 100%;
		}

		.top-header {
			background: black;
			padding: 1px 0px;
			border-bottom: 1px solid #3131315e;
			overflow: hidden; /* Contain floated children */
		}

		.news-list {
			background: #F36804;
			color: #fff;
			border: 0px solid #F36804;
			border-radius: 2px;
			font-size: 11px;
			padding:3px;
			float: left; /* Align "NEWS" text to the left */
		}

		.headquote {
			font-size: 9px;
			color: #fff;
			width: calc(100% - 40px); /* Adjust to fit within the remaining space */
			height: 100%;
			cursor: pointer;
			float: left; /* Align marquee next to "NEWS" */
			padding-top:4px;
		}

/*.................. This section is for Popup Notification !(Mobile).............................. */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Dark transparent background */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Make sure the popup is on top of the content */
    visibility: hidden; /* Initially hide the popup */
    opacity: 0; /* Make it fully transparent initially */
    transition: opacity 0.5s ease, visibility 0s linear 0.5s; /* Smooth transition for visibility */
}

/* Popup content styles */
.popup-content {
    width: 60%; /* 50% of the screen width */
    height: 50%; /* 50% of the screen height */
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Message styles */
.popup-message {
    font-size: 13px;
	font-weight: bold;
	margin-top: 6px;
    margin-bottom: 6px;
	color:rgb(44, 110, 44);
}
.popup-message2 {
    font-size: 10px;
    margin-bottom: 0px;
	color:rgb(0, 0, 0);
	margin-left:5px;
	margin-right:5px;
}
.popup-image{
	width:100%;
	height:70%;
	border-radius: 5px;
	
}

/* Button styles */
.ok-btn {
    background-color: #f44336;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
	margin-top:-40px;
}

.ok-btn:hover {
    background-color: #d32f2f;
}

/* Show the popup with smooth transition */
.popup.show {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s ease, visibility 0s linear 0s;
}


		
/* .................this section is for home, about, logo image, ......................................... */
						
					.container2 {
						padding-left: 0;
						text-align: center;
						
					}

					.school-name{
					width:200px;
					height:10px;
					margin-top:10px;
					margin-left:8px;
					padding:1px;
					font-family: 'Georgia', serif; /* Use a different font for headings */
					font-size: 11px;
					text-align: center; /* Centered heading */
					text-transform: uppercase; /* Make the text uppercase */
					letter-spacing: 0px; /* Add some spacing between letters */
					color:Black;
					text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 
					font-weight: bold; 
					
				}

					.logo{
						width:fit-content;
						float:left;
						width:40px;
						height:40px;
					
				}
				.logo img {
					padding-top:8px;
					width: 30px; /* set the desired width */
					height: 30px; /* set the desired height */
				}
					ul.main-menu {
						display: none;
						flex-direction: column;
						width:100%;
						background-color: #fff;
						position: relative; /* Ensure it's above other elements */
						z-index: 2; /* Higher than buttons */
						
						
					
					}

					ul.main-menu.active {
						display: flex;
					
						
						
					}

					ul.main-menu li {
						float: none;
						width: 100%;
						padding:10px;
						
					}

					ul.main-menu a {
						padding: 2px;
						margin-left:30px;
						font-size:10px;
					}

					.menu-toggle {
						display: block;
					}

/*.................. This section is for middle photos carosoul(Mobile)..................*/
.slider-container-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 460px;
}

.slider-container {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin-top:25px;
	overflow: hidden;
}

.slider-wrapper {
	display: flex;
	/*transition: transform 0.5s ease-in-out;*/
	transition: all 1.5s ease; /* Update: Slower and smoother transition with a duration of 1.5 seconds */
	
}

.slider-item {
	min-width: 100%;
	box-sizing: border-box;
	padding: 10px;
}

.slider-item img {
	width: 100%;
	height: 450px; /* Highlighted change: Increased the height of the photos */
	object-fit: cover; /* Ensures the image scales proportionally */
	border:0px solid #000000;
	border-radius: 0px;
	box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.5);

}

.slider-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	border: none;
	padding: 10px 20px;
	cursor: pointer;
	border-radius: 50%;
	font-size: 18px;
	z-index: 10;
}

.slider-button:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

.slider-button-left {
	left: 10px;
}

.slider-button-right {
	right: 10px;
}
						
						
/*................................... chairman addressing for mobile view................................................. */
				.content{
					display: flex;
					flex-direction: row; 
					
					width: 99%;
					float:left;
					height:100%;
					border:0px solid #F36804;
					border-radius: 4px;
					padding:1px;
					text-align:justify;
					margin-left:4px;
					margin-top:20px;
					font-size: 0.57em;
					color: #555;
					margin-bottom: 15px
					box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
					background:#fff;
					overflow:auto;
					box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
				}
				.chairman-image{
						
					border:0px solid #F36804;
					float:right;
					width:30%;
					height:100px;
					margin-right:0px;
					margin-top:20px;
					box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
					overflow: hidden;
					border-radius: 4px; /* Slightly rounded corners */
					box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Initial shadow */
					transition: transform 0.3s ease, box-shadow 0.3s ease;
					position: relative;
					box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
				}
				.text-overlay {
							position: absolute;
							color: #fff;
							font-size: 8px;
							font-weight: bold;
							text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Add a shadow for better visibility */
							text-align: center;
							padding: 10px 20px;
							background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
							border-radius: 5px; /* Rounded corners for the text background */
							margin-top:140px;
				}
				.chairman{
							margin-left:5px;
							width: 162px;
							height: 550px;
							object-fit: cover;
							transition: transform 0.3s ease;
					
				}
				.chairman-image:hover img {
							transform: scale(1.1); /* Zoom in the image slightly */
				}

				.heading{
					margin-top:10px;
					font-family: 'Georgia', serif; /* Use a different font for headings */
					font-size: 1.9em;
					text-align: center; /* Centered heading */
					text-transform: uppercase; /* Make the text uppercase */
					letter-spacing: 0.5px; /* Add some spacing between letters */
					color:#F36804;
					text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); 
					
				}
				.content p{
					padding:8px;
					font-size: 2.35vw; /* Text size will scale with the viewport width */
				}
				.paragraph{
					margin-right:5px;
				}

					
						
						
						
						
						
						
/* .......................this section is for sliding school image in mobile view........................................... */
						.frame{
							
							width: 100%;
							height:100%;
							margin:auto;
							padding-top:15px;
							box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
							/*border: 10px solid #F36804;
							border-radius: 15px;*/
							overflow:hidden;
							}	
							
						button {
							position: absolute;
							top: 150px;
							background-color: rgba(0, 0, 0, 0.2);
							color: #fff;
							border: none;
							padding: 10px;
							cursor: pointer;
							z-index: 0;
							margin:auto;
										}
										
						button.prev {
								left:10px;
									}

						button.next {
								right: 10px;
										}








/*..................this section is for the banner of orange color in home page..............*/
				.banner{
					margin-top:10px;
					width:100%;
					float:left;
					background:#F28537;
					padding:10px 0px 10px;
					color:#fff;
					font-size:13px;
					line-height:20px;
					box-shadow: 0px 6px 5px 0px #00000036;
					position:relative;

					
				}
				.banner-row{
					width: 85%;
					margin:auto;
					display:flex;
					flex-wrap:wrap;
					justify-content:space-between;
					margin-left:30px;
					flex-direction:column;
					
					
					
				}
				.banner-col{
					
										
					flex-basis:200px;
					padding:10px;
					color:#fff;
					position: relative; /* Ensure relative positioning for hover effect */
					overflow: hidden; /* Hide any overflow to keep image within bounds */
					text-align: center;
					
				}

				.banner-img{

					width:120px;
					height:120px;
					margin-bottom:1px;
					border-radius:100px;
					border:2px solid #6EB3C4;
					background:#fff;
					box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Initial shadow */
				   transition: transform 0.3s ease, box-shadow 0.3s ease;
						
				}
				.banner-col:hover .banner-img {
					transform: scale(1.05); /* Slightly enlarge the image on hover */
					box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Add shadow on hover */
				}

				.banner-col h3{
					
					
					font-size:1.1em;
					margin-top:0px;
					width:fit-content;
					margin-bottom:0px;
					position:relative;
					text-transform:uppercase;
					color:#312E2F;
					font-family: 'Georgia', serif;
					margin: 0 auto; /* The block element will be centered horizontally */
					
					
					
				}	
				.banner-col p{
				
					text-align:justify;	
					font-size:0.9em;
				}


/*.......................This is the Excellence Award Section, mobile view........................... */
				.award{
					margin-top:25px;
					width:100%;
					float:left;
					background:#6EB3C4;
					padding:0px 0px 0px;
					color:#fff;
					font-size:12px;
					line-height:15px;
					box-shadow: 0px 6px 5px 0px #00000036;
					
				}
				
				.award-row{
					
					width:85%;
					margin:auto;
					display:flex;
					flex-direction:column;
					flex-wrap:wrap;
					align-items:flex-start;
					justify-content:space-between;
					margin-left:30px;
					margin-top:20px;
					
				}
				.award-col{
					
					flex-basis:50%;
					padding:10px;
					color:#fff;
					position: relative; /* Ensure relative positioning for hover effect */
					overflow: hidden; /* Hide any overflow to keep image within bounds */
					
					
					
				}
				.award-img{
					
					
					width:100%;
					height:100%;
					margin-bottom:10px;
					border:3px solid #fff;
					border-radius:10px;
					transition: transform 0.3s ease, box-shadow 0.3s ease;
				}

				.award-col:hover .award-img {
					transform: scale(1.05); /* Slightly enlarge the image on hover */
					box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Add shadow on hover */
				}

				.award-heading{
					
					color:#fff;
					text-align:center;
					font-family: 'Georgia', serif; 
					text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 
					font-size:1.5em;
					padding:4px;
					margin-top:10px;
				}
				.award-col h3{
					
					
					color:#AE165F;
					text-transform: uppercase;
			
					
					font-family: 'Montserrat', sans-serif;
				}
				.award-col p{
					
					color:#494848;
					text-transform: uppercase;
					font-size:1.1em;
					font-family: 'Georgia', serif;
					padding-top:5px;
					
				}




/*........................ this section is for gallery section of home page, mobile...................................... */
				.gallery{
					margin-top:25px;
					width:100%;
					float:left;
					background:#DA79BD;
					padding:5px 5px 5px;
					color:#fff;
					font-size:13px;
					line-height:20px;
					box-shadow: 0px 6px 5px 0px #00000036;
				}
				.gallery-row{
					width: 85%;
					margin:auto;
					display:flex;
					flex-direction:column;
					flex-wrap:wrap;
					align-items:flex-start;
					justify-content:space-between;
					margin-left:30px;
					margin-top:10px;
					
				}
				.gallery-col{
					flex-basis:50%;
					padding:10px;
					color:#fff;
					position: relative; /* Ensure relative positioning for hover effect */
					overflow: hidden; /* Hide any overflow to keep image within bounds */
					
				}


				.gallery-img{
					
					width:100%;
					height:100%;
					margin-bottom:10px;
					border:3px solid #fff;
					border-radius:10px;
					transition: transform 0.3s ease, box-shadow 0.3s ease;
				}
				.gallery-col:hover .gallery-img {
					transform: scale(1.05); /* Slightly enlarge the image on hover */
					box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Add shadow on hover */
				}

				.gallery-heading{
					color:#fff;
					text-align:center;
					font-family: 'Georgia', serif; 
					text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 
					font-size:1.5em;
					padding:2px;
					margin-top:30px;
					text-transform: uppercase;
				}
				.gallery-col h3{
					color:#000000;
					text-transform: uppercase;
					
					font-family: 'Montserrat', sans-serif;
				}
				.gallery-col p{
					color:#fff;
					text-transform: uppercase;
					font-size:1em;
					font-family: 'Georgia', serif;
					padding-top:1px;
					
				}

/*...............................footer section, mobile view............................*/
				.footer-sec{
					margin-top:50px;
					width:100%;
					float:left;
					background:black;
					border-top-left-radius:60px;
					/*border-top-right-radius:100px;*/
					padding:40px 0px 10px;
					color:#fff;
					font-size:10px;
					line-height:15px;

				}
				.row{
					width: 90%;
					margin:auto;
					display:flex;
					flex-direction:column;
					flex-wrap:wrap;
					align-items:flex-start;
					justify-content:space-between;
					margin-left:30px;
				}
				.col{
					flex-basis:10%;
					padding:1px;
					color:#fff;
					
					
				}
				.logo-bottom{
					
					width:50px;
					height:50px;
					margin-bottom:10px;
					
					
				}
				.col h3{
					margin-top:10px;
					width:fit-content;
					margin-bottom:10px;
					position:relative;
					text-transform:uppercase;
					
				}
				.follow-us{
					height:40px;
					width:50px;
				}
				.col a{
					text-align:left;
					text-decoration:none;
					color:#fff;
				}
				.col p{
					text-align:left;
				}

/* ...................this part is for middle news section, mobile view.......................*/
				.width-100{
					width: 100%;
					float: left;
					
				}
				.container {
					padding-left:20px;
					margin: 0px auto;
				}


				.margin-top-50{
					margin-top:20px;
				}
				.width-33{
					
					
					width:100%;
					float:left;
					
					
				}
				.latest-news{
					border:8px solid #F36804;  
					border-radius: 6px;         
					margin-left:0px;
					margin-right:15px;
					background:#fff;
					padding:10px;
					height:250px;
					margin-bottom:30px;
					object-fit: cover;
					overflow:hidden;

				}

				.heading-section{
					width:95%;
					float:left;
					border-bottom:1px solid #cfcfcf;
					padding-bottom:0px;
					margin:0px;
					margin-bottom:15px;
					border-radius:5px;
					padding-top:10px;
					padding-left:10px;
					background:#1D75DA;
					color:#fff;
				}
				.head-title{
					margin:0px;
					padding:0px;
					font-size:12px;
					font-weight:600;
					padding-bottom:3px;
				}
				.leatest-news ul{
					padding:0px;
					list-style:none;
					line-height:40px;
				}
				img {
					width: 10px;
					height: 10px;
				}
				.latest-news-ul{
					padding:10px;
					list-style:none;
					height:250px;
					line-height:15px;
					
				}
				.latest-news-ul a{
					text-decoration:none;
					color:black;
					font-size:10px;
					
				}






				/* this  is the styling of event section */
				.event-list{
					border:8px solid #F36804;
					border-radius: 6px;			
					margin-left:0px;
					margin-right:15px;
					background:#fff;
					padding:10px;
					height:250px;
					margin-bottom:30px;
					overflow: auto;
				}
				.upcoming-event-list{
					padding:0px;
					list-style:none;
				}
				.upcoming-event-list li{
					width:100%;
					float:left;
					margin-bottom:10px;

				}
				.event-date{
					background:#1D75DA;
					width:20px;
					float:left;
					text-align:center;
					font-size:10px;
					color:#fff;
					padding:8px;
					margin-right:10px;
				}
				.event-list li{
					font-size:12px;
				}




/*............... this is the styiling of notice board, mobile view................. */
				.notice-board{
					border:8px solid #F36804;
					border-radius: 6px;			
					margin-left:0px;
					margin-right:15px;
					background:#fff;
					padding:10px;
					height:250px;
					margin-bottom:30px;
					overflow: auto;
					
				}
				.notice-board-list{
					padding:5px;
					list-style:none;
					line-height:32px;
				}
				.notice-board-list li{
					width:100%;
					float:left;
					margin-bottom:10px;
					font-size:12px;
				}


/*................. This section is for designing the drop down menu....................*/
				ul{
					list-style:none;
					
					/*background:pink;*/
				}
				ul li{
					
					display:inline-block;
					position:relative;
				}

				ul li a{
					
					font-size:3px;
					display: block;
					text-decoration:none;
					text-align:left;
				}

				ul li ul.dropdown li{
					padding:0px;
					width:120px;
					height:10px;
					color:#fff;
					border:0.5px solid #fff;
					display:block;
					background:#fff;
					
					
				}
				ul li ul.dropdown {
					width:100%;
					display:block;
					position:absolute;
					z-index:999;
					display:none;
					
				}
				ul li a:hover{
					border:2px solid #F36804;
					border-radius: 7px;
					
				}
				ul li:hover ul.dropdown{
					display:block;
					display: flex;
					position:absolute;
					
				}



/*............ this section is for the styling of principal page mobile view...............*/
				.principal{
				margin-top:20px;
				width:100%;
				float:left;
				background:#fff;
				padding:0px;
				color:#fff;
				font-size:13px;
				line-height:20px;
				box-shadow: 0px 6px 5px 0px #00000036;
				
				
			}
			.principal-row{
				
				width: 80%;
				margin:auto;
				display:flex;
				flex-direction:column;
				flex-wrap:wrap;
				align-items:flex-start;
				justify-content:space-between;
				margin-left:18%;
				margin-bottom:20px;
				padding:5px;
				
				
				
			}
			.principal-col{
				flex-basis:25%;
				padding:10px;
				color:#000000;
				position: relative; /* Ensure relative positioning for hover effect */
				overflow: hidden; /* Hide any overflow to keep image within bounds */
				text-align:justify;
				text-align: center;
				
				
				
			}


			.principal-img{
				text-align:center;
				
				width:180px;
				height:180px;
				margin-bottom:10px;
				border:7px solid #F36804;
				border-radius:150px;
				transition: transform 0.3s ease, box-shadow 0.3s ease;
				padding-left:3px;
			}
			.principal-col:hover .principal-img {
				transform: scale(1.05); /* Slightly enlarge the image on hover */
				box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Add shadow on hover */
			}

			.principal-heading{
				width:100%
				color:#000000;
				text-align:center;
				font-family: 'Georgia', serif; 
				text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 
				font-size:2.2em;
				padding:2px;
				margin-top:30px;
			}
			.principal-col h3{
				color:#D20103;
				text-transform: uppercase;
				
				font-family: 'Montserrat', sans-serif;
			}
			.principal-col p{
				width:100%
				color:#000000;
				text-transform: uppercase;
				font-size:0.7em;
				font-family: 'Georgia', serif;
				
				
			}

			.principal-content{
				width: 98%;
				float:left;
				background:#fff;
				border:3px solid #F36804;
				border-radius: 10px;
				padding:0px;
				text-align:justify;
				margin-left:0px;
				margin-top:20px;
				font-size: 0.7em;
				color: #555;
				margin-bottom: 30px
				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
				
				
			}
			.principal-heading{
				font-family: 'Georgia', serif; /* Use a different font for headings */
				text-align: center; /* Centered heading */
				text-transform: uppercase; /* Make the text uppercase */ /* Add some spacing between letters */
				text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 
			}
			.principal-content p{
				padding:10px;
			}



/*...........................management section, contact us, features, mobile view............................*/
			.management{
				width:96%;
				float:left;
				
				
				border:3px solid #F36804;
				border-radius: 10px;
				padding:0px;
				text-align:left;
				margin-left:4px;
				margin-top:20px;
				

				margin-bottom: 30px
				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
			}
			.management-heading{
				padding-left:7px;
				line-height:20px;
				margin-top:15px;
				font-size: 1em;
				color: black;
				font-family: 'Georgia', serif; /* Use a different font for headings */
				text-transform: uppercase; /* Make the text uppercase */ /* Add some spacing between letters */
				text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); 
			}
			.management-subheading{
				padding-left:7px;
				padding-right:7px;
				font-size: 0.8em;
				color: #555;
				line-height:20px;
				
			}


/*..............this section is for Alumni, class name result, mobile view......................*/
			.result{
				margin-top:20px;
				width:100%;
				float:left;
				background:#CDDD67;
				padding:10px 0px 10px;
				color:#fff;
				font-size:13px;
				line-height:20px;
				box-shadow: 0px 6px 5px 0px #00000036;
				position:relative;

				
			}
			.result-row{
				width: 95%;
				margin:auto;
				display:flex;
				
				flex-wrap:wrap;
				align-items:flex-start;
				justify-content:space-between;
				margin-left:0px;
				
				
			}
			.result-col{
				
				flex-basis:17%;
				padding:20px;
				color:#fff;
				position: relative; /* Ensure relative positioning for hover effect */
				overflow: hidden; /* Hide any overflow to keep image within bounds */
				
			}

			.result-img{

				width:70px;
				height:78px;
				margin-bottom:10px;
			/*	border-radius:100px; */
				border:3px solid #fff;
				background:#fff;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Initial shadow */
				transition: transform 0.3s ease, box-shadow 0.3s ease;
				border-top-left-radius:15px;
				border-bottom-right-radius:15px;
					
			}
			.result-col:hover .result-img {
				transform: scale(1.05); /* Slightly enlarge the image on hover */
				box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Add shadow on hover */
			}

			.result-col h3{
				font-size:0.8em;
				margin-top:0px;
				width:fit-content;
				position:relative;
				text-transform:uppercase;
				color:#312E2F;
				font-family: 'Georgia', serif;
				
			}	
			.result-col p{
				font-size:1em;
				color:#F5005A;
				font-weight: bold;
				margin-bottom:3px;
				text-transform:uppercase;
			}
			.result-heading{
				color:#F5005A;
				text-align:center;
				font-family: 'Georgia', serif; 
				text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 
				font-size:1.8em;
				padding:15px;
				text-transform:uppercase;
				margin-bottom:20px;
				margin-top:0px;
				line-height:30px;
			}


/*................... this section is for faculty members table, mobile view............................................ */
			table {
						width: 100%;
						border-collapse: collapse;
						
					}
					th, td {
						border: 1px solid #ddd;
						padding: 0px;
						text-align: center;
						text-transform:uppercase;
						font-size:8px;
						font-family: 'Georgia', serif; 
					}
					th {
						background-color: #F28537;
					}
					tr:hover {
						background-color: #D7F8F3;
						color:#B71479;
					}
			.faculty-table{

			}		
			.faculty-table-img{
				width:40px;
				height:40px;
				border:1.5px solid #000000;
				border-radius:6px;
			}


/* .................just to change the alignment of DIGNATRIES PM PHOTO of gallery, MOBILE........................... */
			.galleryPM{
				margin-top:40px;
				width:100%;
				float:left;
				background:#CDDD67;
				color:#fff;
				font-size:12px;
			/*	box-shadow: 0px 6px 5px 0px #00000036;*/
				text-align:center;
			}

			.galleryPM-row{
				width: 90%;
				margin:auto;
				display:flex;
				
				flex-wrap:wrap;
				align-items:flex-start;
				justify-content:space-between;
				margin-left:5%;
				margin-top:10px;

				
			}
			.galleryPM-col{
				WIDTH:100%;
				padding:10px;
				color:#fff;
				position: relative; /* Ensure relative positioning for hover effect */
				overflow: hidden; /* Hide any overflow to keep image within bounds */
				
			}


			.galleryPM-img{
				
				width:100%;
				height:200px;
				margin-bottom:10px;
				
				border:3px solid #fff;
				border-radius:10px;
				transition: transform 0.3s ease, box-shadow 0.3s ease;
			}
			.galleryPM-col:hover .galleryPM-img {
				transform: scale(1.05); /* Slightly enlarge the image on hover */
				box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Add shadow on hover */
			}

			.galleryPM-heading{
				color:#FFF	;
				text-align:center;
				font-family: 'Georgia', serif; 
				text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); 
				font-size:1.7em;
				padding:2px;
				margin-top:15px;
				text-transform: uppercase;
			}
			.galleryPM-col h3{
				color:#D20103;
				text-transform: uppercase;
				
				font-family: 'Montserrat', sans-serif;
			}
			.galleryPM-col p{
				color:#000000;
				text-transform: uppercase;
				font-size:1.3em;
				font-family: 'Georgia', serif;
				padding-top:5px;
				
			}


/* ...................just to change the alignment of SCHOOL PROGRAMMES of gallery, mobile............. */
			.galleryA{
				margin-top:20px;
				width:100%;
				float:left;
				background:#6EB3C4;
				padding:10px 10px 10px;
				color:#fff;
				font-size:13px;
				line-height:20px;
				box-shadow: 0px 6px 5px 0px #00000036;
			}
			.galleryA-col{
				flex-basis:22%;
				padding:10px;
				color:#fff;
				position: relative; /* Ensure relative positioning for hover effect */
				overflow: hidden; /* Hide any overflow to keep image within bounds */
				
			}
			.galleryA-col h3{
				color:#D20103;
				text-transform: uppercase;
				font-size:1.1em;
				font-family: 'Montserrat', sans-serif;
			}
			.galleryA-col p{
				color:#000000;
				text-transform: uppercase;
				font-size:1em;
				font-family: 'Georgia', serif;
				padding-top:5px;
				
			}
			.galleryA-col:hover .gallery-img {
				transform: scale(1.05); /* Slightly enlarge the image on hover */
				box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Add shadow on hover */
			}


			/*............... just to change the alignment of SCHOOL COUNCELLOR of gallery, mobile view................ */
			.galleryB{
				margin-top:40px;
				width:100%;
				height:100%;
				background:#F6E889;
				padding:10px 10px 10px;
				color:#fff;
				font-size:13px;
				line-height:20px;
				box-shadow: 0px 6px 5px 0px #00000036;
				text-align:center;
			
			}
			.galleryB img{
				
				width:100%;
				height:100%;
				margin-bottom:10px;
				border:3px solid #fff;
				border-radius:10px;
				transition: transform 0.3s ease, box-shadow 0.3s ease;
				
			}

/*.................. just to change the alignment of DIGNATRIES of gallery, mobile ...........................*/
			.galleryC{
				
				width:100%;
				height:100%;
				float:left;
				margin-top:40px;
				background:#F3A4B6;
				padding:10px 10px 10px;
				color:#fff;
				font-size:13px;
				line-height:20px;
				box-shadow: 0px 6px 5px 0px #00000036;
			}
			.galleryC img{
				
				width:100%;
				height:100%;
				margin-bottom:10px;
				border:3px solid #fff;
				border-radius:10px;
				transition: transform 0.3s ease, box-shadow 0.3s ease;
				
			}


			.galleryD{
				margin-top:40px;
				width:100%;
				float:left;
				background:#99F1DA;
				padding:10px 10px 10px;
				color:#fff;
				font-size:13px;
				line-height:20px;
				box-shadow: 0px 6px 5px 0px #00000036;
			}
			/*.galleryD img{
				
				width:250px;
				height:200px;
				margin-bottom:10px;
				border:3px solid white;
				border-radius:10px;
				transition: transform 0.3s ease, box-shadow 0.3s ease;
				
			}*/




/*..............This code is for SPORTS page Slider IMAGES, mobile view................................*/

			.frameS{
				width: 100%;
				height:133px;
				margin:auto;
				
				box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
				/*border: 10px solid #F36804;
				border-radius: 15px;*/
				overflow:hidden;
			}
			.sliderS{
				
				display:flex;
				transition:all 1s ease;
				
					
				
			}
			img.slideS{
				width:100%;
				height:100%;
				object-fit:cover;
				animation:slide 300s infinite;
			}

			@keyframes slide {
				0% {
					transform: translateX(0);
				}
				5% {
					transform: translateX(-100%);
				}
				15% {
					transform: translateX(-100%);
				}
				20% {
					transform: translateX(-200%);
				}
				30% {
					transform: translateX(-200%);
				}
				35% {
					transform: translateX(-300%);
				}
				45% {
					transform: translateX(-300%);
				}
				50% {
					transform: translateX(-400%);
				}
				60% {
					transform: translateX(-400%);
				}
				65% {
					transform: translateX(-500%);
				}
				75% {
					transform: translateX(-500%);
				}
				80% {
					transform: translateX(-600%);
				}
				90% {
					transform: translateX(-600%);
				}
				95% {
					transform: translateX(-700%);
				}
				100% {
					transform: translateX(-800%);
				}
			}

			
			.frameS button {
				position: absolute;
				top: 35%;
				background-color: rgba(0, 0, 0, 0.5);
				color: white;
				border: none;
				padding: 10px;
				cursor: pointer;
				z-index: 1;
				margin:auto;
			}/*
			button.prev {
				left: 60px;
			}

			button.next {
				right: 60px;
			}

			*/


			/* this section is for the styling of sports A and sports B */
			.sportsA{
				margin-top:35px;
				width:100%;
				float:left;
				background:#fff;
				padding:10px 0px 10px;
				color:#fff;
				font-size:13px;
				line-height:20px;
				box-shadow: 0px 6px 5px 0px #00000036;
				position:relative;

				
			}
			.sportsA img{

				width:70px;
				height:75px;
				margin-bottom:10px;
			/*	border-radius:100px; */
				border:3px solid #FFCC01;
				background:#fff;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Initial shadow */
				transition: transform 0.3s ease, box-shadow 0.3s ease;
				border-top-left-radius:15px;
				border-bottom-right-radius:15px;
					
			}
			.sportsA p{
				font-size:10px;
			}

			.sportsB{
				margin-top:35px;
				width:100%;
				float:left;
				background:#fff;
				padding:10px 0px 10px;
				color:#fff;
				font-size:13px;
				line-height:20px;
				box-shadow: 0px 6px 5px 0px #00000036;
				position:relative;

				
			}
			.sportsB img{

				width:70px;
				height:75px;
				margin-bottom:10px;
			/*	border-radius:100px; */
				border:3px solid #FFCC01;
				background:#fff;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Initial shadow */
				transition: transform 0.3s ease, box-shadow 0.3s ease;
				border-top-left-radius:15px;
				border-bottom-right-radius:15px;
					
			}
			.sportsB p{
				font-size:10px;
			}




/*don't remove below bracket*/					
}