* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: "Montserrat", sans-serif;

}

body {

    overflow-x: hidden;

}



@font-face {

    font-family: Gotham-book;

    src: url(../fonts/Franklin-Gothic-Demi-Cond-Regular.ttf);

}

@font-face {

    font-family: Gotham-condensed;

    src: url(../fonts/Gotham-Medium.otf);

}

@font-face {

    font-family: Gotham-medium;

    src: url(../fonts/Gotham-Medium.otf);

}

@font-face {

    font-family: caviardreams;

    src: url(../fonts/caviordreams.ttf);

}



html {

    scroll-behavior: smooth;

}



a {

    text-transform: none !important;

}

li {

    list-style: none !important;

}



.navbar-nav li:last-child {

    background: #03a66c;

    border-radius: 20px;

    padding: 0 10px;

    margin: 0 10px;

}



.navbar-nav li:last-child .nav-link {

    color: azure;

}



.name {
    color: #fff;
    font-family: Gotham-book;
    font-weight: 600;
    letter-spacing: 1px;
}

.subname {
    color: #fff;
    font-family: caviardreams;
    font-weight: bolder;
    font-size: smaller;
    letter-spacing: 1px;
}



.top-banner {

    background-image: url(../image/074023666-teal-turquoise-aqua-and-mint-g.jpeg);

    background-size: cover;

    background-repeat: no-repeat;

    position: relative;

    z-index: 1;

    border-bottom: 10px solid #03a66c;

    overflow: hidden;

}

.top-banner video {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    width: 100% !important;

    transform: scale(1.3);

    z-index: -1;

    height: 100% !important;

}

.overlay {

    background-color: #03a66ca6;

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    width: 100%;

    z-index: -1;

}

.water-mark {

    position: absolute;

    left: 50%;

    /* transform: translate(-50%, 0%); */

    transform: translate(-44%, 0%);

    height: 80%;

}

.white-gradient {

    position: absolute;

    height: 250px;

    top: 0;

    left: 0;

    background-image: linear-gradient(white, #ffffff00);

    right: 0;

}

.nav-box,

.nav-box img {

    min-height: 300px;

    object-fit: cover;

    max-height: 300px;

    text-align: center;

}

.nav-box .overlay {

    z-index: 1;

    background-color: #00000096;

}



.sub-title {

    font-size: 18px;

    line-height: 30px;

    font-family: "Montserrat", sans-serif;

}

.nav-box p {

    z-index: 2;

    position: absolute;

    left: 50%;

    transform: translate(-50%, 0);

    color: #fff;

    font-size: 20px;

    font-weight: 600;

    top: 50%;

    text-transform: uppercase;

    text-align: center;

    margin: 0;

}

.image-half {

    max-height: 400px;

    width: 100%;

    object-fit: cover;

}



/* .product,footer{

    background-image: url(../images/textture.png);

    background-size: cover;

    background-position-y: repeat;

    background-position:center;

} */

/* .product img {

    max-width: 492px;

} */



.product .row:nth-child(even) .col-md-6:first-child {

    text-align: left;

    order: 1;

}



.product .row:nth-child(even) .col-md-6:last-child img {

    float: left;

}

.heading {

    text-align: center;

    color: #454343;

    font-size: 30px;

    font-weight: 700;

    position: relative;

    margin-bottom: 70px;

    text-transform: uppercase;

    z-index: 999;

}

.white-heading {

    color: #ffffff;

}

.heading:after {

    content: " ";

    position: absolute;

    top: 100%;

    left: 50%;

    height: 40px;

    width: 180px;

    border-radius: 4px;

    transform: translateX(-50%);

    background: url(img/heading-line.png);

    background-repeat: no-repeat;

    background-position: center;

}

.white-heading:after {

    background: url(https://i.ibb.co/d7tSD1R/heading-line-white.png);

    background-repeat: no-repeat;

    background-position: center;

}



.heading span {

    font-size: 18px;

    display: block;

    font-weight: 500;

}

.white-heading span {

    color: #ffffff;

}

/*-----Testimonial-------*/



.testimonial:after {

    position: absolute;

    top: -0 !important;

    left: 0;

    content: " ";

    background: url(img/testimonial.bg-top.png);

    background-size: 100% 100px;

    width: 100%;

    height: 100px;

    float: left;

    z-index: 99;

}

.testimonial:before {

    position: absolute;

    content: "";

    background: #000000a1;

    width: 100%;

    bottom: 0;

    left: 0;

    right: 0;

    top: 0;

}



.testimonial {

    min-height: 375px;

    position: relative;

    background: url(../images/086814517-water-droplet-splash-glass.jpeg);

    padding-top: 50px;

    padding-bottom: 50px;

    background-position: center;

    background-size: cover;

}

#testimonial4 .carousel-inner:hover {

    cursor: -moz-grab;

    cursor: -webkit-grab;

}

#testimonial4 .carousel-inner:active {

    cursor: -moz-grabbing;

    cursor: -webkit-grabbing;

}

