:root {
--primary: #ee791f;
--primary-dark: #ee791f;
--ink: #171717;
--paper: #ffffff;
--muted: #656565;
--heading-font: "Manrope", sans-serif;
--body-font: "DM Sans", sans-serif;
}

 *{
  box-sizing: border-box;
  }
  html {
  scroll-behavior: smooth;
  }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--body-font);
  overflow-x: clip;
  }
img,
video,
svg {
  max-width: 100%;
}
  a {
  color: inherit;
  text-decoration: none;
  }

html.dvs-skip-home-loader #dvsLoader{display:none!important}

.dvs-loader {
position: fixed;
inset: 0;
z-index: 2000;
background: #000000;
overflow: hidden;
pointer-events: none;
will-change: clip-path, transform;
}

.dvs-loader .preloader-counter {
position: absolute;
top: 50%;
left: 2rem;
width: calc(100% - 4rem);
transform: translateY(-50%);
z-index: 4;
}

.dvs-loader .preloader-counter h1 {
margin: 0;
font-size: clamp(5rem, 18vw, 33rem);
line-height: 0.8;
font-weight: 500;
letter-spacing: -0.06em;
color: #ffffff;
}

.dvs-loader .counter-line {
position: absolute;
left: 0;
top: calc(100% + 1.8rem);
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.25);
overflow: hidden;
transform-origin: left center;
}

.dvs-loader .counter-line-progress {
position: absolute;
inset: 0 auto 0 0;
width: 100%;
height: 100%;
background: #ffffff;
transform-origin: left center;
transform: scaleX(0);
will-change: transform;
}

.dvs-loader .preloader-tagline {
position: absolute;
left: 0;
top: calc(100% + 2.8rem);
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
gap: clamp(0.9rem, 2vw, 2.2rem);
margin-top: 0;
z-index: 10;
}



.dvs-loader .loader-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
will-change: clip-path, transform;
}

/* .dvs-loader .loader-hero-bg img {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
transform: translate(-50%, -50%) scale(2);
filter:none;
} */
/* filter: brightness(0.7) saturate(1.05); */

.dvs-loader .loader-hero-bg img{
position:absolute;
top:50%;
left:50%;
width:100%;
height:100%;
object-fit:cover;
transform:translate(-50%,-50%) scale(2);
filter:none;
}

.dvs-loader .preloader-tagline p{
margin:0;
color:rgba(255,255,255,0.96);
font-size:clamp(1.72rem,2.4vw,3.35rem);
letter-spacing:0.12em;
text-transform:uppercase;
white-space:nowrap;
font-weight:500;
}
.dvs-loader .loader-tagline p{
margin:0;
color:rgba(255,255,255,0.96);
font-size:clamp(5.72rem, 7vw,10.35rem);
letter-spacing:0.12em;
text-transform:uppercase;
white-space:nowrap;
font-weight:500;
}

.dvs-loader .loader-header {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 clamp(1rem, 2vw, 2rem);
z-index: 5;
visibility: hidden;
opacity: 0;
}

.dvs-loader .loader-header h1 {
margin: 0;
font-size: clamp(3rem, 11vw, 11rem);
line-height: 0.85;
letter-spacing: -0.05em;
white-space: nowrap;
color: #ffffff;
font-weight: 500;
}

.dvs-loader .loader-tagline {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(0.8rem, 2.5vw, 3rem);
margin-top: 0.8rem;
flex-wrap: wrap;
white-space: nowrap;
}

.dvs-loader .tag-char {
display: inline-block;
position: relative;
opacity: 0;
will-change: opacity;
}

.dvs-loader .char,
.dvs-loader .digit,
.dvs-loader .word {
position: relative;
will-change: transform;
}

.dvs-loader .loader-header h1 .char {
transform: translateX(100%);
}

@media (max-width: 600px) {
.dvs-loader .preloader-counter {
left: 1rem;
width: calc(100% - 2rem);
}

.dvs-loader .preloader-counter h1 {
font-size: clamp(5rem, 27vw, 9rem);
}

.dvs-loader .counter-line {
top: calc(100% + 1.2rem);
}

.dvs-loader .preloader-tagline {
top: calc(100% + 2.2rem);
gap: clamp(0.6rem, 2.7vw, 1.2rem);
}

}

@media (max-width: 400px) {
.dvs-loader .preloader-counter {
left: 0.75rem;
width: calc(100% - 1.5rem);
}

.dvs-loader .preloader-counter h1 {
font-size: clamp(4.3rem, 25vw, 6.8rem);
}

.dvs-loader .counter-line {
top: calc(100% + 1rem);
}

.dvs-loader .preloader-tagline {
top: calc(100% + 2rem);
gap: 0.5rem;
}


.dvs-loader .loader-header h1 {
font-size: clamp(2.8rem, 13vw, 4.2rem);
}
}


@media(max-width:600px){
.dvs-loader .preloader-tagline p{
font-size:clamp(0.7rem,2.7vw,0.95rem);
}
}
@media(max-width:400px){
.dvs-loader .preloader-tagline p{
font-size:0.68rem;
}
}

/*=========================================
GLOBAL LAYOUT CONTAINER
\=========================================*/

.dvs-layout-container {
width: 100%;

max-width: 1440px;

margin: 0 auto;

padding-inline: 60px;
}

/*=========================================
DESKTOP
\=========================================*/

@media (max-width: 1400px) {
.dvs-layout-container {
padding-inline: 50px;
}
}

/*=========================================
LAPTOP
\=========================================*/

@media (max-width: 1200px) {
.dvs-layout-container {
padding-inline: 40px;
}
}

/*=========================================
TABLET
\=========================================*/

@media (max-width: 992px) {
.dvs-layout-container {
padding-inline: 32px;
}
}

/*=========================================
MOBILE
\=========================================*/

@media (max-width: 768px) {
.dvs-layout-container {
padding-inline: 24px;
}
}

/*=========================================
SMALL MOBILE
\=========================================*/

@media (max-width: 576px) {
.dvs-layout-container {
padding-inline: 18px;
}
}

/*=========================================
EXTRA SMALL
\=========================================*/

@media (max-width: 420px) {
.dvs-layout-container {
padding-inline: 16px;
}
}

/* =========================================
GLOBAL SECTION SPACING
\========================================= */

:root {
--section-space-xl: 120px;
--section-space-lg: 90px;
--section-space-md: 70px;
--section-space-sm: 50px;
}

/*=========================================================
GLOBAL SECTION TYPOGRAPHY
\=========================================================*/

/* ---------- EYEBROW ---------- */

.dvs-section-eyebrow {
display: inline-flex;

align-items: center;

gap: 14px;

margin-bottom: 18px;

font-family: var(--heading-font);

font-size: clamp(0.75rem, 0.7vw, 0.95rem);

font-weight: 700;

letter-spacing: 0.22em;

text-transform: uppercase;

color: #ea6d0e;
}

.dvs-section-eyebrow::before {
content: "";

width: 48px;

height: 2px;

background: #ea6d0e;
}

/* ---------- SECTION TITLE ---------- */
.dvs-section-title {
margin: 0;

font-family: var(--heading-font);

font-size: clamp(2.2rem, 3vw, 3.6rem);

line-height: 1.08;

font-weight: 700;

letter-spacing: -0.04em;

color: #171717;
}

/* ---------- SECTION DESCRIPTION ---------- */

.dvs-section-description {
max-width: 760px;

margin: 26px 0 0;

font-size: clamp(0.95rem, 0.95vw, 1.05rem);

line-height: 1.85;

font-weight: 400;

color: #666d72;
}

/* =========================================================
HOME PAGE BUTTON CONSISTENCY
\========================================================= */

.btn-primary,
.btn-enquire,
.hero-btn,
.services-btn,
.dvs-faq-read-btn,
.dvs-blog-view-btn {
border-radius: 8px;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}


.product-card,
.expertise-card,
.service-image-card,
.review-card,
.dvs-about-content,
.dvs-floating-content,
.stat-item,
.dvs-blog-card {
border-radius: 20px;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}

:root{
--dvs-section-padding:65px;
}
@media(max-width:1200px){
:root{
--dvs-section-padding:55px;
}
}
@media(max-width:768px){
:root{
--dvs-section-padding:45px;
}
}
@media(max-width:480px){
:root{
--dvs-section-padding:40px;
}
}
.explore-products,
.dvs-material-divider,
.dvs-about-section,
.dvs-floating-story,
.expertise-section,
.stats-section,
.services-section,
.testimonial-section,
.dvs-faq-section,
.dvs-blog-section,
.about-industries-section,
.about-client-section{
padding:var(--dvs-section-padding) 0;
}

/* =========================================================
HEADER
\========================================================= */

.site-header {
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1030;
border-bottom: 1px solid transparent;
color: var(--paper);
transition:
background-color 0.3s ease,
box-shadow 0.3s ease,
color 0.3s ease,
border-color 0.3s ease;
}

.site-header.is-scrolled .navbar-brand,
.site-header.is-scrolled .nav-link,
.site-header.is-scrolled .header-call,
.site-header.is-scrolled .navbar-toggler {
color: #ffffff;
}

.site-header.is-scrolled .nav-link::after {
background: #ffffff;
}

.site-header.is-scrolled .header-call i {
color: var(--primary);
}

.navbar {
min-height: 102px;
padding: 0;
}

.brand {
align-items: center;
display: inline-flex;
gap: 0.75rem;
line-height: 1;
transition: transform 0.25s ease;
}
.brand:hover {
transform: translateY(-2px);
}
.brand-mark {
align-items: center;
background: linear-gradient(135deg, #ce8243, var(--primary-dark));
box-shadow: 0 8px 18px rgba(179, 106, 46, 0.28);
color: #fff;
display: inline-flex;
font: 800 0.92rem/1 var(--heading-font);
height: 44px;
justify-content: center;
letter-spacing: -0.08em;
transition:
box-shadow 0.25s ease,
transform 0.25s ease;
width: 44px;
}
.brand:hover .brand-mark {
box-shadow: 0 12px 24px rgba(179, 106, 46, 0.42);
transform: rotate(-4deg);
}
.brand-name {
font: 800 1.05rem/1 var(--heading-font);
letter-spacing: -0.025em;
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.16);
text-transform: uppercase;
}
.brand-name small {
color: #e4a16c;
display: block;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.24em;
margin-top: 0.36rem;
}

.brand-logo {
width: 56px;
height: 56px;
object-fit: contain;
flex-shrink: 0;
}

.brand {
display: flex;
align-items: center;
gap: 14px;
}

.navbar-nav {
gap: 0.55rem;
}
.nav-link {
color: inherit;
font: 700 0.92rem/1 var(--heading-font);
letter-spacing: 0.02em;
padding: 2.5rem 0.75rem !important;
position: relative;
text-transform: uppercase;
}
.nav-link::after {
background: currentColor;
border: 0 !important;
bottom: 1.75rem;
content: "";
height: 2px;
left: 0.75rem;
margin: 0 !important;
position: absolute;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.28s ease;
width: calc(100% - 1.5rem);
}
.nav-link:hover::after,
.nav-link.active::after {
transform: scaleX(1);
transform-origin: left;
}

/* Remove Bootstrap dropdown arrow from About Us */
.nav-link.dropdown-toggle::after{
display:none !important;
}

/* Dropdown Arrow */
.dropdown-mega > .nav-link {
display: flex;
align-items: center;
gap: 8px;
}
.dropdown-mega > .nav-link i {
font-size: 0.7rem;
transition: 0.3s ease;
}
/* Rotate Arrow */
.dropdown-mega:hover > .nav-link i {
transform: rotate(180deg);
}

.nav-product-heading {
display: flex;
align-items: stretch;
}

.product-menu-toggle {
align-items: center;
border: 0;
background: transparent;
color: inherit;
padding: 0;
pointer-events: none;
width: 1.5rem;
}

.product-menu-toggle i {
font-size: 0.7rem;
transition: transform 0.3s ease;
}

.dropdown-mega:hover .product-menu-toggle i {
transform: rotate(180deg);
}

.site-header:not(.is-scrolled) .navbar-brand,
.site-header:not(.is-scrolled) .nav-link,
.site-header:not(.is-scrolled) .header-call {
color: var(--paper);
}

.header-actions {
align-items: center;
display: flex;
gap: 1rem;
margin-left: 1.1rem;
}
.header-call {
align-items: center;
font-size: 0.9rem;
font-weight: 700;
gap: 0.55rem;
}

.header-call:hover {
transform: translateY(-3px);
}

.header-call i {
color: var(--primary);
}

.btn-primary {
display: inline-flex;
justify-content: center;
align-items: center;

padding: 15px 34px;

background: #ea6d0e;
color: #fff;



font-weight: 700;
text-decoration: none;

transition: 0.3s ease;
}

.btn-enquire {
align-items: center;
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
display: inline-flex;
font: 800 0.78rem/1 var(--heading-font);
gap: 0.7rem;
isolation: isolate;
letter-spacing: 0.05em;
overflow: hidden;
padding: 1rem 1.1rem;
position: relative;
text-transform: uppercase;
transition:
box-shadow 0.25s ease,
transform 0.25s ease;
}
.btn-enquire::before {
background: rgba(255, 255, 255, 0.25);
content: "";
height: 180%;
left: -70%;
pointer-events: none;
position: absolute;
top: -40%;
transform: skewX(-24deg);
transition: left 0.55s ease;
width: 38%;
z-index: 0;
}

.btn-enquire:hover {
background: #fff;
color: #111;
transform: translateY(-3px);
}

.btn-enquire:hover::before {
left: 135%;
}
.btn-enquire i {
font-size: 0.7rem;
position: relative;
transition: transform 0.25s ease;
z-index: 1;
}
.btn-enquire:hover i {
transform: translate(2px, -2px);
}
.mega-menu {
border: 0;
}
.mega-intro {
background: #171717;
color: #fff;
padding: 2.5rem;
}
.eyebrow {
color: var(--primary);
font: 700 0.7rem/1 var(--heading-font);
letter-spacing: 0.14em;
margin: 0 0 0.9rem;
text-transform: uppercase;
}
.mega-intro h2,
.product-slide-content h2 {
font: 800 1.7rem/1.15 var(--heading-font);
letter-spacing: -0.04em;
margin: 0;
}
.text-link,
.product-menu-all {
align-items: center;
display: inline-flex;
font: 700 0.73rem/1 var(--heading-font);
gap: 0.55rem;
letter-spacing: 0.08em;
margin-top: 1.6rem;
text-transform: uppercase;
}
.mega-links {
display: grid;
flex: 1;
gap: 2rem;
grid-template-columns: repeat(2, 1fr);
padding: 2.5rem;
}
.mega-links-three {
grid-template-columns: repeat(3, 1fr);
}
.mega-title {
color: var(--primary);
font: 800 0.7rem/1 var(--heading-font);
letter-spacing: 0.1em;
margin: 0 0 1rem;
text-transform: uppercase;
}
.mega-links a,
.product-link-grid a {
display: block;
font-size: 0.9rem;
margin-top: 0.75rem;
}
.mega-links a:hover,
.product-link-grid a:hover {
color: var(--primary);
}

