/* Basic reset & fonts */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background-color:#02051a;
  color:#e6f0ff;
  -webkit-font-smoothing:antialiased;
}
.image-logo{
  background-size: cover;
  height: 28px;
}

/* particles canvas */
.particles-canvas{position:fixed; inset:0; z-index:0; pointer-events:none}

/* SCROLL PROGRESS */
#scrollProgress{position:fixed;top:0;left:0;right:0;height:4px;z-index:1050;background:transparent}
#scrollBar{height:100%;width:0%;background:linear-gradient(90deg,#4db8ff,#1b82d1);transition:width .15s ease}

/* NAV */
.glass-nav{
  background: transparent!important;
  backdrop-filter:blur(8px);
  font-family: ;
  border-radius:12px;
  padding:8px 12px;
  margin:12px 0;
  z-index:1070;
}
#site-logo{height:46px; width:auto; border-radius:8px; box-shadow:0 6px 20px rgba(13, 110, 253, 0.12);}
.brand-text{font-weight:700; color:#fff; letter-spacing:0.4px;  font-family:Arial, Helvetica, sans-serif;}
.btn-theme{background:transparent;border:1px solid rgba(255,255,255,0.06);color:#fff}

/* HERO */
.hero{min-height:80vh; display:flex; position:relative; align-items:center; justify-content:center; padding-top:70px; z-index:2}
.hero-title{font-size:clamp(25px,4VW,50px); color:#ffffff; font-weight:800; margin:0;font-family: Arial, Helvetica, sans-serif;}
.hero-sub{font-size:clamp(14px,2.2vw,20px); color:#cfeaff; margin-top:12px}
.btn-cta{background:#4db8ff; color:#00122a; border-radius:10px; padding:12px 22px; border:none; font-weight:700}
.btn-cta:hover{transform:translateY(-3px); box-shadow:0 10px 30px rgba(77,184,255,0.12)}

/* rotating text */
.rotating-text{display:inline-block}


/* GLASS SECTIONS */
.glass{background:rgba(255,255,255,0.04); border-radius:14px; padding:22px; box-shadow:0 6px 30px rgba(3,7,18,0.6); position:relative; z-index:2}
.section-card{transition:transform .45s cubic-bezier(.2,.9,.2,1), box-shadow .45s}
.section-card:hover{transform:translateY(-8px); box-shadow:0 18px 60px rgba(0,0,0,0.6)}
.section-title{color:#0d6efd; font-size:28px; margin-bottom:14px}
.list-learn{list-style-type:none; padding:0}
.list-learn li{padding:6px 0; font-weight:600}

/* SERVICES */
.bg-section{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));}
.section-card{transition:transform .45s cubic-bezier(.2,.9,.2,1), box-shadow .45s}
.service-card .card-body{padding:1.4rem}
.service-card h5{color:#e6f0ff}
.card-text{color: white;}
.card-title{font-size: 22px;font-weight: bold;}

/* tilt effect */
.tilt{transform-style:preserve-3d; transition:transform .35s cubic-bezier(.2,.9,.2,1)}
.tilt:hover{transform:rotateX(6deg) rotateY(-6deg) translateY(-6px)}

/* TESTIMONIALS */
.carousel .card{border:none}

/* STATS */
.hero-stats{z-index:3}
.stat{min-width:110px}
.stat-number{font-size:26px;font-weight:800;color:#fff}
.stat-label{font-size:12px;color:#cfeaff}

/* CONTACT */
.contact-form .form-control{background:rgba(255,255,255,0.03); border:none; color:#fff}
.contact-form .form-control:focus{box-shadow:0 6px 26px rgba(77,184,255,0.06); outline:none}
.small-card{background:linear-gradient(135deg, rgba(77,184,255,0.06), rgba(77,184,255,0.02)); border:none}

/* HELP BUTTON */
.help-btn{position:fixed; right:20px; bottom:20px; z-index:1060; width:58px; height:58px; border-radius:50%; border:none; background:linear-gradient(135deg,#4db8ff,#1b82d1); color:#00122a; font-size:22px; box-shadow:0 12px 40px rgba(27,130,209,0.22)}

/* RIPPLE */
.btn{position:relative; overflow:hidden}
.ripple{position:absolute; border-radius:50%; transform:translate(-50%,-50%); width:12px; height:12px; background:rgba(255,255,255,0.18); animation:ripple 600ms linear}
@keyframes ripple{from{opacity:1; transform:translate(-50%,-50%) scale(.8)} to{opacity:0; transform:translate(-50%,-50%) scale(4)}}

/* ANIMATIONS */
.fade-in{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.fade-in.visible{opacity:1; transform:none}

/* RESPONSIVE tweaks */
@media (max-width:767px){
  .glass-nav{margin:6px}
  .shape-1{display:none}
  .shape-2{display:none}
  .hero-stats{flex-wrap:wrap}
}

/* Accessibility */
:focus{outline:2px solid rgba(77,184,255,0.18); outline-offset:3px}

/* WhatsApp floating button */
.whatsapp-float {
  position: fixed;
  width: 65px;
  height: 65px;
  bottom: 22px;
  right: 22px;
  background-color: #25D366;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: transform .2s ease-in-out;
}
.whatsapp-float img { width: 38px; height: 38px; }
.whatsapp-float:hover { transform: scale(1.08); }

/* CONTACT */
.contact-form .form-control{background:rgba(255,255,255,0.03); border:none; color:#fff}
.contact-form .form-control:focus{box-shadow:0 6px 26px rgba(77,184,255,0.06); outline:none}
.small-card{background:linear-gradient(135deg, rgba(77,184,255,0.06), rgba(77,184,255,0.02)); border:none}

.join-btn {
  background: #0d6efd;
  border: none;
  font-weight: 600;
  border-radius: 8px;
  transition: 0.25s ease-in-out;
}

.join-btn:hover {
  background: #3b99ff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 123, 255, 0.3);
}

.font-name-selected{
  
  font-family:avnir light;
}

.wa-form { max-width: 320px; margin: 0.75rem auto 0; }
.wa-form .form-control-sm { padding: .4rem .6rem; font-size: .9rem; }
.wa-form .btn-sm { font-weight: 700; border-radius: 8px; }

.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

.whatsapp-float img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
}

.whatsapp-float img:hover {
  transform: scale(1.1);
}

/* webinar */
.bg-color{
  background-color:#02051a;
}

.alert {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.alert.fade:not(.show) {
  opacity: 0;
  transform: translateY(-6px);
}

/* Smart auto-hide navbar */
.navbar.hidden {
  transform: translateY(-100%);
  opacity: 0;
}


.contact-link {
  color: #fff;
  text-decoration: none;
}

.contact-link:hover {
  text-decoration: underline;
}

.social-icon img {
  width: 34px;
  height: 34px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.social-icon:hover img {
  transform: scale(1.15);
  opacity: 0.85;
}


.contact-icons a {
  color: #ffffff;
  font-size: 26px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.contact-icons a:hover {
  transform: scale(1.15);
  opacity: 0.8;
}

.contact-icons a:hover {
  color: #0d6efd; /* Bootstrap primary blue */
}