.video-gallery
{
	position:relative;
}
.video-gallery a
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:block;
}
.video-gallery:hover a
{
	background-color:rgba(0,0,0,.5);
}



/* ==================hero section side animation ======================== */


/* body {
    margin: 0;
    height: 100vh;
    
    align-items: center;
    justify-content: center;
    background-color: black;
    overflow: hidden;
} */



/* =====     hero text================= */



.herotext  .neon-container{
    text-align: center;
    margin-right: 10rem;

}

/* =============== hero text animation =================== */

.herotext .neon-container h1{
    position: relative;
    color: #222;
}

.herotext .neon-container h1::before{
    content: attr(data-text);
    position: absolute;
    color: #fff;
    width: 0;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    border-right: 6px solid #fff;
    animation: animate 8s linear infinite;
    filter: drop-shadow(0 0 10px #fff);

}

@keyframes animate
{
    0%,10%,100%
    {
        width: 0;
    }

    70%,90%
    {
        width: 100%;
    }
}



/* ===================  round shape header ================ */
.bg-item .round-shape {
  background-color: #02050A;
  height: 780px;
  width: 1080px;
  position: absolute;
  top: -70%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 0 80px rgba(0, 229, 255, 0.3),
    0 0 60px rgba(0, 229, 255, 0.15),
    0 0 120px rgba(0, 229, 255, 0.2);
  animation: radarPulse 5s ease-in-out infinite;
}

@keyframes radarPulse {
  0%, 100% {
    box-shadow:
      inset 0 0 80px rgba(0, 229, 255, 0.3),
      0 0 60px rgba(0, 229, 255, 0.15),
      0 0 120px rgba(0, 229, 255, 0.2);
  }
  50% {
    box-shadow:
      inset 0 0 120px rgba(0, 229, 255, 0.5),
      0 0 100px rgba(0, 229, 255, 0.3),
      0 0 150px rgba(0, 229, 255, 0.4);
  }
}



/* ============================ body side shadow ================================ */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;

  background: 
    linear-gradient(to right, rgba(0,126,255,0.08), transparent 300px) left top / 400px 100% no-repeat,
    linear-gradient(to left, rgba(0,126,255,0.08), transparent 300px) right top / 400px 100% no-repeat;
}




/* ================================== footer list work========================= */
.footer-list,
.footer-list-extra {
    list-style: none;   /* remove bullets */
    padding: 0;
    margin: 0;
}

.footer-list li {
    display: block;     /* force vertical stacking */
    margin-bottom: 8px; /* space between items */
}

.footer-list li a {
    color: #fff;        /* adjust for dark footer */
    text-decoration: none;
    transition: color 0.3s;
}

.footer-list li a:hover {
    color: #00B5FF;     /* your brand blue */
}



/* ============================== prealoader ============== */



/* ....... ---------------------- index page category carousels -1 ==========================*/

        @import url('https://fonts.cdnfonts.com/css/ica-rubrik-black');
@import url('https://fonts.cdnfonts.com/css/poppins');

.banner{
    width: 100%;
    height: 100vh;
    text-align: center;
    overflow: hidden;
    position: relative;
    align-items: center;
    align-content: center;
}
.banner .slider{
    position: absolute;
    width: 200px;
    height: 250px;
    top: 10%;
    left: calc(50% - 100px);
    transform-style: preserve-3d;
    transform: perspective(1000px);
    animation: autoRun 20s linear infinite;
    z-index: 2;
}
@keyframes autoRun{
    from{
        transform: perspective(1000px) rotateX(-16deg) rotateY(0deg);
    }to{
        transform: perspective(1000px) rotateX(-16deg) rotateY(360deg);
    }
}

.banner .slider .item{
    position: absolute;
    inset: 0 0 0 0;
    transform: 
        rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
        translateZ(380px);
}
.banner .slider .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.banner .content{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(1400px, 100vw);
    height: max-content;
    padding-bottom: 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
}
.banner .content h1{
    font-family: 'ICA Rubrik';
    font-size: 16em;
    line-height: 1em;
    color: #25283B;
    position: relative;
}
.banner .content h1::after{
    position: absolute;
    inset: 0 0 0 0;
    content: attr(data-content);
    z-index: 2;
    -webkit-text-stroke: 2px #d2d2d2;
    color: transparent;
}
.banner .content .author{
    font-family: Poppins;
    text-align: right;
    max-width: 200px;
}
.banner .content h2{
    font-size: 3em;
}
.banner .content .model{
    background-image: url(images/model.png);
    width: 100%;
    height: 75vh;
    position: absolute;
    bottom: 0;
    left: 0;
    background-size: auto 130%;
    background-repeat: no-repeat;
    background-position: top center;
    z-index: 1;
}
.banner .slider:hover {
    animation-play-state: paused;
}

@media screen and (max-width: 1023px) {
    .banner .slider{
        width: 160px;
        height: 200px;
        left: calc(50% - 80px);
    }
    .banner .slider .item{
        transform: 
            rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
            translateZ(300px);
    }
    .banner .content h1{
        text-align: center;
        width: 100%;
        text-shadow: 0 10px 20px #000;
        font-size: 7em;
    }
    .banner .content .author{
        color: #fff;
        padding: 20px;
        text-shadow: 0 10px 20px #000;
        z-index: 2;
        max-width: unset;
        width: 100%;
        text-align: center;
        padding: 0 30px;
    }
}
@media screen and (max-width: 767px) {
    .banner .slider{
        width: 100px;
        height: 150px;
        left: calc(50% - 50px);
    }
    .banner .slider .item{
        transform: 
            rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
            translateZ(180px);
    }
    .banner .content h1{
        font-size: 5em;
    }
}




/* ======================================== featured course ======================*/

.ls-curved-carousel {
  --viewport-height: 40rem;
  --viewport-height-m: 35rem;
  --perspective: 600px;
  --perspective-m: 400px;
  --block-offset: 0;
  --block-offset-m: 0;
  --fadeout: none;
  position: relative;
  width: 100%;
  height: var(--viewport-height);
  transform-style: preserve-3d;
  user-select: none;
  overflow: visible;
  z-index: 1;
  margin-block: var(--block-offset);
  -webkit-mask-image: var(--fadeout);
  mask-image: var(--fadeout);
}

.ls-curved-carousel.fadeout {
  --fadeout: linear-gradient(90deg, transparent, white 20%, white 80%, transparent 100%);
}

