/* =============================
        GENERAL RESET         
============================= */

*{
    margin: 0;
    padding: 0;
}

ol,
ul,
menu {
    list-style: none;
}

*,
*::before,
*::after{
    box-sizing: border-box;
}

body{
    background-color: #1a1a20;
    font-family: 'Montserrat', sans-serif;
    scrollbar-width: none;
    overflow-y: scroll;
}

body::-webkit-scrollbar{
    display: none;
}

.container{
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 50px;
}

a, 
button, 
span,
input,
i,
::after{
    transition: 1s;
}

p,
a {
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
}

p{
    line-height: 1.8rem;
    font-weight: 200;
    word-spacing: 1px;
}

h1{
    font-size: 5rem;
    color: #fff;
}

h2{
    font-size: 4rem;
    color: #fff;
}

h3{
    font-size: 1.5rem;
}

h4{
    font-size: 1.25rem;
    color: #fff;
}

.title{
    text-align: center;
    letter-spacing: 2px;
    background: url('../img/dots.png');
    background-repeat: no-repeat;
    background-size: 32%;
    background-position: left bottom;
    padding-top: 50px;

}

.title h2::after{
    content: "";
    background-color: #02FDFD;
    height: 5px;
    width: 70px;
    position: absolute;
    margin-left: -70px;
    margin-top: 75px;
    z-index: 1;
    border-radius: 4px;
}

/* ================================
           HEADER  START 
=================================*/

#header{
    padding: 0 35px;
    position: fixed;
    width: 100%;
    z-index: 100;
}

.logo{
    position: relative;
    top: 0;
    padding-top: 10px;
    letter-spacing: 2px;
    font-weight:700;
}

.logo::after{
    position: absolute;
    content: "";
    height: 107px;
    width: 75px;
    background-color: #02FDFD;
    top: 0;
    z-index: -1;
}

.logo h4{
    padding-left: 7px;
    word-spacing: 5px;
}

.logo span{
    color: #004B4B;
    font-size: 1.25rem;
    font-weight: 800;
}

#menu__button {
    position: absolute;
    right: 35px;
    top: 15px;
    z-index: 100;
}

#menu__button button{
    position: relative;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 4px;
    padding: 5px 15px 5px 45px;
    background: none;
    cursor: pointer;
}

#menu__button button:hover{
    color: #02FDFD;
    border-color:  #02FDFD;
}

#menu__button i{
    font-size: 28px;
    position: absolute;
    top: -2px;
    left: 10px;
}

#menu{
    padding: 30px 0 0 40px;
    position: fixed;
    height: 100%;
    width: 50%;
    background-color: #0025FF;
    top: 0px;
    right: -50%;
    z-index: 1;
    animation: menuSlide;
    transition: 1s;
}

.menu__links{
    height: 85%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.menu__links a{
    position: relative;
    padding: 0 0 0 35px;
    font-weight: 700;
    font-size: 3.2rem;
}

.menu__links a:hover{
    color: #02FDFD;
}

.menu__links a::after {
    content: "";
    width: 100%;
    height: 2px;
    bottom: 26px;
    background-color: #02FDFD;
    position: absolute;
    left: 0;
    opacity: 0;
    z-index: -2;
    padding-right: 10px;
}

.menu__links a:hover::after {
   opacity: 1;
}

.menu__links span {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.25rem;
    font-family: 'Roboto Mono', monospace;
    font-weight: 300;
    letter-spacing: 2px;
}

.menu__social-media-links{
    width: 25%;
    margin-top: 45px;
    margin-left: 35px;
    display: flex;
    justify-content: space-between;
}

.menu__social-media-links i{
    font-size: 1.5rem;
}

.menu__social-media-links i:hover{
    color: #02FDFD;
}

/* ================================
      ABOUT ME SECTION START 
=================================*/

#home{
    background: url('../img/bg_home.svg')no-repeat left center;
    background-size: cover;
}

#about-me{
    display: grid;
    grid-template-columns: 7fr 5fr;
    column-gap: 30px;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.about-me__description h1{
    margin-top: 55px;
}

.about-me__description h4{
    margin-top: 5px;
    font-weight: 400;
}

.about-me__description p{
   margin: 16px 0;
}

.about-me__description span{
    color: #02FDFD;
    font-weight: 500;
}

.about-me__image{
    display: flex;
    justify-content: center;
}

.about-me__image img{
    width: 80%;
    margin: 0 auto;
}

