* {
    margin: 0;
    padding: 0;
    border: none;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

html {
    --blue: #27498C;
    --light-blue: #A9B9D9;
    --orange: #F38233;
    --light-orange: #FFB47F;
    --white: #FFFFFF;
    --black: #606060;

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

body {
    font-family: 'Poppins', sans-serif;
}

::selection {
    background: var(--light-orange);
    color: var(--blue);
}

header {
    margin: 0 auto;
    background: var(--blue);
    /* box-shadow: 0rem .4rem .4rem rgba(0, 0, 0, 0.2); */
}

.header-container {
    display: flex;
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
    justify-content: space-between;
    padding: 1.3rem 1rem;
    
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: .03rem;
}

main {
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
}

/*   SEÇÃO INICIAL   */
section.card {
    background: url('../assets/card-home.png') no-repeat right;
    width: 100%;    
    max-width: 940px;
    color: var(--white);
    height: 100%;
    max-height: 450px;
}

section.card .content a.logo {
    display: inline-block;
    margin: 4rem 10rem 4rem 10rem;
    fill: var(--white);
}

section.card .content h2 {
    max-width: 66rem;
    margin: 0rem 0rem 2rem 10rem;
    font-size: 4rem;
    line-height: 5rem;
}

section.card .content p {
    margin-left: 10rem;
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: .03rem;
}

span.highlight {
    color: var(--light-orange);
}

/*   BUTTON   */
button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42rem;
    height: 5rem;
    margin-bottom: 0rem;
    background: var(--orange);

    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--white);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

button:hover {
    background: rgb(233, 118, 37);
    transition: 300ms;
}

a:link {
    color: unset;
    text-decoration: none;
}

a:visited {
    color: var(--white);
}

/*  SPINNER  */
.spinner {
    display: none;
    width: 2rem;
    height: 2rem;
    margin-left: 1rem;

    border: .4rem solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    border-left-color: var(--white);

    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/*  CARD WHATSTAPP  */
.card-whatsapp {
    height: 12rem;
    width: 45rem;
    margin-left: 10rem;
    margin-top: 5rem;

    text-align: center;
    background: var(--white);
}

.card-whatsapp p {
    padding-top: 2rem;
    font-size: 1.8rem;
    color: var(--light-orange);
}

.card-whatsapp h2 a {
    font-weight: 700;
    font-size: 4rem;
    color: var(--light-orange);

    cursor: pointer;
}

.card-whatsapp a:hover {
    color: var(--orange);
    transition: 300ms;
}

/*  CARD RESPONSE TIME  */
.response-time {
    height: 12rem;
    width: 45rem;
    margin-left: 10rem;
    
    text-align: center;
    background: var(--blue);
}

.response-time :hover {
    color: var(--white);
    transition: 300ms;
}

.response-time p {
    display: inline-block;
    width: 28rem;
    margin-top: 2rem;

    font-size: 3rem;
    line-height: 4rem;
    color: var(--light-blue);
    text-transform: uppercase;
    text-align: left;
}

.response-time i {
    padding-right: 2rem;
    position: relative;
    bottom: 1rem;
    
    font-size: 6rem;
    color: var(--light-blue);    
}

.highlight-orange {
    font-weight: 400;
    color: var(--light-orange);
}

/*  SERVICES  */
.services {
    background: rgba(169, 185, 217, 0.1);
    padding-bottom: 3rem;
}

h1 {
    padding-top: 10rem;
    font-weight: 700;
    font-size: 3.2rem;
    text-align: center;
    color: var(--orange);
}

.highlight-text {
    font-weight: 700;
    font-style: italic;
}

/*  CARDS SERVICES  */
.services .cards-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 4rem;

    margin-top: 4rem;
    padding: 4rem 10rem;
    background: rgba(169, 185, 217, 0.25);
}

/*  CARD SERVICE  */
.card-service {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: 1fr 2fr;
    grid-template-areas:
                    "i t"
                    "i d";
    height: 10rem;
    width: 35rem;
}

.card-service:nth-child(9), 
.card-service:nth-child(10) {
    height: 6rem;
}

.card-service img {
    width: 5.5rem;
    grid-area: i;
}

.card-service h4 {
    grid-area: t;
    font-weight: 700;
    font-size: 2rem;
    color: var(--blue);
    text-transform: uppercase;
}

.card-service p {
    grid-area: d;
    font-size: 1.8rem;
    color: var(--blue);
}

/*  CREDIT CARDS  */
.credit-cards {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-top: 3rem;
    width: 95%;
    max-width: 82rem;
    height: 10rem;
    border-radius: 1rem;
    background: var(--white);
}

.credit-cards img {
    margin: 3.5rem;
    transition: 300ms;
}
.credit-cards img:hover {
    transform: scale(1.2);
}

/*  LOYALTY PROGRAMME  */
.loyalty-programme {
    width: 100%;
    max-width: 940px;
}

.cards-loyalty {
    height: 29.5rem;
    margin-top: 4rem;
    display: flex;
    justify-content: space-between;
}

.card-loyalty {
    width: 45rem;
    background: rgba(169, 185, 217, 0.1);
    overflow: hidden;
    box-shadow: .2rem .2rem .5rem rgba(0, 0, 0, 0.1);
    transition: 200ms cubic-bezier(0.42, 0, 0.32, 1.98);
}

.card-loyalty#copy {
    margin-left: 4rem;
}