.ls-curved-carousel__stage {
  perspective: var(--perspective);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.ls-curved-carousel__ring {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.ls-curved-carousel__slide {
  position: absolute;
  transform-style: preserve-3d;
  overflow: hidden;
}

.ls-curved-carousel__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}

@media (max-width: 767px) {
  .ls-curved-carousel {
    height: var(--viewport-height-m);
    margin-block: var(--block-offset-m);
  }
  .ls-curved-carousel__stage {
    perspective: var(--perspective-m);
  }
}


/* =================================  aurora effect========================== */



.aurora {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 70vh;
  background: radial-gradient(circle at 30% 50%, rgba(0,255,200,0.5), transparent 60%),
              radial-gradient(circle at 70% 40%, rgba(14, 148, 243, 0.502), transparent 60%),
              radial-gradient(circle at 50% 80%, rgba(200, 0, 255, 0.443), transparent 70%);
  background-blend-mode: screen;
  filter: url(#noise) blur(60px);
  animation: move 9s ease-in-out infinite alternate;
  z-index: -1;
}

@keyframes move {
  0% {
    transform: translateY(-60px) translateX(-60px); /* more movement */
  }
  50% {
    transform: translateY(80px) translateX(80px);
  }
  100% {
    transform: translateY(-50px) translateX(-50px);
  }
}


/* =================================  course carousel graphics ====================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
    --item1-transform: translateX(-100%) translateY(-5%) scale(1.5);
    --item1-filter: blur(30px);
    --item1-zIndex: 11;
    --item1-opacity: 0;

    --item2-transform: translateX(0);
    --item2-filter: blur(0px);
    --item2-zIndex: 10;
    --item2-opacity: 1;

    --item3-transform: translate(50%,10%) scale(0.8);
    --item3-filter: blur(10px);
    --item3-zIndex: 9;
    --item3-opacity: 1;

    --item4-transform: translate(90%,20%) scale(0.5);
    --item4-filter: blur(30px);
    --item4-zIndex: 8;
    --item4-opacity: 1;
    
    --item5-transform: translate(120%,30%) scale(0.3);
    --item5-filter: blur(40px);
    --item5-zIndex: 7;
    --item5-opacity: 0;
}


/* carousel */
.carousels{
    position: relative;
    height: 600px;
    overflow: hidden;
    /* margin-top: -50px; */
}
.carousels .list{
    position: absolute;
    width: 1140px;
    max-width: 90%;
    height: 60%;
    left: 50%;
    transform: translateX(-50%);
    
   
}
.arrows{
  margin: 50px 0px;
}
.carousels .list .item{
    position: absolute;
    left: 0%;
    width: 70%;
    height: 100%;
    font-size: 15px;
    transition: left 0.5s, opacity 0.5s, width 0.5s;
    
}
.carousels .list .item:nth-child(n + 6){
    opacity: 0;
}
.carousels .list .item:nth-child(2){
    z-index: 10;
    transform: translateX(0);
}
.carousels .list .item img{
    width: 50%;
    position: absolute;
    right: 0;
    top: 65%;
    transform: translateY(-50%);
    transition: right 1.5s;
}

.carousels .list .item .introduce{
    opacity: 0;
    pointer-events: none;
}
.carousels .list .item:nth-child(2) .introduce{
    opacity: 1;
    pointer-events: auto;
    width: 400px;
    position: absolute;
    top: 60%;
    transform:  translateY(-50%);
    transition: opacity 0.5s;
}
.carousels .list .item .introduce .title{
    font-size: 2em;
    font-weight: 500;
    line-height: 1em;
}
.carousels .list .item .introduce .topic{
    font-size: 4em;
    font-weight: 500;
    margin-bottom: 24px;
}
.carousels .list .item .introduce .des{
    font-size: small;
    color: #5559;
}
/* .carousels .list .item .introduce .seeMore{
    font-family: Poppins;
    margin-top: 1.2em;
    padding: 5px 0;
    border: none;
    border-bottom: 1px solid #555;
    background-color: transparent;
    font-weight: bold;
    letter-spacing: 3px;
    transition: background 0.5s;
}
.carousels .list .item .introduce .seeMore:hover{
    background: #eee;
} */
.carousels .list .item:nth-child(1){
    transform: var(--item1-transform);
    filter: var(--item1-filter);
    z-index: var(--item1-zIndex);
    opacity: var(--item1-opacity);
    pointer-events: none;
}
.carousels .list .item:nth-child(3){
    transform: var(--item3-transform);
    filter: var(--item3-filter);
    z-index: var(--item3-zIndex);
}
.carousels .list .item:nth-child(4){
    transform: var(--item4-transform);
    filter: var(--item4-filter);
    z-index: var(--item4-zIndex);
}
.carousels .list .item:nth-child(5){
    transform: var(--item5-transform);
    filter: var(--item5-filter);
    opacity: var(--item5-opacity);
    pointer-events: none;
}
/* animation text in item2 */
.carousels .list .item:nth-child(2) .introduce .title,
.carousels .list .item:nth-child(2) .introduce .topic,
.carousels .list .item:nth-child(2) .introduce .des,
.carousels .list .item:nth-child(2) .introduce .seeMore{
    opacity: 0;
    animation: showContent 0.5s 1s ease-in-out 1 forwards;
}
@keyframes showContent{
    from{
        transform: translateY(-30px);
        filter: blur(10px);
    }to{
        transform: translateY(0);
        opacity: 1;
        filter: blur(0px);
    }
}
.carousels .list .item:nth-child(2) .introduce .topic{
    animation-delay: 1.2s;
}
.carousels .list .item:nth-child(2) .introduce .des{
    animation-delay: 1.4s;
}
.carousels .list .item:nth-child(2) .introduce .seeMore{
    animation-delay: 1.6s;
}
/* next click */
.carousels.next .item:nth-child(1){
    animation: transformFromPosition2 0.5s ease-in-out 1 forwards;
}
@keyframes transformFromPosition2{
    from{
        transform: var(--item2-transform);
        filter: var(--item2-filter);
        opacity: var(--item2-opacity);
    }
}
.carousels.next .item:nth-child(2){
    animation: transformFromPosition3 0.7s ease-in-out 1 forwards;
}
@keyframes transformFromPosition3{
    from{
        transform: var(--item3-transform);
        filter: var(--item3-filter);
        opacity: var(--item3-opacity);
    }
}
.carousels.next .item:nth-child(3){
    animation: transformFromPosition4 0.9s ease-in-out 1 forwards;
}
@keyframes transformFromPosition4{
    from{
        transform: var(--item4-transform);
        filter: var(--item4-filter);
        opacity: var(--item4-opacity);
    }
}
.carousels.next .item:nth-child(4){
    animation: transformFromPosition5 1.1s ease-in-out 1 forwards;
}
@keyframes transformFromPosition5{
    from{
        transform: var(--item5-transform);
        filter: var(--item5-filter);
        opacity: var(--item5-opacity);
    }
}
/* previous */
.carousels.prev .list .item:nth-child(5){
    animation: transformFromPosition4 0.5s ease-in-out 1 forwards;
}
.carousels.prev .list .item:nth-child(4){
    animation: transformFromPosition3 0.7s ease-in-out 1 forwards;
}
.carousels.prev .list .item:nth-child(3){
    animation: transformFromPosition2 0.9s ease-in-out 1 forwards;
}
.carousels.prev .list .item:nth-child(2){
    animation: transformFromPosition1 1.1s ease-in-out 1 forwards;
}
@keyframes transformFromPosition1{
    from{
        transform: var(--item1-transform);
        filter: var(--item1-filter);
        opacity: var(--item1-opacity);        
    }
}

/* detail  */
.carousels .list .item .detail{
    opacity: 0;
    pointer-events: none;
}
/* showDetail */
.carousels.showDetail .list .item:nth-child(3),
.carousels.showDetail .list .item:nth-child(4){
    left: 100%;
    opacity: 0;
    pointer-events: none;
}
.carousels.showDetail .list .item:nth-child(2){
    width: 100%;
}
.carousels.showDetail .list .item:nth-child(2) .introduce{
    opacity: 0;
    pointer-events: none;
}
.carousels.showDetail .list .item:nth-child(2) img{
    right: 60%;
    width: 40%;
}
.carousels.showDetail .list .item:nth-child(2) .detail{
    opacity: 1;
    width: 50%;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align:justify;
    pointer-events: auto;
}
.carousels.showDetail .list .item:nth-child(2) .detail .title{
    font-size: 4em;
}
.carousels.showDetail .list .item:nth-child(2) .detail .specifications{
    display: flex;
    gap: 10px;
    width: 100%;
    border-top: 1px solid #5553;
    margin-top: 20px;
}
.carousels.showDetail .list .item:nth-child(2) .detail .specifications div{
    width: 90px;
    text-align: center;
    flex-shrink: 0;
}
.carousels.showDetail .list .item:nth-child(2) .detail .specifications div p:nth-child(1){
    font-weight: bold;
}
.carousels.carousels.showDetail .list .item:nth-child(2) .checkout button{
    font-family: Poppins;
    background-color: transparent;
    border: 1px solid #5555;
    margin-left: 5px;
    padding: 5px 10px;
    letter-spacing: 2px;
    font-weight: 500;
}
.carousels.carousels.showDetail .list .item:nth-child(2) .checkout button:nth-child(2){
    background-color: #693EFF;
    color: #eee;
}
.carousels.showDetail .list .item:nth-child(2) .detail  .title,
.carousels.showDetail .list .item:nth-child(2) .detail  .des,
.carousels.showDetail .list .item:nth-child(2) .detail .specifications,
.carousels.showDetail .list .item:nth-child(2) .detail .checkout{
    opacity: 0;
    animation: showContent 0.5s 1s ease-in-out 1 forwards;
}
.carousels.showDetail .list .item:nth-child(2) .detail  .des{
    animation-delay: 1.2s;
}
.carousels.showDetail .list .item:nth-child(2) .detail .specifications{
    animation-delay: 1.4s;
}
.carousels.showDetail .list .item:nth-child(2) .detail .checkout{
    animation-delay: 1.6s;
}
.arrows{
    position: absolute;
    bottom: 10px;
    width: 1140px;
    max-width: 90%;
    display: flex;
    justify-content: space-between;
    left: 50%;
    transform: translateX(-50%);
   
  
}
#prev,
#next{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-family: monospace;
    border: 1px solid #5555;
    font-size: large;
    bottom: 20%;
    left: 10%;
}
#next{
    left: unset;
    right: 10%;
}
#back{
    position: absolute;
    z-index: 100;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
    border: none;
    border-bottom: 1px solid #555;
    font-family: Poppins;
    font-weight: bold;
    letter-spacing: 3px;
    background-color: transparent;
    padding: 10px;
    /* opacity: 0; */
    transition: opacity 0.5s;
}
.carousels.showDetail #back{
    opacity: 1;
}
.carousels.showDetail #prev,
.carousels.showDetail #next{
    opacity: 0;
    pointer-events: none;
}
.carousels::before{
    width: 500px;
    height: 300px;
    content: '';
    background-image: linear-gradient(70deg, #DC422A, blue);
    position: absolute;
    z-index: -1;
    border-radius: 20% 30% 80% 10%;
    filter: blur(150px);
    top: 50%;
    left: 50%;
    transform: translate(-10%, -50%);
    transition: 1s;
}
.carousels.showDetail::before{
    transform: translate(-100%, -50%) rotate(90deg);
    filter: blur(130px);
}
@media screen and (max-width: 991px){
    /* ipad, tablets */
    .carousels .list .item{
        width: 90%;
    }
    .carousels.showDetail .list .item:nth-child(2) .detail .specifications{
        overflow: auto;
    }
    .carousels.showDetail .list .item:nth-child(2) .detail .title{
        font-size: 2em;
    }
}
@media screen and (max-width: 767px){
    /* mobile */
    .carousels{
        height: 600px;
    }
    .carousels .list .item{
        width: 100%;
        font-size: 10px;
    }
    
    .carousels .list{
        height: 100%;
    }
    .carousels .list .item:nth-child(2) .introduce{
        width: 50%;
    }
    
    .carousels .list .item img{
        width: 40%;
    }
    .carousels.showDetail .list .item:nth-child(2) .detail{
        backdrop-filter: blur(10px);
        font-size: small;
    }
    .carousels .list .item:nth-child(2) .introduce .des,
    .carousels.showDetail .list .item:nth-child(2) .detail .des{
        height: 100px;
        overflow: auto;
    }
    .carousels.showDetail .list .item:nth-child(2) .detail .checkout{
        display: flex;
        width: max-content;
        float: right;
    }
}


/* ================================ top bar ============================== */

.header-6 .top-bar {
  background-color: transparent; /* Keep background clear */
  position: relative;
  z-index: 10;

  /* Glow shadow effect */
  box-shadow: 0 0 25px rgba(0, 126, 255, 0.7); 
}

[data-theme='light'] .header-10 .top-bar .top-bar-inner .top-bar-list li a{
  color: #02050A;

}

[data-theme='light'] .header-10 .top-bar .top-bar-inner .top-bar-list li i{
  color: blue;

}

[data-theme='light'] .header-10 .top-bar .top-bar-inner .top-bar-right .top-bar-social .social-list li a i{
  color: blue;

}

[data-theme='light'] .header-10 .top-bar .top-bar-inner .top-bar-right .top-bar-social span{
  color: #02050A;

}

[data-theme=light] .inner-header.fixed {
    background: rgba(194, 190, 190, 0.3); /* semi-transparent black */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3),   /* subtle cyan bottom glow */
              0 5px 25px rgba(0, 0, 255, 0.2),     /* subtle blue bottom glow */
              0 5px 35px rgba(128, 0, 255, 0.15);  /* subtle violet bottom glow */

  border: none;
}



  /* =========================== bradcrumb================================= */
  /*houdini*/