#testimonial4 .carousel-inner .item {

    overflow: hidden;

}



.testimonial4_indicators .carousel-indicators {

    left: 0;

    margin: 0;

    width: 100%;

    font-size: 0;

    height: 20px;

    bottom: 15px;

    padding: 0 5px;

    cursor: e-resize;

    overflow-x: auto;

    overflow-y: hidden;

    position: absolute;

    text-align: center;

    white-space: nowrap;

}

.testimonial4_indicators .carousel-indicators li {

    padding: 0;

    width: 14px;

    height: 14px;

    border: none;

    text-indent: 0;

    margin: 2px 3px;

    cursor: pointer;

    display: inline-block;

    background: #ffffff;

    -webkit-border-radius: 100%;

    border-radius: 100%;

}

.testimonial4_indicators .carousel-indicators .active {

    padding: 0;

    width: 14px;

    height: 14px;

    border: none;

    margin: 2px 3px;

    background-color: #9dd3af;

    -webkit-border-radius: 100%;

    border-radius: 100%;

}

.testimonial4_indicators .carousel-indicators::-webkit-scrollbar {

    height: 3px;

}

.testimonial4_indicators .carousel-indicators::-webkit-scrollbar-thumb {

    background: #eeeeee;

    -webkit-border-radius: 0;

    border-radius: 0;

}



.testimonial4_control_button .carousel-control {

    top: 175px;

    opacity: 1;

    width: 40px;

    bottom: auto;

    height: 40px;

    font-size: 10px;

    cursor: pointer;

    font-weight: 700;

    overflow: hidden;

    line-height: 38px;

    text-shadow: none;

    text-align: center;

    position: absolute;

    background: transparent;

    border: 2px solid #ffffff;

    text-transform: uppercase;

    -webkit-border-radius: 100%;

    border-radius: 100%;

    -webkit-box-shadow: none;

    box-shadow: none;

    -webkit-transition: all 0.6s cubic-bezier(0.3, 1, 0, 1);

    transition: all 0.6s cubic-bezier(0.3, 1, 0, 1);

}

.testimonial4_control_button .carousel-control.left {

    left: 7%;

    top: 50%;

    right: auto;

}

.testimonial4_control_button .carousel-control.right {

    right: 7%;

    top: 50%;

    left: auto;

}

.testimonial4_control_button .carousel-control.left:hover,

.testimonial4_control_button .carousel-control.right:hover {

    color: #000;

    background: #fff;

    border: 2px solid #fff;

}



.testimonial4_header {

    top: 0;

    left: 0;

    bottom: 0;

    width: 550px;

    display: block;

    margin: 30px auto;

    text-align: center;

    position: relative;

}

.testimonial4_header h4 {

    color: #ffffff;

    font-size: 30px;

    font-weight: 600;

    position: relative;

    letter-spacing: 1px;

    text-transform: uppercase;

}



