@font-face { font-family: 'poppins'; font-style: normal; font-weight: 200; font-display: swap; src: url(../fonts/Poppins-ExtraLight.ttf) format('ttf');}
@font-face { font-family: 'poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/Poppins-Regular.ttf) format('ttf');}
@font-face { font-family: 'poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/Poppins-Bold.ttf) format('ttf');}

:root { --green:rgba(74, 115, 46, 1); --green-dark:rgba(38, 64, 34, 1); --blue:rgba(0, 114, 187, 1); --blue-light:rgba(15, 217, 214, 1); --blue-dark:rgba(37, 42, 53, 1);}

*, *::before, *::after { margin: 0; padding: 0; border: 0; outline: 0; box-sizing: border-box; }
html, body { overflow-x: hidden; scroll-behavior: smooth;}
body { background-color: #fff;}
body, input, label, select, textarea { color: #000; font-size: 1rem; font-family: "Poppins", sans-serif; font-style: normal;}
a, button, label, summary, input[type="submit"] { cursor: pointer; text-decoration: none; transition: all .3s ease-out; }
img { display: block; /* margin: 0 auto; */ max-width: 100%; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/*Início Banner*/
#banner {background: url(../img/bg-novolar-sjc.webp) no-repeat center / cover;}
#banner .cont-title {background: var(--blue); display: flex; flex-direction: row; justify-content: center; align-items: center; padding:14px ;}
#banner h1 {background: url(../img/logo-novolar.svg) no-repeat center / contain; width: 181px; height: 49px; color: transparent; font-size: 1px; text-align: center;}
#banner .wrap {display: flex; flex-direction: row; justify-content: space-between; align-items: end; padding: 90px 20px; gap: 0 15px;}
#banner .cont-text {flex: 0 0 33.33%}
#banner .cont-text div {background: var(--blue); display: flex; justify-content: center; align-items: center; width:110px; height: 110px; border-radius: 50%;}
#banner .cont-text h2 {font-size:2.188rem; font-weight: 700; line-height: 42px; color:#fff; width: 320px; position:relative; padding: 15px 0 30px}
#banner .cont-text h2::before {content: ""; background: var(--green); width: 300px; height: 2px; bottom:5%; left:0; position: absolute  ;}
#banner .cont-text p {font-weight: 400; line-height: 24px; color:#fff; width:300px;}
#banner .box {flex: 0 0 33.33%;}
#banner .infos {display: flex; flex-direction: column; align-items: center; width:370px; height: 375px; border-radius:12px;  position: relative;}
#banner .infos h2 {color:#fff; font-weight: 700; line-height: 16px; font-size: 0.875rem; letter-spacing: 1.25px; text-align: center; text-transform: uppercase; padding:18px 0; position: relative}
#banner .infos h4 {color: #fff; font-size: 0.875rem; font-weight: 400; line-height: 16px; letter-spacing: 1.25px; text-transform: uppercase; text-align: center; padding: 12px; width: 340px; border:1px dashed #fff; border-radius: 80px; margin: 18px 0; position: relative}
#banner .box .cont-infos {display:flex; align-items: center; padding: 0 24px;}
#banner .box .cont-infos div {flex: 0 0 50%; padding: 0 12px;}
#banner .box .cont-infos ul {flex: 0 0 50%; padding: 0 12px; }
#banner .box .cont-infos h5 {color:#fff; font-size:2.5rem; font-weight: 400; line-height: 24px; text-transform: uppercase; position:relative}
#banner .box .cont-infos h5 span {font-size:1.25rem ;}
#banner .box .cont-infos h6 {color: #fff; font-size:1.125rem; text-transform: uppercase; font-weight: 400; line-height: 24px;}
#banner .box .cont-infos h6 strong {display: block; font-size: 1.5rem; font-weight: 400;}
#banner .box .cont-infos li {color: #fff; font-weight: 200; line-height: 21px; text-transform: uppercase; padding: 8px 12px; list-style: none;}
#banner .greenview {background: var(--green);}
#banner .box .greenview .cont-infos h5::after {content:""; background: url(../img/linha-green.webp) no-repeat; width: 2px; height:113px; top:-60%; right: 0; position:absolute;}
#banner .greenview h4::before {content: ""; background: url(../img/pin-green.svg) no-repeat; width:26px; height:29px; top:12%; left:4%; position: absolute;}
#banner .greenview h2::before { content: ""; background:  linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(38,64,34,1) 100%); width: 333px; height: 2px; bottom:23%; right:-152%; position: absolute;}
#banner .greenview h2::after { content: ""; background:  linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(38,64,34,1) 100%); width: 112px; height: 2px; bottom:-406%; right:-113%; position: absolute;}
#banner .greenview h3 {background: url(../img/green-view.svg) no-repeat center / contain; width:172px;height: 78px; color: transparent; font-size: 1px; text-align: center;}
#banner .absolute {background: var(--blue-dark);}
#banner .box .absolute .cont-infos h5::after {content:""; background: url(../img/linha-absolute.webp) no-repeat; width: 2px; height:113px; top:-60%; right: 0; position:absolute;}
#banner .box .absolute .cont-infos h5 {color: var(--blue-light)}
#banner .absolute h4::before {content: ""; background: url(../img/pin-absolute.svg) no-repeat; width:26px; height:29px; top:12%; left:4%; position: absolute;}
#banner .absolute h2::before { content: ""; background:  linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(15,217,214,1) 100%); width: 333px; height: 2px; bottom:23%; right:-97%; position: absolute  ;}
#banner .absolute h2::after { content: ""; background:  linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(15,217,214,1) 100%); width: 112px; height: 2px; bottom:-424%; right:-69%; position: absolute  ;}
#banner .absolute h3 {background: url(../img/absolute.svg) no-repeat center / contain; width:218px;height: 74px; color: transparent; font-size: 1px; text-align: center;}
#banner .box a {color:#fff; text-decoration: none; text-align: center; font-size: 0.875rem; font-weight: 400; line-height: 16px; letter-spacing: 1.25px; text-transform: uppercase; width: 340px; padding: 12px 20px; border-radius: 80px; position:absolute; bottom:-5%; right:4.3% ; cursor:pointer; transition: all 0.3s ease-in-out;}
#banner .box a:hover {scale: 1.05;}
#banner .box .btn-greenview {background: var(--green-dark);}
#banner .box .btn-absolute {background: var(--blue-light); color:#000}
#banner .absolute .cont-infos {padding: 12px 24px 0}

@media (max-width: 1299px) {#banner .wrap {flex-wrap: wrap;} #banner .cont-text {flex: 0 0 0} #banner .box {flex: 0 0 0}}
@media (max-width: 1199px) {#banner .wrap {justify-content: space-around; gap: 30px 30px}}
@media (max-width: 1159px) {#banner .wrap {justify-content: space-evenly; gap: 30px 15px;}  #banner .cont-text {display:flex; flex-direction: column; justify-content: center; align-items: center; flex: 0 0 80%} #banner .box {flex: 0 0 35%} #banner .cont-text h2 {text-align: center; width: 446px;} #banner .cont-text h2::before {left:16%} #banner .cont-text p {text-align:center; width:446px} #banner .greenview h2::after {right:-111%} #banner .absolute h2::after {right:-75%} }

@media (max-width: 799px) {#banner .infos {width: 270px} #banner .greenview h2::before {width: 250px; right: -106%} #banner .absolute h2:before {width: 250px; right: -61%} #banner .infos h4 {font-size:0.675rem; width: 250px;} #banner .box .cont-infos h5 {font-size: 2.1rem} #banner .box .cont-infos h6 {font-size: 0.825rem;} #banner .box .cont-infos h6 strong{font-size: 1.2rem;} #banner .box .cont-infos ul {padding: 0 6px} #banner .box .cont-infos li {font-size: 0.8rem; line-height: 18px; padding: 8px 4px} #banner .box a {width: 250px; font-size: 0.775rem; right: 3.6%} #banner .greenview h2::after {width: 100px; bottom: -400%; right: -81%} #banner .absolute h2::after {width: 100px; bottom: -413%; right: -50%}    #banner .cont-text h2 {width: 418px}  #banner .cont-text p {width: 436px}}

@media (max-width: 599px) {#banner .cont-text {width: 270px;} #banner .cont-text div {width: 90px; height: 90px;}  #banner {background: url(../img/bg-novolar-sjc-vertical.webp) no-repeat center / cover;} #banner .wrap {flex-direction: column; justify-content: center; align-items: center; padding:75px 20px} #banner .cont-text h2 { width: 320px; font-size: 1.588rem} #banner .cont-text h2::before {left: 0} #banner .cont-text p { width:300px}}

@media (max-width: 399px) {#banner .wrap {padding: 70px 0; gap: 30 0;} #banner .cont-text {width: 280px} #banner .cont-text h2 {width: 280px; font-size: 1.388rem; line-height: 30px;} #banner .cont-text h2::before {width: 280px;} #banner .cont-tex p {width: 280px; font-size: 0.875rem; line-height: 20px; }}


/*Início Footer*/
footer {padding: 35px 0 45px}
footer p {font-size: 0.75rem; font-weight: 400; line-height: 17px; letter-spacing: 0.52px; text-align: justify; }
footer strong {font-weight: 700; text-transform: uppercase;}