.inner-header
{
    display: flex;
    align-items: center;
    justify-content: space-between; 
}


.main-header
{
    box-shadow: 0px 10px 40px 0 rgba(0,0,0,0.2);
    padding: 1px 0;
    padding-bottom: 0;
    position: relative;
    z-index: 900;
    background-color: #222;
    /* position: fixed; */
    top: 0;
    width: 100%;
    z-index: 900000;
}
/* 
.main-header.sticky
{
    
    left: 0;
    top: 0;
    
} */

.h-right
{
    display: flex;
    align-items: center;
    gap: 30px;
}

a.sb-order
{
    background-color: #ff7c00;
    border-radius: 10px;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    color: #fff;
    padding: 0 20px;
    font-size: 14px;
}

.main-header img
{
    height: 81px;
}

.menu-icon i, .whatsapp-icon i
{
    font-size: 26px;
    cursor: pointer;
    color: #fff;
}

.hero-section
{
    display: flex;
    justify-content: space-between;
}

.hero-left-section,
.hero-right-section
{
    width: 50%;
    overflow: hidden;
    position: relative;
    transition: all ease 0.4s;
}

.hero-left-section
{
    background-color: #fff;
    position: relative;
    z-index: 2;
    padding: 40px;
}

.product-boxes
{
    min-height: 100%;
    height: 100%;
    width: 100%;
    position: absolute;
    top: -100%;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: top ease-in-out 0.5s;
    perspective: 200px;
}

.product-boxes.active
{
    top: 0;
    opacity: 1;
    visibility: visible;
    
}

.activefront
{
    z-index: 80;
}

.product-boxes.lemon
{
    background-color: #b6bb47;
}

.product-boxes.strawberry
{
    background-color: #fe6869;
}

.product-boxes.orange
{
    background-color: #f48e20;
}

.product-boxes.pineapple
{
    background-color: #f5c74f;
}

.product-img img
{
    width: 100%;
    transition: all ease 0.5s;
}

.product-img
{
    width: 70%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%,-50%);
    transition: all ease 0.5s;
}

.product-boxes.active-detail .product-img
{
    /* left: 50%;
    top: -10%;
    transform: translate(-50%,0%); */
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
    text-align: left;
    transform: none;
}

.product-boxes.active-detail .product-img img
{
    width: 480px;
    margin-top: -5%;
    margin-bottom: -5%;
    margin-left: -5%;
}

.fruits-main img
{
    width: 100px;
    cursor: pointer;
    transition: all ease 0.5s;
    opacity: 0.6;
}

.fruits-main.active
{
    pointer-events: none;
}

.fruits-main.active img,
.fruits-main img:hover
{
    /* margin-left: 30%; */
    transform: scale(1.3);
    opacity: 1;
    filter: blur(0px);
}

.hero-left-section
{
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap: 30px;
    text-align: center;
    min-height: 100vh;
}

.inside-jar img
{
    cursor: pointer;
    width: 100%;
    height: auto;
}

.inside-jar
{
    position: absolute;
    top: 65%;
    left: 12%;
    width: 240px;
    transition: all ease 0.4s;
}

.product-boxes.active-detail .inside-jar
{
    opacity: 0;
    visibility: hidden;
}

.tobacco-detail
{
    visibility: hidden;
    opacity: 0;
    width: 100%;
    padding: 0 30px;
    margin-top: 60px;
    z-index: 50;
    position: relative;
    padding-left: 80px;
    transform: rotateX(-10deg) skew(40deg, 60deg);
    transition: all ease 0.7s;
}

.tobacco-detail h2
{
    
    margin-bottom: 30px;
    font-weight: 800;
}



a.fruit-cta
{
    display: inline-block;
    margin-top: 30px;
    border-radius: 10px;
    height: 50px;
    line-height: 50px;
    padding: 0 60px;
    
}

.tobacco-detail ul
{
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-left: 5px;
}

.tobacco-detail ul li
{
    display: flex;
    align-items: center;
    font-size: 15px;
    gap: 10px;
}

.tobacco-detail ul li i
{
    font-size: 22px;
}

.product-boxes.active-detail .tobacco-detail
{
    visibility: visible;
    opacity: 1;
    margin-top: -40px;
    transform: none;
}

