@media (max-width: 1269px) and (min-width: 0px) {
    /* SERVICES SECTION */
        .services-text {
            width: 400px;
            font-weight: 300;
        }


    /* PORTFOLIO PAGE */
        .single-portfolio:hover .portfolio-details {
            height: 65%;
        }

        .portfolio-container {
            width: 95%;
            margin: auto;
        }



    /* BLOG PAGE */
        .blog-container {
            padding: 0 25px;
        }
}



@media (max-width: 1187px) and (min-width: 0px) {
    /* HOME  / Navbar */
        header, #top-nav {
            padding: 25px;
        }

        nav ul {
            display: flex;
            width: 460px;
        }

        nav ul li {
            font-size: 16px;
        }

        #name {
            font-size: 23px;
            color: #fff;
        }


    /* ABOUT */
        #about-container {
            display: block;
            margin: auto;
            width: 85%;
        }

        #abt-img-container {
            width: 100%;
            margin: auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #abt-img {
            width: 85%;
        }

        @keyframes fade{
            0%{opacity: 1;}
            50%{opacity: 0.5;}
            100% {opacity: 1;}
        }

        @-webkit-keyframes fade{
            0%{opacity: 1;}
            50%{opacity: 0.5;}
            100% {opacity: 1;}
        }

        #about-text-container {
            padding: 0;
            margin-top: 25px;
            width: 100%;
            text-align: center;
        }


    /* SKILLS  */
        #skills {
            padding: 45px 25px;
        }

        
    /* SERVICES */
        #services {
            color: #f5f5f5;
            padding-block: 100px;
        }

        #services .grid-2{
            grid-gap: 33px;
        }

        .services {
            justify-content: space-between;
            align-items: flex-start;
        }

        .services-text {
            width: 400px;
        }


    /* PORTFOLIO PAGE */
        .project-information:last-child {
            margin-left: 35px;
            width: 85%;
        } 

        .port {
            margin: 45px 0;
        } 

    
    /* BLOG PAGE */
        .blog-post-container {
            width: 100%;
        }

        .blog-container {
            padding: 0 35px;
        }

        #post-container {
            width: 100%;
        }

        .blog-image-container {
            width: 85%;
        }

        .other-posts {
            margin: 0;
            width: 50%;
        }

        .other-posts > div {
            width: 100%;
            padding: 10px;
        }

        #my-card {
            padding: 15px;
        }

        #blog-img {
            height: 165px;
            width: 165px;
        }

        .about-author {
            width: 90%;
        }

        .blog-information {
            width: 85%;
            padding: 15px;
        }

        .recent-posts {
            width: 85%;
        }

        #post-img-container {
            display: block;
            margin: auto;
            width: 85%;
        }

        #post-img-container img {
            width: 100%;
        }
        
        #post-img-container >img {
            margin: 15px 0;
        }



    /* CONTACT PAGE */
        #form {
            margin-left: 15px;
        }
        
        .contact-icon {
            width: 125px;
            height: 125px;
        }

        #contact-container {
            padding: 0;
            margin: 0;
        }
        
        #contact-container div.card {
            width: 90%;
            padding: 10px;
            margin: 0;
        }

        #contact-container div.card .sm {
            font-size: 14px;
        }

        .contact-icon {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border: 2px solid #00f;
        }
}



@media (max-width: 1125px) and (min-width: 0px) {
    /* SERVICES */
        #services > p {
            text-align: center;
        }

        #services-headline {
            margin: auto;
            width: fit-content;
        }

        #services .grid-2{
            grid-gap: 0;
            display: block;
        }

        .services {
            width: 80%;
            margin-top: 45px;
            padding: 45px 0;
            margin: auto;
            border-radius: 0;
        }

        .services:hover {
            border-radius: 0;
            transform: scale(1);
            box-shadow: 0 4px 2px -2px gray;
        }

        .services:first-child {
            margin-top: 25px;
            border-top-right-radius: 3px;
            border-top-left-radius: 3px;
        }

        .services:last-child {
            border-bottom-right-radius: 3px;
            border-bottom-left-radius: 3px;
        }

        .services:last-child:hover {
            box-shadow: 0 -2px 1px grey;
        }

        .services-text {
            width: 95%;
            min-width: unset;
        }

        .services > section:first-child {
            padding: 50px;
        }
}


