@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&family=Roboto:wght@100;400;500;900&display=swap');

:root{
    --primary: #29e9bc;
    --normal: #ffffff;
    --black: #13131a;
    --danger: #f75842;
    --bg: #0c1013;
    --border: 0.1rm solid rgba(255,255,255,0.3);

    --container-width-lg: 80%;
    --container-width-md: 90%;
    --container-width-sm: 94%;
}





/* univeersal selector*/

*{
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    outline-offset: none;
    border: none;
    box-sizing: border-box;
    text-decoration: none;
    text-transform: capitalize;
    list-style: none;
    transition: all 0.5s linear;
    scroll-behavior: smooth;
}








/* custom scroll bar*/

::-webkit-scrollbar{
    width: 10px;
}

::-webkit-scrollbar-track{
    background: var(--normal);
}

::-webkit-scrollbar-thumb{
    background: var(--black);
}

::-webkit-scrollbar-thumb:hover{
    background: var(--danger);
}






body{
    line-height: 1,7;
    color: var(--normal);
    background-color: var(--bg);
}





.cotainer{
    width: var(--cotainer-width-lg);
    margin: 0 auto;
}



section{
    padding: 6rem 0;
}



section  h2{
    text-align: center;
    margin-bottom: 4rem;
}



h1,h2,h3,h4,h5{
    line-height: 1.3;
}



h1{
    font-size: 2.4rem;
}


h2{
    font-size: 2rem;
}


h3{
    font-size: 1.6rem;
}


h4{
    font-size: 1.3rem;
}



a{
    color: var(--normal);
}



img{
    width: 75%;
    display: block;
    object-fit: cover;
}


.btn{
display: inline-block;
background-color: darkred;
color: var(--normal);
padding: 0.5rem 2rem;
border: 2px solid transparent;
border-radius: 1.5rem;
font-weight: 500;
}



.btn:hover{
    color: gold;
    background-color: transparent;
    border-color: var(--primary);
}



.border-bottom{
    text-align: center;
    display: inline-block;
    border-bottom: 2px solid var(--primary);
    color: var(--primary);
    margin-bottom: 2.5rem;
}




nav{
    background-color: rgb(0, 0, 0);
    width: 100vw;
    height: 5rem;
    position: fixed;
    top: 0;
    z-index: 1000;

}




.window-scroll{
    background-color: rgba(153, 50, 204, 0.866);
}




.nav_container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 3rem;
    padding-right: 3rem;
}


.nav_container span{
    color: var(--primary);
}

.nav_container h4{
    font-size: 2rem;
}


.nav_container h4::first-letter{
    font-size: 3rem;
    color: var(--danger);
}


.nav_container h4:hover{
    color: var(--danger);
    transform: rotateX(360deg);
    transition-duration: 2s;
}


nav button{
    display: none;
}




.nav_menu{
    display: flex;
    align-items: center;
    gap: 3rem;
}



.nav_menu a{
    font-size: 1.2rem;
    text-align: center;

}



.nav_menu a:hover{
    color: var(--primary);
    border-bottom: 3px solid var(--primary);
    padding-bottom: 0.3rem;
    background-color: var(--black);
}




/* header-section-start */




header{
    position: relative;
    top: 5rem;
    overflow: hidden;
    margin-bottom: 2rem;
    background-color: var(--black);
}



.header_container{
    display: flex;
    align-items: center;
    position: relative;
}



.header_left{
    flex: 1;
}



.header_right{
    flex: 1;
    margin-left: 4rem;
}


.header_right .text-1{
    font-size: 1.8rem;
    margin-bottom: 1.3rem;
}


.header_right .text-2{
    font-size: 3rem;
    font-weight: 550;
    margin-bottom: 1.3rem;
    color: blue;
}



.header_right .text-3{
    font-size: 2.5rem;
    margin: 0.3rem 0;
    margin-bottom: 1.3rem;
    color: red;
}



header::before{
    content: "";
    position: absolute;
    background-color: var(--danger);
    width: 100%;
    height: 4rem;
    bottom: 0;
    margin-bottom: -3.1rem;
    z-index: 99;
    transform: skewY(-1deg);
    transform-origin: left;
}



.header_right .typing{
    color: var(--normal);
    font-weight: 500;
}



/* Header section End here */




/* About section START here */



.about{
    text-align: center;
}