.product-img img.secondimage
{
    opacity: 0;
    visibility: hidden;
    position: absolute;
    right: -100%;
    top: 0;
    width: 300px;
    height: auto;
    transition: all ease-in-out 0.7s;
    transition-delay: 0.3s;
}

.product-boxes.active-detail .product-img img.secondimage
{
    position: relative;
    opacity: 1;
    visibility: visible;
    right: 0;
    width: 300px;
}

.product-boxes.active-detail .product-img
{
    display: flex;
    align-items: center;
    gap: 30px;
}

.product-boxes.lemon h2
{
    color: #676b17;
}

.product-boxes.lemon a.fruit-cta
{
    color: #fff;
    background-color: #676b17;
}

.product-boxes.lemon .tobacco-detail ul li
{
    color: #878b26;
}

.product-boxes.strawberry h2
{
    color: #bb2c2d;
}

.product-boxes.strawberry a.fruit-cta
{
    color: #fff;
    background-color: #bb2c2d;
}

.product-boxes.strawberry .tobacco-detail ul li
{
    color: #bb2c2d;
}

.product-boxes.orange h2
{
    color: #b05b00;
}

.product-boxes.orange a.fruit-cta
{
    color: #fff;
    background-color: #b05b00;
}

.product-boxes.orange .tobacco-detail ul li
{
    color: #b05b00;
}

.product-boxes.pineapple h2
{
    color: #a27d1c;
}

.product-boxes.pineapple a.fruit-cta
{
    color: #fff;
    background-color: #a27d1c;
}

.product-boxes.pineapple .tobacco-detail ul li
{
    color: #a27d1c;
}

/* Flavors */

.inner-flavors
{
    display: flex;
    align-items: center;
    background-color: #222;
}

.about-flavors .inner-flavors
{
    flex-direction: row-reverse;
}

.flavor-banner,
.flavor-detail
{
    width: 50%;
}

.flavor-banner img
{
    width: 100%;
    height: auto;
}

.flavor-detail
{
    padding: 80px;
    color: #fff;
    transition: all ease 0.4s;
}

.about-flavors .flavor-detail
{
}

.flavor-detail h2
{
    font-weight: 800;
    font-size: 28px;
    margin-bottom: 30px;
}

.flavor-detail p
{
    color: #c5c5c5;
}


.flavor-detail a
{
    background-color: #fff;
    height: 55px;
    line-height: 55px;
    padding: 0 60px;
    border-radius: 10px;
    color: #222;
    margin-top: 30px;
    display: inline-block;
}

/* How to Use */

.howto-use-title h2, .blog-section h2
{
    text-align: center;
    color: #ff7c00;
    font-size: 44px;
    margin-bottom: 5px;
}

.howto-use-title p
{
    text-align: center;
    font-size: 20px;
    color: #888;
    margin-bottom: 30px;
}

.abs-img
{
    width: 100%;
    transition: all linear 0.4s;
    transform: none;
    height: auto;
    /* border: solid 10px #fff; */
    font-size: 0;
    border-radius: 10px;
    /* box-shadow: 0px 5px 10px 0 rgba(0,0,0,0.14); */
    text-align: right;
}

.abs-img.hide
{
    opacity: 0;
    visibility: hidden;
    transform: scale(0.7) rotate(9deg);
    height: 0;
    overflow: hidden;
    position: absolute;
}

.feature-item
{
    padding: 120px 0;
}

.feature-item h3
{
    font-size: 26px;
    color: #222;
    font-weight: 600;
    text-transform: capitalize;
}

.feature-item h4
{
    font-size: 16px;
    margin-bottom: 10px;
    margin-top: 10px;
    font-weight: 600;
}

.feature-item p
{
    font-size: 17px;
    color: #5a5a5a;
    line-height: 30px;
    text-transform: capitalize;
}

.features a.cta-sl
{
    height: 45px;
    line-height: 45px;
}


.feature-images
{
    position: sticky;
    top: 90px;
    height: 100%;
    perspective: 300px;
}

.feature-images img
{
    width: 75%;
    border-radius: 10px;
}

.features
{
    margin-top: 50px;
}