@media (min-width: 1200px) {
.dropdown-mega {
position: static;
}

.mega-menu {
position: fixed;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: min(1080px, calc(100vw - 64px));
display: grid;

background: #fff;
border: none;
border-radius: 0;

margin: 0;
padding: 0;

opacity: 0;
visibility: hidden;
pointer-events: none;

box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

.dropdown-mega:hover .mega-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}



.navbar-toggler {
border: 0;
border-radius: 0;
box-shadow: none !important;
display: none;
height: 42px;
padding: 0.65rem 0.35rem;
width: 42px;
}
.navbar-toggler span {
background: currentColor;
display: block;
height: 2px;
margin: 4px auto;
transition: transform 0.2s ease;
width: 22px;
}

.hero-placeholder {
align-items: end;
background: #2b2927;
color: #fff;
display: flex;
min-height: 84vh;
overflow: hidden;
padding-bottom: 4rem;
position: relative;
}

.hero-placeholder::before {
background: linear-gradient(115deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.12));
content: "";
inset: 0;
position: absolute;
z-index: 1;
}



/* =========================================
HERO MEDIA
\========================================= */

.hero-video-placeholder,
.hero-video {
position: absolute;
inset: 0;

width: 100%;
height: 100%;
transition: opacity 0.5s ease;
object-fit: cover;
object-position: center;
}

/* Temporary image */
.hero-video-placeholder {
z-index: 0;
opacity: 1;
}

/* Video initially hidden */
.hero-video {
z-index: 0;
opacity: 0;
visibility: hidden;
}

.hero-placeholder .container {
position: relative;
z-index: 2;
}
.hero-placeholder p {
font: 600 0.72rem/1 var(--heading-font);
letter-spacing: 0.14em;
margin: 0;
text-transform: uppercase;
}

@media (max-width: 1199.98px) {
.navbar {
min-height: 74px;
}
.navbar-toggler {
display: block;
}
.navbar-collapse {
background: var(--paper);
box-shadow: 0 17px 30px rgba(0, 0, 0, 0.12);
color: var(--ink);
left: 0;
max-height: calc(100vh - 74px);
overflow-y: auto;
padding: 0.75rem 1rem 1.5rem;
position: absolute;
right: 0;
top: 74px;
}

.nav-product-heading {
align-items: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.nav-product-heading .nav-link {
border-bottom: 0;
flex: 1;
}

.product-menu-toggle {
align-items: center;
display: inline-flex;
height: 48px;
justify-content: center;
pointer-events: auto;
width: 48px;
}

.product-menu-toggle i {
font-size: 0.72rem;
transition: transform 0.2s ease;
}

.product-menu-toggle[aria-expanded="true"] i {
transform: rotate(180deg);
}


.site-header .navbar-collapse .nav-link{
color:#171717 !important;
}
.site-header .navbar-collapse .nav-link::after{
background:#171717 !important;
}
.site-header .navbar-collapse .nav-link:hover,
.site-header .navbar-collapse .nav-link.active{
color:#171717 !important;
}
.site-header .navbar-collapse .nav-link:hover::after,
.site-header .navbar-collapse .nav-link.active::after{
background:#171717 !important;
}


.navbar-nav {
align-items: stretch !important;
gap: 0;
}
.nav-link {
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
font-size: 0.82rem;
padding: 1rem 0.2rem !important;
}
.nav-link::after {
bottom: 0.7rem;
left: 0.2rem;
width: calc(100% - 0.4rem);
}
.nav-link.dropdown-toggle::before {
right: 0.5rem;
}
.mega-menu,
.mega-menu.show {
box-shadow: none;
display: none;
min-width: 100%;
position: static;
transform: none;
}

.mega-menu.is-open {
display: block;
}
.mega-intro {
display: none;
}
.mega-links,
.mega-links-three {
gap: 0.9rem;
grid-template-columns: repeat(2, 1fr);
padding: 1rem 0.2rem 0.35rem;
}
.mega-links a {
font-size: 0.78rem;
}
.mobile-enquire {
margin: 1.5rem 0.2rem 0;
width: max-content;
}
}

@media (max-width: 575.98px) {
.brand-name {
font-size: 0.9rem;
}
.header-actions {
margin-left: auto;
}
.mega-links,
.mega-links-three {
grid-template-columns: 1fr;
}
.hero-placeholder {
min-height: 74vh;
}
}

/* ===================================================
HERO SECTION
\=================================================== */

.hero-banner {
position: relative;
height: 100vh;
min-height: 700px;
overflow: hidden;
}

/* Background Video */

.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}

/* Dark Overlay */

.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(0, 0, 0, 0.72) 0%,
rgba(0, 0, 0, 0.45) 45%,
rgba(0, 0, 0, 0.25) 100%
);
z-index: 1;
}

/* Container */

.hero-banner .container {
position: relative;
z-index: 2;
height: 100%;

display: flex;
justify-content: center;
align-items: flex-end;
padding-bottom: clamp(3rem, 8vh, 6.5rem);
}

/* Hero Content */

.hero-content {
width: 100%;
margin: 0 auto;
margin-bottom: 50px;

display: flex;
flex-direction: column;
align-items: center;

text-align: center;

animation: heroFloat 6s ease-in-out infinite;
}

/* Heading */

.hero-title {
margin: 28px 0;
line-height: 1;
}

/* First Line */

.hero-title-main {
display: block;
white-space: nowrap;

color: #fff;
font-family: var(--heading-font);
font-size: clamp(3rem, 4.5vw, 6.7rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -2px;
}

/* Second Line */

.hero-title-sub {
display: block;
margin-top: 12px;

color: #fff;
opacity: 0.95;

font-family: var(--heading-font);
font-size: clamp(2.8rem, 4vw, 4rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -1px;
}

/* Paragraph */

.hero-subtitle {
max-width: 650px;
margin: 0 auto;

color: rgba(255, 255, 255, 0.9);

font-size: 1.1rem;
line-height: 1.8;
}

/* Button */

/* .hero-btn {
align-items: center;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 50px;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
display: inline-flex;
font: 800 0.78rem/1 var(--heading-font);
gap: 0.7rem;
isolation: isolate;
letter-spacing: 0.05em;
overflow: hidden;
padding: 1rem 1.1rem;
position: relative;
text-transform: uppercase;
transition:
box-shadow 0.25s ease,
transform 0.25s ease;
background-color: var(--primary);
color: white;
} */
/*
.hero-btn:hover {
background: #fff;
color: #111;
transform: translateY(-3px);
} */

/* Entrance Animation */

.hero-title,
.hero-subtitle {
opacity: 0;
transform: translateY(40px);
}

.hero-title {
animation: heroFade 0.8s ease forwards;
}

.hero-subtitle {
animation: heroFade 0.8s ease 0.25s forwards;
}

.hero-btn {
animation: heroFade 0.8s ease 0.45s forwards;
}

@keyframes heroFade {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* Floating */

@keyframes heroFloat {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
100% {
transform: translateY(0);
}
}

/* ==========================
Tablet
\========================== */

@media (max-width: 991px) {
.hero-banner {
min-height: 650px;
}

.hero-title-main {
font-size: 3.4rem;
white-space: normal;
}

.hero-title-sub {
font-size: 2.5rem;
}

.hero-subtitle {
max-width: 520px;
}
}

/* ==========================
Mobile
\========================== */

@media (max-width: 768px) {
.hero-banner {
min-height: 100vh;
}

.hero-banner .container {
align-items: flex-end;
padding-bottom: 45px;
}

.hero-title-main {
font-size: 2.8rem;
white-space: normal;
}

.hero-title-sub {
font-size: 2rem;
}

.hero-subtitle {
font-size: 1rem;
line-height: 1.7;
}

.hero-btn {
padding: 14px 28px;
}
}

/* HEADER DEFAULT - TRANSPARENT */
.site-header {
background: transparent !important;
border-bottom: 1px solid transparent;
box-shadow: none;
transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* HEADER TRANSITION */

.site-header.is-scrolled {
background: linear-gradient(
90deg,
rgba(0, 0, 0, 0.75),
rgba(0, 0, 0, 0.55)
) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25) !important;
color: #ffffff !important;
}

.site-header.is-scrolled .navbar-brand,
.site-header.is-scrolled .brand-name,
.site-header.is-scrolled .brand-name small,
.site-header.is-scrolled .nav-link,
.site-header.is-scrolled .header-call,
.site-header.is-scrolled .navbar-toggler {
color: #ffffff !important;
}

.site-header.is-scrolled .nav-link::after {
background: #ffffff !important;
}

/* The expanded mobile panel is always light, including on non-home pages. */
@media (max-width: 1199.98px) {
.site-header.is-scrolled .navbar-collapse .nav-link,
.site-header.is-scrolled .navbar-collapse .product-menu-toggle {
color: #171717 !important;
}
.site-header.is-scrolled .navbar-collapse .nav-link::after {
background: #171717 !important;
}
.navbar-toggler {
align-items: center;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none !important;
display: inline-flex;
flex-direction: column;
gap: 5px;
height: 42px;
justify-content: center;
padding: 0;
width: 42px;
}
.navbar-toggler span {
background: currentColor;
display: block;
flex: 0 0 auto;
height: 2px;
margin: 0;
transition: transform 0.2s ease;
width: 24px;
}
}


/*=========================================
EXPLORE PRODUCTS
\=========================================*/

.explore-products {
background: #f7f7f7;
position: relative;
overflow: hidden;
}

.explore-header {
max-width: 760px;
margin: 0 auto 15px;
text-align: center;
position: relative;
z-index: 1000;
}

/*========================
SEARCH
\========================*/

.product-search {
width: min(560px, 92%);
height: 62px;
position: relative;
margin: 42px auto 0;
display: flex;
align-items: center;
padding: 0 26px;
background: #fff;
border-radius: 50px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
transition: 0.35s;
}

.product-search:focus-within {
transform: translateY(-3px);
box-shadow: 0 20px 45px rgba(179, 106, 46, 0.18);
}

.product-search i {
margin-right: 18px;
font-size: 1rem;
color: var(--primary);
}

.product-search input {
flex: 1;
border: none;
outline: none;
background: none;
font: 400 1rem var(--body-font);
}

.product-search input::placeholder {
color: #999;
}

.search-suggestions {
position: absolute;

top: 70px;
left: 0;
right: 0;

background: rgba(255, 255, 255, 0.75);

border: 1px solid rgba(0, 0, 0, 0.06);

border-radius: 18px;

overflow: hidden;

box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);

opacity: 0;
visibility: hidden;

transform: translateY(8px);

transition: 0.3s;

z-index: 9999;
}

.search-suggestions.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.search-item {
padding: 16px 24px;

cursor: pointer;

transition: 0.25s;

border-bottom: 1px solid #eee;
}

.search-item:last-child {
border-bottom: none;
}

.search-item:hover {
background: #f7f7f7;

color: var(--primary);
}

/*========================
SWIPER
\========================*/

.productSwiper {
padding: 40px 0 80px;
overflow: visible;
z-index: 1;
}

.productSwiper .swiper-wrapper {
align-items: center;
overflow: visible;
height: 500px;
}

.productSwiper .swiper-slide {
width: 360px;
height: auto;
display: flex;
align-items: stretch;
}

.productSwiper .swiper-slide-shadow-left,
.productSwiper .swiper-slide-shadow-right {
display: none;
}

.productSwiper .swiper-pagination {
bottom: 0 !important;
}

.productSwiper .swiper-pagination-bullet {
width: 10px;
height: 10px;
background: #bbb;
opacity: 1;
transition: 0.3s;
}

.productSwiper .swiper-pagination-bullet-active {
background: var(--primary);
width: 28px;
border-radius: 30px;
}

/*========================
CARD
\========================*/

.product-card {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: #fff;
border-radius: 22px;
overflow: hidden;
text-decoration: none;
border: 2px solid transparent;
border-radius: 28px;

box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
transition: 0.45s;
}

.product-card:hover {
transform: translateY(-12px);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18);
}

.swiper-slide-active .product-card {
border-color: var(--primary);
transform: translateY(-8px) scale(1.02);
box-shadow: 0 30px 70px rgba(179, 106, 46, 0.25);
}

.swiper-slide-active .product-info h3 {
color: var(--primary);
}

/*========================
IMAGE
\========================*/

.product-img {
height: 260px;
background: #ececec;
overflow: hidden;
}

.product-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: 0.5s;
}

.product-card:hover img,
.swiper-slide-active img {
transform: scale(1.08);
}

/*========================
TEXT
\========================*/

.product-info {
padding: 24px;
}

.product-info h3 {
margin: 0;
font: 800 1.15rem var(--heading-font);
color: #171717;
transition: 0.35s;
}

.product-info {
flex: 1;
padding: 24px;
display: flex;
flex-direction: column;
}

/*=========================================
PRODUCT NAVIGATION
\=========================================*/

.product-controls {
position: relative;
width: 100%;

margin-top: 40px;

padding-bottom: 50px;

height: 60px;
}