.testimonial4_slide {

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    width: 70%;

    margin: auto;

    padding: 20px;

    position: relative;

    text-align: center;

}

.testimonial4_slide img {

    top: 0;

    left: 0;

    right: 0;

    width: 136px;

    height: 136px;

    margin: auto;

    display: block;

    color: #f2f2f2;

    font-size: 18px;

    line-height: 46px;

    text-align: center;

    position: relative;

    border-radius: 50%;

    box-shadow: -6px 6px 6px rgba(0, 0, 0, 0.23);

    -moz-box-shadow: -6px 6px 6px rgba(0, 0, 0, 0.23);

    -o-box-shadow: -6px 6px 6px rgba(0, 0, 0, 0.23);

    -webkit-box-shadow: -6px 6px 6px rgba(0, 0, 0, 0.23);

}

.testimonial4_slide p {

    color: #ffffff;

    font-size: 20px;

    line-height: 1.4;

    margin: 40px 0 20px 0;

}

.testimonial4_slide h4 {

    color: #ffffff;

    font-size: 22px;

}



.testimonial .carousel {

    padding-bottom: 50px;

}

.testimonial .carousel-control-next-icon,

.testimonial .carousel-control-prev-icon {

    width: 35px;

    height: 35px;

}

/* ------testimonial  close-------*/



.nano-title {

    font-size: 50px;

    font-weight: 700;

}

/* .nano img {

  width: 80%;

} */



.find-product {

    background-image: url(../image/find-our-product.png);

    padding: 100px 0;

    background-size: cover;

    background-repeat: no-repeat;

}

.find-title {

    color: #fff;

    font-weight: 700;

    font-size: 50px;

}



.img-wrapper {

    position: relative;

    margin-top: 15px;

}

.img-wrapper img {

    width: 100%;

}

.img-overlay {

    background: rgba(0, 0, 0, 0.7);

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    opacity: 0;

}

.img-overlay i {

    color: #fff;

    font-size: 3em;

}

#overlay {

    background: rgba(0, 0, 0, 0.7);

    width: 100%;

    height: 100%;

    position: fixed;

    top: 0;

    left: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 999;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

}

#overlay img {

    margin: 0;

    width: 80%;

    height: auto;

    object-fit: contain;

    padding: 5%;

}

.img-wrapper img {

    min-height: 250px;

    object-fit: cover;

}

@media screen and (min-width: 768px) {

    #overlay img {

        width: 60%;

    }

}

@media screen and (min-width: 1200px) {

    #overlay img {

        width: 50%;

    }

}

#nextButton {

    color: #fff;

    font-size: 2em;

    transition: opacity 0.8s;

}

#nextButton:hover {

    opacity: 0.7;

}

@media screen and (min-width: 768px) {

    #nextButton {

        font-size: 3em;

    }

}

#prevButton {

    color: #fff;

    font-size: 2em;

    transition: opacity 0.8s;

}

#prevButton:hover {

    opacity: 0.7;

}

@media screen and (min-width: 768px) {

    #prevButton {

        font-size: 3em;

    }

}

#exitButton {

    color: #fff;

    font-size: 2em;

    transition: opacity 0.8s;

    position: absolute;

    top: 15px;

    right: 15px;

}

#exitButton:hover {

    opacity: 0.7;

}

@media screen and (min-width: 768px) {

    #exitButton {

        font-size: 3em;

    }

}



.who-use {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    grid-gap: 20px;

}

.who-use h3 {

    text-align: center;

    font-weight: 700;

    color: #58595b;

    margin-bottom: 30px;

}



.who-use p {

    font-weight: 400;

    line-height: 26px;

    text-align: center;

}



.content {

    margin-top: 50px;

}

.contact-section {

    background-image: url(../images/contact-bg.png);

    padding: 50px 0;

    background-repeat: no-repeat;

    background-size: cover;

}



.prod-title {

    font-size: 40px;

    color: #58595b;

    font-weight: 600;

}

