/* FONT */

@font-face {
  font-family: imperator;
  src: url(../fonts/Imperator.ttf);
}

/* VARIABLES */

:root{
    --header-height: 4rem;
    --font-semi: 600;
}
:root{
    --body-font: 'Poppins', sans-serif;
    --big-font-size: 2.5rem;
    --h2-font-size: 2rem;
    --h3-font-size: 1.7rem;
    --h4-font-size: 1.4rem;
    --h5-font-size: 1.1rem;
    --normal-font-size: 0.938rem;
    --small-font-size: 0.738rem;
}
@media screen and (min-width: 960px){
    :root{
        --big-font-size: 3rem;
        --h2-font-size: 2.45rem;
        --h3-font-size: 2.05rem;
        --h4-font-size: 1.65rem;
        --h5-font-size: 1.25rem;
        --normal-font-size: 1rem;
        --small-font-size: 0.8rem;
    }
}
:root{
    --mb-1: 0.5rem;
    --mb-2: 1rem;
    --mb-3: 1.5rem;
    --mb-4: 2rem;
    --mb-5: 2.5rem;
    --mb-6: 3rem;
}
:root{
    --z-back: -10;
    --z-normal: 1;
    --z-tooltip: 10;
    --z-fixed: 100;
}

/* BASE */

