/* ------------------------------------------------------------------- 
 * ## colors
 * ------------------------------------------------------------------- */
 :root {
    --color-1: hsla(38, 100%, 50%, 1) !important;
    --color-2: hsla(58, 52%, 53%, 1) !important;
    --color-3: hsla(52, 75%, 80%, 1) !important;

    /* theme color variations
     */
    --color-1-lighter: hsla(38, 93%, 64%, 1) !important;
    --color-1-light  : hsla(38, 93%, 54%, 1) !important;
    --color-1-dark   : hsla(38, 100%, 50%, 1) !important;
    --color-1-darker : hsla(38, 93%, 24%, 1) !important;
    --color-2-lighter: hsla(52, 79%, 83%, 1) !important;
    --color-2-light  : hsla(52, 79%, 73%, 1) !important;
    --color-2-dark   : hsla(52, 79%, 53%, 1) !important;
    --color-2-darker : hsla(52, 79%, 43%, 1) !important;
}

/* ===================================================================
 * # services
 *
 * ------------------------------------------------------------------- */
.service-icon--product-design {
   background-image: url(../images/icons/services-yellow/icon-product-design.png) !important;
}

.service-icon--branding {
   background-image: url(../images/icons/services-yellow/icon-branding.png) !important;
}

.service-icon--frontend {
   background-image: url(../images/icons/services-yellow/icon-frontend.png) !important;
}

.service-icon--research {
   background-image: url(../images/icons/services-yellow/icon-research.png) !important;
}

.service-icon--illustration {
   background-image: url(../images/icons/services-yellow/icon-illustration.png) !important;
}

.service-icon--ecommerce {
   background-image: url(../images/icons/services-yellow/icon-ecommerce.png) !important;
}


/* ===================================================================
 * # hero
 *
 * ------------------------------------------------------------------- */
.s-hero__bg {
    background-image: url(../images/hero-bg-yellow.jpg) !important;
}

.s-hero__content h1::before {
    background-image: url(../images/dots-yellow.png) !important;
}

.s-about::before {
    background-image: url(../images/dots-yellow.png) !important;
}
 
.folio-item__title {
    color: hsla(38, 100%, 50%, 1) !important;
}

.pswp__caption h4 {
    color: hsla(38, 100%, 50%, 1) !important;
}