/*===================================
        navbar responsive
===================================*/
@media screen and (max-width: 1300px) {
    nav {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        padding: 10px 20px;
        z-index: 1111;
        background-color: #fff;
    }

    .nav-right {
        width: 100%;
        height: 100vh;
        position: fixed;
        top: 65px;
        left: -100%;
        flex-direction: column-reverse;
        justify-content: center;
        z-index: 1111;
        background-color: #CAD5E2;
        transition: all 300ms linear;
    }

    .nav-items {
        flex-direction: column;
    }

    .nav-items h5 {
        margin: 25px 0;
    }

    .nav-responsive-btn {
        display: block;
    }

    .nav-responsive-btn i {
        font-size: 30px;
    }

    #nav-check:checked ~ .nav-right {
        left: 0;
    }

    #nav-check:checked ~ .nav-responsive-btn i::before {
        content: '\f00d';
    }
}

/*===================================
            intro responsive
===================================*/

@media screen and (max-width: 480px) {
    .intro-section {
        margin: 100px 0 0 0;
        padding: 0 15px;
        flex-direction: column;
    }

    .left-section {
        width: 100%;
    }

    .left-section h3 {
        font-size: 25px;
    }

    .left-section h1 {
        font-size: 45px;
    }

    .left-section .sub-headlines {
        margin-top: 20px;
        margin-left: 15px;
    }

    .left-section .sub-headline {
        font-size: 18px;
    }

    .left-section .sub-headline img {
        width: 25px;
        margin-right: 10px;
    }

    .left-section .text {
        padding-top: 20px;
        font-size: 16px;
        margin-right: 0;
    }

    .left-section .action-btns {
        margin-top: 50px;
        text-align: center;
    }

    .action-btn {
        padding: 12px 30px;
        font-size: 20px;
        margin-right: 0;
        margin-bottom: 30px;
    }

    .right-section {
        width: 100%;
        margin-top: 30px;
    }

    .headphone-div {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .banner-img {
        text-align: center;
    }

    .banner-img img {
        margin-top: 0;
        width: 85%;
    }

    .right-section .discount-mark {
        width: 40%;
        position: relative;
        left: 0;
        top: 0;
        margin-bottom: 5px;
        margin-right: -105px;
    }
    
    .discount-mark img {
        width: 100px;
    }

    .right-section .discount-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .right-section .discount-content h4 {
        font-size: 12px;
        margin-bottom: 1px;
    }
    
    .right-section .discount-content h1 {
        font-size: 25px;
    }

    .right-section .dots .yellow-dot::after {
        width: 20px;
        height: 20px;
        left: -60px;
        top: 0;
    }
    
    .right-section .dots .tomato-dot::after {
        width: 20px;
        height: 20px;
        left: -15px;
        top: 0;
    }
    
    .right-section .dots .black-dot::after {
        width: 20px;
        height: 20px;
        left: 30px;
        top: 0;
    }
}

@media screen and (min-width: 481px) and (max-width: 767px) {
    .intro-section {
        margin: 100px 0 0 0;
        padding: 0 25px;
        flex-direction: column;
    }

    .left-section {
        width: 100%;
    }

    .left-section h3 {
        font-size: 25px;
    }

    .left-section h1 {
        font-size: 45px;
    }

    .left-section .sub-headlines {
        margin-top: 20px;
        margin-left: 15px;
    }

    .left-section .sub-headline {
        font-size: 18px;
    }

    .left-section .sub-headline img {
        width: 25px;
        margin-right: 10px;
    }

    .left-section .text {
        padding-top: 20px;
        font-size: 16px;
        margin-right: 20px;
    }

    .left-section .action-btns {
        margin-top: 50px;
        text-align: center;
    }

    .action-btn {
        padding: 12px 30px;
        font-size: 20px;
        margin-right: 0;
        margin-bottom: 30px;
    }

    .right-section {
        width: 100%;
        margin-top: 30px;
    }

    .headphone-div {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .banner-img {
        text-align: center;
    }

    .banner-img img {
        margin-top: 0;
        width: 85%;
    }

    .right-section .discount-mark {
        width: 40%;
        position: relative;
        left: 0;
        top: 0;
        margin-bottom: 5px;
        margin-right: -165px;
    }
    
    .discount-mark img {
        width: 140px;
    }

    .right-section .discount-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .right-section .discount-content h4 {
        font-size: 15px;
        margin-bottom: 1px;
    }
    
    .right-section .discount-content h1 {
        font-size: 35px;
    }

    .right-section .dots .yellow-dot::after {
        width: 20px;
        height: 20px;
        left: -60px;
        top: 0;
    }
    
    .right-section .dots .tomato-dot::after {
        width: 20px;
        height: 20px;
        left: -15px;
        top: 0;
    }
    
    .right-section .dots .black-dot::after {
        width: 20px;
        height: 20px;
        left: 30px;
        top: 0;
    }
}

@media screen and (min-width: 768px) and (max-width: 900px) {
    .intro-section {
        margin: 100px 0 0 0;
        padding: 0 25px;
        flex-direction: column;
    }

    .left-section {
        width: 100%;
    }

    .left-section h3 {
        font-size: 25px;
    }

    .left-section h1 {
        font-size: 45px;
    }

    .left-section .sub-headlines {
        margin-top: 20px;
        margin-left: 15px;
    }

    .left-section .sub-headline {
        font-size: 18px;
    }

    .left-section .sub-headline img {
        width: 25px;
        margin-right: 10px;
    }

    .left-section .text {
        padding-top: 20px;
        font-size: 16px;
        margin-right: 0;
    }

    .left-section .action-btns {
        margin-top: 50px;
        text-align: center;
    }

    .action-btn {
        padding: 12px 30px;
        font-size: 20px;
        margin-right: 0;
        margin-bottom: 30px;
    }

    .right-section {
        width: 100%;
        margin-top: 30px;
    }

    .headphone-div {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .banner-img {
        text-align: center;
    }

    .banner-img img {
        margin-top: 0;
        width: 85%;
    }

    .right-section .discount-mark {
        width: 40%;
        position: relative;
        left: 0;
        top: 0;
        margin-bottom: 5px;
        margin-right: -205px;
    }
    
    .discount-mark img {
        width: 80%;
    }

    .right-section .discount-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .right-section .discount-content h4 {
        font-size: 18px;
        margin-bottom: 1px;
    }
    
    .right-section .discount-content h1 {
        font-size: 50px;
    }

    .right-section .dots .yellow-dot::after {
        width: 20px;
        height: 20px;
        left: -60px;
        top: 0;
    }
    
    .right-section .dots .tomato-dot::after {
        width: 20px;
        height: 20px;
        left: -15px;
        top: 0;
    }
    
    .right-section .dots .black-dot::after {
        width: 20px;
        height: 20px;
        left: 30px;
        top: 0;
    }
}

@media screen and (min-width: 901px) and (max-width: 1300px) {
    .intro-section {
        margin: 100px 0 0 0;
        padding: 0 50px;
        flex-direction: column;
    }

    .left-section {
        width: 100%;
    }

    .left-section h3 {
        font-size: 35px;
    }

    .left-section h1 {
        font-size: 70px;
    }

    .left-section .sub-headlines {
        margin-top: 20px;
        margin-left: 30px;
    }

    .left-section .sub-headline {
        font-size: 22px;
    }

    .left-section .sub-headline img {
        width: 25px;
        margin-right: 10px;
    }

    .left-section .text {
        padding-top: 20px;
        font-size: 18px;
        margin-right: 20px;
    }

    .left-section .action-btns {
        margin-top: 50px;
        text-align: center;
    }

    .action-btn {
        padding: 12px 30px;
        font-size: 20px;
        margin-right: 10px;
        margin-left: 10px;
        margin-bottom: 30px;
    }

    .right-section {
        width: 100%;
        margin-top: 30px;
    }

    .headphone-div {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .banner-img {
        text-align: center;
    }

    .banner-img img {
        margin-top: 0;
        width: 85%;
    }

    .right-section .discount-mark {
        width: 40%;
        position: relative;
        left: 0;
        top: 0;
        margin-bottom: 5px;
        margin-right: -205px;
    }
    
    .discount-mark img {
        width: 80%;
    }

    .right-section .discount-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .right-section .discount-content h4 {
        font-size: 18px;
        margin-bottom: 0;
    }
    
    .right-section .discount-content h1 {
        font-size: 50px;
    }

    .right-section .dots .yellow-dot::after {
        width: 25px;
        height: 25px;
        left: -60px;
        top: 0;
    }
    
    .right-section .dots .tomato-dot::after {
        width: 25px;
        height: 25px;
        left: -15px;
        top: 0;
    }
    
    .right-section .dots .black-dot::after {
        width: 25px;
        height: 25px;
        left: 30px;
        top: 0;
    }
}