#cf-portfolio{
  --cf-bg:#071322;
  --cf-bg-2:#0b1b2f;
  --cf-text:#ffffff;
  --cf-muted:#b7bdc8;
  --cf-line:rgba(255,255,255,.14);
  --cf-accent:#c03eff;
  --cf-accent-2:#ff4fd8;
  --cf-card:rgba(255,255,255,.045);
  --cf-radius:28px;
  position:relative;
  overflow:hidden;
  background:var(--cf-bg);
  color:var(--cf-text);
  font-family:"Space Mono","IBM Plex Mono","Courier New",monospace;
  padding:0;
}

#cf-portfolio *{
  box-sizing:border-box;
}

#cf-portfolio a{
  color:inherit;
  text-decoration:none;
}

.cf-bg-shape{
  position:absolute;
  inset:auto;
  pointer-events:none;
  opacity:.45;
  filter:blur(.2px);
}

.cf-bg-shape.one{
  width:520px;
  height:520px;
  right:-180px;
  top:60px;
  border:1px solid rgba(192,62,255,.45);
  transform:rotate(24deg);
}

.cf-bg-shape.two{
  width:360px;
  height:360px;
  left:-120px;
  bottom:120px;
  border:1px solid rgba(255,255,255,.12);
  transform:rotate(-18deg);
}

.cf-bg-glow{
  position:absolute;
  width:520px;
  height:520px;
  right:-180px;
  top:120px;
  background:radial-gradient(circle,rgba(192,62,255,.32),transparent 65%);
  pointer-events:none;
}

.cf-wrap{
  width:min(1440px,100%);
  margin:0 auto;
  padding:0 7vw;
  position:relative;
  z-index:2;
}

.cf-hero{
  min-height:86vh;
  display:grid;
  align-items:end;
  padding:120px 0 80px;
  border-bottom:1px solid var(--cf-line);
}

.cf-kicker{
  color:var(--cf-accent);
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:28px;
}

.cf-title{
  font-size:clamp(54px,10vw,160px);
  line-height:.88;
  letter-spacing:-.08em;
  text-transform:uppercase;
  margin:0;
  max-width:1100px;
}

.cf-title span{
  display:block;
  text-align:right;
}

.cf-intro{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:40px;
  margin-top:56px;
  padding-top:34px;
  border-top:1px solid var(--cf-line);
}

.cf-intro p{
  margin:0;
  color:var(--cf-muted);
  font-size:clamp(15px,1.3vw,19px);
  line-height:1.8;
}

.cf-meta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-start;
}

.cf-chip{
  border:1px solid var(--cf-line);
  border-radius:999px;
  padding:10px 15px;
  font-size:12px;
  color:var(--cf-muted);
  text-transform:uppercase;
}

.cf-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:42px 0;
  border-bottom:1px solid var(--cf-line);
}

.cf-section-title{
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--cf-muted);
}

.cf-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}

.cf-filter{
  appearance:none;
  background:transparent;
  color:var(--cf-text);
  border:1px solid var(--cf-line);
  border-radius:999px;
  padding:12px 16px;
  font:inherit;
  font-size:12px;
  text-transform:uppercase;
  cursor:pointer;
  transition:.28s ease;
}

.cf-filter:hover,
.cf-filter.active{
  border-color:var(--cf-accent);
  background:rgba(192,62,255,.13);
  color:#fff;
}

.cf-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
  padding:48px 0 120px;
}

.cf-empty{
  display:none;
  grid-column:1/-1;
  color:var(--cf-muted);
  border:1px solid var(--cf-line);
  padding:50px;
  border-radius:var(--cf-radius);
}

@media(max-width:900px){
  .cf-intro{
    grid-template-columns:1fr;
  }

  .cf-toolbar{
    flex-direction:column;
    align-items:flex-start;
  }

  .cf-filters{
    justify-content:flex-start;
  }

  .cf-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:520px){
  .cf-wrap{
    padding:0 22px;
  }

  .cf-title{
    font-size:52px;
  }

  .cf-title span{
    text-align:left;
  }

  .cf-hero{
    min-height:auto;
    padding:90px 0 60px;
  }
}




