/* navbar */

.logo{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-top: -9px;
}
.navbar-brand b{
    font-size: 32px;
    color: rgba(52, 211, 153, 1) !important;
}
.navbar{
    background-color: rgba(15, 23, 42, 0.95);
    border-bottom: 5px solid #003893;
}
.navbar .nav-link{
    color: rgba(248, 250, 252, 0.8) !important;
    transition: 2s;
    font-family: Verdana;
    font-size: 22px;
    font-weight: 700px;
}
.navbar .active{
 color: rgba(52, 211, 153, 1) !important;
}
.navbar .nav-link:hover{
    color: rgba(52, 211, 153, 1) !important;
}

 /* animationimage */
.carousel-inner .animationimage{
    height: 400px;
    cursor: pointer;
}

/* SearchBox */

.SearchBox{
    background-color: #0F172A;
    color: #34D399;
    /* height: 70px; */
}
#Search{
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    max-width: 450px;
    margin-top: 10px;
    height: 50px;
    outline: none;
    color: rgba(52, 211, 153, 1);
}
#Search:focus{
    box-shadow: 0 0 8px #00ead3;
}
.Search-icon{
    margin-left: -45px;
}
.text-animations::before{
    content: "HTML Course";
    animation: change-text 10s infinite;
}
@keyframes change-text{
     0% { opacity: 1; content: "HTML Course"; }
     5% { opacity: 0; }
    10% { opacity: 1; content: "HTML Basic"; }
    15% { opacity: 0; }
    20% { opacity: 1; content: "HTML Elements"; }
    25% { opacity: 0; }
    30% { opacity: 1; content: "HTML Attributes"; }
    35% { opacity: 0; }
    40% { opacity: 1; content: "HTML Headings"; }
    45% { opacity: 0; }
    50% { opacity: 1; content: "HTML Page Titile"; }
    55% { opacity: 0; }
    60% { opacity: 1; content: "HTML List"; }
    65% { opacity: 0; }
    70% { opacity: 1; content: "HTML Div"; }
    75% { opacity: 0; }
    80% { opacity: 1; content: "HTML Button"; }
    85% { opacity: 0; }
    90% { opacity: 1; content: "HTML Tables"; }
    95% { opacity: 0; }
    100% { opacity: 1; content: "HTML iframes";}
}

/* hero section */
.container-fluid .col--2{
    background: #0B1226;
    height: 500px;
    overflow-x: hidden;
    overflow-y: scroll;
    border-right: 1px solid #1E3A8A;

}
.sidebar-title{
    font-size: 25px;
    font-weight: 700;
    color: #22C55E;
    text-align: center;
    margin-top: 10px;
}
.col--2 > ul{
    list-style-type: none;
}
.col--2 > ul > li > a{
    color: #E5E7EB;
    text-decoration: none;
    font-family: Verdana;
    font-weight: 400;
    font-size: 17px;
    margin-left: -21px;
}
.col--2 > ul > li > a:hover{
    background: #0EA5E9;
    color: #ffffff;
}
.col--2::-webkit-scrollbar{
  width:6px;
}

.col--2::-webkit-scrollbar-thumb{
  background:#0EA5E9;
  border-radius:10px;
}

.col--2::-webkit-scrollbar-track{
  background:#0B1226;
}
.list-title{
    font-size: 25px;
    font-weight: 700;
    color: #22C55E;
    text-align: center;
    margin-top: 10px;
    margin-left: -51px;
}
.video{
    width: 690px;
    height: 270px;
    border-radius: 10px;
    margin-top: 15px;
    border-bottom: 2px solid #00F2FF;

}
.video-title{
    color: #00F2FF;
    font-family: Verdana;
    font-size: 30px;
    margin-top: 15px;
}
.detilas{
    margin-top: 25px;
}
.detilas h2{
  text-align: center;
  margin-top: 20px;
  font-size: 20px;
  color: #00F2FF;
  
}
/*Button section*/
button {
  font-family: inherit;
  font-size: 20px;
  background: #00D4FF;
  color: #000000;
  padding: 0.7em 1em;
  padding-left: 0.9em;
  display: flex;
  align-items: center;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.2s;
  cursor: pointer;
}
 
button span {
  display: block;
  margin-left: 0.3em;
  transition: all 0.3s ease-in-out;
}
 
button svg {
  display: block;
  transform-origin: center center;
  transition: transform 0.3s ease-in-out;
}
 
button:hover .svg-wrapper {
  animation: fly-1 0.6s ease-in-out infinite alternate;
}
 
button:hover svg {
  transform: translateX(1.2em) rotate(45deg) scale(1.1);
}
 
button:hover span {
  transform: translateX(5em);
}
 
button:active {
  transform: scale(0.95);
}
 
