.elementor-13 .elementor-element.elementor-element-558a45c{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:15px;--padding-right:15px;}.elementor-13 .elementor-element.elementor-element-eb4bb26{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:15px;--padding-right:15px;}.elementor-13 .elementor-element.elementor-element-04c0a9c{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-d90c146{--spacer-size:93px;}.elementor-13 .elementor-element.elementor-element-f6ccd5f{text-align:center;}.elementor-13 .elementor-element.elementor-element-9cfb8b7{--spacer-size:40px;}.elementor-13 .elementor-element.elementor-element-f0ad5cb{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:15px;--padding-right:15px;}.elementor-13 .elementor-element.elementor-element-7ffe66f{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-dfaf9ca{--display:flex;}.elementor-13 .elementor-element.elementor-element-8ccbe2a{--display:flex;}.elementor-13 .elementor-element.elementor-element-f8a3da1{text-align:center;}.elementor-13 .elementor-element.elementor-element-f8a3da1 img{width:100%;transition-duration:1s;border-radius:50% 50% 50% 50%;}.elementor-13 .elementor-element.elementor-element-fa93533{text-align:center;}.elementor-13 .elementor-element.elementor-element-fa93533 .elementor-heading-title{font-family:"Krub", Sans-serif;font-size:19px;font-weight:500;color:var( --e-global-color-b892087 );}.elementor-13 .elementor-element.elementor-element-fa93533 .elementor-heading-title a:hover, .elementor-13 .elementor-element.elementor-element-fa93533 .elementor-heading-title a:focus{color:var( --e-global-color-woostify_color_6 );}.elementor-13 .elementor-element.elementor-element-d1679af{--display:flex;}.elementor-13 .elementor-element.elementor-element-08dfd77{--display:flex;}.elementor-13 .elementor-element.elementor-element-239e831{text-align:center;}.elementor-13 .elementor-element.elementor-element-239e831 img{width:100%;transition-duration:1s;border-radius:50% 50% 50% 50%;}.elementor-13 .elementor-element.elementor-element-6216924{text-align:center;}.elementor-13 .elementor-element.elementor-element-6216924 .elementor-heading-title{font-family:"Krub", Sans-serif;font-size:19px;font-weight:500;color:var( --e-global-color-b892087 );}.elementor-13 .elementor-element.elementor-element-6216924 .elementor-heading-title a:hover, .elementor-13 .elementor-element.elementor-element-6216924 .elementor-heading-title a:focus{color:var( --e-global-color-woostify_color_6 );}.elementor-13 .elementor-element.elementor-element-69e008c{--display:flex;}.elementor-13 .elementor-element.elementor-element-ad74534{--display:flex;}.elementor-13 .elementor-element.elementor-element-c68d526{text-align:center;}.elementor-13 .elementor-element.elementor-element-c68d526 img{width:100%;transition-duration:1s;border-radius:50% 50% 50% 50%;}.elementor-13 .elementor-element.elementor-element-febb5e3{text-align:center;}.elementor-13 .elementor-element.elementor-element-febb5e3 .elementor-heading-title{font-family:"Krub", Sans-serif;font-size:19px;font-weight:500;color:var( --e-global-color-b892087 );}.elementor-13 .elementor-element.elementor-element-febb5e3 .elementor-heading-title a:hover, .elementor-13 .elementor-element.elementor-element-febb5e3 .elementor-heading-title a:focus{color:var( --e-global-color-woostify_color_6 );}.elementor-13 .elementor-element.elementor-element-d1bd7aa{--display:flex;}.elementor-13 .elementor-element.elementor-element-6bffb51{--display:flex;}.elementor-13 .elementor-element.elementor-element-80a731e{text-align:center;}.elementor-13 .elementor-element.elementor-element-80a731e img{width:100%;transition-duration:1s;border-radius:50% 50% 50% 50%;}.elementor-13 .elementor-element.elementor-element-904e7c8{text-align:center;}.elementor-13 .elementor-element.elementor-element-904e7c8 .elementor-heading-title{font-family:"Krub", Sans-serif;font-size:19px;font-weight:500;color:var( --e-global-color-b892087 );}.elementor-13 .elementor-element.elementor-element-904e7c8 .elementor-heading-title a:hover, .elementor-13 .elementor-element.elementor-element-904e7c8 .elementor-heading-title a:focus{color:var( --e-global-color-woostify_color_6 );}.elementor-13 .elementor-element.elementor-element-2ca7733{--display:flex;}.elementor-13 .elementor-element.elementor-element-78815d2{--display:flex;}.elementor-13 .elementor-element.elementor-element-0e35e6f{text-align:center;}.elementor-13 .elementor-element.elementor-element-0e35e6f img{width:100%;transition-duration:1s;border-radius:50% 50% 50% 50%;}.elementor-13 .elementor-element.elementor-element-2800ad8{text-align:center;}.elementor-13 .elementor-element.elementor-element-2800ad8 .elementor-heading-title{font-family:"Krub", Sans-serif;font-size:19px;font-weight:500;color:var( --e-global-color-b892087 );}.elementor-13 .elementor-element.elementor-element-2800ad8 .elementor-heading-title a:hover, .elementor-13 .elementor-element.elementor-element-2800ad8 .elementor-heading-title a:focus{color:var( --e-global-color-woostify_color_6 );}.elementor-13 .elementor-element.elementor-element-89ed950{--e-n-carousel-swiper-slides-to-display:5;--e-n-carousel-swiper-slides-gap:2px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;}.elementor-13 .elementor-element.elementor-element-7370ebf{--spacer-size:84px;}.elementor-13 .elementor-element.elementor-element-e593dba{text-align:center;}.elementor-13 .elementor-element.elementor-element-15823f6{--spacer-size:34px;}.elementor-13 .elementor-element.elementor-element-4d97cda{--spacer-size:31px;}@media(max-width:1024px){.elementor-13 .elementor-element.elementor-element-f8a3da1 img{width:65%;}.elementor-13 .elementor-element.elementor-element-239e831 img{width:65%;}.elementor-13 .elementor-element.elementor-element-c68d526 img{width:65%;}.elementor-13 .elementor-element.elementor-element-80a731e img{width:65%;}.elementor-13 .elementor-element.elementor-element-0e35e6f img{width:65%;}.elementor-13 .elementor-element.elementor-element-89ed950{--e-n-carousel-swiper-slides-to-display:2;}}@media(min-width:768px){.elementor-13 .elementor-element.elementor-element-558a45c{--content-width:1170px;}}@media(max-width:767px){.elementor-13 .elementor-element.elementor-element-d90c146{--spacer-size:50px;}.elementor-13 .elementor-element.elementor-element-f6ccd5f .elementor-heading-title{font-size:1.7rem;}.elementor-13 .elementor-element.elementor-element-9cfb8b7{--spacer-size:30px;}.elementor-13 .elementor-element.elementor-element-f8a3da1 img{width:65%;height:180px;}.elementor-13 .elementor-element.elementor-element-239e831 img{width:65%;height:180px;}.elementor-13 .elementor-element.elementor-element-c68d526 img{width:65%;height:180px;}.elementor-13 .elementor-element.elementor-element-80a731e img{width:65%;height:180px;}.elementor-13 .elementor-element.elementor-element-0e35e6f img{width:65%;height:180px;}.elementor-13 .elementor-element.elementor-element-89ed950{--e-n-carousel-swiper-slides-to-display:1;}.elementor-13 .elementor-element.elementor-element-7370ebf{--spacer-size:50px;}.elementor-13 .elementor-element.elementor-element-e593dba .elementor-heading-title{font-size:1.7rem;}}/* Start custom CSS for image, class: .elementor-element-f8a3da1 *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-239e831 *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c68d526 *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-80a731e *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e35e6f *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3da1 *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-239e831 *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c68d526 *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-80a731e *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e35e6f *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3da1 *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-239e831 *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c68d526 *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-80a731e *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e35e6f *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3da1 *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-239e831 *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c68d526 *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-80a731e *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e35e6f *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3da1 *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-239e831 *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c68d526 *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-80a731e *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e35e6f *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3da1 *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-239e831 *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c68d526 *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-80a731e *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0e35e6f *//* =========================================================
   SUPERVEDA - WELLNESS COLLECTIONS
   Responsive Desktop + Tablet + Mobile
   Perfect Circles + Hover Animation
   ========================================================= */


/* =========================================================
   1. WELLNESS COLLECTION ITEM
   ========================================================= */

.concern-item {
    position: relative !important;
    cursor: pointer !important;
    text-align: center !important;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease !important;
}

.concern-item:hover {
    transform: translateY(-8px) !important;
}


/* =========================================================
   2. IMAGE TRANSITION
   ========================================================= */

.concern-item img,
.concern-item svg,
.concern-item i {
    transition: transform 0.4s ease !important;
}


/* =========================================================
   3. DESKTOP
   992px AND ABOVE
   ========================================================= */

@media (min-width: 992px) {

    .concern-circle img {
        display: block !important;

        /*
         * Fluid desktop size:
         * 1366px  → approximately 190px
         * 1536px  → approximately 220px
         * 1920px  → 220px maximum
         */
        width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-width: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        min-height: clamp(
            190px,
            calc(190px + (100vw - 1366px) * 0.1765),
            220px
        ) !important;

        max-width: 220px !important;
        max-height: 220px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Keep each item centered */

    .concern-item {
        text-align: center !important;
    }


    /* Center all text */

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }
}


/* =========================================================
   4. DESKTOP IMAGE HOVER
   ========================================================= */

@media (min-width: 992px) {

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.08) !important;
    }
}