/* ===========================================================
PROJECT GRID
=========================================================== */
.cf-footer{

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

    padding:40px 7vw;

    background:#050d18;

}

.cf-footer-inner{

    width:min(1440px,100%);
    margin:auto;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;

    color:#b7bdc8;

    font-size:13px;

    letter-spacing:.08em;

}

.cf-footer strong{

    color:#ffffff;

    font-weight:600;

}

@media(max-width:768px){

.cf-footer-inner{

flex-direction:column;
text-align:center;

}

}
.cf-home-bar{
    position:absolute;
    top:30px;
    left:7vw;
    z-index:30;
}

.cf-home-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 22px;
    border-radius:999px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.12);
    color:#fff;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:11px;
    transition:.35s;
    backdrop-filter:blur(12px);
}

.cf-home-btn:hover{
    background:#c03eff;
    border-color:#c03eff;
    transform:translateY(-2px);
}

.cf-project{
    position:relative;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:28px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.025);
    transition:.45s;
    cursor:pointer;
    backdrop-filter:blur(16px);
}

.cf-project:hover{
    transform:translateY(-10px);
    border-color:#c03eff;
    box-shadow:
        0 30px 90px rgba(0,0,0,.45),
        0 0 80px rgba(192,62,255,.12);
}

.cf-thumb{

    width:100%;
    aspect-ratio:16/10;

    background:#111;

    overflow:hidden;

    position:relative;

}

.cf-thumb img{

    width:100%;
    height:100%;
    object-fit:cover;

    transition:1s cubic-bezier(.2,.8,.2,1);

}

.cf-project:hover img{

    transform:scale(1.08);

}

/* overlay */

.cf-thumb::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

transparent,

rgba(7,19,34,.82)

);

opacity:.35;

transition:.4s;

}

.cf-project:hover .cf-thumb::after{

opacity:1;

}

/* ===========================================================
BODY
=========================================================== */

.cf-body{

padding:34px;

display:flex;

flex-direction:column;

gap:18px;

}

.cf-category{

font-size:12px;

letter-spacing:.18em;

text-transform:uppercase;

color:#c03eff;

}

.cf-name{

font-size:34px;

line-height:1.1;

font-weight:700;

}

.cf-description{

color:#b7bdc8;

line-height:1.9;

font-size:15px;

}

.cf-tags{

display:flex;

flex-wrap:wrap;

gap:8px;

margin-top:8px;

}

.cf-tag{

padding:9px 14px;

border-radius:100px;

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

font-size:11px;

text-transform:uppercase;

color:#d8d8d8;

transition:.35s;

}

.cf-project:hover .cf-tag{

border-color:#c03eff;

}

/* ===========================================================
BUTTON
=========================================================== */

.cf-link{

display:flex;

align-items:center;

justify-content:space-between;

margin-top:auto;

padding-top:28px;

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

font-size:14px;

letter-spacing:.18em;

text-transform:uppercase;

}

.cf-arrow{

transition:.4s;

}

.cf-project:hover .cf-arrow{

transform:translateX(8px);

}

/* ===========================================================
MODAL
=========================================================== */

.cf-modal{

position:fixed;

inset:0;

background:rgba(2,8,18,.92);

display:flex;

align-items:center;

justify-content:center;

padding:40px;

opacity:0;

visibility:hidden;

transition:.45s;

z-index:99999;

backdrop-filter:blur(18px);

}

.cf-modal.active{

opacity:1;

visibility:visible;

}

.cf-modal-panel{

width:min(1450px,100%);

height:min(92vh,980px);

background:#081423;

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

border-radius:30px;

overflow:hidden;

display:grid;

grid-template-columns:60% 40%;

position:relative;

}