.product-prev,
.product-next {
position: absolute;

top: 5%;
transform: translateY(-50%);

width: 56px;
height: 56px;

border-radius: 50%;

background: #fff;

border: 1px solid #e5e5e5;

display: flex;

align-items: center;
justify-content: center;

cursor: pointer;

color: #222;

font-size: 18px;

transition: 0.35s;

box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.product-prev {
left: calc(50% - 70px);
}

.product-next {
left: calc(50% + 14px);
}

.product-prev:hover,
.product-next:hover {
background: var(--primary);

color: #fff;

border-color: var(--primary);

transform: translateY(-50%) scale(1.05);
}

.product-prev.swiper-button-disabled,
.product-next.swiper-button-disabled {
opacity: 0.45;

cursor: not-allowed;
}

.product-pagination {
display: flex;

justify-content: center;

align-items: center;

gap: 8px;
}

.product-pagination .swiper-pagination-bullet {
width: 8px;
height: 8px;

margin: 0 !important;

background: #d8d8d8;

opacity: 1;

border-radius: 50%;

transition: 0.35s;
}

.product-pagination .swiper-pagination-bullet-active {
width: 30px;

border-radius: 30px;

background: var(--primary);
}
/*========================
RESPONSIVE
\========================*/

@media (max-width: 1200px) {
.productSwiper .swiper-slide {
width: 260px;
}

.product-img {
height: 200px;
}

.product-prev {
left: 8%;
}

.product-next {
left: auto;
right: 8%;
}
}
/*=========================================
RESPONSIVE NAVIGATION
\=========================================*/

@media (max-width: 992px) {
.product-controls {
margin-top: 35px;
padding-bottom: 40px;
height: 56px;
}

.product-prev,
.product-next {
width: 52px;
height: 52px;
font-size: 17px;
}

.product-prev {
left: calc(50% - 64px);
}

.product-next {
left: calc(50% + 12px);
}
}

@media (max-width: 768px) {
.product-controls {
margin-top: 25px;
padding-bottom: 30px;
height: 50px;
}

.product-prev,
.product-next {
width: 46px;
height: 46px;
font-size: 15px;
}

.product-prev {
left: calc(50% - 56px);
}

.product-next {
left: calc(50% + 10px);
}
}

@media (max-width: 576px) {
.product-controls {
margin-top: 20px;
padding-bottom: 25px;
height: 46px;
}

.product-prev,
.product-next {
width: 42px;
height: 42px;
font-size: 14px;
}

.product-prev {
left: calc(50% - 50px);
}

.product-next {
left: calc(50% + 8px);
}

.product-pagination .swiper-pagination-bullet {
width: 7px;
height: 7px;
}

.product-pagination .swiper-pagination-bullet-active {
width: 24px;
}
}

@media (max-width: 420px) {
.product-controls {
margin-top: 15px;
padding-bottom: 20px;
height: 42px;
}

.product-prev,
.product-next {
width: 38px;
height: 38px;
font-size: 13px;
}

.product-prev {
left: calc(50% - 46px);
}

.product-next {
left: calc(50% + 8px);
}

.product-pagination {
gap: 6px;
}

.product-pagination .swiper-pagination-bullet {
width: 6px;
height: 6px;
}

.product-pagination .swiper-pagination-bullet-active {
width: 20px;
}
}

/*=========================================
INDUSTRIAL EXPERTISE
\=========================================*/

.expertise-section {
background: #fff;
position: relative;
overflow: hidden;
}

.expertise-heading {
max-width: 760px;
margin: 0 auto 75px;
text-align: center;
}

.expertise-grid {
display: grid;
grid-template-columns: repeat(3, minmax(340px, 360px));
justify-content: center;
gap: 26px;
align-items: stretch;
}

.expertise-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 24px;
overflow: hidden;
text-decoration: none;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 16px 45px rgba(0, 0, 0, 0.08);
transition:
transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.45s,
border-color 0.35s;
position: relative;
height: 100%;
color: inherit;
}

.expertise-card:hover {
transform: translateY(-10px);
border-color: var(--primary);
box-shadow: 0 28px 65px rgba(179, 106, 46, 0.18);
}

.expertise-card::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 4px;
background: var(--primary);
transform: scaleX(0);
transform-origin: left;
transition: 0.4s;
}

.expertise-card:hover::after {
transform: scaleX(1);
}

/*=========================================
PREMIUM CARD
\=========================================*/

.expertise-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 24px;
overflow: hidden;
text-decoration: none;
position: relative;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
transition:
transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.45s,
border-color 0.35s;
height: 100%;
color: inherit;
}

.expertise-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 5px;
background: var(--primary);
transform: scaleX(0);
transform-origin: left;
transition: 0.4s;
z-index: 5;
}

.expertise-card:hover::before {
transform: scaleX(1);
}

.expertise-card:hover {
transform: translateY(-12px);
border-color: rgba(234, 109, 14, 0.25);
box-shadow: 0 28px 70px rgba(234, 109, 14, 0.18);
}

/*=========================================
IMAGE
\=========================================*/

.expertise-image {
position: relative;
height: 210px;
overflow: hidden;
background: #ececec;
}

.expertise-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.8s ease;
}

.expertise-card:hover img {
transform: scale(1.08);
}

.expertise-image::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 120px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent);
opacity: 0.65;
transition: 0.4s;
}

.expertise-card:hover .expertise-image::after {
opacity: 0.9;
}

/*=========================================
FLOATING ICON
\=========================================*/
.expertise-icon {
position: absolute;
left: 18px;
top: 182px;
width: 50px;
height: 50px;
border-radius: 14px;
font-size: 1.1rem;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
z-index: 10;
transition: 0.4s;
}

.expertise-card:hover .expertise-icon {
background: var(--primary);
color: #fff;
transform: translateY(-6px) rotate(-8deg);
}

/*=========================================
CONTENT
\=========================================*/

.expertise-content {
flex: 1;
display: flex;
flex-direction: column;
padding: 40px 18px 18px;
background: #fff;
}

.expertise-content h3 {
margin: 0 0 10px;
font: 800 1.18rem/1.25 var(--heading-font);
letter-spacing: -0.5px;
color: #171717;
transition: 0.35s;
}

.expertise-card:hover h3 {
color: var(--primary);
}

.expertise-content p {
margin: 0;
color: #666;
font-size: 0.9rem;
line-height: 1.7;
flex: 1;
}

/*=========================================
LINK
\=========================================*/

.expertise-link {
display: inline-flex;
align-items: center;
gap: 10px;
font: 700 0.82rem var(--heading-font);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--primary);
margin-top: 16px;
transition: 0.35s;
}

.expertise-link i {
transition: 0.35s;
}

.expertise-card:hover .expertise-link {
letter-spacing: 0.12em;
}

.expertise-card:hover .expertise-link i {
transform: translateX(8px);
}

/*=========================================
RESPONSIVE
\=========================================*/

@media (max-width: 1400px) {
.expertise-grid {
gap: 28px;
}

.expertise-image {
height: 210px;
}

.expertise-icon {
top: 175px;
left: 22px;
width: 56px;
height: 56px;
font-size: 1.2rem;
}
}

@media (max-width: 1200px) {
.expertise-heading {
margin-bottom: 65px;
}

.expertise-grid {
grid-template-columns: repeat(3, minmax(0, 290px));
justify-content: center;
gap: 22px;
}

.expertise-image {
height: 190px;
}
.expertise-icon {
top: 165px;
}

.expertise-content {
padding: 42px 20px 20px;
}

.expertise-content h3 {
font-size: 1.28rem;
margin-bottom: 14px;
}

.expertise-content p {
font-size: 0.95rem;
line-height: 1.8;
}

.expertise-link {
margin-top: 22px;
font-size: 0.78rem;
}
}

@media (max-width: 992px) {
.expertise-heading {
margin-bottom: 55px;
}

.expertise-grid {
grid-template-columns: repeat(2, minmax(0, 280px));
justify-content: center;
gap: 22px;
}

.expertise-image {
height: 180px;
}

.expertise-icon {
width: 50px;
height: 50px;
font-size: 1rem;
top: 150px;
left: 18px;
}

.expertise-content {
padding: 38px 18px 18px;
}

.expertise-content h3 {
font-size: 1.2rem;
}

.expertise-content p {
font-size: 0.93rem;
line-height: 1.75;
}

.expertise-link {
margin-top: 20px;
font-size: 0.76rem;
}
}
@media (max-width: 768px) {
.expertise-heading {
margin-bottom: 45px;
}

.expertise-grid {
grid-template-columns: 1fr;
gap: 24px;
justify-content: center;
}

.expertise-card {
max-width: 300px;
width: 100%;
margin: 0 auto;
}

.expertise-image {
height: 185px;
}

.expertise-icon {
width: 48px;
height: 48px;
font-size: 1rem;
top: 155px;
left: 18px;
border-radius: 14px;
}

.expertise-content {
padding: 38px 18px 18px;
}

.expertise-content h3 {
font-size: 1.12rem;
margin-bottom: 12px;
}

.expertise-content p {
font-size: 0.91rem;
line-height: 1.75;
}

.expertise-link {
margin-top: 16px;
font-size: 0.74rem;
gap: 8px;
}
}

@media (max-width: 576px) {
.expertise-heading {
margin-bottom: 40px;
}

.expertise-grid {
gap: 20px;
}

.expertise-card {
max-width: 280px;
width: 100%;
border-radius: 20px;
}

.expertise-image {
height: 170px;
}

.expertise-icon {
width: 46px;
height: 46px;
font-size: 0.95rem;
border-radius: 14px;
top: 142px;
left: 16px;
}

.expertise-content {
padding: 34px 16px 16px;
}

.expertise-content h3 {
font-size: 1.02rem;
margin-bottom: 10px;
}

.expertise-content p {
font-size: 0.88rem;
line-height: 1.7;
}

.expertise-link {
margin-top: 14px;
font-size: 0.72rem;
gap: 8px;
}
}

@media (max-width: 420px) {
.expertise-card {
max-width: 260px;
}

.expertise-image {
height: 160px;
}

.expertise-icon {
top: 132px;
left: 14px;
width: 42px;
height: 42px;
font-size: 0.88rem;
border-radius: 12px;
}

.expertise-content {
padding: 30px 14px 14px;
}

.expertise-content h3 {
font-size: 0.95rem;
margin-bottom: 10px;
}

.expertise-content p {
font-size: 0.84rem;
line-height: 1.65;
}

.expertise-link {
font-size: 0.7rem;
}
}

/*=========================================
EXTRA SERVICES
\=========================================*/

.services-left .dvs-section-title {
max-width: 520px;
margin-bottom: 22px;
}

.services-left .dvs-section-description {
max-width: 560px;
margin-bottom: 34px;
}

.services-section {
background: #fff;
overflow: hidden;
}

.services-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 45px;
}

.services-left {
flex: 0 0 44%;
max-width: 620px;
}

.services-features {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 18px;
}

.services-features li {
position: relative;
padding-left: 34px;
font-size: 1rem;
font-weight: 500;
line-height: 1.6;
color: #333;
}

.services-features li::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--primary);
box-shadow: 0 0 0 6px rgba(234, 109, 14, 0.15);
}

.services-btn {
align-items: center;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 50px;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
display: inline-flex;
font: 800 0.78rem/1 var(--heading-font);
gap: 0.7rem;
isolation: isolate;
letter-spacing: 0.05em;
overflow: hidden;
padding: 1rem 1.1rem;
position: relative;
text-transform: uppercase;
transition:
box-shadow 0.25s ease,
transform 0.25s ease;
background-color: var(--primary);
color: white;
margin-top: 20px;
}

.services-btn:hover {
background: white;
transform: translateY(-4px);
color: black;
border: 2px solid black;
}

.services-btn i {
transition: 0.35s;
}

.services-btn:hover i {
transform: translateX(5px);
}

/*=========================================
RIGHT GRID
\=========================================*/

.services-right {
flex: 0 0 52%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}

.service-image-card {
position: relative;
overflow: hidden;

height: 275px;
border-radius: 28px;

box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
cursor: pointer;
}

.service-image-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.7s ease;
}

.service-image-card::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.45),
rgba(0, 0, 0, 0.12),
transparent
);
opacity: 0.55;
transition: 0.35s;
z-index: 1;
}

.service-image-card:hover::before {
opacity: 0.85;
}

.service-image-card:hover img {
transform: scale(1.08);
}

.image-label {
position: absolute;
left: 50%;
bottom: 22px;
transform: translateX(-50%);
padding: 11px 24px;
border: 1.5px solid rgba(255, 255, 255, 0.85);
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(10px);
color: #fff;
font-size: 1rem;
font-weight: 600;
border-radius: 12px;
white-space: nowrap;
z-index: 2;
transition: 0.35s;
}

.service-image-card:hover .image-label {
background: rgba(255, 255, 255, 0.16);
bottom: 28px;
}

/*=========================================
RESPONSIVE
\=========================================*/

@media (max-width: 1400px) {
.services-wrapper {
gap: 55px;
}

.service-image-card {
height: 235px;
}
}

@media (max-width: 1200px) {
.services-wrapper {
gap: 45px;
}

.services-left {
flex: 0 0 40%;
}

.services-right {
flex: 0 0 56%;
gap: 18px;
}

.service-image-card {
height: 210px;
}
}

@media (max-width: 992px) {
.services-wrapper {
flex-direction: column;
}

.services-left {
width: 100%;
max-width: 700px;
text-align: center;
}

.services-left .dvs-section-description {
margin-left: auto;
margin-right: auto;
}

.services-features {
max-width: 520px;
margin: auto;
text-align: left;
}

.services-btn {
margin-top: 35px;
}

.services-right {
width: 100%;
grid-template-columns: repeat(2, 1fr);
}

.service-image-card {
height: 240px;
}
}

@media (max-width: 768px) {
.services-right {
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}

.service-image-card {
height: 200px;
}

.image-label {
font-size: 0.92rem;
padding: 10px 18px;
}
}

@media (max-width: 576px) {
.services-right {
grid-template-columns: 1fr;
}

.service-image-card {
height: 240px;
}

.services-features li {
font-size: 0.92rem;
}

.services-btn {
padding: 15px 30px;
font-size: 14px;
}

.image-label {
font-size: 0.9rem;
padding: 9px 16px;
}
}

@media (max-width: 420px) {
.service-image-card {
height: 210px;
}

.image-label {
font-size: 0.84rem;
padding: 8px 14px;
}
}

/*=========================================
TESTIMONIAL SECTION
\=========================================*/

.testimonial-section {
position: relative;
background: #fff;
overflow: hidden;
}

.testimonial-heading {
max-width: 760px;
margin: 0 auto 70px;
text-align: center;
}

.testimonial-heading .dvs-section-title {
margin-bottom: 18px;
}

.testimonial-heading .dvs-section-description {
max-width: 680px;
margin: 0 auto;
}

/*=========================================
SWIPER
\=========================================*/

.testimonialSwiper {
position: relative;

overflow: hidden;

padding-bottom: 90px;
}

