@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;900&family=Overpass:wght@700&family=Poppins:wght@400;500;700;800;900&display=swap');

body {
    overflow-x: hidden;
    font-family: 'Montserrat', sans-serif;
    width: 100vw;
}

body.bg-sazerac {
    background: #FFF2E0;
}

.page-title h2 {
    letter-spacing: 2.4px;
    margin-bottom: 15px !important;
}

.container-fluid {
    padding-left: 80px;
    padding-right: 80px;
}

.bg-navbar-sg {
    background-color: #FFF2E0;
    box-shadow: 0px 3px 4px #00000024;
    z-index: 9;
    position: sticky;
    top: 0;
}

.nav-right-bg {
    width: 128px;
}

.nav-right {
    position: absolute;
    top: 14px;
    right: 80px;
    display: flex;
    align-items: center;
}

.search-box {
    background: #0F9670;
    height: 40px;
    border-radius: 50px;
    padding: 10px;
}

.search-box:hover .search-txt {
    width: 200px;
    padding: 0 6px;
    color: #ffffff;
}

.search-box:hover .search-btn {
    background: #fff;
    color: #000000;
}


.search-btn {
    color: #ffffff;
    float: right;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: #0F9670;
    display: flex;
    justify-content: center;
    align-items: center;

}

.search-txt {
    font-family: 'Montserrat', sans-serif;
    border: none;
    outline: none;
    background: none;
    float: left;
    padding: 0;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    width: 0;
    transition: width 400ms;
}

.sticky {
    position: fixed !important;
    top: 0;
    width: 100%;
}


.search-txt::placeholder {
    color: #fff;
	font-style: italic;
}

.search-btn:hover {
    color: #000000;
}

.form-select-sg {
    font-family: 'Montserrat', sans-serif;
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 0px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.dropdown:hover .dropdown-menu {
    visibility: visible !important;
    margin-top: 0;
    opacity: 1 !important;
    transition: all 0.5s ease;
}

.nav-link:hover {
    color: #0f9670 !important;
}

.offcanvas {
    position: fixed;
    bottom: 0;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    visibility: hidden;
    background-color: #fff;
    background-clip: padding-box;
    outline: 0;
    transition: transform .3s ease-in-out;
    flex-basis: auto;
}

.nav-link:focus {
    font-weight: bold;
    color: #0f9670 !important;
}

/* .nav-item::after {
    text-decoration: none;
    color: #3E3E3E;
    text-transform: uppercase;
    display: block;
    content: '';
    border-bottom: 2px solid #0F9670;
    transform: scaleX(0);
    transition: transform 300ms ease-in-out;
}

.nav-item:hover::after {
    transform: scaleX(1);
} */


.navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
    width: 100vw;
    left: 0px;
    top: 68px;
    border: 0 solid;
    border-radius: 0px;
    background-color: #FFF2E0;
    display: block;
    visibility: hidden;
    transition: 0.3s;
    opacity: 0;
}

.navbar-expand-lg .navbar-nav .dropdown-menu::after {
    /* content: ""; */
    position: absolute;
    width: 230px;
    height: 50px;
    background-color: #fff2e0;
    top: -24px;
    left: 28%;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

.navbar-light .navbar-nav .nav-link {
    color: #333333;
    font-weight: 500;
    letter-spacing: 2.4px;
    font-size: 13px;
}

.dropdown,
.dropend,
.dropstart,
.dropup {
    position: static;
}

.container-menu {
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 2rem;
    padding-bottom: 2rem;

}

.active-menu-sg {
    color: #096A4F !important;
    position: relative;
}

.active-menu-sg::before {
    content: "";
    position: absolute;
    border-bottom: 4px solid #096A4F;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    width: 80%;
    bottom: -14px;
    left: 50%;
    transform: translate(-50%, 0);
    margin-left: 0;
    z-index: 4;
}


.t-dropdown-menu {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #0F9670;
    margin-bottom: 0.6rem;
}

.link-dropdown-menu {
    display: flex;
    flex-direction: column;
}

.link-dropdown-menu a {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #3E3E3E;
    text-decoration: none;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 400;
}

.link-dropdown-menu a:hover {
    font-weight: bold;
    color: #0F9670;
}



/* .link-dropdown-menu a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #0F9670;
    transition: width .3s;
}

.link-dropdown-menu a:hover::after {
    width: 100%;
} */

.c-link-dropdown-menu a {
    text-decoration: none;
    color: #3E3E3E;
    text-transform: uppercase;

}


.c-link-dropdown-menu a:hover {
    font-weight: bold;
    color: #0F9670;
}

/* .c-link-dropdown-menu::after {
    text-decoration: none;
    color: #0F9670;
    text-transform: uppercase;
    display: block;
    content: '';
    border-bottom: 2px solid #0F9670;
    transform: scaleX(0);
    transition: transform 300ms ease-in-out;
}

.c-link-dropdown-menu:hover::after {
    transform: scaleX(1);
} */



.l-link-dropdown-menu {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 15px;
}

.img-link-dropdown-menu {
    width: 100%;
}

.section-home {
    position: relative;
    background-color: #C3DFA4;
    width: 100vw;
    height: calc(100vh - 70px);
}

.f-insta {
    position: fixed;
    z-index: 5;
    bottom: 4%;
    right: 2%;
    cursor: pointer;
}

.home-header-1-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
    z-index: 2;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translateY(-20%);
}

.home-header-2-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    bottom: 0px;
    width: 100%;
    z-index: 2;
    transform: translateY(100px);
}

.home-header-3-wrapper {
    position: absolute;
    bottom: 0;
    left: 0%;
    right: 0;
    top: 44%;
    width: 5%;
    z-index: 2;
}

.home-header-4-wrapper {
    position: absolute;
    bottom: 0;
    left: 26%;
    right: 0;
    top: 40%;
    width: 16%;
    z-index: 1;
}

.home-header-5-wrapper {
    position: absolute;
    bottom: 0;
    left: 54%;
    right: 0;
    top: 52%;
    width: 18%;
    z-index: 1;
}

.home-header-6-wrapper {
    position: absolute;
    bottom: 0;
    right: 0%;
    top: 12%;
    width: 18%;
    z-index: 1;
}

.home-header-7-wrapper {
    position: absolute;
    top: 10%;
    right: 0%;
    left: 0%;
    bottom: 0;
    width: 10%;
    z-index: 1;
}

.home-header-8-wrapper {
    position: absolute;
    top: 34%;
    right: 0%;
    bottom: 0;
    width: 8%;
    z-index: 1;
}

.home-header-9-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 2;
    border-bottom: 30px solid #fff2e0;
    bottom: 0px;
    transform: translateY(50%);
}


.ar-wrapper-1 {
    position: absolute;
    top: 26%;
    right: 0%;
    width: 10%;
}

.ar-wrapper-2 {
    position: absolute;
    right: 0%;
    top: 326%;
    width: 13%;
}

.ar-wrapper-3 {
    position: absolute;
    right: 0%;
    top: 486%;
    width: 10%;
    z-index: 0;
}