.cf-modal-close{

position:absolute;

top:24px;

right:24px;

width:48px;

height:48px;

border:none;

background:#c03eff;

border-radius:100%;

color:#fff;

cursor:pointer;

font-size:14px;

z-index:20;

transition:.3s;

}

.cf-modal-close:hover{

transform:rotate(90deg);

}

.cf-modal-media{

overflow:auto;

background:#050d18;

}

.cf-modal-cover{

height:520px;

background:#111 center/cover no-repeat;

}

.cf-modal-gallery{

display:grid;

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

gap:14px;

padding:20px;

}

.cf-modal-gallery img{

width:100%;

border-radius:18px;

transition:.4s;

cursor:pointer;

}

.cf-modal-gallery img:hover{

transform:scale(1.04);

}

.cf-modal-info{

padding:70px;

overflow:auto;

}

.cf-modal-category{

color:#c03eff;

text-transform:uppercase;

letter-spacing:.2em;

font-size:12px;

}

.cf-modal-title{

font-size:54px;

margin:22px 0;

line-height:1;

}

.cf-modal-description{

color:#b7bdc8;

line-height:2;

margin-bottom:40px;

}

.cf-modal-details{

display:grid;

gap:26px;

margin-bottom:40px;

}

.cf-modal-details span{

display:block;

font-size:12px;

letter-spacing:.18em;

color:#777;

margin-bottom:8px;

text-transform:uppercase;

}

.cf-modal-details strong{

font-size:18px;

font-weight:500;

}

.cf-modal-link{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 28px;

border-radius:999px;

background:#c03eff;

transition:.35s;

}

.cf-modal-link:hover{

transform:translateY(-3px);

box-shadow:0 0 50px rgba(192,62,255,.45);

}

/* ===========================================================
SCROLLBAR
=========================================================== */

.cf-modal-media::-webkit-scrollbar,
.cf-modal-info::-webkit-scrollbar{

width:6px;

}

.cf-modal-media::-webkit-scrollbar-thumb,
.cf-modal-info::-webkit-scrollbar-thumb{

background:#c03eff;

border-radius:20px;

}


/* ===========================================================
UPDATED CARD DESCRIPTION + VISIT WEBSITE BUTTON + STATUS
=========================================================== */

.cf-status{
  position:absolute;
  top:18px;
  right:18px;
  z-index:3;
  padding:9px 13px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#071322;
  border:1px solid rgba(255,255,255,.22);
}

