/*----css media query ----*/
nav .fa-solid{
    display: none;
}
/*media for extra small devices*/
@media only screen and (max-width: 600px){
    .header-text{
        margin-top:70%;
        font-size:16px;
    }
    .header-text h1{
        font-size: 20px;
    }
    .social-media-links a {
        height:3rem;
        width:3rem;
        border-radius: 50%;
    }
    nav .fa-solid{
        display: block;
        font-size: 25px;
    }
    .unorder-list{
        background-color:#9b5de5;
        position:fixed;
        top:0;
        right:-200px;
        width:200px;
        height:100vh;
        padding-top:50px;
        z-index: 2;
        transition: right 0.5s;
    }
    .unorder-list li{
        display: block;
        margin: 25px;
    }
    .unorder-list .fa-solid{
        position:absolute;
        top:25px;
        left:25px;
        cursor: pointer;
    }
    .read-more-btn{
        font-size: 0.8rem;
    }
    .logo p{
        font-size: 1.6rem;
    }
    .sub-title h1{
        font-size:40px;
    }
    #me{
        margin-left:10px;
    }
    .row{
        display:block;
    }
    .about-col-1 img {
        width: 70%;
        margin-bottom: 10px;
    }
    .about-me {
        font-size: 1rem;
    }
    .para1{
        font-size: 0.9rem;
    }
    .para2{
        font-size: 0.9rem;
    }
    .my-skills{
        font-size: 20px;
    }
    .services{
        margin-left: 10px;
    }
    .skills-container{
        flex-wrap: wrap;
        gap:1rem;
        padding:0px 3%;
    }
    .code-icon{
        font-size: 3rem;
    }
    .program-icon{
        font-size: 3rem;
    }
    .skill-icon{
        font-size: 3rem;
    }
    .my-education{
        font-size: 20px;
    }
    .edu-container{
        display: block;
        padding:0px 3%;
    }
    .edu-div1{
        padding: 20px;
    }
    .edu-div1:hover{
        transform: none;
    }
    .clg-heading {
        font-size: 1.2rem;
    }
    .edu-div2{
        padding: 20px;
    }
    .edu-div2:hover{
        transform: none;
    }
    .school-heading{
        font-size: 1.2rem;
    }
    .portfolio-conainer{
        font-size: 25px;
    }
    .contact-conainer{
        font-size: 20px;
    }
    .contact-list{
        padding:0px 5%;
    }
    .input-box{
        display: block;
    }
    #contact .input-box input{
        font-size: 1rem;
        padding:1rem;
    }
    textarea{
        font-size: 1rem;
        padding:1rem; 
    }
    .btn1{
        padding: 1rem 1.5rem;
        font-size:1rem;
    }
    .copy-container{
        font-size: 0.8rem;
    }
    .arrow{
        box-shadow: none;
    }
    .layer a{
        margin-top:10px;
        width:50px;
        height:50px;
        line-height: 50px;
    }
    .layer h3{
        margin-bottom: 5px;
    }
    .portfolio-conainer{
        font-size:20px;
    }
    #about{
        padding:50px 0;
    }
    #skills{
        padding:50px 0;
    }
    .my-skills{
        margin-bottom: 3rem;
    }
    #education{
        padding:50px 0;
    }
    .my-education{
        margin-bottom: 3rem;
    }
    .btn{
        margin: 50px auto 0px;
    }
}
@media only screen and (max-width:375px){
    .header-text{
        margin-top: 100%;
    }
}
@media only screen and (max-width:320px){
    .social-media-links a {
        height: 2.2rem;
        width: 2.2rem;
        border-radius: 50%;
    }
    .my-skills{
        font-size: 15px;
        margin-bottom: 2rem;
    }
    .my-education{
        font-size: 15px;
        margin-bottom: 2rem;
    }
    #portfolio{
        padding: 40px 0px;
    }
    .portfolio-conainer{
        font-size:15px;
        margin-bottom: 2rem;
    }
    .contact-conainer{
        font-size: 15px;
        margin-bottom:2rem;
    }
    #header{
        height:100vh;
    }
    #contact{
        padding: 40px 0px;
    }
    #education{
        padding:40px 0;
    }
    #skills{
        padding:40px 0;
    }
    #about{
        padding:40px 0;
    }
    .web-text{
        font-size: 1.2rem;
    }
    .programing-text{
        font-size: 1.2rem;
    }
    .skill-text{
        font-size: 1.2rem;
    }
    #softskills-para{
        font-size: 0.85rem;
    }
    #prog-para{
        font-size: 0.85rem;
    }
    #web-dev-para{
        font-size: 0.85rem;
    }
    .header-text{
        margin-top: 110%;
    }
}
/*for tablets*/
@media only screen and (min-width: 601px) and (max-width: 768px) {
    .unorder-list{
        background-color:#9b5de5;
        position:fixed;
        top:0;
        right:-200px;
        width:200px;
        height:107vh;
        padding-top:50px;
        z-index: 2;
        transition: right 0.5s;
    }
    .unorder-list li{
        display: block;
        margin: 25px;
    }
    .unorder-list .fa-solid{
        position:absolute;
        top:25px;
        left:25px;
        cursor: pointer;
    }
    #header{
        width: 107vw;
        height: 107vh;
    }
    nav .fa-solid {
        display: block;
        font-size: 2rem;
    }
    .header-text p{
        font-size: 1.4rem;
    }
    .header-text h1{
        font-size: 40px;
    }
    .text-msg{
        font-size: 1.6rem;
    }
    .header-text{
        margin-top: 20%;
    }
    #about{
        width:107vw;
    }
    .row{
        justify-content: center;
        align-items: center;
    }
    .about-col-1 {
        flex-basis: 45%;
    }
    #skills{
        width:107vw;
    }
    .skills-container{
        flex-wrap: wrap;
    }
    #education{
        width:107vw;
    }
    .edu-container{
        flex-wrap: wrap;
    }
    .school-heading{
        font-size: 1.5rem;
    }
    #portfolio{
        width:calc(100% + 55px);
    }
    #contact{
        width:107vw;
    }
    .contact-list{
        padding:0px 10%;
    }
    .copyright{
        width:107vw;
    }
}
/*Laptop devices*/
@media only screen and (min-width: 769px) and (max-width: 1400px) {
    .container{
        padding:10px 5%;
    }
    nav ul li a{
        font-size: 16px;
    }
    nav ul li{
        margin:10px 10px;
    }
    .header-text p{
        font-size: 1.6rem;
    }
    .header-text h1{
        font-size: 40px;
    }
    .text-msg{
        font-size: 1.5rem;
    }
    .social-media-links a{
        width:3rem;
        height:3rem;
    }
    .social-media-links a i{
        font-size: 1.3rem;
    }
    .sub-title{
        font-size: 40px;
    }
    .about-col-1{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .my-skills{
        font-size: 40px;
    }
    .skills-container{
        justify-content: center;
        align-items: center;
        flex-wrap:wrap;
        padding: 0px 5%;
    }
    .my-education{
        font-size: 40px;
    }
    .edu-container{
        padding:0px 5%;
    }
    .portfolio-conainer{
        font-size: 30px;
    }
    .worklist{
        padding:0px 5%;
    }
    .contact-conainer{
        font-size:30px ;
    }
    .contact-list{
        padding:0px 10%;
    }
}