*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth !important;
}

.header{
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(18, 18,18 ,0.7), rgba(18, 18, 18,0.7)),url(images/home\ page\ PC.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
}
.header4{
  min-height: 100vh;
  width: 100%;
  background-image: linear-gradient(rgba(18, 18,18 ,0.7), rgba(18, 18, 18,0.7)),url(images/888.jpg);
  background-position: center;
  background-size: cover;
  position: relative;

}
nav{
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;

}
nav img{
    width: 125px;
    margin-left: -75px;
}
.nav-links{
    flex: 1;
    text-align: right;
    position: fixed;
    top: 0;
    right: 0; 
    background-color: rgba(13, 13, 13, 0.7); 
    border-radius: 10px;
    padding: 10px 20px; 
    z-index: 1001; 
    margin-top: 70px;
    margin-right: 30px;

}
.nav-links ul li{
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}
.nav-links ul li a{
    color: #fff;
    text-decoration: none;
    font-size: 13px;
}
.nav-links ul li::after{
    content: '';
    width: 0%;
    height: 2px;
    background: #8900f2;
    display: block;
    margin: auto;
    transition: 0.5s;
    
}
.nav-links ul li:hover::after{
    width: 100%;
}
.text-box{
    width: 90%;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.text-box h1{
    font-size: 62px;
}
.text-box p{
    margin: 10px 0 40px;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
}
/*.hero-btn{
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    padding: 12px 34px;
    font-size: 13px;
    background: transparent;
    position: relative;
    cursor: pointer;
}
.hero-btn:hover{
    border: 1px solid #f44336;
    background: #f44336;
    transition: 1s;
}*/

nav .fa{
    display: none;
}



.clr{
    background-color: #0D0D0D;
}
.clr p{
    color: #fff;
    font-weight: 600;
}
.clr h1{
    color: #fff;
}
.clr h2{
    color: #fff;
}
.clr h3{
    color: #fff;
}
.clr h4{
    color: #fff;
}
.clr h5{
    color: #fff;
}
.clr h6{
    color: #fff;
}

/*------ services ------*/

.course{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 100px;
    background-color: #343a40;
}
h1{
    font-size: 36px;
    font-weight: 600;
}
p{
    color: #777;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    padding: 10px;
}
.row{
    margin-top: 5%;
    display: flex;
    justify-content: space-between;
}
.course-col{
    flex-basis: 31%;
    background: #fff3f3;
    border-radius: 10px;
    margin-bottom: 5%;
    padding: 20px 12px;
    box-sizing: border-box;
    transition: 0.5s;
}
h3{
    text-align: center;
    font-weight: 600;
    margin: 10px 0;
}
.course-col:hover{
    box-shadow: 0 0 20px 0px rgba(137, 0, 242, 1);
}

@media(max-width: 700px){
    .row{
        flex-direction: column;
    }
}

/*-------About Us------*/

.campus{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 50px;
}
.campus-col{
    flex-basis: 32%;
    border-radius: 10px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}
.campus-col img{
    width: 100%;
    display: block;
}
.layer{
    background-color: transparent;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.layer:hover{
    background-color: rgba(137, 0, 242,0.5);
    transition: 0.5s;
}
.layer h3{
    width: 100%;
    font-weight: 500;
    color: #fff;
    font-size: 26px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    opacity: 0;
    transition: 0.5s;
}
.layer:hover h3{
    bottom: 49%;
    opacity: 1;
}

/*------ facilities ------*/

.facilities{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 100px;
}

.facilities-col{
        flex-basis: 31%;
        background: #343a40;
        border-radius: 10px;
        margin-bottom: 5%;
        padding: 20px 12px;
        box-sizing: border-box;
        transition: 0.5s;
        text-align: left;
}
.facilities-col img{
    width: 100%;
    border-radius: 10px;
    aspect-ratio: 3/2;
}
.facilities-col p{
    padding: 0;
}
.facilities-col h3{
    margin-top: 16px;
    margin-bottom: 15px;
    text-align: left;
}
.facilities-col:hover{
    box-shadow: 0 0 20px 0px rgba(137, 0, 242, 1);
    /*background-color: rgba(137, 0, 242,0.3);*/
    transition: 0.5s;
    border-color: #8900f2;
}
.facilities:hover .facilities-button {
    transform: translate(-50%, 50%);
    opacity: 1;
   }
   .facilities-button {
    transform: translate(-50%, 125%);
    width: 60%;
    border-radius: 1rem;
    border: none;
    background-color: #008bf8;
    color: #fff;
    font-size: 1rem;
    padding: .5rem 1rem;
    position: absolute;
    left: 50%;
    bottom: 0;
    opacity: 0;  
    transition: 0.3s ease-out;
   }
/*-----------------------button---------------------------*/
.small-button {
    position: relative;
    margin: auto;
    padding: 12px 18px;
    transition: all 0.2s ease;
    border: none;
    background: none;
   }
   
   .small-button:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 50px;
    background: rgba(137, 0, 242,0.5);;
    width: 45px;
    height: 45px;
    transition: all 0.3s ease;
   }
   
   .small-button span {
    position: relative;
    font-family: "Ubuntu", sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff;
   }
   
   .small-button svg {
    position: relative;
    top: 0;
    margin-left: 10px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: rgba(137, 0, 242,0.4);;
    stroke-width: 2;
    transform: translateX(-5px);
    transition: all 0.3s ease;
   }
   
   .small-button:hover:before {
    width: 100%;
    background: rgba(138, 0, 242,0.4);
   }
   
   .small-button:hover svg {
    transform: translateX(0);
   }
   
   .small-button:active {
    transform: scale(0.95);
   }
/*-------Testimonials------*/

.testimonials{
    width: 80%;
    margin: auto;
    padding-top: 100px;
    text-align: center;
}
.testimonials-col{
    flex-basis: 44%;
    border-radius: 10px;
    margin-bottom: 5%;
    text-align: left;
    background: #fff3f3;
    padding: 25px;
    cursor: pointer;
    display: flex;
}
.testimonials-col img{
    height: 40px;
    margin-left: 5px;
    margin-right: 30px;
    border-radius: 50%;
}
.testimonials-col p{
    padding: 0;
}
.testimonials-col h3{
    margin-top: 15px;
    text-align: left;
}
.testimonials-col .fa{
    color: #f44336;
}
@media(max-width:700px){
    .testimonials-col img{
        margin-left: 0px;
        margin-right: 15px;
    }
    .book{
      margin: auto;
      position: relative;
      display: inline-block;
    }
}


/*-------CALL TO ACTION-----*/

.cta{
    margin: 100px auto;
    width: 80%;
    background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(images/888.jpg);
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    text-align: center;
    padding: 100px 0;
}
.cta h1{
    color: #fff;
    margin-bottom: 40px;
    padding: 0;
}

.shadow__btn {
    padding: 10px 20px;
    border: none;
    font-size: 17px;
    color: #fff;
    border-radius: 7px;
    letter-spacing: 4px;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.5s;
    transition-property: box-shadow;
    text-decoration: none;
  }
  
  .shadow__btn {
    background: rgb(0,140,255);
    box-shadow: 0 0 25px rgb(0,140,255);
  }
  
  .shadow__btn:hover {
    box-shadow: 0 0 5px rgb(0,140,255),
                0 0 25px rgb(0,140,255),
                0 0 50px rgb(0,140,255),
                0 0 100px rgb(0,140,255);
  }
  @media(max-width:700px){
    .cta h1{
        font-size: 24px;
    }
  }
/*----------footer---------*/

.footer{
    width: 100%;
    text-align: center;
    padding: 30px 0;
    align-content: center;
}
.footer h4{
    color: #fff;
    margin-bottom: 25px;
    margin-top: 20px;
    font-weight: 600;
}
.icons .fa{
    color:#fff;
    margin: 0 13px;
    cursor: pointer;
    padding: 18px 0;
}

/*------------ about us page -----------*/

.sub-header{
    height: 50vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)), url(images/WEBpc.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}
