/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
html, body{
	overflow-x:hidden;
}


.resources_section{
  padding: 32px;
  background: #E4EFFA;
  border-radius: 16px;
}
.resources_section h5{
  margin-top: 0;
  margin-bottom: 8px;
}
.resources_section h4{
  margin-top: 32px;
}
.resources_section hr{
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}
.resources_section ul{
  list-style-type: none;
  padding: 0;
  margin-top: 32px;
  margin-bottom: 32px;
}
.resources_section li:first-child{
  border-top: 1px solid #8DC4EC;  
}
.resources_section li{
  border-bottom: 1px solid #8DC4EC;
  margin-bottom: 0 !important;
  padding-top: 16px;
  padding-bottom: 16px;
}
.resources_section li a{
  color: #164A76;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  font-family: 'Raleway';
}

/* Base styles to ensure list items are styled correctly */
.resource_list_triangle, .resource_list_arrow {
  list-style-type: none;
  padding-left: 0;
}

.resource_list_triangle li, .resource_list_arrow li  {
  position: relative; /* To position arrow relative to li */
  margin-bottom: 10px; /* Or any spacing you'd prefer between list items */
  width: 100%;
  box-sizing: border-box; /* Ensure padding and borders are included in width */
}

/* Style for the arrow icon */
.resource_list_triangle li .arrow-icon, .resource_list_arrow li .arrow-icon {
  display: inline-block;
  vertical-align: middle; /* Align with the anchor tag vertically */
  width: 25px; /* Set this according to the size you want for your arrow */
  height: auto; /* Maintain the aspect ratio of the SVG */
  position: absolute;
  right: 0;
  top: 30px;
  transform: translateY(-50%); /* Center the icon vertically */
}


/* Style for the content-wrapper div */
.resource_list_arrow .content-wrapper, .resource_list_triangle .content-wrapper { 
  width: 100%;
  box-sizing: border-box;
  padding-right: 50px; /* Space for the arrow */
}

.resource_list_triangle li a, .resource_list_arrow li a {
  flex-grow: 1; /* Allow the anchor to grow and take available space */
  text-decoration: none; /* Remove underline */
}

.arrow-icon{
	cursor: pointer;
}

/* SVG Square Positions for responsive */
.cat_square{
  position: absolute;
}
@media only screen and (max-width: 768px) {
  .hero .orange_square, .hero .blue_square, .hero .pink_square{
    display: none;
  }
  .hero .purple_square{
    left: -164px !important;
    top: -144px;
  }
  .hero .yellow_square{
    left: -100px !important;
    top: 363px;
  }
  .hero .green_square{
    right: -140px !important;
    top: -137px;
  }
  .hero .teal_square{
    right: -200px !important;
    top: 357px;
  }
  .faq .orange_square{
    left: -180px !important;
    top: -84px;
  } 
  .faq .purple_square{
    top: -220px !important;
    top: -200px;
  }
  .faq .green_square{
    right: -200px !important;
    top: -137px;
  }
  .faq .blue_square{
    right: -170px !important;
    top: calc(50% - 250px);
  }
  .faq .teal_square{
    right: -170px !important;
    top: calc(70%) ;
  }
  .faq .yellow_square{
    left: calc(50% - 100px) !important;
    top: calc(100% - 50px);
  }
  .faq .pink_square{
    left: -160px !important;
    top: calc(50% - 100px);
  }
}
@media only screen and (min-width: 769px) {
  .hero .orange_square, .faq .orange_square{
    left: calc( 50% - 670px) !important;
    top: -84px;
  }
  .hero .purple_square{
    left: calc( 50% - 300px) !important;
    top: -184px;
  }
  .hero .green_square{
    right: calc( 50% - 450px) !important;
    top: -157px;
  }
  .hero .blue_square{
    right: calc( 50% - 800px) !important;
    top: 36px;
  }
  .hero .teal_square{
    right: calc( 50% - 570px) !important;
    top: 357px;
  }
  .hero .yellow_square{
    left: calc( 50% - 150px) !important;
    top: 363px;
  }
  .hero .pink_square{
    left: calc( 50% - 720px) !important; 
    top: 330px;
  }
  .faq .green_square{
    right: calc( 50% - 600px) !important;
    top: -137px;
  }
  .faq .purple_square{
    left: calc( 50% - 100px) !important;
    top: -200px;
  }
  .faq .blue_square{
    right: calc( 50% - 750px) !important;
    top: calc(50% + 50px);
  }
  .faq .teal_square{
    right: calc( 50% - 600px) !important;
    top: calc(90%);
  }
  .faq .yellow_square{
    left: calc( 50% - 600px) !important;
    top: calc(90%);
  }
  .faq .pink_square{
    left: calc( 50% - 750px) !important; 
    top: calc(50% - 100px);
  }
  .single-post .hero .orange_square {
	 left: calc( 50% - 670px) !important;
     top: -134px;		
  }
  .single-post .hero .purple_square{
    left: calc( 50% - 300px) !important;
    top: -224px;
  }
  .single-post .hero .green_square{
    right: calc( 50% - 450px) !important;
    top: -207px;
  }
  .single-post .hero .blue_square{
    right: calc( 50% - 800px) !important;
    top: -14px;
  }
  .single-post .hero .teal_square{
    right: calc( 50% - 570px) !important;
    top: 307px;
  }
  .single-post .hero .yellow_square{
    left: calc( 50% - 150px) !important;
    top: 313px;
  }
  .single-post .hero .pink_square{
    left: calc( 50% - 720px) !important; 
    top: 280px;
  }
}


/* search  */
.suggestion-post-title, .suggestion-post-content{
    line-height: 1.2;
    font-size: 14px !important;
}
.suggestion-post-title{
	padding-bottom: 4px;
}
.suggestion-post-content{
	font-weight: 400 !important;
}
.aa-dropdown-menu .suggestion-post-thumbnail{
	margin-right: 12px !important;
	margin-bottom: 0 !important;
	width: 40px;
	height: 40px;
}
.aa-suggestion{
	padding: 16px 0 !important;
}