@import url("https://fonts.cdnfonts.com/css/myriad-pro");
@import url("https://fonts.cdnfonts.com/css/helvetica-255");
@import url("https://fonts.cdnfonts.com/css/dolce-vita-heavy");
@import url("https://fonts.cdnfonts.com/css/applied-sans-pro");
@import url("https://fonts.cdnfonts.com/css/bank-gothic");

:root {
    scroll-behavior: smooth;
}
* {
    -webkit-tap-highlight-color: transparent;
}
input {
    border-radius: 0 !important;
}

/*@media (min-width: 992px) {
    .container {
        max-width: 1400px;
    }
}

!* extra large devices *!
@media screen and (min-width: 1800px) {
    .container {
        max-width: 1600px;
    }
}*/

/* @media only screen and (min-width : 992px) {

    .container {
        width: 1500px;
    }

} */

/* general styling */

.roundCorner {
    border-radius: 20px;
}

.innerShadow {
    box-shadow: inset 1px 1px 3px 0 rgba(0, 0, 0, 0.15) !important;
}

.yShadow {
    box-shadow: 0 8px 6px -6px #0000000d !important;
}

.vcenter-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

a:link,
a:visited,
a:hover,
a:active {
    text-decoration: none;
}

/* end of general styling */

/* Fonts */
.boldFont {
    font-weight: bold;
}

.yellowtail {
    font-family: "Yellowtail", cursive;
    font-size: 0.6em;
}

.myriadPro {
    font-family: "Myriad Pro", sans-serif;
}

.montserratrRegular {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 1em;
}

.montserratBold {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
}

.montserratSemiBold {
    font-family: "Montserrat", sans-serif;
    font-family: 600;
}

.montserratExtraBold {
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
}

.montserratItalicExtraBold {
    font-family: "Montserrat", sans-serif;
    font-style: italic;
    font-weight: 800;
}

.raleway {
    font-family: "Raleway", sans-serif;
    font-weight: 400;
}

.ralewayBold {
    font-family: "Raleway", sans-serif;
    font-weight: 700;
}

.OurvisionBold {
    font-weight: 700;
}

.ralewayExtraBold {
    font-family: "Raleway", sans-serif;
    font-weight: 800;
}

.DIN {
    font-family: "Ropa Sans", sans-serif;
}

.helvetica {
    font-family: "Helvetica", sans-serif;
}

.russoOne {
    font-family: "Russo One", sans-serif;
}

.dolceVitaHeavy {
    font-family: "Dolce Vita Heavy", sans-serif;
}

/* end of fonts */

/* Colors */
.mainColorFont {
    color: #f68423;
}

.mainColorBack {
    background-color: #f68423;
}

.secondaryColorFontLight {
    color: #0075cf;
}

.secondaryColorFont {
    color: #06528b;
}

.secondaryColorBack {
    background-color: #0075cf;
}

.greyBackground {
    background-color: #ececec;
}

.oserenGreyBackground {
    background-color: #f6f6f6;
}

.greyfont {
    color: #8c8c8c;
}

/* end of colors */

/* buttons */
.orangeButton {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f68423;
    width: 200px;
    height: 50px;
    font-size: 13px;
    letter-spacing: 1px;
    border-radius: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: white;
    transition: all 0.3s;
}

.orangeButton:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #003266;
    width: 200px;
    height: 50px;
    font-size: 13px;
    letter-spacing: 1px;
    border-radius: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: white;
}

.secondButton {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #003266;
    width: 200px;
    height: 50px;
    font-size: 12px;
    letter-spacing: 1px;
    border-radius: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: white;
    transition: all 0.3s;
}

.secondButton:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f68423;
    width: 200px;
    height: 50px;
    font-size: 12px;
    letter-spacing: 1px;
    border-radius: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: white;
}

.blueButton {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0075cf;
    width: 200px;
    height: 50px;
    font-size: 12px;
    letter-spacing: 1px;
    border-radius: 0;
    border: 2px solid white;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    transition: all 0.3s;
}

.blueButton:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f68423;
    width: 200px;
    height: 50px;
    font-size: 12px;
    font-family: "Montserrat", sans-serif;
    letter-spacing: 1px;
    border-radius: 0;
    font-weight: 600;
}

/* End Of Buttons */

/* General Section */
/* topbar */
.topbar {
    background: #003266;
    height: 40px;
    font-size: 10px;
    color: #fff;
    padding: 0;
}
@media (min-width: 1200px) and (max-width: 1439px) {
    .topbar {
        font-size: 11px;
    }
}

@media (992px <=width <=1200px) {
    .topbar {
        font-size: 8px;
    }
}

.topbar .contact-info i {
    font-style: normal;
    color: #fff;
    line-height: 0;
}

.topbar .contact-info i a,
.topbar .contact-info i span {
    padding-left: 5px;
    color: #fff;
}

@media (max-width: 992px) {
    .topbar .contact-info i a,
    .topbar .contact-info i span {
        font-size: 11px;
        text-decoration: none;
    }
}

.topbar .contact-info i a {
    line-height: 0;
    text-decoration: none;
    letter-spacing: 2px;
}

@media (max-width: 992px) {
    .topbar .contact-info i a {
        letter-spacing: 0.4px;
    }
}

.topbar .contact-info i a:hover {
    color: #fff;
    text-decoration: underline;
    text-decoration: none;
}

.topbar .social-links a {
    color: rgba(255, 255, 255, 0.7);
    line-height: 0;
    margin-left: 20px;
    text-decoration: none;
}

.topbar .social-links a:hover {
    color: #fff;
    text-decoration: none;
}

/* End of topbar */
/* navbar */

#navbar .orangeButton {
    background-color: #f68423;
    width: 250px;
    height: 35px;
    font-size: 11px;
    letter-spacing: 1px;
    border-radius: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    transition: all 0.3s;
}

#navbar .orangeButton:hover {
    background-color: #003266;
    width: 250px;
    height: 35px;
    font-size: 11px;
    letter-spacing: 1px;
    border-radius: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
}

#navbar li {
    display: inline-block;
    position: relative;
}

#navbar li::after {
    content: "";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #f68423;
    transform-origin: bottom center;
    transition: transform 0.25s ease-out;
}

#navbar li:hover::after {
    transform: scaleX(1);
    transform-origin: bottom center;
}

#brand-logo {
    height: 2.5em;
}

@media (992px <=width <=1300px) {
    #navbar li {
        font-size: 11px;
    }
}

@media (992px <=width <=1200px) {
    #navbar input {
        width: 150px;
    }

    #navbar .orangeButton {
        width: 150px;
    }

    #brand-logo {
        height: 1.7em;
    }
}

@media (min-width: 1300px) and (max-width: 1530px) {
    #navbar li {
        font-size: 12px;
    }
}

@media (min-width: 1200px) and (max-width: 1439px) {
    #navbar .orangeButton {
        width: auto;
        padding-left: 15px;
        padding-right: 15px;
    }

    #navbar .orangeButton:hover {
        width: auto;
    }
    #navbar li {
        font-size: 13px !important;
    }

    #navbar form {
        width: 300px;
    }

    #navbar form .form-control {
        width: 75%;
    }
}

@media (max-width: 992px) {
    #navbar {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    #navbar li {
        font-size: 15px;
    }
}

/* end of navbar */

/* fordistributer */
#fordistributer {
    min-height: 40vh;
    background-color: #eeeeee;
}

#fordistributer p {
    font-size: 18px;
    color: #4b4f58;
}

#fordistributer a {
    white-space: nowrap;
    width: fit-content;
}

#fordistributer .secondButton {
    width: 264.5px;
}

@media (min-width: 992px) {
    #fordistributer h1 {
        font-size: 60px;
    }
}

@media (992px <=width <=1200px) {
    #fordistributer h1 {
        font-size: 40px;
    }

    #fordistributer p {
        font-size: 13px;
    }
}

@media (max-width: 992px) {
    #fordistributer p {
        font-size: 15px;
    }
}

/* end of fordistributer */

/* fourvideos */
#fourvideos {
    background-color: #4343438f;
}

#fourvideos .pb-video-container {
    padding-top: 20px;
    color: white;
}

#fourvideos .pb-video {
    padding: 10px;
}

#fourvideos .pb-video:hover {
    background: #2c3e50;
    color: white;
}

#fourvideos .pb-video-frame {
    transition: width 0.3s, height 0.3s;
}

@media (min-width: 992px) {
    #fourvideos .pb-video-frame:hover {
        height: 300px;
    }
}

#fourvideos .pb-row {
    margin-bottom: 10px;
}

.color-video {
    background-color: #d7e7fa !important;
}

.owl-nav .owl-prev,
.owl-next {
    transition: all 0.2s ease-in;
}

@media (min-width: 992px) {
    .owl-nav .owl-prev {
        position: absolute;
        height: 100%;
        width: 3em;
        top: -15px;
        left: -50px;
    }

    .owl-nav .owl-next {
        position: absolute;
        height: 100%;
        width: 3em;
        top: -15px;
        right: -50px;
    }
}

@media (992px <=width <=1200px) {
    .owl-nav .owl-prev {
        position: absolute;
        height: 100%;
        width: 3em;
        top: -15px;
        left: -30px;
    }

    .owl-nav .owl-next {
        position: absolute;
        height: 100%;
        width: 3em;
        top: -15px;
        right: -30px;
    }
}

@media (max-width: 992px) {
    .owl-nav .owl-prev {
        position: absolute;
        height: 100%;
        width: 2em;
        top: -5px;
        left: -6px;
    }

    .owl-nav .owl-next {
        position: absolute;
        height: 100%;
        width: 2em;
        top: -5px;
        right: -6px;
    }
}

/* end of fourvideos */

/* stayuptodate */
#stayuptodate {
    background-size: cover;
    background-image: url("../images/banners/nanopatternbanner.png");
}

#stayuptodate sup {
    margin-left: -7px;
}

#stayuptodate .stay-min-height {
    min-height: 60vh;
}

@media (min-width: 1200px) {
    #stayuptodate h1 {
        font-size: 52px;
    }

    #stayuptodate h5 {
        font-size: 25px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    #stayuptodate h1 {
        font-size: 42px;
    }

    #stayuptodate h5 {
        font-size: 20px;
    }
}

@media (max-width: 992px) {
    #stayuptodate h1 {
        font-size: 32px;
    }

    #stayuptodate h5 {
        font-size: 25px;
    }

    #stayuptodate label {
        font-size: 20px;
    }
}

#stayuptodate label {
    margin-bottom: 2px;
}

/* end of stayuptodate */
/* splitbluebar */
.splitbluebar {
    background: linear-gradient(
        to top,
        #003872 0%,
        #003872 50%,
        #0055a0 50%,
        #0055a0 100%
    );
}

#splitbluebar h2 {
    font-size: 1.7em;
    margin-bottom: 0;
}

@media (min-width: 992px) {
    #splitbluebar h2 {
        margin-left: -30px;
        margin-bottom: 0;
    }
}

@media (992px <=width <=1200px) {
    #splitbluebar h2 {
        font-size: 20px;
    }
}

@media (max-width: 992px) {
    #splitbluebar h2 {
        font-size: 12px;
    }
}

/* end of splitbluebar */
/* footer */

#endfooter .logo-div {
    width: 8em;
    height: 8em;
    margin: auto;
    border: 3px solid white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#endfooter .footerLogo {
    width: 65%;
    overflow: visible;
}
/* @media (max-width: 991px) {
    #endfooter .footerLogo {
        height: 8em;
        padding: 1.6rem!important;
    }
} */

#endfooter .footerLogoAmzcom {
    height: 5em;
    border: 3px solid white;
    overflow: visible;
    border-radius: 10px;
}

#endfooter {
    background-color: #2d2d2d;
    background-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.95),
        30%,
        rgba(0, 0, 0, 0)
    );
    color: #a0a0a0;
}

#endfooter .container .row a h6 {
    color: #a0a0a0;
    transition: 0.3s;
}
#endfooter .container .row a h6:hover {
    color: #f68423;
}

#endfooter .privaceAndRights p {
    font-size: 10px;
}

@media (992px <=width <=1200px) {
    #endfooter .footerLogoAmzcom {
        height: 4em;
    }

    #endfooter .address {
        font-size: 12px;
    }

    #endfooter h6 {
        font-size: 10px;
    }

    #endfooter h5 {
        font-size: 18px;
    }
}

@media (max-width: 992px) {
    #endfooter .privaceAndRights p {
        font-size: 15px;
        text-align: center;
    }
}

/* end of footer */

/* scrol to top */
.scroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: -15px;
    z-index: 99999;
    background: #f68423;
    width: 44px;
    height: 44px;
    border-radius: 50px;
    transition: all 0.4s;
}

.scroll-top i {
    font-size: 24px;
    color: #fff;
    line-height: 0;
}

.scroll-top:hover {
    background: rgba(248, 90, 64, 0.8);
    color: #fff;
}

.scroll-top.active {
    visibility: visible;
    opacity: 1;
    bottom: 15px;
}

/* end of scrol to top */
/* End of General Section */

/* index Page */
/* nano index Navbar */
@media (min-width: 992px) {
    .nano .navbar-brand {
        position: absolute;
        top: -5px;
    }

    .nano #brand-logo {
        height: 100px;
        padding: 15px;
        border-radius: 10px;
        background-color: white;
        box-shadow: 0 8px 6px -6px #0000000d !important;
    }
}

@media (max-width: 992px) {
    .nano .navbar-brand {
        position: absolute;
        left: 10px;
        top: 10px;
        z-index: 1111;
    }

    .nano #brand-logo {
        height: 90px;
        padding: 15px;
        border-radius: 10px;
        background-color: white;
        box-shadow: 0 8px 6px -6px #0000000d !important;
    }
}
@media (max-width: 992px) {
    #navbarSupportedContent {
        position: fixed;
        top: 76px;
        right: 0;
        left: 0;
        z-index: 1000;
        overflow-y: auto;
        background-color: white;
        width: 90%;
        margin: auto;
    }
    #navbarSupportedContent .navbar-nav li {
        display: block;
        padding: 10px 20px;
        border-bottom: 1px solid #e2e2e2;
    }
    #navbarSupportedContent .navbar-nav li a {
        text-wrap: wrap;
    }
    #navbarSupportedContent .navbar-nav .dropdown a::after {
        position: absolute;
        right: 20px;
        top: 26px;
        font-size: 20px;
    }
    #navbarSupportedContent .navbar-nav .dropdown .dropdown-menu {
        border: none;
    }
    #navbarSupportedContent form {
        padding: 10px 20px;
    }
    #navbarSupportedContent form input {
        box-shadow: none !important;
    }
    #navbarSupportedContent form button.orangeButton {
        width: fit-content;
        height: 38px;
    }
}

/* overlay navbar */
.navbar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 999;
}

@media (max-width: 991px) {
    .navbar-overlay.show {
        display: block;
    }
}
/* overlay navbar */

/* nano index Navbar */
/* nano carousel */
@media (max-width: 991px) {
    .header-carousel {
        height: calc(100vh - 76px);
    }
    .header-carousel .carousel-item img {
        height: calc(100vh - 76px);
        object-fit: cover;
    }
}
/* nano carousel */
/* carouselBrandes */
#carouselBrandes {
    margin-bottom: 30px;
}

#carouselBrandes .carousel-item .card {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#carouselBrandes .carousel-item img {
    max-height: 300px;
    object-fit: cover;
}
@media (max-width: 424px) {
    #carouselBrandes .carousel-item .card {
        height: 300px;
    }
    #carouselBrandes .carousel-item img {
        max-height: 200px;
    }
}
@media (min-width: 425px) and (max-width: 991px) {
    #carouselBrandes .carousel-item .card {
        height: 400px;
    }
    #carouselBrandes .carousel-item img {
        max-height: 300px;
    }
}
@media (min-width: 992px) {
    #carouselBrandes .carousel-item .card {
        min-height: 400px;
    }
}

/* #carouselBrandes {
    margin-bottom: 30px;
}
@media (max-width: 424px) {
    #carouselBrandes .carousel-item .card {
        min-height: 300px;
    }
    #carouselBrandes .carousel-item img {
        max-height: 200px;
    }
}
@media (max-width: 991px) {
    #carouselBrandes .carousel-item .card {
        padding: 20px;
        min-height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #carouselBrandes .carousel-item img {
        object-fit: cover;
        max-height: 300px;
    }
} */

/* carouselBrandes */
/* nanoindexbanner */
.banner-img {
    position: relative;
}

#nanoindexbanner {
    background-size: cover;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url("../images/banners/nanoindexbanner.png");
    background-position: center;
    min-height: 75vh;
}

#nanoindexbanner h1 {
    font-size: 70px;
}

#nanoindexbanner h1 span {
    color: #ef8126;
}

#nanoindexbanner h1 span.montserratItalicExtraBold {
    color: white;
}

@media (min-width: 992px) {
    #nanoindexbanner {
        background-size: contain;
    }

    #nanoindexfloatingcolumn {
        position: absolute;
        top: 86%;
        width: 242px;
    }

    #nanoindexfloatingimg {
        padding: 1.5em;
        height: 12em;
    }
}

@media (992px <=width <=1200px) {
    #nanoindexbanner h1 {
        font-size: 50px;
    }

    #nanoindexfloatingcolumn {
        position: absolute;
        top: 85%;
        width: 180px;
    }

    #nanoindexfloatingimg {
        padding: 1.5em;
        height: 9em;
    }
}

