@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

*,*:before,*:after{box-sizing:border-box;border:0 solid;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;line-height:1.5}
body{font-family:'Cairo',ui-sans-serif,system-ui,sans-serif;background-color:#0a0a0f;color:#fff;margin:0;padding:0;overflow-x:hidden}
body[dir="rtl"]{direction:rtl;text-align:right}
body[dir="ltr"]{direction:ltr;text-align:left}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img,svg,video{display:block;max-width:100%;height:auto;vertical-align:middle}
button,input,select,textarea{font:inherit;color:inherit;background-color:transparent;border-radius:0}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}

@media(max-width:320px){html{font-size:10px}}
@media(max-width:425px){html{font-size:11px}}
@media(max-width:768px){html{font-size:13px}}
@media(max-width:1024px){html{font-size:15px}}

/* Container */
.container{width:100%;margin:0 auto;padding:0 1rem}
@media(min-width:640px){.container{max-width:640px;padding:0 1.5rem}}
@media(min-width:768px){.container{max-width:768px}}
@media(min-width:1024px){.container{max-width:1024px}}
@media(min-width:1280px){.container{max-width:1280px}}
.max-w-7xl{max-width:80rem;margin:0 auto}

/* Gradient helpers */
.gradient-text{background:#152441;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gradient-text-alt{background:#152441;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gradient-btn{background:#152441}
.gradient-btn:hover{box-shadow:0 10px 15px -3px rgba(29,72,208,0.3)}

/* ============ HEADER ============ */
.site-header{position:fixed;top:0;z-index:50;width:100%;background-color:transparent;color:#fff;border-bottom:1px solid rgba(30,41,61,0);animation:slideDown .5s ease-out forwards;transition:background-color .3s,border-color .3s}
.site-header.scrolled{background-color:rgba(10,10,26,0.95);border-bottom:1px solid rgba(30,41,61,0.5);backdrop-filter:blur(10px)}
@keyframes slideDown{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}

.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem}
@media(min-width:640px){.header-inner{padding:1rem 1.5rem}}

.logo-text{font-size:1.5rem;font-weight:700;color:#152441;-webkit-text-fill-color:#152441;transition:all .3s}
.logo-link{display:flex;align-items:center}
.logo-img{height:2rem;width:auto;display:block}

.nav-desktop{display:none;align-items:center;justify-content:space-between;width:100%}
@media(min-width:1024px){.nav-desktop{display:flex}.nav-mobile-wrap{display:none!important}}

.nav-links-list{display:flex;align-items:center;gap:2rem}
.nav-links-list a{font-size:.875rem;color:#fff;transition:color .2s}
.nav-links-list a:hover{color:#c07eff}

.nav-actions{display:flex;align-items:center;gap:.75rem}

.lang-btn{display:flex;align-items:center;gap:.25rem;background:#2a2a3a;color:#fff;border-radius:9999px;padding:.5rem 1rem;border:none;cursor:pointer;transition:background .2s;font-size:.875rem}
.lang-btn:hover{background:#3a3a4a}

.start-btn{display:flex;align-items:center;gap:.5rem;background:#152441;border-radius:9999px;padding:.625rem 1.5rem;font-size:.875rem;font-weight:500;color:#fff;border:none;cursor:pointer;transition:all .3s}
.start-btn:hover{box-shadow:0 10px 15px -3px rgba(29,72,208,0.3)}

/* Mobile */
.nav-mobile-wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
@media(min-width:1024px){.nav-mobile-wrap{display:none}}

.mobile-menu-btn{background:none;border:none;color:#152441;padding:.5rem;cursor:pointer;border-radius:.5rem;transition:background .2s;font-size:1.5rem}
.mobile-menu-btn:hover{background:rgba(29,72,208,0.1)}

.mobile-start-btn{background:#152441;color:#fff;border-radius:9999px;padding:.5rem 1.25rem;font-size:.875rem;font-weight:500;border:none;cursor:pointer}

.mobile-menu{position:fixed;top:0;right:0;width:100vw;height:100vh;background:#0a0a1a;z-index:1000;flex-direction:column;padding:2rem;display:flex;transform:translateX(100%);transition:transform .3s ease-in-out;overflow-y:auto}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu nav{display:flex;flex-direction:column;gap:.75rem}
.mobile-menu nav a{font-size:.875rem;color:#fff;padding:.5rem 1rem;border-radius:.5rem;transition:all .2s}
.mobile-menu nav a:hover{background:rgba(172,75,255,0.1)}

/* ============ HERO ============ */
.hero-section{background:#050510;width:100%;min-height:100vh;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}
@media(max-width:640px){.hero-section{min-height:auto;padding-bottom:4rem}}

/* Hero background image */
.hero-bg-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center 90%;z-index:0;pointer-events:none}

/* Stars */
.hero-stars{position:absolute;inset:0;z-index:1}
.hero-star{position:absolute;border-radius:50%;background:#fff;animation:starPulse var(--dur) infinite}
@keyframes starPulse{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:.8;transform:scale(1.6)}}



/* Center content */
.hero-center-content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 1.5rem;margin-top:auto;margin-bottom:auto;animation:heroContentIn 1s ease-out .3s both}
@media(max-width:640px){.hero-center-content{margin-top:8rem;margin-bottom:2rem;padding:0 1rem}}

@keyframes heroContentIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* Badge pill */
.hero-badge-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1rem;border-radius:9999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(12px);color:rgba(255,255,255,.7);font-size:.72rem;font-weight:500;margin-bottom:1.5rem}
.hero-badge-pill svg{flex-shrink:0;opacity:.6}
@media(max-width:480px){.hero-badge-pill{font-size:.65rem;padding:.35rem .8rem;margin-bottom:1rem}}

/* Main title */
.hero-main-title{font-size:2.2rem;font-weight:700;color:#fff;line-height:1.45;margin:0 0 1rem;max-width:700px}
.hero-title-highlight{color:#fff}
@media(min-width:640px){.hero-main-title{font-size:2.5rem}}
@media(min-width:768px){.hero-main-title{font-size:2.8rem}}
@media(min-width:1024px){.hero-main-title{font-size:3rem}}
@media(max-width:480px){.hero-main-title{font-size:1.5rem;margin-bottom:.8rem}}
@media(max-width:400px){.hero-main-title{font-size:1.3rem}}

/* Description */
.hero-main-desc{color:rgba(255,255,255,.5);font-size:.8rem;line-height:1.8;max-width:32rem;margin:0 auto 1.8rem;font-weight:400}
@media(min-width:768px){.hero-main-desc{font-size:.85rem}}
@media(max-width:480px){.hero-main-desc{font-size:.72rem;max-width:100%;margin-bottom:1.2rem}}
.hero-br-desktop{display:none}
@media(min-width:768px){.hero-br-desktop{display:inline}}

/* CTA buttons */
.hero-cta-group{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-bottom:0}
.hero-btn-primary{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.8rem;background:#152441;border:none;border-radius:.5rem;color:#fff;font-weight:600;font-size:.82rem;cursor:pointer;transition:all .3s ease;text-decoration:none;box-shadow:0 4px 20px rgba(21,36,65,.35)}
.hero-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 30px rgba(21,36,65,.5);background:#1d3058}
.hero-btn-outline{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.8rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.18);border-radius:.5rem;color:#fff;font-weight:600;font-size:.82rem;cursor:pointer;transition:all .3s ease;backdrop-filter:blur(12px);text-decoration:none}
.hero-btn-outline:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
@media(max-width:480px){.hero-btn-primary,.hero-btn-outline{padding:.55rem 1.3rem;font-size:.75rem}}

/* Partners marquee */
.hero-bottom-marquee{position:absolute;bottom:0;left:0;right:0;z-index:10;overflow:hidden;padding:1rem 0;border-top:1px solid rgba(255,255,255,.06);background:linear-gradient(to top,rgba(5,5,16,.6),transparent)}
@media(max-width:640px){.hero-bottom-marquee{position:relative;bottom:auto;margin-top:0}}
.hero-marquee-track{display:flex;gap:2.5rem;width:max-content;animation:marqueeScroll 30s linear infinite}
.hero-marquee-item{display:flex;align-items:center;gap:.5rem;color:rgba(255,255,255,.35);font-size:.82rem;font-weight:500;white-space:nowrap;flex-shrink:0}
.hero-marquee-item svg{opacity:.4;flex-shrink:0}
@keyframes marqueeScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media(max-width:480px){.hero-marquee-track{gap:1.8rem}.hero-marquee-item{font-size:.72rem}}
@media(max-width:640px){.hero-bg-img{object-position:center 40%}}

/* ============ PARTNERS ============ */
.hero-partners{position:relative;z-index:10;padding:3rem 0 4rem;background:transparent}

.section-tag{text-align:center;margin-bottom:1rem}
.section-tag-label{display:inline-block;padding:.625rem 1.25rem;border:1px solid rgba(250,200,0,0.5);border-radius:9999px;background:rgba(255,255,255,0.05);backdrop-filter:blur(4px);font-size:.875rem;font-weight:600;color:#fac800;letter-spacing:.05em;text-transform:uppercase}
@media(min-width:640px){.section-tag-label{background:rgba(255,255,255,0.1)}}

.section-heading{text-align:center;margin-bottom:1rem}
.section-heading h2{font-size:1.875rem;font-weight:700;color:#fff;line-height:1.25}
@media(min-width:640px){.section-heading h2{font-size:2.25rem}}
@media(min-width:768px){.section-heading h2{font-size:3rem}}

.section-desc{text-align:center;max-width:48rem;margin:0 auto 2.5rem;color:#99a1af;font-size:.875rem;line-height:1.625}
@media(min-width:640px){.section-desc{font-size:1rem}}

.partners-track-wrap{overflow:hidden;width:100%;margin-top:1.5rem}
.partners-track{display:flex;gap:2rem;animation:scrollP 30s linear infinite;white-space:nowrap;width:max-content}
.partner-logo-item{flex-shrink:0;display:flex;align-items:center;gap:.625rem;padding:.75rem 1.5rem;background:rgba(29,41,61,0.5);border:1px solid rgba(49,65,88,0.5);border-radius:.75rem;font-size:.9rem;font-weight:500;color:#99a1af;transition:all .3s;cursor:default}
.partner-logo-item svg{flex-shrink:0;opacity:.7;transition:opacity .3s}
.partner-logo-item:hover{background:rgba(49,65,88,0.7);color:#fff;border-color:rgba(139,92,246,0.3)}
.partner-logo-item:hover svg{opacity:1}
@keyframes scrollP{0%{transform:translateX(0)}to{transform:translateX(25%)}}
@media(max-width:640px){.partner-logo-item{padding:.5rem 1rem;gap:.4rem;font-size:.8rem}.partner-logo-item svg{width:22px;height:22px}.partners-track{gap:1rem}.hero-partners{padding:1rem 0 2rem}.partners-track-wrap{margin-top:1rem}.section-heading{margin-bottom:.5rem}.section-desc{margin-bottom:1.5rem}}

/* ============ WHY CHOOSE US ============ */
.whychoose-section{background:#0A0A0F;padding:4rem 0;position:relative;overflow:hidden;min-height:auto}
@media(max-width:640px){.whychoose-section{padding:2.5rem 0}.wc-blur-1,.wc-blur-2{width:12rem;height:12rem}}
.wc-blurs{position:absolute;inset:0;pointer-events:none}
.wc-blur-1{position:absolute;top:5rem;left:5rem;width:24rem;height:24rem;background:rgba(37,99,235,0.2);border-radius:50%;filter:blur(3rem)}
.wc-blur-2{position:absolute;bottom:5rem;right:5rem;width:24rem;height:24rem;background:rgba(147,51,234,0.2);border-radius:50%;filter:blur(3rem)}

.wc-desktop{display:none}
@media(min-width:1024px){.wc-desktop{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;text-align:start}.wc-mobile{display:none!important}}
.wc-mobile{display:block;text-align:start}

.wc-badge{display:inline-block;padding:.5rem 1rem;background:rgba(30,41,59,0.7);border-radius:9999px;font-size:.75rem;color:#cbd5e1;margin-bottom:1.5rem;border:1px solid rgba(51,65,85,1)}
.wc-card-bg{border-radius:1.5rem;padding:3rem;border:1px solid rgba(51,65,85,0.5);box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);position:relative;overflow:hidden;background-color:rgba(15,23,42,0.4);backdrop-filter:blur(4px)}
@media(max-width:1023px){.wc-card-bg{padding:1.5rem;border-radius:1.5rem}}

.wc-big-title{font-size:2.5rem;font-weight:700;color:#fff;margin-bottom:1.5rem;line-height:1.25;text-align:start}
@media(min-width:768px){.wc-big-title{font-size:3rem}}
@media(max-width:1023px){.wc-big-title{font-size:2rem}}
.wc-big-desc{color:#94a3b8;font-size:1rem;line-height:1.625;margin-bottom:2.5rem;text-align:start}
@media(max-width:1023px){.wc-big-desc{font-size:.875rem}}

.wc-cta-btn{display:inline-flex;align-items:center;gap:.75rem;padding:1rem 2rem;background:#152441;color:#fff;font-weight:600;border-radius:9999px;font-size:1rem;transition:all .3s;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1)}
.wc-cta-btn:hover{box-shadow:0 20px 25px -5px rgba(21,36,65,0.5)}

.wc-title{font-size:2.5rem;font-weight:700;color:#fff;margin-bottom:1.5rem;line-height:1.25;text-align:start}
@media(min-width:768px){.wc-title{font-size:3rem}}
@media(max-width:1023px){.wc-title{font-size:2rem}}
.wc-desc{color:#94a3b8;font-size:1rem;line-height:1.625;margin-bottom:2.5rem;text-align:start}
@media(max-width:1023px){.wc-desc{font-size:.875rem}}

.wc-features{display:flex;flex-direction:column;gap:1.5rem;text-align:start}
.wc-feature-card{border-radius:1rem;padding:1.5rem;border:1px solid rgba(51,65,85,0.5);transition:all .3s;background:transparent;backdrop-filter:blur(4px)}
.wc-feature-card:hover{border-color:rgba(59,130,246,0.5)}
.wc-feature-inner{display:flex;align-items:flex-start;gap:1.25rem}
.wc-icon-box{flex-shrink:0;width:3rem;height:3rem;background:#facc15;border-radius:.75rem;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1)}
.wc-feature-card h3{font-size:1.25rem;font-weight:700;color:#fff;margin-bottom:.75rem;text-align:start}
@media(max-width:1023px){.wc-feature-card h3{font-size:1.125rem}}
.wc-feature-card p{color:#94a3b8;font-size:.875rem;line-height:1.625;text-align:start}

.wc-left{order:1}
@media(min-width:1024px){.wc-left{order:1}}
.wc-right{order:2}
@media(min-width:1024px){.wc-right{order:2}}

/* ============ STATS ============ */
.stats-bar{display:flex;flex-wrap:wrap;justify-content:space-around;align-items:center;min-height:6rem;padding:1rem;background:#250858;color:#fff;gap:.5rem}
.stats-bar-item{text-align:center;padding:.25rem .5rem}
.stats-bar-value{font-size:1.5rem;font-weight:700}
@media(min-width:640px){.stats-bar-value{font-size:1.875rem}}
@media(min-width:768px){.stats-bar-value{font-size:2.25rem}}
.stats-bar-label{font-size:.75rem;font-weight:700}
@media(min-width:640px){.stats-bar-label{font-size:.875rem}}
@media(min-width:768px){.stats-bar-label{font-size:1rem}}
.stats-bar-divider{width:1px;height:3rem;background:rgba(255,255,255,0.3);margin:0 .25rem}
@media(max-width:640px){.stats-bar{padding:.75rem .5rem;gap:.25rem}.stats-bar-item{flex:1 1 40%;min-width:0}.stats-bar-divider{display:none}}

/* ============ SERVICES ============ */
.services-section{background:#0a0a0f;padding:5rem 0;position:relative;overflow:hidden}
@media(max-width:640px){.services-section{padding:3rem 0}}

.svc-label{color:#6b7280;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}
.svc-heading{font-size:2.25rem;font-weight:700;color:#fff;margin-bottom:.75rem;line-height:1.25}
@media(min-width:768px){.svc-heading{font-size:3rem}}
.svc-heading .gradient-text{background:linear-gradient(to right,#3B82F6,#8B5CF6,#7C3AED);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.svc-desc{color:#6b7280;font-size:.875rem;max-width:48rem;margin:0 auto;line-height:1.625}

@keyframes slideInFromRight{0%{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
.svc-animate{animation:.8s ease-out forwards slideInFromRight}

/* Desktop grid (hidden on mobile) */
.svc-desktop-only{display:none}
@media(min-width:768px){.svc-desktop-only{display:block}.svc-mobile-only{display:none!important}}
/* Mobile swiper (hidden on desktop) */
.svc-mobile-only{display:block}

.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;position:relative;z-index:10}

.svc-card{position:relative;border-radius:1rem;padding:1.5rem;overflow:hidden;text-align:start;transition:transform .3s}
.svc-card:hover{transform:scale(1.02)}

.svc-card-content{position:relative;z-index:10;display:flex;flex-direction:column;height:100%}
.svc-card h3{color:#fff;font-size:1.125rem;font-weight:700;margin-bottom:.75rem;line-height:1.25}
.svc-card p{color:rgba(255,255,255,0.8);font-size:.875rem;margin-bottom:1.25rem;line-height:1.625;flex-grow:1}
.svc-link{color:#fff;font-size:.875rem;font-weight:600;display:flex;align-items:center;gap:.5rem;transition:all .3s;margin-top:auto}
.svc-link:hover{gap:.75rem}

/* Swiper pagination dots */
.svc-pagination{text-align:center;margin-top:1rem}
.svc-pagination .swiper-pagination-bullet{background:rgba(255,255,255,0.3);opacity:1;width:8px;height:8px;margin:0 4px!important}
.svc-pagination .swiper-pagination-bullet-active{background:#152441}

.blur-abs{position:absolute;opacity:.15;z-index:0;pointer-events:none}
.blur-abs.tr{top:10%;right:-5%;width:400px}
.blur-abs.bl{bottom:10%;left:-5%;width:400px}

/* ============ METHODOLOGY ============ */
.method-section{background:#0a0a0f;padding:5rem 0;position:relative;overflow:hidden;min-height:auto;text-align:start}
@media(max-width:640px){.method-section{padding:3rem 0}.method-subdesc{font-size:.9rem}}
.method-rocket{position:absolute;left:0;top:0;z-index:1;max-width:300px;pointer-events:none}
.method-blur-1{position:absolute;left:0;top:0;z-index:2;opacity:.5;pointer-events:none}
.method-blur-2{position:absolute;right:0;top:0;z-index:2;opacity:.5;pointer-events:none}

.method-badge{display:inline-block;padding:.5rem 1rem;border-radius:9999px;border:1px solid rgba(55,65,81,1);color:#d1d5db;font-size:.875rem;margin-bottom:1.5rem}
.method-heading{font-size:2.5rem;font-weight:700;margin-bottom:1.5rem;line-height:1.3}
@media(min-width:768px){.method-heading{font-size:3rem}}
.method-subdesc{color:#9ca3af;font-size:1.125rem;max-width:48rem;margin:0 auto;line-height:1.625}

.method-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;max-width:64rem;margin:0 auto}
@media(min-width:768px){.method-grid{grid-template-columns:repeat(2,1fr)}}

.method-card{display:flex;align-items:center;gap:1rem;background:#141529;border-radius:.75rem;padding:1.25rem;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1)}
.method-num{flex-shrink:0;width:3rem;height:3rem;background:#cca63c;border-radius:.5rem;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;font-weight:700}
.method-card-text{flex:1}
.method-card h3{color:#fff;font-size:1.25rem;font-weight:600;margin-bottom:.25rem}
.method-card p{color:#fff;font-size:.875rem;line-height:1.4}

/* ============ PORTFOLIO ============ */
.portfolio-section{background:#000;color:#fff;padding:2rem 1rem;overflow:hidden;position:relative;text-align:start}
@media(min-width:640px){.portfolio-section{padding:4rem 1rem}}
@media(max-width:640px){.port-title{font-size:1.5rem}.port-desc{font-size:.875rem}}
.port-light{position:absolute;right:20%;z-index:0;pointer-events:none;opacity:.6}

.port-desktop{display:none}
@media(min-width:1024px){.port-desktop{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}.port-mobile{display:none!important}}
.port-mobile{display:block}

.port-images-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.port-img-card{border-radius:1.5rem;overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25)}
.port-aspect-tall{aspect-ratio:4/5}
.port-aspect-wide{aspect-ratio:4/3}
.port-img-bg{width:100%;height:100%;background:linear-gradient(to bottom right,#1f2937,#111827)}

.port-text-panel{display:flex;flex-direction:column;justify-content:center;padding-inline-start:2rem}
.port-text-inner{padding:2rem;display:flex;flex-direction:column;gap:1.5rem}
.port-label{font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#e5e7eb;border-bottom:2px solid #eab308;display:inline-block;padding-bottom:.25rem}
.port-title{font-size:2rem;font-weight:700;line-height:1.25}
@media(min-width:1280px){.port-title{font-size:2.5rem}}
.port-desc{color:#9ca3af;font-size:1rem;line-height:1.625}
.port-btn{display:inline-flex;align-items:center;gap:.75rem;padding:.75rem 1.5rem;background:#152441;border-radius:9999px;color:#fff;font-weight:600;font-size:.875rem;transition:all .3s;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1)}
.port-btn:hover{transform:scale(1.05);box-shadow:0 20px 25px -5px rgba(0,0,0,0.25)}

.port-mobile-scroll{display:flex;gap:1rem;overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x mandatory}
.port-mobile-slide{flex-shrink:0;width:85%;scroll-snap-align:start}

/* Portfolio/Projects Swiper pagination */
.port-pagination .swiper-pagination-bullet,.proj-pagination .swiper-pagination-bullet{background:rgba(255,255,255,0.3);opacity:1;width:8px;height:8px;margin:0 4px!important}
.port-pagination .swiper-pagination-bullet-active,.proj-pagination .swiper-pagination-bullet-active{background:#152441}

/* Projects desktop/mobile toggle */
.proj-desktop-only{display:none}
@media(min-width:768px){.proj-desktop-only{display:block}.proj-mobile-only{display:none!important}}
.proj-mobile-only{display:block}

/* ============ CONTACT ============ */
.contact-section{background:#0a0a0f;padding:2rem 1rem;position:relative;overflow:visible;text-align:start;min-height:auto;display:flex;align-items:center}
@media(max-width:640px){.contact-section{padding:2rem .75rem}.contact-form-card{padding:1rem 1.25rem}.contact-title{font-size:1.25rem}}
@media(min-width:640px){.contact-section{padding:3rem 1.5rem}}
@media(min-width:768px){.contact-section{padding:4rem 2rem}}
.contact-star{position:absolute;width:7.5rem;top:2.5rem;left:2.5rem;opacity:.8;pointer-events:none}

.contact-layout{display:flex;flex-direction:column;gap:1.5rem;max-width:100%;margin:0 auto;width:100%}
@media(min-width:768px){.contact-layout{flex-direction:row;gap:1.5rem}}

.contact-img-side{display:flex;justify-content:center;width:100%}
@media(min-width:768px){.contact-img-side{width:50%;justify-content:flex-end}}
.contact-img-wrap{position:relative;width:100%;max-width:480px;border-radius:1rem;overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25)}
.contact-img-wrap>img:first-child{width:100%;height:100%;object-fit:cover}
.contact-img-blur{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:10;pointer-events:none}

.contact-form-side{display:flex;justify-content:center;width:100%}
@media(min-width:768px){.contact-form-side{width:50%;justify-content:flex-start}}
.contact-form-card{width:100%;max-width:760px;border-radius:1rem;padding:1.5rem 2rem;background:linear-gradient(to bottom right,rgba(255,255,255,0.03),rgba(255,255,255,0.06));border:1px solid rgba(255,255,255,0.06);backdrop-filter:blur(12px);box-shadow:0 20px 25px -5px rgba(0,0,0,0.1);display:flex;flex-direction:column;justify-content:center}

.contact-label{font-size:.75rem;color:#9ca3af;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}
.contact-title{font-size:1.5rem;font-weight:600;color:#fff;line-height:1.3;margin-bottom:1.5rem}
@media(min-width:640px){.contact-title{font-size:1.875rem}}

.contact-form-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:640px){.contact-form-grid{grid-template-columns:1fr 1fr}}
.form-group-full{grid-column:1/-1}

.input-icon-wrap{position:relative}
.input-icon-wrap>svg:first-child{position:absolute;inset-inline-start:.75rem;top:50%;transform:translateY(-50%)}
.input-icon-wrap input,.input-icon-wrap select{width:100%;padding:.5rem .75rem;padding-inline-start:2.25rem;background:#0f1113;border:1px solid rgba(55,65,81,1);border-radius:9999px;color:#fff;font-size:.875rem;transition:border-color .3s,box-shadow .3s;appearance:none}
.input-icon-wrap input::placeholder{color:#9ca3af}
.input-icon-wrap input:focus,.input-icon-wrap select:focus{outline:none;border-color:rgba(142,45,226,0.5);box-shadow:0 0 0 2px rgba(142,45,226,0.3)}
.select-arrow{position:absolute;inset-inline-end:.75rem;top:50%;transform:translateY(-50%);pointer-events:none}
.input-icon-wrap select option{background:#0a0a0f;color:#fff}

.btn-submit{width:100%;padding:.75rem;background:#152441;border:none;border-radius:9999px;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;gap:.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1)}
.btn-submit:hover{transform:scale(1.05);box-shadow:0 15px 40px rgba(21,36,65,0.4)}

.form-success{background:rgba(34,197,94,0.15);border:1px solid rgba(34,197,94,0.4);border-radius:.75rem;padding:1rem;text-align:center;margin-bottom:1rem;color:#22c55e}
.form-error{background:rgba(239,68,68,0.15);border:1px solid rgba(239,68,68,0.4);border-radius:.75rem;padding:1rem;text-align:center;margin-bottom:1rem;color:#ef4444}

/* ============ FOOTER ============ */
.site-footer{background:#0A0A0F;color:#fff;padding:2rem;position:relative}
@media(max-width:640px){.site-footer{padding:1.5rem 1rem}.footer-grid{gap:1.5rem}}
.footer-inner{max-width:80rem;margin:0 auto;position:relative;z-index:20}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2rem;margin-bottom:2rem}
@media(min-width:768px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr 1.5fr}}

.footer-brand p{color:#99a1af;font-size:.875rem;line-height:1.625;margin-top:1rem;margin-bottom:1.5rem}
.footer-social{display:flex;gap:.75rem}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;background:rgba(29,41,61,0.5);border:1px solid rgba(49,65,88,0.5);border-radius:.5rem;color:#99a1af;font-size:1rem;transition:all .3s}
.footer-social a:hover{background:rgba(49,65,88,1);color:#fff;transform:translateY(-3px)}

.footer-col h4{font-size:1rem;font-weight:700;margin-bottom:1rem}
.footer-col ul li{margin-bottom:.5rem}
.footer-col ul li a{color:#99a1af;font-size:.875rem;transition:color .2s}
.footer-col ul li a:hover{color:#c07eff}

.footer-contact-info{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.25rem}
.footer-contact-info a{color:#99a1af;font-size:.875rem;display:flex;align-items:center;gap:.5rem;transition:color .2s}
.footer-contact-info a:hover{color:#c07eff}

.footer-countries{margin-top:1rem}
.footer-countries p{color:#99a1af;font-size:.75rem;margin-bottom:.5rem}
.country-flags{display:flex;flex-wrap:wrap;gap:.5rem}
.country-flags img{width:28px;height:28px;border-radius:.375rem;object-fit:cover}

.footer-bottom{border-top:1px solid rgba(30,41,61,0.5);padding-top:1.5rem;margin-top:1.5rem;text-align:center}
.footer-bottom p{font-size:.75rem;color:#6a7282}

/* ============ PROJECT SHOWCASE (marquee) ============ */
.marquee-wrap{overflow:hidden;position:relative;width:100%}
.marquee-track{display:flex;gap:1.5rem;width:max-content}
.marquee-track:hover{animation-play-state:paused}
.marquee-track{animation:marqueeRTL 40s linear infinite}
@keyframes marqueeRTL{0%{transform:translateX(0)}100%{transform:translateX(50%)}}

/* ============ BLOG ============ */
.blog-section{background:#0a0a0f;padding:5rem 0;position:relative}
@media(max-width:640px){.blog-section{padding:3rem 0}.blog-card-title{font-size:.95rem}.blog-card-excerpt{font-size:.8rem}}

/* Blog desktop/mobile toggle */
.blog-desktop-only{display:none}
@media(min-width:768px){.blog-desktop-only{display:block}.blog-mobile-only{display:none!important}}
.blog-mobile-only{display:block}

.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
@media(min-width:1024px){.blog-grid{grid-template-columns:repeat(3,1fr)}}

/* Blog Swiper pagination */
.blog-pagination .swiper-pagination-bullet{background:rgba(255,255,255,0.3);opacity:1;width:8px;height:8px;margin:0 4px!important}
.blog-pagination .swiper-pagination-bullet-active{background:#a855f7}

.blog-card{background:rgba(29,41,61,0.3);border:1px solid rgba(49,65,88,0.4);border-radius:1rem;overflow:hidden;transition:all .3s;display:flex;flex-direction:column}
.blog-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,0.4);border-color:rgba(142,45,226,0.4)}

.blog-card-img{width:100%;aspect-ratio:16/10;overflow:hidden}
.blog-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.blog-card:hover .blog-card-img img{transform:scale(1.05)}

.blog-card-body{padding:1.25rem;display:flex;flex-direction:column;flex-grow:1}
.blog-card-meta{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem;flex-direction:row-reverse;justify-content:flex-end}
.blog-category{font-size:.7rem;font-weight:600;color:#a855f7;background:rgba(168,85,247,0.12);padding:.2rem .6rem;border-radius:9999px}
.blog-date{font-size:.75rem;color:#6b7280}

.blog-card-title{font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:.5rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-card-excerpt{font-size:.85rem;color:#9ca3af;line-height:1.6;margin-bottom:1rem;flex-grow:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-read-more{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:600;color:#fac800;transition:gap .3s;margin-top:auto}
.blog-read-more:hover{gap:.75rem;color:#edb200}

/* ============ ANIMATIONS ============ */
.fade-in-up{opacity:0;transform:translateY(60px);transition:all .8s ease-out}
.fade-in-up.visible{opacity:1;transform:translateY(0)}

/* ============ DEDICATED PAGES (portfolio.php, blog.php) ============ */
.page-hero{background:linear-gradient(to bottom,#0f0f1a,#0a0a0f);padding:6rem 0 3rem;text-align:center;position:relative}
@media(max-width:640px){.page-hero{padding:4rem 0 2rem}}

.page-content-section{background:#0a0a0f;padding:2rem 0 5rem}
@media(max-width:640px){.page-content-section{padding:1.5rem 0 3rem}}

.page-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:768px){.page-grid{grid-template-columns:repeat(2,1fr)}}

.page-grid-blog{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:640px){.page-grid-blog{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.page-grid-blog{grid-template-columns:repeat(3,1fr)}}

.post-back{display:inline-flex;align-items:center;gap:.5rem;color:#9ca3af;font-size:.875rem;transition:color .3s}
.post-back:hover{color:#fff}

/* ============ PROJECT DETAIL (project.php) ============ */
.proj-hero{background:linear-gradient(to bottom,#0f0f1a,#0a0a0f);padding:6rem 0 3rem;position:relative}
@media(max-width:640px){.proj-hero{padding:4rem 0 2rem}}
.proj-hero-content{display:flex;flex-direction:column;gap:2.5rem;align-items:center}
@media(min-width:768px){.proj-hero-content{flex-direction:row;gap:3rem;align-items:center}}
.proj-hero-text{flex:1}
.proj-hero-title{font-size:2.25rem;font-weight:800;color:#fff;line-height:1.3;margin-bottom:1.25rem}
@media(min-width:768px){.proj-hero-title{font-size:3rem}}
.proj-hero-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.proj-tag{padding:.35rem 1rem;border-radius:9999px;font-size:.8rem;font-weight:600;background:rgba(139,92,246,0.15);color:#a78bfa;border:1px solid rgba(139,92,246,0.3)}
.proj-tag-featured{background:rgba(250,200,0,0.15);color:#fac800;border-color:rgba(250,200,0,0.3)}
.proj-hero-img{flex:1;max-width:500px;border-radius:1rem;overflow:hidden;box-shadow:0 25px 50px rgba(0,0,0,0.4)}
.proj-hero-img img{width:100%;height:auto;display:block}

.proj-info-section{background:#0a0a0f;padding:2.5rem 0;border-top:1px solid rgba(49,65,88,0.3);border-bottom:1px solid rgba(49,65,88,0.3)}
.proj-info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
@media(min-width:640px){.proj-info-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.proj-info-grid{grid-template-columns:repeat(5,1fr)}}
.proj-info-item{text-align:center}
.proj-info-label{display:block;font-size:.75rem;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}
.proj-info-value{display:block;font-size:1rem;font-weight:600;color:#fff}
.proj-info-link{display:block;font-size:1rem;font-weight:600;color:#a78bfa;transition:color .3s}
.proj-info-link:hover{color:#c4b5fd}

/* Project section titles */
.proj-section-title{font-size:1.35rem;font-weight:700;color:#fff;margin-bottom:1.5rem;display:flex;align-items:center;gap:.75rem}
.proj-section-title svg{flex-shrink:0;color:#a78bfa}

/* Services & Technologies tags */
.proj-services-section,.proj-tech-section{background:#0a0a0f;padding:2rem 0}
.proj-tags-grid{display:flex;flex-wrap:wrap;gap:.75rem}
.proj-service-tag{padding:.5rem 1.25rem;border-radius:9999px;font-size:.85rem;font-weight:500;background:rgba(139,92,246,0.1);color:#c4b5fd;border:1px solid rgba(139,92,246,0.25);transition:all .3s}
.proj-service-tag:hover{background:rgba(139,92,246,0.2);border-color:rgba(139,92,246,0.4)}
.proj-tech-tag{padding:.5rem 1.25rem;border-radius:9999px;font-size:.85rem;font-weight:500;background:rgba(59,130,246,0.1);color:#93c5fd;border:1px solid rgba(59,130,246,0.25);transition:all .3s}
.proj-tech-tag:hover{background:rgba(59,130,246,0.2);border-color:rgba(59,130,246,0.4)}

/* Challenge & Solution */
.proj-cs-section{background:#0a0a0f;padding:2.5rem 0}
.proj-cs-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:768px){.proj-cs-grid{grid-template-columns:1fr 1fr}}
.proj-cs-card{padding:2rem;border-radius:1rem;border:1px solid rgba(49,65,88,0.3);position:relative;overflow:hidden}
.proj-cs-challenge{background:rgba(245,158,11,0.04);border-color:rgba(245,158,11,0.2)}
.proj-cs-solution{background:rgba(34,197,94,0.04);border-color:rgba(34,197,94,0.2)}
.proj-cs-icon{margin-bottom:1rem}
.proj-cs-card h3{font-size:1.2rem;font-weight:700;color:#fff;margin-bottom:1rem}
.proj-cs-card p{font-size:.95rem;line-height:1.9;color:#d1d5db}

.proj-desc-section{background:#0a0a0f;padding:2.5rem 0}
.proj-desc-text{font-size:1.1rem;line-height:2;color:#d1d5db;text-align:start}
.max-w-4xl{max-width:56rem;margin:0 auto}

.proj-showcase{background:#0a0a0f;padding:0 0 3.5rem}
.proj-showcase-img{border-radius:1rem;overflow:hidden;border:1px solid rgba(49,65,88,0.3);box-shadow:0 20px 40px rgba(0,0,0,0.3)}
.proj-showcase-img img{width:100%;height:auto;display:block}

/* Results */
.proj-results-section{background:#0a0a0f;padding:3rem 0}
.proj-results-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:640px){.proj-results-grid{grid-template-columns:repeat(2,1fr)}}
.proj-result-card{display:flex;align-items:flex-start;gap:1rem;padding:1.25rem 1.5rem;border-radius:.75rem;background:rgba(139,92,246,0.05);border:1px solid rgba(139,92,246,0.15);transition:all .3s}
.proj-result-card:hover{border-color:rgba(139,92,246,0.3);background:rgba(139,92,246,0.08)}
.proj-result-icon{flex-shrink:0;width:2.5rem;height:2.5rem;background:rgba(139,92,246,0.1);border-radius:.5rem;display:flex;align-items:center;justify-content:center}
.proj-result-text{font-size:.95rem;font-weight:500;color:#e5e7eb;line-height:1.6}

/* Testimonial */
.proj-testimonial-section{background:#0a0a0f;padding:2rem 0 3rem}
.proj-testimonial-card{position:relative;padding:2.5rem;border-radius:1.25rem;background:linear-gradient(135deg,rgba(139,92,246,0.06),rgba(59,130,246,0.04));border:1px solid rgba(139,92,246,0.2);text-align:center}
.proj-testimonial-quote{margin-bottom:1.5rem}
.proj-testimonial-text{font-size:1.15rem;line-height:2;color:#d1d5db;font-style:italic;margin-bottom:1.5rem;max-width:40rem;margin-left:auto;margin-right:auto}
.proj-testimonial-author{display:flex;align-items:center;justify-content:center;gap:.75rem}
.proj-testimonial-avatar{width:2.5rem;height:2.5rem;border-radius:50%;background:linear-gradient(135deg,#8E2DE2,#F5A623);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.9rem}
.proj-testimonial-author span{font-size:.9rem;color:#9ca3af;font-weight:500}

.proj-cta-section{background:linear-gradient(to bottom,#0a0a0f,#0f0f1a);padding:4rem 0}
.proj-cta-title{font-size:1.75rem;font-weight:700;color:#fff;margin-bottom:1rem}
@media(min-width:768px){.proj-cta-title{font-size:2.25rem}}
.proj-cta-desc{color:#9ca3af;font-size:1rem;line-height:1.7;margin-bottom:2rem;max-width:36rem;margin-left:auto;margin-right:auto}
.proj-cta-actions{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}
.proj-cta-outline{background:transparent!important;border:1px solid rgba(139,92,246,0.5);box-shadow:none!important}
.proj-cta-outline:hover{border-color:rgba(139,92,246,0.8);box-shadow:0 0 20px rgba(139,92,246,0.2)!important}

.proj-similar-section{background:#0a0a0f;padding:3rem 0 5rem}
.proj-similar-heading{font-size:1.5rem;font-weight:700;color:#fff;margin-bottom:2rem;text-align:center}
.proj-similar-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:640px){.proj-similar-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.proj-similar-grid{grid-template-columns:repeat(3,1fr)}}
.proj-similar-card{display:block;border-radius:1rem;overflow:hidden;background:rgba(29,41,61,0.2);border:1px solid rgba(49,65,88,0.3);transition:all .3s;text-decoration:none}
.proj-similar-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,0.3);border-color:rgba(139,92,246,0.4)}
.proj-similar-img{width:100%;aspect-ratio:16/10;overflow:hidden}
.proj-similar-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.proj-similar-card:hover .proj-similar-img img{transform:scale(1.05)}
.proj-similar-info{padding:1.25rem}
.proj-similar-info h4{font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:.4rem}
.proj-similar-cat{font-size:.8rem;color:#9ca3af}

/* ============ PORTFOLIO CARDS ============ */
.portfolio-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:640px){.portfolio-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.portfolio-grid{grid-template-columns:repeat(2,1fr);gap:2rem}}

.portfolio-card{display:block;border-radius:1rem;overflow:hidden;background:rgba(20,21,41,0.6);border:1px solid rgba(49,65,88,0.3);transition:all .4s;text-decoration:none}
.portfolio-card:hover{transform:translateY(-8px);box-shadow:0 25px 50px rgba(0,0,0,0.4);border-color:rgba(139,92,246,0.4)}

.portfolio-card-img{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,#443E5D,#1A1A3C)}
.portfolio-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.portfolio-card:hover .portfolio-card-img img{transform:scale(1.08)}

.portfolio-card-badge{position:absolute;top:.75rem;right:.75rem;z-index:5;background:rgba(250,200,0,0.9);color:#0a0a0f;font-size:.7rem;font-weight:700;padding:.25rem .75rem;border-radius:9999px}

.portfolio-card-overlay{position:absolute;inset:0;background:rgba(10,10,15,0.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .4s;z-index:3}
.portfolio-card:hover .portfolio-card-overlay{opacity:1}
.portfolio-card-view{padding:.5rem 1.5rem;border:1px solid rgba(255,255,255,0.6);border-radius:9999px;color:#fff;font-size:.85rem;font-weight:600;backdrop-filter:blur(4px);transition:all .3s}
.portfolio-card-view:hover{background:rgba(255,255,255,0.1)}

.portfolio-card-body{padding:1.25rem 1.5rem}
.portfolio-card-title{font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:.35rem}
.portfolio-card-cat{font-size:.8rem;color:#9ca3af}

/* ============ PROJECT GALLERY ============ */
.proj-gallery-section{background:#0a0a0f;padding:3rem 0}
.proj-gallery-title{font-size:1.5rem;font-weight:700;color:#fff;margin-bottom:2rem;text-align:center}
.proj-gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:768px){.proj-gallery-grid{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
@media(min-width:1024px){.proj-gallery-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.proj-gallery-item{position:relative;border-radius:1rem;overflow:hidden;cursor:pointer;aspect-ratio:4/3;background:rgba(20,21,41,0.4);border:1px solid rgba(49,65,88,0.3);transition:all .3s}
.proj-gallery-item:hover{transform:translateY(-4px);box-shadow:0 15px 30px rgba(0,0,0,0.3);border-color:rgba(139,92,246,0.4)}
.proj-gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.proj-gallery-item:hover img{transform:scale(1.05)}
.proj-gallery-hover{position:absolute;inset:0;background:rgba(10,10,15,0.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
.proj-gallery-item:hover .proj-gallery-hover{opacity:1}
.proj-gallery-hover svg{width:2rem;height:2rem;color:#fff;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.4))}

/* ============ LIGHTBOX ============ */
.proj-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.92);display:none;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.proj-lightbox.active{display:flex}
.proj-lightbox-close{position:absolute;top:1.5rem;right:1.5rem;width:2.5rem;height:2.5rem;border-radius:50%;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.25rem;transition:all .2s;z-index:10}
.proj-lightbox-close:hover{background:rgba(255,255,255,0.2)}
#lightboxImg{max-width:90vw;max-height:85vh;border-radius:.75rem;object-fit:contain;box-shadow:0 25px 60px rgba(0,0,0,0.5)}