@media screen and (max-width:424px){
:root{
    font-size: 11px;
}
.type-content{
    font-size: 1.2rem;
}

.service{
    flex-direction: column;
    margin: 2rem;
    /* align-items: center; */
}
.service-content{
    width: 85%;
}
.service-border{
width:80%;
margin: auto;
}
.service-content h1{
    font-size: 1.7rem;
}
.design{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    /* border: 2px solid red; */
}
.text-1 {
    /* border: 2px solid black; */
    width: 100%;
}
.image{
    width: 100%;
}

.wordpress{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    /* border: 2px solid red; */
}
.spa{
    
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    /* border: 2px solid red; */
}
.Front-End{
    
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    /* border: 2px solid red; */
}
.head-para p {
    padding: 3px;
    margin: 3px;
    line-height: 1.6;
    font-weight: 500;
    font-size: 1.3rem;
}
.skill-template{
    margin-top: 4rem;
    
    /* border: 2px solid black; */
}
.one{
    /* border: 2px solid red; */
    display: flex;
    flex-direction: column;
    /* width: 100%; */
    /* margin: auto; */
}
.sub-one{
    width: 100%;
}
.sub-one h1{
    font-size: 1.7rem;
    margin: 7px 0px;
}
.sub-one p{
    font-size: 1.4rem;
    padding: 0;
    margin: 0;
    line-height: 1.5;
    font-weight: 500;
    /* border: 2px solid red; */
}

.main-fellow{
    /* border: 2px solid blue; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* text-align: center; */
    margin: 3em;
}
.fellow{
    /* border: 2px solid red; */
    width: 100%;
    margin: 6px;
    /* width: 0%; */
}
.fellow h1{
    font-size: 1.5rem;
    margin: 7px;
}
.fellow p{
    font-size: 1.4rem;
    margin: 2px;
    line-height: 1.4;
}

.about-me-content{
    /* border: 2px solid black; */
    width: 80%;
    margin: auto;
    text-align: center;
    padding: 2rem;
    /* margin: 0 2rem 0 2rem; */
}
.about-me-content p{
    /* columns: 2; */
    font-weight: 500;
    color: black;
    font-size: 1.2rem;
}

.contact-link{
    /* border: 2px solid red; */
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-evenly;
}
.sub-footer-social-link h2{
    font-size: 1rem;
}
.sub-footer-social-link a{
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    padding: 7px;
    margin: 7px;
    color: black;
}

.navigating-links{
    align-items: center;
    /* border: 2px solid red; */
    margin: 1em;
    display: flex;
    flex-direction: column;
}
.ul2{
    /* border: 2px solid red; */
    display: flex;
    justify-content: space-between;
    margin: 1rem;
    width: 100%;
}
.ul2 li{
    list-style: none;
}.ul2 a{
    /* color: black; */
    font-size: 0.9rem;
    font-weight: 300;
    text-decoration: none;
}

.copyright{
    /* border: 2px solid rebeccapurple; */
    text-align: center;
    font-size: 1rem;
}

/* welcome-notification */
.notification {
    position: fixed;
    bottom: 10px;
    left: 10px;
    width: 20%;
    padding: 10px 10px;
    border-radius: 4px;
    background-color: #141619;
    color: #f6f5f9;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(30px);
    opacity: 0;
    visibility: hidden;
    /* visibility: visible; */
    animation: fade-in 5s linear forwards;
}
.notification p{
    font-size: 0.9rem;
}
.notification-progress{
 position: absolute;
 left: 5px;
 bottom: 5px;
 width: calc(100% - 10px);
 height: 3px;
 transform: scaleX(0);
 transform-origin: left;
 background-image: linear-gradient(to right, #539bdb, #3250bf);
 border-radius: inherit;
 animation: load 3s 0.25s linear forwards;   
}
@keyframes fade-in {
    5% {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    90% {
        opacity: 1;
        transform: translateY(0);
    }

}
@keyframes load {
    to {
        transform: scaleX(1);
    }
}
.fix-notification{
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: max-content;
    padding: 7px 7px;
    border-radius: 4px;
    background-color: #141619;
    color: #f6f5f9;
}
.fix-notification a{
    font-size: 1rem;
    color: #f6f5f9;
    text-decoration: none;
}
.section1 {
    /* display: flex;
    flex-direction: column; */
    /* border: 2px solid red; */
    margin: 1em;
    height: 50vh;
}
.modal-btn{
    margin-top: 0.7em;
}
}