* {
    font-family: Grantha Sangam MN, sans-serif;
    color: #171717;
    line-height: 1;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: #f1f1f1;
    margin: 0;
    padding-top: 70px;
    overflow-x: hidden;
}


.container {
    display: grid;
    width: 100%;
    min-height: 100vh;
    grid-template:
        "nav" auto
        "header" auto
        "main" 1fr
        "footer" auto;
    row-gap: 20px;
}

.main-nav {
    grid-area: nav;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #f1f1f1;
    z-index: 999;
}

.nav-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
}

.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.home, .middle, .left {
    text-decoration: none;
    color: black;
    letter-spacing: -1px;
}

.home {
    display: flex;
    justify-content: flex-start;
}

.middle {
    display: flex;
    justify-content: center;
    text-align: center;
}

.left {
    display: flex;
    justify-content: flex-end;
}

header {
    grid-area: header;
    padding-left: 20px;
    padding-right: 20px;
}

.h1 {
    font-size: 65px;
    line-height: 1;
    letter-spacing: -5px;
    padding-top: 70px;
}

main {
    grid-area: main;
    padding-left: 20px;
    padding-right: 20px;
}

.main-container {
    display: grid;
    grid-template-rows: minmax(10px, min-content);
    grid-template-columns: 1fr 1fr;
    row-gap: 20px;
    column-gap: 5px;
}

.intro-container {
    grid-column-end: span 2;
}

.span-description {
    color: #484848;
    padding-bottom: 6px;
    letter-spacing: -1px;
    font-size: 18px;
}

.description {
    font-weight: 500;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -1px;
    width: 85%;
}

.slogan-container {
    padding-top: 10px;
    font-size: 50px;
    letter-spacing: -4px;
    display: flex;
    flex-direction: column;
    grid-column-end: span 2;
}

.future {
    white-space: normal;
    line-height: 0.7;
    padding-top: 10px;
}

.sound {
    display: block;
}

.sound a {
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.slogan {
    font-weight: 500;
}

.grey-square-1, .grey-square-2, .grey-square-3, .grey-square-4 {
    background-color: #e5e5e5;
    width: 100%;
    height: 180px;
}

.grey-square-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-top: -10px;
}

.grey-square-2 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.grey-square-2 img {
    width: 80%;
    height: 100%;
    object-fit: cover;
}

.grey-square-3 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.grey-square-3 img {
    width: 80%;
    height: auto;
    object-fit: cover;
}

.grey-square-4 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grey-square-p-1, .grey-square-p-2, .grey-square-p-3, .grey-square-p-4 {
    letter-spacing: -1px;
}

.bold {
    font-weight: 700;
}

.overview-container {
    display: grid;
    width: 100%;
    grid-template-rows: 150px repeat(4, minmax(10px, min-content));
    grid-template-columns: 1fr 1fr;
    row-gap: 10px;
    column-gap: 10px;
}

.h1-overview {
    font-size: 80px;
    letter-spacing: -7px;
    padding-top: 110px;
    grid-column-end: span 2;
}

.overview-description {
    padding-top: 40px;
    grid-column-end: span 2;
    padding-bottom: 20px;
    letter-spacing: -1px;
}

.grey-square-5, .grey-square-6, .grey-square-7, .grey-square-8, .grey-square-9 {
    background-color: #e5e5e5;
    width: 100%;
    height: 180px;
}

.grey-square-5 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.grey-square-5 img {
    width: 120%;
    height: auto;
    object-fit: cover;
    margin-bottom: 18px;
}

.title-d-1, .title-d-2, .title-d-3, .title-d-4, .title-d-5, .title-d-6 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -1px;
    color: #484848;
    padding-top: 4.5px;
    
}

.d-d-1, .d-d-2, .d-d-3, .d-d-4, .d-d-5, .d-d-6 {
    font-size: 16px;
    font-weight: 400;
    color: #484848;
    display: block;
}

.grey-square-6 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.grey-square-6 img {
    width: 80%;
    height: 100%;
    object-fit: cover;
}

.grey-square-7 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.grey-square-7 img {
    width: 80%;
    height: 100%;
    object-fit: cover;
}

.grey-square-8 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.grey-square-8 img {
    width: 100%;
    height: 100;
    object-fit: cover;
}

.grey-square-9 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.touch {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 74%
}

.target-audience {
    grid-column-end: span 2;
    width: 80%;
    color: #484848;
    padding-top: 20px;
    letter-spacing: -1px;
}

.listening {
    display: block;
    color: #666666;
}

.main-2-container {
    display: grid;
    width: 100%;
    grid-template-rows: minmax(10px, min-content);
}

.h2 {
    font-size: 40px;
    letter-spacing: -4px;
    padding-top: 70px;
}

.bold-commit {
    font-weight: 500;
}

.grey-line {
    background-color: #171717;
    width: 100%;
    height: 2px;
    grid-column-end: span 2;
}

.grey-line-p {
    padding-top: 20px;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    letter-spacing: -1px;
    font-weight: 600;    
    grid-column-end: span 2;
}

.black-p {
    color: #171717;
}

.grey-p {
    text-align: right;
    font-weight: 400;
}

.grey-square-big-1, .grey-square-big-2 {
    background-color: #e5e5e5;
    width: 100%;
    height: 350px;
    margin-top: 20px;
    grid-column-end: span 2;
    display: grid;
    grid-template-rows: 10% 75% 7% auto;
}

.grey-square-big-1 img {
    width: 95%;
    height: 100%;
    object-fit: cover;
    justify-self: center;
    object-position: center 65%;
}

