/* Start custom CSS *//* ===== HOME PAGE — PHONE-ONLY FIXES (leave desktop/tablet unchanged) ===== */
@media (max-width: 767px){

  /* 1) General breathing room so content isn't glued to screen edges */
  .elementor-section{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  /* 2) Headings: scale + center for neat wrapping (incl. "You Spoke…" & "Our Mentors…") */
  .elementor-widget-heading .elementor-heading-title{
    font-size: clamp(24px, 7vw, 34px) !important;
    line-height: 1.2 !important;
    text-align: center !important;
    margin-bottom: 10px !important;
    word-break: break-word;
    hyphens: auto;
  }

  /* Some headings were built inside Text Editor—normalize those too */
  .elementor-widget-text-editor h1,
  .elementor-widget-text-editor h2,
  .elementor-widget-text-editor h3{
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: 1.3 !important;
    text-align: center !important;
    margin: 0 0 12px 0 !important;
  }

  /* 3) Body copy under headings (paragraphs) */
  .elementor-widget-text-editor p{
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    margin-bottom: 12px !important;
    text-align: left;   /* better readability for paragraphs */
  }

  /* 4) Primary CTA buttons: full-width & thumb-friendly */
  .elementor-button{
    width:100% !important;
    display:block !important;
    text-align:center !important;
    padding:14px 0 !important;
    margin-top:12px !important;
  }

  /* 5) Two-column areas (e.g., Mentors images): stack + add gap */
  /* Forces columns to full width on phones while keeping desktop intact */
  .elementor-column{
    width:100% !important;
    margin: 0 0 14px 0 !important; /* gap between stacked columns */
  }

  /* 6) Images: always scale to container; avoid side scroll */
  .elementor-widget-image img{
    max-width:100% !important;
    height:auto !important;
    display:block;
  }

  /* 7) Sliders/Carousels (Elementor/Swiper): pad and keep dots visible */
  .elementor-swiper .swiper-container{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .elementor-swiper .swiper-pagination{
    bottom: 6px !important;
  }
  /* Optional: hide prev/next arrows on tiny screens to reduce clutter */
  .elementor-swiper-button{
    display:none !important;
  }

  /* 8) Videos (YouTube/Vimeo) — keep proper aspect ratio & responsive width */
  .elementor-widget-video iframe,
  .elementor-wrapper iframe{
    width:100% !important;
    height:auto !important;
    aspect-ratio: 16 / 9;
  }

  /* 9) Kill accidental sideways scrolling caused by wide children */
  html, body{
    overflow-x:hidden !important;
  }

  /* 10) Tighten oversized spacers that were set for desktop */
  .elementor-widget-spacer .elementor-spacer-inner{
    height: 16px !important;
  }
}

/* === Mobile only fixes (<=767px) === */
@media (max-width: 767px) {

  /* 1. Move hamburger menu icon to right */
  .elementor-menu-toggle {
    position: absolute !important;
    right: 20px !important;   /* adjust spacing from right */
    left: auto !important;
    top: 20px !important;     /* adjust vertical if needed */
    transform: none !important;
  }

  /* 2. Reposition login link inside nav menu */
  .elementor-nav-menu .menu-item a[href*="login"],
  .elementor-nav-menu .menu-item-logout {
    display: block !important;
    text-align: left !important;
    margin-top: 8px !important;
    font-weight: 600;
    color: #fff !important;   /* adjust color if needed */
  }

  /* Make sure Login is right under About Us */
  .elementor-nav-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;  /* space between menu items */
  }
}/* End custom CSS */