@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');
*{
                    margin: 0;
                    padding: 0;
                    text-decoration: none;
                    box-sizing: border-box;
}
html{
                    scroll-behavior: smooth;
}
/*Theme Sections*/
.theme{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 50px;
}
#color1{
                                        background-color: #00b4d8;
                                        height: 20px;
                                        width: 20px;
                                        border-radius: 50%;
                                        border: 2px solid black;
                                        margin-right: 10px;
                                        cursor: pointer;
}
#color2{
                    background-color: #fb5607;
                    height: 20px;
                    width: 20px;
                    border-radius: 50%;
                    border: 2px solid black;
                    margin-right: 10px;
                    cursor: pointer;
}
#color3{
                    background-color: #d90429;
                    height: 20px;
                    width: 20px;
                    border-radius: 50%;
                    border: 2px solid black;
                    margin-right: 10px;
                    cursor: pointer;
}
/*Navigation Bar*/
.navbar{
                    position: fixed;
                    width: 100%;
                    font-family: 'Ubuntu', sans-serif;
                    /* background-color: #8ac926; */
                    padding: 30px 0;
                    transition: all 0.3s ease;
                    z-index: 999;
                   
}
.navbar.sticky{
                    
                    padding: 15px 0;
                    background-color: #29bf12;
                    
}

.max-width{
                    max-width: 1300px;
                    padding: 0px 80px;
                    margin: auto;
}
.navbar .max-width{
                   display: flex;
                   align-items: center;
                   justify-content: space-between;
}
.navbar .logo a{
                    font-size: 35px;
                    font-weight: 600;
                    color: #fff;
                    
}
.navbar.sticky .logo a span{
                    color: #fff;
}
.navbar .logo a span{
                    color: #29bf12;
                    transition: all 0.3s ease;
}
.navbar .menu li{
                    list-style: none;
                    display: inline;
                   
}
.navbar .menu li a{
                    color: #fff;
                    font-size: 18px;
                    font-weight: 500;
                    margin-left: 25px;
                    transition: 0.3s ease;
}
.navbar .menu li a:hover{
                    color:#29bf12;
}
.navbar.sticky .menu li a:hover{
                    color:#fff;
}
.menu-btn{
                    color: #fff;
                    cursor: pointer;
                    font-size: 23px;
                    display: none;

}

/*Home Section*/
.home{
                    display: flex;
                    height: 100vh;
                    background: url(image/pxfuel.jpg);
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: cover;
                    color: #fff;
                    min-height: 500px;
                    font-family: 'Ubuntu', sans-serif;
}
.home .max-width{
                    margin: auto 0 auto 40px;
}
.home .home-content .text1
{
                    font-size: 27px;
                    margin-left: 10px;
}
.home .home-content .text2{
                    font-size: 75px;
                    font-weight: 600;
                    margin-left: -3px;
}
.home .home-content .text3{
                    font-size: 40px;
                    margin: 5px 0;
}
.home .home-content .text3 span{
                    color:#29bf12;
                    font-weight: 600;
}
.hire-btn{
                    display: inline-block;
                    margin-top: 20px;
                    background-color: #29bf12;
                    font-size: 25px;
                    color: #fff;
                    padding: 12px 36px;
                    border-radius: 6px;
                    border: 2px solid #29bf12;
                    transition: all 0.3s ease;

}
.hire-btn:hover{
                    color: #29bf12;
                    background: none;
}
/*All Similar code*/
section {
                    padding: 100px 0;
}
section .title{
                    position: relative;
                    text-align: center;
                    font-family: 'Ubuntu',sans-serif;
                    text-align: center;
                    font-size: 40px;
                    font-weight: 500;
                    padding-bottom:20px ;
                    margin-bottom: 60px;
}
section .title::before{
                    content: "";
                    position: absolute;
                    bottom: 0px;
                    left: 50%;
                    width: 180px;
                    height: 3px;
                    background:#111;
                    transform: translateX(-50%);
}
section .title::after{
                    content: "";
                    position: absolute;
                    font-size: 20px;
                    bottom: -12px;
                    left: 50%;
                    padding: 5px;
                    color: #29bf12;
                    background:#fff;
                    transform: translateX(-50%);
}
.about, .skills, .contact{
                    font-family: 'Poppins', sans-serif;
}
.about .about-content, .skills .skills-content, .project .project-content
, .contact .contact-content {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    justify-content: space-between;
}
/*About Sections*/
section{
                    padding: 100px 0;
}

