/* New Page Template */

.standard-padding {
    padding: 100px 0 !important;

    @media (max-width: 1199px) {
        padding: 70px 30px !important;
    }

    @media (max-width: 767px) {
        padding: 50px 20px !important;
    }
}

/* Standard Banner */
section.standardBanner {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* max-width: 1884px; */
    max-width: 98.12vw;
    height: 100vh;
    max-height: 887px;
    min-height: 887px;
    position: relative;
    /* border: #fff 3px solid; */
    border-radius: 24px;
    margin: 0 auto;
    margin-top: -72px;
    margin-bottom: 24px;
    /* max-width: -webkit-fill-available; */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    overflow: hidden;

    @media (min-width: 1921px) {
        max-width: 100%;
    }

    @media (max-width: 1360px) {
        margin-top: 12px;
    }

    @media (max-width: 1199px) {
        max-width: 96.12vw;
        max-height: fit-content;
        min-height: fit-content;
    }

    .banner-frame {
        margin: 0 !important;
        position: absolute;
        height: 100%;
        width: 100%;
        display: flex;
        max-height: 86px;
        bottom: -1px;
    }

    .banner-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        pointer-events: none;
        /* let clicks pass through */
        background: linear-gradient(
            to right,
            rgba(0, 0, 0, 0.6) 0%,
            rgba(0, 0, 0, 0.3) 50%,
            rgba(0, 0, 0, 0) 100%
        );

        /* backdrop-filter: brightness(0.8) blur(8px);
        -webkit-backdrop-filter: brightness(0.8) blur(8px);  */
        z-index: 1;

        @media (max-width: 1199px) {
            width: 100%;

            background: linear-gradient(
                to right,
                rgba(0, 0, 0, 0.6) 0%,
                rgba(0, 0, 0, 0.3) 75%,
                rgba(0, 0, 0, 0) 100%
            );
        }
    }

    .standard-banner-contents {
        display: flex;
        flex-direction: column;
        width: 100%;
        z-index: 2;

        @media (max-width: 1199px) {
            align-items: center;
        }

        .category-tabs-contents {
            /* background: #ff365e; */
            /* background: #fff; */
            background: rgb(0, 0, 0, 0);
            max-width: 100% !important;
            padding: 20px 40px;
            display: flex;
            align-items: center;
            gap: 40px;
            flex-wrap: nowrap;
            position: absolute;
            bottom: 0;
            left: 0;
            /* background-image:
            image-set(
            url("https://crtaroma.com/wp-content/uploads/2025/10/curved-banner-overlay-cropped-3.png") type("image/png") 1x);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            height: 87px;
            padding-left: 32px; */

            @media (min-width: 1921px) {
                justify-content: center;
            }

            span {
                color: #fff;
                font-size: 14px;
                font-weight: 700;
                line-height: 20px;
            }

            .category-nav-tabs {
                display: flex;
                gap: 24px;
                flex-wrap: nowrap;

                @media (max-width: 1440px) {
                    overflow-x: scroll;
                }

                .button-container {
                    position: relative;
                    margin-top: auto;

                    .nav-btn {
                        display: flex;
                        gap: 16px;
                        align-items: center;
                        justify-content: space-between;
                        text-align: center;
                        position: relative;
                        min-width: 185px;
                        padding: 8px;
                        border: 0.5px solid #cdd7e4;
                        background: #fff;
                        height: 100%;
                        max-height: 60px;
                        border-radius: 100px;
                        width: 100%;
                        max-width: fit-content;
                        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.04);

                        &:hover {
                            a {
                                &.new-cta {
                                    width: 100%;
                                    background-color: #043576;
                                    transition:
                                        width 0.6s,
                                        background-color 0.3s 0.1s;
                                }
                            }

                            span {
                                &.button-text {
                                    color: #fff;
                                }
                            }
                        }

                        a {
                            &.new-cta {
                                border-radius: 50px;
                                background: #fff;
                                box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
                                display: flex;
                                padding: 8px 24px 8px 8px;
                                align-items: center;
                                gap: 16px;
                                color: #433337;
                                font-size: 15px;
                                font-style: normal;
                                font-weight: 700;
                                line-height: 24px;
                                position: relative;
                                width: 38px;
                                height: 38px;
                                border-radius: 50px;
                                border: 0px solid transparent;
                                background-color: #ff365e;
                                transition:
                                    width 0.6s,
                                    background-color 0.3s 0.1s;
                                cursor: pointer;
                            }

                            svg {
                                position: absolute;
                                /* left: 12px; */
                                opacity: 1;
                                transition: opacity 0.5s;
                            }
                        }

                        span {
                            &.button-text {
                                width: 80%;
                                position: absolute;
                                display: flex;
                                justify-content: end;
                                align-items: center;
                                /* padding-right: 20px; */
                                padding-left: 35px;
                                color: #433337;
                                font-size: 11.5px;
                                font-style: normal;
                                font-weight: 800;
                                line-height: 24px;
                                transition: ease 0.6s;
                                pointer-events: none;
                            }
                        }
                    }

                    &.fineFragrancesBannerBtn {
                        .nav-btn {
                            min-width: 175px;
                        }
                    }

                    &.personalCareBannerBtn {
                        .nav-btn {
                            min-width: 163px;
                        }
                    }

                    &.homeCareBannerBtn {
                        .nav-btn {
                            min-width: 147px;
                        }
                    }

                    &.airCareBannerBtn {
                        .nav-btn {
                            min-width: 128px;
                        }
                    }

                    &.petCareBannerBtn {
                        .nav-btn {
                            min-width: 130px;
                        }
                    }

                    &.essentialOilsBannerBtn {
                        .nav-btn {
                            min-width: 158px;
                        }
                    }
                }
            }
        }

        .banner-sub-contents {
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 626px;

            @media (max-width: 1199px) {
                max-width: 800px;
                align-items: center;

                h1 {
                    text-align: center;
                }

                p {
                    text-align: center;
                }
            }

            .banner-tag {
                display: flex;
                width: 100%;
                max-width: fit-content;
                margin-bottom: 40px;

                span {
                    border-radius: 1000px;
                    background: rgba(255, 255, 255, 0.4);
                    backdrop-filter: blur(4px);
                    display: flex;
                    padding: 10px 18px;
                    justify-content: center;
                    align-items: center;
                    gap: 10px;
                    color: #fff;
                    font-family: Poppins;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 24px;
                }
            }

            .header-text {
                margin-bottom: 40px;

                h1 {
                    color: #fff;
                    font-weight: 500;
                    margin-bottom: 24px;
                    line-height: 75px;

                    @media (max-width: 767px) {
                        line-height: 50px;
                        margin: auto !important;
                        margin-bottom: 24px !important;
                    }
                }

                p {
                    font-size: 16px;
                    color: #fff;
                    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
                }
            }

            .banner-btn {
                display: flex;
                gap: 16px;
                align-items: center;
                justify-content: space-between;
                text-align: center;
                position: relative;
                min-width: 185px;
                padding: 8px;
                border: 0.5px solid #cdd7e4;
                background: #fff;
                height: 100%;
                max-height: 60px;
                border-radius: 100px;
                width: 100%;
                max-width: fit-content;

                &:hover {
                    a {
                        &.new-cta {
                            width: 100%;
                            background-color: #043576;
                            transition:
                                width 0.6s,
                                background-color 0.3s 0.1s;
                        }
                    }

                    span {
                        &.button-text {
                            color: #fff;
                        }
                    }
                }

                a {
                    &.new-cta {
                        border-radius: 50px;
                        background: #fff;
                        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
                        display: flex;
                        padding: 8px 24px 8px 8px;
                        align-items: center;
                        gap: 16px;
                        color: #433337;
                        font-size: 15px;
                        font-style: normal;
                        font-weight: 700;
                        line-height: 24px;
                        position: relative;
                        width: 38px;
                        height: 38px;
                        border-radius: 50px;
                        border: 0px solid transparent;
                        background-color: #ff365e;
                        transition:
                            width 0.6s,
                            background-color 0.3s 0.1s;
                        cursor: pointer;
                    }

                    svg {
                        position: absolute;
                        left: 10px;
                        opacity: 1;
                        transition: opacity 0.5s;
                    }
                }
            }

            span {
                &.button-text {
                    width: 85%;
                    position: absolute;
                    display: flex;
                    justify-content: end;
                    align-items: center;
                    padding-right: 20px;
                    color: #433337;
                    font-size: 15px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: 24px;
                    transition: ease 0.6s;
                    pointer-events: none;
                }
            }
        }
    }
}

