:root {
    --grey--dark: #BABDC6;
    --grey: #EDEEF2;
    --purple: #2D23B4;
    --gold: #f5f611;
    --black: #000;
    --yellow: #f5f611;
    --blue: #006ad5;
    --greener: #02ca1d;
    --black: #000;
}

body,
html {
    overflow-x: hidden;
    background: var(--grey);
}

/* navigation */
/* navigation styles */
.navbar {
    background: #ffffff;
    border: none;
    box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.04);
    margin: 0 !important;
}

.navbar .navbar-brand {
    color: #505050;
    font-size: 26px;
    font-weight: bold;
    line-height: 40px;
    margin: 0;
}

.navbar li {
    margin: 15px 20px;
}

.navbar .navbar-nav li a {
    color: #606060;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.6px;
    line-height: 45px;
    padding: 0;
    transition: all 0.4s ease-in-out;
}

.navbar .navbar-nav>li a:hover {
    color: #63c6ae !important;
}

.navbar .navbar-nav>li>a:hover,
.navbar .navbar-nav>li>a:focus {
    color: #02ca1d;
    background-color: transparent;
}

.navbar .navbar-nav>.active>a,
.navbar .navbar-nav>.active>a:hover,
.navbar .navbar-nav>.active>a:focus {
    border-bottom: 2px solid var(--gold);
    background-color: transparent;
}

.navbar .navbar-toggle {
    border: none;
    padding-top: 10px;
}

.navbar .navbar-toggle .icon-bar {
    background: #63c6ae;
    border-color: transparent;
}

.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
    background-color: transparent;
}

a {
    text-decoration: none;
}

.icon-bar {
    background: #63c6ae;
}

/* buttons */
.btn__primary {
    background-color: #02ca1d !important;
    color: white !important;
    border-radius: 0px;


}

.btn__mondeal {

    border-radius: 0px;
}

/* typography */

.section__header {
    font-size: 2.5rem;
    font-weight: bold;
    margin-top: 60px;
    margin-bottom: 30px;
}

.section__header--sub {
    font-size: 1.2rem;
}


* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}


/* miscellaneous */
.box__shadow {
    border-color: #c0c6ce;
    box-shadow: 0 20px 36px 0 rgba(93, 124, 181, .25), 0 5px 12px -3px rgba(0, 0, 0, .2)
}

.mondeal__card {
    color: black !important;

}

.section__title--yellow {
    z-index: 6;
    background-color: var(--yellow);
    font-family: Montserrat;
    text-transform: uppercase;
    visibility: visible;
    text-align: inherit;
    line-height: 10px;
    letter-spacing: 1px;
    font-weight: 700;
    font-size: 2rem;
    border-color: rgb(133, 133, 133);
    border-style: none;
    margin: 0px;
    border-radius: 0px;
    padding: 23px 5px;
    color: rgb(0, 0, 0);
    text-decoration: none;
    white-space: nowrap;
    width: auto;
    height: auto;
    /* min-height: 0px;
    min-width: 0px; */
    max-height: none;
    max-width: none;
    opacity: 1;
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform-origin: 50% 50% 0px;
}

.section__title--purple {
    z-index: 6;
    background-color: var(--blue);
    font-family: Montserrat;
    text-transform: uppercase;
    visibility: visible;
    text-align: inherit;
    line-height: auto;
    letter-spacing: 1px;
    font-weight: 700;
    font-size: 1.5rem;
    border-color: rgb(133, 133, 133);
    border-style: none;
    margin: 0px;
    border-radius: 0px;
    padding: 23px 5px;
    color: white !important;
    text-decoration: none;
    white-space: wrap;
    width: auto;
    height: auto;
    /* min-height: 0px; */
    /* min-width: 0px; */
    max-height: none;
    max-width: none;
    opacity: 1;
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform-origin: 50% 50% 0px;
}


.section__title--gold {
    z-index: 6;
    background-color: var(--gold);
    font-family: Montserrat;
    text-transform: uppercase;
    visibility: visible;
    text-align: inherit;
    line-height: auto;
    letter-spacing: 1px;
    font-weight: 700;
    font-size: 1.7rem;
    border-color: rgb(133, 133, 133);
    border-style: none;
    margin: 0px;
    border-radius: 0px;
    padding: 23px 5px;
    color: black !important;
    text-decoration: none;
    white-space: wrap;
    width: auto;
    height: auto;
    /* min-height: 0px; */
    /* min-width: 0px; */
    max-height: none;
    max-width: none;
    opacity: 1;
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    transform-origin: 50% 50% 0px;
}

