/* ########## FONTS are in an extra folder##########
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@font-face {
font-family:'euclid-light';
src: url(../fonts/Euclid/EuclidCircularB-Light.otf)  format('opentype');
}
@font-face {
font-family:'euclid-medium';
src: url(../fonts/Euclid/EuclidCircularB-Medium.otf)  format('opentype');
}
@font-face {
font-family:'euclid-regular';
src: url(../fonts/Euclid/EuclidCircularB-Regular.otf)  format('opentype');
}


/* ######### custom properties variables TYPOGRAPHY ########
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {

/*Font-Family*/

--ff-primary: 'euclid-regular', sans-serif;
--ff-secondary: 'euclid-medium', sans-serif;
--ff-header: 'euclid-light', sans-serif;

/* font sizes scaling! responsive! set in body  */
--minFontSize: 1.1rem;
--maxFontSize: 1.25rem;
--scaler: 4vw;

/* spacing */
--spacer: 1.25rem;

}


/* ######## RESETS #########
–––––––––––––––––––––––––––––––––––––––––––––––––– */
*, *::before, *::after {
box-sizing: border-box;
/* outline: 1px dashed rgb(243, 0, 0); */
/* above line to quickly show boundaries */
}

h1, .h1, h2, .h2,h3, .h3 {line-height: 1.1; }
body, header, h1, h2, h3, ul, li, button, p {margin: 0; }
img {max-width: 100%; height: auto;display: block;}
ul[class], ol[class] { padding: 0; list-style: none;}
button, input, textarea, select {font:inherit;}



/* ######### BASE STYLES BASIC AREAS #########
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
scroll-behavior: smooth;
}
body {
font-family:  var(--ff-primary); 
min-height: 100vh;
font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
line-height: 1.3;
margin: 0;

}


.flow > * + * {
margin-top: var(--flow-space, var(--spacer));
}
section {
padding-bottom: 1.5em ;

}
section:first-of-type {
padding-top: 1.5em;
border-top: 0.001em solid rgb(230, 228, 228);
}
section:last-of-type {
padding-top: 5em;
}

.container {
padding: 0;
margin: 0 auto;
width: min(65ch, 100vw - 1.2em);

}

p {
--flow-space: 1.3rem;
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

/* Header Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2 {max-width: 25ch;}

h1, h2, h3, h4, h5, h6 {
font-family: var(--ff-header); 
/* font-family: 'euclid-light', sans-serif; */
font-weight: 400;
margin: 6rem 0 1.5rem;
letter-spacing: 0.1rem;
line-height: 1.2;
}

h1 {
font-size: clamp( calc(var(--minFontSize) * 1.9), calc(var(--scaler) * 2), calc(var(--maxFontSize) * 4.4) );
}

h2 {
font-size: clamp( calc(var(--minFontSize) * 1.7), calc(var(--scaler) * 1.8), calc(var(--maxFontSize) * 4) );
}

h3 {
font-size: clamp( calc(var(--minFontSize) * 1.4), calc(var(--scaler) * 1.6), calc(var(--maxFontSize) * 3.2) );
}

h4  {
font-size: clamp( calc(var(--minFontSize) * 1.3), calc(var(--scaler) * 1.2), calc(var(--maxFontSize) * 2.5) );
} 
h5 {
font-size: clamp( calc(var(--minFontSize) * 1.2), calc(var(--scaler) * 1.1), calc(var(--maxFontSize) * 1.9) );
} 
h6 {
font-size: clamp( calc(var(--minFontSize) * 1.1), calc(var(--scaler) * 1.0), calc(var(--maxFontSize) * 1.8) );
} 


.flex {
display: flex;
justify-content: space-around;
}
/* .flex li {
padding: 2em;
} */


@media all and (max-width: 600px) {
.flex {
flex-direction: column;
justify-content: center;
align-items: center;

}
}

.container-wider {
padding: 0;
margin: 0 auto;
width: min(1400px, 100vw - 1.2em); 

}

.flexfooter {
display: flex;
justify-content: space-around;

}
.flex li {
padding: 2em;
}

@media all and (max-width: 600px) {
.flexfooter {
flex-direction: column;
}
}




/* Navigation */

.logo {width: 250px;
padding-top: 1.3em}

nav  {
padding: 0;
margin: 0 auto;
margin: 0 10% ;
/* outline: 1px dashed rgb(238, 7, 7); */
font-family:  var(--ff-secondary); 
font-weight: 600;
}

nav ul {
list-style: none;
text-transform: uppercase;
display: flex;
justify-content: space-between;
align-items: center;
}

nav ul a {
text-decoration: none;
display: block;
color: black;

}
.nav-items {
margin: 0;
}


nav ul a:hover {
color:rgb(139, 139, 139);
}

/* *********** media queries *********** */
@media all and (max-width: 1200px) {
.logo {
width: min(100%, 350px); 
padding-top: 0.2em;}
nav ul {
flex-direction: column;
width: 100%;
justify-content: center;
}
nav ul a {
padding: 0.5em 0;

}
nav ul li:last-child {
display: none;
}
}



/*back to top button*/

#backtotopBtn {
display: none; 
position: fixed; 
bottom: 2rem; 
right: 2rem; 
z-index: 99; 
cursor: pointer; 
background-color: rgb(139, 139, 139);
border-radius: 50em;
height: 25px;
width: 25px;
}

#backtotopBtn:hover {background-color: rgb(155, 204, 22);}

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a:link {
font-family:  var(--ff-secondary); 
font-weight: 600; 
color: black;}
/* a:visited {color: purple; }
a:hover, a:focus {color: var(--clr-links-hover); }
a:active { color: var(--clr-accent);} */

.u-align-center { text-align: center;}
.u-center-svg  {
display: block;
margin: auto; 
margin-top: 3em;
width: 150px;}

.u-add-margin {margin: 1.5em 0 }

.u-small-font {
font-size: clamp( calc(var(--minFontSize) * 0.6), calc(var(--scaler) * 0.7), calc(var(--maxFontSize) * 0.8) );
}
.u-large-font {
font-family: var(--ff-header); 
font-size: clamp( calc(var(--minFontSize) * 1.1), calc(var(--scaler) * 1.1), calc(var(--maxFontSize) * 1.4) );
}

.u-notunderlined {
text-decoration: none; 
}
.u-notunderlined:visited {
color:black;    }


.news {
margin: 0 3em 1.2em;
text-transform: uppercase;
}
.grey-background {
background-color: #F8F8F8;

}

/* for bullet lists with arrow */

.arrow {
list-style-type: none;
position: relative;
padding-left: 1em;
padding-bottom: 0.9em;
}

.arrow:before {
content: "\2192";
font-size: 1.5rem;
position: absolute;
top: -0.3rem;
left: -1.3rem;
}

.icon_item {
    text-align: center;
    max-width: 10rem;
}

@media all and (max-width: 600px) {
    .icon_item {
        text-align: center;
        max-width: 7rem;
    }
    }