/* @media only screen and (max-width: 1497px) {
    .cols{
        margin-bottom: 30px;
        position: relative;
        bottom: 40px;
        
    }

}
@media only screen and (max-width: 1251px) {
    div.pic{
        padding-top: 4em;
    }
    .text{
        width: 70%;
    height: 80%;
    }
    .cols h3{
        font-size:1.2rem;
    }
    .cols p{
        margin-top: 1.5rem;
        font-size:.9rem;
    }
    .about-info li span{
        font-size: 1rem;
    }
    .exp-text{
        font-size: 1rem;
    }

}
@media only screen and (max-width: 1054px) {
   div.text span{
    font-size: 2rem;
   }
   .btn {
    font-size: 1rem;
}
.main-row{
    margin-top: 4em;
    width: 100%;
    height: 50%;
    display: flex;
    position: relative;
    justify-content: space-around;
}
.about-details span{
    font-size: 1.1rem;
    
}

}
@media only screen and (max-width: 990px) {
    
    div.pic{
        height: 100%;
    }
    #about-me{
        margin: auto;
    }
    .left{
        width: 40%;
    }
    .middle{
        width: 5%;
    }
    .right{
        width: 40%;
    }
    .title-s{
        flex-wrap: wrap;
    }
    .img-circle{
        width: 120px;
        height: 120px;
    }
    .about-sec{
        width: 100%;
        display: flex;
        justify-content: space-around;
    } 
}
@media only screen and (max-width: 907px) {
    .about-sec{
        display:block;
    }
    .left{
        width: 60%;
        margin: auto;
        border-bottom: 1px solid white;
    }
    .right{
        width: 60%;
        margin: auto;
    }
    .img-or-content{
        width: 400px;
        display: flex;
        align-items: center;
    }
    .opasity span{
        font-size: 2.8rem;
    }
    .text-for-git{
        font-size: 1rem;
    }
    div.pic{
        padding-top: 3em;
    }
    .content-pic{
        width: 70%;
    }
    
}
@media only screen and (max-width: 780px) {
    div.pic{
        padding-top: 5em;
    }
    .content-pic{
        width: 80%;
    }
    ul.list-box{
        display: none;
    }
    .menu-btn{
       display: block;
       text-align: end;
       align-self: center;
    }
    .btn{
        color: white;
        font-size: .9rem;
    }
    .buttons{
        width: 25em;
    }

    .toggle-menu{
        background: linear-gradient(to bottom, #0e0226f3 0%, #686b73 100%);
        box-shadow: 0px 0px 6px 1px orange;
        height: 28vh;
        width: 100vw;
        position:sticky;
        top: 8vh;
        right: 1%;
        z-index: 2000;
        border-radius: 10px;
        overflow: hidden;
    }
    .toggle-menu ul{
        display: block;
        text-align: center;
        margin: auto;
        line-height: 45px;
    }
   
}
@media only screen and (max-width: 720px) {
   div.pic{
    padding: 0%;
   }
    div.content{
        flex-direction: column;
        height: auto;  
        align-items: center;
        margin-top: 4em;
    }
    .text{
        text-align: center;
        width: 100%;
    }
    .buttons{
        width: 100%;
    }
    .about-sec{
    padding-top: 3em;
    }
}
@media only screen and (max-width: 588px){
    div.buttons{
        width: 100%;
    }
    div.text{
        margin-bottom: -50px;
        
    }
    div.pic{
        justify-content: center;
    }
    div.text{
        width: 100%;
    }
    .toggle-menu{
        overflow-x: hidden;
    }
    html{
        overflow-x: hidden;
    }

}
@media only screen and (max-width: 503px){
    div.text{
        padding: 0px 0px 5em 0px;
    }
    .about-sec{
        width: 100vw;
    }
    .left{
        width: 100vw;
    }
    .right{
        width: 90vw;
    }
    .img-or-content{
        height: auto;
        flex-direction: column;
        margin: auto;
    }
    footer{
        font-size: .9rem;
    }
    
}
@media only screen and (max-width: 360px){
    .about-sec{
        padding-top: 5em;
    }
    h2.logo{
        font-size: 1rem;
    }
    .text div span{
        font-size: 1.5rem;
    }
    .buttons button{
        font-size: .7rem;
    }
    div.text{
        padding: 0%;
    }
    div.pic{
        padding-top: 5em;
        width: 100%;
        height: 50vh;
    }
    .opasity span{
        font-size: 2rem;
    }
}
@media only screen and (max-width: 240px){
    div.text{
        margin-top: 6em;
    }
    #projects-text{
        font-size: 3rem;
    }
    #contacts-text{
        font-size: 3rem;
    }
    #about-me-text{
        font-size: 3rem;
    }
    footer{
        height: 10vh;
        text-align: center;
        font-size: .7rem;
    }
    .opasity span{
        font-size: 2rem;
    }
} */



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .common-padding{
        padding: 0 20px;
    }
    .content {
        grid-template-columns: repeat(1, 1fr);
    }
    .text {
       text-align: center;
    }
    .img-or-content{
        grid-template-columns:repeat(0, 1fr);
        gap: 40px;
        margin-bottom: 20px;
    }
    .left{
        grid-template-columns: repeat(1, 1fr);
        
    }
    /* .text{
        border: 1px solid green;
        
    } */
    .text span {
        font-size: 1.6rem;
    }
    .opasity span{
        font-size: 2.7rem;
    }
    .text-for-git{
        font-size: 1rem;
    }
    .pic img{
        width: 95%;
    }
    .about-sec{
        grid-template-columns: repeat(1, 1fr);
        padding: 40px 20px;
    }
    .btn {
        padding: .5rem 1rem;
        font-size: .7rem;
        margin: 30px 0px 0px 8px;
    }
    .list-box {
        display: none;
    }
    .hide{
        display: flex;
    }
    .menu-btn{
        display: block;
       
    }
    #about-me-text::after{
        font-size: 6rem;
    }
    .exp-text{
        margin-top:-40px;
    }
    button.btn.btn1{
        margin: 0px;
    }
    button.btn.btn2{
        margin: 0px;
    }
    .buttons {
        /* border: 1px solid rgb(136, 33, 33); */
        padding: 12px 0;
        gap: 20px;
        justify-content: center;
    
    }
   
    .about-details span{
        font-size: 1.1rem;
        
    }
    .title-sk{
        font-size: 1rem;
    }

    .exp-text{
        font-size: 1rem;
        flex-wrap: wrap;
    }

    .about-info li span{
        font-size:1rem;
    }

    .about-pro-text{
        text-align: center;
        padding: 30px 0;
    }
    .about-pro-text span{
        font-size: 1.3rem;
    }
    #contacts-text::after{
        font-size: 6rem;
        margin-top: -60px;
    }
    #projects-text::after{
        font-size: 6rem;
        margin-top: -60px;
        
    }
    #about-me-text::after{
    font-size: 6rem;
    margin-top: -60px;
    }
    .hide{
        display: none;
    }
    .toggle-menu{
        background: linear-gradient(to bottom, #0e0226f3 0%, #686b73 100%);
        box-shadow: 0px 0px 6px 1px orange;
        height: 30vh;
        width: 100%;
        position:absolute;
        top: 50px;
        /* right: 0px; */
        z-index: 2000;
        border-radius: 10px;
        overflow: hidden;
        transition: all 0.5s ease;
    }
    .toggle-menu ul{
        display: block;
        text-align: center;
        margin: auto;
        line-height: 45px;
        transition: max-height 0.5s ease;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */



/* Mobile View (up to 600px) */
@media only screen and (min-width: 600px) {
    .common-padding{
        padding: 0 50px;
    }
    .content {
        grid-template-columns: repeat(2, 1fr);
    }
    .img-or-content{
        grid-template-columns:repeat(1, 1fr);
        gap: 0px;
        margin-bottom: 0px;
    }
    .left{
        grid-template-columns: repeat(2, 1fr);
    }
    /* .text{
        border: 1px solid green;
        
    } */
    .text span {
        font-size: 1.6rem;
    }
    .opasity span{
        font-size: 2.7rem;
    }
    .text-for-git{
        font-size: 1rem;
    }
    .pic img{
        width: 100%;
    }
    .about-sec{
        grid-template-columns: repeat(1, 1fr);
        padding: 50px 50px;
    }
    .btn {
        padding: .5rem 1rem;
        font-size: .7rem;
        margin: 30px 0px 0px 8px;
    }
    .list-box {
        display: none;
    }
    .hide{
        display: none;
    }
    .menu-btn{
        display: block;
       
    }
    #about-me-text::after{
        font-size: 6rem;
    }
    .exp-text{
        margin-top:-40px;
    }
    button.btn.btn1{
        margin: 0px;
    }
    button.btn.btn2{
        margin: 0px;
    }
    .buttons {
        /* border: 1px solid rgb(136, 33, 33); */
        padding: 15px 0;
        gap: 14px;
        /* display: flex; */
        /* flex-direction: column; */
        align-items: start;
        justify-content: start;
    
    }
    button.btn.btn2{
        /* margin-top: 10px; */
    }
    .about-details span{
        font-size: 1.1rem;
        
    }
    .title-sk{
        font-size: 1rem;
    }

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

    .about-info li span{
        font-size:1rem;
    }

    .about-pro-text{
        text-align: center;
        padding: 30px 0;
    }
    .about-pro-text span{
        font-size: 1.3rem;
    }
    #contacts-text::after{
        font-size: 7rem;
        margin-top: -70px;
    }
    #projects-text::after{
        font-size: 7rem;
        margin-top: -70px;
        
    }
    #about-me-text::after{
    font-size: 7rem;
    margin-top: -70px;
}