.sub-header h1{
    margin-top: 100px;
}
.about-us{
    width: 80%;
    margin: auto;
    padding-top: 80px;
    padding-bottom: 50px;
}
.about-col{
    flex-basis: 48%;
    padding: 30px 2px;
    
}
.about-col img{
  width: 100%;
  border-radius: 16px; /* rounded corners for team images */
  display: block;
  object-fit: cover; /* preserve aspect when rounding */
}
.about-col h1{
    padding-top: 0;
}
.about-col p{
    padding: 15px 0 25px;
    font-size: 20px;
}
.abtimg{
  min-height: 100vh;
  width:100%;
  background-image: linear-gradient(rgba(4,9,30,0.7), rgba(4,9,30,0.7)),url(images/lower.jpg);
  background-position: center;
  background-size: cover;
  position: relative;
}

/* Responsive adjustments for mobile devices */
@media screen and (max-width: 720px) {
  /*CSS codes go here*/

    .about-col{
      font-size: 1.5rem;
    }
    .abtimg{
      display: block;
      max-width: 100%;
    }
}
@media screen and (max-width: 768px) {
  body {
    flex-direction: column;
  }
}














/*button*/
.button {
    --glow-color: rgb(217, 176, 255);
    text-decoration: none;
    --glow-spread-color: rgba(191, 123, 255, 0.781);
    --enhanced-glow-color: rgb(231, 206, 255);
    --btn-color: rgb(100, 61, 136);
    border: .25em solid var(--glow-color);
    padding: 1em 3em;
    color: var(--glow-color);
    font-size: 15px;
    font-weight: bold;
    background-color: var(--btn-color);
    border-radius: 1em;
    outline: none;
    box-shadow: 0 0 1em .25em var(--glow-color),
           0 0 4em 1em var(--glow-spread-color),
           inset 0 0 .75em .25em var(--glow-color);
    text-shadow: 0 0 .5em var(--glow-color);
    position: relative;
    transition: all 0.3s;
   }
   
   .button::after {
    pointer-events: none;
    content: "";
    position: absolute;
    top: 120%;
    left: 0;
    transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
   }
   
   .button:hover {
    color: var(--btn-color);
    background-color: var(--glow-color);
    box-shadow: 0 0 1em .25em var(--glow-color),
           0 0 4em 2em var(--glow-spread-color),
           inset 0 0 .75em .25em var(--glow-color);
   }
   
   .button:active {
    box-shadow: 0 0 0.6em .25em var(--glow-color),
           0 0 2.5em 2em var(--glow-spread-color),
           inset 0 0 .5em .25em var(--glow-color);
   }

/*no glow*/

.s {
  --glow-color: rgb(217, 176, 255);
  text-decoration: none;
  --glow-spread-color: rgba(191, 123, 255, 0.781);
  --enhanced-glow-color: rgb(231, 206, 255);
  --btn-color: rgb(100, 61, 136);
  border: .25em solid var(--glow-color);
  padding: 1em 3em;
  color: var(--glow-color);
  font-size: 15px;
  font-weight: bold;
  background-color: var(--btn-color);
  border-radius: 1em;
  outline: none;
  box-shadow: 0 0 1em .25em var(--glow-color),
         0 0 4em 1em var(--glow-spread-color),
         inset 0 0 .75em .25em var(--glow-color);
  text-shadow: 0 0 .5em var(--glow-color);
  position: relative;
  transition: all 0.3s;
 }

 
 .s:hover {
  color: var(--btn-color);
  background-color: var(--glow-color);
  box-shadow: 0 0 1em .25em var(--glow-color),
         0 0 4em 2em var(--glow-spread-color),
         inset 0 0 .75em .25em var(--glow-color);
 }
 
 .s:active {
  box-shadow: 0 0 0.6em .25em var(--glow-color),
         0 0 2.5em 2em var(--glow-spread-color),
         inset 0 0 .5em .25em var(--glow-color);
 }


.buttonw {
  --glow-color: rgb(217, 176, 255);
  text-decoration: none;
  --glow-spread-color: rgba(191, 123, 255, 0.781);
  --enhanced-glow-color: rgb(231, 206, 255);
  --btn-color: rgb(100, 61, 136);
  border: .25em solid var(--glow-color);
  padding: 1em 3em;
  color: var(--glow-color);
  font-size: 15px;
  font-weight: bold;
  background-color: var(--btn-color);
  border-radius: 1em;
  outline: none;
  box-shadow: 0 0 1em .25em var(--glow-color),
         0 0 4em 1em var(--glow-spread-color),
         inset 0 0 .75em .25em var(--glow-color);
  text-shadow: 0 0 .5em var(--glow-color);
  position: relative;
  transition: all 0.3s;
 }

 
 .buttonw:hover {
  color: var(--btn-color);
  background-color: var(--glow-color);
  box-shadow: 0 0 1em .25em var(--glow-color),
         0 0 4em 2em var(--glow-spread-color),
         inset 0 0 .75em .25em var(--glow-color);
 }
 
 .buttonw:active {
  box-shadow: 0 0 0.6em .25em var(--glow-color),
         0 0 2.5em 2em var(--glow-spread-color),
         inset 0 0 .5em .25em var(--glow-color);
 }

 .buttonw::after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 120%;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--glow-spread-color);
  filter: blur(2em);
  opacity: .7;
  transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
 }

   
