header {
    position: sticky;
    top: 0;
    z-index: 1000;
}* {
            box-sizing: border-box;
        }

        body {
            font-family: Tahoma, sans-serif;
            margin: 0;
            background-color: white;
            color: #333; /* Dark text for readability */
        }

        html {
            box-sizing: border-box;
        }

        .topnav {
            display: flex; /* Use Flexbox for layout */
            align-items: center; /* Center items vertically */
            background-color: #D70F64; /* Primary color */
            padding: 15px 10px; /* Reduced padding for thickness */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Shadow for depth */
            transition: background-color 0.3s; /* Smooth background transition */
            justify-content: space-between; /* Adjust space between items */
        }

        .topnav:hover {
            background-color: #c70e56; /* Darker shade on hover */
        }

        .topnav a {
            color: #f2f2f2; /* Light color for text */
            padding: 10px 15px; /* Reduced padding for links */
            text-decoration: none;
            font-size: 18px; /* Font size */
            transition: color 0.3s, transform 0.3s; /* Transition for hover effects */
        }

        .topnav a:hover {
            color: black; /* Text color on hover */
            transform: scale(1.1); /* Slight zoom effect */
        }

        .topnav a.active {
            background-color: #D70F64; /* Active link color */
            color: white; /* Active text color */
            transform: scale(1.1); /* Slight zoom effect for active link */
        }

        .topnav a.profile {
            margin-left: auto; /* Push the profile link to the right */
        }

        .dropdown {
            background-color: #D70F64 !important;
            color: white !important;
            border-radius: 8px !important;
            padding: 10px 15px !important;
            font-size: 17px !important;
            border: none !important;
            cursor: pointer !important;
            transition: background-color 0.3s, transform 0.3s !important;
            position: relative !important;
            z-index: 1000 !important;
            margin: 0 10px !important;
        }

        .dropbtn {
            color: white; /* Button text color */
            border-radius: 8px;
            padding: 10px 15px; /* Reduced padding for dropdown button */
            font-size: 17px; /* Font size */
            border: none;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.3s; /* Transition for button */
        }

        .dropbtn:hover {
            color: black; /* Text color on hover */
            transform: scale(1.1); /* Slight zoom effect */
            background-color: #D70F64;
        }

        .dropdown-content {
            display: none; /* Hide by default */
            position: absolute;
            background-color: #ffffff; /* White background for contrast */
            min-width: 160px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Softer shadow for depth */
            z-index: 1;
            width: 100%; /* Make dropdown content full width */
            border-radius: 8px; /* Rounded corners */
            overflow: hidden; /* Clip child elements */
            transition: opacity 0.3s ease; /* Smooth appearance */
            opacity: 0; /* Start hidden */
        }

        .dropdown:hover .dropdown-content {
            display: block; /* Show dropdown content on hover */
            opacity: 1; /* Fade in effect */
        }

        .dropdown-content a {
            color: #333; /* Dark text for readability */
            padding: 12px 16px; /* Padding for links */
            text-decoration: none;
            display: block;
            transition: background-color 0.3s, color 0.3s; /* Transition for hover */
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1; /* Light background on hover */
            color: #D70F64; /* Change text color on hover */
            padding-left: 20px; /* Indent effect on hover */
        }

        .dropdown-content a:not(:last-child) {
            border-bottom: 1px solid #eee; /* Light separator between items */
        }

        .website-title-container {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-grow: 1; /* Take up available space */
            margin-left: -250px; /* Shift logo and text left */
        }

        .website-title {
            font-family: "Gotham", "Helvetica Neue", Arial, sans-serif;
            font-size: 35px; /* Adjust font size */
            color: #f2f2f2; /* Text color */
            font-weight: bold; /* Make text bold */
            margin: 0 10px; /* Space between text and logo */
        }

        .website-logo {
            width: 40px; /* Square logo size */
            height: 40px; /* Square logo size */
            object-fit: cover; /* Ensure image fits without distortion */
            border-radius:4px;
        }

        .row {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .column {
            width: 25%;
            margin-bottom: 16px;
            padding: 0 8px;
            border-radius: 25px;
            flex: 1;
            min-width: 250px;
        }

        .card {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            margin: 8px;
            border-radius: 20px;
            overflow: hidden;
            transition: box-shadow 0.3s ease, transform 0.3s ease;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .card:hover {
            transform: translateY(-8px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
            color: orange;
        }

        .about-section {
            padding: 0px;
            text-align: center;
            background-color: #D70F64;
            color: white;
        }

        .container {
            padding: 0 16px;
            flex-grow: 1;
        }

        .container::after, .row::after {
            content: "";
            clear: both;
            display: table;
        }

        .title {
            color: black;
        }

        .button {
            border: none;
            outline: 0;
            display: inline-block;
            padding: 8px;
            color: black;
            background-color: #FFDD57;
            text-align: center;
            cursor: pointer;
            width: 100%;
            border-radius: 20px;
        }

        .button:hover {
            background-color: #fcd12a;
            color: #cd5c5c;
        }

        @media screen and (max-width: 650px) {
            .column {
                width: 100%;
                display: block;
            }
            .website-title-container {
                flex-direction: column;
                margin-left: 0; /* Remove left shift on small screens */
            }
            .website-title {
                margin: 5px 0;
            }
        }

        .image-container {
            height: 200px;
            overflow: hidden;
        }

        .card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 20px 20px 0 0;
        }
        .high-contrast {
    background-color: black;
    color: yellow;
}