/* ========================= */
/* DESIGN STUDIO PAGE */
/* ========================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&display=swap');*{
margin:0;
padding:0;
box-sizing:border-box;
}

/* ========================= */
/* SERVICES SECTION */
/* ========================= */

.cs-services-section{
padding:90px 20px;
background:#081a3a;
}

/* CONTAINER */

.cs-services-heading{
max-width:620px;
margin:0 auto 50px;
text-align:center;
}

/* MINI */

.cs-service-mini{
display:inline-flex;
padding:10px 16px;
border-radius:999px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.06);
font-size:.7rem;
font-weight:700;
color:#f9b17a;
margin-bottom:20px;
}

/* TITLE */

.cs-services-heading h2{
font-family:'Fredoka',sans-serif;
font-size:clamp(2rem,4vw,3.8rem);
line-height:1;
letter-spacing:-1px;
font-weight:600;
color:#fff;
margin-bottom:16px;
}

/* TEXT */

.cs-services-heading p{
font-size:.88rem;
line-height:1.8;
color:rgba(255,255,255,.65);
}

/* GRID */

.cs-services-grid{
max-width:1220px;
margin:auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}

/* CARD */

.cs-service-card{
position:relative;
padding:30px;
border-radius:26px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.06);
backdrop-filter:blur(20px);
overflow:hidden;
transition:.4s ease;
min-height:240px;
display:flex;
justify-content:space-between;
flex-direction:column;
}

/* HOVER */

.cs-service-card:hover{
transform:translateY(-8px);
border-color:rgba(249,177,122,.18);
}

/* ACTIVE */

.active-service{
background:rgba(255,255,255,.07);
}

/* CONTENT */

.cs-service-content h3{
font-size:1.15rem;
font-weight:700;
color:#fff;
margin-bottom:14px;
}

.cs-service-content p{
font-size:.8rem;
line-height:1.8;
color:rgba(255,255,255,.62);
max-width:260px;
}

/* READ MORE */

.cs-read-more{
display:flex;
align-items:center;
gap:12px;
text-decoration:none;
margin-top:24px;
}

/* ICON */

.cs-arrow-icon{
width:42px;
height:42px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.08);
color:#fff;
font-size:.8rem;
transition:.35s ease;
}

/* ACTIVE ICON */

.active-service .cs-arrow-icon{
background:#f9b17a;
color:#081a3a;
}

/* HOVER */

.cs-service-card:hover .cs-arrow-icon{
transform:translateX(4px);
}

/* TEXT */

.cs-read-more span{
font-size:.74rem;
font-weight:600;
color:#fff;
}

/* VISUAL */

.cs-service-visual{
position:absolute;
right:24px;
bottom:22px;
}

/* CIRCLE */

.cs-service-circle{
position:absolute;
width:110px;
height:110px;
border-radius:50%;
background:rgba(255,255,255,.04);
right:-30px;
bottom:-30px;
}

/* ICON */

.cs-service-visual i{
position:relative;
font-size:2rem;
color:#f9b17a;
z-index:3;
}

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

@media(max-width:980px){

.cs-services-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.cs-services-section{
padding:70px 14px;
}

.cs-services-heading{
margin-bottom:34px;
}

.cs-services-heading h2{
font-size:2rem;
line-height:1.1;
}

.cs-services-heading p{
font-size:.8rem;
}

.cs-services-grid{
grid-template-columns:1fr;
gap:14px;
}

.cs-service-card{
padding:22px;
border-radius:22px;
min-height:210px;
}

.cs-service-content h3{
font-size:1rem;
margin-bottom:10px;
}

.cs-service-content p{
font-size:.74rem;
line-height:1.7;
}

.cs-arrow-icon{
width:38px;
height:38px;
border-radius:12px;
font-size:.72rem;
}

.cs-read-more span{
font-size:.68rem;
}

.cs-service-circle{
width:90px;
height:90px;
}

.cs-service-visual i{
font-size:1.6rem;
}

}

/* ========================= */
/* POPUP */
/* ========================= */

.cs-service-popup{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
z-index:99999;

opacity:0;
visibility:hidden;
transition:.4s ease;
}

/* ACTIVE */

.cs-service-popup.active-popup{
opacity:1;
visibility:visible;
}

/* OVERLAY */

.cs-popup-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.45);
backdrop-filter:blur(10px);
}

/* BOX */

.cs-popup-box{
position:relative;
width:92%;
max-width:560px;
padding:34px;
border-radius:30px;

background:
linear-gradient(
135deg,
rgba(255,255,255,.14),
rgba(255,255,255,.04)
);

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

backdrop-filter:blur(30px);

overflow:hidden;

transform:translateY(40px) scale(.95);

transition:.45s ease;
}

/* SHOW */

