.elementor-48 .elementor-element.elementor-element-e222ca0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.67;--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:10%;--padding-bottom:10%;--padding-left:0%;--padding-right:0%;}.elementor-48 .elementor-element.elementor-element-e222ca0:not(.elementor-motion-effects-element-type-background), .elementor-48 .elementor-element.elementor-element-e222ca0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://vitthalpilescenter.com/wp-content/uploads/2026/07/breadcrumb.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-48 .elementor-element.elementor-element-e222ca0::before, .elementor-48 .elementor-element.elementor-element-e222ca0 > .elementor-background-video-container::before, .elementor-48 .elementor-element.elementor-element-e222ca0 > .e-con-inner > .elementor-background-video-container::before, .elementor-48 .elementor-element.elementor-element-e222ca0 > .elementor-background-slideshow::before, .elementor-48 .elementor-element.elementor-element-e222ca0 > .e-con-inner > .elementor-background-slideshow::before, .elementor-48 .elementor-element.elementor-element-e222ca0 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#0F2239;background-image:url("https://vitthalpilescenter.com/wp-content/uploads/2026/07/breadcumb_shape_1_1.png");--background-overlay:'';background-position:center right;background-repeat:no-repeat;background-size:cover;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-48 .elementor-element.elementor-element-729bfcb{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-48 .elementor-element.elementor-element-729bfcb .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:48px;font-weight:600;color:#FFFFFF;}.elementor-48 .elementor-element.elementor-element-8f57d2e{margin:0% 0% calc(var(--kit-widget-spacing, 0px) + 0%) 0%;text-align:center;}.elementor-48 .elementor-element.elementor-element-8f57d2e .elementor-heading-title{font-family:"Jost", Sans-serif;font-size:20px;font-weight:400;color:#FFFFFF;}.elementor-48 .elementor-element.elementor-element-b9f2501{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0%;--padding-bottom:0%;--padding-left:10%;--padding-right:10%;}.elementor-48 .elementor-element.elementor-element-da0cae1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-image-gallery .gallery-item .gallery-caption{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-48 .elementor-element.elementor-element-086ad63 .gallery-item{padding:0 20px 20px 0;}.elementor-48 .elementor-element.elementor-element-086ad63 .gallery{margin:0 -20px -20px 0;}.elementor-48 .elementor-element.elementor-element-086ad63 .gallery-item img{border-radius:05px 05px 05px 05px;}.elementor-48 .elementor-element.elementor-element-086ad63 .gallery-item .gallery-caption{text-align:center;margin-block-start:0px;}.elementor-48 .elementor-element.elementor-element-4ff5d45{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-48 .elementor-element.elementor-element-2edb3bf .elementor-wrapper{--video-aspect-ratio:0.5625;}.elementor-48 .elementor-element.elementor-element-845bc2b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0%;--padding-bottom:0%;--padding-left:9%;--padding-right:9%;}.elementor-48 .elementor-element.elementor-element-6488442{padding:0px 0px 0px 0px;}.elementor-48 .elementor-element.elementor-element-6488442 .gallery-item{padding:0 20px 20px 0;}.elementor-48 .elementor-element.elementor-element-6488442 .gallery{margin:0 -20px -20px 0;}.elementor-48 .elementor-element.elementor-element-6488442 .gallery-item img{border-radius:5px 5px 5px 5px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-48 .elementor-element.elementor-element-da0cae1{--width:70%;}.elementor-48 .elementor-element.elementor-element-4ff5d45{--width:30%;}}/* Start custom CSS for image-gallery, class: .elementor-element-086ad63 *//* ==========================================================================
   ELEMENTOR IMAGE GALLERY HOVER OVERLAY EFFECT 
   ========================================================================== */

/* 1. Setup the main image block boundaries */
.elementor-48 .elementor-element.elementor-element-086ad63 .gallery-item {
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
}

.elementor-48 .elementor-element.elementor-element-086ad63 .gallery-icon {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 20px !important; /* Perfect rounded corners */
}

.elementor-48 .elementor-element.elementor-element-086ad63 .gallery-icon img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    transition: transform 0.5s ease-in-out !important;
}

/* Subtle image scale effect on hover */
.elementor-48 .elementor-element.elementor-element-086ad63 .gallery-item:hover .gallery-icon img {
    transform: scale(1.06) !important;
}

/* 2. Create the Blue Color Overlay Layer */
.elementor-48 .elementor-element.elementor-element-086ad63 .gallery-icon::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(15, 34, 57, 0.85) !important; 
    z-index: 1 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.4s ease-in-out !important;
}