.grey-square-big-2 img {
    width: 70%;
    height: auto;
    object-fit: cover;
    justify-self: center;
    align-self: center;
}

.number {
    font-size: 17px;
    font-weight: 500;
    margin-left: 20px;
    margin-top: 20px;
}

.title-p {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 1.3;
    padding-left: 20px;
}

.description-p {
    display: block;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -1px;
    padding-left: 20px;
}

.footer-nav {
    grid-area: footer;
}

/*cart page*/

.container-cart {
    display: grid;
    min-height: 100vh;
    padding-bottom: 20px;
    grid-template:
        "nav" auto
        "header" auto
        "main" 1fr
        "footer" auto;
}

    .cart-1-container {
        display: grid;
        grid-template-rows: minmax(10px, min-content);
        grid-template-columns: 1fr 1fr;
        row-gap: 5px;
        column-gap: 5px;
    }

    .grey-square-10, .grey-square-11, .grey-square-12, .grey-square-13 {
        background-color: #e5e5e5;
        height: 180px;
        width: 100%;
    }

    .grey-square-10 img, .grey-square-13 img {
        width: 80%;
        height: 100%;
        object-fit: cover;
    }

    .grey-square-10, .grey-square-13 {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .grey-square-11 img, .grey-square-12 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .cart-path-1 {
        display: flex;
        gap: 8px;
        grid-column-end: span 2;
        padding-top: 30px;
        letter-spacing: -1px;
    }

    .divider {
        width: 20px;
        height: 1px;
        background-color: #484848;
        margin-top: 1%;
    }

    .h3 {
        font-size: 80px;
        letter-spacing: -7px;
        padding-top: 30px;
        grid-column-end: span 2;
    }

    .amount {
        font-size: 20px;
        letter-spacing: -1px;
    }

    .first-grey-square {
        background-color: #e7e7e7;
        width: 100%;
        height: 180px;
        grid-column-end: span 2;
    }

    .f-g-s-container {
        display: grid;
        grid-template-columns: 40% 1fr;
        grid-template-rows: 150px;
        padding: 15px;
        column-gap: 10px;
    }

    .dark-grey-square {
        width: 100%;
        height: 100%;
        background-color: #d0d0d0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .dark-grey-square img {
        width: 120%;
        height: auto;
        object-fit: cover;
        margin-top: -10px;
    }

    .title-cart {
        font-weight: 500;
        line-height: 1.5;
        font-size: 16px;
        letter-spacing: -1px;
    }

    .title-cart-1 {
        display: block;
        font-size: 14px;
        font-weight: normal;
        letter-spacing: -1px;
        color: #666666;
    }

    .title-cart-2 {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 40%;
        font-weight: normal;
        font-size: 14px;
    }

    .title-cart-2 a {
        color: #666666;
    }

    .s-g-s-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, minmax(10px, min-content));
        padding: 20px;
        background-color: #e7e7e7;
        height: auto;
        grid-column-end: span 2;
    }

    .even-container {
        display: flex;
        justify-content: space-between;
    }

    .total-right, .total-left, .taxes-right, .taxes-left {
        color: #666666;
        line-height: 2;
        letter-spacing: -1px;
    }

    .even-container-2 {
        display: flex;
        justify-content: space-between;
    }

    .even-container-3 {
        display: flex;
        justify-content: space-between;
    }

    .price-right {
        font-size: 50px;
        letter-spacing: -3px;
        padding-top: 10px;
    }

    .price-left {
        font-size: 25px;
        padding-top: 20px;
        letter-spacing: -1px;
    }

    .even-container-4 {
        display: flex;
        justify-content: space-between;
        padding-bottom: 15px;
    }

    .dis-right {
        font-size: 12px;
        width: 63%;
        color: #666666;
    }

    .dis-left a {
        letter-spacing: -1px;
        color: #666666;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100%;
    }

    .discount-form {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f1f1f1;
        padding-top: 7px;
        padding-left: 10px;
        padding-right: 10px;
        max-width: 100%;
    }

    .discount-form input {
        flex: 1;
        background: transparent;
        border: none;
        font-size: 14px;
        outline: none;
    }

    .discount-form input::placeholder {
        color: #171717;
        letter-spacing: -0.5px;
        font-weight: 500;
    }

    .discount-form button {
        background-color: #f1f1f1;
        color: #666666;
        border: none;
        letter-spacing: -1px;
        text-decoration: underline;

    }


    /* Checkout page */

    .checkout-container {
        display: grid;
        grid-template-rows: minmax(10px, min-content);
        display: flex;
        flex-direction: column;
    }

    .s-g-s-container-checkout {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, minmax(10px, min-content));
        padding: 20px;
        background-color: #e7e7e7;
        height: auto;
        grid-column-end: span 2;
    }

    .cart-path-2 {
        display: flex;
        gap: 8px;
        grid-column-end: span 2;
        letter-spacing: -1px;
    }

    .cart-path-3, .cart-path-4 {
        display: flex;
        gap: 8px;
        grid-column-end: span 2;
        letter-spacing: -1px;
        padding-top: 20px;
    }

    .sub-title-1, .sub-title-2, .sub-title-3 {
        font-size: 25px;
        letter-spacing: -1px;
        padding-top: 15px;
        padding-bottom: 5px;
        font-weight: 500;
        grid-column-end: span 2;
    }

    .form-container, .form-container-2 {
        background-color: #e7e7e7e7;
        padding: 30px;
    }

    .form-container input[type=text], .form-container-2 input[type=text] {
        display: block;
        width: 100%;
        border: none;
        background: #f1f1f1;
        margin-bottom: 15px;
    }

    .form-container input[type=text]:nth-of-type(1),
    .form-container input[type=text]:nth-of-type(2) {
        max-width: 50%;
    }

    .form-container-2 input[type=text]:nth-of-type(3),
    .form-container-2 input[type=text]:nth-of-type(4) {
        max-width: 50%;
    }

    .laptop-pic {
        display: none;
        background-color: #e7e7e7;
        width: 265px;
        height: auto;
    }

    .laptop-pic img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center 60%;
    }

    .footer-container {
        display: grid;
        grid-template-rows: minmax(10px, min-content);
        grid-template-columns: 1fr;
        background-color: #e7e7e7;
        padding: 30px;
        margin-top: 60px;
    }

    .footer-title {
        font-size: 30px;
        letter-spacing: -2px;
        padding-top: 10px;
        font-weight: 500;
    }

    .footer-subtitle {
        font-size: 30px;
        font-weight: 300;
        letter-spacing: -2px;
        padding-top: 5px;
    }

    .fab.fa-instagram, .fab.fa-twitter, .fab.fa-facebook-f {
        font-size: 25px;
        text-decoration: none;
        color: #171717;
        margin-right: 10px;
    }

    .social-icon-container {
        display: flex;
        flex-direction: row;
        gap: 7px;
        padding-top: 30px;
    }


    .discover {
        font-size: 18px;
        letter-spacing: -1px;
        font-weight: 500;
        padding-top: 40px;
    }

    .foot-nav {
        line-height: 1.2;
        letter-spacing: -1px;
    }

    .rights {
        letter-spacing: -1px;
        padding-top: 40px;
    }

    ul {
        list-style-type: none;
        padding-top: 15px;
    }