/*navigation*/

.icon-bar {
    background: #000000;
}

ul,
li {
    list-style: none;
}

.container ul, .container li{
    list-style: square;
}

.navbar {

    border-radius: 0;
}

.footer-list li, .footer-list ul{
    list-style: none !important;
}


/*mavbar*/
.navbar.scrolled {
    background: #fff !important;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
    margin-top: 0px;
}

/*======== loader*/

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1400;
    background: white;
}

#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #9370DB;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #BA55D3;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}

#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #FF00FF;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


.navbar {
    background: #e9e9e9;
    margin-top: 40px;
}


/* jumbotrons */

.jumbotron {
    margin-top: 100px;
}

/*sections*/

.margin__top {
    margin-top: 30px;
}

/*links*/

a {
    text-decoration: none !important;
}

/*hero backgrounds*/
#category__hero,
#product__hero,
#services__hero {
    background-color: #bbaa99;
/*    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 160 80'%3E%3Cg fill='%23B0A090' %3E%3Cpolygon points='0 10 0 0 10 0'/%3E%3Cpolygon points='0 40 0 30 10 30'/%3E%3Cpolygon points='0 30 0 20 10 20'/%3E%3Cpolygon points='0 70 0 60 10 60'/%3E%3Cpolygon points='0 80 0 70 10 70'/%3E%3Cpolygon points='50 80 50 70 60 70'/%3E%3Cpolygon points='10 20 10 10 20 10'/%3E%3Cpolygon points='10 40 10 30 20 30'/%3E%3Cpolygon points='20 10 20 0 30 0'/%3E%3Cpolygon points='10 10 10 0 20 0'/%3E%3Cpolygon points='30 20 30 10 40 10'/%3E%3Cpolygon points='20 20 20 40 40 20'/%3E%3Cpolygon points='40 10 40 0 50 0'/%3E%3Cpolygon points='40 20 40 10 50 10'/%3E%3Cpolygon points='40 40 40 30 50 30'/%3E%3Cpolygon points='30 40 30 30 40 30'/%3E%3Cpolygon points='40 60 40 50 50 50'/%3E%3Cpolygon points='50 30 50 20 60 20'/%3E%3Cpolygon points='40 60 40 80 60 60'/%3E%3Cpolygon points='50 40 50 60 70 40'/%3E%3Cpolygon points='60 0 60 20 80 0'/%3E%3Cpolygon points='70 30 70 20 80 20'/%3E%3Cpolygon points='70 40 70 30 80 30'/%3E%3Cpolygon points='60 60 60 80 80 60'/%3E%3Cpolygon points='80 10 80 0 90 0'/%3E%3Cpolygon points='70 40 70 60 90 40'/%3E%3Cpolygon points='80 60 80 50 90 50'/%3E%3Cpolygon points='60 30 60 20 70 20'/%3E%3Cpolygon points='80 70 80 80 90 80 100 70'/%3E%3Cpolygon points='80 10 80 40 110 10'/%3E%3Cpolygon points='110 40 110 30 120 30'/%3E%3Cpolygon points='90 40 90 70 120 40'/%3E%3Cpolygon points='10 50 10 80 40 50'/%3E%3Cpolygon points='110 60 110 50 120 50'/%3E%3Cpolygon points='100 60 100 80 120 60'/%3E%3Cpolygon points='110 0 110 20 130 0'/%3E%3Cpolygon points='120 30 120 20 130 20'/%3E%3Cpolygon points='130 10 130 0 140 0'/%3E%3Cpolygon points='130 30 130 20 140 20'/%3E%3Cpolygon points='120 40 120 30 130 30'/%3E%3Cpolygon points='130 50 130 40 140 40'/%3E%3Cpolygon points='120 50 120 70 140 50'/%3E%3Cpolygon points='110 70 110 80 130 80 140 70'/%3E%3Cpolygon points='140 10 140 0 150 0'/%3E%3Cpolygon points='140 20 140 10 150 10'/%3E%3Cpolygon points='140 40 140 30 150 30'/%3E%3Cpolygon points='140 50 140 40 150 40'/%3E%3Cpolygon points='140 70 140 60 150 60'/%3E%3Cpolygon points='150 20 150 40 160 30 160 20'/%3E%3Cpolygon points='150 60 150 50 160 50'/%3E%3Cpolygon points='140 70 140 80 150 80 160 70'/%3E%3C/g%3E%3C/svg%3E");  */  
background: url("../images/merbak_modeal_banner.png") no-repeat;
background-size: cover;
}


