:root {
    --primary: #00acf0;
    --primary-highlight: #18B3F0;
    --primary-10: #00acf01a;
}

body {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: 1.125rem;
}


.loading-animation {
    animation-name: loading-point;
    animation-duration: .5s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.loading-delay-1 {
    animation-delay: .1s;
}

.loading-delay-2 {
    animation-delay: .2s;
}

.loading-delay-3 {
    animation-delay: .3s;
}

@keyframes loading-point {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-.2em);
    }
}

#festejou {
    padding-top: 6rem;
}

.btn-fixed{
    position: fixed;
    bottom: 2em;
    right: 1em;
    border-bottom-right-radius: 0;
    z-index: 999;
    animation-duration: 1s;
}

.btn-fixed span{
    font-weight: 100;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    margin-bottom: 4%;
}

a {
    color: var(--primary);
}

#logo {
    width: 130px;
    max-width: 100%;
    max-height: 50px;
}

nav.navbar {
    position: fixed;
    top: 1rem;
    left: 0;
    width: 90%;
    margin: 0 5%;
    padding: 18px 24px 12px 30px;
    z-index: 999;
    color: #00ACF0;
    border-radius: 1rem;
    border-width: 1px;
    border-color: rgba(229, 231, 235, 0.3);
    background-color: rgba(230, 248, 255, .96);
    box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}

nav.navbar ul {
    margin: auto auto 1em;
}

nav.navbar ul li {
    float: left;
    list-style: none;
}

nav.navbar ul li a {
    padding-left: 2em;
    text-decoration: none;
    font-size: 1rem;
}

section {
    position: relative;
    padding: 0;
    margin: 0 144px;
}

section.bg-primary.bg-gradient::before,
section.bg-light.bg-gradient::before {
    content: '';
    position: absolute;
    box-sizing: initial;
    width: 100%;
    height: 100%;
    padding: 0 144px;
    top: 0;
    left: -144px;
    background-image: var(--bs-gradient) !important;
    z-index: -99;
}

section.bg-primary.bg-gradient::before {
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

section.bg-light.bg-gradient::before {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}

section {
    padding: 80px 0;
}

footer {
    font-size: 75%;
}

footer ul {
    margin: 0;
    padding: 0;
}

footer ul li {
    list-style: none;
    padding: .3em 0;
}

footer ul li a {
    color: var(--bs-gray-600);
    text-decoration: none;
}

footer ul li a:hover {
    color: var(--primary);
}

.chat-verde {
    position: absolute;
    bottom: -4%;
    left: -4%;
    width: 300px;
    font-size: 80%;
}

.chat-azul {
    position: absolute;
    bottom: -4%;
    right: -4%;
    width: 250px;
    font-size: 80%;
}

.chat-azul .float-start {
    padding: 1em;
    background-color: var(--primary-10);
    border-radius: 50%;
}

.chat-azul svg {
    color: var(--primary);
}

.chat-azul a {
    text-decoration: none;
}

.chat-azul a:hover {
    text-decoration: underline;
}

.text-card {
    padding: 1em;
    border-radius: 1rem;
    border-width: 1px;
    border-color: rgba(229, 231, 235, 0.3);
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}

.card-depoimento {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    padding: 4em;
    margin: 1em 0;
    border-radius: 2em;
}

.card-depoimento h2 {
    height: 2.5em;
}

.card-depoimento h2 i {
    position: relative;
    top: .2em;
    width: 2em;
    height: 2em;
    padding-top: .5em;
    border-radius: 50%;
    background-color: #fff;
}

.card-depoimento:hover h2 i {
    top: 0;
    font-size: 1.2em;
}

.card-produto {
    border-radius: 2em;
    padding: 1em;
    margin: 1em .3em;
    text-align: left;
}

.card-produto:hover {
    box-shadow: 0 0.8rem 1.5rem rgba(0, 0, 0, 0.2) !important;
}


.card-produto .produto-capa {
    height: 14em;
    background-position: center center;
    background-size: cover;
    border-radius: 2em 2em 0 0;
    margin: -1em;
}

.card-produto:hover .produto-capa {
    background-size: 110%;
}

.card-produto h3 {
    margin-top: 1.5em;
}

.card-produto .produto-link {
    text-align: center;
}

.card-produto .produto-link a {
    display: block;
}

.card-descricao {
    position: relative;
    border-radius: 1em;
    padding: 1em;
    margin: 1em .3em;
    text-align: left;
    background-color: #fff;
    color: #000;
    border: .1em solid #eee;
    cursor: pointer;
}

.card-descricao:hover {
    width: 106%;
    height: 101%;
    top: -3%;
    left: -.5%;
    font-size: 106%;
    background-color: var(--primary);
    color: #fff;
}

.card-descricao:hover .icon i {
    color: #fff !important;
}

.card-descricao .icon {
    font-size: 160%;
}

.slider{
    overflow: hidden;
}

.slider .slides{
    display: flex;
    flex-wrap: nowrap; /* Prevents wrapping to the next line */
    transition: transform 0.5s ease-in-out; /* Transition definition */
}

.linksocial {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-color: var(--bs-gray-200);
    color: var(--bs-gray-600);
    border-radius: 50%;
    text-align: center;
    text-decoration: none;
    padding-top: 4px;
    margin: .3em;
}

.linksocial:hover {
    background-color: var(--bs-info);
}

.btn.btn-primary {
    border: none;
}

.btn svg {
    width: 16px;
    height: 16px;
}

.btn-light.btn-bg-dark {
    color: var(--primary);
    --bs-btn-hover-bg: #fff;
}
.alert{
    border: none;
}

.alert-secondary {
    font-size: .875rem;
}

.alert-secondary .fa-solid {
    color: var(--primary);
}

@media (max-width: 1023px) {

    #festejou{
        overflow-x: hidden;
    }

    .col-lg-5 {
        margin: 2em 0;
    }

    .w-75,
    .w-50{
        width: 100% !important;
    }

    .col-md-12.text-center.m-4,
    .col-md-12.m-4.mb-5{
        margin: 0 !important;
    }

    p.alert{
        font-size: 70% !important;
    }

    section {
        margin: 0 20px;
    }

    section .row {
        padding: 0 !important;
    }


    section.bg-primary.bg-gradient::before,
    section.bg-light.bg-gradient::before {
        padding: 0 20px;
        left: -20px;
    }

    .chat-verde {
        left: 8px;
    }

    .chat-azul {
        right: 8px;
    }

    .img-fundochat{
        object-fit: cover;
        min-height: 600px;
        left: 0;
    }
}

@media (min-width: 1024px) {
    h1 {
        font-size: 2.25rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.25rem;
    }
}

@media (min-width: 1280px) {
    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2.25rem;
    }

    h3 {
        font-size: 1.5rem;
    }
}