.pro-desc {

    font-size: 18px;

    font-weight: 500;

    color: #58595b;

    line-height: 30px;

}
.product p {
    font-size: 18px;
    font-weight: 500;
    color: #58595b;
}

.flavour-text {

    font-size: 18px;

    font-weight: 500;

    color: #58595b;

}

/* .nano img {

  max-width: 50vw;

  margin: auto;

  display: block;

} */

.contact-section h3 {

    font-weight: 700;

    font-size: 36px;

}

.contact-section p {

    color: #fff;

}



.footer-menu ul li a,

.footer-menu p {

    font-size: 15px;

    color: #000;

    font-weight: 500;

}

p.footer-menu-title {

    font-size: 18px;

    font-weight: 500;

    color: #03a66c;

}



.copyright-strip ul,

.copyright-strip ul li {

    color: #fff;

    font-size: 16px;

    margin: auto;

    display: inline-block;

}



.copyright-strip ul li a {

    color: #fff;

    padding: 0 20px;

}

.canna {
    color: #241e20;
    font-family: Gotham-book;
    font-weight: 600;
    letter-spacing: 1px;
}

.mist {

    color: #13a96c;
    font-family: Gotham-book;
    font-weight: 600;
    letter-spacing: 1px;
}

.nanoo {

    /* font-family: Gotham; */
    font-family: caviardreams;
    font-weight: bolder;
    font-size: smaller;
    letter-spacing: 1px;
    color: #241e20;

}

.canna-dark {
    color: #241e20;
    font-family: Gotham-book;
    font-weight: 600;
    letter-spacing: 1px;
}

.mist-dark {
    color: #fff;
    font-family: Gotham-book;
    font-weight: 600;
    letter-spacing: 1px;
}

.nanoo-dark {
    color: #241e20;
    font-family: caviardreams;
    font-weight: bolder;
    font-size: smaller;
    letter-spacing: 1px;

}

.column-2 img {

    max-width: 30vw;

}

.ingredients ul li {

    font-size: 18px;

    line-height: 40px;

}

.ingredients img {

    max-width: 100%;

    max-height: 655px;

    object-fit: cover;

    min-height: 555px;

}

.overlay-black {

    background-color: #00000078;

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

}

section.banner img {

    max-height: 500px;

    width: 100%;

    max-width: 100%;

    object-fit: cover;

}

.banner h1 {

    position: absolute;

    top: 44%;

    color: #fff;

    font-size: 50px;

    font-weight: 700;

    z-index: 1;

    left: 0;

    right: 0;

    margin: auto;

    text-align: center;

    z-index: 9;

}

.banner .overlay {

    z-index: 1;

}



.find-our-product {

    min-height: 400px;

}



.find-our-product.top-banner video {

    transform: scale(2.5);

}

.h-5 {

    height: 5px;

    background: black;

    border-radius: 5px;

    z-index: 1;

}

.w-30 {

    width: 30%;

}

.wrapper-logo i {

    font-size: 30px;

}



.contact-info:after {

    position: absolute;

    width: 100%;

    content: "";

    height: 100%;

    top: 0;

    left: -100%;

    background-color: #03a66c;

}

.form-wrapper:after {

    position: absolute;

    width: 100%;

    content: "";

    height: 100%;

    top: 0;

    right: -100%;

    background-color: #fff;

    z-index: 1;

}

.social-icons li a {

    color: #ffffff;

    font-size: 32px;

    background: none;

    text-decoration: none;

}

.social-icons li {

    display: inline;

    padding: 0 10px;

}

.social-icons li:first-child {

    padding-left: 0;

}



.social-icons {

    margin-top: 20px;

}



.social-icons li a:hover {

    color: #000;

}



footer {

    border-top: 10px solid #03a66c;

}

.carousel-caption img {
    text-align: left;
    display: block;
}



.featured-media-inner.section-inner img {

    width: 100% !important;

    object-fit: cover;

}

.nano-banner {

    min-height: 500px;

}



.nano-banner video {

    transform: scale(3);

}