:root{
--main:#06BAC1;
--dark: #035D61;
--gradient: linear-gradient(180deg, rgba(6, 186, 193, 1) 0%, rgba(3, 132, 137, 1) 100%);
--gray: #818285;
--tan: #FBFBF8;
}
*{
padding: unset;
margin: unset;
box-sizing: border-box;
font-family: 'Inter', sans-serif;
}
section{
padding: 100px 0;
position: relative;
}
.maxWidth{
width: 100%;
max-width: 1500px;
padding: 0 50px;
margin: 0 auto;
}
.flex{
display: flex;
}
.flex.center{
justify-content: center;
}
.flex.align{
align-items: center;
}
.flex.space{
justify-content: space-between;
}
.flex.column{
flex-direction: column;
}
html{
font-size: 20px;
}
h1{
font-size: 2.5em;
}
#home h1{
font-size: 3.5em;
}
h2{
font-size: 1.5em;
}
h1, h2, h3, h4{
text-transform: uppercase;
font-weight: 900;
}
.btn{
text-decoration: none;
padding: 10px 40px;
border-radius: 10px;
color: #FFF;
background-color: var(--main);
font-size: 1.25em;
border: 1px solid var(--main);
margin: 0 20px;
}
.btn.white{
color: var(--main);
background-color: #FFF;
} #topBar{
padding: 10px 0;
text-align: right;
background-color: #F9F9F9;
}
#topBar a{
text-decoration: none;
color: inherit;
font-size: .8em;
}
header a{
text-decoration: none;
color: inherit;
}
header{
position: absolute;
width: 100%;
left: 0;
top: 45px;
z-index: 3;
}
#bottomBar{
padding: 20px 0;
}
header.solid #bottomBar{
background-color: #FFF;
}
#bottomBar ul{
list-style-type: none;
display: flex;
align-items: center;
}
#bottomBar li{
margin: 0 0 0 30px;
} #hook{
padding: 200px 0 230px 0;
position: relative;
text-align: center;
}
#hook .screen{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.1;
background-size: cover;
background-attachment: fixed;
}
#hook .maxWidth{
position: relative;
z-index: 2;
}
#pillBox{
background:var(--gradient);
color: #FFF;
border-radius: 25px;
max-width: 1300px;
margin: 0 auto;
padding: 25px;
transform: translateY(-110px);
z-index: 3;
position: relative;
}
#pillBox .is-layout-flex p{
padding: 25px;
width: 350px;
text-align: center;
border-right: 1px solid #FFF;
font-weight: 900;
}
#pillBox .is-layout-flex p:last-child{
border-right: unset;
}
#hook h1{
color: var(--dark);
margin-bottom: 20px;
}
#hook h1 span{
color: var(--main);
}
#hook p{
font-size: 1.5em;
color: var(--gray);
max-width: 850px;
margin: 0 auto;
}
#hook .flex{
margin-top: 20px;
}
#content{
padding: 50px 0 100px;
background-color: var(--tan);
}
#supplier h2{
padding: 0 50px;
text-align: center;
color: var(--dark);
margin-bottom: 50px;
}
.logo-marquee {
overflow-x: hidden;
position: relative;
--marquee-speed: 30s; --marquee-gap: 56px;
--marquee-height: 64px;
}
.logo-marquee .logo-track {
display: inline-flex;
align-items: center;
gap: var(--marquee-gap);
white-space: nowrap;
animation: logo-marquee var(--marquee-speed) linear infinite;
}
.logo-marquee:hover .logo-track { animation-play-state: paused; } .logo-marquee .logo-item img {
height: var(--marquee-height);
width: auto;
display: block;
opacity: 1;
transition: .2s ease all;
}
.logo-marquee .logo-item img:hover { 
opacity: 1; 
filter: grayscale(0%); 
}
@keyframes logo-marquee {
from { transform: translateX(0); }
to   { transform: translateX(-50%); } }
footer{
background: var(--gradient);
color: #FFF;
padding: 100px 0;
}
footer .item{
margin: 0 50px;
}
footer .item.line-right{
border-right: 1px solid #FFF;
padding-right: 70px;
}
footer .item .wp-block-group {
padding: 5px 0;
}
footer a{
color: #FFF;
text-decoration: none;
}
footer ul{
list-style-type: none;
}
footer ul li{
padding: 5px 0;
}
footer p{
font-size: 18px;
}
#copyright{
padding: 10px 0;
background-color: #111;
color: #FFF;
}
#copyright p{
font-size: .8em;
}
#copyright a{
color: #FFF;
text-decoration: none;
}
#copyright svg{
fill: #FFF;
width: 18px;
height: auto;
margin: 0 3px;
}
#copyright svg path{
fill: #FFF;
}
#mission{
background:var(--gradient);
color: #FFF;
padding: 60px 0 100px;
text-align: center;
}
#mission .item{
color: #FFF;
background-color: var(--dark);
padding: 20px;
border-radius: 15px;
width: 30%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin: 0 15px;
}
#mission #triBox{
display: flex;
justify-content: space-between;
align-items: stretch;
transform: translateY(-100px);
}
#about #hook{
padding: 200px 0 150px;
}
#mission h2{
margin-bottom: 20px;
}
#cf7form input{
width: 100% !important;
padding: 10px 15px !important;
margin-top: 10px !important;
background-color: #FFF !important;
font-size: 18px !important;
border-radius: 5px !important;
}
#cf7form .row{
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
#cf7form .row span{
width: 49%;
}
#cf7form input[type="submit"]{
width: unset !important;
background-color: #111 !important;
color: #FFF !important;
padding: 15px 40px !important;
}
#jd img{
width: 300px;
height: auto;
}
#jd .right{
max-width: 700px;
margin-left: 25px;
font-weight: 300;
}
#supplier .accent img{
position: absolute;
bottom: 0;
height: 90%;
left: 20%;
opacity: 0.15;
z-index:-1;
}
#supplier{
position: relative;
}
#hook.products{
padding: 150px 0 100px;
}
#hook.contact{
position: relative;
padding: 200px 0 150px;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
}
#hook.contact .screen{
background-color: var(--dark);
opacity: .9;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#hook.contact h1, #hook.contact p, #hook.contact a{
color: #FFF;
text-decoration: none;
text-align: left;
}
#hook.contact p{
margin-bottom: 20px;
font-size: 1rem;
color: #FFF;
}
#hook.contact .left, #hook.contact .right{
width: 45%;
padding: 0 50px;
}
form{
text-align: left;
}
form .row{
display: flex;
align-items: center;
justify-content: space-between;
}
form .row span{
width: 49%;
}
form input{
width: 100%;
padding: 15px;
margin-bottom: 10px;
font-size: 18px;
border: unset;
border-radius: 5px;
}
form textarea{
width: 100%;
height: 150px;
padding: 10px 15px;
margin-bottom: 10px;
font-size: 18px;
border: unset;
border-radius: 5px;
}
form input[type="submit"]{
width: unset;
padding: 15px 40px;
background-color: #111;
color: #FFF;
border: 1px solid #FFF;
display: inline-block;
}
#hook.contact .flex svg{
margin-right: 5px;
}
#menuBurger{
display: none;
}
.wpcf7 form.sent .wpcf7-response-output{
background-color: #46b450;
color: #FFF;
text-align: center;
}
@media (max-width:1250px){
#home h1{
font-size: 2.5em;
}
.flex{
flex-wrap: wrap;
}
#hook.products{
padding: 200px 0 100px;
font-size: 16px;
}
#hook.contact > .flex{
flex-direction: column;
}
#hook.contact .left, #hook.contact .right{
width: 100%;
padding: 25px 0;
}
#hook.contact p{
max-width: unset;
}
footer .item{
margin: 25px;
}
}
@media (max-width:850px){
#menuBurger {
display: block;
width: 60px;
height: 60px;
padding: 10px;
cursor: pointer;
}
header nav{
position: absolute;
top: 100px;
right: 0;
padding: 25px 50px 25px 50px;
background-color: #FFF;
display: none;
}
header nav ul{
display: flex;
flex-direction: column;
}
header nav ul li{
padding: 5px 0 5px 0;
text-align: right;
width: 100%;
margin: unset !important;
}
header#nav.open nav{
display: block;
}
footer .item{
width: 100%;
padding: 0 0;
margin: 25px 0;
}
footer .item.line-right{
border: unset;
}
footer .widget_nav_menu{
width: 100%;
}
#copyright .flex{
flex-wrap: wrap;
}
#copyright p{
padding: 5px 0;
}
h1 br{
display: none;
}
#hook{
font-size: 16px;
}
#hook br{
display: none;
}
.btn{
margin: 0 10px;
}
#pillBox .is-layout-flex{
flex-direction: column;
}
#pillBox{
width: 90%;
}
#pillBox .is-layout-flex p{
border-right: unset;
border-bottom: 1px solid #FFF;
}
#pillBox .is-layout-flex p:last-child{
border: unset;
}
}
@media (max-width:600px){
header .custom-logo-link{
width: 60%;
height: auto;
}
header .custom-logo{
width: 100%;
height: auto;
}
#mission #triBox{
flex-direction: column;
}
#mission .item{
margin: 10px 0;
width: 100%;
}
.maxWidth{
padding: 0 25px;
}
#topBar p{
text-align: center;
display: flex;
flex-direction: column;
}
#topBar span{
display: none;
}
header{
top: 55px;
}
#hook.contact{
padding: 150px 0 100px;
}
br{
display: none;
}
#supplier h2{
padding: 0 25px;
}
#supplier .accent img{
max-height: 100%;
max-width: 90%;
width: auto;
height: auto;
left: 0;
}
#hook.products{
padding: 150px 0 100px;
font-size: 1em;
}
h1{
font-size: 1.5em;
}
#hook p{
font-size: 1em;
}
h2{
font-size: 1.3em;
}
#home #hook .flex{
flex-direction: column;
}
.btn{
margin: 10px 0;
}
#home h1{
font-size: 2em;
}
#hook{
padding: 200px 0 150px 0;
}
#pillBox .is-layout-flex p{
width: 100%;
font-size: 18px;
padding: 20px 0;
}
#home #hook{
padding: 150px 0;
}
#hook .screen,#hook.contact{
background-attachment: local;
}
footer .item.line-right{
padding: unset;
}
footer p{
font-size: 15px;
}
#hook.contact h1{
font-size: 2em;
}
}