/*
Theme Name: JSCompany Theme
Author: Roo
Description: A custom theme for JSCompany, based on the static HTML site.
Version: 1.0
*/

*{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f5f9}::-webkit-scrollbar-thumb{background:#0ea5e9;border-radius:4px}
.form-input{border:1px solid #cbd5e1;border-radius:.5rem;padding:.75rem 1rem;transition:all .2s}
.form-input:focus{border-color:#38bdf8;box-shadow:0 0 0 2px rgba(56,189,248,.25);outline:0}
@keyframes slideIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.animate-slideIn{animation:slideIn .5s ease forwards}
.animate-fadeIn{animation:fadeIn .6s ease forwards}
.lang-btn{padding:6px 14px;border-radius:10px;background:rgba(255,255,255,.15);backdrop-filter:blur(6px);transition:all .2s;font-weight:500}
.lang-btn:hover,.lang-btn.active{background:rgba(255,255,255,.3)}
.product-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 20px 40px rgba(14,165,233,.15)}
.bg-dots{background-image:radial-gradient(circle at 1px 1px,rgba(14,165,233,.15) 2px,transparent 0);background-size:24px 24px}
#image-modal{transition:opacity .3s ease}
.opacity-50 {
   opacity: 100%;
}
.hero-logo {
 width: 50%;
}
.bg-header-custom {
 background-color: #7fffff;
}
.certificate-thumb {
 height: 400px;
 object-fit: cover;
}
.modal-nav {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 background-color: rgba(0, 0, 0, 0.5);
 color: white;
 border: none;
 padding: 10px;
 cursor: pointer;
 font-size: 24px;
}
.modal-nav.prev {
 left: 10px;
}
.modal-nav.next {
 right: 10px;
}
.hero-title {
 font-size: clamp(2.5rem, 5vw, 4rem);
}