html, body {
width:100%;
height:100%;
}
html {
scroll-behavior: smooth;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
color:#4d4d4d;
font-size:18px;
line-height:1.5;
--blue: #265EFF;
--green: #63BCAF;
}
* {
box-sizing: border-box;
}
a {
color:inherit;
text-decoration: none;
}
a:hover {
text-decoration:underline;
}
img {
max-width:100%;
height:auto;
}
h2 {
font-size:32px;
}
h2.content-element__title {
text-align:center;
}
h2.content-element__title + p {
margin-top: -25px;
}
h3 {
font-size:21px;
line-height:24px;
}
.blue {
color: var(--blue);
}
.green {
color: var(--green);
}
button.blue-button, .userform .action {
font-size: inherit;
padding: 20px 40px;
}
button:hover {
cursor: pointer;
}
.bold-heading {
font-weight: bold;
font-size: 24px;
}
.blue-line {
width:100%;
height:1px;
background-color: var(--blue);
}
.blue-dividers hr {
width:60px;
margin-inline-start: 0px;
color:var(--blue);
}
.blue-dividers ul {
padding-left:15px;
}
.flex, .dnadesign__elementallist__model__elementlist .list-element__container:not([data-listelement-count="1"]) {
display:flex;
flex-wrap:nowrap;
justify-content:space-between;
gap: 30px;
@media screen and (max-width: 768px) {
flex-direction: column
}
}
.dnadesign__elementallist__model__elementlist .list-element__container:not([data-listelement-count="1"]) > div {
flex-basis:100%;
}
.dnadesign__elementallist__model__elementlist.flex-column > .list-element__container:not([data-listelement-count="1"]) {
flex-direction: column;
}
.text-center {
text-align: center;
}
.align-center {
margin: 0px auto;
}
.inner, .content-inner > .list-element__container {
max-width: 1220px;
margin: 0 auto;
padding: 0px;
@media screen and (max-width: 768px) {
padding: 0 20px;
}
}
.divider {
height: 1px;
background-color: var(--blue);
margin: 20px 0;
}
.blue-button, .green-button, .userform .action {
background-color: var(--blue);
border: 1px solid var(--blue);
color: #ffffff;
padding: 8px 40px;
border-radius: 20px;
text-decoration: none;
display:inline-block;
box-sizing: border-box;
}
.blue-button:hover, .green-button:hover {
color: var(--blue);
background-color: #ffffff;
text-decoration: none;
}
.green-button {
background-color: var(--green);
border: 1px solid var(--green);
}
.green-button:hover {
color: var(--green);
}
.gradient-bg, .dnadesign__elementallist__model__elementlist {
background: #2A7B9B;
background: linear-gradient(180deg, rgba(42, 123, 155, 1) 0%, rgba(245, 248, 255, 1) 0%, rgba(232, 238, 253, 1) 100%);
}
.dnadesign__elementallist__model__elementlist .dnadesign__elementallist__model__elementlist {
background:none;
padding:0px;
}
.dnadesign__elementallist__model__elementlist .dnadesign__elementallist__model__elementlist.white-box {
background:#FFFFFF;
}
input[type="text"] {
border: 1px solid #4d4d4d;
padding: 20px 40px;
border-radius: 20px;
font-size:18px;
}
nav ul li.contact-us > a::before, .fa-regular::before, .fa-solid::before, .contact-row strong::before, a.arrow-right::after {
color:var(--blue);
font-family: 'Font Awesome 6 Free';
padding-right:5px;
font-style:normal;
}
i.fa-solid.fa-phone::before, .call-us::before {
content: "\f095";
font-weight: 700;
}
i.fa-solid.fa-arrow-right-long::before, a.arrow-right::after {
content: "\f178";
}
i.fa-solid.fa-magnifying-glass::before {
content: "\f002";
}
i.fa-solid.fa-arrow-left-long::before {
content: "\f177";
}
i.fa-solid.fa-arrow-right-long.blue::before {
content: "\f178";
}
i.fa-regular.fa-circle-check.blue::before {
content: "\f058";
}
i.fa-solid.fa-xmark::before {
content: "\f00d";
}
.email-us::before, .fa-envelope::before {
content: "\f0e0";
color:var(--blue);
}
.chat-with-us::before {
content: "\f075";
color:var(--blue);
}
a.arrow-right::after {
font-weight: 700;
padding-left:5px;
}
header {
position:fixed;
width:100%;
z-index:40;
top:0;
background: #ffffff;
}
header > div.inner {
padding-top:30px;
padding-bottom:30px;
align-items:center;
}
header form {
flex-grow:1;
align-items: center;
background:#ffffff;
border-radius:20px;
padding:10px 30px;
padding-right:10px;
border: 1px solid var(--green);
@media screen and (max-width: 768px) {
padding: 0px;
border:none;
background:transparent;
}
}
header form:focus-within {
border-color: var(--blue);
}
header form input[type="text"] {
border: none;
background: transparent;
font-size: 18px;
color: #4d4d4d;
padding:0px;
width:311px;
@media screen and (max-width: 768px) {
width:100%;
border-radius:20px;
padding:10px 30px;
border: 1px solid var(--green);
background:#FFFFFF;
}
}
header form input[type="text"]:focus {
outline: none;
}
header form button {
background: var(--green);
border: 1px solid var(--green);
border-radius: 20px;
padding:10px 20px;
}
header form button:hover {
background: #FFFFFF;
color: var(--green);
cursor:pointer;
}
header form i.fa-solid::before {
color:#FFFFFF;
@media screen and (max-width: 768px) {
font-size:18px;
content: "Search Catalouge";
font-family: Arial, Helvetica, sans-serif;
text-transform: none;
font-weight:normal;
}
}
header form button:hover i.fa-solid::before {
color: var(--green);
}
@media screen and (min-width: 769px) {
header nav {
background: #384858;
}
header nav a {
text-decoration: none;
color:#FFFFFF;
padding: 15px 25px;
display:flex;
}
header nav ul.flex {
list-style: none;
padding: 0;
gap:0px;
justify-content: flex-start;
}
nav ul li.active a, nav ul li:hover a {
color: var(--green);
}
nav ul li a:hover {
text-decoration: none;
}
nav ul li.parent > a::after {
content: "\2304";
font-size:16px;
font-weight:bold;
padding-left:5px;
}
nav ul li.ai-chemistry a::before {
content: "Ai";
padding-right: 5px;
color:var(--green);
}
nav ul li.about-us {
margin-left: auto;
display: flex;
align-items: center;
}
nav ul li.about-us::after {
content: "|";
color:#FFFFFF;
}
nav ul li ul {
display: none;
}
nav ul li:hover > ul {
display: block;
position: absolute;
background: #65727E;
list-style:none;
/*border:1px solid;*/
z-index:30;
padding:0px;
width:312px;
font-size:17px;
}
nav ul li:hover ul li {
padding: 5px 25px;
}
nav ul li:hover ul li:first-child {
padding-top:10px;
}
nav ul li:hover ul li:last-child {
padding-bottom:10px;
}
nav ul li:hover ul li a {
display:inline-block;
padding:0px;
color: #FFFFFF;
}
nav ul li:hover ul li a:hover {
text-decoration: underline;
text-decoration-color: var(--green);
}
nav ul li:hover ul li:hover ul {
display: block;
left: 311px;
position:realtive;
top:0px;
}
nav ul li.contact-us {
order:1;
}
}
header a#mobile-menu {
display:none;
}
#content {
margin-top:215px;
}
.section-header, .page-section, .dnadesign__elementallist__model__elementlist {
padding-top:60px;
padding-bottom:60px;
}
.page-section {
background-size:cover;
background-position:center;
background-repeat: no-repeat;
}
.list-element__container[data-listelement-count="1"] .content-element__content,
.dnadesign__elementallist__model__elementlist.white-box-inner > .list-element__container,
#featured-inner .product-item,
#news-inner > div, #page-content,
.white-box,
.slick-slide {
padding: 20px 30px;
background:#ffff;
border-radius: 30px;
}
.slick-track {
height:520px;
}
.dnadesign__elementallist__model__elementlist.white-box-inner > .list-element__container {
max-width: 1220px;
margin: 0 auto;
padding: 30px 50px;
}
.slick-slide {
margin-right:15px;
}
.product-item {
height:100%;
}
/* Homepage Banner */
#home-banner {
overflow:hidden;
position:relative;
}
#home-slider {
margin: 1em auto;
width: 1220px;
max-width:100%;
height: 450px;
position: relative;
overflow:hidden;
border-radius: 20px;
@media screen and (max-width: 768px) {
height: 200px;
}
}
#home-slider img {
position: absolute;
width: 100%;
height: 100%;
}
#home-slider img:nth-of-type(1) {
animation-name: fader;
animation-delay: 4s;
animation-duration: 1s;
z-index: 20;
}
#home-slider img:nth-of-type(2) {
z-index: 10;
}
#home-slider img:nth-of-type(n+3) {
display: none;
}
@keyframes fader {
from { opacity: 1.0; }
to { opacity: 0.0; }
}
#home-banner-text {
padding: 0px 50px;
border-radius:30px;
position: absolute;
z-index: 30;
top:0;
left:0;
height:100%;
width:100%;
max-width:1220px;
display: flex;
flex-direction: column;
justify-content: center;
}
#page-banner {
border-radius: 20px;
background-image: url('/assets/Uploads/products-banner.webp');
background-position: center;
background-size: cover;
position: relative;
z-index:20;
height:300px;
}
#page-banner #banner-text {
height: 100%;
width:100%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(56, 72, 88, 0.3);
border-radius: 20px;
}
#products-page #page-banner #banner-text {
padding: 0px 20px;
}
#page-banner h1 {
font-size: 50px;
line-height: 70px;
color:#FFFFFF;
@media screen and (max-width: 768px) {
font-size: 28px;
line-height: 32px;
}
}
#home-banner-text h1 {
font-size: 80px;
line-height:1.2;
font-weight: bold;
color:#ffffff;
margin:0px;
@media screen and (max-width: 768px) {
font-size: 22px;
line-height: 32px;
}
}
#page-wrapper > .element:first-child, #sections, #product-list {
position: relative;
z-index: 1;
margin-top: -100px;
padding-top: 160px;
@media screen and (max-width: 768px) {
position: inherit;
margin-top:0px;
padding-top:0px;
}
}
#product-list {
padding-top:130px;
}
.page-lead {
font-size:32px;
padding-bottom:30px;
line-height:42px;
}
.page-lead strong {
font-weight: normal;
color: var(--blue);
}
.flex.table-grid > div {
flex-basis:100%;
}
#home-table {
border-collapse: collapse;
}
#home-table td {
padding:10px 15px;
vertical-align: top;
}
.product-columns.flex {
gap:0px;
padding-left:-30px;
padding-right:-30px;
}
.product-columns > div {
flex-basis:50%;
}
.product-columns > div:first-child {
padding-right:30px;
border-right: 1px solid var(--blue);
@media screen and (max-width: 768px) {
border-right:none;
border-bottom: 1px solid var(--blue);
padding-right:0px;
padding-bottom:30px;
}
}
.product-columns > div:last-child {
padding-left:30px;
@media screen and (max-width: 768px) {
padding-left:0px;
padding-top:30px;
}
}
.product-columns #product-links.flex {
gap:5px;
}
.product-columns #product-links.flex a.blue-button {
text-align: center;
font-size:17px;
}
.product-divider {
width:100%;
height:1px;
background-color: var(--blue);
margin: 30px 0;
}
#product-pagination {
display:flex;
gap:15px;
justify-content:
flex-end;
margin-top:30px;
}
#product-pagination span, #product-pagination a {
padding: 5px 15px;
}
#product-pagination span, #product-pagination a:not(.prev, .next) {
background: #ffff;
border-radius: 10px;
border: 1px solid;
border-color: #FFFFFF;
}
#product-pagination a:not(.prev, .next):hover {
border-color: var(--blue);
text-decoration: none;
}
#sections > .inner > div {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
#sections h3 {
margin-block-end:auto;
}
.sections-number {
font-size:40px;
font-weight:bold;
margin-top:10px;
margin-bottom:10px;
}
#news-inner > div {
flex-basis:100%;
}
#news-inner ul {
padding-left:0px;
list-style:none;
}
#news-inner ul li {
padding:10px 0px;
border-bottom:1px solid;
}
#news-inner ul li:last-child {
border-bottom:none;
}
#news-inner ul li a {
color: var(--green);
}
#products {
padding-top:30px;
padding-bottom:60px;
}
.product-row div {
padding-top:30px;
padding-bottom:30px;
border-bottom:1px solid var(--blue);
width:33%;
@media screen and (max-width: 768px) {
width:100%;
}
}
.product-row:last-child div {
border-bottom:none;
@media screen and (max-width: 768px) {
border-bottom:1px solid var(--blue);
}
}
.product-row div a:hover {
text-decoration: none;
color: var(--green);
}
#latest-news {
padding-top:0px;
}
#lastest-news img {
border-bottom-left-radius: 30px;
}
.news-content {
padding: 0px;
padding-right: 20px;
}
#newsletter input[type="text"] {
flex-grow:1;
background:#ECEDEF;
border:none;
}
#home-foot {
padding-top:0px;
}
#home-foot h2 {
font-size: 80px;
line-height: 100px;
font-weight: bold;
@media screen and (max-width: 768px) {
font-size: 40px;
line-height: 50px;
}
}
#home-foot .divider {
margin-bottom:60px;
}
.dnadesign__elementallist__model__elementlist.service-columns h2 {
font-weight:normal;
font-size: 18px;
line-height:20px;
color: var(--blue);
border: 1px solid var(--blue);
padding:15px 30px;
border-radius: 20px;
text-align:center;
margin-top: 0px;
}
.dnadesign__elementallist__model__elementlist.about-boxes {
background:#FFFFFF;
gap:15px;
}
.dnadesign__elementallist__model__elementlist.about-boxes .flex-column {
flex-basis: 25%;
border: 1px solid var(--blue);
padding: 30px;
border-radius: 20px;
gap:0px;
}
.dnadesign__elementallist__model__elementlist.about-boxes .flex-column .list-element__container {
gap:0px;
}
.dnadesign__elementallist__model__elementlist.about-boxes hr {
color: var(--blue);
}
.services-columns .white-box div {
height: 100%;
}
.services-columns .dnadesign__elementallist__model__elementlist .content-element__content {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.services-columns .dnadesign__elementallist__model__elementlist .content-element__content p:last-child {
margin-block-start: auto;
}
.post-summary {
padding-top:50px;
padding-bottom:32px;
border-bottom:1px solid var(--blue);
}
.post-summary:last-child {
border-bottom:none;
}
.post-summary .post-img {
width:25%;
@media screen and (max-wdth: 768) {
width:100%;
}
}
.post-summary .post-preview {
flex-grow:1;
}
.post-summary h2 {
margin-top:0px;
}
#page-content > div {
flex-basis: 50%;
@media screen and (min-width: 769px) {
flex-basis: 100%;
}
}
.what-chemistry em, .casestudies em {
color: var(--blue);
font-style: normal;
}
.blue-chevron {
flex-basis:15px !important;
display:flex;
align-items:center;
color: var(--blue);
font-weight:bold;
font-size:20px;
}
.white-box ul {
padding-left:15px;
}
#contact .white-box {
flex-basis:50%;
}
#contact .white-box h3::before {
content: "\f095";
font-family: 'Font Awesome 6 Free';
padding-right:5px;
}
#contact .white-box:last-child h3::before {
content: "\f27a";
}
#contact h4 {
font-weight:normal;
}
#email-info {
background-position: center;
background-size: cover;
padding-top:50px;
padding-bottom:50px;
}
#email-info .white-box {
width:300px;
}
.userform-fields fieldset {
margin:0px;
padding:0px;
border:none;
}
.userform-fields label {
display: none;
}
.contact-columns > .middleColumn {
display:flex;
flex-direction:row;
flex-wrap: nowrap;
gap:15px;
@media screen and (max-width: 768px) {
flex-direction:column;
flex-wrap:wrap;
}
}
.contact-columns fieldset {
flex-basis:50%;
}
.contact-columns input, .userform-fields textarea {
border:none;
background:#ECEDEF;
width:100%;
margin-bottom:15px;
padding: 20px 40px;
border-radius: 20px;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
}
.userform .btn-toolbar {
display:flex;
justify-content:flex-end;
}
.userform .action:hover {
cursor:pointer;
background:#FFFFFF;
color: var(--blue);
}
#page-foot {
padding:60px 0px;
}
footer {
background:#384858;
color:#ffff;
font-size:14px;
}
@media screen and (max-width: 768px) {
header img {
width:230px !important;
}
header #search {
width:100%;
}
header #search .green-button {
margin-top:-25px;
background: #FFFFFF;
color: var(--green);
border: none;
}
header form.flex {
gap:10px;
}
header form button {
width:100%;
}
header form button i.fa-solid.fa-magnifying-glass::before {
font-size:18px;
content: "Search Catalouge";
font-family: Arial, Helvetica, sans-serif;
text-transform: none;
font-weight:normal;
}
header nav, nav ul li > ul {
position:absolute;
z-index:30;
top:100px;
right:0;
background:#ffffff;
width:0%;
opacity: 0;
height:calc(100vh - 100px);
transition: all 0.8s ease-in-out;
padding:0px;
flex-grow:1;
overflow:hidden;
display:inline-block;
border:none;
}
nav ul li > ul {
width:100vh;
left:100vh;
}
nav ul li > ul.open {
top:0px;
z-index:50;
opacity: 1;
border: none;
padding:0px 20px;
left:0;
width:100%;
}
li.parent::after, li.back::before {
content: ">";
padding: 20px 5px;
}
li.back::before {
content: "<";
}
header nav ul.flex {
gap:0px;
}
header nav li {
display: flex;
gap:5px;
border-bottom:1px solid var(--blue);
}
header nav li.about-us {
margin-left: 0;
}
header nav li.contact-us {
border-bottom:none;
}
header nav li a, header nav li::before {
padding:20px 0px;
}
header nav li a {
flex-grow: 1;
color:inherit;
}
header a#mobile-menu {
width:36px;
height:30px;
position:absolute;
top:35px;
right:20px;
display:flex;
flex-direction: column;
justify-content:space-between;
}
.hamburger {
width:100%;
height:5px;
background-color:#4d4d4d;
border-radius:5px;
opacity:1;
transition: all 0.3s ease-in-out;
}
html.menu-open a#mobile-menu {
right:2px;
}
html.menu-open a#mobile-menu .hamburger:first-child{
transform: rotate(45deg) translateY(18px);
}
html.menu-open a#mobile-menu .hamburger:nth-child(2){
opacity:0;
}
html.menu-open a#mobile-menu .hamburger:last-child{
transform: rotate(-45deg) translateY(-18px);
}
html.menu-open {
position:fixed;
width:100%;
height:100%;
}
html.menu-open header nav {
width:100%;
opacity: 1;
padding-left:20px;
padding-right:20px;
}
html.menu-open header nav a {
display: block;
}
#content {
margin-top:285px;
}
#page-wrapper > .dnadesign__elemental__models__elementcontent {
padding:0px 20px;
}
.product-row.flex {
gap:0px;
}
#page-banner.inner {
padding:0px;
margin-left:20px;
margin-right:20px;
height: 200px;
}
#home-foot div.flex, #page-foot div.flex, footer div.flex {
flex-direction:row;
gap:0px;
justify-content:center;
flex-wrap:wrap
}
#page-foot {
padding:0px 20px;
}
footer {
padding-top:15px;
padding-bottom:15px;
}
footer div.flex p {
width:100%;
margin:0px;
text-align:center;
}
}