/* 3. Inject the Center White Eye Badge */
.elementor-48 .elementor-element.elementor-element-086ad63 .gallery-icon::after {
    content: "\f06e" !important; 
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    
    position: absolute !important;
    top: 42% !important; 
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.7) !important;
    
    width: 56px !important;
    height: 56px !important;
    background-color: #ffffff !important;
    color: #FF3600 !important; 
    border-radius: 14px !important;
    
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    
    z-index: 2 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* 4. Style the First Line Title ("Fissure" / "Piles") */
.elementor-48 .elementor-element.elementor-element-086ad63 .gallery-caption {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important; 
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 15px 30px 15px !important; 
    margin: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important;
    text-align: center !important;
    
    /* Configures the first word to be Bold and Large */
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.3px !important;
    
    z-index: 3 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(15px) !important;
    transition: all 0.4s ease-in-out !important;
}

/* 5. Style the Second Line Subtitle ("Disease") via HTML Tag Class */
.elementor-48 .elementor-element.elementor-element-086ad63 .gallery-caption .sub-disease {
    display: block !important; /* Forces it onto a brand new line underneath */
    font-size: 18px !important; /* Makes it smaller than the title */
    font-weight: 400 !important; /* Makes it light/regular weight instead of bold */
    text-transform: capitalize !important;
    margin-top: 6px !important; /* Creates clean spacing between both lines */
    color: #ffffff !important;
    letter-spacing: 0px !important;
}

/* ==========================================================================
   TRIGGER HOVER INTERACTION STATES
   ========================================================================== */

.elementor-48 .elementor-element.elementor-element-086ad63 .gallery-item:hover .gallery-icon::before {
    opacity: 1 !important;
    visibility: visible !important;
}

.elementor-48 .elementor-element.elementor-element-086ad63 .gallery-item:hover .gallery-icon::after {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

.elementor-48 .elementor-element.elementor-element-086ad63 .gallery-item:hover .gallery-caption {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}/* End custom CSS */
/* Start custom CSS for image-gallery, class: .elementor-element-6488442 *//* ==========================================================================
   ELEMENTOR IMAGE GALLERY HOVER OVERLAY EFFECT 
   ========================================================================== */

/* 1. Setup the main image block boundaries */
.elementor-48 .elementor-element.elementor-element-6488442 .gallery-item {
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
}

.elementor-48 .elementor-element.elementor-element-6488442 .gallery-icon {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 20px !important; /* Perfect rounded corners */
}

.elementor-48 .elementor-element.elementor-element-6488442 .gallery-icon img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    transition: transform 0.5s ease-in-out !important;
}

/* Subtle image scale effect on hover */
.elementor-48 .elementor-element.elementor-element-6488442 .gallery-item:hover .gallery-icon img {
    transform: scale(1.06) !important;
}

/* 2. Create the Blue Color Overlay Layer */
.elementor-48 .elementor-element.elementor-element-6488442 .gallery-icon::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(15, 34, 57, 0.85) !important; 
    z-index: 1 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.4s ease-in-out !important;
}

/* 3. Inject the Center White Eye Badge */
.elementor-48 .elementor-element.elementor-element-6488442 .gallery-icon::after {
    content: "\f06e" !important; 
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    
    position: absolute !important;
    top: 42% !important; 
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.7) !important;
    
    width: 56px !important;
    height: 56px !important;
    background-color: #ffffff !important;
    color: #FF3600 !important; 
    border-radius: 14px !important;
    
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    
    z-index: 2 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* 4. Style the First Line Title ("Fissure" / "Piles") */
.elementor-48 .elementor-element.elementor-element-6488442 .gallery-caption {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important; 
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 15px 30px 15px !important; 
    margin: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important;
    text-align: center !important;
    
    /* Configures the first word to be Bold and Large */
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.3px !important;
    
    z-index: 3 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(15px) !important;
    transition: all 0.4s ease-in-out !important;
}

/* 5. Style the Second Line Subtitle ("Disease") via HTML Tag Class */
.elementor-48 .elementor-element.elementor-element-6488442 .gallery-caption .sub-disease {
    display: block !important; /* Forces it onto a brand new line underneath */
    font-size: 18px !important; /* Makes it smaller than the title */
    font-weight: 400 !important; /* Makes it light/regular weight instead of bold */
    text-transform: capitalize !important;
    margin-top: 6px !important; /* Creates clean spacing between both lines */
    color: #ffffff !important;
    letter-spacing: 0px !important;
}

/* ==========================================================================
   TRIGGER HOVER INTERACTION STATES
   ========================================================================== */

.elementor-48 .elementor-element.elementor-element-6488442 .gallery-item:hover .gallery-icon::before {
    opacity: 1 !important;
    visibility: visible !important;
}

.elementor-48 .elementor-element.elementor-element-6488442 .gallery-item:hover .gallery-icon::after {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

.elementor-48 .elementor-element.elementor-element-6488442 .gallery-item:hover .gallery-caption {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}/* End custom CSS */