@media (max-width: 996px) and (min-width: 0px) {
    /* ABOUT */
        #about-container {
            display: block;
            margin: auto;
            width: 85%;
        }
   
    
    /* SKILLS */
        #language-skills {
            width: 60%;
            padding-left: 18px;
        }
        

    /* PORTFOLIO PAGE */
        .show {
            transition: all 2s ease;
            display: grid;
            grid-template-columns: repeat(2,auto);
        }

        .single-portfolio:hover .portfolio-details {
            height: 65%;
        }

        .portfolio-container {
            width: 90%;
            margin: auto;
        }



    /* CONTACT PAGE */
        .contact-icon {
            width: 105px;
            height: 105px;
        }

        .detail {
            margin-left: 15px;
        }
}



@media (max-width: 956px) and (min-width: 0px) {
    /* BLOG PAGE */
        #blog-img {
            height: 120px;
            width: 120px;
        }
}



@media (max-width: 926px) and (min-width: 0px) {
    /* PORTFOLIO PAGE */
        .portfolio-container {
            width: 86%;
            margin: auto;
        }
}


@media (max-width: 896px) and (min-width: 0px) {
    /* HEADER && NAV */
        header,
        #top-nav {
            padding: 0;
        }

        #header-container {
            display: block;
        }

        #mobile {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 35px;
            z-index: 101;
        }

        #menu {
            display: flex;
        }

        #nav {
            margin: 0;
            width: 100%;
            display: flex;
            z-index: 101;
            position: fixed;
            left: -100%;
            transition: all 0.5s ease-in-out;
            height: 90vh;
            justify-content: center;
            align-items: flex-start;
            padding-top: 25px;
            border-top: 1px solid #fff;
        }

        nav ul {
            width: auto;
            display: block;
        }

        nav ul li {
            margin: 30px 0;
            text-align: center;
        }

        nav ul li:first-child,
        nav ul li:last-child {
            margin: 0;
        }
                
        #letter {
            color: #fff;
            height: 40px;
            width: 40px;
            font-weight: 700;
            font-size: 23px;
            margin-right: 3px;
        }

        nav ul li a:not(.active):hover::after {
            transform: scale(0);
        }

        nav ul li .active::after {
            left: 15px;
        }

        
    /* HOME */
        #home {
            transition: all 2s ease;
        }

        #front-img-container {
            width: 320px;
            height: 320px;
            border-radius: 50%;
            border: 15px solid #333333;
        }

        #front-img-container img {
            width: 290px;
            height: 290px;
            border-radius: 50%;
        }

        #home-details {
            width: auto;
            max-width: 390px;
            margin-left: 40px;
        }


    /* ABOUT */
        #about {
            padding: 50px 25px;
        }

        #button-container {
            width: 85%;
        }


    /* SERVICES */
        .services {
            width: 100%;
        }

        .services-text {
            width: 100%;
        }

        .services > section:first-child {
            padding: 30px;
            padding-top: 0;
        }


    /* SKILLS */
        #skills {
            padding: 45px;
        }

        #language-skills {
            width: 60%;
            padding-left: 25px;
        }


    /* INTERESTED */
        #interested {
            height: 350px;
        }

        #interested > div {
            width: 600px;
        }



    
    /* PORTFOLIO PAGE */
        .single-portfolio:hover .portfolio-details {
            height: 60%;
        }

        .portfolio-container {
            width: 93%;
            margin: auto;
        }

        #porfolio-categories li {
            font-size: 14px;
            margin: auto 7px;
        }
        
        .single-portfolio,
        .portfolio {
            height: 425px;
            width: 100%;
            margin-bottom: 45px;
        }

        .port {
            width: 80%;
            margin: 45px auto;
        }



    /* BLOG PAGE */
        .blog-container {
            padding: 0;
        }

        #blog {
            width: 85%;
            margin: auto;
        }

        #post-container {
            display: block;
            width: 100%;
            margin: 0;
        }

        .blog-post-container {
            width: 100%;
        }

        .other-posts {
            width: 100%;
        }

        .other-posts > div {
            width: 100%;
            padding: 10px;
        }

        #my-card {
            width: 65%;
            padding: 25px 15px;
            margin-top: 45px;
        }

        #blog-img {
            height: 165px;
            width: 165px;
        }

        .about-author {
            width: 90%;
        }

        .blog-information {
            width: 100%;
            padding: 35px;
        }

        .recent-posts {
            width: 85%;
        }

        #post-lists li {
            text-align: left;
        }

        #post-img-container {
            display: block;
            margin: auto;
            width: 50%;
        }

        #post-img-container img {
            width: 100%;
        }
        
        #post-img-container > img {
            margin: 0;
        }

        .blog-image-container {
            width: 100%;
            height: 100%;
        }

        .back-btn {
            display: block;
        }
}