.testimonialSwiper .swiper-wrapper {
align-items: stretch;
}

.testimonialSwiper .swiper-slide {
height: auto;

display: flex;
}

/*=========================================
REVIEW CARD
\=========================================*/

.review-card {
width: 100%;
max-width: 450px;
background: #fff;
margin-top: 20px;
border: 1px solid #e9edf3;

border-radius: 28px;

box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
padding: 34px;

display: flex;

flex-direction: column;

transition: 0.4s ease;
}

.review-card:hover {
transform: translateY(-8px);

box-shadow: 0 22px 55px rgba(0, 0, 0, 0.08);
}

/*=========================================
ACTIVE CARD
\=========================================*/

.swiper-slide-active .review-card {
border-color: #4b89c8;

box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
}

/*=========================================
REVIEW CONTENT
\=========================================*/

.review-content {
display: flex;

flex-direction: column;

flex: 1;
}

/*=========================================
CARD SPACING
\=========================================*/

.review-top {
margin-bottom: 28px;
}

.review-stars {
margin-bottom: 24px;
}

.review-text {
flex: 1;
}

.review-date {
margin-top: 28px;
}

/*=========================================
TRANSITIONS
\=========================================*/

.review-card,
.review-card *,
.google-logo {
transition: 0.35s ease;
}

/*=========================================
REVIEW HEADER
\=========================================*/

.review-top {
display: flex;

align-items: flex-start;

justify-content: space-between;

gap: 20px;
}

/*=========================================
REVIEW USER
\=========================================*/

.review-user {
display: flex;

align-items: center;

gap: 16px;

flex: 1;

min-width: 0;
}

/*=========================================
AVATAR
\=========================================*/

.review-user img {
width: 64px;

height: 64px;

border-radius: 50%;

object-fit: cover;

flex-shrink: 0;

border: 2px solid #f3f3f3;

background: #fff;
}

/*=========================================
USER INFORMATION
\=========================================*/

.review-user-info {
flex: 1;

min-width: 0;
}

.review-user-info h3 {
margin: 0;

color: #222;

font-size: 1rem;

font-weight: 700;

line-height: 1.2;
}

.review-user-info span {
display: block;

margin-top: 6px;

color: #777;

font-size: 0.92rem;

font-weight: 500;
}

/*=========================================
GOOGLE LOGO
\=========================================*/

.google-logo {
width: 34px;

height: 34px;

flex-shrink: 0;

object-fit: contain;

margin-top: 4px;
}

.review-card:hover .google-logo {
transform: scale(1.08);
}

/*=========================================
STARS
\=========================================*/

.review-stars {
display: flex;

align-items: center;

gap: 5px;
}

.review-stars i {
color: #fbbc04;

font-size: 18px;
}

/*=========================================
REVIEW TEXT
\=========================================*/

.review-text {
margin: 0;

color: #444;

font-size: 1rem;

line-height: 1.9;

font-weight: 400;
}

/*=========================================
REVIEW DATE
\=========================================*/

.review-date {
display: block;

color: #999;

font-size: 0.88rem;

font-weight: 500;
}

/*=========================================
HOVER EFFECTS
\=========================================*/

.review-card:hover .review-user img {
transform: scale(1.05);
}

.review-card:hover .review-user-info h3 {
color: var(--primary);
}

/*=========================================
TESTIMONIAL NAVIGATION
\=========================================*/

.testimonial-controls {
position: relative;
width: 100%;

margin-top: 30px;

height: 120px;

padding-bottom: 0;
}

/*=========================================
PAGINATION
\=========================================*/

.testimonial-pagination {
position: absolute;

top: 0;
left: 0;

width: 100%;
height: 180px;

display: flex;

align-items: center;
justify-content: center;

gap: 8px;
}

.testimonial-pagination .swiper-pagination-bullet {
width: 8px;
height: 8px;

margin: 0 !important;

border-radius: 50%;

background: #d8d8d8;

opacity: 1;

transition: 0.35s;
}

.testimonial-pagination .swiper-pagination-bullet-active {
width: 30px;

border-radius: 30px;

background: var(--primary);
}

/*=========================================
ARROWS
\=========================================*/

