* {
    padding: 0;
    margin: 0;
}

body {
    background-color: rgb(4, 4, 54);
    color: azure;
    font-family: "Poppins", sans-serif;
}

nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 5rem;
    /* background-color: rgb(6, 6, 89); */
    background: rgba(6, 6, 89, 0.474);
    backdrop-filter: blur(0.7rem);
    position: fixed;
    top: 0%;
    width: 100vw;
}

#myName {
    cursor: pointer;
}

.right ul {
    list-style: none;
    display: flex;
}
.right ul li {
    margin: 0 1rem;
    padding: 1rem 0;
}
.right ul li a {
    color: azure;
    text-decoration: none;
}

.right ul li a:hover {
    color: rgb(149, 149, 255);
    font-size: 1.01rem;
}

.left {
    margin: 0 1rem;
    padding: 1rem 0;
    font-size: 1.4rem;
}

.toggle-menu {
    visibility: hidden;
}

.firstSection {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 2rem 0;
    min-height: 90vh;
}

.leftSection {
    font-size: 2.2rem;
    margin: 2rem 8rem;
}
.rightSection {
    margin: 2rem 1rem;
}
.rightSection img {
    width: 75%;
}

.firstSectionHr {
    border: 0;
    background: #2a0b98;
    height: 0.2rem;
    margin: 1rem 3rem;
}

.btn-resume {
    margin-right: 0.6rem;
}
.btn-github {
    margin-left: 0.6rem;
}

.buttons {
    margin: 0.8rem 0;
}

/* about section css */

.aboutSection {
    margin: 0.5rem 1.3rem;
    min-height: 80vw;
    padding: 5.7rem 7rem;
}

.about {
    font-weight: 400;
    font-size: 2.5rem;
}

.my-name {
    color: rgb(255, 0, 255);
}

.about-para {
    font-size: 1.15rem;
    padding: 1rem 0;
}

.highlight {
    text-decoration: underline;
}

.aboutMain {
    display: flex;
    justify-content: space-around;
    margin: 1rem 0rem;
}

.aboutLeft {
    margin-right: 1rem;
}
.aboutLeft ul li {
    list-style: none;
    margin: 0.8rem 0;
}
.aboutLeft ul li b {
    margin-right: 0.8rem;
}

.aboutHr {
    border: 1 solid;
    border-color: #2a0b98;
}

.aboutRight {
    margin-left: 1rem;
}

.aboutRightHeading {
    font-size: 1.4rem;
    font-weight: 500;
}

.aboutRightHr {
    border: 0;
    background: #2a0b98;
    height: 0.14rem;
}

.aboutRightDetail {
    margin: 1.5rem 0;
}

.langKnownHr {
    border: 0;
    background: #2a0b98;
    height: 0.1rem;
}

.langKnown img {
    width: 5.5rem;
    margin: 0 0.5rem;
}
.langKnown {
    display: flex;
    align-items: center;
    padding: 1rem 0;
}

.mainContactme {
    padding: 7rem 0;
}

/* Contact form styles */
.contact-form {
    max-width: 37.5rem; /* Converted from 600px to 37.5rem */
    margin: 0 auto; /* Center the form horizontally */
    background-color: rgba(6, 6, 89, 0.474); /* Semi-transparent background */
    padding: 1.25rem; /* Converted from 20px to 1.25rem */
    border-radius: 0.5rem; /* Converted from 8px to 0.5rem */
    box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.1); /* Converted from 10px to 0.625rem */
}

.contact-form h2 {
    margin-bottom: 1.25rem; /* Converted from 20px to 1.25rem */
    color: #c500f7; /* Purple text color */
}

.contact-form div {
    margin-bottom: 0.9375rem; /* Converted from 15px to 0.9375rem */
}

.contact-form label {
    display: block; /* Make labels display as blocks */
    font-weight: bold; /* Bold label text */
    color: azure; /* Light text color */
}

.contact-form input,
.contact-form textarea {
    width: 98%; /* Make input fields and textarea full width */
    padding: 0.625rem; /* Converted from 10px to 0.625rem */
    border: 0.0625rem solid azure; /* Converted from 1px to 0.0625rem */
    border-radius: 0.3125rem; /* Converted from 5px to 0.3125rem */
    background-color: transparent; /* Transparent background */
    color: azure; /* Light text color */
}

.contact-form textarea {
    height: 9.375rem; /* Converted from 150px to 9.375rem */
}

.contact-form button {
    background-color: #c500f7; /* Purple button background */
    color: azure; /* White button text */
    padding: 0.625rem 1.25rem; /* Converted from 10px 20px to 0.625rem 1.25rem */
    border: none; /* Remove the default button border */
    border-radius: 0.3125rem; /* Converted from 5px to 0.3125rem */
    cursor: pointer; /* Add pointer cursor on hover */
    transition: background-color 0.3s; /* Smooth transition for background color */
}