/* =========================================================
   5. TEXT HOVER
   ========================================================= */

.concern-item h3,
.concern-item h4,
.concern-item p,
.concern-item a {
    transition:
        color 0.3s ease,
        transform 0.3s ease !important;
}

.concern-item:hover h3,
.concern-item:hover h4,
.concern-item:hover p,
.concern-item:hover a {
    transform: translateY(-3px) !important;
}


/* =========================================================
   6. TABLET
   768px - 991px
   ========================================================= */

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

    .concern-circle img {
        display: block !important;

        width: 200px !important;
        height: 200px !important;

        min-width: 200px !important;
        min-height: 200px !important;

        max-width: 200px !important;
        max-height: 200px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-8px) scale(1.06) !important;
    }
}


/* =========================================================
   7. MOBILE
   BELOW 768px
   ========================================================= */

@media (max-width: 767px) {

    .concern-circle img {
        display: block !important;

        width: 170px !important;
        height: 170px !important;

        min-width: 170px !important;
        min-height: 170px !important;

        max-width: 170px !important;
        max-height: 170px !important;

        aspect-ratio: 1 / 1 !important;

        object-fit: cover !important;
        object-position: center center !important;

        border-radius: 50% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .concern-item {
        text-align: center !important;
    }

    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        text-align: center !important;
    }

    .concern-item:hover .concern-circle img {
        transform: translateY(-6px) scale(1.05) !important;
    }
}


/* =========================================================
   8. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .concern-item,
    .concern-item img,
    .concern-item svg,
    .concern-item i,
    .concern-item h3,
    .concern-item h4,
    .concern-item p,
    .concern-item a {
        transition: none !important;
    }

    .concern-item:hover {
        transform: none !important;
    }

    .concern-item:hover .concern-circle img {
        transform: none !important;
    }

    .concern-item:hover h3,
    .concern-item:hover h4,
    .concern-item:hover p,
    .concern-item:hover a {
        transform: none !important;
    }
}/* End custom CSS */