.logo {
   height: 75px;
   width: auto;
}

.slogan {
   font-size: 10px !important;
   font-style: italic !important;
}

.text-justify {
   text-align: justify;
}

.text-theme {
   color: rgba(0, 112, 159, 0.9);
}

.text-white-10 {
   color: #f9f9f9;
   /* font-family: poppins; */
}

.theme-button {
   background: #00709f;
   border: 0;
   padding: 10px 35px;
   color: #fff;
   transition: 0.4s;
   border-radius: 50px;
}


.about-image {
   /* background-image: url(/front/images/about1.jpg) !important; */
   background-size: contain !important;
}

.about img {
   width: 75%;
   height: auto;
   border-radius: 5px;
   /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); */
   box-shadow: 0 10px 20px rgba(0, 112, 159, 0.3);
   transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.about img:hover {
   transform: scale(1.05);
   /* Slight zoom on hover */
   box-shadow: 0 15px 30px rgba(0, 112, 159, 0.5);
   /* Enhanced shadow on hover */
}

.hero-slide {
   width: 100%;
   height: 900px;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
}

/***************************/
/* Infrastructure Section */
/***************************/

.infrastructure-section {
   /* background: url('../img/infra2.jpg') no-repeat center center; */
   background-color: rgba(0, 0, 0, 0.8);
   /* opacity: 0.5; */
   position: relative;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   color: #fff;
   padding: 60px 0;
}

.background-transparent {
   position: relative;
   /* background: none; */
   /* Remove default background */
   padding: 20px;
}

.background-transparent::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: url('/front/images/infra2.jpg') no-repeat center center;
   /* Background image */
   background-size: cover;
   opacity: 0.2;
   /* Set transparency for background image */
   z-index: 0;
   /* Place it behind the content */
}

.background-transparent>* {
   position: relative;
   z-index: 1;
   /* Ensure content appears above the background */
}

.infrastructure-section .overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   /* background: rgba(0, 112, 159, 0.2); */

   /* Darker overlay for contrast */
   z-index: 1;
}

.infrastructure-section .container-fluid {
   position: relative;
   z-index: 2;
}

.infrastructure-section .section-title {
   margin-bottom: 40px;
}

.infrastructure-section .section-title h2 {
   font-size: 25px;
   font-weight: 700;
   color: #00709f;
}

.infrastructure-section .section-title p {
   font-size: 18px;
   color: #ccc;
}

.infrastructure-box {
   background: rgba(0, 112, 159, 0.1);
   padding: 20px;
   border-radius: 10px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
   text-align: center;
   transition: transform 0.3s, box-shadow 0.3s;
   height: 140px;
   width: 100%;
   min-width: 250px;
   max-width: 250px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

/* .infrastructure-box i {
   font-size: 30px;
   color: #00d1b2;
   margin-bottom: 10px;
} */

.infrastructure-box p {
   font-size: 16px;
   color: rgb(25, 25, 26);
   margin: 0;
}

.infrastructure-box p:hover {
   font-size: 16px;
   color: #f9f9f9;
   margin: 0;
}

.infrastructure-box:hover {
   transform: translateY(-5px);
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
   background: rgba(0, 112, 159, 0.877);
   color: #f9f9f9;
   /* Highlight box on hover */
}

.infrastructure-box img.icon {
   width: 50px;
   height: 50px;
   margin-bottom: 10px;
   display: block;
}

/******************************/
/* Amis & Objective */
/*******************************/
.aims-objectives {
   padding: 60px 0;
   background: url('/front/images/aim-background4.jpg') no-repeat;
   object-fit: contain;
   background-color: #f9f9f9;
   background-size: cover;
}

.aims-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   /* Ensures image scales proportionally */
   border-radius: 10px;
   /* Adds a soft rounded effect */
}

.aims-content {
   padding-left: 15px;
}

.aims-content h3 {
   font-size: 28px;
   font-weight: bold;
   margin-bottom: 20px;
   color: #333;
   /* Dark text for readability */
}

.aims-list {
   margin-top: 20px;
}

.aim-item {
   display: flex;
   align-items: flex-start;
   margin-bottom: 20px;
   padding: 15px;
   border-radius: 10px;
   background-color: #00709f;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.aim-item:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.aim-icon {
   width: 50px;
   height: 50px;
   margin-right: 15px;
   object-fit: contain;
}

.aim-item p {
   font-size: 16px;
   color: #555;
}