.active-popup .cs-popup-box{
transform:translateY(0) scale(1);
}

/* LIGHT */

.cs-popup-box::before{
content:"";
position:absolute;
width:260px;
height:260px;
border-radius:50%;

background:rgba(249,177,122,.12);

filter:blur(80px);

right:-100px;
top:-100px;
}

/* CLOSE */

.cs-popup-close{
position:absolute;
top:18px;
right:18px;

width:42px;
height:42px;

border:none;
border-radius:14px;

background:rgba(255,255,255,.08);

color:#fff;

cursor:pointer;

font-size:.9rem;
}

/* TOP */

.cs-popup-top{
display:flex;
align-items:center;
gap:18px;
margin-bottom:24px;
}

/* ICON */

.cs-popup-icon{
width:72px;
height:72px;

border-radius:24px;

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

background:rgba(249,177,122,.14);

color:#f9b17a;

font-size:1.5rem;

flex-shrink:0;
}

/* MINI */

.cs-popup-mini{
display:block;
font-size:.7rem;
font-weight:700;
letter-spacing:1px;
color:#f9b17a;
margin-bottom:6px;
}

/* TITLE */

.cs-popup-top h2{
font-family:'Fredoka',sans-serif;
font-size:2rem;
line-height:1;
font-weight:600;
color:#fff;
}

/* TEXT */

.cs-popup-text{
font-size:.86rem;
line-height:1.9;
color:rgba(255,255,255,.72);
margin-bottom:30px;
}

/* FEATURES */

.cs-popup-features{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:14px;
margin-bottom:30px;
}

/* FEATURE */

.cs-popup-feature{
display:flex;
align-items:center;
gap:10px;

padding:14px;

border-radius:18px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.06);
}

.cs-popup-feature i{
color:#f9b17a;
font-size:.8rem;
}

.cs-popup-feature span{
font-size:.72rem;
font-weight:600;
color:#fff;
}

/* BUTTONS */

.cs-popup-buttons{
display:flex;
gap:14px;
}

/* BTN */

.cs-popup-btn{
flex:1;
height:54px;

border-radius:18px;

display:flex;
align-items:center;
justify-content:center;
gap:10px;

text-decoration:none;

background:#f9b17a;

color:#081a3a;

font-size:.76rem;
font-weight:700;

transition:.35s ease;
}

/* LIGHT */

.light-btn{
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.08);
color:#fff;
}

/* HOVER */

.cs-popup-btn:hover{
transform:translateY(-3px);
}

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

@media(max-width:768px){

.cs-popup-box{
padding:24px 18px;
border-radius:24px;
}

.cs-popup-top{
gap:14px;
margin-bottom:20px;
}

.cs-popup-icon{
width:58px;
height:58px;
border-radius:18px;
font-size:1.1rem;
}

.cs-popup-top h2{
font-size:1.5rem;
}

.cs-popup-text{
font-size:.78rem;
line-height:1.8;
margin-bottom:22px;
}

.cs-popup-features{
grid-template-columns:1fr;
gap:10px;
margin-bottom:22px;
}

.cs-popup-feature{
padding:12px;
border-radius:14px;
}

.cs-popup-feature span{
font-size:.66rem;
}

.cs-popup-buttons{
flex-direction:column;
gap:10px;
}

.cs-popup-btn{
height:48px;
border-radius:14px;
font-size:.7rem;
}

}

/* ========================= */
/* GLASS WORK SECTION */
/* ========================= */

.gw-section{
padding:90px 20px;
overflow:hidden;
}

/* TOP */

.gw-top{
text-align:center;
margin-bottom:40px;
}

/* MINI */

.gw-mini{
display:inline-flex;
padding:10px 16px;
border-radius:999px;

background:rgba(255,255,255,.06);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(20px);

font-size:.68rem;
font-weight:700;
color:#f9b17a;

margin-bottom:18px;
}

/* TITLE */

.gw-top h2{
font-family:'Fredoka',sans-serif;
font-size:clamp(2rem,4vw,3.4rem);
font-weight:600;
line-height:1;
letter-spacing:-1px;
color:#fff;
}

/* WRAP */

.gw-slider-wrap{
max-width:1240px;
margin:auto;

display:flex;
align-items:center;
gap:18px;
}

/* BTN */

.gw-btn{
width:54px;
height:54px;

border:none;
border-radius:18px;

background:rgba(255,255,255,.06);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(20px);

color:#fff;

font-size:.9rem;

cursor:pointer;

transition:.35s ease;

flex-shrink:0;
}

/* HOVER */

.gw-btn:hover{
background:#f9b17a;
color:#081a3a;
transform:translateY(-4px);
}

/* SLIDER */

.gw-slider{
overflow:hidden;
width:100%;
}

/* TRACK */

