/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* Global variables */
:root {
    --primaryColor: #11331f;
		--primaryLight: #ffba43;
		--secondary: #ffba43;
		--secondaryLight: #ffba43;
		--headerColor: #1a1a1a;
		--bodyTextColor: #000000;
		--bodyTextColorWhite: #fafbfc;
    /* Font families */
    --headerFont: "Bungee", Arial, sans-serif;
    --bodyFont: "Roboto", Arial, sans-serif;

    /* Font sizes */
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.7075rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1.5rem;

    /* Section padding: 60px – 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;

    /* Colors – adjust to match your design or remove if defined elsewhere */
    --headerColor: #111111;
    --bodyTextColor: #222222;
    --primary: #0066cc;
}

/* Self-hosted font: Bungee regular */
@font-face {
    font-family: "Bungee";
    src: url("assets/fonts/bungee-v17-latin/bungee-v17-latin-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url("assets/fonts/roboto-v50-latin/roboto-v50-latin-regular.woff2") format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url("assets/fonts/roboto-v50-latin/roboto-v50-latin-700.woff2") format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url("assets/fonts/roboto-v50-latin/roboto-v50-latin-900.woff2") format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* Base text – body font everywhere by default */
body {
    font-family: var(--bodyFont);
    font-size: var(--bodyFontSize);
    color: var(--bodyTextColor);
}

/* Headings */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
    font-family: var(--headerFont); /* Bungee */
    line-height: 1.2em !important;
    font-size: var(--headerFontSize);
}

/* Body text inside main content area */

p {
    font-family: var(--bodyFont);
    font-size: var(--bodyFontSize);
}

@media only screen and (max-width: 720px) {
  p {
  font-size: 1rem;
  }
}

/* Text links inside content */
.cs-link {
    color: var(--primaryColor);
    font-family: var(--bodyFont);
}

.cs-link-light {
  color: white;
  font-family: var(--bodyFont);
}

.cs-link-header {
  color: var(--primaryColor) !important;
  font-family: var(--headerFont);
}

/*-- -------------------------- -->
<---          Button            -->
<--- -------------------------- -*/

.primary-button .elementor-button {
position: relative;
z-index: 1;

display: inline-block;
width: auto;
padding: 1rem 2rem;

background-color: #9c7c43;
color: var(--bodyTextColorWhite);
text-decoration: none;
text-transform: uppercase;

font-family: var(--headerFont);
font-size: 1rem;
line-height: 1em;
font-weight: bold;

border-radius: 0.25rem;
border: none;
overflow: hidden;
text-align: center;


box-shadow: none;

transition: color 0.3s;
transition-delay: 0.1s;
}

/* protect Elementor buttons from global anchor rules */

a.elementor-button,
a.elementor-button:visited,
a.elementor-button:hover,
a.elementor-button:focus {
    background-color: #9c7c43;
    color: var(--bodyTextColorWhite);
    text-decoration: none;
}

.primary-button .elementor-button::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;

width: 0;
height: 100%;
background-color: #000;
opacity: 1;

transition: width 0.3s;
}

.primary-button .elementor-button:hover {
color: #fff;
}

.primary-button .elementor-button:hover::before {
width: 100%;
}

/*-- -------------------------- -->
<---          Header            -->
<--- -------------------------- -*/

#cs-navigation ul li a {
  font-size: clamp(.875rem,1vw,1rem);
  font-family: var(--headerFont);
  }
  
/*-- -------------------------- -->
<---          Hero              -->
<--- -------------------------- -*/
  
#hero .cs-text {
	font-size: clamp(1rem, 1.95vw, 1.25rem);
	line-height: 1.5em;
	width: 100%;
	max-width: clamp(29rem, 60vw, 38.785rem);
	margin: 0;
	margin-bottom: (32/16rem);
  }
  
#hero .elementor-heading-title {
font-size: var(--headerFontSize);
  }
  
@media (max-width: 720px) {
#hero .elementor-heading-title {
font-size: clamp(1.4rem, 6.4vw, 3.8125rem);
  }
}

#hero span {
  font-family: var(--headerFont);
}
  
/*-- -------------------------- -->
<---          sbs-78            -->
<--- -------------------------- -*/

#sbs-78 {
  padding: var(--sectionPadding);
}

@media (max-width: 768px) {
    #sbs-78 h2,
    #sbs-78 h3{
    font-size: clamp(1.4rem,6.4vw,3.8125rem);
  }
}

/*-- -------------------------- -->
<---          sbsr-80           -->
<--- -------------------------- -*/

#sbsr-80 {
  padding: var(--sectionPadding);
}

/*-- -------------------------- -->
<---          sbsr-87           -->
<--- -------------------------- -*/

#sbsr-87 {
    padding: var(--sectionPadding);
}

#sbsr-87 h2 {
    font-size: var(--headerFontSize);
}

/*-- -------------------------- -->
<---          sbs-21            -->
<--- -------------------------- -*/

#sbs-21 {
    padding: var(--sectionPadding);
}

#sbs-21 h2 {
    font-size: var(--headerFontSize);
}

/*-- -------------------------- -->
<---          sbs-22            -->
<--- -------------------------- -*/

#sbs-22 {
  padding: var(--sectionPadding);
}

