/* =========================
   GLOBAL
========================= */

html{
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}

body{
  background:
  linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.9)),
  url('https://images.unsplash.com/photo-1600185365926-3a2ce3cdb9eb')
  center/cover no-repeat;

  color:white;
  font-family:Poppins,sans-serif;

  padding-top:65px;
  overflow-x:hidden;
}

/* =========================
   NAVBAR
========================= */

.navbar-custom{
  background:rgba(0,0,0,0.85);
  backdrop-filter:blur(10px);

  padding:12px 20px;

  z-index:1055;

  transition:0.4s;
}

.navbar-custom.scrolled{
  background:#000;
  box-shadow:0 5px 20px rgba(0,0,0,0.6);
}

/* NAV LINK */

.nav-link{
  position:relative;
  transition:0.3s;
}

.nav-link::after{
  content:"";

  position:absolute;

  left:0;
  bottom:-5px;

  width:0;
  height:2px;

  background:#00f7ff;

  transition:0.4s;
}

.nav-link:hover::after{
  width:100%;
}

.nav-link:hover{
  color:#00f7ff !important;

  text-shadow:
  0 0 8px rgba(0,247,255,0.7);
}

/* SEARCH */

.search-box{
  border-radius:20px;
}

/* =========================
   SIDEBAR
========================= */

.col-md-3{
  position:sticky;
  top:100px;
}

.list-group-item{
  background:#111;
  color:white;

  border:1px solid #222;

  transition:0.3s;
}

.list-group-item:hover{
  background:#00f7ff;
  color:black;
}

.list-group-item.active{
  background:#00f7ff;
  color:black;
}

/* =========================
   CAROUSEL
========================= */

.carousel-wrapper{
  position:relative;
}

.carousel-custom{
  width:100%;
  border-radius:0;
}

.carousel-item{
  height:100vh;
  min-height:500px;
}

.carousel-item img{
  width:100%;
  height:100%;

  object-fit:cover;

  filter:brightness(0.5);

  animation:zoomEffect 8s infinite alternate;
}

.carousel img{
  transform:translateZ(0);
  backface-visibility:hidden;
}

@keyframes zoomEffect{
  from{
    transform:scale(1);
  }

  to{
    transform:scale(1.08);
  }
}

/* =========================
   CAROUSEL TEXT
========================= */

.carousel-caption-custom{
  position:absolute;

  top:50%;
  left:8%;

  transform:translateY(-50%);

  z-index:10;

  max-width:500px;

  text-align:left;

  animation:fadeUpLeft 1.2s ease;
}

.carousel-caption-custom h1{
  font-size:clamp(2rem,5vw,5rem);

  font-weight:900;

  line-height:1;

  text-shadow:0 5px 20px rgba(0,0,0,0.7);
}

.carousel-caption-custom p{
  font-size:1.1rem;

  margin:20px 0;

  color:#ddd;

  text-shadow:0 2px 10px rgba(0,0,0,0.7);
}

.carousel-caption-custom .btn{
  border-radius:30px;

  font-weight:bold;

  transition:0.3s;
}

.carousel-caption-custom .btn:hover{
  transform:translateY(-3px);

  box-shadow:
  0 10px 20px rgba(0,255,255,0.4);
}

@keyframes fadeUpLeft{
  from{
    opacity:0;
    transform:translateY(30px);
  }

  to{
    opacity:1;
    transform:translateY(-50%);
  }
}

/* =========================
   BUTTON
========================= */

.btn-info{
  transition:0.3s;
}

.btn-info:hover{
  transform:
  translateY(-3px)
  scale(1.05);

  box-shadow:
  0 10px 20px rgba(13,202,240,0.4);
}

/* =========================
   ABOUT
========================= */

#about{
  background:rgba(0,0,0,0.6);

  border-radius:15px;

  box-shadow:
  0 0 20px rgba(0,255,255,0.2);
}

#about img{
  width:100%;
  height:100%;

  object-fit:cover;

  border-radius:15px;

  transition:0.5s;

  box-shadow:
  0 10px 30px rgba(0,0,0,0.5);
}

#about img:hover{
  transform:
  scale(1.05)
  rotate(1deg);

  box-shadow:
  0 20px 40px rgba(0,0,0,0.5);
}