@media (min-width: 1200px) and (max-width: 1439px) {
    #nanoindexfloatingcolumn {
        width: 215px;
    }

    #nanoindexfloatingimg {
        height: 10.5em;
        padding: 1.3em;
    }
}

@media (max-width: 992px) {
    #nanoindexbanner h1 {
        font-size: 40px;
        letter-spacing: 1px;
    }

    #nanoindexbanner {
        min-height: 80vh;
    }

    #nanoindexfloatingcolumn {
        position: absolute;
        top: 93%;
        width: 8.5em;
    }

    #nanoindexfloatingimg {
        padding: 1em 0.5em;
        height: 8em;
    }
    #nanoindexbanner sup {
        top: -1em;
        font-size: 20px;
        margin-left: 5px;
    }
}

/* end of nanoindexbanner */

/* circleoverlay */
.bg-overlay {
    /* background-repeat: no-repeat !important; */
    background-size: cover !important;
    background-position: center center !important;
    color: #fff;
    height: 18em;
    width: 18em;
    padding-top: 50px;
}

#circlesoverlay h1 {
    font-size: 70px;
}

@media (992px <=width <=1400px) {
    #circlesoverlay h1 {
        font-size: 50px;
    }

    .bg-overlay {
        height: 12em;
        width: 12em;
        padding-top: 50px;
    }
}

@media (max-width: 992px) {
    #circlesoverlay h1 {
        font-size: 25px;
        margin-top: 5rem !important;
    }

    #circlesoverlay h2 {
        font-size: 35px;
    }

    #circlesoverlay .nano-circles {
        padding-top: 1rem !important;
    }
}

@media (min-width: 1200px) and (max-width: 1439px) {
    .bg-overlay {
        height: 14em;
        width: 14em;
    }

    .bg-overlay h2 {
        font-size: 1.7rem;
    }

    #circlesoverlay .nano-circles {
        gap: 50px;
        justify-content: center !important;
    }
}

@media (767px <=width <=992px) {
    #circlesoverlay h1 {
        font-size: 80px;
    }

    .bg-overlay {
        height: 25em;
        width: 25em;
    }
}

/* oserenCirclesoverlay */
#oserenCirclesoverlay h1 {
    font-size: 80px;
}

@media (992px <=width <=1200px) {
    #oserenCirclesoverlay h1 {
        font-size: 55px;
    }

    #oserenCirclesoverlay h2 {
        font-size: 20px;
    }
}

@media (max-width: 992px) {
    #oserenCirclesoverlay h1 {
        font-size: 25px;
        margin-top: 2rem !important;
    }

    #oserenCirclesoverlay .circ {
        padding: 0.5rem !important;
    }

    #oserenCirclesoverlay h2 {
        font-size: 35px;
    }
}

@media (min-width: 1200px) and (max-width: 1439px) {
    #oserenCirclesoverlay .circ {
        justify-content: center !important;
        gap: 50px;
    }
}

/* end of oserenCirclesoverlay */
/* end of circle overlay */

/* yellowcar */

#yellowcar {
    background-size: cover;
    background-image: url("../images/bgShapes/nanoindexbackgroundshape.png");
    background-size: 45em 39em;
    background-repeat: no-repeat;
}

#yellowcar h5 {
    font-size: 23px;
}

#yellowcar h3 {
    font-size: 35px;
}

#yellowcar .H12 {
    font-size: 25px;
}

#yellowcar ul span {
    font-weight: 600;
    font-size: 90%;
}

#yellowcar #bullets li {
    list-style: none;
    font-size: 22px;
    letter-spacing: -0.7px;
}

#bullets li::before {
    content: "\2022";
    color: #f68423;
    font-weight: bolder;
    display: inline-block;
    width: 1em;
    margin-left: -1.1em;
}

@media (min-width: 992px) {
    #yellowcar .germanySection {
        padding-left: 50px;
    }

    #yellowcar ul {
        line-height: 33px;
        letter-spacing: 0.5px;
    }
}

@media (992px <=width <=1200px) {
    #yellowcar {
        background-size: 45em 39em;
    }

    #yellowcar h5 {
        font-size: 15px;
    }

    #yellowcar h3 {
        font-size: 20px;
    }

    #yellowcar .H12 {
        font-size: 17px;
    }

    #yellowcar ul {
        line-height: 22px;
    }

    #yellowcar #bullets li {
        font-size: 20px;
    }
}

#yellowcar .germany {
    background-size: cover;
    background-position: bottom right;
    background-image: url("../images/bgShapes/nanoindexgermanycopy.png");
    background-size: 15em 10em;
    background-repeat: no-repeat;
}

@media (max-width: 992px) {
    #yellowcar .germany {
        background-size: cover;
        background-position: bottom right;
        background-image: url("../images/bgShapes/nanoindexgermanycopy.png");
        background-size: 10em 8em;
        background-repeat: no-repeat;
    }

    #yellowcar h5 {
        font-size: 14px;
    }

    #yellowcar .H12 {
        font-size: 16px;
    }

    #yellowcar h3 {
        font-size: 20px;
    }

    #yellowcar ul span {
        font-weight: 600;
        font-size: 90%;
    }

    #yellowcar #bullets li {
        list-style: none;
        font-size: 17px;
    }

    #yellowcar {
        background-size: cover;
        background-image: url("../images/bgShapes/nanoindexbackgroundshape.png");
        background-size: 28em 21em;
        background-repeat: no-repeat;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    #yellowcar {
        background-size: 50em 35em;
    }
}
@media (min-width: 425px) and (max-width: 767px) {
    #yellowcar {
        background-size: 48em 30em;
    }
}
/* end of yellow-car */

/* squarecards */
#nanosquarecards p {
    line-height: 35px;
}

#nanosquarecards h3 {
    font-size: 38px;
}

#nanosquarecards #boat h3 {
    font-size: 32px;
}

#nanosquarecards #couch p {
    color: #4b4f58;
}

#couch .couchbackgroundimgcontainer {
    position: relative;
}

#couch {
    overflow: hidden;
}

#couch .couchbackgroundimg {
    height: 250px;
    position: absolute;
    right: -100px;
    bottom: -80px;
}

#nanosquarecards #couch a {
    color: #25282a !important;
}

#nanosquarecards #couch a:hover {
    color: white !important;
}

#nanosquarecards #couch {
    background-size: cover;
    background-position: bottom 2rem right 6rem;
    /*
    background-image: url("../images/bgShapes/nanoindexnanoshape.png");
    */
    background-size: 11.5em 13em;
    background-repeat: no-repeat;
}

@media (992px <=width <=1200px) {
    #nanosquarecards p {
        line-height: 25px;
    }

    #nanosquarecards h3 {
        font-size: 32px;
    }

    #nanosquarecards #boat h3 {
        font-size: 22px;
    }
}

@media (max-width: 992px) {
    #nanosquarecards #couch {
        background-size: cover;
        background-position: bottom right;
        background-image: url("../images/bgShapes/nanoindexnanoshape.png");
        background-size: 8em 8em;
        background-repeat: no-repeat;
    }

    #nanosquarecards h3 {
        font-size: 28px;
    }

    #nanosquarecards #boat h3 {
        font-size: 20px;
    }

    #nanosquarecards p {
        font-size: 15px;
        line-height: 22px;
    }
}

/* end of squarecards */

/* nanocertifiedfeatures */
#nanocertifiedfeatures {
    background-size: cover;
    background-image: url("../images/banners/nanoindexpatterngrey.png");
}

#nanocertifiedfeatures a {
    white-space: nowrap;
    width: fit-content;
}

.certifiedLogoBorder {
    border-style: none solid;
    border-color: #4b4f58;
}

@media (min-width: 992px) {
    #nanocertifiedfeatures {
        margin-top: 10em;
    }

    #nanocertifiedfeatures .row-min-height {
        min-height: 50vh;
    }
}

@media (max-width: 992px) {
    #nanocertifiedfeatures {
        margin-top: 5em;
    }

    #nanocertifiedfeatures h1 {
        font-size: 18px;
    }
}

/* end of nanocertifiedfeatures */
/* nanovision */
#nanovision {
    min-height: 40vh;
}

#nanovision p {
    font-size: 17px;
    color: #3a3a3a;
    letter-spacing: 1px;
}

@media (min-width: 992px) {
    #nanovision h1 {
        font-size: 50px;
    }
}

@media (max-width: 992px) {
    #nanovision h1 {
        font-size: 35px;
    }

    #nanovision p {
        font-size: 15px;
    }
}

/* end of nanovision */
/* blankgap */
#blankgap {
    min-height: 10vh;
    background-color: #eeeeee;
}

/* end of blankgap */

/*End of index Page */
/* Nano Branch Page */
/* nanobranchbannerr */
#nanobranchbanner {
    position: relative;
}
@media (max-width: 991px) {
    #nanobranchbanner {
        height: 470px;
        background-size: cover;
        background-position-x: 84%;
    }
}

#nanobranchbanner .carsText {
    position: absolute;
    top: 30%;
}

#nanobranchbanner .carsText h4 {
    font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
        "Helvetica Neue", sans-serif;
    font-size: 35px;
    font-weight: 700;
    color: white;
}

#nanobranchbanner .carsText h1 {
    font-size: 55px;
    color: #008aff;
}

#nanobranchbanner .carsText h5 {
    font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
        "Helvetica Neue", sans-serif;
    font-size: 35px;
    font-weight: 400;
    color: white;
}

#nanobranchbanner .fabricText {
    position: absolute;
    top: 20%;
}

#nanobranchbanner .fabricText h4 {
    font-family: "Bebas Neue", sans-serif;
    font-size: 98px;
    font-weight: 700;
    color: white;
    text-shadow: 2px 2px black;
    line-height: 60px;
}

#nanobranchbanner .fabricText h4 span {
    font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
        "Helvetica Neue", sans-serif;
}

#nanobranchbanner .fabricText h1 {
    font-family: "Bebas Neue", sans-serif;
    font-size: 165px;
    letter-spacing: 12px;
    text-shadow: 2px 2px;
    color: white;
    text-shadow: 2px 2px black;
    line-height: 160px;
}

#nanobranchbanner .fabricText p {
    font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
        "Helvetica Neue", sans-serif;
    font-size: 18px;
    color: white;
    text-shadow: 2px 2px black;
}

#nanobranchbanner .building {
    position: absolute;
    top: 20%;
}

#nanobranchbanner .building h4 {
    font-family: "Bebas Neue", sans-serif;
    font-size: 80px;
    font-weight: 700;
    color: white;
    text-shadow: 2px 2px black;
    line-height: 70px;
}

#nanobranchbanner .building h1 {
    font-family: "Bebas Neue", sans-serif;
    font-size: 100px;
    text-shadow: 2px 2px;
    color: #008aff;
    text-shadow: 2px 2px black;
    line-height: 95px;
}

#nanobranchbanner .building p {
    font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
        "Helvetica Neue", sans-serif;
    font-size: 15px;
    color: white;
    text-shadow: 2px 2px black;
}

#nanobranchbanner .yachtTexs {
    position: absolute;
    top: 20%;
}

#nanobranchbanner .yachtTexs h4 {
    font-family: "Open Sans", sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: white;
    text-shadow: 2px 2px black;
    line-height: 40px;
}

#nanobranchbanner .yachtTexs h1 {
    font-family: "Open Sans", sans-serif;
    font-weight: 800;
    font-size: 85px;
    text-shadow: 2px 2px;
    color: white;
    text-shadow: 2px 2px black;
    line-height: 80px;
    padding-bottom: 10px;
    border-bottom: 2px solid white;
}

#nanobranchbanner .yachtTexs p {
    font-family: "Open Sans", sans-serif;
    font-size: 20px;
    color: white;
    text-shadow: 2px 2px black;
}

#nanobranchbanner .antibacterial {
    position: absolute;
    top: 30%;
}

#nanobranchbanner .antibacterial h4 {
    font-size: 35px;
    font-weight: 700;
    color: white;
    text-shadow: 4px 4px black;
    line-height: 40px;
}

#nanobranchbanner .antibacterial h1 {
    font-family: "Open Sans", sans-serif;
    font-weight: 800;
    font-size: 50px;
    color: white;
    text-shadow: 4px 4px black;
    line-height: 80px;
}

#nanobranchbanner .antibacterial p {
    font-family: "Open Sans", sans-serif;
    font-size: 25px;
    color: white;
    line-height: 25px;
    text-shadow: 2px 2px black;
}

#nanobranchbanner .icon-box {
    padding: 50px 20px;
    overflow: hidden;
    background: white;
    box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease-in-out;
    border-radius: 10px;
    z-index: 1;
    height: 100%;
    width: 100%;
}

@media (min-width: 992px) {
    .carsmotobanner {
        height: 60vh;
        background-size: cover;
        background-repeat: no-repeat;
    }

    #nanobranchbanner .carsText {
        margin-left: 160px;
    }

    #nanobranchbanner .fabricText {
        margin-left: 280px;
    }

    #nanobranchbanner .yachtTexs {
        margin-left: 180px;
    }

    #nanobranchbanner .building {
        margin-left: 320px;
    }

    #nanobranchbanner .antibacterial {
        margin-left: 230px;
    }

    .xlTopMargin {
        padding-top: 280px;
    }

    #nanobranchbanner .icon-boxes {
        position: absolute;
        bottom: -240px;
        left: 0;
        right: 0;
    }

    #nanobranchbanner .icon-boxes:before {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(50% + 20px);
        background-color: #fff;
    }

    #nanobranchbanner .icon-boxes h1 {
        font-size: 50px;
    }

    #nanobranchbanner .secondButton {
        padding: 35px 0;
    }
}

@media (992px <=width <=1200px) {
    #nanobranchbanner .icon-boxes h1 {
        font-size: 40px;
    }

    .carsmotobanner {
        background-position: 30%;
    }
}

@media (max-width: 992px) {
    .carsmotobanner {
        height: 60vh;
        background-position: 95%;
    }

    #nanobranchbanner .icon-boxes {
        position: absolute;
        bottom: -375px;
        left: 0;
        right: 0;
    }

    #nanobranchbanner .carsText,
    .fabricText,
    .yachtTexs,
    .building,
    .antibacterial {
        margin-left: 20px;
    }

    #nanobranchbanner .carsText {
        margin: 0;
        padding: 20px;
        top: 20%;
    }

    #nanobranchbanner .carsText h4 {
        font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
            "Helvetica Neue", sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: white;
    }

    #nanobranchbanner .carsText h1 {
        font-size: 40px;
        color: #008aff;
        text-align: left;
    }

    #nanobranchbanner .carsText h5 {
        font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
            "Helvetica Neue", sans-serif;
        font-size: 23px;
        font-weight: 400;
        color: white;
    }

    #nanobranchbanner .fabricText {
        position: absolute;
        top: 30%;
    }

    #nanobranchbanner .fabricText h4 {
        font-family: "Bebas Neue", sans-serif;
        font-size: 50px;
        font-weight: 700;
        color: white;
        text-shadow: 2px 2px black;
        line-height: 40px;
    }

    #nanobranchbanner .fabricText h4 span {
        font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
            "Helvetica Neue", sans-serif;
    }

    #nanobranchbanner .fabricText h1 {
        font-family: "Bebas Neue", sans-serif;
        font-size: 72px;
        letter-spacing: 12px;
        text-shadow: 2px 2px;
        color: white;
        text-shadow: 2px 2px black;
        line-height: 90px;
    }

    #nanobranchbanner .fabricText p {
        font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
            "Helvetica Neue", sans-serif;
        font-size: 12px;
        color: white;
        text-shadow: 2px 2px black;
        padding-right: 10px;
    }

    #nanobranchbanner .building {
        position: absolute;
        top: 30%;
    }

    #nanobranchbanner .building h4 {
        font-family: "Bebas Neue", sans-serif;
        font-size: 85px;
        font-weight: 700;
        color: white;
        text-shadow: 2px 2px black;
        line-height: 70px;
    }

    #nanobranchbanner .building h1 {
        font-family: "Bebas Neue", sans-serif;
        font-size: 100px;
        text-shadow: 2px 2px;
        color: #008aff;
        text-shadow: 2px 2px black;
        line-height: 115px;
    }

    #nanobranchbanner .building p {
        font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
            "Helvetica Neue", sans-serif;
        font-size: 15px;
        color: white;
        text-shadow: 2px 2px black;
    }

    #nanobranchbanner .yachtTexs {
        position: absolute;
        top: 30%;
    }

    #nanobranchbanner .yachtTexs h4 {
        font-family: "Open Sans", sans-serif;
        font-size: 32.5px;
        font-weight: 700;
        color: white;
        text-shadow: 2px 2px black;
        line-height: 40px;
    }

    #nanobranchbanner .yachtTexs h1 {
        font-family: "Open Sans", sans-serif;
        font-weight: 800;
        font-size: 60px;
        text-shadow: 2px 2px;
        color: white;
        text-shadow: 2px 2px black;
        line-height: 80px;
        padding-bottom: 10px;
        border-bottom: 2px solid white;
    }

    #nanobranchbanner .yachtTexs p {
        font-family: "Open Sans", sans-serif;
        font-size: 15px;
        color: white;
        text-shadow: 2px 2px black;
    }

    #nanobranchbanner .antibacterial {
        position: absolute;
        top: 30%;
    }

    #nanobranchbanner .antibacterial h4 {
        font-size: 18px;
        font-weight: 700;
        color: white;
        text-shadow: 4px 4px black;
        line-height: 40px;
    }

    #nanobranchbanner .antibacterial h1 {
        font-family: "Open Sans", sans-serif;
        font-weight: 800;
        font-size: 47px;
        color: white;
        text-shadow: 4px 4px black;
        line-height: 80px;
    }

    #nanobranchbanner .antibacterial p {
        font-family: "Open Sans", sans-serif;
        font-size: 15px;
        color: white;
        line-height: 25px;
        text-shadow: 2px 2px black;
    }

    .xlTopMargin {
        padding-top: 465px;
    }

    #nanobranchbanner h4 {
        font-size: 15px;
        font-weight: bold;
        color: #444444;
    }

    #nanobranchbanner h2 {
        font-size: 20px;
    }

    #nanobranchbanner p {
        font-size: 10px;
        color: #444444;
        margin-bottom: 30px;
    }
}

