/* 
=====================================
HEADER styling
=====================================
*/

header
{ 
  background: var(--primary-color); 
  padding: 20px;
  margin-right: 0;
  margin-left: 0;
  margin-top: 0;

  /*-webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;*/
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.top-header-div
{
  background: var(--background-secondary-color);
  width:100%;
  padding: 10px 20px 10px 20px;
  margin: 0;
  display: inline-flex;
  /*display: none;*/
  justify-content: end;

  -webkit-transition: -webkit-transform .4s 0s, visibility 0s 0s;
  -moz-transition: -moz-transform .4s 0s, visibility 0s 0s;
  transition: transform .4s 0s, visibility 0s 0s;
  
}

.header{ display:flex; justify-content: space-between; align-items: center;}

.header div
{
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.header-logo { height: 70px; width: auto;}

/* Basic styling for the PC navigation menu */

#cd-top-nav {
  overflow: visible; /* Ensure sub-menus are visible */
  display: flex;
  justify-content: center;
}

#cd-top-nav svg {
  width: 15px;
  height: 12px;
  color: white;
  fill: currentColor;
  margin-left: 5px;
}

#cd-top-nav .pc-sub-container
{
  display: inline-flex;
  align-items: center;
}

#cd-top-nav .f-header__link
{
  cursor: pointer;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color:var(--secondary-color);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 7px;
  margin-right: 16px;
  font-size: 10px;
  color:var(--text-color);
}

#cd-top-nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  overflow: visible; /* Ensure sub-menus are visible */
  gap: 20px;
}





#cd-top-nav ul li {
  position: relative;
  margin: 0;
  padding: 0;
}

#cd-top-nav ul li a:not(.cta-button) {
  display: block;
  text-align: center;
  padding: 16px 0 16px 1.5rem;
  font-size: 16px;
}


/* Target the first <li> within a <ul> inside #cd-top-nav, excluding those with 'sub' or 'pc-sub-menu' classes */
#cd-top-nav ul li:first-child:not(.sub):not(.pc-sub-menu) {
  padding-right: 8px;
}

/* Specifically exclude child elements */
#cd-top-nav ul li:first-child > a {
  padding-right: 8px;
}

/* Reset padding for nested lists */
#cd-top-nav ul li.sub .pc-sub-menu li:first-child {
  padding-right: 0;
}


/* Sub-menu styling */
#cd-top-nav ul li .pc-sub-menu a{color: var(--text-color); font-weight: revert;}

#cd-top-nav ul li.sub .pc-sub-menu {
  display: none;
  position: absolute;
  /*top: 48px;*/ /* Adjust based on your main menu item height */
  left: 0;
  background-color: var(--secondary-color);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  z-index: 1000; /* Ensure the sub-menu appears above other elements */
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

#cd-top-nav ul li a {color: var(--background-primary-color); font-weight: 600;}
#cd-top-nav ul li a:hover { color: var(--active-color);}

#cd-top-nav ul li .pc-sub-menu a:hover,
#cd-lateral-nav .sub-menu a:hover
{color: var(--background-primary-color); background-color: var(--active-color);}

/* For PC hover */
#cd-top-nav ul li.sub:hover > .pc-sub-menu
{
  display: block;
}

#cd-top-nav ul li.sub .f-header__link:hover{color:var(--active-color);}

/* For mobile touch */ 
/*@media screen and (max-width: 768px) 
{ */
  #cd-top-nav ul li.sub .f-header__link:active .pc-sub-menu, 
  #cd-top-nav ul li.sub .f-header__link:focus .pc-sub-menu 
  { display: block; } 
  
  #cd-top-nav ul li.sub .f-header__link:focus-within .pc-sub-menu 
  { display: block; } 
/*}*/


#cd-top-nav ul li.sub .pc-sub-menu li {
  float: none;
  position: relative;
}

#cd-top-nav ul li.sub .pc-sub-menu li a {
  padding: 12px 16px;
}