/* =========================
   PRODUCT CARD
========================= */

.card{
  border:none;

  overflow:hidden;

  transition:0.4s;

  background:
  rgba(17,17,17,0.7) !important;

  backdrop-filter:blur(10px);

  border:
  1px solid rgba(255,255,255,0.05);
}

.card:hover{
  transform:translateY(-10px);

  box-shadow:
  0 15px 40px rgba(0,255,255,0.25);
}

.card img{
  transition:0.5s;
}

.card:hover img{
  transform:scale(1.1);
}

/* =========================
   PRODUCT SLIDER
========================= */

.product-slider{
  display:flex;

  gap:20px;

  overflow-x:auto;

  scroll-behavior:smooth;

  padding:10px 20px 20px;

  scrollbar-width:none;
}

.product-slider::-webkit-scrollbar{
  display:none;
}

/* CARD */

.product-slide-card{
  min-width:300px;

  background:#111;

  border-radius:20px;

  overflow:hidden;

  flex-shrink:0;

  position:relative;

  cursor:pointer;

  transition:0.4s;
}

.product-slide-card:hover{
  transform:translateY(-10px);

  box-shadow:
  0 15px 40px rgba(0,255,255,0.3);
}

.product-slide-card img{
  width:100%;
  height:320px;

  object-fit:cover;

  transition:0.5s;
}

.product-slide-card:hover img{
  transform:scale(1.08);
}

/* INFO */

.product-info{
  padding:20px;
}

.product-category{
  color:#aaa;

  font-size:14px;

  text-transform:uppercase;

  letter-spacing:1px;
}

.product-desc{
  color:#ccc;

  font-size:14px;

  margin-top:10px;

  min-height:45px;
}

.product-price{
  font-size:20px;

  font-weight:bold;

  color:#00f7ff;
}

/* BADGE */

.product-badge{
  position:absolute;

  top:15px;
  left:15px;

  background:#00f7ff;
  color:black;

  font-size:12px;
  font-weight:bold;

  padding:6px 12px;

  border-radius:20px;

  z-index:10;
}

.sale-badge{
  position:absolute;

  top:15px;
  right:15px;

  background:red;
  color:white;

  font-size:12px;
  font-weight:bold;

  padding:6px 12px;

  border-radius:20px;

  z-index:10;

  animation:pulseSale 1.5s infinite;

  box-shadow:
  0 5px 15px rgba(255,0,0,0.4);
}

@keyframes pulseSale{
  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.08);
  }

  100%{
    transform:scale(1);
  }
}

/* PRICE */

.old-price{
  text-decoration:line-through;

  color:#888;

  font-size:14px;
}

.new-price{
  font-size:22px;

  font-weight:bold;

  color:#00f7ff;
}

/* BUTTON */

.product-slide-card .btn{
  border-radius:20px;

  padding:6px 18px;

  transition:0.3s;
}

.product-slide-card .btn:hover{
  transform:translateY(-2px);

  box-shadow:
  0 5px 15px rgba(0,255,255,0.4);
}

/* =========================
   SLIDER BUTTON
========================= */

.slider-btn{
  width:45px;
  height:45px;

  border:none;
  border-radius:50%;

  background:#111;
  color:white;

  font-size:20px;

  transition:0.3s;
}

.slider-btn:hover{
  background:#00f7ff;
  color:black;

  transform:scale(1.1);
}

/* =========================
   ANIMATE
========================= */

.animate{
  opacity:0;

  transform:translateY(20px);

  transition:all 0.5s ease;

  will-change:transform,opacity;
}

.animate.show{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   REVIEW
========================= */

#review-list{
  max-height:300px;
  overflow-y:auto;
}

#review-list::-webkit-scrollbar{
  width:5px;
}

#review-list::-webkit-scrollbar-thumb{
  background:#00f7ff;
  border-radius:10px;
}

/* =========================
   MODAL
========================= */

.modal{
  z-index:99999;
}

.modal-dialog{
  margin-top:100px;
}

.modal-content{
  background:#111;

  border-radius:20px;

  border:
  1px solid rgba(255,255,255,0.1);

  animation:modalZoom 0.3s ease;
}