.about_container{
    display: flex;
    margin: auto;
    align-items: center;
    position: relative;
    margin-bottom: 2.5rem;
}




.about_container .about_img:hover{
    transform: scale(1.4);
}




.about_container .about_img{
    border: 3px solid var(--primary);
    border-radius: 50%;
    overflow: hidden;
    max-width: 20.5rem;
    max-height: 20.5rem;
    margin-right: 2rem;
    position: relative;
    align-items: center;
    margin-bottom: 2rem;
    margin-left: 2rem;
    padding-left: 2rem;
}


.about_container .about-text{
    max-width: 70%;
    text-align: justify;
    line-height: 1.5rem;
    letter-spacing: 0.5px;
    padding-bottom: 2.5rem;
    padding-right: 2rem;
    margin-left: 4rem;
}



.about_container .about-text p{
    margin-bottom: 1rem;
}


.about_container .about-text .text{
    margin-bottom: 1rem;
}


.about_container .about-text .text span{
    color: var(--primary);
    font-weight: 500;
}


/* About section End here */





/*My services section start here */


.services{
    text-align: center;
    margin-top: -5rem;
    
}


.services_container .cards{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
}





.services_container .cards .card{
    background-color: magenta;
    padding: 2.5rem 1rem;
    color: var(--bg);
    margin: 0.5rem;
    cursor: pointer;
    position: relative;
    
}



.sbox i{
    font-size: 2rem;
    width: 4rem;
    height: 4rem;
    color: #13131a;
    border: 3px solid rgba(0,0,0,0.5);
    border-radius: 50%;
    padding: 0.8rem;
    transition: all 1s;
}


.sbox a{
    margin-top: 1rem;
}


.services_container .cards .card h3{
    margin-top: 1rem;
}


.sbox p{
    margin-top: 1rem;
}

.services_container .cards .card:hover .sbox i{
    background-color: var(--black);
    color: var(--normal);
}


.services_container .cards .card::after{
    content: "";
    height: 100%;
    width: 100%;
    background-color: var(--danger);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all 0.5s;
}


.services_container .cards .card:hover::after{
    transform: rotate(13deg);
}


/* My services section End here */





/* My skills section End here */



.skills .new{
    text-align: center;
}


.skills_container{
    display: flex;
    margin: auto;
    position: relative;
    flex-direction: column;
    padding: 1.6rem 1.8rem;
    max-width: 70rem;
    background-color: hsla(205, 34%, 43%, 0.436);
    border-radius: 0.7rem;
    box-shadow: o.3rem 0.3rem 1.2rem rgba(0,0,0,0.2);
}



.skills_container .bar{
    margin: 0.5rem 0;
}


.skills_container .bar:first-child{
    margin-top: 0rem;
}


.skills_container .bar .info{
    margin-top: 1.5rem;
}


.skills_container .bar .info span{
    font-weight: 500;
    font-size: 1rem;
    opacity: 0;
    animation: showText 0.5s 1s linear forwards;
}




@keyframes showText{
    100%{
        opacity: 1;
    }
}



.skills_container .bar .progress-line{
    height: 10px;
    width: 100%;
    background-color: var(--normal);
    position: relative;
    transform: scaleX(0);
    transform-origin: left;
    border-radius: 0.7rem;
    box-shadow: inset 0 1px rgba(0,0,0,0.05), 0 1px rgba(255,255,255,0.8);
    animation: animate 1s cubic-bezier(1,0,0.5,1)forwards;
    margin-top: 0.5rem;

}



@keyframes animate{
    100%{
        transform: scaleX(1);
    }
}




.bar .progress-line span{
    height: 100%;
    position: absolute;
    border-radius: 0.7rem;
    transform: scaleX(0);
    transform-origin: left;
    background-color: var(--primary);
    animation: animate 1s 3s cubic-bezier(1,0,0.5,1)forwards;

}



.bar .progress-line.html span{
    width: 90%;
}

.bar .progress-line.css span{
    width: 60%;
}

.bar .progress-line.jquary span{
    width: 85%;
}

.bar .progress-line.python span{
    width: 60%;
}

.bar .progress-line.mysql span{
    width: 75%;
}


.progress-line span::before{
    position: absolute;
    content: "";
    top: -0.7rem;
    right: 0;
    height: 0;
    width: 0;
    border: 0.5rem solid transparent;
    border-bottom-width: 0rem;
    border-right-width: 0rem;
    border-top-color: var(--bg);
    opacity: 0;
    animation: showTex2 0.5s 1s linear forwards;
}