#nanobranchbanner h1 {
    color: #444444;
}
@media (max-width: 991px) {
    #nanobranchbanner h1 {
        text-align: center;
    }
}

#nanobranchbanner input {
    text-align: center;
    border-radius: 10px !important;
    border: 0.7px solid #707070;
}

#nanobranchbanner h2 {
    font-size: 54px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #0075cf;
}

#nanobranchbanner h4 {
    font-size: 30px;
    font-weight: bold;
    color: #444444;
}

#nanobranchbanner p {
    font-size: 25px;
    color: #444444;
    margin-bottom: 30px;
}

#nanobranchbanner .icon-box .secondButton {
    box-shadow: 3px 3px 6px 3px #3b37350d;
    font-size: 16px;
}

@media (min-width: 992px) and (max-width: 994px) {
    #nanobranchbanner .icon-boxes {
        position: absolute;
        bottom: -400px;
        left: 0;
        right: 0;
    }
}

/* end of nanobranchbanner */

/*panel*/

.nanobranchbg-shape {
    width: 100%;
    background-image: url("../images/bgShapes/nanobranchebackgroundtop.png"),
        url("../images/bgShapes/nanobranchbackgroundbottom.png");
    background-position: top 220px right, top 700px left;
    background-size: 35em 55em;
    background-repeat: no-repeat, no-repeat;
    background-color: #f2f5fa;
}

.antibacterialbg-shape {
    width: 100%;
    background-image: url("../images/bgShapes/antibacterialbackground.png");
    background-position: bottom right;
    background-size: 75em 45em;
    background-repeat: no-repeat, no-repeat;
    background-color: #f2f5fa;
}

.nanobranchbg-shape h1 {
    color: #444444;
    font-family: "Raleway", sans-serif;
    font-weight: 800;
}
@media (min-width: 992px) {
    .antibacterialbg-shape .panelContainer {
        padding-bottom: 18em;
    }
}

.productCard {
    padding: 12px;
    position: relative;
}

.panel {
    border: none;
    box-shadow: none;
    background-color: #ffffff;
    padding: 30px;
    transition: all 0.5s ease 0s;
    overflow: hidden;
}

.panel:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.panel-heading {
    border-color: #eff2f7;
    font-size: 16px;
    font-weight: 300;
}

.product-list .pro-img-box {
    position: relative;
}

.pro-img-box img {
    width: 100%;
    height: 100%;
    transition: transform 1s;
}

.pro-img-box img:hover {
    opacity: 1;
    transform: scale(1.5);
}

.adtocart {
    background: #ffffff;
    color: #fff;
    display: inline-block;
    text-align: center;
    padding: 5px 4px;
    bottom: -25px;
    position: absolute;
    box-shadow: 0 8px 6px -6px #0000000d !important;
    border-radius: 10px;
}

.adtocart p {
    color: #0075cf;
    font-size: 0.9em;
    line-height: 35px;
    margin: 0;
}

.panel-body p {
    color: black;
    font-size: 14px;
    margin-top: 60px;
    display: inline-block;
}

.panel-body .btn {
    background-color: #eeeeee;
    color: #8d8d8d;
    width: 157px;
    transition: all 0.7s ease 0s;
}

.panel-body .btn:hover {
    background-color: #cacaca;
    color: #8d8d8d;
    width: 157px;
}

.product-list .price {
    color: #fc5959;
    font-size: 15px;
}

#readMore {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
}

@media (992px <=width <=1200px) {
    .adtocart p {
        font-size: 7px;
    }

    .panel-body p {
        font-size: 12px;
        margin-top: 30px;
    }
}

/*end of panel*/

/* onevideo */
#onevideo {
    background-color: #d7e7fa;
}

@media (max-width: 992px) {
    #onevideo .pb-video-container {
        padding-top: 40px;
    }
}

@media (min-width: 992px) {
    #onevideo .pb-video-container {
        padding: 100px 0;
    }
}

#onevideo .pb-video {
    padding: 20px;
    transition: all 0.5s ease 0s;
}

#onevideo .pb-video:hover {
    background: #2c3e50;
    color: white;
}

/* end of onevideo */
/* fourvideosbranch */

#fourvideosbranch {
    background-color: #d7e7fa;
    color: #444444;
}

#fourvideosbranch .pb-video-container {
    padding-top: 20px;
}

#fourvideosbranch .pb-video {
    padding: 10px;
}

#fourvideosbranch .pb-video:hover {
    background: #2c3e50;
    color: white;
}

#fourvideosbranch .pb-video-frame {
    transition: width 0.7s, height 0.7s;
}

#fourvideosbranch .pb-video-frame:hover {
    height: 300px;
}

#fourvideosbranch .pb-row {
    margin-bottom: 10px;
}

/* end of fourvideosbranch */
/* End of Nano branch page */
/* Blog Page */
/* nanoblogbanner */
.nanoblogbanner {
    background-size: cover;
    background-image: url("../images/banners/nanoblogbanner.png");
    min-height: 50vh;
}

.nanoblogbanner h2 {
    font-size: 70px;
}

.nanoblogbanner p {
    font-size: 25px;
}

/* end of nanoblogbanner */
/* productCategoryTag */
#productCategoryTag .productCategorySlide {
    border-top: #e2dfdf solid 1px;
    border-bottom: #e2dfdf solid 1px;
}

#productCategoryTag .product-image {
    width: 100%;
}

#productCategoryTag .categoryText h6 {
    letter-spacing: 5px;
    font-size: small;
}

#productCategoryTag .categoryText p {
    margin: 5px 0;
}

#productCategoryTag a {
    color: #0075cf;
    font-size: small;
}

#productCategoryTag .btn {
    background-color: #eeeeee;
    color: #8d8d8d;
    padding: 15px;
    width: 200px;
    color: black;
    transition: all 0.7s ease 0s;
}

#productCategoryTag .btn:hover {
    background-color: #cacaca;
    color: #8d8d8d;
    width: 200px;
}

@media (min-width: 992px) {
    #productCategoryTag {
        margin: 7em 0 3em 0;
    }
}

@media (992px <=width <=1200px) {
    #productCategoryTag h1 {
        font-size: 30px;
    }

    #productCategoryTag p {
        font-size: 10px;
    }
}

@media (max-width: 992px) {
    #productCategoryTag {
        margin: 3em 0 0 0;
    }
}

/* end of productCategoryTag */
/* latest nanoposts */
#nanoposts {
    margin-bottom: 5em;
}

#nanoposts .card {
    background-color: #fff;
    border: none;
    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.19);
    transition: all 0.5s ease 0s;
}

#nanoposts .card:hover {
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#nanoposts .image-container {
    position: relative;
}

#nanoposts .image-container img {
    width: 100%;
}

#nanoposts .card .post-detail-container p {
    font-size: x-small;
}

#nanoposts .card .post-detail-container a {
    font-size: small;
}

#nanoposts .card .post-detail-container {
    margin: 20px 35px;
}

@media (min-width: 992px) {
    #nanoposts {
        margin-bottom: 250px;
    }
}

@media (992px <=width <=1200px) {
    #nanoposts .card h4 {
        font-size: 20px;
    }

    #nanoposts .card .post-detail-container {
        margin: 10px 20px;
    }
}

@media (max-width: 992px) {
    #nanoposts .card h4 {
        font-size: 1.6em;
    }
}

/* end oflatest nanoposts */
/* end of Blog Page */
/* For Our Distribuitor Page */
/* nanoforourdistributorbanner */
.nanoforourdistributorbanner {
    background-size: cover;
    background-image: url("../images/banners/nanoforourdistributorbanner.png");
    min-height: 50vh;
}

@media (min-width: 992px) {
    .nanoforourdistributorbanner h1 {
        font-size: 3.3em;
    }
}

@media (992px <=width <=1200px) {
    .nanoforourdistributorbanner h1 {
        font-size: 2.5em;
    }
}

@media (max-width: 992px) {
    .nanoforourdistributorbanner h1 {
        font-size: 35px;
    }
}

/* end of nanoforourdistributorbanner */
/* becomeDistributorForm */
#becomeDistributorForm .grey {
    background-color: #fafafa;
}

#becomeDistributorForm .radioCheck input {
    border-radius: 50% !important;
}

#becomeDistributorForm .form-check label {
    margin: 0;
}

#becomeDistributorForm label {
    color: #555555;
    margin-bottom: 5px;
}

@media (992px <=width <=1200px) {
    #becomeDistributorForm label {
        font-size: 12px;
    }
}

@media (max-width: 992px) {
    #becomeDistributorForm label {
        font-size: 15px;
    }

    #becomeDistributorForm label {
        margin-top: 10px;
    }

    .oserenDistributorBanner h1 {
        font-size: 35px;
    }
}

/* end of becomeDistributorForm */

/*End of For Our Distribuitor Page */

/* About Us Page */
/* aboutUsBanner */
.aboutUsBanner {
    background-size: cover;
    background-image: url("../images/banners/aboutusbanner.png");
    background-position: center;
    min-height: 50vh;
}

.aboutUsBanner h2 {
    font-size: 70px;
}

.aboutUsBanner p {
    font-size: 25px;
}

@media (992px <=width <=1200px) {
    .aboutUsBanner h2 {
        font-size: 50px;
    }

    .aboutUsBanner p {
        font-size: 20px;
    }
}

@media (max-width: 992px) {
    .aboutUsBanner h2 {
        font-size: 40px;
    }

    .aboutUsBanner p {
        font-size: 17px;
        font-weight: bold;
    }
}

/* end of aboutUsBanner */
/* whoWeAre */
#whoWeAre {
    padding: 5em 0;
}

#whoWeAre h1 {
    font-size: 50px;
    color: #25282a;
}

#whoWeAre p {
    font-size: 15px;
    line-height: 35px;
    color: #555555;
}
@media (max-width: 991px) {
    #whoWeAre p {
        line-height: 1.5;
    }
}

#whoWeAre .pb-video {
    transition: transform 0.5s;
}

@media (min-width: 992px) {
    #whoWeAre .pb-video {
        height: 480px;
    }
}
@media (max-width: 991px) {
    #whoWeAre .pb-video {
        height: 480px;
    }
}
@media (max-width: 767px) {
    #whoWeAre .pb-video {
        height: 320px;
    }
}
@media (max-width: 424px) {
    #whoWeAre .pb-video {
        height: 220px;
    }
}

#whoWeAre .pb-video:hover {
    transform: scale(1.05);
}

@media (992px <=width <=1200px) {
    #whoWeAre h1 {
        font-size: 40px;
    }

    #whoWeAre p {
        font-size: 12px;
        line-height: 30px;
    }
}

@media (max-width: 992px) {
    #whoWeAre h1 {
        font-size: 35px;
    }
}

/* End of whoWeAre */
/* aboutSection */
#about {
    background-size: cover;
    background-image: url("../images/banners/beeCellBanner.png");
    padding: 40px 0;
}

#about .stay-min-height {
    min-height: 60vh;
}

#about h1 {
    font-size: 50px;
    font-weight: bold;
}

#about p {
    font-size: 15px;
    text-align: start;
    line-height: 30px;
}
@media (max-width: 991px) {
    #about p {
        line-height: 1.5;
    }
}

#fourvideosbranch .pb-video:hover {
    background: #2c3e50;
    color: white;
}

#fourvideosbranch .pb-video-frame {
    transition: width 0.7s, height 0.7s;
}

#fourvideosbranch .pb-video-frame:hover {
    height: 300px;
}

/* end of aboutSection */
/* bestService */
#bestService p {
    font-size: 20px;
    color: #555555;
}

@media (min-width: 992px) {
    #bestService h1 {
        font-size: 50px;
        color: #25282a;
    }
}

@media (992px <=width <=1200px) {
    #bestService p {
        font-size: 14px;
    }

    #bestService h1 {
        font-size: 35px;
    }
}

@media (max-width: 992px) {
    #bestService h1 {
        font-size: 30px;
    }
}

/* end of bestService */
/* squarecards */
#aboutUsSquareCards h2 {
    font-size: 28px;
    color: #0066b3;
}

#aboutUsSquareCards .nanoHygiene h5 {
    color: #25282a;
}

#aboutUsSquareCards .nanoHygiene p ul {
    color: #4b4f58;
}

#aboutUsSquareCards h5 {
    font-size: 18px;
    font-weight: 600;
}
@media (max-width: 991px) {
    #aboutUsSquareCards h5 {
        font-size: 21px;
    }
}

#aboutUsSquareCards p,
ul {
    font-size: 15px;
}

#aboutUsSquareCards .nanoDiamond p {
    line-height: 30px;
}

@media (min-width: 1200px) {
    #aboutUsSquareCards .nanoHygiene {
        background-size: cover;
        background-position: bottom 1.5em right -0.9em;
        background-image: url("../images/bgShapes/hygiene.png");
        background-size: 8em 8em;
        background-repeat: no-repeat;
    }
}

@media (992px <=width <=1200px) {
    #aboutUsSquareCards h2 {
        font-size: 25px;
    }

    #aboutUsSquareCards p,
    ul {
        font-size: 9px;
    }
}

@media (max-width: 992px) {
    /* #aboutUsSquareCards .nanoHygiene {
        background-size: cover;
        background-position: bottom 2% right;
        background-image: url("../images/bgShapes/hygiene.png");
        background-size: 7em 7em;
        background-repeat: no-repeat;
    } */
    #aboutUsSquareCards p,
    ul {
        font-size: 15px;
    }
}

/* end of squarecards */
/* aboutUsWhoWeAre */
#aboutUsWhoWeAre h1 {
    font-size: 50px;
    color: #25282a;
    font-weight: 750;
}

#aboutUsWhoWeAre p {
    font-size: 19px;
    color: #25282a;
}

@media (992px <=width <=1200px) {
    #aboutUsWhoWeAre h1 {
        font-size: 40px;
    }
}

@media (max-width: 992px) {
    #aboutUsWhoWeAre h1 {
        font-size: 35px;
    }
    #aboutUsWhoWeAre p {
        font-size: 15px;
    }
}

/* End Of aboutUsWhoWeAre */
/* whatWeDoCards */
#whatWeDoCards .whatWeDoCard {
    background-color: #fff;
    border: none;
    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.19);
    transition: all 0.5s ease 0s;
}

#whatWeDoCards .whatWeDoCard:hover {
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#whatWeDoCards .whatWeDoCard h2 {
    color: #f68423;
    font-size: 50px;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    font-weight: 750;
}

#whatWeDoCards .whatWeDoCard p {
    color: #25282a;
    font-size: 20px;
    font-weight: bold;
}

@media (min-width: 992px) {
    #whatWeDoCards .whatWeDoCard {
        height: 257px;
        width: 257px;
        margin-bottom: 130px;
    }

    #whatWeDoCards .whatWeDoCard p {
        padding: 40px 30px 0 30px;
    }
}

@media (992px <=width <=1200px) {
    #whatWeDoCards .whatWeDoCard p {
        font-size: 15px;
    }
}

@media (max-width: 992px) {
    #whatWeDoCards .whatWeDoCard {
        height: 20em;
        width: 18em;
    }
}

/* End Of whatWeDoCards */
/*End of About Us Page */

/* nanoContact Page */
/* contactUs */

@media (min-width: 992px) {
    #contactUs {
        padding-top: 100px;
    }

    #contactUs {
        color: #25282a;
        width: 100%;
        background-image: url("../images/bgShapes/contactBackGround.png");
        background-position: top left;
        background-size: 37em 27em;
        background-repeat: no-repeat, no-repeat;
    }
}

@media (max-width: 992px) {
    #contactUs {
        color: #25282a;
        /* width: 100%;
        background-image: url("../images/bgShapes/contactBackGround.png");
        background-position: top left;
        background-size: 25em 14em;
        background-repeat: no-repeat, no-repeat; */
    }

    #contactUs .oserenDetails p {
        font-size: 11px !important;
    }

    #contactUs .nanoDetails p {
        font-size: 11px !important;
    }
}

#contactUs .lightGreyBack {
    background-color: #f6f6f6;
}

#contactUs .lightGreyBack p {
    font-size: 18px;
    font-weight: 600;
}

#contactUs h3 {
    border-left: #0075cf solid 3px;
    font-size: 35px;
    font-weight: bold;
}

#contactUs h5 {
    font-size: 18px;
    font-weight: 600;
}

#contactUs h2 {
    font-size: 35px;
    font-weight: bold;
}

#contactUs p {
    font-size: 15px;
}

#contactUs label {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 5px;
}

#contactUs .underlineBlue {
    border-bottom: #0075cf solid 3px;
}

#contactUs .grey {
    background-color: #f6f6f6;
}

#contactUs .logo {
    height: 10em;
    padding: 2em;
    overflow: visible;
}