@media (max-width: 757px) and (min-width: 0px) {
    /* HOME / NAME AND INTRO */
        header {
            height: 100%;
        }

        #front-img-container {
            width: 240px;
            height: 240px;
            margin-top: 7px;
            border-radius: 50%;
            border: 10px solid #333333;
        }

        .typewriter {
            padding-top: 15px;
            justify-content: center;
            margin-bottom: -15px;
          }

        #front-img-container img {
            width: 220px;
            height: 220px;
            border-radius: 50%;
        }

        div.typewriter {
            padding: 7px 0;
        }

        #top-button-container {
            padding: 25px 0;
        }

        #welcome-text {
            padding: 5px 0;
        }

        #welcome-text p.xmd {
            font-size: 2.4rem;
        }

        #home-details {
            max-width: 100%;
            margin-left: 0;
            text-align: center;
        }

        #welcome-text {
            padding-bottom: 5px;
        }


    /* ABOUT */
        #abt-img {
            width: 100%;
        }

        #about-text-container {
            padding: 0;
            margin-top: 25px;
            width: 100%;
            text-align: center;
        }

        #button-container {
            width: 85%;
        }


    /* SERVICES */
        #services {
            padding-left: 0;
            padding-right: 0;
        }

        .services {
            border-radius: 3px;
            margin-top: 60px;
        }


    /* SKILLS */
        #skills {
            padding: 25px;
            margin: 25px 0;
        }

        #skill-container,
        #skills-container > div, 
        .skills-container {
            width: 100%;
            margin: auto;
        }

        .personal-skills {
            width: 100%;
        }

        #language-skills {
            width: 100%;
            padding: 0;
            margin-top: 25px;
        }

        .language-container {
            width: inherit;
        }

        .personal-skills:last-child {
            border-bottom: none;
        }

         /* SKILLS */    
         #skill-container {
            width: 100%;
            margin: auto;
            padding: 0;
            margin: 0;
        }

        div.language-container {
            width: 100%;
            margin: auto;
            padding: 0;
            margin: 0;
        }

        #management {
            margin: auto;
        }

        .lang-container {
            margin: 15px auto;
        }

        .personal-skills {
            width: inherit;
        }

        .personal-skills > p {
            text-align: center;
            margin-bottom: 10px;
        }




    /* INTERESTED */
        #interested {
            height: 350px;
        }

        #interested > div {
            width: 100%;
        }



    /* PORTFOLIO PAGE */
        .single-portfolio:hover .portfolio-details {
            height: 60%;
        }

        .portfolio-container {
            width: 90%;
            margin: auto;
        }

        #portfolio-content {
            width: 100%;
        }

        #portfolio-content section:first-child {
            display: none;
        }

        #portfolio-content section:last-child {
            margin-bottom: 45px;
        }

        #porfolio-categories li {
            font-size: 16px;
            margin: auto 7px;
            padding: 5px 8px;
            color: #fff;
            font-weight: 200;
            border-radius: 3px;
            background-color: #222222;
        }

        #porfolio-categories li:not(.active-portfolio):hover {
            color: #fff;
            background-color: #333333;
        }

        #porfolio-categories li.active-portfolio {
            color: #fff;
            background-color:#007ced;
        }
                
        .single-portfolio {
            margin-bottom: 65px;
        }

        .show {
            display: block;        
        }


    /* PORTFOLIO PAGE */
        .project-information:last-child {
            margin-left: 0;
            width: 100%;
            margin: 45px 0;
        } 

        .portfolio-details-container {
            display: grid;
            grid-template-columns:  1fr 1fr;
        }

        .portfolio-details-container span {
            grid-column: span 3;
            margin-bottom: 35px;
        }


    
    /* BLOG  PAGE */
        #blog > p {
            padding: 0;
        }

        .blog-container > div {
            width: 100%;
        }

        #my-card {
            width: 100%;
            padding: 25px;
            margin-top: 65px;
        }

        #blog span.back {
            display: block;
            margin-bottom: 25px;
            margin-top: -35px;
            font-weight: 800;
            animation: shine 3s infinite ease-in-out;
        }

        @keyframes shine {
            25% {color: #000;}
            75% {color: #007ced;}
        }

        @-webkit-keyframes shine {
            25% {color: #000;}
            75% {color: #007ced;}
        }

        #post1 > section,
        #post2 > section,
        #post3 > section {
            display: block;
            margin-top: 0;
        }

        #blog-img {
            height: 115px;
            width: 115px;
        }

        .blog-information {
            width: 100%;
            padding: 15px;
            text-align: left;
        }

        #post-img-container {
            display: block;
            margin: auto;
            width: 85%;
        }

        #post-img-container img {
            margin-bottom: 10px;
        }

        .post-category {
            margin: 3px auto;
        }

        .blog-post-container .img {
            width: 100%;
            height: auto
        }

    
    /* SENT PAGE */
        #sent {
            margin-bottom: 45px;
        }


    /* CONTACT PAGE */
        #contact {
            width: 85%;
            margin: auto;
        } 

        #contact-container {
            width: 100%;
            margin: auto;
        }

        #contact-container .container {
            width: 85%;
            margin: auto;
        }
  
        #contact-container > div.card:nth-child(2) span {
            top: 32px;
            left: 55px;
        }
                
        #contact-container div.card {
            width:90%;
            padding: 25px;
            margin: auto;
        }

        #form {
            margin: auto;
            margin-top: 90px;
        }

        .detail {
            margin-left: 0;
            margin: auto;
        }

        .break-detail {
            display: block;
            margin: auto;
            text-align: center;
        }

        .contact-icon {
            margin: auto;
            margin-bottom: 35px;
        }

        .contact-button-container {
            display: flex;
            margin-top: 25px;
            margin-bottom: 45px;
            justify-content: center;
            align-items: center;
        }



    /* FOOTER */
        footer {
            padding: 25px 15px;
        }

        footer div {
            padding: 15px;
        }

        #footer-container {
            display: flex;
            flex-direction: column-reverse;
        }

        #copyright {
            font-size: 14px;
            width: 100%;
            text-align: center;
        }
}



