/*
Theme Name: Metalrey Theme
Theme URI: https://metalrey.com.br
Author: Seu Nome
Author URI: https://seusite.com
Description: Tema personalizado para Metalrey
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: metalrey-theme
*/
/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
}

/* Container geral */
.site-header {
  background-color: #1c1c1c;
  color: #fff;
}

.site-footer {
  background-color: #222222 !important;
  color: #fff;
}

.site-footer p {
    text-align: center !important;
}

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  padding: 10px 20px;
}

/* Logo */
.logo img {
  max-height: 40px;
  height: auto;
  width: auto;
}

/* Main Menu */
.menu-area {
	background: var( --wpdevs-gray2 );
}
.main-menu {
    height: 55px;
    display: flex;
    justify-content: center;
}
.main-menu ul {
    margin: 0;
    padding-left: 0;
}
.main-menu ul li {
    display: inline-block;
    line-height: 55px;
    position: relative;
}
.main-menu ul li.current_page_item > a{
    font-weight: bold;
}
.main-menu ul li a {
    color: #FFFFFF;
    padding: 0 30px;
    text-decoration: none;
    display: block;
}
.main-menu ul li a:hover,
.main-menu ul li a:active
{
    color: var( --wpdevs-gray1 );
    transition: .5s all;
}
.main-menu ul li a:focus + ul
{
    display: block;
}

.main-menu ul.sub-menu {
    position: absolute;
    padding-left: 0;
    background-color: #000000;
    z-index: 1;
    text-align: left;
    display: none;
}
.main-menu ul .menu-item-has-children:hover>ul,
.main-menu ul .menu-item-has-children:focus+ul {
    display: block
}
.main-menu ul.sub-menu li {
    width: max-content;
}
.main-menu ul.sub-menu a {
    color: #FFFFFF;
}
.menu-icon,
.check-button {
	cursor: pointer;
	display: none;
}
.menu-icon .bar1, 
.menu-icon .bar2, 
.menu-icon .bar3 {
    width: 28px;
    height: 3px;
    background-color: #FFFFFF;
    margin: 5px 0;
    transition: 0.4s;
}
@media (max-width: 767px){
    .menu-icon,
    .check-button {
		display: block;
	}
    .check-button{
        border: none;
        background: transparent;
        height: 55px;
    }
	.main-menu ul{
		position: absolute;
		width: 100%;
		background: #000000;
		left: -999px;
		text-align: left;
		transition: all cubic-bezier(.79,.14,.15,.86) .5s;
        padding: 0;
        margin: 0;
        z-index: 1;
	}
    .main-menu ul:not(.sub-menu){
        margin-top: 55px;
    }
	.main-menu ul li{
		display: block;
		margin: 15px 0;
		line-height: 30px;
	}
	.main-menu ul li a {
		color: #FFFFFF;
	}
    .main-menu ul.sub-menu{
        position: relative;
        top: 0;
        margin-left: 30px;
        display: block;
        width: auto;
    }
    .main-menu ul.sub-menu a{
        color: var( --wpdevs-gray1 );
    } 
    .show-dropdown{
        left: 0 !important;
    }  
    .animate-button .bar1 {
        -webkit-transform: rotate(-45deg) translate(-4px, 4px);
        transform: rotate(-45deg) translate(-4px, 4px);
    }
    .animate-button .bar2 {opacity: 0;}
    .animate-button .bar3 {
        -webkit-transform: rotate(45deg) translate(-7px, -7px);
        transform: rotate(45deg) translate(-7px, -7px);
    }
}