.al-wrapper-1 {
    position: absolute;
    left: 0%;
    top: 164%;
    width: 9%;
}

.al-wrapper-2 {
    position: absolute;
    left: 2%;
    top: 188%;
    width: 11%;
}

.al-wrapper-3 {
    position: absolute;
    left: 0%;
    top: 430%;
    width: 12%;
}

.cta-home {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 5;
    position: relative;
}

.cta-home-t {
    width: 100%;
    text-align: center;
    margin-top: 4rem;
    margin-bottom: 1rem;
    font-size: 38px;
    font-weight: 900;
    letter-spacing: 2.4px;
    font-family: 'Montserrat', sans-serif;
}

.cta-home-btn {
    z-index: 3;
    background-color: #0f9670;
    color: #ffffff;
    border-radius: 0;
    margin-top: 4px;
    margin-bottom: 1rem;
    letter-spacing: 2.4px;
    padding: 5px 30px;
    font-size: 13px;
}

.cta-home-btn:hover {
    background-color: #094031;
    color: #ffffff;
}

.home-header-sg-red-wrapper {
    position: absolute;
    bottom: 0px;
    left: 29.2%;
    z-index: 2;
    width: 20%;
    transform: translateY(30%);
}


.sg-red-wrapper {
    width: 100%;
}

.home-header-sg-green-wrapper {
    position: absolute;
    display: flex;
    justify-content: center;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 10%);
    z-index: 2;
    width: 12%;
}

.sg-green-wrapper {
    width: 100%;
}

.home-header-sg-orange-wrapper {
    position: absolute;
    bottom: 0px;
    right: 27.4%;
    z-index: 2;
    width: 20%;
    transform: translateY(30%);
}

.sg-orange-wrapper {
    width: 100%;
}

.section-content-home {
    position: relative;
    background-color: #FFF2E0;
    width: 100%;
    height: 100%;
    padding-top: 4rem;
    padding-bottom: 2rem;
    z-index: 2;
    top: 72px;
}

.sch-wrapper-1 {
    position: absolute;
    right: 0%;
    top: 18%;
    width: 10%;
    padding: 0;
}

.sch-wrapper-2 {
    position: absolute;
    left: 0%;
    top: 36%;
    width: 10%;
    padding: 0;
}

.sch-wrapper-3 {
    position: absolute;
    right: 0%;
    top: 50%;
    width: 13%;
    padding: 0;
    z-index: 4;
}

.sch-wrapper-4 {
    position: absolute;
    left: 1%;
    top: 70%;
    width: 10%;
    padding: 0;
    z-index: 4;
}

.sch-wrapper-5 {
    position: absolute;
    right: 0%;
    top: 112%;
    width: 10%;
    padding: 0;
    z-index: 4;
}

.sch-wrapper-6 {
    position: absolute;
    left: 0%;
    top: 118%;
    width: 10%;
    padding: 0;
    z-index: 1;
}



.t-vp {
    font-family: 'Montserrat', sans-serif;
    font-size: 35px;
    text-align: center;
    margin-left: 4rem;
    margin-right: 2rem;
    margin-top: 2rem;
    margin-bottom: 4rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-align: left;
}

h4.t-vp span {
    font-size: 24px;
    font-weight: 400;
}

.tooltip-sg {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip-sg .tooltiptext {
    font-family: 'Montserrat', sans-serif;
    visibility: hidden;
    width: 242px;
    font-size: 13px;
    background-color: #ffffff;
    color: #363636;
    font-weight: 500;
    padding: 1rem;
    text-align: left;
    border-radius: 12px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    /* Position the tooltip */
    position: fixed;
    z-index: 5;
    bottom: 4%;
    right: 125px;
    text-transform: uppercase;
}

.tooltip-sg:hover .tooltiptext {
    visibility: visible;
}

.content-vp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.img-yoga-vp {
    width: 100%;
    padding-left: 2rem;
}

.content-philosophy {
    background-color: #0F9670;
    width: 100%;
    height: 100%;
    border-radius: 0 0rem 1rem 1rem;
    margin-top: 100px;
}

.philosophy-item-wrapper{
    padding: 0px 20px;
}

.head-cp {
    background-image: url(../images/img-head-cp.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 450px;
}

.body-cp {
    margin: 2rem;
}

.t-body-cp {
    font-size: 30px;
    font-weight: 900;
    text-transform: uppercase;
    color: #FFF2E0;
    text-align: center;
    margin-bottom: 2rem;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 2.4px;
}

.p-heartbeat-img {
    width: 90%;
}

.tab-ap-m {
    display: none;
}


.t-cp {
    font-family: 'Montserrat', sans-serif;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 17px;
    font-weight: 900;
    color: #ffffff;
    width: 100%;
    height: 100%;
    line-height: 25px;
    /* letter-spacing: 2.4px; */
}

.d-cp {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #ffffff;
    margin-top: 1rem;
    margin-bottom: 1rem;
    line-height: 25px;
}

.t-value {
    background-image: url(../images/t-kutif.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 183px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: 8rem;
    padding-right: 8rem;
    margin: 0rem 0 2rem;
    background-size: 95%;
    background-position: top 25px left 50%;
}

.t-value h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 21px;
    color: #096A4F;
    font-weight: 500;
    font-style: italic;
    text-align: center;
    margin: 2rem 0;
}

.t-value .n-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;


}

.card-title {
    font-family: 'Bebas Neue', cursive;
    font-weight: 400;
    font-size: 26px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.card-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
}

.card-product-h .card-text {
    height: 39px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.card-product-h {
    border: 0px solid rgba(0, 0, 0, .125);
    border-radius: 0.5rem;
    margin-right: 0rem;
    margin-left: 0rem;
    cursor: pointer;
    position: relative;
    font-size: 13px;
}

.img-product-h {
    width: 100%;
    padding: 1.5rem;
    margin: auto;
    height: 270px;
    object-fit: contain;

}

.card:hover .img-product-h {
    -ms-transform: scale(1.1);
    /* IE 9 */
    -webkit-transform: scale(1.1);
    /* Safari 3-8 */
    transform: scale(1.1);
}

.img-product-h-cav {
    width: 100%;
    padding: 1.5rem;
    margin: auto;
    height: 300px;
    object-fit: contain;
}

.card:hover .img-product-h-cav {
    -ms-transform: scale(1.1);
    /* IE 9 */
    -webkit-transform: scale(1.1);
    /* Safari 3-8 */
    transform: scale(1.1);
}

.card .img-aproduct-h {
    max-width: 90%;
    margin: auto;
    margin-top: 1rem;
    margin-bottom: 0px;
    display: inline;
    transition: display .2s;
}

.card:hover .img-aproduct-h {
    width: 50%;
    margin: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: none;

}

.img-product-h-hover {
    width: 90%;
    margin: auto;
    margin-top: 1rem;
    margin-bottom: 0;
}

.card-head {
    display: flex;
    position: relative;
    object-fit: cover;
    /* height: 300px; */
    width: 100%;
}

.card .img-product-h-hover {
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    object-fit: contain;
    display: none;
    opacity: 0;
    transition: opacity .2s;

}

.card:hover .img-product-h-hover {
    display: inline;
    opacity: 1;

}

.card-product-h-b {
    display: flex;
    /* position: absolute; */
    margin-top: 15px;
}

.img-cphb {
    margin: 0 0.4rem 0 0;
    width: 22px;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
    margin: 0 0.5rem 0 0.5rem;
}

#philoshopy-banner .slick-slide {
    margin: 0px;
}

#philoshopy-banner {
    margin: 0px;
}

