@import url('https://fonts.googleapis.com/css2?family=Aleo:wght@400;700&family=Baloo+2:wght@400;700&display=swap');

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

:root
{
    --bg: #181818;
    --text: #8d8d8d;
    --amarelo-01: #f3a302;
    --amarelo-02: #ffe7a5;
    --green: #34af23;
    --error-red: #d43a3a;
}

body
{
    font-family: 'Aleo', serif;
    font-family: 'Baloo 2', cursive;
    background: var(--bg);
    color: var(--text);
}

/* CAROUSEL CONFIG */
.banner-content-01, .banner-content-02, .banner-content-03, .banner-content-04
{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: calc(100vh - 90px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.banner-content-01
{
    background-image: url(/uploads/img/carousel01.jpg);
}
.banner-content-02
{
    background-image: url(/uploads/img/carousel003.jpg);
}
.banner-content-03
{
    background-image: url(/uploads/img/carousel002.jpg);
}
.banner-content-04
{
    background-image: url(/uploads/img/carousel004.jpg);
}

.banner-content-01 h1, .banner-content-02 h1, .banner-content-03 h1, .banner-content-04 h1
{
    background: linear-gradient(120deg, var(--amarelo-01) 60%, var(--amarelo-02));
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    font-size: 3.8rem;
    text-align: center;
}
.banner-content-01 p, .banner-content-02 p, .banner-content-03 p, .banner-content-04 p
{
    color: var(--amarelo-02);
    font-size: 1.8rem;
    text-align: center;
}

/*BUTTONS NAVIGATION CAROUSEL*/
.owl-nav
{
    position: absolute;
    bottom: 30px;
    right: 5px;
}

.owl-nav span
{
    font-size: 1.5rem;
    margin: 0 5px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #f3a302;
    border-radius: 5px;
}

/* BUTTON SOCIAL CIRCULAR */
#button-circle
{
    position: fixed;
    bottom: -60px;
    right: -50px;
    z-index: 10000;
    overflow: hidden;
}
.menu
{
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu li
{
    position: absolute;
    left: 0;
    list-style: none;
    transform-origin: 100px;
    transition: 0.5s;
    transition-delay: calc(0.1s * var(--i));
    transform: rotate(0deg) translateX(80px);
}

.menu.active li
{
    transform: rotate(calc(360deg / 11 * var(--i)));
}

.menu li a
{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    font-size: 0.8rem;
    border-radius: 50%;
    transform: rotate(calc(360deg / -11 * var(--i)));
    box-shadow: 0 3px 4px rgb(0, 0, 0, 0.15);
    color: #181818;
    transition: .5s;
}

.menu li:nth-child(2) a, .menu li:nth-child(3) a, .menu li:nth-child(4) a
{
    background: var(--green);
}

.menu li:nth-child(5) a
{
    background: var(--amarelo-01);
}

.menu ion-icon
{
    color: var(--bg);
    font-size: 1.2rem;
}

.toggle
{
    position: absolute;
    width: 60px;
    height: 60px;
    background: var(--green);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
    font-size: 2rem;
    transition: all .5s;
}

.toggle ion-icon
{
    font-size: 2rem;
}

.menu.active .toggle
{
    transform: rotate(140deg);
}

.titles
{
    padding: 20px 0 10px 0;
    text-align: center;
}

.titles h1
{
    background: linear-gradient(70deg, var(--amarelo-01) 20%, var(--amarelo-02));
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    font-size: 2.5rem;
}

#services .card:nth-child(2n) .row {
    display: flex;
    flex-direction: row-reverse;
}

.card
{
    margin: 20px 0;
    border: none;
    background: none;
}

.card img
{
    border-radius: 0 20px 0 20px;
    width: 100%;
    box-shadow: 0 0 4px var(--text);
}

.card-body
{
    padding: 0;
    height: 100%;
}

.text-card
{
    text-align: start;
    font-size: 1.3rem;
}

.text-card h5
{
    font-size: 1.8rem;
    border-left: 2px solid var(--amarelo-01);
}

.video
{
    display: flex;
    justify-content: center;
}

video
{
    width: 100%;
    border-radius: 5px;
    box-shadow: 0 0 5px var(--text);
}

#services
{

    background-image: url(/uploads/img/logo30.png);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    padding: 8px 0;
}

/* LOGO CLIENTES */
.box-logo
{
    display: flex;
    align-items: center;
    border: 1px solid var(--text);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 10px;
    max-width: 300px;
    height: 250px;
    border-radius: 5PX;
}

.box-logo img
{
    width:100%;
}

/* LOCALIZAÇÃO */
iframe
{
    box-shadow: 0 0 5px var(--text);
    border-radius: 5px;
}

/* RODAPÉ */
footer
{
    width: 100%;
    padding: 15px 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

#form
{
    padding: 30px 10px;
}

#logo-footer
{
    display: flex;
    justify-content: center;
    align-items: center;
}

#logo-footer img
{
    width: 85%;
}

form
{
    text-align: start;
}

.input span.error {
    display: flex;
    padding: 0;
}

.input span.error.active {
    padding: 0.4em;
    color: var(--error-red);
}

input[type="text"], input[type="email"], input[type="tel"]
{
    background: none;
    border: none;
    border-bottom: 1px solid var(--amarelo-02);
    border-radius: 0;
    color: var(--amarelo-02);
}

input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus
{
    background: none;
    color: var(--amarelo-02);
    box-shadow: none;
    border-bottom: 1px solid var(--amarelo-02);
}

#form textarea
{
    background: none;
    color: var(--amarelo-02);
    border: 1px solid var(--amarelo-02);
    box-shadow: none;
}

button[type="submit"]
{
    border: none;
    border: 1px solid transparent;
    padding: 8px 12px;
    background: var(--amarelo-01);
    border-radius: 5px;
    color: var(--amarelo-02);
    transition: all .2s;
}

button[type="submit"]:hover
{
    background: none;
    color: var(--amarelo-01);
    border: 1px solid var(--amarelo-01);
}

footer
{
    padding: 40px 0 60px 0;
}

#contato
{
    padding: 0 10px;
    border-top: 1px solid var(--text);
}

.links
{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.links, #menu_social
{
    font-size: 1.2rem;
    padding: 20px 0;
}

.links li{
    list-style-type: circle;
}

.links a
{
    color: var(--text);
    transition: all .2s;

}

.links a:hover, li:hover
{
    color: var(--amarelo-01);
}

#credit
{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

#reserved
{
    text-align: center;
    
    font-size: 1.3rem;
    padding: 15px 0 0 0;
    background: linear-gradient(180deg, transparent 63%,  var(--text) 100%);
    border-radius: 0 0 3px 3px;
}


#menu_social
{
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    height: 100%;
}
#menu_social i
{
    font-size: 2rem;
    color: var(--amarelo-01);
    transition: all .2s;
}

#menu_social i:hover
{
    color: var(--text);
}

#quemsomos {
    position: relative;
}

#quemsomos > .txt-more {
    display: block;

    /*posiciona o link no final da DIV*/
    position: absolute;
    right: 0;
    bottom: 0;
}
#quemsomos a{
    color: var(--amarelo-01);
}

#quemsomos > .partial {
    height: 200px; /* limita a altura aqui, assim irá limitar o texto*/
    overflow: hidden;
}

#quemsomos > a::before {
    content: "Mostrar menos"; /*Texto de quando o texto estiver visivel*/
}