.features-inner
{
    display: inline-flex;
    justify-content: space-between;
}

.step-num
{
    color: #ff7c00;
    font-size: 55px;
    font-weight: 600;
}

/* CTA Hook */
.inner-cta-hook
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px 20px;
    justify-content: space-between;
    padding: 40px;
    background-color: #ff7c00;
    border-radius: 10px;
}

.hook-text
{
    width: 70%;
    color: #fff;
}

.hook-text h2
{
    font-size: 40px;
}

.hook-text p
{
    font-size: 15px;
    color: #f0f0f0;
}

.inner-cta-hook a
{
    display: inline-block;
    height: 55px;
    line-height: 55px;
    padding: 0 50px;
    background-color: #fff;
    color: #ff7c00;
    border-radius: 10px;
}

.cta-hook
{
    margin: 60px 0;
}

/* Blog Section */

.blog-section
{
    margin: 60px 0;
}


.blog-post
{
    width: 32%;
    background-color: #fff;
    padding: 15px;
    border-radius: 10px;
    border: solid 1px #ddd;
    position: relative;
    display: flex;
    flex-direction: column;
}

.blog-post h3 a
{
    color: #222;
    font-size: 18px;
}

.blog-post h3
{
    margin-bottom: 15px;
    margin-top: 5px;
    font-weight: 600;
    height: 55px;
    overflow: hidden;
}

.latest-blog
{
    padding: 50px 0;
    margin-bottom: 50px;
    background-color: #f7f9fb;
    margin-bottom: 0;
}

.blog-post img
{
    width: 100%;
    border-radius: 10px;
    height: auto;
}

.center-title
{
    margin-bottom: 35px;
    text-align: center;
}

a.blog-cat
{
    text-transform: capitalize;
    position: absolute;
    left: 20px;
    top: 20px;
    background-color: #0283ff;
    padding: 0 10px;
    height: 25px;
    line-height: 25px;
    color: #fff;
    font-size: 12px;
}

.post-meta
{
    margin-top: 5px;
}

.post-meta li
{
    font-size: 13px;
    color: #888;
    display: flex;
}

.post-meta li i
{
    margin-right: 5px;
    font-size: 16px;
}

.blog-post .serv-cta
{
    margin-top: auto;
}

.inner-blog
{
    margin-top: 40px;
}

a.serv-cta
{
    color: #ff7c00;
    display: flex;
    align-items: center;
    gap: 4px;
}

.serv-cta i
{
    font-size: 24px;
}

/* Footer */
footer
{
    background-color: #222;
    padding: 40px 0;
    overflow: hidden;
}

.main-footer
{
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 30px;
    color: #fff;
    text-align: center;
    align-items: center;
    padding: 0 20px;
}

.main-footer a
{
    color: #fff;
}

.main-footer img
{
    height: 110px;
}

.footer-logo, .footer-contact
{
    width: max-content;
}

.footer-social
{
    display: flex;
    gap: 10px;
    width: max-content;
}

.footer-social li
{
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 37px;
    border-radius: 50%;
    background: #454545;
}

.footer-contact
{
    display: flex;
    gap: 10px;
    flex-direction: column;
    justify-content: center;
}


.footer-contact li a i
{
    margin-right: 4px;
    position: relative;
    top: 2px;
}

/* Sidebar Form */

.free-consult-form form
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.free-consult-form input
{
    width: 48%;
    height: 40px;
    line-height: 40px;
    border: solid 1px #888;
    border-radius: 5px;
    margin-bottom: 15px;
    padding: 0 10px;
    font-size: 14px;
}

.free-consult-form input[type="submit"]
{
    background-color: #ff7c00;
    color: #fff;
    margin-top: 15px;
    margin-bottom: 0;
    border: 0;
    width: 100%;
    font-size: 15px;
}

.free-consult-form textarea
{
    width: 100%;
    height: 130px;
    padding: 12px;
    border: solid 1px #888;
    border-radius: 5px;
    font-size: 14px;
}

.free-consult-sidebr
{
    width: 500px;
    right: -100%;
    top: 0;
    max-height: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 100;
    position: fixed;
    display: flex;
    padding: 30px;
    /* overflow-y: scroll; */
    transition: all ease 0.3s;
}

