


@media (max-width: 1400px) {
    
    
    header.header-home {
        width: 90%;
    }
    
    header.header-home > div.welcome > div.image {
        --size: 275px;
    }
    
    header.header-home > div.welcome > div.information {
        margin-left: 50px;
    }
    
    header.header-home > div.welcome > div.information > h4 {
        font-size: 22px;
    }
    
    header.header-home > div.welcome > div.information > h1 {
        font-size: 60px;
    }
    
    header.header-home > nav > h2 {
        font-size: 80px;
    }
    
    header.header-home > nav > ul > li > a {
        font-size: 20px;
    }
    
    /*About*/
    
    div.about > div.images > img {
        max-height: 30px;
    }
    
    /*Digital Marketing*/
    
    div.digital-marketing > div.brand-logos > img {
        margin: 0 20px;
        height: 15px;
    }
    
    /*Web Development*/
    div.web-development > div.brand-logos > img {
        height: 20px;
    }
    
    /*Content Creation*/
    div.content-creation > div.brand-logos > img {
        height: 30px;
    }
    
}


@media (max-width: 1200px) {
    
    header.header-home > div.welcome > div.image {
        --size: 200px;
    }
    
    header.header-home > div.welcome > div.information > h4 {
        font-size: 18px;
    }
    
    header.header-home > div.welcome > div.information > h1 {
        font-size: 40px;
    }
    
    header.header-home > nav > h2 {
        font-size: 65px;
    }
    
    header.header-home > nav > ul {
        margin-top: 30px;
    }
    
    header.header-home > nav > ul > li > a {
        font-size: 18px;
    }
    
    /*About*/
    
    header.header-inner > div.topbar > nav > ul {
        align-items: center;
    }
    
    header.header-inner > div.topbar {
        flex-direction: column;
    }
    
    header.header-inner > div.topbar > nav {
        margin-top: 50px;
    }

    div.about > div.references > a {
        margin: 0;
        font-size: 12px;
    }
    
    div.about > div.images > img {
        max-height: 25px;
    }
    
    /*Digital Marketing*/
    div.digital-marketing > div.brand-logos > img {
        height: 13px;
        margin: 10px;
    }
    
}

@media (max-width: 992px) {
    
    div.page-hero > h1 {
        font-size: 60px;
    }
    
    header.header-home {
        width: 70%;
        grid-template-columns: 100%;
        align-items: normal;
    }
    
    header.header-home > div.welcome {
        justify-content: center;
    }
    
    header.header-home > nav {
        border-left: none;
        border-top: 1px solid rgb(80, 80, 80);
        padding: 100px 0 0 0;
    }
    
    /*About*/
    header.header-inner > div.topbar > nav > ul > li > a {
        font-size: 16px;
    }
    
    div.about > p {
        font-size: 14px;
    }
    
    div.about > div.references {
        flex-wrap: wrap;
    }
    
    div.about > div.references > a {
        margin: 10px;
        font-size: 16px;
    }
    
    div.about > div.images {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    div.about > div.images > img {
        margin: 10px;
    }
    
    /*Digital Marketing*/
    div.digital-marketing > div.brand-logos > img {
        height: 15px;
    }
    
    div.digital-marketing > div.information > p {
        font-size: 14px;
    }
    
    /*Web Development*/
    div.web-development > div.information > p {
        font-size: 14px;
    }
}


@media (max-width: 768px) {
    
    div.page-hero > h1 {
        font-size: 50px;
    }
    
    header.header-home {
        width: 70%;
    }
    
    header.header-home > div.welcome {
        flex-direction: column;
    }
    
    header.header-home > div.welcome > div.image {
        --size: 200px;
    }
    
    header.header-home > div.welcome > div.information {
        margin-left: 0;
        margin-top: 50px;
        text-align: center;
    }
    
    header.header-home > nav {
        padding: 100px 50px 0 50px;
    }
    
    /*About*/
    header.header-inner > div.topbar > nav > ul > li > a {
        font-size: 14px;
        margin: 10px;
    }
    
    /*Web Development*/
    div.web-development > div.brand-logos > img {
        margin: 10px;
    }
    
    /*Content Creation*/
    div.content-creation > div.posts {
        grid-template-columns: 33% 33% 33%;
        justify-content: center;
    }
    
    div.content-creation > div.videos {
        grid-template-columns: 50% 50%;
    }
    
    
}



@media (max-width: 576px) {
    
    div.page-hero > h1 {
        font-size: 35px;
    }
    
    header.header-home {
        width: 90%;
        padding: 35px 0;
    }
    
    header.header-home > div.welcome > div.information > h4 {
        font-size: 22px;
    }
    header.header-home > div.welcome > div.image {
        --size: 150px;
    }
    
    header.header-home > nav {
        padding: 100px 25px 0 25px;
    }
    
    header.header-home > nav > h2 {
        font-size: 55px;
    }
    
    /*About*/
    
    header.header-inner > div.topbar > nav > ul {
        flex-direction: column;
        gap: 10px;
    }
    
    header.header-inner > div.topbar > nav > ul > li > a {
        font-size: 16px;
        line-height: 30px;
        padding: 5px;
    }
    
    div.about > p {
        line-height: 30px;
    }
    
    div.about > div.references {
        text-align: center;
    }
    
    div.about > div.images > img {
        max-height: 30px;
        margin: 15px 10px;
    }
    
    
    /*Digital Marketing*/
    
    div.digital-marketing > div.information > p {
        line-height: 30px;
    }
    
    div.digital-marketing > div.information > table {
        border-spacing: 10px;
        border-collapse: collapse;
        font-size: 8px;
    }
    
    div.digital-marketing > div.information > table th,
    div.digital-marketing > div.information > table td {
        padding: 5px;
    }
    
    /*Web Development*/
    
    div.web-development > div.information > p {
        line-height: 30px;
    }
    
    div.web-development > div.references {
        grid-template-columns: 50% 50%;
    }
    
    div.web-development > div.references > a > img {
        border-radius: 2px;
    }
    
    /*Content Creation*/
    
    div.content-creation > div.brand-logos > img {
        margin: 10px;
    }
    
    /*Footer*/
    .site-footer__nav {
        font-size: 12px;
        padding: 15px 0;
        width: 100%;
    }
    
    .site-footer__copyright {
        font-size: 12px;
    }
}