.testimonial-prev,
.testimonial-next {
position: absolute;

top: 70px;

transform: translateY(-50%);

width: 56px;
height: 56px;

border-radius: 50%;

background: #fff;

border: 1px solid #e5e5e5;

display: flex;

align-items: center;
justify-content: center;

cursor: pointer;

color: #222;

font-size: 18px;

transition: 0.35s;

box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.testimonial-prev {
left: calc(50% - 70px);
}

.testimonial-next {
left: calc(50% + 14px);
}

.testimonial-prev:hover,
.testimonial-next:hover {
background: var(--primary);

color: #fff;

border-color: var(--primary);

transform: translateY(-50%) scale(1.05);
}

.testimonial-prev.swiper-button-disabled,
.testimonial-next.swiper-button-disabled {
opacity: 0.45;

cursor: not-allowed;
}

/*=========================================
ACTIVE CARD
\=========================================*/

.swiper-slide-active .review-card {
border-color: var(--primary);

box-shadow: 0 18px 55px rgba(0, 0, 0, 0.1);
}

/*=========================================
SIDE CARDS
\=========================================*/

.swiper-slide-prev .review-card,
.swiper-slide-next .review-card {
opacity: 0.96;
}

@media (max-width: 992px) {
.testimonial-prev,
.testimonial-next {
width: 50px;
height: 50px;
font-size: 16px;
}

.testimonial-prev {
left: calc(50% - 62px);
}

.testimonial-next {
left: calc(50% + 12px);
}
}

@media (max-width: 768px) {
.testimonial-controls {
margin-top: 28px;
padding-bottom: 40px;
height: 54px;
}

.testimonial-prev,
.testimonial-next {
width: 46px;
height: 46px;
font-size: 15px;
}

.testimonial-prev {
left: calc(50% - 56px);
}

.testimonial-next {
left: calc(50% + 10px);
}
}

@media (max-width: 576px) {
.testimonial-controls {
margin-top: 24px;
padding-bottom: 35px;
height: 48px;
}

.testimonial-prev,
.testimonial-next {
width: 42px;
height: 42px;
font-size: 14px;
}

.testimonial-prev {
left: calc(50% - 52px);
}

.testimonial-next {
left: calc(50% + 10px);
}
}

@media (max-width: 420px) {
.testimonial-prev,
.testimonial-next {
width: 40px;
height: 40px;
font-size: 13px;
}

.testimonial-prev {
left: calc(50% - 48px);
}

.testimonial-next {
left: calc(50% + 8px);
}
}

/*=========================================================
FOOTER
=========================================================*/
.footer {
position:relative;
background:#0d0d0d;
color:#fff;
padding:72px 0 0;
overflow:hidden;
}
.footer::before {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:1px;
background:linear-gradient(90deg,transparent,#ea6d0e 20%,#ea6d0e 80%,transparent);
opacity:.7;
}
.footer::after {
content:"";
position:absolute;
right:-180px;
bottom:-220px;
width:520px;
height:520px;
border-radius:50%;
border:1px solid rgba(234,109,14,.08);
box-shadow:0 0 0 80px rgba(234,109,14,.025),0 0 0 160px rgba(234,109,14,.018);
pointer-events:none;
}
.footer-main {
position:relative;
z-index:1;
display:grid;
grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr) minmax(0,1.25fr);
gap:clamp(50px,6vw,100px);
padding-bottom:65px;
}
.footer-brand {
max-width:430px;
}
.footer-logo {
display:inline-flex;
align-items:center;
justify-content:center;
width:238px;
height:170px;
padding:18px;
background:#fff;
border-radius:20px;
margin-bottom:30px;
transition:transform .35s ease,box-shadow .35s ease;
}
.footer-logo:hover {
transform:translateY(-4px);
box-shadow:0 18px 40px rgba(0,0,0,.25);
}
.footer-logo img {
display:block;
width:100%;
height:100%;
object-fit:contain;
}
.footer-description {
max-width:420px;
margin:0;
font-family:var(--body-font);
font-size:16px;
line-height:1.95;
font-weight:400;
color:#bdbdbd;
}
.footer-brand-line {
display:flex;
align-items:center;
gap:14px;
margin-top:28px;
}
.footer-brand-line span {
width:42px;
height:2px;
background:#ea6d0e;
flex:0 0 auto;
}
.footer-brand-line p {
margin:0;
font-family:var(--heading-font);
font-size:9px;
font-weight:700;
letter-spacing:.24em;
text-transform:uppercase;
color:#777;
}
.footer-navigation,
.footer-contact-column {
min-width:0;
}
.footer-heading {
display:flex;
align-items:center;
gap:14px;
margin-bottom:30px;
}
.footer-heading>span {
font-family:var(--heading-font);
font-size:10px;
font-weight:700;
letter-spacing:.18em;
color:#ea6d0e;
}
.footer-heading h3 {
position:relative;
margin:0;
padding-bottom:13px;
font-family:var(--heading-font);
font-size:28px;
line-height:1;
font-weight:700;
letter-spacing:-.04em;
color:#fff;
}
.footer-heading h3::after {
content:"";
position:absolute;
left:0;
bottom:0;
width:48px;
height:2px;
background:#ea6d0e;
}
.footer-links {
list-style:none;
padding:0;
margin:0;
}
.footer-links li {
margin:0;
border-bottom:1px solid rgba(255,255,255,.07);
}
.footer-links li:first-child {
border-top:1px solid rgba(255,255,255,.07);
}
.footer-links a {
display:grid;
grid-template-columns:28px 1fr 18px;
align-items:center;
gap:10px;
min-height:52px;
text-decoration:none;
color:#c8c8c8;
font-family:var(--body-font);
font-size:15px;
font-weight:500;
transition:color .3s ease,padding-left .3s ease;
}
.footer-links a>span {
font-family:var(--heading-font);
font-size:9px;
font-weight:700;
letter-spacing:.08em;
color:#ea6d0e;
}
.footer-links a i {
font-size:9px;
color:#666;
opacity:0;
transform:translate(-5px,5px);
transition:opacity .3s ease,transform .3s ease,color .3s ease;
}
.footer-links a:hover {
padding-left:7px;
color:#fff;
}
.footer-links a:hover i {
opacity:1;
transform:translate(0,0);
color:#ea6d0e;
}
.footer-contact-list {
display:flex;
flex-direction:column;
gap:24px;
}
.footer-contact-item {
display:grid;
grid-template-columns:34px minmax(0,1fr);
gap:15px;
align-items:start;
}
.footer-contact-icon {
display:flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border:1px solid rgba(234,109,14,.28);
border-radius:50%;
color:#ea6d0e;
font-size:13px;
transition:background .3s ease,color .3s ease,transform .3s ease;
}
.footer-contact-item:hover .footer-contact-icon {
background:#ea6d0e;
color:#fff;
transform:translateY(-2px);
}
.footer-contact-content {
min-width:0;
}
.footer-contact-label {
display:block;
margin-bottom:5px;
font-family:var(--heading-font);
font-size:9px;
font-weight:700;
letter-spacing:.2em;
text-transform:uppercase;
color:#777;
}
.footer-contact-content strong {
display:block;
font-family:var(--heading-font);
font-size:16px;
font-weight:700;
line-height:1.45;
color:#fff;
}
.footer-contact-content p {
max-width:390px;
margin:0;
font-family:var(--body-font);
font-size:14px;
line-height:1.8;
color:#bdbdbd;
}
.footer-contact-content a {
font-family:var(--body-font);
font-size:14px;
line-height:1.6;
color:#c8c8c8;
text-decoration:none;
transition:color .3s ease;
}
.footer-contact-content a:hover {
color:#ea6d0e;
}
.footer-phone-links {
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
}
.footer-phone-links span {
color:#555;
font-size:13px;
}
.footer-bottom {
position:relative;
z-index:1;
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
padding:23px 0;
border-top:1px solid rgba(255,255,255,.09);
}
.footer-copyright {
display:flex;
align-items:center;
gap:16px;
flex-wrap:wrap;
font-family:var(--body-font);
font-size:12px;
line-height:1.6;
color:#777;
}
.footer-copyright a {
color:#d5d5d5;
font-weight:600;
text-decoration:none;
transition:color .3s ease;
}
.footer-copyright a:hover {
color:#ea6d0e;
}
.footer-divider {
display:block;
width:1px;
height:14px;
background:#3c3c3c;
}
.footer-policy {
display:flex;
align-items:center;
gap:16px;
}
.footer-policy a {
font-family:var(--body-font);
font-size:12px;
color:#888;
text-decoration:none;
transition:color .3s ease;
}
.footer-policy a:hover {
color:#ea6d0e;
}
/*=========================================================
LARGE LAPTOP
=========================================================*/
@media (max-width:1200px) {
.footer {
padding-top:65px;
}
.footer-main {
grid-template-columns:minmax(0,1.15fr) minmax(200px,.8fr) minmax(0,1.15fr);
gap:45px;
}
.footer-logo {
width:215px;
height:155px;
}
.footer-description {
font-size:15px;
}
.footer-heading h3 {
font-size:26px;
}
}
/*=========================================================
TABLET
=========================================================*/
@media (max-width:991px) {
.footer {
padding-top:60px;
}
.footer-main {
grid-template-columns:1fr 1fr;
gap:55px 45px;
padding-bottom:55px;
}
.footer-brand {
max-width:500px;
}
.footer-contact-column {
grid-column:1 / -1;
max-width:650px;
}
.footer-contact-list {
display:grid;
grid-template-columns:1fr 1fr;
gap:25px 40px;
}
.footer-bottom {
align-items:flex-start;
flex-direction:column;
gap:16px;
}
.footer-policy {
justify-content:flex-start;
}
}
/*=========================================================
MOBILE
=========================================================*/
@media (max-width:767px) {
.footer {
padding-top:50px;
}
.footer-main {
grid-template-columns:1fr;
gap:45px;
padding-bottom:45px;
}
.footer-brand,
.footer-contact-column {
max-width:none;
}
.footer-navigation {
max-width:420px;
}
.footer-contact-column {
grid-column:auto;
}
.footer-logo {
width:185px;
height:135px;
padding:15px;
border-radius:16px;
margin-bottom:24px;
}
.footer-description {
font-size:15px;
line-height:1.85;
}
.footer-brand-line {
margin-top:23px;
}
.footer-heading {
margin-bottom:24px;
}
.footer-heading h3 {
font-size:24px;
}
.footer-links a {
min-height:49px;
font-size:14px;
}
.footer-contact-list {
display:flex;
gap:22px;
}
.footer-contact-item {
grid-template-columns:32px minmax(0,1fr);
gap:13px;
}
.footer-contact-icon {
width:32px;
height:32px;
font-size:12px;
}
.footer-contact-content strong {
font-size:15px;
}
.footer-contact-content p,
.footer-contact-content a {
font-size:14px;
}
.footer-bottom {
padding:20px 0;
}
.footer-copyright {
font-size:11px;
gap:10px;
}
.footer-policy {
gap:10px;
}
.footer-policy a {
font-size:11px;
}
.footer-divider {
height:12px;
}
}
/*=========================================================
SMALL MOBILE
=========================================================*/
@media (max-width:480px) {
.footer {
padding-top:45px;
}
.footer-main {
gap:38px;
}
.footer-logo {
width:165px;
height:120px;
}
.footer-description {
font-size:14px;
line-height:1.8;
}
.footer-brand-line p {
font-size:8px;
letter-spacing:.18em;
}
.footer-heading h3 {
font-size:22px;
}
.footer-links a {
grid-template-columns:25px 1fr 15px;
min-height:47px;
font-size:13px;
}
.footer-contact-list {
gap:20px;
}
.footer-contact-content p,
.footer-contact-content a {
font-size:13px;
line-height:1.75;
}
.footer-phone-links {
display:block;
}
.footer-phone-links span {
display:none;
}
.footer-phone-links a {
display:block;
}
.footer-bottom {
gap:14px;
}
.footer-copyright {
display:flex;
align-items:flex-start;
flex-direction:column;
gap:7px;
}
.footer-copyright .footer-divider {
display:none;
}
.footer-policy {
gap:10px;
}
}
/* =========================================================
SECTION MATERIAL DIVIDER
\========================================================= */

.dvs-material-divider {
position: relative;

width: 100%;

overflow: hidden;

background: #11181d;

box-sizing: border-box;
}

/* =========================================================
HEADER
\========================================================= */

.dvs-material-divider-header {
display: flex;

justify-content: center;

align-items: center;

margin-bottom: 18px;

text-align: center;
}

.dvs-material-divider-header span {
font-family: var(--heading-font);

font-size: 11px;

font-weight: 700;

letter-spacing: 3px;

text-transform: uppercase;

color: #ea6d0e;
}

/* =========================================================
ORANGE LINES
\========================================================= */

.dvs-material-line {
width: 100%;

height: 1px;

background: linear-gradient(
90deg,
transparent,
rgba(234, 109, 14, 0.25),
#ea6d0e,
rgba(234, 109, 14, 0.25),
transparent
);
}

/* =========================================================
MARQUEE
\========================================================= */

.dvs-material-marquee {
position: relative;

width: 100%;

margin: 22px 0;

overflow: hidden;

white-space: nowrap;
}

/* =========================================================
TRACK
\========================================================= */

.dvs-material-track {
display: flex;

width: max-content;

will-change: transform;

animation: dvs-material-scroll 22s linear infinite;
}

/* =========================================================
GROUP
\========================================================= */

.dvs-material-group {
display: flex;

align-items: center;

flex-shrink: 0;

width: max-content;
}

/* =========================================================
MATERIAL TEXT
\========================================================= */

.dvs-material-group span {
display: inline-block;

padding: 0 28px;

font-family: var(--heading-font);

font-size: clamp(1rem, 1.5vw, 1.3rem);

font-weight: 700;

letter-spacing: 1px;

color: rgba(255, 255, 255, 0.9);
}

/* =========================================================
SEPARATOR
\========================================================= */

.dvs-material-group b {
display: inline-block;

flex-shrink: 0;

font-size: 7px;

font-weight: 400;

color: #ea6d0e;
}

/* =========================================================
INFINITE SCROLL
\========================================================= */

@keyframes dvs-material-scroll {
from {
transform: translateX(0);
}

to {
transform: translateX(-50%);
}
}

/* =========================================================
SIDE FADE
\========================================================= */

.dvs-material-marquee::before,
.dvs-material-marquee::after {
content: "";

position: absolute;

top: 0;

width: 140px;

height: 100%;

z-index: 5;

pointer-events: none;
}

.dvs-material-marquee::before {
left: 0;

background: linear-gradient(90deg, #11181d, transparent);
}

.dvs-material-marquee::after {
right: 0;

background: linear-gradient(270deg, #11181d, transparent);
}

/* =========================================================
HOVER PAUSE
\========================================================= */

.dvs-material-divider:hover .dvs-material-track {
animation-play-state: paused;
}

/* =========================================================
LAPTOP
\========================================================= */

@media (max-width: 1200px) {
.dvs-material-group span {
padding: 0 24px;
font-size: 1rem;
}
}

/* =========================================================
TABLET
\========================================================= */

@media (max-width: 768px) {
.dvs-material-divider-header {
margin-bottom: 15px;
}

.dvs-material-divider-header span {
font-size: 9px;
letter-spacing: 2.5px;
}

.dvs-material-marquee {
margin: 17px 0;
}

.dvs-material-group span {
padding: 0 20px;
font-size: 0.9rem;
}

.dvs-material-group b {
font-size: 6px;
}

.dvs-material-marquee::before,
.dvs-material-marquee::after {
width: 80px;
}
}

/* =========================================================
MOBILE
\========================================================= */

@media (max-width: 576px) {
.dvs-material-divider-header span {
font-size: 8px;
letter-spacing: 2px;
}

.dvs-material-marquee {
margin: 15px 0;
}

.dvs-material-group span {
padding: 0 16px;
font-size: 0.78rem;

letter-spacing: 0.5px;
}

.dvs-material-marquee::before,
.dvs-material-marquee::after {
width: 50px;
}
}

/* =========================================================
ABOUT DIVYASHAKTI STEEL
\========================================================= */

.dvs-about-section {
position: relative;

width: 100%;

background: #f7f7f7;
}

/* =========================================================
CONTAINER
\========================================================= */

.dvs-about-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 75px;
align-items: stretch;
}

/* =========================================================
IMAGE
\========================================================= */

.dvs-about-image img {
display: block;

width: 100%;

height: 100%;
border-radius: 20px;
object-fit: cover;

object-position: center;

transition: transform 0.6s ease;
}

/* Optional subtle image movement */

.dvs-about-image:hover img {
transform: scale(1.03);
}

.dvs-about-container > * {
height: 100%;
}
/* =========================================================
CONTENT CARD
\========================================================= */

.dvs-about-content {
display: flex;
flex-direction: column;
justify-content: center;

height: 100%;

padding: 55px;

background: #fff;

border-radius: 28px;

box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
}

/* =========================================================
TAG
\========================================================= */

.dvs-about-tag {
display: block;

margin-bottom: 18px;

font-family: var(--heading-font);

font-size: 15px;

font-weight: 700;

letter-spacing: 1.5px;

color: #e87518;
}

/* =========================================================
PARAGRAPH
\========================================================= */

.dvs-about-content p {
margin: 0 0 24px;

font-size: 16px;

line-height: 1.85;

color: #666d72;
}

/* Remove margin from final paragraph */

.dvs-about-content p:last-child {
margin-bottom: 0;
}

/* =========================================================
HIGHLIGHTED WORDS
\========================================================= */

.dvs-about-highlight {
font-weight: 700;

color: #151a1e;
}

/* =========================================================
LAPTOP
1000px — 1200px
\========================================================= */

@media (max-width: 1200px) {
.dvs-about-container {
gap: 45px;
}

.dvs-about-image {
min-height: 500px;
}

.dvs-about-content {
padding: 42px;
}

.dvs-about-content h2 {
font-size: clamp(2rem, 3vw, 3rem);
}

.dvs-about-content p {
font-size: 15px;
line-height: 1.75;
}
}

/* =========================================================
TABLET
601px — 999px
\========================================================= */

@media (max-width: 999px) {
.dvs-about-container {
grid-template-columns: 1fr;
gap: 35px;
}

.dvs-about-image {
min-height: 450px;
border-radius: 24px;
}

.dvs-about-content {
padding: 40px;
}
}

/* =========================================================
MOBILE
400px — 600px
\========================================================= */

@media (max-width: 600px) {
.dvs-about-container {
gap: 25px;
}

.dvs-about-image {
min-height: 300px;
border-radius: 20px;
}

.dvs-about-content {
padding: 28px 24px;
border-radius: 20px;
}

.dvs-about-tag {
margin-bottom: 12px;
font-size: 11px;

letter-spacing: 1.5px;
}

.dvs-about-content h2 {
margin-bottom: 20px;
font-size: clamp(1.8rem, 7vw, 2.4rem);

line-height: 1.1;
}

.dvs-about-content p {
margin-bottom: 18px;
font-size: 13px;

line-height: 1.7;
}
}

/* =========================================================
SMALL MOBILE
400px AND BELOW
\========================================================= */

@media (max-width: 400px) {
.dvs-about-container {
gap: 20px;
}

.dvs-about-image {
min-height: 250px;
border-radius: 18px;
}

.dvs-about-content {
padding: 24px 20px;
border-radius: 18px;
}

.dvs-about-tag {
font-size: 10px;
}

.dvs-about-content h2 {
font-size: 26px;
letter-spacing: -0.5px;
}

.dvs-about-content p {
font-size: 12px;
line-height: 1.65;
}
}

/* =========================================================
DIVYASHAKTI FLOATING STORY
\========================================================= */

.dvs-floating-story {
position: relative;

width: 100%;

overflow: hidden;

background-image:
linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),
url("../images/about/about-bg.jpg");

background-size: cover;

background-position: center center;

background-repeat: no-repeat;

background-attachment: fixed;
}

/* =========================================================
BOX SIZING
\========================================================= */

.dvs-floating-story *,
.dvs-floating-story *::before,
.dvs-floating-story *::after {
box-sizing: border-box;
}

/* =========================================================
CONTAINER
\========================================================= */

.dvs-floating-container {
display: grid;

grid-template-columns: 1fr 1fr;

gap: 50px;

align-items: center;
}

/* =========================================================
BLOCK
\========================================================= */

.dvs-floating-block {
position: relative;

width: 100%;

min-height: 528px;

margin: 0;
}

/* =========================================================
LAST BLOCK
\========================================================= */

.dvs-floating-block:last-child {
margin-bottom: 0;
}

/* =========================================================
CONTENT CARD
\========================================================= */

.dvs-floating-content {
position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 100%;

min-height: 520px;

padding: 40px;

display: flex;

flex-direction: column;

justify-content: center;

background: rgba(255, 255, 255, 0.9);

backdrop-filter: blur(8px);

-webkit-backdrop-filter: blur(8px);

border-radius: 28px;

box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
}

.dvs-floating-block:first-child .dvs-floating-content,
.dvs-floating-block:nth-child(2) .dvs-floating-content {
margin: 0;
}

/* =========================================================
PARAGRAPH
\========================================================= */
.dvs-section-description {
margin: 0 0 15px;
}

/* =========================================================
PRODUCT TAGS
\========================================================= */

.dvs-floating-tags {
display: flex;

flex-wrap: wrap;

gap: 7px;

margin: 20px 0 25px;
}

.dvs-floating-tags span {
padding: 7px 11px;

border: 1px solid #d7dcde;

background: rgba(255, 255, 255, 0.65);

font-size: 10px;

font-weight: 700;

color: #3d474c;
}

/* =========================================================
QUALITY LIST
\========================================================= */

.dvs-floating-quality {
display: grid;

grid-template-columns: 1fr 1fr;

gap: 0;

padding: 0;

margin: 20px 0 25px;

list-style: none;
}

.dvs-floating-quality li {
padding: 12px 12px 12px 0;

border-top: 1px solid #dce0e2;

font-size: 10px;

line-height: 1.45;

color: #727b80;
}

.dvs-floating-quality strong {
display: block;

margin-bottom: 3px;

font-size: 13px;

color: #1a2227;
}

/* =========================================================
LINK
\========================================================= */

.dvs-floating-link {
display: inline-flex;

align-items: center;

gap: 10px;

width: fit-content;

padding-bottom: 5px;

border-bottom: 1px solid #e87518;

text-decoration: none;

font-size: 13px;

font-weight: 700;

color: #151d22;

transition:
gap 0.3s ease,
color 0.3s ease;
}

.dvs-floating-link span {
color: #e87518;

font-size: 17px;
}

.dvs-floating-link:hover {
gap: 17px;

color: #e87518;
}

/* =========================================================
LAPTOP
901px — 1200px
\========================================================= */

@media (max-width: 1200px) and (min-width: 901px) {
.dvs-floating-container {
grid-template-columns: 1fr 1fr;
gap: 35px;
}

.dvs-floating-block {
width: 100%;
min-height: 620px;

margin: 0;
}

.dvs-floating-content {
width: 100%;
min-height: 500px;

padding: 32px;
}

.dvs-floating-tags {
gap: 6px;
margin: 17px 0 22px;
}

.dvs-floating-tags span {
padding: 6px 9px;
font-size: 9px;
}
}

/* =========================================================
TABLET
601px — 900px

Cards become vertically stacked.
\========================================================= */

@media (max-width: 900px) and (min-width: 601px) {
.dvs-floating-story {
background-attachment: scroll;
}

.dvs-floating-container {
display: grid;
grid-template-columns: 1fr;

gap: 70px;
}

.dvs-floating-block {
width: 100%;
min-height: auto;

margin: 0;
}

.dvs-floating-content {
position: relative;
top: auto;

left: auto;

transform: none;

width: 70%;

max-width: 70%;

min-height: 0;

margin-left: auto;

margin-right: auto;

padding: 30px;
}

/* IMPORTANT:
Remove old left/right positioning
*/

.dvs-floating-block:first-child .dvs-floating-content,
.dvs-floating-block:nth-child(2) .dvs-floating-content {
margin-left: auto;
margin-right: auto;
}

.dvs-floating-tag {
font-size: 11px;
letter-spacing: 2px;
}

.dvs-floating-content p {
font-size: 12px;
line-height: 1.65;
}

.dvs-floating-tags {
gap: 5px;
margin: 15px 0 20px;
}

.dvs-floating-tags span {
padding: 6px 8px;
font-size: 8px;
}

.dvs-floating-quality {
grid-template-columns: 1fr 1fr;
margin: 15px 0 20px;
}

.dvs-floating-quality li {
padding: 9px 9px 9px 0;
font-size: 9px;
}

.dvs-floating-quality strong {
font-size: 11px;
}
}

/* =========================================================
MOBILE
401px — 600px
\========================================================= */

@media (max-width: 600px) {
.dvs-floating-story {
background-attachment: scroll;
}

.dvs-floating-container {
display: grid;
grid-template-columns: 1fr;

gap: 50px;
}

.dvs-floating-block {
width: 100%;
min-height: auto;

margin: 0;
}

.dvs-floating-content {
position: relative;
top: auto;

left: auto;

transform: none;

width: 100%;

max-width: none;

min-height: 0;

margin-left: auto;

margin-right: auto;

padding: 24px;
}

/* Force BOTH cards to center */

.dvs-floating-block:first-child .dvs-floating-content,
.dvs-floating-block:nth-child(2) .dvs-floating-content {
margin-left: auto;
margin-right: auto;
}

.dvs-floating-tag {
margin-bottom: 9px;
font-size: 10px;

letter-spacing: 2px;
}

.dvs-floating-content p {
margin-bottom: 13px;
font-size: 13px;

line-height: 1.65;
}

.dvs-floating-tags {
display: flex;
flex-wrap: wrap;

gap: 6px;

margin: 14px 0 19px;
}

.dvs-floating-tags span {
padding: 6px 8px;
font-size: 9px;
}

.dvs-floating-quality {
grid-template-columns: 1fr;
margin: 14px 0 19px;
}

.dvs-floating-quality li {
padding: 9px 0;
font-size: 10px;
}

.dvs-floating-quality strong {
font-size: 12px;
}

.dvs-floating-link {
font-size: 12px;
}
}

/* =========================================================
SMALL MOBILE
400px AND BELOW
\========================================================= */

@media (max-width: 400px) {
.dvs-floating-container {
gap: 40px;
}

.dvs-floating-block {
width: 100%;
margin: 0;
}

.dvs-floating-content,
.dvs-floating-block:first-child .dvs-floating-content,
.dvs-floating-block:nth-child(2) .dvs-floating-content {
width: 100%;
max-width: none;

margin-left: auto;

margin-right: auto;

padding: 20px;
}

.dvs-floating-tag {
font-size: 9px;
letter-spacing: 2px;
}

.dvs-floating-content p {
margin-bottom: 11px;
font-size: 12px;

line-height: 1.6;
}

.dvs-floating-tags {
gap: 5px;
margin: 11px 0 16px;
}

.dvs-floating-tags span {
padding: 5px 7px;
font-size: 8px;
}

.dvs-floating-quality {
grid-template-columns: 1fr;
margin: 10px 0 16px;
}

.dvs-floating-quality li {
padding: 7px 0;
font-size: 9px;
}

.dvs-floating-quality strong {
font-size: 11px;
}

.dvs-floating-link {
font-size: 11px;
}
}


/*=========================================
STATS SECTION
\=========================================*/

/* =========================================================
RESPONSIVE MAP SIZING AND PIN POSITIONING
\========================================================= */

.dvs-india-map {
width: min(1200px, 100%);
height: auto;
aspect-ratio: 1669 / 867;
margin: 0 auto;
overflow: visible;
}

.dvs-india-map-image {
width: 100%;
max-width: none;
padding-bottom: 0;
}

.dvs-india-pune {
left: 34.4%;
top: 60.3%;
}

@media (max-width: 767px) {
.dvs-india-presence {
min-height: auto;
}

.dvs-india-map {
width: 150%;
margin-left: -25%;
margin-right: 0;
}
}

@media (min-width: 768px) and (max-width: 1200px) {
.dvs-india-presence {
min-height: auto;
}

.dvs-india-map {
width: 125%;
margin-left: -12.5%;
margin-right: 0;
}
}

/* =========================================================
CONTAINED LOCATION CARDS
\========================================================= */

@media (min-width: 768px) {
.dvs-india-location-card {
left: 50%;
top: -20px;
width: 280px;
max-width: calc(100vw - 48px);
transform: translate(-50%, -100%) translateY(10px);
}

.dvs-india-pin:hover .dvs-india-location-card,
.dvs-india-pin:focus .dvs-india-location-card {
transform: translate(-50%, -100%);
}
}

@media (max-width: 767px) {
.dvs-india-location-card {
left: 0;
top: -15px;
width: min(280px, calc(100vw - 32px));
max-width: calc(100vw - 32px);
padding: 18px;
}

.dvs-india-pune .dvs-india-location-card {
transform: translate(calc(16px - 26vw), -100%) translateY(10px);
}

.dvs-india-kolkata .dvs-india-location-card {
transform: translate(calc(16px - 60vw), -100%) translateY(10px);
}

.dvs-india-pune:hover .dvs-india-location-card,
.dvs-india-pune:focus .dvs-india-location-card {
transform: translate(calc(16px - 26vw), -100%);
}

.dvs-india-kolkata:hover .dvs-india-location-card,
.dvs-india-kolkata:focus .dvs-india-location-card {
transform: translate(calc(16px - 60vw), -100%);
}
}

/*=========================================
STATS SECTION
\=========================================*/

.stats-section {
background: #111;
position: relative;

overflow: hidden;

isolation: isolate;
}

/*=========================================
BACKGROUND
\=========================================*/
.stats-video {
position: absolute;

inset: 0;

width: 100%;
height: 100%;

object-fit: cover;

z-index: -3;

animation: videoZoom 18s ease-in-out infinite alternate;

object-position: center;
}

@keyframes videoZoom {
from {
transform: scale(1);
}

to {
transform: scale(1.08);
}
}

.stats-overlay {
position: absolute;
inset: 0;

background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.25),
rgba(53, 50, 50, 0.25)
);

