/*
body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
  }
  
  h1 {
    font-size: 1.5em;
  }
  
  h2 {
    font-size: 1.2em;
  }
  */

/* Text and background colors */
.tx-color-1 {
    color: #1C2F57;
}

.tx-color-2 {
    color: #4C8BB7;
}

.tx-color-3 {
    color: white;
}

.tx-color-4 {
    color: #d4a30f;
}

.bg-color-1 {
    background-color: #1C2F57;
}

.bg-color-2 {
    background-color: #4C8BB7;
}

.bg-color-3 {
    background-color: white;
}

.bg-color-4 {
    background-color: #d4a30f;
}

.h-logo {
    height: 2.8rem;
}

.h-check-logo {    
    height: 3.5rem;    
}

.logo-footer {
    width: 14rem;
}

.flag {
    border-radius: 10px;
    height: 2.5rem;
    margin: 0 0.3rem;
    width: 4rem;    
}

.text-1 {
    font-size: calc(1rem + 0.6vw);
}

.text-2 {    
    font-size: 1rem;
    font-weight: 700;
    padding-top: 10px;
}

.text-3 {
    font-size: calc(0.8rem + 0.6vw);
}

.h1 {    
    font-size: calc(2rem + 1vw);
}

.h2 {
    font-size: calc(1.6rem + 1vw);
}

.w-container-2 {
    width: 100%;
}

.w-heading-1 {
    max-width: 100%;
}

.square {
    background-color: white;
    border-radius: 10px;
    height: calc(8rem + 1vw);
    
}
/*
.img-serv-1 {
    border-radius: 10px;
    height: 22em;
    width: 15em;
}
*/
.img-serv-1 {
    border-radius: 10px;
    height: 22rem;
    width: 15rem;
}

.img-serv-page {
    border-radius: 10px;
    
    width: 30rem;
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
    .text-2 {
        font-size: calc(0.5rem + 0.6vw);
    }

    .w-container-1 {
        width: 100%;
    }

    .square {
        background-color: white;
        border-radius: 10px;
        height: calc(7rem + 1vw);
        width: calc(7rem + 4vw);
    }    
 }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    .w-container-1 {
        width: 100%;
    }

    .w-container-2 {
        width: 85%;
    }

    .w-heading-1 {
        max-width: 100%;
    }
 }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
   .w-heading-1 {
        width: 70%;
    }

    .w-container-1 {
        width: 75%;
    }

    .w-container-2 {
        width: 80%;
    }    
 }

/* Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) { 
    .w-container-2 {
        width: 100%;
    }
 }