/* ---------CARD--------- 

  
  
  
  /*----about page button----*/

  .btn {
    text-decoration: none;
    position: absolute;
    border: none;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    width: 9em;
    height: 3em;
    line-height: 3em;
    text-align: center;
    background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
    background-size: 300%;
    border-radius: 30px;
    z-index: 1;
   }
   
   .btn:hover {
    animation: ani 8s linear infinite;
    border: none;
   }
   
   @keyframes ani {
    0% {
     background-position: 0%;
    }
   
    100% {
     background-position: 400%;
    }
   }
   
   .btn:before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
    background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
    background-size: 400%;
    border-radius: 35px;
    transition: 1s;
   }
   
   .btn:hover::before {
    filter: blur(20px);
   }
   
   .btn:active {
    background: linear-gradient(32deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
   }

   /*----------------Services-----------------*/

   .services{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 100px;
}
h1{
    font-size: 36px;
    font-weight: 600;
}
p{
    color: #777;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    padding: 10px;
}
.row{
    margin-top: 5%;
    display: flex;
    justify-content: space-between;
}
.services-col{
    flex-basis: 31%;
    background: #fff3f3;
    border-radius: 10px;
    margin-bottom: 5%;
    padding: 20px 12px;
    box-sizing: border-box;
    transition: 0.5s;
}
h3{
    text-align: center;
    font-weight: 600;
    margin: 10px 0;
    color:#07182E;
}
.services-col:hover{
    box-shadow: 0 0 20px 0px rgba(137, 0, 242, 1);
}

@media(max-width: 700px){
    .row{
        flex-direction: column;
    }
}
.services2-col{
    flex-basis: 48%;
    background: #fff3f3;
    border-radius: 10px;
    margin-bottom: 5%;
    padding: 20px 12px;
    box-sizing: border-box;
    transition: 0.5s;
}
.services2-col:hover{
    box-shadow: 0 0 20px 0px rgba(137, 0, 242, 1);
}
.row2{
    margin-top: 5%;
    display: flex;
    justify-content: space-between;
    width: 66%;
    margin: auto;
    text-align: center;
    padding-top: 20px;
}

/*---------Contact Page CSS---------*/

.contact-us{
    width: 80%;
    margin: auto;
}
.contact-us h1{
    text-align: center;
    margin-top: 50px;
}
.contact-col{
    flex-basis: 48%;
    margin-bottom: 30px;
}
.contact-col div{
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}
.contact-col div .fa{
    font-size:28px;
    color: #fff;
    margin: 10px;
    margin-right: 30px;
    
}
.contact-col div p{
    font-size: 20px;
    margin-bottom: 5px;
    color: #fff;
    font-weight: 500;
}
.contact-col h5{
    font-size: 20px;
    margin-bottom: 5px;
    color: #fff;
    font-weight: 700;
}
.contact-col input, .contact-col textarea{
    width: 100%;
    padding: 15px;
    margin-bottom: 17px;
    outline: none;
    border: 1px solid #212529;
    text-align: left;
    background-color: #343a40;
    color: #fff;
}
.course-col h4{
    font-weight: 400;
    text-align: center;
    margin-top: 5px;
    padding-top: 5px;
}
.row3{
    margin-top: 5%;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    color: #fff;
}


/*--------------------------sign up page---------------------------*/


.form-box {
    max-width: 300px;
    background: #191818;
    overflow: hidden;
    border-radius: 16px;
    color: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
  }
  
  .form {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 24px 24px;
    gap: 16px;
    text-align: center;
  }
  
  /*Form text*/
  .title {
    font-weight: bold;
    font-size: 1.6rem;
  }
  
  .subtitle {
    font-size: 1rem;
    color: #666;
  }
  
  /*Inputs box*/
  .form-container {
    overflow: hidden;
    border-radius: 8px;
    background-color: #2e2e2e;
    margin: 1rem 0 .5rem;
    width: 100%;
  }
  
  .input {
    background: none;
    border: 0;
    outline: 0;
    height: 40px;
    width: 100%;
    border-bottom: 1px solid #2e2e2e;
    font-size: .9rem;
    padding: 8px 15px;
    color: #fff;
  }
  
  .form-section {
    padding: 16px;
    font-size: .85rem;
    background-color: #191818;
    box-shadow: rgb(0 0 0 / 8%) 0 -1px;
  }
  
  .form-section a {
    font-weight: bold;
    color: #8900f2;
    transition: color .3s ease;
  }
  
  .form-section a:hover {
    color: #8900f2;
    text-decoration: underline;
  }
  
  /*Button*/
  .form button {
    background-color: #8900f2;
    color: #fff;
    border: 0;
    border-radius: 24px;
    padding: 10px 16px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .3s ease;
  }
  
  .form button:hover {
    background-color: #8900f2;
  }





/*------------------sign up new----------------*/

.login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    padding: 40px;
    transform: translate(-50%, -50%);
    background: rgba(24, 20, 20, 0.987);
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0,0,0,.6);
    border-radius: 10px;
  }
  
  .login-box .user-box {
    position: relative;
  }
  
  .login-box .user-box input {
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    margin-bottom: 30px;
    border: none;
    border-bottom: 1px solid #fff;
    outline: none;
    background: transparent;
  }
  
  .login-box .user-box label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    pointer-events: none;
    transition: .5s;
  }
  
  .login-box .user-box input:focus ~ label,
  .login-box .user-box input:valid ~ label {
    top: -20px;
    left: 0;
    color: #bdb8b8;
    font-size: 12px;
  }
  
  .login-box form a {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    color: #ffffff;
    font-size: 16px;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    transition: .5s;
    margin-top: 40px;
    letter-spacing: 4px;
  }
  
  .login-box a:hover {
    background: #8900f2;
    color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 5px #8900f2,
                0 0 25px #8900f2,
                0 0 50px #8900f2,
                0 0 100px #8900f2;
  }
  
  .login-box a span {
    position: absolute;
    display: block;
  }
  
  @keyframes btn-anim1 {
    0% {
      left: -100%;
    }
  
    50%,100% {
      left: 100%;
    }
  }
  
  .login-box a span:nth-child(1) {
    bottom: 2px;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #8900f2);
    animation: btn-anim1 2s linear infinite;
  }

/*----------------card-----------------------*/

.faq h2{
    text-align: center;
}

