/* General Styles */
/* body {
    font-family: Arial, sans-serif;
    background-color: #dadbdc; /* Light background color 
    color: #F4F6F8; /* Dark text color 
} */

/* Container Styles */
.container {
    max-width: 800px; /* Limit the width of the container */
    margin: 0 auto; /* Center the container */
    padding: 20px;
    background-color: white; /* White background for content */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Heading Styles */
h2 {
    text-align: center; /* Center the main heading */
    color: #43141E; /* Main heading color */
    margin-bottom: 20px; /* Space below main heading */
}

/* Tabs Styles */
.tabs {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px; /* Space below tabs */
}

.tablinks {
    background-color: #f0f8ff; /* Tab background */
    border: none; /* Remove border */
    color: #43141E; /* Tab text color */
    padding: 10px 15px; /* Padding inside tabs */
    cursor: pointer; /* Pointer on hover */
    transition: background-color 0.3s; /* Smooth transition */
    border-radius: 5px; /* Rounded corners */
}

.tablinks:hover {
    background-color: #FFD700; /* Light blue on hover */
}

.tablinks.active {
    background-color: #43141E; /* Active tab color */
    color: white; /* Active tab text color */
}

/* Tab Content Styles */
.tabcontent {
    display: none; /* Hide all tab content by default */
    color: #43141E;
}

.tabcontent.active {
    display: block; /* Show active tab content */
}

/* Button Styles */
.btn-primary {
    background-color: #43141E; /* Button color */
    border: none; /* Remove border */
    color: white; /* Text color for button */
    padding: 10px 20px; /* Button padding */
    border-radius: 5px; /* Rounded button corners */
    cursor: pointer; /* Pointer on hover */
    transition: background-color 0.3s; /* Smooth transition */
}

.btn-primary:hover {
    background-color: #FFD700; /* Darker blue on hover */
}

/* Responsive Styles */
@media (max-width: 600px) {
    .container {
        padding: 15px; /* Reduce padding on small screens */
    }

    .btn-primary {
        width: 100%; /* Full-width button on small screens */
    }

    h2 {
        font-size: 1.5em; /* Adjust heading sizes */
    }

    .tablinks {
        flex: 1; /* Equal width tabs on small screens */
        margin: 0 5px; /* Space between tabs */
    }
}