@media all and (max-width: 1600px) {
    .nav-list {
        column-gap: 3rem;
    }
}

@media all and (max-width: 1515px) {
    .nav-list {
        column-gap: 2rem;
    }
}

@media all and (max-width: 1420px) {
    .nav-list {
        width: 100%;
        column-gap: 1rem;
    }
    .big {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 86px;
    }
    .semi-big {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 32px;
    }
    
    .semi-medium {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 18px;
    }
    
    .small {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 15px;
    }
}


@media all and (max-width: 1327px) {
    .icon {
        width: 40px;
        height: 40px;
    }
    #profile {
        width: 50px;
        height: 50px;
    }

    #hyphenos-text {
        font-size: 30px;
    }

    .nav-link {
        font-size: 16px;
    }

    .button-wrapper button {
        width: 100%;
        height: 3.5rem;
    }

    .big {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 64px;
    }

    .semi-big {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 24px;
    }
    
    .semi-medium {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 14px;
    }
    
    .small {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 11px;
    }
}

@media all and (max-width: 1130px) {
    .icon {
        width: 30px;
        height: 30px;
    }
    #profile {
        width: 45px;
        height: 45px;
    }

    #hyphenos-text {
        font-size: 25px;
    }

    .nav-link {
        font-size: 14px;
    }
}

@media all and (max-width: 1320px) {

    section {
        padding: 10rem;
    }
    .first-item {
        height: 10rem;
    }

    .dropdown-content li a {
        font-size: 34px;
    }

    .dropdown-content li {
        padding: 10%;
        left: -20px;
    }

    .main-wrapper {
        height: fit-content;
        width: 100%;
        margin-top: 12vh;
    }

    .presentation {
        display:inline;
        justify-content: auto;
        align-items: auto;
        margin-left: 5%;
    }

    .left-content {
        margin:auto;
        display: inline;
        align-items: center;
        text-align: center;
        width: 100%;
        margin-top: 40rem;
    }

    .left-content h1 {
        text-align: center;
        margin: auto;
    }

    .right-content {
        width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #design-by-your-liking {
        font-size: 0;
        display: none;
    }

    #device {
        rotate: 90deg;
        scale: 1.5;
    }

    .phone-slideshow {
        margin: 0;
    }

    .button-wrapper {
        margin:auto;
        justify-content: center;
        align-items: center;
        width: 70%;
        justify-content: center;
    }

    .button-wrapper button {
        margin: 0;
        margin-left: 1%;
        margin-right: 1%;
    }

    .big {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 140px;
    }
    
    .semi-big {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 52px;
    }
    
    .semi-medium {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 36px;
    }
    
    .small {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 19px;
    }
}

@media all and (max-width: 980px) {
    .icon {
        width: 60px;
        height: 60px;
    }
    .logo {
        width: 80px;
        height: 80px;
        align-items: last baseline;
    }


    .search {
        -webkit-transition: width 0.2s ease-in-out;
        -moz-transition: width 0.2s ease-in-out;
        -o-transition: width 0.2s ease-in-out;
        transition: width 0.2s ease-in-out;
        width: 45px;
        height: 45px;
        border-radius: 100%;
        font-size: 0px;
        text-align: center;
    }

    .search:focus {
        font-size: 29px;
        width: 160px;
        border-radius: 2rem;
    }

    #profile {
        width: 50px;
        height: 50px;
    }

    #hyphenos-text {
        font-size: 0px;
        margin: 5%;;
    }

    .nav-link {
        font-size: 0px;
    }
    
    .nav {
        justify-content: center;
    }
    .container {
        height: auto;
    }


    .big {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 125px;
    }

    .semi-big {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 54px;
    }
    
    .semi-medium {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 30px;
    }
}

@media all and (max-width: 680px) {
    .big {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 100px;
    }
    
    .semi-big {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 40px;
    }
    .semi-medium {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 24px;
    }
}


@media all and (max-width: 550px) {
    .big {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 80px;
    }
    
    .semi-big {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 20px;
    }
    .semi-medium {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 16px;
    }
}