.gw-track{
display:flex;
gap:22px;
transition:.6s ease;
}

/* CARD */

.gw-card{
min-width:340px;
max-width:340px;

padding:16px;

border-radius:34px;

background:
linear-gradient(
135deg,
rgba(255,255,255,.14),
rgba(255,255,255,.04)
);

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

backdrop-filter:blur(26px);

position:relative;

overflow:hidden;

transition:.45s ease;
}

/* ACTIVE */

.active-card{
transform:translateY(-10px);
}

/* LIGHT */

.gw-card::before{
content:"";
position:absolute;

width:220px;
height:220px;

border-radius:50%;

background:rgba(249,177,122,.12);

filter:blur(80px);

right:-80px;
top:-80px;
}

/* HOVER */

.gw-card:hover{
transform:translateY(-10px) scale(1.02);
}

/* IMAGE */

.gw-image-wrap{
height:260px;
border-radius:26px;
overflow:hidden;
position:relative;
margin-bottom:20px;
}

.gw-image-wrap img{
width:100%;
height:100%;
object-fit:cover;
transition:.6s ease;
}

/* HOVER */

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

/* SAVE */

.gw-save-btn{
position:absolute;
top:14px;
right:14px;

width:46px;
height:46px;

border-radius:16px;

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

background:rgba(0,0,0,.28);

backdrop-filter:blur(14px);

color:#fff;

font-size:.82rem;
}

/* CONTENT */

.gw-content{
position:relative;
z-index:3;
}

/* TAG */

.gw-tag{
display:inline-flex;
padding:9px 14px;
border-radius:999px;

background:rgba(249,177,122,.12);

font-size:.66rem;
font-weight:700;
color:#f9b17a;

margin-bottom:16px;
}

/* TITLE */

.gw-content h3{
font-size:1.08rem;
line-height:1.3;
font-weight:700;
color:#fff;
margin-bottom:12px;
}

/* TEXT */

.gw-content p{
font-size:.76rem;
line-height:1.8;
color:rgba(255,255,255,.68);
margin-bottom:22px;
}

/* STATS */

.gw-stats{
display:flex;
gap:12px;
margin-bottom:22px;
}

/* STAT */

.gw-stat{
flex:1;

padding:14px 10px;

border-radius:18px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.06);

text-align:center;
}

.gw-stat h4{
font-size:1rem;
font-weight:800;
color:#f9b17a;
margin-bottom:4px;
}

.gw-stat span{
font-size:.64rem;
color:rgba(255,255,255,.58);
}

/* BTN */

.gw-project-btn{
height:52px;
border-radius:18px;

display:flex;
align-items:center;
justify-content:center;
gap:10px;

text-decoration:none;

background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(20px);

font-size:.76rem;
font-weight:700;
color:#fff;

transition:.35s ease;
}

/* HOVER */

.gw-project-btn:hover{
background:#f9b17a;
color:#081a3a;
}

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

@media(max-width:768px){

.gw-section{
padding:70px 14px;
}

.gw-top{
margin-bottom:30px;
}

.gw-top h2{
font-size:2rem;
line-height:1.1;
}

.gw-slider-wrap{
gap:10px;
}

.gw-btn{
width:42px;
height:42px;
border-radius:14px;
font-size:.76rem;
}

.gw-card{
min-width:260px;
max-width:260px;
padding:12px;
border-radius:24px;
}

.gw-image-wrap{
height:190px;
border-radius:18px;
margin-bottom:16px;
}

.gw-save-btn{
width:38px;
height:38px;
border-radius:12px;
font-size:.72rem;
}

.gw-tag{
font-size:.58rem;
padding:8px 12px;
margin-bottom:12px;
}

.gw-content h3{
font-size:.86rem;
margin-bottom:8px;
}

.gw-content p{
font-size:.66rem;
line-height:1.7;
margin-bottom:16px;
}

.gw-stats{
gap:8px;
margin-bottom:16px;
}

.gw-stat{
padding:10px 6px;
border-radius:14px;
}

.gw-stat h4{
font-size:.82rem;
}

.gw-stat span{
font-size:.56rem;
}

.gw-project-btn{
height:44px;
border-radius:14px;
font-size:.66rem;
}

}

/* ========================= */
/* OUR PROCESS */
/* ========================= */

.op-process-section{
padding:70px 18px;
overflow:hidden;
position:relative;
}

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

.op-process-heading{
max-width:540px;
margin:0 auto 50px;
text-align:center;
}

.op-mini-tag{
display:inline-flex;
align-items:center;
justify-content:center;

padding:8px 14px;

border-radius:999px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.06);

backdrop-filter:blur(16px);

font-size:.62rem;
font-weight:700;
letter-spacing:.5px;

color:#f9b17a;

margin-bottom:16px;
}