@media (992px <=width <=1200px) {
    #contactUs .lightGreyBack p {
        font-size: 13px;
    }
}

@media (max-width: 992px) {
    #contactUs .nanoDetails .logo {
        height: 8em;
        padding: 2em;
        overflow: visible;
    }
}

/* End of contactUs */
/*End of nanoContact Page */
/* brances page */
/* branchBanner */
#branchesBanner {
    background-color: #0066b3;
    color: white;
    height: 50vh;
}
#branchesBanner .row {
    height: 50vh;
}

@media (min-width: 992px) {
    #branchesBanner h1 {
        font-size: 50px;
    }
}

@media (max-width: 992px) {
    #branchesBanner h1 {
        font-size: 30px;
    }
}

#branches h5 {
    color: #555555;
    font-size: 20px;
}

#branches p {
    font-size: 15px;
    color: #555555;
}

@media (max-width: 992px) {
    #branches h5 {
        font-size: 14px;
    }
}

#branches .orangeButton {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f68423;
    width: 130px;
    height: 37px;
    font-size: 10px;
    letter-spacing: 1px;
    border-radius: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: white;
    transition: all 0.3s;
}

#branches .orangeButton:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #003266;
    width: 130px;
    height: 37px;
    font-size: 10px;
    letter-spacing: 1px;
    border-radius: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: white;
}

#branches .scroller {
    overflow-y: scroll;
    scrollbar-color: #003266 #f68423;
    scrollbar-width: thin;
}

#branches .addressCard {
    border: 1px solid #707070;
    margin: 20px 0px;
}

/* end of branchBanner */
/* End of brances page */

/* nano4diamond Page */
/* productHeader */
#productHeader .productThumbnail {
    margin: 10px 0;
}

@media (min-width: 992px) {
    #productHeader .productThumbnail img {
        height: 5em;
        width: 100%;
        padding: 5px 5px;
    }
}

#productHeader .image-container img {
    width: 100%;
    height: 100%;
    transition: transform 0.5s;
    opacity: 0.6;
}

#productHeader .image-container img:hover {
    opacity: 1;
    transform: scale(1.35);
}

#productHeader .img-holder img {
    width: 100%;
    height: 100%;
    transition: transform 0.5s;
}

#productHeader .img-holder img:hover {
    opacity: 1;
    transform: scale(1.35);
}

#productHeader ul {
    color: #555555;
    margin: 0;
    font-size: 16px;
    line-height: 30px;
}

@media (992px <=width <=1200px) {
    .productHeaderContainer h1 {
        font-size: 23px;
    }

    .productHeaderContainer h5 {
        font-size: 12px;
    }
}

/* end of productheader */
/* productAbout */
#productAbout h2 {
    font-size: 35px;
}

#productAbout p {
    margin-top: 30px;
    font-size: 19px;
    color: #555555;
    font-family: "Helvetica", sans-serif;
}

#productAbout span {
    font-size: 20px;
    color: #555555;
    font-weight: bold;
    font-family: "Helvetica", sans-serif;
}

#productAbout .diamond {
    height: 10em;
    float: right;
    shape-outside: url("../images/bgShapes/diamond.png");
    shape-margin: 20px;
}

@media (max-width: 992px) {
    #productAbout h2 {
        font-size: 50px;
    }
}

/* end of productAbout */
/* productDifinition */
#producrtDefinition {
    background-color: #f5f5f5;
}

#producrtDefinition h2 {
    font-size: 32px;
    font-weight: bold;
}

#producrtDefinition p {
    margin-top: 30px;
    font-size: 19px;
    color: #555555;
    font-family: "Helvetica", sans-serif;
}

#producrtDefinition span {
    font-size: 20px;
    color: #555555;
    font-weight: bold;
    font-family: "Helvetica", sans-serif;
}

#producrtDefinition ul {
    padding-left: 18px;
    font-family: "Helvetica", sans-serif;
    font-size: 20px;
    color: #000000;
    margin-bottom: 0;
}

#producrtDefinition .unorder {
    margin-top: 30px;
}

#producrtDefinition ul span {
    font-size: 21px;
    color: #000000;
    font-weight: bold;
    font-family: "Helvetica", sans-serif;
}

#producrtDefinition img {
    height: 100%;
    width: 90%;
}

@media (max-width: 992px) {
    #producrtDefinition h2 {
        font-size: 50px;
    }
}

/* end of productDifinition */

/* End of nano4diamond */

/* amzcomIndex page */
/* carousel */

#carousel .carousel-indicators [data-bs-target] {
    height: 4px;
}

#carousel .carousel-indicators .active {
    background-color: #f68423;
    height: 6px;
}

/*end of  carousel */
/* atAGlance */
@media (min-width: 992px) {
    #atAGlance .topImg {
        height: 28em;
    }

    #atAGlance .bottomImg {
        height: 28em;
        margin-top: 13em;
    }

    #atAGlance h2 {
        font-size: 30px;
    }

    #atAGlance h1 {
        font-size: 60px;
    }
}

@media (992px <=width <=1200px) {
    #atAGlance .topImg {
        height: 23em;
    }

    #atAGlance .bottomImg {
        height: 23em;
        margin-top: 13em;
    }

    #atAGlance h1 {
        font-size: 54px;
    }

    #atAGlance h2 {
        font-size: 25px;
    }

    #atAGlance p {
        font-size: 14px;
    }
}

@media (max-width: 992px) {
    #atAGlance .bottomImg {
        margin-top: 6em;
    }

    #atAGlance h1 {
        font-size: 40px;
    }
}

#atAGlance p {
    color: #444444;
}

/* end of atAGlance */
/* brandes */
.splitColor {
    background: linear-gradient(
        to top,
        white 0%,
        white 35%,
        #efefef 35%,
        #efefef 100%
    );
}

@media (min-width: 992px) {
    #brandes {
        padding: 0 150px;
    }

    #brandes .card {
        transition: 0.2s all ease-in;
        box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.2),
            0 1px 2px 0 rgba(0, 0, 0, 0.19);
    }

    #brandes .card:hover {
        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2),
            0 4px 10px 0 rgba(0, 0, 0, 0.19);
    }

    .brandesMinHeight {
        min-height: 320px;
    }

    #brandes .nanoLogo {
        height: 170px;
        width: 170px;
    }

    #brandes .oserenLogo {
        height: 70px;
        width: 220px;
    }

    #brandes .lakeLogo {
        height: 180px;
        width: 180px;
    }

    #brandes h2 {
        font-size: 30px;
    }

    #brandes h1 {
        font-size: 60px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    #brandes {
        padding: 0 50px;
    }
}

@media (min-width: 1201px) and (max-width: 1439px) {
    .brandesMinHeight {
        min-height: 275px;
    }
}

@media (max-width: 992px) {
    #carouselBrandes .container {
        padding-bottom: 30px;
    }
    /*
    #brandes .nanoLogo {
        height: 25em;
        padding: 7em 4em;
    }

    #brandes .oserenLogo {
        height: 25em;
        padding: 10em 1.5em;
    }

    #brandes .lakeLogo {
        height: 25em;
        padding: 7em 4em;
    } */

    /* #brandes .nanoLogo,
    #brandes .oserenLogo,
        #brandes .lakeLogo{
        height: 25em;
        padding: 7em 4em;
    } */

    .brandesMinHeight {
        width: 20em;
    }

    #brandes h1 {
        font-size: 50px;
    }
}

#carouselBrandes .carousel-control-prev,
#carouselBrandes .carousel-control-next {
    width: 40px;
    height: 40px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 50%;
    color: #6c757d;
}

#carouselBrandes .carousel-control-prev-icon,
#carouselBrandes .carousel-control-next-icon {
    background-color: #6c757d;
    border-radius: 50%;
    color: #fff;
    padding: 10px;
    background-size: 26px;
}

#carouselBrandes .carousel-control-prev {
    margin-top: auto;
    margin-bottom: 10px;
    left: 30%;
}

#carouselBrandes .carousel-control-next {
    margin-top: auto;
    margin-bottom: 10px;
    right: 30%;
}

/* end of brandes */
/* joinUs */
#joinUs {
    min-height: 60vh;
    background-size: cover;
    background-image: url("../images/banners/amzcomcover.png");
    background-position-x: 38%;
}

#joinUs .textContainer {
    min-height: 60vh;
}

@media (992px <=width <=1200px) {
    #joinUs h2 {
        font-size: 25px;
    }

    #joinUs p {
        font-size: 14px;
    }
}

@media (max-width: 992px) {
    #joinUs h2 {
        font-size: 31px;
        margin-top: 50px;
    }

    #joinUs p {
        font-size: 16px;
    }
    #joinUs a {
        margin-bottom: 50px;
    }
}

/* end of joinUs */
/* services */
.splitColorReverse {
    background: linear-gradient(
        to top,
        #efefef 0%,
        #efefef 35%,
        white 35%,
        white 100%
    );
}

@media (min-width: 992px) {
    #services h2 {
        font-size: 30px;
    }

    #services h1 {
        font-size: 60px;
    }

    #services .iframe-container {
        height: 550px;
    }

    #services .iframe-col-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (992px <=width <=1200px) {
    #services h2 {
        font-size: 16px;
    }

    #services h1 {
        font-size: 32px;
    }

    #services .iframe-col-container {
        display: block;
    }
}

@media (max-width: 424px) {
    #services .iframe-container {
        height: 220px;
    }
}

@media (min-width: 425px) and (max-width: 767px) {
    #services .iframe-container {
        height: 310px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    #services .iframe-container {
        height: 410px;
    }
}
@media (max-width: 991px) {
    #services h1 {
        font-size: 45px;
    }
}

/* end of services */
/* end of amzcomIndex page */
/* AMZCOMDISTRIBUTOR */
/* nanoblogbanner  page*/
.amzcomDistributorbanner {
    background-size: cover;
    background-image: url("../images/banners/amzcomDistribuitorbanner.png");
    min-height: 50vh;
    background-position-x: 45%;
}

@media (min-width: 992px) {
    .amzcomDistributorbanner h1 {
        font-size: 65px;
    }

    .amzcomDistributorbanner h1 span {
        font-size: 0.6em;
    }

    .amzcomDistributorbanner p {
        font-size: 25px;
    }
}

@media (992px <=width <=1200px) {
    .amzcomDistributorbanner h1 {
        font-size: 40px;
    }

    .amzcomDistributorbanner p {
        font-size: 25px;
    }

    .amzcomDistributorbanner h1 span {
        font-size: 0.6em;
    }
}

@media (max-width: 992px) {
    .amzcomDistributorbanner h1 {
        font-size: 22px;
    }

    .amzcomDistributorbanner h1 span {
        font-size: 18px;
    }

    .amzcomDistributorbanner p {
        font-size: 18px;
    }
}

/* end of nanoblogbanner */
/* distributorOpportunities */
#distributorOpportunities h2 {
    font-size: 40px;
    color: #25282a;
}

#distributorOpportunities p {
    font-size: 15px;
    color: #555555;
    line-height: 30px;
}

@media (992px <=width <=1200px) {
    #distributorOpportunities h2 {
        font-size: 30px;
    }
}

@media (max-width: 992px) {
    #distributorOpportunities h2 {
        font-size: 35px;
    }
}

/* end of distributorOpportunities */
/* distributorBrandes */
#distribuitBrand .brandCard {
    min-height: 15em;
}

@media (min-width: 992px) {
    #distribuitBrand .nanoLogo {
        margin-top: 2em;
        height: 15em;
        padding: 2.5em 5em;
    }

    #distribuitBrand .oserenLogo {
        margin-top: 2em;
        height: 15em;
        padding: 5em 2em;
    }

    #distribuitBrand .lakeLogo {
        margin-top: 2em;
        height: 15em;
        padding: 3em 5em;
    }
}

@media (992px <=width <=1200px) {
    #distribuitBrand .nanoLogo {
        margin-top: 2em;
        height: 10em;
        padding: 1.25em 2.5em;
    }

    #distribuitBrand .oserenLogo {
        margin-top: 2em;
        height: 10em;
        padding: 2.5em 1em;
    }

    #distribuitBrand .lakeLogo {
        margin-top: 2em;
        height: 10em;
        padding: 1em 2.5em;
    }
}

@media (max-width: 424px) {
    #distribuitBrand .nanoLogo,
    #distribuitBrand .oserenLogo,
    #distribuitBrand .lakeLogo {
        margin-top: 2em;
        height: 15em;
    }
    #distribuitBrand .nanoLogo,
    #distribuitBrand .lakeLogo {
        padding: 2.5em 4.5em;
    }
    #distribuitBrand .oserenLogo {
        padding: 5em 2.5em;
    }

    #distribuitBrand h3 {
        font-size: 15px;
    }

    #distribuitBrand h3 span {
        font-size: 17px;
    }
}
@media (min-width: 425px) and (max-width: 992px) {
    #distribuitBrand .nanoLogo,
    #distribuitBrand .oserenLogo,
    #distribuitBrand .lakeLogo {
        margin-top: 2em;
        width: 90%;
        margin: auto;
    }
    #distribuitBrand .nanoLogo,
    #distribuitBrand .lakeLogo {
        padding: 2.5em 4.5em;
    }
    #distribuitBrand .oserenLogo {
        padding: 5em 2.5em;
    }

    #distribuitBrand h3 {
        font-size: 15px;
    }

    #distribuitBrand h3 span {
        font-size: 17px;
    }
}

#distribuitBrand .redColorBack {
    background-color: #c61118;
    color: white;
}

#distribuitBrand .yellowColorBack {
    background-color: #ffe100;
}

#distribuitBrand .cardTag {
    min-height: 3.5em;
}

#distribuitBrand .card-action {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.19);
}

#distribuitBrand .card-action:hover {
    -webkit-animation: pulse 1.5s infinite;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        -moz-transform: scale(0.9);
        -ms-transform: scale(0.9);
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

    70% {
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
        box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);
    }

    100% {
        -moz-transform: scale(0.9);
        -ms-transform: scale(0.9);
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
    }
}

/* end of distributorBrandes */
/* end of AMZCOMDISTRIBUTOR page*/

/* amzcomContact Page */
/* contactUs */
.amzcomContactUs {
    background-size: cover;
    background-image: url("../images/banners/amzcomcontactbanner.png");
    background-position: 50%;
    min-height: 50vh;
}

#amzcomContactUsBanner h2 {
    font-size: 70px;
}

#amzcomContactUsBanner p {
    font-size: 25px;
}

#amzcomContactUs .lightGreyBack {
    background-color: #f6f6f6;
}

@media (min-width: 992px) {
    #amzcomContactUs {
        padding-top: 100px;
    }
}

@media (992px <=width <=1200px) {
    #amzcomContactUsBanner h2 {
        font-size: 50px;
    }
}

@media (max-width: 992px) {
    #amzcomContactUsBanner h2 {
        font-size: 40px;
    }

    #amzcomContactUsBanner p {
        font-size: 18px;
    }
}

#amzcomContactUs .lightGreyBack p {
    font-size: 18px;
    font-weight: 600;
}

#amzcomContactUs h3 {
    border-left: #0075cf solid 3px;
    font-size: 35px;
    font-weight: bold;
}

#amzcomContactUs h5 {
    font-size: 18px;
    font-weight: 600;
}

#amzcomContactUs h2 {
    font-size: 40px;
    font-weight: bold;
}

#amzcomContactUs p {
    font-size: 15px;
}

#amzcomContactUs label {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 5px;
}

@media (992px <=width <=1200px) {
    #amzcomContactUs .lightGreyBack p {
        font-size: 13px;
    }
}

@media (max-width: 991px) {
    #amzcomContactUs h2 {
        font-size: 30px;
    }
    #amzcomContactUs h5 {
        font-size: 20px;
    }
    #amzcomContactUs .pleaseFill {
        font-size: 14px;
    }

    #amzcomContactUs .lightGreyBack p {
        font-size: 11px !important;
    }
}

#amzcomContactUs .underlineBlue {
    border-bottom: #0075cf solid 3px;
}

#amzcomContactUs .grey {
    background-color: #f6f6f6;
}

#amzcomContactUs .logo {
    height: 4em;
    padding: 1em;
    overflow: visible;
    border-radius: 10px;
}

#contactUs .oserenLogo {
    height: 4em;
    padding: 0.75em;
    overflow: visible;
    border-radius: 10px;
}

#amzcomContactUs .lakeLogo {
    height: 7em;
    overflow: visible;
}

#amzcomContactUs .lakeLogo img {
    background-color: #f6f6f6;
}

/* End of contactUs */
/*End of nanoContact Page */
/* Careers Page */
/* careersBanner */
.amzcomCareersBanner {
    background-size: cover;
    background-image: url("../images/banners/careersbanner.png");
    background-position: center;
    min-height: 50vh;
}

#amzcomCareersBanner h2 {
    font-size: 70px;
    font-weight: 800;
}

#amzcomCareersBanner p {
    font-size: 25px;
}

@media (max-width: 992px) {
    #amzcomCareersBanner h2 {
        font-size: 40px;
    }

    #amzcomCareersBanner p {
        font-size: 18px;
        font-weight: bold;
    }
}

/* end of careersBanner */
/* careers section */
@media (min-width: 992px) {
    #amzcomCareers {
        margin-bottom: 200px;
    }
}

#amzcomCareers h1 {
    font-size: 55px;
    color: #444444;
}

#amzcomCareers h2 {
    font-size: 40px;
    color: #25282a;
    font-weight: 600;
}