.free-consult-sidebr.active
{
    right: 0;
}
.overlay
{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 99;
    visibility: hidden;
    opacity: 0;
    transition: all ease 0.3s;
}

.overlay.active
{
    visibility: visible;
    opacity: 1;
}

.sidebar-tab-control
{
    display: flex;
    margin-bottom: 30px;
    justify-content: space-between;
    padding-bottom: 25px;
    border-bottom: 1px solid #000;
}

.sidebar-tab-control li
{
    width: 49%;
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #ddd;
    text-align: center;
    cursor: pointer;
    font-size: 15px;
}

.sidebar-tab-control li.active
{
    background-color: #0283ff;
    color: #fff;
    border-bottom: 0;
    border-radius: 5px;
}

.sidebar-footer
{
    text-align: center;
    margin-top: 40px;
    width:100%;
    display: flex;
    justify-content: center;
    font-size: 14px;
    margin-bottom: 30px;
}

.sidebar-footer a
{
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 4px;

    font-size: 14px;
}

.free-consult-sidebr h2
{
    text-align: center;
    font-weight: 600;
    margin-bottom: 25px;
}

.close-sidebar
{
    position: absolute;
    left: 5px;
    top: 5px;
    font-size: 24px;
    cursor: pointer;
}

/* Menu Sidebar */

.menuside img
{
    height: 100px;
}

.menuitems
{
    position: fixed;
    left: -100%;
    top: 0;
    height: 100%;
    background-color: #fff;
    width: 400px;
    max-width: 70%;
    transition: all ease 0.4s;
    z-index: 2222;
    padding: 20px 0;
}

.menuside
{
    margin: 0 auto;
    display: block;
    width: max-content;
}

.menuitems.active
{
    left: 0;
}

.menuitems ul
{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid #eee;
}

.menuitems li
{
    padding: 0 20px;
}

.menuitems li a
{
    color: #222;
    font-size: 16px;
    display: inline-block;
    padding: 10px;
}

