/********** ReanCyber – minimal, fast CSS **********/
:root{
  --primary:#17ba6e;      /* cyber green */
  --secondary:#ff4d4d;    /* optional accent */
  --dark:#000;            /* page bg */
  --text:#f0f0f0;         /* readable on dark */
}

/* ----- Global dark theme ----- */
html,body{background:var(--dark);color:var(--text);}
h1,h2,h3,h4,h5,h6,p,a,span{color:var(--text);}
.bg-light,.bg-white{background:var(--dark)!important;color:var(--text)!important}

/* ----- Buttons (single source of truth) ----- */
.btn{
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-weight:600;
  background:var(--primary);
  color:#000;
  border:none;
  transition:.2s;
}
.btn:hover{
  background:transparent;
  color:var(--primary)!important;
  border:1px solid var(--primary);
}
.btn a{color:inherit;text-decoration:none}

/* Square icon buttons (social) */
.btn-square,.btn-sm-square,.btn-lg-square{
  padding:0;display:flex;align-items:center;justify-content:center;border-radius:0
}
.btn-square{width:38px;height:38px}
.btn-sm-square{width:32px;height:32px}
.btn-lg-square{width:48px;height:48px}

/* ----- Spinner ----- */
#spinner{
  opacity:0;visibility:hidden;transition:opacity .5s ease-out,visibility 0s linear .5s;z-index:99999
}
#spinner.show{visibility:visible;opacity:1;transition:opacity .5s ease-out,visibility 0s}

/* ----- Navbar (Bootstrap 5, dark) ----- */
.navbar{background:linear-gradient(90deg,#0a0a0a 0%,#111 40%,#0a9150 100%);padding:15px 0;transition:.5s}
.navbar-dark .navbar-nav .nav-link{color:var(--text);font-weight:600;text-transform:uppercase}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active{color:var(--primary)}
.navbar-dark .navbar-toggler{border-color:var(--primary)}
@media (max-width:991.98px){
  .navbar-dark .navbar-collapse{background:var(--dark)}
}
/* Desktop dropdown: reveal on hover */
@media (min-width:992px){
  .navbar .nav-item .dropdown-menu{
    display:block;margin-top:0;opacity:0;visibility:hidden;transform:rotateX(-75deg);
    transform-origin:0 0;transition:.3s; background:var(--dark); border-color:rgba(255,255,255,.12)
  }
  .navbar .nav-item:hover .dropdown-menu{
    opacity:1;visibility:visible;transform:rotateX(0)
  }
}
.navbar-dark .dropdown-item{color:var(--text)}
.navbar-dark .dropdown-item:hover{color:var(--primary);background:rgba(0,255,136,.08)}

/* ----- Hero (Bootstrap Carousel) ----- */
#hero .carousel-item{height:75vh}
@media (max-width:768px){#hero .carousel-item{height:50vh}}
#hero .carousel-item img{
  width:100%;height:80%;object-fit:cover;object-position:center
}
.carousel-control-prev-icon,.carousel-control-next-icon{filter:drop-shadow(0 0 2px #000)}

/* ----- Section title ----- */
.section-title{position:relative;display:inline-block;text-transform:uppercase}
.section-title::before,
.section-title::after{
  content:"";position:absolute;left:0;height:2px;background:var(--primary);z-index:-1
}
.section-title::before{top:4px;width:100%}
.section-title::after{bottom:5px;width:120%}

/* ----- Services ----- */
.service-item{transition:.2s}
.service-item:hover{margin-top:-10px;background:var(--primary)}
.service-item *{transition:.2s}
.service-item:hover *{color:#fff!important}

/* ----- Categories & Courses ----- */
.category .content{cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.category .content:hover{transform:scale(1.05);box-shadow:0 8px 20px rgba(0,0,0,.2)}
.category .content h5 a{color:var(--text);text-decoration:none}
.category .content:hover h5 a{color:#fff!important}
.category img{width:150px;height:150px;object-fit:contain;margin:auto;display:block}

.course-item img{width:100%;height:200px;border-radius:5px;transition:.2s}
.course-item:hover img{transform:scale(1.05)}

/* ----- Team (if used) ----- */
.team-item img{transition:.2s}
.team-item:hover img{transform:scale(1.05)}

/* ----- Footer ----- */
.footer .btn.btn-social{
  margin-right:5px;width:35px;height:35px;display:flex;align-items:center;justify-content:center;
  color:var(--text);border:1px solid #fff;border-radius:35px;transition:.2s
}
.footer .btn.btn-social:hover{color:var(--primary)}
.footer .btn.btn-link{
  display:block;margin-bottom:5px;padding:0;text-align:left;color:var(--text);font-size:15px;transition:.2s
}
/* Replace FontAwesome chevron with a simple › glyph */
.footer .btn.btn-link::before{content:"›";margin-right:10px}
.footer .copyright{padding:25px 0;font-size:15px;border-top:1px solid rgba(255,255,255,.1)}
.footer .footer-menu a{margin-right:15px;padding-right:15px;border-right:1px solid rgba(255,255,255,.1)}
.footer .footer-menu a:last-child{margin-right:0;padding-right:0;border-right:none}

/* ----- Utility ----- */
.accent{color:#2bff3c!important}
.text-box{background:#000;padding:2rem 3rem;margin-top:-70px}
.back-to-top{opacity:0;pointer-events:none;transition:opacity .3s ease}
.back-to-top.show{opacity:1;pointer-events:auto}


.footer {
  background-color: var(--dark) !important;
  color: var(--text-light) !important;
}

/* Side-floating back-to-top */
.back-to-top{
  position: fixed;
  top: 50%;                /* center vertically */
  right: 18px;             /* stick to right edge */
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  transition: opacity .3s ease, transform .2s ease;
  border-radius: 10px;     /* optional: a little softer */
}
.back-to-top.show{
  opacity: 1;
  pointer-events: auto;
}
/* hover nudge */
.back-to-top.show:hover{
  transform: translateY(-50%) scale(1.05);
}

/* Safer placement on small screens */
@media (max-width: 768px){
  .back-to-top{
    top: auto;
    bottom: 20px;
    right: 16px;
    transform: none;
  }
}

.back-to-top:focus, .back-to-top:focus-visible, .back-to-top:active {
  outline: none !important;
  box-shadow: none !important;
}
.btn:focus, .btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.navbar-dark .navbar-nav .nav-link.active {
  color: var(--text) !important;   /* same as normal */
}
.navbar-dark .navbar-nav .nav-link:hover {
  color: var(--primary);
}