.cta a{
    width: 200px;
    height: 46px;
    text-align: center;
    line-height: 38px;
    padding: 3px 3px;
    float: right;
    margin-right: 15px;
    border: 2px solid #02FDFD;
    border-radius: 4px;
    background: none;
    color: #fff;
    font-size: 1.25rem;
    letter-spacing: 2px;
}

.cta a:hover{
    border: transparent;
    color: #004B4B;
    cursor: pointer;
    background-color: #02FDFD;
}

.sections-divider{
    background: url('../img/bg_anchor2.jpg')no-repeat center center fixed;
    background-size: 100%;
    height: 300px;
    width: 100%;
}

/* ================================
      SERVICES SECTION START 
=================================*/
#services{
    padding: 60px 0;
}

.services{
    display: grid;
    grid-template-columns: 4fr 8fr;
    margin-top: 80px;
}

.services__navigation nav{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    z-index: -1;
}

.services__navigation a{
    width: 300px;
    height: 56px;
    background: #272727;
    border-radius: 4px;
    line-height: 56px;
    text-align: center;
    margin-top: 20px;
}

.services__navigation-active{
    filter: drop-shadow(0px 0px 8px #02FDFD);
    color: #02FDFD;
    font-weight: 500;
    letter-spacing: 1px;
    font-size: 1.1rem;
}

.services__navigation :nth-child(1){
    margin-top: 5px;
}

.services__navigation a:hover{
    filter: drop-shadow(0px 0px 5px #02FDFD);
    color: #02FDFD;
}

.services__description h2{
    font-weight: 400;
    color: #272727;
    word-spacing: 5px;
    animation: servicesAnimation 1s ease-in, marginLeftAnimation 1s ease-in;
}

.services__description p{
    margin-top: 16px;
    animation: servicesAnimation 1s ease-in;
}


/* ================================
    DESIGN APPROACH SECTION START 
=================================*/
#design-approach {
   padding: 60px 0;
}

.approach__navigation{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    column-gap: 2%;
    margin-top: 50px;
}

.approach__link{
    width: 15%;
    text-align: center;
    padding: 10px 55px;
}

.approach__link:hover {
    cursor: pointer;
}

.approach__link img{
    width: 40px;
    height: 50px;
    margin: 0 auto
}

.approach__link h4{
    padding-top: 10px;
    font-weight: 300;
    letter-spacing: 1px;
}

.approach__description{
    margin-top: 30px;
}

.approach__description h3 {
    color: #02FDFD;
    font-size: 3rem;
    font-weight: 700;
    animation: servicesAnimation 1s ease-in, marginLeftAnimation 1s ease-in;
}

.approach__description p{
    width: 100%;
    padding: 40px 60px;
    border: 2px solid #272727;
    margin-top: 20px;
    animation: servicesAnimation 1s ease-in;
    border-radius: 4px;
}

/* ================================
    PORTFOLIO SECTION START 
=================================*/

#portfolio{
    width: 100%;
    position: relative;
    background: url('../img/bg_anchor2.jpg')no-repeat center center fixed;
    background-size: cover;
    padding: 60px 0;
}

#portfolio__project{
    padding: 50px 50px;
    display: grid;
    grid-template-columns: 4fr 8fr;
    column-gap: 30px;
}

.portofolio__project-thumbnail img{
    width: 100%;
    animation: servicesAnimation 1s ease-in, marginRightAnimation 1s ease-in;
    border-radius: 4px;
}

.portfolio__project-description h3{
    color: #fff;
    margin-top: 20px;
    font-size: 2.5rem;
    float: left;
    animation: servicesAnimation 1s ease-in, marginLeftAnimation 1s ease-in;
}

.portfolio__project-description p{
    animation: servicesAnimation 1s ease-in;
}

.portfolio__project-description a{
    float: right;
    margin-top: 30px;
    padding: 5px 30px;
    border: 2px solid #02FDFD;
    color: #fff;
    animation: servicesAnimation 1s ease-in, marginBottomAnimation 1s ease-in;
    border-radius: 4px;
}

.portfolio__project-description a:hover{
    border: 2px solid transparent;
    background-color: #02FDFD;
    color: #004B4B;
}

.portfolio__project-navigation{
    width: 100%;
    cursor: pointer;
    position: absolute;
    top: 50%;
}