.faq p{
 color: #fff;
 font-weight: 600;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px;
    background: #444;
    border-radius: 10px;
  }
  
  .card {
    position: relative;
    background: #333;
    width: 250px;
    height: 350px;
    border-radius: 10px;
    padding: 2rem;
    color: #aaa;
    box-shadow: 0 .25rem .25rem rgba(0,0,0,0.2),
      0 0 1rem rgba(0,0,0,0.2);
    overflow: hidden;
  }
  
  .card__image-container {
    margin: -2rem -2rem 1rem -2rem;
  }
  
  .card__line {
    opacity: 0;
    animation: LineFadeIn .8s .8s forwards ease-in;
  }
  
  .card__image {
    opacity: 0;
    animation: ImageFadeIn .8s 1.4s forwards;
  }
  
  .card__title {
    color: white;
    margin-top: 35px;
    margin-bottom: 10px;
    font-weight: 800;
    letter-spacing: 0.01em;
  }
  
  .card__content {
    margin-top: -1rem;
    opacity: 0;
    animation: ContentFadeIn .8s 1.6s forwards;
  }
  
  .card__svg {
    position: absolute;
    left: 0;
    top: 115px;
  }
  
  @keyframes LineFadeIn {
    0% {
      opacity: 0;
      d: path("M 0 300 Q 0 300 0 300 Q 0 300 0 300 C 0 300 0 300 0 300 Q 0 300 0 300 ");
      stroke: #fff;
    }
  
    50% {
      opacity: 1;
      d: path("M 0 300 Q 50 300 100 300 Q 250 300 350 300 C 350 300 500 300 650 300 Q 750 300 800 300");
      stroke: #888BFF;
    }
  
    100% {
      opacity: 1;
      d: path("M -2 100 Q 50 200 100 250 Q 250 400 350 300 C 400 250 550 150 650 300 Q 750 450 802 400");
      stroke: #545581;
    }
  }
  
  @keyframes ContentFadeIn {
    0% {
      transform: translateY(-1rem);
      opacity: 0;
    }
  
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes ImageFadeIn {
    0% {
      transform: translate(-.5rem, -.5rem) scale(1.05);
      opacity: 0;
      filter: blur(2px);
    }
  
    50% {
      opacity: 1;
      filter: blur(2px);
    }
  
    100% {
      transform: translateY(0) scale(1.0);
      opacity: 1;
      filter: blur(0);
    }
  }

  /*------------------------------NEW FAQ CARD----------------------------------*/

.faq2 h1{
    text-align: center;
}

.title{
    color: #fff;
}

.faq2 p{
    color: #fff;
}

.container {
    position: relative;
    width: 190px;
    height: 254px;
    transition: 200ms;
    background: transparent;
  }
  
  .container:active {
    width: 180px;
    height: 245px;
  }
  
  #card {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    transition: 700ms;
    background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);
  }
  
  .subtitle {
    transform: translateY(160px);
    color: rgb(134, 110, 221);
    text-align: center;
    width: 100%;
  }
  
  .title {
    opacity: 0;
    transition-duration: 300ms;
    transition-timing-function: ease-in-out-out;
    transition-delay: 100ms;
    position: absolute;
    font-size: x-large;
    font-weight: bold;
  }
  
  .tracker:hover ~ #card .title {
    opacity: 1;
  }
  
  #prompt {
    bottom: 8px;
    left: 12px;
    z-index: 20;
    font-size: 20px;
    font-weight: bold;
    transition: 300ms ease-in-out-out;
    position: absolute;
    max-width: 110px;
    color: rgb(255, 255, 255);
  }
  
  .tracker {
    position: absolute;
    z-index: 200;
    width: 100%;
    height: 100%;
  }
  
  .tracker:hover {
    cursor: pointer;
  }
  
  .tracker:hover ~ #card #prompt {
    opacity: 0;
  }
  
  .tracker:hover ~ #card {
    transition: 300ms;
    filter: brightness(1.1);
  }
  
  .container:hover #card::before {
    transition: 200ms;
    content: '';
    opacity: 80%;
  }
  
  .canvas {
    perspective: 800px;
    inset: 0;
    z-index: 200;
    position: absolute;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-template-areas: "tr-1 tr-2 tr-3 tr-4 tr-5"
      "tr-6 tr-7 tr-8 tr-9 tr-10"
      "tr-11 tr-12 tr-13 tr-14 tr-15"
      "tr-16 tr-17 tr-18 tr-19 tr-20"
      "tr-21 tr-22 tr-23 tr-24 tr-25";
  }
  
  #card::before {
    content: '';
    background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);
    filter: blur(2rem);
    opacity: 30%;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    transition: 200ms;
  }
  
  .tr-1 {
    grid-area: tr-1;
  }
  
  .tr-2 {
    grid-area: tr-2;
  }
  
  .tr-3 {
    grid-area: tr-3;
  }
  
  .tr-4 {
    grid-area: tr-4;
  }
  
  .tr-5 {
    grid-area: tr-5;
  }
  
  .tr-6 {
    grid-area: tr-6;
  }
  
  .tr-7 {
    grid-area: tr-7;
  }
  
  .tr-8 {
    grid-area: tr-8;
  }
  
  .tr-9 {
    grid-area: tr-9;
  }
  
  .tr-10 {
    grid-area: tr-10;
  }
  
  .tr-11 {
    grid-area: tr-11;
  }
  
  .tr-12 {
    grid-area: tr-12;
  }
  
  .tr-13 {
    grid-area: tr-13;
  }
  
  .tr-14 {
    grid-area: tr-14;
  }
  
  .tr-15 {
    grid-area: tr-15;
  }
  
  .tr-16 {
    grid-area: tr-16;
  }
  
  .tr-17 {
    grid-area: tr-17;
  }
  
  .tr-18 {
    grid-area: tr-18;
  }
  
  .tr-19 {
    grid-area: tr-19;
  }
  
  .tr-20 {
    grid-area: tr-20;
  }
  
  .tr-21 {
    grid-area: tr-21;
  }
  
  .tr-22 {
    grid-area: tr-22;
  }
  
  .tr-23 {
    grid-area: tr-23;
  }
  
  .tr-24 {
    grid-area: tr-24;
  }
  
  .tr-25 {
    grid-area: tr-25;
  }
  
  .tr-1:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(20deg) rotateY(-10deg) rotateZ(0deg);
  }
  
  .tr-2:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(20deg) rotateY(-5deg) rotateZ(0deg);
  }
  
  .tr-3:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(20deg) rotateY(0deg) rotateZ(0deg);
  }
  
  .tr-4:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(20deg) rotateY(5deg) rotateZ(0deg);
  }
  
  .tr-5:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(20deg) rotateY(10deg) rotateZ(0deg);
  }
  
  .tr-6:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(10deg) rotateY(-10deg) rotateZ(0deg);
  }
  
  .tr-7:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(10deg) rotateY(-5deg) rotateZ(0deg);
  }
  
  .tr-8:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg);
  }
  
  .tr-9:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(10deg) rotateY(5deg) rotateZ(0deg);
  }
  
  .tr-10:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(10deg) rotateY(10deg) rotateZ(0deg);
  }
  
  .tr-11:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(0deg) rotateY(-10deg) rotateZ(0deg);
  }
  
  .tr-12:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(0deg) rotateY(-5deg) rotateZ(0deg);
  }
  
  .tr-13:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  
  .tr-14:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
  }
  
  .tr-15:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(0deg) rotateY(10deg) rotateZ(0deg);
  }
  
  .tr-16:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(-10deg) rotateY(-10deg) rotateZ(0deg);
  }
  
  .tr-17:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(-10deg) rotateY(-5deg) rotateZ(0deg);
  }
  
  .tr-18:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(-10deg) rotateY(0deg) rotateZ(0deg);
  }
  
  .tr-19:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(-10deg) rotateY(5deg) rotateZ(0deg);
  }
  
  .tr-20:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(-10deg) rotateY(10deg) rotateZ(0deg);
  }
  
  .tr-21:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(-20deg) rotateY(-10deg) rotateZ(0deg);
  }
  
  .tr-22:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(-20deg) rotateY(-5deg) rotateZ(0deg);
  }
  
  .tr-23:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
  }
  
  .tr-24:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(-20deg) rotateY(5deg) rotateZ(0deg);
  }
  
  .tr-25:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(-20deg) rotateY(10deg) rotateZ(0deg);
  }
  
  .noselect {
    -webkit-touch-callout: none;
     /* iOS Safari */
    -webkit-user-select: none;
     /* Safari */
     /* Konqueror HTML */
    -moz-user-select: none;
     /* Old versions of Firefox */
    -ms-user-select: none;
     /* Internet Explorer/Edge */
    user-select: none;
     /* Non-prefixed version, currently
                                      supported by Chrome, Edge, Opera and Firefox */
  }
