/* Add custom style here  */

#hero-1 header.theme-dark { background-color: var(--blue-700) }

#hero-2 header.hero-bg > .container-overlay { background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)); } 
#hero-2 header.theme-dark .container-btn a.btn:nth-child(1):link,
#hero-2 header.theme-dark .container-btn a.btn:nth-child(1):link,
#hero-2 header.theme-dark .container-btn a.btn:nth-child(1):visited { color: var(--white-000) }

#hero-2 header.theme-dark .container-btn a.btn:nth-child(1):focus,
#hero-2 header.theme-dark .container-btn a.btn:nth-child(1):hover,
#hero-2 header.theme-dark .container-btn a.btn:nth-child(1):active { color: var(--black-000) }

#hero-2 header.theme-dark .container-btn a.btn:nth-child(1):link,
#hero-2 header.theme-dark .container-btn a.btn:nth-child(1):visited { background-color: var(--green-500) }

#hero-2 header.theme-dark .container-btn a.btn:nth-child(1):focus,
#hero-2 header.theme-dark .container-btn a.btn:nth-child(1):hover,
#hero-2 header.theme-dark .container-btn a.btn:nth-child(1):active { background-color: var(--green-400) }

#hero-2 header.theme-dark .container-btn a.btn:nth-child(1):link,
#hero-2 header.theme-dark .container-btn a.btn:nth-child(1):visited { border-color: var(--green-500) }

#hero-2 header.theme-dark .container-btn a.btn:nth-child(1):focus,
#hero-2 header.theme-dark .container-btn a.btn:nth-child(1):hover,
#hero-2 header.theme-dark .container-btn a.btn:nth-child(1):active { border-color: var(--green-400) }

#hero-2 header.theme-dark .container-btn a.btn:nth-child(2):link,
#hero-2 header.theme-dark .container-btn a.btn:nth-child(2):visited { color: var(--white-000) }

#hero-2 header.theme-dark .container-btn a.btn:nth-child(2):focus,
#hero-2 header.theme-dark .container-btn a.btn:nth-child(2):hover,
#hero-2 header.theme-dark .container-btn a.btn:nth-child(2):active { color: var(--white-000) }

#hero-2 header.theme-dark .container-btn a.btn:nth-child(2):link,
#hero-2 header.theme-dark .container-btn a.btn:nth-child(2):visited { background-color: var(--green-500) }

#hero-2 header.theme-dark .container-btn a.btn:nth-child(2):focus,
#hero-2 header.theme-dark .container-btn a.btn:nth-child(2):hover,
#hero-2 header.theme-dark .container-btn a.btn:nth-child(2):active { background-color: var(--green-400) }

#hero-2 header.theme-dark .container-btn a.btn:nth-child(2):link,
#hero-2 header.theme-dark .container-btn a.btn:nth-child(2):visited { border-color: var(--green-500) }

#hero-2 header.theme-dark .container-btn a.btn:nth-child(2):focus,
#hero-2 header.theme-dark .container-btn a.btn:nth-child(2):hover,
#hero-2 header.theme-dark .container-btn a.btn:nth-child(2):active { border-color: var(--green-400) }



#hero-3 header.theme-dark h1 {
   font-family: 'Abril Fatface', serif;
   font-size: calc(48px + (100 - 48) * ((100vw - 320px)/ (1600 - 320)));
}




#hero-4 header.theme-light { background-color: var(--trend-100) }
#hero-4 header.theme-light .container-btn a.btn:nth-child(1):link,
#hero-4 header.theme-light .container-btn a.btn:nth-child(1):visited { color: var(--black-000) }

#hero-4 header.theme-light .container-btn a.btn:nth-child(1):focus,
#hero-4 header.theme-light .container-btn a.btn:nth-child(1):hover,
#hero-4 header.theme-light .container-btn a.btn:nth-child(1):active { color: var(--white-000) }

#hero-4 header.theme-light .container-btn a.btn:nth-child(1):focus,
#hero-4 header.theme-light .container-btn a.btn:nth-child(1):hover,
#hero-4 header.theme-light .container-btn a.btn:nth-child(1):active { background-color: var(--gray-600) }

#hero-4 header.theme-light .container-btn a.btn:nth-child(1):link,
#hero-4 header.theme-light .container-btn a.btn:nth-child(1):visited { border-color: var(--black-000) }