.portfolio__project-navigation button{
    display: flex;
    flex-direction: column;
    background: none;
    color: #02FDFD;
    padding: 5px 20px;
    align-items: center;
    cursor: pointer;
    z-index: 2;
    border: none;
}

.portfolio__project-navigation i{
    color: #fff;
    font-size: 32px;
    z-index: 1;
}

.arrow-right , .arrow-left{
    color: #fff;
    width: 50%;
    float: left;
}

.arrow-right button{
   float: right;
}


/* ================================
    CONTACT SECTION START 
=================================*/
#contact{
    padding-top: 60px;
}

.contact{
    display: grid;
    grid-template-columns: 4fr 8fr;
    column-gap: 30px;
    padding: 70px 0 10px;
}

.contact__details {
    padding-top: 10px;
}

.contact__form form{
    width: 80%;
    margin: 0 auto;
}

.contact__form input{
    width: 45%;
    height: 50px;
    border: 2px solid #272727;
    background: none;
    margin-top: 20px;
    margin-left: 15px;
    color: #fff;
    border-radius: 4px;
}

.contact__form textarea{
    width: 93%;
    height: 150px;
    border: 2px solid #272727;
    background: none;
    margin-top: 20px;
    margin-left: 15px;
    padding-left: 15px;
    padding-top: 15px;
    border-radius: 4px;
    color: #fff;
}

input[type=text] {
    padding-left: 15px;
    line-height: 50px;
}

input[type = submit]{
    border: 2px solid #02FDFD;
    font-size: 1rem;
    float: right;
    margin-right: 32px;
    text-transform: capitalize;
    line-height: 50px;
    letter-spacing: 1px;
    width: 35%;
}

input[type=submit]:hover{
    color: #004B4B;
    border: 2px solid transparent;
    background-color: #02FDFD;
    cursor: pointer;
}

.contact__social-media-links{
    width: 45%;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.contact__details h3{
    color: #02FDFD;
    font-size: 2rem;
}

.contact__social-media-links i{
    font-size: 1.2rem;
}

.contact__social-media-links i:hover{
    color: #02FDFD;
}

.contact__mobile-subtitle {
    display: none;
}

address{
    display: block;
    font-style: normal;
    line-height: 60px;
    margin-top: 20px;
}

address i{
   color: #272727;
   margin-right: 20px;
   font-size: 36px;
}

/* ================================
    FOOTER START 
=================================*/

#footer{
    border-top: 2px solid #272727;
    text-align: center;
    padding: 30px 35px;
}

#footer p {
    color: #919191;
}

/* ================================
         ANIMATIONS FRAMES
=================================*/

@keyframes menuSlide {
    from{
      right: -40%;
    }
    to{
        right: 0;
    }
}

@keyframes servicesAnimation {

    from{
        opacity: 0;
    }
    to{
        opacity:1;
    }
}

@keyframes marginLeftAnimation {

    from {
            margin-left: 80px;
        }
        to {
            margin-left: 0px;
        }
}

@keyframes marginRightAnimation {

    from {
        margin-left: -50px;
    }
    to {
        margin-right: 0px;
    }
}

@keyframes marginTopAnimation {

    from {
        margin-top: -50px;
    }
    to {
        margin-top: 0px;
    }
}

@keyframes marginBottomAnimation {

    from {
        margin-bottom: -50px;
    }
    to {
        margin-bottom: 0px;
    }
}

/* MEDIA QUERY SCREEN 990PX - 1200PX */

@media screen and (min-width: 990px) and (max-width: 1200px){

    h1 {
        font-size: 4rem;
    }

    h2 {
        font-size: 3.5rem;
        
    }

    h3 {
        font-size: 1.25rem;
    }

    h4 {
        font-size: 1.1rem;
        color: #fff;
    }

    p {
        font-weight: 300;
        font-size: 15px;
    }
    
    #header {
        padding: 0 20px;
    }

    #menu__button {
        right: 20px;
    }

    .container {
        max-width: 960px;
        padding-bottom: 0px;
    }

    .title h2::after {
        height: 5px;
        width: 65px;
        position: absolute;
        margin-left: -68px;
        margin-top: 64px;
        z-index: 1;
    }
    
    #about-me{
        grid-template-columns: 8fr 4fr;
        column-gap: 20px;
    }

    .menu__links a {
        padding: 0 0 0 35px;
        font-size: 3rem;
    }

    .about-me__description h1 {
        margin-top: 0;
    }

    .cta a {
        width: 160px;
        height: 42px;
        padding: 0;
        font-size: 1.1rem;
        letter-spacing: 1px;
    }

    .about-me__image img {
        width: 95%;
        margin-top: 8px;
    }

    .services {
        grid-template-columns: 4fr 8fr;
        margin-top: 50px;
    }

    #services {
        padding: 20px 0;
    }

    .services__navigation a {
        width: 250px;
    }

    .services__description h2 {
        font-size: 3.1rem;
    }

    .portfolio__project-description h3 {
        margin-top: 10px;
        font-size: 2.1rem;
    }

    .portfolio__project-description a {
        margin-top: 10px;
    }

    .contact {
        grid-template-columns: 4fr 8fr;
        column-gap: 5px;
        padding: 30px 0 20px;
    }

    .contact__details h3 {
        font-size: 1.5rem;
        margin-top: 10px;
    }

    .contact__mobile-subtitle {
        display: none;
    }

}

