.elementor-14 .elementor-element.elementor-element-bb4768e{--display:flex;--min-height:0px;--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;--overflow:hidden;--overlay-opacity:0.58;--overlay-mix-blend-mode:lighten;--margin-top:-14px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-14 .elementor-element.elementor-element-bb4768e:not(.elementor-motion-effects-element-type-background), .elementor-14 .elementor-element.elementor-element-bb4768e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#020101FC;}.elementor-14 .elementor-element.elementor-element-bb4768e::before, .elementor-14 .elementor-element.elementor-element-bb4768e > .elementor-background-video-container::before, .elementor-14 .elementor-element.elementor-element-bb4768e > .e-con-inner > .elementor-background-video-container::before, .elementor-14 .elementor-element.elementor-element-bb4768e > .elementor-background-slideshow::before, .elementor-14 .elementor-element.elementor-element-bb4768e > .e-con-inner > .elementor-background-slideshow::before, .elementor-14 .elementor-element.elementor-element-bb4768e > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://getmorereviews.in/wp-content/uploads/2026/03/banner-image-1-for-doctor-website.avif");--background-overlay:'';background-size:auto;}.elementor-14 .elementor-element.elementor-element-ef8e094{--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-14 .elementor-element.elementor-element-f2a8a02{--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-14 .elementor-element.elementor-element-f2a8a02:not(.elementor-motion-effects-element-type-background), .elementor-14 .elementor-element.elementor-element-f2a8a02 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F2FCF6;}.elementor-14 .elementor-element.elementor-element-94fbf78{--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-14 .elementor-element.elementor-element-94fbf78:not(.elementor-motion-effects-element-type-background), .elementor-14 .elementor-element.elementor-element-94fbf78 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#042014;}.elementor-14 .elementor-element.elementor-element-a24c389{--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-14 .elementor-element.elementor-element-a24c389:not(.elementor-motion-effects-element-type-background), .elementor-14 .elementor-element.elementor-element-a24c389 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-14 .elementor-element.elementor-element-4d4edad{--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-14 .elementor-element.elementor-element-4d4edad:not(.elementor-motion-effects-element-type-background), .elementor-14 .elementor-element.elementor-element-4d4edad > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#042014;}.elementor-14 .elementor-element.elementor-element-2029821{--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-14 .elementor-element.elementor-element-2029821:not(.elementor-motion-effects-element-type-background), .elementor-14 .elementor-element.elementor-element-2029821 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-14 .elementor-element.elementor-element-86ebae6{--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-14 .elementor-element.elementor-element-86ebae6:not(.elementor-motion-effects-element-type-background), .elementor-14 .elementor-element.elementor-element-86ebae6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0F6E56;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-14 .elementor-element.elementor-element-bb4768e::before, .elementor-14 .elementor-element.elementor-element-bb4768e > .elementor-background-video-container::before, .elementor-14 .elementor-element.elementor-element-bb4768e > .e-con-inner > .elementor-background-video-container::before, .elementor-14 .elementor-element.elementor-element-bb4768e > .elementor-background-slideshow::before, .elementor-14 .elementor-element.elementor-element-bb4768e > .e-con-inner > .elementor-background-slideshow::before, .elementor-14 .elementor-element.elementor-element-bb4768e > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-position:bottom center;}}/* Start custom CSS for container, class: .elementor-element-bb4768e *//* ============================================
   CONTAINER BACKGROUND WITH DARK OVERLAY
   Add this CSS to ANY container that has a background image
   Text will always be visible and readable
   Just apply the class "hero-container" to your container
============================================ */

.hero-container {
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
}

/* Dark Overlay - Adjust opacity as needed */
.hero-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.7) 30%,
    rgba(15, 110, 86, 0.5) 60%,
    rgba(0, 0, 0, 0.8) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Make sure all content stays above overlay */
.hero-container > * {
  position: relative;
  z-index: 2;
}

/* ============================================
   ALTERNATIVE DARK OVERLAY (SIMPLE VERSION)
   Use this if you want just a solid dark overlay
============================================ */
.hero-container-simple {
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
}

.hero-container-simple::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
  pointer-events: none;
}

.hero-container-simple > * {
  position: relative;
  z-index: 2;
}

/* ============================================
   DARK OVERLAY WITH GRADIENT (RECOMMENDED)
   For better text visibility on any image
============================================ */
.hero-container-gradient {
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
}

.hero-container-gradient::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.7) 30%,
    rgba(15, 110, 86, 0.5) 60%,
    rgba(0, 0, 0, 0.8) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.hero-container-gradient > * {
  position: relative;
  z-index: 2;
}

/* ============================================
   EXTRA STRONG OVERLAY (FOR VERY BRIGHT IMAGES)
============================================ */
.hero-container-strong {
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
}

.hero-container-strong::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.8) 40%,
    rgba(15, 110, 86, 0.6) 70%,
    rgba(0, 0, 0, 0.9) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.hero-container-strong > * {
  position: relative;
  z-index: 2;
}

/* ============================================
   SOFT OVERLAY (FOR DARKER IMAGES)
============================================ */
.hero-container-soft {
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
}

.hero-container-soft::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.6) 50%,
    rgba(0, 0, 0, 0.7) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.hero-container-soft > * {
  position: relative;
  z-index: 2;
}

/* ============================================
   HOW TO USE:
   
   Method 1 - Add class to your container:
   <div class="your-container hero-container">
     ... your content ...
   </div>
   
   Method 2 - If you have inline style with background:
   <div style="background-image: url('your-image.jpg');" class="hero-container">
     ... your content ...
   </div>
   
   Method 3 - Direct CSS for specific container:
   #your-container {
     position: relative;
     background-image: url('your-image.jpg');
     background-size: cover;
     background-position: center;
   }
   
   #your-container::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, rgba(0,0,0,0.75), rgba(15,110,86,0.5), rgba(0,0,0,0.8));
     z-index: 1;
     pointer-events: none;
   }
   
   #your-container > * {
     position: relative;
     z-index: 2;
   }
   
   ============================================
   TIPS:
   - Adjust opacity values (0.5, 0.7, 0.85) to control darkness
   - Add more green (#0F6E56) for brand color overlay
   - Use linear-gradient for smooth transitions
   - Always keep content z-index higher than overlay
   ============================================
*/
</style>/* End custom CSS */