/*----------------------------------------    Navigation responsive   -----------------------------------------------*/

@media screen and (max-width: 1250px) {
    .nav li {
        margin-right: 15px;
    }

    .nav li a {
        height: 20px;
        font-size: 13px;
        line-height: 20px;
        letter-spacing: 3px;
        margin-top: 40px;
    }
   
}


@media screen and (min-width: 1250px) and (max-width: 1500px) {
    .nav li {
        margin-right: 20px;
    }
}

/* ----------------------------------------- BIllbox Section Hero ------------------------------------------------------*/

@media screen and (max-width: 1442px) {

    section.hero {
        height: 700px;
    }
    
    .hero-title {
        margin-top: 15%;
    }
    
    .hero  h1 {
        padding-top: 9px;
        font-size: 65px;
        line-height: 110%;
    }
    
    .hero p {
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 0.5px;
        margin-top: 20px;
    }
}


/* -------------------------------------- Billbox Section 1  Responsive -------------------------------------------------*/

@media screen and (max-width: 1442px) {

    .billbox-1 h3 {
        font-size: 11px;
        line-height: 19px;
        letter-spacing: 2.5px;
    }
    
    .billbox-1 h2 {
        max-width: 360px;
        font-size: 40px;
        line-height: 110%;
    }
    
    #bbx1-paragraph1 {
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 0.5px;
    }
    
    #bbx1-paragraph2 {
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 0.5px;
    }
    
    .billbox-1 button {
        font-size: 11px;
        line-height: 19px;
        letter-spacing: 2.5px;
    }
    
    .bbx1-pagination {
        margin-top: 0px;
    }
    
    .billbox-1 video {
        height: 100%;
        width: 100%;
        z-index: 50;
    }
    
    .billbox-1 .bbx1-swiper {
        max-width: 360px;;
        margin-top: 40px;
    }
    
    .billbox-1 h2 {
        margin-bottom: 20px;
    }
    
    .billbox-1 .paragraph {
        margin-bottom: none;
    }
}

/* ----------------------------------------   Billbox 3 Section Responsive  ------------------------------------------------*/


@media screen and (max-width: 1442px) {

    .billbox-3 {
        background: #FBF9F9;
    }
    
    .bbx3-title h1 {
        margin-top: 5%;
        font-size: 11px;
        line-height: 19px;
        letter-spacing: 2.5px;
    }
    
    
    .billbox-3 .paragraph-1 {
        margin-bottom: 9%;
        margin-top: 20%;
    }
    
    .billbox-3 .paragraph-2 {
        margin-bottom: 9%;
        margin-top: 20%;
    }
    
    .billbox-3 .paragraph-3 {
        margin-bottom: 22%;
    }
    
    .billbox-3 .paragraph-4 {
        margin-bottom: 22%;
    }
    
    
    
    .billbox-3 .paragraph-1 h2 {
        font-size: 40px;
        line-height: 110%;
    }
    
    .billbox-3 .paragraph-2 h2 {
        font-size: 40px;
        line-height: 110%;
    }
    
    .billbox-3 .paragraph-3 h2 {
        font-size: 40px;
        line-height: 110%;
    }
    
    .billbox-3 .paragraph-4 h2 {
        font-size: 40px;
        line-height: 110%;
    }
    
    
    .billbox-3 .collapse {
        font-size: 14px;
        line-height: 24px;
    
        letter-spacing: 0.5px;
    }
    
    .billbox-3 .icons img {
        width: 35px;
        height: 35px;
    }
    
    #collapse-paragraph1-left p, 
    #collapse-paragraph1-right p,
    #collapse-paragraph2-left p, 
    #collapse-paragraph2-right p {
        font-size: 14px;
        line-height: 24px;
        letter-spacing: 0.5px;
    }
    
    
    .billbox-3 button {
        margin-left: 45px;
        padding: 0;
        border: none;
        background: none;
    }
    
    .billbox-3 p {
        margin-left: 45px;
        margin-top: 18px;
    }
}


/* ------------------------------------------------ Billbox 5 Section Responsive ------------------------------------------*/

@media screen  and (min-width: 766px) and (max-width: 990px) {
    .billbox-5 p {
        margin-top: 140px;
    }

    .billbox-5 .content-title {
        margin-bottom: 40%;
    }
}

@media screen  and (min-width: 990px) and (max-width: 1244px) {
    .billbox-5 p {
        margin-top: 140px;
    }

    .billbox-5 .content-title {
        margin-bottom: 40%;
    }
}

