body {
  background: #1a1a1a !important;
  color: #fafafa !important;
  font-family: "Doto", sans-serif;
}
.bg-glass {
  /* Glassmorphism style */
  background: rgba(30, 30, 35, 0.75) !important;
  box-shadow: 0 2px 18px 2px rgba(0,0,0,0.15);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.07) !important;
}
.glass-divider {
  height: 4px;
  width: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #0004, #19e8e8dd, #0004);
  box-shadow: 0 1px 12px #1abc9c44;
}
.bg-gray {
  background: #212529 !important;
}
/* .profile-photo {
  width: 120px;
  height: 140px;
  object-fit:fill;
  margin-bottom: 10px;
  background: #222;
  box-shadow: 0 2px 12px #0007;
  border-radius: 20%;
} */

.profile-flip-card {
  width: 130px;
  height: 130px;
  perspective: 700px;
  border-radius: 50%;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(.4,.2,.2,1.2);
  transform-style: preserve-3d;
  border-radius: 50%;
}
.profile-flip-card:hover .flip-card-inner,
.profile-flip-card:focus .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  backface-visibility: hidden;
  overflow: hidden;
  box-shadow: 0 2px 18px #0007, 0 0 0 2px #1abc9c44;
  background: rgba(40,40,47,0.21);
}
.flip-card-front .profile-img,
.flip-card-back .profile-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.flip-card-back {
  transform: rotateY(180deg);
  background: rgba(30,232,232,0.11);
}

a, .btn-link {
  color: #12f3e0 !important;
  text-decoration: none !important;
}

.btn-info {
  border-radius: 2rem;
  font-weight: 600;
  color: #000 !important;
}
.btn-outline-light {
  border-radius: 2rem;
}
.gap-3 {
  gap: 1rem!important;
}


.card {
  border-radius: 13px !important;
  border: none !important;
  box-shadow: 0 2px 12px 1px #0004;
}
.card-header {
  border-radius: 13px 13px 0 0 !important;
  background: rgba(32, 255, 216, 0.04);
  border-bottom: 1px solid #161616 !important;
}
.carousel {
  background: transparent !important;
}
.glass-img {
  box-shadow: 0 0 32px 1px #1abc9c44;
  background: rgba(30, 30, 35, 0.40);
  border: 2px solid rgba(255,255,255,0.13);
  backdrop-filter: blur(2px);
}
.btn-outline-info, .btn-info {
  border-radius: 1.5rem;
}
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-thumb { background: #222; border-radius: 7px; }
::-webkit-scrollbar-track { background: #111; border-radius: 7px; }


.glass-divider {
  position: relative;
  height: 4px;
  width: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #0004, #19e8e8dd 50%, #0004);
  box-shadow: 0 1px 12px #1abc9c44;
  overflow: hidden;
}

.glass-divider::before {
  content: '';
  position: absolute;
  top: -15px; left: 0; right: 0; height: 34px;
  background: linear-gradient(90deg, 
      rgba(25,232,232,0.2) 0%,
      #71fff7 43%, #fff 49%, #444bff 50%, #71fff7 57%, 
      rgba(25,232,232,0.2) 100%);
  opacity: 0.7;
  filter: blur(2.5px);
  width: 110px;
  animation: lightning-move 2.8s infinite ease-in-out alternate, lightning-flicker 1.2s infinite;
}

@keyframes lightning-move {
  0% { left: -110px; }
  100% { left: 100%; }
}
@keyframes lightning-flicker {
  0%,100% { opacity: 1; }
  7%,12% { opacity: 0.3; }
  10% { opacity: 0.85; }
  20% { opacity: 0.25; }
  24% { opacity: 1; }
  50% { opacity: 0.85; }
}


.sidebar-menu {
  position: fixed;
  top: 0;
  right: -72px; /* hide by default */
  width: 72px;
  height: calc(100vh - 54px);
  background: rgba(30, 30, 35, 0.91);
  box-shadow: -2px 0 18px #17a2b820;
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: right 0.22s cubic-bezier(.24,.88,.42,1.01);
  border-radius: 12px 0 0 12px;
  border-left: 2px solid #12121233;
  padding-top: 2.8em;
  padding-bottom: 1.6em;
  padding-right: 7px;
  margin-right: 18px; /* floating from right */
}

.sidebar-menu.show {
  right: 0;
}

.sidebar-menu ul {
  padding: 0;
  margin: 0;
}

.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fafafa;
  text-decoration: none;
  width: 44px;
  height: 44px;
  font-size: 1.23em;
  margin: 15px auto;
  border-radius: 9px;
  background: none;
  transition: background .17s, color .18s, font-size .12s;
  position: relative;
}
.sidebar-link:hover, .sidebar-link:focus {
  background: #19e8e850;
  color: #1abc9c;
  font-size: 1.32em;
}
.sidebar-link i {
  color: #19e8e8cc;
  pointer-events: none;
}
@media (max-width: 699px) {
  .sidebar-menu {
    width: 53px;
    right: -53px;
    padding-right: 3px;
  }
  .sidebar-link { width: 32px; height: 32px; }
}



.education-3d-img {
  position: absolute;
  top: 20px;
  right: -32px;
  width: 220px;
  max-width: 35vw;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 6px 24px rgba(25,232,232,0.34))
          blur(.6px);
  animation: eduFloat 3.7s ease-in-out infinite alternate;
}
.banner-3d-img {
  position:absolute;
  top: 20px;
  right: -32px;
  /* width: 220px;
  max-width: 35vw;  */
  opacity: 0.3;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 6px 24px rgba(25,232,232,0.34))
          blur(.6px);
  animation: eduFloat 5.7s ease-in-out infinite alternate;
}