#hero-4 header.theme-light .container-btn a.btn:nth-child(1):focus,
#hero-4 header.theme-light .container-btn a.btn:nth-child(1):hover,
#hero-4 header.theme-light .container-btn a.btn:nth-child(1):active { border-color: var(--gray-600) }

#hero-4 header.theme-light .container-btn a.btn:nth-child(2):link,
#hero-4 header.theme-light .container-btn a.btn:nth-child(2):visited { color: var(--white-000) }

#hero-4 header.theme-light .container-btn a.btn:nth-child(2):focus,
#hero-4 header.theme-light .container-btn a.btn:nth-child(2):hover,
#hero-4 header.theme-light .container-btn a.btn:nth-child(2):active { color: var(--white-000) }

#hero-4 header.theme-light .container-btn a.btn:nth-child(2):link,
#hero-4 header.theme-light .container-btn a.btn:nth-child(2):visited { background-color: var(--black-000) }

#hero-4 header.theme-light .container-btn a.btn:nth-child(2):focus,
#hero-4 header.theme-light .container-btn a.btn:nth-child(2):hover,
#hero-4 header.theme-light .container-btn a.btn:nth-child(2):active { background-color: var(--gray-600) }

#hero-4 header.theme-light .container-btn a.btn:nth-child(2):link,
#hero-4 header.theme-light .container-btn a.btn:nth-child(2):visited { border-color: var(--black-000) }

#hero-4 header.theme-light .container-btn a.btn:nth-child(2):focus,
#hero-4 header.theme-light .container-btn a.btn:nth-child(2):hover,
#hero-4 header.theme-light .container-btn a.btn:nth-child(2):active { border-color: var(--gray-600) }

#hero-4 header.theme-light h1 {
    font-family: 'Prata', serif;
    font-weight: 400;
    line-height: 1.2
 }

/* Desktops */
@media (min-width: 768px) {
    body { padding: 0% 0% }
 }
 
 /* Mobiles */
 @media (max-width: 767px) {
    body { padding: 0% 0% }
 }



 #hero-4 header.theme-dark .badge { color: var(--white-000) }
 #hero-4 header.theme-dark .badge { background-color: var(--black-000) }
 #hero-4 header.theme-dark h1 { color: var(--green-400) }
 #hero-4 header.theme-dark .container-btn a.btn:nth-child(1):link,
 #hero-4 header.theme-dark .container-btn a.btn:nth-child(1):visited { color: var(--white-000) }
 
 #hero-4 header.theme-dark .container-btn a.btn:nth-child(1):focus,
 #hero-4 header.theme-dark .container-btn a.btn:nth-child(1):hover,
 #hero-4 header.theme-dark .container-btn a.btn:nth-child(1):active { color: var(--green-400) }
 
 #hero-4  header.theme-dark .container-btn a.btn:nth-child(1):focus,
 #hero-4 header.theme-dark .container-btn a.btn:nth-child(1):hover,
 #hero-4 header.theme-dark .container-btn a.btn:nth-child(1):active { background-color: var(--black-000) }
 
 #hero-4 header.theme-dark .container-btn a.btn:nth-child(1):link,
 #hero-4 header.theme-dark .container-btn a.btn:nth-child(1):visited { border-color: var(--white-000) }
 
 #hero-4 header.theme-dark .container-btn a.btn:nth-child(1):focus,
 #hero-4 header.theme-dark .container-btn a.btn:nth-child(1):hover,
 #hero-4 header.theme-dark .container-btn a.btn:nth-child(1):active { border-color: var(--green-400) }
 
 #hero-4 header.theme-dark .container-btn a.btn:nth-child(2):link,
 #hero-4 header.theme-dark .container-btn a.btn:nth-child(2):visited { color: var(--black-000) }
 
 #hero-4 header.theme-dark .container-btn a.btn:nth-child(2):focus,
 #hero-4 header.theme-dark .container-btn a.btn:nth-child(2):hover,
 #hero-4 header.theme-dark .container-btn a.btn:nth-child(2):active { color: var(--black-000) }
 
 #hero-4 header.theme-dark .container-btn a.btn:nth-child(2):link,
 #hero-4 header.theme-dark .container-btn a.btn:nth-child(2):visited { background-color: var(--green-400) }
 
 #hero-4 header.theme-dark  .container-btn a.btn:nth-child(2):focus,
 #hero-4 header.theme-dark .container-btn a.btn:nth-child(2):hover,
 #hero-4 header.theme-dark .container-btn a.btn:nth-child(2):active { background-color: var(--green-500) }
 
 #hero-4 header.theme-dark .container-btn a.btn:nth-child(2):link,
 #hero-4 header.theme-dark .container-btn a.btn:nth-child(2):visited { border-color: var(--green-400) }
 
 #hero-4 header.theme-dark .container-btn a.btn:nth-child(2):focus,
 #hero-4 header.theme-dark .container-btn a.btn:nth-child(2):hover,
 #hero-4 header.theme-dark .container-btn a.btn:nth-child(2):active { border-color: var(--green-500) }
 
 #hero-5 header .badge {
   background-color: var(--black-000);
   color: var(--white-000);
   text-decoration: underline;
   text-decoration-thickness: 2px;
   text-underline-offset: 7px;
   text-decoration-color: var(--green-400);
   text-decoration-style: wavy;
}

