/* ===========================================================
GESEEVE - WEBSITE EM CONSTRUÇÃO
Bootstrap 5.3
=========================================================== */

:root{

--green:#5f8f29;
--green-dark:#234d20;
--green-light:#b3cf62;

--yellow:#e5b316;

--white:#ffffff;

--shadow:0 20px 50px rgba(0,0,0,.25);

--transition:.35s;

}

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

html{

scroll-behavior:smooth;

}

body{

overflow-x:hidden;

font-family:
"Segoe UI",
sans-serif;

color:#fff;

background:#1d3b17;

}

/************************************************
BACKGROUND
************************************************/

.background{

position:fixed;

inset:0;

background:url("../img/background.png")
center center
no-repeat;

background-size:cover;

z-index:-4;

}

/************************************************/

.overlay{

position:fixed;

inset:0;

background:

linear-gradient(

rgba(26,63,22,.25),

rgba(26,63,22,.30),

rgba(19,53,15,.75)

);

z-index:-3;

}

/************************************************
LUZ DO SOL
************************************************/


/************************************************
HERO
************************************************/

.hero{
min-height: 90vh;
display:flex;
align-items:center;

justify-content:center;

text-align:center;

position:relative;

padding:40px 20px 180px;

}

/************************************************
LOGO
************************************************/

.logo{
	width: 500px;
	max-width:95%;
	filter: drop-shadow(0 0 8px rgba(255,255,255,.7))
	drop-shadow(0 0 25px rgba(255,255,255,.25));
}


/************************************************
TÍTULO
************************************************/

.title{
	margin-top: 55px;
	font-size: 2.2em;
	font-weight:700;
	color:#21461d;
	text-shadow: 0 2px 10px rgba(255,255,255,.55);
}

.title span{

display:block;

margin-top:8px;

color:var(--green);

font-style:italic;

font-weight:300;

font-size:54px;

}

/************************************************
SUBTITULO
************************************************/

.subtitle{

margin:35px auto;

max-width:760px;

color:#21461d;

font-size:25px;

line-height:1.8;

text-shadow:

0 2px 10px rgba(255,255,255,.45);

}

/************************************************
BOTÃO
************************************************/

.btn-whatsapp{

margin-top:20px;

display:inline-flex;

align-items:center;

justify-content:center;

gap:14px;

padding:

18px 42px;

border-radius:60px;

background:

linear-gradient(

#6ca628,

#4f7d21

);

color:#fff;

font-size:24px;

font-weight:600;

border:3px solid rgba(255,255,255,.7);

box-shadow:

0 10px 30px rgba(0,0,0,.25),

0 0 20px rgba(106,170,50,.35);

transition:all .35s;

}

.btn-whatsapp:hover{

transform:

translateY(-4px)
scale(1.03);

color:#fff;

box-shadow:

0 25px 40px rgba(0,0,0,.25),

0 0 35px rgba(126,190,40,.6);

}

.btn-whatsapp i{

font-size:32px;

}

/************************************************
SOCIAL
************************************************/

.social{
margin-top:5px;
}

.social p{
	color:#21461d;
	font-size: 1em;
	margin-bottom:12px;
	font-weight:500;
}

.social a{
	width:44px;
	height:44px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	margin:0 12px;
	border-radius:50%;
	text-decoration:none;
	color:#fff;
	font-size:20px;
	background:rgba(32,74,21,.85);
	border:2px solid rgba(255,255,255,.6);
	transition:all .35s;
}

.social a:hover{
	transform:
	translateY(-8px)
	scale(1.08);
	background:#6ca628;
}

/************************************************
RODAPÉ
************************************************/

footer{

position:absolute;

bottom:0;

width:100%;

height:180px;

background:

linear-gradient(

#244d1f,

#163311

);

overflow:hidden;

}

.wave{

position:absolute;

top:-60px;

left:0;

width:100%;

height:120px;

background:#fff;

border-radius:

0 0
50%
50%;

opacity:.92;

}

footer .container{

height:100%;

display:flex;

justify-content:center;

align-items:flex-end;

padding-bottom:28px;

}

footer p{

text-align:center;

color:#d8e7bf;

font-size:20px;

}

footer strong{

display:block;

font-size:28px;

color:#b6d25f;

margin-bottom:8px;

}

/************************************************
RESPONSIVO
************************************************/

