/* General CSS */
*{font-family: 'Sailec';}
html { -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased }
a, abbr, acronym, address, b, bdo, big, blockquote, body, br, button, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, hr, html, i, iframe, img, ins, kbd, legend, li, map, object, ol, p, pre, q, samp, small, span, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, ul, var { margin: 0; padding: 0; border: none }
a, input, select, textarea { outline: 0; margin: 0; padding: 0 }

.btn,a{-webkit-transition:all .3s ease 0s;-moz-transition:all .3s ease 0s;-o-transition:all .3s ease 0s;transition:all .3s ease 0s;}
.btn.focus,.btn:focus,.btn:active,.btn:hover,a:focus,a:hover,button:focus,input:focus,textarea:focus{text-decoration:none;outline:0;color:inherit;text-decoration:none!important;transition:all .3s ease 0s; box-shadow: none !important;}
a{text-decoration: none;}
/* Colors CSS */


/* Typography CSS */


/* Button CSS */
.btn-primary {background-color: #0D57A6 !important;border-color: #0D57A6 !important;color: #fff !important;border-radius: 0 !important;padding: 24px 40px !important;font-size: 18px !important;line-height: 24px !important;font-family: 'Basis Grotesque Mono Pro'; font-weight: 700 !important;}
.btn-primary:hover, .btn-primary:focus {background-color: #000 !important;border-color: #000 !important; color: #fff !important;}
html {
    height: -webkit-fill-available;
  }
/* Global CSS */

.container {max-width: 1600px;}
h1, h2 {font-family: 'Antique Olive Std';}
h1, .h1 {font-size: 89px; line-height: 89px; color: #000;}
h2 {font-size: 76px; line-height: 76px; color: #000;}
p {font-size: 18px; color: #000;line-height: 36px;}
.section {padding: 150px 0;}

/* Homepage CSS */
header {position: fixed;top: 0;width: 100%;padding: 12px 0;background: #231F20;z-index: 9;}
/* .fixed {position: fixed;top: 0;padding: 12px 0;z-index: 9;bottom: auto;opacity: 1;} */
.home-hero-banner {
    /* height: 100%; */
    z-index: 99;
    height: calc(var(--vh, 1vh) * 100);
    padding: 100px 0;position: relative;background-repeat: no-repeat;background-size: cover;}
.home-hero-banner::before {content: "";background: url(../images/logo-icon.svg);width: 455px;height: 100%;position: absolute;right: 130px;background-repeat: no-repeat;background-size: contain;z-index: 2;}
.home-hero-banner .container {
    position: relative;
    z-index: 2;
}
.banner-top-text {display: flex;flex-direction: column;justify-content: space-between;}
.banner-top-text h3 {font-size: 32px;line-height: 42px;max-width: 450px;color: #fff;font-weight: 500;}
.banner-top-text img {max-width: 780px;}
.bottle-section {padding: 100px 0;}
.bottle-section h1 {margin-bottom: 60px;}
.bottle-section p {max-width: 530px;}
.products-section h3 {font-size: 24px;max-width: 300px;}
.product-wrap img {width: 100%;margin-bottom: 30px;}
.product-wrap h4 {text-transform: uppercase;font-size: 20px;line-height: 24px;font-family: 'Basis Grotesque Mono Pro'; font-weight: 700;}
.products-section .container, .dispensing-section .container{margin-left: auto;margin-right: 0;justify-content: flex-start;max-width: calc(50vw + 790px);}
.expert-section h5, .dispensing-section h5 {color: #DB6D5B;font-size: 24px;line-height: 30px;}
.expert-section p {max-width: 450px;}
.expert-section h2 {margin: 36px 0;}
.dispensing-section h5 {color: #51B18D;}
.Why-cleanslate-section img, .Why-cleanslate-section h2 {margin-bottom: 60px;}
.Why-cleanslate-section p {max-width: 576px;margin: 0 auto;}
.our-promise-section .container {margin-left: auto;margin-right: auto;justify-content: flex-start;max-width: calc(50vw + 50vw );padding: 0;}
.our-promise-section .container .row {margin: 0;}
.our-promise-section h5 {color: #fff;text-transform: uppercase;font-family: 'Basis Grotesque Mono Pro';font-weight: 700;margin-bottom: 55px;}
.our-promise-section .h1 {color: #33BDDD;margin-bottom: 80px;}
.promise-content {margin-left: 125px;padding: 230px 0;}
.promise-content p, .promise-content li {font-size: 16px;line-height: 24px;color: #fff;}
.promise-content .img-wrap {margin-left: -50px;}
.promise-content li {display: flex;align-items: center;margin-top: 50px;}
.promise-content li span {max-width: 90px;display: inline-block;margin-left: 20px;}
.inquire-section p {max-width: 315px;margin-top: 25px;}
.inquire-section label {font-size: 23px;line-height: 44px;color: #000000;font-weight: 700;margin-bottom: 0;}
.inquire-section .form-control {font-size: 23px;line-height: 29px;background: transparent;border: none !important;padding: 0;height: auto !important;}
.inquire-section .form-control:hover {border-color: transparent; box-shadow: none;}
.inquire-section form .row.border-btm {position: relative;}
.inquire-section form .row.border-btm:before {background: #FFFFFF;content: "";position: absolute;bottom: -5px;height: 28px;width: 100%;z-index: 0;}
.inquire-section form .row.border-btm div {position: relative;}
.inquire-section button {min-width: 318px;margin-top: 42px;height: auto !important;}
.footer {padding: 100px 0;}
footer p {color: #fff;max-width: 650px;}
footer p.copyright {font-size: 16px;color: rgba(255,255,255,0.39);margin-top: 85px;}
.image-bg{height: 100.05%;position: absolute;left: 0;width: 50%;top: -1px; background-size: cover;background-repeat: no-repeat;background-position: center;}
.promise-content h5 {
    font-size: 18px;
}
.dispensing-section .dispensing-content {
    padding-left: 0;
}
.bottle-section .text-wrapper {max-width: 530px;}
.bottle-section .text-wrapper p {
    display: contents;
}
/* Innerpages CSS */

.form-all {
    background: transparent !important;
    max-width: 100% !important;
    box-shadow: none !important;
    border-radius: 0 !important;margin: 0 !important;
}
.form-buttons-wrapper {
    padding: 0 !important;
    border-top: none !important;
}
.inquire-section textarea.form-control {
    height: 29px !important;
    min-height: 29px !important;
    resize: none;
}
.form-required {
    margin-left: 4px !important;
}


.video-bg {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.video-bg video#hero-bannerVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}