@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:wght@300;400;600;700;900&display=swap');
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    outline: 0;
    text-decoration: none;
    list-style: none;
    font-style: normal;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
}

:root {
    font-size: 62.5%;
    --red: #aa0000;
    --light: #fff;
    --textColor: #333333;
    --green: #28a745;
}

body {
    font-size: 1.6rem;
    overflow-x: hidden;
    padding: 0 8%;
}

header {
    border-top: solid 1.5rem var(--red);
    border-bottom: solid 1.5rem var(--red);
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    figure {
        margin: 2rem 0;
        display: flex;
        @media screen and (min-width: 320px) and (max-width: 768px) {
            flex-direction: column;
        }

        figcaption {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            h1 {
                font-weight: 300;
                font-size: 7rem;
                color: var(--textColor);
                text-align: center;
                @media screen and (min-width: 320px) and (max-width: 768px) {
                    font-size: 2.5rem;
                    margin: 2rem 0;
                }
            }

            h2 {
                font-weight: 900;
                font-size: 7rem;
                margin: 3rem 0;
                color: var(--red);
                @media screen and (min-width: 320px) and (max-width: 768px) {
                    font-size: 2.5rem;
                    margin-top: 0;
                    margin-bottom: 3rem;
                }
            }
        }
    }
}

main {
    
    .about {
        background-color: var(--textColor);
        color: var(--light);
        padding: 3rem;
        border-radius: .5rem;
        text-align: center;
        margin-bottom: 3rem;

        h2 {
            font-weight: 900;
            text-transform: uppercase;
            font-size: 4.55rem;
            @media screen and (min-width: 320px) and (max-width: 768px) {
                font-size: 2rem;
                line-height: 3rem;
                margin-bottom: 2rem;
            }
        }

        p {
            font-size: 1.6rem;
            @media screen and (min-width: 320px) and (max-width: 768px) {
                line-height: 2.5rem;
            }
        }
    }

    .services {
        h2 {
            font-weight: 600;
            font-size: 4.55rem;
            color: var(--red);
            text-transform: uppercase;
            margin-bottom: 2rem;
            @media screen and (min-width: 320px) and (max-width: 768px) {
                font-size: 2.3rem;
            }
        }

        ul {
            padding-left: 2rem;
            margin-bottom: 2rem;

            li {
                list-style: disc;
                font-size: 1.8rem;
                line-height: 2.4rem;

                &::marker {
                    color: var(--red);
                }
            }
        }
    }

    .advantages {
        background-color: var(--light);
        color: var(--red);
        padding: 3rem 0 7rem;
        border-radius: .7rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        border-bottom: solid .2rem var(--red);
        margin-bottom: 5rem;
        @media screen and (min-width: 320px) and (max-width: 768px) {
            flex-direction: column;
        }

        h2 {
            font-weight: 900;
            font-size: 6.7rem;
            line-height: 8rem;
            text-transform: uppercase;
            margin-bottom: 5rem;
            text-align: center;
            width: 100%;
            @media screen and (min-width: 320px) and (max-width: 768px) {
                font-size: 3.5rem;
                line-height: 5rem;
            }
        }

        article {
            border: solid .2rem var(--red);
            padding: 3rem;
            border-radius: .7rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 30%;
            text-align: center;
            @media screen and (min-width: 320px) and (max-width: 768px) {
                width: 100%;
                margin-bottom: 2rem;
            }

            h3 {
                font-size: 2.1rem;
                font-weight: 600;
                color: var(--red);
                margin: 2rem 0 0;
            }
        }
    }

    .contractPlans {
        background-color: var(--green);
        color: var(--light);
        padding: 3rem;
        border-radius: .5rem;
        text-align: center;
        margin: 5rem 0;

        h2 {
            font-weight: 900;
            text-transform: uppercase;
            font-size: 7rem;
            margin-bottom: 1.6rem;
            @media screen and (min-width: 320px) and (max-width: 768px) {
                font-size: 3.5rem;
            }
        }

        p {
            font-size: 2rem;
        }
    }

    .serviceChannels {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        @media screen and (min-width: 320px) and (max-width: 768px) {
            flex-direction: column;
        }

        h2 {
            width: 100%;
            font-weight: 900;
            text-transform: uppercase;
            font-size: 7rem;
            margin-bottom: 5rem;
            text-align: center;
            color: var(--red);
            @media screen and (min-width: 320px) and (max-width: 768px) {
                font-size: 3.5rem;
            }
        }

        a {
            text-decoration: none;
            color: var(--textColor);
            font-weight: 500;
            font-size: 1.9rem;
            line-height: 2.5rem;
            @media screen and (min-width: 320px) and (max-width: 768px) {
                margin-bottom: 1rem;
            }

            &:hover {
                color: var(--red);
            }
        }

        svg {
            width: 48px;
            margin-right: 1rem;
            @media screen and (min-width: 320px) and (max-width: 768px) {
                width: 32px;
            }
        }

        .champ,
        .WhatsppAndSocialMedia,
        .emailContact {
            width: 30%;
            @media screen and (min-width: 320px) and (max-width: 768px) {
                width: 100%;
                margin-bottom: 3rem;
            }
        }

        .champ {
            display: flex;
            align-items: start;
            
            ul {

                li {
                    text-decoration: none;
                    color: var(--textColor);
                    font-weight: 500;
                    font-size: 1.9rem;
                    line-height: 2.5rem;
                    
                }
            }
        }

        .WhatsppAndSocialMedia {
            .whatsapp {
                display: flex;

                .numbersPhone {
                    display: flex;
                    flex-direction: column;
                    font-size: 1.9rem;
                    font-weight: 500;
                    line-height: 2.5rem;
                }
            }

            .socialMedia {

                .instagram {
                    display: flex;                    
                    align-items: center;
                    margin: 1.5rem 0;
                }

                .facebook {
                    display: flex;
                    font-size: 1.9rem;
                    font-weight: 500;
                    line-height: 2.5rem;
                    align-items: center;
                }
            }
        }

        .emailContact {
            
            .contact {
                display: flex;
            }
        }
    }
}

footer {
    border-top: solid .1rem var(--textColor);
    color: var(--textColor);
    margin-top: 5rem;
    text-align: center;
    padding: 3rem;
    
    small {
        color: var(--textColor);
    }
}