:root{
    --primary: #FB9200;
    --secondary: #272734;
    --tertiary: #FFFFFF;
    --quarternary: #a35f00;
    --ff-primary: 'Montserrat', sans-serif;
    --section-divider-height: 60; 
    --section-divider-width: 1920;
    --section-divider-ratio: calc(100% * var(--section-divider-height) / var(--section-divider-width));
}

h1,h2,h3,h4,h5,h6,
p,a,span,li,div{
    font-family: var(--ff-primary);
}   

a{
    text-decoration: none;
    color: var(--primary);
}
a:hover{
    color: gray;
}

html,body{
    overflow-x: hidden;
}

.w-10{
    width: 10%!important;
}
.py-3{
    /*slight adjust for font used*/
    padding-bottom: 0.8rem!important;
}
.z-0{
    z-index: 0;
}
.z-1{
    z-index: 10;
}
.z-2{
    z-index: 20;
}

.invert{
    filter: invert(100%)!important;
}
.z-9{
    z-index: 999999;
}

.mirror{
    transform: scaleX(-1)!important;
}
.min-h-inherit{
    min-height: inherit;
}
.o-cover{
    object-fit: cover;
}

/********************/
/*PARALLAX */
/********************/
.parallax {
    min-height: 500px;
    background-attachment: fixed;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    -moz-box-shadow: inset 0 0 20px #00000068;
    -webkit-box-shadow: inset 0 0 20px #00000068;
    box-shadow: inset 0 0 20px #00000068;
  }
  
  @supports (-webkit-touch-callout: none) {
    /* CSS specific to iOS devices */ 
  .parallax{
  background-attachment: scroll;
  }
}
/****************************
*************BG**************
****************************/
.bg-primary{
    background-color: var(--primary)!important;
}
.bg-secondary{
    background-color: var(--secondary)!important;
}
.bg-tertiary {
    background-color: var(--tertiary)!important;
}
.bg-quarternary {
    background-color: var(--quarternary)!important;
}

/****************************
*************BORDER**************
****************************/
.border-primary{
    border-color: var(--primary)!important;
}
.border-secondary{
    border-color: var(--secondary)!important;
}
.border-tertiary {
    border-color: var(--tertiary)!important;
}
.border-quarternary {
    border-color: var(--quarternary)!important;
}

/****************************
************FONT*************
****************************/
.font-primary{
    font-family: var(--ff-primary)!important;
}

.font-secondary{
    font-family: var(--ff-secondary)!important;
}

/****************************
************TEXT*************
****************************/
.text-primary{
    color: var(--primary)!important;
}
.text-secondary{
    color: var(--secondary)!important;
}
.text-tertiary {
    color: var(--tertiary)!important;
}
.text-quarternary {
    color: var(--quarternary)!important;
}

@media(max-width: 991px){
    .text-dark-mode{
        color:white!important;
    }
    .bg-dark-mode{
        color:white!important;
    }
}



/****************************
***********HOVER*************
****************************/
.hover-dark:hover{
    background-color: #333!important;
    color: white!important;
    transition: background-color .25s, white .25s;
}



/****************************
**********DIVIDER************
****************************/
.has-divider {
    position: relative;
    padding-bottom: var(--section-divider-ratio);
}
.section-divider {
    display: block;
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: auto;
  }





/****************************
*********NAVIGATION**********
****************************/
nav li a{
    margin: 0;
    border-radius:20px;
    padding: 10px 15px!important;
    background-color: transparent;
    color: #333;
    transition: background-color .25s, color .25s;
}

.nav-link{
    font-size: 15px;
    position: relative;
}



/****************************
***********MARQUEE***********
****************************/
.marquee-wrapper {
    overflow: hidden;
  }
  
  .marquee {
    display: flex;
    animation-name: marquee;
    animation-duration:15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
    transform: translateX(0);
  }

  .marquee img {
    padding: 1em 5em;
    float: left;
  }
  
  @keyframes marquee {
    from {transform: translateX(0);}
    to {transform: translateX(-100%);}
  }