/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/
Description: Child theme for Hello Elementor.
Author: Tesoro Creative
Author URI: https://example.com
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* Put child theme CSS below this line */
a.white {
color:#fff;
}
a.dk-blue {
color:#182B74;
}

a:hover,
a:focus,
a:active {
color:#069BD7;
}

.harc-playcut{
  position:absolute;
  left:0;
  top:0;
  width:300px;
  height:550px;
  display:block;
  z-index:1;
  pointer-events:none;
}

.hero-image{
  position:relative;
  overflow:hidden;
}

.hero-text {
    padding-left:calc(100% - 635px);
}

.has-arrow-down{
  position: relative;
}

.has-arrow-down::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -20px;           /* how far it sticks out */
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #6D4582;
}

.logo-carousel img{
  max-height: 150px;
  max-width: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
}


/* Smoothly animate the container height changes */
.elementor-widget-testimonial-carousel .elementor-main-swiper {
  transition: height 300ms ease !important;
  will-change: height;
}

.elementor-widget-testimonial-carousel .swiper-slide {
padding:0;
}

.elementor-testimonial--align-center .elementor-testimonial {
padding:40px;
}
 
.elementor-item:after,
.elementor-item-active:after {
	width: calc(100% - 40px) !important;
    height: 5px !important;
    border-radius: 5px;
    left: 50%;
    transform: translateX(-50%);
}
.elementor-item-active:after {
transform: none;
}
.e--pointer-double-line .elementor-item:after, .e--pointer-double-line .elementor-item:before, .e--pointer-overline .elementor-item:after, .e--pointer-overline .elementor-item:before, .e--pointer-underline .elementor-item:after, .e--pointer-underline .elementor-item:before {
 margin: 0 20px;
}

html.menu-open, html.menu-open body{
  overflow: hidden !important;
  height: 100%;
}

.menu-item-search{ display:none; }

.infobox b,
.infobox strong {
font-weight:800;
}


.elementor-nav-menu--layout-horizontal .elementor-nav-menu {
    display: flex;
    width: 100%;
}

.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li {
    flex: 1;
}

.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li > a {
    justify-content: center;
    width: 100%;
}
.elementor-nav-menu .sub-arrow {
padding:7px;
}
.menu-item-1560 {
max-width:80px;
}

.footer a {
color:#fff;
}

.footer a:hover {
color:#069BD7;
}

@media (max-width: 1320px){
.hero-text {
    padding-left:20px;
}
.elementor-29 .elementor-element.elementor-element-8810fe9 .elementor-nav-menu--main .elementor-item {
padding-left:7px;
padding-right:6px;
}
.fb_section {
padding:20px;
}
}

@media (max-width: 1024px){
.menu-item.menu-item-search {
 padding: 10px 20px;
 }
  .elementor-nav-menu--dropdown .menu-item-search form{
    position: relative;
	width: 100%;
    box-sizing: border-box;
  }
  
  
    .elementor-nav-menu--dropdown .menu-item-search form label{
	width:100%;
  }

  .elementor-nav-menu--dropdown .menu-item-search form::after{
    content: "\f002";
    font-family: "Font Awesome 5 Free"; /* or Font Awesome 6 Free */
    font-weight: 900;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #666;
    pointer-events: none;
  }

  .elementor-nav-menu--dropdown .menu-item-search input[type="search"]{
    width: 100%;
        background-color: #EAF4FF;
        border-radius: 5px;
        border: none;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 0.5px;
        padding: 15px;
  }
  

  /* Style submit as icon overlay */
  .elementor-nav-menu--dropdown .menu-item-search input[type="submit"]{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    width:24px;
    height:24px;
    padding:0;
    border:0;
    background:transparent;
    font-size:0; /* hide text */
    cursor:pointer;
  }

  /* Magnifying glass icon */
  .elementor-nav-menu--dropdown .menu-item-search input[type="submit"]::before{
    content:"\1F50D"; /* 🔍 */
    font-size:18px;
    line-height:1;
    color:#555;
  }
  .menu-item-search .search-submit{
  display: none;
}
  /* Fullscreen overlay panel */
  .elementor-nav-menu--dropdown{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--header-h, 80px) !important;  /* set to your header height */
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    transform: none !important;
    z-index: 999999 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .elementor-nav-menu--dropdown ul{
    width: 100% !important;
  }
}