@media (992px <=width <=1200px) {
    #amzcomCareers h1 {
        font-size: 45px;
    }
}

@media (max-width: 992px) {
    #amzcomCareers h1 {
        font-size: 35px;
    }

    #amzcomCareers h2 {
        font-size: 35px;
        font-weight: 600;
    }
}

#amzcomCareers .graybackground {
    background-color: #f6f6f6;
}

#amzcomCareers h6 {
    font-size: 17px;
    color: #25282a;
    font-weight: 600;
}

#amzcomCareers p {
    font-size: 15px;
}

#amzcomCareers label {
    font-size: 15px;
    margin-bottom: 4px;
    font-weight: 600;
    color: #25282a;
}

#amzcomCareers input {
    border-radius: 8px !important;
}

#amzcomCareers .grey {
    background-color: #f6f6f6;
}

#amzcomCareers .blueButton {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2680eb;
    width: 280px;
    height: 66px;
    font-size: 18px;
    letter-spacing: 1px;
    border-radius: 10px;
    border: 2px solid white;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    transition: all 0.3s;
}
@media (max-width: 991px) {
    #amzcomCareers .blueButton {
        width: auto;
        height: auto;
        padding: 12px 20px;
    }
}

#amzcomCareers .blueButton:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f68423;
    width: 280px;
    height: 66px;
    font-size: 18px;
    font-family: "Montserrat", sans-serif;
    letter-spacing: 1px;
    border-radius: 10px;
    font-weight: 600;
}

/* end of careers section */
/* End of Careers Page */
/* Careers Page */
/* careersBanner */
.amzcomCareersOneBanner {
    background-size: cover;
    background-image: url("../images/banners/amzcomcareer1banner.png");
    background-position: center;
    min-height: 50vh;
}

#amzcomCareersOneBanner h2 {
    font-size: 70px;
}

#amzcomCareersOneBanner p {
    font-size: 25px;
}

@media (992px <=width <=1200px) {
    #amzcomCareersOneBanner h2 {
        font-size: 50px;
    }
}

@media (max-width: 992px) {
    #amzcomCareersOneBanner h2 {
        font-size: 40px;
    }

    #amzcomCareersOneBanner p {
        font-size: 18px;
    }
}

/* end of careersBanner */
/* careers section */
#amzcomCareersOne h1 {
    color: #25282a;
    font-weight: 600;
    font-size: 35px;
}

@media (min-width: 992px) {
    #amzcomCareersOne p {
        font-size: 20px;
        color: #4e4e4e;
    }
}

@media (max-width: 992px) {
    #amzcomCareersOne h1 {
        font-size: 30px;
        font-weight: bold;
    }

    #amzcomCareersOne .company {
        font-size: 28px;
        font-weight: bold;
    }
}

#amzcomCareersOne p {
    color: #4e4e4e;
}

/* end of careers section */
/* amzcomWorkflow */
#amzcomWorkflow {
    min-height: 40vh;
}

#amzcomWorkflow h1 {
    font-size: 45px;
    color: #25282a;
    font-weight: 600;
}

#amzcomWorkflow p {
    font-size: 16px;
    color: #4e4e4e;
}

@media (992px <=width <=1200px) {
    #amzcomWorkflow h1 {
        font-size: 35px;
    }
}

@media (max-width: 992px) {
    #amzcomWorkflow h1 {
        font-size: 30px;
    }

    #amzcomWorkflow h1:first-of-type {
        font-weight: 700;
    }
}

/* end of amzcomWorkflow */
/* sustainability */
#sustainability {
    min-height: 40vh;
}

#sustainability h1 {
    font-size: 45px;
    color: #25282a;
    font-weight: 600;
}

#sustainability p {
    font-size: 16px;
    color: #4e4e4e;
}

@media (max-width: 960px) {
    #sustainability h1 {
        font-size: 30px;
        font-weight: bold;
    }
}

/* end of sustainability */
/* gearMan */
#gearMan {
    background-color: #0075cf;
}

#gearMan p {
    font-size: 16px;
    color: #ffffff;
}

#gearMan ul {
    font-size: 20px;
    color: #ffffff;
}

#gearMan li {
    list-style: none;
}

#gearMan li::before {
    content: "✓";
    font-weight: bolder;
    display: inline-block;
    width: 1em;
    margin-left: -1.1em;
}

#gearMan h1 {
    font-size: 50px;
    font-weight: bold;
    color: white;
}

@media (992px <=width <=1200px) {
    #gearMan h1 {
        font-size: 40px;
    }
}

@media (max-width: 992px) {
    #gearMan h1 {
        font-size: 32px;
        font-weight: bold;
    }
}

/* end of gearMan */
/* End of Careers Page */
/* Colors */
.oserenMainColorFont {
    color: #0d271c;
}

.oserenSecondaryColorFontLight {
    color: #378663;
}

.oserenSecondaryColorFont {
    color: #d5001a;
}

.greyBackground {
    background-color: #ececec;
}

.greyfont {
    color: #8c8c8c;
}

/* end of colors */
/* Oseren page */
.greenButton {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #103224;
    width: 200px;
    height: 50px;
    font-size: 13px;
    letter-spacing: 1px;
    border-radius: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: white;
    transition: all 0.3s;
}

.greenButton:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #c61118;
    width: 200px;
    height: 50px;
    font-size: 13px;
    letter-spacing: 1px;
    border-radius: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: white;
}

.redButton {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #c61118;
    width: 200px;
    height: 50px;
    font-size: 13px;
    letter-spacing: 1px;
    border-radius: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: white;
    transition: all 0.3s;
}

.redButton:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #103224;
    width: 200px;
    height: 50px;
    font-size: 13px;
    letter-spacing: 1px;
    border-radius: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: white;
}

/* Oseren General Section */

/* topbar */
.oserenTopbar {
    background: #103224;
    height: 40px;
    font-size: 10px;
    color: #fff;
    padding: 0;
}

@media (992px <=width <=1200px) {
    .oserenTopbar {
        font-size: 8px;
    }
}

@media (min-width: 1200px) and (max-width: 1439px) {
    .oserenTopbar {
        font-size: 11px;
    }
}

.oserenTopbar .contact-info i {
    font-style: normal;
    color: #fff;
    line-height: 0;
}

.oserenTopbar .contact-info i a,
.oserenTopbar .contact-info i span {
    padding-left: 5px;
    color: #fff;
}

@media (max-width: 992px) {
    .oserenTopbar .contact-info i a,
    .oserenTopbar .contact-info i span {
        font-size: 11px;
        text-decoration: none;
    }
}

.oserenTopbar .contact-info i a {
    line-height: 0;
    text-decoration: none;
    letter-spacing: 2px;
}

@media (max-width: 992px) {
    .oserenTopbar .contact-info i a {
        letter-spacing: 0.4px;
    }
}

.oserenTopbar .contact-info i a:hover {
    color: #fff;
    text-decoration: underline;
    text-decoration: none;
}

.oserenTopbar .social-links a {
    color: rgba(255, 255, 255, 0.7);
    line-height: 0;
    margin-left: 20px;
    text-decoration: none;
}

.oserenTopbar .social-links a:hover {
    color: #fff;
    text-decoration: none;
}

/* End of topbar */
/* navbar */

#navbarOseren .greenButton {
    background-color: #103224;
    width: 250px;
    height: 35px;
    font-size: 11px;
    letter-spacing: 1px;
    border-radius: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    transition: all 0.3s;
}

#navbarOseren .greenButton:hover {
    background-color: #c61118;
    width: 250px;
    height: 35px;
    font-size: 11px;
    letter-spacing: 1px;
    border-radius: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
}

#navbarOseren li {
    display: inline-block;
    position: relative;
}

#navbarOseren li::after {
    content: "";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #103224;
    transform-origin: bottom center;
    transition: transform 0.25s ease-out;
}

#navbarOseren li:hover::after {
    transform: scaleX(1);
    transform-origin: bottom center;
}

@media (992px <=width <=1300px) {
    #navbarOseren li {
        font-size: 11px;
    }
}

@media (992px <=width <=1200px) {
    #navbarOseren input {
        width: 150px;
    }

    #navbarOseren .greenButton {
        width: 150px;
    }

    #navbarOseren #brand-logo {
        height: 1.7em;
    }
}

@media (min-width: 1200px) and (max-width: 1439px) {
    #navbarOseren .greenButton {
        width: auto;
        padding-left: 15px;
        padding-right: 15px;
    }

    #navbarOseren .greenButton:hover {
        width: auto;
    }

    #navbarOseren li {
        font-size: 13px;
    }

    #navbarOseren form {
        width: 300px;
    }

    #navbarOseren form .form-control {
        width: 75%;
    }
}

@media (min-width: 1300px) and (max-width: 1530px) {
    #navbarOseren li {
        font-size: 12px;
    }
}

/* end of navbar */
/* oserenFordistributer */
#oserenFordistributer {
    min-height: 40vh;
    background-color: #eeeeee;
}

#oserenFordistributer h1 {
    color: #25282a;
}

#oserenFordistributer a {
    white-space: nowrap;
    width: -moz-fit-content;
    width: fit-content;
}

#oserenFordistributer p {
    font-size: 20px;
    color: #4b4f58;
}

#oserenFordistributer .greenButton {
    width: 264.5px;
}

@media (min-width: 992px) {
    #oserenFordistributer h1 {
        font-size: 60px;
    }
}

@media (992px <=width <=1200px) {
    #oserenFordistributer h1 {
        font-size: 35px;
    }

    #oserenFordistributer p {
        font-size: 13.5px;
    }
}

@media (max-width: 992px) {
    #oserenFordistributer p {
        font-size: 15px;
        line-height: 17px;
    }
}

/* end of fordistributer */

/* oserenStayuptodate */
#oserenStayuptodate {
    padding: 1.5em;
    background-color: #46785a;
}

/*#oserenStayuptodate sup {
    margin-left: 15px;
}*/

#oserenMainStayuptodate {
    background-color: #163226;
}
#oserenMainStayuptodate sup {
    left: 2px;
}

#oserenStayuptodate .stay-min-height {
    min-height: 60vh;
}

#oserenStayuptodate h1 {
    font-size: 52px;
    color: #378663;
}

#oserenStayuptodate h1 span {
    color: #5fe4a9;
}

#oserenStayuptodate h5 {
    font-size: 25px;
    color: white;
}

#oserenStayuptodate label {
    margin-bottom: 2px;
}

#oserenStayuptodate .redButton:hover {
    border: solid 1px #5fe4a9;
}

@media (992px <=width <=1200px) {
    #oserenStayuptodate h1 {
        font-size: 35px;
    }

    #oserenStayuptodate h5 {
        font-size: 20px;
    }
}

@media (max-width: 992px) {
    #oserenStayuptodate h1 {
        font-size: 25px;
    }

    #oserenStayuptodate h5 {
        font-size: 20px;
    }

    #oserenStayuptodate label {
        font-size: 18px;
    }
}

/* end of oserenStayuptodate */

/* oserenSplitgreenbar */
/* oserenvision */
#oserenvision {
    min-height: 40vh;
}

#oserenvision p {
    color: #3a3a3a;
    letter-spacing: 1px;
    font-family: Helvetica;
    font-size: 18px;
}

#oserenvision h1 {
    color: #163226;
}

@media (min-width: 992px) {
    #oserenvision h1 {
        font-size: 50px;
    }
}

@media (992px <=width <=1200px) {
    #oserenvision h1 {
        font-size: 45px;
    }
}

@media (max-width: 992px) {
    #oserenvision p {
        font-size: 15px;
    }
}

/* end of oserenvision */
/* oserenSplitgreenbar */
.oserenSplitgreenbar {
    background: #0d271c;
    color: #e6e6e6;
}

#oserenSplitgreenbar h2 {
    font-size: 1.7em;
    margin-bottom: 0;
}

@media (min-width: 992px) {
    #oserenSplitgreenbar h2 {
        margin-left: -30px;
        margin-bottom: 0;
    }
}

@media (max-width: 992px) {
    #oserenSplitgreenbar h2 {
        font-size: 18px;
    }
}

/* end of oserenSplitgreenbar */
/* footer */

#oserenEndfooter .footerLogo {
    height: 7em;
    border: 3px solid white;
    overflow: visible;
}

#oserenEndfooter .footerLogoAmzcom {
    height: 5em;
    border: 3px solid white;
    overflow: visible;
    border-radius: 10px;
}

#oserenEndfooter .privaceAndRights p {
    font-size: 15px;
    text-align: center;
}

#oserenEndfooter {
    background-color: #05130d;
    background-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.95),
        30%,
        rgba(0, 0, 0, 0)
    );
    color: #a0a0a0;
}

#oserenEndfooter .container .row a h6 {
    color: #a0a0a0;
    transition: 0.3s;
}

#oserenEndfooter .container .row a h6:hover {
    color: #5fe4a9;
}

@media (992px <=width <=1200px) {
    #oserenEndfooter .footerLogoAmzcom {
        height: 4.5em;
    }

    #oserenEndfooter .address {
        font-size: 12px;
    }

    #oserenEndfooter h6 {
        font-size: 10px;
    }

    #oserenEndfooter h5 {
        font-size: 18px;
    }
}

/* scrol to top */
.oserenScroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: -15px;
    z-index: 99999;
    background: #0d271c;
    width: 44px;
    height: 44px;
    border-radius: 50px;
    transition: all 0.4s;
}

.oserenScroll-top i {
    font-size: 24px;
    color: #fff;
    line-height: 0;
}

.oserenScroll-top:hover {
    background: #378663;
    color: #fff;
}

.oserenScroll-top.active {
    visibility: visible;
    opacity: 1;
    bottom: 15px;
}

/* end of scrol to top */
/* end of oserenGeneral */
/* oseren home page */
/* oserenbanner */
#oserenindexbanner {
    background-size: cover;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url("../images/banners/oserenbanner.png");
    background-position: center;
    height: 75vh;
}

#oserenindexbanner h1 {
    font-size: 65px;
}

#oserenindexbanner h1 span {
    color: #5fe4a9;
}

@media (min-width: 992px) {
    #oserenindexbanner {
        background-size: contain;
    }

    #oserenindexfloatingcolumn {
        position: absolute;
        top: 90%;
        width: 350px;
        border-radius: 15px;
    }

    #oserenindexfloatingimg {
        padding: 1em;
        height: 8em;
    }
}

@media (992px <=width <=1200px) {
    #oserenindexbanner h1 {
        font-size: 40px;
    }

    #oserenindexfloatingcolumn {
        position: absolute;
        top: 88%;
        width: 250px;
        border-radius: 15px;
    }

    #oserenindexfloatingimg {
        padding: 1em;
        height: 6em;
    }
}

@media (max-width: 992px) {
    #oserenindexbanner h1 {
        font-size: 40px;
    }

    #oserenindexbanner {
        min-height: 80vh;
    }

    #oserenindexfloatingcolumn {
        position: absolute;
        top: 95%;
        width: 12em;
        border-radius: 15px;
    }

    #oserenindexfloatingimg {
        padding: 1em 0.5em;
        height: 4.5em;
    }
}

/* @media (min-width: 992px) {
    #oserenindexfloatingcolumn {
        position: absolute;
        bottom: -4rem;
        width: 350px;
        border-radius: 15px;
    }

    #oserenindexfloatingimg {
        padding: 1em;
        height: 8em;
    }
}

@media (max-width: 992px) {
    #oserenindexfloatingcolumn {
        position: absolute;
        bottom: -1.85em;
        width: 7em;
        border-radius: 10px;
    }

    #oserenindexfloatingimg {
        padding: 0.2em;
        height: 3.5em;
    }
}

#oserenindexbanner .banner-img {
    position: relative;
} */

/* end of oserenbanner */

/* naoLeveler */
#naoLeveler .nao {
    background-color: #444444;
}

#naoLeveler .before {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
        1px 1px 0 #000;
}

#naoLeveler h1 span {
    color: #d5001a;
}

#naoLeveler h2 {
    color: white;
}

#naoLeveler h2 .technology {
    color: white;
}

#naoLeveler p {
    color: white;
}

#naoLeveler h2 span {
    color: #d5001a;
}

#naoLeveler h2 .boldFont {
    color: #5d5c5c;
    font-weight: 800;
}

#naoLeveler .card {
    border-radius: 20px;
}

#naoLeveler .carousel-control-prev,
#naoLeveler .carousel-control-next {
    width: 40px;
    height: 40px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 50%;
    color: #6c757d;
}

#naoLeveler .carousel-control-prev-icon,
#naoLeveler .carousel-control-next-icon {
    background-color: #6c757d;
    border-radius: 50%;
    color: #fff;
    padding: 10px;
    background-size: 26px;
}

#naoLeveler .carousel-control-prev {
    margin-top: auto;
    left: 20px;
    bottom: 2px;
}

#naoLeveler .carousel-control-next {
    margin-top: auto;
    left: 80px;
    bottom: 2px;
}

#naoLeveler li {
    position: relative;
    list-style: none;
    margin-left: 20px;
}

#naoLeveler li::before {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #d5001a;
    top: 12px;
    left: -20px;
}
/* #naoLeveler li::before {
    content: "\2022";
    font-weight: 1000;
    font-size: 30px;
    display: inline-block;
    width: 0.7em;
    color: #d5001a;
} */

#naoLeveler img {
    height: 100%;
    width: 100%;
}

#naoLeveler .imgComContainer {
    position: relative;
    height: 25em;
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
}