.toggle-menu{
        background: linear-gradient(to bottom, #0e0226f3 0%, #686b73 100%);
        box-shadow: 0px 0px 6px 1px orange;
        height: 30vh;
        width: 100vw;
        position:absolute;
        top: 50px;
        right: 1%;
        z-index: 2000;
        border-radius: 10px;
        overflow: hidden;
        transition: all 0.5s ease;
    }
    .toggle-menu ul{
        display: block;
        text-align: center;
        margin: auto;
        line-height: 45px;
        transition: max-height 0.5s ease;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 790px) {
    .common-padding{
        padding: 0 70px;
    }
    .img-or-content{
        grid-template-columns:repeat(1, 1fr);
        gap: 0px;
    }
    .left{
        grid-template-columns: repeat(2, 1fr);
    }
    .text span {
        font-size: 2rem;
    }
    .opasity span{
        font-size: 3rem;
    }
    .text-for-git{
        font-size: 1rem;
    }
    .pic img{
        width: 83%;
    }
    .about-sec{
        grid-template-columns: repeat(1, 1fr);
        padding: 65px 70px;
    }
    .btn {
        padding: .5rem 1rem;
        font-size: 1rem;
        margin: 30px 0px 0px 8px;
    }
    .list-box {
        gap: 70px;
        display: flex;
    }
    .menu-btn{
        display: none;
       
    }
    #about-me-text::after{
        font-size: 7rem;
    }
    .exp-text{
        margin-top:-70px;
    }
    .buttons {
        padding-top: 30px;
        gap: 20px;
    }
    button.btn.btn2{
        margin-top: 0px;
    }
    .about-details span{
        font-size: 1.3rem;
        
    }
    .title-sk{
        font-size: 1.2rem;
    }

    .exp-text{
        font-size: 1.2rem;
    }

    .about-info li span{
        font-size:1.3rem;
    }

    .about-pro-text{
        text-align: center;
        padding: 30px 0;
    }
    .about-pro-text span{
        font-size: 1.5rem;
    }
    #contacts-text::after{
        font-size: 8rem;
        margin-top: -80px;
    }
    #projects-text::after{
        font-size: 8rem;
        margin-top: -80px;
        
    }
    #about-me-text::after{
    font-size: 8rem;
    margin-top: -80px;
}
.toggle-menu{
    display: none;
}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .common-padding{
        padding: 0 80px;
    }
    .img-or-content{
        grid-template-columns:repeat(1, 1fr);
        gap: 15px;
    }
    .left{
        grid-template-columns: repeat(1, 1fr);
    }
    .text span {
        font-size: 2.5rem;
    }
    .opasity span{
        font-size: 3rem;
    }
    .text-for-git{
        font-size: 1rem;
    }
    .pic img{
        width: 75%;
    }
    .about-sec{
        grid-template-columns: repeat(2, 1fr);
        padding: 65px 80px;
        gap: 50px;
    }
    .btn {
        padding: .6rem 1.2rem;
        font-size: 1.2rem;
        margin: 45px 0px 0px 8px;
    }
    .list-box {
        gap: 100px;
    }
    #about-me-text::after{
        font-size: 8rem;
    }
    .exp-text{
        margin-top:-80px;
    }
    .buttons {
        padding-top: 40px;
    
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .common-padding{
        padding: 0 100px;
    }
    .img-or-content{
        grid-template-columns:0fr 1fr;
        gap: 40px;
    }
    .text span {
        font-size: 2.9rem;
    }
    .opasity span{
        font-size: 4rem;
    }
    .text-for-git{
        font-size: 1.5rem;
    }
    .about-sec{
        padding: 65px 100px;
        gap: 80px;
    }
}