@keyframes eduFloat {
  0% { transform: translateY(0px) rotate(-4deg) scale(1);}
  50% { transform: translateY(16px) rotate(5deg) scale(1.05);}
  100% { transform: translateY(0px) rotate(-2deg) scale(1.01);}
}


@media (max-width: 600px) {
  .profile-photo { width: 75px; height: 75px; }
  .glass-img { width: 55px !important; height: 55px !important; }
  .card-header, .card-body { padding: 1rem !important; }
  .container { padding: 0 .2rem !important; }
}




/* Tic Tac Toe */
.tic-grid {
  display: grid;
  grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(3, 56px);
  gap: 6px;
  justify-content: center;
}
.tic-cell {
  background: rgba(20,20,25,0.85);
  border: 1px solid #19e8e855;
  border-radius: 8px;
  color: #19e8e8;
  font-size: 1.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s, transform .12s, box-shadow .18s;
}
.tic-cell:hover {
  background: rgba(25,232,232,0.14);
  box-shadow: 0 0 10px #19e8e850;
  transform: translateY(-1px);
}

/* Word Search */
.word-grid {
  display: grid;
  grid-template-columns: repeat(6, 26px);
  gap: 4px;
  justify-content: center;
  padding: 10px;
  background: rgba(20,20,25,0.85);
  border-radius: 10px;
  border: 1px solid #19e8e833;
}
.word-grid span {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  border-radius: 6px;
  cursor: pointer;
  color: #f5f5f5;
  background: rgba(40,40,47,0.7);
  transition: background .16s, transform .1s, box-shadow .16s;
}
.word-grid span.active {
  background: #19e8e880;
  color: #000;
  box-shadow: 0 0 8px #19e8e866;
  transform: translateY(-1px);
}

@media (max-width: 576px) {
  .tic-grid {
    grid-template-columns: repeat(3, 48px);
    grid-template-rows: repeat(3, 48px);
  }
}


#weatherTimeWidget {
  opacity: 0.9;
}
#weatherTimeWidget i {
  font-size: 1.1rem;
  color: #19e8e8;
}
#wt-temp {
  color: #19e8e8;
}
#wt-time {
  color: #cccccc;
}