/*Break Points*/
@media only screen and (max-width: 991px)

{
    
    body{
        width: 100%;
        overflow: hidden;
        
    }
    header,
    header.sticky{
        padding: 12px 5%;
        

    }
    footer .p{
        padding: 20px 5%;
        width: 100%;
        overflow: hidden;
        text-align: center;
        justify-content: center;
    }
    section{
        padding: 12px 5%;
    }
    .navlist a{
        padding: 8px 15px;

    }
    :root{
        --bg-font:1.8rem;
        --norma-font:1.3rem;
        --neon-box-shadow:0 0 .5rem #121212;
        --h2-font:2.3rem; 
    }
    .home-content{
        margin-top: 5rem;
    }
}
@media (max-width: 768px){
header,
    header.sticky{
        padding: 15px 5%;
        width: 100%;

    }
    #menu-icon{
        display: block;
        font-size: 30px;
        transition: all .4s ease;
    }
    #menu-icon.bx-x{
        transform: rotate(-180deg);
    }
    .navlist{
        display: flex;
        position: absolute;
        top: -1000px;
        right: 0;
        left: 0;
        flex-direction: column;
        background: var(--bg-color);
        text-align: left;
        padding: 0 5%;
        transition: all .45s ease;
    }
    .navlist a{
        display: block;
        padding-bottom: 1rem;
        font-size: 1rem;
    }
    .navlist.open{
        top: 100%;
    }
     .change-text{
            font-size: 1.2rem;
            font-weight: 600;
        }
       
   
    section{
        width:100%;
        padding: 10px 10%;
        
    }
    .home{
        grid-template-columns: 1fr;
    }
    .home-image{
        margin-bottom: 5rem;
    }
    .about{
        flex-direction: column;
        align-items: center;
        justify-content: center;
       
    }
    .skill-main{
        grid-template-columns: 1fr;
    }
    .p{
        font-size:.9rem;
    }
}


/*CHATGPT CODES*/

@media only screen and (max-width: 768px) {
    
    #menu-icon {
        display: block;
    }

    header.sticky {
        padding: 12px 5%;
    }
}

@media (max-width: 480px) {
    body{
    overflow: hidden;
    position: relative;
}
    header.sticky {
        padding: 12px 3%;
        margin-bottom: 20px;
        background: var(--text-color);
    }
    .home {
        grid-template-columns: 1fr; 
        grid-gap: 2em; 
    }
    .home-content {
        margin-top: 2rem; 
    }
    .home-content h1 {
        font-size: 32px; 
    }
    .home-content h2 {
        font-size: 20px; 
    }
    .info-box {
        width: 100%; 
        margin: 1rem 0; 
    }
    .btn-box a {
        width: 100%; 
    }
    .about {
        flex-direction: column;
        width: 100%;
        align-content: center;
        display: flex;
        align-items: center;
        justify-content: center;
        grid-template-columns: 1em;
        margin-left: 10px;
        grid-gap: .5em; 
        padding: 1em; 
    }
    .about-content{
        justify-content: center;
        align-items: center;
        margin: auto; 
        padding: 12% 3px;

    } 
    .about .image-about img {
        max-width: 90%; 
    }  
    .about-content span {
        font-size: 0.9rem; 
        margin-bottom: 0.5rem; 
    }
    .about-content h2 {
        font-size: 1.2rem; 
    }
    .about-content p {
        font-size: 0.8rem; 
        margin-bottom: 1rem; 
    } 
    .main-text {
        margin: 1rem; 
    }
    .main-text h2 {
        font-size: 1.2rem; 
    }
    .main-text span {
        font-size: 0.9rem;
        margin-bottom: 0.5rem; 
    }
     .section-services {
        grid-gap: 1rem; 
     }
    .section-services .service-box {
        flex: 1 1 calc(50% - 1rem);
        padding: 1rem; 
    }
    .skill-main h3 {
        font-size: 1.2rem; 
        margin-bottom: 1rem;
     }
    .skill-bar .bar {
        height: 8px; 
    }
    .skill-bar .bar span {
        height: 100%;
     }
    .skill-bar .bar .figma {
        width: 60%; 
    }
    .skill-bar .bar .html {
        width: 80%; 
    }
    .skill-bar .bar .css {
        width: 85%; 
    }
    .skill-bar .bar .javascript {
        width: 75%; 
    }
    .proffesional {
        grid-template-columns: 1fr; 
        grid-gap: 1rem; 
    }
    .box .text {
        font-size: 0.9rem; 
        margin: 0.5rem 0; 
    }
    .box .text big {
        font-size: 1rem; 
    }
    .circle {
        height: 80px; 
    }
    footer .p {
        font-size: 0.9rem; 
        margin: 0.5rem 0; 
    }
    footer a i {
        font-size: 1.1rem; 
    }
    .contact form {
        padding: 0 1rem; 
    }
    .contact form input,
    .contact form textarea {
        font-size: 0.9rem; 
        margin-bottom: 0.7rem; 
    }
    .formbtn .btn {
        height: 40px;
        font-size: 0.9rem;
    }
}
@keyframes morph{
    0%,
    100%{
        border-radius:40% 60% 70% 30% / 40% 40% 60% 50%;
    }
    30%{
        border-radius:70% 30% 50% 50% / 30% 30% 70% 70%;
    }
    60%{
        border-radius:100% 60% 60% 100% / 100% 100% 60% 60%;
    }
    80%{
        border-radius:69% 31% 66% 34% / 21% 30% 70% 79%;
    }
}
@keyframes html{
    0%{
        width: 0%;
    }
    100%{
        width: 92%;
    }
}
@keyframes html{
    0%{
        width: 0%;
    }
    100%{
        width: 90%;
    }
}
@keyframes css{
    0%{
        width: 0%;
    }
    100%{
        width: 92%;
    }
}
@keyframes figma{
    0%{
        width: 72%;
    }
    100%{
        width: 92%;
    }
}
@keyframes javascript{
    0%{
        width: 0%;
    }
    100%{
        width: 80%;
    }
}
@keyframes glow{
    0%{
        background:var(--bg-color);
        box-shadow: none;
    }
    100%{
        background: var(--hover-color);
        box-shadow: var(--hover-color);
    }
}
@keyframes slideanimation{
    0%{
       opacity: 0;
       transform: translateY(100px)
    }
    100%{
        opacity: 1;
       transform: translateY(0)
    }
}