z-index: -2;
}

.stats-overlay::before {
content: "";

position: absolute;

width: 700px;
height: 700px;

border-radius: 50%;

background: rgba(234, 109, 14, 0.1);

filter: blur(140px);

top: -250px;
right: -200px;
}

.stats-overlay::after {
content: "";

position: absolute;
inset: 0;

background: radial-gradient(
ellipse at center,
transparent 30%,
rgba(0, 0, 0, 0.45) 100%
);
}

/*=========================================
HEADING
\=========================================*/

.stats-heading {
max-width: 760px;
margin: 0 auto 70px;
text-align: center;
}

.stats-heading .dvs-section-eyebrow {
margin-bottom: 14px;
color: var(--primary);
}

.stats-heading .dvs-section-title {
margin-bottom: 20px;
color: #fff;
}

.stats-heading .dvs-section-title span {
display: block;
color: var(--primary);
}

.stats-heading .dvs-section-description {
max-width: 680px;
margin: 0 auto;
color: rgba(255, 255, 255, 0.72);
}

/*=========================================
GRID
\=========================================*/

.stats-grid {
display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 28px;
}

/*=========================================
CARD
\=========================================*/

.stat-item {
position: relative;

padding: 45px 32px;

text-align: center;
background: rgba(22, 22, 22, 0.52);

backdrop-filter: blur(18px);

-webkit-backdrop-filter: blur(18px);

border: 1px solid rgba(255, 255, 255, 0.08);

box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);

border-radius: 24px;

transition: 0.45s;

overflow: hidden;
isolation: isolate;
}

.stat-item::after {
content: "";

position: absolute;

inset: -1px;

border-radius: inherit;

padding: 2px;

background: conic-gradient(
transparent 0deg,
transparent 338deg,
rgba(255, 180, 90, 0.15) 344deg,
#ffb35c 350deg,
var(--primary) 355deg,
transparent 360deg
);

animation: borderSpin 2.8s linear infinite;

opacity: 0;

transition: 0.3s;

pointer-events: none;

-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);

-webkit-mask-composite: xor;

mask-composite: exclude;
}

.stat-item::before {
content: "";

position: absolute;

top: 0;
left: 0;

width: 100%;
height: 4px;

background: var(--primary);

transform: scaleX(0);

transform-origin: left;

transition: 0.45s;
}

.stat-item:hover {
transform: translateY(-12px);

background: rgba(28, 28, 28, 0.72);

border-color: rgba(234, 109, 14, 0.45);

box-shadow: 0 25px 65px rgba(0, 0, 0, 0.45);
}

.stat-item .card-bg {
position: absolute;

inset: 2px;

background: rgba(22, 22, 22, 0.88);

border-radius: 22px;

z-index: -1;
}

.stat-item:hover::before {
transform: scaleX(1);
}

@keyframes borderSpin {
from {
transform: rotate(0deg);
}

to {
transform: rotate(360deg);
}
}

.stat-item:hover::after {
opacity: 1;
}

/*=========================================
ICON
\=========================================*/

.stat-icon {
width: 88px;
height: 88px;

margin: 0 auto 28px;

display: flex;

align-items: center;
justify-content: center;

border-radius: 50%;

background: rgba(234, 109, 14, 0.15);

color: var(--primary);

font-size: 34px;

transition: 0.45s;
}

.stat-item:hover .stat-icon {
background: var(--primary);

color: #fff;

transform: rotateY(180deg);
}

/*=========================================
NUMBER
\=========================================*/

.stat-item h3 {
margin: 0;

font-size: 4rem;

font-weight: 800;

line-height: 1;

color: #fff;

letter-spacing: -2px;
}

.stat-item h3 span:last-child {
color: var(--primary);
}

/*=========================================
TITLE
\=========================================*/

.stat-item h5 {
margin: 18px 0 12px;

font-size: 1.15rem;

font-weight: 700;

color: #fff;
}

/*=========================================
DESCRIPTION
\=========================================*/

.stat-item p {
margin: 0;

font-size: 0.95rem;

line-height: 1.8;

color: rgba(255, 255, 255, 0.68);
}

/*=========================================
RESPONSIVE
\=========================================*/

@media (max-width: 1200px) {
.stats-grid {
gap: 22px;
}

.stat-item {
padding: 38px 26px;
}

.stat-item h3 {
font-size: 3.5rem;
}
}

@media (max-width: 992px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}

.stats-heading {
margin-bottom: 55px;
}

.stat-item {
padding: 35px 24px;
}

.stat-icon {
width: 78px;
height: 78px;
font-size: 30px;
}

.stat-item h3 {
font-size: 3.2rem;
}
}

@media (max-width: 768px) {
.stats-heading {
margin-bottom: 45px;
}

.stat-item {
padding: 32px 22px;
}

.stat-icon {
width: 70px;
height: 70px;
margin-bottom: 22px;

font-size: 26px;
}

.stat-item h3 {
font-size: 2.8rem;
}

.stat-item h5 {
font-size: 1.05rem;
}

.stat-item p {
font-size: 0.9rem;
}
}

@media (max-width: 576px) {
.stats-grid {
grid-template-columns: 1fr;
gap: 18px;
}

.stats-heading {
margin-bottom: 35px;
}

.stat-item {
padding: 30px 20px;
border-radius: 20px;
}

.stat-icon {
width: 66px;
height: 66px;
font-size: 24px;
}

.stat-item h3 {
font-size: 2.6rem;
}

.stat-item h5 {
font-size: 1rem;
}

.stat-item p {
font-size: 0.88rem;
}
}

@media (max-width: 420px) {
.stat-item {
padding: 26px 18px;
}

.stat-icon {
width: 60px;
height: 60px;
font-size: 22px;
}

.stat-item h3 {
font-size: 2.3rem;
}

.stat-item p {
line-height: 1.7;
}
}

/* =========================================================
DIVYASHAKTI FAQ SECTION
\========================================================= */

.dvs-faq-section {
position: relative;

width: 100%;

background: #f7f7f7;

overflow: hidden;
}

/* =========================================================
CONTAINER
\========================================================= */

.dvs-faq-container {
margin: 0 auto;
}

/* =========================================================
HEADING
\========================================================= */

.dvs-faq-heading {
max-width: 950px;

margin: 0 auto 75px;

text-align: center;
}

.dvs-faq-heading .dvs-section-title {
margin-bottom: 22px;
}

.dvs-faq-heading .dvs-section-description {
max-width: 760px;

margin: 0 auto;
}

/* =========================================================
FAQ WRAPPER
\========================================================= */

.dvs-faq-wrapper {
display: flex;

flex-direction: column;

gap: 20px;
}

/* =========================================================
FAQ ITEM
\========================================================= */

.dvs-faq-item {
position: relative;

background: #ffffff;

border: 1px solid #dedede;

border-radius: 22px;

overflow: hidden;

transition:
border-color 0.35s ease,
box-shadow 0.35s ease,
transform 0.35s ease;
}

/* =========================================================
HOVER
\========================================================= */

.dvs-faq-item:hover {
border-color: rgba(234, 109, 14, 0.35);

box-shadow: 0 18px 45px rgba(0, 0, 0, 0.06);

transform: translateY(-2px);
}

/* =========================================================
ACTIVE ITEM
\========================================================= */

.dvs-faq-item.active {
border-color: rgba(234, 109, 14, 0.35);

box-shadow: 0 18px 45px rgba(0, 0, 0, 0.07);
}

/* =========================================================
ACTIVE TOP LINE
\========================================================= */

.dvs-faq-item.active::before {
content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 3px;

background: #ea6d0e;
}

/* =========================================================
FAQ HEADER
\========================================================= */

.dvs-faq-header {
min-height: 115px;

padding: 28px 34px;

display: flex;

align-items: center;

justify-content: space-between;

gap: 30px;

cursor: pointer;
}

/* =========================================================
QUESTION
\========================================================= */

.dvs-faq-header h3 {
margin: 0;

padding-right: 20px;

font-family: var(--heading-font);

font-size: 21px;

line-height: 1.4;

font-weight: 700;

color: #171d22;
}

/* =========================================================
ICON
\========================================================= */

.dvs-faq-icon {
position: relative;

width: 58px;

height: 58px;

flex-shrink: 0;

border-radius: 50%;

background: rgba(234, 109, 14, 0.08);

transition:
background 0.35s ease,
transform 0.35s ease;
}

/* =========================================================
PLUS HORIZONTAL
\========================================================= */

.dvs-faq-icon::before {
content: "";

position: absolute;

top: 50%;

left: 50%;

width: 19px;

height: 2px;

background: #ea6d0e;

transform: translate(-50%, -50%);

transition: background 0.35s ease;
}

