/* Google Fonts are now loaded via + a single combined
in the (resources/views/cms.blade.php), so they
download IN PARALLEL from the first byte. They used to be @import'd here, which
forced the browser to fully download + parse this 277 KB file before it could
even start fetching the fonts — the cause of the font-swap (FOUT) flash. */
:root {
--black: #000;
--white: #fff;
--theme-main: #4d76cd;
--text-light: #a3aed0;
--text-dark: #2b3674;
--text-medium: #030229;
}
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
outline: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
font-family: var(--font-regular-sf);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
transition: all 0.4s;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
}
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
a,
p {
text-decoration: none;
list-style: none;
margin-bottom: 0px;
}
/*
.nav-wrapper{
position: absolute;
left: 0;
z-index: 99;
left: 0;
right: 0;
margin: 0 auto;
} */
a,
.transition,
input[type="submit"] {
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
a,
a:hover {
color: var(--blue-light);
cursor: pointer;
text-decoration: none;
}
input[type="submit"] {
backface-visibility: hidden;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
cursor: pointer;
}
textarea,
input,
select {
border-radius: 0;
resize: none;
box-sizing: border-box;
width: 100%;
}
table,
tr,
td,
th {
border-spacing: 0;
padding: 0;
margin: 0;
vertical-align: middle;
}
table {
width: 100%;
}
.w-160 {
width: 160px;
}
.background-image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
img {
max-width: 100%;
}
p {
font-size: 16px;
color: var(--black);
line-height: 26px;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #6d6d6d;
font-family: "Schibsted Grotesk", sans-serif;
/* text-align: center; */
}
html {
width: 100%;
max-width: 100vw;
overflow-x: clip;
}
body {
width: 100%;
max-width: 100vw;
counter-reset: gap;
overflow-x: clip;
}
/* ===== Global page loader: spinning RALSON tyre on a dark backdrop ===== */
.preloader {
background: radial-gradient(900px 500px at 50% -10%, #16202e 0%, #121822 45%, #0a0d12 100%);
position: fixed;
inset: 0;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity .4s ease; /* smooth fade in / out */
}
/* Scroll lock applied while the loader is visible (page-loader.js toggles it). */
html.pl-locked, html.pl-locked body { overflow: hidden !important; touch-action: none; }
.pl-stage {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* stay centred regardless of overlay display */
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.pl-tyre-wrap {
position: relative;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
}
.pl-glow {
position: absolute;
inset: -6px;
border-radius: 50%;
background: radial-gradient(circle, rgba(234, 31, 39, .20), transparent 62%);
filter: blur(4px);
animation: pl-pulse 1.8s ease-in-out infinite;
}
@keyframes pl-pulse { 0%, 100% { opacity: .5 } 50% { opacity: 1 } }
.pl-tyre {
width: 54px;
height: 54px;
background: url('../images/loader-tire.png') center / contain no-repeat;
animation: pl-spin 1.05s linear infinite;
will-change: transform;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5));
position: relative;
z-index: 2;
}
@keyframes pl-spin { to { transform: rotate(360deg) } }
.pl-label {
letter-spacing: .34em;
font-size: 10px;
color: #9aa6b6;
text-transform: uppercase;
font-family: "Consolas", "SF Mono", ui-monospace, monospace;
}
.pl-bar {
width: 120px;
height: 4px;
border-radius: 4px;
background: #1c232f;
overflow: hidden;
}
.pl-fill {
height: 100%;
width: 40%;
border-radius: 4px;
background: linear-gradient(90deg, #8a0f14, #ea1f27, #ff6b70);
box-shadow: 0 0 8px rgba(234, 31, 39, .7);
animation: pl-slide 1.2s ease-in-out infinite;
}
@keyframes pl-slide {
0% { transform: translateX(-130%) }
100% { transform: translateX(330%) }
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
@keyframes spine {
100% {
background-position:
100% 0,
100% 100%,
0 100%,
0 0;
}
}
*::-moz-selection {
background: var(--theme-main);
color: #fff;
}
*::selection {
background: var(--theme-main);
color: #fff;
}
.overlay {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 999;
display: none;
background-color: #00000096;
}
/********* Navbar styles *********/
/* .container_in {
width: 100%;
max-width: 1360px;
} */
.custom-navbar {
width: 100%;
margin: 0 auto;
padding: 0 25px 0 30px;
clip-path: polygon(2% 0, 100% 0, 100% 55%, 98% 100%, 0 100%, 0% 50%);
background-color: rgba(28, 28, 28, 0.3);
border-bottom: 0px solid #ddd;
border: 1px solid transparent;
border-image-source: linear-gradient(
90deg,
rgba(74, 74, 74, 0) 2.94%,
rgba(123, 0, 0, 0.64) 54.52%,
rgba(74, 74, 74, 0) 97.06%
);
border-image-slice: 1;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05);
backdrop-filter: blur(12px);
justify-content: space-between;
}
.dropdown-item-btn {
color: #fff;
border: 1px solid #fff;
display: block;
width: 70px;
text-align: center;
/* margin: 0 auto; */
}
.region-inner {
display: flex;
justify-content: space-between;
}
.apply_btn {
width: 130px !important;
height: 43px !important;
color: #fff !important;
padding-top: 5px !important;
font-size: 18px;
line-height: 28px;
font-weight: 500;
margin: 40px 0 0 !important;
background: url(../images/btn_bg.png) no-repeat left center;
background-size: 100% 100%;
transition: all 0.3s linear;
gap: 20px;
}
.apply_btn:hover {
background: url(../images/btn_bg_hover.png) no-repeat left center;
background-size: 100% 100%;
}
.region-inner-wid {
width: 363px;
}
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
color: #848484;
}
.nav-link.dropdown-toggle img {
transition: filter 0.3s ease;
margin-top: 0;
}
.nav-link.dropdown-toggle {
transition: color 0.3s ease;
}
.navbar-expand-lg .navbar-collapse {
/* display: flex !important; */
flex-basis: auto;
align-items: end;
flex-grow: initial;
}
/* .navbar-brand img{
padding: 0 110px 0 80px;
} */
.navbar-nav {
font-size: 16px;
font-weight: 500;
line-height: 26px;
color: #848484;
display: flex;
justify-content: center;
gap: 5px;
align-items: center;
}
.navbar-expand-lg .navbar-nav .dropdown-menu {
background-color: #1c1c1cb2;
left: inherit;
right: 0;
border-radius: unset;
}
.navbar-expand-lg .navbar-nav li a:hover .dropdown-menu {
opacity: 1;
visibility: visible;
}
.dropdown-item {
color: #d5d5d5;
font-family: "Schibsted Grotesk", sans-serif;
font-size: 18px;
line-height: 30px;
font-weight: 700;
padding: 5px;
letter-spacing: 0.9px;
}
.region-language-menu {
position: absolute;
top: 100%;
right: 0;
width: 830px;
z-index: 9999;
left: inherit;
max-height: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
padding: 30px 40px 34px;
transition:
max-height 0.4s ease,
opacity 0.3s ease;
background: rgba(28, 28, 28, 0.8);
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
backdrop-filter: blur(12px);
border-radius: 0;
border: none;
overflow: hidden;
}
.ar .region-language-menu {
left: 0;
right: inherit;
}
.region-language-menu.show {
max-height: 1500px; /* enough for full menu */
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.dropdown-menu a:hover {
background-color: transparent;
color: #ea1f27;
}
.globe {
margin-top: 6px;
}
.navbar-nav li:last-child a.nav-link.dropdown-toggle {
position: relative;
}
.navbar-nav li:last-child.active a.nav-link.dropdown-toggle::before {
content: "";
display: block;
position: absolute;
width: 18px;
height: 9px;
background: url(../images/polygon-icon.svg) no-repeat;
bottom: 0;
right: 0;
left: 0;
margin: 0 auto;
}
.ar .region-language-menu::before {
right: inherit;
left: 57px;
}
.region-language-menu h3 {
font-family: "Schibsted Grotesk", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 30px;
color: #d5d5d5;
padding-bottom: 32px;
letter-spacing: 1.2px;
}
.region-language-menu span {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 12px;
line-height: 15px;
color: #848484;
letter-spacing: 0.6px;
}
.dropdown-divider {
border-top: 1px solid #848484;
}
.footer_sect {
/* background-image: linear-gradient(to right, #000000, #700000); */
background: linear-gradient(180deg, #000000 0%, #700000 100%);
padding-top: 385px;
margin-top: -385px;
}
.footer-text {
/* padding-top: 173px; */
padding-top: 90px;
}
.footer-text span {
font-size: 48px;
font-weight: 600;
line-height: 50px;
color: #cccccc;
text-transform: uppercase;
font-family: "Saira Extra Condensed", sans-serif;
width: max-content;
display: block;
}
.navbar-light .navbar-nav .nav-link:hover {
color: rgb(234 31 39);
}
.dropdown.show,
.dropend,
.dropstart,
.dropup {
background: rgba(51, 51, 51, 0.7);
}
.navbar-nav li {
position: relative;
}
.navbar-nav li .dropdown-menu {
position: absolute;
top: 65px;
left: -23px;
line-height: 40px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(24px);
border-width: 0px, 1px, 1px, 1px;
border-style: solid;
border-image-source: linear-gradient(
88.6deg,
rgba(255, 255, 255, 0.6) -6.54%,
rgba(255, 255, 255, 0) 50.07%,
rgba(255, 255, 255, 0.6) 106.68%
);
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
/* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); */
/* display: none; */
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 2;
padding: 0;
width: max-content;
}
/* .navbar-nav li:hover a {
color: #9B5E41 !important;
font-weight: 500;
} */
.navbar-nav li:hover .dropdown-menu {
/* display: block; */
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.navbar-nav li .dropdown-menu li {
padding: 11px 24px;
margin-right: 0;
}
.nav-item.dropdown:hover,
.nav-item.dropdown.active {
background: rgba(51, 51, 51, 0.7) !important;
}
.nav-item.dropdown svg path {
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.nav-item.dropdown:hover svg path,
.nav-item.dropdown.active svg path {
fill: #ea1f27;
}
.nav-item.dropdown:hover a,
.nav-item.dropdown.active a {
color: #ea1f27;
}
.nav-item.dropdown.show > .nav-link.dropdown-toggle {
background: rgba(51, 51, 51, 0.7);
}
.nav-item.dropdown {
position: inherit;
}
.nav-link.dropdown-toggle.show img {
filter: brightness(0) saturate(100%) invert(18%) sepia(91%) saturate(5113%)
hue-rotate(352deg) brightness(97%) contrast(99%);
}
.nav-item.dropdown.show .nav-link {
color: #ea1f27 !important;
}
.nav-item.dropdown.show .nav-link.dropdown-toggle {
background-color: #2b2b2b;
border-radius: 4px;
color: #fff;
}
/* .nav-item.dropdown.show .nav-link.dropdown-toggle img{
filter: brightness(0) saturate(100%) invert(18%) sepia(91%) saturate(5113%) hue-rotate(352deg) brightness(97%) contrast(99%);
} */
.dropdown-toggle::after {
display: none;
}
/* .nav-wrapper {
display: flex;
justify-content: center;
padding-top:50px;
} */
.navbar-nav li .region-inner a {
color: #d5d5d5 !important;
font-family: "Schibsted Grotesk", sans-serif;
font-size: 18px;
line-height: 30px;
font-weight: 700;
padding: 5px !important;
letter-spacing: 0.9px;
display: block;
}
.navbar-nav li .region-inner a,
.navbar-nav li .region-inner a {
padding: 2px 15px !important;
margin-bottom: 5px;
}
.navbar-nav li .region-inner a:hover,
.navbar-nav li .region-inner a.active {
color: #fff !important;
/* background-color: #EA1F27; */
background-color: rgba(234, 31, 39, 0.2);
clip-path: polygon(
0px 0px,
100% 0px,
100% 82%,
95% 100%,
0px 100%,
0px 0px
);
}
.ar .navbar-nav li .region-inner a:hover,
.ar .navbar-nav li .region-inner a.active {
clip-path: polygon(
100% 0px,
0px 0px,
0px 82%,
5% 100%,
100% 100%,
100% 0px
);
}
.nav-item.dropdown.active .prod-button svg path {
fill: none;
}
/********************* Hero Section *********************/
.hero-section {
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
/*****************Slider CSS********/
.product-img-slide {
display: inline-block;
width: 100%;
}
.product-img-slide .slider-for {
width: 85%;
float: right;
padding: 40px;
background: #fff;
border: 1px solid #ddd;
overflow: hidden;
border-radius: 10px;
}
.product-img-slide .slider-nav {
width: 15%;
padding: 35px 0;
}
.product-img-slide .slider-nav .thumb-slide {
padding: 4px;
margin-bottom: 12px;
background: #fff;
border: 1px solid #ddd;
overflow: hidden;
border-radius: 4px;
}
.product-img-slide .slider-nav .thumb-slide:last-child {
margin-bottom: 0;
}
.product-img-slide .slider-nav .thumb-slide.slick-current {
border-color: #ddd;
}
.product-img-slide .slider-nav .thumb-slide img {
max-width: 175px;
}
.product-img-slide .slider-nav .slick-arrow {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) rotate(90deg);
}
.product-img-slide .slider-nav .slick-arrow.slick-next {
top: auto;
bottom: 0;
transform: translateX(-50%) rotate(-90deg);
}
.product-img-slide .slick-slide img {
margin: 0 auto;
}
/********************* About Us Section *********************/
.about-us-wrapper {
position: relative;
/* height: 200vh; */
}
.about-us {
/* position: relative;
width: 100%;
padding: 130px 0 260px 0;
background: url(../images/shade.png) no-repeat left bottom #000;
background-size: 100% auto;
height: 100vh;
position: sticky;
top: 0;
display: flex;
align-items: center; */
position: relative;
width: 100%;
padding: 130px 0 260px 0;
background: url(../images/shade.png) no-repeat left bottom #000;
background-size: 100% auto;
display: flex;
align-items: center;
}
.about-us h2 {
font-family: "Schibsted Grotesk", sans-serif;
color: #bb0000;
font-size: 14px;
line-height: 120%;
letter-spacing: 0.48px;
/* padding-bottom: 8px; */
font-weight: 500;
}
.about-us span {
width: 100%;
font-size: 59px;
line-height: 71px;
font-family: "Saira Extra Condensed", sans-serif;
font-weight: 500;
color: #dcdcdc;
/* margin-right: -108px; */
display: block;
}
.about-us small {
font-size: 59px;
line-height: 71px;
font-family: "Saira Extra Condensed", sans-serif;
font-weight: 500;
color: #4a4a4a;
/* margin-right: -108px; */
display: block;
}
.about-text {
width: 88%;
}
.about-image {
padding-top: 197px;
}
.about-us img {
width: 320px;
height: 320px;
display: block;
/* margin-top: 47px; */
margin: 70px 0 0;
}
.about-us .container::after {
/* width: 85%;
height: 4px;
content: '';
background: url(../images/border.png)no-repeat left top;
padding-bottom: 0;
display: block;
position: absolute;
left: 0;
bottom: -3px;
background-size:100% auto; */
content: "";
position: absolute;
left: -250px;
bottom: 0; /* align with bottom of content */
width: 100vw; /* full window width */
height: 4px;
background: url(../images/border.png) no-repeat left top;
background-size: 100% auto;
}
.top_chnge.tab-pane .slick-next:before {
top: 0;
}
.top_chnge.tab-pane .slick-next {
right: -190px;
}
.top_chnge.tab-pane .slick-prev {
left: -150px;
}
.product-content small {
font-family: "Schibsted Grotesk", sans-serif;
color: #bb0000;
font-size: 14px;
line-height: 120%;
letter-spacing: 0.48px;
padding-bottom: 8px;
font-weight: 500;
}
.product-content h3 {
font-family: "Saira Extra Condensed", sans-serif;
font-weight: 600;
font-size: 48px;
line-height: 58px;
display: block;
margin: 0;
/* padding-left:80px; */
}
.product-nav {
padding-top: 39px;
font-family: "Schibsted Grotesk", sans-serif !important;
font-weight: 700;
font-size: 17px;
line-height: 28px;
}
.highlight a {
color: #bb0000 !important;
/* text-decoration: underline;
text-decoration-style: dotted; */
}
/* .about-us::after{
width: 1290px;
height: 4px;
content: '';
background: url(../images/border.png)no-repeat left top;
padding-bottom: 20px;
display: block;
position: absolute;
left: 0;
bottom: 170px;
} */
.product-sect {
position: relative;
padding: 100px 0;
}
.product-content .slider.responsive .slick-prev {
left: 0;
right: inherit;
}
.product-content .slider.responsive .slick-next {
right: 0;
left: inherit;
}
.ar .product-content .slider.responsive .slick-prev {
right: 0;
left: inherit;
transform: rotate(180deg);
}
.ar .product-content .slider.responsive .slick-next {
left: 0;
right: inherit;
transform: rotate(180deg);
}
.product-content .slider.responsive .slick-prev.slick-disabled:before {
opacity: 1;
content: "";
width: 36px;
height: 28px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: block;
background: url(../images/left-arrow.svg);
}
.product-content .slider.responsive .slick-prev:before {
opacity: 1;
content: "";
width: 36px;
height: 28px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: block;
background: url(../images/red-left-arrow.svg);
}
.product-content .slider.responsive .slick-next:before {
content: "";
position: absolute;
right: 0;
top: 0;
opacity: 1;
width: 36px;
height: 28px;
display: block;
background: url(../images/right-arrow.svg);
}
.product-content .slider.responsive .slick-next.slick-disabled:before {
content: "";
position: absolute;
right: 0;
top: 0;
opacity: 1;
width: 36px;
height: 28px;
display: block;
background: url(../images/grey-right-arrow.svg);
}
.slick-prev {
z-index: 9;
}
.product-content .slider.responsive .tyre-content li img {
width: auto;
height: 29px;
margin: 0;
padding: 0;
}
.product-content .slider.responsive {
position: relative;
}
.product-content .slider.responsive::before {
content: "";
width: 100%;
height: 2px;
background: url(../images/prod-line.png) no-repeat left top;
display: block;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 0;
background-size: 100% 100%;
}
.product-content .slider.responsive::after {
content: "";
/* width: 1280px; */
width: 100%;
height: 2px;
background: url(../images/prod-line.png) no-repeat left top;
display: block;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: 0;
background-size: 100% 100%;
}
/* ul .d-flex{
flex-wrap: nowrap;
} */
.nav-tabs {
border-bottom: 0;
padding-left: 0;
}
.nav-tabs a {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 18px;
line-height: 25px;
letter-spacing: 0.9px;
color: #343434;
font-weight: 700;
position: relative;
}
.highlight a::after {
content: "";
width: 100%;
height: 0;
border: 0.5px dashed #bb0000;
display: block;
position: absolute;
left: 0;
bottom: -3px;
}
.tab-content > .tab-pane {
display: block;
}
.tyre-container {
padding: 40px;
width: 100%;
margin: 0 auto;
position: relative;
}
.tyre-content {
display: block;
text-align: center;
align-items: center;
padding-top: 10px;
gap: 10px;
}
.tyre-content .slick-next {
right: -191px;
top: 518px;
}
.tyre-content small {
font-family: "Schibsted Grotesk", sans-serif;
padding-top: 37px;
color: #343434;
font-size: 18px;
line-height: 20px;
font-weight: 700;
padding: 0;
margin: 0;
letter-spacing: 0.48px;
}
.tire-card .tyre-content li img {
width: auto;
height: 29px;
margin: 0;
padding: 0;
}
.tyre-content ul {
display: flex;
justify-content: center;
gap: 10px;
align-items: center;
padding-top: 10px;
}
/* .tyre-content li{
width: 95px;
height: 29px;
} */
.tyre-container p {
font-weight: 500;
font-size: 16px;
line-height: 25px;
color: #6d6d6d;
font-family: "Schibsted Grotesk", sans-serif;
padding-top: 8px;
text-align: center;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
white-space: break-spaces;
height: 60px;
}
.tyre-container img {
margin: 0 auto;
}
.tyre1 img {
/* margin: 0 auto; */
width: auto;
height: 274px;
}
/* .tyre-container::after{
content: '';
position: absolute;
right: -47px;
top: 0;
display: block;
width: 1px;
height: 100%;
z-index: 99;
background-color: #DFDFDF;
} */
/* .slick-slide:nth-child(3n) .tyre-container::after {
display: none;
} */
.responsive {
transition: opacity 0.3s ease; /* smooth fade-in */
}
/* .tyre2{
border-right: 2px solid rgba(223, 223, 223, 1);
} */
.tyre2 img {
/* margin: 0 auto; */
width: auto;
height: 274px;
}
.tyre3 img {
margin: 0 auto;
width: auto;
height: 274px;
}
/* .prod-button{
color: #4D4D4D;
font-size: 18px;
line-height: 28px;
width: 161px;
height: 45px;
margin: 72px auto 0;
background: url(../images/btn_bg.png) no-repeat left center;
transition: all 0.3s linear;
}
.prod-button:hover {
background: url(../images/btn_bg_hover.png) no-repeat left center;
} */
.prod-button {
color: #4d4d4d;
font-size: 18px;
line-height: 27px;
width: max-content;
height: 45px;
font-weight: 500;
margin: 72px auto 0;
background: url(../images/btn_bg.png) no-repeat left center;
background-size: 100% 100%;
transition: all 0.3s linear;
gap: 15px;
padding: 15px !important;
position: relative;
font-family: "Schibsted Grotesk", sans-serif;
text-transform: capitalize;
}
.prod-button:hover {
background: none;
}
/* Remove or disable the rect completely */
.prod-button svg rect {
display: none;
}
/* Path-based dashed border */
.prod-button svg path {
fill: none;
stroke: #ea1f27;
stroke-width: 2;
stroke-dasharray: 20 10;
stroke-dashoffset: 0;
opacity: 0;
transition: opacity 0.3s;
}
.prod-button:hover svg path {
opacity: 1;
animation: dashFlowPath 1.5s linear infinite;
}
@keyframes dashFlowPath {
to {
stroke-dashoffset: -32; /* moves clockwise */
}
}
.prod-button img {
width: auto;
height: 14px;
}
/* .tyre-img {
transform: translateX(-150%) rotate(0deg);
opacity: 0;
transition: transform 1.5s ease-out, opacity 1.5s ease-out;
}
.tyre-img.animate {
transform: translateX(0) rotate(720deg);
opacity: 1;
} */
/* Tyre animation */
.tyre-img {
transform: translateX(-150%) rotate(0deg);
opacity: 0;
transition:
transform 1.5s ease-out,
opacity 1.5s ease-out;
}
.tyre-img.animate {
transform: translateX(0) rotate(720deg);
opacity: 1;
}
.tyre-img {
max-width: 100%;
display: block;
}
/* Text fade-in sequence */
.fade-text {
opacity: 0;
transform: translateY(20px);
/* transition: opacity 0.6s ease-out, transform 0.6s ease-out; */
}
.fade-text.show {
opacity: 1;
transform: translateY(0);
animation: fadeUp 0.6s ease-out forwards;
}
@keyframes spin {
from {
transform: translateX(-150%) rotate(0deg);
}
to {
transform: translateX(0) rotate(720deg); /* Two full spins */
}
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/********* Warranty Section *********/
.warranty-sect {
background-image:
linear-gradient(to right, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32)),
url("../images/warranty-img-new.png");
height: auto;
background-size: cover;
padding: 149px 0;
}
.warranty-content small {
font-family: "Schibsted Grotesk", sans-serif;
color: #bb0000;
font-size: 14px;
line-height: 120%;
letter-spacing: 0.48px;
padding-bottom: 12px;
font-weight: 500;
display: block;
}
.warranty-content h3 {
color: #ffffff;
font-family: "Saira Extra Condensed", sans-serif;
font-weight: 600;
font-size: 48px;
line-height: 100%;
display: block;
margin: 0;
text-transform: uppercase;
padding-bottom: 40px;
}
.warr-container {
/* padding-left: 80px; */
}
.warr-container h4 {
color: #ffffff;
font-weight: 700;
font-family: "Schibsted Grotesk", sans-serif;
font-size: 18px;
line-height: 23px;
padding-bottom: 12px;
letter-spacing: 0.9px;
width: 280px;
}
.warr-container p {
color: #d5d5d5;
font-size: 16px;
line-height: 25px;
font-weight: 500;
font-family: "Schibsted Grotesk", sans-serif;
/* text-align: left; */
width: 326px;
}
.warr-text {
padding-left: 20px;
width: 100%;
}
.ar .warr-text {
padding-left: 0;
padding-right: 20px;
}
.warr-button {
margin: 54px auto 0;
width: max-content;
height: 48px;
display: block;
background: url(../images/btn_bg_big.png) no-repeat left center;
background-size: 100% 100%;
transition: all 0.3s linear;
padding: 15px 20px !important;
color: #fff;
}
.warr-button:hover {
color: #fff;
background-size: 100% 100%;
}
.slick-prev::before,
.slick-next::before {
display: none;
}
.slick-prev img,
.slick-next img {
width: 41px;
height: 32px;
}
/********* Why Section *********/
.why-sect {
padding: 77px 0 82px;
margin: 0 auto;
background: linear-gradient(180deg, #f2f2f2 0%, #abcde6 83.17%);
}
.ar .why-sect {
background: linear-gradient(180deg, #f2f2f2 0%, #e6caab 83.17%);
}
.why-content {
display: flex;
align-items: center;
justify-content: center;
height: auto;
text-align: center;
/* padding-top: 77px; */
}
.why-content small {
color: #bb0000;
font-size: 14px;
line-height: 120%;
letter-spacing: 0.48px;
padding-bottom: 8px;
font-weight: 500;
display: block;
font-family: "Montserrat", sans-serif;
}
.why-content h3 {
color: #343434;
font-family: "Saira Extra Condensed", sans-serif;
font-size: 48px;
line-height: 50px;
font-weight: 600;
text-transform: uppercase;
padding-bottom: 30px;
}
.why-content img {
object-fit: cover;
width: 100%;
}
.why-text {
margin: 0 -20px;
}
.why-text .col-md-6 {
padding: 0 20px;
}
.why-text-item {
position: relative;
}
.why-text-item img {
width: 100%;
height: 420px;
object-fit: cover;
display: block;
clip-path: polygon(4% 0, 100% 0, 100% 94%, 96% 100%, 0 100%, 0 6%);
margin-bottom: 35px;
}
.why-text-item h4 {
font-size: 18px;
line-height: 25px;
font-weight: 700;
font-family: "Schibsted Grotesk", sans-serif;
color: #343434;
letter-spacing: 0.9px;
padding-bottom: 7px;
}
.why-text-item p {
font-family: "Schibsted Grotesk", sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 25px;
color: #6d6d6d;
}
.tire-finder-section {
height: 100vh;
background: url(../images/tire-background.png) no-repeat center bottom;
/* background-size: 100% 120%; */
background-size: cover;
padding: 194px 0;
}
.ar .tire-finder-section {
background: url(../images/tire-background2.jpg) no-repeat center top;
background-size: auto 100%;
}
.tire-card .tyre-container {
width: 100%;
}
.tire-content {
padding: 0;
width: 100%;
position: relative;
z-index: 9;
}
.tire-content strong {
color: #fff;
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 120%;
letter-spacing: 0.48px;
padding-bottom: 6px;
display: block;
}
.tire-content h4 {
color: #ffffff;
font-size: 48px;
line-height: 50px;
font-family: "Saira Extra Condensed", sans-serif;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 30px;
}
.form-control:focus {
background-color: transparent;
border: none;
box-shadow: none;
color: #fff;
}
.select-input {
width: 292px;
}
.tire-content .select-input {
width: 384px;
}
.tire-content .select-input::before {
content: "";
display: block;
position: absolute;
background-image: url(../images/select_arrow.svg);
width: 17px;
height: 8px;
right: 16px;
top: 18px;
background-size: 100% 100%;
}
.custom-select option {
color: #000;
padding: 10px;
}
.select-input select {
color: #fff;
background-color: #fff;
font-size: 16px;
border: none;
background-color: transparent;
/* border-bottom: 1px solid #FFFFFF; */
padding: 10px 0;
font-family: "Schibsted Grotesk", sans-serif;
position: relative;
width: 384px;
height: auto;
font-size: 16px;
font-weight: 500;
background: url(../images/select_border.png) no-repeat left bottom;
margin-bottom: 32px;
}
.select-dropdown {
position: relative;
display: inline-block;
max-width: 100%;
width: 100%;
}
.select-dropdown__button {
color: #fff;
background-color: #fff;
font-size: 16px;
border: none;
background-color: transparent;
/* border-bottom: 1px solid #FFFFFF; */
padding: 12px 40px 12px 0;
font-family: "Schibsted Grotesk", sans-serif;
position: relative;
width: 384px;
height: auto;
font-size: 16px;
font-weight: 500;
background: url(../images/select_border.png) no-repeat left bottom;
margin-bottom: 0;
text-align: left;
z-index: 2;
}
.select-dropdown__button::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #000;
}
.select-dropdown__button::-moz-placeholder {
/* Firefox 19+ */
color: #000;
}
.select-dropdown__button:-ms-input-placeholder {
/* IE 10+ */
color: #000;
}
.select-dropdown__button:-moz-placeholder {
/* Firefox 18- */
color: #000;
}
.home-tire-finders .select-dropdown__button::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #fff;
}
.home-tire-finders .select-dropdown__button::-moz-placeholder {
/* Firefox 19+ */
color: #fff;
}
.home-tire-finders .select-dropdown__button:-ms-input-placeholder {
/* IE 10+ */
color: #fff;
}
.home-tire-finders .select-dropdown__button:-moz-placeholder {
/* Firefox 18- */
color: #fff;
}
.get_in_touch_right .select-dropdown__button::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: rgba(255, 255, 255, 0.5);
}
.get_in_touch_right .select-dropdown__button::-moz-placeholder {
/* Firefox 19+ */
color: rgba(255, 255, 255, 0.5);
}
.get_in_touch_right .select-dropdown__button:-ms-input-placeholder {
/* IE 10+ */
color: rgba(255, 255, 255, 0.5);
}
.get_in_touch_right .select-dropdown__button:-moz-placeholder {
/* Firefox 18- */
color: rgba(255, 255, 255, 0.5);
}
.tyre-finder-content .select-dropdown__button {
background: url(../images/black_line.png) no-repeat left bottom;
color: #000;
width: 233px;
height: auto;
background-size: 100% auto;
}
.select-dropdown__button:focus {
outline: none;
}
.select-dropdown__button .zmdi-chevron-down {
position: absolute;
right: 10px;
top: 12px;
}
.get_in_touch_right .select-dropdown__button {
padding: 8px 40px 8px 0;
width: 100%;
background-size: 100% auto;
}
.select-arrow {
position: absolute;
right: 16px;
top: 18px;
width: 17px;
height: 8px;
background: url(../images/down-arrow-dark.png) no-repeat center;
background-size: 100% 100%;
cursor: pointer;
transition: transform 0.3s ease;
z-index: 3;
}
.home-tire-finders .select-arrow,
.get_in_touch_right .select-arrow {
background: url(../images/select_arrow.png) no-repeat center;
}
.home-tire-finders .select-dropdown {
width: 348px;
display: block;
}
/* Rotate arrow when active */
.select-dropdown.active .select-arrow {
transform: rotate(180deg);
}
.select-dropdown__list {
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: 300px;
margin: 0;
padding: 0 20px;
list-style-type: none;
opacity: 0;
pointer-events: none;
transform-origin: top;
transform: scaleY(0);
transition: all 0.3s ease;
z-index: 99;
background: rgba(28, 28, 28, 0.7);
backdrop-filter: blur(12px);
overflow-y: auto;
clip-path: polygon(0 0, 100% -25%, 100% 95%, 96% 100%, -25% 100%, 0 0);
overflow-y: scroll;
-ms-overflow-style: none;
}
.select-dropdown__list::-webkit-scrollbar {
width: 0 !important;
display: none;
}
.select-dropdown.active .select-dropdown__list {
opacity: 1;
pointer-events: auto;
transform: scaleY(1);
}
.get_in_touch_right .select-dropdown__list {
clip-path: polygon(0 0, 100% -25%, 100% 83%, 96% 100%, -25% 100%, 0 0);
}
.enquirytype .select-dropdown__button {
background: url(../images/form_bg1.png) no-repeat left bottom;
background-size: 100% auto;
}
.enquirytype {
margin-bottom: 43px;
}
.select-dropdown__list::before {
content: "";
/* background: url(../images/side_bg.png)no-repeat left top;
width: 14px;
height: 11px; */
border-top: 14px solid transparent;
border-right: 14px solid rgba(28, 28, 28, 0.75);
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05);
backdrop-filter: blur(12px);
position: absolute;
right: 0;
top: -14px;
display: block;
}
.tire-finder-section .select-input,
.home-tire-finders .select-dropdown {
width: 384px;
margin-bottom: 12px;
}
.select-dropdown__list.active {
opacity: 1;
pointer-events: auto;
transform: scale(1, 1);
}
.select-dropdown__list-item {
display: block;
list-style-type: none;
padding: 10px 0;
/* background: #fff; */
border-top: 0.5px solid rgba(132, 132, 132, 1);
font-family: "Schibsted Grotesk", sans-serif;
font-size: 16px;
line-height: 100%;
font-weight: 500;
cursor: pointer;
color: #d5d5d5;
transition: all ease-in-out 0.3s;
}
.select-dropdown__list-item:first-child {
border-top: none;
}
/* .select-input .select::after{
content: '';
width: 1px;
height: 11px;
background-color: #FFFFFF;
display: block;
position: absolute;
right: -5px;
bottom: -1px;
transform: rotate(40deg);
} */
/* .select-input::before{
content: '';
display: block;
position: absolute;
background-image: url(../images/down-arrow.svg);
width: 17px;
height: 8px;
left: 264px;
bottom: 13px;
} */
/* .select-input::after {
content: '';
width: 20px;
height: 2px;
position: absolute;
background-color: #fff;
display: block;
left: 288px;
top: 62px;
transform: rotate(128deg);
} */
.find-button {
color: #fff;
font-size: 18px;
line-height: 28px;
width: max-content;
height: 45px;
/* font-weight: 500; */
background: url(../images/white_btn.png) no-repeat left center;
background-size: 100% 100%;
transition: all 0.3s linear;
gap: 15px;
padding-top: 5px !important;
position: relative;
padding: 15px !important;
font-family: "Schibsted Grotesk", sans-serif;
letter-spacing: 0.5px;
}
.find-button:hover {
background: none;
color: #fff;
}
.tire-finder-section::after {
content: "";
background: url(../images/overlay.png) no-repeat left top;
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 304px;
background-size: cover;
}
/* .ar .tire-finder-section::after{
display: none;
} */
/*
.ar .tire-finder-section::before{
content: '';
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 304px;
} */
/***************** Tip Section *************************/
.tip-section {
padding: 137px 0 113px;
background-color: #000;
}
/* .tip-content{
padding-top: 80px;
} */
.tip-content strong {
color: #bb0000;
font-size: 14px;
line-height: 120%;
letter-spacing: 0.48px;
padding-bottom: 8px;
font-weight: 500;
display: block;
font-family: "Montserrat", sans-serif;
}
.tip-content h4 {
font-family: "Saira Extra Condensed", sans-serif;
font-weight: 600;
font-size: 48px;
line-height: 50px;
text-transform: uppercase;
color: #fff;
}
.tip-content .col-md-6 img {
width: 36px;
height: 29px;
}
/* Tip Slider */
.tip-slider-wrapper {
display: inline-block;
width: 100%;
}
.tip-slider .slick-slide img {
margin: 0 auto;
max-width: 100%;
height: 100%;
object-fit: cover;
width: 100%;
padding: 0;
}
.tip-card {
width: 100%;
height: 450px;
text-align: center;
clip-path: polygon(0 0, 100% 0, 100% 94%, 94% 100%, 0 100%, 0 0);
position: relative;
overflow: hidden;
cursor: pointer;
display: block;
}
.tip-card-meta span {
display: block;
position: relative;
font-family: "Schibsted Grotesk", sans-serif;
color: #868686;
font-weight: 500;
font-size: 14px;
line-height: 26px;
background: url(../images/maintain_btn.png) no-repeat left top;
width: 104px;
height: 28px !important;
margin: 0;
}
.tip-card:hover .tip-thumb img {
transform: scale(1.2);
}
.tip-card svg path {
transition: all 0.5s;
}
.tip-card:hover svg path {
fill: #ea1f27;
}
.tip-card:hover .tip-card-meta small,
.tip-card:hover .tip-card-bag small {
text-decoration: underline;
}
.tip-thumb {
position: relative;
height: 100%;
}
.tip-thumb::before {
content: "";
width: 100%;
height: 100%;
background: #00000033;
position: absolute;
left: 0;
top: 0;
display: block;
z-index: 9;
}
.tip-thumb::after {
content: "";
width: 100%;
height: 243px;
background: url(../images/bg_img1.png) no-repeat left bottom;
position: absolute;
left: 0;
bottom: 0;
display: block;
z-index: 9;
background-size: cover;
}
.tip-thumb img {
width: 100%;
height: auto;
/* border-radius: 6px; */
transition: 0.5s;
}
.read-time {
color: #868686;
position: absolute;
left: 25px;
bottom: 20px;
transition: opacity 0.3s ease;
font-size: 14px;
line-height: 24px;
font-family: "Schibsted Grotesk", sans-serif;
font-weight: 500;
}
/* .tip-card:hover .read-time{
opacity: 1;
} */
.tip-card-meta {
/* margin-top: 15px; */
position: absolute;
left: 0;
bottom: 0;
z-index: 999;
width: 100%;
padding: 0 36px 23px 25px;
}
.tip-card-meta a {
display: block;
position: relative;
font-family: "Schibsted Grotesk", sans-serif;
color: #868686;
font-weight: 500;
font-size: 14px;
line-height: 26px;
background: url(../images/maintain_btn.png) no-repeat left top;
width: 104px;
height: 28px;
margin: 0;
}
.tip-card-meta a::before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: transparent;
-webkit-mask: paint(polygon-border);
pointer-events: none;
z-index: -1;
}
.tip-card-meta a.tip-card {
background: transparent;
margin-bottom: 10px;
width: 100%;
height: auto;
}
.tip-slider-wrapper .slick-prev.slick-disabled:before {
opacity: 1;
content: "";
width: 36px;
height: 28px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: block;
background: url(../images/left-arrow.svg) no-repeat left top;
}
.tip-slider-wrapper .slick-prev:before {
opacity: 1;
content: "";
width: 36px;
height: 28px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: block;
background: url(../images/red-left-arrow.svg) no-repeat left top;
}
.tip-slider-wrapper .slick-prev {
left: inherit;
right: 340px;
top: -83px;
}
.tip-button {
margin: 58px auto 0;
width: max-content;
height: 43px;
background-size: 100% 100%;
padding: 15px !important;
}
.tip-slider-wrapper .slick-next {
right: 253px;
top: -83px;
}
.tip-slider-wrapper .slick-next:before {
content: "";
position: absolute;
right: 0;
top: 0;
opacity: 1;
width: 36px;
height: 28px;
display: block;
background: url(../images/right-arrow.svg);
}
.tip-slider-wrapper .slick-next.slick-disabled:before {
content: "";
position: absolute;
right: 0;
top: 0;
opacity: 1;
width: 36px;
height: 28px;
display: block;
background: url(../images/grey-right-arrow.svg);
}
.slick-prev {
z-index: 9;
}
/* .tip-card-meta::before{
content: '';
position: absolute;
top: -81px;
left: 0px;
height: 243px;
width: 100%;
background: linear-gradient(to top, #330001, #3D090A00);
z-index: 1;
clip-path: polygon(0 0, 100% 0, 100% 95%, 95% 100%, 0 100%);
} */
.grid-item .tip-thumb img {
height: 100%;
}
.tip-card-meta p {
font-size: 14px;
font-family: "Schibsted Grotesk", sans-serif;
font-weight: 500;
color: rgba(134, 134, 134, 1);
border: 1px solid #ffffff80;
width: 103px;
height: 28px;
left: 25px;
}
.tip-card-meta small {
display: block;
color: rgba(255, 255, 255, 1);
font-weight: 700;
font-family: "Schibsted Grotesk", sans-serif;
font-size: 18px;
line-height: 25px;
position: relative;
text-align: left;
letter-spacing: 0.9px;
padding-bottom: 11px;
}
.tip-card-bag {
width: 100%;
height: calc(100% - 150px);
background-color: #330001;
padding: 25px 36px 23px 25px;
position: relative;
}
.tip-card-bag small {
display: block;
color: rgba(255, 255, 255, 1);
font-weight: 700;
font-family: "Schibsted Grotesk", sans-serif;
font-size: 18px;
line-height: 25px;
position: relative;
text-align: left;
letter-spacing: 0.9px;
padding-bottom: 11px;
}
.ar .tip-card-bag small {
text-align: right;
}
.ar .read-time,
.ar .card .right {
left: inherit;
right: 25px;
}
.tip-card-bag a {
display: block;
position: relative;
font-family: "Schibsted Grotesk", sans-serif;
color: #868686;
font-weight: 500;
font-size: 14px;
line-height: 26px;
background: url(../images/maintain_btn.png) no-repeat left top;
width: 104px;
height: 28px;
margin: 0;
}
.advt_card .tip-thumb {
height: 150px;
}
.advt_card .tip-thumb::after {
display: none;
}
.tip-card p {
/* margin-left: 25px; */
font-size: 14px;
color: #333;
margin-top: 10px;
line-height: 22px;
}
/*
.tip-card-meta a{
margin-top: 10px;
} */
/*
.tip-slider .slick-slide {
margin-right: 25px;
} */
.tip-slick .slick-slide {
margin: 0 14px; /* optional spacing */
}
.tip-slick .slick-list {
margin: 0 -14px; /* match negative margin */
}
.leadership_sect .tip-slick .slick-list {
position: relative;
z-index: 9;
}
/* .tip-card:hover .tip-card-meta {
transform: translate3d(0, 0, 0);
transition: transform 300ms;
background: rgba(93, 0, 2, 0.48);
} */
.play-button {
position: absolute;
height: 108px;
width: 93px;
top: 30%;
left: 0;
right: 0;
margin: 0 auto;
z-index: 99;
}
/* make sure box-sizing is border-box */
.tip-slider-full,
.tip-slider-full * {
box-sizing: border-box;
}
/* This makes the slider start at the container's left and extend to viewport right */
.tip-slider-full {
width: calc(100% + ((100vw - 100%) / 2));
max-width: none; /* let it grow outside container */
overflow: visible;
margin: 0; /* already aligned to container left */
}
/* optionally hide any tiny horizontal overflow just for this section */
.tip-section {
overflow-x: hidden;
}
.leadership_sect .tip-slider .slick-slide {
background-color: #000;
}
/*********Newsroom Section*********/
/* Custom rotating dashed border */
/* SVG positioned on top of button */
.news-button svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.news-button svg rect {
fill: none;
stroke: #fff; /* dash color */
stroke-width: 2;
stroke-dasharray: 10 6; /* dash length + gap */
stroke-dashoffset: 0;
rx: 6; /* rounded corners */
ry: 6;
opacity: 0;
transition: opacity 0.3s;
vector-effect: non-scaling-stroke;
}
.news-button:hover svg rect {
opacity: 1;
animation: dashFlow 1.5s linear infinite;
}
@keyframes dashFlow {
to {
stroke-dashoffset: 32; /* controls speed + direction */
}
}
/* Keep text & arrow above */
.news-button div,
.news-button img {
position: relative;
z-index: 2;
}
.news-button:hover {
background: none;
}
/* Remove or disable the rect completely */
.news-button svg rect {
display: none;
}
/* Path-based dashed border */
.news-button svg path {
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-dasharray: 20 10;
stroke-dashoffset: 0;
opacity: 0;
transition: opacity 0.3s;
}
.news-button:hover svg path {
opacity: 1;
animation: dashFlowPath 1.5s linear infinite;
}
@keyframes dashFlowPath {
to {
stroke-dashoffset: -32; /* moves clockwise */
}
}
/*
.news-section{
height: auto;
background: url('../images/newsbg.png') no-repeat;
background-size: 100% 96%;
padding-bottom: 320px;
} */
.news-section {
height: auto;
background: url("../images/newsbg_all.jpg") no-repeat;
background-size: 100% 96%;
padding-bottom: 320px;
/* padding-bottom: 0; */
position: relative;
}
.middleeast .news-section {
background: url("../images/newsbg_middle_east.jpg") no-repeat;
background-size: 100% 96%;
}
.northamerica .news-section {
background: url("../images/newsbg_north_america.png") no-repeat;
background-size: 100% 96%;
}
.news-content {
margin-top: 79px;
position: relative;
z-index: 9;
}
.news-content small {
color: #fff;
font-size: 14px;
line-height: 120%;
letter-spacing: 0.48px;
padding-bottom: 8px;
font-weight: 500;
display: block;
font-family: "Montserrat", sans-serif;
}
.news-content h3 {
font-family: "Saira Extra Condensed", sans-serif;
font-weight: 600;
font-size: 48px;
line-height: 58px;
text-transform: uppercase;
color: rgba(255, 255, 255, 1);
}
.grid-item .date_sect img {
width: 16px;
height: 16px;
display: block;
margin: 0;
}
.date_sect {
font-family: "Schibsted Grotesk", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 22px;
padding: 5px 0 12px;
/* text-align: left; */
color: #fff;
}
.card-content {
padding: 40px 0 84px;
position: relative;
}
.card {
width: 100%;
height: 476px;
box-shadow: none;
border: none;
background: rgba(93, 0, 2, 0.48);
padding: 0;
border-top-left-radius: 15%;
clip-path: polygon(0 0, 100% 0, 100% 96%, 96% 100%, 0 100%, 0 0);
backdrop-filter: blur(15px);
}
.card-content::before {
content: "";
background: url(../images/ellipse_img.png) no-repeat left top;
width: 576px;
height: 265px;
position: absolute;
top: -170px;
left: 0;
right: 0;
margin: 0 auto;
display: block;
}
.card-content::after {
content: "";
background: url(../images/ellipse_img.png) no-repeat left top;
width: 576px;
height: 265px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
display: block;
}
.card-body {
padding: 23px 26px;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
/* Add some padding inside the card container */
.container {
/* padding: 2px 16px; */
position: relative;
}
.card h4 {
color: rgba(255, 255, 255, 1);
font-family: "Schibsted Grotesk", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 25px;
letter-spacing: 0.8px;
padding-bottom: 7px;
/* text-align: left; */
width: 98%;
}
.card img {
width: 100%;
height: 100%;
object-fit: cover;
/* clip-path: polygon(6% 0, 100% 0, 100% 20%, 100% 93%, 94% 100%, 20% 100%, 0 100%, 0 10%); */
}
.card p {
color: rgba(213, 213, 213, 1);
font-family: "Schibsted Grotesk", sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 22px;
margin: 0 0 40px;
/* text-align: left; */
display: block;
padding: 0;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
white-space: break-spaces;
height: 43px;
}
.card .right {
width: 18px;
height: 14px;
display: block;
clip-path: none;
position: absolute;
left: 28px;
bottom: 23px;
transition: 0.5s;
}
/*
.article_grid .card-body {
height: 212px;
} */
.grid-item span {
height: 265px;
object-fit: cover;
overflow: hidden;
clip-path: polygon(4% 0, 100% 0, 100% 94%, 96% 100%, 0 100%, 0 6%);
display: inline-table;
}
.grid-item a:hover .card .right {
left: 40px;
}
.ar .grid-item a:hover .card .right {
left: inherit;
right: 40px;
}
.ar .mobile-video-filter select {
padding: 8px 62px 8px 0;
}
.ar .mobile-video-filter::after {
top: 35%;
}
.grid-item a:hover img.article_img {
transform: scale(1.2);
}
.news-button {
width: max-content;
height: 43px;
margin: 0 auto;
margin-top: 59px;
background-size: 100% 100%;
position: relative;
padding: 15px !important;
z-index: 9;
}
.testimonial_sect {
padding: 193px 0 98px;
margin-top: -385px;
/* background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 44.88%, rgba(0, 0, 0, 0) 100%); */
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
#000000 39.88%,
rgba(0, 0, 0, 0) 100%
);
position: relative;
}
.testimonial_sect::before {
content: "";
position: absolute;
display: block;
background: url("assest/images/test-shadow.png") no-repeat;
top: 0;
left: 0;
}
.ar .testimonial_sect {
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
#000000 39.88%,
rgba(0, 0, 0, 0) 100%
);
}
/* Testimonial slider*/
.testimonials-content {
padding: 52px 80px 100px 80px;
}
.testimonials-content small {
padding-top: 52px;
color: #bb0000;
margin-bottom: 8px;
font-family: "Schibsted Grotesk", sans-serif !important;
font-size: 14px;
line-height: 15px;
font-weight: 500;
}
.testimonials-content h3 {
font-family: "Saira Extra Condensed", sans-serif;
font-weight: 600;
font-size: 40px;
line-height: 58px;
display: block;
margin: 0;
}
.t-content {
display: flex;
align-items: center;
padding-top: 33px;
justify-content: left;
}
.ar .t-content {
justify-content: right;
}
.ar .t-container p {
padding-right: 0;
padding-left: 32px;
}
.t-content .slick-slide img {
width: 20px;
margin: 0 auto;
padding-top: 40px;
}
.t-content small {
padding-top: 9px;
color: #343434;
font-size: 18px;
line-height: 20px;
font-weight: 700;
justify-content: start;
}
.t-content ul {
display: flex;
gap: 4px;
align-items: start;
padding-bottom: 15px;
padding-left: 0;
}
.t-container p {
font-weight: 500;
font-size: 16px;
line-height: 25px;
color: #6d6d6d;
font-family: "Schibsted Grotesk", sans-serif;
padding-top: 8px;
text-align: start;
padding-right: 32px;
}
/* .tip-slider-wrapper .tip-slick .slick-prev {
left: inherit;
right: 460px;
top: -153px;
}
.tip-slider-wrapper .tip-slick .slick-next {
right: 376px;
top: -153px;
} */
.tip-slider-wrapper .slick-next {
right: 376px;
top: -86px;
}
.tip-slider-wrapper .slick-prev {
left: inherit;
right: 460px;
top: -86px;
}
.profile {
display: flex;
padding-top: 39px;
gap: 10px;
align-items: center;
}
.profile h5 {
color: rgba(255, 255, 255, 1);
font-family: "Schibsted Grotesk", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 25px;
}
.profile small {
color: rgba(134, 134, 134, 1);
font-family: "Schibsted Grotesk", sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 24px;
}
.profile span {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
background: #797979;
}
.testomonials .tab-pane .slick-next .tab-pane .slick-next {
right: 194px;
top: -52px;
}
.tip-slider-wrapper .tab-pane .slick-prev {
right: 268px;
left: inherit;
top: -54px;
}
.tip-slider-wrapper .tab-pane .slick-next {
right: -198px;
}
.tab-pane .slick-prev:before {
opacity: 1;
content: "";
width: 36px;
height: 28px;
position: absolute;
top: 0;
bottom: 0;
left: 158px;
display: block;
background: url(../images/left-arrow.svg);
}
.tab-pane .slick-next:before {
content: "";
position: absolute;
right: 198px;
top: -318px;
opacity: 1;
width: 36px;
height: 28px;
display: block;
background: url(../images/right-arrow.svg);
}
/*
.item-slick.slick-slide.slick-current.slick-active {
outline: none!important
}
.slider-for {
margin-bottom: 15px;
}
.slider-for img {
width: 100%;
min-height: 100%;
}
.slider-nav {
margin: auto;
}
.slider-nav .item-slick {
max-width: 240px;
margin-right: 15px;
outline: none!important;
cursor: pointer;
}
.slider-nav .item-slick img {
max-width: 100%;
background-size: cover;
background-position: center;
}
.slick-arrow {
position: absolute;
top: 50%;
z-index: 50;
margin-top: -12px;
}
.slick-prev {
left: 0;
}
.slick-next {
right: 0;
}
.slick-slider .slick-track, .slick-slider .slick-list{
width: 0;
height: 930px;
} */
.banner_cont .slider .slick-prev:before,
.banner_cont .slider-vertical .slick-next:before {
display: none;
}
.banner_cont .slider .slick-prev,
.banner_cont .slider .slick-next {
width: 28px;
height: 28px;
border-style: solid;
margin: 10px;
display: inline-block;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 10;
cursor: pointer;
}
.banner_cont .slider .slick-prev:before,
.banner_cont .slider .slick-next:before {
display: none;
}
.banner_cont .slider .slick-prev {
border-width: 14px 14px 14px 0px;
border-color: transparent #ffffff;
left: 0px;
right: auto;
}
.banner_cont .slider .slick-next {
border-width: 14px 0px 14px 14px;
border-color: transparent #ffffff;
right: 0px;
left: auto;
}
.banner_cont .slider .slick-prev:hover,
.banner_cont .slider .slick-next:hover {
border-color: transparent #ffd200;
}
.banner_cont .slider .slick-prev.slick-disabled,
.banner_cont .slider .slick-next.slick-disabled,
.banner_cont .slider .slick-prev.slick-disabled:hover,
.banner_cont .slider .slick-next.slick-disabled:hover {
opacity: 0.1;
cursor: default;
border-color: transparent #000000;
}
.banner_cont .slider.slider-thumb .slick-list {
height: 49px;
background: none;
text-align: center;
font-size: 75px;
color: #ffffff;
}
.banner_cont .slider-thumb .slick-track {
height: 49px;
width: 100% !important;
line-height: 50px;
font-size: 25px;
display: flex;
}
.banner_cont .slider-thumb .slick-slide {
width: 87px !important;
height: 49px;
overflow: hidden;
}
.banner_cont .slider-thumb .slick-slide.slick-current {
background: none;
border: 1px solid #cccccc;
}
.banner-content .slick-slide img {
width: 100%;
object-fit: cover;
height: 49px;
padding-top: 0;
}
.banner_cont .slider.slider-content {
height: 100vh;
width: 100%;
position: relative;
}
.banner_cont .slider.slider-content img,
.banner_cont .slider.slider-content video {
height: 100vh;
width: 100%;
object-fit: cover;
}
.banner_cont .slider.slider-thumb {
position: absolute;
width: 1280px;
height: 49px;
left: 0;
right: 0;
margin: 0 auto;
bottom: 90px;
z-index: 99;
}
.slider-thumb .slick-slide {
margin-right: 10px;
}
.banner-content {
position: relative;
}
.a.nav-link {
color: #848484;
}
.banner-content h3 {
font-family: "Saira Extra Condensed", sans-serif;
font-weight: 600;
font-size: 100px;
line-height: 97px;
color: #cccccc;
text-transform: uppercase;
}
.banner-content .txt_clr_chnge h3 {
color: #fff;
}
.banner-content .txt_clr_chnge small {
font-family: "Saira Extra Condensed", sans-serif;
font-weight: 600;
font-size: 50px;
line-height: 120%;
color: #fff;
text-transform: uppercase;
}
.banner-content span {
display: block;
width: 1280px;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
top: 280px;
z-index: 99;
}
.banner-content span.top_chnge {
top: 230px;
}
.navbar-light .navbar-nav .nav-link {
color: #848484;
font-size: 16px;
font-weight: 500;
font-family: "Montserrat", sans-serif;
padding: 23px 10px;
}
.navbar-light .navbar-nav .nav-link.dropdown-toggle {
padding: 23px 15px;
}
.banner_cont .slider-content::before {
content: "";
width: 100%;
height: 100vh;
display: block;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0) 79.97%, #000000 97.14%),
linear-gradient(180deg, #000000 15.48%, rgba(0, 0, 0, 0) 30%);
position: absolute;
top: 0;
left: 0;
z-index: 9;
}
/****************** Product Listing Page *******************/
/* .list-section{
background: url(../images/list-hero.png) no-repeat center center;
background-size: cover;
} */
.list-content {
padding: 172px 0 100px 0;
width: 620px;
}
.list-content.prodduct {
padding: 120px 0 70px 0 !important;
width: 620px;
}
.list-content .nav-link {
color: #f6f6f6;
font-family: "Montserrat", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 24px;
padding: 0;
}
.list-content .active {
color: #848484;
font-family: "Montserrat", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 25px;
padding: 0;
}
.list-content h3 {
color: #f6f6f6;
font-family: "Saira Extra Condensed", sans-serif;
font-weight: 600;
font-size: 94px;
line-height: 84px;
text-transform: uppercase;
padding-bottom: 20px;
}
.list-content p {
color: #c6c6c6;
font-family: "Schibsted Grotesk", sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 28px;
/* text-align: left; */
}
.list-content ul {
display: flex;
padding: 0 0 20px 0;
}
.list-content li {
padding-right: 20px;
position: relative;
}
.list-content li::after {
content: "/";
display: flex;
color: #848484;
position: absolute;
top: -2px;
right: 8px;
}
.list-content li:last-child:after {
display: none;
}
.tyre-finder-section {
padding: 60px 0 100px 0;
}
.tyre-finder-content {
display: flex;
/* justify-content: center; */
align-items: center;
padding-bottom: 40px;
/* padding-right: 40px; */
}
.tyre-finder-content h4 {
font-family: "Saira Extra Condensed", sans-serif;
font-weight: 600;
font-size: 48px;
line-height: 58px;
text-transform: uppercase;
color: #000;
white-space: nowrap;
padding-right: 40px;
}
.tyre-finder-content .select-input {
width: 233px;
}
.tyre-finder-content .select-input select {
color: #000;
border: none;
background-color: transparent;
padding: 10px 0;
font-family: "Schibsted Grotesk", sans-serif;
position: relative;
width: 233px;
height: auto;
font-size: 16px;
font-weight: 500;
background: url(../images/black_line.png) no-repeat left bottom;
margin-bottom: 0;
}
.tyre-finder-content .select-input::before {
content: "";
display: block;
position: absolute;
background-image: url(../images/down-arrow-dark.png);
width: 17px;
height: 8px;
right: 16px;
top: 18px;
background-size: 100% 100%;
}
.prod-button.text-clr-chnge {
color: #000;
width: max-content;
}
/* .tyre-finder-content .select-input::after {
content: '';
width: 20px;
height: 2px;
position: absolute;
background-color: #000000;
display: block;
left: 295px;
top: 35px;
transform: rotate(128deg);
} */
.tyre-find-button {
align-items: start;
margin-top: 7px;
}
.tyre-finder-content .tyre-selector {
display: flex;
gap: 40px;
}
.tyre-desc {
display: flex;
justify-content: center;
position: relative;
}
.tyre-desc::after {
content: "";
position: absolute;
top: 3%;
bottom: 15%;
right: 0;
height: auto;
width: 2px;
background-color: #dfdfdf;
z-index: 1;
}
.tyre-desc:last-child:after {
display: none;
}
.tyre-product-nav {
font-family: "Schibsted Grotesk", sans-serif !important;
font-weight: 700;
font-size: 17px;
line-height: 28px;
}
.tyre-product-nav ul {
padding-left: 0;
}
.tyre1-content {
padding-top: 27px;
}
/* .tyre-desc::after {
content: '';
position: absolute;
right: 0;
left: 1004px;
top: 817px;
width: 2px;
height: 84%;
background-color: #DFDFDF;
z-index: 1;
} */
.tyre-product-nav .highlight a {
color: #bb0000;
text-decoration: underline;
text-decoration-style: dotted;
}
.tyre1 img {
display: flex;
margin: 0 auto;
width: auto;
height: 268px;
}
.tyre1 {
position: relative;
}
.tyre1:after {
content: "";
background: url(../images/shadow_line.png) no-repeat center;
width: 217px;
height: 21px;
background-size: contain;
display: block;
position: absolute;
bottom: 27px;
left: 0;
right: 0;
margin: 0 auto;
}
.tyre-desc::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 12px;
height: 1px;
background-color: #dfdfdf;
}
/* Tabs */
.tyre-finder-section .tabs {
width: 100%;
/* background-color: #09F; */
border-radius: 5px 5px 5px 5px;
}
.tyre-finder-section ul#tabs-nav {
list-style: none;
margin: 0 0 27px;
overflow: auto;
padding-bottom: 27px;
padding: 0;
display: flex;
gap: 30px;
}
.tyre-finder-section ul#tabs-nav li {
float: left;
font-weight: bold;
margin-right: 2px;
padding: 0;
border-radius: 5px 5px 5px 5px;
/*border: 1px solid #d5d5de;
border-bottom: none;*/
cursor: pointer;
}
.tyre-finder-section ul#tabs-nav li:hover a,
.tyre-finder-section ul#tabs-nav li.active a {
color: #bb0000;
}
.tyre-finder-section ul#tabs-nav li:hover {
color: #bb0000;
}
.tyre-finder-section ul#tabs-nav li {
position: relative;
}
.tyre-finder-section ul#tabs-nav li.active::after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom: 1px dashed #bb0000;
}
.tyre-finder-section #tabs-nav li a {
text-decoration: none;
color: #343434;
font-family: "Schibsted Grotesk", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 28px;
text-transform: uppercase;
letter-spacing: 0.9px;
}
.tyre-finder-section .tab-content {
padding: 0;
/* border: 5px solid #09F; */
background-color: #fff;
}
.tyre-finder-section .tab-content img {
margin: 0 auto;
display: flex;
padding-top: 0;
}
.tire-card .row {
margin: 0;
}
.tire-card .tyre-container::after {
display: none;
}
/* .tire-card::before{
content: '';
position: absolute;
right: 0;
left: 429px;
top: 0;
width: 1px;
height: 100%;
background-color: #DFDFDF;
z-index: 1;
}
.tire-card::after{
content: '';
position: absolute;
right: 0;
right: 429px;
top: 0;
width: 1px;
height: 100%;
background-color: #DFDFDF;
z-index: 1;
} */
.tire-card {
position: relative;
}
.tire-border {
border-top: 1px solid #dfdfdf;
padding: 0;
}
.tire-border:nth-child(3n) .tyre-container {
border-right: none;
}
.tire-card .row .col-12.col-md-4.tire-border:nth-last-child(-n + 3) {
border-bottom: 1px solid #dfdfdf;
}
.slick-track {
margin: 0;
}
.tire-card-content {
padding-bottom: 40px;
}
.tip-slider-wrapper .tab-content {
display: block !important;
}
.testimonials-content .tab-content {
display: block !important;
}
/****************** Product Detail Page *******************/
.first-section {
background-color: #000;
z-index: 9;
}
.first-content {
padding: 55px 0 263px 0;
}
.first-content .nav-link {
color: #f6f6f6;
}
.first-content img {
/* padding-top: 19px; */
height: 534px;
}
.first-text {
padding: 0;
/* Was a hard width: 540px, which is WIDER than the col-md-6 on narrow
desktop widths (~1024–1100px) — so the text block and its compatibility
icons spilled out of the column and were clipped at the viewport edge.
Cap at 540px (the intended desktop size) but shrink to fit the column. */
width: 100%;
max-width: 540px;
}
.first-text h4 {
font-family: "Saira Extra Condensed", sans-serif;
font-size: 94px;
color: #f6f6f6;
font-weight: 600;
text-transform: uppercase;
}
.trailer-button {
background:
linear-gradient(180deg, rgba(38, 38, 38, 0.3) 0%, #262626 100%),
linear-gradient(0deg, #262626, #262626);
color: #848484;
width: auto;
padding: 0 8px;
height: 29px;
line-height: 29px;
display: block;
border-radius: 4px;
text-align: center;
justify-content: center;
font-size: 14px;
margin: 0 !important;
}
.first-button {
display: flex;
gap: 12px;
padding-bottom: 20px;
}
.first-text small {
font-family: "Schibsted Grotesk", sans-serif;
color: #c6c6c6;
font-size: 18px;
line-height: 25px;
margin-bottom: 28px;
display: block;
}
.truck {
display: flex;
align-items: baseline;
/* Compatibility icons must never run past their column. On narrow desktop
widths (~1024–1100px) five icons are wider than the col-md-6, so without
wrapping the last icon(s) overflowed the column and got clipped at the
viewport edge. Wrapping lets them flow onto a second row instead. */
flex-wrap: wrap;
}
.gallery-viewer .slick-prev-custom {
background: url(../images/left-arrow.svg);
width: 40px;
height: 40px;
background-size: contain;
background-repeat: no-repeat;
border: none;
position: absolute;
top: 468px;
left: 147px;
}
.gallery-viewer .slick-next-custom {
background: url(../images/right-arrow.svg);
width: 40px;
height: 40px;
background-size: contain;
background-repeat: no-repeat;
border: none;
position: absolute;
top: 469px;
left: 630px;
}
.gallery-viewer .slick-track {
display: flex;
align-items: center;
}
.first-content img {
margin: 0 auto;
width: auto;
}
.enquiry-button {
width: max-content;
height: 43px;
text-align: center;
margin: 0;
color: #fff !important;
padding: 10px 15px 13px !important;
}
.first-content .prod-button img,
.first-content .warr-btn img {
width: auto;
height: auto;
padding: 0;
margin: 0;
}
.truck li:first-child img {
display: flex;
width: auto;
height: 44px;
}
.truck li:nth-child(2) img {
display: flex;
width: auto;
height: 43px;
}
.truck li:nth-child(3) img {
display: flex;
width: auto;
height: 40px;
}
.truck li img {
height: 40px;
}
.cta {
border: 2px solid#EA1F27;
font-family: "Schibsted Grotesk", sans-serif;
margin-top: 49px;
}
.warr-btn {
font-size: 18px;
line-height: 28px;
font-family: "Schibsted Grotesk", sans-serif;
color: #fff;
}
.warr-btn.btn:hover {
color: #ea1f27;
}
.warr-btn:focus {
outline: none;
border: none;
box-shadow: none;
}
.first-section {
position: relative;
width: 100%;
/* background-color: #000; */
background: url(../images/shade.png) no-repeat left bottom #000;
padding-top: 109px;
background-size: 100% auto;
}
/****************** Features Section ******************/
/* .features-section {
padding: 70px 0;
} */
/* =========================
SECTION (NORMAL FLOW)
========================= */
.features-section {
height: 100vh;
padding: 0;
overflow: hidden;
box-sizing: border-box;
transition: none !important;
}
/* Applied by the features pin script from DOMContentLoaded until the pin is
reliably built (assets settled + measured). Holds the page at the top so a
fast scroller can't reach the section before the pin/refresh is live — which
is what left a full-screen gap. Self-removed by the script (with failsafes),
so the page is never permanently unscrollable. */
html.features-init-lock {
overflow: hidden !important;
scrollbar-gutter: stable;
}
/* Vertically CENTRE the whole title + subtitle + pinned area as one block.
The content (title, subtitle, tyre/feature list) is shorter than the 100vh
section, so the leftover height has to go somewhere. Centering the block as
a unit keeps the subtitle sitting directly above the feature content (no gap
between them) and splits the remaining space evenly as top/bottom padding —
which reads as intentional spacing instead of an embarrassing white band.
(Growing the pin instead would re-open a gap between the subtitle and the
tyre, which is the whitespace that kept coming back.) */
.features-section > .container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.features-section > .container > .features-content {
display: flex;
flex-direction: column;
flex: 0 0 auto;
min-height: 0;
}
/* =========================
TITLE (UNCHANGED)
========================= */
.features-content {
text-align: center;
width: 100%;
}
.features-content h4 {
font-family: "Saira Extra Condensed", sans-serif;
font-size: 48px;
font-weight: 600;
text-transform: uppercase;
color: #343434;
padding-top: 60px;
}
.features-content small {
display: block;
max-width: 600px;
margin: 0 auto 20px;
font-family: "Schibsted Grotesk", sans-serif;
font-size: 16px;
line-height: 25px;
color: #6d6d6d;
}
/* =========================
PINNED FEATURE AREA
========================= */
.features-pin {
flex: 0 0 auto;
min-height: 0;
max-height: 94vh;
display: flex;
align-items: center;
overflow: hidden;
}
/* =========================
MAIN LAYOUT
========================= */
.feat-wrapper {
display: flex;
gap: 80px;
align-items: center; /* ✅ KEY FIX */
width: 100%;
}
/* =========================
LEFT SCROLL AREA (2 ITEMS)
========================= */
/* .features-left-scroll {
max-height: 600px;
overflow-y: auto;
scrollbar-width: none;
overflow: hidden; /* We handle the scroll via GSAP, so hide the scrollbar */
/* scroll-behavior: auto !important; MUST be auto */
/* width: 45%; */
/* } */
.features-left-scroll {
max-height: 70vh; /* was 600px */
overflow-y: auto;
scrollbar-width: none;
overflow: hidden;
scroll-behavior: auto !important;
width: 45%;
}
/* .features-left-scroll::-webkit-scrollbar {
display: none;
} */
.features-left {
width: 100%;
}
/* =========================
FEATURE CARD (NO STYLE CHANGES)
========================= */
.feature-card {
width: 100%;
max-width: 292px;
margin-bottom: 60px;
text-align: left;
}
.feature-card:last-child {
margin-bottom: 0;
}
.feature-card h5 {
font-family: "Saira Extra Condensed", sans-serif;
font-size: 36px;
font-weight: 600;
margin-bottom: 10px;
}
.feature-card img {
width: 100%;
max-width: 290px;
padding-top: 58px;
margin-bottom: 12px;
clip-path: polygon(15% 0, 100% 0%, 100% 100%, 0 100%, 0 40%) ;
}
.feature-card strong {
display: block;
font-family: "Schibsted Grotesk", sans-serif;
font-size: 18px;
font-weight: 700;
color: #bb0000;
margin-bottom: 6px;
overflow-wrap: break-word;
word-wrap: break-word;
}
.feature-card small {
display: block;
font-family: "Schibsted Grotesk", sans-serif;
font-size: 16px;
line-height: 22px;
color: #6d6d6d;
overflow-wrap: break-word;
word-wrap: break-word;
}
/* =========================
RIGHT STICKY IMAGE
========================= */
.features-right img {
width: 100%;
max-height: 690px;
object-fit: contain;
}
.features-right {
width: 55%;
position: sticky;
top: 50%;
}
.features-right::after {
content: "";
position: absolute;
left: 0;
bottom: -9px;
width: 100%;
height: 240px;
background: linear-gradient(
to top,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0.85) 25%,
rgba(255, 255, 255, 0.4) 55%,
rgba(255, 255, 255, 0) 100%
);
pointer-events: none;
}
.features-pin {
pointer-events: auto;
}
.features-right,
.features-right img {
pointer-events: none;
}
/******** Specifications Section **********/
.specifications-section {
background-color: #f7f7f7;
/* padding: 100px 0 300px; */
padding: 100px 0;
}
.specifications-section.active {
padding-bottom: 300px;
}
.specific-content {
text-align: center;
}
.specific-content h4 {
padding-bottom: 8px;
color: #343434;
font-family: "Saira Extra Condensed", sans-serif;
font-weight: 600;
font-size: 48px;
line-height: 42px;
text-transform: uppercase;
}
/* .specific-content{
padding: 100px 81px 100px 80px;
} */
.specific-content small {
font-family: "Schibsted Grotesk", sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 25px;
color: #6d6d6d;
}
/*
.specifications-section{
color: #F7F7F7;
} */
/****** Table CSS ********/
.custom-table {
width: 1400px;
border-collapse: collapse;
background: #fff;
box-shadow: 0 2px 8px 0 #e0e4eb99;
overflow: hidden;
margin-top: 0;
/* padding: 20px 80px 0 81px; */
}
.custom-table th,
.custom-table td {
padding: 10px 5px !important;
border-bottom: 2px solid #f7f7f7;
text-align: center;
font-size: 13px;
color: #6d6d6d;
font-weight: 500;
border-right: 2px solid #f7f7f7;
font-family: "Schibsted Grotesk", sans-serif;
word-wrap: break-word;
}
.custom-table.northamerica-custom th,
.custom-table.northamerica-custom td {
padding: 10px 6px !important;
}
.custom-table.northamerica-custom th:nth-last-child(-n + 4),
.custom-table.northamerica-custom td:nth-last-child(-n + 4) {
width: 9%;
}
.custom-table.northamerica-custom th:nth-child(6),
.custom-table.northamerica-custom td:nth-child(6) {
width: 7%;
}
.custom-table.northamerica-custom th:nth-child(2),
.custom-table.northamerica-custom td:nth-child(2) {
width: 10%;
}
.custom-table.northamerica-custom th:nth-child(8),
.custom-table.northamerica-custom td:nth-child(8) {
width: 7%;
}
.custom-table th.max_wid,
.custom-table td.max_wid {
width: 13%;
}
/* .custom-table th:nth-child(9),
.custom-table td:nth-child(9),
.custom-table th:nth-child(10),
.custom-table td:nth-child(10),
.custom-table th:nth-child(11),
.custom-table td:nth-child(11),
.custom-table th:last-child,
.custom-table td:last-child {
width: 30%;
} */
.custom-table thead th {
background: #000000;
color: #fff;
font-weight: 600;
font-family: "Schibsted Grotesk", sans-serif;
border-bottom: 1px solid #b7c5d2;
font-size: 12px;
text-transform: uppercase;
padding: 16px 4px 15px;
border-right: 1px solid #6d6d6d;
}
.custom-table thead th:nth-child(3) {
padding: 16px 10px 15px;
}
.custom-table thead th:first-child {
padding: 16px 10px 15px;
}
.custom-table thead th:nth-child(7) {
padding: 16px 9px 15px;
}
.slick-track {
margin: 0;
}
.expand-btn {
background: #e8eef5;
border: 1px solid #cfd8dc;
color: #1976d2;
width: 28px;
height: 28px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.expand-btn:hover {
background: #c1d2ed;
}
tr.collapse-row > td {
background: #f5f7fa;
border-top: 1px solid #e3e3e3;
padding: 18px 26px !important;
font-size: 15px;
}
.ctes-table {
width: 100%;
border-collapse: collapse;
margin-top: 4px;
}
.ctes-table th,
.ctes-table td {
padding: 6px 10px;
font-size: 15px;
border-bottom: 1px solid #dbe3ea;
text-align: center;
}
.ctes-table th {
background: #eef3f7;
font-weight: 600;
color: #294d76;
text-transform: uppercase;
}
.custom-table tbody tr {
cursor: pointer;
}
.ctes-table tr:last-child td {
border-bottom: 1px solid #e3e3e3;
border-right: 2px solid #f7f7f7;
}
.custom-table tbody tr:hover td {
color: #bb0000;
}
.certifications {
text-align: center;
/* padding-top: 100px; */
position: relative;
z-index: 9;
/* margin-top: -365px; */
margin-top: -200px;
padding-bottom: 0;
/* padding-bottom: 100px; */
}
.certifications h5 {
font-family: "Saira Extra Condensed", sans-serif;
font-weight: 600;
font-size: 48px;
line-height: 50px;
color: #343434;
}
.certifications small {
font-family: "Schibsted Grotesk", sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 25px;
color: #6d6d6d;
}
.similar-product-section {
/* margin-top: -91px; */
width: 100%;
background: #fff;
/* padding: 160px 0 100px; */
padding: 100px 0 100px;
position: relative;
}
.similar-product-content {
/* padding: 100px 80px 100px 80px; */
position: relative;
}
.similar-product-content h3 {
font-family: "Saira Extra Condensed", sans-serif;
font-size: 48px;
line-height: 50px;
color: #000000;
font-weight: 600;
text-transform: uppercase;
padding-bottom: 18px;
}
.gridtable tbody {
display: block;
max-height: 485px;
overflow-y: scroll;
overflow-y: scroll;
-ms-overflow-style: none;
}
.gridtable tbody::-webkit-scrollbar {
width: 0 !important;
display: none;
}
.gridtable thead,
.gridtable tbody tr {
display: table;
table-layout: fixed;
width: 100%;
}
.gridtable thead {
position: relative;
}
.zoomContainer {
z-index: 9;
left: 166.5px !important;
}
.multiple-card-content img {
border-top: 1px solid #000;
padding-top: 40px;
}
.tire-card-1 h3 {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 18px;
line-height: 25px;
font-weight: 700;
color: #343434;
}
.t1 {
padding-top: 34px;
}
.cta-1 {
border: 2px solid#EA1F27;
font-family: "Schibsted Grotesk", sans-serif;
}
.explore-button {
display: flex;
margin: 0 auto;
text-align: center;
justify-content: center;
width: 158px;
padding-top: 59px;
align-items: center;
}
.slick-prev1-custom {
background: url(../images/left-arrow.svg);
width: 40px;
height: 40px;
background-size: contain;
background-repeat: no-repeat;
border: none;
position: absolute;
top: 9px;
left: 1115px;
z-index: 999999;
}
/* .certifications-section{
padding-top: 100px;
} */
/* .certifi-icons{
gap: 40px;
margin-top: 40px;
} */
.certifi-icons {
display: flex;
flex-wrap: wrap; /* icons wrap honge */
gap: 40px;
margin-top: 40px;
justify-content: center;
align-items: center;
padding: 0;
}
.certifi-icons li {
list-style: none; /* default bullets hatane ke liye */
}
.slick-next1-custom {
background: url(../images/right-arrow.svg);
width: 40px;
height: 40px;
background-size: contain;
background-repeat: no-repeat;
border: none;
position: absolute;
top: 9px;
left: 1248px;
}
.similar-product-section .tyre-content li img {
width: auto;
height: 29px;
margin: 0;
padding: 0;
}
.similar-product-section .tyre-container {
/* width: 350px; */
width: 100%;
}
.similar-product-section .tyre-container::after {
right: -40px;
}
.vedio-modal .modal-body {
padding: 0;
}
.vedio-modal .btn-close {
background: transparent url(../images/red_cross.svg) no-repeat left top;
width: 20px;
height: 20px;
padding: 0;
position: absolute;
right: -35px;
top: -15px;
opacity: 1;
}
.vedio-modal .btn-close:focus {
box-shadow: none;
}
.vedio-modal .modal-content {
background-color: transparent;
}
.vedio-modal .modal-dialog {
max-width: 700px;
margin: 0 auto;
}
.multiple-items {
border-top: 2px solid #dfdfdf;
border-bottom: 2px solid #dfdfdf;
}
.multiple-items .slick-prev.slick-disabled:before {
opacity: 1;
content: "";
width: 36px;
height: 28px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: block;
background: url(../images/left-arrow.svg);
}
.multiple-items .slick-prev:before {
opacity: 1;
content: "";
width: 36px;
height: 28px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: block;
background: url(../images/red-left-arrow.svg);
}
.multiple-items .slick-prev {
left: inherit;
right: 100px;
top: -47px;
}
.multiple-items .slick-next {
right: 0;
top: -47px;
}
.multiple-items .slick-next:before {
content: "";
position: absolute;
right: 0;
top: 0;
opacity: 1;
width: 36px;
height: 28px;
display: block;
background: url(../images/right-arrow.svg);
}
.multiple-items .slick-next.slick-disabled:before {
content: "";
position: absolute;
right: 0;
top: 0;
opacity: 1;
width: 36px;
height: 28px;
display: block;
background: url(../images/grey-right-arrow.svg);
}
/* .slick-slide img{
width: 180px;
margin: 0 auto;
padding-top: 40px;
} */
/* .tyre-content li{
width: 71px;
padding-right: 16px;
} */
.single-item .slick-slide img {
width: 400px;
height: auto;
}
.slider .tire-border {
position: relative;
padding: 20px;
border-right: 1px solid #dfdfdf; /* Light gray vertical line */
}
.slider .slick-slide:last-child .tire-border {
border-right: none; /* Remove border for last card */
}
.single-item .slick-prev {
left: 10px;
width: 36px;
height: 28px;
}
.single-item .slick-next {
right: 10px;
width: 36px;
height: 28px;
}
.single-item .slick-prev.slick-disabled:before {
opacity: 1;
content: "";
width: 36px;
height: 28px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: block;
background: url(../images/left-arrow.svg);
}
.single-item .slick-prev:before {
opacity: 1;
content: "";
width: 36px;
height: 28px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: block;
background: url(../images/red-left-arrow.svg);
}
.single-item .slick-next:before {
content: "";
position: absolute;
right: 0;
top: 0;
opacity: 1;
width: 36px;
height: 28px;
display: block;
background: url(../images/right-arrow.svg);
}
.single-item .slick-next.slick-disabled:before {
content: "";
position: absolute;
right: 0;
top: 0;
opacity: 1;
width: 36px;
height: 28px;
display: block;
background: url(../images/grey-right-arrow.svg);
}
.fancybox-next {
right: -81px;
}
.fancybox-prev {
left: -81px;
}
.fancybox-nav span {
visibility: visible;
}
#fancybox-thumbs ul {
left: 0 !important;
right: 0;
margin: 0 auto;
width: max-content;
}
.pdp-image-gallery-block .slider img {
width: 100%; /* thumbnail size */
display: block;
}
.fancybox-overlay {
background: rgba(0, 0, 0, 0.8);
}
.fancybox-wrap {
width: 635px !important;
left: 0 !important;
right: 0;
margin: 0 auto;
}
.fancybox-inner {
margin: 0 auto;
width: 100% !important;
height: auto !important;
}
/**** Ralson Experience Section ****/
.exp-section {
background: url(../images/experience_bg.png) no-repeat center center;
background-size: cover;
height: 100vh;
position: relative;
}
.exp-banner {
height: 100vh;
object-fit: cover;
width: 100%;
object-position: center;
}
.exp-content {
position: relative;
}
/* .exp-content img{
width: 100%;
clip-path: polygon(100% 0, 100% 88%, 91% 100%, 0 100%, 0 0);
} */
.exp-banner-content {
padding: 157px 0 0;
height: 100vh;
clip-path: polygon(100% 0, 100% 94%, 96% 100%, 0 100%, 0 0);
overflow: hidden;
}
.exp-banner-content::after {
content: "";
display: block;
position: absolute;
background: linear-gradient(0deg, #330001 0%, rgba(61, 9, 10, 0) 90.92%);
left: 0;
bottom: 0;
width: 100%;
height: 413px;
z-index: 1;
}
.exp-banner-content-text {
width: 100%;
padding: 40px 60px;
position: absolute;
bottom: 0;
left: 0;
z-index: 9;
}
.exp-content h3 {
font-family: "Schibsted Grotesk", sans-serif;
font-weight: 700;
font-size: 46px;
line-height: 50px;
color: #ffffff;
letter-spacing: 2.3px;
padding-bottom: 30px;
}
/* .exp-content a{
color:#868686;
border: 1px solid #868686;
width:103px;
height: 28px;
text-align: center;
clip-path: polygon(100% 0, 100% 88%, 91% 100%, 0 100%, 0 0);
z-index: 2;
} */
.exp-content .play-btn {
position: absolute;
left: 0;
top: 50%;
height: 120px;
right: 0;
margin: 0 auto;
width: 120px;
z-index: 9;
}
.tire-solution {
background-color: #000;
}
.solution-content {
width: 100%;
margin: 0 auto;
height: auto;
}
.solution-content h3 {
font-family: "Saira Extra Condensed", sans-serif;
font-weight: 600;
font-size: 48px;
line-height: 100%;
text-transform: uppercase;
color: #cccccc;
padding-top: 24px;
}
.solution-content .tabs-nav {
gap: 20px;
font-family: "Schibsted Grotesk", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 25px;
color: #b7b7b7;
text-transform: uppercase;
display: flex;
justify-content: start;
width: 478px;
padding-top: 70px;
}
.solution-content .row {
align-items: center;
}
.tyre-card img {
height: 449px;
width: 400px;
clip-path: polygon(0 0, 100% 0, 100% 95%, 95% 100%, 0 100%);
object-fit: cover;
}
.tyre-card {
position: relative;
padding-top: 30px;
}
.tyre-card h3 {
font-family: "Schibsted Grotesk", sans-serif;
color: #ffffff;
font-size: 18px;
line-height: 25px;
font-weight: 700;
position: absolute;
top: 360px;
left: 25px;
z-index: 2;
}
.tyre-card::after {
content: "";
display: block;
background: linear-gradient(360deg, #330001 0%, rgba(61, 9, 10, 0) 81.82%);
clip-path: polygon(0 0, 100% 0, 100% 91%, 95% 100%, 0 100%);
height: 243px;
width: 400px;
position: absolute;
top: 237px;
left: 20x;
}
.maintainace-btn {
color: #868686 !important;
width: max-content;
height: auto;
padding: 2px 6px;
background: url(../images/maintain_border_btn.png) no-repeat left top;
background-size: 100% 100%;
font-size: 14px;
line-height: 28px;
font-family: "Schibsted Grotesk", sans-serif;
font-weight: 500;
text-align: center;
display: block;
}
.tip-card-meta .maintainace-btn {
color: #868686 !important;
width: max-content;
height: auto;
padding: 2px 6px;
background: url(../images/maintain_border_btn.png) no-repeat left top;
background-size: 100% 100%;
font-size: 14px;
line-height: 28px;
font-family: "Schibsted Grotesk", sans-serif;
font-weight: 500;
text-align: center;
display: block;
}
.p-btn {
width: 93px;
height: 93px;
position: absolute;
left: 145px;
bottom: 190px;
}
.p-btn img {
width: 100%;
height: auto;
clip-path: none;
}
.solution-sect {
background-color: #000;
padding: 100px 0;
}
.tire2-content h3 {
font-size: 18px;
line-height: 22px;
}
.page-load-status {
display: none; /* hidden by default */
padding-top: 20px;
border-top: 1px solid #ddd;
text-align: center;
color: #777;
}
.hidden {
visibility: hidden;
width: 0px !important;
height: 0px !important;
margin: 0px !important;
padding: 0px !important;
}
/* ---- grid ---- */
.grid {
width: 100%;
margin: 30px auto;
}
/* clear fix */
.grid:after {
content: "";
display: block;
clear: both;
}
.grid-sizer {
width: 100%;
}
.gutter-sizer {
width: 35px;
}
#filterGroup {
width: 100%;
margin: 40px auto;
text-align: center;
}
/* ---- .grid-item ---- */
.grid-filter {
display: flex;
justify-content: flex-end;
padding-top: 10px;
}
.ar .grid-filter {
justify-content: flex-start;
}
.grid-item .tip-card-meta {
padding: 0 32px 23px 25px;
}
.grid-item {
float: left !important;
width: 31.5%;
margin-bottom: 0;
overflow: hidden;
}
.grid-item img {
margin: 0 auto;
width: 100%;
height: 265px;
object-fit: cover;
padding: 0;
transition: 0.5s;
}
.gi-inner-img img {
width: 100%;
height: 300px;
-o-object-fit: cover;
-o-object-position: center;
object-fit: cover;
object-position: center;
}
.grid-filter ul {
padding: 0;
list-style-type: none;
text-align: center;
display: flex;
gap: 22px;
}
.grid-filter ul li a {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 18px;
line-height: 25px;
letter-spacing: 0.9px;
color: #b7b7b7;
font-weight: 700;
position: relative;
}
.grid-filter ul li a.selected {
color: #ea1f27 !important;
}
.grid-filter ul li a.selected::after {
content: "";
width: 100%;
height: 0;
border: 0.5px dashed #ea1f27;
display: block;
position: absolute;
left: 0;
bottom: -3px;
}
.grid-item-inner {
display: flex;
flex-direction: column;
}
.gi-inner-content {
padding: 20px;
}
.gi-inner-content h3 {
font-weight: 900;
color: #2d4950;
}
.gi-inner-content p {
font-size: 18px;
font-weight: 300;
font-family: "Raleway", sans-serif;
}
.item-date {
font-weight: 300;
font-family: "Raleway", sans-serif;
font-weight: 600;
font-size: 14px;
display: none;
}
.inner-author img {
height: 50px !important;
min-height: unset !important;
width: 50px !important;
-o-object-fit: unset !important;
-o-object-position: unset !important;
object-fit: unset !important;
object-position: unset !important;
vertical-align: bottom;
margin-right: 10px;
}
.footer-logo {
width: 100%;
overflow: hidden;
margin-top: 100px;
}
/* viewport */
.logo-ticker {
position: relative;
width: 100%;
overflow: hidden;
-webkit-mask-image: linear-gradient(
90deg,
transparent,
black 10%,
black 90%,
transparent
);
mask-image: linear-gradient(
90deg,
transparent,
black 10%,
black 90%,
transparent
);
}
/* moving belt */
.logo-track {
display: flex;
width: max-content;
animation: logoMarquee 40s linear infinite;
}
body[dir="rtl"] .logo-track {
animation: marquee-rtl 40s linear infinite;
flex-direction: row-reverse; /* Reverse the order for RTL */
}
.logo-group {
display: flex;
align-items: center;
gap: 200px;
padding-right: 200px;
}
.logo-group img {
flex: 0 0 auto;
width: 1269px; /* fixed size ensures equal spacing */
height: auto;
object-fit: contain;
}
.red-specs {
color: #ea1f27 !important;
}
/* seamless loop: move exactly -50% */
@keyframes logoMarquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* RTL Animation */
@keyframes marquee-rtl {
0% {
transform: translateX(0);
}
100% {
transform: translateX(50%);
}
}
.logo-ticker:hover .logo-track {
animation-play-state: paused;
}
.footer-text input:focus-visible {
outline: none;
}
/* @media (prefers-reduced-motion: reduce) {
.logo-track {
animation: none;
}
} */
/* body[dir="rtl"] .logo-track {
animation: logoMarqueeRtl 20s linear infinite;
}
@keyframes logoMarqueeRtl {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
} */
.slider.single-item {
width: 100%;
margin: 0;
}
#zoomResult {
width: 550px;
height: 550px;
}
.slider.single-item .slick-initialized .slick-slide {
margin: 0 auto;
}
.zoomLens {
width: 150px !important;
height: 150px !important;
transition: none !important;
-webkit-transition: none !important;
-moz-transition: none !important;
cursor: none !important;
position: absolute;
}
/* Draw a "+" crosshair at the geometric center of the lens, so it is
guaranteed centered on every screen regardless of elevateZoom's math. */
.zoomLens::before,
.zoomLens::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
background: #000;
pointer-events: none;
}
.zoomLens::before {
width: 14px;
height: 2px;
transform: translate(-50%, -50%);
}
.zoomLens::after {
width: 2px;
height: 14px;
transform: translate(-50%, -50%);
}
.zoomWindow {
width: 700px !important;
height: 600px !important;
border: 3px solid rgb(136, 136, 136) !important;
top: 15px !important;
background-size: 2000px auto !important;
left: 450px !important;
transition: none !important;
-webkit-transition: none !important;
-moz-transition: none !important;
}
.zoomContainer {
width: 450px !important;
}
/* Hide the inline elevateZoom UI while fancybox lightbox is open */
.fancybox-lock .zoomLens,
.fancybox-lock .zoomContainer,
.fancybox-lock .zoomWindow,
.fancybox-lock .zoomWindowContainer {
display: none !important;
}
.about-us-wrapper {
/* position: relative;
width: 100%;
height: 100vh;
overflow: hidden; */
position: relative;
width: 100%;
height: 100vh;
/* height: 300vh; */
}
.about-us {
/* height: 100%;
display: flex;
align-items: center; */
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}
.product-content .slick-track {
margin: 0;
}
/* .fade-text {
color: grey;
opacity: 0.3;
transition: color 0.3s ease, opacity 0.3s ease;
}
.fade-text.active {
color: white;
opacity: 1;
} */
.fade-text {
opacity: 0;
transform: translateY(20px);
color: #4a4a4a;
transition:
opacity 0.3s ease,
transform 0.3s ease,
color 0.3s ease;
}
.fade-text.show {
opacity: 1;
transform: translateY(0);
color: #fff; /* initially grey */
}
.prod-button svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.prod-button svg rect {
fill: none;
stroke: #ea1f27; /* dash color */
stroke-width: 2;
stroke-dasharray: 10 6; /* dash length + gap */
stroke-dashoffset: 0;
rx: 6; /* rounded corners */
ry: 6;
opacity: 0;
transition: opacity 0.3s;
vector-effect: non-scaling-stroke;
}
.prod-button:hover svg rect {
opacity: 1;
animation: dashFlow 1.5s linear infinite;
}
@keyframes dashFlow {
to {
stroke-dashoffset: 32; /* controls speed + direction */
}
}
/* Keep text & arrow above */
.prod-button div,
.prod-button img {
position: relative;
z-index: 2;
}
.prod-button:hover {
background: none;
}
/* Remove or disable the rect completely */
.prod-button svg rect {
display: none;
}
/* Path-based dashed border */
.prod-button svg path {
fill: none;
stroke: #ea1f27;
stroke-width: 2;
stroke-dasharray: 20 10;
stroke-dashoffset: 0;
opacity: 0;
transition: opacity 0.3s;
}
.prod-button:hover svg path {
opacity: 1;
animation: dashFlowPath 1.5s linear infinite;
}
@keyframes dashFlowPath {
to {
stroke-dashoffset: -32; /* moves clockwise */
}
}
.find-button svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* keeps button clickable */
z-index: 1;
}
/* Path border */
.find-button svg path {
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-dasharray: 20 10; /* dash length + gap */
stroke-dashoffset: 0;
opacity: 0; /* hidden by default */
transition: opacity 0.3s;
}
/* Animate on hover */
.find-button:hover svg path {
opacity: 1;
animation: dashFlowPath 1.5s linear infinite;
}
/* Keep text & arrow above */
.find-button div,
.find-button img {
position: relative;
z-index: 2;
color: #fff; /* text stays white */
}
/* Remove background on hover if needed */
.find-button:hover {
background: none;
color: #fff;
}
.articles_banner {
padding-top: 157px;
height: auto;
}
.articles_banner_cont {
width: 100%;
background: #5d00027a;
backdrop-filter: blur(15px);
clip-path: polygon(
2.7% 0px,
100% 0px,
100% 92%,
97.2% 100%,
0px 100%,
0px 7%
);
}
.articles_banner_cont span {
width: 620px;
height: auto;
}
.articles_banner_cont span img {
width: 100%;
height: 417px;
object-fit: cover;
clip-path: polygon(5% 0px, 100% 0px, 100% 92%, 95% 100%, 0px 100%, 0px 7%);
}
.article_bann_cont {
width: 668px;
padding: 0 40px;
}
.article_bann_cont h1 {
font-size: 30px;
line-height: 32px;
letter-spacing: 1.5px;
color: #fff;
font-weight: 700;
padding-bottom: 17px;
width: 86%;
}
.article_bann_cont p {
font-size: 16px;
line-height: 22px;
letter-spacing: 0;
color: #d5d5d5;
font-weight: 500;
padding-bottom: 40px;
/* text-align: left; */
width: 98%;
}
.article_bann_cont img {
transition: 0.5s;
}
.article_bann_cont a:hover img {
margin-left: 20px;
}
/****************** Article Details Page *******************/
.article_details_banner {
/* height:auto is REQUIRED — this element is also .exp-section (height:100vh);
without an explicit height the banner became full-viewport tall and left a
huge gap above the article image. Auto height lets the hero fit its content.
padding-bottom clears the .article_details_cont overlap (margin-top:-409px)
so the date + tags stay above the image on long-title articles (they used to
get pushed onto/under the image and disappear). */
height: auto;
min-height: 760px;
padding-top: 172px;
padding-bottom: 420px;
position: relative;
z-index: 9;
}
.article_details_banner ul {
/* text-align: left; */
max-width: 370px;
}
.article_details_banner ul li.active {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.article_details_banner .list-content .nav-link {
width: max-content;
}
.article_details_banner small {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 16px;
line-height: 20px;
color: #c0c0c0;
font-weight: 500;
padding-top: 8px;
display: flex;
align-items: center;
}
.article_details_banner span {
display: flex;
align-items: center;
margin: 0 8px;
}
.article_details_cont .articles_banner_cont {
margin-top: 40px;
position: relative;
z-index: 9;
}
.article_details_cont .articles_banner_cont img {
width: 100%;
height: 660px;
object-fit: cover;
}
.article_details_cont {
padding: 0 0 100px;
margin-top: -409px;
background-color: #fff;
position: relative;
}
.article_details_text p {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 16px;
line-height: 25px;
color: #6d6d6d;
font-weight: 500;
padding-bottom: 20px;
/* text-align: left; */
}
.article_details_text strong {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 18px;
line-height: 25px;
color: #343434;
font-weight: 700;
letter-spacing: 0.9px;
/* text-align: left; */
padding-bottom: 10px;
display: block;
}
.article_details_blog .right_img_sect {
width: 345px;
}
.article_details_text {
width: 90%;
}
.left_side_cont {
width: 340px;
}
.right_img_sect img {
width: 100%;
height: 206px;
object-fit: cover;
clip-path: polygon(7% 0px, 100% 0px, 100% 88%, 93% 100%, 0px 100%, 0px 12%);
}
.big_img img {
width: 100%;
height: 380px;
object-fit: cover;
clip-path: polygon(3% 0px, 100% 0px, 100% 93%, 97% 100%, 0px 100%, 0px 6%);
}
.article_details_right h3 {
font-size: 18px;
line-height: 25px;
font-weight: 700;
letter-spacing: 0.9px;
color: #000;
padding-bottom: 16px;
font-family: "Schibsted Grotesk", sans-serif;
}
.article_details_right {
width: 400px;
float: right;
}
.share_sect ul {
padding: 0;
display: flex;
gap: 20px;
}
.share_sect ul li a {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background-color: #848484;
transition: all 0.5s;
clip-path: polygon(
0px 0px,
100% 0px,
100% 77%,
78% 100%,
0px 100%,
0px 0px
);
}
.share_sect ul li a:hover {
background-color: #ea1f27;
}
hr {
height: 2px !important;
background-color: #000;
opacity: 1;
margin: 32px 0 25px;
}
.related_article img {
width: 110px;
height: 110px;
object-fit: cover;
object-position: 75%;
clip-path: polygon(
11% 0px,
100% 0px,
100% 89%,
90% 100%,
0px 100%,
0px 11%
);
}
.related_article h5 {
font-size: 18px;
line-height: 25px;
font-weight: 700;
letter-spacing: 0.5px;
color: #343434;
font-family: "Schibsted Grotesk", sans-serif;
}
/****************** FAQ Page *******************/
.faq_sect {
background: url(../images/faq_banner.png) no-repeat center center;
background-size: cover;
}
.faq_accordion .grid-filter {
justify-content: flex-start;
}
.faq_accordion {
background-color: #fff;
padding: 100px 0;
position: relative;
}
.faq_accordion .form-control {
color: rgba(0, 0, 0, 0.5);
background-color: #fff;
font-size: 16px;
border: none;
background-color: transparent;
/* border-bottom: 1px solid #FFFFFF; */
padding: 8px 55px 8px 0;
font-family: "Schibsted Grotesk", sans-serif;
position: relative;
width: 400px;
height: auto;
font-size: 16px;
font-weight: 500;
background: url(../images/input_line.png) no-repeat left bottom;
margin-bottom: 0;
}
.faq_select:after {
content: "";
position: absolute;
right: 16px;
top: 18px;
width: 17px;
height: 8px;
background: url(../images/down-arrow-dark.png) no-repeat center;
background-size: 100% 100%;
display: block;
}
.faq_accordion .serach_icon {
width: 20px;
height: 20px;
position: absolute;
right: 24px;
top: 7px;
}
.faq_accordion .grid-filter ul {
gap: 16px;
}
.faq_accordion .grid-filter ul li a {
color: #343434;
}
.faq_accordion .grid-sizer,
.faq_accordion .colour-item {
width: calc(50% - 15px); /* 2 column + gap */
}
.faq_accordion .gutter-sizer {
width: 30px; /* columns ke beech gap */
}
.colour-item {
margin-bottom: 20px;
background-color: #dfdfdf;
backdrop-filter: blur(15px);
clip-path: polygon(
0px 0px,
100% 0px,
100% 72%,
96% 100%,
0px 100%,
0px 0px
);
padding: 23px 24px 24px;
box-sizing: border-box;
transition: all 0.5s ease; /* isotope transition */
}
.is-hidden {
display: none !important;
}
.is-visible {
display: block;
}
.accordion-title {
cursor: pointer;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
font-family: "Schibsted Grotesk", sans-serif;
font-size: 18px;
line-height: 25px;
letter-spacing: 0.9px;
color: #343434;
font-weight: 700;
}
.accordion-content {
display: none;
margin-top: 10px;
}
.faq-filters-row {
padding: 10px 12px 0;
}
.ar .faq-filters-row {
flex-direction: row-reverse;
}
.button-group.filters-button-group {
display: flex;
gap: 16px;
}
.ar .faq_accordion .d-flex.justify-content-end {
justify-content: flex-start !important;
}
.button-group.filters-button-group button {
background-color: transparent;
}
.button-group.filters-button-group button span,
.button-group.filters-button-group a span {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 18px;
line-height: 25px;
letter-spacing: 0.9px;
color: #343434;
font-weight: 700;
position: relative;
text-transform: uppercase;
}
.button-group.filters-button-group button.is-checked span,
.button-group.filters-button-group a.is-checked span {
color: #bb0000 !important;
}
.button-group.filters-button-group button.is-checked span::after {
content: "";
width: 100%;
height: 0;
border: 0.5px dashed #bb0000;
display: block;
position: absolute;
left: 0;
bottom: -3px;
}
.button-group.filters-button-group a.is-checked span::after {
content: "";
width: 100%;
height: 0;
border: 0.5px dashed #bb0000;
display: block;
position: absolute;
left: 0;
bottom: -3px;
}
.accordion-title.on {
color: #bb0000;
}
.type-grid {
margin-top: 30px;
}
.accordion-title .icon {
transition: transform 0.3s ease;
font-family: "Schibsted Grotesk", sans-serif;
font-size: 22px;
line-height: 25px;
font-weight: 700;
letter-spacing: 0.9px;
height: auto;
color: #000;
}
.accordion-title.on .icon {
color: #bb0000;
font-family: "Schibsted Grotesk", sans-serif;
font-size: 32px;
line-height: 35px;
font-weight: 500;
letter-spacing: 0.9px;
}
.accordion-title.on .icon {
transform: rotate(180deg);
}
.faq_accordion .prod-button {
width: 142px;
height: 43px;
margin-top: 60px;
display: flex;
align-items: center;
justify-content: center;
}
/******************** Download Page Start Here **************************/
.download_sect {
background: url(../images/download_banner_img.png) no-repeat center center;
background-size: cover;
height: 400px;
}
.download_sect:before {
content: "";
width: 100%;
height: 277px;
background: linear-gradient(
0deg,
rgba(0, 0, 0, 0) 0%,
rgba(28, 0, 0, 0.36) 39.25%,
rgba(0, 0, 0, 0.8) 78.49%
);
position: absolute;
left: 0;
top: 0;
}
.download_sect:after {
content: "";
width: 100%;
height: 103px;
background: linear-gradient(
360deg,
rgba(50, 50, 50, 0) 4.2%,
rgba(0, 12, 28, 0.315) 45.39%,
rgba(0, 0, 0, 0.56) 90.15%
);
position: absolute;
left: 0;
bottom: 0;
transform: rotate(180deg);
}
/* .download_sect .list-content {
padding: 129px 0 79px 0;
} */
.download_blogs {
background-color: rgb(255, 255, 255);
position: relative;
padding: 100px 0px;
}
.download_cont {
width: 100%;
padding: 24px;
background: #f6f6f6;
}
.download_cont img {
width: 100%;
height: 366px;
object-fit: cover;
display: block;
clip-path: polygon(
0px 0px,
100% 0px,
100% 93%,
89% 100%,
0px 100%,
0px 0px
);
}
.download_cont span {
width: 32px;
height: 32px;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 22px;
bottom: 27px;
clip-path: polygon(
0px 0px,
100% 0px,
100% 71%,
74% 100%,
0px 100%,
0px 0px
);
}
.download_cont a:hover span {
background: rgba(234, 31, 39, 1);
}
.download_cont a:hover span path {
stroke: #fff;
}
.download_cont h5 {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 18px;
line-height: 25px;
letter-spacing: 0.9px;
color: #343434;
font-weight: 700;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
white-space: break-spaces;
height: 50px;
}
.download_cont a:hover h5 {
color: rgba(234, 31, 39, 1);
text-decoration: underline;
}
.solution-content .row .col-12.col-md-3:nth-last-child(-n + 4) {
margin-bottom: 0 !important;
}
/******************** Get In Touch Page Start Here **************************/
.get_in_touch_sect {
background: url(../images/get-in-touch-banner.png) no-repeat center center;
background-size: cover;
height: 400px;
position: relative;
}
.get_in_touch_sect:before {
content: "";
width: 100%;
height: 277px;
background: linear-gradient(
0deg,
rgba(0, 0, 0, 0) 0%,
rgba(28, 0, 0, 0.36) 39.25%,
rgba(0, 0, 0, 0.8) 78.49%
);
position: absolute;
left: 0;
top: 0;
}
.get_in_touch_sect:after {
content: "";
width: 100%;
height: 103px;
background: linear-gradient(
360deg,
rgba(50, 50, 50, 0) 4.2%,
rgba(0, 12, 28, 0.315) 45.39%,
rgba(0, 0, 0, 0.56) 90.15%
);
position: absolute;
left: 0;
bottom: -1px;
transform: rotate(180deg);
}
.get_in_touch_blogs {
background-color: #000;
padding: 100px 0px;
}
.get_in_touch_left {
width: 444px;
}
.get_in_touch_left p {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 16px;
line-height: 25px;
color: #c0c0c0;
font-weight: 500;
text-align: left;
padding-bottom: 48px;
}
.get_in_touch_left strong {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 18px;
line-height: 21px;
color: #fff;
font-weight: 700;
/* text-align: left; */
letter-spacing: 0.5px;
padding-bottom: 10px;
display: block;
}
.get_in_touch_left small {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 16px;
line-height: 22px;
color: #fff;
/* text-align: left; */
display: block;
}
.get_in_touch_left a {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 16px;
line-height: 22px;
color: #fff;
/* text-align: left; */
display: block;
}
.get_in_touch_left a:hover {
color: rgba(234, 31, 39, 1);
}
.get_in_touch_blogs .solution-content .row {
align-items: flex-start;
}
.get_in_touch_right .form-control {
color: rgba(255, 255, 255, 0.5);
background-color: #fff;
border: none;
background-color: transparent;
padding: 8px 25px 8px 0;
font-family: "Schibsted Grotesk", sans-serif;
position: relative;
width: 100%;
height: auto;
font-size: 16px;
line-height: 20px;
font-weight: 500;
background: url(../images/form_bg1.png) no-repeat left bottom;
background-size: 100% auto;
margin-bottom: 43px;
}
.get_in_touch_right .textarea_bg .form-control {
background: url(../images/textarea_bg.png) no-repeat left bottom;
background-size: 100% auto;
padding: 0 25px 0 0;
margin: 10px 0 8px;
}
.get_in_touch_right p {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 14px;
line-height: 100%;
color: rgba(133, 133, 133, 1);
font-weight: 500;
/* text-align: left; */
display: block;
padding-top: 34px;
}
.get_in_touch_right .warr-button {
margin: 20px 0 0;
width: max-content;
height: 45px;
line-height: 25px;
}
.get_in_touch_right .warr-button:focus {
box-shadow: none;
}
.get_in_touch_right .col-md-6 .form-control {
background: url(../images/form_bg2.png) no-repeat left bottom;
background-size: 100% auto;
}
.get_in_touch_right label {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 14px;
line-height: 100%;
color: #fff;
/* text-align: left; */
font-weight: 500;
display: block;
}
.get_in_touch_right .select-input {
width: 100%;
}
.get_in_touch_right .select-input::before {
content: "";
display: block;
position: absolute;
background-image: url(../images/select_arrow.svg);
width: 17px;
height: 8px;
right: 16px;
top: 12px;
background-size: 100% 100%;
}
.logo {
display: flex;
align-items: center;
font-weight: bold;
color: #d46b3f;
font-size: 18px;
}
.logo img {
height: 30px;
width: 30px;
border-radius: 50%;
margin-right: 10px;
}
.nav-links {
display: flex;
gap: 30px;
}
.nav-links a {
text-decoration: none;
color: #333;
font-size: 14px;
font-weight: 500;
transition: color 0.3s ease;
}
.nav-links a:hover {
color: #d46b3f;
}
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
max-width: 100vw;
z-index: 999;
transition: opacity 0.3s ease;
}
.navbar-glass {
width: 1360px;
margin: 0 auto;
position: relative;
right: 0;
left: 0;
top: 50px;
z-index: 999;
padding: 0 25px 0 30px;
background-color: transparent;
border: 1px solid transparent;
border-image-source: linear-gradient(
90deg,
rgba(74, 74, 74, 0) 2.94%,
rgba(123, 0, 0, 0.64) 54.52%,
rgba(74, 74, 74, 0) 97.06%
);
border-image-slice: 1;
/* box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05); */
justify-content: space-between;
}
.navbar-glass::before {
content: "";
position: absolute;
border-bottom: 0px solid #ddd;
inset: 0;
background-color: rgba(28, 28, 28, 0.3);
clip-path: polygon(2% 0, 100% 0, 100% 55%, 98% 100%, 0 100%, 0% 50%);
z-index: -1; /* background ke niche */
backdrop-filter: blur(12px);
/* box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05); */
}
.navbar-nav li a {
color: #848484;
font-size: 16px;
font-weight: 500;
font-family: "Montserrat", sans-serif;
padding: 23px 10px !important;
}
.navbar-nav li:last-child a.nav-link {
padding: 23px 15px !important;
}
.navbar-nav li:hover a {
color: rgb(234 31 39);
}
.navbar-nav li {
position: relative;
}
.navbar-nav li:hover .htmlcss-arrow,
.navbar-nav li:hover .js-arrow {
transform: rotate(180deg);
}
.navbar-nav li:hover svg .s0 {
fill: #ea1f27;
}
.navbar-nav li .arrow {
/* background: red; */
height: auto;
width: 9px;
text-align: center;
display: inline-block;
transition: all 0.3s ease;
}
.navbar-nav li .sub-menu {
position: absolute;
top: 100%;
left: 0;
line-height: 40px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 2;
padding: 0;
width: 100%;
background: rgba(28, 28, 28, 0.8);
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05);
backdrop-filter: blur(12px);
}
.navbar-nav li:hover .htmlCss-sub-menu,
.navbar-nav li:hover .js-sub-menu {
/* display: block; */
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.navbar-nav li .sub-menu li {
padding: 11px 24px;
margin-right: 0;
line-height: normal;
}
.navbar-nav li .more-sub-menu.sub-menu li {
padding: 4px 24px;
}
.navbar-nav li .htmlCss-sub-menu.sub-menu li:hover a {
color: #ea1f27 !important;
}
.navbar-nav li .sub-menu li.more:last-child .more-sub-menu.sub-menu {
top: inherit;
bottom: 0;
}
.navbar-nav li .sub-menu a {
color: #d5d5d5 !important;
font-size: 16px;
font-weight: 500;
text-transform: none;
padding: 0 !important;
/* text-align: left; */
font-family: "Montserrat", sans-serif;
}
.navbar-nav li .sub-menu .more-arrow {
line-height: 40px;
}
.navbar-nav li .htmlCss-more-sub-menu {
/* line-height: 40px; */
}
.navbar-nav li .sub-menu .more-sub-menu {
position: absolute;
top: 0;
left: 100%;
border-radius: 0 12px 12px;
z-index: 1;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
}
.navbar-nav li .sub-menu .more:hover .more-sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.ar .tyre-container.no-border {
border-right: 1px solid rgb(223, 223, 223) !important;
}
.ar .tyre-container.first-slide {
border-right: none !important;
}
.ar .about-us {
direction: ltr;
}
.ar .about-text {
direction: rtl;
}
.tyre-container {
/* border-left: 1px solid #DFDFDF; */
border-right: 1px solid #dfdfdf;
}
.tyre-container.no-left-border {
border-left: none !important;
}
.tyre-container.no-right-border {
border-right: none !important;
}
.tip-slider-full .slick-track {
margin: 0;
}
.tyre-product-section .tyre-container {
border: none !important;
}
.news-section .card:hover span img {
transform: scale(1.2);
}
.news-section .card:hover:hover .right {
left: 40px;
}
.news-section .card span {
height: 265px;
object-fit: cover;
overflow: hidden;
}
.news-section .card span img {
height: 265px !important;
object-fit: cover;
transform-origin: center center;
transition: transform 0.5s ease;
}
/******************** Event Details Page Start Here **************************/
.solution-content.event_details h3 {
line-height: 50px;
color: #f6f6f6;
padding: 0;
}
.article_details_banner .event_details small {
font-weight: 400;
color: #c0c0c0;
line-height: 22px;
padding: 0;
}
.article_details_banner .event_details small img {
margin-right: 8px;
}
.article_details_banner .event_details span {
margin: 0px 5px;
}
.solution-content.event_details .row {
align-items: normal;
}
.event_info {
gap: 32px;
padding: 10px 0 24px;
}
.event_para p {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 16px;
line-height: 22px;
color: #d5d5d5;
font-weight: 500;
padding-bottom: 20px;
}
.event_para p:last-child {
padding-bottom: 0;
}
.event_para {
width: 89%;
}
.event_btns {
gap: 40px;
padding: 40px 0 0;
}
.article_details_banner .event_details ul {
max-width: 445px;
}
.event_details_right img {
width: 100%;
height: 430px;
display: block;
clip-path: polygon(4% 0px, 100% 0px, 100% 95%, 96% 100%, 0px 100%, 0px 6%);
object-fit: cover;
}
.event_details_banner {
background: #000;
height: auto;
/* Reset the min-height inherited from .article_details_banner (news/article
hero). The event-details hero is auto-height with no floor as before. */
min-height: auto;
padding-bottom: 60px;
}
.event_details_blogs {
background-color: #fff;
position: relative;
}
.event_details_blogs h3 {
padding: 0 0 36px;
color: #000;
}
.event_details_blogs .grid-item {
width: 100%;
padding-bottom: 20px;
}
.event_details_blogs .card {
background: #3f0003;
}
.event_details_blogs .card p {
height: 66px;
-webkit-line-clamp: 3;
}
.event_details_blogs .prod-button {
margin: 20px auto 0;
color: #000;
}
/******************** About Us Page Start Here **************************/
.about_banner_sect {
height: 1240px;
position: relative;
}
.about_banner_bg {
/* background: linear-gradient(180deg, #330A0A 0%, #5B1313 106.36%); */
background:
linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
linear-gradient(180deg, #330a0a 12.8%, #5b1313 106.36%);
height: 716px;
padding: 197px 0 0;
}
.about_banner_sect::after {
content: "";
width: 100%;
height: 561px;
clip-path: polygon(
90% 0%,
93% 6%,
100% 6%,
100% 100%,
9% 100%,
6% 93%,
0 93%,
0 0
);
display: block;
/* background: url(../images/about_banner_bg.png) no-repeat left top; */
background:
linear-gradient(180deg, #330a0a 0%, #5b1313 106.36%),
linear-gradient(0deg, #000000, #000000);
background-size: cover;
position: absolute;
bottom: 0;
}
.about_banner_sect h1 {
font-family: "Saira Extra Condensed", sans-serif;
font-size: 72px;
line-height: 100%;
font-weight: 600;
text-transform: uppercase;
color: #ffffff;
padding-bottom: 60px;
}
.about_banner_sect video {
width: 100%;
height: 590px;
object-fit: cover;
margin-bottom: 40px;
}
.about_banner_inner {
width: 1061px;
margin: 0 auto;
position: relative;
z-index: 9;
}
.about_banner_cont {
gap: 80px;
text-align: left;
}
.about_banner_cont h3 {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 24px;
line-height: 30px;
font-weight: 700;
color: #ffffff;
letter-spacing: 1.2px;
width: 250px;
}
.about_banner_cont p {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 16px;
line-height: 22px;
font-weight: 500;
color: #c0c0c0;
width: 254px;
}
.about_banner_cont p:last-child {
width: 400px;
}
.technology_sect {
background-color: #fff;
padding: 100px 0;
position: relative;
z-index: 9;
}
.technology_cont h2 {
font-family: "Saira Extra Condensed", sans-serif;
font-size: 48px;
line-height: 50px;
font-weight: 600;
text-transform: uppercase;
color: #000000;
padding-bottom: 28px;
}
.technology_img1 img {
width: 100%;
height: 341px;
object-fit: cover;
clip-path: polygon(
0px 0px,
100% 0px,
100% 93%,
95% 100%,
0px 100%,
0px 0px
);
}
.technology_img2 {
/* margin-top: -78px; */
margin-top: 0;
}
.technology_img2 img {
width: 100%;
height: 419px;
object-fit: cover;
clip-path: polygon(
0px 0px,
100% 0px,
100% 94%,
94% 100%,
0px 100%,
0px 0px
);
}
.technology_img3 img {
width: 489px;
height: 324px;
object-fit: cover;
clip-path: polygon(
0px 0px,
100% 0px,
100% 92%,
95% 100%,
0px 100%,
0px 0px
);
object-position: bottom;
}
.video_section {
width: 52.5%;
min-height: 324px; /* match left image height so arrows sit at image bottom */
/* position: absolute;
top: -365px;
right: 0; */
}
.manufacturing_vedio {
width: 100%;
height: 341px;
object-fit: cover;
clip-path: polygon(
0px 0px,
100% 0px,
100% 92%,
96% 100%,
0px 100%,
0px 0px
);
}
.about_slider {
margin-top: 24px;
padding-bottom: 56px; /* reserve space for arrows below the paragraph */
}
.about_slider_cont h4 {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 18px;
line-height: 25px;
font-weight: 700;
color: #343434;
letter-spacing: 0.9px;
padding-bottom: 8px;
}
.about_slider_cont p {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 16px;
line-height: 25px;
font-weight: 500;
color: #6d6d6d;
display: block;
padding-bottom: 55px;
}
.about_slider .slick-prev.slick-disabled:before {
opacity: 1;
content: "";
width: 36px;
height: 28px;
display: block;
background: url(../images/left-arrow.svg);
}
.about_slider .slick-prev:before {
opacity: 1;
content: "";
width: 36px;
height: 28px;
display: block;
background: url(../images/red-left-arrow.svg);
}
.about_slider .slick-next:before {
content: "";
opacity: 1;
width: 36px;
height: 28px;
display: block;
background: url(../images/right-arrow.svg);
}
.about_slider .slick-next.slick-disabled:before {
content: "";
opacity: 1;
width: 36px;
height: 28px;
display: block;
background: url(../images/grey-right-arrow.svg);
}
.about_slider .slick-prev {
left: 0;
right: inherit;
bottom: 14px;
width: 36px;
height: 28px;
top: inherit;
}
.about_slider .slick-next {
left: 76px;
right: inherit;
bottom: 14px;
width: 36px;
height: 28px;
top: inherit;
}
.about_slider_cont {
width: 93%;
}
.about_testimonial_sect {
background: url(../images/about_testimonial_bg.jpg) no-repeat center center;
position: relative;
padding: 100px 0;
background-size: cover;
clip-path: polygon(
0% 0%,
6% 0%,
9% 6%,
100% 6%,
100% 100%,
94% 100%,
91% 94%,
0% 94%
);
margin-top: -44px !important;
}
.about_testimonial_sect::before {
content: "";
width: 100%;
height: 100%;
background: linear-gradient(
180deg,
rgba(70, 9, 9, 0.8) 0%,
rgba(50, 9, 9, 0.8) 98.51%
);
position: absolute;
left: 0;
top: 0;
}
.about_testimonial_sect strong {
color: #fff;
}
.about_testimonial_sect .t-container p {
color: #c0c0c0;
}
/* .about_get_in_touch_sect {
margin-top: -45px;
} */
.about_get_in_touch_sect .solution-content {
width: 71%;
margin: 0 auto;
}
.about_get_in_touch_sect .get_in_touch_right {
width: 90%;
}
.about_get_in_touch_sect .get_in_touch_left {
width: 440px;
}
.about_get_in_touch_sect .get_in_touch_left small {
font-family: "Schibsted Grotesk", sans-serif;
color: rgb(187, 0, 0);
font-size: 14px;
line-height: 120%;
letter-spacing: 0.48px;
padding-bottom: 8px;
font-weight: 500;
display: block;
}
.about_get_in_touch_sect .get_in_touch_left h4 {
color: rgb(255, 255, 255);
font-family: "Saira Extra Condensed", sans-serif;
font-weight: 600;
font-size: 48px;
line-height: 50px;
display: block;
text-transform: uppercase;
padding-bottom: 12px;
}
.about_get_in_touch_sect .get_in_touch_left p {
width: 90%;
}
/*
[type="file"] {
color: #878787;
}
[type="file"]::-webkit-file-upload-button {
background: #ED1C1B;
border: 2px solid #ED1C1B;
border-radius: 4px;
color: #fff;
cursor: pointer;
font-size: 12px;
outline: none;
padding: 10px 25px;
text-transform: uppercase;
transition: all 1s ease;
}
[type="file"]::-webkit-file-upload-button:hover {
background: #fff;
border: 2px solid #535353;
color: #000;
} */
/* .custom-file-upload input[type="file"] {
display: none;
}
.custom-file-upload {
display: flex;
align-items: center;
gap: 15px;
font-family: "Schibsted Grotesk", sans-serif;
}
.custom-file-upload .file-label {
background: #ED1C1B;
border: 2px solid #ED1C1B;
border-radius: 4px;
color: #fff;
cursor: pointer;
font-size: 12px;
padding: 10px 25px;
text-transform: uppercase;
transition: all 0.3s ease;
}
.custom-file-upload .file-label:hover {
background: #fff;
color: #000;
border-color: #535353;
}
.custom-file-upload .file-chosen {
font-size: 14px;
color: #878787;
} */
.about_get_in_touch_sect .get_in_touch_right .form-control {
background: url(../images/about_form_border.png) left bottom / 100%
no-repeat;
}
.about_get_in_touch_sect .get_in_touch_right .form-group.mb-5 {
margin-bottom: 40px !important;
}
.filelabel {
color: rgba(255, 255, 255, 0.5);
font-family: "Schibsted Grotesk", sans-serif;
position: relative;
width: 160px;
height: auto;
font-size: 16px;
line-height: 100%;
font-weight: 500;
margin-bottom: 43px;
border-width: initial;
border-style: none;
border-color: initial;
border-image: initial;
padding: 8px 25px 10px 0px;
background: url(../images/attach_file_border.png) left bottom / 100%
no-repeat;
display: flex !important;
align-items: center;
left: 0;
}
#FileInput {
display: none;
}
.filelabel img {
margin-right: 14px;
}
.built_sect {
width: 100%;
background: url(../images/short-nose-new.png) no-repeat center center;
width: 100%;
height: auto;
background-size: cover;
padding: 160px 0 100px;
}
.en.northamerica .built_sect,
.en.global .built_sect {
background: url(../images/rtna-new-built.png) no-repeat center center;
width: 100%;
height: auto;
background-size: cover;
}
.built_cont_left h3 {
color: #000000;
font-family: "Saira Extra Condensed", sans-serif;
font-weight: 600;
font-size: 48px;
line-height: 50px;
display: block;
text-transform: uppercase;
padding-bottom: 12px;
}
.built_cont_left p {
color: #343434;
font-family: "Schibsted Grotesk", sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 22px;
display: block;
}
.build_blog_sect {
padding: 32px 30px 0 32px;
width: 100%;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(6px);
height: 310px;
position: relative;
margin-bottom: 5px;
}
.build_blog_sect h5 {
color: #343434;
font-family: "Schibsted Grotesk", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 21px;
display: block;
letter-spacing: 0.9px;
padding-bottom: 8px;
}
.build_blog_sect p {
color: #6d6d6d;
font-family: "Schibsted Grotesk", sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 18px;
display: block;
}
.build_blog_sect img {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: auto;
object-fit: cover;
}
.built_cont_right .row .col-12.col-md-6:first-child .build_blog_sect {
clip-path: polygon(6% 0px, 100% 0px, 100% 0%, 100% 100%, 0px 100%, 0px 6%);
}
.built_cont_right .row .col-12.col-md-6:last-child .build_blog_sect {
clip-path: polygon(0% 0px, 100% 0px, 100% 93%, 93% 100%, 0px 100%, 0px 0%);
}
.built_cont_right .row .col-12.col-md-6 {
padding: 0 4px;
}
.built_cont_right .row {
margin: 0 -4px;
}
.horizontal-gallery-caption h6 {
font-family: "Saira Extra Condensed", sans-serif;
font-size: 48px;
line-height: 100%;
font-weight: 600;
color: #ea1f27;
padding-bottom: 6px;
}
.horizontal-gallery-caption p {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 32px;
line-height: 40px;
font-weight: 600;
color: #343434;
}
/*
.c-horizontal-hero_title_word, .c-horizontal-hero_title_line {
position: relative;
color: #FFF;
font-family: "Saira Extra Condensed", sans-serif;
font-weight: 600;
font-size: 48px;
line-height: 50px;
display: block;
text-transform: uppercase;
}
.c-horizontal-hero .container {
z-index: 9;
display: flex;
}
.c-horizontal-hero {
min-width: calc(100 * 15px);
height: 100%;
padding-right: 0;
}
.c-horizontal-hero_inner {
padding-left: 0;
}
.c-image_inner .c-image_img {
width: 640px;
height: 360px;
object-fit: cover;
}
.c-horizontal-hero_title {
width: 30%;
margin: 0;
}
.c-horizontal-hero_label {
color: #D5D5D5 !important;
font-family: "Schibsted Grotesk", sans-serif;
font-weight: 500;
font-size: 16px !important;
line-height: 24px !important;
display: block;
max-width: 384px;
}
.c-horizontal-gallery_item.-default:not(:last-child) .c-horizontal-gallery_item_inner:after {
display: none;
}
.c-horizontal-gallery_item {
width: 95vw !important;
flex: 0 0 95vw;
max-width: 95vw;
}
.c-horizontal-gallery_item.-default .c-horizontal-gallery_image {
width: 100% !important;
height: auto !important;
gap: 60px;
}
.horizontal-gallery-caption {
width: 36%;
}
.c-horizontal_slider {
display: flex;
width: fit-content;
}
.c-horizontal {
margin-bottom: calc(var(--scrollWidth) - 100vw);
}
.c-year-timeline {
position: absolute;
bottom: -60px;
left: 0;
width: 100%;
height: 50px;
overflow: hidden;
}
.c-year-scale {
display: flex;
gap: 100px;
align-items: center;
position: relative;
will-change: transform;
}
.c-year-tick {
width: 2px;
height: 20px;
background: #888;
position: relative;
}
.c-year-tick.major {
height: 30px;
background: #fff;
}
.c-year-tick.major span {
position: absolute;
top: 35px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
color: #fff;
}
.c-year-center-marker {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
background: red;
transform: translateX(-50%);
z-index: 2;
} */
.horizontal-wrapper {
position: relative;
height: 100vh;
overflow: hidden;
background-color: #666666;
}
.horizontal-scroll {
display: flex;
height: 100%;
position: relative;
overflow: visible;
}
.panel {
flex: 0 0 100vw;
width: 100vw;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #fff;
}
/* .panel.intro {
background: url('../images/history_bg.png') no-repeat center center;
background-size: cover;
} */
.panel.intro {
position: relative;
background: url(../images/history_bg.png) no-repeat center center;
background-size: cover;
z-index: 2;
/* overflow: visible; */
}
/* .panel.year:first-child {
margin-left: -250vw;
z-index: 1;
} */
.panel.intro::before {
content: "";
position: absolute;
inset: 0;
background: url(../images/history_bg.png) no-repeat center center;
background-size: cover;
opacity: 0.75; /* 75% opacity */
z-index: -1;
}
.intro_cont {
margin-top: calc(100vh - 440px);
}
.panel.intro h1 {
font-family: "Saira Extra Condensed", sans-serif;
font-size: 48px;
line-height: 50px;
font-weight: 600;
text-transform: uppercase;
color: #ffffff;
width: 320px;
}
.panel.intro p {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 16px;
line-height: 24px;
color: #d5d5d5;
font-weight: 500;
width: 384px;
text-align: left;
}
.panel.year {
background: url("../images/dust.png") no-repeat left top;
background-size: cover;
}
.panel img {
width: 640px;
height: 360px;
object-fit: cover;
clip-path: polygon(4% 0, 100% 0, 100% 94%, 96% 100%, 0 100%, 0 6%);
}
.panel.year h2 {
font-family: "Saira Extra Condensed", sans-serif;
font-size: 48px;
line-height: 100%;
font-weight: 600;
text-transform: uppercase;
color: #ea1f27;
}
.panel.year p {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 32px;
line-height: 40px;
color: #343434;
font-weight: 600;
text-align: left;
}
.panel_cont {
width: 88%;
margin: 0 auto;
}
form label {
pointer-events: inherit;
}
/* Year Scrubber */
.horizontal-wrapper {
position: relative; /* parent for absolute scrubber */
height: 100vh; /* full screen */
overflow: hidden;
z-index: 9;
}
.year-scrubber {
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.tick.thick {
width: 3px;
height: 30px;
background: #000;
opacity: 1;
margin-right: 10px;
transition: all 0.3s;
}
.tick.thin {
width: 1px;
height: 20px;
background: #000000;
opacity: 1;
margin-right: 10px;
transition: all 0.3s;
}
.year-scrubber .marker {
position: absolute;
top: inherit;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
width: 3px;
height: 30px;
background: red;
border-radius: 6px;
}
.horizontal-scroll {
display: flex;
flex-wrap: nowrap;
width: max-content;
}
.panel {
flex: 0 0 100vw;
width: 100vw;
}
/* ===== RTL (Arabic) horizontal-scroll fix ===== */
/* In RTL, the flex container extends to the LEFT and gets clipped by overflow:hidden.
Force the wrapper and scroll container to LTR so panels lay out left-to-right
(same as English). The GSAP x-translation then works identically.
Panel *content* inherits RTL from inner .container elements. */
.ar .horizontal-wrapper {
direction: ltr;
}
.ar .horizontal-scroll .panel .container {
direction: rtl;
text-align: right;
}
.ar .panel.year .text-start {
text-align: right;
}
.ar .panel.intro p {
text-align: right;
}
/* ===== RTL (Arabic) leadership slider fix ===== */
/* In LTR, .tip-slider-full extends from container LEFT edge to viewport RIGHT edge
using width calc and margin:0. In RTL we need the mirror: extend from container
RIGHT edge to viewport LEFT edge. Override width to stretch left, and use
margin-left:0 + margin-right:auto isn't enough — use negative margin to pull it. */
.ar .tip-slider-full {
margin: 0;
margin-right: 0;
margin-left: calc((100vw - 100%) / -2);
}
/*
.vision_mission_sect {
height: 100vh;
position: relative;
overflow: hidden;
padding: 58px 0;
z-index: -1px;
}
.vision_mission_slide {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
box-sizing: border-box;
}
.vision_mission_slide .content {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
max-width: 100%;
gap: 40px;
}
.heading-fixed {
position: absolute;
top: 148px;
left: 0;
font-size: 26px;
font-weight: bold;
z-index: 1000;
}
.heading-fixed span, .heading-fixed small {
font-family: "Saira Extra Condensed", sans-serif;
font-size: 48px;
line-height: 50px;
font-weight: 600;
text-transform: uppercase;
color: #000;
transition: color 0.3s;
}
.heading-fixed span.active {
color: #EA1F27;
}
.vision_mission_slide .text {
flex: 1;
font-family: "Schibsted Grotesk", sans-serif;
font-size: 16px;
line-height: 25px;
color: #6D6D6D;
font-weight: 500;
padding-top: 222px;
}
.vision_mission_slide .text ul {
list-style: disc;
margin-left: 20px;
}
.vision_mission_slide .text ul {
list-style: disc;
margin-left: 20px;
}
.vision_mission_slide .content img {
width: 730px;
height: 560px;
object-fit: cover;
}
.vision_img {
clip-path: polygon(5% 0, 100% 0, 100% 89%, 91% 100%, 0 100%, 0 30%, 5% 24%);
}
.mission_img {
clip-path: polygon(5% 0, 100% 0, 100% 89%, 91% 100%, 0 100%, 0 46%, 5% 39%);
}
.values_img {
clip-path: polygon(5% 0, 100% 0, 100% 89%, 91% 100%, 0 100%, 0 73%, 5% 65%);
}
.vision_mission_slide {
top: 0;
left: 0;
width: 100%;
height: 83vh;
display: block;
align-items: center;
justify-content: center;
padding: 0;
box-sizing: border-box;
}
.heading-fixed span.active {
color: #EA1F27;
} */
/*
.slider-wrapper {
position: relative;
width: 100%;
height: calc(3 * 100vh);
}
.slider-container {
position: sticky;
top: 0;
height: 100vh;
width: 100%;
overflow: hidden;
background: #fff;
z-index: 10;
}
.vision_mission_slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.vision_mission_slide.active {
opacity: 1;
z-index: 2;
}
.vision_mission_slide .content {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 90%;
max-width: 1200px;
gap: 40px;
}
.vision_mission_slide .text {
flex: 1;
font-size: 16px;
line-height: 25px;
color: #6D6D6D;
font-weight: 500;
padding-top: 120px;
}
.vision_mission_slide .text ul {
list-style: disc;
margin-left: 20px;
}
.vision_mission_slide .content img {
width: 730px;
height: 560px;
object-fit: cover;
}
.vision_img { clip-path: polygon(5% 0, 100% 0, 100% 89%, 91% 100%, 0 100%, 0 30%, 5% 24%); }
.mission_img { clip-path: polygon(5% 0, 100% 0, 100% 89%, 91% 100%, 0 100%, 0 46%, 5% 39%); }
.values_img { clip-path: polygon(5% 0, 100% 0, 100% 89%, 91% 100%, 0 100%, 0 73%, 5% 65%); }
.heading-fixed {
position: absolute;
top: 80px;
left: 60px;
font-size: 26px;
font-weight: bold;
z-index: 20;
}
.heading-fixed span,
.heading-fixed small {
font-family: "Saira Extra Condensed", sans-serif;
font-size: 48px;
line-height: 50px;
font-weight: 600;
text-transform: uppercase;
color: #000;
transition: color 0.3s;
}
.heading-fixed span.active {
color: #EA1F27;
} */
/* Scrollable wrapper with dynamic height */
.slider-wrapper {
position: relative;
width: 100%;
}
/* Sticky container that stays pinned */
.slider-container {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
background: #fff;
z-index: 2;
}
/* Slides */
.vision_mission_slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.6s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
padding: 0 12px;
}
.vision_mission_slide.active {
opacity: 1;
z-index: 3;
}
.vision_mission_slide .text ul {
list-style: disc;
margin-left: 30px;
}
.vision_mission_slide .text ul li {
list-style: disc;
}
/* Heading fixed */
.heading-fixed {
position: absolute;
top: 250px;
left: 12px;
font-size: 26px;
font-weight: bold;
z-index: 10;
}
.heading-fixed span,
.heading-fixed small {
font-family: "Saira Extra Condensed", sans-serif;
font-size: 48px;
line-height: 50px;
font-weight: 600;
text-transform: uppercase;
color: #000;
transition: color 0.3s;
}
.vision_mission_slide .text p,
.vision_mission_slide .text ul li {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 16px;
line-height: 25px;
color: #6d6d6d;
font-weight: 500;
}
.heading-fixed span.active {
color: #ea1f27;
}
/* Slide content */
.vision_mission_slide .content {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
max-width: 100%;
gap: 40px;
}
.vision_mission_slide .text {
flex: 1;
padding-top: 240px;
}
.vision_mission_slide .text ul {
list-style: disc;
margin-left: 20px;
}
.vision_mission_slide .content img {
width: 730px;
height: 560px;
object-fit: cover;
}
.vision_img {
clip-path: polygon(5% 0, 100% 0, 100% 94%, 95% 100%, 0 100%, 0 30%, 5% 24%);
}
.mission_img {
clip-path: polygon(5% 0, 100% 0, 100% 94%, 95% 100%, 0 100%, 0 46%, 5% 39%);
}
.values_img {
clip-path: polygon(5% 0, 100% 0, 100% 94%, 95% 100%, 0 100%, 0 73%, 5% 65%);
}
.year-scrubber {
position: fixed;
bottom: 20px;
left: 0;
width: 100%;
text-align: center;
pointer-events: none;
width: 282px;
height: 150px;
right: 0;
margin: 0 auto;
overflow-x: hidden;
overflow-y: inherit;
padding-bottom: 10px;
}
.years-line {
display: flex;
justify-content: end;
align-items: end;
transition: transform 0.3s;
position: relative;
height: 93%;
}
.tick {
width: 2px;
height: 10px;
/* margin: 0 10px; */
background: #000; /* default thin lines grey */
opacity: 1;
border-radius: 2px;
}
.tick.thick {
height: 20px;
width: 1px;
}
.marker {
position: absolute;
top: -10px;
left: 50%;
width: 3px;
height: 60px;
background: red;
transform: translateX(-50%);
}
/* .active-year {
margin-top: 10px;
font-weight: bold;
font-size: 18px;
} */
.active-year {
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
font-family: "Schibsted Grotesk", sans-serif;
font-size: 24px;
line-height: 100%;
color: #343434;
font-weight: 500;
}
.tick {
position: relative;
width: 3px;
height: 30px;
/* margin: 0 10px; */
background: grey;
opacity: 0.4;
}
.tick.thick {
height: 10px;
background: black;
width: 2px;
border-radius: 6px;
margin: 0;
}
.tick .label {
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
white-space: nowrap;
color: #333;
}
.leadership_sect p {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 16px;
line-height: 22px;
color: #c0c0c0;
font-weight: 500;
width: 75%;
text-align: left;
}
.tip-slider .content {
position: relative;
width: 100%;
margin: auto;
overflow: hidden;
clip-path: polygon(
0px 0px,
100% 0px,
100% 95%,
95% 100%,
0px 100%,
0px 0px
);
}
.tip-slider .content .content-overlay {
background: linear-gradient(
360deg,
rgba(51, 0, 1, 0.95) 0%,
rgba(61, 9, 10, 0.75) 100%
);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.4s;
}
.tip-slider .content:hover .content-overlay {
opacity: 1;
}
/*
.content-details{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
padding: 16px;
width: 100%;
height: 100%;
display: flex;
align-items:end;
opacity: 0;
transition: 0.3s;
}
.tip-slider .content:hover .content-details{
top: 50%;
left: 50%;
opacity: 1;
} */
.content-details p {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 14px;
line-height: 20px;
color: #d5d5d5;
font-weight: 500;
padding-bottom: 22px;
width: 100%;
}
.tip-slider .slick-slide .content-image {
width: 100%;
height: 450px;
object-fit: cover;
display: block;
}
/* ------------------------------
MAIN CONTAINER SETUP
--------------------------------*/
.tip-slider {
position: relative;
overflow: visible;
}
.tip-slider .slick-slide {
position: relative;
transition: transform 0.4s ease;
z-index: 3; /* Image above floating panel */
}
/* ------------------------------
IMAGE AND DETAILS
--------------------------------*/
.content {
position: relative;
overflow: hidden;
}
.content-image {
display: block;
width: 100%;
height: auto;
position: relative;
z-index: 3;
transition: transform 0.4s ease;
}
.content-details {
display: none; /* keep hidden - we’ll use this text in floating box */
}
/* ------------------------------
FLOATING DETAIL PANEL
--------------------------------*/
.floating-detail {
position: absolute;
top: 0;
width: 320px; /* panel width */
height: 100%;
background: linear-gradient(
360deg,
rgba(51, 0, 1, 0.95) 0%,
rgba(61, 9, 10, 0.85) 100%
);
color: #fff;
opacity: 0;
display: none;
transform: translateX(-30px);
/* fade-out: fast, no delay (when .active is removed) */
transition: opacity 0.2s ease, transform 0.2s ease;
display: flex;
align-items: normal;
justify-content: center;
flex-direction: column;
text-align: left;
padding: 10px 15px;
z-index: 999;
pointer-events: none;
clip-path: polygon(
0px 0px,
100% 0px,
100% 95%,
95% 100%,
0px 100%,
0px 0px
);
}
.floating-detail.active {
opacity: 1;
transform: translateX(0); /* slides out from behind */
pointer-events: auto;
/* fade-in: delayed so the adjacent slide shift (0.4s) finishes first */
transition: opacity 0.35s ease 0.4s, transform 0.35s ease 0.4s;
}
.floating-detail p {
font-size: 13px;
line-height: 19px;
color: #d5d5d5;
font-weight: 500;
font-family: "Schibsted Grotesk", sans-serif;
width: 100%;
}
.floating-detail a img {
width: 35px;
height: auto;
display: block;
margin-top: 0;
}
/* ------------------------------
SLIDE SHIFT WHEN FLOATING DETAIL APPEARS
--------------------------------*/
.tip-slider .slick-slide.shift-right {
transform: translateX(320px);
z-index: 3;
}
/* ------------------------------
MOBILE
--------------------------------*/
@media (max-width: 767px) {
.floating-detail {
display: none;
}
}
.lead_detail h4 {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 18px;
line-height: 25px;
color: #ffffff;
font-weight: 700;
letter-spacing: 0.9px;
}
.lead_detail small {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 16px;
line-height: 22px;
color: #d5d5d5;
font-weight: 500;
}
.fadeIn-bottom {
top: 80%;
}
.fadeIn-top {
top: 20%;
}
.fadeIn-left {
left: 20%;
}
.fadeIn-right {
left: 80%;
}
.tip-section.leadership_sect {
position: relative;
width: 100%;
padding: 100px 0 190px 0;
background: url(../images/shade.png) no-repeat left bottom #000;
background-size: 100% auto;
display: flex;
align-items: center;
}
.leader_cont h4 {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 18px;
line-height: 25px;
color: #c0c0c0;
font-weight: 700;
text-align: left;
letter-spacing: 0.9px;
}
.leader_cont p {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 16px;
line-height: 22px;
color: #d5d5d5;
font-weight: 500;
text-align: left;
}
.growth_sect {
background-color: #000;
padding: 100px 0px;
margin-top: -45px;
}
.growth_cont strong {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 14px;
line-height: 120%;
color: #fff;
font-weight: 400;
letter-spacing: 0.4px;
}
.growth_cont h4 {
font-family: "Saira Extra Condensed", sans-serif;
font-weight: 600;
font-size: 48px;
line-height: 50px;
text-transform: uppercase;
color: #fff;
padding-bottom: 12px;
}
.growth_cont p {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 16px;
line-height: 22px;
color: #c0c0c0;
font-weight: 500;
width: 78%;
margin: 0 auto 20px;
}
/*
.slider-wrapper {
overflow: hidden;
width: 100%;
}
.slider-track {
display: flex;
width: 100%;
animation: scroll 10s linear infinite;
}
.slide {
flex: 0 0 81%;
width: 99%;
margin: 0 20px 0 0;
text-align: center;
}
.grid_img img {
width: 100%;
height: 200px;
object-fit: cover;
margin-bottom: 20px;
} */
/* @keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
} */
.continuous-slider {
position: relative;
overflow: hidden;
width: 100%;
padding: 50px 0 0;
}
.slider-wrapper {
display: flex;
width: max-content;
animation: marquee 45s linear infinite;
}
.slider-track {
display: flex;
align-items: flex-start;
gap: 40px;
/* animation: scroll-marquee 45s linear infinite; */
}
.slide {
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: 20px;
color: #fff;
font-size: 24px;
text-align: center;
}
.slide img {
width: 280px;
height: 200px;
object-fit: cover;
display: block;
margin-bottom: 20px;
}
.slide img:last-child {
margin-bottom: 0;
}
.slide:nth-child(1) {
margin-top: 180px;
}
.slide:nth-child(2) {
margin-top: 80px;
}
.slide:nth-child(3) {
margin-top: 140px;
}
.slide:nth-child(4) {
margin-top: 80px;
}
.slide:nth-child(5) {
margin-top: 0;
}
.slide:nth-child(6) {
margin-top: 100px;
}
.slide:nth-child(7) {
margin-top: 180px;
}
.slide:nth-child(8) {
margin-top: 80px;
}
.slider-track::after {
content: "";
display: block;
width: 100%;
}
/* Animation keyframes */
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Optional: pause on hover */
.continuous-slider:hover .slider-track {
animation-play-state: paused;
}
.single-slide {
margin-top: 155px;
}
.double-slide {
margin-top: 112px;
}
.quad-slide {
margin-top: 40px;
}
/* Slider Section */
.slider-section {
position: relative;
height: 300vh;
width: 100%;
}
/* Pin container */
.slider-container {
position: sticky;
top: 0;
height: 100vh;
width: 100%;
overflow: hidden;
background: #fff;
z-index: 9;
}
.slider-section .container {
height: 100vh;
}
.panel_cont .text-start {
width: 55%;
}
.success-modal h3 {
font-family: "Saira Extra Condensed", sans-serif;
font-size: 40px;
line-height: 42px;
font-weight: 600;
color: #343434;
text-transform: uppercase;
text-align: center;
}
.success-modal .modal-body {
padding: 30px 25px 25px;
}
.success-modal .modal-dialog {
max-width: 546px;
width: 100%;
}
.success-modal .modal-content {
border: 0;
border-radius: 24px;
}
.modal-header {
padding: 1rem 1rem 0;
border-bottom: none;
}
.edit_new_mod_sect img {
margin: 0 auto 20px;
width: 100px;
height: auto;
}
.success-modal h4 {
font-family: "Saira Extra Condensed", sans-serif;
font-size: 30px;
line-height: 33px;
margin-top: 15px;
font-weight: 600;
color: rgb(52, 52, 52);
text-transform: uppercase;
text-align: center;
}
.social-icons img {
width: 40px;
height: auto;
margin: 0;
}
.text-danger {
position: absolute;
bottom: -21px;
width: max-content;
}
.modal-header .btn-close {
padding: 1rem;
}
.okay_btn {
color: #ea1f27;
width: 180px;
margin: 30px auto 10px;
font-weight: 600;
}
.okay_btn:hover {
color: #ea1f27;
}
/******************** Footer Start Here **************************/
.footer-logo {
width: 100%;
height: auto;
margin-top: 103px;
}
.footer-text input {
font-size: 16px;
line-height: 100%;
font-weight: 500;
padding-bottom: 10px;
font-family: "Schibsted Grotesk", sans-serif;
position: relative;
width: 291px;
background: url(../images/select_border.png) no-repeat left bottom;
background-size: contain;
color: #cccccc;
border: none;
}
.subscribe_btn {
font-family: "Schibsted Grotesk", sans-serif;
color: #fff !important;
font-size: 18px;
line-height: 28px;
width: max-content;
height: 45px;
font-weight: 500;
background: url(../images/white_btn.png) no-repeat left center;
background-size: 100% 100%;
transition: all 0.3s linear;
gap: 15px;
padding-top: 7px !important;
padding: 15px !important;
font-family: "Schibsted Grotesk", sans-serif;
}
.footer-text small {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 14px;
line-height: 100%;
font-weight: 500;
color: #858585;
}
.foot-button {
width: 158px;
display: flex;
border: 2px solid #fff;
}
.foot-button img {
left: 20px;
}
.tabs-select {
display: none;
width: 100%;
padding: 10px;
border-radius: 6px;
border: 1px solid #ccc;
margin-bottom: 20px;
}
/*
.about-us {
opacity: 0;
visibility: hidden;
}
*/
.navbar-nav {
list-style: none;
margin: 0;
padding: 0;
}
/* Hamburger */
.hamburger {
display: none;
cursor: pointer;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 22px;
border-radius: 10px;
height: 20px;
z-index: 1101;
transition: all 0.3s ease;
align-items: end;
}
.hamburger span {
background: #848484;
height: 2px;
width: 100%;
border-radius: 2px;
transition: all 0.3s ease;
}
/* Hamburger → X */
.hamburger.open span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
width: 22px;
}
.hamburger.open span:nth-child(2) {
opacity: 0;
}
.hamburger.open span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
width: 22px;
}
.region-dropdown-mobile {
display: none; /* hide desktop duplicate */
}
.mob_sect {
display: none !important;
}
.text-muted {
display: none;
}
.pagination {
--bs-pagination-color: #fff;
--bs-pagination-active-color: #fff;
--bs-pagination-active-bg: transparent;
--bs-pagination-active-border-color: transparent;
gap: 10px;
margin-top: 30px;
}
.page-link {
color: #fff !important;
background-color: transparent !important;
border: none !important;
font-family: "Schibsted Grotesk", sans-serif;
font-size: 17px;
line-height: 35px;
font-weight: 500;
text-align: center;
padding: 0 0.75rem;
}
.page-item.active .page-link {
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
color: #fff !important;
background-color: transparent !important;
position: relative;
z-index: 2;
background: url("../images/pagination_bg.png") no-repeat center left !important;
width: 35px;
height: 35px;
padding: 0;
background-size: cover !important;
}
.page-link:focus {
box-shadow: none !important;
outline: none !important;
}
.white_pagination .page-item:first-child .page-link,
.white_pagination .page-item:last-child .page-link {
font-size: 0;
position: relative;
}
.white_pagination .page-item:first-child .page-link:before {
content: "";
background: url("../images/pagination_black_left.svg") no-repeat center
center;
width: 9px;
height: 15px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-size: contain;
}
.white_pagination .page-item:last-child .page-link:before {
content: "";
background: url("../images/pagination_black_right.svg") no-repeat center
center;
width: 9px;
height: 15px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-size: contain;
}
.page-item:first-child .page-link:before {
content: "";
background: url("../images/pagination_left.svg") no-repeat center center;
width: 9px;
height: 15px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-size: contain;
}
.page-item:last-child .page-link:before {
content: "";
background: url("../images/pagination_right.svg") no-repeat center center;
width: 9px;
height: 15px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-size: contain;
}
.white_pagination .page-link {
color: #343434 !important;
}
.white_pagination .page-item.active .page-link {
color: #343434 !important;
}
.page-item.active .page-link {
border-width: 0 !important;
border-style: none !important;
}
.pagination li:first-child .page-link {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.pagination li:last-child .page-link {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.mobile-first-section,
.custom-accordion {
display: none;
}
/* .custom-accordion .accordion-header {
background: #000000;
color: white;
padding: 14px 24px;
font-size: 16px;
line-height: 22px;
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
} */
.custom-accordion .accordion-header h1 {
font-size: 28px;
font-weight: 600;
}
.custom-accordion .accordion-item {
border: 0px;
cursor: pointer;
}
.custom-accordion .accordion-item:last-child {
border-bottom: none;
}
.custom-accordion .accordion-title {
background: #000000;
color: white;
padding: 14px 24px;
font-size: 16px;
line-height: 22px;
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid #fff;
}
.custom-accordion .accordion-title:hover {
background: #000;
color: #fff;
}
.custom-accordion .accordion-title.active {
background: #000;
color: #fff;
}
.custom-accordion .accordion-icon {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
flex-shrink: 0;
margin-left: 15px;
}
.custom-accordion .accordion-icon::before {
content: "+";
font-size: 26px;
color: #ffffff;
font-weight: 600;
transition: all 0.3s ease;
}
.custom-accordion .accordion-title.active .accordion-icon {
background: transparent;
}
.custom-accordion .accordion-title.active .accordion-icon::before {
color: white;
content: "-";
}
.custom-accordion .accordion-content {
display: none;
padding: 0;
background: white;
margin: 0;
}
.custom-accordion .accordion-content p {
font-size: 14px;
line-height: 20px;
text-transform: uppercase;
letter-spacing: 0;
color: #231f20;
font-weight: 600;
margin-bottom: 1rem;
}
.custom-accordion .accordion-content-inner {
padding: 20px 24px;
line-height: 1.6;
}
.grid-filter-mobile {
display: none !important;
}
.grid-filter {
display: block !important;
}
.news-slider {
display: flex;
flex-wrap: wrap;
gap: 20px; /* adjust spacing */
justify-content: left;
}
.news-slide {
flex: 0 0 calc(33.333% - 20px);
box-sizing: border-box;
/* Lift cards above .card-content so pointer events (hover + link) reach the
whole card. Without this, a shorter middle card let .card-content paint over
its /image, so only the h4 was hoverable/clickable on the center card. */
position: relative;
z-index: 2;
}
.specific-content h1 {
padding: 20px 0 0;
color: #343434;
font-family: "Saira Extra Condensed", sans-serif;
font-weight: 600;
font-size: 30px;
line-height: 30px;
text-transform: uppercase;
}
/* Toast confirming the active region after a region change sends the user home.
Lives in the strip above the navbar, in the old .region-prompt-bar position: the
bar is fixed and width-matched to .navbar-glass, so the toast right-aligns to the
nav's right edge instead of the viewport edge (which is what clipped it before).
The navbar itself is untouched. */
.region-toast-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99998;
display: flex;
justify-content: flex-end;
width: 1360px;
max-width: 100%;
margin: 0 auto;
padding: 5px 25px 0 30px;
pointer-events: none;
}
.region-toast {
display: flex;
align-items: center;
gap: 10px;
max-width: 100%;
padding: 8px 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 4px;
background: rgba(18, 24, 34, 0.92);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
pointer-events: auto;
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.region-toast.is-visible {
opacity: 1;
transform: translateY(0);
}
.region-toast.is-hidden {
opacity: 0;
transform: translateY(-8px);
pointer-events: none;
}
.region-toast-dot {
flex: 0 0 auto;
width: 8px;
height: 8px;
border-radius: 50%;
background: #ea1f27;
}
.region-toast p {
margin: 0;
font-family: "Schibsted Grotesk", sans-serif;
font-size: 15px;
font-weight: 500;
line-height: 1.3;
color: #fff;
}
.region-toast p strong {
font-weight: 700;
color: #ea1f27;
}
.region-toast-close {
flex: 0 0 auto;
padding: 0 2px;
background: none;
border: 0;
cursor: pointer;
font-size: 22px;
line-height: 1;
color: #a0a6b0;
transition: color 0.2s ease;
}
.region-toast-close:hover {
color: #fff;
}
/* Track .navbar-glass as it narrows, so the toast stays aligned to the nav's edge. */
@media (max-width: 1400px) {
.region-toast-bar {
width: 90%;
padding-right: 0;
padding-left: 0;
}
}
@media (max-width: 767px) {
.region-toast-bar {
padding-top: 3px;
}
.region-toast {
gap: 8px;
padding: 6px 10px;
}
.region-toast p {
font-size: 13px;
}
}
.specs-region-title {
margin: 30px 0 0;
color: rgb(52, 52, 52);
font-family: "Saira Extra Condensed", sans-serif;
font-weight: 600;
font-size: 48px;
line-height: 42px;
text-transform: uppercase;
}
.gridtable {
margin: 20px 0;
width: 100%;
overflow-x: auto;
/* overflow-x: scroll; */
position: relative;
/* -ms-overflow-style: none; */
}
/* .gridtable::-webkit-scrollbar {
width: 0 !important;
display: none;
} */
.gridtable-new:after {
content: "";
width: 62px;
height: 100%;
background: url(../images/table_shadow.png) no-repeat right center;
position: absolute;
top: 0;
right: 0;
pointer-events: none;
}
.mobile-foot .error-message {
position: absolute;
left: 0;
bottom: -20px;
font-size: 14px;
}
.feature_mob_cont {
display: none;
}
.feature_desk_cont {
display: block;
}
/* .tire {
transform: translate(-50%, -10%) !important;
} */
.ar .single-item .slick-prev {
left: inherit;
right: 0;
transform: rotate(180deg);
}
.ar .single-item .slick-next {
right: inherit;
left: 0;
transform: rotate(180deg);
}
.ar .zoomContainer {
left: inherit !important;
right: 182px;
}
.ar .tire-border:first-child .tyre-container {
border-right: none;
}
.ar .list-content .active {
padding-right: 20px;
}
.ar .list-content li::after {
right: inherit;
left: -12px;
}
.ar .video_section {
width: 44.5%;
right: inherit;
left: 0;
}
.ar .heading-fixed {
left: inherit;
right: 12px;
}
.ar .vision_img {
clip-path: polygon(
0 0,
95% 0,
95% 24%,
100% 30%,
100% 100%,
5% 100%,
0 94%
);
}
.ar .mission_img {
clip-path: polygon(
0 0,
95% 0,
95% 39%,
100% 46%,
100% 100%,
5% 100%,
0 94%
);
}
.ar .values_img {
clip-path: polygon(
0 0,
95% 0,
95% 65%,
100% 73%,
100% 100%,
5% 100%,
0 94%
);
}
.ar .filelabel img {
margin-left: 14px;
}
.ar .about_get_in_touch_sect .get_in_touch_left p {
text-align: right;
}
.no_data p {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 18px;
line-height: 25px;
letter-spacing: 0.9px;
color: #343434;
font-weight: 500;
}
.tire-wear {
padding: 80px 0 106px 0;
}
.wet-grip {
text-align: center;
}
.wet-grip h3 {
font-family: "Saira Extra Condensed", sans-serif;
font-size: 48px;
font-weight: 600;
line-height: 88%;
color: #343434;
text-transform: capitalize;
padding-bottom: 8px;
}
.wet-grip p {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 16px;
line-height: 25px;
font-weight: 500;
color: #6d6d6d;
}
.tire-spec {
padding: 55px 0 0 0;
position: relative;
}
.tire-spec h3 {
font-family: "Saira Extra Condensed", sans-serif;
font-size: 36px;
line-height: 88%;
font-weight: 600;
padding-bottom: 8px;
}
.tire-spec img {
width: 274px;
height: auto;
padding-bottom: 27px;
clip-path: polygon(13% 0, 100% 0, 100% 30%, 100% 80%, 80% 96%, 34% 100%, 0 100%, 0 13%);
}
.tire-spec strong {
font-family: "Schibsted Grotesk", sans-serif;
font-size: 18px;
line-height: 25px;
font-weight: 700;
color: #bb0000;
display: flex;
justify-content: center;
}
.tire-spec-grip {
display: flex;
align-items: center;
gap: 54px;
}
.tire-spec::after {
position: absolute;
display: block;
content: "";
width: 45px;
height: 23px;
top: 52%;
left: 280px;
background: url("../images/tire-spec-arrow.svg") no-repeat center;
z-index: 1;
}
.tire-spec:last-child::after {
display: none;
}
.ru .list-content h3 {
font-size: 59px;
}
.error-content h3 {
text-align: center;
font-size: 70px;
line-height: 100%;
margin-top: 20px;
margin-bottom: 30px;
color: #fff;
font-family: "Saira Extra Condensed", sans-serif;
}
.error-content p {
font-size: 40px;
text-align: center;
margin-bottom: 30px;
color: #fff;
font-family: "Saira Extra Condensed", sans-serif;
}
.error-content small {
font-size: 20px;
text-align: center;
color: #fff;
font-family: "Schibsted Grotesk", sans-serif;
}
.error-content img {
width: 100px;
height: 100px;
margin: 0 auto;
}
.error-content {
padding: 230px 0 50px 0;
text-align: center;
}
.error-sect {
background:
linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
linear-gradient(180deg, #330a0a 12.8%, #5b1313 106.36%);
}
.select-dropdown.tire-size .select-dropdown__list-item {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
/* .select-dropdown.tire-size .size-checkbox {
pointer-events: none;
width: 15px;
height: 15px;
border: 1px solid #d5d5d5;
border-radius: 3px;
}
.select-dropdown.tire-size .size-checkbox:checked {
background: #d5d5d5;
} */
.select-dropdown.tire-size .select-dropdown__list-item {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
/* Hide native checkbox */
.select-dropdown.tire-size .size-checkbox {
display: none;
}
/* Custom box */
.select-dropdown.tire-size .custom-checkbox {
width: 15px;
height: 15px;
border: 1px solid rgb(213, 213, 213);
border-radius: 3px;
position: relative;
transition: all 0.2s ease;
}
/* Tick mark */
.select-dropdown.tire-size .custom-checkbox::after {
content: "";
position: absolute;
width: 5px;
height: 10px;
border: solid #000;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
top: 0;
left: 4px;
opacity: 0;
}
/* Checked state */
.select-dropdown.tire-size .size-checkbox:checked + .custom-checkbox {
background: rgb(213, 213, 213);
border-color: rgb(213, 213, 213);
}
.select-dropdown.tire-size .size-checkbox:checked + .custom-checkbox::after {
opacity: 1;
}
.select-dropdown__list label {
display: flex;
align-items: center;
cursor: pointer;
gap: 10px;
}
.select-dropdown__list input[type="checkbox"] {
display: none;
}
/* custom box */
.custom-check {
width: 15px;
height: 15px;
border: 1px solid rgb(213, 213, 213);
border-radius: 3px;
position: relative;
}
/* tick */
.custom-check::after {
content: "";
position: absolute;
width: 5px;
height: 10px;
border: solid #000;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
top: 0;
left: 4px;
opacity: 0;
}
/* checked state */
input[type="checkbox"]:checked + .custom-check {
background: rgb(213, 213, 213);
border-color: rgb(213, 213, 213);
}
input[type="checkbox"]:checked + .custom-check::after {
opacity: 1;
}
.select-dropdown.tire-size .select-dropdown__list {
max-height: 250px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.3) transparent;
clip-path: none;
}
.select-dropdown.tire-size .select-dropdown__list::-webkit-scrollbar {
width: 5px !important;
display: block !important;
}
.select-dropdown.tire-size .select-dropdown__list::-webkit-scrollbar-track {
background: transparent;
}
.select-dropdown.tire-size .select-dropdown__list::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.3);
border-radius: 3px;
}
.custom-shape{
clip-path: polygon(0 0, 100% 1%, 100% 85%, 90% 100%, 0 100%, 0% 50%);
}
.custom-shape-2{
clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%, 0 15%);
}
.career-hero{
padding: 50px 0;
background-color: #000;
}
/******************** Responsive Start Here **************************/
@media screen and (max-width: 2560px) {
.navbar-light .navbar-nav .nav-link,
.navbar-nav li a {
padding: 23px 6px !important;
}
.navbar-nav li:last-child a.nav-link {
padding: 23px 8px !important;
}
.about-us {
height: 100vh;
}
.about-us img {
margin: 90px 0 0;
}
.fr .navbar-nav li a {
font-size: 14px;
}
.fr .about-us small,
.it .about-us small {
font-size: 55px;
line-height: 62px;
}
.it .navbar-nav li a,
.it .navbar-nav li .sub-menu a,
.pt .navbar-nav li a,
.pt .navbar-nav li .sub-menu a,
.es .navbar-nav li a,
.es .navbar-nav li .sub-menu a,
.de .navbar-nav li a,
.de .navbar-nav li .sub-menu a {
font-size: 14px;
}
.pt .about-us small {
font-size: 56px;
line-height: 62px;
}
.pt .product-content h3 {
line-height: 42px;
padding-top: 5px;
}
.pt .subscribe_btn {
font-size: 16px;
}
.es .about-us img {
margin: 250px 0 0;
}
.es .navbar-nav li a {
font-size: 14px;
}
.es .about-us small {
font-size: 45px;
line-height: 48px;
}
.es .about-text {
width: 70%;
}
.es .product-content h3 {
line-height: 40px;
padding-top: 5px;
}
.de .about-us img {
margin: 250px 0 0;
}
.de .navbar-nav li a {
font-size: 14px;
}
.de .about-us small {
font-size: 45px;
line-height: 48px;
}
.de .about-text {
width: 70%;
}
.de .product-content h3 {
line-height: 40px;
padding-top: 5px;
}
.pl .about-us img {
margin: 250px 0 0;
}
.pl .navbar-nav li a {
font-size: 14px;
}
.pl .about-us small {
font-size: 45px;
line-height: 48px;
}
.pl .about-text {
width: 70%;
}
.pl .product-content h3 {
line-height: 40px;
padding-top: 5px;
}
.navbar-nav li .region-inner a {
/* padding: 5px !important; */
font-size: 18px;
}
.about-us small {
font-size: 51px;
line-height: 65px;
}
.heading-fixed {
top: 37%;
}
.zoomContainer {
width: 540px !important;
height: 540px !important;
left: 493px !important;
}
.zoomLens {
width: 100px !important;
height: 100px !important;
}
}
@media screen and (max-width: 1920px) {
.navbar-light .navbar-nav .nav-link,
.navbar-nav li a {
padding: 23px 6px !important;
}
.navbar-nav li:last-child a.nav-link {
padding: 23px 8px !important;
}
.ar .zoomContainer {
left: inherit !important;
right: 245px;
}
/* .about-us::after {
bottom: 213px;
} */
/* .tip-slider-wrapper {
padding-left: 7%;
} */
.tire img {
width: 100%;
height: 730px;
/* padding-top: 40px; */
}
.tire {
width: 100%;
height: 100%;
margin-top: -30px;
}
/* .features-section {
padding-top: 30px;
} */
.left-img {
top: 145px;
left: 126px;
}
.right-img {
top: 145px;
right: 94px;
}
.certifi-icons {
gap: 13px;
}
.single-item .slick-slide img {
width: 540px;
height: auto;
}
.zoomContainer {
/* width: 430px !important;
height: 540px !important;
left: 300px !important; */
width: 540px !important;
height: 540px !important;
left: 350px !important;
}
.first-section {
background-position-y: 108%;
height: 100vh;
}
.zoomLens {
width: 80px !important;
height: 80px !important;
}
.zoomWindow {
width: 540px !important;
height: 450px !important;
left: 430px !important;
top: 40px !important;
}
.exp-banner {
height: calc(100vh - 107px);
}
.tip-slider-wrapper .slick-next {
right: 19.5%;
}
.tip-slider-wrapper .slick-prev {
right: 26%;
}
.ar .tip-slider-wrapper .slick-next {
left: 19.5%;
right: inherit;
transform: rotate(180deg);
}
.ar .tip-slider-wrapper .slick-prev {
left: 26%;
right: inherit;
transform: rotate(180deg);
}
.grid-sizer,
.grid-item {
width: 31.3333%; /* 3 columns */
}
.fr .about-us img {
margin: 150px 0 0;
}
.fr .navbar-nav li a {
font-size: 14px;
}
.fr .about-us small {
font-size: 41px;
line-height: 48px;
}
.fr .product-content h3 {
font-size: 35px;
line-height: 42px;
}
.fr .nav-tabs a {
font-size: 14px;
}
.fr .tyre-finder-content h4 {
font-size: 38px;
line-height: 42px;
}
.fr .built_cont_left h3 {
font-size: 42px;
line-height: 46px;
}
.fr .list-content h3 {
font-size: 86px;
line-height: 77px;
}
.fr .about-us img {
margin: 180px 0 0;
}
.it .about-us small {
font-size: 41px;
line-height: 48px;
}
.it .product-content h3 {
font-size: 35px;
line-height: 42px;
}
.it .nav-tabs a {
font-size: 13px;
}
.it .tyre-finder-content h4 {
font-size: 38px;
line-height: 42px;
}
.it .built_cont_left h3 {
font-size: 42px;
line-height: 46px;
}
.it .list-content h3 {
font-size: 86px;
line-height: 77px;
}
.it .about-us img {
margin: 180px 0 0;
}
.pt .about-us small {
font-size: 41px;
line-height: 48px;
}
.pt .product-content h3 {
font-size: 35px;
line-height: 42px;
}
.pt .nav-tabs a {
font-size: 13px;
}
.pt .tyre-finder-content h4 {
font-size: 38px;
line-height: 42px;
}
.pt .built_cont_left h3 {
font-size: 42px;
line-height: 46px;
}
.pt .list-content h3 {
font-size: 86px;
line-height: 77px;
}
.pt .about-us img {
margin: 180px 0 0;
}
.it .navbar-nav li a,
.it .navbar-nav li .sub-menu a,
.pt .navbar-nav li a,
.pt .navbar-nav li .sub-menu a,
.es .navbar-nav li a,
.es .navbar-nav li .sub-menu a,
.de .navbar-nav li a,
.de .navbar-nav li .sub-menu a,
.pl .navbar-nav li a,
.pl .navbar-nav li .sub-menu a {
font-size: 14px;
}
.it .product-content h3,
.es .product-content h3,
.de .product-content h3,
.pl .product-content h3 {
line-height: 40px;
padding-top: 5px;
}
.es .about-us img {
margin: 250px 0 0;
}
.es .navbar-nav li a {
font-size: 14px;
}
.es .about-us small {
font-size: 45px;
line-height: 48px;
}
.es .about-text {
width: 70%;
}
.es .about-us small {
font-size: 41px;
line-height: 48px;
}
.es .product-content h3 {
font-size: 35px;
line-height: 42px;
}
.es .nav-tabs a {
font-size: 13px;
}
.es .tyre-finder-content h4 {
font-size: 38px;
line-height: 42px;
}
.es .built_cont_left h3 {
font-size: 38px;
line-height: 41px;
}
.es .list-content h3 {
font-size: 86px;
line-height: 77px;
}
.es .about-us img {
margin: 180px 0 0;
}
.de .about-us img {
margin: 280px 0 0;
}
.de .navbar-nav li a {
font-size: 13px;
}
.de .about-us small {
font-size: 45px;
line-height: 47px;
}
.de .about-text {
width: 70%;
}
.de .about-us {
background-position-y: 110%;
}
.de .footer-text span {
font-size: 33px;
line-height: 40px;
}
.de .list-content h3 {
font-size: 75px;
line-height: 80px;
}
.de .about-us small {
font-size: 41px;
line-height: 48px;
}
.de .product-content h3 {
font-size: 35px;
line-height: 42px;
}
.de .nav-tabs a {
font-size: 13px;
}
.de .tyre-finder-content h4 {
font-size: 38px;
line-height: 42px;
}
.de .built_cont_left h3 {
font-size: 42px;
line-height: 46px;
}
.de .list-content h3 {
font-size: 75px;
line-height: 83px;
}
.de .about-us img {
margin: 180px 0 0;
}
.de .about-text {
width: 90% !important;
float: right;
padding-top: 50px;
}
.pl .about-us img {
margin: 120px 0 0;
width: 370px;
height: 370px;
}
.pl .navbar-nav li a {
font-size: 13px;
}
.pl .about-us small {
font-size: 40px;
line-height: 41px;
}
.pl .about-text {
width: 81%;
}
.pl .tire-content h4 {
font-size: 33px;
line-height: 33px;
}
.pl .about-us {
background-position-y: 110%;
}
.pl .footer-text span {
font-size: 33px;
line-height: 40px;
}
.pl .about-us small {
font-size: 41px;
line-height: 48px;
}
.pl .product-content h3 {
font-size: 35px;
line-height: 42px;
}
.pl .nav-tabs a {
font-size: 13px;
}
.pl .tyre-finder-content h4 {
font-size: 38px;
line-height: 42px;
}
.pl .built_cont_left h3 {
font-size: 42px;
line-height: 46px;
}
.pl .list-content h3 {
font-size: 86px;
line-height: 77px;
}
.pl .about-us img {
margin: 180px 0 0;
}
.navbar-nav li .region-inner a {
/* padding: 5px !important; */
font-size: 18px;
}
.about-us small {
font-size: 51px;
line-height: 65px;
}
.about-us img {
margin: 90px 0 0;
}
.heading-fixed {
top: 37%;
}
.ru .navbar-light .navbar-nav .nav-link,
.ru .navbar-nav li a {
padding: 23px 5px !important;
}
.ru .navbar-nav li .region-inner a {
padding: 0 5px !important;
}
.ru .about_banner_sect h1 {
font-size: 52px;
}
.ru .heading-fixed span,
.ru .heading-fixed small {
font-size: 31px;
line-height: 40px;
}
.ru .get_in_touch_right label {
width: max-content;
}
.ru .subscribe_btn {
gap: 6px;
}
.ru .about-us small {
font-size: 30px;
line-height: 35px;
}
.ru .about-us img {
margin: 110px 0 0;
}
.ru .about_get_in_touch_sect .get_in_touch_left h4 {
font-size: 30px;
line-height: 40px;
}
.ru .product-content h3,
.ru .warranty-content h3,
.ru .tip-content h4,
.ru .why-content h3,
.ru .news-content h3,
.ru .built_cont_left h3,
.ru .growth_cont h4,
.ru .solution-content h3 {
font-size: 28px;
line-height: 48px;
}
.ru .technology_cont h2 {
font-size: 22px;
line-height: 32px;
}
.ru .panel.intro h1 {
font-size: 30px;
line-height: 40px;
}
.ru .why-content h3,
.ru .built_cont_left h3 {
line-height: 38px;
}
.ru .footer-text span {
font-size: 18px;
line-height: 26px;
}
.ru .warranty-content small {
padding-bottom: 0;
}
.ru .warr-container h4 {
font-size: 15px;
line-height: 22px;
letter-spacing: 0.7px;
}
.ru .tire-content h4 {
font-size: 24px;
line-height: 37px;
}
.ru .tyre-finder-content .tyre-selector {
display: flex;
gap: 30px;
}
.ru .prod-button.text-clr-chnge {
width: max-content;
}
.ru .footer-text span {
font-size: 33px;
line-height: 40px;
}
.ru .about-us small {
font-size: 41px;
line-height: 48px;
}
.ru .product-content h3 {
font-size: 28px;
line-height: 32px;
}
.ru .nav-tabs a {
font-size: 13px;
}
.ru .tyre-finder-content h4 {
font-size: 38px;
line-height: 42px;
}
.ru .built_cont_left h3 {
font-size: 42px;
line-height: 46px;
}
.ru .list-content h3 {
font-size: 51px;
line-height: 56px;
}
.ru .about-us img {
margin: 180px 0 0;
}
.fr .about-text {
width: 100%;
}
}
@media screen and (max-width: 1600px) {
.navbar-light .navbar-nav .nav-link,
.navbar-nav li a {
padding: 23px 6px !important;
}
.navbar-nav li:last-child a.nav-link {
padding: 23px 8px !important;
}
/* .about-us::after {
bottom: 213px;
} */
/* .tip-slider-wrapper {
padding-left: 7%;
} */
.tire img {
width: 100%;
height: 600px;
/* padding-top: 40px; */
}
.tire {
width: 100%;
height: 600px;
margin-top: 0;
}
/* .features-section {
padding-top: 30px;
} */
.left-img {
top: 132px;
left: 126px;
}
.right-img {
top: 132px;
right: 94px;
}
.single-item .slick-slide img {
width: 340px;
height: auto;
}
.first-section {
background-position-y: 108%;
height: 100%;
}
.first-content {
padding: 55px 0 125px 0;
}
.zoomLens {
width: 100px !important;
height: 100px !important;
}
.zoomWindow {
width: 550px !important;
height: 450px !important;
left: 330px !important;
top: -25px !important;
}
.exp-banner {
height: calc(100vh - 107px);
}
.tip-slider-wrapper .slick-next {
right: 10.5%;
}
.tip-slider-wrapper .slick-prev {
right: 16%;
}
.about-us small {
font-size: 50px;
line-height: 60px;
}
.ru .footer-text span {
font-size: 15px;
}
.ru .footer-text input {
width: 210px;
}
.ru .footer-text small {
font-size: 12px;
}
/* .ru .tip-content h4, .ru .news-content h3, .ru .why-content h3 {
font-size: 34px;
line-height: 48px;
} */
.fr .navbar-nav li a {
font-size: 14px;
}
.it .navbar-nav li a,
.it .navbar-nav li .sub-menu a,
.pt .navbar-nav li a,
.pt .navbar-nav li .sub-menu a,
.es .navbar-nav li a,
.es .navbar-nav li .sub-menu a {
font-size: 14px;
}
.de .navbar-nav li a,
.de .navbar-nav li .sub-menu a,
.pl .navbar-nav li a,
.pl .navbar-nav li .sub-menu a {
font-size: 13px;
}
.es .about-text {
width: 75%;
float: right;
padding-top: 50px;
}
.es .about-us {
background-position-y: 120%;
}
.es .about-us img {
margin: 270px 0 0;
}
.es .warr-container h4 {
font-size: 16px;
line-height: 23px;
}
.de .about-text {
width: 63%;
float: right;
padding-top: 50px;
}
.de .about-us {
background-position-y: 125%;
}
.de .about-us img {
margin: 300px 0 0;
}
.de .warr-container h4 {
font-size: 16px;
line-height: 23px;
}
.about-us .container::after {
width: 100%;
left: -100px;
}
.es .about-us small {
font-size: 42px;
line-height: 45px;
}
.de .about-us small {
font-size: 42px;
line-height: 45px;
}
.pl .about-text {
width: 63%;
float: right;
padding-top: 50px;
}
.pl .about-us {
background-position-y: 125%;
}
.pl .about-us img {
margin: 150px 0 0;
}
.pl .warr-container h4 {
font-size: 16px;
line-height: 23px;
}
.pl .about-us small {
font-size: 33px;
line-height: 35px;
}
.pl .tire-content h4 {
font-size: 33px;
line-height: 35px;
}
.navbar-nav li .region-inner a {
/* padding: 5px !important; */
font-size: 18px;
}
.about-us img {
margin: 50px 0 0;
}
.heading-fixed {
top: 35.5%;
}
.feat-con {
width: 95%;
}
.feat-con strong {
font-size: 16px;
line-height: 22px;
}
.certifi-icons {
gap: 13px;
}
.panel {
flex: 0 0 99vw;
}
.panel_cont .text-start {
width: 39%;
}
.zoomContainer {
width: 340px !important;
height: 340px !important;
left: 262px !important;
}
.pl .tyre-finder-content h4 {
font-size: 38px;
line-height: 38px;
}
}
@media screen and (max-width: 1440px) {
.nav-wrapper {
display: flex;
justify-content: center;
}
.container_in,
.navbar-glass {
width: 1320px;
}
.tip-slider-wrapper .slick-next {
right: 5.3%;
top: -86px;
}
.tip-slider-wrapper .slick-prev {
right: 11%;
}
.tyre-container {
padding: 40px 20px;
}
.tire-card .tyre-content li img {
height: 24px;
}
.fr .navbar-light .navbar-nav .nav-link,
.fr .navbar-nav li a {
padding: 23px 3px !important;
font-size: 13px;
}
.fr .navbar-nav li .region-inner a {
padding: 5px !important;
font-size: 16px;
}
.fr .about-us small {
font-size: 43px;
line-height: 53px;
}
.fr .about-us img {
width: 290px;
height: 290px;
margin: 180px 0 0;
}
.fr .warr-container h4 {
font-size: 16px;
line-height: 22px;
}
.fr .warr-container p {
font-size: 15px;
line-height: 23px;
}
.fr .navbar-nav li:last-child a.nav-link {
padding: 23px 6px !important;
font-size: 13px;
}
.it .navbar-nav li a,
.it .navbar-nav li .sub-menu a,
.pt .navbar-nav li a,
.pt .navbar-nav li .sub-menu a,
.es .navbar-nav li a,
.es .navbar-nav li .sub-menu a,
.de .navbar-nav li a,
.de .navbar-nav li .sub-menu a,
.pl .navbar-nav li a,
.pl .navbar-nav li .sub-menu a {
font-size: 13px;
}
.es .about-text {
width: 75%;
float: right;
padding-top: 50px;
}
.es .about-us {
background-position-y: 120%;
}
.es .about-us img {
margin: 230px 0 0;
}
.es .warr-container h4 {
font-size: 16px;
line-height: 23px;
}
.about-us .container::after {
left: -70px;
width: 100%;
}
.de .about-text {
width: 75%;
float: right;
padding-top: 50px;
}
.de .about-us {
background-position-y: 120%;
}
.de .about-us img {
margin: 230px 0 0;
}
.de .warr-container h4 {
font-size: 16px;
line-height: 23px;
}
.pl .about-text {
width: 75%;
float: right;
padding-top: 50px;
}
.pl .about-us {
background-position-y: 120%;
}
.pl .about-us img {
margin: 230px 0 0;
}
.pl .warr-container h4 {
font-size: 16px;
line-height: 23px;
}
.navbar-nav li .region-inner a {
/* padding: 5px !important; */
font-size: 18px;
}
.heading-fixed {
top: 34.5%;
}
.ru .navbar-nav li a {
font-size: 15px;
}
.ru .about-us small {
font-size: 25px;
line-height: 29px;
}
.ru .about-us img {
margin: 50px 0 0;
}
}
@media screen and (max-width: 1366px) {
.container_in,
.navbar-glass {
width: 1180px;
}
.nav-wrapper {
display: flex;
justify-content: center;
}
.navbar-nav li:last-child a.nav-link {
padding: 23px 8px !important;
}
.fr .navbar-light .navbar-nav .nav-link,
.fr .navbar-nav li a {
padding: 23px 3px !important;
font-size: 13px;
}
.fr .navbar-nav li .region-inner a {
padding: 5px !important;
font-size: 16px;
}
.fr .about-us small {
font-size: 43px;
line-height: 53px;
}
.fr .about-us img {
width: 290px;
height: 290px;
margin: 140px 0 0;
}
.fr .warr-container h4 {
font-size: 16px;
line-height: 22px;
}
.fr .warr-container p,
.it .warr-container p {
font-size: 15px;
line-height: 23px;
}
.fr .navbar-nav li:last-child a.nav-link {
padding: 23px 6px !important;
font-size: 13px;
}
.navbar-light .navbar-nav .nav-link,
.navbar-nav li a {
padding: 23px 6px !important;
}
.ru .navbar-light .navbar-nav .nav-link,
.ru .navbar-nav li a {
padding: 23px 5px !important;
}
.ru .about_banner_sect h1 {
font-size: 52px;
}
.about-us small {
font-size: 42px;
line-height: 53px;
}
.about-us {
padding: 80px 0 196px 0;
}
.warr-container h4 {
font-size: 16px;
line-height: 21px;
}
.product-content h3,
.warranty-content h3,
.why-content h3,
.tire-content h4,
.tip-content h4,
.news-content h3 {
font-size: 43px;
line-height: 48px;
}
.tip-slider-wrapper {
padding-top: 0 !important;
}
.warranty-content small {
padding-bottom: 5px;
}
.select-dropdown__button {
width: 345px;
font-size: 15px;
background-size: 100%;
}
.t-container p {
font-size: 14px;
line-height: 16px;
}
.profile h5 {
font-size: 16px;
line-height: 23px;
}
.find-button,
.warr-button,
.prod-button {
font-size: 16px;
line-height: 26px;
}
.warranty-sect {
padding: 80px 0;
}
.warr-container p {
width: 100%;
font-size: 14px;
line-height: 23px;
}
.product-nav {
padding-top: 29px;
}
.nav-tabs a {
font-size: 15px;
line-height: 21px;
}
.product-content .slider.responsive .tyre-content li img {
height: 24px;
}
.tyre-container p {
font-size: 14px;
line-height: 24px;
}
.warr-container p br {
display: none;
}
.tip-slider-wrapper .slick-next {
right: 10%;
}
.tip-slider-wrapper .slick-prev {
left: inherit;
right: 17%;
}
.card h4 {
font-size: 16px;
line-height: 23px;
}
.card p {
font-size: 14px;
line-height: 20px;
}
.footer-text span {
font-size: 38px;
}
.footer-text input {
width: 241px;
}
.subscribe_btn {
width: max-content;
font-size: 15px;
gap: 12px;
height: 43px;
background-size: 100% 100%;
padding: 15px !important;
}
.navbar-light .navbar-nav .nav-link {
font-size: 14px;
}
.navbar-brand {
width: 160px;
}
.banner_cont .slider.slider-thumb {
bottom: 60px;
}
.banner-content span {
top: 240px;
}
.banner_cont .slider.slider-thumb,
.banner-content span {
width: 85%;
}
.tyre-finder-content .select-input,
.tyre-finder-content .select-dropdown__button {
width: 213px;
}
.tyre-finder-content .tyre-selector {
gap: 30px;
}
.prod-button.text-clr-chnge {
width: max-content;
}
.tyre-finder-section #tabs-nav li a {
font-size: 16px;
line-height: 26px;
}
.tire-card::before {
left: 372px;
}
.tire-card::after {
right: 371px;
}
.tyre-container {
padding: 40px 20px;
}
.tire-card .tyre-content li img {
height: 24px;
}
.single-item .slick-slide img {
width: 390px;
height: auto;
}
.zoomLens {
width: 70px !important;
height: 70px !important;
}
.first-text h4 {
font-family: "Saira Extra Condensed", sans-serif;
font-size: 84px;
line-height: 100%;
}
.zoomWindow {
width: 500px !important;
height: 400px !important;
left: 390px !important;
top: -15px !important;
background-size: 2000px auto !important;
}
.list-content {
/* margin-bottom: 20px; */
}
.tire img {
width: 100%;
height: 530px;
}
.first-content {
padding: 55px 0 175px 0;
}
.first-text .mt-5 {
margin-top: 2rem !important;
}
.first-text small {
margin-bottom: 20px;
}
.left-img {
top: 101px;
left: 66px;
}
.right-img {
top: 101px;
right: 54px;
}
.grid-sizer,
.grid-item {
width: 31.2%; /* 3 columns */
}
.about-text {
width: 86%;
float: right;
padding-top: 70px;
}
.about-us {
background-position-y: 110%;
}
.ru .navbar-nav li a {
font-size: 14px;
}
.ru .about-us small {
font-size: 24px;
line-height: 29px;
}
.ru .product-content h3,
.ru .warranty-content h3,
.ru .tip-content h4,
.ru .why-content h3,
.ru .news-content h3 {
font-size: 24px;
line-height: 34px;
}
/* .ru .warr-container p {
font-size: 14px;
line-height: 25px;
}
.ru .warr-container h4 {
font-size: 15px;
line-height: 22px;
} */
/* .ru .tip-content h4, .ru .news-content h3, .ru .why-content h3, .ru .tire-content h4 {
font-size: 30px;
line-height: 40px;
} */
.ru .why-text-item h4 {
font-size: 16px;
line-height: 22px;
}
.ru .why-text-item p {
font-size: 14px;
line-height: 21px;
}
.pt .why-content h3 {
line-height: 38px;
}
.ru .footer-text span {
font-size: 15px;
}
.ru .footer-text input {
width: 210px;
}
.ru .footer-text small {
font-size: 12px;
}
.ar .about-us small {
font-size: 40px;
line-height: 42px;
}
.ar .tyre-finder-content .select-input,
.ar .tyre-finder-content .select-dropdown__button {
width: 189px;
}
.ar .tire-border:nth-child(3n) .tyre-container {
border-right: 1px solid #dfdfdf;
}
.ar .zoomContainer {
left: inherit !important;
right: 182px;
}
.ar .about-text {
padding-top: 30px;
}
.ar .tyre-finder-content h4 {
padding-right: 0;
padding-left: 40px;
}
.about-us .container::after {
width: 100%;
left: -100px;
}
.it .navbar-nav li a,
.it .navbar-nav li .sub-menu a,
.pt .navbar-nav li a,
.pt .navbar-nav li .sub-menu a,
.pl .navbar-nav li a,
.pl .navbar-nav li .sub-menu a {
font-size: 13px;
}
.es .navbar-nav li a,
.es .navbar-nav li .sub-menu a,
.de .navbar-nav li a,
.de .navbar-nav li .sub-menu a {
font-size: 12px;
}
.it .about-us small {
font-size: 48px;
line-height: 53px;
}
.pt .about-us small {
font-size: 47px;
line-height: 52px;
}
.it .warr-container h4 {
font-size: 17px;
line-height: 22px;
}
.es .about-us small {
font-size: 43px;
line-height: 44px;
}
.es .about-text {
width: 75%;
float: right;
padding-top: 50px;
}
.es .about-us {
background-position-y: 125%;
}
.es .about-us img {
margin: 250px 0 0;
}
.es .warr-container h4 {
font-size: 16px;
line-height: 23px;
}
.de .about-us small {
font-size: 40px;
line-height: 41px;
}
.de .about-text {
width: 69%;
float: right;
padding-top: 50px;
}
.de .about-us {
background-position-y: 125%;
}
.de .about-us img {
margin: 250px 0 0;
}
.de .warr-container h4 {
font-size: 16px;
line-height: 23px;
}
.de .navbar-nav li a {
padding: 23px 3px !important;
}
.pl .about-us small {
font-size: 32px;
line-height: 35px;
}
.pl .tire-content h4 {
font-size: 30px;
line-height: 32px;
}
.pl .about-text {
width: 69%;
float: right;
padding-top: 50px;
}
.pl .about-us {
background-position-y: 125%;
}
.pl .about-us img {
margin: 152px 0 0;
}
.pl .warr-container h4 {
font-size: 16px;
line-height: 23px;
}
.pl .navbar-nav li a {
padding: 23px 2px !important;
}
.pl .product-content h3 {
font-size: 40px;
line-height: 42px;
}
.pl .tyre-finder-content .select-dropdown__button {
width: 205px;
}
.pl .tyre-finder-content .tyre-selector {
gap: 15px;
}
.pl .tyre-finder-content h4 {
padding-right: 30px;
}
.navbar-nav li .region-inner a {
/* padding: 5px !important; */
font-size: 16px;
}
.article_details_banner .event_details small {
font-size: 14px;
}
.solution-content.event_details h3 {
font-size: 44px;
line-height: 46px;
}
.event_para {
width: 95%;
}
.event_para p {
font-size: 15px;
line-height: 21px;
}
.event_details_right img {
height: 400px;
}
.event_info {
padding: 10px 0 20px;
}
.date_sect {
font-size: 14px;
line-height: 20px;
}
.event_details_blogs .card p {
font-size: 13px;
line-height: 18px;
}
.event_details_blogs .prod-button {
font-size: 16px;
}
.video_section {
width: 44.5%;
min-height: 265px; /* match scaled-down image height at this breakpoint */
}
.panel img {
width: 580px;
height: 300px;
object-fit: cover;
}
.about-us img {
margin: 90px 0 0;
}
/* .عربي .about-us small {
font-size: 40px;
line-height: 45px;
}
.عربي .about-us img {
margin: 160px 0 0;
} */
.ar .zoomWindow {
width: 500px !important;
height: 400px !important;
left: inherit !important;
right: 400px !important;
top: -15px !important;
background-size: 2000px auto !important;
}
.ar .feat-con {
transform: none !important;
top: 0;
}
.ar .tire {
top: 0;
}
.ar .feature-card {
text-align: right;
}
.ar .multiple-items .slick-next {
right: inherit;
left: 74px;
}
.ar .multiple-items .slick-prev {
right: inherit;
left: 0px;
}
.vision_mission_slide .content img {
width: 568px;
height: 436px;
object-fit: cover;
}
.heading-fixed {
top: 200px;
}
.vision_mission_slide .text {
padding-top: 160px;
}
.select-dropdown {
width: 100%;
}
.select-dropdown__button {
width: 100%;
}
.tire-finder-section .select-input,
.home-tire-finders .select-dropdown {
width: 348px;
}
.feat-con {
height: 100%;
}
.feat-con strong {
font-size: 16px;
line-height: 22px;
}
.panel_cont .text-start {
width: 55%;
}
.zoomContainer {
width: 390px !important;
height: 390px !important;
left: 197px !important;
}
.content-details p {
font-size: 13px;
line-height: 19px;
padding-bottom: 12px;
}
.content-details p:last-child {
padding-bottom: 0;
}
.ru .tire-content h4 {
font-size: 22px;
line-height: 30px;
}
.fr .about-us small {
font-size: 25px;
line-height: 30px;
}
.fr .about-us {
height: 70vh;
}
.fr .about-us-wrapper {
height: 70vh;
}
.fr .product-content h3 {
font-size: 16px;
line-height: 24px;
}
.fr .nav-tabs a {
font-size: 8px;
}
.fr .navbar-nav li a {
padding: 23px 3px !important;
}
.fr .navbar-nav li .htmlCss-sub-menu.sub-menu li a {
padding: 3px !important;
}
.fr .built_cont_left h3 {
font-size: 26px;
line-height: 34px;
}
.fr .about_get_in_touch_sect .solution-content {
width: 90%;
}
.fr .footer-text small {
font-size: 8px;
line-height: 85%;
}
.it .about-us small {
font-size: 26px;
line-height: 34px;
}
.it .about-us {
height: 70vh;
}
.it .about-us {
padding: 80px 0 80px 0;
}
.it .about-us-wrapper {
height: 70vh;
}
.it .about-us img {
margin: 180px 0 0;
}
.it .product-content h3 {
font-size: 18px;
line-height: 24px;
}
.it .nav-tabs a {
font-size: 7px;
line-height: 9px;
letter-spacing: 0.5px;
}
.it .built_cont_left h3 {
font-size: 37px;
line-height: 40px;
}
.it .about_get_in_touch_sect .solution-content {
width: 90%;
}
.pt .about-us small {
font-size: 26px;
line-height: 34px;
}
.pt .about-us {
height: 70vh;
}
.pt .about-us {
padding: 80px 0 80px 0;
}
.pt .about-us-wrapper {
height: 70vh;
}
.pt .about-us img {
margin: 180px 0 0;
}
.pt .product-content h3 {
font-size: 18px;
line-height: 24px;
}
.pt .nav-tabs a {
font-size: 7px;
line-height: 9px;
letter-spacing: 0.5px;
}
.pt .built_cont_left h3 {
font-size: 37px;
line-height: 40px;
}
.pt .about_get_in_touch_sect .solution-content {
width: 90%;
}
.pt .tyre-finder-section #tabs-nav li a {
font-size: 10px;
}
.pt .select-dropdown__button {
width: 60%;
}
.tyre-finder-content h4 {
font-size: 29px;
line-height: 32px;
padding-top: 10px;
}
.pt .footer-text small {
font-size: 6px;
line-height: 92%;
}
.pt .built_cont_left h3 {
font-size: 32px;
line-height: 36px;
}
.es .about-us small {
font-size: 26px;
line-height: 34px;
}
.es .about-us {
height: 70vh;
}
.es .about-us {
padding: 80px 0 80px 0;
}
.es .about-us-wrapper {
height: 70vh;
}
.es .about-us img {
margin: 180px 0 0;
}
.es .product-content h3 {
font-size: 18px;
line-height: 24px;
}
.es .nav-tabs a {
font-size: 7px;
line-height: 9px;
letter-spacing: 0.5px;
}
.es .built_cont_left h3 {
font-size: 37px;
line-height: 40px;
}
.es .about_get_in_touch_sect .solution-content {
width: 90%;
}
.es .tyre-finder-section #tabs-nav li a {
font-size: 10px;
}
.es .select-dropdown__button {
width: 60%;
}
.es .footer-text small {
font-size: 6px;
line-height: 92%;
}
.es .built_cont_left h3 {
font-size: 32px;
line-height: 36px;
}
.es .about-us small {
font-size: 21px;
line-height: 33px;
}
.technology_img3 img {
width: 493px;
}
.features-content h4 {
padding-top: 60px;
}
@media screen and (max-width: 1280px) {
.nav-wrapper {
display: flex;
justify-content: center;
}
.banner_cont .slider.slider-thumb,
.banner-content span {
width: 85%;
}
.about-us .container::after {
width: 100%;
left: -40px;
}
.pt .warr-container h4 {
font-size: 16px;
line-height: 21px;
}
.pt .subscribe_btn {
font-size: 13px;
}
.es .about-us small {
font-size: 35px;
line-height: 40px;
}
.es .about-us h2 {
padding-top: 30px;
}
.es .about-text {
width: 68%;
float: right;
padding-top: 50px;
}
.es .navbar-nav li .sub-menu li {
padding: 6px 24px;
}
.de .about-us small {
font-size: 35px;
line-height: 36px;
}
.de .about-us h2 {
padding-top: 30px;
}
.de .about-text {
width: 68%;
float: right;
padding-top: 50px;
}
.de .navbar-nav li .sub-menu li {
padding: 6px 24px;
}
.de .footer-text span {
font-size: 30px;
}
.de .footer-text small {
font-size: 11px;
}
.pl .about-us small {
font-size: 30px;
line-height: 31px;
}
.pl .about-us img {
margin: 160px 0 0;
width: 300px;
height: 300px;
}
.pl .tire-content h4 {
font-size: 27px;
line-height: 28px;
}
.pl .about-us h2 {
padding-top: 30px;
}
.pl .about-text {
width: 68%;
float: right;
padding-top: 50px;
}
.pl .navbar-nav li .sub-menu li {
padding: 6px 24px;
}
.pl .navbar-nav li a {
padding: 17px 2px !important;
font-size: 12px;
}
.pl .footer-text span {
font-size: 30px;
}
.pl .footer-text small {
font-size: 11px;
}
.navbar-nav li .region-inner a {
/* padding: 5px !important; */
font-size: 16px;
}
.article_details_banner .event_details small {
font-size: 14px;
}
.solution-content.event_details h3 {
font-size: 44px;
line-height: 46px;
}
.event_para {
width: 95%;
}
.event_para p {
font-size: 15px;
line-height: 21px;
}
.event_details_right img {
height: 400px;
}
.event_info {
padding: 10px 0 20px;
}
.date_sect {
font-size: 14px;
line-height: 20px;
}
.event_details_blogs .card p {
font-size: 13px;
line-height: 18px;
}
.event_details_blogs .prod-button {
font-size: 16px;
}
.about-us img {
width: 280px;
height: 280px;
}
.about-us small {
font-size: 36px;
line-height: 46px;
}
.about-us img {
width: 250px;
height: 250px;
margin: 120px 0 0;
}
.product-nav ul.gap-4 {
gap: 1rem !important;
}
.nav-tabs a {
font-size: 14px;
line-height: 21px;
letter-spacing: 0.7px;
}
.product-content h3 {
font-size: 28px;
line-height: 38px;
}
.product-content small {
font-size: 12px;
line-height: 100%;
}
.warr-cont img {
width: 45px;
height: auto;
}
.warr-container h4 {
font-size: 16px;
line-height: 21px;
}
.warr-container p {
font-size: 13px;
line-height: 21px;
}
.prod-button,
.find-button {
font-size: 15px;
line-height: 24px;
}
.footer-text input {
width: 182px;
}
.footer-text small {
font-size: 12px;
}
.logo-group img {
width: 880px;
}
.t-container p {
font-size: 14px;
line-height: 22px;
}
.profile h5 {
font-size: 16px;
line-height: 23px;
}
.profile small {
font-size: 13px;
line-height: 22px;
}
/* .tip-slider .slick-slide img {
} */
.why-text-item h4 {
font-size: 16px;
line-height: 23px;
letter-spacing: 0.7px;
}
.why-text-item p {
font-size: 14px;
line-height: 22px;
}
.ru .product-content h3,
.ru .warranty-content h3,
.ru .tip-content h4,
.ru .why-content h3,
.ru .news-content h3 {
font-size: 20px;
line-height: 30px;
}
.heading-fixed {
top: 32%;
}
.vision_mission_slide .text {
padding-top: 170px;
}
.container_in,
.navbar-glass {
/* width: 1100px; */
width: 90%;
}
.navbar-nav li a,
.navbar-nav li .sub-menu a {
font-size: 12px;
}
.navbar-brand {
width: 140px;
}
.navbar-light .navbar-nav .nav-link,
.navbar-nav li a {
padding: 20px 6px !important;
}
.navbar-glass {
height: 60px;
}
.navbar-light .navbar-nav .nav-link,
.navbar-nav li a {
padding: 17px 6px !important;
}
.navbar-nav li {
height: 60px;
}
.navbar-nav li .sub-menu li {
height: auto;
line-height: 14px;
}
.navbar-nav li:last-child a.nav-link {
padding: 17px 8px !important;
}
.product-content h3,
.warranty-content h3,
.why-content h3,
.tire-content h4,
.tip-content h4,
.news-content h3 {
font-size: 40px;
line-height: 44px;
}
.tire-finder-section .select-input,
.home-tire-finders .select-dropdown {
width: 324px;
}
.select-dropdown {
width: 100%;
}
.select-dropdown__button {
width: 100%;
}
.select-dropdown__list-item {
font-size: 13px;
}
.footer-text span {
font-size: 44px;
}
.region-language-menu h3 {
font-size: 20px;
line-height: 25px;
letter-spacing: 1px;
}
.navbar-nav li .region-inner a {
/* padding: 5px !important; */
font-size: 16px;
line-height: 25px;
}
.get_in_touch_left {
width: 90%;
}
.about_banner_inner {
width: 80%;
}
.about_banner_sect h1 {
font-size: 55px;
padding-bottom: 50px;
}
.ru .about_get_in_touch_sect .get_in_touch_left h4 {
font-size: 27px;
line-height: 36px;
}
.ru .built_cont_left h3 {
font-size: 24px;
line-height: 35px;
}
.ru .about_banner_sect h1 {
font-size: 45px;
}
.about_banner_cont h3 {
font-size: 20px;
line-height: 28px;
width: 268px;
}
.about_banner_sect video {
height: 520px;
}
.about_banner_cont p,
.built_cont_left p,
.growth_cont p,
.panel.intro p {
font-size: 14px;
line-height: 20px;
}
.about_banner_sect {
height: 1120px;
}
.technology_cont h2,
.built_cont_left h3,
.about_get_in_touch_sect .get_in_touch_left h4,
.growth_cont h4,
.panel.intro h1 {
font-size: 40px;
line-height: 42px;
}
.leadership_sect p {
padding-top: 10px;
}
.build_blog_sect h5 {
font-size: 16px;
line-height: 19px;
letter-spacing: 0.7px;
}
.build_blog_sect p {
font-size: 13px;
line-height: 17px;
}
.tip-slider-wrapper .slick-prev,
.tip-slider-wrapper .slick-next {
top: -80px;
}
.about_get_in_touch_sect .get_in_touch_left {
width: 100%;
}
.about_get_in_touch_sect .get_in_touch_left h4 {
font-size: 35px;
line-height: 38px;
}
.get_in_touch_right .form-control {
font-size: 14px;
}
.panel_cont .text-start {
width: 50%;
}
.first-text small {
font-size: 17px;
line-height: 23px;
}
.custom-table.northamerica-custom th,
.custom-table.northamerica-custom td {
font-size: 12px;
}
.ru .navbar-nav li a {
font-size: 12px;
padding: 16px 2px !important;
}
.ru .about-text {
padding-top: 0;
}
.ru .about-us small {
font-size: 21px;
line-height: 24px;
}
.ru .tire-content h4 {
font-size: 21px;
line-height: 30px;
}
.ru .tyre-finder-content h4 {
font-size: 32px;
line-height: 42px;
}
.ru .navbar-nav li .sub-menu {
width: max-content;
}
.article_details_right {
width: 100%;
}
.related_article h5 {
font-size: 15px;
line-height: 21px;
}
.ar .tire-finder-section::after {
bottom: -80px;
height: 210px;
}
.es .about-us small {
font-size: 21px;
line-height: 33px;
}
.de .list-content h3 {
font-size: 42px;
line-height: 52px;
}
.de .about-us small {
font-size: 21px;
line-height: 33px;
}
.de .about-us {
height: 70vh;
}
.de .about-us-wrapper {
height: 70vh;
}
.de .nav-tabs a {
font-size: 8px;
}
.pl .about-us small {
font-size: 21px;
line-height: 30px;
}
.pl .about-us {
height: 70vh;
}
.pl .about-us-wrapper {
height: 70vh;
}
.pl .product-content h3 {
font-size: 23px;
line-height: 38px;
}
.pl .nav-tabs a {
font-size: 7px;
}
.pl .built_cont_left h3 {
font-size: 35px;
line-height: 39px;
}
.pl .list-content h3 {
font-size: 47px;
line-height: 54px;
}
.ru .list-content h3 {
font-size: 33px;
line-height: 43px;
}
.ru .get_in_touch_right label {
font-size: 10px;
}
.ru .navbar-nav li a {
font-size: 12px;
padding: 3px 2px !important;
}
.ru .about-us img {
margin: 220px 0 0;
}
.ru .about-us {
height: 70vh;
}
.ru .about-us-wrapper {
height: 70vh;
}
.ru .product-content h3 {
font-size: 14px;
line-height: 33px;
}
.ru .nav-tabs a {
font-size: 8px;
}
.ru .tyre-finder-section #tabs-nav li a {
font-size: 10px;
}
.ru .tyre-finder-content .tyre-selector {
display: flex;
gap: 15px;
}
.ru .tyre-finder-content h4 {
font-size: 19px;
line-height: 26px;
}
.ru .prod-button.text-clr-chnge {
margin: 12px auto 0 !important;
}
.ru .tyre-finder-content h4 {
padding-right: 19px;
}
.ru .tyre-finder-section #tabs-nav li a {
font-size: 10px;
}
.ru .footer-text span {
font-size: 10px;
}
.ru .footer-text small {
font-size: 4px;
}
.de .footer-text span {
font-size: 24px;
}
.features-content h4 {
padding-top: 60px;
}
}
@media screen and (max-width: 1024px) {
.container_in,
.navbar-glass {
width: 90%;
}
.banner_cont .slider.slider-content,
.banner_cont .slider-content::before,
.banner_cont .slider.slider-content img,
.banner_cont .slider.slider-content video {
height: 765px;
}
.banner_cont .slick-list,
.banner_cont .slick-track {
height: 100%;
}
.navbar-nav {
flex-direction: row;
margin-bottom: 0 !important;
}
.navbar-brand {
width: 120px;
}
.navbar-expand-lg .navbar-collapse {
width: 82%;
}
.navbar-nav li .arrow {
width: 6px;
}
.about-us small {
font-size: 26px;
line-height: 37px;
}
.product-content h3,
.warranty-content h3,
.why-content h3,
.tire-content h4,
.tip-content h4,
.news-content h3 {
font-size: 23px;
line-height: 31px;
}
.product-nav ul.gap-4 {
gap: 0.6rem !important;
}
.navbar-nav li a,
.navbar-nav li .sub-menu a {
font-size: 11px;
}
.navbar-light .navbar-nav .nav-link,
.navbar-nav li a {
padding: 17px 4px !important;
}
.region-language-menu h3 {
font-size: 17px;
line-height: 20px;
letter-spacing: 1px;
}
.navbar-nav li .region-inner a {
/* padding: 5px !important; */
font-size: 13px;
line-height: 18px;
}
.region-language-menu {
width: 690px;
}
.region-inner-wid {
width: 100%;
}
.tyre1 img {
height: auto;
}
.nav-tabs a {
font-size: 9px;
line-height: 15px;
letter-spacing: 0.5px;
}
.tyre1:after {
width: 100%;
height: 20px;
bottom: -10px;
}
.warr-container h4,
.warr-container p {
width: 100%;
}
.warr-cont img {
width: 35px;
height: auto;
}
.warr-text {
padding-left: 10px;
width: 100%;
}
.warr-container h4 {
font-size: 14px;
line-height: 19px;
}
.tire-finder-section .select-input,
.home-tire-finders .select-dropdown {
width: 224px;
}
.footer-text {
padding-top: 30px;
}
.profile small {
font-size: 13px;
line-height: 19px;
display: block;
}
.footer-text input {
width: 152px;
}
.subscribe_btn {
font-size: 13px;
height: 40px;
padding: 12px !important;
}
.list-content {
width: 360px;
}
.list-section {
background-position-x: 76% !important;
}
.list-content h3 {
font-size: 56px;
line-height: 63px;
}
.list-content p {
font-size: 15px;
line-height: 22px;
}
.tyre-finder-content h4 {
font-size: 37px;
line-height: 32px;
padding-top: 10px;
}
.select-dropdown__button {
font-size: 12px;
}
.tyre-finder-content .tyre-selector {
display: block;
}
.tyre-finder-content .select-input {
width: 163px;
}
.tyre-finder-content .select-input,
.tyre-finder-content .select-dropdown__button {
width: 160px;
}
.tyre-finder-content .select-input {
display: inline-block;
}
.prod-button.text-clr-chnge {
margin: 18px auto 0 !important;
}
.tyre-finder-section #tabs-nav li a {
font-size: 11px;
}
.tyre1:after {
bottom: 15px;
}
.prod-button text-clr-chnge {
display: none;
}
#load-more.prod-button.text-clr-chnge {
display: none !important;
}
.tyre-finder-content {
align-items: flex-start;
}
.list-section {
background-position-x: 86% !important;
}
.download_cont {
width: 290px;
height: 440px;
}
.download_cont img {
width: 226px;
height: 320px;
}
.about_banner_inner {
width: 85%;
}
.about_banner_sect video {
height: 450px;
}
.about_banner_cont h3 {
font-size: 18px;
line-height: 28px;
width: 271px;
}
.about_banner_sect {
height: 1080px;
}
.technology_img1 img {
height: 280px;
}
.technology_img2 img {
height: 345px;
}
.manufacturing_vedio {
height: 280px;
}
.technology_img3 img {
height: 265px;
}
.technology_sect {
padding: 80px 0 60px;
}
.vision_mission_slide .content img {
width: 518px;
}
.heading-fixed {
top: 35%;
}
.built_sect {
padding: 100px 0 70px;
}
.news-slide {
flex: 0 0 calc(50% - 20px);
}
.ru .footer-text span {
font-size: 13px;
}
.vedio-modal .modal-dialog {
max-width: 500px;
}
.why-text-item img {
height: auto;
}
.footer_sect {
padding-top: 255px;
}
.technology_cont .dis_chnge {
display: flex;
gap:20px;
justify-content: space-between;
position: relative;
margin-bottom: 1.5rem;
}
.features-content h4 {
padding-top: 60px;
}
}
@media screen and (max-width: 980px) {
.testimonial_sect {
padding: 115px 0 98px;
}
.tip-slider-wrapper .slick-prev:before,
.tip-slider-wrapper .slick-prev.slick-disabled:before,
.tip-slider-wrapper .slick-next:before,
.tip-slider-wrapper .slick-next.slick-disabled:before {
width: 26px;
height: 18px;
background-size: contain;
}
.t-content {
padding-top: 0;
}
.tip-slider-wrapper .slick-prev,
.tip-slider-wrapper .slick-next {
top: -66px;
}
.get_in_touch_sect {
background-position-x: 89%;
}
.get_in_touch_left {
width: 90%;
}
.logo-group img {
width: 700px;
}
.get_in_touch_sect {
background-position-x: 89%;
/* height: 244px; */
}
.get_in_touch_blogs {
padding: 80px 0px;
}
.get_in_touch_left {
width: 234px;
}
.footer-text {
padding-top: 240px;
}
.footer-text input {
width: 145px;
}
.logo-group {
gap: 150px;
padding-right: 150px;
}
.logo-group img {
width: 600px;
}
.subscribe_btn {
font-size: 13px;
line-height: 21px;
}
.footer-text span {
font-size: 28px;
}
.footer-text small {
font-size: 10px;
}
.hamburger {
display: flex;
}
.navbar-collapse {
position: absolute;
top: 100%; /* 👈 opens below navbar */
left: 0;
width: 100%;
background: #fff;
max-height: 0;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: max-height 0.4s ease;
z-index: 1102;
}
.navbar-collapse.active {
max-height: 100vh;
padding: 20px 0;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.sub-menu {
display: none;
list-style: none;
padding-left: 20px;
}
.sub-menu.open {
display: block;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.js-arrow {
transition: 0.3s ease;
}
.js-arrow.rotate {
transform: rotate(180deg);
}
.navbar-expand-lg .navbar-collapse {
width: 100%;
box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 8px 0px;
backdrop-filter: blur(12px);
clip-path: polygon(
0px 0px,
100% -25%,
100% 95%,
96% 100%,
-25% 100%,
0px 0px
);
background: rgba(28, 28, 28, 0.7);
display: block;
}
.navbar-nav .nav-item {
margin: 15px 0;
text-align: center;
height: auto;
padding: 0 30px;
}
.navbar-nav {
display: block;
}
.navbar-light .navbar-nav .nav-link,
.navbar-nav li a {
font-size: 16px;
padding: 0 !important;
text-align: left;
}
.sub-menu {
display: none;
list-style: none;
padding: 10px 0 0 0;
transition: none;
}
.sub-menu.open {
display: block;
}
.sub-menu li {
text-align: center;
margin: 8px 0;
}
.sub-menu a {
color: #fff;
font-size: 16px;
text-decoration: none;
}
.navbar-nav .nav-item.active > a:hover {
color: inherit;
}
/* Active parent item (when submenu is open) */
.navbar-nav .nav-item.active > a,
.navbar-nav li.active a {
color: #ea1f27 !important;
}
.navbar-nav li .arrow {
width: 10px;
margin-left: 12px;
}
/* Arrow rotation */
.js-arrow {
transition: transform 0.3s ease;
margin-left: 6px;
}
.js-arrow.rotate {
transform: rotate(180deg);
}
.navbar-nav li:hover .js-arrow {
transform: none;
}
.navbar-nav li .sub-menu.open {
opacity: 1;
visibility: visible;
position: relative;
margin-top: 20px;
padding-bottom: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
}
.navbar-nav li .sub-menu li {
padding: 10px 24px 0;
text-align: left;
}
.navbar-nav li:hover .htmlCss-sub-menu,
.navbar-nav li:hover .js-sub-menu {
transform: none;
margin-top: 0;
transition: none;
}
.tire-finder-section {
background-position-x: 63%;
background-size: cover;
}
.navbar-nav .nav-item.active:hover svg .s0 {
fill: #848484;
}
.navbar-nav .nav-item.active svg .s0 {
fill: #ea1f27 !important;
}
.navbar-nav .nav-item.active .js-arrow {
transform: rotate(180deg);
}
.navbar-nav .nav-item.active .htmlCss-sub-menu li a {
color: #848484 !important;
font-size: 16px;
}
.warranty-sect {
background-position-x: 90%;
}
.hamburger span:first-child {
width: 12px;
}
.hamburger span:last-child {
width: 18px;
}
.region-dropdown-mobile {
display: flex;
align-items: center;
margin-left: auto;
margin-right: 10px;
}
.ar .region-dropdown-mobile {
margin-left: 10px;
margin-right: auto;
}
.ar .navbar-light .navbar-nav .nav-link,
.ar .navbar-nav li a {
text-align: right;
}
.ar .navbar-nav li .arrow {
width: 10px;
margin-right: 12px;
}
.ar .navbar-nav li .sub-menu li {
text-align: right;
}
.card {
clip-path: polygon(4% 0, 100% 0, 100% 96%, 96% 100%, 0 100%, 0 4%);
}
.region-dropdown-mobile svg {
width: 20px;
height: 20px;
}
.region-dropdown-mobile a {
display: flex;
align-items: center;
gap: 5px;
font-size: 15px;
line-height: 32px;
color: #848484;
}
.region-dropdown-mobile a:hover {
background-color: rgba(234, 31, 39, 0.2);
clip-path: polygon(
0px 0px,
100% 0px,
100% 82%,
95% 100%,
0px 100%,
0px 0px
);
color: #fff;
}
.nav-link.dropdown-toggle:hover {
background-color: transparent;
}
.navbar .collapse.navbar-collapse {
order: 3;
}
.hamburger {
order: 2;
}
.navbar-nav .nav-item.dropdown.d-none.d-lg-block {
display: none !important;
}
.about_banner_sect h1 {
font-size: 41px;
padding-bottom: 42px;
}
.about_banner_cont {
gap: 50px;
}
.about_banner_cont h3 {
font-size: 15px;
line-height: 21px;
}
.about_banner_cont p {
font-size: 13px;
line-height: 19px;
}
.about_banner_sect video {
height: 400px;
}
.about_banner_sect {
height: 1030px;
}
.technology_img1 img {
width: 366px;
height: 246px;
}
.technology_img2 img {
width: 250px;
height: 324px;
}
.technology_img3 img {
width: 414px;
height: 244px;
}
.video_section {
width: 38.5%;
top: -210px;
min-height: 244px; /* match scaled-down image height at this breakpoint */
}
.manufacturing_vedio {
height: 230px;
}
.technology_cont h2 {
font-size: 35px;
line-height: 37px;
}
.panel.intro {
background-size: 100% 100%;
}
.vision_mission_slide .content img {
width: 380px;
height: 360px;
}
.heading-fixed span,
.heading-fixed small {
font-size: 38px;
line-height: 40px;
}
.vision_mission_slide .text {
padding-top: 90px;
}
.profile-content {
width: 80%;
}
.about_get_in_touch_sect {
padding: 80px 0 0;
}
.grid-sizer,
.grid-item {
width: 47.5%;
}
.article_bann_cont h1 {
font-size: 24px;
line-height: 27px;
}
.articles_banner_cont span img {
height: 368px;
}
.solution-sect {
padding: 70px 0;
}
.grid {
margin: 20px auto;
}
.grid-filter ul li a {
font-size: 16px;
letter-spacing: 0.7px;
}
.solution-content h3 {
font-size: 30px;
}
.grid-filter ul {
gap: 12px;
}
.news-slide {
flex: 0 0 calc(34% - 20px);
}
.card-body {
padding: 18px 15px;
}
.grid-filter ul {
list-style: none;
margin: 0;
padding: 0;
}
.grid-filter ul li a {
display: block;
padding: 10px 14px;
text-decoration: none;
color: #333;
}
.grid-filter ul li a:hover,
.grid-filter ul li a.selected {
background: #f5f5f5;
color: #000;
}
.single-item .slick-slide img {
width: 250px;
height: auto;
}
.zoomContainer {
width: 250px !important;
height: 250px !important;
left: 80px !important;
}
.first-text small {
font-size: 14px;
line-height: 20px;
}
.zoomLens {
width: 50px !important;
height: 50px !important;
}
.zoomWindow {
width: 400px !important;
height: 400px !important;
left: 190px !important;
top: -55px !important;
background-size: 2000px auto !important;
}
.features-content small {
width: 88%;
}
.feat-con {
width: 100%;
}
.left-img {
left: 0;
width: 210px;
}
.right-img {
right: 0;
width: 210px;
}
.features-section {
height: auto !important;
max-height: none !important;
padding: 40px 0 !important;
overflow: visible !important;
}
.first-text {
width: 100%;
}
.mobile-wrap-section {
display: block !important;
}
.enquiry-button {
margin-bottom: 15px;
}
.first-content {
padding: 55px 0 125px 0;
}
.first-section {
background-position-y: 101%;
height: 100%;
}
.custom-table.northamerica-custom th,
.custom-table.northamerica-custom td {
font-size: 10px;
padding: 10px 3px !important;
}
.article_details_cont .articles_banner_cont img {
height: auto;
}
.article_details_cont {
margin-top: -280px;
}
.article_details_banner {
min-height: 630px;
}
.get_in_touch_right.contact_form .select-dropdown {
margin-bottom: 43px;
}
.tire-spec::after {
top: 48%;
left: 139px;
}
.fr .about-us small {
font-size: 25px;
line-height: 38px;
}
.fr .about-us {
height: 70vh;
}
.fr .about-us-wrapper {
height: 70vh;
}
.fr .product-content h3 {
font-size: 16px;
line-height: 24px;
}
.fr .nav-tabs a {
font-size: 8px;
}
.fr .fr .navbar-nav li a {
padding: 3px 3px !important;
}
.features-content small {
width: 100%;
}
.features-content h4 {
padding-top: 0px;
}
}
@media screen and (max-width: 767px) {
.grid-sizer,
.grid-item {
width: 50%; /* 2 columns */
}
.ru .navbar-nav li a {
padding: 0 2px !important;
}
.container_in,
.navbar-glass {
width: 100%;
max-width: 100%;
top: 20px;
/* display: none; */
}
.navbar-glass {
padding: 0 15px;
max-width: 100%;
}
.banner_slider,
.banner_cont,
.banner-content {
width: 100%;
max-width: 100vw;
overflow: hidden;
}
.footer-text span {
font-size: 40px;
line-height: 48px;
color: #ffffff;
}
.list-content {
padding: 100px 0 60px;
}
.list-content ul {
padding: 0 0 16px 0;
}
.list-content h3 {
font-size: 60px;
line-height: 100%;
color: #ffffff;
}
.get_in_touch_sect {
background-position-x: 89%;
height: 244px;
}
.get_in_touch_left {
width: 392px;
}
.get_in_touch_left p {
padding-bottom: 40px;
}
.get_in_touch_blogs {
padding: 24px 24px 130px 0px;
}
.get_in_touch_left {
width: 334px;
padding-bottom: 40px;
}
.get_in_touch_right .form-control {
font-size: 14px;
}
.get_in_touch_right p {
padding-top: 39px;
}
.get_in_touch_right .textarea_bg .form-control {
padding: 0;
margin: 16px 0 0;
}
.get_in_touch_right p {
font-size: 14px;
}
.footer-text span {
padding: 0 23px 32px 25px;
margin: 0 auto;
}
.footer-logo {
margin-top: 72px;
}
.footer-text {
display: block !important;
padding-top: 90px;
}
.mobile-foot .d-flex {
display: block !important;
}
.footer-text input {
margin: 0 auto;
width: 80%;
margin-bottom: 0;
}
.footer-text small {
font-size: 14px;
line-height: 19px;
text-align: center;
display: block;
}
.logo-group img {
width: 420px;
}
.list-section {
background-position-x: 89% !important;
background-position-y: bottom !important;
background-size: 300% 100% !important;
}
.list-section.mob_bg_faq {
height: 100vh;
background: url(../images/faq_mob_banner.jpg) no-repeat left bottom !important;
}
.download_sect {
height: 427px;
background: url(../images/download_mob_banner.jpg) no-repeat left bottom !important;
}
.list-section.mob_banner_high {
height: auto;
}
.list-content,
.event_cont_wid {
width: 97%;
margin: 0 auto;
}
.event_info {
display: block !important;
padding: 10px 0 0;
}
.article_details_banner .event_details small {
padding-bottom: 5px;
}
.event_btns {
padding: 0;
}
.event_details_right img {
height: auto;
margin-bottom: 20px;
}
.event_details_banner {
padding-top: 120px;
min-height: auto;
}
.list-content p {
line-height: 25px;
color: #ffffff;
}
.list-content .active {
color: #848484;
}
.tyre-finder-content {
display: block;
text-align: center;
width: 68%;
margin: 0 auto;
}
.prod-button.text-clr-chnge {
margin: 28px auto 0 !important;
}
.product-link {
width: 85%;
display: block;
margin: 0 auto;
}
.tyre-finder-content .tyre-selector {
display: block;
margin-bottom: 40px;
}
.tyre-finder-content .select-input {
width: 100%;
}
.tyre-finder-content .select-input::before {
right: 16%;
top: 50%;
}
.tyre-finder-content .select-dropdown__button,
.ar .tyre-finder-content .select-input,
.ar .tyre-finder-content .select-dropdown__button {
width: 100%;
}
.prod-button {
width: 80%;
margin: 20px auto 0 !important;
}
.tabs-nav {
display: none;
}
.tabs-select {
display: none;
}
.tyre-finder-section ul#tabs-nav {
display: none;
}
.tyre1:after {
bottom: 33px;
}
.tyre-content {
padding-top: 0;
}
.tyre-finder-section {
padding-bottom: 240px;
}
.tip-section {
padding: 80px 0;
margin-top: -155px;
/* clip-path: polygon(0% 0%, 6% 0%, 9% 6%, 100% 6%, 100% 100%, 94% 100%, 90% 97%, 0% 97%); */
}
.tip-content {
display: block;
text-align: center;
}
.tip-card {
width: 100%;
margin: 0 auto;
}
.play-button {
height: 80px;
width: 80px;
top: 35%;
}
.tip-section.leadership_sect {
z-index: 9;
margin-top: -50px;
}
.about_testimonial_sect {
margin-top: -42px !important;
clip-path: polygon(
0% 0%,
6% 0%,
12% 3%,
100% 3%,
100% 100%,
94% 100%,
90% 97%,
0% 97%
);
}
.growth_cont p {
width: 94%;
}
.about_get_in_touch_sect .solution-content {
width: 100%;
}
/* .footer_sect{
padding-top: 212px;
} */
.logo-group img {
width: 310px;
}
.footer-logo {
margin-top: 40px;
}
.tip-slider-wrapper .slick-next {
right: 0%;
top: 214px;
left: 89%;
}
.tip-slider-wrapper .slick-prev {
top: 213px;
right: 88%;
}
.slick-prev,
.slick-next {
width: 41px;
height: 32px;
}
.tip-slider-wrapper .slick-prev:before,
.tip-slider-wrapper .slick-prev.slick-disabled:before {
width: 41px;
height: 32px;
}
.tip-slider-wrapper .slick-next:before,
.tip-slider-wrapper .slick-next.slick-disabled:before {
width: 41px;
height: 32px;
}
.banner_cont .slider.slider-content,
.banner_cont .slider-content::before,
.banner_cont .slider.slider-content img,
.banner_cont .slider.slider-content video {
height: 100vh;
margin-bottom: 0;
}
.slider-thumb {
display: none !important;
}
.about-us .row {
flex-direction: column-reverse;
}
.banner_cont .slider-content .slick-dots {
bottom: 25px;
z-index: 9;
}
.banner_cont .slider-content .slick-dots li,
.banner_cont .slider-content .slick-dots li button {
width: 8px;
height: 8px;
margin: 0 3px;
}
.banner_cont .slider-content .slick-dots li button:before {
width: 8px;
height: 8px;
opacity: 1;
color: #666666;
background-color: #666666;
}
.banner_cont .slider-content .slick-dots li.slick-active button,
.banner_cont .slider-content .slick-dots li.slick-active {
width: 20px;
height: 8px;
clip-path: polygon(
0px 0px,
100% 0px,
100% 55%,
83% 100%,
0px 100%,
0px 0px
);
}
.banner_cont .slider-content .slick-dots li.slick-active button:before {
width: 20px;
height: 8px;
clip-path: polygon(
0px 0px,
100% 0px,
100% 94%,
94% 100%,
0px 100%,
0px 0px
);
background-color: #ea1f27;
opacity: 1;
}
/*
.about-us-wrapper {
height: 100vh;
} */
.about-us {
padding: 80px 0;
}
.about-text {
width: 100%;
float: none;
padding-top: 0;
}
.navbar-nav .nav-item.dropdown.d-none.d-lg-block {
display: none !important;
}
.region-language-menu {
width: 100%;
height: auto !important;
}
.region-inner-wid {
margin-bottom: 20px;
}
.region-dropdown-mobile a {
line-height: 20px;
padding: 5px 10px;
margin-top: 0;
margin-bottom: 5px;
}
.about-us small {
font-size: 42px;
line-height: 53px;
}
.about-us img {
margin: 50px 0 0;
}
.about-us .d-flex.justify-content-end {
justify-content: center !important;
}
.about-us {
background-position-y: 100%;
}
.nav-tabs {
display: none !important;
}
.product-content {
text-align: center;
}
.product-content small {
font-size: 14px;
line-height: 100%;
}
.product-content h3,
.warranty-content h3,
.why-content h3,
.tire-content h4,
.tip-content h4,
.news-content h3 {
font-size: 37px;
line-height: 40px;
}
.product-nav {
padding-top: 29px;
width: 84%;
margin: 0 auto;
display: block !important;
}
.border_bg {
color: #000;
font-family: "Schibsted Grotesk", sans-serif;
width: 100%;
height: auto;
font-size: 16px;
font-weight: 500;
margin-bottom: 0px;
text-align: left;
border-width: initial;
border-style: none;
border-color: initial;
border-image: initial;
padding: 12px 0px;
background: url(../images/black_line.png) left bottom no-repeat;
background-size: 100%;
}
.mob_select::before {
content: "";
display: block;
position: absolute;
background-image: url(../images/down-arrow-dark.png);
width: 17px;
height: 8px;
right: 16px;
top: 18px;
background-size: 100% 100%;
}
.form-select:focus {
border-color: transparent;
box-shadow: none;
}
.product-content .slider.responsive::before,
.product-content .slider.responsive::after {
display: none;
}
.tyre-container {
width: 79%;
margin: 0 auto;
}
.tyre1 {
margin-bottom: 10px;
}
.tyre1:after {
bottom: 26px;
}
.prod-button {
width: max-content;
}
.tip-button {
margin-top: 20px !important;
}
.why-text .slick-dots,
.tip-slider .slick-dots,
.news-slider .slick-dots,
.slick-dots {
bottom: -50px;
z-index: 9;
}
.why-text .slick-dots li,
.why-text .slick-dots li button,
.tip-slider .slick-dots li,
.tip-slider .slick-dots li button,
.news-slider .slick-dots li,
.news-slider .slick-dots li button,
.slick-dots li,
.slick-dots li button {
width: 8px;
height: 8px;
margin: 0 3px;
}
.why-text .slick-dots li button:before,
.tip-slider .slick-dots li button:before,
.news-slider .slick-dots li button:before,
.slick-dots li button:before {
width: 8px;
height: 8px;
opacity: 1;
color: #666666;
background-color: #666666;
}
.why-text .slick-dots li.slick-active button,
.why-text .slick-dots li.slick-active,
.tip-slider .slick-dots li.slick-active button,
.tip-slider .slick-dots li.slick-active,
.news-slider .slick-dots li.slick-active button,
.news-slider .slick-dots li.slick-active,
.slick-dots li.slick-active button,
.slick-dots li.slick-active {
width: 20px;
height: 8px;
clip-path: polygon(
0px 0px,
100% 0px,
100% 55%,
83% 100%,
0px 100%,
0px 0px
);
}
.why-text .slick-dots li.slick-active button:before,
.tip-slider .slick-dots li.slick-active button:before,
.news-slider .slick-dots li.slick-active button:before,
.slick-dots li.slick-active button:before {
width: 20px;
height: 8px;
clip-path: polygon(
0px 0px,
100% 0px,
100% 94%,
94% 100%,
0px 100%,
0px 0px
);
background-color: #ea1f27;
opacity: 1;
}
.t-content ul {
justify-content: center;
}
.tip-slider-full {
width: 100%;
}
.t-content {
display: block;
}
.t-container p {
padding-right: 0;
text-align: center;
}
.profile {
display: block;
}
.profile span {
display: block;
margin: 0 auto 15px;
}
.profile-content {
width: 90%;
margin: 0 auto;
text-align: center;
}
.footer_sect {
margin-top: 0;
padding-top: 0;
}
.home-page .footer_sect {
margin-top: -638px;
padding-top: 420px;
}
.news-section {
padding-bottom: 100px;
background-size: 100% 100%;
}
.download_sect {
background-position-x: 75% !important;
position: relative;
}
.download_cont {
width: 184px;
height: auto;
}
.download_cont img {
height: 204px;
}
.download_cont h5 {
font-size: 14px;
font-weight: bold;
line-height: 20px;
height: auto;
}
.download_blogs {
padding: 24px 0 23px 0;
}
.tire-card .tyre-container {
border-right: none;
}
.tyre-finder-content h4 {
font-size: 37px;
line-height: 32px;
padding: 10px 0 12px;
}
.tyre-finder-section .container {
padding: 0;
}
.prod-button svg {
width: 100% !important;
height: 100% !important;
}
.about_banner_inner {
width: 100%;
}
.about_banner_bg .container {
padding: 0;
}
.mob_sect {
display: block !important;
width: 90%;
margin: 0 auto;
}
.mob_sect .list-content .active a {
color: #848484;
}
.mob_sect .list-content {
padding: 64px 0 20px;
}
.about_banner_sect h1 {
width: 90%;
margin: 0 auto;
font-size: 60px;
line-height: 100%;
text-align: left;
}
.ar .about_banner_sect h1,
.ar .about_banner_cont h3,
.ar .about_banner_cont p,
.ar .get_in_touch_right .form-control,
.ar .get_in_touch_right .select-dropdown__button {
text-align: right;
}
.about_banner_sect video {
height: 298px;
clip-path: polygon(
90% 0%,
93% 6%,
100% 6%,
100% 100%,
0 100%,
0 96%,
0 96%,
0 0
);
}
.about_banner_bg {
background: linear-gradient(180deg, #330a0a 0%, #5b1313 93.82%);
padding: 47px 00 0;
}
.about_banner_sect::after {
background: url(../images/about_banner_bg.png) no-repeat left top;
clip-path: polygon(
90% 0%,
93% 6%,
100% 6%,
100% 100%,
9% 100%,
5% 96%,
0 96%,
0 0
);
}
.about_banner_cont {
display: block !important;
width: 90%;
margin: 0 auto;
}
.about_banner_cont h3 {
font-size: 20px;
line-height: 26px;
width: 100%;
padding-bottom: 16px;
}
.about_banner_cont p {
font-size: 16px;
line-height: 22px;
width: 100%;
padding-bottom: 16px;
}
.about_banner_sect {
height: 1150px;
}
.ar .about_banner_sect {
height: 1030px;
}
.ar .video_section {
width: 100%;
}
.technology_cont h2 {
font-size: 40px;
line-height: 43px;
}
.technology_img1 {
width: 66%;
}
.technology_img1 img {
width: 100%;
height: auto;
}
.technology_img2 {
margin-top: 40px;
width: 60%;
}
.technology_img2 img {
width: 100%;
height: 158px;
object-fit: cover;
}
.technology_img3 {
width: 78%;
margin: -65px auto 0;
display: block;
}
.technology_img3 img {
width: 100%;
height: 156px;
object-fit: cover;
}
.video_section {
width: 100%;
top: inherit;
bottom: 20px;
position: relative;
}
.technology_cont .dis_chnge {
display: block !important;
margin-bottom: 0 !important;
}
.panel.intro {
width: 100%;
background: url(../images/mob_bg.png) no-repeat center center;
}
.panel.intro::before {
display: none;
}
.intro_cont {
display: block !important;
width: 90%;
}
.panel.intro h1 {
margin-bottom: 10px;
}
.panel_cont {
display: block !important;
}
.panel img {
margin-bottom: 20px;
}
.panel_cont .text-start {
text-align: center !important;
}
.leadership_sect p {
text-align: center;
width: 90%;
margin: 0 auto;
}
.heading-fixed {
top: 80px;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
}
.vision_mission_slide .content {
flex-direction: column-reverse;
/* margin-top: 60px; */
}
.slider-section {
padding: 80px 0 30px;
}
.vision_mission_slide .content img {
width: 100%;
height: 300px;
object-fit: cover;
}
.vision_mission_slide .text {
padding-top: 0;
}
.vision_img {
clip-path: polygon(
90% 0%,
100% 0,
100% 6%,
100% 100%,
24% 100%,
20% 93%,
0 93%,
0 0
);
}
.mission_img {
clip-path: polygon(
90% 0%,
100% 0,
100% 6%,
100% 100%,
45% 100%,
40% 93%,
0 93%,
0 0
);
}
.values_img {
clip-path: polygon(
90% 0%,
100% 0,
100% 6%,
100% 100%,
65% 100%,
60% 93%,
0 93%,
0 0
);
}
/* Let section height adapt to Slick content */
.slider-section,
.slider-container,
.slider-section .container {
height: auto;
position: relative;
}
/* Unfix everything — no pinning or overlap */
.slider-container.fixed {
position: relative;
}
/* Slick will handle positioning */
.vision_mission_slide {
position: relative;
opacity: 1 !important;
height: auto;
display: block;
padding: 0;
}
/* Slide layout for mobile */
.vision_mission_slide .text {
padding-top: 0;
text-align: center;
width: 90%;
margin: 0 auto;
}
.vision_mission_slide .content img {
width: 100%;
height: auto;
max-width: 100%;
object-fit: contain;
}
/* Headings repositioned */
.heading-fixed {
position: relative;
top: 0;
left: 0;
text-align: center;
margin-bottom: 30px;
}
.heading-fixed span {
display: inline-block;
margin: 0;
font-size: 32px;
line-height: 36px;
}
.slides-wrapper .slick-dots {
bottom: inherit;
z-index: 9;
top: 312px;
}
.slider-container .container {
padding: 0;
}
.vision_mission_slide .text ul li {
text-align: left;
}
.built_cont_left h3,
.built_cont_left p {
text-align: center;
}
.built_cont_right {
margin-top: 20px;
}
.built_cont_right .col-6 {
padding: 0 5px;
}
.build_blog_sect {
padding: 25px 20px 0 20px;
height: 180px;
}
.exp-banner-content {
padding: 81px 0px 0;
width: 100%;
}
.exp-banner-content-text {
width: 90%;
padding: 116px 24px 40px 24px;
}
.maintainace-btn {
width: 45%;
}
.exp-content h3 {
font-size: 24px;
line-height: 27px;
padding-bottom: 12px;
}
.solution-sect {
padding: 40px 0 100px;
}
.solution-content {
width: 100%;
}
.solution-content h3 {
font-size: 40px;
line-height: 48px;
color: #fff;
padding: 34px 0 10px;
}
.ar .exp-banner-content-text {
width: 100%;
}
.ar .modal-backdrop {
width: 100%;
height: 100%;
}
.ar .tip-card-meta small {
text-align: right;
}
.grid-filter ul {
padding-top: 40px;
}
/* --- DESKTOP / BASE STYLES --- */
/* Ensure the mobile trigger is ALWAYS hidden on desktop */
.video-filter-container .dropdown-trigger {
display: block !important;
}
/* Ensure the tab container is always visible on desktop */
.grid-filter {
display: block;
padding: 10px 0;
}
#filters {
list-style: none;
padding: 0;
margin: 0;
display: flex; /* Horizontal tabs */
}
/* Your existing desktop tab styling continues here... */
#filters a {
color: #fff;
text-decoration: none;
padding-bottom: 5px;
border-bottom: 2px solid transparent;
}
#filters a.selected {
border-bottom: 2px solid white;
}
.faq_accordion .form-control {
width: 100%;
background-size: 100%;
}
.faq_select {
width: 85%;
}
.faq_accordion .serach_icon {
right: 0;
}
/* --- BASE / DESKTOP STYLES (Applies to all screens, but controls desktop layout) --- */
/* 1. Ensure the mobile trigger is ALWAYS hidden on desktop */
/* Base container */
.video-filter-container {
background-color: #000;
/* padding: 10px; */
}
/* Desktop Tabs (same as before) */
#filters {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
}
#filters li {
margin-right: 15px;
}
#filters a {
color: #fff;
text-decoration: none;
padding-bottom: 5px;
border-bottom: 2px solid transparent;
transition: border-bottom 0.3s;
}
#filters a.selected {
border-bottom: 2px solid white;
}
.mobile-video-filter select {
width: 100%;
background-color: #111;
color: #fff;
border: 1px solid #333;
border-radius: 6px;
padding: 10px;
font-size: 15px;
text-transform: uppercase;
}
.build_blog_sect p {
display: none;
}
.get_in_touch_left strong,
.get_in_touch_left a {
width: auto;
display: inline-block;
}
.get_in_touch_left strong {
margin-right: 10px;
}
.about_get_in_touch_sect .get_in_touch_right {
width: 100%;
}
.single-item .slick-slide img {
max-width: 390px;
height: auto;
width: 70%;
margin-bottom: 20px;
}
.first-section {
background-position-y: 100%;
height: 100%;
}
.mobile-wrap-section {
flex-direction: column;
}
.first-text small,
.first-text {
text-align: center;
}
.features-content h4 {
font-size: 40px;
line-height: 40px;
margin-bottom: 10px;
}
.first-button {
justify-content: center;
}
.list-content li {
font-size: 14px;
line-height: 25px;
letter-spacing: 0;
}
.features-content small {
width: 85%;
}
.features-content small br {
display: none;
}
.certifi-icons li {
width: 80px;
height: 80px;
min-width: 80px;
}
.certifi-icons li img {
width: 80px;
height: auto;
}
.certifi-icons {
margin-top: 27px;
gap: 10px;
flex-wrap: nowrap;
will-change: transform;
animation: scroll-left 15s linear infinite;
}
.certifi-icons:hover {
animation-play-state: paused;
}
.first-text {
width: 100%;
}
.prod-button {
width: max-content;
}
@keyframes scroll-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.multiple-items {
border-top: 0;
border-bottom: 0;
}
.similar-product-content h3 {
font-size: 40px;
line-height: 40px;
padding-bottom: 0;
text-align: center;
}
.first-text h4 {
font-size: 60px;
line-height: 100%;
}
.prod-button {
margin-top: 15px !important;
}
.multiple-items .slick-next {
right: 15px;
top: 42%;
transform: translateY(-50%);
}
.multiple-items .slick-prev {
left: 15px;
right: auto;
top: 42%;
transform: translateY(-50%);
}
.mobile-first-section {
display: block;
margin-top: 16px;
}
.truck,
.first-button {
display: none;
}
.mobile-first-section .first-button {
display: flex;
}
.first-text h4 {
display: none;
}
.mobile-first-section .first-text h4 {
display: block;
margin-bottom: 10px;
}
.mobile-first-section .truck {
display: flex;
justify-content: center;
}
.first-content {
position: relative;
}
.first-content::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 211px;
background-image: url("../images/layer.png");
background-repeat: no-repeat;
background-size: cover;
}
.gridtable {
display: none;
}
.custom-accordion {
display: block;
margin-top: 32px;
}
.specific-content small br {
display: none;
}
.specifications-section.active {
padding-bottom: 250px;
}
.tire {
width: 100%;
}
.warr-text {
margin-bottom: 20px;
}
.nav-link.dropdown-toggle {
margin: 0;
}
.warr-container h4 {
font-size: 16px;
line-height: 21px;
padding-bottom: 8px;
}
.why-text-item img {
height: 280px;
object-fit: cover;
}
.tire-finder-section {
background: url(../images/product_search_bg.png) no-repeat center bottom
#000;
text-align: center;
padding: 65px 0 400px;
height: auto;
}
.tire-content {
width: 82%;
margin: 0 auto;
}
.tire-finder-section .select-input,
.home-tire-finders .select-dropdown {
width: 100%;
}
.find-button {
margin: 0 auto 50px !important;
}
.tire-content .col-12.mt-5.pt-3 {
padding-top: 0 !important;
margin-top: 20px !important;
}
.testimonial_sect {
padding: 80px 0 185px;
}
.first-content {
padding: 5px 0 175px 0;
}
.region-dropdown-mobile a.active,
.region-dropdown-mobile a:active,
.region-dropdown-mobile a:hover {
color: #fff !important;
/* background-color: #EA1F27; */
background-color: rgba(234, 31, 39, 0.2);
clip-path: polygon(
0px 0px,
100% 0px,
100% 82%,
95% 100%,
0px 100%,
0px 0px
);
}
.ar .region-dropdown-mobile a.active,
.ar .region-dropdown-mobile a:active,
.ar .region-dropdown-mobile a:hover {
clip-path: polygon(
100% 0px,
0px 0px,
0px 82%,
5% 100%,
100% 100%,
100% 0px
);
}
.region-dropdown-mobile a.nav-link.dropdown-toggle,
.region-dropdown-mobile a.nav-link.dropdown-toggle:hover {
color: #848484;
background: transparent;
}
.prod-button.apply_btn:hover {
background-color: transparent;
}
/* Wrapper for mobile dropdown */
.mobile-video-filter {
position: relative;
display: block;
background-color: #000; /* black background */
padding-bottom: 12px;
border-bottom: 2px solid transparent; /* placeholder for underline */
}
.mobile-video-filter select.form-select {
font-size: 12px !important;
line-height: 100%;
font-weight: 500 !important;
color: #fff !important;
font-family: "Schibsted Grotesk", sans-serif !important;
}
/* The select element itself */
.mobile-video-filter select {
background: #000;
color: #fff;
border: none;
font-size: 16px;
font-weight: 500;
width: 100%;
padding: 8px 32px 8px 0;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
}
/* Remove blue outline on focus */
.mobile-video-filter select:focus {
outline: none;
}
/* Custom arrow */
.mobile-video-filter::after {
content: "";
position: absolute;
right: 1.75em; /* space from right, relative */
top: 50%;
transform: translateY(-50%);
background: url("../images/down-arrow-white.svg") no-repeat center;
background-size: contain;
width: 1em; /* scales with font size */
aspect-ratio: 1 / 1; /* keeps the SVG square */
pointer-events: none;
}
/* White underline */
.mobile-video-filter::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1.5em; /* relative height — adjust visually */
background: url("../images/white-underline.svg") no-repeat center;
background-size: 100% auto; /* full width, auto height */
}
/* Optional angled end (white corner) */
.mobile-video-filter::after,
.mobile-video-filter::before {
transition: all 0.3s ease;
pointer-events: none;
}
.mobile-video-filter select {
position: relative;
z-index: 2;
}
.articles_banner_cont .d-flex {
display: block !important;
}
.articles_banner_cont span {
display: block;
width: 100%;
}
.article_bann_cont {
width: 100%;
padding: 32px 24px 24px 24px;
}
.article_bann_cont h1 {
font-size: 24px;
line-height: 27px;
}
.articles_banner_cont span img {
height: 298px;
}
.articles_banner .container {
padding: 0;
}
.article_bann_cont p {
padding-bottom: 30px;
}
.grid-filter {
display: none !important;
}
.grid-filter-mobile {
display: block !important;
}
.fancybox-wrap {
width: 90% !important;
}
.tire {
width: 100%;
height: auto;
}
.tire img {
/* width: 100%;
height: 310px; */
max-width: 70%;
height: auto;
}
.feat-wrapper {
/* flex-direction: column-reverse; */
display: block;
height: 100%;
/* height: calc(100vh - 280px); */
}
/* .feat-wrapper {
overflow: hidden;
position: relative;
}
.feat-con {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background: #fff;
} */
.features-section {
position: relative;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
background: #fff;
}
.features-content {
height: auto;
}
.feat-wrapper {
position: relative;
top: auto;
bottom: auto;
left: auto;
width: 100%;
overflow: visible;
}
.tire img {
width: 85%;
max-width: 100%;
display: block;
margin: 0 auto;
}
.feat-con {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
background: #fff;
width: 100%;
height: 85%;
padding: 2rem;
}
.news-button {
margin: 60px auto 0 !important;
}
.news-slider {
display: block;
}
.dropdown-content {
display: block;
}
.dropdown-content.show {
display: block;
}
.features-section {
position: relative;
overflow: visible !important;
}
/* .features-section .feat-wrapper {
position: relative;
height: 100vh;
} */
/* .feat-con {
position: relative;
width: 100%;
height: auto;
top: 20px;
} */
/* .features-section .feat-con {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
opacity: 0;
display: none;
justify-content: center;
align-items: center;
}
.left-img, .right-img {
display: flex;
flex-direction: column;
align-items: normal;
justify-content: center;
} */
.warr-btn {
margin: 28px auto 0 !important;
width: max-content;
}
.panel_cont .text-start {
width: 100%;
}
.success-modal .modal-dialog {
max-width: 90%;
width: 100%;
}
.success-modal h3 {
font-size: 27px;
line-height: 30px;
}
.okay_btn {
width: 140px;
height: 42px;
}
.features-section .feat-wrapper {
position: relative;
height: 75vh;
}
.features-section .feat-con {
position: absolute;
}
.features-section .left-img,
.features-section .right-img {
display: flex;
flex-direction: column;
align-items: center;
justify-content: normal;
text-align: center;
height: calc(100vh - 49vh) !important;
top: 70px;
}
.features-section .left-img img,
.features-section .right-img img {
max-width: 100%;
width: 80%;
height: auto;
margin: 0 auto;
z-index: 9;
position: relative;
}
.feat-con {
opacity: 1;
}
/* .features-section {
padding: 40px 0 !important;
} */
.feature_mob_cont {
display: block;
text-align: center;
margin: 15px 0;
}
.feature_mob_cont .d-flex {
justify-content: center;
}
.feature_desk_cont {
display: none;
}
/* .tire {
transform: translate(-50%, 85%) !important;
} */
.feat-con h5,
.feat-con strong {
font-size: 18px;
line-height: 20px;
font-family: "Schibsted Grotesk", sans-serif;
}
.left-img::after,
.right-img::before {
right: 0;
left: 0;
transform: rotate(90deg);
margin: 0 auto;
}
.tire {
top: inherit !important;
bottom: 30px;
}
.features-section {
padding: 40px 0 !important;
margin-bottom: 0 !important;
}
.feat-con.hide {
visibility: hidden;
pointer-events: none;
display: none;
}
.about_banner_cont p:last-child {
width: 100%;
}
.panel.year {
width: 100%;
}
.panel img {
width: 100%;
height: 175px;
object-fit: cover;
}
.panel.year p {
font-size: 20px;
line-height: 26px;
text-align: center;
}
.panel.year h2 {
font-size: 40px;
line-height: 40px;
margin-bottom: 6px;
}
.active-year {
top: 75px;
}
.panel.intro p {
width: 100%;
}
.tip-slick {
position: relative;
}
.floating-detail {
background: transparent;
padding: 16px;
border-radius: 0;
box-shadow: none;
display: none;
position: absolute;
bottom: 60px; /* sits above dots */
transform: translateX(-50%);
width: 100% !important;
transition: all 0.3s ease;
z-index: 10;
margin: 10px 0 20px;
left: 0 !important;
text-align: left;
padding: 0;
}
.floating-detail.active {
display: block;
opacity: 1;
}
.leadership_sect .floating-detail p {
width: 100%;
text-align: left;
font-size: 14px;
line-height: 20px;
padding-top: 0;
}
.about_slider .slick-prev,
.about_slider .slick-next {
bottom: -65px;
}
.slides-wrapper .slick-slide {
opacity: 0 !important;
transition: opacity 0.6s ease;
position: relative;
}
.slides-wrapper .slick-slide.slick-active {
opacity: 1 !important;
z-index: 2;
}
.article_details_banner {
height: auto;
padding: 124px 0 50px;
}
.article_details_cont {
margin-top: 0;
padding: 0 0 40px;
}
.article_details_cont .container {
padding: 0;
}
.article_details_cont .articles_banner_cont {
margin-top: 0;
}
.article_details_cont .articles_banner_cont img {
height: auto;
}
.article_details_text,
.article_details_right {
width: 90%;
margin: 0 auto;
float: none;
}
.article_details_right {
margin-top: 20px;
}
.mobile-foot .d-flex .subscribe_btn {
margin: 0 auto 30px !important;
display: flex !important;
}
.vedio-modal .modal-dialog {
max-width: 80%;
}
.about-us-wrapper {
height: auto;
}
.tip-button {
margin-top: 50px !important;
}
.event_details .chnge_cont {
flex-direction: column-reverse;
}
.event_details_banner .container {
padding: 0;
}
.event_btns .warr-btn {
margin: 15px auto 0 !important;
}
.event_details_blogs .solution-content h3 {
color: #000;
}
.ar .about-text {
padding-top: 0px;
}
.ar .about-us small {
font-size: 28px;
line-height: 33px;
}
.ar .tip-slider-wrapper .slick-prev {
left: inherit;
right: 0;
}
.ar .tip-slider-wrapper .slick-next {
left: 0;
right: inherit;
}
.faq_accordion .grid-sizer,
.faq_accordion .colour-item {
width: 100%;
}
.type-grid {
margin-top: 0;
}
.colour-item {
padding: 16px 24px 17px;
}
.accordion-title .icon {
margin-left: 12px;
}
.ar .accordion-title .icon {
margin-left: 0;
margin-right: 12px;
}
.ar .faq_accordion .serach_icon {
right: inherit;
left: 0;
}
.ru .about-us small {
font-size: 17px;
line-height: 22px;
}
.ru .footer-text span {
font-size: 12px;
}
.wet-grip h3 {
width: 93%;
font-size: 38px;
line-height: 100%;
}
.wet-grip p {
width: 95%;
}
.wet-grip p br {
display: none;
}
.tire-spec img {
margin: 0 auto;
}
.tire-spec-grip {
display: block;
gap: 20px;
text-align: center;
}
.tire-spec::after {
display: none;
}
.ru .tyre-finder-content .tyre-selector {
display: block;
}
.ru .list-content h3 {
font-size: 30px;
}
.ar .slick-track {
transform: translate3d(0px, 0px, 0px) !important;
}
/* .fr .about-text{
padding:80 0;
} */
.fr .about-us small {
font-size: 27px;
line-height: 25px;
}
.fr .about-us {
padding: 0 0 0;
}
.fr .about-us h2 {
margin-bottom: 5px;
}
.fr .about-us img {
width: 290px;
height: 290px;
margin: 60px 0 0;
}
.fr .warranty-content h3 {
font-size: 32px;
line-height: 35px;
}
.fr .news-content h3 {
font-size: 30px;
line-height: 33px;
}
.fr .footer-text span {
padding: 0 0 32px 0;
}
.fr .navbar-light .navbar-nav .nav-link,
.fr .navbar-nav li a {
padding: 3px 3px !important;
font-size: 13px;
}
.fr .navbar-collapse.active {
padding: 10px 0;
}
.fr .about_banner_cont p {
font-size: 15px;
line-height: 21px;
}
.fr .about_get_in_touch_sect .get_in_touch_left h4 {
font-size: 28px;
line-height: 31px;
}
.fr .list-content h3 {
font-size: 45px;
line-height: 80%;
}
.it .about-us small {
font-size: 27px;
line-height: 30px;
}
.it .about-us {
padding: 0 0 0;
}
.it .about-us img {
margin: 30px 0 0;
}
.it .warranty-content h3 {
font-size: 33px;
line-height: 36px;
}
.it .why-content h3 {
font-size: 36px;
line-height: 39px;
}
.it .tire-content h4 {
font-size: 26px;
line-height: 29px;
}
.it .footer-text span {
padding: 0 0 32px 0;
}
.it .tip-content h4 {
font-size: 32px;
line-height: 35px;
}
.it .built_cont_left h3 {
font-size: 38px;
line-height: 40px;
}
.it .footer-text span {
margin: 0 auto;
}
.it .solution-content h3 {
font-size: 26px;
line-height: 34px;
}
.pt .about-us small {
font-size: 27px;
line-height: 30px;
}
.pt .about-us {
padding: 0 0 0;
}
.pt .about-us img {
margin: 30px 0 0;
}
.pt .tire-content h4 {
font-size: 25px;
line-height: 29px;
}
.pt .footer-text span {
padding: 0 0 32px 0;
}
.pt .footer-text span {
margin: 0 auto;
font-size: 33px;
line-height: 41px;
}
.pt .list-content h3 {
font-size: 45px;
line-height: 80%;
}
.es .about-us small {
font-size: 28px;
line-height: 34px;
}
.es .about-us img {
margin: 50px 0 0;
}
.es .about-text {
width: 100%;
float: right;
padding-top: 0;
}
.es .why-content h3 {
font-size: 36px;
line-height: 38px;
}
.es .tire-content h4 {
font-size: 24px;
line-height: 30px;
}
.es .footer-text span {
padding: 0 0 32px 0;
margin: 0 auto;
}
.es .tyre-finder-content h4 {
font-size: 32px;
line-height: 35px;
}
.es .about_banner_cont p {
font-size: 15px;
line-height: 21px;
}
.es .tip-content h4 {
font-size: 34px;
line-height: 37px;
}
.es .built_cont_left h3 {
font-size: 34px;
line-height: 37px;
}
.pl .about-text {
width: 100%;
float: right;
padding-top: 70px;
}
.pl .about-us small {
font-size: 24px;
line-height: 33px;
}
.pl .about-us img {
margin: 20px 0 0;
}
.pl .about-us {
padding: 80px 0 160px;
}
.pl .why-content h3 {
font-size: 29px;
line-height: 34px;
}
.pl .why-text-item h4 {
font-size: 14px;
line-height: 21px;
}
.pl .footer-text span {
padding: 0 0 32px 0;
margin: 0 auto;
}
.pl .navbar-light .navbar-nav .nav-link,
.pl .navbar-nav li a {
padding: 3px 3px !important;
font-size: 13px;
}
.pl .list-content h3 {
font-size: 34px;
line-height: 60%;
}
.de .about-text {
width: 100%;
float: right;
padding-top: 10px;
}
.de .about-us small {
font-size: 28px;
line-height: 32px;
}
.de .about-us img {
margin: 40px 0 0;
}
.de .tire-content h4 {
font-size: 33px;
line-height: 36px;
}
.de .news-content h3 {
font-size: 29px;
line-height: 32px;
}
.de .footer-text span {
font-size: 24px;
}
.de .footer-text span {
padding: 0 0 32px 0;
margin: 0 auto;
}
.de .navbar-light .navbar-nav .nav-link,
.de .navbar-nav li a {
padding: 3px 3px !important;
font-size: 13px;
}
.fancybox-next {
right: -15px;
}
.fancybox-prev {
left: -15px;
}
.de .about_banner_cont p {
font-size: 14px;
line-height: 19px;
}
.de .list-content h3 {
font-size: 34px;
line-height: 60%;
}
/* Disable pinning behavior on mobile */
.features-pin {
position: relative;
height: auto;
max-height: none;
overflow: visible;
}
.feat-wrapper {
flex-direction: column;
align-items: stretch;
gap: 30px;
pointer-events: auto;
}
/* Slider first, tire image below */
.features-left-scroll {
order: 1;
display: block !important;
width: 100% !important;
max-height: none !important;
height: auto !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding: 0 0 20px 16px;
touch-action: pan-x pan-y;
pointer-events: auto;
}
.features-left-scroll::-webkit-scrollbar {
display: none;
}
.features-left {
display: flex !important;
flex-wrap: nowrap !important;
gap: 16px;
width: max-content !important;
padding-right: 16px;
}
.feature-card {
flex: 0 0 80vw !important;
max-width: 80vw !important;
margin-bottom: 0 !important;
scroll-snap-align: start;
text-align: center !important;
}
.feature-card img {
display: block;
width: 100%;
max-width: 290px;
padding-top: 58px;
margin: 0 auto 12px;
clip-path: polygon(15% 0, 100% 0%, 100% 100%, 0 100%, 0 40%);
}
.feature-card strong,
.feature-card small {
text-align: center !important;
}
.features-right {
order: 2;
width: 100%;
position: relative;
top: 0;
transform: none;
display: flex;
justify-content: center;
pointer-events: none;
}
.features-right img {
width: 100%;
max-width: 240px;
height: auto;
object-fit: contain;
pointer-events: none;
}
.features-right::after {
content: none;
}
}
@media screen and (max-width: 480px) {
.grid-sizer,
.grid-item {
width: 100%; /* 2 columns */
}
.about-us small {
font-size: 28px;
line-height: 40px;
}
.warr-container h4 {
font-size: 14px;
line-height: 19px;
}
}
@media screen and (max-width: 439px) {
}