v0.2
/*--
- Font CSS 
-----------------------------------------*/
@font-face {
font-family: "Intelo";
src: url(https://storage.googleapis.com/fontes_syngenta/Intelo-Medium.ttf;base64,) format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Intelo Extra';
src: url('Intelo-ExtraBold.eot');
src: local('Intelo Extra Bold'), local('Intelo-ExtraBold'),
url('https://storage.googleapis.com/fontes_syngenta/Intelo-ExtraBold.eot?#iefix') format('embedded-opentype'),
url('https://storage.googleapis.com/fontes_syngenta/Intelo-ExtraBold.woff2') format('woff2'),
url('https://storage.googleapis.com/fontes_syngenta/Intelo-ExtraBold.woff') format('woff'),
url('https://storage.googleapis.com/fontes_syngenta/Intelo-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}
:root {
--theme1: #000000;
--theme2: #ffffff;
--theme3: #1b440c;
--theme4: #d0d738;
--theme5: #fcfbee;
--theme6: #002900;
--theme7: #dddddd;
--theme8: #98a308;
--theme9: #728509;
}
body {
position: relative;
font-family: 'Intelo';
font-weight: 500;
font-style: normal;
font-size: 1.15rem;
}
a, a:hover {
text-decoration: none;
}
strong, b {
font-family: 'Intelo Extra';
font-weight: 800;
}
.wrapper-lg {
padding-top: 80px;
padding-bottom: 80px;
}
.wrapper-md {
padding-top: 40px;
padding-bottom: 40px;
}
.btn-theme {
height: 50px;
padding: 0 3rem;
font-weight: 800;
font-size: 1.25rem;
line-height: 24px;
text-transform: uppercase;
color: var(--theme3);
background: var(--theme4);
display: inline-flex;
gap: 6px;
justify-content: center;
align-items: center;
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
-ms-transition: all 0.4s ease-out 0s;
-o-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;
border-radius: 60px;
text-decoration: none;
font-family: 'Intelo Extra';
}
.btn-theme:hover {
background: var(--theme2);
color: var(--theme6);
} 
/*--
- Header CSS 
-----------------------------------------*/
.header {
background: var(--theme7);
border-image-source: url(https://image.syngentamail.com/lib/fe9b15747661057b75/m/1/04634bc3-a6c0-4975-9cac-30ed1bd0a445.png);
border-image-slice: 1; 
border-image-width: .5rem 0 0 0; 
border-image-outset: 0; 
border-top: none;
border-bottom: none;
border-left: none;
border-right: none;
}
.header .logo {
display: flex;
justify-content: end;
padding: 1rem;
}
/*--
- Home CSS 
-----------------------------------------*/
.element1 {
position: absolute;
left: 0;
width: 300px;
margin-top: 60%;
}
.element2 {
position: absolute;
right: 0;
width: 300px;
margin-top: 33%;
}
.banner img {
width: 100%;
object-fit: cover;
}
.about {
background-color: var(--theme6);
}
.about .title {
color: var(--theme2);
text-transform: uppercase;
margin-bottom: 2rem;
text-align: center;
}
.about .title  span {
color: var(--theme4);
text-align: center;
}
.about .text {
color: var(--theme2);
margin-top: 2rem;
margin-bottom: 2rem;
text-align: center;
font-weight: 400;
}
.about .form {
background: var(--theme8);
border: 1px solid var(--theme2);
padding: 2rem;
border-radius: .85rem;
margin-top: 2rem;
}
.about .form .title {
color: var(--theme2);
text-align: center;
}
.about .form .form-item {
margin-top: 1rem;
margin-bottom: 1rem;
display: flex;
}
.about .form .form-item-block {
display: block;
}
.about .form .form-item label {
color: var(--theme2);
margin-right: .5rem;
}
.about .form .form-item select {
border-radius: 2rem;
}
.about .form .form-item-block label {
margin-bottom: .5rem;
}
.about .form .form-item input ,
.about .form .form-item select {
background-color: var(--theme9);
border: 1px solid var(--theme9);
color: var(--theme2);
width: 100%;
border-radius: 2rem;
padding: .25rem 1rem;
}
.about .form .form-item-block select {
background-color: var(--theme2);
border: 1px solid var(--theme2);
color: var(--theme1);
width: 100%;
border-radius: 2rem;
padding: .25rem 1rem;
}
.about .form .form-item-block input {
background-color: var(--theme2);
border: 1px solid var(--theme2);
color: var(--theme1);
}
.about .form .form-check label {
color: var(--theme2);
font-size: .85rem;
}
.about .form .form-check-input:checked {
background-color: var(--theme3);
border-color: var(--theme3);
}
.about .form .form-check a {
color: var(--theme6);
}
.about .form .form-item input[type="submit"] {
height: 50px;
padding: 0 2rem;
font-weight: 800;
line-height: 24px;
text-transform: uppercase;
color: var(--theme2);
background: var(--theme3);
display: inline-flex;
gap: 6px;
justify-content: center;
align-items: center;
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
-ms-transition: all 0.4s ease-out 0s;
-o-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;
border-radius: 60px;
text-decoration: none;
font-family: 'Intelo Extra';
}
.about .form .form-item input[type="submit"]:hover {
background: var(--theme2);
color: var(--theme6);
}
.about--video {
background: url(https://image.syngentamail.com/lib/fe9b15747661057b75/m/1/942b7d9f-c9d8-4aa4-902f-ceed8481672f.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.about--video .title {
text-align: center;
color: var(--theme2);
text-transform: uppercase;
}
.about--video .title span {
color: var(--theme4);
}
.about--video .video {
position: relative;
padding-bottom: 56.25%; /* Proporção 16:9 (9 / 16 * 100%) */
overflow: hidden;
border-radius: .45rem;
margin-top: 2rem;
margin-bottom: 2rem;
}
.about--video .video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: .45rem;
}
.about--wha-is {
background: var(--theme5);
}
.about--wha-is .title {
color: var(--theme6);
text-align: center;
font-weight: 800;
border: 1px solid var(--theme6);
padding: 1rem;
border-radius: 5rem;
font-family: 'Intelo Extra';
}  
.about--wha-is .text {
color: var(--theme6);
text-align: center;
margin-top: 2rem;
}
.about--control {
background: var(--theme6);
}
.about--control .title {
color: var(--theme2);
text-align: center;
}
.about--products {
background: url(https://image.syngentamail.com/lib/fe9b15747661057b75/m/1/942b7d9f-c9d8-4aa4-902f-ceed8481672f.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.about--products .title ,
.about--badge .title {
color: var(--theme2);
}
.about--products .title span ,
.about--badge .title span {
color: var(--theme4);
}
.about--products .image {
margin-top: 1rem;
margin-bottom: 1rem;
}
.about--products .item {
margin-top: 2rem;
margin-bottom: 2rem;
text-align: center;
color: var(--theme2);
padding: 2rem;
border-radius: 0.45rem;
position: relative;
background: rgb(208,215,56);
background: linear-gradient(180deg, rgba(208,215,56,1) 6%, rgba(66,97,12,1) 53%, #004500 99%);
height: 300px;
}
.about--products .item ul {
padding-left: 0;
list-style: none;
border-top: 1px solid var(--theme2);
padding-top: 1rem;
}
.about--products .item ul li {
text-align: left;
margin-bottom: .5rem;
font-size: 1rem;
}
.about--badge  {
text-align: center;
}
.about--badge .title {
margin-top: 2rem;
margin-bottom: 2rem;
}
.about--products .title span {
}
/*--
- Footer CSS 
-----------------------------------------*/
.footer {
background-color: var(--theme1);
}
.footer .widget .title {
color: var(--theme2);
}
.footer .widget .social {
list-style: none;
padding: 0;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.footer .widget .social li {
display: inline-flex;
margin-right: .5rem;
}
.footer .widget .social li a {
background: var(--theme2);
color: var(--theme2);
display: block;
width: 38px;
height: 38px;
line-height: 32px;
text-align: center;
border-radius: 50%;
font-size: 1.2rem;
webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
-ms-transition: all 0.4s ease-out 0s;
-o-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;
}
.footer .widget .social li a:hover {
background: var(--theme4);
}
/*--
- Responsive CSS 
-----------------------------------------*/
@media only screen and (min-width: 0px) and (max-width:768px) {
body {
font-size: 1rem;
}
.header .logo {
justify-content: center;
}
.wrapper-lg {
padding-top: 40px;
padding-bottom: 40px;
}
.btn-theme {
height: 50px;
padding: 0 2rem;
font-size: 1rem;
}
.about .form {
padding: 1.5rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.about .form .form-item {
display: block;
}
.about--products .title span:first-child, 
.about--products .title span {
left: 0;
}
.about--badge .title ,
.footer .widget .title {
margin-top: 1rem;
margin-bottom: 1rem;
}
.element1,
.element2 {
display: none;
}
}