/*
Theme Name: App Achei
Description: Tema institucional App Achei.
Version: 1.0.6
Text Domain: app-achei
*/

@import url(css/pages/default/at-header.css);
@import url(css/pages/default/at-footer.css);

:is(svg){
    fill: #f77b21 !important;
}
:is(input){
    background-color: var(--color-font-white);
    border: 0.0625rem solid var(--color-border-01);
    border-radius: 0.5rem;
    font-weight: 400;
    font-size: 20px;
    line-height: 164.02%;
    color: var(--color-font-light);
    box-shadow: 0 0 1rem 0 rgba(255,255,255,0);
    letter-spacing: -.04em;
    transition: all .3s ease-out 0s;
    height: 3.0625rem;
    padding: 0 1rem;
    border: 1px solid var(--color-border-02);
}

:is(input:focus){
    box-shadow: 0 0 1rem 0 #f77b21!important;
    transition: all .3s ease-out 0s!important;
}
:root{

    /* Cores para fonts */
	--color-font: #464646;
	--color-font-light: #b2b2b2;
	--color-font-dark: #;
	--color-font-gray: #686868;
	--color-font-white: #ffffff;

	--color-details-primary: #f77b21;
	--color-details-secondary: #1c1c1c;

    /* Cores para BG */
	--bg-dark: #;
    --bg-light: #f2f2f2;

	--bg-details-primary: #;
	--bg-details-secondary: #;

    /* Cores para Bordas */
    --color-border-01: #f9f9f9;
    --color-border-02: #f77b21;
    --color-border-03: #;
    
    /* Fonts Size Menu*/
    --font-size-menu: 1rem;

    /* Fonts Size Titulos*/
    --font-size-title-1: 2.9rem;
	--font-size-title-2: 2.2rem;
	--font-size-title-3: 1.425rem;
	--font-size-title-4: 1.225rem;

    /* Fonts Size Texto */
	--font-size-text: 1rem;
	--font-size-text-big: 1.125rem; 
	--font-size-text-small: .875rem; 

    /* Fonts Size Texto */
	--font-weight-1: 100;
	--font-weight-3: 300;
	--font-weight-5: 500;
	--font-weight-7: 700;
	--font-weight-9: 900;

    /* Button Config */
	--bg-button-01: #4dc247;
	--color-button-01: #ffffff;
	--font-size-button-01: 1rem;

    --padding-button-01: 1rem 1.5rem;
    --radius-button-01: 8px; 

    /* Fonts Family */
    --font-family-01: 'Inter', sans-serif;;

}
html{
    font-size: var(--font-size-text);
}
body{
    font-family: var(--font-family-01);
    font-size: var(--font-size-text);
    overflow-x: hidden !important;
    overflow-y: visible !important;
}
.container{
    max-width: 1294px;
}   
/* Btns */
.at-btn-01{
    background-color: var(--bg-button-01);
    color: var(--color-button-01);
    font-size: var(--font-size-button-01);
    padding: var(--padding-button-01);
    font-weight: var(--font-weight-7);
    border-radius: var(--radius-button-01);
    display: inline-flex;
    border: 0;
    text-wrap: nowrap;
    flex-wrap: nowrap;
}
/* Btns */

/* Titulos */
.at-title-01{
    font-size: var(--font-size-title-1);
    color: var(--color-font);
    font-weight: var(--font-weight-9);
    line-height: 1.3;
}
.at-title-01 .destaque{
    color: var(--color-details-primary);
    font-size: var(--font-size-title-1);
    font-weight: var(--font-weight-9);
    line-height: 1.3;
}

.at-title-02{
    font-size: var(--font-size-title-2);
    color: var(--color-font);
    font-weight: var(--font-weight-7);
    line-height: 1.2;
}
.at-title-02 .destaque{
    color: var(--color-details-primary);
    font-size: var(--font-size-title-2);
    font-weight: var(--font-weight-9);
    line-height: 1.2;
}
.at-title-box-01{
    font-weight: var(--font-weight-7);
    font-size: var(--font-size-title-3);
    color: var(--color-font);
    line-height: 1.3;
}
/* Titulos */


/* Config carousel Slick */

.slick-dots {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    gap: .2rem;
}
.slick-dots li {
    position: relative;
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin: 0 0.125rem;
    padding: 0;
    cursor: pointer;
}
.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 0.75rem;
    height: 0.75rem;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: 0;
    background: var(--color-font-gray);
    border-radius: 50%;
}
.slick-dots .slick-active button{
    background: var(--color-details-primary);
}

/* Config carousel Slick */

/*** wq-whatsapp_btn ***/

.wq-whatsapp_btn{
	position: fixed;
	right: 15px;
	bottom: 30px;
	height: 60px;
	width: 60px;
	color: var(--color-font-white);
	font-size: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #4dc247;
	z-index: 99;
}
.wq-whatsapp_btn:before{
	content: '';
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	height: 100%;
	width: 100%;
	z-index: -1;
	border-radius: 50%;
	background-color: rgba(77, 194, 71,.7);
	animation: whatsapp 2s infinite 2s alternate;
}

@keyframes whatsapp{
	from{
		opacity: .3;
		transform: scale(1);
		box-shadow: 0px 0px 0px #4dc247;
	}
	to{
		opacity: .7;
		transform: scale(1.25);
		box-shadow: 0px 0px 20px #4dc247;
	}
}

/*** wq-whatsapp_btn ***/

/* Estilos para dispositivos com largura entre 993px e 1200px */
/* Estilos específicos para desktops e dispositivos com telas maiores */
@media screen and (min-width: 993px) and (max-width: 1200px) {
    html{
        font-size: 85% !important;
    }
    .container{
        max-width: 980px;
    }
    
}

/* Estilos para dispositivos com largura entre 769px e 992px */
/* Estilos específicos para tablets e dispositivos com telas maiores */
@media screen and (max-width: 999px) {
    html{
        font-size: 90% !important;
    }


}

/* Estilos para dispositivos com largura entre 577px e 768px */
/* Estilos específicos para tablets e dispositivos com telas um pouco maiores */
@media screen and (min-width: 577px) and (max-width: 768px) {
    html{
        font-size: 90% !important;
    }
    .container{
        padding-right: 32px;
        padding-left: 32px;
    }
    .col-12 {
        padding-right: 32px;
        padding-left: 32px;
    }
}

/* Estilos para dispositivos com até 576px de largura */
 /* Estilos específicos para dispositivos móveis */
 @media screen and (max-width: 576px) {
    html{
        font-size: 90% !important;
    }
    .container{
        padding-right: 32px;
        padding-left: 32px;
    }
    :root{
        /* Fonts Size Menu*/
        --font-size-menu: .9rem;

        /* Fonts Size Titulos*/
        --font-size-title-1: 1.725rem;
        --font-size-title-2: 1.725rem;
        --font-size-title-3: 1.325rem;
        --font-size-title-4: 1.210rem;

        /* Fonts Size Texto */
        --font-size-text: .9rem;
        --font-size-text-big: 1rem;
        --font-size-text-small: px; 

        /* Button Config */
        --font-size-button-01: .9rem;

    }
}