/*--------------------------------Loader--------------------------------*/




.loader {
    --path: #2f3545;
    --dot: #5628ee;
    --duration: 3s;
    width: 44px;
    height: 44px;
    position: relative;
  }
  
  .loader:before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    display: block;
    background: var(--dot);
    top: 37px;
    left: 19px;
    transform: translate(-18px, -18px);
    animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  }
  
  .loader svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  
  .loader svg rect, .loader svg polygon, .loader svg circle {
    fill: none;
    stroke: var(--path);
    stroke-width: 10px;
    stroke-linejoin: round;
    stroke-linecap: round;
  }
  
  .loader svg polygon {
    stroke-dasharray: 145 76 145 76;
    stroke-dashoffset: 0;
    animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  }
  
  .loader svg rect {
    stroke-dasharray: 192 64 192 64;
    stroke-dashoffset: 0;
    animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  }
  
  .loader svg circle {
    stroke-dasharray: 150 50 150 50;
    stroke-dashoffset: 75;
    animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  }
  
  .loader.triangle {
    width: 48px;
  }
  
  .loader.triangle:before {
    left: 21px;
    transform: translate(-10px, -18px);
    animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
  }
  
  @keyframes pathTriangle {
    33% {
      stroke-dashoffset: 74;
    }
  
    66% {
      stroke-dashoffset: 147;
    }
  
    100% {
      stroke-dashoffset: 221;
    }
  }
  
  @keyframes dotTriangle {
    33% {
      transform: translate(0, 0);
    }
  
    66% {
      transform: translate(10px, -18px);
    }
  
    100% {
      transform: translate(-10px, -18px);
    }
  }
  
  @keyframes pathRect {
    25% {
      stroke-dashoffset: 64;
    }
  
    50% {
      stroke-dashoffset: 128;
    }
  
    75% {
      stroke-dashoffset: 192;
    }
  
    100% {
      stroke-dashoffset: 256;
    }
  }
  
  @keyframes dotRect {
    25% {
      transform: translate(0, 0);
    }
  
    50% {
      transform: translate(18px, -18px);
    }
  
    75% {
      transform: translate(0, -36px);
    }
  
    100% {
      transform: translate(-18px, -18px);
    }
  }
  
  @keyframes pathCircle {
    25% {
      stroke-dashoffset: 125;
    }
  
    50% {
      stroke-dashoffset: 175;
    }
  
    75% {
      stroke-dashoffset: 225;
    }
  
    100% {
      stroke-dashoffset: 275;
  
    }
  }
  
  .loader {
    display: inline-block;
    margin: 0 16px;
  }


/*******************************scroll*********************************/

::-webkit-scrollbar{
  width: 8px;
}
/*#progressbar{
  position: fixed;
  top: 0;
  right: 0;
  width: 7px;
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(to top, #fcb045, #fd1d1d, #833a83);
*/

::-webkit-scrollbar-thumb{
  background: linear-gradient(transparent, #fff);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(transparent, #8900f2);
}


.gex h1{
 text-align: center;
 margin-bottom: 1px;
}

.container3 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 350px;
  background: #444;
  border-radius: 10px;
}

.card {
  position: relative;
  background: #333;
  width: 250px;
  height: 350px;
  border-radius: 10px;
  padding: 2rem;
  color: #aaa;
  box-shadow: 0 .25rem .25rem rgba(0,0,0,0.2),
    0 0 1rem rgba(0,0,0,0.2);
  overflow: hidden;
}

.card__image-container {
  margin: -2rem -2rem 1rem -2rem;
}

.card__line {
  opacity: 0;
  animation: LineFadeIn .8s .8s forwards ease-in;
}

.card__image {
  opacity: 0;
  animation: ImageFadeIn .8s 1.4s forwards;
}