.progress-line span::after{
    position: absolute;
    top: -1.8rem;
    right: 0;
    font-weight: 500;
    background: #000;
    color: #fff;
    padding: 1px 0.5rem;
    font-size: 0.7rem;
    border-radius: 0.2rem;
    opacity: 0;
    animation: showTex2 0.5s 1s linear forwards;
}



@keyframes showTex2{
    100%{
        opacity: 1;
    }
}



.progress-line.html span::after{
    content: "90%";
}


.progress-line.css span::after{
    content: "60%";
}

.progress-line.jquary span::after{
    content: "85%";
}

.progress-line.python span::after{
    content: "60%";
}

.progress-line.mysql span::after{
    content: "75%";
}


/* My skills section End here */





/* My portfolio section start here */




.portfolio_container{
    text-align: center;
    margin-top: 3rem;
}


.gallery{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
    background-color: var(--black);
    border-radius: 2rem;
}




.gallery a{
    height: 35rem;
    width: 28rem;
    margin: 1.2rem;
    border-radius: 0.3rem;
    overflow: hidden;
    box-shadow: 0 3px 5px var(--primary);
}


.gallery a img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.gallery a img:hover{
    transform: scale(1.4);
}


/* My portpolio section End here */





/* My courses section start here */



.courses{
    text-align: center;
    margin-top: 3rem;
}




.courses_container{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 2rem;
}



.course{
    background-color: darkolivegreen;
    text-align: center;
    border: 1px solid transparent;
}


.course:hover{
    border-color: var(--primary);
    background: transparent;
}



.course_info{
    padding: 2rem;
}



.course_info p{
    margin: 1.2rem 0 2rem;
    font-size: 0.9rem;
}




.course .course_image img{
    width: 610px;
    height: 500px;
}



/* My courses section End here */



/* frequency asked question section start here */



.faqs{
    text-align: center;
    margin-top: 3rem;
}



.faqs_container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    background-color: var(--black);
    color: var(--black);
    box-shadow: inset 0 0 0 2rem rgba(0,0,0,0.5);
}




.faq{
    margin: 1rem;
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    height: fit-content;
    background-color: var(--primary);
    text-align: justify;
    cursor: pointer;
    border-radius: 1rem;
}



.faq h4{
    font-size: 1rem;
    line-height: 2.23;
}



.faq_icon{
    align-self: flex-start;
    font-size: 1.3rem;
}


.faq p{
    margin-top: 0.8rem;
    display: none;
}



/* for showing ans on click */


.faq.open p{
    display: block;
}


/* frequency asked question section End here */






/* footer section staat here */


footer{
    padding-top: 7rem;
    background-color: var(--black);
    font-size: 0.9rem;
}



.footer_container{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 5rem;
    margin-left: 4rem;
}



.footer_container > div h4{
    margin-bottom: 1.2rem;
}



.footer_1 p{
    margin: 0 0 2rem;
}


footer ul li{
    margin-bottom: o.7rem;
}


footer ul li a:hover{
    text-decoration: underline;
}


.footer_4 .mail{
    text-transform: lowercase;
}


.footer_social{
    display: flex;
    gap: 1rem;
    font-size: 1.5rem;
    margin-top: 2rem;
}


.footer_copyright{
    text-align: center;
    margin-top: 4rem;
    padding: 1.2rem 0;
    border-top: 1px solid var(--normal);
}




/* footer section End here */




/* media queries (tablet) starft here*/



@media screen and (max-width:1024px) {
   .container{
    width: var(--container-width-md);
   }


   h1{
    font-size: 2.2rem;
   }


   h2{
    font-size: 1.7rem;
   }


   h3{
    font-size: 1.4rem;
   }


   h4{
    font-size: 1.2rem;
   }


   
.header_right .text-1{
    font-size: 1.2rem;
}


.header_right .text-2{
    font-size: 3rem;
}



.header_right .text-3{
    font-size: 1.5rem;
}



.header_right .typing{
    color: var(--normal);
    font-weight: 450;
}



.btn{
    padding: 0.3rem 1.5rem;
}


/* navber open */


nav button{
    display: inline-block;
    background: transparent;
    color: var(--normal);
    font-size: 1.8rem;
    cursor: pointer;
    }


nav button#close-menu-btn{
    display: none;
}