.about .title{
                    position: relative;
                    font-family: 'Ubuntu',sans-serif;
                    text-align: center;
                    font-size: 40px;
                    font-weight: 500;
                    padding-bottom:20px ;
                    margin-bottom: 60px;
}
.about .title::before{
                    content: "";
                    position: absolute;
                    bottom: 0px;
                    left: 50%;
                    width: 180px;
                    height: 3px;
                    background:#111;
                    transform: translateX(-50%);
}
.about .title::after{
                    content: "who I am";
                    position: absolute;
                    font-size: 18px;
                    bottom: -10px;
                    left: 50%;
                    padding: 5px;
                    color: #29bf12;
                    background:#fff;
                    transform: translateX(-50%);
}

.about .about-content .left{
                    align-items: center;
                    width: 45%;
                 
}
.about .about-content .left img{
                    width: 350px;
                    height: 400px;
                    border-radius: 6px;
                    border: 2px solid #111;
                  
}
.about .about-content .right{
                    width: 55%;
}
.about .about-content .right .text{
                    font-size: 25px;
                    font-weight: 600;
                    margin-bottom: 10px;
}
.about .about-content .right  span{
                    color: #29bf12;
}
.about .about-content .right p{
                    text-align: justify;
}
.about .about-content .right .Cv-btn{
                    display: inline-block;
                    margin-top: 20px;
                    background-color: #29bf12;
                    font-size: 20px;
                    font-weight: 500;
                    color: #fff;
                    padding: 10px 30px;
                    border-radius: 6px;
                    border: 2px solid #29bf12;
                    transition: all 0.3s ease;
}
.about .about-content .right .Cv-btn:hover{
                    color: #29bf12;
                    background: none;
}
.about .about-content .right .social{
                    width: 120px;
                    height: 50px;
                    margin-top: 30px;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
}
.about .about-content .right .social{
                    width: 150px;
}


.about .about-content .right .linkedin {
                  font-size: 30px;
}
.about .about-content .right .github{
                    font-size: 30px;
}
.about .about-content .right .facebook{
                    font-size: 30px;
}


/* Education Section CSS */
.education .title::before{
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 180px;
    height: 3px;
    background:#111;
    transform: translateX(-50%);
}
.education .title::after{
    content: "my journey";
    position: absolute;
    font-size: 18px;
    bottom: -10px;
    left: 50%;
    padding: 5px;
    color: #29bf12;
    background:#fff;
    transform: translateX(-50%);
}

.education .education-content .edu-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    border-radius: 6px;
    padding: 15px;
    border: 2px solid #ccc;
    transition: all 0.3s ease;
    flex-direction: row; /* Default layout for larger screens */
}

.education .education-content .edu-item:hover {
    background-color: #f4f4f4;
    border-color: #29bf12;
}

.education .education-content .edu-item h3 {
    font-size: 18px;
    color: #333;
    font-weight: 600;
}

.education .education-content .edu-item p {
    font-size: 18px;
    color: #555;
    margin: 5px 0;
    font-weight: 400;
}
.education .education-content .edu-item .place{
    margin-left: 5px;
}
.education .education-content .edu-item .time{
    margin-left: 5px;
}
.education .education-content .edu-item span {
    font-size: 14px;
    color: #777;
    font-weight: 300;
}


.education .education-content .edu-item:hover h3 {
    color: #29bf12;
}

.education .education-content .edu-item:hover p {
    color: #111;
}

.education .education-content .edu-item:hover span {
    color: #111;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .education .education-content .edu-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .education .education-content .edu-item h3 {
        font-size: 16px;
    }

    .education .education-content .edu-item p {
        font-size: 14px;
    }

    .education .education-content .edu-item span {
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .education .education-content .edu-item {
        padding: 10px;
    }

    .education .education-content .edu-item h3 {
        font-size: 14px;
    }

    .education .education-content .edu-item p {
        font-size: 18px;
    }

    .education .education-content .edu-item span {
        font-size: 10px;
    }

    .education .title::after {
        content: "my journey"; /* Shortened text on small screens */
    }
}

@media (max-width: 480px) {
    .education .education-content .edu-item {
        padding: 8px;
    }

    .education .education-content .edu-item h3 {
        font-size: 14px;
    }

    .education .education-content .edu-item p {
        font-size: 23px;
    }

    .education .education-content .edu-item span {
        font-size: 10px;
    }
}