.cf-status.ongoing{background:#35ff8d;}
.cf-status.completed{background:#ffd84d;}

.cf-name{
  font-size:26px !important;
  line-height:1.15 !important;
  margin:0 0 10px !important;
  letter-spacing:-.04em;
}

.cf-card-description{
  color:#b7bdc8;
  line-height:1.8;
  font-size:14px;
  margin:0 0 4px;
}

.cf-card-footer{
  margin-top:auto;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.cf-visit-btn,
.cf-view-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:14px 20px;
  background:transparent;
  border:1px solid rgba(255,255,255,.12);
  color:white;
  border-radius:100px;
  cursor:pointer;
  font-family:inherit;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:.35s;
}

.cf-visit-btn{
  flex:1;
  background:rgba(192,62,255,.1);
  border-color:rgba(192,62,255,.5);
}

.cf-view-btn{
  width:48px;
  padding:0;
}

.cf-visit-btn:hover,
.cf-view-btn:hover{
  background:#c03eff;
  border-color:#c03eff;
  transform:translateY(-2px);
  box-shadow:0 0 40px rgba(192,62,255,.35);
}

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

@media(max-width:1200px){

.cf-modal-panel{

grid-template-columns:1fr;

height:92vh;

}

.cf-modal-cover{

height:380px;

}

.cf-modal-info{

padding:45px;

}

}

@media(max-width:900px){

.cf-project{

border-radius:22px;

}

.cf-body{

padding:26px;

}

.cf-name{

font-size:28px;

}

.cf-modal{

padding:16px;

}

.cf-modal-info{

padding:28px;

}

.cf-modal-title{

font-size:38px;

}

.cf-modal-gallery{

grid-template-columns:1fr;

}

}

@media(max-width:600px){

.cf-thumb{

aspect-ratio:1/1;

}

.cf-modal-cover{

height:260px;

}

.cf-modal-title{

font-size:30px;

}

.cf-description{

font-size:14px;

}

.cf-body{

padding:22px;

}

}


/* ===========================================================
CARD VISIBILITY FIX
Cards now expand naturally and the footer remains visible.
=========================================================== */

.cf-grid{
  align-items:start !important;
}

.cf-project{
  height:auto !important;
  min-height:0 !important;
}

.cf-body{
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
}

.cf-tags{
  max-height:none !important;
  overflow:visible !important;
}

.cf-card-description{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.cf-card-footer{
  margin-top:18px !important;
  flex-shrink:0 !important;
}

.cf-visit-btn,
.cf-view-btn{
  flex-shrink:0 !important;
}

@media(max-width:600px){
  .cf-card-description{
    -webkit-line-clamp:4;
  }
}


/* ===========================================================
COMPACT PREMIUM CARDS
=========================================================== */

.cf-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:20px !important;
  padding:38px 0 100px !important;
  align-items:start !important;
}

.cf-project{
  border-radius:22px !important;
  height:auto !important;
  min-height:0 !important;
}

.cf-thumb{
  aspect-ratio:16/9 !important;
}

.cf-body{
  padding:22px !important;
  gap:11px !important;
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
}

.cf-category{
  font-size:10px !important;
  letter-spacing:.16em !important;
}

.cf-name{
  font-size:20px !important;
  line-height:1.18 !important;
  letter-spacing:-.035em !important;
  font-weight:600 !important;
  margin:0 !important;
}

.cf-card-description{
  color:#b7bdc8;
  font-size:12.5px !important;
  line-height:1.65 !important;
  margin:0 0 4px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.cf-tags{
  gap:6px !important;
  margin-top:4px !important;
  max-height:none !important;
  overflow:visible !important;
}

.cf-tag{
  padding:7px 10px !important;
  font-size:9.5px !important;
  letter-spacing:.08em !important;
}

.cf-status{
  position:absolute;
  top:12px !important;
  right:12px !important;
  z-index:3;
  padding:7px 10px !important;
  border-radius:999px;
  font-size:9.5px !important;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#071322;
  border:1px solid rgba(255,255,255,.22);
}

.cf-status.ongoing{background:#35ff8d;}
.cf-status.completed{background:#ffd84d;}

.cf-card-footer{
  margin-top:12px !important;
  padding-top:16px !important;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  gap:8px !important;
  flex-wrap:wrap;
  flex-shrink:0 !important;
}

.cf-visit-btn,
.cf-view-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px !important;
  padding:10px 14px !important;
  background:transparent;
  border:1px solid rgba(255,255,255,.12);
  color:white;
  border-radius:100px;
  cursor:pointer;
  font-family:inherit;
  font-size:10px !important;
  letter-spacing:.14em !important;
  font-weight:500;
  text-transform:uppercase;
  transition:.35s;
  flex-shrink:0 !important;
}

.cf-visit-btn{
  flex:1;
  background:rgba(192,62,255,.1);
  border-color:rgba(192,62,255,.5);
}

.cf-view-btn{
  width:40px !important;
  min-width:40px !important;
  padding:0 !important;
}

.cf-visit-btn:hover,
.cf-view-btn:hover{
  background:#c03eff;
  border-color:#c03eff;
  transform:translateY(-2px);
  box-shadow:0 0 40px rgba(192,62,255,.35);
}

/* ===========================================================
PROJECT SHOWCASE MODAL
=========================================================== */

.cf-modal{
  align-items:flex-start !important;
  overflow-y:auto !important;
  padding:28px !important;
}

.cf-modal-panel{
  width:min(1480px,100%) !important;
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  overflow:visible !important;
  border-radius:30px !important;
  margin:auto 0 !important;
}

.cf-modal-layout{
  display:grid !important;
  grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr) !important;
  width:100%;
  max-height:calc(100vh - 56px) !important;
  overflow:hidden !important;
}

.cf-modal-media,
.cf-modal-info{
  max-height:calc(100vh - 56px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

.cf-modal-info{
  padding:46px !important;
  display:flex;
  flex-direction:column;
  gap:24px;
}

.cf-modal-cover{
  height:460px !important;
}

.cf-case-head{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding-bottom:24px;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.cf-case-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.cf-modal-category{
  color:#c03eff;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:11px !important;
}

.cf-case-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  padding:8px 12px;
  border-radius:999px;
  color:#071322;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.cf-case-status.ongoing{background:#35ff8d;}
.cf-case-status.completed{background:#ffd84d;}

.cf-modal-title{
  font-size:42px !important;
  line-height:1.04 !important;
  letter-spacing:-.06em;
  margin:0 !important;
}

.cf-case-block{
  padding-bottom:24px;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.cf-case-label{
  color:#777;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:12px;
}

.cf-modal-description{
  color:#b7bdc8;
  line-height:1.85 !important;
  font-size:14px !important;
  margin:0 !important;
}

.cf-case-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.cf-case-item{
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:16px;
  background:rgba(255,255,255,.025);
}

.cf-case-item span{
  display:block;
  color:#777;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:8px;
}

.cf-case-item strong{
  color:#fff;
  font-size:14px;
  font-weight:500;
  line-height:1.5;
}

.cf-pill-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.cf-pill{
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.025);
  color:#d8d8d8;
  border-radius:999px;
  padding:9px 12px;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.cf-highlight-list{
  display:grid;
  gap:10px;
}

.cf-highlight{
  color:#d8d8d8;
  font-size:13px;
  line-height:1.55;
  padding-left:24px;
  position:relative;
}

.cf-highlight::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:#c03eff;
}

.cf-modal-link{
  width:100%;
  padding:16px 22px !important;
  font-size:10px !important;
  margin-top:0;
}

.cf-modal-details{
  display:none !important;
}

@media(max-width:1200px){
  .cf-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .cf-modal-layout{
    grid-template-columns:1fr !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .cf-modal-panel{
    max-height:none !important;
    overflow:visible !important;
  }

  .cf-modal-media,
  .cf-modal-info{
    max-height:none !important;
    overflow:visible !important;
  }
}

@media(max-width:700px){
  .cf-grid{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .cf-body{
    padding:20px !important;
  }

  .cf-name{
    font-size:19px !important;
  }

  .cf-modal{
    padding:14px !important;
  }

  .cf-modal-panel{
    border-radius:22px !important;
  }

  .cf-modal-info{
    padding:26px !important;
  }

  .cf-modal-title{
    font-size:30px !important;
  }

  .cf-case-grid{
    grid-template-columns:1fr;
  }
}


/* ===========================================================
FINAL MODAL LAYOUT FIX + CLICKABLE IMAGE LIGHTBOX
=========================================================== */

.cf-modal-panel{
  width:min(1500px,calc(100vw - 36px)) !important;
  display:block !important;
}

.cf-modal-layout{
  display:grid !important;
  grid-template-columns:minmax(300px,440px) minmax(0,1fr) !important;
  width:100% !important;
  max-height:calc(100vh - 56px) !important;
  overflow:hidden !important;
}

.cf-modal-media{
  width:100% !important;
  min-width:0 !important;
  border-right:1px solid rgba(255,255,255,.08);
}

.cf-modal-info{
  width:100% !important;
  min-width:0 !important;
  padding:56px 74px !important;
}

.cf-modal-title{
  max-width:900px !important;
  font-size:clamp(38px,4.6vw,76px) !important;
  line-height:.98 !important;
}

.cf-modal-description{
  max-width:760px !important;
  font-size:15px !important;
}

.cf-case-grid{
  max-width:900px !important;
}

.cf-case-block{
  max-width:920px !important;
}

.cf-modal-cover{
  height:410px !important;
}

.cf-modal-gallery{
  grid-template-columns:1fr !important;
  padding:22px !important;
}

.cf-modal-gallery img{
  cursor:zoom-in !important;
  aspect-ratio:auto !important;
  max-height:none !important;
  object-fit:cover !important;
}

.cf-modal-gallery img:hover{
  transform:scale(1.025) !important;
  box-shadow:0 0 40px rgba(192,62,255,.22);
}

.cf-lightbox{
  position:fixed;
  inset:0;
  z-index:100000;
  background:rgba(2,8,18,.96);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:34px;
  opacity:0;
  visibility:hidden;
  transition:.32s ease;
  backdrop-filter:blur(16px);
}

.cf-lightbox.active{
  opacity:1;
  visibility:visible;
}

.cf-lightbox img{
  max-width:min(1200px,92vw);
  max-height:88vh;
  object-fit:contain;
  border-radius:22px;
  box-shadow:0 40px 120px rgba(0,0,0,.65);
}

.cf-lightbox-close{
  position:absolute;
  top:24px;
  right:24px;
  width:58px;
  height:58px;
  border:0;
  border-radius:999px;
  background:#c03eff;
  color:#fff;
  cursor:pointer;
  font-family:inherit;
  font-size:12px;
  text-transform:uppercase;
  transition:.3s ease;
}

.cf-lightbox-close:hover{
  transform:rotate(90deg);
}

@media(max-width:1200px){
  .cf-modal-layout{
    grid-template-columns:1fr !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .cf-modal-media,
  .cf-modal-info{
    max-height:none !important;
    overflow:visible !important;
  }

  .cf-modal-info{
    padding:38px !important;
  }

  .cf-modal-title{
    font-size:42px !important;
  }
}

@media(max-width:700px){
  .cf-modal-info{
    padding:26px !important;
  }

  .cf-modal-title{
    font-size:32px !important;
  }

  .cf-lightbox{
    padding:16px;
  }

  .cf-lightbox-close{
    width:50px;
    height:50px;
  }
}


/* ===========================================================
BILINGUAL LANGUAGE SWITCHER
=========================================================== */
.cf-top-actions{position:relative;z-index:30;width:100%;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin:40px 0 50px;}
.cf-top-actions .cf-home-bar{position:relative!important;top:auto!important;left:auto!important;z-index:30;}
.cf-home-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:18px 34px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;text-transform:uppercase;letter-spacing:.14em;font-size:13px;font-weight:500;transition:all .35s ease;backdrop-filter:blur(12px);}
.cf-home-btn:hover{background:#c03eff;border-color:#c03eff;transform:translateY(-3px);box-shadow:0 12px 35px rgba(192,62,255,.35);}
.cf-lang-switcher{display:inline-flex;align-items:center;gap:6px;padding:6px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.045);backdrop-filter:blur(12px);}
.cf-lang-btn{border:0;border-radius:999px;background:transparent;color:#b7bdc8;padding:12px 16px;font-family:inherit;font-size:12px;letter-spacing:.16em;cursor:pointer;transition:.28s ease;}
.cf-lang-btn.active,.cf-lang-btn:hover{background:#c03eff;color:#fff;box-shadow:0 0 28px rgba(192,62,255,.28);}
@media(max-width:700px){.cf-top-actions{margin:26px 0 34px}.cf-home-btn{width:100%;padding:16px 22px;font-size:11px}}



/* Plugin wrapper fixes */
#cf-portfolio .cf-modal-close{font-family:inherit;}
#cf-portfolio .cf-modal-backdrop{position:absolute;inset:0;}
#cf-portfolio .cf-modal-panel{z-index:2;}