.card-loyalty#sharpening img {
    height: 20rem;
    width: 20rem;
    margin: -1rem 0rem -1rem 26rem;
}

.card-loyalty#copy img {
    height: 28rem;
    width: 15rem;
    margin: -5rem 0rem -5rem 31rem;
}

.card-loyalty:hover {
    transform: scale(1.04);
}

.card-loyalty h4 {
    position: absolute;
    margin-left: 4rem;
    width: 28rem;
    padding: 5.6rem 0rem;

    font-weight: 700;
    font-size: 3.2rem;
    line-height: 4.2rem;
    color: var(--blue);
}

.conditions {
    height: 10rem;
    max-width: 45rem;
    margin-top: 1rem;
    background: var(--orange);
}

.conditions h3 {
    font-size: 3.2rem;
    font-weight: 400;
    text-align: center;
    padding-top: 2.5rem;
    color: var(--white);    
}

/*  REVIEWS  */
.reviews {
    display: flex;
    height: 17.5rem;
    width: 100%;
    max-width: 940px;
    margin-top: 4rem;
    align-items: center;
    justify-content: center;
    position: relative;

    background: rgba(169, 185, 217, 0.1);
}

.review p {
    display: block;
    font-weight: 300;
    font-style: italic;
    font-size: 2.2rem;
    color: var(--black);
    text-align: center;
}

.navigation {
    margin-top: 10rem;
    position: absolute;
}

.nav-arrow {
    display: inline-block;
    position: absolute;
    width: 5rem;
    height: 5rem;
    top: 50%;

    right: 0rem;

    transform: translateY(-50%);
    
    color: var(--light-blue);
    cursor: pointer;
}

.nav-arrow:hover {
    background-color: rgba(169, 185, 217, 0.2);
    transition: 300ms;    
}

.nav-arrow:nth-child(1) {
    left: 0rem;
}

.nav-arrow i {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 1.5rem auto;
}

.manual-btn {
    display: inline-block;
    background: var(--light-blue);
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}

.manual-btn:hover,
.manual-btn.active {
    background: var(--blue);
}

.manual-btn.active {
    background: var(--blue);
}

.manual-btn:not(:last-child) {
    margin-right: 2rem;
}

/*  LOCATION  */
.location h1 {
    width: 45.5rem;
    margin: 0 auto;

    color: var(--light-orange);
}

.map {
    display: flex;
    margin-top: 2rem;
    max-height: 250px;
    width: 100%;
    max-width: 940px;
}

/*  FOOTER  */
footer {
    display: flex;
    flex-wrap: wrap;
    height: 28.4rem;
    background: url('../assets/imagem-footer.png') no-repeat top;
    width: 100%;
    max-width: 940px;
    margin: 3rem auto 0rem;
    align-items: center;
}

footer h1 {
    margin: 0rem auto 1rem;
    color: var(--white);
    padding-top: 4rem;
}

footer p {
    width: 94rem;
    margin-bottom: 1rem;
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: .03rem;
    text-align: center;
    color: var(--light-blue);
}

footer a {
    margin: 0rem auto 4rem;
}

.end-footer {
    height: 5rem;
    width: 100%;
    background: var(--blue);
}

.end-footer section {
    display: flex;
    max-width: 94rem;
    margin: 0 auto;
    justify-content: center;
    padding: 1.3rem 1rem;

    font-size: 1.5rem;
    font-weight: 400;
    color: var(--light-blue);
    text-transform: uppercase;
    letter-spacing: .03rem;
}