.op-process-heading h2{
font-family:'Fredoka',sans-serif;

font-size:clamp(1.9rem,4vw,2.9rem);

font-weight:600;
line-height:1.05;
letter-spacing:-1px;

color:#fff;

margin-bottom:14px;
}

.op-process-heading p{
font-size:.76rem;
line-height:1.8;
color:rgba(255,255,255,.62);
max-width:430px;
margin:auto;
}

/* ========================= */
/* WRAPPER */
/* ========================= */

.op-process-wrapper{
max-width:860px;
margin:auto;

display:flex;
flex-direction:column;
gap:24px;
}

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

.op-step-card{
display:flex;
align-items:center;
position:relative;
}

.right-card{
justify-content:flex-end;
}

.left-card{
justify-content:flex-start;
}

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

.op-step-number{
width:78px;
height:78px;

border-radius:24px;

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

font-size:1.45rem;
font-weight:800;

color:#fff;

background:
linear-gradient(
135deg,
#2d6da3,
#0f8f96
);

position:relative;
z-index:2;

flex-shrink:0;

box-shadow:
0 10px 28px rgba(0,0,0,.18);

transition:.35s ease;
}

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

.op-step-content{
width:420px;
min-height:88px;

margin-left:-18px;

padding:18px 20px;

border-radius:24px;

display:flex;
align-items:center;
gap:14px;

background:
linear-gradient(
135deg,
rgba(255,255,255,.12),
rgba(255,255,255,.04)
);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(18px);

position:relative;

overflow:hidden;

box-shadow:
0 10px 30px rgba(0,0,0,.12);

transition:.35s ease;
}

/* LEFT FIX */

.left-card .op-step-content{
margin-left:0;
margin-right:-18px;
order:-1;
}

/* LIGHT EFFECT */

.op-step-content::before{
content:"";

position:absolute;

width:180px;
height:180px;

border-radius:50%;

background:rgba(255,255,255,.05);

right:-90px;
bottom:-90px;
}

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

.op-icon-wrap{
width:44px;
height:44px;

border-radius:14px;

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

background:rgba(249,177,122,.12);

color:#f9b17a;

font-size:.88rem;

flex-shrink:0;
}

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

.op-text h3{
font-size:.82rem;
font-weight:700;
color:#fff;
margin-bottom:4px;
}

.op-text p{
font-size:.64rem;
line-height:1.6;
color:rgba(255,255,255,.62);
max-width:220px;
}

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

.op-step-card:hover .op-step-content{
transform:translateY(-4px);
}

.op-step-card:hover .op-step-number{
transform:scale(1.04);
}

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

@media(max-width:1200px){

.op-process-wrapper{
max-width:760px;
}

.op-step-content{
width:380px;
}

}

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

@media(max-width:992px){

.op-process-section{
padding:60px 18px;
}

.op-process-wrapper{
gap:20px;
}

.op-step-number{
width:68px;
height:68px;
font-size:1.2rem;
border-radius:20px;
}

.op-step-content{
width:340px;
padding:16px 18px;
border-radius:22px;
}

.op-icon-wrap{
width:40px;
height:40px;
border-radius:12px;
font-size:.8rem;
}

.op-text h3{
font-size:.76rem;
}

.op-text p{
font-size:.6rem;
max-width:190px;
}

}

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

@media(max-width:768px){

.op-process-section{
padding:55px 14px;
}

.op-process-heading{
margin-bottom:34px;
}

.op-process-heading h2{
font-size:1.9rem;
line-height:1.1;
}

.op-process-heading p{
font-size:.7rem;
line-height:1.7;
}

.op-process-wrapper{
gap:18px;
}

.op-step-card{
flex-direction:column;
align-items:flex-start;
}

.left-card,
.right-card{
justify-content:flex-start;
}

.op-step-number{
width:56px;
height:56px;

border-radius:18px;

font-size:1rem;

margin-left:10px;
margin-bottom:-12px;
}

.op-step-content{
width:100%;

margin:0 !important;

padding:16px 14px;

border-radius:18px;

gap:12px;
}

.op-icon-wrap{
width:38px;
height:38px;

border-radius:12px;

font-size:.72rem;
}

.op-text h3{
font-size:.72rem;
margin-bottom:4px;
}

.op-text p{
font-size:.58rem;
line-height:1.5;
max-width:100%;
}

}

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

@media(max-width:480px){

.op-process-heading h2{
font-size:1.6rem;
}

.op-process-heading p{
font-size:.64rem;
}

.op-step-number{
width:50px;
height:50px;
font-size:.9rem;
}

.op-step-content{
padding:14px 12px;
}

.op-icon-wrap{
width:34px;
height:34px;
font-size:.66rem;
}

.op-text h3{
font-size:.68rem;
}

.op-text p{
font-size:.54rem;
}

}

