@media (min-width: 768px) and (max-width: 1024px) {
/* @media (max-width: 767px) { */
  .frightSaurashtra-hero::before,
  .frightSaurashtra-hero::after {
    display: none !important;
    background: none !important;
    opacity: 0 !important;
  }
  .frightSaurashtra-hero {
    --fs-ratio: 0.5625;
    --fs-top: 70px;      /* tablet header height – adjust if needed */
    --fs-img-h: calc(100vw * var(--fs-ratio));
    --fs-overlap: calc(var(--fs-img-h) * 0.2);
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    min-height: 0 !important;
    height: auto !important;
    margin-top: 0 !important;
    padding: calc(var(--fs-top) + var(--fs-img-h) - var(--fs-overlap)) 24px 32px !important;
    background-size: 100% auto !important;
    background-position: center var(--fs-top) !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-color: #fff !important;
    overflow: visible !important;
  }
  .frightSaurashtra-hero > .frightSaurashtra-card,
  .elementor-element.frightSaurashtra-card {
    --width: 100% !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    margin: 0 auto 20px !important;
    padding: 32px 28px !important;
    background: #fff !important;
    border: 1px solid #e6e8ee !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .08) !important;
    backdrop-filter: none !important;
  }
}
@media (max-width: 1024px) {
  /* remove overlay on mobile – clear image */
  .frightSaurashtra-hero::before,
  .frightSaurashtra-hero::after {
    display: none !important;
    background: none !important;
    opacity: 0 !important;
  }
  .frightSaurashtra-hero {
    --fs-ratio: 0.5625;  /* image height ÷ width */
    --fs-top: 70px;      /* header height */
    --fs-img-h: calc(100vw * var(--fs-ratio));
    --fs-overlap: calc(var(--fs-img-h) * 0.2);  /* 20% overlap */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    min-height: 0 !important;
    height: auto !important;
    margin-top: 0 !important;
    padding: calc(var(--fs-top) + var(--fs-img-h) - var(--fs-overlap)) 16px 24px !important;
    background-size: 100% auto !important;
    background-position: center var(--fs-top) !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-color: #fff !important;
    overflow: visible !important;
  }
.pt-50{
	padding-top:70px!important;	
	}
  .frightSaurashtra-hero::before,
  .frightSaurashtra-hero::after {
    top: var(--fs-top) !important;
    bottom: auto !important;
    height: var(--fs-img-h) !important;
  }

  .frightSaurashtra-card {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
/*     margin: 0 !important; */

        margin: 0 0 20px !important;

	  padding: 24px 20px !important;
    background: #fff !important;
    border: 1px solid #e6e8ee !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .08) !important;
    backdrop-filter: none !important;
  }
}
/*  */
@media (min-width: 768px) and (max-width: 1024px) {
  body .sf-native-container.inner-hero:not(:has(> .governance-hero-art)) {
    --ih-top: 70px;                               /* header height */
    --ih-img-h: 56vw;                             /* image height – tweak */
    --ih-overlap: calc(var(--ih-img-h) * 0.2);    /* card 20% on image */
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: calc(var(--ih-top) + var(--ih-img-h) - var(--ih-overlap)) 24px 32px !important;
    background-color: #fff !important;
    background-size: 0 0 !important;              /* hide on section, shown via ::before */
    overflow: visible !important;
  }

  /* image band – same image, full width, no gaps */
  body .sf-native-container.inner-hero:not(:has(> .governance-hero-art))::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: var(--ih-top) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    height: var(--ih-img-h) !important;
    background-image: inherit !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    opacity: 1 !important;
    z-index: 0 !important;
  }

  /* card above image */
  body .sf-native-container.inner-hero > .inner-hero-content {
    position: relative !important;
    z-index: 2 !important;
  }

  /* governance pages – keep old layout */
  body .sf-native-container.inner-hero:has(> .governance-hero-art) {
    padding: var(--ih-top) 24px 32px !important;
    background: #fff !important;
  }
}
/* All inner-page heroes – tablet: image on top, card below (like mobile) */
@media (min-width: 768px) and (max-width: 1024px) {
/*   body .sf-native-container.inner-hero {
    --ih-top: 70px;                  header height 
    --ih-img-h: 45vw;               * image height – tweak *
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: var(--ih-top) 24px 32px !important;
    background: #fff !important;
    overflow: visible !important;
  }
  body .sf-native-container.inner-hero::before,
  body .sf-native-container.inner-hero::after {
    display: none !important;
  }
 */

 
  /* image block → top */
  body .sf-native-container.inner-hero > .governance-hero-art {
    order: -1 !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    display: block !important;
    width: calc(100% + 48px) !important;
    max-width: none !important;
    height: var(--ih-img-h) !important;
    min-height: 0 !important;
    margin: 0 -24px 20px !important;
    background-size: contain !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }
  body .sf-native-container.inner-hero > .governance-hero-art img,
  body .sf-native-container.inner-hero > .governance-hero-art svg {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* card → below */
  body .sf-native-container.inner-hero > .inner-hero-content {
    --width: 100% !important;
    order: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}
/* governance / line-art pages – TABLET ONLY: image on top, card 20% on image */
@media (min-width: 768px) and (max-width: 1024px) {
  html body .sf-native-container.inner-hero.inner-hero:has(> .governance-hero-art) {
    --ih-top: 70px;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    min-height: 0 !important;
    height: auto !important;
    padding: var(--ih-top) 24px 32px !important;
    background: #fff !important;
    overflow: visible !important;
  }

  html body .sf-native-container.inner-hero.inner-hero > .governance-hero-art.governance-hero-art {
    --width: auto !important;
    order: -1 !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 -24px -11.25vw !important;   /* -11.25vw = 20% of image height */
    padding: 0 !important;
    z-index: 1 !important;
  }

  html body .sf-native-container.inner-hero.inner-hero > .governance-hero-art .elementor-widget,
  html body .sf-native-container.inner-hero.inner-hero > .governance-hero-art .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }

  html body .sf-native-container.inner-hero.inner-hero > .governance-hero-art img {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
    opacity: 1 !important;
  }

  html body .sf-native-container.inner-hero.inner-hero:has(> .governance-hero-art) > .inner-hero-content {
    position: relative !important;
    z-index: 2 !important;
    margin: 0 !important;
  }
}