/* 
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
*/

:root {
  --wpforms-button-background-color: #1c23ba !important;
}

html,
body {
  font-size: 18px;
}

body.modal-open {
  overflow: clip;
}

img {
  vertical-align: middle;
}

a {
  transition: opacity .5s cubic-bezier(.25, 1, .5, 1);
  text-decoration: none;
}

a:hover {
  opacity: 0.4;
}

.comments-area a,
.page-content a {
  text-decoration: none;
}

.mt-auto {
  margin-top: auto;
}

.position-static {
  position: static;
}

#masthead {
  color: var(--e-global-color-accent);
  position: sticky !important;
  top: 0
}

#masthead a:hover {
  color: #fff;
}

#masthead .elementor-icon {
  vertical-align: middle;
}

#masthead svg,
#masthead svg * {
  transition: all 0.3s ease;
  vertical-align: middle;
}

.body_overlay {
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  position: fixed;
  inset: 0;
  transition: all 0.3s ease;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
}

.body_overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Side Menu - Desktop */
.hndsm_side_menu_modal {
  position: fixed;
  background-color: var(--e-global-color-primary);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  top: 0;
  right: 0;
  width: 40rem;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: all 0.5s cubic-bezier(0.4, 0, 0, 1);
}

.hndsm_side_menu_modal.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.hndsm_side_menu_icon {}

.hndsm_side_menu_icon:hover {
  cursor: pointer;
}

.hndsm_side_menu_icon:hover svg rect {
  color: #fff;
}

.hndsm_side_menu_modal_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 6rem;
  padding: 1.5rem;
}

.hndsm_side_menu_modal_header button {
  all: unset;
  transition: 0.3s ease all;
  cursor: pointer;
}

#masthead .hndsm_side_menu_modal_header button:hover svg rect {
  fill: #fff;
}

.hndsm_side_menu_modal_content {
  height: 100%;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hndsm_side_menu_modal_content::-webkit-scrollbar {
  display: none;
}


.hndsm_side_menu_modal ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0rem;
}

.hndsm_side_menu_modal ul li {
  width: 100%;
  border-top: 1px solid #354361;
}

.hndsm_side_menu_modal ul li a {
  padding: 0.75rem 1.5rem;
  display: inline-block;
  color: var(--e-global-color-accent);
  width: 100%;
}


/* Article Grid */
.hndsm_article_grid {
  display: flex;
  gap: 3rem;
}

.hndsm_article_grid_column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  position: relative;
}

.hndsm_article_grid_column.highlighted {
  flex: 2;
}

.hndsm_article_grid_column+.hndsm_article_grid_column::before {
  background-color: #0a152b1a;
  height: 100%;
  width: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1.5rem;
  content: "";
}

.hndsm_article_grid_column h3 {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.75rem;
  line-height: 1.1;
}

.hndsm_article_grid_column a:hover h3 {
  color: var(--e-global-color-f142664);
  transition: 0.3s ease all;
}

.hndsm_article_grid_column.highlighted h3 {
  font-size: 2.5rem;
}

.hndsm_article_grid_column_post a.hndsm_article_grid_column_post_image {
  display: inline-block;
  width: 100%;
}

.hndsm_article_grid_column_post img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
}

.hndsm_article_grid_column_post {
  position: relative;
  flex: 1;
}

.hndsm_article_grid_column_post+.hndsm_article_grid_column_post::before {
  background-color: #0a152b1a;
  height: 1px;
  width: 100%;
  position: absolute;
  top: -1.5rem;
  left: 0;
  right: 0;
  content: "";
}

.hndsm_article_grid_column_event {
  background-color: #fff;
  position: relative;
  padding: 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hndsm_article_grid_column_event:hover {
  background-color: var(--e-global-color-accent);
}


.hndsm_article_grid_column_event h3 {
  font-family: "Inter", sans-serif;
  font-size: 1.5rem;
}

#page .hndsm_article_grid_column_event:hover * {
  color: #0A152B;
}

.hndsm_article_grid_column_post_header {}

.hndsm_article_grid_column_post_footer {
  margin-top: 3rem;
}

.tag-links a {
  border: 1px solid var(--e-global-color-f142664);
  color: var(--e-global-color-f142664);
  padding: 0.25rem 0.5rem;
  text-transform: uppercase;
  display: inline-block;
  font-size: 0.6rem;
  font-weight: bold;
  letter-spacing: 1px;
  margin-top: 0.5rem;
  transition: 0.3s ease all;
}

.tag-links a:hover {
  color: #fff;
  background-color: var(--e-global-color-f142664);
}

/* Swiper */
.swiper {
  user-select: none;
  display: flex;
  flex-direction: row !important;
}

.swiper-slide {
  display: flex !important;
  flex-shrink: 0 !important;
  will-change: opacity;
  /* opacity: 0.3; */
  transition: 0.8s ease-in all !important;
}

.swiper-main .swiper-slide {
  height: 600px;
}

.swiper-main .swiper-slide .elementor-element {
  height: 100%;
}

.swiper-main .swiper-slide .elementor-element img {
  height: 100%;
  width: auto;
  object-fit: contain;
}


@media (max-width: 1024px) {
  .hndsm_article_grid {
    flex-direction: column;
  }

  .hndsm_article_grid_column {
    flex-direction: row;
  }

  .hndsm_article_grid_column_event {
    flex-direction: column;
  }

  .hndsm_article_grid_column_post+.hndsm_article_grid_column_post::before {
    width: 1px;
    height: 100%;
    top: 0;
    bottom: 0;
    left: -1.5rem;
  }
}

@media (max-width: 768px) {

  html,
  body {
    font-size: 16px;
  }

  .hndsm_article_grid_column {
    flex-direction: column;
  }

  .hndsm_article_grid_column h3 {
    font-size: 1.5rem;
  }

  .hndsm_article_grid_column.highlighted h3 {
    font-size: 1.75rem;
  }

  .hndsm_article_grid_column p {
    font-size: 1rem;
  }
}