/******************************************/
/** General                              **/
/******************************************/

:root {
   --primary: #fff;
   --black: #000000;
   --dark: #1E1E1E;
   --brown-dark: #1F1200;
   --gray: #4B4B4B;
   --light: #F2EBDB;
   --white: #ffffff;
   --scroll-button: #D2A945;
   --gold-3: #F9F0C2;
   --text: #FFF3D6;
}

*, *::before, *::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html, body {
   min-height: 100vh;
   min-height: 100dvh;
   color: var(--text);
   background-color: var(--brown-dark);
   font-family: "Zilla Slab", serif;
   font-weight: 400;
   font-style: normal;

}

/******************************************/
/** Helpers                              **/
/******************************************/

/* Colors */

.text-brown-dark {color: var(--brown-dark) !important;}
.text-primary {color: var(--primary) !important;}
.text-text {color: var(--text) !important;}
.text-gold-3 {color: var(--gold-3) !important;}
.text-gold{
   background: linear-gradient(270deg, #AE7429 0%, #F9F0C2 50%, #D2A945 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   color: transparent;
}

.text-gold-2{
   background: linear-gradient(270deg, #AE7429 0%, #D2A945 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   color: transparent;
}

.hover\:text-primary:hover {color: var(--primary) !important;}

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

.hover\:bg-primary:hover {background-color: var(--primary) !important;}



/* Fonts */

.fs-7 {font-size: .95rem;}
.fs-8 {font-size: .8rem;}
.fs-9 {font-size: .7rem;}

/* Sizes */

.button {padding: 15px 25px;}

.w-fit {width: fit-content;}
.w-screen {width: 100vw; width: 100dvw;}
.h-screen {height: 100vh; height: 100dvh;}

/* Components */

.icon-md {
	width: 30px;
	height: 30px;
	min-width: 30px;
	min-height: 30px;
}

.icon-lg {
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
}

/* Animations */

.transition-03 {
   transition: all linear .3s;
   -o-transition: all linear .3s;
   -moz-transition: all linear .3s;
   -webkit-transition: all linear .3s;
}

/* scroll button */

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

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


/******************************************/
/** Navbar                               **/
/******************************************/

.navbar-grid {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
}

.navbar-nav .nav-link {
   position: relative;
}
.navbar-nav .nav-link.active {
   font-weight: bold;
}
.navbar-nav .nav-link::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   height: 3px;
   border-radius: 2px;
   background: linear-gradient(270deg, #AE7429 0%, #F9F0C2 50%, #D2A945 100%);
   z-index: 2;
   transition: all 0.3s ease;
   width: 0;
}
.navbar-nav .nav-link.active::after {
   width: 100%;
}

.navbar-nav .nav-link:hover::after {
   width: 100%;
}


/******************************************/
/** Boxes                                **/
/******************************************/

.box-gold {
   position: relative;
   z-index: 1;
   border: none !important;
   border-radius: 0;
   overflow: hidden;
   font-weight: bold;
}

.box-gold::before {
   content: '';
   position: absolute;
   inset: 0;
   z-index: -1;
   border-radius: inherit;
   padding: 2px;
   background: linear-gradient(270deg, #AE7429 0%, #F9F0C2 50%, #D2A945 100%);
   -webkit-mask:
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   mask:
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
   mask-composite: exclude;
   pointer-events: none;
   opacity: 1;
}

.box-gold::after {
   content: '';
   position: absolute;
   inset: 0;
   z-index: -2;
   background: linear-gradient(270deg, #AE7429 0%, #F9F0C2 50%, #D2A945 100%);
   opacity: 0;
   transition: opacity 0.5s ease;
}

/* Banner Home Box Animation */
.banner-home-box {
   cursor: pointer;
   transition: all 0.5s ease;
}

.banner-arrow {
   display: inline-block;
   transition: all 0.5s ease;
}

.banner-page-text {
   transition: opacity 0.5s ease;
}

.banner-home-text {
   opacity: 0;
   left: 50%;
   top: 50%;
   color: var(--brown-dark);
   transform: translate(-50%, -50%);
   transition: opacity 0.2s ease 0.3s;
   pointer-events: none;
}

.banner-home-box:not(:hover) .banner-home-text {
   transition: opacity 0s ease 0s;
}

.banner-home-box:hover .banner-arrow {
   transform: translate3d(-30px, -30px, -30px);
   opacity: 0;
}

.banner-home-box:hover .banner-page-text {
   opacity: 0;
}

.banner-home-box:hover .banner-home-text {
   opacity: 1;
}

.banner-home-box:hover::after {
   opacity: 1;
}

/******************************************/
/** Buttons                              **/
/******************************************/

.btn-gold {
   position: relative;
   z-index: 1;
   background: linear-gradient(270deg, #AE7429 0%, #F9F0C2 50%, #D2A945 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   color: #2E1A00;
   border: none !important;
   border-radius: 0;
   overflow: hidden;
   font-weight: bold;
   transition: all 0.3s ease;
}
.btn-gold::before {
   content: '';
   position: absolute;
   inset: 0;
   z-index: -1;
   border-radius: inherit;
   padding: 2px;
   background: linear-gradient(270deg, #AE7429 0%, #F9F0C2 50%, #D2A945 100%);
   -webkit-mask:
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   mask:
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
   mask-composite: exclude;
   pointer-events: none;
   opacity: 1;
   transition: opacity 0.5s ease;
}
.btn-gold::after {
   content: '';
   position: absolute;
   inset: 0;
   z-index: -2;
   background: linear-gradient(270deg, #AE7429 0%, #F9F0C2 50%, #D2A945 100%);
   opacity: 0;
   transition: opacity 0.5s ease;
}
.btn-gold:hover, .btn-gold.active {
   -webkit-text-fill-color: #2E1A00;
   color: #2E1A00;
}
.btn-gold:hover::before, .btn-gold.active::before {
   opacity: 0;
}
.btn-gold:hover::after, .btn-gold.active::after {
   opacity: 1;
}

.btn-gold:hover, .btn-gold.active {
   box-shadow: 
      inset -100px 0 0 0 var(--text),
      inset 100px 0 0 0 var(--text);
}

.btn-gold:active{
   animation: pulse 1s;
   box-shadow: 0 0 0 2em transparent;
}

@keyframes pulse {
   0% { box-shadow: 0 0 0 1px var(--text); }
}

@keyframes pulse2 {
   0% { box-shadow: 0 0 0 1px #D2A945; }
}


.btn-gold-2 {
   position: relative;
   z-index: 1;
   background: linear-gradient(270deg, #AE7429 0%, #D2A945 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   color: var(--brown-dark);
   border: none !important;
   border-radius: 0;
   overflow: hidden;
   font-weight: bold;
   transition: all 0.3s ease;
}
.btn-gold-2::before {
   content: '';
   position: absolute;
   inset: 0;
   z-index: -1;
   border-radius: inherit;
   padding: 2px;
   background: linear-gradient(270deg, #AE7429 0%, #D2A945 100%);
   -webkit-mask:
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   mask:
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
   mask-composite: exclude;
   pointer-events: none;
   opacity: 1;
   transition: opacity 0.5s ease;
}
.btn-gold-2::after {
   content: '';
   position: absolute;
   inset: 0;
   z-index: -2;
   background: linear-gradient(270deg, #AE7429 0%, #D2A945 100%);
   opacity: 0;
   transition: opacity 0.5s ease;
}
.btn-gold-2:hover {
   -webkit-text-fill-color: var(--brown-dark);
   color: var(--brown-dark);
}
.btn-gold-2:hover::before {
   opacity: 0;
}
.btn-gold-2:hover::after {
   opacity: 1;
}

.btn-gold-2:hover{
   box-shadow: 
      inset -100px 0 0 0 var(--brown-dark),
      inset 100px 0 0 0 var(--brown-dark);
}

.btn-gold-2:active{
   animation: pulse2 1s;
   box-shadow: 0 0 0 2em transparent;
}

/******************************************/
/** Forms                                **/
/******************************************/

.form-select,
.form-control,
.input-group {
   border-radius: 8px;
   border: 1px solid #D9D9D9;
}

.input-group:active,
.input-group:focus,
.input-group:focus-within,
.form-select:active,
.form-select:focus,
.form-control:active,
.form-control:focus {
   box-shadow: none;
   border-color: var(--primary);
   background-color: transparent;
}

.input-group.disabled,
.form-control:disabled,
.form-select:disabled {
	border-color: #D9D9D9 !important;
	background-color: #D9D9D9 !important;
}

.form-check-input {
   min-width: 1em !important;
   min-height: 1em !important;
}

.form-check-input:checked {
   border-color: var(--primary) !important;
   background-color: var(--primary) !important;
}

.form-check-input:focus {
   box-shadow: none;
   border-color: #D9D9D9 !important;
}

::placeholder {
   opacity: 1;
   color: var(--gray) !important;
}
::-ms-input-placeholder {color: var(--gray) !important;}


.grid-columns-2{
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1.5rem;
}

@media (max-width: 768px) {
   .grid-columns-2{
      grid-template-columns: 1fr;
   }
}

@media (min-width: 992px) {
   .navbar-grid-layout {
      display: grid !important;
      grid-template-columns: 1fr auto 1fr;
   }
}