@media screen  and (min-width: 1244px) and (max-width: 1442px) {
    .billbox-5 h1 {
        padding-top: 40px;
        font-size: 40px;
        line-height: 110%;
    }

    .billbox-5 p {
        margin-top: 70px;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0.5px;
    }

    .billbox-5 video {
        width: 100%;
        max-height: 900px;
    }

    .billbox-5 .header-title {
        margin-top: 3%;
        margin-left: 5%;
    }
    
    .billbox-5 .content-title {
        margin-left: 5%;
        margin-bottom: 20%;
    }
}


@media screen  and (min-width: 1442px) and (max-width: 2200px) {
    .billbox-5 .content-title {
        margin-top: 30%;
    }
}


@media screen  and (min-width: 2200px) and (max-width: 2500px) {
    .billbox-5 .content-title {
        margin-top: 27%;
    }
}

@media screen  and (min-width: 2500px) and (max-width: 3000px) {
    .billbox-5 .content-title {
        margin-top: 24%;
    }
}

/** Billbox 6 Section Responsive */


@media screen and (max-width: 1442px) {

    .billbox-6 {
        height: 500px;
    }

}


/* -------------------------------------------  Billbox 7 Section Responsive    --------------------------------------------*/


@media screen and (max-width: 1442px) {

    .billbox-7 {
        height: 600px;
    }

}

/* ------------------------------------------ Bilbox ection 8 Responsive --------------------------------------------------*/ 


@media screen and (max-width: 1442px) {
    
    .billbox-8 h3 {
        height: 25px;
        margin-top: 180px;

        font-size: 13px;
        line-height: 24px;
        letter-spacing: 5px;
    }
    
    .billbox-8 h2 {
        max-width: 360px;
        max-height: 240px;
        font-size: 40px;
        line-height: 110%;
    }
    
    .billbox-8 p {
        font-size: 18px;
        line-height: 28px;
        letter-spacing: 0.5px;
        color: #000000;
    }
    
    .bbx-8-paginator a{
        font-size: 13px;
        line-height: 24px;
        letter-spacing: 5px;
    }
    
    .billbox-8 .bbx8-swiper {
        max-width: 360px;
        margin-top: 40px;
    }
    
    .billbox-8 h2 {
        padding-top: 40px;
        padding-bottom: 30px;
    }

}

/* ----------------------------------------------   Billbox Section 9 Responsive    ----------------------------------------*/


@media screen  and (min-width: 987px) and (max-width: 1206px) {

    .billbox-9 img {
        width: 420px;
        height: 100px;
    }

    .billbox-9 .captcha {
        padding-bottom: 1%;
    }
    
    .billbox-9 form label, .billbox-9 form h3 {
        font-size: 8px;
        line-height: 18px;
        letter-spacing: 1px;
    }
    
    .billbox-9 button {
        vertical-align: middle;
        margin-right: 2.5px;
    }
    
    .billbox-9 button {
        width: 115px;
        height: 33px;
        z-index: 0;
        border-radius: 10px;
        opacity: 0.8;
        font-size: 10px;
    }
    
    .billbox-9 form {
        margin-top: 20px;
        margin-left: 117px;
        margin-right: 10px;
    }


}


@media screen and (min-width: 870px)  and (max-width: 987px) {
    .billbox-9 button {
        width: 100px;
        height: 30px;
        z-index: 0;
        border-radius: 10px;
        opacity: 0.8;
        font-size: 10px;
    }

    .billbox-9 button {
        vertical-align: middle;
        margin-right: 2.5px;
    }

    .billbox-9 form {
        margin-top: 20px;
        margin-left: 80px;
        margin-right: 15px;
    }
}


@media screen and (max-width: 870px) {
    .billbox-9 button {
        width: 90px;
        height: 30px;
        z-index: 0;
        border-radius: 10px;
        opacity: 0.8;
        font-size: 10px;
    }

    .billbox-9 form {
        margin-top: 20px;
        margin-left: 70px;
        margin-right: 15px;
    }
}

/*  --------------------------------------  Billbox Section 10 Responsive --------------------------------------------------*/

@media screen and (min-width: 992px)  and (max-width: 1198px) {

    .billbox-10 .associate-paragraph h2 {
        margin-left: 175px;
    }


    .billbox-10 .associate-paragraph p {
        margin-left: 175px;
    }

}