h1 {
			text-align: center;
			margin: 40px 0 20px;
			font-size: 3em;
			color: #004f47;
		} 
		.faculty {
			display: flex;
			gap: 40px; /* increased from 30px to 40px */
			justify-content: center;
			flex-direction: wrap;
			align-items: center;
			min-height: 100vh;
			flex-wrap: wrap;
			padding: 12px;
		}
		.card-1 {
            width: 300px; /* Fixed width of the card */
            height: 400px; /* Fixed height of the card */
            position: relative;
            cursor: pointer; /* Indicates it's interactive */
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
            border-radius: 12px; /* Slightly rounded corners */
			perspective: 1000px;
			margin: 15px; /* adds consistent space around each card */
            overflow: hidden; /* Ensures content stays within bounds */
			background-color: #dff2ee; /* Vibrant Pink/Magenta */
        }

        .inner-card-1 {
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.8s; /* Smooth transition for the flip */
            transform-style: preserve-3d; /* Key for 3D effect */
            position: relative;
            /* NEW: Background color for the inner-card and the flip effect */
            background-color: #90c3c8; /* Vibrant Pink/Magenta */
        }

        /* Flip effect on hover */
        .card-1:hover .inner-card-1 {
            transform: rotateY(180deg);
        }

        .card-face-1 {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden; /* Hides the back of the element when facing away */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            box-sizing: border-box; /* Include padding in element's total width and height */
            border-radius: 12px;
            /* NEW: Background color for card faces */
            background-color: #90c3c8; /* Vibrant Pink/Magenta */
            color: #2c3e50; /* Dark text color for readability */
        }

        .card-front-1 {
            transform: rotateY(0deg); /* Default position of the front face */
        }

        .card-back-1 {
            transform: rotateY(180deg); /* Initial rotation to hide the back face */
        }

        .card-front-1 img {
            width:200px;
            height: 200px;
            border-radius: 50%; /* Makes the image circular */
            object-fit: cover; /* Ensures image covers the area without distortion */
            margin-bottom: 15px;
            border: 4px solid rgba(255, 255, 255, 0.7); /* Light border around image */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        .card-front-1 h2 {
            margin-bottom: 5px;
            font-size: 1.6em;
            color: #333; /* Adjusted for better contrast on vibrant background */
        }

        .card-front-1 p {
            font-size: 1.1em;
            font-weight: bold;
            color: #555; /* Adjusted for better contrast */
            margin-top: 0;
        }

        .card-back-1 h3 {
            margin-bottom: 15px;
            font-size: 1.4em;
            color: #333; /* Adjusted for better contrast */
        }

        .card-back-1 ul {
            list-style: none; /* Remove bullet points */
            padding: 0;
            margin: 0 0 20px 0;
            text-align: left; /* Align list items to the left */
        }

        .card-back-1 ul li {
            margin-bottom: 8px;
            font-size: 1.0em;
            position: relative;
            padding-left: 20px; /* Space for a custom bullet */
        }

        .card-back-1 ul li::before {
            content: '•'; /* Custom bullet point */
            position: absolute;
            left: 0;
            color: #333; /* Adjusted for better contrast */
            font-size: 1.2em;
            line-height: 1;
        }

        .socials-1 {
            margin-top: auto; /* Pushes social icons to the bottom */
            display: flex;
            gap: 20px; /* Space between icons */
        }

        .socials-1 i {
            font-size: 2.0em;
            color: #333; /* Adjusted for better contrast */
            transition: color 0.3s ease;
        }

        .socials-1 i:hover {
            color: #000; /* Darker on hover */
        }