/* MEDIA QUERY SCREEN 767PX - 989PX */
@media screen and (min-width: 767px) and (max-width: 989px) {

    h1 {
        font-size: 3.2rem;
    }

    h2 {
        font-size: 3rem;
    }

    h3 {
        font-size: 1.15rem;
    }

    h4 {
        font-size: 1rem;
        color: #fff;
    }

    p {
        font-weight: 300;
        font-size: 15px;
        line-height: 23px;
    }

    .container {
        max-width: 730px;
        padding-bottom: 0px;
    }
    
    #header {
        padding: 0 15px;
    }

    .logo {
        letter-spacing: 2px;
    }

    .logo::after {
        height: 83px;
        width: 65px;
    }

    .logo h4 {
        padding-left: 7px;
        word-spacing: 5px;
    }

    .logo span {
        font-size: 1rem;
    }

    #menu__button {
        right: 15px;
    }

    #menu {
        padding: 30px 0 0 15px;
    }
    
    .menu__links a {
        padding: 0 0 0 25px;
        font-size: 2.4rem;
    }

    .menu__links span {
        font-size: 0.9rem;
    }
    
    .menu__social-media-links {
        width: 45%;
        margin-top: 35px;
        margin-left: 20px;
    }

    .title {
        padding-top: 0;
    }
    
    .title h2::after {
        height: 4px;
        width: 63px;
        margin-left: -63px;
        margin-top: 55px;
    }

    #about-me {
        height: auto;
        grid-template-columns: 1fr;
        padding-bottom: 40px;
    }

    .about-me__description{
        order: 2;
        text-align: center;
    }

    .about-me__description h1{
        margin-top: 30px;
    }

    .about-me__description h4 {
        font-size: 1.25rem;
    }

    .about-me__description p{
        text-align: left;
        width: 90%;
        margin: 15px auto ;
    }

    .about-me__image{
        order: 1;
        margin-top: 80px;
    }

    .about-me__image img {
        width: 33%;
    }

    .cta a {
        width: 140px;
        height: 36px;
        margin: 20px auto 0;
        float: none;
        font-size: 1rem;
        padding: 5px 15px;
    }

    #services{
        padding-bottom: 30px;

    }

    .services {
        grid-template-columns: 3fr 9fr;
        margin-top: 40px;
        column-gap: 20px;
    }
    
    .services__navigation a {
        width: 170px;
        height: 46px;
        line-height: 46px;
        margin-top: 5px;
        font-size: 0.8rem;
    }
    
    .services__navigation-active {
        filter: drop-shadow(0px 0px 4px #02FDFD);
        font-size: 0.9rem;
    }

    .services__description h2 {
        font-size: 2.6rem;
        margin-top: 7px;
    }

    .services__description p {
        margin-top: 23px;
        line-height: 23px;
    }

    .approach__navigation {
        column-gap: 1%;
        margin-top: 30px;
    }

    .approach__link {
        width: 15.8%;
        padding: 10px 0px;
    }

    .approach__link img {
        width: 30px;
        height: 40px;
    }

    .approach__link h4 {
        padding-top: 5px;
        font-size: 1rem;
    }

    .approach__description {
        margin-top: 10px;
    }

    .approach__description h3 {
        font-size: 2.5rem;
    }

    .approach__description p {
        font-size: 15px;
        line-height: 23px;
        padding: 15px 25px;
        margin-top: 10px;
    }

    #portfolio {
        padding: 60px 0 20px;
    }

    #portfolio__project {
        padding: 50px 50px 30px;
        column-gap: 15px;
    }

    .portfolio__project-description h3{
        margin-top: 10px;
        font-size: 1.8rem;
    }

    .portfolio__project-description p{
        font-size: 15px;
        line-height: 23px;
    }

    .portfolio__project-description a{
        margin-top: 10px;
        padding: 5px 20px;
        font-size: 0.8rem;
    }

    .portfolio__project-navigation{
        top: 28%;
    }

    .contact{
        grid-template-columns: 5fr 7fr;
        column-gap: 10px;
        padding: 40px 0 40px;
    }
    
    .contact__form form{
        width: 100%;
    }

    .contact__form input{
        width: 48%;
        height: 40px;
        margin-top: 10px;
        margin-left: 5px;
    }
    
    .contact__form textarea{
        width: 98%;
        height: 150px;
        margin: 10px 0 0 5px;
    }

    input[type=text]{
        line-height: 40px;
    }

    input[type=submit]{
        font-size: 0.9rem;
        margin-right: 4px;
        line-height: 40px;
        width: 38%;
    }

    .contact__social-media-links{
        margin-top: 20px;
    }

    .contact__details h3{
        font-size: 1.6rem;
    }

    .contact__social-media-links i{
        font-size: 1.1rem;
    }

    .contact__mobile-subtitle {
        display: none;
    }

    address{
        line-height: 40px;
        margin-top: 20px;
    }

    address i{
        margin-right: 10px;
        font-size: 1.9rem;
    }

    #footer{ 
        padding: 15px 0;
    }
}