@media (max-width: 575px) and (min-width: 0px) {
    /* HEADER */
        #surname {
            display: none;
        }

        #name {
            display: block;
            font-size: 20px;
            font-family: 'poppins';
            margin-bottom: -3px;
        }

        .md {
            font-size: 23px;
        }

        .xmd {
            font-size: 25px;
        }

        #close {
            width: 35px;
            height: 35px;
        }
        
        #close i {
            font-size: 25px;
        }

        #modal-footer {
            position: absolute;
            bottom: 0;
            left: 0;
        }

    
    /* HOME */
        #mobile {
            padding: 15px;
        }

        #welcome-text {
            padding: 5px 0;
        }

        #top-button-container button {
            padding: 12px 15px;
        }

        #front-img-container {
            width: 210px;
            height: 210px;
            margin-top: 7px;
            border-radius: 50%;
            border: 10px solid #333333;
        }

        #front-img-container img {
            width: 190px;
            height: 190px;
            border-radius: 50%;
        }

        #interested {
            height: 375px;
        }

        
    /* SERVICES */
        .services {
            padding: 0;
            text-align: center;
            display: block;
            width: 100%;
            padding: 45px 25px;
            margin: auto;
            margin-top: 60px;
        }


        #services .services-text {
            width: 100%;
            margin: 0;
            padding: 0;
            text-align: center;
        }

        #services .services > section:first-child,
        #services .services > section:last-child  {
            padding: 0;
            margin: 0;
            width: 100%;
            text-align: center;
        }

        #services .headline {
            font-weight: 900;
            width: 100%;
            text-align: center;
            margin-bottom:15px;
            margin-top: 7px;
        }


    /* SKILLS */    
        #skill-container {
            width: 100%;
            margin: auto;
            padding: 0;
            margin: 0;
        }

        div.language-container {
            width: 100%;
            margin: auto;
            padding: 0;
            margin: 0;
        }

        #management {
            margin: auto;
        }

        .lang-container {
            margin: 15px auto;
        }

        .personal-skills {
            width: inherit;
        }


    /* PORTFOLIO PAGE */
        #portfolio {
            padding: 10px 0;
        }

        #port-container {
            margin: 0;
        }

        .portfolio-details {
            display: block;
            height: 30%;
            padding: 25px;
        }

        .portfolio-details p.py-1 {
            display: none;
        }

        .portfolio-details .pt-1 {
            margin: 15px 0;
        }

        .single-portfolio:hover .portfolio-details {
            height: 30%;
        }

        .portfolio-container {
            width: 90%;
            padding-bottom: 25px;
            margin: auto;
        }

        #port-container {
            width: 100%;
        }

        #portfolio-content section:last-child {
            margin: auto;
            width: 100%;
            margin-bottom: 45px;
        }

        #porfolio-categories {
            display: grid;
            grid-template-columns: repeat(2,1fr); 
            margin: auto;
        }

        #porfolio-categories li {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            font-weight: 400;
            margin: 10px 0;
            width: 90%;
            padding: 8px 3px;
            color: #fff;
            font-weight: 200;
            border-radius: 3px;
            background-color: #222222;
        }
                
        .single-portfolio {
            height: 375px;
            width: 100%;
            margin-bottom: 65px;
        }

        .portfolio-details-container {
            display: grid;
            grid-template-columns: 1fr;
        }

        .portfollio-name {
            text-align: center;
            margin-bottom: 0px;
            margin-top: 60px;
        }

        .portfolio-details-container span,
        span.back {
            /* grid-column: span 1; */
            font-size: 25px;
            width: 100%;
            padding: 12px 10px;
            padding-top: 7px;
            position: fixed;
            top: 110px;
            left: 0;
            z-index: 90;
            background-color: #fff;
            box-shadow: 0 4px 2px -2px gray;
        }

        .portfolio-details-container span {
            top: 75px;
        }

        #category {
            width: auto;
            margin-top: 15px;
            text-align: center;
        }

        #portfolio-indicator {
            display: none;
        }

        .grid-3.port {
            width: 93.5%;
            margin: 0;
            grid-gap: 0;
        } 

        .portfolio-details p:last-child {
            margin-top: 5px;
        }

        .single-portfolio:hover .portfolio-details {
            transform: scale(1);
        }

        #controller {
            width: fit-content;
        }

        #controller > button {
            width: 60px;
            padding: 15px;
        } 

        #controller > button i {
            font-size: 19px;
            font-weight: 800;
        } 



    /* BLOG */
        #all-blog-posts.blog-container {
            margin: 0;
        }

        #blog .grid-3 {
            margin: 0;
            width: 100%;
        }


    /* INTERESTED */      
        .interested-btn {
            overflow: hidden;
            padding: 10px 18px;
            margin-top: 10px;
        }


    /* SENT PAGE */
        #sent {
            width: 90%;
        }


    /* CONTACT */
        #contact {
            width: 100%;
            margin: auto;
        } 

        #contact-container {
            width: 100%;
            margin: 0;
            padding: 0;
        }

        #contact-container .container {
            width: 100%;
            margin: auto;
        }

        .post-title {
            text-align: center;
        }

        #all-blog-posts .post-title {
            text-align: left;
        }
}