#naoLeveler img {
    width: 100%;
    height: 100%;
    position: absolute;
}

#my-image {
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

#naoLeveler #slider {
    position: relative;
    width: calc(100% + 160px);
    height: 100%;
    margin-left: -80px;
    background-color: transparent;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

#naoLeveler #slider::-webkit-slider-thumb {
    height: 300px;
    width: 150px;
    background: url("../images/icon/slidericon.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

#my-image1 {
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

#naoLeveler #slider1 {
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    width: calc(100% + 160px);
    height: 100%;
    margin-left: -80px;
    background-color: transparent;
    outline: none;
}

#naoLeveler #slider1::-webkit-slider-thumb {
    height: 300px;
    width: 150px;
    background: url("../images/icon/slidericon.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

#my-image2 {
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

#naoLeveler #slider2 {
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    width: calc(100% + 160px);
    height: 100%;
    margin-left: -80px;
    background-color: transparent;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

#naoLeveler #slider2::-webkit-slider-thumb {
    height: 300px;
    width: 150px;
    background: url("../images/icon/slidericon.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

@media (min-width: 992px) {
    #naoLeveler h2 {
        font-size: 44px;
    }

    #naoLeveler h1 {
        font-size: 70px;
    }

    #naoLeveler h4 {
        font-size: 45px;
    }

    #naoLeveler ul {
        font-size: 22px;
        color: #707070;
    }
}
@media (min-width: 1200px) and (max-width: 1439px) {
    #naoLeveler h1 {
        font-size: 64px;
    }
    #naoLeveler h4 {
        padding-right: 0 !important;
    }
}

@media (992px <=width <=1200px) {
    #naoLeveler h2 {
        font-size: 25px;
    }

    #naoLeveler h2.nanomized {
        font-size: 35px;
    }

    #naoLeveler h1 {
        font-size: 45px;
    }

    #naoLeveler h4 {
        font-size: 30px;
    }

    #naoLeveler ul {
        font-size: 13px;
    }

    #naoLeveler li {
        list-style: none;
        text-indent: -0.4em;
    }
}

@media (max-width: 992px) {
    #naoLeveler h2 {
        font-size: 20px;
    }

    #naoLeveler h2:nth-child(2) {
        font-size: 26px;
        font-weight: bold;
    }

    #naoLeveler h1 {
        font-size: 38px;
        font-weight: normal;
        display: inline-block;
    }

    #naoLeveler .dolceVitaHeavy {
        font-size: 23px;
        position: absolute;
        right: 0;
    }

    #naoLeveler h4 {
        font-size: 35px;
    }

    #naoLeveler ul {
        font-size: 15px;
        margin-top: 45px;
    }

    #naoLeveler li::before {
        top: 7px;
    }

    #naoLeveler #myCarousel .imgComContainer {
        height: 250px;
    }

    #naoLeveler #slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 220px;
    }

    #naoLeveler #slider2::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 220px;
    }
}

/* @media (min-width: 375px) and (max-width: 374px) {
    #naoLeveler .dolceVitaHeavy {
        margin-right: 75px;
    }
}

@media (max-width: 374px) {
    #naoLeveler .dolceVitaHeavy {
        margin-right: 26px;
    }
} */

/* end of naoLeveler */
/* uvDressing */
#uvDressing {
    background: linear-gradient(90deg, #ffffff 20%, rgba(0, 0, 0, 0) 20%),
        url("../images/bgShapes/naolines.png");
    background-size: cover;
}

#uvDressing .container {
    background-color: white;
}

@media (max-width: 992px) {
    #uvDressing .container:first-child {
        width: 80%;
    }

    #uvDressing h1 {
        font-size: 40px;
    }
}

#uvDressing h1 span {
    border-bottom: 4px solid #e41c26;
}

#uvDressing p {
    color: #555555;
}

#uvDressing p.bold {
    font-weight: 800;
}

#uv-container .container {
    background-color: white;
}

#uv-container h1 span {
    border-bottom: 4px solid #e41c26;
}

#uv-container p {
    color: #555555;
}

#uv-container p.bold {
    font-weight: 800;
}

@media (max-width: 992px) {
    #uv-container h1 {
        font-size: 40px;
    }
}

/* end of uvDressing */
/* oserensquarecards */
#oserenSquarecards {
    background-color: #444444;
    color: #ffffff;
    padding: 100px 0 100px 20px;
}

#oserenSquarecards h1 span {
    border-bottom: 4px solid white;
}

@media (min-width: 992px) {
    #oserenSquarecards .container {
        position: relative;
    }

    #oserenSquarecards img {
        position: absolute;
        height: 750px;
        width: 750px;
        bottom: -100px;
        right: -85px;
    }

    #oserenSquarecards h1 {
        font-size: 55px;
    }
}

@media (992px <=width <=1200px) {
    #oserenSquarecards img {
        position: absolute;
        height: 750px;
        width: 650px;
        bottom: -100px;
        right: -70px;
    }
}

@media (max-width: 992px) {
    #oserenSquarecards {
        padding: 50px 0 50px 10px;
    }

    #oserenSquarecards h1 {
        font-size: 40px;
    }
}

/* end of oserensquarecards */
/* multiCleaner */
#multiCleaner h1 span {
    border-bottom: 4px solid #e41c26;
}

@media (min-width: 992px) {
    #multiCleaner h1 {
        font-size: 50px;
        letter-spacing: 3px;
    }

    #multiCleaner p {
        font-size: 20px;
    }
}

#multiCleaner p span {
    font-weight: bold;
}

.oserenBackground {
    position: relative;
}

@media (min-width: 992px) {
    .oserenBackground img {
        position: absolute;
        width: 32em;
        height: 11em;
        right: 0;
        left: 0;
        margin-left: auto;
        margin-right: auto;
        bottom: -35px;
    }
}

@media (max-width: 992px) {
    #multiCleaner h1 {
        font-size: 40px;
    }

    .oserenBackground img {
        position: absolute;
        width: 18em;
        height: 6em;
        right: 0;
        left: 0;
        margin-left: auto;
        margin-right: auto;
        bottom: -14px;
    }
}

/* end of multiCleaner */
/* uvDressing */
#ultraShine {
    background: linear-gradient(-90deg, #ffffff 20%, rgba(0, 0, 0, 0) 20%),
        url("../images/bgShapes/naolines.png");
}

#ultraShine .container {
    background-color: white;
}

#ultraShine h1 span {
    border-bottom: 4px solid #e41c26;
}

#ultraShine p {
    color: #555555;
}

#ultraShine p.bold {
    font-weight: 800;
}

#ultraShineImg {
    background: linear-gradient(90deg, #ffffff 20%, rgba(0, 0, 0, 0) 20%),
        url("../images/bgShapes/naolines.png");
}

#ultraShineImg .container {
    background-color: white;
    width: 80%;
}

@media (max-width: 992px) {
    #ultraShine h1 {
        font-size: 35px;
    }
}

/* end of uvDressing */
/* end of Oseren Home page */
/* oseren professional page */
/* professionalBanner */
#oserenProductbanner {
    background-size: cover;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url("../images/banners/oserenprofessionalbanner.png");
    height: 80vh;
}

#oserenProductbanner h1 {
    color: white;
    font-size: 80px;
}

#oserenProductbanner h1 span {
    color: #02a43c;
    font-family: "Yellowtail", cursive;
}

#oserenProductbanner p {
    font-size: 35px;
    color: white;
    font-family: Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
        "Helvetica Neue", sans-serif;
}

@media (min-width: 1200px) and (max-width: 1439px) {
    #oserenProductbanner h1 {
        font-size: 70px;
    }

    #oserenProductbanner p {
        font-size: 28px;
    }
}

@media (992px <=width <=1200px) {
    #oserenProductbanner h1 {
        font-size: 50px;
    }

    #oserenProductbanner p {
        font-size: 20px;
    }
}

@media (max-width: 992px) {
    #oserenProductbanner {
        height: 60vh;
        background-position: 80%;
    }

    #oserenProductbanner h1 {
        font-size: 40px;
    }

    #oserenProductbanner p {
        font-size: 15px;
    }
}

/* end of professionalBanner */
/* oserenCards */
#oserenCards {
    background-color: #f6f6f6;
}

#oserenCards .card {
    min-height: 435px;
    transition: all 0.5s ease 0s;
    border-radius: 20px;
    border: 0;
}

@keyframes popBackground {
    0% {
        height: 2px;
        border-top-left-radius: 90%;
        border-top-right-radius: 90%;
    }

    50% {
        height: 4px;
        border-top-right-radius: 90%;
    }

    75% {
        height: 6px;
        border-top-right-radius: 95%;
    }

    100% {
        height: 8px;
        border-top-right-radius: 100%;
    }
}

#oserenCards h2 {
    color: #444444;
}

@media (min-width: 992px) {
    #oserenCards h2 {
        font-size: 50px;
    }

    #oserenCards .bzazaCard p {
        font-size: 18px;
        line-height: 21px;
    }

    #oserenCards .bzazaCard h5 {
        font-size: 17px;
    }

    #oserenCards .bzazaCard h5 span {
        font-size: 18px;
    }

    #oserenCards .bzazaCard h6 {
        font-size: 15px;
    }

    #oserenCards a:nth-child(1) {
        width: 80px;
        height: 35px;
        font-size: 16px;
        color: #3b3735;
        border: 0.5px solid #18382e;
        transition: all 0.25s ease-out 0s;
    }

    #oserenCards a:nth-child(1):hover {
        background-color: #18382e;
        width: 90px;
        height: 44px;
        font-size: 16px;
        color: white;
        border: 0.5px solid #18382e;
    }

    #oserenCards a:nth-child(n + 2) {
        width: 80px;
        height: 35px;
        font-size: 16px;
        color: #3b3735;
        border: 0.5px solid #18382e;
        transition: all 0.25s ease-out 0s;
    }

    #oserenCards a:nth-child(n + 2):hover {
        background-color: #18382e;
        width: 90px;
        height: 44px;
        font-size: 16px;
        color: white;
        border: 0.5px solid #18382e;
    }
}

@media (min-width: 1200px) and (max-width: 1439px) {
    #oserenCards h2 {
        font-size: 42px;
    }
}

#oserenCards .bzazaCard .card {
    flex-direction: row;
    transition: all 0.5s ease;
    user-select: none;
    overflow: hidden;
}

#oserenCards .bzazaCard .card img {
    border-radius: 20px;
}

#oserenCards .bzazaCard p {
    color: #3b3735;
}

#oserenCards .bzazaCard h1 {
    font-family: "Applied Sans Pro", sans-serif;
    font-weight: 500;
    line-height: 30px;
    font-weight: bold;
}

#oserenCards .bzazaCard h3 {
    font-family: "Bank Gothic", sans-serif;
    font-size: 20px;
}

#oserenCards .bzazaCard h1,
.bzazaCard h3 {
    color: #dc0000;
}

#oserenCards .bzazaCard h5 {
    font-family: "Barlow Condensed", sans-serif;
    color: #18382e;
    font-weight: 600;
}

#oserenCards .bzazaCard h5 span {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 600;
    color: #ee372e;
}

#oserenCards .bzazaCard h6 {
    color: #18382e;
    font-weight: bold;
}

.progressBar {
    line-height: 10px;
}

.progressBar .progressBar-item {
    background: #575763;
    width: 7.8%;
    height: 18px;
    display: inline-block;
    margin: 0;
}

@media (992px <=width <=1200px) {
    .progressBar .progressBar-item {
        width: 7%;
    }

    #oserenCards .bzazaCard h5 {
        font-size: 11px;
    }

    #oserenCards .bzazaCard h5 span {
        font-size: 12px;
    }

    #oserenCards .bzazaCard h1 {
        font-size: 30px;
    }

    #oserenCards .bzazaCard h3 {
        font-size: 15px;
    }
}

@media (min-width: 1200px) and (max-width: 1439px) {
    #oserenCards .bzazaCard h1 {
        font-size: 35px;
    }
}

@media (max-width: 992px) {
    .progressBar .progressBar-item {
        width: 8.6%;
    }

    #oserenCards .bzazaCard .card {
        margin-top: 20px;
        flex-direction: column;
        align-items: center;
    }

    /* #oserenCards .bzazaCard .card img {
        height: max-content;
    } */

    #oserenCards .bzazaCard .card .card-body {
        width: 90%;
    }

    #oserenCards h1 {
        font-size: 27px;
    }

    #oserenCards h3 {
        font-size: 14px;
        font-weight: bold;
    }

    #oserenCards .bzazaCard p {
        font-size: 15px;
    }

    /* #oserenCards .bzazaCard #progressBar {
        position: relative;
    }

    #oserenCards .bzazaCard #progressBar .floatRight {
        float: none;
        position: absolute;
        right: 0;
    } */

    #oserenCards .bzazaCard h5 {
        font-size: 11px;
    }

    #oserenCards .bzazaCard h5 span {
        font-size: 12px;
    }

    #oserenCards .bzazaCard h6 {
        font-size: 10px;
    }

    #oserenCards a:nth-child(1) {
        width: 47px;
        height: 25px;
        font-size: 8px;
        color: #3b3735;
        border: 0.5px solid #18382e;
        padding: 5px 2px;
    }

    #oserenCards a:nth-child(1):hover {
        background-color: #18382e;
        width: 47px;
        height: 25px;
        font-size: 8px;
        color: white;
        border: 0.5px solid #18382e;
        padding: 5px 2px;
    }

    #oserenCards a:nth-child(n + 2) {
        width: 47px;
        height: 25px;
        font-size: 8px;
        color: #3b3735;
        border: 0.5px solid #18382e;
        padding: 5px 2px;
    }

    #oserenCards a:nth-child(n + 2):hover {
        background-color: #18382e;
        width: 47px;
        height: 25px;
        font-size: 8px;
        color: white;
        border: 0.5px solid #18382e;
    }

    #oserenCards a:nth-child(2n + 2) {
        background-color: #18382e;
        width: 47px;
        height: 25px;
        font-size: 8px;
        color: white;
        border: 0.5px solid #18382e;
        padding: 5px 2px;
    }

    #oserenCards a:nth-child(2n + 2):hover {
        background-color: white;
        width: 47px;
        height: 25px;
        font-size: 8px;
        color: #3b3735;
        border: 0.5px solid #18382e;
    }
}

@media (max-width: 540px) {
    .progressBar .progressBar-item {
        width: 8.1%;
    }
}

@media (max-width: 380px) {
    .progressBar .progressBar-item {
        width: 7.8%;
    }
}

.progressBar .progressBar-item:first-child {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

.progressBar .progressBar-item:last-child {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}

.progressBar .progressBar-item.active {
    background: #ee372e;
}

.progressBar .progressBar-item.half {
    background: linear-gradient(90deg, #ee372e 50%, #575763 50%);
}

.floatRight {
    float: right;
}

#progressBar ul {
    list-style: none;
    margin: 0;
    width: 100%;
}

#oserenCards .bzazaCard .card .imgContainer {
    max-width: 100%;
}

/* #oserenCards .bzazaCard .dilution{
    display: inline-block;
    padding: 5px 20px;
    border: 1px solid #EF7E22;
    border-radius: 8px;
} */

#oserenCards .bzazaCard .bottle span {
    color: #ef7e22;
}

#oserenCards .yellowCard .card:hover .backgroundEffect,
.yellowCard .progressBar .progressBar-item.active {
    background: #ef7e22;
}

.yellowCard h1,
.yellowCard h3,
.yellowCard h5 span {
    color: #ef7e22 !important;
}

/* end of oserenCards */
/* end of oseren professional page */
/* oseren events page */
/* osereneventsbanner */
.oserenEventsBanner {
    background-size: cover;
    background-image: url("../images/banners/osereneventsbanner.png");
    min-height: 50vh;
}

.oserenEventsBanner h1 span {
    color: #02a43c;
    font-weight: 200;
    font-size: 60px;
}

.oserenEventsBanner h1 {
    font-size: 65px;
}

.oserenEventsBanner p {
    font-size: 25px;
}

@media (992px <=width <=1200px) {
    .oserenEventsBanner h1 {
        font-size: 50px;
    }

    .oserenEventsBanner h1 span {
        font-size: 45px;
    }
}

@media (max-width: 992px) {
    .oserenEventsBanner {
        background-position: 80%;
    }

    .oserenEventsBanner h1 {
        font-size: 45px;
    }

    .oserenEventsBanner h1 span {
        font-size: 40px;
    }

    .oserenEventsBanner p {
        font-size: 14px;
    }
}

/* end of osereneventsbanner */
/* oserenEventsCareer */
#eventsCareer .redButton {
    width: 300px;
}

#eventsCareer h1 {
    color: #25282a;
}

#eventsCareer p {
    font-size: 15px;
    color: #555555;
    line-height: 25px;
}

@media (992px <=width <=1200px) {
    #eventsCareer .redButton {
        width: 250px;
    }

    #eventsCareer h2 {
        font-size: 25px;
    }

    #eventsCareer p {
        font-size: 10px;
    }
}

@media (max-width: 992px) {
    #eventsCareer h2 {
        font-size: 19px;
    }
}

/* end of oserenEventsCareer */
/* oserenUpcommingEvents */
#oserenUpcommingEvents {
    color: #444444;
}

#oserenUpcommingEvents h1 {
    font-size: 50px;
}

@media (992px <=width <=1200px) {
    #oserenUpcommingEvents h1 {
        font-size: 37px;
    }
}

