/* 1. Painel
--------------*/
#painel {position: relative;}
#painel .carousel img {height: 450px; object-fit: cover;}
#painel .carousel .carousel-caption {top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; text-align: left; background: rgba(0, 0, 0, 19%)}
#painel .carousel .carousel-caption h1 {margin-bottom: 1rem;}
#painel .carousel .carousel-caption h2 {font-weight: 300; text-transform: uppercase; letter-spacing: 7px;}
#painel .carousel .carousel-indicators button {width: 15px; -webkit-transition: width .4s ease-in-out; transition: width .4s ease-in-out;}
#painel .carousel .carousel-indicators button.active {width: 30px;}
#painel .overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#painel .formulario {background: #063F5E; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .65); border-radius: 30px 0 30px 0; padding: 1rem;}
#painel .formulario h1, #painel .formulario h2 {font-weight: 600; text-align: center; color: #6DC36A;}
#painel .formulario h1 {text-transform: uppercase; margin-bottom: 1rem;}
#painel .formulario h2 {margin-bottom: 0.75rem;}

/* 2. Tapete de boas-vindas
-----------------------------*/
#welcome-mat .box {text-align: center; height: 100%; padding: 3rem 1rem;}
#welcome-mat .box .icon {height: 55px; margin-bottom: 1rem;}
#welcome-mat .box .icon img {height: 100%;}
#welcome-mat .box .text h2 {font-weight: 600; text-transform: uppercase;}
#welcome-mat .box .text p {font-weight: 300;}
#welcome-mat .col-md-4:nth-child(1n) .box {background: #063F5E; color: #FFF;}
#welcome-mat .col-md-4:nth-child(2n) .box {background: #0B4D71; color: #FFF;}
#welcome-mat .col-md-4:nth-child(3n) .box {background: #0F5C86; color: #FFF;}

/* 3. Sobre
-------------*/
#sobre {background: #EAEAEA;}
#sobre img {max-height: 350px;}

#sobre-interno h2 {font-weight: 400; text-align: center; text-transform: uppercase;}
#sobre-interno h3 {font-weight: 700; text-transform: uppercase; color: #063F5E; border-left: 3px solid #063F5E; padding-left: 0.5rem;}
#sobre-interno .background {margin: 45px 0; padding: 120px 0; position: relative; z-index: 0;}
#sobre-interno .background::before {content: ''; position: absolute; top: 0; left: -50%; width: 110%; height: 100%; background: url(../images/jpg/background/sobre.jpg); background-size: cover; z-index: -1;}
#sobre-interno .background .box {background: #FFF; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .35); padding: 1rem;}
#sobre-interno .background .box h2, #sobre-interno .background .box .titulo {text-align: left;}
#sobre-interno .background .box h2 {font-size: 18px; font-weight: 700; color: #063F5E;}
#sobre-interno .square {border: 2px solid #063F5E; padding: 1rem;}

/* 4. Tratamentos
-------------------*/
#tratamentos .tratamento {height: 300px; position: relative; overflow: hidden;}
#tratamentos .tratamento img {height: 100%; object-fit: cover;}
#tratamentos .tratamento .overlay {position: absolute; bottom: 0; left: 0; width: 100%; height: auto; background: #489846; color: #FFF; padding: 0.5rem;}
#tratamentos .tratamento .overlay h2 {font-size: 16px; font-weight: 600; text-align: center; text-transform: uppercase; margin-bottom: 0;color: #fff;}
#tratamentos .tratamento .overlay .button {max-height: 45px; margin-top: 0.5rem; overflow: hidden; -webkit-transition: .4s ease-in-out; transition: .4s ease-in-out;}
#tratamentos .tratamento:not(:hover) .overlay .button {max-height: 0; margin-top: 0;}

/* 5. Diferencial
-------------------*/
#diferencial {background: #EAEAEA;}
#diferencial h2:not(.subtitulo) {font-weight: 600; color: #063F5E;}

/* 6. Planos
--------------*/
#planos .titulo {margin-bottom: 1.75rem;}
#planos .plano {box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .15); padding: 1rem;}
#planos .plano img {height: 90px; margin-bottom: 1rem;}
#planos .plano h2 {font-weight: 600; text-align: center; text-transform: uppercase; color: #063F5E;}
/* #planos .slick-slider .slick-slide {margin: 5px 15px;} */

/* 7. Contato
---------------*/
#contato h2 {font-weight: 700; text-align: center; text-transform: uppercase;}
#contato p {text-align: center; color: #767676;}
#contato .box {background: #727176; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .35); color: #FFF; padding: 1rem;}
#contato .box p {font-weight: 300; text-align: left; color: inherit;}
#contato .box a:hover {color: inherit; opacity: .75;}

/* 8. Tratamentos
-------------------*/
#tratamentos h2 {font-size: 16px; font-weight: 700; text-transform: uppercase; color: #063F5E; margin-bottom: 0.25rem;min-height: 16px;}
#tratamentos h3 {font-size: 16px; font-weight: 700; margin-bottom: 0.25rem;}
#tratamentos .background {background: #063F5E; color: #FFF; margin: 45px 0; padding: 35px 0;}
#tratamentos .background h1 {font-size: 22px; text-align: center; text-transform: uppercase;}
#tratamentos .background h2 {text-align: center; color: inherit; margin-bottom: 1.25rem; padding: 1rem 3rem;}
#tratamentos .background .btn {margin-bottom: 0;}
#tratamentos ul {list-style: none; text-align: center;}
#tratamentos .box {box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .35); height: 100%; padding: 10px; -webkit-transition: .4s ease-in-out; transition: .4s ease-in-out;}
#tratamentos .box:hover {transform: translatey(-5px); box-shadow: 0 7px 5px 0 rgba(0, 0, 0, .35);}

/* Lente de contato */
#painel2 {background: url(../images/webp/lente/1.webp);position: relative; z-index: 0;background-position: center; background-repeat: no-repeat;background-size: cover;padding: 140px 0px; }
#painel2::before {content: ''; width: 100%;  height: 100%;  position: absolute;  top: 0;  left: 0;right: 0;  bottom: 0; background: rgba(0, 0, 0, .55);	z-index: -1;}
#painel2 h1 {color: #FFF;text-transform: inherit;font-size: 34px;}


#sobre-lente img { height: 350px; object-fit: cover; margin-bottom: 0.5rem;}
#sobre-lente h2 {color: #489846;}
#sobre-lente p span {color: #2a92ca;}
#sobre-lente h1 {color: #0F5C86; font-weight: 700; font-size: 24px; margin-bottom: 1rem;}
#sobre-lente h3 {color: #2a92ca; font-weight: 700; font-size: 18px;}
#sobre-lente p {font-size: 14px;}


/* Bombeiros */
#bombeiros .color {background: linear-gradient(to left, #0B4D71, #2a92ca);padding: 45px 20px;}
#bombeiros .color h1 {color: #fff;}
#bombeiros img {height: 400px; object-fit: cover;border-radius: 20px;}
#bombeiros p {line-height: 32px;color: #888;text-align: justify;}
#frase {background: #2a92ca;}
#frase h2 {color: #fff;text-align: center;}
#chamada {background: #f1f1f1;}