.nav_menu{
    position: fixed;
    top: 5rem;
    right: 5%;
    gap: 0;
    top: 5rem;
    height: fit-content;
    width: 18rem;
    flex-direction: column;
    display: none;

    /* we will display with js */
}


.nav_menu li{
    width: 100%;
    height: 3rem;
    animation: alternateNavIetms 0.2s linear forwards;
    transform-origin: top right;
}


.nav_menu li a{
    background-color: #29e9e9bc;
    box-shadow: -4rem 6rem 10rem rgba(0,0,0,0.6);
    width: 100%;
    height: 100%;
    display: grid;
    color: var(--bg);
    place-items: center;
}





.nav_menu li:nth-child(2){
    animation-delay: 0.2s;
}


.nav_menu li:nth-child(3){
    animation-delay: 0.4s;
}


.nav_menu li:nth-child(4){
    animation-delay: 0.6s;
}


.nav_menu li:nth-child(5){
    animation-delay: 0.8s;
}



.nav_menu li:nth-child(6){
    animation-delay: 1s;
}




@keyframes animateNavItems {
0%{
    transform: rotateZ(-90deg);
}

100%{
    transform: rotateZ(0);
    opacity: 1;
}
} 


/* nav section end here */




/* my service section start here */



.services_container .cards{
    row-gap: 1rem;
    grid-template-columns: repeat(2,1fr);
    margin-left: 2rem;
    
}





.services_container .cards .card{
    padding: 2rem 0.3rem;
    margin: 0 1.5rem 1rem;
    margin-top: 2rem;

    
}


/* my service section end here */




/* my portfolio section start here */



.gallery a{
    height: 14rem;
    width: 18rem;
    margin: 1.2rem;
    border-radius: 0.3rem;
    overflow: hidden;
    box-shadow: 0 3px 5px var(--primary);
}



/* my portfolio section end here */




/* my popular courses section start here */



.courses_container{
    grid-template-columns: repeat(2,1fr);
}






.course .course_image img{
    width: 435px;
    height: 410px;

}



.courses{
    margin-left: 3rem;
}



/* my popular courses section end here */




/* frequently asked question start here */



.faqs_container{
    grid-template-columns: 1fr;
    margin: auto;
}



/* frequently asked question end here */


/* footer section start here */


.footer_container{
    grid-template-columns: repeat(2,1fr);
    margin: auto;
}


/* footer section start here */


}



/* media queries (tablet) End here */




/*------ media queries (mobil) strat  here------*/


@media screen and (max-width:600px) {
    .container{
        width: var(--container-width-sm);
    }

    .nav_menu{
        right: 3%;
    }



    
   
.header_right .text-1{
    font-size: 1rem;
}


.header_right .text-2{
    font-size: 2rem;
}



.header_right .text-3{
    font-size: 1.2rem;
}

.header_right a{
    margin-bottom: 2.5rem;
}



.header_right .typing{
    color: var(--normal);
    font-weight: 450;
}



.btn{
    padding: 0.3rem 1rem;
}


/* about me section start here */




.about_container .about_img{
   
    max-width: 12.5rem;
    max-height: 12.5rem;
    margin-top: 2rem;
    margin-bottom: 3rem;
   
}


.about_container{
    flex-direction: column;
}

/* about me section end here */



/* my service section start here */

.services_container .cards{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 3rem;
}


.services_container .cards .card{
    padding: 3rem 1rem;
    margin: 1rem 1rem;

}


/* my service section end here */




/* my skills section start here */



.skills .skills_container{
    margin-left: 1.3rem;
}


/* my skills section end here */



/* my portfolio section start here */

.portfolio_container{
    margin-left: auto;
}


/* my portfolio section end here */




/* my popular courses start here */

.courses_container{
    display: flex;
    flex-direction: column;
}


.course .course_image img{
    width: 366px;
    height: 410px;

}


.courses{
    margin-left: 2.5rem;
}


/* my populer courses end here */


/* frequently asked question start here */


.faqs{
    margin-left: 1rem;
}

/* frequently asked question end here */



/* footer section start here */




.footer_container{
    grid-template-columns: 1fr;
    text-align: center;
    gap: 3rem;
}



.footer_social{
    justify-content: center;
}


.footer_2{
    font-size: 1.3rem;
}



/* footer section end here */


}


/*------ media queries (mobil) strat  here------*/