/******************************/
/* Why Us */
/*******************************/
.why-us .icon-boxes .icon-box {
   text-align: center;
   background: #fff;
   border-radius: 10px;
   padding: 15px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   height: 100%;
   /* Ensures consistent height */
}

.why-us .icon-boxes .icon-box:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.why-us .icon-boxes .icon-img {
   width: 60px;
   height: 60px;
   object-fit: contain;
   margin-bottom: 10px;
}

.why-us .icon-boxes .icon-box h5 {
   font-size: 16px;
   font-weight: bold;
   margin-bottom: 10px;
   color: #333;
}

.why-us .icon-boxes .icon-box p {
   font-size: 14px;
   color: #555;
   margin: 0;
}

.why-us .icon-boxes .row>div {
   display: flex;
   justify-content: center;
   align-items: stretch;
}

.why-us .icon-boxes .row>div .icon-box {
   flex: 1;
   /* Ensures all boxes stretch evenly */
}

/******************************/
/* Silent Feature */
/*******************************/
.features {
   padding: 60px 0;
   background: url('/front/images/silent3.jpg') no-repeat center center;
   /* Update with your image path */
   background-size: cover;
   /* Ensures the background covers the entire section */
   color: #333;
   /* Ensures text is readable on the background */
}

.features .section-title {
   margin-bottom: 40px;
}

.features .feature-item {
   text-align: center;
   background: rgba(255, 255, 255, 0.8);
   /* Adds a subtle background to the items for better readability */
   border-radius: 10px;
   padding: 20px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s, box-shadow 0.3s;
}

.features .feature-item:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.features .feature-img {
   width: 60px;
   /* Adjust image size */
   height: 60px;
   object-fit: contain;
   margin-right: 10px;
}

.features .feature-item h4 {
   font-size: 18px;
   font-weight: bold;
   margin-bottom: 10px;
}

.features .feature-item p {
   font-size: 14px;
}


/********************************/
/* Breadcrumbs */
/********************************/
.breadcrumbs {
   position: relative;
   height: 450px;
   /* Set height */
   background-size: cover;
   /* Ensure image covers the section */
   background-position: center;
   /* Center the image */
   background-repeat: no-repeat;
   /* Prevent repeating */
   display: flex;
   align-items: center;
   /* Center content vertically */
   justify-content: center;
   /* Center content horizontally */
   color: #fff;
   /* Ensure text is readable */
   text-align: center;
   padding: 0 15px;
}

.breadcrumbs .overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   /* Add a semi-transparent overlay */
   z-index: 1;
   /* Place the overlay below the content */
}

.breadcrumbs .container {
   position: relative;
   z-index: 2;
   /* Ensure content is above the overlay */
}

.breadcrumbs h2 {
   font-size: 36px;
   font-weight: bold;
   margin-bottom: 15px;
}

.breadcrumbs p {
   font-size: 16px;
   margin: 0;
   line-height: 1.5;
}

/***************************/
/* Mission Vision */
/***************************/

.mission-vision {
   background-color: #f9f9f9;
   padding: 60px 0;
}

.mission-vision h1 {
   font-size: 40px;
   color: #00709f;
   font-weight: 800;
}

.mission-vision .content p {
   font-size: 16px;
   color: #555;
   line-height: 1.8;
   padding: 10px;
}

.mission-vision .list-unstyled li {
   display: flex;
   /* Makes the list item a flex container */
   align-items: flex-start;
   /* Aligns icon and text at the top */
   margin-bottom: 10px;
   /* Adds space between items */
   font-size: 16px;
   color: #333;
}

.mission-vision .list-unstyled li i {
   margin-right: 10px;
   /* Adds space between the icon and the text */
   color: #007bff;
   /* Sets the icon color */
   flex-shrink: 0;
   /* Prevents the icon from resizing */
}

.mission-vision .list-unstyled li span {
   line-height: 1.5;
   /* Ensures proper line spacing */
   display: block;
   /* Ensures text wraps properly */
}

.mission-vision .image-box {
   position: relative;
   overflow: hidden;
   border-radius: 10px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.mission-vision .image-box img {
   transition: transform 0.5s ease;
   border-radius: 10px;
   width: 100%;
   height: auto;
}

.mission-vision .image-box:hover img {
   transform: scale(1.1);
   /* Zoom-in effect */
}

.mission-vision .image-box .overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.3);
   /* Semi-transparent overlay */
   z-index: 1;
}

