@media screen and (max-width: 950px ) {
    body {
        background: #fff;
    }
    .scroll-to-top {
        bottom: 10px;
        right: 10px;
    }
    .scroll-to-top button {
        opacity: 1;
        height: 30px;
        width: 30px;
        font-size: 8px;
    }

    /* #### navbar ##### */
    
    .navbar {
        padding: 0;
    }
    .brand-name {
        grid-column: 1/7;
        justify-content: flex-start;
        padding-left: 5vw;
    }
    .navbar-items {
        grid-column: 8/13;
    }
    .navbar ul {
        justify-content: flex-end;
        padding: 0 5vw 0 0;
    }
    .navbar-items ul li {
        display: none;
    }
    .navbar-items ul li:nth-child(4),
    .navbar-items ul li:nth-child(5) {
        display: block;
    }
    .hireMe-button {
        font-size: 12px;
        width: 80px;
        height: 30px;
    }
    
    .drop-down {
        display: block;
    }
    .drop-down button{
        margin-left: 3vw;
        background-size: cover;
        background-repeat: no-repeat;
        height: 16px;
        width: 16px;
        outline: none;
        border: 0;
    }
    .active-page {
        text-decoration: none;
    }
    .active-page a::before {
        height: 100%;
    }
    .navbar-items--responsive-display {
        display: block;
    }
    .sender {
        top: 59px;
    }
    /* #### introductory #### */
    .introductory {
        margin-top: 55px;
        padding: 0;
    }
    .introductory .avatar {
        grid-column: 3/11 ;
        grid-row: 1/2;
        display: flex;
        justify-content: center;
    }
    .text-introductory {
        margin-top: 45px;
        grid-column: 2/12;
        grid-row: 2/3;
        grid-template-columns: repeat(10, 1fr);
    }
    .introduction-1 {
        grid-column: 1/9;
        font-size: 18px;
    }
    .introduction-2 {
        margin: 7px 0 0 0;
        font-size: 30px;
        line-height: 36px;
        grid-column: 1/-1;
    }
    .introduction-3 {
        margin: 7px 0 0 0;
        grid-column: 1/10;
        font-size: 18px;
        line-height: 20px;
        font-weight: normal;
    }
    .resume-download {
        grid-column: 1/8;
    }
    .avatar-content {
        background: url('/mainAvatar.png');
        background-size: cover;
    }
    /* ##### key aspects ##### */
    .key-aspects{
        padding: 0;
        margin: 63px 0 0 0;
    }
    .key-aspects-inner {
        grid-column: 2/12;
        padding: 50px;
    }

    /* ##### testimonials #### */
    .testimonials {
        padding: 0;
    }
    .testimonials h1 {
        font-size: 30px;
    }
    .carousel {
        grid-column: 2/12;
    }

    /* ##### achievements ##### */
    .achievements {
        padding: 0;
    }
    
    /* #### footer #### */
    .footer {
        padding: 46px 20px;
    }
    .upper__mail-section {
        justify-self: start;
    }

    /* @@@@@@@@@@@@@@ projects page @@@@@@@@@ */
    
    /* ##### project items #### */
    .project-page__items {
        padding: 0 5vw;
    }
    .project-page__item {
        margin: 130px 0 0 0;
    }
    .project-page__item .avatar {
        height: 260px;
        grid-column: 1/-1;
        grid-row: 1/2;
    }
    .project-page__item h2 {
        margin: 30px 0 0 0;
        grid-column: 1/-1;
        grid-row: 2/3;
        font-size: 20px;
        line-height: 29px;
    }
    .project-page__item p {
        margin: 15px 0 0 0;
        grid-column: 1/-1;
        grid-row: 3/4;
        font-size: 12px;
        line-height: 15px;
    }
    .project-page__item .buttons {
        margin: 15px 0 0 0;
        overflow: hidden;
        grid-column: 1/-1;
        grid-row: 4/5;
    }
    .project-page__item .buttons .view,
    .project-page__item .buttons .visit {
        font-size: 12px;
        line-height: 17px;
    }
    /* @@@@@@ projects particulars @@@@@@ */
    .project-particulars__introductory {
        padding: 0 3vw;
        margin: 70px 0 0 0;
    }
    .project-particulars__introductory .naming {
        grid-column: 1/13;
        align-items: start;
    }
    .project-particulars__introductory .naming h1 {
        font-size: 30px;
    }
    .project-particulars__introductory .naming button {
        font-size: 16px;
        height: 35px;
        width: 130px;
    }
    .project-particulars__introductory .description {
        grid-column: 1/13;
        grid-row: 2/3;
        margin: 35px 0 0 0;
        font-size: 20px;
        line-height: 24px;
    }
    .project-particulars__gallery {
        padding: 0 3vw;
        margin: 70px 0 0 0;
    }
}

@media screen and (max-width: 500px) {

    /* #### navbar ##### */
    
    .brand-name {
        font-size: 16px;
    }
    .drop-down__active-display {
        clip-path: circle(550px at 0 -70px);
    }

    /* @@@@@@@ projects page @@@@@@@@@@ */
    .project-page__items .buttons .view,
    .project-page__items .buttons .visit {
        font-size: 10px;
    }
}