:root {
--font-kanit: "Kanit", sans-serif;
--font-inter: "Inter", sans-serif;
--primary-color: #000000;
--primary-color-opc: 0, 0, 0;
--primary-color2: #F94834;
--primary-color2-opc: 249, 72, 52;
--title-color: #000000;
--title-color-opc: 0, 0, 0;
--white-color: #fff;
--paragraph-color: #00000099;
--border-color: #EEEEEE;
--border-color-opc: 230, 230, 230;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a:focus,
input:focus,
textarea:focus,
button:focus {
outline: 0 solid;
box-shadow: unset;
}
input,
textarea {
border-radius: 0px;
}
html,
body {
height: 100%;
}
body {
font-size: 16px;
font-family: var(--font-kanit);
font-weight: 400;
overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-kanit);
font-weight: 500;
margin-bottom: 15px;
}
img {
max-width: 100%;
height: auto;
}
p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.7;
}
a {
color: unset;
text-decoration: none;
}
button {
border: unset;
}
input,
select,
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
.sec-mar {
margin: 120px 0;
}
@media (min-width: 992px) and (max-width: 1199px) {
.sec-mar {
margin: 90px 0;
}
}
@media (max-width: 991px) {
.sec-mar {
margin: 80px 0;
}
}
.sec-pad {
padding: 120px 0;
}
@media (min-width: 992px) and (max-width: 1199px) {
.sec-pad {
padding: 90px 0;
}
}
@media (max-width: 991px) {
.sec-pad {
padding: 80px 0;
}
}
.pt-150 {
padding-top: 150px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.pt-150 {
padding-top: 120px;
}
}
@media (max-width: 991px) {
.pt-150 {
padding-top: 100px;
}
}
@media (max-width: 576px) {
.pt-150 {
padding-top: 80px;
}
}
.pt-130 {
padding-top: 130px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.pt-130 {
padding-top: 100px;
}
}
@media (max-width: 991px) {
.pt-130 {
padding-top: 90px;
}
}
.pb-130 {
padding-bottom: 130px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.pb-130 {
padding-bottom: 100px;
}
}
@media (max-width: 991px) {
.pb-130 {
padding-bottom: 90px;
}
}
.pt-120 {
padding-top: 120px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.pt-120 {
padding-top: 90px;
}
}
@media (max-width: 991px) {
.pt-120 {
padding-top: 80px;
}
}
.pt-110 {
padding-top: 110px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.pt-110 {
padding-top: 90px;
}
}
@media (max-width: 991px) {
.pt-110 {
padding-top: 70px;
}
}
.pt-90 {
padding-top: 90px;
}
@media (max-width: 991px) {
.pt-90 {
padding-top: 80px;
}
}
@media (max-width: 767px) {
.pt-90 {
padding-top: 70px;
}
}
.pb-90 {
padding-bottom: 90px;
}
@media (max-width: 991px) {
.pb-90 {
padding-bottom: 80px;
}
}
@media (max-width: 767px) {
.pb-90 {
padding-bottom: 70px;
}
}
.pb-80 {
padding-bottom: 80px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.pb-80 {
padding-bottom: 60px;
}
}
.pb-65 {
padding-bottom: 65px;
}
.mt-130 {
margin-top: 130px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.mt-130 {
margin-top: 100px;
}
}
@media (max-width: 991px) {
.mt-130 {
margin-top: 90px;
}
}
.mt-120 {
margin-top: 120px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.mt-120 {
margin-top: 100px;
}
}
@media (max-width: 991px) {
.mt-120 {
margin-top: 90px;
}
}
.mb-130 {
margin-bottom: 130px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.mb-130 {
margin-bottom: 100px;
}
}
@media (max-width: 991px) {
.mb-130 {
margin-bottom: 90px;
}
}
.mb-120 {
margin-bottom: 120px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.mb-120 {
margin-bottom: 90px;
}
}
@media (max-width: 991px) {
.mb-120 {
margin-bottom: 80px;
}
}
.mb-110 {
margin-bottom: 110px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.mb-110 {
margin-bottom: 90px;
}
}
@media (max-width: 991px) {
.mb-110 {
margin-bottom: 80px;
}
}
.mb-100 {
margin-bottom: 100px;
}
@media (max-width: 991px) {
.mb-100 {
margin-bottom: 80px;
}
}
@media (max-width: 767px) {
.mb-100 {
margin-bottom: 60px;
}
}
.mt-100 {
margin-top: 110px !important;
}
@media (max-width: 991px) {
.mt-100 {
margin-top: 80px !important;
}
}
.mb-90 {
margin-bottom: 90px;
}
@media (max-width: 991px) {
.mb-90 {
margin-bottom: 70px;
}
}
@media (max-width: 767px) {
.mb-90 {
margin-bottom: 50px;
}
}
.mb-15 {
margin-bottom: 15px;
}
.mb-10 {
margin-bottom: 10px;
}
.pt-80 {
padding-top: 80px;
}
@media (max-width: 1199px) {
.pt-80 {
padding-top: 70px;
}
}
@media (max-width: 767px) {
.pt-80 {
padding-top: 50px;
}
}
.pt-50 {
padding-top: 50px;
}
@media (max-width: 991px) {
.pt-50 {
padding-top: 40px;
}
}
.pt-40 {
padding-top: 40px;
}
.pt-35 {
padding-top: 35px;
}
.pt-30 {
padding-top: 30px;
}
.pb-80 {
padding-bottom: 80px;
}
.pb-60 {
padding-bottom: 60px;
}
.mb-60 {
margin-bottom: 60px;
}
@media (max-width: 1199px) {
.mb-60 {
margin-bottom: 50px;
}
}
@media (max-width: 991px) {
.mb-60 {
margin-bottom: 40px;
}
}
.mb-70 {
margin-bottom: 70px;
}
@media (max-width: 767px) {
.mb-70 {
margin-bottom: 50px;
}
}
.mb-80 {
margin-bottom: 80px;
}
@media (max-width: 991px) {
.mb-80 {
margin-bottom: 70px;
}
}
@media (max-width: 767px) {
.mb-80 {
margin-bottom: 50px;
}
}
.mb-50 {
margin-bottom: 50px;
}
@media (max-width: 1199px) {
.mb-50 {
margin-bottom: 40px;
}
}
.mb-45 {
margin-bottom: 45px;
}
.mb-44 {
margin-bottom: 44px;
}
@media (max-width: 991px) {
.mb-44 {
margin-bottom: 0px;
}
}
.mb-40 {
margin-bottom: 40px;
}
@media (max-width: 991px) {
.mb-40 {
margin-bottom: 30px;
}
}
.mb-35 {
margin-bottom: 35px;
}
.mb-20 {
margin-bottom: 20px;
}
.mt-15 {
margin-top: 15px;
}
.mt-40 {
margin-top: 40px;
}
.mt-35 {
margin-top: 35px;
}
.mb-30 {
margin-bottom: 30px;
}
.mb-25 {
margin-bottom: 25px;
}
.mt-30 {
margin-top: 30px;
}
.mt-50 {
margin-top: 50px;
}
.mt-25 {
margin-top: 25px;
}
.mb-50 {
margin-bottom: 50px;
}
@media (max-width: 767px) {
.mb-50 {
margin-bottom: 40px;
}
}
.mt-60 {
margin-top: 60px;
}
@media (max-width: 767px) {
.mt-60 {
margin-top: 40px;
}
}
.mt-70 {
margin-top: 70px;
}
@media (max-width: 767px) {
.mt-70 {
margin-top: 40px;
}
}
#magic-cursor {
position: absolute;
display: none;
width: 10px;
height: 10px;
pointer-events: none;
z-index: 99999;
opacity: 0;
}
body.tt-magic-cursor #magic-cursor {
display: block;
}
#ball {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
color: var(--white-color);
pointer-events: none;
border-style: solid;
border-radius: 50%;
border-color: var(--primary-color);
background-color: var(--primary-color); } #ball.ball-view {
background-image: linear-gradient(112.83deg, rgba(255, 255, 255, 0.47) 0%, rgba(255, 255, 255, 0) 110.84%);
background-color: rgba(var(--primary-color-opc), 0.5);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
font-size: 15px;
font-weight: 600;
color: var(--white-color);
font-family: var(--font-kanit);
line-height: 1.4;
text-align: center;
}
#ball .ball-view-inner {
padding: 0 5px;
opacity: 0;
visibility: hidden;
transform: scale(0);
}
#ball .ball-view-inner i {
font-size: 24px;
} #ball .ball-drag {
position: absolute;
display: block;
width: 100%;
padding: 0 5px;
font-size: 15px;
font-weight: 600;
color: var(--title-color);
line-height: 1.2;
text-align: center;
transition: all 0.3s;
}
#ball .ball-drag::before,
#ball .ball-drag::after {
position: absolute;
top: 50%;
margin-top: -5px;
font-size: 16px;
color: var(--primary-color);
height: 10px;
line-height: 10px; font-family: "Font Awesome 5 Free";
font-weight: 900;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
#ball .ball-drag::before {
content: "\f060"; left: 0;
transform: translate3d(-30px, 0, 0);
transition: all 0.25s;
}
#ball .ball-drag::after {
content: "\f061"; right: 0;
transform: translate3d(30px, 0, 0);
transition: all 0.25s;
}
#ball.magnetic-active {
background-image: linear-gradient(112.83deg, rgba(255, 255, 255, 0.47) 0%, rgba(255, 255, 255, 0) 110.84%);
background-color: rgba(var(--primary-color-opc), 0.5);
-webkit-backdrop-filter: blur(1.1px);
backdrop-filter: blur(1.1px);
border-color: transparent !important;
} #ball.ball-close-enabled {
opacity: 1 !important;
}
#ball .ball-close {
position: absolute;
padding: 0 5px;
font-size: 14px;
font-weight: 600;
color: var(--primary-color);
line-height: 1;
text-align: center;
}
.primary-btn {
position: relative;
display: inline-block;
vertical-align: top;
line-height: 1.4;
text-decoration: none;
outline: none;
padding: 0 1.375em 0.0625em 0;
cursor: pointer;
background-color: transparent;
background-position: 100% 100%;
background-repeat: no-repeat;
background-size: var(--background-size, 100%) 0.0625em;
transition: background-size 0.2s linear var(--background-delay, 0.15s);
transform: translateZ(0);
border: none;
background-image: linear-gradient(0deg, var(--title-color) 0%, var(--title-color) 100%);
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
white-space: nowrap;
}
.primary-btn::after {
content: "\f123";
font-family: "bootstrap-icons";
display: block;
position: absolute;
right: 0;
left: initial;
top: 0;
opacity: 1;
transition: opacity 0.3s 0.15s;
color: var(--title-color);
}
.primary-btn svg {
position: absolute;
display: block;
line-height: 1.8125em;
width: 1.375em;
height: 1.8125em;
right: 0;
left: initial;
top: 50%;
margin: -0.92em 0 0;
fill: none;
stroke: var(--title-color);
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1px;
stroke-dasharray: 7.95 30;
stroke-dashoffset: var(--stroke-dashoffset, 46);
transition: stroke-dashoffset var(--stroke-duration, 0.15s) var(--stroke-easing, linear) var(--stroke-delay, 0s);
}
.primary-btn:hover {
--background-size: 0%;
--stroke-dashoffset: 26;
--stroke-duration: .3s;
--stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
--stroke-delay: .195s;
}
.primary-btn:hover::after {
opacity: 0;
transition-delay: 0s;
}
.primary-btn.white {
background-image: linear-gradient(0deg, var(--white-color) 0%, var(--white-color) 100%);
color: var(--white-color);
}
.primary-btn.white::after {
color: var(--white-color);
}
.primary-btn.white svg {
stroke: var(--white-color);
}
.primary-btn2 {
padding: 19px 33px;
background-color: var(--primary-color);
display: inline-block;
line-height: 1;
}
@media (max-width: 576px) {
.primary-btn2 {
padding: 15px 22px;
}
}
.primary-btn2 span {
position: relative;
display: inline-block;
vertical-align: top;
line-height: 1;
text-decoration: none;
outline: none;
padding: 0 1.375em 0.0625em 0;
cursor: pointer;
background-color: transparent;
background-position: 100% 100%;
background-repeat: no-repeat;
background-size: var(--background-size, 100%) 0.0625em;
transition: background-size 0.2s linear var(--background-delay, 0.15s);
transform: translateZ(0);
border: none;
background-image: linear-gradient(0deg, var(--white-color) 0%, var(--white-color) 100%);
color: var(--white-color);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
white-space: nowrap;
}
@media (max-width: 576px) {
.primary-btn2 span {
font-size: 13px;
}
}
.primary-btn2 span::after {
content: "\f123";
font-family: "bootstrap-icons";
display: block;
position: absolute;
right: 0;
left: initial;
top: 0;
opacity: 1;
transition: opacity 0.3s 0.15s;
color: var(--white-color);
}
.primary-btn2 span svg {
position: absolute;
display: block;
line-height: 1.8125em;
width: 1.375em;
height: 1.8125em;
right: 0;
left: initial;
top: 50%;
margin: -0.92em 0 0;
fill: none;
stroke: var(--white-color);
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1px;
stroke-dasharray: 7.95 30;
stroke-dashoffset: var(--stroke-dashoffset, 46);
transition: stroke-dashoffset var(--stroke-duration, 0.15s) var(--stroke-easing, linear) var(--stroke-delay, 0s);
}
.primary-btn2:hover span {
--background-size: 0%;
--stroke-dashoffset: 26;
--stroke-duration: .3s;
--stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
--stroke-delay: .195s;
}
.primary-btn2:hover span::after {
opacity: 0;
transition-delay: 0s;
}
.primary-btn2.white-bg {
background-color: var(--white-color);
}
.primary-btn2.white-bg span {
background-image: linear-gradient(0deg, var(--title-color) 0%, var(--title-color) 100%);
color: var(--title-color);
}
.primary-btn2.white-bg span::after {
color: var(--title-color);
}
.primary-btn2.white-bg span svg {
fill: none;
stroke: var(--title-color);
}
.primary-btn2.transparent {
background-color: transparent;
border: 1px solid var(--primary-color);
padding: 18px 33px;
}
@media (max-width: 576px) {
.primary-btn2.transparent {
padding: 14px 22px;
}
}
.primary-btn2.transparent span {
background-image: linear-gradient(0deg, var(--title-color) 0%, var(--title-color) 100%);
color: var(--title-color);
}
.primary-btn2.transparent span::after {
color: var(--title-color);
}
.primary-btn2.transparent span svg {
fill: none;
stroke: var(--title-color);
}
.primary-btn3 {
padding: 17px 17px;
background-color: transparent;
display: inline-block;
line-height: 1;
position: relative;
border: 1px solid rgba(var(--primary-color-opc), 0.2);
transition: 0.5s;
}
@media (max-width: 576px) {
.primary-btn3 {
padding: 15px 22px;
}
}
.primary-btn3 span {
position: relative;
display: inline-block;
vertical-align: top;
line-height: 1;
text-decoration: none;
outline: none;
padding: 0 1.375em 0.0625em 0;
cursor: pointer;
background-color: transparent;
background-position: 100% 100%;
background-repeat: no-repeat;
background-size: var(--background-size, 100%) 0.0625em;
transition: background-size 0.2s linear var(--background-delay, 0.15s);
transform: translateZ(0);
border: none;
background-image: linear-gradient(0deg, var(--title-color) 0%, var(--title-color) 100%);
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
white-space: nowrap;
}
@media (max-width: 576px) {
.primary-btn3 span {
font-size: 13px;
}
}
.primary-btn3 span::after {
content: "\f123";
font-family: "bootstrap-icons";
display: block;
position: absolute;
right: 0;
left: initial;
top: 0;
opacity: 1;
transition: opacity 0.3s 0.15s;
color: var(--title-color);
}
.primary-btn3 span svg {
position: absolute;
display: block;
line-height: 1.8125em;
width: 1.375em;
height: 1.8125em;
right: 0;
left: initial;
top: 50%;
margin: -0.92em 0 0;
fill: none;
stroke: var(--title-color);
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1px;
stroke-dasharray: 7.95 30;
stroke-dashoffset: var(--stroke-dashoffset, 46);
transition: stroke-dashoffset var(--stroke-duration, 0.15s) var(--stroke-easing, linear) var(--stroke-delay, 0s);
}
.primary-btn3 .corner {
width: 6px;
height: 6px;
border: 1px solid var(--primary-color);
transform: rotate(180deg);
position: absolute;
}
.primary-btn3 .corner.tl {
top: 0;
left: 0;
border-bottom: none;
border-right: none;
transform-origin: top left;
}
.primary-btn3 .corner.tr {
top: 0;
right: 0;
border-left: none;
border-bottom: none;
transform-origin: top right;
}
.primary-btn3 .corner.br {
bottom: 0;
right: 0;
border-top: none;
border-left: none;
transform-origin: bottom right;
}
.primary-btn3 .corner.bl {
bottom: 0;
left: 0;
border-top: none;
border-right: none;
transform-origin: bottom left;
}
.primary-btn3:hover {
border-color: var(--primary-color);
}
.primary-btn3:hover span {
--background-size: 0%;
--stroke-dashoffset: 26;
--stroke-duration: .3s;
--stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
--stroke-delay: .195s;
}
.primary-btn3:hover span::after {
opacity: 0;
transition-delay: 0s;
}
.primary-btn3.white {
border: 1px solid rgba(255, 255, 255, 0.2);
}
.primary-btn3.white span {
background-image: linear-gradient(0deg, var(--white-color) 0%, var(--white-color) 100%);
color: var(--white-color);
}
.primary-btn3.white span::after {
color: var(--white-color);
}
.primary-btn3.white span svg {
stroke: var(--white-color);
}
.primary-btn3.white .corner {
border-color: var(--white-color);
}
.primary-btn3.white:hover {
border-color: var(--white-color);
}
.primary-btn3.two {
border: 1px solid rgba(var(--primary-color2-opc), 0.2);
}
.primary-btn3.two span {
background-image: linear-gradient(0deg, var(--primary-color2) 0%, var(--primary-color2) 100%);
color: var(--primary-color2);
}
.primary-btn3.two span::after {
color: var(--primary-color2);
}
.primary-btn3.two span svg {
stroke: var(--primary-color2);
}
.primary-btn3.two .corner {
border-color: var(--primary-color2);
}
.primary-btn3.two:hover {
border-color: var(--primary-color2);
}
.form-inner {
position: relative;
line-height: 1;
}
.form-inner label {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 15px;
font-weight: 400;
display: block;
margin-bottom: 10px;
}
.form-inner input {
background: transparent;
color: var(--title-color);
font-family: var(--font-inter);
font-size: 14px;
font-weight: 400;
height: 44px;
width: 100%;
padding: 10px 20px;
outline: none;
border: 1px solid rgba(var(--primary-color-opc), 0.2);
border-radius: 5px;
}
.form-inner input::-moz-placeholder {
color: rgba(var(--title-color-opc), 0.5);
font-weight: 400;
}
.form-inner input::placeholder {
color: rgba(var(--title-color-opc), 0.5);
font-weight: 400;
}
.form-inner input:focus {
border: 1px solid var(--primary-color);
}
.form-inner textarea {
background: transparent;
color: var(--title-color);
font-family: var(--font-inter);
font-size: 14px;
font-weight: 400;
width: 100%;
padding: 15px 20px;
outline: none;
border: 1px solid rgba(var(--primary-color-opc), 0.2);
min-height: 120px;
border-radius: 5px;
resize: none;
}
.form-inner textarea::-moz-placeholder {
color: #7C7C7C;
}
.form-inner textarea::placeholder {
color: #7C7C7C;
}
.form-inner textarea:focus {
border: 1px solid var(--primary-color);
}
.form-inner2 .form-check {
min-height: unset;
margin-bottom: 0;
padding-left: 8px;
}
.form-inner2 .form-check .form-check-input {
cursor: pointer;
height: 14px;
width: 14px;
margin-top: 7px;
border: 1px solid rgba(var(--primary-color-opc), 0.2);
}
.form-inner2 .form-check .form-check-input:focus {
box-shadow: none;
border-color: rgba(var(--primary-color-opc), 0.2);
}
.form-inner2 .form-check .form-check-input:checked {
background-color: var(--primary-color2);
border-color: var(--primary-color2);
}
.form-inner2 .form-check .form-check-label {
cursor: pointer;
color: var(--paragraph-color);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 400;
}
@media (max-width: 576px) {
.form-inner2 .form-check .form-check-label {
font-size: 13px;
}
}
.section-title span {
color: rgba(var(--title-color-opc), 0.6);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.03em;
text-transform: uppercase;
display: inline-block;
margin-bottom: 10px;
position: relative;
}
.section-title span::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -41px;
width: 35px;
height: 1px;
background-color: var(--primary-color2);
}
.section-title h2 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 60px;
font-weight: 500;
line-height: 1.1;
margin-bottom: 0;
}
@media (max-width: 1399px) {
.section-title h2 {
font-size: 54px;
}
}
@media (max-width: 1199px) {
.section-title h2 {
font-size: 50px;
}
}
@media (max-width: 991px) {
.section-title h2 {
font-size: 47px;
}
}
@media (max-width: 767px) {
.section-title h2 {
font-size: 42px;
line-height: 1.2;
}
}
@media (max-width: 576px) {
.section-title h2 {
font-size: 38px;
}
}
.section-title p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.8;
margin-bottom: 0;
padding-top: 20px;
}
@media (max-width: 576px) {
.section-title p {
padding-top: 15px;
font-size: 15px;
}
}
.section-title.white span {
color: rgba(255, 255, 255, 0.6);
}
.section-title.white h2 {
color: var(--white-color);
}
.section-title.white p {
color: rgba(255, 255, 255, 0.6);
}
.section-title.two span {
color: var(--primary-color2);
font-size: 12px;
padding: 10px 19px;
background-color: rgba(var(--primary-color-opc), 0.05);
}
@media (max-width: 576px) {
.section-title.two span {
padding: 10px 12px;
}
}
.section-title.two span::after {
display: none;
}
.section-title.two.white span {
background-color: rgba(255, 255, 255, 0.05);
}
.section-title.three span {
padding-left: 40px;
}
.section-title.three span::after {
right: unset;
left: 0;
}
.section-title.four span {
padding-left: 25px;
color: var(--primary-color2);
}
.section-title.four span::after {
right: unset;
left: 0;
width: 15px;
height: 15px;
border-radius: 50%;
}
.section-title.four h2 {
font-size: 55px;
text-transform: uppercase;
line-height: 1.2;
}
@media (max-width: 1399px) {
.section-title.four h2 {
font-size: 52px;
}
}
@media (max-width: 1199px) {
.section-title.four h2 {
font-size: 50px;
}
}
@media (max-width: 991px) {
.section-title.four h2 {
font-size: 47px;
}
}
@media (max-width: 767px) {
.section-title.four h2 {
font-size: 42px;
line-height: 1.2;
}
}
@media (max-width: 576px) {
.section-title.four h2 {
font-size: 38px;
}
}
.section-title2 h2 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 65px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.03em;
margin-bottom: 0;
position: relative;
}
.section-title2 h2 span {
width: 100px;
height: 2px;
background-color: var(--primary-color);
display: inline-block;
margin-bottom: 15px;
}
@media (max-width: 1199px) {
.section-title2 h2 span {
margin-bottom: 12px;
width: 90px;
}
}
@media (max-width: 991px) {
.section-title2 h2 span {
margin-bottom: 10px;
width: 85px;
}
}
@media (max-width: 767px) {
.section-title2 h2 span {
width: 80px;
margin-bottom: 12px;
}
}
@media (max-width: 576px) {
.section-title2 h2 span {
margin-bottom: 10px;
width: 70px;
}
}
@media (max-width: 1399px) {
.section-title2 h2 {
font-size: 60px;
}
}
@media (max-width: 1199px) {
.section-title2 h2 {
font-size: 50px;
}
}
@media (max-width: 991px) {
.section-title2 h2 {
font-size: 47px;
}
}
@media (max-width: 767px) {
.section-title2 h2 {
font-size: 45px;
}
}
@media (max-width: 576px) {
.section-title2 h2 {
font-size: 43px;
}
}
.section-title2 p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.8;
margin-top: 20px;
}
@media (max-width: 767px) {
.section-title2 p {
margin-top: 15px;
}
}
@media (max-width: 576px) {
.section-title2 p {
margin-top: 15px;
}
}
.slider-btn-grp {
display: flex;
align-items: center;
gap: 50px;
}
@media (max-width: 767px) {
.slider-btn-grp {
gap: 40px;
}
}
.slider-btn-grp .slider-btn {
min-width: 45px;
max-width: 45px;
height: 45px;
background-color: transparent;
border: 1px solid rgba(var(--title-color-opc), 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: 0.5s;
}
@media (max-width: 767px) {
.slider-btn-grp .slider-btn {
min-width: 40px;
max-width: 40px;
height: 40px;
}
}
.slider-btn-grp .slider-btn i {
color: rgba(var(--primary-color-opc), 0.3);
font-size: 20px;
line-height: 1;
}
@media (max-width: 767px) {
.slider-btn-grp .slider-btn i {
font-size: 18px;
}
}
.slider-btn-grp .slider-btn:hover {
background-color: var(--primary-color);
}
.slider-btn-grp .slider-btn:hover i {
color: var(--white-color);
}
.slider-btn-grp .slider-btn.swiper-button-disabled {
opacity: 0.5;
}
.slider-btn-grp.white .slider-btn {
border: 1px solid rgba(255, 255, 255, 0.4);
}
.slider-btn-grp.white .slider-btn i {
color: rgba(255, 255, 255, 0.4);
}
.slider-btn-grp.white .slider-btn:hover {
border-color: var(--white-color);
background-color: var(--white-color);
}
.slider-btn-grp.white .slider-btn:hover i {
color: var(--title-color);
}
.nice-select {
width: 100%;
background: transparent;
border-radius: 5px;
height: 44px;
display: flex;
align-items: center;
line-height: 1;
padding: 0px 20px;
outline: none !important;
box-shadow: none !important;
border: 1px solid rgba(var(--primary-color-opc), 0.2);
}
@media (max-width: 576px) {
.nice-select {
padding: 0px 18px;
}
}
.nice-select::after {
height: 8px;
width: 8px;
border-bottom: 1px solid var(--title-color);
border-right: 1px solid var(--title-color);
right: 20px;
margin-top: -5px;
}
.nice-select .current {
color: rgba(var(--title-color-opc), 0.5);
font-family: var(--font-inter);
font-size: 14px;
font-weight: 500;
}
@media (max-width: 576px) {
.nice-select .current {
font-size: 13px;
}
}
.nice-select:focus {
border-color: var(--primary-color);
}
.nice-select .list {
border: none;
border-radius: 5px;
width: 100%;
max-height: 250px;
overflow-y: auto;
}
.nice-select .list::-webkit-scrollbar {
width: 5px;
}
.nice-select .list::-webkit-scrollbar-track {
background: #f1f1f1;
}
.nice-select .list::-webkit-scrollbar-thumb {
background: rgba(var(--title-color-opc), 0.7);
}
.nice-select .list .option {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 400;
padding-left: 25px;
padding-right: 25px;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.nice-select .list .option:hover {
color: var(--white-color);
background-color: var(--primary-color);
}
#scroll-section2 {
scroll-margin-top: 130px;
}
.scroll-progress-wrap {
position: fixed;
right: 40px;
top: 40%;
z-index: 999;
display: flex;
align-items: center;
flex-direction: column;
gap: 10px;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.scroll-progress-wrap {
right: 35px;
}
}
@media (max-width: 1399px) {
.scroll-progress-wrap {
right: 35px;
}
}
@media (max-width: 991px) {
.scroll-progress-wrap {
right: 20px;
}
}
@media (max-width: 767px) {
.scroll-progress-wrap {
right: 20px;
}
}
@media (max-width: 576px) {
.scroll-progress-wrap {
right: 10px;
}
}
.scroll-progress-wrap span {
color: var(--primary-color2);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.06em;
writing-mode: vertical-lr;
transform: rotate(180deg);
}
.scroll-progress-wrap .progress-container {
width: 2px;
height: 70px;
background: #D9D9D9;
border-radius: 2px;
margin: auto;
}
.scroll-progress-wrap .progress-container .progress-bar {
width: 2px;
background: var(--primary-color2);
border-radius: 2px;
}
.fancybox-slide--iframe .fancybox-content,
.fancybox-slide--map .fancybox-content,
.fancybox-slide--pdf .fancybox-content,
.fancybox-slide--video .fancybox-content {
min-height: 350px;
} @keyframes fade-down {
0% {
opacity: 0;
transform: scaleY(0);
visibility: hidden;
}
100% {
opacity: 1;
transform: scaleY(1);
visibility: visible;
}
}
.topbar-area {
position: relative;
width: 100%;
z-index: 99;
padding: 10px 5.5%;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
background-color: rgba(var(--primary-color-opc), 0.2);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
@media (min-width: 1400px) and (max-width: 1599px) {
.topbar-area {
padding: 10px 4%;
}
}
@media (max-width: 1399px) {
.topbar-area {
padding: 10px 4%;
}
}
@media (max-width: 1199px) {
.topbar-area {
padding: 10px 20px;
}
}
@media (max-width: 767px) {
.topbar-area {
padding: 10px 10px;
}
}
@media (max-width: 576px) {
.topbar-area {
padding: 0;
}
}
.topbar-area .contact-area ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
gap: 60px;
}
@media (max-width: 1199px) {
.topbar-area .contact-area ul {
gap: 40px;
}
}
.topbar-area .contact-area ul li {
position: relative;
}
.topbar-area .contact-area ul li::before {
content: "";
width: 1px;
height: 20px;
background-color: rgba(var(--primary-color3-opc), 0.2);
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -30px;
}
@media (max-width: 1199px) {
.topbar-area .contact-area ul li::before {
left: -20px;
}
}
.topbar-area .contact-area ul li:first-child::before {
display: none;
}
.topbar-area .contact-area ul li a {
color: rgba(255, 255, 255, 0.7);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 400;
line-height: 1;
display: flex;
align-items: center;
gap: 8px;
transition: 0.5s;
}
.topbar-area .contact-area ul li a svg {
fill: rgba(255, 255, 255, 0.7);
transition: 0.5s;
}
.topbar-area .contact-area ul li a:hover {
color: var(--white-color);
}
.topbar-area .contact-area ul li a:hover svg {
fill: var(--white-color);
}
.topbar-area .address-area svg {
fill: rgba(255, 255, 255, 0.7);
transition: 0.5s;
}
.topbar-area .address-area a {
color: rgba(255, 255, 255, 0.7);
font-family: var(--font-kanit);
font-size: 15px;
font-weight: 500;
line-height: 1.2;
transition: 0.5s;
}
.topbar-area .address-area:hover svg {
fill: var(--primary-color2);
}
.topbar-area .address-area:hover a {
color: var(--primary-color2);
}
header.style-1 {
position: relative;
width: 100%;
z-index: 99;
transition: all 0.8s ease-out 0s;
background-color: transparent;
padding: 0 5.5%;
}
@media (min-width: 1400px) and (max-width: 1599px) {
header.style-1 {
padding: 0 4%;
}
}
@media (max-width: 1399px) {
header.style-1 {
padding: 0 4%;
}
}
@media (max-width: 1199px) {
header.style-1 {
padding: 0 20px;
}
}
@media (max-width: 767px) {
header.style-1 {
padding: 0 10px;
}
}
@media (max-width: 576px) {
header.style-1 {
padding: 0;
}
}
header.style-1.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding-top: 0 !important;
padding-bottom: 0 !important;
box-sizing: border-box;
background-color: var(--white-color);
box-shadow: 5px 3px 40px rgba(0, 72, 88, 0.1);
z-index: 9999;
}
@keyframes smooth-header {
0% {
transform: translateY(-30px);
}
100% {
transform: translateY(0px);
}
}
@media (max-width: 991px) {
header.style-1 .header-logo {
padding: 15px 0;
}
}
header.style-1 .header-logo a img {
width: 150px;
}
@media (min-width: 992px) and (max-width: 1199px) {
header.style-1 .header-logo a img {
width: 140px;
}
}
@media (max-width: 576px) {
header.style-1 .header-logo a img {
width: 140px;
}
}
header.style-1 .nav-right {
display: flex;
align-items: center;
gap: 60px;
}
@media (max-width: 1199px) {
header.style-1 .nav-right {
gap: 25px;
}
}
@media (max-width: 576px) {
header.style-1 .nav-right {
gap: 15px;
}
}
header.style-1 .nav-right .right-sidebar-button {
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
position: relative;
}
@media (max-width: 576px) {
header.style-1 .nav-right .right-sidebar-button {
gap: 6px;
}
}
header.style-1 .nav-right .right-sidebar-button svg {
fill: var(--title-color);
}
header.style-1 .nav-right .right-sidebar-button span {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.03em;
}
@media (min-width: 992px) and (max-width: 1199px) {
header.style-1 .nav-right .right-sidebar-button span {
font-size: 13px;
}
}
@media (max-width: 576px) {
header.style-1 .nav-right .right-sidebar-button span {
font-size: 12px;
}
}
@keyframes qode-draw {
0%, 100% {
-webkit-clip-path: inset(-2px -2px);
clip-path: inset(-2px -2px);
}
42% {
-webkit-clip-path: inset(-2px -2px -2px 100%);
clip-path: inset(-2px -2px -2px 100%);
}
43% {
-webkit-clip-path: inset(-2px 100% -3px -2px);
clip-path: inset(-2px 100% -3px -2px);
}
}
header.style-1 .nav-right .right-sidebar-button::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -30px;
width: 2px;
height: 18px;
background-color: var(--primary-color2);
}
@media (max-width: 1199px) {
header.style-1 .nav-right .right-sidebar-button::after {
right: -13px;
}
}
@media (max-width: 991px) {
header.style-1 .nav-right .right-sidebar-button::after {
display: none;
}
}
header.style-1 .nav-right .right-sidebar-button:hover svg {
animation: qode-draw 0.75s cubic-bezier(0.57, 0.39, 0, 0.86) 1 forwards;
}
header.style-1 .nav-right .right-sidebar-button.two {
padding: 12px 19px;
border: 1px solid rgba(var(--primary-color-opc), 0.3);
border-radius: 200px;
}
@media (min-width: 992px) and (max-width: 1199px) {
header.style-1 .nav-right .right-sidebar-button.two {
padding: 9px 16px;
}
}
@media (max-width: 576px) {
header.style-1 .nav-right .right-sidebar-button.two {
padding: 0;
border: unset;
}
}
header.style-1 .nav-right .mobile-menu-btn {
display: none;
visibility: hidden;
}
@media (max-width: 991px) {
header.style-1 .nav-right .mobile-menu-btn {
display: flex;
flex-direction: column;
align-items: end;
visibility: visible;
justify-content: center;
position: relative;
}
header.style-1 .nav-right .mobile-menu-btn svg {
fill: var(--title-color);
}
}
header.style-1 .nav-right .primary-btn {
font-size: 15px;
}
@media (min-width: 992px) and (max-width: 1199px) {
header.style-1 .nav-right .primary-btn {
font-size: 14px;
}
}
header.style-1 .main-menu {
display: inline-block;
position: relative;
}
header.style-1 .main-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
header.style-1 .main-menu ul > li {
display: inline-block;
position: relative;
}
header.style-1 .main-menu ul > li::after {
content: "";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 7px;
height: 7px;
border-radius: 50%;
background-color: var(--primary-color);
opacity: 0;
transition: all 0.5s ease-out 0s;
}
@media (max-width: 1399px) {
header.style-1 .main-menu ul > li::after {
right: 5px;
}
}
@media (max-width: 1199px) {
header.style-1 .main-menu ul > li::after {
right: 0;
}
}
@media (max-width: 991px) {
header.style-1 .main-menu ul > li::after {
display: none;
}
}
@media (max-width: 991px) {
header.style-1 .main-menu ul > li {
padding: 22px 0px;
}
}
header.style-1 .main-menu ul > li:first-child {
padding-left: 0;
}
header.style-1 .main-menu ul > li > a {
color: var(--title-color);
display: block;
text-transform: capitalize;
padding: 38px 25px;
position: relative;
font-family: var(--font-kanit);
font-weight: 400;
font-size: 14px;
transition: all 0.5s ease-out 0s;
position: relative;
line-height: 1;
}
@media (max-width: 1399px) {
header.style-1 .main-menu ul > li > a {
font-size: 14px;
padding: 34px 20px;
}
}
@media (max-width: 1199px) {
header.style-1 .main-menu ul > li > a {
padding: 34px 15px;
}
}
header.style-1 .main-menu ul > li i {
font-size: 20px;
text-align: center;
color: var(--white-color);
font-style: normal;
position: absolute;
right: -5px;
top: 35px;
z-index: 999;
cursor: pointer;
display: none;
transition: all 0.5s ease-out 0s;
opacity: 0;
}
@media (max-width: 991px) {
header.style-1 .main-menu ul > li i {
opacity: 1;
}
}
header.style-1 .main-menu ul > li i.active {
color: var(--primary-color);
}
header.style-1 .main-menu ul > li i.active::before {
content: "\f2ea";
}
header.style-1 .main-menu ul > li ul.sub-menu {
position: absolute;
left: 0;
right: 0;
top: auto;
margin: 0;
display: none;
min-width: 215px;
background: var(--white-color);
border: 1px solid rgba(13, 23, 32, 0.0784313725);
text-align: left;
}
header.style-1 .main-menu ul > li ul.sub-menu > li {
padding: 0;
display: block;
position: relative;
}
header.style-1 .main-menu ul > li ul.sub-menu > li::after {
display: none;
}
header.style-1 .main-menu ul > li ul.sub-menu > li i {
position: absolute;
top: 10px;
right: 6px;
display: block;
color: var(--title-color);
font-size: 20px;
}
header.style-1 .main-menu ul > li ul.sub-menu > li .dropdown-icon {
color: var(--title-color);
opacity: 1;
top: 17px;
font-size: 13px;
right: 15px;
}
@media (max-width: 991px) {
header.style-1 .main-menu ul > li ul.sub-menu > li .dropdown-icon {
right: 0;
top: 11px;
font-size: 20px;
}
}
header.style-1 .main-menu ul > li ul.sub-menu > li > a {
display: block;
padding: 14px 20px;
font-family: var(--font-inter);
color: var(--title-color);
font-weight: 500;
text-transform: capitalize;
font-size: 13px;
line-height: 1.4;
transition: all 0.4s ease-out 0s;
position: relative;
border-radius: 0;
border: none;
border-bottom: 1px solid rgba(13, 23, 32, 0.0784313725);
}
header.style-1 .main-menu ul > li ul.sub-menu > li > a::before {
content: "";
position: absolute;
bottom: -1px;
left: 0;
background: linear-gradient(90deg, #fff, var(--primary-color2), #fff);
width: 100%;
height: 1px;
transform: scaleX(0);
transform-origin: left;
transition: 0.4s ease-in;
z-index: 1;
}
@media (max-width: 991px) {
header.style-1 .main-menu ul > li ul.sub-menu > li > a {
border-color: rgba(13, 23, 32, 0.0784313725);
}
header.style-1 .main-menu ul > li ul.sub-menu > li > a::before {
background: linear-gradient(90deg, #525252, #EC6219, #525252);
}
}
header.style-1 .main-menu ul > li ul.sub-menu > li > a:hover {
color: var(--primary-color);
}
header.style-1 .main-menu ul > li ul.sub-menu > li > a:hover::before {
transform: scale(1);
}
header.style-1 .main-menu ul > li ul.sub-menu > li > a.active {
color: var(--primary-color);
}
header.style-1 .main-menu ul > li ul.sub-menu > li > a.active::before {
transform: scale(1);
}
header.style-1 .main-menu ul > li ul.sub-menu > li:last-child a {
border-bottom: none;
}
header.style-1 .main-menu ul > li ul.sub-menu > li:last-child a::before {
display: none;
}
header.style-1 .main-menu ul > li ul.sub-menu > li:last-child .sub-menu li a {
border-bottom: 1px solid rgba(13, 23, 32, 0.0784313725);
}
header.style-1 .main-menu ul > li ul.sub-menu > li:last-child .sub-menu li a::before {
display: block;
}
header.style-1 .main-menu ul > li ul.sub-menu > li:last-child .sub-menu li:last-child a {
border-bottom: none;
}
header.style-1 .main-menu ul > li ul.sub-menu > li:last-child .sub-menu li:last-child a::before {
display: none;
}
header.style-1 .main-menu ul > li ul.sub-menu > li:hover > a {
color: var(--primary-color2);
}
header.style-1 .main-menu ul > li ul.sub-menu > li:hover .dropdown-icon {
color: var(--primary-color2);
}
header.style-1 .main-menu ul > li ul.sub-menu > li:hover .dropdown-icon2 {
color: var(--primary-color);
}
header.style-1 .main-menu ul > li ul.sub-menu > li.current-menu-parent > a, header.style-1 .main-menu ul > li ul.sub-menu > li.current-menu-ancestor > a, header.style-1 .main-menu ul > li ul.sub-menu > li.current-menu-parent > a, header.style-1 .main-menu ul > li ul.sub-menu > li.current-menu-item > a, header.style-1 .main-menu ul > li ul.sub-menu > li.current_page_item > a {
color: var(--primary-color2);
}
header.style-1 .main-menu ul > li ul.sub-menu > li.current-menu-parent .dropdown-icon, header.style-1 .main-menu ul > li ul.sub-menu > li.current-menu-ancestor .dropdown-icon, header.style-1 .main-menu ul > li ul.sub-menu > li.current-menu-parent .dropdown-icon, header.style-1 .main-menu ul > li ul.sub-menu > li.current-menu-item .dropdown-icon, header.style-1 .main-menu ul > li ul.sub-menu > li.current_page_item .dropdown-icon {
color: var(--primary-color2);
}
header.style-1 .main-menu ul > li ul.sub-menu > li.current-menu-parent .dropdown-icon2, header.style-1 .main-menu ul > li ul.sub-menu > li.current-menu-ancestor .dropdown-icon2, header.style-1 .main-menu ul > li ul.sub-menu > li.current-menu-parent .dropdown-icon2, header.style-1 .main-menu ul > li ul.sub-menu > li.current-menu-item .dropdown-icon2, header.style-1 .main-menu ul > li ul.sub-menu > li.current_page_item .dropdown-icon2 {
color: var(--primary-color);
}
header.style-1 .main-menu ul > li ul.sub-menu > li.menu-item-has-children > a {
position: relative;
}
header.style-1 .main-menu ul > li ul.sub-menu > li.menu-item-has-children > a::after {
position: absolute;
content: "\f285";
right: 10px;
font-family: bootstrap-icons !important;
}
@media (max-width: 991px) {
header.style-1 .main-menu ul > li ul.sub-menu > li.menu-item-has-children > a::after {
display: none;
}
}
header.style-1 .main-menu ul > li ul.sub-menu > li .sub-menu {
left: 100%;
position: absolute;
max-width: 230px;
min-width: 215px;
background: var(--white-color);
top: 0;
}
header.style-1 .main-menu ul > li ul.sub-menu > li .sub-menu::before {
display: none;
visibility: hidden;
}
@media only screen and (max-width: 991px) {
header.style-1 .main-menu ul > li ul.sub-menu > li .sub-menu {
margin-left: 10px;
position: unset;
max-width: 230px;
min-width: 215px;
background: transparent;
top: 0;
}
}
header.style-1 .main-menu ul > li ul.sub-menu > li .sub-menu > li i {
display: block;
}
header.style-1 .main-menu ul > li ul.sub-menu > li:last-child {
border-bottom: none;
}
header.style-1 .main-menu ul > li:hover > a {
color: var(--primary-color);
}
@media (max-width: 991px) {
header.style-1 .main-menu ul > li:hover > a {
border-color: transparent;
}
}
header.style-1 .main-menu ul > li:hover::after {
opacity: 1;
}
@media (min-width: 992px) {
header.style-1 .main-menu ul > li:hover > ul.sub-menu {
display: block;
animation: fade-up 0.45s linear;
}
}
@keyframes fade-up {
0% {
opacity: 0;
transform: translateY(10px);
visibility: hidden;
}
100% {
opacity: 1;
transform: translateY(0px);
visibility: visible;
}
}
header.style-1 .main-menu ul > li.current_page_ancestor > a, header.style-1 .main-menu ul > li.current-menu-parent > a, header.style-1 .main-menu ul > li.current-menu-ancestor > a, header.style-1 .main-menu ul > li.current-menu-item > a {
color: var(--primary-color);
}
@media (max-width: 991px) {
header.style-1 .main-menu ul > li.current_page_ancestor > a, header.style-1 .main-menu ul > li.current-menu-parent > a, header.style-1 .main-menu ul > li.current-menu-ancestor > a, header.style-1 .main-menu ul > li.current-menu-item > a {
border-color: transparent;
}
}
header.style-1 .main-menu ul > li.current_page_ancestor::after, header.style-1 .main-menu ul > li.current-menu-parent::after, header.style-1 .main-menu ul > li.current-menu-ancestor::after, header.style-1 .main-menu ul > li.current-menu-item::after {
opacity: 1;
}
header.style-1 .main-menu ul > li.current_page_ancestor .dropdown-icon2, header.style-1 .main-menu ul > li.current-menu-parent .dropdown-icon2, header.style-1 .main-menu ul > li.current-menu-ancestor .dropdown-icon2, header.style-1 .main-menu ul > li.current-menu-item .dropdown-icon2 {
color: var(--primary-color);
}
@media only screen and (max-width: 991px) {
header.style-1 .mobile-logo-area .mobile-logo-wrap a img {
width: 150px;
}
header.style-1 .mobile-logo-area .menu-close-btn {
height: 32px;
width: 32px;
border-radius: 50%;
border: 1px solid var(--title-color);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.35s;
}
header.style-1 .mobile-logo-area .menu-close-btn i {
font-size: 26px;
line-height: 1;
margin-top: 2px;
color: var(--title-color);
transition: 0.35s;
}
header.style-1 .mobile-logo-area .menu-close-btn:hover {
background-color: var(--title-color);
}
header.style-1 .mobile-logo-area .menu-close-btn:hover i {
color: var(--white-color);
}
header.style-1 .dropdown-icon {
color: var(--white-color);
}
header.style-1 .main-menu {
position: fixed;
top: 0;
left: 0;
width: 280px;
padding: 30px 20px !important;
z-index: 99999;
height: 100%;
overflow: auto;
background: #fff;
border-right: 1px solid #eee;
transform: translateX(-100%);
transition: transform 0.3s ease-in;
box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.03);
}
header.style-1 .main-menu.show-menu {
transform: translateX(0);
}
header.style-1 .main-menu .mobile-menu-logo {
text-align: left;
padding-top: 20px;
display: block;
padding-bottom: 8px;
}
header.style-1 .main-menu .menu-list {
padding-top: 50px;
padding-bottom: 40px;
}
header.style-1 .main-menu > ul {
float: none;
text-align: left;
padding: 5px 0px 20px 0;
}
header.style-1 .main-menu > ul > li {
display: block;
position: relative;
padding: 0;
}
header.style-1 .main-menu > ul > li i {
top: 8px;
font-size: 20px;
color: var(--title-color);
line-height: 1;
display: none;
}
header.style-1 .main-menu > ul > li.menu-item-has-children i {
display: block;
}
header.style-1 .main-menu > ul > li a {
padding: 13px 0;
display: block;
}
header.style-1 .main-menu > ul > li ul.sub-menu {
position: static;
min-width: 200px;
background: 0 0;
border: none;
opacity: 1;
visibility: visible;
box-shadow: none;
transform: none;
transition: none;
display: none;
margin-top: 0 !important;
transform: translateY(0px);
padding-left: 10px;
}
header.style-1 .main-menu > ul > li ul.sub-menu > li {
border-bottom: 1px solid transparent;
}
header.style-1 .main-menu > ul > li ul.sub-menu > li a {
color: var(--title-color);
padding: 12px 0px;
}
header.style-1 .main-menu > ul > li ul.sub-menu > li a:hover {
color: var(--primary-color);
margin-left: 10px;
}
header.style-1 .main-menu > ul > li ul.sub-menu > li > i {
color: var(--primary-color);
right: -13px;
display: none;
}
header.style-1 .main-menu > ul > li ul.sub-menu > li.menu-item-has-children > i {
display: block;
}
header.style-1 .main-menu > ul > li ul.sub-menu > li ul.sub-menu li > i {
color: var(--primary-color);
right: -13px;
display: none;
}
header.style-1 .main-menu > ul > li ul.sub-menu > li ul.sub-menu li.menu-item-has-children > i {
display: block;
}
}
header.style-1.error-header {
border-bottom: 1px solid rgba(var(--primary-color-opc), 0.1);
}
.header-topbar-wrap {
position: absolute;
width: 100%;
}
header.style-2 {
position: relative;
width: 100%;
z-index: 99;
transition: all 0.8s ease-out 0s;
padding: 0 5.5%;
background-color: rgba(var(--primary-color-opc), 0.2);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
@media (min-width: 1400px) and (max-width: 1599px) {
header.style-2 {
padding: 0 4%;
}
}
@media (max-width: 1399px) {
header.style-2 {
padding: 0 4%;
}
}
@media (max-width: 1199px) {
header.style-2 {
padding: 0 20px;
}
}
@media (max-width: 991px) {
header.style-2 {
-webkit-backdrop-filter: unset;
backdrop-filter: unset;
}
}
@media (max-width: 767px) {
header.style-2 {
padding: 0 10px;
}
}
@media (max-width: 576px) {
header.style-2 {
padding: 0;
}
}
header.style-2.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding-top: 0 !important;
padding-bottom: 0 !important;
box-sizing: border-box;
background-color: var(--primary-color);
z-index: 9999;
}
@keyframes smooth-header {
0% {
transform: translateY(-30px);
}
100% {
transform: translateY(0px);
}
}
@media (max-width: 991px) {
header.style-2 .header-logo {
padding: 15px 0;
}
}
header.style-2 .header-logo a img {
width: 150px;
}
@media (min-width: 992px) and (max-width: 1199px) {
header.style-2 .header-logo a img {
width: 140px;
}
}
@media (max-width: 576px) {
header.style-2 .header-logo a img {
width: 140px;
}
}
header.style-2 .nav-right {
display: flex;
align-items: center;
gap: 60px;
}
@media (max-width: 1199px) {
header.style-2 .nav-right {
gap: 25px;
}
}
@media (max-width: 576px) {
header.style-2 .nav-right {
gap: 15px;
}
}
header.style-2 .nav-right .right-sidebar-button {
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
position: relative;
}
header.style-2 .nav-right .right-sidebar-button svg {
fill: var(--white-color);
}
header.style-2 .nav-right .right-sidebar-button span {
color: var(--white-color);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.03em;
}
@keyframes qode-draw {
0%, 100% {
-webkit-clip-path: inset(-2px -2px);
clip-path: inset(-2px -2px);
}
42% {
-webkit-clip-path: inset(-2px -2px -2px 100%);
clip-path: inset(-2px -2px -2px 100%);
}
43% {
-webkit-clip-path: inset(-2px 100% -3px -2px);
clip-path: inset(-2px 100% -3px -2px);
}
}
header.style-2 .nav-right .right-sidebar-button::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -30px;
width: 2px;
height: 18px;
background-color: var(--primary-color2);
}
@media (max-width: 1199px) {
header.style-2 .nav-right .right-sidebar-button::after {
right: -13px;
}
}
@media (max-width: 991px) {
header.style-2 .nav-right .right-sidebar-button::after {
display: none;
}
}
header.style-2 .nav-right .right-sidebar-button:hover svg {
animation: qode-draw 0.75s cubic-bezier(0.57, 0.39, 0, 0.86) 1 forwards;
}
header.style-2 .nav-right .mobile-menu-btn {
display: none;
visibility: hidden;
}
@media (max-width: 991px) {
header.style-2 .nav-right .mobile-menu-btn {
display: flex;
flex-direction: column;
align-items: end;
visibility: visible;
justify-content: center;
position: relative;
}
header.style-2 .nav-right .mobile-menu-btn svg {
fill: var(--white-color);
}
}
header.style-2 .nav-right .primary-btn {
font-size: 15px;
}
header.style-2 .main-menu {
display: inline-block;
position: relative;
}
header.style-2 .main-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
header.style-2 .main-menu ul > li {
display: inline-block;
position: relative;
}
header.style-2 .main-menu ul > li::after {
content: "";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 7px;
height: 7px;
border-radius: 50%;
background-color: var(--white-color);
opacity: 0;
transition: all 0.5s ease-out 0s;
}
@media (max-width: 1399px) {
header.style-2 .main-menu ul > li::after {
right: 5px;
}
}
@media (max-width: 1199px) {
header.style-2 .main-menu ul > li::after {
right: 0;
}
}
@media (max-width: 991px) {
header.style-2 .main-menu ul > li::after {
display: none;
}
}
@media (max-width: 991px) {
header.style-2 .main-menu ul > li {
padding: 22px 0px;
}
}
header.style-2 .main-menu ul > li:first-child {
padding-left: 0;
}
header.style-2 .main-menu ul > li > a {
color: var(--white-color);
display: block;
text-transform: capitalize;
padding: 31px 25px;
position: relative;
font-family: var(--font-kanit);
font-weight: 400;
font-size: 14px;
transition: all 0.5s ease-out 0s;
position: relative;
line-height: 1;
}
@media (max-width: 1399px) {
header.style-2 .main-menu ul > li > a {
font-size: 14px;
padding: 31px 20px;
}
}
@media (max-width: 1199px) {
header.style-2 .main-menu ul > li > a {
padding: 30px 15px;
}
}
header.style-2 .main-menu ul > li i {
font-size: 20px;
text-align: center;
color: var(--white-color);
font-style: normal;
position: absolute;
right: -5px;
top: 35px;
z-index: 999;
cursor: pointer;
display: none;
transition: all 0.5s ease-out 0s;
opacity: 0;
}
@media (max-width: 991px) {
header.style-2 .main-menu ul > li i {
opacity: 1;
}
}
header.style-2 .main-menu ul > li i.current_page_ancestor, header.style-2 .main-menu ul > li i.current-menu-parent, header.style-2 .main-menu ul > li i.current-menu-ancestor, header.style-2 .main-menu ul > li i.current-menu-item {
color: var(--primary-color);
}
header.style-2 .main-menu ul > li i.current_page_ancestor::before, header.style-2 .main-menu ul > li i.current-menu-parent::before, header.style-2 .main-menu ul > li i.current-menu-ancestor::before, header.style-2 .main-menu ul > li i.current-menu-item::before {
content: "\f2ea";
}
header.style-2 .main-menu ul > li ul.sub-menu {
position: absolute;
left: 0;
right: 0;
top: auto;
margin: 0;
display: none;
min-width: 215px;
background: var(--white-color);
border: 1px solid rgba(13, 23, 32, 0.0784313725);
text-align: left;
}
header.style-2 .main-menu ul > li ul.sub-menu > li {
padding: 0;
display: block;
position: relative;
}
header.style-2 .main-menu ul > li ul.sub-menu > li::after {
display: none;
}
header.style-2 .main-menu ul > li ul.sub-menu > li i {
position: absolute;
top: 10px;
right: 6px;
display: block;
color: var(--title-color);
font-size: 20px;
}
header.style-2 .main-menu ul > li ul.sub-menu > li .dropdown-icon {
color: var(--title-color);
opacity: 1;
top: 17px;
font-size: 13px;
right: 15px;
}
@media (max-width: 991px) {
header.style-2 .main-menu ul > li ul.sub-menu > li .dropdown-icon {
right: 0;
top: 11px;
font-size: 20px;
}
}
header.style-2 .main-menu ul > li ul.sub-menu > li > a {
display: block;
padding: 14px 20px;
font-family: var(--font-inter);
color: var(--title-color);
font-weight: 500;
text-transform: capitalize;
font-size: 13px;
line-height: 1.4;
transition: all 0.4s ease-out 0s;
position: relative;
border-radius: 0;
border: none;
border-bottom: 1px solid rgba(13, 23, 32, 0.0784313725);
}
header.style-2 .main-menu ul > li ul.sub-menu > li > a::before {
content: "";
position: absolute;
bottom: -1px;
left: 0;
background: linear-gradient(90deg, #fff, var(--primary-color2), #fff);
width: 100%;
height: 1px;
transform: scaleX(0);
transform-origin: left;
transition: 0.4s ease-in;
z-index: 1;
}
@media (max-width: 991px) {
header.style-2 .main-menu ul > li ul.sub-menu > li > a {
border-color: rgba(13, 23, 32, 0.0784313725);
}
header.style-2 .main-menu ul > li ul.sub-menu > li > a::before {
background: linear-gradient(90deg, #525252, #EC6219, #525252);
}
}
header.style-2 .main-menu ul > li ul.sub-menu > li > a:hover {
color: var(--primary-color);
}
header.style-2 .main-menu ul > li ul.sub-menu > li > a:hover::before {
transform: scale(1);
}
header.style-2 .main-menu ul > li ul.sub-menu > li > a.current_page_ancestor, header.style-2 .main-menu ul > li ul.sub-menu > li > a.current-menu-parent, header.style-2 .main-menu ul > li ul.sub-menu > li > a.current-menu-ancestor, header.style-2 .main-menu ul > li ul.sub-menu > li > a.current-menu-item {
color: var(--primary-color);
}
header.style-2 .main-menu ul > li ul.sub-menu > li > a.current_page_ancestor::before, header.style-2 .main-menu ul > li ul.sub-menu > li > a.current-menu-parent::before, header.style-2 .main-menu ul > li ul.sub-menu > li > a.current-menu-ancestor::before, header.style-2 .main-menu ul > li ul.sub-menu > li > a.current-menu-item::before {
transform: scale(1);
}
header.style-2 .main-menu ul > li ul.sub-menu > li:last-child a {
border-bottom: none;
}
header.style-2 .main-menu ul > li ul.sub-menu > li:last-child a::before {
display: none;
}
header.style-2 .main-menu ul > li ul.sub-menu > li:last-child .sub-menu li a {
border-bottom: 1px solid rgba(13, 23, 32, 0.0784313725);
}
header.style-2 .main-menu ul > li ul.sub-menu > li:last-child .sub-menu li a::before {
display: block;
}
header.style-2 .main-menu ul > li ul.sub-menu > li:last-child .sub-menu li:last-child a {
border-bottom: none;
}
header.style-2 .main-menu ul > li ul.sub-menu > li:last-child .sub-menu li:last-child a::before {
display: none;
}
header.style-2 .main-menu ul > li ul.sub-menu > li:hover > a {
color: var(--primary-color2);
}
header.style-2 .main-menu ul > li ul.sub-menu > li:hover .dropdown-icon {
color: var(--primary-color2);
}
header.style-2 .main-menu ul > li ul.sub-menu > li:hover .dropdown-icon2 {
color: var(--primary-color);
}
header.style-2 .main-menu ul > li ul.sub-menu > li.current_page_ancestor > a, header.style-2 .main-menu ul > li ul.sub-menu > li.current-menu-parent > a, header.style-2 .main-menu ul > li ul.sub-menu > li.current-menu-ancestor > a, header.style-2 .main-menu ul > li ul.sub-menu > li.current-menu-item > a {
color: var(--primary-color2);
}
header.style-2 .main-menu ul > li ul.sub-menu > li.current_page_ancestor .dropdown-icon, header.style-2 .main-menu ul > li ul.sub-menu > li.current-menu-parent .dropdown-icon, header.style-2 .main-menu ul > li ul.sub-menu > li.current-menu-ancestor .dropdown-icon, header.style-2 .main-menu ul > li ul.sub-menu > li.current-menu-item .dropdown-icon {
color: var(--primary-color2);
}
header.style-2 .main-menu ul > li ul.sub-menu > li.current_page_ancestor .dropdown-icon2, header.style-2 .main-menu ul > li ul.sub-menu > li.current-menu-parent .dropdown-icon2, header.style-2 .main-menu ul > li ul.sub-menu > li.current-menu-ancestor .dropdown-icon2, header.style-2 .main-menu ul > li ul.sub-menu > li.current-menu-item .dropdown-icon2 {
color: var(--primary-color);
}
header.style-2 .main-menu ul > li ul.sub-menu > li.menu-item-has-children > a {
position: relative;
}
header.style-2 .main-menu ul > li ul.sub-menu > li.menu-item-has-children > a::after {
position: absolute;
content: "\f285";
right: 10px;
font-family: bootstrap-icons !important;
}
@media (max-width: 991px) {
header.style-2 .main-menu ul > li ul.sub-menu > li.menu-item-has-children > a::after {
display: none;
}
}
header.style-2 .main-menu ul > li ul.sub-menu > li .sub-menu {
left: 100%;
position: absolute;
max-width: 230px;
min-width: 215px;
background: var(--white-color);
top: 0;
}
header.style-2 .main-menu ul > li ul.sub-menu > li .sub-menu::before {
display: none;
visibility: hidden;
}
@media only screen and (max-width: 991px) {
header.style-2 .main-menu ul > li ul.sub-menu > li .sub-menu {
margin-left: 10px;
position: unset;
max-width: 230px;
min-width: 215px;
background: transparent;
top: 0;
}
}
header.style-2 .main-menu ul > li ul.sub-menu > li .sub-menu > li i {
display: block;
}
header.style-2 .main-menu ul > li ul.sub-menu > li:last-child {
border-bottom: none;
}
header.style-2 .main-menu ul > li:hover > a {
color: var(--white-color);
}
@media (max-width: 991px) {
header.style-2 .main-menu ul > li:hover > a {
border-color: transparent;
}
}
header.style-2 .main-menu ul > li:hover::after {
opacity: 1;
}
@media (min-width: 992px) {
header.style-2 .main-menu ul > li:hover > ul.sub-menu {
display: block;
animation: fade-up 0.45s linear;
}
}
@keyframes fade-up {
0% {
opacity: 0;
transform: translateY(10px);
visibility: hidden;
}
100% {
opacity: 1;
transform: translateY(0px);
visibility: visible;
}
}
header.style-2 .main-menu ul > li.current_page_ancestor > a, header.style-2 .main-menu ul > li.current-menu-parent > a, header.style-2 .main-menu ul > li.current-menu-ancestor > a, header.style-2 .main-menu ul > li.current-menu-item > a {
color: var(--white-color);
}
@media (max-width: 991px) {
header.style-2 .main-menu ul > li.current_page_ancestor > a, header.style-2 .main-menu ul > li.current-menu-parent > a, header.style-2 .main-menu ul > li.current-menu-ancestor > a, header.style-2 .main-menu ul > li.current-menu-item > a {
border-color: transparent;
}
}
header.style-2 .main-menu ul > li.current_page_ancestor::after, header.style-2 .main-menu ul > li.current-menu-parent::after, header.style-2 .main-menu ul > li.current-menu-ancestor::after, header.style-2 .main-menu ul > li.current-menu-item::after {
opacity: 1;
}
@media only screen and (max-width: 991px) {
header.style-2 .mobile-logo-area .mobile-logo-wrap a img {
width: 150px;
}
header.style-2 .mobile-logo-area .menu-close-btn {
height: 32px;
width: 32px;
border-radius: 50%;
border: 1px solid var(--title-color);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.35s;
}
header.style-2 .mobile-logo-area .menu-close-btn i {
font-size: 26px;
line-height: 1;
margin-top: 2px;
color: var(--title-color);
transition: 0.35s;
}
header.style-2 .mobile-logo-area .menu-close-btn:hover {
background-color: var(--title-color);
}
header.style-2 .mobile-logo-area .menu-close-btn:hover i {
color: var(--white-color);
}
header.style-2 .dropdown-icon {
color: var(--white-color);
}
header.style-2 .main-menu {
position: fixed;
top: 0;
left: 0;
width: 280px;
padding: 30px 20px !important;
z-index: 99999;
height: 100%;
overflow: auto;
background: #fff;
border-right: 1px solid #eee;
transform: translateX(-100%);
transition: transform 0.3s ease-in;
box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.03);
}
header.style-2 .main-menu.show-menu {
transform: translateX(0);
}
header.style-2 .main-menu .mobile-menu-logo {
text-align: left;
padding-top: 20px;
display: block;
padding-bottom: 8px;
}
header.style-2 .main-menu .menu-list {
padding-top: 50px;
padding-bottom: 30px;
}
header.style-2 .main-menu > ul {
float: none;
text-align: left;
padding: 5px 0px 20px 0;
}
header.style-2 .main-menu > ul > li {
position: relative;
display: block;
padding: 0;
}
header.style-2 .main-menu > ul > li i {
top: 8px;
font-size: 20px;
color: var(--title-color);
line-height: 1;
display: none;
}
header.style-2 .main-menu > ul > li.menu-item-has-children i {
display: block;
}
header.style-2 .main-menu > ul > li a {
padding: 10px 0;
display: block;
color: var(--title-color);
}
header.style-2 .main-menu > ul > li.current_page_ancestor > a,
header.style-2 .main-menu > ul > li.current_page_ancestor i, header.style-2 .main-menu > ul > li.current-menu-parent > a,
header.style-2 .main-menu > ul > li.current-menu-parent i, header.style-2 .main-menu > ul > li.current-menu-ancestor > a,
header.style-2 .main-menu > ul > li.current-menu-ancestor i, header.style-2 .main-menu > ul > li.current-menu-item > a,
header.style-2 .main-menu > ul > li.current-menu-item i {
color: var(--primary-color2);
}
header.style-2 .main-menu > ul > li ul.sub-menu {
position: static;
min-width: 200px;
background: 0 0;
border: none;
opacity: 1;
visibility: visible;
box-shadow: none;
transform: none;
transition: none;
display: none;
margin-top: 0 !important;
transform: translateY(0px);
padding-left: 10px;
}
header.style-2 .main-menu > ul > li ul.sub-menu > li {
border-bottom: 1px solid transparent;
}
header.style-2 .main-menu > ul > li ul.sub-menu > li a {
color: var(--title-color);
padding: 12px 0px;
}
header.style-2 .main-menu > ul > li ul.sub-menu > li a:hover {
color: var(--primary-color);
margin-left: 10px;
}
header.style-2 .main-menu > ul > li ul.sub-menu > li i {
color: var(--primary-color);
right: -13px;
display: none;
}
header.style-2 .main-menu > ul > li ul.sub-menu > li.menu-item-has-children i {
display: block;
}
header.style-2 .main-menu > ul > li ul.sub-menu > li ul.sub-menu li i {
color: var(--primary-color);
right: -13px;
display: none;
}
header.style-2 .main-menu > ul > li ul.sub-menu > li ul.sub-menu li.menu-item-has-children i {
display: block;
}
}
header.style-3 {
position: relative;
width: 100%;
z-index: 99;
transition: all 0.8s ease-out 0s;
background-color: transparent;
padding: 24px 5.5%;
}
@media (min-width: 1400px) and (max-width: 1599px) {
header.style-3 {
padding: 24px 4%;
}
}
@media (max-width: 1399px) {
header.style-3 {
padding: 24px 4%;
}
}
@media (max-width: 1199px) {
header.style-3 {
padding: 20px 20px;
}
}
@media (max-width: 767px) {
header.style-3 {
padding: 10px 10px;
}
}
@media (max-width: 576px) {
header.style-3 {
padding: 10px 0;
}
}
header.style-3.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
background-color: var(--white-color);
box-shadow: 5px 3px 40px rgba(0, 72, 88, 0.1);
z-index: 999;
}
@keyframes smooth-header {
0% {
transform: translateY(-30px);
}
100% {
transform: translateY(0px);
}
}
@media (max-width: 991px) {
header.style-3 .header-logo {
padding: 15px 0;
}
}
header.style-3 .header-logo a img {
width: 150px;
}
@media (min-width: 992px) and (max-width: 1199px) {
header.style-3 .header-logo a img {
width: 140px;
}
}
@media (max-width: 576px) {
header.style-3 .header-logo a img {
width: 140px;
}
}
header.style-3 .menu-btn {
border-radius: 200px;
border: 1px solid rgba(var(--primary-color-opc), 0.3);
padding: 5px 20px 5px 6px;
cursor: pointer;
}
header.style-3 .menu-btn .menu-btn-wrap {
display: flex;
align-items: center;
gap: 8px;
position: relative;
}
header.style-3 .menu-btn .menu-btn-wrap .icon {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
}
header.style-3 .menu-btn .menu-btn-wrap .icon svg {
fill: var(--white-color);
}
header.style-3 .menu-btn .menu-btn-wrap span {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.03em;
transition: 0.5s;
}
header.style-3 .menu-btn .menu-btn-wrap::before {
position: absolute;
content: "";
border-radius: 200px;
width: 112%;
height: 100%;
top: 0;
left: 2px;
background-color: var(--title-color);
transform-origin: left;
transform: scalex(0);
z-index: -1;
transition: transform 0.7s;
}
header.style-3 .menu-btn:hover .menu-btn-wrap::before {
transform: scalex(1);
}
header.style-3 .menu-btn:hover .menu-btn-wrap span {
color: var(--white-color);
}
header.style-3 .nav-right {
display: flex;
align-items: center;
gap: 60px;
position: relative;
}
@media (max-width: 1199px) {
header.style-3 .nav-right {
gap: 50px;
}
}
@media (max-width: 991px) {
header.style-3 .nav-right {
gap: 35px;
}
}
@media (max-width: 576px) {
header.style-3 .nav-right {
gap: 15px;
}
}
header.style-3 .nav-right::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 2px;
height: 18px;
background-color: var(--primary-color2);
}
@media (max-width: 767px) {
header.style-3 .nav-right::before {
display: none;
}
}
header.style-3 .nav-right .contact-area {
display: flex;
align-items: center;
gap: 8px;
}
header.style-3 .nav-right .contact-area .icon {
padding: 3px 5px;
background-color: rgba(var(--primary-color-opc), 0.1);
border-radius: 5px;
}
header.style-3 .nav-right .contact-area .content {
line-height: 1;
}
header.style-3 .nav-right .contact-area .content span {
color: var(--paragraph-color);
font-family: var(--font-kanit);
font-size: 10px;
font-weight: 400;
line-height: 1;
display: block;
margin-bottom: 5px;
}
header.style-3 .nav-right .contact-area .content a {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 500;
line-height: 1;
transition: 0.5s;
}
header.style-3 .nav-right .contact-area .content a:hover {
color: var(--primary-color2);
}
header.style-3 .nav-right .primary-btn {
font-size: 15px;
}
header.style-3 .main-menu {
display: inline-block;
position: relative;
}
header.style-3 .main-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
header.style-3 .main-menu ul > li {
display: inline-block;
position: relative;
}
header.style-3 .main-menu ul > li::after {
content: "";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 7px;
height: 7px;
border-radius: 50%;
background-color: var(--primary-color);
opacity: 0;
transition: all 0.5s ease-out 0s;
}
@media (max-width: 1399px) {
header.style-3 .main-menu ul > li::after {
right: 5px;
}
}
@media (max-width: 1199px) {
header.style-3 .main-menu ul > li::after {
right: 0;
}
}
@media (max-width: 991px) {
header.style-3 .main-menu ul > li::after {
display: none;
}
}
@media (max-width: 991px) {
header.style-3 .main-menu ul > li {
padding: 22px 0px;
}
}
header.style-3 .main-menu ul > li:first-child {
padding-left: 0;
}
header.style-3 .main-menu ul > li > a {
color: var(--title-color);
display: block;
text-transform: capitalize;
padding: 38px 25px;
position: relative;
font-family: var(--font-kanit);
font-weight: 400;
font-size: 14px;
transition: all 0.5s ease-out 0s;
position: relative;
line-height: 1;
}
@media (max-width: 1399px) {
header.style-3 .main-menu ul > li > a {
font-size: 14px;
padding: 34px 20px;
}
}
@media (max-width: 1199px) {
header.style-3 .main-menu ul > li > a {
padding: 34px 15px;
}
}
header.style-3 .main-menu ul > li i {
font-size: 20px;
text-align: center;
color: var(--white-color);
font-style: normal;
position: absolute;
right: -5px;
top: 35px;
z-index: 999;
cursor: pointer;
display: none;
transition: all 0.5s ease-out 0s;
opacity: 0;
}
@media (max-width: 991px) {
header.style-3 .main-menu ul > li i {
opacity: 1;
}
}
header.style-3 .main-menu ul > li i.active {
color: var(--primary-color);
}
header.style-3 .main-menu ul > li i.active::before {
content: "\f2ea";
}
header.style-3 .main-menu ul > li ul.sub-menu {
position: absolute;
left: 0;
right: 0;
top: auto;
margin: 0;
display: none;
min-width: 215px;
background: var(--white-color);
border: 1px solid rgba(13, 23, 32, 0.0784313725);
text-align: left;
}
header.style-3 .main-menu ul > li ul.sub-menu > li {
padding: 0;
display: block;
position: relative;
}
header.style-3 .main-menu ul > li ul.sub-menu > li::after {
display: none;
}
header.style-3 .main-menu ul > li ul.sub-menu > li i {
position: absolute;
top: 10px;
right: 6px;
display: block;
color: var(--title-color);
font-size: 20px;
}
header.style-3 .main-menu ul > li ul.sub-menu > li .dropdown-icon {
color: var(--title-color);
opacity: 1;
top: 15px;
font-size: 13px;
right: 15px;
}
@media (max-width: 991px) {
header.style-3 .main-menu ul > li ul.sub-menu > li .dropdown-icon {
right: 0;
top: 11px;
font-size: 20px;
}
}
header.style-3 .main-menu ul > li ul.sub-menu > li .dropdown-icon2 {
color: var(--title-color);
opacity: 1;
top: 14px;
right: 10px;
font-size: 13px;
}
@media (max-width: 1199px) {
header.style-3 .main-menu ul > li ul.sub-menu > li .dropdown-icon2::before {
content: "\f4fe";
}
}
header.style-3 .main-menu ul > li ul.sub-menu > li > a {
display: block;
padding: 14px 20px;
font-family: var(--font-inter);
color: var(--title-color);
font-weight: 500;
text-transform: capitalize;
font-size: 13px;
line-height: 1.4;
transition: all 0.4s ease-out 0s;
position: relative;
border-radius: 0;
border: none;
border-bottom: 1px solid rgba(13, 23, 32, 0.0784313725);
}
header.style-3 .main-menu ul > li ul.sub-menu > li > a::before {
content: "";
position: absolute;
bottom: -1px;
left: 0;
background: linear-gradient(90deg, #fff, var(--primary-color), #fff);
width: 100%;
height: 1px;
transform: scaleX(0);
transform-origin: left;
transition: 0.4s ease-in;
z-index: 1;
}
@media (max-width: 991px) {
header.style-3 .main-menu ul > li ul.sub-menu > li > a {
border-color: rgba(13, 23, 32, 0.0784313725);
}
header.style-3 .main-menu ul > li ul.sub-menu > li > a::before {
background: linear-gradient(90deg, #525252, #EC6219, #525252);
}
}
header.style-3 .main-menu ul > li ul.sub-menu > li > a:hover {
color: var(--primary-color);
}
header.style-3 .main-menu ul > li ul.sub-menu > li > a:hover::before {
transform: scale(1);
}
header.style-3 .main-menu ul > li ul.sub-menu > li > a.active {
color: var(--primary-color);
}
header.style-3 .main-menu ul > li ul.sub-menu > li > a.active::before {
transform: scale(1);
}
header.style-3 .main-menu ul > li ul.sub-menu > li:last-child a {
border-bottom: none;
}
header.style-3 .main-menu ul > li ul.sub-menu > li:last-child a::before {
display: none;
}
header.style-3 .main-menu ul > li ul.sub-menu > li:last-child .sub-menu li a {
border-bottom: 1px solid rgba(13, 23, 32, 0.0784313725);
}
header.style-3 .main-menu ul > li ul.sub-menu > li:last-child .sub-menu li a::before {
display: block;
}
header.style-3 .main-menu ul > li ul.sub-menu > li:last-child .sub-menu li:last-child a {
border-bottom: none;
}
header.style-3 .main-menu ul > li ul.sub-menu > li:last-child .sub-menu li:last-child a::before {
display: none;
}
header.style-3 .main-menu ul > li ul.sub-menu > li:hover > a {
color: var(--primary-color);
}
header.style-3 .main-menu ul > li ul.sub-menu > li:hover .dropdown-icon {
color: var(--primary-color);
}
header.style-3 .main-menu ul > li ul.sub-menu > li:hover .dropdown-icon2 {
color: var(--primary-color);
}
header.style-3 .main-menu ul > li ul.sub-menu > li.active > a {
color: var(--primary-color);
}
header.style-3 .main-menu ul > li ul.sub-menu > li.active .dropdown-icon {
color: var(--primary-color);
}
header.style-3 .main-menu ul > li ul.sub-menu > li.active .dropdown-icon2 {
color: var(--primary-color);
}
header.style-3 .main-menu ul > li ul.sub-menu > li .sub-menu {
left: 100%;
position: absolute;
max-width: 230px;
min-width: 215px;
background: var(--white-color);
top: 0;
}
header.style-3 .main-menu ul > li ul.sub-menu > li .sub-menu::before {
display: none;
visibility: hidden;
}
@media only screen and (max-width: 991px) {
header.style-3 .main-menu ul > li ul.sub-menu > li .sub-menu {
margin-left: 10px;
position: unset;
max-width: 230px;
min-width: 215px;
background: transparent;
top: 0;
}
}
header.style-3 .main-menu ul > li ul.sub-menu > li .sub-menu > li i {
display: block;
}
header.style-3 .main-menu ul > li ul.sub-menu > li:last-child {
border-bottom: none;
}
header.style-3 .main-menu ul > li:hover > a {
color: var(--primary-color);
}
@media (max-width: 991px) {
header.style-3 .main-menu ul > li:hover > a {
border-color: transparent;
}
}
header.style-3 .main-menu ul > li:hover::after {
opacity: 1;
}
@media (min-width: 992px) {
header.style-3 .main-menu ul > li:hover > ul.sub-menu {
display: block;
animation: fade-up 0.45s linear;
}
}
@keyframes fade-up {
0% {
opacity: 0;
transform: translateY(10px);
visibility: hidden;
}
100% {
opacity: 1;
transform: translateY(0px);
visibility: visible;
}
}
header.style-3 .main-menu ul > li.active > a {
color: var(--primary-color);
}
@media (max-width: 991px) {
header.style-3 .main-menu ul > li.active > a {
border-color: transparent;
}
}
header.style-3 .main-menu ul > li.active::after {
opacity: 1;
}
header.style-3 .main-menu ul > li.active .dropdown-icon2 {
color: var(--primary-color);
}
header.style-3 .main-menu ul li.menu-item-has-children > i {
display: block;
}
@media only screen and (max-width: 991px) {
header.style-3 .mobile-logo-area .menu-close-btn {
height: 32px;
width: 32px;
border-radius: 50%;
border: 1px solid var(--title-color);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.35s;
}
header.style-3 .mobile-logo-area .menu-close-btn i {
font-size: 26px;
line-height: 1;
margin-top: 2px;
color: var(--title-color);
transition: 0.35s;
}
header.style-3 .mobile-logo-area .menu-close-btn:hover {
background-color: var(--title-color);
}
header.style-3 .mobile-logo-area .menu-close-btn:hover i {
color: var(--white-color);
}
header.style-3 .dropdown-icon {
color: var(--white-color);
}
header.style-3 .main-menu {
position: fixed;
top: 0;
left: 0;
width: 280px;
padding: 30px 20px !important;
z-index: 99999;
height: 100%;
overflow: auto;
background: #fff;
border-right: 1px solid #eee;
transform: translateX(-100%);
transition: transform 0.3s ease-in;
box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.03);
}
header.style-3 .main-menu.show-menu {
transform: translateX(0);
}
header.style-3 .main-menu .mobile-menu-logo {
text-align: left;
padding-top: 20px;
display: block;
padding-bottom: 8px;
}
header.style-3 .main-menu .menu-list {
padding-top: 50px;
padding-bottom: 30px;
}
header.style-3 .main-menu > ul {
float: none;
text-align: left;
padding: 5px 0px 20px 0;
}
header.style-3 .main-menu > ul > li {
display: block;
position: relative;
padding: 0;
}
header.style-3 .main-menu > ul > li i {
display: block;
}
header.style-3 .main-menu > ul > li a {
padding: 10px 0;
display: block;
}
header.style-3 .main-menu > ul > li ul.sub-menu {
position: static;
min-width: 200px;
background: 0 0;
border: none;
opacity: 1;
visibility: visible;
box-shadow: none;
transform: none;
transition: none;
display: none;
margin-top: 0 !important;
transform: translateY(0px);
padding-left: 10px;
}
header.style-3 .main-menu > ul > li ul.sub-menu > li {
border-bottom: 1px solid transparent;
}
header.style-3 .main-menu > ul > li ul.sub-menu > li a {
color: var(--title-color);
padding: 12px 0px;
}
header.style-3 .main-menu > ul > li ul.sub-menu > li a:hover {
color: var(--primary-color);
margin-left: 10px;
}
header.style-3 .main-menu > ul > li ul.sub-menu > li a.active {
color: var(--primary-color);
}
header.style-3 .main-menu > ul > li ul.sub-menu > li i {
color: var(--primary-color);
right: -13px;
}
header.style-3 .main-menu > ul > li .bi {
top: 8px;
font-size: 20px;
color: var(--title-color);
line-height: 1;
}
}
header.style-3.two {
background-color: rgba(231, 150, 76, 0.08);
}
header.style-3.two.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
background-color: rgba(255, 255, 255, 0.5);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
box-shadow: 5px 3px 40px rgba(0, 72, 88, 0.1);
z-index: 999;
}
@keyframes smooth-header {
0% {
transform: translateY(-30px);
}
100% {
transform: translateY(0px);
}
}
.right-sidebar-menu {
position: fixed;
top: 0;
right: 0;
width: 550px;
z-index: 99999;
height: 100%;
overflow: auto;
background-color: var(--white-color);
transform: translateX(120%);
transform-origin: right;
transition: transform 0.5s ease-in;
box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.03);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.right-sidebar-menu::-webkit-scrollbar {
width: 0px;
}
@media (max-width: 576px) {
.right-sidebar-menu {
width: 320px;
}
}
.right-sidebar-menu.show-right-menu {
transform: translateX(0);
}
.right-sidebar-menu .right-sidebar-close-btn {
height: 32px;
width: 32px;
border-radius: 50%;
border: 1px solid #3F444B;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.35s;
}
.right-sidebar-menu .right-sidebar-close-btn i {
font-size: 26px;
line-height: 1;
margin-top: 2px;
color: #3F444B;
transition: 0.35s;
}
.right-sidebar-menu .right-sidebar-close-btn:hover {
background-color: var(--title-color);
}
.right-sidebar-menu .right-sidebar-close-btn:hover i {
color: var(--white-color);
}
.right-sidebar-menu .sidebar-logo-area {
text-align: left;
padding: 30px;
display: block;
border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
}
@media (max-width: 576px) {
.right-sidebar-menu .sidebar-logo-area {
padding: 20px;
}
}
.right-sidebar-menu .sidebar-content-wrap {
padding: 50px 40px;
}
@media (max-width: 576px) {
.right-sidebar-menu .sidebar-content-wrap {
padding: 40px 20px;
}
}
.right-sidebar-menu .sidebar-content-wrap .title-area span {
color: rgba(var(--title-color-opc), 0.6);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.03em;
text-transform: uppercase;
display: inline-block;
margin-bottom: 10px;
position: relative;
}
.right-sidebar-menu .sidebar-content-wrap .title-area span::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -41px;
width: 35px;
height: 1px;
background-color: var(--primary-color2);
}
.right-sidebar-menu .sidebar-content-wrap .title-area h2 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 37px;
font-weight: 500;
line-height: 1.1;
letter-spacing: 0.03em;
margin-bottom: 15px;
}
@media (max-width: 576px) {
.right-sidebar-menu .sidebar-content-wrap .title-area h2 {
font-size: 28px;
}
}
.right-sidebar-menu .sidebar-content-wrap .title-area p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.8;
margin-bottom: 0;
}
@media (max-width: 576px) {
.right-sidebar-menu .sidebar-content-wrap .title-area p {
font-size: 15px;
}
}
.right-sidebar-menu .sidebar-content-wrap .contact-area {
padding: 0;
margin: 0;
list-style: none;
margin: 0 45px;
padding: 60px 0;
}
@media (max-width: 576px) {
.right-sidebar-menu .sidebar-content-wrap .contact-area {
margin: 0 30px;
}
}
.right-sidebar-menu .sidebar-content-wrap .contact-area li {
margin-bottom: 20px;
}
.right-sidebar-menu .sidebar-content-wrap .contact-area li:last-child {
margin-bottom: 0;
}
.right-sidebar-menu .sidebar-content-wrap .contact-area li .single-contact {
display: flex;
align-items: center;
gap: 12px;
}
.right-sidebar-menu .sidebar-content-wrap .contact-area li .single-contact .icon svg {
fill: var(--primary-color);
}
.right-sidebar-menu .sidebar-content-wrap .contact-area li .single-contact .content {
position: relative;
line-height: 1;
text-align: start;
}
.right-sidebar-menu .sidebar-content-wrap .contact-area li .single-contact .content span {
font-family: var(--font-kanit);
font-weight: 500;
font-size: 12px;
line-height: 1;
color: var(--title-color);
margin-bottom: 6px;
display: inline-block;
}
.right-sidebar-menu .sidebar-content-wrap .contact-area li .single-contact .content h6 {
margin-bottom: 0;
line-height: 1;
}
.right-sidebar-menu .sidebar-content-wrap .contact-area li .single-contact .content h6 a {
color: rgba(var(--title-color-opc), 0.6);
font-family: var(--font-kanit);
font-weight: 500;
font-size: 17px;
line-height: 1.5;
transition: 0.5s;
}
@media (max-width: 576px) {
.right-sidebar-menu .sidebar-content-wrap .contact-area li .single-contact .content h6 a {
font-size: 16px;
}
}
.right-sidebar-menu .sidebar-content-wrap .contact-area li .single-contact .content h6 a:hover {
color: var(--primary-color);
}
.right-sidebar-menu .sidebar-content-wrap .contact-area li .arrow {
margin-top: 20px;
fill: rgba(var(--primary-color2-opc), 0.3);
margin-left: 70px;
}
.right-sidebar-menu .sidebar-content-wrap .address-area {
padding: 0;
margin: 0;
list-style: none;
display: flex;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
width: 100%;
}
.right-sidebar-menu .sidebar-content-wrap .address-area .single-address {
max-width: 200px;
width: 100%;
}
.right-sidebar-menu .sidebar-content-wrap .address-area .single-address span {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.06em;
text-decoration: underline;
display: block;
margin-bottom: 20px;
}
.right-sidebar-menu .sidebar-content-wrap .address-area .single-address p {
color: rgba(var(--title-color-opc), 0.6);
font-family: var(--font-inter);
font-size: 17px;
font-weight: 400;
line-height: 28px;
margin-bottom: 0;
}
.right-sidebar-menu .sidebar-bottom-area {
padding: 17px 20px;
border-top: 1px solid rgba(var(--primary-color-opc), 0.1);
text-align: center;
}
.right-sidebar-menu .sidebar-bottom-area p {
color: var(--paragraph-color);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 300;
line-height: 1.8;
letter-spacing: 0.02em;
}
.right-sidebar-menu .sidebar-bottom-area p a {
color: var(--title-color);
font-weight: 500;
transition: 0.5s;
}
.right-sidebar-menu .sidebar-bottom-area p a:hover {
text-decoration: underline;
}
.sidebar-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 0px 0 70px;
z-index: 9992;
overflow-y: auto;
transition: all 0.3s;
background-color: var(--white-color);
height: 100%;
transform-origin: top;
transform: translateY(-120%);
transition: transform 0.6s ease-in;
}
@media (max-width: 1399px) {
.sidebar-menu {
padding: 0px 0 70px;
}
}
.sidebar-menu.active {
transform: translateY(0);
}
.sidebar-menu .sidebar-menu-top-area {
padding: 25px 0;
border-bottom: 1px solid var(--border-color);
margin-bottom: 80px;
}
@media (max-width: 991px) {
.sidebar-menu .sidebar-menu-top-area {
margin-bottom: 55px;
}
}
.sidebar-menu .sidebar-menu-top-area .sidebar-menu-close {
border: 1px solid var(--primary-color2);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.5s;
}
.sidebar-menu .sidebar-menu-top-area .sidebar-menu-close svg {
fill: var(--primary-color2);
transition: 0.5s;
}
@media (max-width: 576px) {
.sidebar-menu .sidebar-menu-top-area .sidebar-menu-close {
width: 36px;
height: 36px;
}
.sidebar-menu .sidebar-menu-top-area .sidebar-menu-close svg {
width: 18px;
height: 18px;
}
}
.sidebar-menu .sidebar-menu-top-area .sidebar-menu-close:hover {
background-color: #FF4820;
border-color: #FF4820;
}
.sidebar-menu .sidebar-menu-top-area .sidebar-menu-close:hover svg {
fill: var(--white-color);
}
.sidebar-menu .sidebar-contact h4 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 25px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.05em;
margin-bottom: 25px;
}
@media (max-width: 991px) {
.sidebar-menu .sidebar-contact h4 {
margin-bottom: 30px;
}
}
@media (max-width: 767px) {
.sidebar-menu .sidebar-contact h4 {
margin-bottom: 25px;
}
}
.sidebar-menu .sidebar-contact h4 svg {
fill: var(--title-color);
margin-left: 5px;
}
.sidebar-menu .sidebar-contact .contact-area {
padding-bottom: 40px;
border-bottom: 1px solid rgba(var(--primary-color-opc), 0.1);
}
.sidebar-menu .sidebar-contact .contact-area .contact-list {
padding: 0;
margin: 0;
list-style: none;
}
.sidebar-menu .sidebar-contact .contact-area .contact-list li {
margin-bottom: 20px;
}
.sidebar-menu .sidebar-contact .contact-area .contact-list li:last-child {
margin-bottom: 0;
}
.sidebar-menu .sidebar-contact .contact-area .contact-list li .single-contact {
display: flex;
align-items: center;
gap: 12px;
}
.sidebar-menu .sidebar-contact .contact-area .contact-list li .single-contact .icon svg {
fill: var(--primary-color);
}
.sidebar-menu .sidebar-contact .contact-area .contact-list li .single-contact .content {
position: relative;
line-height: 1;
text-align: start;
}
.sidebar-menu .sidebar-contact .contact-area .contact-list li .single-contact .content span {
font-family: var(--font-kanit);
font-weight: 500;
font-size: 12px;
line-height: 1;
color: var(--title-color);
margin-bottom: 6px;
display: inline-block;
}
.sidebar-menu .sidebar-contact .contact-area .contact-list li .single-contact .content h6 {
margin-bottom: 0;
line-height: 1;
}
.sidebar-menu .sidebar-contact .contact-area .contact-list li .single-contact .content h6 a {
color: rgba(var(--title-color-opc), 0.6);
font-family: var(--font-kanit);
font-weight: 500;
font-size: 17px;
line-height: 1.5;
transition: 0.5s;
}
@media (max-width: 576px) {
.sidebar-menu .sidebar-contact .contact-area .contact-list li .single-contact .content h6 a {
font-size: 16px;
}
}
.sidebar-menu .sidebar-contact .contact-area .contact-list li .single-contact .content h6 a:hover {
color: var(--primary-color);
}
.sidebar-menu .sidebar-contact .contact-area .contact-list li .arrow {
margin-top: 20px;
fill: rgba(var(--primary-color2-opc), 0.3);
margin-left: 70px;
}
.sidebar-menu .sidebar-contact .address-area .address-list {
padding: 0;
margin: 0;
list-style: none;
}
@media (max-width: 991px) {
.sidebar-menu .sidebar-contact .address-area .address-list {
display: flex;
align-items: center;
gap: 45px;
}
}
@media (max-width: 576px) {
.sidebar-menu .sidebar-contact .address-area .address-list {
flex-direction: column;
align-items: flex-start;
gap: 25px;
}
}
.sidebar-menu .sidebar-contact .address-area .address-list .single-address {
max-width: 200px;
width: 100%;
margin-bottom: 50px;
}
.sidebar-menu .sidebar-contact .address-area .address-list .single-address:last-child {
margin-bottom: 0;
}
@media (max-width: 991px) {
.sidebar-menu .sidebar-contact .address-area .address-list .single-address {
margin-bottom: 0;
}
}
.sidebar-menu .sidebar-contact .address-area .address-list .single-address span {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.06em;
text-decoration: underline;
display: block;
margin-bottom: 20px;
}
.sidebar-menu .sidebar-contact .address-area .address-list .single-address a {
color: rgba(var(--title-color-opc), 0.6);
font-family: var(--font-inter);
font-size: 17px;
font-weight: 400;
line-height: 28px;
margin-bottom: 0;
transition: 0.5s;
}
.sidebar-menu .sidebar-contact .address-area .address-list .single-address a:hover {
color: var(--primary-color);
}
.sidebar-menu .sidebar-menu-wrap {
border-left: 1px solid var(--border-color);
margin-right: 50px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
.sidebar-menu .sidebar-menu-wrap {
margin-right: 30px;
}
}
@media (max-width: 1199px) {
.sidebar-menu .sidebar-menu-wrap {
margin-right: 0px;
}
}
@media (max-width: 991px) {
.sidebar-menu .sidebar-menu-wrap {
margin-right: 0;
}
}
.sidebar-menu .sidebar-menu-wrap .main-menu {
margin: 0;
padding: 0;
list-style: none;
overflow-y: auto;
border-top: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
}
.sidebar-menu .sidebar-menu-wrap .main-menu::-webkit-scrollbar {
width: 0;
}
.sidebar-menu .sidebar-menu-wrap .main-menu::-webkit-scrollbar-track {
background: var(--title-color);
}
.sidebar-menu .sidebar-menu-wrap .main-menu::-webkit-scrollbar-thumb {
background: var(--primary-color);
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li {
position: relative;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a {
border-bottom: 1px solid var(--border-color);
color: var(--title-color);
font-family: var(--font-kanit);
text-transform: uppercase;
font-size: 30px;
font-weight: 500;
display: block;
line-height: 1;
padding: 30px 30px 30px 70px;
transform: translateY(var(--y)) translateZ(0);
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
@media (max-width: 1399px) {
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a {
padding: 30px 30px 30px 50px;
}
}
@media (max-width: 1199px) {
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a {
padding: 25px 25px 25px 40px;
font-size: 28px;
}
}
@media (max-width: 767px) {
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a {
padding: 25px 30px;
font-size: 26px;
}
}
@media (max-width: 576px) {
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a {
padding: 25px 20px;
font-size: 22px;
}
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text {
display: flex;
overflow: hidden;
text-shadow: 0 30px 0 var(--title-color);
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span {
display: block;
backface-visibility: hidden;
transition: transform 0.4s ease;
transform: translateY(var(--m)) translateZ(0);
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(1) {
transition-delay: 0.05s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(2) {
transition-delay: 0.1s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(3) {
transition-delay: 0.15s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(4) {
transition-delay: 0.2s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(5) {
transition-delay: 0.25s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(6) {
transition-delay: 0.3s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(7) {
transition-delay: 0.35s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(8) {
transition-delay: 0.4s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(9) {
transition-delay: 0.45s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(10) {
transition-delay: 0.5s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(11) {
transition-delay: 0.55s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(12) {
transition-delay: 0.6s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(13) {
transition-delay: 0.65s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(14) {
transition-delay: 0.7s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(15) {
transition-delay: 0.75s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(16) {
transition-delay: 0.8s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(17) {
transition-delay: 0.85s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(18) {
transition-delay: 0.9s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(19) {
transition-delay: 0.95s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(20) {
transition-delay: 1s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(21) {
transition-delay: 1.05s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(22) {
transition-delay: 1.1s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(23) {
transition-delay: 1.15s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(24) {
transition-delay: 1.2s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(25) {
transition-delay: 1.25s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(26) {
transition-delay: 1.3s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(27) {
transition-delay: 1.35s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(28) {
transition-delay: 1.4s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(29) {
transition-delay: 1.45s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(30) {
transition-delay: 1.5s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(31) {
transition-delay: 1.55s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(32) {
transition-delay: 1.6s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(33) {
transition-delay: 1.65s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(34) {
transition-delay: 1.7s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(35) {
transition-delay: 1.75s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(36) {
transition-delay: 1.8s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(37) {
transition-delay: 1.85s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(38) {
transition-delay: 1.9s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(39) {
transition-delay: 1.95s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a .menu-text span:nth-child(40) {
transition-delay: 2s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a:hover {
--y: -0px;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li > a:hover span {
--m: calc(30px * -1);
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .dropdown-icon2 {
position: absolute;
right: 30px;
top: 20px;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(var(--primary-color-opc), 0.15);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.5s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .dropdown-icon2 i {
color: var(--title-color);
font-size: 28px;
transition: 0.5s;
}
@media (max-width: 767px) {
.sidebar-menu .sidebar-menu-wrap .main-menu > li .dropdown-icon2 {
right: 30px;
}
}
@media (max-width: 576px) {
.sidebar-menu .sidebar-menu-wrap .main-menu > li .dropdown-icon2 {
top: 18px;
right: 20px;
width: 35px;
height: 35px;
}
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .dropdown-icon2.active i::before {
content: "\f2ea";
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .dropdown-icon2:hover {
background-color: var(--primary-color);
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .dropdown-icon2:hover i {
color: var(--white-color);
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .dropdown-icon2.two {
height: unset;
width: unset;
background-color: transparent;
top: -7px;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .dropdown-icon2.two i {
color: var(--title-color);
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu {
margin: 0;
padding: 0;
list-style: none;
position: static;
opacity: 1;
visibility: visible;
transition: none;
display: none;
padding: 40px 70px;
border-bottom: 1px solid var(--border-color);
}
@media (max-width: 1399px) {
.sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu {
padding: 40px 50px;
}
}
@media (max-width: 1199px) {
.sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu {
padding: 35px 40px;
}
}
@media (max-width: 767px) {
.sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu {
padding: 35px 30px;
}
}
@media (max-width: 576px) {
.sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu {
padding: 30px 20px;
}
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu.active {
display: block;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu li {
position: relative;
margin-bottom: 15px;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu li:last-child {
margin-bottom: 0;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu li::after {
content: "";
height: 10px;
width: 10px;
border-radius: 50%;
display: flex;
align-items: center;
position: absolute;
left: -20px;
border: 1px solid var(--text-color);
top: 10px;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu li a {
color: var(--paragraph-color);
font-family: var(--font-kanit);
font-size: 17px;
font-weight: 400;
text-transform: uppercase;
padding-left: 20px;
position: relative;
transition: 0.5s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu li a svg {
fill: var(--paragraph-color);
margin-left: 5px;
transition: 0.5s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu li a::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid var(--paragraph-color);
transition: 0.5s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu li a:hover {
color: var(--primary-color2);
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu li a:hover svg {
fill: var(--primary-color2);
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu li a:hover::before {
border-color: var(--primary-color2);
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu li .sub-menu {
padding-top: 20px;
padding-bottom: 7px;
padding-left: 20px;
border-bottom: none;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu li .sub-menu li {
margin-bottom: 10px;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu li .sub-menu li::after {
display: none;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu li .sub-menu li a {
font-size: 15px;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu li .sub-menu li a svg {
fill: var(--paragraph-color);
margin-left: 5px;
transition: 0.5s;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu li .sub-menu li a:hover {
color: var(--primary-color2);
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu li .sub-menu li a:hover svg {
fill: var(--primary-color2);
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu li.current-menu-parent a, .sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu li.current-menu-ancestor a, .sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu li.current-menu-parent a, .sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu li.current_page_item a {
color: var(--primary-color2);
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu li.current-menu-parent a svg, .sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu li.current-menu-ancestor a svg, .sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu li.current-menu-parent a svg, .sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu li.current_page_item a svg {
fill: var(--primary-color2);
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li.current-menu-parent > a .menu-text, .sidebar-menu .sidebar-menu-wrap .main-menu > li.current-menu-ancestor > a .menu-text, .sidebar-menu .sidebar-menu-wrap .main-menu > li.current-menu-parent > a .menu-text, .sidebar-menu .sidebar-menu-wrap .main-menu > li.current_page_item > a .menu-text {
text-shadow: 0 30px 0 var(--primary-color2);
color: var(--primary-color2);
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li.current-menu-parent .dropdown-icon2, .sidebar-menu .sidebar-menu-wrap .main-menu > li.current-menu-ancestor .dropdown-icon2, .sidebar-menu .sidebar-menu-wrap .main-menu > li.current-menu-parent .dropdown-icon2, .sidebar-menu .sidebar-menu-wrap .main-menu > li.current_page_item .dropdown-icon2 {
background-color: var(--primary-color2);
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li.current-menu-parent .dropdown-icon2 i, .sidebar-menu .sidebar-menu-wrap .main-menu > li.current-menu-ancestor .dropdown-icon2 i, .sidebar-menu .sidebar-menu-wrap .main-menu > li.current-menu-parent .dropdown-icon2 i, .sidebar-menu .sidebar-menu-wrap .main-menu > li.current_page_item .dropdown-icon2 i {
color: var(--white-color);
}
.sidebar-menu.two {
transform-origin: left;
transform: translateX(-120%);
}
.sidebar-menu.two.active {
transform: translateX(0);
}
@media (max-width: 991px) {
.sidebar-menu.two {
transform-origin: top;
transform: translateY(-120%);
}
.sidebar-menu.two.active {
transform: translateY(0);
}
} .home1-banner-section {
position: relative;
overflow: hidden;
}
.home1-banner-section .banner-bg {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
min-height: 820px;
animation: large 26s linear infinite alternate;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home1-banner-section .banner-bg {
min-height: 95vh;
}
}
@media (max-width: 1399px) {
.home1-banner-section .banner-bg {
min-height: 90vh;
}
}
@media (max-width: 576px) {
.home1-banner-section .banner-bg {
min-height: 85vh;
}
}
@keyframes large {
0% {
transform: scale(1);
}
100% {
transform: scale(1.3);
}
}
.home1-banner-section .banner-content {
padding: 100px;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
width: 100%;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home1-banner-section .banner-content {
padding: 100px 60px 80px;
}
}
@media (max-width: 1399px) {
.home1-banner-section .banner-content {
padding: 100px 50px 80px;
}
}
@media (max-width: 1199px) {
.home1-banner-section .banner-content {
padding: 100px 30px 80px;
}
}
@media (max-width: 991px) {
.home1-banner-section .banner-content {
padding: 100px 20px 80px;
}
}
@media (max-width: 576px) {
.home1-banner-section .banner-content {
padding: 100px 10px 80px;
}
}
.home1-banner-section .banner-content h1 {
color: var(--white-color);
font-family: var(--font-kanit);
font-size: 90px;
font-weight: 600;
line-height: 1.1;
letter-spacing: 0.03em;
margin-bottom: 50px;
max-width: 1096px;
width: 100%;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home1-banner-section .banner-content h1 {
font-size: 86px;
}
}
@media (max-width: 1399px) {
.home1-banner-section .banner-content h1 {
font-size: 80px;
max-width: 1000px;
margin-bottom: 40px;
}
}
@media (max-width: 1199px) {
.home1-banner-section .banner-content h1 {
font-size: 75px;
}
}
@media (max-width: 991px) {
.home1-banner-section .banner-content h1 {
font-size: 68px;
}
}
@media (max-width: 767px) {
.home1-banner-section .banner-content h1 {
font-size: 65px;
margin-bottom: 35px;
}
}
@media (max-width: 576px) {
.home1-banner-section .banner-content h1 {
font-size: 48px;
margin-bottom: 30px;
}
}
.home1-banner-section .banner-content .primary-btn2 {
padding: 20px 33px;
}
@media (max-width: 576px) {
.home1-banner-section .banner-content .primary-btn2 {
padding: 18px 30px;
}
}
.home1-banner-section .pagination-area .swiper-pagination1 {
background-color: var(--white-color);
padding: 22px 37px;
position: absolute;
bottom: 0;
right: 0;
left: unset;
display: inline-flex;
align-items: center;
width: unset;
z-index: 9;
gap: 20px;
}
@media (max-width: 767px) {
.home1-banner-section .pagination-area .swiper-pagination1 {
padding: 20px 32px;
gap: 15px;
}
}
@media (max-width: 576px) {
.home1-banner-section .pagination-area .swiper-pagination1 {
padding: 15px 25px;
}
}
.home1-banner-section .pagination-area .swiper-pagination1 .swiper-pagination-bullet {
height: 6px;
width: 6px;
background-color: transparent;
border: 1px solid var(--primary-color);
opacity: 1;
position: relative;
border-radius: unset;
}
.home1-banner-section .pagination-area .swiper-pagination1 .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: var(--primary-color);
} .home1-about-section .about-top-area .about-title-area .section-title {
max-width: 685px;
width: 100%;
}
.home1-about-section .about-top-area .about-title-area .video-and-content {
padding-top: 40px;
padding-left: 95px;
display: flex;
align-items: center;
gap: 50px;
}
@media (max-width: 1399px) {
.home1-about-section .about-top-area .about-title-area .video-and-content {
padding-left: 60px;
}
}
@media (max-width: 1199px) {
.home1-about-section .about-top-area .about-title-area .video-and-content {
padding-left: 40px;
padding-top: 35px;
gap: 40px;
}
}
@media (max-width: 991px) {
.home1-about-section .about-top-area .about-title-area .video-and-content {
padding-left: 0;
padding-top: 25px;
}
}
@media (max-width: 767px) {
.home1-about-section .about-top-area .about-title-area .video-and-content {
gap: 30px;
}
}
@media (max-width: 576px) {
.home1-about-section .about-top-area .about-title-area .video-and-content {
flex-wrap: wrap;
gap: 20px;
}
}
.home1-about-section .about-top-area .about-title-area .video-and-content .video-area {
cursor: pointer;
display: inline-block;
}
.home1-about-section .about-top-area .about-title-area .video-and-content .video-area .icon {
position: relative;
}
.home1-about-section .about-top-area .about-title-area .video-and-content .video-area .icon .video-circle {
stroke: var(--primary-color2);
fill: none;
transition: 0.5s;
}
@media (max-width: 576px) {
.home1-about-section .about-top-area .about-title-area .video-and-content .video-area .icon .video-circle {
width: 68px;
}
}
.home1-about-section .about-top-area .about-title-area .video-and-content .video-area .icon .video-circle .top-half {
stroke-dasharray: 430;
stroke-dashoffset: 320;
transition: stroke-dashoffset 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.home1-about-section .about-top-area .about-title-area .video-and-content .video-area .icon .play-icon {
fill: var(--primary-color2);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-left: 2px;
}
@media (max-width: 576px) {
.home1-about-section .about-top-area .about-title-area .video-and-content .video-area .icon .play-icon {
width: 20px;
}
}
.home1-about-section .about-top-area .about-title-area .video-and-content .video-area:hover .icon .video-circle .top-half {
stroke-dashoffset: 0;
}
.home1-about-section .about-top-area .about-title-area .video-and-content .content p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 32px;
margin-bottom: 0;
padding-left: 15px;
position: relative;
}
@media (max-width: 767px) {
.home1-about-section .about-top-area .about-title-area .video-and-content .content p {
font-size: 15px;
}
}
@media (max-width: 576px) {
.home1-about-section .about-top-area .about-title-area .video-and-content .content p {
padding-left: 0;
}
}
.home1-about-section .about-top-area .about-title-area .video-and-content .content p::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 2px;
height: 77px;
background-color: rgba(var(--primary-color-opc), 0.3);
}
@media (max-width: 576px) {
.home1-about-section .about-top-area .about-title-area .video-and-content .content p::before {
display: none;
}
}
.home1-about-section .about-top-area .about-btn {
position: relative;
display: inline-block;
}
.home1-about-section .about-top-area .about-btn .bg svg {
fill: transparent;
stroke: rgba(var(--title-color-opc), 0.1);
transition: 0.5s;
}
.home1-about-section .about-top-area .about-btn .primary-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
}
.home1-about-section .about-top-area .about-btn:hover .bg svg {
fill: var(--primary-color);
stroke: var(--primary-color);
transition: 0.5s;
}
.home1-about-section .about-top-area .about-btn:hover .primary-btn {
--background-size: 0%;
--stroke-dashoffset: 26;
--stroke-duration: .3s;
--stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
--stroke-delay: .195s;
background-image: linear-gradient(0deg, var(--white-color) 0%, var(--white-color) 100%);
color: var(--white-color);
}
.home1-about-section .about-top-area .about-btn:hover .primary-btn::after {
opacity: 0;
transition-delay: 0s;
color: var(--white-color);
}
.home1-about-section .about-top-area .about-btn:hover .primary-btn svg {
stroke: var(--white-color);
}
.home1-about-section .about-content ul {
padding: 0;
margin: 0;
list-style: none;
}
.home1-about-section .about-content ul li {
max-width: 312px;
width: 100%;
margin-bottom: 60px;
}
@media (max-width: 1399px) {
.home1-about-section .about-content ul li {
margin-bottom: 50px;
}
}
@media (max-width: 1199px) {
.home1-about-section .about-content ul li {
margin-bottom: 35px;
}
}
.home1-about-section .about-content ul li:last-child {
margin-bottom: 0;
}
.home1-about-section .about-content ul li:nth-child(even) {
margin-left: auto;
}
@media (max-width: 576px) {
.home1-about-section .about-content ul li:nth-child(even) {
margin-left: 0;
}
}
.home1-about-section .about-content ul li h5 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 22px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.06em;
margin-bottom: 15px;
}
.home1-about-section .about-content ul li p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.8;
margin-bottom: 0;
} .home1-service-section {
padding: 120px 0;
background-color: #F7F7FA;
}
@media (max-width: 1199px) {
.home1-service-section {
padding: 90px 0;
}
}
@media (max-width: 767px) {
.home1-service-section {
padding: 70px 0;
}
}
@media (max-width: 991px) {
.home1-service-section .section-content {
padding-top: 20px;
}
}
@media (max-width: 767px) {
.home1-service-section .section-content {
padding-top: 15px;
}
}
.home1-service-section .section-content p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.8;
margin-bottom: 0;
}
.home1-service-section .sevices-wrap {
padding: 0;
margin: 0;
list-style: none;
}
.home1-service-section .sevices-wrap .single-services {
transition: 0.5s;
border: 1px solid rgba(63, 68, 75, 0.1);
background: rgba(255, 255, 255, 0.3);
position: relative;
display: grid;
grid-template-columns: 33% 52% 15%;
padding: 30px 30px 30px 50px;
margin-bottom: 20px;
}
.home1-service-section .sevices-wrap .single-services:last-child {
margin-bottom: 0;
}
@media (max-width: 1399px) {
.home1-service-section .sevices-wrap .single-services {
grid-template-columns: 31% 53% 16%;
}
}
@media (max-width: 1199px) {
.home1-service-section .sevices-wrap .single-services {
grid-template-columns: 33% 47% 20%;
padding: 30px 30px 30px 35px;
}
}
@media (max-width: 991px) {
.home1-service-section .sevices-wrap .single-services {
grid-template-columns: 32% 58% 10%;
padding: 25px 20px 25px 20px;
}
}
@media (max-width: 767px) {
.home1-service-section .sevices-wrap .single-services {
padding: 20px;
display: block;
}
}
.home1-service-section .sevices-wrap .single-services h3 {
margin-bottom: 0;
display: flex;
align-items: center;
}
@media (max-width: 767px) {
.home1-service-section .sevices-wrap .single-services h3 {
margin-bottom: 10px;
}
}
.home1-service-section .sevices-wrap .single-services h3 a {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 30px;
font-weight: 500;
transition: 0.5s;
}
@media (max-width: 1199px) {
.home1-service-section .sevices-wrap .single-services h3 a {
font-size: 28px;
}
}
@media (max-width: 991px) {
.home1-service-section .sevices-wrap .single-services h3 a {
font-size: 26px;
}
}
@media (max-width: 576px) {
.home1-service-section .sevices-wrap .single-services h3 a {
font-size: 23px;
}
}
.home1-service-section .sevices-wrap .single-services h3 a span {
display: block;
padding-left: 35px;
}
@media (max-width: 991px) {
.home1-service-section .sevices-wrap .single-services h3 a span {
padding-left: 25px;
}
}
@media (max-width: 767px) {
.home1-service-section .sevices-wrap .single-services h3 a span {
padding-left: 0;
display: inline-block;
}
}
.home1-service-section .sevices-wrap .single-services .content {
padding: 0 50px;
position: relative;
}
@media (max-width: 1399px) {
.home1-service-section .sevices-wrap .single-services .content {
padding: 0 40px;
}
}
@media (max-width: 1199px) {
.home1-service-section .sevices-wrap .single-services .content {
padding: 0 20px;
}
}
@media (max-width: 767px) {
.home1-service-section .sevices-wrap .single-services .content {
margin-bottom: 25px;
line-height: 26px;
padding: 0;
}
}
.home1-service-section .sevices-wrap .single-services .content .tag-list {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 15px;
padding-top: 20px;
}
@media (max-width: 1199px) {
.home1-service-section .sevices-wrap .single-services .content .tag-list {
padding-top: 15px;
}
}
.home1-service-section .sevices-wrap .single-services .content .tag-list li a {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 10px;
font-weight: 400;
line-height: 1;
text-transform: uppercase;
border: 1px solid rgba(var(--primary-color-opc), 0.1);
border-radius: 50px;
padding: 5px 17px;
transition: 0.5s;
}
.home1-service-section .sevices-wrap .single-services .content .tag-list li a:hover {
background-color: var(--primary-color);
color: var(--white-color);
}
.home1-service-section .sevices-wrap .single-services .content p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.8;
margin-bottom: 0;
}
.home1-service-section .sevices-wrap .single-services .content::before, .home1-service-section .sevices-wrap .single-services .content::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 1px;
height: 100px;
background: rgba(63, 68, 75, 0.15);
border-radius: 10px;
}
@media (max-width: 767px) {
.home1-service-section .sevices-wrap .single-services .content::before, .home1-service-section .sevices-wrap .single-services .content::after {
display: none;
}
}
.home1-service-section .sevices-wrap .single-services .content::after {
left: unset;
right: 0;
}
.home1-service-section .sevices-wrap .single-services .button-area {
display: flex;
align-items: center;
justify-content: end;
}
@media (max-width: 767px) {
.home1-service-section .sevices-wrap .single-services .button-area {
justify-content: start;
}
}
.home1-service-section .sevices-wrap .single-services .button-area a {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgba(var(--primary-color-opc), 0.1);
display: flex;
align-items: center;
justify-content: center;
transition: 0.5s;
}
@media (max-width: 991px) {
.home1-service-section .sevices-wrap .single-services .button-area a {
width: 45px;
height: 45px;
}
}
.home1-service-section .sevices-wrap .single-services .button-area a i {
color: var(--title-color);
font-size: 18px;
transform: rotate(-45deg);
line-height: 1;
transition: 0.5s;
}
.home1-service-section .sevices-wrap .single-services .button-area a:hover {
background-color: var(--primary-color);
}
.home1-service-section .sevices-wrap .single-services .button-area a:hover i {
color: var(--white-color);
transform: rotate(0);
}
.home1-service-section .sevices-wrap .single-services:hover {
background-color: var(--white-color);
} .home1-why-choose-us-section {
padding-bottom: 190px;
position: relative;
}
@media (max-width: 1399px) {
.home1-why-choose-us-section {
padding-bottom: 130px;
}
}
@media (max-width: 1199px) {
.home1-why-choose-us-section {
padding-bottom: 80px;
}
}
@media (max-width: 767px) {
.home1-why-choose-us-section {
padding-bottom: 0;
}
}
.home1-why-choose-us-section .bg-img {
position: absolute;
bottom: 0;
left: 24%;
}
@media (max-width: 1799px) {
.home1-why-choose-us-section .bg-img {
left: 22%;
}
}
@media (max-width: 1699px) {
.home1-why-choose-us-section .bg-img {
left: 18%;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home1-why-choose-us-section .bg-img {
left: 12%;
width: 1150px;
}
}
@media (max-width: 1399px) {
.home1-why-choose-us-section .bg-img {
left: 12%;
width: 1050px;
}
}
@media (max-width: 1199px) {
.home1-why-choose-us-section .bg-img {
left: 17%;
width: 800px;
}
}
@media (max-width: 991px) {
.home1-why-choose-us-section .bg-img {
width: 620px;
}
}
@media (max-width: 767px) {
.home1-why-choose-us-section .bg-img {
display: none;
}
}
.home1-why-choose-us-section .why-choose-us-content-wrap .section-title {
margin-bottom: 70px;
}
@media (max-width: 1399px) {
.home1-why-choose-us-section .why-choose-us-content-wrap .section-title {
margin-bottom: 60px;
}
}
@media (max-width: 991px) {
.home1-why-choose-us-section .why-choose-us-content-wrap .section-title {
margin-bottom: 50px;
}
}
@media (max-width: 767px) {
.home1-why-choose-us-section .why-choose-us-content-wrap .section-title {
margin-bottom: 40px;
}
}
.home1-why-choose-us-section .why-choose-us-content-wrap .section-title p {
padding-left: 50px;
}
@media (max-width: 1199px) {
.home1-why-choose-us-section .why-choose-us-content-wrap .section-title p {
padding-left: 25px;
}
}
.home1-why-choose-us-section .why-choose-us-content-wrap .why-choose-us-content {
max-width: 312px;
width: 100%;
}
@media (max-width: 767px) {
.home1-why-choose-us-section .why-choose-us-content-wrap .why-choose-us-content {
max-width: unset;
}
}
.home1-why-choose-us-section .why-choose-us-content-wrap .why-choose-us-content h2 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 22px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.06em;
margin-bottom: 15px;
}
.home1-why-choose-us-section .why-choose-us-content-wrap .why-choose-us-content p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.8;
margin-bottom: 45px;
}
@media (max-width: 991px) {
.home1-why-choose-us-section .why-choose-us-content-wrap .why-choose-us-content p {
margin-bottom: 35px;
}
}
@media (max-width: 767px) {
.home1-why-choose-us-section .why-choose-us-content-wrap .why-choose-us-content p {
margin-bottom: 30px;
}
}
.home1-why-choose-us-section .why-choose-counter-area .counter-list {
padding: 0;
margin: 0;
list-style: none;
}
@media (min-width: 576px) and (max-width: 767px) {
.home1-why-choose-us-section .why-choose-counter-area .counter-list {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
flex-wrap: wrap;
max-width: 425px;
}
}
.home1-why-choose-us-section .why-choose-counter-area .counter-list .single-counter {
text-align: center;
padding-bottom: 55px;
border-bottom: 1px solid rgba(var(--primary-color-opc), 0.1);
margin-bottom: 50px;
}
@media (max-width: 1199px) {
.home1-why-choose-us-section .why-choose-counter-area .counter-list .single-counter {
padding-bottom: 40px;
margin-bottom: 40px;
}
}
@media (max-width: 991px) {
.home1-why-choose-us-section .why-choose-counter-area .counter-list .single-counter {
padding-bottom: 35px;
margin-bottom: 35px;
}
}
@media (max-width: 767px) {
.home1-why-choose-us-section .why-choose-counter-area .counter-list .single-counter {
padding-bottom: 30px;
margin-bottom: 30px;
}
}
@media (max-width: 576px) {
.home1-why-choose-us-section .why-choose-counter-area .counter-list .single-counter {
padding-bottom: 25px;
margin-bottom: 25px;
}
}
.home1-why-choose-us-section .why-choose-counter-area .counter-list .single-counter:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: unset;
}
.home1-why-choose-us-section .why-choose-counter-area .counter-list .single-counter .number {
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
.home1-why-choose-us-section .why-choose-counter-area .counter-list .single-counter .number h2,
.home1-why-choose-us-section .why-choose-counter-area .counter-list .single-counter .number span {
color: rgba(var(--title-color-opc), 0.3);
font-family: var(--font-inter);
font-size: 100px;
font-weight: 900;
letter-spacing: 4.5px;
margin-bottom: 0;
line-height: 0.8;
}
@media (max-width: 1399px) {
.home1-why-choose-us-section .why-choose-counter-area .counter-list .single-counter .number h2,
.home1-why-choose-us-section .why-choose-counter-area .counter-list .single-counter .number span {
font-size: 90px;
}
}
@media (max-width: 991px) {
.home1-why-choose-us-section .why-choose-counter-area .counter-list .single-counter .number h2,
.home1-why-choose-us-section .why-choose-counter-area .counter-list .single-counter .number span {
font-size: 85px;
}
}
@media (max-width: 576px) {
.home1-why-choose-us-section .why-choose-counter-area .counter-list .single-counter .number h2,
.home1-why-choose-us-section .why-choose-counter-area .counter-list .single-counter .number span {
font-size: 80px;
}
}
.home1-why-choose-us-section .why-choose-counter-area .counter-list .single-counter .content {
background-color: var(--white-color);
padding-top: 20px;
margin-top: -15px;
position: relative;
z-index: 1;
}
.home1-why-choose-us-section .why-choose-counter-area .counter-list .single-counter .content p {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 13px;
font-weight: 400;
line-height: 1;
text-transform: uppercase;
margin-bottom: 0;
}
@media (max-width: 991px) {
.home1-why-choose-us-section .why-choose-counter-area .counter-list .single-counter .content p {
font-size: 14px;
}
} .home1-project-section {
padding: 120px 0;
background-color: var(--primary-color);
overflow: hidden;
}
@media (max-width: 1199px) {
.home1-project-section {
padding: 90px 0;
}
}
@media (max-width: 767px) {
.home1-project-section {
padding: 70px 0;
}
}
.home1-project-section .section-title h2 {
margin-bottom: 40px;
}
@media (max-width: 991px) {
.home1-project-section .section-title h2 {
margin-bottom: 30px;
}
}
@media (max-width: 767px) {
.home1-project-section .section-title h2 {
margin-bottom: 20px;
}
}
.home1-project-section .home1-project-slider-wrap {
padding-left: 19%;
}
@media (max-width: 1799px) {
.home1-project-section .home1-project-slider-wrap {
padding-left: 15%;
}
}
@media (max-width: 1699px) {
.home1-project-section .home1-project-slider-wrap {
padding-left: 13%;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home1-project-section .home1-project-slider-wrap {
padding-left: 7%;
}
}
@media (max-width: 1399px) {
.home1-project-section .home1-project-slider-wrap {
padding-left: 5.5%;
}
}
@media (max-width: 1199px) {
.home1-project-section .home1-project-slider-wrap {
padding-left: 5%;
}
}
@media (max-width: 991px) {
.home1-project-section .home1-project-slider-wrap {
padding: 0 30px;
}
}
@media (max-width: 576px) {
.home1-project-section .home1-project-slider-wrap {
padding: 0 15px;
}
}
.project-card .project-img-wrap {
position: relative;
}
.project-card .project-img-wrap .project-img {
position: relative;
overflow: hidden;
display: block;
transition: all 0.5s ease-out;
}
.project-card .project-img-wrap .project-img img {
transition: all 0.5s ease-out;
}
.project-card .project-img-wrap .project-img::after {
position: absolute;
width: 200%;
height: 0%;
left: 50%;
top: 50%;
background-color: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%) rotate(-45deg);
content: "";
z-index: 1;
}
.project-card .project-img-wrap .button-area {
position: absolute;
bottom: 0;
right: 0;
opacity: 0;
transform: scaleY(0);
transform-origin: bottom;
transition: 0.5s;
z-index: 2;
}
.project-card .project-img-wrap .button-area .primary-btn2 {
padding: 10px 22px;
}
.project-card .project-img-wrap .button-area .primary-btn2 span {
font-size: 12px;
}
.project-card .project-content {
padding-top: 25px;
}
.project-card .project-content span {
color: rgba(255, 255, 255, 0.6);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.06em;
display: block;
margin-bottom: 8px;
}
.project-card .project-content h4 {
margin-bottom: 0;
}
.project-card .project-content h4 a {
color: var(--white-color);
font-family: var(--font-inter);
font-size: 24px;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.03em;
background: linear-gradient(to bottom, var(--white-color) 0%, var(--white-color) 98%);
background-size: 0 1px;
background-repeat: no-repeat;
background-position: right 100%;
transition: background-size 0.9s;
}
@media (min-width: 992px) and (max-width: 1199px) {
.project-card .project-content h4 a {
font-size: 22px;
}
}
@media (max-width: 576px) {
.project-card .project-content h4 a {
font-size: 22px;
}
}
.project-card .project-content h4 a:hover {
background-size: 100% 1px;
background-position: 0% 100%;
}
.project-card:hover .project-img-wrap .project-img img {
transform: scale(1.1);
}
.project-card:hover .project-img-wrap .project-img::after {
height: 250%;
transition: all 600ms linear;
background-color: transparent;
}
.project-card:hover .project-img-wrap .button-area {
opacity: 1;
transform: scaleY(1);
}
.project-card.two .project-content span {
color: var(--paragraph-color);
}
.project-card.two .project-content h4 a {
color: var(--title-color);
background: linear-gradient(to bottom, var(--title-color) 0%, var(--title-color) 98%);
background-size: 0 2px;
background-repeat: no-repeat;
background-position: right 100%;
transition: background-size 0.9s;
}
.project-card.two .project-content h4 a:hover {
background-size: 100% 2px;
background-position: 0% 100%;
} .home1-support-section .section-title {
padding-right: 35px;
margin-bottom: 95px;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home1-support-section .section-title {
margin-bottom: 85px;
}
}
@media (max-width: 1399px) {
.home1-support-section .section-title {
margin-bottom: 85px;
}
}
@media (max-width: 1199px) {
.home1-support-section .section-title {
padding-right: 0;
margin-bottom: 70px;
}
}
@media (max-width: 991px) {
.home1-support-section .section-title {
margin-bottom: 60px;
}
}
@media (max-width: 767px) {
.home1-support-section .section-title {
margin-bottom: 40px;
}
}
.home1-support-section .section-title h2 {
font-size: 70px;
font-weight: 300;
}
@media (max-width: 1399px) {
.home1-support-section .section-title h2 {
font-size: 65px;
}
}
@media (max-width: 1199px) {
.home1-support-section .section-title h2 {
font-size: 60px;
}
}
@media (max-width: 991px) {
.home1-support-section .section-title h2 {
font-size: 55px;
}
}
@media (max-width: 767px) {
.home1-support-section .section-title h2 {
font-size: 43px;
}
}
@media (max-width: 576px) {
.home1-support-section .section-title h2 {
font-size: 35px;
}
}
.home1-support-section .support-content {
text-align: center;
}
.home1-support-section .support-content .contact-area {
margin: 0 auto;
width: 240px;
height: 240px;
border: 1px solid #D9D9D9;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: 0.8s;
}
@media (max-width: 1199px) {
.home1-support-section .support-content .contact-area {
width: 210px;
height: 210px;
}
}
@media (max-width: 767px) {
.home1-support-section .support-content .contact-area {
width: 190px;
height: 190px;
}
}
.home1-support-section .support-content .contact-area h2 {
color: var(--title-color);
font-family: var(--font-inter);
font-size: 80px;
font-weight: 700;
line-height: 1.1;
margin-bottom: 10px;
transition: 0.5s;
}
@media (max-width: 1399px) {
.home1-support-section .support-content .contact-area h2 {
font-size: 75px;
}
}
@media (max-width: 1199px) {
.home1-support-section .support-content .contact-area h2 {
font-size: 68px;
margin-bottom: 5px;
}
}
@media (max-width: 767px) {
.home1-support-section .support-content .contact-area h2 {
font-size: 52px;
}
}
.home1-support-section .support-content .contact-area span {
color: rgba(var(--title-color-opc), 0.5);
font-family: var(--font-kanit);
font-size: 25px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.05em;
display: block;
margin-bottom: 10px;
transition: 0.5s;
}
@media (max-width: 1199px) {
.home1-support-section .support-content .contact-area span {
font-size: 23px;
}
}
@media (max-width: 767px) {
.home1-support-section .support-content .contact-area span {
font-size: 22px;
}
}
.home1-support-section .support-content .contact-area p {
color: rgba(var(--title-color-opc), 0.5);
font-family: var(--font-inter);
font-size: 20px;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.05em;
transition: 0.5s;
}
@media (max-width: 1199px) {
.home1-support-section .support-content .contact-area p {
font-size: 18px;
}
}
@media (max-width: 767px) {
.home1-support-section .support-content .contact-area p {
font-size: 17px;
}
}
.home1-support-section .support-content .contact-area:hover {
box-shadow: inset 0 0 0 10em var(--primary-color);
}
.home1-support-section .support-content .contact-area:hover h2 {
color: var(--white-color);
}
.home1-support-section .support-content .contact-area:hover span,
.home1-support-section .support-content .contact-area:hover p {
color: rgba(255, 255, 255, 0.5);
}
.home1-support-section .support-content > p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.8;
margin-bottom: 0;
padding-top: 35px;
}
@media (max-width: 1199px) {
.home1-support-section .support-content > p {
padding-top: 30px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home1-support-section .support-content > p {
font-size: 15px;
}
}
@media (max-width: 576px) {
.home1-support-section .support-content > p {
padding-top: 25px;
}
} .home1-banner2-section {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
min-height: 800px;
display: flex;
align-items: center;
justify-content: center;
background-attachment: fixed;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home1-banner2-section {
min-height: 700;
}
}
@media (max-width: 1399px) {
.home1-banner2-section {
min-height: 650px;
}
}
@media (max-width: 576px) {
.home1-banner2-section {
min-height: 80vh;
background-attachment: unset;
}
}
.home1-banner2-section .banner-content {
padding: 80px 0;
text-align: center;
max-width: 640px;
width: 100%;
}
.home1-banner2-section .banner-content h2 {
color: var(--white-color);
font-family: var(--font-kanit);
font-size: 75px;
font-weight: 600;
line-height: 1.1;
letter-spacing: 0.05em;
margin-bottom: 0;
}
.home1-banner2-section .banner-content h2:nth-child(2) {
padding-left: 20px;
}
@media (max-width: 576px) {
.home1-banner2-section .banner-content h2:nth-child(2) {
padding-left: 0;
}
}
@media (max-width: 1199px) {
.home1-banner2-section .banner-content h2 {
font-size: 68px;
}
}
@media (max-width: 767px) {
.home1-banner2-section .banner-content h2 {
font-size: 62px;
}
}
@media (max-width: 576px) {
.home1-banner2-section .banner-content h2 {
font-size: 58px;
}
}
.home1-banner2-section .banner-content .video-area {
display: flex;
align-items: center;
gap: 30px;
margin-bottom: 10px;
}
@media (max-width: 767px) {
.home1-banner2-section .banner-content .video-area {
gap: 20px;
display: inline-flex;
}
}
@media (max-width: 576px) {
.home1-banner2-section .banner-content .video-area {
flex-wrap: wrap;
justify-content: center;
}
}
.home1-banner2-section .banner-content .video-area .play-btn {
cursor: pointer;
display: inline-block;
}
.home1-banner2-section .banner-content .video-area .play-btn .icon {
position: relative;
}
.home1-banner2-section .banner-content .video-area .play-btn .icon .video-circle {
stroke: var(--white-color);
fill: none;
transition: 0.5s;
}
@media (max-width: 576px) {
.home1-banner2-section .banner-content .video-area .play-btn .icon .video-circle {
width: 68px;
}
}
.home1-banner2-section .banner-content .video-area .play-btn .icon .video-circle .top-half {
stroke-dasharray: 430;
stroke-dashoffset: 320;
transition: stroke-dashoffset 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.home1-banner2-section .banner-content .video-area .play-btn .icon .play-icon {
fill: var(--white-color);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-left: 2px;
}
@media (max-width: 576px) {
.home1-banner2-section .banner-content .video-area .play-btn .icon .play-icon {
width: 20px;
}
}
.home1-banner2-section .banner-content .video-area .play-btn:hover .icon .video-circle .top-half {
stroke-dashoffset: 0;
} .logo-section {
padding: 80px 14%;
border-bottom: 1px solid rgba(var(--primary-color-opc), 0.1);
}
@media (max-width: 1799px) {
.logo-section {
padding: 80px 12%;
}
}
@media (max-width: 1699px) {
.logo-section {
padding: 80px 10%;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.logo-section {
padding: 70px 8%;
}
}
@media (max-width: 1399px) {
.logo-section {
padding: 60px 6%;
}
}
@media (max-width: 1199px) {
.logo-section {
padding: 60px 3%;
}
}
@media (max-width: 991px) {
.logo-section {
padding: 50px 2%;
}
}
@media (max-width: 576px) {
.logo-section {
padding: 50px 10px;
}
}
.logo-section .logo-wrap {
display: flex;
align-items: center;
gap: 30px;
}
@media (max-width: 576px) {
.logo-section .logo-wrap {
flex-wrap: wrap;
gap: 20px;
}
}
.logo-section .logo-wrap .logo-title {
padding-right: 25px;
border-right: 1px solid rgba(var(--primary-color-opc), 0.1);
min-width: 200px;
}
@media (max-width: 1199px) {
.logo-section .logo-wrap .logo-title {
min-width: 165px;
padding-right: 15px;
}
}
@media (max-width: 576px) {
.logo-section .logo-wrap .logo-title {
padding-right: 0;
border-right: unset;
}
}
.logo-section .logo-wrap .logo-title h6 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 17px;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.03em;
text-transform: uppercase;
margin-bottom: 0;
}
.logo-section .logo-wrap .marquee {
display: flex;
gap: 80px;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.logo-section .logo-wrap .marquee .marquee__group {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-around;
gap: 80px;
min-width: 100%;
animation: scroll-x 30s linear infinite;
}
@media (max-width: 1199px) {
.logo-section .logo-wrap .marquee .marquee__group {
gap: 40px;
}
}
@media (max-width: 576px) {
.logo-section .logo-wrap .marquee .marquee__group {
gap: 30px;
}
}
.logo-section .logo-wrap .marquee .marquee__group a img {
width: 104px;
}
@media (max-width: 991px) {
.logo-section .logo-wrap .marquee .marquee__group a img {
width: 95px;
}
}
@keyframes scroll-x {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
.logo-section.style-2 {
padding: 0;
border: unset;
}
.logo-section.style-2 .logo-wrap {
padding: 45px 0;
border-bottom: 1px solid rgba(var(--primary-color-opc), 0.1);
border-top: 1px solid rgba(var(--primary-color-opc), 0.1);
}
@media (max-width: 767px) {
.logo-section.style-2 .logo-wrap {
padding: 35px 0;
}
}
.logo-section.style-3 {
padding: 44px 10%;
background-color: #FBF8F3;
border: 1px solid rgba(var(--primary-color-opc), 0.1);
}
@media (max-width: 1699px) {
.logo-section.style-3 {
padding: 44px 8%;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.logo-section.style-3 {
padding: 44px 5%;
}
}
@media (max-width: 1399px) {
.logo-section.style-3 {
padding: 44px 4%;
}
}
@media (max-width: 991px) {
.logo-section.style-3 {
padding: 44px 30px;
}
}
@media (max-width: 767px) {
.logo-section.style-3 {
padding: 44px 20px;
}
}
@media (max-width: 576px) {
.logo-section.style-3 {
padding: 44px 0;
}
}
.logo-section.style-4 {
padding: 44px 10%;
background-color: transparent;
border: 1px solid rgba(var(--primary-color-opc), 0.1);
}
@media (max-width: 1699px) {
.logo-section.style-4 {
padding: 44px 8%;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.logo-section.style-4 {
padding: 44px 5%;
}
}
@media (max-width: 1399px) {
.logo-section.style-4 {
padding: 44px 4%;
}
}
@media (max-width: 991px) {
.logo-section.style-4 {
padding: 35px 30px;
}
}
@media (max-width: 767px) {
.logo-section.style-4 {
padding: 35px 20px;
}
}
@media (max-width: 576px) {
.logo-section.style-4 {
padding: 30px 0;
}
} .home1-team-section .slider-btn-grp {
padding-top: 60px;
}
@media (max-width: 1199px) {
.home1-team-section .slider-btn-grp {
padding-top: 50px;
}
}
@media (max-width: 991px) {
.home1-team-section .slider-btn-grp {
padding-top: 30px;
}
}
.home1-team-section .founder-card {
padding: 15px 25px 15px 15px;
border: 1px solid rgba(var(--primary-color-opc), 0.08);
display: grid;
grid-template-columns: 45% 55%;
align-items: center;
}
@media (min-width: 992px) and (max-width: 1199px) {
.home1-team-section .founder-card {
padding: 10px;
}
}
@media (max-width: 767px) {
.home1-team-section .founder-card {
display: block;
padding: 15px;
}
}
@media (max-width: 576px) {
.home1-team-section .founder-card {
padding: 10px;
}
}
.home1-team-section .founder-card .founder-content {
padding: 10px 0 10px 20px;
}
@media (max-width: 1199px) {
.home1-team-section .founder-card .founder-content {
padding: 0 0 0 15px;
}
}
@media (max-width: 767px) {
.home1-team-section .founder-card .founder-content {
padding: 0;
padding-top: 20px;
}
}
.home1-team-section .founder-card .founder-content p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.8;
margin-bottom: 30px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.home1-team-section .founder-card .founder-content p {
font-size: 15px;
margin-bottom: 20px;
}
}
@media (max-width: 991px) {
.home1-team-section .founder-card .founder-content p {
margin-bottom: 20px;
}
}
.home1-team-section .founder-card .founder-content .name-and-desig span {
color: rgba(var(--title-color-opc), 0.5);
font-family: var(--font-inter);
font-size: 14px;
font-weight: 400;
line-height: 1;
display: block;
margin-bottom: 10px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.home1-team-section .founder-card .founder-content .name-and-desig span {
margin-bottom: 5px;
}
}
@media (max-width: 576px) {
.home1-team-section .founder-card .founder-content .name-and-desig span {
margin-bottom: 5px;
}
}
.home1-team-section .founder-card .founder-content .name-and-desig h5 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 22px;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.03em;
margin-bottom: 0;
}
.team-card .team-img {
overflow: hidden;
}
.team-card .team-img img {
transition: all 0.5s ease-out;
}
.team-card .team-content {
padding-top: 25px;
}
@media (max-width: 991px) {
.team-card .team-content {
padding-top: 20px;
}
}
.team-card .team-content span {
color: rgba(var(--title-color-opc), 0.5);
font-family: var(--font-inter);
font-size: 14px;
font-weight: 400;
line-height: 1;
display: block;
margin-bottom: 8px;
}
@media (max-width: 991px) {
.team-card .team-content span {
margin-bottom: 5px;
}
}
.team-card .team-content h5 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 22px;
font-weight: 400;
line-height: 1.3;
letter-spacing: 0.03em;
margin-bottom: 0;
}
@media (min-width: 768px) and (max-width: 991px) {
.team-card .team-content h5 {
font-size: 21px;
}
}
.team-card:hover .team-img img {
transform: scale(1.1);
} .home1-testimonial-section {
padding: 130px 9% 130px 15.5%;
background-color: #F0F2F4;
}
@media (max-width: 1899px) {
.home1-testimonial-section {
padding: 130px 8% 130px 14.5%;
}
}
@media (max-width: 1799px) {
.home1-testimonial-section {
padding: 130px 6% 130px 12%;
}
}
@media (max-width: 1699px) {
.home1-testimonial-section {
padding: 130px 6% 130px 10%;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home1-testimonial-section {
padding: 130px 3% 130px 3%;
}
}
@media (max-width: 1399px) {
.home1-testimonial-section {
padding: 110px 3% 110px 3%;
}
}
@media (max-width: 1199px) {
.home1-testimonial-section {
padding: 90px 0;
}
}
.home1-testimonial-section .slider-btn-grp {
padding-top: 50px;
}
@media (max-width: 1199px) {
.home1-testimonial-section .slider-btn-grp {
padding-top: 0;
}
}
.home1-testimonial-section .testimonial-slider-area {
padding-top: 110px;
margin-left: -20%;
}
@media (max-width: 1399px) {
.home1-testimonial-section .testimonial-slider-area {
padding-top: 100px;
}
}
@media (max-width: 1199px) {
.home1-testimonial-section .testimonial-slider-area {
margin-left: 0;
padding-top: 0;
}
}
.home1-testimonial-section .testimonial-slider-area .contact-btn-area {
display: flex;
align-items: center;
gap: 15px;
justify-content: end;
margin-top: -65px;
position: relative;
z-index: 1;
}
@media (max-width: 576px) {
.home1-testimonial-section .testimonial-slider-area .contact-btn-area {
margin-top: 25px;
justify-content: start;
}
.home1-testimonial-section .testimonial-slider-area .contact-btn-area img {
display: none;
}
}
.home1-testimonial-section .testimonial-slider-area .home1-testimonial-slider .swiper-slide-active span,
.home1-testimonial-section .testimonial-slider-area .home1-testimonial-slider .swiper-slide-active p {
animation: fadeInDown 1.7s;
}
.home1-testimonial-section .testimonial-slider-area .home1-testimonial-slider .swiper-slide-active .author-content {
animation: fadeInUp 1.7s;
}
.testimonial-card {
display: flex;
align-items: end;
gap: 55px;
}
@media (max-width: 1399px) {
.testimonial-card {
gap: 40px;
}
}
@media (max-width: 1199px) {
.testimonial-card {
flex-wrap: wrap;
gap: 30px;
}
}
.testimonial-card .testimonial-author-img {
position: relative;
padding-left: 70px;
z-index: 1;
margin-bottom: 40px;
}
@media (max-width: 1199px) {
.testimonial-card .testimonial-author-img {
margin-bottom: 0;
}
}
@media (max-width: 576px) {
.testimonial-card .testimonial-author-img {
padding-left: 0;
}
}
.testimonial-card .testimonial-author-img img {
min-width: 150px;
max-width: 150px;
height: 150px;
border-radius: 50%;
}
@media (max-width: 576px) {
.testimonial-card .testimonial-author-img img {
min-width: 130px;
max-width: 130px;
height: 130px;
}
}
.testimonial-card .testimonial-author-img .quote {
fill: rgba(var(--primary-color2-opc), 0.2);
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
z-index: -1;
}
@media (max-width: 576px) {
.testimonial-card .testimonial-author-img .quote {
display: none;
}
}
.testimonial-card .testimonial-content > span {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 16px;
font-weight: 400;
line-height: 23.92px;
letter-spacing: 0.06em;
display: block;
margin-bottom: 20px;
}
@media (max-width: 1199px) {
.testimonial-card .testimonial-content > span {
margin-bottom: 10px;
}
}
.testimonial-card .testimonial-content p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 22px;
font-weight: 400;
line-height: 48px;
margin-bottom: 0;
}
@media (max-width: 767px) {
.testimonial-card .testimonial-content p {
line-height: 42px;
}
}
@media (max-width: 576px) {
.testimonial-card .testimonial-content p {
font-size: 18px;
line-height: 36px;
}
}
.testimonial-card .testimonial-content .author-area {
display: flex;
align-items: center;
gap: 12px;
padding-top: 25px;
border-top: 1px solid rgba(var(--primary-color-opc), 0.1);
margin-top: 50px;
}
@media (max-width: 1199px) {
.testimonial-card .testimonial-content .author-area {
margin-top: 35px;
}
}
@media (max-width: 576px) {
.testimonial-card .testimonial-content .author-area {
margin-top: 25px;
padding-top: 15px;
}
}
.testimonial-card .testimonial-content .author-area .author-img img {
min-width: 50px;
max-width: 50px;
height: 50px;
border-radius: 50%;
}
.testimonial-card .testimonial-content .author-area .author-content h5 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 21px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.03em;
margin-bottom: 3px;
}
.testimonial-card .testimonial-content .author-area .author-content span {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 15px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.03em;
}
.testimonial-card.style-2 .testimonial-content .quote {
fill: var(--title-color);
margin-bottom: 30px;
}
@media (max-width: 576px) {
.testimonial-card.style-2 .testimonial-content .quote {
margin-bottom: 25px;
}
}
.testimonial-card.style-2 .testimonial-content > span {
color: var(--primary-color2);
}
@media (min-width: 992px) and (max-width: 1199px) {
.testimonial-card.style-2 .testimonial-content p {
font-size: 19px;
line-height: 42px;
}
}
.testimonial-card.style-3 {
display: block;
}
.testimonial-card.style-3 .testimonial-author-img-wrap {
padding-top: 40px;
margin-bottom: 60px;
position: relative;
}
@media (max-width: 1199px) {
.testimonial-card.style-3 .testimonial-author-img-wrap {
margin-bottom: 40px;
}
}
@media (max-width: 576px) {
.testimonial-card.style-3 .testimonial-author-img-wrap {
margin-bottom: 30px;
}
}
.testimonial-card.style-3 .testimonial-author-img-wrap .testimonial-author-img {
padding-left: 0;
width: 156px;
height: 156px;
border-radius: 50%;
border: 1px solid rgba(var(--primary-color-opc), 0.1);
background-color: var(--white-color);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0;
margin: 0 auto;
transition: 0.5s;
position: relative;
overflow: hidden;
}
@media (max-width: 576px) {
.testimonial-card.style-3 .testimonial-author-img-wrap .testimonial-author-img {
width: 136px;
height: 136px;
}
}
.testimonial-card.style-3 .testimonial-author-img-wrap .testimonial-author-img::before, .testimonial-card.style-3 .testimonial-author-img-wrap .testimonial-author-img::after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 164px;
height: 164px;
clip: rect(0px, 83px, 164px, 0px);
background-color: white;
transform: rotate3d(0, 0, 1, 0deg);
z-index: 2;
}
@media (max-width: 576px) {
.testimonial-card.style-3 .testimonial-author-img-wrap .testimonial-author-img::before, .testimonial-card.style-3 .testimonial-author-img-wrap .testimonial-author-img::after {
width: 155px;
height: 155px;
clip: rect(0px, 83px, 155px, 0px);
}
}
.testimonial-card.style-3 .testimonial-author-img-wrap .testimonial-author-img::after {
content: " ";
background: black;
z-index: 1;
}
@keyframes spin {
from {
transform: rotate3d(0, 0, 1, 0deg);
}
to {
transform: rotate3d(0, 0, 1, 180deg);
}
}
@keyframes spin2 {
from {
background: black;
transform: rotate3d(0, 0, 1, 180deg);
}
to {
background: black;
transform: rotate3d(0, 0, 1, 360deg);
}
}
.testimonial-card.style-3 .testimonial-author-img-wrap .testimonial-author-img img {
position: relative;
z-index: 4;
border: 7px solid white;
}
.testimonial-card.style-3 .testimonial-author-img-wrap .quote {
position: absolute;
top: 0px;
left: 50%;
transform: translateX(-50%);
fill: none;
stroke: rgba(var(--primary-color-opc), 0.1);
}
.testimonial-card.style-3 .testimonial-content > span {
color: var(--primary-color2);
text-transform: uppercase;
text-align: center;
}
.testimonial-card.style-3 .testimonial-content p {
text-align: center;
}
@media (min-width: 992px) and (max-width: 1199px) {
.testimonial-card.style-3 .testimonial-content p {
font-size: 19px;
line-height: 42px;
}
} .faq-wrap .accordion .accordion-item {
border: none;
}
.faq-wrap .accordion .accordion-item:first-child .accordion-header .accordion-button {
padding-top: 0;
}
.faq-wrap .accordion .accordion-item .accordion-header .accordion-button {
border: none;
border-radius: unset;
box-shadow: none;
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 18px;
font-weight: 400;
line-height: 1.4;
text-transform: capitalize;
padding: 0;
padding-bottom: 20px;
padding-top: 35px;
border-bottom: 1px solid rgba(var(--primary-color-opc), 0.1);
}
@media (max-width: 1199px) {
.faq-wrap .accordion .accordion-item .accordion-header .accordion-button {
padding-top: 25px;
padding-bottom: 15px;
}
}
.faq-wrap .accordion .accordion-item .accordion-header .accordion-button::after {
width: unset;
height: unset;
content: "\f128";
font-family: bootstrap-icons;
background-image: none;
font-weight: 800;
font-size: 17px;
}
.faq-wrap .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
background-color: unset;
}
.faq-wrap .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::after {
content: "\f148";
transform: unset;
}
@media (max-width: 576px) {
.faq-wrap .accordion .accordion-item .accordion-header .accordion-button {
font-size: 17px;
}
}
.faq-wrap .accordion .accordion-item .accordion-body {
padding: 20px;
padding-bottom: 10px;
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.8;
}
@media (max-width: 576px) {
.faq-wrap .accordion .accordion-item .accordion-body {
font-size: 15px;
padding: 15px;
padding-bottom: 5px;
}
}
.faq-wrap.style-2 .accordion .accordion-item .accordion-header .accordion-button {
font-size: 16px;
}
.home1-faq-section .title-area {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
@media (min-width: 992px) and (max-width: 1199px) {
.home1-faq-section .title-area {
padding-left: 20px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home1-faq-section .title-area .section-title h2 {
font-size: 52px;
}
}
.home1-faq-section .title-area .button-area {
display: flex;
justify-content: end;
}
@media (max-width: 991px) {
.home1-faq-section .title-area .button-area {
justify-content: start;
padding-top: 20px;
}
} .home1-blog-section .slider-btn-grp {
padding-top: 60px;
}
@media (max-width: 1199px) {
.home1-blog-section .slider-btn-grp {
padding-top: 50px;
}
}
@media (max-width: 991px) {
.home1-blog-section .slider-btn-grp {
padding-top: 30px;
}
}
.home1-blog-section .home1-blog-slider .swiper-slide:nth-child(odd) {
padding-top: 100px;
}
@media (max-width: 1399px) {
.home1-blog-section .home1-blog-slider .swiper-slide:nth-child(odd) {
padding-top: 80px;
}
}
@media (max-width: 1199px) {
.home1-blog-section .home1-blog-slider .swiper-slide:nth-child(odd) {
padding-top: 60px;
}
}
@media (max-width: 991px) {
.home1-blog-section .home1-blog-slider .swiper-slide:nth-child(odd) {
padding-top: 0;
}
}
.blog-card.standard {
position: relative;
}
.blog-card .post-video iframe,
.blog-card .post-audio iframe {
min-height: 400px;
width: 100%;
}
.blog-card .post-gallery {
position: relative;
}
.blog-card .post-gallery .slider-arrows {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
.blog-card .post-gallery .blog1-prev,
.blog-card .post-gallery .blog1-next {
color: #fff;
padding: 5px 20px;
background-color: #000;
}
.blog-card .blog-img {
position: relative;
overflow: hidden;
display: block;
transition: all 0.5s ease-out;
}
.blog-card .blog-img img {
transition: all 0.5s ease-out;
}
.blog-card .blog-img::after {
position: absolute;
width: 200%;
height: 0%;
left: 50%;
top: 50%;
background-color: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%) rotate(-45deg);
content: "";
z-index: 1;
}
.blog-card .blog-content {
padding-top: 30px;
word-wrap: break-word;
}
@media (max-width: 1199px) {
.blog-card .blog-content {
padding-top: 25px;
}
}
@media (max-width: 576px) {
.blog-card .blog-content {
padding-top: 20px;
}
}
.blog-card .blog-content .blog-meta {
margin-bottom: 15px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.blog-card .blog-content .blog-meta {
margin-bottom: 10px;
}
}
@media (max-width: 576px) {
.blog-card .blog-content .blog-meta {
margin-bottom: 10px;
}
}
.blog-card .blog-content .blog-meta ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
gap: 25px;
}
.blog-card .blog-content .blog-meta ul li {
position: relative;
}
.blog-card .blog-content .blog-meta ul li::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -12px;
width: 1px;
height: 12px;
background-color: rgba(var(--primary-color-opc), 0.2);
}
.blog-card .blog-content .blog-meta ul li:last-child::before {
display: none;
}
.blog-card .blog-content .blog-meta ul li a {
color: rgba(var(--title-color-opc), 0.5);
font-family: var(--font-inter);
font-size: 13px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.03em;
text-transform: uppercase;
transition: 0.5s;
}
.blog-card .blog-content .blog-meta ul li a:hover {
color: var(--primary-color2);
}
.blog-card .blog-content .blog-meta ul li a.blog-date {
color: rgba(var(--primary-color2-opc), 0.7);
text-decoration: underline;
text-underline-offset: 3px;
}
.blog-card .blog-content .blog-meta ul li a.blog-date:hover {
color: var(--primary-color2);
}
.blog-card .blog-content h4 {
margin-bottom: 20px;
}
.blog-card .blog-content h4 a {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 25px;
font-weight: 400;
line-height: 1.3;
letter-spacing: 0.04em;
transition: 0.5s;
}
@media (max-width: 1399px) {
.blog-card .blog-content h4 a {
font-size: 22px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.blog-card .blog-content h4 a {
font-size: 20px;
}
}
@media (max-width: 991px) {
.blog-card .blog-content h4 a {
font-size: 23px;
}
}
@media (max-width: 576px) {
.blog-card .blog-content h4 a {
font-size: 20px;
}
}
.blog-card .blog-content h4 a:hover {
color: var(--primary-color2);
}
.blog-card:hover .blog-img::after {
height: 250%;
transition: all 600ms linear;
background-color: transparent;
}
.blog-card:hover .blog-img img {
transform: scale(1.1);
}
.blog-card.style-2 .blog-content {
padding-top: 0;
margin-top: 30px;
position: relative;
margin-left: 35px;
padding-left: 20px;
}
@media (max-width: 1399px) {
.blog-card.style-2 .blog-content {
margin-left: 25px;
padding-left: 15px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.blog-card.style-2 .blog-content {
margin-left: 15px;
padding-left: 10px;
}
}
@media (max-width: 991px) {
.blog-card.style-2 .blog-content {
margin-top: 25px;
}
}
@media (max-width: 576px) {
.blog-card.style-2 .blog-content {
margin-left: 15px;
padding-left: 10px;
}
}
.blog-card.style-2 .blog-content::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 1px;
height: 90px;
background-color: rgba(var(--primary-color-opc), 0.2);
}
.blog-card.style-2 .blog-content .blog-meta ul {
gap: 15px;
}
.blog-card.style-2 .blog-content .blog-meta ul li::before {
display: none;
}
.blog-card.style-2 .blog-content .blog-meta ul li a {
font-size: 12px;
color: rgba(var(--primary-color2-opc), 0.7);
text-decoration: underline;
text-underline-offset: 3px;
}
.blog-card.style-2 .blog-content .blog-meta ul li a:hover {
color: var(--primary-color2);
}
.blog-card.style-2 .blog-content .blog-meta ul li a.category {
color: rgba(var(--title-color-opc), 0.5);
text-decoration: none;
padding: 4px 14px;
border: 1px solid rgba(var(--primary-color-opc), 0.1);
border-radius: 50px;
}
.blog-card.style-2 .blog-content .blog-meta ul li a.category:hover {
background-color: var(--primary-color2);
border-color: var(--primary-color2);
color: var(--white-color);
}
@media (min-width: 992px) and (max-width: 1199px) {
.blog-card.style-2 .blog-content h4 a {
font-size: 22px;
line-height: 1.4;
}
}
.blog-card.style-3 {
display: grid;
grid-template-columns: 47.5% 52.5%;
}
@media (max-width: 767px) {
.blog-card.style-3 {
grid-template-columns: 42% 58%;
}
}
@media (max-width: 576px) {
.blog-card.style-3 {
display: block;
}
}
.blog-card.style-3 .blog-img {
height: 100%;
}
@media (max-width: 576px) {
.blog-card.style-3 .blog-img {
height: unset;
}
}
.blog-card.style-3 .blog-img img {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media (max-width: 576px) {
.blog-card.style-3 .blog-img img {
height: unset;
}
}
.blog-card.style-3 .blog-content-wrap {
padding: 30px 30px 30px 34px;
border: 1px solid rgba(var(--primary-color-opc), 0.05);
border-left: unset;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 20px;
}
@media (max-width: 1399px) {
.blog-card.style-3 .blog-content-wrap {
padding: 25px 20px 25px 30px;
}
}
@media (max-width: 1199px) {
.blog-card.style-3 .blog-content-wrap {
padding: 20px 15px 20px 15px;
}
}
@media (max-width: 576px) {
.blog-card.style-3 .blog-content-wrap {
border: 1px solid rgba(var(--primary-color-opc), 0.05);
border-top: unset;
}
}
.blog-card.style-3 .blog-content {
padding: 0;
}
.blog-card.style-3 .blog-content .blog-meta {
margin-bottom: 10px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.blog-card.style-3 .blog-content .blog-meta {
margin-bottom: 5px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.blog-card.style-3 .blog-content h4 a {
font-size: 20px;
}
}
@media (max-width: 991px) {
.blog-card.style-3 .blog-content h4 a {
font-size: 21px;
}
}
.blog-card.style-4 {
position: relative;
}
.blog-card.style-4 .blog-img {
max-width: 485px;
}
@media (max-width: 991px) {
.blog-card.style-4 .blog-img {
max-width: 550px;
}
}
.blog-card.style-4 .blog-content {
background-color: var(--white-color);
max-width: 384px;
width: 100%;
padding: 40px 30px;
position: absolute;
bottom: 0;
right: 0;
border: 1px solid rgba(var(--primary-color-opc), 0.05);
z-index: 5;
}
@media (min-width: 1200px) and (max-width: 1399px) {
.blog-card.style-4 .blog-content {
max-width: 360px;
padding: 35px 20px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.blog-card.style-4 .blog-content {
max-width: 335px;
padding: 30px 20px;
}
}
@media (max-width: 576px) {
.blog-card.style-4 .blog-content {
max-width: 300px;
padding: 20px 15px;
}
}
.blog-card.style-4 .blog-content .blog-meta {
margin-bottom: 10px;
}
@media (max-width: 576px) {
.blog-card.style-4 .blog-content h4 a {
font-size: 20px;
}
}
.blog-card.style-4 .blog-content .details-btn {
padding-top: 70px;
}
@media (max-width: 576px) {
.blog-card.style-4 .blog-content .details-btn {
padding-top: 30px;
}
} .home1-footer-top-banner-section {
background-image: linear-gradient(91.45deg, #000000 27.11%, rgba(0, 0, 0, 0.9) 53.38%, rgba(0, 0, 0, 0.8) 75.41%, rgba(0, 0, 0, 0.5) 98.52%), url(//www.husetconstruction.com/wp-content/themes/vernex/assets/img/home1/home1-contact-bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: right;
padding: 130px 0;
clear: both;
}
@media (max-width: 1199px) {
.home1-footer-top-banner-section {
padding: 90px 0;
}
}
@media (max-width: 767px) {
.home1-footer-top-banner-section {
padding: 70px 0;
}
}
.home1-footer-top-banner-section .banner-content .button-area {
padding-top: 65px;
display: flex;
align-items: center;
gap: 55px;
}
@media (max-width: 767px) {
.home1-footer-top-banner-section .banner-content .button-area {
padding-top: 50px;
gap: 40px;
}
}
@media (max-width: 576px) {
.home1-footer-top-banner-section .banner-content .button-area {
flex-wrap: wrap;
gap: 30px;
padding-top: 40px;
}
}
.home1-footer-top-banner-section .banner-content .button-area .primary-btn2 {
padding: 20px 33px;
}
@media (max-width: 576px) {
.home1-footer-top-banner-section .banner-content .button-area .primary-btn2 {
padding: 18px 30px;
}
}
.home1-footer-top-banner-section.two {
background-image: linear-gradient(90.44deg, rgba(0, 0, 0, 0.75) 0.35%, #000000 35.13%, #000000 65.37%, rgba(0, 0, 0, 0.75) 99.62%), url(//www.husetconstruction.com/wp-content/themes/vernex/assets/img/home5/home5-footer-top-bg.jpg);
padding: 110px 0;
}
@media (max-width: 1199px) {
.home1-footer-top-banner-section.two {
padding: 100px 0;
}
}
@media (max-width: 767px) {
.home1-footer-top-banner-section.two {
padding: 90px 0;
}
}
@media (max-width: 576px) {
.home1-footer-top-banner-section.two {
padding: 70px 0;
}
}
.home1-footer-top-banner-section.two .banner-content {
text-align: center;
}
.home1-footer-top-banner-section.two .banner-content .button-area {
justify-content: center;
padding-top: 55px;
}
@media (max-width: 767px) {
.home1-footer-top-banner-section.two .banner-content .button-area {
padding-top: 45px;
gap: 40px;
}
}
@media (max-width: 576px) {
.home1-footer-top-banner-section.two .banner-content .button-area {
flex-wrap: wrap;
gap: 30px;
}
} .footer-section {
overflow: hidden;
}
@media (max-width: 1199px) {
.footer-section .footer-wrapper {
padding: 90px 80px;
}
}
@media (max-width: 991px) {
.footer-section .footer-wrapper {
padding: 70px 40px;
}
}
@media (max-width: 767px) {
.footer-section .footer-wrapper {
padding: 70px 20px;
}
}
@media (max-width: 576px) {
.footer-section .footer-wrapper {
padding: 60px 20px;
}
}
.footer-section .footer-wrapper .footer-logo-and-contact-area {
padding: 50px 110px;
display: flex;
justify-content: space-between;
align-items: end;
gap: 20px;
}
@media (max-width: 1799px) {
.footer-section .footer-wrapper .footer-logo-and-contact-area {
padding: 50px 85px;
}
}
@media (max-width: 1699px) {
.footer-section .footer-wrapper .footer-logo-and-contact-area {
padding: 50px 75px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.footer-section .footer-wrapper .footer-logo-and-contact-area {
padding: 50px 45px;
}
}
@media (max-width: 1399px) {
.footer-section .footer-wrapper .footer-logo-and-contact-area {
padding: 50px 25px;
}
}
@media (max-width: 1199px) {
.footer-section .footer-wrapper .footer-logo-and-contact-area {
padding: 0;
}
}
@media (max-width: 767px) {
.footer-section .footer-wrapper .footer-logo-and-contact-area {
flex-wrap: wrap;
}
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .footer-logo-area {
max-width: 360px;
width: 100%;
}
@media (max-width: 576px) {
.footer-section .footer-wrapper .footer-logo-and-contact-area .footer-logo-area .footer-logo img {
width: 150px;
}
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .footer-logo-area .footer-content {
padding-top: 55px;
}
@media (max-width: 1199px) {
.footer-section .footer-wrapper .footer-logo-and-contact-area .footer-logo-area .footer-content {
padding-top: 45px;
}
}
@media (max-width: 576px) {
.footer-section .footer-wrapper .footer-logo-and-contact-area .footer-logo-area .footer-content {
padding-top: 35px;
}
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .footer-logo-area .footer-content p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.8;
margin-bottom: 35px;
}
@media (max-width: 1199px) {
.footer-section .footer-wrapper .footer-logo-and-contact-area .footer-logo-area .footer-content p {
margin-bottom: 30px;
}
}
@media (max-width: 576px) {
.footer-section .footer-wrapper .footer-logo-and-contact-area .footer-logo-area .footer-content p {
margin-bottom: 20px;
}
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .footer-logo-area .footer-content .social-list {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
gap: 30px;
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .footer-logo-area .footer-content .social-list li a {
text-align: center;
display: block;
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .footer-logo-area .footer-content .social-list li a i {
color: var(--paragraph-color);
transition: 0.5s;
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .footer-logo-area .footer-content .social-list li a span {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 12px;
font-weight: 400;
line-height: 1;
display: block;
padding-top: 5px;
transition: 0.5s;
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .footer-logo-area .footer-content .social-list li a:hover i {
color: var(--title-color);
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .footer-logo-area .footer-content .social-list li a:hover span {
color: var(--title-color);
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area {
padding: 0;
margin: 0;
list-style: none;
padding-left: 85px;
position: relative;
}
@media (max-width: 1799px) {
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area {
padding-left: 60px;
}
}
@media (max-width: 1699px) {
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area {
padding-left: 50px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area {
padding-left: 40px;
}
}
@media (max-width: 1399px) {
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area {
padding-left: 40px;
}
}
@media (max-width: 767px) {
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area {
display: flex;
align-items: center;
gap: 30px;
flex-wrap: wrap;
padding-left: 0;
padding-top: 25px;
}
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area::before {
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 1px;
height: 138px;
background-color: rgba(var(--primary-color2-opc), 0.2);
}
@media (max-width: 767px) {
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area::before {
display: none;
}
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area li {
margin-bottom: 20px;
}
@media (max-width: 767px) {
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area li {
margin-bottom: 0;
}
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area li:last-child {
margin-bottom: 0;
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area li .single-contact {
display: flex;
align-items: center;
gap: 12px;
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area li .single-contact .icon svg {
fill: var(--primary-color);
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area li .single-contact .content {
position: relative;
line-height: 1;
text-align: start;
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area li .single-contact .content span {
font-family: var(--font-kanit);
font-weight: 500;
font-size: 12px;
line-height: 1;
color: var(--title-color);
margin-bottom: 6px;
display: inline-block;
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area li .single-contact .content h6 {
margin-bottom: 0;
line-height: 1;
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area li .single-contact .content h6 a {
color: rgba(var(--title-color-opc), 0.6);
font-family: var(--font-kanit);
font-weight: 500;
font-size: 17px;
line-height: 1.5;
transition: 0.5s;
}
@media (max-width: 576px) {
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area li .single-contact .content h6 a {
font-size: 16px;
}
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area li .single-contact .content h6 a:hover {
color: var(--primary-color);
}
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area li .arrow {
margin-top: 20px;
fill: rgba(var(--primary-color2-opc), 0.3);
margin-left: 70px;
}
@media (max-width: 767px) {
.footer-section .footer-wrapper .footer-logo-and-contact-area .contact-area li .arrow {
display: none;
}
}
.footer-section .footer-wrapper .address-area {
padding: 0;
margin: 0;
list-style: none;
display: flex;
justify-content: space-between;
gap: 20px;
padding: 60px;
width: 100%;
border-left: 1px solid rgba(var(--primary-color-opc), 0.1);
border-bottom: 1px solid rgba(var(--primary-color-opc), 0.1);
}
@media (max-width: 1799px) {
.footer-section .footer-wrapper .address-area {
padding: 60px 50px;
}
}
@media (max-width: 1699px) {
.footer-section .footer-wrapper .address-area {
padding: 60px 45px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.footer-section .footer-wrapper .address-area {
padding: 50px 25px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.footer-section .footer-wrapper .address-area {
padding: 45px 20px;
gap: 15px;
}
}
@media (max-width: 1199px) {
.footer-section .footer-wrapper .address-area {
border: unset;
padding: 0;
}
}
@media (max-width: 767px) {
.footer-section .footer-wrapper .address-area {
flex-wrap: wrap;
gap: 25px;
}
}
.footer-section .footer-wrapper .address-area .single-address {
max-width: 240px;
width: 100%;
padding-left: 35px;
position: relative;
}
@media (max-width: 1799px) {
.footer-section .footer-wrapper .address-area .single-address {
padding-left: 25px;
}
}
@media (max-width: 1699px) {
.footer-section .footer-wrapper .address-area .single-address {
padding-left: 20px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.footer-section .footer-wrapper .address-area .single-address {
padding-left: 15px;
}
}
@media (max-width: 1399px) {
.footer-section .footer-wrapper .address-area .single-address {
padding-left: 15px;
}
}
@media (max-width: 767px) {
.footer-section .footer-wrapper .address-area .single-address {
padding-left: 0;
}
}
.footer-section .footer-wrapper .address-area .single-address::before {
content: "";
position: absolute;
bottom: 5px;
left: 0;
width: 1px;
height: 42px;
background-color: var(--primary-color2);
}
@media (max-width: 767px) {
.footer-section .footer-wrapper .address-area .single-address::before {
display: none;
}
}
.footer-section .footer-wrapper .address-area .single-address:first-child {
padding-left: 0;
}
.footer-section .footer-wrapper .address-area .single-address:first-child::before {
display: none;
}
.footer-section .footer-wrapper .address-area .single-address span {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.06em;
text-decoration: underline;
display: block;
margin-bottom: 20px;
}
@media (max-width: 767px) {
.footer-section .footer-wrapper .address-area .single-address span {
margin-bottom: 15px;
}
}
.footer-section .footer-wrapper .address-area .single-address a {
color: rgba(var(--title-color-opc), 0.6);
font-family: var(--font-inter);
font-size: 17px;
font-weight: 400;
line-height: 28px;
margin-bottom: 0;
transition: 0.5s;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.footer-section .footer-wrapper .address-area .single-address a {
font-size: 16px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.footer-section .footer-wrapper .address-area .single-address a {
font-size: 14px;
}
}
.footer-section .footer-wrapper .address-area .single-address a:hover {
color: var(--title-color);
}
.footer-section .footer-wrapper .contact-banner-area {
background-image: linear-gradient(90deg, #000000 5.18%, rgba(0, 0, 0, 0.4) 100%), url(//www.husetconstruction.com/wp-content/themes/vernex/assets/img/home3/footer-contact-bg.jpg);
background-size: cover;
background-repeat: no-repeat;
padding: 64px 60px;
display: flex;
align-items: center;
justify-content: space-between;
}
@media (max-width: 1699px) {
.footer-section .footer-wrapper .contact-banner-area {
padding: 64px 40px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.footer-section .footer-wrapper .contact-banner-area {
padding: 64px 30px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.footer-section .footer-wrapper .contact-banner-area {
padding: 55px 20px;
}
}
@media (max-width: 991px) {
.footer-section .footer-wrapper .contact-banner-area {
padding: 64px 25px;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.footer-section .footer-wrapper .contact-banner-area {
padding: 50px 20px;
gap: 15px;
}
}
@media (max-width: 576px) {
.footer-section .footer-wrapper .contact-banner-area {
flex-wrap: wrap;
padding: 55px 20px;
gap: 20px;
}
}
.footer-section .footer-wrapper .contact-banner-area h4 {
color: var(--white-color);
font-family: var(--font-kanit);
font-size: 25px;
font-weight: 400;
line-height: 1.3;
letter-spacing: 0.05em;
margin-bottom: 0;
max-width: 290px;
width: 100%;
}
@media (min-width: 1200px) and (max-width: 1399px) {
.footer-section .footer-wrapper .contact-banner-area h4 {
font-size: 23px;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.footer-section .footer-wrapper .contact-banner-area h4 {
font-size: 21px;
}
}
@media (max-width: 576px) {
.footer-section .footer-wrapper .contact-banner-area h4 {
font-size: 23px;
}
}
@media (max-width: 576px) {
.footer-section .footer-wrapper .contact-banner-area form {
width: 100%;
}
}
.footer-section .footer-wrapper .contact-banner-area form .form-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 10px 4px 24px;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 5px;
min-width: 380px;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.footer-section .footer-wrapper .contact-banner-area form .form-inner {
min-width: 320px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.footer-section .footer-wrapper .contact-banner-area form .form-inner {
min-width: 270px;
}
}
@media (max-width: 991px) {
.footer-section .footer-wrapper .contact-banner-area form .form-inner {
min-width: 310px;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.footer-section .footer-wrapper .contact-banner-area form .form-inner {
min-width: 245px;
padding: 4px 10px 4px 15px;
}
}
@media (max-width: 576px) {
.footer-section .footer-wrapper .contact-banner-area form .form-inner {
min-width: unset;
padding: 4px 10px 4px 15px;
}
}
.footer-section .footer-wrapper .contact-banner-area form .form-inner input {
background: transparent;
height: unset;
border: unset;
padding: 0;
color: var(--white-color);
padding-right: 10px;
}
.footer-section .footer-wrapper .contact-banner-area form .form-inner input::-moz-placeholder {
color: rgba(255, 255, 255, 0.75);
}
.footer-section .footer-wrapper .contact-banner-area form .form-inner input::placeholder {
color: rgba(255, 255, 255, 0.75);
}
.footer-section .footer-wrapper .contact-banner-area form .form-inner button {
min-width: 36px;
max-width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--primary-color2);
display: flex;
align-items: center;
justify-content: center;
transition: 0.5s;
}
.footer-section .footer-wrapper .contact-banner-area form .form-inner button svg {
fill: var(--white-color);
transition: 0.5s;
}
.footer-section .footer-wrapper .contact-banner-area form .form-inner button:hover {
background-color: var(--primary-color);
}
.footer-section .footer-wrapper .footer-menu {
padding: 75px 110px;
border-left: 1px solid rgba(var(--primary-color-opc), 0.1);
}
@media (max-width: 1799px) {
.footer-section .footer-wrapper .footer-menu {
padding: 75px 85px;
}
}
@media (max-width: 1699px) {
.footer-section .footer-wrapper .footer-menu {
padding: 75px 70px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.footer-section .footer-wrapper .footer-menu {
padding: 65px 55px;
}
}
@media (max-width: 1399px) {
.footer-section .footer-wrapper .footer-menu {
padding: 65px 45px;
}
}
@media (max-width: 1199px) {
.footer-section .footer-wrapper .footer-menu {
border: unset;
padding: 0;
}
}
.footer-section .footer-wrapper .footer-menu .footer-widget .widget-title {
margin-bottom: 25px;
}
.footer-section .footer-wrapper .footer-menu .footer-widget .widget-title h5 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 20px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.9px;
margin-bottom: 0;
position: relative;
padding-bottom: 10px;
}
.footer-section .footer-wrapper .footer-menu .footer-widget .widget-title h5::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 107px;
height: 2px;
border-radius: 10px;
background: linear-gradient(90.01deg, #000000 0.01%, rgba(0, 0, 0, 0) 102.8%);
}
.footer-section .footer-wrapper .footer-menu .footer-widget .menu-container {
display: flex;
gap: 80px;
}
@media (max-width: 1699px) {
.footer-section .footer-wrapper .footer-menu .footer-widget .menu-container {
gap: 60px;
}
}
.footer-section .footer-wrapper .footer-menu .footer-widget .menu-container .widget-list {
padding: 0;
margin: 0;
list-style: none;
}
.footer-section .footer-wrapper .footer-menu .footer-widget .menu-container .widget-list li {
margin-bottom: 20px;
line-height: 1;
transition: 0.5s;
position: relative;
}
@media (max-width: 1199px) {
.footer-section .footer-wrapper .footer-menu .footer-widget .menu-container .widget-list li {
margin-bottom: 15px;
}
}
.footer-section .footer-wrapper .footer-menu .footer-widget .menu-container .widget-list li:last-child {
margin-bottom: 0;
}
.footer-section .footer-wrapper .footer-menu .footer-widget .menu-container .widget-list li a {
color: var(--paragraph-color);
font-family: var(--font-kanit);
font-size: 13px;
font-weight: 400;
line-height: 1.3;
letter-spacing: 0.34px;
text-transform: uppercase;
display: inline-block;
background: linear-gradient(to bottom, var(--title-color) 0%, var(--title-color) 100%);
background-repeat: no-repeat;
background-size: 0 1px;
background-position: 0% 100%;
transition: background-size 0.75s;
}
.footer-section .footer-wrapper .footer-menu .footer-widget .menu-container .widget-list li a:hover {
color: var(--primary-color);
background-size: 100% 1px;
background-position: left 100%;
}
.footer-section .footer-bottom-wrap {
padding: 20px 0;
border-top: 1px solid rgba(var(--primary-color-opc), 0.1);
}
.footer-section .footer-bottom-wrap .footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
}
@media (max-width: 991px) {
.footer-section .footer-bottom-wrap .footer-bottom {
flex-wrap: wrap;
gap: 20px;
}
}
@media (max-width: 767px) {
.footer-section .footer-bottom-wrap .footer-bottom {
justify-content: center;
gap: 15px;
}
}
.footer-section .footer-bottom-wrap .footer-bottom .copyright-area p {
color: var(--paragraph-color);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 300;
line-height: normal;
letter-spacing: 0.02em;
margin-bottom: 0;
}
.footer-section .footer-bottom-wrap .footer-bottom .copyright-area p a {
color: var(--title-color);
font-weight: 500;
line-height: 1;
display: inline-block;
background: linear-gradient(to bottom, var(--title-color) 0%, var(--title-color) 100%);
background-repeat: no-repeat;
background-size: 0 1px;
background-position: 0% 100%;
transition: background-size 0.75s;
}
.footer-section .footer-bottom-wrap .footer-bottom .copyright-area p a:hover {
color: var(--primary-color);
background-size: 100% 1px;
background-position: left 100%;
}
.footer-section .footer-bottom-wrap .footer-bottom .footer-bottom-right ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 45px;
flex-wrap: wrap;
line-height: 1;
}
@media (max-width: 991px) {
.footer-section .footer-bottom-wrap .footer-bottom .footer-bottom-right ul {
gap: 20px;
}
}
@media (max-width: 576px) {
.footer-section .footer-bottom-wrap .footer-bottom .footer-bottom-right ul {
gap: 15px;
justify-content: center;
}
}
.footer-section .footer-bottom-wrap .footer-bottom .footer-bottom-right ul li a {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.3px;
text-transform: uppercase;
display: inline-block;
background: linear-gradient(to bottom, var(--title-color) 0%, var(--title-color) 100%);
background-repeat: no-repeat;
background-size: 0 1px;
background-position: 0% 100%;
transition: background-size 0.75s;
}
.footer-section .footer-bottom-wrap .footer-bottom .footer-bottom-right ul li a:hover {
color: var(--primary-color);
background-size: 100% 1px;
background-position: left 100%;
}
.footer-section.style-2 {
background-color: #F7F7F7;
}
.footer-section.style-2 .footer-wrapper {
padding: 110px 100px;
}
@media (max-width: 1699px) {
.footer-section.style-2 .footer-wrapper {
padding: 110px 75px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.footer-section.style-2 .footer-wrapper {
padding: 100px 45px;
}
}
@media (max-width: 1399px) {
.footer-section.style-2 .footer-wrapper {
padding: 100px 35px;
}
}
@media (max-width: 1199px) {
.footer-section.style-2 .footer-wrapper {
padding: 90px 75px;
}
}
@media (max-width: 991px) {
.footer-section.style-2 .footer-wrapper {
padding: 70px 40px;
}
}
@media (max-width: 767px) {
.footer-section.style-2 .footer-wrapper {
padding: 70px 30px;
}
}
@media (max-width: 576px) {
.footer-section.style-2 .footer-wrapper {
padding: 60px 10px;
}
}
.footer-section.style-2 .footer-wrapper .footer-logo-and-contact-area {
align-items: center;
padding: 0;
}
.footer-section.style-2 .footer-wrapper .footer-logo-and-contact-area .contact-area {
padding-right: 110px;
}
@media (max-width: 1799px) {
.footer-section.style-2 .footer-wrapper .footer-logo-and-contact-area .contact-area {
padding-right: 85px;
}
}
@media (max-width: 1699px) {
.footer-section.style-2 .footer-wrapper .footer-logo-and-contact-area .contact-area {
padding-right: 75px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.footer-section.style-2 .footer-wrapper .footer-logo-and-contact-area .contact-area {
padding-right: 45px;
}
}
@media (max-width: 1399px) {
.footer-section.style-2 .footer-wrapper .footer-logo-and-contact-area .contact-area {
padding-right: 25px;
}
}
@media (max-width: 1199px) {
.footer-section.style-2 .footer-wrapper .footer-logo-and-contact-area .contact-area {
padding-right: 0;
}
}
.footer-section.style-2 .footer-wrapper .footer-logo-and-contact-area .contact-area::after {
content: "";
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 1px;
height: 138px;
background-color: rgba(var(--primary-color2-opc), 0.2);
}
@media (max-width: 1199px) {
.footer-section.style-2 .footer-wrapper .footer-logo-and-contact-area .contact-area::after {
display: none;
}
}
.footer-section.style-2 .footer-wrapper .address-area {
padding: 0;
display: block;
border: unset;
}
.footer-section.style-2 .footer-wrapper .address-area .single-address {
padding-left: 0;
margin-bottom: 45px;
}
@media (max-width: 1399px) {
.footer-section.style-2 .footer-wrapper .address-area .single-address {
margin-bottom: 40px;
}
}
@media (max-width: 1199px) {
.footer-section.style-2 .footer-wrapper .address-area .single-address {
margin-bottom: 35px;
}
}
@media (max-width: 767px) {
.footer-section.style-2 .footer-wrapper .address-area .single-address {
margin-bottom: 30px;
}
}
.footer-section.style-2 .footer-wrapper .address-area .single-address:last-child {
margin-bottom: 0;
}
.footer-section.style-2 .footer-wrapper .address-area .single-address::before {
display: none;
}
.footer-section.style-2 .footer-wrapper .address-area .single-address span {
margin-bottom: 15px;
}
.footer-section.style-2 .footer-wrapper .footer-menu {
border: unset;
padding: 0;
padding-left: 110px;
}
@media (max-width: 1799px) {
.footer-section.style-2 .footer-wrapper .footer-menu {
padding-left: 85px;
}
}
@media (max-width: 1699px) {
.footer-section.style-2 .footer-wrapper .footer-menu {
padding-left: 70px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.footer-section.style-2 .footer-wrapper .footer-menu {
padding-left: 55px;
}
}
@media (max-width: 1399px) {
.footer-section.style-2 .footer-wrapper .footer-menu {
padding-left: 45px;
}
}
@media (max-width: 1199px) {
.footer-section.style-2 .footer-wrapper .footer-menu {
border: unset;
padding: 0;
}
}
.footer-section.style-2 .footer-bottom-wrap {
background-color: var(--white-color);
border: unset;
}
.footer-section.style-3 .footer-wrapper .address-area {
padding: 0;
display: block;
border: unset;
}
.footer-section.style-3 .footer-wrapper .address-area .single-address {
padding-left: 0;
margin-bottom: 45px;
}
@media (max-width: 1399px) {
.footer-section.style-3 .footer-wrapper .address-area .single-address {
margin-bottom: 40px;
}
}
@media (max-width: 1199px) {
.footer-section.style-3 .footer-wrapper .address-area .single-address {
margin-bottom: 35px;
}
}
@media (max-width: 767px) {
.footer-section.style-3 .footer-wrapper .address-area .single-address {
margin-bottom: 30px;
}
}
.footer-section.style-3 .footer-wrapper .address-area .single-address:last-child {
margin-bottom: 0;
}
.footer-section.style-3 .footer-wrapper .address-area .single-address::before {
display: none;
}
.footer-section.style-3 .footer-wrapper .address-area .single-address span {
margin-bottom: 15px;
}
.footer-section.style-3 .footer-wrapper .footer-menu {
padding: 75px 60px;
}
@media (max-width: 1199px) {
.footer-section.style-3 .footer-wrapper .footer-menu {
padding: 0;
}
}
.footer-section.style-4 {
background-color: var(--primary-color);
border-top: 3px solid var(--primary-color2);
}
@media (min-width: 1400px) and (max-width: 1599px) {
.footer-section.style-4 .footer-wrapper .footer-logo-and-contact-area {
padding: 50px 35px;
}
}
@media (max-width: 1399px) {
.footer-section.style-4 .footer-wrapper .footer-logo-and-contact-area {
padding: 50px 25px;
}
}
@media (max-width: 1199px) {
.footer-section.style-4 .footer-wrapper .footer-logo-and-contact-area {
padding: 0;
}
}
@media (max-width: 767px) {
.footer-section.style-4 .footer-wrapper .footer-logo-and-contact-area {
flex-wrap: wrap;
}
}
.footer-section.style-4 .footer-wrapper .footer-logo-and-contact-area .footer-logo-area .footer-content p {
color: rgba(255, 255, 255, 0.7);
}
.footer-section.style-4 .footer-wrapper .footer-logo-and-contact-area .footer-logo-area .footer-content .social-list li a i {
color: rgba(255, 255, 255, 0.6);
}
.footer-section.style-4 .footer-wrapper .footer-logo-and-contact-area .footer-logo-area .footer-content .social-list li a span {
color: rgba(255, 255, 255, 0.6);
}
.footer-section.style-4 .footer-wrapper .footer-logo-and-contact-area .footer-logo-area .footer-content .social-list li a:hover i {
color: var(--white-color);
}
.footer-section.style-4 .footer-wrapper .footer-logo-and-contact-area .footer-logo-area .footer-content .social-list li a:hover span {
color: var(--white-color);
}
.footer-section.style-4 .footer-wrapper .footer-logo-and-contact-area .contact-area li .single-contact .icon svg {
fill: var(--white-color);
}
.footer-section.style-4 .footer-wrapper .footer-logo-and-contact-area .contact-area li .single-contact .content span {
color: var(--white-color);
}
.footer-section.style-4 .footer-wrapper .footer-logo-and-contact-area .contact-area li .single-contact .content h6 a {
color: rgba(255, 255, 255, 0.6);
}
.footer-section.style-4 .footer-wrapper .footer-logo-and-contact-area .contact-area li .single-contact .content h6 a:hover {
color: var(--primary-color2);
}
.footer-section.style-4 .footer-wrapper .contact-banner-area {
background-image: linear-gradient(90deg, #101010 20.1%, rgba(16, 16, 16, 0.5) 100%), url(//www.husetconstruction.com/wp-content/themes/vernex/assets/img/home3/footer-contact-bg.jpg);
}
@media (max-width: 1699px) {
.footer-section.style-4 .footer-wrapper .contact-banner-area {
padding: 64px 25px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.footer-section.style-4 .footer-wrapper .contact-banner-area {
padding: 64px 20px;
}
}
@media (max-width: 1399px) {
.footer-section.style-4 .footer-wrapper .contact-banner-area {
padding: 64px 15px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.footer-section.style-4 .footer-wrapper .contact-banner-area h4 {
font-size: 23px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.footer-section.style-4 .footer-wrapper .contact-banner-area h4 {
font-size: 21px;
}
}
.footer-section.style-4 .footer-wrapper .address-area {
padding: 0;
display: block;
border: unset;
}
.footer-section.style-4 .footer-wrapper .address-area .single-address {
padding-left: 0;
margin-bottom: 45px;
}
@media (max-width: 1699px) {
.footer-section.style-4 .footer-wrapper .address-area .single-address {
max-width: 200px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.footer-section.style-4 .footer-wrapper .address-area .single-address {
max-width: 170px;
}
}
@media (max-width: 1399px) {
.footer-section.style-4 .footer-wrapper .address-area .single-address {
margin-bottom: 40px;
}
}
@media (max-width: 1199px) {
.footer-section.style-4 .footer-wrapper .address-area .single-address {
margin-bottom: 35px;
}
}
@media (max-width: 767px) {
.footer-section.style-4 .footer-wrapper .address-area .single-address {
margin-bottom: 30px;
}
}
.footer-section.style-4 .footer-wrapper .address-area .single-address:last-child {
margin-bottom: 0;
}
.footer-section.style-4 .footer-wrapper .address-area .single-address::before {
display: none;
}
.footer-section.style-4 .footer-wrapper .address-area .single-address span {
margin-bottom: 15px;
color: var(--white-color);
}
.footer-section.style-4 .footer-wrapper .address-area .single-address a {
color: rgba(255, 255, 255, 0.6);
}
.footer-section.style-4 .footer-wrapper .address-area .single-address a:hover {
color: var(--white-color);
}
.footer-section.style-4 .footer-wrapper .footer-menu {
border-left: 1px solid rgba(255, 255, 255, 0.08);
padding: 75px 60px;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.footer-section.style-4 .footer-wrapper .footer-menu {
padding: 75px 25px;
}
}
@media (max-width: 1399px) {
.footer-section.style-4 .footer-wrapper .footer-menu {
padding: 75px 20px;
}
}
@media (max-width: 1199px) {
.footer-section.style-4 .footer-wrapper .footer-menu {
border-left: unset;
padding: 0;
}
}
.footer-section.style-4 .footer-wrapper .footer-menu .footer-widget .widget-title h5 {
color: var(--white-color);
}
.footer-section.style-4 .footer-wrapper .footer-menu .footer-widget .widget-title h5::after {
opacity: 0.4;
background: linear-gradient(90.01deg, #FFFFFF 0.01%, rgba(255, 255, 255, 0) 102.8%);
}
.footer-section.style-4 .footer-wrapper .footer-menu .footer-widget .menu-container .widget-list li a {
color: rgba(255, 255, 255, 0.6);
background: linear-gradient(to bottom, var(--white-color) 0%, var(--white-color) 100%);
background-repeat: no-repeat;
background-size: 0 1px;
background-position: 0% 100%;
transition: background-size 0.75s;
}
.footer-section.style-4 .footer-wrapper .footer-menu .footer-widget .menu-container .widget-list li a:hover {
color: var(--white-color);
background-size: 100% 1px;
background-position: left 100%;
}
.footer-section.style-4 .footer-bottom-wrap {
padding: 20px 0;
border-top: unset;
background-color: #101010;
}
.footer-section.style-4 .footer-bottom-wrap .footer-bottom .copyright-area p {
color: rgba(255, 255, 255, 0.6);
}
.footer-section.style-4 .footer-bottom-wrap .footer-bottom .copyright-area p a {
color: var(--white-color);
background: linear-gradient(to bottom, var(--white-color) 0%, var(--white-color) 100%);
background-repeat: no-repeat;
background-size: 0 1px;
background-position: 0% 100%;
transition: background-size 0.75s;
}
.footer-section.style-4 .footer-bottom-wrap .footer-bottom .copyright-area p a:hover {
background-size: 100% 1px;
background-position: left 100%;
}
.footer-section.style-4 .footer-bottom-wrap .footer-bottom .footer-bottom-right ul li a {
color: var(--white-color);
background: linear-gradient(to bottom, var(--white-color) 0%, var(--white-color) 100%);
background-repeat: no-repeat;
background-size: 0 1px;
background-position: 0% 100%;
transition: background-size 0.75s;
}
.footer-section.style-4 .footer-bottom-wrap .footer-bottom .footer-bottom-right ul li a:hover {
background-size: 100% 1px;
background-position: left 100%;
} .home2-banner-section {
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%), url(//www.husetconstruction.com/wp-content/themes/vernex/assets/img/home2/home2-banner-bg.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
padding-top: 20%;
overflow: hidden;
position: relative;
z-index: 1;
}
@media (max-width: 1399px) {
.home2-banner-section {
padding-top: 22%;
}
}
@media (max-width: 991px) {
.home2-banner-section {
min-height: 85vh;
display: flex;
align-items: end;
}
}
.home2-banner-section .banner-content-wrap {
padding: 6.5% 20px 16%;
background-color: rgba(161, 197, 211, 0.25);
-webkit-backdrop-filter: blur(2.5px);
backdrop-filter: blur(2.5px);
border-radius: 20px 20px 0 0;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home2-banner-section .banner-content-wrap {
padding: 5% 20px 12%;
}
}
@media (max-width: 1399px) {
.home2-banner-section .banner-content-wrap {
padding: 5% 20px 14%;
}
}
@media (max-width: 1199px) {
.home2-banner-section .banner-content-wrap {
padding: 4% 20px 14%;
}
}
@media (max-width: 991px) {
.home2-banner-section .banner-content-wrap {
padding: 50px 20px 120px;
}
}
@media (max-width: 767px) {
.home2-banner-section .banner-content-wrap {
padding: 40px 20px 120px;
}
}
@media (max-width: 576px) {
.home2-banner-section .banner-content-wrap {
border-radius: 10px 10px 0 0;
padding: 40px 20px 100px;
}
}
.home2-banner-section .banner-content-wrap .banner-content {
text-align: center;
}
.home2-banner-section .banner-content-wrap .banner-content h1 {
color: var(--white-color);
font-family: var(--font-kanit);
font-size: 70px;
font-weight: 500;
line-height: 1.1;
margin-bottom: 35px;
}
@media (max-width: 1399px) {
.home2-banner-section .banner-content-wrap .banner-content h1 {
font-size: 65px;
margin-bottom: 30px;
}
}
@media (max-width: 1199px) {
.home2-banner-section .banner-content-wrap .banner-content h1 {
font-size: 62px;
line-height: 1.2;
}
}
@media (max-width: 991px) {
.home2-banner-section .banner-content-wrap .banner-content h1 {
font-size: 58px;
}
}
@media (max-width: 767px) {
.home2-banner-section .banner-content-wrap .banner-content h1 {
font-size: 50px;
margin-bottom: 25px;
}
}
@media (max-width: 576px) {
.home2-banner-section .banner-content-wrap .banner-content h1 {
font-size: 46px;
}
}
.home2-banner-section .banner-content-wrap .banner-content .btn-and-video-area {
display: flex;
align-items: center;
justify-content: center;
gap: 50px;
}
@media (max-width: 576px) {
.home2-banner-section .banner-content-wrap .banner-content .btn-and-video-area {
flex-wrap: wrap;
gap: 25px;
}
}
.home2-banner-section .banner-content-wrap .banner-content .btn-and-video-area .video-area {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.home2-banner-section .banner-content-wrap .banner-content .btn-and-video-area .video-area .icon {
position: relative;
}
.home2-banner-section .banner-content-wrap .banner-content .btn-and-video-area .video-area .icon .video-circle {
stroke: var(--white-color);
fill: none;
transition: 0.5s;
}
.home2-banner-section .banner-content-wrap .banner-content .btn-and-video-area .video-area .icon .video-circle .top-half {
stroke-dasharray: 320;
stroke-dashoffset: 320;
transition: stroke-dashoffset 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.home2-banner-section .banner-content-wrap .banner-content .btn-and-video-area .video-area .icon .play-icon {
fill: var(--white-color);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-left: 1px;
}
.home2-banner-section .banner-content-wrap .banner-content .btn-and-video-area .video-area h6 {
color: var(--white-color);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.48px;
margin-bottom: 0;
}
.home2-banner-section .banner-content-wrap .banner-content .btn-and-video-area .video-area:hover .icon .video-circle .top-half {
stroke-dashoffset: 0;
}
.home2-banner-section .scroll-text-area {
display: flex;
gap: 25px;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
position: absolute;
bottom: 30px;
left: 0;
z-index: -1;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home2-banner-section .scroll-text-area {
bottom: 20px;
}
}
@media (max-width: 1399px) {
.home2-banner-section .scroll-text-area {
bottom: 20px;
}
}
.home2-banner-section .scroll-text-area .scroll-text h2 {
white-space: nowrap;
font-family: var(--font-kanit);
font-size: 110px;
font-style: italic;
font-weight: 700;
line-height: 1;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 0;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
flex-shrink: 0;
min-width: 100%;
animation: scroll-x 30s linear infinite;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home2-banner-section .scroll-text-area .scroll-text h2 {
font-size: 95px;
}
}
@media (max-width: 1399px) {
.home2-banner-section .scroll-text-area .scroll-text h2 {
font-size: 85px;
}
}
@media (max-width: 767px) {
.home2-banner-section .scroll-text-area .scroll-text h2 {
font-size: 65px;
}
}
@media (max-width: 576px) {
.home2-banner-section .scroll-text-area .scroll-text h2 {
font-size: 55px;
}
} .home2-about-section .about-content {
padding-left: 30px;
}
@media (max-width: 1399px) {
.home2-about-section .about-content {
padding-left: 15px;
}
}
@media (max-width: 1199px) {
.home2-about-section .about-content {
padding-left: 0;
}
}
.home2-about-section .about-content p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 30px;
font-weight: 500;
line-height: 1.4;
margin-bottom: 55px;
}
@media (max-width: 1399px) {
.home2-about-section .about-content p {
margin-bottom: 45px;
font-size: 28px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home2-about-section .about-content p {
font-size: 27px;
margin-bottom: 35px;
}
}
@media (max-width: 991px) {
.home2-about-section .about-content p {
margin-bottom: 30px;
}
}
@media (max-width: 576px) {
.home2-about-section .about-content p {
font-size: 24px;
}
}
.home2-about-section .about-content p span {
color: var(--title-color);
}
.home2-about-section .about-content .about-bottom-content {
padding-top: 95px;
}
@media (max-width: 1399px) {
.home2-about-section .about-content .about-bottom-content {
padding-top: 90px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home2-about-section .about-content .about-bottom-content {
padding-top: 70px;
}
}
@media (max-width: 991px) {
.home2-about-section .about-content .about-bottom-content {
padding-top: 50px;
}
}
@media (max-width: 576px) {
.home2-about-section .about-content .about-bottom-content {
padding-top: 40px;
}
}
.home2-about-section .about-content .about-bottom-content ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
justify-content: space-between;
gap: 20px;
}
@media (max-width: 576px) {
.home2-about-section .about-content .about-bottom-content ul {
flex-wrap: wrap;
}
}
.home2-about-section .about-content .about-bottom-content ul li {
max-width: 312px;
width: 100%;
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home2-about-section .about-content .about-bottom-content ul li {
max-width: 280px;
}
}
.home2-about-section .about-content .about-bottom-content ul li h5 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 22px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.06em;
margin-bottom: 15px;
}
@media (max-width: 576px) {
.home2-about-section .about-content .about-bottom-content ul li h5 {
margin-bottom: 10px;
}
}
.home2-about-section .about-content .about-bottom-content ul li p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.8;
margin-bottom: 0;
} .home2-service-section .service-list {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home2-service-section .service-list {
gap: 25px;
}
}
@media (max-width: 1199px) {
.home2-service-section .service-list {
gap: 30px;
}
}
@media (max-width: 576px) {
.home2-service-section .service-list {
gap: 25px;
}
}
.home2-service-section .service-list li h2 {
margin-bottom: 0;
}
.home2-service-section .service-list li h2 a {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 57px;
font-style: italic;
font-weight: 500;
line-height: 1;
letter-spacing: 0.05em;
text-transform: uppercase;
position: relative;
transition: 0.5s;
}
@media (max-width: 1399px) {
.home2-service-section .service-list li h2 a {
font-size: 50px;
}
}
@media (max-width: 991px) {
.home2-service-section .service-list li h2 a {
font-size: 40px;
}
}
@media (max-width: 767px) {
.home2-service-section .service-list li h2 a {
font-size: 38px;
}
}
@media (max-width: 576px) {
.home2-service-section .service-list li h2 a {
font-size: 34px;
}
}
.home2-service-section .service-list li h2 a .service-img {
position: absolute;
top: 50%;
right: 0;
z-index: -1;
opacity: 0;
transform: scale(0.4) translateY(-50%);
transition: 0.5s;
}
@media (max-width: 991px) {
.home2-service-section .service-list li h2 a .service-img {
width: 220px;
}
}
@media (max-width: 576px) {
.home2-service-section .service-list li h2 a .service-img {
width: 180px;
}
}
.home2-service-section .service-list li h2 a:hover {
color: var(--primary-color2);
}
.home2-service-section .service-list li h2 a:hover .service-img {
opacity: 1;
transform: scale(1) translateY(-50%);
}
.home2-service-section .service-list li svg {
fill: var(--title-color);
} .home2-property-description-section {
background-color: #F0F2F4;
padding: 110px 0;
}
@media (max-width: 1199px) {
.home2-property-description-section {
padding: 90px 0;
}
}
@media (max-width: 767px) {
.home2-property-description-section {
padding: 70px 0;
}
}
.home2-property-description-section .property-content-wrap .property-description-nav .nav-tabs {
border-bottom: 1px solid rgba(var(--primary-color-opc), 0.15);
padding-left: 40px;
gap: 65px;
}
@media (max-width: 991px) {
.home2-property-description-section .property-content-wrap .property-description-nav .nav-tabs {
gap: 35px;
padding-left: 20px;
}
}
@media (max-width: 767px) {
.home2-property-description-section .property-content-wrap .property-description-nav .nav-tabs {
gap: 20px;
padding-left: 0;
}
}
@media (max-width: 576px) {
.home2-property-description-section .property-content-wrap .property-description-nav .nav-tabs {
gap: 15px;
}
}
.home2-property-description-section .property-content-wrap .property-description-nav .nav-tabs .nav-link {
color: var(--paragraph-color);
font-family: var(--font-kanit);
font-size: 15px;
font-weight: 400;
letter-spacing: 0.36px;
text-transform: uppercase;
border: none;
padding: 0;
padding-bottom: 10px;
background: linear-gradient(to bottom, rgba(var(--primary-color-opc), 1) 0%, rgba(var(--primary-color-opc), 1) 98%);
background-size: 0px 1px;
background-repeat: no-repeat;
background-position: right 100%;
transition: background-size 0.75s;
}
@media (max-width: 576px) {
.home2-property-description-section .property-content-wrap .property-description-nav .nav-tabs .nav-link {
padding-bottom: 5px;
margin-right: 15px;
padding: 0;
}
}
.home2-property-description-section .property-content-wrap .property-description-nav .nav-tabs .nav-link.active {
color: var(--title-color);
background-size: 100% 1px;
background-position: 0% 100%;
}
.home2-property-description-section .property-content-wrap .property-description-tab .property-content p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.8;
margin-bottom: 50px;
}
@media (max-width: 1199px) {
.home2-property-description-section .property-content-wrap .property-description-tab .property-content p {
margin-bottom: 40px;
}
}
@media (max-width: 767px) {
.home2-property-description-section .property-content-wrap .property-description-tab .property-content p {
margin-bottom: 30px;
}
}
.home2-property-description-section .property-content-wrap .property-description-tab .property-content ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: start;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
position: relative;
margin-bottom: 70px;
}
@media (max-width: 1199px) {
.home2-property-description-section .property-content-wrap .property-description-tab .property-content ul {
margin-bottom: 60px;
}
}
@media (max-width: 767px) {
.home2-property-description-section .property-content-wrap .property-description-tab .property-content ul {
margin-bottom: 50px;
}
}
.home2-property-description-section .property-content-wrap .property-description-tab .property-content ul::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1px;
height: 100%;
background-color: rgba(var(--primary-color-opc), 0.1);
}
@media (max-width: 576px) {
.home2-property-description-section .property-content-wrap .property-description-tab .property-content ul::before {
display: none;
}
}
.home2-property-description-section .property-content-wrap .property-description-tab .property-content ul li {
display: flex;
gap: 15px;
max-width: 260px;
width: 100%;
padding-bottom: 25px;
position: relative;
margin-bottom: 10px;
}
@media (max-width: 1399px) {
.home2-property-description-section .property-content-wrap .property-description-tab .property-content ul li {
max-width: 220px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home2-property-description-section .property-content-wrap .property-description-tab .property-content ul li {
max-width: 180px;
}
}
@media (max-width: 767px) {
.home2-property-description-section .property-content-wrap .property-description-tab .property-content ul li {
padding-bottom: 15px;
}
}
@media (min-width: 577px) {
.home2-property-description-section .property-content-wrap .property-description-tab .property-content ul li:nth-child(5) {
padding-bottom: 0;
margin-bottom: 0;
}
.home2-property-description-section .property-content-wrap .property-description-tab .property-content ul li:nth-child(5)::before {
display: none;
}
}
.home2-property-description-section .property-content-wrap .property-description-tab .property-content ul li:last-child {
padding-bottom: 0;
margin-bottom: 0;
}
.home2-property-description-section .property-content-wrap .property-description-tab .property-content ul li:last-child::before {
display: none;
}
.home2-property-description-section .property-content-wrap .property-description-tab .property-content ul li::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
opacity: 0.1;
}
.home2-property-description-section .property-content-wrap .property-description-tab .property-content ul li .icon svg {
fill: var(--title-color);
}
.home2-property-description-section .property-content-wrap .property-description-tab .property-content ul li .content h6 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 18px;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.05em;
margin-bottom: 0;
}
@media (min-width: 992px) and (max-width: 1199px) {
.home2-property-description-section .property-content-wrap .property-description-tab .property-content ul li .content h6 {
font-size: 17px;
}
}
@media (max-width: 767px) {
.home2-property-description-section .property-content-wrap .property-description-tab .property-content ul li .content h6 {
font-size: 17px;
}
}
.home2-property-description-section .property-content-wrap .property-description-tab .property-content ul li .content span {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 15px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.03em;
}
.home2-property-description-section .property-content-wrap .property-description-tab .property-content .primary-btn2 {
padding: 18px 30px;
}
@media (max-width: 576px) {
.home2-property-description-section .property-content-wrap .property-description-tab .property-content .primary-btn2 {
padding: 15px 22px;
}
} .home2-feature-section .feature-content-wrap .feature-content {
padding-top: 50px;
padding-left: 50px;
}
@media (max-width: 1399px) {
.home2-feature-section .feature-content-wrap .feature-content {
padding-left: 30px;
padding-top: 40px;
}
}
@media (max-width: 1199px) {
.home2-feature-section .feature-content-wrap .feature-content {
padding-left: 15px;
padding-top: 35px;
}
}
@media (max-width: 991px) {
.home2-feature-section .feature-content-wrap .feature-content {
padding-left: 0;
}
}
@media (max-width: 767px) {
.home2-feature-section .feature-content-wrap .feature-content {
padding-top: 30px;
}
}
.home2-feature-section .feature-content-wrap .feature-content .video-and-content {
display: flex;
align-items: center;
gap: 50px;
}
@media (max-width: 1399px) {
.home2-feature-section .feature-content-wrap .feature-content .video-and-content {
gap: 40px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home2-feature-section .feature-content-wrap .feature-content .video-and-content {
gap: 25px;
}
}
@media (max-width: 767px) {
.home2-feature-section .feature-content-wrap .feature-content .video-and-content {
gap: 25px;
}
}
@media (max-width: 576px) {
.home2-feature-section .feature-content-wrap .feature-content .video-and-content {
flex-wrap: wrap;
gap: 20px;
}
}
.home2-feature-section .feature-content-wrap .feature-content .video-and-content .video-area {
cursor: pointer;
display: inline-block;
}
.home2-feature-section .feature-content-wrap .feature-content .video-and-content .video-area .icon {
position: relative;
}
.home2-feature-section .feature-content-wrap .feature-content .video-and-content .video-area .icon .video-circle {
stroke: var(--primary-color2);
fill: none;
transition: 0.5s;
}
@media (max-width: 576px) {
.home2-feature-section .feature-content-wrap .feature-content .video-and-content .video-area .icon .video-circle {
width: 68px;
}
}
.home2-feature-section .feature-content-wrap .feature-content .video-and-content .video-area .icon .video-circle .top-half {
stroke-dasharray: 430;
stroke-dashoffset: 320;
transition: stroke-dashoffset 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.home2-feature-section .feature-content-wrap .feature-content .video-and-content .video-area .icon .play-icon {
fill: var(--primary-color2);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-left: 2px;
}
@media (max-width: 576px) {
.home2-feature-section .feature-content-wrap .feature-content .video-and-content .video-area .icon .play-icon {
width: 20px;
}
}
.home2-feature-section .feature-content-wrap .feature-content .video-and-content .video-area:hover .icon .video-circle .top-half {
stroke-dashoffset: 0;
}
.home2-feature-section .feature-content-wrap .feature-content .video-and-content .content p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 32px;
margin-bottom: 0;
padding-left: 15px;
position: relative;
}
@media (max-width: 767px) {
.home2-feature-section .feature-content-wrap .feature-content .video-and-content .content p {
font-size: 15px;
}
}
@media (max-width: 576px) {
.home2-feature-section .feature-content-wrap .feature-content .video-and-content .content p {
padding-left: 0;
}
}
.home2-feature-section .feature-content-wrap .feature-content .video-and-content .content p::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 2px;
height: 77px;
background-color: rgba(var(--primary-color-opc), 0.3);
}
@media (max-width: 576px) {
.home2-feature-section .feature-content-wrap .feature-content .video-and-content .content p::before {
display: none;
}
}
.home2-feature-section .feature-content-wrap .feature-content .feature-list {
padding-top: 60px;
}
@media (max-width: 1399px) {
.home2-feature-section .feature-content-wrap .feature-content .feature-list {
padding-top: 50px;
}
}
@media (max-width: 767px) {
.home2-feature-section .feature-content-wrap .feature-content .feature-list {
padding-top: 30px;
}
}
.home2-feature-section .feature-content-wrap .feature-content .feature-list h6 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 18px;
font-weight: 500;
line-height: 1.7;
margin-bottom: 25px;
}
@media (max-width: 767px) {
.home2-feature-section .feature-content-wrap .feature-content .feature-list h6 {
margin-bottom: 15px;
}
}
.home2-feature-section .feature-content-wrap .feature-content .feature-list h6 span {
font-size: 16px;
font-weight: 400;
color: rgba(var(--title-color-opc), 0.5);
display: block;
}
.home2-feature-section .feature-content-wrap .feature-content .feature-list ul {
margin: 0;
list-style: none;
padding-left: 15px;
}
.home2-feature-section .feature-content-wrap .feature-content .feature-list ul li {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.8;
position: relative;
padding-left: 22px;
margin-bottom: 20px;
}
.home2-feature-section .feature-content-wrap .feature-content .feature-list ul li strong {
color: var(--title-color);
font-weight: 600;
}
.home2-feature-section .feature-content-wrap .feature-content .feature-list ul li:last-child {
margin-bottom: 0;
}
.home2-feature-section .feature-content-wrap .feature-content .feature-list ul li::before {
content: "";
position: absolute;
top: 8px;
left: 0;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(var(--primary-color-opc), 0.6);
} .home2-counter-section .single-countdown .number {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.home2-counter-section .single-countdown .number h2,
.home2-counter-section .single-countdown .number span {
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 2px var(--primary-color);
font-family: var(--font-kanit);
letter-spacing: 0.08em;
font-size: 110px;
font-weight: 800;
line-height: 1;
margin-bottom: 0;
}
@media (max-width: 1199px) {
.home2-counter-section .single-countdown .number h2,
.home2-counter-section .single-countdown .number span {
font-size: 100px;
}
}
@media (max-width: 991px) {
.home2-counter-section .single-countdown .number h2,
.home2-counter-section .single-countdown .number span {
font-size: 90px;
}
}
@media (max-width: 576px) {
.home2-counter-section .single-countdown .number h2,
.home2-counter-section .single-countdown .number span {
font-size: 80px;
}
}
.home2-counter-section .single-countdown span {
color: var(--paragraph-color);
font-family: var(--font-kanit);
font-size: 17px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.06em;
text-transform: uppercase;
}
@media (max-width: 1199px) {
.home2-counter-section .single-countdown span {
font-size: 16px;
}
} .home2-property-banner-section {
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%), url(//www.husetconstruction.com/wp-content/themes/vernex/assets/img/home2/home2-property-banner-bg.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
min-height: 800px;
position: relative;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home2-property-banner-section {
min-height: 700px;
}
}
@media (max-width: 1399px) {
.home2-property-banner-section {
min-height: 650px;
}
}
@media (max-width: 991px) {
.home2-property-banner-section {
min-height: 580px;
}
}
@media (max-width: 767px) {
.home2-property-banner-section {
min-height: 550px;
background-position: 67%;
}
}
.home2-property-banner-section .indivisual-item-list .single-item {
position: absolute;
bottom: 14%;
left: 8%;
background-color: var(--white-color);
border: 1px solid var(--primary-color);
padding: 5px 15px 5px 5px;
display: flex;
align-items: center;
gap: 12px;
transition: transform 0.7s ease;
transform-origin: center;
}
@media (max-width: 1799px) {
.home2-property-banner-section .indivisual-item-list .single-item {
left: 3%;
}
}
@media (max-width: 1399px) {
.home2-property-banner-section .indivisual-item-list .single-item {
bottom: 20%;
}
}
@media (max-width: 991px) {
.home2-property-banner-section .indivisual-item-list .single-item {
left: 10px;
bottom: 24%;
}
}
@media (max-width: 576px) {
.home2-property-banner-section .indivisual-item-list .single-item {
padding: 5px 10px 5px 5px;
}
}
@media (max-width: 767px) {
.home2-property-banner-section .indivisual-item-list .single-item:first-child {
display: none;
}
}
.home2-property-banner-section .indivisual-item-list .single-item:nth-child(2) {
bottom: 43%;
left: 30%;
}
@media (max-width: 991px) {
.home2-property-banner-section .indivisual-item-list .single-item:nth-child(2) {
bottom: 48%;
left: 20%;
}
}
@media (max-width: 767px) {
.home2-property-banner-section .indivisual-item-list .single-item:nth-child(2) {
left: 5%;
}
}
@media (max-width: 576px) {
.home2-property-banner-section .indivisual-item-list .single-item:nth-child(2) {
left: 5px;
}
}
.home2-property-banner-section .indivisual-item-list .single-item:nth-child(3) {
bottom: unset;
top: 10%;
left: 40%;
}
@media (max-width: 991px) {
.home2-property-banner-section .indivisual-item-list .single-item:nth-child(3) {
top: 7%;
left: 28%;
}
}
@media (max-width: 767px) {
.home2-property-banner-section .indivisual-item-list .single-item:nth-child(3) {
left: 8%;
}
}
@media (max-width: 576px) {
.home2-property-banner-section .indivisual-item-list .single-item:nth-child(3) {
left: 10px;
top: 10px;
}
}
.home2-property-banner-section .indivisual-item-list .single-item:nth-child(4) {
bottom: unset;
left: unset;
top: 8%;
right: 12%;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home2-property-banner-section .indivisual-item-list .single-item:nth-child(4) {
right: 6%;
}
}
@media (max-width: 1399px) {
.home2-property-banner-section .indivisual-item-list .single-item:nth-child(4) {
right: 6%;
}
}
@media (max-width: 991px) {
.home2-property-banner-section .indivisual-item-list .single-item:nth-child(4) {
right: 10px;
}
}
@media (max-width: 767px) {
.home2-property-banner-section .indivisual-item-list .single-item:nth-child(4) {
right: 5px;
}
}
@media (max-width: 576px) {
.home2-property-banner-section .indivisual-item-list .single-item:nth-child(4) {
top: 18%;
flex-direction: row-reverse;
padding: 5px 5px 5px 10px;
}
}
.home2-property-banner-section .indivisual-item-list .single-item:last-child {
left: unset;
bottom: 8%;
right: 28%;
}
@media (max-width: 767px) {
.home2-property-banner-section .indivisual-item-list .single-item:last-child {
right: 40%;
}
}
@media (max-width: 576px) {
.home2-property-banner-section .indivisual-item-list .single-item:last-child {
right: 45%;
bottom: 12%;
}
}
.home2-property-banner-section .indivisual-item-list .single-item .content {
line-height: 1;
}
.home2-property-banner-section .indivisual-item-list .single-item .content h6 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 13px;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 0;
}
.home2-property-banner-section .indivisual-item-list .single-item .content span {
color: rgba(var(--title-color-opc), 0.5);
font-family: var(--font-kanit);
font-size: 12px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.03em;
}
.home2-property-banner-section .indivisual-item-list .single-item:hover {
transform: scale(1.2);
}
@keyframes zoom-In {
0% {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}
.home2-property-banner-section .primary-btn2 {
position: absolute;
bottom: 0;
right: 0;
} .property-card .property-img-wrap {
position: relative;
margin-bottom: 20px;
}
.property-card .property-img-wrap .property-img {
position: relative;
overflow: hidden;
display: block;
transition: all 0.5s ease-out;
}
.property-card .property-img-wrap .property-img img {
transition: all 0.5s ease-out;
}
.property-card .property-img-wrap .property-img::after {
position: absolute;
width: 200%;
height: 0%;
left: 50%;
top: 50%;
background-color: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%) rotate(-45deg);
content: "";
z-index: 1;
}
.property-card .property-img-wrap .price {
position: absolute;
top: 0;
right: 0;
z-index: 2;
}
.property-card .property-img-wrap .price span {
color: var(--white-color);
font-family: var(--font-kanit);
font-size: 16px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.06em;
padding: 11px 22px;
background-color: var(--primary-color);
display: inline-block;
}
@media (min-width: 992px) and (max-width: 1199px) {
.property-card .property-img-wrap .price span {
padding: 10px 18px;
font-size: 15px;
}
}
.property-card .property-content ul {
padding: 0;
margin: 0;
list-style: none;
padding-bottom: 15px;
border-bottom: 1px solid rgba(var(--primary-color-opc), 0.08);
display: flex;
align-items: center;
justify-content: space-between;
gap: 45px;
margin-bottom: 15px;
}
@media (max-width: 1399px) {
.property-card .property-content ul {
gap: 25px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.property-card .property-content ul {
gap: 15px;
margin-bottom: 10px;
}
}
@media (max-width: 576px) {
.property-card .property-content ul {
gap: 20px;
}
}
.property-card .property-content ul li {
color: var(--paragraph-color);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.06em;
padding-right: 45px;
position: relative;
}
@media (max-width: 1399px) {
.property-card .property-content ul li {
padding-right: 30px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.property-card .property-content ul li {
padding-right: 15px;
font-size: 13px;
}
}
@media (max-width: 991px) {
.property-card .property-content ul li {
padding-right: 25px;
}
}
@media (max-width: 576px) {
.property-card .property-content ul li {
padding-right: 0;
}
}
.property-card .property-content ul li:last-child {
padding-right: 0;
}
.property-card .property-content ul li:last-child::after {
display: none;
}
.property-card .property-content ul li::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
width: 1px;
height: 11px;
background-color: rgba(var(--primary-color2-opc), 0.3);
}
@media (max-width: 767px) {
.property-card .property-content ul li::after {
display: none;
}
}
.property-card .property-content h5 {
margin-bottom: 25px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.property-card .property-content h5 {
margin-bottom: 20px;
}
}
.property-card .property-content h5 a {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 23px;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.04em;
transition: 0.5s;
}
@media (min-width: 992px) and (max-width: 1199px) {
.property-card .property-content h5 a {
font-size: 20px;
}
}
@media (max-width: 576px) {
.property-card .property-content h5 a {
font-size: 22px;
}
}
.property-card .property-content h5 a:hover {
color: var(--primary-color2);
}
.property-card:hover .property-img-wrap .property-img img {
transform: scale(1.1);
}
.property-card:hover .property-img-wrap .property-img::after {
height: 250%;
transition: all 600ms linear;
background-color: transparent;
} .home2-testimonial-section {
background-color: #EFF3F6;
padding: 110px 0;
}
@media (max-width: 1199px) {
.home2-testimonial-section {
padding: 90px 0;
}
}
@media (max-width: 767px) {
.home2-testimonial-section {
padding: 70px 0;
}
}
.home2-testimonial-section .section-title {
max-width: 685px;
width: 100%;
}
@media (max-width: 1399px) {
.home2-testimonial-section .section-title {
max-width: 660px;
}
}
.home2-testimonial-section .testimonial-left-content .rating-area {
padding: 0;
margin: 0;
list-style: none;
padding: 22px 30px;
background-color: #F9F3EE;
border: 1px solid rgba(var(--primary-color-opc), 0.1);
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
margin-bottom: 10px;
position: relative;
}
@media (max-width: 1399px) {
.home2-testimonial-section .testimonial-left-content .rating-area {
padding: 22px 15px;
gap: 20px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home2-testimonial-section .testimonial-left-content .rating-area {
flex-wrap: wrap;
gap: 20px;
}
}
@media (max-width: 576px) {
.home2-testimonial-section .testimonial-left-content .rating-area {
flex-wrap: wrap;
gap: 25px;
justify-content: center;
}
}
.home2-testimonial-section .testimonial-left-content .rating-area::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(var(--primary-color2-opc), 0.2);
width: 1px;
height: 35px;
}
@media (max-width: 576px) {
.home2-testimonial-section .testimonial-left-content .rating-area::before {
display: none;
}
}
.home2-testimonial-section .testimonial-left-content .rating-area > li .single-rating {
display: flex;
gap: 8px;
}
.home2-testimonial-section .testimonial-left-content .rating-area > li .single-rating .review {
line-height: 1;
}
.home2-testimonial-section .testimonial-left-content .rating-area > li .single-rating .review span {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 14px;
font-weight: 600;
line-height: 1;
margin-bottom: 8px;
display: block;
white-space: nowrap;
}
@media (max-width: 1699px) {
.home2-testimonial-section .testimonial-left-content .rating-area > li .single-rating .review span {
font-size: 13px;
}
}
.home2-testimonial-section .testimonial-left-content .rating-area > li .single-rating .review img {
width: 64px;
}
.home2-testimonial-section .testimonial-left-content .rating-area > li .single-rating .rating {
line-height: 1;
margin-top: -1px;
}
.home2-testimonial-section .testimonial-left-content .rating-area > li .single-rating .rating .star {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 9px;
line-height: 1;
}
.home2-testimonial-section .testimonial-left-content .rating-area > li .single-rating .rating .star li i {
color: #E62415;
font-size: 12px;
}
.home2-testimonial-section .testimonial-left-content .rating-area > li .single-rating .rating span {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 14px;
font-weight: 400;
line-height: 1;
white-space: nowrap;
}
@media (max-width: 1699px) {
.home2-testimonial-section .testimonial-left-content .rating-area > li .single-rating .rating span {
font-size: 13px;
}
}
.home2-testimonial-section .testimonial-left-content .rating-area > li .single-rating.google .rating .star li i {
color: #FFC107;
}
.home2-testimonial-section .testimonial-left-content .rating-area > li:first-child::before {
display: none;
}
.home2-testimonial-section .testimonial-left-content .slider-btn-area {
padding: 68px 25px 40px;
background-color: var(--white-color);
text-align: center;
}
@media (max-width: 991px) {
.home2-testimonial-section .testimonial-left-content .slider-btn-area {
padding: 55px 25px;
}
}
@media (max-width: 767px) {
.home2-testimonial-section .testimonial-left-content .slider-btn-area {
padding: 45px 25px;
}
}
@media (max-width: 576px) {
.home2-testimonial-section .testimonial-left-content .slider-btn-area {
padding: 30px 20px;
}
}
.home2-testimonial-section .testimonial-left-content .slider-btn-area h4 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 25px;
font-weight: 400;
line-height: 1.3;
letter-spacing: 0.05em;
margin-bottom: 55px;
}
@media (max-width: 1399px) {
.home2-testimonial-section .testimonial-left-content .slider-btn-area h4 {
font-size: 23px;
}
}
@media (max-width: 767px) {
.home2-testimonial-section .testimonial-left-content .slider-btn-area h4 {
margin-bottom: 40px;
}
}
@media (max-width: 576px) {
.home2-testimonial-section .testimonial-left-content .slider-btn-area h4 {
font-size: 22px;
margin-bottom: 35px;
}
}
.home2-testimonial-section .testimonial-left-content .slider-btn-area .slider-btn-grp {
justify-content: center;
}
.home2-testimonial-section .testimonial-left-content .slider-btn-area .slider-btn-grp .slider-btn {
min-width: 35px;
max-width: 35px;
height: 35px;
}
.home2-testimonial-section .testimonial-left-content .slider-btn-area .slider-btn-grp .slider-btn i {
font-size: 18px;
}
.home2-testimonial-section .testimonial-slider-area {
padding-left: 50px;
}
@media (max-width: 1399px) {
.home2-testimonial-section .testimonial-slider-area {
padding-left: 30px;
}
}
@media (max-width: 1199px) {
.home2-testimonial-section .testimonial-slider-area {
padding-left: 0;
}
}
.home2-testimonial-section .testimonial-slider-area .contact-btn-area {
display: flex;
align-items: center;
gap: 15px;
justify-content: end;
margin-top: -50px;
position: relative;
z-index: 1;
}
@media (max-width: 576px) {
.home2-testimonial-section .testimonial-slider-area .contact-btn-area {
margin-top: 25px;
justify-content: start;
}
.home2-testimonial-section .testimonial-slider-area .contact-btn-area img {
display: none;
}
}
.home2-testimonial-section .testimonial-slider-area .home1-testimonial-slider .swiper-slide-active span,
.home2-testimonial-section .testimonial-slider-area .home1-testimonial-slider .swiper-slide-active p {
animation: fadeInDown 1.7s;
}
.home2-testimonial-section .testimonial-slider-area .home1-testimonial-slider .swiper-slide-active .author-area {
animation: fadeInUp 1.7s;
} .home2-award-section .award-wrap,
.home2-award-section .award-wrap2 {
position: relative;
}
.home2-award-section .award-wrap .single-award,
.home2-award-section .award-wrap2 .single-award {
transition: 0.5s;
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
padding: 35px 50px;
border-bottom: 1px solid rgba(var(--title-color-opc), 0.1);
}
.home2-award-section .award-wrap .single-award:first-child,
.home2-award-section .award-wrap2 .single-award:first-child {
border-top: 1px solid rgba(var(--title-color-opc), 0.1);
}
@media (max-width: 1399px) {
.home2-award-section .award-wrap .single-award,
.home2-award-section .award-wrap2 .single-award {
padding: 35px 30px;
}
}
@media (max-width: 1199px) {
.home2-award-section .award-wrap .single-award,
.home2-award-section .award-wrap2 .single-award {
grid-template-columns: 37% 37% 26%;
}
}
@media (max-width: 991px) {
.home2-award-section .award-wrap .single-award,
.home2-award-section .award-wrap2 .single-award {
padding: 35px 20px;
grid-template-columns: 39% 39% 22%;
}
}
@media (max-width: 767px) {
.home2-award-section .award-wrap .single-award,
.home2-award-section .award-wrap2 .single-award {
padding: 25px 0;
grid-template-columns: 41% 41% 18%;
}
}
@media (max-width: 576px) {
.home2-award-section .award-wrap .single-award,
.home2-award-section .award-wrap2 .single-award {
display: block;
}
}
.home2-award-section .award-wrap .single-award .award-img,
.home2-award-section .award-wrap2 .single-award .award-img {
width: 270px;
height: 310px;
position: absolute;
top: -150px;
left: 0;
opacity: 0;
transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
border-radius: 5px;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
@media (max-width: 767px) {
.home2-award-section .award-wrap .single-award .award-img,
.home2-award-section .award-wrap2 .single-award .award-img {
width: 190px;
height: 215px;
top: -50px;
}
}
@media (max-width: 576px) {
.home2-award-section .award-wrap .single-award .award-img,
.home2-award-section .award-wrap2 .single-award .award-img {
display: none;
visibility: hidden;
}
}
.home2-award-section .award-wrap .single-award .title h5,
.home2-award-section .award-wrap2 .single-award .title h5 {
color: var(--title-color);
font-family: var(--font-inter);
font-size: 22px;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.02em;
text-transform: uppercase;
margin-bottom: 0;
}
@media (max-width: 991px) {
.home2-award-section .award-wrap .single-award .title h5,
.home2-award-section .award-wrap2 .single-award .title h5 {
font-size: 20px;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.home2-award-section .award-wrap .single-award .title h5,
.home2-award-section .award-wrap2 .single-award .title h5 {
font-size: 18px;
}
}
@media (max-width: 576px) {
.home2-award-section .award-wrap .single-award .title h5,
.home2-award-section .award-wrap2 .single-award .title h5 {
margin-bottom: 10px;
font-size: 18px;
}
}
.home2-award-section .award-wrap .single-award .date,
.home2-award-section .award-wrap2 .single-award .date {
color: var(--title-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.02em;
text-align: center;
}
.home2-award-section .award-wrap .single-award .dot,
.home2-award-section .award-wrap2 .single-award .dot {
width: 25px;
height: 25px;
border-radius: 50%;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
transition: 0.5s;
position: relative;
z-index: 1;
margin-left: auto;
}
@media (max-width: 576px) {
.home2-award-section .award-wrap .single-award .dot,
.home2-award-section .award-wrap2 .single-award .dot {
display: none;
}
}
.home2-award-section .award-wrap .single-award .dot:after,
.home2-award-section .award-wrap2 .single-award .dot:after {
content: "";
height: 10px;
width: 10px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: -1;
background-color: var(--title-color);
transition: 0.5s;
}
.home2-award-section .award-wrap .single-award:hover .award-img,
.home2-award-section .award-wrap2 .single-award:hover .award-img {
opacity: 1;
}
.home2-award-section .award-wrap .single-award:hover .dot::after,
.home2-award-section .award-wrap2 .single-award:hover .dot::after {
width: 100%;
height: 100%;
}
.home2-award-section.two {
padding: 100px 0;
background-color: #F4F6FC;
}
@media (max-width: 1199px) {
.home2-award-section.two {
padding: 90px 0;
}
}
@media (max-width: 767px) {
.home2-award-section.two {
padding: 70px 0;
}
}
.home2-award-section.two .award-wrap2 .single-award .award-img {
width: unset;
height: unset;
-webkit-mask-image: url(//www.husetconstruction.com/wp-content/themes/vernex/assets/img/home6/award-img-bg.png);
mask-image: url(//www.husetconstruction.com/wp-content/themes/vernex/assets/img/home6/award-img-bg.png);
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
@media (max-width: 767px) {
.home2-award-section.two .award-wrap2 .single-award .award-img {
width: 195px;
height: 195px;
top: -50px;
}
}
@media (max-width: 576px) {
.home2-award-section.two .award-wrap2 .single-award .award-img {
display: none;
visibility: hidden;
}
}
.home2-award-section.two .award-wrap2 .single-award .award-img img {
width: 250px;
height: 250px;
}
@media (max-width: 991px) {
.home2-award-section.two .award-wrap2 .single-award .award-img img {
width: 220px;
height: 220px;
}
} .home2-team-section {
background-color: var(--primary-color);
padding: 120px 11%;
}
@media (max-width: 1799px) {
.home2-team-section {
padding: 120px 9%;
}
}
@media (max-width: 1699px) {
.home2-team-section {
padding: 120px 7%;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home2-team-section {
padding: 120px 5%;
}
}
@media (max-width: 1399px) {
.home2-team-section {
padding: 120px 3%;
}
}
@media (max-width: 1199px) {
.home2-team-section {
padding: 90px 3%;
}
}
@media (max-width: 991px) {
.home2-team-section {
padding: 90px 2%;
}
}
.home2-team-section .team-title-area {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
gap: 20px;
padding: 50px 0;
}
@media (max-width: 1199px) {
.home2-team-section .team-title-area {
padding: 0;
flex-direction: row;
margin-bottom: 50px;
}
}
@media (max-width: 576px) {
.home2-team-section .team-title-area {
flex-wrap: wrap;
margin-bottom: 40px;
gap: 10px;
}
}
.home2-team-section .team-title-area .contact-btn {
position: relative;
display: inline-block;
}
.home2-team-section .team-title-area .contact-btn .bg svg {
fill: rgba(18, 18, 18, 0.2);
stroke: rgba(255, 255, 255, 0.2);
transition: 0.5s;
}
.home2-team-section .team-title-area .contact-btn .primary-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
}
.home2-team-section .team-title-area .contact-btn:hover .bg svg {
fill: var(--white-color);
stroke: var(--white-color);
transition: 0.5s;
}
.home2-team-section .team-title-area .contact-btn:hover .primary-btn {
--background-size: 0%;
--stroke-dashoffset: 26;
--stroke-duration: .3s;
--stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
--stroke-delay: .195s;
background-image: linear-gradient(0deg, var(--title-color) 0%, var(--title-color) 100%);
color: var(--title-color);
}
.home2-team-section .team-title-area .contact-btn:hover .primary-btn::after {
opacity: 0;
transition-delay: 0s;
color: var(--title-color);
}
.home2-team-section .team-title-area .contact-btn:hover .primary-btn svg {
stroke: var(--title-color);
}
.home2-team-section .pb-35 {
padding-bottom: 35px;
}
@media (max-width: 767px) {
.home2-team-section .pb-35 {
padding-bottom: 0;
}
}
.home2-team-section .pt-35 {
padding-top: 35px;
}
@media (max-width: 767px) {
.home2-team-section .pt-35 {
padding-top: 0;
}
}
.home2-team-section .team-divider {
position: relative;
}
.home2-team-section .team-divider::after {
content: "";
position: absolute;
height: 100%;
width: 1px;
background-color: rgba(255, 255, 255, 0.1);
right: 0;
top: 0;
}
@media (max-width: 767px) {
.home2-team-section .team-divider::after {
display: none;
}
}
.home2-team-section .team-border {
position: relative;
}
.home2-team-section .team-border::after {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 2px;
background-color: rgba(255, 255, 255, 0.1);
}
@media (max-width: 767px) {
.home2-team-section .team-border::after {
display: none;
}
}
.home2-team-section .team-card2 .team-img {
width: 210px;
height: 210px;
border-radius: 50%;
position: relative;
margin: 0 auto;
}
@media (min-width: 768px) and (max-width: 991px) {
.home2-team-section .team-card2 .team-img {
width: 190px;
height: 190px;
}
}
.home2-team-section .team-card2 .team-img img {
width: 210px;
height: 210px;
border-radius: 50%;
}
@media (min-width: 768px) and (max-width: 991px) {
.home2-team-section .team-card2 .team-img img {
width: 190px;
height: 190px;
}
}
.home2-team-section .team-card2 .team-img .overlay {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
transform: scale(0.4);
opacity: 0;
transition: all 0.35s ease-out;
}
.home2-team-section .team-card2 .team-img .overlay .social-area {
border: 1px solid var(--primary-color);
background-color: var(--white-color);
border-radius: 50px;
display: inline-flex;
align-items: center;
transition: 0.5s;
position: relative;
overflow: hidden;
z-index: 1;
}
.home2-team-section .team-card2 .team-img .overlay .social-area::after {
position: absolute;
content: "";
border-radius: 30px;
width: 100%;
height: 100%;
top: 0;
right: 0;
background-color: var(--primary-color);
transform-origin: right;
transform: scalex(0);
z-index: -1;
transition: transform 0.7s;
}
.home2-team-section .team-card2 .team-img .overlay .social-area .icon {
padding: 0 7px;
}
.home2-team-section .team-card2 .team-img .overlay .social-area .icon span {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
transition: 0.5s;
}
.home2-team-section .team-card2 .team-img .overlay .social-area .icon span i {
color: var(--white-color);
font-size: 12px;
transition: 0.5s;
}
.home2-team-section .team-card2 .team-img .overlay .social-area > span {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.03em;
display: block;
padding: 10px 17px;
border-left: 1px solid var(--primary-color);
transition: 0.5s;
}
.home2-team-section .team-card2 .team-img .overlay .social-area:hover {
border-color: var(--white-color);
}
.home2-team-section .team-card2 .team-img .overlay .social-area:hover::after {
transform: scalex(1);
transform-origin: left;
}
.home2-team-section .team-card2 .team-img .overlay .social-area:hover .icon span {
background-color: var(--white-color);
}
.home2-team-section .team-card2 .team-img .overlay .social-area:hover .icon span i {
color: var(--title-color);
}
.home2-team-section .team-card2 .team-img .overlay .social-area:hover > span {
color: var(--white-color);
border-color: var(--white-color);
}
.home2-team-section .team-card2 .team-content {
padding-top: 20px;
text-align: center;
}
.home2-team-section .team-card2 .team-content span {
color: rgba(255, 255, 255, 0.6);
font-family: var(--font-inter);
font-size: 14px;
font-weight: 400;
line-height: 1.6;
display: block;
margin-bottom: 3px;
}
.home2-team-section .team-card2 .team-content h5 {
color: var(--white-color);
font-family: Kanit;
font-size: 22px;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.03em;
margin-bottom: 0;
}
.home2-team-section .team-card2:hover .team-img .overlay {
transform: scale(1);
opacity: 1;
} .home2-calculate-section .contact-btn {
min-width: 146px;
max-width: 146px;
height: 146px;
border-radius: 50%;
border: 1px solid rgba(var(--primary-color-opc), 0.1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
transition: 0.9s;
}
.home2-calculate-section .contact-btn svg {
fill: var(--title-color);
margin-bottom: 10px;
transition: 0.5s;
}
.home2-calculate-section .contact-btn span {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 16px;
font-weight: 400;
line-height: 23.92px;
letter-spacing: 0.05em;
transition: 0.5s;
}
.home2-calculate-section .contact-btn:hover {
box-shadow: inset 0 0 0 10em var(--primary-color);
}
.home2-calculate-section .contact-btn:hover svg {
fill: var(--white-color);
}
.home2-calculate-section .contact-btn:hover span {
color: var(--white-color);
}
.home2-calculate-section .progress-bar-area {
padding: 0;
margin: 0;
list-style: none;
}
.home2-calculate-section .progress-bar-area .single-progress {
margin-bottom: 55px;
}
@media (max-width: 991px) {
.home2-calculate-section .progress-bar-area .single-progress {
margin-bottom: 45px;
}
}
@media (max-width: 576px) {
.home2-calculate-section .progress-bar-area .single-progress {
margin-bottom: 40px;
}
}
.home2-calculate-section .progress-bar-area .single-progress:last-child {
margin-bottom: 0;
}
.home2-calculate-section .progress-bar-area .single-progress .title-area {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 30px;
}
.home2-calculate-section .progress-bar-area .single-progress .title-area h6 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 16px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.05em;
margin-bottom: 0;
}
.home2-calculate-section .progress-bar-area .single-progress .title-area span {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 16px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.05em;
}
@media (max-width: 576px) {
.home2-calculate-section .progress-bar-area .single-progress .title-area span {
font-size: 15px;
}
}
.home2-calculate-section .progress-bar-area .single-progress .progress {
height: 2px;
background-color: rgba(var(--primary-color-opc), 0.2);
overflow: visible;
}
.home2-calculate-section .progress-bar-area .single-progress .progress .progress-bar {
height: 2px;
background-color: var(--primary-color);
position: relative;
overflow: visible;
}
.home2-calculate-section .progress-bar-area .single-progress .progress .progress-bar::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--primary-color);
z-index: 1;
}
.home2-calculate-section .mini-statement-area {
padding: 50px;
background-color: rgba(var(--primary-color2-opc), 0.05);
}
@media (max-width: 1399px) {
.home2-calculate-section .mini-statement-area {
padding: 50px 30px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home2-calculate-section .mini-statement-area {
padding: 40px 15px;
}
}
@media (max-width: 767px) {
.home2-calculate-section .mini-statement-area {
padding: 40px 20px;
}
}
.home2-calculate-section .mini-statement-area .logo {
text-align: center;
margin-bottom: 50px;
}
@media (max-width: 576px) {
.home2-calculate-section .mini-statement-area .logo {
margin-bottom: 40px;
}
}
.home2-calculate-section .mini-statement-area .content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 60px;
}
@media (max-width: 767px) {
.home2-calculate-section .mini-statement-area .content {
margin-bottom: 50px;
}
}
@media (max-width: 576px) {
.home2-calculate-section .mini-statement-area .content {
flex-wrap: wrap;
margin-bottom: 40px;
}
}
.home2-calculate-section .mini-statement-area .content .price-area h4 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 25px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.06em;
margin-bottom: 5px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.home2-calculate-section .mini-statement-area .content .price-area h4 {
font-size: 23px;
}
}
.home2-calculate-section .mini-statement-area .content .price-area span {
color: var(--paragraph-color);
font-family: var(--font-kanit);
font-size: 17px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.06em;
}
@media (min-width: 992px) and (max-width: 1199px) {
.home2-calculate-section .mini-statement-area .content .price-area span {
font-size: 16px;
}
}
.home2-calculate-section .mini-statement-area .content p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 14px;
font-weight: 400;
line-height: 1.9;
margin-bottom: 0;
max-width: 336px;
width: 100%;
padding-left: 45px;
position: relative;
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home2-calculate-section .mini-statement-area .content p {
padding-left: 30px;
max-width: 290px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home2-calculate-section .mini-statement-area .content p {
padding-left: 15px;
max-width: 265px;
}
}
@media (max-width: 767px) {
.home2-calculate-section .mini-statement-area .content p {
padding-left: 20px;
max-width: 270px;
}
}
@media (max-width: 576px) {
.home2-calculate-section .mini-statement-area .content p {
padding-left: 0;
}
}
.home2-calculate-section .mini-statement-area .content p::before {
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 1px;
height: 95%;
background-color: #D9D9D9;
}
@media (max-width: 576px) {
.home2-calculate-section .mini-statement-area .content p::before {
display: none;
}
}
.home2-calculate-section .mini-statement-area .primary-btn2 {
width: 100%;
text-align: center;
} .home2-contact-section {
padding: 150px 0;
background-color: #F6F6F6;
position: relative;
z-index: 1;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home2-contact-section {
padding: 130px 0;
}
}
@media (max-width: 1399px) {
.home2-contact-section {
padding: 130px 0;
}
}
@media (max-width: 1199px) {
.home2-contact-section {
padding: 110px 0;
}
}
@media (max-width: 767px) {
.home2-contact-section {
padding: 90px 0;
}
}
.home2-contact-section .contact-form .form-inner input {
background-color: transparent;
border: unset;
border-bottom: 1px solid rgba(var(--primary-color-opc), 0.15);
padding: 10px 12px;
height: unset;
border-radius: unset;
}
.home2-contact-section .contact-form button {
margin-top: 60px;
}
@media (max-width: 991px) {
.home2-contact-section .contact-form button {
margin-top: 50px;
}
}
@media (max-width: 767px) {
.home2-contact-section .contact-form button {
margin-top: 40px;
}
}
@media (max-width: 576px) {
.home2-contact-section .contact-form button {
margin-top: 30px;
}
}
.home2-contact-section .vector1 {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
z-index: -1;
}
@media (max-width: 1399px) {
.home2-contact-section .vector1 {
width: 350px;
}
}
@media (max-width: 1199px) {
.home2-contact-section .vector1 {
width: 300px;
}
}
@media (max-width: 991px) {
.home2-contact-section .vector1 {
display: none;
}
}
.home2-contact-section .vector2 {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
z-index: -1;
}
@media (max-width: 1399px) {
.home2-contact-section .vector2 {
width: 350px;
}
}
@media (max-width: 1199px) {
.home2-contact-section .vector2 {
width: 300px;
}
}
@media (max-width: 991px) {
.home2-contact-section .vector2 {
display: none;
}
} .home2-blog-section .home2-blog-slider .swiper-slide:nth-child(even) {
padding-top: 20px;
}
@media (max-width: 991px) {
.home2-blog-section .home2-blog-slider .swiper-slide:nth-child(even) {
padding-top: 0;
}
}
.pagination-area .pagination {
position: relative;
display: inline-flex;
align-items: center;
width: unset;
z-index: 9;
bottom: unset;
gap: 8px;
}
@media (max-width: 576px) {
.pagination-area .pagination {
justify-content: center;
gap: 6px;
}
}
.pagination-area .pagination .swiper-pagination-bullet {
height: 12px;
width: 12px;
background-color: transparent;
border: 1px solid rgba(63, 68, 75, 0.6);
opacity: 1;
position: relative;
}
.pagination-area .pagination .swiper-pagination-bullet::after {
content: "";
height: 6px;
width: 6px;
border-radius: 50%;
background-color: rgba(63, 68, 75, 0.4);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.pagination-area .pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
border-color: var(--primary-color);
height: 16px;
width: 16px;
}
.pagination-area .pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
width: 8px;
height: 8px;
background-color: var(--primary-color);
} .home2-scroll-text-section {
padding: 40px 0;
background-color: var(--primary-color);
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
display: flex;
gap: 25px;
}
@media (max-width: 767px) {
.home2-scroll-text-section {
padding: 35px 0;
}
}
.home2-scroll-text-section .scroll-text {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-around;
gap: 25px;
min-width: 100%;
animation: scroll-x 30s linear infinite;
}
.home2-scroll-text-section .scroll-text h6 {
color: rgba(255, 255, 255, 0.8);
font-family: var(--font-inter);
font-style: italic;
font-size: 18px;
font-weight: 400;
letter-spacing: 1.2px;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
margin-bottom: 0;
}
.home2-scroll-text-section .scroll-text svg {
fill: var(--white-color);
}
@keyframes scroll-x {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
.home2-scroll-text-section.two {
background-color: transparent;
border-bottom: 1px solid rgba(var(--primary-color-opc), 0.1);
padding: 28px 0;
}
@media (max-width: 576px) {
.home2-scroll-text-section.two {
padding: 20px 0;
}
}
.home2-scroll-text-section.two .scroll-text h6 {
color: rgba(var(--primary-color-opc), 0.8);
}
@media (max-width: 576px) {
.home2-scroll-text-section.two .scroll-text h6 {
font-size: 16px;
}
}
.home2-scroll-text-section.two .scroll-text svg {
fill: var(--primary-color);
} .home3-banner-section {
display: flex;
overflow: hidden;
}
.home3-banner-section .social-list {
padding: 0;
margin: 0;
list-style: none;
padding: 40px 40px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 60px;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home3-banner-section .social-list {
padding: 40px 25px;
}
}
@media (max-width: 1399px) {
.home3-banner-section .social-list {
padding: 40px 20px;
}
}
@media (max-width: 1199px) {
.home3-banner-section .social-list {
padding: 40px 10px;
}
}
@media (max-width: 991px) {
.home3-banner-section .social-list {
display: none;
}
}
.home3-banner-section .social-list li {
position: relative;
}
.home3-banner-section .social-list li:last-child::before {
display: none;
}
.home3-banner-section .social-list li::before {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -30px;
width: 3px;
height: 3px;
border-radius: 50%;
background-color: rgba(var(--primary-color-opc), 0.2);
}
.home3-banner-section .social-list li a {
color: rgba(var(--primary-color-opc), 0.5);
transition: 0.5s;
}
.home3-banner-section .social-list li a i {
font-size: 20px;
}
.home3-banner-section .social-list li a i.bi-twitter-x {
font-size: 16px;
}
.home3-banner-section .social-list li a:hover {
color: var(--primary-color);
}
.home3-banner-section .banner-wrapper {
background-image: url(//www.husetconstruction.com/wp-content/themes/vernex/assets/img/home3/hom3-banner-bg.png), linear-gradient(180deg, #A1C5D3 10.56%, rgba(70, 118, 137, 0) 81.08%);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
min-height: 90vh;
width: 100%;
}
@media (max-width: 991px) {
.home3-banner-section .banner-wrapper {
min-height: unset;
}
}
@media (max-width: 767px) {
.home3-banner-section .banner-wrapper {
background-position: left;
}
}
.home3-banner-section .banner-wrapper .banner-content-and-logo {
padding: 100px 70px;
display: flex;
justify-content: space-between;
gap: 20px;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home3-banner-section .banner-wrapper .banner-content-and-logo {
padding: 80px 50px;
}
}
@media (max-width: 1399px) {
.home3-banner-section .banner-wrapper .banner-content-and-logo {
padding: 80px 50px;
}
}
@media (max-width: 1199px) {
.home3-banner-section .banner-wrapper .banner-content-and-logo {
padding: 80px 40px;
}
}
@media (max-width: 991px) {
.home3-banner-section .banner-wrapper .banner-content-and-logo {
padding: 70px 25px;
flex-wrap: wrap;
gap: 40px;
}
}
@media (max-width: 767px) {
.home3-banner-section .banner-wrapper .banner-content-and-logo {
flex-wrap: wrap;
gap: 30px;
padding: 70px 20px;
}
}
@media (max-width: 576px) {
.home3-banner-section .banner-wrapper .banner-content-and-logo {
padding: 60px 10px;
}
}
.home3-banner-section .banner-wrapper .banner-content-and-logo .banner-content {
max-width: 990px;
width: 100%;
}
.home3-banner-section .banner-wrapper .banner-content-and-logo .banner-content h1 {
color: var(--white-color);
font-family: var(--font-kanit);
font-size: 90px;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.03em;
margin-bottom: 50px;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home3-banner-section .banner-wrapper .banner-content-and-logo .banner-content h1 {
font-size: 80px;
}
}
@media (max-width: 1399px) {
.home3-banner-section .banner-wrapper .banner-content-and-logo .banner-content h1 {
font-size: 70px;
}
}
@media (max-width: 1199px) {
.home3-banner-section .banner-wrapper .banner-content-and-logo .banner-content h1 {
font-size: 63px;
line-height: 1.1;
}
}
@media (max-width: 991px) {
.home3-banner-section .banner-wrapper .banner-content-and-logo .banner-content h1 {
margin-bottom: 30px;
}
}
@media (max-width: 767px) {
.home3-banner-section .banner-wrapper .banner-content-and-logo .banner-content h1 {
font-size: 50px;
margin-bottom: 30px;
}
}
@media (max-width: 576px) {
.home3-banner-section .banner-wrapper .banner-content-and-logo .banner-content h1 {
font-size: 48px;
}
}
@media (max-width: 767px) {
.home3-banner-section .banner-wrapper .banner-content-and-logo .banner-logo img {
width: 180px;
}
}
@media (max-width: 576px) {
.home3-banner-section .banner-wrapper .banner-content-and-logo .banner-logo img {
width: 160px;
}
}
.home3-banner-video-area {
max-width: 1170px;
width: 100%;
margin-left: auto;
border-radius: 120px 0 0 0;
overflow: hidden;
position: relative;
margin-top: -20%;
margin-bottom: 120px;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home3-banner-video-area {
max-width: 1000px;
margin-top: -18%;
}
}
@media (max-width: 1399px) {
.home3-banner-video-area {
max-width: 850px;
margin-top: -15%;
}
}
@media (max-width: 1199px) {
.home3-banner-video-area {
max-width: 680px;
margin-top: -24%;
}
}
@media (max-width: 991px) {
.home3-banner-video-area {
max-width: unset;
border-radius: 0;
margin-top: 0;
}
}
.home3-banner-video-area .video-wrapper {
position: relative;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home3-banner-video-area .video-wrapper {
max-height: 550px;
}
}
@media (max-width: 1399px) {
.home3-banner-video-area .video-wrapper {
max-height: 480px;
}
}
.home3-banner-video-area .video-wrapper img {
border-radius: 120px 0 0 0;
max-height: 650px;
width: 100%;
}
@media (max-width: 991px) {
.home3-banner-video-area .video-wrapper img {
border-radius: 0;
}
}
@media (max-width: 576px) {
.home3-banner-video-area .video-wrapper img {
min-height: 350px;
-o-object-fit: cover;
object-fit: cover;
}
}
.home3-banner-video-area .video-wrapper::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(var(--primary-color-opc), 0.25);
border-radius: 120px 0 0 0;
}
@media (max-width: 991px) {
.home3-banner-video-area .video-wrapper::before {
border-radius: 0;
}
}
.home3-banner-video-area .play-btn {
cursor: pointer;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.home3-banner-video-area .play-btn .icon {
position: relative;
}
.home3-banner-video-area .play-btn .icon .video-circle {
stroke: var(--white-color);
fill: none;
transition: 0.5s;
}
@media (max-width: 767px) {
.home3-banner-video-area .play-btn .icon .video-circle {
width: 65px;
}
}
.home3-banner-video-area .play-btn .icon .video-circle .top-half {
stroke-dasharray: 430;
stroke-dashoffset: 320;
transition: stroke-dashoffset 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.home3-banner-video-area .play-btn .icon .play-icon {
fill: var(--white-color);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-left: 2px;
}
@media (max-width: 767px) {
.home3-banner-video-area .play-btn .icon .play-icon {
width: 20px;
}
}
.home3-banner-video-area .play-btn:hover .icon .video-circle .top-half {
stroke-dashoffset: 0;
} .home3-service-section .service-list {
padding: 0;
margin: 0;
list-style: none;
overflow: hidden;
}
.home3-service-section .service-list .single-service {
padding: 51px 0;
border-bottom: 1px solid rgba(var(--primary-color-opc), 0.2);
background: linear-gradient(to bottom, var(--primary-color) 0%, var(--primary-color) 98%);
background-size: 0;
background-repeat: no-repeat;
background-position: left 100%;
transition: background-size 0.8s;
}
@media (max-width: 1399px) {
.home3-service-section .service-list .single-service {
padding: 48px 0;
}
}
@media (max-width: 1199px) {
.home3-service-section .service-list .single-service {
padding: 45px 0;
}
}
@media (max-width: 576px) {
.home3-service-section .service-list .single-service {
padding: 40px 0;
}
}
.home3-service-section .service-list .single-service:first-child {
border-top: 1px solid rgba(var(--primary-color-opc), 0.2);
}
.home3-service-section .service-list .single-service .service-content {
display: flex;
align-items: center;
gap: 50px;
transition: 0.7s;
}
@media (max-width: 1199px) {
.home3-service-section .service-list .single-service .service-content {
gap: 40px;
}
}
@media (max-width: 576px) {
.home3-service-section .service-list .single-service .service-content {
gap: 30px;
}
}
.home3-service-section .service-list .single-service .service-content span {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 18px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.02em;
transition: 0.5s;
}
.home3-service-section .service-list .single-service .service-content h5 {
margin-bottom: 0;
display: flex;
align-items: baseline;
gap: 10px;
}
.home3-service-section .service-list .single-service .service-content h5 svg {
fill: var(--title-color);
transition: 0.5s;
}
.home3-service-section .service-list .single-service .service-content h5 a {
color: var(--title-color);
font-family: var(--font-inter);
font-size: 23px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.01em;
text-decoration: underline;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
text-decoration-thickness: 2px;
text-underline-offset: 5px;
transition: 0.5s;
}
@media (max-width: 1199px) {
.home3-service-section .service-list .single-service .service-content h5 a {
font-size: 22px;
}
}
@media (max-width: 576px) {
.home3-service-section .service-list .single-service .service-content h5 a {
font-size: 20px;
}
}
.home3-service-section .service-list .single-service:hover {
background-size: 100%;
background-position: 0% 100%;
color: var(--white-color);
}
.home3-service-section .service-list .single-service:hover .service-content {
transform: translateX(40px);
}
.home3-service-section .service-list .single-service:hover .service-content span {
color: rgba(255, 255, 255, 0.6);
}
.home3-service-section .service-list .single-service:hover .service-content h5 svg {
color: var(--white-color);
}
.home3-service-section .service-list .single-service:hover .service-content h5 a {
color: var(--white-color);
}
.home3-service-section .service-img-group {
margin: 0;
padding: 0;
list-style: none;
}
@media (max-width: 991px) {
.home3-service-section .service-img-group {
display: none;
visibility: hidden;
}
}
.home3-service-section .service-img-group li {
position: relative;
}
.home3-service-section .service-img-group li .service-img {
min-height: 631px;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
animation: qodef-animate-image-out 1s 0.1s cubic-bezier(0.78, 0.2, 0.21, 0.88) forwards;
z-index: 12;
}
@media (max-width: 1399px) {
.home3-service-section .service-img-group li .service-img {
min-height: 602px;
}
}
@media (max-width: 1199px) {
.home3-service-section .service-img-group li .service-img {
min-height: 567px;
}
}
.home3-service-section .service-img-group li .service-img img {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.home3-service-section .service-img-group li.active .service-img {
animation: qodef-animate-image-in 1s cubic-bezier(0.78, 0.2, 0.21, 0.88) forwards;
z-index: 15;
}
@keyframes qodef-animate-image-out {
0% {
transform: scale(1) translateZ(0);
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
100% {
transform: scale(1);
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
}
@keyframes qodef-animate-image-in {
0% {
transform: scale(1.05) translateZ(0);
-webkit-clip-path: inset(0 100% 0 0);
clip-path: inset(0 100% 0 0);
}
100% {
transform: scale(1);
-webkit-clip-path: inset(0 0 0 0);
clip-path: inset(0 0 0 0);
}
} .home3-project-section {
background-color: #F7F7FA;
position: relative;
padding: 100px 90px;
z-index: 1;
}
@media (max-width: 1799px) {
.home3-project-section {
padding: 100px 80px;
}
}
@media (max-width: 1699px) {
.home3-project-section {
padding: 100px 60px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home3-project-section {
padding: 100px 30px;
}
}
@media (max-width: 1399px) {
.home3-project-section {
padding: 100px 20px;
}
}
@media (max-width: 1199px) {
.home3-project-section {
padding: 90px 20px;
}
}
@media (max-width: 767px) {
.home3-project-section {
padding: 70px 10px;
}
}
@media (max-width: 576px) {
.home3-project-section {
padding: 70px 0;
}
}
.home3-project-section .mb-40 {
margin-bottom: 40px;
}
.home3-project-section .vector {
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
}
.project-card2 .project-content-wrap {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 20px;
padding: 45px 0;
padding-right: 50px;
height: 100%;
max-width: 500px;
margin-left: auto;
}
@media (max-width: 1399px) {
.project-card2 .project-content-wrap {
padding: 30px 0;
padding-right: 30px;
max-width: 480px;
}
}
@media (max-width: 1199px) {
.project-card2 .project-content-wrap {
padding-right: 20px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.project-card2 .project-content-wrap {
padding: 20px 0;
}
}
@media (max-width: 767px) {
.project-card2 .project-content-wrap {
padding: 0;
margin-left: unset;
gap: 25px;
}
}
.project-card2 .project-content-wrap .project-content span {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 13px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.02em;
display: block;
margin-bottom: 10px;
}
.project-card2 .project-content-wrap .project-content h2 {
margin-bottom: 40px;
}
@media (max-width: 1199px) {
.project-card2 .project-content-wrap .project-content h2 {
margin-bottom: 30px;
}
}
@media (max-width: 991px) {
.project-card2 .project-content-wrap .project-content h2 {
margin-bottom: 25px;
}
}
@media (max-width: 576px) {
.project-card2 .project-content-wrap .project-content h2 {
margin-bottom: 15px;
}
}
.project-card2 .project-content-wrap .project-content h2 a {
color: var(--title-color);
font-family: var(--font-inter);
font-size: 30px;
font-weight: 700;
line-height: 36.31px;
letter-spacing: 1.2;
background: linear-gradient(to bottom, var(--title-color) 0%, var(--title-color) 98%);
background-size: 0 2px;
background-repeat: no-repeat;
background-position: right 100%;
transition: background-size 0.9s;
}
@media (max-width: 1199px) {
.project-card2 .project-content-wrap .project-content h2 a {
font-size: 28px;
}
}
@media (max-width: 991px) {
.project-card2 .project-content-wrap .project-content h2 a {
font-size: 26px;
}
}
@media (max-width: 576px) {
.project-card2 .project-content-wrap .project-content h2 a {
font-size: 24px;
}
}
.project-card2 .project-content-wrap .project-content h2 a:hover {
background-size: 100% 2px;
background-position: 0% 100%;
}
.project-card2 .project-content-wrap .project-content ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.project-card2 .project-content-wrap .project-content ul li {
display: flex;
}
.project-card2 .project-content-wrap .project-content ul li a {
color: rgba(var(--title-color-opc), 0.5);
font-family: var(--font-inter);
font-size: 12px;
font-weight: 500;
line-height: 1;
padding: 5px 14px;
border-radius: 15px;
border: 1px solid rgba(var(--primary-color-opc), 0.6);
transition: 0.5s;
}
.project-card2 .project-content-wrap .project-content ul li a:hover {
background-color: var(--primary-color);
color: var(--white-color);
}
@media (min-width: 768px) and (max-width: 991px) {
.project-card2 .project-img img {
min-height: 300px;
-o-object-fit: cover;
object-fit: cover;
}
}
@media (max-width: 576px) {
.project-card2 .project-img img {
min-height: 250px;
-o-object-fit: cover;
object-fit: cover;
}
}
.project-card2.two .project-content-wrap {
padding-right: 0;
padding-left: 50px;
margin-left: unset;
margin-right: auto;
}
@media (max-width: 1399px) {
.project-card2.two .project-content-wrap {
padding-left: 30px;
}
}
@media (max-width: 1199px) {
.project-card2.two .project-content-wrap {
padding-left: 20px;
}
}
@media (max-width: 767px) {
.project-card2.two .project-content-wrap {
padding: 0;
margin-right: unset;
}
} .home3-about-section .section-title p {
max-width: 670px;
width: 100%;
}
.home3-about-section .about-content .single-content h5 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 22px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.06em;
margin-bottom: 15px;
}
@media (max-width: 767px) {
.home3-about-section .about-content .single-content h5 {
margin-bottom: 10px;
}
}
.home3-about-section .about-content .single-content p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.8;
margin-bottom: 0;
max-width: 312px;
width: 100%;
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home3-about-section .about-content .single-content p {
font-size: 13px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.home3-about-section .about-content .single-content p {
font-size: 13px;
}
}
.home3-about-section .about-img {
padding: 30px 30px 0 30px;
background-color: rgba(var(--primary-color-opc), 0.05);
max-width: 1144px;
width: 100%;
margin: 0 auto;
}
@media (max-width: 991px) {
.home3-about-section .about-img {
padding: 20px 20px 0 20px;
}
}
@media (max-width: 576px) {
.home3-about-section .about-img {
padding: 10px 10px 0 10px;
}
}
@media (max-width: 576px) {
.home3-about-section .about-img img {
min-height: 250px;
-o-object-fit: cover;
object-fit: cover;
}
} .home3-banner2-section {
position: relative;
overflow: hidden;
}
.home3-banner2-section img {
min-height: 750px;
-o-object-fit: cover;
object-fit: cover;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home3-banner2-section img {
min-height: 700px;
}
}
@media (max-width: 1399px) {
.home3-banner2-section img {
min-height: 650px;
}
}
@media (max-width: 991px) {
.home3-banner2-section img {
max-height: 600px;
}
}
.home3-banner2-section h2 {
font-family: var(--font-kanit);
font-size: 70px;
font-weight: 600;
line-height: 1.2;
margin-bottom: 0;
width: 100%;
text-align: center;
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
padding: 10px;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home3-banner2-section h2 {
top: 90px;
}
}
@media (max-width: 1399px) {
.home3-banner2-section h2 {
top: 80px;
font-size: 65px;
}
}
@media (max-width: 991px) {
.home3-banner2-section h2 {
top: 70px;
font-size: 60px;
}
}
@media (max-width: 767px) {
.home3-banner2-section h2 {
font-size: 55px;
top: 50px;
}
}
@media (max-width: 576px) {
.home3-banner2-section h2 {
font-size: 50px;
top: 40px;
}
}
.home3-banner2-section .banner2-back-img {
position: relative;
z-index: 3;
-webkit-clip-path: inset(0px 0px 0px 920px);
clip-path: inset(0px 0px 0px 920px);
}
.home3-banner2-section .banner2-back-img::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(var(--primary-color-opc), 0.1);
z-index: -1;
}
.home3-banner2-section .banner2-back-img h2 {
color: var(--primary-color2);
}
.home3-banner2-section .banner2-front-img {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.home3-banner2-section .banner2-front-img::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(var(--primary-color-opc), 0.5);
}
.home3-banner2-section .banner2-front-img h2 {
color: var(--white-color);
}
.home3-banner2-section .image-handle {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--white-color);
border: 1px solid var(--primary-color2);
z-index: 3;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
cursor: grab;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
}
@media (max-width: 767px) {
.home3-banner2-section .image-handle {
flex-direction: column;
gap: 5px;
}
}
.home3-banner2-section .image-handle svg {
fill: var(--primary-color2);
}
@media (max-width: 767px) {
.home3-banner2-section .image-handle svg {
transform: rotate(90deg);
}
}
.home3-banner2-section .button-area {
position: absolute;
bottom: 0;
right: 0;
transform-origin: bottom;
transition: 0.5s;
z-index: 99;
} .home3-counter-section .single-counter {
width: 345px;
height: 345px;
border-radius: 50%;
border: 1px solid rgba(var(--primary-color-opc), 0.1);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
}
@media (max-width: 1399px) {
.home3-counter-section .single-counter {
width: 300px;
height: 300px;
}
}
@media (max-width: 1199px) {
.home3-counter-section .single-counter {
width: 256px;
height: 256px;
}
}
@media (max-width: 991px) {
.home3-counter-section .single-counter {
width: 100%;
height: unset;
padding: 20px 20px;
border-radius: 0px;
}
}
.home3-counter-section .single-counter .content .number {
display: flex;
justify-content: center;
}
.home3-counter-section .single-counter .content .number h2,
.home3-counter-section .single-counter .content .number span {
color: var(--title-color);
text-align: center;
font-family: var(--font-inter);
font-size: 90px;
font-weight: 700;
line-height: 1;
margin-bottom: 5px;
}
@media (max-width: 1399px) {
.home3-counter-section .single-counter .content .number h2,
.home3-counter-section .single-counter .content .number span {
font-size: 75px;
}
}
@media (max-width: 1199px) {
.home3-counter-section .single-counter .content .number h2,
.home3-counter-section .single-counter .content .number span {
font-size: 60px;
}
}
@media (max-width: 767px) {
.home3-counter-section .single-counter .content .number h2,
.home3-counter-section .single-counter .content .number span {
font-size: 55px;
}
}
.home3-counter-section .single-counter .content p {
margin-bottom: 0;
color: var(--paragraph-color);
text-align: center;
font-family: var(--font-kanit);
font-size: 15px;
font-weight: 400;
text-transform: uppercase;
margin-bottom: 0;
}
@media (min-width: 992px) and (max-width: 1199px) {
.home3-counter-section .single-counter .content p {
font-size: 14px;
}
}
.home3-counter-section .single-counter.two {
margin-left: -15px;
}
@media (max-width: 991px) {
.home3-counter-section .single-counter.two {
margin-left: 0;
}
}
.home3-counter-section .single-counter.three {
margin-left: -30px;
}
@media (max-width: 991px) {
.home3-counter-section .single-counter.three {
margin-left: 0;
}
}
.home3-counter-section .single-counter.four {
margin-left: -45px;
}
@media (max-width: 991px) {
.home3-counter-section .single-counter.four {
margin-left: 0;
}
} .home3-process-section {
background-color: #F4F6FC;
padding: 110px 10%;
}
@media (max-width: 1899px) {
.home3-process-section {
padding: 110px 8%;
}
}
@media (max-width: 1799px) {
.home3-process-section {
padding: 110px 6%;
}
}
@media (max-width: 1699px) {
.home3-process-section {
padding: 110px 3%;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home3-process-section {
padding: 110px 2%;
}
}
@media (max-width: 1399px) {
.home3-process-section {
padding: 110px 20px;
}
}
@media (max-width: 1199px) {
.home3-process-section {
padding: 90px 20px;
}
}
@media (max-width: 767px) {
.home3-process-section {
padding: 70px 10px;
}
}
.home3-process-section .process-slider-wrap {
position: relative;
}
.home3-process-section .process-slider-wrap::before {
content: "";
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
width: 75%;
height: 1px;
background-color: rgba(var(--primary-color-opc), 0.4);
}
@media (max-width: 991px) {
.home3-process-section .process-slider-wrap::before {
width: 60%;
}
}
@media (max-width: 576px) {
.home3-process-section .process-slider-wrap::before {
display: none;
}
}
.home3-process-section .process-card {
display: flex;
flex-direction: column;
align-items: center;
}
.home3-process-section .process-card .step-no {
display: inline-flex;
justify-content: center;
align-items: center;
margin-bottom: 40px;
background-color: var(--white-color);
border: 1px solid var(--primary-color);
border-radius: 50px;
padding: 7px 22px;
white-space: nowrap;
position: relative;
transition: 0.5s;
}
@media (max-width: 576px) {
.home3-process-section .process-card .step-no {
margin-bottom: 30px;
}
}
.home3-process-section .process-card .step-no::before {
content: "";
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 15px;
height: 15px;
background-color: var(--white-color);
border: 1px solid var(--primary-color);
border-radius: 0 0 4px 0;
border-top: unset;
border-left: unset;
transition: 0.5s;
}
.home3-process-section .process-card .step-no span {
color: var(--title-color);
font-family: var(--font-inter);
font-size: 13px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.51px;
transition: 0.5s;
}
.home3-process-section .process-card .process-content {
padding: 35px 40px;
background-color: var(--white-color);
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home3-process-section .process-card .process-content {
padding: 35px 25px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home3-process-section .process-card .process-content {
padding: 30px 20px;
}
}
@media (max-width: 1199px) {
.home3-process-section .process-card .process-content {
padding: 35px 30px;
}
}
@media (max-width: 767px) {
.home3-process-section .process-card .process-content {
padding: 30px 20px;
}
}
.home3-process-section .process-card .process-content .icon {
margin-bottom: 25px;
}
.home3-process-section .process-card .process-content .icon svg {
fill: rgba(var(--title-color-opc), 0.5);
}
.home3-process-section .process-card .process-content h4 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 25px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.03em;
margin-bottom: 25px;
}
@media (max-width: 767px) {
.home3-process-section .process-card .process-content h4 {
margin-bottom: 20px;
}
}
.home3-process-section .process-card .process-content p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.8;
}
.home3-process-section .process-card:hover .step-no {
border-color: var(--primary-color2);
background-color: var(--primary-color);
}
.home3-process-section .process-card:hover .step-no::before {
border-color: var(--primary-color2);
background-color: var(--primary-color);
}
.home3-process-section .process-card:hover .step-no span {
color: var(--white-color);
}
.home3-process-section .process-card:hover .process-content .icon svg {
animation: bounceIn 1.2s linear;
} .home3-why-choose-section .why-choose-content .btn-and-video-area {
padding-top: 75px;
display: flex;
align-items: center;
gap: 60px;
}
@media (max-width: 1399px) {
.home3-why-choose-section .why-choose-content .btn-and-video-area {
padding-top: 65px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home3-why-choose-section .why-choose-content .btn-and-video-area {
padding-top: 45px;
}
}
@media (max-width: 991px) {
.home3-why-choose-section .why-choose-content .btn-and-video-area {
padding-top: 55px;
}
}
@media (max-width: 767px) {
.home3-why-choose-section .why-choose-content .btn-and-video-area {
padding-top: 35px;
}
}
@media (max-width: 576px) {
.home3-why-choose-section .why-choose-content .btn-and-video-area {
flex-wrap: wrap;
gap: 25px;
}
}
.home3-why-choose-section .why-choose-content .btn-and-video-area .video-area {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.home3-why-choose-section .why-choose-content .btn-and-video-area .video-area .icon {
position: relative;
}
.home3-why-choose-section .why-choose-content .btn-and-video-area .video-area .icon .video-circle {
stroke: var(--title-color);
fill: none;
transition: 0.5s;
}
.home3-why-choose-section .why-choose-content .btn-and-video-area .video-area .icon .video-circle .top-half {
stroke-dasharray: 320;
stroke-dashoffset: 320;
transition: stroke-dashoffset 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.home3-why-choose-section .why-choose-content .btn-and-video-area .video-area .icon .play-icon {
fill: var(--title-color);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-left: 1px;
}
.home3-why-choose-section .why-choose-content .btn-and-video-area .video-area h6 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.48px;
margin-bottom: 0;
}
.home3-why-choose-section .why-choose-content .btn-and-video-area .video-area:hover .icon .video-circle .top-half {
stroke-dashoffset: 0;
} .home3-award-section {
background-color: var(--primary-color);
padding: 130px 0;
}
@media (max-width: 1199px) {
.home3-award-section {
padding: 90px 0;
}
}
@media (max-width: 767px) {
.home3-award-section {
padding: 70px 0;
}
}
.home3-award-section .award-img img {
border-radius: 190px;
}
.home3-award-section .award-list {
padding-left: 50px;
position: relative;
}
@media (max-width: 1399px) {
.home3-award-section .award-list {
padding-left: 30px;
}
}
@media (max-width: 1199px) {
.home3-award-section .award-list {
padding-left: 10px;
}
}
@media (max-width: 991px) {
.home3-award-section .award-list {
padding-left: 0;
}
}
.home3-award-section .award-list::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -15px;
width: 1px;
height: 100%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, #FFFFFF 50.5%, rgba(255, 255, 255, 0.05) 100%);
opacity: 0.1;
}
@media (max-width: 1399px) {
.home3-award-section .award-list::before {
left: 0;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home3-award-section .award-list::before {
left: -5px;
}
}
@media (max-width: 991px) {
.home3-award-section .award-list::before {
display: none;
}
}
.home3-award-section .award-list::after {
content: "";
position: absolute;
top: 50%;
left: 53%;
transform: translate(-50%, -50%);
width: 1px;
height: 100%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, #FFFFFF 50.5%, rgba(255, 255, 255, 0.05) 100%);
opacity: 0.1;
}
@media (min-width: 992px) and (max-width: 1199px) {
.home3-award-section .award-list::after {
left: 52%;
}
}
@media (max-width: 991px) {
.home3-award-section .award-list::after {
left: 51%;
}
}
@media (max-width: 767px) {
.home3-award-section .award-list::after {
display: none;
}
}
.home3-award-section .award-list .single-award {
display: flex;
align-items: start;
gap: 15px;
max-width: 348px;
width: 100%;
padding-bottom: 40px;
position: relative;
}
@media (max-width: 1399px) {
.home3-award-section .award-list .single-award {
max-width: 315px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home3-award-section .award-list .single-award {
max-width: 260px;
}
}
@media (max-width: 576px) {
.home3-award-section .award-list .single-award {
padding-bottom: 25px;
}
}
.home3-award-section .award-list .single-award::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, #FFFFFF 50.5%, rgba(255, 255, 255, 0.05) 100%);
opacity: 0.1;
}
.home3-award-section .award-list .single-award .icon {
margin-top: 5px;
}
.home3-award-section .award-list .single-award .icon svg {
fill: none;
stroke: rgba(var(--primary-color2-opc), 0.5);
}
.home3-award-section .award-list .single-award .content h4 {
color: var(--white-color);
font-family: var(--font-kanit);
font-size: 27px;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.03em;
margin-bottom: 15px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.home3-award-section .award-list .single-award .content h4 {
font-size: 24px;
margin-bottom: 10px;
}
}
@media (max-width: 576px) {
.home3-award-section .award-list .single-award .content h4 {
font-size: 25px;
margin-bottom: 12px;
}
}
.home3-award-section .award-list .single-award .content span {
color: rgba(255, 255, 255, 0.6);
font-family: var(--font-inter);
font-size: 15px;
font-weight: 400;
line-height: 1.8;
} .home3-testimonial-section .testimonial-slider-wrap {
position: relative;
}
.home3-testimonial-section .testimonial-slider-wrap .testimonial-slider .contact-btn-area {
display: flex;
align-items: center;
gap: 15px;
justify-content: end;
margin-top: -50px;
position: relative;
z-index: 1;
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home3-testimonial-section .testimonial-slider-wrap .testimonial-slider .contact-btn-area {
margin-top: -96px;
}
}
@media (max-width: 767px) {
.home3-testimonial-section .testimonial-slider-wrap .testimonial-slider .contact-btn-area {
gap: 10px;
}
}
@media (max-width: 576px) {
.home3-testimonial-section .testimonial-slider-wrap .testimonial-slider .contact-btn-area {
margin-top: 25px;
justify-content: start;
}
.home3-testimonial-section .testimonial-slider-wrap .testimonial-slider .contact-btn-area img {
display: none;
}
}
@media (max-width: 991px) {
.home3-testimonial-section .testimonial-slider-wrap .slider-btn-grp {
display: none;
}
}
.home3-testimonial-section .testimonial-slider-wrap .slider-btn-grp .slider-btn {
position: absolute;
top: 60%;
left: 0;
}
.home3-testimonial-section .testimonial-slider-wrap .slider-btn-grp .slider-btn.testimonial-slider-next {
left: unset;
right: 0;
}
.home3-testimonial-section .home1-testimonial-slider .swiper-slide-active .testimonial-author-img-wrap .testimonial-author-img::before, .home3-testimonial-section .home1-testimonial-slider .swiper-slide-active .testimonial-author-img-wrap .testimonial-author-img::after {
animation: 0.5s spin2 linear 1s forwards;
}
.home3-testimonial-section .home1-testimonial-slider .swiper-slide-active .testimonial-author-img-wrap .testimonial-author-img::after {
animation: 0.5s spin linear 0.5s forwards;
}
.home3-testimonial-section .home1-testimonial-slider .swiper-slide-active span,
.home3-testimonial-section .home1-testimonial-slider .swiper-slide-active p {
animation: fadeInUp 1.7s;
} .home3-team-section {
padding: 120px 0;
background-image: url(//www.husetconstruction.com/wp-content/themes/vernex/assets/img/home3/home3-team-bg.png), linear-gradient(180deg, #f0f2f4 0%, #f0f2f4 100%);
}
@media (max-width: 1199px) {
.home3-team-section {
padding: 90px 0;
}
}
@media (max-width: 767px) {
.home3-team-section {
padding: 70px 0;
}
}
.home3-team-section .pagination-area .swiper-pagination1 {
position: relative;
display: inline-flex;
align-items: center;
width: unset;
z-index: 9;
bottom: unset;
gap: 8px;
}
@media (max-width: 576px) {
.home3-team-section .pagination-area .swiper-pagination1 {
justify-content: center;
gap: 6px;
}
}
.home3-team-section .pagination-area .swiper-pagination1 .swiper-pagination-bullet {
height: 12px;
width: 12px;
background-color: transparent;
border: 1px solid rgba(var(--title-color-opc), 0.6);
opacity: 1;
position: relative;
}
.home3-team-section .pagination-area .swiper-pagination1 .swiper-pagination-bullet::after {
content: "";
height: 6px;
width: 6px;
border-radius: 50%;
background-color: rgba(var(--title-color-opc), 0.4);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.home3-team-section .pagination-area .swiper-pagination1 .swiper-pagination-bullet.swiper-pagination-bullet-active {
border-color: var(--primary-color2);
height: 16px;
width: 16px;
}
.home3-team-section .pagination-area .swiper-pagination1 .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
width: 8px;
height: 8px;
background-color: var(--primary-color2);
}
.team-card3 {
position: relative;
}
.team-card3 .team-img {
overflow: hidden;
}
.team-card3 .team-img img {
transition: all 0.5s ease-out;
}
@media (min-width: 992px) and (max-width: 1199px) {
.team-card3 .team-img img {
min-height: 250px;
-o-object-fit: cover;
object-fit: cover;
}
}
@media (max-width: 576px) {
.team-card3 .team-img img {
min-height: 250px;
-o-object-fit: cover;
object-fit: cover;
}
}
.team-card3 .team-content {
padding: 17px 25px;
background-color: #F0F2F4;
min-width: 220px;
position: absolute;
bottom: 0;
right: 0;
}
@media (min-width: 992px) and (max-width: 1199px) {
.team-card3 .team-content {
padding: 14px 20px;
}
}
@media (max-width: 576px) {
.team-card3 .team-content {
padding: 14px 20px;
}
}
.team-card3 .team-content span {
color: rgba(var(--title-color-opc), 0.5);
font-family: var(--font-inter);
font-size: 14px;
font-weight: 400;
line-height: 1.7;
display: block;
margin-bottom: 2px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.team-card3 .team-content span {
margin-bottom: 0;
font-size: 13px;
}
}
@media (max-width: 576px) {
.team-card3 .team-content span {
margin-bottom: 0;
font-size: 13px;
}
}
.team-card3 .team-content h5 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 22px;
font-weight: 400;
line-height: 1.3;
letter-spacing: 0.03em;
margin-bottom: 0;
}
@media (min-width: 992px) and (max-width: 1199px) {
.team-card3 .team-content h5 {
font-size: 21px;
}
}
@media (max-width: 576px) {
.team-card3 .team-content h5 {
font-size: 21px;
}
}
.team-card3 .social-list {
position: absolute;
top: 50%;
left: 10px;
padding: 0;
margin: 0;
list-style: none;
opacity: 0;
transform: translateY(-50%) scaleY(0);
transform-origin: top;
transition: 0.5s;
}
.team-card3 .social-list li {
margin-bottom: 20px;
}
.team-card3 .social-list li:last-child {
margin-bottom: 0;
}
@media (min-width: 992px) and (max-width: 1199px) {
.team-card3 .social-list li {
margin-bottom: 15px;
}
}
@media (max-width: 576px) {
.team-card3 .social-list li {
margin-bottom: 15px;
}
}
.team-card3 .social-list li a {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: rgba(var(--primary-color-opc), 0.5);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
color: var(--white-color);
display: flex;
align-items: center;
justify-content: center;
transition: 0.5s;
}
.team-card3 .social-list li a i {
font-size: 18px;
}
.team-card3 .social-list li a i.bi-twitter-x {
font-size: 12px;
margin-top: 1px;
margin-left: 1px;
line-height: 1;
}
.team-card3 .social-list li a:hover {
background-color: var(--primary-color);
}
.team-card3:hover .team-img img {
transform: scale(1.1);
}
.team-card3:hover .social-list {
opacity: 1;
transform: translateY(-50%) scaleY(1);
} .home3-blog-section .primary-btn2 {
margin-top: 50px;
}
@media (max-width: 991px) {
.home3-blog-section .primary-btn2 {
margin-top: 40px;
}
}
@media (max-width: 576px) {
.home3-blog-section .primary-btn2 {
margin-top: 30px;
}
}
.home3-blog-section .blog-card-area {
margin-top: -70px;
}
@media (max-width: 991px) {
.home3-blog-section .blog-card-area {
margin-top: 50px;
}
} .gallery-section {
border-bottom: 3px solid var(--primary-color2);
}
.gallery-section .title-area h4 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 25px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.05em;
margin-bottom: 0;
padding-bottom: 10px;
position: relative;
}
.gallery-section .title-area h4::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100px;
height: 2px;
background-color: var(--primary-color);
}
.gallery-section .single-gallery-img {
position: relative;
line-height: 1;
transition: 0.35s;
display: flex;
}
.gallery-section .single-gallery-img .icon-area {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(var(--primary-color-opc), 0.3);
display: flex;
align-items: center;
justify-content: center;
transform-origin: bottom;
transform: scaleY(0);
opacity: 0;
transition: 0.5s;
}
.gallery-section .single-gallery-img .icon-area a i {
font-size: 38px;
color: var(--white-color);
}
@media (max-width: 576px) {
.gallery-section .single-gallery-img img {
min-height: 200px;
-o-object-fit: cover;
object-fit: cover;
}
}
.gallery-section .single-gallery-img:hover .icon-area {
transform: scaleY(1);
opacity: 1;
}
.gallery-section.two {
border-bottom: unset;
} .home4-banner-section {
overflow: hidden;
}
.home4-banner-section .banner-content-wrap {
padding: 65px 160px 65px 120px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
@media (max-width: 1699px) {
.home4-banner-section .banner-content-wrap {
padding: 65px 140px 65px 100px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home4-banner-section .banner-content-wrap {
padding: 65px 110px 65px 70px;
}
}
@media (max-width: 1399px) {
.home4-banner-section .banner-content-wrap {
padding: 65px 110px 65px 60px;
}
}
@media (max-width: 1199px) {
.home4-banner-section .banner-content-wrap {
padding: 60px 70px 60px 30px;
}
}
@media (max-width: 991px) {
.home4-banner-section .banner-content-wrap {
flex-wrap: wrap;
}
}
@media (max-width: 767px) {
.home4-banner-section .banner-content-wrap {
padding: 50px 20px;
}
}
@media (max-width: 576px) {
.home4-banner-section .banner-content-wrap {
padding: 50px 10px;
}
}
.home4-banner-section .banner-content-wrap .title-area {
max-width: 1170px;
width: 100%;
}
.home4-banner-section .banner-content-wrap .title-area h1 {
color: var(--title-color);
font-family: var(--font-inter);
font-size: 100px;
font-weight: 600;
line-height: 1.15;
margin-bottom: 0;
}
@media (max-width: 1699px) {
.home4-banner-section .banner-content-wrap .title-area h1 {
font-size: 95px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home4-banner-section .banner-content-wrap .title-area h1 {
font-size: 85px;
}
}
@media (max-width: 1399px) {
.home4-banner-section .banner-content-wrap .title-area h1 {
font-size: 80px;
}
}
@media (max-width: 1199px) {
.home4-banner-section .banner-content-wrap .title-area h1 {
font-size: 65px;
line-height: 1.3;
}
}
@media (max-width: 767px) {
.home4-banner-section .banner-content-wrap .title-area h1 {
font-size: 60px;
}
}
@media (max-width: 576px) {
.home4-banner-section .banner-content-wrap .title-area h1 {
font-size: 48px;
}
}
.home4-banner-section .banner-content-wrap .title-area h1 span {
display: flex;
align-items: center;
gap: 40px;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px var(--primary-color2);
font-family: var(--font-kanit);
text-transform: uppercase;
}
@media (min-width: 992px) and (max-width: 1199px) {
.home4-banner-section .banner-content-wrap .title-area h1 span {
gap: 25px;
}
}
@media (max-width: 991px) {
.home4-banner-section .banner-content-wrap .title-area h1 span {
gap: 30px;
}
}
@media (max-width: 767px) {
.home4-banner-section .banner-content-wrap .title-area h1 span {
gap: 20px;
}
}
@media (max-width: 576px) {
.home4-banner-section .banner-content-wrap .title-area h1 span {
gap: 15px;
}
}
.home4-banner-section .banner-content-wrap .title-area h1 span svg {
fill: var(--primary-color2);
}
@media (max-width: 767px) {
.home4-banner-section .banner-content-wrap .title-area h1 span svg {
width: 60px;
}
}
@media (max-width: 576px) {
.home4-banner-section .banner-content-wrap .title-area h1 span svg {
width: 50px;
}
}
@keyframes textRotation {
to {
transform: rotate(360deg);
}
}
@keyframes rotate-circle {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.home4-banner-section .banner-content-wrap .circular-text {
width: 168px;
height: 168px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.home4-banner-section .banner-content-wrap .circular-text > svg {
width: 168px;
height: 168px;
animation: textRotation 20s linear infinite;
}
.home4-banner-section .banner-content-wrap .circular-text > svg textpath {
fill: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 12px;
font-weight: 400;
line-height: 1;
}
.home4-banner-section .banner-content-wrap .circular-text .center-icon {
width: 120px;
height: 120px;
border-radius: 50%;
background-color: rgba(var(--primary-color2-opc), 0.1);
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.home4-banner-section .banner-content-wrap .circular-text .center-icon svg {
fill: var(--title-color);
}
.home4-banner-section .banner-img-slider-area {
margin-left: 110px;
position: relative;
}
@media (max-width: 1699px) {
.home4-banner-section .banner-img-slider-area {
margin-left: 100px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home4-banner-section .banner-img-slider-area {
margin-left: 70px;
}
}
@media (max-width: 1399px) {
.home4-banner-section .banner-img-slider-area {
margin-left: 60px;
}
}
@media (max-width: 1199px) {
.home4-banner-section .banner-img-slider-area {
margin-left: 30px;
}
}
@media (max-width: 991px) {
.home4-banner-section .banner-img-slider-area {
flex-wrap: wrap;
}
}
@media (max-width: 767px) {
.home4-banner-section .banner-img-slider-area {
margin-left: 20px;
}
}
@media (max-width: 576px) {
.home4-banner-section .banner-img-slider-area {
margin-left: 10px;
}
}
.home4-banner-section .banner-img-slider-area .banner-bg {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
min-height: 694px;
animation: large 26s linear infinite alternate;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home4-banner-section .banner-img-slider-area .banner-bg {
min-height: 650px;
}
}
@media (max-width: 1399px) {
.home4-banner-section .banner-img-slider-area .banner-bg {
min-height: 600px;
}
}
@media (max-width: 1199px) {
.home4-banner-section .banner-img-slider-area .banner-bg {
min-height: 550px;
}
}
@media (max-width: 991px) {
.home4-banner-section .banner-img-slider-area .banner-bg {
min-height: 500px;
}
}
@media (max-width: 576px) {
.home4-banner-section .banner-img-slider-area .banner-bg {
min-height: 350px;
}
}
@keyframes large {
0% {
transform: scale(1);
}
100% {
transform: scale(1.3);
}
}
.home4-banner-section .banner-img-slider-area .scroll-down-btn {
min-width: 88px;
max-width: 88px;
height: 88px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(var(--title-color-opc), 0.3);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
transition: 0.8s;
position: absolute;
top: -45px;
left: 50%;
transform: translateX(-50%);
z-index: 9;
}
@media (max-width: 576px) {
.home4-banner-section .banner-img-slider-area .scroll-down-btn {
min-width: 78px;
max-width: 78px;
height: 78px;
}
}
.home4-banner-section .banner-img-slider-area .scroll-down-btn a {
text-align: center;
padding-top: 8px;
}
.home4-banner-section .banner-img-slider-area .scroll-down-btn a span {
color: rgba(var(--title-color-opc), 0.7);
font-family: var(--font-kanit);
font-size: 12px;
font-weight: 500;
line-height: 15px;
display: block;
transition: 0.5s;
}
.home4-banner-section .banner-img-slider-area .scroll-down-btn a svg {
fill: rgba(var(--title-color-opc), 0.7);
transition: 0.5s;
}
.home4-banner-section .banner-img-slider-area .scroll-down-btn:hover {
background-color: var(--primary-color);
}
.home4-banner-section .banner-img-slider-area .scroll-down-btn:hover a span {
color: var(--white-color);
}
.home4-banner-section .banner-img-slider-area .scroll-down-btn:hover a svg {
fill: var(--white-color);
} .home4-service-section {
scroll-margin-top: 180px;
}
.home4-service-section .pt-20 {
padding-top: 20px;
}
@media (max-width: 991px) {
.home4-service-section .pt-20 {
padding-top: 0;
}
}
.service-card .service-img-wrap {
position: relative;
}
.service-card .service-img-wrap .service-img {
position: relative;
overflow: hidden;
display: block;
transition: all 0.5s ease-out;
}
.service-card .service-img-wrap .service-img img {
transition: all 0.5s ease-out;
}
.service-card .service-img-wrap .service-img::after {
position: absolute;
width: 200%;
height: 0%;
left: 50%;
top: 50%;
background-color: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%) rotate(-45deg);
content: "";
z-index: 1;
}
.service-card .service-img-wrap .button-area {
position: absolute;
bottom: 0;
right: 0;
z-index: 2;
}
.service-card .service-img-wrap .button-area .primary-btn2 {
padding: 11px 27px 7px;
transition: 0.5s;
}
.service-card .service-img-wrap .button-area .primary-btn2 span {
font-size: 12px;
}
.service-card .service-content {
padding: 30px 25px;
border: 1px solid rgba(var(--primary-color-opc), 0.05);
border-top: unset;
}
@media (min-width: 1200px) and (max-width: 1399px) {
.service-card .service-content {
padding: 30px 20px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.service-card .service-content {
padding: 25px 15px;
}
}
@media (max-width: 576px) {
.service-card .service-content {
padding: 25px 15px;
}
}
.service-card .service-content h4 {
margin-bottom: 10px;
}
.service-card .service-content h4 a {
color: var(--title-color);
font-family: var(--font-inter);
font-size: 24px;
font-weight: 600;
line-height: 1.4;
transition: 0.5s;
}
@media (min-width: 992px) and (max-width: 1199px) {
.service-card .service-content h4 a {
font-size: 22px;
}
}
@media (max-width: 576px) {
.service-card .service-content h4 a {
font-size: 22px;
}
}
.service-card .service-content h4 a:hover {
color: var(--primary-color2);
}
.service-card .service-content p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.6;
margin-bottom: 0;
}
@media (max-width: 576px) {
.service-card .service-content p {
font-size: 15px;
}
}
.service-card:hover .service-img-wrap .service-img img {
transform: scale(1.1);
}
.service-card:hover .service-img-wrap .service-img::after {
height: 250%;
transition: all 600ms linear;
background-color: transparent;
}
.service-card:hover .service-img-wrap .button-area .primary-btn2 {
background-color: var(--primary-color2);
}
.service-card:hover .service-img-wrap .button-area .primary-btn2 span {
background-image: linear-gradient(0deg, var(--white-color) 0%, var(--white-color) 100%);
color: var(--white-color);
}
.service-card:hover .service-img-wrap .button-area .primary-btn2 span::after {
color: var(--white-color);
}
.service-card:hover .service-img-wrap .button-area .primary-btn2 span svg {
fill: none;
stroke: var(--white-color);
} .home4-project-section {
overflow: hidden;
padding: 110px 0 110px 11%;
background-color: #F7F7FA;
}
@media (max-width: 1799px) {
.home4-project-section {
padding: 110px 0 110px 8%;
}
}
@media (max-width: 1699px) {
.home4-project-section {
padding: 110px 0 110px 4%;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home4-project-section {
padding: 110px 0 110px 3%;
}
}
@media (max-width: 1399px) {
.home4-project-section {
padding: 110px 0 110px 2%;
}
}
@media (max-width: 1199px) {
.home4-project-section {
padding: 90px 0 90px 2%;
}
}
@media (max-width: 991px) {
.home4-project-section {
padding: 90px 20px;
}
}
@media (max-width: 767px) {
.home4-project-section {
padding: 70px 20px;
}
}
@media (max-width: 576px) {
.home4-project-section {
padding: 70px 10px;
}
}
.home4-project-section .project-title-area {
display: flex;
flex-direction: column;
gap: 20px;
justify-content: space-between;
height: 100%;
}
@media (max-width: 767px) {
.home4-project-section .project-title-area {
gap: 25px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home4-project-section .project-title-area .section-title2 h2 {
font-size: 60px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home4-project-section .project-title-area .section-title2 h2 {
font-size: 55px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home4-project-section .project-title-area .section-title2 h2 span {
width: 70px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home4-project-section .project-title-area .section-title2 h2 span {
width: 50px;
}
}
.home4-project-section .project-title-area .section-title2 p {
max-width: 336px;
width: 100%;
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home4-project-section .project-title-area .section-title2 p {
font-size: 15px;
}
}
@media (max-width: 991px) {
.home4-project-section .project-title-area .section-title2 p {
max-width: unset;
}
}
.home4-project-section .project-title-area .button-and-slider-area {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.home4-project-section .project-title-area .button-and-slider-area .primary-btn2 {
padding: 16px 25px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home4-project-section .project-title-area .button-and-slider-area .slider-btn-grp {
gap: 30px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home4-project-section .project-title-area .button-and-slider-area .slider-btn-grp {
gap: 30px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home4-project-section .project-title-area .button-and-slider-area .slider-btn-grp {
gap: 25px;
}
}
@media (max-width: 576px) {
.home4-project-section .project-title-area .button-and-slider-area .slider-btn-grp {
gap: 25px;
}
}
.home4-project-section .project-title-area .button-and-slider-area .slider-btn-grp .slider-btn {
min-width: 40px;
max-width: 40px;
height: 40px;
}
.home4-project-section .project-slider-area {
padding-left: 50px;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home4-project-section .project-slider-area {
padding-left: 30px;
}
}
@media (max-width: 1399px) {
.home4-project-section .project-slider-area {
padding-left: 30px;
}
}
@media (max-width: 1199px) {
.home4-project-section .project-slider-area {
padding-left: 10px;
}
}
@media (max-width: 991px) {
.home4-project-section .project-slider-area {
padding-left: 0;
}
}
.project-card3 {
position: relative;
overflow: hidden;
transition: all 0.5s ease-out;
}
@media (min-width: 992px) and (max-width: 1199px) {
.project-card3 img {
min-height: 380px;
-o-object-fit: cover;
object-fit: cover;
}
}
@media (max-width: 767px) {
.project-card3 img {
min-height: 380px;
-o-object-fit: cover;
object-fit: cover;
}
}
.project-card3 .project-content-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 24.28%, rgba(0, 0, 0, 0.8) 91.5%);
padding: 30px;
display: flex;
align-items: end;
z-index: 2;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.project-card3 .project-content-wrap {
padding: 30px 20px;
}
}
@media (max-width: 1399px) {
.project-card3 .project-content-wrap {
padding: 30px 20px;
}
}
.project-card3 .project-content-wrap .project-content span {
color: rgba(255, 255, 255, 0.7);
font-family: var(--font-inter);
font-size: 13px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.02em;
display: block;
margin-bottom: 10px;
}
.project-card3 .project-content-wrap .project-content h3 {
margin-bottom: 20px;
}
.project-card3 .project-content-wrap .project-content h3 a {
color: var(--white-color);
font-family: var(--font-kanit);
font-size: 30px;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.05em;
transition: 0.5s;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.project-card3 .project-content-wrap .project-content h3 a {
font-size: 28px;
}
}
@media (max-width: 1399px) {
.project-card3 .project-content-wrap .project-content h3 a {
font-size: 28px;
}
}
.project-card3 .project-content-wrap .project-content h3 a:hover {
color: var(--primary-color2);
}
.project-card3 .project-content-wrap .project-content ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.project-card3 .project-content-wrap .project-content ul li {
display: flex;
}
.project-card3 .project-content-wrap .project-content ul li a {
color: var(--white-color);
font-family: var(--font-inter);
font-size: 12px;
font-weight: 500;
line-height: 1;
padding: 5px 14px;
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.15);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
transition: 0.5s;
}
.project-card3 .project-content-wrap .project-content ul li a:hover {
background-color: var(--primary-color);
border-color: var(--primary-color);
color: var(--white-color);
}
.project-card3::after {
position: absolute;
width: 200%;
height: 0%;
left: 50%;
top: 50%;
background-color: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%) rotate(-45deg);
content: "";
z-index: 1;
}
.project-card3:hover::after {
height: 250%;
transition: all 600ms linear;
background-color: transparent;
} .home4-about-section .section-title2 p {
margin-top: 40px;
}
@media (max-width: 1199px) {
.home4-about-section .section-title2 p {
margin-top: 30px;
}
}
@media (max-width: 991px) {
.home4-about-section .section-title2 p {
margin-top: 20px;
}
}
.home4-about-section .about-wrapper {
margin-top: 80px;
}
@media (max-width: 991px) {
.home4-about-section .about-wrapper {
margin-top: 60px;
}
}
@media (max-width: 576px) {
.home4-about-section .about-wrapper {
margin-top: 50px;
}
}
.home4-about-section .about-wrapper .about-img {
-webkit-mask-image: url(//www.husetconstruction.com/wp-content/themes/vernex/assets/img/home4/about-img-bg.png);
mask-image: url(//www.husetconstruction.com/wp-content/themes/vernex/assets/img/home4/about-img-bg.png);
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
mask-size: cover;
min-width: 817px;
}
@media (max-width: 1399px) {
.home4-about-section .about-wrapper .about-img {
min-width: 760px;
}
}
@media (max-width: 1199px) {
.home4-about-section .about-wrapper .about-img {
min-width: 730px;
}
}
@media (max-width: 991px) {
.home4-about-section .about-wrapper .about-img {
min-width: unset;
-webkit-mask-image: unset;
mask-image: unset;
}
}
.home4-about-section .about-wrapper .about-img img {
min-width: 817px;
}
@media (max-width: 1399px) {
.home4-about-section .about-wrapper .about-img img {
min-width: 760px;
}
}
@media (max-width: 1199px) {
.home4-about-section .about-wrapper .about-img img {
min-width: 730px;
}
}
@media (max-width: 991px) {
.home4-about-section .about-wrapper .about-img img {
min-width: unset;
}
}
@media (max-width: 576px) {
.home4-about-section .about-wrapper .about-img img {
min-height: 300px;
-o-object-fit: cover;
object-fit: cover;
}
}
.home4-about-section .about-wrapper .about-content {
margin-top: -30px;
}
@media (max-width: 991px) {
.home4-about-section .about-wrapper .about-content {
margin-top: 0;
}
}
.home4-about-section .about-wrapper .about-content ul {
padding: 0;
margin: 0;
list-style: none;
}
@media (max-width: 991px) {
.home4-about-section .about-wrapper .about-content ul {
display: flex;
align-items: center;
gap: 50px;
}
}
@media (max-width: 767px) {
.home4-about-section .about-wrapper .about-content ul {
gap: 30px;
}
}
@media (max-width: 576px) {
.home4-about-section .about-wrapper .about-content ul {
flex-wrap: wrap;
gap: 20px;
}
}
.home4-about-section .about-wrapper .about-content ul li {
max-width: 312px;
width: 100%;
margin-bottom: 60px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.home4-about-section .about-wrapper .about-content ul li {
margin-bottom: 50px;
}
}
@media (max-width: 991px) {
.home4-about-section .about-wrapper .about-content ul li {
margin-bottom: 0;
}
}
@media (max-width: 576px) {
.home4-about-section .about-wrapper .about-content ul li {
max-width: unset;
}
}
.home4-about-section .about-wrapper .about-content ul li:last-child {
margin-bottom: 0;
margin-left: -160px;
}
@media (max-width: 1399px) {
.home4-about-section .about-wrapper .about-content ul li:last-child {
margin-left: -80px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home4-about-section .about-wrapper .about-content ul li:last-child {
margin-left: -40px;
}
}
@media (max-width: 991px) {
.home4-about-section .about-wrapper .about-content ul li:last-child {
margin-left: 0;
}
}
.home4-about-section .about-wrapper .about-content ul li h5 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 22px;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.06em;
margin-bottom: 15px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.home4-about-section .about-wrapper .about-content ul li h5 {
font-size: 20px;
margin-bottom: 10px;
}
}
@media (max-width: 767px) {
.home4-about-section .about-wrapper .about-content ul li h5 {
margin-bottom: 10px;
}
}
.home4-about-section .about-wrapper .about-content ul li p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.8;
margin-bottom: 0;
}
@media (min-width: 992px) and (max-width: 1199px) {
.home4-about-section .about-wrapper .about-content ul li p {
font-size: 15px;
}
}
@media (max-width: 767px) {
.home4-about-section .about-wrapper .about-content ul li p {
font-size: 15px;
}
} .home4-process-section {
background-color: #F5FAFC;
padding: 110px 0;
}
@media (max-width: 1199px) {
.home4-process-section {
padding: 90px 0;
}
}
@media (max-width: 767px) {
.home4-process-section {
padding: 70px 0;
}
}
.home4-process-section .process-content .section-title2 p {
max-width: 336px;
width: 100%;
}
@media (max-width: 991px) {
.home4-process-section .process-content .section-title2 p {
max-width: unset;
}
}
.home4-process-section .process-content .process-list {
padding: 0;
list-style: none;
padding-top: 50px;
max-width: 270px;
width: 100%;
margin: 0 auto;
}
@media (max-width: 991px) {
.home4-process-section .process-content .process-list {
max-width: unset;
margin: 0;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 30px;
padding-top: 40px;
}
}
@media (max-width: 767px) {
.home4-process-section .process-content .process-list {
gap: 25px;
padding-top: 30px;
}
}
.home4-process-section .process-content .process-list li {
margin-bottom: 30px;
}
@media (max-width: 991px) {
.home4-process-section .process-content .process-list li {
margin-bottom: 0;
max-width: 300px;
width: 100%;
}
}
@media (max-width: 767px) {
.home4-process-section .process-content .process-list li {
max-width: 245px;
}
}
.home4-process-section .process-content .process-list li:last-child {
margin-bottom: 0;
}
.home4-process-section .process-content .process-list li .single-process span {
color: var(--primary-color2);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.06em;
display: block;
margin-bottom: 10px;
}
.home4-process-section .process-content .process-list li .single-process h4 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 25px;
font-weight: 400;
line-height: 1.3;
letter-spacing: 0.03em;
margin-bottom: 15px;
}
@media (max-width: 767px) {
.home4-process-section .process-content .process-list li .single-process h4 {
font-size: 23px;
margin-bottom: 10px;
}
}
.home4-process-section .process-content .process-list li .single-process p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.8;
margin-bottom: 0;
}
@media (max-width: 767px) {
.home4-process-section .process-content .process-list li .single-process p {
font-size: 15px;
}
}
.home4-process-section .process-content .process-list li .arrow {
margin-top: 25px;
fill: rgba(var(--primary-color-opc), 0.15);
margin-left: 45px;
}
@media (max-width: 991px) {
.home4-process-section .process-content .process-list li .arrow {
display: none;
}
}
.home4-process-section .process-video-area {
position: sticky;
top: 110px;
}
.home4-process-section .process-video-area::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(var(--primary-color-opc), 0.4);
}
@media (max-width: 576px) {
.home4-process-section .process-video-area img {
min-height: 300px;
-o-object-fit: cover;
object-fit: cover;
}
}
.home4-process-section .process-video-area .play-btn {
cursor: pointer;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.home4-process-section .process-video-area .play-btn .icon {
position: relative;
}
.home4-process-section .process-video-area .play-btn .icon .video-circle {
stroke: var(--white-color);
fill: none;
transition: 0.5s;
}
@media (max-width: 576px) {
.home4-process-section .process-video-area .play-btn .icon .video-circle {
width: 65px;
}
}
.home4-process-section .process-video-area .play-btn .icon .video-circle .top-half {
stroke-dasharray: 430;
stroke-dashoffset: 320;
transition: stroke-dashoffset 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.home4-process-section .process-video-area .play-btn .icon .play-icon {
fill: var(--white-color);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-left: 2px;
}
@media (max-width: 576px) {
.home4-process-section .process-video-area .play-btn .icon .play-icon {
width: 20px;
}
}
.home4-process-section .process-video-area .play-btn:hover .icon .video-circle .top-half {
stroke-dashoffset: 0;
} .home4-why-choose-section .divider {
position: relative;
}
.home4-why-choose-section .divider::before {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 1px;
height: 80%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, #000000 50.5%, rgba(0, 0, 0, 0.05) 100%);
opacity: 0.1;
}
@media (max-width: 991px) {
.home4-why-choose-section .divider::before {
display: none;
}
}
.home4-why-choose-section .single-content {
max-width: 340px;
width: 100%;
padding: 0 10px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home4-why-choose-section .single-content {
max-width: 310px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home4-why-choose-section .single-content {
max-width: 290px;
}
}
.home4-why-choose-section .single-content .icon {
margin-bottom: 30px;
}
@media (max-width: 767px) {
.home4-why-choose-section .single-content .icon {
margin-bottom: 25px;
}
}
@media (max-width: 576px) {
.home4-why-choose-section .single-content .icon {
margin-bottom: 20px;
}
}
.home4-why-choose-section .single-content .icon svg {
fill: var(--primary-color2);
}
.home4-why-choose-section .single-content h4 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 25px;
font-weight: 400;
line-height: 1.3;
letter-spacing: 0.03em;
margin-bottom: 25px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.home4-why-choose-section .single-content h4 {
font-size: 23px;
margin-bottom: 20px;
}
}
@media (max-width: 767px) {
.home4-why-choose-section .single-content h4 {
margin-bottom: 20px;
}
}
@media (max-width: 576px) {
.home4-why-choose-section .single-content h4 {
margin-bottom: 15px;
font-size: 24px;
}
}
.home4-why-choose-section .single-content p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.8;
margin-bottom: 0;
}
@media (min-width: 992px) and (max-width: 1199px) {
.home4-why-choose-section .single-content p {
font-size: 15px;
}
}
.home4-why-choose-section .single-content.border-btm {
padding-bottom: 45px;
position: relative;
}
@media (max-width: 991px) {
.home4-why-choose-section .single-content.border-btm {
padding-bottom: 0;
}
}
.home4-why-choose-section .single-content.border-btm::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0%, #000000 50.5%, rgba(0, 0, 0, 0.05) 100%);
opacity: 0.1;
}
@media (max-width: 991px) {
.home4-why-choose-section .single-content.border-btm::before {
display: none;
}
} .home4-banner2-section {
position: relative;
}
.home4-banner2-section video {
width: 100%;
min-height: 400px;
height: 85vh;
-o-object-fit: cover;
object-fit: cover;
}
@keyframes up-down2 {
0% {
transform: translateY(35px);
}
50% {
transform: translateY(20px);
}
100% {
transform: translateY(35px);
}
}
.home4-banner2-section .video-content {
background-color: rgba(var(--primary-color-opc), 0.5);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.home4-banner2-section .banner-content-wrap {
padding: 80px 0;
text-align: center;
max-width: 635px;
width: 100%;
}
@media (max-width: 1199px) {
.home4-banner2-section .banner-content-wrap {
max-width: 570px;
}
}
.home4-banner2-section .banner-content-wrap .banner-content {
margin-bottom: 10px;
}
.home4-banner2-section .banner-content-wrap .banner-content h2 {
color: var(--white-color);
font-family: var(--font-kanit);
font-size: 75px;
font-weight: 600;
line-height: 1.1;
letter-spacing: 0.05em;
margin-bottom: 0;
display: flex;
}
.home4-banner2-section .banner-content-wrap .banner-content h2:nth-child(2) {
padding-left: 20px;
justify-content: end;
}
@media (max-width: 576px) {
.home4-banner2-section .banner-content-wrap .banner-content h2:nth-child(2) {
padding-left: 0;
justify-content: center;
}
}
@media (max-width: 1199px) {
.home4-banner2-section .banner-content-wrap .banner-content h2 {
font-size: 68px;
}
}
@media (max-width: 767px) {
.home4-banner2-section .banner-content-wrap .banner-content h2 {
font-size: 62px;
}
}
@media (max-width: 576px) {
.home4-banner2-section .banner-content-wrap .banner-content h2 {
font-size: 48px;
justify-content: center;
}
}
.home4-banner2-section .banner-content-wrap .scroll-down-btn {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
animation: up-down2 2s linear infinite alternate;
}
.home4-banner2-section .banner-content-wrap .scroll-down-btn .scroll-down-icon {
width: 37px;
height: 72px;
border-radius: 110px;
border: 1px solid rgba(255, 255, 255, 0.5);
background-color: rgba(255, 255, 255, 0.2);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
transition: 0.5s;
}
.home4-banner2-section .banner-content-wrap .scroll-down-btn .scroll-down-icon svg {
fill: none;
stroke: rgba(255, 255, 255, 0.5);
transition: 0.5s;
}
.home4-banner2-section .banner-content-wrap .scroll-down-btn span {
color: var(--white-color);
font-family: var(--font-kanit);
font-size: 15px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.06em;
display: block;
padding-top: 10px;
}
.home4-banner2-section .banner-content-wrap .scroll-down-btn:hover .scroll-down-icon {
background-color: var(--white-color);
}
.home4-banner2-section .banner-content-wrap .scroll-down-btn:hover .scroll-down-icon svg {
stroke: var(--title-color);
} .contact-form-wrap {
padding: 45px 50px;
background-color: #FAF8FB;
border-radius: 20px;
margin-left: 50px;
}
@media (max-width: 1399px) {
.contact-form-wrap {
padding: 45px 40px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.contact-form-wrap {
padding: 40px 30px;
margin-left: 20px;
}
}
@media (max-width: 991px) {
.contact-form-wrap {
margin-left: 0;
}
}
@media (max-width: 767px) {
.contact-form-wrap {
padding: 40px 30px;
border-radius: 15px;
}
}
@media (max-width: 576px) {
.contact-form-wrap {
padding: 35px 20px;
}
}
.contact-form-wrap .form-inner textarea {
min-height: 90px;
resize: none;
}
.contact-form-wrap .nice-select {
border: 1px solid rgba(var(--primary-color-opc), 0.2);
}
.contact-form-wrap .nice-select::after {
height: unset;
width: unset;
border-bottom: unset;
border-right: unset;
right: 20px;
margin-top: -5px;
content: url(//www.husetconstruction.com/wp-content/themes/vernex/assets/img/home4/icon/nice-select-down-arrow.svg);
transform: unset;
transition: all 0.15s ease-in-out;
}
.contact-form-wrap .nice-select.open::after {
content: url(//www.husetconstruction.com/wp-content/themes/vernex/assets/img/home4/icon/nice-select-down-up.svg);
}
.contact-form-wrap .nice-select:focus {
border-color: var(--primary-color);
}
.contact-form-wrap .nice-select .list .option {
color: var(--title-color);
}
.contact-form-wrap .nice-select .list .option:hover {
color: var(--white-color);
background-color: var(--primary-color);
}
.contact-form-wrap .primary-btn2 {
margin-top: 45px;
}
@media (max-width: 576px) {
.contact-form-wrap .primary-btn2 {
margin-top: 35px;
}
} .home4-testimonial-section .home4-testimonial-img-slider {
height: 100%;
}
.home4-testimonial-section .testimonial-img {
height: 100%;
}
@media (max-width: 1199px) {
.home4-testimonial-section .testimonial-img {
min-height: 600px;
}
}
.home4-testimonial-section .testimonial-img .preview_image {
height: 100%;
}
.home4-testimonial-section .testimonial-img .preview_image .twentytwenty-wrapper {
height: 100%;
}
.home4-testimonial-section .testimonial-img .preview_image .twentytwenty-container {
height: 100% !important;
width: 100%;
}
.home4-testimonial-section .testimonial-img .preview_image .twentytwenty-container img {
border-radius: unset;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
width: 100%;
}
.home4-testimonial-section .testimonial-img .preview_image .twentytwenty-container .twentytwenty-overlay {
background-color: rgba(var(--primary-color-opc), 0.2);
border-radius: unset;
opacity: 1;
}
.home4-testimonial-section .testimonial-img .preview_image .twentytwenty-container .twentytwenty-overlay .twentytwenty-before-label,
.home4-testimonial-section .testimonial-img .preview_image .twentytwenty-container .twentytwenty-overlay .twentytwenty-after-label {
opacity: 1;
}
.home4-testimonial-section .testimonial-img .preview_image .twentytwenty-container .twentytwenty-overlay .twentytwenty-before-label::before,
.home4-testimonial-section .testimonial-img .preview_image .twentytwenty-container .twentytwenty-overlay .twentytwenty-after-label::before {
background: rgba(var(--primary-color-opc), 0.3);
border: 1px solid rgba(255, 255, 255, 0.5);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
font-family: var(--font-kanit);
font-size: 16px;
font-weight: 400;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.home4-testimonial-section .testimonial-img .preview_image .twentytwenty-container .twentytwenty-handle {
background-color: rgba(255, 255, 255, 0.7);
border: unset;
}
.home4-testimonial-section .testimonial-img .preview_image .twentytwenty-container .twentytwenty-handle::before, .home4-testimonial-section .testimonial-img .preview_image .twentytwenty-container .twentytwenty-handle::after {
background-color: var(--white-color);
box-shadow: 0 3px 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5);
}
.home4-testimonial-section .testimonial-img .preview_image .twentytwenty-container .twentytwenty-handle::after {
box-shadow: 0 -3px 0 #fff, 0px 0px 12px rgba(51, 51, 51, 0.5);
}
.home4-testimonial-section .testimonial-img .preview_image .twentytwenty-container .twentytwenty-handle .twentytwenty-left-arrow {
border-right: 6px solid var(--title-color);
}
.home4-testimonial-section .testimonial-img .preview_image .twentytwenty-container .twentytwenty-handle .twentytwenty-right-arrow {
border-left: 6px solid var(--title-color);
}
.home4-testimonial-section .testimonial-content-area {
background-color: #FBF8F3;
padding: 85px 35px 35px;
height: 100%;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home4-testimonial-section .testimonial-content-area {
padding: 60px 25px 30px;
}
}
@media (max-width: 1399px) {
.home4-testimonial-section .testimonial-content-area {
padding: 60px 25px 30px;
}
}
@media (max-width: 991px) {
.home4-testimonial-section .testimonial-content-area {
padding: 70px 25px;
}
}
@media (max-width: 767px) {
.home4-testimonial-section .testimonial-content-area {
padding: 70px 20px;
}
}
@media (max-width: 576px) {
.home4-testimonial-section .testimonial-content-area {
padding: 70px 10px;
}
}
.home4-testimonial-section .testimonial-content-area .section-title2 {
margin-bottom: 95px;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home4-testimonial-section .testimonial-content-area .section-title2 {
margin-bottom: 70px;
}
}
@media (max-width: 1399px) {
.home4-testimonial-section .testimonial-content-area .section-title2 {
margin-bottom: 70px;
}
}
@media (max-width: 767px) {
.home4-testimonial-section .testimonial-content-area .section-title2 {
margin-bottom: 50px;
}
}
.home4-testimonial-section .testimonial-content-area .testimonial-card-area {
padding: 40px 45px;
background-color: var(--white-color);
border-radius: 20px;
position: relative;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home4-testimonial-section .testimonial-content-area .testimonial-card-area {
padding: 30px 35px;
}
}
@media (max-width: 1399px) {
.home4-testimonial-section .testimonial-content-area .testimonial-card-area {
padding: 30px 25px;
}
}
@media (max-width: 576px) {
.home4-testimonial-section .testimonial-content-area .testimonial-card-area {
padding: 30px 20px;
}
}
.home4-testimonial-section .testimonial-content-area .testimonial-card-area .testimonial-content-wrap {
text-align: center;
}
.home4-testimonial-section .testimonial-content-area .testimonial-card-area .testimonial-content-wrap .quote {
fill: var(--title-color);
margin-bottom: 30px;
}
@media (max-width: 576px) {
.home4-testimonial-section .testimonial-content-area .testimonial-card-area .testimonial-content-wrap .quote {
margin-bottom: 25px;
}
}
.home4-testimonial-section .testimonial-content-area .testimonial-card-area .testimonial-content-wrap > span {
color: var(--primary-color2);
font-family: var(--font-kanit);
font-size: 16px;
font-weight: 400;
line-height: 23.92px;
letter-spacing: 0.06em;
display: block;
margin-bottom: 20px;
}
@media (max-width: 1199px) {
.home4-testimonial-section .testimonial-content-area .testimonial-card-area .testimonial-content-wrap > span {
margin-bottom: 10px;
}
}
.home4-testimonial-section .testimonial-content-area .testimonial-card-area .testimonial-content-wrap p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 20px;
font-weight: 500;
line-height: 40px;
margin-bottom: 0;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home4-testimonial-section .testimonial-content-area .testimonial-card-area .testimonial-content-wrap p {
font-size: 19px;
}
}
@media (max-width: 576px) {
.home4-testimonial-section .testimonial-content-area .testimonial-card-area .testimonial-content-wrap p {
font-size: 17px;
line-height: 36px;
}
}
.home4-testimonial-section .testimonial-content-area .testimonial-card-area .testimonial-content-wrap .author-area {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding-top: 25px;
border-top: 1px solid rgba(var(--primary-color-opc), 0.1);
margin-top: 40px;
}
@media (max-width: 1199px) {
.home4-testimonial-section .testimonial-content-area .testimonial-card-area .testimonial-content-wrap .author-area {
margin-top: 35px;
}
}
@media (max-width: 576px) {
.home4-testimonial-section .testimonial-content-area .testimonial-card-area .testimonial-content-wrap .author-area {
margin-top: 25px;
padding-top: 15px;
}
}
.home4-testimonial-section .testimonial-content-area .testimonial-card-area .testimonial-content-wrap .author-area .author-img img {
min-width: 50px;
max-width: 50px;
height: 50px;
border-radius: 50%;
}
.home4-testimonial-section .testimonial-content-area .testimonial-card-area .testimonial-content-wrap .author-area .author-content {
text-align: start;
}
.home4-testimonial-section .testimonial-content-area .testimonial-card-area .testimonial-content-wrap .author-area .author-content h5 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 21px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.03em;
margin-bottom: 3px;
}
.home4-testimonial-section .testimonial-content-area .testimonial-card-area .testimonial-content-wrap .author-area .author-content span {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 15px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.03em;
}
@media (max-width: 576px) {
.home4-testimonial-section .testimonial-content-area .testimonial-card-area .slider-btn-grp {
display: none;
}
}
.home4-testimonial-section .testimonial-content-area .testimonial-card-area .slider-btn-grp .slider-btn {
position: absolute;
bottom: 45px;
left: 45px;
min-width: 35px;
max-width: 35px;
height: 35px;
z-index: 1;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home4-testimonial-section .testimonial-content-area .testimonial-card-area .slider-btn-grp .slider-btn {
left: 35px;
}
}
@media (max-width: 1399px) {
.home4-testimonial-section .testimonial-content-area .testimonial-card-area .slider-btn-grp .slider-btn {
left: 25px;
}
}
.home4-testimonial-section .testimonial-content-area .testimonial-card-area .slider-btn-grp .slider-btn i {
font-size: 17px;
}
.home4-testimonial-section .testimonial-content-area .testimonial-card-area .slider-btn-grp .slider-btn.home4-testimonial-next {
left: unset;
right: 45px;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home4-testimonial-section .testimonial-content-area .testimonial-card-area .slider-btn-grp .slider-btn.home4-testimonial-next {
right: 35px;
}
}
@media (max-width: 1399px) {
.home4-testimonial-section .testimonial-content-area .testimonial-card-area .slider-btn-grp .slider-btn.home4-testimonial-next {
right: 25px;
}
}
.home4-testimonial-section .home4-testimonial-content-slider .swiper-slide-active .quote,
.home4-testimonial-section .home4-testimonial-content-slider .swiper-slide-active span,
.home4-testimonial-section .home4-testimonial-content-slider .swiper-slide-active p {
animation: fadeInDown 1.7s;
}
.home4-testimonial-section .home4-testimonial-content-slider .swiper-slide-active .author-area {
animation: fadeInUp 1.7s;
} @media (max-width: 991px) {
.home4-blog-section .blog-title-area {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 25px;
}
}
.home4-blog-section .blog-title-area .section-title2 {
margin-bottom: 50px;
}
@media (max-width: 1199px) {
.home4-blog-section .blog-title-area .section-title2 {
margin-bottom: 40px;
}
}
@media (max-width: 991px) {
.home4-blog-section .blog-title-area .section-title2 {
margin-bottom: 0;
}
}
.home4-blog-section .blog-title-area .section-title2 p {
max-width: 336px;
width: 100%;
}
@media (min-width: 992px) and (max-width: 1199px) {
.home4-blog-section .blog-title-area .section-title2 p {
font-size: 14px;
}
}
@media (max-width: 767px) {
.home4-blog-section .blog-title-area .section-title2 p {
max-width: unset;
}
} .home5-banner-section {
display: flex;
overflow: hidden;
}
.home5-banner-section .social-list {
padding: 0;
margin: 0;
list-style: none;
padding: 200px 40px 40px;
display: flex;
align-items: center;
flex-direction: column;
gap: 60px;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home5-banner-section .social-list {
padding: 180px 40px 40px;
}
}
@media (max-width: 1399px) {
.home5-banner-section .social-list {
padding: 160px 20px 40px;
}
}
@media (max-width: 1199px) {
.home5-banner-section .social-list {
padding: 140px 10px 40px;
}
}
@media (max-width: 991px) {
.home5-banner-section .social-list {
display: none;
}
}
.home5-banner-section .social-list li {
position: relative;
}
.home5-banner-section .social-list li:last-child::before {
display: none;
}
.home5-banner-section .social-list li::before {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -30px;
width: 3px;
height: 3px;
border-radius: 50%;
background-color: rgba(var(--primary-color-opc), 0.2);
}
.home5-banner-section .social-list li a {
color: rgba(var(--primary-color-opc), 0.5);
transition: 0.5s;
}
.home5-banner-section .social-list li a i {
font-size: 20px;
}
.home5-banner-section .social-list li a i.bi-twitter-x {
font-size: 16px;
}
.home5-banner-section .social-list li a:hover {
color: var(--primary-color);
}
.home5-banner-section .banner-area {
position: relative;
overflow: hidden;
width: 100%;
}
.home5-banner-section .banner-area .banner-wrapper .banner-bg {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
min-height: 820px;
position: relative;
animation: large 26s linear infinite alternate;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home5-banner-section .banner-area .banner-wrapper .banner-bg {
min-height: 95vh;
}
}
@media (max-width: 1399px) {
.home5-banner-section .banner-area .banner-wrapper .banner-bg {
min-height: 90vh;
}
}
@media (max-width: 576px) {
.home5-banner-section .banner-area .banner-wrapper .banner-bg {
min-height: 85vh;
}
}
.home5-banner-section .banner-area .banner-wrapper .banner-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
padding: 270px 20px;
}
@media (max-width: 1399px) {
.home5-banner-section .banner-area .banner-wrapper .banner-content {
padding: 250px 20px;
}
}
@media (max-width: 767px) {
.home5-banner-section .banner-area .banner-wrapper .banner-content {
padding: 190px 25px;
}
}
@media (max-width: 576px) {
.home5-banner-section .banner-area .banner-wrapper .banner-content {
padding: 120px 20px;
display: flex;
align-items: center;
}
}
.home5-banner-section .banner-area .banner-wrapper .banner-content h1 {
color: rgba(255, 255, 255, 0.5);
font-family: var(--font-inter);
font-size: 80px;
font-weight: 700;
line-height: 1.1;
letter-spacing: 0.06em;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home5-banner-section .banner-area .banner-wrapper .banner-content h1 {
font-size: 75px;
}
}
@media (max-width: 1399px) {
.home5-banner-section .banner-area .banner-wrapper .banner-content h1 {
font-size: 70px;
}
}
@media (max-width: 1199px) {
.home5-banner-section .banner-area .banner-wrapper .banner-content h1 {
font-size: 62px;
}
}
@media (max-width: 767px) {
.home5-banner-section .banner-area .banner-wrapper .banner-content h1 {
font-size: 57px;
}
}
@media (max-width: 576px) {
.home5-banner-section .banner-area .banner-wrapper .banner-content h1 {
font-size: 52px;
}
}
.home5-banner-section .banner-area .counter-area {
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
max-width: 1184px;
width: 100%;
background-color: var(--white-color);
padding: 36px 110px 36px 10px;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home5-banner-section .banner-area .counter-area {
max-width: 1084px;
}
}
@media (max-width: 1399px) {
.home5-banner-section .banner-area .counter-area {
max-width: 1000px;
padding: 30px 100px 30px 10px;
}
}
@media (max-width: 1199px) {
.home5-banner-section .banner-area .counter-area {
padding: 30px 70px 30px 10px;
max-width: 830px;
}
}
@media (max-width: 991px) {
.home5-banner-section .banner-area .counter-area {
padding: 25px 30px;
}
}
@media (max-width: 767px) {
.home5-banner-section .banner-area .counter-area {
padding: 25px 40px;
}
}
@media (max-width: 576px) {
.home5-banner-section .banner-area .counter-area {
position: relative;
}
}
.home5-banner-section .banner-area .counter-area ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
}
@media (max-width: 991px) {
.home5-banner-section .banner-area .counter-area ul {
justify-content: center;
}
}
@media (max-width: 767px) {
.home5-banner-section .banner-area .counter-area ul {
flex-wrap: wrap;
justify-content: space-between;
gap: 30px;
}
}
.home5-banner-section .banner-area .counter-area ul .single-counter {
padding: 16px 92px;
border-right: 1px solid rgba(var(--primary-color2-opc), 0.2);
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home5-banner-section .banner-area .counter-area ul .single-counter {
padding: 16px 80px;
}
}
@media (max-width: 1399px) {
.home5-banner-section .banner-area .counter-area ul .single-counter {
padding: 16px 75px;
}
}
@media (max-width: 1199px) {
.home5-banner-section .banner-area .counter-area ul .single-counter {
padding: 16px 50px;
}
}
@media (max-width: 991px) {
.home5-banner-section .banner-area .counter-area ul .single-counter {
padding: 12px 40px;
}
}
@media (max-width: 767px) {
.home5-banner-section .banner-area .counter-area ul .single-counter {
padding: 0;
border: unset;
}
}
.home5-banner-section .banner-area .counter-area ul .single-counter:first-child {
padding-left: 0;
}
.home5-banner-section .banner-area .counter-area ul .single-counter:last-child {
padding-right: 0;
border-right: unset;
}
.home5-banner-section .banner-area .counter-area ul .single-counter .number {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.home5-banner-section .banner-area .counter-area ul .single-counter .number h2,
.home5-banner-section .banner-area .counter-area ul .single-counter .number span {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 42px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.03em;
margin-bottom: 0;
}
@media (min-width: 992px) and (max-width: 1199px) {
.home5-banner-section .banner-area .counter-area ul .single-counter .number h2,
.home5-banner-section .banner-area .counter-area ul .single-counter .number span {
font-size: 40px;
}
}
@media (max-width: 991px) {
.home5-banner-section .banner-area .counter-area ul .single-counter .number h2,
.home5-banner-section .banner-area .counter-area ul .single-counter .number span {
font-size: 38px;
}
}
.home5-banner-section .banner-area .counter-area ul .single-counter span {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 14px;
font-weight: 500;
line-height: 1.5;
}
.home5-banner-section .home5-banner-slider .swiper-slide-active .banner-content {
animation: fadeInUp 1.7s;
} .home5-service-section {
background-color: #FBF8F3;
padding: 110px 0;
}
@media (max-width: 1199px) {
.home5-service-section {
padding: 90px 0;
}
}
@media (max-width: 767px) {
.home5-service-section {
padding: 70px 0;
}
}
.home5-service-section .service-slider-area {
padding: 0 11%;
}
@media (max-width: 1799px) {
.home5-service-section .service-slider-area {
padding: 0 8%;
}
}
@media (max-width: 1699px) {
.home5-service-section .service-slider-area {
padding: 0 5%;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home5-service-section .service-slider-area {
padding: 0 2%;
}
}
@media (max-width: 1399px) {
.home5-service-section .service-slider-area {
padding: 0 20px;
}
}
.home5-service-section .service-slider-area .service-card2 {
padding: 35px 40px;
background-color: var(--white-color);
position: relative;
overflow: hidden;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home5-service-section .service-slider-area .service-card2 {
padding: 35px 30px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home5-service-section .service-slider-area .service-card2 {
padding: 30px 20px;
}
}
@media (max-width: 1199px) {
.home5-service-section .service-slider-area .service-card2 {
padding: 30px 25px;
}
}
.home5-service-section .service-slider-area .service-card2 .icon {
margin-bottom: 25px;
}
.home5-service-section .service-slider-area .service-card2 .icon svg {
fill: rgba(var(--primary-color-opc), 0.5);
}
.home5-service-section .service-slider-area .service-card2 h3 {
margin-bottom: 23px;
}
.home5-service-section .service-slider-area .service-card2 h3 a {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 28px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.05em;
transition: 0.5s;
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home5-service-section .service-slider-area .service-card2 h3 a {
font-size: 26px;
}
}
.home5-service-section .service-slider-area .service-card2 h3 a:hover {
color: var(--primary-color2);
}
.home5-service-section .service-slider-area .service-card2 p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.6;
margin-bottom: 35px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home5-service-section .service-slider-area .service-card2 p {
font-size: 14px;
}
}
.home5-service-section .service-slider-area .service-card2 .more-btn {
color: var(--title-color);
font-family: var(--font-inter);
font-size: 12px;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.02em;
white-space: nowrap;
position: relative;
display: inline-block;
background: linear-gradient(to bottom, var(--primary-color2) 0%, var(--primary-color2) 98%);
background-repeat: no-repeat;
background-size: 100% 2px;
background-position: left 100%;
transition: background-size 0.75s;
}
.home5-service-section .service-slider-area .service-card2 .more-btn:hover {
background-size: 0 1px;
background-position: 0% 100%;
color: var(--primary-color2);
}
.home5-service-section .service-slider-area .service-card2 .arrow {
position: absolute;
top: -80px;
right: -80px;
transition: 0.5s;
}
.home5-service-section .service-slider-area .service-card2 .arrow svg {
fill: rgba(var(--primary-color-opc), 0.02);
transition: 0.5s;
}
.home5-service-section .service-slider-area .service-card2 .arrow svg:hover {
fill: rgba(var(--primary-color2-opc), 0.1);
}
.home5-service-section .service-slider-area .service-card2:hover .icon svg {
animation: bounceIn 1.2s linear;
}
.home5-service-section .service-slider-area .service-card2:hover .arrow {
top: 0;
right: 0;
} .home5-about-section .pt-120 {
padding-top: 120px;
}
@media (max-width: 1199px) {
.home5-about-section .pt-120 {
padding-top: 80px;
}
}
@media (max-width: 991px) {
.home5-about-section .pt-120 {
padding-top: 0;
}
}
@media (max-width: 991px) {
.home5-about-section .section-title {
margin-bottom: 60px;
}
}
.home5-about-section .section-title .primary-btn {
margin-top: 45px;
background-image: linear-gradient(0deg, var(--primary-color2) 0%, var(--primary-color2) 100%);
color: var(--primary-color2);
}
@media (max-width: 1199px) {
.home5-about-section .section-title .primary-btn {
margin-top: 35px;
}
}
@media (max-width: 991px) {
.home5-about-section .section-title .primary-btn {
margin-top: 25px;
}
}
.home5-about-section .section-title .primary-btn::after {
color: var(--primary-color2);
}
.home5-about-section .section-title .primary-btn svg {
stroke: var(--primary-color2);
}
.home5-about-section .single-about {
text-align: center;
}
.home5-about-section .single-about .about-img {
width: 466px;
height: 466px;
border-radius: 50%;
margin: 0 auto;
margin-bottom: 30px;
}
@media (max-width: 1199px) {
.home5-about-section .single-about .about-img {
width: 400px;
height: 400px;
margin-bottom: 25px;
}
}
@media (max-width: 576px) {
.home5-about-section .single-about .about-img {
width: 280px;
height: 280px;
margin-bottom: 20px;
}
}
.home5-about-section .single-about .about-img img {
width: 466px;
height: 466px;
border-radius: 50%;
}
@media (max-width: 1199px) {
.home5-about-section .single-about .about-img img {
width: 400px;
height: 400px;
}
}
@media (max-width: 576px) {
.home5-about-section .single-about .about-img img {
width: 280px;
height: 280px;
}
}
.home5-about-section .single-about .about-content p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.9;
margin-bottom: 0;
}
@media (max-width: 576px) {
.home5-about-section .single-about .about-content p {
font-size: 14px;
}
}
.home5-about-section .single-about .about-content h3 {
color: var(--title-color);
font-family: var(--font-inter);
font-size: 30px;
font-weight: 500;
line-height: 1.5;
text-transform: uppercase;
margin-bottom: 0;
}
@media (max-width: 1199px) {
.home5-about-section .single-about .about-content h3 {
font-size: 28px;
}
}
@media (max-width: 767px) {
.home5-about-section .single-about .about-content h3 {
font-size: 25px;
}
}
@media (max-width: 576px) {
.home5-about-section .single-about .about-content h3 {
font-size: 22px;
}
}
.home5-about-section .single-about .about-content h3 span {
color: rgba(var(--title-color-opc), 0.5);
} .home5-faq-section {
background-color: #1F1F1F;
padding: 100px 0;
}
@media (max-width: 1199px) {
.home5-faq-section {
padding: 90px 0;
}
}
@media (max-width: 767px) {
.home5-faq-section {
padding: 70px 0;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home5-faq-section .section-title h2 {
font-size: 48px;
}
}
.home5-faq-section .faq-wrap .accordion .accordion-item {
border: none;
background-color: rgba(255, 255, 255, 0.2);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border-radius: 5px;
margin-bottom: 18px;
}
.home5-faq-section .faq-wrap .accordion .accordion-item:last-child {
margin-bottom: 0;
}
.home5-faq-section .faq-wrap .accordion .accordion-item .accordion-header {
padding: 10px 25px 10px 30px;
border-radius: 5px;
}
@media (max-width: 767px) {
.home5-faq-section .faq-wrap .accordion .accordion-item .accordion-header {
padding: 10px 20px;
}
}
.home5-faq-section .faq-wrap .accordion .accordion-item .accordion-header .accordion-button {
border: none;
border-radius: unset;
box-shadow: none;
background-color: transparent;
padding: 0;
border: unset;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border-radius: 5px;
}
@media (max-width: 576px) {
.home5-faq-section .faq-wrap .accordion .accordion-item .accordion-header .accordion-button {
font-size: 17px;
}
}
.home5-faq-section .faq-wrap .accordion .accordion-item .accordion-header .accordion-button .step-no-and-title {
display: flex;
align-items: center;
gap: 25px;
}
@media (max-width: 767px) {
.home5-faq-section .faq-wrap .accordion .accordion-item .accordion-header .accordion-button .step-no-and-title {
gap: 20px;
}
}
@media (max-width: 576px) {
.home5-faq-section .faq-wrap .accordion .accordion-item .accordion-header .accordion-button .step-no-and-title {
gap: 15px;
}
}
.home5-faq-section .faq-wrap .accordion .accordion-item .accordion-header .accordion-button .step-no-and-title span {
color: var(--white-color);
font-family: var(--font-inter);
font-size: 18px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.02em;
display: inline-block;
padding: 10px 16px;
background-color: rgba(31, 31, 31, 0.4);
border-radius: 100px;
}
@media (max-width: 576px) {
.home5-faq-section .faq-wrap .accordion .accordion-item .accordion-header .accordion-button .step-no-and-title span {
font-size: 15px;
padding: 10px 14px;
}
}
.home5-faq-section .faq-wrap .accordion .accordion-item .accordion-header .accordion-button .step-no-and-title h6 {
color: var(--white-color);
font-family: var(--font-inter);
font-size: 18px;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.02em;
margin-bottom: 0;
}
@media (max-width: 576px) {
.home5-faq-section .faq-wrap .accordion .accordion-item .accordion-header .accordion-button .step-no-and-title h6 {
font-size: 16px;
}
}
.home5-faq-section .faq-wrap .accordion .accordion-item .accordion-header .accordion-button svg {
min-width: 14px;
fill: var(--white-color);
transition: transform 0.2s ease-in-out;
}
.home5-faq-section .faq-wrap .accordion .accordion-item .accordion-header .accordion-button::after {
display: none;
content: "";
margin: 0;
}
.home5-faq-section .faq-wrap .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
color: var(--white-color);
}
.home5-faq-section .faq-wrap .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) svg {
transform: rotate(-180deg);
fill: var(--white-color);
}
.home5-faq-section .faq-wrap .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::after {
content: "";
}
.home5-faq-section .faq-wrap .accordion .accordion-item .accordion-body {
padding: 10px 90px 20px 157px;
color: rgba(255, 255, 255, 0.7);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.9;
letter-spacing: 0.48px;
}
@media (max-width: 767px) {
.home5-faq-section .faq-wrap .accordion .accordion-item .accordion-body {
padding: 5px 40px 20px 143px;
}
}
@media (max-width: 576px) {
.home5-faq-section .faq-wrap .accordion .accordion-item .accordion-body {
font-size: 14px;
padding: 10px 30px;
}
}
@media (max-width: 991px) {
.home5-faq-section .faq-img {
display: none;
}
}
.home5-faq-section .faq-img img {
min-width: 656px;
width: 100%;
}
@media (max-width: 1699px) {
.home5-faq-section .faq-img img {
min-width: 520px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home5-faq-section .faq-img img {
min-width: 480px;
}
}
@media (max-width: 1199px) {
.home5-faq-section .faq-img img {
min-width: unset;
}
} .home5-award-section {
background-color: #F5FAFC;
padding: 110px 0;
}
.home5-award-section .section-title {
max-width: 578px;
width: 100%;
}
.home5-award-section .award-area {
padding: 0 9%;
}
@media (max-width: 1799px) {
.home5-award-section .award-area {
padding: 0 6%;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home5-award-section .award-area {
padding: 0 2%;
}
}
@media (max-width: 1399px) {
.home5-award-section .award-area {
padding: 0 1%;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home5-award-section .award-area {
padding: 0 10px;
}
}
@media (max-width: 767px) {
.home5-award-section .award-area {
padding: 0 10px;
}
}
.home5-award-section .award-area .single-award {
padding: 35px 30px;
background-color: var(--white-color);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home5-award-section .award-area .single-award {
padding: 35px 20px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home5-award-section .award-area .single-award {
padding: 30px 15px;
}
}
@media (max-width: 767px) {
.home5-award-section .award-area .single-award {
padding: 30px 20px;
}
}
@media (max-width: 576px) {
.home5-award-section .award-area .single-award {
flex-direction: column;
gap: 40px;
}
}
.home5-award-section .award-area .single-award .logo {
min-width: 122px;
max-width: 122px;
width: 100%;
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home5-award-section .award-area .single-award .logo {
min-width: 110px;
max-width: 110px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home5-award-section .award-area .single-award .logo {
min-width: 100px;
max-width: 100px;
}
}
@media (max-width: 767px) {
.home5-award-section .award-area .single-award .logo {
min-width: 115px;
max-width: 115px;
}
}
@media (max-width: 576px) {
.home5-award-section .award-area .single-award .logo {
margin: 0 auto;
}
}
.home5-award-section .award-area .single-award .logo img {
max-width: 122px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home5-award-section .award-area .single-award .logo img {
max-width: 110px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home5-award-section .award-area .single-award .logo img {
max-width: 100px;
}
}
@media (max-width: 767px) {
.home5-award-section .award-area .single-award .logo img {
max-width: 115px;
}
}
@media (max-width: 576px) {
.home5-award-section .award-area .single-award .logo img {
max-width: unset;
}
}
.home5-award-section .award-area .single-award svg {
fill: rgba(var(--primary-color-opc), 0.2);
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home5-award-section .award-area .single-award svg {
min-width: 35px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home5-award-section .award-area .single-award svg {
min-width: 35px;
}
}
@media (max-width: 767px) {
.home5-award-section .award-area .single-award svg {
min-width: 35px;
}
}
@media (max-width: 576px) {
.home5-award-section .award-area .single-award svg {
transform: rotate(90deg);
min-width: 30px;
}
}
.home5-award-section .award-area .single-award h6,
.home5-award-section .award-area .single-award span {
color: var(--title-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.02em;
margin-bottom: 0;
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home5-award-section .award-area .single-award h6,
.home5-award-section .award-area .single-award span {
font-size: 15px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home5-award-section .award-area .single-award h6,
.home5-award-section .award-area .single-award span {
font-size: 14px;
}
}
@media (max-width: 576px) {
.home5-award-section .award-area .single-award h6,
.home5-award-section .award-area .single-award span {
font-size: 15px;
}
}
.home5-award-section .award-area .single-award h6 {
min-width: 150px;
max-width: 150px;
width: 100%;
text-align: center;
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home5-award-section .award-area .single-award h6 {
min-width: 145px;
max-width: 145px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home5-award-section .award-area .single-award h6 {
min-width: 85px;
max-width: 85px;
}
}
@media (max-width: 767px) {
.home5-award-section .award-area .single-award h6 {
min-width: 85px;
max-width: 85px;
}
}
@media (max-width: 576px) {
.home5-award-section .award-area .single-award h6 {
min-width: unset;
max-width: unset;
}
}
.home5-award-section .award-area .single-award span {
min-width: 152px;
max-width: 152px;
width: 100%;
text-align: end;
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home5-award-section .award-area .single-award span {
min-width: 145px;
max-width: 145px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home5-award-section .award-area .single-award span {
min-width: 100px;
max-width: 100px;
}
}
@media (max-width: 767px) {
.home5-award-section .award-area .single-award span {
min-width: 100px;
max-width: 100px;
}
}
@media (max-width: 576px) {
.home5-award-section .award-area .single-award span {
min-width: unset;
max-width: unset;
text-align: center;
}
} .home5-testimonial-section {
background-color: #FBF8F3;
padding: 100px 0;
}
@media (max-width: 1199px) {
.home5-testimonial-section {
padding: 90px 0;
}
}
@media (max-width: 767px) {
.home5-testimonial-section {
padding: 70px 0;
}
}
.home5-testimonial-section .testimonial-img {
padding-right: 50px;
}
@media (max-width: 1399px) {
.home5-testimonial-section .testimonial-img {
padding-right: 20px;
}
}
@media (max-width: 1199px) {
.home5-testimonial-section .testimonial-img {
padding-right: 0;
}
}
@media (max-width: 991px) {
.home5-testimonial-section .testimonial-img {
display: none;
}
}
.home5-testimonial-section .testimonial-card-area {
padding: 50px 35px;
background-color: var(--white-color);
border-radius: 20px;
position: relative;
}
@media (max-width: 1399px) {
.home5-testimonial-section .testimonial-card-area {
padding: 30px 25px;
}
}
@media (max-width: 576px) {
.home5-testimonial-section .testimonial-card-area {
padding: 30px 20px;
}
}
.home5-testimonial-section .testimonial-card-area .testimonial-content-wrap {
text-align: center;
}
.home5-testimonial-section .testimonial-card-area .testimonial-content-wrap .quote {
fill: var(--title-color);
margin-bottom: 30px;
}
@media (max-width: 576px) {
.home5-testimonial-section .testimonial-card-area .testimonial-content-wrap .quote {
margin-bottom: 25px;
}
}
.home5-testimonial-section .testimonial-card-area .testimonial-content-wrap > span {
color: var(--primary-color2);
font-family: var(--font-kanit);
font-size: 16px;
font-weight: 400;
line-height: 23.92px;
letter-spacing: 0.06em;
display: block;
margin-bottom: 20px;
}
@media (max-width: 1199px) {
.home5-testimonial-section .testimonial-card-area .testimonial-content-wrap > span {
margin-bottom: 10px;
}
}
.home5-testimonial-section .testimonial-card-area .testimonial-content-wrap p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 20px;
font-weight: 500;
line-height: 40px;
margin-bottom: 0;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home5-testimonial-section .testimonial-card-area .testimonial-content-wrap p {
font-size: 19px;
}
}
@media (max-width: 576px) {
.home5-testimonial-section .testimonial-card-area .testimonial-content-wrap p {
font-size: 17px;
line-height: 36px;
}
}
.home5-testimonial-section .testimonial-card-area .testimonial-content-wrap .author-area {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding-top: 25px;
border-top: 1px solid rgba(var(--primary-color-opc), 0.1);
margin-top: 55px;
}
@media (max-width: 1399px) {
.home5-testimonial-section .testimonial-card-area .testimonial-content-wrap .author-area {
margin-top: 45px;
}
}
@media (max-width: 1199px) {
.home5-testimonial-section .testimonial-card-area .testimonial-content-wrap .author-area {
margin-top: 45px;
}
}
@media (max-width: 576px) {
.home5-testimonial-section .testimonial-card-area .testimonial-content-wrap .author-area {
margin-top: 25px;
padding-top: 15px;
}
}
.home5-testimonial-section .testimonial-card-area .testimonial-content-wrap .author-area .author-img img {
min-width: 50px;
max-width: 50px;
height: 50px;
border-radius: 50%;
}
.home5-testimonial-section .testimonial-card-area .testimonial-content-wrap .author-area .author-content {
text-align: start;
}
.home5-testimonial-section .testimonial-card-area .testimonial-content-wrap .author-area .author-content h5 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 21px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.03em;
margin-bottom: 3px;
}
.home5-testimonial-section .testimonial-card-area .testimonial-content-wrap .author-area .author-content span {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 15px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.03em;
}
@media (max-width: 576px) {
.home5-testimonial-section .testimonial-card-area .slider-btn-grp {
display: none;
}
}
.home5-testimonial-section .testimonial-card-area .slider-btn-grp .slider-btn {
position: absolute;
bottom: 45px;
left: 45px;
min-width: 35px;
max-width: 35px;
height: 35px;
z-index: 1;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home5-testimonial-section .testimonial-card-area .slider-btn-grp .slider-btn {
left: 35px;
}
}
@media (max-width: 1399px) {
.home5-testimonial-section .testimonial-card-area .slider-btn-grp .slider-btn {
left: 25px;
}
}
.home5-testimonial-section .testimonial-card-area .slider-btn-grp .slider-btn i {
font-size: 17px;
}
.home5-testimonial-section .testimonial-card-area .slider-btn-grp .slider-btn.home4-testimonial-next {
left: unset;
right: 45px;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home5-testimonial-section .testimonial-card-area .slider-btn-grp .slider-btn.home4-testimonial-next {
right: 35px;
}
}
@media (max-width: 1399px) {
.home5-testimonial-section .testimonial-card-area .slider-btn-grp .slider-btn.home4-testimonial-next {
right: 25px;
}
}
.home5-testimonial-section .home5-testimonial-slider .swiper-slide-active .quote,
.home5-testimonial-section .home5-testimonial-slider .swiper-slide-active span,
.home5-testimonial-section .home5-testimonial-slider .swiper-slide-active p {
animation: fadeInDown 1.7s;
}
.home5-testimonial-section .home5-testimonial-slider .swiper-slide-active .author-area {
animation: fadeInUp 1.7s;
}
.home5-testimonial-section .logo-section {
padding: 0;
padding-top: 110px;
border: unset;
}
@media (max-width: 1199px) {
.home5-testimonial-section .logo-section {
padding-top: 90px;
}
}
@media (max-width: 767px) {
.home5-testimonial-section .logo-section {
padding-top: 70px;
}
}
@media (max-width: 576px) {
.home5-testimonial-section .logo-section {
padding-top: 60px;
}
} .home5-contact-section .check-and-btn-area {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 25px;
} .main-container {
overflow: hidden;
}
.main-container .sidebar-wrapper {
position: fixed;
top: 0;
left: 0;
max-width: 90px;
width: 100%;
min-height: 100vh;
background-color: var(--primary-color);
padding: 30px 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
@media (max-width: 1399px) {
.main-container .sidebar-wrapper {
max-width: 80px;
}
}
@media (max-width: 1199px) {
.main-container .sidebar-wrapper {
max-width: 70px;
}
}
@media (max-width: 991px) {
.main-container .sidebar-wrapper {
max-width: unset;
min-height: unset;
position: relative;
flex-direction: row;
padding: 15px 30px;
}
.main-container .sidebar-wrapper.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
background-color: var(--primary-color);
box-shadow: 5px 3px 40px rgba(0, 72, 88, 0.1);
z-index: 9999;
}
@keyframes smooth-header {
0% {
transform: translateY(-30px);
}
100% {
transform: translateY(0px);
}
}
}
@media (max-width: 767px) {
.main-container .sidebar-wrapper {
padding: 15px 20px;
}
}
@media (max-width: 576px) {
.main-container .sidebar-wrapper {
padding: 10px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.main-container .sidebar-wrapper .sidebar-logo img {
width: 45px;
}
}
@media (max-width: 767px) {
.main-container .sidebar-wrapper .sidebar-logo img {
width: 45px;
}
}
@media (max-width: 576px) {
.main-container .sidebar-wrapper .sidebar-logo img {
width: 40px;
}
}
.main-container .sidebar-wrapper .menu-btn {
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.main-container .sidebar-wrapper .menu-btn::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--white-color);
z-index: -1;
}
.main-container .sidebar-wrapper .menu-btn svg {
fill: var(--title-color);
}
.main-container .sidebar-wrapper .menu-btn:hover svg {
animation: qode-draw 0.75s cubic-bezier(0.57, 0.39, 0, 0.86) 1 forwards;
}
.main-container .sidebar-wrapper .header-btn {
color: var(--white-color);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 400;
line-height: 20.93px;
text-transform: uppercase;
text-align: center;
}
@media (max-width: 991px) {
.main-container .sidebar-wrapper .header-btn {
display: none;
}
}
.main-container .sidebar-wrapper .header-btn span {
background: linear-gradient(to bottom, var(--white-color) 0%, var(--white-color) 98%);
background-repeat: no-repeat;
background-size: 100% 1px;
background-position: 0% 100%;
transition: background-size 0.75s;
line-height: 1;
}
.main-container .sidebar-wrapper .header-btn svg {
fill: var(--white-color);
display: block;
margin: 0 auto;
margin-top: 10px;
transition: 0.5s;
}
.main-container .sidebar-wrapper .header-btn:hover span {
background-size: 0 1px;
background-position: right 100%;
}
.main-container .sidebar-wrapper .header-btn:hover svg {
transform: rotate(-45deg);
}
.main-container .main-content {
position: relative;
margin-left: 90px;
max-width: calc(100% - 90px);
width: 100%;
}
@media (max-width: 1399px) {
.main-container .main-content {
margin-left: 80px;
max-width: calc(100% - 80px);
}
}
@media (max-width: 1199px) {
.main-container .main-content {
margin-left: 70px;
max-width: calc(100% - 70px);
}
}
@media (max-width: 991px) {
.main-container .main-content {
max-width: unset;
margin-left: 0;
}
} .home6-banner-section .banner-content {
padding: 230px 0 70px 70px;
position: relative;
height: 100%;
}
@media (max-width: 1799px) {
.home6-banner-section .banner-content {
padding: 220px 0 60px 60px;
}
}
@media (max-width: 1699px) {
.home6-banner-section .banner-content {
padding: 210px 0 50px 50px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-banner-section .banner-content {
padding: 200px 0 50px 30px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home6-banner-section .banner-content {
padding: 180px 0 50px 20px;
}
}
@media (max-width: 1199px) {
.home6-banner-section .banner-content {
padding: 50px 30px 70px;
}
}
@media (max-width: 767px) {
.home6-banner-section .banner-content {
padding: 50px 20px;
}
}
@media (max-width: 576px) {
.home6-banner-section .banner-content {
padding: 40px 10px;
}
}
.home6-banner-section .banner-content > span {
color: rgba(var(--title-color-opc), 0.6);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.03em;
text-transform: uppercase;
display: inline-block;
margin-bottom: 10px;
position: relative;
}
.home6-banner-section .banner-content > span::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -41px;
width: 35px;
height: 1px;
background-color: var(--primary-color2);
}
.home6-banner-section .banner-content h1 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 60px;
font-weight: 500;
line-height: 1.1;
margin-bottom: 0;
}
@media (max-width: 1699px) {
.home6-banner-section .banner-content h1 {
font-size: 56px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-banner-section .banner-content h1 {
font-size: 50px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home6-banner-section .banner-content h1 {
font-size: 44px;
}
}
@media (max-width: 1199px) {
.home6-banner-section .banner-content h1 {
font-size: 50px;
}
}
@media (max-width: 991px) {
.home6-banner-section .banner-content h1 {
font-size: 50px;
}
}
@media (max-width: 767px) {
.home6-banner-section .banner-content h1 {
font-size: 46px;
line-height: 1.2;
}
}
@media (max-width: 576px) {
.home6-banner-section .banner-content h1 {
font-size: 38px;
}
}
.home6-banner-section .banner-content .button-area {
padding-top: 55px;
display: flex;
align-items: center;
gap: 34px;
}
@media (max-width: 1199px) {
.home6-banner-section .banner-content .button-area {
padding-top: 45px;
padding-bottom: 40px;
}
}
@media (max-width: 991px) {
.home6-banner-section .banner-content .button-area {
padding-bottom: 25px;
}
}
@media (max-width: 767px) {
.home6-banner-section .banner-content .button-area {
padding-top: 35px;
padding-bottom: 0;
}
}
@media (max-width: 576px) {
.home6-banner-section .banner-content .button-area {
flex-wrap: wrap;
gap: 25px;
}
}
.home6-banner-section .banner-content .button-area .video-area {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.home6-banner-section .banner-content .button-area .video-area .icon {
position: relative;
}
.home6-banner-section .banner-content .button-area .video-area .icon .video-circle {
stroke: var(--title-color);
fill: none;
transition: 0.5s;
}
.home6-banner-section .banner-content .button-area .video-area .icon .video-circle .top-half {
stroke-dasharray: 320;
stroke-dashoffset: 320;
transition: stroke-dashoffset 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.home6-banner-section .banner-content .button-area .video-area .icon .play-icon {
fill: var(--title-color);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-left: 1px;
}
.home6-banner-section .banner-content .button-area .video-area h6 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.48px;
text-transform: uppercase;
margin-bottom: 0;
}
.home6-banner-section .banner-content .button-area .video-area:hover .icon .video-circle .top-half {
stroke-dashoffset: 0;
}
.home6-banner-section .banner-content .scroll-down-area {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 60px;
}
@media (max-width: 1199px) {
.home6-banner-section .banner-content .scroll-down-area {
position: relative;
bottom: unset;
left: unset;
transform: unset;
display: inline-block;
}
}
@media (max-width: 767px) {
.home6-banner-section .banner-content .scroll-down-area {
display: none;
}
}
.home6-banner-section .banner-content .scroll-down-area .scroll-down-btn {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
animation: up-down2 2s linear infinite alternate;
}
.home6-banner-section .banner-content .scroll-down-area .scroll-down-btn .scroll-down-icon {
width: 33px;
height: 64px;
border-radius: 110px;
border: 1px solid rgba(var(--primary-color-opc), 0.3);
display: flex;
align-items: center;
justify-content: center;
transition: 0.5s;
}
.home6-banner-section .banner-content .scroll-down-area .scroll-down-btn .scroll-down-icon svg {
fill: none;
stroke: rgba(var(--primary-color-opc), 0.3);
transition: 0.5s;
}
.home6-banner-section .banner-content .scroll-down-area .scroll-down-btn span {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 12px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.06em;
display: block;
padding-top: 10px;
}
.home6-banner-section .banner-content .scroll-down-area .scroll-down-btn:hover .scroll-down-icon {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.home6-banner-section .banner-content .scroll-down-area .scroll-down-btn:hover .scroll-down-icon svg {
stroke: var(--white-color);
}
.home6-banner-section .banner-slider-area {
position: relative;
}
.home6-banner-section .banner-slider-area #home6-banner-bg {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), url(//www.husetconstruction.com/wp-content/themes/vernex/assets/img/home6/home6-banner-bg1.jpg);
min-height: 820px;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-banner-section .banner-slider-area #home6-banner-bg {
min-height: 730px;
}
}
@media (max-width: 1399px) {
.home6-banner-section .banner-slider-area #home6-banner-bg {
min-height: 680px;
}
}
@media (max-width: 1199px) {
.home6-banner-section .banner-slider-area #home6-banner-bg {
min-height: 650px;
}
}
@media (max-width: 991px) {
.home6-banner-section .banner-slider-area #home6-banner-bg {
min-height: 600px;
}
}
@media (max-width: 767px) {
.home6-banner-section .banner-slider-area #home6-banner-bg {
min-height: 560px;
}
}
@media (max-width: 576px) {
.home6-banner-section .banner-slider-area #home6-banner-bg {
min-height: 480px;
}
}
.home6-banner-section .banner-slider-area .banner-wrapper {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.home6-banner-section .banner-slider-area .home6-banner-slider {
height: 100%;
}
.home6-banner-section .banner-slider-area .home6-banner-slider .swiper-wrapper .swiper-slide {
height: 100%;
}
.home6-banner-section .banner-card {
display: flex;
height: 100%;
align-items: end;
position: relative;
padding: 70px 70px;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-banner-section .banner-card {
padding: 60px 40px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home6-banner-section .banner-card {
padding: 60px 25px;
}
}
@media (max-width: 1199px) {
.home6-banner-section .banner-card {
padding: 60px 30px;
}
}
@media (max-width: 991px) {
.home6-banner-section .banner-card {
padding: 60px 20px;
}
}
@media (max-width: 767px) {
.home6-banner-section .banner-card {
padding: 60px 15px;
}
}
.home6-banner-section .banner-card::after {
content: "";
height: 100%;
width: 1px;
position: absolute;
right: 0;
top: 0;
opacity: 0.5;
background: linear-gradient(360deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
}
.home6-banner-section .banner-card .card-content .catgory-and-title {
transform: translateY(20px);
will-change: transform;
transition: transform 0.5s ease;
}
.home6-banner-section .banner-card .card-content .catgory-and-title > a {
border-radius: 50%;
border: 1px solid rgba(217, 217, 217, 0.5);
background: transparent;
display: inline-block;
color: var(--white-color);
text-align: center;
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
padding: 9px 22px;
line-height: 1;
margin-bottom: 25px;
}
@media (max-width: 767px) {
.home6-banner-section .banner-card .card-content .catgory-and-title > a {
margin-bottom: 20px;
}
}
.home6-banner-section .banner-card .card-content .catgory-and-title h2 {
margin-bottom: 0;
}
.home6-banner-section .banner-card .card-content .catgory-and-title h2 a {
color: var(--white-color);
font-family: var(--font-kanit);
font-size: 35px;
font-weight: 400;
transition: 0.35s;
}
@media (max-width: 1699px) {
.home6-banner-section .banner-card .card-content .catgory-and-title h2 a {
font-size: 32px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home6-banner-section .banner-card .card-content .catgory-and-title h2 a {
font-size: 30px;
}
}
@media (max-width: 767px) {
.home6-banner-section .banner-card .card-content .catgory-and-title h2 a {
font-size: 28px;
}
}
.home6-banner-section .banner-card .card-content .catgory-and-title h2 a:hover {
color: #CACACA;
}
.home6-banner-section .banner-card:hover .card-content .catgory-and-title {
transform: translateY(0);
}
.home6-banner-section .banner-card:hover .card-content p {
transform: translateY(0);
opacity: 1;
} .home6-about-section {
scroll-margin-top: 50px;
}
.home6-about-section .about-top-area {
margin-bottom: 45px;
}
.home6-about-section .about-top-area h2 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 55px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.02em;
text-align: center;
margin-bottom: 60px;
}
@media (max-width: 1399px) {
.home6-about-section .about-top-area h2 {
font-size: 50px;
margin-bottom: 55px;
}
}
@media (max-width: 1199px) {
.home6-about-section .about-top-area h2 {
font-size: 45px;
margin-bottom: 45px;
}
}
@media (max-width: 991px) {
.home6-about-section .about-top-area h2 {
font-size: 42px;
margin-bottom: 30px;
}
}
@media (max-width: 767px) {
.home6-about-section .about-top-area h2 {
font-size: 38px;
}
}
@media (max-width: 576px) {
.home6-about-section .about-top-area h2 {
font-size: 34px;
}
}
.home6-about-section .about-top-area h2 span {
color: var(--paragraph-color);
}
.home6-about-section .about-top-area p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.9;
margin-bottom: 0;
max-width: 645px;
width: 100%;
margin-left: auto;
padding-left: 15px;
position: relative;
}
.home6-about-section .about-top-area p::before {
content: "";
position: absolute;
top: 10px;
left: 0;
width: 2px;
height: 80px;
background-color: var(--primary-color2);
}
@media (max-width: 991px) {
.home6-about-section .about-top-area p {
max-width: unset;
margin-left: 0;
font-size: 15px;
}
}
@media (max-width: 576px) {
.home6-about-section .about-top-area p {
font-size: 14px;
}
}
@media (max-width: 576px) {
.home6-about-section .about-img img {
min-height: 250px;
-o-object-fit: cover;
object-fit: cover;
}
}
.home6-about-section .about-content {
margin-bottom: 30px;
}
@media (max-width: 1399px) {
.home6-about-section .about-content {
margin-bottom: 20px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home6-about-section .about-content {
margin-bottom: 15px;
}
}
@media (max-width: 991px) {
.home6-about-section .about-content {
margin-bottom: 0;
}
}
.home6-about-section .about-content ul {
padding: 0;
margin: 0;
list-style: none;
}
.home6-about-section .about-content ul li {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.8;
padding-left: 22px;
position: relative;
margin-bottom: 25px;
}
@media (max-width: 1399px) {
.home6-about-section .about-content ul li {
margin-bottom: 20px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home6-about-section .about-content ul li {
font-size: 14px;
margin-bottom: 15px;
}
}
@media (max-width: 576px) {
.home6-about-section .about-content ul li {
font-size: 14px;
}
}
.home6-about-section .about-content ul li:last-child {
margin-bottom: 0;
}
.home6-about-section .about-content ul li span {
color: var(--title-color);
font-weight: 600;
}
.home6-about-section .about-content ul li::before {
content: "";
position: absolute;
top: 8px;
left: 0;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--primary-color2);
} .home6-project-section {
background-color: #F4F6FC;
padding: 100px 110px;
}
@media (max-width: 1699px) {
.home6-project-section {
padding: 100px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-project-section {
padding: 100px 30px;
}
}
@media (max-width: 1399px) {
.home6-project-section {
padding: 100px 20px;
}
}
@media (max-width: 1199px) {
.home6-project-section {
padding: 90px 10px;
}
}
@media (max-width: 991px) {
.home6-project-section {
padding: 90px 20px;
}
}
@media (max-width: 767px) {
.home6-project-section {
padding: 70px 10px;
}
}
@media (max-width: 767px) {
.home6-project-section {
padding: 70px 0;
}
}
.home6-project-section .title-area {
padding-left: 50px;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-project-section .title-area {
padding-left: 30px;
}
}
@media (max-width: 1399px) {
.home6-project-section .title-area {
padding-left: 20px;
}
}
@media (max-width: 1199px) {
.home6-project-section .title-area {
padding-left: 0px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home6-project-section .title-area .section-title h2 {
font-size: 50px;
}
}
.home6-project-section .nav-tabs {
border-bottom: 1px solid rgba(var(--primary-color-opc), 0.15);
padding-left: 40px;
gap: 60px;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-project-section .nav-tabs {
gap: 50px;
padding-left: 30px;
}
}
@media (max-width: 1399px) {
.home6-project-section .nav-tabs {
gap: 50px;
padding-left: 30px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home6-project-section .nav-tabs {
gap: 30px;
padding-left: 20px;
}
}
@media (max-width: 991px) {
.home6-project-section .nav-tabs {
gap: 50px;
padding-left: 0;
}
}
@media (max-width: 767px) {
.home6-project-section .nav-tabs {
gap: 20px;
margin-top: 1.5rem;
}
}
.home6-project-section .nav-tabs .nav-link {
color: var(--paragraph-color);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 400;
letter-spacing: 0.36px;
text-transform: uppercase;
padding: 10px 0;
border: none;
background: linear-gradient(to bottom, rgba(var(--primary-color-opc), 1) 0%, rgba(var(--primary-color-opc), 1) 98%);
background-size: 0px 1px;
background-repeat: no-repeat;
background-position: right 100%;
transition: background-size 0.75s;
}
@media (max-width: 576px) {
.home6-project-section .nav-tabs .nav-link {
padding-bottom: 5px;
margin-right: 15px;
padding: 0;
}
}
.home6-project-section .nav-tabs .nav-link.active {
color: var(--title-color);
background-size: 100% 1px;
background-position: 0% 100%;
}
.home6-project-section .pt-80 {
padding-top: 80px;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-project-section .pt-80 {
padding-top: 70px;
}
}
@media (max-width: 1399px) {
.home6-project-section .pt-80 {
padding-top: 50px;
}
}
@media (max-width: 1199px) {
.home6-project-section .pt-80 {
padding-top: 30px;
}
}
@media (max-width: 991px) {
.home6-project-section .pt-80 {
padding-top: 0;
}
}
.project-info-flow-card {
position: relative;
}
.project-info-flow-card .info-flow-img {
position: relative;
display: block;
}
.project-info-flow-card .info-flow-img::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(var(--primary-color-opc), 0.2);
}
.project-info-flow-card .info-flow-content {
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: 1;
transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.project-info-flow-card .info-flow-content h6 {
margin-bottom: 0;
line-height: 1;
}
.project-info-flow-card .info-flow-content h6 a {
color: var(--white-color);
font-family: var(--font-inter);
font-size: 20px;
font-weight: 600;
line-height: 24px;
letter-spacing: 0.02em;
background-color: var(--primary-color);
display: inline-block;
padding: 7px 20px;
}
@media (max-width: 1199px) {
.project-info-flow-card .info-flow-content h6 a {
padding: 7px 15px;
font-size: 18px;
}
}
@media (max-width: 767px) {
.project-info-flow-card .info-flow-content h6 a {
font-size: 16px;
}
}
.project-info-flow-card .info-flow-content > a {
color: rgba(var(--title-color-opc), 0.6);
font-family: var(--font-inter);
font-size: 12px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.02em;
text-transform: uppercase;
display: inline-block;
padding: 10px 20px;
background-color: #FF8B4A;
}
.project-info-flow-card:hover .info-flow-content {
opacity: 1;
} .home6-sketch-section {
margin-bottom: 120px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.home6-sketch-section {
margin-bottom: 90px;
}
}
@media (max-width: 991px) {
.home6-sketch-section {
margin-bottom: 30px;
}
}
@media (max-width: 767px) {
.home6-sketch-section {
margin-bottom: 20px;
}
}
.home6-sketch-section .title-area {
max-width: 509px;
width: 100%;
margin-left: auto;
margin-bottom: -60px;
padding-right: 10px;
position: relative;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-sketch-section .title-area {
max-width: 440px;
}
}
@media (max-width: 1399px) {
.home6-sketch-section .title-area {
max-width: 445px;
}
}
@media (max-width: 1399px) {
.home6-sketch-section .title-area {
margin-bottom: -25px;
}
}
@media (max-width: 1199px) {
.home6-sketch-section .title-area {
margin-bottom: -10px;
}
}
@media (max-width: 991px) {
.home6-sketch-section .title-area {
margin-bottom: 30px;
padding: 0 20px;
max-width: 430px;
}
}
@media (max-width: 576px) {
.home6-sketch-section .title-area {
padding: 0 10px;
}
}
.home6-sketch-section .title-area h2 {
color: rgba(var(--primary-color-opc), 0.5);
font-family: var(--font-kanit);
font-size: 45px;
font-weight: 500;
line-height: 1.1;
letter-spacing: 0.03em;
margin-bottom: 0;
}
@media (max-width: 991px) {
.home6-sketch-section .title-area h2 {
font-size: 40px;
}
}
@media (max-width: 576px) {
.home6-sketch-section .title-area h2 {
font-size: 38px;
}
}
.home6-sketch-section .title-area .vector {
position: absolute;
top: 120px;
left: 80px;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-sketch-section .title-area .vector {
top: 115px;
left: unset;
right: 90px;
}
}
@media (max-width: 1399px) {
.home6-sketch-section .title-area .vector {
top: 104px;
left: unset;
right: 70px;
width: 110px;
}
}
@media (max-width: 1199px) {
.home6-sketch-section .title-area .vector {
top: 100px;
left: unset;
right: 50px;
width: 100px;
}
}
@media (max-width: 991px) {
.home6-sketch-section .title-area .vector {
display: none;
}
}
.home6-sketch-section .home6-sketch-bg {
overflow: hidden;
background-image: url(//www.husetconstruction.com/wp-content/themes/vernex/assets/img/home6/home6-sketch-img.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
min-height: 724px;
position: relative;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-sketch-section .home6-sketch-bg {
background-position: 40%;
}
}
@media (max-width: 1399px) {
.home6-sketch-section .home6-sketch-bg {
background-position: 40%;
}
}
@media (max-width: 1199px) {
.home6-sketch-section .home6-sketch-bg {
min-height: 600px;
}
}
@media (max-width: 991px) {
.home6-sketch-section .home6-sketch-bg {
min-height: 500px;
}
}
@media (max-width: 576px) {
.home6-sketch-section .home6-sketch-bg {
min-height: 400px;
}
}
.home6-sketch-section .home6-sketch-bg .indicator-area ul {
padding: 0;
margin: 0;
list-style: none;
}
.home6-sketch-section .home6-sketch-bg .indicator-area ul li {
position: absolute;
}
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(1) {
top: 30%;
left: 25%;
}
@media (max-width: 1799px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(1) {
left: 22%;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(1) {
left: 21%;
}
}
@media (max-width: 1399px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(1) {
left: 20%;
}
}
@media (max-width: 1199px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(1) {
left: 17%;
}
}
@media (max-width: 767px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(1) {
left: 8%;
}
}
@media (max-width: 576px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(1) {
left: 3%;
}
}
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(2) {
top: 7%;
left: 39%;
}
@media (max-width: 1799px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(2) {
left: 37%;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(2) {
left: 39%;
}
}
@media (max-width: 1399px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(2) {
left: 38%;
}
}
@media (max-width: 576px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(2) {
left: 35%;
}
}
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(3) {
top: 28%;
right: 46%;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(3) {
right: 40%;
}
}
@media (max-width: 1399px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(3) {
right: 33%;
}
}
@media (max-width: 1199px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(3) {
right: 36%;
}
}
@media (max-width: 767px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(3) {
right: 30%;
}
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(3) .single-item {
right: 0;
left: unset;
}
}
@media (max-width: 576px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(3) {
right: 20%;
}
}
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(4) {
bottom: 45%;
left: 33%;
}
@media (max-width: 1799px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(4) {
left: 31%;
}
}
@media (max-width: 1699px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(4) {
left: 30%;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(4) {
left: 31%;
}
}
@media (max-width: 1399px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(4) {
left: 30%;
}
}
@media (max-width: 1199px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(4) {
left: 29%;
}
}
@media (max-width: 576px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(4) {
left: 21%;
}
}
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(5) {
bottom: 35%;
left: 47%;
}
@media (max-width: 1399px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(5) {
left: 52%;
}
}
@media (max-width: 576px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(5) {
left: 48%;
}
}
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(6) {
bottom: 40%;
right: 31%;
}
@media (max-width: 1799px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(6) {
right: 29%;
}
}
@media (max-width: 1699px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(6) {
right: 27%;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(6) {
right: 19%;
}
}
@media (max-width: 1399px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(6) {
right: 12%;
}
}
@media (max-width: 1199px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li:nth-child(6) .single-item {
right: 0;
left: unset;
}
}
.home6-sketch-section .home6-sketch-bg .indicator-area ul li .dot-main {
position: relative;
display: inline-block;
cursor: pointer;
}
.home6-sketch-section .home6-sketch-bg .indicator-area ul li .dot-main .waves {
position: absolute;
width: 25px;
height: 25px;
background: var(--primary-color);
filter: blur(2px);
opacity: 0;
border-radius: 100%;
right: -16px;
bottom: -8px;
z-index: 1;
animation: waves 3s ease-in-out infinite;
transition: 0.5s;
}
.home6-sketch-section .home6-sketch-bg .indicator-area ul li .dot-main .waves.wave-1 {
animation-delay: 0s;
}
.home6-sketch-section .home6-sketch-bg .indicator-area ul li .dot-main .waves.wave-2 {
animation-delay: 1s;
}
.home6-sketch-section .home6-sketch-bg .indicator-area ul li .dot-main .waves.wave-3 {
animation-delay: 2s;
background: var(--primary-color);
transition: 0.5s;
}
@keyframes waves {
0% {
transform: scale(0.2, 0.2);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
50% {
opacity: 0.9;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
}
100% {
transform: scale(0.9, 0.9);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
}
.home6-sketch-section .home6-sketch-bg .indicator-area ul li .single-item {
min-width: 220px;
position: absolute;
right: 0;
bottom: -130px;
transform: scale(0);
transition: 0.5s;
z-index: 2;
}
@media (max-width: 1199px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li .single-item {
right: unset;
left: 0;
bottom: -125px;
}
}
@media (max-width: 576px) {
.home6-sketch-section .home6-sketch-bg .indicator-area ul li .single-item {
left: 0px;
min-width: 160px;
bottom: -100px;
}
}
.home6-sketch-section .home6-sketch-bg .indicator-area ul li .single-item span {
position: absolute;
top: 0;
left: 0;
background-color: var(--white-color);
padding: 6px 8px;
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 12px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.home6-sketch-section .home6-sketch-bg .indicator-area ul li.active .dot-main .waves {
background: var(--primary-color2);
}
.home6-sketch-section .home6-sketch-bg .indicator-area ul li.active .dot-main .waves.wave-3 {
background: var(--primary-color2);
}
.home6-sketch-section .home6-sketch-bg .indicator-area ul li.active .single-item {
transform: scale(1);
} .home6-service-section {
padding: 95px 124px;
background-color: #000;
}
@media (max-width: 1799px) {
.home6-service-section {
padding: 95px 90px;
}
}
@media (max-width: 1699px) {
.home6-service-section {
padding: 95px 25px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-service-section {
padding: 95px 20px;
}
}
@media (max-width: 1199px) {
.home6-service-section {
padding: 90px 20px;
}
}
@media (max-width: 767px) {
.home6-service-section {
padding: 70px 10px;
}
}
@media (max-width: 576px) {
.home6-service-section {
padding: 70px 0px;
}
}
.home6-service-section .section-title {
margin-bottom: 90px;
}
@media (max-width: 1399px) {
.home6-service-section .section-title {
margin-bottom: 70px;
}
}
@media (max-width: 1199px) {
.home6-service-section .section-title {
margin-bottom: 40px;
}
}
@media (max-width: 767px) {
.home6-service-section .section-title {
margin-bottom: 30px;
}
}
.home6-service-section .service-wrapper .divider {
position: relative;
}
.home6-service-section .service-wrapper .divider::before {
content: "";
position: absolute;
top: 54%;
transform: translateY(-50%);
left: 0;
width: 100%;
height: 1px;
background-color: rgba(255, 255, 255, 0.1);
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home6-service-section .service-wrapper .divider::before {
top: 52%;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home6-service-section .service-wrapper .divider::before {
top: 51%;
}
}
@media (max-width: 991px) {
.home6-service-section .service-wrapper .divider::before {
display: none;
}
}
.home6-service-section .service-wrapper .single-service {
padding: 20px 20px 40px 20px;
position: relative;
}
@media (max-width: 1699px) {
.home6-service-section .service-wrapper .single-service {
padding: 20px 15px 40px 15px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-service-section .service-wrapper .single-service {
padding: 20px 10px 40px 10px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home6-service-section .service-wrapper .single-service {
padding: 20px 10px 30px 10px;
}
}
@media (max-width: 991px) {
.home6-service-section .service-wrapper .single-service {
padding: 0;
}
}
.home6-service-section .service-wrapper .single-service h4 {
margin-bottom: 20px;
}
@media (max-width: 767px) {
.home6-service-section .service-wrapper .single-service h4 {
margin-bottom: 15px;
}
}
.home6-service-section .service-wrapper .single-service h4 a {
color: var(--white-color);
font-family: var(--font-kanit);
font-size: 26px;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.03em;
transition: 0.5s;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-service-section .service-wrapper .single-service h4 a {
font-size: 24px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home6-service-section .service-wrapper .single-service h4 a {
font-size: 23px;
}
}
@media (max-width: 1199px) {
.home6-service-section .service-wrapper .single-service h4 a {
font-size: 24px;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.home6-service-section .service-wrapper .single-service h4 a {
font-size: 22px;
}
}
.home6-service-section .service-wrapper .single-service h4 a:hover {
color: var(--primary-color2);
}
.home6-service-section .service-wrapper .single-service p {
color: rgba(255, 255, 255, 0.7);
font-family: var(--font-inter);
font-size: 14px;
font-weight: 400;
line-height: 1.8;
margin-bottom: 30px;
}
@media (max-width: 1199px) {
.home6-service-section .service-wrapper .single-service p {
margin-bottom: 25px;
}
}
@media (max-width: 767px) {
.home6-service-section .service-wrapper .single-service p {
margin-bottom: 20px;
}
}
.home6-service-section .service-wrapper .single-service .more-btn {
color: var(--primary-color2);
font-family: var(--font-inter);
font-size: 12px;
font-weight: 500;
line-height: 1.7;
letter-spacing: 0.02em;
white-space: nowrap;
position: relative;
display: inline-block;
background: linear-gradient(to bottom, var(--primary-color2) 0%, var(--primary-color2) 98%);
background-repeat: no-repeat;
background-size: 100% 2px;
background-position: left 100%;
transition: background-size 0.75s;
}
.home6-service-section .service-wrapper .single-service .more-btn:hover {
background-size: 0 2px;
background-position: 0% 100%;
}
.home6-service-section .service-wrapper .single-service.br {
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 991px) {
.home6-service-section .service-wrapper .single-service.br {
border: unset;
}
}
.home6-service-section .service-wrapper .single-service.pl-0 {
padding-left: 0;
}
.home6-service-section .service-wrapper .single-service.pr-0 {
padding-right: 0;
}
.home6-service-section .service-wrapper .single-service .service-img {
position: absolute;
bottom: 20px;
right: 50px;
transition: 0.5s;
opacity: 0;
transform: scale(0.4);
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-service-section .service-wrapper .single-service .service-img {
right: 30px;
}
}
@media (max-width: 1399px) {
.home6-service-section .service-wrapper .single-service .service-img {
right: 30px;
}
}
.home6-service-section .service-wrapper .single-service:hover .service-img {
opacity: 1;
transform: scale(1);
} .home6-process-section .progress-area .progress-pagination {
margin-top: 23px;
position: relative;
background: rgba(var(--primary-color-opc), 0.1);
height: 25px;
border-radius: 14px;
}
@media (max-width: 576px) {
.home6-process-section .progress-area .progress-pagination {
height: 20px;
}
}
.home6-process-section .progress-area .progress-pagination .swiper-pagination-progressbar-fill {
background: var(--primary-color);
border-radius: 14px;
}
.home6-process-section .progress-area span {
color: rgba(var(--title-color-opc), 0.5);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.05em;
display: block;
text-align: center;
padding-top: 20px;
}
.home6-process-section .process-slider-wrap {
position: relative;
}
.home6-process-section .process-slider-wrap::before {
content: "";
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 1px;
background-color: rgba(var(--primary-color-opc), 0.2);
}
.home6-process-section .process-card-wrap {
display: flex;
flex-direction: column;
align-items: center;
}
.home6-process-section .process-card-wrap .step-no {
display: inline-flex;
justify-content: center;
align-items: center;
margin-bottom: 40px;
background-color: var(--white-color);
border: 1px solid var(--primary-color);
border-radius: 50px;
padding: 7px 22px;
white-space: nowrap;
position: relative;
transition: 0.5s;
}
@media (max-width: 576px) {
.home6-process-section .process-card-wrap .step-no {
margin-bottom: 30px;
}
}
.home6-process-section .process-card-wrap .step-no::before {
content: "";
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 15px;
height: 15px;
background-color: var(--white-color);
border: 1px solid var(--primary-color);
border-radius: 0 0 4px 0;
border-top: unset;
border-left: unset;
transition: 0.5s;
}
.home6-process-section .process-card-wrap .step-no span {
color: var(--title-color);
font-family: var(--font-inter);
font-size: 13px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.51px;
transition: 0.5s;
}
.home6-process-section .process-card-wrap .process-card {
background-color: #F4F6FC;
border: 1px solid rgba(var(--primary-color-opc), 0.1);
padding: 10px 10px 10px 35px;
display: grid;
grid-template-columns: 48% 52%;
align-items: center;
}
@media (max-width: 1399px) {
.home6-process-section .process-card-wrap .process-card {
grid-template-columns: 53% 47%;
padding: 10px 10px 10px 20px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home6-process-section .process-card-wrap .process-card {
padding: 10px 10px 10px 15px;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.home6-process-section .process-card-wrap .process-card {
padding: 10px 10px 10px 15px;
}
}
@media (max-width: 576px) {
.home6-process-section .process-card-wrap .process-card {
display: block;
padding: 15px;
}
}
@media (max-width: 1399px) {
.home6-process-section .process-card-wrap .process-card .process-content {
padding: 15px 0;
}
}
@media (max-width: 991px) {
.home6-process-section .process-card-wrap .process-card .process-content {
padding: 15px 10px 15px 0;
}
}
@media (max-width: 576px) {
.home6-process-section .process-card-wrap .process-card .process-content {
padding: 0;
padding-bottom: 20px;
}
}
.home6-process-section .process-card-wrap .process-card .process-content svg {
fill: rgba(var(--title-color-opc), 0.5);
margin-bottom: 25px;
transition: 0.5s;
}
@media (max-width: 1399px) {
.home6-process-section .process-card-wrap .process-card .process-content svg {
margin-bottom: 20px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home6-process-section .process-card-wrap .process-card .process-content svg {
width: 50px;
margin-bottom: 15px;
}
}
.home6-process-section .process-card-wrap .process-card .process-content h4 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 25px;
font-weight: 400;
line-height: 28px;
letter-spacing: 0.03em;
margin-bottom: 25px;
}
@media (max-width: 1399px) {
.home6-process-section .process-card-wrap .process-card .process-content h4 {
margin-bottom: 20px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home6-process-section .process-card-wrap .process-card .process-content h4 {
font-size: 22px;
margin-bottom: 15px;
}
}
@media (max-width: 767px) {
.home6-process-section .process-card-wrap .process-card .process-content h4 {
font-size: 22px;
margin-bottom: 15px;
}
}
.home6-process-section .process-card-wrap .process-card .process-content p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 26px;
margin-bottom: 0;
}
@media (min-width: 992px) and (max-width: 1199px) {
.home6-process-section .process-card-wrap .process-card .process-content p {
font-size: 13px;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.home6-process-section .process-card-wrap .process-card .process-content p {
font-size: 15px;
}
}
.home6-process-section .process-card-wrap .process-card .process-img {
height: 100%;
}
@media (max-width: 576px) {
.home6-process-section .process-card-wrap .process-card .process-img {
height: unset;
}
}
.home6-process-section .process-card-wrap .process-card .process-img img {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media (max-width: 576px) {
.home6-process-section .process-card-wrap .process-card .process-img img {
height: unset;
}
}
.home6-process-section .process-card-wrap:hover .step-no {
border-color: var(--primary-color2);
background-color: var(--primary-color);
}
.home6-process-section .process-card-wrap:hover .step-no::before {
border-color: var(--primary-color2);
background-color: var(--primary-color);
}
.home6-process-section .process-card-wrap:hover .step-no span {
color: var(--white-color);
}
.home6-process-section .process-card-wrap:hover .process-card .process-content svg {
animation: bounceIn 1.2s linear;
} .home6-testimonial-section .testimonial-content-wrap .section-title {
margin-bottom: 45px;
}
@media (max-width: 1199px) {
.home6-testimonial-section .testimonial-content-wrap .section-title {
margin-bottom: 35px;
}
}
@media (max-width: 991px) {
.home6-testimonial-section .testimonial-content-wrap .section-title {
margin-bottom: 30px;
}
}
.home6-testimonial-section .testimonial-content-wrap .section-title p {
padding-top: 35px;
}
@media (max-width: 1199px) {
.home6-testimonial-section .testimonial-content-wrap .section-title p {
padding-top: 30px;
}
}
@media (max-width: 991px) {
.home6-testimonial-section .testimonial-content-wrap .section-title p {
padding-top: 20px;
}
}
.home6-testimonial-section .testimonial-content-wrap .rating-area {
padding: 0;
margin: 0;
list-style: none;
padding: 28px 30px;
background-color: #F9F3EE;
border: 1px solid rgba(var(--primary-color-opc), 0.05);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
margin-bottom: 50px;
position: relative;
}
@media (max-width: 1399px) {
.home6-testimonial-section .testimonial-content-wrap .rating-area {
padding: 28px 15px;
gap: 20px;
}
}
@media (max-width: 1199px) {
.home6-testimonial-section .testimonial-content-wrap .rating-area {
margin-bottom: 40px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home6-testimonial-section .testimonial-content-wrap .rating-area {
flex-wrap: wrap;
gap: 20px;
}
}
@media (max-width: 991px) {
.home6-testimonial-section .testimonial-content-wrap .rating-area {
margin-bottom: 30px;
}
}
@media (max-width: 576px) {
.home6-testimonial-section .testimonial-content-wrap .rating-area {
flex-wrap: wrap;
gap: 25px;
justify-content: center;
border-radius: 10px;
}
}
.home6-testimonial-section .testimonial-content-wrap .rating-area::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(var(--primary-color2-opc), 0.2);
width: 1px;
height: 35px;
}
@media (max-width: 576px) {
.home6-testimonial-section .testimonial-content-wrap .rating-area::before {
display: none;
}
}
.home6-testimonial-section .testimonial-content-wrap .rating-area > li .single-rating {
display: flex;
gap: 8px;
}
.home6-testimonial-section .testimonial-content-wrap .rating-area > li .single-rating .review {
line-height: 1;
}
.home6-testimonial-section .testimonial-content-wrap .rating-area > li .single-rating .review span {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 14px;
font-weight: 600;
line-height: 1;
margin-bottom: 8px;
display: block;
white-space: nowrap;
}
@media (max-width: 1699px) {
.home6-testimonial-section .testimonial-content-wrap .rating-area > li .single-rating .review span {
font-size: 13px;
}
}
.home6-testimonial-section .testimonial-content-wrap .rating-area > li .single-rating .review img {
width: 64px;
}
.home6-testimonial-section .testimonial-content-wrap .rating-area > li .single-rating .rating {
line-height: 1;
margin-top: -1px;
}
.home6-testimonial-section .testimonial-content-wrap .rating-area > li .single-rating .rating .star {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 9px;
line-height: 1;
}
.home6-testimonial-section .testimonial-content-wrap .rating-area > li .single-rating .rating .star li i {
color: #E62415;
font-size: 12px;
}
.home6-testimonial-section .testimonial-content-wrap .rating-area > li .single-rating .rating span {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 14px;
font-weight: 400;
line-height: 1;
white-space: nowrap;
}
@media (max-width: 1699px) {
.home6-testimonial-section .testimonial-content-wrap .rating-area > li .single-rating .rating span {
font-size: 13px;
}
}
.home6-testimonial-section .testimonial-content-wrap .rating-area > li .single-rating.google .rating .star li i {
color: #FFC107;
}
.home6-testimonial-section .testimonial-content-wrap .rating-area > li:first-child::before {
display: none;
}
.home6-testimonial-section .testimonial-content-wrap .contact-btn-area {
display: flex;
align-items: center;
gap: 15px;
position: relative;
z-index: 1;
}
.home6-testimonial-section .testimonial-card-area {
padding: 50px 35px;
background-color: #F9F3EE;
border-radius: 20px;
position: relative;
margin-left: 40px;
}
@media (max-width: 1699px) {
.home6-testimonial-section .testimonial-card-area {
padding: 50px 40px;
}
}
@media (max-width: 1399px) {
.home6-testimonial-section .testimonial-card-area {
padding: 30px 25px;
margin-left: 30px;
}
}
@media (max-width: 1199px) {
.home6-testimonial-section .testimonial-card-area {
margin-left: 0;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home6-testimonial-section .testimonial-card-area {
padding: 30px 20px;
}
}
@media (max-width: 767px) {
.home6-testimonial-section .testimonial-card-area {
padding: 30px 20px;
}
}
.home6-testimonial-section .testimonial-card-area .testimonial-content-wrap {
text-align: center;
}
.home6-testimonial-section .testimonial-card-area .testimonial-content-wrap .quote {
fill: var(--title-color);
margin-bottom: 30px;
}
@media (max-width: 576px) {
.home6-testimonial-section .testimonial-card-area .testimonial-content-wrap .quote {
margin-bottom: 25px;
}
}
.home6-testimonial-section .testimonial-card-area .testimonial-content-wrap > span {
color: var(--primary-color2);
font-family: var(--font-kanit);
font-size: 16px;
font-weight: 400;
line-height: 23.92px;
letter-spacing: 0.06em;
display: block;
margin-bottom: 20px;
}
@media (max-width: 1199px) {
.home6-testimonial-section .testimonial-card-area .testimonial-content-wrap > span {
margin-bottom: 10px;
}
}
.home6-testimonial-section .testimonial-card-area .testimonial-content-wrap p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 20px;
font-weight: 500;
line-height: 40px;
margin-bottom: 0;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-testimonial-section .testimonial-card-area .testimonial-content-wrap p {
font-size: 19px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home6-testimonial-section .testimonial-card-area .testimonial-content-wrap p {
font-size: 19px;
}
}
@media (max-width: 767px) {
.home6-testimonial-section .testimonial-card-area .testimonial-content-wrap p {
font-size: 19px;
}
}
@media (max-width: 576px) {
.home6-testimonial-section .testimonial-card-area .testimonial-content-wrap p {
font-size: 17px;
line-height: 36px;
}
}
.home6-testimonial-section .testimonial-card-area .testimonial-content-wrap .author-area {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding-top: 25px;
border-top: 1px solid rgba(var(--primary-color-opc), 0.1);
margin-top: 55px;
}
@media (max-width: 1399px) {
.home6-testimonial-section .testimonial-card-area .testimonial-content-wrap .author-area {
margin-top: 45px;
}
}
@media (max-width: 1199px) {
.home6-testimonial-section .testimonial-card-area .testimonial-content-wrap .author-area {
margin-top: 45px;
}
}
@media (max-width: 767px) {
.home6-testimonial-section .testimonial-card-area .testimonial-content-wrap .author-area {
margin-top: 35px;
}
}
@media (max-width: 576px) {
.home6-testimonial-section .testimonial-card-area .testimonial-content-wrap .author-area {
margin-top: 25px;
padding-top: 15px;
}
}
.home6-testimonial-section .testimonial-card-area .testimonial-content-wrap .author-area .author-img img {
min-width: 50px;
max-width: 50px;
height: 50px;
border-radius: 50%;
}
.home6-testimonial-section .testimonial-card-area .testimonial-content-wrap .author-area .author-content {
text-align: start;
}
.home6-testimonial-section .testimonial-card-area .testimonial-content-wrap .author-area .author-content h5 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 21px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.03em;
margin-bottom: 3px;
}
.home6-testimonial-section .testimonial-card-area .testimonial-content-wrap .author-area .author-content span {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 15px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.03em;
}
@media (max-width: 576px) {
.home6-testimonial-section .testimonial-card-area .slider-btn-grp {
display: none;
}
}
.home6-testimonial-section .testimonial-card-area .slider-btn-grp .slider-btn {
position: absolute;
bottom: 45px;
left: 45px;
min-width: 35px;
max-width: 35px;
height: 35px;
z-index: 1;
}
@media (max-width: 1699px) {
.home6-testimonial-section .testimonial-card-area .slider-btn-grp .slider-btn {
bottom: 60px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-testimonial-section .testimonial-card-area .slider-btn-grp .slider-btn {
left: 35px;
}
}
@media (max-width: 1399px) {
.home6-testimonial-section .testimonial-card-area .slider-btn-grp .slider-btn {
left: 25px;
bottom: 40px;
}
}
.home6-testimonial-section .testimonial-card-area .slider-btn-grp .slider-btn i {
font-size: 17px;
}
.home6-testimonial-section .testimonial-card-area .slider-btn-grp .slider-btn.home4-testimonial-next {
left: unset;
right: 45px;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-testimonial-section .testimonial-card-area .slider-btn-grp .slider-btn.home4-testimonial-next {
right: 35px;
}
}
@media (max-width: 1399px) {
.home6-testimonial-section .testimonial-card-area .slider-btn-grp .slider-btn.home4-testimonial-next {
right: 25px;
}
}
.home6-testimonial-section .home5-testimonial-slider .swiper-slide-active .quote,
.home6-testimonial-section .home5-testimonial-slider .swiper-slide-active span,
.home6-testimonial-section .home5-testimonial-slider .swiper-slide-active p {
animation: fadeInDown 1.7s;
}
.home6-testimonial-section .home5-testimonial-slider .swiper-slide-active .author-area {
animation: fadeInUp 1.7s;
} .home6-banner2-section {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
min-height: 750px;
display: flex;
align-items: center;
justify-content: center;
background-attachment: fixed;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-banner2-section {
min-height: 700;
}
}
@media (max-width: 1399px) {
.home6-banner2-section {
min-height: 650px;
}
}
@media (max-width: 576px) {
.home6-banner2-section {
min-height: 80vh;
background-attachment: unset;
}
}
.home6-banner2-section .circular-text {
width: 144px;
height: 144px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.home6-banner2-section .circular-text > svg {
width: 144px;
height: 144px;
animation: textRotation 20s linear infinite;
}
.home6-banner2-section .circular-text > svg text textpath {
fill: var(--white-color);
font-family: var(--font-inter);
font-size: 12px;
font-weight: 400;
line-height: 1;
}
.home6-banner2-section .circular-text .video-area {
width: 91px;
height: 91px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.home6-banner2-section .circular-text .video-area .play-btn {
cursor: pointer;
display: inline-block;
}
.home6-banner2-section .circular-text .video-area .play-btn .icon {
position: relative;
}
.home6-banner2-section .circular-text .video-area .play-btn .icon .video-circle {
stroke: var(--white-color);
fill: rgba(255, 255, 255, 0.2);
transition: 0.5s;
}
.home6-banner2-section .circular-text .video-area .play-btn .icon .video-circle .top-half {
stroke-dasharray: 430;
stroke-dashoffset: 320;
transition: stroke-dashoffset 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.home6-banner2-section .circular-text .video-area .play-btn .icon .play-icon {
fill: var(--white-color);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-left: 2px;
}
@media (max-width: 576px) {
.home6-banner2-section .circular-text .video-area .play-btn .icon .play-icon {
width: 20px;
}
}
.home6-banner2-section .circular-text .video-area .play-btn:hover .icon .video-circle .top-half {
stroke-dashoffset: 0;
} .home6-blog-section .primary-btn3 {
padding: 17px 22px;
}
.home6-blog-section .blog-card.style-4 {
height: 100%;
}
.home6-blog-section .blog-card.style-4 .blog-img {
max-width: 435px;
height: 100%;
}
@media (max-width: 576px) {
.home6-blog-section .blog-card.style-4 .blog-img {
height: 300px;
}
}
.home6-blog-section .blog-card.style-4 .blog-img img {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media (max-width: 576px) {
.home6-blog-section .blog-card.style-4 .blog-img img {
height: unset;
}
}
.home6-blog-section .blog-card.style-3 {
grid-template-columns: 50% 50%;
}
@media (min-width: 992px) and (max-width: 1199px) {
.home6-blog-section .blog-card.style-3 {
grid-template-columns: 48% 52%;
}
}
@media (max-width: 767px) {
.home6-blog-section .blog-card.style-3 {
grid-template-columns: 48% 52%;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home6-blog-section .blog-card.style-3 .blog-img img {
min-height: 255px;
-o-object-fit: cover;
object-fit: cover;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home6-blog-section .blog-card.style-3 .blog-img img {
min-height: 220px;
-o-object-fit: cover;
object-fit: cover;
}
}
@media (max-width: 767px) {
.home6-blog-section .blog-card.style-3 .blog-img img {
min-height: 220px;
-o-object-fit: cover;
object-fit: cover;
}
}
.home6-blog-section .blog-card.style-3 .blog-content-wrap {
padding: 30px 25px;
}
@media (max-width: 1399px) {
.home6-blog-section .blog-card.style-3 .blog-content-wrap {
padding: 30px 20px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home6-blog-section .blog-card.style-3 .blog-content-wrap {
padding: 25px 15px;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.home6-blog-section .blog-card.style-3 .blog-content-wrap {
padding: 20px 15px;
gap: 45px;
}
}
@media (max-width: 576px) {
.home6-blog-section .blog-card.style-3 .blog-content-wrap {
padding: 20px 15px;
gap: 30px;
}
}
@media (max-width: 1399px) {
.home6-blog-section .blog-card.style-3 .blog-content-wrap .blog-content h4 a {
font-size: 23px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.home6-blog-section .blog-card.style-3 .blog-content-wrap .blog-content h4 a {
font-size: 21px;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.home6-blog-section .blog-card.style-3 .blog-content-wrap .blog-content h4 a {
font-size: 21px;
}
} .home6-team-section .counter-area {
padding: 80px 60px;
background-color: #FFFCF4;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 1699px) {
.home6-team-section .counter-area {
padding: 80px 30px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-team-section .counter-area {
padding: 80px 20px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home6-team-section .counter-area {
padding: 80px 10px;
}
}
@media (max-width: 1199px) {
.home6-team-section .counter-area {
padding: 70px 30px;
}
}
@media (max-width: 576px) {
.home6-team-section .counter-area {
padding: 50px 10px;
}
}
.home6-team-section .counter-area .single-counter {
padding-bottom: 60px;
min-width: 188px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home6-team-section .counter-area .single-counter {
min-width: 164px;
padding-bottom: 50px;
}
}
@media (max-width: 1199px) {
.home6-team-section .counter-area .single-counter {
padding-bottom: 40px;
}
}
@media (max-width: 576px) {
.home6-team-section .counter-area .single-counter {
padding-bottom: 0;
}
}
.home6-team-section .counter-area .single-counter .number {
display: flex;
align-items: center;
margin-bottom: 10px;
}
@media (max-width: 576px) {
.home6-team-section .counter-area .single-counter .number {
margin-bottom: 5px;
}
}
.home6-team-section .counter-area .single-counter .number h2,
.home6-team-section .counter-area .single-counter .number span {
color: var(--title-color);
font-family: var(--font-inter);
font-size: 65px;
font-weight: 700;
line-height: 1;
margin-bottom: 0;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-team-section .counter-area .single-counter .number h2,
.home6-team-section .counter-area .single-counter .number span {
font-size: 55px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home6-team-section .counter-area .single-counter .number h2,
.home6-team-section .counter-area .single-counter .number span {
font-size: 50px;
}
}
@media (max-width: 767px) {
.home6-team-section .counter-area .single-counter .number h2,
.home6-team-section .counter-area .single-counter .number span {
font-size: 55px;
}
}
@media (max-width: 576px) {
.home6-team-section .counter-area .single-counter .number h2,
.home6-team-section .counter-area .single-counter .number span {
font-size: 50px;
}
}
.home6-team-section .counter-area .single-counter > span {
color: var(--paragraph-color);
font-family: var(--font-kanit);
font-size: 15px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.06em;
text-transform: uppercase;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-team-section .counter-area .single-counter > span {
font-size: 14px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home6-team-section .counter-area .single-counter > span {
font-size: 12px;
}
}
.home6-team-section .counter-area .single-counter.two {
padding-bottom: 0;
padding-top: 60px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home6-team-section .counter-area .single-counter.two {
padding-top: 50px;
}
}
@media (max-width: 1199px) {
.home6-team-section .counter-area .single-counter.two {
padding-top: 40px;
}
}
@media (max-width: 576px) {
.home6-team-section .counter-area .single-counter.two {
padding-top: 0;
}
}
.home6-team-section .counter-area .divider {
position: relative;
}
@media (max-width: 1199px) {
.home6-team-section .counter-area .divider {
max-width: 540px;
width: 100%;
}
}
.home6-team-section .counter-area .divider::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, rgba(0, 0, 0, 0) 20.5%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 80%);
}
@media (max-width: 576px) {
.home6-team-section .counter-area .divider::before {
display: none;
}
}
.home6-team-section .counter-area .divider::after {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 100%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20.5%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 80%);
}
@media (max-width: 576px) {
.home6-team-section .counter-area .divider::after {
display: none;
}
}
.home6-team-section .team-wrap {
padding: 90px 80px;
background-color: #F4F6FC;
}
@media (max-width: 1699px) {
.home6-team-section .team-wrap {
padding: 90px 50px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-team-section .team-wrap {
padding: 90px 25px;
}
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home6-team-section .team-wrap {
padding: 70px 20px;
}
}
@media (max-width: 1199px) {
.home6-team-section .team-wrap {
padding: 70px 30px;
}
}
@media (max-width: 991px) {
.home6-team-section .team-wrap {
padding: 70px 20px;
}
}
@media (max-width: 576px) {
.home6-team-section .team-wrap {
padding: 50px 10px;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.home6-team-section .team-wrap .section-title h2 {
font-size: 54px;
}
}
.home6-team-section .team-wrap .pb-35 {
padding-bottom: 35px;
}
@media (max-width: 767px) {
.home6-team-section .team-wrap .pb-35 {
padding-bottom: 0;
}
}
.home6-team-section .team-wrap .pt-35 {
padding-top: 35px;
}
@media (max-width: 767px) {
.home6-team-section .team-wrap .pt-35 {
padding-top: 0;
}
}
.home6-team-section .team-wrap .team-divider {
position: relative;
}
.home6-team-section .team-wrap .team-divider::after {
content: "";
position: absolute;
height: 100%;
width: 1px;
background-color: rgba(var(--primary-color-opc), 0.1);
right: 0;
top: 0;
}
@media (max-width: 767px) {
.home6-team-section .team-wrap .team-divider::after {
display: none;
}
}
.home6-team-section .team-wrap .team-border {
position: relative;
}
.home6-team-section .team-wrap .team-border::after {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 1px;
background-color: rgba(var(--primary-color-opc), 0.1);
}
@media (max-width: 767px) {
.home6-team-section .team-wrap .team-border::after {
display: none;
}
}
.home6-team-section .team-wrap .team-card4 {
max-width: 224px;
width: 100%;
}
@media (min-width: 1200px) and (max-width: 1399px) {
.home6-team-section .team-wrap .team-card4 {
max-width: 190px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.home6-team-section .team-wrap .team-card4 {
max-width: 190px;
}
}
@media (max-width: 767px) {
.home6-team-section .team-wrap .team-card4 {
margin: 0 auto;
}
}
.home6-team-section .team-wrap .team-card4 .team-img {
position: relative;
z-index: 1;
margin-bottom: 15px;
}
.home6-team-section .team-wrap .team-card4 .team-img::before {
content: "";
position: absolute;
bottom: 1px;
left: 0;
width: 100%;
height: 60px;
border-radius: 50%;
background-color: rgba(var(--primary-color-opc), 0.1);
z-index: -1;
}
.home6-team-section .team-wrap .team-card4 .team-img img {
border-radius: 0 0 40% 40%;
}
.home6-team-section .team-wrap .team-card4 .team-img .social-wrap {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%) scale(0.4);
opacity: 0;
transform-origin: bottom;
transition: all 0.35s ease-out;
}
.home6-team-section .team-wrap .team-card4 .team-img .social-wrap .social-area {
border: 1px solid var(--primary-color);
background-color: var(--white-color);
border-radius: 50px;
display: inline-flex;
align-items: center;
transition: 0.5s;
position: relative;
overflow: hidden;
z-index: 1;
}
.home6-team-section .team-wrap .team-card4 .team-img .social-wrap .social-area::after {
position: absolute;
content: "";
border-radius: 30px;
width: 100%;
height: 100%;
top: 0;
right: 0;
background-color: var(--primary-color);
transform-origin: right;
transform: scalex(0);
z-index: -1;
transition: transform 0.7s;
}
.home6-team-section .team-wrap .team-card4 .team-img .social-wrap .social-area .icon {
padding: 0 7px;
}
.home6-team-section .team-wrap .team-card4 .team-img .social-wrap .social-area .icon span {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
transition: 0.5s;
}
.home6-team-section .team-wrap .team-card4 .team-img .social-wrap .social-area .icon span i {
color: var(--white-color);
font-size: 12px;
transition: 0.5s;
}
.home6-team-section .team-wrap .team-card4 .team-img .social-wrap .social-area > span {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.03em;
display: block;
padding: 10px 17px;
border-left: 1px solid var(--primary-color);
transition: 0.5s;
}
.home6-team-section .team-wrap .team-card4 .team-img .social-wrap .social-area:hover {
border-color: var(--white-color);
}
.home6-team-section .team-wrap .team-card4 .team-img .social-wrap .social-area:hover::after {
transform: scalex(1);
transform-origin: left;
}
.home6-team-section .team-wrap .team-card4 .team-img .social-wrap .social-area:hover .icon span {
background-color: var(--white-color);
}
.home6-team-section .team-wrap .team-card4 .team-img .social-wrap .social-area:hover .icon span i {
color: var(--title-color);
}
.home6-team-section .team-wrap .team-card4 .team-img .social-wrap .social-area:hover > span {
color: var(--white-color);
border-color: var(--white-color);
}
.home6-team-section .team-wrap .team-card4 .team-content {
text-align: center;
}
.home6-team-section .team-wrap .team-card4 .team-content span {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 14px;
font-weight: 400;
line-height: 1.5;
display: block;
margin-bottom: 2px;
}
.home6-team-section .team-wrap .team-card4 .team-content h5 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 22px;
font-weight: 400;
line-height: 1.4;
letter-spacing: 0.03em;
margin-bottom: 0;
}
.home6-team-section .team-wrap .team-card4:hover .team-img .social-wrap {
transform: translateX(-50%) scale(1);
opacity: 1;
} .home6-contact-section .contact-wrapper {
padding: 35px;
background-color: #FAF8FB;
border-radius: 30px;
}
@media (max-width: 1199px) {
.home6-contact-section .contact-wrapper {
padding: 25px;
}
}
@media (max-width: 991px) {
.home6-contact-section .contact-wrapper {
padding: 35px 25px;
}
}
@media (max-width: 767px) {
.home6-contact-section .contact-wrapper {
padding: 35px 20px;
border-radius: 15px;
}
}
@media (max-width: 576px) {
.home6-contact-section .contact-wrapper {
padding: 35px 10px;
}
}
.home6-contact-section .contact-wrapper .contact-content {
padding-left: 35px;
}
@media (max-width: 1399px) {
.home6-contact-section .contact-wrapper .contact-content {
padding-left: 25px;
}
}
@media (max-width: 1199px) {
.home6-contact-section .contact-wrapper .contact-content {
padding-left: 20px;
}
}
@media (max-width: 991px) {
.home6-contact-section .contact-wrapper .contact-content {
padding-left: 0;
}
}
.home6-contact-section .contact-wrapper .contact-content .section-title {
max-width: 450px;
width: 100%;
margin-bottom: 60px;
}
@media (max-width: 991px) {
.home6-contact-section .contact-wrapper .contact-content .section-title {
margin-bottom: 30px;
}
}
@media (max-width: 576px) {
.home6-contact-section .contact-wrapper .contact-content .section-title {
margin-bottom: 20px;
}
}
.home6-contact-section .contact-wrapper .contact-content > svg {
fill: rgba(var(--primary-color-opc), 0.2);
margin-left: 60px;
margin-bottom: 70px;
}
@media (max-width: 991px) {
.home6-contact-section .contact-wrapper .contact-content > svg {
margin-bottom: 40px;
}
}
@media (max-width: 576px) {
.home6-contact-section .contact-wrapper .contact-content > svg {
height: 100px;
margin-bottom: 30px;
}
}
.home6-contact-section .contact-wrapper .contact-content .contact-list {
padding: 0;
margin: 0;
list-style: none;
}
@media (max-width: 991px) {
.home6-contact-section .contact-wrapper .contact-content .contact-list {
display: flex;
align-items: center;
gap: 30px;
}
}
@media (max-width: 576px) {
.home6-contact-section .contact-wrapper .contact-content .contact-list {
flex-wrap: wrap;
}
}
.home6-contact-section .contact-wrapper .contact-content .contact-list .single-contact {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 50px;
}
.home6-contact-section .contact-wrapper .contact-content .contact-list .single-contact:last-child {
margin-bottom: 0;
}
@media (max-width: 991px) {
.home6-contact-section .contact-wrapper .contact-content .contact-list .single-contact {
margin-bottom: 0;
}
}
.home6-contact-section .contact-wrapper .contact-content .contact-list .single-contact .icon svg {
fill: var(--primary-color2);
}
.home6-contact-section .contact-wrapper .contact-content .contact-list .single-contact .content {
position: relative;
line-height: 1;
}
.home6-contact-section .contact-wrapper .contact-content .contact-list .single-contact .content span {
color: var(--paragraph-color);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 400;
line-height: 1;
text-transform: uppercase;
display: block;
margin-bottom: 10px;
}
.home6-contact-section .contact-wrapper .contact-content .contact-list .single-contact .content h6 {
margin-bottom: 0;
}
.home6-contact-section .contact-wrapper .contact-content .contact-list .single-contact .content h6 a {
color: var(--title-color);
font-family: var(--font-inter);
font-size: 18px;
font-weight: 600;
line-height: 1;
transition: 0.5s;
}
.home6-contact-section .contact-wrapper .contact-content .contact-list .single-contact .content h6 a:hover {
color: var(--primary-color2);
}
.home6-contact-section .contact-wrapper .contact-content .contact-list .single-contact .content::after {
content: "";
height: 35px;
width: 1px;
background-color: rgba(var(--primary-color-opc), 0.15);
position: absolute;
left: -10px;
top: 50%;
transform: translateY(-50%);
}
.home6-contact-section .contact-wrapper .contact-form-wrap {
background-color: var(--white-color);
margin-left: 10px;
}
@media (max-width: 1199px) {
.home6-contact-section .contact-wrapper .contact-form-wrap {
margin-left: 0;
}
}
.home6-contact-section .contact-wrapper .contact-form-wrap .primary-btn3 {
margin-top: 40px;
padding: 14px 27px;
} .breadcrumb-section {
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding: 175px 0;
background-color: #000000;
}
@media (max-width: 1199px) {
.breadcrumb-section {
padding: 160px 0;
}
}
@media (max-width: 991px) {
.breadcrumb-section {
padding: 120px 0;
}
}
.breadcrumb-section .banner-content {
position: relative;
z-index: 1;
}
.breadcrumb-section .banner-content span {
color: rgba(255, 255, 255, 0.6);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.03em;
text-transform: uppercase;
display: inline-block;
margin-bottom: 15px;
position: relative;
}
@media (max-width: 767px) {
.breadcrumb-section .banner-content span {
margin-bottom: 10px;
}
}
.breadcrumb-section .banner-content span::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -41px;
width: 35px;
height: 1px;
background-color: var(--primary-color2);
}
.breadcrumb-section .banner-content h1 {
color: var(--white-color);
font-family: var(--font-kanit);
font-size: 70px;
font-weight: 400;
line-height: 1.1;
letter-spacing: 0.03em;
margin-bottom: 0;
word-break: break-all;
}
@media (max-width: 1399px) {
.breadcrumb-section .banner-content h1 {
font-size: 65px;
}
}
@media (max-width: 1199px) {
.breadcrumb-section .banner-content h1 {
font-size: 60px;
}
}
@media (max-width: 991px) {
.breadcrumb-section .banner-content h1 {
font-size: 52px;
}
}
@media (max-width: 767px) {
.breadcrumb-section .banner-content h1 {
font-size: 48px;
}
}
@media (max-width: 576px) {
.breadcrumb-section .banner-content h1 {
font-size: 38px;
line-height: 1.3;
}
}
.breadcrumb-section .banner-content .breadcrumb-list {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
gap: 10px;
padding-top: 15px;
}
.breadcrumb-section .banner-content .breadcrumb-list li {
position: relative;
color: rgba(255, 255, 255, 0.5);
font-family: var(--font-kanit);
font-size: 15px;
font-weight: 400;
text-transform: capitalize;
padding-left: 26px;
word-break: break-all;
}
.breadcrumb-section .banner-content .breadcrumb-list li a {
color: var(--primary-color2);
}
.breadcrumb-section .banner-content .breadcrumb-list li::before {
content: url(//www.husetconstruction.com/wp-content/themes/vernex/assets/img/inner-pages/icon/breadcrumb-arrow-white.svg);
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.breadcrumb-section .banner-content .breadcrumb-list li:first-child {
padding-left: 0;
}
.breadcrumb-section .banner-content .breadcrumb-list li:first-child::before {
content: "";
} .project-info-flow-page {
padding: 0px 8% 0;
}
@media (max-width: 1699px) {
.project-info-flow-page {
padding: 120px 6% 0;
}
}
@media (min-width: 1400px) and (max-width: 1599px) {
.project-info-flow-page {
padding: 120px 4% 0;
}
}
@media (max-width: 1399px) {
.project-info-flow-page {
padding: 120px 2% 0;
}
}
@media (max-width: 1199px) {
.project-info-flow-page {
padding: 90px 20px 0;
}
}
@media (max-width: 991px) {
.project-info-flow-page {
padding: 80px 20px 0;
}
}
@media (max-width: 767px) {
.project-info-flow-page {
padding: 80px 10px 0;
}
}
@media (max-width: 576px) {
.project-info-flow-page {
padding: 80px 0px 0;
}
} .project-single-page {
position: relative;
overflow: hidden;
border-bottom: 3px solid var(--primary-color2);
}
.project-single-page .project-single-wrapper .project-bg {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
min-height: 90vh;
animation: large 26s linear infinite alternate;
}
.project-single-page .project-single-wrapper .project-content-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 30px;
display: flex;
align-items: end;
z-index: 2;
padding: 90px 80px;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.project-single-page .project-single-wrapper .project-content-wrap {
padding: 90px 70px;
}
}
@media (max-width: 1399px) {
.project-single-page .project-single-wrapper .project-content-wrap {
padding: 90px 60px;
}
}
@media (max-width: 1199px) {
.project-single-page .project-single-wrapper .project-content-wrap {
padding: 90px 40px;
}
}
@media (max-width: 991px) {
.project-single-page .project-single-wrapper .project-content-wrap {
padding: 80px 30px;
}
}
@media (max-width: 767px) {
.project-single-page .project-single-wrapper .project-content-wrap {
padding: 80px 20px;
}
}
@media (max-width: 576px) {
.project-single-page .project-single-wrapper .project-content-wrap {
padding: 80px 10px;
}
}
.project-single-page .project-single-wrapper .project-content-wrap .project-content {
max-width: 900px;
width: 100%;
}
@media (max-width: 1199px) {
.project-single-page .project-single-wrapper .project-content-wrap .project-content {
max-width: 700px;
}
}
@media (max-width: 991px) {
.project-single-page .project-single-wrapper .project-content-wrap .project-content {
max-width: 530px;
}
}
.project-single-page .project-single-wrapper .project-content-wrap .project-content span {
color: rgba(255, 255, 255, 0.7);
font-family: var(--font-inter);
font-size: 13px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.02em;
display: block;
margin-bottom: 10px;
}
.project-single-page .project-single-wrapper .project-content-wrap .project-content h2 {
margin-bottom: 25px;
}
.project-single-page .project-single-wrapper .project-content-wrap .project-content h2 a {
color: var(--white-color);
font-family: var(--font-kanit);
font-size: 50px;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.05em;
transition: 0.5s;
}
@media (max-width: 1399px) {
.project-single-page .project-single-wrapper .project-content-wrap .project-content h2 a {
font-size: 45px;
}
}
@media (max-width: 576px) {
.project-single-page .project-single-wrapper .project-content-wrap .project-content h2 a {
font-size: 40px;
}
}
.project-single-page .project-single-wrapper .project-content-wrap .project-content h2 a:hover {
color: var(--primary-color2);
}
.project-single-page .project-single-wrapper .project-content-wrap .project-content ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.project-single-page .project-single-wrapper .project-content-wrap .project-content ul li {
display: flex;
}
.project-single-page .project-single-wrapper .project-content-wrap .project-content ul li a {
color: var(--white-color);
font-family: var(--font-inter);
font-size: 12px;
font-weight: 500;
line-height: 1;
padding: 5px 14px;
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: 0.5s;
}
.project-single-page .project-single-wrapper .project-content-wrap .project-content ul li a:hover {
background-color: var(--white-color);
border-color: var(--white-color);
color: var(--title-color);
}
.project-single-page .slider-btn-grp {
position: absolute;
bottom: 70px;
right: 80px;
z-index: 2;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.project-single-page .slider-btn-grp {
right: 70px;
}
}
@media (max-width: 1399px) {
.project-single-page .slider-btn-grp {
right: 60px;
}
}
@media (max-width: 1199px) {
.project-single-page .slider-btn-grp {
right: 40px;
}
}
@media (max-width: 991px) {
.project-single-page .slider-btn-grp {
right: 30px;
bottom: 60px;
}
}
@media (max-width: 576px) {
.project-single-page .slider-btn-grp {
display: none;
}
}
.project-single-page .slider-btn-grp .slider-btn {
border: 1px solid var(--white-color);
}
@media (max-width: 576px) {
.project-single-page .slider-btn-grp .slider-btn {
gap: 30px;
}
}
.project-single-page .slider-btn-grp .slider-btn i {
color: var(--white-color);
}
.project-single-page .slider-btn-grp .slider-btn:hover {
border-color: var(--white-color);
background-color: var(--white-color);
}
.project-single-page .slider-btn-grp .slider-btn:hover i {
color: var(--title-color);
}
.project-single-page .project-single-slider .swiper-slide-active span,
.project-single-page .project-single-slider .swiper-slide-active h2 {
animation: fadeInDown 1.7s;
}
.project-single-page .project-single-slider .swiper-slide-active ul {
animation: fadeInUp 1.7s;
} .contact-map-section iframe {
width: 100%;
height: 100%;
min-height: 600px;
filter: invert(1) hue-rotate(180deg) brightness(0.7) grayscale(1);
border-radius: 30px;
}
@media (max-width: 1399px) {
.contact-map-section iframe {
min-height: 550px;
}
}
@media (max-width: 991px) {
.contact-map-section iframe {
min-height: 500px;
border-radius: 20px;
}
}
@media (max-width: 576px) {
.contact-map-section iframe {
min-height: 450px;
border-radius: 10px;
}
} @media (min-width: 1200px) and (max-width: 1399px) {
.faq-page .section-title2 h2 {
font-size: 58px;
}
} .error-page .error-wrapper {
text-align: center;
}
@media (max-width: 1199px) {
.error-page .error-wrapper .error-img img {
max-width: 650px;
width: 100%;
}
}
@media (max-width: 991px) {
.error-page .error-wrapper .error-img img {
max-width: 600px;
}
}
@media (max-width: 767px) {
.error-page .error-wrapper .error-img img {
max-width: 500px;
}
}
.error-page .error-wrapper .error-content {
padding-top: 105px;
}
@media (max-width: 1399px) {
.error-page .error-wrapper .error-content {
padding-top: 95px;
}
}
@media (max-width: 1399px) {
.error-page .error-wrapper .error-content {
padding-top: 75px;
}
}
@media (max-width: 1199px) {
.error-page .error-wrapper .error-content {
padding-top: 70px;
}
}
@media (max-width: 991px) {
.error-page .error-wrapper .error-content {
padding-top: 65px;
}
}
@media (max-width: 767px) {
.error-page .error-wrapper .error-content {
padding-top: 55px;
}
}
@media (max-width: 576px) {
.error-page .error-wrapper .error-content {
padding-top: 50px;
}
}
.error-page .error-wrapper .error-content h1 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 80px;
font-weight: 500;
line-height: 1.1;
letter-spacing: 0.01em;
margin-bottom: 30px;
}
@media (min-width: 1400px) and (max-width: 1599px) {
.error-page .error-wrapper .error-content h1 {
font-size: 75px;
}
}
@media (max-width: 1399px) {
.error-page .error-wrapper .error-content h1 {
font-size: 70px;
margin-bottom: 25px;
}
}
@media (max-width: 991px) {
.error-page .error-wrapper .error-content h1 {
font-size: 60px;
margin-bottom: 20px;
}
}
@media (max-width: 767px) {
.error-page .error-wrapper .error-content h1 {
font-size: 50px;
}
}
@media (max-width: 576px) {
.error-page .error-wrapper .error-content h1 {
font-size: 45px;
}
}
.error-page .error-wrapper .error-content p {
color: rgba(var(--title-color-opc), 0.5);
font-family: var(--font-inter);
font-size: 18px;
font-weight: 500;
line-height: 1.9;
letter-spacing: 0.03em;
margin: 0 auto;
max-width: 746px;
width: 100%;
padding-bottom: 55px;
}
@media (max-width: 1399px) {
.error-page .error-wrapper .error-content p {
padding-bottom: 45px;
}
}
@media (max-width: 991px) {
.error-page .error-wrapper .error-content p {
padding-bottom: 40px;
}
}
@media (max-width: 767px) {
.error-page .error-wrapper .error-content p {
font-size: 16px;
}
}
@media (max-width: 576px) {
.error-page .error-wrapper .error-content p {
font-size: 14px;
padding-bottom: 30px;
}
}
.error-page .error-wrapper .error-content .primary-btn3 {
padding: 17px 31px;
}
.innerpage-pagination-area .paginations {
margin: 70px 0 0 0;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
flex-wrap: wrap;
border: 1px solid rgba(var(--primary-color-opc), 0.2);
border-radius: 40px;
padding: 6px 20px;
}
@media (max-width: 991px) {
.innerpage-pagination-area .paginations {
gap: 24px;
}
}
.innerpage-pagination-area .paginations .page-item a {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 500;
line-height: 1;
width: 40px;
height: 40px;
border-radius: 40px;
border: 1px solid rgba(var(--primary-color-opc), 0.3);
display: flex;
align-items: center;
justify-content: center;
transition: 0.5s;
}
.innerpage-pagination-area .paginations .page-item a.current {
background-color: var(--primary-color2);
border-color: var(--primary-color2);
color: var(--white-color);
}
.innerpage-pagination-area .paginations .page-item a:hover {
background-color: var(--primary-color2);
border-color: var(--primary-color2);
color: var(--white-color);
}
.innerpage-pagination-area .paginations .page-item.paginations-button a {
width: unset;
height: unset;
border: unset;
background-color: unset;
}
.innerpage-pagination-area .paginations .page-item.paginations-button a svg {
fill: var(--paragraph-color);
transition: 0.5s;
}
.innerpage-pagination-area .paginations .page-item.paginations-button a:hover svg {
fill: var(--primary-color2);
} .blog-sidebar-area .widget-title {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 20px;
font-weight: 500;
line-height: 0.9;
letter-spacing: 0.6px;
text-transform: uppercase;
border-bottom: 1px solid var(--title-color);
display: inline-block;
margin-bottom: 30px;
}
@media (max-width: 576px) {
.blog-sidebar-area .widget-title {
margin-bottom: 25px;
}
}
.blog-sidebar-area .single-widget {
padding: 35px 35px;
border: 1px solid rgba(var(--primary-color-opc), 0.1);
background-color: #FAF9F9;
margin-bottom: 30px;
}
.blog-sidebar-area .single-widget:last-child {
margin-bottom: 0;
}
@media (min-width: 1200px) and (max-width: 1399px) {
.blog-sidebar-area .single-widget {
padding: 30px 25px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.blog-sidebar-area .single-widget {
padding: 30px 20px;
}
}
@media (max-width: 576px) {
.blog-sidebar-area .single-widget {
padding: 30px 15px;
}
}
.blog-sidebar-area .single-widget .category-list {
padding: 0;
margin: 0;
list-style: none;
}
.blog-sidebar-area .single-widget .category-list li {
position: relative;
display: flex;
align-items: center;
margin-bottom: 25px;
transition: 0.5s;
}
.blog-sidebar-area .single-widget .category-list li:last-child {
margin-bottom: 0;
}
.blog-sidebar-area .single-widget .category-list li a {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
flex-wrap: wrap;
gap: 5px;
transition: 0.5s;
}
.blog-sidebar-area .single-widget .category-list li a span {
color: rgba(var(--title-color-opc), 0.7);
font-family: var(--font-kanit);
font-size: 15px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.3px;
display: flex;
align-items: center;
gap: 8px;
transition: 0.5s;
}
.blog-sidebar-area .single-widget .category-list li a span svg {
fill: rgba(var(--title-color-opc), 0.7);
transition: 0.5s;
}
.blog-sidebar-area .single-widget .category-list li a span svg path:last-child {
fill: var(--white-color);
}
.blog-sidebar-area .single-widget .category-list li a span:last-child {
font-family: var(--font-inter);
font-size: 14px;
font-weight: 400;
}
.blog-sidebar-area .single-widget .category-list li:hover a span {
color: var(--primary-color2);
}
.blog-sidebar-area .single-widget .category-list li:hover a span svg {
fill: var(--primary-color2);
}
.blog-sidebar-area .single-widget .recent-post-widget {
display: flex;
align-items: center;
gap: 15px;
}
.blog-sidebar-area .single-widget .recent-post-widget .recent-post-img img {
min-width: 92px;
max-width: 92px;
height: 71px;
}
.blog-sidebar-area .single-widget .recent-post-widget .recent-post-content {
line-height: 1;
}
.blog-sidebar-area .single-widget .recent-post-widget .recent-post-content > a {
color: #3F444B;
font-family: var(--font-inter);
font-size: 12px;
font-weight: 500;
display: block;
margin-bottom: 8px;
transition: 0.5s;
}
@media (max-width: 576px) {
.blog-sidebar-area .single-widget .recent-post-widget .recent-post-content > a {
margin-bottom: 5px;
}
}
.blog-sidebar-area .single-widget .recent-post-widget .recent-post-content > a:hover {
color: var(--primary-color2);
}
.blog-sidebar-area .single-widget .recent-post-widget .recent-post-content h6 {
margin-bottom: 0;
}
.blog-sidebar-area .single-widget .recent-post-widget .recent-post-content h6 a {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 17px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.32px;
transition: 0.5s;
}
@media (min-width: 992px) and (max-width: 1199px) {
.blog-sidebar-area .single-widget .recent-post-widget .recent-post-content h6 a {
font-size: 14px;
}
}
@media (max-width: 576px) {
.blog-sidebar-area .single-widget .recent-post-widget .recent-post-content h6 a {
font-size: 15px;
}
}
.blog-sidebar-area .single-widget .recent-post-widget .recent-post-content h6 a:hover {
color: var(--primary-color2);
}
.blog-sidebar-area .single-widget .tag-list {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
@media (max-width: 1399px) {
.blog-sidebar-area .single-widget .tag-list {
gap: 10px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.blog-sidebar-area .single-widget .tag-list {
gap: 14px;
}
}
.blog-sidebar-area .single-widget .tag-list li {
margin: 0;
}
.blog-sidebar-area .single-widget .tag-list li a {
color: rgba(var(--title-color-opc), 0.7);
font-family: var(--font-kanit);
font-size: 10px;
font-weight: 400;
display: block;
line-height: 1;
padding: 9px 12px;
border-radius: 100px;
text-transform: uppercase;
background: var(--white-color);
transition: 0.5s;
}
@media (max-width: 576px) {
.blog-sidebar-area .single-widget .tag-list li a {
font-size: 9px;
}
}
.blog-sidebar-area .single-widget .tag-list li:hover a {
color: var(--white-color);
background-color: var(--primary-color2);
}
.blog-sidebar-area .single-widget .search-box {
display: flex;
align-items: center;
}
.blog-sidebar-area .single-widget .search-box input {
width: 100%;
padding: 8px 20px;
color: var(--title-color);
font-family: var(--font-inter);
font-size: 12px;
height: 45px;
border: 1px solid rgba(var(--primary-color-opc), 0.3);
border-right: unset;
}
.blog-sidebar-area .single-widget .search-box input:focus {
border: 1px solid #ddd;
}
.blog-sidebar-area .single-widget .search-box input::-moz-placeholder {
color: rgba(var(--title-color-opc), 0.4);
}
.blog-sidebar-area .single-widget .search-box input::placeholder {
color: rgba(var(--title-color-opc), 0.4);
}
.blog-sidebar-area .single-widget .search-box button {
background-color: var(--primary-color);
min-width: 90px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
z-index: 1;
}
@media (max-width: 1399px) {
.blog-sidebar-area .single-widget .search-box button {
min-width: 75px;
}
}
.blog-sidebar-area .single-widget .search-box button::after {
position: absolute;
content: "";
display: block;
left: 15%;
right: -20%;
top: -4%;
height: 150%;
width: 150%;
bottom: 0;
border-radius: 2px;
background-color: var(--primary-color2);
transform: skewX(45deg) scale(0, 1);
z-index: -1;
transition: all 0.5s ease-out 0s;
}
.blog-sidebar-area .single-widget .search-box button i {
color: var(--white-color);
font-size: 22px;
}
@media (max-width: 576px) {
.blog-sidebar-area .single-widget .search-box button {
min-width: 70px;
}
}
.blog-sidebar-area .single-widget .search-box button:hover::after {
transform: skewX(45deg) scale(1, 1);
}
.blog-sidebar-area .single-widget .social-list {
display: flex;
align-items: center;
gap: 30px;
}
.blog-sidebar-area .single-widget .social-list li {
display: block;
text-align: center;
}
.blog-sidebar-area .single-widget .social-list li a i {
color: var(--text-color);
transition: 0.5s;
}
.blog-sidebar-area .single-widget .social-list li a span {
color: var(--text-color);
font-family: var(--font-hankenGrotesk);
font-size: 12px;
font-weight: 400;
line-height: 1;
display: block;
padding-top: 2px;
transition: 0.5s;
}
.blog-sidebar-area .single-widget .social-list li:hover a i {
color: var(--primary-color1);
}
.blog-sidebar-area .single-widget .social-list li:hover a svg {
fill: var(--primary-color1);
}
.blog-sidebar-area .single-widget .social-list li:hover a span {
color: var(--primary-color1);
} .blog-masonary-page .pt-25 {
padding-top: 25px;
}
@media (max-width: 1199px) {
.blog-masonary-page .pt-25 {
padding-top: 20px;
}
}
@media (max-width: 991px) {
.blog-masonary-page .pt-25 {
padding-top: 0;
}
} .blog-details-page .blog-details-top-area {
max-width: 970px;
width: 100%;
margin: 0 auto;
margin-bottom: 35px;
}
@media (max-width: 1199px) {
.blog-details-page .blog-details-top-area {
max-width: 830px;
}
}
.blog-details-page .blog-details-top-area .blog-meta {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
line-height: 1;
margin-bottom: 30px;
}
@media (max-width: 767px) {
.blog-details-page .blog-details-top-area .blog-meta {
margin-bottom: 25px;
}
}
.blog-details-page .blog-details-top-area .blog-meta li {
color: rgba(var(--title-color-opc), 0.5);
font-family: var(--font-inter);
font-weight: 500;
font-size: 15px;
letter-spacing: 0.3px;
margin-right: 50px;
display: flex;
align-items: center;
position: relative;
transition: 0.25s ease;
}
@media (min-width: 576px) and (max-width: 767px) {
.blog-details-page .blog-details-top-area .blog-meta li {
font-size: 13px;
margin-right: 20px;
}
}
@media (max-width: 576px) {
.blog-details-page .blog-details-top-area .blog-meta li {
margin-right: 16px;
font-size: 12px;
line-height: 1.2;
}
}
.blog-details-page .blog-details-top-area .blog-meta li svg {
margin-right: 8px;
fill: rgba(var(--title-color-opc), 0.5);
transition: 0.25s ease;
}
@media (max-width: 767px) {
.blog-details-page .blog-details-top-area .blog-meta li svg {
width: 14px;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.blog-details-page .blog-details-top-area .blog-meta li svg {
margin-right: 5px;
}
}
@media (max-width: 576px) {
.blog-details-page .blog-details-top-area .blog-meta li svg {
margin-right: 5px;
}
}
.blog-details-page .blog-details-top-area .blog-meta li a {
color: rgba(var(--title-color-opc), 0.5);
transition: 0.5s;
}
.blog-details-page .blog-details-top-area .blog-meta li:hover a {
color: var(--primary-color2);
}
.blog-details-page .blog-details-top-area .blog-meta li:hover a svg {
fill: var(--primary-color2);
}
.blog-details-page .blog-details-top-area .blog-meta li::before {
content: "";
position: absolute;
right: -25px;
top: 3px;
width: 2px;
height: 10px;
line-height: 5px;
background-color: var(--primary-color2);
border-radius: 4px;
}
@media (min-width: 576px) and (max-width: 767px) {
.blog-details-page .blog-details-top-area .blog-meta li::before {
right: -10px;
}
}
@media (max-width: 576px) {
.blog-details-page .blog-details-top-area .blog-meta li::before {
right: -8px;
}
}
.blog-details-page .blog-details-top-area .blog-meta li:last-child {
margin-right: 0;
}
.blog-details-page .blog-details-top-area .blog-meta li:last-child::before {
display: none;
visibility: hidden;
}
.blog-details-page .blog-details-top-area h2 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 50px;
font-weight: 500;
line-height: 1.1;
text-align: center;
margin-bottom: 35px;
}
@media (max-width: 1199px) {
.blog-details-page .blog-details-top-area h2 {
font-size: 45px;
margin-bottom: 30px;
}
}
@media (max-width: 991px) {
.blog-details-page .blog-details-top-area h2 {
font-size: 40px;
margin-bottom: 25px;
}
}
@media (max-width: 767px) {
.blog-details-page .blog-details-top-area h2 {
font-size: 36px;
}
}
@media (max-width: 576px) {
.blog-details-page .blog-details-top-area h2 {
font-size: 32px;
margin-bottom: 20px;
}
}
.blog-details-page .blog-details-top-area .author-area {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.blog-details-page .blog-details-top-area .author-area .author-img img {
width: 30px;
height: 30px;
border-radius: 50%;
}
.blog-details-page .blog-details-top-area .author-area .author-content h6 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 15px;
font-weight: 400;
line-height: 1;
margin-bottom: 0;
}
.blog-details-page .blog-details-top-area .author-area .author-content h6 a {
color: var(--primary-color2);
text-decoration: underline;
}
.blog-details-page .blog-details-thumb {
text-align: center;
}
@media (max-width: 767px) {
.blog-details-page .blog-details-thumb img {
min-height: 300px;
-o-object-fit: cover;
object-fit: cover;
}
}
.blog-details-page .tag-and-social-area {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
flex-wrap: wrap;
margin-bottom: 25px;
clear: both;
}
.blog-details-page .tag-and-social-area .tag-list {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.blog-details-page .tag-and-social-area .tag-list li a {
color: rgba(var(--title-color-opc), 0.5);
font-family: var(--font-syne);
font-size: 15px;
font-weight: 400;
line-height: 1;
transition: 0.5s;
}
.blog-details-page .tag-and-social-area .tag-list li a span {
color: var(--primary-color2);
}
.blog-details-page .tag-and-social-area .tag-list li a:hover {
color: var(--primary-color2);
}
.blog-details-page .tag-and-social-area .social-area {
display: flex;
align-items: center;
gap: 20px;
}
.blog-details-page .tag-and-social-area .social-area h6 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 18px;
font-weight: 400;
line-height: 1;
margin-bottom: 0;
}
.blog-details-page .tag-and-social-area .social-area .social-link {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
gap: 28px;
line-height: 1;
}
.blog-details-page .tag-and-social-area .social-area .social-link li::before {
display: none;
}
.blog-details-page .tag-and-social-area .social-area .social-link li a i {
font-size: 18px;
color: rgba(var(--title-color-opc), 0.4);
transition: 0.5s;
}
.blog-details-page .tag-and-social-area .social-area .social-link li a i.bi-twitter-x {
font-size: 15px;
}
.blog-details-page .tag-and-social-area .social-area .social-link li a:hover i {
color: var(--primary-color2);
}
.blog-details-page .details-navigation {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
flex-wrap: wrap;
padding: 30px 0;
border-top: 1px solid rgba(var(--primary-color-opc), 0.1);
border-bottom: 1px solid rgba(var(--primary-color-opc), 0.1);
}
@media (max-width: 767px) {
.blog-details-page .details-navigation {
padding: 25px 0;
}
}
.blog-details-page .details-navigation .navigation-arrow {
width: 40px;
height: 30px;
border-radius: 15px;
background-color: rgba(var(--primary-color2-opc), 0.1);
display: flex;
align-items: center;
justify-content: center;
transition: 0.5s;
}
.blog-details-page .details-navigation .navigation-arrow svg {
fill: var(--primary-color2);
transition: 0.5s;
}
.blog-details-page .details-navigation .navigation-arrow:hover {
background-color: var(--primary-color2);
}
.blog-details-page .details-navigation .navigation-arrow:hover svg {
fill: var(--white-color);
}
.blog-details-page .details-navigation p a {
color: rgba(var(--title-color-opc), 0.7);
font-family: var(--font-kanit);
font-size: 22px;
font-weight: 400;
line-height: 1.5;
margin-bottom: 0;
word-break: break-all;
}
@media (max-width: 767px) {
.blog-details-page .details-navigation p a {
font-size: 18px;
}
}
.blog-details-page .comment-area {
scroll-margin-top: 200px;
margin-top: 80px;
}
.blog-details-page .comment-area .title {
margin-bottom: 55px;
}
@media (max-width: 991px) {
.blog-details-page .comment-area .title {
margin-bottom: 45px;
}
}
.blog-details-page .comment-area .title h3 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 30px;
font-weight: 500;
margin-bottom: 0;
line-height: 1;
text-decoration: underline;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
@media (max-width: 576px) {
.blog-details-page .comment-area .title h3 {
font-size: 25px;
}
}
.blog-details-page .comment-area .comment {
margin: 0;
padding: 0;
list-style: none;
}
.blog-details-page .comment-area .comment ul.children {
margin-bottom: 35px;
}
.blog-details-page .comment-area .comment ul.children .single-comment-area + div#respond {
margin: 30px 0;
}
.blog-details-page .comment-area .comment li {
padding-bottom: 35px;
margin-bottom: 35px;
border-bottom: 1px solid rgba(var(--primary-color-opc), 0.1);
}
.blog-details-page .comment-area .comment li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: unset;
}
.blog-details-page .comment-area .comment .single-comment-area {
display: flex;
align-items: flex-start;
gap: 20px;
}
@media (max-width: 576px) {
.blog-details-page .comment-area .comment .single-comment-area {
gap: 10px;
}
}
.blog-details-page .comment-area .comment .single-comment-area + div#respond {
margin-bottom: 30px;
}
.blog-details-page .comment-area .comment .single-comment-area .author-img {
width: 100px;
}
.blog-details-page .comment-area .comment .single-comment-area .author-img img {
max-width: 100px;
min-width: 100px;
height: 100px;
}
@media (max-width: 576px) {
.blog-details-page .comment-area .comment .single-comment-area .author-img img {
max-width: 70px;
min-width: 70px;
height: 70px;
}
}
.blog-details-page .comment-area .comment .single-comment-area .comment-content {
width: calc(100% - 120px);
}
.blog-details-page .comment-area .comment .single-comment-area .comment-content .author-name-date {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
flex-wrap: wrap;
}
@media (max-width: 767px) {
.blog-details-page .comment-area .comment .single-comment-area .comment-content .author-name-date {
margin-bottom: 15px;
}
}
.blog-details-page .comment-area .comment .single-comment-area .comment-content .author-name-date h4 {
line-height: 1;
margin-bottom: 0;
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 24px;
font-weight: 400;
}
@media (max-width: 767px) {
.blog-details-page .comment-area .comment .single-comment-area .comment-content .author-name-date h4 {
font-size: 22px;
}
}
@media (max-width: 576px) {
.blog-details-page .comment-area .comment .single-comment-area .comment-content .author-name-date h4 {
font-size: 20px;
}
}
.blog-details-page .comment-area .comment .single-comment-area .comment-content .author-name-date span {
color: rgba(var(--title-color-opc), 0.5);
font-family: var(--font-kanit);
font-size: 18px;
font-weight: 400;
line-height: 1;
}
.blog-details-page .comment-area .comment .single-comment-area .comment-content p {
color: rgba(var(--title-color-opc), 0.5);
font-family: var(--font-inter);
font-size: 18px;
font-weight: 400;
line-height: 1.8;
margin-bottom: 28px;
}
@media (max-width: 576px) {
.blog-details-page .comment-area .comment .single-comment-area .comment-content p {
font-size: 15px;
}
}
.blog-details-page .comment-area .comment .single-comment-area .comment-content .replay-btn {
display: inline-block;
padding: 10px 26px;
border: 1px solid var(--primary-color2);
border-radius: 100px;
line-height: 1;
cursor: pointer;
transition: 0.35s;
}
.blog-details-page .comment-area .comment .single-comment-area .comment-content .replay-btn svg {
transition: 0.35s;
fill: var(--primary-color2);
}
.blog-details-page .comment-area .comment .single-comment-area .comment-content .replay-btn .details-button {
transition: 0.5s;
position: relative;
display: inline-block;
vertical-align: top;
line-height: 1;
font-weight: 500;
text-decoration: none;
outline: none;
padding: 0 1.375em 0.0625em 0;
cursor: pointer;
background-color: transparent;
background-position: 100% 100%;
background-repeat: no-repeat;
background-size: var(--background-size, 100%) 0.0625em;
transition: background-size 0.2s linear var(--background-delay, 0.15s);
border: none;
background-image: linear-gradient(0deg, var(--primary-color2) 0%, var(--primary-color2) 100%);
color: var(--primary-color2);
font-family: var(--font-inter);
font-size: 15px;
font-weight: 500;
white-space: nowrap;
}
.blog-details-page .comment-area .comment .single-comment-area .comment-content .replay-btn .details-button::after {
content: "\f123";
font-family: "bootstrap-icons";
display: block;
position: absolute;
right: 0;
left: initial;
top: 0;
opacity: 1;
transition: opacity 0.3s 0.15s;
color: var(--primary-color2);
}
.blog-details-page .comment-area .comment .single-comment-area .comment-content .replay-btn .details-button svg {
position: absolute;
display: block;
line-height: 1.8125em;
width: 1.375em;
height: 1.8125em;
right: 0;
left: initial;
top: 50%;
margin: -0.92em 0 0;
fill: none;
stroke: var(--primary-color2);
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1px;
stroke-dasharray: 7.95 30;
stroke-dashoffset: var(--stroke-dashoffset, 46);
transition: stroke-dashoffset var(--stroke-duration, 0.15s) var(--stroke-easing, linear) var(--stroke-delay, 0s);
}
.blog-details-page .comment-area .comment .single-comment-area .comment-content .replay-btn .details-button a {
color: var(--primary-color2);
}
.blog-details-page .comment-area .comment .single-comment-area .comment-content .replay-btn:hover {
background-color: var(--primary-color2);
}
.blog-details-page .comment-area .comment .single-comment-area .comment-content .replay-btn:hover .details-button {
--background-size: 0%;
--stroke-dashoffset: 26;
--stroke-duration: .3s;
--stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
--stroke-delay: .195s;
background-image: linear-gradient(0deg, #fff 0%, #fff 100%);
color: var(--white-color);
}
.blog-details-page .comment-area .comment .single-comment-area .comment-content .replay-btn:hover .details-button svg {
stroke: var(--white-color);
}
.blog-details-page .comment-area .comment .single-comment-area .comment-content .replay-btn:hover .details-button::after {
opacity: 0;
transition-delay: 0s;
color: var(--white-color);
}
.blog-details-page .comment-area .comment .single-comment-area .comment-content .replay-btn:hover .details-button a {
color: var(--white-color);
}
.blog-details-page .comment-area .contact-form-area {
padding-top: 120px;
}
@media (max-width: 1199px) {
.blog-details-page .comment-area .contact-form-area {
padding-top: 90px;
}
}
@media (max-width: 991px) {
.blog-details-page .comment-area .contact-form-area {
padding-top: 70px;
}
}
.blog-details-page .comment-area .contact-form-area .contact-form {
background: #FAF8FB;
border: 1px solid rgba(var(--primary-color-opc), 0.05);
padding: 45px 55px;
}
@media (max-width: 767px) {
.blog-details-page .comment-area .contact-form-area .contact-form {
padding: 45px 30px;
}
}
@media (max-width: 576px) {
.blog-details-page .comment-area .contact-form-area .contact-form {
padding: 40px 25px;
border-radius: 15px;
}
}
.blog-details-page .comment-area .contact-form-area .contact-form .form-inner input,
.blog-details-page .comment-area .contact-form-area .contact-form .form-inner textarea {
background-color: var(--white-color);
border-color: rgba(var(--primary-color-opc), 0.1);
}
.blog-details-page .comment-area .contact-form-area .contact-form .form-inner input:focus,
.blog-details-page .comment-area .contact-form-area .contact-form .form-inner textarea:focus {
border-color: var(--primary-color2);
}
.blog-details-page .comment-area .contact-form-area .contact-form .form-inner input {
height: 50px;
}
.blog-details-page .comment-area .contact-form-area .contact-form button {
border: unset;
}
.details-content-wrapper .line-break {
height: 15px;
display: block;
}
@media (max-width: 576px) {
.details-content-wrapper .line-break {
height: 10px;
}
}
.details-content-wrapper p {
color: rgba(var(--title-color-opc), 0.5);
font-family: var(--font-inter);
font-size: 18px;
font-weight: 400;
line-height: 1.9;
}
@media (max-width: 576px) {
.details-content-wrapper p {
font-size: 17px;
}
}
.details-content-wrapper p.first-para::first-letter {
float: left;
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 70px;
font-weight: 700;
line-height: 1;
margin-right: 15px;
}
@media (max-width: 576px) {
.details-content-wrapper p.first-para::first-letter {
font-size: 60px;
margin-right: 10px;
}
}
.details-content-wrapper h3 {
color: var(--title-color);
font-family: var(--font-kanit);
font-weight: 500;
line-height: 1.2;
margin-bottom: 0;
}
.details-content-wrapper h4 {
color: var(--title-color);
font-family: var(--font-kanit);
font-weight: 500;
line-height: 1.2;
margin-bottom: 0;
}
.details-content-wrapper blockquote {
background-color: #FFF9F6;
padding: 28px 40px;
border-radius: 20px;
border: none;
}
@media (min-width: 992px) and (max-width: 1199px) {
.details-content-wrapper blockquote {
padding: 28px 30px;
}
}
@media (max-width: 991px) {
.details-content-wrapper blockquote {
padding: 28px 25px;
}
}
@media (max-width: 767px) {
.details-content-wrapper blockquote {
padding: 28px 25px;
}
}
@media (max-width: 576px) {
.details-content-wrapper blockquote {
padding: 28px 20px;
}
}
.details-content-wrapper blockquote svg {
fill: var(--primary-color2);
}
.details-content-wrapper blockquote p {
color: rgba(var(--title-color-opc), 0.5);
font-family: var(--font-kanit);
font-size: 20px;
font-weight: 400;
line-height: 1.9;
padding-top: 20px;
margin-bottom: 20px;
}
@media (max-width: 991px) {
.details-content-wrapper blockquote p {
font-size: 19px;
}
}
@media (max-width: 767px) {
.details-content-wrapper blockquote p {
font-size: 18px;
margin-bottom: 20px;
}
}
@media (max-width: 767px) {
.details-content-wrapper blockquote p {
font-size: 17px;
}
}
.details-content-wrapper blockquote h3 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 28px;
font-weight: 500;
line-height: 1.2;
margin-bottom: 0;
}
@media (max-width: 767px) {
.details-content-wrapper blockquote h3 {
font-size: 25px;
}
}
@media (max-width: 767px) {
.details-content-wrapper blockquote h3 {
font-size: 22px;
}
}
.details-content-wrapper ul.list-details {
padding: 0;
margin: 0;
list-style: none;
-moz-columns: 2;
columns: 2;
}
@media (max-width: 576px) {
.details-content-wrapper ul.list-details {
-moz-columns: unset;
columns: unset;
}
}
.details-content-wrapper ul.list-details li {
color: rgba(var(--title-color-opc), 0.7);
font-family: var(--font-kanit);
font-size: 17px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.34px;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.details-content-wrapper ul.list-details li svg {
fill: var(--primary-color2);
} .property-form-section .property-form-wrap {
margin-top: -57px;
position: relative;
border-radius: 100px;
padding: 35px 60px;
background-color: var(--white-color);
box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
gap: 30px;
}
@media (max-width: 1399px) {
.property-form-section .property-form-wrap {
padding: 35px 40px;
}
}
@media (max-width: 1199px) {
.property-form-section .property-form-wrap {
padding: 30px 25px;
}
}
@media (max-width: 991px) {
.property-form-section .property-form-wrap {
border-radius: 30px;
padding: 30px 20px;
}
}
@media (max-width: 576px) {
.property-form-section .property-form-wrap {
padding: 25px 15px;
border-radius: 20px;
}
}
.property-form-section .single-dropdown .nice-select {
height: 44px;
border-radius: 30px;
border: 1px solid rgba(var(--primary-color-opc), 0.1);
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 15px;
font-weight: 400;
text-transform: capitalize;
padding-left: 25px;
display: flex;
align-items: center;
}
.property-form-section .single-dropdown .nice-select:focus {
border-color: var(--primary-color);
}
@media (max-width: 1199px) {
.property-form-section .single-dropdown .nice-select {
padding-left: 20px;
}
}
@media (max-width: 767px) {
.property-form-section .single-dropdown .nice-select {
padding-left: 18px;
padding-right: 15px;
}
}
.property-form-section .single-dropdown .nice-select::after {
border-bottom: 2px solid var(--primary-color);
border-right: 2px solid var(--primary-color);
width: 8px;
height: 8px;
right: 28px;
top: 48%;
}
@media (max-width: 1199px) {
.property-form-section .single-dropdown .nice-select::after {
right: 20px;
}
}
@media (max-width: 767px) {
.property-form-section .single-dropdown .nice-select::after {
right: 20px;
}
}
.property-form-section .single-dropdown .nice-select.open .list {
width: 100%;
}
.property-form-section .single-dropdown .nice-select.open .list .option {
padding-left: 25px;
font-family: var(--font-dmsans);
font-size: 14px;
}
@media (max-width: 767px) {
.property-form-section .single-dropdown .nice-select.open .list .option {
padding-left: 15px;
}
}
.property-form-section button {
color: var(--white-color);
font-family: var(--font-kanit);
font-size: 15px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.03em;
background-color: var(--primary-color);
padding: 14px 30px;
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
border-radius: 70px;
}
@media (max-width: 1399px) {
.property-form-section button {
padding: 15px 22px;
font-size: 14px;
}
}
.property-form-section button svg {
fill: var(--white-color);
} .product-card {
transition: 0.5s;
position: relative;
}
.product-card .product-card-img {
position: relative;
overflow: hidden;
}
.product-card .product-card-img > a .batch {
position: absolute;
left: 5px;
top: 5px;
display: flex;
align-items: center;
flex-direction: column;
gap: 5px;
}
.product-card .product-card-img > a .batch > span {
padding: 2px 11px;
display: flex;
align-items: center;
justify-content: center;
color: var(--title-color);
text-align: center;
font-size: 13px;
font-weight: 400;
font-family: var(--font-kanit);
letter-spacing: 0.3px;
text-transform: uppercase;
background-color: var(--white-color);
z-index: 1;
}
.product-card .product-card-img > a .batch > span.new {
background-color: var(--primary-color2);
color: var(--white-color);
}
.product-card .product-card-img > a .batch > span.sale {
background-color: var(--primary-color);
color: var(--white-color);
}
.product-card .product-card-img .cart-btn-area {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
background-color: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scaleY(0);
transform-origin: bottom;
transition: 0.5s ease-in-out;
}
.product-card .product-card-img .cart-btn-area .add-cart-btn {
color: var(--white-color);
font-family: var(--font-kanit);
font-size: 13px;
font-weight: 400;
text-transform: uppercase;
background: var(--primary-color);
padding: 14px 33px;
line-height: 1;
display: inline-block;
position: relative;
overflow: hidden;
z-index: 1;
white-space: nowrap;
transition: 0.5s;
}
.product-card .product-card-img .cart-btn-area .add-cart-btn::after {
position: absolute;
content: "";
display: block;
left: 15%;
right: -20%;
top: -4%;
height: 150%;
width: 150%;
bottom: 0;
border-radius: 2px;
background-color: var(--primary-color2);
transform: skewX(45deg) scale(0, 1);
z-index: -1;
transition: all 0.5s ease-out 0s;
}
.product-card .product-card-img .cart-btn-area .add-cart-btn:hover::after {
transform: skewX(45deg) scale(1, 1);
}
.product-card .product-card-img .view-and-favorite-area {
position: absolute;
top: 10px;
right: 10px;
transform-origin: right;
transform: scaleX(0);
opacity: 0;
transition: 0.5s;
}
.product-card .product-card-img .view-and-favorite-area ul {
padding: 0;
margin: 0;
list-style: none;
}
.product-card .product-card-img .view-and-favorite-area ul li {
margin-bottom: 10px;
}
.product-card .product-card-img .view-and-favorite-area ul li:last-child {
margin-bottom: 0;
}
.product-card .product-card-img .view-and-favorite-area ul li a,
.product-card .product-card-img .view-and-favorite-area ul li button {
width: 32px;
height: 32px;
background-color: rgba(var(--primary-color-opc), 0.1);
display: flex;
align-items: center;
justify-content: center;
transition: 0.5s;
border: none;
border-radius: 0;
padding: 0;
text-align: center;
}
.product-card .product-card-img .view-and-favorite-area ul li a svg,
.product-card .product-card-img .view-and-favorite-area ul li a i,
.product-card .product-card-img .view-and-favorite-area ul li button svg,
.product-card .product-card-img .view-and-favorite-area ul li button i {
color: var(--title-color);
transition: 0.5s;
width: 20px;
}
.product-card .product-card-img .view-and-favorite-area ul li a:hover,
.product-card .product-card-img .view-and-favorite-area ul li button:hover {
background-color: var(--primary-color);
}
.product-card .product-card-img .view-and-favorite-area ul li a:hover svg,
.product-card .product-card-img .view-and-favorite-area ul li a:hover i,
.product-card .product-card-img .view-and-favorite-area ul li button:hover svg,
.product-card .product-card-img .view-and-favorite-area ul li button:hover i {
color: var(--white-color);
}
.product-card .product-card-content {
padding-top: 25px;
}
@media (max-width: 576px) {
.product-card .product-card-content {
padding-top: 20px;
}
}
.product-card .product-card-content h6 {
margin-bottom: 15px;
}
@media (max-width: 576px) {
.product-card .product-card-content h6 {
margin-bottom: 10px;
}
}
.product-card .product-card-content h6 a {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 20px;
font-weight: 400;
letter-spacing: 0.5px;
line-height: 1.3;
transition: 0.5s;
}
.product-card .product-card-content h6 a:hover {
color: var(--primary-color2);
}
.product-card .product-card-content > span {
color: var(--title-color);
font-family: var(--font-inter);
font-size: 17px;
font-weight: 600;
display: block;
}
.product-card .product-card-content > span del {
color: rgba(var(--primary-color-opc), 0.3);
font-size: 15px;
font-weight: 400;
}
.product-card .product-card-content .rating {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 20px;
}
@media (max-width: 576px) {
.product-card .product-card-content .rating {
margin-bottom: 15px;
}
}
.product-card .product-card-content .rating ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
gap: 5px;
}
.product-card .product-card-content .rating ul li {
line-height: 1;
}
.product-card .product-card-content .rating ul li i {
color: #FFC200;
font-size: 14px;
}
.product-card .product-card-content .rating span {
color: rgba(var(--primary-color-opc), 0.3);
font-size: 14px;
font-weight: 500;
line-height: 1;
}
.product-card:hover .product-card-img .cart-btn-area {
opacity: 1;
transform: scaleY(1);
}
.product-card:hover .product-card-img .view-and-favorite-area {
transform: scaleX(1);
opacity: 1;
} .product-details-top-section .product-details-img .nav-pills {
padding-top: 30px;
gap: 35px;
}
@media (max-width: 1199px) {
.product-details-top-section .product-details-img .nav-pills {
gap: 20px;
padding-top: 25px;
}
}
@media (max-width: 576px) {
.product-details-top-section .product-details-img .nav-pills {
gap: 15px;
}
}
.product-details-top-section .product-details-img .nav-pills .nav-link {
background-color: unset;
border-radius: unset;
padding: 0;
width: 100px;
height: 100px;
}
@media (max-width: 1199px) {
.product-details-top-section .product-details-img .nav-pills .nav-link {
width: 95px;
height: 95px;
}
}
.product-details-top-section .product-details-img .nav-pills .nav-link.active {
border: 1px solid var(--primary-color2);
}
@media (min-width: 992px) and (max-width: 1199px) {
.product-details-top-section .product-details-img .nav-pills .nav-link {
border: 1px solid #eee;
}
}
@media (max-width: 576px) {
.product-details-top-section .product-details-img .nav-pills .nav-link {
border: 1px solid #eee;
width: 70px;
height: 70px;
padding: 0;
}
}
.product-details-top-section .product-details-content h2 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 35px;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.7px;
text-transform: capitalize;
margin-bottom: 10px;
}
@media (max-width: 1199px) {
.product-details-top-section .product-details-content h2 {
font-size: 32px;
}
}
@media (max-width: 576px) {
.product-details-top-section .product-details-content h2 {
font-size: 30px;
margin-bottom: 15px;
}
}
.product-details-top-section .product-details-content .rating-review {
display: flex;
align-items: center;
gap: 40px;
margin-bottom: 20px;
}
@media (max-width: 576px) {
.product-details-top-section .product-details-content .rating-review {
flex-direction: column;
align-items: flex-start;
gap: 0px;
}
}
.product-details-top-section .product-details-content .rating-review .rating {
display: flex;
align-items: center;
gap: 8px;
line-height: 1;
}
.product-details-top-section .product-details-content .rating-review .rating .star {
display: flex;
align-items: center;
gap: 6px;
}
.product-details-top-section .product-details-content .rating-review .rating .star i {
font-size: 14px;
color: #ffc107;
}
.product-details-top-section .product-details-content .rating-review .rating p {
margin-bottom: 0;
}
.product-details-top-section .product-details-content .rating-review .rating p a {
color: rgba(var(--title-color-opc), 0.5);
font-family: var(--font-kanit);
font-size: 15px;
font-weight: 300;
text-transform: capitalize;
transition: 0.5s;
}
.product-details-top-section .product-details-content .rating-review .rating p a:hover {
color: var(--title-color);
}
.product-details-top-section .product-details-content .rating-review p {
color: var(--primary-color1);
font-family: var(--font-Jost);
font-size: 15px;
font-weight: 400;
letter-spacing: 0.3px;
text-transform: capitalize;
margin-bottom: 0;
}
.product-details-top-section .product-details-content p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.8;
letter-spacing: 0.48px;
margin-bottom: 20px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.product-details-top-section .product-details-content p {
font-size: 15px;
}
}
.product-details-top-section .product-details-content .price-area {
margin-bottom: 35px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.product-details-top-section .product-details-content .price-area {
margin-bottom: 30px;
}
}
.product-details-top-section .product-details-content .price-area h4 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 25px;
font-weight: 500;
line-height: 1;
margin-bottom: 0;
}
.product-details-top-section .product-details-content .price-area h4 del {
color: #ABABAB;
font-family: var(--font-kanit);
font-size: 18px;
font-weight: 400;
line-height: 1;
}
.product-details-top-section .product-details-content .quantity-color-area {
display: flex;
align-items: flex-start;
gap: 50px;
margin-bottom: 35px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.product-details-top-section .product-details-content .quantity-color-area {
gap: 40px;
}
}
@media (max-width: 576px) {
.product-details-top-section .product-details-content .quantity-color-area {
flex-direction: column;
align-items: flex-start;
gap: 30px;
}
}
.product-details-top-section .product-details-content .quantity-color-area .quantity-color .widget-title {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 16px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.48px;
margin-bottom: 20px;
}
@media (max-width: 576px) {
.product-details-top-section .product-details-content .quantity-color-area .quantity-color .widget-title {
margin-bottom: 15px;
}
}
.product-details-top-section .product-details-content .quantity-color-area .quantity-color .quantity-counter {
display: flex;
align-items: center;
gap: 10px;
}
.product-details-top-section .product-details-content .quantity-color-area .quantity-color .quantity-counter a {
width: 40px;
height: 40px;
background-color: rgba(var(--primary-color-opc), 0.07);
display: flex;
align-items: center;
justify-content: center;
color: var(--title-color);
}
.product-details-top-section .product-details-content .quantity-color-area .quantity-color .quantity-counter .quantity__input {
max-width: 58px;
width: 100%;
height: 40px;
border: 1px solid var(--primary-color);
text-align: center;
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 16px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.48px;
}
.product-details-top-section .product-details-content .quantity-color-area .quantity-color .quantity-counter .quantity__input:focus {
border: 1px solid #ddd;
}
.product-details-top-section .product-details-content .quantity-color-area .quantity-color .color-list {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.product-details-top-section .product-details-content .quantity-color-area .quantity-color .color-list {
gap: 8px;
}
}
.product-details-top-section .product-details-content .quantity-color-area .quantity-color .color-list li {
width: 30px;
height: 30px;
border: 1px solid transparent;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.product-details-top-section .product-details-content .quantity-color-area .quantity-color .color-list li span {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #730718;
display: inline-block;
}
.product-details-top-section .product-details-content .quantity-color-area .quantity-color .color-list li:nth-child(2) span {
background-color: #815147;
}
.product-details-top-section .product-details-content .quantity-color-area .quantity-color .color-list li:nth-child(3) span {
background-color: #4A212B;
}
.product-details-top-section .product-details-content .quantity-color-area .quantity-color .color-list li:nth-child(4) span {
background-color: #ED5C31;
}
.product-details-top-section .product-details-content .quantity-color-area .quantity-color .color-list li:nth-child(5) span {
background-color: #93625F;
}
.product-details-top-section .product-details-content .quantity-color-area .quantity-color .color-list li:nth-child(6) span {
background-color: #CE626C;
}
.product-details-top-section .product-details-content .quantity-color-area .quantity-color .color-list li.selected {
border: 1px solid var(--primary-color);
}
.product-details-top-section .product-details-content .product-details-btn {
display: flex;
align-items: center;
gap: 30px;
border-bottom: 1px solid var(--primary-color);
padding-bottom: 30px;
flex-wrap: wrap;
}
@media (max-width: 576px) {
.product-details-top-section .product-details-content .product-details-btn {
gap: 20px;
}
}
.product-details-top-section .product-details-content .product-details-btn .primary-btn2 {
padding: 17px 45px;
}
.product-details-top-section .product-details-content .product-details-btn .primary-btn2.transparent {
padding: 16px 34px;
}
.product-details-top-section .product-details-content .product-info {
padding-top: 25px;
margin-bottom: 30px;
}
.product-details-top-section .product-details-content .product-info .product-info-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
@media (max-width: 576px) {
.product-details-top-section .product-details-content .product-info .product-info-list {
flex-wrap: wrap;
gap: 8px;
}
}
.product-details-top-section .product-details-content .product-info .product-info-list li {
color: #868686;
font-family: var(--font-kanit);
font-size: 16px;
font-weight: 400;
letter-spacing: 0.32px;
text-transform: capitalize;
}
.product-details-top-section .product-details-content .product-info .product-info-list li a {
color: #868686;
transition: 0.35s;
}
.product-details-top-section .product-details-content .product-info .product-info-list li a:hover {
color: var(--primary-color1);
}
@media (max-width: 576px) {
.product-details-top-section .product-details-content .product-info .product-info-list li {
margin-right: 15px;
}
}
.product-details-top-section .product-details-content .product-info .product-info-list li span {
color: var(--title-color);
}
.product-details-top-section .product-details-content .payment-method {
padding: 17px 30px;
border: 1px solid rgba(var(--primary-color-opc), 0.1);
max-width: 460px;
width: 100%;
border-radius: 5px;
margin-bottom: 20px;
}
@media (max-width: 576px) {
.product-details-top-section .product-details-content .payment-method {
padding: 15px 20px;
}
}
.product-details-top-section .product-details-content .payment-method h6 {
color: var(--title-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.48px;
text-transform: capitalize;
margin-bottom: 15px;
}
.product-details-top-section .product-details-content .payment-method .payment-card-list {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
@media (max-width: 576px) {
.product-details-top-section .product-details-content .payment-method .payment-card-list {
gap: 10px;
}
}
.product-details-top-section .product-details-content .payment-method .payment-card-list li img {
min-width: 35px;
}
.product-details-top-section .product-details-content .wishlist-area a {
color: var(--paragraph-color);
font-family: var(--font-kanit);
font-size: 15px;
font-weight: 400;
line-height: 1;
display: inline-flex;
align-items: center;
gap: 7px;
transition: 0.5s;
}
.product-details-top-section .product-details-content .wishlist-area a span {
width: 23px;
height: 23px;
border-radius: 50%;
border: 1px solid rgba(var(--primary-color-opc), 0.1);
display: flex;
align-items: center;
justify-content: center;
transition: 0.5s;
}
.product-details-top-section .product-details-content .wishlist-area a span svg {
fill: var(--title-color);
transition: 0.5s;
}
.product-details-top-section .product-details-content .wishlist-area a:hover span {
background-color: var(--primary-color);
}
.product-details-top-section .product-details-content .wishlist-area a:hover span svg {
fill: var(--white-color);
}
.product-details-description-section .product-details-description-nav .nav-tabs {
border-bottom: 1px solid var(--primary-color);
padding-left: 80px;
gap: 65px;
}
@media (max-width: 991px) {
.product-details-description-section .product-details-description-nav .nav-tabs {
gap: 50px;
}
}
@media (max-width: 767px) {
.product-details-description-section .product-details-description-nav .nav-tabs {
gap: 20px;
padding-left: 0;
}
}
@media (max-width: 576px) {
.product-details-description-section .product-details-description-nav .nav-tabs {
gap: 10px;
}
}
.product-details-description-section .product-details-description-nav .nav-tabs .nav-link {
color: var(--paragraph-color);
font-family: var(--font-kanit);
font-size: 18px;
font-weight: 400;
letter-spacing: 0.36px;
text-transform: capitalize;
border: none;
background: linear-gradient(to bottom, #222222 0%, #222222 98%);
background-size: 0px 3px;
background-repeat: no-repeat;
background-position: right 100%;
transition: background-size 0.75s;
}
@media (max-width: 576px) {
.product-details-description-section .product-details-description-nav .nav-tabs .nav-link {
padding-bottom: 5px;
margin-right: 15px;
padding: 0;
}
}
.product-details-description-section .product-details-description-nav .nav-tabs .nav-link.active {
color: var(--title-color);
background-size: 100% 3px;
background-position: 0% 100%;
}
@media (max-width: 991px) {
.product-details-description-section .product-details-description-tab .description-tab-img img {
max-height: 380px;
-o-object-fit: cover;
object-fit: cover;
}
}
@media (max-width: 767px) {
.product-details-description-section .product-details-description-tab .description-tab-img img {
max-height: 300px;
}
}
.product-details-description-section .product-details-description-tab h6 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 22px;
font-weight: 500;
line-height: 1.2;
margin-bottom: 10px;
}
@media (max-width: 1199px) {
.product-details-description-section .product-details-description-tab h6 {
font-size: 20px;
}
}
.product-details-description-section .product-details-description-tab p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 15px;
font-weight: 300;
line-height: 1.8;
letter-spacing: 0.45px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.product-details-description-section .product-details-description-tab p {
font-size: 14px;
}
}
.product-details-description-section .product-details-description-tab .description-content {
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
@media (max-width: 991px) {
.product-details-description-section .product-details-description-tab .description-content {
align-items: flex-start;
gap: 20px;
}
}
.product-details-description-section .product-details-description-tab .description-content .description-left-content1 {
padding-top: 45px;
}
@media (max-width: 1399px) {
.product-details-description-section .product-details-description-tab .description-content .description-left-content1 {
padding-top: 30px;
}
}
@media (max-width: 991px) {
.product-details-description-section .product-details-description-tab .description-content .description-left-content1 {
padding-top: 0;
}
}
.product-details-description-section .product-details-description-tab .description-content .description-left-content2 {
margin-bottom: 120px;
}
@media (max-width: 1399px) {
.product-details-description-section .product-details-description-tab .description-content .description-left-content2 {
margin-bottom: 70px;
}
}
@media (max-width: 1199px) {
.product-details-description-section .product-details-description-tab .description-content .description-left-content2 {
margin-bottom: 0;
}
}
@media (max-width: 991px) {
.product-details-description-section .product-details-description-tab .description-content .description-left-content2 {
margin-bottom: 0;
}
}
.product-details-description-section .product-details-description-tab .description-content .description-right-content2 {
margin-bottom: 70px;
}
@media (max-width: 1199px) {
.product-details-description-section .product-details-description-tab .description-content .description-right-content2 {
margin-bottom: 20px;
}
}
@media (max-width: 991px) {
.product-details-description-section .product-details-description-tab .description-content .description-right-content2 {
margin-bottom: 0;
}
}
.product-details-description-section .product-details-description-tab .addithonal-information .total-table2 {
margin-bottom: 0;
}
.product-details-description-section .product-details-description-tab .addithonal-information .total-table2 tbody tr {
border-width: 1px;
border-color: #eee;
}
.product-details-description-section .product-details-description-tab .addithonal-information .total-table2 tbody tr td {
border-width: 1px;
border-color: #eee;
padding: 15px;
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 14px;
font-weight: 400;
line-height: 30px;
vertical-align: middle;
}
@media (max-width: 767px) {
.product-details-description-section .product-details-description-tab .addithonal-information .total-table2 tbody tr td {
padding: 10px;
}
}
.product-details-description-section .product-details-description-tab .addithonal-information .total-table2 tbody tr td:nth-child(1) {
font-weight: 500;
font-size: 16px;
text-align: start;
line-height: 26px;
}
@media (min-width: 992px) {
.product-details-description-section .product-details-description-tab .addithonal-information .total-table2 tbody tr td:nth-child(1) {
width: 25%;
}
}
.product-details-description-section .product-details-description-tab .reviews-area .number-of-review {
line-height: 1;
margin-bottom: 40px;
}
.product-details-description-section .product-details-description-tab .reviews-area .number-of-review h4 {
line-height: 1;
margin-bottom: 0;
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 24px;
font-weight: 500;
}
@media (max-width: 576px) {
.product-details-description-section .product-details-description-tab .reviews-area .number-of-review h4 {
font-size: 22px;
}
}
.product-details-description-section .product-details-description-tab .reviews-area .comment {
margin: 0;
padding: 0;
list-style: none;
}
.product-details-description-section .product-details-description-tab .reviews-area .comment > li {
margin-bottom: 40px;
}
.product-details-description-section .product-details-description-tab .reviews-area .comment > li > .single-comment-area {
margin-bottom: 24px;
}
.product-details-description-section .product-details-description-tab .reviews-area .comment > li:last-child {
margin-bottom: 0;
}
.product-details-description-section .product-details-description-tab .reviews-area .comment > li:last-child > .single-comment-area {
margin-bottom: 0;
}
.product-details-description-section .product-details-description-tab .reviews-area .comment .single-comment-area {
display: flex;
align-items: flex-start;
gap: 20px;
}
@media (max-width: 576px) {
.product-details-description-section .product-details-description-tab .reviews-area .comment .single-comment-area {
gap: 12px;
}
}
.product-details-description-section .product-details-description-tab .reviews-area .comment .single-comment-area .author-img img {
max-width: 50px;
min-width: 50px;
height: 50px;
border-radius: 50%;
}
.product-details-description-section .product-details-description-tab .reviews-area .comment .single-comment-area .comment-content .author-name-deg {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.product-details-description-section .product-details-description-tab .reviews-area .comment .single-comment-area .comment-content .author-name-deg h6 {
line-height: 1;
margin-bottom: 0;
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 15px;
font-weight: 500;
}
.product-details-description-section .product-details-description-tab .reviews-area .comment .single-comment-area .comment-content .author-name-deg span {
color: rgba(var(--title-color-opc), 0.6);
font-family: var(--font-inter);
font-size: 14px;
font-weight: 400;
line-height: 1;
}
.product-details-description-section .product-details-description-tab .reviews-area .comment .single-comment-area .comment-content .author-and-review .review {
padding: 0;
margin: 0;
list-style: none;
gap: 5px;
line-height: 1;
margin-bottom: 5px;
}
.product-details-description-section .product-details-description-tab .reviews-area .comment .single-comment-area .comment-content .author-and-review .review li {
line-height: 1;
}
.product-details-description-section .product-details-description-tab .reviews-area .comment .single-comment-area .comment-content .author-and-review .review li i {
color: #DDA701;
font-size: 12px;
}
.product-details-description-section .product-details-description-tab .reviews-area .comment .single-comment-area .comment-content p {
color: rgba(var(--title-color-opc), 0.6);
font-family: var(--font-inter);
font-size: 15px;
font-weight: 400;
line-height: 28px;
margin-bottom: 12px;
}
.product-details-description-section .product-details-description-tab .reviews-area .comment .single-comment-area .comment-content .replay-btn {
color: rgba(var(--title-color-opc), 0.6);
font-family: var(--font-inter);
font-size: 14px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 5px;
line-height: 1;
cursor: pointer;
transition: 0.35s;
}
.product-details-description-section .product-details-description-tab .reviews-area .comment .single-comment-area .comment-content .replay-btn svg {
transition: 0.35s;
fill: rgba(var(--title-color-opc), 0.6);
}
.product-details-description-section .product-details-description-tab .reviews-area .comment .single-comment-area .comment-content .replay-btn:hover {
color: var(--primary-color);
}
.product-details-description-section .product-details-description-tab .reviews-area .comment .single-comment-area .comment-content .replay-btn:hover svg {
fill: var(--primary-color);
}
.product-details-description-section .product-details-description-tab .reviews-area .comment .comment-replay {
padding: 0;
margin: 0;
list-style: none;
margin-left: 70px;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
padding: 24px 0;
}
.product-details-description-section .product-details-description-tab .reviews-area .comment .comment-replay > li {
margin-bottom: 30px;
}
.product-details-description-section .product-details-description-tab .reviews-area .comment .comment-replay > li:last-child {
margin-bottom: 0;
}
.product-details-description-section .product-details-description-tab .review-form {
background-color: var(--white-color);
border: 1px solid var(--border-color);
box-shadow: 4px 3px 40px 0px rgba(16, 33, 34, 0.06);
padding: 50px 40px;
border-radius: 10px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.product-details-description-section .product-details-description-tab .review-form {
padding: 40px 30px;
}
}
@media (max-width: 576px) {
.product-details-description-section .product-details-description-tab .review-form {
padding: 40px 25px;
}
}
.product-details-description-section .product-details-description-tab .review-form .number-of-review {
line-height: 1;
margin-bottom: 30px;
}
.product-details-description-section .product-details-description-tab .review-form .number-of-review h4 {
line-height: 1;
margin-bottom: 0;
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 24px;
font-weight: 500;
}
.product-details-description-section .product-details-description-tab .review-form .form-inner2 .review-rate-area {
margin-bottom: 15px;
}
.product-details-description-section .product-details-description-tab .review-form .form-inner2 .review-rate-area p {
margin-bottom: 5px;
color: var(--title-color);
}
.product-details-description-section .product-details-description-tab .review-form .form-inner2 .review-rate-area .rate {
float: left;
}
.product-details-description-section .product-details-description-tab .review-form .form-inner2 .review-rate-area .rate:not(:checked) > input {
position: absolute;
top: -9999px;
}
.product-details-description-section .product-details-description-tab .review-form .form-inner2 .review-rate-area .rate:not(:checked) > label {
float: right;
width: 1em;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
font-size: 16px;
line-height: 1;
color: #ccc;
padding-right: 8px;
display: inline-block;
margin-right: 8px;
}
.product-details-description-section .product-details-description-tab .review-form .form-inner2 .review-rate-area .rate:not(:checked) > label::before {
content: "\f586";
font-family: bootstrap-icons !important;
}
.product-details-description-section .product-details-description-tab .review-form .form-inner2 .review-rate-area .rate input:checked ~ label {
color: #DDA701;
}
.product-details-description-section .product-details-description-tab .review-form .form-inner2 .review-rate-area .rate:not(:checked) > label:hover,
.product-details-description-section .product-details-description-tab .review-form .form-inner2 .review-rate-area .rate:not(:checked) > label:hover ~ label {
color: #DDA701;
}
.product-details-description-section .product-details-description-tab .review-form .form-inner2 .review-rate-area input:checked + label:hover,
.product-details-description-section .product-details-description-tab .review-form .form-inner2 .review-rate-area input:checked + label:hover ~ label,
.product-details-description-section .product-details-description-tab .review-form .form-inner2 .review-rate-area input:checked ~ label:hover,
.product-details-description-section .product-details-description-tab .review-form .form-inner2 .review-rate-area input:checked ~ label:hover ~ label,
.product-details-description-section .product-details-description-tab .review-form .form-inner2 .review-rate-area label:hover ~ input:checked ~ label {
color: #DDA701;
} .cart-page .cart-widget-title {
margin-bottom: 35px;
}
@media (max-width: 991px) {
.cart-page .cart-widget-title {
margin-bottom: 25px;
}
}
.cart-page .cart-widget-title h4 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 30px;
font-weight: 500;
line-height: 1.4;
margin-bottom: 0;
}
.cart-page .cart-shopping-wrapper .cart-table {
width: 100%;
}
@media (max-width: 767px) {
.cart-page .cart-shopping-wrapper .cart-table {
margin-bottom: 30px;
}
}
.cart-page .cart-shopping-wrapper .cart-table thead tr {
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.cart-page .cart-shopping-wrapper .cart-table thead tr th {
color: var(--title-color);
font-family: var(--font-inter);
font-size: 18px;
font-weight: 600;
line-height: 1;
padding: 20px 15px;
}
@media (max-width: 767px) {
.cart-page .cart-shopping-wrapper .cart-table thead tr th {
display: none;
}
}
.cart-page .cart-shopping-wrapper .cart-table thead tr th:first-child {
padding-left: 0;
}
@media (max-width: 767px) {
.cart-page .cart-shopping-wrapper .cart-table tbody tr {
border-bottom: 1px solid var(--border-color);
}
}
.cart-page .cart-shopping-wrapper .cart-table tbody tr td {
padding: 30px 15px;
color: var(--title-color);
font-family: var(--font-inter);
font-size: 18px;
font-weight: 600;
line-height: 1;
}
.cart-page .cart-shopping-wrapper .cart-table tbody tr td span {
color: rgba(var(--title-color-opc), 0.7);
}
.cart-page .cart-shopping-wrapper .cart-table tbody tr td:first-child {
padding-left: 0;
}
@media (max-width: 767px) {
.cart-page .cart-shopping-wrapper .cart-table tbody tr td {
text-align: right;
}
}
.cart-page .cart-shopping-wrapper .cart-table tbody tr td .product-info-wrapper {
display: flex;
align-items: center;
gap: 20px;
}
@media (max-width: 767px) {
.cart-page .cart-shopping-wrapper .cart-table tbody tr td .product-info-wrapper {
align-items: flex-end;
flex-direction: column;
}
}
.cart-page .cart-shopping-wrapper .cart-table tbody tr td .product-info-wrapper .product-info-img img {
max-width: 120px;
}
.cart-page .cart-shopping-wrapper .cart-table tbody tr td .product-info-wrapper .product-info-content h6 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 18px;
font-weight: 500;
line-height: 1.4;
margin-bottom: 10px;
}
.cart-page .cart-shopping-wrapper .cart-table tbody tr td .product-info-wrapper .product-info-content p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 14px;
font-weight: 500;
line-height: 1;
margin-bottom: 35px;
}
.cart-page .cart-shopping-wrapper .cart-table tbody tr td .product-info-wrapper .product-info-content p span {
color: var(--title-color);
font-weight: 600;
}
.cart-page .cart-shopping-wrapper .cart-table tbody tr td .product-info-wrapper .product-info-content ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
gap: 20px;
}
@media (max-width: 767px) {
.cart-page .cart-shopping-wrapper .cart-table tbody tr td .product-info-wrapper .product-info-content ul {
justify-content: flex-end;
}
}
.cart-page .cart-shopping-wrapper .cart-table tbody tr td .product-info-wrapper .product-info-content ul li {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 14px;
font-weight: 400;
line-height: 1;
cursor: pointer;
position: relative;
transition: 0.5s;
}
.cart-page .cart-shopping-wrapper .cart-table tbody tr td .product-info-wrapper .product-info-content ul li:last-child::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -10px;
width: 1px;
height: 11px;
background-color: rgba(var(--title-color-opc), 0.2);
}
.cart-page .cart-shopping-wrapper .cart-table tbody tr td .product-info-wrapper .product-info-content ul li .quantity-area {
position: absolute;
top: -30px;
right: -60px;
opacity: 0;
transform: scaleY(0);
transform-origin: bottom;
}
@media (max-width: 991px) {
.cart-page .cart-shopping-wrapper .cart-table tbody tr td .product-info-wrapper .product-info-content ul li .quantity-area {
right: unset;
left: -60px;
}
}
.cart-page .cart-shopping-wrapper .cart-table tbody tr td .product-info-wrapper .product-info-content ul li .quantity-area .quantity {
display: flex;
gap: 5px;
}
.cart-page .cart-shopping-wrapper .cart-table tbody tr td .product-info-wrapper .product-info-content ul li .quantity-area .quantity a {
height: 24px;
width: 34px;
border-radius: 4px;
background: rgba(var(--primary-color-opc), 0.07);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: var(--title-color);
font-weight: 600;
cursor: pointer;
transition: 0.35s;
}
.cart-page .cart-shopping-wrapper .cart-table tbody tr td .product-info-wrapper .product-info-content ul li .quantity-area .quantity a i {
color: var(--title-color);
transition: 0.35s;
line-height: 1;
}
.cart-page .cart-shopping-wrapper .cart-table tbody tr td .product-info-wrapper .product-info-content ul li .quantity-area .quantity a:hover {
background: var(--primary-color);
color: var(--white-color);
}
.cart-page .cart-shopping-wrapper .cart-table tbody tr td .product-info-wrapper .product-info-content ul li .quantity-area .quantity a:hover i {
color: var(--white-color);
}
.cart-page .cart-shopping-wrapper .cart-table tbody tr td .product-info-wrapper .product-info-content ul li .quantity-area .quantity input {
height: 24px;
width: 34px;
border-radius: 4px;
border: 1px solid var(--primary-color);
background-color: var(--white-color);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: var(--title-color);
font-weight: 500;
text-align: center;
}
.cart-page .cart-shopping-wrapper .cart-table tbody tr td .product-info-wrapper .product-info-content ul li .quantity-area.active {
opacity: 1;
transform: scaleY(1);
animation: fade-down 0.3s linear;
}
.cart-page .cart-shopping-wrapper .cart-table tbody tr td .product-info-wrapper .product-info-content ul li:hover {
color: rgb(255, 72, 32);
}
.cart-page .cart-shopping-wrapper .cart-table tbody tr td .product-info-wrapper .product-info-content ul li:hover:last-child {
color: var(--primary-color);
}
@media (max-width: 767px) {
.cart-page .cart-shopping-wrapper .cart-table tbody tr td {
display: block;
width: 100%;
text-align: right;
position: relative;
padding: 15px;
}
.cart-page .cart-shopping-wrapper .cart-table tbody tr td::before {
content: attr(data-label);
position: absolute;
left: 15px;
color: var(--title-color);
font-family: var(--font-inter);
font-size: 18px;
font-weight: 600;
}
}
@media (max-width: 767px) and (max-width: 576px) {
.cart-page .cart-shopping-wrapper .cart-table tbody tr td::before {
font-size: 16px;
}
}
.cart-page .cart-shopping-wrapper .details-button {
position: relative;
display: inline-block;
vertical-align: top;
line-height: 1.4;
font-weight: 500;
text-decoration: none;
outline: none;
padding: 0 1.375em 0.0625em 0;
cursor: pointer;
background-color: transparent;
background-position: 100% 100%;
background-repeat: no-repeat;
background-size: var(--background-size, 100%) 0.0625em;
transition: background-size 0.2s linear var(--background-delay, 0.15s);
transform: translateZ(0);
border: none;
background-image: linear-gradient(0deg, var(--primary-color) 0%, var(--primary-color) 100%);
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 17px;
font-weight: 500;
white-space: nowrap;
}
.cart-page .cart-shopping-wrapper .details-button::after {
content: "\f123";
font-family: "bootstrap-icons";
display: block;
position: absolute;
right: 0;
left: initial;
top: 0;
opacity: 1;
transition: opacity 0.3s 0.15s;
color: var(--primary-color);
}
.cart-page .cart-shopping-wrapper .details-button svg {
position: absolute;
display: block;
line-height: 1.8125em;
width: 1.375em;
height: 1.8125em;
right: 0;
left: initial;
top: 50%;
margin: -0.92em 0 0;
fill: none;
stroke: var(--title-color);
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1px;
stroke-dasharray: 7.95 30;
stroke-dashoffset: var(--stroke-dashoffset, 46);
transition: stroke-dashoffset var(--stroke-duration, 0.15s) var(--stroke-easing, linear) var(--stroke-delay, 0s);
}
.cart-page .cart-shopping-wrapper .details-button:hover {
--background-size: 0%;
--stroke-dashoffset: 26;
--stroke-duration: .3s;
--stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
--stroke-delay: .195s;
color: var(--title-color);
}
.cart-page .cart-shopping-wrapper .details-button:hover::after {
opacity: 0;
transition-delay: 0s;
}
@media (min-width: 992px) {
.cart-page .cart-order-sum-area {
padding-left: 15px;
}
}
.cart-page .cart-order-sum-area .order-summary-wrap {
padding: 40px 30px;
border: 1px solid var(--border-color);
border-radius: 10px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.cart-page .cart-order-sum-area .order-summary-wrap {
padding: 40px 25px;
}
}
@media (max-width: 576px) {
.cart-page .cart-order-sum-area .order-summary-wrap {
padding: 30px 20px;
}
}
.cart-page .cart-order-sum-area .order-summary-wrap .order-summary-list {
padding: 0;
margin: 0;
list-style: none;
width: 100%;
}
.cart-page .cart-order-sum-area .order-summary-wrap .order-summary-list li {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 30px;
line-height: 1;
}
.cart-page .cart-order-sum-area .order-summary-wrap .order-summary-list li:first-child {
padding-bottom: 20px;
border-bottom: 1px solid var(--border-color);
}
.cart-page .cart-order-sum-area .order-summary-wrap .order-summary-list li span {
color: var(--title-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 600;
line-height: 1;
display: inline-block;
}
.cart-page .cart-order-sum-area .order-summary-wrap .order-summary-list li .order-info {
text-align: right;
}
.cart-page .cart-order-sum-area .order-summary-wrap .order-summary-list li .order-info p {
color: rgba(var(--title-color-opc), 0.6);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 500;
line-height: 1;
margin-bottom: 5px;
}
.cart-page .cart-order-sum-area .order-summary-wrap .order-summary-list li .order-info strong {
color: var(--title-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 500;
line-height: 1;
margin-bottom: 0;
}
.cart-page .cart-order-sum-area .order-summary-wrap .order-summary-list li .coupon-area {
width: 100%;
margin-bottom: 10px;
}
.cart-page .cart-order-sum-area .order-summary-wrap .order-summary-list li .coupon-area span {
margin-bottom: 15px;
}
.cart-page .cart-order-sum-area .order-summary-wrap .order-summary-list li .coupon-area .form-inner {
position: relative;
}
.cart-page .cart-order-sum-area .order-summary-wrap .order-summary-list li .coupon-area .form-inner input {
width: 100%;
height: 45px;
padding: 10px 100px 10px 20px;
border-radius: 5px;
}
.cart-page .cart-order-sum-area .order-summary-wrap .order-summary-list li .coupon-area .form-inner input::-moz-placeholder {
color: rgba(var(--title-color-opc), 0.5);
}
.cart-page .cart-order-sum-area .order-summary-wrap .order-summary-list li .coupon-area .form-inner input::placeholder {
color: rgba(var(--title-color-opc), 0.5);
}
.cart-page .cart-order-sum-area .order-summary-wrap .order-summary-list li .coupon-area .form-inner input:focus {
border-color: #eee;
}
.cart-page .cart-order-sum-area .order-summary-wrap .order-summary-list li .coupon-area .form-inner .apply-btn {
padding: 13px 23px;
border-radius: 0 5px 5px 0;
background-color: var(--primary-color);
border: 1px solid var(--primary-color);
color: var(--white-color);
font-family: var(--font-syne);
font-size: 17px;
font-weight: 500;
letter-spacing: 0.48px;
line-height: 1;
display: inline-flex;
align-items: center;
gap: 10px;
transition: 0.5s;
overflow: hidden;
z-index: 1;
white-space: nowrap;
position: absolute;
top: 0;
right: 0;
}
.cart-page .cart-order-sum-area .order-summary-wrap .order-summary-list li .coupon-area .form-inner .apply-btn::after {
position: absolute;
content: "";
display: block;
left: 15%;
right: -20%;
top: -4%;
height: 150%;
width: 150%;
bottom: 0;
border-radius: 2px;
background-color: var(--white-color);
transform: skewX(45deg) scale(0, 1);
z-index: -1;
transition: all 0.5s ease-out 0s;
}
.cart-page .cart-order-sum-area .order-summary-wrap .order-summary-list li .coupon-area .form-inner .apply-btn:hover {
color: var(--title-color);
}
.cart-page .cart-order-sum-area .order-summary-wrap .order-summary-list li .coupon-area .form-inner .apply-btn:hover::after {
transform: skewX(45deg) scale(1, 1);
}
.cart-page .cart-order-sum-area .order-summary-wrap .order-summary-list li:last-child {
margin-bottom: 40px;
}
.cart-page .cart-order-sum-area .order-summary-wrap .order-summary-list li:last-child span {
font-size: 16px;
font-weight: 600;
}
.cart-page .cart-order-sum-area .order-summary-wrap > .primary-btn2 {
width: 100%;
display: flex;
justify-content: center;
padding: 18px 25px;
} .checkout-page .checkout-form-wrapper .checkout-form-title {
margin-bottom: 30px;
}
.checkout-page .checkout-form-wrapper .checkout-form-title h4 {
margin-bottom: 0;
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 30px;
font-weight: 500;
}
@media (max-width: 767px) {
.checkout-page .checkout-form-wrapper .checkout-form-title h4 {
font-size: 26px;
}
}
.checkout-page .checkout-form-wrapper .checkout-form {
border-radius: 10px;
border: 1px solid var(--border-color);
padding: 45px 35px 50px;
}
@media (max-width: 767px) {
.checkout-page .checkout-form-wrapper .checkout-form {
padding: 45px 20px 50px;
}
}
.checkout-page .cart-menu {
min-height: 10rem;
z-index: 99;
transform-origin: top;
}
.checkout-page .cart-body ul {
padding: 0;
list-style: none;
margin-bottom: 50px;
}
.checkout-page .cart-body ul .single-item {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 25px;
}
.checkout-page .cart-body ul .single-item:last-child {
margin-bottom: 0;
}
.checkout-page .cart-body ul .single-item .item-area {
display: flex;
align-items: center;
gap: 20px;
position: relative;
width: 100%;
}
.checkout-page .cart-body ul .single-item .item-area .close-btn {
background: transparent;
transition: 0.35s;
width: 25px;
height: 25px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 72, 32, 0.14);
}
.checkout-page .cart-body ul .single-item .item-area .close-btn i {
color: rgb(255, 72, 32);
line-height: 1;
font-size: 20px;
transition: 0.35s;
}
.checkout-page .cart-body ul .single-item .item-area .close-btn:hover {
background-color: #FF4820;
}
.checkout-page .cart-body ul .single-item .item-area .close-btn:hover i {
color: var(--white-color);
}
.checkout-page .cart-body ul .single-item .item-area .main-item {
display: flex;
gap: 15px;
width: 100%;
}
@media (max-width: 767px) {
.checkout-page .cart-body ul .single-item .item-area .main-item {
gap: 12px;
}
}
.checkout-page .cart-body ul .single-item .item-area .main-item .item-img {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.checkout-page .cart-body ul .single-item .item-area .main-item .item-img img {
height: 70px;
max-width: 90px;
min-width: 90px;
}
@media (max-width: 767px) {
.checkout-page .cart-body ul .single-item .item-area .main-item .item-img img {
-o-object-fit: cover;
object-fit: cover;
}
}
.checkout-page .cart-body ul .single-item .item-area .main-item .content-and-quantity {
width: 100%;
}
.checkout-page .cart-body ul .single-item .item-area .main-item .content {
line-height: 1;
margin-bottom: 10px;
}
.checkout-page .cart-body ul .single-item .item-area .main-item .content span {
font-family: var(--font-inter);
font-weight: 600;
font-size: 14px;
color: var(--paragraph-color);
display: inline-block;
}
.checkout-page .cart-body ul .single-item .item-area .main-item .content h6 {
margin-bottom: 0;
line-height: 1;
}
.checkout-page .cart-body ul .single-item .item-area .main-item .content h6 a {
font-family: var(--font-inter);
font-weight: 600;
font-size: 16px;
line-height: 1.5;
color: var(--title-color);
transition: 0.5s;
}
@media (max-width: 767px) {
.checkout-page .cart-body ul .single-item .item-area .main-item .content h6 a {
font-size: 14px;
}
}
.checkout-page .cart-body ul .single-item .item-area .main-item .content h6 a:hover {
color: var(--primary-color);
}
.checkout-page .cart-body ul .single-item .quantity-area .quantity {
display: flex;
gap: 5px;
}
.checkout-page .cart-body ul .single-item .quantity-area .quantity a {
height: 24px;
width: 34px;
border-radius: 4px;
background: rgba(var(--primary-color-opc), 0.07);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: var(--title-color);
font-weight: 600;
cursor: pointer;
transition: 0.35s;
}
.checkout-page .cart-body ul .single-item .quantity-area .quantity a i {
color: var(--title-color);
transition: 0.35s;
}
.checkout-page .cart-body ul .single-item .quantity-area .quantity a:hover {
background: var(--primary-color);
color: var(--white-color);
}
.checkout-page .cart-body ul .single-item .quantity-area .quantity a:hover i {
color: var(--white-color);
}
.checkout-page .cart-body ul .single-item .quantity-area .quantity input {
height: 24px;
width: 34px;
border-radius: 4px;
border: 1px solid var(--border-color);
background-color: var(--white-color);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-inter);
font-size: 14px;
color: var(--title-color);
font-weight: 600;
text-align: center;
}
.checkout-page .cart-footer {
justify-content: flex-start;
padding: 0;
border-top: 1px solid var(--border-color);
}
.checkout-page .cart-footer .pricing-area {
width: 100%;
}
.checkout-page .cart-footer .pricing-area ul {
margin: 0;
list-style: none;
border-bottom: 1px solid var(--border-color);
width: 100%;
padding: 10px 0px 10px;
}
.checkout-page .cart-footer .pricing-area ul:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 30px;
}
.checkout-page .cart-footer .pricing-area ul li {
font-family: var(--font-inter);
font-weight: 600;
font-size: 16px;
color: var(--title-color);
display: flex;
justify-content: space-between;
width: 100%;
}
.checkout-page .cart-footer .pricing-area ul.total li {
font-size: 18px;
font-weight: 700;
}
.checkout-page .cart-footer .primary-btn2 {
width: 100%;
justify-content: center;
}
.checkout-page .choose-payment-method {
margin-bottom: 40px;
line-height: 1;
}
.checkout-page .choose-payment-method h6 {
margin-bottom: 10px;
color: var(--title-color);
font-family: var(--font-inter);
font-size: 17px;
font-weight: 600;
}
.checkout-page .choose-payment-method .payment-option {
line-height: 1;
}
.checkout-page .choose-payment-method .payment-option ul {
padding: 0;
list-style: none;
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 30px;
}
.checkout-page .choose-payment-method .payment-option ul li {
width: 110px;
height: 68px;
background-color: var(--white-color);
border: 1px solid var(--border-color);
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
cursor: pointer;
}
.checkout-page .choose-payment-method .payment-option ul li .checked {
position: absolute;
top: 0;
left: 0;
width: 32px;
height: 32px;
background: #D2E7EF;
-webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
clip-path: polygon(0 0, 0% 100%, 100% 0);
border-top-left-radius: 5px;
}
.checkout-page .choose-payment-method .payment-option ul li .checked i {
opacity: 0;
color: var(--white-color);
margin-left: 2px;
}
.checkout-page .choose-payment-method .payment-option ul li.active .checked {
background: var(--primary-color);
}
.checkout-page .choose-payment-method .payment-option ul li.active .checked i {
opacity: 1;
} .brand-page .logo-wrap {
border: 0.5px solid rgba(var(--primary-color-opc), 0.1);
}
.brand-page .logo-wrap .single-logo {
padding: 35px 10px;
border: 0.5px solid rgba(var(--primary-color-opc), 0.1);
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 992px) and (max-width: 1199px) {
.brand-page .logo-wrap .single-logo {
padding: 25px 10px;
}
}
@media (max-width: 767px) {
.brand-page .logo-wrap .single-logo {
padding: 20px 10px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.brand-page .logo-wrap .single-logo img {
width: 95px;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.brand-page .logo-wrap .single-logo img {
width: 85px;
}
}
@media (max-width: 576px) {
.brand-page .logo-wrap .single-logo img {
width: 95px;
}
} @media (max-width: 767px) {
.project-details-page .project-details-thumb img {
min-height: 300px;
-o-object-fit: cover;
object-fit: cover;
}
}
.project-details-page .project-details-sidebar {
position: sticky;
top: 110px;
}
.project-details-page .project-details-sidebar .project-info-wrap {
border: 1px solid rgba(var(--primary-color-opc), 0.1);
background: #FAF9F9;
padding: 35px 30px;
}
@media (max-width: 1399px) {
.project-details-page .project-details-sidebar .project-info-wrap {
padding: 35px 25px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.project-details-page .project-details-sidebar .project-info-wrap {
padding: 30px 20px;
}
}
.project-details-page .project-details-sidebar .project-info-wrap .project-info {
margin: 0;
padding: 0;
list-style: none;
}
.project-details-page .project-details-sidebar .project-info-wrap .project-info li {
display: flex;
align-items: center;
gap: 20px;
border-bottom: 1px solid rgba(var(--primary-color-opc), 0.1);
padding-bottom: 25px;
margin-bottom: 30px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.project-details-page .project-details-sidebar .project-info-wrap .project-info li {
padding-bottom: 20px;
margin-bottom: 25px;
}
}
.project-details-page .project-details-sidebar .project-info-wrap .project-info li:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
.project-details-page .project-details-sidebar .project-info-wrap .project-info li .icon svg {
fill: rgba(var(--title-color-opc), 0.3);
}
.project-details-page .project-details-sidebar .project-info-wrap .project-info li .content {
line-height: 1;
}
.project-details-page .project-details-sidebar .project-info-wrap .project-info li .content span {
color: rgba(var(--title-color-opc), 0.5);
font-family: var(--font-inter);
font-size: 15px;
font-weight: 400;
line-height: 1;
display: inline-block;
margin-bottom: 10px;
}
.project-details-page .project-details-sidebar .project-info-wrap .project-info li .content h5 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 20px;
font-weight: 400;
line-height: 1.2;
margin-bottom: 0;
}
@media (max-width: 1199px) {
.project-details-page .project-details-sidebar .project-info-wrap .project-info li .content h5 {
font-size: 18px;
}
}
.project-details-page .project-details-sidebar .sidebar-banner {
position: relative;
}
@media (min-width: 992px) and (max-width: 1199px) {
.project-details-page .project-details-sidebar .sidebar-banner img {
min-height: 420px;
-o-object-fit: cover;
object-fit: cover;
}
}
.project-details-page .project-details-sidebar .sidebar-banner .banner-content-wrap {
background: linear-gradient(189.54deg, rgba(0, 0, 0, 0.1) 6.82%, rgba(0, 0, 0, 0.9) 78.76%, rgba(0, 0, 0, 0.9) 91.39%);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: end;
padding: 35px;
}
@media (max-width: 1399px) {
.project-details-page .project-details-sidebar .sidebar-banner .banner-content-wrap {
padding: 35px 25px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.project-details-page .project-details-sidebar .sidebar-banner .banner-content-wrap {
padding: 35px 20px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.project-details-page .project-details-sidebar .sidebar-banner .banner-content-wrap {
padding: 50px 40px;
}
}
.project-details-page .project-details-sidebar .sidebar-banner .banner-content-wrap h2 {
color: var(--white-color);
font-family: var(--font-kanit);
font-size: 42px;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.01em;
max-width: 280px;
width: 100%;
margin-bottom: 25px;
}
@media (max-width: 1199px) {
.project-details-page .project-details-sidebar .sidebar-banner .banner-content-wrap h2 {
font-size: 35px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.project-details-page .project-details-sidebar .sidebar-banner .banner-content-wrap h2 {
font-size: 50px;
max-width: 400px;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.project-details-page .project-details-sidebar .sidebar-banner .banner-content-wrap h2 {
font-size: 45px;
max-width: 400px;
}
}
.project-details-page .project-details-sidebar .sidebar-banner .banner-content-wrap h2 span {
color: var(--primary-color2);
font-weight: 500;
}
.project-details-page .project-details-sidebar .sidebar-banner .banner-content-wrap .primary-btn2 {
padding: 17px 27px;
}
.project-details-page .project-details-sidebar .sidebar-banner .banner-content-wrap .primary-btn2 span {
font-size: 16px;
}
@media (max-width: 576px) {
.project-details-page .project-details-sidebar .sidebar-banner .banner-content-wrap .primary-btn2 {
font-size: 17px;
padding: 15px 28px;
}
}
.project-details-page .details-navigation {
padding: 35px 0;
border-top: 1px solid rgba(var(--primary-color-opc), 0.1);
border-bottom: 1px solid rgba(var(--primary-color-opc), 0.1);
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
flex-wrap: wrap;
}
@media (max-width: 991px) {
.project-details-page .details-navigation {
gap: 40px;
}
}
.project-details-page .details-navigation .single-navigation {
display: flex;
align-items: center;
gap: 50px;
}
@media (max-width: 576px) {
.project-details-page .details-navigation .single-navigation {
gap: 35px;
}
}
.project-details-page .details-navigation .single-navigation .nav-btn {
color: var(--primary-color2);
font-family: var(--font-kanit);
font-size: 15px;
font-weight: 400;
line-height: 1;
text-decoration: underline;
display: flex;
align-items: center;
gap: 5px;
white-space: nowrap;
transition: 0.5s;
}
.project-details-page .details-navigation .single-navigation .nav-btn svg {
fill: var(--primary-color2);
transition: 0.5s;
}
.project-details-page .details-navigation .single-navigation .nav-btn:hover {
color: var(--primary-color);
}
.project-details-page .details-navigation .single-navigation .nav-btn:hover svg {
transform: rotate(-30deg);
fill: var(--primary-color);
}
.project-details-page .details-navigation .single-navigation .content h6 {
margin-bottom: 0;
position: relative;
max-width: 290px;
width: 100%;
}
.project-details-page .details-navigation .single-navigation .content h6 a {
color: var(--paragraph-color);
font-family: var(--font-kanit);
font-size: 16px;
font-weight: 400;
line-height: 24px;
transition: 0.5s;
}
@media (max-width: 576px) {
.project-details-page .details-navigation .single-navigation .content h6 a {
font-size: 15px;
}
}
.project-details-page .details-navigation .single-navigation .content h6 a:hover {
color: var(--title-color);
}
.project-details-page .details-navigation .single-navigation .content h6::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -25px;
background: linear-gradient(88.68deg, rgba(255, 139, 74, 0.2) 1.26%, rgba(255, 139, 74, 0.133683) 17.47%, rgba(255, 139, 74, 0.0724742) 34.48%, rgba(255, 139, 74, 0.03) 55.7%);
width: 44px;
height: 84px;
border-radius: 10px 0 0 10px;
}
@media (max-width: 991px) {
.project-details-page .details-navigation .single-navigation .content h6::before {
height: 74px;
width: 35px;
left: -20px;
}
}
.project-details-page .details-navigation .single-navigation.two .nav-btn:hover svg {
transform: rotate(30deg);
}
.project-details-page .details-navigation .single-navigation.two .content h6 {
text-align: end;
}
.project-details-page .details-navigation .single-navigation.two .content h6::before {
left: unset;
right: -25px;
background: linear-gradient(-88.68deg, rgba(255, 139, 74, 0.2) 1.26%, rgba(255, 139, 74, 0.133683) 17.47%, rgba(255, 139, 74, 0.0724742) 34.48%, rgba(255, 139, 74, 0.03) 55.7%);
border-radius: 0 10px 10px 0;
}
@media (max-width: 991px) {
.project-details-page .details-navigation .single-navigation.two .content h6::before {
right: -20px;
}
} @media (max-width: 767px) {
.service-details-page .service-details-thumb img {
min-height: 300px;
-o-object-fit: cover;
object-fit: cover;
}
}
@media (max-width: 576px) {
.service-details-page .service-details-thumb img {
-o-object-position: 70%;
object-position: 70%;
}
}
.service-details-page .title-area {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
flex-wrap: wrap;
}
.service-details-page .title-area h2 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 60px;
font-weight: 500;
line-height: 1;
margin-bottom: 0;
}
@media (max-width: 1399px) {
.service-details-page .title-area h2 {
font-size: 55px;
}
}
@media (max-width: 1199px) {
.service-details-page .title-area h2 {
font-size: 50px;
}
}
@media (max-width: 576px) {
.service-details-page .title-area h2 {
font-size: 45px;
}
}
.service-details-page .title-area h2 span {
color: rgba(var(--title-color-opc), 0.5);
display: block;
font-size: 55px;
font-weight: 400;
padding-left: 50px;
}
@media (max-width: 1399px) {
.service-details-page .title-area h2 span {
font-size: 50px;
}
}
@media (max-width: 1199px) {
.service-details-page .title-area h2 span {
font-size: 45px;
padding-left: 40px;
}
}
@media (max-width: 576px) {
.service-details-page .title-area h2 span {
font-size: 40px;
}
}
.service-details-page .title-area .tag-list {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
.service-details-page .title-area .tag-list li {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 12px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.07em;
padding: 7px 13px;
border: 1px solid rgba(var(--primary-color-opc), 0.1);
border-radius: 50px;
}
.service-details-page .details-content-wrapper p {
font-size: 16px;
}
.service-details-page .service-details-faq-area {
padding-left: 40px;
position: sticky;
top: 120px;
}
@media (max-width: 1399px) {
.service-details-page .service-details-faq-area {
padding-left: 30px;
}
}
@media (max-width: 1199px) {
.service-details-page .service-details-faq-area {
padding-left: 10px;
}
}
@media (max-width: 991px) {
.service-details-page .service-details-faq-area {
padding-left: 0;
}
} .property-details-page .property-details-img-grp img {
min-height: 230px;
-o-object-fit: cover;
object-fit: cover;
height: 100%;
}
@media (max-width: 991px) {
.property-details-page .property-details-img-grp img {
max-height: 490px;
width: 100%;
}
}
@media (max-width: 576px) {
.property-details-page .property-details-img-grp img {
min-height: 220px;
}
}
.property-details-page .property-details-img-grp .video-and-img-area .video-area {
position: sticky;
top: 110px;
}
.property-details-page .property-details-img-grp .video-and-img-area .video-area::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(var(--primary-color-opc), 0.3);
border-radius: 0 0 50px 50px;
}
.property-details-page .property-details-img-grp .video-and-img-area .video-area img {
border-radius: 0 0 50px 50px;
}
@media (max-width: 576px) {
.property-details-page .property-details-img-grp .video-and-img-area .video-area img {
border-radius: 0 0 35px 35px;
}
}
.property-details-page .property-details-img-grp .video-and-img-area .video-area .play-btn {
cursor: pointer;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.property-details-page .property-details-img-grp .video-and-img-area .video-area .play-btn .icon {
position: relative;
}
.property-details-page .property-details-img-grp .video-and-img-area .video-area .play-btn .icon .video-circle {
stroke: var(--white-color);
fill: none;
transition: 0.5s;
}
.property-details-page .property-details-img-grp .video-and-img-area .video-area .play-btn .icon .video-circle .top-half {
stroke-dasharray: 430;
stroke-dashoffset: 320;
transition: stroke-dashoffset 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.property-details-page .property-details-img-grp .video-and-img-area .video-area .play-btn .icon .play-icon {
fill: var(--white-color);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-left: 2px;
}
@media (max-width: 576px) {
.property-details-page .property-details-img-grp .video-and-img-area .video-area .play-btn .icon .play-icon {
width: 20px;
}
}
.property-details-page .property-details-img-grp .video-and-img-area .video-area .play-btn:hover .icon .video-circle .top-half {
stroke-dashoffset: 0;
}
.property-details-page .property-details-img-grp .video-and-img-area .video-bottom-img img {
border-radius: 50px 50px 0 0;
}
@media (max-width: 576px) {
.property-details-page .property-details-img-grp .video-and-img-area .video-bottom-img img {
border-radius: 35px 35px 0 0;
}
}
.property-details-page .property-details-content-wrap h2 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 35px;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.03em;
margin-bottom: 30px;
}
@media (max-width: 1199px) {
.property-details-page .property-details-content-wrap h2 {
font-size: 33px;
}
}
@media (max-width: 767px) {
.property-details-page .property-details-content-wrap h2 {
font-size: 30px;
margin-bottom: 25px;
}
}
@media (max-width: 576px) {
.property-details-page .property-details-content-wrap h2 {
font-size: 27px;
}
}
.property-details-page .property-details-content-wrap .title-and-pricing-area {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-bottom: 50px;
border-bottom: 1px solid rgba(var(--primary-color-opc), 0.08);
}
@media (max-width: 991px) {
.property-details-page .property-details-content-wrap .title-and-pricing-area {
padding-bottom: 40px;
}
}
@media (max-width: 767px) {
.property-details-page .property-details-content-wrap .title-and-pricing-area {
padding-bottom: 30px;
}
}
@media (max-width: 576px) {
.property-details-page .property-details-content-wrap .title-and-pricing-area {
flex-wrap: wrap;
gap: 25px;
padding-bottom: 25px;
}
}
.property-details-page .property-details-content-wrap .title-and-pricing-area .title-area > span {
color: var(--primary-color2);
font-family: var(--font-kanit);
font-size: 12px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 4px 19px;
background-color: rgba(var(--primary-color2-opc), 0.1);
border: 1px solid rgba(var(--primary-color-opc), 0.1);
display: inline-block;
margin-bottom: 8px;
}
@media (max-width: 1199px) {
.property-details-page .property-details-content-wrap .title-and-pricing-area .title-area h2 {
margin-bottom: 25px;
}
}
@media (max-width: 767px) {
.property-details-page .property-details-content-wrap .title-and-pricing-area .title-area h2 {
margin-bottom: 20px;
}
}
@media (max-width: 576px) {
.property-details-page .property-details-content-wrap .title-and-pricing-area .title-area h2 {
margin-bottom: 15px;
}
}
.property-details-page .property-details-content-wrap .title-and-pricing-area .address-area {
display: flex;
align-items: center;
gap: 12px;
}
.property-details-page .property-details-content-wrap .title-and-pricing-area .address-area .icon svg {
fill: none;
stroke: var(--title-color);
}
.property-details-page .property-details-content-wrap .title-and-pricing-area .address-area .content span {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 12px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.05em;
display: block;
margin-bottom: 5px;
}
.property-details-page .property-details-content-wrap .title-and-pricing-area .address-area .content a {
color: var(--paragraph-color);
font-family: var(--font-kanit);
font-size: 17px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.04em;
transition: 0.5s;
}
.property-details-page .property-details-content-wrap .title-and-pricing-area .address-area .content a:hover {
color: var(--primary-color2);
}
.property-details-page .property-details-content-wrap .title-and-pricing-area .price h4 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 25px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.03em;
margin-bottom: 0;
}
@media (max-width: 576px) {
.property-details-page .property-details-content-wrap .title-and-pricing-area .price h4 {
font-size: 22px;
}
}
.property-details-page .property-details-content-wrap .property-details-table {
box-shadow: 0 0 0 0.5px rgba(var(--primary-color-opc), 0.08);
}
.property-details-page .property-details-content-wrap .property-details-table .single-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
padding: 28px 30px;
box-shadow: 0 0 0 0.5px rgba(var(--primary-color-opc), 0.08);
min-height: 82px;
}
@media (max-width: 1399px) {
.property-details-page .property-details-content-wrap .property-details-table .single-item {
padding: 28px 25px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.property-details-page .property-details-content-wrap .property-details-table .single-item {
padding: 22px 15px;
}
}
@media (max-width: 991px) {
.property-details-page .property-details-content-wrap .property-details-table .single-item {
padding: 20px 20px;
}
}
@media (max-width: 576px) {
.property-details-page .property-details-content-wrap .property-details-table .single-item {
padding: 20px 15px;
}
}
.property-details-page .property-details-content-wrap .property-details-table .single-item .title {
display: flex;
align-items: center;
gap: 8px;
max-width: 150px;
width: 100%;
}
@media (min-width: 992px) and (max-width: 1199px) {
.property-details-page .property-details-content-wrap .property-details-table .single-item .title {
max-width: 125px;
min-width: 125px;
gap: 5px;
}
}
@media (max-width: 576px) {
.property-details-page .property-details-content-wrap .property-details-table .single-item .title {
max-width: 135px;
min-width: 135px;
gap: 5px;
}
}
.property-details-page .property-details-content-wrap .property-details-table .single-item .title svg {
fill: var(--title-color);
min-width: 22px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.property-details-page .property-details-content-wrap .property-details-table .single-item .title svg {
min-width: 18px;
}
}
@media (max-width: 576px) {
.property-details-page .property-details-content-wrap .property-details-table .single-item .title svg {
min-width: 18px;
}
}
.property-details-page .property-details-content-wrap .property-details-table .single-item .title h6 {
color: var(--title-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 500;
line-height: 1.5;
margin-bottom: 0;
}
@media (min-width: 1200px) and (max-width: 1399px) {
.property-details-page .property-details-content-wrap .property-details-table .single-item .title h6 {
font-size: 14px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.property-details-page .property-details-content-wrap .property-details-table .single-item .title h6 {
font-size: 13px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.property-details-page .property-details-content-wrap .property-details-table .single-item .title h6 {
font-size: 14px;
}
}
@media (max-width: 576px) {
.property-details-page .property-details-content-wrap .property-details-table .single-item .title h6 {
font-size: 14px;
}
}
.property-details-page .property-details-content-wrap .property-details-table .single-item svg {
fill: rgba(var(--primary-color2-opc), 0.2);
min-width: 43px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.property-details-page .property-details-content-wrap .property-details-table .single-item svg {
min-width: 40px;
}
}
@media (max-width: 576px) {
.property-details-page .property-details-content-wrap .property-details-table .single-item svg {
min-width: 40px;
}
}
.property-details-page .property-details-content-wrap .property-details-table .single-item span {
color: var(--title-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 500;
line-height: 1;
text-align: end;
max-width: 105px;
width: 100%;
}
@media (min-width: 1200px) and (max-width: 1399px) {
.property-details-page .property-details-content-wrap .property-details-table .single-item span {
font-size: 14px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.property-details-page .property-details-content-wrap .property-details-table .single-item span {
font-size: 13px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.property-details-page .property-details-content-wrap .property-details-table .single-item span {
font-size: 14px;
}
}
@media (max-width: 576px) {
.property-details-page .property-details-content-wrap .property-details-table .single-item span {
font-size: 14px;
}
}
.property-details-page .property-details-content-wrap .description-area p {
color: var(--paragraph-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
line-height: 1.8;
margin-bottom: 30px;
}
.property-details-page .property-details-content-wrap .description-area p:last-child {
margin-bottom: 0;
}
@media (max-width: 576px) {
.property-details-page .property-details-content-wrap .description-area p {
font-size: 15px;
margin-bottom: 20px;
}
}
.property-details-page .property-details-content-wrap .nav-and-tab-area .nav-tabs {
border-bottom: 1px solid rgba(var(--primary-color-opc), 0.1);
gap: 65px;
margin-bottom: 35px;
}
@media (max-width: 991px) {
.property-details-page .property-details-content-wrap .nav-and-tab-area .nav-tabs {
gap: 50px;
}
}
@media (max-width: 767px) {
.property-details-page .property-details-content-wrap .nav-and-tab-area .nav-tabs {
gap: 30px;
}
}
@media (max-width: 576px) {
.property-details-page .property-details-content-wrap .nav-and-tab-area .nav-tabs {
margin-bottom: 30px;
}
}
.property-details-page .property-details-content-wrap .nav-and-tab-area .nav-tabs .nav-link {
color: var(--title-color);
font-family: var(--font-inter);
font-size: 16px;
font-weight: 400;
letter-spacing: 0.36px;
text-transform: capitalize;
display: flex;
align-items: center;
gap: 10px;
border: none;
padding: 0;
padding-bottom: 15px;
background: linear-gradient(to bottom, rgba(var(--primary-color2-opc), 1) 0%, rgba(var(--primary-color2-opc), 1) 98%);
background-size: 0px 1px;
background-repeat: no-repeat;
background-position: right 100%;
transition: background-size 0.75s;
}
.property-details-page .property-details-content-wrap .nav-and-tab-area .nav-tabs .nav-link svg {
fill: var(--title-color);
}
.property-details-page .property-details-content-wrap .nav-and-tab-area .nav-tabs .nav-link.active {
color: var(--primary-color2);
background-size: 100% 1px;
background-position: 0% 100%;
}
.property-details-page .property-details-content-wrap .nav-and-tab-area .nav-tabs .nav-link.active svg {
fill: var(--primary-color2);
}
.property-details-page .property-details-content-wrap .nav-and-tab-area .tab-content .video-area {
position: sticky;
top: 110px;
}
.property-details-page .property-details-content-wrap .nav-and-tab-area .tab-content .video-area::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(var(--primary-color-opc), 0.3);
}
.property-details-page .property-details-content-wrap .nav-and-tab-area .tab-content .video-area .play-btn {
cursor: pointer;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.property-details-page .property-details-content-wrap .nav-and-tab-area .tab-content .video-area .play-btn .icon {
position: relative;
}
.property-details-page .property-details-content-wrap .nav-and-tab-area .tab-content .video-area .play-btn .icon .video-circle {
stroke: var(--white-color);
fill: none;
transition: 0.5s;
}
.property-details-page .property-details-content-wrap .nav-and-tab-area .tab-content .video-area .play-btn .icon .video-circle .top-half {
stroke-dasharray: 430;
stroke-dashoffset: 320;
transition: stroke-dashoffset 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
.property-details-page .property-details-content-wrap .nav-and-tab-area .tab-content .video-area .play-btn .icon .play-icon {
fill: var(--white-color);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-left: 2px;
}
@media (max-width: 576px) {
.property-details-page .property-details-content-wrap .nav-and-tab-area .tab-content .video-area .play-btn .icon .play-icon {
width: 20px;
}
}
.property-details-page .property-details-content-wrap .nav-and-tab-area .tab-content .video-area .play-btn:hover .icon .video-circle .top-half {
stroke-dashoffset: 0;
}
@media (max-width: 576px) {
.property-details-page .property-details-content-wrap .nav-and-tab-area .tab-content img {
min-height: 250px;
-o-object-fit: cover;
object-fit: cover;
}
}
.property-details-page .property-details-content-wrap .attachment-area .attachment-list {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
gap: 60px;
}
@media (max-width: 1199px) {
.property-details-page .property-details-content-wrap .attachment-area .attachment-list {
gap: 50px;
}
}
@media (max-width: 767px) {
.property-details-page .property-details-content-wrap .attachment-area .attachment-list {
gap: 30px;
}
}
@media (max-width: 576px) {
.property-details-page .property-details-content-wrap .attachment-area .attachment-list {
flex-wrap: wrap;
gap: 20px;
}
}
.property-details-page .property-details-content-wrap .attachment-area .attachment-list .single-attachment {
padding: 22px 30px;
max-width: 312px;
width: 100%;
border: 1px solid rgba(var(--primary-color-opc), 0.1);
}
@media (max-width: 1199px) {
.property-details-page .property-details-content-wrap .attachment-area .attachment-list .single-attachment {
padding: 18px 25px;
}
}
@media (max-width: 767px) {
.property-details-page .property-details-content-wrap .attachment-area .attachment-list .single-attachment {
padding: 18px 20px;
}
}
.property-details-page .property-details-content-wrap .attachment-area .attachment-list .single-attachment a {
display: inline-flex;
align-items: center;
gap: 15px;
}
.property-details-page .property-details-content-wrap .attachment-area .attachment-list .single-attachment a .content h6 {
color: var(--title-color);
font-family: var(--font-inter);
font-size: 20px;
font-weight: 500;
line-height: 1;
margin-bottom: 0;
}
@media (max-width: 767px) {
.property-details-page .property-details-content-wrap .attachment-area .attachment-list .single-attachment a .content h6 {
font-size: 18px;
}
}
.property-details-page .property-details-content-wrap .attachment-area .attachment-list .single-attachment a .content h6 span {
color: rgba(var(--title-color-opc), 0.5);
font-family: var(--font-inter);
font-size: 15px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.03em;
display: block;
margin-top: 5px;
}
.property-details-page .property-details-content-wrap .attachment-area .attachment-list .single-attachment a .content span {
color: rgba(var(--title-color-opc), 0.5);
font-family: var(--font-inter);
font-size: 15px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.03em;
}
.property-details-page .property-details-sidebar .profile-area {
padding: 30px;
border: 1px solid rgba(var(--primary-color-opc), 0.1);
background-color: #FEFAF7;
border-radius: 20px;
}
@media (max-width: 1199px) {
.property-details-page .property-details-sidebar .profile-area {
padding: 30px 20px;
}
}
.property-details-page .property-details-sidebar .profile-area .profile-img {
width: 130px;
height: 130px;
border-radius: 50%;
margin: 0 auto;
}
.property-details-page .property-details-sidebar .profile-area .profile-img img {
width: 130px;
height: 130px;
border-radius: 50%;
}
.property-details-page .property-details-sidebar .profile-area .name-and-designation {
padding-top: 25px;
margin-bottom: 30px;
text-align: center;
}
.property-details-page .property-details-sidebar .profile-area .name-and-designation h4 {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 28px;
font-weight: 400;
line-height: 1.3;
letter-spacing: 0.03em;
margin-bottom: 8px;
}
@media (min-width: 992px) and (max-width: 1199px) {
.property-details-page .property-details-sidebar .profile-area .name-and-designation h4 {
font-size: 25px;
}
}
@media (max-width: 576px) {
.property-details-page .property-details-sidebar .profile-area .name-and-designation h4 {
font-size: 25px;
}
}
.property-details-page .property-details-sidebar .profile-area .name-and-designation span {
color: rgba(var(--title-color-opc), 0.5);
font-family: var(--font-inter);
font-size: 15px;
font-weight: 400;
line-height: 1.3;
}
.property-details-page .property-details-sidebar .profile-area .contact-area {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 30px;
}
.property-details-page .property-details-sidebar .profile-area .contact-area .icon svg {
fill: var(--title-color);
}
.property-details-page .property-details-sidebar .profile-area .contact-area .content span {
color: var(--title-color);
font-family: var(--font-kanit);
font-size: 12px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 5px;
display: block;
}
.property-details-page .property-details-sidebar .profile-area .contact-area .content a {
color: var(--paragraph-color);
font-family: var(--font-kanit);
font-size: 17px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.04em;
transition: 0.5s;
}
.property-details-page .property-details-sidebar .profile-area .contact-area .content a:hover {
color: var(--primary-color2);
}
.property-details-page .property-details-sidebar .profile-area .primary-btn2 {
display: flex;
justify-content: center;
background-color: rgba(var(--primary-color2-opc), 0.15);
border-radius: 15px;
padding: 22px 33px;
}
@media (max-width: 576px) {
.property-details-page .property-details-sidebar .profile-area .primary-btn2 {
border-radius: 10px;
}
}
.property-details-page .property-details-sidebar .profile-area .primary-btn2 span {
background-image: linear-gradient(0deg, var(--title-color) 0%, var(--title-color) 100%);
color: var(--title-color);
}
.property-details-page .property-details-sidebar .profile-area .primary-btn2 span::after {
color: var(--title-color);
}
.property-details-page .property-details-sidebar .profile-area .primary-btn2 span svg {
fill: none;
stroke: var(--title-color);
}
.property-details-page .property-details-sidebar .sidebar-contact-form {
padding: 45px 30px;
border: 1px solid rgba(var(--primary-color-opc), 0.05);
background-color: #FAF8FB;
border-radius: 20px;
}
@media (min-width: 1200px) and (max-width: 1399px) {
.property-details-page .property-details-sidebar .sidebar-contact-form {
padding: 40px 25px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.property-details-page .property-details-sidebar .sidebar-contact-form {
padding: 40px 20px;
}
}
@media (max-width: 576px) {
.property-details-page .property-details-sidebar .sidebar-contact-form {
padding: 40px 20px;
}
}
.property-details-page .property-details-sidebar .sidebar-contact-form .form-inner input,
.property-details-page .property-details-sidebar .sidebar-contact-form .form-inner textarea {
background-color: var(--white-color);
border-color: rgba(var(--primary-color-opc), 0.1);
}
.property-details-page .property-details-sidebar .sidebar-contact-form .form-inner input:focus,
.property-details-page .property-details-sidebar .sidebar-contact-form .form-inner textarea:focus {
border-color: var(--primary-color2);
}
.property-details-page .property-details-sidebar .sidebar-contact-form .form-inner2 {
margin-top: 15px;
}
.property-details-page .property-details-sidebar .sidebar-contact-form .primary-btn2 {
margin-top: 40px;
border-radius: 5px;
padding: 16px 26px;
}
@media (max-width: 576px) {
.property-details-page .property-details-sidebar .sidebar-contact-form .primary-btn2 {
margin-top: 35px;
}
}
.home2-testimonial-section .testimonial-slider-area .contact-btn-area img {
max-width: 300px;
}
.home2-property-banner-section .indivisual-item-list .single-item img {
max-width: 48px;
}
.home2-testimonial-section .testimonial-left-content .rating-area > li .single-rating .rating {
line-height: 1;
margin-top: -1px;
}
.home2-testimonial-section .testimonial-left-content .rating-area > li .single-rating .rating ul.tripadvisor {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 9px;
line-height: 1;
}
.home2-testimonial-section .testimonial-left-content .rating-area > li .single-rating .rating ul.tripadvisor li {
list-style: none;
}
.home2-testimonial-section .testimonial-left-content .rating-area > li .single-rating .rating ul.tripadvisor li i {
color: #FFC107;
font-size: 12px;
list-style: none;
}
.home6-testimonial-section .testimonial-content-wrap .rating-area > li .single-rating .rating {
line-height: 1;
margin-top: -1px;
}
.home6-testimonial-section .testimonial-content-wrap .rating-area > li .single-rating .rating ul.tripadvisor {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 9px;
line-height: 1;
}
.home6-testimonial-section .testimonial-content-wrap .rating-area > li .single-rating .rating ul.tripadvisor li {
list-style: none;
}
.home6-testimonial-section .testimonial-content-wrap .rating-area > li .single-rating .rating ul.tripadvisor li i {
color: #FFC107;
font-size: 12px;
list-style: none;
}
.home1-testimonial-section .testimonial-slider-area .contact-btn-area img {
max-width: 150px;
}
.home3-testimonial-section .testimonial-slider-wrap .testimonial-slider .contact-btn-area img {
max-width: 150px;
}
.sidebar-menu .sidebar-menu-wrap .main-menu ul.sub-menu li .dropdown-icon2 i {
color: var(--title-color);
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu li > .dropdown-icon2 {
top: -5px;
background: transparent;
display: none;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu li.menu-item-has-children > .dropdown-icon2 {
display: flex;
}
.sidebar-menu .sidebar-menu-wrap .main-menu ul.sub-menu li.menu-item-has-children .dropdown-icon2 i {
opacity: 1;
}
.sidebar-menu .sidebar-menu-wrap .main-menu ul.sub-menu li .dropdown-icon2 i {
opacity: 0;
}
.sidebar-menu .sidebar-menu-wrap .main-menu li.menu-item-has-children .dropdown-icon2 i {
opacity: 1;
}
.sidebar-menu .sidebar-menu-wrap .main-menu li .dropdown-icon2 i {
opacity: 0;
}
.sidebar-menu .sidebar-menu-wrap .main-menu li.menu-item-has-children .dropdown-icon2 {
opacity: 1;
}
.sidebar-menu .sidebar-menu-wrap .main-menu li .dropdown-icon2 {
opacity: 0;
}
.sidebar-menu .sidebar-menu-wrap .main-menu > li .sub-menu .dropdown-icon2 {
height: unset;
width: unset;
background-color: transparent;
top: -7px;
}
body.header_six {
padding-left: 90px;
}
@media (max-width: 575px) { body.header_six {
padding-left: 0px;
}
}
.project-info-flow-page .project-info-flow-card a img {
min-height: 453px;
-o-object-fit: cover;
object-fit: cover;
}
.properties-page .property-img-wrap a img {
max-height: 327px;
}
.project-masonary-page .project-card3 img {
width: 100%;
max-height: unset;
height: 100%;
}
.loading {
position: relative;
opacity: 0.5;
}
.loading::before {
position: absolute;
content: "";
top: 20%;
left: 50%;
width: 30px;
height: 30px;
margin-top: -10px;
margin-left: -20px;
border-radius: 50%;
border: 5px solid #ccc;
box-sizing: border-box;
border-top-color: #000;
animation: spin 1s linear infinite;
z-index: 2;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}