/*-------------------- Roboto -----------------------------------------*/






/* SourceSans-Bold */

@font-face {
   font-family: 'SourceSans-Bold';
   src:

     url("./fonts/SourceSans3-Bold.woff2") format("woff2");

     font-style: normal;

}

/* SourceSans-Medium */

@font-face {
   font-family: 'SourceSans-Medium';
   src:

      url("./fonts/SourceSans3-Medium.woff2") format("woff2");
  
   font-style: normal;

}


/* SourceSans-Regular */

@font-face {
   font-family: 'SourceSans-Regular';
   src:


      url("./fonts/SourceSans3-Regular.woff2") format("woff2");

   font-style: normal;

}





/* Raleway-Bold */

@font-face {
   font-family: 'Raleway-Bold';
   src:

      url("./fonts/Raleway-Bold.woff2") format("woff2");

}








:root {

   --header-h: 64px;
   /* set your real header height */


}


html, body {
  height: 100dvh;        /* full viewport height */
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  scroll-behavior: smooth;     /* prevent window scrollbar */
}


html {

   overflow-x: hidden;
   margin: 0;

}


body {
   font-family: 'SourceSans-Regular', sans-serif;
   color: #1D1D1D;
   /* prevent content from hiding under the fixed header */
   margin-top: 60px;
   /* adjust to match header height */
   margin: 0;
   height: 100dvh;
   /* mobile-safe vh */
   display: flex;
   grid-template-rows: var(--header-h) 1fr;
   overflow: hidden;
   /* hide window scrollbar */
   flex-direction: column;
}




/* WebKit browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
   width: 12px;
   height: 8px;
   /* for horizontal scrollbars */
}

::-webkit-scrollbar-track {
   background: var(--neutral-50, #F7F6F6);
   border-radius: 27px;
}

::-webkit-scrollbar-thumb {
   background: var(--neutral-300, #DFDCDD);
   border-radius: 27px;
   border: 2px solid var(--neutral-50, #F7F6F6);
   /* keeps rounded look */
}

::-webkit-scrollbar-thumb:hover {
   background: var(--neutral-400, #C8C5C5);
}

/* Firefox */
* {
   scrollbar-width: auto;
   scrollbar-color: var(--neutral-300, #DFDCDD) var(--neutral-50, #F7F6F6);
}


a,
.card,
.category,
section,
button,
textarea,
svg * {

   transition-duration: 0.2s;
}