/*--------------------------------------------------------------
# Fonts
--------------------------------------------------------------*/

@font-face {
   font-family: 'Mytupi Regular';
   font-style: normal;
   font-weight: normal;
   src: local('Mytupi Regular'), url('../fonts/mytupi.woff') format('woff');
}


@font-face {
   font-family: 'Mytupi Bold';
   font-style: normal;
   font-weight: normal;
   src: local('Mytupi Bold'), url('../fonts/mytupiBOLD.woff') format('woff');
}


@font-face {
   font-family: 'Mytupi Ultra-condensed ExtraBold';
   font-style: normal;
   font-weight: normal;
   src: local('Mytupi Ultra-condensed ExtraBold'), url('../fonts/mytupiIMPACTO.woff') format('woff');
}

/*--------------------------------------------------------------
# Root
--------------------------------------------------------------*/

:root {
   --primary: #E2191F;
   --secondary: #343A40;
   --white: #ffffff;
   --light: #f8f9fa;
   --dark: #101115;
   --light-gray: #adb5bd;
   --light-red: #E2191F1A;
   --gray: #898989;
}

/*--------------------------------------------------------------
# Geral
--------------------------------------------------------------*/

body, html {
   font-size: 16px;
   background-color: var(--white);
   min-height: 100vh;
   min-height: 100dvh;
   font-weight: 400;
   font-style: normal;
   font-weight: normal;
   color: var(--secondary);
   font-family: 'Heebo', sans-serif !important;
}

.text-primary{color: var(--primary) !important;}
.text-secondary{color: var(--secondary) !important;}
.text-light-gray{color: var(--light-gray) !important;}
.text-light{color: var(--light) !important;}
.text-dark{color: var(--dark) !important;}
.text-gray{color: var(--gray) !important;}

.bg-primary{background-color: var(--primary) !important;}
.bg-secondary{background-color: var(--secondary) !important;}
.bg-light{background-color: var(--light) !important;}
.bg-dark{background-color: var(--dark) !important;}
.bg-red-badge{background-color: var(--light-red) !important;}

.rounded-5{
   border-radius: 15px !important;
}

.fw-extrabold {
   font-weight: 800 !important;
}

.fs-6 {font-size: 1rem !important;}
.fs-7 {font-size: 0.875rem !important;}
.fs-8 {font-size: 0.75rem !important;}
.fs-9 {font-size: 0.6875rem !important;}

.grid-columns-2 {
   columns: 2; 
   column-gap: 3rem;
}

@media (max-width: 767.98px) {
   .grid-columns-2 {
      columns: 1 !important;
   }
}

/*--------------------------------------------------------------
# Navbar
--------------------------------------------------------------*/
.navbar .navbar-nav .nav-link.active {
   color: var(--primary) !important;
}

@media (max-width: 1023px) {
   #logoNav{
      width: 150px !important;
   }
}

/*--------------------------------------------------------------
# Search
--------------------------------------------------------------*/

@media (min-width: 994px) {
   .search-padding{
      padding-top: 100px !important;
   }
}
@media (min-width:767.8px) and (max-width: 993.8px) {
   .search-padding{
      padding-top: 130px !important;
   }
}

/**************************************
* Scroll buttons                     *
************************************ */

#whatsapp-button {
   width: 40px;
   height: 40px;
   bottom: 25px;
   right: 30px;
   z-index: 1040;
   border: 2px solid var(--white);
   transition: all 0.4s ease;
}

#scroll-button {
   opacity: 0;                  
   transform: translateY(50px);
   right: 30px;
   bottom: 20px;
   z-index: 1040;
   border: 2px solid var(--white);
   transition: all 0.5s ease-out;
}

#scroll-button.show {
   opacity: 1;
   transform: translateY(0px);
}

#scroll-button.show ~ #whatsapp-button {
   bottom: 80px;
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/

.btn-primary {
   background-color: var(--primary);
   border-color: var(--primary);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
   background-color: #bd2d34 !important;
   border-color: #bd2d34 !important;
}

.btn-primary:disabled, .btn-primary:disabled:hover, .btn-primary:disabled:focus, .btn-primary:disabled:active {
   background-color: var(--primary) !important;
   border-color: var(--primary) !important;
   opacity: 0.65 !important;
   cursor: not-allowed !important;
}

.btn-white {
   background-color: var(--white);
   border-color: var(--white);
   color: var(--primary);
}
.btn-white:hover, .btn-white:focus, .btn-white:active {
   background-color: #e6e6e6 !important;
   border-color: #e6e6e6 !important;
   color: var(--primary) !important;
}


/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/

input::placeholder, textarea::placeholder {
   color: #898989 !important;
   opacity: 1 !important; /* Firefox */
}
.form-control:focus {
   box-shadow: none !important;
}
.form-control {
   padding: 15px 15px;
}




.btn-arrow {
   position: relative;
   transition: background-color 0.3s ease-out;
   
   span {
      display: inline-block;
      position: relative;
      transition: all 0.3s ease-out;
   }
   &:hover span {
      transform: translate3d(-60px, 0, 0);
   }
   .arrow {
      position: absolute;
      width: 39px;
      right: 0px;
      opacity: 0;
      top: 50%;
      transform: translateY(-50%);
      transition: all 0.3s ease-out;
   }
   &:hover .arrow {
      opacity: 1;
      right: -60px;
   }
}