@media (max-width: 475px) and (min-width: 0px) {
    /* TOP ICON */
        #topIcon {
            background-color: #333333;
            position: fixed;
            bottom: 1.5rem;
            right: 0.5rem;
        }


    /* NAVBAR */
        #mobile {
            padding: 15px;
        }

        #menu {
            width: 45px;
            height: 45px;
        }

        #menu i {
            font-size: 23px;
        }


    /* HOME */
        #welcome-text {
            padding-bottom: 12px;
        }

        #top-button-container {
            padding: 35px 0;
        }

        #top-button-container button {
            padding: 12px 15px;
            font-size: 16px;
        }

        #top-button-container button:last-child {
            margin-left: 10px;
        }

        #front-img-container {
            width: 200px;
            height: 200px;
            margin-top: 7px;
            border-radius: 50%;
            border: 10px solid #333333;
        }

        #front-img-container img {
            width: 180px;
            height: 180px;
            border-radius: 50%;
        }

        #intro-text {
            width: 95%;
            margin: auto;
            line-height: 1.6em;
        }
    

    /* ABOUT */
        #about {
            padding: 100px 10px;
        }

        #about-container {
            width: 95%;
        }

        .quote-button {
            display: block;
        }
        
        #button-container {
            width: 100%;
        }

        .abt-button {
            font-size: 14px;
            padding: 5px;
            margin: 7px;
        }
  
        .cv-button {
            margin-top: -15px;
            margin-bottom: 35px;
        }


    /* SERVICES */
        #services {
            padding: auto 15px;
        }

        .services {
            padding: 45px 15px;
        }

        .services:hover {
            transform: scale(1.03);
            border-radius: 3px;
            box-shadow: none;
        }


    /* SKILLS */
        #skills {
            padding: 25px;
            margin: 0;
            margin-top: 35px;
        }

        #language-skills {
            width: 100%;
            padding: 0;
            margin: 0;
        }   

        #skills-container,
        #skills-container > div {
            width: 100%;
            margin: 0;
            padding: 0;
        }

        .personal-skills > p {
            text-align: left;
            margin-bottom: 10px;
        }


    /* SENT PAGE */
        #sent {
            width: 95%;
        }

    
    /* INTERESTED */      
        #interested {
            height: 390px;
        }

        #interested > div {
            width: auto;
            padding: 25px;
            height: fit-content;
        }

        .interested-btn {
            margin-top: 10px;
        }


        
    /* PORTFOLIO PAGE */
         #porfolio-categories li {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 13px;
            font-weight: 300;
            margin: 10px 0;
            width: 85%;
            padding: 7px 3px;
        }

        
        .blog-information {
            width: 100%;
            color: #333;
            background-color: #fff;
            border-radius: 5px;
        }


    /* BLOG POSTS */
        .blog-information {
            color: #000;
            width: 100%;
            padding: 0;
            background-color: #fff;
        }

        #blog {
            width: 90%;
        }

        .blog-container {
            width: 100%;
            padding: 0;
        }

        .portfolio-img-container {
            width: 100%;
        }

        .blog-information p {
            font-size: 16px;
            line-height: 2.5em;
        }

        
    
    /* FOOTER */
        footer {
            padding: 25px 0;
            margin: 0;
        }

        #footer-container {
            width: inherit;
            padding: 0;
            margin: 0;
        }

        #mobile-footer {
            width: 85%;
            margin: 15px auto;
        }

        #footer-links-container {
            width: 80%;
            padding: 0;
            margin: auto;
        }
        
        #footer-links-container img {
            margin: 0 5px;
        }

        #copyright {
            width: 100%;
        }

        #foot-name {
            display: none;
        }

        #footer-name {
            display: block;
            font-size: 19px;
            margin: 10px 0;
            font-weight: 800;
            text-align: center;
            color: #fff;
        }

        .color-name {
            font-size: 25px;
            color: #007ced;
        }
}



@media (max-width: 375px) and (min-width: 0px) {
    /* PORTFOLIO PAGE */
        .single-portfolio:hover .portfolio-details {
            height: 30%;
            padding: 20px;
        }

        .portfolio-details:last-child {
            padding: 20px;
        }

        .portfolio-details:last-child span {
            font-size: 13px;
        }


    /* INTERESTED */
        #interested {
            height: 435px;
        }
}



@media (max-width: 319px) and (min-width: 0px) {
    /* HEADER */
        #top-button-container {
            padding: 10px 0;
        }

        #top-button-container button {
            padding: 10px 12px;
            /* width: 110px; */
        }

    /* SKILLS  */
        .language-container,
        .personal-skills {
            display: block;   
        }
}