ForMal CSS

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Syne:wght@400..800&display=swap" rel="stylesheet">
<style>
:root {
--template-font: font-family: "Syne", sans-serif;
--template-headings-font: font-family: "Syne", sans-serif;
}
.overall-wrapper {max-width:100%;overflow-x:hidden;}
.top-navigation-bar {
background-color: #f3f3f3;
border-bottom-color: #f3f3f3;
border-top-color: #f3f3f3;
}
.top-navigation-contacts, .top-navigation-menu, .languagesMenu__content {
background-color: transparent;
}
.top-navigation-bar .dropdown button, .top-navigation-bar a {
color: #757575;
}
@media (min-width: 768px) {
.header-top {
height: 98px;
padding-bottom: 19px;
padding-top: 19px;
}
#navigation {
height: 52px;
}
.navigation-in>ul>li>a {
padding-bottom: 19px;
padding-top: 19px;
}
.navigation-in {
background-color: #363530;
}
#header {isolation:isolate;position:relative;z-index:99;}
#brand_carousel {isolation:isolate;position:relative;}
#header:before {
content: '';
width: 100%;
height: 52px;
display: block;
position: absolute;
background-color: #363530;
z-index:-1;
bottom:0;
}
#header:after, .products-block .p:before {
content: '';
width: 100%;
height: 5px;
display: block;
position: absolute;
z-index: 9;
background: rgb(234, 47, 56);
background: linear-gradient(90deg, rgba(234, 47, 56, 1) 0%, rgba(234, 47, 56, 1) 12.5%, rgba(246, 133, 37, 1) 12.5%, rgba(246, 133, 37, 1) 25%, rgba(253, 211, 63, 1) 25%, rgba(253, 211, 63, 1) 37.5%, rgba(167, 207, 59, 1) 37.5%, rgba(167, 207, 59, 1) 50%, rgba(0, 166, 82, 1) 50%, rgba(0, 166, 82, 1) 62.5%, rgba(143, 216, 248, 1) 62.5%, rgba(143, 216, 248, 1) 75%, rgba(0, 173, 239, 1) 75%, rgba(0, 173, 239, 1) 87.5%, rgba(165, 103, 150, 1) 87.5%, rgba(165, 103, 150, 1) 100%);
}
}
.compact-form .btn.btn-default:hover {
background-color: #00a652;
border-color: #00a652;
color: #fff;
}
.before-carousel .container {width: 100%;}
.homepage-box {
background-color: #fff;
border-bottom-color: #fff;
border-top-color: #fff;
padding: 0;
}
.carousel-inner>.item>a>img, .carousel-inner>.item>img {
margin-left: auto;
}
.carousel .extended-banner-texts {
bottom: 0;
width: calc((50% - (706px / 2)));
left: calc((100% - 1418px) / 2);
position: absolute;
top: 0;
background: rgb(240, 240, 240);
background: linear-gradient(90deg, rgba(240, 240, 240, 1) 0%, rgba(240, 240, 240, 1) 80%, rgba(240, 240, 240, 0) 100%);
padding: 50px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 20px;
}
.extended-banner-link, .extended-banner-text, .extended-banner-title {
background-color: transparent;
border: none;
box-shadow: none;
padding: 0;
color: #222;
position:unset;
}
.carousel-inner {background: rgb(240, 240, 240);}
.extended-banner-title {
font-size: 40px;
font-weight: 600;
text-transform: uppercase;
}
.extended-banner-link {
height: auto;
margin-top: 0;
background: #00a652;
color: #fff;
padding: 12px 36px;
font-weight: 600;
}
.extended-banner-link:hover {
background: #f78626;
color: #fff;
}
.slick-initialized .slick-slide {
display: block;
padding: 30px 60px;
}
.slick-slide img {cursor:pointer;
max-height: 60px;
filter: grayscale(1);
opacity: 0.7;
}
.slick-slide img:hover {
filter: grayscale(0);
opacity: 1;
}
#brand_carousel {
display: flex;
align-items: center;
padding: 0 30px;
font-size: 20px;
font-weight: 600;
gap: 20px;
}
#brand_carousel:before {
content: '';
width: 300%;
height: 100%;
display: block;
position: absolute;
background-color: #f0f0f045;
z-index: -1;
bottom: 0;
left: -100%;
}
.slick-slider {
width: 100%;
}
.slick-dots { display: flex; padding: 0; margin: 20px 0 0; justify-content: center; align-items: center; gap: 5px; list-style-type: none; }
.slick-dots li { padding: 0; }
.slick-dots li button { background: #f1f1f1; border: none; font-size: 0; width: 30px; height: 2px; transition: all 0.5s ease; }
.slick-dots li button:hover,
.slick-dots li.slick-active button:hover,
.slick-dots li.slick-active button { background: var(--color-primary); height: 4px; transition: all 0.5s ease; }
@media (max-width: 767px) {
.slick-dots li { flex: 1; max-width: 30px; }
.slick-dots li button { width: 100%; }
}
.h4.homepage-group-title, h4.homepage-group-title {
font-size: 40px;
font-weight: 600;
text-transform: uppercase;
color: #222;
}
.products-block .p {
padding: 20px;
border: solid 1px #f8f8f8;
transition: all 0.5s ease;
}
.products-block .p:hover {
box-shadow: 0 0 30px #00000017;
transition: all 0.5s ease;
}
.columns-4 .products-block>div {
border: none !important;
}
.products-block.products .p .name {
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
color: #222;
}
.products-block .p-bottom .p-desc {
bottom: 114px;
padding-right: 20px;
display: none;
position: absolute;
background: #fff;
margin-bottom: -1px;
}
.products-block .p:hover .p-desc {display:block;}
.products-block .p:before {
left: 0;
top: 0;
width: 0;
transition: all 0.5s ease;
}
.products-block .p:hover:before {
width: 100%;
transition: all 0.5s ease;
}
.footer-banners {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 20px;
}
.footer-banners:before, .footer-banners:after {display: none;}

.footer-banner {width:100%;aspect-ratio: 1 / 1;background:#e82d36;}
.footer-banner:first-child {
grid-area: 1 / 1 / 2 / 3;aspect-ratio:unset;
}
.footer-banner:last-child {
grid-area: 2 / 3 / 3 / 5;aspect-ratio:unset;
}
.footer-banner a img {
transform: translateZ(0);
transition: all .3s ease-out;
position: absolute;
}
.footer-banner .extended-banner-texts {
position: unset;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
padding: 20px 0;
gap:20px;
}
.footer-banner a {
position: relative;
display: block;
height: 100%;
}
.footer-banner .extended-banner-title {color:#fff;font-size:24px;}
.footer-banner a img {
position: absolute;
top: 0px;
right: 0px;
}
.footer-banner:first-child a img, .footer-banner:last-child a img {
width: 50%;
}
.footer-banner:nth-child(2) {background:#f78626;}
.footer-banner:nth-child(3) {background:#fdd33f;}
.footer-banner:nth-child(4) {background:#a8ce3b;}
.footer-banner:nth-child(5) {background:#8dd8f9;}
.footer-banner:nth-child(6) {background:#a66897;}
#footer {
background: #363530;
border: none;margin-top:50px;
}
#footer>.container {
background-color: transparent;
}
#footer h4 {
margin-top: 0;
text-transform: uppercase;
color: var(--color-tertiary);
font-weight: 600;
font-size: 20px;
}
#footer .contact-box a, #footer .news-item-widget a, #footer .password-helper a, #footer ul a {
color: #c2c2c2;
}
.contact-box ul li>span:before {color: var(--color-tertiary);}
.in-index .content {
display: flex;
flex-direction: column;
}
.homepage-products-heading-24 {order:9;}
#products-24 {order:10;}
</style>