/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px){
    .container-fluid{
        padding: 0;
    }
    .logo{
        width: 100%;
        padding: 10px 0 10px 10px;
        background-color: #F6F6F6;
    }
    .banner-details{
        padding: 70px 0 70px 10px;
    }
    .banner-wrapper{
        padding-right: 0px;
        clip-path: none;
    }
    .banner-details p{
        font-size: 18px;
        line-height: 26px;
        letter-spacing: 1px;
        font-weight: 500;
    }
    .banner-details h1{
        font-size: 25px;
        letter-spacing: 4px;
    }
    .title{
        font-size: 28px;
    }
    .title:after{
        position: absolute;
        content: '';
        width: 30%;
        top: 75px;
    }
    .byte-difference{
        padding: 80px 0;
    }
    .single-difference{
        padding: 20px;
    }
    .benefit-wrapper{
        padding: 20px;
    }
    .benefit{
        padding: 80px 0;
    }
    .contact{
        padding: 80px 0;
    }
    .cc-title:after{
        top: 155px;
    }
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {
    .container-fluid{
        padding: 0;
    }
    .logo{
        width: 100%;
        padding: 10px 0 10px 60px;
        background-color: #F6F6F6;
    }
    .banner-details{
        padding: 70px 0 70px 60px;
    }
    .banner-wrapper{
        padding-right: 0px;
        clip-path: none;
    }
    .banner-details p{
        font-size: 18px;
        line-height: 26px;
        letter-spacing: 1px;
        font-weight: 500;
    }
    .banner-details h1{
        font-size: 38px;
        letter-spacing: 4px;
    }
    .title{
        font-size: 30px;
    }
    .title:after{
        position: absolute;
        content: '';
        width: 30%;
        top: 55px;
    }
    .byte-difference{
        padding: 80px 0;
    }
    .benefit{
        padding: 80px 0;
    }
    .contact{
        padding: 80px 0;
    }
    .cc-title:after{
        top: 100px;
    }
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .main {
        background-image: url(../images/banner1.jpg);
        background-repeat: no-repeat;
        background-position: center;
    }
    .logo{
        padding: 40px 0 40px 60px;
        background-color: #F6F6F6;
    }
    .banner-details{
        padding: 100px 0 100px 60px;
    }
    .banner-wrapper{
        padding-right: 350px;
        clip-path: polygon(0 0, 40% 0, 80% 100%, 0% 100%);
    }
    .banner-details p{
        font-size: 18px;
        line-height: 26px;
        letter-spacing: 1px;
        font-weight: 500;
    }
    .banner-details h1{
        font-size: 28px;
        letter-spacing: 4px;
    }
    .title{
        font-size: 40px;
    }
    .byte-difference{
        padding: 80px 0;
    }
    .benefit{
        padding: 80px 0;
    }
    .contact{
        padding: 80px 0;
    }
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) {
    .main {
        background-image: url(../images/banner1.jpg);
        background-repeat: no-repeat;
        background-position: center;
    }
    
    .logo{
        padding: 40px 0 40px 60px;
        background-color: #F6F6F6;
    }
    .banner-details{
        padding: 100px 0 100px 60px;
    }
    .banner-wrapper{
        padding-right: 160px;
        clip-path: polygon(0 0, 65% 0, 100% 100%, 0% 100%);
    }
    .banner-details h1{
        font-size: 40px;
        letter-spacing: 3px;
    }

    .single-difference{
        padding: 20px;
    }
   
}

/*X large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) and (max-width: 1399.98px) {
	
}

/*XX Large devices (large desktops, 1400px and up)*/
@media (min-width: 1400px) {

}