/* MEDIA QUERY SCREEN 320PX - 766PX */
@media screen and (min-width: 320px) and (max-width: 766px) {

    @keyframes menuSlide {
        from {
            right: -100%;
        }

        to {
            right: 0;
        }
    }
    
    h1 {
        font-size: 2.8rem;
    }

    h2 {
        font-size: 2.6rem;
    }

    h3 {
        font-size: 1rem;
    }

    h4 {
        font-size: 0.9rem;
    }

    p {
        font-weight: 300;
        font-size: 14px;
        line-height: 24px;
    }

    .container {
        max-width: 430px;
        padding-bottom: 0;
    }

    #header {
        padding: 0  0 0 10px;
        background-color: rgba(0, 0, 0, 0.7);
        height: 50px;
    }

    .logo::after {
        height: 75px;
        width: 55px;
    }
    
    .logo h4 {
        padding-left: 2px;
        font-size: 1rem;
    }
    
    .logo span {
        font-size: 1rem;
    }
    
    #menu__button {
        right: 10px;
        top: 10px;
    }
    
    #menu__button button {
        border-radius: 4px;
        padding: 5px 15px 5px 39px;
    }
    
    #menu__button i {
        font-size: 24px;
        top: -1px;
        left: 10px;
    }
    
    #menu {
        padding: 30px 0 0 20px;
        height: 100%;
        width:  100%;
        right: -100%;
    }
    
    .menu__links a {
        padding: 0 0 0 30px;
        font-size: 2.7rem;
    }

    .menu__social-media-links {
        width: 45%;
    }

    .title h2::after {
        height: 3px;
        width: 52px;
        margin-left: -52px;
        margin-top: 45px;
        border-radius: 2px;
    }

    #about-me {
        grid-template-columns: 1fr;
        height: auto;
    }

    .about-me__description{
       order: 2;
       text-align: center;
    }
    
    .about-me__description h1 {
        margin-top: 15px;
    }
    
    .about-me__description h4 {
        margin-top: 10px;
        font-size: 1.15rem;
    }

    .about-me__description p {
        padding: 0 25px;
        text-align: left;
    }
    
    .about-me__image {
        margin-top: 120px;
        order: 1;
    }
    
    .about-me__image img {
        width: 60%;
        margin: 0 auto;
    }
    
    .cta a {
        width: 140px;
        height: 40px;
        float: none;
        margin: 15px auto 0;
        font-size: 0.9rem;
        padding: 5px 15px;
    }

    #services {
        padding: 30px 0 0 0;
    }
   
    .services {
        grid-template-columns: 1fr;
        margin-top: 40px;
    }

    .services__navigation nav {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        row-gap: 15px;
        z-index: -1;
    }
    
    .services__navigation a {
        width: 45%;
        height: 46px;
        line-height: 46px;
        font-size: 0.8rem;
        margin-top: 0;
    }
    
    .services__navigation-active {
        filter: drop-shadow(0px 0px 4px #02FDFD);
        font-size: 0.8rem;
    }

    .services__navigation :nth-child(1) {
        margin-top: 0;
    }
    
    .services__description h2 {
        padding-left: 25px;
        color: #575757;
        margin-top: 40px;
        font-size: 2rem;
        font-weight: 500;
    }

    .services__description p {
        margin-top: 16px;
        padding: 0 25px;
    }

    #design-approach {
        padding: 40px 0;
    }
    
    .approach__navigation {
        column-gap: 1%;
        margin-top: 20px;
    }
    
    .approach__link {
        width: 32%;
        padding: 10px 0 0;
        margin-top: 25px;
    }
    
    .approach__link h4 {
        padding-top: 0;
    }
    
    .approach__description {
        margin-top: 30px;
    }
    
    .approach__description h3 {
        font-size: 2rem;
        font-weight: 600;
        padding-left: 25px;
    }
    
    .approach__description p {
        padding: 0 25px;
        border: none;
        margin-top: 20px;
    }

    #portfolio {
        padding: 40px 0;
    }
    
    #portfolio__project {
        padding: 60px 25px 20px;
        grid-template-columns: 1fr;
    }

    .portfolio__project-description p {
        margin-top: 15px;
    }
    
    .portfolio__project-description h3 {
        margin-top: 10px;
        font-size: 2.1rem;
    }
    
    .portfolio__project-description a {
        margin-top: 10px;
    }
    
    .portfolio__project-navigation {
        top: 15%;
    }
    
    .portfolio__project-navigation button {
        padding: 5px 5px;
    }

    #contact {
        padding-top: 40px;
    }

    .contact {
        grid-template-columns: 1fr;
        padding: 40px 0 30px;
    }
    
    .contact__details {
        padding-top: 0;
        padding-left: 25px;
        order: 2;
    }
    
    .contact__form form {
        width: 95%;
        margin: 30px auto 0;
    }
    
    .contact__form input {
        width: 100%;
        height: 40px;
        margin: 10px auto 0;
    }
    
    .contact__form textarea {
        width: 100%;
        margin: 20px auto 0;
    }
    
    input[type=text] {
        padding-left: 15px;
        line-height: 35px;
    }

    input[type=submit] {
        font-size: 0.9rem;
        line-height: 35px;  
    }
    
    .contact__details{
        margin-left: 0px;
        padding-left: 13px;
    }

    .contact__social-media-links {
        width: 45%;
    }
    
    .contact__details h3 {
        display: none;
    }

    .contact__mobile-subtitle {
        display: block;
        font-size: 1.1rem;
        margin-top: 0;
        color: #02FDFD;
        text-align: center;
    }
    
    address {
        line-height: 50px;
        margin-top: 20px;
    }

    address i {
        font-size: 32px;
    }

    #footer {
        padding: 15px 0;
    }
}

