:root {
   --color-primary: #8a2432;
   --color-default: #e0e1e2;
   --color-dark: #818186;
}

.bg-grey {
   background-color: #818186;
}

.bg-gray {
   background-color: #e0e1e2;
}

.bg-red {
   background-color: #892332;
}

.text-red {
   color: #892332;
}

a {
   color: inherit !important;
}

p,
h5 {
   font-size: 1rem;
}

svg {
   fill: currentColor;
}

.ratio-2x1 {
   aspect-ratio: 2/1;
}

.text-justify {
   text-align: justify;
}

.breadcrumb-item+.breadcrumb-item::before {
   color: currentColor;
   opacity: .5;
}

.dropdown {
   @media (min-width: 992px) {
      &:hover {
         .dropdown-menu {
            display: block;
            color: white;
         }
      }
   }
}

.page {
   display: flex;
   flex-direction: column;
   min-height: 100vh;

   .page-header {
      flex-grow: 0;

      .navbar {
         transition: all .3s;


         .navbar-brand img {
            max-width: 12rem;
            transition: all .5s;

            @media (min-width: 992px) {
               max-width: 16rem;
            }
         }

         .navbar-nav {
            @media (min-width: 992px) {
               column-gap: calc(0rem);
            }

            @media (min-width: 1200px) {
               column-gap: calc(0rem);
            }

            .nav-link {
               color: inherit;
               font-family: 'HelveticaNeue light';

               /* &:hover{
                  background-color: #222;
               } */
               &.active {
                  /* color: #e0e1e2; */
                  content: ">";
               }

               @media (min-width: 992px) {
                  padding: 0;
                  height: 80px;
               }
            }

            .dropdown-item {
               color: inherit;
               font-family: 'HelveticaNeue light';

               &:hover {
                  /* color: var(--color-primary); */
                  color: white;
                  background-color: transparent;
               }

               &.active {
                  color: white;
                  font-weight: bold;
                  background-color: #222 !important;
               }
            }
         }

      }
   }

   .jumbotron {
      display: none !important;
   }

   .page-content:not(:has(section#home-banner)) {
      padding-top: 50px !important;
   }

   @media (min-width: 992px) {
      .page-content:not(:has(section#home-banner)) {
         padding-top: 80px !important;
      }
   }

   .page-content {
      & {
         flex-grow: 1;

         @media (min-width: 1400px) {
            font-size: 1.25rem;
         }
      }

      &>section:first-child {
         padding-top: 77px;

         @media (min-width: 992px) {
            padding-top: 104px;

         }
      }

      .banner {
         & {
            background-color: var(--color-default);
            position: relative;
            height: 80vh;
            min-height: 530px;
            display: flex;
            justify-content: center;
            align-items: center;

            @media (min-width: 768px) {
               height: 70vh;
            }

            @media (min-width: 992px) {
               min-height: 720px;
            }
         }

         .banner-title {
            font-family: 'HelveticaNeue Thin';
            font-size: 5rem;
            text-align: center;
            line-height: 1;
            opacity: .65;
            transform: translateY(-25%);

            @media (min-width: 768px) {
               font-size: 8rem;
            }

            @media (min-width: 1400px) {
               font-size: 10rem;
            }
         }

         .banner-title-2 {
            transform: translateY(-70%);
         }

         .banner-fg {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: calc(100% - 10vw);
            /* max-width: 40rem !important; */

            /* @media (min-width: 992px) {
               width: 60% !important;
               max-width: 35rem !important;
            } */
         }

         .banner-fg-product {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: calc(100% - 10vw);
            max-width: 40rem !important;

            @media (min-width: 992px) {
               width: 60% !important;
               max-width: 18rem !important;
            }

            @media (max-width: 768px) {
               max-width: 20rem !important;
            }
         }

         .banner-fg-landscape {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: calc(100% - 10vw);
            /* max-width: 40rem !important; */

            @media (min-width: 992px) {
               width: 80% !important;
               max-width: 25rem !important;
            }

            @media (max-width: 768px) {
               max-width: 20rem !important;
            }
         }
      }
   }

   .page-footer {
      flex-grow: 0;

      .footbar a {
         text-decoration: none;
         opacity: .875;

         &:hover,
         &.active {
            text-decoration: underline;
            opacity: 1;
         }
      }
   }
}


.menu-mobile {
   display: block;

   @media (min-width: 992px) {
      display: none;
   }
}

.menu-desktop {
   display: none;

   @media (min-width: 992px) {
      display: block;
   }
}



/* banner css */
#home-banner {
   background-image: url(../img/banner-mobile.jpg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   min-height: 640px;
}

.word-banner {
   margin-top: -150px;
}

@media (min-width: 768px) {
   #home-banner {
      background-image: url(../img/banner.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      min-height: 640px;
      background-position: 65% 50%;

   }

   .word-banner {
      margin-top: 0px;
   }
}

@media (min-width: 992px) {
   #home-banner {
      background-image: url(../img/banner.png);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      min-height: 640px;
      background-position: 65% 50%;
   }

   .word-banner {
      margin-top: 0px;
   }
}

.banner-fg img {
   background: radial-gradient(circle at bottom, rgb(255 255 255 / 32%) 0%, rgb(255 255 255 / 0%) 60%);
   /*background-image: linear-gradient(to top, rgb(112 78 79), #00000000, transparent);*/
   /*background: radial-gradient(circle, rgb(255 255 255 / 80%) 0%, rgba(51, 51, 51, 0) 80%);*/

}

.share-box {
   cursor: pointer;
}

@media (max-width: 576px) {
   .share-box {
      position: static !important;
      bottom: auto !important;
      right: auto !important;
      margin-top: 1rem;
      
   }
}