@media (max-width:768px) {

  .elementor-nav-menu .sub-menu > .nav-back-item {
    display: block;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }

  .elementor-nav-menu .sub-menu > .nav-back-item > a.nav-back-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    font-weight: 600;
    text-decoration: none;
  }

  .elementor-nav-menu .sub-menu > .nav-back-item > a.nav-back-link::before {
    content: "←";
    font-size: 18px;
    line-height: 1;
  }
  
  
  
  
  /* MAIN mobile dropdown panel */
  .elementor-nav-menu--dropdown {
    /* Start hidden (we'll "open" it via aria-hidden=false) */
    opacity: 0;
    transform: translateX(-100px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 400ms ease, transform 400ms ease, visibility 0s linear 400ms;
    will-change: opacity, transform;
  }

  /* When Elementor/SmartMenus says it's open */
  .elementor-nav-menu--dropdown[aria-hidden="false"] {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;

    transition: opacity 400ms ease, transform 400ms ease, visibility 0s;
  }

  /* SUBMENUS: same effect */
  .elementor-nav-menu--dropdown .sub-menu {
    opacity: 0;
    transform: translateX(-100px);
    visibility: hidden;
    pointer-events: none;

    transition: opacity 400ms ease, transform 400ms ease, visibility 0s linear 160ms;
    will-change: opacity, transform;
  }

  .elementor-nav-menu--dropdown .sub-menu[aria-hidden="false"],
  .elementor-nav-menu--dropdown .sub-menu[style*="display: block"] {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;

    transition: opacity 400ms ease, transform 400ms ease, visibility 0s;
  }


  ul.elementor-nav-menu--dropdown:not(.sub-menu) {
    opacity: 0;
    transform: translateX(-100px);
    visibility: hidden;
    pointer-events: none;

    transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
    will-change: opacity, transform;
  }

  ul.elementor-nav-menu--dropdown:not(.sub-menu)[aria-hidden="false"] {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;

    transition: opacity 160ms ease, transform 160ms ease, visibility 0s;
  }
  
  /* Optional: reduce motion for users who request it */
  @media (prefers-reduced-motion: reduce) {
    .elementor-nav-menu--dropdown,
    .elementor-nav-menu--dropdown .sub-menu {
      transition: none !important;
      transform: none !important;
    }
  }
  

  /* =========================
     SUBMENUS (keep positioning stable)
     Don’t translate the UL itself.
     Animate the LI items inside.
  ========================== */
  ul.sub-menu.elementor-nav-menu--dropdown {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 160ms ease, visibility 0s linear 160ms;
    will-change: opacity;
  }

  ul.sub-menu.elementor-nav-menu--dropdown[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition: opacity 160ms ease, visibility 0s;
  }

  /* Animate submenu items for the slide-from-left feel */
  ul.sub-menu.elementor-nav-menu--dropdown > li {
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 160ms ease, transform 160ms ease;
    will-change: opacity, transform;
  }

  ul.sub-menu.elementor-nav-menu--dropdown[aria-hidden="false"] > li {
    opacity: 1;
    transform: translateX(0);
  }

  /* Your injected Back item should behave like a normal LI */
  .elementor-nav-menu .sub-menu > .nav-back-item > a.nav-back-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    font-weight: 600;
    text-decoration: none;
  }

  .elementor-nav-menu .sub-menu > .nav-back-item > a.nav-back-link::before {
    content: "←";
    font-size: 18px;
    line-height: 1;
  }

  /* Accessibility: respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    ul.elementor-nav-menu--dropdown:not(.sub-menu),
    ul.sub-menu.elementor-nav-menu--dropdown,
    ul.sub-menu.elementor-nav-menu--dropdown > li {
      transition: none !important;
      transform: none !important;
    }
  }

  /* FIX: Submenus in Elementor have elementor-nav-menu--dropdown too,
     so they were getting transformed/shifted like the main panel.
     Neutralise transforms on the submenu UL itself to keep positioning stable. */
  ul.sub-menu.elementor-nav-menu--dropdown {
    transform: none !important;
    top: 0 !important;   /* optional safety */
    left: 0 !important;  /* optional safety */
  }

  /* Keep submenu visibility logic, but don’t move the UL */
  ul.sub-menu.elementor-nav-menu--dropdown {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  ul.sub-menu.elementor-nav-menu--dropdown[aria-hidden="false"],
  ul.sub-menu.elementor-nav-menu--dropdown[style*="display: block"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  

.hero-text {
    padding-left:0;
}    
.logo-carousel img{
  max-height: 100px;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.elementor-testimonial--align-center .elementor-testimonial {
padding:20px;
}
.donate_mobile_btn a {
    background-color: #182B74;
    font-family: "Roboto", Sans-serif;
	font-weight: 900 !important;
    letter-spacing: 0.5px !important;
    fill: #FFFFFF;
	color: #FFFFFF !important;
	border-radius: 6px 6px 6px 6px;
	padding: 12px 24px 12px 24px;
	margin: 20px;
	display: flex;
  	justify-content: center;
  	align-items: center;
    }
    
    .donate_mobile_btn a:hover {
    background-color: #069BD7;

    }
}



.question-bg {
  position: relative;
  overflow: hidden; /* prevents scrollbars */
}

.question-bg::after {
  content: "?";
  position: absolute;
  right: 20px;
  top: 46%;
  transform: translateY(-50%);
  font-family:Roboto Slab;
  font-size: 420px;
  font-weight: 900;
  line-height: 1;
  color: #DB828A; /* subtle */
  pointer-events: none;
  z-index: 0;
}

.question-bg.orange::after {  
  color: #CA8B56; /* subtle */
}

.question-bg.navy::after {  
  color: #5A69A5; /* subtle */
}


/* Make sure content sits above it */
.question-bg > .elementor-container {
  position: relative;
  z-index: 1;
}

@media (max-width:1024px) {
    .question-bg::after {
  top:180px;
}
}
@media (max-width:767px) {
    .question-bg::after {
  top:145px;
  font-size:300px;
}
}


.inline {
  display: inline-block;
  width: auto!important;
}

.elementor-widget-n-accordion .e-n-accordion-item-title { 
 justify-content:space-between;   
}
.e-n-accordion-item > .e-con, .e-n-accordion-item .e-n-accordion-item-content {
    border:0px!important;
}

/* Closed state: full rounded title */
.e-n-accordion-item-title {
  border-radius: 20px !important;
  border:0px!important;
}

/* Open state: title only rounded on top */
.e-n-accordion-item[open] .e-n-accordion-item-title,
.e-n-accordion-item[aria-expanded="true"] .e-n-accordion-item-title,
.e-n-accordion-item.elementor-active .e-n-accordion-item-title {
  border-radius: 20px 20px 0 0 !important;
}

.e-n-accordion-item-title-text {
  padding: 0 20px;
}

/* Open state: content gets bottom corners */
.e-n-accordion-item > .e-con,
.e-n-accordion-item .e-n-accordion-item-content {
  border-radius: 0 0 20px 20px !important;
  overflow: hidden;
}

.e-n-accordion-item > .e-con, .e-n-accordion-item .e-n-accordion-item-content .elementor-element .elementor-element {
  font-size:20px;
}

.notepad-box{
    position: relative;
    padding-top: 60px; /* space for the dots */
}

.notepad-box::before{
    content: "";
    position: absolute;
    top: 25px;
    left: 0;
    width: 100%;
    height: 40px;
    
    background-image: radial-gradient(circle, #fff 20px, transparent 11px);
    background-size: 70px 40px; /* spacing between dots */
    background-repeat: repeat-x;
    background-position: center;
}
@media (max-width:767px) {
  .notepad-box::before{
    height: 30px;
    background-image: radial-gradient(circle, #fff 15px, transparent 11px);
    background-size: 60px 30px; /* spacing between dots */
}  
}