/* ==== Style Block 1 ==== */
html{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased}
.nav-link{position:relative}.nav-link::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:#fff;transition:width .3s ease}.nav-link:hover::after{width:100%}
.nav-scrolled .nav-link::after{background:#1f5696}
.nav-light .nav-link::after{background:#1f5696}
.nav-light .nav-link{color:#111827 !important}
.nav-light #mobileMenuBtn{color:#111827 !important}
.product-card{transition:transform .4s cubic-bezier(.25,.46,.45,.94),box-shadow .4s ease}
.product-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px -12px rgba(31,86,150,.18)}
.product-card img{transition:transform .6s cubic-bezier(.25,.46,.45,.94)}
.product-card:hover img{transform:scale(1.05)}
.scene-card{overflow:hidden;position:relative}
.scene-card img{transition:transform .6s ease}
.scene-card:hover img{transform:scale(1.08)}
.scene-overlay{background:linear-gradient(to top,rgba(21,47,79,.85) 0%,rgba(21,47,79,.2) 50%,transparent 100%)}
.fade-in{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}
/* Carousel */
.carousel-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease-in-out}
.carousel-slide.active{opacity:1}
.carousel-slide img{width:100%;height:100%;object-fit:cover}
.carousel-dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:all .3s ease}
.carousel-dot.active{background:#fff;width:32px;border-radius:6px}
.carousel-arrow{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.15);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:all .3s ease;border:none}
.carousel-arrow:hover{background:rgba(255,255,255,.3)}
/* ===== Dropdown Menu ===== */
.nav-dropdown{position:relative;display:inline-block}
.nav-dropdown .dropdown-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);opacity:0;visibility:hidden;transition:all .15s ease;background:#ffffff;border-radius:0 0 10px 10px;box-shadow:0 12px 32px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.06);padding:14px 0 8px 0;min-width:200px;z-index:200;pointer-events:none;margin-top:-1px}
.nav-dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%);pointer-events:auto}
.nav-dropdown .dropdown-menu::before{content:'';position:absolute;top:-4px;left:50%;transform:translateX(-50%) rotate(45deg);width:10px;height:10px;background:#fff;box-shadow:-1px -1px 2px rgba(0,0,0,.04)}
.dropdown-item{display:block;padding:10px 20px;border-radius:0;transition:all .15s;text-decoration:none;color:#1f2937!important;font-size:.9rem;line-height:1.4}
.dropdown-item:hover{background:#eff6ff;color:#1d4ed8!important;padding-left:24px}


.dropdown-title{font-weight:500;color:#1f2937!important;line-height:1.4}
.dropdown-desc{font-size:.72rem;color:#9ca3af;margin-top:1px;line-height:1.3}


/* ===== 3D Effects for Carousel ===== */
.scene-3d{perspective:1400px}
.cube-3d{width:260px;height:260px;position:relative;transform-style:preserve-3d;animation:cubeRotate 18s infinite linear}
.cube-face{position:absolute;width:260px;height:260px;display:flex;align-items:center;justify-content:center;font-size:2.8rem;font-weight:900;color:#fff;letter-spacing:2px;border:2px solid rgba(255,255,255,.35);backdrop-filter:blur(6px);box-shadow:0 0 60px rgba(43,109,181,.5),inset 0 0 40px rgba(255,255,255,.1)}
.cube-front{transform:translateZ(130px);background:linear-gradient(135deg,rgba(31,86,150,.92),rgba(43,109,181,.75))}
.cube-back{transform:rotateY(180deg) translateZ(130px);background:linear-gradient(135deg,rgba(217,119,6,.92),rgba(245,158,11,.75))}
.cube-right{transform:rotateY(90deg) translateZ(130px);background:linear-gradient(135deg,rgba(124,58,237,.92),rgba(167,139,250,.75))}
.cube-left{transform:rotateY(-90deg) translateZ(130px);background:linear-gradient(135deg,rgba(5,150,105,.92),rgba(52,211,153,.75))}
.cube-top{transform:rotateX(90deg) translateZ(130px);background:linear-gradient(135deg,rgba(220,38,38,.92),rgba(248,113,113,.75))}
.cube-bottom{transform:rotateX(-90deg) translateZ(130px);background:linear-gradient(135deg,rgba(8,145,178,.92),rgba(34,211,238,.75))}
@keyframes cubeRotate{0%{transform:rotateX(-25deg) rotateY(0)}100%{transform:rotateX(-25deg) rotateY(360deg)}}

.layer-3d-wrap{perspective:1200px}
.layer-3d{position:relative;width:300px;height:300px;transform-style:preserve-3d;animation:spin3d 16s linear infinite}
.layer-ring{position:absolute;border-radius:50%;border:2px solid;display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff}
.layer-1{inset:0;border-color:rgba(6,182,212,.6);background:radial-gradient(circle,rgba(6,182,212,.15),transparent);transform:translateZ(0)}
.layer-2{inset:24px;border-color:rgba(124,58,237,.6);background:radial-gradient(circle,rgba(124,58,237,.2),transparent);transform:translateZ(50px)}
.layer-3{inset:52px;border-color:rgba(236,72,153,.6);background:radial-gradient(circle,rgba(236,72,153,.25),transparent);transform:translateZ(100px);font-size:3.5rem;letter-spacing:4px}
@keyframes spin3d{0%{transform:rotateY(0) rotateX(15deg)}100%{transform:rotateY(360deg) rotateX(15deg)}}

.float-badge{position:absolute;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;box-shadow:0 8px 32px rgba(0,0,0,.3)}
.badge-1{width:56px;height:56px;font-size:.75rem;background:linear-gradient(135deg,#f59e0b,#d97706);top:-12px;right:-8px;transform:translateZ(130px);animation:floatBadge1 3.5s ease-in-out infinite}
.badge-2{width:64px;height:64px;font-size:.8rem;background:linear-gradient(135deg,#06b6d4,#0891b2);bottom:0;left:-16px;transform:translateZ(110px);animation:floatBadge2 4.2s ease-in-out infinite .6s}
.badge-3{width:48px;height:48px;font-size:.7rem;background:linear-gradient(135deg,#ec4899,#db2777);top:40%;left:-24px;transform:translateZ(140px);animation:floatBadge1 3s ease-in-out infinite 1.2s}
@keyframes floatBadge1{0%,100%{transform:translateZ(130px) translateY(0)}50%{transform:translateZ(150px) translateY(-18px)}}
@keyframes floatBadge2{0%,100%{transform:translateZ(110px) translateY(0)}50%{transform:translateZ(130px) translateY(-14px)}}

.particles{position:absolute;inset:0;overflow:hidden}
.particle{position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.6);animation:particleFloat linear infinite}
@keyframes particleFloat{0%{transform:translateY(100vh) scale(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-10vh) scale(1);opacity:0}}

.glow-text{text-shadow:0 0 40px rgba(43,109,181,.6),0 0 80px rgba(43,109,181,.3)}
/* ===== Billboard 3D Screen ===== */
.billboard-wrap{position:relative}
.billboard-frame{background:linear-gradient(145deg,#4b5563,#1f2937);padding:12px;border-radius:10px;box-shadow:0 30px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1)}
.billboard-screen{position:relative;overflow:hidden;border-radius:4px;background:#000}
.billboard-screen::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1px);background-size:3px 3px;pointer-events:none;z-index:10}
.billboard-screen::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.08) 0%,transparent 40%,transparent 60%,rgba(0,0,0,.25) 100%);pointer-events:none;z-index:11}
.billboard-pole{width:24px;height:110px;margin:0 auto;background:linear-gradient(to right,#4b5563,#9ca3af 30%,#d1d5db 50%,#9ca3af 70%,#4b5563);border-radius:0 0 6px 6px;box-shadow:4px 0 10px rgba(0,0,0,.3)}
.billboard-base{width:90px;height:14px;margin:0 auto;background:linear-gradient(to bottom,#6b7280,#374151);border-radius:4px;box-shadow:0 4px 8px rgba(0,0,0,.4)}
.screen-glow{position:absolute;inset:-30px;border-radius:30px;background:radial-gradient(ellipse at center,rgba(43,109,181,.35),transparent 70%);filter:blur(25px);z-index:-1;animation:glowPulse 4s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.7}50%{opacity:1}}

/* Small 3D cube inside screen */
.cube-sm{width:85px;height:85px;position:relative;transform-style:preserve-3d;animation:cubeSmRotate 10s infinite linear}
.cube-sm-face{position:absolute;width:85px;height:85px;display:flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:800;color:#fff;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(2px);box-shadow:inset 0 0 20px rgba(255,255,255,.1)}
.cube-sm-front{transform:translateZ(42.5px);background:linear-gradient(135deg,rgba(43,109,181,.95),rgba(31,86,150,.8))}
.cube-sm-back{transform:rotateY(180deg) translateZ(42.5px);background:linear-gradient(135deg,rgba(245,158,11,.95),rgba(217,119,6,.8))}
.cube-sm-right{transform:rotateY(90deg) translateZ(42.5px);background:linear-gradient(135deg,rgba(139,92,246,.95),rgba(124,58,237,.8))}
.cube-sm-left{transform:rotateY(-90deg) translateZ(42.5px);background:linear-gradient(135deg,rgba(16,185,129,.95),rgba(5,150,105,.8))}
.cube-sm-top{transform:rotateX(90deg) translateZ(42.5px);background:linear-gradient(135deg,rgba(236,72,153,.95),rgba(219,39,119,.8))}
.cube-sm-bottom{transform:rotateX(-90deg) translateZ(42.5px);background:linear-gradient(135deg,rgba(6,182,212,.95),rgba(8,145,178,.8))}
@keyframes cubeSmRotate{0%{transform:rotateX(-22deg) rotateY(0)}100%{transform:rotateX(-22deg) rotateY(360deg)}}

/* Small 3D layers inside screen */
.layers-sm{position:relative;width:130px;height:130px;transform-style:preserve-3d;animation:layersSmSpin 14s linear infinite}
.layer-sm-ring{position:absolute;border-radius:50%;border:2px solid;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;backdrop-filter:blur(2px)}
.layer-sm-1{inset:0;border-color:rgba(6,182,212,.7);background:radial-gradient(circle,rgba(6,182,212,.12),transparent);transform:translateZ(0)}
.layer-sm-2{inset:16px;border-color:rgba(139,92,246,.7);background:radial-gradient(circle,rgba(139,92,246,.18),transparent);transform:translateZ(28px)}
.layer-sm-3{inset:36px;border-color:rgba(236,72,153,.7);background:radial-gradient(circle,rgba(236,72,153,.22),transparent);transform:translateZ(56px);font-size:1.4rem;letter-spacing:2px}
@keyframes layersSmSpin{0%{transform:rotateY(0) rotateX(12deg)}100%{transform:rotateY(360deg) rotateX(12deg)}}

/* Building facade */
.building-top{position:absolute;top:-10px;left:-6px;right:-6px;height:12px;background:linear-gradient(to bottom,#6b7280,#374151);border-radius:4px 4px 0 0}
.building-bottom{display:flex;gap:3px;margin-top:0}
.building-col{flex:1;height:60px;background:linear-gradient(to bottom,#4b5563,#1f2937);border-radius:0 0 4px 4px}
.building-col-mid{width:10px;height:60px;background:#374151}
/* ===== Screen Overlay for 3D on real billboard ===== */
.screen-overlay{position:absolute;overflow:hidden;z-index:2}
.screen-overlay::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px);background-size:3px 3px;pointer-events:none;z-index:5}
.screen-overlay::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,transparent 40%,transparent 60%,rgba(0,0,0,.15) 100%);pointer-events:none;z-index:6}

/* ==== Style Block 2 ==== */
.page-content{display:none}
.page-content.active{display:block}
body.sub-page #navbar{background:rgba(255,255,255,.95)!important;backdrop-filter:blur(4px)!important;box-shadow:0 1px 3px rgba(0,0,0,.08)!important}
body.sub-page #navbar .nav-link{color:#374151!important}
body.sub-page #navbar .nav-link:hover{color:#1f5696!important}
body.sub-page #navbar .nav-link::after{background:#1f5696!important}
body.sub-page #navbar #mobileMenuBtn{color:#374151!important}
body.sub-page .nav-link.active{color:#1f5696!important}
body.sub-page .nav-link.active::after{width:100%!important}