.card__title {
  color: white;
  margin-top: 35px;
  margin-bottom: 10px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.card__content {
  margin-top: -1rem;
  opacity: 0;
  animation: ContentFadeIn .8s 1.6s forwards;
}

.card__svg {
  position: absolute;
  left: 0;
  top: 115px;
}

@keyframes LineFadeIn {
  0% {
    opacity: 0;
    d: path("M 0 300 Q 0 300 0 300 Q 0 300 0 300 C 0 300 0 300 0 300 Q 0 300 0 300 ");
    stroke: #fff;
  }

  50% {
    opacity: 1;
    d: path("M 0 300 Q 50 300 100 300 Q 250 300 350 300 C 350 300 500 300 650 300 Q 750 300 800 300");
    stroke: #888BFF;
  }

  100% {
    opacity: 1;
    d: path("M -2 100 Q 50 200 100 250 Q 250 400 350 300 C 400 250 550 150 650 300 Q 750 450 802 400");
    stroke: #545581;
  }
}

@keyframes ContentFadeIn {
  0% {
    transform: translateY(-1rem);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes ImageFadeIn {
  0% {
    transform: translate(-.5rem, -.5rem) scale(1.05);
    opacity: 0;
    filter: blur(2px);
  }

  50% {
    opacity: 1;
    filter: blur(2px);
  }

  100% {
    transform: translateY(0) scale(1.0);
    opacity: 1;
    filter: blur(0);
  }
}

.book {
  position: relative;
  border-radius: 10px;
  width: 220px;
  height: 300px;
  background-color: #4a4e69;
  -webkit-box-shadow: 1px 1px 12px #000;
  box-shadow: 1px 1px 12px #000;
  -webkit-transform: preserve-3d;
  -ms-transform: preserve-3d;
  transform: preserve-3d;
  -webkit-perspective: 2000px;
  perspective: 2000px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #000;  
}

.cover {
  top: 0;
  position: absolute;
  background-color: #22223b;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  cursor: pointer;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform-origin: 0;
  -ms-transform-origin: 0;
  transform-origin: 0;
  -webkit-box-shadow: 1px 1px 12px #000;
  box-shadow: 1px 1px 12px #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.book:hover .cover {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform: rotatey(-80deg);
  -ms-transform: rotatey(-80deg);
  transform: rotatey(-80deg);
}

.book p {
  font-size: 20px;
  font-weight: 700;
}


.contact-col{
  color: #fff;
}
.form{
  color: #fff;
}
.input{
  color: #fff;
}


/* ============================views=====================================*/


.views{
  width: 80%;
  margin: auto;
  text-align: center;
  padding-top: 100px;
  padding-bottom: 100px;
}
.views h1{
padding-bottom: 50px;
}
/* From Uiverse.io by Spacious74 */ 
.viewcards {
  display: flex;
  justify-content: space-between; /* Adds space between the cards */
  flex-wrap: wrap; /* Ensures cards wrap to the next row if needed */
  gap:50px; /* Adds spacing between cards */
  margin: 20px auto; /* Centers the container */
  max-width: 1200px; /* Optional: Limits the width of the container */
}

.outer {
  flex: 1 1 calc(20% - 20px); /* Each card takes 20% of the row minus the gap */
  box-sizing: border-box; /* Ensures padding and border are included in width */
}
.outer {
  width: 300px;
  height: 250px;
  border-radius: 10px;
  padding: 1px;
  background: radial-gradient(circle 230px at 0% 0%, #ffffff, #0c0d0d);
  position: relative;
}

.dot {
  width: 5px;
  aspect-ratio: 1;
  position: absolute;
  background-color: #fff;
  box-shadow: 0 0 10px #ffffff;
  border-radius: 100px;
  z-index: 2;
  right: 10%;
  top: 10%;
  animation: moveDot 6s linear infinite;
}

@keyframes moveDot {
  0%,
  100% {
    top: 10%;
    right: 10%;
  }
  25% {
    top: 10%;
    right: calc(100% - 35px);
  }
  50% {
    top: calc(100% - 30px);
    right: calc(100% - 35px);
  }
  75% {
    top: calc(100% - 30px);
    right: 10%;
  }
}

.card9 {
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 9px;
  border: solid 1px #202222;
  background-size: 20px 20px;
  background: radial-gradient(circle 280px at 0% 0%, #444444, #0c0d0d);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-direction: column;
  color: #fff;
}
.ray {
  width: 220px;
  height: 45px;
  border-radius: 100px;
  position: absolute;
  background-color: #c7c7c7;
  opacity: 0.4;
  box-shadow: 0 0 50px #fff;
  filter: blur(10px);
  transform-origin: 10%;
  top: 0%;
  left: 0;
  transform: rotate(40deg);
}

.card9 .text {
  font-weight: bolder;
  font-size: 4rem;
  background: linear-gradient(45deg, #000000 4%, #fff, #000);
  background-clip: text;
  color: transparent;
}

.line {
  width: 100%;
  height: 1px;
  position: absolute;
  background-color: #2c2c2c;
}
.topl {
  top: 10%;
  background: linear-gradient(90deg, #888888 30%, #1d1f1f 70%);
}
.bottoml {
  bottom: 10%;
}
.leftl {
  left: 10%;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, #747474 30%, #222424 70%);
}
.rightl {
  right: 10%;
  width: 1px;
  height: 100%;
}


/* """""""""""""""""POP UP"""""""""""""""""""""""" */




/* Popup container */
/* From Uiverse.io by Yaya12085 */ 
.form {
  display: flex;
  flex-direction: column;
  background: #606c88;
  background: -webkit-linear-gradient(to right, #3f4c6b, #606c88);
  background: linear-gradient(to right, #3f4c6b, #606c88);
  padding: 20px;
  border-radius: 10px;
  max-width: 350px;
}

.title {
  font-size: 2rem;
  line-height: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
}

.description {
  line-height: 1.5rem;
  font-size: 1rem;
  margin-top: 1rem;
  color: rgb(209 213 219);
}

.form div {
  display: flex;
  max-width: 28rem;
  margin-top: 1rem;
  column-gap: 0.5rem;
}

.form div input {
  outline: none;
  line-height: 1.5rem;
  font-size: 0.875rem;
  color: rgb(255 255 255 );
  padding: 0.5rem 0.875rem;
  background-color: rgb(255 255 255 / 0.05);
  border: 1px solid rgba(253, 253, 253, 0.363);
  border-radius: 0.375rem;
  flex: 1 1 auto;
}

.form div input::placeholder {
  color: rgb(216, 212, 212);
}

.form div input:focus {
  border: 1px solid rgb(99 102 241);
}

.form div button {
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding: 0.625rem 0.875rem;
  background-color: rgb(99 102 241);
  border-radius: 0.375rem;
  border: none;
  outline: none;
}
.popup {
  display: none; /* Hide the popup by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Black background with opacity */
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background: rgba(0, 0, 0, 0.7); /* Transparent black */
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  position: relative;
  color: #fff;
}
/*             universe button                 */                        


/* From Uiverse.io by Ashon-G */ 
.uiverse {
  --duration: 7s;
  --easing: linear;
  --c-color-1: rgba(255, 163, 26, 0.7);
  --c-color-2: #1a23ff;
  --c-color-3: #e21bda;
  --c-color-4: rgba(255, 232, 26, 0.7);
  --c-shadow: rgba(255, 223, 87, 0.5);
  --c-shadow-inset-top: rgba(255, 223, 52, 0.9);
  --c-shadow-inset-bottom: rgba(255, 250, 215, 0.8);
  --c-radial-inner: #ffd215;
  --c-radial-outer: #fff172;
  --c-color: #fff;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  outline: none;
  position: relative;
  cursor: pointer;
  border: none;
  display: table;
  border-radius: 24px;
  padding: 0;
  margin: 0;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--c-color);
  background: radial-gradient(
    circle,
    var(--c-radial-inner),
    var(--c-radial-outer) 80%
  );
  box-shadow: 0 0 14px var(--c-shadow);
}

.uiverse:before {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 24px;
  box-shadow:
    inset 0 3px 12px var(--c-shadow-inset-top),
    inset 0 -3px 4px var(--c-shadow-inset-bottom);
}

.uiverse .wrapper {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  overflow: hidden;
  border-radius: 24px;
  min-width: 132px;
  padding: 12px 0;
}

.uiverse .wrapper span {
  display: inline-block;
  position: relative;
  z-index: 1;
}

.uiverse:hover {
  --duration: 1400ms;
}

.uiverse .wrapper .circle {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  filter: blur(var(--blur, 8px));
  background: var(--background, transparent);
  transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);
  animation: var(--animation, none) var(--duration) var(--easing) infinite;
}

.uiverse .wrapper .circle.circle-1,
.uiverse .wrapper .circle.circle-9,
.uiverse .wrapper .circle.circle-10 {
  --background: var(--c-color-4);
}

.uiverse .wrapper .circle.circle-3,
.uiverse .wrapper .circle.circle-4 {
  --background: var(--c-color-2);
  --blur: 14px;
}

.uiverse .wrapper .circle.circle-5,
.uiverse .wrapper .circle.circle-6 {
  --background: var(--c-color-3);
  --blur: 16px;
}

.uiverse .wrapper .circle.circle-2,
.uiverse .wrapper .circle.circle-7,
.uiverse .wrapper .circle.circle-8,
.uiverse .wrapper .circle.circle-11,
.uiverse .wrapper .circle.circle-12 {
  --background: var(--c-color-1);
  --blur: 12px;
}

.uiverse .wrapper .circle.circle-1 {
  --x: 0;
  --y: -40px;
  --animation: circle-1;
}

.uiverse .wrapper .circle.circle-2 {
  --x: 92px;
  --y: 8px;
  --animation: circle-2;
}

.uiverse .wrapper .circle.circle-3 {
  --x: -12px;
  --y: -12px;
  --animation: circle-3;
}

.uiverse .wrapper .circle.circle-4 {
  --x: 80px;
  --y: -12px;
  --animation: circle-4;
}

.uiverse .wrapper .circle.circle-5 {
  --x: 12px;
  --y: -4px;
  --animation: circle-5;
}

.uiverse .wrapper .circle.circle-6 {
  --x: 56px;
  --y: 16px;
  --animation: circle-6;
}

.uiverse .wrapper .circle.circle-7 {
  --x: 8px;
  --y: 28px;
  --animation: circle-7;
}

.uiverse .wrapper .circle.circle-8 {
  --x: 28px;
  --y: -4px;
  --animation: circle-8;
}

.uiverse .wrapper .circle.circle-9 {
  --x: 20px;
  --y: -12px;
  --animation: circle-9;
}

.uiverse .wrapper .circle.circle-10 {
  --x: 64px;
  --y: 16px;
  --animation: circle-10;
}

.uiverse .wrapper .circle.circle-11 {
  --x: 4px;
  --y: 4px;
  --animation: circle-11;
}

.uiverse .wrapper .circle.circle-12 {
  --blur: 14px;
  --x: 52px;
  --y: 4px;
  --animation: circle-12;
}

@keyframes circle-1 {
  33% {
    transform: translate(0px, 16px) translateZ(0);
  }

  66% {
    transform: translate(12px, 64px) translateZ(0);
  }
}

@keyframes circle-2 {
  33% {
    transform: translate(80px, -10px) translateZ(0);
  }

  66% {
    transform: translate(72px, -48px) translateZ(0);
  }
}

@keyframes circle-3 {
  33% {
    transform: translate(20px, 12px) translateZ(0);
  }

  66% {
    transform: translate(12px, 4px) translateZ(0);
  }
}

@keyframes circle-4 {
  33% {
    transform: translate(76px, -12px) translateZ(0);
  }

  66% {
    transform: translate(112px, -8px) translateZ(0);
  }
}

@keyframes circle-5 {
  33% {
    transform: translate(84px, 28px) translateZ(0);
  }

  66% {
    transform: translate(40px, -32px) translateZ(0);
  }
}

@keyframes circle-6 {
  33% {
    transform: translate(28px, -16px) translateZ(0);
  }

  66% {
    transform: translate(76px, -56px) translateZ(0);
  }
}

@keyframes circle-7 {
  33% {
    transform: translate(8px, 28px) translateZ(0);
  }

  66% {
    transform: translate(20px, -60px) translateZ(0);
  }
}

@keyframes circle-8 {
  33% {
    transform: translate(32px, -4px) translateZ(0);
  }

  66% {
    transform: translate(56px, -20px) translateZ(0);
  }
}

@keyframes circle-9 {
  33% {
    transform: translate(20px, -12px) translateZ(0);
  }

  66% {
    transform: translate(80px, -8px) translateZ(0);
  }
}

@keyframes circle-10 {
  33% {
    transform: translate(68px, 20px) translateZ(0);
  }

  66% {
    transform: translate(100px, 28px) translateZ(0);
  }
}

@keyframes circle-11 {
  33% {
    transform: translate(4px, 4px) translateZ(0);
  }

  66% {
    transform: translate(68px, 20px) translateZ(0);
  }
}

@keyframes circle-12 {
  33% {
    transform: translate(56px, 0px) translateZ(0);
  }

  66% {
    transform: translate(60px, -32px) translateZ(0);
  }
}
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

.uwu{
  text-decoration: none;
}

/* From Uiverse.io by csemszepp */ 
@keyframes animate {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

.containerx {
  margin-top: 175px;
  margin-left: 450px;
  position: relative;
  top: -80px;
  transform: skewY(-20deg);
  animation: animate 5s linear infinite;
  .cube {
    position: relative;
    z-index: 2;
    &:nth-child(2) {
      z-index: 1;
      translate: -60px -60px;
    }
    &:nth-child(3) {
      z-index: 3;
      translate: 60px 60px;
    }
    div {
      position: absolute;
      display: flex;
      flex-direction: column;
      gap: 30px;
      translate: calc(-70px * var(--x)) calc(-60px * var(--y));
      span {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 50px;
        background: #313030;
        z-index: calc(1 * var(--i));
        transition: 1.5s;
        &:hover {
          transition: 0s;
          background: #ef4149;
          filter: drop-shadow(0 0 30px #ef4149);
          &:before,
          &:after {
            transition: 0s;
            background: #ef4149;
          }
        }
        &:before {
          content: "";
          position: absolute;
          left: -40px;
          width: 40px;
          height: 100%;
          background: #1f1d1d;
          transform-origin: right;
          transform: skewY(45deg);
          transition: 1.5s;
        }
        &:after {
          content: "";
          position: absolute;
          top: -40px;
          left: 0px;
          width: 100%;
          height: 40px;
          background: #3b3939;
          transform-origin: bottom;
          transform: skewX(45deg);
          transition: 1.5s;
        }
      }
    }
  }
}

/******************************************************************************/

html {
  scroll-behavior: smooth;
}

/* ==============================================
   CRITICAL MOBILE RESPONSIVE FIXES
   Add these to your existing style.css
   ============================================== */

/* Base Mobile Fixes */
* {
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    width: 100%;
}

/* Navigation Mobile Fixes */
@media (max-width: 767px) {
    nav {
        padding: 2% 3%;
    }

    nav img {
        width: 80px;
        margin-left: 0;
    }

    .nav-links {
        position: fixed;
        background: rgba(13, 13, 13, 0.98);
        height: 100vh;
        width: 200px;
        top: 0;
        right: -200px;
        margin-top: 0;
        margin-right: 0;
        text-align: left;
        z-index: 2000;
        transition: right 0.5s;
        border-radius: 0;
        padding: 30px 20px;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links ul li {
        display: block;
        padding: 15px 0;
    }

    .nav-links ul li a {
        font-size: 16px;
    }

    nav .fa {
        display: block;
        color: #fff;
        margin: 10px;
        font-size: 22px;
        cursor: pointer;
        position: fixed;
        right: 25px;
        top: 25px;
        z-index: 2001;
    }

    nav .fa-times {
        right: 25px;
    }
}

/* Header/Hero Section Mobile */
@media (max-width: 767px) {
    .header, .header4 {
        min-height: 100vh;
        background-size: cover;
        background-position: center;
    }

    .text-box {
        width: 95%;
        padding: 20px;
    }

    .text-box h1 {
        font-size: 32px;
        line-height: 1.2;
    }

    .text-box p {
        font-size: 18px;
        margin: 10px 0 30px;
    }

    .button {
        padding: 0.8em 2em;
        font-size: 14px;
    }
}

/* About Section Mobile */
@media (max-width: 767px) {
    .about-us {
        width: 90%;
        padding-top: 50px;
        padding-bottom: 30px;
    }

    .about-us .row {
        flex-direction: column;
    }

    .about-col {
        flex-basis: 100%;
        margin-bottom: 30px;
    }

    .about-col h1 {
        font-size: 28px;
        text-align: center;
    }

    .about-col p {
        font-size: 16px;
    }

    .about-col img {
        width: 100%;
        margin-top: 20px;
    }

    .uiverse {
        display: block;
        margin: 20px auto;
    }
}

/* Services Section Mobile */
@media (max-width: 767px) {
    .gex h1 {
        font-size: 32px;
        padding: 0 20px;
    }

    .glider-contain {
        padding: 0 20px;
    }

    .glider figure {
        padding: 20px;
    }

    .glider figure h3 {
        font-size: 20px;
    }

    .glider figure p {
        font-size: 14px;
    }

    .glider-prev, .glider-next {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}

/* CTA Section Mobile */
@media (max-width: 767px) {
    .cta {
        width: 90%;
        padding: 50px 20px;
        margin: 50px auto;
    }

    .cta h1 {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .shadow__btn {
        padding: 12px 20px;
        font-size: 14px;
        letter-spacing: 2px;
    }
}

/* Views Section Mobile */
@media (max-width: 767px) {
    .views {
        width: 95%;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .views h1 {
        font-size: 28px;
        padding-bottom: 30px;
    }

    .viewcards {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    .outer {
        flex: 1 1 100%;
        max-width: 300px;
    }
}

/* Consistency Section Mobile */
@media (max-width: 767px) {
    .consistency-section {
        padding: 50px 20px;
    }

    .consistency-section .section-title {
        font-size: 28px;
        margin-bottom: 40px;
    }

    .consistency-section .dashboard-container {
        gap: 20px;
    }

    .consistency-section .gradient-circle {
        width: 300px;
        height: 300px;
    }
}

/* FAQ Section Mobile */
@media (max-width: 767px) {
    .fakerski {
        padding: 20px;
    }

    .faqh1 {
        font-size: 32px;
        margin-bottom: 30px;
    }

    .faque {
        margin-bottom: 15px;
    }

    .que h3 {
        font-size: 16px;
        padding-right: 30px;
    }

    .que svg {
        width: 12px;
        height: 8px;
    }

    .anr p {
        font-size: 14px;
        line-height: 1.6;
    }
}

/* Contact Section Mobile */
@media (max-width: 767px) {
    .zxp9_contact_wrapper_main {
        padding: 50px 15px 40px;
    }

    .kq7m_hero_heading_top {
        font-size: 32px;
        margin-bottom: 40px;
    }

    .wr3n_contact_info_container {
        padding: 0 10px;
    }

    .bp8t_info_block_item {
        margin-bottom: 30px;
    }

    .dm4k_block_title_text {
        font-size: 20px;
    }

    .tj6w_block_content_area {
        font-size: 15px;
    }
}

/* Gallery Section Mobile */
@media (max-width: 767px) {
    .gal-title-p3r8w {
        font-size: 32px;
        margin-bottom: 30px;
    }

    .gal-grid-w8q5n {
        gap: 10px;
        grid-auto-rows: 150px;
    }

    .gal-modal-close-b6r4s {
        top: 15px;
        right: 15px;
        font-size: 35px;
    }

    .gal-modal-content-h5w9t {
        max-width: 95%;
        max-height: 80%;
    }
}

/* Footer Mobile */
@media (max-width: 767px) {
    .footer {
        padding: 30px 20px;
    }

    .footer h4 {
        font-size: 20px;
    }

    .footer p {
        font-size: 14px;
        line-height: 1.6;
    }

    .icons .fa {
        font-size: 20px;
        margin: 0 10px;
    }
}

/* General Row/Column Fixes */
@media (max-width: 767px) {
    .row, .row2, .row3 {
        flex-direction: column;
        gap: 20px;
    }

    .course-col, .services-col, .services2-col, 
    .facilities-col, .testimonials-col, .contact-col {
        flex-basis: 100%;
        margin-bottom: 20px;
    }
}

/* Prevent horizontal scroll on all sections */
@media (max-width: 767px) {
    .header, .header2, .header3, .header4,
    .course, .campus, .facilities, .testimonials,
    .services, .about-us, .contact-us, section {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
}

/* Fix images overflowing on mobile */
@media (max-width: 767px) {
    img {
        max-width: 100%;
        height: auto;
    }
}

/* Small phone optimization (iPhone SE, etc) */
@media (max-width: 375px) {
    .text-box h1 {
        font-size: 28px;
    }

    .text-box p {
        font-size: 16px;
    }

    .button, .shadow__btn {
        font-size: 13px;
        padding: 0.7em 1.5em;
    }

    .views h1, .gex h1, .kq7m_hero_heading_top,
    .gal-title-p3r8w, .faqh1 {
        font-size: 26px;
    }
}

/* Landscape orientation fixes */
@media (max-width: 767px) and (orientation: landscape) {
    .header, .header4 {
        min-height: 150vh;
    }

    .text-box {
        padding-top: 60px;
    }
}

/* Touch-friendly tap targets */
@media (max-width: 767px) {
    a, button, .fa {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .nav-links ul li a {
        padding: 15px 12px;
    }
}

/* Improve readability on mobile */
@media (max-width: 767px) {
    p {
        line-height: 1.7;
    }

    h1, h2, h3, h4, h5, h6 {
        line-height: 1.3;
    }
}

/* ==============================================
   FIX SPACING BETWEEN CONTACT AND GALLERY (MOBILE ONLY)
   THIS IS THE REAL FIX - THE MIN-HEIGHT WAS THE CULPRIT!
   ============================================== */

/* Mobile spacing adjustment only */
@media (max-width: 767px) {
    /* THE MAIN ISSUE: min-height: 100vh was forcing full viewport height! */
    .zxp9_contact_wrapper_main {
        min-height: auto !important; /* THIS IS THE KEY FIX */
        padding: 40px 15px 20px 15px !important;
        height: auto !important;
        margin: 0 !important;
    }

    /* Remove the decorative pseudo-elements on mobile */
    .zxp9_contact_wrapper_main::before,
    .zxp9_contact_wrapper_main::after {
        display: none !important;
    }

    /* Tighten up gallery spacing */
    .gal-sect-xz9m4k {
        padding: 30px 20px 40px 20px !important;
        margin: 0 !important;
    }

    /* Remove any wrapper margins */
    section#contact {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Tighten content container */
    .wr3n_contact_