/***************************/
/* Former Team*/
/***************************/


#former-team table {
   border-collapse: collapse;
   width: 100%;
   font-size: 16px;
}

#former-team .table thead {
   background-color: #00709f;
   /* Set blue background color */
   color: #fff;
   /* Set white text color for contrast */
}

#former-team th,
#former-team td {
   text-align: center;
   vertical-align: middle;
   padding: 10px;
}

#former-team .profile-img {
   width: 100px;
   height: 100px;
   border-radius: 25%;
   /* Makes it circular */
   object-fit: cover;
   /* Ensures proper cropping */
   border: 2px solid #ddd;
}

#former-team .badge {
   padding: 5px 10px;
   font-size: 14px;
   border-radius: 5px;
}

.table-hover tbody tr:hover {
   background-color: #f5f5f5;
}

/***************************/
/* Principal Section */
/***************************/
#principal-section {
   background-color: #f9f9f9;
   /* Optional background */
   padding: 60px 0;
   /* Add padding for spacing */
}

.principal-img {
   max-width: 100%;
   /* Make image responsive */
   height: auto;
   /* Maintain aspect ratio */
   border-radius: 8px;
   /* Slightly round corners */
   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
   /* Add shadow for better appearance */
   margin-bottom: 20px;
   /* Add spacing below the image */
}

.principal-name {
   font-size: 20px;
   font-weight: bold;
   color: #333;
   margin-top: 10px;
}

.principal-message {
   font-size: 16px;
   color: #555;
   line-height: 1.8;
   /* Increased line spacing for better readability */
   margin-top: 10px;
   text-align: justify !important;
   word-wrap: break-word;
   /* Prevent text from overflowing */
}

/* Ensure proper spacing and alignment */
.col-md-4 {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.col-md-8 {
   display: flex;
   flex-direction: column;
   justify-content: center;
   text-align: justify;
}

/* Responsive Design */
@media (max-width: 768px) {
   #principal-section .row {
      flex-direction: column;
      /* Stack image and text vertically */
   }

   .col-md-4,
   .col-md-8 {
      text-align: center;
      /* Center text for smaller screens */
   }

   .principal-message {
      margin-top: 20px;
      /* Add spacing above the text */
   }
}



/********************************
/* Admission Section */
/* Process */
/********************************/
.admission-process {
   background-color: #f9f9f9;
   /* Light background */
   padding: 60px 0;
}

.admission-process h1 {
   font-size: 40px;
   color: #00709f;
   /* Theme color */
   font-weight: 800;
}

.admission-process .content ul {
   padding-left: 0;
}

.admission-process .content ul li {
   display: flex;
   align-items: flex-start;
   margin-bottom: 20px;
   text-align: justify;
}

.admission-process .step-number {
   font-size: 16px;
   font-weight: bold;
   color: #00709f;
   /* Theme color */
   margin-right: 10px;
   /* Space between number and text */
}

/********************************/
/* Process */
/********************************/
.withdrawal-dismissal ul {
   padding-left: 0;
   /* Removes default padding */
   list-style: none;
   /* Removes default bullets */
}

.withdrawal-dismissal ul li {
   display: flex;
   align-items: flex-start;
   /* Aligns the bullet and text at the top */
   margin-bottom: 15px;
}

.withdrawal-dismissal ul li i {
   margin-right: 10px;
   /* Adds space between the icon and text */
   color: #00709f;
   /* Theme color for the icon */
   flex-shrink: 0;
   /* Prevents icon resizing */
   font-size: 18px;
}

.withdrawal-dismissal ul li span {
   font-size: 16px;
   color: #555;
   /* Text color */
   line-height: 1.8;
   /* Spacing between lines */
   display: block;
   text-align: justify;
   /* Ensures text is justified for neatness */
}

/********************************/
/* School Fees */
/********************************/
.school-fees {
   background-color: #f9f9f9;
   /* Light background for readability */
   padding: 60px 0;
}

.school-fees h1 {
   font-size: 40px;
   color: #00709f;
   /* Theme color */
   font-weight: 800;
}

.school-fees p {
   font-size: 16px;
   color: #555;
   line-height: 1.8;
}

.school-fees ul {
   padding-left: 0;
   /* Removes default list padding */
   list-style: none;
   /* Removes default bullets */
}