/* @property --blink-opacity {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
} */

/* #fallback @keyframes blink-animation {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}*/

/* @keyframes blink-animation {
  0%,
  100% {
    opacity: var(--blink-opacity, 1);
  }
  50% {
    opacity: 0;
  }
} */
/*houdini*/

/*base*/
/* :root {
  font-family: Inter, sans-serif;

  --stripe-color: #fff;
  --bg: var(--stripe-color);
  --maincolor: black;
} */

/* body {
  width: inherit;
  min-height: 100cqh;
  display: flex;
  place-content: center;
  place-items: flex-start center;
  background: black;
} */

/*custom*/

/* @keyframes smoothBg {
  from {
    background-position: 50% 50%, 50% 50%;
  }
  to {
    background-position: 350% 50%, 350% 50%;
  }
} */

/* .wrapper {
  width: 100%;
  height: auto;
  position: relative;
} */


/* Theme-based background control */
/* [data-theme="light"] {
  --stripe-color: #000; 
}

[data-theme="dark"] {
  --stripe-color: #fff; 
}

[data-theme="light"] .hero,
[data-theme="light"] .hero::after {
  filter: blur(10px) opacity(50%) saturate(200%);
}

[data-theme="dark"] .hero,
[data-theme="dark"] .hero::after {
  filter: blur(10px) invert(100%);
} */

/* [data-theme="light"] .hero{
    --stripes: repeating-linear-gradient(
    100deg,
    var(--stripe-color) 0%,
    var(--stripe-color) 7%,
    transparent 10%,
    transparent 12%,
    var(--stripe-color) 16%
  );

  --rainbow: repeating-linear-gradient(
    100deg,
    #60a5fa 10%,
    #e879f9 15%,
    #60a5fa 20%,
    #5eead4 25%,
    #60a5fa 30%
  );
  background-image: var(--stripes), var(--rainbow);
  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;

  filter: blur(30px) invert(100%);

  mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--stripes), var(--rainbow);
    background-size: 200%, 100%;
    animation: smoothBg 60s linear infinite;
    background-attachment: fixed;
    mix-blend-mode: difference;
  }

}

[data-theme="dark"] {
  --stripe-color: #000; 
}

[data-theme="dark"] .hero{
    --stripes: repeating-linear-gradient(
    100deg,
    var(--stripe-color) 0%,
    var(--stripe-color) 7%,
    transparent 10%,
    transparent 12%,
    var(--stripe-color) 16%
  );

  --rainbow: repeating-linear-gradient(
    100deg,
    #24056b 10%,
    #550961 15%,
    #1100d1 20%,
    #193a0f 25%,
    #022551 30%
  );
  background-image: var(--stripes), var(--rainbow);
  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;

  filter: blur(38px) ;

  mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--stripes), var(--rainbow);
    background-size: 200%, 100%;
    animation: smoothBg 60s linear infinite;
    background-attachment: fixed;
    mix-blend-mode: difference;
  }

}

.hero {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  position: relative;
  display: flex;
  place-content: center;
  place-items: center;

} */

/* :has(:checked) {
  --stripe-color: #000;
}
:has(:checked) .hero,
:has(:checked) .hero::after {
  filter: blur(10px) opacity(50%) saturate(200%);
} */

/* [data-theme="light"] .content{
  filter: invert(1);

}
.content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  place-content: center;
  place-items: center;
  flex-flow: column;
  gap: 4.5%;
  text-align: center;
  mix-blend-mode: difference;
  -webbkit-mix-blend-mode: difference;
 
}

.h1--scalingSize {
  font-size: calc(1rem - -5vw);
  position: relative;
}

#switch {
  appearance: none;
  -webkit-appearance: none;
  opacity: 0;
}



@keyframes animSwitch {
  50% {
    transform: scale(1.2);
    font-weight: 900;
  }
} */


