/* === EVS MODERN THEME OVERRIDES === */

/* 1. Header — Fast silver shine sweep */
.header-title{background:linear-gradient(90deg,#aaa 0%,#d0d0d0 15%,#fff 25%,#f0f0f0 35%,#fff 45%,#d0d0d0 60%,#aaa 75%,#d0d0d0 85%,#fff 100%)!important;background-size:300% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important;animation:silverShine 1.5s ease-in-out infinite!important;text-shadow:none!important;transition:letter-spacing 1s ease,filter .3s!important}
.header-title:hover{filter:brightness(1.5) drop-shadow(0 0 10px rgba(255,255,255,.8))!important;letter-spacing:3px!important}
@keyframes silverShine{0%{background-position:100% center}50%{background-position:0% center}100%{background-position:100% center}}

/* 1b. Logo — no hover glow, no rotation (clean) */
.logo-container{position:relative!important}
.logo-container img{transition:opacity .6s ease!important}

/* 1c. Plexus dots — blue glow, animated gradient on canvas */
.particle-glow{background:radial-gradient(circle,rgba(30,144,255,.25) 0%,rgba(30,144,255,.08) 40%,transparent 70%)!important}
#plexus canvas{filter:hue-rotate(200deg) saturate(1.5) brightness(1.2)!important}

/* Header glass */
header{background:rgba(0,0,0,.75)!important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.06)!important}

/* Scrollbar */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#1e90ff,#004c96);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#4da6ff,#1e90ff)}
:focus-visible{outline:2px solid #1e90ff;outline-offset:3px;border-radius:4px}

/* Reading progress bar */
.reading-progress{position:fixed;top:0;left:0;width:0%;height:1px;background:linear-gradient(90deg,#1e90ff,#00bfff,#1e90ff);background-size:200% 100%;animation:progressShimmer 3s linear infinite;z-index:99999;transition:width .1s linear;box-shadow:0 0 4px rgba(30,144,255,.4)}
@keyframes progressShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Glass panels */
.emailus-box,.ourteam-box,.service-text{background:rgba(0,0,0,.55)!important;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.06)!important;box-shadow:0 8px 32px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04)}

/* 2. Video scroller — active/selected thumbnail blue, viewer border blue 4px */
.thumbnail-container img.active,.thumbnail-container img.selected,#video-box img.selected,#video-box img.active{border:3px solid #1e90ff!important;box-shadow:0 0 12px rgba(30,144,255,.6)!important}
.image-overlay img{border:4px solid #1e90ff!important;box-shadow:0 0 25px rgba(30,144,255,.4)!important}

/* 2b. Explore/Creation/Event — original centered position, tight click area */
.ai-explore h2,.event-link h2{font-size:18px!important;letter-spacing:1px!important;transition:.6s!important;padding:15px 40px!important;cursor:pointer!important}
.ai-explore h2:hover,.event-link h2:hover{letter-spacing:8px!important;color:#fff!important;text-shadow:0 0 5px #007bff,0 0 10px rgba(0,123,255,.8),0 0 15px rgba(0,123,255,.6)!important}

/* 5b. Main page sidemenu — hover blue shading */
.sidemenu-link a:hover{background:linear-gradient(to top,rgba(30,144,255,.25) 0%,rgba(30,144,255,.08) 60%,transparent 100%)!important;color:#fff!important;letter-spacing:2px!important;box-shadow:inset 0 -2px 15px rgba(30,144,255,.15)!important}
/* 5c. Active menu — OLD SITE bright blue background + white text + white icon */
.sidemenu-link a.active-menu{background:linear-gradient(145deg,#1e90ff,#005bb5)!important;color:#fff!important;letter-spacing:2px!important;box-shadow:inset 0 0 10px rgba(0,0,0,.5)!important;pointer-events:none!important;cursor:default!important}
.sidemenu-link a.active-menu .menu-icon{filter:brightness(0) invert(1)!important;opacity:1!important}

/* 3. Contact/Team — moved lower so it doesn't block top-content, reduced bottom spacing to 50% */
#contact{height:auto;min-height:100vh;padding-top:40px;padding-bottom:20px}
#contact .overlay{align-items:flex-start!important;padding-top:160px!important;padding-bottom:30px!important}

/* Email Us - restore exact OLD SITE structure by removing width/flex overrides! Only visual tweaks. */
.emailus-box{background:rgba(0,0,0,.55)!important;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.contact-info{padding:20px!important}

/* 3b. Email button — rotated 90° tab, blue color, white on hover */
.email-button{width:150px!important;height:35px!important;background:#1e90ff!important;color:#fff!important;text-transform:uppercase!important;letter-spacing:2px!important;font-size:10px!important;font-weight:700!important;border-top-right-radius:15px!important;border-top-left-radius:15px!important;border-bottom-right-radius:0!important;border-bottom-left-radius:0!important;text-align:center!important;line-height:40px!important;position:absolute!important;right:-51px!important;top:50%!important;transform:translateY(-50%) rotate(90deg)!important;z-index:1!important;cursor:pointer!important;transition:background .3s,color .3s,box-shadow .3s!important}
.email-button:hover{background:#fff!important;color:#000!important;box-shadow:0 -5px 10px rgba(255,255,255,.2),-5px 0 10px rgba(255,255,255,.2),5px 0 10px rgba(255,255,255,.2)!important}
.email-button.close{background:#333!important;color:#fff!important;box-shadow:none!important}
.email-button.open{background:#ccc!important;color:#000!important;box-shadow:0 0 10px 5px rgba(255,255,255,.5)!important}

/* 3c. Arrow button position */
.arrowButton[data-target="emailus"]{position:absolute!important;top:15px!important;right:15px!important;z-index:10!important}
.arrowButton.left{left:15px!important;right:auto!important}

/* 4. Contact/Team — align at bottom, spacing from bottom */
#ourteam{width:55%!important;margin-top:0!important;display:flex!important;transition:transform 1s!important}
.ourteam-box{width:100%!important;max-height:none!important;overflow-y:visible!important;min-height:auto!important;display:flex!important;flex-direction:column!important}




/* Team photo — larger, aligned to the right with gap */
.team-photo img{width:240px!important;height:240px!important;border-radius:50%!important;border:3px solid rgba(30,144,255,.4)!important;box-shadow:0 10px 30px rgba(0,0,0,.6);transition:all .5s cubic-bezier(.4,0,.2,1);object-fit:cover}
.team-photo img:hover{border-color:#1e90ff!important;border-width:4px!important;box-shadow:0 0 20px rgba(30,144,255,.8),0 0 40px rgba(30,144,255,.4),0 0 60px rgba(30,144,255,.2)!important;transform:scale(1.05)}
.team-photo p{color:#fff!important;text-align:center!important;margin-top:12px!important;font-family:'EVSFont','Orbitron',sans-serif!important;font-size:14px!important;letter-spacing:2px!important;text-transform:uppercase!important;font-style:italic!important}
.team-photo{display:flex!important;flex-direction:column!important;align-items:center!important;margin-left:auto!important;margin-right:20px!important}

/* 4. Team member — above top-content */
#ourteam{z-index:101!important}

/* Description text — increased font, better bullet arrow, scroller wider */
.description{width:600px!important}
.description ul{font-size:12px!important;list-style-type:'➤ '!important;padding-left:15px!important;margin-left:0!important}
.description li{font-size:12px!important;margin-bottom:3px!important;padding-left:8px!important;line-height:1.5!important}
.description strong{font-size:12px!important;color:#2d71d7}
.description p{font-size:12px!important;line-height:1.5!important}
.description h4{font-size:14px!important}
.member-info .position{font-size:13px!important}
.member-info h2{font-size:18px!important}

/* 4b. MichaelOoi.com URL — 40% smaller */
.description .url a,.description a[href*="michaelooi"]{font-size:7px!important;letter-spacing:1px!important}
.description .url{font-size:7px!important}

/* Team selector icons — smaller, spaced, aligned left without layout jumping */
#ourteam-select{width:100%!important;padding-left:0!important;padding-right:0!important;justify-content:flex-start!important;margin-top:15px!important;gap:15px!important}
#ourteam-select img{box-sizing:border-box!important;border-radius:50%!important;object-fit:cover!important;margin-right:0!important;width:35px!important;height:35px!important;border:3px solid transparent!important;transition:all 0.3s ease!important}
#ourteam-select img.active{border:3px solid #1e90ff!important;}
#ourteam-select img:hover{border:3px solid rgba(255,255,255,.8)!important;transform:scale(1.15)!important}

/* Contact info text sizes */
.contact-info h2{font-size:16px!important;margin-bottom:8px!important;padding-top:10px!important}
.contact-info h4{font-size:13px!important;margin-top:15px!important;margin-bottom:5px!important}
.contact-info p{font-size:13px!important;line-height:1.6!important;margin-bottom:6px!important}
.contact-info .name{font-size:14px!important;font-weight:bold!important;display:block!important;margin-top:10px!important;margin-bottom:3px!important}
.contact-info .enlarge{font-size:12px!important;display:block!important;margin-left:15px!important;margin-bottom:2px!important}
.contact-info ul{margin-top:5px!important;margin-bottom:5px!important}
.contact-info li{font-size:13px!important;line-height:1.5!important}
.contact-info i{color:#1e90ff;font-size:12px!important}
.contact-info .url a{font-size:12px!important;color:#1e90ff!important}

/* Dots */
.dot{transition:background .3s,box-shadow .3s,transform .3s}
.dot:hover{transform:scale(1.3);background:rgba(30,144,255,.6)}
.dot.active{background:#1e90ff;box-shadow:0 0 10px #1e90ff,0 0 20px rgba(30,144,255,.3);transform:scale(1.2)}
.nav-button{background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.nav-button:hover{background:rgba(30,144,255,.15);text-shadow:0 0 15px #1e90ff}

/* Footer — spacing */
.social-icon img{filter:none!important;transition:filter .3s,transform .3s!important}
.social-icon:hover img{filter:brightness(2)!important;transform:scale(1.15)!important}
.social-icon{opacity:.3!important;transition:opacity .3s!important}
.social-icon:hover{opacity:1!important;border-color:transparent!important;box-shadow:none!important;background:0 0!important}
.footer,.footer-copyright,.footer-copyright a,.footer-copyright p,.footer-links,.footer-links a{font-family:EVSFont,Orbitron,sans-serif!important}
.footer-content{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;flex-wrap:wrap!important;padding:10px 20px!important}
.footer-links{order:1!important;flex:1!important;justify-content:flex-start!important;padding-left:30px!important}
.footer-social{order:2!important;flex:0 0 auto!important;justify-content:flex-end!important;padding-right:30px!important}
.footer-copyright{display:block!important;order:3!important;width:100%!important;text-align:center!important;margin-top:12px!important;padding-top:10px!important;border-top:1px solid #222!important}
.footer-copyright,.footer-copyright p,.footer-copyright .animate-txt{opacity:1!important;visibility:visible!important;transform:none!important;filter:none!important}

/* Chatbox */
#chat-icon{border:1px solid rgba(30,144,255,.25)!important;box-shadow:0 4px 12px rgba(0,0,0,.4),0 0 6px rgba(30,144,255,.15)!important}
#chat-icon.chat-active{border-color:#fff!important;box-shadow:0 0 12px rgba(255,255,255,.35)!important}
#chat-container{border:1px solid rgba(30,144,255,.3)!important;box-shadow:0 8px 35px rgba(0,0,0,.7),0 0 12px rgba(30,144,255,.15)!important}
.whatsapp-quick{width:auto!important;height:auto!important;padding:4px 10px!important;font-size:9px!important;border-radius:16px!important}

/* 7. Preloader */
#loading{background:radial-gradient(ellipse at center,#0a0a0a 0,#000 100%)}
#loading h1{background:linear-gradient(90deg,#fff,#1e90ff,#fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-size:200% auto;animation:shimmerText 3s linear infinite}
@keyframes shimmerText{0%{background-position:200% center}100%{background-position:-200% center}}
#loadingBar{width:200px!important;height:2px!important;background:rgba(255,255,255,.05)!important;border:none!important;box-shadow:none!important;overflow:visible!important;border-radius:1px!important;position:relative!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important}
#loadingBar::-webkit-progress-bar{background:transparent!important;border-radius:1px!important}
#loadingBar::-webkit-progress-value{background:linear-gradient(90deg,rgba(30,144,255,0),#1e90ff 30%,#00bfff 50%,#1e90ff 70%,rgba(30,144,255,0))!important;border-radius:1px!important;box-shadow:0 0 6px rgba(30,144,255,.8),0 0 12px rgba(30,144,255,.5),0 0 20px rgba(30,144,255,.2)!important;transition:none!important}
#loadingBar::-moz-progress-bar{background:linear-gradient(90deg,rgba(30,144,255,0),#1e90ff 30%,#00bfff 50%,#1e90ff 70%,rgba(30,144,255,0))!important;border-radius:1px!important;box-shadow:0 0 6px rgba(30,144,255,.8),0 0 12px rgba(30,144,255,.5),0 0 20px rgba(30,144,255,.2)!important;transition:none!important}

/* Buttons */
.cookie-btn.accept:hover,.submit-button:hover{transform:scale(1.05);box-shadow:0 0 25px rgba(30,144,255,.5)}
.whatsapp-link{transition:text-shadow .3s}
.whatsapp-link:hover{text-shadow:0 0 10px rgba(37,211,102,.6)}

/* Sidemenu — original heights, E.V.S slightly bigger */
.submenu{font-size:8px!important}
.submenu i{font-size:12px!important}
.sidemenu-header h2{font-size:10px!important}
.sidemenu-link a{font-size:9px!important;padding:25px 30px!important}
.sidemenu-link .menu-icon{font-size:14px!important}

/* 7. topbg — fixed parallax, text sweep, smaller h4, brighter p, thinner image border */
.topbg{position:fixed!important;top:0!important;left:0!important;width:100%!important;z-index:0!important;background-attachment:scroll!important}
#page .overlay{position:relative!important;z-index:1!important;background:none!important}
.container-space{position:relative!important;z-index:1!important}

/* Give the page content container a solid background so it rolls cleanly over the fixed topbg */
.page-container{background:#000!important;position:relative!important;z-index:2!important;padding-top:40px!important;padding-bottom:80px!important;box-shadow:0 -10px 40px rgba(0,0,0,0.8)!important}

/* 7b. topbg text — light sweep across glowing text */
.topbg h4{font-size:26px!important;background:linear-gradient(90deg,#1e90ff 0%,#fff 20%,#1e90ff 40%,#fff 60%,#1e90ff 80%,#fff 100%)!important;background-size:300% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;animation:topbgSweep 4s ease-in-out infinite!important;filter:drop-shadow(0 0 8px rgba(30,144,255,.6))!important}
@keyframes topbgSweep{0%{background-position:100% center}50%{background-position:0% center}100%{background-position:100% center}}
.topbg p{color:#888!important}

/* 5. Image border inside page content — 4px brighter grey, HR centered */
.page-container .wp-block-image img{border:4px solid #555!important}
.page-container hr{margin-left:auto!important;margin-right:auto!important;border-color:#444!important}

/* 5. Post listing — light sweep, thumbnail transform, tag color */
.post-listing{position:relative!important;overflow:hidden!important;transition:all .3s ease!important}
.post-listing::after{content:''!important;position:absolute!important;top:0!important;left:-100%!important;width:60%!important;height:100%!important;background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.04) 40%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.04) 60%,transparent 100%)!important;transform:skewX(-25deg)!important;transition:left .6s ease!important;pointer-events:none!important;z-index:1!important}
.post-listing:hover::after{left:130%!important}
.post-listing:hover{background:rgba(30,144,255,.05)!important;box-shadow:0 0 8px rgba(30,144,255,.1)!important}
.post-thumbnail{transition:transform .5s cubic-bezier(.4,0,.2,1)!important;transform-origin:center!important}
.post-listing:hover .post-thumbnail{transform:scale(1.15)!important}
.post-title{transition:transform .4s cubic-bezier(.4,0,.2,1),font-size .4s!important}
.post-listing:hover .post-title{transform:scale(1.05)!important}

/* 5b. Tags — readable grey color */
.post-tag span{color:#888!important}
.post-tag p{color:#888!important}

/* 9. Page content link buttons — modern 3D with light sweep */
.page-container p a{font-size:9px!important;text-transform:uppercase!important;letter-spacing:1.5px!important;display:block!important;padding:14px 28px!important;background:linear-gradient(145deg,#0a1628 0%,#0d2240 50%,#0a1628 100%)!important;border:1px solid rgba(30,144,255,.2)!important;border-radius:12px!important;color:#8bb8e8!important;box-shadow:0 4px 15px rgba(0,0,0,.5),0 2px 0 rgba(30,144,255,.08),inset 0 1px 0 rgba(255,255,255,.05)!important;transition:all .4s cubic-bezier(.4,0,.2,1)!important;position:relative!important;overflow:hidden!important}
.page-container p a::after{content:''!important;position:absolute!important;top:0!important;left:-100%!important;width:60%!important;height:100%!important;background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.06) 40%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.06) 60%,transparent 100%)!important;transform:skewX(-25deg)!important;transition:left .6s ease!important;pointer-events:none!important;z-index:1!important}
.page-container p a:hover::after{left:130%!important}
.page-container p a:hover{background:linear-gradient(145deg,#0d2a4a 0%,#133a60 50%,#0d2a4a 100%)!important;border-color:rgba(30,144,255,.45)!important;color:#fff!important;box-shadow:0 6px 20px rgba(0,0,0,.6),0 0 15px rgba(30,144,255,.2),inset 0 1px 0 rgba(255,255,255,.08)!important;transform:translateY(-1px)!important}
.page-container p a:active{transform:translateY(1px)!important;box-shadow:0 2px 8px rgba(0,0,0,.5),inset 0 2px 4px rgba(0,0,0,.3)!important}

/* Image hover shine */
.wp-block-image{position:relative;overflow:hidden}
.wp-block-image::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.08) 40%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.08) 60%,transparent 100%);transform:skewX(-25deg);transition:left .6s ease;pointer-events:none;z-index:10}
.wp-block-image:hover::after{left:130%}
.wp-block-image:hover{transform:scale(1.03)}
.wp-block-image:hover img{border-color:rgba(30,144,255,.5)!important;box-shadow:0 6px 20px rgba(30,144,255,.3)!important}

/* 10. Production — no horizontal scroll, thin blue scrollbar */
.page-container{overflow-x:hidden!important}
.page-container::-webkit-scrollbar{height:3px!important;width:3px!important}
.page-container::-webkit-scrollbar-track{background:transparent!important}
.page-container::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#1e90ff,#004c96)!important;border-radius:4px!important}

/* AI layer overflow */
#ai .layer img{max-width:100%!important;max-height:100vh!important}
#3dvisual-container{overflow:hidden!important}
[class="3dvisual"]{overflow:hidden!important}
#creation-container img.event-bg,#event-container img.event-bg{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important}

/* Build Your Empire — parallax layers */
.background{transition:transform 1.2s cubic-bezier(.25,.46,.45,.94)!important}
.background-highlight{transition:transform 1.8s cubic-bezier(.25,.46,.45,.94)!important}

/* 3. Service-text — border added, reduced top/bottom padding to 15px */
.service-text{border-radius:20px!important;padding:15px 65px 15px 60px!important;margin-right:80px!important;background:rgba(0,0,0,.75)!important;border:1px solid #1e90ff!important;box-shadow:0 5px 25px rgba(0,0,0,.8)!important;-webkit-backdrop-filter:blur(24px)!important;backdrop-filter:blur(24px)!important}
.service-text h2{padding:20px 25px!important}

/* 6. Preloader — smooth performant reveal transition (scale up and fade out) */
#loading.fade-out{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:scale(1.05)!important;filter:blur(10px)!important;transition:opacity 1.5s ease-in-out, transform 1.5s ease-in-out, filter 1.5s ease-in-out, visibility 1.5s ease-in-out!important;-webkit-mask-image:none!important;mask-image:none!important;animation:none!important}

/* Mobile */
@media (max-width:768px){
  #contact .overlay{padding-top:20px!important;flex-direction:column!important;align-items:stretch!important}
  #emailus,#ourteam{width:100%!important;margin-top:10px!important}
  .emailus-box,.ourteam-box{min-height:auto!important;padding:20px!important;border-radius:20px!important}
  .contact-info{min-width:auto!important;max-width:100%!important;width:100%!important;flex:auto!important}
  .emailus-form{flex:auto!important;width:100%!important}
  .team-photo img{width:150px!important;height:150px!important}
  .sidemenu-link a{padding:15px 20px!important}
  .reading-progress{height:1px}
  .ai-explore h2,.event-link h2{font-size:16px!important;padding:12px 30px!important;margin:0 auto!important}
}