/* Nexella | IT Solutions & Technology HTML Template
Template Name: Nexella
Version: 1.0.0
License: copyright commercial
/************ TABLE OF CONTENTS ***************
1. Fonts
2. Reset
3. Global Settings
4. Main Header / Two /
5. Sticky Header
6. Mobile Menu
7. Section Title
8. Page Title
10. Banner Section / Two
11. About Section / Two
12. Mission /
13. Services Section / Two
14. Process Section / Two
15. Work Section / Two /
16. Testimonial Section / Two /
17. Why Choose Us / Two
18. Pricing Section
19. team Section / Two
20. Contact Sectiom / Two
21. News Section / Two
22. Marquee / Two / Three
23. Brand Section
24. Video Section
25. Main Footer /Two
**********************************************/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");
@import url("animate.css");
@import url("owl.css");
@import url("swiper.min.css");
@import url("jquery.fancybox.min.css");
@import url("jquery-ui.css");
@import url("linear.css");
@import url("select2.min.css");
@import url("fontawesome-free.css");
@import url("fontawesome.css");
@import url("flaticon.css");
@import url("flaticon-set-business.css");
@import url("tm-bs-mp.css");
@import url("tm-utility-classes.css");
/* Kangpin industrial website overrides */
.kangpin-site {
--theme-color2: #2f8cff;
--theme-color2-rgb: 47, 140, 255;
--text-color: #c7ccd6;
--link-hover-color: #2f8cff;
}
.kangpin-site .main-header .logo img,
.kangpin-site .sticky-header .logo img,
.kangpin-site .mobile-menu .nav-logo img,
.kangpin-site .main-footer .logo img {
max-height: 46px;
width: auto;
}
.kangpin-site .main-header .logo img,
.kangpin-site .sticky-header .logo img,
.kangpin-site .mobile-menu .nav-logo img {
filter: drop-shadow(0 8px 18px rgba(0,0,0,0.22));
}
.kangpin-site .kp-header .header-lower {
background: rgba(7, 10, 16, 0.92);
backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 16px 45px rgba(0,0,0,0.24);
}
.kangpin-site .kp-header .main-menu .navigation > li > a,
.kangpin-site .sticky-header .main-menu .navigation > li > a {
color: #f7fbff;
font-size: 17px;
font-weight: 800;
letter-spacing: 0;
text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}
.kangpin-site .kp-header .main-menu .navigation > li:hover > a,
.kangpin-site .kp-header .main-menu .navigation > li.current > a,
.kangpin-site .sticky-header .main-menu .navigation > li:hover > a,
.kangpin-site .sticky-header .main-menu .navigation > li.current > a {
color: #fcdb66;
}
.kangpin-site .kp-header .main-menu .navigation > li:before {
background: #fcdb66;
height: 3px;
bottom: -20px;
}
.kangpin-site .kp-header .main-menu .navigation > li.dropdown > a:after {
color: currentColor;
right: -7px;
}
.kangpin-site .kp-header .main-menu .navigation > li > ul,
.kangpin-site .sticky-header .main-menu .navigation > li > ul {
background: #08111d;
border: 1px solid rgba(255,255,255,0.14);
box-shadow: 0 24px 60px rgba(0,0,0,0.34);
padding: 10px 0;
}
.kangpin-site .kp-header .main-menu .navigation > li > ul > li,
.kangpin-site .sticky-header .main-menu .navigation > li > ul > li {
border-bottom-color: rgba(255,255,255,0.1);
}
.kangpin-site .kp-header .main-menu .navigation > li > ul > li > a,
.kangpin-site .sticky-header .main-menu .navigation > li > ul > li > a {
color: #eef6ff;
font-size: 15px;
font-weight: 700;
line-height: 1.35;
text-transform: none;
}
.kangpin-site .kp-header .main-menu .navigation > li > ul > li:hover > a,
.kangpin-site .sticky-header .main-menu .navigation > li > ul > li:hover > a {
color: #fcdb66;
}
.kangpin-site .sticky-header {
background: rgba(7, 10, 16, 0.96);
border-bottom: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 18px 50px rgba(0,0,0,0.22);
}
.kangpin-site .header-btn a {
color: #07111e;
background: #fcdb66;
border: 1px solid rgba(255,255,255,0.22);
font-size: 16px;
font-weight: 900;
padding: 10px 24px;
}
.kangpin-site .header-btn a::before {
background: #2f8cff;
}
.kangpin-site .header-btn a:hover {
color: #ffffff;
}
.kangpin-site .kp-header .header-lower,
.kangpin-site .sticky-header {
background: rgba(255,255,255,0.96);
border-bottom: 1px solid #e5e8ef;
box-shadow: 0 14px 38px rgba(37, 50, 75, 0.08);
}
.kangpin-site .main-header .logo img,
.kangpin-site .sticky-header .logo img,
.kangpin-site .mobile-menu .nav-logo img {
filter: drop-shadow(0 8px 18px rgba(37, 50, 75, 0.08));
}
.kangpin-site .kp-header .main-menu .navigation > li > a,
.kangpin-site .sticky-header .main-menu .navigation > li > a {
color: #25324b;
text-shadow: none;
}
.kangpin-site .kp-header .main-menu .navigation > li:hover > a,
.kangpin-site .kp-header .main-menu .navigation > li.current > a,
.kangpin-site .sticky-header .main-menu .navigation > li:hover > a,
.kangpin-site .sticky-header .main-menu .navigation > li.current > a {
color: #2d3b95;
}
.kangpin-site .kp-header .main-menu .navigation > li:before {
background: #2d3b95;
}
.kangpin-site .kp-header .main-menu .navigation > li > ul,
.kangpin-site .sticky-header .main-menu .navigation > li > ul {
background: #ffffff;
border: 1px solid #e5e8ef;
box-shadow: 0 24px 60px rgba(37, 50, 75, 0.14);
}
.kangpin-site .kp-header .main-menu .navigation > li > ul > li,
.kangpin-site .sticky-header .main-menu .navigation > li > ul > li {
border-bottom-color: #eef1f6;
}
.kangpin-site .kp-header .main-menu .navigation > li > ul > li > a,
.kangpin-site .sticky-header .main-menu .navigation > li > ul > li > a {
color: #25324b;
}
.kangpin-site .kp-header .main-menu .navigation > li > ul > li:hover > a,
.kangpin-site .sticky-header .main-menu .navigation > li > ul > li:hover > a {
color: #2d3b95;
}
.kangpin-site .header-btn a {
color: #ffffff;
background: #2d3b95;
border-color: rgba(45, 59, 149, 0.16);
}
.kangpin-site .kp-header {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 9999;
}
.kangpin-site .kp-header .header-lower {
background: transparent !important;
border-bottom-color: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.kangpin-site .kp-header:hover .header-lower,
.kangpin-site .kp-header:focus-within .header-lower {
background: rgba(255, 255, 255, 0.96) !important;
border-bottom: 1px solid #e5e8ef !important;
box-shadow: 0 14px 38px rgba(37, 50, 75, 0.08) !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
}
.kangpin-site .sticky-header {
display: none !important;
}
.kp-home-hero {
position: relative;
min-height: 930px;
display: flex;
align-items: center;
overflow: hidden;
padding: 150px 0 110px;
background: #07090d;
}
.kp-home-hero .auto-container {
position: relative;
z-index: 2;
}
.kp-hero-bg {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 78% 30%, rgba(47, 140, 255, 0.34), transparent 28%),
radial-gradient(circle at 58% 70%, rgba(252, 219, 102, 0.12), transparent 20%),
linear-gradient(100deg, #070707 0%, #111820 48%, #315574 100%);
}
.kp-hero-bg::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
background-size: 72px 72px;
mask-image: linear-gradient(90deg, rgba(0,0,0,0.55), rgba(0,0,0,1));
}
.kp-hero-content h1 {
color: #ffffff;
font-size: clamp(60px, 6vw, 96px);
line-height: 1.04;
font-weight: 800;
letter-spacing: 0;
margin-bottom: 28px;
}
.kp-hero-content h1 span {
color: var(--theme-color2);
font-weight: 500;
}
.kp-hero-content p {
max-width: 660px;
color: #d8dee9;
font-size: 18px;
}
.kp-hero-actions,
.kp-hero-stats {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 32px;
}
.kp-primary-btn,
.kp-ghost-btn,
.kp-inline-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 58px;
padding: 0 30px;
border-radius: 999px;
font-weight: 800;
color: #ffffff;
background: #126dcc;
box-shadow: 0 18px 45px rgba(18, 109, 204, 0.28);
}
.kp-ghost-btn {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.28);
box-shadow: none;
}
.kp-inline-link {
min-height: 0;
padding: 0;
color: var(--theme-color2);
background: transparent;
box-shadow: none;
}
.kp-primary-btn:hover,
.kp-ghost-btn:hover,
.kp-inline-link:hover {
color: #ffffff;
transform: translateY(-2px);
}
.kp-hero-stats div {
min-width: 150px;
padding: 18px 20px;
border-radius: 8px;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.12);
}
.kp-hero-stats strong {
display: block;
color: #ffffff;
font-size: 34px;
line-height: 1;
}
.kp-hero-stats span {
color: #cbd3df;
}
.kp-hero-visual {
position: relative;
min-height: 540px;
perspective: 1200px;
--kpAnchorX: 0px;
--kpTiltX: 0deg;
--kpTiltY: 0deg;
--kpMoveX: 0px;
--kpMoveY: 0px;
}
.hero-logo-float {
position: absolute;
right: 2%;
top: 50%;
width: min(600px, 94%);
min-height: 300px;
display: grid;
place-items: center;
transform: translate3d(calc(var(--kpAnchorX) + var(--kpMoveX)), calc(-50% + var(--kpMoveY)), 0) rotateX(var(--kpTiltX)) rotateY(var(--kpTiltY));
transform-style: preserve-3d;
animation: kpLogoDrift 6s ease-in-out infinite;
transition: transform 180ms ease;
}
.hero-logo-type {
min-height: 420px;
perspective: 1200px;
}
.hero-logo-word {
display: inline-block;
font-size: clamp(86px, 8.8vw, 150px);
line-height: 0.9;
font-weight: 950;
letter-spacing: 0;
color: #f7fbff;
transform: translateZ(80px) rotateY(-14deg) rotateX(8deg);
text-shadow:
1px 1px 0 #d8eaff,
2px 2px 0 #bad8ff,
3px 3px 0 #8bbcff,
4px 4px 0 #3a8def,
5px 5px 0 #126dcc,
16px 24px 42px rgba(0,0,0,0.48),
0 0 58px rgba(47,140,255,0.38);
animation: kpWordEntrance 1.1s cubic-bezier(0.2, 0.85, 0.22, 1) both, kpWordPulse 4.8s ease-in-out 1.1s infinite;
}
.kp-brand-hero {
position: relative;
height: 100svh;
max-height: 100vh;
min-height: 720px;
padding: clamp(86px, 10vh, 116px) 0 clamp(132px, 16vh, 178px);
background: #fbfdff;
overflow: hidden;
}
.kp-brand-hero > .auto-container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.kp-brand-hero .kp-hero-bg {
background:
radial-gradient(circle at 78% 32%, rgba(0, 151, 218, 0.045), transparent 30%),
linear-gradient(135deg, #ffffff 0%, #ffffff 58%, #f8fcff 100%);
}
.kp-brand-hero .kp-hero-bg::before {
background-image:
linear-gradient(rgba(0, 91, 164, 0.018) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 91, 164, 0.018) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: linear-gradient(115deg, rgba(0,0,0,0.06), rgba(0,0,0,0.42));
}
.kp-brand-hero::after {
content: "";
position: absolute;
inset: 0;
border-radius: 0 0 28px 28px;
box-shadow: inset 0 -1px 0 rgba(0, 91, 164, 0.08);
pointer-events: none;
}
.kp-direct-hero {
min-height: 0;
display: block;
padding: 0;
background: #ffffff;
overflow: hidden;
}
.kp-direct-hero::after {
display: none;
}
.kp-hero-reference-image {
display: block;
width: 100%;
height: auto;
min-height: 0;
object-fit: contain;
object-position: center top;
}
.kp-brand-layout {
position: relative;
height: 100%;
min-height: 0;
width: min(1200px, calc(100vw - 48px));
max-width: 1200px;
margin: 0 auto;
}
.kp-brand-copy {
position: absolute;
inset: 0;
z-index: 6;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
padding-top: 0;
pointer-events: none;
}
.kp-brand-mark {
display: inline-grid;
gap: 8px;
margin-left: 92px;
margin-bottom: 0;
animation-delay: 0.08s;
}
.kp-brand-mark img {
width: 216px;
height: 58px;
object-fit: cover;
border-radius: 10px;
box-shadow: 0 16px 38px rgba(0, 91, 164, 0.15);
}
.kp-brand-mark span {
color: #0b56a0;
font-size: 40px;
line-height: 1;
font-family: Georgia, "Times New Roman", "Noto Serif SC", serif;
font-weight: 700;
}
.kp-brand-title {
position: absolute;
left: clamp(18px, 5vw, 72px);
top: 48%;
width: min(760px, 64%);
margin: 0;
translate: 0 -50%;
text-align: left;
animation-delay: 0.32s;
}
.kp-brand-title::before {
content: "";
position: absolute;
inset: -28px -34px -22px -26px;
z-index: -1;
background: radial-gradient(ellipse at 35% 50%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.72) 56%, rgba(255, 255, 255, 0) 78%);
filter: blur(8px);
pointer-events: none;
}
.kp-brand-title h1 {
color: #005b9d;
font-size: clamp(68px, 7.2vw, 108px);
line-height: 0.98;
font-weight: 950;
letter-spacing: 0;
margin-bottom: 28px;
white-space: nowrap;
text-shadow: 0 14px 34px rgba(0, 91, 164, 0.12);
}
.kp-brand-title h2 {
color: #005b9d;
font-size: clamp(32px, 3.1vw, 45px);
line-height: 1;
font-weight: 950;
letter-spacing: 0;
margin-bottom: 22px;
white-space: nowrap;
}
.kp-brand-title p {
color: rgba(0, 91, 157, 0.7);
font-size: clamp(20px, 1.6vw, 24px);
line-height: 1.2;
font-weight: 800;
letter-spacing: 0.2em;
white-space: nowrap;
}
html[lang="en"] .kp-brand-title p {
max-width: 640px;
font-size: clamp(20px, 1.65vw, 24px);
line-height: 1.32;
font-weight: 800;
letter-spacing: 0.045em;
color: rgba(0, 91, 157, 0.66);
}
.kp-hero-title-reveal {
opacity: 1;
transform: none;
filter: none;
animation: none;
}
.kp-hero-title-reveal h1,
.kp-hero-title-reveal h2 {
opacity: 0;
color: rgba(0, 91, 157, 0.18);
transform: translate3d(0, 18px, 0);
filter: blur(8px);
}
.kp-hero-title-reveal h1 {
animation: kpHeroSoftReveal 1.15s cubic-bezier(0.18, 0.76, 0.18, 1) 0.16s forwards;
}
.kp-hero-title-reveal h2 {
animation: kpHeroSoftReveal 1.15s cubic-bezier(0.18, 0.76, 0.18, 1) 0.46s forwards;
}
.kp-hero-title-reveal p {
opacity: 0;
color: rgba(0, 91, 157, 0.42);
transform: translate3d(0, 12px, 0);
filter: blur(5px);
animation: kpHeroSoftRevealText 0.95s cubic-bezier(0.18, 0.76, 0.18, 1) 0.92s forwards;
}
.kp-dot-c {
position: absolute;
right: clamp(-26px, -1.2vw, -10px);
top: 53%;
width: min(1080px, 90vw);
aspect-ratio: 4 / 3;
z-index: 2;
perspective: 1200px;
transform-style: preserve-3d;
translate: 0 -50%;
--kpTiltX: 0deg;
--kpTiltY: 0deg;
--kpMoveX: 0px;
--kpMoveY: 0px;
animation: kpDotCFloat 7s ease-in-out 2s infinite;
}
.kp-reverse-c {
transform-origin: 64% 50%;
}
.kp-dot-c::before {
content: "";
position: absolute;
inset: 7% 1% 6% 42%;
background: radial-gradient(circle, rgba(0, 91, 164, 0.07), transparent 68%);
filter: blur(28px);
transform: translate3d(8px, 24px, -80px);
}
.kp-dot-c-svg {
position: relative;
width: 100%;
height: 100%;
overflow: visible;
display: block;
transform: translate3d(var(--kpMoveX), var(--kpMoveY), 0) rotateZ(0deg) rotateX(calc(1deg + var(--kpTiltX))) rotateY(calc(-2deg + var(--kpTiltY)));
filter: drop-shadow(0 26px 38px rgba(0, 91, 164, 0.1));
transition: transform 180ms ease;
}
.kp-dot-c-svg .kp-c-dot,
.kp-c-dot {
opacity: 0;
transform-box: fill-box;
transform-origin: center;
animation: kpDotCReveal 1.05s cubic-bezier(0.18, 0.76, 0.18, 1) forwards, kpDotCBreathe 5.8s ease-in-out 2.35s infinite;
animation-delay: var(--dot-delay), calc(var(--dot-delay) + 1.7s);
}
.kp-dot-path {
fill: none;
stroke-linecap: round;
stroke-dasharray: 0.01 31;
stroke-dashoffset: 1000;
opacity: 0;
animation: kpDotCReveal 1.85s cubic-bezier(0.18, 0.76, 0.18, 1) forwards, kpDotCBreathe 5.8s ease-in-out 2.35s infinite;
}
.kp-dot-path-core {
stroke: #005da4;
stroke-width: 28;
animation-delay: 0.82s, 2.65s;
}
.kp-dot-path-mid {
stroke: #0094d6;
stroke-width: 18;
stroke-dasharray: 0.01 24;
animation-delay: 1s, 2.8s;
}
.kp-dot-path-fine {
stroke: #0087cb;
stroke-width: 10;
stroke-dasharray: 0.01 19;
animation-delay: 1.16s, 2.95s;
}
.kp-dot-path-spark {
stroke: #00a8df;
stroke-width: 8;
stroke-dasharray: 0.01 27;
animation-delay: 0.62s, 2.45s;
}
.kp-dot-path-tail {
stroke: #0073b8;
stroke-width: 13;
stroke-dasharray: 0.01 21;
animation-delay: 1.34s, 3.1s;
}
.kp-logo-marquee {
position: relative;
margin: 0;
z-index: 5;
background: #ffffff;
border-top: 1px solid rgba(255,255,255,0.2);
border-bottom: 1px solid rgba(0,0,0,0.08);
transform: none;
box-shadow: 0 16px 45px rgba(0,0,0,0.18);
}
.kp-logo-marquee .marquee {
padding: 22px 0;
}
.kp-logo-marquee .text {
color: #0d1a2b;
font-size: 22px;
font-weight: 900;
}
.kp-logo-marquee .marquee-logo {
width: 150px;
height: auto;
border-radius: 8px;
}
.kp-about-profile-section,
.kp-product-section,
.kp-product-matrix-section,
.kp-application-section,
.kp-quality-section,
.kp-manufacturing-section,
.kp-service-section,
.kp-partner-section,
.kp-global-section,
.kp-cta-section {
position: relative;
padding: 120px 0;
background: #070707;
}
.kp-profile-section {
position: relative;
padding: 0 0 118px;
background: #ffffff;
overflow: hidden;
}
.kangpin-site .kp-hero-stats-section {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 8;
padding: clamp(6px, 0.7vw, 10px) 0;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(248, 252, 255, 0.16)),
radial-gradient(circle at 50% 0%, rgba(126, 185, 255, 0.18), rgba(255, 255, 255, 0) 72%);
border-top: 1px solid rgba(255, 255, 255, 0.28);
border-bottom: 1px solid rgba(196, 218, 242, 0.34);
box-shadow: 0 -18px 44px rgba(14, 70, 128, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.28);
backdrop-filter: blur(28px) saturate(1.18);
-webkit-backdrop-filter: blur(28px) saturate(1.18);
}
.kangpin-site .kp-hero-stats-section .auto-container {
height: auto;
display: block;
align-items: initial;
}
.kangpin-site .kp-hero-stats {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 0;
}
.kangpin-site .kp-hero-stat {
min-height: clamp(58px, 4.6vw, 80px);
display: grid;
align-content: center;
justify-items: center;
padding: 0 clamp(8px, 1vw, 18px);
text-align: center;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)),
rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border: 0;
border-radius: 0;
}
.kangpin-site .kp-hero-stat + .kp-hero-stat {
border-left: 1px solid rgba(255, 255, 255, 0.24);
}
.kangpin-site .kp-hero-stat strong {
display: block;
color: #0066b2;
font-size: clamp(24px, 2.4vw, 44px);
line-height: 0.9;
font-weight: 950;
margin-bottom: clamp(6px, 0.65vw, 10px);
white-space: nowrap;
}
.kangpin-site .kp-hero-stat strong .count-text {
color: inherit;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
}
.kangpin-site .kp-hero-stat span {
color: #556173;
font-size: clamp(11px, 0.92vw, 15px);
line-height: 1.12;
font-weight: 900;
max-width: 150px;
}
.kangpin-site .kp-hero-stat .plus {
color: #005b9d;
font-size: 0.38em;
vertical-align: super;
}
html[lang="en"] .kangpin-site .kp-hero-stat:nth-child(3) span,
html[lang="en"] .kangpin-site .kp-hero-stat:nth-child(5) span {
max-width: 122px;
font-size: clamp(9px, 0.72vw, 11px);
line-height: 1.04;
letter-spacing: 0.01em;
white-space: nowrap;
}
.kangpin-site .kp-profile-slab {
position: relative;
min-height: 100svh;
display: flex;
align-items: stretch;
overflow: hidden;
background: #0e4f7e;
}
.kangpin-site .kp-profile-slab-bg,
.kangpin-site .kp-profile-slab-overlay {
position: absolute;
inset: 0;
pointer-events: none;
}
.kangpin-site .kp-profile-slab-bg {
z-index: 0;
}
.kangpin-site .kp-profile-slab-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
filter: saturate(1.02) contrast(1.02);
}
.kangpin-site .kp-profile-slab-overlay {
z-index: 1;
background:
linear-gradient(90deg, rgba(4, 24, 42, 0.78) 0%, rgba(3, 43, 77, 0.58) 42%, rgba(7, 77, 121, 0.28) 100%),
linear-gradient(180deg, rgba(0, 36, 66, 0.24), rgba(0, 68, 117, 0.1));
}
.kangpin-site .kp-profile-slab > .auto-container {
position: relative;
z-index: 2;
width: 100%;
max-width: 1820px;
padding-left: clamp(18px, 4vw, 72px);
padding-right: clamp(18px, 4vw, 72px);
}
.kangpin-site .kp-profile-slab-grid {
min-height: 100svh;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.74fr);
gap: clamp(28px, 4vw, 72px);
align-items: center;
padding: clamp(110px, 11vh, 145px) 0 clamp(86px, 8vh, 108px);
}
.kangpin-site .kp-profile-slab-copy {
max-width: 820px;
color: #ffffff;
}
.kangpin-site .kp-slab-kicker {
display: inline-block;
color: #9ed0ff;
font-size: 12px;
line-height: 1;
font-weight: 900;
letter-spacing: 0.24em;
margin-bottom: 18px;
}
.kangpin-site .kp-profile-slab-copy h2 {
color: #ffffff;
font-size: clamp(36px, 3vw, 60px);
line-height: 1.08;
font-weight: 950;
letter-spacing: 0.02em;
margin-bottom: 18px;
}
.kangpin-site .kp-profile-slab-copy p {
max-width: 680px;
color: rgba(245, 249, 255, 0.88);
font-size: clamp(14px, 0.95vw, 18px);
line-height: 1.8;
font-weight: 700;
margin-bottom: 10px;
}
.kangpin-site .kp-profile-slab-intro {
max-width: 760px;
padding-left: clamp(16px, 1.5vw, 24px);
border-left: 2px solid rgba(158, 208, 255, 0.72);
}
.kangpin-site .kp-profile-slab-intro .kp-profile-slab-lead {
color: #ffffff;
font-size: clamp(18px, 1.3vw, 24px);
line-height: 1.55;
font-weight: 850;
margin-bottom: 14px;
}
.kangpin-site .kp-profile-slab-capabilities {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
max-width: 780px;
margin-top: 26px;
}
.kangpin-site .kp-profile-slab-capability {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
min-height: 84px;
padding: 15px 14px;
background: rgba(4, 31, 56, 0.32);
border: 1px solid rgba(196, 228, 255, 0.2);
border-radius: 8px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.kangpin-site .kp-profile-slab-capability-index {
color: #9ed0ff;
font-family: Arial, sans-serif;
font-size: 11px;
line-height: 1;
font-weight: 900;
letter-spacing: 0.08em;
}
.kangpin-site .kp-profile-slab-capability strong,
.kangpin-site .kp-profile-slab-capability span {
display: block;
}
.kangpin-site .kp-profile-slab-capability strong {
color: #ffffff;
font-size: clamp(12px, 0.9vw, 15px);
line-height: 1.25;
font-weight: 900;
}
.kangpin-site .kp-profile-slab-capability div > span {
margin-top: 7px;
color: rgba(229, 241, 255, 0.78);
font-size: clamp(10px, 0.7vw, 12px);
line-height: 1.35;
font-weight: 700;
}
.kangpin-site .kp-profile-slab-tagline {
max-width: 680px;
margin-top: 22px;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.18);
color: #cfe7ff;
font-size: clamp(14px, 1vw, 18px);
line-height: 1.35;
font-weight: 900;
letter-spacing: 0.04em;
}
.kangpin-site .kp-profile-slab-panel {
display: grid;
gap: 16px;
padding: clamp(22px, 2.2vw, 34px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 28px 0 28px 0;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08)),
rgba(255, 255, 255, 0.06);
box-shadow: 0 24px 56px rgba(5, 18, 36, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18);
backdrop-filter: blur(26px) saturate(1.15);
-webkit-backdrop-filter: blur(26px) saturate(1.15);
}
.kangpin-site .kp-profile-slab-panel-label {
color: rgba(213, 237, 255, 0.78);
font-family: Arial, sans-serif;
font-size: 10px;
line-height: 1;
font-weight: 900;
letter-spacing: 0.2em;
}
.kangpin-site .kp-profile-slab-since {
color: #ffffff;
font-size: clamp(28px, 3vw, 52px);
line-height: 0.92;
font-weight: 400;
letter-spacing: 0.03em;
white-space: nowrap;
}
.kangpin-site .kp-profile-slab-since span {
color: #d8ebff;
font-weight: 300;
}
.kangpin-site .kp-profile-slab-metrics {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.kangpin-site .kp-profile-slab-stat {
min-height: 116px;
padding: 16px 14px 14px;
text-align: center;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 20px;
}
.kangpin-site .kp-profile-slab-stat strong {
display: block;
color: #ffffff;
font-size: clamp(24px, 2vw, 36px);
line-height: 0.96;
font-weight: 950;
margin-bottom: 8px;
white-space: nowrap;
}
.kangpin-site .kp-profile-slab-stat strong .count-text,
.kangpin-site .kp-profile-slab-stat strong .plus,
.kangpin-site .kp-profile-slab-stat strong b {
display: inline-block !important;
color: inherit;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
}
.kangpin-site .kp-profile-slab-stat strong b {
margin: 0;
}
.kangpin-site .kp-profile-slab-stat span {
display: block;
color: rgba(229, 241, 255, 0.9);
font-size: clamp(11px, 0.92vw, 15px);
line-height: 1.14;
font-weight: 800;
}
html[lang="en"] .kangpin-site .kp-profile-slab-copy p {
font-size: clamp(13px, 0.88vw, 16px);
line-height: 1.68;
}
html[lang="en"] .kangpin-site .kp-profile-slab-stat:nth-child(3) span,
html[lang="en"] .kangpin-site .kp-profile-slab-stat:nth-child(4) span {
font-size: clamp(9px, 0.72vw, 12px);
line-height: 1.04;
}
html[lang="en"] .kangpin-site .kp-profile-slab-stat:nth-child(3) span {
white-space: nowrap;
}
.kp-profile-hero {
position: relative;
height: clamp(420px, 31vw, 490px);
min-height: 420px;
display: flex;
align-items: center;
overflow: hidden;
background: #007fc4;
}
.kp-profile-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(90deg, rgba(0, 91, 164, 0.68) 0%, rgba(0, 145, 210, 0.28) 42%, rgba(255,255,255,0.08) 100%),
linear-gradient(180deg, rgba(0, 130, 204, 0.22), rgba(0, 103, 180, 0.1));
pointer-events: none;
}
.kp-profile-hero img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
filter: saturate(1.18) contrast(1.05);
}
.kp-profile-hero .auto-container {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
min-height: 420px;
}
.kp-profile-hero-copy {
position: absolute;
left: 9.1%;
top: 72px;
color: #ffffff;
}
.kp-profile-hero-copy h2 {
color: #ffffff;
font-size: clamp(52px, 4.2vw, 72px);
line-height: 1.08;
font-weight: 950;
letter-spacing: 0;
margin-bottom: 22px;
text-shadow: 0 12px 28px rgba(0, 53, 112, 0.28);
}
.kp-profile-hero-copy span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 420px;
min-height: 26px;
padding: 0 32px;
border-radius: 999px;
color: #005b9d;
background: #ffffff;
font-size: 15px;
line-height: 1;
font-weight: 900;
letter-spacing: 0.04em;
}
.kp-profile-slogan {
position: absolute;
left: 57.6%;
top: 84px;
color: #ffffff;
}
.kp-profile-slogan strong {
display: block;
color: #ffffff;
font-size: 22px;
line-height: 1;
font-weight: 900;
margin-bottom: 8px;
}
.kp-profile-slogan small {
display: block;
color: rgba(255,255,255,0.92);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.04em;
}
.kp-profile-slogan::after {
content: "";
display: block;
width: 224px;
height: 5px;
margin-top: 8px;
border-radius: 999px;
background: linear-gradient(90deg, #00a1df 0%, #00a1df 58%, #ff8a1c 58%, #ff8a1c 100%);
}
.kp-profile-body {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: minmax(470px, 0.92fr) minmax(660px, 1.08fr);
gap: clamp(58px, 5vw, 86px);
align-items: start;
margin-top: clamp(-76px, -4.3vw, -54px);
}
.kp-profile-card {
min-height: 470px;
padding: 38px 38px 34px;
background: rgba(0, 91, 164, 0.88);
color: #ffffff;
box-shadow: 0 22px 54px rgba(0, 91, 164, 0.18);
}
.kp-profile-card h3 {
color: #ffffff;
font-size: 30px;
line-height: 1;
font-weight: 950;
letter-spacing: 0.04em;
margin-bottom: 13px;
}
.kp-profile-card h4 {
position: relative;
display: inline-block;
color: #ffffff;
font-size: 28px;
line-height: 1;
font-weight: 950;
margin-bottom: 42px;
}
.kp-profile-card h4::after {
content: "";
position: absolute;
left: 0;
bottom: -16px;
width: 44px;
height: 4px;
background: #ffffff;
}
.kp-profile-card p {
color: #ffffff;
font-size: 13px;
line-height: 1.88;
font-weight: 700;
text-indent: 2em;
margin-bottom: 10px;
}
html[lang="en"] .kp-profile-card p {
font-size: 14px;
line-height: 1.72;
text-indent: 0;
margin-bottom: 14px;
}
.kp-profile-highlights {
display: grid;
gap: 12px;
margin: 28px 0 0;
padding: 0;
}
.kp-profile-highlights li {
position: relative;
display: flex;
align-items: center;
min-height: 46px;
padding: 10px 14px 10px 40px;
border: 1px solid rgba(255,255,255,0.2);
background: rgba(255,255,255,0.08);
color: #ffffff;
font-size: 15px;
line-height: 1.35;
font-weight: 800;
list-style: none;
}
.kp-profile-highlights li::before {
content: "";
position: absolute;
left: 16px;
top: 50%;
width: 9px;
height: 9px;
border-radius: 50%;
background: #fcdb66;
transform: translateY(-50%);
}
.kp-profile-gallery {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 38px;
}
.kp-profile-gallery img {
width: 100%;
height: 150px;
object-fit: cover;
border: 4px solid #f5f8fb;
box-shadow: 0 8px 18px rgba(0, 42, 92, 0.18);
}
.kp-profile-right {
padding-top: 92px;
}
.kp-profile-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 30px;
margin-bottom: 16px;
}
.kp-profile-heading h3 {
color: #005b9d;
font-size: clamp(27px, 2vw, 34px);
line-height: 1.2;
font-weight: 950;
margin-top: 16px;
}
.kp-profile-since {
display: flex;
align-items: baseline;
gap: 14px;
white-space: nowrap;
}
.kp-profile-since span {
color: #005b9d;
font-size: clamp(54px, 4.8vw, 76px);
line-height: 1;
font-weight: 300;
letter-spacing: 0;
}
.kp-profile-since strong {
color: #9d9fa3;
font-size: clamp(50px, 4.2vw, 68px);
line-height: 1;
font-weight: 500;
}
.kp-profile-right p {
color: #111827;
font-size: 13px;
line-height: 1.49;
letter-spacing: 0.02em;
margin-bottom: 6px;
}
html[lang="en"] .kp-profile-right {
padding-top: 78px;
}
html[lang="en"] .kp-profile-right p {
font-size: 14px;
line-height: 1.68;
letter-spacing: 0;
margin-bottom: 12px;
}
html[lang="en"] .kp-profile-slogan {
display: none;
}
.kangpin-site .kp-brand-copy {
align-items: flex-start !important;
justify-content: center !important;
text-align: left;
}
.kangpin-site .kp-brand-title.kp-brand-centered-title {
position: absolute !important;
left: clamp(18px, 5vw, 72px) !important;
top: 48% !important;
margin: 0 !important;
translate: 0 -50% !important;
text-align: left !important;
width: min(760px, 64%) !important;
}
.kangpin-site .kp-dot-c {
left: auto !important;
right: clamp(-26px, -1.2vw, -10px) !important;
top: 53% !important;
translate: 0 -50% !important;
}
.kp-profile-metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
margin-top: 38px;
}
.kp-profile-stat {
position: relative;
min-height: 96px;
padding: 0 24px;
text-align: center;
}
.kp-profile-stat + .kp-profile-stat {
border-left: 2px solid #005b9d;
}
.kp-profile-metrics strong {
display: block;
color: #005b9d;
font-size: clamp(44px, 3.25vw, 64px);
line-height: 0.9;
font-weight: 950;
margin-bottom: 14px;
}
.kp-profile-metrics sup {
top: -0.2em;
font-size: 0.42em;
font-weight: 950;
}
.kp-profile-metrics span {
display: block;
color: #4b5563;
font-size: clamp(20px, 1.5vw, 26px);
line-height: 1.15;
font-weight: 950;
}
.kangpin-site .kp-profile-section {
padding: clamp(36px, 4vw, 52px) 0 clamp(38px, 4.2vw, 56px);
background: #ffffff;
}
.kangpin-site .kp-profile-section > .auto-container {
max-width: 1840px;
padding-left: clamp(18px, 4vw, 72px);
padding-right: clamp(18px, 4vw, 72px);
}
.kangpin-site .kp-profile-reference-layout.kp-profile-hero {
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.78fr);
gap: clamp(42px, 4.8vw, 70px);
align-items: start;
height: auto;
min-height: 0;
overflow: visible;
background: #ffffff;
}
.kangpin-site .kp-profile-reference-layout.kp-profile-hero::before {
display: none;
}
.kangpin-site .kp-profile-media {
position: relative;
aspect-ratio: 1.54 / 1;
min-height: 0;
max-height: 330px;
overflow: hidden;
background: #ffffff;
}
.kangpin-site .kp-profile-reference-layout .kp-profile-hero-image {
position: static;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
filter: saturate(1.02) contrast(1.02);
}
.kangpin-site .kp-profile-copy {
color: #25324b;
}
.kangpin-site .kp-profile-copy h2 {
color: #2d3b95;
font-size: clamp(32px, 2.55vw, 44px);
line-height: 1.14;
font-weight: 950;
letter-spacing: 0;
margin-bottom: 12px;
}
.kangpin-site .kp-profile-rule {
width: min(100%, 530px);
height: 4px;
margin: 0 0 16px;
background: #2d3b95;
}
.kangpin-site .kp-profile-copy h3 {
color: #2d3b95;
font-size: 12px;
line-height: 1;
font-weight: 900;
letter-spacing: 0.08em;
margin-bottom: 6px;
}
.kangpin-site .kp-profile-copy h4 {
color: #25324b;
font-size: 18px;
line-height: 1.2;
font-weight: 900;
margin-bottom: 10px;
}
.kangpin-site .kp-profile-copy p {
color: #6f7480;
font-size: 15px;
line-height: 1.58;
font-weight: 700;
margin-bottom: 6px;
}
.kangpin-site .kp-profile-copy .kp-profile-en-note {
color: #8b919c;
font-size: 12px;
line-height: 1.45;
font-weight: 800;
margin-top: 8px;
}
.kangpin-site .kp-inline-count {
display: inline;
}
.kangpin-site .kp-profile-thumb-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(14px, 1.8vw, 24px);
margin-top: clamp(22px, 2.2vw, 30px);
}
.kangpin-site .kp-profile-thumb-strip img {
width: 100%;
aspect-ratio: 1.9 / 1;
object-fit: cover;
background: #ffffff;
}
.kangpin-site .kp-profile-section .kp-profile-metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
margin-top: 20px;
border-top: 1px solid #e5e8ef;
border-bottom: 1px solid #e5e8ef;
background: #ffffff;
}
.kangpin-site .kp-profile-section .kp-profile-stat {
min-height: 82px;
padding: 15px 18px;
text-align: center;
background: #ffffff;
}
.kangpin-site .kp-profile-section .kp-profile-stat + .kp-profile-stat {
border-left: 1px solid #e5e8ef;
}
.kangpin-site .kp-profile-section .kp-profile-metrics strong {
display: block;
color: #2d3b95;
font-size: clamp(28px, 2.35vw, 40px);
line-height: 1;
font-weight: 950;
margin-bottom: 6px;
}
.kangpin-site .kp-profile-section .kp-profile-metrics strong span {
display: inline;
color: #2d3b95;
font-size: inherit;
line-height: inherit;
}
.kangpin-site .kp-profile-section .kp-profile-metrics span {
color: #586173;
font-size: clamp(13px, 0.95vw, 16px);
line-height: 1.35;
font-weight: 900;
}
.kangpin-site .kp-profile-section .kp-profile-metrics .plus {
display: inline;
color: #2d3b95;
font-size: 0.78em;
line-height: 1;
}
html[lang="en"] .kangpin-site .kp-profile-copy h2 {
font-size: clamp(30px, 2.25vw, 39px);
}
html[lang="en"] .kangpin-site .kp-profile-copy p {
font-size: 14px;
line-height: 1.55;
}
.kangpin-site .kp-profile-story-grid.kp-profile-hero {
grid-template-columns: minmax(420px, 0.9fr) minmax(520px, 1.1fr);
gap: clamp(54px, 6vw, 92px);
align-items: stretch;
max-width: 1840px;
margin: 0 auto;
}
.kangpin-site .kp-about-profile-reuse .kp-profile-story-grid.kp-profile-hero {
grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.76fr);
gap: clamp(24px, 2.8vw, 40px);
align-items: start;
}
.kangpin-site .kp-about-first-screen {
height: 100svh;
min-height: 100svh;
box-sizing: border-box;
display: flex;
align-items: flex-start;
overflow: hidden;
padding-top: clamp(132px, 13vh, 164px);
padding-bottom: 28px;
}
.kangpin-site .kp-about-first-screen > .auto-container {
width: 100%;
}
.kangpin-site .kp-about-profile-reuse .kp-profile-left {
display: grid;
gap: clamp(14px, 1.4vw, 20px);
}
.kangpin-site .kp-about-profile-reuse .kp-profile-blue-card {
min-height: 0;
padding: clamp(24px, 2.4vw, 40px) clamp(22px, 2.5vw, 40px);
}
.kangpin-site .kp-about-profile-reuse .kp-profile-blue-card h3 {
font-size: clamp(24px, 2vw, 34px);
margin-bottom: clamp(24px, 2vw, 36px);
}
.kangpin-site .kp-about-profile-reuse .kp-profile-blue-card p {
font-size: clamp(13px, 0.88vw, 16px);
line-height: 1.7;
}
.kangpin-site .kp-about-profile-reuse .kp-profile-thumb-strip {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(10px, 1vw, 16px);
margin-top: 0;
}
.kangpin-site .kp-about-profile-reuse .kp-profile-right-panel {
padding: 0;
}
.kangpin-site .kp-about-profile-reuse .kp-profile-headline {
display: grid;
gap: 12px;
margin-bottom: clamp(14px, 1.5vw, 24px);
}
.kangpin-site .kp-about-profile-reuse .kp-profile-headline h2 {
max-width: 640px;
color: #2d3b95;
font-size: clamp(28px, 2.2vw, 40px);
line-height: 1.12;
font-weight: 950;
letter-spacing: 0;
margin: 0;
}
.kangpin-site .kp-about-profile-reuse .kp-profile-since {
font-size: clamp(44px, 4vw, 72px);
white-space: nowrap;
}
.kangpin-site .kp-about-profile-reuse .kp-profile-right-panel p {
max-width: 100%;
color: #666a72;
font-size: clamp(13px, 0.9vw, 16px);
line-height: 1.68;
}
.kangpin-site .kp-about-profile-reuse .kp-profile-metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
margin-top: clamp(22px, 2.4vw, 36px);
border-top: 1px solid #e5e8ef;
border-bottom: 1px solid #e5e8ef;
background: #ffffff;
}
.kangpin-site .kp-about-profile-reuse .kp-profile-stat {
min-height: 96px;
padding: 12px 10px;
}
.kangpin-site .kp-about-profile-reuse .kp-profile-stat + .kp-profile-stat {
border-left: 1px solid #e5e8ef;
}
.kangpin-site .kp-about-profile-reuse .kp-profile-metrics strong {
font-size: clamp(24px, 2.1vw, 34px);
margin-bottom: 6px;
}
.kangpin-site .kp-about-profile-reuse .kp-profile-metrics span {
font-size: clamp(12px, 0.9vw, 15px);
}
.kangpin-site .kp-about-profile-reuse .kp-profile-en-note {
margin-top: 8px;
}
.kangpin-site .kp-about-profile-reuse .kp-inline-count {
display: inline;
}
.kangpin-site .kp-profile-left {
display: grid;
grid-template-rows: 1fr auto;
gap: clamp(18px, 1.7vw, 28px);
min-width: 0;
}
.kangpin-site .kp-profile-blue-card {
min-height: clamp(330px, 29vw, 430px);
padding: clamp(30px, 3vw, 54px) clamp(28px, 3.5vw, 70px);
color: #ffffff;
background: #2878b5;
box-shadow: 0 18px 42px rgba(0, 91, 164, 0.12);
}
.kangpin-site .kp-profile-blue-card h3 {
position: relative;
color: #ffffff;
font-size: clamp(28px, 2.2vw, 42px);
line-height: 1;
font-weight: 950;
letter-spacing: 0.03em;
margin-bottom: clamp(34px, 3.1vw, 58px);
}
.kangpin-site .kp-profile-blue-card h3::after {
content: "";
position: absolute;
left: 0;
bottom: -14px;
width: 104px;
height: 4px;
background: #ffffff;
}
.kangpin-site .kp-profile-blue-card p {
color: rgba(255, 255, 255, 0.94);
font-size: clamp(14px, 0.9vw, 17px);
line-height: 1.78;
font-weight: 800;
text-indent: 2em;
margin-bottom: 10px;
}
.kangpin-site .kp-profile-blue-card .kp-inline-count,
.kangpin-site .kp-profile-blue-card .count-text {
color: #ffffff;
font-weight: 950;
}
.kangpin-site .kp-profile-story-grid .kp-profile-thumb-strip {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(14px, 1.25vw, 22px);
margin-top: 0;
padding: clamp(18px, 1.4vw, 28px);
background: #ffffff;
box-shadow: 0 16px 36px rgba(20, 37, 62, 0.06);
}
.kangpin-site .kp-profile-story-grid .kp-profile-thumb-strip img {
position: static;
inset: auto;
display: block;
aspect-ratio: 1.65 / 1;
height: auto;
box-shadow: 0 10px 24px rgba(20, 37, 62, 0.16);
}
.kangpin-site .kp-profile-right-panel {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
padding: clamp(16px, 2vw, 32px) 0 clamp(6px, 1vw, 16px);
}
.kangpin-site .kp-profile-headline {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: clamp(24px, 3vw, 58px);
margin-bottom: clamp(18px, 2vw, 32px);
}
.kangpin-site .kp-profile-headline h3 {
display: none;
}
.kangpin-site .kp-profile-headline h2 {
max-width: 680px;
color: #005b9d;
font-size: clamp(30px, 2.3vw, 46px);
line-height: 1.18;
font-weight: 950;
letter-spacing: 0.08em;
margin: 0;
}
.kangpin-site .kp-profile-since {
flex: 0 0 auto;
color: #005b9d;
font-size: clamp(48px, 4.5vw, 82px);
line-height: 0.9;
font-weight: 400;
letter-spacing: 0.03em;
white-space: nowrap;
}
.kangpin-site .kp-profile-since span {
color: #9a9a9a;
font-weight: 300;
}
.kangpin-site .kp-profile-right-panel p {
max-width: 980px;
color: #666a72;
font-size: clamp(14px, 0.92vw, 17px);
line-height: 1.72;
font-weight: 700;
margin-bottom: 10px;
}
.kangpin-site .kp-profile-right-panel .kp-profile-en-note {
color: #8b919c;
margin-top: 4px;
}
.kangpin-site .kp-profile-right-panel .kp-profile-metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
margin-top: clamp(34px, 4vw, 64px);
border: 0;
background: transparent;
}
.kangpin-site .kp-profile-right-panel .kp-profile-stat {
min-height: 120px;
display: grid;
align-content: center;
padding: 0 clamp(14px, 1.4vw, 28px);
text-align: center;
background: transparent;
}
.kangpin-site .kp-profile-right-panel .kp-profile-stat + .kp-profile-stat {
border-left: 4px solid #005b9d;
}
.kangpin-site .kp-profile-right-panel .kp-profile-metrics strong {
color: #005b9d;
font-size: clamp(24px, 2.2vw, 42px);
line-height: 0.92;
font-weight: 950;
margin-bottom: 12px;
white-space: nowrap;
}
.kangpin-site .kp-profile-right-panel .kp-profile-metrics strong span {
color: #005b9d;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
}
.kangpin-site .kp-profile-right-panel .kp-profile-metrics span {
color: #5b5d64;
font-size: clamp(12px, 0.9vw, 17px);
line-height: 1.2;
font-weight: 950;
}
.kangpin-site .kp-profile-right-panel .kp-profile-metrics > .kp-profile-stat > span {
display: block;
white-space: nowrap;
}
.kangpin-site .kp-profile-right-panel .kp-profile-metrics > .kp-profile-stat:last-child strong {
font-size: clamp(20px, 1.8vw, 34px);
}
.kangpin-site .kp-profile-right-panel .kp-profile-metrics .plus {
color: #005b9d;
font-size: 0.48em;
vertical-align: super;
}
html[lang="en"] .kangpin-site .kp-profile-blue-card p {
font-size: clamp(13px, 0.82vw, 15px);
line-height: 1.62;
text-indent: 0;
}
html[lang="en"] .kangpin-site .kp-profile-headline h2 {
max-width: 640px;
font-size: clamp(27px, 2vw, 39px);
letter-spacing: 0.02em;
}
html[lang="en"] .kangpin-site .kp-profile-right-panel p {
font-size: clamp(13px, 0.86vw, 15px);
line-height: 1.62;
}
html[lang="en"] .kangpin-site .kp-profile-right-panel .kp-profile-metrics strong {
font-size: clamp(30px, 2.75vw, 50px);
}
html[lang="en"] .kangpin-site .kp-profile-right-panel .kp-profile-metrics span {
font-size: clamp(13px, 1vw, 18px);
}
html[lang="en"] .kangpin-site .kp-profile-right-panel .kp-profile-metrics strong .count-text,
html[lang="en"] .kangpin-site .kp-profile-right-panel .kp-profile-metrics strong .plus {
font-size: inherit;
line-height: inherit;
font-weight: inherit;
}
@media only screen and (max-width: 991px) {
.kangpin-site .kp-about-first-screen {
height: auto;
min-height: auto;
display: block;
overflow: visible;
padding-top: 104px;
padding-bottom: 48px;
}
.kangpin-site .kp-about-profile-reuse .kp-profile-story-grid.kp-profile-hero {
grid-template-columns: 1fr;
gap: 30px;
}
.kangpin-site .kp-about-profile-reuse .kp-profile-right-panel {
padding: 0;
}
.kangpin-site .kp-about-profile-reuse .kp-profile-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media only screen and (max-width: 575px) {
.kangpin-site .kp-about-first-screen {
padding-top: 92px;
}
.kangpin-site .kp-about-profile-reuse .kp-profile-thumb-strip {
grid-template-columns: 1fr;
}
.kangpin-site .kp-about-profile-reuse .kp-profile-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kangpin-site .kp-about-profile-reuse .kp-profile-stat {
min-height: 82px;
}
.kangpin-site .kp-about-profile-reuse .kp-profile-stat:nth-child(3) {
border-left: 0;
}
}
.kangpin-site {
background: #ffffff;
color: #25324b;
}
.kangpin-site .kp-home-hero.kp-brand-hero,
.kangpin-site .kp-hero-bg {
background: #ffffff !important;
}
.kangpin-site .kp-brand-title h1,
.kangpin-site .kp-brand-title h2,
.kangpin-site .sec-title h2,
.kangpin-site .sec-title h2 span,
.kangpin-site .kp-step h4,
.kangpin-site .kp-cta-box h2 {
color: #25324b;
}
.kangpin-site .kp-brand-title p,
.kangpin-site .kp-lead,
.kangpin-site .kp-section-note,
.kangpin-site .kp-matrix-card p,
.kangpin-site .kp-step p {
color: #5f6b7c;
}
.kangpin-site .sec-title .sub-title {
color: #2d3b95;
}
.kangpin-site .kp-product-section,
.kangpin-site .kp-product-matrix-section,
.kangpin-site .kp-application-section,
.kangpin-site .kp-quality-section,
.kangpin-site .kp-manufacturing-section,
.kangpin-site .kp-service-section,
.kangpin-site .kp-partner-section,
.kangpin-site .kp-global-section,
.kangpin-site .kp-cta-section,
.kangpin-site .kp-about-profile-section {
background: #ffffff;
}
.kangpin-site .kp-product-matrix-section::before {
display: none;
}
.kp-energy-section {
padding: clamp(62px, 6vw, 98px) 0;
}
.kp-energy-accordion {
--kpEnergyCardSize: clamp(430px, 37vw, 620px);
display: flex;
align-items: center;
justify-content: center;
gap: clamp(14px, 1.7vw, 24px);
min-height: var(--kpEnergyCardSize);
margin-top: clamp(32px, 3.4vw, 48px);
}
.kp-energy-card {
position: relative;
flex: 1 1 0;
min-width: 0;
max-width: 430px;
height: var(--kpEnergyCardSize);
min-height: 0;
border-radius: 28px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 18px 42px rgba(37, 50, 75, 0.08);
isolation: isolate;
transition: flex-basis 420ms ease, flex-grow 420ms ease, transform 320ms ease, box-shadow 320ms ease;
}
.kp-energy-card:hover,
.kp-energy-card:focus-within {
flex: 0 0 var(--kpEnergyCardSize);
aspect-ratio: 1 / 1;
transform: translateY(-8px);
box-shadow: 0 26px 58px rgba(37, 50, 75, 0.14);
}
.kp-energy-card img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
filter: saturate(1.02);
transition: transform 520ms ease, filter 420ms ease;
}
.kp-energy-card:hover img,
.kp-energy-card:focus-within img {
transform: scale(1.04);
filter: saturate(1.08) contrast(1.02);
}
.kp-energy-card::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(37, 50, 75, 0.08), rgba(37, 50, 75, 0.1) 54%, rgba(255,255,255,0.82));
opacity: 0;
transition: opacity 320ms ease;
pointer-events: none;
}
.kp-energy-card:hover::after,
.kp-energy-card:focus-within::after {
opacity: 1;
}
.kp-energy-mark {
position: absolute;
left: 50%;
top: 56px;
z-index: 2;
color: #ffffff;
font-size: clamp(34px, 2.8vw, 48px);
line-height: 1;
font-weight: 900;
transform: translateX(-50%);
text-shadow: 0 6px 18px rgba(37, 50, 75, 0.14);
}
.kp-energy-caption {
position: absolute;
left: 22px;
right: 22px;
bottom: 24px;
z-index: 2;
text-align: center;
opacity: 0;
transform: translateY(16px);
transition: opacity 300ms ease, transform 300ms ease;
}
.kp-energy-card:hover .kp-energy-caption,
.kp-energy-card:focus-within .kp-energy-caption {
opacity: 1;
transform: translateY(0);
}
.kp-energy-caption h3 {
color: #25324b;
font-size: 22px;
line-height: 1.2;
font-weight: 950;
margin-bottom: 12px;
}
.kp-energy-caption h3::after {
content: "";
display: block;
width: 72px;
height: 2px;
margin: 14px auto 0;
background: #d8dde7;
}
.kp-energy-caption p {
color: #5f6b7c;
font-size: 14px;
line-height: 1.55;
font-weight: 800;
margin: 0;
}
.kangpin-site .kp-matrix-card,
.kangpin-site .kp-step,
.kangpin-site .kp-industry-grid div,
.kangpin-site .kp-partner-cloud span,
.kangpin-site .kp-global-grid div,
.kangpin-site .kp-about-number-grid div,
.kangpin-site .kp-about-metrics div {
background: #ffffff;
border: 1px solid #e5e8ef;
box-shadow: 0 14px 34px rgba(37, 50, 75, 0.06);
}
.kangpin-site .kp-matrix-card:hover {
background: #ffffff;
border-color: rgba(45, 59, 149, 0.28);
box-shadow: 0 20px 46px rgba(37, 50, 75, 0.1);
}
.kangpin-site .kp-matrix-card h3,
.kangpin-site .kp-industry-grid div,
.kangpin-site .kp-partner-cloud span,
.kangpin-site .kp-global-grid span,
.kangpin-site .kp-about-number-grid span,
.kangpin-site .kp-about-metrics span {
color: #25324b;
}
.kangpin-site .kp-global-grid strong,
.kangpin-site .kp-about-number-grid strong,
.kangpin-site .kp-about-metrics strong {
color: #2d3b95;
}
.kangpin-site .kp-matrix-tag,
.kangpin-site .kp-step span,
.kangpin-site .kp-cta-box span {
color: #2d3b95;
background: #eef3ff;
}
.kangpin-site .kp-cta-box {
background: #ffffff;
border: 1px solid #e5e8ef;
box-shadow: 0 18px 48px rgba(37, 50, 75, 0.08);
}
.kp-product-section,
.kp-product-matrix-section,
.kp-quality-section,
.kp-manufacturing-section,
.kp-partner-section {
background: #0d1118;
}
.kp-about-profile-section,
.kp-global-section {
background:
radial-gradient(circle at 84% 18%, rgba(47,140,255,0.14), transparent 30%),
#070707;
}
.kp-product-matrix-section {
overflow: hidden;
}
.kp-product-matrix-section::before {
content: "";
position: absolute;
inset: auto -10% 0 auto;
width: 520px;
height: 520px;
background: radial-gradient(circle, rgba(252,219,102,0.12), transparent 68%);
pointer-events: none;
}
.kp-lead,
.kp-section-note {
color: #c9d0dc;
font-size: 17px;
}
.kp-image-stack {
position: relative;
padding-right: 80px;
}
.kp-image-stack img,
.kp-quality-gallery img {
width: 100%;
object-fit: cover;
border-radius: 8px;
}
.kp-image-stack .main-img {
height: 520px;
}
.kp-image-stack .sub-img {
position: absolute;
right: 0;
bottom: -54px;
width: 260px;
height: 190px;
border: 10px solid #0d1118;
}
.kp-feature-list {
display: grid;
gap: 14px;
margin: 28px 0;
}
.kp-feature-list div {
display: flex;
gap: 12px;
color: #ffffff;
}
.kp-feature-list i {
color: var(--theme-color2);
margin-top: 6px;
}
.kp-about-number-grid,
.kp-about-metrics,
.kp-global-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin-top: 70px;
}
.kp-about-number-grid div,
.kp-about-metrics div,
.kp-global-grid div {
min-height: 150px;
padding: 28px 24px;
border-radius: 8px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
}
.kp-about-number-grid strong,
.kp-about-metrics strong,
.kp-global-grid strong {
display: block;
color: #fcdb66;
font-size: 48px;
line-height: 1;
margin-bottom: 14px;
}
.kp-about-number-grid span,
.kp-about-metrics span,
.kp-global-grid span {
color: #ffffff;
font-weight: 800;
}
.kp-product-card {
position: relative;
display: grid;
grid-template-columns: 220px 1fr;
gap: 28px;
min-height: 390px;
padding: 28px;
border-radius: 8px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
overflow: hidden;
}
.kp-product-card:hover {
transform: translateY(-8px);
border-color: rgba(47,140,255,0.6);
}
.kp-product-card .num {
position: absolute;
right: 24px;
top: 18px;
color: rgba(255,255,255,0.08);
font-size: 88px;
font-weight: 900;
}
.kp-product-card img {
width: 100%;
height: 310px;
object-fit: cover;
border-radius: 8px;
}
.kp-product-card h3 {
color: #ffffff;
margin-top: 30px;
}
.kp-product-card p,
.kp-product-card li {
color: #c8d0dc;
}
.kp-product-card ul {
margin: 18px 0 0;
padding-left: 18px;
}
.kp-card-detail-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
margin-top: 26px;
padding: 0 26px;
border-radius: 999px;
color: #07111f;
font-weight: 900;
background: linear-gradient(135deg, #ffe889 0%, #fcdb66 48%, #3ba0ff 100%);
box-shadow: 0 18px 40px rgba(252,219,102,0.22), 0 10px 28px rgba(47,140,255,0.18);
transition: transform 260ms ease, box-shadow 260ms ease;
}
.kp-product-card:hover .kp-card-detail-btn {
transform: translateY(-3px);
box-shadow: 0 22px 52px rgba(252,219,102,0.32), 0 14px 36px rgba(47,140,255,0.25);
}
.kp-history-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 16px;
margin-top: 44px;
}
.kp-history-grid div {
position: relative;
min-height: 260px;
padding: 30px 24px;
border-radius: 8px;
background:
linear-gradient(180deg, rgba(47,140,255,0.14), rgba(255,255,255,0.04)),
#101722;
border: 1px solid rgba(255,255,255,0.12);
overflow: hidden;
}
.kp-history-grid div::after {
content: "";
position: absolute;
left: 24px;
right: 24px;
bottom: 22px;
height: 2px;
background: linear-gradient(90deg, #fcdb66, transparent);
}
.kp-history-grid strong {
display: block;
color: #ffffff;
font-size: 42px;
line-height: 1;
margin-bottom: 20px;
}
.kp-history-grid span {
color: #c8d0dc;
line-height: 1.7;
}
.kangpin-site .kp-history-mountain {
position: relative;
overflow: hidden;
--kpHistoryBg: url("../fzlc.png");
padding: clamp(54px, 4.2vw, 72px) 0 clamp(52px, 4vw, 70px);
background:
linear-gradient(180deg, #eef6ff 0%, #f8fbff 48%, #eaf4ff 100%) !important;
}
.kangpin-site .kp-history-mountain::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
width: 100vw;
height: clamp(330px, 42vw, 620px);
background-image: url("../fzlc.png");
background-repeat: no-repeat;
background-position: center bottom;
background-size: cover;
opacity: 0.72;
filter: saturate(0.86) contrast(0.92) brightness(1.08);
pointer-events: none;
}
.kangpin-site .kp-history-heading {
position: relative;
z-index: 5;
width: min(1180px, calc(100vw - 48px));
margin: 0 auto;
}
.kangpin-site .kp-history-heading span {
display: block;
color: #0c62bd;
font-size: 16px;
line-height: 1.1;
font-weight: 950;
letter-spacing: 0.04em;
margin-bottom: 6px;
}
.kangpin-site .kp-history-heading h2 {
color: #25324b;
font-size: 18px;
line-height: 1.2;
font-weight: 950;
margin: 0;
}
.kangpin-site .kp-history-heading h2::after {
content: "";
display: block;
width: 42px;
height: 2px;
margin-top: 9px;
background: #0c62bd;
}
.kangpin-site .kp-history-stage {
position: relative;
z-index: 3;
height: clamp(520px, 43vw, 680px);
margin: clamp(24px, 2.4vw, 38px) auto 0;
width: min(1360px, calc(100vw - 48px));
opacity: 0;
transform: translateY(22px);
transition: opacity 420ms ease, transform 420ms ease;
}
.kangpin-site .kp-section-visible .kp-history-stage,
.kangpin-site.kp-section-visible .kp-history-stage {
opacity: 1;
transform: translateY(0);
}
.kangpin-site .kp-history-node {
position: absolute;
left: var(--x);
top: var(--top);
width: clamp(150px, 12vw, 248px);
min-height: 0;
padding: 0 0 0 16px;
color: #25324b;
opacity: 0;
transform: translateY(46px);
animation: kpHistoryRise 1500ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
animation-delay: var(--delay);
animation-play-state: paused;
}
.kangpin-site .kp-section-visible .kp-history-node,
.kangpin-site.kp-section-visible .kp-history-node {
animation-play-state: running;
}
.kangpin-site .kp-history-node::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 2px;
height: var(--line);
background: linear-gradient(180deg, rgba(7, 95, 184, 0.86) 0%, rgba(7, 95, 184, 0.04) 100%);
transform-origin: bottom;
animation: kpHistoryLineRise 1100ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
animation-delay: calc(var(--delay) + 80ms);
animation-play-state: paused;
}
.kangpin-site .kp-section-visible .kp-history-node::before,
.kangpin-site.kp-section-visible .kp-history-node::before {
animation-play-state: running;
}
.kangpin-site .kp-history-node::after {
content: "";
position: absolute;
left: -5px;
top: 2px;
width: 11px;
height: 11px;
border-radius: 50%;
background: #075fb8;
box-shadow: 0 0 0 4px rgba(7, 95, 184, 0.08);
}
.kangpin-site .kp-history-year {
display: block;
color: #075fb8;
font-size: clamp(25px, 2vw, 36px);
line-height: 1;
font-weight: 950;
margin-bottom: 10px;
}
.kangpin-site .kp-history-node p {
color: #5f6b7c;
font-size: clamp(12px, 0.8vw, 14px);
line-height: 1.58;
font-weight: 700;
margin: 0;
}
.kangpin-site .kp-history-range {
position: absolute;
left: 50%;
bottom: 0;
z-index: 4;
color: #075fb8;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(28px, 3.2vw, 54px);
line-height: 1;
font-weight: 950;
font-style: italic;
letter-spacing: 0.08em;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.72);
text-shadow: 0 3px 0 rgba(255, 255, 255, 0.62), 0 8px 18px rgba(7, 95, 184, 0.24);
transform: translateX(-50%);
}
@keyframes kpHistoryRise {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes kpHistoryLineRise {
from {
opacity: 0;
transform: scaleY(0);
}
to {
opacity: 1;
transform: scaleY(1);
}
}
.kangpin-site .kp-honors-showcase {
position: relative;
overflow: hidden;
padding: clamp(32px, 3vw, 48px) 0 clamp(36px, 3vw, 54px);
background: #ffffff !important;
}
.kangpin-site .kp-honors-showcase > .auto-container {
position: relative;
z-index: 1;
}
.kangpin-site .kp-honors-intro {
display: grid;
grid-template-columns: minmax(0, 1.38fr) minmax(180px, 0.52fr) minmax(280px, 0.88fr);
gap: clamp(24px, 3vw, 48px);
align-items: start;
}
.kangpin-site .kp-honors-copy {
display: grid;
gap: clamp(18px, 2vw, 30px);
}
.kangpin-site .kp-honors-group h2,
.kangpin-site .kp-honors-strength h2 {
position: relative;
width: fit-content;
color: #005b9d;
font-size: clamp(24px, 1.85vw, 34px);
line-height: 1.1;
font-weight: 950;
margin: 0 0 clamp(14px, 1.25vw, 20px);
}
.kangpin-site .kp-honors-group h2::after,
.kangpin-site .kp-honors-strength h2::after {
content: "";
position: absolute;
left: 0;
bottom: -7px;
width: clamp(94px, 7vw, 138px);
height: 2px;
background: #005b9d;
}
.kangpin-site .kp-honors-group ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: clamp(22px, 3vw, 58px);
row-gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.kangpin-site .kp-honors-group li {
position: relative;
padding-left: 13px;
color: #31445d;
font-size: clamp(11px, 0.75vw, 14px);
line-height: 1.28;
font-weight: 700;
white-space: nowrap;
}
.kangpin-site .kp-honors-group li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 4px;
height: 4px;
border-radius: 50%;
background: #005b9d;
}
.kangpin-site .kp-honors-impact ul {
row-gap: 6px;
}
.kangpin-site .kp-honors-medal {
display: flex;
align-items: flex-start;
justify-content: center;
min-height: 0;
padding-top: 0;
}
.kangpin-site .kp-honors-medal img {
display: block;
width: min(100%, 206px);
height: auto;
filter: none;
}
.kangpin-site .kp-honors-strength h2 {
margin-bottom: clamp(16px, 1.5vw, 24px);
}
.kangpin-site .kp-honors-strength-list {
display: grid;
gap: clamp(10px, 1vw, 16px);
}
.kangpin-site .kp-honors-strength-list > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: baseline;
padding-bottom: 7px;
border-bottom: 1px solid rgba(0, 91, 157, 0.1);
}
.kangpin-site .kp-honors-strength-list span {
color: #273a52;
font-size: clamp(12px, 0.85vw, 16px);
line-height: 1.2;
font-weight: 800;
white-space: nowrap;
}
.kangpin-site .kp-honors-strength-list strong {
color: #005b9d;
font-size: clamp(28px, 2.4vw, 42px);
line-height: 0.9;
font-weight: 500;
white-space: nowrap;
}
.kangpin-site .kp-honors-strength-list small {
color: #526276;
font-size: 0.44em;
font-weight: 800;
margin-left: 6px;
}
.kangpin-site .kp-honors-strength-list em {
color: #526276;
font-size: 0.42em;
font-style: normal;
font-weight: 800;
margin-left: 6px;
}
.kangpin-site .kp-honors-platforms {
position: relative;
height: clamp(420px, 28vw, 500px);
margin-top: clamp(26px, 2.5vw, 42px);
overflow: hidden;
isolation: isolate;
}
.kangpin-site .kp-honors-platform {
position: absolute;
z-index: -1;
left: -2%;
width: 104%;
height: 30%;
background: linear-gradient(105deg, #e8edf2 0%, #d8e0e8 70%, #f5f8fb 100%);
clip-path: polygon(0 28%, 92% 0, 100% 28%, 100% 100%, 8% 100%, 0 76%);
}
.kangpin-site .kp-honors-platform-1 {
bottom: 0;
opacity: 0.9;
}
.kangpin-site .kp-honors-platform-2 {
bottom: 20%;
width: 94%;
left: 3%;
opacity: 0.76;
}
.kangpin-site .kp-honors-platform-3 {
bottom: 40%;
width: 80%;
left: 10%;
opacity: 0.64;
}
.kangpin-site .kp-honors-platform-4 {
bottom: 60%;
width: 64%;
left: 18%;
opacity: 0.52;
}
.kangpin-site .kp-honor-card {
position: absolute;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
width: clamp(108px, 8vw, 146px);
margin: 0;
opacity: 0;
transform: translateY(56px) scale(0.94);
transition: opacity 720ms ease, transform 720ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kangpin-site .kp-honors-medal.kp-honors-reveal {
opacity: 0;
transform: translateY(42px) scale(0.94);
transition: opacity 720ms ease, transform 720ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kangpin-site .kp-honors-showcase.kp-section-visible .kp-honors-reveal {
opacity: 1;
transform: translateY(0) scale(1);
}
.kangpin-site .kp-honor-card img {
display: block;
width: 100%;
height: clamp(116px, 7.5vw, 150px);
object-fit: contain;
filter: drop-shadow(0 14px 12px rgba(29, 42, 58, 0.2));
}
.kangpin-site .kp-honor-card figcaption {
min-height: 18px;
margin-top: 4px;
color: #586a7d;
font-size: clamp(11px, 0.75vw, 14px);
line-height: 1.2;
font-weight: 800;
text-align: center;
white-space: nowrap;
}
.kangpin-site .kp-honor-card-1 { left: 1%; top: 0; transition-delay: 80ms; }
.kangpin-site .kp-honor-card-2 { left: 25%; top: 2%; transition-delay: 180ms; }
.kangpin-site .kp-honor-card-6 { left: 61%; top: 2%; transition-delay: 280ms; }
.kangpin-site .kp-honor-card-7 { left: 85%; top: 0; transition-delay: 380ms; }
.kangpin-site .kp-honor-card-3 { left: 8%; top: 32%; transition-delay: 480ms; }
.kangpin-site .kp-honor-card-4 { left: 31%; top: 33%; width: clamp(140px, 10vw, 180px); transition-delay: 580ms; }
.kangpin-site .kp-honor-card-5 { left: 57%; top: 33%; width: clamp(140px, 10vw, 180px); transition-delay: 680ms; }
.kangpin-site .kp-honor-card-12 { left: 84%; top: 32%; transition-delay: 780ms; }
.kangpin-site .kp-honor-card-8 { left: 1%; top: 64%; transition-delay: 880ms; }
.kangpin-site .kp-honor-card-9 { left: 25%; top: 64%; transition-delay: 980ms; }
.kangpin-site .kp-honor-card-10 { left: 51%; top: 64%; width: clamp(140px, 10vw, 180px); transition-delay: 1080ms; }
.kangpin-site .kp-honor-card-11 { left: 75%; top: 64%; width: clamp(140px, 10vw, 180px); transition-delay: 1180ms; }
@media only screen and (min-width: 992px) and (max-height: 800px) {
.kangpin-site .kp-honors-showcase {
padding-top: 24px;
padding-bottom: 28px;
}
.kangpin-site .kp-honors-platforms {
height: clamp(340px, 23vw, 420px);
margin-top: 16px;
}
.kangpin-site .kp-honor-card {
width: clamp(96px, 7vw, 132px);
}
.kangpin-site .kp-honor-card img {
height: clamp(92px, 6vw, 112px);
}
.kangpin-site .kp-honor-card figcaption {
min-height: 14px;
margin-top: 2px;
font-size: 10px;
}
.kangpin-site .kp-honor-card-4,
.kangpin-site .kp-honor-card-5,
.kangpin-site .kp-honor-card-10,
.kangpin-site .kp-honor-card-11 {
width: clamp(124px, 8.5vw, 156px);
}
}
@media only screen and (max-width: 991px) {
.kangpin-site .kp-honors-intro {
grid-template-columns: minmax(0, 1fr) minmax(190px, 0.7fr);
gap: 38px;
}
.kangpin-site .kp-honors-medal {
grid-column: 2;
grid-row: 1;
}
.kangpin-site .kp-honors-copy {
grid-row: 1 / span 2;
}
.kangpin-site .kp-honors-strength {
grid-column: 2;
grid-row: 2;
}
.kangpin-site .kp-honors-group ul {
grid-template-columns: 1fr;
}
.kangpin-site .kp-honors-group li {
white-space: normal;
}
.kangpin-site .kp-honors-platforms {
height: 620px;
margin-top: 48px;
}
.kangpin-site .kp-honor-card {
width: clamp(94px, 15vw, 144px);
}
.kangpin-site .kp-honor-card img {
height: 170px;
}
.kangpin-site .kp-honor-card-1 { left: 0; }
.kangpin-site .kp-honor-card-2 { left: 20%; }
.kangpin-site .kp-honor-card-3 { left: 2%; }
.kangpin-site .kp-honor-card-4 { left: 31%; width: 150px; }
.kangpin-site .kp-honor-card-5 { left: 54%; width: 150px; }
.kangpin-site .kp-honor-card-6 { left: 70%; }
.kangpin-site .kp-honor-card-7 { left: 84%; }
.kangpin-site .kp-honor-card-8 { left: 3%; }
.kangpin-site .kp-honor-card-9 { left: 21%; }
.kangpin-site .kp-honor-card-10 { left: 52%; width: 150px; }
.kangpin-site .kp-honor-card-11 { left: 82%; width: 150px; }
.kangpin-site .kp-honor-card-12 { left: 70%; }
}
@media only screen and (max-width: 575px) {
.kangpin-site .kp-honors-intro {
display: flex;
flex-direction: column;
gap: 42px;
}
.kangpin-site .kp-honors-copy,
.kangpin-site .kp-honors-medal,
.kangpin-site .kp-honors-strength {
width: 100%;
}
.kangpin-site .kp-honors-medal {
order: -1;
min-height: 160px;
}
.kangpin-site .kp-honors-medal img {
width: 190px;
}
.kangpin-site .kp-honors-strength-list {
gap: 18px;
}
.kangpin-site .kp-honors-platforms {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
height: auto;
overflow: visible;
gap: 26px 12px;
margin-top: 42px;
}
.kangpin-site .kp-honors-platform {
display: none;
}
.kangpin-site .kp-honor-card,
.kangpin-site .kp-honor-card-1,
.kangpin-site .kp-honor-card-2,
.kangpin-site .kp-honor-card-3,
.kangpin-site .kp-honor-card-4,
.kangpin-site .kp-honor-card-5,
.kangpin-site .kp-honor-card-6,
.kangpin-site .kp-honor-card-7,
.kangpin-site .kp-honor-card-8,
.kangpin-site .kp-honor-card-9,
.kangpin-site .kp-honor-card-10,
.kangpin-site .kp-honor-card-11,
.kangpin-site .kp-honor-card-12 {
position: relative;
left: auto;
right: auto;
top: auto;
bottom: auto;
width: 100%;
}
.kangpin-site .kp-honor-card img {
height: 180px;
}
.kangpin-site .kp-honor-card figcaption {
white-space: normal;
}
}
@media only screen and (max-width: 991px) {
.kangpin-site .kp-history-stage {
height: auto;
width: min(100% - 36px, 700px);
display: grid;
grid-template-columns: 1fr;
gap: 18px;
padding-bottom: 64px;
}
.kangpin-site .kp-history-node {
position: relative;
left: auto;
top: auto;
width: auto;
min-height: 112px;
padding-left: 18px;
}
.kangpin-site .kp-history-node::before {
height: 100%;
}
}
@media only screen and (max-width: 575px) {
.kangpin-site .kp-history-mountain {
padding-top: 56px;
}
.kangpin-site .kp-history-heading {
width: min(100% - 36px, 1180px);
}
.kangpin-site .kp-history-stage {
grid-template-columns: 1fr;
}
.kangpin-site .kp-history-node {
min-height: 122px;
}
.kangpin-site .kp-history-range {
font-size: 26px;
}
}
.kp-matrix-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin-top: 42px;
}
.kp-matrix-card {
min-height: 285px;
padding: 26px 24px;
border-radius: 8px;
background:
linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035)),
#111923;
border: 1px solid rgba(255,255,255,0.12);
transition: transform 300ms ease, border-color 300ms ease, background 300ms ease;
}
.kp-matrix-card:hover {
transform: translateY(-8px);
border-color: rgba(252,219,102,0.5);
background:
linear-gradient(180deg, rgba(47,140,255,0.18), rgba(255,255,255,0.04)),
#111923;
}
.kp-matrix-tag {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 4px 10px;
margin-bottom: 18px;
border-radius: 999px;
color: #0a1320;
background: #fcdb66;
font-size: 12px;
font-weight: 900;
}
.kp-matrix-card h3 {
color: #ffffff;
font-size: 21px;
line-height: 1.3;
margin-bottom: 14px;
}
.kp-matrix-card p {
color: #c8d0dc;
margin: 0;
line-height: 1.7;
}
.kp-industry-grid,
.kp-partner-cloud {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-top: 34px;
}
.kp-industry-grid div,
.kp-partner-cloud span {
padding: 18px 20px;
border-radius: 8px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
color: #ffffff;
font-weight: 700;
}
.kp-quality-gallery {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 16px;
}
.kp-quality-gallery img {
height: 235px;
}
.kp-quality-gallery img:first-child {
grid-row: span 2;
height: 486px;
}
.kp-choose-kangpin {
padding: clamp(68px, 6vw, 104px) 0;
background: #ffffff;
overflow: hidden;
}
.kangpin-site .kp-home-service-merge {
background: #ffffff;
border: 0;
}
.kangpin-site .kp-home-service-merge .kp-quality-section,
.kangpin-site .kp-home-service-merge .kp-service-section {
border-top: 0 !important;
border-bottom: 0 !important;
}
.kp-choose-heading {
margin-bottom: clamp(34px, 4vw, 56px);
}
.kp-choose-heading h2 {
color: #25324b;
font-size: clamp(38px, 3vw, 54px);
line-height: 1.08;
font-weight: 950;
letter-spacing: 0;
margin: 0 0 8px;
}
.kp-choose-heading p {
color: #9ba4b2;
font-size: clamp(14px, 1vw, 18px);
line-height: 1;
font-weight: 900;
letter-spacing: 0.02em;
margin: 0;
text-transform: uppercase;
}
.kp-choose-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(28px, 3.2vw, 58px);
align-items: stretch;
}
.kp-choose-card {
position: relative;
min-height: clamp(250px, 20vw, 330px);
display: grid;
place-items: center;
overflow: hidden;
background: #005b9d;
isolation: isolate;
box-shadow: 0 20px 52px rgba(37, 50, 75, 0.08);
}
.kp-choose-card-rounded {
border-radius: 72px 0 0 0;
}
.kp-choose-card-rounded-right {
border-radius: 0 0 72px 0;
}
.kp-choose-card img {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.02);
transition: transform 420ms ease;
}
.kp-choose-card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(135deg, rgba(43, 50, 140, 0.82), rgba(0, 91, 164, 0.68));
}
.kp-choose-card:nth-child(2)::before {
background: linear-gradient(135deg, rgba(0, 91, 164, 0.78), rgba(0, 126, 194, 0.62));
}
.kp-choose-card:nth-child(3)::before {
background: linear-gradient(135deg, rgba(0, 132, 191, 0.78), rgba(0, 169, 197, 0.62));
}
.kp-choose-card:nth-child(4)::before {
background: linear-gradient(135deg, rgba(0, 151, 171, 0.76), rgba(0, 174, 168, 0.62));
}
.kp-choose-card:hover img {
transform: scale(1.08);
}
.kp-choose-card-no-image {
background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(219,238,255,0.74)), #eef6ff;
border: 1px solid rgba(174, 213, 242, 0.68);
box-shadow: 0 18px 44px rgba(37, 92, 142, 0.12), inset 0 1px 0 rgba(255,255,255,0.9);
backdrop-filter: blur(18px) saturate(1.15);
-webkit-backdrop-filter: blur(18px) saturate(1.15);
}
.kp-choose-card-no-image::before,
.kp-choose-card-no-image:nth-child(2)::before,
.kp-choose-card-no-image:nth-child(3)::before,
.kp-choose-card-no-image:nth-child(4)::before {
background: linear-gradient(145deg, rgba(255,255,255,0.28), rgba(83,160,220,0.08)) !important;
}
.kp-choose-card-no-image .kp-choose-card-content h3 {
color: #145d99;
text-shadow: none;
}
.kp-choose-card-no-image .kp-choose-card-content p {
color: #4d6b83;
text-shadow: none;
}
.kp-choose-card-content {
padding: 28px 24px;
text-align: center;
}
.kp-choose-card-content h3 {
color: #ffffff;
font-size: clamp(28px, 2vw, 42px);
line-height: 1;
font-weight: 950;
margin: 0 0 clamp(28px, 2.4vw, 42px);
text-shadow: 0 8px 20px rgba(0, 37, 86, 0.2);
}
.kp-choose-card-content p {
color: rgba(255, 255, 255, 0.94);
font-size: clamp(17px, 1.2vw, 24px);
line-height: 1.85;
font-weight: 700;
margin: 0;
text-shadow: 0 8px 18px rgba(0, 37, 86, 0.18);
}
html[lang="en"] .kp-choose-card-content p {
font-size: clamp(14px, 0.92vw, 18px);
line-height: 1.6;
}
.kp-step {
min-height: 260px;
padding: 34px 28px;
border-radius: 8px;
background: #101722;
border: 1px solid rgba(255,255,255,0.12);
}
.kp-step span {
color: var(--theme-color2);
font-size: 44px;
font-weight: 900;
}
.kp-step p {
color: #c7cfdb;
}
.kp-customer-service {
overflow: hidden;
padding: clamp(58px, 5vw, 78px) 0;
background: #f3f6fa;
}
.kp-customer-service .sec-title {
margin-bottom: clamp(24px, 2.6vw, 36px);
}
.kp-customer-service .kp-service-heading h2 {
color: #25324b;
font-size: clamp(52px, 4.8vw, 82px);
line-height: 1;
font-weight: 950;
letter-spacing: 0;
margin: 0;
}
.kp-customer-service-grid {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(20px, 2.2vw, 34px);
}
.kp-customer-card {
position: relative;
min-height: clamp(390px, 31vw, 460px);
padding: clamp(32px, 2.7vw, 42px) clamp(24px, 2.2vw, 36px) clamp(28px, 2.5vw, 38px);
background: #ffffff;
border-radius: 68px 0 72px 0;
box-shadow: 0 18px 48px rgba(0, 91, 164, 0.055);
}
.kp-customer-card::after {
content: "";
position: absolute;
right: clamp(-42px, -2.4vw, -22px);
top: 44%;
width: 44px;
height: 44px;
border: solid rgba(0, 91, 164, 0.1);
border-width: 3px 3px 0 0;
transform: translateY(-50%) rotate(45deg);
}
.kp-customer-card:last-child::after {
display: none;
}
.kp-service-index {
position: absolute;
right: clamp(20px, 2.2vw, 36px);
top: clamp(28px, 2.7vw, 44px);
z-index: 0;
color: #eef3f9;
font-size: clamp(70px, 5.6vw, 104px);
line-height: 0.75;
font-weight: 950;
letter-spacing: 0;
pointer-events: none;
}
.kp-service-index .count-text {
color: inherit;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
}
.kp-service-card-head {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 24px;
}
.kp-service-hex {
position: relative;
flex: 0 0 72px;
width: 72px;
height: 82px;
display: grid;
place-items: center;
color: #005b9d;
font-size: 32px;
background: #edf5ff;
clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
box-shadow: inset 0 0 0 3px rgba(0, 91, 164, 0.08);
}
.kp-service-hex::after {
content: "";
position: absolute;
left: 50%;
bottom: -36px;
width: 3px;
height: 36px;
background: #dce9f6;
transform: translateX(-50%);
}
.kp-service-card-head h3 {
position: relative;
z-index: 1;
color: #1f2937;
font-size: clamp(23px, 1.65vw, 31px);
line-height: 1.1;
font-weight: 950;
margin: 0;
}
.kp-service-timeline {
position: relative;
z-index: 1;
display: grid;
gap: clamp(18px, 1.7vw, 26px);
padding-left: 92px;
}
.kp-service-timeline::before {
content: "";
position: absolute;
left: 36px;
top: -2px;
bottom: 6px;
width: 3px;
background: #dce9f6;
}
.kp-service-item {
position: relative;
}
.kp-service-item::before {
content: "";
position: absolute;
left: -62px;
top: 10px;
width: 11px;
height: 11px;
border-radius: 50%;
background: #f05a19;
box-shadow: 0 0 0 5px #fff;
}
.kp-service-item h4 {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 0 22px;
margin: 0 0 10px;
color: #005b9d;
font-size: clamp(17px, 1.05vw, 21px);
line-height: 1;
font-weight: 950;
border-radius: 999px;
background: #edf5fb;
}
.kp-service-item p {
max-width: 280px;
margin: 0;
color: #3f4550;
font-size: 15px;
line-height: 1.62;
font-weight: 700;
}
html[lang="en"] .kp-service-item p {
font-size: 14px;
line-height: 1.56;
}
.kp-service-promise {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 0.42fr 2.4fr;
gap: clamp(20px, 2vw, 36px);
align-items: center;
width: min(1080px, 100%);
margin-top: clamp(20px, 2.2vw, 32px);
padding: clamp(24px, 2.4vw, 34px) clamp(30px, 3.8vw, 58px);
background: #ffffff;
border-radius: 58px 0 62px 0;
box-shadow: 0 18px 48px rgba(0, 91, 164, 0.055);
}
.kp-service-promise h3 {
color: #1f2937;
font-size: clamp(24px, 1.7vw, 32px);
line-height: 1.1;
font-weight: 950;
margin: 0;
}
.kp-service-promise-list {
display: grid;
grid-template-columns: 1.25fr 0.85fr 0.85fr;
gap: clamp(18px, 2vw, 32px);
}
.kp-service-promise-list div {
display: grid;
grid-template-columns: 44px 1fr;
column-gap: 14px;
align-items: start;
}
.kp-service-promise-list i {
grid-row: span 2;
color: #c7d4e4;
font-size: 36px;
line-height: 1;
}
.kp-service-promise-list strong {
display: block;
color: #303642;
font-size: 16px;
line-height: 1.42;
font-weight: 950;
margin-bottom: 8px;
}
.kp-service-promise-list span {
display: block;
color: #4e5562;
font-size: 14px;
line-height: 1.58;
font-weight: 700;
}
.kp-partner-cloud {
grid-template-columns: repeat(5, minmax(0, 1fr));
margin-top: 0;
}
.kp-partner-image {
margin: clamp(28px, 3vw, 44px) 0 clamp(28px, 3vw, 42px);
padding: clamp(14px, 1.4vw, 22px);
border: 1px solid #e5e8ef;
border-radius: 8px;
background: #ffffff;
box-shadow: 0 18px 48px rgba(37, 50, 75, 0.08);
}
.kp-partner-image img {
display: block;
width: 100%;
height: auto;
border-radius: 6px;
}
.kangpin-site .kp-partner-section {
opacity: 0;
transform: translateY(22px);
transition: opacity 420ms ease, transform 420ms ease;
}
.kangpin-site .kp-partner-section.kp-section-visible {
opacity: 1;
transform: translateY(0);
}
.kangpin-site .kp-partner-section {
position: relative;
overflow: hidden;
padding: clamp(82px, 7.4vw, 124px) 0 clamp(88px, 7.8vw, 132px);
background: #ffffff !important;
}
.kangpin-site .kp-partner-heading {
position: relative;
z-index: 2;
text-align: center;
margin-bottom: clamp(54px, 5.6vw, 90px);
}
.kangpin-site .kp-partner-heading h2 {
color: #2a2d34;
font-size: clamp(32px, 3.4vw, 48px);
line-height: 1.15;
font-weight: 950;
margin: 0 0 12px;
}
.kangpin-site .kp-partner-heading p {
color: #d7d9de;
font-size: clamp(18px, 1.65vw, 26px);
line-height: 1;
font-weight: 900;
margin: 0;
}
.kangpin-site .kp-partner-marquee-stage {
position: relative;
z-index: 1;
width: 100vw;
margin-left: calc(50% - 50vw);
padding: 2px 0;
overflow: hidden;
}
.kangpin-site .kp-partner-marquee-stage::before,
.kangpin-site .kp-partner-marquee-stage::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
z-index: 3;
width: clamp(42px, 9vw, 170px);
pointer-events: none;
}
.kangpin-site .kp-partner-marquee-stage::before {
left: 0;
background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0) 100%);
}
.kangpin-site .kp-partner-marquee-stage::after {
right: 0;
background: linear-gradient(270deg, #ffffff 0%, rgba(255,255,255,0) 100%);
}
.kangpin-site .kp-partner-row {
width: 100%;
overflow: hidden;
margin-bottom: clamp(10px, 1vw, 18px);
}
.kangpin-site .kp-partner-row:last-child {
margin-bottom: 0;
}
.kangpin-site .kp-partner-track {
display: flex;
align-items: center;
width: max-content;
gap: clamp(10px, 1vw, 18px);
padding: 0 clamp(10px, 1.4vw, 22px);
will-change: transform;
animation: kpPartnerMarquee 58s linear infinite;
--kpPartnerLoopDistance: 0px;
}
.kangpin-site .kp-partner-section .kp-partner-track {
animation-play-state: paused;
}
.kangpin-site .kp-partner-section.kp-section-visible .kp-partner-track {
animation-play-state: running;
}
.kangpin-site .kp-partner-section .kp-partner-track {
animation-play-state: paused;
}
.kangpin-site .kp-partner-section.kp-section-visible .kp-partner-track {
animation-play-state: running;
}
.kangpin-site .kp-partner-row:nth-child(2) .kp-partner-track {
animation-duration: 64s;
}
.kangpin-site .kp-partner-row:nth-child(3) .kp-partner-track {
animation-duration: 62s;
}
.kangpin-site .kp-partner-row-reverse .kp-partner-track {
animation-direction: reverse;
}
.kangpin-site .kp-partner-card {
flex: 0 0 clamp(190px, 17vw, 300px);
height: clamp(78px, 6.2vw, 126px);
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: clamp(12px, 1.2vw, 20px) clamp(18px, 1.7vw, 30px);
overflow: hidden;
border: 1px solid rgba(222, 226, 235, 0.84);
border-radius: 8px;
background: #ffffff;
box-shadow: 0 24px 46px rgba(36, 45, 62, 0.1);
transform: skewX(-9deg);
}
.kangpin-site .kp-partner-card img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
transform: skewX(9deg);
filter: saturate(1.05);
}
.kangpin-site .kp-partner-track:hover {
animation-play-state: paused;
}
.kangpin-site .kp-business-scope {
position: relative;
overflow: hidden;
padding: clamp(34px, 4vw, 64px) 0 clamp(42px, 5vw, 76px);
background: #ffffff !important;
opacity: 0;
transform: translateY(24px);
transition: opacity 520ms ease, transform 520ms ease;
}
.kangpin-site .kp-business-scope.kp-section-visible {
opacity: 1;
transform: translateY(0);
}
.kangpin-site .kp-business-scope .auto-container {
position: relative;
z-index: 1;
}
.kangpin-site .kp-business-scope img {
display: block;
width: 100%;
max-width: 1844px;
height: auto;
margin: 0 auto;
}
@keyframes kpPartnerMarquee {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(calc(-1 * var(--kpPartnerLoopDistance)), 0, 0);
}
}
.kp-philosophy-list {
display: grid;
gap: 14px;
margin-top: 30px;
}
.kp-philosophy-list div {
padding: 22px 24px;
border-radius: 8px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
}
.kp-philosophy-list strong {
display: block;
color: #fcdb66;
margin-bottom: 8px;
}
.kp-philosophy-list span {
color: #ffffff;
font-weight: 700;
}
.kp-global-grid {
margin-top: 0;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kp-cta-box {
display: flex;
justify-content: space-between;
align-items: center;
gap: 28px;
padding: 54px;
border-radius: 8px;
background: linear-gradient(135deg, #126dcc, #0d1a2b);
}
.kp-cta-box span {
color: #fcdb66;
font-weight: 800;
}
.kp-cta-box h2 {
margin: 8px 0 0;
}
.kp-footer .widgets-section {
padding-top: 90px;
}
.kp-inner-page .main-header .header-lower {
background: rgba(7,10,16,0.86);
}
.kp-page-hero {
position: relative;
padding: 190px 0 105px;
background:
radial-gradient(circle at 78% 40%, rgba(47,140,255,0.28), transparent 30%),
linear-gradient(110deg, #070707, #111820 58%, #2b4b6d);
overflow: hidden;
}
.kp-page-hero::after {
content: "";
position: absolute;
right: 8%;
top: 50%;
width: 280px;
height: 280px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.18);
animation: kpSpin 18s linear infinite;
}
.kp-page-hero .auto-container {
position: relative;
z-index: 1;
}
.kp-page-hero-grid {
display: grid;
grid-template-columns: minmax(0, 0.86fr) minmax(380px, 0.72fr);
gap: 48px;
align-items: center;
}
.kp-page-hero-copy {
position: relative;
z-index: 2;
}
.kp-page-hero h1 {
color: #ffffff;
font-size: clamp(54px, 6vw, 88px);
margin-bottom: 18px;
}
.kp-page-hero p {
max-width: 760px;
color: #d5dce7;
font-size: 18px;
}
.kp-hero-thermal-visual {
position: relative;
z-index: 1;
height: clamp(190px, 24vw, 320px);
margin: -10px min(-13vw, -70px) -18px -20px;
overflow: visible;
cursor: crosshair;
isolation: isolate;
--kpHeatX: 54%;
--kpHeatY: 55%;
--kpHeatSize: 0%;
--kpHeatOpacity: 0;
}
.kp-hero-thermal-visual::before,
.kp-hero-thermal-visual::after {
content: "";
position: absolute;
inset: 18% -4% 15% 2%;
border-radius: 999px;
pointer-events: none;
}
.kp-hero-thermal-visual::before {
z-index: 0;
background:
radial-gradient(circle at var(--kpHeatX) var(--kpHeatY), rgba(255, 87, 45, calc(var(--kpHeatOpacity) * 0.42)), transparent 22%),
linear-gradient(90deg, transparent 8%, rgba(44, 120, 210, 0.18), rgba(255, 80, 48, 0.12), transparent 92%);
filter: blur(20px);
}
.kp-hero-thermal-visual::after {
z-index: 4;
background: radial-gradient(circle at var(--kpHeatX) var(--kpHeatY), transparent 0 18%, rgba(10, 16, 24, calc(var(--kpHeatOpacity) * 0.16)) 34%, transparent 55%);
filter: blur(12px);
opacity: var(--kpHeatOpacity);
}
.kp-hero-thermal-visual img {
position: absolute;
left: -12%;
top: 54%;
width: 134%;
height: auto;
display: block;
transform: translateY(-50%) rotate(-9deg);
transform-origin: 56% 52%;
pointer-events: none;
}
.kp-hero-thermal-visual > img:first-child {
z-index: 1;
filter: drop-shadow(0 28px 38px rgba(0,0,0,0.38));
transition: filter 520ms ease, opacity 520ms ease;
}
.kp-hero-thermal-visual.is-heating > img:first-child {
filter: blur(4px) drop-shadow(0 28px 38px rgba(0,0,0,0.38));
opacity: 0.72;
}
.kp-hero-thermal-visual .kp-thermal-focus,
.kp-hero-thermal-visual .kp-thermal-hot {
-webkit-mask-image: radial-gradient(circle at var(--kpHeatX) var(--kpHeatY), #000 0, #000 calc(var(--kpHeatSize) * 0.42), rgba(0,0,0,0.72) calc(var(--kpHeatSize) * 0.68), transparent var(--kpHeatSize));
mask-image: radial-gradient(circle at var(--kpHeatX) var(--kpHeatY), #000 0, #000 calc(var(--kpHeatSize) * 0.42), rgba(0,0,0,0.72) calc(var(--kpHeatSize) * 0.68), transparent var(--kpHeatSize));
transition: opacity 700ms ease-out, -webkit-mask-image 700ms ease-out, mask-image 700ms ease-out;
will-change: opacity, mask-image;
}
.kp-hero-thermal-visual .kp-thermal-focus {
z-index: 2;
opacity: var(--kpHeatOpacity);
}
.kp-hero-thermal-visual .kp-thermal-hot {
z-index: 3;
opacity: var(--kpHeatOpacity);
mix-blend-mode: screen;
}
.kp-hero-thermal-visual.is-heating .kp-thermal-focus,
.kp-hero-thermal-visual.is-heating .kp-thermal-hot {
transition: none;
}
.kp-timeline {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin-top: 40px;
}
.kp-timeline div {
min-height: 230px;
padding: 28px;
border-radius: 8px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
}
.kp-timeline strong {
display: block;
color: var(--theme-color2);
font-size: 34px;
margin-bottom: 16px;
}
.kp-timeline span {
color: #d0d7e2;
}
.kp-detail-block {
display: grid;
grid-template-columns: 1fr 420px;
gap: 46px;
align-items: center;
margin-bottom: 38px;
padding: 44px;
border-radius: 8px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
}
.kp-detail-block > div > span {
color: var(--theme-color2);
font-weight: 800;
}
.kp-detail-block h2 {
color: #ffffff;
margin-top: 12px;
}
.kp-detail-block p {
color: #c8d0dc;
}
.kp-detail-block img {
width: 100%;
height: 320px;
object-fit: cover;
border-radius: 8px;
}
.kp-product-detail-section {
position: relative;
padding: 120px 0;
background: #0d1118;
overflow: hidden;
}
.kp-product-detail-section::before {
content: "";
position: absolute;
left: -12%;
top: 12%;
width: 520px;
height: 520px;
background: radial-gradient(circle, rgba(47,140,255,0.16), transparent 70%);
pointer-events: none;
}
.kp-detail-hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) 430px;
gap: 54px;
align-items: center;
margin-bottom: 46px;
}
.kp-detail-hero-grid h2 {
color: #ffffff;
margin: 12px 0 18px;
}
.kp-detail-hero-grid p {
color: #c8d0dc;
font-size: 17px;
line-height: 1.75;
}
.kp-detail-hero-grid img {
width: 100%;
height: 420px;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 30px 90px rgba(0,0,0,0.28);
}
.kp-series-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
@keyframes kpFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-22px); }
}
@keyframes kpLogoDrift {
0%, 100% {
transform: translate3d(calc(var(--kpAnchorX) + var(--kpMoveX) - 18px), calc(-50% + var(--kpMoveY)), 0) rotateX(var(--kpTiltX)) rotateY(var(--kpTiltY));
}
50% {
transform: translate3d(calc(var(--kpAnchorX) + var(--kpMoveX) + 18px), calc(-50% + var(--kpMoveY) - 10px), 0) rotateX(var(--kpTiltX)) rotateY(var(--kpTiltY));
}
}
@keyframes kpWordEntrance {
0% {
opacity: 0;
transform: translate3d(120px, 28px, -160px) rotateY(-42deg) rotateX(18deg) scale(0.76);
filter: blur(10px);
}
72% {
opacity: 1;
transform: translate3d(-12px, -4px, 90px) rotateY(-8deg) rotateX(4deg) scale(1.04);
filter: blur(0);
}
100% {
opacity: 1;
transform: translateZ(80px) rotateY(-14deg) rotateX(8deg) scale(1);
filter: blur(0);
}
}
@keyframes kpWordPulse {
0%, 100% {
transform: translateZ(80px) rotateY(-14deg) rotateX(8deg);
text-shadow:
1px 1px 0 #d8eaff,
2px 2px 0 #bad8ff,
3px 3px 0 #8bbcff,
4px 4px 0 #3a8def,
5px 5px 0 #126dcc,
16px 24px 42px rgba(0,0,0,0.48),
0 0 58px rgba(47,140,255,0.38);
}
50% {
transform: translateZ(112px) rotateY(8deg) rotateX(4deg);
text-shadow:
1px 1px 0 #eaf5ff,
2px 2px 0 #d8eaff,
4px 4px 0 #8bbcff,
7px 7px 0 #126dcc,
20px 30px 56px rgba(0,0,0,0.56),
0 0 78px rgba(47,140,255,0.52);
}
}
@keyframes kpHeroTitleReveal {
0% {
opacity: 0;
transform: translate3d(-18px, 34px, 0);
filter: blur(12px);
}
64% {
opacity: 1;
transform: translate3d(0, -4px, 0);
filter: blur(0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
filter: blur(0);
}
}
@keyframes kpHeroSoftReveal {
0% {
opacity: 0;
color: rgba(0, 91, 157, 0.18);
transform: translate3d(0, 18px, 0);
filter: blur(8px);
}
100% {
opacity: 1;
color: #005b9d;
transform: translate3d(0, 0, 0);
filter: blur(0);
}
}
@keyframes kpHeroSoftRevealText {
0% {
opacity: 0;
color: rgba(95, 107, 124, 0.34);
transform: translate3d(0, 12px, 0);
filter: blur(5px);
}
100% {
opacity: 1;
color: #5f6b7c;
transform: translate3d(0, 0, 0);
filter: blur(0);
}
}
@keyframes kpDotCReveal {
0% {
opacity: 0;
transform: translate3d(26px, -12px, 0) scale(0.15);
filter: blur(5px);
}
55% {
opacity: 1;
transform: translate3d(-3px, 2px, 0) scale(1.12);
filter: blur(0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
filter: blur(0);
}
}
@keyframes kpDotCBreathe {
0%, 100% {
opacity: 0.88;
}
50% {
opacity: 1;
}
}
@keyframes kpDotCFloat {
0%, 100% {
transform: translate3d(0, 0, 0) rotateZ(0deg);
}
50% {
transform: translate3d(-8px, 12px, 0) rotateZ(1.3deg);
}
}
@keyframes kpSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.kangpin-site .preloader:after {
width: 180px;
height: 58px;
margin-left: -90px;
margin-top: -54px;
background-image: url(../hero-img.png);
background-size: contain;
}
.kangpin-site .preloader:before {
content: "Jiangsu Kangpin";
margin-top: 20px;
color: #ffffff;
letter-spacing: 0;
}
.kangpin-site .header-btn a,
.kangpin-site .nexella-buton a,
.kangpin-site .theme-btn {
letter-spacing: 0;
}
.kangpin-site .kangpin-hero {
min-height: 900px;
overflow: hidden;
}
.kangpin-site .kangpin-hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 75% 35%, rgba(47, 140, 255, 0.22), transparent 28%),
linear-gradient(90deg, rgba(7, 7, 7, 0.98) 0%, rgba(7, 7, 7, 0.78) 52%, rgba(7, 7, 7, 0.45) 100%);
z-index: 0;
pointer-events: none;
}
.kangpin-site .kangpin-hero .container-fluid,
.kangpin-site .kangpin-hero .banner_icon-bx,
.kangpin-site .kangpin-hero .email-link,
.kangpin-site .kangpin-hero .hero-img {
position: relative;
z-index: 1;
}
.kangpin-site .hero-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 24px;
color: #ffffff;
font-weight: 700;
letter-spacing: 0;
}
.kangpin-site .hero-kicker::before {
content: "";
width: 42px;
height: 2px;
background: var(--theme-color2);
}
.kangpin-site .banner-section .content-box .title {
color: #ffffff;
text-shadow: 0 12px 35px rgba(0, 0, 0, 0.28);
animation: none;
}
.kangpin-site .banner-section .content-box .title span {
color: var(--theme-color2);
}
.kangpin-site .hero-summary {
max-width: 680px;
margin-top: 24px;
color: #d8deea;
font-size: 18px;
}
.kangpin-site .hero-actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 34px;
}
.kangpin-site .hero-img {
right: 4%;
bottom: 120px;
width: min(45vw, 760px);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
}
.kangpin-site .hero-img img {
width: 100%;
min-height: 420px;
object-fit: cover;
}
.kangpin-site .banner_icon-bx {
max-width: 450px;
}
.kangpin-site .banner_icon-bx .banner-text p {
color: #f0f4fb;
}
.kangpin-site .marquee-section .text {
color: #ffffff;
font-weight: 800;
}
.kangpin-site .about-section .image-1 img {
min-height: 610px;
width: 100%;
object-fit: cover;
}
.kangpin-site .about-content p {
max-width: 560px;
}
.kangpin-site .stats-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 30px;
}
.kangpin-site .stats-grid div {
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
border-radius: 8px;
padding: 18px 20px;
}
.kangpin-site .stats-grid strong {
display: block;
color: #ffffff;
font-size: 34px;
line-height: 1.1;
font-family: var(--title-font);
}
.kangpin-site .stats-grid span {
display: block;
margin-top: 7px;
color: #bfc5d1;
}
.kangpin-site .product-section .sec-title {
margin-bottom: 40px;
}
.kangpin-site .product-card .work-content {
width: 52%;
}
.kangpin-site .product-card .work-img {
width: 42%;
}
.kangpin-site .product-card .work-img img {
height: 360px;
width: 100%;
object-fit: cover;
border-radius: 8px;
}
.kangpin-site .product-list {
margin: 22px 0 0;
padding: 0;
list-style: none;
}
.kangpin-site .product-list li {
position: relative;
margin-bottom: 8px;
padding-left: 24px;
color: #d3d8e3;
}
.kangpin-site .product-list li::before {
content: "\f00c";
position: absolute;
left: 0;
top: 1px;
color: var(--theme-color2);
font-family: "Font Awesome 6 Free";
font-weight: 900;
}
.kangpin-site .manufacturing-section {
background-size: cover;
background-position: center;
position: relative;
}
.kangpin-site .manufacturing-section::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(7, 7, 7, 0.93), rgba(7, 7, 7, 0.72));
}
.kangpin-site .manufacturing-section .auto-container {
position: relative;
z-index: 1;
}
.kangpin-site .manufacturing-gallery {
display: grid;
gap: 14px;
}
.kangpin-site .manufacturing-gallery img {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.16);
}
.kangpin-site .process-section .process-single-box {
min-height: 250px;
}
.kangpin-site .contact-section .contact-info h4 {
word-break: break-word;
}
.kangpin-site .main-footer .footer-icon img {
max-width: 180px;
height: auto;
}
:root {
--theme-color-white: #ffffff;
--theme-color-white-rgb: 255, 255, 255;
--theme-color-light: #070707;
--theme-color-gray: #282828;
--theme-color-black: #000000;
--theme-color-black-rgb: 0, 0, 0;
--theme-color1: #1C1C1C;
--theme-color1-rgb: 34, 36, 41;
--theme-color2: #FCDB66;
--theme-color2-rgb: 255, 170, 23;
--theme-color3: #f4f5f8;
--theme-color4: #0f0f0f;
--theme-color5: #FFFFFF1A;
--theme-color6: #070707;
--theme-color7: #2B2B2B;
--theme-color8: #B9BABA;
--theme-color9: #111111;
--bg-theme-color1: var(--theme-color1);
--bg-theme-color2: var(--theme-color2);
--bg-theme-color3: var(--theme-color3);
--border-theme-color1: var(--theme-color5);
--border-theme-color2: var(--theme-color6);
--text-color-bg-theme-color1: #fff;
--text-color-bg-theme-color2: #0f0f0f;
--text-color-bg-theme-color3: #fff;
--gradient-1: linear-gradient(180deg, #0C0C0C 1.56%, #1C1C1C 100%);
--gradient-2: linear-gradient(to left, rgba(var(--theme-color2-rgb), 1) 0%, rgba(var(--theme-color2-rgb), 0.7) 100%);
--gradient-3: linear-gradient(-135deg, rgba(23, 23, 23, 0) 50%, var(--theme-color2) 100%);
--gradient-4: linear-gradient(215deg, rgb(252 219 102 / 83%) 3.09%, rgb(6, 6, 6) 33.06%, rgb(255 255 255 / 21%) 63.59%, rgb(252 219 102) 100.63%);
--text-color: #A1A1A1;
--headings-color: #fff;
--headings-color-2: #000000;
--link-color: #352f27;
--link-hover-color: #5b8c51;
--title-font: "Plus Jakarta Sans", sans-serif;
--text-font: "Noto Sans", sans-serif;
--body-font-size: 16px;
--body-line-height: 1.8;
--body-font-weight: 400;
--line-height-heading-h1: 1.2em;
--line-height-heading: 1.2em;
--line-height-heading-small: 1.4em;
--h1-font-size: 46px;
--h2-font-size: 46px;
--h3-font-size: 34px;
--h4-font-size: 30px;
--h5-font-size: 18px;
--h6-font-size: 14px;
--h1-font-weight: 700;
--h2-font-weight: 700;
--h3-font-weight: 600;
--h4-font-weight: 600;
--h5-font-weight: 500;
--h6-font-weight: 600;
--sec-title-subtitle-color: var(--theme-color-white);
--sec-title-subtitle-font-size: 18px;
--sec-title-subtitle-font-family: var(--title-font);
--sec-title-subtitle-font-weight: 500;
--sec-title-subtitle-line-height: 1.2em;
--sec-title-color: var(--headings-color);
--sec-title-font-size: 46px;
--sec-title-font-family: var(--title-font);
--sec-title-font-weight: var(--h2-font-weight);
--theme-light-background: #f8f6f1;
--theme-light-background-text-color: var(--headings-color);
--theme-black: #222429;
--container-width: 1350px;
--small-container-width: 1000px;
--large-container-width: 1550px;
--container-pt: 120px;
--container-pb: 120px;
}
/*
* typography.scss
* -----------------------------------------------
*/
::selection {
background: var(--theme-color1);
color: #fff;
text-shadow: none;
}
::-moz-selection {
background: var(--theme-color1); /* Firefox */
color: #fff;
text-shadow: none;
}
::-webkit-selection {
background: var(--theme-color1); /* Safari */
color: #fff;
text-shadow: none;
}
:active,
:focus {
outline: none !important;
}
::-webkit-input-placeholder {
color: #7c858c;
}
::-moz-input-placeholder {
color: #7c858c;
}
::-ms-input-placeholder {
color: #7c858c;
}
body {
background-color: #070707;
background-attachment: fixed;
-ms-word-wrap: break-word;
word-wrap: break-word;
counter-reset: my-sec-counter;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
color: var(--text-color);
font-size: var(--body-font-size);
font-family: var(--text-font);
font-weight: var(--body-font-weight);
line-height: var(--body-line-height);
}
p, .text {
color: var(--text-color);
font-size: var(--body-font-size);
font-family: var(--text-font);
font-weight: var(--body-font-weight);
line-height: var(--body-line-height);
}
/* -------- Headings ---------- */
h1, h2, h3, h4, h5, h6 {
color: var(--headings-color);
font-family: var(--title-font);
position: relative;
line-height: var(--line-height-heading-);
}
h1 small,
h1 .small, h2 small,
h2 .small, h3 small,
h3 .small, h4 small,
h4 .small, h5 small,
h5 .small, h6 small,
h6 .small {
font-weight: normal;
line-height: 1;
color: var(--headings-color);
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: inherit;
font-weight: inherit;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: 1rem;
}
h1 {
font-size: var(--h1-font-size);
font-weight: var(--h1-font-weight);
line-height: var(--line-height-heading-h1);
}
h2 {
font-size: var(--h2-font-size);
font-weight: var(--h2-font-weight);
line-height: var(--line-height-heading);
}
h3 {
font-size: var(--h3-font-size);
font-weight: var(--h3-font-weight);
line-height: var(--line-height-heading);
}
h4 {
font-size: var(--h4-font-size);
font-weight: var(--h4-font-weight);
line-height: var(--line-height-heading-small);
}
h5 {
font-size: var(--h5-font-size);
font-weight: var(--h5-font-weight);
line-height: var(--line-height-heading-small);
}
h6 {
font-size: var(--h6-font-size);
font-weight: var(--h6-font-weight);
line-height: var(--line-height-heading-small);
}
/* -------- Body Text ---------- */
table p {
margin-bottom: 0;
}
p {
margin-bottom: 20px;
}
p a:not(.button):not(.btn):hover, p a:not(.button):not(.btn):focus {
text-decoration: underline;
}
/* -------- other ---------- */
a {
color: var(--link-color);
text-decoration: none;
font-weight: var(--body-font-weight);
cursor: pointer;
transition: all 0.3s ease;
}
a:hover, a:focus {
color: inherit;
text-decoration: none;
outline: none;
}
a b, a strong {
transition: all 0.3s ease;
}
a img {
border: none;
}
pre,
ul,
ol,
dl,
dd,
blockquote,
address,
table,
fieldset {
margin-bottom: 10px;
}
ol, ul {
list-style-position: inside;
margin: 0;
padding: 0;
}
b, strong {
color: #333;
font-weight: var(--body-font-weight-bold);
}
iframe {
border: none !important;
}
/*
* container.scss
* -----------------------------------------------
*/
.container .container {
width: 100%;
}
.container .container,
.container .container-fluid,
.container-fluid .container,
.container-fluid .container-fluid {
padding-left: 0;
padding-right: 0;
}
section > .container,
section > .container-fluid {
padding-top: var(--container-pt);
padding-bottom: var(--container-pt);
}
@media (min-width: 1400px) {
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
max-width: var(--container-width);
}
}
/*=== Default Form ===*/
.form-control, .input-text {
height: calc(2.25rem + 27px);
padding: 14px 30px;
outline: 0;
background-color: #f4f5f8;
border: 1px solid #f4f5f8;
color: #686a6f;
font-size: 0.9rem;
width: 100%;
}
.form-control::placeholder, .input-text::placeholder {
color: #686a6f;
opacity: 1;
}
.form-control:-ms-input-placeholder, .input-text:-ms-input-placeholder {
color: #686a6f;
}
.form-control::-ms-input-placeholder, .input-text::-ms-input-placeholder {
color: #686a6f;
}
textarea.form-control {
height: auto;
padding-top: 15px;
padding-bottom: 15px;
}
.tm-pricing-smart-switcher {
color: var(--heading-color);
font-size: 19px;
letter-spacing: -0.2px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 55px;
}
.tm-pricing-smart-switcher .price-offer {
color: var(--text-color-bg-theme-color2);
background-color: #333;
font-size: 12px;
line-height: inherit;
padding: 0.5px 12px;
border-radius: 30px;
margin-left: 15px;
text-transform: uppercase;
}
.tm-pricing-smart-switcher .pricing-switcher-btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.tm-pricing-smart-switcher .pricing-switcher-btn .btn-toggle {
width: 70px;
height: 33px;
border-radius: 17px;
background-color: rgba(22, 28, 45, 0.15);
position: relative;
display: inline-block;
margin: 0 1rem;
}
.tm-pricing-smart-switcher .pricing-switcher-btn .btn-toggle.secondary-active {
background-color: var(--theme-color1);
}
.tm-pricing-smart-switcher .pricing-switcher-btn .btn-toggle.secondary-active span {
right: 7px;
}
.tm-pricing-smart-switcher .pricing-switcher-btn .btn-toggle span {
width: 20px;
height: 20px;
background-color: #ffffff;
position: absolute;
right: calc(100% - 27px);
margin-left: 6px;
top: 50%;
-webkit-transform: translatey(-50%);
transform: translatey(-50%);
-webkit-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
border-radius: 500px;
pointer-events: none;
}
.tm-pricing-smart-switcher-button .switch-buttons {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
border: 0;
}
.tm-pricing-smart-switcher-button .switch-buttons li {
display: inline-block;
margin-bottom: 0;
}
.tm-pricing-smart-switcher-button .switch-buttons li a {
display: block;
border: 1px solid #eee;
outline: none;
display: inline-block;
padding: 0.9375rem 2.1875rem;
cursor: pointer;
border-radius: 0;
transition: all 0.4s ease;
background-color: rgb(254, 253, 254);
box-shadow: 0px 15px 30px 0px rgba(119, 123, 146, 0.1);
}
.tm-pricing-smart-switcher-button .switch-buttons li a:hover, .tm-pricing-smart-switcher-button .switch-buttons li a.active {
color: var(--text-color-bg-theme-color2);
border-color: var(--theme-color2);
background-color: var(--theme-color2);
}
.tm-pricing-smart-switcher-button .switch-buttons li a span.price-offer {
color: #fff;
background-color: #333;
font-size: 12px;
line-height: inherit;
padding: 0.5px 12px;
border-radius: 30px;
margin-left: 15px;
text-transform: uppercase;
}
.tm-pricing-smart-switcher-button .switch-buttons li:first-child a {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.tm-pricing-smart-switcher-button .switch-buttons li:last-child a {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.tm-switch-buttons-round-yes .tm-pricing-smart-switcher-button .switch-buttons li:first-child a {
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
.tm-switch-buttons-round-yes .tm-pricing-smart-switcher-button .switch-buttons li:last-child a {
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
.tm-pricing-smart-switcher-button.round-switch-btn .switch-buttons li:first-child a {
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
.tm-pricing-smart-switcher-button.round-switch-btn .switch-buttons li:last-child a {
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
.tm-pricing-plan-switcher {
color: var(--heading-color);
letter-spacing: -0.2px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 55px;
}
.tm-pricing-plan-switcher .price-offer {
color: var(--text-color-bg-theme-color1);
background-color: var(--theme-color1);
font-size: 12px;
line-height: inherit;
padding: 0.5px 12px;
border-radius: 30px;
margin-left: 15px;
text-transform: uppercase;
}
.tm-pricing-plan-switcher .pricing-switcher-btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.tm-pricing-plan-switcher .pricing-switcher-btn .btn-toggle {
width: 70px;
height: 33px;
border-radius: 17px;
background-color: rgba(22, 28, 45, 0.15);
position: relative;
display: inline-block;
margin: 0 1rem;
}
.tm-pricing-plan-switcher .pricing-switcher-btn .btn-toggle.secondary-active {
background-color: var(--theme-color2);
}
.tm-pricing-plan-switcher .pricing-switcher-btn .btn-toggle.secondary-active span {
right: 7px;
background-color: var(--text-color-bg-theme-color2);
}
.tm-pricing-plan-switcher .pricing-switcher-btn .btn-toggle span {
width: 20px;
height: 20px;
background-color: #ffffff;
position: absolute;
right: calc(100% - 27px);
margin-left: 6px;
top: 50%;
-webkit-transform: translatey(-50%);
transform: translatey(-50%);
-webkit-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
border-radius: 500px;
pointer-events: none;
}
.tm-pricing-table .price-secondary {
display: none !important;
}
.tm-pricing-table.show-secondary-price .price-normal {
display: none;
}
.tm-pricing-table.show-secondary-price .price-secondary {
display: flex !important;
}
/*
* boxed-layout.scss
* -----------------------------------------------
*/
.tm-boxed-layout {
background-color: #444;
padding-top: 40px;
padding-bottom: 40px;
padding-left: 15px;
padding-right: 15px;
}
.tm-boxed-layout.layer-overlay:before {
z-index: -1;
}
.tm-boxed-layout .page-wrapper {
margin: 0 auto;
overflow: hidden;
}
@media (min-width: 1200px) {
.tm-boxed-layout .page-wrapper {
width: 1170px;
}
}
.tm-boxed-layout .container .container {
width: 100%;
}
@media (min-width: 1200px) {
.tm-boxed-layout .container {
width: 1140px;
}
}
@media (min-width: 1000px) {
.tm-boxed-layout.tm-container-970px .page-wrapper {
width: 970px;
}
}
.tm-boxed-layout.tm-container-970px .container,
.tm-boxed-layout.tm-container-970px .container-fluid {
padding-left: 20px;
padding-right: 20px;
}
.tm-boxed-layout.tm-container-970px .container .container,
.tm-boxed-layout.tm-container-970px .container .container-fluid,
.tm-boxed-layout.tm-container-970px .container-fluid .container,
.tm-boxed-layout.tm-container-970px .container-fluid .container-fluid {
padding-left: 0;
padding-right: 0;
}
@media (min-width: 1300px) {
.tm-boxed-layout.tm-container-1230px .page-wrapper {
width: 1230px;
}
}
.tm-boxed-layout.tm-container-1230px .container,
.tm-boxed-layout.tm-container-1230px .container-fluid {
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
.tm-boxed-layout.tm-container-1230px .container .container,
.tm-boxed-layout.tm-container-1230px .container .container-fluid,
.tm-boxed-layout.tm-container-1230px .container-fluid .container,
.tm-boxed-layout.tm-container-1230px .container-fluid .container-fluid {
padding-left: 0;
padding-right: 0;
}
@media (min-width: 1400px) {
.tm-boxed-layout.tm-container-1300px .page-wrapper {
width: 1300px;
}
}
.tm-boxed-layout.tm-container-1300px .container,
.tm-boxed-layout.tm-container-1300px .container-fluid {
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
.tm-boxed-layout.tm-container-1300px .container .container,
.tm-boxed-layout.tm-container-1300px .container .container-fluid,
.tm-boxed-layout.tm-container-1300px .container-fluid .container,
.tm-boxed-layout.tm-container-1300px .container-fluid .container-fluid {
padding-left: 0;
padding-right: 0;
}
@media (min-width: 1400px) {
.tm-boxed-layout.tm-container-1340px .page-wrapper {
width: 1340px;
}
}
.tm-boxed-layout.tm-container-1340px .container,
.tm-boxed-layout.tm-container-1340px .container-fluid {
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
.tm-boxed-layout.tm-container-1340px .container .container,
.tm-boxed-layout.tm-container-1340px .container .container-fluid,
.tm-boxed-layout.tm-container-1340px .container-fluid .container,
.tm-boxed-layout.tm-container-1340px .container-fluid .container-fluid {
padding-left: 0;
padding-right: 0;
}
@media (min-width: 1400px) {
.tm-boxed-layout.tm-container-1440px .page-wrapper {
width: 1440px;
}
}
.tm-boxed-layout.tm-container-1440px .container,
.tm-boxed-layout.tm-container-1440px .container-fluid {
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
.tm-boxed-layout.tm-container-1440px .container .container,
.tm-boxed-layout.tm-container-1440px .container .container-fluid,
.tm-boxed-layout.tm-container-1440px .container-fluid .container,
.tm-boxed-layout.tm-container-1440px .container-fluid .container-fluid {
padding-left: 0;
padding-right: 0;
}
@media (min-width: 1560px) {
.tm-boxed-layout.tm-container-1500px .page-wrapper {
width: 1500px;
}
}
.tm-boxed-layout.tm-container-1500px .container,
.tm-boxed-layout.tm-container-1500px .container-fluid {
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
.tm-boxed-layout.tm-container-1500px .container .container,
.tm-boxed-layout.tm-container-1500px .container .container-fluid,
.tm-boxed-layout.tm-container-1500px .container-fluid .container,
.tm-boxed-layout.tm-container-1500px .container-fluid .container-fluid {
padding-left: 0;
padding-right: 0;
}
@media (min-width: 1660px) {
.tm-boxed-layout.tm-container-1600px .page-wrapper {
width: 1600px;
}
}
.tm-boxed-layout.tm-container-1600px .container,
.tm-boxed-layout.tm-container-1600px .container-fluid {
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
.tm-boxed-layout.tm-container-1600px .container .container,
.tm-boxed-layout.tm-container-1600px .container .container-fluid,
.tm-boxed-layout.tm-container-1600px .container-fluid .container,
.tm-boxed-layout.tm-container-1600px .container-fluid .container-fluid {
padding-left: 0;
padding-right: 0;
}
.tm-boxed-layout.tm-container-100pr .page-wrapper {
width: 95%;
}
.tm-boxed-layout.tm-container-100pr .page-wrapper .container,
.tm-boxed-layout.tm-container-100pr .page-wrapper .container-fluid {
width: 100%;
}
.tm-boxed-layout.container-shadow .page-wrapper {
box-shadow: 0 0 25px 0 #777;
}
.tm-boxed-layout .header,
.tm-boxed-layout section,
.tm-boxed-layout .footer {
background-color: #fff;
}
.tm-boxed-layout .header .navbar-default {
background-color: #fff;
border-color: #fff;
padding: 0;
}
.tm-boxed-layout .header .navbar-default .navbar-nav > li > a {
padding: 30px 5px;
}
.tm-boxed-layout .header .navbar-default .navbar-collapse {
background-color: #fff;
border-color: #fff;
margin-right: 30px;
}
.tm-boxed-layout .header #header-logo {
margin: 0;
padding-top: 27px;
}
.tm-boxed-layout .banner-section .slide-item {
min-height: 540px;
}
.tm-boxed-layout .banner-section .slide-item .content-box {
padding: 150px 0 220px;
}
.tm-boxed-layout .banner-section-two .content-box {
padding: 250px 0 150px;
}
.tm-boxed-layout .banner-section-three .content-box {
padding: 250px 0 150px;
}
.tm-boxed-layout .banner-section-four .content-box {
padding: 130px 0;
}
@media (max-width: 1200px) {
.tm-boxed-layout {
padding-top: 15px;
}
.tm-boxed-layout .header .navbar-default .navbar-nav > li > a {
padding: 10px;
}
.tm-boxed-layout .header .navbar-default .navbar-collapse {
margin-right: 15px;
}
.tm-boxed-layout .navbar-header {
padding: 15px 0;
}
.tm-boxed-layout .navbar-collapse .navbar-nav li a .caret {
margin-right: 0;
}
}
@property --gradient-angle {
syntax: "";
initial-value: 90deg;
inherits: false;
}
/***
====================================================================
Reset
====================================================================
***/
* {
margin: 0px;
padding: 0px;
border: none;
outline: none;
font-size: 100%;
}
/***
====================================================================
Global Settings
====================================================================
***/
textarea {
overflow: hidden;
resize: none;
}
button {
outline: none !important;
cursor: pointer;
}
img {
display: inline-block;
max-width: 100%;
height: auto;
}
ul,
li {
list-style: none;
padding: 0px;
margin: 0px;
}
.title a {
color: inherit;
}
.color1 {
color: var(--theme-color1);
}
.color2 {
color: var(--theme-color2);
}
.color3 {
color: var(--theme-color3);
}
.bg-color3 {
background-color: var(--theme-color3) !important;
}
.page-wrapper {
position: relative;
margin: 0 auto;
width: 100%;
min-width: 300px;
overflow: hidden;
z-index: 99;
background-color: #ffffff;
}
.large-container {
position: static;
max-width: var(--large-container-width);
padding: 0px 15px;
margin: 0 auto;
width: 100%;
}
.auto-container {
position: static;
max-width: var(--container-width);
padding: 0px 15px;
margin: 0 auto;
width: 100%;
}
.small-container {
position: static;
max-width: var(--small-container-width);
padding: 0px 15px;
margin: 0 auto;
width: 100%;
}
.pull-right {
float: right;
}
.pull-left {
float: left;
}
.dropdown-toggle::after {
display: none;
}
/*=======================
Preloader
=======================*/
.preloader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 999999;
background-color: var(--theme-color4);
}
.preloader:after {
position: absolute;
left: 50%;
top: 50%;
height: 100px;
width: 100px;
margin-left: -50px;
margin-top: -60px;
background-position: center center;
background-repeat: no-repeat;
background-image: url(../images/logo.png);
background-size: 84px;
content: "";
}
.preloader:before {
position: absolute;
top: 50%;
left: 0;
right: 0;
width: 100%;
text-align: center;
margin: 0 auto;
margin-top: 20px;
color: var(--theme-color1);
font-weight: 700;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
transition: none;
}
/*=======================
Scroll To Top style
=======================*/
.scroll-to-top {
position: fixed;
right: 20px;
bottom: 20px;
width: 40px;
font-size: 16px;
line-height: 40px;
color: #ffffff;
text-align: center;
cursor: pointer;
background-color: var(--theme-color2);
z-index: 100;
display: none;
border-radius: 50%;
margin: 0 auto;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-webkit-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.scroll-to-top:hover {
background: var(--theme-color1);
color: #ffffff;
}
/*=== List Style One ===*/
.list-style-one {
position: relative;
display: flex;
padding: 10px 0;
}
.list-style-one li {
position: relative;
font-size: 13px;
line-height: 20px;
font-weight: 400;
color: #808287;
margin-right: 20px;
display: flex;
align-items: center;
}
.list-style-one li i {
margin-right: 10px;
color: var(--theme-color2);
font-size: 14px;
line-height: 20px;
}
.list-style-one li a {
display: inline-block;
color: #808287;
transition: all 300ms ease;
}
.list-style-one li a:hover {
color: var(--theme-color1);
}
/*=== List Style Two ===*/
.list-style-two {
position: relative;
}
.list-style-two li {
position: relative;
font-size: 18px;
line-height: 30px;
font-weight: 500;
color: #ffffff;
padding-left: 30px;
margin-bottom: 5px;
}
.list-style-two li i {
position: absolute;
left: 0;
top: 0;
color: var(--theme-color2);
font-size: 18px;
line-height: 30px;
}
.list-style-two li a {
display: inline-block;
color: #ffffff;
transition: all 300ms ease;
}
.list-style-two li a:hover {
color: #ffffff;
}
/*=== List Style Three ===*/
.list-style-three {
position: relative;
}
.list-style-three li {
position: relative;
font-size: 16px;
line-height: 26px;
font-weight: 500;
color: var(--theme-color1);
padding-left: 25px;
margin-bottom: 10px;
}
.list-style-three li:before {
position: absolute;
left: 0;
top: 0;
content: "\f058";
font-weight: 900;
font-family: "Font Awesome 5 Free";
color: var(--theme-color2);
}
.list-style-three li a {
display: inline-block;
color: #ffffff;
transition: all 300ms ease;
}
.list-style-three li a:hover {
color: #ffffff;
}
/*Social Icon One*/
.social-icon-one {
position: relative;
display: flex;
flex-wrap: wrap;
}
.social-icon-one li {
position: relative;
margin-left: 27px;
}
.social-icon-one li:first-child {
margin-left: 0;
}
.social-icon-one li a {
position: relative;
display: block;
line-height: 40px;
height: 40px;
text-align: center;
font-size: 14px;
color: var(--theme-color1);
transition: all 300ms ease;
}
.social-icon-one li a:hover {
color: var(--theme-color2);
}
/*Social Icon Two*/
.social-icon-two li {
position: relative;
display: inline-block;
margin-right: 8px;
}
.social-icon-two li a {
position: relative;
display: inline-block;
line-height: 42px;
height: 42px;
width: 42px;
border-radius: 50%;
text-align: center;
font-size: 14px;
color: #ffffff;
transition: all 300ms ease;
background: rgb(43, 43, 43);
}
.social-icon-two li a:hover {
color: var(--theme-color1);
background-color: var(--bg-theme-color2);
}
/*Social Icon Three*/
.social-icon-three {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.social-icon-three li {
position: relative;
margin-left: 20px;
}
.social-icon-three li a {
position: relative;
display: block;
line-height: 40px;
text-align: center;
font-size: 15px;
color: #2f3529;
border-radius: 50%;
-webkit-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.social-icon-three li a:hover {
color: var(--theme-color2);
}
/*======================
Tabs Box
======================*/
.tabs-box {
position: relative;
}
.tabs-box .tab {
display: none;
}
.tabs-box .active-tab {
display: block;
}
.styled-pagination {
position: relative;
margin: 0 auto;
width: 100%;
margin-top: 60px;
border-radius: 10px;
background-color: #f4f2f9;
}
.styled-pagination .swiper-pagination-progressbar-fill {
background: var(--bg-theme-color2);
}
.styled-pagination .swiper-pagination-progressbar-fill::before {
position: absolute;
top: -7px;
right: 0;
height: 17px;
width: 17px;
background-color: var(--bg-theme-color2);
border-radius: 50%;
content: "";
transform: none;
display: none;
}
/*======================
Owl Nav
======================*/
.default-navs .owl-nav {
display: flex;
align-items: center;
}
.default-navs .owl-next,
.default-navs .owl-prev {
display: block;
margin: 0px 5px;
height: 54px;
width: 54px;
color: var(--theme-color2);
background-color: var(--theme-color4);
border-radius: 50%;
font-size: 16px;
line-height: 54px;
font-weight: 700;
text-align: center;
transition: all 500ms ease;
}
.default-navs .owl-next:hover,
.default-navs .owl-prev:hover {
background: var(--theme-color2);
color: var(--theme-color2);
}
/*======================
Media Play Button
======================*/
.play-now {
position: relative;
display: block;
z-index: 9;
transition: all 300ms ease;
height: 120px;
width: 120px;
}
.play-now:before {
position: absolute;
content: "";
left: -35px;
margin: auto;
top: -35px;
backdrop-filter: blur(30px);
width: 160px;
height: 160px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.13);
}
.play-now::after {
content: "";
position: absolute;
top: -15px;
left: -15px;
width: 100%;
height: 100%;
border-radius: 100%;
padding: 1px;
z-index: 2;
border: 2px dashed rgba(255, 255, 255, 0.768627451);
-webkit-animation-name: rotateme;
animation-name: rotateme;
-webkit-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
.play-now .icon {
position: relative;
display: inline-block;
height: 90px;
width: 90px;
text-align: center;
line-height: 90px;
background-color: var(--theme-color2);
color: var(--bg-theme-color1);
z-index: 1;
padding-left: 5px;
font-size: 20px;
display: block;
border-radius: 50%;
box-shadow: 0 0px 10px 0 rgba(255, 255, 255, 0.3);
transform-origin: center;
z-index: 1;
}
.play-now .ripple,
.play-now .ripple:before,
.play-now .ripple:after {
position: absolute;
top: 40%;
left: 42%;
height: 80px;
width: 80px;
transform: translate(-50%, -50%);
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
animation: ripple 3s infinite;
}
.play-now .ripple:before {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
content: "";
position: absolute;
}
.play-now .ripple:after {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
content: "";
position: absolute;
}
@-webkit-keyframes ripple {
70% {
-webkit-box-shadow: 0 0 0 70px rgba(255, 255, 255, 0);
box-shadow: 0 0 0 70px rgba(255, 255, 255, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}
@keyframes ripple {
70% {
-webkit-box-shadow: 0 0 0 70px rgba(255, 255, 255, 0);
box-shadow: 0 0 0 70px rgba(255, 255, 255, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}
/*========================
Select2 Dropdown Plugin
========================*/
.select2-results__option {
padding: 0 10px;
color: #7c858c;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #7c858c;
padding-left: 0;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: var(--bg-theme-color1);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
height: 30px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
bottom: 1px;
height: auto;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #7c858c;
}
.select2-container--default .select2-selection--single .select2-selection__arrow:before {
position: relative;
content: "\f107";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
display: none;
}
.select2-container--default .select2-selection--single {
border-radius: 0;
}
.default-dots .owl-dots {
position: relative;
margin-top: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.default-dots .owl-dots .owl-dot {
height: 11px;
width: 11px;
border-radius: 50%;
background-color: #cdcbcb;
border: 2px solid #cdcbcb;
margin-left: 5px;
}
.default-dots .owl-dots .owl-dot:first-child {
margin-left: 0;
}
.default-dots .owl-dots .owl-dot.active {
border: 2px solid var(--border-theme-color2);
background-color: transparent;
}
.rotate {
-webkit-animation-name: rotateme;
animation-name: rotateme;
-webkit-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
background-position: center center;
}
@keyframes rotateme {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/***
====================================================================
Nexella button
====================================================================
***/
.nexella-buton a {
display: inline-block;
border: 0;
font-size: 18px;
color: var(--bg-theme-color1);
font-weight: 500;
padding: 14px 44px;
border-radius: 100px;
position: relative;
z-index: 1;
transition: 0.5s;
background: var(--theme-color2);
animation: 1s 1.6s fadeInUp both;
}
.nexella-buton a:before {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: var(--text-color-bg-theme-color1);
border-radius: 100px;
transition: 0.5s;
transform: scale(0);
}
.nexella-buton a:hover:before {
transform: scale(1);
}
.nexella-buton a:hover {
color: var(--bg-theme-color1);
}
.nexella-buton a i {
position: absolute;
right: -60px;
height: 60px;
width: 60px;
line-height: 60px;
top: 0;
border-radius: 50%;
text-align: center;
font-size: 16px;
transition: 0.5s;
background: var(--theme-color2);
font-weight: var(--h3-font-weight);
transform: rotate(-45deg);
}
.nexella-buton a:hover i {
color: var(--bg-theme-color1);
background: var(--text-color-bg-theme-color1);
transform: scale(1);
}
/***
====================================================================
Nexella button Style Two
====================================================================
***/
.nexella-buton.style_two a {
background: transparent;
border: 1px solid var(--text-color);
padding: 7px 28px;
color: var(--text-color);
}
.nexella-buton.style_two a::before {
background: var(--theme-color1);
}
.nexella-buton.style_two a:hover {
color: var(--theme-color3);
}
.nexella-buton.style_two a i {
right: -51px;
height: 50px;
width: 50px;
border: 1px solid var(--text-color);
line-height: 50px;
top: -1px;
background: transparent;
}
.nexella-buton.style_two a:hover i {
background: var(--theme-color1);
color: var(--theme-color3);
}
.style_five a {
padding: 14px 40px;
font-size: 16px;
margin-top: 31px;
}
/***
====================================================================
Nexella button Style Three
====================================================================
***/
.nexella-buton-style-three a {
display: inline-block;
border: 0;
font-size: 16px;
color: var(--bg-theme-color3);
font-weight: 500;
padding: 14px 44px;
border-radius: 100px;
position: relative;
z-index: 1;
transition: 0.5s;
background: var(--bg-theme-color1);
animation: 1s 1.6s fadeInUp both;
}
.nexella-buton-style-three a:before {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: var(--theme-color2);
border-radius: 100px;
transition: 0.5s;
transform: scale(0);
}
.nexella-buton-style-three a:hover:before {
transform: scale(1);
}
.nexella-buton-style-three a:hover {
color: var(--bg-theme-color1);
}
.nexella-buton-style-three a i {
position: absolute;
right: -58px;
height: 58px;
width: 58px;
line-height: 58px;
top: 0;
border-radius: 50%;
text-align: center;
font-size: 16px;
transition: 0.5s;
background: var(--bg-theme-color1);
font-weight: var(--h3-font-weight);
transform: rotate(-45deg);
}
.nexella-buton-style-three a:hover i {
color: var(--bg-theme-color1);
background: var(--theme-color2);
transform: scale(1);
}
.nexella-buton.style_four a {
font-size: 16px;
padding: 15px 41px;
}
.theme-btn.small {
padding: 10px 40px;
line-height: 20px;
font-size: 12px;
}
/***
====================================================================
Nexella Style button
====================================================================
***/
.nexella-style-btn a {
font-family: var(--title-font);
font-weight: 500;
font-size: 18px;
color: var(--theme-color3);
position: relative;
z-index: 1;
}
.nexella-style-btn a::before {
position: absolute;
content: "";
right: -35px;
top: 62%;
transform: translateY(-50%);
height: 70px;
width: 70px;
line-height: 70px;
border-radius: 50%;
background: var(--theme-color1);
z-index: -1;
transition: 0.5s;
}
.nexella-style-btn a::after {
position: absolute;
content: "";
right: -35px;
top: 62%;
transform: translateY(-50%);
height: 0;
width: 0;
line-height: 70px;
border-radius: 50%;
border: 2px solid var(--theme-color2);
z-index: -1;
transition: 0.5s;
opacity: 0;
}
.nexella-style-btn a:hover::after {
opacity: 1;
width: 70px;
height: 70px;
}
.nexella-style-btn a:hover::before {
opacity: 0;
}
.nexella-style-btn a:hover {
color: var(--theme-color2);
}
.nexella-style-btn a img {
margin-left: 18px;
}
.nexella-style-btn.two a::before {
background: var(--theme-color4);
}
/***
====================================================================
Animation
====================================================================
***/
.bounce-animate {
animation-name: float-bob;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-animation-name: float-bob;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: float-bob;
-ms-animation-duration: 2s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-animation-name: float-bob;
-o-animation-duration: 2s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
}
.bounce-animate2 {
animation-name: float-bob2;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-animation-name: float-bob2;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: float-bob2;
-ms-animation-duration: 3s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-animation-name: float-bob2;
-o-animation-duration: 3s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
}
.bounce-animate3 {
animation-name: float-bob3;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-animation-name: float-bob3;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: float-bob3;
-ms-animation-duration: 3s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-animation-name: float-bob3;
-o-animation-duration: 3s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
}
.bounce-animate4 {
animation-name: float-bob4;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-animation-name: float-bob4;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: float-bob4;
-ms-animation-duration: 5s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-animation-name: float-bob4;
-o-animation-duration: 5s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
}
.bounce-animate5 {
animation-name: float-bob5;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-animation-name: float-bob5;
-moz-animation-duration: 6s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: float-bob5;
-ms-animation-duration: 6s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-animation-name: float-bob5;
-o-animation-duration: 6s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
}
.bounce-animate-slow {
animation-name: float-bob5;
animation-duration: 15s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-animation-name: float-bob5;
-moz-animation-duration: 15s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: float-bob5;
-ms-animation-duration: 15s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-animation-name: float-bob5;
-o-animation-duration: 15s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
}
.bounce-animate-3 {
animation-name: float-bob6;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-animation-name: float-bob6;
-moz-animation-duration: 6s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: float-bob6;
-ms-animation-duration: 6s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-animation-name: float-bob6;
-o-animation-duration: 6s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
}
@keyframes float-bob {
0% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
50% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
100% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
}
@keyframes float-bob2 {
0% {
-webkit-transform: translateY(-60px);
transform: translateY(-60px);
}
50% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
100% {
-webkit-transform: translateY(-60px);
transform: translateY(-60px);
}
}
@keyframes float-bob3 {
0% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
}
50% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
}
}
@keyframes float-bob4 {
0% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
}
50% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
100% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
}
}
@keyframes float-bob5 {
0% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
}
50% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
}
}
@keyframes float-bob6 {
0% {
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
50% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
}
@keyframes movebounce {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
50% {
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@keyframes moveleftbounce {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
50% {
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
100% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
}
/*--==============================================->
==================================================-*/
/**/
.dance3 {
-webkit-animation: dance3 8s alternate infinite;
animation: dance3 8s alternate infinite;
}
@keyframes dance3 {
0% {
-webkit-transform: scale(0.5);
}
100% {
-webkit-transform: scale(1);
}
}
.dance {
-webkit-animation: dance 2s alternate infinite;
animation: dance 2s alternate infinite;
}
@keyframes dance {
0% {
-webkit-transform: scale(0.5);
}
100% {
-webkit-transform: scale(1.2);
}
}
.dance2 {
-webkit-animation: dance2 4s alternate infinite;
animation: dance2 4s alternate infinite;
}
@keyframes dance2 {
0% {
-webkit-transform: translate3d(0, 0, 0);
}
50% {
-webkit-transform: translate3d(25px, -25px, 0);
}
100% {
-webkit-transform: translate3d(0, -25px, 25px);
}
}
.watermark-animate {
-webkit-animation: watermark-animate 8s infinite;
animation: watermark-animate 8s infinite;
animation-direction: alternate-reverse;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@keyframes watermark-animate {
0% {
left: 0;
}
100% {
left: 100%;
}
}
.rotateme {
-webkit-animation-name: rotateme;
animation-name: rotateme;
-webkit-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
/***
====================================================================
Search Popup
====================================================================
***/
.search-popup {
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: 100%;
z-index: 99;
opacity: 0;
visibility: hidden;
transition: all 500ms ease;
overflow: hidden;
transform: scale(0.95);
}
.search-popup .search-back-drop {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: var(--bg-theme-color1);
opacity: 0.95;
}
.search-popup .close-search {
position: absolute;
top: 30px;
right: 30px;
font-size: 26px;
color: var(--theme-color2);
z-index: 3;
border-radius: 50%;
background-color: transparent;
transition: all 500ms ease;
}
.search-popup .search-inner {
position: relative;
display: block;
top: 40%;
height: auto;
z-index: 1;
width: calc(100% - 60px);
max-width: 800px;
margin: auto;
opacity: 0;
transform: translateY(-50px);
transition: all 300ms ease;
}
.search-popup .form-group {
position: relative;
display: flex;
align-items: center;
}
.search-popup .form-group input[type=search],
.search-popup .form-group input[type=text] {
position: relative;
display: block;
line-height: 20px;
font-size: 16px;
width: 100%;
height: 50px;
border: 1px solid #e1e6dc;
padding: 15px 20px;
color: #707070;
background: #ffffff;
border-radius: 5px;
transition: all 500ms ease;
}
.search-popup .form-group input[type=search]:focus,
.search-popup .form-group input[type=text]:focus {
border-color: var(--border-theme-color2);
}
.search-popup .form-group button {
position: absolute;
right: 5px;
top: 5px;
height: 40px;
width: 40px;
display: block;
font-size: 14px;
color: #fff;
line-height: 40px;
border-radius: 5px;
font-weight: normal;
background: var(--theme-color2);
transition: all 500ms ease;
}
.search-popup .form-group button:hover {
background: var(--theme-color2);
color: #ffffff;
}
.search-popup textarea::placeholder,
.search-popup input::placeholder {
color: inherit;
}
.moblie-search-active .search-popup {
opacity: 1;
visibility: visible;
transform: scale(1);
border-radius: 0%;
}
.moblie-search-active .search-popup .search-inner {
opacity: 1;
transform: translateY(0);
transition-delay: 500ms;
}
/***
====================================================================
Main Header
====================================================================
***/
.header-span {
display: block;
height: 110px;
position: relative;
width: 100%;
}
.main-header {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 999;
}
.main-header .header-lower {
position: relative;
transition: all 300ms ease;
padding: 16px 50px;
}
.main-header .header-lower .logo-box {
min-width: 340px;
padding: 0;
position: relative;
}
.main-header {
width: 100%;
z-index: 999;
}
.main-header .logo {
display: block;
position: relative;
}
.main-header .logo img {
max-width: 170px;
height: auto;
}
.main-header .main-box {
align-items: center;
display: flex;
justify-content: space-between;
left: 0px;
position: relative;
top: 0px;
transition: all 300ms ease;
}
.main-header .main-box .nav-outer {
text-align: center;
}
.main-menu {
position: relative;
}
.main-menu .navbar-header {
display: none;
}
.main-menu .navbar-collapse {
padding: 0px;
}
.main-menu .navigation {
margin: 0px;
position: relative;
}
.main-menu .navigation > li {
float: left;
margin-right: 60px;
padding: 25px 0px;
position: relative;
transition: all 300ms ease;
}
.main-menu .navigation > li:last-child {
margin-right: 0;
}
.main-menu .navigation > li:before {
background-color: var(--bg-theme-color2);
bottom: 23px;
content: "";
height: 2px;
left: 50%;
position: absolute;
transition: all 300ms ease;
width: 0%;
}
.main-menu .navigation > li:hover:before, .main-menu .navigation > li.current:before {
left: 0;
width: 100%;
}
.main-menu .navigation > li > a {
color: #0b2f63;
display: flex;
font-size: 16px;
line-height: 20px;
font-weight: 500;
opacity: 1;
padding: 0;
position: relative;
text-align: center;
transition: all 300ms ease;
font-family: var(--title-font);
}
.main-menu .navigation > li > a .icon {
position: relative;
font-size: 22px;
line-height: 24px;
margin-left: 10px;
}
.main-menu .navigation > li > a:hover {
color: #0f63bd;
}
.main-menu .navigation > li.current > a {
color: #0f63bd;
font-weight: 700;
}
.main-menu .navigation > li.dropdown > a {
margin-right: -14px;
padding-right: 14px;
}
.main-menu .navigation > li.dropdown > a:after {
content: "\f107";
display: block;
font-family: "Font Awesome 5 Free";
font-size: 13px;
font-weight: 900;
height: 20px;
line-height: 24px;
margin-top: -3px;
position: absolute;
right: -5px;
top: 50%;
transform: translateY(-50%);
width: 10px;
z-index: 5;
}
.main-menu .navigation > li.dropdown:hover > ul {
margin-top: 0;
opacity: 1;
top: 100%;
transition: all 300ms ease;
visibility: visible;
}
.main-menu .navigation > li > ul {
background-color: #ffffff;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
display: none;
left: 0px;
margin-top: 30px;
opacity: 0;
padding: 10px 0 0;
position: absolute;
top: 100%;
width: 220px;
z-index: 100;
}
.main-menu .navigation > li > ul.from-right {
left: auto;
right: 0px;
}
.main-menu .navigation > li > ul > li {
position: relative;
width: 100%;
border-bottom: 1px solid #ebf1f5;
}
.main-menu .navigation > li > ul > li:last-child {
border-bottom: none;
}
.main-menu .navigation > li > ul > li > a {
position: relative;
display: block;
padding: 10px 0px;
line-height: 1;
font-weight: 400;
font-size: 15px;
color: var(--bg-theme-color1);
text-align: left;
margin: 0 30px;
text-transform: capitalize;
transition: all 200ms ease;
}
.main-menu .navigation > li > ul > li:hover > a {
color: var(--theme-color2);
}
.main-menu .navigation > li > ul > li.dropdown:hover > ul {
visibility: visible;
opacity: 1;
top: 0px;
margin-top: 20px;
transition: all 300ms ease;
}
.main-menu .navigation > li > ul > li > ul {
background-color: #ffffff;
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
display: none;
left: 100%;
margin-top: 10px;
opacity: 0;
padding: 10px 0 0;
position: absolute;
top: 0px;
transform: translateY(-30px);
width: 220px;
z-index: 100;
}
.main-menu .navigation > li > ul > li > ul > li {
border-bottom: 1px solid #ebf1f5;
position: relative;
width: 100%;
}
.main-menu .navigation > li > ul > li > ul > li:last-child {
border-bottom: none;
}
.main-menu .navigation > li > ul > li > ul > li > a {
color: var(--theme-color1);
display: block;
font-size: 15px;
font-weight: 400;
line-height: 1;
margin: 0 30px;
padding: 10px 0;
position: relative;
text-align: left;
text-transform: capitalize;
transition: all 300ms ease;
}
.main-menu .navigation > li > ul > li > ul > li > a:hover {
color: var(--theme-color2);
}
.main-menu .navigation li.dropdown .dropdown-btn {
border: 1px solid #ffffff;
color: #ffffff;
cursor: pointer;
display: none;
font-size: 16px;
height: 30px;
line-height: 26px;
position: absolute;
right: 10px;
text-align: center;
top: 8px;
width: 34px;
z-index: 5;
}
.main-header .header-lower .outer-box {
align-items: center;
display: flex;
height: 100%;
justify-content: flex-end;
padding: 10px 0;
position: relative;
}
.main-header .header-lower .outer-box .theme-btn {
display: flex;
font-size: 11px;
margin-left: 30px;
padding: 10px 40px;
}
.main-header .header-lower .outer-box .ui-btn-outer {
margin-right: 40px;
}
.main-header .ui-btn {
background: none;
color: #0b2f63;
display: block;
font-size: 18px;
line-height: 30px;
margin-left: 26px;
position: relative;
font-weight: 500;
text-align: center;
transition: all 300ms ease;
}
.main-header .ui-btn:hover {
color: #0f63bd;
}
.header-btn {
line-height: 0;
}
.header-btn a {
font-family: var(--title-font);
font-weight: 500;
font-size: 18px;
line-height: 28px;
color: #ffffff;
background: #0f63bd;
border-radius: 30px;
padding: 11px 31px;
display: inline-block;
position: relative;
overflow: hidden;
z-index: 1;
}
.header-btn a::before {
position: absolute;
content: "";
right: 0;
height: 100%;
width: 0;
transition: 0.5s;
top: 0;
background: #0b2f63;
z-index: -1;
}
.header-btn a:hover:before {
width: 100%;
left: 0;
}
.header-btn a:hover {
color: #ffffff;
}
.header-btn a i {
margin-left: 5px;
font-size: 16px;
transition: 0.5s;
transform: rotate(-45deg);
}
.menubars {
width: 30px;
line-height: 5px;
text-align: right;
background: transparent;
position: relative;
z-index: 1;
top: -3px;
margin-left: 40px;
}
.menubars span {
display: inline-block;
width: 90%;
height: 2px;
background-color: var(--theme-color3);
transition: all 300ms ease;
}
.menubars span:nth-child(2) {
width: 100%;
}
.menubars span:nth-child(3) {
width: 70%;
}
/***
====================================================================
Sticky Header
====================================================================
***/
.sticky-header {
background: var(--theme-color-light);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
left: 0px;
opacity: 0;
padding: 20px 0px;
position: fixed;
top: 0px;
visibility: hidden;
width: 100%;
z-index: 99999;
border-bottom: 1px solid var(--border-theme-color1);
}
.sticky-header.fixed-header {
opacity: 1;
visibility: visible;
z-index: 9999;
}
.sticky-header .logo {
padding: 10px 0;
}
.sticky-header .logo img {
max-height: 40px;
}
.sticky-header .nav-outer {
background: none;
position: relative;
}
.sticky-header .inner-container {
align-items: center;
display: flex;
justify-content: space-between;
position: relative;
}
.sticky-header .main-menu .navigation > li {
margin: 0;
margin-left: 40px;
padding: 20px 0;
}
.sticky-header .main-menu .navigation > li.current > a,
.sticky-header .main-menu .navigation > li:hover > a {
color: var(--theme-color2);
}
.sticky-header .main-menu .navigation > li:before {
display: none;
}
.sticky-header .outer-box,
.sticky-header .navbar-header {
display: none;
}
.sticky-header .mobile-nav-toggler {
color: var(--theme-color3);
}
/***
====================================================================
Mobile Menu
====================================================================
***/
.mobile-nav-toggler {
position: relative;
font-size: 24px;
line-height: 20px;
cursor: pointer;
color: var(--theme-color3);
display: none;
top: 0px;
margin-left: 25px;
order: 8;
}
.mobile-menu {
position: fixed;
right: 0;
top: 0;
width: 300px;
max-width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
z-index: 999999;
}
.mobile-menu .menu-backdrop {
position: fixed;
right: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0, 0, 0, 0.7);
opacity: 0;
visibility: hidden;
}
.mobile-menu .upper-box {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
padding: 20px 20px;
}
.mobile-menu .close-btn {
position: relative;
top: -10px;
text-align: center;
font-size: 18px;
color: var(--theme-color3);
cursor: pointer;
z-index: 10;
transition: all 0.5s ease;
transform: translateY(-50px);
}
.mobile-menu .close-btn:hover {
opacity: 0.5;
}
.mobile-menu .nav-logo {
position: relative;
text-align: left;
width: 100%;
}
.mobile-menu .nav-logo img {
max-height: 40px;
}
.mobile-menu .menu-box {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
max-height: 100%;
overflow-y: auto;
background: var(--bg-theme-color1);
padding: 0px 0px;
z-index: 5;
opacity: 0;
visibility: hidden;
border-radius: 0px;
transform: translateX(101%);
}
.mobile-menu-visible {
overflow: hidden;
}
.mobile-menu-visible .mobile-menu {
opacity: 1;
visibility: visible;
}
.mobile-menu-visible .mobile-menu .menu-backdrop {
opacity: 1;
visibility: visible;
transition: all 0.4s ease;
}
.mobile-menu-visible .mobile-menu .menu-box {
opacity: 1;
visibility: visible;
transition: all 0.4s ease 200ms;
transform: translateX(0%);
}
.mobile-menu-visible .mobile-menu .close-btn {
transform: translateY(0px);
}
.mobile-menu-visible .scroll-to-top {
opacity: 0;
visibility: hidden;
}
.mobile-menu .navigation {
position: relative;
display: block;
width: 100%;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-menu .navigation li {
position: relative;
display: block;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-menu .navigation li > ul > li:last-child {
border-bottom: none;
}
.mobile-menu .navigation li > ul > li:first-child {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-menu .navigation li > a {
position: relative;
display: block;
line-height: 24px;
padding: 10px 20px;
font-size: 16px;
color: #ffffff;
font-weight: 400;
text-transform: capitalize;
}
.mobile-menu .navigation li:hover > a, .mobile-menu .navigation li.current > a {
color: var(--theme-color2);
}
.mobile-menu .navigation li.dropdown .dropdown-btn {
position: absolute;
right: 0px;
top: 0px;
width: 44px;
height: 44px;
text-align: center;
font-size: 16px;
line-height: 44px;
color: #ffffff;
cursor: pointer;
z-index: 5;
}
.mobile-menu .navigation li.dropdown .dropdown-btn:after {
content: "";
position: absolute;
left: 0px;
top: 10px;
width: 1px;
height: 24px;
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-menu .navigation li.dropdown .dropdown-btn.active i:before {
content: "\f106";
}
.mobile-menu .navigation li > ul,
.mobile-menu .navigation li > ul > li > ul {
display: none;
}
.mobile-menu .navigation li > ul > li {
padding-left: 20px;
}
.contact-list-one {
position: relative;
padding: 30px 20px 20px;
}
.contact-list-one li {
position: relative;
margin-bottom: 20px;
}
.contact-list-one li:last-child {
margin-right: 0;
}
.contact-list-one li .contact-info-box {
position: relative;
padding-left: 54px;
font-size: 14px;
line-height: 24px;
color: #ffffff;
}
.contact-list-one li .contact-info-box a {
color: #ffffff;
transition: all 300ms ease;
}
.contact-list-one li .contact-info-box .icon {
position: absolute;
left: 0;
top: 0;
font-size: 34px;
line-height: 50px;
color: var(--theme-color2);
}
.contact-list-one li .contact-info-box .title {
display: block;
font-size: 12px;
color: #b2c1c0;
font-weight: 400;
text-transform: uppercase;
}
.mobile-menu .social-links {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--bg-theme-color1);
width: 100%;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: auto;
}
.mobile-menu .social-links li {
position: relative;
text-align: center;
width: 100%;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-menu .social-links li a {
position: relative;
display: block;
line-height: 50px;
height: 50px;
font-size: 14px;
text-align: center;
color: var(--theme-color3);
transition: all 300ms ease;
}
.mobile-menu .social-links li a:hover {
color: var(--theme-color2);
}
/***
====================================================================
Section Title
====================================================================
***/
.sec-title {
position: relative;
margin-bottom: 40px;
}
.sec-title.text-center .sub-title:before {
left: 50%;
transform: translateX(-50%);
}
.sec-title .sub-title {
position: relative;
top: 0;
font-size: var(--sec-title-subtitle-font-size);
color: var(--sec-title-subtitle-color);
line-height: var(--sec-title-subtitle-line-height);
font-weight: var(--sec-title-subtitle-font-weight);
font-family: var(--sec-title-subtitle-font-family);
display: inline-block;
letter-spacing: 1.3px;
padding-top: 14px;
margin-bottom: 28px;
text-transform: capitalize;
}
.sec-title .sub-title img {
margin-right: 10px;
margin-top: -4px;
-webkit-animation-name: rotateme;
animation-name: rotateme;
-webkit-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
background-position: center center;
}
.sec-title h1 {
position: relative;
font-size: 140px;
line-height: 1em;
color: var(--sec-title-color);
font-family: var(--sec-title-font-family);
font-weight: var(--sec-title-font-weight);
text-transform: uppercase;
}
.sec-title h2 {
position: relative;
font-size: var(--sec-title-font-size);
color: var(--sec-title-color);
font-family: var(--sec-title-font-family);
font-weight: var(--sec-title-font-weight);
margin-top: -9px;
margin-bottom: 0;
}
.sec-title p {
font-size: 18px;
width: 80%;
line-height: 28px;
margin: 24px 0 0;
}
.sec-title span {
font-weight: 300;
}
.sec-title .text {
margin-top: 35px;
}
.sec-title.style_two .sub-title {
padding-top: 0;
margin-bottom: 24px;
}
.sec-title.style_two h2 {
font-weight: 400;
font-size: 42px;
line-height: 52px;
}
.sec-title.style_two h2 span {
font-weight: 700;
font-size: 42px;
color: var(--theme-color2);
}
.sec-title.style_color h2,
.sec-title.style_color h1 {
color: var(--headings-color-2);
}
.sec-title.style_color .text {
color: #AAB3BB;
}
.sec-title.style_color .sub-title {
color: var(--headings-color-2);
}
p.sec-descrption {
font-size: 18px;
line-height: 28px;
}
/***
====================================================================
Banner Section
====================================================================
***/
.banner-section {
position: relative;
overflow: hidden;
z-index: 1;
height: 950px;
padding: 0 188px 0;
background:
radial-gradient(circle at 78% 30%, rgba(255, 255, 255, 0.95) 0 16%, rgba(255, 255, 255, 0) 36%),
linear-gradient(135deg, #ffffff 0%, #f7fbff 36%, #d7ebff 70%, #0f63bd 100%);
}
.banner-section .hero_upper {
margin-top: -30px;
}
.banner-section .content-box {
position: relative;
z-index: 2;
max-width: min(58vw, 900px);
}
.banner-section .content-box .title {
font-size: clamp(58px, 7.2vw, 104px);
font-weight: 700;
color: #0b2f63;
line-height: 1.08;
margin-bottom: 40px;
animation: 1s 1.6s fadeInUp both;
}
.banner-section .content-box .title span {
font-weight: 300;
color: #1b68b8;
}
.banner-section .content-box .nexella-buton a {
color: #ffffff;
background: #0f63bd;
box-shadow: 0 16px 32px rgba(15, 99, 189, 0.22);
}
.banner-section .content-box .nexella-buton a:before {
background: #0b2f63;
}
.banner-section .content-box .nexella-buton a:hover {
color: #ffffff;
}
.banner-section .content-box .nexella-buton a i {
color: #ffffff;
background: #0f63bd;
}
.banner-section .content-box .nexella-buton a:hover i {
color: #ffffff;
background: #0b2f63;
}
.banner-section .banner_icon-bx {
display: flex;
align-items: center;
gap: 30px;
position: absolute;
bottom: 118px;
left: 30%;
}
.banner-section .banner_icon-bx .banner-icon {
flex-shrink: 0;
}
.banner-section .banner_icon-bx .banner-text p {
font-size: 20px;
line-height: 30px;
margin: 0;
color: #17406f;
width: 46%;
}
.banner-section .hero-img {
position: absolute;
right: 3%;
top: 38%;
z-index: 3;
width: min(34vw, 520px);
padding: 18px;
border-radius: 34px;
background: rgba(255, 255, 255, 0.84);
box-shadow: 0 32px 80px rgba(15, 99, 189, 0.22);
perspective: 900px;
transform-style: preserve-3d;
animation: kangpinLogoEntrance 1.1s cubic-bezier(0.2, 0.85, 0.22, 1) both, kangpinLogoFloat 5.5s ease-in-out 1.1s infinite;
}
.banner-section .hero-img img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
border-radius: 24px;
transform: translateZ(42px);
box-shadow: 0 20px 44px rgba(15, 99, 189, 0.24);
}
@keyframes kangpinLogoEntrance {
0% {
opacity: 0;
transform: translate3d(120px, -44%, -180px) rotateX(18deg) rotateY(-34deg) scale(0.72);
filter: blur(10px);
}
70% {
opacity: 1;
transform: translate3d(-8px, -50%, 18px) rotateX(-4deg) rotateY(7deg) scale(1.03);
filter: blur(0);
}
100% {
opacity: 1;
transform: translate3d(0, -50%, 0) rotateX(0deg) rotateY(0deg) scale(1);
filter: blur(0);
}
}
@keyframes kangpinLogoFloat {
0%, 100% {
transform: translate3d(0, -50%, 0) rotateX(0deg) rotateY(-7deg) rotateZ(0deg);
}
50% {
transform: translate3d(0, calc(-50% - 18px), 46px) rotateX(6deg) rotateY(9deg) rotateZ(-1.5deg);
}
}
.banner-section .follow-us {
text-align: center;
display: flex;
position: absolute;
right: 50px;
bottom: 70px;
}
.banner-section .follow-us .follow-title {
margin-bottom: 10px;
color: #0b2f63;
font-size: 14px;
margin-right: 20px;
position: relative;
z-index: 1;
}
.banner-section .follow-us .follow-title::before {
position: absolute;
content: "";
border: 1px solid rgba(11, 47, 99, 0.35);
top: 13px;
left: -90px;
width: 80px;
}
.banner-section .follow-us .social-links {
display: flex;
justify-content: center;
gap: 20px;
}
.banner-section .follow-us .social-links a {
display: inline-block;
color: #0b2f63;
text-decoration: none;
font-size: 13px;
transition: 0.3s;
}
.banner-section .follow-us .social-links :hover {
color: #1b68b8;
}
.banner-section .email-link {
position: absolute;
left: -15px;
transform: translateY(50%);
top: 60%;
}
.banner-section .email-link a {
font-weight: 400;
font-size: 18px;
display: inline-block;
color: #0b2f63;
transform: rotate(-90deg);
position: relative;
z-index: 1;
}
.banner-section .email-line {
position: absolute;
left: 56px;
top: 29%;
}
/***
====================================================================
Banner Section Two
====================================================================
***/
.banner-section.style_two {
height: 950px;
}
.banner-section.style_two .hero_upper {
margin-top: 84px;
}
.banner-section.style_two .content-box .title {
margin-bottom: 30px;
font-weight: 700;
font-size: 90px;
line-height: 100px;
}
.banner-section.style_two .content-box .nexella-buton a {
padding: 13px 44px;
margin-left: 60px;
}
.banner-section.style_two .content-box .hero-campaign {
position: absolute;
right: 29%;
top: 44%;
transform: translateY(-50%);
}
.banner-section.style_two .content-box .hero-campaign span.campaign-badge {
font-family: var(--title-font);
font-weight: 500;
font-size: 16px;
line-height: 26px;
background: var(--theme-color2);
color: var(--theme-color1);
padding: 9px 29px;
border-radius: 40px;
display: inline-block;
transform: rotate(-24deg);
}
.banner-section.style_two .content-box .hero-campaign span.campaign-badge::before {
position: absolute;
content: "";
right: -24px;
top: -14px;
height: 24px;
width: 26px;
background: url(../images/home-2/icon.png);
background-repeat: no-repeat;
background-size: cover;
transform: rotate(17deg);
}
.banner-section.style_two .content-box .hero-marketing-box {
padding: 25px;
display: flex;
align-items: center;
border-radius: 16px;
width: 300px;
gap: 20px;
backdrop-filter: blur(30px);
background: rgba(255, 255, 255, 0.1);
position: absolute;
right: -13%;
bottom: 35%;
}
.banner-section.style_two .content-box .hero-marketing-box::before {
content: "";
position: absolute;
inset: 0;
border-radius: 16px;
padding: 2px;
background: linear-gradient(97deg, rgba(255, 255, 255, 0.65), rgba(0, 0, 0, 0.31));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: -1;
}
.banner-section.style_two .content-box .hero-marketing-box .marketing-icon {
height: 70px;
width: 70px;
background: var(--theme-color2);
border-radius: 10px;
line-height: 70px;
text-align: center;
flex-shrink: 0;
}
.banner-section.style_two .content-box .hero-marketing-box h6.marketing-title {
font-weight: 500;
font-size: 20px;
line-height: 28px;
margin: 0;
}
.banner-section.style_two .banner_icon-bx {
display: flex;
align-items: center;
gap: 20px;
position: inherit;
bottom: 0;
left: 0;
animation: 1s 1.6s fadeInUp both;
margin-bottom: 42px;
}
.banner-section.style_two .banner_icon-bx .banner-text p {
font-size: 20px;
line-height: 30px;
margin: 0;
color: var(--bg-theme-color3);
width: 70%;
}
.banner-section.style_two .hero-thumb {
position: absolute;
right: 0;
bottom: -16px;
}
/***
====================================================================
About Section
====================================================================
***/
.about-section {
position: relative;
padding: 120px 199px 100px;
background: var(--theme-color4);
z-index: 1;
}
.about-section .about-shape {
position: absolute;
left: 7%;
margin: 0;
bottom: 9%;
text-align: center;
z-index: -1;
}
.about-section .container-fluid {
padding: 0;
}
.about-section .container-fluid .sec-title {
position: relative;
margin-bottom: 60px;
margin-left: 30px;
}
.about-section .container-fluid .sec-title .sub-title {
padding-top: 35px;
}
.about-section .container-fluid .sec-title .sub-title:before {
top: 21px;
}
.about-section .container-fluid .about-icon-box {
border-top-right-radius: 190px;
border-bottom-right-radius: 190px;
border-bottom-left-radius: 190px;
background: #111111;
display: flex;
gap: 115px;
padding: 70px 65px 70px;
width: 760px;
margin-left: -142px;
position: relative;
}
.about-section .container-fluid .about-icon-box::before {
position: absolute;
content: "";
left: 10px;
top: -10px;
width: 100%;
height: 100%;
background-color: var(--theme-color2);
border-top-right-radius: 190px;
border-bottom-right-radius: 190px;
border-bottom-left-radius: 190px;
z-index: -1;
}
.about-section .container-fluid .about-icon-box .about-count {
flex-shrink: 0;
}
.about-section .container-fluid .about-icon-box .about-count span.count-text {
font-weight: 600;
font-size: 90px;
color: var(--theme-color2);
line-height: 1;
font-family: var(--title-font);
}
.about-section .container-fluid .about-icon-box .about-count span.plus {
font-family: var(--sec-title-font-family);
font-weight: 400;
font-size: 34px;
color: var(--theme-color2);
position: relative;
top: -54px;
left: 6px;
}
.about-section .container-fluid .about-icon-box .about-count h6.counter-title {
font-size: 18px;
line-height: 24px;
color: var(--theme-color3);
margin-top: 10px;
margin-left: 0;
}
.about-section .container-fluid .about-icon-box .about-content p {
font-weight: 400;
line-height: 26px;
color: var(--text-color);
margin: 13px 0 38px;
}
.about-section .container-fluid .about-icon-box .dance-sp.bounce-animate2 {
position: absolute;
bottom: 6%;
left: 26%;
}
.about-section .bg-blur {
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 119, 60, 0.54) 0%, rgba(255, 119, 60, 0) 100%);
position: absolute;
right: 0;
bottom: 3%;
height: 555px;
width: 555px;
z-index: -1;
border-radius: 50%;
}
.about-section .bg-blur2 {
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 119, 60, 0.54) 0%, rgba(255, 119, 60, 0) 100%);
position: absolute;
left: 1%;
bottom: 3%;
height: 555px;
width: 555px;
z-index: -1;
border-radius: 50%;
}
.about-section .about-shape2 {
position: absolute;
right: 5%;
top: 14%;
z-index: -1;
}
/***
====================================================================
About Section Two
====================================================================
***/
.about-section-two {
position: relative;
padding: 120px 0 130px;
background: var(--theme-color-light);
z-index: 1;
}
.about-section-two .about-shape {
position: absolute;
right: -13%;
margin: 0;
bottom: -21%;
text-align: center;
z-index: 1;
}
.about-section-two .about-shape img {
width: 75%;
}
.about-section-two .image-column {
position: relative;
}
.about-section-two .image-column .image-2 {
position: absolute;
bottom: -25px;
right: 64px;
z-index: 2;
}
.about-section-two .image-column .image-shape {
position: absolute;
bottom: 0;
left: 2%;
}
.about-section-two .image-column .about-campaign {
position: absolute;
right: 24%;
top: 67px;
}
.about-section-two .image-column .about-campaign span.campaign-badge {
font-family: var(--title-font);
font-weight: 500;
font-size: 16px;
line-height: 26px;
background: var(--theme-color2);
color: var(--theme-color1);
padding: 9px 29px;
border-radius: 40px;
display: inline-block;
}
.about-section-two .image-column .about-campaign span.campaign-badge::before {
position: absolute;
content: "";
right: -24px;
top: -14px;
height: 24px;
width: 26px;
background: url(../images/home-2/icon.png);
background-repeat: no-repeat;
background-size: cover;
transform: rotate(17deg);
}
.about-section-two .sec-title {
position: relative;
margin-bottom: 42px;
}
.about-section-two p.about-qute {
line-height: 26px;
padding-left: 30px;
position: relative;
width: 84%;
margin-bottom: 40px;
}
.about-section-two p.about-qute::before {
position: absolute;
content: "";
left: 0;
top: 6px;
height: 70px;
width: 3px;
background: var(--theme-color2);
}
.about-section-two .main-box {
display: flex;
}
.about-section-two .main-box .icon-box {
display: inline-block;
}
.about-section-two .main-box .icon-box .icon {
float: left;
margin-right: 20px;
margin-top: 9px;
}
.about-section-two .main-box .icon-box .icon img {
transition: 0.5s;
}
.about-section-two .main-box .icon-box h3 {
font-weight: 500;
font-size: 24px;
line-height: 34px;
}
.about-section-two .main-box .icon-box:hover .icon img {
transform: scaleX(-1);
}
.about-section-two .main-box .icon-box.two {
margin-left: 77px;
}
.about-section-two .about-icon-box {
margin-left: 83px;
margin-top: 25px;
position: relative;
z-index: 2;
}
.about-section-two .about-icon-box .about-count {
display: flex;
}
.about-section-two .about-icon-box .about-count span.count-text {
font-weight: 700;
font-size: 80px;
line-height: 1;
color: var(--theme-color2);
}
.about-section-two .about-icon-box .about-count span.plus {
font-family: var(--sec-title-font-family);
font-weight: 400;
font-size: 34px;
position: relative;
top: -54px;
left: 6px;
color: var(--theme-color2);
}
.about-section-two .about-icon-box .about-count h6.counter-title {
font-size: 18px;
line-height: 24px;
margin-top: 28px;
margin-left: -8px;
}
.about-section-two .about-content p {
font-weight: 400;
line-height: 26px;
color: var(--theme-color1);
margin: 13px 0 38px;
}
.about-section-two .nexella-buton a {
padding: 12px 33px;
margin-top: 34px;
}
.about-section-two .about-shape2 {
position: absolute;
top: 17%;
right: 6%;
z-index: -1;
}
.about-section-two .buler-bg {
position: absolute;
left: 7%;
bottom: 9%;
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 119, 60, 0.54) 0%, rgba(255, 119, 60, 0) 100%);
height: 620px;
width: 620px;
z-index: 1;
}
/*======================================================
Start Mission Section
========================================================*/
.mission-section {
padding: 0 0 120px;
background: var(--theme-color4);
}
.mission-section .icon-box {
display: flex;
gap: 20px;
}
.mission-section h4.icon-bx-title {
font-family: "Plus Jakarta Sans", sans-serif;
font-size: 28px;
font-weight: var(--h5-font-weight);
}
.mission-section p.mission-description {
line-height: 26px;
margin-top: 28px;
width: 85%;
}
.mission-section .mission-list-item {
border-top: 1px solid var(--border-theme-color1);
border-bottom: 1px solid var(--border-theme-color1);
padding: 35px 0 35px;
position: relative;
z-index: 1;
}
.mission-section .mission-list-item::before {
position: absolute;
content: "";
right: 0;
top: 0;
margin: auto;
left: 0;
height: 100%;
width: 1px;
background: var(--border-theme-color1);
z-index: -1;
}
.mission-section .mission-list-item .mission-list {
text-align: center;
}
.mission-section .mission-list-item .misssion-list-two {
margin-top: 35px;
border-top: 1px solid var(--border-theme-color1);
padding-top: 35px;
padding-top: 30px;
}
.mission-section .mission-list-item ul {
display: flex;
justify-content: space-around;
align-items: center;
}
.mission-section .mission-list-item ul li {
font-weight: var(--h5-font-weight);
font-size: 24px;
color: var(--theme-color3);
display: flex;
align-items: center;
gap: 10px;
transition: 0.5s;
}
.mission-section .mission-list-item ul li:hover {
color: var(--theme-color2);
}
/***
====================================================================
Services Section
====================================================================
***/
.services-section {
position: relative;
padding: 120px 0 120px 300px;
z-index: 1;
}
.services-section .container-fluid {
padding: 0;
}
.services-section .container-fluid .service_single_item {
background: rgba(255, 255, 255, 0.08);
padding: 60px 50px 60px;
position: relative;
z-index: 1;
}
.services-section .container-fluid .service_single_item::before {
position: absolute;
content: "";
right: 0;
top: 50%;
transform: translateY(-50%);
height: 80%;
width: 1px;
background: var(--border-theme-color1);
z-index: -1;
}
.services-section .container-fluid .service_single_item .service_icon {
height: 65px;
width: 65px;
line-height: 65px;
}
.services-section .container-fluid .service_single_item .service_icon img {
width: inherit !important;
}
.services-section .container-fluid .service_single_item .service_content h4 {
font-family: Plus Jakarta Sans;
font-weight: 500;
font-size: 28px;
line-height: 38px;
margin: 50px 0 25px;
}
.services-section .container-fluid .service_single_item .service_content h4 span {
font-weight: 300;
}
.services-section .container-fluid .service_single_item .service-btn a {
display: block;
color: var(--bg-theme-color3);
border: 1px solid var(--border-theme-color1);
border-radius: 30px;
padding: 10px 30px;
font-family: var(--sec-title-font-family);
font-weight: 500;
font-size: 16px;
position: relative;
z-index: 1;
overflow: hidden;
margin-top: 40px;
}
.services-section .container-fluid .service_single_item .service-btn a::before {
position: absolute;
content: "";
right: 0;
top: 0;
height: 100%;
width: 0;
background: var(--bg-theme-color2);
z-index: -1;
transition: 0.5s;
}
.services-section .container-fluid .service_single_item .service-btn a:hover:before {
width: 100%;
left: 0;
}
.services-section .container-fluid .service_single_item .service-btn a:hover {
color: var(--bg-theme-color1);
border: 1px solid var(--bg-theme-color2);
}
.services-section .container-fluid .service_single_item .service-btn a i {
float: right;
display: inline-block;
transform: rotate(-45deg);
font-size: 15px;
transition: 0.5s;
}
.services-section .container-fluid .service-column .inner-column .owl-stage-outer {
margin-left: 18px;
margin-top: -40px;
}
.services-section .container-fluid .service-column .inner-column .default-navs .owl-nav {
display: flex;
align-items: center;
position: absolute;
top: -34%;
right: 24%;
}
.services-section .container-fluid .service-column .inner-column .default-navs .owl-nav .owl-next,
.services-section .container-fluid .service-column .inner-column .default-navs .owl-nav .owl-prev {
height: 64px;
width: 64px;
color: var(--theme-color2);
background-color: transparent;
border: 1px dashed var(--theme-color2);
line-height: 64px;
}
.services-section .container-fluid .service-column .inner-column .default-navs .owl-nav .owl-next span.fa-solid.fa-arrow-right,
.services-section .container-fluid .service-column .inner-column .default-navs .owl-nav .owl-prev span.fa-solid.fa-arrow-right {
transform: rotate(-45deg);
}
.services-section .container-fluid .service-column .inner-column .default-navs .owl-nav .owl-next span.fa-solid.fa-arrow-left,
.services-section .container-fluid .service-column .inner-column .default-navs .owl-nav .owl-prev span.fa-solid.fa-arrow-left {
transform: rotate(45deg);
}
.services-section .container-fluid .service-column .inner-column .default-navs .owl-nav .owl-next:hover,
.services-section .container-fluid .service-column .inner-column .default-navs .owl-nav .owl-prev:hover {
background: var(--bg-theme-color2);
color: var(--bg-theme-color1);
}
.services-section .container-fluid .section-title-column {
margin-left: -69px;
}
.services-section .container-fluid .section-title-column .sec-title {
margin-bottom: 8px;
}
.services-section .service-bg-blur {
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 119, 60, 0.54) 0%, rgba(255, 119, 60, 0) 100%);
position: absolute;
left: 7%;
top: 0;
height: 550px;
width: 550px;
z-index: -1;
border-radius: 50%;
}
/*===========================
Start sass Icon Single Box
============================*/
.icon-single-box p {
font-size: 18px;
margin: 20px 0 34px;
}
/***
====================================================================
Services Section Two
====================================================================
***/
.services-section-two {
position: relative;
padding: 115px 0 90px;
z-index: 1;
}
.services-section-two .sec-title {
margin-bottom: 0;
}
.services-section-two .sec-title .sub-title {
padding-top: 0;
}
.services-section-two p.sec-descrption {
font-size: 18px;
line-height: 28px;
margin: 0;
}
.services-section-two .service_single_item {
position: relative;
z-index: 1;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
margin-bottom: 30px;
}
.services-section-two .service_single_item::before, .services-section-two .service_single_item::after {
content: "";
position: absolute;
z-index: -1;
inset: -0.1rem;
background: conic-gradient(from var(--gradient-angle), var(--theme-color2), var(--theme-color1), var(--theme-color2), var(--theme-color1), var(--theme-color2));
border-radius: inherit;
-webkit-animation: rotate 2.5s linear infinite;
animation: rotate 2.5s linear infinite;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
opacity: 0;
}
.services-section-two .service_single_item:hover::before,
.services-section-two .service_single_item ::after {
opacity: 1;
}
@keyframes rotate {
0% {
--gradient-angle: 0deg;
}
100% {
--gradient-angle: 360deg;
}
}
.services-section-two .service_single_item .service-single-inner {
background: linear-gradient(0deg, #0C0C0C 0%, #1C1C1C 98.44%);
padding: 40px 30px 12px;
position: relative;
z-index: 1;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
}
.services-section-two .service_single_item .service_icon {
height: 65px;
width: 65px;
line-height: 65px;
}
.services-section-two .service_single_item .service_icon img {
transition: all 400ms linear;
}
.services-section-two .service_single_item:hover .service_icon img {
transform: scaleX(-1);
}
.services-section-two .service_single_item .service_content {
padding-right: 85px;
}
.services-section-two .service_single_item .service_content h4 {
font-weight: 500;
font-size: 28px;
line-height: 38px;
margin: 26px 0 28px;
cursor: pointer;
transition: 0.5s;
}
.services-section-two .service_single_item .service_content h4:hover {
color: var(--theme-color2);
}
.services-section-two .service_single_item .service_content h4 span {
font-weight: 300;
}
.services-section-two .service_single_item .service-no {
position: absolute;
top: 50px;
right: 30px;
font-weight: 500;
font-size: 24px;
color: rgba(161, 161, 161, 0.3607843137);
transition: 0.5s;
}
.services-section-two .service_single_item:hover .service-no {
color: var(--theme-color2);
}
.services-section-two .service_single_item .service-img {
position: relative;
z-index: 1;
overflow: hidden;
}
.services-section-two .service_single_item .service-img:after {
background: rgba(255, 255, 255, 0.3);
bottom: 0;
content: "";
left: 50%;
position: absolute;
right: 51%;
top: 0;
opacity: 1;
pointer-events: none;
transition: all 400ms linear;
}
.services-section-two .service_single_item:hover .service-img:after {
left: 0;
right: 0;
opacity: 0;
transition: all 400ms linear;
}
.services-section-two .buler-bg {
position: absolute;
right: 7%;
bottom: 0;
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 119, 60, 0.54) 0%, rgba(255, 119, 60, 0) 100%);
height: 620px;
width: 620px;
z-index: -1;
}
.services-section-two .shape {
position: absolute;
right: -13%;
margin: 0;
top: -23%;
text-align: center;
z-index: 1;
}
.services-section-two .shape img {
width: 75%;
}
/***
====================================================================
Testimonial Section
====================================================================
***/
.testimonial-section {
position: relative;
padding: 120px 0 120px;
background-color: var(--theme-color2);
z-index: 1;
}
.testimonial-section .testi-shape2 {
position: absolute;
left: 0;
mix-blend-mode: Luminosity;
z-index: -1;
bottom: 0;
}
.testimonial-section .sec-title {
margin-bottom: 60px;
}
.testimonial-section .sec-title .sub-title {
padding-top: 0;
}
.testimonial-section .tesimonial-img {
margin-bottom: 0;
position: relative;
z-index: 1;
}
.testimonial-section .tesimonial-img::before {
position: absolute;
content: "";
bottom: -2px;
right: 111px;
height: 50px;
width: 50px;
background: var(--theme-color2);
z-index: 1;
}
.testimonial-section .tesimonial-img::after {
position: absolute;
content: "";
bottom: 48px;
right: 111px;
height: 5px;
width: 50px;
background: var(--theme-color6);
z-index: 1;
}
.testimonial-single_box {
margin-top: 10px;
}
.testimonial-single_box .testimonial-author {
padding-left: 50px;
position: relative;
}
.testimonial-single_box .testimonial-author::before {
position: absolute;
left: 0;
top: 18px;
width: 40px;
background: rgba(43, 43, 43, 0.4705882353);
content: "";
height: 1px;
}
.testimonial-single_box .testi_content p {
color: var(--headings-color-2);
font-size: 20px;
line-height: 34px;
margin: 50px 5px 41px 0;
}
.testimonial-single_box .testi-bio h4 {
color: var(--headings-color-2);
font-weight: var(--h5-font-weight);
font-size: 26px;
margin: 0 0 2px;
}
.testimonial-single_box .testi-bio p {
font-size: 18px;
color: var(--headings-color-2);
}
.counter_box {
display: flex;
align-items: center;
gap: 30px;
margin-top: 48px;
}
.counter_box .count-box {
font-weight: 600;
font-size: 80px;
line-height: 90px;
color: var(--headings-color-2);
}
.counter_box .count-box span.plus {
top: -20px;
position: relative;
font-size: 50px;
}
.counter_box h6.counter-title {
color: var(--headings-color-2);
font-weight: 500;
font-size: 24px;
line-height: 34px;
}
/* Testi Owl carousel*/
.tesimonail_list.default-navs .owl-nav {
position: absolute;
top: inherit;
left: -37%;
bottom: -44px;
}
.tesimonail_list.default-navs .owl-nav .owl-next {
display: block;
margin: 0;
height: 50px;
width: 50px;
color: var(--theme-color1);
background-color: var(--theme-color2);
border-radius: 0;
font-size: 16px;
line-height: 50px;
font-weight: 700;
text-align: center;
transition: all 500ms ease;
margin-top: -99px;
}
.tesimonail_list.default-navs .owl-nav .owl-next:hover {
background: var(--theme-color3);
}
.tesimonail_list.default-navs .owl-nav .owl-prev {
display: block;
margin: 0;
height: 50px;
width: 50px;
color: var(--theme-color1);
background-color: var(--theme-color3);
border-radius: 0;
font-size: 16px;
line-height: 50px;
font-weight: 700;
text-align: center;
transition: all 500ms ease;
}
.tesimonail_list.default-navs .owl-nav .owl-prev:hover {
background: var(--theme-color2);
}
/***
====================================================================
Testimonial Section Two
====================================================================
***/
.testimonial-section-two {
padding: 120px 0 120px 120px;
backdrop-filter: blur(10px);
}
.testimonial-section-two .testimonial-single_box-two {
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
position: relative;
z-index: 1;
border: 1.5px solid;
border-image-source: var(--gradient-4);
border-image-slice: 1;
border-radius: 10px;
color: var(--theme-color3);
margin-right: 40px;
overflow: hidden;
border-radius: 10px 0 0 0;
}
.testimonial-section-two .testimonial-single_box-two::before {
position: absolute;
content: "";
bottom: 0;
right: 0;
height: 50px;
width: 50px;
background: var(--theme-color6);
z-index: -1;
}
.testimonial-section-two .testimonial-single_box-two .tesimonial-thumb {
flex-shrink: 0;
}
.testimonial-section-two .testimonial-single_box-two .testi_content {
margin-left: 50px;
margin-top: -7px;
}
.testimonial-section-two .testimonial-single_box-two .testi_content p {
color: var(--text-color);
font-size: 20px;
font-weight: 400;
line-height: 34px;
margin: 37px 91px 0 0;
}
.testimonial-section-two .testimonial-single_box-two .testi_content .testi_aroow {
display: flex;
align-items: center;
gap: 20px;
}
.testimonial-section-two .testimonial-single_box-two .testi_content .testi_aroow span {
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 400;
font-size: 34px;
color: var(--theme-color-white);
}
.testimonial-section-two .testimonial-single_box-two .testi_content .testimonial-author {
display: flex;
align-items: center;
margin-top: 50px;
margin-bottom: 25px;
gap: 30px;
padding-left: 70px;
}
.testimonial-section-two .testimonial-single_box-two .testi_content .testimonial-author .testi-bio h4 {
margin: 0;
color: var(--text-color-bg-theme-color1);
position: relative;
z-index: 1;
}
.testimonial-section-two .testimonial-single_box-two .testi_content .testimonial-author .testi-bio h4::before {
position: absolute;
content: "";
left: -70px;
top: 19px;
width: 57px;
height: 1px;
background: rgba(255, 255, 255, 0.24);
z-index: -1;
}
.testimonial-section-two .testimonial-single_box-two .testi_content .testimonial-author .testi-bio p {
font-size: 18px;
margin: 2px 0 0;
}
.testimonial-section-two .column-right {
padding-left: 40px;
}
.testimonial-section-two .counter_box-testi {
margin-top: 63px;
}
.testimonial-section-two .counter_box-testi .count-box {
font-weight: 400;
font-size: 70px;
line-height: 56px;
color: var(--headings-color-2);
color: var(--theme-color2);
display: inline-block;
margin-bottom: 26px;
border-bottom: 1px solid rgba(244, 245, 248, 0.4117647059);
padding-bottom: 31px;
font-family: var(--title-font);
}
.testimonial-section-two .counter_box-testi .count-box span.plus {
top: -14px;
position: relative;
font-size: 50px;
}
.testimonial-section-two .counter_box-testi .count-box .counter-icn {
margin-top: -14px;
margin-left: 25px;
}
.testimonial-section-two .counter_box-testi h6.counter-title {
font-size: 24px;
font-weight: var(--h5-font-weight);
}
.testimonial-section-two .container-fluid {
padding: 0;
margin: 0;
}
.testimonial-section-two .default-navs .owl-nav {
position: absolute;
top: inherit;
right: 41px;
bottom: 0;
}
.testimonial-section-two .default-navs .owl-nav .owl-next {
display: block;
margin: 0;
height: 50px;
width: 50px;
color: var(--theme-color1);
background-color: var(--theme-color3);
border-radius: 0;
font-size: 16px;
line-height: 50px;
font-weight: 700;
text-align: center;
transition: all 500ms ease;
margin-top: -99px;
}
.testimonial-section-two .default-navs .owl-nav .owl-prev {
display: block;
margin: 0;
height: 50px;
width: 50px;
color: var(--theme-color1);
background-color: var(--theme-color2);
border-radius: 0;
font-size: 16px;
line-height: 50px;
font-weight: 700;
text-align: center;
transition: all 500ms ease;
}
.testimonial-section-two .testi-sp {
position: absolute;
bottom: 11%;
right: 5%;
z-index: -1;
}
.owl-carousel .owl-item img {
width: inherit;
}
/***
====================================================================
Testimonial Section Three
====================================================================
***/
.testimonial-section-three {
padding: 97px 0 120px;
background: var(--theme-color-light);
}
.testimonial-section-three .sec-title {
margin-bottom: 60px;
}
.testimonial-section-three .column-right .counter_box-testi {
float: right;
margin-top: -7px;
}
.testimonial-section-three .column-right .counter_box-testi .count-box {
font-weight: 500;
font-size: 62px;
line-height: 56px;
color: var(--headings-color-2);
color: var(--theme-color2);
display: inline-block;
margin-bottom: 10px;
border-bottom: 1px solid rgba(244, 245, 248, 0.4117647059);
padding-bottom: 14px;
font-family: var(--title-font);
}
.testimonial-section-three .column-right .counter_box-testi .count-box span.plus {
top: -22px;
position: relative;
font-size: 40px;
font-weight: 600;
}
.testimonial-section-three .column-right .counter_box-testi .count-box .counter-icn {
margin-top: -20px;
margin-left: 12px;
height: 60px;
}
.testimonial-section-three .column-right .counter_box-testi h6.counter-title {
font-size: 24px;
font-weight: var(--h5-font-weight);
}
.testimonial-single_box-three {
position: relative;
z-index: 1;
margin: 1px 0;
}
.testimonial-single_box-three::before, .testimonial-single_box-three::after {
content: "";
position: absolute;
z-index: -1;
inset: -0.1rem;
background: conic-gradient(from var(--gradient-angle), var(--theme-color2), var(--theme-color1), var(--theme-color2), var(--theme-color1), var(--theme-color2));
border-radius: inherit;
-webkit-animation: rotate 2.5s linear infinite;
animation: rotate 2.5s linear infinite;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
opacity: 0;
border-radius: 16px;
}
.testimonial-single_box-three:hover::before,
.testimonial-single_box-three ::after {
opacity: 1;
}
@keyframes rotate {
0% {
--gradient-angle: 0deg;
}
100% {
--gradient-angle: 360deg;
}
}
.testimonial-single_box-three .testi-inner {
border: 1px solid var(--border-theme-color1);
position: relative;
z-index: 1;
background: linear-gradient(0deg, #0C0C0C 0%, #1C1C1C 98.44%);
padding: 40px 40px 15px;
border-radius: 16px;
}
.testimonial-single_box-three .testimonial-author {
position: absolute;
right: 40px;
top: 40px;
}
.testimonial-single_box-three .testi_aroow {
margin: 64px 0 18px;
filter: brightness(0) invert(0.4);
transition: 0.5s;
}
.testimonial-single_box-three .testi_content p {
font-family: var(--title-font);
font-weight: 400;
font-size: 20px;
line-height: 32px;
}
.testimonial-single_box-three .testi_content .testi-bio h4 {
font-weight: 500;
font-size: 24px;
margin: 42px 0 3px;
}
.testimonial-single_box-three .testi_content .testi-bio p {
font-family: var(--title-font);
font-size: 16px;
font-weight: 500;
}
.testimonial-single_box-three:hover .testi_aroow {
margin: 64px 0 18px;
filter: brightness(1) invert(0);
}
/***
====================================================================
Process Section
====================================================================
***/
.process-section {
position: relative;
padding: 115px 0 80px;
z-index: 1;
}
.process-section .sec-title .sub-title {
padding-top: 0;
}
.process-section .process-shape {
position: absolute;
left: 9%;
top: 20%;
z-index: -1;
}
.process-section .process-shape2 {
position: absolute;
right: 10%;
top: 19%;
z-index: -1;
}
.process-border {
position: relative;
}
.process-border::before {
content: "";
position: absolute;
left: 0;
top: -2px;
margin: auto;
right: 0;
width: 894px;
height: 1px;
background-image: repeating-linear-gradient(to right, #fcdb66, #fcdb66 7px, transparent 4px, transparent 12px);
}
.process-single-box {
padding: 0;
position: relative;
z-index: 1;
margin-bottom: 30px;
text-align: center;
margin-top: 90px;
}
.process-single-box::before {
content: "";
position: absolute;
top: -86px;
left: 50%;
width: 1.5px;
height: 29px;
background-image: repeating-linear-gradient(to bottom, #fcdb66 0 6px, transparent 6px 12px);
}
.process-single-box .process-thumb {
position: relative;
z-index: 1;
transition: 0.5s;
}
.process-single-box:hover .process-thumb {
transform: rotateY(180deg);
}
.process-single-box .process-content {
padding: 0 20px;
}
.process-single-box .process-content h4 {
font-weight: 500;
font-size: 28px;
margin: 20px 0 11px;
}
.process-single-box h3.process-number {
font-weight: 500;
font-size: 16px;
color: var(--theme-color1);
position: absolute;
top: -53px;
left: 0;
margin: auto;
right: 0;
height: 40px;
width: 40px;
line-height: 40px;
border-radius: 50%;
z-index: 1;
background: var(--theme-color2);
}
/***
====================================================================
Process Section Two
====================================================================
***/
.process-section-two {
position: relative;
padding: 135px 0 100px;
}
.process-section-two .sec-title {
margin-bottom: 50px;
}
.process-section-two .sec-title .sub-title {
padding-top: 0;
}
.process-section-two .process-bx {
position: relative;
z-index: 1;
border-radius: 16px;
}
.process-section-two .process-bx::before, .process-section-two .process-bx::after {
content: "";
position: absolute;
z-index: -1;
inset: -0.1rem;
background: conic-gradient(from var(--gradient-angle), var(--theme-color2), var(--theme-color1), var(--theme-color2), var(--theme-color1), var(--theme-color2));
border-radius: inherit;
-webkit-animation: rotate 2.5s linear infinite;
animation: rotate 2.5s linear infinite;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
opacity: 0;
}
.process-section-two .process-bx:hover::before,
.process-section-two .process-bx ::after {
opacity: 1;
}
@keyframes rotate {
0% {
--gradient-angle: 0deg;
}
100% {
--gradient-angle: 360deg;
}
}
.process-section-two .process-bx .process-conten {
background: rgb(10, 10, 10);
margin-bottom: 20px;
border: 1px solid var(--border-theme-color1);
padding: 33px 30px 33px;
border-radius: 16px;
transition: 0.5s;
position: relative;
z-index: 1;
}
.process-section-two .process-bx .process-conten h3 {
font-family: Plus Jakarta Sans;
font-weight: 500;
font-size: 26px;
color: var(--theme-color3);
margin: 0;
}
.process-section-two .process-bx .process-conten h3 span {
color: var(--theme-color2);
font-family: var(--title-font);
margin-right: 58px;
position: relative;
transition: 0.5s;
}
.process-section-two .process-bx .process-conten h3 span::before {
position: absolute;
content: "";
right: -30px;
top: 3px;
height: 30px;
width: 1px;
background: rgba(255, 255, 255, 0.2901960784);
transition: 0.5s;
}
.process-section-two .process-bx .process-conten h3 span::after {
position: absolute;
content: "";
right: -64px;
top: 17px;
height: 1px;
width: 50px;
background: var(--theme-color2);
opacity: 0;
transition: 0.5s;
}
.process-section-two .process-bx .process-conten:hover span::before {
opacity: 0;
}
.process-section-two .process-bx .process-conten:hover span::after {
opacity: 1;
}
.process-section-two .process-bx .process-conten:hover span {
margin-right: 80px;
}
.process-section-two .process-img {
margin-left: 60px;
margin-top: -17px;
position: relative;
z-index: 1;
}
.process-section-two .process-img .process-icon-box {
position: absolute;
top: 17%;
right: 0;
background: var(--theme-color2);
text-align: center;
border-radius: 16px;
width: 200px;
padding: 35px 0 20px;
}
.process-section-two .process-img .process-icon-box .process-count span.count-text {
font-weight: 600;
font-size: 60px;
line-height: 1;
color: var(--theme-color1);
}
.process-section-two .process-img .process-icon-box .process-count span.plus {
font-family: var(--sec-title-font-family);
font-weight: 400;
font-size: 34px;
position: relative;
top: -31px;
left: 6px;
color: var(--theme-color1);
}
.process-section-two .process-img .process-icon-box .process-count h6.counter-title {
font-size: 18px;
line-height: 28px;
margin-top: 24px;
font-weight: 500;
color: var(--theme-color1);
}
.process-section-two .process-img .process-sp {
position: absolute;
top: -16%;
z-index: -1;
right: -32%;
}
/***
====================================================================
Work Section
====================================================================
***/
.work-section {
position: relative;
padding: 118px 0 90px;
background: var(--theme-color-light);
z-index: 1;
margin-top: -1px;
}
.work-section .work-shapes {
position: absolute;
top: 2%;
left: 28%;
z-index: -1;
-webkit-animation-name: rotateme;
animation-name: rotateme;
-webkit-animation-duration: 20s;
animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
.work-section .sec-title {
margin-bottom: 60px;
}
.work-section .work-bg-blur {
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 119, 60, 0.54) 0%, rgba(255, 119, 60, 0) 100%);
position: absolute;
right: 0;
left: 0;
margin: auto;
bottom: 0;
height: 555px;
width: 555px;
z-index: -1;
border-radius: 50%;
}
.work-single-box {
background: var(--theme-color1);
padding: 30px 30px 30px 212px;
backdrop-filter: blur(10px);
position: relative;
z-index: 1;
margin-bottom: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.work-single-box .work-content h4 {
font-size: 50px;
line-height: 61px;
margin-bottom: 40px;
position: relative;
padding-left: 20px;
}
.work-single-box .work-content h4::before {
position: absolute;
content: "";
left: -100px;
top: 29px;
background: rgba(244, 245, 248, 0.4117647059);
width: 100px;
height: 1px;
}
.work-single-box .work-content h4 span {
font-weight: 300;
}
.work-single-box .work-content p {
margin-right: 50px;
line-height: 26px;
}
.work-single-box .work-content span.work-date {
font-family: var(--title-font);
font-weight: 500;
font-size: 18px;
color: var(--theme-color2);
margin: 9px 0 56px;
display: inline-block;
}
.work-single-box .work-content .nexella-buton a {
font-size: 16px;
padding: 15px 43px;
}
.work-single-box h3.wokr-number {
font-weight: 300;
font-size: 40px;
color: #A1A1A1;
position: absolute;
top: 83px;
left: 50px;
}
.work-single-box .work-img {
flex-shrink: 0;
position: relative;
z-index: 1;
}
.work-single-box .work-img .work-shape {
position: absolute;
bottom: -30px;
left: -73px;
transition: 0.5s;
opacity: 0;
}
.work-single-box:hover .work-shape {
opacity: 1;
left: -50px;
bottom: 0;
}
/***
====================================================================
Work Section Two
====================================================================
***/
.work-section-two {
background: var(--theme-color-light);
padding: 115px 50px 120px;
position: relative;
z-index: 1;
}
.work-section-two .sec-title {
margin-bottom: 50px;
}
.work-section-two .sec-title .sub-title {
padding-top: 0;
}
.work-section-two .work-single-box-two {
position: relative;
z-index: 1;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
margin-bottom: 30px;
margin: 0 0 50px;
}
.work-section-two .work-single-box-two::before, .work-section-two .work-single-box-two::after {
content: "";
position: absolute;
z-index: -1;
inset: -0.1rem;
background: conic-gradient(from var(--gradient-angle), var(--theme-color2), var(--theme-color1), var(--theme-color2), var(--theme-color1), var(--theme-color2));
border-radius: inherit;
-webkit-animation: rotate 2.5s linear infinite;
animation: rotate 2.5s linear infinite;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
opacity: 0;
}
.work-section-two .work-single-box-two:hover::before,
.work-section-two .work-single-box-two ::after {
opacity: 1;
}
@keyframes rotate {
0% {
--gradient-angle: 0deg;
}
100% {
--gradient-angle: 360deg;
}
}
.work-section-two .work-single-box-two .work-box-inner {
background: linear-gradient(0deg, #0C0C0C 0%, #1C1C1C 98.44%);
padding: 50px 20px 20px;
border-radius: 16px;
}
.work-section-two .work-single-box-two .work-box-inner.style-two {
padding: 20px 20px 50px !important;
background: linear-gradient(0deg, #1C1C1C 0.69%, #0C0C0C 98.44%) !important;
}
.work-section-two .work-single-box-two .work-box-inner.style-two .work-content {
margin-bottom: 0;
margin-top: 60px;
}
.work-section-two .work-single-box-two .work-box-inner.style-two .work-content p {
margin: 0;
}
.work-section-two .work-single-box-two .work-box-inner.style-two .work-buton a {
top: inherit;
bottom: -9%;
}
.work-section-two .work-single-box-two.bottom {
transform: translateY(50px) !important;
}
.work-section-two .work-single-box-two .work-content {
text-align: center;
margin-bottom: 40px;
}
.work-section-two .work-single-box-two .work-content h4 {
font-weight: 500;
font-size: 28px;
line-height: 38px;
margin-bottom: 20px;
cursor: pointer;
transition: 0.5s;
}
.work-section-two .work-single-box-two .work-content h4:hover {
color: var(--theme-color2);
}
.work-section-two .work-single-box-two .work-content p {
font-weight: 400;
font-size: 14px;
color: var(--theme-color2);
border: 1px solid var(--border-theme-color1);
display: inline-block;
border-radius: 20px;
padding: 4px 20px;
}
.work-section-two .work-single-box-two .work-img {
position: relative;
z-index: 1;
}
.work-section-two .work-single-box-two .work-img:after {
background: rgba(255, 255, 255, 0.3);
bottom: 0;
content: "";
left: 50%;
position: absolute;
right: 51%;
top: 0;
opacity: 1;
pointer-events: none;
transition: all 400ms linear;
}
.work-section-two .work-single-box-two .work-img img {
border-radius: 15px;
}
.work-section-two .work-single-box-two .work-img .work-buton a {
display: inline-block;
position: absolute;
top: -30px;
height: 60px;
width: 60px;
line-height: 60px;
background: var(--theme-color7);
border-radius: 50%;
text-align: center;
color: #fff;
left: 0;
right: 0;
margin: auto;
z-index: 1;
transform: rotate(-45deg);
font-size: 16px;
transition: all 400ms linear;
}
.work-section-two .work-single-box-two:hover .work-img:after {
left: 0;
right: 0;
opacity: 0;
transition: all 400ms linear;
}
.work-section-two .work-single-box-two:hover .work-buton a {
background: var(--theme-color2);
color: var(--theme-color1);
}
.work-section-two .container-fluid {
padding: 0;
margin: 0;
}
.work-section-two .shape-1 {
position: absolute;
top: 13%;
left: 13%;
z-index: -1;
}
.work-section-two .shape-2 {
position: absolute;
top: 15%;
right: 12%;
z-index: -1;
}
.work-section-two .shape-2 img {
filter: brightness(0) invert(1);
opacity: 0.5;
}
/***
====================================================================
Marquee Section
====================================================================
***/
.marquee-section {
position: relative;
background-color: #ffffff;
padding: clamp(42px, 6vw, 90px) 0;
}
.marquee {
position: relative;
--duration: 30s;
--gap: clamp(34px, 5vw, 86px);
display: flex;
overflow: hidden;
user-select: none;
gap: var(--gap);
}
.marquee .marquee-group {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-around;
gap: var(--gap);
min-width: 100%;
animation: scroll var(--duration) linear infinite;
}
.marquee .text {
flex: 0 0 auto;
position: relative;
display: flex;
align-items: center;
justify-content: center;
perspective: 700px;
}
.marquee .text:before {
content: none;
}
.marquee .text .marquee-logo {
width: clamp(220px, 24vw, 430px);
height: auto;
aspect-ratio: 790 / 247;
object-fit: cover;
border-radius: clamp(24px, 4vw, 56px);
box-shadow: 0 18px 44px rgba(15, 99, 189, 0.18);
transform-style: preserve-3d;
animation: marqueeLogoTilt 4.5s ease-in-out infinite;
}
.marquee .text:nth-child(even) .marquee-logo {
animation-delay: -2.2s;
}
@media (prefers-reduced-motion: reduce) {
.marquee .marquee-group {
animation-play-state: paused;
}
.banner-section .hero-img,
.marquee .text .marquee-logo {
animation: none;
}
}
@keyframes marqueeLogoTilt {
0%, 100% {
transform: translateZ(0) rotateX(0deg) rotateY(-6deg);
}
50% {
transform: translateZ(24px) rotateX(5deg) rotateY(8deg);
}
}
/* Second marquee section Two */
.marquee-section-two {
position: relative;
background-color: var(--theme-color2);
padding: 40px 0;
}
.marquee-two {
position: relative;
--duration: 30s;
--gap: 0px;
display: flex;
overflow: hidden;
user-select: none;
gap: var(--gap);
}
.marquee-two .marquee-group {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-around;
gap: var(--gap);
min-width: 100%;
animation: scroll var(--duration) linear infinite;
}
.marquee-two .text {
font-size: 34px;
line-height: 1.2;
color: var(--theme-color4);
font-weight: 600;
margin: 0 43px;
position: relative;
font-family: var(--title-font);
}
.marquee-two .text:before {
content: "";
position: absolute;
left: -56px;
top: 10px;
height: 25px;
width: 25px;
background: url(../images/home-2/marque-icon.png);
-webkit-animation-name: rotateme;
animation-name: rotateme;
-webkit-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@media (prefers-reduced-motion: reduce) {
.marquee-two .marquee-group {
animation-play-state: paused;
}
}
.marquee-three {
position: relative;
--duration: 30s;
--gap: 0px;
display: flex;
overflow: hidden;
user-select: none;
gap: var(--gap);
}
.marquee-three .marquee-group {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-around;
gap: var(--gap);
min-width: 100%;
animation: scroll var(--duration) linear infinite;
}
.marquee-three .text {
font-size: 80px;
line-height: 1.2;
color: var(--theme-color3);
font-weight: 800;
margin: 0 90px;
position: relative;
font-family: var(--title-font);
}
.marquee-three .text:before {
content: "";
content: "";
position: absolute;
left: -121px;
top: 19px;
height: 65px;
width: 65px;
background: url(../images/home-2/arrwo-icon.png);
background-repeat: no-repeat;
}
@media (prefers-reduced-motion: reduce) {
.marquee-three .marquee-group {
animation-play-state: paused;
}
}
/***
====================================================================
Marquee Section Style Three
====================================================================
***/
.style_three {
padding: 40px 0;
}
.style_three .marquee .text:before {
display: none;
}
.style_three .marquee .text h1 {
margin: 0 55px;
font-weight: 800;
font-size: 115px;
border: 0;
padding: 0;
border-radius: 0;
}
.marquee-section-two.four {
position: relative;
background-color: var(--theme-color2);
padding: 37px 0;
}
.marquee-two.four .text {
font-size: 38px;
margin: 0 75px;
line-height: 2;
text-transform: capitalize;
}
.marquee-two.four .text:before {
left: -101px;
top: 13px;
height: 58px;
width: 58px;
background: url(../images/home-4/marque-shap.png);
background-repeat: no-repeat;
}
@media (prefers-reduced-motion: reduce) {
.marquee-two.four .marquee-group {
animation-play-state: paused;
}
}
.marquee-section-two.five {
position: relative;
background-color: var(--theme-color1);
padding: 27px 0;
}
.marquee-two.five .text {
font-size: 38px;
margin: 0 75px;
line-height: 2;
text-transform: capitalize;
font-size: 600;
color: var(--theme-color3);
}
.marquee-two.five .text:before {
left: -101px;
top: 13px;
height: 58px;
width: 58px;
background: url(../images/home-6/rotate.png);
background-repeat: no-repeat;
}
@media (prefers-reduced-motion: reduce) {
.marquee-two.five .marquee-group {
animation-play-state: paused;
}
}
/* Global keyframes — declared only once */
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-100% - var(--gap)));
}
}
/***
====================================================================
team Section
====================================================================
***/
.team-section {
position: relative;
padding: 100px 0 90px;
background: #0A0A0A;
}
.our-team-intro {
margin-bottom: 10px;
}
.our-team-intro .team-culmn {
display: flex;
align-items: center;
justify-content: space-between;
}
.our-team-intro .team-des {
font-size: 18px;
line-height: 28px;
width: 62%;
}
.our-team-intro .nexella-buton {
margin-top: -18px;
margin-right: 62px;
}
.our-team-intro .nexella-buton a {
font-size: 16px;
padding: 15px 40px;
margin-top: -18px;
}
.team-single-box {
position: relative;
margin-bottom: 30px;
}
.team-single-box .inner-box {
position: relative;
}
.team-single-box .inner-box:hover .image img {
transform: scale(1.1);
}
.team-single-box .inner-box:hover .social-links {
transform: scaleY(1);
opacity: 1;
visibility: visible;
}
.team-single-box .inner-box:hover .name a {
color: var(--theme-color1);
}
.team-single-box .inner-box:hover .designation {
color: var(--theme-color1);
}
.team-single-box .inner-box:hover .designation:before {
background: var(--theme-color1);
}
.team-single-box .inner-box:hover .nexella-hover-bx {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.team-single-box .image-box {
position: relative;
}
.team-single-box .image-box .image {
position: relative;
overflow: hidden;
margin-bottom: 0;
z-index: 1;
}
.team-single-box .image-box .image img {
width: 100%;
transition: all 400ms ease;
}
.team-single-box .info-box {
padding: 32px 35px 36px;
background: var(--theme-color7);
width: 90%;
left: 42px;
position: relative;
transition: all 300ms ease;
z-index: 1;
}
.team-single-box .info-box .name {
margin-bottom: 8px;
}
.team-single-box .info-box .name a {
font-weight: 500;
z-index: 2;
font-size: 26px;
transition: all 300ms ease;
display: inline-block;
}
.team-single-box .info-box .designation {
position: relative;
display: block;
z-index: 2;
font-family: var(--title-font);
transition: all 300ms ease;
padding-left: 50px;
}
.team-single-box .info-box .designation::before {
position: absolute;
left: 0;
top: 15px;
width: 40px;
content: "";
height: 1px;
background: var(--border-theme-color1);
transition: all 300ms ease;
}
.team-single-box .info-box .nexella-hover-bx {
background: var(--theme-color2);
height: 100%;
top: 0;
opacity: 0;
position: absolute;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
width: 25%;
z-index: -1;
}
.team-single-box .info-box .hover-bx {
left: 0;
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.team-single-box .info-box .hover-bx2 {
left: 25%;
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.team-single-box .info-box .hover-bx3 {
left: 50%;
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.team-single-box .info-box .hover-bx4 {
left: 75%;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.team-single-box .share-icon {
position: absolute;
left: 42px;
bottom: 0px;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
font-size: 18px;
color: var(--theme-color-white);
background-color: var(--theme-color2);
transition: all 300ms ease;
z-index: 3;
color: var(--theme-color1);
}
.team-single-box .social-links {
position: absolute;
left: 42px;
bottom: 50px;
display: flex;
align-items: center;
flex-direction: column;
transform: scaleY(0);
transform-origin: bottom;
z-index: 3;
visibility: hidden;
opacity: 0;
transition: all 400ms ease;
}
.team-single-box .social-links a {
position: relative;
height: 50px;
width: 50px;
display: block;
font-size: 16px;
line-height: 50px;
text-align: center;
color: var(--theme-color3);
transition: all 300ms ease;
backdrop-filter: blur(10px);
background: rgba(244, 245, 248, 0.1490196078);
margin-bottom: 10px;
}
.team-single-box .social-links a:hover {
color: var(--theme-color2);
}
/***
====================================================================
team Section Two
====================================================================
***/
.team-section.style-two {
background: var(--theme-color-light);
padding: 100px 0 90px;
}
.team-section.style-two .our-team-intro {
margin-bottom: -5px;
}
.team-section.style-two .outer-bx {
max-width: 1635px;
margin: auto;
}
.team-single-box-two {
position: relative;
margin-bottom: 30px;
padding: 25px 20px 28px;
border-radius: 20px;
margin-top: 40px;
}
.team-single-box-two.bottom {
transform: translateY(-40px);
}
.team-single-box-two .image-box {
position: relative;
z-index: 1;
}
.team-single-box-two .image-box figure {
margin: 0;
}
.team-single-box-two .info-box {
position: relative;
transition: all 300ms ease;
z-index: 1;
margin-top: 8px;
}
.team-single-box-two .info-box .name {
margin-bottom: 0;
}
.team-single-box-two .info-box .name a {
font-family: var(--title-font);
font-weight: 500;
font-size: 22px;
transition: all 300ms ease;
display: inline-block;
color: var(--theme-color-white);
line-height: 0;
}
.team-single-box-two .info-box .designation {
position: relative;
display: block;
z-index: 2;
font-family: var(--title-font);
transition: all 300ms ease;
font-size: 15px;
color: var(--theme-color3);
}
.team-single-box-two .share-icon {
position: absolute;
left: 20px;
top: 0;
height: 50px;
width: 50px;
line-height: 50px;
border-radius: 50%;
text-align: center;
font-size: 18px;
background-color: rgb(97, 97, 97);
transition: all 300ms ease;
z-index: 3;
color: var(--theme-color3);
transition: all 300ms ease;
}
.team-single-box-two .social-links {
position: absolute;
left: 20px;
top: 70px;
display: flex;
align-items: center;
flex-direction: column;
transform: scaleX(0);
z-index: 3;
visibility: visible;
opacity: 1;
transition: all 400ms ease;
}
.team-single-box-two .social-links a {
position: relative;
height: 50px;
width: 50px;
border-radius: 50%;
display: block;
font-size: 16px;
line-height: 50px;
text-align: center;
color: var(--theme-color3);
transition: all 300ms ease;
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.2);
margin-bottom: 10px;
}
.team-single-box-two .social-links a:hover {
background: var(--theme-color2);
color: var(--theme-color1);
}
.team-single-box-two:hover .share-icon {
background: var(--theme-color1);
}
.team-single-box-two:hover .social-links {
transform: scaleX(1);
opacity: 1;
visibility: visible;
}
.team-single-box-two:hover .info-box {
margin-left: 20px;
}
.team-single-box-two:hover .name a {
color: var(--theme-color1);
}
.team-single-box-two:hover .designation {
color: var(--theme-color1);
}
.team-single-box-two:hover .designation:before {
background: var(--theme-color1);
}
.team-single-box-two .nexella-hover-bx {
background: var(--theme-color2);
height: 100%;
top: 0;
opacity: 0;
position: absolute;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
width: 25%;
z-index: -1;
}
.team-single-box-two .hover-bx {
left: 0;
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
border-radius: 20px 0 0 20px;
}
.team-single-box-two .hover-bx2 {
left: 25%;
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.team-single-box-two .hover-bx3 {
left: 50%;
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.team-single-box-two .hover-bx4 {
left: 75%;
-webkit-transition-delay: 0s;
transition-delay: 0s;
border-radius: 0 20px 20px 0;
}
.team-single-box-two:hover .nexella-hover-bx {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
/***
====================================================================
Contact Sectiom
====================================================================
***/
.contact-section {
padding: 85px 0 100px;
position: relative;
background: url(../images/main-home/bg.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
}
.contact-section .sec-title .sub-title {
padding-top: 0;
}
.contact-section .sec-title {
margin-bottom: 28px;
}
.contact-section .contact-sp {
position: absolute;
left: -12%;
top: 24%;
z-index: -1;
}
.contact-right-warp {
margin-top: 37px;
position: relative;
z-index: 1;
}
.contact-right-warp .shape {
position: absolute;
right: 38%;
bottom: -13px;
z-index: -1;
}
.contact-desc {
color: var(--theme-color7);
width: 70%;
font-size: 18px;
line-height: 28px;
margin-bottom: 70px;
}
.contact-info p {
font-family: var(--title-font);
font-weight: 500;
font-size: 24px;
margin: 0;
color: var(--theme-color1);
}
.contact-info h4 {
font-family: Plus Jakarta Sans;
font-size: 34px;
font-weight: 600;
color: var(--theme-color1);
margin-top: 8px;
}
.contact-forms {
position: relative;
margin-left: 80px;
z-index: 1;
}
.contact-forms .service-info__badge {
color: var(--theme-color-white);
font-size: 30px;
font-weight: 600;
margin: 0 0 33px;
}
.contact-forms .form-group {
position: relative;
margin-bottom: 20px;
}
.contact-forms .form-group:last-child {
margin-bottom: 0;
}
.contact-forms .form-group .select2-container--default .select2-selection--single,
.contact-forms .form-group input:not([type=submit]),
.contact-forms .form-group textarea,
.contact-forms .form-group select {
position: relative;
display: block;
height: 55px;
width: 100%;
border-radius: 40px;
padding: 21px 30px;
font-size: 16px;
color: var(--theme-color-white);
background: rgba(255, 255, 255, 0.1);
font-weight: 400;
border: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 0;
transition: all 300ms ease;
backdrop-filter: blur(20px) !important;
}
.contact-forms .form-group ::-webkit-input-placeholder {
color: var(--theme-color-white);
}
.contact-forms .form-group ::-moz-input-placeholder {
color: var(--theme-color-white);
}
.contact-forms .form-group ::-ms-input-placeholder {
color: var(--theme-color-white);
}
.contact-forms .form-group input:focus,
.contact-forms .form-group select:focus,
.contact-forms .form-group textarea:focus {
border-color: var(--border-theme-color2);
}
.contact-forms .form-group textarea {
height: 200px;
resize: none;
}
.contact-forms .form-group input[type=submit],
.contact-forms .form-group .theme-btn {
display: inline-block;
border: 0;
font-size: 16px;
color: var(--theme-color1);
font-weight: 500;
padding: 15px 43px;
border-radius: 100px;
position: relative;
z-index: 1;
transition: 0.5s;
background: var(--theme-color2);
animation: 1s 1.6s fadeInUp both;
margin-top: 20px;
}
.contact-forms .form-group input[type=submit]:before,
.contact-forms .form-group .theme-btn:before {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: var(--text-color-bg-theme-color1);
border-radius: 100px;
transition: 0.5s;
transform: scale(0);
}
.contact-forms .form-group input[type=submit]:hover:before,
.contact-forms .form-group .theme-btn:hover:before {
transform: scale(1);
}
.contact-forms .form-group input[type=submit]:hover,
.contact-forms .form-group .theme-btn:hover {
color: var(--bg-theme-color1);
}
.contact-forms .form-group input[type=submit] i,
.contact-forms .form-group .theme-btn i {
position: absolute;
right: -59px;
height: 59px;
width: 59px;
line-height: 58px;
top: 0;
border-radius: 50%;
text-align: center;
font-size: 16px;
transition: 0.5s;
background: var(--theme-color2);
font-weight: var(--h3-font-weight);
transform: rotate(-45deg);
}
.contact-forms .form-group input[type=submit]:hover i,
.contact-forms .form-group .theme-btn:hover i {
color: var(--bg-theme-color1);
background: var(--text-color-bg-theme-color1);
transform: scale(1);
}
.contact-forms .contact-sps {
position: absolute;
top: 0%;
left: 6%;
z-index: -1;
}
/***
====================================================================
Contact Sectiom
====================================================================
***/
.contact-section-two {
padding: 93px 0 120px;
position: relative;
background: url(../images/home-2/contact-bg.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
}
.contact-section-two .sec-title .sub-title {
padding-top: 0;
}
.contact-section-two .sec-title {
margin-bottom: 28px;
}
.contact-section-two .contact-shape {
position: absolute;
right: 9%;
bottom: 30%;
z-index: -1;
}
.contact-section-two .contact-right-warp {
position: relative;
z-index: 1;
margin-top: 0;
margin-left: 56px;
}
.contact-section-two .contact-right-warp .shape {
position: absolute;
right: 38%;
bottom: -13px;
z-index: -1;
}
.contact-section-two .contact-desc {
color: var(--theme-color7);
width: 70%;
font-size: 18px;
line-height: 28px;
margin-bottom: 70px;
}
.contact-section-two .contact-info p {
font-family: var(--title-font);
font-weight: 500;
font-size: 24px;
margin: 0;
color: var(--theme-color3);
}
.contact-section-two .contact-info h4 {
font-size: 34px;
font-weight: 600;
color: var(--theme-color3);
margin-top: 8px;
}
.contact-section-two .contact-btn {
margin-top: 78px;
}
.contact-section-two .contact-btn a {
display: inline-block;
font-family: var(--title-font);
font-weight: 500;
font-size: 18px;
line-height: 24px;
color: var(--theme-color3);
position: relative;
}
.contact-section-two .contact-btn a::before {
position: absolute;
content: "";
right: 0;
top: -22px;
height: 70px;
width: 70px;
line-height: 70px;
border: 2px solid var(--theme-color2);
border-radius: 50%;
transition: 0.5s;
opacity: 0;
}
.contact-section-two .contact-btn a:hover:before {
right: -25px;
opacity: 1;
}
.contact-section-two .contact-btn a:hover {
color: var(--theme-color2);
}
.contact-section-two .contact-btn a img {
margin-left: 10px;
}
.contact-section-two .contact-forms-two {
position: relative;
z-index: 1;
background-color: var(--theme-color2);
border-radius: 40px;
padding: 60px 80px 60px;
margin-top: -162px;
}
.contact-section-two .contact-forms-two .service-info__badge {
color: var(--theme-color4);
font-size: 46px;
font-weight: 700;
margin-bottom: 15px;
}
.contact-section-two .contact-forms-two p.contact-des {
font-family: var(--title-font);
font-weight: 500;
font-size: 18px;
line-height: 28px;
color: rgba(28, 28, 28, 0.8509803922);
margin-bottom: 42px;
}
.contact-section-two .contact-forms-two .form-group {
position: relative;
margin-bottom: 20px;
}
.contact-section-two .contact-forms-two .form-group:last-child {
margin-bottom: 0;
}
.contact-section-two .contact-forms-two .form-group .select2-container--default .select2-selection--single,
.contact-section-two .contact-forms-two .form-group input:not([type=submit]),
.contact-section-two .contact-forms-two .form-group textarea,
.contact-section-two .contact-forms-two .form-group select {
position: relative;
display: block;
height: 50px;
padding: 0 0 7px 0;
width: 100%;
border-radius: 0;
font-size: 18px;
color: var(--theme-color1);
font-weight: 500;
border-bottom: 2px solid rgba(0, 0, 0, 0.1215686275);
transition: all 300ms ease;
background: transparent;
}
.contact-section-two .contact-forms-two .form-group ::-webkit-input-placeholder {
color: var(--theme-color1);
}
.contact-section-two .contact-forms-two .form-group ::-moz-input-placeholder {
color: var(--theme-color-white);
}
.contact-section-two .contact-forms-two .form-group ::-ms-input-placeholder {
color: var(--theme-color-white);
}
.contact-section-two .contact-forms-two .form-group input:focus,
.contact-section-two .contact-forms-two .form-group select:focus,
.contact-section-two .contact-forms-two .form-group textarea:focus {
border-bottom: 2px solid rgba(0, 0, 0, 0.1215686275);
background: transparent;
}
.contact-section-two .contact-forms-two .form-group textarea {
height: 120px;
resize: none;
padding: 5px 0;
}
.contact-section-two .contact-forms-two .form-group input[type=submit],
.contact-section-two .contact-forms-two .form-group .theme-btn {
display: block;
border: 0;
font-size: 18px;
color: var(--theme-color3);
font-weight: 500;
padding: 18px 43px;
border-radius: 100px;
position: relative;
z-index: 1;
transition: 0.5s;
background: var(--theme-color4);
animation: 1s 1.6s fadeInUp both;
text-align: center;
width: 100%;
font-family: var(--title-font);
overflow: hidden;
margin-top: 20px;
}
.contact-section-two .contact-forms-two .form-group input[type=submit]:before,
.contact-section-two .contact-forms-two .form-group .theme-btn:before {
position: absolute;
content: "";
top: 0;
right: 0;
height: 100%;
width: 0;
z-index: -1;
background: var(--text-color-bg-theme-color1);
border-radius: 100px;
transition: 0.5s;
}
.contact-section-two .contact-forms-two .form-group input[type=submit]:hover:before,
.contact-section-two .contact-forms-two .form-group .theme-btn:hover:before {
width: 100%;
left: 0;
}
.contact-section-two .contact-forms-two .form-group input[type=submit]:hover,
.contact-section-two .contact-forms-two .form-group .theme-btn:hover {
color: var(--bg-theme-color1);
}
.contact-section-two .contact-forms-two .contact-sps {
position: absolute;
top: 0%;
left: 6%;
z-index: -1;
}
/***
====================================================================
News Section
====================================================================
***/
.news-section {
position: relative;
z-index: 1;
padding: 100px 0 80px;
overflow: hidden;
background: var(--theme-color-light);
}
.news-section .sec-title {
margin-bottom: 60px;
}
.news-section .nexella-buton {
margin-top: -28px;
text-align: right;
margin-right: 59px;
}
.news-section .news-sp1 {
position: absolute;
top: 28%;
left: 0;
z-index: -1;
}
.news-section .news-sp2 {
position: absolute;
top: 13%;
right: 5%;
z-index: -1;
}
.news-block {
position: relative;
margin-bottom: 30px;
overflow: hidden;
}
.news-block .blog-single-box {
position: relative;
transition: all 300ms ease;
box-shadow: 0 10px 60px rgba(0, 0, 0, 0.07);
overflow: hidden;
background: var(--theme-color9);
padding: 25px 25px 36px 25px;
border-radius: 30px;
}
.news-block .blog-single-box:hover .image-box .image a:after {
left: 0;
right: 0;
opacity: 0;
transition: all 400ms linear;
}
.news-block .blog-single-box:hover .image img {
transform: scale(1.1);
}
.news-block .blog-single-box.style_two {
padding: 0;
border-radius: 0;
background: transparent;
}
.news-block .blog-single-box.style_two .image {
border-radius: 0;
}
.news-block .blog-single-box.style_two .image img {
transform: scale(1);
}
.news-block .blog-single-box.style_two .content-box {
margin-left: 0;
}
.news-block .blog-single-box.style_two .content-box .date {
font-family: var(--title-font);
font-weight: 500;
font-size: 14px;
border: 2px solid var(--border-theme-color1);
padding: 1px 20px;
border-radius: 40px;
display: table;
}
.news-block .blog-single-box.style_two .content-box .title {
font-weight: 500;
}
.news-block .blog-single-box.style_two .content-box .title span {
font-weight: 500;
}
.news-block .blog-single-box.style_two .content-box .title strong {
font-weight: 500;
}
.news-block .blog-single-box.style_two .content-box .blog-author {
margin-top: 12px;
}
.news-block .blog-single-box.style_two .content-box .blog-author span {
font-weight: 500;
font-size: 18px;
color: var(--theme-color3);
font-family: var(--title-font);
}
.news-block .blog-single-box.style_two .content-box .blog-author span a {
color: var(--theme-color2);
}
.news-block .image-box {
position: relative;
}
.news-block .image-box .image {
position: relative;
overflow: hidden;
margin-bottom: 0;
border-radius: 33px;
}
.news-block .image-box .image img {
display: block;
width: 100%;
transition: all 400ms ease;
}
.news-block .image-box .image a:after {
background: rgba(255, 255, 255, 0.3);
bottom: 0;
content: "";
left: 50%;
position: absolute;
right: 51%;
top: 0;
opacity: 1;
pointer-events: none;
transition: all 400ms linear;
}
.news-block .content-box {
margin-top: 30px;
margin-left: 30px;
}
.news-block .content-box .date {
font-family: var(--title-font);
font-weight: 500;
font-size: 16px;
border: 2px solid var(--border-theme-color1);
padding: 3px 20px;
border-radius: 40px;
display: table;
}
.news-block .content-box .title {
margin: 12px 0 0;
font-family: var(--title-font);
font-weight: 700;
font-size: 24px;
line-height: 34px;
text-decoration: none;
transition: 0.5s;
position: relative;
display: inline-block;
}
.news-block .content-box .title span {
font-weight: 200;
position: relative;
z-index: 1;
}
.news-block .content-box .title span::before {
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 0;
height: 1px;
background: var(--theme-color2);
transition: all 400ms linear;
z-index: -1;
}
.news-block .content-box .title:hover span::before {
width: 100%;
}
.news-block .content-box .title strong {
color: var(--theme-color3);
position: relative;
z-index: 1;
font-weight: 700;
transition: all 400ms linear;
}
.news-block .content-box .title strong::before {
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 0;
height: 1px;
background: var(--theme-color2);
transition: all 400ms linear;
z-index: -1;
}
.news-block .content-box .title:hover strong::before {
width: 100%;
}
.news-block .content-box .title:hover strong {
color: var(--theme-color2);
}
.news-block .content-box .title:hover {
color: var(--theme-color2);
}
.news-block .content-box .text {
margin-top: 20px;
}
/***
====================================================================
News Section Style Two
====================================================================
***/
.news-section.style_two {
background: var(--theme-color-light);
padding: 13px 0 150px;
z-index: 1;
overflow: hidden;
}
/***
====================================================================
Why Choose US Section
====================================================================
***/
.why-choose-us-section {
background-color: var(--theme-color-light);
position: relative;
z-index: 1;
padding: 115px 0 105px;
}
.why-choose-us-section .sec-title {
margin-bottom: 0;
}
.why-choose-us-section .sec-title .sub-title {
padding-top: 0;
}
.why-choose-us-section .nexella-buton {
text-align: right;
margin-right: 60px;
}
.why-choose-us-section .nexella-buton a {
font-size: 16px;
padding: 14px 42px;
}
.why-choose-us-section .choose-single-box {
border-bottom: 1px solid var(--border-theme-color1);
margin-right: 48px;
margin-bottom: 30px;
padding-bottom: 4px;
}
.why-choose-us-section .choose-single-box .choose-icon i {
display: inline-block;
background: var(--theme-color1);
height: 60px;
width: 60px;
border-radius: 50%;
line-height: 60px;
text-align: center;
color: var(--theme-color2);
font-size: 26px;
margin-bottom: 15px;
transition: all 400ms linear;
cursor: pointer;
}
.why-choose-us-section .choose-single-box .choose-content h4 {
font-weight: 500;
font-size: 26px;
margin: 0 0 14px;
}
.why-choose-us-section .choose-single-box .choose-content p {
line-height: 26px;
font-size: 16px;
}
.why-choose-us-section .choose-single-box:nth-child(2) {
border-bottom: 0;
}
.why-choose-us-section .choose-single-box:hover .choose-icon i {
transform: scaleX(-1);
}
.why-choose-us-section .column-right {
padding-left: 52px;
}
.why-choose-us-section .column-right .choose-single-box {
margin-right: 0;
}
.why-choose-us-section .choose-thumb {
margin-left: -10px;
position: relative;
z-index: 1;
margin-top: -40px;
}
.why-choose-us-section .choose-thumb img {
width: 100%;
}
.why-choose-us-section .choose-thumb .dote-shape {
position: absolute;
left: 20%;
bottom: -22%;
z-index: -1;
}
.why-choose-us-section .choose-shape {
position: absolute;
top: 53px;
left: 5%;
right: 0;
text-align: center;
z-index: -1;
}
.why-choose-us-section .choose-shape2 {
position: absolute;
top: -56%;
right: 0;
z-index: -1;
}
.why-choose-us-section .buler-bg {
position: absolute;
left: 35%;
bottom: 5%;
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 119, 60, 0.54) 0%, rgba(255, 119, 60, 0) 100%);
height: 577px;
width: 577px;
z-index: -1;
}
/***
====================================================================
Why Choose US Section Two
====================================================================
***/
.why-choose-us-section-two {
padding: 120px 0 45px;
position: relative;
z-index: 1;
overflow: hidden;
}
.why-choose-us-section-two .choose-shape {
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
}
.why-choose-us-section-two .feature-grid {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 25px;
max-width: 645px;
}
.why-choose-us-section-two .feature-grid .feature-item {
position: relative;
background: #2B2523;
border-radius: 999px;
}
.why-choose-us-section-two .feature-grid .feature-item::before, .why-choose-us-section-two .feature-grid .feature-item::after {
content: "";
position: absolute;
z-index: -1;
inset: -0.1rem;
background: conic-gradient(from var(--gradient-angle), var(--theme-color2), var(--theme-color1), var(--theme-color2), var(--theme-color1), var(--theme-color2));
border-radius: inherit;
-webkit-animation: rotate 2.5s linear infinite;
animation: rotate 2.5s linear infinite;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
opacity: 0;
border-radius: 999px;
}
.why-choose-us-section-two .feature-grid .feature-item:hover::before,
.why-choose-us-section-two .feature-grid .feature-item ::after {
opacity: 1;
}
@keyframes rotate {
0% {
--gradient-angle: 0deg;
}
100% {
--gradient-angle: 360deg;
}
}
.why-choose-us-section-two .feature-grid .feature-item .featuer-list {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 24px;
border-radius: 999px;
font-family: var(--title-font);
font-weight: 500;
font-size: 18px;
color: var(--theme-color-white);
position: relative;
z-index: 1;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.why-choose-us-section-two .nexella-buton {
margin-top: 45px;
}
.why-choose-us-section-two .nexella-buton a {
font-size: 16px;
padding: 14px 43px;
}
.why-choose-us-section-two .btn-box {
display: inline-block;
margin-top: 283px;
margin-left: -75px;
}
/***
====================================================================
Skill Section
====================================================================
***/
.skill-section {
position: relative;
padding: 120px 0 105px;
background: url(../images/home-2/skill-bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
z-index: 1;
}
.skill-section .outer-box {
max-width: 1627px;
margin: 0 auto;
}
.skill-section .inner-column {
margin-left: 5px;
width: 81%;
}
.skill-section .sec-title {
margin-bottom: 50px;
}
.skill-section .sec-title .sub-title {
padding-top: 0;
}
.skill-section .skill-img {
position: relative;
z-index: 1;
}
.skill-section .skill-img .skill-icon-box {
position: absolute;
bottom: 0;
right: 40px;
background: var(--theme-color1);
text-align: center;
border-radius: 16px;
width: 332px;
padding: 34px 30px 24px;
display: flex;
align-items: center;
gap: 20px;
}
.skill-section .skill-img .skill-icon-box .skill-coun-icon {
height: 60px;
width: 60px;
line-height: 60px;
background: var(--theme-color2);
border-radius: 50%;
margin-top: -14px;
}
.skill-section .skill-img .skill-icon-box .skill-count {
text-align: left;
}
.skill-section .skill-img .skill-icon-box .skill-count span.count-text {
font-weight: 600;
font-size: 30px;
line-height: 1;
color: var(--theme-color3);
font-family: var(--sec-title-font-family);
}
.skill-section .skill-img .skill-icon-box .skill-count span.plus {
font-family: var(--sec-title-font-family);
font-weight: 600;
font-size: 30px;
position: relative;
top: 0px;
left: 0;
color: var(--theme-color3);
}
.skill-section .skill-img .skill-icon-box .skill-count h6.counter-title {
font-size: 18px;
font-weight: 400;
color: var(--text-color);
font-family: var(--text-font);
}
.skill-section .skill-img .skill-img2 {
position: absolute;
top: 0;
z-index: -1;
right: 40px;
}
.skill-section .skill-img .skill-dot {
position: absolute;
top: 41px;
left: 44%;
z-index: -1;
}
.skill-section .skill-rotate {
position: absolute;
right: -14%;
bottom: -37%;
z-index: -1;
}
.skill-section .skill-sp2 {
position: absolute;
right: 9%;
top: 15%;
}
/*================================
Progress Bar
=================================*/
.skills {
position: relative;
margin-bottom: 25px;
}
.skills .skill-item {
position: relative;
margin-bottom: 25px;
}
.skills .skill-item:last-child {
margin-bottom: 0px;
}
.skills .skill-item .skill-header {
position: relative;
z-index: 3;
margin-bottom: 12px;
}
.skills .skill-item .skill-header .skill-title {
position: relative;
font-size: 20px;
font-weight: 500;
margin-bottom: 0;
color: var(--theme-color3);
font-family: var(--title-font);
}
.skills .skill-item .skill-bar {
position: relative;
width: 100%;
height: 7px;
border-radius: 10px;
}
.skills .skill-item .skill-bar .bar-inner {
position: relative;
width: 100%;
height: 5px;
background: #393939;
border-radius: 10px;
}
.skills .skill-item .skill-bar .bar-inner .bar {
position: absolute;
left: 0px;
top: 0px;
height: 5px;
width: 0px;
transition: all 3000ms ease;
background: var(--theme-color2);
border-radius: 30px;
}
.skills .skill-item .skill-bar .bar-inner .skill-percentage {
position: absolute;
right: 0;
bottom: 0;
font-size: 20px;
font-weight: 500;
margin-bottom: 18px;
color: var(--theme-color3);
}
/*===================================================
Start Pricing Section
=====================================================*/
.pricing-section {
background: url(../images/home-2/pricing-bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
padding: 100px 0 70px;
position: relative;
z-index: 1;
}
.pricing-section .pricing-left-sp {
position: absolute;
top: 97%;
left: 100px;
z-index: -1;
}
.pricing-section .sec-title {
margin-bottom: 60px;
}
.pricing-main-bx {
position: relative;
z-index: 1;
}
.pricing-main-bx::before, .pricing-main-bx::after {
content: "";
position: absolute;
z-index: -1;
inset: -0.1rem;
background: conic-gradient(from var(--gradient-angle), var(--theme-color2), var(--theme-color1), var(--theme-color2), var(--theme-color1), var(--theme-color2));
border-radius: inherit;
-webkit-animation: rotate 2.5s linear infinite;
animation: rotate 2.5s linear infinite;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
opacity: 0;
border-radius: 15px;
}
.pricing-main-bx:hover::before,
.pricing-main-bx ::after {
opacity: 1;
}
@keyframes rotate {
0% {
--gradient-angle: 0deg;
}
100% {
--gradient-angle: 360deg;
}
}
.pricing-single-bx {
position: relative;
margin-bottom: 30px;
z-index: 1;
transition: all 300ms ease;
background: linear-gradient(0deg, #0C0C0C 0%, #1C1C1C 98.44%);
padding: 36px 40px 30px;
border: 1px solid var(--border-theme-color1);
border-radius: 15px;
overflow: hidden;
}
.pricing-single-bx .inner-box {
position: relative;
transition: all 300ms ease;
}
.pricing-single-bx .inner-box h3.popular {
font-family: var(--title-font);
font-weight: 400;
font-size: 14px;
background: #2B2B2B;
display: inline-block;
padding: 9px 21px;
border-radius: 30px;
position: absolute;
right: 0;
top: 6px;
}
.pricing-single-bx .inner-box h4.title {
font-size: 24px;
font-weight: 500;
margin: 0 0 10px;
}
.pricing-single-bx .inner-box .price-box {
display: flex;
align-items: center;
gap: 12px;
}
.pricing-single-bx .inner-box .price-box h4 {
font-weight: 600;
font-size: 50px;
line-height: 60px;
color: var(--theme-color2);
}
.pricing-single-bx .inner-box .price-box .validaty {
margin-top: 13px;
font-size: 18px;
}
.pricing-single-bx .inner-box p.pricing-text {
line-height: 26px;
margin: 0 29px 38px 0;
}
.pricing-single-bx .inner-box .pricing-btn a {
display: block;
font-family: var(--title-font);
font-weight: 500;
font-size: 16px;
color: var(--theme-color3);
background: var(--theme-color1);
padding: 13px 20px;
border-radius: 30px;
text-align: center;
position: relative;
z-index: 1;
overflow: hidden;
}
.pricing-single-bx .inner-box .pricing-btn a::before {
position: absolute;
right: 0;
top: 0;
width: 0;
height: 100%;
background: var(--theme-color2);
z-index: -1;
content: "";
transition: 0.5s;
}
.pricing-single-bx .inner-box .pricing-btn a i {
margin-left: 10px;
}
.pricing-single-bx .inner-box:hover .pricing-btn a {
color: var(--theme-color1);
}
.pricing-single-bx .inner-box:hover .pricing-btn a::before {
width: 100%;
left: 0;
}
.pricing-single-bx .inner-box:hover .feature::after {
opacity: 1;
width: 100%;
left: 0;
}
.pricing-single-bx .inner-box:hover .feature::before {
opacity: 0;
}
.pricing-single-bx .feature {
margin-top: 64px;
position: relative;
}
.pricing-single-bx .feature::before {
position: absolute;
left: 0;
top: -35px;
background: #2B2B2B;
width: 100%;
height: 1px;
content: "";
transition: 0.5s;
}
.pricing-single-bx .feature::after {
position: absolute;
left: 50%;
top: -35px;
background: var(--theme-color2);
width: 0%;
height: 1px;
content: "";
opacity: 0;
transition: 0.5s;
}
.pricing-single-bx .feature .feature-title {
font-weight: 500;
font-size: 20px;
}
.pricing-single-bx .feature ul li {
font-weight: 400;
font-size: 16px;
line-height: 26px;
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.pricing-single-bx .feature ul li i {
color: var(--theme-color2);
font-size: 18px;
}
.pricing-single-bx .nexella-hover-bx {
background: var(--theme-color1);
height: 100%;
top: 0;
opacity: 0;
position: absolute;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
width: 25%;
z-index: -1;
}
.pricing-single-bx .hover-bx {
left: 0;
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.pricing-single-bx .hover-bx2 {
left: 25%;
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.pricing-single-bx .hover-bx3 {
left: 50%;
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.pricing-single-bx .hover-bx4 {
left: 75%;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.pricing-single-bx:hover .nexella-hover-bx {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.pricing-img-column {
position: relative;
z-index: 1;
}
.pricing-img-column .pricing-shape {
position: absolute;
bottom: 14px;
right: 35px;
z-index: 1;
}
/***
====================================================================
Clients Section
====================================================================
***/
.brand-section {
position: relative;
padding: 20px 0 90px;
background: var(--theme-color-light);
margin-top: -1px;
}
.brand-section .owl-carousel .owl-item img {
display: inline-block;
}
.brand-section .shape {
bottom: -21px;
position: absolute;
right: 55px;
}
.sponsors-outer {
background: var(--gradient-1);
border: 1px solid var(--border-theme-color1);
padding: 48px 40px 50px;
border-radius: 15px;
}
.customar-service {
justify-content: space-between;
}
.customar-service .customer-stats {
font-family: var(--title-font);
font-weight: 500;
font-size: 20px;
color: var(--theme-color3);
}
.customar-service .highlighted-number {
font-family: var(--title-font);
font-weight: 500;
font-size: 20px;
line-height: 30px;
color: var(--theme-color2);
}
.customar-service .highlighted-number span {
color: var(--bg-theme-color3);
}
.brand-carousel {
position: relative;
padding: 30px 0 0;
}
.brand-carousel .slide-item {
position: relative;
text-align: center;
transition: all 300ms ease;
margin: 1px;
}
.brand-carousel .slide-item::before, .brand-carousel .slide-item::after {
content: "";
position: absolute;
z-index: -1;
inset: -0.1rem;
background: conic-gradient(from var(--gradient-angle), var(--theme-color2), var(--theme-color1), var(--theme-color2), var(--theme-color1), var(--theme-color2));
border-radius: inherit;
-webkit-animation: rotate 2.5s linear infinite;
animation: rotate 2.5s linear infinite;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
opacity: 0;
border-radius: 10px;
}
.brand-carousel .slide-item:hover::before,
.brand-carousel .slide-item ::after {
opacity: 1;
}
@keyframes rotate {
0% {
--gradient-angle: 0deg;
}
100% {
--gradient-angle: 360deg;
}
}
.brand-carousel .slide-item a {
position: relative;
display: block;
padding: 39px 20px;
transition: all 300ms ease;
background: var(--theme-color4);
border-radius: 10px;
}
.brand-carousel .slide-item:hover a {
background: linear-gradient(0deg, #1C1C1C 0.69%, #0C0C0C 98.44%);
}
.brand-carousel .owl-nav {
position: absolute;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 0 25px;
background-color: #ffffff;
max-width: 110px;
right: 0;
margin: -13px auto 0;
}
.brand-carousel .owl-nav .owl-prev,
.brand-carousel .owl-nav .owl-next {
display: flex;
align-items: center;
justify-content: center;
height: 26px;
width: 26px;
background-color: var(--bg-theme-color3);
color: #7c858c;
font-size: 14px;
margin: 0 3px;
transition: all 300ms ease;
}
.brand-carousel .owl-nav .owl-prev:hover,
.brand-carousel .owl-nav .owl-next:hover {
background-color: var(--bg-theme-color2);
color: #ffffff;
}
.brand-carousel .owl-dots {
display: none;
}
.faq-section {
background: var(--theme-color-light);
padding: 100px 0 105px;
}
.faq-section .image-column {
position: relative;
z-index: 1;
}
.faq-section .image-column .icon-sp {
position: absolute;
right: 102px;
top: 0;
width: 189px;
height: 235px;
border-radius: 15px;
background: var(--theme-color2);
}
/* Accprdion */
.accordion li {
list-style: none;
padding: 0 0 35px;
}
.accordion li a {
position: relative;
width: 100%;
display: block;
cursor: pointer;
font-weight: 500;
font-size: 20px;
font-family: var(--title-font);
color: var(--theme-color3) !important;
background: linear-gradient(90deg, #0C0C0C 6.25%, #1C1C1C 93.75%);
border: 1px solid var(--theme-color7);
padding: 12px 18px 12px 35px;
border-radius: 15px;
z-index: 1;
}
.accordion li a span {
position: relative;
}
.accordion li a span:before {
position: absolute;
content: "";
top: -8px;
right: -593px;
width: 40px;
height: 40px;
border-radius: 20px;
border: 1px solid var(--theme-color7);
background: var(--theme-color-light);
}
.accordion li a:before {
width: 3px;
height: 16px;
background: var(--theme-color3);
position: absolute;
right: 36px;
content: " ";
top: 22px;
transform: rotate(0deg);
transition: all 0.5s ease-in-out;
z-index: 1;
}
.accordion li a:after {
width: 16px;
height: 3px;
background: var(--theme-color3);
position: absolute;
right: 30px;
content: " ";
top: 28px;
transition: all 0.5s ease-in-out;
z-index: 1;
}
.accordion li a.active {
border-bottom: 0;
border-radius: 10px 10px 0 0;
padding: 28px 18px 12px 35px;
}
.accordion li a.active span:before {
border: 1px solid var(--theme-color7);
background: var(--theme-color-light);
}
.accordion li a.active:after {
transform: rotate(0deg);
background: #fff;
-webkit-transition: all 0.5s ease-in-out;
top: 43px;
}
.accordion li a.active:before {
display: none;
}
.accordion li p {
display: none;
padding: 42px 98px 42px 38px;
margin: 0;
overflow: hidden;
font-size: 18px;
line-height: 28px;
border: 1px solid var(--theme-color7);
border-top: 0;
border-radius: 0 0 10px 10px;
background: linear-gradient(90deg, #0C0C0C 6.25%, #1C1C1C 93.75%);
position: relative;
}
.accordion li p::before {
position: absolute;
left: 35px;
top: 0;
width: 547px;
height: 2px;
background: var(--theme-color7);
content: "";
}
.sidebar-area {
background-color: var(--theme-color7);
}
.sidebar-area .offcanvas-header .btn-close {
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
border-radius: 50%;
-webkit-transition: transition(all 300ms ease);
transition: all 300ms ease;
font-size: 22px;
color: var(--theme-color3);
background-color: transparent;
opacity: 1;
background-image: none;
transition: transition(all 300ms ease);
border: 1px solid var(--theme-color3);
}
.sidebar-area .offcanvas-header .btn-close:hover {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.sidebar-area .sidebar__body {
margin-top: 30px;
}
.sidebar-area .sidebar__body .text-white {
color: var(--theme-color3);
margin-bottom: 20px;
}
.sidebar-area .sidebar__body .sidebar__text {
color: var(--theme-text60);
}
.sidebar-area .sidebar__body .sidebar__contact-info li {
list-style: none;
}
.sidebar-area .sidebar__body .sidebar__contact-info li:not(:last-child) {
margin-bottom: 10px;
}
.sidebar-area .sidebar__body .sidebar__contact-info li i {
display: inline-block;
margin-right: 10px;
color: var(--theme-color2);
font-size: 18px;
}
.sidebar-area .sidebar__body .sidebar__contact-info li a {
display: inline-block;
color: var(--theme-text60);
}
.sidebar-area .sidebar__body .sidebar__btns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 12px;
}
.sidebar-area .sidebar__body .sidebar__btns a {
display: inline-block;
padding: 6px 16px;
border-radius: 8px;
color: var(--theme-color3);
border: 1px solid var(--theme-color3);
}
.sidebar-area .sidebar__body .sidebar__btns a:hover {
background-color: var(--theme-color3);
color: var(--theme-color-light);
}
.sidebar-area .sidebar__body .sidebar__socials ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 12px;
}
.sidebar-area .sidebar__body .sidebar__socials ul li {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 50%;
background: var(--theme-color3);
transition: all 300ms ease;
border: 1px solid var(--theme-color3);
color: var(--theme-color-light);
}
.sidebar-area .sidebar__body .sidebar__socials ul li a {
display: inline-block;
transition: all 300ms ease;
}
.sidebar-area .sidebar__body .sidebar__socials ul li:hover {
background-color: var(--theme-color2);
border: 1px solid var(--theme-color2);
}
/***
==================================================================
Main Footer
==================================================================
***/
.main-footer {
background: url(../images/main-home/footer-bg.png);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
/* Widget Section */
.main-footer .widgets-section {
position: relative;
padding: 100px 0 56px;
}
.main-footer .widgets-section::before {
position: absolute;
left: 0;
bottom: 10px;
width: 100%;
content: "";
height: 1px;
background: var(--theme-color5);
}
.main-footer .widgets-section::after {
position: absolute;
left: 0;
top: 44%;
width: 100%;
content: "";
height: 1px;
background: var(--theme-color5);
}
.main-footer .footer-column {
position: relative;
margin-bottom: 30px;
padding-right: 55px;
}
.main-footer .footer-column:first-child {
padding-right: 0;
}
.main-footer .footer-column:last-child {
padding-right: 0;
}
.main-footer .footer-widget {
position: relative;
}
.main-footer .widget-title {
position: relative;
color: #ffffff;
padding-bottom: 18px;
margin-bottom: 25px;
font-weight: 500;
font-size: 28px;
}
.footer-upper {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 165px;
}
.footer-upper .footer-title {
font-weight: 800;
font-size: 100px;
line-height: 110px;
}
.footer-upper .footer-title span {
color: rgb(97, 97, 97);
}
.footer-upper .footer-icon {
height: 200px;
width: 200px;
line-height: 200px;
background: var(--theme-color2);
border-radius: 50%;
text-align: center;
float: right;
}
.main-footer .about-widget {
position: relative;
}
.main-footer .about-widget .logo {
position: relative;
margin-bottom: 30px;
max-width: 190px;
}
@media (max-width: 1199.98px) {
.main-footer .about-widget .logo {
margin-bottom: 30px;
}
}
.main-footer .about-widget p.footer-des {
line-height: 26px;
color: var(--theme-color8);
margin-bottom: 40px;
}
/*=== User LInks ===*/
.user-links {
position: relative;
}
.user-links li {
position: relative;
font-size: 16px;
line-height: 24px;
color: #8c8f94;
font-weight: 400;
margin-bottom: 14px;
}
.user-links li a {
position: relative;
display: block;
transition: all 300ms ease;
font-family: Plus Jakarta Sans;
font-weight: 500;
font-size: 16px;
color: var(--theme-color3);
margin-bottom: 32px;
}
.user-links li a:hover {
color: var(--theme-color2);
}
.user-links li a:before {
position: absolute;
left: 0;
bottom: -17px;
width: 100%;
height: 1px;
background: var(--theme-color5);
content: "";
transition: all 300ms ease;
}
.user-links li a::after {
position: absolute;
left: 0;
bottom: -17px;
width: 0;
background: var(--theme-color2);
content: "";
transition: all 300ms ease;
opacity: 0;
height: 1px;
}
.user-links li a:hover::after {
width: 100%;
opacity: 1;
}
.user-links li a i {
float: right;
}
/* Contact Widget */
.contact-widget {
position: relative;
}
.contact-widget .widget-title {
padding-bottom: 40px;
margin-bottom: 0px;
}
.contact-widget .address {
margin-bottom: 26px;
}
.contact-widget .address p {
font-family: var(--title-font);
font-weight: 500;
font-size: 18px;
margin: 0 0 0;
}
.contact-widget .address a {
display: inline-block;
font-family: var(--title-font);
font-weight: 500;
font-size: 18px;
line-height: 28px;
color: #fff;
margin: 8px 0 0;
}
/*=== Footer Bottom ===*/
.footer-bottom {
position: relative;
width: 100%;
}
.footer-bottom .inner-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 32px 1px;
}
.footer-bottom .copyright-text {
position: relative;
color: var(--theme-color3);
}
.footer-bottom .copyright-text a {
color: rgb(161, 161, 161);
}
.footer-bottom .copyright-text a:hover {
color: #ffffff;
}
.footer-bottom .footer-links-wrapper a {
display: inline-block;
font-family: var(--title-font);
font-weight: 500;
font-size: 16px;
color: var(--theme-color3);
margin-right: 35px;
}
.footer-bottom .footer-links-wrapper a:last-child {
margin-right: 0;
}
.widgets-section.style_two::after {
display: none;
}
.widgets-section.style_two::before {
left: 0;
right: 0;
margin: auto;
bottom: 10px;
width: 69%;
background: rgba(186, 185, 185, 0.6901960784);
}
.widgets-section.style_two h2.footer-main-title {
font-size: 46px;
font-weight: 700;
line-height: 56px;
margin-top: -5px;
margin-bottom: 41px;
}
/***
====================================================================
Page Title
====================================================================
***/
.page-title {
position: relative;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 196px 0 110px;
min-height: 450px;
}
.page-title:before {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: #131313;
opacity: 0.8;
content: "";
}
.page-title .title {
font-size: 64px;
color: #ffffff;
margin-bottom: 17px;
}
.page-title .text {
position: relative;
color: #ffffff;
font-size: 16px;
line-height: 26px;
letter-spacing: 0.05em;
max-width: 520px;
}
.page-breadcrumb {
position: relative;
margin-top: 5px;
}
.page-breadcrumb li {
position: relative;
display: inline-block;
margin-right: 12px;
padding-right: 13px;
color: #ffffff;
font-size: 14px;
font-weight: 400;
text-transform: capitalize;
}
.page-breadcrumb li:after {
position: absolute;
content: "\f105";
right: -6px;
top: 1px;
color: #ffffff;
font-size: 14px;
font-weight: 900;
font-family: "Font Awesome 5 Free";
color: #ffffff;
}
.page-breadcrumb li:last-child {
padding-right: 0px;
margin-right: 0px;
}
.page-breadcrumb li:last-child::after {
display: none;
}
.page-breadcrumb li a {
color: var(--theme-color2);
font-weight: 500;
text-transform: capitalize;
transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
.page-breadcrumb li a:hover {
color: #ffffff;
}
.error-page__inner {
position: relative;
display: block;
text-align: center;
}
.error-page__inner .error-page__title-box {
position: relative;
display: block;
}
.error-page__inner .error-page__title {
position: relative;
display: inline-block;
font-size: 280px;
line-height: 280px;
margin-bottom: 0;
color: var(--theme-color1);
}
.error-page__inner .error-page__sub-title {
font-size: 40px;
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 50px;
margin-top: -16px;
}
.error-page__inner .error-page__text {
font-size: 20px;
line-height: 30px;
text-align: center;
}
.error-page__inner .error-page__form {
position: relative;
display: block;
margin: 42px auto 20px;
}
.error-page__inner .error-page__form input[type=search] {
height: 60px;
width: 100%;
border: none;
outline: none;
background-color: #f5f5f5;
font-size: 14px;
color: #333;
padding-left: 50px;
padding-right: 75px;
border-radius: 7px;
}
.error-page__inner .error-page__form button[type=submit] {
background-color: transparent;
font-size: 22px;
position: absolute;
top: 0;
right: 0px;
bottom: 0;
width: 72px;
outline: none;
border: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
}
.error-page__inner .error-page__form-input {
position: relative;
display: block;
max-width: 570px;
width: 100%;
margin: 0 auto;
}
/***
=============================================
Services Details
=============================================
***/
section.services-details {
padding: 120px 0 120px;
background: var(--theme-color1);
}
.service-sidebar {
position: relative;
display: block;
width: 100%;
}
.service-sidebar .service-sidebar-single {
position: relative;
display: block;
margin-bottom: 30px;
}
.service-sidebar .service-sidebar-single-services {
position: relative;
display: block;
background: #f6f4ec;
border-radius: 10px;
padding: 35px 30px 25px;
}
.service-sidebar .service-sidebar-single-services .title {
position: relative;
display: block;
margin-bottom: 12px;
padding-left: 20px;
}
.service-sidebar .service-sidebar-single-services .title h3 {
color: var(--headings-color);
font-size: 20px;
line-height: 30px;
letter-spacing: -0.02em;
}
.service-sidebar .service-sidebar-single-services ul {
position: relative;
display: block;
margin-top: 10px;
}
.service-sidebar .service-sidebar-single-services ul li {
position: relative;
display: block;
margin-bottom: 5px;
margin-top: -10px;
}
.service-sidebar .service-sidebar-single-services ul li:last-child {
margin-bottom: 0;
}
.service-sidebar .service-sidebar-single-services ul li a {
position: relative;
display: block;
color: var(--agriox-color-1, #687469);
font-size: 18px;
padding: 22px 20px 22px;
border-radius: 10px;
background: transparent;
transition: all 300ms linear;
transition-delay: 0.1s;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: center;
}
.service-sidebar .service-sidebar-single-services ul li a:hover {
color: var(--headings-color);
}
.service-sidebar .service-sidebar-single-services ul li a:hover::before {
opacity: 1;
transform: perspective(400px) rotateX(0deg);
transition: all 300ms linear;
transition-delay: 0.1s;
}
.service-sidebar .service-sidebar-single-services ul li a:hover i {
color: var(--theme-color1);
}
.service-sidebar .service-sidebar-single-services ul li a::before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: "";
z-index: -1;
opacity: 1;
transform: perspective(400px) rotateX(90deg);
transform-origin: bottom;
transition: all 300ms linear;
transition-delay: 0.1s;
background: #ffffff;
box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05);
border-radius: 10px;
}
.service-sidebar .service-sidebar-single-services ul li a i {
font-size: 16px;
}
.service-sidebar .service-sidebar-single-services ul li.current a::before {
opacity: 1;
transform: perspective(400px) rotateX(0deg);
transition: all 300ms linear;
transition-delay: 0.1s;
}
.service-sidebar .service-sidebar-single-services ul li.current a i {
color: var(--theme-color1);
}
.service-sidebar .service-sidebar-single-services ul li.current:first-child {
margin-top: 20px;
}
.service-sidebar .service-sidebar-single-services ul li.current:last-child {
margin-bottom: 35px;
}
.service-sidebar .service-sidebar-single-contact-box {
position: relative;
display: block;
background-attachment: scroll;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 10px;
padding: 50px 0px 44px;
z-index: 1;
}
.service-sidebar .service-sidebar-single-contact-box::before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(109, 140, 84, 0.93);
border-radius: 10px;
content: "";
z-index: -1;
}
.service-sidebar .service-sidebar-single-contact-box .icon {
position: relative;
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
transition: all 500ms ease;
border-radius: 50%;
background: var(--theme-color2);
}
.service-sidebar .service-sidebar-single-contact-box .icon:hover {
background-color: var(--headings-color);
}
.service-sidebar .service-sidebar-single-contact-box .icon:hover span::before {
color: #fff;
}
.service-sidebar .service-sidebar-single-contact-box .icon span::before {
position: relative;
display: inline-block;
color: var(--headings-color);
font-size: 30px;
line-height: 60px;
transition: all 500ms ease;
}
.service-sidebar .service-sidebar-single-contact-box .title {
position: relative;
display: block;
margin-top: 20px;
margin-bottom: 42px;
}
.service-sidebar .service-sidebar-single-contact-box .title h2 {
color: #ffffff;
font-size: 36px;
}
.service-sidebar .service-sidebar-single-contact-box .phone {
font-size: 24px;
line-height: 34px;
}
.service-sidebar .service-sidebar-single-contact-box .phone a {
color: #ffffff;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.service-sidebar .service-sidebar-single-contact-box .phone a:hover {
color: var(--theme-color1);
}
.service-sidebar .service-sidebar-single-contact-box p {
color: #ffffff;
font-size: 14px;
line-height: 22px;
}
.service-sidebar .service-sidebar-single-btn {
position: relative;
display: block;
background: var(--theme-color2);
}
.service-sidebar .service-sidebar-single-btn .thm-btn {
font-size: 16px;
padding: 13px 50px 28px;
}
.service-sidebar .service-sidebar-single-btn .thm-btn span::before {
position: relative;
display: inline-block;
top: 13px;
color: #334b35;
font-size: 40px;
padding-right: 25px;
-webkit-transition: all 600ms ease;
transition: all 600ms ease;
font-weight: 500;
}
.service-sidebar .service-sidebar-single-btn .thm-btn:hover span::before {
color: #ffffff;
}
.service-sidebar .banner-widget {
position: relative;
display: block;
background: transparent;
border-radius: 10px;
overflow: hidden;
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.08);
}
.service-sidebar .banner-widget .widget-content {
position: relative;
display: block;
width: 100%;
padding: 45px 45px 40px;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
}
.service-sidebar .banner-widget .widget-content::before {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.5882352941);
content: "";
}
.service-sidebar .banner-widget .widget-content .shape {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 278px;
background-repeat: no-repeat;
background-size: cover;
}
.service-sidebar .banner-widget .content-box {
position: relative;
max-width: 200px;
width: 100%;
}
.service-sidebar .banner-widget .content-box .icon-box {
position: relative;
display: inline-block;
width: 60px;
height: 60px;
line-height: 60px;
font-size: 40px;
background-color: var(--theme-color2);
color: var(--text-color-bg-theme-color2);
text-align: center;
border-radius: 5px;
margin-bottom: 23px;
}
.service-sidebar .banner-widget .content-box .icon-box .icon-shape {
position: absolute;
top: -15px;
right: -38px;
width: 32px;
height: 32px;
background-repeat: no-repeat;
}
.service-sidebar .banner-widget .content-box h3 {
display: block;
font-size: 24px;
line-height: 32px;
color: #ffffff;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 22px;
}
.service-sidebar .banner-widget .content-box .theme-btn-two:hover {
background: #0a267a;
}
.service-sidebar .service-sidebar-single-btn .theme-btn {
padding: 10px 40px;
}
.service-sidebar .service-sidebar-single-btn .theme-btn .btn-title {
display: flex;
align-items: center;
}
.service-sidebar .service-sidebar-single-btn .theme-btn span::before {
position: relative;
display: inline-block;
font-size: 36px;
padding-right: 25px;
margin-top: 7px;
-webkit-transition: all 600ms ease;
transition: all 600ms ease;
font-weight: 500;
}
.services-details__content img {
width: 100%;
}
.services-details__content .feature-list .single-item {
position: relative;
display: block;
border: 1px solid #e1e8e4;
padding: 16px 30px 16px 53px;
margin-bottom: 20px;
-webkit-transition: all 600ms ease;
transition: all 600ms ease;
}
.services-details__content .feature-list .single-item .icon-box {
position: absolute;
left: 20px;
top: 16px;
font-size: 18px;
-webkit-transition: all 600ms ease;
transition: all 600ms ease;
color: var(--theme-color2);
}
.services-details__content .feature-list .single-item .title {
display: block;
margin: 0;
font-size: 16px;
line-height: 32px;
font-weight: 600;
text-transform: uppercase;
}
.services-details__content .feature-list .single-item:hover {
background-color: var(--theme-color2);
border: 1px solid var(--theme-color2);
color: var(--text-color-bg-theme-color2);
}
.services-details__content .feature-list .single-item:hover .icon-box {
color: var(--text-color-bg-theme-color2);
}
.service-list {
background: var(--theme-color4);
padding: 40px 40px;
}
.service-list li {
position: relative;
display: block;
margin-bottom: 10px;
}
.service-list li:last-child {
margin-bottom: 0px;
}
.service-list li a {
position: relative;
display: block;
font-size: 18px;
color: var(--headings-color);
font-weight: 600;
background-color: var(--theme-color1);
padding: 17px 20px 17px 50px;
box-shadow: 20px 5px 20px 0px rgba(0, 0, 0, 0.05);
}
.service-list li a:hover, .service-list li a.current {
color: var(--text-color-bg-theme-color1);
background-color: var(--theme-color1);
padding-left: 80px;
}
.service-list li a:hover i, .service-list li a.current i {
width: 60px;
color: var(--text-color-bg-theme-color2);
background-color: var(--theme-color2);
}
.service-list li i {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
left: 0px;
top: 0px;
width: 30px;
height: 100%;
background-color: var(--theme-color5);
text-align: center;
font-size: 16px;
color: #707582;
transition: all 500ms ease;
}
.gallery {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(2, 350px);
gap: 20px;
}
.gallery .gallery-item {
border-radius: 15px;
overflow: hidden;
}
.gallery .gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gallery .item1 {
grid-column: 1/span 8;
grid-row: 1;
}
.gallery .item2 {
grid-column: 9/span 4;
grid-row: 1;
}
.gallery .item3 {
grid-column: 1/span 4;
grid-row: 2;
}
.gallery .item4 {
grid-column: 5/span 8;
grid-row: 2;
}
/*--------------------------------------------------------------
# Project Details
--------------------------------------------------------------*/
section.project-details {
background: var(--theme-color1);
padding: 120px 0 120px;
}
h2.porject-title {
font-size: 35px;
margin: 70px 0 40px;
}
.project-details__img {
position: relative;
display: block;
}
.project-details__img img {
width: 100%;
border-radius: 10px;
}
.project-details__content {
position: relative;
display: block;
}
.project-details__content-left {
position: relative;
display: block;
margin-top: 31px;
}
.project-details__content-right {
position: relative;
display: block;
margin-top: 40px;
}
.project-details__details-box {
position: relative;
border-radius: 10px;
background-color: var(--theme-color4);
padding: 43px 50px 50px;
z-index: 1;
}
.project-details__details-list {
position: relative;
display: block;
}
.project-details__details-list li {
position: relative;
display: block;
}
.project-details__details-list li + li {
margin-top: 24px;
}
.project-details__client {
font-size: 16px;
color: var(--theme-color2);
line-height: 24px;
margin: 0;
}
.project-details__name {
font-size: 16px;
line-height: 24px;
}
.project-details__social {
position: relative;
display: flex;
align-items: center;
}
.project-details__social a {
position: relative;
height: 40px;
width: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
background-color: var(--theme-color1);
color: var(--text-color-bg-theme-color1);
font-size: 15px;
overflow: hidden;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
z-index: 1;
}
.project-details__social a:hover {
background-color: var(--theme-color2);
color: var(--text-color-bg-theme-color2);
}
.project-details__social a + a {
margin-left: 10px;
}
.project-details__pagination-box {
position: relative;
display: block;
text-align: center;
border-top: 1px solid #ece9e0;
border-bottom: 1px solid #ece9e0;
padding: 30px 0;
margin-top: 117px;
}
.project-details__pagination {
position: relative;
display: block;
}
.project-details__pagination li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.project-details__pagination li a {
font-size: 14px;
color: #757873;
font-weight: 400;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.project-details__pagination li a:hover {
color: var(--theme-color1);
}
.project-details__pagination li a:hover i {
background-color: var(--theme-color2);
color: var(--text-color-bg-theme-color2);
border: 2px solid var(--theme-color2);
}
.project-details__pagination li .content {
position: relative;
display: block;
}
.project-details__pagination li.next {
float: left;
position: relative;
}
.project-details__pagination li.next i {
position: relative;
height: 52px;
width: 52px;
border: 2px solid rgba(255, 255, 255, 0.4784313725);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 50%;
font-weight: 800;
color: var(--theme-color2);
font-size: 17px;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
margin-right: 20px;
z-index: 1;
}
.project-details__pagination li.next .content {
text-align: left;
}
.project-details__pagination li.previous {
position: relative;
float: right;
}
.project-details__pagination li.previous i {
position: relative;
height: 52px;
width: 52px;
border: 2px solid rgba(255, 255, 255, 0.4784313725);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 50%;
font-weight: 800;
color: var(--theme-color2);
font-size: 17px;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
margin-left: 20px;
z-index: 1;
}
.project-details__pagination li.previous .content {
text-align: right;
}
/***
====================================================================
Blog Details
====================================================================
***/
.blog-details {
position: relative;
display: block;
padding: 120px 0 100px;
background: var(--theme-color1);
}
.blog-details__left {
position: relative;
display: block;
}
.blog-details__img {
position: relative;
display: block;
border-radius: 10px;
}
.blog-details__img img {
width: 100%;
border-radius: 10px;
}
.blog-details__date {
position: absolute;
bottom: 0;
right: 0;
background-color: var(--theme-color1);
text-align: center;
padding: 21px 24px 20px;
align-items: center;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
display: flex;
flex-direction: column;
}
.blog-details__date .day {
font-size: 16px;
color: #fff;
font-weight: var(--body-font-weight-bold);
line-height: 16px;
}
.blog-details__date .month {
position: relative;
display: block;
font-size: 10px;
font-weight: var(--body-font-weight-bold);
color: #fff;
line-height: 12px;
text-transform: uppercase;
}
.blog-details__content {
position: relative;
display: block;
margin-top: 22px;
}
.blog-details__meta {
position: relative;
display: flex;
align-items: center;
}
.blog-details__meta li + li {
margin-left: 18px;
}
.blog-details__meta li a {
font-size: 15px;
color: #777;
font-weight: 500;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.blog-details__meta li a:hover {
color: var(--theme-color3);
}
.blog-details__meta li a i {
color: var(--theme-color2);
margin-right: 6px;
}
.blog-details__title {
font-size: 30px;
line-height: 40px;
font-weight: 600;
margin-top: 12px;
margin-bottom: 21px;
}
.blog-details__bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 30px 0 30px;
margin-top: 49px;
border-top: 1px solid rgba(236, 233, 224, 0.2196078431);
}
@media only screen and (max-width: 767px) {
.blog-details__bottom {
gap: 30px;
}
}
.blog-details__bottom p {
margin: 0;
}
.blog-details__tags span {
color: var(--theme-color3);
font-size: 20px;
margin-right: 14px;
font-weight: var(--body-font-weight-bold);
}
.blog-details__tags a {
position: relative;
font-size: 16px;
background-color: var(--theme-color2);
color: var(--text-color-bg-theme-color2);
display: inline-block;
padding: 5px 30px 5px;
font-weight: var(--body-font-weight-bold);
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
border-radius: 35px;
}
.blog-details__tags a:hover {
background-color: var(--theme-color3);
color: var(--theme-color4);
text-decoration: none;
}
.blog-details__tags a + a {
margin-left: 6px;
}
.blog-details__social-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.blog-details__social-list a {
position: relative;
height: 43px;
width: 43px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
color: var(--theme-color4);
background-color: var(--theme-color2);
font-size: 15px;
overflow: hidden;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
z-index: 1;
}
.blog-details__social-list a:hover {
color: var(--theme-color1);
background: var(--theme-color4);
}
.blog-details__social-list a:hover:after {
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
.blog-details__social-list a:after {
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
height: 100%;
background-color: var(--theme-color2);
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
-webkit-transition-property: all;
transition-property: all;
opacity: 1;
-webkit-transform-origin: top;
transform-origin: top;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: scaleY(0);
transform: scaleY(0);
z-index: -1;
}
.blog-details__social-list a + a {
margin-left: 10px;
}
.blog-details__pagenation-box {
position: relative;
display: block;
overflow: hidden;
margin-bottom: 53px;
}
.blog-details__pagenation {
position: relative;
display: block;
}
.blog-details__pagenation li {
position: relative;
float: left;
font-size: 20px;
color: #0e2207;
font-weight: var(--body-font-weight-bold);
color: var(--theme-light-background-text-color);
background-color: var(--theme-light-background);
line-height: 30px;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
max-width: 370px;
width: 100%;
padding-left: 60px;
padding-right: 60px;
padding-top: 52px;
padding-bottom: 52px;
border-radius: 10px;
}
.blog-details__pagenation li:hover {
background-color: var(--theme-color2);
color: var(--text-color-bg-theme-color2);
}
.blog-details__pagenation li + li {
margin-left: 30px;
}
/* Nav Links */
.nav-links {
display: flex;
justify-content: space-between;
margin-bottom: 53px;
}
@media only screen and (max-width: 767px) {
.nav-links {
flex-direction: column;
gap: 20px;
}
}
.nav-links .prev {
display: flex;
align-items: center;
height: 100%;
width: calc(50% - 15px);
margin-right: 30px;
}
@media only screen and (max-width: 767px) {
.nav-links .prev {
width: 100%;
}
}
.nav-links .prev .thumb {
margin-right: 20px;
}
.nav-links .next {
display: flex;
align-items: center;
height: 100%;
flex-direction: row-reverse;
width: calc(50% - 15px);
}
@media only screen and (max-width: 767px) {
.nav-links .next {
width: 100%;
}
}
.nav-links .next .thumb {
margin-left: 20px;
}
.nav-links > div {
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.nav-links > div .thumb {
display: inline-block;
min-width: 60px;
width: 60px;
height: 60px;
overflow: hidden;
}
.nav-links > div .thumb a {
display: inline-block;
}
.nav-links > div > a {
display: inline-block;
word-wrap: break-word;
white-space: -moz-pre-wrap;
white-space: pre-wrap;
font-size: 20px;
line-height: 1.637;
font-weight: var(--body-font-weight-bold);
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
color: var(--theme-light-background-text-color);
padding: 52px 50px;
border-radius: 10px;
width: 100%;
border: 1px solid rgba(255, 255, 255, 0.3490196078);
}
@media only screen and (max-width: 767px) {
.nav-links > div > a {
padding: 30px;
}
}
.nav-links > div > a:hover {
color: var(--text-color-bg-theme-color1);
background-color: var(--theme-color1);
}
/***
====================================================================
Sidebar
====================================================================
***/
@media (max-width: 991px) {
.sidebar {
margin-top: 50px;
}
}
.sidebar__single + .sidebar__single {
margin-top: 30px;
}
.sidebar__title {
margin: 0;
font-size: 20px;
margin-bottom: 5px;
font-weight: var(--h4-font-weight);
}
.sidebar__search {
position: relative;
display: block;
padding: 40px;
background: var(--theme-color4);
border-radius: 10px;
}
.sidebar__search-form {
position: relative;
}
.sidebar__search-form input[type=search] {
display: block;
border: none;
outline: none;
background-color: var(--theme-color2);
color: var(--text-color-bg-theme-color2);
font-size: 16px;
font-weight: 500;
padding-left: 30px;
height: 70px;
width: 100%;
padding-right: 30px;
border-radius: 10px;
}
.sidebar__search-form input[type=search]::-webkit-input-placeholder, .sidebar__search-form input[type=search]:-ms-input-placeholder, .sidebar__search-form input[type=search]::-ms-input-placeholder, .sidebar__search-form input[type=search]::placeholder {
color: var(--theme-color1);
opacity: 1;
}
@media only screen and (max-width: 767px) {
.sidebar__search-form input[type=search] {
padding-left: 30px;
}
}
.sidebar__search-form button[type=submit] {
background-color: transparent;
color: #111;
font-size: 22px;
position: absolute;
top: 0;
right: 30px;
bottom: 0;
outline: none;
border: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
}
@media only screen and (max-width: 767px) {
.sidebar__search-form button[type=submit] {
width: 42px;
}
}
.sidebar__post {
position: relative;
display: block;
padding: 46px 40px 30px;
color: var(--theme-light-background-text-color);
background-color: var(--theme-color4);
border-radius: 10px;
overflow: hidden;
z-index: 1;
}
@media only screen and (max-width: 767px) {
.sidebar__post {
padding: 30px;
}
}
.sidebar__post .sidebar__title {
margin-left: 20px;
}
@media only screen and (max-width: 767px) {
.sidebar__post .sidebar__title {
margin-left: 0;
}
}
.sidebar__post .sidebar__post-list {
margin: 0;
}
.sidebar__post .sidebar__post-list li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 16px 20px 17px;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
background: var(--theme-color1);
border-radius: 10px;
}
@media only screen and (max-width: 767px) {
.sidebar__post .sidebar__post-list li {
padding: 16px 0;
}
}
.sidebar__post .sidebar__post-list li:hover {
background-color: #ffffff;
border-radius: 10px;
}
.sidebar__post .sidebar__post-list li:hover .sidebar__post-content a {
color: var(--theme-color1);
}
.sidebar__post .sidebar__post-list li:hover .sidebar__post-content-meta {
color: var(--theme-color1) !important;
}
.sidebar__post .sidebar__post-list li + li {
margin-top: 11px;
}
.sidebar__post .sidebar__post-list .sidebar__post-image {
margin-right: 20px;
flex: 70px 0 0;
}
.sidebar__post .sidebar__post-list .sidebar__post-image > img {
width: 80px;
border-radius: 10px;
}
.sidebar__post .sidebar__post-list .sidebar__post-content {
position: relative;
top: -3px;
}
.sidebar__post .sidebar__post-list .sidebar__post-content h3 {
font-size: 18px;
margin: 0;
line-height: 26px;
letter-spacing: 0;
}
.sidebar__post .sidebar__post-list .sidebar__post-content h3 a {
color: var(--theme-color-white);
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
display: block;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.sidebar__post .sidebar__post-list .sidebar__post-content-meta {
font-size: 14px;
font-weight: 500;
color: #d1d5cf !important;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.sidebar__post .sidebar__post-list .sidebar__post-content-meta i {
color: var(--theme-color2);
font-size: 14px;
padding-right: 3px;
}
.sidebar__category {
position: relative;
display: block;
color: var(--theme-light-background-text-color);
background-color: var(--theme-color4);
border-radius: 10px;
padding: 45px 40px 38px;
overflow: hidden;
z-index: 1;
}
@media only screen and (max-width: 767px) {
.sidebar__category {
padding: 30px 15px 30px;
}
}
.sidebar__category .sidebar__title {
padding-left: 20px;
margin-bottom: 9px;
}
.sidebar__category-list {
margin: 0;
}
.sidebar__category-list li + li {
margin-top: 4px;
}
.sidebar__category-list li a {
color: #f9f9f9;
font-size: 16px;
position: relative;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
display: block;
background: none;
padding: 12px 20px;
font-weight: 500;
border-radius: 5px;
background: var(--theme-color1);
margin-bottom: 12px;
}
.sidebar__category-list li a:hover {
background-color: rgb(255, 255, 255);
box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05);
color: var(--theme-color1);
text-shadow: 1px 0 0 rgba(14, 34, 7, 0.5);
}
.sidebar__category-list li a:hover span {
color: #ffcd1e;
-webkit-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1);
}
.sidebar__category-list li a span {
position: absolute;
top: 50%;
right: 20px;
-webkit-transform: translateY(-50%) scale(0);
transform: translateY(-50%) scale(0);
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
color: var(--theme-color2);
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 16px;
}
.sidebar__category-list li.active a {
background-color: rgb(255, 255, 255);
box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05);
color: var(--theme-color4);
border-radius: 5px;
text-shadow: 1px 0 0 rgba(14, 34, 7, 0.5);
}
.sidebar__category-list li.active a span {
-webkit-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1);
color: #ffcd1e;
}
.sidebar__tags {
position: relative;
display: block;
color: var(--theme-light-background-text-color);
background-color: var(--theme-color4);
padding: 46px 40px 50px;
border-radius: 10px;
overflow: hidden;
z-index: 1;
}
@media only screen and (max-width: 767px) {
.sidebar__tags {
padding: 30px;
}
}
.sidebar__tags .sidebar__title {
margin-left: 5px;
margin-bottom: 25px;
}
.sidebar__tags-list {
margin-top: -10px;
}
.sidebar__tags-list a {
font-size: 14px;
color: #0e2207;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
background: var(--theme-color2);
display: inline-block;
padding: 5px 28px 5px;
margin-left: 5px;
border-radius: 30px;
}
.sidebar__tags-list a:hover {
color: var(--theme-color1);
background: var(--theme-color3);
}
.sidebar__tags-list a + a {
margin-left: 5px;
margin-top: 10px;
}
.sidebar__comments {
position: relative;
display: block;
color: var(--theme-light-background-text-color);
background-color: var(--theme-color4);
padding: 46px 50px 43px;
border-radius: 10px;
overflow: hidden;
z-index: 1;
}
@media only screen and (max-width: 767px) {
.sidebar__comments {
padding: 30px;
}
}
.sidebar__comments .sidebar__title {
margin-bottom: 25px;
}
.sidebar__comments-list {
position: relative;
display: block;
}
.sidebar__comments-list li {
position: relative;
display: block;
padding-left: 65px;
}
.sidebar__comments-list li:hover .sidebar__comments-icon {
background-color: var(--theme-color2);
color: var(--text-color-bg-theme-color2);
}
.sidebar__comments-list li + li {
margin-top: 23px;
}
.sidebar__comments-icon {
height: 45px;
width: 45px;
background-color: var(--theme-color1);
border-radius: 50%;
font-size: 15px;
color: var(--text-color-bg-theme-color1);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.sidebar__comments-text-box p {
font-size: 15px;
margin: 0;
line-height: 26px;
font-weight: 500;
}
.sidebar__comments-text-box p span {
color: var(--theme-color2);
}
.sidebar__comments-text-box h5 {
font-size: 15px;
margin: 0;
line-height: 26px;
color: #757873;
font-weight: 500;
letter-spacing: 0;
}
/***
====================================================================
Comments
====================================================================
***/
.comment-one .comment-one__title {
margin-bottom: 30px;
}
.comment-one .comment-one__single {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-bottom: 1px solid rgba(236, 233, 224, 0.2196078431);
padding-bottom: 60px;
margin-bottom: 60px;
align-items: top;
}
@media only screen and (max-width: 767px) {
.comment-one .comment-one__single {
flex-direction: column;
}
}
.comment-one .comment-one__content {
position: relative;
margin-left: 45px;
}
@media only screen and (max-width: 767px) {
.comment-one .comment-one__content {
margin-top: 20px;
margin-left: 0;
}
}
.comment-one .comment-one__content h3 {
margin: 0;
font-size: 20px;
color: var(--theme-color3);
margin-bottom: 24px;
}
.comment-one .comment-one__content p {
font-size: 16px;
font-weight: 500;
}
.comment-one .comment-one__btn {
padding: 5px 30px;
position: absolute;
top: 0;
right: 0;
font-size: 14px;
background: var(--theme-color2);
}
.comment-one .comment-one__image {
position: relative;
display: block;
border-radius: 50%;
flex: 100px 0 0;
}
.comment-one .comment-one__image img {
border-radius: 50%;
width: 100%;
}
.comment-form .comment-form__title {
margin-top: -7px;
}
/*=======================================
Start Team Details
=========================================*/
.team-details {
padding: 120px 0 120px;
background: var(--theme-color1);
position: relative;
overflow: hidden;
}
.team-details .team-shape1 {
position: absolute;
left: 0;
bottom: -44px;
}
@media only screen and (max-width: 1023px) {
.team-details .team-shape1 {
display: none;
}
}
.team-details .team-shape2 {
position: absolute;
right: 0;
top: -44px;
}
@media only screen and (max-width: 1023px) {
.team-details .team-shape2 {
display: none;
}
}
.team-card {
display: flex;
background: var(--theme-color4);
gap: 90px;
align-items: center;
position: relative;
}
@media only screen and (max-width: 1023px) {
.team-card {
gap: 35px;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
.team-card {
display: block;
}
}
@media only screen and (max-width: 767px) {
.team-card {
display: block;
}
}
.team-card::before {
position: absolute;
content: "";
left: 0;
top: 0;
height: 10px;
width: 100%;
background: var(--theme-color2);
}
.team-card .team-img {
flex-shrink: 0;
position: relative;
z-index: 1;
}
@media (min-width: 768px) and (max-width: 991.98px) {
.team-card .team-img {
margin-bottom: 20px;
}
}
@media only screen and (max-width: 767px) {
.team-card .team-img {
margin-bottom: 20px;
}
}
.team-card .team-info {
padding: 0 40px 30px;
}
@media only screen and (max-width: 1023px) {
.team-card .team-info {
padding: 0 20px 30px;
}
}
.team-card .team-info h2 {
font-size: 40px;
font-weight: 600;
margin: 0;
}
@media (min-width: 768px) and (max-width: 991.98px) {
.team-card .team-info h2 {
font-size: 30px;
}
}
@media only screen and (max-width: 767px) {
.team-card .team-info h2 {
font-size: 30px;
}
}
.team-card .team-info .designation {
font-size: 17px;
padding-left: 45px;
margin: 8px 0 25px;
display: inline-block;
position: relative;
}
@media (min-width: 768px) and (max-width: 991.98px) {
.team-card .team-info .designation {
font-size: 16px;
width: 100%;
}
}
@media only screen and (max-width: 767px) {
.team-card .team-info .designation {
width: 100%;
}
}
.team-card .team-info .designation::before {
position: absolute;
content: "";
left: 0;
bottom: 12px;
width: 35px;
height: 1px;
background: var(--text-color);
}
.team-card .team-info .team-desc {
font-size: 17px;
width: 87%;
margin-bottom: 40px;
}
.team-card .team-info .contact-info .contact-box {
display: flex;
align-items: center;
gap: 30px;
margin-bottom: 40px;
}
@media only screen and (max-width: 599px) {
.team-card .team-info .contact-info .contact-box {
gap: 20px;
}
}
.team-card .team-info .contact-info .contact-box .icon {
height: 85px;
width: 85px;
line-height: 85px;
text-align: center;
border: 1px solid rgba(104, 104, 104, 0.2);
flex-shrink: 0;
border-radius: 50%;
}
.team-card .team-info .contact-info .contact-box .icon i {
background: var(--theme-color1);
height: 65px;
width: 65px;
line-height: 65px;
text-align: center;
display: inline-block;
border-radius: 50%;
color: var(--theme-color2);
font-size: 22px;
}
.team-card .team-info .contact-info .contact-box span {
font-size: 16px;
font-weight: 500;
font-family: var(--title-font);
display: inline-block;
margin-bottom: 11px;
}
.team-card .team-info .contact-info .contact-box p {
font-size: 24px;
font-weight: 600;
margin: 0;
color: var(--heading-color);
font-family: var(--title-font);
cursor: pointer;
}
@media only screen and (max-width: 599px) {
.team-card .team-info .contact-info .contact-box p {
font-size: 18px;
}
}
.team-card .team-info .contact-info .contact-box:last-child {
margin-bottom: 0;
}
.team-card .team-info .social-links {
position: absolute;
right: 110px;
bottom: 60px;
}
@media only screen and (max-width: 1023px) {
.team-card .team-info .social-links {
right: 40px;
}
}
.team-card .team-info .social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
line-height: 45px;
background: var(--theme-color2);
color: var(--theme-color-white);
font-size: 16px;
transition: 0.3s;
margin-bottom: 10px;
color: var(--theme-color4);
}
.team-card .team-info .social-links a:hover {
background: var(--theme-color1);
color: var(--theme-color-white);
}
.team-card .team-info .social-links a:last-child {
margin-bottom: 0;
}
.team-info-details h2.team-info-title {
font-size: 45px;
font-weight: 600;
}
@media only screen and (max-width: 599px) {
.team-info-details h2.team-info-title {
font-size: 30px;
}
}
.team-qualifications h2.team-qualify-title {
font-size: 22px;
font-weight: 500;
margin: 50px 0 28px;
}
.team-qualifications .team-lists ul li {
font-size: 17px;
font-weight: 400;
font-family: var(--text-font);
position: relative;
padding-left: 25px;
margin-bottom: 22px;
}
.team-qualifications .team-lists ul li::before {
position: absolute;
left: 0;
top: 8px;
height: 9px;
width: 9px;
background: #686868;
content: "";
border-radius: 20px;
}
.team-contact-form {
background: var(--theme-color4);
padding: 80px 40px;
margin-top: 120px;
border-radius: 10px;
}
@media (min-width: 768px) and (max-width: 991.98px) {
.team-contact-form {
margin-top: 90px;
}
}
@media only screen and (max-width: 767px) {
.team-contact-form {
margin-top: 80px;
}
}
.team-contact-form .form-box {
margin-bottom: 25px;
}
.team-contact-form .form-box input {
transition: 0.3s;
outline: 0;
width: 100%;
height: 60px;
background: var(--theme-color1);
border-radius: 10px;
padding: 0 30px;
border: 0;
color: var(--theme-color-white);
}
.team-contact-form .form-box input::placeholder {
color: var(--theme-color-white);
font-family: var(--text-font);
font-weight: 400;
font-size: 17px;
}
.team-contact-form .form-box textarea {
width: 100%;
height: 150px;
border: 0;
border-radius: 10px;
padding: 25px 30px;
background: var(--theme-color1);
outline: 0;
color: var(--theme-color-white);
}
.team-contact-form .form-box textarea::placeholder {
color: var(--theme-color-white);
font-family: var(--text-font);
font-weight: 400;
font-size: 17px;
}
.team-contact-form .contact-form {
margin-top: 15px;
}
.team-contact-form .contact-form button {
display: inline-block;
font-family: var(--text-font);
color: var(--theme-color4);
background-color: var(--theme-color2);
padding: 15px 40px;
font-weight: 500;
font-size: 18px;
border-radius: 45px;
position: relative;
z-index: 1;
transition: all 300ms ease;
}
.team-contact-form .contact-form button::after {
position: absolute;
content: "";
width: 0;
height: 100%;
left: 50%;
top: 0;
background: var(--theme-color-white);
z-index: -1;
border-radius: 45px;
transition: all 300ms ease;
}
.team-contact-form .contact-form button:hover::after {
width: 100%;
left: 0;
}
/***
====================================================================
Contact
====================================================================
***/
section.contact-details {
background: var(--theme-color4);
padding: 105px 0 120px;
}
.contact-details__info {
position: relative;
display: block;
margin-top: 41px;
}
.contact-details__info li {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.contact-details__info li .icon {
height: 80px;
width: 80px;
background-color: var(--theme-color1);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.contact-details__info li .icon span {
color: var(--text-color-bg-theme-color1);
font-size: 25px;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.contact-details__info li:hover .icon {
background-color: var(--theme-color2);
}
.contact-details__info li:hover .icon span {
color: var(--text-color-bg-theme-color2);
}
.contact-details__info li:hover .text a {
color: var(--notech-base);
}
.contact-details__info li:hover .text a span {
color: var(--notech-gray);
}
.contact-details__info li .text {
margin-left: 30px;
}
.contact-details__info li .text p {
font-size: 14px;
line-height: 24px;
}
.contact-details__info li .text a {
font-size: 18px;
color: var(--notech-black);
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.contact-details__info li .text span {
font-size: 20px;
color: var(--notech-black);
}
.contact-details__info li + li {
margin-top: 19px;
}
.themes-btn {
padding: 14px 35px;
margin: 0 10px 0 0;
transition: 0.5s;
}
.themes-btn:hover {
background: var(--theme-color2);
color: var(--theme-color1);
}
/* Kangpin late white-theme guard: keep old template sections from overriding the brand pages. */
html:has(.kangpin-site),
body:has(.kangpin-site),
body.kangpin-loaded {
background: #ffffff;
color: #25324b;
}
.kangpin-site,
.kangpin-site.page-wrapper {
background: #ffffff;
color: #25324b;
}
.kangpin-site .kp-home-hero.kp-brand-hero,
.kangpin-site .kp-hero-bg,
.kangpin-site .kp-profile-section,
.kangpin-site .kp-energy-section,
.kangpin-site .kp-product-section,
.kangpin-site .kp-product-matrix-section,
.kangpin-site .kp-application-section,
.kangpin-site .kp-quality-section,
.kangpin-site .kp-manufacturing-section,
.kangpin-site .kp-service-section,
.kangpin-site .kp-partner-section,
.kangpin-site .kp-global-section,
.kangpin-site .kp-cta-section,
.kangpin-site .kp-about-profile-section,
.kangpin-site .kp-page-hero,
.kangpin-site .banner-section,
.kangpin-site .about-section,
.kangpin-site .about-section-two,
.kangpin-site .services-section,
.kangpin-site .services-section-two,
.kangpin-site .process-section,
.kangpin-site .testimonial-section,
.kangpin-site .pricing-section,
.kangpin-site .team-section,
.kangpin-site .news-section,
.kangpin-site .contact-section {
background-color: #ffffff !important;
}
.kangpin-site .kp-page-hero,
.kangpin-site .banner-section,
.kangpin-site .about-section-two,
.kangpin-site .services-section-two {
background-image: none !important;
}
.kangpin-site .kp-product-matrix-section::before,
.kangpin-site .kp-about-profile-section::before,
.kangpin-site .kp-global-section::before,
.kangpin-site .manufacturing-section::before,
.kangpin-site .buler-bg,
.kangpin-site .about-shape2 {
display: none !important;
}
.kangpin-site .kp-brand-title h1,
.kangpin-site .kp-brand-title h2,
.kangpin-site .kp-profile-copy,
.kangpin-site .sec-title h2,
.kangpin-site .sec-title h2 span,
.kangpin-site .kp-step h4,
.kangpin-site .kp-cta-box h2,
.kangpin-site .kp-feature-list div,
.kangpin-site .service-single-inner h3,
.kangpin-site .about-section-two h2,
.kangpin-site .about-section-two h3,
.kangpin-site .news-block h3,
.kangpin-site .team-block h3 {
color: #25324b;
}
.kangpin-site .kp-brand-title p,
.kangpin-site .kp-lead,
.kangpin-site .kp-section-note,
.kangpin-site .kp-matrix-card p,
.kangpin-site .kp-step p,
.kangpin-site .kp-feature-list span,
.kangpin-site .about-section-two p,
.kangpin-site .services-section-two p,
.kangpin-site .news-block p {
color: #5f6b7c;
}
.kangpin-site .kp-matrix-card,
.kangpin-site .kp-step,
.kangpin-site .kp-industry-grid div,
.kangpin-site .kp-partner-cloud span,
.kangpin-site .kp-global-grid div,
.kangpin-site .kp-about-number-grid div,
.kangpin-site .kp-about-metrics div,
.kangpin-site .service-single-inner,
.kangpin-site .process-single-box,
.kangpin-site .pricing-block .inner-box,
.kangpin-site .team-block .inner-box,
.kangpin-site .news-block .inner-box,
.kangpin-site .kp-cta-box {
background: #ffffff;
border-color: #e5e8ef;
box-shadow: 0 14px 34px rgba(37, 50, 75, 0.06);
}
.kangpin-site .kp-footer {
background: #ffffff !important;
color: #25324b;
border-top: 0 !important;
}
.kangpin-site .kp-footer .widgets-section,
.kangpin-site .kp-footer .footer-bottom {
background: #ffffff !important;
}
.kangpin-site .kp-quality-section,
.kangpin-site .kp-service-section,
.kangpin-site .kp-partner-section,
.kangpin-site .kp-cta-section,
.kangpin-site .kp-product-section,
.kangpin-site .kp-product-matrix-section,
.kangpin-site .kp-application-section {
border-top: 0 !important;
border-bottom: 0 !important;
}
.kangpin-site section,
.kangpin-site main > section,
.kangpin-site footer {
border-top: 0 !important;
border-bottom: 0 !important;
}
.kangpin-site .kp-footer,
.kangpin-site .kp-footer a,
.kangpin-site .kp-footer p,
.kangpin-site .kp-footer li,
.kangpin-site .kp-footer .widget-title {
color: #25324b;
}
.kangpin-site .kp-page-hero h1,
.kangpin-site .page-title .title {
color: #25324b !important;
}
.kangpin-site .kp-page-hero p,
.kangpin-site .page-title .text {
color: #5f6b7c !important;
}
.kangpin-site .page-title,
.kangpin-site .page-title:before {
background: #ffffff !important;
background-image: none !important;
}
.kangpin-site .kp-history-grid div {
background: #ffffff !important;
background-image: none !important;
border: 1px solid #e5e8ef;
box-shadow: 0 14px 34px rgba(37, 50, 75, 0.06);
}
.kangpin-site .kp-history-grid strong {
color: #2d3b95 !important;
}
.kangpin-site .kp-history-grid strong span,
.kangpin-site .kp-about-metrics strong span,
.kangpin-site .kp-global-grid strong span,
.kangpin-site .kp-step-number .count-text {
color: inherit !important;
background: transparent !important;
}
.kangpin-site .kp-history-grid span {
color: #5f6b7c !important;
}
.kangpin-site .kp-footer .footer-des,
.kangpin-site .kp-footer .contact-widget .address p,
.kangpin-site .kp-footer .contact-widget .address a {
color: #5f6b7c !important;
}
.kangpin-site .kp-footer .footer-bottom .copyright-text,
.kangpin-site .kp-footer .footer-bottom .footer-links-wrapper a {
color: #25324b !important;
}
.kangpin-site.kp-inner-page .kp-header .header-lower,
.kangpin-site.kp-inner-page .sticky-header {
background: rgba(255, 255, 255, 0.96) !important;
border-bottom: 1px solid #e5e8ef;
box-shadow: 0 14px 38px rgba(37, 50, 75, 0.08);
}
.kangpin-site.kp-inner-page .kp-header .main-menu .navigation > li > a,
.kangpin-site.kp-inner-page .sticky-header .main-menu .navigation > li > a {
color: #25324b !important;
text-shadow: none !important;
}
.kangpin-site.kp-inner-page .kp-header .main-menu .navigation > li:hover > a,
.kangpin-site.kp-inner-page .kp-header .main-menu .navigation > li.current > a,
.kangpin-site.kp-inner-page .sticky-header .main-menu .navigation > li:hover > a,
.kangpin-site.kp-inner-page .sticky-header .main-menu .navigation > li.current > a {
color: #2d3b95 !important;
}
.kangpin-site .kp-philosophy-list div {
background: #ffffff !important;
border: 1px solid #e5e8ef !important;
box-shadow: 0 14px 34px rgba(37, 50, 75, 0.06);
}
.kangpin-site .kp-philosophy-list strong {
color: #2d3b95 !important;
}
.kangpin-site .kp-philosophy-list span {
color: #5f6b7c !important;
}
.kangpin-site section,
.kangpin-site .blog-details,
.kangpin-site .faq-section,
.kangpin-site .work-section-two,
.kangpin-site .project-details,
.kangpin-site .services-details,
.kangpin-site .team-details,
.kangpin-site .testimonial-section-three,
.kangpin-site .skill-section,
.kangpin-site .pricing-section,
.kangpin-site .blog-section,
.kangpin-site .news-section,
.kangpin-site .team-section,
.kangpin-site .project-section,
.kangpin-site .testimonial-section,
.kangpin-site .service-section,
.kangpin-site .contact-details {
background-color: #ffffff !important;
}
.kangpin-site .kp-history-mountain {
background-color: #eef6ff !important;
background-image: linear-gradient(180deg, #eef6ff 0%, #f8fbff 48%, #eaf4ff 100%) !important;
}
.kangpin-site .work-section-two,
.kangpin-site .skill-section,
.kangpin-site .pricing-section,
.kangpin-site .testimonial-section-three,
.kangpin-site .contact-section,
.kangpin-site .contact-details {
background-image: none !important;
}
.kangpin-site .sec-title h1,
.kangpin-site .sec-title h2,
.kangpin-site .sec-title h3,
.kangpin-site .title,
.kangpin-site h1,
.kangpin-site h2,
.kangpin-site h3,
.kangpin-site h4,
.kangpin-site h5,
.kangpin-site h6,
.kangpin-site .blog-details__title,
.kangpin-site .project-details__title,
.kangpin-site .services-details__title,
.kangpin-site .team-info-details h2,
.kangpin-site .sidebar__title,
.kangpin-site .faq-title {
color: #25324b !important;
}
.kangpin-site p,
.kangpin-site li,
.kangpin-site .text,
.kangpin-site .blog-details__text,
.kangpin-site .project-details__text,
.kangpin-site .services-details__text,
.kangpin-site .sidebar__post-content h3 a,
.kangpin-site .sidebar__comments-text-box p,
.kangpin-site .accordion-box .block .content p {
color: #5f6b7c !important;
}
.kangpin-site a {
color: #25324b;
}
.kangpin-site a:hover {
color: #2d3b95;
}
.kangpin-site .sidebar__single,
.kangpin-site .blog-card,
.kangpin-site .blog-block,
.kangpin-site .project-details__content,
.kangpin-site .services-details__content,
.kangpin-site .service-sidebar-single,
.kangpin-site .team-contact-form,
.kangpin-site .pricing-block .inner-box,
.kangpin-site .accordion-box .block,
.kangpin-site .testimonial-block,
.kangpin-site .team-card,
.kangpin-site .team-info-details {
background: #ffffff !important;
border-color: #e5e8ef !important;
box-shadow: 0 14px 34px rgba(37, 50, 75, 0.06);
}
.kangpin-site .preloader {
background: #ffffff !important;
}
.kangpin-site .mobile-menu .menu-box,
.kangpin-site .sidebar-area,
.kangpin-site .blog-single-box,
.kangpin-site .project-details__details-box,
.kangpin-site .service-list,
.kangpin-site .skill-icon-box,
.kangpin-site .process-conten {
background: #ffffff !important;
background-image: none !important;
border-color: #e5e8ef !important;
box-shadow: 0 14px 34px rgba(37, 50, 75, 0.06);
}
.kangpin-site .mobile-menu .navigation li > a,
.kangpin-site .mobile-menu .contact-list-one li,
.kangpin-site .mobile-menu .contact-list-one a,
.kangpin-site .sidebar-area,
.kangpin-site .sidebar-area a,
.kangpin-site .sidebar-area p,
.kangpin-site .sidebar-area h5,
.kangpin-site .blog-single-box h3,
.kangpin-site .blog-single-box a,
.kangpin-site .project-details__details-box,
.kangpin-site .project-details__details-box li,
.kangpin-site .service-list li,
.kangpin-site .service-list a,
.kangpin-site .skill-icon-box,
.kangpin-site .skill-icon-box h5,
.kangpin-site .skill-icon-box span,
.kangpin-site .process-conten,
.kangpin-site .process-conten h4,
.kangpin-site .process-conten span {
color: #25324b !important;
}
.kangpin-site .kp-contact-hotline-card {
position: relative;
overflow: hidden;
min-height: 460px;
padding: clamp(34px, 4vw, 54px);
border-radius: 8px;
background:
linear-gradient(#ffffff, #ffffff) padding-box,
linear-gradient(135deg, rgba(45, 59, 149, 0.95), rgba(30, 125, 210, 0.64), rgba(255, 255, 255, 0.8)) border-box;
border: 2px solid transparent;
box-shadow: 0 26px 70px rgba(37, 50, 75, 0.14);
isolation: isolate;
}
.kangpin-site .kp-contact-hotline-card::before {
content: "";
position: absolute;
inset: -45% -20%;
z-index: -1;
background: linear-gradient(110deg, transparent 32%, rgba(45, 59, 149, 0.16) 48%, rgba(30, 125, 210, 0.1) 54%, transparent 68%);
transform: translateX(-45%);
animation: kpContactShine 4.8s ease-in-out infinite;
}
.kangpin-site .kp-contact-hotline-card::after {
content: "";
position: absolute;
right: clamp(22px, 3vw, 42px);
top: clamp(22px, 3vw, 42px);
width: 104px;
height: 104px;
border-radius: 50%;
border: 1px solid rgba(45, 59, 149, 0.18);
box-shadow: 0 0 0 16px rgba(45, 59, 149, 0.04);
animation: kpContactPulse 2.8s ease-in-out infinite;
}
.kangpin-site .kp-contact-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
color: #2d3b95;
background: #eef3ff;
border: 1px solid rgba(45, 59, 149, 0.14);
border-radius: 999px;
padding: 8px 14px;
font-size: 13px;
line-height: 1;
font-weight: 900;
margin-bottom: 22px;
}
.kangpin-site .kp-contact-hotline-card h2 {
color: #25324b !important;
font-size: 44px;
line-height: 1.08;
font-weight: 950;
margin-bottom: 16px;
}
.kangpin-site .kp-contact-hotline-card p {
color: #5f6b7c !important;
max-width: 560px;
font-size: 17px;
line-height: 1.65;
font-weight: 800;
margin-bottom: 26px;
}
.kangpin-site .kp-contact-phone {
display: inline-flex;
align-items: center;
gap: 16px;
color: #ffffff !important;
background: #2d3b95;
border-radius: 8px;
padding: clamp(18px, 2.2vw, 24px) clamp(22px, 2.8vw, 32px);
font-size: 44px;
line-height: 1;
font-weight: 950;
letter-spacing: 0;
box-shadow: 0 20px 48px rgba(45, 59, 149, 0.26);
transform: translateZ(0);
transition: transform 260ms ease, box-shadow 260ms ease, background 260ms ease;
}
.kangpin-site .kp-contact-phone:hover {
color: #ffffff !important;
background: #1f2f86;
transform: translateY(-4px);
box-shadow: 0 28px 62px rgba(45, 59, 149, 0.32);
}
.kangpin-site .kp-contact-phone i {
font-size: 0.62em;
}
.kangpin-site .kp-contact-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 26px;
}
.kangpin-site .kp-contact-actions a {
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 46px;
padding: 12px 18px;
border-radius: 8px;
color: #25324b !important;
background: #ffffff;
border: 1px solid #e5e8ef;
font-weight: 900;
box-shadow: 0 12px 26px rgba(37, 50, 75, 0.06);
}
.kangpin-site .kp-contact-actions a:hover {
color: #2d3b95 !important;
border-color: rgba(45, 59, 149, 0.28);
}
.kangpin-site .kp-contact-points {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 30px;
}
.kangpin-site .kp-contact-points span {
display: grid;
gap: 6px;
min-height: 82px;
padding: 16px;
border-radius: 8px;
color: #5f6b7c !important;
background: #f7f9fd;
border: 1px solid #e5e8ef;
font-weight: 800;
}
.kangpin-site .kp-contact-points strong {
color: #2d3b95 !important;
font-size: 22px;
line-height: 1;
font-weight: 950;
}
.kangpin-site .kp-contact-accordion-section {
padding: clamp(34px, 4vw, 58px) 0 clamp(26px, 3vw, 42px);
background:
linear-gradient(180deg, #ffffff 0%, #f7f9fd 100%) !important;
}
.kangpin-site .kp-contact-heading {
max-width: 660px;
margin: 0 auto clamp(16px, 2vw, 26px);
text-align: center;
}
.kangpin-site .kp-contact-heading span {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
padding: 6px 13px;
border: 1px solid rgba(45, 59, 149, 0.18);
border-radius: 999px;
color: #2d3b95 !important;
background: #eef3ff;
font-size: 12px;
line-height: 1;
font-weight: 950;
}
.kangpin-site .kp-contact-heading h2 {
margin: 9px 0 6px;
color: #25324b !important;
font-size: clamp(27px, 3vw, 42px);
line-height: 1.05;
font-weight: 950;
}
.kangpin-site .kp-contact-heading p {
margin: 0 auto;
max-width: 640px;
color: #5f6b7c !important;
font-size: clamp(14px, 1.05vw, 16px);
line-height: 1.5;
font-weight: 800;
}
.kangpin-site .kp-contact-accordion {
display: flex;
gap: clamp(10px, 1.2vw, 16px);
min-height: clamp(300px, 29vw, 390px);
max-width: 1120px;
margin: 0 auto;
}
.kangpin-site .kp-contact-panel {
position: relative;
flex: 1 1 0;
min-width: 0;
overflow: hidden;
isolation: isolate;
border-radius: 8px;
background: #25324b;
box-shadow: 0 18px 42px rgba(37, 50, 75, 0.14);
transition: flex 460ms ease, transform 280ms ease, box-shadow 280ms ease;
}
.kangpin-site .kp-contact-panel:hover,
.kangpin-site .kp-contact-panel:focus-visible {
flex: 2.05 1 0;
color: #ffffff !important;
transform: translateY(-4px);
box-shadow: 0 24px 58px rgba(37, 50, 75, 0.2);
outline: 0;
}
.kangpin-site .kp-contact-panel::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(180deg, rgba(10, 18, 34, 0.08) 0%, rgba(10, 18, 34, 0.24) 44%, rgba(10, 18, 34, 0.78) 100%),
linear-gradient(90deg, rgba(45, 59, 149, 0.46), rgba(45, 59, 149, 0));
transition: background 280ms ease, opacity 280ms ease;
}
.kangpin-site .kp-contact-panel:hover::before,
.kangpin-site .kp-contact-panel:focus-visible::before {
background:
linear-gradient(180deg, rgba(10, 18, 34, 0.02) 0%, rgba(10, 18, 34, 0.2) 42%, rgba(10, 18, 34, 0.82) 100%),
linear-gradient(90deg, rgba(45, 59, 149, 0.24), rgba(45, 59, 149, 0));
}
.kangpin-site .kp-contact-panel img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transform: scale(1.03);
filter: saturate(0.95) brightness(0.88);
transition: transform 560ms ease, filter 280ms ease;
}
.kangpin-site .kp-contact-panel:hover img,
.kangpin-site .kp-contact-panel:focus-visible img {
transform: scale(1);
filter: saturate(1.04) brightness(1);
}
.kangpin-site .kp-contact-panel-label {
position: absolute;
left: clamp(18px, 2vw, 28px);
bottom: clamp(18px, 2vw, 28px);
z-index: 2;
writing-mode: horizontal-tb;
text-orientation: initial;
color: rgba(255, 255, 255, 0.78) !important;
font-size: clamp(22px, 2.4vw, 34px);
line-height: 1;
font-weight: 950;
letter-spacing: 0;
transition: opacity 220ms ease, transform 280ms ease;
}
.kangpin-site .kp-contact-panel:hover .kp-contact-panel-label,
.kangpin-site .kp-contact-panel:focus-visible .kp-contact-panel-label {
opacity: 0;
transform: translateY(18px);
}
.kangpin-site .kp-contact-panel-copy {
position: absolute;
left: clamp(20px, 2.4vw, 34px);
right: clamp(18px, 2.4vw, 34px);
bottom: clamp(20px, 2.4vw, 34px);
z-index: 2;
max-width: 500px;
opacity: 0;
transform: translateY(18px);
transition: opacity 260ms ease, transform 300ms ease;
}
.kangpin-site .kp-contact-panel:hover .kp-contact-panel-copy,
.kangpin-site .kp-contact-panel:focus-visible .kp-contact-panel-copy {
opacity: 1;
transform: translateY(0);
}
.kangpin-site .kp-contact-panel-copy span {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 7px 12px;
border-radius: 999px;
color: #ffffff !important;
background: rgba(45, 59, 149, 0.86);
font-size: 12px;
line-height: 1;
font-weight: 950;
}
.kangpin-site .kp-contact-panel-copy h3 {
margin: 14px 0 8px;
color: #ffffff !important;
font-size: clamp(25px, 2.5vw, 38px);
line-height: 1.05;
font-weight: 950;
}
.kangpin-site .kp-contact-panel-copy p {
margin: 0 0 12px;
color: rgba(255, 255, 255, 0.88) !important;
font-size: clamp(13px, 1.05vw, 15px);
line-height: 1.45;
font-weight: 800;
}
.kangpin-site .kp-contact-card-phone {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 12px 15px;
border-radius: 8px;
color: #ffffff !important;
background: #2d3b95;
font-size: clamp(17px, 1.7vw, 24px);
line-height: 1;
font-weight: 950;
letter-spacing: 0;
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
}
.kangpin-site .kp-contact-card-phone i {
font-size: 0.72em;
}
.kangpin-site .kp-contact-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: clamp(16px, 2vw, 24px);
}
.kangpin-site .kp-contact-final-cta,
.kangpin-site .kp-contact-site-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 42px;
border-radius: 8px;
font-weight: 950;
letter-spacing: 0;
transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.kangpin-site .kp-contact-final-cta {
padding: 10px 17px;
color: #ffffff !important;
background: #2d3b95;
box-shadow: 0 16px 38px rgba(45, 59, 149, 0.22);
}
.kangpin-site .kp-contact-site-link {
padding: 10px 15px;
color: #25324b !important;
background: #ffffff;
border: 1px solid #e5e8ef;
box-shadow: 0 12px 28px rgba(37, 50, 75, 0.06);
}
.kangpin-site .kp-contact-final-cta:hover,
.kangpin-site .kp-contact-site-link:hover {
transform: translateY(-3px);
}
.kangpin-site .kp-contact-final-cta:hover {
color: #ffffff !important;
box-shadow: 0 22px 48px rgba(45, 59, 149, 0.28);
}
.kangpin-site .kp-contact-site-link:hover {
color: #2d3b95 !important;
border-color: rgba(45, 59, 149, 0.28);
}
.kangpin-site .kp-download-center {
padding: clamp(86px, 9vw, 130px) 0 clamp(72px, 8vw, 112px);
background:
linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%) !important;
}
.kangpin-site .kp-support-title {
text-align: center;
margin-bottom: clamp(34px, 5vw, 58px);
}
.kangpin-site .kp-support-title h1 {
margin: 0;
color: #25324b !important;
font-size: clamp(30px, 3vw, 44px);
line-height: 1.1;
font-weight: 950;
}
.kangpin-site .kp-support-title p {
margin: 9px 0 0;
color: rgba(37, 50, 75, 0.14) !important;
font-size: clamp(13px, 1.3vw, 18px);
line-height: 1;
font-weight: 950;
letter-spacing: 0;
}
.kangpin-site .kp-catalog-list {
display: grid;
gap: clamp(28px, 4vw, 46px);
}
.kangpin-site .kp-catalog-download-card {
position: relative;
display: grid;
grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
align-items: center;
min-height: clamp(310px, 30vw, 430px);
overflow: hidden;
isolation: isolate;
border-radius: 72px 0 72px 0;
background:
radial-gradient(circle at 14% 18%, rgba(0, 207, 239, 0.28), transparent 28%),
linear-gradient(125deg, #006bb4 0%, #0089d0 40%, #2557c8 100%);
box-shadow: 0 26px 70px rgba(0, 93, 170, 0.22);
}
.kangpin-site .kp-catalog-download-card::before,
.kangpin-site .kp-catalog-download-card::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.kangpin-site .kp-catalog-download-card::before {
background:
linear-gradient(45deg, transparent 0 48%, rgba(255, 255, 255, 0.08) 48% 49%, transparent 49% 100%),
linear-gradient(135deg, transparent 0 58%, rgba(255, 255, 255, 0.08) 58% 59%, transparent 59% 100%);
opacity: 0.68;
}
.kangpin-site .kp-catalog-download-card::after {
right: -12%;
left: auto;
width: 42%;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 68%);
opacity: 0.74;
}
.kangpin-site .kp-catalog-cover {
position: relative;
align-self: end;
width: min(72%, 250px);
aspect-ratio: 0.72 / 1;
margin: 0 auto;
background: #ffffff;
box-shadow: 0 24px 48px rgba(0, 42, 92, 0.24);
overflow: hidden;
}
.kangpin-site .kp-catalog-cover img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left center;
display: block;
}
.kangpin-site .kp-catalog-copy {
padding: clamp(32px, 5vw, 62px) clamp(30px, 6vw, 76px) clamp(32px, 5vw, 62px) 0;
}
.kangpin-site .kp-catalog-copy span {
display: block;
margin-bottom: 12px;
color: #ffd469;
font-size: clamp(34px, 4vw, 56px);
line-height: 1;
font-weight: 950;
}
.kangpin-site .kp-catalog-copy h2 {
max-width: 720px;
margin: 0;
color: #ffffff !important;
font-size: clamp(25px, 3vw, 42px);
line-height: 1.18;
font-weight: 950;
}
.kangpin-site .kp-catalog-copy p {
margin: 12px 0 28px;
color: rgba(255, 255, 255, 0.24) !important;
font-size: clamp(18px, 2.1vw, 30px);
line-height: 1;
font-weight: 950;
}
.kangpin-site .kp-catalog-copy strong {
display: block;
max-width: 680px;
margin-bottom: 32px;
color: rgba(255, 255, 255, 0.6) !important;
font-size: 15px;
line-height: 1.8;
font-weight: 800;
}
.kangpin-site .kp-catalog-download-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 48px;
padding: 13px 18px;
border-radius: 8px;
color: #0f66b8 !important;
background: #ffffff;
font-size: 14px;
line-height: 1;
font-weight: 950;
box-shadow: 0 14px 32px rgba(0, 42, 92, 0.18);
transition: transform 220ms ease, box-shadow 220ms ease;
}
.kangpin-site .kp-catalog-download-button:hover {
color: #0f66b8 !important;
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(0, 42, 92, 0.24);
}
.kangpin-site .kp-catalog-download-button i {
color: #e53030;
font-size: 18px;
}
@keyframes kpContactPulse {
0%, 100% {
transform: scale(0.94);
opacity: 0.5;
}
50% {
transform: scale(1.08);
opacity: 0.95;
}
}
@keyframes kpContactShine {
0%, 44% {
transform: translateX(-54%) rotate(0deg);
}
100% {
transform: translateX(52%) rotate(0deg);
}
}
@media only screen and (max-width: 767px) {
.kangpin-site .kp-download-center {
padding-top: 104px;
}
.kangpin-site .kp-catalog-download-card {
grid-template-columns: 1fr;
border-radius: 42px 0 42px 0;
}
.kangpin-site .kp-catalog-cover {
width: min(62%, 210px);
margin-top: 34px;
}
.kangpin-site .kp-catalog-copy {
padding: 28px 24px 34px;
text-align: center;
}
.kangpin-site .kp-catalog-copy strong {
margin-left: auto;
margin-right: auto;
}
.kangpin-site .kp-contact-hotline-card {
min-height: 0;
padding: 28px 22px;
}
.kangpin-site .kp-contact-hotline-card h2 {
font-size: 32px;
}
.kangpin-site .kp-contact-phone {
width: 100%;
justify-content: center;
font-size: 30px;
padding: 18px 14px;
}
.kangpin-site .kp-contact-actions a {
flex: 1 1 160px;
justify-content: center;
}
.kangpin-site .kp-contact-points {
grid-template-columns: 1fr;
}
.kangpin-site .kp-contact-accordion-section {
padding: 24px 0 28px;
}
.kangpin-site .kp-contact-accordion {
display: grid;
min-height: 0;
gap: 18px;
}
.kangpin-site .kp-contact-panel,
.kangpin-site .kp-contact-panel:hover,
.kangpin-site .kp-contact-panel:focus-visible {
flex: none;
min-height: 300px;
transform: none;
}
.kangpin-site .kp-contact-panel-label,
.kangpin-site .kp-contact-panel:hover .kp-contact-panel-label,
.kangpin-site .kp-contact-panel:focus-visible .kp-contact-panel-label {
opacity: 0;
}
.kangpin-site .kp-contact-panel-copy,
.kangpin-site .kp-contact-panel:hover .kp-contact-panel-copy,
.kangpin-site .kp-contact-panel:focus-visible .kp-contact-panel-copy {
opacity: 1;
transform: translateY(0);
}
.kangpin-site .kp-contact-panel-copy {
left: 22px;
right: 22px;
bottom: 22px;
}
.kangpin-site .kp-contact-card-phone,
.kangpin-site .kp-contact-final-cta,
.kangpin-site .kp-contact-site-link {
width: 100%;
}
}
.kangpin-site .kp-contact-screen {
min-height: 100svh;
box-sizing: border-box;
display: flex;
padding: 122px 0 18px;
background: #ffffff !important;
}
.kangpin-site .kp-contact-screen > .auto-container {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.kangpin-site .kp-contact-screen-head {
width: 100%;
max-width: 1080px;
display: grid;
grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
align-items: end;
gap: clamp(34px, 5vw, 72px);
margin: 0 auto 16px;
}
.kangpin-site .kp-contact-intro {
padding-right: clamp(26px, 4vw, 56px);
border-right: 1px solid #e5e8ef;
}
.kangpin-site .kp-contact-intro > span {
display: block;
margin-bottom: 5px;
color: #2d3b95 !important;
font-size: 11px;
line-height: 1;
font-weight: 950;
letter-spacing: 0;
}
.kangpin-site .kp-contact-intro h1 {
margin: 0 0 6px;
color: #25324b !important;
font-size: clamp(34px, 3.2vw, 44px);
line-height: 1;
font-weight: 950;
letter-spacing: 0;
}
.kangpin-site .kp-contact-intro p {
max-width: 440px;
margin: 0;
color: #5f6b7c !important;
font-size: 13px;
line-height: 1.45;
font-weight: 700;
}
.kangpin-site .kp-contact-screen-head .kp-contact-heading {
max-width: none;
margin: 0;
text-align: left;
}
.kangpin-site .kp-contact-screen-head .kp-contact-heading span {
min-height: 24px;
padding: 5px 10px;
font-size: 11px;
}
.kangpin-site .kp-contact-screen-head .kp-contact-heading h2 {
margin: 6px 0 4px;
font-size: clamp(25px, 2.35vw, 32px);
line-height: 1;
}
.kangpin-site .kp-contact-screen-head .kp-contact-heading p {
max-width: 560px;
margin: 0;
font-size: 13px;
line-height: 1.45;
}
.kangpin-site.kp-contact-page .kp-contact-accordion {
width: 100%;
max-width: 1080px;
height: clamp(260px, 40vh, 300px);
min-height: 0;
gap: 12px;
}
.kangpin-site.kp-contact-page .kp-contact-panel {
border-radius: 6px;
box-shadow: 0 14px 34px rgba(37, 50, 75, 0.12);
}
.kangpin-site.kp-contact-page .kp-contact-panel:hover,
.kangpin-site.kp-contact-page .kp-contact-panel:focus-visible {
flex-grow: 1.9;
transform: translateY(-3px);
}
.kangpin-site.kp-contact-page .kp-contact-panel-label {
left: 20px;
bottom: 18px;
font-size: clamp(22px, 2.2vw, 30px);
}
.kangpin-site.kp-contact-page .kp-contact-panel-copy {
left: 22px;
right: 22px;
bottom: 20px;
}
.kangpin-site.kp-contact-page .kp-contact-panel-copy span {
min-height: 24px;
padding: 6px 9px;
font-size: 10px;
}
.kangpin-site.kp-contact-page .kp-contact-panel-copy h3 {
margin: 8px 0 5px;
font-size: clamp(23px, 2.2vw, 29px);
}
.kangpin-site.kp-contact-page .kp-contact-panel-copy p {
margin-bottom: 8px;
font-size: 12px;
line-height: 1.4;
}
.kangpin-site.kp-contact-page .kp-contact-card-phone {
min-height: 36px;
padding: 9px 12px;
font-size: clamp(16px, 1.5vw, 19px);
}
.kangpin-site.kp-contact-page .kp-contact-footer {
width: 100%;
max-width: 1080px;
margin: 12px auto 0;
}
.kangpin-site.kp-contact-page .kp-contact-final-cta,
.kangpin-site.kp-contact-page .kp-contact-site-link {
min-height: 38px;
padding-top: 8px;
padding-bottom: 8px;
font-size: 14px;
}
@media only screen and (max-width: 767px) {
.kangpin-site .kp-contact-screen {
min-height: auto;
padding: 100px 0 34px;
}
.kangpin-site .kp-contact-screen > .auto-container {
justify-content: flex-start;
}
.kangpin-site .kp-contact-screen-head {
grid-template-columns: 1fr;
align-items: start;
gap: 14px;
margin-bottom: 20px;
}
.kangpin-site .kp-contact-intro {
padding: 0 0 14px;
border-right: 0;
border-bottom: 1px solid #e5e8ef;
}
.kangpin-site .kp-contact-intro h1 {
font-size: 34px;
}
.kangpin-site .kp-contact-screen-head .kp-contact-heading h2 {
font-size: 25px;
}
.kangpin-site.kp-contact-page .kp-contact-accordion {
height: auto;
gap: 12px;
}
.kangpin-site.kp-contact-page .kp-contact-panel,
.kangpin-site.kp-contact-page .kp-contact-panel:hover,
.kangpin-site.kp-contact-page .kp-contact-panel:focus-visible {
min-height: 230px;
}
.kangpin-site.kp-contact-page .kp-contact-panel-copy {
left: 18px;
right: 18px;
bottom: 18px;
}
.kangpin-site.kp-contact-page .kp-contact-footer {
display: grid;
margin-top: 14px;
}
}
.kangpin-site .kp-profile-blue-card,
.kangpin-site .kp-profile-blue-card h3,
.kangpin-site .kp-profile-blue-card p,
.kangpin-site .kp-profile-blue-card .kp-inline-count,
.kangpin-site .kp-profile-blue-card .count-text {
color: #ffffff !important;
}
.kangpin-site .kp-profile-blue-card p {
color: rgba(255, 255, 255, 0.94) !important;
}
.kangpin-site .kp-header {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 116px;
z-index: 9999;
}
.kangpin-site .kp-header .logo-box {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.kangpin-site .kp-scroll-brand {
position: fixed;
left: clamp(28px, 3.2vw, 54px);
top: 20px;
z-index: 10001;
display: grid;
gap: 4px;
width: auto;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform-origin: left top;
transform: translate3d(34vw, 36vh, 0) scale(2.6);
transition: opacity 320ms ease, transform 520ms cubic-bezier(0.18, 0.76, 0.18, 1), visibility 320ms ease;
}
.kangpin-site .kp-scroll-brand strong {
display: block;
color: #09152d;
font-size: clamp(22px, 1.55vw, 30px);
line-height: 0.9;
font-weight: 950;
letter-spacing: 0;
}
.kangpin-site .kp-scroll-brand span {
display: block;
color: #09152d;
font-size: clamp(8px, 0.55vw, 11px);
line-height: 1;
font-weight: 900;
letter-spacing: 0.02em;
white-space: nowrap;
}
body.kp-page-scrolled .kp-scroll-brand {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate3d(0, 0, 0) scale(1);
}
.kangpin-site .kp-header .header-lower,
.kangpin-site.kp-inner-page .kp-header .header-lower {
opacity: 0;
visibility: hidden;
transform: translateY(-110%);
pointer-events: none;
transition: opacity 220ms ease, transform 260ms ease, visibility 220ms ease, background 220ms ease, box-shadow 220ms ease;
background: rgba(255, 255, 255, 0.96) !important;
border-bottom-color: transparent !important;
box-shadow: none !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
}
.kangpin-site .kp-header:hover .header-lower,
.kangpin-site .kp-header:focus-within .header-lower,
.kangpin-site .kp-header.kp-nav-active .header-lower,
.kangpin-site.kp-inner-page .kp-header:hover .header-lower,
.kangpin-site.kp-inner-page .kp-header:focus-within .header-lower,
.kangpin-site.kp-inner-page .kp-header.kp-nav-active .header-lower {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
background: rgba(255, 255, 255, 0.96) !important;
border-bottom: 1px solid #e5e8ef !important;
box-shadow: 0 14px 38px rgba(37, 50, 75, 0.08) !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
}
.kangpin-site .sticky-header {
display: none !important;
}
@media (hover: none), (pointer: coarse) {
.kangpin-site .kp-header {
height: auto;
}
.kangpin-site .kp-header .logo-box {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.kangpin-site .kp-header .header-lower,
.kangpin-site.kp-inner-page .kp-header .header-lower {
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
background: rgba(255, 255, 255, 0.96) !important;
border-bottom: 1px solid #e5e8ef !important;
box-shadow: 0 14px 38px rgba(37, 50, 75, 0.08) !important;
}
}
.kangpin-site .kp-service-section.kp-customer-service {
background: #f3f6fa !important;
}
.kangpin-site .kp-customer-card,
.kangpin-site .kp-service-promise {
background: #ffffff !important;
}
.kangpin-site .kp-header {
height: 116px;
pointer-events: auto;
transition: height 260ms ease;
}
.kangpin-site .kp-header .logo-box {
min-width: 170px;
width: 170px;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.kangpin-site .kp-header .logo-box .logo {
display: block;
}
.kangpin-site .kp-scroll-brand {
display: none !important;
}
.kangpin-site .kp-header .header-lower,
.kangpin-site.kp-inner-page .kp-header .header-lower,
.kangpin-site .kp-header:hover .header-lower,
.kangpin-site .kp-header:focus-within .header-lower,
.kangpin-site.kp-inner-page .kp-header:hover .header-lower,
.kangpin-site.kp-inner-page .kp-header:focus-within .header-lower {
height: 116px;
padding: 0 clamp(28px, 3.4vw, 54px);
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
background: rgba(255, 255, 255, 0) !important;
border-bottom: 1px solid rgba(229, 232, 239, 0) !important;
box-shadow: none !important;
backdrop-filter: blur(0) !important;
-webkit-backdrop-filter: blur(0) !important;
transition: height 260ms ease, background 260ms ease, box-shadow 260ms ease, border-color 260ms ease, backdrop-filter 260ms ease;
}
.kangpin-site .kp-header .main-box {
min-height: 0;
height: 100%;
display: grid;
grid-template-columns: minmax(150px, 170px) 1fr minmax(150px, 240px);
align-items: center;
gap: clamp(18px, 2vw, 32px);
transition: height 260ms ease, padding 260ms ease;
}
.kangpin-site .kp-header .nav-outer {
justify-self: center;
height: 100%;
display: flex;
align-items: center;
}
.kangpin-site .kp-header .outer-box {
justify-self: end;
height: 100%;
padding: 0;
display: flex;
align-items: center;
}
.kangpin-site .kp-header .header-btn {
display: flex;
align-items: center;
}
.kangpin-site .kp-header .main-menu .navigation {
display: flex;
align-items: center;
height: 100%;
gap: clamp(28px, 3.4vw, 68px);
}
.kangpin-site .kp-header .main-menu .navigation > li {
height: 116px;
display: flex;
align-items: center;
float: none;
margin-right: 0;
padding: 0;
transition: height 260ms ease;
}
.kangpin-site .kp-header .main-menu .navigation > li > a {
font-size: 16px;
transition: font-size 260ms ease, color 220ms ease;
}
.kangpin-site .kp-header .main-menu .navigation > li:before {
bottom: 22px;
transition: bottom 260ms ease;
}
.kangpin-site .kp-header .header-btn a {
min-height: 44px;
padding: 10px 24px;
font-size: 16px;
transition: min-height 260ms ease, padding 260ms ease, font-size 260ms ease;
}
body.kp-page-scrolled .kp-header {
height: 58px;
}
body.kp-page-scrolled .kp-header .logo-box {
min-width: 96px;
width: 96px;
}
body.kp-page-scrolled .kp-header .header-lower,
body.kp-page-scrolled .kangpin-site.kp-inner-page .kp-header .header-lower,
body.kp-page-scrolled .kp-header:hover .header-lower,
body.kp-page-scrolled .kp-header:focus-within .header-lower,
body.kp-page-scrolled .kangpin-site.kp-inner-page .kp-header:hover .header-lower,
body.kp-page-scrolled .kangpin-site.kp-inner-page .kp-header:focus-within .header-lower {
height: 58px;
background: rgba(255, 255, 255, 0.68) !important;
border-bottom: 1px solid rgba(229, 232, 239, 0.58) !important;
box-shadow: 0 12px 32px rgba(37, 50, 75, 0.08) !important;
backdrop-filter: blur(18px) saturate(1.35) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.35) !important;
}
body.kp-page-scrolled .kp-header .main-box {
grid-template-columns: minmax(88px, 96px) 1fr minmax(104px, 154px);
gap: clamp(12px, 1.4vw, 24px);
}
body.kp-page-scrolled .kp-header .main-menu .navigation {
gap: clamp(22px, 3vw, 48px);
}
body.kp-page-scrolled .kp-header .main-menu .navigation > li {
height: 58px;
padding: 0;
}
body.kp-page-scrolled .kp-header .main-menu .navigation > li > a {
font-size: 13px;
}
body.kp-page-scrolled .kp-header .main-menu .navigation > li:before {
bottom: 10px;
}
body.kp-page-scrolled .kp-header .header-btn a {
min-height: 30px;
padding: 6px 14px;
font-size: 12px;
}
/* Homepage visual recovery: keep the brand treatment above the legacy white-theme guard. */
.kangpin-site .kp-home-hero.kp-brand-hero .kp-brand-title h1,
.kangpin-site .kp-home-hero.kp-brand-hero .kp-brand-title h2 {
color: #005b9d !important;
}
.kangpin-site .kp-home-hero.kp-brand-hero .kp-brand-title p {
color: #087ac0 !important;
}
.kangpin-site .kp-home-hero.kp-brand-hero .kp-hero-stats-section {
background: rgba(218, 239, 255, 0.34) !important;
border-top: 1px solid rgba(255, 255, 255, 0.68) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.56) !important;
box-shadow: 0 -18px 44px rgba(14, 70, 128, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.44) !important;
backdrop-filter: blur(24px) saturate(1.2) !important;
-webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
}
.kangpin-site .kp-home-hero.kp-brand-hero .kp-hero-stats {
background: transparent !important;
margin-top: 0 !important;
}
.kangpin-site .kp-home-hero.kp-brand-hero .kp-hero-stat {
background: transparent !important;
border-color: rgba(255, 255, 255, 0.38) !important;
}
.kangpin-site .kp-home-hero.kp-brand-hero .kp-hero-stat strong {
color: #0066b2 !important;
}
.kangpin-site .kp-home-hero.kp-brand-hero .kp-hero-stat > span {
color: #38566f !important;
}
html[lang="en"] .kangpin-site .kp-home-hero.kp-brand-hero .kp-hero-stat strong .count-text {
color: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
font-weight: inherit !important;
}
html[lang="en"] .kangpin-site .kp-home-hero.kp-brand-hero .kp-hero-stat > span:last-child {
max-width: none !important;
font-size: clamp(11px, 0.92vw, 15px) !important;
line-height: 1.12 !important;
white-space: nowrap !important;
}
.kangpin-site .kp-profile-slab .kp-profile-slab-overlay {
background:
linear-gradient(90deg, rgba(4, 28, 50, 0.58) 0%, rgba(5, 54, 91, 0.38) 48%, rgba(7, 77, 121, 0.18) 100%),
linear-gradient(180deg, rgba(0, 36, 66, 0.12), rgba(0, 68, 117, 0.06)) !important;
}
.kangpin-site .kp-profile-slab .kp-profile-slab-copy h2,
.kangpin-site .kp-profile-slab .kp-profile-slab-copy p,
.kangpin-site .kp-profile-slab .kp-profile-slab-tagline,
.kangpin-site .kp-profile-slab .kp-slab-kicker {
color: #ffffff !important;
text-shadow: 0 2px 18px rgba(3, 28, 52, 0.28);
}
.kangpin-site .kp-profile-slab .kp-profile-slab-copy p {
color: rgba(255, 255, 255, 0.94) !important;
}
.kangpin-site .kp-profile-slab .kp-profile-slab-tagline {
color: #d7efff !important;
}
.kangpin-site:not(.kp-inner-page) .kp-partner-section {
opacity: 1 !important;
transform: none !important;
}
.kangpin-site:not(.kp-inner-page) .kp-partner-section .kp-partner-track {
animation-play-state: running !important;
}
.kangpin-site .kp-partner-marquee-stage::before,
.kangpin-site .kp-partner-marquee-stage::after {
display: none !important;
}
.kangpin-site .kp-solution-page {
background: #ffffff;
}
.kangpin-site .kp-solution-hero {
min-height: 100svh;
display: flex;
align-items: center;
padding: 138px 0 76px;
background:
radial-gradient(circle at 86% 20%, rgba(90, 183, 244, 0.16), transparent 32%),
linear-gradient(135deg, #f7fbff 0%, #ffffff 58%, #eef7ff 100%);
}
.kangpin-site .kp-solution-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.72fr);
gap: clamp(34px, 7vw, 110px);
align-items: center;
}
.kangpin-site .kp-solution-hero-copy {
max-width: 790px;
}
.kangpin-site .kp-solution-kicker {
display: inline-block;
padding: 6px 10px;
color: #2366a2;
background: #e9f3ff;
font-size: 14px;
line-height: 1;
font-weight: 950;
letter-spacing: 0.03em;
}
.kangpin-site .kp-solution-hero h1 {
margin: 22px 0 22px;
color: #25324b !important;
font-size: clamp(42px, 5.4vw, 86px);
line-height: 1.08;
font-weight: 950;
}
.kangpin-site .kp-solution-hero h1 span {
color: #126fc0;
}
.kangpin-site .kp-solution-hero-copy > p {
max-width: 650px;
margin: 0 0 32px;
color: #5f6b7c !important;
font-size: clamp(16px, 1.25vw, 20px);
line-height: 1.8;
font-weight: 700;
}
.kangpin-site .kp-solution-button {
display: inline-flex;
align-items: center;
gap: 12px;
min-height: 54px;
padding: 15px 24px;
color: #ffffff !important;
background: #1474c9;
border-radius: 999px;
font-size: 16px;
font-weight: 950;
box-shadow: 0 18px 40px rgba(20, 116, 201, 0.24);
transition: transform 220ms ease, box-shadow 220ms ease;
}
.kangpin-site .kp-solution-button:hover {
color: #ffffff !important;
transform: translateY(-3px);
box-shadow: 0 24px 48px rgba(20, 116, 201, 0.32);
}
.kangpin-site .kp-solution-hero-side {
display: grid;
gap: 12px;
padding: clamp(24px, 3vw, 42px);
border: 1px solid rgba(173, 211, 240, 0.72);
border-radius: 32px 0 32px 0;
background: rgba(255, 255, 255, 0.68);
box-shadow: 0 24px 64px rgba(42, 103, 155, 0.12), inset 0 1px 0 rgba(255,255,255,0.92);
backdrop-filter: blur(22px) saturate(1.2);
-webkit-backdrop-filter: blur(22px) saturate(1.2);
}
.kangpin-site .kp-solution-hero-side div {
display: grid;
grid-template-columns: 42px 1fr;
gap: 4px 12px;
padding: 20px 0;
border-bottom: 1px solid rgba(164, 204, 235, 0.42);
}
.kangpin-site .kp-solution-hero-side div:last-child {
border-bottom: 0;
}
.kangpin-site .kp-solution-hero-side strong {
grid-row: span 2;
color: #3186cf;
font-size: 18px;
line-height: 1.1;
}
.kangpin-site .kp-solution-hero-side span {
color: #25324b;
font-size: 20px;
font-weight: 950;
}
.kangpin-site .kp-solution-hero-side p {
margin: 0;
color: #5f6b7c !important;
font-size: 14px;
line-height: 1.6;
font-weight: 700;
}
.kangpin-site .kp-solution-flow {
padding: 80px 0 96px;
background: #ffffff;
border-top: 0 !important;
border-bottom: 0 !important;
}
.kangpin-site .kp-solution-flow-heading {
max-width: 720px;
margin-bottom: 34px;
}
.kangpin-site .kp-solution-flow-heading span {
color: #7fa4c3;
font-size: 13px;
font-weight: 950;
letter-spacing: 0.12em;
}
.kangpin-site .kp-solution-flow-heading h2 {
margin: 10px 0 0;
color: #25324b !important;
font-size: clamp(28px, 3vw, 48px);
line-height: 1.15;
font-weight: 950;
}
.kangpin-site .kp-solution-flow-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.kangpin-site .kp-solution-flow-grid article {
min-height: 220px;
padding: 28px;
border: 1px solid #dceaf5;
border-radius: 8px;
background: #f8fbff;
}
.kangpin-site .kp-solution-flow-grid article > span {
color: #3186cf;
font-size: 18px;
font-weight: 950;
}
.kangpin-site .kp-solution-flow-grid h3 {
margin: 28px 0 10px;
color: #25324b !important;
font-size: 24px;
font-weight: 950;
}
.kangpin-site .kp-solution-flow-grid p {
margin: 0;
color: #5f6b7c !important;
font-size: 15px;
line-height: 1.7;
font-weight: 700;
}
@media only screen and (max-width: 767px) {
.kangpin-site .kp-solution-hero {
min-height: auto;
padding: 112px 0 64px;
}
.kangpin-site .kp-solution-hero-grid,
.kangpin-site .kp-solution-flow-grid {
grid-template-columns: 1fr;
}
.kangpin-site .kp-solution-hero h1 {
font-size: clamp(38px, 10vw, 58px);
}
.kangpin-site .kp-solution-hero-side {
padding: 18px 22px;
}
}
/* Homepage product and industry modules. */
.kangpin-site .kp-product-categories {
max-width: 1040px;
margin-left: auto;
margin-right: auto;
}
.kangpin-site .kp-product-categories .kp-energy-card {
flex: 0 0 clamp(230px, 20vw, 270px);
max-width: none;
height: clamp(430px, 37vw, 540px);
aspect-ratio: auto;
transition: flex-basis 560ms cubic-bezier(0.22, 1, 0.36, 1), transform 320ms ease, box-shadow 320ms ease;
}
.kangpin-site .kp-product-categories .kp-energy-card:not(:hover):not(:focus-within) {
flex-basis: clamp(230px, 20vw, 270px);
}
.kangpin-site .kp-product-categories .kp-energy-card:hover,
.kangpin-site .kp-product-categories .kp-energy-card:focus-within {
flex: 1 1 0;
max-width: none;
aspect-ratio: auto;
}
.kangpin-site .kp-product-categories .kp-energy-card:hover .kp-energy-caption,
.kangpin-site .kp-product-categories .kp-energy-card:focus-within .kp-energy-caption {
max-width: 560px;
}
.kangpin-site .kp-industry-cards .kp-matrix-card {
position: relative;
display: block;
overflow: hidden;
isolation: isolate;
color: inherit;
text-decoration: none;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(214, 235, 255, 0.34)),
rgba(255, 255, 255, 0.38) !important;
border: 1px solid rgba(255, 255, 255, 0.78) !important;
box-shadow: 0 18px 44px rgba(45, 95, 145, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
backdrop-filter: blur(22px) saturate(1.28);
-webkit-backdrop-filter: blur(22px) saturate(1.28);
transition: transform 360ms ease, box-shadow 360ms ease, border-color 360ms ease;
}
/* Industries directory */
.kangpin-site .kp-industries-main {
background: #ffffff;
}
.kangpin-site .kp-industries-hero {
padding: clamp(154px, 14vw, 188px) 0 clamp(30px, 3.5vw, 48px);
border-bottom: 1px solid #e8edf2;
background: #ffffff;
}
.kangpin-site .kp-industries-hero span {
display: block;
margin-bottom: 8px;
color: #2168b2;
font-size: 13px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0;
}
.kangpin-site .kp-industries-hero h1 {
margin: 0;
color: #25324b;
font-size: clamp(38px, 4.2vw, 62px);
line-height: 1.08;
letter-spacing: 0;
}
.kangpin-site .kp-industries-section {
padding: clamp(44px, 5vw, 78px) 0 clamp(72px, 7vw, 110px);
background: #ffffff;
}
.kangpin-site .kp-industries-layout {
display: grid;
grid-template-columns: minmax(220px, 0.28fr) minmax(0, 1fr);
gap: clamp(34px, 4vw, 70px);
align-items: stretch;
}
.kangpin-site .kp-industries-tabs {
position: relative;
display: grid;
grid-template-rows: repeat(8, minmax(0, 1fr));
align-content: stretch;
}
.kangpin-site .kp-industries-tabs::before {
content: "";
position: absolute;
top: 18px;
right: 5px;
bottom: 18px;
width: 2px;
background: #e3e8ee;
}
.kangpin-site .kp-industry-tab {
position: relative;
min-height: 68px;
padding: 10px 32px 10px 0;
border: 0;
border-radius: 0;
background: transparent;
color: #374151;
font-size: 18px;
font-weight: 500;
line-height: 1.35;
text-align: right;
letter-spacing: 0;
cursor: pointer;
transition: color 180ms ease, font-weight 180ms ease;
}
.kangpin-site .kp-industry-tab::after {
content: "";
position: absolute;
z-index: 1;
top: 50%;
right: 0;
width: 12px;
height: 12px;
border: 3px solid #e3e8ee;
background: #ffffff;
transform: translateY(-50%) rotate(45deg);
transition: border-color 180ms ease, background-color 180ms ease;
}
.kangpin-site .kp-industry-tab:hover,
.kangpin-site .kp-industry-tab.is-active {
color: #2168b2;
}
.kangpin-site .kp-industry-tab.is-active {
font-weight: 700;
}
.kangpin-site .kp-industry-tab.is-active::after {
border-color: #2168b2;
background: #2168b2;
}
.kangpin-site .kp-industry-tab:focus-visible {
outline: 3px solid rgba(33, 104, 178, 0.32);
outline-offset: 3px;
}
.kangpin-site .kp-industries-stage {
min-width: 0;
}
.kangpin-site .kp-industry-panel {
position: relative;
aspect-ratio: 16 / 9;
margin: 0;
overflow: hidden;
border: 1px solid #e2e8f0;
border-radius: 2px;
background: #edf2f7;
box-shadow: 0 20px 48px rgba(45, 71, 101, 0.12);
animation: kpIndustryPanelIn 260ms ease both;
}
.kangpin-site .kp-industry-panel[hidden] {
display: none;
}
.kangpin-site .kp-industry-panel img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.kangpin-site .kp-industry-panel figcaption {
position: absolute;
right: 0;
bottom: 0;
left: 0;
min-height: 72px;
display: grid;
place-items: center;
padding: 14px 24px;
background: rgba(35, 78, 162, 0.9);
color: #ffffff;
font-size: clamp(20px, 2vw, 30px);
font-weight: 700;
line-height: 1.25;
text-align: center;
letter-spacing: 0;
}
@media only screen and (min-width: 1200px) {
.kangpin-site .kp-industries-stage {
height: 100%;
}
.kangpin-site .kp-industry-panel {
height: 100%;
aspect-ratio: auto;
}
}
@keyframes kpIndustryPanelIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media only screen and (max-width: 1199px) {
.kangpin-site .kp-industries-layout {
grid-template-columns: 1fr;
gap: 24px;
}
.kangpin-site .kp-industries-tabs {
display: flex;
overflow-x: auto;
padding: 0 0 10px;
scroll-snap-type: x proximity;
scrollbar-width: thin;
}
.kangpin-site .kp-industries-tabs::before {
display: none;
}
.kangpin-site .kp-industry-tab {
flex: 0 0 auto;
min-height: 48px;
padding: 10px 16px;
border-bottom: 2px solid #e3e8ee;
font-size: 16px;
text-align: center;
white-space: nowrap;
scroll-snap-align: start;
}
.kangpin-site .kp-industry-tab::after {
display: none;
}
.kangpin-site .kp-industry-tab.is-active {
border-bottom-color: #2168b2;
}
}
@media only screen and (max-width: 767px) {
.kangpin-site .kp-industries-hero {
padding: 112px 0 24px;
}
.kangpin-site .kp-industries-hero h1 {
font-size: 36px;
}
.kangpin-site .kp-industries-section {
padding: 30px 0 64px;
}
.kangpin-site .kp-industry-tab {
min-height: 44px;
padding: 9px 14px;
font-size: 15px;
}
.kangpin-site .kp-industry-panel {
aspect-ratio: 4 / 3;
}
.kangpin-site .kp-industry-panel figcaption {
min-height: 56px;
padding: 10px 14px;
font-size: 18px;
}
}
@media (prefers-reduced-motion: reduce) {
.kangpin-site .kp-industry-panel {
animation: none;
}
}
.kangpin-site .kp-industry-cards .kp-matrix-card::before,
.kangpin-site .kp-industry-cards .kp-matrix-card::after {
content: "";
position: absolute;
z-index: 0;
display: block;
pointer-events: none;
border-radius: inherit;
opacity: 0.8;
transform: none;
transition: opacity 360ms ease, background 360ms ease;
}
.kangpin-site .kp-industry-cards .kp-matrix-card::before {
inset: -26%;
background:
radial-gradient(ellipse at 20% 8%, rgba(255, 255, 255, 0.76) 0 8%, rgba(255, 255, 255, 0) 44%),
radial-gradient(ellipse at 88% 80%, rgba(120, 194, 255, 0.22), rgba(255, 255, 255, 0) 50%);
filter: blur(18px) saturate(1.16);
}
.kangpin-site .kp-industry-cards .kp-matrix-card::after {
inset: 1px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 40%, rgba(102, 177, 235, 0.08));
border: 1px solid rgba(255, 255, 255, 0.3);
}
.kangpin-site .kp-industry-cards .kp-matrix-card:hover,
.kangpin-site .kp-industry-cards .kp-matrix-card:focus-within {
transform: translateY(-10px) scale(1.015);
border-color: rgba(73, 151, 222, 0.46) !important;
box-shadow: 0 28px 58px rgba(45, 95, 145, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}
.kangpin-site .kp-industry-cards .kp-matrix-card h3,
.kangpin-site .kp-industry-cards .kp-matrix-card p,
.kangpin-site .kp-industry-cards .kp-matrix-tag {
position: relative;
z-index: 1;
}
.kangpin-site .kp-industry-cards .kp-matrix-card h3 {
color: #25324b !important;
}
.kangpin-site .kp-industry-cards .kp-matrix-card p {
color: #52667b !important;
}
.kangpin-site .kp-industry-cards .kp-matrix-tag {
color: #1766a2 !important;
background: rgba(224, 242, 255, 0.64) !important;
border: 1px solid rgba(125, 193, 241, 0.28);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.kangpin-site .kp-application-section .kp-industry-grid div {
background: rgba(224, 241, 255, 0.34) !important;
border: 1px solid rgba(255, 255, 255, 0.84) !important;
box-shadow: 0 14px 34px rgba(45, 95, 145, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
backdrop-filter: blur(16px) saturate(1.12);
-webkit-backdrop-filter: blur(16px) saturate(1.12);
transition: transform 260ms ease, background 260ms ease, box-shadow 260ms ease;
}
.kangpin-site .kp-application-section .kp-industry-grid div:hover {
transform: translateY(-5px);
background: rgba(205, 233, 255, 0.58) !important;
box-shadow: 0 20px 42px rgba(45, 95, 145, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}
/* Final homepage refinement: larger profile copy, single-line data, and a restrained liquid-glass surface. */
.kangpin-site .kp-profile-slab-copy h2 {
font-size: clamp(46px, 3.8vw, 72px) !important;
}
.kangpin-site .kp-profile-slab-copy p {
font-size: clamp(16px, 1.08vw, 21px) !important;
line-height: 1.72 !important;
}
.kangpin-site .kp-profile-slab-intro .kp-profile-slab-lead {
font-size: clamp(22px, 1.5vw, 29px) !important;
line-height: 1.48 !important;
}
.kangpin-site .kp-profile-slab-capability strong {
font-size: clamp(15px, 1vw, 18px) !important;
}
.kangpin-site .kp-profile-slab-capability div > span {
font-size: clamp(12px, 0.78vw, 14px) !important;
}
.kangpin-site .kp-profile-slab-tagline {
font-size: clamp(16px, 1.08vw, 21px) !important;
}
.kangpin-site .kp-profile-slab-stat strong {
display: flex !important;
align-items: baseline;
justify-content: center;
gap: 0.06em;
font-size: clamp(26px, 2.1vw, 40px) !important;
white-space: nowrap !important;
}
.kangpin-site .kp-profile-slab-stat strong .count-text,
.kangpin-site .kp-profile-slab-stat strong .plus {
display: inline-block !important;
vertical-align: baseline;
white-space: nowrap !important;
}
.kangpin-site .kp-profile-slab-stat:nth-child(4) strong {
font-size: clamp(22px, 1.72vw, 34px) !important;
}
.kangpin-site .kp-profile-slab-stat span {
font-size: clamp(11px, 0.78vw, 14px) !important;
white-space: nowrap;
}
html[lang="en"] .kangpin-site .kp-profile-slab-stat span {
font-size: clamp(10px, 0.7vw, 12px) !important;
white-space: nowrap !important;
}
/* Standalone Why Kangpin and Customer Service sections on a continuous white canvas. */
html {
scroll-behavior: smooth;
}
.kangpin-site .kp-choose-kangpin {
min-height: clamp(560px, 78svh, 760px);
display: flex;
align-items: center;
padding: clamp(82px, 7vw, 112px) 0;
background: #ffffff !important;
}
.kangpin-site .kp-choose-heading {
margin-bottom: clamp(30px, 3.2vw, 48px);
text-align: center !important;
}
.kangpin-site .kp-choose-heading h2 {
font-size: clamp(38px, 3.4vw, 56px);
}
.kangpin-site .kp-choose-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(14px, 1.5vw, 22px);
}
.kangpin-site .kp-choose-card,
.kangpin-site .kp-choose-card-rounded,
.kangpin-site .kp-choose-card-rounded-right {
min-height: clamp(224px, 18vw, 278px);
border: 1px solid rgba(185, 211, 231, 0.62);
border-radius: 8px;
background: #f8fbfe;
box-shadow: 0 14px 36px rgba(44, 101, 151, 0.07);
transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}
.kangpin-site .kp-choose-card::before {
display: none;
}
.kangpin-site .kp-choose-card:hover,
.kangpin-site .kp-choose-card:focus-within {
transform: translateY(-7px);
border-color: rgba(70, 145, 205, 0.5);
box-shadow: 0 22px 44px rgba(44, 101, 151, 0.12);
}
.kangpin-site .kp-choose-card-content {
padding: 28px 22px;
}
.kangpin-site .kp-choose-card-content h3 {
margin: 0 0 18px;
color: #145d99;
font-size: clamp(24px, 1.8vw, 32px);
line-height: 1.15;
}
.kangpin-site .kp-choose-card-content p,
html[lang="en"] .kangpin-site .kp-choose-card-content p {
color: #506a80;
font-size: clamp(14px, 1vw, 17px);
line-height: 1.68;
}
html[lang="en"] .kangpin-site .kp-choose-card-content h3 {
font-size: clamp(20px, 1.5vw, 26px);
}
.kangpin-site .kp-choose-service-link {
position: relative;
width: 100%;
min-height: inherit;
display: grid;
place-items: center;
color: inherit;
}
.kangpin-site .kp-choose-service-link:hover {
color: inherit;
}
.kangpin-site .kp-choose-link-arrow {
position: absolute;
right: 18px;
bottom: 16px;
width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: 50%;
color: #2475b6;
background: #e8f3fc;
font-size: 13px;
transition: transform 240ms ease, background 240ms ease;
}
.kangpin-site .kp-choose-service-link:hover .kp-choose-link-arrow,
.kangpin-site .kp-choose-service-link:focus-visible .kp-choose-link-arrow {
transform: translateY(4px);
background: #d8ecfa;
}
.kangpin-site .kp-customer-service {
min-height: 100svh;
scroll-margin-top: 58px;
display: flex;
align-items: center;
padding: clamp(66px, 5.4vw, 82px) 0 clamp(30px, 3vw, 46px);
background: #ffffff !important;
}
.kangpin-site .kp-service-section.kp-customer-service {
background: #ffffff !important;
}
.kangpin-site .kp-customer-service .sec-title {
margin-bottom: clamp(16px, 1.5vw, 22px);
text-align: center !important;
}
.kangpin-site .kp-customer-service .kp-service-heading h2 {
font-size: clamp(36px, 3.4vw, 52px);
}
.kangpin-site .kp-customer-service-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(10px, 1vw, 14px);
}
.kangpin-site .kp-customer-service .kp-customer-card {
min-height: clamp(318px, 27vw, 372px);
padding: clamp(18px, 1.65vw, 24px) clamp(14px, 1.35vw, 20px);
border: 1px solid rgba(185, 211, 231, 0.58);
border-radius: 8px;
background: #f8fbfe !important;
box-shadow: 0 14px 36px rgba(44, 101, 151, 0.065);
}
.kangpin-site .kp-customer-service .kp-customer-card::after,
.kangpin-site .kp-customer-service .kp-service-hex::after,
.kangpin-site .kp-customer-service .kp-service-timeline::before,
.kangpin-site .kp-customer-service .kp-service-item::before {
display: none;
}
.kangpin-site .kp-customer-service .kp-service-index {
top: 18px;
right: 14px;
font-size: clamp(48px, 4vw, 62px);
}
.kangpin-site .kp-customer-service .kp-service-card-head {
gap: 10px;
margin-bottom: 14px;
}
.kangpin-site .kp-customer-service .kp-service-hex {
flex-basis: 44px;
width: 44px;
height: 50px;
font-size: 20px;
}
.kangpin-site .kp-customer-service .kp-service-card-head h3 {
font-size: clamp(17px, 1.35vw, 21px);
}
html[lang="en"] .kangpin-site .kp-customer-service .kp-service-card-head h3 {
max-width: 110px;
font-size: clamp(15px, 1.18vw, 18px);
}
.kangpin-site .kp-customer-service .kp-service-timeline {
gap: 9px;
padding-left: 0;
}
.kangpin-site .kp-customer-service .kp-service-item {
padding-top: 9px;
border-top: 1px solid rgba(185, 211, 231, 0.48);
}
.kangpin-site .kp-customer-service .kp-service-item:first-child {
padding-top: 0;
border-top: 0;
}
.kangpin-site .kp-customer-service .kp-service-item h4 {
min-height: 0;
padding: 0;
margin: 0 0 4px;
background: transparent;
font-size: clamp(13px, 1vw, 15px);
line-height: 1.25;
}
.kangpin-site .kp-customer-service .kp-service-item p,
html[lang="en"] .kangpin-site .kp-customer-service .kp-service-item p {
max-width: none;
font-size: clamp(11px, 0.82vw, 13px);
line-height: 1.46;
font-weight: 650;
}
.kangpin-site .kp-customer-service .kp-service-promise {
grid-template-columns: minmax(118px, 0.5fr) minmax(0, 2.4fr);
gap: 12px;
width: 100%;
margin-top: 12px;
padding: 14px 16px;
border: 1px solid rgba(185, 211, 231, 0.58);
border-radius: 8px;
background: #f8fbfe !important;
box-shadow: 0 14px 36px rgba(44, 101, 151, 0.065);
}
.kangpin-site .kp-customer-service .kp-service-promise h3 {
font-size: clamp(16px, 1.3vw, 20px);
word-break: keep-all;
}
.kangpin-site .kp-customer-service .kp-service-promise-list {
grid-template-columns: 1.2fr 0.9fr 0.8fr;
gap: clamp(8px, 0.8vw, 12px);
}
.kangpin-site .kp-customer-service .kp-service-promise-list div {
grid-template-columns: 24px minmax(0, 1fr);
column-gap: 7px;
}
.kangpin-site .kp-customer-service .kp-service-promise-list i {
font-size: 22px;
}
.kangpin-site .kp-customer-service .kp-service-promise-list strong {
margin-bottom: 3px;
font-size: clamp(11px, 0.88vw, 13px);
}
.kangpin-site .kp-customer-service .kp-service-promise-list span {
font-size: clamp(9px, 0.75vw, 11px);
line-height: 1.42;
}
/* Preserve partner-card scale and compact only the spacing between items. */
.kangpin-site .kp-partner-section {
padding: clamp(58px, 5.4vw, 88px) 0 clamp(62px, 5.8vw, 94px);
}
.kangpin-site .kp-partner-heading {
margin-bottom: clamp(28px, 3vw, 46px);
}
.kangpin-site .kp-partner-row {
margin-bottom: clamp(7px, 0.62vw, 11px);
}
.kangpin-site .kp-partner-track {
gap: clamp(6px, 0.55vw, 10px);
padding: 0 clamp(6px, 0.7vw, 10px);
animation-duration: 54s;
}
.kangpin-site .kp-partner-row:nth-child(2) .kp-partner-track {
animation-duration: 59s;
}
.kangpin-site .kp-partner-row:nth-child(3) .kp-partner-track {
animation-duration: 57s;
}
.kangpin-site .kp-partner-card {
flex: 0 0 clamp(190px, 17vw, 300px);
height: clamp(78px, 6.2vw, 126px);
padding: clamp(12px, 1.2vw, 20px) clamp(18px, 1.7vw, 30px);
box-shadow: 0 18px 36px rgba(36, 45, 62, 0.09);
}
@media only screen and (max-width: 1099px) {
.kangpin-site .kp-choose-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kangpin-site .kp-choose-card {
min-height: 180px;
}
.kangpin-site .kp-customer-service {
min-height: auto;
}
.kangpin-site .kp-customer-service-grid {
grid-template-columns: 1fr;
}
.kangpin-site .kp-customer-service .kp-customer-card {
min-height: 0;
}
}
@media only screen and (max-width: 767px) {
.kangpin-site .kp-choose-grid,
.kangpin-site .kp-customer-service .kp-service-promise,
.kangpin-site .kp-customer-service .kp-service-promise-list {
grid-template-columns: 1fr;
}
.kangpin-site .kp-choose-card {
min-height: 150px;
}
.kangpin-site .kp-customer-service .kp-service-promise {
gap: 14px;
}
.kangpin-site .kp-partner-heading {
margin-bottom: 24px;
}
.kangpin-site .kp-partner-card {
flex-basis: 180px;
height: 72px;
}
}
/* Compact shared footer across every page. */
.kangpin-site .kp-footer .widgets-section {
padding: clamp(34px, 3.2vw, 46px) 0 clamp(12px, 1.4vw, 20px);
}
.kangpin-site .kp-footer .widgets-section::before,
.kangpin-site .kp-footer .widgets-section::after {
display: none;
}
.kangpin-site .kp-footer .footer-column {
margin-bottom: 12px;
padding-right: clamp(18px, 2.2vw, 34px);
}
.kangpin-site .kp-footer .about-widget .logo {
max-width: 132px;
margin-bottom: 12px;
}
.kangpin-site .kp-footer .about-widget p.footer-des {
max-width: 380px;
margin-bottom: 0;
font-size: 14px;
line-height: 1.58;
}
.kangpin-site .kp-footer .widget-title,
.kangpin-site .kp-footer .contact-widget .widget-title {
padding-bottom: 0;
margin-bottom: 14px;
font-size: 20px;
}
.kangpin-site .kp-footer .user-links li {
margin-bottom: 7px;
line-height: 1.35;
}
.kangpin-site .kp-footer .user-links li a {
margin-bottom: 0;
font-size: 14px;
line-height: 1.45;
}
.kangpin-site .kp-footer .user-links li a::before,
.kangpin-site .kp-footer .user-links li a::after {
display: none;
}
.kangpin-site .kp-footer .contact-widget .address {
margin-bottom: 10px;
}
.kangpin-site .kp-footer .contact-widget .address p,
.kangpin-site .kp-footer .contact-widget .address a {
margin-top: 0;
font-size: 14px;
line-height: 1.5;
}
.kangpin-site .kp-footer .footer-bottom .inner-container {
padding: 13px 1px;
}
.kangpin-site .kp-footer .footer-bottom .copyright-text,
.kangpin-site .kp-footer .footer-bottom .footer-links-wrapper a {
font-size: 13px;
}
@media only screen and (max-width: 767px) {
.kangpin-site .kp-footer .widgets-section {
padding: 28px 0 8px;
}
.kangpin-site .kp-footer .widgets-section .row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 18px;
margin: 0;
}
.kangpin-site .kp-footer .footer-column {
width: 100%;
max-width: none;
margin-bottom: 14px;
padding: 0;
}
.kangpin-site .kp-footer .footer-column:first-child {
grid-column: 1 / -1;
margin-bottom: 18px;
}
.kangpin-site .kp-footer .about-widget .logo {
max-width: 112px;
margin-bottom: 8px;
}
.kangpin-site .kp-footer .about-widget p.footer-des {
font-size: 13px;
line-height: 1.5;
}
.kangpin-site .kp-footer .widget-title,
.kangpin-site .kp-footer .contact-widget .widget-title {
margin-bottom: 10px;
font-size: 17px;
}
.kangpin-site .kp-footer .footer-bottom .inner-container {
display: grid;
gap: 6px;
padding: 12px 1px;
}
}
.kangpin-site .kp-industry-cards .kp-matrix-card::before {
inset: -26%;
border-radius: 42% 58% 54% 46% / 52% 42% 58% 48%;
background:
radial-gradient(ellipse at 20% 8%, rgba(255, 255, 255, 0.8) 0 8%, rgba(255, 255, 255, 0) 44%),
radial-gradient(ellipse at 88% 80%, rgba(120, 194, 255, 0.24), rgba(255, 255, 255, 0) 50%);
filter: blur(18px) saturate(1.16);
}
.kangpin-site .kp-industry-cards .kp-matrix-card::after {
inset: 1px;
border-radius: inherit;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 40%, rgba(102, 177, 235, 0.1));
}
@media only screen and (max-width: 767px) {
.kangpin-site .kp-product-categories {
--kpEnergyCardSize: min(430px, calc(100vw - 30px));
display: grid;
max-width: none;
}
.kangpin-site .kp-product-categories .kp-energy-card {
width: 100%;
max-width: none;
}
}
/* About page viewport rhythm and section continuity. */
.kangpin-site .kp-about-first-screen {
position: relative;
isolation: isolate;
align-items: center;
padding-top: 116px;
padding-bottom: 0;
}
.kangpin-site .kp-about-first-screen::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
height: clamp(42px, 5.5vh, 72px);
background: #eef6ff;
box-shadow: 0 -32px 58px rgba(238, 246, 255, 0.88);
pointer-events: none;
}
.kangpin-site .kp-about-first-screen > .auto-container {
position: relative;
z-index: 1;
height: 100%;
display: flex;
align-items: center;
}
.kangpin-site .kp-about-first-screen .kp-profile-story-grid {
width: 100%;
min-height: min(840px, calc(100svh - 136px));
}
.kangpin-site .kp-about-first-screen .kp-profile-blue-card {
display: flex;
flex-direction: column;
justify-content: center;
}
.kangpin-site .kp-history-mountain {
margin-top: -1px;
padding-top: clamp(36px, 3vw, 54px);
box-shadow: 0 -24px 46px rgba(238, 246, 255, 0.76);
}
/* About navigation preview. */
.kangpin-site .kp-header .kp-about-menu {
position: relative;
}
.kangpin-site .kp-header .main-menu .kp-about-menu > .kp-about-mobile-links {
display: none !important;
}
.kangpin-site .kp-about-mega-menu {
position: fixed;
top: 116px;
left: 50vw;
z-index: 1002;
width: min(920px, calc(100vw - 48px));
min-height: 286px;
display: grid;
grid-template-columns: 188px minmax(0, 1fr);
overflow: hidden;
border: 1px solid #dde5ee;
border-radius: 6px;
background: #ffffff;
box-shadow: 0 28px 70px rgba(31, 55, 83, 0.18);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(-50%, 18px);
transition: opacity 240ms ease, transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 240ms ease;
}
body.kp-page-scrolled .kangpin-site .kp-about-mega-menu {
top: 58px;
}
.kangpin-site .kp-about-menu:hover > .kp-about-mega-menu,
.kangpin-site .kp-about-menu:focus-within > .kp-about-mega-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, 0);
}
.kangpin-site .kp-about-subnav {
display: grid;
align-content: start;
gap: 8px;
padding: 28px 18px;
background: #f1f5f9;
border-right: 1px solid #dde5ee;
}
.kangpin-site .kp-about-subnav-item {
width: 100%;
min-height: 54px;
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
align-items: center;
gap: 10px;
padding: 12px 14px;
border: 1px solid transparent;
border-radius: 4px;
background: transparent;
color: #42536a;
font-size: 15px;
line-height: 1.2;
font-weight: 850;
text-align: left;
cursor: pointer;
transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}
.kangpin-site .kp-about-subnav-item i {
color: #6f8198;
font-size: 16px;
text-align: center;
}
.kangpin-site .kp-about-subnav-item:hover,
.kangpin-site .kp-about-subnav-item.is-active {
color: #ffffff;
background: #075fa7;
border-color: #075fa7;
}
.kangpin-site .kp-about-subnav-item:hover i,
.kangpin-site .kp-about-subnav-item.is-active i {
color: #ffffff;
}
.kangpin-site .kp-about-mega-content {
min-width: 0;
padding: 26px 28px;
}
.kangpin-site .kp-about-panel {
height: 100%;
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(210px, 0.75fr);
gap: 28px;
align-items: center;
animation: kpAboutPanelReveal 320ms ease both;
}
.kangpin-site .kp-about-panel[hidden] {
display: none !important;
}
.kangpin-site .kp-about-panel-kicker {
display: block;
margin-bottom: 8px;
color: #0875bd;
font-size: 11px;
line-height: 1;
font-weight: 900;
}
.kangpin-site .kp-about-panel-copy h3 {
margin: 0 0 10px;
color: #26364b !important;
font-size: 24px;
line-height: 1.2;
font-weight: 900;
}
.kangpin-site .kp-about-panel-copy p {
margin: 0 0 16px;
color: #607086;
font-size: 13px;
line-height: 1.65;
font-weight: 650;
}
.kangpin-site .kp-about-panel-copy > a {
display: inline-flex;
align-items: center;
gap: 8px;
color: #075fa7;
font-size: 13px;
font-weight: 850;
}
.kangpin-site .kp-about-panel-facts {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.kangpin-site .kp-about-panel-facts span {
padding: 6px 9px;
border: 1px solid #dce7f0;
border-radius: 3px;
color: #42536a;
background: #f7f9fb;
font-size: 10px;
line-height: 1;
font-weight: 900;
}
.kangpin-site .kp-about-panel-photo,
.kangpin-site .kp-about-media-photo {
display: block;
width: 100%;
height: 176px;
object-fit: cover;
border-radius: 4px;
box-shadow: 0 14px 28px rgba(31, 55, 83, 0.14);
}
.kangpin-site .kp-about-media-panel {
grid-template-columns: minmax(190px, 0.8fr) minmax(0, 1fr) 122px;
gap: 24px;
}
.kangpin-site .kp-about-media-qr {
margin: 0;
text-align: center;
}
.kangpin-site .kp-about-media-qr img {
display: block;
width: 112px;
height: 112px;
margin: 0 auto 8px;
padding: 5px;
border: 1px solid #dbe4ed;
background: #ffffff;
}
.kangpin-site .kp-about-media-qr figcaption {
color: #53647a;
font-size: 11px;
line-height: 1.2;
font-weight: 800;
}
@keyframes kpAboutPanelReveal {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Honors text reveal and readability. */
.kangpin-site .kp-honors-group h2,
.kangpin-site .kp-honors-strength h2 {
font-size: clamp(28px, 2vw, 38px);
}
.kangpin-site .kp-honors-group li {
font-size: clamp(14px, 0.95vw, 17px);
line-height: 1.4;
}
.kangpin-site .kp-honors-strength-list span {
font-size: clamp(14px, 1vw, 18px);
}
.kangpin-site .kp-honors-text-reveal {
opacity: 0;
filter: blur(4px);
transform: translateY(24px);
transition: opacity 680ms ease, filter 680ms ease, transform 680ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kangpin-site .kp-honors-copy .kp-honors-text-reveal:first-child {
transition-delay: 100ms;
}
.kangpin-site .kp-honors-copy .kp-honors-text-reveal:last-child {
transition-delay: 260ms;
}
.kangpin-site .kp-honors-strength.kp-honors-text-reveal {
transition-delay: 180ms;
}
.kangpin-site .kp-honors-showcase.kp-section-visible .kp-honors-text-reveal {
opacity: 1;
filter: blur(0);
transform: translateY(0);
}
@media only screen and (max-width: 1199px) and (min-width: 992px) {
.kangpin-site .kp-about-mega-menu {
width: min(790px, calc(100vw - 36px));
grid-template-columns: 164px minmax(0, 1fr);
}
.kangpin-site .kp-about-mega-content {
padding: 22px;
}
.kangpin-site .kp-about-media-panel {
grid-template-columns: minmax(170px, 0.8fr) minmax(0, 1fr) 104px;
gap: 18px;
}
.kangpin-site .kp-about-media-qr img {
width: 96px;
height: 96px;
}
}
@media only screen and (max-width: 991px) {
.kangpin-site .kp-about-first-screen {
height: auto;
min-height: auto;
display: block;
padding-top: 104px;
padding-bottom: 48px;
}
.kangpin-site .kp-about-first-screen > .auto-container {
height: auto;
display: block;
}
.kangpin-site .kp-about-first-screen .kp-profile-story-grid {
min-height: 0;
}
.kangpin-site .kp-about-first-screen .kp-profile-blue-card {
justify-content: flex-start;
}
.kangpin-site .kp-about-mega-menu {
display: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.kangpin-site .kp-about-mega-menu,
.kangpin-site .kp-about-panel,
.kangpin-site .kp-honors-text-reveal {
animation: none;
transition: none;
}
}
/* Product center and product-family pages. */
.kangpin-site .kp-header .mobile-nav-toggler,
.kangpin-site .kp-header .mobile-nav-toggler .icon {
color: #25324b;
}
.kangpin-site .kp-product-overview-screen {
min-height: 100svh;
display: flex;
align-items: center;
padding: 142px 0 46px;
background: #f2f4f7 !important;
overflow: hidden;
}
.kangpin-site .kp-product-overview-screen .auto-container {
width: 100%;
}
.kangpin-site .kp-product-overview-heading {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: end;
column-gap: 26px;
margin-bottom: clamp(24px, 2.4vw, 36px);
}
.kangpin-site .kp-product-overview-heading > span {
grid-column: 1 / -1;
margin-bottom: 7px;
color: #7f8998;
font-size: 12px;
line-height: 1;
font-weight: 900;
letter-spacing: 0.12em;
}
.kangpin-site .kp-product-overview-heading h1 {
margin: 0;
color: #25324b !important;
font-size: clamp(38px, 3.4vw, 56px);
line-height: 1;
font-weight: 950;
}
.kangpin-site .kp-product-overview-heading p {
max-width: 720px;
margin: 0 0 2px;
color: #5f6b7c !important;
font-size: 15px;
line-height: 1.6;
font-weight: 700;
}
.kangpin-site .kp-product-overview-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(18px, 2vw, 30px);
}
.kangpin-site .kp-product-overview-card {
min-width: 0;
min-height: clamp(330px, 31vh, 390px);
display: grid;
grid-template-columns: minmax(0, 1.03fr) minmax(220px, 0.97fr);
overflow: hidden;
background: #ffffff;
border: 1px solid #dfe4eb;
border-top: 3px solid #2d3b95;
border-radius: 8px;
box-shadow: 0 18px 44px rgba(37, 50, 75, 0.08);
transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
.kangpin-site .kp-product-overview-card:nth-child(2) {
border-top-color: #b77a2f;
}
.kangpin-site .kp-product-overview-card:hover {
transform: translateY(-5px);
border-color: #c8d4e1;
box-shadow: 0 24px 54px rgba(37, 50, 75, 0.13);
}
.kangpin-site .kp-product-overview-copy {
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: clamp(26px, 2.7vw, 42px);
}
.kangpin-site .kp-product-overview-index {
color: #6f7b8c;
font-size: 11px;
line-height: 1;
font-weight: 900;
letter-spacing: 0.08em;
}
.kangpin-site .kp-product-overview-copy h2 {
margin: 14px 0 14px;
color: #25324b !important;
font-size: clamp(27px, 2.1vw, 36px);
line-height: 1.1;
font-weight: 950;
}
.kangpin-site .kp-product-overview-copy p {
margin: 0;
color: #5f6b7c !important;
font-size: 14px;
line-height: 1.72;
font-weight: 700;
}
.kangpin-site .kp-product-intro-button {
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 24px;
padding: 12px 18px 12px 20px;
color: #ffffff !important;
background: #2d3b95;
border: 1px solid #2d3b95;
border-radius: 6px;
font-size: 14px;
line-height: 1;
font-weight: 900;
box-shadow: 0 12px 26px rgba(45, 59, 149, 0.2);
transition: transform 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.kangpin-site .kp-product-intro-button i {
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #2d3b95;
background: #ffffff;
border-radius: 50%;
font-size: 11px;
transition: transform 220ms ease;
}
.kangpin-site .kp-product-intro-button:hover {
color: #ffffff !important;
background: #1f2c7d;
transform: translateY(-2px);
box-shadow: 0 17px 34px rgba(45, 59, 149, 0.28);
}
.kangpin-site .kp-product-intro-button:hover i {
transform: translateX(3px);
}
.kangpin-site .kp-product-overview-media {
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 22px;
background: #f7f8fa;
border-left: 1px solid #e7eaf0;
}
.kangpin-site .kp-product-overview-media img {
width: 100%;
max-height: 280px;
object-fit: contain;
filter: drop-shadow(0 18px 22px rgba(42, 54, 72, 0.13));
}
.kangpin-site .kp-product-family-hero {
min-height: 470px;
display: flex;
align-items: center;
padding: 146px 0 52px;
background-color: #eef5fa !important;
background-image: none !important;
}
.kangpin-site .kp-product-family-hero::after {
display: none;
}
.kangpin-site .kp-rectifier-family-hero {
min-height: 390px;
background-color: #f2f4f7 !important;
}
.kangpin-site .kp-product-family-hero h1 {
color: #25324b !important;
font-size: clamp(46px, 5vw, 76px);
line-height: 1.06;
font-weight: 950;
}
.kangpin-site .kp-product-family-hero p {
max-width: 760px;
color: #5f6b7c !important;
font-size: 17px;
line-height: 1.75;
font-weight: 700;
}
.kangpin-site .kp-product-browser {
padding: 50px 0 82px;
background: #f1f2f4 !important;
}
.kangpin-site .kp-product-browser-heading {
display: flex;
align-items: baseline;
gap: 16px;
margin-bottom: 22px;
}
.kangpin-site .kp-product-browser-heading span {
color: #778397;
font-size: 11px;
line-height: 1;
font-weight: 900;
letter-spacing: 0.12em;
}
.kangpin-site .kp-product-browser-heading h2 {
margin: 0;
color: #25324b !important;
font-size: 30px;
line-height: 1;
font-weight: 950;
}
.kangpin-site .kp-product-category-tabs {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
background: #e7e8ea;
border-top: 1px solid #d9dce1;
border-left: 1px solid #d9dce1;
}
.kangpin-site .kp-product-category-tabs button {
position: relative;
min-width: 0;
min-height: 72px;
padding: 13px 14px;
color: #555b66;
background: #e7e8ea;
border: 0;
border-right: 1px solid #d9dce1;
border-bottom: 1px solid #d9dce1;
border-radius: 0;
font-size: clamp(13px, 0.9vw, 16px);
line-height: 1.35;
font-weight: 800;
text-align: center;
overflow-wrap: anywhere;
transition: color 180ms ease, background 180ms ease;
}
.kangpin-site .kp-product-category-tabs button::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 4px;
background: #2d3b95;
transform: scaleX(0);
transform-origin: center;
transition: transform 200ms ease;
}
.kangpin-site .kp-product-category-tabs button:hover,
.kangpin-site .kp-product-category-tabs button:focus-visible,
.kangpin-site .kp-product-category-tabs button.is-active,
.kangpin-site .kp-product-category-tabs button[aria-selected="true"] {
color: #25428d;
background: #ffffff;
outline: none;
}
.kangpin-site .kp-product-category-tabs button:focus-visible {
box-shadow: inset 0 0 0 2px #4d66b0;
}
.kangpin-site .kp-product-category-tabs button.is-active::after,
.kangpin-site .kp-product-category-tabs button[aria-selected="true"]::after {
transform: scaleX(1);
}
.kangpin-site .kp-product-image-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(14px, 1.45vw, 22px);
margin-top: clamp(42px, 4.4vw, 68px);
transition: opacity 150ms ease, transform 150ms ease;
}
.kangpin-site .kp-product-image-grid.is-switching {
opacity: 0.42;
transform: translateY(4px);
}
.kangpin-site .kp-product-image-card {
min-width: 0;
margin: 0;
overflow: hidden;
background: #ffffff;
border: 1px solid #e0e3e8;
border-radius: 6px;
box-shadow: 0 14px 36px rgba(49, 57, 70, 0.07);
}
.kangpin-site .kp-product-image-card > div {
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(18px, 2.2vw, 36px);
background: #ffffff;
}
.kangpin-site .kp-product-image-card img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
filter: drop-shadow(0 18px 22px rgba(51, 59, 72, 0.12));
}
.kangpin-site .kp-product-image-card figcaption {
min-height: 74px;
display: grid;
align-content: center;
gap: 5px;
padding: 13px 16px;
background: #f8f9fa;
border-top: 1px solid #e7e9ed;
}
.kangpin-site .kp-product-image-card figcaption span,
.kangpin-site .kp-product-image-card figcaption strong {
display: block;
min-width: 0;
overflow-wrap: anywhere;
}
.kangpin-site .kp-product-image-card figcaption span {
color: #687386;
font-size: 12px;
line-height: 1.25;
font-weight: 700;
}
.kangpin-site .kp-product-image-card figcaption strong {
color: #25324b;
font-size: 15px;
line-height: 1.25;
font-weight: 900;
}
/* Stable two-card product expansion. */
@media only screen and (min-width: 768px) {
.kangpin-site .kp-product-categories {
width: min(1040px, 100%);
max-width: 1040px;
display: flex;
align-items: stretch;
gap: clamp(14px, 1.5vw, 22px);
}
.kangpin-site .kp-product-categories .kp-energy-card,
.kangpin-site .kp-product-categories .kp-energy-card:not(:hover):not(:focus-within),
.kangpin-site .kp-product-categories .kp-energy-card:hover,
.kangpin-site .kp-product-categories .kp-energy-card:focus-within {
flex: 1 1 0;
flex-basis: 0;
max-width: none;
height: clamp(430px, 37vw, 540px);
aspect-ratio: auto;
transition: flex-grow 680ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 420ms ease;
will-change: flex-grow, transform;
}
.kangpin-site .kp-product-categories:has(.kp-energy-card:hover) .kp-energy-card,
.kangpin-site .kp-product-categories:has(.kp-energy-card:focus-visible) .kp-energy-card {
flex-grow: 0.68;
}
.kangpin-site .kp-product-categories:has(.kp-energy-card:hover) .kp-energy-card:hover,
.kangpin-site .kp-product-categories:has(.kp-energy-card:focus-visible) .kp-energy-card:focus-visible {
flex-grow: 1.42;
transform: translateY(-6px);
}
.kangpin-site .kp-product-categories .kp-energy-caption {
transition: opacity 420ms ease 80ms, transform 520ms cubic-bezier(0.22, 1, 0.36, 1) 40ms;
}
}
/* Reference-style customer service. */
.kangpin-site .kp-customer-service,
.kangpin-site .kp-service-section.kp-customer-service {
min-height: 100svh;
padding: clamp(38px, 3.6vw, 54px) 0 clamp(24px, 2.4vw, 36px);
background-color: #f3f6fa !important;
background-image: linear-gradient(180deg, #ffffff 0%, #f3f6fa 8%, #f3f6fa 92%, #ffffff 100%) !important;
}
.kangpin-site .kp-customer-service .sec-title {
margin-bottom: clamp(16px, 1.6vw, 24px);
}
.kangpin-site .kp-customer-service .kp-service-heading h2 {
font-size: clamp(54px, 5vw, 76px);
line-height: 0.96;
}
.kangpin-site .kp-customer-service-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(20px, 2.2vw, 34px);
}
.kangpin-site .kp-customer-service .kp-customer-card {
min-height: clamp(350px, 27.5vw, 400px);
padding: clamp(22px, 1.9vw, 28px) clamp(22px, 1.9vw, 30px) clamp(22px, 2vw, 30px);
overflow: visible;
border: 0;
border-radius: 68px 0 72px 0;
background: #ffffff !important;
box-shadow: 0 18px 48px rgba(0, 91, 164, 0.055);
}
.kangpin-site .kp-customer-service .kp-customer-card::after {
display: block;
right: clamp(-42px, -2.4vw, -22px);
top: 44%;
width: 44px;
height: 44px;
border: solid rgba(0, 91, 164, 0.1);
border-width: 3px 3px 0 0;
transform: translateY(-50%) rotate(45deg);
}
.kangpin-site .kp-customer-service .kp-customer-card:last-child::after {
display: none;
}
.kangpin-site .kp-customer-service .kp-service-index {
top: clamp(22px, 2vw, 30px);
right: clamp(22px, 2vw, 32px);
color: #eef3f9;
font-size: clamp(60px, 4.8vw, 82px);
}
.kangpin-site .kp-customer-service .kp-service-card-head {
gap: 14px;
margin-bottom: 14px;
}
.kangpin-site .kp-customer-service .kp-service-hex {
flex-basis: 58px;
width: 58px;
height: 66px;
color: #005b9d;
font-size: 25px;
background: #edf5ff;
}
.kangpin-site .kp-customer-service .kp-service-hex::after {
display: block;
bottom: -28px;
width: 3px;
height: 28px;
background: #dce9f6;
}
.kangpin-site .kp-customer-service .kp-service-card-head h3,
html[lang="en"] .kangpin-site .kp-customer-service .kp-service-card-head h3 {
max-width: none;
font-size: clamp(20px, 1.4vw, 25px);
}
html[lang="en"] .kangpin-site .kp-customer-service .kp-service-card-head h3 {
font-size: clamp(18px, 1.3vw, 23px);
}
.kangpin-site .kp-customer-service .kp-service-timeline {
gap: clamp(11px, 1vw, 15px);
padding-left: 92px;
}
.kangpin-site .kp-customer-service .kp-service-timeline::before {
display: block;
left: 36px;
top: -2px;
bottom: 6px;
width: 3px;
background: #dce9f6;
}
.kangpin-site .kp-customer-service .kp-service-item,
.kangpin-site .kp-customer-service .kp-service-item:first-child {
padding-top: 0;
border-top: 0;
}
.kangpin-site .kp-customer-service .kp-service-item::before {
display: block;
left: -62px;
top: 10px;
width: 11px;
height: 11px;
border-radius: 50%;
background: #f05a19;
box-shadow: 0 0 0 5px #ffffff;
}
.kangpin-site .kp-customer-service .kp-service-item h4 {
min-height: 30px;
padding: 0 19px;
margin: 0 0 6px;
border-radius: 999px;
background: #edf5fb;
font-size: clamp(15px, 0.95vw, 18px);
line-height: 30px;
}
.kangpin-site .kp-customer-service .kp-service-item p,
html[lang="en"] .kangpin-site .kp-customer-service .kp-service-item p {
max-width: 290px;
font-size: clamp(12px, 0.84vw, 14px);
line-height: 1.5;
font-weight: 700;
}
.kangpin-site .kp-customer-service .kp-service-promise {
grid-template-columns: 0.42fr 2.4fr;
gap: clamp(20px, 2vw, 36px);
width: min(1080px, 100%);
margin-top: clamp(12px, 1.2vw, 18px);
padding: clamp(15px, 1.5vw, 20px) clamp(24px, 2.6vw, 38px);
border: 0;
border-radius: 58px 0 62px 0;
background: #ffffff !important;
box-shadow: 0 18px 48px rgba(0, 91, 164, 0.055);
}
.kangpin-site .kp-customer-service .kp-service-promise h3 {
font-size: clamp(20px, 1.45vw, 27px);
}
.kangpin-site .kp-customer-service .kp-service-promise-list {
grid-template-columns: 1.25fr 0.85fr 0.85fr;
gap: clamp(18px, 2vw, 30px);
}
.kangpin-site .kp-customer-service .kp-service-promise-list div {
grid-template-columns: 32px minmax(0, 1fr);
column-gap: 10px;
}
.kangpin-site .kp-customer-service .kp-service-promise-list i {
font-size: 28px;
}
.kangpin-site .kp-customer-service .kp-service-promise-list strong {
margin-bottom: 4px;
font-size: 14px;
}
.kangpin-site .kp-customer-service .kp-service-promise-list span {
font-size: 12px;
line-height: 1.42;
}
@media only screen and (max-width: 767px) {
.kangpin-site .kp-product-categories .kp-energy-card {
height: min(430px, calc(100vw - 30px));
aspect-ratio: 1 / 1;
}
.kangpin-site .kp-product-categories .kp-energy-card::after {
opacity: 1;
}
.kangpin-site .kp-product-categories .kp-energy-caption {
opacity: 1;
transform: translateY(0);
}
.kangpin-site .kp-customer-service,
.kangpin-site .kp-service-section.kp-customer-service {
min-height: auto;
padding: 58px 0;
}
.kangpin-site .kp-customer-service .kp-service-heading h2 {
font-size: 44px;
}
.kangpin-site .kp-customer-service .kp-customer-card {
min-height: 0;
padding: 28px 22px 32px;
border-radius: 44px 0 48px 0;
}
.kangpin-site .kp-customer-service .kp-customer-card::after {
display: none;
}
.kangpin-site .kp-customer-service .kp-service-hex {
flex-basis: 58px;
width: 58px;
height: 66px;
font-size: 25px;
}
.kangpin-site .kp-customer-service .kp-service-timeline {
padding-left: 72px;
}
.kangpin-site .kp-customer-service .kp-service-timeline::before {
left: 28px;
}
.kangpin-site .kp-customer-service .kp-service-item::before {
left: -49px;
}
.kangpin-site .kp-customer-service .kp-service-promise {
grid-template-columns: 1fr;
padding: 24px;
border-radius: 44px 0 48px 0;
}
.kangpin-site .kp-customer-service .kp-service-promise-list {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.kangpin-site .kp-product-categories .kp-energy-card,
.kangpin-site .kp-product-categories .kp-energy-caption {
transition: none;
}
}
/*# sourceMappingURL=style.css.map */