* {
    margin: 0;
    padding: 3px;
    box-sizing: border-box;
}

/* Dark theme */
body {
    background-color: #1d1d1d; /* Dark background color */
    color: #fff;
    font-family: Arial, sans-serif;
}

.center-heading {
    text-align: center; /* Center the text horizontally */
    font-size: 22px; /* Adjust the font size as needed */
   
    margin-bottom: 10px; /* Add spacing at the top */
    color: lightskyblue; /* Set the text color */
}

/* Style for normal links */
a {
    text-decoration: none; /* Remove underline */
    color: #fff; /* Inherit color from parent */
}

/* Style for links when hovered */
a:hover {
    text-decoration: underline; /* Add underline on hover if needed */
    color: #fff; /* Inherit color from parent on hover */
}

/* Header Styles */
header {
    background-color: #222;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

.logo img {
    max-width: 100%;
    height: auto;
}

nav ul {
    list-style: none;
    display: flex;
    flex-wrap: nowrap; /* Prevent navigation items from wrapping */
    overflow-x: auto; /* Enable horizontal scrolling on small screens */
}

nav li {
    margin-right: 20px;
}

nav a {
    text-decoration: none;
    color: #fff;
	padding: 6px;
    transition: color 0.3s;
}

nav a:hover {
    color: #fff;
}


/* CSS for Styled Paragraph List */
.paragraph-list {
    list-style-type: none; /* Remove default list bullets */
    padding: 0; /* Remove default padding */
}

.paragraph-list li {
    margin-bottom: 20px; /* Add space between each paragraph */
}

/* Additional styling for paragraphs within the list */
.paragraph-list p {
    padding-left: 20px; /* Add left padding to paragraphs */
    text-indent: -10px; /* Create a hanging indent effect */
}

/* Style for list items (optional) */
.paragraph-list li:before {
    content: "\2022"; /* Use a bullet character as the list marker */
    color: #0077b6; /* Customize the bullet color */
    display: inline-block;
    width: 1em;
    margin-left: -1em; /* Offset the bullet to the left */
}




/* Header Styles */


/* Main Container Styles */
main {
    padding: 60px 20px; /* Adjusted padding for mobile */
    margin-top: 40px;
}

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0 6px;
}

.card {
    background-color: #292929;
    border-radius: 10px;
    box-shadow: -1px -1px 0px #232313, -1px 1px 1px #2c2c2c;
    margin: 10px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    width: calc(50% - 20px); /* Updated responsive card width for small screens */
    max-width: 200px; /* Adjusted maximum card width */
    text-decoration: none;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: -2px -2px 5px #232323, 2px 2px 5px #2c2c2c;
}

.card:active {
    transform: translateY(0);
    box-shadow: inset -2px -2px 5px #232323, inset 2px 2px 5px #2c2c2c;
}

.card i {
    color: #fff;
    font-size: 32px; /* Adjusted font size for mobile */
    margin-bottom: 10px;
}

.card h2 {
    color: #fff;
    font-size: 14px; /* Adjusted font size for mobile */
    font-weight: bold;
    margin: 0;
}

/* Footer Styles */
footer {
    background-color: #222;
    color: #fff;
    padding: 12px 0;
    font-size: 14px;
    text-align: center;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

.footer-section {
    flex: 1;
    margin: 10px; /* Updated margin for mobile */
    text-align: center; /* Center align footer sections for mobile */
}

.footer-section h2 {
    font-size: 16px;
    margin-bottom: 10px;
    color: lightskyblue;
}

.footer-section p {
    font-size: 14px;
    margin-bottom: 10px;
}

.contact span {
    display: block;
    margin-bottom: 10px;
}

.social-icons {
    margin-top: 4px;
    text-align: center; /* Center align social icons for mobile */
}

.social-icons a {
    color: #fff;
    font-size: 20px;
    margin: 0 10px; /* Adjusted margin for mobile */
    text-decoration: none;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: #00f;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-section ul li a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-bottom {
    background-color: #111;
    color: #777;
    padding: 10px 0;
    font-size: 12px;
}


/* Media Query for Small Screens */
@media screen and (max-width: 768px) {
    /* Existing header styles */
    * {
    margin: 0;
    padding: 1px;
    box-sizing: border-box;
}
    
    
    header {
        padding: 6px;
    }

    nav ul {
        margin-left: 10px;
        flex-direction: row;
    }

    nav li {
        margin: 10px 0;
    }
    
    
    .center-heading {
    text-align: center; /* Center the text horizontally */
    font-size: 20px; /* Adjust the font size as needed */
    margin-top: -22px;
    margin-bottom: 4px;
     /* Add spacing at the top */
    color: lightskyblue; /* Set the text color */
}
    
    
    .footer-content {
        flex-direction: column;
        align-items: center;
    }

    .footer-section {
        flex: 2;
        margin: 10px 0;
        text-align: center;
    }

    /* Updated footer styles for mobile */
    .footer-section {
   /* background-color: #272727; */
    padding: 22px 80px;
    border-bottom: 1px solid #2a2a2a;
    margin-bottom: 20px;
    }

    .footer-section h2 {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .footer-section p {
        font-size: 12px;
        margin-bottom: 12px;
    }

    .contact span {
        font-size: 12px;
        margin-bottom: 10px;
        text-align: left;
    }

    .social-icons {
        margin-top: 10px;
    }

    .social-icons a {
        font-size: 18px;
        margin: 0 8px;
    }

    .footer-section ul li {
        margin-bottom: 8px;
    }

    .footer-section ul li a {
        font-size: 12px;
    }

    .footer-bottom {
        padding: 8px 0;
        font-size: 10px;
    }
}