.school-fees ul li {
   display: flex;
   align-items: flex-start;
   /* Aligns bullet and text */
   margin-bottom: 15px;
   /* Adds spacing between list items */
}

.school-fees ul li i {
   margin-right: 10px;
   /* Spacing between bullet icon and text */
   color: #00709f;
   /* Theme color for the icon */
   flex-shrink: 0;
   /* Prevents resizing */
   font-size: 18px;
}

.school-fees ul li span {
   font-size: 16px;
   color: #555;
   line-height: 1.8;
   display: block;
   text-align: justify;
   /* Makes the text look neat */
}

.school-fees .image-box {
   position: relative;
   overflow: hidden;
   border-radius: 10px;
   /* Adds rounded corners to the image */
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   /* Adds a subtle shadow */
}

.school-fees .image-box img {
   transition: transform 0.5s ease;
   width: 100%;
   /* Responsive width */
   height: auto;
}

.school-fees .image-box:hover img {
   transform: scale(1.1);
   /* Adds zoom effect on hover */
}

/********************************/
/* Disciplinary Aspects */
/********************************/
.disciplinary-aspects {
   background-color: #f9f9f9;
   padding: 60px 0;
}

.disciplinary-aspects h1 {
   font-size: 40px;
   color: #00709f;
   /* Theme color */
   font-weight: 800;
}

.disciplinary-aspects p {
   font-size: 16px;
   color: #555;
   line-height: 1.8;
}

.disciplinary-aspects ul {
   padding-left: 0;
   /* Removes default list padding */
   list-style: none;
   /* Removes default bullets */
}

.disciplinary-aspects ul li {
   display: flex;
   align-items: flex-start;
   /* Aligns bullet and text */
   margin-bottom: 15px;
   /* Adds spacing between list items */
}

.disciplinary-aspects ul li i {
   margin-right: 10px;
   /* Spacing between bullet icon and text */
   color: #00709f;
   /* Theme color for the icon */
   flex-shrink: 0;
   /* Prevents resizing */
   font-size: 18px;
}

.disciplinary-aspects ul li span {
   font-size: 16px;
   color: #555;
   line-height: 1.8;
   display: block;
   text-align: justify;
   /* Makes the text look neat */
}

.disciplinary-aspects .image-box {
   position: relative;
   overflow: hidden;
   border-radius: 10px;
   /* Adds rounded corners to the image */
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   /* Adds a subtle shadow */
}

.disciplinary-aspects .image-box img {
   transition: transform 0.5s ease;
   width: auto;
   /* Responsive width */
   height: 550px;
}

.disciplinary-aspects .image-box:hover img {
   transform: scale(1.1);
   /* Adds zoom effect on hover */
}

/********************************/
/* Our Tradition */
/********************************/
.our_tradition {
   background-color: #f9f9f9;
   padding: 60px 0;
}

.our_tradition h1 {
   font-size: 40px;
   color: #00709f;
   /* Theme color */
   font-weight: 800;
}

.our_tradition p {
   font-size: 16px;
   color: #555;
   line-height: 1.8;
}

.our_tradition ul {
   padding-left: 0;
   /* Removes default list padding */
   list-style: none;
   /* Removes default bullets */
}

.our_tradition ul li {
   display: flex;
   align-items: flex-start;
   /* Aligns bullet and text */
   margin-bottom: 15px;
   /* Adds spacing between list items */
}

.our_tradition ul li i {
   margin-right: 10px;
   /* Spacing between bullet icon and text */
   color: #00709f;
   /* Theme color for the icon */
   flex-shrink: 0;
   /* Prevents resizing */
   font-size: 18px;
}

.our_tradition ul li span {
   font-size: 16px;
   color: #555;
   line-height: 1.8;
   display: block;
   text-align: justify;
   /* Makes the text look neat */
}

.our_tradition .image-box {
   position: relative;
   overflow: hidden;
   border-radius: 10px;
   /* Adds rounded corners to the image */
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   /* Adds a subtle shadow */
}

.our_tradition .image-box img {
   transition: transform 0.5s ease;
   width: auto;
   /* Responsive width */
   height: 550px;
}

.our_tradition .image-box:hover img {
   transform: scale(1.1);
   /* Adds zoom effect on hover */
}

/********************************/
/* Allied Institute */
/********************************/
.allied-institutes {
   background-color: #f9f9f9;
   /* Light background for clarity */
   padding: 60px 0;
}

.allied-institutes h1 {
   font-size: 40px;
   color: #00709f;
   /* Theme color */
   font-weight: 800;
}