@media(max-width:992px){

.logo{
	width:420px;
}

.title{
	font-size: 1.3em;
}

.title span{

font-size:38px;

}

.subtitle{

font-size:20px;

}

.btn-whatsapp{

font-size:20px;

padding:16px 30px;

}

.social a{

width:62px;
height:62px;
font-size:28px;

}

}

@media(max-width:576px){

.hero{

padding-bottom:220px;

}

.logo{
	width:280px;
}

.title{
	font-size: 1em;
}

.title span{
	font-size:28px;
}

.subtitle{

	font-size:18px;
	line-height:1.6;

}

.btn-whatsapp{

width:100%;

font-size:18px;

padding:16px;

}

.social a{

margin:8px;

width:56px;

height:56px;

font-size:24px;

}

footer{

height:210px;

}

footer strong{

font-size:22px;

}

footer p{

font-size:16px;

}

}

/*==================================================
    EFEITO DE BRILHO ATRÁS DA LOGO
==================================================*/

.logo-area{
    position:relative;
    display:inline-block;
    margin-bottom:25px;
}





/*==================================================
    FOLHAS FLUTUANDO
==================================================*/

#leaves{

    position:fixed;

    inset:0;

    pointer-events:none;

    overflow:hidden;

    z-index:2;

}

.leaf{

    position:absolute;

    top:-120px;

    background-repeat:no-repeat;
    background-size:contain;

    opacity:.8;

    animation-name:leafFall;
    animation-timing-function:linear;
    animation-iteration-count:infinite;

    filter:
    drop-shadow(0 4px 8px rgba(0,0,0,.2));

}

@keyframes leafFall{

0%{

transform:

translateY(-120px)

translateX(0)

rotate(0deg);

opacity:0;

}

10%{

opacity:.95;

}

50%{

transform:

translateY(45vh)

translateX(50px)

rotate(140deg);

}

100%{

transform:

translateY(120vh)

translateX(-70px)

rotate(320deg);

opacity:0;

}

}

/*==================================================
    ENTRADA DOS ELEMENTOS
==================================================*/

.logo,
.title,
.subtitle,
.btn-whatsapp,
.social{

opacity:0;

animation-duration:1.3s;

animation-fill-mode:forwards;

}

.logo{
	animation-name:fadeUp;
	animation-delay:.5s;
}

.title{
	animation-name:fadeUp;
	animation-delay:.5s;
}

.subtitle{

animation-name:fadeUp;

animation-delay:.8s;

}

.btn-whatsapp{

animation-name:fadeUp;

animation-delay:1.1s;

}

.social{

animation-name:fadeUp;

animation-delay:1.4s;

}

@keyframes fadeUp{

from{

opacity:0;

transform:
translateY(50px);

}

to{

opacity:1;

transform:
translateY(0);

}

}

/*==================================================
    HOVER DA LOGO
==================================================*/


/*==================================================
    HOVER DOS ÍCONES
==================================================*/

.social a{

position:relative;

overflow:hidden;

}

.social a::after{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.5),

transparent

);

transition:.8s;

}

.social a:hover::after{

left:120%;

}

/*==================================================
    BOTÃO PULSANTE
==================================================*/

.btn-whatsapp{

animation:

pulseButton 2.5s infinite;

}

@keyframes pulseButton{

0%{

box-shadow:

0 0 0 0 rgba(76,175,80,.55);

}

70%{

box-shadow:

0 0 0 18px rgba(76,175,80,0);

}

100%{

box-shadow:

0 0 0 0 rgba(76,175,80,0);

}

}

/*==================================================
    VINHETA SUAVE
==================================================*/

body::after{
	content:"";
	position:fixed;
	inset:0;
	pointer-events:none;
	background:
	radial-gradient(
	circle,
	transparent 55%,
	rgba(0,0,0,.18)
);

z-index:5;

}

/*==================================================
    EFEITO PARALLAX
==================================================*/

.background{
	transition:
	transform .25s linear;
	will-change:transform;
}

/*==================================================
    SOMBRA NO TEXTO
==================================================*/

.title,
.subtitle{

filter:

drop-shadow(0 2px 3px rgba(255,255,255,.25))

drop-shadow(0 5px 12px rgba(0,0,0,.15));

}

/*==================================================
    BRILHO NAS REDES
==================================================*/

.social a:hover{

box-shadow:

0 0 18px rgba(255,255,255,.6);

}