@keyframes modalZoom{
  from{
    transform:scale(0.8);
    opacity:0;
  }

  to{
    transform:scale(1);
    opacity:1;
  }
}

.modal-backdrop.show{
  backdrop-filter:blur(5px);

  background:
  rgba(0,0,0,0.7);
}

/* =========================
   CONTACT
========================= */

.contact-box{
  background:#161616;

  border-radius:25px;

  box-shadow:
  0 10px 30px rgba(0,0,0,0.4);
}

/* =========================
   FOOTER
========================= */

.footer{
  background:#090909;

  border-top:
  1px solid #111;
}

.footer-link{
  color:#aaa;

  text-decoration:none;

  transition:0.3s;
}

.footer-link:hover{
  color:#00f7ff;

  padding-left:5px;
}

.social-icon{
  width:45px;
  height:45px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#161616;

  color:white;

  text-decoration:none;

  font-size:20px;

  transition:0.4s;
}

.social-icon:hover{
  background:#00f7ff;
  color:black;

  transform:
  translateY(-5px)
  scale(1.1);

  box-shadow:
  0 5px 15px rgba(0,255,255,0.4);
}

/* =========================
   PREMIUM MARQUEE
========================= */

.marquee{
  width:100%;

  overflow:hidden;

  position:relative;

  z-index:20;

  padding:14px 0;

  background:
  rgba(255,255,255,0.08);

  backdrop-filter:blur(12px);

  border-top:
  1px solid rgba(255,255,255,0.15);

  border-bottom:
  1px solid rgba(255,255,255,0.15);

  box-shadow:
  0 5px 20px rgba(0,0,0,0.4),
  inset 0 0 20px rgba(255,255,255,0.03);
}

.marquee::before{
  content:"";

  position:absolute;

  inset:0;

  background:
  linear-gradient(
  90deg,
  rgba(0,247,255,0.15),
  rgba(0,119,255,0.15),
  rgba(255,0,128,0.15),
  rgba(0,247,255,0.15)
  );

  background-size:300% 300%;

  animation:gradientMove 8s ease infinite;

  z-index:-1;
}

@keyframes gradientMove{
  0%{
    background-position:0% 50%;
  }

  50%{
    background-position:100% 50%;
  }

  100%{
    background-position:0% 50%;
  }
}

.marquee-text{
  display:inline-flex;

  align-items:center;

  gap:60px;

  white-space:nowrap;

  padding-left:100%;

  animation:marqueeMove 22s linear infinite;

  font-size:17px;
  font-weight:700;

  letter-spacing:1px;

  color:white;

  text-shadow:
  0 0 5px #00f7ff,
  0 0 10px #00f7ff,
  0 0 20px rgba(0,247,255,0.8);
}

.marquee:hover .marquee-text{
  animation-play-state:paused;
}

@keyframes marqueeMove{
  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-100%);
  }
}

.marquee-icon{
  color:#00f7ff;

  font-size:18px;

  animation:pulseIcon 1.5s infinite;

  filter:
  drop-shadow(0 0 8px #00f7ff);
}

@keyframes pulseIcon{
  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.2);
  }

  100%{
    transform:scale(1);
  }
}

/* =========================
   VIDEO BANNER
========================= */

.video-banner{
  position:relative;

  height:100vh;

  overflow:hidden;
}

.video-banner video{
  width:100%;
  height:100%;

  object-fit:cover;

  filter:brightness(0.4);
}

.video-overlay{
  position:absolute;

  top:50%;
  left:50%;

  transform:
  translate(-50%,-50%);

  text-align:center;

  z-index:2;

  color:white;

  animation:fadeUpCenter 1.5s ease;
}

.video-overlay h1{
  font-size:70px;
  font-weight:bold;
}

.video-overlay p{
  font-size:22px;
}

@keyframes fadeUpCenter{
  from{
    opacity:0;

    transform:
    translate(-50%,-20%);
  }

  to{
    opacity:1;

    transform:
    translate(-50%,-50%);
  }
}

/* =========================
   IMAGE FIX
========================= */