/* Standard Banner - end */
/* Cat Within Banner */
section.catWithinBanner {
    display: flex;
    flex-direction: column;
    position: sticky;
    padding: 0;
    z-index: 99;

    transition: opacity 0.4s ease;
    opacity: 1;

    &.hidden {
        opacity: 0;
        pointer-events: none;
    }

    @media (min-width: 1921px) {
        top: 140px;
    }

    @media (min-width: 1200px) {
        top: 182px;
    }

    @media (max-width: 1199px) {
        top: 80px;
        overflow-y: hidden;
    }

    .cat-within-banner-contents {
        margin: unset;
        max-width: unset;

        @media (min-width: 1200px) {
            margin: -100px 0 0;
        }

        @media (max-width: 1199px) {
            align-items: center;
        }

        .category-tabs-contents {
            /* background: #ff365e; */
            /* background: #fff; */
            background: rgb(0, 0, 0, 0);
            width: 100%;
            max-width: 100% !important;
            /* padding: 0; */
            display: flex;
            align-items: center;
            gap: 40px;
            flex-wrap: nowrap;
            position: absolute;
            bottom: 0;
            left: 0;
            /* bottom: 30px;
            left: 60px; */

            @media (max-width: 1199px) {
                position: relative;
                /* flex-direction: column; */
            }

            /* @media (min-width: 1200px) {
                justify-content: flex-start;
                width: 55%;
                width: 85%;
                top: 50%;
                left: 0;
                transform: translate(5%, -118%);
                padding: 0;
                overflow-x: scroll;
                height: 90px;
                height: 80px;
                overflow-y: hidden;
                overflow-x: hidden;
            } */

            /* @media (max-width: 1920px) and (min-width: 1920px) {
                overflow-x: hidden;
            } */

            @media (min-width: 1921px) {
                justify-content: flex-start;
                width: 1564px;
                /* left: 12%; */
            }

            @media (min-width: 1200px) {
                padding: 20px 40px;
            }

            @media (min-width: 768px) and (max-width: 1199px) {
                padding: 20px 30px;
            }

            @media (max-width: 767px) {
                padding: 20px;
                gap: 25px !important;
            }

            span {
                /* color: #fff; */
                color: #433337;
                font-size: 14px;
                font-weight: 700;
                line-height: 20px;
                font-family: "Poppins-Bold" !important;
            }

            .category-nav-tabs {
                display: flex;
                gap: 24px;
                flex-wrap: nowrap;

                @media (max-width: 1440px) {
                    overflow-x: scroll;
                }

                @media (max-width: 767px) {
                    gap: 15px !important;
                }

                .button-container {
                    position: relative;
                    margin-top: auto;

                    .nav-btn {
                        display: flex;
                        gap: 16px;
                        align-items: center;
                        justify-content: space-between;
                        text-align: center;
                        position: relative;
                        min-width: 185px;
                        /* padding: 8px; */
                        padding: 4px;
                        border: 0.5px solid #cdd7e4;
                        background: #fff;
                        height: 100%;
                        max-height: 60px;
                        border-radius: 100px;
                        width: 100%;
                        max-width: fit-content;
                        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.04);

                        &:hover {
                            a {
                                &.new-cta {
                                    width: 100%;
                                    background-color: #043576;
                                    transition:
                                        width 0.6s,
                                        background-color 0.3s 0.1s;
                                }
                            }

                            span {
                                &.button-text {
                                    color: #fff;
                                }
                            }
                        }

                        a {
                            &.new-cta {
                                border-radius: 50px;
                                background: #fff;
                                box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
                                display: flex;
                                padding: 8px 24px 8px 10px;
                                align-items: center;
                                gap: 16px;
                                color: #433337;
                                font-size: 15px;
                                font-style: normal;
                                font-weight: 700;
                                line-height: 24px;
                                position: relative;
                                width: 38px;
                                height: 38px;
                                /* height: 29px; */
                                border-radius: 50px;
                                border: 0px solid transparent;
                                background-color: #ff365e;
                                transition:
                                    width 0.6s,
                                    background-color 0.3s 0.1s;
                                cursor: pointer;
                            }

                            svg {
                                position: absolute;
                                /* left: 12px; */
                                opacity: 1;
                                transition: opacity 0.5s;
                            }
                        }

                        span {
                            &.button-text {
                                width: 80%;
                                position: absolute;
                                display: flex;
                                justify-content: end;
                                align-items: center;
                                /* padding-right: 20px; */
                                padding-left: 35px;
                                color: #433337;
                                font-size: 10px;
                                font-style: normal;
                                font-weight: 800;
                                line-height: 24px;
                                transition: ease 0.6s;
                                pointer-events: none;
                                font-family: "Poppins-Bold" !important;
                            }
                        }
                    }

                    &.fineFragrancesBannerBtn {
                        .nav-btn {
                            min-width: 161px;
                        }
                    }

                    &.personalCareBannerBtn {
                        .nav-btn {
                            min-width: 148px;
                        }
                    }

                    &.homeCareBannerBtn {
                        .nav-btn {
                            min-width: 130px;
                        }
                    }

                    &.airCareBannerBtn {
                        .nav-btn {
                            min-width: 110px;
                        }
                    }

                    &.petCareBannerBtn {
                        .nav-btn {
                            min-width: 112px;
                        }
                    }

                    &.essentialOilsBannerBtn {
                        .nav-btn {
                            min-width: 143px;
                        }
                    }

                    &.sweetBannerBtn {
                        .nav-btn {
                            min-width: 97px;
                        }
                    }

                    &.savouryBannerBtn {
                        .nav-btn {
                            min-width: 112px;
                        }
                    }

                    &.beveragesBannerBtn {
                        .nav-btn {
                            min-width: 127px;
                        }
                    }

                    &.healthAndWellnessBannerBtn {
                        .nav-btn {
                            min-width: 190px;
                        }
                    }

                    &.naturalsAndEffectsBannerBtn {
                        .nav-btn {
                            min-width: 187px;
                        }
                    }

                    &.foodCoatingBannerBtn {
                        .nav-btn {
                            min-width: 138px;
                        }
                    }

                    &.foodAndBeverageIngredientsBannerBtn {
                        .nav-btn {
                            min-width: 231px;

                            span {
                                &.button-text {
                                    white-space: nowrap;
                                    overflow: hidden;
                                    left: 24px;
                                }
                            }
                        }
                    }

                    &.soakingAgentsBannerBtn {
                        .nav-btn {
                            min-width: 151px;
                        }
                    }

                    &.aromaChemicalsBannerBtn {
                        .nav-btn {
                            min-width: 163px;

                            span {
                                &.button-text {
                                    white-space: nowrap;
                                    overflow: hidden;
                                    left: 8px;
                                }
                            }
                        }
                    }

                    &.detergentBaseBannerBtn {
                        .nav-btn {
                            min-width: 149px;

                            span {
                                &.button-text {
                                    white-space: nowrap;
                                    overflow: hidden;
                                    left: 6px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* Cat Within Banner - end */

/* Info Block */
section.infoBlock {
    .info-block-contents {
        display: flex;
        gap: 100px;

        .left-contents {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            max-width: 614px;

            @media (max-width: 1199px) {
                max-width: 100%;

                .header-text {
                    h2 {
                        text-align: center;
                    }

                    p {
                        text-align: center;
                    }
                }
            }

            .header-text {
                display: flex;
                flex-direction: column;

                p {
                    font-size: 16px;
                }

                h2 {
                    font-size: 44px;
                    line-height: 60px;
                    margin-bottom: 24px;
                }

                .image-container {
                    &.mobile-image {
                        display: flex;
                        flex-direction: column;
                        border-radius: 24px;
                        margin-bottom: 24px;
                        overflow: hidden;

                        @media (min-width: 1200px) {
                            display: none;
                        }

                        img {
                            width: 100%;
                            max-width: -webkit-fill-available;
                            height: 100%;
                            max-height: 436px;
                            object-fit: cover;
                        }
                    }
                }
            }
        }

        .right-contents {
            @media (max-width: 1199px) {
                display: none;
            }

            .image-container {
                display: flex;
                flex-direction: column;
                border-radius: 24px;
                overflow: hidden;

                img {
                    width: 100vw;
                    max-width: 44.84vw;
                    height: 100%;
                    max-height: 436px;
                    object-fit: cover;

                    @media (min-width: 1921px) {
                        max-width: 862px;
                    }
                }
            }
        }
    }
}

/* Info Block - end */

/* Runner Image */
section.runnerImage {
    padding: 0 !important;

    img {
        width: 100%;
        max-width: 100% !important;
        height: 100%;
        max-height: 322px;
        object-fit: cover;
    }
}

/* Runner Image - end */

/* Quad Blocks */
section.quadBlocks {
    display: flex;
    flex-direction: column;

    .quad-blocks-contents {
        display: flex;
        flex-direction: column;
        width: 100%;

        .quad-blocks-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(2, 1fr);
            grid-column-gap: 24px;
            grid-row-gap: 24px;

            /* @media (max-width: 1199px) { */
            @media (max-width: 1440px) {
                display: flex;
                flex-direction: column;
            }

            .quad-block {
                display: flex;
                flex-direction: column;
                width: 100%;
                padding: 10px;
                border-radius: 14px;
                box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.04);
                height: 100%;
                position: relative;

                .quad-block-inside {
                    display: flex;
                    /* flex-direction: column; */
                    overflow: hidden;
                    width: 100%;
                    height: 100%;
                    border-radius: 14px;
                    border: 1px solid #cdd7e4;
                    /* background-size: 70% 100%;*/
                    /* background-size: cover; */
                    background-size: contain;
                    background-position: 100% center;

                    .text-content {
                        background: linear-gradient(
                            to right,
                            #fff 0%,
                            #fff 50%,
                            rgba(255, 255, 255, 0.85) 55%,
                            rgba(255, 255, 255, 0.5) 60%,
                            rgba(255, 255, 255, 0) 65%
                        );
                        padding: 40px;
                        display: flex;
                        flex-direction: column;
                        width: 100%;

                        /* @media (max-width: 1199px) { */
                        @media (max-width: 1440px) {
                            background: #fff !important;
                        }

                        @media (max-width: 767px) {
                            text-align: center;
                            align-items: center;
                        }

                        h3 {
                            font-weight: 500;
                            margin-bottom: 24px;
                            width: 100%;
                            /* max-width: 402px; */
                            max-width: 20.94vw;

                            @media (min-width: 1921px) {
                                max-width: 402px;
                            }

                            /* @media (max-width: 1199px) { */
                            @media (max-width: 1440px) {
                                max-width: 100%;
                                text-align: center;
                            }
                        }

                        p {
                            font-size: 16px;
                            width: 100%;
                            /* max-width: 402px; */
                            /* max-width: 20.94vw; */
                            max-width: 18.94vw;

                            @media (min-width: 1921px) {
                                max-width: 402px;
                            }

                            /* @media (max-width: 1199px) { */
                            @media (max-width: 1440px) {
                                max-width: 100%;
                            }
                        }
                    }

                    /* ::HIDDEN IMAGE WITHIN TEXT */
                    img {
                        &.image-within {
                            display: none;

                            /* @media (max-width: 1199px) { */
                            @media (max-width: 1440px) {
                                display: block;
                                width: 100%;
                                border-radius: 14px;
                                margin-bottom: 24px;
                                max-height: 650px;
                                object-fit: cover;
                                object-position: top;
                            }
                        }
                    }
                }

                &.block-1 {
                    grid-area: 1 / 1 / 4 / 3;

                    .quad-block-inside {
                        /* background-position: 100% 5%; */
                        /* @media (min-width: 1601px) {
                            background-position: 128% 5%;
                        } */

                        /* background-size: auto; */
                        /* background-position: -40% center; */
                        /* background-position: 0% center; */

                        /* background-size: 100% 100%; */

                        /* background-position: 100% center; */
                        /* background-position: 30% center; */

                        /* @media (max-width: 1860px) {
                            background-size: 105% 104%;
                            background-position: -50% center;
                        }

                        @media (max-width: 1650px) {
                            background-size: 113% 121%;
                            background-position: 67% center;
                        }

                        @media (max-width: 1580px) {
                            background-size: 138% 130%;
                            background-position: 76% center;
                        }

                        @media (max-width: 1500px) {
                            background-size: 174% 116%;
                            background-position: 79% center;
                        } */
                        /* @media (max-width: 1600px) {
                            background-size: 110% 110%;
                            background-position: 10% center;
                        } */

                        /* @media (min-width: 1441px) {
                            background-size: 150% 100%;
                            background-position: 90% 100%;
                        } */

                        background-size: cover;
                        background-position: 70% center;
                    }

                    .text-content {
                        /* background: linear-gradient(
                            to right,
                            #fff 0%,
                            #fff 50%,
                            rgba(255, 255, 255, 0.85) 55%,
                            rgba(255, 255, 255, 0.5) 65%,
                            rgba(255, 255, 255, 0) 100%
                            ); */

                        /* background: linear-gradient(to right, #fff 0%, #fff 45%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.5) 55%, rgba(255, 255, 255, 0) 65%);   */

                        /* background: linear-gradient(to right, #fff 0%, #fff 40%, rgba(255, 255, 255, 0.85) 45%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 55%); */

                        /* background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 30%, rgba(255, 255, 255, 0.85) 35%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0) 45%); */
                        /* background: none; */

                        background: linear-gradient(
                            to right,
                            rgb(255, 255, 255) 0%,
                            rgb(255, 255, 255) 35%,
                            rgba(255, 255, 255, 0.85) 40%,
                            rgba(255, 255, 255, 0.5) 45%,
                            rgba(255, 255, 255, 0) 50%
                        );

                        h3 {
                            max-width: 13vw;

                            @media (min-width: 1921px) {
                                max-width: 250px;
                            }

                            @media (max-width: 1440px) {
                                max-width: 100% !important;
                            }

                            @media (max-width: 767px) {
                                max-width: 100% !important;
                            }

                            @media (max-width: 430px) {
                                max-width: 225px !important;
                                min-width: 225px !important;
                            }
                        }

                        p {
                            &:first-of-type {
                                /* max-width: 14vw; */
                                max-width: 12.9vw;

                                @media (min-width: 1921px) {
                                    max-width: 248px;
                                }

                                @media (max-width: 1860px) {
                                    max-width: 20vw;
                                }

                                @media (max-width: 1440px) {
                                    max-width: 100%;
                                }
                            }

                            &:last-of-type {
                                /* max-width: 12vw; */
                                max-width: 17vw;

                                @media (min-width: 1921px) {
                                    max-width: 347px;
                                }

                                @media (max-width: 1860px) {
                                    max-width: 20vw;
                                }

                                @media (max-width: 1440px) {
                                    max-width: 100%;
                                }
                            }
                        }

                        img {
                            &.image-within {
                                /* max-height: 100%; */
                                object-fit: contain;
                                border-radius: 14px;
                                width: fit-content;
                                position: relative;
                                margin: 0 auto;
                                margin-bottom: 24px;
                            }
                        }
                    }

                    .block-images {
                        display: flex;
                        gap: 0;
                        /* gap: 18px; */
                        position: relative;
                        margin-top: auto;
                        width: 100%;
                        max-width: 222px;

                        @media (min-width: 1441px) {
                            gap: 18px;
                        }

                        @media (max-width: 1440px) {
                            justify-content: space-between;
                            margin: 0 auto;
                        }

                        @media (max-width: 300px) {
                            flex-direction: column;
                            align-items: center;
                            gap: 0;
                        }
                    }
                }

                &.block-2 {
                    grid-area: 1 / 3 / 3 / 5;

                    .quad-block-inside {
                        background-position: 90% center;
                        background-size: cover;
                    }

                    .text-content {
                        h3 {
                            @media (max-width: 441px) {
                                display: none;
                            }

                            &.mobile-h3 {
                                display: flex;
                                justify-content: center;
                                order: -1;

                                @media (min-width: 442px) {
                                    display: none;
                                }
                            }
                        }
                    }
                }

                &.block-3 {
                    grid-area: 3 / 3 / 6 / 5;

                    .quad-block-inside {
                        /* background-position: 90% center; */
                        background-position: 100% center;
                        background-size: cover;

                        .text-content {
                            h3 {
                                @media (max-width: 1440px) {
                                    display: none;
                                }

                                &.tablet-h3 {
                                    display: flex;
                                    justify-content: center;
                                    order: -1;

                                    @media (min-width: 1441px) {
                                        display: none;
                                    }

                                    @media (max-width: 420px) {
                                        display: none;
                                    }
                                }

                                &.mobile-h3 {
                                    display: flex;
                                    justify-content: center;
                                    order: -1;

                                    @media (min-width: 420px) {
                                        display: none;
                                    }
                                }
                            }
                        }
                    }
                }

                &.block-4 {
                    grid-area: 4 / 1 / 6 / 3;

                    .header-text {
                        display: flex;
                        gap: 24px;
                        align-items: center;
                        margin-bottom: 24px;

                        @media (max-width: 1199px) {
                            justify-content: center;
                        }

                        @media (max-width: 767px) {
                            flex-direction: column-reverse;
                        }

                        p {
                            @media (max-width: 1440px) {
                                width: max-content;
                            }
                        }

                        h3 {
                            margin-bottom: 0;

                            @media (max-width: 1440px) {
                                display: none;
                            }

                            &.tablet-h3 {
                                display: flex;
                                width: fit-content;

                                @media (min-width: 1441px) {
                                    display: none;
                                }
                            }
                        }

                        /* p {
                            display: none;
                        } */
                    }
                }
            }
        }
    }
}

/* Quad Blocks - end */

/* Big Petal */
section.bigPetal {
    border-top-right-radius: 250px;
    border-bottom-left-radius: 250px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    @media (max-width: 1199px) {
        border-top-right-radius: 150px;
        border-bottom-left-radius: 150px;

        /* background-size: 150% 100% !important; */
        /* background-position: 75% center !important; */
        background-position: 69% center !important;
    }

    @media (max-width: 767px) {
        background-position: left !important;
    }

    .big-petal-contents {
        display: flex;
        gap: 100px;
        max-width: 81.46vw;

        @media (max-width: 1199px) {
            flex-direction: column-reverse;
        }

        .right-contents {
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 738px;

            @media (max-width: 767px) {
                align-items: center;
                text-align: center;
            }

            h2 {
                color: #fff;
                font-size: 44px;
                font-weight: 500;
                line-height: 60px;
                margin-bottom: 24px;
            }

            p {
                color: #fff;
                font-size: 16px;
                font-weight: 400;
                line-height: 24px;
            }
        }

        .left-contents {
            display: flex;
            flex-direction: column;
            width: 100vw;
            max-width: 738px;

            @media (max-width: 1199px) {
                max-width: 100%;
            }

            @media (max-width: 767px) {
                align-items: center;
            }

            .core-values-grid {
                display: flex;
                flex-direction: column;
                gap: 60px;

                @media (max-width: 1199px) {
                    gap: 50px;
                    max-width: 400px;
                }

                .core-value {
                    &.item-1 {
                        .value-title {
                            gap: 24px;

                            @media (max-width: 575px) {
                                gap: 24px;
                            }
                        }
                    }

                    &.item-2 {
                        .value-title {
                            gap: 29px;

                            @media (max-width: 575px) {
                                gap: 24px;
                            }
                        }
                    }

                    &.item-3 {
                        .value-title {
                            gap: 26px;

                            @media (max-width: 575px) {
                                gap: 24px;
                            }
                        }
                    }

                    &.item-4 {
                        .value-title {
                            gap: 36px;

                            @media (max-width: 575px) {
                                gap: 24px;
                            }
                        }
                    }

                    &.item-5 {
                        .value-title {
                            gap: 26px;

                            @media (max-width: 575px) {
                                gap: 24px;
                            }
                        }
                    }

                    &.item-6 {
                        .value-title {
                            gap: 30px;

                            @media (max-width: 575px) {
                                gap: 24px;
                            }
                        }
                    }

                    .value-title {
                        display: flex;
                        align-items: center;
                        gap: 24px;
                        margin-bottom: 24px;

                        @media (max-width: 767px) {
                            flex-direction: column;
                        }

                        h3 {
                            color: #fff;
                        }
                    }

                    p {
                        color: #fff;
                        font-size: 16px;
                        font-weight: 400;
                        line-height: 24px;

                        @media (max-width: 767px) {
                            text-align: center;
                        }
                    }
                }
            }
        }
    }
}

/* Big Petal - end */

/* Big Window Ver One */
section.bigWindowVerOne {
    @media (min-width: 1200px) {
        margin: 0 60px;
    }

    .big-window-ver-one-contents {
        display: flex;
        flex-direction: column;

        .header-text {
            display: flex;
            align-items: center;
            gap: 80px;
            margin-bottom: 60px;

            @media (max-width: 1199px) {
                flex-direction: column-reverse;
                gap: 24px;

                h2 {
                    text-align: center;
                    margin-bottom: 0;
                }

                p {
                    text-align: center;
                }
            }

            @media (max-width: 767px) {
                margin-bottom: 30px;
            }

            h2 {
                width: 100%;
                /* max-width: 49%; */
                max-width: 748px;
                font-size: 44px;
                font-weight: 500;
                line-height: 60px;

                @media (max-width: 1199px) {
                    max-width: 100%;
                }
            }

            p {
                font-size: 16px;
                width: 100%;
                max-width: 100%;
            }
        }

        .inner-contents {
            display: flex;
            gap: 80px;

            @media (max-width: 1199px) {
                gap: 0;
            }

            @media (max-width: 1199px) {
                flex-direction: column;

                .right-contents {
                    max-height: 645px !important;

                    .big-image-container {
                        max-height: 645px !important;
                        width: -webkit-fill-available;

                        img {
                            width: -webkit-fill-available !important;
                        }
                    }
                }

                .left-contents {
                    .control-grid {
                        .grid-item {
                            width: 100% !important;
                            max-width: 100% !important;
                        }
                    }
                }
            }

            .left-contents {
                display: flex;
                flex-direction: column;

                .control-grid {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 40px;

                    @media (max-width: 1199px) {
                        display: flex;
                        flex-direction: column;
                    }

                    @media (max-width: 767px) {
                        display: flex;
                        flex-direction: column;
                    }

                    .grid-item {
                        display: flex;
                        flex-direction: column;
                        padding: 24px;
                        width: 100vw;
                        max-width: 354px;
                        border-radius: 24px;
                        border: 1px solid #cdd7e4;
                        transition: 0.4s ease;

                        @media (max-width: 1199px) {
                            box-shadow: 0px 2.76px 5.51px 0px
                                rgba(0, 0, 0, 0.04);
                        }

                        &.compressed {
                            @media (max-width: 1199px) {
                                .upper-contents {
                                    margin-bottom: 0;

                                    .item-title {
                                        margin-bottom: 0;
                                    }
                                    .item-desc {
                                        display: none;
                                    }
                                }
                                .button-container {
                                    display: none;
                                }
                            }
                        }

                        &.expanded {
                            @media (max-width: 1199px) {
                                img {
                                    filter: brightness(0) saturate(100%)
                                        invert(5%) sepia(96%) saturate(5200%)
                                        hue-rotate(205deg) brightness(92%)
                                        contrast(101%);

                                    &.mobile-img {
                                        filter: none;
                                        border-radius: 8px;
                                        height: 100vh;
                                        width: 100%;
                                        max-height: 700px;
                                        object-fit: cover;
                                    }
                                }

                                h3 {
                                    color: #043576;
                                }
                            }

                            @media (max-width: 767px) {
                                img {
                                    &.mobile-img {
                                        max-height: 370px;
                                        height: unset;
                                    }
                                }
                            }
                        }

                        .upper-contents {
                            display: flex;
                            flex-direction: column;
                            margin-bottom: 24px;
                            transition: 0.4s ease;

                            .item-title {
                                display: flex;
                                align-items: center;
                                gap: 24px;
                                margin-bottom: 24px;
                                transition: 0.4s ease;

                                h3 {
                                    font-weight: 600;
                                    line-height: 32px;
                                    transition: 0.3s ease;
                                }
                            }

                            .item-desc {
                                p {
                                    font-size: 16px;
                                    line-height: 24px;
                                    transition: 0.4s ease;

                                    img {
                                        transition: 0.4s ease;
                                        &.mobile-img {
                                            @media (min-width: 1200px) {
                                                display: none;
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        .button-container {
                            position: relative;
                            margin-top: auto;
                            transition: 0.4s ease;

                            .card-btn {
                                display: flex;
                                gap: 16px;
                                align-items: center;
                                justify-content: space-between;
                                text-align: center;
                                position: relative;
                                min-width: 50px;
                                padding: 8px;
                                border: 0.5px solid #cdd7e4;
                                background: #fff;
                                height: 100%;
                                max-height: 60px;
                                border-radius: 100px;
                                width: 100%;
                                max-width: fit-content;
                                box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
                                transition: 0.4s ease;
                                overflow: hidden;

                                &:hover {
                                    min-width: 185px;

                                    a {
                                        &.new-cta {
                                            width: 100%;
                                            background-color: #043576;
                                            transition:
                                                width 0.6s,
                                                background-color 0.3s 0.1s;
                                        }
                                    }

                                    span {
                                        &.button-text {
                                            color: #fff;
                                            /* display: flex; */
                                        }
                                    }
                                }

                                a {
                                    &.new-cta {
                                        border-radius: 50px;
                                        background: #fff;
                                        box-shadow: 0px 4px 8px 0px
                                            rgba(0, 0, 0, 0.04);
                                        /* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important; */
                                        display: flex;
                                        padding: 8px 24px 8px 8px;
                                        align-items: center;
                                        gap: 16px;
                                        color: #433337;
                                        font-size: 15px;
                                        font-style: normal;
                                        font-weight: 700;
                                        line-height: 24px;
                                        position: relative;
                                        width: 38px;
                                        height: 38px;
                                        border-radius: 50px;
                                        border: 0px solid transparent;
                                        background-color: #ff365e;
                                        transition:
                                            width 0.3s,
                                            background-color 0.3s 0.1s;
                                        cursor: pointer;
                                    }

                                    svg {
                                        position: absolute;
                                        /* left: 12px; */
                                        left: 10px;
                                        opacity: 1;
                                        transition: opacity 0.5s;
                                    }
                                }

                                span {
                                    &.button-text {
                                        width: 85%;
                                        position: absolute;
                                        display: flex;
                                        justify-content: end;
                                        align-items: center;
                                        padding-right: 20px;
                                        /* color: #433337; */
                                        color: rgba(0, 0, 0, 0);
                                        font-size: 15px;
                                        font-style: normal;
                                        font-weight: 700;
                                        line-height: 24px;
                                        transition: ease 0.6s;
                                        pointer-events: none;
                                    }
                                }
                            }
                        }

                        &:hover {
                            background: #f8f8f8;
                            border: 1px solid #043576;
                            box-shadow: 0px 2.76px 5.51px 0px
                                rgba(0, 0, 0, 0.04);

                            h3 {
                                color: #043576;
                            }

                            img {
                                filter: brightness(0) saturate(100%) invert(5%)
                                    sepia(96%) saturate(5200%)
                                    hue-rotate(205deg) brightness(92%)
                                    contrast(101%);
                            }
                        }

                        &#beveragesCard {
                            .item-desc {
                                p {
                                    font-size: 15.7px;
                                }
                            }
                        }
                    }
                }
            }

            .right-contents {
                display: flex;
                flex-direction: column;
                width: 100%;
                position: relative;
                border-radius: 24px;
                border: 1px solid #fff;
                overflow: visible;
                height: 100vh;
                max-height: 1064px;
                min-height: -webkit-fill-available;

                @media (max-width: 1199px) {
                    display: none;
                }

                /* @media (min-width: 1200px) {
                    min-height: 1064px;
                } */

                .big-image-container {
                    border-radius: 24px;
                    overflow: hidden;
                    display: flex;
                    position: absolute;
                    top: 0;
                    border: 1px solid #fff;
                    height: 100vh;
                    max-height: 1064px;
                    /* min-height: 1064px; */
                    min-height: -webkit-fill-available;
                    opacity: 0;
                    transition: opacity 0.4s ease;
                    /*
                    @media (min-width: 1200px) {
                        min-height: 1064px;
                    } */

                    &#defaultImg {
                        opacity: 1;
                    }

                    &#healthAndWellnessImg {
                        img {
                            object-position: top;
                        }
                    }

                    &#personalCareImg {
                        img {
                            object-position: 100% 30%;

                            /* @media (max-width: 575px) {
                                object-position: 100% 90%;
                            } */
                        }
                    }

                    &#essentialOilsImg {
                        img {
                            object-position: 100% 70%;
                        }
                    }

                    &#naturalsAndExtractsImg {
                        img {
                            object-position: 100% 100%;
                            width: 100% !important;
                        }
                    }

                    &#homeCareImg {
                        img {
                            @media (max-width: 1199px) {
                                object-position: 100% 21%;
                            }
                        }
                    }

                    img {
                        object-fit: cover;
                    }
                }
            }
        }
    }

    .big-window-ver-one-contents {
        .inner-contents {
            @media (max-width: 575px) {
                .right-contents {
                    max-height: 294px !important;
                    min-height: 294px !important;

                    .big-image-container {
                        max-height: 294px !important;
                        min-height: 294px !important;
                    }
                }
            }
        }
    }

    /* When hovered card is active */
    .inner-contents:has(#fineFragrancesCard:hover) #fineFragrancesImg,
    .inner-contents:has(#personalCareCard:hover) #personalCareImg,
    .inner-contents:has(#homeCareCard:hover) #homeCareImg,
    .inner-contents:has(#airCareCard:hover) #airCareImg,
    .inner-contents:has(#petCareCard:hover) #petCareImg,
    .inner-contents:has(#essentialOilsCard:hover) #essentialOilsImg {
        opacity: 1;
    }

    .inner-contents:has(#fineFragrancesCard:hover) #defaultImg,
    .inner-contents:has(#personalCareCard:hover) #defaultImg,
    .inner-contents:has(#homeCareCard:hover) #defaultImg,
    .inner-contents:has(#airCareCard:hover) #defaultImg,
    .inner-contents:has(#petCareCard:hover) #defaultImg,
    .inner-contents:has(#essentialOilsCard:hover) #defaultImg {
        opacity: 0;
    }

    .inner-contents:has(#sweetCard:hover) #sweetImg,
    .inner-contents:has(#savouryCard:hover) #savouryImg,
    .inner-contents:has(#beveragesCard:hover) #beveragesImg,
    .inner-contents:has(#healthAndWellnessCard:hover) #healthAndWellnessImg,
    .inner-contents:has(#naturalsAndExtractsCard:hover)
        #naturalsAndExtractsImg {
        opacity: 1;
    }

    .inner-contents:has(#sweetCard:hover) #defaultImg,
    .inner-contents:has(#savouryCard:hover) #defaultImg,
    .inner-contents:has(#beveragesCard:hover) #defaultImg,
    .inner-contents:has(#healthAndWellnessCard:hover) #defaultImg,
    .inner-contents:has(#naturalsAndExtractsCard:hover) #defaultImg {
        opacity: 0;
    }

    .inner-contents:has(#foodCoatingCard:hover) #foodCoatingImg,
    .inner-contents:has(#foodAndBeverageIngredientsCard:hover)
        #foodAndBeverageIngredientsImg,
    .inner-contents:has(#soakingAgentsCard:hover) #soakingAgentsImg,
    .inner-contents:has(#aromaChemicalsCard:hover) #aromaChemicalsImg,
    .inner-contents:has(#detergentBaseCard:hover) #detergentBaseImg {
        opacity: 1;
    }

    .inner-contents:has(#foodCoatingCard:hover) #defaultImg,
    .inner-contents:has(#foodAndBeverageIngredientsCard:hover) #defaultImg,
    .inner-contents:has(#soakingAgentsCard:hover) #defaultImg,
    .inner-contents:has(#aromaChemicalsCard:hover) #defaultImg,
    .inner-contents:has(#detergentBaseCard:hover) #defaultImg {
        opacity: 0;
    }
    /* When hovered card is active - end */
}

/* Big Window Ver One - end */

/* Small Petal */
section.smallPetal {
    @media (min-width: 1200px) {
        padding-top: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 100px !important;
        padding-left: 60px !important;
    }

    .small-petal-contents {
        display: flex;
        gap: 100px;
        margin: 0;
        margin-left: auto;
        max-width: 1748px;

        @media (min-width: 1921px) {
            margin-right: auto;
        }

        @media (max-width: 1199px) {
            flex-direction: column;
        }

        .left-contents {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            max-width: 688px;

            @media (max-width: 1199px) {
                max-width: 100%;
            }

            .description {
                .image-within {
                    @media (min-width: 1200px) {
                        display: none;
                    }

                    margin-bottom: 24px;

                    img {
                        width: 100%;
                        max-height: 645px;
                        object-fit: cover;
                        border-radius: 24px;
                    }
                }
            }

            h2 {
                font-size: 44px;
                font-weight: 500;
                line-height: 60px;
                margin-bottom: 24px;

                @media (max-width: 1199px) {
                    text-align: center;
                    font-size: 40px;
                }

                @media (max-width: 767px) {
                    font-size: 30px;
                }
            }

            p {
                font-size: 16px;

                @media (max-width: 1199px) {
                    /* text-align: center; */
                    text-align: left;
                }
            }
        }

        .right-contents {
            display: flex;
            flex-direction: column;
            justify-content: center;

            @media (max-width: 1199px) {
                display: none;
            }

            .image-container {
                overflow: hidden;
                border-top-left-radius: 500px;
                border-bottom-right-radius: 240px;

                img {
                    width: 100vw;
                    max-width: 50vw;
                    height: 100vh;
                    max-height: 700px;
                    min-height: 700px;
                    object-fit: cover;

                    @media (min-width: 1921px) {
                        max-width: 960px;
                    }
                }
            }
        }
    }
}

/* Small Petal - end */

/* Category Tabs */
section.categoryTabs {
    padding: 0 !important;

    .category-tabs-contents {
        background: #ff365e;
        max-width: 100% !important;
        padding: 20px 40px;
        display: flex;
        align-items: center;
        gap: 40px;
        flex-wrap: nowrap;
        z-index: 99;
        position: relative;

        @media (min-width: 1921px) {
            /* justify-content: center; */
            justify-content: flex-start;
        }

        span {
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            line-height: 20px;
            font-family: "Poppins-Bold" !important;
        }

        .category-nav-tabs {
            display: flex;
            gap: 24px;
            flex-wrap: nowrap;

            @media (max-width: 1440px) {
                overflow-x: scroll;
            }

            .button-container {
                position: relative;
                margin-top: auto;

                .nav-btn {
                    display: flex;
                    gap: 16px;
                    align-items: center;
                    justify-content: space-between;
                    text-align: center;
                    position: relative;
                    min-width: 185px;
                    /* padding: 8px; */
                    padding: 4px;
                    border: 0.5px solid #cdd7e4;
                    background: #fff;
                    height: 100%;
                    max-height: 60px;
                    border-radius: 100px;
                    width: 100%;
                    max-width: fit-content;
                    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.04);

                    &:hover {
                        a {
                            &.new-cta {
                                width: 100%;
                                background-color: #043576;
                                transition:
                                    width 0.6s,
                                    background-color 0.3s 0.1s;
                            }
                        }

                        span {
                            &.button-text {
                                color: #fff;
                            }
                        }
                    }

                    a {
                        &.new-cta {
                            border-radius: 50px;
                            background: #fff;
                            box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
                            display: flex;
                            padding: 8px 24px 8px 8px;
                            align-items: center;
                            gap: 16px;
                            color: #433337;
                            font-size: 15px;
                            font-style: normal;
                            font-weight: 700;
                            line-height: 24px;
                            position: relative;
                            width: 38px;
                            height: 38px;
                            border-radius: 50px;
                            border: 0px solid transparent;
                            background-color: #ff365e;
                            transition:
                                width 0.6s,
                                background-color 0.3s 0.1s;
                            cursor: pointer;
                        }

                        svg {
                            position: absolute;
                            /* left: 12px; */
                            left: 10px;
                            opacity: 1;
                            transition: opacity 0.5s;
                        }
                    }

                    span {
                        &.button-text {
                            width: 80%;
                            position: absolute;
                            display: flex;
                            justify-content: end;
                            align-items: center;
                            /* padding-right: 20px; */
                            padding-left: 35px;
                            color: #433337;
                            /* font-size: 11.5px; */
                            font-size: 10px;
                            font-style: normal;
                            font-weight: 800;
                            line-height: 24px;
                            transition: ease 0.6s;
                            pointer-events: none;
                            font-family: "Poppins-Bold" !important;
                        }
                    }
                }

                &.fineFragrancesTab {
                    .nav-btn {
                        min-width: 161px;
                    }
                }

                &.personalCareTab {
                    .nav-btn {
                        min-width: 148px;
                    }
                }

                &.homeCareTab {
                    .nav-btn {
                        min-width: 130px;
                    }
                }

                &.airCareTab {
                    .nav-btn {
                        min-width: 110px;
                    }
                }

                &.petCareTab {
                    .nav-btn {
                        min-width: 112px;
                    }
                }

                &.essentialOilsTab {
                    .nav-btn {
                        min-width: 143px;
                    }
                }

                &.foodCoatingTab {
                    .nav-btn {
                        min-width: 138px;
                        span {
                            &.button-text {
                                margin-left: 7px;
                            }
                        }
                    }
                }

                &.foodAndBeverageIngredientsTab {
                    .nav-btn {
                        min-width: 231px;

                        span {
                            &.button-text {
                                white-space: nowrap;
                                overflow: hidden;
                                /* left: 24px; */
                                margin-left: 16px;
                            }
                        }
                    }
                }

                &.soakingAgentsTab {
                    .nav-btn {
                        min-width: 151px;

                        span {
                            &.button-text {
                                margin-left: 9px;
                            }
                        }
                    }
                }

                &.aromaChemicalsTab {
                    .nav-btn {
                        min-width: 163px;

                        span {
                            &.button-text {
                                white-space: nowrap;
                                overflow: hidden;
                                margin-left: 10px;
                            }
                        }
                    }
                }

                &.detergentBaseTab {
                    .nav-btn {
                        min-width: 149px;

                        span {
                            &.button-text {
                                white-space: nowrap;
                                overflow: hidden;
                                margin-left: 10px;
                            }
                        }
                    }
                }
            }
        }
    }
}

/* Category Tabs - end */

/* Contact Map */
section.contactMap {
    .contact-map-contents {
        .header-title {
            display: flex;
            flex-direction: column;
            margin-bottom: 40px;

            @media (max-width: 1199px) {
                align-items: center;
                text-align: center;
            }

            h2 {
                color: #433337;
                font-size: 44px;
                font-weight: 500;
                line-height: 60px;
                margin-bottom: 24px;
            }

            p {
                color: #433337;
                font-size: 16px;
                line-height: 24px;
            }
        }

        .contact-information {
            display: flex;
            gap: 24px;
            margin-bottom: 40px;

            @media (max-width: 1199px) {
                flex-direction: column;
                align-items: center;
            }

            h3 {
                font-weight: 500;
            }

            .contact-info-items {
                display: flex;
                gap: 60px;
                align-items: center;

                @media (max-width: 767px) {
                    gap: 30px;
                    align-items: center;
                    flex-wrap: wrap;
                    justify-content: center;
                }

                .info-item {
                    display: flex;
                    gap: 12px;

                    a {
                        color: #433337;
                        font-size: 14px;
                        font-weight: 400;
                    }
                }
            }
        }

        .contact-map {
            iframe {
                width: 100%;
                height: 100vh;
                max-height: 567px;
                min-height: 567px;
                border: 1px solid #cdd7e4;
                border-radius: 24px;
                box-shadow: 0 8px 8px rgba(0, 0, 0, 0.04);
            }
        }
    }
}

/* Contact Map - end */

/* Contact FAQ */
section.contactFAQ {
    padding-top: 0;
    padding-bottom: 0;

    @media (min-width: 1921px) {
        margin-bottom: 50px;
    }

    .contact-faq-contents {
        h2 {
            font-size: 44px;
            text-align: center;
            color: #433337;
            margin-bottom: 60px;
        }

        .faq-items {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;

            @media (max-width: 1199px) {
                display: flex;
                flex-direction: column;
            }

            .faq-item {
                display: flex;
                flex-direction: column;
                border: 1px solid #dbdbdb;
                border-radius: 24px;
                padding: 24px;
                /* height: -webkit-fill-available; */
                height: 100%;
                max-height: 100%;
                margin: auto;
                overflow: hidden;
                cursor: pointer;

                @media (max-width: 1199px) {
                    margin: 0;
                }

                &.closed {
                    height: auto;

                    .question-title {
                        .toggle-btn {
                            svg {
                                transform: rotate(-180deg);
                            }
                        }
                    }

                    .answer-block {
                        height: 0;
                        padding-top: 0;
                    }
                }

                .question-title {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding-bottom: 24px;
                    border-bottom: 1px solid #433337;

                    .toggle-btn {
                        svg {
                            transition: 0.3s ease;
                        }
                    }

                    h3 {
                        color: #433337;
                        font-weight: 500;
                        line-height: 32px;
                    }
                }

                .answer-block {
                    padding-top: 24px;
                    transition: 0.3s ease;
                    overflow: hidden;

                    p {
                        color: #433337;
                        font-size: 16px;
                        line-height: 24px;
                    }
                }
            }
        }
    }
}

/* Contact FAQ - end */

/* Categopry Tabs - Within Banner */
section.categoryTabs {
    &.within-banner {
        position: absolute;
        bottom: 0;
        z-index: 9999;

        .category-tabs-contents {
            background: #fff;

            span {
                color: #433337;
            }
        }
    }
}

/* Categopry Tabs - Within Banner - end */

/* Individual Page Custom */

/* Fragrances */
.page-id-152 {
    section.bigWindowVerOne {
        .big-window-ver-one-contents {
            .header-text {
                h2 {
                    @media (max-width: 400px) {
                        font-size: 7.5vw !important;
                        white-space: nowrap;
                    }
                }
            }
        }
    }

    section.standardBanner {
        @media (min-width: 1921px) {
            background-image: url(https://crtaroma.com/wp-content/themes/crtaroma/new-img/banner-frag-bg-subtract-full-5.jpg) !important;
            background-repeat: no-repeat;
            /* max-width: 100% !important; */
        }

        @media (max-width: 1199px) {
            /* background-image: url(https://crtaroma.com/wp-content/themes/crtaroma/new-img/banner-frag-bg-full.jpg) !important; */
            /* max-width: 100% !important; */
            background-position: 85% 100% !important;
        }

        .standard-banner-contents {
            .banner-sub-contents {
                .header-text {
                    h1 {
                        @media (max-width: 1199px) {
                            position: relative;
                            margin: 0 auto;
                        }
                    }

                    p {
                        @media (min-width: 1200px) {
                            max-width: 608px;
                        }
                    }
                }
            }
        }
    }

    section.catWithinBanner {
        .cat-within-banner-contents {
            .category-tabs-contents {
                @media (min-width: 1921px) {
                    position: relative;
                    top: 100px;
                }
                .category-nav-tabs {
                    @media (max-width: 991px) {
                        width: 95%;
                    }
                }
            }
        }
    }

    section.categoryTabs {
        &.instance-1 {
            .category-tabs-contents {
                padding-left: 0;
                left: 45px;
                position: absolute;
            }
        }
    }

    section.smallPetal {
        .small-petal-contents {
            .left-contents {
                h2 {
                    @media (min-width: 1200px) {
                        font-size: 44px;
                        white-space: nowrap;
                    }

                    @media (min-width: 396px) {
                        /* font-size: 28px; */
                        /* font-size: 24px; */
                    }

                    @media (max-width: 395px) {
                        font-size: 7.5vw !important;
                        white-space: nowrap;
                    }

                    /* @media (max-width: 360px) {
                        font-size: 7.4vw !important;
                    }

                    @media (max-width: 325px) {
                        font-size: 7.3vw !important;
                    }

                    @media (max-width: 297px) {
                        font-size: 6.9vw !important;
                    } */
                }

                .description {
                    p {
                        @media (min-width: 1200px) {
                            max-width: 614px;
                        }

                        @media (max-width: 1199px) {
                            text-align: left;
                        }
                    }

                    .image-within {
                        overflow: hidden;
                        border-top-left-radius: 500px;
                        border-bottom-right-radius: 240px;

                        img {
                            border-radius: 0;
                        }
                    }
                }
            }
        }
    }

    /* section.catWithinBanner {
        .cat-within-banner-contents {
            @media (min-width: 1921px) {
                position: relative;
            }

            .category-tabs-contents {
                @media (min-width: 1921px) {
                    position: relative;
                    transform: unset;
                    justify-content: center;
                    left: 0 !important;
                    width: 100% !important;
                }
            }
        }
    } */

    section.runnerImage {
        img {
            max-height: 374px;

            @media (min-width: 2000px) {
                max-height: fit-content;
            }

            &::after {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(
                    to top,
                    #fff 35%,
                    rgba(255, 255, 255, 0)
                );
                pointer-events: none;
            }
        }
    }

    section.standardBanner {
        background-size: cover !important;
        position: relative;
        margin-bottom: 0;
        /* clip-path: polygon(0.63% 2.71%, 0.63% 3.03%, 0.57% 3.03%, 0.57% 86.47%, 0.63% 86.47%, 0.63% 86.80%, 0.68% 86.80%, 0.68% 87.01%, 0.73% 87.01%, 0.78% 87.45%, 0.83% 87.45%, 0.83% 87.55%, 0.89% 87.55%, 0.89% 87.66%, 0.94% 87.66%, 0.94% 87.77%, 0.99% 87.77%, 1.04% 87.99%, 1.15% 87.99%, 1.15% 88.10%, 1.20% 88.10%, 1.20% 88.20%, 1.30% 88.20%, 1.30% 88.31%, 1.46% 88.31%, 1.46% 88.42%, 4.43% 88.42%, 4.43% 88.31%, 4.53% 88.31%, 4.53% 88.42%, 13.44% 88.42%, 13.44% 88.31%, 13.54% 88.31%, 13.54% 88.42%, 17.50% 88.42%, 17.50% 88.31%, 17.60% 88.31%, 17.60% 88.42%, 23.23% 88.42%, 23.23% 88.31%, 23.39% 88.31%, 23.39% 88.42%, 30.36% 88.42%, 30.36% 88.31%, 30.47% 88.31%, 30.47% 88.42%, 35.36% 88.42%, 35.36% 88.31%, 35.52% 88.31%, 35.52% 88.42%, 40.31% 88.42%, 40.31% 88.31%, 40.42% 88.31%, 40.42% 88.42%, 56.51% 88.42%, 56.51% 88.31%, 56.67% 88.31%, 56.67% 88.42%, 57.40% 88.42%, 57.40% 88.53%, 57.66% 88.53%, 57.66% 88.64%, 57.81% 88.64%, 57.81% 88.74%, 57.92% 88.74%, 57.97% 88.96%, 58.07% 88.96%, 58.07% 89.07%, 58.13% 89.07%, 58.13% 89.18%, 58.18% 89.18%, 58.18% 89.29%, 58.28% 89.39%, 58.28% 89.61%, 58.33% 89.61%, 58.33% 89.72%, 58.39% 89.72%, 58.39% 89.94%, 58.44% 89.94%, 58.44% 90.26%, 58.49% 90.26%, 58.49% 90.80%, 58.54% 90.80%, 58.54% 94.81%, 58.59% 94.81%, 58.59% 95.13%, 58.65% 95.13%, 58.65% 95.35%, 58.70% 95.35%, 58.75% 95.78%, 58.80% 95.78%, 58.80% 95.89%, 58.85% 95.89%, 58.85% 96.00%, 58.91% 96.00%, 58.91% 96.10%, 58.96% 96.10%, 59.01% 96.32%, 59.11% 96.32%, 59.17% 96.54%, 59.27% 96.54%, 59.27% 96.65%, 59.43% 96.65%, 59.43% 96.75%, 62.24% 96.75%, 62.24% 96.65%, 62.34% 96.65%, 62.34% 96.75%, 65.52% 96.75%, 65.52% 96.65%, 65.63% 96.65%, 65.63% 96.75%, 98.44% 96.75%, 98.44% 96.65%, 98.59% 96.65%, 98.59% 96.54%, 98.70% 96.54%, 98.70% 96.43%, 98.91% 96.32%, 98.91% 96.21%, 98.96% 96.21%, 98.96% 96.10%, 99.01% 96.10%, 99.01% 96.00%, 99.06% 96.00%, 99.06% 95.89%, 99.17% 95.78%, 99.17% 95.56%, 99.22% 95.56%, 99.22% 95.45%, 99.27% 95.45%, 99.27% 95.24%, 99.32% 95.24%, 99.32% 94.91%, 99.38% 94.91%, 99.38% 59.20%, 99.32% 59.20%, 99.32% 58.98%, 99.38% 58.98%, 99.38% 38.53%, 99.32% 38.53%, 99.32% 38.31%, 99.38% 38.31%, 99.38% 33.33%, 99.32% 33.33%, 99.32% 33.12%, 99.38% 33.12%, 99.38% 3.14%, 99.32% 3.14%, 99.32% 2.81%, 99.27% 2.81%, 99.27% 2.60%, 99.22% 2.60%, 99.17% 2.16%, 99.11% 2.16%, 99.11% 2.06%, 99.06% 2.06%, 99.06% 1.95%, 99.01% 1.95%, 99.01% 1.84%, 98.91% 1.73%, 98.91% 1.62%, 98.80% 1.62%, 98.80% 1.52%, 98.75% 1.52%, 98.75% 1.41%, 98.65% 1.41%, 98.65% 1.30%, 98.49% 1.30%, 98.49% 1.19%, 72.60% 1.19%, 72.60% 1.30%, 72.45% 1.30%, 72.45% 1.19%, 64.90% 1.19%, 64.90% 1.30%, 64.79% 1.30%, 64.79% 1.19%, 3.59% 1.19%, 3.59% 1.30%, 3.49% 1.30%, 3.49% 1.19%, 1.51% 1.19%, 1.51% 1.30%, 1.35% 1.30%, 1.35% 1.41%, 1.25% 1.41%, 1.25% 1.52%, 1.04% 1.62%, 1.04% 1.73%, 0.99% 1.73%, 0.99% 1.84%, 0.94% 1.84%, 0.94% 1.95%, 0.89% 1.95%, 0.83% 2.16%, 0.78% 2.16%, 0.78% 2.38%, 0.73% 2.38%, 0.73% 2.49%, 0.68% 2.49%, 0.68% 2.71%, 0.63% 2.71%); */

        @media (min-width: 1921px) {
            max-width: 1884px;
        }

        @media (max-width: 1199px) {
            clip-path: unset;
        }

        @media (min-width: 1200px) {
            background-position: 0% 100% !important;
            box-shadow: unset;
        }

        @media (min-width: 1921px) {
            /* background-size: 100% 119% !important;
            background-position: 100% 12% !important; */
            background-size: 100% 130% !important;
            background-position: 100% 60% !important;
        }

        @media (min-width: 1922px) {
            background-size: cover !important;
            background-position: center !important;
            max-width: 100%;
        }

        @media (max-width: 1199px) {
            clip-path: unset;
            background-image: url(https://crtaroma.com/wp-content/themes/crtaroma/new-img/banner-frag-bg-subtract-full.JPG) !important;
        }

        @media (max-width: 575px) {
            background-image: url(https://crtaroma.com/wp-content/themes/crtaroma/new-img/frag-mobile-bg.jpg) !important;
            /* max-width: 100% !important; */
            background-position: 100% 100% !important;
        }

        .standard-banner-contents {
            .banner-sub-contents {
                max-width: 685px;

                .header-text {
                    h1 {
                        max-width: 610px;
                    }
                }
            }
        }

        .banner-overlay {
            -webkit-mask-image: linear-gradient(
                to top,
                #000 80%,
                transparent 87%
            );
            mask-image: linear-gradient(to bottom, #000 80%, transparent 87%);

            @media (min-width: 1200px) {
                left: 8px;
            }

            @media (min-width: 1921px) {
                left: 0;
            }

            @media (max-width: 1199px) {
                -webkit-mask-image: unset;
                mask-image: unset;
                /* background: unset !important; */
            }
        }
    }

    section.categoryTabs {
        &.instance-1 {
            position: fixed;
            z-index: 3;
            top: 90px;
            left: 0;
            width: 90%;

            .category-tabs-contents {
                background: rgba(0, 0, 0, 0);

                span {
                    color: #433337;
                }

                .button-container {
                    .nav-btn {
                        padding: 4px;
                    }
                }
            }
        }
    }

    section.runnerImage {
        &.instance-1 {
            position: relative;
            overflow: hidden;

            &::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 50%;
                pointer-events: none;
                background: linear-gradient(
                    to bottom,
                    rgba(255, 255, 255, 1) 0%,
                    rgba(255, 255, 255, 0) 15%
                );
                z-index: 1;
            }

            &::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 50%;
                pointer-events: none;
                background: linear-gradient(
                    to top,
                    rgba(255, 255, 255, 1) 0%,
                    rgba(255, 255, 255, 0) 15%
                );
                z-index: 1;
            }
        }
    }
}

/* Fragrances - end */

/* Flavours */
.page-id-258 {
    section.bigWindowVerOne {
        .big-window-ver-one-contents {
            .header-text {
                h2 {
                    @media (max-width: 400px) {
                        font-size: 7.5vw !important;
                        white-space: nowrap;
                    }
                }
            }
        }
    }

    section.standardBanner {
        @media (min-width: 1921px) {
            background-image: url(https://crtaroma.com/wp-content/uploads/2025/10/flavours-banner-2-full.png) !important;
            max-width: 100% !important;
        }

        & .standard-banner-contents {
            & .banner-sub-contents {
                & .header-text {
                    h1 {
                        @media (max-width: 1199px) {
                            font-size: 50px;
                        }

                        @media (max-width: 767px) {
                            font-size: 40px;
                        }
                    }

                    p {
                        @media (min-width: 1200px) {
                            max-width: 706px;
                        }
                    }
                }
            }
        }
    }

    section.categoryTabs {
        &.instance-1 {
            .category-tabs-contents {
                padding-left: 0;
                left: 80px;
                position: absolute;

                @media (min-width: 1921px) {
                    left: 0;
                    translate: X(80%);
                    transform: translateX(50%);
                }
            }
        }
    }

    section.catWithinBanner {
        .cat-within-banner-contents {
            @media (min-width: 1921px) {
                position: relative;
                top: 100px;
            }

            .category-tabs-contents {
                @media (min-width: 1921px) {
                    position: relative;
                    transform: unset;
                    /* justify-content: center; */
                }

                .category-nav-tabs {
                    @media (max-width: 991px) {
                        width: 95%;
                    }
                }
            }
        }
    }

    /* section.bigWindowVerOne {
        & .big-window-ver-one-contents {
            & .inner-contents {
                & .left-contents {
                    .control-grid {
                        display: grid;
                        grid-template-columns: repeat(4, 1fr);
                        grid-template-rows: repeat(3, 1fr);
                        grid-column-gap: 40px;
                        grid-row-gap: 40px;
                        max-height: max-content;

                        @media (min-width: 1200px) {
                            max-height: 1112px;
                        }

                        @media (max-width: 767px) {
                            display: flex;
                        }

                        .grid-item {
                            &#naturalsAndExtractsCard {
                                width: 100%;
                                max-width: 100%;
                            }
                        }
                    }
                }

                .right-contents {
                    max-height: 1112px;

                }
            }
        }
    } */

    section.standardBanner {
        background-size: cover !important;
        position: relative;
        margin-bottom: 0;
        /* clip-path: polygon(0.63% 2.71%, 0.63% 3.03%, 0.57% 3.03%, 0.57% 86.47%, 0.63% 86.47%, 0.63% 86.80%, 0.68% 86.80%, 0.68% 87.01%, 0.73% 87.01%, 0.78% 87.45%, 0.83% 87.45%, 0.83% 87.55%, 0.89% 87.55%, 0.89% 87.66%, 0.94% 87.66%, 0.94% 87.77%, 0.99% 87.77%, 1.04% 87.99%, 1.15% 87.99%, 1.15% 88.10%, 1.20% 88.10%, 1.20% 88.20%, 1.30% 88.20%, 1.30% 88.31%, 1.46% 88.31%, 1.46% 88.42%, 4.43% 88.42%, 4.43% 88.31%, 4.53% 88.31%, 4.53% 88.42%, 13.44% 88.42%, 13.44% 88.31%, 13.54% 88.31%, 13.54% 88.42%, 17.50% 88.42%, 17.50% 88.31%, 17.60% 88.31%, 17.60% 88.42%, 23.23% 88.42%, 23.23% 88.31%, 23.39% 88.31%, 23.39% 88.42%, 30.36% 88.42%, 30.36% 88.31%, 30.47% 88.31%, 30.47% 88.42%, 35.36% 88.42%, 35.36% 88.31%, 35.52% 88.31%, 35.52% 88.42%, 40.31% 88.42%, 40.31% 88.31%, 40.42% 88.31%, 40.42% 88.42%, 56.51% 88.42%, 56.51% 88.31%, 56.67% 88.31%, 56.67% 88.42%, 57.40% 88.42%, 57.40% 88.53%, 57.66% 88.53%, 57.66% 88.64%, 57.81% 88.64%, 57.81% 88.74%, 57.92% 88.74%, 57.97% 88.96%, 58.07% 88.96%, 58.07% 89.07%, 58.13% 89.07%, 58.13% 89.18%, 58.18% 89.18%, 58.18% 89.29%, 58.28% 89.39%, 58.28% 89.61%, 58.33% 89.61%, 58.33% 89.72%, 58.39% 89.72%, 58.39% 89.94%, 58.44% 89.94%, 58.44% 90.26%, 58.49% 90.26%, 58.49% 90.80%, 58.54% 90.80%, 58.54% 94.81%, 58.59% 94.81%, 58.59% 95.13%, 58.65% 95.13%, 58.65% 95.35%, 58.70% 95.35%, 58.75% 95.78%, 58.80% 95.78%, 58.80% 95.89%, 58.85% 95.89%, 58.85% 96.00%, 58.91% 96.00%, 58.91% 96.10%, 58.96% 96.10%, 59.01% 96.32%, 59.11% 96.32%, 59.17% 96.54%, 59.27% 96.54%, 59.27% 96.65%, 59.43% 96.65%, 59.43% 96.75%, 62.24% 96.75%, 62.24% 96.65%, 62.34% 96.65%, 62.34% 96.75%, 65.52% 96.75%, 65.52% 96.65%, 65.63% 96.65%, 65.63% 96.75%, 98.44% 96.75%, 98.44% 96.65%, 98.59% 96.65%, 98.59% 96.54%, 98.70% 96.54%, 98.70% 96.43%, 98.91% 96.32%, 98.91% 96.21%, 98.96% 96.21%, 98.96% 96.10%, 99.01% 96.10%, 99.01% 96.00%, 99.06% 96.00%, 99.06% 95.89%, 99.17% 95.78%, 99.17% 95.56%, 99.22% 95.56%, 99.22% 95.45%, 99.27% 95.45%, 99.27% 95.24%, 99.32% 95.24%, 99.32% 94.91%, 99.38% 94.91%, 99.38% 59.20%, 99.32% 59.20%, 99.32% 58.98%, 99.38% 58.98%, 99.38% 38.53%, 99.32% 38.53%, 99.32% 38.31%, 99.38% 38.31%, 99.38% 33.33%, 99.32% 33.33%, 99.32% 33.12%, 99.38% 33.12%, 99.38% 3.14%, 99.32% 3.14%, 99.32% 2.81%, 99.27% 2.81%, 99.27% 2.60%, 99.22% 2.60%, 99.17% 2.16%, 99.11% 2.16%, 99.11% 2.06%, 99.06% 2.06%, 99.06% 1.95%, 99.01% 1.95%, 99.01% 1.84%, 98.91% 1.73%, 98.91% 1.62%, 98.80% 1.62%, 98.80% 1.52%, 98.75% 1.52%, 98.75% 1.41%, 98.65% 1.41%, 98.65% 1.30%, 98.49% 1.30%, 98.49% 1.19%, 72.60% 1.19%, 72.60% 1.30%, 72.45% 1.30%, 72.45% 1.19%, 64.90% 1.19%, 64.90% 1.30%, 64.79% 1.30%, 64.79% 1.19%, 3.59% 1.19%, 3.59% 1.30%, 3.49% 1.30%, 3.49% 1.19%, 1.51% 1.19%, 1.51% 1.30%, 1.35% 1.30%, 1.35% 1.41%, 1.25% 1.41%, 1.25% 1.52%, 1.04% 1.62%, 1.04% 1.73%, 0.99% 1.73%, 0.99% 1.84%, 0.94% 1.84%, 0.94% 1.95%, 0.89% 1.95%, 0.83% 2.16%, 0.78% 2.16%, 0.78% 2.38%, 0.73% 2.38%, 0.73% 2.49%, 0.68% 2.49%, 0.68% 2.71%, 0.63% 2.71%); */

        @media (min-width: 1921px) {
            max-width: 1884px;
        }

        @media (min-width: 1200px) {
            background-position: 0% 100% !important;
            box-shadow: unset;
        }

        @media (max-width: 1199px) {
            clip-path: unset;
            background-image: url(https://crtaroma.com/wp-content/uploads/2025/11/flavours-banner-3-full.jpg) !important;
        }

        @media (max-width: 575px) {
            background-image: url(https://crtaroma.com/wp-content/themes/crtaroma/new-img/flav-mobile-bg.jpg) !important;
            /* max-width: 100% !important; */
            background-position: 10% 100% !important;
        }

        .banner-overlay {
            -webkit-mask-image: linear-gradient(
                to top,
                #000 80%,
                transparent 87%
            );
            mask-image: linear-gradient(to bottom, #000 80%, transparent 87%);

            @media (min-width: 1200px) {
                left: 8px;
            }

            @media (max-width: 1199px) {
                -webkit-mask-image: unset;
                mask-image: unset;
                /* background: unset !important; */
            }
        }

        .standard-banner-contents {
            .banner-sub-contents {
                max-width: 775px;

                .header-text {
                    @media (max-width: 1199px) {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                    }

                    h1 {
                        max-width: 565px;
                    }
                }
            }
        }
    }

    section.smallPetal {
        padding-top: 100px !important;

        @media (max-width: 1199px) {
            padding-top: 70px !important;
        }

        @media (max-width: 767px) {
            padding: 50px 20px;
            padding-top: 50px !important;
        }

        .small-petal-contents {
            .left-contents {
                h2 {
                    @media (max-width: 366px) {
                        font-size: 7.5vw !important;
                        white-space: nowrap;
                    }
                }

                .description {
                    p {
                        @media (min-width: 1200px) {
                            max-width: 620px;
                        }

                        @media (max-width: 1199px) {
                            text-align: left;
                        }
                    }

                    .image-within {
                        overflow: hidden;
                        border-top-left-radius: 500px;
                        border-bottom-right-radius: 240px;

                        img {
                            border-radius: 0;
                        }
                    }
                }
            }
        }
    }

    section.categoryTabs {
        &.instance-1 {
            position: fixed;
            z-index: 3;
            top: 90px;
            left: 0;
            width: 90%;

            .category-tabs-contents {
                background: rgba(0, 0, 0, 0);

                span {
                    color: #433337;
                }

                .button-container {
                    .nav-btn {
                        padding: 4px;
                    }
                }
            }
        }

        .category-tabs-contents {
            .category-nav-tabs {
                .button-container {
                    .nav-btn {
                        span {
                            &.button-text {
                                justify-content: flex-start;
                                margin-left: 12px;
                            }
                        }
                    }

                    &#sweetTab {
                        .nav-btn {
                            min-width: 97px;
                        }
                    }

                    &#savouryTab {
                        .nav-btn {
                            min-width: 112px;
                        }
                    }

                    &#beveragesTab {
                        .nav-btn {
                            min-width: 127px;
                        }
                    }

                    &#healthAndWellnessTab {
                        .nav-btn {
                            min-width: 190px;
                        }
                    }

                    &#naturalsAndEffectsTab {
                        .nav-btn {
                            min-width: 187px;
                        }
                    }
                }
            }
        }
    }

    section.runnerImage {
        &.instance-1 {
            position: relative;
            overflow: hidden;

            img {
                @media (min-width: 2000px) {
                    max-height: fit-content;
                }

                &::after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 50%;
                    pointer-events: none;
                    background: linear-gradient(
                        to top,
                        rgba(255, 255, 255, 1) 0%,
                        rgba(255, 255, 255, 0) 15%
                    );
                }
            }
        }
    }

    #sweetCard {
        grid-area: 1 / 1 / 2 / 3 !important;
    }

    #savouryCard {
        grid-area: 1 / 3 / 2 / 5 !important;
    }

    #beveragesCard {
        grid-area: 2 / 1 / 3 / 3 !important;
    }

    #healthAndWellnessCard {
        grid-area: 2 / 3 / 3 / 5 !important;
    }

    #naturalsAndExtractsCard {
        grid-area: 3 / 1 / 4 / 5 !important;
        max-width: fit-content;
    }
}

/* Flavours - end */

/* About Us */
.page-id-80 {
    section.standardBanner {
        background-image: url(https://crtaroma.com/wp-content/themes/crtaroma/new-img/Our-Company-Banner-2.jpg) !important;
        background-size: cover !important;
        background-position: 100% 69% !important;

        /* @media (max-width: 767px) {
            background-image:url(https://crtaroma.com/wp-content/themes/crtaroma/new-img/about-us-bg-comp.jpg)!important;
        } */

        @media (max-width: 575px) {
            background-image: url(https://crtaroma.com/wp-content/themes/crtaroma/new-img/about-mobile-bg.jpg) !important;
            /* max-width: 100% !important; */
            background-position: 20% 100% !important;
        }

        /* @media (max-width: 575px) {
            background-position: 45% 69% !important;
        } */

        .standard-banner-contents {
            .banner-sub-contents {
                .header-text {
                    h1 {
                        @media (max-width: 1199px) {
                            font-size: 50px;
                        }

                        @media (max-width: 767px) {
                            font-size: 40px;
                        }
                    }

                    p {
                        @media (min-width: 1200px) {
                            max-width: 540px;
                        }
                    }
                }
            }
        }
    }

    section.infoBlock {
        @media (max-width: 767px) {
            padding: 50px 20px;
        }
        .info-block-contents {
            .left-contents {
                .header-text {
                    p {
                        @media (min-width: 1200px) {
                            max-width: 591px;
                        }

                        @media (max-width: 1199px) {
                            text-align: left;
                        }
                    }
                }
            }
        }
    }

    section.bigPetal {
        @media (min-width: 1921px) {
            margin-bottom: 50px;
        }

        p {
            text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        }

        /* @media (min-width: 1921px) {
            margin-bottom: 50px;
        } */
    }
}

/* About Us - end */

/* Individual Page Custom - end */

/* Hard Override */
img.alignnone.size-full.wp-image-115 {
    width: 91px;
    height: 92px;
}

img.alignnone.size-medium.wp-image-116 {
    width: 95px;
    height: 92px;
}

/* Hard Override - end */

/* Contact Us */
.page-id-224 .wpcf7 form .wpcf7-response-output {
    margin: 0 !important;
}

.page-id-224 {
    section.standardBanner {
        box-shadow: none;

        @media (min-width: 1921px) {
            background-size: 105% !important;
            border-radius: 24px !important;
            margin-bottom: 0 !important;
        }

        max-height: fit-content;
        min-height: fit-content;

        @media (max-width: 1199px) {
            background-image: url(https://crtaroma.com/wp-content/themes/crtaroma/new-img/contact-mobile-bg-7.jpg) !important;
            background-position: 100% 100% !important;
        }

        @media (max-width: 991px) {
            background-position: 85% 100% !important;
        }

        @media (max-width: 575px) {
            background-image: url(https://crtaroma.com/wp-content/themes/crtaroma/new-img/contact-mobile-bg-9.jpg) !important;
            /* max-width: 100% !important; */
            /* background-position: 40% 100% !important; */
        }

        .banner-overlay {
            /* display: none; */

            @media (max-width: 1199px) {
                background: linear-gradient(
                    to right,
                    rgba(0, 0, 0, 0.6) 0%,
                    rgba(0, 0, 0, 0.3) 100%,
                    rgba(0, 0, 0, 0) 100%
                ) !important;
            }
        }

        .standard-banner-contents {
            flex-direction: row !important;
            justify-content: space-between;

            @media (max-width: 1199px) {
                flex-direction: column !important;
            }

            .banner-sub-contents {
                justify-content: center;
                /* max-width: 796px; */
                max-width: 669px !important;

                .header-text {
                    h1 {
                        width: 100%;
                        max-width: 550px;

                        @media (max-width: 1199px) {
                            font-size: 50px;
                            max-width: 458px;
                            margin: auto;
                            margin-bottom: 24px;
                        }

                        @media (max-width: 767px) {
                            font-size: 40px;
                            line-height: 50px;
                            max-width: 367px;
                        }

                        @media (max-width: 480px) {
                            max-width: 367px;
                        }
                    }
                }
            }

            .banner-contact-form {
                display: flex;
                flex-direction: column;
                width: 100%;
                max-width: 735px;
                padding: 40px;
                background: #fff;
                border-radius: 24px;
                border: 1px solid #cdd7e4;
                box-shadow: 0 8px 8px rgba(0, 0, 0, 0.04);

                input[type="submit"] {
                    background: #ff365e;
                    color: #fff;
                    border: none !important;
                    font-weight: 700;
                    transition: 0.3s ease;
                }

                input[type="submit"]:hover {
                    background: #043576;
                }

                h3 {
                    color: #433337;
                    font-weight: 700;
                    line-height: 32px;
                    margin-bottom: 40px;
                }

                form {
                    .info {
                        .inputs {
                            span {
                                input {
                                    margin-bottom: 24px;
                                    padding: 10px;
                                }
                            }
                        }

                        input {
                            width: 100%;
                            padding: 10px;
                            border: 1px solid #cdd7e4;
                            border-radius: 8px;

                            &::placeholder {
                                color: #979797;
                            }

                            &.fname {
                                @media (max-width: 1199px) {
                                    margin-bottom: 24px !important;
                                }
                            }
                        }

                        textarea {
                            width: 100%;
                            margin-bottom: 24px;
                            padding: 10px;
                            height: 100%;
                            max-height: 143px;
                            border: 1px solid #cdd7e4;
                            border-radius: 8px;
                            resize: none;

                            &::placeholder {
                                color: #979797;
                            }
                        }
                    }
                }
            }
        }
    }

    section.floatingCTA {
        display: none;
    }

    section.contactMap {
        @media (max-width: 767px) {
            padding: 50px 20px;
        }
    }

    section.contactFAQ {
        @media (max-width: 767px) {
            padding: 50px 20px;
            padding-top: 0;
        }
    }

    section.categoryTabs {
        .category-tabs-contents {
            .category-nav-tabs {
                .button-container {
                    .nav-btn {
                        span {
                            &.button-text {
                                justify-content: flex-start;
                                margin-left: 12px;
                            }
                        }
                    }

                    &#foodCoatingTab {
                        .nav-btn {
                            min-width: 97px;
                        }
                    }

                    &#foodAndBeverageIngredientsTab {
                        .nav-btn {
                            min-width: 112px;
                        }
                    }

                    &#soakingAgentsTab {
                        .nav-btn {
                            min-width: 127px;
                        }
                    }

                    &#aromaChemicalsTab {
                        .nav-btn {
                            min-width: 190px;
                        }
                    }

                    &#detergentBaseTab {
                        .nav-btn {
                            min-width: 187px;
                        }
                    }
                }
            }
        }
    }
}

/* Contact Us - end */

/* Ingredients */
.page-id-582 {
    section.runnerImage {
        &.instance-1 {
            position: relative;
            overflow: hidden;
            z-index: -1;

            img {
                max-height: fit-content !important;

                @media all and (max-width: 575px) {
                    max-height: unset !important;
                    height: unset !important;
                }
            }
        }

        @media all and (max-width: 575px) {
            clear: both !important;
        }
    }

    section.catWithinBanner {
        .cat-within-banner-contents {
            .category-tabs-contents {
                .category-nav-tabs {
                    .button-container {
                        .nav-btn {
                            span {
                                &.button-text {
                                    font-size: 10px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    section.standardBanner {
        @media (min-width: 1921px) {
            /* background-image: url(https://crtaroma.com/wp-content/uploads/2025/10/flavours-banner-2-full.png) !important; */
            background-image: url(https://crtaroma.com/wp-content/themes/crtaroma/new-img/ingredients_banner_full.jpg) !important;
            max-width: 100% !important;
        }

        /* max-width: 99.12vw; */

        .banner-overlay {
            @media (max-width: 1920px) AND (min-width: 1200px) {
                display: none;
            }

            left: 0 !important;
            mask-image: linear-gradient(
                to bottom,
                #000 80%,
                transparent 135%
            ) !important;
        }

        .standard-banner-contents {
            .banner-sub-contents {
                .header-text {
                    h1 {
                        @media (max-width: 1199px) {
                            font-size: 50px;
                        }

                        @media (max-width: 767px) {
                            font-size: 40px;
                        }
                    }

                    p {
                        @media (min-width: 1200px) {
                            max-width: 706px;
                        }
                    }
                }
            }
        }
    }

    section.bigWindowVerOne {
        .big-window-ver-one-contents {
            .inner-contents {
                .left-contents {
                    .control-grid {
                        height: 100%;
                        max-height: -webkit-fill-available;

                        @media all and (max-width: 575px) {
                            height: unset;
                            max-height: unset;
                        }
                        .grid-item {
                            .upper-contents {
                                margin-bottom: 0;

                                .item-desc {
                                    p {
                                        &:first-of-type {
                                            margin-bottom: 24px;

                                            @media (min-width: 1200px) {
                                                margin-bottom: 0;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                .right-contents {
                    /* max-height: 845px; */
                    max-height: 919px;

                    .big-image-container {
                        /* max-height: 845px; */
                        width: 100%;
                        max-height: 919px;
                    }
                }
            }
        }
    }

    section.categoryTabs {
        &.instance-1 {
            .category-tabs-contents {
                padding-left: 0;
                left: 80px;
                position: absolute;

                @media (min-width: 1921px) {
                    left: 0;
                    translate: X(80%);
                    transform: translateX(50%);
                }
            }
        }
    }

    section.catWithinBanner {
        .cat-within-banner-contents {
            @media (min-width: 1921px) {
                position: relative;

                top: 100px;
                /* justify-content: center; */
                justify-content: flex-start;
                display: flex;
            }

            .category-tabs-contents {
                @media (min-width: 1921px) {
                    position: relative;
                    transform: unset;
                    /* justify-content: center; */
                    justify-content: flex-start;
                }

                @media (min-width: 1200px) {
                    padding: 30px 40px;
                }

                .category-nav-tabs {
                    @media (min-width: 1056px) {
                        overflow-x: hidden;
                    }

                    @media (max-width: 991px) {
                        width: 95%;
                    }
                    /* gap: 21px; */
                    gap: 16px;

                    .button-container {
                        a {
                            &.new-cta {
                                width: 30px;
                                height: 30px;
                                padding: 8px;
                                padding-left: 7px;
                            }

                            svg {
                                width: 15px;
                                height: 14px;
                            }
                        }
                    }
                }
            }
        }
    }

    section.categoryTabs {
        /* .cat-within-banner-contents {
            @media (min-width: 1921px) {
                position: relative;

                top: 100px;
                justify-content: center;
                display: flex;
            } */

        .category-tabs-contents {
            /* @media (min-width: 1921px) {
                    position: relative;
                    transform: unset;
                    justify-content: center;
                } */

            @media (min-width: 1200px) {
                padding: 30px 40px;
            }

            .category-nav-tabs {
                @media (max-width: 991px) {
                    width: 95%;
                }
                gap: 21px;

                .button-container {
                    a {
                        &.new-cta {
                            width: 30px;
                            height: 30px;
                            padding: 8px;
                            padding-left: 7px;
                        }

                        svg {
                            width: 14px;
                            height: 14px;
                            left: 8px;
                        }
                    }

                    span {
                        &.button-text {
                            justify-content: center;
                            /* margin-left: 0; */
                            left: 0 !important;
                        }
                    }
                }
            }
        }
        /* } */
    }

    section.standardBanner {
        background-size: cover !important;
        position: relative;
        margin-bottom: 0;
        /* clip-path: polygon(0.63% 2.71%, 0.63% 3.03%, 0.57% 3.03%, 0.57% 86.47%, 0.63% 86.47%, 0.63% 86.80%, 0.68% 86.80%, 0.68% 87.01%, 0.73% 87.01%, 0.78% 87.45%, 0.83% 87.45%, 0.83% 87.55%, 0.89% 87.55%, 0.89% 87.66%, 0.94% 87.66%, 0.94% 87.77%, 0.99% 87.77%, 1.04% 87.99%, 1.15% 87.99%, 1.15% 88.10%, 1.20% 88.10%, 1.20% 88.20%, 1.30% 88.20%, 1.30% 88.31%, 1.46% 88.31%, 1.46% 88.42%, 4.43% 88.42%, 4.43% 88.31%, 4.53% 88.31%, 4.53% 88.42%, 13.44% 88.42%, 13.44% 88.31%, 13.54% 88.31%, 13.54% 88.42%, 17.50% 88.42%, 17.50% 88.31%, 17.60% 88.31%, 17.60% 88.42%, 23.23% 88.42%, 23.23% 88.31%, 23.39% 88.31%, 23.39% 88.42%, 30.36% 88.42%, 30.36% 88.31%, 30.47% 88.31%, 30.47% 88.42%, 35.36% 88.42%, 35.36% 88.31%, 35.52% 88.31%, 35.52% 88.42%, 40.31% 88.42%, 40.31% 88.31%, 40.42% 88.31%, 40.42% 88.42%, 56.51% 88.42%, 56.51% 88.31%, 56.67% 88.31%, 56.67% 88.42%, 57.40% 88.42%, 57.40% 88.53%, 57.66% 88.53%, 57.66% 88.64%, 57.81% 88.64%, 57.81% 88.74%, 57.92% 88.74%, 57.97% 88.96%, 58.07% 88.96%, 58.07% 89.07%, 58.13% 89.07%, 58.13% 89.18%, 58.18% 89.18%, 58.18% 89.29%, 58.28% 89.39%, 58.28% 89.61%, 58.33% 89.61%, 58.33% 89.72%, 58.39% 89.72%, 58.39% 89.94%, 58.44% 89.94%, 58.44% 90.26%, 58.49% 90.26%, 58.49% 90.80%, 58.54% 90.80%, 58.54% 94.81%, 58.59% 94.81%, 58.59% 95.13%, 58.65% 95.13%, 58.65% 95.35%, 58.70% 95.35%, 58.75% 95.78%, 58.80% 95.78%, 58.80% 95.89%, 58.85% 95.89%, 58.85% 96.00%, 58.91% 96.00%, 58.91% 96.10%, 58.96% 96.10%, 59.01% 96.32%, 59.11% 96.32%, 59.17% 96.54%, 59.27% 96.54%, 59.27% 96.65%, 59.43% 96.65%, 59.43% 96.75%, 62.24% 96.75%, 62.24% 96.65%, 62.34% 96.65%, 62.34% 96.75%, 65.52% 96.75%, 65.52% 96.65%, 65.63% 96.65%, 65.63% 96.75%, 98.44% 96.75%, 98.44% 96.65%, 98.59% 96.65%, 98.59% 96.54%, 98.70% 96.54%, 98.70% 96.43%, 98.91% 96.32%, 98.91% 96.21%, 98.96% 96.21%, 98.96% 96.10%, 99.01% 96.10%, 99.01% 96.00%, 99.06% 96.00%, 99.06% 95.89%, 99.17% 95.78%, 99.17% 95.56%, 99.22% 95.56%, 99.22% 95.45%, 99.27% 95.45%, 99.27% 95.24%, 99.32% 95.24%, 99.32% 94.91%, 99.38% 94.91%, 99.38% 59.20%, 99.32% 59.20%, 99.32% 58.98%, 99.38% 58.98%, 99.38% 38.53%, 99.32% 38.53%, 99.32% 38.31%, 99.38% 38.31%, 99.38% 33.33%, 99.32% 33.33%, 99.32% 33.12%, 99.38% 33.12%, 99.38% 3.14%, 99.32% 3.14%, 99.32% 2.81%, 99.27% 2.81%, 99.27% 2.60%, 99.22% 2.60%, 99.17% 2.16%, 99.11% 2.16%, 99.11% 2.06%, 99.06% 2.06%, 99.06% 1.95%, 99.01% 1.95%, 99.01% 1.84%, 98.91% 1.73%, 98.91% 1.62%, 98.80% 1.62%, 98.80% 1.52%, 98.75% 1.52%, 98.75% 1.41%, 98.65% 1.41%, 98.65% 1.30%, 98.49% 1.30%, 98.49% 1.19%, 72.60% 1.19%, 72.60% 1.30%, 72.45% 1.30%, 72.45% 1.19%, 64.90% 1.19%, 64.90% 1.30%, 64.79% 1.30%, 64.79% 1.19%, 3.59% 1.19%, 3.59% 1.30%, 3.49% 1.30%, 3.49% 1.19%, 1.51% 1.19%, 1.51% 1.30%, 1.35% 1.30%, 1.35% 1.41%, 1.25% 1.41%, 1.25% 1.52%, 1.04% 1.62%, 1.04% 1.73%, 0.99% 1.73%, 0.99% 1.84%, 0.94% 1.84%, 0.94% 1.95%, 0.89% 1.95%, 0.83% 2.16%, 0.78% 2.16%, 0.78% 2.38%, 0.73% 2.38%, 0.73% 2.49%, 0.68% 2.49%, 0.68% 2.71%, 0.63% 2.71%); */

        @media (min-width: 1921px) {
            max-width: 1884px;
        }

        @media (min-width: 1200px) {
            background-position: 0% 100% !important;
            box-shadow: unset;
        }

        @media (max-width: 1199px) {
            clip-path: unset;
            background-image: url(https://crtaroma.com/wp-content/themes/crtaroma/new-img/ingredients_banner_full.png) !important;
        }

        @media (max-width: 575px) {
            background-image: url(https://crtaroma.com/wp-content/themes/crtaroma/new-img/ingredients_banner_full.png) !important;
            /* max-width: 100% !important; */
            background-position: 10% 100% !important;
        }

        .banner-overlay {
            -webkit-mask-image: linear-gradient(
                to top,
                #000 80%,
                transparent 87%
            );
            mask-image: linear-gradient(to bottom, #000 80%, transparent 87%);

            @media (min-width: 1200px) {
                left: 8px;
            }

            @media (max-width: 1199px) {
                -webkit-mask-image: unset;
                mask-image: unset;
                /* background: unset !important; */
            }
        }

        .standard-banner-contents {
            .banner-sub-contents {
                max-width: 775px;

                .header-text {
                    @media (max-width: 1199px) {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                    }

                    h1 {
                        max-width: 565px;

                        @media all and (max-width: 575px) {
                            font-size: 35px !important;
                            display: block;
                            -webkit-font-smoothing: antialiased;
                        }

                        @media (max-width: 767px) {
                            font-size: 40px;
                            max-width: 469px;
                        }

                        @media (max-width: 575px) {
                            max-width: 364px;
                        }
                    }
                }
            }
        }
    }

    section.smallPetal {
        padding-top: 100px !important;

        @media (max-width: 1199px) {
            padding-top: 70px !important;
        }

        @media (max-width: 767px) {
            padding-top: 50px !important;
            padding-left: 20px !important;
            padding-right: 20px !important;
        }

        .small-petal-contents {
            .left-contents {
                h2 {
                    @media (max-width: 1199px) {
                        white-space: nowrap;
                        overflow: hidden;
                    }

                    @media (max-width: 480px) {
                        font-size: 5.5vw !important;
                    }
                }

                .description {
                    p {
                        @media (min-width: 1200px) {
                            max-width: 620px;
                        }
                    }

                    .image-within {
                        overflow: hidden;
                        border-top-left-radius: 500px;
                        border-bottom-right-radius: 240px;

                        img {
                            border-radius: 0;
                        }
                    }
                }
            }
        }
    }

    section.categoryTabs {
        &.instance-1 {
            position: fixed;
            z-index: 3;
            top: 90px;
            left: 0;
            width: 90%;

            .category-tabs-contents {
                background: rgba(0, 0, 0, 0);

                span {
                    color: #433337;
                }

                .button-container {
                    .nav-btn {
                        padding: 4px;
                    }
                }
            }
        }

        .category-tabs-contents {
            @media (max-width: 1199px) {
                padding: 20px 30px !important;
            }

            @media (max-width: 767px) {
                padding: 20px !important;
                gap: 25px;
            }

            .category-nav-tabs {
                gap: 16px;
                .button-container {
                    .nav-btn {
                        span {
                            &.button-text {
                                justify-content: center;
                                /* margin-left: 0; */
                            }
                        }
                    }

                    &#foodCoatingCard {
                        .nav-btn {
                            min-width: 97px;
                        }
                    }

                    &#foodAndBeverageIngredientsCard {
                        .nav-btn {
                            min-width: 112px;
                        }
                    }

                    &#soakingAgentsCard {
                        .nav-btn {
                            min-width: 127px;
                        }
                    }

                    &#aromaChemicalsCard {
                        .nav-btn {
                            min-width: 190px;
                        }
                    }

                    &#detergentBaseCard {
                        .nav-btn {
                            min-width: 187px;
                        }
                    }
                }
            }
        }
    }

    #foodCoatingCard {
        grid-area: 1 / 1 / 2 / 3 !important;
    }

    #foodAndBeverageIngredientsCard {
        grid-area: 1 / 3 / 2 / 5 !important;
    }

    #soakingAgentsCard {
        grid-area: 2 / 1 / 3 / 3 !important;
    }

    #aromaChemicalsCard {
        grid-area: 2 / 3 / 3 / 5 !important;
    }

    #detergentBaseCard {
        grid-area: 3 / 1 / 4 / 5 !important;
        max-width: fit-content;
    }
}

/* Ingredients - end */

/* Final Banner Fix  */
.pseudo-bg {
    display: flex;
    width: 100%;
    max-width: 100% !important;
    position: absolute;
    height: 100%;
    max-height: 100%;
    top: 0;
    left: 0;

    img {
        display: flex;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        object-fit: cover;
        object-position: top;
    }
}

/* Final Banner Fix End */

@media all and (max-width: 575px) {
    section.bigWindowVerOne {
        clear: both;
        position: relative;
    }
}

/*@media all and (max-width: 1400px){
    .page-id-582 .standardBanner.instance-1{
    background-image: url('https://crtaroma.com/wp-content/uploads/2025/11/monitors_-1600-x-756-adjusted.png')!important;
    }
}*/
@media all and (max-width: 1199px) {
    .page-id-582 .standardBanner.instance-1 {
        background-image: url("https://crtaroma.com/wp-content/uploads/2025/12/ingr_banner_tab_3-1.jpeg") !important;
    }
}
@media all and (max-width: 767px) {
    .page-id-582 .standardBanner.instance-1 {
        background-image: url("https://crtaroma.com/wp-content/themes/crtaroma/new-img/ingr_banner_mobile_2.png") !important;
    }
}