/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/
.post, .page{
  margin: 0px;
}

/*--------------------------------------------------------------
# FontFace
--------------------------------------------------------------*/
@font-face {
    font-family: 'Gotham-sm-medium';
    src: url('../fonts/GothamRndSSm-Medium.eot');
    src: url('../fonts/GothamRndSSm-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GothamRndSSm-Medium.woff2') format('woff2'),
        url('../fonts/GothamRndSSm-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham-sm-bold';
    src: url('../fonts/GothamRndSSm-Bold.eot');
    src: url('../fonts/GothamRndSSm-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GothamRndSSm-Bold.woff2') format('woff2'),
        url('../fonts/GothamRndSSm-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham-sm-book';
    src: url('../fonts/GothamRndSSm-Book.eot');
    src: url('../fonts/GothamRndSSm-Book.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GothamRndSSm-Book.woff2') format('woff2'),
        url('../fonts/GothamRndSSm-Book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham-sm-light';
    src: url('../fonts/GothamRndSSm-Light.eot');
    src: url('../fonts/GothamRndSSm-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GothamRndSSm-Light.woff2') format('woff2'),
        url('../fonts/GothamRndSSm-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
:root {
--font-light: 'Gotham-sm-light';
--font-book: 'Gotham-sm-book';
--font-medium: 'Gotham-sm-medium';
--font-bold: 'Gotham-sm-bold';

--h1: clamp(2.3rem, 1.3943rem + 0.5286vw, 2.5rem);
--h2: clamp(1.7rem, 1.3943rem + 0.5286vw, 1.9rem);
--h3: 20px;
--h4: 14px;
--p: 16px;
}


h1{
  font-family: var(--font-bold);
  font-size: var(--h1);
}

h2{
  font-family: var(--font-book);
  font-size: var(--h2);
  color: var(--primary-text-color);
}

h3{
  font-family: var(--font-bold);
  font-size: var(--h3);
  color: var(--primary-text-color);
}

h4{
  font-family: var(--font-book);
  font-size: var(--h4);
}

h3.highlight{
  color: var(--highlight-color);
}

p{
  font-family: var(--font-book);
  font-size: var(--p);
  color: var(--secondary-text-color);
  line-height: 1.7em;
}

p.input{
  font-family: var(--font-light);
  font-size: 80%;
}



/*--------------------------------------------------------------
# Colors
--------------------------------------------------------------*/
:root {
  --primary-text-color: #421F52 ;
  --secondary-text-color: #9E8DA6 ;
  --highlight-color: #E83C82;
  --light-color: #fff;
  --light-grey: #F2F2F2;
}

.bg-color{
  background-color: var(--primary-text-color);
  color: var(--light-color);
}

.bg-color p{
  color: var(--light-color);
}

a{
  color: var(--highlight-color);
}

/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/
section {
  padding: 8rem 0px;
}
section.section-small {
  padding: 5rem 0px;
}


@media screen and (max-width: 768px){
  section {
    padding: 5.5rem 0px;
  }

  section.section-small {
    padding: 4rem 0px;
  }
}

/*--------------------------------------------------------------
# Animations
--------------------------------------------------------------*/
.fadeup {
  opacity: 0;
  transform: translateY(25px);
  visibility: hidden;
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
  will-change: opacity, transform, visibility;
}

.fadein {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out;
  will-change: opacity, transform, visibility;
}

.scalein {
  opacity: 0;
  transform: scale(0);
  visibility: hidden;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  will-change: opacity, transform, visibility;
}

.in-view.fadeup, .in-view .fadeup,
.in-view.scalein, .in-view .scalein,
.in-view.fadein, .in-view .fadein {
   opacity: 1;
   transform: none;
   visibility: visible;
}


/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
header{
  position: absolute;
  width: 100%;
  padding: 2rem 0px;
  z-index: 10
}

@media screen and (max-width: 768px){
  header{
    padding: 20px 0px;
  }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer svg{
  width: 160px;
}

footer .container{
  padding: 2rem 15px;
  /** border-top: solid 0.5px white; **/
}

/*--------------------------------------------------------------
# UI elements
--------------------------------------------------------------*/
button{
  font-size: var(--h4);
  text-transform: uppercase;
  font-family: var(--font-bold);
  padding: 20px 110px;
  color: var(--light-color);
  border: none;
  background-color: var(--highlight-color);
  border-radius: 100px;
  transform: scale(1);
  transition: all 0.3s ease-in-out 0s;
}

:focus-visible{
  outline: none;
}

button:focus{
  outline: none;
}

button:hover{
  transform: scale(1.05);
  transition: all 0.3s ease-in-out 0s !important;
}