.elementor-16 .elementor-element.elementor-element-3718f4c{--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:240px;--padding-bottom:120px;--padding-left:0px;--padding-right:0px;}.elementor-16 .elementor-element.elementor-element-3718f4c:not(.elementor-motion-effects-element-type-background), .elementor-16 .elementor-element.elementor-element-3718f4c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#246C35;background-image:url("https://bepsrak.com/wp-content/uploads/2025/10/UAE-NATIONAL-DAY-10-scaled-e1761046700248.jpeg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-16 .elementor-element.elementor-element-fad5ddb{--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:0px;--padding-right:0px;}.elementor-16 .elementor-element.elementor-element-fad5ddb.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-16 .elementor-element.elementor-element-183c2ea.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-16 .elementor-element.elementor-element-981f830{--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:0px;--padding-right:0px;}.elementor-16 .elementor-element.elementor-element-b405d06 iframe{height:500px;}.elementor-16 .elementor-element.elementor-element-1b7e317{--display:flex;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-16 .elementor-element.elementor-element-3718f4c{--width:100%;}}@media(max-width:1024px) and (min-width:768px){.elementor-16 .elementor-element.elementor-element-fad5ddb{--width:572px;}}@media(max-width:1024px){.elementor-16 .elementor-element.elementor-element-3718f4c{--padding-top:200px;--padding-bottom:120px;--padding-left:40px;--padding-right:40px;}.elementor-16 .elementor-element.elementor-element-183c2ea{width:var( --container-widget-width, 975.74px );max-width:975.74px;--container-widget-width:975.74px;--container-widget-flex-grow:0;}.elementor-16 .elementor-element.elementor-element-b405d06 iframe{height:350px;}}@media(max-width:767px){.elementor-16 .elementor-element.elementor-element-3718f4c:not(.elementor-motion-effects-element-type-background), .elementor-16 .elementor-element.elementor-element-3718f4c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center center;}.elementor-16 .elementor-element.elementor-element-3718f4c{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:200px;--padding-bottom:120px;--padding-left:24px;--padding-right:24px;}.elementor-16 .elementor-element.elementor-element-fad5ddb{--width:500px;--padding-top:64px;--padding-bottom:64px;--padding-left:24px;--padding-right:24px;}}/* Start custom CSS for container, class: .elementor-element-fad5ddb *//* ===== CONTACT PAGE TWEAKS (DESKTOP + MOBILE) ===== */

/* Keep the contact card nicely centered and not too wide */
.contact-wrapper .card {
  max-width: 1100px;
  margin: 20px auto 40px;
}

/* Make the logo smaller on all devices */
.contact-wrapper .school-logo {
  max-width: 230px;
  height: auto;
  display: block;
}

/* Tidy the right column so the logo sits centered */
.contact-wrapper .card-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== MOBILE / TABLET OPTIMIZATION ===== */
@media (max-width: 900px) {
  /* Stack columns: image on top, text below */
  .contact-wrapper .card {
    display: grid;
    grid-template-columns: 1fr;
    padding: 20px 18px 24px;
    gap: 18px;
  }

  .contact-wrapper .card-right {
    order: -1; /* logo section first on mobile */
  }

  .contact-wrapper .school-logo {
    max-width: 170px;   /* smaller logo on mobile */
    margin: 0 auto 8px; /* center it */
  }

  /* Make buttons full-width and easy to tap */
  .contact-wrapper .contact-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .contact-wrapper .contact-btn {
    width: 100%;
    justify-content: center;
  }

  /* Optional: center the small header text for better balance */
  .contact-wrapper .header-block,
  .contact-wrapper .subtitle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}
/* ===== Make the whole Contact section one clean card ===== */
.contact-wrapper {
  max-width: 1100px;
  margin: 30px auto 40px;
  padding: 24px 18px 30px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
}

/* Remove separate card look from inner .card so it blends */
.contact-wrapper .card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-top: 18px;
}

/* Keep heading slightly centered but not full-width */
.contact-wrapper .page-title {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}

/* Subtitle also slightly centered */
.contact-wrapper .subtitle {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 85%;
}

/* Mobile tweaks: keep everything tight and readable */
@media (max-width: 900px) {
  .contact-wrapper {
    margin: 20px 10px 32px;
    padding: 18px 14px 24px;
    border-radius: 20px;
  }

  .contact-wrapper .page-title {
    font-size: 1.7rem;
    width: 100%;
  }

  .contact-wrapper .subtitle {
    width: 100%;
    font-size: 0.9rem;
  }
}
/* Make sure the contact section never goes wider than the screen */
.contact-wrapper {
  max-width: 1100px;
  width: 100%;
  margin: 24px auto 32px;
  padding: 18px 16px 24px;
  box-sizing: border-box;
}

/* Inner card respects the wrapper width */
.contact-wrapper .card {
  width: 100%;
  max-width: 100%;
  margin: 16px 0 0;
}

/* All children inside contact-wrapper must stay within the width */
.contact-wrapper * {
  box-sizing: border-box;
  max-width: 100%;
}
/* Prevent horizontal overflow on the whole site */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}/* End custom CSS */