.pc-set{display: none;}

/* SECONDARY MENU */

#cd-menu-trigger 
{
  display: inline-flex;
  gap: 10px;
  align-items: center;
  text-align: center;
  font-weight:600;
  margin-left: 5px;
}

#cd-menu-trigger span
{
  display: flex; 
  flex-direction: column; 
  justify-content: space-around; 
  width: 35px; 
  height: 25px; 
  cursor: pointer; 
  text-decoration: none;
}

#cd-menu-trigger div 
{ 
  display: block; 
  width: 100%; 
  height: 4px; 
  background-color: white; 
  border-radius: 2px; 
}

#cd-menu-trigger:hover{ color: #0dff92}
#cd-menu-trigger:hover div{ background-color: var(--active-color); } 

#cd-menu-trigger .active div:nth-child(1) { transform: translateY(10px) rotate(45deg); } 
#cd-menu-trigger .active div:nth-child(2) { opacity: 0; }
#cd-menu-trigger .active div:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

#cd-lateral-nav 
{
  position: fixed;
  height: 100%;
  right: 0;
  top: 0;
  visibility: hidden;
  /* the secondary navigation is covered by the main element */
  z-index: 1;
  width: 260px;
  background-color: var(--primary-color);
  overflow-y: auto;

  /* Force Hardware Acceleration in WebKit */
  /*-webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -webkit-transition: -webkit-transform .4s 0s, visibility 0s .4s;
  -moz-transition: -moz-transform .4s 0s, visibility 0s .4s;
  transition: transform .4s 0s, visibility 0s .4s;*/

  /* Force Hardware Acceleration in WebKit */ 
  -webkit-transform: translateZ(0); 
  -webkit-backface-visibility: hidden; 
  -webkit-transition: -webkit-transform 0.5s ease, visibility 0s 0s; 
  -moz-transition: -moz-transform 0.5s ease, visibility 0s 0s; 
  transition: transform 0.5s ease, visibility 0s 0s;


  /* this creates the subtle slide in animation of the navigation */
  -webkit-transform: translateX(80px);
  -moz-transform: translateX(80px);
  -ms-transform: translateX(80px);
  -o-transform: translateX(80px);
  transform: translateX(80px);

  box-shadow: -1px 0 4px rgba(0, 0, 0, 0.75);
}

/*.cd-main-content */
.lateral-menu-is-open 
{
  /* translate to show the lateral menu - all content needs to have the .lateral-menu-is-open class to translate*/
  -webkit-transform: translateX(-260px);
  -moz-transform: translateX(-260px);
  -ms-transform: translateX(-260px);
  -o-transform: translateX(-260px);
  transform: translateX(-260px); 

  -webkit-transition: -webkit-transform .4s 0s, visibility 0s 0s;
  -moz-transition: -moz-transform .4s 0s, visibility 0s 0s;
  transition: transform .4s 0s, visibility 0s 0s;

  .cta-button, main, aside, #cd-top-nav, .footer-logo, .footer-menu, .footer-social, .footer-bottom {filter: blur(2px); opacity: 0.3; pointer-events: none;}

}

#cd-lateral-nav .cd-navigation 
{
  margin: 28px 0 16px;
}

#cd-lateral-nav a 
{
  display: block;
  line-height: 2em;
  padding: 0 16px 0 32px;
}

#cd-lateral-nav .sub-menu 
{
  display: none;
  background-color: var(--secondary-color);
  /* Inner shadow on the top and bottom */
  /* Slim and subtle inner shadow on the top and bottom */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.75),  /* Top inner shadow */
              inset 0 -1px 2px rgba(0, 0, 0, 0.75); /* Bottom inner shadow */


}

#cd-lateral-nav .sub-menu a
{
  padding: 0 0 5px 60px;
  color: var(--text-color);
}


