*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    color: white;
    
    
}

html {
  scroll-behavior: smooth;
  
}
p{
    font-size: 1.2rem;
}
body{
    background-color: #111010;
    /* background-image: linear-gradient( 111.4deg,  rgba(7,7,9,1) 6.5%, rgba(27,24,113,1) 93.2% ); */
}
.strike{
    width: 100vw;
    min-height: 100vh;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows:5rem 1fr;
     /* background-color: black; */
    gap: 0rem;
    /* position: relative;  */
}
/* header  */

.header{
    /* margin-bottom: 100rem; */
    background-color:transparent;
    /* opacity: 1rem; */
    backdrop-filter: blur(10rem);
        height: 5rem;
         /* background-image: linear-gradient( 111.4deg,  rgba(7,7,9,1) 6.5%, rgba(27,24,113,1) 93.2% ); */
        /* background-color: black;  */
        /* background-image: radial-gradient( circle farthest-corner at -5.6% -6.8%,  rgba(103,49,145,1) 37.3%, rgba(50,0,129,1) 73.5% ); */
        display: flex;
        color: white;
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 4rem 0.5rem 4rem;
        position:fixed;
        top: 0px;
        left: 0px;
        right: 0px;
         box-shadow: 0 4px 6px -2px rgba(255, 255, 255, 0.6);
}
.brand{
    width: auto;
    height: 100%;
    
}
.brand_logo{
    /* min-width: 100px; */
    width: 7rem;
    height: 100%;
    zoom: 2;
}

          .nav_effect:hover {
            background-image: linear-gradient(to right, #232526 0%, #414345  51%, #232526  100%);
            text-decoration: none;
    box-shadow: 0px 0px 1rem #00CDAC;

          }
         
.nav_effect{
    width: auto;
    padding: 0.5rem;
    border-radius: 1rem;
    /* background-color:#181a1b; */
}
.nav_bar{
    /* min-width: 100px; */
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}
.Login{
display: flex;
    justify-content: center;
    align-items: center;

}
.heading>h1:hover{
    color: rgb(255, 255, 0);
}
.heading{

    display: flex;
}
.fa-bolt{
  color: yellow;
}

.Login{
    display: flex;
    flex-direction: column;
    padding: 1.4rem;
    border-radius: 50%;
    background-color:#27272a;
}







                                /* .content  */
.content{
    margin-top: 10rem;
    /* padding-top:30rem ; */
    /* background-image: url(./backgroudn.jpg); */
        /* background-image: url(./backgroudn.jpg); */
    /* background-repeat: no-repeat; */
    /* background-size: cover; */
    background-color:#111010;
    /* background-image: linear-gradient( 111.4deg,  rgba(7,7,9,1) 6.5%, rgba(27,24,113,1) 93.2% ); */
    width: 100%;
    height: 100%;
    /* background-image: linear-gradient( 111.4deg,  rgba(7,7,9,1) 6.5%, rgba(27,24,113,1) 93.2% );    */
    /* background-image: radial-gradient( circle farthest-corner at -5.6% -6.8%,  rgba(103,49,145,1) 37.3%, rgba(50,0,129,1) 73.5% ); */
    display: flex;
    flex-direction: column;
    /* justify-content: center;
    align-items: center; */
    gap: 8rem;
    padding: 2rem;
}
.slogan{
    text-align: left;
}
.slogan{
    color: white;
    font-size: 1.5rem;
}
.latest-course{
    display: flex;                                                          /* flex-wrap: wrap;  */
    box-shadow: 0px 0px 1rem #00CDAC;
    /* text-align: center; */
    align-self: center;
    display: flex;
    color: white;
    height:auto;
    width: 100%;
    /* width: auto;  */
    /* background-color: black;  */
        background-color:#27272a;
    padding: 2rem;
    border-radius: 1rem;
    border: 0.2rem solid black;
    gap: 2rem;
}
/* .latest-course:hover{
    transition: all;
    transition-duration: 0.5s;
    scale: 1.1;
} */
.providing{
    width: 70%;
    display: flex;
    flex-direction: column;
    /* justify-content: center;  */
    /* align-items: center;  */
    justify-content: space-around;
    gap: 2rem;
}
.providing>span{
    display: inline;
    font-size:3rem;
    /* color: red;  */


}
.red{
    
color: red;
}
.course{
    width: 70%;
    height: 90%;
    border-radius: 2rem ; 
    border-color: rgb(162, 80, 80);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    /* background-color:#27272a;  */
    /* background-color: black;  */
    background-color:#111010;
    border: 0.1rem solid grey;
    /* box-shadow: 0px 0px 1rem white; */
    box-shadow: 0px 0px 2rem #00CDAC;


}
.course>h4{
    font-size: 1.5rem;
}
.dsa{
    /* box-shadow: 0px 0px 2rem #00CDAC; */

    padding: 0rem;
    border-radius: 10px;
    width: 90%;
    height: 70%;
    
}


a{
text-decoration: none;

}
.latest-course:hover{
                border: 0.2rem solid #02AAB0;
        }
         .btn-grad {background-image: linear-gradient(to right, #02AAB0 0%, #00CDAC  51%, #02AAB0  100%)}
         .btn-grad {
            margin: 10px;
            padding: 15px 45px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background-size: 200% auto;
            color:white;
            font-weight: bold;            
            /* box-shadow: 0 0 20px #eee;  */
            border-radius: 10px;
            display: block;
          }

          .btn-grad:hover {

            background-position: right center; /* change the direction of the change here */
            color: white;
            font-weight: bold;
            text-decoration: none;
          }
          .listing {
            display: flex;
            flex-direction: column;
            gap: 1rem;
          }
          .fa-check{

            color:#02AAB0 ;
          }
li{
    font-size: 1.5rem;
     list-style: none;
}













.carding{
        /* background-color:transparent; */
    /* opacity: 1rem; */
    /* backdrop-filter: blur(10rem); */
    align-self: center;
    width: 90%;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    background-color: #232526;
    gap: 5rem;
    border-radius: 2rem ;
    box-shadow: 0px 0px 2rem #00CDAC;

}
.cards{
    /* margin: 1rem; */
    padding: 2rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap:5rem;


}
.box{
    padding: 2rem;
    border-radius: 1rem;
    width: 25rem;
    height: auto;
    background-color:#111010;
    box-shadow: 0px 0px 1rem grey;


}
.lec{
    font-size: 0.8rem;
    width: 10rem;
    height: auto;
    padding: 0.5rem;
}
/* .box:hover{
        transform: scale(1.02);
} */
.text{
    margin: 1rem;
    gap: 1rem;
}
.text>h2{
    font-size: 2.5rem;
}
.text>p{
    font-size: 1.2rem;
}
.carding_head>h2{
    font-size: 2.5rem;
}
.carding_head>p{
    font-size: 1.2rem;
}




.buttons{
    width:auto;
    height:auto;
    display: flex;
}
/* cards  */
.card1{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}
.hld{
    border-radius: 0.5rem;
    width: 100%;
    height: 70%;
    box-shadow: 0px 0px 2rem #00CDAC;

}
.detail{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.instructor{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.rohit{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    border-radius: 1rem;
    padding: 2rem;
    margin-top: 3rem;
    box-shadow: 0px 0px 2rem #00CDAC;
    background-color: #27272a;
    width: 40%;

}
.horizontal{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6rem;
}
.rohit-img>.img1
{
    width: 15rem;
    border-radius: 50%;
}
.name-about{
    gap: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* box-shadow: 0px 0px 2rem #00CDAC; */
    
}
.instructor>h2{
    font-size: 3em;
    margin-top: 2rem;
    margin-bottom: 3rem;
}
.borbox{
    box-shadow: 0px 0px 2rem white;

}
.borbox:hover{
    box-shadow: 0px 0px 2rem #00CDAC;

}

.name>h3{
    font-size: 2rem;
    color: #00CDAC;
}









.contact-form{
    padding: 1rem;
        display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;

    /* opacity: 0.5; */
}
.form{
        background-image: url(./backgroudn.jpg);
    background-size: cover;      /* makes image cover entire container */
    background-position: center; /* centers the image */
    background-repeat: no-repeat;

   
    width: 60%;
    padding: 2rem;
    margin-top: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 2rem;
    background-color: #27272a;
    border-radius: 1rem;
    /* width: 70%; */
    box-shadow: inset 1px 1px 1rem #00CDAC;
    /* box-shadow:  1px 1px 1rem white;  */
    height: auto;

}
.div1{
    width: 100%;
    padding: 1rem;
    display: flex;
    /* justify-content: space-between; */
    gap: 1rem;
    align-items: center;
}
.div11{
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
    /* margin: 51px; */
    width: 40%;
}
.div12{
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
    /* margin: 51px; */
    width: 40%;
}
.ip{
    height: 2rem;
    border-radius: 1rem;
    padding: 1rem;
    width: 90%;
        border: none;
           outline: none; 
           color: black;
           
    /* width: 1lvb; */
}
.ip:hover{
    
    box-shadow: 0px 0px 1rem #00CDAC;
}
.form>button{
    
    color: black;
}

textarea{
    padding: 1rem;
    width: 10rem;
    background-color: white;
    color: black;
    border-radius: 0.5rem;
    border: none;
    outline :none;
    height: 10rem;
    width: 30rem;
}
textarea:hover{
    
    box-shadow: 0px 0px 1rem #00CDAC;
}
.form_button{
    color: #00CDAC;

    border-radius: 5rem;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1rem;
    width: 10rem;
    height: 2rem;
    outline: none; 
    box-shadow: 0px 0px 1rem #00CDAC;
 
color:none;
}


footer{
    margin-top: 5rem;
    background-color: #111010;
     color: white; 
     text-align: center;
      padding: 20px;
       font-size: 2rem;
}



@media (max-width:1150px){
    .content{
        align-items: center;
    }
    .heading>h1{
        width: 90%;
        font-size: 4rem;
    }
    .latest-course{
        /* width: 100%; */
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
    }
    .providing{
        justify-content: center;
        align-items: center;
    }
    .course{
        width: 100%;
    }
    .rohit{
        width: 60%;
    }
    .horizontal{
        width: 100%;
        flex-direction: column;
    }
    .form{
        width: 100%;
    }
.img1{
    width: 300px; 
    height: 200px;
}
}


@media (max-width:800px){
    .heading{
        display: flex;
        align-items: center;
        justify-content: center;
    }
        .heading>h1{
        text-align: center;
        width: 90%;
        font-size: 2.5rem;
    }
.dsa{
    padding: 0rem;
    width: 100%;
}
.content{
    padding: 0.4rem;
}
.course{
    margin-top: 1rem;
    padding: 1rem;
    width: 80%;

}
span{
    display: block;
    font-size: 2rem;
}
.listing{
    display: flex;
    gap: 2rem;
}
.latest-course{
    font-size: 0.3rem;
    width: 80%;
    padding: 0.8rem;
}
.btn-grad{
    display: flex;
    justify-content: center;
    width: 7rem;
    font-size: 0.8rem;
}
}
@media (max-width:1000px){
    .brand_logo{
        width:4rem;
    }
    .header{
        flex-direction: column;
        width: auto;
        height: 7rem;
    }
.Login {
    width: 3rem;
    height: 2rem;
    position: fixed;
    top: 0.8rem;
    right: 3rem;
}
.nav_bar{
    gap: 1rem;
    font-size: 1.3rem;
}
.fa-bolt{
    font-size: 2rem;
}
}
@media (max-width:650px){
.latest-course{
    /* width: 100vw */
    padding: 1rem;
    /* margin: 1rem; */
}
.course{
    width: 90%;
}
.Finally{
    font-size:2rem;
}
.listing>li{
    font-size: 1.2rem;
}
.heading>h1{
    font-size: 1.6rem;
    /* text-align: left; */
    align-self: flex-start;
}

}
@media (max-width:600px){
    .heading>h2{
        font-size: 1rem;
    }
    .hld{
        width: 20rem;
    }
    .dsa{
        width: 25rem;
    }
    .nav_effect{
        font-size: 1.2rem;
    }
    .brand{
        width:50%;
    }
    .Login nav_effect{
        right:2rem;
    }
    .form{
        width:99%;
    }
    .div11,.div12{
        width: 100%;
    }
    .div1{
        flex-direction: column;
        justify-content: start;
        align-items: start;
    }
    .ip>input{
        width: 100%;
    }
    #mess{
        width: 90%;
    }
    .form_button{
        width: 6rem;
        padding: 1rem;
        /* color: red; */
    }
.rohit-img>.img1{
    width:  150px;
    height:150px;
}
.name>h3{
    font-size: 1.5rem;
}
.carding>.rohit{
    width: 90%;
}
.name-about>p{
    font-size: 1.2rem;
}
.cards{
    width: 100%;
    padding: 0rem;
    margin: 0px;
}
.btn-grad{
    font-size: 0.6rem;
    width: 5rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.carding{
    width: 90%;
    padding: 1.5rem;
}
.instructor>h2{
    font-size: 2rem;
}
.card1{
    padding: 1rem;
    width: 95%;
}
.carding{
    padding: 1rem;
    width:95%;
}
.instructor>p{
    font-size: 1.2rem;
}
.detail>p{
    font-size: 1rem;
}
.latest-course{
    width: 100%;
    padding: 0.8rem;
}
.course{
    width: 100%;
}
.brand_logo{
    height:1.5rem;
}
.Login{

    width: 0.5rem;
    height: 0.5rem;
    background-color: #414345;
}
.course>h4{
    font-size: 1.3rem;

}
.nav_effect{
    border-radius: 1rem;
    font-size: 0.7rem;
}
.hld{
    width: 18rem;
}
}
@media(max-width:320px){
    .course>h4{
    font-size: 1rem;

}
.content{
    margin-top: 13rem;
}
    .header{
        gap: 1rem;
        padding: 1rem;
        height: 17rem;
        position: static;
        background-color: black;
    }
    .nav_bar{
        flex-direction: column;
        /* height: 20rem; */
    }
    .brand{
        height: auto;
    }
    .btn-grad{
        width: 4rem;
        height: 2rem;
        font-size: 0.4rem;
    }
    .nav_bar{
        gap: 0.3rem;
    }
    .nav_effect{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 5rem;
        background-color: #414345;
        box-shadow:inset 0px 0px 0.5rem #00CDAC;
    }
    .Login{
        width: 1rem;
        height: 1rem;
        
    }

}


    .nav_effect{
        /* padding: 0.5rem; */
        background-color: #414345;
        box-shadow: 0px 0px 0.4rem #00CDAC;
        border-radius: 1rem;
        
    }
    .nav_effect:hover{
        color: #02AAB0;
        transform: scale(1.1);

    }
    .brand_logo:hover{
        transform: scale(1.2);
    }







@media (min-width: 1000px) and (max-width: 2000px) {
   .latest-course{
    width: 90%;
}
.course{
    width: 80%;
}
.Finally{
    font-size: 3rem;
}
}
@media (min-width: 650px) and (max-width: 1000px) {
    .Finally{
    font-size: 3rem;
}
}























      /* animation  */

    .heading > h1 {
  transition: transform 0.5s ease; /* smooth rotation */
}

.header{
    z-index: 999;
}
.heading>h1{
    /* z-index: -1 ; */
    animation-name: tilt;
    animation-timing-function: linear;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-iteration-count: infinite;

}
@keyframes tilt{
    from{
        transform: translatey(0px);
    }
    to{
        transform: translatey(20px);
    }
}
/* .dsa{
    animation-name: tilt;
    animation-timing-function: linear;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
} */
@keyframes flip{
    from{
        transform: rotatey(0deg);
    }
    to{
        transform: rotatey(180deg);
    }
}
.course:hover,.providing:hover,button:hover{
    transform: scale(1.01);
    transition: transform 0.2s ease-in-out;

}
.heading>h1,.text>h2{
    text-shadow:0px 0px 1rem #00CDAC;

}
.heading>h1:hover, .text>h2:hover{
        font-size: 3.1rem;
        color: #00CDAC;
}
.red{
    animation: blink;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}
@keyframes blink{
    from{
       opacity: 1;
    }
    to{
       opacity: 0;
    }
}
.yellow {
color: yellow;
}



.box:hover,.rohit:hover{
    transform: scale(1.1);
    transition:transform  0.5s;
    box-shadow:0px 0px 1rem #00CDAC;
}
/* .rohit:hover{
    animation: spin;
    animation-duration: 0.2s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
@keyframes spin {
    from{   
        transform: scale(1);

    }to{
        transform: scale(1.05);
    }
    
} */
 .work{
    text-shadow:0px 0px 1rem #00CDAC;
 }
 .instructor>h2{
    text-shadow:0px 0px 1rem #00CDAC;


 }
 .instructor>h2:hover{
    color: #00CDAC;
    text-shadow:0px 0px 1rem #00CDAC;

    transform: scale(1.1);

 }
 label:hover{
    color: #00CDAC;
 }
 .contact-form>h2{
    font-size: 4rem;
    
    text-shadow:0px 0px 1rem #00CDAC;

 }
 @media(max-width:700px){
     .contact-form>h2{
    font-size: 2rem;
    
    text-shadow:0px 0px 1rem #00CDAC;

 }
 .contact-form>h2{
    text-shadow:0px 0px 1rem #00CDAC;

 }
 }
 .latest-course{
    animation: updown;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
 }
 @keyframes updown{
    from{
        transform:translatey(0px);
    }
    to{
        transform:translatey(2px);
    }
    
 }
 .carding_head>h2{
    text-shadow:0px 0px 1rem #00CDAC;
    
 }
    /* text-shadow:0px 0px 1rem #00CDAC; */
 .carding_head>h2:hover{
    transform: scale(1.05);
    

 }




.upper{
    margin-top: 10rem;
}

.rohit{
        width: 70%;
        padding: 1rem;
    }




.form_button{
    box-shadow:0px 0px 1rem #00CDAC;
    /* background-color: #00CDAC; */
    text-decoration: none;
    color: white;
}
.form>button {
    border: none;
    color:#232526;
}


@media(max-width:520px){

    .carding{
        width: 90%;
    }
    .latest-course{
        width: 90%;
    }
    .dsa{
        width: 14rem;
    }
    .hld{
        width: 15rem;
    }
    .course{
        width: 90%;
    }
}