/* IMPORT FONTS FROM.CSS FILES*/
@import url(./fontes.css);

/* import variavel.css*/

@import url(./variavel.css);

/*import global.css*/

@import url(./global.css);

/*start navegation*/


.header_area .main-menu .navbar .navbar-brand{
    padding: 2rem 5rem;
}

.header_area .main-menu .nav-item .nav-link{
    font: normal 500 15px/1px var(--roboto ,cursive);
    text-transform: uppercase;
    padding: 1.7rem;
    color:var(--title-color);
}

.header_area .main-menu .navbar .active{
    background: var(--gradient-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #671df1e8;
    background-clip: text;
}

.header_area .main-menu .navbar a:hover{
    background: var (--gradient-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #6d1dd6da;
    background-clip: text;
}


/*end navegation*/

/* banner area */

.site-main .site-banner{
    background: url(../img/home-banner.png) no-repeat 0% 42% ;
}

.site-main .site-banner .site-title h3{
	text-align: center;
}

.site-main .site-banner .site-title h1{
	font-size: 5rem ;
}
.site-main .site-banner .site-title h4{
	font-size: 2.5rem;
	text-align: center;
}
.site-main .site-banner .site-title p{
    font:  20px var(--roboto);
	
    
}



/* end banner area */

/* Start about area */

 .site-main .about-area{
    padding: 8rem 5rem;
}

 .site-main .about-area .about-title h2 {
    display: block;
    font: normal bold  49px/60px var(--roboto);
    letter-spacing: 21px;
   
}

.site-main .about-area .about-title .paragraph > p{
    padding: .4rem 0;
}

/*End about area*/

/* Start Brand Area*/
.site-main .brand-area{
	padding: 1rem 10rem;
	margin-bottom: 20rem;
}

.site-main .brand-area .first-row .col-lg-4{
	display: flex;
	justify-content: center;
}


.site-main .brand-area .first-row .col-lg-4 > .single-brand > img{
	width: 50%;
}

.site-main .brand-area .first-row .col-lg-4 > .single-brand:hover{
	box-shadow: var(--box-shadow);
	transform: scale(1.1);
}

.site-main .brand-area .first-row .col-lg-4 > .single-brand:hover > img{
	filter: brightness(0.15);
}

.site-main .brand-area .experience-area{
	padding-left: 5rem;
	background-color: #e029290a;
}

.site-main .brand-area .experience-area span{
	display: block;
}

.site-main .brand-area .experience-area h2 > span{
	padding-left: 3rem;
}

.site-main .brand-area .experience-area .years-area{
	background: url(../img/client-info-bg.png) no-repeat 45px 20px;
	padding: 2rem 0;
	width: 40rem;
	height: 18rem;
	padding-left: 4rem;
	position: relative;
}
.site-main .brand-area .experience-area .years-area .years{
	font: normal bold 84px/40px var(--roboto);
	color: #854fee;
	margin-top: 2rem;
}

.site-main .brand-area .experience-area .years-area h2 > span{
	font: normal 600 22px/30px var(--roboto);
}

.site-main .brand-area .experience-area .call-area{
	padding: 1rem 2rem;
}

/* End Brand Area*/

/* Start services area*/

.site-main .services-area{
	padding: 0rem 0rem;
}
.site-main .services-area .services-title{
	padding: 0rem 14rem;
}

.site-main .services-area  .services-title h1{
	font-size: 35px;
	letter-spacing: 12px;
}

.site-main .services-area .services{
	background: rgba(241, 237, 237, 0.973);
	padding: 2rem 0rem;
	width: 16rem;
	margin: 5rem .5rem;
	transition: box-shadow .7s ease;
}

.site-main .services-area .services:hover{
	box-shadow: var(--box-shadow);
	cursor: pointer;
}

/*end services area*/

/* Footer Area*/
footer.footer-area{
	padding: 5rem 0;
	background: url(../img/footer-bg.png) no-repeat;
	background-color: #333;
}
footer.footer-area .social h5{
	font: normal 500 18px/30px var(--roboto);
}
footer.footer-area .social a > i{
	font-size: 22px;
	padding: 2rem;
	color: var(--border-color);
}
footer.footer-area .social a:hover > i{
	color: var(--primary-color);
}
/* End Footer Area*/

/*start imags*/

#galeria > div{
	float: left;
	width: 33%;
	padding: 10px;
	box-sizing: border-box;
}

.foto img{
	width: 100%;
	display: block;
}

.detalhes{
	display: none;
}

#galeria .foto:target{
	position: fixed;
	width: 50%;
	top: 15px;
	left: 25%;
	padding: 5px;
	border: solid 2px #333;
	box-shadow: 0 0 25px 10px #000;
	background: white;
	border-radius: 5px;
}

.foto:target .detalhes{
	display: block;
}


/*end imags*/