/* Ultra-small devices (iPhone 5, SE 1st Gen, 320px) */
@media (max-width: 320px) {
    .section-title {
        font-size: 18px!important;
    }

    .about-left {
        display: none;
    }

    /* Project */
    .projects-grid {
        grid-template-columns: repeat(2, 1fr)!important;
        grid-template-rows: auto auto;
        gap: 10px;
    }

    .project-category {
        font-size: 11px!important;
    }

    .project-title {
        font-size: 14px!important;
    }

    .project-description {
        display: none;
    }

    .work-cta-image {
        margin-right: 0!important;
    }
    
    .work-cta-image img {
        max-height: 300px!important;
        width: auto;
        object-fit: contain;
        display: block;
        /* prevents inline spacing below image */
    }

    .team-grid {
        grid-template-columns: 1fr!important;
    }

    .client-info-content {
        width: 100%;
        max-width: 250px;
    }

    .client-review-section {
        padding: 80px 0px!important;
    }

    .review-slider-container {
        width: 100%;
        height: 550px!important;
    }

    .review-card {
        padding: 20px;
        min-width: 250px!important;
    }
}

@media (max-width: 360px) {
    .project-description {
        display: none!important;
    }
}

@media (max-width: 375px) {
    .section-title {
        font-size: 18px!important;
    }

    .about-left {
        display: none;
    }

    /* Project */
    .projects-grid {
        grid-template-columns: repeat(2, 1fr)!important;
        grid-template-rows: auto auto;
        gap: 10px;
    }

    .project-category {
        font-size: 11px!important;
    }

    .project-title {
        font-size: 14px!important;
    }

    .project-description {
        display: none;
    }

    .work-cta-image {
        margin-right: 0!important;
    }
    
    .work-cta-image img {
        max-height: 300px!important;
        width: auto;
        object-fit: contain;
        display: block;
        /* prevents inline spacing below image */
    }

    .team-grid {
        grid-template-columns: 1fr!important;
    }

    .client-info-content {
        width: 100%;
        max-width: 250px;
    }

    .client-review-section {
        padding: 80px 0px!important;
    }

    .review-slider-container {
        width: 100%;
        height: 550px!important;
    }

    .review-card {
        padding: 20px;
        min-width: 250px!important;
    }
}

/* Ultra-medium devices (iPhone 12, 13, 14 390px) */
@media (max-width: 390px) {

    /* Header */
    header {
        padding: 0 10px !important;
    }

    header.scrolled {
        padding: 8px 10px !important;
    }

    .header-logo {
        padding: 7px 0;
        margin: 0;
    }

    .about-section,
    .services-section,
    .project-section,
    .work-process-section {
        padding: 100px 15px !important;
    }

    .content h1 {
        font-size: 30px !important;
        line-height: 1.2;
        margin-bottom: 10px;
    }

    .content p {
        font-size: 16px !important;
    }

    .section-title {
        font-size: 22px;
    }

    .slide .content-container {
        align-items: center;
        justify-content: center;
        height: auto;
        padding: 80px 20px 0 20px !important;
    }

    .slide .content {
        width: 100%;
        height: auto;
    }

    .content-container .hero-content-image {
        display: none;
    }

    .stats-box {
        left: 0;
    }

    .stats-box h2 {
        font-size: 22px;
    }

    .stats-box p {
        font-size: 11px;
    }

    .main-img {
        width: 100%;
        max-width: 200px;
        right: -9.5rem !important;
    }

    .bg-img {
        left: 0px;
    }

    /* Project */
    .project-category {
        font-size: 12px;
    }

    .project-title {
        font-size: 15px;
    }

    .project-description {
        font-size: 13px;
    }

    /* Process */
    .timeline-container::before {
        left: 15px !important;
        transform: none;
    }

    .work-cta-image {
        margin-top: 10px;
    }

    .work-cta-image img {
        max-height: 400px;
        width: auto;
        object-fit: contain;
        display: block;
    }

    /* Team Section */
    .team-section {
        padding: 100px 20px;
    }

    .team-grid {
        gap: 10px;
        max-width: 1200px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto;
    }

    .team-card {
        padding: 20px 15px;
    }

    .team-card img {
        max-width: 90px !important;
        height: 90px;
    }

    .team-card h3 {
        font-size: 14px;
    }

    .team-card p {
        font-size: 12px;
    }

    /* Testimonial */
    .client-review-section-container {
        flex-direction: column-reverse;
    }

    .client-info {
        width: 100%;
        padding: 20px;
        height: auto;
    }

    .client-info-content {
        width: 100%;
        max-width: 250px;
    }

    .review-slider-container {
        width: 100%;
        height: 450px;
    }

    .review-card {
        padding: 20px;
        min-width: 300px;
    }

    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-column {
        margin-bottom: 30px;
    }

    .footer-logo,
    .footer-social {
        justify-content: center;
    }

    .footer-social a {
        margin-right: 6px;
    }

    .contact-info {
        align-items: center;
        justify-content: center;
    }

    .contact-info li {
        justify-content: center;
    }
}