/*challenge*/
/* .h1--scalingSize::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: rgb(20, 4, 4);
  text-shadow: 0 0 1px #ffffff;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-color: white;
  -webkit-mask: linear-gradient(#000 0 0) luminance;
  mask: linear-gradient(#000 0 0) luminance, alpha;
  backdrop-filter: blur(19px) brightness(12.5);
  -webkit-text-stroke: 1px white;
  display: flex;
  margin: auto;
  z-index: 1;
  pointer-events: none;
} */


/* ================================ dark-light=============== */

[data-theme="light"] .sub-header {
  background: rgba(194, 190, 190, 0.3); /* semi-transparent black */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3),   /* subtle cyan bottom glow */
              0 5px 25px rgba(0, 0, 255, 0.2),     /* subtle blue bottom glow */
              0 5px 35px rgba(128, 0, 255, 0.15);  /* subtle violet bottom glow */
}


/* ========== Light Theme Header Base =============== */
[data-theme="light"] .header-menu-wrap ul li > a {
  position: relative;
  color: #000; /* black menu text */
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Neon-style underline animation for light theme */
[data-theme="light"] .header-menu-wrap ul li > a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, rgba(0,255,255,0.8), rgba(0,0,255,0.7), rgba(128,0,255,0.6)); /* cyan-blue-violet gradient */
  border-radius: 2px;
  transition: width 0.4s ease, background 0.5s ease;
  box-shadow: 0 0 6px rgba(0,255,255,0.5), 0 0 10px rgba(0,0,255,0.4), 0 0 14px rgba(128,0,255,0.3); /* soft glow */
  animation: gradientShiftLight 3s infinite linear;
}

/* Hover effect - expand underline and subtle glow on text */
[data-theme="light"] .header-menu-wrap ul li:hover > a::after {
  width: 100%;
}

[data-theme="light"] .header-menu-wrap ul li:hover > a {
  color: #000; /* remain black */
  text-shadow: 0 0 4px rgba(0,255,255,0.6), 0 0 8px rgba(0,0,255,0.5), 0 0 12px rgba(128,0,255,0.4); /* subtle text glow */
}

/* Gradient animation for light theme underline */
@keyframes gradientShiftLight {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


[data-theme="dark"] .sub-header {
  background: rgba(7, 7, 58, 0.466); /* dark glass */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;

  /* cosmic shadow around card */
  box-shadow: 
    0 8px 20px rgba(0, 80, 180, 0.25),   /* royal blue shadow */
    0 12px 28px rgba(4, 48, 31, 0.477),  /* green shadow */
    0 16px 36px rgba(100, 0, 160, 0.2);  /* violet shadow */
}

/* ========== hover effect on menubar for dark=============== */
/* Menu items hover effect */
[data-theme="dark"] .header-menu-wrap ul li > a {
  position: relative;
  color: #fff;
  transition: color 0.3s ease;
}

/* Neon underline animation */
[data-theme="dark"] .header-menu-wrap ul li > a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #00ffea, #6a00ff, #00ffea); /* cyan-violet gradient */
  border-radius: 2px;
  transition: width 0.4s ease;
  box-shadow: 0 0 8px #00ffea, 0 0 12px #6a00ff; /* subtle glow */
}

/* On hover */
[data-theme="dark"] .header-menu-wrap ul li:hover > a::after {
  width: 100%;
}


/*  =================================  header end ========================== */


/* =============== details card start ======================= */
[data-theme="light"] .course__details__wraper {
  background: rgba(194, 190, 190, 0.3); /* semi-transparent black */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3),   /* subtle cyan bottom glow */
              0 5px 25px rgba(0, 0, 255, 0.2),     /* subtle blue bottom glow */
              0 5px 35px rgba(128, 0, 255, 0.15);  /* subtle violet bottom glow */
}

[data-theme="dark"] .course__details__wraper {
  background: rgba(6, 6, 125, 0.3); /* dark glass */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(4, 91, 33, 0.317);
  border-radius: 12px;

  /* cosmic shadow around card */
  box-shadow: 
    0 8px 20px rgba(0, 80, 180, 0.25),   /* royal blue shadow */
    0 12px 28px rgba(2, 64, 20, 0.372),  /* green shadow */
    0 16px 36px rgba(100, 0, 160, 0.2);  /* violet shadow */
}

/* ================ details card end ============================= */




/* ========================= side bar wrapper =================  */
[data-theme="light"] .course__details__wraper li{
  color:#02050A;
}

[data-theme="dark"] .course__details__wraper li{
  color: rgb(245, 255, 255);
}

[data-theme="light"] .event__sidebar__wraper {
  background: rgba(194, 190, 190, 0.3); /* semi-transparent black */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3),   /* subtle cyan bottom glow */
              0 5px 25px rgba(0, 0, 255, 0.2),     /* subtle blue bottom glow */
              0 5px 35px rgba(128, 0, 255, 0.15);  /* subtle violet bottom glow */
}

[data-theme="dark"] .event__sidebar__wraper {
  background: rgba(6, 6, 125, 0.3); /* dark glass */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(4, 91, 33, 0.317);
  border-radius: 12px;

  /* cosmic shadow around card */
  box-shadow: 
    0 8px 20px rgba(0, 80, 180, 0.25),   /* royal blue shadow */
    0 12px 28px rgba(2, 64, 20, 0.372),  /* green shadow */
    0 16px 36px rgba(100, 0, 160, 0.2);  /* violet shadow */
}

[data-theme="light"] .blogsidebar__content__wraper__2 {
  background: rgba(194, 190, 190, 0.3); /* semi-transparent black */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3),   /* subtle cyan bottom glow */
              0 5px 25px rgba(0, 0, 255, 0.2),     /* subtle blue bottom glow */
              0 5px 35px rgba(128, 0, 255, 0.15);  /* subtle violet bottom glow */
}

[data-theme="dark"] .blogsidebar__content__wraper__2 {
  background: rgba(6, 6, 125, 0.3); /* dark glass */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(4, 91, 33, 0.317);
  border-radius: 12px;

  /* cosmic shadow around card */
  box-shadow: 
    0 8px 20px rgba(0, 80, 180, 0.25),   /* royal blue shadow */
    0 12px 28px rgba(2, 64, 20, 0.372),  /* green shadow */
    0 16px 36px rgba(100, 0, 160, 0.2);  /* violet shadow */
}

/* ================== download area ====================== */

[data-theme='dark'] .download-area .content h3,a{
  color: whitesmoke;
}

[data-theme='light'] .download-area .content h3,a{
  color: rgb(4, 190, 227);
}


/* =============== get in touch ============== */
/* Light theme placeholder */
[data-theme="light"] .get__touch__input input::placeholder {
    color: #555; /* dark gray for light background */
    opacity: 1; /* ensures color is fully visible */
}

/* Dark theme placeholder */
[data-theme="dark"] .get__touch__input input::placeholder {
    color: #aaa; /* light gray for dark background */
    opacity: 1;
}

/* Optional: add transition for smooth color change */
.get__touch__input input::placeholder {
    transition: color 0.3s ease;
}



/* ------------ footer ---------------- */
/* Footer Neon Glass Background for Light Theme */
[data-theme="light"] .footer-section {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(0, 255, 255, 0.12),
    rgba(0, 123, 255, 0.12),
    rgba(138, 43, 226, 0.12)
  ); /* subtle neon gradient */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, #00ffff, #007bff, #8a2be2) 1;
  box-shadow: 0 -5px 25px rgba(0, 255, 255, 0.25),
              0 -5px 35px rgba(0, 0, 255, 0.2),
              0 -5px 45px rgba(138, 43, 226, 0.15);
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  background-size: 300% 300%;
  animation: neon-gradient 12s ease infinite;
}

