@import url(../css/wrapper.css);
@import url(../css/banner.css);
@import url(../css/loader.css);
@import url(../css/hero.css);
@import url(../css/social-media.css);
@import url(../css/button.css);
@import url(../css/services.css);
@import url(../css/customers.css);
@import url(../css/projects.css);
@import url(../css/story.css);
@import url(../css/download.css);
@import url(../css/footer.css);

:root {

    /* Colors */
    --marino: #000D85;
    --morado: #7011CE;
    --naranja: #FF5D53;
    --amarillo: #F5F95A;
    --white: white;

    /* Fonts */
    --brandFont: 'Poppins', sans-serif;
    --baseFont: 'PT Sans', sans-serif;
    --headerFont: 'Quantico', sans-serif;

    --buttonFont: bold 18px/23px var(--baseFont);
    --heading1Font: 48px/65px var(--headerFont);
    --parragraphFont: 20px/38px var(--baseFont);

    /* Others */
    --bodyGradient: linear-gradient( to bottom, #000D85, #7011CE, #FF5D53, #F5F95A);
    --borderRadius: 10px;
} 

html {
    box-sizing: border-box;
    font-size: 62.5%; /* 1 rem = 10px */
}

*, *::before , *::after {
    box-sizing: inherit;
}

body {
    font-family: var(--baseFont);
    font-size: 1.6rem;
    line-height: 2;
    color: white;
    background: var(--bodyGradient);
    background-size: cover;
    background-repeat: no-repeat;
}

a {
    text-decoration: none;
}

h1, h2, h3, h4 {
    font-family: var(--headerFont);
    line-height: 1.2;
    margin: 0;
}

h1 {
    font-size: 4.8rem;
}

h2 {
    font-weight: normal;
    font-size: 24px;
    position: relative;
    margin-block-end: 30px;
}

h3 {
    font-size: 3.2rem;
}

h4 {
    font-size: 2.8rem;
}

p {
    margin: 0;
}

img {
    width: 100%;
}

.icon--size {
    width: 30px;
}

.line--decoration {
    border-bottom: 2px solid var(--amarillo);
    padding-bottom: 30px ;
}

.form-api {
    display: none;
}

.place-debug {
    max-width: 100rem;
    height: 50rem;
    background-color: rgba(255, 0, 0, 0.3);
}

.decoration-mountains {
    width: 100%;
}

@media (min-width: 768px) {
    .icon--size {
        width:50px
    }

    h2 {
        font-size: 40px;
    }

    p {
        font-size: 22px;
    }
}