#about
#projects
#skills
#help {
    display: none;
}

body {
    background-color: #000000;
    color: rgb(85, 163, 242);
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #050e39;
    padding: 20px 0;
    text-align: center;
}

/* Style for the dropdown button */
.dropbtn {
    background-color: #032414e7;
    color: rgb(21, 202, 103);
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Dropdown container */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Show the dropdown content on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Terminal styles */
.terminal {
    width: 600px;
    height: 400px;
    border: 1px solid rgb(9, 1, 1);
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    background-color: rgb(3, 1, 1);
    display: flex;
    flex-direction: column;
    position: relative; /* Make .terminal a positioned container */
}

.terminal-header {
    background-color: #07a91a;
    color: rgb(7, 6, 6);
    padding: 8px;
    display: flex;
    justify-content: space-between;
}

.terminal-body {
    padding: 10px;
    height: calc(100% - 80px);
    overflow-y: auto;
    flex: 1;
    padding: 10px;
    font-family: monospace;
    position: relative; /* Make .terminal-body a positioned container */
}

.terminal-input {
    display: flex;
    align-items: center;
    background-color: rgba(3, 114, 36, 0.1); /* Terminal green */
    padding: 8px;
    border-radius: 5px;
    margin-top: auto; /* Push the input to the bottom */
    box-shadow: inset 0 0 3px rgba(202, 202, 202, 0.5); /* Add a shadow for better visibility */
    position: absolute; /* Position the input absolutely */
    bottom: 0; /* Position it at the bottom of .terminal-body */
    width: 90%; /* Occupy full width */
}

.terminal-input input {
    flex: 1;
    border: none;
    outline: none;
    margin-right: 8px;
    background-color: transparent;
    color: rgb(0, 69, 9);
    font-family: monospace;
    caret-color: #07a91a; /* Terminal green */
    font-size: 16px; /* Adjust font size as needed */
}

.blinking-cursor {
    /* Existing styles for .blinking-cursor */
    background-color: #07a91a; /* Terminal green */
    animation: blink-animation 1s infinite step-start;
    position: absolute;
    right: 8px;
    top: 50%; /* Position cursor at the top */
    transform: translateY(-50%); /* Center vertically */
}

/* Adjust focus styles for better visibility */
.terminal-input input:focus {
    box-shadow: none;
    border: none;
    outline: none;
}


.terminal-output {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    font-family: monospace;
    color:rgb(1, 125, 56)
}

.terminal-close {
    cursor: pointer;
}


nav {
    background-color: #141f72b9;
    padding: 10px 20;
    text-align: center;
}

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

nav ul li {
    display: inline-block;
    margin-right: 20px;
}

nav ul li a {
    color: #0af;
    text-decoration: none;
    font-size: 16px;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

nav ul li a:hover {
    background-color: #52409b;
    transition: background-color ease 0.9s;
}
#securityplus img {
    max-width: 150px;
    background-color: rgb(132, 132, 249);
    shape-outside: margin-box;
}
#about {
    padding: 1px 175px;
    background-color: rgb(30, 17, 53);
    text-align: center;
    color:rgb(198, 205, 201);
    border-style: groove;
    border-bottom-right-radius: 25%;
    border-bottom-left-radius: 25%;
}


/* Projects Section */
#projects {
    padding: 40px 20px;
    background-color: rgba(54, 11, 128, 0.265);
}

.project-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.project {
    background-color: rgba(29, 9, 102, 0.599);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

.project img {
    width: 100%;
    border-radius: 5px;
    margin-bottom: 10px;
    max-width: 100px;
}

.project h3 {
    color: #9e8fd0; /* Neon cyan color */
    margin-bottom: 10px;
}

.project p {
    color: rgb(158, 202, 245);
    margin-bottom: 15px;
}

.project .btn {
    background-color: rgb(27, 11, 114);
    color: rgb(97, 182, 213);
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.project .btn:hover {
    background-color: rgb(6, 9, 98);
}

/* Certifications Section  */
#certifications{
    padding: 40px 20px;
    background-color: rgba(54, 11, 128, 0.265);
}

.certifications-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.certifications {
    background-color: rgba(29, 9, 102, 0.599);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

.certifications img {
    width: 100%;
    border-radius: 5px;
    margin-bottom: 10px;
    max-width: 100px;
    background-color: whitesmoke;
}

.certifications h3 {
    color: #9e8fd0; /* Neon cyan color */
    margin-bottom: 10px;
}

.certifications p {
    color: rgb(158, 202, 245);
    margin-bottom: 15px;
}

.certifications .btn {
    background-color: rgb(27, 11, 114);
    color: rgb(97, 182, 213);
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.certifications .btn:hover {
    background-color: rgb(6, 9, 98);
}
/* Contact Section */
.contact-info img {
    width: 80px; /* Adjust the logo size as needed */
    height: auto;
    margin-bottom: 10px;
    
}

#contact {
    padding: 40px 20px;
    background-color: rgba(0, 0, 0, 0.261);
    color: #fff;
}

.contact-info {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.contact-info p {
    margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
    nav ul li {
        display: block;
        margin-bottom: 10px;
    }

    nav ul li:last-child {
        margin-bottom: 0;
    }
}


.intro {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 80px;
    color: rgb(185, 186, 213)
}

main {
    padding: 20px;
}

h2 {
    text-align: center;
}
.skill-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.skill {
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    background-color: rgb(30, 31, 87);
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.skill img {
    width: 80px; /* Adjust the logo size as needed */
    height: auto;
    margin-bottom: 10px;
    background-color: 
    opacity: 60%;
}

.skill h3 {
    margin-bottom: 10px;
    color: #170255; /* Neon cyan color */
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.8); /* Neon text effect */
}

.skill h3:hover {
    color: #05157f; /* Lighter neon cyan on hover */
}

.skill p {
    font-size: 14px;
    margin-bottom: 15px;
}

button {
    background-color: rgb(48, 8, 111);
    color: rgb(136, 185, 240);
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color 1s ease, box-shadow 1s ease;
    box-shadow: 0 0 20px rgba(65, 139, 19, 0.8); /* Glowing button effect */
}

button:hover {
    background-color: rgb(30, 18, 159);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
    animation: glow 1s infinite alternate; /* Keyframe animation */
}

@keyframes glow {
    to {
        box-shadow: 0 0 30px rgba(234, 44, 18, 0.8);
    }
}

footer {
    background-color: #0f1a4a;
    text-align: center;
    padding: 10px 0;
}

/* Modal styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Brighter modal background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}
/* Post click content */
.modal-content {
    background-color: rgb(66, 30, 158);
    padding: 20px;
    border-radius: 10px;
    color: rgb(160, 196, 238);
    position: center;
    text-align: center;
    max-width: 400px;
    width: 100%;
}

.modal-content p {
    margin-bottom: 0;
}
.modal-content img {
    max-width: 20%; /* Set the maximum width to 100% of the modal content */
    max-height: 200px; /* Set the maximum height to 200 pixels (adjust as needed) */
    display: block; /* Ensure the image is displayed as a block element */
    margin: auto; /* Center the image horizontally within the modal content */
    margin-bottom: 10px; /* Add some space below the image */
}
.close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    color: #fff;
    font-size: 24px;
}

/* Hover effects */
.skill:hover {
    transform: scale(1.05);
    background-color: rgb(24, 2, 65); /* Darker background on hover */
    transition: transform 0.9s ease, background-color 0.9s ease;
}