/* =========================================================
BLOG PAGE
========================================================= */
.dvs-blog-page{
background:#fff;
color:#171717;
overflow:hidden;
}
.dvs-blog-page a{
text-decoration:none;
}
/* BLOG SECTION SPACING */
.dvs-blog-list-section,
.dvs-blog-cta{
padding:var(--dvs-section-padding) 0;
}
/* =========================================================
BLOG HERO
========================================================= */
.dvs-blog-hero{
position:relative;
background:#171717;
color:#fff;
padding: 206px 0 110px;
overflow:hidden;
}
.dvs-blog-hero-grid{
position:absolute;
inset:0;
background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
background-size:80px 80px;
opacity:.7;
}
.dvs-blog-hero-grid:after{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at 80% 30%,rgba(238,121,31,.14),transparent 32%);
}
.dvs-blog-hero .container{
position:relative;
z-index:2;
}
.dvs-blog-hero-content{
max-width:900px;
}
.dvs-blog-hero-content .dvs-section-eyebrow{
display:flex;
align-items:center;
gap:14px;
color:#ee791f;
font-size:10px;
font-weight:700;
letter-spacing:2.5px;
text-transform:uppercase;
}
.dvs-blog-hero-content .dvs-section-eyebrow:before{
content:"";
width:48px;
height:1px;
background:#ee791f;
}
.dvs-blog-hero h1{
font-family:"Manrope",sans-serif;
font-size:clamp(55px,8vw,105px);
line-height:.92;
letter-spacing:-5px;
margin:25px 0 30px;
font-weight:700;
}
.dvs-blog-hero h1 span{
color:#ee791f;
}
.dvs-blog-hero-content p{
max-width:600px;
color:#777;
font-size:15px;
line-height:1.8;
margin:0;
}
.dvs-blog-hero-number{
position:absolute;
right:20px;
bottom:-35px;
font-family:"Manrope",sans-serif;
font-size:180px;
line-height:1;
font-weight:700;
color:rgba(255,255,255,.035);
pointer-events:none;
}
/* =========================================================
BLOG LIST
========================================================= */
.dvs-blog-heading-row{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:80px;
margin-bottom:55px;
}
.dvs-blog-heading .dvs-section-eyebrow{
display:block;
color:#ee791f;
font-size:10px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:18px;
}
.dvs-blog-heading .dvs-section-title{
max-width:700px;
margin:0;
}
.dvs-blog-heading .dvs-section-title span{
color:#ee791f;
}
.dvs-blog-heading-text{
max-width:430px;
}
.dvs-blog-heading-text p{
color:#777;
font-size:14px;
line-height:1.8;
margin:0;
}
.dvs-blog-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}
.dvs-blog-card{
background:#171717;
color:#fff;
overflow:hidden;
transition:transform .5s ease,box-shadow .5s ease;
}
.dvs-blog-card:hover{
transform:translateY(-10px);
box-shadow:0 25px 60px rgba(0,0,0,.2);
}
.dvs-blog-image{
height:300px;
display:block;
position:relative;
overflow:hidden;
text-decoration:none;
background:#222;
}
.dvs-blog-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .6s ease;
}
.dvs-blog-card:hover .dvs-blog-image img{
transform:scale(1.08);
filter:brightness(.8);
}
.dvs-blog-image-overlay{
position:absolute;
inset:0;
background:linear-gradient(to bottom,rgba(0,0,0,.08),transparent 42%,rgba(0,0,0,.82));
pointer-events:none;
}
.dvs-blog-number{
position:absolute;
top:25px;
right:24px;
color:#ee791f;
font-size:9px;
font-weight:700;
letter-spacing:1.5px;
z-index:2;
}
.dvs-blog-category{
position:absolute;
left:25px;
bottom:24px;
color:#fff;
font-size:9px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
z-index:2;
}
.dvs-blog-open{
position:absolute;
right:22px;
bottom:18px;
width:44px;
height:44px;
border:1px solid rgba(255,255,255,.25);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#ee791f;
z-index:2;
transition:.4s ease;
}
.dvs-blog-open i{
font-size:13px;
transition:transform .4s ease;
}
.dvs-blog-card:hover .dvs-blog-open{
background:#ee791f;
border-color:#ee791f;
color:#fff;
}
.dvs-blog-card:hover .dvs-blog-open i{
transform:rotate(45deg);
}
.dvs-blog-content{
padding:27px 28px 25px;
min-height:310px;
display:flex;
flex-direction:column;
}
.dvs-blog-meta{
display:flex;
justify-content:space-between;
align-items:center;
color:#777;
font-size:8px;
letter-spacing:1.4px;
text-transform:uppercase;
margin-bottom:27px;
}
.dvs-blog-meta span:first-child{
color:#999;
}
.dvs-blog-meta i{
color:#ee791f;
margin-right:7px;
}
.dvs-blog-title-row{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:15px;
}
.dvs-blog-title-row h3{
font-family:"Manrope",sans-serif;
font-size:25px;
line-height:1.15;
letter-spacing:-.8px;
margin:0;
}
.dvs-blog-title-row h3 a{
color:#fff;
text-decoration:none;
transition:.3s;
}
.dvs-blog-title-row h3 a:hover{
color:#ee791f;
}
.dvs-blog-index{
color:#ee791f;
font-size:8px;
font-weight:700;
letter-spacing:1px;
white-space:nowrap;
margin-top:5px;
}
.dvs-blog-content>p{
color:#777;
font-size:12px;
line-height:1.75;
margin:20px 0 25px;
}
.dvs-blog-footer{
display:flex;
align-items:center;
gap:15px;
margin-top:auto;
border-top:1px solid #333;
padding-top:20px;
}
.dvs-blog-read-more{
color:#fff;
text-decoration:none;
font-size:8px;
font-weight:700;
letter-spacing:1.7px;
text-transform:uppercase;
white-space:nowrap;
}
.dvs-blog-read-more i{
color:#ee791f;
margin-left:8px;
transition:transform .35s ease;
}
.dvs-blog-read-more:hover{
color:#fff;
}
.dvs-blog-read-more:hover i{
transform:translateX(6px);
}
.dvs-blog-line{
height:1px;
flex:1;
background:#333;
}
/* =========================================================
BLOG CTA
========================================================= */
.dvs-blog-cta{
background:#171717;
color:#fff;
}
.dvs-blog-cta-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:50px;
}
.dvs-blog-cta-inner .dvs-section-eyebrow{
display:block;
color:#ee791f;
font-size:10px;
font-weight:700;
letter-spacing:2px;
margin-bottom:18px;
}
.dvs-blog-cta-inner h2{
font-family:"Manrope",sans-serif;
font-size:clamp(45px,5vw,70px);
line-height:.95;
letter-spacing:-3px;
margin:0;
}
.dvs-blog-cta-inner h2 span{
color:#ee791f;
}
.dvs-blog-cta-inner>a{
display:inline-flex;
align-items:center;
gap:15px;
background:#ee791f;
color:#fff;
padding:18px 24px;
text-decoration:none;
font-size:9px;
font-weight:700;
letter-spacing:1.5px;
text-transform:uppercase;
transition:.35s;
}
.dvs-blog-cta-inner>a:hover{
background:#fff;
color:#171717;
transform:translateY(-3px);
}
/* =========================================================
BLOG DETAIL PAGE
========================================================= */
.dvs-blog-detail-page{
background:#fff;
color:#171717;
overflow:hidden;
}
/* BLOG DETAIL SECTION SPACING */
.dvs-blog-article-section,
.dvs-blog-related{
padding:var(--dvs-section-padding) 0;
}
/* =========================================================
BLOG DETAIL HERO
========================================================= */
.dvs-blog-detail-hero{
background:#171717;
color:#fff;
padding:140px 0 100px;
}
.dvs-blog-back{
display:inline-flex;
align-items:center;
gap:10px;
color:#777;
text-decoration:none;
font-size:9px;
font-weight:700;
letter-spacing:1.5px;
text-transform:uppercase;
margin-bottom:60px;
transition:.3s;
}
.dvs-blog-back:hover{
color:#ee791f;
transform:translateX(-4px);
}
.dvs-blog-detail-grid{
display:grid;
grid-template-columns:1fr .8fr;
gap:80px;
align-items:center;
}
.dvs-blog-detail-copy .dvs-section-eyebrow{
display:block;
color:#ee791f;
font-size:10px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:20px;
}
.dvs-blog-detail-copy h1{
font-family:"Manrope",sans-serif;
font-size:clamp(45px,6vw,78px);
line-height:.98;
letter-spacing:-4px;
margin:0 0 28px;
}
.dvs-blog-detail-copy>p{
max-width:680px;
color:#777;
font-size:15px;
line-height:1.85;
margin:0;
}
.dvs-blog-detail-meta{
display:flex;
gap:30px;
margin-top:30px;
color:#777;
font-size:9px;
letter-spacing:1px;
text-transform:uppercase;
}
.dvs-blog-detail-meta i{
color:#ee791f;
margin-right:7px;
}
.dvs-blog-detail-image{
height:500px;
position:relative;
overflow:hidden;
}
.dvs-blog-detail-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .9s ease;
}
.dvs-blog-detail-image:hover img{
transform:scale(1.05);
}
.dvs-blog-detail-image:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to bottom,transparent 45%,rgba(0,0,0,.75));
}
.dvs-blog-detail-image span{
position:absolute;
left:25px;
bottom:23px;
color:#fff;
font-size:9px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
z-index:2;
}
/* =========================================================
BLOG ARTICLE
========================================================= */
.dvs-blog-article{
max-width:950px;
margin:auto;
}
.dvs-blog-article-intro>span{
display:block;
color:#ee791f;
font-size:9px;
font-weight:700;
letter-spacing:2px;
margin-bottom:20px;
}
.dvs-blog-article-intro h2{
font-family:"Manrope",sans-serif;
font-size:clamp(36px,5vw,58px);
line-height:1.05;
letter-spacing:-2.5px;
margin:0 0 25px;
}
.dvs-blog-article-intro>p{
color:#666;
font-size:17px;
line-height:1.9;
margin:0 0 65px;
}
.dvs-blog-article-block{
display:grid;
grid-template-columns:70px 1fr;
gap:30px;
border-top:1px solid #ddd;
padding:50px 0;
}
.dvs-blog-article-number{
color:#ee791f;
font-size:10px;
font-weight:700;
letter-spacing:1px;
}
.dvs-blog-article-body h3{
font-family:"Manrope",sans-serif;
font-size:30px;
letter-spacing:-1px;
margin:0 0 20px;
}
.dvs-blog-article-body p{
color:#666;
font-size:15px;
line-height:1.9;
margin:0 0 18px;
}
.dvs-blog-article-body ul{
list-style:none;
padding:0;
margin:25px 0 0;
}
.dvs-blog-article-body li{
display:flex;
gap:12px;
border-bottom:1px solid #e5e5e5;
padding:12px 0;
color:#444;
font-size:13px;
}
.dvs-blog-article-body li i{
color:#ee791f;
margin-top:4px;
}
.dvs-blog-article-enquiry{
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
background:#171717;
color:#fff;
padding:45px;
margin-top:30px;
}
.dvs-blog-article-enquiry .dvs-section-eyebrow{
display:block;
color:#ee791f;
font-size:9px;
font-weight:700;
letter-spacing:2px;
margin-bottom:14px;
}
.dvs-blog-article-enquiry h3{
font-family:"Manrope",sans-serif;
font-size:30px;
letter-spacing:-1px;
margin:0 0 10px;
}
.dvs-blog-article-enquiry p{
color:#777;
font-size:12px;
margin:0;
}
.dvs-blog-article-enquiry>a{
display:inline-flex;
align-items:center;
gap:12px;
flex-shrink:0;
background:#ee791f;
color:#fff;
padding:16px 22px;
text-decoration:none;
font-size:9px;
font-weight:700;
letter-spacing:1.4px;
text-transform:uppercase;
}
/* =========================================================
RELATED BLOGS
========================================================= */
.dvs-blog-related{
background:#f4f4f2;
}
.dvs-blog-related-heading{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:40px;
margin-bottom:50px;
}
.dvs-blog-related-heading .dvs-section-eyebrow{
display:block;
color:#ee791f;
font-size:9px;
font-weight:700;
letter-spacing:2px;
margin-bottom:15px;
}
.dvs-blog-related-heading h2{
font-family:"Manrope",sans-serif;
font-size:clamp(40px,5vw,62px);
line-height:1;
letter-spacing:-2.5px;
margin:0;
}
.dvs-blog-related-heading h2 span{
color:#ee791f;
}
.dvs-blog-related-heading>a{
color:#171717;
text-decoration:none;
font-size:9px;
font-weight:700;
letter-spacing:1.4px;
text-transform:uppercase;
}
.dvs-blog-related-heading>a i{
color:#ee791f;
margin-left:8px;
}
/* =========================================================
LAPTOP
========================================================= */
@media(max-width:1100px){
.dvs-blog-grid{
grid-template-columns:repeat(2,1fr);
}
.dvs-blog-detail-grid{
grid-template-columns:1fr;
gap:50px;
}
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:991px){
.dvs-blog-heading-row{
display:block;
}
.dvs-blog-heading-text{
margin-top:25px;
}
.dvs-blog-cta-inner{
display:block;
}
.dvs-blog-cta-inner>a{
margin-top:30px;
}
.dvs-blog-detail-image{
height:450px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:767px){
.dvs-blog-grid{
grid-template-columns:1fr;
}
.dvs-blog-hero{
padding:125px 0 90px;
}
.dvs-blog-hero h1{
font-size:55px;
letter-spacing:-3px;
}
.dvs-blog-hero-number{
font-size:120px;
}
.dvs-blog-image{
height:330px;
}

.dvs-blog-detail-copy h1{
font-size:45px;
letter-spacing:-2px;
}
.dvs-blog-detail-image{
height:350px;
}
.dvs-blog-article-block{
grid-template-columns:1fr;
gap:12px;
padding:40px 0;
}
.dvs-blog-article-enquiry{
display:block;
padding:30px 25px;
}
.dvs-blog-article-enquiry>a{
margin-top:25px;
}
.dvs-blog-related-heading{
display:block;
}
.dvs-blog-related-heading>a{
display:inline-block;
margin-top:20px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:575px){
.dvs-blog-hero h1{
font-size:45px;
}
.dvs-blog-content{
padding:25px 22px;
}
.dvs-blog-detail-copy h1{
font-size:39px;
}
.dvs-blog-detail-image{
height:300px;
}
.dvs-blog-article-intro h2{
font-size:35px;
}
.dvs-blog-article-intro>p{
font-size:15px;
}
}