@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');

* {
    font-family: 'Calibri',important;
    color: white;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: black;
    font-size: 18px; /* Increases base font size */
}

h1 {
    font-size: 40px; /* Large heading */
}

h2 {
    font-size: 32px;
}

h3 {
    font-size: 28px;
}

p, a, button,li,ol,ul {
    font-size: 23px; /* Increases paragraph and button text */
}   
ul,li, ol {
    list-style-position: inside; /* Keeps bullets inside the box */
    padding-left: 20px; /* Adjust indentation */
}

button {
    background-color: white;
    color: black;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 20px; /* Larger button text */
}

button:hover {
    background-color: gray;
}




header {
    text-align: center;
    padding: 20px;
    background: rgba(28, 28, 28, 0.9); /* Darker header background */
}

.profile-pic {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    border: 5px solid #00ff00; /* Green border for a stylish look */
}

h1 {
    font-size: 3em;
    margin: 10px 0;
}

h2 {
    font-size: 2.5em;
    margin: 20px 0;
}

h3 {
    font-size: 2em;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    color: #00ff00; /* Neon green for links */
    text-decoration: none;
    transition: color 0.3s ease; /* Smooth transition for link color */
}

nav ul li a:hover {
    color: #ffffff; /* Change color on hover */
}

section {
    padding: 20px;
    margin: 20px auto;
    background: rgba(28, 28, 28, 0.7); /* Slightly transparent section background */
    border-radius: 8px;
    max-width: 800px; /* Limit section width */
}

.charts-container {
    display: flex;
    justify-content: space-around; /* Space between the charts */
    flex-wrap: wrap;
    margin: auto; /* Center the charts */
}

.project {
    margin: 10px 0;
}

.btn {
    background-color: #00ff00; /* Green background for buttons */
    color: #000; /* Black text */
    border: none;
    padding: 10px 20px;
    font-size: 1.2em;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Transition effects */
}

.btn:hover {
    background-color: #ffffff; /* Change background on hover */
    transform: scale(1.05); /* Slightly enlarge on hover */
}

footer {
    text-align: center;
    padding: 20px 0;
    background: rgba(28, 28, 28, 0.8);
}

.project-img {
    width: 150px; /* Set the width of project images */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Slightly round the corners */
    margin: 10px 0; /* Add margin for spacing */
    display: block; /* Ensure the image takes a block format */
    margin-left: auto; /* Center the image */
    margin-right: auto; /* Center the image */
}

.phone-link {
    color: #00ff00; /* Neon green color for the phone link */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Make the text bold */
}

.phone-link:hover {
    text-decoration: underline; /* Underline on hover */
    color: #ffffff; /* Change color on hover for visibility */
}

.whatsapp-link {
    background-color: #25D366; /* WhatsApp green */
    color: #ffffff; /* White text */
    text-decoration: none; /* Remove underline */
    padding: 10px 20px; /* Padding for button */
    border-radius: 5px; /* Rounded corners */
    font-size: 1.2em; /* Font size */
    display: inline-block; /* Make it behave like a button */
    transition: background-color 0.3s ease; /* Smooth transition */
}

.whatsapp-link:hover {
    background-color: #128C7E; /* Darker green on hover */
}

.circuit-diagram {
    width: 100%; /* Makes the image responsive */
    max-width: 600px; /* Set a maximum width for larger screens */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Optional: rounded corners */
    margin: 10px 0; /* Optional: add some space around the image */
}

.profile-link {
    display: inline-block;
    margin-top: 20px;
}

.btn {
    background-color: #4285F4;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
}

.btn:hover {
    background-color: #357ae8;
}

.project-info-btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: #28a745; /* Green color for prominence */
    color: white;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, transform 0.3s;
}

.project-info-btn:hover {
    background-color: #218838; /* Darker green on hover */
    transform: scale(1.05);
}

.project-info-btn:focus {
    outline: none;
}


/* Make images responsive */
img {
    max-width: 100%;  /* Ensures images don't overflow */
    height: auto;  /* Maintains aspect ratio */
}

/* Adjust images for smaller screens */
@media (max-width: 768px) {
    img {
        width: 100%;  /* Full width for small screens */
        height: auto;
        object-fit: contain; /* Prevents stretching */
    }
}