/*
Theme Name: olympia
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.0
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/
/* body header {
  background-color: #4BC5EF !important;
} */
.article-slider,
.brand-slider {
  margin-bottom: 0 !important;
}

.article-slider .slick-dots,
.brand-slider .slick-dots {
  bottom: 20px;
  left: 20px;
  width: auto;
}

.article-slider .slick-dots li button,
.brand-slider .slick-dots li button {
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  background-color: #777;
  border-radius: 50px;
  padding: 0;
}

.article-slider .slick-dots li.slick-active button,
.brand-slider .slick-dots li.slick-active button {
  background-color: #000000;
}

.article-slider .slick-dots li button::before,
.brand-slider .slick-dots li button::before {
  font-size: 0;
}

.article-slider .slick-dots li,
.brand-slider .slick-dots li {
  width: auto;
  height: auto;
  margin: 0 3px;
}

.slider .slick-next {
  right: 10px;
}

.slider .slick-prev {
  left: 10px;
  z-index: 9;
}

.article-slider .slick-prev::before,
.article-slider .slick-next::before,
.brand-slider .slick-prev::before,
.brand-slider .slick-next::before {
  color: #000;
}

.article-slider .slick-arrow,
.brand-slider .slick-arrow {
  transition: all 0.3s ease;
  opacity: 1;
  color: red !important;
}

@media (min-width: 1024px) {
  .article-slider .slick-slide,
  .brand-slider .slick-slide {
    margin: 0 20px;
  }
}

.article-slider .slick-prev,
.brand-slider .slick-prev {
  left: 0px;
  z-index: 9;
}

.article-slider .slick-next,
.brand-slider .slick-next {
  right: 0px;
}

.slick-prev:before,
.slick-next:before {
  display: none;
}

.slick-prev,
.slick-next {
  width: 40px; /* Default size */
  height: 40px; /* Default size */
  display: flex; /* Center SVG */
  align-items: center; /* Center SVG */
  justify-content: center; /* Center SVG */
}

@media (max-width: 640px) {
  .slick-prev,
  .slick-next {
    width: 15px; /* Increased size */
    height: 15px; /* Increased size */
  }
}
/* Style for the active menu item */
/* #mobile-menu-2 .current-menu-item {
  background-color: #f8b000 !important;
  border-radius: 0.25rem;
} */

.current-menu-item a span {
  color: #ffffff !important; /* Changes text color for active item */
  font-weight: bold;
}

.current-menu-item .sub-menu a span {
  font-weight: normal; /* Removes bold from submenu items */
}

@media (min-width: 1024px) {
  .current-menu-item {
    background-color: transparent !important;
  }
}

/* Remove bullets and extra padding from the menu */
/* Ensure the menu items don't wrap to multiple lines */
ul {
  list-style-type: none; /* Remove bullet points */
  padding-left: 0; /* Remove default padding */
  margin: 0; /* Remove any default margins */
}

li {
  display: inline-flex; /* Ensure the menu items are inline and stay on one row */
}

/* Optional: Style for active menu items */
.current-menu-item a {
  color: #FBB216; /* Active link color */
}
/* Add margin to the first and last menu items */
.footer-menu li {
  margin-right: 20px;
}
.footer-menu-2 li:first-child::after {
  content: "|";
}

.footer-menu-2 .current-menu-item a span {
  color: #FBB216 !important; /* Changes text color for active item */
}
.current-menu-item span {
  color: #ff0000; /* Change color as desired */
  /* font-weight: bold; */
}

#menu-main-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu-main-menu > li {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

@media (max-width: 1024px) {
  #menu-main-menu > li {
    padding-bottom: 0px !important;
  }

  #mobile-menu-2 .current-menu-item {
    background-color: #f8b000 !important;
    border-radius: 0.25rem;
  }
}

/* Submenu styling */
#menu-main-menu li ul {
  display: none; /* Hide submenu by default */
  position: absolute;
  top: 100%; /* Position submenu directly below the parent item */
  left: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: white; /* Background color for the submenu */
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
  z-index: 10;
  border-radius: 0.375rem;
}

/* Submenu items */
#menu-main-menu li ul li {
  width: 200px; /* Set width of submenu */
}

#menu-main-menu li ul li a {
  padding: 10px;
  background-color: white;
  color: #000; /* Text color of the submenu */
  text-decoration: none;
  display: block;
  width: 100%;
  border-radius: 0.375rem;
}

#menu-main-menu li.menu-item-has-children {
  margin-right: 15px;
}

/* Add the dropdown arrow */
#menu-main-menu li.menu-item-has-children > a span::after {
  content: ""; /* No text, just an arrow */
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid #000; /* Left-pointing arrow */
  margin-left: 12px;
  margin-top: 6px;
  transition: transform 0.3s ease;
  position: absolute;
  transform: rotate(270deg);
}

.current-menu-item.menu-item-has-children a span::after {
  border-right: 5px solid #fff !important;
}

/* #menu-main-menu li.menu-item-has-children:hover {
  margin-bottom: 10px;
} */

#menu-main-menu li.menu-item-has-children:hover > a span::after {
  position: absolute;
  transform: rotate(90deg); /* Apply rotation */
  border-right: 5px solid #fff;
}

#menu-main-menu li ul li a span {
  color: #000 !important; /* Text color of the submenu */
}

/* Hover effect on submenu items */
#menu-main-menu li:hover > ul {
  display: block; /* Show submenu on hover */
}

#menu-main-menu li ul li a:hover {
  background-color: #f4f4f4; /* Light background on hover */
  color: #000; /* Change text color on hover */
}

#menu-main-menu li ul li a span:hover {
  color: #000 !important; /* Change text color on hover */
}

#popupModal.hidden {
  display: none;
}

#popupModal {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}