.institute-box {
   background: #fff;
   padding: 30px;
   border-radius: 10px;
   height: 100px;
   width: 100%;
   min-width: 250px;
   max-width: 350px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   transition: all 0.3s ease;
   border: 1px solid rgba(0, 112, 159, 0.1);
}

.institute-box:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 20px rgba(0, 112, 159, 0.2);
}

.institute-box .institute-name {
   color: #00709f;
   font-size: 20px;
   margin-bottom: 10px;
   font-weight: 600;
}

.institute-box .institute-city {
   color: #666;
   font-size: 16px;
   margin: 0;
}

.institute-name {
   font-size: 18px;
   font-weight: bold;
   color: #333;
   margin-top: 10px;
}

.institute-city {
   font-size: 16px;
   color: #00709f;
   /* Theme color for city */
}

.shadow-sm {
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
   /* Subtle shadow */
}

/********************************/
/* Galleries */
/********************************/
.galleries {
   background-color: #f9f9f9;
   padding: 60px 0;
}

.galleries h1 {
   font-size: 40px;
   color: #00709f;
   font-weight: 800;
}

.gallery-box {
   position: relative;
}

.gallery-thumbnail {
   position: relative;
   overflow: hidden;
   border-radius: 10px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.gallery-thumbnail img {
   width: 100%;
   height: auto;
   transition: transform 0.3s ease;
}

.gallery-thumbnail:hover img {
   transform: scale(1.1);
   /* Zoom effect on hover */
}

.gallery-thumbnail .overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   color: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 0;
   transition: opacity 0.3s ease;
   border: 5px solid #00709f;
   /* Border design */
   box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4);
   /* Background highlighting effect */
}

.gallery-thumbnail:hover .overlay {
   opacity: 1;
   /* Show overlay on hover */
}

.gallery-thumbnail .overlay span {
   font-size: 18px;
   font-weight: bold;
   letter-spacing: 1px;
   text-transform: uppercase;
}

.gallery-name {
   font-size: 18px;
   font-weight: bold;
   color: #333;
   text-decoration: none;
}

.gallery-name a {
   text-decoration: none;
   color: #00709f;
   transition: color 0.3s ease;
}

.gallery-name a:hover {
   color: #005580;
}

/* Lightbox Modal */
.lightbox {
   display: none;
   /* Hidden by default */
   position: fixed;
   z-index: 9999;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.8);
   overflow: hidden;
   justify-content: center;
   align-items: center;
}

.lightbox .lightbox-image {
   max-width: 80%;
   max-height: 80%;
}

.lightbox .close {
   position: absolute;
   top: 20px;
   right: 30px;
   color: #fff;
   font-size: 30px;
   font-weight: bold;
   cursor: pointer;
}

.lightbox .prev,
.lightbox .next {
   position: absolute;
   top: 50%;
   font-size: 40px;
   color: #fff;
   cursor: pointer;
   transform: translateY(-50%);
   user-select: none;
}

.lightbox .prev {
   left: 20px;
}

.lightbox .next {
   right: 20px;
}

@media (max-width: 768px) {

   .infrastructure-box,
   .institute-box {
      min-width: 220px;
      max-width: 100%;
      margin-bottom: 20px;
   }
}


.facility-img {
   width: 100%;
   /* Ensures image is responsive */
   max-width: 850px;
   /* Set a reasonable max width */
   height: auto;
   /* Maintain aspect ratio */
   border-radius: 15px;
   /* Adds rounded corners */
   box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
   /* Fancy shadow effect */
   border: 5px solid #00709f;
   /* Adds a border with the theme color */
   padding: 5px;
   /* Adds spacing between the border and image */
   transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
   /* Smooth hover effect */
}

/* Hover Effect: Zoom-in & Glow */
.facility-img:hover {
   transform: scale(1.05);
   /* Slightly enlarges on hover */
   box-shadow: 15px 15px 25px rgba(0, 0, 0, 0.3);
   /* Deepens the shadow */
   border-color: #005a7f;
   /* Darkens the border on hover */
}

@media (max-width: 768px) {
   .facility-img {
      margin-bottom: 20px;
      /* Adds space below the image */
   }

   .col-md-6 {
      padding: 15px;
      /* Adds padding to both sides */
   }

   h1.text-theme {
      margin-top: 20px;
      /* Adds space above the heading */
   }
}