/*.sub-menu li:first-child a{
  padding-top: 20px;
}

.sub-menu li:last-child a{
  padding-bottom: 20px;
}*/
  
/* style menu items which have a submenu  */
#cd-lateral-nav .item-has-children .arrow-container > a,
#cd-lateral-nav .no-child > a 
{
  position: relative;
  font-weight: 600;
  /*margin: 10px 0 10px 0;*/
  width:200px;
}

.arrow-container{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
}

.arrow-container .arrow-icon{
  font-weight: 900;
  cursor: pointer;
  padding:13px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;

  color:var(--secondary-color);
}

.arrow-container .arrow-icon:hover{
  color: var(--active-color);
  background-color:var(--secondary-color);
}

#cd-lateral-nav .socials 
{
  padding: 0 32px;
  display: inline-flex;
  gap: 10px;
  
}

#cd-lateral-nav .socials a 
{
  text-align: center;
  color: var(--background-primary-color);
  background-color: var(--active-color);
  border-radius: 0.25em;
  display:list-item;
  padding: 5px;
  list-style: none;
}

#cd-lateral-nav .socials a:hover 
{
  background: var(--background-primary-color);
  color: var(--active-color);
}

#cd-lateral-nav .pc-menu
{
  display: none;
}


#cd-lateral-nav .item-has-children, 
#cd-lateral-nav .no-child
{ margin-bottom:5px; }


/* Hide the menu on mobile screens */
@media screen and (max-width: 900px) 
{
  #cd-top-nav 
  {
    display: none;
  }

  .pc-set 
  {
    display: block;
  }

  #cd-lateral-nav .pc-menu
  {
    display: revert;
  }

  #cd-lateral-nav .cd-navigation 
  {
    margin: 20px 0 16px;
  }

}

.phone-link, .whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* space between icon and text */
  color: #2563eb;
  /* blue-600 */
  text-decoration: none;
  font-size: 1.1rem;
  transition: color 0.3s ease;
}

.phone-link:hover, .whatsapp-link:hover {
  color: #1e40af;
  /* blue-800 */
}

.whatsapp-link{
 padding-right:20px!important;
  /* blue-800 */
}


/* Call-To-Action Button Style */
.cta-button {
  display: inline-block;
  padding: 0.75em 1.5em;
  border-radius: 20px;
  text-align: center;
  
  background-color: var(--active-color); /* bright, warm color */
  color: white;
  font-weight: bold;
  font-size: 1rem;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.cta-button:hover {
  background-color: var(--background-primary-color); /* slightly darker on hover */
  color:var(--active-color);
  transform: translateY(-2px);
}

/* Optional: Make sure parent <li> doesn’t interfere */
li.sub {
  list-style: none;
}


/* #cd-lateral-nav .arrow-container .current{ color: var(--active-color); }
#cd-lateral-nav .sub-menu .current{ background-color: var(--active-color); color: var(--background-primary-color); }

#cd-top-nav .pc-sub-container .current{ color: var(--active-color); }
#cd-top-nav ul li .pc-sub-menu .current{ color: var(--background-primary-color); background-color: var(--active-color); } */
.current{ color: var(--active-color)!important;}
#cd-top-nav ul .sub .pc-sub-menu li a.current:hover{ color: var(--background-primary-color)!important;}


/* ________________________________________________ */
/* li.menu-child .arrow-container{
  gap:0;
  width:100%;
  justify-content: center;
  padding-right: 10px;
  padding-left: 10px;
}
li.menu-child .arrow-container a{
  width:100%;
}


li.menu-child .sub-menu{
  
  background-color: var(--secondary-color);
}

li.menu-child .arrow-container a{
  
  color: var(---background-primary-color)!important;
}

li.menu-child:hover .arrow-container{
  color: var(--background-primary-color)!important;
}

li.menu-child:hover{
  background-color: var(--active-color);

}

li.menu-child .sub-menu a{
  font-size:13px!important;
} */