/* Fonts */

@font-face {
    font-family: Manrope-Light;
    src: url(../fonts/Manrope-Light.ttf);
}

@font-face {
    font-family: Manrope-Regular;
    src: url(../fonts/Manrope-Regular.ttf);
}

@font-face {
    font-family: Manrope-Medium;
    src: url(../fonts/Manrope-Medium.ttf);
}

@font-face {
    font-family: Manrope-ExtraBold;
    src: url(../fonts/Manrope-ExtraBold.ttf);
}



:root{
    /* Colors  */
    --primary-color: #29797E;
    --secondary-color: #2AC2C2;
    --terciary-color: #BAE13B;
    --dark-color: #051E20;
    --gray--color: #4A5657;
    --light-color: #EFFEFE;

    /* Fonts Variables */
    --heading-font: Manrope-ExtraBold;
    --paragraph-font: Manrope-Regular;
    --light-font: Manrope-Light;
    --link-font: Manrope-Medium;

    /* Border radius */
    --block-radius: 32px;
    --small-block-radius: 24px;
    --button-radius: 16px;
    --input-radius: 8px;

    /* Shadows */

    --shadow: -1px 4px 35px 0px rgba(41, 121, 126, 0.25);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body{
    overflow-x: hidden;
}

h1{
    font-size: 3.6rem;
    line-height: 44px;
}

h2{
    font-size: 3.2rem; 
}

h3{
    font-size: 2.4rem;
}

h4{
    font-size: 1.8rem;
    font-family: var(--link-font);
}



h1{
    color: var(--dark-color);
}

h1, h2, h3{
    font-family: var(--heading-font);
}

h2{
    color: var(--primary-color);
}

p, span{
    font-family: var(--paragraph-font);
    color: var(--dark-color);
}

p{
    font-size: 1.6rem;
}

a{
    font-family: var(--link-font);
    font-size: 1.6rem;
    text-decoration: none;
    color: var(--dark-color);
}

li{
    list-style: none;
}

section{
    padding: 0 16px;
}

main > section {
    padding: 0;
}


button {
    border: none;
    cursor: pointer;
    font-family: var(--link-font);
}

.mobile__menu{
    cursor: pointer;
}

input[type="submit"]:active,
button:active{
    transform: scale(0.98);
}

button > a{
    display: block;
}

.hidden{
    display: none;
}


.btn{
    background: none;
    border-radius: var(--button-radius);
    padding: 8px 12px;
    min-height: 40px;
    cursor: pointer;
}

.btn__primary{
    background-color: var(--primary-color);
    color: #FFF;
}

.btn__secondary{
    color: var(--dark-color);
    background-color: #FFF;
}

.btn__secondary:hover{
    background: #EDF2F2;
}

.btn__secondary--hero a{
    color: var(--primary-color);
}

.btn__secondary--hero{
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.overlay.show{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(6, 48, 51, 0.25);
    z-index: 998;
}

/* Modals */


.modal__form__container{
    display: none;
}
.modal__form__container.show{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(6, 48, 51, 0.25);
    z-index: 998;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 16px;
}

.modal__form__container .modal__form{
    height: 95dvh;
    overflow-y: scroll;
}

.modal__form__container .modal__form .btn__contact{
    padding: 12px;
    width: 100%;
    max-width: none;
}

.modal__form__container .modal__form{
    position: relative;
    animation: slideOut 0.3s ease-out;
}

.modal__form__container .modal__form.reveal{
    animation: slideIn 0.3s ease-out;
}

.modal__form__container .form__section{
    padding: 70px 24px 24px 24px;
}


.modal__form__container .form__section h3{
    margin-bottom: 24px;
}

.close__modal__form{
    position: absolute;
    top: 16px;
    right: 16px;
    cursor: pointer;
}


@keyframes slideIn {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }


  @keyframes slideOut {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(100%);
    }
  }


@media only screen and (min-width: 767px){

    .modal__form__container .modal__form{
        height: auto;
        overflow-y: auto;
    }
    
    h1{
        font-size: 6.4rem;
        line-height: 80px;
        max-width: 767px;
        margin: auto;
    }
    
    h2{
        font-size: 4.8rem; 
    }
    
    h3{
        font-size: 3.2rem;
    }
    
    h4{
        font-size: 2.4rem;
        font-family: var(--link-font);
    }
}