#philoshopy-banner .slick-slide img {
    height: 450px;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.slick-prev,
.slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 17%;
    height: 100%;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: #f9eaea87;
    z-index: 3;
}

.slick-next {
    right: 0;
}

.slick-prev {
    left: 0;
    z-index: 3;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
    color: transparent;
    outline: none;
    background: #f9eaea87;
}

.col-shop-th {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.col-shop-th h4 {
    font-size: 30px;
    text-align: center;
    font-weight: 900;
    margin-bottom: 0.2rem;
    margin-top: 1rem;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 2.4px;
}

.col-shop-th p {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    text-align: center;
    width: 50%;
    margin-bottom: 0.2rem;
    margin-top: 1rem;
}

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    margin: 2rem 0 4rem;
}

.container-shop-home {
    margin: 1rem 0;
    margin-top: 1rem;
}

.c-collaboration {
    background-color: #F5E7D4;
    padding: 4rem 0rem;
    position: relative;
    z-index: 2;
}

.img-collaboration {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 69px;
}

.img-collaboration-l {
    width: 14%;
}

.img-collaboration-1 img {
    width: 100%;
}

.feed-instagram-footer {
    width: 100%;
    position: relative;
    margin-top: 40px;
}

.feed-instagram-footer:after {
    content: '';
    width: 100%;
    height: 100px;
    background: #f5e7d4;
    position: absolute;
    bottom: 0px;
    z-index: -1;
}

.t-fifc {
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    font-weight: 900;
    color: #212529;
    text-transform: uppercase;
    letter-spacing: 2.4px;
}

.i-fifc {
    padding-bottom: 3rem;
}

.feed-instagram-fc {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2rem;
    padding-bottom: 1rem;
    padding-left: 15px;
    padding-right: 15px;
}

.link-i-fifc {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    font-size: 16px;
    text-decoration: none;
}

.link-i-fifc {
    color: #212529;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    text-decoration: none;
    letter-spacing: 1.5px;
}

#instafeed-c {
    width: 100%;
    display: flex;
    justify-content: space-between;
    /* grid-gap: 35px; */
}

.img-instafeed-cf {
    width: 14%;
}

.footer-sg {
    /* background-color: #0b7457; */
    color: #212529;
    position: relative;
    z-index: 2;
    padding: 0px 30p;
}

.footer-c {
    background-color: #F5E7D4;
    width: 100%;
    height: 100%;
    padding-top: 2rem;
}

.footer-c-shop {
    width: 100%;
}

.t-fc {
    color: #212529;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}

.link-fc {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    margin: 0.5rem 0rem;
}

.link-fc a {
    color: #212529;
    font-family: 'Montserrat', sans-serif;
    margin: 0.3rem 0rem;
    text-decoration: none;
    font-size: 14px;
}

.link-fc a:hover {
    text-decoration: underline;
}

.link-fcs {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    color: #ffffff;
    display: flex;
    gap: 10px;
}

.link-fcs a {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    color: #ffffff;
    text-decoration: none;
}

.form-control-fe:focus, .form-control-fe:focus-visible {
    /* color: #ffffff; */
    /* background-color: transparent; */
    border: none;
    outline: 0;
    box-shadow: 0 0 0 0rem rgb(13 110 253 / 25%);
    border: 0px;
}

.form-control-fe {
    font-family: 'Montserrat', sans-serif;
    display: block;
    width: 100%;
    padding: 15px 12px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: #ffffff;
    background-color: transparent;
    background-clip: padding-box;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    background: white;
    color: #212529;
}

.form-control-fe::-webkit-input-placehorder{
    color:#212529;
}

.form-control-fe::placeholder {
    color: #212529;
    font-style: italic;
}

.form-control-fe:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: red;
}

.btn-f-subscribe {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    background-color: #055740;
    padding: 14.5px 0px 14px;
    border-radius: 0px;
    border: #055740 0px solid;
    color: #ffffff;
    width: 100%;
    letter-spacing: 2.4px;
}

.btn-f-subscribe:hover {
    font-size: 14px;
    background-color: #123229;
    padding: 13px 0px 14px;
    border-radius: 0px;
    border: #055740 0px solid;
    color: #ffffff;
}

.form-f-email {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.form-f-email>div:first-child {
    padding-left: 10px;
}

.form-f-email>div:last-child {
    padding-left: 0px;
}

.footer-copyright {
    font-family: 'Montserrat', sans-serif;
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border-top: 1px solid #90B1A7; */
    color: #242529;
    font-size: 10px;
    padding-bottom: 60px;
}

.r-footer-c-shop {
    padding-top: 1rem;
    padding-bottom: 3rem;
    padding-left: 15px;
    padding-right: 15px;
}

.c-fifc {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.form-select:focus {
    border-color: transparent;
    outline: 0;
    box-shadow: none;
}

.link-i-fifc:hover {
    color: #ffffff;
    text-decoration: underline;
}

.c-product {
    background-color: #FFF2E0;
    padding: 4rem 0rem;
}

/* img product gallery */
.content-left-ipg {
    position: relative;

}

.slides-ipg {
    display: none;
}

div#big_image .slides-ipg {
    height: 100%;
}

div#big_image .slides-ipg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: white;
}

.cursor-ipg {
    cursor: pointer;
}


.prev-ipg,
.next-ipg {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -32px;
    color: #0f967082;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    text-decoration: none;
}

.next-ipg {
    right: 0;
    border-radius: 3px 0 0 3px;
}


.prev-ipg:hover,
.next-ipg:hover {
    background-color: transparent;
    color: #0f9670;
}


.numbertext-ipg {
    color: transparent;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}


.caption-container-ipg {
    text-align: center;
    background-color: #FFF2E0;
    padding: 2px 16px;
    color: white;
    height: 20px;
}

.row-ipg {
    display: flex;
    gap: 14px;
}

.row-ipg:after {
    content: "";
    display: table;
    clear: both;
}

.column-ipg {
    float: left;
    width: 100px;
    height: calc(100px * 772/816 );
}

.column-ipg .img-wrapper {
    height: 100%;
    width: 100%;
}

.column-ipg .img-wrapper img {
    height: 100%;
    width: 100%;
    background: white;
    object-fit: contain;
}

.demo-ipg {
    opacity: 0.6;
}

.active-ipg {
    display: block;
}

.active-ipg-b,
.demo-ipg:hover {
    opacity: 1;

}

