/* Custom Styles to augment Bootstrap */

/* General Styling */
html {
    scroll-behavior: smooth;
}

.lead{
		font-size:30px;
		color:yellow;
}

#home{
	background-image:url('./images/SCHOOL_FRONT.jpg');
	background-size:cover;
	background-repeat:none;
	height:600px;
	background-attachment:fixed;
	color:yellow;
}
.lead{
	color:white;
}

/* Hero Section Background (Can use an actual image later) */
.hero-section {
    background-color: #e9f7fe; /* Very light blue */
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card{
	width:100%;
	height:500px;
}
/* Image styling for Faculty/Team */
.card img {
    width: 100%; /* Make images fill card width */
    height: 70%; 
    margin-top: 30px;
    object-fit: cover; /* Ensures image covers area without distortion */
}


/* Nav Link Hover effect */
.navbar-nav .nav-link:hover {
    color: var(--bs-warning) !important; /* Use Bootstrap warning color */
}

#contain{
	width:100%;
	background-image:url('./images/banner.jpg');
	height:500px;
	background-repeat: no-repeat; /* Prevents image repetition */
    background-size: cover; /* Scales the image to cover the entire element */
    background-attachment: fixed; /* Keeps the background fixed when scrolling */
}

.card-banner{
	margin-top:100px;
	text-align:center;
}


#contain1{
	margin-top:50px;
	margin-bottom:50px;
	text-align:center;
}
#contain-row1{
	margin-top:50px;
}

#img-contain{
	width:70%;
}

#contain-row2{
	margin-top:50px;
}



#facilities{
	margin-top:30px;
}

.facility-container { max-width: 1000px; margin: auto; }
        
        /* Flexbox Row for the two-column split */
        .facility-row { 
            display: flex; 
            flex-wrap: wrap; 
            background: #fff; 
            margin-bottom: 20px; 
            border-radius: 12px; 
            overflow: hidden; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            align-items: center;
        }

        /* Icon Section (30% width) */
        .facility-icon-col {
            flex: 0 0 30%;
            background-color: #e8f0fe;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 30px;
        }

        .facility-icon-col img { width: 80px; height: 80px; }

        /* Text Section (70% width) */
        .facility-text-col {
            flex: 0 0 70%;
            padding: 30px;
            box-sizing: border-box;
        }

        .facility-text-col h3 { margin-top: 0; color: #2c3e50; font-size: 1.5rem; }
        .facility-text-col p { color: #555; line-height: 1.6; margin-bottom: 0; }

        /* Responsive adjustments for mobile */
        @media (max-width: 768px) {
            .facility-icon-col, .facility-text-col { flex: 0 0 100%; text-align: center; }
        }
        

    
    
    
/* Centering the content inside the team card */
.team-card {
    display: flex;
    flex-direction: column; /* Stack image and card-body vertically */
    align-items: center;    /* Horizontal centering for all children */
    justify-content: center;/* Vertical centering */
    padding-top: 20px;      /* Adds some breathing room at the top */
    transition: transform 0.3s ease; /* Smooth hover effect */
}

/* Styling the image to be centered and uniform */
.member-img {
    width: 100%;           /* Set a fixed width */
    height: 150px;          /* Set a fixed height */
    object-fit: cover;      /* Prevents image stretching */
    border-radius: 50%;     /* Makes the image a perfect circle */
    margin-top: 10px;       /* Spacing from the top of the card */
}

/* Ensuring the card body takes up correct space */
.team-card .card-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;    /* Ensures text inside card-body stays centered */
}

/* Optional: Hover effect for a professional look */
.team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
}