@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,600;0,700;1,400&display=swap');

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

html {
    font-size: 62.5%;
}

body {
    background-color: var(--cetacean-blue);
    font-family: 'arimo', ' sans-serif';
    overflow: overlay;
}

a,
ul,
li {
    list-style: none;
    text-decoration: none;
}

img {
    display: block;
    max-width: 500px;
}

h1,
h2,
h3,
a,
p,
span {
    color: #fff;
    display: block;
}

:root {
    --cetacean-blue: #020659;
    --white: #fff;
    --black: #000;
    --royal-blue: #2C70FF;
    --max-width-pattern: 90%;
    --centralize-container: 0 auto;
}

.max-width {
    width: var(--max-width-pattern);
    margin: 0 auto 100px auto;
}

.header-container {
    background-color: var(--black);
    padding: 60px 0 60px 0;
}

.nav-container {
    width: var(--max-width-pattern);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.logo-container {
    max-width: 292px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-container span {
    font-size: 2rem;
}

.nav-container img {
    width: 100%;
}

.nav-links {
    display: flex;
}

.nav-links {
    font-size: 3.6rem;
}

.nav-links a {
    padding: 20px 40px;
    transition: all 600ms;
}

.nav-links a:hover {
    color: #2C70FF;
    transition: all 600ms;
}


.titles {
    font-weight: 700;
    font-size: 4rem;
    margin: 60px 0;
}

.info {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.info img {
    max-width: 680px;
    width: 100%;
    border-radius: 8px;
}

.paragraph,
.paragraph p {
    font-weight: 400;
    font-size: 3.6rem;
    line-height: 41px;
}

.text {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: var(--white);
    gap: 20px;
}

.ricardo-ti {
    display: flex;
}

.services {
    display: flex;
    justify-content: space-between;
}

.services ul,
.assurance-container {
    background-color: var(--black);
    padding: 40px 90px;
}

.services ul {
    gap: 16px;
}

.services-points li {
    list-style: disc;

}

.assurance-container {
    display: flex;
    flex-direction: column;
}

.assurance {
    display: flex;
    gap: 20px;
}

.assurance-btn {
    margin-top: 58px;
    align-self: center;
}

.assurance-btn a {
    padding: 20px 60px;
    background-color: var(--royal-blue);
    border-radius: 8px;
    transition: all 600ms;
}

.assurance-btn a:hover {
    background-color: var(--white);
    color: var(--royal-blue);
    transition: all 600ms;
}

.category {
    max-width: 400px;
    width: 100%;
    padding: 20px;
    background-color: var(--royal-blue);
    border-radius: 8px;
}

.category span {
    font-weight: 700;
    font-size: 2.6rem;
    line-height: 30px;
    margin-bottom: 30px;
    display: block;
}

.category img {
    width: 100%;
    height: 230px;
    object-fit: contain;
    background-color: var(--white);
    padding: 10px;
    border-radius: 8px;
}

.category-container {
    display: grid;
    grid-template-columns: repeat(3, 400px);
    row-gap: 50px;
    justify-content: space-between;
}

.methods {
    display: flex;
    gap: 50px;
}

.method span {
    font-weight: 700;
    font-size: 4rem;
    line-height: 46px;
    text-transform: uppercase;
}

.method {
    max-width: 300px;
    width: 100%;
    background-color: var(--black);
    padding: 30px 40px 40px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 8px;
    gap: 30px;
}

.days {
    background-color: var(--black);
    display: flex;
    justify-content: space-evenly;
    padding: 40px 0;
    border-radius: 8px;
}

.days p,
.days h3 {
    font-weight: 700;
    font-size: 4rem;
    line-height: 46px;
}

.days span {
    font-weight: 400;
    font-size: 2rem;
    line-height: 23px;
    margin-top: 20px;
}

.location p {
    font-weight: 700;
    font-size: 3rem;
    line-height: 34px;
}

.location {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.location iframe {
    border-radius: 8px;
}

.infoTwo {
    display: none;
}

footer {
    background-color: var(--black);
    display: flex;
    padding: 40px 0;
    justify-content: center;
}

footer div {
    display: flex;
    flex-direction: column;
}

footer div img {
    max-width: 292px;
    width: 100%;
    align-self: center;
}

footer div span {
    font-weight: 400;
    font-size: 3rem;
    line-height: 34px;
    margin-top: 20px;
}

.whatsaap-support {
    position: fixed;
    right: 40px;
    bottom: 5%;
    background-color: #24DB12;
    padding: 20px;
    border-radius: 50%;
}

.whatsaap-support img {
    width: 30px;
}

@media only screen and (max-width: 1440px) {

    .text,
    .paragraph p {
        font-size: 2.5rem;
    }
}

@media only screen and (max-width: 1338px) {
    .category-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

@media only screen and (max-width: 1250px) {

    .nav-links a {
        padding: 20px;
    }

    .header-container {
        padding: 20px 0;
    }

    .info img {
        max-width: 500px;
    }

    .days p,
    .days h3 {
        font-size: 3rem;
    }

    .location p {
        font-size: 2.5rem;
    }

    .map iframe {
        width: 600px;
        height: 350px;
    }

    .titles {
        font-size: 3.5rem;
    }

    .assurance-btn a {
        padding: 20px 40px;
        font-size: 3rem;
    }
}

@media only screen and (max-width: 1150px) {
    .nav-container img {
        max-width: 250px;
    }

    .text,
    .paragraph p {
        font-size: 2rem;
    }

    .category img {
        height: 200px;
    }

    .assurance-container {
        padding: 30px 60px;
        justify-content: center;
    }

    .method span {
        font-size: 3rem;
    }

    .location {
        justify-content: space-between;
    }

    footer {
        padding: 20px 0;
    }

    footer div img {
        max-width: 200px;
    }

    footer div span {
        font-size: 2.5rem;
        margin-top: 10px;
    }
}

@media only screen and (max-width: 1024px) {


    .nav-container img {
        max-width: 200px;
    }

    .logo-container span {
        font-size: 1.6rem;
    }

    .nav-links a {
        padding: 10px;
        font-size: 2.6rem;
    }

    .titles {
        margin: 40px 0;
    }

    .info img {
        max-width: 444px;
    }

    .assurance-btn a {
        padding: 10px 20px;
    }

    .category {
        max-width: 350px;
    }

    .category img {
        height: 180px;
    }

    .days p,
    .days h3 {
        font-size: 2.5rem;
        line-height: 38px;
    }

    .days span {
        font-size: 1.5rem;
    }

    .map iframe {
        max-width: 550px;
        height: 300px;
    }

    .location p {
        font-size: 2rem;
    }
}


@media only screen and (max-width: 1000px) {
    .infoOne {
        display: none;
    }

    .infoTwo {
        display: block;
    }

    .ricardo-info {
        color: var(--white);
        display: flex;
        flex-direction: column;
        gap: 10px;
        font-size: 2rem;
    }
}

@media only screen and (max-width: 916px) {

    header {
        position: sticky;
        top: 0px;
    }

    .assurance-btn a {
        font-size: 2rem;
    }

    .services ul {
        padding: 20px 60px;
    }

    .assurance-container {
        padding: 20px;
    }

    .methods {
        flex-wrap: wrap;
    }

    .category-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .category img {
        height: 250px;
    }

    .location {
        flex-direction: column;
    }

    .location iframe {
        margin-top: 20px;
    }
}

@media only screen and (max-width: 750px) {
    .services {
        gap: 40px;
    }
}

@media only screen and (max-width: 722px) {
    .max-width {
        margin: 0 auto 80px auto;
    }

    .methods {
        flex-direction: column;
    }

    .info {
        flex-direction: column;
    }

    br {
        display: none;
    }

    .services {
        flex-direction: column;
    }

    .services ul {
        width: 100%;
    }

    .days {
        flex-direction: column;
        gap: 15px;
    }

    .location {
        align-items: stretch;
    }

    .whatsaap-support {
        padding: 10px;
    }
}

@media only screen and (max-width: 600px) {
    .category-container {
        grid-template-columns: auto;
    }

    .nav-container {
        flex-direction: column;
        gap: 5px;
        align-items: center;
    }


    .map iframe{
        width: 100%;
    }
}

@media only screen and (max-width: 425px) {
    .nav-links {
        gap: 10px;
    }

    .nav-links a {
        padding: 10px;
    }

    .header-container {
        padding: 10px 0;
    }

    .whatsaap-support {
        right: 10px;
    }

    footer div {
        width: 90%;
        align-items: center;
    }

    footer div span {
        font-size: 2rem;
    }

}

@media only screen and (max-width: 320px) {
    .nav-links a {
        font-size: 2.4rem;
    }

    .titles {
        margin: 20px 0;
        font-size: 3rem;
    }

    .text,
    .paragraph p {
        font-size: 1.8rem;
    }

    .max-width {
        margin: 0 auto 70px auto;
    }

    .methods {
        gap: 30px;
    }

    .location p {
        font-size: 1.8rem;
    }
}