.active-ipg-b,
.demo-ipg:focus {
    opacity: 1;

}

/* end img product gallery */

.t-cr-ipg {
    font-family: 'Bebas Neue', cursive;
    font-size: 40px;
    font-weight: bold;
    text-transform: uppercase;
}

.d-cr-ipg {
    font-size: 14px;
    margin: 1.5rem 0rem;
    padding-right: 50px;
}

.h-cr-ipg {
    margin-bottom: 40px;
    font-size: 22px;
    color: #0F9670;
    font-weight: 800;
}


.t-shop-at-cri {
    font-size: 14px;
    font-weight: bold;
}

.img-shop-at-cri {
    margin: 1rem 0rem;
    width: 80%;
}

.bg-d-ib {
    background-color: #FAE9D2;
    border-radius: 1rem;
    padding: 1rem;
    margin-top: 10px;
}

.tab-ib {
    background-color: transparent;
    border: 0px solid transparent;
    font-size: 14px;
    font-weight: 500;
    padding-left: 0rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-right: 48px;
    text-transform: uppercase;
    letter-spacing: 1.7px;
    /* letter-spacing: 2.4px; */
}

.tab-content>.active {
    display: block;
    margin-bottom: 1rem;
}

.tab-content {
    font-size: 14px;
}

.tab-content a {
    /* text-decoration: none; */
    color: #0f9670;
}

.nav-pills .tab-ib.active,
.nav-pills .show>.tab-ib {
    color: #0F9670;
    background-color: transparent;
    border-bottom: 4px solid #0F9670;
}

.sh-product {
    display: flex;
    justify-content: space-between;
    margin: 2rem 0rem;
}

.h-email-ipg {
    font-size: 13px;
}

.link-h-email-ipg {
    font-size: 13px;
    color: #383838;
    text-decoration: none;
}

.link-h-email-ipg:hover {
    color: #0B7457;
}

.link-ss-i-ipg {
    width: 30px;
    height: 30px;
    background-color: transparent;
    border: 2px solid #0B7457;
    color: #0B7457;
    border-radius: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0rem;
    margin-left: 0.4rem;
}

.link-ss-i-ipg:hover {
    background-color: #0B7457;
    border: 2px solid #0B7457;
    color: #ffffff;
}

.ss-i-ipg {
    display: flex;
    align-items: center;
    font-size: 12px;
}

.img-benefits-ipg {
    width: 32px;
}

.benefits-ipg {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.t-benefits-ipg {
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 1rem;
}

.row.benefits-pd > div:nth-child(3) .benefits-ipg, 
.row.benefits-pd > div:nth-child(4) .benefits-ipg {
    margin-bottom: 0px;
}

.c-product-cav {
    position: relative;
    background-color: #F5E5CF;
    width: 100vw;
    height: 100%;
    padding-top: 6rem;
    padding-bottom: 4rem;
}

.t-product-cav {
    font-size: 30px;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 2.4px;
}

.ipg-wrapper-1 {
    position: absolute;
    width: 15%;
    top: 8%;
    left: 0%;
    z-index: 3;
}

.ipg-wrapper-2 {
    position: absolute;
    width: 10%;
    top: 68%;
    top: 68%;
    left: 0%;
    z-index: 3;
}

.ipg-wrapper-3 {
    position: absolute;
    width: 12%;
    top: 6%;
    right: 0%;
    z-index: 3;
}

.ipg-wrapper-4 {
    position: absolute;
    width: 12%;
    bottom: 0%;
    right: 0%;
    z-index: 3;
}

.pills-ipg {
    border-bottom: 2px solid #B9AA96;
    /* justify-content: space-between; */
}

div#pills-nutrion-facts b {
    font-weight: 700 !important;
}

div#pills-nutrion-facts table {
    max-width: 450px;
    width: 100%;
}

div#pills-nutrion-facts table tr>td:nth-child(2) {
    text-align: right;
    font-weight: 700;
}

div#pills-nutrion-facts hr {
    max-width: 450px;
    width: 100%;
    height: 2px;
    background: #4a4a4a;
}

div#pills-nutrion-facts table {
    font-weight: 500;
    color: #383838;
}

.ct-allproduct {
    font-size: 30px;
    color: #313131;
    font-weight: 900;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-right: 18%;
    padding-left: 18%;
}

.c-allproduct {
    background-color: #FFF2E0;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.c-allproduct .page-title p{
    font-size: 15px;
    color: #000000;
    width: 100%;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 4rem;
    padding-right: 14%;
    padding-left: 14%;
    font-size: 14px;
}

.c-about {
    /* background-color: #FFF2E0; */
    padding-top: 4rem;
    padding-bottom: 0rem;
    z-index: 1;
    position: relative;
}

.c-about .p-cb-2, .c2-about .p-cb-2 {
    /* margin-bottom: 24px; */
    line-height: 28px;
}

.c-about .pt-cb-1, .c2-about .pt-cb-1 {
    /* font-weight: 300; */
}

.c1-about {
    position: relative;

}

.c2-about {
    position: relative;
    /* background-color: #F5E5CF; */
    padding-bottom: 5rem;

}


.c1-about::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 50%;
    bottom: 0;
    background-color: #F5E5CF;
}


.cp-ap {
    /* width: 14rem; */
    margin-bottom: 30px;
}

.d-ct-allproduct {
    font-size: 15px;
    color: #000000;
    width: 100%;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 4rem;
    padding-right: 14%;
    padding-left: 14%;
    font-size: 14px;
}

.t-nla {
    color: #0F9670;
    font-size: 15px;
    margin-bottom: 1.2rem;
    text-transform: uppercase;
    font-weight: bold;
}

.c-ap {
    gap: 20px;
    display: flex;
    flex-wrap: wrap;
}

.nav-link-allproduct {
    text-decoration: none;
    color: #3E3E3E;
    font-size: 14px;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.nav-link-allproduct:hover {
    text-decoration: none;
    color: #3E3E3E;
    font-weight: bold;
}

.nav-link-allproduct.active {
    text-decoration: none;
    color: #323232;
    font-weight: bold;
    width: 100%;
}

.ct-about {
    font-size: 30px;
    color: #313131;
    font-weight: 900;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 6rem;
    padding-right: 18%;
    padding-left: 18%;
    line-height: 55px;
}

.pt-cb-1 {
    font-size: 30px;
    color: #313131;
    font-weight: 900;
    text-transform: uppercase;
    width: 100%;
    line-height: normal;
    letter-spacing: 2.4px;
    margin-bottom: 20px;
}

.pt-cb-2 {
    font-size: 20px;
    color: #313131;
    font-weight: bold;
    width: 100%;
    line-height: 25px;

}

.cpl-b1 {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
}

.cpr-b1 {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
}

.p-cb-2 {
    font-size: 14px;
    line-height: 25px;
}

.img-about-b1 {
    width: 100%;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.img-about-b2 {
    width: 100%;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.pla-1 {
    padding-left: 3rem;
}

.pra-1 {
    padding-right: 3rem;
}

.c-op-about {
    /* background-color: #F5E5CF; */
    background-image: url(../images/bg-about-ft.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 500px;
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.c-op-about-t {
    width: 100%;
    text-align: center;
    font-size: 30px;
    color: #FFF2E0;
    font-weight: 900;
    text-transform: uppercase;
    margin-top: 2rem;
    margin-bottom: 4rem;
    letter-spacing: 2.4px;
}

/*
 * FAQ
 */
div#accordion {
    padding: 0px 100px;
}

div#accordion .card-header {
    padding: 0.5rem 2rem 0.5rem 1rem;
    border: none;
    border-radius: 0px;
}

div#accordion .card-header[aria-expanded=false] {
    background: #F7E3C7;
    border: none;
    transition: all linear 0.3s;
}

div#accordion .card-header[aria-expanded=true] {
    background: #0F9670;
    transition: all linear 0.3s;
}

div#accordion .card {
    margin-bottom: 30px;
}