@media(max-width:767px){

    .inner-header
    {
        padding: 0 15px;
    }

    /* Sidebar Section */
    .free-consult-sidebr
    {
        overflow-y: scroll;
        width: 82%;
        padding: 20px;
    }

    .free-consult-sidebr h2
    {
        font-size: 20px;
    }

    .free-consult-form input
    {
        width: 100%;
    }

    /* Blog Section */
    .blog-post
    {
        width: 100%;
        margin-bottom: 25px;
    }

    /* Hook CTA */
    .hook-text
    {
        width: 100%;
    }
    .hook-text h2
    {
        font-size: 27px;
    }
    .cta-hook
    {
        margin: 20px 0;
    }
    .inner-cta-hook
    {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding: 40px 20px;
        margin: 40px auto;
        margin-top: 0;
        width: 90%;

    }

    /* How To Use */
    .step-num
    {
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        display: inline-block;
        background: #ff7c00;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        margin-right: 5px;
    }
    .howto-use-title h2, .blog-section h2
    {
        font-size: 22px;
    }
    .howto-use-title p
    {
        font-size: 15px;
    }
    .feature-item
    {
        max-height: 48px;
        overflow: hidden;
        background: #fff;
        margin-bottom: 20px;
        padding: 13px 20px;
        border-radius: 10px;
        position: relative;
        border: solid 1px #eee;
        transition: all ease 0.3s;
    }

    .feature-item,
    .feature-item.active
    {
        max-height: 2400px;
        overflow: hidden;
    }

    .feature-opener
    {
        position: absolute;
        right: 0;
        bottom: 8px;
        width: 100%;
        height: 80px;
        line-height: 60px;
        /* border-radius: 50%; */
        /* background-color: #eee; */
        text-align: center;
        line-height: 113px;
        transition: all ease 0.4s;
        background: rgb(34,34,34);
        background: linear-gradient(0deg, rgba(34,34,34,1) 0%, rgba(34,34,34,2) 71%, rgba(255,255,255,0) 100%);
        color: #fff;
    }

    .feature-opener i
    {
        position: relative;
        top: 3px;
    }

    .feature-item.active .feature-opener
    {
        transform: rotate(180deg);
    }

    .feature-item:first-child
    {
        /* max-height: 2000px; */
        /* background-color: transparent; */
        /* padding: 20px; */
        /* box-shadow: none; */
    }

    .feature-item h3
    {
        font-size: 16px;
        font-weight: 600;
        display: inline;
        line-height: 30px;
    }

    .features h2, .services h2
    {
        font-size: 25px;
    }

    .feature-item img
    {
        width: 100%;
        height: auto;
        border-radius: 10px;
        margin-top: 20px;
        opacity: 0;
        visibility: hidden;
        position: relative;
        left: -100%;
        transition: all ease 0.4s;
    }

    .feature-item:nth-child(odd) img
    {
        left: 100%;
    }

    .feature-item.show img
    {
        opacity: 1;
        visibility: visible;
        left: 0;
    }

    .feature-item p {
        font-size: 14px;
        color: #969696;
        line-height: 26px;
        margin: 8px 0;
    }

    .feature-opener i
    {
        font-size: 20px;
        line-height: 30px;
    }

    .feature-images
    {
        display: none;
    }

    .feature-item
    {
        padding: 9px 15px;
    }

    /* Flavors */
    .inner-flavors
    {
        flex-wrap: wrap;
        gap: 0;
        position: relative;
    }

    .flavor-banner,
    .flavor-detail
    {
        width: 100%;
    }

    .flavor-detail
    {
        padding: 50px 30px;
        max-height: 300px;
        overflow: hidden;
        margin-bottom: 50px;
        padding-bottom: 0;
    }

    /* Hero Section */

    .hero-section
    {
        flex-wrap: wrap;
        position: relative;
    }

    .hero-left-section, .hero-right-section
    {
        width: 100%;
    }

    .hero-left-section {
        flex-direction: row;
        gap: 10px;
        text-align: center;
        justify-content: space-between;
        min-height: auto;
        align-items: center;
        padding: 40px 20px;
        position: absolute;
        left: 0;
        top: 0;
        background-color: transparent;
        z-index: 22222;
    }

    .fruits-main img
    {
        width: 60px;
    }

    .fruits-main.active img, .fruits-main img:hover {
        /* margin-left: 30%; */
        transform: scale(1.1);
        opacity: 1;
        filter: blur(0px);
    }

    .product-boxes
    {
        top: 0;
        left: -100%;
        transition: left ease-in-out 0.5s;
        opacity: 1;
        visibility: visible;
        position: absolute;
        /* padding-top: 150px; */
    }



    .product-boxes.active
    {
        left: 0;
        position: relative;
        visibility: visible;
        opacity: 1;
        z-index: 800;
        padding: 80px 0;
    }

    .product-boxes .product-img {
        display: flex;
        align-items: center;
        gap: 30px;
    }

    .product-boxes .product-img img {
        width: 100%;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
    }

    .product-boxes.active-detail .product-img img
    {
        width: 100%;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
    }

    .tobacco-detail
    {
        padding-left: 30px;
        position: absolute;
    }

    .product-boxes.active .tobacco-detail
    {
        position: relative;
        margin-top: 0;
    }

    /* .product-boxes .tobacco-detail {
        visibility: visible;
        opacity: 1;
        margin-top: -60px;
        transform: none;
        padding: 0 30px;
        margin-bottom: 40px;
        text-align: center;
    } */

    .product-boxes .tobacco-detail li
    {
        text-align: left;
    }

    .product-boxes .product-img {
        position: relative;
        width: 100%;
        /* left: 0; */
        /* top: 0; */
        text-align: left;
        /* transform: none; */
    }

    /* .product-boxes .inside-jar {
        opacity: 0;
        visibility: hidden;
    } */

    .activefront
    {
        z-index: 8000 !important;
        position: absolute !important;
    }

    .flavor-banner
    {
        position: relative;
    }

    .flavor-banner::before
    {
        content: '';
        position: absolute;
        left: 0;
        bottom: -50px;
        width: 100%;
        height: 100px;
        background: rgb(34,34,34);
        background: linear-gradient(0deg, rgba(34,34,34,1) 0%, rgba(34,34,34,2) 71%, rgba(255,255,255,0) 100%);
    }

}

.flavor-banner
{
    font-size: 0;
}