.contact-form button:hover {
    background-color: #7300a2; /* Darker purple on hover */
}

/* project section */

.projectsSection {
    padding: 7rem 0; /* Converted from 50px to 3.125rem */
    text-align: center;
}

.sectionTitle {
    font-size: 2rem; /* 32px */
    margin-bottom: 1.875rem; /* Converted from 30px to 1.875rem */
    color: #c500f7; /* Purple color */
}

.projectCards {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(18.75rem, 1fr)
    ); /* Converted from 300px to 18.75rem */
    gap: 1.875rem; /* Converted from 30px to 1.875rem */
    justify-items: center;
}

.projectCard {
    background-color: rgba(
        6,
        6,
        89,
        0.9
    ); /* Dark background with transparency */
    border-radius: 0.625rem; /* Converted from 10px to 0.625rem */
    padding: 1.25rem; /* Converted from 20px to 1.25rem */
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1); /* Converted from 0 4px 6px rgba(0, 0, 0, 0.1) */
}

.projectImage {
    width: 100%;
    border-radius: 0.5rem; /* Converted from 8px to 0.5rem */
    margin-bottom: 1.25rem; /* Converted from 20px to 1.25rem */
}

.projectTitle {
    font-size: 1.5rem; /* 24px */
    margin-bottom: 0.625rem; /* Converted from 10px to 0.625rem */
    color: azure; /* Light text color */
}

.projectDescription {
    font-size: 1rem; /* 16px */
    color: #ccc; /* Light gray text color */
    margin-bottom: 1.25rem; /* Converted from 20px to 1.25rem */
}

.projectLink {
    display: inline-block;
    padding: 0.625rem 1.25rem; /* Converted from 10px 20px to 0.625rem 1.25rem */
    background-color: #c500f7; /* Purple color */
    color: azure; /* Light text color */
    text-decoration: none;
    border-radius: 0.3125rem; /* Converted from 5px to 0.3125rem */
    transition: background-color 0.3s ease;
}

.projectLink:hover {
    background-color: #7300a2; /* Darker purple color on hover */
}

/* utility */

.purple {
    color: #c500f7;
}

.h-color {
    color: rgb(255, 0, 255);
}

.btn {
    padding: 1rem 1.5rem;
    background: linear-gradient(
        90deg,
        rgba(137, 0, 247, 1) 0%,
        rgba(245, 0, 247, 1) 100%
    );
    border: 0.1rem solid;
    border-color: antiquewhite;
    border-radius: 0.6rem;
    cursor: pointer;
    font-size: 1rem;
}
.btn:hover {
    background: linear-gradient(
        90deg,
        rgba(245, 0, 247, 1) 0%,
        rgba(137, 0, 247, 1) 100%
    );
    transition: ease;
}

/* responsive */

@media screen and (max-width: 1190px) {
    .firstSection {
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }
    .rightSection {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .leftSection {
        margin: 0.5rem 2rem;
    }

    .buttons {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .rightSection img {
        width: 50vw;
    }

    .aboutSection {
        padding: 5.7rem 0.8rem;
    }

    .aboutMain {
        flex-direction: column;
    }

    .aboutRight {
        margin: 1rem auto;
    }

    /* .btn-resume {
        margin-right: 0.6rem;
    }
    .btn-github {
        margin-left: 0.6rem;
    } */
}

@media screen and (max-width: 850px) {
    nav {
        flex-direction: column;
        height: 7rem;
    }
    .left {
        font-size: 1.8rem;
        font-weight: 400;
    }
    .right ul li {
        margin: 0 0.9rem;
        padding: auto;
        font-size: 0.95rem;
    }
    .leftSection {
        font-size: 2rem;
    }
}

@media screen and (max-width: 610px) {
    .leftSection {
        font-size: 1.6rem;
    }
}

@media screen and (max-width: 480px) {
    nav {
        display: flex;
        z-index: 20;
        /* height: 21rem; */
        height: 5rem;
        position: fixed;
        top: 0%;
        width: 100vw;
        /* background: rgba(6, 6, 89, 0.474);
        backdrop-filter: blur(0.7rem); */
    }
    .right ul {
        flex-direction: column;
    }
    .right ul li {
        margin-top: -0.4rem;
    }
    .left {
        font-size: 1.4rem;
    }

    .toggle-menu {
        visibility: visible;
        margin: 0 0.6rem;
    }
    .right {
        display: none;
        /* visibility: hidden; */
    }
}

@media screen and (max-width: 480px) {
    .left {
        font-size: 1.1rem;
        font-weight: 500;
    }
    .right ul li a {
        font-size: 0.8rem;
    }
}

/* css for showing menu */
#bar {
}

#cross {
    /* visibility: hidden; */
    display: none;
}