#accordion .card-header h2 button {
    color: #454545;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    text-align: left;
}

div#accordion .card-header[aria-expanded=true] h2 button {
    color: #FFF2E0;
}

#accordion .card-body {
    background: #FFF2E0;
    border: none;
    color: #383838;
    padding-left: 2rem;
    padding-right: 2rem;
}

#accordion .card {
    border: none;
}

#accordion .card-header h2 svg {
    font-size: 22px;
    transition: all linear 0.3s;
}

#accordion .card-header h2.mb-0 {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
}

div#accordion .card-header[aria-expanded=true] h2 svg {
    transform: rotate(90deg);
    color: #FFF2E0;
    transition: all linear 0.3s;
}

#accordion .card-body * {
    color: #383838;
    font-weight: 500;
    font-size: 14px;
}

/*
 * Term and Conditions
 */
div#tnc-content {
    margin-bottom: 90px;
    display: block;
    float: left;
    padding: 0px 100px;
    text-align: center;
}

div#tnc-content h3 {
    color: #0F9670;
    font-size: 16px;
    font-weight: 700;
    margin-top: 15px;
    display: block;
    float: left;
    /* margin-bottom: 1.5rem; */
    width: 100%;
    margin-top: 30px;
}

div#tnc-content * {
    font-size: 14px;
    font-weight: 500;
    color: #383838;
}

div#tnc-content p {
    margin-bottom: 15px;
    float: left;
    display: block;
    width: 100%;
}

div#tnc-content>h3:first-child {
    margin-top: 0px;
    width: 100%;
}

/*
 * News
 */
 div#media-slider{
    padding: 0px 30px;
}

#media-slider .slick-prev, #media-slider .slick-next {
    background: none;
    width: 31px;
}

#media-slider .slick-slide img {
    max-width: 100%;
}

#media-slider .slick-slide {
    padding: 0px 15px;
}

#media-slider .slick-list .slick-track {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#media-slider button.slick-prev-custom.slick-arrow {
    position: absolute;
    left: 0px;
    width: 25px;
    height: 30px;
    top: 50%;
    transform: translateY(-50%);
    background: url('../images/arrow-prev.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 0px;
}

#media-slider button.slick-next-custom.slick-arrow {
    position: absolute;
    right: 0px;
    width: 25px;
    height: 30px;
    top: 50%;
    transform: translateY(-50%);
    background: url('../images/arrow-next.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 0px;
}

#media-slider .media-item a img {
    color: black;
    text-decoration: none;
    border-bottom: 7px solid transparent;
    padding-bottom: 15px;
    text-align: center;
    margin: 0px auto;
}

#media-slider .slick-slide.slick-current.slick-active a img {
    border-bottom: 7px solid #0F9670;
}

#media-slider .media-item {
    /* padding-bottom: 20px; */
}

.c-news:after {
    content: '';
    background: #F5E5CF;
    width: 100%;
    height: 80vh;
    z-index: -1;
    position: absolute;
    top: 0px;
    left: 0px;
}

.c-news {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.c-news h2 {
    margin-bottom: 0px;
}

.card.card__media {
    background: transparent;
    border: 0px;
    margin-bottom: 75px;
}

.card.card__media .card-body .card-subtitle {
    color: #0F9670;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 15px;
}

.card.card__media .card-body {
    padding-top: 40px;
    padding-bottom: 0px;
}

#media-slider .card-title {
    overflow: auto;
}

#media-content .card-title {
    overflow: visible;
    display: block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
}

/*
 * Locations
 */
.c-location {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

div#map {
    width: 100%;
    height: 400px;
    margin-top: 35px;
    border-radius: 15px;
}

.card.card__location {
    background: transparent;
    border: none;
    margin-bottom: 25px;
}

div#locations-content .row {
    display: flex;
}

.card.card__location .card-body {
    padding: 0px 25px 0px 0px;
}

div#locations-content {
    margin-top: 70px;
    padding: 0px 40px;
}

.card.card__location .card-title {
    font-size: 14px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    display: block;
    color: #343434;
}

.card.card__location .card-title a{
    font-size: 14px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    display: block;
    color: #343434;
    text-decoration:none;
    display: inline;
}

.card.card__location .card-content {
    color: #343434;
    font-size: 11px;
    font-weight: 500;
}

.gm-style-iw.gm-style-iw-c {
    max-width: 320px !important;
    max-height: unset !important;
}

.gm-style-iw.gm-style-iw-c h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
}

.gm-style-iw.gm-style-iw-c .bodycontent {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
}

a.buttton-marker {
    /* z-index: 3; */
    background-color: #0f9670;
    color: #ffffff;
    border-radius: 0;
    margin-bottom: 5px;
    letter-spacing: 2.4px;
    padding: 5px 10px;
    font-size: 13px;
    text-decoration: none;
    width: auto;
    text-align: center;
    display: inline;
    margin-top: 15px;
    float: left;
}

.gm-style .gm-style-iw-d {
    max-height: unset !important;
}

/*
 * Contact Us
 */
.c-contact {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

#contact-content{
    margin-top: 35px;
}

form#form-contact .form-group {
    margin-bottom: 23px;
    padding: 0px 11px;
}

form#form-contact {
    width: 80%;
    margin: 0px auto;
}

form#form-contact .form-group .form-control {
    border: 1px solid #707070;
    border-radius: 0px;
    background: transparent;
    padding: 12px 12px;
    font-size:12px
}

form#form-contact .form-group label {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #383838;
    display: none;
}

form#form-contact textarea {
    height: 200px;
}

.form-control::placeholder {
    color: #383838;
    font-size: 12px;
    font-style: italic
}

/*
 * Loading Page
 */
#loading {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0px;
    z-index: 99;
    background: #0F9670;
    transition: opacity 0.6s;
    /* background: url('../images/bottle-loading.png'); */
}

div#loading_blank {
    background: white;
    content: '';
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
}

#loading .al-wrapper-1 {
    top: 20%;
}

#loading .ar-wrapper-1 {
    top: 70%;
}

#bottle{
    width: 100vw;
    height: 100vh;
    background: white;
    overflow: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    position: absolute;
    top: 0px;
    left: 0px;
    /* transform: translate(-50%, -50%); */
    z-index: -1;
}