#home__hero {

    background: url('http://s7d2.scene7.com/is/image/Caterpillar/CM20200615-b6207-ccaba') no-repeat;
    background-size: cover;
    height: 80vh;
}


/*ribbon*/

.ribbon {
    position: absolute;
    display: block;
    top: -4px;
    right: -4px;
    width: 110px;
    height: 110px;
    overflow: hidden;
    text-transform: uppercase;
    font-famiyl: "Montserrat-Bold"
}

.ribbon .label {
    position: relative;
    display: block;
    left: -10px;
    top: 23px;
    width: 158px;
    padding: 10px 0;
    font-size: 13px;
    text-align: center;
    color: black;
    background-color: #FFDF4E;
    -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    -ms-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    -webkit-transform: rotate(45deg) translate3d(0, 0, 0);
    -moz-transform: rotate(45deg) translate3d(0, 0, 0);
    -ms-transform: rotate(45deg) translate3d(0, 0, 0);
    transform: rotate(45deg) translate3d(0, 0, 0);
}

.ribbon .label:before,
.ribbon .label:after {
    content: '';
    position: absolute;
    bottom: -4px;
    border-top: 4px solid #a71c26;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.ribbon .label:before {
    left: 0;
}

.ribbon .label:after {
    right: 0;
}



/*cards*/

#intro .card {
    border-radius: 10px;
    box-shadow: 0px 3px 6px var(--grey);
}

/*about us*/

#about__us {
    margin-top: 100px;
}

.about__img:before {
    content: " ";
    background: #FDB900;
    position: absolute;
    height: calc(100% - 120px);
    width: 92%;
    top: 120px;
    right: 62px;
    z-index: -1;
}

/* services */
#services .section__header--sub {
    color: #000000;
}


#services .card {
    border-radius: 0px !important;
    height: 200px;
}


/* safety */

#safety .box:nth-of-type(2) {
    color: white;
}

/* round ball */
.round__ball {
    height: 15px;
    width: 15px;
    border-radius: 50%;
    display: inline-block;
    background: var(--purple);
    margin-left: 5px;
    margin-right: 5px;
}

/* custom cards */

.card-custom {
    overflow: hidden;
    min-height: 250px;
    box-shadow: 0 0 15px rgba(10, 10, 10, 0.3);
}

.card-custom-img {
    height: 200px;
    min-height: 200px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-color: inherit;
}

/* First border-left-width setting is a fallback */
.card-custom-img::after {
    position: absolute;
    content: '';
    top: 161px;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-top-width: 40px;
    border-right-width: 0;
    border-bottom-width: 0;
    border-left-width: 545px;
    border-left-width: calc(575px - 5vw);
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: inherit;
}

.card-custom-avatar img {
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(10, 10, 10, 0.3);
    position: absolute;
    top: 100px;
    left: 1.25rem;
    width: 100px;
    height: 100px;
}


/* footer*/
footer {
    background: #000;
    color: white;
    padding: 20px;
}

footer a {
    font-weight: bolder;
    color: white;
}

/* about */
.about__page .card,
.services__page .card {
    height: 250px;
    background: url(https://images.unsplash.com/photo-1578575437130-527eed3abbec?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60) no-repeat;
    background-size: cover;
    box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
}


#services .card {
    height: 250px;
    background: url(https://images.unsplash.com/photo-1585637850919-66f56fe273c9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60) no-repeat;
    background-size: cover;
    box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
}

.page__category .card {
    height: 250px;
    background: url(https://images.unsplash.com/photo-1585637850919-66f56fe273c9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60) no-repeat;
    background-size: cover;
    box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
}


#services .card .section__header--sub {
    color: white;
    font-size: 1.8rem
}

.about__page .card .section__header {
    color: white
}

.page__category .card .section__header {
    color: white !important;
    text-align: center;
    padding-top: 50px;
}

.services__page .card .section__header {
    color: white
}

/* contact page */
.contact__page .contact__info,
.contact__page a {
    font-weight: bold;
    color: #000;

}

.contact__page .contact__info li {
    margin-top: 10px;
}

.contact__page label {
    font-weight: bolder;
}


.best_in_business a {
    color: white;
}

.best_in_business a:hover {
    color: white;
    font-weight: bolder;
}


#products .card {
    height: 250px;
    background: url("../images/products_background.jpeg") no-repeat;
    background-size: cover;
    box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);
}

#products .card .section__header {
    color: white;
    font-size: 2rem !important
}

#products .card{
    overflow: hidden;
}
#products .card .section__header a{
    color: white;
}