*,::before,::after{
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}
body{
    margin: 0 0 0 0;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    color: var(--fourth-color);
    overflow-x: hidden !important;
    top: 0px !important; 
}
h1,h2,p{
    margin: 0;
}
p, li{
    line-height: 25px;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
a{
    text-decoration: none;
}
img{
    max-width: 100%;
    height: auto;
    display: block;
}
.brand-name{
  font-family: 'Imperator';
}
  
/* CLASS CSS */
  
.section{
    padding-top: 5rem;
    position: relative;
}

/* LAYOUT */
  
.bd-grid{
    max-width: 1124px;
    display: grid;
    grid-template-columns: 100%;
    grid-column-gap: 2rem;
    width: calc(100% - 2rem);
    margin-left: var(--mb-2);
    margin-right: var(--mb-2);
}
.col-2{
    max-width: 1124px;
    display: grid;
    grid-column-gap: 2rem;
    width: calc(100% - 0rem);
}
.l-header{
  width: 100%;
  position: fixed;
  z-index: var(--z-fixed);
  background-color: #8E1537;
  transition: box-shadow 1s ease-in-out, background-color 1s ease-in-out;
}
.l-header.scrolled{
  box-shadow: rgba(142, 21, 55, 0.3) 0px 6px 10px, rgba(142, 21, 55, 0.2) 0px 2px 4px;
  background-color: #8E1537;
  transition: box-shadow 1s ease-in-out, background-color 1s ease-in-out;
}
.l-header.scrolled .nav{
  height: calc(var(--header-height) + 0rem);
  transition: height 1s ease-in-out;
}

/* NAV */
  
.nav{
    height: calc(var(--header-height) + 1rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: var(--font-semi);
    transition: height 0s ease 0s;
}
.nav .nav-item{
    margin-bottom: var(--mb-4);
}
.nav .nav-link{
    position: relative;
    color: #FFF;
    line-height: 40px;
    -webkit-tap-highlight-color: transparent;
  }
.nav .nav-link:hover{
    position: relative;
    color: #977124;
}
.nav .nav-social-media{
  display: flex;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
}
.nav .header-menu-mobile{
  display: none;
}
.nav .nav-logo img{
    width: 10rem;
}
.nav .nav-logo{
    -webkit-tap-highlight-color: transparent;
}
.nav .nav-toggle{
    color: var(--third-color);
    font-size: 1.5rem;
    width: 30px;
    height: 30px;
    display: block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.nav .nav-link.active{
  color: #977124;
}
.nav .show{
    left: 0 !important;
}

/* FOOTER */

.l-footer{
    background-color: #8E1537;
    width: 100%;
    overflow: hidden !important;
    padding: 20px 0;
    position: relative;
    z-index: 2;
}
.l-footer p{
    line-height: 25px;
}
.l-footer .footer-text-container{
    margin-top: var(--mb-6);
    margin-bottom: var(--mb-6);
}
.l-footer .footer-col-3{
    grid-template-columns: repeat(3,1fr);
    max-width: 1124px;
    display: grid;
    grid-column-gap: 2rem;
    width: calc(100% - 2rem);
}
.l-footer .footer-text-container .footer-1 img{
    width: 10rem;
    margin-bottom: var(--mb-4);
}
.l-footer .footer-text-container p,
.l-footer .footer-text-container a{
    color: #FFF;
}
.l-footer .footer-text-container .footer-2 li,
.l-footer .footer-text-container .footer-3 li{
    line-height: 2rem;
}
.l-footer .footer-text-container .footer-2 li a,
.l-footer .footer-text-container .footer-3 li a{
    -webkit-tap-highlight-color: transparent;
    font-family: 'Poppins', sans-serif;
}
.l-footer .footer-text-container .footer-2 li a:hover,
.l-footer .footer-text-container .footer-3 li a:hover{
  color: #977124;
}
.l-footer .footer-title{
    font-size: var(--h5-font-size);
    color: #977124;
    margin-top: 0;
    margin-bottom: 2.5rem;
    text-align: left;
    font-family: 'Poppins', sans-serif;
}
.l-footer .footer-contact-mobile{
    display: none;
}

/* ================ MEDIA QUERY ================ */

@media screen and (max-width: 960px){

    /* NAV */
  
    .nav.bd-grid{
      grid-column-gap: 1rem;
    }
    .nav .nav-menu{
      position: fixed;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      padding: 0;
      background-color: #FFF;
      transition: .5s;
      z-index: 3;
    }
    .nav .header-menu-mobile{
      display: flex;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #FFF;
    }
    .nav .header-menu-mobile .nav-logo-mobile{
      display: inline-block;
      margin: 2rem 2rem;
      float: left;
      -webkit-tap-highlight-color: transparent;
    }
    .nav .header-menu-mobile .nav-close-mobile{
      display: inline;
      margin: 0 2rem 0 auto;
      float: right;
      -webkit-tap-highlight-color: transparent;
      cursor: pointer;
    }
    .nav .hamburger{
      -webkit-tap-highlight-color: transparent;
      margin: auto;
      display: block;
    }
    .nav .hamburger .line:nth-child(1),
    .nav .hamburger .line:nth-child(3){
      width: 25px;
      height: 3px;
      background-color: #FFF;
      display: block;
      margin: 6px 0;
      -webkit-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }
    .nav .hamburger .line:nth-child(2){
      width: 15px;
      height: 3px;
      background-color: #FFF;
      display: block;
      margin: 6px 0;
      -webkit-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }
    .nav .hamburger:hover{
      cursor: pointer;
    }
    /* .nav #hamburger.is-active .line:nth-child(2){
      width: 0px;
    }
    .nav #hamburger.is-active .line:nth-child(1),
    .nav #hamburger.is-active .line:nth-child(3){
      -webkit-transition-delay: 0.3s;
      -o-transition-delay: 0.3s;
      transition-delay: 0.3s;
    }
    .nav #hamburger.is-active .line:nth-child(1){
      -webkit-transform: translateY(8px) rotate(45deg);
      -ms-transform: translateY(8px) rotate(45deg);
      -o-transform: translateY(8px) rotate(45deg);
      transform: translateY(8px) rotate(45deg);
    }
    .nav #hamburger.is-active .line:nth-child(3){
      -webkit-transform: translateY(-8px) rotate(135deg);
      -ms-transform: translateY(-8px) rotate(135deg);
      -o-transform: translateY(-8px) rotate(135deg);
      transform: translateY(-10px) rotate(135deg);
    } */
    .nav .nav-list{
      margin: 6rem 0 2rem;
    }
    .nav .nav-link{
      color: #977124;
      background-color: #FFF;
      display: block;
      font-size: var(--h5-font-size);
      font-weight: bold;
      padding: 0.3rem 2rem;
      -webkit-tap-highlight-color: transparent;
    }
    .nav .nav-link:hover{
      color: #FFF;
      background-color: #977124;
    }
    .nav .nav-link.active{
      color: #FFF;
      background-color: #977124;
    }
    .nav .nav-item{
      margin-bottom: 0;
    }
    .nav .nav-menu .nav-social-media-desktop{
      display: none;
    }
    .nav .nav-logo-container{
      width: 7rem;
      margin-right: auto;
    }
    .nav .nav-logo img{
      width: 100% !important;
      display: block;
      margin-top: auto;
      margin-bottom: auto;
    }
    .nav .nav-logo-mobile img{
      width: 8rem !important;
    }
    .nav .nav-close-mobile .close{
      -webkit-tap-highlight-color: transparent;
      margin: auto;
      display: block;
    }
    .nav .nav-close-mobile .close .line:nth-child(1){
      width: 30px;
      height: 3px;
      background-color: #8E1537;
      display: block;
      margin: 0;
      transform: translateY(0px) rotate(45deg);
      -webkit-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }
    .nav .nav-close-mobile .close .line:nth-child(2){
      width: 30px;
      height: 3px;
      background-color: #8E1537;
      display: block;
      margin: 0;
      transform: translateY(-3px) rotate(135deg);
      transition: all 0.3s ease-in-out;
    }
    .nav .nav-close-mobile .close:hover{
      cursor: pointer;
    }
    .nav .home-title{
      line-height: 2.5rem !important;
    }  
    .nav .nav-social-media-mobile a{
      -webkit-tap-highlight-color: transparent;
      display: inline-block;
      margin-left: 1rem;
    }
    .nav .nav-social-media-mobile .icon-facebook{
      background: #FFF;
      mask: url('../img/icon-facebook.png') no-repeat center / contain;
      -webkit-mask: url('../img/icon-facebook.png') no-repeat center / contain;
      width: 20px;
      height: 20px;
    }
    .nav .nav-social-media-mobile a:hover .icon-facebook{
      background: #977124;
    }
    .nav .nav-social-media-mobile .icon-instagram{
      background: #FFF;
      mask: url('../img/icon-instagram.png') no-repeat center / contain;
      -webkit-mask: url('../img/icon-instagram.png') no-repeat center / contain;
      width: 20px;
      height: 20px;
    }
    .nav .nav-social-media-mobile a:hover .icon-instagram{
      background: #977124;
    }
    .nav .nav-social-media-mobile .icon-twitter{
      background: #FFF;
      mask: url('../img/icon-twitter.png') no-repeat center / contain;
      -webkit-mask: url('../img/icon-twitter.png') no-repeat center / contain;
      width: 20px;
      height: 20px;
    }
    .nav .nav-social-media-mobile a:hover .icon-twitter{
      background: #977124;
    }

    /* FOOTER */

    .l-footer .footer-text-container{
      bottom: 3rem;
      margin-right: auto;
      margin-left: auto;
    }
    .l-footer .footer-text-container .footer-1{
      grid-column-start: 1; 
      grid-column-end: 4; 
      grid-row-start: 1; 
      grid-row-end: 3; 
    }
    .l-footer .footer-text-container .footer-1 img{
      margin-bottom: var(--mb-3);
      margin-right: auto;
    }
    .l-footer .footer-text-container .footer-1 p{
      text-align: left;
      font-family: 'Poppins', sans-serif;
    }
    .l-footer .footer-title{
      font-size: var(--h5-font-size) !important;
      text-align: left;
      margin-top: var(--mb-6);
      margin-bottom: var(--mb-2);
    }
    .l-footer .footer-text-container .footer-2 li,
    .l-footer .footer-text-container .footer-3 li{
      text-align: left;
    }
    .l-footer .footer-col-3{
      grid-template-columns: repeat(2, 1fr); 
      grid-column-gap: 0;
      width: calc(100% - 0rem);
    }
}
  
@media screen and (min-width: 960px){

    /* SCROLL BAR WEB */

    /* Only IE */
    html {scrollbar-face-color: rgba(151, 113, 36, 0.8); scrollbar-shadow-color: rgba(151, 113, 36, 0.4); scrollbar-highlight-color: rgba(151, 113, 36, 0.4);}

    /* Only FireFox */
    html {
      scrollbar-color: rgba(151, 113, 36, 0.8) rgba(151, 113, 36, 0.4);
    }

    /* Only Chrome */

    ::-webkit-scrollbar {
      width: 12px;
    }
    /* Track */
    ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    }
    /* Handle */
    ::-webkit-scrollbar-thumb {
      background: rgba(151, 113, 36, 0.8); 
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    }
    ::-webkit-scrollbar-thumb:window-inactive {
      background: rgba(151, 113, 36, 0.4); 
    }

    body{
      margin: 0;
    }
  
    .section{
      padding-top: 6rem;
    }
    
    .l-header.scrolled .nav{
      height: calc(var(--header-height) + 1rem);
      transition: height 1s ease-in-out;
    }

    /* NAV */
    .nav{
      height: calc(var(--header-height) + 2rem);
      transition: height 0s ease-in-out;
    }
    .nav .nav-menu{
      display: flex;
      align-items: center;
    }
    .nav .nav-list{
      display: flex;
      padding-top: 0;
      float: left;
      margin-right: 5rem;
      white-space: nowrap;
    }
    .nav .nav-item{
      margin-left: var(--mb-6);
      margin-bottom: 0;
    }
    .nav .nav-toggle{
      display: none !important;
    }
    .nav .nav-link{
      color: #FFF;
      -webkit-tap-highlight-color: transparent;
    }
    .nav .nav-link::after{
      position: absolute;
      content: "";
      width: 0;
      height: 0;
      left: 0;
      top: 1.7rem;
      bottom: 0;
      right: 0;
      margin: 0 auto;
      background-color: #977124;
      transition: all .3s;
    }
    .nav .nav-link:hover::after{
        width: 100%;
        height: 0.18rem;
        transition: all .3s;
    }
    .nav .nav-link.active::after{
      position: absolute;
      content: "";
      width: 100%;
      height: 0.18rem;
      left: 0;
      top: 1.7rem;
      bottom: 0;
      right: 0;
      margin: 0 auto;
      background-color: #977124;
    }
    .nav .nav-social-media-mobile{
      display: none;
    }
    .nav .nav-social-media-desktop a{
      -webkit-tap-highlight-color: transparent;
      display: inline-block;
      margin-left: 1rem;
    }
    .nav .nav-social-media-desktop .icon-facebook{
      background: #FFF;
      mask: url('../img/icon-facebook.png') no-repeat center / contain;
      -webkit-mask: url('../img/icon-facebook.png') no-repeat center / contain;
      width: 23px;
      height: 23px;
    }
    .nav .nav-social-media-desktop a:hover .icon-facebook{
      background: #977124;
    }
    .nav .nav-social-media-desktop .icon-instagram{
      background: #FFF;
      mask: url('../img/icon-instagram.png') no-repeat center / contain;
      -webkit-mask: url('../img/icon-instagram.png') no-repeat center / contain;
      width: 23px;
      height: 23px;
    }
    .nav .nav-social-media-desktop a:hover .icon-instagram{
      background: #977124;
    }
    .nav .nav-social-media-desktop .icon-twitter{
      background: #FFF;
      mask: url('../img/icon-twitter.png') no-repeat center / contain;
      -webkit-mask: url('../img/icon-twitter.png') no-repeat center / contain;
      width: 23px;
      height: 23px;
    }
    .nav .nav-social-media-desktop a:hover .icon-twitter{
      background: #977124;
    }

    /* FOOTER */

    .l-footer .footer-text-container .footer-1 p{
      text-align: left;
      color: #FFF;
      font-family: 'Poppins', sans-serif;
    }
    .l-footer .footer-2,
    .l-footer .footer-3{
      margin-left: auto;
    }
    .l-footer .footer-2 li a,
    .l-footer .footer-3 li a{
      display: inline;
    }
}
  
@media screen and (min-width: 1024px){
    .bd-grid{
      margin-left: auto;
      margin-right: auto;
    }
}