/*Skills CSS*/
.logos{
                    height: 50px;
                    width: 65px;
}
.skills .title::after{
                    content: "what I know";
}
.skills .skills-content .column{
                    width: calc(50% - 30px);
}
.skills .skills-content .left .text{
                    margin-bottom: 5px;
                    font-weight: 500;
                    font-size: 26px;
}
.skills .skills-content .left p{
                    text-align: justify;
                   
                    
}
.skills .skills-content .left a{
                    display: inline-block;
                    margin-top: 20px;
                    background-color: #29bf12;
                    font-size: 18px;
                    font-weight: 500;
                    color: #fff;
                    padding: 8px 16px;
                    border-radius: 6px;
                    border: 2px solid #29bf12;
                    transition: all 0.3s ease;
}
.skills .skills-content .left a:hover{
                    color: #29bf12;
                    background: none;
}
.skills .skills-content .right .bars{
                    margin-bottom: 15px;
}
.skills .skills-content .right .info{
                    display: flex;
                    align-items: center;
                    margin-bottom: 5px;
                    justify-content: space-between;
}
.skills .skills-content .right .info span{
                    font-size: 18px;
                    font-weight: 500;
}
.skills .skills-content .right .line{
                    height: 5px;
                    width: 100%;
                    background-color: lightgray;
                    position: relative;
}
.skills .skills-content .right .line::before{
                    content: "";
                    position: absolute;
                    height: 100%;
                    
                    left: 0;
                    top: 0;
                    background-color: #3f4a3d;
}
.skills .skills-content .right .html::before{
                    width: 90%;
}
.skills .skills-content .right .css::before{
                    width: 60%;
}
.skills .skills-content .right .javascript::before{
                    width: 50%;
}
.skills .skills-content .right .c::before{
                    width: 70%;
}
.skills .skills-content .right .python::before{
                    width: 70%;
}
.skills .skills-content .right .django::before{
    width: 50%;
}
.skills .skills-content .right .postgre::before{
    width: 70%;
}

/*Projects CSS*/
.project .title::before{
                    content: "";
                   
}
.project .title::after{
                    content: "what I build";
                   
}
.project .project-content .left{
                    border-radius: 6px;
                    margin-left: 20px;
                    width: 324px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
}
.project .project-content .right{
                    width: 50%;
                  
                   
}
.project .project-content .left img{
                    width: 320px;
                    height: 350px;
                    border: 2px solid black;
                    margin-right: 3px;
}
.project .project-content .right .project-name{
                    margin-top: 15px;
                    background-color: #29bf12;
                    font-size: 16px;
                    height:40px ;
                    width: 100%;
                    font-weight: 450;
                    color: #fff;
                    padding: 8px 12px; 
                    border-radius: 6px;
                    border: 2px solid #29bf12;
                    transition: all 0.3s ease;

}
.project .project-content .right .project-name:hover{
                    background-color: #fff;
                    color: #111;
}
.project-name{
                   align-items: center;
                   padding-left: 50px;
}
.project .project-content .right a{
                    font-family: 'Poppins', sans-serif;
                    font-weight: 300;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    
}




/*Contact*/
.contact .title::after{
                    content: "get in touch";
}
.contact .contact-content .column{
                    width: calc(50% - 30px);
}
.contact .contact-content .text{
                    font-size: 20px;
                    font-weight: 600;
                    margin-bottom: 10px;

}
.contact .contact-content .left p{
                    text-align: justify;
}
.contact .contact-content .left .icons{
                    margin: 10px 0;
}
.contact .contact-content .row{
                    display: flex;
                    height: 65px;
                    align-items: center;
}
.contact .contact-content .row .info{
                    margin-left: 30px;
}
.contact .contact-content .row i{
                    color: #29bf12;
                    font-size: 25px;
}
.contact .contact-content .info .head{
                    font-weight: 500;
}
.contact .contact-content .info .sub-title{
                    color: #333;
}
.contact .right form .fields{
                    display: flex;
}
.contact .right form .field,
.contact .right form .fields .field
{
                    height: 45px;
                    width: 100%;
                    margin-bottom: 15px;
}
.contact .right form .name{
                    margin-right: 10px;
}
.contact .right form .email{
                    margin-left: 10px;
}
.contact .right form .textarea{
                    height: 80px;
                    width: 100%;
}
.contact .right form .field input,
.contact .right form .textarea textarea{
                    height: 100%;
                    width: 100%;
                    border: 1px solid lightgrey;
                    border-radius: 6px;
                    padding: 0 15px;
                    outline: none;
                    font-size: 15px;
                    font-family: 'Poppins' sans-serif;
}
.contact .right form .textarea textarea{
                    
                    resize: none;
                    padding-top: 10px;
}