/* ========================= */
/* TESTIMONIAL SLIDER */
/* ========================= */

.fts-section{
padding:80px 18px;
overflow:hidden;
}

/* TOP */

.fts-top{
text-align:center;
margin-bottom:34px;
}

.fts-mini{
display:inline-flex;
padding:8px 14px;

border-radius:999px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.06);

backdrop-filter:blur(16px);

font-size:.62rem;
font-weight:700;
letter-spacing:.5px;

color:#f9b17a;

margin-bottom:16px;
}

.fts-top h2{
font-family:'Fredoka',sans-serif;

font-size:clamp(1.8rem,4vw,2.8rem);

font-weight:600;
line-height:1.05;
letter-spacing:-1px;

color:#fff;
}

/* SLIDER BOX */

.fts-slider-box{
max-width:880px;
margin:auto;

position:relative;

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

/* BUTTON */

.fts-btn{
width:44px;
height:44px;

border:none;
border-radius:16px;

background:rgba(255,255,255,.06);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(18px);

color:#fff;

font-size:.8rem;

cursor:pointer;

transition:.35s ease;

flex-shrink:0;
}

.fts-btn:hover{
background:#f9b17a;
color:#081a3a;
transform:translateY(-4px);
}

/* FLOAT */

.fts-floating-icon{
position:absolute;

top:-18px;
right:70px;

width:46px;
height:46px;

border-radius:18px;

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

background:
linear-gradient(
135deg,
rgba(249,177,122,.22),
rgba(255,255,255,.06)
);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(20px);

color:#f9b17a;

font-size:1rem;

z-index:5;

animation:floatHeart 3s ease-in-out infinite;
}

/* FLOAT ANIMATION */

@keyframes floatHeart{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-8px);
}

100%{
transform:translateY(0);
}

}

/* SLIDER */

.fts-slider{
overflow:hidden;
width:100%;
}

/* TRACK */

.fts-track{
display:flex;
transition:.6s ease;
}

/* CARD */

.fts-card{
min-width:100%;

padding:28px;

border-radius:32px;

background:
linear-gradient(
135deg,
rgba(255,255,255,.13),
rgba(255,255,255,.04)
);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(24px);

position:relative;

overflow:hidden;
}

/* LIGHT */

.fts-card::before{
content:"";

position:absolute;

width:220px;
height:220px;

border-radius:50%;

background:rgba(249,177,122,.08);

filter:blur(70px);

right:-80px;
top:-80px;
}

/* USER */

.fts-user{
display:flex;
align-items:center;
gap:16px;
margin-bottom:20px;
position:relative;
z-index:2;
}

/* AVATAR */

.fts-avatar{
width:58px;
height:58px;

border-radius:20px;

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

background:rgba(249,177,122,.12);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(16px);

color:#f9b17a;

font-size:1.1rem;

flex-shrink:0;
}

/* NAME */

.fts-user h3{
font-size:.95rem;
font-weight:700;
color:#fff;
margin-bottom:4px;
}

/* COUNTRY */

.fts-user span{
font-size:.68rem;
color:#f9b17a;
}

/* TEXT */

.fts-card p{
font-size:.8rem;
line-height:1.9;
color:rgba(255,255,255,.68);

margin-bottom:24px;

max-width:540px;

position:relative;
z-index:2;
}

/* BOTTOM */

.fts-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;

position:relative;
z-index:2;
}

/* STARS */

.fts-stars{
display:flex;
gap:6px;
}

.fts-stars i{
font-size:.72rem;
color:#f9b17a;
}

/* PROJECT */

.fts-project{
padding:10px 14px;

border-radius:999px;

background:rgba(255,255,255,.06);

border:1px solid rgba(255,255,255,.06);

font-size:.64rem;
font-weight:700;

color:#fff;
}

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

@media(max-width:768px){

.fts-section{
padding:65px 14px;
}

.fts-top{
margin-bottom:26px;
}

.fts-top h2{
font-size:1.9rem;
line-height:1.1;
}

.fts-slider-box{
gap:8px;
}

.fts-btn{
width:38px;
height:38px;
border-radius:12px;
font-size:.7rem;
}

.fts-floating-icon{
width:38px;
height:38px;
border-radius:14px;
font-size:.8rem;
right:54px;
top:-14px;
}

.fts-card{
padding:20px;
border-radius:24px;
}

.fts-user{
gap:12px;
margin-bottom:16px;
}

.fts-avatar{
width:48px;
height:48px;
border-radius:16px;
font-size:.9rem;
}

.fts-user h3{
font-size:.82rem;
}

.fts-user span{
font-size:.6rem;
}

.fts-card p{
font-size:.68rem;
line-height:1.8;
margin-bottom:18px;
}

.fts-bottom{
flex-wrap:wrap;
gap:12px;
}

.fts-project{
font-size:.58rem;
padding:8px 12px;
}

}