@media (max-width: 992px) {
    #oserenUpcommingEvents h1 {
        font-size: 15px;
    }

    #oserenUpcommingEvents h5 {
        font-size: 15px;
    }
}

/* end of oserenUpcommingEvents */
/* oserenEventsUpcommingCards */

#oserenEventsUpcommingCards h5 .raleway {
    display: inline !important;
    width: fit-content;
    margin: 0;
    color: #444444;
}

#oserenEventsUpcommingCards h5 small {
    font-size: 15px;
}

#oserenEventsUpcommingCards h5 {
    color: #444444;
}

.previosSympol {
    color: #444444;
}

.nextSympol {
    color: #aaaaaa;
}

@media (992px <=width <=1200px) {
    .previosSympol,
    .nextSympol {
        font-size: 12px !important;
    }
}

@media (max-width: 992px) {
    .previosSympol,
    .nextSympol {
        font-size: 10px !important;
    }
}

#oserenEventsUpcommingCards .today {
    width: 80px;
    color: #4b4f58;
    border: 1px solid #707070;
    background-color: white;
}

#oserenEventsUpcommingCards .today:hover {
    width: 80px;
    color: #4b4f58;
    border: 1px solid #707070;
    color: white;
    background-color: #4b4f58;
}

#oserenEventsUpcommingCards .card {
    border: 0;
    color: #555555;
}

#oserenEventsUpcommingCards .card img {
    width: 100%;
}

#oserenEventsUpcommingCards .card h5 {
    font-size: 18px;
    font-weight: bold;
}

#oserenEventsUpcommingCards .prevnexEvent p {
    font-size: 20px;
}

/* end of oserenEventsUpcommingCards */
/* relatedEvents */

#relatedEvents .card {
    background-color: #fff;
    border: none;
    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.19);
    transition: all 0.5s ease 0s;
    cursor: pointer;
    user-select: none;
}

#relatedEvents .image-container {
    position: relative;
    width: 100%;
}

#relatedEvents .image-container img {
    width: 100%;
}

#relatedEvents .card .post-detail-container p {
    font-size: x-small;
}

#relatedEvents .card .post-detail-container a {
    font-size: small;
}

#relatedEvents .card .post-detail-container {
    margin: 20px 35px;
}

#relatedEvents .card .backgroundEffect {
    bottom: 0;
    height: 0px;
    width: 100%;
}

@media (min-width: 992px) {
    #relatedEvents .card:hover {
        box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2),
            0 6px 20px 0 rgba(0, 0, 0, 0.19);
        color: #fff;
        transform: scale(1.025);
    }

    #relatedEvents .card:hover .backgroundEffect {
        bottom: 0;
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: -1;
        background: #163226;
        animation: pop1Background 0.3s ease-in;
    }

    #relatedEvents .card:hover a {
        color: #5fe4a9;
        font-weight: bold;
    }

    #relatedEvents .card:hover a:hover {
        color: white;
        font-weight: bold;
    }
}

@keyframes pop1Background {
    0% {
        height: 15px;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
    }

    50% {
        height: 56.5px;
        border-top-left-radius: 75%;
        border-top-right-radius: 75%;
    }

    75% {
        height: 113px;
        border-top-left-radius: 85%;
        border-top-right-radius: 85%;
    }

    100% {
        height: 320px;
        border-top-left-radius: 100%;
        border-top-right-radius: 100%;
    }
}

@media (min-width: 992px) {
    #relatedEvents h1 {
        font-size: 50px;
        color: #444444;
    }
}

@media (992px <=width <=1200px) {
    #relatedEvents h1 {
        font-size: 40px;
    }

    #relatedEvents h4 {
        font-size: 15px;
    }
}

/* end of relatedEvents */
/* oserenEventsSquarecards */
#oserenEventsSquarecards p {
    font-size: 15px;
}

#oserenEventsSquarecards h1 {
    font-size: 35px;
}

#oserenEventsSquarecards #oserenYellow {
    background-color: #444444;
    color: #ffffff;
}

#oserenEventsSquarecards a {
    width: 300px;
    height: 60px;
    color: white;
    border: 2px solid white;
    border-radius: 0;
}

#oserenEventsSquarecards a:hover {
    width: 300px;
    height: 60px;
    background-color: #103224;
    color: white;
    border: 2px solid white;
    border-radius: 0;
}

@media (min-width: 992px) {
    .oserenEventsSquarecards {
        margin: 150px 0;
    }
}

@media (992px <=width <=1200px) {
    #oserenEventsSquarecards p {
        font-size: 11px;
        line-height: 15px;
    }

    #oserenEventsSquarecards h1 {
        font-size: 25px;
    }

    #oserenEventsSquarecards a {
        width: 200px;
    }

    #oserenEventsSquarecards a:hover {
        width: 200px;
    }
}

@media (max-width: 992px) {
    #oserenEventsSquarecards h1 {
        font-size: 30px;
    }
}

/* end of oserensquarecards */
/* end of oseren events page */
/* oseren events 1 page */
/* oserenEventsVideo */
#oserenEventsVideo {
    padding: 4em 0;
}

#oserenEventsVideo p {
    font-size: 15px;
    line-height: 24px;
    color: #555555;
}

#oserenEventsVideo .pb-video {
    transition: transform 0.5s;
}

#oserenEventsVideo .pb-video:hover {
    transform: scale(1.05);
}

#oserenEventsVideo a {
    width: 100%;
    height: 50px;
}

@media (992px <=width <=1200px) {
    #oserenEventsVideo h1 {
        font-size: 25px;
    }

    #oserenEventsVideo a {
        width: 220px;
    }
}

@media (max-width: 992px) {
    #oserenEventsVideo a {
        width: 100%;
        height: 50px;
        font-size: 9px;
        font-weight: bold;
    }
}

/* End of oserenEventsVideo */

/* oserenTrainingCourse */
#oserenTrainingCourse {
    background-image: url("../images/banners/oserentrainingcourse.png");
    background-size: cover;
    color: white;
}

@media (min-width: 992px) {
    #oserenTrainingCourse h1 {
        font-size: 50px;
    }
}

@media (992px <=width <=1200px) {
    #oserenTrainingCourse h1 {
        font-size: 35px;
    }
}

@media (max-width: 992px) {
    #oserenTrainingCourse {
        background-position: 36%;
    }

    #oserenTrainingCourse h1 {
        font-size: 18px;
    }

    #oserenTrainingCourse h5 {
        font-size: 15px;
    }
}

/* end of oserenTrainingCourse */
/* oserenTestimonial */
.oserenTestimonial {
    background-color: #dedede;
    min-height: 420px;
    margin-bottom: 100px;
}

#oserenTestimonial .carousel-indicators {
    bottom: -10px;
}

#oserenTestimonial .carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 100%;
}

#oserenTestimonial .carousel-indicators .active {
    background-color: #4b4b4b;
}

#oserenTestimonial p {
    font-size: 20px;
    font-style: italic;
    font-family: "Raleway", sans-serif;
    color: #444444;
}

@media (min-width: 992px) {
    #oserenTestimonial .carousel-indicators {
        bottom: -120px;
    }
}

@media (992px <=width <=1200px) {
    #oserenTestimonial p {
        font-size: 15px;
    }

    #oserenTestimonial h5 {
        font-size: 17px;
    }
}

/* end of oserenTestimonial */
/* oserenSlider */
.oserenSlider {
    min-height: 600px;
}

@media (min-width: 992px) {
    .oserenSlider {
        min-height: 800px;
    }
}

#oserenSlider .index0 {
    background-color: #2699fb;
    color: white;
}

#oserenSlider .index2 {
    background-color: #bce0fd;
    color: #2699fb;
}

#oserenSlider .index1 {
    background-color: #f1f9ff;
    color: #bce0fd;
}

#oserenSlider h1 {
    font-size: 50px;
    color: #444444;
}

#oserenSlider .card-body h5 {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
}

#oserenSlider .card-body p {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 100;
}

/* end ofoserenSlider */
/* oserenTrainingCoursesForm */

#oserenTrainingCoursesForm .grey {
    background-color: #f6f6f6;
}

/*end of oserenTrainingCoursesForm */
/* end of oseren events 1 page */

/* nanoblogbanner */
.oserenBlogbanner {
    background-size: cover;
    background-image: url("../images/banners/oserenblogbanner.png");
    min-height: 50vh;
}

.oserenBlogbanner h2 {
    font-size: 70px;
}

.oserenBlogbanner p {
    font-size: 25px;
}

@media (max-width: 992px) {
    .oserenBlogbanner {
        background-position: 80%;
    }

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

    .oserenBlogbanner p {
        font-size: 17px;
    }
}

/* end of nanoblogbanner */
/* oserenforourdistributorbanner */
.oserenforourdistributorbanner {
    background-size: cover;
    background-image: url("../images/banners/oserendistribyuterbanner.png");
    min-height: 50vh;
}

@media (min-width: 992px) {
    .oserenforourdistributorbanner h1 {
        font-size: 3.3em;
    }
}

@media (max-width: 992px) {
    .oserenforourdistributorbanner h1 {
        font-size: 1.5em;
    }
}

/* end of nanoforourdistributorbanner */
/* oserenContactBanner */
.oserenContactBanner {
    background-size: cover;
    background-image: url("../images/banners/oserencontactbanner.png");
    background-position: center;
    min-height: 50vh;
}

.oserenContactBanner h2 {
    font-size: 70px;
}

.oserenContactBanner p {
    font-size: 25px;
}

@media (max-width: 992px) {
    .oserenContactBanner h2 {
        font-size: 50px;
    }

    .oserenContactBanner p {
        font-size: 20px;
    }
}

/* end of oserenContactBanner */
/* Oseren Branches page */
#oserenBranchesBanner {
    background-color: #114831;
    color: white;
    height: 50vh;
}
#oserenBranchesBanner .row {
    height: 50vh;
}

@media (min-width: 992px) {
    #oserenBranchesBanner h1 {
        font-size: 50px;
    }
}

#branches .redButton {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #c61118;
    width: 130px;
    height: 37px;
    font-size: 10px;
    letter-spacing: 1px;
    border-radius: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: white;
    transition: all 0.3s;
}

#branches .redButton:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #103224;
    width: 130px;
    height: 37px;
    font-size: 10px;
    letter-spacing: 1px;
    border-radius: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: white;
}

@media (max-width: 992px) {
    #oserenBranchesBanner h1 {
        font-size: 35px;
    }
}

/* end of Oseren Branches page */

.lake-country-footer .container .row a h6:hover {
    color: #ffe100 !important;
}

/* lake General Section */
.yellowButton {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffe100;
    width: 200px;
    height: 50px;
    font-size: 13px;
    letter-spacing: 1px;
    border-radius: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: black;
    transition: all 0.3s;
}

.yellowButton:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0075be;
    width: 200px;
    height: 50px;
    font-size: 13px;
    letter-spacing: 1px;
    border-radius: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: white;
}

.lightBlueButton {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0075be;
    width: 200px;
    height: 50px;
    font-size: 13px;
    letter-spacing: 1px;
    border-radius: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: white;
    transition: all 0.3s;
}

.lightBlueButton:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffe100;
    width: 200px;
    height: 50px;
    font-size: 13px;
    letter-spacing: 1px;
    border-radius: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: black;
}

/* topbar */
.lakeTopbar {
    background: #06528b;
    height: 40px;
    font-size: 10px;
    color: #fff;
    padding: 0;
}

@media (992px <=width <=1200px) {
    .lakeTopbar {
        font-size: 8px;
    }
}

@media (min-width: 1200px) and (max-width: 1439px) {
    .lakeTopbar {
        font-size: 11px;
    }
}

.lakeTopbar .contact-info i {
    font-style: normal;
    color: #fff;
    line-height: 0;
}

.lakeTopbar .contact-info i a,
.lakeTopbar .contact-info i span {
    padding-left: 5px;
    color: #fff;
}

@media (max-width: 992px) {
    .lakeTopbar .contact-info i a,
    .lakeTopbar .contact-info i span {
        font-size: 11px;
        text-decoration: none;
    }
}

.lakeTopbar .contact-info i a {
    line-height: 0;
    text-decoration: none;
    letter-spacing: 2px;
}

@media (max-width: 992px) {
    .lakeTopbar .contact-info i a {
        letter-spacing: 0.4px;
    }
}

.lakeTopbar .contact-info i a:hover {
    color: #fff;
    /*
    text-decoration: underline;
    */
    text-decoration: none;
}

.lakeTopbar .social-links a {
    color: rgba(255, 255, 255, 0.7);
    line-height: 0;
    margin-left: 20px;
    text-decoration: none;
}

.lakeTopbar .social-links a:hover {
    color: #fff;
    text-decoration: none;
}

/* End of topbar */
/* navbar */

#navbarLake .yellowButton {
    background-color: #ffe100;
    width: 250px;
    height: 35px;
    font-size: 11px;
    letter-spacing: 1px;
    border-radius: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    color: black;
    transition: all 0.3s;
}

#navbarLake .yellowButton:hover {
    background-color: #0075be;
    width: 250px;
    height: 35px;
    font-size: 11px;
    letter-spacing: 1px;
    border-radius: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 00;
    color: white;
}

#navbarLake li {
    display: inline-block;
    position: relative;
}

#navbarLake li::after {
    content: "";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #ffe100;
    transform-origin: bottom center;
    transition: transform 0.25s ease-out;
}

#navbarLake li:hover::after {
    transform: scaleX(1);
    transform-origin: bottom center;
}

@media (min-width: 992px) and (max-width: 1300px) {
    #navbarLake li {
        font-size: 11px;
    }
}

@media (min-width: 1200px) and (max-width: 1439px) {
    #navbarLake li {
        font-size: 13px;
    }

    #navbarLake form {
        width: 300px;
    }

    #navbarLake form .form-control {
        width: 75%;
    }
}

@media (992px <=width <=1200px) {
    #navbarLake input {
        width: 150px;
    }

    #navbarLake .yellowButton {
        width: 150px;
    }

    #navbarLake #brand-logo {
        height: 1.7em;
    }
}

@media (min-width: 1200px) and (max-width: 1439px) {
    #navbarLake .yellowButton {
        width: auto;
        padding-left: 15px;
        padding-right: 15px;
    }

    #navbarLake .yellowButton:hover {
        width: auto;
    }
}

@media (min-width: 1300px) and (max-width: 1530px) {
    #navbarLake li {
        font-size: 12px;
    }
}

/* end of navbar */

/* oserenSplitgreenbar */
.lakeSplitbluebar {
    background: linear-gradient(
        to top,
        #0066b3 0%,
        #0066b3 50%,
        #0075cf 50%,
        #0075cf 100%
    );
}

#lakeSplitbluebar h2 {
    font-size: 1em;
    margin-bottom: 0;
    letter-spacing: 3px;
}

#lakeSplitbluebar h2 span {
    color: #ffe100;
    font-size: 1.4em;
    font-weight: 100;
    font-family: "Yellowtail", cursive;
}

@media (min-width: 992px) {
    #lakeSplitbluebar h2 {
        font-size: 1.7em;
        margin-bottom: 0;
        letter-spacing: 3px;
        margin-left: -30px;
        margin-bottom: 0;
    }
}

/* end of oserenSplitgreenbar */

/* stayuptodate */
#lakeStayuptodate {
    background-size: cover;
    background-image: url("../images/banners/nanopatternbanner.png");
}
@media (max-width: 991px) {
    #lakeStayuptodate {
        padding: 30px 0;
    }
}

#lakeStayuptodate .stay-min-height {
    min-height: 60vh;
}

#lakeStayuptodate h1 {
    font-size: 52px;
}

#lakeStayuptodate h1 span {
    font-size: 52px;
    color: #ffe100;
}

#lakeStayuptodate h5 {
    font-size: 25px;
}

#lakeStayuptodate label {
    margin-bottom: 2px;
}

#lakeStayuptodate .yellowButton:hover {
    border: 2px solid #ffe100;
}

@media (min-width: 992px) {
    #lakeStayuptodate h1 {
        font-size: 52px;
    }

    #lakeStayuptodate h5 {
        font-size: 25px;
    }
}

@media (992px <=width <=1200px) {
    #lakeStayuptodate h1 {
        font-size: 40px;
    }

    #lakeStayuptodate h5 {
        font-size: 20px;
    }

    #lakeStayuptodate label {
        font-size: 20px;
    }

    #lakeStayuptodate h1 span {
        font-size: 35px;
    }

    #lakeStayuptodate img {
        height: 70px;
    }
}

@media (max-width: 992px) {
    #lakeStayuptodate h1 {
        font-size: 32px;
    }

    #lakeStayuptodate h5 {
        font-size: 24px;
    }

    #lakeStayuptodate label {
        font-size: 20px;
    }

    #lakeStayuptodate h1 span {
        font-size: 35px;
    }

    #lakeStayuptodate img {
        height: 50px;
    }
    #lakeStayuptodate sup {
        left: 3px;
    }
}

#lakeStayuptodate label {
    margin-bottom: 2px;
}

/* end of stayuptodate */
/* footer */

#endfooter .lakeFooterLogo {
    height: 7em;
    overflow: visible;
}

/* scrol to top */
.lakeScroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: -15px;
    z-index: 99999;
    background: #ffe100;
    width: 44px;
    height: 44px;
    border-radius: 50px;
    transition: all 0.4s;
}

.lakeScroll-top i {
    font-size: 24px;
    color: #fff;
    line-height: 0;
}