#quemsomos > a.txt-more::before {
    content: "... Mostrar mais"; /* texto para o link*/
}


@media (min-width: 320px) and (max-width: 480px) {
    .banner-content-01, .banner-content-02, .banner-content-03, .banner-content-04{
        height: 400px;
    }
    .banner-content-01 h1, .banner-content-02 h1, .banner-content-03 h1, .banner-content-04 h1{
        font-size: 1.8rem;
    }
    .banner-content-01 p, .banner-content-02 p, .banner-content-03 p, .banner-content-04 p{
        font-size: 1.2rem;
    }
}

@media (min-width: 480.98px) and (max-width: 600px){
    .banner-content-01 h1, .banner-content-02 h1, .banner-content-03 h1, .banner-content-04 h1{
        font-size: 2.2rem;
    }
    .banner-content-01 p, .banner-content-02 p, .banner-content-03 p, .banner-content-04 p{
        font-size: 1.6rem;
    }
}

@media (min-width: 600.98px) and (max-width: 768px){
    .banner-content-01 h1, .banner-content-02 h1, .banner-content-03 h1, .banner-content-04 h1{
        font-size: 2.8rem;
    }
    .banner-content-01 p, .banner-content-02 p, .banner-content-03 p, .banner-content-04 p{
        font-size: 1.6rem;
    }
}

@media (min-width: 768.98px) and (max-width: 992px){
    .banner-content-01 h1, .banner-content-02 h1, .banner-content-03 h1, .banner-content-04 h1{
        font-size: 3rem;
    }
    .banner-content-01 p, .banner-content-02 p, .banner-content-03 p, .banner-content-04 p{
        font-size: 1.8rem;
    }
}

@media (min-width: 992.98px) and (max-width: 1200px){
    .banner-content-01 h1, .banner-content-02 h1, .banner-content-03 h1, .banner-content-04 h1{
        font-size: 3.4rem;
    }
}