* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.lg-d {
    display: none;
}

.lgg-d {
    display: block;
}

body {
    background-color: rgba(0, 0, 0, 0.904);
    height: 100vh;
    font-family: "Roboto", sans-serif;
}

.header-container {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar {
    box-shadow: 1px 2px 1px 2px rgba(0, 0, 0, 0.349);
    background-color: black;
    border-radius: 20px;
    width: 700px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.logo {
    color: white;
    font-size: 20px;
    font-weight: bold;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 70px;
}

.nav-links li a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    display: inline-block;
    /* transition: background-color 0.3s; */
}

.nav-links li a:hover {
    background-color: #333;
    border-radius: 8px;
}

/* Hamburger icon */
.menu-toggle {
    display: none;
    font-size: 28px;
    color: white;
    cursor: pointer;
    margin-left: 250px;
}

/* section  01*/
.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

.df {
    display: inline-flex;
}

.Skill-intro {
    margin-top: 13%;
    letter-spacing: 5px;
    color: whitesmoke;
}

.Skill-intr-title {
    position: absolute;
    font-size: 35px;
    color: white;
    margin-top: 40px;
}

.skill-intro-para {
    position: static;
    margin-top: 140px;
    width: 40%;
    font-weight: 300;
    line-height: 27px;
    color: white;
    margin-right: auto;
}

.work-btn {
    margin-top: 30px;
    padding: 12px 30px;
    font-weight: bold;
    border-radius: 8px;
    background-color: white;
    outline: none;
    border: none;
}

.resume-btn {
    padding: 12px 30px;
    font-weight: bold;
    border-radius: 8px;
    background-color: white;
    outline: none;
    border: none;
    margin-left: 5px;
}

.porfile {
    box-shadow: 28px 18px 0px 5px #333;
    background-image: url(../img/por.jpeg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50px;
    position: absolute;
    margin: 90px 560px;
    width: 400px;
    height: 400px;
}

/* section 02 */
.text-about {
    text-align: center;
    font-size: 30px;
    margin: 80px 0px;
    color: white;
}

.box {
    /* box-shadow: 0px 5px 30px 18px rgb(39, 39, 39); */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    display: inline-block;
    background-color: #333;
    border-radius: 50px;
    width: 400px;
    height: 600px;
}

.circle {
    background-image: url(../img/porfile.jfif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: block;
    border-radius: 150px;
    margin: 30px 105px;
    width: 200px;
    height: 200px;
    border: 1px solid white;
}

.intro-about-me h4 {
    font-weight: bold;
    margin-top: 20px;
    color: white;
    text-align: center;
    font-size: 30px;
}

.intro-about-me title {
    display: block;
    margin-top: 10px;
    text-align: center;
    color: white;
    font-size: 16px;
}

.intro-about-me a {
    text-decoration: none;
    /* text-align: center; */
    margin-left: 20px;
    margin-right: 20px;
    display: block;
    border: 1px solid white;
    padding: 20px 40px;
    border-radius: 13px;
    margin-top: 30px;
    color: white;
    font-weight: bold;
}

.intro-about-me a:hover {
    background-color: white;
    color: black;
    transition: all 2s;
    box-shadow: 0px 0px 10px 0px white;
    transform: scaleZ(3.6)
}

.intro-about-me i {
    display: block;
    margin-top: -6px;
}

.email {
    font-size: 16px;
    display: block;
    margin: -18px 36px;
}

.about-intro-para {
    margin-top: 30px;
}

.about-intro-para p {
    justify-content: space-between;
    margin: 50px 90px 20px 90px;
    line-height: 30px;
    color: white;
    font-weight: 400;
    font-style: italic;
    text-align: center;
}

/* section 03 */
.text-skill-para {
    text-align: center;
    color: gray;
    font-style: italic;
    font-weight: 400;
    margin-top: -50px;
    display: block;
}

.skillbox {
    margin-top: 70px;
    margin-left: 50px;
    /* display: block; */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    width: 450px;
    height: 360px;
    background-color: #333;
}

.skiill-detail h5 {
    padding: 30px;
    font-weight: bold;
    font-size: 24px;
    color: white;
}

/* after */
.skiill-detail h5::after {
    content: ' ';
    border-bottom: 2px solid white;
    padding: 10px 27px;
    position: relative;
    top: 0%;
    left: -250px;
    z-index: 99;
}

.skill-html {
    margin: 30px;
}

.skill-html h6 {
    font-style: italic;
    font-weight: 700;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.909);
}

.skill-html h6::after {
    content: '90%';
    color: gray;
    margin-left: 240px;
}

.progess {
    display: block;
    background-color: #ececec1a;
    width: 100%;
    height: 10px;
    margin-top: 8px;
    border-radius: 3px;
}

.progess::before {
    content: ' ';
    display: block;
    background-color: white;
    width: 90%;
    height: 10px;
    margin-top: 0px;
    border-radius: 3px;
}

.skill-js {
    margin-top: 40px;
}

.skill-js h6::after {
    content: '50%';
    margin-left: 80px;
}

.js::before {
    width: 50%;
}

.skill-bootstrap {
    margin-top: 40px;
}

.sql h6::after {
    margin-left: 295px;

}

.sql-server {
    margin-top: 40px;
}

.php-laravel {
    margin-top: 40px;
}

.php-laravel h6::after {
    margin-left: 215px;
}

/* section 04 */
.project01 {
    margin-top: -30px;
    text-align: center;
    align-items: center;
    width: 300px;
    height: 300px;
    background-color: #333;
    border-radius: 30px;
    margin-left: 40px;
}

/* section 05 */
.map-box iframe {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    margin-top: -40px;
}

.map-boxs {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    background-color: #333;
    width: 550px;
    height: 450px;
    border-radius: 20px;
    margin-top: -40px;
    margin-left: 30px;
}

.contact-input h6 {
    margin: 30px;
    color: white;
    font-size: 24px;
    font-weight: bold;
}

.contact-input input {
    margin: 20px 30px;
    width: 225px;
    height: 45px;
    padding-left: 10px;
    outline: none;
    background-color: #ffffff1a;
    border: 1px solid #ffffff1a;
    border-radius: 5px;
    color: white;
}

.contact-input textarea {
    margin: 10px 30px;
    border: 1px solid #ffffff1a;
    border-radius: 5px;
    background-color: #ffffff1a;
    outline: none;
    padding: 10px;
    font-size: 17px;
    color: white;
}

#email {
    margin: 20px -10px;
}

.contact-input button {
    text-align: center;
    margin: 10px 30px;
    padding: 12px 30px;
    border-radius: 8px;
    color: black;
    font-weight: bold;
    background-color: white;
    border: none;
}

.footer{
    background-color: black;
    height: 15vh;
    margin-top: 30px;
}
.copy-right{display: flex; text-align: center; align-items: center ; margin-left: 32%;}
.copy-right span{
    color: white;
    padding-top: 35px;
    font-size: 22px;
    font-style: oblique;
    display: inline-block;
}
.vr{
    margin-top: 35px;
    margin-left: 20px;
    width: 1px;
    height: 24px;
    background-color: white;
}
.copy-right h6{
    color: white;
    font-size: 20px;
    font-style: oblique;
    margin-top: 35px;
    margin-left: 20px;
} 
.copy-right p{
    color: white;
    font-style: oblique;
    font-weight: 300;
    margin-top: 35px;
    margin-left: 20px;
}
/* Responsive styles */
@media (max-width: 576px) {
    .sm-d {
        display: block;
    }

    .smm-d {
        display: none;
    }

    .header-container {
        margin-top: 10px;
    }

    .navbar {
        width: 100%;
        border-radius: 10px 10px 0px 0px;
    }

    .nav-links {
        position: absolute;
        top: -8px;
        left: 0;
        width: 100%;
        height: 0;
        visibility: hidden;
        transform: translateX(-20px);
        transition: all 0.3s ease;
        border-radius: 0 0 20px 20px;
    }

    .nav-links.active {
        display: flex;
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    .nav-links li {
        text-align: center;
        padding: 15px 0px;
    }
    .nav-links li a{
        padding: 13px 11px;
        font-size: 14px;
    }

    .menu-toggle {
        display: block;
        margin-inline-start: auto;
        transition: transform 0.3s ease;
    }

    /* Optional: Rotate hamburger icon when active */
    .menu-toggle.active {
        transform: rotate(90deg);
    }

    .nav-links {
        gap: 0;
    }

    /* section 01 */
    .Skill-intro {
        position: absolute;
        margin-top: 6px;
    }

    .Skill-intr-title {
        width: 90%;
        text-align: center;
        justify-content: space-between;
        align-items: center;
    }

    .skill-intro-para {
        position: absolute;
        width: 90%;
        font-size: 15px;
        text-align: center;
    }

    .work-btn {
        margin-top: 270px;
    }

    .resume-btn {
        margin-top: 280px;
    }

    .btn-btn {
        justify-content: center;
        text-align: center;
    }

    /* section 03 */
    .box {
        width: 100%;
    }

    .circle {
        margin-left: 170px;
        margin-right: 170px;
        display: block;
        justify-items: center;
        text-align: center;
    }

    .about-intro-para p {
        margin: 35px 0px 20px 0px;
    }

    /* section 03 */
    .skillbox {
        margin-left: 40px;
        margin-right: 40px;
        margin-top: 40px;
    }

    /* section 04 */
    .project01 {
        margin-top: 30px;
        margin-left: 130px;
        margin-right: 140px;
    }

    /* section 05 */
    .map-boxs {
        width: 100%;
        margin-left: 1px;
    }
    /* section end */
    .copy-right {
        margin-left: 13%;
    }
    .copy-right span{
        padding-top: 25px;
    }
    .vr{
        margin-top: 25px;
    }
    .copy-right h6{
        margin-top: 25px;
    }
    .copy-right p{
        margin-top: 25px;
    }
}

/* mobile */
@media (min-width:320px) and (max-width:425px) {
    .copy-right h6{
        font-size: 16px;
        margin-left: 7px;
    }
    .copy-right p{
        font-size: 15px;
        margin-left: 5px;
    }
    .vr{
        margin-left: 7px;
    }
    .circle {
        margin-left: 70px;
    }

    .intro-about-me i {
        margin-left: -20px;
    }

    .email {
        margin: -18px 13px;
    }

    .intro-about-me a {
        margin-left: 6px;
        margin-right: 6px;
    }

    .intro-about-me p {
        font-size: 15px;
    }

    .skillbox {
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
    }

    .skiill-detail h5 {
        padding: 20px;
        font-size: 16px;
    }

    .skiill-detail h5::after {
        left: -168px;
    }

    .skill-html h6::after {
        color: gray;
        margin-left: 98px;
    }

    .skill-js h6:after {
        color: gray;
        margin-left: 33px;
        font-size: 13px;
    }

    .sql h6::after {
        margin-left: 155px;
    }

    .php-laravel h6::after {
        margin-left: 115px;
    }
    .project01{
        /* width: 100%; */
        margin-left: 15px;
        margin-right: 15px;
    }
    .map-boxs{
        width: 100%;
    }
    .contact-input input{
        margin: 0px 30px;
    }
    #email{
        margin-left: 30px;
        margin-top: 20px;
    }
    .contact-input textarea{
        width: 225px;
    }
    .contact-input button{
        margin-top: 0px;
    }
    /* section end */
    .copy-right{
        margin-left: 2%;
    }
}