@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* Global body style with rare color gradient */
body {
    background: linear-gradient(135deg, #f8e1f4, #e0f7fa);
    font-family: 'Poppins', sans-serif;
    color: #333;
}

/* Section styling */
#team {
    background: transparent !important;
}

section {
    padding: 30px 0;
}

section .section-title {
    text-align: center;
    color: #5e548e;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* Button style with unique colors */
.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, #ff7e67, #ffb347);
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #ffb347, #ff7e67);
    transform: translateY(-1px);
    box-shadow: 0px 6px 14px rgba(255, 126, 103, 0.4);
}

/* Card flip effect - keep original logic */

#team .card {
    border: none;
    background: linear-gradient(145deg, #d0f4de, #a9def9);
    border-radius: .25rem;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-flip:hover .backside,
.image-flip.hover .backside {
    transform: rotateY(0deg);
    border-radius: .25rem;
}

.image-flip:hover .frontside,
.image-flip.hover .frontside {
    transform: rotateY(180deg);
}

.mainflip {
    transition: 1s;
    transform-style: preserve-3d;
    position: relative;
}

.frontside {
    position: relative;
    transform: rotateY(0deg);
    z-index: 2;
    margin-bottom: 30px;
}

.backside {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotateY(-180deg);
    box-shadow: 5px 7px 9px -4px rgba(158, 158, 158, 0.5);
}

.frontside,
.backside {
    backface-visibility: hidden;
    transition: 1s;
    transform-style: preserve-3d;
}

.frontside .card,
.backside .card {
    min-height: 312px;
}

/* Card content */
/* Add this to your existing CSS */
#team .card {
    height: 100%; /* Make cards take full height of their container */
    min-height: 300px; /* Set a fixed minimum height */
    display: flex;
    flex-direction: column;
}

#team .card .card-body {
    flex: 1; /* Make card body take remaining space */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
}

#team .card .card-body .btn {
    margin-top: auto; /* Push button to bottom */
}

.frontside .card, .backside .card {
    min-height: 300px !important; /* Override any existing min-height */
    height: 100%;
}
.frontside .card .card-title,
.backside .card .card-title {
    color: #50394c !important;
    font-weight: 600;
}

.frontside .card .card-body img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Border image styling */
.border {
    border: 2px solid #ccc;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 3px 8px;
}

/* Footer */
small {
    color: #fff !important;
}

.footer {
    background: linear-gradient(135deg, #5e548e, #9f86c0);
    border-radius: 5px;
    box-shadow: 5px 6px 12px rgba(16, 30, 65, 0.4);
}

/* Modal animation - keep smooth */
.modal.fade .modal-dialog {
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.3s ease;
}

.modal.fade.show .modal-dialog {
    transform: scale(1);
    opacity: 1;
}