body {
    color: #000;
    margin: 0;
    padding: 0;
    height: auto;
}

/* Navigation bar */
nav {
    background-color: rgba(145, 142, 136, 0.2); /* Initial background with opacity */
    padding: 20px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 15px;
    margin: 20px auto;
    width: fit-content;
    box-shadow: 0 4px 6px rgba(209, 188, 104, 0.448);
    transition: all 0.3s ease-in-out;
}

nav:hover {
    background-color: rgba(235, 180, 71, 0.7);
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(174, 160, 3, 0.6);
}

nav:active {
    animation: pulse 0.5s ease-out;
}

nav ul {
    font-family: "Poppins", serif;
    font-weight: 100;
    font-style: normal;
    list-style-type: none;
    display: flex;
    margin: 0;
    padding: 0;
}

nav ul li {
    margin: 0 20px;
}

nav ul li a {
    color: rgb(234, 238, 238);
    text-decoration: none;
    padding: 10px 16px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;
    transition: background-color 0.3s, transform 0.2s;
}

nav ul li a:hover {
    background-color: #067b52;
    transform: scale(1.1);
}

/* CV section styling */
.cvhead {
    background-color: rgba(133, 151, 166, 0.5);
    margin: 0 auto;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}

.pagetopic {
    padding: 5px;
    font-size: 24px;
    text-align: center;
    color: aliceblue;
}

.cvdfi {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    text-align: center;
    color: aliceblue;
    padding-bottom: 5px;
}

/* About CV */
.aboutcv {
    width: 70%; /* Adjusted for better responsiveness */
    margin: 10px auto;
    background-color: rgba(133, 151, 166, 0.5);
    border-radius: 10px;
    padding: 10px;
    text-align: justify;
}

.aboutcv p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

.aboutcv h3 {
    font-size: large;
    font-weight: bold;
    font-family: 'Trebuchet MS', Arial, sans-serif;
}

.aboutcv h4 {
    font-weight: bold;
    font-size: medium;
    font-family: 'Trebuchet MS', Arial, sans-serif;
}

.pharaone {
    font-size: 17px;
    padding-left: 5%;
}

/* Example CV images */
.exampleimgs {
    float: none; /* Ensure proper stacking on small screens */
    width: 100%;
}

.cvimges {
    display: flex;
    flex-wrap: wrap; /* Enable wrapping for small screens */
    margin: 0 auto;
    gap: 10px;
}

.cvimgone,
.cvimgtwo,
.cvimgthree {
    flex: 1 1 100%; /* Full width on smaller screens */
    text-align: center;
}

.cvimgone img,
.cvimgtwo img,
.cvimgthree img {
    width: 90%; /* Adjust image size for mobile */
    height: auto;
}

.cvonedis,
.cvtwodis,
.cvthreedis {
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    font-size: large;
    font-weight: bold;
    color: aliceblue;
}

/* Footer */
footer {
    background-color: #070d36;
    color: white;
    text-align: center;
    padding: 20px;
}

/* Media Queries */
@media screen and (max-width: 768px) {
    nav {
        padding: 10px 20px;
    }

    nav ul {
        flex-direction: column;
        align-items: center;
    }

    nav ul li {
        margin: 10px 0;
    }

    nav ul li a {
        font-size: 14px;
        padding: 10px;
    }

    .aboutcv {
        width: 90%; /* Increased width for smaller screens */
    }

    .cvimges {
        flex-direction: column; /* Stack images vertically */
    }

    .cvimgone,
    .cvimgtwo,
    .cvimgthree {
        flex: 1 1 100%;
    }

    .cvimgone img,
    .cvimgtwo img,
    .cvimgthree img {
        width: 100%; /* Full width for mobile */
    }
}

@media screen and (max-width: 480px) {
    nav ul li a {
        font-size: 12px;
        padding: 8px;
    }

    .pagetopic {
        font-size: 18px;
    }

    .cvdfi {
        font-size: 18px;
    }

    .aboutcv {
        width: 95%; /* Maximize use of screen space */
    }

    .cvimges {
        gap: 5px;
    }

    .cvimgone img,
    .cvimgtwo img,
    .cvimgthree img {
        width: 100%;
    }

    .cvonedis,
    .cvtwodis,
    .cvthreedis {
        font-size: medium;
    }
}