/* Animated Gradient Shimmer for Background */
@keyframes neon-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Footer Headings Neon Gradient + Glow */
[data-theme="light"] .footer-section .widget-title {
  background: linear-gradient(90deg, #05079b, #007bff, #8a2be2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  letter-spacing: 1px;
  /* text-shadow:
    0 0 2px #00ffff,
    0 0 4px #00ffff,
    0 0 6px #007bff,
    0 0 8px #8a2be2; */
}

/* Footer Text Normal Black */
[data-theme="light"] .footer-section,
[data-theme="light"] .footer-section p,
[data-theme="light"] .footer-section li,
[data-theme="light"] .footer-section a,
[data-theme="light"] .footer-section .footer-widget ul li a {
  color: #111; /* normal black text for readability */
  text-shadow: none; /* remove glow from normal text */
  transition: all 0.3s ease;
  font-weight: 400;
}

/* Footer Links Hover */
[data-theme="light"] .footer-section .footer-list li a:hover,
[data-theme="light"] .footer-section .address-list li a:hover,
[data-theme="light"] .footer-section .copyright-list li a:hover {
  color: #007bff; 
  text-shadow: none;
}

/* Neon Hover Gradient Underline for Links */
/*  */

[data-theme="light"] .footer-section .footer-list li a:hover::after,
[data-theme="light"] .footer-section .address-list li a:hover::after,
[data-theme="light"] .footer-section .copyright-list li a:hover::after {
  width: 100%;
}

/* Social Icons */
[data-theme="light"] .footer-section .social-list li a {
  color: #ffffff; /* normal color for social icons */
  font-size: 18px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(224, 215, 215, 0.824);
  transition: all 0.4s ease;
}

/* Neon Glow on Social Icons Hover */
[data-theme="light"] .footer-section .social-list li a:hover {
  border-color: #00ffff;
  color: #00ffff;
  box-shadow: 0 0 10px #00ffff,
              0 0 20px #007bff,
              0 0 30px #8a2be2;
  transform: translateY(-4px) scale(1.1);
}

[data-theme="light"] .copyright-area .copyright-list li a{
  color: #000;



}


[data-theme="light"] .footer-section .footer-list li a:hover,
[data-theme="light"] .footer-section .address-list li a:hover,
[data-theme="light"] .footer-section .copyright-list li a:hover {
  color: #007bff; 
  text-shadow: 0 0 4px rgba(0,123,255,0.6), 
               0 0 8px rgba(0,255,255,0.5), 
               0 0 12px rgba(138,43,226,0.4);
}


/* =========================== Animated Gradient Shimmer for Dark Footer Background ================== */
/* Footer Neon Glass Background for Dark Theme */
[data-theme="dark"] .footer-section {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(0, 20, 60, 0.4),
    rgba(0, 40, 100, 0.3),
    rgba(50, 0, 80, 0.25)
  ); /* subtle dark neon gradient */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, #00ffe0, #007bff, #8a00ff) 1;
  box-shadow: 0 -5px 25px rgba(0, 255, 224, 0.25),
              0 -5px 35px rgba(0, 80, 255, 0.2),
              0 -5px 45px rgba(138, 0, 255, 0.15);
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  background-size: 300% 300%;
  animation: neon-gradient-dark 12s ease infinite;
}


@keyframes neon-gradient-dark {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Footer Headings Neon Gradient + Glow */
[data-theme="dark"] .footer-section .widget-title {
  background: linear-gradient(90deg, #00ffe0, #007bff, #8a00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  letter-spacing: 1px;
  /* text-shadow:
    0 0 2px #00ffe0,
    0 0 4px #00ffe0,
    0 0 6px #007bff,
    0 0 8px #8a00ff; */
}

/* Footer Text Normal Light */
[data-theme="dark"] .footer-section,
[data-theme="dark"] .footer-section p,
[data-theme="dark"] .footer-section li,
[data-theme="dark"] .footer-section a,
[data-theme="dark"] .footer-section .footer-widget ul li a {
  color: #e0e0e0; /* light text for readability */
  text-shadow: none; 
  transition: all 0.3s ease;
  font-weight: 400;
}

/* Footer Links Hover */
[data-theme="dark"] .footer-section .footer-list li a:hover,
[data-theme="dark"] .footer-section .address-list li a:hover,
[data-theme="dark"] .footer-section .copyright-list li a:hover {
  color: #00ffe0; 
  text-shadow: 0 0 6px #00ffe0, 0 0 12px #007bff, 0 0 18px #8a00ff;
}

/* Neon Hover Gradient Underline for Links */

[data-theme="dark"] .footer-section .footer-list li a:hover::after,
[data-theme="dark"] .footer-section .address-list li a:hover::after,
[data-theme="dark"] .footer-section .copyright-list li a:hover::after {
  width: 100%;
}

/* Social Icons */
[data-theme="dark"] .footer-section .social-list li a {
  color: #ffffff; /* base color for social icons */
  font-size: 18px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(0, 255, 224, 0.5);
  transition: all 0.4s ease;
}

/* Neon Glow on Social Icons Hover */
[data-theme="dark"] .footer-section .social-list li a:hover {
  border-color: #00ffe0;
  color: #00ffe0;
  box-shadow: 0 0 10px #00ffe0,
              0 0 20px #007bff,
              0 0 30px #8a00ff;
  transform: translateY(-4px) scale(1.1);
}

/* Light theme: show light logo, hide dark logo */
[data-theme="light"] .footer-logo .logo-light {
    display: inline-block;
}
[data-theme="light"] .footer-logo .logo-dark {
    display: none;
}

/* Dark theme: show dark logo, hide light logo */
[data-theme="dark"] .footer-logo .logo-light {
    display: none;
}
[data-theme="dark"] .footer-logo .logo-dark {
    display: inline-block;
}

.footer-logo{
  margin-left: 60px;
}


/* ====================== side video button =========================== */

/* Dark Cosmic Button Base */
[data-theme="dark"] .default__button {
  position: relative;
  display: inline-block;
  padding: 12px 28px;
  color: #f0fffd;
  background-color: rgba(7, 7, 58, 0.6); /* dark cosmic base like hero */
  border: 1px solid #00ffe0;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  overflow: hidden;
  transition: all 0.4s ease;
  box-shadow: 0 0 8px #00ffe0, 0 0 12px #6a00ff, 0 0 18px #4b0082; /* subtle dark neon glow */
}

/* Hover Effect - Dark Cosmic Gradient */
[data-theme="dark"] .default__button:hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(0,255,224,0.4), rgba(50,0,80,0.6), rgba(106,0,255,0.5)); /* dark cosmic gradient */
  box-shadow: 
    0 0 12px rgba(0,255,224,0.6), 
    0 0 20px rgba(50,0,80,0.5), 
    0 0 28px rgba(106,0,255,0.5);
  transform: translateY(-2px) scale(1.05);
}

/* Animated Shine Effect */
[data-theme="dark"] .default__button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(120deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.0) 60%);
  transform: rotate(45deg) translateX(-100%);
  transition: all 0.5s ease;
  pointer-events: none;
}

[data-theme="dark"] .default__button:hover::before {
  transform: rotate(45deg) translateX(100%);
}



/* ==================== button - light ============== */

/* Light Cosmic Button Base */
[data-theme="light"] .default__button {
  position: relative;
  display: inline-block;
  padding: 12px 28px;
  color: #007bff; /* main text color */
  background-color: rgba(255, 255, 255, 0.3); /* light glass base */
  border: 1px solid #007bff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  overflow: hidden;
  transition: all 0.4s ease;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.304), 
              0 0 12px rgba(137, 43, 226, 0.276), 
              0 0 18px rgba(0, 200, 255, 0.253); /* subtle neon glow */
}

/* Hover Effect - Light Cosmic Gradient */
[data-theme="light"] .default__button:hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(0,123,255,0.4), rgba(138,43,226,0.5), rgba(0,200,255,0.4)); /* subtle cosmic gradient */
  box-shadow: 
    0 0 12px rgba(0,123,255,0.5), 
    0 0 20px rgba(138,43,226,0.4), 
    0 0 28px rgba(0,200,255,0.3);
  transform: translateY(-2px) scale(1.05);
}

