h1{
	color:#17183B; 
	text-align: center;
	
}
h3{
	color:#17183B;
}

h2{
	
	
}

/* Style for the language switch button */
.switch-btn {
	 margin: 5px;
    padding: 10px 20px; /* Increased padding for a button-like appearance */
    border-radius: 5px;
    background-color: #C98CA7 !important;
    color: #F2EFE9 !important;
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Makes the anchor tag behave like a button */
    border: none; /* No border */
    cursor: pointer; /* Pointer cursor on hover */
    text-align: center; /* Center text */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}
a:link{
	/* test-decoration:none; gets rid of line  */
	text-decoration-style: none;
	color:#C98CA7;;
}
a:visited{
	color:#C98CA7;
}


th{
	text-align:center;
}

body{
	
	background-color: #7796CB;

}

div{
	background-color:#F2EFE9;
	color:#17183B;
	/* width: 75%;*/
    height: auto;
	padding: 3%; 
	margin: 0 auto;
    border-radius: 15px; /* Curves the edges with a radius of 15px */
	
}

.bullet{
		padding: 20px;
}

.curved{
    width: 75%;
    height: auto;
	padding: 3%;
	margin: 0 auto;
    border-radius: 15px; /* Curves the edges with a radius of 15px */
	box-sizing: border-box;
	
}
.table{
	background-color:#606D5D;
	color:#F2EFE9;
	border-collapse: collapse;
	margin: 0 auto;
}

.table tr, .table td{
	border: 2px solid #F2EFE9;
	padding: 1%;
	text-align: left;
}


.title {
    text-align: center; /* Center the title */
    font-size: 24px; /* Adjust font size as needed */
    margin-bottom: 10px; /* Add space below title */
}


.pic {
    display: flex; /* Defines how images are aligned */
    flex-wrap: wrap; /* Allows the images to wrap onto the next line */
	justify-content: space-between; 
}

.pic img {
    width: 33.33%; /* Each image takes up 1/3 of the screen width */
    height: auto; /* Keeps the image's aspect ratio */
	border: 10% white;
}

@media (max-width: 600px) { /* Media query for smaller screens */
    .pic img {
        width: 100%; /* On smaller screens, each image takes up 100% of the width */
    }
}

* {
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    box-sizing: border-box; /* Include padding and border in the element's total width */
}

nav {
    background-color: #17183B; /* Dark background */

	
}

.top-menu{
	width: 100%;
	list-style-type: none; /* Remove bullet points */
    display: flex; /* Align list items in a row */
    justify-content: space-around; /* Space out the menu items */
    padding: 10px;

	
}

.top-menu li {
	position: relative; /* Needed for dropdown positioning */
    margin: 0 15px; /* Add some spacing between menu items */
}

.top-menu a {
    color: #F2EFE9 ;
    text-decoration: none; /* Remove underline from links */
    padding: 10px 20px; /* Add some padding to make it clickable */
    display: block; /* Make links fill the li element */
    font-size: 18px;
}

.top-menu a:hover {
    background-color: #C98CA7; /* Darker background when hovered */
    border-radius: 5px; /* Slight rounded corners on hover */
}

.dropdown-menu {
    display: none; /* Initially hide the dropdown menu */
    position: absolute; /* Position relative to the parent <li> */
    top: 100%; /* Position below the parent item */
    left: 0; /* Align to the left of the parent item */
	width: 100%; /* same width as parent */
    background-color: #17183B; /* Same dark background as the nav */
    padding: 10px 0; /* Add some vertical padding */
    list-style: none; /* Remove bullet points */
    border-radius: 5px; /* Slight rounded corners */
    z-index: 1000; /* Ensure it appears above other content */
}

.dropdown-menu li {
    margin: 0; /* Remove margins */
}

.dropdown-menu a {
    padding: 10px 20px; /* Add padding to dropdown links */
    font-size: 16px; /* Slightly smaller font size */
    white-space: nowrap; /* Prevent text wrapping */
	display: block; /* Ensure the full area is clickable */
}
.dropdown-menu a:hover {
    background-color: #C98CA7; /* Highlight on hover */
}

/* Show the dropdown menu when hovering over the parent <li> */
.dropdown:hover .dropdown-menu {
    display: block;
}

/*

separateer

*/
/* card stuff */ 

.card-container {
    display: flex;
    flex-direction: column; /* Stack cards vertically */
    gap: 30px; /* Space between cards */
    margin: 0 auto; /* Center the container */
    width: 75%; /* Adjust container width */
    max-width: 800px; /* Limit maximum width */
    padding: 20px; /* Add padding for consistent spacing */
}

.card {
    width: 100%; /* Full width of the container */
    height: 300px; /* Taller cards */
    background-color: #F2EFE9; /* Light background color */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    overflow: hidden; /* Prevent overflow */
    perspective: 1000px; /* Enable 3D flipping */
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.card.flip .card-inner {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto; /* Allow scrolling for overflow content */
    font-size: 1.2rem; /* Larger, readable font */
    border-radius: 15px; /* Match card rounding */
}

.card-front {
    background-color: #606D5D;
    color: #C98CA7;
}

.card-back {
   background-color: #F2EFE9;
    color: #606D5D;
    transform: rotateY(180deg);
}

/* Fix first-card issue (optional: content-specific adjustment) */
.card:first-child .card-inner {
    padding-top: 20px; /* Ensure top content is visible */
}

/* Responsive Adjustments */
@media (max-width: 600px) {
    .card-container {
        width: 90%; /* Slightly narrower container */
    }

    .card {
        height: 250px; /* Adjust card height for smaller screens */
    }

    .card-front, .card-back {
        font-size: 1rem; /* Smaller font on mobile */
    }
}


.card img {
    max-width: 100%; /* Make images responsive */
    height: auto; /* Maintain aspect ratio */
    margin: 10px 0; /* Space around images */
}




.flip-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
}

.flip-card {
    perspective: 1000px;
    width: 270px;
    height: 270px;
}

.flip-card-inner {
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

.flip-card:hover .flip-card-inner,
.flip-card.clicked .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-size: 18px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.flip-card-front {
    background-color: #606D5D;
    color: #C98CA7;
	text-align: center;
}

.flip-card-back {
    background-color: #F2EFE9;
    color: #606D5D;
    transform: rotateY(180deg);
}


.card-image {
    width: 100%; /* Adjust to fit the container */
    max-width: 200px; /* Set a maximum width */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Centers the image in the card */
    margin: 0 auto; /* Centers horizontally */
	transform: rotate(270deg);
}

.rotate-90 {
	width: 100%; /* Adjust to fit the container */
    max-width: 400px; /* Set a maximum width */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Centers the image in the card */
    margin: 0 auto; /* Centers horizontally */
    transform: rotate(270deg);

}