/* ===== DESIGN STUDIO HERO (light, reference style) ===== */
body{ background:var(--cream) !important; font-family:var(--font-body) !important; }

.dh-hero{ position:relative; padding:140px 24px 70px; overflow:hidden; background:var(--cream); }
.dh-blob{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; pointer-events:none; }
.dh-blob-1{ width:460px; height:460px; background:var(--green-100); top:-140px; left:-120px; }
.dh-blob-2{ width:380px; height:380px; background:#FBE2C4; top:60px; right:-140px; }

.dh-top{ position:relative; z-index:2; max-width:640px; margin:0 auto 46px; text-align:center; }
.dh-badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-size:.72rem; font-weight:600; color:var(--green-600); letter-spacing:.06em; text-transform:uppercase; }
.dh-badge i{ color:var(--amber); }
.dh-title{ font-size:clamp(2.2rem,4.6vw,3.6rem); line-height:1.15; letter-spacing:.03em; margin:20px 0 14px; }
.dh-title span{ color:var(--amber); }
.dh-sub{ font-size:.98rem; line-height:1.8; color:var(--muted); }

.dh-stage{ position:relative; z-index:2; max-width:1240px; margin:auto; display:grid; grid-template-columns:1fr minmax(0,520px) 1fr; gap:52px; align-items:center; }
.dh-side{ display:flex; flex-direction:column; gap:16px; }
.dh-left{ align-items:flex-start; }
.dh-right{ align-items:flex-end; text-align:right; }

