h1, h2, h3 {
    font-family: proxima-nova, sans-serif;
    font-weight: 700;
    font-style: normal;
}



body, p {
    font-family: proxima-nova, sans-serif;
    font-weight: 400;
    font-style: normal;
}

p {
    font-size: 23px;
}


/* START HERO SECTION */
/* Desktop */

.logo {
    display: block;
    max-width: 335px;
}

.logo img {
    width: 100%;
}




.hero {
    background-image: url("/images/Zeltron-Image.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 50px;
    position: relative;
    overflow: hidden;
}

.hero:before {
    content: '';
    background-image: url('/images/bandsLarge.svg');
    background-size: 100% 100%;
    width: 131%;
    height: 413px;
    position: absolute;
    bottom: 122px;
    left: -13%;
    transform: rotate(-2.1deg);
    z-index: 1;
}

.hero:after {
    content: '';
    width: 140%;
    height: 450px;
    position: absolute;
    bottom: -108px;
    left: 0;
    background: #fff;
    transform: rotate(-8deg);
}

.container__fluid {
    overflow: hidden;
}


.hero__title h1 {
    color: white;
    font-size: 125px;
    text-transform: uppercase;
}

.hero__title {
    margin-top: 100px;
}


.hero__description h2 {
    font-size: 50px;
    text-transform: uppercase;
    color: white;
    font-family: proxima-nova, sans-serif;
    font-weight: 500;
    font-style: normal;
}


.hero__image {
    position: relative;
    z-index: 10;
    left: -290px;
    top: -70px;
    height: 1000px;
}

.hero__image img {
    height: 100%;
}

.hero__icon {
    background-image: url('/images/uK_Icon.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 81px;
    right: -449px;
}

.hero__bands {
    background-image: url('/images/bandsLarge.svg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
}
/* MEDIA RESPONSIVE */
@media only screen and (max-width: 1600px) {

    .hero:after {
        content: '';
        width: 121%;
        height: 399px;
        position: absolute;
        bottom: -93px;
        left: 0;
        background: #fff;
        transform: rotate(-8deg);
    }

    .hero__image {
        position: relative;
        z-index: 10;
        left: -399px;
        top: -70px;
        height: 900px;
    }


    .hero__icon {
        background-image: url('/images/uK_Icon.png');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100px;
        height: 100px;
        position: absolute;
        top: 81px;
        right: -374px;
    }
}

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

    .hero:after {
        content: '';
        width: 120%;
        height: 300px;
        position: absolute;
        bottom: -102px;
        left: 0;
        background: #fff;
        transform: rotate(-8deg);
    }


    .hero__image {
        position: relative;
        z-index: 10;
        left: -335px;
    }

    .hero__title h1 {
        font-size: 90px;
    }

    .hero__description h2 {
        font-size: 35px;
    }


    .hero:before {
        content: '';
        background-image: url('/images/bandsLarge.svg');
        background-size: 100% 100%;
        width: 131%;
        height: 413px;
        position: absolute;
        bottom: 11px;
        left: -13%;
        transform: rotate(-2.1deg);
        z-index: 1;
    }


    .hero__icon {
        background-image: url('/images/uK_Icon.png');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100px;
        height: 100px;
        position: absolute;
        top: 42px;
        right: -375px;
    }




}

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

    .hero__image {
        position: relative;
        z-index: 10;
        left: -395px;
        top: -13px;
    }

    .hero:after {
        content: '';
        width: 120%;
        height: 300px;
        position: absolute;
        bottom: -95px;
        left: 0;
        background: #fff;
        transform: rotate(-8deg);
    }


    .hero:before {
        content: '';
        background-image: url(/images/bandsLarge.svg);
        background-size: 100% 100%;
        width: 127%;
        height: 380px;
        position: absolute;
        bottom: -5px;
        left: -13%;
        transform: rotate(-2.6deg);
        z-index: 1;
    }


}

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

    .hero__description h2 {
        font-size: 35px;
        text-transform: uppercase;
        color: white;
    }

    .hero__icon {
        background-image: url('/images/uK_Icon.png');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100px;
        height: 100px;
        position: absolute;
        top: 215px;
        right: inherit;
        left: 0;
    }


    .hero:before {
        content: '';
        background-image: url('/images/bandsLarge.svg');
        background-size: 100% 100%;
        width: 245%;
        height: 354px;
        position: absolute;
        bottom: 238px;
        left: -13%;
        transform: rotate(-2.6deg);
        z-index: 1;
    }

    .hero:after {
        content: '';
        width: 121%;
        height: 416px;
        position: absolute;
        bottom: -65px;
        left: -51px;
        background: #fff;
        transform: rotate(-8deg);
    }


    .hero__icon {
        background-image: url('/images/uK_Icon.png');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100px;
        height: 100px;
        position: absolute;
        top: 215px;
        right: inherit;
        left: 0px;
    }


    .hero__description {
        max-width: 300px;
        margin-top: 20px;
    }

    .hero__image {
        z-index: 10;
        top: -175px;
        height: 700px;
        left: 0;
    }

}



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


    .hero__image {
        z-index: 10;
        left: -8px;
        top: -152px;
        max-width: 100%;
        height: 100%;
    }

    .hero__image img {
        height: auto;
    }

    .image-substance {
        max-width: 600px;
        height: auto;
    }


    .hero__icon {
        background-image: url(/images/uK_Icon.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100px;
        height: 100px;
        position: absolute;
        top: 170px;
        right: inherit;
        left: 0;
    }


    .hero:after{
        content: '';
        width: 121%;
        height: 416px;
        position: absolute;
        bottom: -85px;
        left: -51px;
        background: #fff;
        transform: rotate(-8deg);
    }


    .hero:before {
        content: '';
        background-size: 100% 100%;
        width: 245%;
        height: 333px;
        position: absolute;
        bottom: 184px;
        left: -13%;
        transform: rotate(-2.6deg);
        z-index: 1;
    }
}