/* MEDIA QUERY SCREEN 425PX - 766PX */
@media screen and (min-width: 375px) and (max-width: 424px) {
    .container {
    max-width: 355px;
    padding-bottom: 0;
    }
}

/* MEDIA QUERY SCREEN 320PX - 374PX */
@media screen and (min-width: 320px) and (max-width: 374px) {
    .container {
        max-width: 300px;
        padding-bottom: 0;
    }

    .title{
        margin-top: 60px;
    }

    #menu{
        padding-left: 10px;
    }

    .menu__links a {
        padding: 0 0 0 20px;
        font-size: 2rem;
    }

    .menu__links span{
        font-size: 0.8rem;
    }

    .about-me__description p {
        padding: 0 5px;
    }

    .about-me__image img {
        width: 70%;
    }

    .services {
        margin-top: 20px;
    }
    
    .services__navigation nav {
        row-gap: 10px;
        justify-content: space-between;
    }
    
    .services__navigation a {
        width: 48.5%;
        height: 42px;
        line-height: 42px;
        font-size: 0.7rem;
    }

    .services__navigation-active {
        filter: drop-shadow(0px 0px 3px #02FDFD);
        font-size: 0.8rem;
    }

    .services__description h2 {
        padding-left: 5px;
        margin-top: 30px;
        font-size: 1.5rem;
        font-weight: 700;
    }
    
    .services__description p {
        padding: 0 0 0 5px;
    }

    #portfolio__project{
        padding: 50px 5px 0;
    }

        .portfolio__project-navigation {
            top: 22%;
        }
}