img{
  user-select:none;
  -webkit-user-drag:none;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){

  .carousel-item{
    height:70vh;
  }

  .carousel-caption-custom{
    left:5%;
    max-width:90%;
  }

  .carousel-caption-custom h1{
    font-size:40px;
  }

  .carousel-caption-custom p{
    font-size:16px;
  }

  .video-overlay h1{
    font-size:40px;
  }

  .video-overlay p{
    font-size:16px;
  }

  .product-slide-card{
    min-width:260px;
  }
}
/* ===== LOADING SCREEN ===== */
#loader{
  position:fixed;
  width:100%;
  height:100%;
  background:#000;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  transition:1s;
}

.loader-logo{
  font-size:50px;
  font-weight:bold;
  color:#0dcaf0;
  letter-spacing:5px;
  animation:pulse 1.5s infinite;
}

.loader-bar{
  width:250px;
  height:5px;
  background:#222;
  margin-top:20px;
  border-radius:20px;
  overflow:hidden;
}

.loader-fill{
  width:0%;
  height:100%;
  background:#0dcaf0;
  animation:loading 3s linear forwards;
}

@keyframes loading{
  to{
    width:100%;
  }
}

@keyframes pulse{
  0%{
    transform:scale(1);
  }
  50%{
    transform:scale(1.08);
  }
  100%{
    transform:scale(1);
  }
}

/* ===== PARTICLE BACKGROUND ===== */
.particles{
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  overflow:hidden;
  z-index:-1;
}

.particles span{
  position:absolute;
  display:block;
  width:10px;
  height:10px;
  background:rgba(13,202,240,0.3);
  border-radius:50%;
  animation:floatParticle linear infinite;
  bottom:-150px;
}

@keyframes floatParticle{
  0%{
    transform:translateY(0) scale(0);
    opacity:0;
  }

  20%{
    opacity:1;
  }

  100%{
    transform:translateY(-120vh) scale(1);
    opacity:0;
  }
}

/* ===== GLASS EFFECT ===== */
.card,
.product-slide-card,
.contact-box{
  background:rgba(255,255,255,0.05) !important;
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.1);
}

/* ===== FLOATING ICON ===== */
.floating-icon{
  animation:floating 3s ease-in-out infinite;
}

@keyframes floating{
  0%{
    transform:translateY(0px);
  }
  50%{
    transform:translateY(-10px);
  }
  100%{
    transform:translateY(0px);
  }
}

/* ===== 3D PRODUCT HOVER ===== */
.product-slide-card:hover{
  transform:
  perspective(1000px)
  rotateY(5deg)
  rotateX(5deg)
  translateY(-10px);
}

/* ===== TEXT GLOW ===== */
.glow-text{
  color:#fff;
  text-shadow:
  0 0 10px #0dcaf0,
  0 0 20px #0dcaf0,
  0 0 40px #0dcaf0;
}

/* ===== BUTTON GLOW ===== */
.btn-info{
  position:relative;
  overflow:hidden;
}

.btn-info::before{
  content:"";
  position:absolute;
  width:100px;
  height:100%;
  background:rgba(255,255,255,0.4);
  top:0;
  left:-120px;
  transform:skewX(-30deg);
}

.btn-info:hover::before{
  animation:shine 0.8s;
}

@keyframes shine{
  100%{
    left:120%;
  }
}
/* STUDENT SECTION */
.student-card{

    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.1);

    border-radius:25px;

    backdrop-filter:blur(10px);

    transition:0.4s;

    overflow:hidden;
}

.student-card:hover{

    transform:
    translateY(-10px)
    scale(1.03);

    box-shadow:
    0 0 25px rgba(0,229,255,0.5);
}

.student-img{

    width:180px;
    height:180px;

    object-fit:cover;

    border-radius:50%;

    border:4px solid #00e5ff;

    box-shadow:
    0 0 25px rgba(0,229,255,0.6);

    transition:0.4s;
}

.student-card:hover .student-img{

    transform:scale(1.08);
}
html{
  scroll-behavior:smooth;
}
.size-select{
    background:#111;
    border:1px solid #444;
    color:white;
    border-radius:10px;
    padding:8px 12px;
    transition:.3s;
}

.size-select:focus{
    border-color:#0dcaf0;
    box-shadow:0 0 10px rgba(0,255,255,.3);
    background:#111;
    color:white;
}