/* Animated Shine Effect */
[data-theme="light"] .default__button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(120deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 60%);
  transform: rotate(45deg) translateX(-100%);
  transition: all 0.5s ease;
  pointer-events: none;
}

[data-theme="light"] .default__button:hover::before {
  transform: rotate(45deg) translateX(100%);
}


/* ======================= follow us ====================== */

[data-theme="light"] .follow__icon ul li a, .download-item i {
  position: relative;
  align-items: center;
  display: inline-block;
  padding: 1px 5px;
  color: #007bff; /* main text color */
  background-color: rgba(255, 255, 255, 0.3); /* light glass base */
  border: 1px solid #007bff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  overflow: hidden;
  transition: all 0.4s ease;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.304), 
              0 0 12px rgba(137, 43, 226, 0.276), 
              0 0 18px rgba(0, 200, 255, 0.253); /* subtle neon glow */
}

/* Hover Effect - Light Cosmic Gradient */
[data-theme="light"] .follow__icon ul li a:hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(0,123,255,0.4), rgba(138,43,226,0.5), rgba(0,200,255,0.4)); /* subtle cosmic gradient */
  box-shadow: 
    0 0 12px rgba(0,123,255,0.5), 
    0 0 20px rgba(138,43,226,0.4), 
    0 0 28px rgba(0,200,255,0.3);
  transform: translateY(-2px) scale(1.05);
}

/* Animated Shine Effect */
[data-theme="light"] .follow__icon ul li a::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(120deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 60%);
  transform: rotate(45deg) translateX(-100%);
  transition: all 0.5s ease;
  pointer-events: none;
}

[data-theme="light"] .default__button:hover::before {
  transform: rotate(45deg) translateX(100%);
}

/* ==========dark for follow us button =============== */

[data-theme="dark"] .follow__icon ul li a, .download-item i {
 position: relative;
  display: inline-block;
  padding: 1px 5px;
  color: #f0fffd;
  background-color: rgba(7, 7, 58, 0.6); /* dark cosmic base like hero */
  border: 1px solid #00ffe0;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  overflow: hidden;
  transition: all 0.4s ease;
  box-shadow: 0 0 5px #00ffe0, 0 0 7px #6a00ff, 0 0 9px #4b0082; /* subtle dark neon glow */
}

/* Hover Effect - Light Cosmic Gradient */
[data-theme="dark"] .follow__icon ul li a:hover {
  color: #fff;
  background: linear-gradient(135deg, rgba(0,255,224,0.4), rgba(50,0,80,0.6), rgba(106,0,255,0.5)); /* dark cosmic gradient */
  box-shadow: 
    0 0 12px rgba(0,255,224,0.6), 
    0 0 20px rgba(50,0,80,0.5), 
    0 0 28px rgba(106,0,255,0.5);
  transform: translateY(-2px) scale(1.05);
}

/* Animated Shine Effect */
[data-theme="dark"] .follow__icon ul li a::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(120deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.0) 60%);
  transform: rotate(45deg) translateX(-100%);
  transition: all 0.5s ease;
  pointer-events: none;
}

[data-theme="light"] .default__button:hover::before {
  transform: rotate(45deg) translateX(100%);
}

/* ======================= */

[data-theme='light'] .course__details__price ul li .course__details__date{
  color:#000;
}



/* ======================== contact page  ============================= */

[data-theme='dark'] .blog-contact-form{

    background: rgba(6, 6, 125, 0.3); /* dark glass */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(4, 91, 33, 0.317);
  border-radius: 12px;

  /* cosmic shadow around card */
  box-shadow: 
    0 8px 20px rgba(0, 80, 180, 0.25),   /* royal blue shadow */
    0 12px 28px rgba(2, 64, 20, 0.372),  /* green shadow */
    0 16px 36px rgba(100, 0, 160, 0.2);  /* violet shadow */

}

[data-theme='light'] .blog-contact-form{

  background: rgba(194, 190, 190, 0.3); /* semi-transparent black */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3),   /* subtle cyan bottom glow */
              0 5px 25px rgba(0, 0, 255, 0.2),     /* subtle blue bottom glow */
              0 5px 35px rgba(128, 0, 255, 0.15);  /* subtle violet bottom glow */

}


[data-theme='dark'] .contact-content{
    background: rgba(6, 6, 125, 0.3); /* dark glass */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(4, 91, 33, 0.317);
  border-radius: 12px;

  /* cosmic shadow around card */
  box-shadow: 
    0 8px 20px rgba(0, 80, 180, 0.25),   /* royal blue shadow */
    0 12px 28px rgba(2, 64, 20, 0.372),  /* green shadow */
    0 16px 36px rgba(100, 0, 160, 0.2);  /* violet shadow */

}


[data-theme='light'] .contact-content{
  background: rgba(194, 190, 190, 0.3); /* semi-transparent black */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3),   /* subtle cyan bottom glow */
              0 5px 25px rgba(0, 0, 255, 0.2),     /* subtle blue bottom glow */
              0 5px 35px rgba(128, 0, 255, 0.15);  /* subtle violet bottom glow */

}



/* ====================== courses page ============================ */

[data-theme='dark'] .gridarea__wraper{
    background: rgba(6, 6, 125, 0.3); /* dark glass */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(4, 91, 33, 0.317);
  border-radius: 12px;

  /* cosmic shadow around card */
  box-shadow: 
    0 8px 20px rgba(0, 80, 180, 0.25),   /* royal blue shadow */
    0 12px 28px rgba(2, 64, 20, 0.372),  /* green shadow */
    0 16px 36px rgba(100, 0, 160, 0.2);  /* violet shadow */

}

[data-theme='light'] .gridarea__wraper{
  background: rgba(194, 190, 190, 0.3); /* semi-transparent black */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3),   /* subtle cyan bottom glow */
              0 5px 25px rgba(0, 0, 255, 0.2),     /* subtle blue bottom glow */
              0 5px 35px rgba(128, 0, 255, 0.15);  /* subtle violet bottom glow */

}


[data-theme='light'] .gridarea__wraper .gridarea__list ul li i{
  color:blue;
}

[data-theme='light'] .gridarea__wraper .gridarea__list ul li {
  color: #02050A;
}

[data-theme='light'] .gridarea__wraper .gridarea__content .gridarea__heading h3 a {
  color: #02050A;
}

/* ======================== home page ============================= */

[data-theme='light'] .running-text li span{
  font-size: 90px; /* ✅ bigger text */
  font-weight: 900;
  text-transform: uppercase;

color: transparent; /* no fill */
-webkit-text-stroke: 2px #4c00ff; /* purple stroke */
text-stroke: 2px #4c00ff; /* fallback */

text-shadow: 
  0 0 4px rgba(0, 102, 255, 0.5),   /* soft blue glow */
  0 0 10px rgba(0, 102, 255, 0.35), /* stronger blue glow */
  3px 3px 6px rgba(0, 0, 0, 0.4),   /* main drop shadow */
  6px 6px 14px rgba(0, 0, 0, 0.3);  /* extra depth shadow */


}