#hero-5 header.theme-dark h1 {
   font-family: 'Barlow Condensed', sans-serif;
   font-weight: 600;
   letter-spacing: 4px;
   font-size: calc(48px + (100 - 48) * ((100vw - 320px)/ (1600 - 320)));
}

#hero-5 header.theme-dark h2 {
   font-family: 'Zilla Slab', serif;
   font-weight: 400;
}


#hero-6 header.theme-light { background-color: var(--trend-200) }
#hero-6 header.theme-light .badge { background-color: var(--purple-700) }
#hero-6 header.theme-light .container-btn a.btn:nth-child(1):link,
#hero-6 header.theme-light .container-btn a.btn:nth-child(1):visited { color: var(--pink-700) }

#hero-6 header.theme-light .container-btn a.btn:nth-child(1):focus,
#hero-6 header.theme-light .container-btn a.btn:nth-child(1):hover,
#hero-6 header.theme-light .container-btn a.btn:nth-child(1):active { color: var(--white-000) }

#hero-6 header.theme-light .container-btn a.btn:nth-child(1):focus,
#hero-6 header.theme-light .container-btn a.btn:nth-child(1):hover,
#hero-6 header.theme-light .container-btn a.btn:nth-child(1):active { background-color: var(--pink-500) }

#hero-6 header.theme-light .container-btn a.btn:nth-child(1):link,
#hero-6 header.theme-light .container-btn a.btn:nth-child(1):visited { border-color: var(--pink-700) }

#hero-6 header.theme-light .container-btn a.btn:nth-child(1):focus,
#hero-6 header.theme-light .container-btn a.btn:nth-child(1):hover,
#hero-6 header.theme-light .container-btn a.btn:nth-child(1):active { border-color: var(--pink-500) }

#hero-6 header.theme-light .container-btn a.btn:nth-child(2):link,
#hero-6 header.theme-light .container-btn a.btn:nth-child(2):visited { color: var(--white-000) }

#hero-6 header.theme-light .container-btn a.btn:nth-child(2):focus,
#hero-6 header.theme-light .container-btn a.btn:nth-child(2):hover,
#hero-6 header.theme-light .container-btn a.btn:nth-child(2):active { color: var(--white-000) }

#hero-6 header.theme-light .container-btn a.btn:nth-child(2):link,
#hero-6 header.theme-light .container-btn a.btn:nth-child(2):visited { background-color: var(--pink-700) }

#hero-6 header.theme-light .container-btn a.btn:nth-child(2):focus,
#hero-6 header.theme-light .container-btn a.btn:nth-child(2):hover,
#hero-6 header.theme-light .container-btn a.btn:nth-child(2):active { background-color: var(--pink-500) }

#hero-6 header.theme-light .container-btn a.btn:nth-child(2):link,
#hero-6 header.theme-light .container-btn a.btn:nth-child(2):visited { border-color: var(--pink-700) }

#hero-6 header.theme-light .container-btn a.btn:nth-child(2):focus,
#hero-6 header.theme-light .container-btn a.btn:nth-child(2):hover,
#hero-6 header.theme-light .container-btn a.btn:nth-child(2):active { border-color: var(--pink-500) }

#hero-6 header.theme-light h1 {
   font-family: 'Playfair Display', serif;
   letter-spacing: -4px;
   font-weight: 400;
   font-size: calc(60px + (98 - 60) * ((100vw - 320px) / (1600 - 320)));
}


#hero-7 header.theme-dark { background-color: var(--trend-800) }
#hero-7 header.theme-dark .container-btn a.btn:nth-child(1):link,
#hero-7 header.theme-dark .container-btn a.btn:nth-child(1):visited { color: var(--white-000) }

