@import url(header.css);

:root {
    --light-blue: #74b2c6;
    --dark-blue: #15456e;
    --green1: #64b459;
    --black: #000;
    --white: #fff;
    --gray-light: #e0e0e0;
    --gray-medium: #828282;
}

html {
    scroll-behavior: smooth;
}

/* ================================
   Classes utilitárias de cores
   (para usar junto com o Tailwind)
================================ */

/* Backgrounds */
.bg-light-blue {
    background-color: var(--light-blue);
}

.bg-dark-blue {
    background-color: var(--dark-blue);
    color: #fff;
}

.bg-green1 {
    background-color: var(--green1);
}

.bg-black {
    background-color: var(--black);
}

.bg-white {
    background-color: var(--white);
}

.bg-gray-light {
    background-color: var(--gray-light);
}

.bg-gray-medium {
    background-color: var(--gray-medium);
}

.bd-dark-blue {
    border-color: var(--dark-blue);
}

/* Textos */
.text-dark-blue {
    color: var(--dark-blue);
}

.text-green1 {
    color: var(--green1);
}

.text-black {
    color: var(--black);
}

.text-white {
    color: var(--white);
}

.text-gray-light {
    color: var(--gray-light);
}

.text-gray-medium {
    color: var(--gray-medium);
}

/* Bordas */
.border-dark-blue {
    border-color: var(--dark-blue);
}

.border-green1 {
    border-color: var(--green1);
}

.border-black {
    border-color: var(--black);
}

.border-white {
    border-color: var(--white);
}

.border-gray-light {
    border-color: var(--gray-light);
}

.border-gray-medium {
    border-color: var(--gray-medium);
}

.logo-p {
    width: 200px;
    height: auto;
}

.btn-dark-blue {
    background-color: var(--dark-blue);
}

.btn-dark-blue:hover {
    background-color: var(--green1);
}

.btn-light-blue {
    background-color: var(--light-blue);
}

.btn-light-blue:hover {
    background-color: var(--green1);
}

.btn-green1 {
    background-color: var(--green1);
}

.btn-green1:hover {
    background-color: var(--light-blue);
}

.home-hero {
    background-image: url('../img/home/bannerCare.jpg');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}

.home-facilites {
    background-image: url('../img/home/bg-gradiente.png');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}

.you-stores {
    background-image: url('../img/user/bg-playstores.jpg');
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.honeypot-field {
    display: none;
    visibility: hidden;
}



.tit-care {
    font-size: 60px;
}

.txt-care {
    font-size: 40px;
}

.txt-care-2 {
    font-size: 30px;
}

.txt-pay {
    font-size: 50px;
}

#you-hero-txt {
    position: relative;
    z-index: 2;
}

#you-hero-img {
    position: absolute;
    width: auto;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 0;
}

.link-contact img{
    border: solid 2px;
    border-color: #fff;
}

.link-contact:hover img{
    border-color: var(--light-blue);
}

.whatsapp-float {
    width: 100px;
    height: 100px;
    right: 40px;
    bottom: 40px;
    position: fixed;
    cursor: pointer;
    z-index: 2;
}

.whatsapp-icon {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
    border: solid 2px;
    border-color: transparent;
    display: block;
}

.whatsapp-icon:hover{
    border-color: var(--light-blue);
}

.whatsapp-icon img {
    width: 98%;
    margin: 1%;
}

@media (min-width: 1024px) {

    /* lg breakpoint do Tailwind */
    .tit-care {
        font-size: 35px;
    }

    .txt-care,
    .txt-care-2 {
        font-size: 18px;
    }

    .txt-pay {
        font-size: 20px;
    }

    #you-hero-txt {
        position: absolute;
    }

    #you-hero-img {
        position: relative;
        width: 100%;
        height: auto;
    }
}