[data-theme='dark'] .running-text li span{
  font-size: 90px; /* ✅ bigger text */
  font-weight: 900;
  text-transform: uppercase;

  color: transparent;
  -webkit-text-stroke: 1px #00ffff;
  text-stroke: 1px #00ffff;

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

.marquee-list li img {
  height: 80px; /* ✅ adjust image size */
  width: auto;
  
}

.running-text{
  margin-top: -90px;
}

.banner .slider .item {
  
  background: #fff; /* your card background */

}

/* Gradient shadow */
.banner .slider .item::before {
  content: "";
  position: absolute;
  inset: -20px; /* extend beyond card */
  border-radius: inherit;
  background: 
    radial-gradient(circle at 30% 50%, rgba(0,255,200,0.5), transparent 60%),
    radial-gradient(circle at 70% 40%, rgba(14, 148, 243, 0.5), transparent 60%),
    radial-gradient(circle at 50% 80%, rgba(200, 0, 255, 0.44), transparent 70%);
  filter: blur(30px); /* soften like a shadow */
  z-index: -1; /* behind the card */
}


[data-theme='dark'] .about-wrap-8 {
    background: rgba(6, 6, 125, 0.3); /* dark glass */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(4, 91, 33, 0.317);
  border-radius: 12px;

  /* cosmic shadow around card */
  box-shadow: 
    0 8px 20px rgba(0, 80, 180, 0.25),   /* royal blue shadow */
    0 12px 28px rgba(2, 64, 20, 0.372),  /* green shadow */
    0 16px 36px rgba(100, 0, 160, 0.2);  /* violet shadow */

}

[data-theme='light'] .about-wrap-8 {
background: 
  radial-gradient(circle at 20% 30%, rgba(255, 182, 193, 0.2), transparent 60%),  /* soft pink */
  radial-gradient(circle at 80% 20%, rgba(173, 216, 230, 0.2), transparent 60%),  /* soft blue */
  radial-gradient(circle at 30% 80%, rgba(144, 238, 144, 0.2), transparent 70%),  /* soft green */
  radial-gradient(circle at 70% 70%, rgba(216, 191, 216, 0.2), transparent 70%);  /* soft violet */
background-color: rgba(194, 190, 190, 0.3); /* semi-transparent base */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
box-shadow: 
  0 5px 15px rgba(0, 255, 255, 0.15),  /* subtle cyan glow */
  0 5px 25px rgba(0, 0, 255, 0.1),     /* subtle blue glow */
  0 5px 35px rgba(128, 0, 255, 0.08);  /* subtle violet glow */
 will-change: transform; /* smoother scrolling */
  transition: all 0.3s ease; /* optional hover/interaction */


}

[data-theme='light'] .about-wrap-8 .about-content-8 .section-heading h2 {
  color: #022551;
  
}


[data-theme='light'] .ls-curved-carousel__slide {
  background: rgba(194, 190, 190, 0.3); /* semi-transparent black */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3),   /* subtle cyan bottom glow */
              0 5px 25px rgba(0, 0, 255, 0.2),     /* subtle blue bottom glow */
              0 5px 35px rgba(128, 0, 255, 0.15);  /* subtle violet bottom glow */
  
}


[data-theme='light'] .ls-curved-carousel__slide {
  background: rgba(194, 190, 190, 0.3); /* semi-transparent black */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  box-shadow: 0 5px 25px rgba(0, 255, 255, 0.3),   /* subtle cyan bottom glow */
              0 5px 35px rgba(0, 0, 255, 0.2),     /* subtle blue bottom glow */
              0 5px 45px rgba(128, 0, 255, 0.15);  /* subtle violet bottom glow */
  
}


[data-theme='light'] .pricing-box .pricing-item {
  background: rgba(194, 190, 190, 0.3); /* semi-transparent black */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3),   /* subtle cyan bottom glow */
              0 5px 25px rgba(0, 0, 255, 0.2),     /* subtle blue bottom glow */
              0 5px 35px rgba(128, 0, 255, 0.15);  /* subtle violet bottom glow */
  
}

[data-theme='dark'] .pricing-box .pricing-item {
    background: rgba(6, 6, 125, 0.3); /* dark glass */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(4, 91, 33, 0.317);
  border-radius: 12px;

  /* cosmic shadow around card */
  box-shadow: 
    0 8px 20px rgba(0, 80, 180, 0.25),   /* royal blue shadow */
    0 12px 28px rgba(2, 64, 20, 0.372),  /* green shadow */
    0 16px 36px rgba(100, 0, 160, 0.2);  /* violet shadow */
  
}

.pricing-box .pricing-item .pricing-btn-wrap .default__button{
width: 100%;
justify-content: center;
text-align: center;

}

[data-theme='light'] .request-section .req-wrap {
  background: rgba(194, 190, 190, 0.3); /* semi-transparent black */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3),   /* subtle cyan bottom glow */
              0 5px 25px rgba(0, 0, 255, 0.2),     /* subtle blue bottom glow */
              0 5px 35px rgba(128, 0, 255, 0.15);  /* subtle violet bottom glow */
  
}

[data-theme='dark'] .request-section .req-wrap {
    background: rgba(6, 6, 125, 0.3); /* dark glass */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(4, 91, 33, 0.317);
  border-radius: 12px;

  /* cosmic shadow around card */
  box-shadow: 
    0 8px 20px rgba(0, 80, 180, 0.25),   /* royal blue shadow */
    0 12px 28px rgba(2, 64, 20, 0.372),  /* green shadow */
    0 16px 36px rgba(100, 0, 160, 0.2);  /* violet shadow */
  
}


.team-section-7{
  margin-top: -70px;
  
}


/* ================= about page ========================== */

[data-theme='dark'] .process-section-2 .process-box{
      background: rgba(6, 6, 125, 0.3); /* dark glass */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(4, 91, 33, 0.317);
  border-radius: 12px;

  /* cosmic shadow around card */
  box-shadow: 
    0 8px 20px rgba(0, 80, 180, 0.25),   /* royal blue shadow */
    0 12px 28px rgba(2, 64, 20, 0.372),  /* green shadow */
    0 16px 36px rgba(100, 0, 160, 0.2);  /* violet shadow */

}



[data-theme='light'] .process-section-2 .process-box {
  background: rgba(194, 190, 190, 0.3); /* semi-transparent black */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3),   /* subtle cyan bottom glow */
              0 5px 25px rgba(0, 0, 255, 0.2),     /* subtle blue bottom glow */
              0 5px 35px rgba(128, 0, 255, 0.15);  /* subtle violet bottom glow */
  
}

[data-theme='dark'] .faq-section .accordion-item{
      background: rgba(6, 6, 125, 0.3); /* dark glass */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(4, 91, 33, 0.317);
  border-radius: 12px;

  /* cosmic shadow around card */
  box-shadow: 
    0 8px 20px rgba(0, 80, 180, 0.25),   /* royal blue shadow */
    0 12px 28px rgba(2, 64, 20, 0.372),  /* green shadow */
    0 16px 36px rgba(100, 0, 160, 0.2);  /* violet shadow */

}



[data-theme='light'] .faq-section .accordion-item {
  background: rgba(194, 190, 190, 0.3); /* semi-transparent black */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3),   /* subtle cyan bottom glow */
              0 5px 25px rgba(0, 0, 255, 0.2),     /* subtle blue bottom glow */
              0 5px 35px rgba(128, 0, 255, 0.15);  /* subtle violet bottom glow */
  
}





/* --------------------------- certificate verification -------------------------------- */


/* Container Styling */
.verify-container {
    background-color: #ffffff;
    width: 100%;
    max-width: 450px;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.verify-header h2 {
    text-align: center;
    color: #333;
    margin-bottom: 10px;
}

.verify-header p {
    text-align: center;
    color: #666;
    font-size: 14px;
    margin-bottom: 25px;
}

/* Input Fields */
.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    color: #333;
    font-weight: 500;
}

.input-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box; /* Ensures padding doesn't break width */
    transition: border-color 0.3s;
}

.input-group input:focus {
    border-color: #007bff;
    outline: none;
}

/* Button */
#checkBtn {
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 10px;
}

#checkBtn:hover {
    background-color: #0056b3;
}

#checkBtn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* Result Area Styling */
#result-area {
    margin-top: 25px;
    display: none; /* Hidden by default */
}

/* Success State */
.cert-valid {
    border: 1px solid #c3e6cb;
    background-color: #d4edda;
    color: #155724;
    padding: 20px;
    border-radius: 5px;
}

.cert-valid h3 {
    margin-top: 0;
    text-align: center;
    border-bottom: 1px solid #c3e6cb;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* Error State */
.cert-invalid {
    border: 1px solid #f5c6cb;
    background-color: #f8d7da;
    color: #721c24;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
}

/* Data Rows */
.cert-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 15px;
}

