/* Sri Gayathri Enterprises – site additions (banner, form, fixes) */

/* elements that used to be revealed by the page-builder script: always visible */
.sg_animated, .sg-waypoint, .sg_pb_animation_top, .sg_pb_animation_bottom, .sg_pb_animation_left, .sg_pb_animation_right {
  opacity: 1 !important; animation: none !important; transform: none !important; }

/* ---------- home banner slider ---------- */
.sg-hero { position: relative; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); aspect-ratio: 1920 / 900; overflow: hidden; background: #e9eef3; }
.sg-hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .9s ease; }
.sg-hero-slide.is-active { opacity: 1; z-index: 1; }
.sg-hero-nav { position: absolute; top: 50%; z-index: 3; width: 40px; height: 40px; margin-top: -20px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.45); color: #fff; font-size: 28px; line-height: 38px; padding: 0; cursor: pointer; transition: background .2s; }
.sg-hero-nav:hover { background: rgba(0,0,0,.7); }
.sg-hero-prev { left: 30px; } .sg-hero-next { right: 30px; }

/* ---------- carousels ---------- */
.swiper-container { position: relative; overflow: hidden; }
.swiper-wrapper { display: flex; }
.swiper-slide { flex-shrink: 0; }

/* ---------- background videos ---------- */
.sg_pb_section_video_bg { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.sg_pb_section_video_bg video { width: 100%; height: 100%; object-fit: cover; }
.sg_pb_section_video { position: relative; z-index: 0; background-color: #16202c; }
.sg_pb_video_box video { width: 100%; height: auto; display: block; }

/* ---------- contact form ---------- */
.sg-contact-form { width: 100%; }
.sg-contact-form .sg-form-row { display: flex; gap: 16px; }
.sg-contact-form .sg-form-row .sg-form-field { flex: 1; }
.sg-contact-form .sg-form-field { margin-bottom: 26px; }
.sg-contact-form input, .sg-contact-form textarea {
  width: 100%; box-sizing: border-box; border: 1px solid transparent; background: #e8f6fb; color: #333;
  padding: 15px 14px; font-size: 14px; font-family: inherit; border-radius: 0; outline: none; transition: border-color .2s; }
.sg-contact-form textarea { min-height: 96px; resize: vertical; }
.sg-contact-form input:focus, .sg-contact-form textarea:focus { border-color: #3a3e97; background: #fff; }
.sg-contact-form .is-invalid { border-color: #d63638 !important; background: #fff5f5; }
.sg-contact-form .sg-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sg-form-submit { background: #3a3e97; color: #fff; border: 0; padding: 12px 40px; font-size: 14px; text-transform: uppercase;
  letter-spacing: .5px; cursor: pointer; transition: background .2s; }
.sg-form-submit:hover { background: #00a6e0; }
.sg-form-submit[disabled] { opacity: .6; cursor: wait; }
.sg-form-msg { margin-top: 14px; font-size: 15px; line-height: 1.5; }
.sg-form-msg.is-ok { color: #1c7c43; background: #e9f8ef; border-left: 4px solid #1c9d4f; padding: 10px 14px; }
.sg-form-msg.is-error { color: #b32d2e; background: #fdf0f0; border-left: 4px solid #d63638; padding: 10px 14px; }

/* ---------- back to top ---------- */
.sg_pb_scroll_top { cursor: pointer; }
.sg_pb_scroll_top.sg-hidden { opacity: 0; pointer-events: none; }
.sg_pb_scroll_top.sg-visible { opacity: 1; }

/* ---------- phone / tablet ---------- */
@media (max-width: 980px) {
  html, body { overflow-x: hidden; }
  .sg-hero-prev { left: 10px; } .sg-hero-next { right: 10px; }
  .sg-hero-nav { width: 32px; height: 32px; margin-top: -16px; font-size: 22px; line-height: 30px; }
  .sg_mobile_menu { position: absolute; left: 0; right: 0; z-index: 9999; background: #fff; list-style: none; margin: 0; padding: 10px 5%;
    border-top: 3px solid #00a6e0; box-shadow: 0 6px 18px rgba(0,0,0,.12); text-align: left; }
  .sg_mobile_menu li { list-style: none; }
  .sg_mobile_menu li a { display: block; padding: 11px 5%; border-bottom: 1px solid rgba(0,0,0,.06); color: #333; font-size: 15px; }
  .sg_mobile_menu li.current-menu-item > a { color: #3a3e97; font-weight: 600; }
}
@media (max-width: 767px) {
  .sg-contact-form .sg-form-row { display: block; }
  .sg-form-submit { width: 100%; }
}

/* sections that waited for a background video before showing their content */
.sg_pb_preload .sg_pb_row, .sg_pb_preload .sg_pb_column { visibility: visible !important; }
.sg_pb_preload { background-image: none; }

/* fixed backgrounds do not work on phones (section showed white, white heading invisible) */
@media (max-width: 980px) {
  .sg_pb_section, .sg_pb_row, .sg_parallax_bg { background-attachment: scroll !important; }
}
@media (max-width: 767px) {
  /* Home: product cards 2 x 2 */
  .page-id-17 .sg_pb_row_10 { display: flex !important; flex-wrap: wrap; justify-content: space-between; }
  .page-id-17 .sg_pb_row_10 > .sg_pb_column { width: 48.5% !important; margin: 0 0 14px !important; }
  /* Products page: all product cards 2 per row */
  .page-id-260 .sg_pb_section:has(.sg_pb_column_1_3) { display: flex !important; flex-wrap: wrap; justify-content: space-between; padding-left: 5%; padding-right: 5%; }
  .page-id-260 .sg_pb_section:has(.sg_pb_column_1_3) > .sg_pb_row { display: contents !important; }
  .page-id-260 .sg_pb_section:has(.sg_pb_column_1_3) .sg_pb_column_1_3 { width: 48.5% !important; margin: 0 0 14px !important; }
  .page-id-260 .sg_pb_column_1_3 h1, .page-id-260 .sg_pb_column_1_3 h2, .page-id-260 .sg_pb_column_1_3 h3,
  .page-id-260 .sg_pb_column_1_3 h4, .page-id-260 .sg_pb_column_1_3 p { font-size: 13px !important; }
  .page-id-17 .sg_pb_row_10 h1, .page-id-17 .sg_pb_row_10 h2, .page-id-17 .sg_pb_row_10 h3, .page-id-17 .sg_pb_row_10 h4, .page-id-17 .sg_pb_row_10 p { font-size: 13px !important; }
}
@media (max-width: 767px) {
  .page-id-260 .sg_pb_column_1_3 *, .page-id-17 .sg_pb_row_10 * { font-size: 14px !important; line-height: 1.35 !important; }
}
@media (max-width: 767px) {
  /* contact form card: 70px side padding left only 160px for the fields on phones */
  .sg_pb_text:has(.sg-contact-form) { padding: 24px 18px !important; }
  .sg_pb_row:has(.sg-contact-form) { width: 92% !important; }
}