html,
body {
    overflow-x: hidden;
}

body {
    position: relative
}

/*BG*/
.ra-primary {
    background-color: #6eb030;
}

.ra-secondary {
    background-color: #0e8e3d;
}

.ra-third {
    background-color: #0fb45e;
}

.ra-grey {
    background-color: #212121;
}

/*TEXT*/
.ra-text-primary {
    color: #6eb030;
}

.ra-text-secondary {
    color: #0e8e3d;
}

.ra-text-third {
    color: #0fb45e;
}

/*LOADER*/
.loader-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #ededed;
}

.loader {
    max-width: 15rem;
    width: 100%;
    height: auto;
    stroke-linecap: round;
}

circle {
    fill: none;
    stroke-width: 3.5;
    -webkit-animation-name: preloader;
    animation-name: preloader;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-transform-origin: 170px 170px;
    transform-origin: 170px 170px;
    will-change: transform;
}

circle:nth-of-type(1) {
    stroke-dasharray: 550;
}

circle:nth-of-type(2) {
    stroke-dasharray: 500;
}

circle:nth-of-type(3) {
    stroke-dasharray: 450;
}

circle:nth-of-type(4) {
    stroke-dasharray: 300;
}

circle:nth-of-type(1) {
    -webkit-animation-delay: -0.15s;
    animation-delay: -0.15s;
}

circle:nth-of-type(2) {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}

circle:nth-of-type(3) {
    -webkit-animation-delay: -0.45s;
    -moz-animation-delay: -0.45s;
    animation-delay: -0.45s;
}

circle:nth-of-type(4) {
    -webkit-animation-delay: -0.6s;
    -moz-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

@-webkit-keyframes preloader {
    50% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes preloader {
    50% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/*BANNER*/
.banner {
    position: relative;
    background: url(/img/homepage/banner.jpg);
    min-height: 100vh;
    background-size: cover;
    background-position: bottom;
    padding: 280px 0 100px;
}

.banner h1 {
    font-size: 3em;
}

.banner p {
    font-size: 1.3em;
}

.banner button {
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;

}

/*XS*/
@media (max-width:576px) {
    .banner {
        padding: 120px 0 0px;
    }

    .banner h1 {
        font-size: 1.4em;
    }

    .banner p {
        font-size: 1.3em;
    }
}

/*BG NAVBAR*/
@media (max-width: 992px) {
    .navbar-collapse {
        background-color: #6eb030;
        padding: 0;
    }
}

/*HOMEPAGE PRODUCTS*/
.prod-btn {
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
}

.prod-title {
    letter-spacing: 3px;
}

/*ICONS SQUARE*/
.bs-icon {
    display: inline-block;
    border-radius: 50%;
    box-shadow: 0px 0px 2px #888;
    padding: 0.5em 0.8em;
}

/*BANNER*/
.about-us {
    position: relative;
    background: url(/img/homepage/about-us.jpg);
    min-height: 80vh;
    background-size: cover;
    background-position: center;
}
/*SOLUTION*/
.solution {
    position: relative;
    background: url(/img/homepage/solution.jpg);
    min-height: 80vh;
    background-size: cover;
    background-position: center;
}

.icon-solution{
    font-size: 60px;
}


/*PRODUCTS PAGE*/
.img-prod{
    height: 300px;
    width: 100%;
    object-fit: cover;
}

.prod-desc{
    white-space: pre;
}

/*BANNER*/
.banner-prod {
    position: relative;
    background: url(/img/homepage/banner.jpg);
    min-height: 10vh;
    background-size: cover;
    background-position: bottom;
    padding: 150px 0 100px;
}

.banner-prod h1 {
    font-size: 3em;
}

.banner-prod p {
    font-size: 1.3em;
}

/*SERVICE*/
.service-border{
    border-radius: 15px;
}

.service-icon{
    font-size: 100px;
}

.text-grey{
    color: #888;
}

.banner-serv {
    position: relative;
    background: url(/img/service/service.jpg);
    min-height: 10vh;
    background-size: cover;
    background-position: bottom;
    padding: 150px 0 100px;
}

.banner-serv h1 {
    font-size: 3em;
}

.banner-serv p {
    font-size: 1.3em;
}

/*ABOUT US*/
.banner-about-us{
    position: relative;
    min-height: 100vh;
    background:
        /* top, transparent black, faked with gradient */
        linear-gradient(
          rgba(0, 0, 0, 0.5),
          rgba(0, 0, 0, 0.5)
        ),
        /* bottom, image */
        url(/img/about-us/about-us-banner.jpeg);
    background-size: cover;
    background-position: bottom;
    padding: 150px 0 100px;
}
.about-us-img{
    max-height:65vh
}

/*CONTACT US*/
.contact-us-input{
    border-radius: 12px;
}