#hero-7 header.theme-dark .container-btn a.btn:nth-child(1):focus,
#hero-7 header.theme-dark .container-btn a.btn:nth-child(1):hover,
#hero-7 header.theme-dark .container-btn a.btn:nth-child(1):active { color: var(--white-000) }

#hero-7 header.theme-dark .container-btn a.btn:nth-child(1):link,
#hero-7 header.theme-dark .container-btn a.btn:nth-child(1):visited { background-color: var(--blue-500) }

#hero-7 header.theme-dark .container-btn a.btn:nth-child(1):focus,
#hero-7 header.theme-dark .container-btn a.btn:nth-child(1):hover,
#hero-7 header.theme-dark .container-btn a.btn:nth-child(1):active { background-color: var(--red-600) }

#hero-7 header.theme-dark .container-btn a.btn:nth-child(1):link,
#hero-7 header.theme-dark .container-btn a.btn:nth-child(1):visited { border-color: var(--blue-500) }

#hero-7 header.theme-dark .container-btn a.btn:nth-child(1):focus,
#hero-7 header.theme-dark .container-btn a.btn:nth-child(1):hover,
#hero-7 header.theme-dark .container-btn a.btn:nth-child(1):active { border-color: var(--rose-600) }

#hero-7 header.theme-dark .container-btn a.btn:nth-child(2):link,
#hero-7 header.theme-dark .container-btn a.btn:nth-child(2):visited { color: var(--blue-300) }

#hero-7 header.theme-dark .container-btn a.btn:nth-child(2):focus,
#hero-7 header.theme-dark .container-btn a.btn:nth-child(2):hover,
#hero-7 header.theme-dark .container-btn a.btn:nth-child(2):active { color: var(--red-600) }

#hero-7 header.theme-dark .container-btn a.btn:nth-child(2):focus,
#hero-7 header.theme-dark .container-btn a.btn:nth-child(2):hover,
header.theme-dark .container-btn a.btn:nth-child(2):active { background-color: var(--trend-800) }

#hero-7 header.theme-dark .container-btn a.btn:nth-child(2):link,
#hero-7 header.theme-dark .container-btn a.btn:nth-child(2):visited { border-color: var(--blue-400) }

#hero-7 header.theme-dark .container-btn a.btn:nth-child(2):focus,
#hero-7 header.theme-dark .container-btn a.btn:nth-child(2):hover,
#hero-7 header.theme-dark .container-btn a.btn:nth-child(2):active { border-color: var(--red-600) }

#hero-7 header.theme-light h1 {
   font-family: 'Inter', sans-serif;
   font-weight: 300;
}

#hero-7 header.theme-light h2 {
   font-family: 'Inter', sans-serif;
   font-weight: 400;
   line-height: 1.4;
}

#hero-8 header.theme-light h1 span.highlight { color: var(--green-500) }
#hero-8 header.theme-light .container-btn a.btn:nth-child(1):link,
#hero-8 header.theme-light .container-btn a.btn:nth-child(1):visited { color: var(--green-500) }

#hero-8 header.theme-light .container-btn a.btn:nth-child(1):focus,
#hero-8 header.theme-light .container-btn a.btn:nth-child(1):hover,
#hero-8 header.theme-light .container-btn a.btn:nth-child(1):active { color: var(--white-000) }

#hero-8 header.theme-light .container-btn a.btn:nth-child(1):focus,
#hero-8 header.theme-light .container-btn a.btn:nth-child(1):hover,
#hero-8 header.theme-light .container-btn a.btn:nth-child(1):active { background-color: var(--green-500) }

#hero-8 header.theme-light .container-btn a.btn:nth-child(1):focus,
#hero-8 header.theme-light .container-btn a.btn:nth-child(1):hover,
#hero-8 header.theme-light .container-btn a.btn:nth-child(1):active { border-color: var(--green-500) }

#hero-8 header.theme-light .container-btn a.btn:nth-child(1):link,
#hero-8 header.theme-light .container-btn a.btn:nth-child(1):visited { border-color: var(--green-500) }

#hero-8 header.theme-light h1 {
   font-family: 'Lato', sans-serif;
   font-weight: 900;
}

#hero-8 header.theme-light h2 {
   font-family: 'Lato', sans-serif;
   font-weight: 400;
   line-height: 1.4;
}