.lakeScroll-top:hover {
    background: #b6a62c;
    color: #fff;
}

.lakeScroll-top.active {
    visibility: visible;
    opacity: 1;
    bottom: 15px;
}

/* end of scrol to top */
/* end of lakeGeneral */

/* lake Home page */
/* lakeindexbanner */

#lakeindexbanner {
    background-size: cover;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url("../images/banners/lakehomebanner.png");
    background-position: center;
    height: 70vh;
}

#lakeindexbanner h1 {
    font-size: 70px;
}

#lakeindexbanner h1 span {
    color: #ffe100;
}

@media (min-width: 992px) {
    #lakeindexbanner {
        background-size: contain;
    }

    #lakeindexfloatingcolumn {
        position: absolute;
        top: 86%;
        width: 242px;
    }

    #lakeindexfloatingimg {
        padding: 1.5em;
        height: 12em;
    }
}

@media (min-width: 1200px) and (max-width: 1439px) {
    #lakeindexfloatingcolumn {
        width: 215px;
    }
    #lakeindexfloatingimg {
        padding: 1.3em;
    }
}

@media (992px <=width <=1200px) {
    #lakeindexbanner h1 {
        font-size: 50px;
    }

    #lakeindexfloatingcolumn {
        position: absolute;
        top: 85%;
        width: 10em;
    }

    #lakeindexfloatingimg {
        padding: 1em 0.5em;
        height: 8em;
    }
}

@media (max-width: 992px) {
    #lakeindexbanner h1 {
        font-size: 45px;
    }

    #lakeindexbanner {
        min-height: 80vh;
        background-position: 10%;
    }

    #lakeindexfloatingcolumn {
        position: absolute;
        top: 93%;
        width: 9em;
    }

    #lakeindexfloatingimg {
        padding: 1em 0.5em;
        height: 8em;
    }
}

/* end of lakeindexbanner */

/* circleoverlay */
.bg-overlay-lakeCountry {
    /* background-repeat: no-repeat !important; */
    background-size: cover !important;
    background-position: center center !important;
    color: #fff;
    height: 18em;
    width: 18em;
    padding-top: 50px;
}

@media (min-width: 1200px) and (max-width: 1439px) {
    .bg-overlay-lakeCountry {
        height: 14em;
        width: 14em;
    }

    .bg-overlay-lakeCountry h2 {
        font-size: 1.7rem;
    }
}

#lakeCirclesoverlay h1 {
    font-size: 90px;
}

#lakeCirclesoverlay h1 span {
    color: #ffe100;
    font-size: 85px;
    font-family: "Yellowtail", cursive;
}

@media (min-width: 992px) {
    #lakeCirclesoverlayContainer {
        background-color: white;
        margin-bottom: 50px;
    }
}
@media (767px <=width <=992px) {
    #lakeCirclesoverlay h1 {
        font-size: 80px;
    }

    .bg-overlay-lakeCountry {
        height: 25em;
        width: 25em;
    }
}
@media (992px <=width <=1200px) {
    #lakeCirclesoverlay h1 {
        font-size: 50px;
    }

    .bg-overlay-lakeCountry {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        color: #fff;
        height: 18em;
        width: 18em;
        padding-top: 50px;
    }
}

@media (max-width: 992px) {
    #lakeCirclesoverlay h1 {
        font-size: 24px;
        margin-top: 5rem !important;
    }

    #lakeCirclesoverlay h1 span {
        font-size: 24px;
    }

    #lakeCirclesoverlay h2 {
        font-size: 35px;
    }
}

@media (min-width: 1200px) and (max-width: 1439px) {
    .lake-circles {
        justify-content: center !important;
        gap: 50px;
    }
    #lakeCirclesoverlay h1 {
        font-size: 68px;
    }
}

/* end of circle overlay */
/* lakeBlueCircle */
#lakeBlueCircle h1 {
    color: #0066b3;
}

#lakeBlueCircle p {
    font-size: 20px;
    color: #555555;
}

@media (min-width: 992px) {
    #lakeBlueCircle {
        background: linear-gradient(
            to left,
            #f9f9f9 0%,
            #f9f9f9 35%,
            #ffffff 35%,
            #ffffff 100%
        );
        position: relative;
    }

    #lakeBlueCircle .rowdotspattern {
        position: absolute;
        bottom: -90px;
        left: 50%;
        z-index: 1;
    }

    #lakeBlueCircle h1 {
        font-size: 55px;
        color: #0066b3;
    }
}

@media (992px <=width <=1200px) {
    #lakeBlueCircle {
        background: linear-gradient(
            to left,
            #f9f9f9 0%,
            #f9f9f9 35%,
            #ffffff 35%,
            #ffffff 100%
        );
        position: relative;
    }

    #lakeBlueCircle .rowdotspattern {
        position: absolute;
        bottom: -90px;
        left: 40%;
        z-index: 1;
    }

    #lakeBlueCircle h1 {
        font-size: 30px;
    }

    #lakeBlueCircle p {
        font-size: 14px;
    }

    #lakeBlueCircle .container {
        max-width: 820px;
    }
}

@media (max-width: 992px) {
    .colHybiredImageContainer {
        background: linear-gradient(
            to left,
            #f9f9f9 0%,
            #f9f9f9 50%,
            #ffffff 50%,
            #ffffff 100%
        );
    }

    .colContainer {
        position: relative;
    }

    .rowdotspattern {
        position: absolute;
        bottom: -40px;
        left: 10%;
        z-index: 1;
    }

    .rowdotspattern img {
        height: 120px;
        width: 120px;
    }
}

#lakeBlueCircle .colHybired {
    z-index: 0;
}

#lakeBlueCircle .colHybiredImage {
    z-index: 2;
}

/* end of lakeBlueCircle */
/* lakeHeavyDutyCards */
#lakeHeavyDutyCards .card {
    border: 0;
    background-color: #f9f9f9;
}

#lakeHeavyDutyCards .cardNumberHolder {
    position: relative;
}

#lakeHeavyDutyCards .cardNumber {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 12px;
    top: 0px;
    background-color: #004777;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 10px;
    font-weight: 800;
}

#lakeHeavyDutyCards .card img {
    width: 100%;
}

#lakeHeavyDutyCards .card-body h2 {
    color: #004777;
    box-sizing: border-box;
    font-size: 30px;
}

#lakeHeavyDutyCards .card-body p {
    color: #555555;
    font-size: 15px;
    line-height: 30px;
}

#lakeHeavyDutyCards .card-body .leftBorder {
    box-shadow: inset 10px 0px 0px 0px #004777;
}

#lakeHeavyDutyCards {
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #ffffff 15%,
        #f9f9f9 15%,
        #f9f9f9 100%
    );
}

@media (min-width: 992px) {
    #lakeHeavyDutyCards {
        margin-top: 200px;
    }

    #lakeHeavyDutyCards {
        background: linear-gradient(
            to bottom,
            #ffffff 0%,
            #ffffff 25%,
            #f9f9f9 25%,
            #f9f9f9 100%
        );
        padding-bottom: 100px;
    }
}

@media (992px <=width <=1200px) {
    #lakeHeavyDutyCards .card-body h2 {
        font-size: 18px;
    }
}

@media (max-width: 992px) {
    #lakeHeavyDutyCards {
        margin-top: 60px;
    }

    #lakeHeavyDutyCards .card-body h2 {
        font-size: 22px;
    }
}

/* end of lakeHeavyDutyCards */
/* lakeSlider */

#lakeSlider .carousel {
    width: 100%;
    padding: 30px;
    padding-top: 80px;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#lakeSlider .carousel__container {
    margin: 70px 0px;
    padding-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

#lakeSlider .categories__title {
    color: rgb(77, 55, 102);
    font-size: 28px;
    position: absolute;
    padding-left: 30px;
}

#lakeSlider .carousel-item {
    width: 280px;
    margin: 50px 5px;
    overflow: hidden;
    display: inline-block;
    cursor: pointer;
    -webkit-transition: 1000ms all;
    transition: 1000ms all;
}

@media (min-width: 992px) {
    #lakeSlider .carousel__container:has(.carousel-item:hover) .carousel-item {
        transform: translateX(-100px);
        opacity: 0.3;
    }

    #lakeSlider .carousel__container .carousel-item:hover ~ .carousel-item {
        transform: translateX(100px);
    }

    #lakeSlider
        .carousel__container:has(.carousel-item:hover)
        .carousel-item:hover {
        transform: translateX(0) scale(1.3);
        opacity: 1;
    }
}

@media (max-width: 992px) {
    #lakeSlider .carousel__container:hover .carousel-item:hover {
        opacity: 1;
    }
}

#lakeSlider .card-body {
    background-color: #2699fb;
    color: white;
}

#lakeSlider .card-body h5 {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
}

#lakeSlider .card-body p {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 100;
}

/* end of lakeSlider */
/* lakeBlogs */
#lakeBlogs h1 {
    color: #111111;
    font-family: "Poppins", sans-serif;
    font-weight: 800;
}

#lakeBlogs h4 {
    color: #242424;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
}

#lakeBlogs .card {
    min-height: 545px;
}

#lakeBlogs .card .dateContainer h2,
#lakeBlogs .card .dateContainer h6 {
    color: #0856a2;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    border-right: 1px solid #d8d8d8;
}

#lakeBlogs .card .card-body h4 {
    font-size: 22px;
    color: #222222;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
}

#lakeBlogs .card .card-body p {
    color: #707070;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
}

#lakeBlogs .card .card-body a {
    color: #0856a2;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    position: absolute;
    bottom: 40px;
}

#lakeBlogs .card .card-body a:hover {
    text-decoration: underline;
}

@media (992px <=width <=1200px) {
    #lakeBlogs h1 {
        font-size: 30px;
    }

    #lakeBlogs h4 {
        font-size: 17px;
    }

    #lakeBlogs .card .card-body h4 {
        font-size: 12px;
    }
}

@media (max-width: 992px) {
    #lakeBlogs h1 {
        font-size: 42px;
    }

    #lakeBlogs .card .card-body h4 {
        font-size: 17px;
    }
}

/* end of lakeBlogs */
/* end of lake Home page */

/* lakeCards Page*/
/* osereneventsbanner */
.lakeEventsBanner {
    background-size: cover;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url("../images/banners/lakecardsbanner.png");
    min-height: 60vh;
}

.lakeEventsBanner h1 span {
    color: #ffe100;
    font-weight: 800;
    font-size: 60px;
}

.lakeEventsBanner h1 {
    font-size: 65px;
}

.lakeEventsBanner p {
    font-size: 25px;
}

@media (992px <=width <=1200px) {
    .lakeEventsBanner h1 {
        font-size: 35px;
    }

    .lakeEventsBanner h1 span {
        font-size: 30px;
    }

    .lakeEventsBanner p {
        font-size: 15px;
    }
}

@media (max-width: 992px) {
    .lakeEventsBanner {
        background-position: 50%;
    }

    .lakeEventsBanner h1 {
        font-size: 35px;
    }

    .lakeEventsBanner h1 span {
        font-size: 30px;
    }

    .lakeEventsBanner p {
        font-size: 14px;
    }
}

/* end of osereneventsbanner */
/* lakeCards */
#lakeCards {
    background-color: #f6f6f6;
}

@media (min-width: 992px) {
    #lakeCards .card {
        min-height: 600px;
    }
}

#lakeCards .card {
    border-radius: 20px;
    border: 0;
    flex-direction: row;
    transition: all 0.5s ease;
    user-select: none;
    overflow: hidden;
    position: relative;
}

/* @media (min-width: 992px) {
    #lakeCards .fixedContainer {
        position: absolute;
        bottom: 20px;
    }
} */

#lakeCards .card:hover {
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transform: scale(1.025);
}

/*
#lakeCards .bzazaCard .card img {
    width: 40%;
    border-radius: 20px;
} */

#lakeCards .bzazaCard h3 {
    font-family: "Applied Sans Pro", sans-serif;
    color: #25282a;
    font-weight: 800;
    line-height: 26px;
}

#lakeCards .bzazaCard p {
    color: #4b4f58;
    font-size: 15px;
    font-weight: bold;
}

#lakeCards .bzazaCard h5 {
    color: #4b4f58;
    font-size: 15px;
    font-weight: bold;
}

#lakeCards .bzazaCard h5 span {
    color: #4b4f58;
    font-size: 15px;
    font-weight: 200;
}

#lakeCards a {
    height: 35px;
    font-size: 15px;
    color: #3b3735;
    border: 0.5px solid #353c4e;
    transition: all 0.2s ease-out 0s;
    padding: 5px;
}

#lakeCards a.grey {
    background-color: #353c4e;
    color: white;
}

@media (max-width: 992px) {
    #lakeCards .card {
        margin-top: 20px;
        flex-direction: column;
        align-items: center;
    }

    #lakeCards .card .card-body {
        width: 90%;
    }

    #lakeCards .bzazaCard p {
        font-size: 11px;
    }

    #lakeCards .bzazaCard h3 {
        font-size: 13px;
    }

    #lakeCards .bzazaCard h5 {
        color: #4b4f58;
        font-size: 11px;
        font-weight: bold;
    }

    #lakeCards .bzazaCard h5 span {
        color: #4b4f58;
        font-size: 11px;
        font-weight: 200;
    }

    #lakeCards a {
        height: 22px;
        font-size: 11px;
        color: #3b3735;
        border: 0.5px solid #353c4e;
        transition: all 0.2s ease-out 0s;
        padding: 2px 3px;
        text-align: center;
    }
}

/* colorselector */
#lakeCards .colorSelector input {
    border-radius: 50% !important;
}

#lakeCards .colorSelector .btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

#lakeCards .outterColor {
    border: 1px solid #f2edea;
    padding: 2px;
    border-radius: 50%;
    transition: all 0.1s;
}

#lakeCards .creme {
    background-color: #f2edea;
}

#lakeCards .o-creme:hover {
    border: 2px solid #f2edea;
}

#lakeCards .o-creme.active {
    background-color: #f2edea;
    padding: 4px;
}

#lakeCards .o-creme.active .creme {
    background-color: white;
}

#lakeCards .grey {
    background-color: #cecacb;
}

#lakeCards .o-grey:hover {
    border: 2px solid #cecacb;
}

#lakeCards .o-grey.active {
    background-color: #cecacb;
    padding: 4px;
}

#lakeCards .o-grey.active .grey {
    background-color: white;
}

#lakeCards .orange {
    background-color: #f77932;
}

#lakeCards .o-orange:hover {
    border: 2px solid #f77932;
}

#lakeCards .o-orange.active {
    background-color: #f77932;
    padding: 4px;
}

#lakeCards .o-orange.active .orange {
    background-color: white;
}

#lakeCards .blue {
    background-color: #204279;
}

#lakeCards .o-blue:hover {
    border: 2px solid #204279;
}

#lakeCards .o-blue.active {
    background-color: #204279;
    padding: 4px;
}

#lakeCards .o-blue.active .blue {
    background-color: white;
}

/* end of colorselector */

/* end of lakeCards */
/* end of lakeCards page*/

/* lakeBlogbanner */
.lakeBlogbanner {
    background-size: cover;
    background-image: url("../images/banners/lakeblogbanner.png");
    background-position: center center;
    min-height: 50vh;
}

.lakeBlogbanner h2 {
    font-size: 70px;
}

.lakeBlogbanner p {
    font-size: 25px;
}

@media (992px <=width <=1200px) {
    .lakeBlogbanner h2 {
        font-size: 55px;
    }

    .lakeBlogbanner p {
        font-size: 20px;
    }
}

@media (max-width: 992px) {
    .lakeBlogbanner h2 {
        font-size: 50px;
    }

    .lakeBlogbanner p {
        font-size: 13px;
    }
}

/* end of lakeBlogbanner */
/* lakeforourdistributorbanner */
.lakeforourdistributorbanner {
    background-size: cover;
    background-image: url("../images/banners/lakedistribuitorbanner.png");
    min-height: 50vh;
}

@media (min-width: 992px) {
    .lakeforourdistributorbanner h1 {
        font-size: 3.3em;
    }
}

@media (max-width: 992px) {
    .lakeforourdistributorbanner h1 {
        font-size: 1.5em;
    }
}

/* end of lakeforourdistributorbanner */
/* lakeContactbanner */
.lakeContactbanner {
    background-size: cover;
    background-image: url("../images/banners/lakecontactbanner.png");
    min-height: 50vh;
}

.lakeContactbanner h2 {
    font-size: 70px;
}

.lakeContactbanner p {
    font-size: 25px;
}

@media (max-width: 992px) {
    .lakeContactbanner {
        background-position: 80%;
    }

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

    .lakeContactbanner p {
        font-size: 18px;
    }
}

/* end of lakeContactbanner */
/* Oseren Branches page */
#lakeBranchesBanner {
    background-color: #0075be;
    color: white;
}

@media (min-width: 992px) {
    #lakeBranchesBanner h1 {
        font-size: 50px;
    }
}

#branches .yellowButton {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffe100;
    width: 130px;
    height: 37px;
    font-size: 10px;
    letter-spacing: 1px;
    border-radius: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: black;
    transition: all 0.3s;
}

#branches .yellowButton:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0075be;
    width: 130px;
    height: 37px;
    font-size: 10px;
    letter-spacing: 1px;
    border-radius: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: white;
}

@media (max-width: 992px) {
    #lakeBranchesBanner h1 {
        font-size: 35px;
    }
}

/* end of Oseren Branches page */

/*helper style*/
.whiteColor {
    color: white !important;
}