.cert-label {
    font-weight: bold;
}


/* ==== res ==== cer=== */

/* 1. Global Reset & Sizing */
* {
    box-sizing: border-box; /* Ensures padding doesn't break widths */
}



/* 2. Wrapper to handle mobile spacing */
.verify-wrapper {
    width: 100%;
    padding: 20px; /* Adds safe space on sides for mobile */
    display: flex;
    justify-content: center;
}

/* 3. Main Container */
.verify-container {
    background-color: #ffffff;
    width: 100%;
    max-width: 450px; /* Standard width on desktop */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.verify-header h2 {
    text-align: center;
    color: #333;
    margin-bottom: 10px;
    margin-top: 0;
}

.verify-header p {
    text-align: center;
    color: #666;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 25px;
}

/* 4. Input Fields */
.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 500;
}

.input-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px; /* 16px prevents iOS from zooming in when typing */
    transition: border-color 0.3s;
}

.input-group input:focus {
    border-color: #007bff;
    outline: none;
}

/* 5. Button */
#checkBtn {
    width: 100%;
    padding: 14px; /* Slightly larger touch target for mobile */
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 10px;
}

#checkBtn:hover {
    background-color: #0056b3;
}

#checkBtn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* 6. Result Area */
#result-area {
    margin-top: 25px;
    display: none;
}

.cert-valid {
    border: 1px solid #c3e6cb;
    background-color: #d4edda;
    color: #155724;
    padding: 20px;
    border-radius: 5px;
}

.cert-valid h3 {
    margin-top: 0;
    text-align: center;
    border-bottom: 1px solid #c3e6cb;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.cert-invalid {
    border: 1px solid #f5c6cb;
    background-color: #f8d7da;
    color: #721c24;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
}

/* Data Rows */
.cert-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 15px;
    border-bottom: 1px solid rgba(0,0,0,0.05); /* Light divider */
    padding-bottom: 5px;
}

.cert-row:last-child {
    border-bottom: none;
}

.cert-label {
    font-weight: bold;
    min-width: 80px; /* Ensures labels align nicely */
}

/* ----------------------------------------------------
   MOBILE RESPONSIVENESS (Media Query)
   ---------------------------------------------------- */
@media screen and (max-width: 480px) {
    .verify-container {
        padding: 20px; /* Reduce padding on small screens */
    }

    .verify-header h2 {
        font-size: 22px; /* Slightly smaller title */
    }

    /* Stack the certificate details vertically on mobile 
       so long names don't get squashed */
    .cert-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    
    .cert-label {
        color: #666;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
}












/* =============================== login page =========================== */

.login-container {
    background-color: #16213e;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    width: 320px;
    text-align: center;
    border: 1px solid #0f3460;
}

/* h2 {
    margin-bottom: 20px;
    color: #e94560; 
    letter-spacing: 1px;
} */

input[type="text"], input[type="password"] {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    background-color: #0f3460;
    border: 1px solid #1a1a2e;
    color: white;
    border-radius: 5px;
    box-sizing: border-box;
    outline: none;
}

input:focus {
    border-color: #e94560;
}

button {
    
    padding: 12px;
    /* background-color: #a9e5f9; */
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 10px;
}



.error-msg {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 0.9em;
    display: none; /* Hidden by default */
}

/* Show error if the PHP adds the class 'show' */
.error-msg.show {
    display: block;
}




/* ========================================
   INVOICE SYSTEM STYLES
   ======================================== */

/* --- Form Card Styling --- */
.invoice-form-card {
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.invoice-form-card label {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 5px;
    display: block;
}

.invoice-form-card .form-control {
    border: 1px solid #ddd;
    padding: 8px 12px;
    border-radius: 5px;
    color: #333;
    background-color: #fff;
}

/* --- Invoice Paper Preview --- */
.invoice-paper {
    background: #ffffff;
    width: 100%;
    min-height: 800px; /* A4 height approx */
    padding: 40px;
    position: relative;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    color: #333;
    font-family: 'Arial', sans-serif;
}

/* Force dark text inside invoice for readability */
.invoice-paper h1, .invoice-paper h2, .invoice-paper h3, 
.invoice-paper h4, .invoice-paper h5, .invoice-paper h6, 
.invoice-paper p, .invoice-paper span, .invoice-paper td, .invoice-paper th {
    color: #000 !important;
}
.invoice-paper .text-muted { color: #666 !important; }
.invoice-paper .text-primary { color: #000 !important; }
.invoice-paper .text-success { color: #000 !important; }
.invoice-paper .text-danger { color: #000 !important; }

/* --- CRITICAL PRINT SETTINGS --- */
@media print {
    /* 1. Reset Page */
    @page { margin: 0; size: auto; }

    /* 2. Hide Everything by default */
    body * {
        visibility: hidden;
    }

    /* 3. SHOW ONLY THE INVOICE (ID MATCHES HTML) */
    #invoicePreview, #invoicePreview * {
        visibility: visible !important;
    }

    /* 4. Position it at top-left */
    #invoicePreview {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 40px;
        background-color: white !important;
        z-index: 99999; 
    }

    /* 5. Force Bootstrap Layout for Print */
    .row { display: flex !important; flex-wrap: nowrap !important; }
    .col-6 { width: 50% !important; flex: 0 0 50% !important; max-width: 50% !important; }
    .text-end { text-align: right !important; }
}




/* ================================== login system ========================= */


        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

        .login-body {
            font-family: 'Inter', sans-serif;
            background-color: #f3f4f6;
            background-image: 
                radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), 
                radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), 
                radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
            background-size: cover;
            background-attachment: fixed;
            min-height: 100vh;
        }

        /* Glassmorphism Effect */
        .glass-panel {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }

        /* Animations */
        .fade-in {
            animation: fadeIn 0.4s ease-out forwards;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .shake {
            animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
        }

        @keyframes shake {
            10%, 90% { transform: translate3d(-1px, 0, 0); }
            20%, 80% { transform: translate3d(2px, 0, 0); }
            30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
            40%, 60% { transform: translate3d(4px, 0, 0); }
        }

        /* Custom Input Styling to match previous look with Bootstrap */
        .form-control:focus {
            box-shadow: 0 0 0 0.25rem rgba(79, 70, 229, 0.25); /* Indigo focus ring */
            border-color: #4f46e5;
        }
        
        .input-icon {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 1rem;
            color: #9ca3af;
            z-index: 5;
            pointer-events: none;
        }

        .toggle-password {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 1rem;
            border: none;
            background: none;
            color: #9ca3af;
            cursor: pointer;
            z-index: 5;
        }

        .toggle-password:hover {
            color: #4b5563;
        }

        /* Toast Animation Helper */
        .toast-container-custom {
            transition: transform 0.3s ease-in-out;
            transform: translateX(120%); /* Start hidden off-screen */
        }
        .toast-visible {
            transform: translateX(0);
        }






        /* ======================= whatsapp button ================ */

        /* WhatsApp Button Styling */
.whatsapp-float {
    position: fixed; /* This makes it float */
    bottom: 40px;    /* Distance from bottom */
    right: 40px;     /* Distance from right */
    width: 60px;
    height: 60px;
    background-color: #25d366; /* WhatsApp Green */
    color: #FFF;
    border-radius: 50%; /* Makes it circular */
    text-align: center;
    font-size: 30px; /* Icon size */
    box-shadow: 2px 2px 3px #999; /* Subtle shadow */
    z-index: 1000; /* Ensures it stays on top of everything else */
    
    /* Flexbox to center the icon perfectly */
    display: flex;
    align-items: center;
    justify-content: center;
    
    text-decoration: none; /* Removes underline */
    transition: all 0.3s ease; /* Smooth animation */
}

/* Hover Effect */
.whatsapp-float:hover {
    background-color: #128C7E; /* Darker green on hover */
    transform: scale(1.1); /* Slight zoom when you touch it */
}

/* Responsive Design for Mobile */
@media screen and (max-width: 600px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        font-size: 22px;
    }
}