@keyframes fly-1 {
  from {
    transform: translateY(0.1em);
  }
 
  to {
    transform: translateY(-0.1em);
  }
} 
.btn {
  --border-color: linear-gradient(-45deg, #ffae00, #7e03aa, #00fffb);
  --border-width: 0.125em;
  --curve-size: 0.5em;
  --blur: 30px;
  --bg: #080312;
  --color: #afffff;
  color: var(--color);
  cursor: pointer;
  /* use position: relative; so that BG is only for .btn */
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-content: center;
  padding: 0.7em 1.5em;
  font-size: 17px;
  border: 0;
  text-transform: uppercase;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.6);
  clip-path: polygon(
    /* Top-left */ 0% var(--curve-size),
    var(--curve-size) 0,
    /* top-right */ 100% 0,
    100% calc(100% - var(--curve-size)),
    /* bottom-right 1 */ calc(100% - var(--curve-size)) 100%,
    /* bottom-right 2 */ 0 100%
  );
  transition: color 250ms;
}
 
.btn::after,
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
}
 
.btn::before {
  background: var(--border-color);
  background-size: 300% 300%;
  animation: move-bg7234 5s ease infinite;
  z-index: -2;
}
 
@keyframes move-bg7234 {
  0% {
    background-position: 31% 0%;
  }
 
  50% {
    background-position: 70% 100%;
  }
 
  100% {
    background-position: 31% 0%;
  }
}
 
.btn::after {
  background: var(--bg);
  z-index: -1;
  clip-path: polygon(
    /* Top-left */ var(--border-width)
      calc(var(--curve-size) + var(--border-width) * 0.5),
    calc(var(--curve-size) + var(--border-width) * 0.5) var(--border-width),
    /* top-right */ calc(100% - var(--border-width)) var(--border-width),
    calc(100% - var(--border-width))
      calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)),
    /* bottom-right 1 */
      calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5))
      calc(100% - var(--border-width)),
    /* bottom-right 2 */ var(--border-width) calc(100% - var(--border-width))
  );
  transition: clip-path 500ms;
}
 
.btn:where(:hover, :focus)::after {
  clip-path: polygon(
    /* Top-left */ calc(100% - var(--border-width))
      calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)),
    calc(100% - var(--border-width)) var(--border-width),
    /* top-right */ calc(100% - var(--border-width)) var(--border-width),
    calc(100% - var(--border-width))
      calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)),
    /* bottom-right 1 */
      calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5))
      calc(100% - var(--border-width)),
    /* bottom-right 2 */
      calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5))
      calc(100% - var(--border-width))
  );
  transition: 200ms;
}
 
.btn:where(:hover, :focus) {
  color: #fff;
}

.btn-2{
  display: flex;
  justify-content: center;
}
.btn-bg-c{
    background-color: #020d20;
    border-top: 1px solid #00D4FF;
}

/*code section*/
.code-fake{
  width: 100%;
  height: 50px;
  background-color: transparent;
}
.code-fake-h3{
  font-size: 35px;
  text-align: center;
  color:#00D4FF;
}
.code-fake-res{
  display: flex;
  justify-content: center;
  color: black;

}
.code-fake-h1{
  text-align: center;
  color: black;
}
.col-bg-fake{
  height: 200px;
  background-color: white;
}

/*student Progress-*/
.card{
  background-color: transparent;
  border: 1px solid #00D4FF;
  border-radius: 30px;

}
.card-text{
  font-size: 20px;
  text-align: center;
}
.card-body > ul >li{
  list-style-type: none;
}
.card-name{
  color: #E5E7EB;
}
.card-age{
  color: #9CA3AF;
}
.card-html{
  color: #22D3EE;
}
.card img{
  height: 200px;
}

/*Code Editor*/

.leftsidecode{
  background-color: rgb(12, 12, 12);
  height: 550px;
}
.code-head{
  width: 100%;
  height: 40px;
  font-size: 30px;
  text-align: center;
  color: white;
}
.code-head h3{
  margin-top: 10px;
  font-weight: bold;
}
.code-html-left{
  background-color: black;
  height: 230px;
  border: 1px solid #00D4FF;
  
}
.code-html-left label{
  display: block;
  font-size: 20px;
  text-align: center;
  color: white;
}
.code-html-left textarea{
  width: 100%;
  height: 77%;
  background-color: black;
  outline: none;
  border: none;
  color: white;
}
.code-html-left textarea::-webkit-scrollbar{
  width:4px;
}

.code-html-left textarea::-webkit-scrollbar-thumb{
  background:black;
  border-radius:10px;
}

.code-html-left textarea::-webkit-scrollbar-track{
  background:white;
}

