@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600&family=Shippori+Mincho+B1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,144,300..600;1,144,300..600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400&display=swap');

@font-face {
    font-family: 'cardillac-light';
    src: url('/app/themes/devignstudios-toolkit/resources/fonts/cardillac-lig-webfont.woff2') format('woff2'),
         url('/app/themes/devignstudios-toolkit/resources/fonts/cardillac-lig-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}




:root {
  /* Typography */
  --heading-font-family: "cardillac-light", serif;
  --heading-font-family: "Fraunces", serif;
  --body-font-family:  "Be Vietnam Pro", sans-serif;
  --body-font-family:  "Almarai", sans-serif;

  /* Colors */  
  --brand-black: #000000;
  --brand-white: #ffffff;

  /* Neutrals */
  --neutral-light:#f7f7f7;
  --body-color:#363636;

  /* Green Variables - 500 Brand */
  --color-green-50:#C0CECA; 
  --color-green-100:#AEC0BA; 
  --color-green-200:#89A59C; 
  --color-green-300:#65897D; 
  --color-green-400:#416D5F; 
  --color-green-500:#1D5140; 
  --color-green-600:#184436; 
  --color-green-700:#14372C; 
  --color-green-800:#0F2A21; 
  --color-green-900:#0A1D17; 

  /* Gold Variables - 500 Brand */
  --color-gold-50:#FFFBF5; 
  --color-gold-100:#F7E8D1; 
  --color-gold-200:#F3DDBC; 
  --color-gold-300:#EFD3A8; 
  --color-gold-400:#ECC893; 
  --color-gold-500:#E8BE7F; 
  --color-gold-600:#C3A06B; 
  --color-gold-700:#9E8156; 
  --color-gold-800:#796342; 
  --color-gold-900:#54442E; 

}




/*--------------------------------------------------------------
  >> : Typography
--------------------------------------------------------------*/

  body {
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
    font-family: var(--body-font-family);
    color: var(--body-color);

  }

  .small, small {
    font-size: 0.75rem;
  }

  h1, .h1,
  h2, .h2,
  h3, .h3,
  h4, .h4,
  h5, .h5,
  h6, .h6 {
    font-family: var(--heading-font-family);
    font-optical-sizing: auto;
    font-weight: 325;
    font-style: normal;
    font-variation-settings:
    "SOFT" 0,
    "WONK" 0;
  }

  h1, .h1 {
    line-height: 1.2;
    font-size: 5rem;
  }

  h2, .h2 {
    line-height: 1.2;
    font-size: 3.8rem;
  }

  h3, .h3 {
    font-size: 2.5rem;
    line-height: 1.25;
  }

  h4, .h4 {
    font-size: 1.8rem;
    line-height: 1.5;
  }

  h5, .h5 {
    font-size: 1.7rem;
    line-height: 1.5;
  }

  h6, .h6 {
    font-size: 0.8rem;
    line-height: 1.5;
    text-transform: uppercase;
    font-weight: normal;
  }

  @media (max-width: 992px) {

    h1, .h1 {
      font-size: 4.2rem;
    }

    h2, .h2 {
      font-size: 2.3rem;
    }

    h3, .h3 {
      font-size: 1.9rem;
    }
  }

  h1:first-child,
  h2:first-child,
  h3:first-child,
  h4:first-child,
  h5:first-child,
  h6:first-child,
  p:first-child, 
  ul:first-child, 
  ol:first-child {
    margin-top: 0;
  }

  h1:last-child,
  h2:last-child,
  h3:last-child,
  h4:last-child,
  h5:last-child,
  h6:last-child,
  p:last-child, 
  ul:last-child, 
  ol:last-child {
    margin-bottom: 0;
  }

  a {
    color: inherit;
  }

  [data-bg-color="color-white-500"] a,
  [data-bg-color="color-white"] a,
  [data-bg-color="color-neutral-light-500"] a {
    color:var(--brand-black);
  }

  [data-color="color-white"] a {
    color:var(--brand-white);
  }

  p {
    font-size:1.1rem;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
  }

  .sub-heading {
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size: 0.8em;
  }

/*--------------------------------------------------------------
  >> : Basic Asset Sizes and Setup
--------------------------------------------------------------*/

  picture {
    display: inline-block;
    width: 100%;
    height: auto;
    overflow: hidden;
  }

  picture img {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center center;
       object-position: center center;
  }

  video {
    width: 100%;
    height: auto;
    vertical-align: middle;
  }

/*--------------------------------------------------------------
  >> : Forms
--------------------------------------------------------------*/
  
  [readonly="readonly"] {
    position: relative;
    background: #f7f7f7;
    color: #585858;
    pointer-events: none;
    cursor: not-allowed;
  }
  
/*--------------------------------------------------------------
  >> : Min Height Utilities
--------------------------------------------------------------*/
  .min-vh-25 {
    min-height: 25vh!important;
  }

  .min-vh-50 {
    min-height: 50vh!important;
  }

  .min-vh-75 {
    min-height: 75vh!important;
  }


/*--------------------------------------------------------------
  >> : Section Font Colors
--------------------------------------------------------------*/
/* White */
[data-color="color-white"] {
  color: var(--brand-white);
}

[data-color="color-black"] {
  color: var(--brand-black);
}

/*--------------------------------------------------------------
  >> : Section Background Colors
--------------------------------------------------------------*/

/* White */
[data-bg-color="color-white"] {
  background: var(--brand-white);
}

[data-bg-color="color-black"],
[data-bg-color="color-black-500"] {
  background: var(--brand-black);
}

[data-bg-color="color-neutral-light-500"] {
  background: var(--neutral-light);
}


/* Green */
[data-bg-color="color-green-50"] {
  background: var(--color-green-50);
}

[data-bg-color="color-green-100"] {
  background: var(--color-green-100);
}

[data-bg-color="color-green-200"] {
  background: var(--color-green-200);
}

[data-bg-color="color-green-300"] {
  background: var(--color-green-300);
}

[data-bg-color="color-green-400"] {
  background: var(--color-green-400);
}

[data-bg-color="color-green-500"] {
  background: var(--color-green-500);
}

[data-bg-color="color-green-600"] {
  background: var(--color-green-600);
}

[data-bg-color="color-green-700"] {
  background: var(--color-green-700);
}

[data-bg-color="color-green-800"] {
  background: var(--color-green-800);
}

[data-bg-color="color-green-900"] {
  background: var(--color-green-900);
}

/* Gold */
[data-bg-color="color-gold-50"] {
  background: var(--color-gold-50);
}

[data-bg-color="color-gold-100"] {
  background: var(--color-gold-100);
}

[data-bg-color="color-gold-200"] {
  background: var(--color-gold-200);
}

[data-bg-color="color-gold-300"] {
  background: var(--color-gold-300);
}

[data-bg-color="color-gold-400"] {
  background: var(--color-gold-400);
}

[data-bg-color="color-gold-500"] {
  background: var(--color-gold-500);
}

[data-bg-color="color-gold-600"] {
  background: var(--color-gold-600);
}

[data-bg-color="color-gold-700"] {
  background: var(--color-gold-700);
}

[data-bg-color="color-gold-800"] {
  background: var(--color-gold-800);
}

[data-bg-color="color-gold-900"] {
  background: var(--color-gold-900);
}

/*--------------------------------------------------------------
  >> : Button
--------------------------------------------------------------*/

  .btn {
    display: inline-block;
    line-height: 1em;
    color: #000000;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    padding: 16px 25px;
    text-transform: uppercase;
    font-size: 0.8em;
    line-height: 1em;
    border-radius: 0px;
    transition: all 300ms ease-in-out;
    background: transparent;
    border: 1px solid transparent;
  }

  .btn-check:focus+.btn, .btn:focus {
    outline: 0;
    box-shadow: unset;
  }


  .btn.btn-standard {
    color:var(--brand-black);
    border:1px solid var(--brand-black);
  }

  .btn.btn-standard:focus {
    box-shadow: 0px 0px 0px 2px #00000075; !important;
  }

  .btn.btn-standard:hover {
    background:var(--brand-black);
    color:var(--brand-white);
  }

  .btn.btn-white {
    color:var(--brand-black);
    background:var(--brand-white);
    border:none;
  }

  .btn.btn-white:focus {
    box-shadow: 0px 0px 0px 2px #ffffff75; !important;
  }

  .btn.btn-white:hover {
    background:var(--brand-black);
    color:var(--brand-white);
  }

  .btn.btn-black {
    color:var(--brand-white);
    background:var(--brand-black);
    border:none;
  }

  .btn.btn-black:focus {
    box-shadow: 0px 0px 0px 2px #00000075; !important;
  }

  .btn.btn-black:hover {
    background:#1D5140;
    color:var(--brand-white);
  }

  .btn.btn-bordered {
    color:var(--brand-white);
    background:transparent;
    border:none;
    border-bottom:1px solid var(--brand-black);
    color:var(--brand-black);
    padding-left:0px;
    padding-right:0px;
  }

  .btn.btn-bordered:focus {
    box-shadow: 0px 2px 0px 0px #00000075; !important;
  }

  .btn.btn-gold {
    color:var(--brand-black);
    background:var(--color-gold-400);
    border:none;
  }

  .btn.btn-gold:focus {
    box-shadow: 0px 0px 0px 2px background:var(--color-gold-50) !important;
  }

  .btn.btn-gold:hover {
    background:var(--color-gold-600);
    color:var(--brand-white);
  }

  .col-inner .btn:nth-child(even) {
    margin-right: 30px !important;
  }