html{
overflow-x: hidden;
scroll-behavior: smooth;
}
body{
margin: 0;
overflow-x: hidden;
background-color: #fff;
font-family: 'Satoshi';
font-weight: 500 !important;
}
p{
font-weight: normal !important;
font-family: 'Satoshi' !important;
}
[data-aos="blur-up"] {
opacity: 0;
filter: blur(10px);
transform: translateY(40px);
transition: all 0.8s ease;
}
[data-aos="blur-up"].aos-animate {
opacity: 1;
filter: blur(0);
transform: translateY(0);
}
[data-aos="pop-up"] {
opacity: 0;
transform: scale(.5);
transition: all .6s cubic-bezier(.175,.885,.32,1.275);
}
[data-aos="pop-up"].aos-animate {
opacity: 1;
transform: scale(1);
}
/* width */
::-webkit-scrollbar {
width:3px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 0px #b51818;
border-radius:0px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #b51818;
border-radius:0px;
}
@font-face {
font-family: 'Satoshi';
src: url('../fonts/Satoshi-MediumItalic.eot');
src: url('../fonts/Satoshi-MediumItalic.eot?#iefix') format('embedded-opentype'),
url('../fonts/Satoshi-MediumItalic.woff2') format('woff2'),
url('../fonts/Satoshi-MediumItalic.woff') format('woff'),
url('../fonts/Satoshi-MediumItalic.ttf') format('truetype'),
url('../fonts/Satoshi-MediumItalic.svg#Satoshi-MediumItalic') format('svg');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Satoshi';
src: url('../fonts/Satoshi-Medium.eot');
src: url('../fonts/Satoshi-Medium.eot?#iefix') format('embedded-opentype'),
url('../fonts/Satoshi-Medium.woff2') format('woff2'),
url('../fonts/Satoshi-Medium.woff') format('woff'),
url('../fonts/Satoshi-Medium.ttf') format('truetype'),
url('../fonts/Satoshi-Medium.svg#Satoshi-Medium') format('svg');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Satoshi';
src: url('../fonts/Satoshi-Regular.eot');
src: url('../fonts/Satoshi-Regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/Satoshi-Regular.woff2') format('woff2'),
url('../fonts/Satoshi-Regular.woff') format('woff'),
url('../fonts/Satoshi-Regular.ttf') format('truetype'),
url('../fonts/Satoshi-Regular.svg#Satoshi-Regular') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Satoshi';
src: url('../fonts/Satoshi-Black.eot');
src: url('../fonts/Satoshi-Black.eot?#iefix') format('embedded-opentype'),
url('../fonts/Satoshi-Black.woff2') format('woff2'),
url('../fonts/Satoshi-Black.woff') format('woff'),
url('../fonts/Satoshi-Black.ttf') format('truetype'),
url('../fonts/Satoshi-Black.svg#Satoshi-Black') format('svg');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Satoshi';
src: url('../fonts/Satoshi-BlackItalic.eot');
src: url('../fonts/Satoshi-BlackItalic.eot?#iefix') format('embedded-opentype'),
url('../fonts/Satoshi-BlackItalic.woff2') format('woff2'),
url('../fonts/Satoshi-BlackItalic.woff') format('woff'),
url('../fonts/Satoshi-BlackItalic.ttf') format('truetype'),
url('../fonts/Satoshi-BlackItalic.svg#Satoshi-BlackItalic') format('svg');
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Satoshi';
src: url('../fonts/Satoshi-Bold.eot');
src: url('../fonts/Satoshi-Bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/Satoshi-Bold.woff2') format('woff2'),
url('../fonts/Satoshi-Bold.woff') format('woff'),
url('../fonts/Satoshi-Bold.ttf') format('truetype'),
url('../fonts/Satoshi-Bold.svg#Satoshi-Bold') format('svg');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Satoshi';
src: url('../fonts/Satoshi-BoldItalic.eot');
src: url('../fonts/Satoshi-BoldItalic.eot?#iefix') format('embedded-opentype'),
url('../fonts/Satoshi-BoldItalic.woff2') format('woff2'),
url('../fonts/Satoshi-BoldItalic.woff') format('woff'),
url('../fonts/Satoshi-BoldItalic.ttf') format('truetype'),
url('../fonts/Satoshi-BoldItalic.svg#Satoshi-BoldItalic') format('svg');
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Satoshi';
src: url('../fonts/Satoshi-Italic.eot');
src: url('../fonts/Satoshi-Italic.eot?#iefix') format('embedded-opentype'),
url('../fonts/Satoshi-Italic.woff2') format('woff2'),
url('../fonts/Satoshi-Italic.woff') format('woff'),
url('../fonts/Satoshi-Italic.ttf') format('truetype'),
url('../fonts/Satoshi-Italic.svg#Satoshi-Italic') format('svg');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Satoshi';
src: url('../fonts/Satoshi-Light.eot');
src: url('../fonts/Satoshi-Light.eot?#iefix') format('embedded-opentype'),
url('../fonts/Satoshi-Light.woff2') format('woff2'),
url('../fonts/Satoshi-Light.woff') format('woff'),
url('../fonts/Satoshi-Light.ttf') format('truetype'),
url('../fonts/Satoshi-Light.svg#Satoshi-Light') format('svg');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Satoshi';
src: url('../fonts/Satoshi-LightItalic.eot');
src: url('../fonts/Satoshi-LightItalic.eot?#iefix') format('embedded-opentype'),
url('../fonts/Satoshi-LightItalic.woff2') format('woff2'),
url('../fonts/Satoshi-LightItalic.woff') format('woff'),
url('../fonts/Satoshi-LightItalic.ttf') format('truetype'),
url('../fonts/Satoshi-LightItalic.svg#Satoshi-LightItalic') format('svg');
font-weight: 300;
font-style: italic;
font-display: swap;
}
a{
text-decoration: none;
transition: all ease-in-out .5s;
-webkit-transition: all ease-in-out .5s;
-o-transition: all ease-in-out .5s;
-moz-transition: all ease-in-out .5s;
}
a:hover {
text-decoration: none;
transition: all ease-in-out .5s;
-webkit-transition: all ease-in-out .5s;
-o-transition: all ease-in-out .5s;
-moz-transition: all ease-in-out .5s;
}
button{
transition: all ease-in-out .5s;
-webkit-transition: all ease-in-out .5s;
-o-transition: all ease-in-out .5s;
-moz-transition: all ease-in-out .5s;
}
.crmb-50{
float:left;
width:50%;
}
.crmb-hvr{
float: left;
font-size: 15px;
color:#ebc8c8;
}
.crmb-hvr strong{
margin-left:8px; margin-right:8px;
}
.crmb-top{
padding-top: 166px;
float:right;
}
.active-crmb{
float: right;
font-size: 15px;
color: #ffffff;
text-decoration: underline;
}
.crmb-hvr:hover{
color:white;
}
#section-one{
float:left;
width:100%; height:100vh;
background-color:black;
}
#section-two{
float:left;
width:100%;
background-color:#fff2f2;
padding-top:40px; padding-bottom:40px;
}
.cntr-wd {
max-width: 1261px;
}
.owl-time{
float:left;
width:100%;
}
#section-three{
float:left;
width:100%;
padding-top:80px;
padding-bottom:85px;
}
#section-three h1{
color: #000000;
font-weight: 500;
font-size: 65px;
letter-spacing: -2px;
width: 80%;
line-height: 67px;
}
#section-three h1 span{
font-family: "Playfair Display", serif !important;
font-style: italic;
}
.hl-btn{
float:left;
width:40%;
padding-top:119px;
}
.hl-paragraph{
float:left;
width:60%;
}
.hl-paragraph p{
float: left;
width: 100%;
color: #565656;
font-size: 33px;
letter-spacing: -1px;
line-height: 44px;
padding-top: 45px;
padding-right: 20px;
}
.hl-paragraph p span{
font-family: "Playfair Display", serif !important;
font-style: italic;
}
.hl-navk{
float: left;
width: 190px;
height: 50px;
border-radius: 50px;
background: white;
color: #b51818;
text-align: center;
font-weight: 600;
border: solid 1px #f3dcdc;
padding-top: 11px;
margin-right:15px;
}
.hl-navk:hover{
background:#312c2c;
color:white;
}
.hl-navc{float:left;
width: 190px;
height: 50px;
border-radius: 50px;
background:#b51818;
color:white;
text-align: center;
font-weight: 600;
border: solid 1px #b51818;
padding-top: 11px;/* margin-right:15px; */
}
.btn-style905 {
position: relative;
background-color: b51818;
border-width: 1px;
border-color: #b51818;
color: #fff;
box-sizing: border-box;
border-radius: 50px;
}
.btn-style905::before {
width: 110%;
height: 145%;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50px;
border: 1px solid #312c2c;
opacity: 0;
transform: translate(-50%, -50%) scale(1.1);
transform-origin: center center;
transition: all 0.25s;
content: "";
}
.btn-style905:hover {
background-color: #312c2c;
border-color: #312c2c;
border-radius: 50px;
}
.btn-style905:hover::before {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
#section-four{
float:left;
width:100%;
padding-top: 63px;
padding-bottom: 130px;
background: url(../images/1-bg-2.webp);
background-position: center;
height: 472px;
}
#section-four h2{
float: left;
width: 100%;
text-align: center;
color: #000000;
font-weight: 500;
letter-spacing: -2px;
font-size: 60px;
line-height: 60px;
}
#section-four h2 span{
font-family: "Playfair Display", serif !important;
font-style: italic;
}
#section-four p{
float: left;
width: 100%;
text-align: center;
color: #565656;
padding-left: 300px;
padding-right: 300px;
font-size: 17px;
padding-top: 10px;
}
.hl-nav01{/* float:left; */width: 165px;height: 50px;border-radius: 50px;background:#b51818;color:white;text-align: center;font-weight: 600;border: solid 1px #b51818;padding-top: 11px;/* margin-right:15px; */padding-left: 45px;padding-right: 45px;padding-bottom: 11px;}
.btn-style906 {
position: relative;
background-color: #b51818;
border-width: 1px;
border-color: #b51818;
color: #fff;
box-sizing: border-box;
border-radius: 50px;
}
.btn-style906::before {
width: 110%;
height: 145%;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50px;
border: 1px solid #312c2c;
opacity: 0;
transform: translate(-50%, -50%) scale(1.1);
transform-origin: center center;
transition: all 0.25s;
content: "";
}
.btn-style906:hover {
background-color: #312c2c;
border-color: #312c2c;
border-style: inset;
border-radius: 50px;
}
.btn-style906:hover::before {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.exp-cntr{
float:left;
width:100%;
text-align:center;
margin-top: 20px;
}
.rd-crv1{
float: left;
margin-top: 117px;
}
.rd-crv1 img{
float: left;
width:79px;
}
.rd-crv2{
float: right;
margin-top: 117px;
}
.rd-crv2 img{
float: left;
transform: rotate(180deg);
width:79px;
}
#section-five{
float:left;
width:100%;
margin-top:80px;
}
.sec-bg{
float:left;
width:100%;
background: url(../images/2-bg-1-edit.webp);
padding-top:75px;
padding-bottom: 40px;
border-radius:20px;
padding-left: 58px;
padding-right: 58px;
background-size: cover;
background-position: center;
}
#section-five h3{
float:left;
width:100%;
color:white;
font-weight: 500;
letter-spacing: -2px;
font-size: 60px;
line-height: 66px;
}
#section-five h3 span{
font-family: "Playfair Display", serif !important;
font-style: italic;
}
#section-five p{
float: left;
width: 100%;
color: white;
margin-top: 20px;
line-height: 26px;
padding-top: 20px;
}
.psh-left{
float:left;
}
.p5-ticker{
/* height: 600px; */ /* height of one box */
overflow:hidden;
position:relative;
}
.ticker-track{
display:flex;
flex-direction:column;
}
.p5-box{
float:left;
width:100%;
margin-bottom:15px;
}
.p5-box h2{
float:left;
width:auto;
font-family: "Playfair Display", serif !important;
font-style: italic;
color:white;
font-size:60px;
}
.p5-box h2 img{
width: 15px;
margin-top: 8px;
padding-left: 3px;
/* float: right; */
display: inline !important;
}
.p5-box h2 span{
font-family: 'Satoshi' !important;
font-size:28px;
font-weight:500 !important;
font-style:normal !important;
padding-left:7px;
}
.p5-box p{
float:left !important;
width:100% !important;
font-size:17px !important;
color:white !important;
line-height:26px !important;
padding-top: 0px !important;
margin-top:15px !important;
padding-right:85px;
}
.timeline-wrap{
width: 100%;
position:relative;
float: left;
padding-left: 50px;
}
/* Vertical Line */
.timeline-wrap::before{
content:"";
position:absolute;
left: -16px;
top: 0px;
bottom:25px;
height: 101%;
width: 1px;
background: #d0605b;
}
.timeline-wrap::after{
content: "";
position: absolute;
left: -16px;
top: 0px;
width: 1px;
background: linear-gradient(to bottom, rgba(0, 102, 255, 0), #ffffff 30%, #ffffff 70%, rgba(46, 167, 255, 0));
height: 140px; /* length of blue line */
animation: moveLine 9.5s linear infinite;
}
@keyframes moveLine{
0%{
top: -60px;
opacity: 0;
}
10%{
opacity: 1;
}
90%{
opacity: 1;
}
100%{
top: calc(107% - 80px);
opacity: 0;
}
}
.hl-btn-2{
float: left;
width: 100%;
padding-top: 250px;
}
.hl-navc1{float:left;
width: 190px;
height: 50px;
border-radius: 50px;
background:#b51818;
color:white;
text-align: center;
font-weight: 600;
border: solid 1px #b51818;
padding-top: 11px;/* margin-right:15px; */
}
.hl-navc2{float:left;
width: 190px;
height: 50px;
border-radius: 50px;
background:white;
color:white;
text-align: center;
font-weight: 600;
margin-right:18px;
border: solid 1px white;
padding-top: 11px;/* margin-right:15px; */
}
.btn-style908 {
position: relative;
background-color: b51818;
border-width: 1px;
border-color: #b51818;
color: #fff;
box-sizing: border-box;
border-radius: 50px;
}
.btn-style908::before {
width: 110%;
height: 145%;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50px;
border: 1px solid #312c2c;
opacity: 0;
transform: translate(-50%, -50%) scale(1.1);
transform-origin: center center;
transition: all 0.25s;
content: "";
}
.btn-style908:hover {
background-color: #312c2c;
border-color: #312c2c;
border-radius: 50px;
}
.btn-style908:hover::before {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.btn-style907 {
position: relative;
background-color: b51818;
border-width: 1px;
border-color: #b51818;
color: #b51818;
box-sizing: border-box;
border-radius: 50px;
}
.btn-style907::before {
width: 110%;
height: 145%;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50px;
border: 1px solid #fff;
opacity: 0;
transform: translate(-50%, -50%) scale(1.1);
transform-origin: center center;
transition: all 0.25s;
content: "";
}
.btn-style907:hover {
background-color: #fff;
border-color: #fff;
border-style: inset;
border-radius: 50px;
}
.btn-style907:hover::before {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
#section-six{
float:left;
width:100%;
margin-top:50px;
margin-bottom:50px;
}
#section-six h2{
float:left;
width:100%;
text-align:center;
color:black;
font-size:60px;
color: #000000;
font-weight: 500;
letter-spacing: -2px;
line-height: 64px;
}
#section-six h2 span{
font-family: "Playfair Display", serif !important;
font-style: italic;
}
#section-six p{
float: left;
width: 100%;
text-align: center;
font-size: 17px;
color: #565656;
padding-top: 20px;
}
#section-seven{
float:left;
width:100%;
background-color:#fff2f2;
padding-top:70px;
padding-bottom:70px;
}
#section-seven h2{
float:left;
width:100%;
color:black;
font-family: "Playfair Display", serif !important;
font-style: italic;
font-size:40px;
letter-spacing: -2px;
font-weight: 500;
}
#section-seven p{
float: left;
width: 100%;
font-size: 16px;
color: #292727;
font-weight: 500 !important;
line-height: 25px;
padding-top: 15px;
}
.brand-nav{
float:left;
width:100%;
margin-top: 10px;
}
.owl-brands{
float:left;
width:100% !important;
padding-left: 70px;
}
.itm-bg{
float:left;
width:100%;
background-color:white;
padding:25px;
text-align:center;
margin-bottom:17px;
}
.itm-bg img{
display: initial !important;
width:100%;
}
#section-eight{
float:left;
width:100%;
padding-top:70px;
padding-bottom:80px;
background: url(../images/buliding-sketch.webp);
background-repeat:no-repeat;
background-position: right;
}
#section-eight h2 {
float: left;
width: 100%;
text-align: left;
color: black;
font-size: 66px;
color: #000000;
font-weight: 500;
letter-spacing: -2px;
line-height: 73px;
}
#section-eight h2 span {
font-family: "Playfair Display", serif !important;
font-style: italic;
}
#section-eight p{
float: left;
width: 100%;
font-size: 17px;
color: #1e1c1c;
padding-top: 25px;
line-height: 26px;
}
.brand-nav-pro{
float:left;
width:100%;
margin-top: 15px;
}
.hl-navpr1{
float:left;
width: 170px;
height: 50px;
border-radius: 50px;
background:#b51818;
color:white;
text-align: center;
font-weight: 600;
border: solid 1px #b51818;
padding-top: 11px;/* margin-right:15px; */
}
.shop-bg{
float:left;
width:210px;
height:180px;
margin-top:115px;
padding:11px;
border-radius:20px;
background:white;
margin-left: 50px;
}
.shop-bg img{
width:100%;
border-radius:10px;
}
.shop-bg p{
float:left;
width:100%;
text-align: center;
color: black !important;
font-weight: 500 !important;
font-size: 13px !important;
padding-top: 9px !important;
}
.load-bar {
position: relative;
/* margin-top: 20px; */
width: 100%;
height: 6px;
/* background-color: #fdba2c; */
float: left;
}
.bar {
content: "";
display: inline;
position: absolute;
width: 0;
height: 100%;
left: 50%;
text-align: center;
}
.bar:nth-child(1) {
background-color: #da4733;
animation: loading 3s linear infinite;
}
.bar:nth-child(2) {
background-color: #b61918;
animation: loading 3s linear 1s infinite;
}
.bar:nth-child(3) {
background-color: #a31412;
animation: loading 3s linear 2s infinite;
}
@keyframes loading {
from {left: 50%; width: 0;z-index:100;}
33.3333% {left: 0; width: 100%;z-index: 10;}
to {left: 0; width: 100%;}
}
.up-down{
animation: up-down linear 4s;
animation-iteration-count: infinite;
transform-origin: 50% 50%;
-webkit-animation: up-down linear 4s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 50% 50%;
-moz-animation: up-down linear 4s;
-moz-animation-iteration-count: infinite;
-moz-transform-origin: 50% 50%;
-o-animation: up-down linear 4s;
-o-animation-iteration-count: infinite;
-o-transform-origin: 50% 50%;
-ms-animation: up-down linear 4s;
-ms-animation-iteration-count: infinite;
-ms-transform-origin: 50% 50%;
}
@keyframes up-down{
0% {
transform: translate(1px,20px) ;
}
24% {
transform: translate(1px,30px) ;
}
50% {
transform: translate(1px,12px) ;
}
74% {
transform: translate(1px,22px) ;
}
100% {
transform: translate(1px,22px) ;
}
}
@-moz-keyframes up-down{
0% {
-moz-transform: translate(1px,20px) ;
}
24% {
-moz-transform: translate(1px,30px) ;
}
50% {
-moz-transform: translate(1px,12px) ;
}
74% {
-moz-transform: translate(1px,22px) ;
}
100% {
-moz-transform: translate(1px,22px) ;
}
}
@-webkit-keyframes up-down {
0% {
-webkit-transform: translate(1px,20px) ;
}
24% {
-webkit-transform: translate(1px,30px) ;
}
50% {
-webkit-transform: translate(1px,12px) ;
}
74% {
-webkit-transform: translate(1px,22px) ;
}
100% {
-webkit-transform: translate(1px,22px) ;
}
}
@-o-keyframes up-down {
0% {
-o-transform: translate(1px,20px) ;
}
24% {
-o-transform: translate(1px,30px) ;
}
50% {
-o-transform: translate(1px,12px) ;
}
74% {
-o-transform: translate(1px,22px) ;
}
100% {
-o-transform: translate(1px,22px) ;
}
}
@-ms-keyframes up-down {
0% {
-ms-transform: translate(1px,20px) ;
}
24% {
-ms-transform: translate(1px,30px) ;
}
50% {
-ms-transform: translate(1px,12px) ;
}
74% {
-ms-transform: translate(1px,22px) ;
}
100% {
-ms-transform: translate(1px,22px) ;
}
}
#section-nine{
float:left;
width:100%;
background: url(../images/2-bg-1-edit.webp);
padding-top:60px;
padding-bottom:60px;
}
#section-nine h2{
float:left;
width:100%;
font-size: 60px;
color: white;
font-weight: 500;
letter-spacing: -2px;
line-height: 72px;
}
#section-nine h2 span{
font-family: "Playfair Display", serif !important;
font-style: italic;
}
#section-nine p{
float:left;
width:100%;
color:white;
font-size:16px;
line-height: 28px;
margin-top: 75px;
}
.p6-carousel {
float: left;
width: 100%;
padding-left: 69px;
margin-top: 50px;
}
/* Circle */
.column {
margin: 15px 15px 0;
padding: 0;
}
.column:last-child {
padding-bottom: 60px;
}
.column::after {
content: '';
clear: both;
display: block;
}
.column div {
position: relative;
float: left;
width: 300px;
height: 200px;
margin: 0 0 0 25px;
padding: 0;
}
.column div:first-child {
margin-left: 0;
}
.column div span {
position: absolute;
bottom: -20px;
left: 0;
z-index: -1;
display: block;
width: 300px;
margin: 0;
padding: 0;
color: #444;
font-size: 18px;
text-decoration: none;
text-align: center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
opacity: 0;
}
figure {
/* width: 300px; */
/* height: 200px; */
margin: 0;
padding: 0;
/* background: #fff; */
overflow: hidden;
border-radius: 12px;
}
figure:hover+span {
bottom: -36px;
opacity: 1;
}
.column span{
float: left;
width: 100%;
color: white;
font-size: 19px;
line-height: 23px;
text-align: center;
position: absolute;
bottom: -12px;
background: #B51818;
background: linear-gradient(1deg, rgb(79 3 3) 0%, rgb(220 69 69 / 15%) 100%);
padding-bottom: 40px;
padding-top: 42px;
}
.hover15 img{
width:100%;
border-radius: 12px;
}
.hover15 figure {
position: relative;
}
.hover15 figure::before {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
display: block;
content: '';
width: 0;
height: 0;
background: rgba(255,255,255,.2);
border-radius: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
}
.hover15 figure:hover::before {
-webkit-animation: circle .75s;
animation: circle .75s;
}
@-webkit-keyframes circle {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
width: 200%;
height: 200%;
opacity: 0;
}
}
@keyframes circle {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
width: 200%;
height: 200%;
opacity: 0;
}
}
#section-ten{
float:left;
width:100%;
background:#fff2f2;
padding-top:55px;
padding-bottom:55px;
}
#section-ten h2{
float: left;
width: 100%;
font-size: 60px;
color: #000;
font-weight: 500;
letter-spacing: -2px;
line-height:68px;
}
#section-ten h2 span{
font-family: "Playfair Display", serif !important;
font-style: italic;
}
.hd-division{
float:left;
width:100%;
padding-left: 69px;
}
.hd-division p{
float:left;
width:100%;
font-size: 17px;
color: #1e1c1c;
padding-top: 11px;
line-height: 26px;
}
.p7-carousel{
float:left;
width:100%;
}
.header-nav{
margin-top: 27px;
}
.hrd-bg{
float:left;
width:100%;
background:white;
border:solid 1px #e5e5e5;
border-radius: 12px;
text-align: center;
}
.hrd-bg img{
width:100%;
padding: 45px;
border-radius: 12px;
}
.hvr-hrd{
float:left;
width:100%;
}
.hvr-hrd:hover{
-webkit-filter: grayscale(0);
filter: none;
}
.hvr-hrd p{
float:left;
width:100%;
color:black !important;
font-size:20px;
padding-left:20px;
padding-top:15px;
font-weight: 500 !important;
}
#section-eleven{
float:left;
width:100%;
background: #fff;
padding-top: 55px;
padding-bottom:35px;
}
#section-eleven h2{
float:left;
width:100%;
text-align:center;
color: #000000;
font-size: 60px;
font-weight: 500;
letter-spacing: -2px;
margin-bottom:50PX;
}
#section-eleven h2 span{
font-family: "Playfair Display", serif !important;
font-style: italic;
}
.value-bg{
float:left;
width:100%;
border-radius: 12px;
background: #fff2f2 url('../images/icon-overlay.webp') no-repeat;
padding-top: 39px;
padding-bottom: 39px;
padding-left:40px;
background-position: right;
}
.value-bg img{
width:45px;
transition: 0.70s;
-webkit-transition: 0.70s;
-moz-transition: 0.70s;
-ms-transition: 0.70s;
-o-transition: 0.70s;
}
.value-bg:hover{
transition: 0.70s;
-webkit-transition: 0.70s;
-moz-transition: 0.70s;
-ms-transition: 0.70s;
-o-transition: 0.70s;
background: #f6f1f1 url('../images/red-overlay.webp') no-repeat;
background-position: right;
}
.value-bg p{
float: left;
width: 100%;
font-family: 'Satoshi' !important;
color: #000;
font-size: 23px;
font-weight: 500 !important;
line-height: 27px;
padding-top:41px;
margin-bottom: 0px;
}
.loading-line {
display:none;
position: relative;
width: 100%;
height: 2px;
background: #e9e9e9;
overflow: hidden;
}
.loading-line span {
position: absolute;
left: -30%;
top: 0;
width: 30%;
height: 100%;
background: #e30613;
animation: lineFill 2s linear infinite;
}
@keyframes lineFill {
0% {
left: -30%;
width: 30%;
}
100% {
left: 100%;
width: 30%;
}
}
.owl-values{
float:left;
width:100%;
margin-bottom:45px;
}
#footer{
float:left;
width:100%;
background:#b51818;
text-decoration: none;
transition: all ease-in-out .5s;
-webkit-transition: all ease-in-out .5s;
-o-transition: all ease-in-out .5s;
-moz-transition: all ease-in-out .5s;
}
#footer img{
width:100%;
opacity: .3;
margin-bottom:35px;
text-decoration: none;
transition: all ease-in-out .5s;
-webkit-transition: all ease-in-out .5s;
-o-transition: all ease-in-out .5s;
-moz-transition: all ease-in-out .5s;
}
#footer:hover .ftr-logo{
opacity: 1;
text-decoration: none;
transition: all ease-in-out .5s;
-webkit-transition: all ease-in-out .5s;
-o-transition: all ease-in-out .5s;
-moz-transition: all ease-in-out .5s;
}
.fadeinout
{
animation: fadeinout 4s infinite;
}
@keyframes fadeinout
{
0%{
opacity:0;
}
50%
{
opacity:1;
}
100%
{
opacity:0;
}
}
.ftr-section{
float:left;
width:100%;
padding-top:30px;
padding-bottom: 30px;
}
.ftr-section h2{
float: left;
width: 100%;
color: white;
font-size: 18px;
font-weight: 500;
margin-top: 10px;
}
.nav-ftrsec{
float:left;
width:100%;
margin-top:13px;
}
.nav-ftr{
float: left;
width: 100%;
color: rgb(255 255 255 / 77%);
font-size: 15px;
font-weight: 400;
padding-bottom: 13px;
}
.nav-ftr:hover{
color:white !important;
}
.nav-ftrsec p{
float: left;
width: 100%;
line-height: 27px;
color: rgb(255 255 255 / 77%);
font-size: 15px;
font-weight: 400;
}
.pl50{
padding-left:50px;
}
.gls-social{
float: left;
margin-top: 5px;
margin-bottom: 5px;
}
.platforms{
opacity: 0.7;
float:left;
margin-right: 12px;
}
.platforms img{
width: 35px !important;
margin-bottom: 0px !important;
}
.platforms:hover{
opacity: 1;
}
#white-ftr{
float:left;
width:100%;
background:white;
padding-top: 28px;
padding-bottom: 27px;
}
#white-ftr p{
float:left;
width:100%;
font-size: 16px;
color: #1e1c1c;
margin-bottom: 0px;
padding-bottom: 0px;
}
.tnm{
font-size: 16px;
color: #1e1c1c;
font-weight: 400;
text-align: right;
}
.tnm:hover{
color:#b51818;
}
.marquee{
width:100%;
overflow:hidden;
padding: 50px 0;
padding-bottom: 30px;
}
.marquee-track{
display:flex;
gap: 0;
width:max-content;
}
.pill{
display:flex;
align-items:center;
}
.pill span{
padding: 18px 40px;
border:1px solid #ddd;
border-radius:60px;
white-space:nowrap;
font-size: 29px;
color: black;
font-weight: 400;
letter-spacing: -1px;
text-decoration: none;
transition: all ease-in-out .5s;
-webkit-transition: all ease-in-out .5s;
-o-transition: all ease-in-out .5s;
-moz-transition: all ease-in-out .5s;
}
.pill:hover span{
border:1px solid #c40000;
text-decoration: none;
transition: all ease-in-out .5s;
-webkit-transition: all ease-in-out .5s;
-o-transition: all ease-in-out .5s;
-moz-transition: all ease-in-out .5s;
}
.circle{
width:80px;
height:80px;
border-radius:50%;
background:#c40000;
color:#fff;
display:flex;
justify-content:center;
align-items:center;
text-decoration: none;
transition: all ease-in-out .5s;
-webkit-transition: all ease-in-out .5s;
-o-transition: all ease-in-out .5s;
-moz-transition: all ease-in-out .5s;
font-size:34px;
/* margin-left:-18px; */
}
.circle:hover{
background:#312c2c;
text-decoration: none;
transition: all ease-in-out .5s;
-webkit-transition: all ease-in-out .5s;
-o-transition: all ease-in-out .5s;
-moz-transition: all ease-in-out .5s;
}
.hero-slider {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.bg-slider {
position: absolute;
inset: 0;
}
.bg-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1.2s ease;
z-index: 1;
}
.bg-slide.active {
opacity: 1;
z-index: 2;
}
.bg-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.overlay-bnr{
position:absolute;
inset:0;
background:rgb(0 0 0 / 4%);
z-index:3;
}
.hero-content{
position:absolute;
right:8%;
bottom:12%;
width:700px;
z-index:5;
}
.title-wrapper{
position:relative;
height:250px;
overflow:hidden;
}
.title{
position:absolute;
width:100%;
opacity:0;
}
.title.active{
opacity:1;
}
.title h1{
color:#fff;
font-size:90px;
line-height:1;
font-weight:500;
}
.title span{
font-style:italic;
font-family:Georgia,serif;
font-weight:400;
}
@media(max-width:991px){
.hero-content{
left:25px;
right:25px;
width:auto;
}
.title h1{
font-size:58px;
}
}
@media(max-width:576px){
.title-wrapper{
height:150px;
}
.title h1{
font-size:40px;
}
}
.title-wrapper{
position:relative;
overflow:hidden;
width:700px;
height:220px;
}
.title{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:flex-start;
}
.title h1{
color:#fff;
font-size:80px;
line-height:1;
}
.white-overlay{
position:absolute;
inset:0;
background:#fff;
transform:translateX(-101%);
z-index:100;
}
.reveal-box{
position:absolute;
top:0;
left:0;
width:110%;
height:100%;
background:#fff;
transform:translateX(-120%) skewX(-20deg);
z-index:20;
pointer-events:none;
}
.hero-heading{
position:relative;
width:700px;
height: 190px;
overflow:hidden;
}
.slide{
position:absolute;
inset:0;
/* display:flex; */
align-items: end;
opacity:0;
}
.slide.active{
opacity:1;
}
.slide h1{
font-size: 90px;
line-height: 85px;
color:#fff;
font-weight:500;
text-align:right;
letter-spacing: -2px;
}
.slide span{
font-style:italic;
font-family:Georgia,serif;
}
/* Premium Reveal Mask */
.reveal-mask{
position:absolute;
top:0;
left:0;
width:0%;
height:100%;
background:#fff;
transform-origin:left;
z-index:50;
}
.hero-slider{
height:100vh;
position:relative;
overflow:hidden;
background:#111;
}
.bg-slider{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}
.bg-slide{
position:absolute;
width:100%;
height:100%;
opacity:0;
overflow:hidden;
}
.bg-slide.active{
opacity:1;
z-index:2;
}
.bg-slide img{
width:100%;
height:100%;
object-fit:cover;
transform:scale(1.15);
}
.overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.35);
z-index:3;
}
.hero-content{position:absolute;right:8%;bottom: 9%;width:700px;z-index:5;/* height: 199px; */}
.title-wrapper{
position:relative;
height:250px;
overflow:hidden;
}
.title{
position:absolute;
width:100%;
opacity:0;
}
.title.active{
opacity:1;
}
.title h1{
color:#fff;
font-size:90px;
line-height:1;
font-weight:500;
}
.title span{
font-style:italic;
font-family:Georgia,serif;
font-weight:400;
}
@media(max-width:991px){
.hero-content{
left:25px;
right:25px;
width:auto;
}
.title h1{
font-size:58px;
}
}
@media(max-width:576px){
.title-wrapper{
height:150px;
}
.title h1{
font-size:40px;
}
}
#page-bnr{
float:left;
width:100%;
background-size:cover !important;
/* height:250px; */
background: url(../images/2-bg-1-edit.webp);
background-position: bottom;
padding-bottom: 20px
}
#page-section{
float:left;
width:100%;
padding-top:50px;
padding-bottom:50px;
}
#page-section h2{
float:left;
width:100%;
color:#000000;
font-weight: 500;
letter-spacing: -2px;
font-size: 60px;
line-height: 66px;
}
#page-section h2 span{
font-family: "Playfair Display", serif !important;
font-style: italic;
}
#page-section p{
float: left;
width: 100%;
font-size: 19px;
/* color: #ffffff; */
padding-top: 12px;
line-height: 31px;
margin-bottom: 40px;
}
/* LEFT SIDE */
.ux-contact-left{background: #b51818;color:#fff;padding: 31px 41px;display:flex;flex-direction:column;gap:30px;float: left;width: 35%;align-items: stretch;justify-content: center;border-top-left-radius: 20px;border-bottom-left-radius: 20px;}
/* CONTACT CARD */
.ux-contact-card{border:1px solid rgba(255,255,255,0.2);padding:25px;transition:0.4s;cursor:pointer;border-radius: 20px;}
.ux-contact-card:hover{background: #bc3e3e;color:#fff;transform:translateY(-6px);}
.ux-contact-card:hover p{
color:#fff;
}
.ux-contact-card:hover a{
color:#fff;
}
.ux-contact-card h4{margin:10px 0;font-size: 18px;font-weight: 600;color: white;padding-top: 9px;}
.ux-contact-card p{font-size: 16px !important;line-height: 26px !important;color: white !important;margin-bottom: 6px !important;padding-bottom: 0px !important;padding-top: 9px !important;}
.ux-contact-card p a{font-size: 16px;/* line-height: 1.8; */color: #ffffff;text-decoration: none;}
/* ICON */
.ux-contact-icon{width: 30px;filter: brightness(100);}
/* RIGHT FORM */
.ux-contact-right{background: #fbf7f7;padding:60px; padding-bottom:80px;
float: left;width: 65%;display: flex;align-items: center;border-top-right-radius: 20px;border-bottom-right-radius: 20px;}
/* FORM GRID */
.ux-contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
}
/* INPUT GROUP */
.ux-input-group{display:flex;flex-direction:column;margin-bottom: 35px;float: left;width: 100%;}
.ux-input-group label{font-size: 16px;margin-bottom: 0px;font-weight: 600;}
.ux-input-group input,
.ux-input-group textarea{border:none;border-bottom: 1px solid #a8a5a5;padding:10px 0;font-size: 16px;outline:none;transition:0.3s;background: #fbf7f7;color: #000;width: 100%;z-index: 0;}
.ux-input-group textarea{
height:100px;
resize:none;
}
/* INPUT HOVER */
.ux-input-group input:focus,
.ux-input-group textarea:focus{
border-color:#000;
}
.frm-active{
background: #8e1818;
border: #8e1818;
}
.gmaps{
float:left;
width:100%;
margin-top:50px;
}
.gmaps iframe{
border-radius:15px;
}
.mail-bld{
float:left;
width:100%;
padding-bottom:8px;
}
/* Expertise Selector */
.expertise-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
/* background: #e0e0e0; */
/* border: 1px solid #e0e0e0; */
}
.expertise-item {
background: #fff;
padding: 20px;
margin-top: 16px;
cursor: pointer;
/* border: 1px solid #ccc; */
transition: 0.3s;
border-radius: 8px;
}
.expertise-item input {
display: none;
}
.expertise-content strong {
display: block;
font-size: 16px;
/* margin-bottom: 5px; */
font-weight: 500;
}
.expertise-content span {
font-size: 14px;
color: #906868;
/* display: none; */
font-weight: 500;
}
.expertise-item:has(input:checked) {
background: #272121;
color: #fff;
}
.hl-conatct{float:left;width: 190px;height: 50px;border-radius: 50px;background: #231f1f;color:white;text-align: center;font-weight: 500;margin-right:18px;border: solid 1px white;/* padding-top: 11px; *//* margin-right:15px; */border: none;outline: none;}
.btn-styleconatct {
position: relative;
background-color: b51818;
border-width: 1px;
/* border-color: #b51818; */
color: #ffffff;
box-sizing: border-box;
border-radius: 50px;
cursor: pointer;
}
.btn-styleconatct::before {
width: 110%;
height: 145%;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50px;
border: 1px solid #b51818;
opacity: 0;
transform: translate(-50%, -50%) scale(1.1);
transform-origin: center center;
transition: all 0.25s;
content: "";
}
.btn-styleconatct:hover {
background-color: #b51818;
border-color: #fff;
/* border-style: inset; */
border-radius: 50px;
}
.btn-styleconatct:hover::before {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
/* Form Layout */
.form-main-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 35px 40px;
}
.full-col {
grid-column: span 2;
}
.input-set {
display: flex;
flex-direction: column;
position: relative;
}
.input-no {
font-size: 16px;
font-weight: 700;
margin-bottom: 15px;
color: #b51818;
}
.input-set label {
font-size: 18px;
font-weight: 600;
/* text-transform: capitalize; */
/* letter-spacing: -1px; */
/* color: black; */
}
.input-set input,
.input-set textarea {
border: none;
border: 1px solid #ccc;
padding: 15px 0;
font-size: 15px;
outline: none;
transition: padding-left 0.4s ease;
border-radius: 10px;
padding-left: 18px;
margin-top: 5px;
}
.input-set input:focus {
padding-left: 15px;
}
.expertise-grid-nw {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
/* background: #e0e0e0; */
/* border: 1px solid #e0e0e0; */
}
.expertise-item-nw {
background: #fff2f2;
padding: 20px;
margin-top: 16px;
cursor: pointer;
/* border: 1px solid #ccc; */
transition: 0.3s;
border-radius: 8px;
}
.expertise-item-nw input {
display: none;
}
.expertise-content-nw strong {
display: block;
font-size: 16px;
/* margin-bottom: 5px; */
font-weight: 500;
}
.expertise-content-nw span {
font-size: 14px;
color: #8d8d8d;
display: none;
}
.expertise-item-nw:has(input:checked) {
background: #272121;
color: #fff;
}
.form-footer {
display: flex;
justify-content: space-between;
align-items: center;
/* margin-top: 40px; */
}
.upload-minimal {
position: relative;
overflow: hidden;
}
.upload-minimal input {
position: absolute;
opacity: 0;
}
.upload-minimal label {
font-size: 14px;
font-weight: 700;
text-decoration: underline;
cursor: pointer;
}
.upload-minimal label span {
font-weight: 400;
color: #999;
margin-left: 10px;
}
.hl-career{float:left;width: 190px;height: 50px;
border-radius: 50px;background: #231f1f;color:white;text-align: center;
font-weight: 500;margin-right:0px;border: solid 1px white;/* padding-top: 11px; *//* margin-right:15px; */
border: none;outline: none;}
.btn-stylecareer {
position: relative;
background-color: b51818;
border-width: 1px;
/* border-color: #b51818; */
color: #ffffff;
box-sizing: border-box;
border-radius: 50px;
cursor: pointer;
}
.btn-stylecareer::before {
width: 110%;
height: 145%;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50px;
border: 1px solid #b51818;
opacity: 0;
transform: translate(-50%, -50%) scale(1.1);
transform-origin: center center;
transition: all 0.25s;
content: "";
}
.btn-stylecareer:hover {
background-color: #b51818;
border-color: #fff;
/* border-style: inset; */
border-radius: 50px;
}
.btn-stylecareer:hover::before {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
/*==========================================
Google Font
==========================================*/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');
/*==========================================
Variables
==========================================*/
:root{
--primary:#d21f26;
--secondary:#0f172a;
--dark:#09111f;
--text:#6b7280;
--white:#ffffff;
--light:#f7f8fa;
--border:#ececec;
--radius:18px;
--transition:.4s ease;
}
/*==========================================
Global
==========================================*/
.py-120{
padding:120px 0;
}
.section-tag{
display:inline-block;
font-size:14px;
font-weight:600;
letter-spacing:2px;
text-transform:uppercase;
color:var(--primary);
margin-bottom:18px;
}
.section-title-wh{font-size: 50px;font-weight: 500;letter-spacing: -1px;margin-bottom: 20px;color: #ffffff;text-align: center;line-height: 63px;}
.section-title-wh span{
font-family: "Playfair Display", serif !important;
font-style: italic;
}
.section-desc{
max-width:700px;
margin:auto;
color:var(--text);
}
/*==========================================
Buttons
==========================================*/
.btn-main{
display:inline-flex;
align-items:center;
justify-content:center;
padding:16px 40px;
background:var(--primary);
color:#fff;
font-weight:600;
border-radius:60px;
transition:.35s;
box-shadow:0 15px 35px rgba(210,31,38,.18);
}
.btn-main:hover{
transform:translateY(-6px);
color:#fff;
box-shadow:0 25px 45px rgba(210,31,38,.30);
}
.btn-border{
display:inline-flex;
align-items:center;
justify-content:center;
padding:16px 40px;
border:2px solid #fff;
border-radius:60px;
font-weight:600;
color:#fff;
transition:.35s;
}
.btn-border:hover{
background:#fff;
color:#111;
}
/*==========================================
Hero
==========================================*/
.why-hero{
position:relative;
padding:180px 0;
background:url(images/hero.jpg) center center/cover;
overflow:hidden;
}
.why-hero::before{
content:"";
position:absolute;
inset:0;
background:rgba(5,13,30,.78);
}
.why-hero .container{
position:relative;
z-index:2;
}
.why-hero h1{
font-size:72px;
font-weight:800;
line-height:1.08;
color:#fff;
margin-bottom:30px;
}
.why-hero p{
font-size:20px;
color:rgba(255,255,255,.75);
max-width:760px;
margin:auto;
}
.hero-btns{
display:flex;
justify-content:center;
gap:18px;
flex-wrap:wrap;
}
/*==========================================
Intro
==========================================*/
.intro-section{
background:#fff;
}
.intro-section h2{
float: none !important;
}
.intro-section p{
float: none !important;
width: 100%;
font-size: 16px !important;
color: #000000;
padding-top: 12px;
line-height: 29px !important;
margin-bottom: 40px;
font-weight: 400 !important;
}
.intro-section img {
float: right;
margin-left: 60px;
/* margin-top: 15px; */
width: 380px;
}
.intro-image{
overflow:hidden;
border-radius:22px;
}
.intro-image img{
transition:1s;
}
.intro-image:hover img{
transform:scale(1.08);
}
/*==========================================
Feature Cards
==========================================*/
.features-section{
float: left;
width: 100%;
/* background: rgb(255 242 242 / 46%); */
padding-top: 50px;
padding-bottom: 50px;
background: linear-gradient(176deg,rgba(181, 24, 24, 1) 0%, rgba(219, 57, 57, 1) 100%);
color: var(--primary);
}
.feature-card{
position:relative;
background: #ba1c1c;
padding: 30px;
border-radius: 10px;
/* height:100%; */
transition:.4s;
overflow:hidden;
/* */
/* border:1px solid rgba(0,0,0,.05); */
margin-bottom: 37px;
float: left;
width: 100%;
}
.feature-card::before{content:"";position:absolute;top:0;left:0;width:2px;height:100%;background: rgb(255 255 255 / 15%);transform:scaleY(0);transition:.5s;transform-origin: center;}
.feature-card:hover::before{
transform:scaleY(1);
}
.feature-card:hover{/* transform:translateY(-12px); */box-shadow:0 30px 60px rgba(0,0,0,.08);}
.feature-icon{width:80px;height:80px;border-radius: 10%;display:flex;align-items:center;justify-content:center;font-size:34px;background: #9f1313;/* background: linear-gradient(176deg,rgba(181, 24, 24, 1) 0%, rgba(219, 57, 57, 1) 100%); */color:var(--primary);margin-bottom:28px;transition:.4s;}
.feature-icon img {
width: 45px;
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
}
.feature-card:hover .feature-icon{background: #4a3636;color:#fff;transform:rotate(360deg);}
.feature-card h4{/* font-size: 23px; *//* font-weight:700; */margin-bottom: 11px;color: #fff;}
.feature-card p{color: #ffffff;margin:0;font-size: 16px;line-height: 26px;}
/*==========================================
Division Cards
==========================================*/
.division-section{
float:left;
width:100%;
padding-top:50px;
padding-bottom:50px;
background:#fff;
}
.division-section h2{
font-size: 50px;
font-weight: 500;
letter-spacing: -1px;
margin-bottom: 20px;
color: #000000;
text-align: left;
line-height: 60px;
}
.division-section h2 span{
font-family: "Playfair Display", serif !important;
font-style: italic;
}
.division-box{background:#fff;border-radius: 20px;padding: 30px;position:relative;overflow:hidden;border:1px solid rgba(0,0,0,.08);transition:.4s;}
.division-box:hover{
transform:translateY(-10px);
box-shadow:0 30px 60px rgba(0,0,0,.08);
}
.division-box::after{
content:"";
position:absolute;
top:0;
right:0;
width:170px;
height:170px;
background:rgba(210,31,38,.05);
border-radius:50%;
transform:translate(40%,-40%);
}
.division-icon-imgs{width: 100%;/* height: 240px; *//* background:var(--primary); */color:#fff;/* font-size:38px; */display:flex;align-items:center;justify-content:center;/* border-radius: 10px; */margin-bottom: 26px;/* box-shadow:0 20px 35px rgba(210,31,38,.30); */}
.division-icon-imgs img{
border-radius:10px;
}
.division-box h3{font-size: 27px;font-weight: 500;margin-bottom: 13px;color: #000000;}
.division-box p{color: #000000;margin-bottom: 5px !important;font-size: 16px !important;line-height: 27px !important;}
.division-box ul{
padding:0;
margin:0 0 35px;
list-style:none;
}
.division-box ul li{
padding:12px 0;
border-bottom:1px solid #eee;
color:#555;
font-weight:500;
}
.division-box ul li:last-child{
border-bottom:none;
}
/*==================================================
PROCESS TIMELINE
==================================================*/
.process-section{
position:relative;
background:#f8fafc;
}
.process-wrapper{
position:relative;
margin-top:70px;
}
.process-line{
position:absolute;
left:50%;
top:0;
transform:translateX(-50%);
width:3px;
height:100%;
background:#e5e7eb;
}
.process-line::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to bottom,#d21f26,#ff8c42);
}
.process-card{
position:relative;
display:flex;
align-items:center;
}
.process-card.left{
justify-content:flex-end;
padding-right:70px;
}
.process-card.right{
justify-content:flex-start;
padding-left:70px;
}
.process-number{
position:absolute;
top:50%;
transform:translateY(-50%);
width:60px;
height:60px;
border-radius:50%;
background:#fff;
border:3px solid #d21f26;
display:flex;
justify-content:center;
align-items:center;
font-size:18px;
font-weight:700;
color:#d21f26;
z-index:3;
box-shadow:0 15px 35px rgba(0,0,0,.08);
}
.process-card.left .process-number{
right:-31px;
}
.process-card.right .process-number{
left:-31px;
}
.process-content{
background:#fff;
border-radius:20px;
padding:40px;
width:100%;
transition:.4s;
box-shadow:0 20px 40px rgba(0,0,0,.05);
}
.process-content:hover{
transform:translateY(-10px);
box-shadow:0 35px 60px rgba(0,0,0,.08);
}
.process-icon{
width:70px;
height:70px;
border-radius:50%;
background:#d21f26;
color:#fff;
display:flex;
justify-content:center;
align-items:center;
font-size:28px;
margin-bottom:20px;
}
.process-content h4{
font-size:28px;
font-weight:700;
margin-bottom:15px;
color:#0f172a;
}
.process-content p{
color:#6b7280;
margin:0;
}
/*==================================================
INDUSTRIES
==================================================*/
.industry-section{
background:#fff;
}
.industry-card{
background:#fff;
border-radius:20px;
padding:45px 30px;
text-align:center;
border:1px solid #ececec;
transition:.4s;
height:100%;
}
.industry-card:hover{
transform:translateY(-12px);
box-shadow:0 30px 60px rgba(0,0,0,.08);
}
.industry-card i{
font-size:46px;
color:#d21f26;
margin-bottom:20px;
transition:.4s;
}
.industry-card:hover i{
transform:scale(1.15) rotate(8deg);
}
.industry-card h5{
font-size:24px;
font-weight:700;
margin-bottom:10px;
color:#0f172a;
}
.industry-card p{
margin:0;
color:#6b7280;
}
/*==================================================
COUNTER
==================================================*/
.counter-section{
background:#09111f;
float:left;
width:100%;
}
.counter-box{
text-align:center;
padding:50px 30px;
border-radius:20px;
background:rgba(255,255,255,.05);
backdrop-filter:blur(10px);
transition:.4s;
}
.counter-box:hover{
transform:translateY(-10px);
background:#d21f26;
}
.counter-box h2{
font-size:64px;
font-weight:800;
color:#fff;
margin-bottom:10px;
}
.counter-box p{
color:rgba(255,255,255,.8);
margin:0;
text-transform:uppercase;
letter-spacing:1px;
}
/*==================================================
CTA
==================================================*/
.cta-section{
position:relative;
float:left;
width:100%;
/* padding: 7px 47px; */
/* background:url(images/cta-bg.jpg) center/cover no-repeat; */
margin-bottom: 55px;
}
.cta-section::before{
/* content:""; */
position:absolute;
inset:0;
/* background:rgba(6,15,35,.88); */
}
.cta-section .container{
position:relative;
z-index:2;
}
.cta-box{
padding: 35px;
border-radius: 20px;
background: rgb(0 0 0);
backdrop-filter:blur(18px);
padding-bottom: 50px;
padding-top: 40px;
padding-left: 50px;
padding-right: 50px;
}
.cta-box img{
width:100%;
}
.cta-box h2{
color:#fff;
font-size: 47px;
font-weight: 500;
margin-bottom: 17px;
line-height: 60px;
}
.cta-box h2 span{
font-family: "Playfair Display", serif !important;
font-style: italic;
}
.cta-box p{
color: rgb(255 255 255 / 81%);
font-size: 16px;
margin-bottom:0;
padding-right: 100px;
line-height: 28px;
}
/*==================================================
RESPONSIVE
==================================================*/
@media(max-width:1199px){
.section-title{
font-size:42px;
}
.why-hero h1{
font-size:58px;
}
.cta-box h2{
font-size:42px;
}
}
@media(max-width:991px){
.py-120{
padding:90px 0;
}
.why-hero{
padding:140px 0;
}
.why-hero h1{
font-size:46px;
}
.section-title{
font-size:36px;
}
.process-line{
left:25px;
}
.process-card.left,
.process-card.right{
justify-content:flex-start;
padding-left:80px;
padding-right:0;
}
.process-card.left .process-number,
.process-card.right .process-number{
left:-5px;
right:auto;
}
.division-box{
padding:40px;
}
.cta-box{
padding:60px 40px;
text-align:center;
}
.cta-box .text-lg-end{
text-align:center!important;
margin-top:40px;
}
}
@media(max-width:767px){
.py-120{
padding:70px 0;
}
.why-hero{
padding:110px 0;
}
.why-hero h1{
font-size:38px;
}
.section-title{
font-size:30px;
}
.hero-btns{
flex-direction:column;
align-items:center;
}
.btn-main,
.btn-border{
width:100%;
max-width:320px;
}
.feature-card,
.division-box,
.counter-box,
.industry-card,
.process-content{
padding:30px;
}
.counter-box h2{
font-size:48px;
}
.cta-box{
padding:40px 25px;
}
.cta-box h2{
font-size:34px;
}
}
@media(max-width:575px){
#section-eight {
float: left;
width: 100%;
padding-top: 70px;
padding-bottom: 0;
background-image: url(../images/buliding-sketch.webp);
background-repeat: no-repeat;
background-position: right;
background-color: #fff;
background-position: 50% 100%;
height: 810px;
}
#section-one {
float: left;
width: 100%;
height: 92vh;
background-color: black;
}.hero-slider {
height: 92vh;
position: relative;
overflow: hidden;
background: #111;
}
.ux-contact-right {
margin-top: 30px;
background: #fbf7f7;
padding: 30px;
padding-bottom: 80px;
float: left;
width: 65%;
display: flex;
align-items: center;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}.ux-contact-card h4 {
text-align: center;}.ux-contact-icon {
width: 30px;
filter: brightness(100);
display: block;
margin: auto;
}.hl-conatct{
float:none;display:table;margin:auto;
}
.dl-navpr1{
float: none !important;
margin: auto;
display: table;
}
#page-section h2 {
font-size: 30px!important;
line-height: 39px!important;
text-align: center;
}
#dv-brands h2{
font-size: 30px!important;
line-height: 39px!important;
text-align: center;
}
#page-section p{
text-align: center;
}.section-title-wh {
font-size: 32px!important;
font-weight: 500;
letter-spacing: -1px;
margin-bottom: 20px;
color: #ffffff;
text-align: center;
line-height: 40px!important;
} .feature-icon {
width: 65px;
height: 65px;
font-size: 28px;
margin: auto!important;
} .feature-card, .division-box, .counter-box, .industry-card, .process-content {
padding: 30px;
text-align: center;
} .division-section h2 {
font-size: 29px!important;
line-height: 36px!important;
text-align: center;
margin: 0;
}
.advantage-item{
text-align: center;
}.cta-box{
padding: 20px !important;
text-align: center !important;
}.cta-box h2{
text-align: center !important;
}.cta-box p{
text-align: center !important;
}.cta-navc2{
margin: auto;
display: inline-block;
float: none !important;
}
.advan-headdings h2 {
float: left;
width: 100%;
font-size: 30px !important;
font-weight: 500;
letter-spacing: -1px;
margin-bottom: 20px;
color: #000000;
text-align: center !important;
line-height: 34px !important;
margin-top: 0px;
margin-bottom: 5px;
}
.categ-headdings h2 {
float: left;
width: 100%;
font-size: 30px!important;
font-weight: 500;
letter-spacing: -1px;
margin-bottom: 20px;
color: #000000;
text-align: center!important;
line-height: 34px!important;
margin-top: 0px;
margin-bottom: 0!important;
}
.bm-head h2{
text-align: center !important;
font-size: 33px !important;
line-height: 40px !important;
}
.bm-about-content p{
text-align: center;
}
.bm-about-content h3{
font-size: 30px !important;
text-align: center !important;
line-height: 40px !important;
}
.bm-about-wrapper img{
width:100%!important;
}
.btn-style907{
width: 48%;
float: none;
display: inline-block;
margin: auto;
}.btn-style908{
width: 48%;
float: none;
display: inline-block;
margin: auto;
}
.hl-btn-2{
padding-top: 10px;
}
#section-five p{
text-align:center;
margin-top: 0;
padding-top: 10px;
}
#section-five h3{
font-size: 37px;
line-height: 40px;
text-align: center;
}
.timeline-wrap{
padding-left: 0;
}
.p5-box p{
text-align: center;
padding-right: 0;
}
.sec-bg{
padding: 30px 15px;
}
.hl-paragraph p{
text-align:center;
padding-right: 0;
}
.hl-navk{
float: none;
display: inline-block;
margin: auto;
width: 48%;
}.hl-navc{
float: none;
display: inline-block;
margin: auto;
width: 48%;
}
.why-hero h1{
font-size:32px;
}
.section-title{
font-size:26px;
}
.section-tag{
font-size:12px;
}
.process-number{
width:50px;
height:50px;
font-size:16px;
}
.process-icon{
width:60px;
height:60px;
font-size:24px;
}
.division-icon{
width:70px;
height:70px;
font-size:30px;
}
.feature-icon{
width:65px;
height:65px;
font-size:28px;
}
}
.dl-navpr1{
float:left;
width: 185px;
height: 50px;
border-radius: 50px;
background:#b51818;
color:white;
text-align: center;
font-weight: 600;
border: solid 1px #b51818;
padding-top: 11px;/* margin-right:15px; */
margin-top: 15px;
}
.d1-style908 {
position: relative;
background-color: b51818;
border-width: 1px;
border-color: #b51818;
color: #fff;
box-sizing: border-box;
border-radius: 50px;
}
.d1-style908::before {
width: 110%;
height: 145%;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50px;
border: 1px solid #312c2c;
opacity: 0;
transform: translate(-50%, -50%) scale(1.1);
transform-origin: center center;
transition: all 0.25s;
content: "";
}
.d1-style908:hover {
background-color: #312c2c;
border-color: #312c2c;
border-style: inset;
border-radius: 50px;
}
.d1-style908:hover::before {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.cta-navc2{
float:left;
width: 190px;
height: 50px;
border-radius: 50px;
background:white;
color:white;
text-align: center;
font-weight: 600;
margin-right:18px;
border: solid 1px white;
padding-top: 11px;
margin-top: 24px;
}
.cta-style907 {
position: relative;
background-color: b51818;
border-width: 1px;
/* border-color: #b51818; */
color: #000000;
box-sizing: border-box;
border-radius: 50px;
}
.cta-style907::before {
width: 110%;
height: 145%;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50px;
border: 1px solid #fff;
opacity: 0;
transform: translate(-50%, -50%) scale(1.1);
transform-origin: center center;
transition: all 0.25s;
content: "";
}
.cta-style907:hover {
background-color: #fff;
border-color: #fff;
/* border-style: inset; */
border-radius: 50px;
}
.cta-style907:hover::before {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.logo-wrap{
position:relative;
overflow:hidden;
}
.logo-b1{
animation:logoReveal 10s ease-in-out infinite;
}
.logo-wrap::after{
content:'';
position:absolute;
inset:0;
background:#000;
animation:maskReveal 10s ease-in-out infinite;
}
@keyframes maskReveal{
0%{
transform:translateX(0%);
}
30%{
transform:translateX(100%);
}
80%{
transform:translateX(100%);
}
100%{
transform:translateX(0%);
}
}
@keyframes logoReveal{
0%{
opacity:0;
transform:scale(.92);
}
30%{
opacity:1;
transform:scale(1);
}
80%{
opacity:1;
transform:scale(1);
}
100%{
opacity:0;
transform:scale(.92);
}
}
.who-we-are{padding:70px 0;position:relative;/* overflow:hidden; */float: left;width: 100%;padding-bottom: 0;}
.about-grid{/* display:grid; *//* grid-template-columns:1fr 1fr; *//* gap:80px; *//* align-items:center; */float: left;width: 100%;}
.image-wrap{
overflow:hidden;
border-radius:30px;
position:relative;
}
.image-wrap img{
width:100%;
display:block;
transition:1s;
}
.about-image:hover img{
transform:scale(1.08);
}
.experience-card{
position:absolute;
bottom:35px;
right:-20px;
background:rgba(255,255,255,.55);
backdrop-filter:blur(18px);
padding:28px 40px;
border-radius:24px;
box-shadow:0 30px 60px rgba(0,0,0,.12);
}
.experience-card h2{
font-size:60px;
color:var(--primary);
}
.experience-card span{
font-size:15px;
}
.about-content h3{font-size:42px;margin-bottom:25px;font-size: 50px;font-weight: 500;letter-spacing: -1px;margin-bottom: 20px;color: #000000;text-align: left;line-height: 60px;}
.about-content p{font-size:17px;line-height:1.9;margin-bottom:22px;color:#666;float: none !important;width: 100%;
font-size: 16px !important;color: #000000;padding-top: 5px;line-height: 28px !important;
margin-bottom: 3px;font-weight: 400 !important;}
.about-content h3 span{
font-family: "Playfair Display", serif !important;
font-style: italic;
}
.about-content img{
float: left;
margin-right: 50px;
border-radius: 15px;
margin-top: 20px;
}
.stats{/* display:flex; *//* gap:25px; *//* margin-top: 70px; */text-align: left;float: left;width: 100%;}
.stat{flex:1;/* padding:28px; *//* background:rgba(255,255,255,.55); *//* backdrop-filter:blur(15px); *//* border: 1px solid rgb(0 0 0 / 28%); */border-radius: 10px;transition:.4s;/* box-shadow:0 20px 50px rgba(0,0,0,.08); */}
.stat:hover{
transform:translateY(-10px);
}
.stat h2{font-size: 60px;color: #1c1717;font-weight: bold; float:left; letter-spacing: -1px;}
.stat p{margin-top: 0px;
font-size: 19px !important;
/* font-weight: normal !important; */
padding-top: 0;
font-weight: 500 !important;
color: #000;
float: left;
width: 100%;
font-size: 18px;
margin-bottom: 0px !important;}
@media(max-width:991px){
.about-grid{
grid-template-columns:1fr;
}
.section-title{
font-size:42px;
}
.stats{
flex-direction:column;
}
.experience-card{
right:20px;
}
}
/*====================================
Journey
====================================*/
.journey-section{padding: 50px 0;background: #fff2f2;overflow:hidden;float: left;width: 100%;padding-bottom: 75px;}
.journey-header{
text-align:center;
max-width:760px;
margin:auto auto 35px;
}
.journey-title{
font-size: 54px;
font-weight: 500;
letter-spacing: -1px;
margin-bottom: 20px;
color: #000000;
text-align: center;
line-height: 64px;
}
.journey-title span{
font-family: "Playfair Display", serif !important;
font-style: italic;
}
.journey-header p{color:#666;font-size:18px;line-height:1.8;color: #000000;margin-bottom: 5px;font-size: 18px;line-height: 30px;}
.timeline-wrapper{position:relative;padding-top:50px;padding-left: 25px;padding-right: 25px;}
.timeline-line{position:absolute;top:32px;left:0;width:100%;height:3px;background: rgb(181 24 24 / 21%);}
.timeline-progress{position:absolute;top:32px;left:0;height:3px;width:0;background: #b51818;}
.timeline-grid{display:grid;grid-template-columns: repeat(6,1fr);gap:25px;}
.timeline-item{
position:relative;
text-align:center;
}
.dot{width:22px;height:22px;background:#fff;border: 5px solid rgb(210 21 21 / 75%);border-radius:50%;margin:auto;position:relative;z-index:2;transition:.4s;}
.dot.active{
background:#0A6CFF;
box-shadow:0 0 25px rgba(10,108,255,.55);
}
.glass-card{margin-top: 25px;padding: 20px;border-radius: 13px;background: rgb(255 255 255);/* backdrop-filter:blur(18px); *//* box-shadow:0 25px 60px rgba(0,0,0,.08); */transition:.45s;text-align: left;}
.glass-card:hover{
transform:translateY(-12px);
}
.glass-card span{display:inline-block;margin-bottom:10px;color: #ffffff;font-weight: 700;font-size: 16px;/* text-decoration: underline; */background: #4f4444;padding-left: 9px;padding-right: 9px;border-radius: 5px;}
.glass-card h3{margin-bottom:15px;font-size: 17px;font-weight: 500;line-height: 24px;/* text-decoration: underline; */}
.glass-card p{font-size:15px;color:#666;line-height:1.7;display: none;}
@media(max-width:991px){
.timeline-grid{
grid-template-columns:1fr;
}
.timeline-line,
.timeline-progress{
display:none;
}
.timeline-item{
text-align:left;
padding-left:40px;
margin-bottom:40px;
}
.dot{
position:absolute;
left:0;
top:15px;
margin:0;
}
.glass-card{
margin-top:0;
}
}
.line{
overflow:hidden;
}
.word{
display:inline-block;
transform-origin:50% 100%;
}
.char{
display:inline-block;
transform-origin:50% 100%;
will-change:transform;
}
#core-section{
float:left;
width:100%;
padding-bottom:0px;
}
.core-center{
float:left;
width:100%;
padding-top: 50px;
/* padding-bottom: 50px; */
}
.core-center h2 {
font-size: 50px;
font-weight: 500;
letter-spacing: -1px;
margin-bottom: 20px;
color: #000000;
text-align: left;
line-height: 55px;
}
.core-center h2 span {
font-family: "Playfair Display", serif !important;
font-style: italic;
}
.core-center p{
color: #000000;
margin-bottom: 5px;
font-size: 16px;
line-height: 27px;
float:left;
width:100%;
}
.core-lst{
float:left;
width:100%;
margin-bottom:75px;
text-decoration: none;
transition: all ease-in-out .5s;
-webkit-transition: all ease-in-out .5s;
-o-transition: all ease-in-out .5s;
-moz-transition: all ease-in-out .5s;
}
.core-lst:hover{
background: linear-gradient( 16deg, rgb(119 118 118 / 30%), #ffffff, #ffffff, rgb(209 152 152 / 59%) );
text-decoration: none;
transition: all ease-in-out .5s;
-webkit-transition: all ease-in-out .5s;
-o-transition: all ease-in-out .5s;
-moz-transition: all ease-in-out .5s;
}
.core-lst img{
width: 43px;
}
.core-lst{
/* width:320px; */
/* height:200px; */
position:relative;
border-radius:20px;
background: linear-gradient(
135deg,
rgb(119 118 118 / 30%),
#ffffff,
#ffffff,
rgb(209 152 152 / 59%)
);
padding:2px;
}
.content-core{
width:100%;
height:100%;
background: #ffffff;
border-radius:18px;
/* display:flex; */
/* justify-content:center; */
align-items:center;
color:#fff;
font-size:22px;
/* font-family:sans-serif; */
padding: 25px;
float: left;
}
.core-lst::before{
content:"";
position:absolute;
/* inset:-8px; */
background:inherit;
/* filter:blur(20px); */
/* opacity:.5; */
z-index:-1;
border-radius:25px;
}
.content-core h3{
float:left;
width:100%;
font-family: 'Satoshi' !important;
color: #000;
font-size: 21px;
font-weight: 600 !important;
line-height: 27px;
padding-top: 18px;
}
.content-core p{
float:left;
width:100%;
color: #000;
margin: 0;
font-size: 16px;
line-height: 25px;
font-weight: 400 !important;
padding-bottom: 20px;
padding-top: 6px;
}
#chairman-journey {
float: left;
width: 100%;
padding-bottom:30px;
padding-top: 70px;
}
.chairman-center h2 {
font-size: 50px;
font-weight: 500;
letter-spacing: -1px;
margin-bottom: 20px;
color: #000000;
text-align: left;
line-height: 55px;
}
.chairman-center h2 span {
font-family: "Playfair Display", serif !important;
font-style: italic;
}
.ambassador {
display: grid;
grid-template-columns: .78fr 1.22fr;
gap: 0;
overflow: hidden;
border-radius: 28px;
margin-bottom:45px;
background: #b51818;
color: #fff;
box-shadow: var(--shadow);
}
.ambassador-photo {
min-height: 510px;
background: black;
background: url(../images/ab-chairman.webp);
display: grid;
place-items: center;
text-align: center;
color: var(--navy);
background-size:cover;
padding: 40px;
}
.ambassador-photo strong {
display: block;
font-size: 1.25rem;
}
.ambassador-copy {
padding: 64px;
display: flex;
flex-direction: column;
justify-content: center;
}
.eyebrow {
font-size: 16px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
color: white !important;
}
.ambassador-copy h2 {
max-width: 100%;
font-size: 42px;
font-weight: 600;
padding-bottom: 18px;
letter-spacing: -1px;
}
.ambassador-copy h2 span{
font-family: "Playfair Display", serif !important;
font-style: italic;
}
.ambassador-copy p {
color: rgb(255 255 255 / 91%);
font-size: 16px;
font-weight: 400 !important;
line-height: 27px;
float:left;
width:100%;
}
.ambassador-copy .quote-line {
font-size: 21px;
color: #fff;
padding-left: 20px;
border-left: 3px solid #e95353;
margin: 18px 0 28px;
font-weight: 600 !important;
/* background: aliceblue; */
}
.chairman-desg{
color: white;
font-weight: 600 !important;
font-style: italic;
font-size: 18px;
padding-top: 8px;
line-height: 27px;
float: left;
width: 100%;
}
.chairman-desg span{
float: left;
width: 100%;
font-weight: 300;
font-size: 17px;
font-style: normal;
padding-top: 2px;
}
.vm{
float:left;
width:100%;
background-color: #f3f9fd;
padding:45px;
border-radius:15px;
}
.vm h3{
float: left;
width: 100%;
font-size: 30px;
font-weight: 500;
letter-spacing: -1px;
margin-bottom: 20px;
color: #000000;
line-height: 40px;
}
.vm p{
float: left;
width: 100%;
font-size: 17px;
color: black;
line-height: 27px;
padding-top: 90px;
font-weight: 400 !important;
}
/*==================================
Building Materials About Section
==================================*/
.section-padding{padding: 50px 0;}
.bm-about{background:#fff;float: left;width: 100%;}
.section-title{
max-width:700px;
margin:auto;
text-align:center;
margin-bottom:80px;
}
.section-title span{
display:inline-block;
color:var(--primary);
font-size:14px;
font-weight:700;
text-transform:uppercase;
letter-spacing:2px;
margin-bottom:15px;
}
.section-title h2{
font-size:48px;
line-height:1.2;
font-weight:700;
color:var(--dark);
}
.bm-about-wrapper{display:grid;grid-template-columns:1fr 1fr;gap: 40px;align-items:center;float: left;width: 100%;}
.bm-about-image{
position:relative;
}
.bm-about-image img{
width:100%;
border-radius:25px;
display:block;
}
.experience-box{
position:absolute;
bottom:-30px;
right:-30px;
width:180px;
height:180px;
background:white;
border-radius:20px;
box-shadow:0 20px 50px rgba(0,0,0,.12);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.experience-box h3{
color:var(--primary);
font-size:55px;
margin-bottom:10px;
}
.experience-box p{
color:#777;
font-size:15px;
text-align:center;
}
.bm-about-content h3{font-size:38px;line-height:1.3;margin-bottom:25px;color:var(--dark);font-size: 50px;font-weight: 500;letter-spacing: -1px;margin-bottom: 20px;color: #000000;text-align: left;line-height:60px;}
.bm-about-content h3 span{
font-family: "Playfair Display", serif !important;
font-style: italic;
}
.bm-about-content p{
color: #000000;
line-height: 1.9;
margin-bottom: 20px;
font-size: 16px;
}
.feature-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
margin:40px 0;
}
.feature-item{
display:flex;
align-items:center;
gap:12px;
font-weight:600;
color:#333;
}
.feature-item i{
color:var(--primary);
font-size:18px;
}
.primary-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:16px 38px;
border-radius:50px;
background:var(--primary);
color:#fff;
text-decoration:none;
font-weight:600;
transition:.35s;
}
.primary-btn:hover{
transform:translateY(-4px);
box-shadow:0 15px 35px rgba(194,139,44,.35);
}
/*=========================
Responsive
==========================*/
@media(max-width:991px){
.bm-about-wrapper{
grid-template-columns:1fr;
}
.experience-box{
position:relative;
bottom:auto;
right:auto;
margin-top:-60px;
margin-left:auto;
margin-right:auto;
}
.section-title h2{
font-size:36px;
}
.bm-about-content h3{
font-size:30px;
}
}
@media(max-width:767px){
.section-padding{padding: 80px 0 30px;}
.feature-grid{
grid-template-columns:1fr;
}
.section-title h2{
font-size:30px;
}
.bm-about-content h3{
font-size:26px;
}
}
/*==========================
WHY CHOOSE US
==========================*/
.why-choose{/* background: #fff2f2; */float: left;width: 100%;padding-bottom: 70px;padding-top: 15px;}
.section-heading{/* max-width:760px; *//* margin:auto; */text-align: left;margin-bottom:44px; float:left; width:100%;}
.section-heading span{/* color:#c28b2c; *//* font-size:14px; *//* font-weight:700; *//* letter-spacing:2px; *//* text-transform:uppercase; */}
.section-heading h2{
margin:15px 0 20px;
font-size:46px;
color:#111;
line-height:1.2;
}
.section-heading p{
color:#666;
line-height:1.8;
}
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:35px;float: left;width: 100%;}
.why-card{position:relative;padding:45px;background: #fff2f2;/* backdrop-filter:blur(15px); */border-radius:22px;/* border:1px solid rgba(255,255,255,.6); */overflow:hidden;transition:.4s;}
.why-card::before{
content:'';
position:absolute;
left:0;
top:0;
width:4px;
height:100%;
background:#2f2e2c;
transform:scaleY(0);
transform-origin:top;
transition:.4s;
}
.why-card:hover{
transform:translateY(-12px);
box-shadow:0 25px 60px rgb(0 0 0 / 3%);
}
.why-card:hover::before{
transform:scaleY(1);
}
.number{
position:absolute;
right:25px;
top:20px;
font-size:70px;
font-weight:700;
color:#f2f2f2;
line-height:1;
}
.icon{width:75px;height:75px;border-radius:18px;background: #b51818;display:flex;align-items:center;justify-content:center;font-size:30px;color: #ffffff;box-shadow: 0 15px 35px rgb(181 24 24 / 0%);margin-bottom:30px;}
.icon img{
width: 45px;
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
}
.why-card h3{font-size: 25px;margin-bottom: 12px;font-weight: 500;}
.why-card p{color: #000;line-height: 28px;font-size: 16px;}
@media(max-width:991px){
.why-grid{
grid-template-columns:1fr;
}
.section-heading h2{
font-size:36px;
}
}
@media(max-width:767px){
.why-card{padding:35px;text-align: center;}.icon{
display: inline-flex;
margin: 0 auto 20px;
}
.section-heading h2{
font-size:30px;
}
.number{
font-size:55px;
}
}
/*==========================
PRODUCT CATEGORIES
===========================*/
.product-category{background:#fff;float: left;width: 100%;padding-top: 0px;}
.category-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
float: left;
width: 100%;
gap:30px;
}
.category-card{position:relative;/* height:480px; */overflow:hidden;border-radius: 19px;cursor:pointer;}
.category-card img{
width:100%;
height:100%;
object-fit:cover;
transition:.8s;
}
.category-card::after{
content:'';
position:absolute;
inset:0;
background: linear-gradient( to top, rgb(0 0 0 / 65%), rgba(0,0,0,.45), rgba(0,0,0,.05));
}
.overlay-ctg{
position:absolute;
left:35px;
right:35px;
bottom:35px;
z-index:2;
color:#fff;
}
.overlay-ctg span{
font-size: 12px;
font-weight: 700;
color: rgb(255 255 255);
/* display: block; */
/* margin-bottom: 16px; */
background: rgb(0 0 0 / 68%);
border-radius: 10px;
padding: 8px;
letter-spacing: 1px;
}
.overlay-ctg h3{font-size:21px;
margin-bottom:15px;
float: left; width:100%; margin-top:12px;
line-height:30px; margin-top:17px; font-weight:500;}
.overlay p{
line-height:1.8;
opacity:.9;
margin-bottom:25px;
}
.overlay a{
display:inline-flex;
align-items:center;
gap:10px;
color:#fff;
text-decoration:none;
font-weight:600;
transition:.3s;
}
.overlay a i{
transition:.3s;
}
.category-card:hover img{
transform:scale(1.12);
}
.category-card:hover a{
color:#d6a037;
}
.category-card:hover a i{
transform:translateX(8px);
}
.category-card::before{
content:'';
position:absolute;
inset:20px;
border:1px solid rgba(255,255,255,.25);
border-radius:15px;
z-index:1;
opacity:0;
transition:.4s;
}
.category-card:hover::before{
opacity:1;
}
@media(max-width:991px){
.category-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:767px){
.category-grid{
grid-template-columns:1fr;
}
.category-card{
height:400px;
}
.overlay h3{
font-size:24px;
}
}
/*===================================
OUR ADVANTAGES
===================================*/
.advantages{
/* background:#f8f8f8; */
float: left;
width: 100%;
padding-bottom: 25px;
padding-top: 30px;
}
.center{
text-align:center;
max-width:760px;
margin:0 auto 70px;
}
.advantages-wrapper{
/* display:grid; */
/* grid-template-columns:42% 58%; */
gap:70px;
align-items:center;
float: left;
width: 100%;
}
.advantages-image{
position:sticky;
top:100px;
}
.advantages-image img{
width:100%;
display:block;
border-radius:24px;
}
.floating-card{
position:absolute;
bottom:30px;
right:-25px;
background:#fff;
border-radius:18px;
padding:25px 35px;
box-shadow:0 20px 50px rgba(0,0,0,.12);
}
.floating-card h3{
color:#c28b2c;
font-size:46px;
margin-bottom:5px;
}
.floating-card span{
font-size:14px;
color:#666;
}
.advantage-item{
/* display:flex; */
/* gap:30px; */
padding:28px 0;
border-bottom:1px solid #e8e8e8;
transition:.35s;
float: left;
padding-top: 0px;
margin-bottom:40px;
}
.advantage-item:hover{
transform:translateX(10px);
}
.number-adv{
font-size: 35px;
font-weight: 500;
color: #ececec;
min-width: 100%;
margin-bottom: 6px;
}
.content h3{
margin-bottom:12px;
color:#111;
font-size: 22px;
font-weight: 600;
padding-top: 5px;
}
.content p{
color: #000;
line-height: 28px;
font-size: 16px;
margin-bottom: 0px;
}
.advantage-item:hover .number{
color:#c28b2c;
}
@media(max-width:991px){
.advantages-wrapper{
grid-template-columns:1fr;
}
.advantages-image{
position:relative;
top:0;
}
.floating-card{
right:20px;
}
}
@media(max-width:767px){
.advantage-item{
gap:18px;
}
.number{
font-size:34px;
min-width:50px;
}
.content h3{
font-size:20px;
}
.floating-card{
position:relative;
right:auto;
bottom:auto;
margin-top:20px;
}
}
.bm-head{
float:left;
width:100%;
}
.bm-head h2{
float:left;
width:100%;
font-size: 50px;
font-weight: 500;
letter-spacing: -1px;
margin-bottom: 20px;
color: #000000;
text-align: left;
line-height: 68px;
margin-top: 0px;
margin-bottom: 5px;
}
.bm-head span{
font-family: "Playfair Display", serif !important;
font-style: italic;
}
.categ-headdings{
float:left;
width:100%;
}
.categ-headdings h2{
float: left;
width: 100%;
font-size: 50px;
font-weight: 500;
letter-spacing: -1px;
margin-bottom: 20px;
color: #000000;
text-align: left;
line-height: 64px;
margin-top: 0px;
margin-bottom: 5px;
}
.categ-headdings h2 span{
font-family: "Playfair Display", serif !important;
font-style: italic;
}
.lft-psh{
float:left;
}
.advan-headdings{
float:left;
width:100%;
}
.advan-headdings h2{
float: left;
width: 100%;
font-size: 50px;
font-weight: 500;
letter-spacing: -1px;
margin-bottom: 20px;
color: #000000;
text-align: left;
line-height: 64px;
margin-top: 0px;
margin-bottom: 5px;
}
.advan-headdings h2 span{
font-family: "Playfair Display", serif !important;
font-style: italic;
}
.hd-logo{
float:left;
}
.hd-logo img {
width: 240px;
}
.showMenu{
float:right;
}
#hd-menu{
float:left;
width:100%;
padding-top: 16px;
position:absolute;
z-index: 111;
}
.container-menu {
display: flex;
width: 100%;
height: 70px;
/* background: #ff8400; */
justify-content: space-between;
align-items: center;
overflow: hidden;
}
.header-logo {
margin-left:0px;
flex-grow: 1;
}
.header-logo img {
/* max-width: 50px; */
}
.search-container {
position: relative;
margin-right: 10px;
width: 40px;
transition: width 0.4s;
}
.search-container.search-active {
width: 250px;
}
@media screen and (max-width: 360px) {
.search-container.search-active {
width: 150px;
}
}
.search-container #search {
color: white;
width: 75%;
background: #f07c00;
border: none;
padding: 10px 20px;
position: absolute;
top: 0;
right: 5px;
border-radius: 20px;
}
.search-container #search:focus {
outline: none;
}
.search-container #search::-moz-placeholder {
color: white;
font-size: 0.9em;
opacity: 0.75;
}
.search-container #search:-ms-input-placeholder {
color: white;
font-size: 0.9em;
opacity: 0.75;
}
.search-container #search::placeholder {
color: white;
font-size: 0.9em;
opacity: 0.75;
}
#search-icon {
color: white;
font-size: 2.2em;
opacity: 0.7;
margin-right: 200px;
position: relative;
transition: all 0.5s;
}
#search-icon.search-active {
left: 15px;
z-index: 999;
}
@media screen and (max-width: 360px) {
#search-icon.search-active {
left: -5px;
}
}
#search-icon:hover {
cursor: pointer;
opacity: 1;
}
.hamburger {
position: relative;
width: 30px;
height: 23px;
z-index: 999;
margin-right: 50px;
cursor: pointer;
}
.hamburger.nav-open span:first-child {
transform: rotate(135deg);
top: 10px;
}
.hamburger.nav-open span:nth-child(2) {
left: 100px;
opacity: 0;
}
.hamburger.nav-open span:last-child {
transform: rotate(-135deg);
top: 10px;
}
.hamburger span {
width: 100%;
height: 1px;
background: #fff;
position: absolute;
display: block;
transition: all 0.3s;
}
.hamburger span:first-child {
top: 0;
}
.hamburger span:nth-child(2) {
top: 10px;
left: 0;
}
.hamburger span:last-child {
top: 20px;
}
.menu {
width: 100%;
/* height: calc(100vh - 70px); */
position: absolute;
top: 22px;
left: 100%;
/* outline: 1px solid white; */
/* background: #ff8400; */
transition: all 0.3s;
padding-left: 445px;
}
.menu.nav-open {
left: 0;
}
.menu > li {
position: relative;
list-style: none;
padding: 15px;
/* border-bottom: 1px solid #f07c00; */
float: left;
padding-left: 22px;
padding-right: 22px;
}
.menu > li > a {
text-decoration: none;
color: white;
font-weight: 400;
/* text-transform: uppercase; */
font-size: 15px;
line-height: 1.4;
}
.menu > li > a.active::after {
opacity: 1;
}
.menu > li > a::after {
/* content: ""; */
width: auto;
height: auto;
position: absolute;
top: 50%;
right: 50%;
transform: translateY(-50%);
border-right: 13px solid #f07c00;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
display: block;
opacity: 0;
}
.sub-menu {
position: fixed;
top: 70px;
right: 0;
width: 50%;
height: calc(100vh - 70px);
background: #f07c00;
overflow: auto;
opacity: 0;
z-index: -1;
transition: opacity 0.3s ease-in-out;
}
.sub-menu.active {
opacity: 1;
z-index: 999;
}
.sub-menu li {
list-style: none;
padding: 15px 20px;
font-size: 0.9em;
border-bottom: 1px solid #ff8400;
cursor: default;
}
.sub-menu li a {
text-decoration: none;
color: white;
font-weight: 700;
text-transform: uppercase;
}
.sub-menu li a:hover {
color: gold;
}
.sub-menu .title {
font-size: 1.4em;
color: white;
font-weight: 700;
padding: 15px 15px 15px 15px;
border-bottom: 1px solid white;
}
.sub-menu .links {
display: flex;
}
@media screen and (max-width: 600px) {
.sub-menu .links {
flex-direction: column;
}
}
.sub-menu .links li {
padding: 5px 15px 5px 0;
border: none;
}
.sub-menu .links li a {
color: gold;
font-size: 0.7em;
}
.sub-menu .links li a:hover {
color: white;
}
.crd-dv-bg{
background: #f9f9f9;
}
#page-bnr h3{
float: left;
width: 100%;
color: white;
font-size: 50px;
font-weight: 600;
padding-top: 130px;
text-align: left;
}
#page-bnr p{
float: left;
width: 100%;
color: white;
font-size: 16px;
line-height: 26px;
padding-top: 3px;
padding-bottom: 19px;
}
.hero-bntx{
float:left;
position: absolute;
left: 6%;
bottom: 12%;
width: 341px;
z-index: 5;
}
.hero-bntx p{
float:left;
width:100%;
color:white;
font-size: 16px;
line-height: 26px;
margin-bottom: 26px;
}
.hr-bnt{
float:left;
width:100%;
margin-bottom: 25px;
}
.hr-bnt img{
width: 25px;
margin-bottom: 18px;
}
@media only screen and (max-width:979px) {
.brand-lst img{width:100%;}
}
@media only screen and (max-width:767px) {
.brl-50{width:33%;}
}
@media only screen and (max-width:500px) {
.brl-50{width:50%;}
}
@media only screen and (max-width:584px) {
.about-content img{width:100%;}
}
@media only screen and (max-width:528px) {
.core-center h2{font-size: 34px !important;line-height: 43px !important;text-align: center;}
.core-center{ padding-top: 5px;}
.core-lst{margin-bottom: 20px;}
.journey-title{ font-size: 34px !important; line-height: 43px !important;}
}
@media only screen and (max-width:951px) {
.owl-brands{padding-left:0px; margin-top: 20px;}
}
@media only screen and (max-width:800px) {
#page-section h2{font-size: 40px; line-height:48px;}
#dv-brands h2 {font-size: 40px !important; line-height:48px !important;}
.division-section h2{font-size: 40px; line-height:48px;}
.division-icon-imgs{justify-content: left;}
.core-center h2 {font-size: 40px; line-height:48px;}
.core-center{ margin-bottom: 22px !important;}
.about-content h3{font-size: 40px; line-height:48px;}
.journey-title{font-size: 40px; line-height:48px;}
.journey-header p{padding-right:15px; padding-left:15px;}
#section-six h2{font-size: 50px !important; line-height:59px !important;}
#section-six p{padding-top:8px;}
.timeline-wrapper{padding-top:9px;}
.timeline-item{margin-bottom:5px;}
#page-section p{padding-top: 0px;}
.ux-contact-left{float:left; width:100%; border-radius:20px !important;}
.ux-contact-right{float:left; width:100%; border-radius:20px !important;}
.intro-section h2{float:left !important;}
.intro-section p {float:left !important;}
.intro-section img{display:none;}
.division-section{padding-top:45px;}
#section-eight h2{font-size:50px !important;}
#section-four h2{font-size:50px !important;}
.rd-crv1{display:none;}
.rd-crv2{display:none;}
#section-four{height:100%; padding-top:40px; padding-bottom:60px; background: #fff2f2;}
#section-four p{padding-left: 20px !important; padding-right: 20px !important;}
}
@media only screen and (max-width:767px) {
#section-seven{padding-top:40px;}
.owl-brands{margin-top:40px;}
#section-seven{padding-bottom: 5px;}
}
@media only screen and (max-width:570px) {
.form-main-grid{display: block;}
.input-set{margin-bottom: 25px}
.expertise-grid-nw{display: block;}
.expertise-item-nw{width:100%; float:left; margin-bottom:0px; margin-top:8px;}
.input-no{margin-bottom: 9px;}
#page-section p{margin-bottom: 29px; margin-bottom:0px;}
}
@media only screen and (max-width:630px) {
.division-icon-imgs img{width:100%;}
}
@media only screen and (max-width:991px) {
.cta-box h2{text-align:left;}
.cta-box p {text-align:left;}
.cta-box img{width:50%; margin-top: 35px;}
.cta-box{ text-align: left; padding: 30px 40px;}
}
@media only screen and (max-width:530px) {
.cta-box p{padding-right:0px;}
.cta-box h2{line-height:45px !important;}
}
@media only screen and (max-width:885px) {
.about-content h3{float:left; width:100%; padding-top: 25px;}
.about-content p {float:left !important; width:100% !important;}
}
@media only screen and (max-width:760px) {
.ambassador-photo{display:none;}
.ambassador-copy{width:100%; padding:40px;}
.ambassador{display:block;}
}
@media only screen and (max-width:767px) {
.vm p{padding-top:10px;}
.vm{padding:30px;}
.vm h3{font-size:25px; line-height:35px;}
}
@media only screen and (max-width:1055px) {
#section-three h1{font-size: 58px; width:100%; margin-bottom:22px;}
#section-six h2{font-size: 58px;}
.hl-btn{width:100%; padding-top: 20px;}
.hl-paragraph{width:100%; float:left;}
.hl-paragraph p{font-size: 30px;padding-top: 25px;}
#section-four p{padding-left: 100px; padding-right: 100px;}
#section-four h2{font-size: 58px;}
}
@media only screen and (max-width:1000px) {
.hero-bntx{display:none;}
.hero-content{width:100%; right: 0px; left: 0px;}
.hero-heading{width:100%;}
.slide h1{text-align:center; font-size: 80px; line-height: 80px;}
}
@media only screen and (max-width:600px) {
.slide h1{text-align: center;
font-size: 55px;
line-height: 55px;}
.hero-heading{height:134px;}
}
@media only screen and (max-width:900px) {
.je-md50{width:100% !important; max-width: 100% !important;}
.hl-btn-2 {padding-top: 15px;}
.timeline-wrap::after{display:none !important;}
.timeline-wrap::before{display:none !important;}
}
@media only screen and (max-width:414px) {
.slide h1{ text-align: center;
font-size: 45px;
line-height: 45px;}
.hero-heading{height:100px;}
}
@media (min-width:1420px) and (max-width:1441px) {
.p6-carousel{padding-left:7%;}
.hd-division{padding-left:7%;}
.hero-bntx{left: 8%;}
.hero-content{right: 9%;}
}
@media (min-width:1442px) and (max-width:1520px) {
.p6-carousel{padding-left:8%;}
.hd-division{padding-left:8%;}
.hero-bntx{left: 8%;}
.hero-content{right: 9%;}
}
@media (min-width:1442px) and (max-width:1504px) {
.hero-bntx{left: 8%;}
.hero-content{right: 9%;}
}
@media (min-width:1505px) and (max-width:1600px) {
.hero-bntx{left: 10%;}
.hero-content{right:11%;}
}
@media (min-width:1601px) and (max-width:1700px) {
.hero-bntx{left: 12%;}
.hero-content{right:13%;}
}
@media (min-width:1701px) and (max-width:1800px) {
.hero-bntx{left: 14%;}
.hero-content{right:15%;}
}
@media (min-width:1801px) and (max-width:1900px) {
.hero-bntx{left: 16%;}
.hero-content{right:17%;}
}
@media (min-width:1901px) and (max-width:2000px) {
.hero-bntx{left: 18%;}
.hero-content{right:19%;}
}
@media (min-width:2001px) and (max-width:2100px) {
.hero-bntx{left: 20%;}
.hero-content{right:21%;}
}
@media (min-width:2101px) and (max-width:2200px) {
.hero-bntx{left: 22%;}
.hero-content{right:23%;}
}
@media (min-width:2201px) and (max-width:2299px) {
.hero-bntx{left: 24%;}
.hero-content{right:25%;}
}
@media only screen and (max-width:501px) {
.stat h2{font-size:30px;}
.text{top:-5px !important; margin-left:7px !important; font-size:30px !important;}
.stat p{font-size: 16px !important;}
}
@media (min-width:1521px) and (max-width:1565px) {
.p6-carousel{padding-left: 146px;}
.hd-division{padding-left: 146px;}
}
@media (min-width:1564px) and (max-width:1612px) {
.p6-carousel{padding-left: 170px;}
.hd-division{padding-left: 170px;}
}
@media (min-width:1613px) and (max-width:1660px) {
.p6-carousel{padding-left: 193px;}
.hd-division{padding-left: 193px;}
}
@media (min-width:1661px) and (max-width:1681px) {
.p6-carousel{padding-left:217px;}
.hd-division{padding-left: 217px;}
}
@media (min-width:1682px) and (max-width:1750px) {
.p6-carousel{padding-left:228px;}
.hd-division{padding-left: 228px;}
}
@media (min-width:1750px) and (max-width:1800px) {
.p6-carousel{padding-left:255px;}
.hd-division{padding-left: 255px;}
}
@media (min-width:1800px) and (max-width:2500px) {
.p6-carousel{padding-left:0px;}
}
@media (min-width:1400px) and (max-width:1500px) {
.menu{padding-left:34%;}
}
@media (min-width:1501px) and (max-width:1535px) {
.menu{padding-left:36%;}
}
@media (min-width:1536px) and (max-width:1600px) {
.menu{padding-left: 510px;}
}
@media (min-width:1601px) and (max-width:1640px) {
.menu{padding-left: 34%;}
}
@media (min-width:1641px) and (max-width:1799px) {
.menu{padding-left: 36%;}
}
@media (min-width:1800px) and (max-width:2000px) {
.menu{padding-left: 37%;}
}
@media (min-width:2001px) and (max-width:2500px) {
.menu{padding-left: 46%;}
}
@media only screen and (max-width:960px) {
.menu{padding-left:0px !important; background:#1d1818; height: 100vh; top:0px; padding-top: 50px;}
.menu > li{float:left; width:100%;}
}
@media only screen and (max-width:900px) {
.stat-50{float:left; width:50%; max-width:50% !important; margin-bottom:25px;}
.pl-45{padding-left:15px !important;}
.pl-80{padding-left:15px !important;}
.pl-145{padding-left:15px !important;}
}
@media only screen and (max-width:431px) {
.stat h2{font-size:35px;}
.text{font-size:29px !important; top: -2px; margin-left: 8px;}
.stat p{font-size:17px !important;}
#section-two{padding-bottom:20px;}
}
@media only screen and (max-width:767px) {
.tnm-hs{float: left !important;}
.shop-bg{display:none;}
}
@media only screen and (max-width:1149px) {
.menu{padding-left: 360px;}
}
@media only screen and (max-width:1065px) {
.menu{padding-left: 320px;}
.menu > li{padding-left: 15px;
padding-right: 15px;}
}
@media only screen and (max-width:491px) {
.tnm-hs{float: left !important; width:100% !important; text-align: center !important;}
}
@media only screen and (max-width:960px) {
.menu{position:fixed;}
}
@media only screen and (max-width:646px) {
.crmb-50{width:100%;}
.crmb-top{padding-top:0px; float:left;}
}
@media only screen and (max-width:600px) {
.mn-top{display:none;}
.header-nav{margin-top:0px;}
.hamburger { margin-right: 0px;}
}
/* font-size */
@media only screen and (max-width:501px) {
.stat h2{font-size: 30px;}
}
@media only screen and (max-width:575px) {
.vm h3{
text-align: center;
margin: 0;
}.vm p{
text-align: center;
}.content-core{
text-align: center;
}
.ambassador-copy{
padding: 20px;
text-align: center;
}.ambassador-copy h2{
font-size: 36px;
}
#page-bnr p{
text-align: center;
}
.crmb-top{
display:none;
}
#page-bnr h3{
text-align: center;
font-size: 36px;
}.about-content p{
text-align: center;
}
.about-content h3{
text-align:center;
font-size: 36px;
margin-bottom: 0;
}
.hd-division {
float: left;
width: 100%;
padding-left: 0;
text-align: center;
}
#section-seven p{
text-align: center;
}.brand-nav {
float: left;
width: 100%;
margin-top: 10px;
text-align: center;
}
#section-seven h2 {
text-align: center;}
.p5-box h2{
width: 100%;
text-align: center;
}.p5-box h2 span{
width: 100%;
float: left;
text-align: center;
}
#section-three h1{line-height: 47px;font-size: 35px;text-align: center;}
#section-four h2{line-height: 43px; font-size: 35px !important;}
#section-six h2{line-height: 45px !important; font-size: 35px !important;}
#section-eight h2 {line-height: 45px !important;font-size: 35px !important;text-align: center;
margin-top: -20px;}
#section-eight p{
text-align: center;
padding-top: 0;
}.brand-nav-pro{
text-align:center;
}
#section-nine h2 {line-height: 45px !important;font-size: 35px !important;text-align: center;}
.p6-carousel{
padding-left: 15px;
padding-right: 15px;
margin-top: 0;
}
#section-nine p{
margin-top: 0;
text-align: center;
}
#section-ten h2 {line-height: 45px !important; font-size: 35px !important;}
#section-eleven h2{line-height: 45px !important;font-size: 40px;}
.ftr-section{
text-align:center;
}.gls-social{
text-align:center;
width: 100%;
}.platforms{
float: none;
}.nav-ftrsec{
padding-left: 0;
}.ftr-section h2{
padding-left: 0;
margin-top: 30px;
}.nav-ftr{
width: 50%;
font-size: 14px;
}#white-ftr p{
text-align: center;
}.tnm{
text-align: center;
}
}
@media(min-width:576px) and (max-width:767px){
.bm-about-wrapper img{
width:100%;
} .bm-about-content h3 {
font-size: 37px!important;
}.bm-head h2 {
float: left;
width: 100%;
font-size: 38px!important;}
.core-lst {
float: left;
width: 100%;
margin-bottom: 25px;}
.hl-btn-2 {
float: left;
width: 100%;
padding-top: 80px;
}#section-nine p {
margin-top: 0;
}.pl50 {
padding-left: 0;
}.nav-ftr {
float: left;
width: 33%;}.tnm {
text-align: left;
}
}
@media(min-width:768px) and (max-width:991px){
.bm-about-wrapper img{
width: 100%;
float: left;
}
.about-content h3{
float: none;
font-size: 34px;
}.about-content img{
width: 380px;
margin-right: 20px;
}.about-content p{
float: none !important;
}.ambassador-copy{
padding:30px;
}
.timeline-wrap {
width: 100%;
position: relative;
float: left;
padding-left: 0;
}#section-five h3 {
float: left;
width: 100%;
color: white;
font-weight: 500;
letter-spacing: -2px;
font-size: 42px;
line-height: 47px;
}#section-five p {
float: left;
width: 100%;
color: white;
margin-top: 10px;
line-height: 26px;
padding-top: 0;
}#section-nine h2 {
float: left;
width: 100%;
font-size: 44px;
color: white;
font-weight: 500;
letter-spacing: -2px;
line-height: 54px;
}#section-ten h2 {
float: left;
width: 100%;
font-size: 38px;
color: #000;
font-weight: 500;
letter-spacing: -2px;
line-height: 40px;
}
}
@media(min-width:992px) and (max-width:1024px){
.ux-contact-right {
background: #fbf7f7;
padding: 140px 60px;}
.bm-about-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 !important;
align-items: center;
float: left;
width: 100%;
}.bm-about-wrapper img{
width:400px;
}
#section-ten h2 {
float: left;
width: 100%;
font-size: 50px;
color: #000;
font-weight: 500;
letter-spacing: -2px;
line-height: 50px;
}#section-five h3 {
float: left;
width: 100%;
color: white;
font-weight: 500;
letter-spacing: -2px;
font-size: 46px;
line-height: 48px;
}#section-five p {
float: left;
width: 100%;
color: white;
margin-top: 20px;
line-height: 26px;
padding-top: 0;
}
}
@media(min-width:1025px) and (max-width:1199px){
.bm-about-wrapper img{
width: 400px;
margin-right: 40px;
}.bm-about-wrapper {
display: grid;
grid-template-columns: 0fr 1fr;
gap: 0;
align-items: center;
float: left;
width: 100%;
}
#section-five p {
float: left;
width: 100%;
color: white;
margin-top: 20px;
line-height: 26px;
padding-top: 0;
}
}
.brand-lst{
float: left;
width: 100%;
border-radius: 8px;
border: solid 1px rgb(203 203 203 / 58%);
text-align: center;
padding: 20px;
margin-bottom: 20px;
}
.hd-div-items{
float:left;
width:100%;
}
.dv-catg{
float: left;
width: 100%;
border-radius: 10px;
border: solid 1px rgb(247 225 225);
padding: 30px;
text-align: center;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.dv-catg img{
width:100%;
}
.dv-catg p{
float:left;
text-align:center;
}
.desc-dv{
float:left;
width:100%;
background-color: #fef0f0;
text-align:center;
font-size: 17px;
font-weight:500;
padding: 15px;
font-weight: 500;
margin-bottom: 45px;
color: black;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
#dv-brands{
float:left;
width:100%;
}
#dv-brands h2{
float: left;
width: 100%;
color: #000000;
font-weight: 500;
letter-spacing: -2px;
font-size: 60px;
line-height: 66px;
text-align: center;
padding-top: 15px;
}
#dv-brands h2 span{
font-family: "Playfair Display", serif !important;
font-style: italic;
}
.lst-brands{
float:left;
width:100%;
margin-top:25px;
}
.brl-50{
float:left;
}
.btn-brands{
float:left;
width:100%;
margin-top: 30px;
margin-bottom: 50px;
text-align:center;
}
.dl-brands-1{
border-radius: 50px;
background: #b51818;
color: white;
text-align: center;
font-weight: 600;
border: solid 1px #b51818;
padding-top: 11px;
/* margin-right: 15px; */
margin-top: 15px;
padding-bottom: 15px;
padding-left: 45px;
padding-right: 45px;
padding-top: 15px;
}
.lft-psh{
float:left;
}
.text{
font-weight: bold;
font-size: 55px;
margin-left: 12px;
position: relative;
top: -5px;
}
.pl-45{
padding-left:45px;
}
.pl-80{
padding-left:80px;
}
.pl-145{
padding-left:145px;
}
.ar-imgs{
width: 35px;
float: right;
margin-right: 15px;
margin-top: -4px;
}
.mn-top{
font-size: 15px;
font-weight: normal;
color: white;
position: relative;
top: -26px;
margin-left: 41px;
}
.hidden-input-field {
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 0;
width: 0;
z-index: -1;
}
.tnm-hs{
float:right;
font-size: 16px;
color: #1e1c1c;
}
.tnm-hs span{
font-size: 16px;
color: #1e1c1c;
font-weight:normal;
}