styles.css

/* Define the background and text colors for dark mode */
    :root {
        --bg-color: #333; /* Dark background for dark mode */
        --text-color: #fff; /* Light text for dark mode */
    }

    /* Dark mode styles */
    body.dark-mode, body.dark-mode * {
        background-color: var(--bg-color) !important;
        color: var(--text-color) !important;
    }

    /* Specific overrides for Materialize components in dark mode */
    body.dark-mode .hero-section,
    body.dark-mode .card,
    body.dark-mode .sidenav,
    body.dark-mode footer {
        background-color: var(--bg-color) !important;
        color: var(--text-color) !important;
    }

    /* Links, buttons, and other interactive elements */
    body.dark-mode a, body.dark-mode .btn, body.dark-mode .sidenav-trigger {
        color: var(--text-color) !important;
        border-color: var(--text-color) !important;
    }

    /* Hover effects for interactive elements */
    body.dark-mode a:hover, body.dark-mode .btn:hover, body.dark-mode .sidenav-trigger:hover {
        background-color: var(--text-color) !important;
        color: var(--bg-color) !important;
    }

    /* Ensure Materialize’s modal, dropdown, and other components match dark mode */
    body.dark-mode .modal, body.dark-mode .dropdown-content {
        background-color: var(--bg-color) !important;
        color: var(--text-color) !important;
    }

    /* Materialize components like cards and navbar */
    body.dark-mode .card, body.dark-mode .navbar {
        background-color: var(--bg-color) !important;
        color: var(--text-color) !important;
    }

     body.dark-mode .card {
      background-color: #444 !important;
      color: #fff;
    }
    body.dark-mode .input-field input,
    body.dark-mode .input-field textarea {
      background-color: #555 !important;
      color: #fff;
    }

    /* Global style for certification section */
#certifications {
        align-items: center !important;
    background-color: #f5f5f5 !important;
    padding: 30px 0 !important;
}

#certifications h2 {
    font-size: 28px !important;
    font-weight: 500 !important;
    text-align: center  !important;
    color: #673ab7 !important;
    margin-bottom: 20px !important;
}

.card {
    border-radius: 10px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    transition: box-shadow 0.3s ease !important;
}

.card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

.collection-item {
    padding: 15px 20px;
    border-bottom: 1px solid #ddd !important;
}

.collection-item:last-child {
    border-bottom: none !important;
}

.collection-item strong {
    font-size: 16px !important;
    color: #333 !important;
}

.collection-item em {
    font-size: 14px !important;
    color: #777 !important;
}

.collection-item ul {
    padding-left: 20px !important;
    margin-top: 10px !important;
}

.collection-item ul li {
    font-size: 14px !important;
    color: #444 !important;
}

.material-icons.left {
    font-size: 30px !important;
    margin-right: 10px !important;
}

/* Styling for dark mode */
body.dark-mode #certifications {
    background-color: #444 !important;
}

body.dark-mode .card {
    background-color: #555 !important;
    color: #fff;
}

body.dark-mode .collection-item {
    background-color: #333 !important;
    color: #fff;
}

body.dark-mode .collection-item em {
    color: #bbb !important;
}

body.dark-mode h2 {
    color: #bb86fc !important; 
}
 /* Adjust Hero Section on smaller screens */
    .hero-section {
        height: 100vh !important; /* Make sure it takes full screen height on mobile */
        padding: 50px 0 !important; /* Add padding to ensure content is well-spaced */
    }

    .hero .container {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important; 
        align-items: center !important;
    }

    .hero .row {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Adjusting content layout for mobile devices */
    .hero h1 {
        font-size: 2rem !important; /* Ensure it's smaller on mobile */
    }
    
    .hero p {
        font-size: 1rem !important;
    }

    /* Hero Section Text Styling */
    .hero .col {
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    /* Mobile Menu */
    .sidenav {
        width: 250px !important; /* Adjust the width of the sidenav on mobile */
    }

    /* Responsive Layout for smaller screens */
    @media (max-width: 768px) {
        .hero {
            padding: 60px 0 !important; /* More padding on smaller devices */
        }

        .hero .col {
            margin-bottom: 20px !important;
        }

        /* Adjust navbar for mobile */
        nav .sidenav-trigger {
            font-size: 2rem !important; /* Increase size for better readability */
        }

        /* Ensure proper spacing for mobile menu */
        .sidenav a {
            font-size: 1.2rem !important; /* Larger font for easier navigation */
        }
    }

    /* Adjust About Section on smaller screens */
    @media (max-width: 768px) {
        #about {
            padding: 20px 0 !important;
        }

        #about .container {
            text-align: center !important;
        }

        #about h2 {
            font-size: 2.2rem !important; /* Adjust heading size */
        }

        #about p {
            font-size: 1rem !important; /* Smaller text for better readability */
        }
    }