/* =========================================================
PLUS VERTICAL
\========================================================= */

.dvs-faq-icon::after {
content: "";

position: absolute;

top: 50%;

left: 50%;

width: 2px;

height: 19px;

background: #ea6d0e;

transform: translate(-50%, -50%);

transition:
opacity 0.3s ease,
background 0.35s ease;
}

/* =========================================================
FAQ BODY
\========================================================= */

.dvs-faq-body {
max-height: 0;

overflow: hidden;

padding: 0 34px;

transition:
max-height 0.5s ease,
padding 0.5s ease;
}

/* =========================================================
BODY TEXT
\========================================================= */

.dvs-faq-body p {
max-width: 950px;

margin: 0;

padding-bottom: 30px;

font-size: 15px;

line-height: 1.85;

color: #697177;
}

/* =========================================================
ACTIVE BODY
\========================================================= */

.dvs-faq-item.active .dvs-faq-body {
max-height: 500px;

padding-top: 0;
}

/* =========================================================
ACTIVE ICON
\========================================================= */

.dvs-faq-item.active .dvs-faq-icon {
background: #ea6d0e;

transform: rotate(180deg);
}

/* Horizontal becomes white */

.dvs-faq-item.active .dvs-faq-icon::before {
background: #ffffff;
}

/* Vertical disappears */

.dvs-faq-item.active .dvs-faq-icon::after {
opacity: 0;

background: #ffffff;
}

/* =========================================================
READ MORE BUTTON
\========================================================= */

.dvs-faq-read-btn {
display: flex;

align-items: center;

justify-content: center;

gap: 12px;

margin: 55px auto 0;

padding: 15px 32px;

min-width: 160px;

border: 1px solid rgba(255, 255, 255, 0.16);

box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);

background: #ea6d0e;

color: #ffffff;

font-family: var(--heading-font);

font-size: 14px;

font-weight: 700;

cursor: pointer;

transition:
background 0.3s ease,
transform 0.3s ease,
box-shadow 0.3s ease;

align-items: center;
}

.dvs-faq-read-btn:hover {
background: #171d22;

transform: translateY(-2px);

box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

/* =========================================================
BUTTON ICON
\========================================================= */

.dvs-faq-read-btn i {
font-size: 13px;

transition: transform 0.35s ease;
}

/* =========================================================
ACTIVE BUTTON
\========================================================= */

.dvs-faq-read-btn.active {
background: #171d22;
}

.dvs-faq-read-btn.active i {
transform: rotate(180deg);
}

/* =========================================================
HIDDEN FAQ ITEMS
\========================================================= */

.dvs-faq-item:nth-child(n + 5) {
display: none;
}

/* =========================================================
WHEN SHOWING ALL
\========================================================= */

.dvs-faq-wrapper.show-all .dvs-faq-item:nth-child(n + 5) {
display: block;
}

/* =========================================================
LAPTOP
1000px — 1200px
\========================================================= */

@media (max-width: 1200px) {
.dvs-faq-heading {
margin-bottom: 60px;
}
}

/* =========================================================
TABLET
601px — 999px
\========================================================= */

@media (max-width: 999px) {
.dvs-faq-heading {
margin-bottom: 50px;
}

.dvs-faq-heading p {
font-size: 15px;
}

.dvs-faq-header {
min-height: 100px;
padding: 25px 28px;
}

.dvs-faq-header h3 {
font-size: 18px;
}

.dvs-faq-icon {
width: 52px;
height: 52px;
}

.dvs-faq-body {
padding-left: 28px;
padding-right: 28px;
}
}

/* =========================================================
MOBILE
601px AND BELOW
\========================================================= */

@media (max-width: 600px) {
.dvs-faq-heading {
margin-bottom: 40px;
}

.dvs-faq-wrapper {
gap: 14px;
}

.dvs-faq-item {
border-radius: 17px;
}

.dvs-faq-header {
min-height: 85px;
padding: 20px;

gap: 15px;
}

.dvs-faq-header h3 {
padding-right: 5px;
font-size: 15px;

line-height: 1.45;
}

.dvs-faq-icon {
width: 44px;
height: 44px;
}

.dvs-faq-icon::before {
width: 15px;
}

.dvs-faq-icon::after {
height: 15px;
}

.dvs-faq-body {
padding-left: 20px;
padding-right: 20px;
}

.dvs-faq-body p {
padding-bottom: 23px;
font-size: 13px;

line-height: 1.75;
}

.dvs-faq-read-btn {
margin-top: 35px;
padding: 13px 28px;

font-size: 13px;
}
}

/* =========================================================
SMALL MOBILE
400px AND BELOW
\========================================================= */

@media (max-width: 400px) {
.dvs-faq-heading p {
font-size: 12px;
}

.dvs-faq-header {
min-height: 78px;
padding: 17px;
}

.dvs-faq-header h3 {
font-size: 14px;
}

.dvs-faq-icon {
width: 40px;
height: 40px;
}

.dvs-faq-body {
padding-left: 17px;
padding-right: 17px;
}

.dvs-faq-body p {
font-size: 12px;
line-height: 1.7;
}
}

/* =========================================================
DIVYASHAKTI BLOG SECTION
\========================================================= */

.dvs-blog-section {
position: relative;

background: #f7f7f7;
}

/* =========================================================
CONTAINER
\========================================================= */

.dvs-blog-container {
margin: 0 auto;
}

/* =========================================================
HEADING ROW
\========================================================= */

.dvs-blog-heading-row {
display: flex;

align-items: flex-end;

justify-content: space-between;

gap: 40px;

margin-bottom: 55px;
}

.dvs-blog-heading {
max-width: 700px;
}

.dvs-blog-heading .dvs-section-title {
margin-bottom: 0;

max-width: 700px;
}

.dvs-blog-heading .dvs-section-title span {
display: block;

color: var(--primary);
}

/* =========================================================
VIEW ALL BUTTON
\========================================================= */

.dvs-blog-view-btn {
display: inline-flex;

align-items: center;

gap: 12px;

flex-shrink: 0;

padding: 15px 24px;

background: #ea6d0e;

color: #fff;

border: 1px solid rgba(255, 255, 255, 0.16);

box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);

font-family: var(--heading-font);

font-size: 12px;

font-weight: 700;

text-decoration: none;

transition:
background 0.3s ease,
color 0.3s ease,
transform 0.3s ease;
}

.dvs-blog-view-btn i {
font-size: 11px;

transition: transform 0.3s ease;
}

.dvs-blog-view-btn:hover {
background: #171717;

border-color: #171717;

color: #fff;

transform: translateY(-2px);
}

.dvs-blog-view-btn:hover i {
transform: translateX(5px);
}

/* =========================================================
BLOG GRID
\========================================================= */

.dvs-blog-grid {
display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 24px;
}

/* =========================================================
BLOG CARD
\========================================================= */

.dvs-blog-card {
position: relative;

display: flex;

flex-direction: column;

height: 100%;

overflow: hidden;

background: #fff;

border: 1px solid #e7e7e7;

border-radius: 18px;

box-shadow: 0 12px 35px rgba(0, 0, 0, 0.055);

transition:
transform 0.4s ease,
box-shadow 0.4s ease;
}

/* Top orange line */

.dvs-blog-card::before {
content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 3px;

background: #ea6d0e;

transform: scaleX(0);

transform-origin: left;

transition: transform 0.4s ease;

z-index: 5;
}

.dvs-blog-card:hover {
transform: translateY(-8px);

box-shadow: 0 25px 55px rgba(0, 0, 0, 0.1);
}

.dvs-blog-card:hover::before {
transform: scaleX(1);
}

/* =========================================================
IMAGE
\========================================================= */

.dvs-blog-image {
position: relative;

width: 100%;

height: 245px;

overflow: hidden;

background: #eaeaea;
}

.dvs-blog-image img {
display: block;

width: 100%;

height: 100%;

object-fit: cover;

object-position: center;

transition: transform 0.7s ease;
}

.dvs-blog-card:hover .dvs-blog-image img {
transform: scale(1.07);
}

