body {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100vh; /* Full viewport height */
    background-color: #f0f0f0; 
    font-family: 'Arial', sans-serif; 
    color: #fff;
}

/* Enables 3D perspective for the card flipping effect */
.card {
    perspective: 1000px; 
}

/* Style for the inner part of the card*/
.card-inner {
    position: relative; 
    width: 300px; 
    height: 450px; 
    text-align: center; 
    transition: transform 0.6s; /* Smooth transition for transform */
    transform-style: preserve-3d; /* Preserve 3D transformation for children */
}

/* to Flip the card on hover*/
.card:hover .card-inner {
    transform: rotateY(180deg); /* to rotate the card 180 degrees */
}

/*  styles for both the front and back sides of the card */
.card-front, .card-back {
    position: absolute; 
    width: 100%; 
    height: 100%; 
    backface-visibility: hidden; /* Hide the back face when not facing the viewer */
    border: 1px solid #ccc; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /*  for a slight shadow for depth */
    background-color: white; 
    border-radius: 10px; 
    padding: 20px; /* for padding inside the card */
    background-size: cover; /* for the background image to cover the entire card area */
    background-position: center; /* to center the background image */

}

/* to ensure the front side is on top */
.card-front {
    z-index: 2; /* Higher z-index to place it above the back side */
    background-image: url("background.jpg.png");
}

/* Rotate the back side*/
.card-back {
    transform: rotateY(180deg); /* to rotate the back side 180 degrees */
    background-image: url("background3.jpeg");/* Background image */
}
.card-back h2 {
    margin-bottom: 65px; 
    margin-top: -10px; 
}

/* Style for the profile photo */
.profile-photo{
    width: 135px; 
    height: 190px; 
    border-radius: 20%; 
    margin-bottom: 10px; /* Space below the photo */
    object-fit: cover; /* Maintain aspect ratio without stretching */
}
/* Style for the name text */
.name {
    font-size: 24px; 
    margin: 10px 0; 
}

/* Style for the description text */
.description {
    font-size: 16px; 
    margin: 10px 0; 
}

/* Style for the skills section */
.skills h2 {
    margin-bottom: 10px; /* Space below the skills header */
}

/* to remove default list styling */
.skills ul {
    list-style: none; /* to remove the default bullet points */
    padding: 0; /* to remove default padding */
}

/* Style  for each skill item */
.skills li {
    background-color: #240046; 
    margin: 5px 0; 
    padding: 5px; /* Padding inside each skill item */
    border-radius: 5px; 
}

/*  to enable JavaScript toggle flip */
.card-inner.is-flipped {
    transform: rotateY(180deg); /* Rotate the card 180 degrees */
}