/* media queries start now*/
@media (prefers-reduced-motion: 
no-preference) {
    * {
        scroll-behavior: smooth;
    }
}

@media (max-width: 500px) {
    .sound {
        display: block;
    }
}

@media (min-width: 501px) and (max-width: 767px) {
    .sound {
        display: inline-block;
    }

    .grey-square-1, .grey-square-2, .grey-square-3, .grey-square-4, .grey-square-5, .grey-square-6, .grey-square-7, .grey-square-8, .grey-square-9 {
        width: 100%;
        height: 350px;
    }

    .touch {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 92%
    }

    .grey-square-big-1, .grey-square-big-2 {
        width: 100%;
        height: 700px;
    }

    .footer-container {
        display: grid;
        grid-template-rows: repeat(5, minmax(10px, min-content));
        grid-template-columns: 1fr 1fr;
        background-color: #e7e7e7;
        padding: 30px;
        margin-top: 60px;
    }

    .footer-title {
        padding-top: 7px;
    }

    .footer-subtitle {
        grid-row: 2;
        grid-column: 1;
    }

    .social-icon-container {
        grid-row: 1;
        grid-column: 2;
        justify-self: end;
        display: flex;
        flex-direction: row;
        gap: 7px;
        padding-top: 0;
    }

    .discover {
        grid-row: 3;
        grid-column: 1;
        padding-top: 80px;
    }

    .footer-site {
        grid-row: 4;
        grid-column: 1;
    }

    .rights {
        grid-row: 5;
        grid-column: 1;
        padding-top: 50px;
    }

    /*cart page*/

    .cart-1-container {
        overflow: visible;
    }


    .grey-square-10, .grey-square-11 {
        width: 100%;
        height: auto;
    }


    .grey-square-12, .grey-square-13 {
        display: none;
    }

    .first-grey-square {
        background-color: #e7e7e7;
        width: 100%;
        height: 300px;
        grid-column-end: span 2;
    }

    .f-g-s-container {
        display: grid;
        grid-template-columns: 40% 1fr;
        grid-template-rows: 80%;
        padding: 15px;
        column-gap: 10px;
    }

    .dark-grey-square {
        width: 100%;
        height: auto;
        background-color: #d0d0d0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .dark-grey-square img {
        width: 120%;
        height: auto;
        object-fit: cover;
        margin-top: -10px;
    }

    .title-cart {
        font-weight: 500;
        line-height: 1.5;
        font-size: 16px;
        letter-spacing: -1px;
    }

    .title-cart-1 {
        display: block;
        font-size: 14px;
        font-weight: normal;
        letter-spacing: -1px;
        color: #666666;
    }

    .title-cart-2 {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 81%;
        font-weight: normal;
        font-size: 14px;
    }

    .title-cart-2 a {
        color: #666666;
    }
}

/* laptops */

@media (min-width: 768px) and (max-width: 1024px) {
        
    .sound {
        display: inline-block;
    }

    .grey-square-1, .grey-square-2, .grey-square-3, .grey-square-4, .grey-square-5, .grey-square-6, .grey-square-7, .grey-square-8, .grey-square-9 {
        width: 100%;
        height: 400px;
    }

    .grey-square-1 img {
        margin-top: -20px;
    }

    .touch {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 92%
    }

    .grey-square-big-1, .grey-square-big-2 {
        width: 100%;
        height: 700px;
    }

    .grey-square-big-1 img {
        width: 70%;
    }

    .grey-square-big-2 img {
        width: 50%;
    }

    .footer-container {
        display: grid;
        grid-template-rows: repeat(5, minmax(10px, min-content));
        grid-template-columns: 1fr 1fr;
        background-color: #e7e7e7;
        padding: 30px;
        margin-top: 60px;
    }

    .footer-title {
        padding-top: 7px;
    }

    .footer-subtitle {
        grid-row: 2;
        grid-column: 1;
    }

    .social-icon-container {
        grid-row: 1;
        grid-column: 2;
        justify-self: end;
        display: flex;
        flex-direction: row;
        gap: 7px;
        padding-top: 0;
    }

    .discover {
        grid-row: 3;
        grid-column: 1;
        padding-top: 80px;
    }

    .footer-site {
        grid-row: 4;
        grid-column: 1;
    }

    .rights {
        grid-row: 5;
        grid-column: 1;
        padding-top: 50px;
    }

    .grey-square-5, .grey-square-6, .grey-square-7, .grey-square-8, .grey-square-9 {
        background-color: #e5e5e5;
        width: 100%;
        height: 450px;
    }

    .grey-square-5 img {
        margin-top: -25px;
    }

} 