.dh-avatars{ display:flex; align-items:center; }
.dh-av{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-head); font-weight:700; font-size:.8rem; color:#fff; background:linear-gradient(135deg,var(--green-600),#2E4A23); border:2px solid var(--surface); margin-left:-10px; }
.dh-av:first-child{ margin-left:0; }
.dh-av:nth-child(2){ background:linear-gradient(135deg,var(--amber),#FFCB7D); color:#3a2410; }
.dh-av:nth-child(3){ background:linear-gradient(135deg,#A3C45C,var(--green-600)); }
.dh-avatars small{ margin-left:12px; font-size:.7rem; color:var(--muted); font-weight:600; }

.dh-quote{ max-width:230px; padding:18px; border-radius:20px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-soft); animation:dhFloat 6s ease-in-out infinite; }
.dh-quote i{ color:var(--amber); font-size:.9rem; margin-bottom:8px; display:block; }
.dh-quote p{ font-size:.8rem; line-height:1.6; color:var(--ink); margin-bottom:10px; }
.dh-quote b{ font-size:.7rem; color:var(--green-600); font-weight:600; }
.dh-link{ display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:600; color:var(--green-900); }
.dh-link i{ color:var(--amber); transition:.3s; }
.dh-link:hover i{ transform:translateX(4px); }

.dh-center{ position:relative; }
.dh-card{ position:relative; aspect-ratio:1 / 1; border-radius:30px; overflow:hidden; background:var(--green-100); box-shadow:0 36px 80px -34px rgba(46,74,35,.55); border:6px solid var(--surface); }
.dh-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.dh-live{ position:absolute; top:16px; right:16px; display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px; background:var(--amber); color:#3a2410; font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.dh-tools{ position:absolute; left:50%; bottom:-30px; transform:translateX(-50%); display:flex; gap:10px; padding:8px 12px; border-radius:999px; background:rgba(30,45,28,.75); backdrop-filter:blur(12px); z-index:4; box-shadow:0 14px 30px -14px rgba(0,0,0,.5); }
.dh-tools span{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#fff; background:rgba(255,255,255,.14); font-size:.85rem; transition:.3s; }
.dh-tools span.main{ background:var(--amber); color:#3a2410; }
.dh-tools span:hover{ transform:translateY(-3px); background:var(--amber); color:#3a2410; }

.dh-float{ position:absolute; display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:14px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-soft); font-size:.74rem; font-weight:600; color:var(--green-900); animation:dhFloat 5s ease-in-out infinite; z-index:3; }
.dh-float i{ color:var(--amber); }
.dh-f1{ top:30px; left:-74px; }
.dh-f2{ bottom:30px; right:-74px; animation-delay:1.5s; }

.dh-stat b{ display:block; font-family:var(--font-head); font-size:2.4rem; line-height:1; color:var(--green-900); }
.dh-stat span{ font-size:.76rem; color:var(--muted); font-weight:600; }
.dh-trust{ max-width:170px; font-size:.78rem; line-height:1.6; color:var(--muted); }

.dh-chips{ position:relative; z-index:2; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:44px auto 0; max-width:800px; }
.dh-chips span{ padding:9px 16px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-size:.74rem; font-weight:600; color:var(--green-900); transition:.3s; }
.dh-chips span:hover{ background:var(--green-100); transform:translateY(-2px); }

.dh-why{ position:relative; z-index:2; max-width:1160px; margin:80px auto 0; padding:34px 30px; border-radius:30px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-soft); text-align:center; }
.dh-why h3{ font-size:1.2rem; letter-spacing:.03em; margin-bottom:26px; }
.dh-why h3 i{ color:#DD2A7B; }
.dh-why-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; position:relative; }
.dh-why-grid::before{ content:""; position:absolute; top:26px; left:10%; right:10%; border-top:2px dashed var(--line-strong); z-index:0; }
.dh-why-grid div{ position:relative; z-index:1; }
.dh-why-grid i{ width:54px; height:54px; border-radius:16px; display:grid; place-items:center; margin:0 auto 12px; font-size:1.1rem; color:#fff; background:linear-gradient(135deg,var(--green-600),#2E4A23); box-shadow:0 10px 22px -10px rgba(46,74,35,.6); }
.dh-why-grid div:nth-child(even) i{ background:linear-gradient(135deg,var(--amber),#FFCB7D); color:#3a2410; }
.dh-why-grid b{ display:block; font-size:.86rem; color:var(--green-900); margin-bottom:5px; }
.dh-why-grid p{ font-size:.72rem; line-height:1.5; color:var(--muted); }

@keyframes dhFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }

@media(max-width:980px){
    .dh-stage{ grid-template-columns:1fr; gap:26px; }
    .dh-center{ order:-1; max-width:520px; margin:auto; width:100%; }
    .dh-side{ flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap; }
    .dh-right{ text-align:left; }
    .dh-why-grid{ grid-template-columns:repeat(2,1fr); }
    .dh-why-grid::before{ display:none; }
}
@media(max-width:600px){
    .dh-hero{ padding:120px 16px 60px; }
    .dh-f1,.dh-f2{ display:none; }
    .dh-why{ padding:26px 18px; }
    .dh-why-grid{ grid-template-columns:1fr; }
    .dh-tools span{ width:34px; height:34px; }
}

/* ===== BADGE TYPING ===== */
.dh-badge{ min-width:260px; justify-content:center; }
#dhType{ color:var(--green-900); }
.dh-cursor{ color:var(--amber); font-weight:700; animation:dhBlink .9s steps(1) infinite; margin-left:2px; }
@keyframes dhBlink{ 0%,50%{ opacity:1; } 51%,100%{ opacity:0; } }
#dhTypeIcon{ transition:transform .35s ease, color .35s ease; }
#dhTypeIcon.pop{ transform:scale(1.25) rotate(-8deg); color:var(--green-600); }

/* ===== 60+ FIX ===== */
.dh-stat b span{ font-size:inherit; color:inherit; font-weight:inherit; }



/* ===== SIDE FLOATING GLASS CARDS (minimal) ===== */
.dh-fc-row{ display:flex; gap:10px; flex-wrap:wrap; }
.dh-right .dh-fc-row{ justify-content:flex-end; }
.dh-fc{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 13px 8px 8px; border-radius:14px;
    background:rgba(255,255,255,.72); backdrop-filter:blur(12px);
    border:1px solid var(--line); box-shadow:var(--shadow-soft);
    font-size:.74rem; font-weight:600; color:var(--green-900);
    animation:dhFloat 5s ease-in-out infinite;
    transition:transform .3s ease, box-shadow .3s ease;
}
.dh-fc i{ width:28px; height:28px; border-radius:9px; display:grid; place-items:center; background:var(--green-100); color:var(--green-600); font-size:.8rem; }
.dh-fc.amber i{ background:rgba(251,175,71,.18); color:#C97A12; }
.dh-fc:hover{ transform:translateY(-4px) scale(1.04); box-shadow:var(--shadow); }
.dh-fc-row .dh-fc:nth-child(1){ animation-delay:0s; }
.dh-fc-row .dh-fc:nth-child(2){ animation-delay:1.2s; margin-top:14px; }
.dh-left .dh-fc-row:last-child .dh-fc:nth-child(1){ animation-delay:2.4s; }
.dh-right .dh-fc-row:first-child .dh-fc:nth-child(2){ animation-delay:.6s; }
@media(max-width:980px){
    .dh-fc-row .dh-fc:nth-child(2){ margin-top:0; }
}

/* ===== TOOLS ROW (under photo, simple) ===== */
.dh-toolrow{ position:relative; z-index:2; max-width:520px; margin:64px auto 0; text-align:center; background:none; padding:0; }
.dh-toolrow-label{ display:inline-flex; align-items:center; gap:10px; font-size:.82rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--green-900); margin-bottom:16px; }
.dh-toolrow-label i{ color:var(--amber); font-size:.9rem; }
.dh-toolrow-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.dh-tool{ position:relative; width:52px; height:52px; border-radius:15px; display:grid; place-items:center; font-family:var(--font-body); font-weight:800; font-size:1rem; box-shadow:0 10px 22px -12px rgba(0,0,0,.4); cursor:pointer; transition:transform .3s ease, box-shadow .3s ease; }
.dh-tool:hover{ transform:translateY(-6px) scale(1.08); box-shadow:0 18px 30px -12px rgba(0,0,0,.5); }
.dh-tool::after{ content:attr(data-n); position:absolute; top:calc(100% + 7px); left:50%; transform:translateX(-50%); white-space:nowrap; font-size:.62rem; font-weight:600; padding:4px 9px; border-radius:999px; background:var(--green-900); color:#fff; opacity:0; transition:.3s; pointer-events:none; }
.dh-tool:hover::after{ opacity:1; }
 
.dh-tool.ps{ background:#001E36; color:#31A8FF; }
.dh-tool.ai{ background:#330000; color:#FF9A00; }
.dh-tool.id{ background:#49021F; color:#FF3366; }
.dh-tool.ae{ background:#00005B; color:#9999FF; }
.dh-tool.pr{ background:#2A0A4A; color:#E8B4FF; }
.dh-tool.lr{ background:#001E36; color:#ADD5EC; }
.dh-tool.fg{ background:#1E1E1E; color:#fff; font-size:1rem; }
 


/* ===== LEFT TESTIMONIAL STACK ===== */
.dh-tm{ width:100%; max-width:280px; display:flex; flex-direction:column; gap:14px; }
.dh-tm-head{ display:inline-flex; align-items:center; gap:8px; font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--green-900); white-space:nowrap; }
.dh-tm-head > i{ color:#DD2A7B; }
.dh-tm-stars{ display:inline-flex; gap:3px; margin-left:4px; }
.dh-tm-stars i{ font-size:.62rem; color:var(--amber); }

.dh-tm-stack{ position:relative; height:160px; }
.dh-tm-card{
    position:absolute; inset:0;
    display:flex; align-items:flex-start; gap:12px;
    padding:16px; border-radius:20px;
    background:var(--surface); border:1px solid var(--line);
    box-shadow:0 18px 40px -24px rgba(46,74,35,.55);
    opacity:0; transform:translateY(-28px) scale(.96);
    transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
    pointer-events:none;
}
.dh-tm-card.active{ opacity:1; transform:translateY(0) scale(1); z-index:3; pointer-events:auto; }
.dh-tm-card.next{ opacity:.55; transform:translateY(12px) scale(.95); z-index:2; }
.dh-tm-card.next2{ opacity:.25; transform:translateY(22px) scale(.9); z-index:1; }
.dh-tm-card img{ width:42px; height:42px; border-radius:50%; object-fit:cover; flex-shrink:0; border:2px solid var(--green-100); }
.dh-tm-card p{ font-size:.74rem; line-height:1.5; color:var(--ink); margin-bottom:6px; }
.dh-tm-card b{ font-size:.68rem; font-weight:600; color:var(--green-600); }

@media(max-width:980px){
    .dh-tm{ max-width:100%; }
}

 /* ===== RIGHT : ABOUT CARD ===== */
.dh-about{
    width:100%; max-width:340px; padding:26px; border-radius:22px;
    background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-soft);
    text-align:left; display:flex; flex-direction:column; gap:12px;
    opacity:0; transform:translateY(18px); animation:dhAboutIn .9s .4s ease forwards;
    transition:transform .35s ease, box-shadow .35s ease;
}
.dh-about:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.dh-about-tag{ display:inline-flex; align-items:center; gap:7px; width:max-content; padding:6px 12px; border-radius:999px; background:var(--green-100); font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--green-600); }
.dh-about-tag i{ color:var(--amber); }
.dh-about h3{ font-size:1.15rem; letter-spacing:.03em; color:var(--green-900); }
.dh-about p{ font-size:.78rem; line-height:1.6; color:var(--muted); }
.dh-about-stats{ display:flex; gap:10px; padding-top:12px; border-top:1px solid var(--line); }
.dh-about-stats div{ flex:1; }
.dh-about-stats b{ display:block; font-family:var(--font-head); font-size:1.2rem; line-height:1; color:var(--green-900); margin-bottom:3px; }
.dh-about-stats b span{ font-size:inherit; color:inherit; }
.dh-about-stats > div > span{ font-size:.62rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
@keyframes dhAboutIn{ to{ opacity:1; transform:translateY(0); } }
@media(max-width:980px){ .dh-about{ max-width:100%; } }