@media only screen and (max-width: 575px) {
    .hero__title h1 {
        font-size: 50px;
    }

    .hero__description h2 {
        font-size: 20px;
    }

    .logo {
        display: block;
    }

    .logo img {
        width: 100% ;
    }


    .hero__image {
        z-index: 10;
        left: 0;
        top: -8px;
        max-width: 100%;
        height: 100%;
    }

    .image-substance {
        max-width: 100%;
    }


    .hero__icon {
        width: 80px;
        height: 80px;
        position: absolute;
        top: 22px;
        right: inherit;
        left: 0;
    }

    .hero:before {
        content: '';
        background-size: 100% 100%;
        width: 245%;
        height: 389px;
        position: absolute;
        bottom: -74px;
        left: -13%;
        transform: rotate(-2.6deg);
        z-index: 1;
    }

    .hero:after {
        height: 162px;
    }





}


/* END HERO SECTION */




/* START ABOUT US SECTION */
/* Desktop */

.about__us {
    padding-top: 0;
    padding-bottom: 0;
}


.about__us-title h3 {
    font-size: 42px;
}


.about__us-description p {
    font-size: 23px;
}

.about__us-description a {
    font-size: 20px;
    font-weight: bold;
    margin-top: 20px;
}


.btn.btn-default {
    background-color: #8AB71F;
    padding: 15px;
    color: white;
    text-decoration: none;
    border-radius: 0;
    width: 260px;
    font-weight: bold;
}

.about__us-description a:hover {
    background-color: #006633;
    transition: all 400ms ease;
}

.products a:hover {
    background-color: #006633;
    transition: all 400ms ease;
}








/* MEDIA RESPONSIVE */

@media only screen and (max-width: 1199px) {
    .about__us {
        padding-top: 100px;
        padding-bottom: 50px;
    }
}



@media only screen and (max-width: 991px) {
    .about__us {
        position: relative;
        margin-top: -100px;
        padding-top: 0px;
        padding-bottom: 50px;
    }

    .about__us-title {
        margin-bottom: 25px;
    }


}





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

    .about__us .btn-default {
        width: 100%;
    }

    .about__us {
        margin-top: 0px;
        padding-top: 35px;
        position: relative;
        z-index: 0;
    }


    .about__us-title h3 {
        font-size: 30px;
    }


    .about__us-description a {
        margin-top: 20px;
    }

}

/* END ABOUT US SECTION */




/* START PRODUCTS SECTION */
/* Desktop */



.products {
    background-image: url('../images/greyband.png');
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 200px;
    padding-bottom: 100px;
}


.products__title h2{
    color: #F5333F;
    font-size: 65px;
    margin-bottom: 20px;
}

.products__subtitle {
    font-size: 33px;
    margin-bottom: 60px;
}

.products .product__btn a {
    width: 100%;
    font-size: 25px;
}

.product__image img {
    max-width: 100%;
    background: white;
    border: 1px solid rgb(233, 233, 233);
}



/* MOBILE RESPONSIVE */

@media only screen and (max-width: 1199px) {
    .products .product__btn a{
        font-size: 20px;
    }
}



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

    .products {
        padding-top: 300px;
        margin-top: -125px;
    }

    .products .row:nth-last-child(1) {
        row-gap: 30px;
    }

}



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

    .products {
        padding-top: 700px;
        margin-top: -470px;
    }

    .products__title h2 {
        font-size: 50px;
    }

    .product__image img {
        width: 100%;
    }

}


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

    .products {
        margin-top: -525px;
    }

}

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

    .products {
        padding-top: 455px;
        margin-top: -400px;
    }

}

/* END PRODUCTS SECTION */






/* START FOOTER SECTION */
/* Desktop */



.footer {
    background-image: url('../images/Footer.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #f3f3f3;
    padding-top: 300px;
    padding-bottom: 100px;
}

.footer .logo {
    margin-left: auto;
}


.footer__title,  .footer__description{
    color: white;
}

.footer__title,  .footer__description{
    color: white;
}

.footer_link-mobile a {
    color: white;
    font-size: 23px;
}


/* MOBILE RESPONSIVE */

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

    .footer {
        padding-top: 400px;
    }

    .footer .logo {
        margin-right: auto;
        margin-left: 0;
    }

    .footer_link-mobile {
        margin-bottom: 30px;
    }



}



@media only screen and (max-width: 575px) {
 .footer {
    margin-top: -150px;
 }
}


/* END FOOTER SECTION */