/* =========================================
INDUSTRIES WE SERVE
========================================= */
.about-industries-section{
position:relative;
overflow:hidden;
background:radial-gradient(circle at 50% 48%,rgba(216,120,59,.07),transparent 30%),#f5f6f7;
color:#17202a;
}
.about-industries-section .container{
position:relative;
z-index:2;
}
.industries-intro{
max-width:850px;
margin-bottom:35px;
}
.about-eyebrow{
display:inline-flex;
align-items:center;
gap:14px;
margin-bottom:18px;
font-family:var(--heading-font);
font-size:10px;
font-weight:800;
letter-spacing:2.8px;
line-height:1;
text-transform:uppercase;
color:#ea6d0e;
}
.about-eyebrow::before{
content:"";
width:48px;
height:2px;
background:#ea6d0e;
}
.industries-intro h2{
margin:0;
font-family:var(--heading-font);
font-size:clamp(48px,6vw,76px);
line-height:.98;
font-weight:800;
letter-spacing:-.06em;
color:#17202a;
}
.industries-intro h2 span{
background:linear-gradient(90deg,#d8783b,#f67a21);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
.industries-intro p{
max-width:720px;
margin:28px 0 0;
font-size:16px;
line-height:1.85;
font-weight:400;
color:#66717d;
}
.industries-network{
position:relative;
width:min(1100px,100%);
height:700px;
margin:0 auto;
isolation:isolate;
}
.industries-network::before{
content:"";
position:absolute;
top:50%;
left:50%;
width:610px;
height:610px;
transform:translate(-50%,-50%);
border:1px solid rgba(23,32,42,.06);
border-radius:50%;
z-index:0;
}
.industries-network::after{
content:"";
position:absolute;
top:50%;
left:50%;
width:470px;
height:470px;
transform:translate(-50%,-50%);
border:1px solid rgba(216,120,59,.08);
border-radius:50%;
z-index:0;
}
.industries-center{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:310px;
height:310px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
border-radius:50%;
background:#17202a;
box-shadow:0 35px 80px rgba(23,32,42,.18),0 0 0 1px rgba(255,255,255,.08);
z-index:5;
}
.industries-center::before{
content:"";
position:absolute;
inset:-15px;
border:1px solid rgba(216,120,59,.25);
border-radius:50%;
}
.industries-center::after{
content:"";
position:absolute;
inset:-38px;
border:1px dashed rgba(23,32,42,.12);
border-radius:50%;
animation:industryOrbit 20s linear infinite;
}
.industries-center-small{
margin-bottom:17px;
font-family:var(--heading-font);
font-size:9px;
font-weight:700;
letter-spacing:.28em;
color:#ef8a43;
}
.industries-center h3{
margin:0;
font-family:var(--heading-font);
font-size:38px;
line-height:.98;
font-weight:800;
letter-spacing:-.05em;
color:#fff;
}
.industries-center h3 span{
background:linear-gradient(90deg,#d8783b,#f67a21);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
.industries-center-line{
width:45px;
height:2px;
margin:22px 0 16px;
background:linear-gradient(90deg,#d8783b,#f67a21);
}
.industries-center-bottom{
font-family:var(--heading-font);
font-size:8px;
font-weight:500;
letter-spacing:.14em;
color:rgba(255,255,255,.45);
}
.industry-pill{
position:absolute;
display:flex;
align-items:center;
gap:10px;
padding:12px 18px 12px 12px;
background:rgba(255,255,255,.92);
border:1px solid rgba(23,32,42,.08);
border-radius:100px;
box-shadow:0 12px 30px rgba(23,32,42,.07);
font-family:var(--heading-font);
font-size:12px;
font-weight:700;
white-space:nowrap;
color:#34404a;
z-index:3;
transition:transform .35s ease,box-shadow .35s ease,background .35s ease;
}
.industry-pill span{
display:flex;
align-items:center;
justify-content:center;
width:25px;
height:25px;
flex:0 0 25px;
border-radius:50%;
background:rgba(216,120,59,.1);
color:#d8783b;
font-size:8px;
font-weight:800;
letter-spacing:.03em;
}
.industry-pill:hover{
transform:translateY(-5px) scale(1.03);
background:#fff;
box-shadow:0 18px 40px rgba(23,32,42,.12);
}
.industry-pill:hover span{
background:linear-gradient(135deg,#d8783b,#f67a21);
color:#fff;
}
.industry-01{
top:7%;
left:36%;
}
.industry-02{
top:7%;
left:55%;
}
.industry-03{
top:11%;
right:13%;
}
.industry-04{
top:26%;
left:15%;
}
.industry-05{
top:27%;
right:14%;
}
.industry-15{
top:19%;
left:24%;
}
.industry-16{
top:19%;
right:24%;
}
.industry-06{
top:42%;
left:9%;
}
.industry-07{
top:42%;
right:9%;
}
.industry-08{
top:56%;
left:14%;
}
.industry-13{
top:57%;
right:15%;
}
.industry-09{
top:70%;
left:24%;
}
.industry-10{
top:66%;
right:26%;
}
.industry-14{
bottom:18%;
left:13%;
}
.industry-12{
bottom:17%;
right:14%;
}
.industry-11{
bottom:8%;
left:40%;
}
.industry-17{
bottom:16%;
right:40%;
}
.industries-statement{
position:relative;
max-width:850px;
margin:55px auto 0;
padding:35px 45px;
background:#fff;
border:1px solid rgba(23,32,42,.07);
border-radius:4px;
box-shadow:0 20px 55px rgba(23,32,42,.06);
overflow:hidden;
}
.industries-quote-mark{
position:absolute;
top:5px;
left:25px;
font-family:Georgia,serif;
font-size:70px;
line-height:1;
background:linear-gradient(90deg,#d8783b,#f67a21);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
opacity:.35;
}
.industries-statement p{
position:relative;
margin:0;
padding-left:20px;
font-family:var(--heading-font);
font-size:clamp(20px,2vw,26px);
line-height:1.45;
font-weight:600;
color:#17202a;
}
.industries-statement strong{
background:linear-gradient(90deg,#d8783b,#f67a21);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
.industries-statement-line{
display:block;
width:100%;
height:3px;
margin-top:28px;
background:linear-gradient(90deg,#d8783b,#f67a21);
}
@keyframes industryOrbit{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
@media(max-width:1200px){
.industries-intro{
margin-bottom:60px;
}
.industries-network{
height:650px;
}
.industries-network::before{
width:560px;
height:560px;
}
.industries-network::after{
width:430px;
height:430px;
}
.industries-center{
width:280px;
height:280px;
}
.industries-center h3{
font-size:34px;
}
.industry-pill{
font-size:11px;
}
}
@media(max-width:991px){
.industries-intro{
margin-bottom:45px;
}
.industries-intro h2{
font-size:clamp(44px,7vw,60px);
}
.industries-intro p{
font-size:15px;
}
.industries-network{
height:700px;
width:100%;
}
.industries-center{
width:235px;
height:235px;
}
.industries-center h3{
font-size:30px;
}
.industries-center-small{
font-size:8px;
}
.industries-center-bottom{
font-size:7px;
}
.industries-network::before{
width:520px;
height:520px;
}
.industries-network::after{
width:390px;
height:390px;
}
.industry-pill{
padding:9px 14px;
font-size:10px;
border-radius:30px;
}
.industry-pill span{
width:22px;
height:22px;
flex:0 0 22px;
font-size:8px;
}
.industry-01{
top:7%;
left:28%;
}
.industry-02{
top:7%;
left:54%;
}
.industry-03{
top:15%;
right:7%;
}
.industry-15{
top:19%;
left:8%;
}
.industry-16{
top:23%;
right:13%;
}
.industry-04{
top:31%;
left:2%;
}
.industry-05{
top:31%;
right:2%;
}
.industry-06{
top:45%;
left:0;
}
.industry-07{
top:45%;
right:0;
}
.industry-08{
top:59%;
left:5%;
}
.industry-13{
top:59%;
right:5%;
}
.industry-09{
top:70%;
left:20%;
}
.industry-10{
top:70%;
right:20%;
}
.industry-14{
bottom:9%;
left:9%;
}
.industry-12{
bottom:9%;
right:9%;
}
.industry-11{
bottom:2%;
left:33%;
}
.industry-17{
bottom:2%;
right:33%;
}
.industries-statement{
max-width:700px;
margin-top:35px;
padding:28px 32px;
}
.industries-statement p{
font-size:20px;
}
}
@media(max-width:767px){
.industries-intro{
margin-bottom:45px;
}
.industries-intro h2{
font-size:46px;
}
.industries-intro p{
font-size:15px;
line-height:1.8;
}
.industries-network{
height:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
padding:0;
margin:0;
}
.industries-network::before,
.industries-network::after{
display:none;
}
.industries-center{
position:relative;
top:auto;
left:auto;
transform:none;
grid-column:1 / -1;
width:230px;
height:230px;
margin:0 auto 25px;
}
.industries-center::before,
.industries-center::after{
display:none;
}
.industries-center h3{
font-size:29px;
}
.industries-center-small{
font-size:8px;
}
.industry-pill{
position:relative;
top:auto!important;
right:auto!important;
bottom:auto!important;
left:auto!important;
width:100%;
min-height:60px;
padding:10px;
white-space:normal;
border-radius:4px;
font-size:11px;
line-height:1.35;
}
.industry-pill span{
width:22px;
height:22px;
flex-basis:22px;
}
.industries-statement{
margin-top:35px;
padding:30px 25px;
}
.industries-statement p{
padding-left:5px;
font-size:20px;
line-height:1.45;
}
.industries-quote-mark{
left:20px;
}
}
@media(max-width:480px){
.industries-intro h2{
font-size:40px;
}
.industries-intro p{
font-size:14px;
}
.industry-pill{
font-size:10px;
min-height:58px;
}
.industries-statement{
padding:28px 20px;
}
.industries-statement p{
font-size:19px;
}
}

/* =========================================================
CATEGORY
\========================================================= */

.dvs-blog-category {
position: absolute;

left: 18px;

bottom: 18px;

display: inline-flex;

align-items: center;

padding: 7px 13px;

background: #ea6d0e;

color: #fff;

border-radius: 30px;

font-family: var(--heading-font);

font-size: 10px;

font-weight: 700;

letter-spacing: 0.04em;

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
}

/* =========================================================
BLOG CONTENT
\========================================================= */

.dvs-blog-content {
display: flex;

flex-direction: column;

flex: 1;

padding: 25px 25px 28px;
}

/* =========================================================
META
\========================================================= */

.dvs-blog-meta {
margin-bottom: 13px;
}

.dvs-blog-meta span {
display: inline-flex;

align-items: center;

gap: 7px;

color: #777;

font-family: var(--heading-font);

font-size: 11px;

font-weight: 500;
}

.dvs-blog-meta i {
color: #ea6d0e;

font-size: 11px;
}

/* =========================================================
TITLE
\========================================================= */

.dvs-blog-content h3 {
margin: 0 0 14px;

font-family: var(--heading-font);

font-size: 19px;

font-weight: 700;

line-height: 1.4;
}

.dvs-blog-content h3 a {
color: #171717;

text-decoration: none;

transition: color 0.3s ease;
}

.dvs-blog-card:hover .dvs-blog-content h3 a {
color: #ea6d0e;
}

/* =========================================================
DESCRIPTION
\========================================================= */

.dvs-blog-content p {
margin: 0 0 20px;

color: #707070;

font-family: var(--body-font, inherit);

font-size: 13px;

line-height: 1.75;
}

/* =========================================================
READ MORE
\========================================================= */

.dvs-blog-link {
display: inline-flex;

align-items: center;

gap: 9px;

margin-top: auto;

width: fit-content;

color: #ea6d0e;

font-family: var(--heading-font);

font-size: 11px;

font-weight: 700;

text-decoration: none;
}

.dvs-blog-link i {
font-size: 10px;

transition: transform 0.3s ease;
}

.dvs-blog-card:hover .dvs-blog-link i {
transform: translateX(5px);
}

/* =========================================================
TABLET
\========================================================= */

@media (max-width: 1100px) {
.dvs-blog-grid {
grid-template-columns: repeat(2, 1fr);
}

.dvs-blog-image {
height: 250px;
}
}

/* =========================================================
SMALL TABLET
\========================================================= */

@media (max-width: 768px) {
.dvs-blog-section {
padding: 75px 0 85px;
}

.dvs-blog-heading-row {
align-items: flex-start;
flex-direction: column;

margin-bottom: 40px;
}

.dvs-blog-view-btn {
padding: 13px 20px;
}

.dvs-blog-grid {
gap: 20px;
}
}

/* =========================================================
MOBILE
\========================================================= */

@media (max-width: 600px) {
.dvs-blog-heading-row {
margin-bottom: 32px;
gap: 25px;
}

.dvs-blog-grid {
grid-template-columns: 1fr;
gap: 22px;
}

.dvs-blog-image {
height: 230px;
}

.dvs-blog-content {
padding: 23px;
}

.dvs-blog-content h3 {
font-size: 18px;
}
}

/* =========================================================
SMALL MOBILE
\========================================================= */

@media (max-width: 400px) {
.dvs-blog-image {
height: 200px;
}

.dvs-blog-content {
padding: 20px;
}
}


/* =========================================================
CLIENT SATISFACTION
========================================================= */
.about-client-section {
position:relative;
background:#fffaf6;
overflow:hidden;
}
.about-client-section::before {
content:"";
position:absolute;
top:-180px;
right:-180px;
width:430px;
height:430px;
border-radius:50%;
background:rgba(246,122,33,.06);
pointer-events:none;
}
.about-client-section::after {
content:"";
position:absolute;
bottom:-220px;
left:-220px;
width:480px;
height:480px;
border-radius:50%;
background:rgba(216,120,59,.045);
pointer-events:none;
}
.client-satisfaction-layout {
position:relative;
z-index:1;
display:grid;
grid-template-columns:minmax(350px,.8fr) minmax(520px,1.2fr);
gap:90px;
align-items:center;
}
.client-satisfaction-intro {
position:relative;
}
.client-satisfaction-intro .about-eyebrow {
margin-bottom:25px;
}
.client-satisfaction-intro h2 {
margin:0;
font-family:"Manrope",sans-serif;
font-size:clamp(52px,5.5vw,76px);
line-height:.96;
font-weight:800;
letter-spacing:-.06em;
color:#c84f21;
}
.client-satisfaction-intro h2 span {
display:block;
background:linear-gradient(90deg,#d8783b,#f67a21);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
.client-satisfaction-intro>p {
max-width:480px;
margin:32px 0 0;
font-size:16px;
line-height:1.85;
color:#c66a3b;
}
.client-satisfaction-mark {
display:flex;
align-items:center;
gap:22px;
width:fit-content;
margin-top:42px;
padding:18px 25px;
border-left:3px solid #f67a21;
background:#fff3e9;
}
.client-satisfaction-mark span {
font-family:"Manrope",sans-serif;
font-size:28px;
font-weight:800;
color:#f67a21;
}
.client-satisfaction-mark strong {
font-family:"Manrope",sans-serif;
font-size:16px;
line-height:1.3;
color:#c84f21;
}
.client-satisfaction-content {
position:relative;
padding-left:35px;
}
.client-satisfaction-line {
position:absolute;
top:24px;
bottom:95px;
left:4px;
width:1px;
background:linear-gradient(180deg,#f67a21,rgba(216,120,59,.15));
}
.client-satisfaction-item {
position:relative;
display:flex;
align-items:center;
gap:25px;
min-height:105px;
margin-bottom:14px;
padding:20px 25px;
border:1px solid rgba(216,120,59,.2);
border-radius:16px;
background:#fff;
transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease,background .3s ease;
}
.client-satisfaction-item:hover {
transform:translateX(8px);
border-color:rgba(246,122,33,.5);
background:#fff8f2;
box-shadow:0 15px 35px rgba(216,120,59,.1);
}
.client-satisfaction-dot {
position:absolute;
left:-36px;
width:10px;
height:10px;
border-radius:50%;
background:#e9b18e;
box-shadow:0 0 0 5px #fffaf6;
transition:background .3s ease,box-shadow .3s ease,transform .3s ease;
}
.client-satisfaction-item:hover .client-satisfaction-dot {
background:#f67a21;
transform:scale(1.2);
box-shadow:0 0 0 5px #fffaf6,0 0 14px rgba(246,122,33,.55);
}
.client-satisfaction-text {
display:flex;
align-items:flex-start;
gap:22px;
}
.client-satisfaction-text>span {
flex:0 0 auto;
padding-top:4px;
font-family:"Manrope",sans-serif;
font-size:11px;
font-weight:700;
letter-spacing:.12em;
color:#e49a70;
}
.client-satisfaction-text p {
margin:0;
font-size:15px;
line-height:1.7;
color:#c15d2e;
transition:color .3s ease;
}
.client-satisfaction-item:hover .client-satisfaction-text p {
color:#a9431d;
}
.client-satisfaction-bottom {
display:flex;
align-items:center;
justify-content:space-between;
gap:25px;
margin-top:30px;
padding:24px 5px 0;
border-top:1px solid rgba(216,120,59,.2);
}
.client-satisfaction-bottom span {
font-size:9px;
font-weight:700;
letter-spacing:.28em;
color:#e49a70;
}
.client-satisfaction-bottom strong {
font-family:"Manrope",sans-serif;
font-size:15px;
color:#d8783b;
}
/* =========================================================
LAPTOP
========================================================= */
@media (min-width:992px) and (max-width:1199.98px) {
.client-satisfaction-layout {
grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
gap:clamp(2.5rem,5vw,4.5rem);
}
.client-satisfaction-intro h2 {
font-size:clamp(48px,5.5vw,68px);
}
.client-satisfaction-intro>p {
font-size:15px;
}
.client-satisfaction-item {
padding:18px 20px;
}
.client-satisfaction-text {
gap:16px;
}
.client-satisfaction-text p {
font-size:14px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width:991px) {
.client-satisfaction-layout {
grid-template-columns:1fr;
gap:60px;
}
.client-satisfaction-intro {
max-width:700px;
}
.client-satisfaction-content {
max-width:750px;
width:100%;
}
.client-satisfaction-intro h2 {
font-size:clamp(48px,7vw,68px);
}
.client-satisfaction-intro>p {
max-width:650px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width:767px) {
.client-satisfaction-layout {
gap:45px;
}
.client-satisfaction-intro h2 {
font-size:48px;
line-height:.98;
}
.client-satisfaction-intro>p {
font-size:15px;
line-height:1.75;
}
.client-satisfaction-mark {
gap:18px;
margin-top:32px;
padding:16px 20px;
}
.client-satisfaction-mark span {
font-size:25px;
}
.client-satisfaction-mark strong {
font-size:15px;
}
.client-satisfaction-content {
padding-left:25px;
}
.client-satisfaction-line {
left:3px;
top:20px;
bottom:85px;
}
.client-satisfaction-dot {
left:-28px;
width:9px;
height:9px;
}
.client-satisfaction-item {
min-height:auto;
margin-bottom:12px;
padding:22px 20px;
}
.client-satisfaction-item:hover {
transform:none;
}
.client-satisfaction-text {
gap:14px;
}
.client-satisfaction-text>span {
font-size:10px;
}
.client-satisfaction-text p {
font-size:14px;
line-height:1.7;
}
.client-satisfaction-bottom {
align-items:flex-start;
flex-direction:column;
gap:8px;
margin-top:25px;
padding:20px 0 0;
}
.client-satisfaction-bottom span {
font-size:8px;
letter-spacing:.22em;
}
.client-satisfaction-bottom strong {
font-size:14px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width:480px) {
.client-satisfaction-layout {
gap:38px;
}
.client-satisfaction-intro h2 {
font-size:42px;
}
.client-satisfaction-intro>p {
font-size:14px;
line-height:1.75;
}
.client-satisfaction-mark {
gap:15px;
margin-top:28px;
padding:15px 17px;
}
.client-satisfaction-mark span {
font-size:23px;
}
.client-satisfaction-mark strong {
font-size:14px;
}
.client-satisfaction-content {
padding-left:22px;
}
.client-satisfaction-line {
left:2px;
}
.client-satisfaction-dot {
left:-25px;
width:8px;
height:8px;
}
.client-satisfaction-item {
padding:18px 16px;
}
.client-satisfaction-text {
gap:11px;
}
.client-satisfaction-text p {
font-size:13px;
line-height:1.7;
}
.client-satisfaction-bottom {
margin-top:20px;
padding-top:18px;
}
.client-satisfaction-bottom span {
font-size:7px;
}
.client-satisfaction-bottom strong {
font-size:13px;
}
}