:root{
  --dark:#000000;
  --brand:#DFCD88;
  --brand-light:#F0E3AF;
  --brand-extra-light:#FCF9EF;
  --yellow:#DDB720;

  --brand2:#241800;

  --white:#FFFFFF;
  --font-poppins:"Poppins", sans-serif;

}
 /* base styles */
 button:focus{outline: none;}
 input:focus{outline: none}
 a{cursor:  pointer;}
 .gap-10{
  gap: 10px;
 }

      .text--brand{}
 
    /* fonts */
      .font-body-text{
        font-family: var(--font-poppins);
      }
      .font-poppins{
        font-family: var(--font-poppins);
      }


      .border-dark-05{border:1px solid rgba(0, 0, 0, 0.05);}
      .border-extra-light{border:1px solid #f0e3af1b;}
      /* text */
      .text--brand{color:var(--brand) ;}
      .text--dark{color: var(--dark);opacity: 0.90;}
      .text--dark-body{color: var(--dark);opacity: 0.80;}

      .text--light{color: var(--white) !important;opacity: 0.90;}
      .text--light-body{color: var(--white);opacity: 0.80;}

      .text-gradient-1{
        background: #000000;
        background: linear-gradient(122deg,rgba(0, 0, 0, 1) 0%, rgba(221, 183, 32, 1) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .bg-gradient-1{
       background: linear-gradient(122deg,rgba(0, 0, 0, 1) 0%, rgba(221, 183, 32, 1) 100%);
      }
      .bg-gradient-2{
        background: #000000;
        background: linear-gradient(180deg,rgba(0, 0, 0, 0.1) 0%, rgba(221, 183, 32, 0.1) 100%);
      }

      /* bg */
      .bg--brand-light{background-color:var(--brand-light) ;}
      .bg--brand-extra-light{background-color: var(--brand-extra-light);}
      .bg--light{background-color: rgb(248, 246, 245);}
      .bg-brand2{background-color: var(--brand2);}
      
      .opacity-90{opacity: 0.90;}
      .opacity-80{opacity: 0.80;}
      .opacity-30{opacity: 0.30;}
  

    
      .z-index-123{z-index: 123;}

      .text-72{font-size: 72px;font-weight: 400;}
      .text-62{font-size: 62px;font-weight: 400;}
      .text-45{font-size: 45px;font-weight: 400;}
      .text-42{font-size: 42px;font-weight: 400;}
      .text-38{font-size: 38px;font-weight: 400;}
      .text-32{font-size: 32px;font-weight: 400;}
      .text-28{font-size: 28px;font-weight: 400;}
      .text-25{font-size: 25px;font-weight: 400;}
      .text-24{font-size: 24px;font-weight: 400;}
      .text-18{font-size: 18px;font-weight: 400;}
      .text-16{font-size: 16px;font-weight: 400;}
      .text-14{font-size: 14px;font-weight: 400;}
  
 
      .fw-900{font-weight: 900;}
      .fw-800{font-weight: 800;}
      .fw-700{font-weight: 700;}
      .fw-600{font-weight: 600;}
      .fw-500{font-weight: 500;}
      .fw-400{font-weight: 400;}
      .fw-300{font-weight: 300;}

      .rounded-50{border-radius: 50px;}
      .rounded-20{border-radius: 20px;}
      .rounded-15{border-radius: 15px;}
      .rounded-12{border-radius: 12px;}
      .rounded-8{border-radius: 8px;}

      .letter-spacing-0{letter-spacing: 0%;}
      .letter-spacing-2{letter-spacing: -2%;}
      .letter-spacing-4{letter-spacing: -4%;}
      
      .lh-100{line-height: 100% !important;}
      .ls-4{letter-spacing: -4px;}
      
      .rect-50{width: 50px;height: 50px;}
      .rect-70{width: 70px;height: 70px;}
      
      .btn--brand{
        background: var(--brand);
        color: var(--white);
        border-radius: 50px;
        padding: 12px 24px;
        border: 1px solid var(--brand);
        transition: all ease 0.3s;
        margin-right: 10px;
        margin-bottom: 10px;
      }
      .btn--brand:hover{
        transition: all ease 0.3s;
        background-color: var(--white);
        color:var(--brand) ;

      }
      .btn--dark{
        background: var(--dark);
        color: var(--white);
        border-radius: 50px;
        padding: 12px 24px;
        border: 1px solid var(--dark);
        transition: all ease 0.3s;
        margin-right: 10px;
        margin-bottom: 10px;
      }
      .btn--dark:hover{
        transition: all ease 0.3s;
        background-color: var(--white);
        color:var(--dark) ;
        opacity: 0.7;

      }
       .btn--outline-dark{
        background: transparent;
        color: var(--dark);
        border-radius: 50px;
        padding: 12px 24px;
        border: 1px solid var(--dark);
        transition: all ease 0.3s;
        margin-right: 10px;
        margin-bottom: 10px;
      }
      .btn--outline-dark:hover{
        transition: all ease 0.3s;
        background-color: var(--dark);
        color:var(--white) ;

      }
      .btn--outline-brand{
        background: transparent;
        color: var(--white);
        border-radius: 50px;
        padding: 12px 24px;
        border: 1px solid var(--brand);
        transition: all ease 0.3s;
        margin-right: 10px;
        margin-bottom: 10px;
      }
      .btn--outline-brand:hover{
        transition: all ease 0.3s;
        background-color: var(--brand);
        color:var(--dark) ;

      }
      .btn--link{
        color: var(--dark);
        text-decoration: underline;
        transition: all ease 0.3s;
      }
      .btn--link:hover{opacity: 0.7;transition: all ease 0.3s;}

      .container-1520{
        max-width: 1520px;
        margin: auto;
      }
      .splide__arrow{
        background: transparent !important;
        border: 1px solid black !important;
        padding: 13px !important;
        width: 40px !important;
        height: 40px !important;
      }
      .splide__slide{height: unset !important;}
      .splide__arrow svg{}
      .owl-theme .owl-nav .disabled {opacity: .3 !important;}

      html{
        overflow: scroll;
        scrollbar-color: var(--brand) var(--brand-extra-light);
        scrollbar-width: thin;
      }
      /* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--brand-extra-light); 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--brand); 
}

      @media(max-width:992px){
          .text-72{font-size: 62px;}
          .text-62{font-size: 52px;}
          .text-45{font-size: 35px;}
      
      }
      @media(max-width:576px){
      .text-72{font-size: 50px;}
      .text-62{font-size: 40px;}
      .text-45{font-size: 30px;}
      .text-42{font-size: 26px;}
      .text-32{font-size: 24px;}
      .text-28{font-size: 22px;}
      .text-24{font-size: 20px;}
      }