.contact .right form .button{
                  height: 47px;
                  width: 170px;
}
.contact .right form .button button{
                   height: 100%;
                   width: 100%;
                   border: 2px solid #29bf12;
                   background-color: #29bf12;
                   color: #fff;
                   font-size: 20px;
                   font-weight: 500;
                   border-radius: 6px;
                   cursor: pointer;
                   transition: all 0.3s ease;
}
.contact .right form .button button:hover{
                    color: #29bf12;
                    background: none;
}

/*Footer CSS*/
footer{
                    background-color: #111;
                    padding: 20px 23px;
                    color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
}
footer span a{
                    color: #29bf12;
                    text-decoration: none;
}
footer span a:hover{
                    text-decoration: underline;
}



/*All Media Queries*/
@media (max-width:1300px){
                    .home .max-width{
                                        margin-left: 0px;
                    }
}
@media (max-width:1104px){
                    .about .about-content .left img{
                                        width: 300px;
                                        height: 350px;
                                        border-radius: 6px;
                                       
                                      
                    }
}
@media (max-width:991px){
                     .max-width{
                                        padding: 0 50px;
                    }
}
@media (max-width:947px){
                    max-width{
                                        padding: 0 50px;
                    }
                    .menu-btn{
                                        display: block;
                                        z-index: 999;
                    
                    }
                    .menu-btn i.active::before{
                                        content: "\f00d";
                    }
                    .navbar .menu{
                                        position: fixed;
                                        height: 100vh;
                                        width: 100%;
                                        left: -100%;
                                        top: 0;
                                        background-image: url('image/pxfuel.jpg');
                                        background-position: center;
                                        background-size: cover;
                                        background-repeat: no-repeat;
                                        text-align: center;
                                        padding-top: 80px;
                                        transition: all 0.3s ease;
                    }
                    .navbar .menu.active{
                                          left:0;
                    }
                    .navbar .menu li{
                                        display: block;
                                       
                    }
                    .navbar .menu li a{
                                        display: inline-block;
                                        margin: 20px 0;
                                        font-size: 25px;
                    }
                    .home .home-content .text2{
                                        font-size: 70px;              
                    }
                    .home .home-content .text3{
                                        font-size: 35px;
                    }
                    .hire-btn{
                                       
                                        font-size: 23px;
                                        padding: 10px 30px;
                    }
                    .about .about-content .column{
                                        width: 100%;
                    }
                    .max-width{
                                        max-width: 800px;
                    }
                    .about .about-content .left{
                                        display: flex;
                                        justify-content: center;
                                        margin: 0 auto 60px;
                    }
                    .about .about-content .right{
                                        padding: 5px;
                                        flex: 100%;
                    }
                    .skills .skills-content .column{
                                        width: 100%;
                                        margin-bottom: 25px;
                    }
                    .project .project-content .column,
                    .contact .contact-content .column{
                                        width: 100%;
                                        margin-bottom: 25px;
                    }
                    
                    
}
@media (max-width:690px){
                    .max-width{
                                        padding: 0 23px;
                    }
                    .home .home-content .text2{
                                        font-size: 60px;              
                    }
                    .home .home-content .text3{
                                        font-size: 32px;
                    }
                    .hire-btn{
                                       
                                        font-size: 20px;
                                       
                    
                    }
                    .about .about-content .right .Cv-btn{
                                       font-size: 15px;
                    }
                    .skills .skills-content .column{
                                        width: 100%;
                    }
}
@media (max-width:500px){
                    .home .home-content .text2{
                                        font-size: 50px;              
                    }
                    .home .home-content .text3{
                                        font-size: 27px;
                    }
                    .project .project-content .right .project-name{
                                      width: 380px;
                                      height: 45px;
                                      padding-right: 30px;
                    }
                   
}
@media (max-width:369px){
                    .project .project-content .right .project-name{
                                        height: 55px;
                      }
                       .project .project-content .left{
                                        width: 100%;
                                       
                       }
                       .project .project-content .left img{
                                        width: 100%;
                       }
}