@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

  @font-face {
    font-family: 'Gilroy';
    src: url('/app/themes/ashleysherwood/resources/fonts/gilroy/Gilroy-Black.ttf');
    font-weight: 900;
    font-display: swap;
  }

  @font-face {
    font-family: 'Gilroy';
    src: url('/app/themes/ashleysherwood/resources/fonts/gilroy/Gilroy-Bold.ttf');
    font-weight: 700;
    font-display: swap;
  }

  :root {
    --heading-font: 'Gilroy', serif;

    --color-white: #ffffff;
    --color-black: #202124;

    --color-blue: #00b4ff;
    --color-blue-lighten-5: #1abcff;
    --color-blue-lighten-10: #33c3ff;
    --color-blue-lighten-15: #4dcbff;
    --color-blue-lighten-20: #66d2ff;
    --color-blue-lighten-25: #80daff;
    --color-blue-lighten-30: #99e1ff;
    --color-blue-lighten-35: #b3e9ff;
    --color-blue-lighten-40: #ccf0ff;
    --color-blue-lighten-45: #e5f8ff;
    --color-blue-lighten-50: #ffffff;
    --color-blue-darken-5: #00a2e6;
    --color-blue-darken-10: #0090cc;
    --color-blue-darken-15: #007eb3;
    --color-blue-darken-20: #006c99;
    --color-blue-darken-25: #005a80;
    --color-blue-darken-30: #004866;
    --color-blue-darken-35: #00364d;
    --color-blue-darken-40: #002433;
    --color-blue-darken-45: #00121a;
    --color-blue-darken-50: #000000;



    --bs-link-color: #000000;
    --bs-link-color-rgb: 0, 0, 0;
    --bs-link-hover-color: #000000;
    --bs-link-hover-color-rgb: 0, 0, 0;

  }



  html, body {
    font-family: 'Inter', sans-serif;
  }

  body {
    font-size: 16px;
    position: relative;
    color: rgb(96, 98, 97);
    font-weight: 300;
  }

  .btn {
    --bs-btn-padding-x: 22px;
    --bs-btn-padding-y: 12px;
    --bs-btn-border-radius: 100px;
  }

  .btn-link {
    padding-left: 0;
    padding-right: 0;
    color: inherit;
  }

  .h1, h1 {
    font-size: 4rem;
    font-family: 'Gilroy';
    font-weight: 500;
    line-height: 1.2;
  }

  .h1 span, h1 span {
    color: var(--color-blue);
  }

  .h2, h2 {
    font-size: 2.5rem;
    font-family: 'Gilroy';
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 1rem;
  }

  .h2 del, h2 del {
    display: none 
  }

  .h3, h3 {
    font-size: 2.25rem;
    font-family: 'Gilroy';
    font-weight: 500;
    margin-bottom: 1rem;
  }

  .h4, h4 {
    font-size: 1.5rem;
    font-family: 'Gilroy';
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 1.5rem;
  }

  .h5, h5 {
    font-size: 1.25rem;
    font-family: 'Gilroy';
    font-weight: 500;
    margin-bottom: 1.5rem;
  }


  .h1, h1,
  .h2, h2,
  .h3, h3,
  .h4, h4,
  .h5, h5,
  .h6, h6 {
    color: var(--color-black);
  }

  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;
  }

/*--------------------------------------------------------------
  >> Colours
--------------------------------------------------------------*/ 
  [data-bg-color="dark"] {
    background: var(--color-black);
  }

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


  [data-bg-color="light-grey"] {
    background: #fafafa;
  }


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

  [data-color="light"] {
    color: var(--color-white)
  }

/*--------------------------------------------------------------
  >> Taxonomy Tags
--------------------------------------------------------------*/ 
  .tags-list {
    padding: 0;
    list-style: none;
    display: inline-flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: start;
    margin-bottom: -1rem !important;
  }

  .tags-list li {
    background: #fff;
    padding: 10px 15px;
    border-radius: 15px;
    margin-right: 1rem;
    margin-bottom: 1rem;
    font-size: 0.8rem;
  }

/*--------------------------------------------------------------
  >> Text List (Grid)
--------------------------------------------------------------*/ 
  .text-list {
    padding: 0;
    list-style: none;
    display: inline-grid;
    width: 100%;
    /* justify-content: start; */
    margin-bottom: 20px;
    gap: 20px;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
  }

  .text-list li {
    width: 100%;
  }


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

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

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

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

  .picture-3x4 {
    aspect-ratio: 3/4;
  }


  .picture-4x3 {
    aspect-ratio: 4/3;
  }

  .picture-4x5 {
    aspect-ratio: 4/5;
  }

  .picture-6x7 {
    aspect-ratio: 6/7;
  }

  .picture-16x9 {
    aspect-ratio: 16/9;
  }

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


/*--------------------------------------------------------------
  >> : Column Images
--------------------------------------------------------------*/
  .col-img picture {
    height: 100%;
    border-radius: 2rem;
  }

  .col-img-end picture {
    width: 150%;
  }

/*--------------------------------------------------------------
  >> Made With Love
--------------------------------------------------------------*/ 
  @keyframes made-wtih-heartbeat {
    0% {
      transform: scale( .85 );
    }
    20% {
      transform: scale( 1 );
    }
    40% {
      transform: scale( .85 );
    }
    60% {
      transform: scale( 1 );
    }
    80% {
      transform: scale( .85 );
    }
    100% {
      transform: scale( .85 );
    }
  }

  .made-with .bi:before {
    animation: made-wtih-heartbeat 2.5s infinite;
    color: #FF6961;
    vertical-align: middle;
    transform: translateZ(0) translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000;
    will-change: transform;
  }

  .made-with a {
    color: inherit;
    text-decoration: none;
  }


/*--------------------------------------------------------------
  >> Hide Admin Bar
--------------------------------------------------------------*/ 
  @media screen and (max-width: 782px) {
    html #wpadminbar {
      display: none;
    }
    
    html {
      margin-top: 0 !important;
    }
  }