.code-css-left{
  background-color: black;
  height: 248px;
  margin-top: 15px;
  border: 1px solid #00D4FF;
  
}
.code-css-left label{
  display: block;
  font-size: 20px;
  text-align: center;
  color: white;
}
.code-css-left textarea{
  width: 100%;
  height: 77%;
  background-color: black;
  outline: none;
  border: none;
  color: white;
}
.code-html-css textarea::-webkit-scrollbar{
  width:4px;
}

.code-html-css textarea::-webkit-scrollbar-thumb{
  background:black;
  border-radius:10px;
}

.code-html-css textarea::-webkit-scrollbar-track{
  background:white;
}
.rightsidecode iframe{
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgb(69, 243, 255);
}
/*footer*/

.footer-bg{
  /* background-color: transparent; */
  height: 300px;
}
.footer-title{
  font-size: 59px;
  padding: 20px;
}
.button-footer{
  border-radius: 10px;
  outline: none;
  width: 120px;
  height: 60px;
  background-color: #00fffb;
  color: black;
  margin-left: 30px;
  transition: 1s;
}
.button-menu{
  border-radius: 10px;
  outline: none;
  max-width: 80%;
  height: 60px;
  background-color: #00fffb;
  color: black;
  margin-left: 30px;
  transition: 1s;
}
.button-menu:hover{
  background-color: black;
  color: #00fffb;
}
.button-footer:hover{
  background-color: black;
  color: #00fffb;
}
.footer-rightside{
  margin-top: 20px;
  background-color: #0f1729;
  border: none;
}
.footer-rightside h5{
  font-size: 30px;
  color: white;
  opacity: 0.7;
}
.footer-rightside ol li{
  list-style-type: none;
}
.footer-rightside ol li a{
  text-decoration: none;
  color: #00D4FF;
  font-size: 20px;
}
.footer-rightside ol li a:hover{
  color: #00fffb;

}
.c-m{
    background-color: #0f1729;
}
.d-r{
  border: none;
}
body::-webkit-scrollbar{
  width:4px;
}

body::-webkit-scrollbar-thumb{
  background:black;
  border-radius:10px;
}

body::-webkit-scrollbar-track{
  background:white;
}
body{
  background-color: #0f172a;
}

/* Tutorials */
.content-hero-section .content-section{
  width: 100%;
  background-color: transparent;
  overflow-x: hidden;
  overflow-y: scroll;
  color: white;
  height: 500px;
 padding: 20px;
}
.code-box1{
  width: 100%;
  background-color: white;
  color: black;
  border-left: 3px solid green;
  padding: 10px;
  overflow-y: hidden;
}
.code-btn-1{
  margin-top: 10px;
  width: 200px;
  height: 30px;
  background-color: #00fffb;
  color: black;
  text-decoration: none;
  font-size: 25px;
  transition: 0.5s;

}
.code-btn-1:hover{
  color: #00fffb;
   background-color: black;

}
.code-btn-2{
  margin-top: 10px;
  width: 200px;
  height: 30px;
  background-color: #00fffb;
  color: black;
  text-decoration: none;
  font-size: 25px;
  transition: 0.5s;

}
.code-btn-2:hover{
  color: #00fffb;
   background-color: black;

}
.content-hero-section .content-section::-webkit-scrollbar{
  width:4px;
}

.content-hero-section .content-section::-webkit-scrollbar-thumb{
  background:black;
  border-radius:10px;
}

.content-hero-section .content-section::-webkit-scrollbar-track{
  background:white;
}

body{
  overflow-x: hidden;
}

/* quiz page */

.quiz-card {
  border: none;
  border-radius: 15px;
  box-shadow: 0 4px 15px #0F172A;
  }
/* about us page */

.about-headding{
  text-align: center;
  margin-top: 10px;
  padding: 20px;
  font-size: 60px;
  color: rgba(52, 211, 153, 1);
  font-weight: 700;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.about-subheadding{
   text-align: center;
  color: white;
  font-weight: 700;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 30px;
}
.about-praghar{
  color: white;
  font-size: 27px;
}
.color{
  color: rgba(52, 211, 153, 1);
}
.white{
  color: white;
}

/* contact page */
#form{
    width: 400px;
    margin-top: 10px;
    height: 50px;
    color: rgb(52, 211, 153);
    padding: 8px 15px;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    border-radius: 5px;
    outline: none;
}
.form-button{
  width: 150px;
}
.form-textarea{
   width: 400px;
    margin-top: 10px;
    height: 200px;
    color: rgb(52, 211, 153);
    padding: 8px 15px;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    border-radius: 5px;
    outline: none;
}

/* sign up page */
.auth-card {
 max-width: 450px;
 margin: 50px auto;
 border-top: 5px solid #35d499;
}