@media only screen and (max-width: 720px) {
  #sbs-22 .elementor-heading-title {
    font-size: clamp(1.4rem, 6.4vw, 3.0625rem);
    text-align: center;
  }
}

  @media only screen and (max-width: 720px) {
    #sbs-22 p {
    font-size: 1rem;
    line-height: 1.5em;
  }
}

@media only screen and (max-width: 720px) {
  #sbs-22 .cs-text {
    text-align: center;
    font-size: 1rem;
  }
}

@media only screen and (max-width: 720px) {
  #sbs-22 .primary-button {
    align-self: center;
  }
}

/*-- -------------------------- -->
<---          sbsr-22           -->
<--- -------------------------- -*/

#sbsr-22 {
  padding: var(--sectionPadding);
}

@media only screen and (max-width: 720px) {
  #sbsr-22 .elementor-heading-title {
    font-size: clamp(1.4rem, 6.4vw, 3.0625rem);
    text-align: center;
  }
}

/*-- -------------------------- -->
<---          sbs-text          -->
<--- -------------------------- -*/

#sbs-text {
  padding: var(--sectionPadding);
}

@media only screen and (max-width: 720px) {
  #sbs-text .elementor-heading-title {
    font-size: clamp(1.4rem, 6.4vw, 3.0625rem);
    text-align: center;
  }
}

/*-- -------------------------- -->
<---          cta-88             -->
<--- -------------------------- -*/

#cta-88 {
  padding: var(--sectionPadding);
}

#cta-88 .elementor-heading-title {
  text-align: center;
  font-size: var(--headerFontSize);
}

#cta-88 .cs-text {
  text-align: center;
}

@media only screen and (max-width: 720px) {
  #cta-88 .elementor-heading-title {
    font-size: clamp(1.4rem, 6.4vw, 3.0625rem);
  }
}

/*-- -------------------------- -->
<---       content-text         -->
<--- -------------------------- -*/

@media only screen and (max-width: 720px) {
  #content-text .elementor-heading-title {
    font-size: clamp(1.4rem, 6.4vw, 3.0625rem);
  }
}

#content-text .elementor-heading-title {
  text-align: center;
  margin-top: 2rem;
}
  

/*-- -------------------------- -->
<---          steps             -->
<--- -------------------------- -*/

#steps {
  padding: var(--sectionPadding);
}

@media only screen and (max-width: 1024px) {
  #steps h5,
  #steps h4,
  #steps h3 {
    font-size: clamp(1.4rem, 6.4vw, 3.0625rem);
    text-align: center;
  }
}

  #steps h5 {
    font-size: clamp(1.4rem, 1.8vw, 3.0625rem);
    text-align: center;
  }

@media only screen and (max-width: 1024px) {
  #steps p {
    text-align: center;
  }
}

#steps h3,
#steps h5,
#steps p {
  color: white;
}

.grid-boxes {
  padding: clamp(1rem,3vw,2rem);
  background-color: var( --e-global-color-secondary );
  }

/*-- -------------------------- -->
<---      collection-1570       -->
<--- -------------------------- -*/

#collection-1570 {
    padding: var(--sectionPadding);
}

#collection-1570 h2 { 
font-size: var(--headerFontSize);
}
    
#collection-1570 h3 {
    font-size: clamp(1.3075rem, 1.6vw, 1.3625rem);
}

/*-- -------------------------- -->
<---          slider            -->
<--- -------------------------- -*/

#slider {
    padding: clamp(3.75rem, 7.82vw, 6.25rem) 0; /* elementor custom code */
}

#slider .elementor-slide-description {
    font-size: clamp(1rem, 1.95vw, 1.25rem);
    line-height: 1.5em;
}

#slider .elementor-slide-heading {
    font-size: clamp(1.0rem, 1.95vw, 1.25rem);
    line-height: 1.5em;
}


/*-- -------------------------- -->
<---        sami-antti          -->
<--- -------------------------- -*/
  
#sami-antti {
  padding: var(--sectionPadding);
}

/*-- -------------------------- -->
<---          text-block        -->
<--- -------------------------- -*/

#text-block {
  padding: var(--sectionPadding);
}

/*-- -------------------------- -->
<---          Banner            -->
<--- -------------------------- -*/

#banner {
    padding-bottom: clamp(5rem,13vw,8.75rem);
    padding-top: clamp(5rem,13vw,8.75rem);
}
  
#banner span {
    color: var(--bodyTextColorWhite);
    font-family: var(--headerFont);
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    margin: 0 auto .75rem;
    max-width: 43.75rem;
    position: relative;
    text-align: center;
    text-transform: uppercase
  }
  
@media only screen and (max-width: 720px) {
  #banner span {
  font-size: clamp(1.7rem,6.4vw,3.8125rem);
  }
}

#banner time {
  color: var( --primaryLight);
  font-family: var(--bodyFont);
  font-size: var(--bodyFontSize);
  }

/*-- -------------------------- -->
<---     Tietosuojaseloste      -->
<--- -------------------------- -*/

#tietosuojaseloste {
    padding: var(--sectionPadding);
}

/*-- -------------------------- -->
<---          Footer            -->
<--- -------------------------- -*/

#footer h3 {
  color: white;
}