@media (max-width: 393px) {
    .services-grid, 
    .team-grid {
        grid-template-columns: 1fr!important;
    }
}

@media (max-width: 412px) {
    .services-grid, 
    .team-grid {
        grid-template-columns: 1fr!important;
    }
}

@media (max-width: 414px) {
    .section-title {
        font-size: 18px!important;
    }

    .about-left {
        display: none;
    }

    /* Project */
    .projects-grid {
        grid-template-columns: repeat(2, 1fr)!important;
        grid-template-rows: auto auto;
        gap: 10px;
    }

    .project-category {
        font-size: 11px!important;
    }

    .project-title {
        font-size: 14px!important;
    }

    .project-description {
        display: block;
    }

    .work-cta-image {
        margin-top: 10px;
        margin-right: 0!important;
    }
    
    .work-cta-image img {
        max-height: 300px!important;
        width: auto;
        object-fit: contain;
        display: block;
        /* prevents inline spacing below image */
    }

    .team-section {
        padding: 100px 20px;
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .client-info-content {
        width: 100%;
        max-width: 250px;
    }

    .client-review-section {
        padding: 80px 0!important;
    }

    .client-review-section-container {
        flex-direction: column-reverse;
    }
    
    .review-slider-container {
        width: 100%;
        height: 450px;
    }

    .review-card {
        padding: 20px;
        min-width: 300px;
    }

    .client-info {
        width: 100%;
        padding: 20px;
        height: auto;
    }

    .client-info-content {
        width: 100%;
        max-width: 250px;
    }

    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-column {
        margin-bottom: 30px;
    }

    .footer-logo,
    .footer-social {
        justify-content: center;
    }

    .footer-social a {
        margin-right: 6px;
    }

    .contact-info {
        align-items: center;
        justify-content: center;
    }

    .contact-info li {
        justify-content: center;
    }
}

@media (max-width: 428px) {
    .content-container .hero-content-image {
        display: none;
    }

    .section-title {
        font-size: 18px!important;
    }

    .about-left {
        display: none;
    }

    /* Project */
    .projects-grid {
        grid-template-columns: repeat(2, 1fr)!important;
        grid-template-rows: auto auto;
        gap: 10px;
    }

    .project-category {
        font-size: 11px!important;
    }

    .project-title {
        font-size: 14px!important;
    }

    .project-description {
        display: block;
    }

    .work-cta-image {
        margin-top: 10px;
        margin-right: 0!important;
    }
    
    .work-cta-image img {
        max-height: 300px!important;
        width: auto;
        object-fit: contain;
        display: block;
        /* prevents inline spacing below image */
    }

    .team-section {
        padding: 100px 20px;
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .client-info-content {
        width: 100%;
        max-width: 250px;
    }

    .client-review-section {
        padding: 80px 0!important;
    }

    .client-review-section-container {
        flex-direction: column-reverse;
    }
    
    .review-slider-container {
        width: 100%;
        height: 450px;
    }

    .review-card {
        padding: 20px;
        min-width: 300px;
    }

    .client-info {
        width: 100%;
        padding: 20px;
        height: auto;
    }

    .client-info-content {
        width: 100%;
        max-width: 250px;
    }

    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-column {
        margin-bottom: 30px;
    }

    .footer-logo,
    .footer-social {
        justify-content: center;
    }

    .footer-social a {
        margin-right: 6px;
    }

    .contact-info {
        align-items: center;
        justify-content: center;
    }

    .contact-info li {
        justify-content: center;
    }
}

@media (max-width: 430px) {

    /* Header */
    header {
        padding: 0 10px !important;
    }

    header.scrolled {
        padding: 8px 10px !important;
    }

    .header-logo {
        padding: 7px 0;
        margin: 0;
    }

    .about-section,
    .services-section,
    .project-section,
    .work-process-section {
        padding: 100px 15px !important;
    }

    .content h1 {
        font-size: 30px !important;
        line-height: 1.2;
        margin-bottom: 10px;
    }

    .content p {
        font-size: 16px !important;
    }

    .section-title {
        font-size: 22px;
    }

    .slide .content-container {
        align-items: center;
        justify-content: center;
        height: auto;
        padding: 80px 20px 0 20px !important;
    }

    .slide .content {
        width: 100%;
        height: auto;
    }

    .content-container .hero-content-image {
        display: none;
    }

    .stats-box {
        left: 0;
    }

    .stats-box h2 {
        font-size: 22px;
    }

    .stats-box p {
        font-size: 11px;
    }

    .main-img {
        width: 100%;
        max-width: 200px;
        right: -9.5rem !important;
    }

    .bg-img {
        left: 0px;
    }

    .services-grid, 
    .team-grid {
        grid-template-columns: 1fr!important;
    }

    /* Project */
    .project-category {
        font-size: 12px;
    }

    .project-title {
        font-size: 15px;
    }

    .project-description {
        font-size: 13px;
    }

    /* Process */
    .timeline-container::before {
        left: 15px !important;
        transform: none;
    }

    .work-cta-image {
        margin-top: 10px;
    }

    .work-cta-image img {
        max-height: 400px;
        width: auto;
        object-fit: contain;
        display: block;
    }

    /* Team Section */
    .team-section {
        padding: 100px 20px;
    }

    .team-grid {
        gap: 10px;
        max-width: 1200px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto;
    }

    .team-card {
        padding: 20px 15px;
    }

    .team-card img {
        max-width: 90px !important;
        height: 90px;
    }

    .team-card h3 {
        font-size: 14px;
    }

    .team-card p {
        font-size: 12px;
    }

    /* Testimonial */
    .client-review-section-container {
        flex-direction: column-reverse;
    }

    .client-info {
        width: 100%;
        padding: 20px;
        height: auto;
    }

    .client-info-content {
        width: 100%;
        max-width: 250px;
    }

    .review-slider-container {
        width: 100%;
        height: 450px;
    }

    .review-card {
        padding: 20px;
        min-width: 300px;
    }

    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-column {
        margin-bottom: 30px;
    }

    .footer-logo,
    .footer-social {
        justify-content: center;
    }

    .footer-social a {
        margin-right: 6px;
    }

    .contact-info {
        align-items: center;
        justify-content: center;
    }

    .contact-info li {
        justify-content: center;
    }
}

@media (max-width: 600px) {

    /* Header */
    header {
        padding: 0 10px !important;
    }

    header.scrolled {
        padding: 8px 10px !important;
    }

    .header-logo {
        padding: 7px 0;
        margin: 0;
    }

    .about-section,
    .services-section,
    .project-section,
    .work-process-section {
        padding: 100px 15px !important;
    }

    .content h1 {
        font-size: 30px !important;
        line-height: 1.2;
        margin-bottom: 10px;
    }

    .content p {
        font-size: 16px !important;
    }

    .section-title {
        font-size: 22px;
    }

    .slide .content-container {
        align-items: center;
        justify-content: center;
        height: auto;
        padding: 80px 20px 0 20px !important;
    }

    .slide .content {
        width: 100%;
        height: auto;
    }

    .content-container .hero-content-image {
        display: none;
    }

    .stats-box {
        left: 0;
    }

    .stats-box h2 {
        font-size: 22px;
    }

    .stats-box p {
        font-size: 11px;
    }

    .main-img {
        width: 100%;
        max-width: 200px;
        right: -9.5rem !important;
    }

    .bg-img {
        left: 0px;
    }

    /* Project */
    .project-category {
        font-size: 12px;
    }

    .project-title {
        font-size: 15px;
    }

    .project-description {
        font-size: 13px;
    }

    /* Process */
    .timeline-container::before {
        left: 15px !important;
        transform: none;
    }

    .work-cta-image {
        margin-top: 10px;
    }

    .work-cta-image img {
        max-height: 400px;
        width: auto;
        object-fit: contain;
        display: block;
    }

    /* Team Section */
    .team-section {
        padding: 100px 20px;
    }

    .team-grid {
        gap: 10px;
        max-width: 1200px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto;
    }

    .team-card {
        padding: 20px 15px;
    }

    .team-card img {
        max-width: 90px !important;
        height: 90px;
    }

    .team-card h3 {
        font-size: 14px;
    }

    .team-card p {
        font-size: 12px;
    }

    /* Testimonial */
    .client-review-section-container {
        flex-direction: column-reverse;
    }

    .client-info {
        width: 100%;
        padding: 20px;
        height: auto;
    }

    .client-info-content {
        width: 100%;
        max-width: 250px;
    }

    .review-slider-container {
        width: 100%;
        height: 450px;
    }

    .review-card {
        padding: 20px;
        min-width: 300px;
    }

    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-column {
        margin-bottom: 30px;
    }

    .footer-logo,
    .footer-social {
        justify-content: center;
    }

    .footer-social a {
        margin-right: 6px;
    }

    .contact-info {
        align-items: center;
        justify-content: center;
    }

    .contact-info li {
        justify-content: center;
    }
}

@media (max-width: 670px) {
    .about-left {
        display: none;
    }
}

/* Mobile devices (phones, 0px to 767px) */
@media (max-width: 768px) {

    /* Header */
    header {
        padding: 0 15px;
    }

    .header-logo {
        padding: 7px 0;
        margin: 0;
    }

    .header-logo img {
        width: 85px
    }

    .hamburger {
        display: flex;
    }

    .header-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 75%;
        max-width: 300px;
        height: 100vh;
        background: #fff;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 70px 0;
        box-shadow: -2px 0 20px rgba(0, 0, 0, 0.2);
        transition: right 0.4s ease;
        overflow-y: auto;
        z-index: 1000;
    }

    header.scrolled {
        padding: 8px 15px;
    }

    .header-nav.active {
        right: 0;
    }

    .header-nav ul {
        flex-direction: column;
        width: 100%;
    }

    .header-nav li {
        width: 100%;
        margin: 3px 0;
    }

    .header-nav a {
        display: block;
        color: #0b1b1a;
        font-weight: 500;
        font-size: 13px;
        width: 100%;
        padding: 15px 56px 15px 20px;
        position: relative;
        text-transform: capitalize;
        transition: background 0.3s, color 0.3s;
    }

    .header-nav a::after {
        display: none;
    }

    .header-nav a:hover,
    .header-nav a.active {
        background: #0e5252;
        color: #fff;
    }

    .contactBtn {
        display: none;
    }

    /* Hero Section */

    .slide .content-container {
        flex-direction: column;
        flex-wrap: nowrap;
        height: 100%;
        padding: 100px 40px 0 40px;
    }

    .content {
        padding: 0 15px;
        max-width: 100%;
    }

    .content h1 {
        font-size: 32px;
    }

    .content p {
        font-size: 15px;
    }

    .btn {
        font-size: 12px;
    }

    .content-container {
        flex-direction: column;
        padding: 30px 15px;
    }

    .content,
    .hero-content-image {
        max-width: 100%;
        text-align: center;
        padding: 0;
    }

    .hero-content-image img {
        max-width: 100%;
        margin: 0 auto;
    }

    /* About Us Section */

    .about-section,
    .services-section,
    .project-section,
    .work-process-section {
        padding: 100px 20px;
    }

    .about-container {
        padding: 0;
        flex-direction: column-reverse;
        gap: 5rem;
    }

    .about-right,
    .about-left {
        width: 100%;
    }

    .section-title {
        font-size: 24px;
    }

    .appointment-btn {
        font-size: 13px;
    }

    .main-img {
        right: -20.5rem;
    }

    /* Service Section */

    .services-header {
        flex-direction: column;
    }

    .services-header .service-header-content {
        width: 100%;
    }

    .services-header .section-description {
        width: 100%;
    }

    .service-card.ml {
        display: block;
    }

    /* Project */
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto;
        gap: 10px;
    }

    /* Our Process */

    .timeline-container::before {
        left: 20px;
        transform: none;
    }

    .timeline-row {
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
        position: relative;
        padding-left: 40px;
    }

    .timeline-row.left .step-content,
    .timeline-row.right .step-content,
    .timeline-row.left .step-image,
    .timeline-row.right .step-image {
        grid-column: unset;
        justify-self: unset;
        max-width: 100%;
        text-align: left;
        width: 100%;
    }

    .timeline-row .step-number {
        position: absolute;
        left: 0;
        top: 0;
        transform: translateY(0);
        background: var(--text-primary-color);
        color: #fff;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .step-image img {
        max-width: 100%;
        height: auto;
    }

    .work-cta-image {
        margin-right: 0!important;
    }

    .work-cta-banner {
        width: 100%;
        flex-direction: column;
        padding: 0 15px;
    }

    .work-cta-text {
        max-width: 100%;
        margin-top: 20px;
    }

    /* Team Section */

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Review Section */
    .client-review-section {
        padding: 80px 20px;
    }

    .client-info h2 {
        font-size: 14px;
    }

    .google-rating img {
        width: 30px;
        height: 30px;
    }

    /* Blog Section */
    .blog-grid {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 884px) {
    .services-grid {
        display: grid;
        grid-template-columns: 1fr!important;
        gap: 20px;
   }
}


/*@media (max-width: 932px) {*/
/*    .header-nav {*/
/*        height: 100vh;*/
/*        overflow-y: auto;*/
/*        border: 5px solid red!important;*/
/*    }*/
/*}*/


/* Tablets (portrait & small landscape tablets, 768px to 1023px) */
@media (min-width: 768px) and (max-width: 1089px) {

    /* Header */
    header {
        padding: 0 15px;
    }

    .header-logo {
        padding: 7px 0;
        margin: 0;
    }

    .header-logo img {
        width: 85px
    }

    .hamburger {
        display: flex;
    }

    .header-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 75%;
        max-width: 300px;
        height: 100vh;
        background: #fff;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 70px 0;
        box-shadow: -2px 0 20px rgba(0, 0, 0, 0.2);
        transition: right 0.4s ease;
        z-index: 1000;
        overflow-y: auto;
    }

    header.scrolled {
        padding: 8px 15px;
    }

    .header-nav.active {
        right: 0;
    }

    .header-nav ul {
        flex-direction: column;
        width: 100%;
    }

    .header-nav li {
        width: 100%;
        margin: 3px 0;
    }

    .header-nav a {
        display: block;
        color: #0b1b1a;
        font-weight: 500;
        font-size: 13px;
        width: 100%;
        padding: 15px 56px 15px 20px;
        position: relative;
        text-transform: capitalize;
        transition: background 0.3s, color 0.3s;
    }

    .header-nav a::after {
        display: none;
    }

    .header-nav a:hover,
    .header-nav a.active {
        background: #0e5252;
        color: #fff;
    }

    .contactBtn {
        display: none;
    }

    /* Hero Section */

    .slide .content-container {
        flex-direction: column;
        /* flex-wrap: nowrap; */
        height: 100%;
        padding: 100px 40px 0 40px;
    }

    .content {
        padding: 0 15px;
        max-width: 100%;
    }

    .content h1 {
        font-size: 32px;
    }

    .content p {
        font-size: 15px;
    }

    .btn {
        font-size: 12px;
    }

    .content-container {
        flex-direction: column;
        padding: 30px 15px;
    }

    .content,
    .hero-content-image {
        max-width: 100%;
        text-align: center;
        padding: 0;
    }

    .hero-content-image img {
        max-width: 100%;
        margin: 0 auto;
    }

    /* About Us Section */

    .about-section,
    .services-section,
    .project-section,
    .work-process-section {
        padding: 100px 20px;
    }

    .about-container {
        padding: 0;
        flex-direction: column-reverse;
        gap: 5rem;
    }

    .about-right,
    .about-left {
        width: 100%;
    }

    .section-title {
        font-size: 24px;
    }

    .appointment-btn {
        font-size: 13px;
    }

    .main-img {
        right: -20.5rem;
    }

    /* Service Section */

    .services-header {
        flex-direction: column;
    }

    .services-header .service-header-content {
        width: 100%;
    }

    .services-header .section-description {
        width: 100%;
    }

    .service-card.ml {
        display: block;
    }

    /* Project */
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto;
        gap: 10px;
    }

    /* Our Process */

    .timeline-container::before {
        left: 20px;
        transform: none;
    }

    .timeline-row {
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
        position: relative;
        padding-left: 40px;
    }

    .timeline-row.left .step-content,
    .timeline-row.right .step-content,
    .timeline-row.left .step-image,
    .timeline-row.right .step-image {
        grid-column: unset;
        justify-self: unset;
        max-width: 100%;
        text-align: left;
        width: 100%;
    }

    .timeline-row .step-number {
        position: absolute;
        left: 0;
        top: 0;
        transform: translateY(0);
        background: var(--text-primary-color);
        color: #fff;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .step-image img {
        max-width: 100%;
        height: auto;
    }

    .work-cta-image {
        margin-right: 0!important;
    }

    .work-cta-banner {
        width: 100%;
        flex-direction: column;
        padding: 0 15px;
    }

    .work-cta-text {
        max-width: 100%;
        margin-top: 20px;
    }

    /* Team Section */

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Review Section */
    .client-review-section {
        padding: 80px 20px;
    }

    .client-info h2 {
        font-size: 14px;
    }

    .google-rating img {
        width: 30px;
        height: 30px;
    }

    /* Blog Section */
    .blog-grid {
        display: flex;
        flex-direction: column;
    }
}

/* Double Screen Devices */
@media (min-width: 1102px) {
    header {
        padding: 10px 20px!important;
    }

    .about-section {
        padding: 12% 20px;
    }

    .about-container {
        gap: 5rem;
    }

    .about-left, 
    .about-right {
        width: 100%;
    }

    .bg-img {
        left: 0;
    }

    .main-img {
        right: -20.5rem;
    }
}

@media (min-width: 1114px) {
    header {
        padding: 10px 20px!important;
    }

    .about-section {
        padding: 12% 20px;
    }

    .about-container {
        gap: 5rem;
    }

    .about-left, 
    .about-right {
        width: 100%;
    }

    .bg-img {
        left: 0;
    }

    .main-img {
        right: -20.5rem;
    }
}

/* Ultra Large Screen Monitors */
@media (max-width: 1669px) {
    header {
        padding: 10px 5%;
    }

    .section-text {
        line-height: 1.6;
        margin-bottom: 0!important;
    }

    .appointment-btn.about {
        margin-top: 20px;
    }
}

@media (min-width: 1920px) {
    header {
        padding: 10px 5%;
    }
}