/* bigger laptops */

@media (min-width: 1025px) and (max-width: 1440px) {
    .intro-container {
        grid-column: 1;
        grid-row: 1;
        grid-column-end: span 2;
    }

    .slogan-container {
        grid-column: 3;
        grid-row: 1;
        padding-top: 10px;
        font-size: 50px;
        letter-spacing: -4px;
        display: flex;
        flex-direction: column;
        justify-self: end;
        grid-column-end: span 2;
    }

    .sound {
        display: inline;
    }

    .main-container {
        display: grid;
        grid-template-rows: minmax(10px, min-content);
        grid-template-columns: 26% 1fr 1fr 33%;
        row-gap: 20px;
        column-gap: 5px;
    }

    .grey-square-1, .grey-square-2, .grey-square-3, .grey-square-4 {
        background-color: #e5e5e5;
        height: 100%;
    }

    .grey-square-1 {
        width: 100%;
        height: 100%;
        grid-row-end: span 2;
    }

    .grey-square-2 {
        width: 100%;
        grid-column: 2;
        grid-row: 2;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .grey-square-2 img {
        width: 60%;
        height: 100%;
    }

    .grey-square-3 {
        width: 100%;
        grid-column: 3;
        grid-row: 2;
    }

    .grey-square-4 {
        width: 80%;
        height: 100%;
        grid-column: 4;
        grid-row: 2;
        grid-row-end: span 2;
        display: flex;
        justify-self: end;
    }
    
    .grey-square-p-1, .grey-square-p-2, .grey-square-p-3, .grey-square-p-4 {
        letter-spacing: -1px;
    }

    .grey-square-p-1 {
        grid-column: 1;
        grid-row: 4;
}

    .grey-square-p-2 {
        grid-column: 2;
        grid-row: 3;
    }

    .grey-square-p-3 {
        grid-column: 3;
        grid-row: 3;
    }

    .grey-square-p-4 {
        grid-column: 4;
        grid-row: 4;
        width: 80%;
        justify-self: end;
    }

    .main-2-container {
        display: grid;
        width: 100%;
        grid-template-rows: minmax(10px, min-content);
        grid-template-columns: 1fr 1fr;
        column-gap: 5px;
    }

    .h2 {
        font-size: 40px;
        letter-spacing: -4px;
        font-weight: 500;
        padding-top: 120px;
    }

    .grey-square-big-1, .grey-square-big-2 {
        background-color: #e5e5e5;
        margin-top: 25px;
    }

    .grey-square-big-1 {
        grid-column: 1;
        width: 100%;
        height: 550px;
    }

    .grey-square-big-2 {
        grid-column: 2;
        width: 100%;
        height: 550px;
        justify-self: end;
    }

    .number {
        font-size: 20px;
        font-weight: 500;
        margin-left: 20px;
        margin-top: 20px;
    }
    
    .title-p {
        font-size: 25px;
        font-weight: 600;
        letter-spacing: -1px;
        line-height: 1.3;
        padding-left: 20px;
    }
    
    .description-p {
        display: block;
        font-size: 18px;
        font-weight: 500;
        letter-spacing: -1px;
        padding-left: 20px;
    }


    .overview-container {
        display: grid;
        width: 100%;
        grid-template-rows: 150px repeat(3, minmax(10px, min-content));
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        row-gap: 10px;
        column-gap: 10px;
    }

    .overview-description {
        padding-top: 40px;
        grid-column-end: span 3;
        padding-bottom: 20px;
        letter-spacing: -1px;
        grid-row: 2;
    }

    .grey-square-5, .grey-square-6, .grey-square-7, .grey-square-8, .grey-square-9 {
        height: 200px;
    }

    .grey-square-5 {
        display: flex;
        justify-content: center;
        align-items: center;
        grid-row: 4;
        grid-column: 3;
    }

    .grey-square-6 {
        grid-row: 3;
        grid-column: 3;
    }

    .grey-square-7 {
        grid-row: 3;
    }

    .grey-square-8 {
        grid-row: 3;
        grid-column: 5;
    }

    .grey-square-9 {
        grid-row: 4;
        grid-column: 1;
    }

    .title-d-1 {
        grid-row: 3;
        grid-column: 2;
    }

    .title-d-2 {
        grid-row: 3;
        grid-column: 2;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100%;
    }
    .title-d-3 {
        grid-row: 3;
        grid-column: 4;
    }

    .title-d-4 {
        grid-row: 3;
        grid-column: 4;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100%;
    }

    .title-d-5 {
        grid-row: 3;
        grid-column: 6;
    }

    .touch {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 72%
    }

    .target-audience {
        grid-column-end: span 2;
        color: #666666;
        padding-top: 20px;
        letter-spacing: -1px;
        grid-row: 4;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100%;
        width: 100%;
    }

    .grey-square-big-1 img {
        width: 80%;
        height: 100%;
        object-fit: cover;
        justify-self: center;
        object-position: center 65%;
    }
    
    .grey-square-big-2 img {
        width: 65%;
        height: auto;
        object-fit: cover;
        justify-self: center;
        align-self: center;
    }

    /* footer */
    .footer-container {
        display: grid;
        grid-template-rows: repeat(5, minmax(10px, min-content));
        grid-template-columns: 1fr 1fr;
        background-color: #e7e7e7;
        padding: 30px;
        margin-top: 60px;
    }

    .footer-title {
        padding-top: 10px;
    }

    .footer-subtitle {
        grid-row: 2;
        grid-column: 1;
    }

    .social-icon-container {
        grid-row: 1;
        grid-column: 2;
        justify-self: end;
        display: flex;
        flex-direction: row;
        gap: 7px;
        padding-top: 0;
    }

    .discover {
        grid-row: 3;
        grid-column: 1;
        padding-top: 80px;
    }

    .footer-site {
        grid-row: 4;
        grid-column: 1;
    }

    .rights {
        grid-row: 5;
        grid-column: 1;
    }

    /*cart page*/

    .cart-1-container {
        display: grid;
        grid-template-rows: repeat(4, minmax(10px, min-content));
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 10px;
    }

    .h3 {
        grid-row: 2;
        grid-column: 1;
        font-size: 80px;
        letter-spacing: -5px;
        grid-column-end: span 2;
    }

    .cart-path-1 {
        grid-row: 1;
        grid-column: 1;
        grid-column-end: span 2;
    }

    .dark-grey-square img {
        width: 100%;
        height: 100%;
        margin-top: -15px;
    }

    .first-grey-square {
        grid-row: 3;
        grid-column: 1;
        grid-column-end: span 2;
        width: 75%;
    }

    .s-g-s-container {
        grid-row: 4;
        grid-column: 3;
        grid-column-end: span 2;
        height: auto;
    }

    .grey-square-10 {
        grid-row: 3;
        grid-column: 3;
        width: 100%;
        height: 100%;
    }

    .grey-square-11 {
        grid-row: 3;
        grid-column: 4;
        width: 100%;
        height: 100%;
    }

    .grey-square-12 {
        grid-row: 4;
        grid-column: 1;
        width: 100%;
        height: auto;
    }

    .grey-square-12 img {
        object-position: 43% center;
    }

    .grey-square-13 {
        grid-row: 4;
        grid-column: 2;
        width: 100%;
        height: auto;
    }

        /* Checkout page */

        .checkout-container {
            display: grid;
            grid-template-rows: minmax(10px, min-content);
            grid-template-columns: 30% 30% 1fr;
            gap: 10px;
            position: relative;
            overflow: visible;
        }

        .sub-title-1 {
            grid-row: 2;
            grid-column: 1;
        }

        .sub-title-2 {
            grid-row: 2;
            grid-column: 2;
        }

        .sub-title-3 {
            grid-row: 2;
            grid-column: 3;
        }

        .cart-path-2 {
            grid-row: 1;
            grid-column: 1;
        }

        .cart-path-3 {
            grid-row: 1;
            grid-column: 2;
            padding: 0;
        }

        .cart-path-4 {
            grid-row: 1;
            grid-column: 3;
            padding: 0;
        }

        .form-container {
            grid-row: 3;
            grid-column: 1;
            grid-row-end: span 2;
        }

        .laptop-pic {
            display: block;
            grid-column: 3;
            grid-row: 4;
            margin-top: -35px;
            z-index: 10;
            width: 270px;
            height: 260px;
        }

        .form-container-2 {
            background-color: #e7e7e7e7;
            padding: 30px;
            height: auto;
            grid-row-end: span 2;
            grid-row: 3;
            grid-column: 2;
        }
}

/* larger laptops */

@media (min-width: 1441px) and (max-width: 1920px) {
    .intro-container {
        grid-column: 1;
        grid-row: 1;
        grid-column-end: span 2;
    }

    .slogan-container {
        grid-column: 3;
        grid-row: 1;
        padding-top: 10px;
        font-size: 50px;
        letter-spacing: -4px;
        display: flex;
        flex-direction: column;
        justify-self: end;
        grid-column-end: span 2;
    }

    .sound {
        display: inline;
    }

    .main-container {
        display: grid;
        grid-template-rows: minmax(10px, min-content);
        grid-template-columns: 26% 1fr 1fr 33%;
        row-gap: 20px;
        column-gap: 5px;
    }

    .grey-square-1, .grey-square-2, .grey-square-3, .grey-square-4 {
        background-color: #e5e5e5;
        height: 100%;
    }

    .grey-square-1 {
        width: 100%;
        height: 100%;
        grid-row-end: span 2;
    }

    .grey-square-2 {
        width: 100%;
        grid-column: 2;
        grid-row: 2;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .grey-square-2 img {
        width: 100%;
        height: 100%;
    }

    .grey-square-3 {
        width: 100%;
        grid-column: 3;
        grid-row: 2;
    }

    .grey-square-4 {
        width: 80%;
        height: 100%;
        grid-column: 4;
        grid-row: 2;
        grid-row-end: span 2;
        display: flex;
        justify-self: end;
    }
    
    .grey-square-p-1, .grey-square-p-2, .grey-square-p-3, .grey-square-p-4 {
        letter-spacing: -1px;
    }

    .grey-square-p-1 {
        grid-column: 1;
        grid-row: 4;
}

    .grey-square-p-2 {
        grid-column: 2;
        grid-row: 3;
    }

    .grey-square-p-3 {
        grid-column: 3;
        grid-row: 3;
    }

    .grey-square-p-4 {
        grid-column: 4;
        grid-row: 4;
        width: 80%;
        justify-self: end;
    }

    .main-2-container {
        display: grid;
        width: 100%;
        grid-template-rows: minmax(10px, min-content);
        grid-template-columns: 1fr 1fr;
        column-gap: 5px;
    }

    .h2 {
        font-size: 40px;
        letter-spacing: -4px;
        font-weight: 500;
        padding-top: 120px;
    }

    .grey-square-big-1, .grey-square-big-2 {
        background-color: #e5e5e5;
        margin-top: 25px;
    }

    .grey-square-big-1 {
        grid-column: 1;
        width: 100%;
        height: 550px;
    }

    .grey-square-big-2 {
        grid-column: 2;
        width: 100%;
        height: 550px;
        justify-self: end;
    }

    .number {
        font-size: 20px;
        font-weight: 500;
        margin-left: 20px;
        margin-top: 20px;
    }
    
    .title-p {
        font-size: 25px;
        font-weight: 600;
        letter-spacing: -1px;
        line-height: 1.3;
        padding-left: 20px;
    }
    
    .description-p {
        display: block;
        font-size: 18px;
        font-weight: 500;
        letter-spacing: -1px;
        padding-left: 20px;
    }


    .overview-container {
        display: grid;
        width: 100%;
        grid-template-rows: 150px repeat(3, minmax(10px, min-content));
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        row-gap: 10px;
        column-gap: 10px;
    }

    .overview-description {
        padding-top: 40px;
        grid-column-end: span 3;
        padding-bottom: 20px;
        letter-spacing: -1px;
        grid-row: 2;
    }

    .grey-square-5, .grey-square-6, .grey-square-7, .grey-square-8, .grey-square-9 {
        height: 300px;
        width: 100%;
    }

    .grey-square-5 {
        display: flex;
        justify-content: center;
        align-items: center;
        grid-row: 4;
        grid-column: 3;
    }

    .grey-square-6 {
        grid-row: 3;
        grid-column: 3;
    }

    .grey-square-7 {
        grid-row: 3;
    }

    .grey-square-8 {
        grid-row: 3;
        grid-column: 5;
    }

    .grey-square-9 {
        grid-row: 4;
        grid-column: 1;
    }

    .title-d-1 {
        grid-row: 3;
        grid-column: 2;
    }

    .title-d-2 {
        grid-row: 3;
        grid-column: 2;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100%;
    }
    .title-d-3 {
        grid-row: 3;
        grid-column: 4;
    }

    .title-d-4 {
        grid-row: 3;
        grid-column: 4;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100%;
    }

    .title-d-5 {
        grid-row: 3;
        grid-column: 6;
    }

    .title-d-6 {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 85%
    }

    .target-audience {
        grid-column-end: span 2;
        color: #666666;
        padding-top: 20px;
        letter-spacing: -1px;
        grid-row: 4;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100%;
        width: 100%;
    }

    .grey-square-big-1 img {
        width: 50%;
        height: 100%;
        object-fit: cover;
        justify-self: center;
        object-position: center 65%;
    }
    
    .grey-square-big-2 img {
        width: 40%;
        height: auto;
        object-fit: cover;
        justify-self: center;
        align-self: center;
    }

    /* footer */
    .footer-container {
        display: grid;
        grid-template-rows: repeat(5, minmax(10px, min-content));
        grid-template-columns: 1fr 1fr;
        background-color: #e7e7e7;
        padding: 30px;
        margin-top: 60px;
    }

    .footer-title {
        padding-top: 10px;
    }

    .footer-subtitle {
        grid-row: 2;
        grid-column: 1;
    }

    .social-icon-container {
        grid-row: 1;
        grid-column: 2;
        justify-self: end;
        display: flex;
        flex-direction: row;
        gap: 7px;
        padding-top: 0;
    }

    .discover {
        grid-row: 3;
        grid-column: 1;
        padding-top: 80px;
    }

    .footer-site {
        grid-row: 4;
        grid-column: 1;
    }

    .rights {
        grid-row: 5;
        grid-column: 1;
    }

    /*cart page*/

    .cart-1-container {
        display: grid;
        grid-template-rows: repeat(4, minmax(10px, min-content));
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 10px;
    }

    .h3 {
        grid-row: 2;
        grid-column: 1;
        font-size: 80px;
        letter-spacing: -5px;
        grid-column-end: span 2;
    }

    .cart-path-1 {
        grid-row: 1;
        grid-column: 1;
        grid-column-end: span 2;
    }

    .dark-grey-square img {
        width: 100%;
        height: 100%;
        margin-top: -15px;
    }

    .first-grey-square {
        grid-row: 3;
        grid-column: 1;
        grid-column-end: span 2;
        width: 75%;
        height: 60%;
    }

    .dark-grey-square {
        height: 170%;
    }

    .title-cart-2 {
        height: 137%;
    }

    .s-g-s-container {
        grid-row: 4;
        grid-column: 3;
        grid-column-end: span 2;
        height: 55%;
    }

    .grey-square-10 {
        grid-row: 3;
        grid-column: 3;
        width: 100%;
        height: 100%;
    }

    .grey-square-11 {
        grid-row: 3;
        grid-column: 4;
        width: 100%;
        height: 100%;
    }

    .grey-square-12 {
        grid-row: 4;
        grid-column: 1;
        width: 100%;
        height: auto;
    }

    .grey-square-12 img {
        object-position: 43% center;
    }

    .grey-square-13 {
        grid-row: 4;
        grid-column: 2;
        width: 100%;
        height: auto;
    }

        /* Checkout page */

        .checkout-container {
            display: grid;
            grid-template-rows: minmax(10px, min-content);
            grid-template-columns: 30% 30% 1fr;
            gap: 10px;
            position: relative;
            overflow: visible;
        }

        .sub-title-1 {
            grid-row: 2;
            grid-column: 1;
        }

        .sub-title-2 {
            grid-row: 2;
            grid-column: 2;
        }

        .sub-title-3 {
            grid-row: 2;
            grid-column: 3;
        }

        .cart-path-2 {
            grid-row: 1;
            grid-column: 1;
        }

        .cart-path-3 {
            grid-row: 1;
            grid-column: 2;
            padding: 0;
        }

        .cart-path-4 {
            grid-row: 1;
            grid-column: 3;
            padding: 0;
        }

        .form-container {
            grid-row: 3;
            grid-column: 1;
            grid-row-end: span 2;
        }

        .laptop-pic {
            display: block;
            grid-column: 3;
            grid-row: 4;
            margin-top: -60px;
            z-index: 10;
            width: 270px;
            height: 260px;
        }

        .form-container-2 {
            background-color: #e7e7e7e7;
            padding: 30px;
            height: auto;
            grid-row-end: span 2;
            grid-row: 3;
            grid-column: 2;
        }
}


@media (min-width: 1921px) and (max-width: 2560px) {
    .intro-container {
        grid-column: 1;
        grid-row: 1;
        grid-column-end: span 2;
    }

    .slogan-container {
        grid-column: 3;
        grid-row: 1;
        padding-top: 10px;
        font-size: 50px;
        letter-spacing: -4px;
        display: flex;
        flex-direction: column;
        justify-self: end;
        grid-column-end: span 2;
    }

    .sound {
        display: inline;
    }

    .main-container {
        display: grid;
        grid-template-rows: minmax(10px, min-content);
        grid-template-columns: 26% 1fr 1fr 33%;
        row-gap: 20px;
        column-gap: 5px;
    }

    .grey-square-1, .grey-square-2, .grey-square-3, .grey-square-4 {
        background-color: #e5e5e5;
        height: 100%;
    }

    .grey-square-1 {
        width: 100%;
        height: 100%;
        grid-row-end: span 2;
    }

    .grey-square-2 {
        width: 100%;
        grid-column: 2;
        grid-row: 2;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .grey-square-2 img {
        width: 100%;
        height: 100%;
    }

    .grey-square-3 {
        width: 100%;
        grid-column: 3;
        grid-row: 2;
    }

    .grey-square-4 {
        width: 80%;
        height: 100%;
        grid-column: 4;
        grid-row: 2;
        grid-row-end: span 2;
        display: flex;
        justify-self: end;
    }
    
    .grey-square-p-1, .grey-square-p-2, .grey-square-p-3, .grey-square-p-4 {
        letter-spacing: -1px;
    }

    .grey-square-p-1 {
        grid-column: 1;
        grid-row: 4;
}

    .grey-square-p-2 {
        grid-column: 2;
        grid-row: 3;
    }

    .grey-square-p-3 {
        grid-column: 3;
        grid-row: 3;
    }

    .grey-square-p-4 {
        grid-column: 4;
        grid-row: 4;
        width: 80%;
        justify-self: end;
    }

    .main-2-container {
        display: grid;
        width: 100%;
        grid-template-rows: minmax(10px, min-content);
        grid-template-columns: 1fr 1fr;
        column-gap: 5px;
    }

    .h2 {
        font-size: 40px;
        letter-spacing: -4px;
        font-weight: 500;
        padding-top: 120px;
    }

    .grey-square-big-1, .grey-square-big-2 {
        background-color: #e5e5e5;
        margin-top: 25px;
    }

    .grey-square-big-1 {
        grid-column: 1;
        width: 100%;
        height: 550px;
    }

    .grey-square-big-2 {
        grid-column: 2;
        width: 100%;
        height: 550px;
        justify-self: end;
    }

    .number {
        font-size: 20px;
        font-weight: 500;
        margin-left: 20px;
        margin-top: 20px;
    }
    
    .title-p {
        font-size: 25px;
        font-weight: 600;
        letter-spacing: -1px;
        line-height: 1.3;
        padding-left: 20px;
    }
    
    .description-p {
        display: block;
        font-size: 18px;
        font-weight: 500;
        letter-spacing: -1px;
        padding-left: 20px;
    }


    .overview-container {
        display: grid;
        width: 100%;
        grid-template-rows: 150px repeat(3, minmax(10px, min-content));
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        row-gap: 10px;
        column-gap: 10px;
    }

    .overview-description {
        padding-top: 40px;
        grid-column-end: span 3;
        padding-bottom: 20px;
        letter-spacing: -1px;
        grid-row: 2;
    }

    .grey-square-5, .grey-square-6, .grey-square-7, .grey-square-8, .grey-square-9 {
        height: 400px;
        width: 400px;
    }

    .grey-square-5 {
        display: flex;
        justify-content: center;
        align-items: center;
        grid-row: 4;
        grid-column: 3;
    }

    .grey-square-6 {
        grid-row: 3;
        grid-column: 3;
    }

    .grey-square-7 {
        grid-row: 3;
    }

    .grey-square-8 {
        grid-row: 3;
        grid-column: 5;
    }

    .grey-square-9 {
        grid-row: 4;
        grid-column: 1;
    }

    .title-d-1 {
        grid-row: 3;
        grid-column: 2;
    }

    .title-d-2 {
        grid-row: 3;
        grid-column: 2;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100%;
    }
    .title-d-3 {
        grid-row: 3;
        grid-column: 4;
    }

    .title-d-4 {
        grid-row: 3;
        grid-column: 4;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100%;
    }

    .title-d-5 {
        grid-row: 3;
        grid-column: 6;
    }

    .title-d-6 {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 88%
    }

    .target-audience {
        grid-column-end: span 2;
        color: #666666;
        padding-top: 20px;
        letter-spacing: -1px;
        grid-row: 4;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100%;
        width: 100%;
    }

    .grey-square-big-1 img {
        width: 47%;
        height: 100%;
        object-fit: cover;
        justify-self: center;
        object-position: center 65%;
    }
    
    .grey-square-big-2 img {
        width: 37%;
        height: auto;
        object-fit: cover;
        justify-self: center;
        align-self: center;
    }

    /* footer */
    .footer-container {
        display: grid;
        grid-template-rows: repeat(5, minmax(10px, min-content));
        grid-template-columns: 1fr 1fr;
        background-color: #e7e7e7;
        padding: 30px;
        margin-top: 60px;
    }

    .footer-title {
        padding-top: 10px;
    }

    .footer-subtitle {
        grid-row: 2;
        grid-column: 1;
    }

    .social-icon-container {
        grid-row: 1;
        grid-column: 2;
        justify-self: end;
        display: flex;
        flex-direction: row;
        gap: 7px;
        padding-top: 0;
    }

    .discover {
        grid-row: 3;
        grid-column: 1;
        padding-top: 80px;
    }

    .footer-site {
        grid-row: 4;
        grid-column: 1;
    }

    .rights {
        grid-row: 5;
        grid-column: 1;
    }

    /*cart page*/

    .cart-1-container {
        display: grid;
        grid-template-rows: repeat(4, minmax(10px, min-content));
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 10px;
    }

    .h3 {
        grid-row: 2;
        grid-column: 1;
        font-size: 80px;
        letter-spacing: -5px;
        grid-column-end: span 2;
    }

    .cart-path-1 {
        grid-row: 1;
        grid-column: 1;
        grid-column-end: span 2;
    }

    .dark-grey-square img {
        width: 100%;
        height: 100%;
        margin-top: -15px;
    }

    .dark-grey-square {
        height: 350px;
    }

    .first-grey-square {
        grid-row: 3;
        grid-column: 1;
        grid-column-end: span 2;
        width: 75%;
        height: 70%;
    }

    .s-g-s-container {
        grid-row: 4;
        grid-column: 3;
        grid-column-end: span 2;
        height: 60%;
    }

    .title-cart-2 {
        height: 200%;
    }

    .even-container {
        display: flex;
        justify-content: space-between;
    }

    .total-right, .total-left, .taxes-right, .taxes-left {
        color: #666666;
        line-height: 2;
        letter-spacing: -1px;
    }

    .even-container-2 {
        display: flex;
        justify-content: space-between;
    }

    .even-container-3 {
        display: flex;
        justify-content: space-between;
    }

    .price-right {
        font-size: 50px;
        letter-spacing: -3px;
        padding-top: 10px;
    }

    .price-left {
        font-size: 25px;
        padding-top: 20px;
        letter-spacing: -1px;
    }

    .even-container-4 {
        display: flex;
        justify-content: space-between;
        padding-bottom: 15px;
    }

    .dis-right {
        font-size: 12px;
        width: 63%;
        color: #666666;
    }

    .dis-left a {
        letter-spacing: -1px;
        color: #666666;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100%;
    }

    .discount-form {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f1f1f1;
        padding-top: 7px;
        padding-left: 10px;
        padding-right: 10px;
        max-width: 100%;
    }

    .grey-square-10 {
        grid-row: 3;
        grid-column: 3;
        width: 100%;
        height: 100%;
    }

    .grey-square-11 {
        grid-row: 3;
        grid-column: 4;
        width: 100%;
        height: 100%;
    }

    .grey-square-12 {
        grid-row: 4;
        grid-column: 1;
        width: 100%;
        height: auto;
    }

    .grey-square-12 img {
        object-position: 43% center;
    }

    .grey-square-13 {
        grid-row: 4;
        grid-column: 2;
        width: 100%;
        height: auto;
    }

        /* Checkout page */

        .checkout-container {
            display: grid;
            grid-template-rows: minmax(10px, min-content);
            grid-template-columns: 30% 30% 1fr;
            gap: 10px;
            position: relative;
            overflow: visible;
        }

        .sub-title-1 {
            grid-row: 2;
            grid-column: 1;
        }

        .sub-title-2 {
            grid-row: 2;
            grid-column: 2;
        }

        .sub-title-3 {
            grid-row: 2;
            grid-column: 3;
        }

        .cart-path-2 {
            grid-row: 1;
            grid-column: 1;
        }

        .cart-path-3 {
            grid-row: 1;
            grid-column: 2;
            padding: 0;
        }

        .cart-path-4 {
            grid-row: 1;
            grid-column: 3;
            padding: 0;
        }

        .form-container {
            grid-row: 3;
            grid-column: 1;
            grid-row-end: span 2;
        }

        .laptop-pic {
            display: block;
            grid-column: 3;
            grid-row: 4;
            margin-top: -63px;
            z-index: 10;
            width: 270px;
            height: 260px;
        }

        .form-container-2 {
            background-color: #e7e7e7e7;
            padding: 30px;
            height: auto;
            grid-row-end: span 2;
            grid-row: 3;
            grid-column: 2;
        }
}