div#bottle img {
    position: absolute;
    z-index: 999;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    border: 1px solid #0f9670;
    /* object-fit: scale-down; */
    background: transparent;
    object-fit: cover;
}

div#progstat {
    color: white;
    font-size: 16px;
    font-weight: 700;
    float: left;
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translate(-50%, 0px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

div#progstat #percentage {
    border: 1px solid #FFFFFF;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-bottom: 20px;
}

div#loading .logo {
    position: absolute;
    top: 50px;
    left: 50%;
    z-index: 9;
    transform: translate(-50%, 0px);
}

#bottle .fill {
    animation-name: fillAction;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.2, .6, .8, .4);
    animation-duration: 2s;
    animation-fill-mode: forwards;
    border-left: 1px solid #0f9670;
    border-right: 1px solid #0f9670;
    width: 450px;
    height: 450px;
    margin-left: 5px;
    margin-bottom: 5px;
}

#bottle #waveShape {
    animation-name: waveAction;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 0.5s;
    width:150px;
    height: 300px;
    fill: #FF9146;
}

.fill-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    width: 350px;
    height: 350px;
}

@keyframes fillAction {
    0% {
        transform: translate(0, 300px);
    }
    100% {
        transform: translate(0, -5px);
    }
}

@keyframes waveAction {
    0% {
        transform: translate(-150px, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}

/*
 * General CSS
 */
.pl-0{
    padding-left: 0px !important;
}


@media only screen and (min-width: 1500px) {
    .section-home {
        position: relative;
        background-color: #C3DFA4;
        width: 100vw;
        height: calc(100vh - 70px);
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
        width: 100vw;
        left: 0px;
        top: 68px;
        border: 0 solid;
        border-radius: 0px;
        background-color: #FFF2E0;
    }

    .section-content-home {
        background-color: #FFF2E0;
        width: 100%;
        height: 100%;
        z-index: 2;
        top: 116px;
    }

    .cta-home-t {
        width: 100%;
        text-align: center;
        margin-top: 4rem;
        margin-bottom: 1rem;
        font-size: 38px;
    }

    .f-insta {
        position: fixed;
        z-index: 5;
        bottom: 4%;
        right: 30px;
        cursor: pointer;
    }

    .tooltip-sg .tooltiptext {
        visibility: hidden;
        width: 150px;
        font-size: 14px;
        background-color: #ffffff;
        color: #363636;
        font-weight: bold;
        padding: 1rem;
        text-align: left;
        border-radius: 12px;
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
        position: fixed;
        z-index: 5;
        bottom: 6%;
        right: 125px;
    }

    .t-vp {
        /* text-align: center; */
        /* margin-left: 8rem; */
        /* margin-right: 8rem; */
        /* margin-top: 2rem; */
        /* margin-bottom: 4rem; */
        /* font-weight: bold; */
        /* text-align: center; */
    }

    #instafeed-c {
        width: 100%;
        display: flex;
        justify-content: center;
        grid-gap: 42px;
    }

    .cp-ap {
        /* width: 21rem; */
    }

    .img-cphb {
        margin: 0 0.4rem 0 0;
        width: 22px;
    }

    .sch-wrapper-1 {
        position: absolute;
        right: 0%;
        top: 14%;
        width: 10%;
        padding: 0;
    }

    .sch-wrapper-2 {
        position: absolute;
        left: 0%;
        top: 28%;
        width: 10%;
        padding: 0;
    }

    .sch-wrapper-3 {
        position: absolute;
        right: 0%;
        top: 45%;
        width: 16%;
        padding: 0;
        z-index: 4;
    }

    .sch-wrapper-4 {
        position: absolute;
        left: 3%;
        top: 58%;
        width: 10%;
        padding: 0;
        z-index: 4;
    }

    .sch-wrapper-5 {
        position: absolute;
        right: 0%;
        top: 96%;
        width: 10%;
        padding: 0;
        z-index: 4;
    }

    .sch-wrapper-6 {
        position: absolute;
        left: 0%;
        top: 100%;
        width: 10%;
        padding: 0;
        z-index: 1;
    }

    .al-wrapper-3 {
        position: absolute;
        left: 0%;
        top: 225%;
        width: 15%;
    }

    .ar-wrapper-2 {
        position: absolute;
        right: 0%;
        top: 161%;
        width: 21%;
    }

    .ar-wrapper-3 {
        position: absolute;
        right: 0%;
        top: 255%;
        width: 10%;
        z-index: 0;
    }


    .al-wrapper-2 {
        position: absolute;
        left: 8%;
        top: 90%;
        width: 14%;
    }

    .al-wrapper-1 {
        position: absolute;
        left: 0%;
        top: 78%;
        width: 11%;
    }

    .ar-wrapper-1 {
        position: absolute;
        top: 20%;
        right: 0%;
        width: 12%;
    }

    .img-product-h {
        width: 100%;
        margin: auto;
        height: 320px;
    }

    .img-product-h-cav {
        width: 100%;
        padding: 1rem;
        margin: auto;
        height: 400px;
        object-fit: contain;
    }

    .card-head {
        display: flex;
        position: relative;
        object-fit: cover;
        /* height: 470px; */
        width: 100%;
    }


}

@media only screen and (min-width: 700px) and (max-width: 900px) {

    .offcanvas {
        flex-direction: column;
    }

    .cta-home-t {

        font-size: 22px;
    }

    .section-home {
        height: calc(100vh - 70px);
    }

    .t-vp {
        font-size: 22px;
    }

    .section-content-home {
        padding-top: 2rem;
    }

    .home-header-sg-green-wrapper {

bottom: 0px;

}

    .home-header-sg-red-wrapper {
        bottom: 0px;
    }

    .home-header-sg-orange-wrapper {

bottom: 0px;

}

    .d-cp {
        font-size: 12px;
    }

    .t-cp {
        font-size: 14px;
    }


    .t-body-cp {
        font-size: 22px;
    }

    .p-heartbeat-img {
        width: 80%;
    }

    .t-value {

        height: 130px;

    }

    .t-value h4 {
        font-size: 22px;
    }

    .col-shop-th h4 {
        font-size: 22px;
    }

    .t-fifc {
        font-size: 22px;
    }

    .container-shop-home {
        margin: 1rem 0;
        margin-top: 1rem;
    }

    .img-collaboration {
        gap: 36px;
    }

    .head-cp {
        height: 340px;
    }

    .sch-wrapper-1 {
        position: absolute;
        right: 0%;
        top: 8%;
        width: 10%;
        padding: 0;
    }

    .sch-wrapper-2 {
        position: absolute;
        left: 0%;
        top: 24%;
        width: 10%;
        padding: 0;
        z-index: 3;
    }

    .sch-wrapper-3 {
        position: absolute;
        right: 0%;
        top: 34%;
        width: 13%;
        padding: 0;
        z-index: 4;
    }

    .sch-wrapper-4 {
        position: absolute;
        left: 5%;
        top: 49%;
        width: 10%;
        padding: 0;
        z-index: 4;
    }

    .sch-wrapper-5 {
        position: absolute;
        right: 0%;
        top: 98%;
        width: 10%;
        padding: 0;
        z-index: 4;
    }

    .sch-wrapper-6 {
        position: absolute;
        left: 0%;
        top: 106%;
        width: 10%;
        padding: 0;
        z-index: 1;
    }


    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: static;
        width: 43vw;
        left: -393px;
        top: 51px;
        border: 0 solid;
        border-radius: 0px;
        background-color: #FFF2E0;
    }

    .container-fluid {
        padding-left: 14px;
        padding-right: 14px;
    }

    .container-menu {
        padding-left: 14px;
        padding-right: 14px;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .nav-right {
        position: static;
        justify-content: center;
    }

    .c-link-dropdown-menu {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .c-link-dropdown-menu a {
        text-decoration: none;
        color: #3E3E3E;
        text-transform: uppercase;
        display: flex;
        margin: 0.5rem 0rem;
    }


    .img-link-dropdown-menu {
        width: 30%;
    }

    .l-link-dropdown-menu {
        font-size: 14px;
        display: flex;
        justify-content: center;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
        align-items: center;
        padding: 0rem 1rem;
    }

    .link-dropdown-menu a {
        font-size: 14px;
        color: #3E3E3E;
        text-decoration: none;
        margin-top: 0.3rem;
        margin-bottom: 0.3rem;
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu::after {
        content: "";
        position: absolute;
        width: 100px;
        height: 50px;
        background-color: #fff2e0;
        top: -24px;
        left: 29%;
        display: none;
    }

    .footer-c {
        background-color: #0B7457;
        width: 100%;
        height: 100%;
        border-top: 2px solid #0B7455;
        padding-top: 0rem;
    }

    .ct-about {
        font-size: 30px;
        padding-right: 10%;
        padding-left: 10%;
    }

    .pt-cb-1 {
        font-size: 30px;
        color: #313131;
        font-weight: 800;
        text-transform: uppercase;
        width: 100%;
    }

    .p-cb-2 {
        font-size: 12px;
    }


    .pt-cb-2 {
        font-size: 16px;
        color: #313131;
        font-weight: bold;
        width: 100%;
    }

    .c-op-about {
        background-image: url(../images/bg-about-ft.png);
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 600px;
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    .card-head {
        display: flex;
        position: relative;
        object-fit: cover;
        height: 260px;
        width: 100%;
    }

    .cp-ap {
        width: 11rem;
    }

}


@media only screen and (max-width: 700px) {

    .home-header-1-wrapper,
    .home-header-2-wrapper,
    .home-header-3-wrapper,
    .home-header-4-wrapper,
    .home-header-5-wrapper,
    .home-header-6-wrapper,
    .home-header-7-wrapper,
    .home-header-8-wrapper,
    .home-header-9-wrapper,
    .home-header-sg-red-wrapper,
    .home-header-sg-green-wrapper,
    .home-header-sg-orange-wrapper {
        display: none;
    }

    .section-home {
        background-image: url(../images/background-home-m.png);
        background-size: cover;
        background-repeat: no-repeat;
        height: calc(100vh - 70px);
    }

    .offcanvas {
        flex-direction: column;
    }


    .cta-home-t {
        width: 90%;
        text-align: center;
        margin-top: 6rem;
        margin-bottom: 1rem;
        font-size: 22px;
        font-weight: bold;
    }

    .c-collaboration{
        padding: 2rem 0px;
    }
    
    .img-collaboration-l {
        width: 30%;
    }

    .img-collaboration {
        display: flex;
        justify-content: center;
        align-items: center;
        row-gap: 30px;
        column-gap: 5px;
    }

    .t-vp {
        text-align: center;
        margin-left: 0rem;
        margin-right: 0rem;
        margin-top: 2rem;
        margin-bottom: 4rem;
        font-weight: bold;
        font-size: 16px;
    }


    .t-body-cp {
        font-size: 18px;
    }

    .t-cp {
        font-size: 16px;
    }

    .col-shop-th h4 {
        font-size: 18px;
    }

    .head-cp {
        background-size: contain;
        height: 200px;
    }

    #philoshopy-banner .slick-slide img {
        height: 200px;
        width: 100%;
        object-fit: cover;
        object-position: center;
    }

    .t-value {
        background-size: contain;
        padding-left: 2rem;
        padding-right: 2rem;
        margin: 4rem 0 3rem;
    }

    .t-value h4 {
        font-size: 22px;
    }

    .section-content-home {
        background-color: #FFF2E0;
        width: 100%;
        height: 100%;
        padding-top: 4rem;
        padding-bottom: 0px;
        top: -16px;
        position: relative;
    }

    .section-content-home::after {
        content: "";
        background-color: #FFF2E0;
        width: 100%;
        height: 50px;
        position: absolute;
        bottom: -20px;
    }

    #instafeed-c {
        width: 100%;
        display: flex;
        justify-content: center;
        grid-gap: 10px;
    }

    .t-fifc {
        font-size: 22px;
        text-align: center;
    }

    .feed-instagram-footer {
        width: 100%;
        height: 308px;
        margin-top: 0px;
    }

    .footer-c-shop {
        margin: 0.4rem 0rem;
        text-align: center;
    }

    .form-control-fe {
        margin: 0.5rem 0rem;
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: static;
        width: 72vw;
        background: white;
        /* visibility: visible; */
        /* opacity: 1; */
        padding-top: 0px;
        display: none;
    }

    .dropdown:hover .dropdown-menu{
        display: block;
    }

    .t-dropdown-menu {
        margin-top: 20px;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1.5rem;
        padding-left: 0rem;
        width: fit-content;
    }

    .offcanvas-end {
        top: 0;
        right: 0;
        width: 80%;
        border-left: 1px solid rgba(0, 0, 0, .2);
        transform: translateX(100%);
    }

    .container-fluid {
        padding-left: 14px;
        padding-right: 14px;
    }

    .container-menu {
        padding-left: 14px;
        padding-right: 14px;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-top: 0px;
    }

    .nav-right {
        position: static;
        justify-content: center;
    }

    .nav-right.search-switch {
        display: flex;
        justify-content: space-between;
    }
    
    .form-select-sg {
        padding-left: 0px;
        font-weight: 700;
    }
    
    .c-link-dropdown-menu {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 5px 0px;
    }

    .c-link-dropdown-menu a {
        text-decoration: none;
        color: #3E3E3E;
        text-transform: uppercase;
        display: flex;
        margin: 0.5rem 0rem;
    }


    .img-link-dropdown-menu {
        width: 30%;
    }

    .l-link-dropdown-menu {
        font-size: 14px;
        display: flex;
        justify-content: center;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
        align-items: center;
        padding: 0rem 1rem;
    }

    .link-dropdown-menu a {
        font-size: 14px;
        color: #3E3E3E;
        text-decoration: none;
        margin-top: 0.3rem;
        margin-bottom: 0.3rem;
    }


    .sch-wrapper-1,
    .sch-wrapper-2,
    .sch-wrapper-3,
    .sch-wrapper-4,
    .sch-wrapper-5,
    .sch-wrapper-6 {

        display: none;
    }



    .t-cr-ipg {
        margin-top: 1rem;
        font-size: 26px;
    }

    .t-product-cav {
        font-size: 24px;
    }

    .footer-c {
        /* background-color: #0B7457; */
        width: 100%;
        height: 100%;
        /* border-top: 2px solid #0B7455; */
        padding-top: 0rem;
    }

    .ipg-wrapper-1 {
        position: absolute;
        width: 15%;
        top: 21%;
        left: 0%;
        z-index: 0;
    }

    .card-title {
        font-size: 20px;
    }

    .card-text {
        font-size: 12px;
    }

    .card-head {
        display: flex;
        position: relative;
        object-fit: cover;
        /* height: 245px; */
        width: 100%;
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu::after {
        content: "";
        position: absolute;
        width: 100px;
        height: 50px;
        background-color: #fff2e0;
        top: -24px;
        left: 29%;
        display: none;
    }

    .ct-about {
        font-size: 22px;
        margin-top: 1rem;
        margin-bottom: 3rem;
        padding-right: 12%;
        padding-left: 12%;
        line-height: 30px;
    }


    .pt-cb-1 {
        font-size: 40px;
        color: #313131;
        font-weight: 800;
        text-transform: uppercase;
        width: 100%;
        line-height: 30px;
    }

    .al-wrapper-2,
    .al-wrapper-1,
    .al-wrapper-3,
    .ar-wrapper-1,
    .ar-wrapper-3 {
        display: none;
    }


    .c-op-about-t {
        font-size: 22px;
    }

    .img-about-b1 {
        width: 100%;
        margin-top: 4rem;
        margin-bottom: 4rem;
    }

    .pt-cb-1 {
        font-size: 22px;
    }

    .pt-cb-2 {
        font-size: 18px;
        color: #313131;
        font-weight: bold;
        width: 100%;
    }

    .pra-1 {
        padding-right: 0;
    }

    .pla-1 {
        padding-left: 0;
    }

    .img-about-b2 {
        margin-top: 2rem;
        margin-bottom: 4rem;
    }

    .c-op-about {

        width: 100%;
        height: 100%;
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    .cp-ap {
        /* width: calc(50% - 10px); */
        display: block;
        float: left;
    }

    .c-ap {
        display: block;
        flex-wrap: unset;
        gap: 0px;
    }

    .c-ap>.cp-ap:nth-child(even){
        margin-left: 10px;
    }

    .c-ap>.cp-ap:nth-child(odd){
        margin-right: 10px;
    }


    .ct-allproduct {
        font-size: 22px;
        color: #313131;
        font-weight: 800;
        text-transform: uppercase;
        width: 100%;
        text-align: center;
        margin-top: 1rem;
        margin-bottom: 1rem;
        padding-right: 1%;
        padding-left: 1%;
    }


    .d-ct-allproduct {
        font-size: 14px;
        color: #9c9898;
        width: 100%;
        text-align: center;
        margin-top: 1rem;
        margin-bottom: 2rem;
        padding-right: 14%;
        padding-left: 14%;
    }

    .nav-link-allproduct {
        width: 100%;
        font-size: 12px;
    }

    .tab-ap-m {
        display: block;
    }

    .tab-ap-d {
        display: none;
    }

    .img-product-h {
        width: 100%;
        margin: auto;
    }

    .img-product-h-cav {
        width: 100%;
        padding: 1rem;
        margin: auto;
        height: 200px;
        object-fit: contain;
    }

    .img-shop-at-cri {
        margin: 1rem 0rem rem;
        width: auto;
    }

    .active-menu-sg::before {
        bottom: 0px;
        left: 0px;
        transform: unset;
    }

    .c-about, .c-contact, .c-location, .c-news, .c-allproduct {
        padding-top: 1rem;
    }

    .img-yoga-vp {
        width: 90%;
    }

    .d-cp {
        margin-bottom: 2rem;
    }

    .img-instafeed-cf{
        width: 30%;
    }

    .link-fcs {
        padding-top: 18px;
        display: flex;
        justify-content: center;
    }

    #accordion .card-body {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    div#map {
        height: 60vh;
        margin-top: 15px;
    }

    div#media-slider {
        padding: 0px 45px;
    }
    
    #media-slider button.slick-prev-custom.slick-arrow {
        left: 15px;
    }
    
    #media-slider button.slick-next-custom.slick-arrow {
        right: 15px;
    }
    
    div#media-content {
        width: 100%;
        display: block;
        padding: 0px;
        margin: 0px;
    }
    
    .card.card__media {
        width: 100%;
        padding: 0px 15px;
    }

    div#drop-icon {
        position: absolute;
        top: 1px;
        right: 12px;
        background: #0b7457;
        color: white;
        width: 40px;
        padding: 8px;
        text-align: center;
    }
    
    div#filter {
        position: relative;
    }

    #filter:hover #mobile-categories{
        display: block;
    }
    
    div#filter label {
        width: 100%;
        padding: 8px 8px 8px 16px;
        border: 1px solid gray;
        font-weight: 700;
        color: #0b7457;
    }

    div#mobile-categories {
        background: white;
        padding: 15px 15px 4px;
        position: absolute;
        z-index: 99;
        width: calc(100% - 24px);
        box-shadow: 0px 0px 4px 0px #aca2a2;
        display: none;
    }
    
    div#mobile-categories .row {
        margin: 0px;
    }

    div#mobile-categories a {
        width: 100%;
        display: block;
    }

    .form-f-email>div:first-child {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .form-f-email>div:last-child {
        padding-left: 15px;
        padding-right: 15px;
    }

    div#accordion {
        padding: 0px 15px;
    }

    div#tnc-content{
        padding: 0px 15px;
    }
}

@media only screen and (max-width: 365px) {
    .cp-ap {
        width: 9rem;
    }

    .card-head {
        display: flex;
        position: relative;
        object-fit: cover;
        /* height: 215px; */
        width: 100%;
    }
}

@media (max-height: 700px){
    .home-header-sg-red-wrapper {
        transform: translate(0px, 54%);
    }
    
    .home-header-sg-green-wrapper {
        transform: translate(-50%, 37%);
    }
    
    .home-header-sg-orange-wrapper {
        transform: translate(0px, 54%);
    }
    
    img.home-header-2-wrapper {
        transform: translate(0px, 130px);
    }
    
    img.home-header-1-wrapper {
        transform: translate(0px, 10%);
    }
}

@media all and (min-height: 850px){
    .c-news:after{
        height: 70vh;
    }
}


@media all and (min-height: 950px){
    .c-news:after{
        height: 55vh;
    }
}

@media all and (max-width:1480px) and (min-width:1200px){
    .c-about>.container, .c2-about>.container, .c-location>.container {
        max-width: 1080px;
    }
}