*{
    color: #ededed;
}
html{
    scroll-behavior: smooth;;
  }
.navbar-brand{
    
    margin-left: 140px;
}
.navbar{
    background-color: #1b1d1e;
    
}
.navbar a{
    color: #fff;
}
.navbar a:hover{
    color: #00abf0;
}
.navbar-nav{
    margin-left: 500px;   
}

.nav-item{
    margin-left: 20px;
}

.home{
    position: relative;
    width: 100%;
    justify-content: space-between;
    height:115vh;
    background: url(/img/SelfImg.jpg) no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    padding: 70px 10% 0;
}

.home-content{
    max-width: 600px;
    color: #ededed;
}
.home-content h3{
    font-size: 32px;
    font-weight: 700;
    opacity: 0;
    animation: slideBottom 1s ease forwards;
    animation-delay: .7s;
}
.home-content h3:nth-last-of-type(2){
    margin-bottom: 30px;
    opacity: 0;
    animation: slideTop 1s ease forwards;
    animation-delay: .7s;
}
.home-content h3 span{
    color: #00abf0;
}
.home-content h1{
    font-size: 56px;
    font-weight: 700;
    opacity: 0;
    animation: slideRight 1s ease forwards;
    animation-delay: 1s;
}
.home-content p{
    font-size: 20px;
    opacity: 0;
    animation: slideLeft 1s ease forwards;
    animation-delay: 1s;
}
.home-sci{
    margin-top: 50px;
}
.home-sci a{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 2px solid #0ed;
    border-radius: 50%;
    font-size: 20px;
    color: #0ed;
    text-decoration: none;
    margin: 30px 15px 30px 0;
    opacity: 0;
    animation: slideLeft 1s ease forwards;
    animation-delay: calc(.2s * var(--i));
}

.home-sci a:hover{
    background: #0ed;
    color: #081b29;
    box-shadow: 0 0 20px #0ed;
}
.Hire_me{
   
    border: 1px solid #df1818;
    border-radius: 3px;
    width: 100px;
    font-weight: bold;
    height: 40px;
    color: #df1818;
    background: linear-gradient(to left, transparent 50%, #00abf0 50%) right;
    background-size: 200%;
    transition: .5s ease-out;
    box-shadow: 0 0 20px #df1818;
}

.Hire_me:hover {
    background-position: left;
    box-shadow: 0 0 20px #00abf0;
    color: black;
    border: 1px solid #00abf0;
}
.Download_cv{
   
    border: 1px solid #00abf0;
    border-radius: 3px;
    margin-left: 30px;
    width: 150px;
    font-weight: bold;
    height: 40px;
    color: black;
    background: linear-gradient(to right, #00abf0 50%, transparent 50%) left;
    background-size: 200%;
    transition: .5s ease-out;
    box-shadow: 0 0 20px #00abf0;
}

.Download_cv:hover {
    background-position: right;
    box-shadow: 0 0 20px #df1818;
    color: black;
    border: 1px solid #df1818;
}
/* .visible{
    height: 700px;
    width: 700px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background-color: transparent;
    transition: 3s;
}
.visible:hover{
    background-color: rgb(55, 52, 52);
    opacity: .8;
} */
.About{
    height: 800px;
    display: flex;
    background-color: #1b1d1e;
}



.img_group{
    width: 40%;
    
}

.img_group img{
    width: 100%;
  height: auto;
   
    transition: all .5s ease-in-out;
}


.img_group .Boy{ 
    position: relative;
    bottom: 550px;
    filter: drop-shadow(0 0 20px black);
}
.img_group:hover .Boy{
    transform: translateX(-20px);
}

.img_group:hover .shape{
    transform: translateY(-20px);
    transition: 1s;
    filter: drop-shadow(0 0 20px #f09c00); /*this is used for img shadow*/
}

.about-text{
  width: 50%;
}
.about-text h2{
    font-size: 60px;
}

.about-text h2 span{
    color: #00abf0;
}
.about-text h4{
    font-size: 29px;
    font-weight: 600;
    color: #fff;
    line-height: 1.7;
    margin: 15px 0 30px;
}
.about-text p{
    color: aliceblue;
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 4rem;
}

/* .img_group img{
    transform: translateX(10%);
    transition:  1s linear, 1s linear;
}
.Boy{
    margin-left: -470px;
} */

.sevices{
   height: 800px;
   
   background-color: #1b1d1e;
}

.sevices h1 span{
    color: #00abf0;
}
.services-list{
  
}

.card{
    transition: all .5s ease-in-out;
    box-shadow: 1px 1px 20px #06ffe2;
}

.card-btn{
    margin-top: 48px;
}
.node-btn{
  margin-top: 28px;
}

.card .card-title{
    color: #fff;
}

.card .card-body a{
    background-color: #0ef;
    box-shadow: 0 0 5px #0ef,0 0 25px #06ffe2;
    border: none;
}

.card .card-body a:hover{
    box-shadow: 0px 0px 50px #ffde06;
    box-shadow: 0 0 50px cyan,0 0 5px cyan;
}

.card:hover{
    transform: translateY(-10px);
}

.sub-title{
    text-align: center;
    padding-top: 50px;
    font-size: 60px;
}

.ROW{
    padding-top: 100px;
}

.card h2{
    font-size: 25px;
    font-weight: 500;
}

/* skills part css */
.skills{
    height: 1000px;
    background: radial-gradient(#353c44, #222931);
}

.sub-title span{
  color: #00abf0;
}
.skill-text{
    font-size: 20px;
    color: #0ef;
    margin-top: 70px;
    filter: drop-shadow(0 0 25px #06ffe2);
    border-radius: 10px;
}


.fullpage-wrapper {
    width: 100%;
    height: 400px;
    
    display: flex;
  }
  .reactor-container {
    width: 300px;
    height: 300px;
    margin: auto;
    border: 1px dashed #888;
    position: relative;
    border-radius: 50%;
    background-color: #384c50;
    border: 1px solid rgb(18, 20, 20);
    box-shadow: 0px 0px 32px 8px rgb(18, 20, 20), 0px 0px 4px 1px rgb(18, 20, 20) inset;
  }
  .reactor-container-inner {
    height: 238px;
    width: 238px;
    background-color: rgb(22, 26, 27);;
    box-shadow: 0px 0px 4px 1px #52FEFE;
  }
  
  .circle {
    border-radius: 50%;
  }
  .abs-center {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
  .core-inner {
    width: 70px;
    height: 70px;
    border: 5px solid #1B4E5F;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 7px 5px #52FEFE, 0px 0px 10px 10px #52FEFE inset;
  }
  .core-outer {
    width: 120px;
    height: 120px;
    border: 1px solid #52FEFE;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 2px 1px #52FEFE, 0px 0px 10px 5px #52FEFE inset;
  }
  .core-wrapper {
    width: 180px;
    height: 180px;
    background-color: #073c4b;
    box-shadow: 0px 0px 5px 4px #52FEFE, 0px 0px 6px 2px #52FEFE inset;
  }
  .tunnel {
    width: 220px;
    height: 220px;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 5px 1px #52FEFE, 0px 0px 5px 4px #52FEFE inset;
  }
  .coil-container {
    position: relative;
    width: 100%;
    height: 100%;
    animation: 3s infinite linear reactor-anim;
  }
  .coil {
    position: absolute;
    width: 30px;
    height: 20px;
    top: calc(50% - 110px);
    left: calc(50% - 15px);
    transform-origin: 15px 110px;
    background-color:#073c4b;
    box-shadow: 0px 0px 5px #52FEFE inset;
  }
  .coil-1 {
    transform: rotate(0deg);
  }
  .coil-2 {
    transform: rotate(45deg);
  }
  .coil-3 {
    transform: rotate(90deg);
  }
  .coil-4 {
    transform: rotate(135deg);
  }
  .coil-5 {
    transform: rotate(180deg);
  }
  .coil-6 {
    transform: rotate(225deg);
  }
  .coil-7 {
    transform: rotate(270deg);
  }
  .coil-8 {
    transform: rotate(315deg);
  }

  /* progress bar*/

  

  .skill-bars ul li{
    text-decoration: none;
    list-style-type: none;
  }
  .bar{
    background-color: #081b29;
    width: 100%;
    border-radius:20px;
  }
  .value{
    background-color: #0ef;
    border-radius: 20px;
    box-shadow: 0 0 5px #0ef,0 0 25px #06ffe2;
  }
  .Para{
    padding-top: 15px;
  }
  .htmlfont{
    color: #ffbd06;
    font-size: 30px;
  }
  .cssfont{
    color: rgb(70, 81, 237);
    font-size: 30px;
  }
  .bootfont{
    color: rgb(147, 103, 242);
    font-size: 30px;
  }
  .pythonfont{
    color: rgb(222, 65, 246);
    font-size: 30px;
  }

  .javascriptfont{
    color: rgb(243, 227, 9);
    font-size: 30px;
  }

  .reactfont{
    font-size: 30px;
    color: rgb(17, 141, 190);
  }

  .nodefont{
    color: rgb(50, 222, 11);
    font-size: 30px;
  }

  .Htmlvalue{
    height:24px;width:90%;padding-left: 81%;
  }
  .Cssvalue{
    height:24px;width:70%;padding-left: 61%;
  }
  .Bootvalue{
    height:24px;width:80%;padding-left: 71%;
  }
  .Javavalue{
    height:24px;width:90%;padding-left: 81%;
  }
  .Reactvalue{
    height:24px;width:80%;padding-left: 71%;
  }
  .Pyvalue{
    height:24px;width:70%;padding-left: 61%;
  }
  .Nodevalue{
    height:24px;width:70%;padding-left: 61%;
  }
  /*project section */
  .project{
    background-color: #1b1d1e;
    height: 1200px;
  }
  .PROROW1{
    padding-top:50px ;
  }
  .PROROW2{
    padding-top: 150px;
  }

  .probox{
    height: 200px;
    width: 270px;
    border: 3px solid #0ed;
    border-radius: 10px;
    box-shadow: 1px 1px 20px #06ffe2;
    background-color: #081b29;
    text-align: center;
    overflow: hidden;
    
  }
  .probox .pro-text{
    height: 200px;

   position: relative;
   transition: .8s ease-in-out;
   background:linear-gradient(rgba(0,0,0,.4),#12f7ff);
   
   top:190px;
   opacity: 0;
    
  }
  .probox .pro-text h2{
    font-size: 25px;
    font-weight: 500;
  
    
  }
  .probox:hover .pro-text{
    opacity: 1;
    
    transform: translatey(-190px);
   
  }
  .pro1{
    height: 200px;
    width: 100%;
    
    background: url(./img/NewStockmarket.png) no-repeat;
    background-size: cover;
   
    
  }
  .pro2 {
    background: url(./img/currency_conerter.png);
    background-size: cover;
    height: 200px;
    width: 100%;
  }
  .pro3{
    background: url(./img/fruitshop.png);
    background-size: cover;
    height: 200px;
    width: 100%;
  }
  .pro4{
    background: url(./img/newstemplate.png);
    background-size: cover;
    height: 200px;
    width: 100%;
  }
  .pro5{
    background: url(./img/login\ withdashbord.png);
    background-size: cover;
    height: 200px;
    width: 100%;
  }
  .pro6{
    background: url(./img/dento.png);
    background-size: cover;
    height: 200px;
    width: 100%;
  }
  /*Contact section css*/

  .contact{
    background-color: #1b1d1e;
  }

/* <!-- B7E08E29AD28C3EDB7B0AF479C4B4FF0E375 --> */
  @keyframes reactor-anim {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  


@keyframes slideRight{
    0%{
        transform: translateX(-100px);
        opacity: 0;
    }

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

@keyframes slideLeft{
    0%{
        transform: translateX(100px);
        opacity: 0;
    }

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

@keyframes slideTop{
    0%{
        transform: translateY(100px);
        opacity: 0;
    }

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

@keyframes slideBottom{
    0%{
        transform: translateY(-100px);
        opacity: 0;
    }

    100%{
        transform: translateY(0px);
        opacity: 1;
    }
}
/* 
<div class="card h-100  m-auto bg-transparent">
            <div class="card-body">
              <h2 class="card-title">Responsive Web Design</h2>
              <p class="card-text">Crafting visually stunning and functionally impeccable websites that adapt seamlessly across devices. Our responsive web designs ensure a consistent and engaging user experience on desktops, tablets, and mobile devices.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
          </div>   */

@media only screen and (max-width: 600px) {
    .home{
        padding: 0px;
    }
    .home h3{
        font-size: 28px;
    }
    .home-content{
        margin-left: 30px;
    }
    .home-content h3:nth-last-of-type(2){
        margin-bottom: 0px;
    }
    
    .home h1{
        font-size: 40px;
    }
    .home-sci{
        margin-top: 0px;
    }
    .navbar-nav{
      margin-left: 5px;
    }
   .About{
    height: 1300px;
    display: block;
  }
  .img_group{
    width: 100%;
  }
  .about-text{
    width: 100%;
  }
  .img_group .Boy{
    margin-top: 90px;
  }
  .pro2{
    margin-top: 50px;
  }
  .pro3{
    margin-top: 50px;
  }
  .pro4{
    margin-top: 50px;
  }
  .pro5{
    margin-top: 50px;
  }
  .pro6{
    margin-top: 50px;
  }

  .project{
    height: 1900px;
  }
  
}



@media(320px <= width <= 375px){
  .navbar-nav{
    margin-left: 5px;
  }
  .navbar-brand{
    margin-left: 15px;
  }
  .About{
    height: 1700px;
  }
  .img_group .Boy{
    margin-top: 230px;
  }
  .img_group{
    height: 500px;
  }
  .sevices{
    height: 1650px;
  }
  .skills{
    height: 1800px;
  }
  .Htmlvalue{
    padding-left: 190px;
  }.Cssvalue{
    padding-left: 150px;
  }
  .Bootvalue{
    padding-left: 170px;
  }
  .Javavalue{
    padding-left: 190px;
  }
  .Reactvalue{
    padding-left: 170px;
  }
  .Pyvalue{
    padding-left: 150px;
  }
  .Nodevalue{
    padding-left: 150px;
  }
  .project{
   
    height: 1800px;
  }
  .card2{
    position: relative;
    top: 50px;
  }
  .card3{
    position: relative;
    top: 100px;
  }
  .card4{
    position: relative;
    top: 150px;
  }
  
  


}

@media(375px <= width <= 426px){
  .navbar-brand{
    margin-left: 15px;
  }
  .img_group{
    height: 400px;
  }
  .About{
    height: 1400px;
  }
  .sevices{
    height: 1550px;
  }
  .skills{
    height: 1800px;
  }
  .card2{
    position: relative;
    top: 50px;
  }
  .card3{
    position: relative;
    top: 100px;
  }
  .card4{
    position: relative;
    top: 150px;
  }
  
}

@media(426px <= width <= 768px){
  .navbar-nav{
    margin-left:45px;
  }
  .navbar-brand{
    margin-left: 65px;
  }
  .img_group .Boy{
    margin-top: 250px;
}
.About{
  height: 1000px;
}
.sevices{
  height: 1000px;
}
.skills{
  height: 1400px;
}
.pro3{
  margin-top: 50px;
}
.pro6{
  margin-top: 50px;
}
.project{
  height: 1400px;
}
.card3{
  position: relative;
  top: 50px;
}
.card4{
  position: relative;
  top: 50px;
}

}

@media(769px <= width <= 1024px){
  .home{
    width: 100%;
  }
  .navbar-nav{
    margin-left: 65px;
  }
  .navbar-brand{
    margin-left:87px;
  }
  .img_group .Boy{
      margin-top: 150px;
  }
  .About{
    height: 950px;
  }
  .skills{
    height: 1400px;
  }
  .pro3{
    margin-top: 50px;
  }
  .pro6{
    margin-top: 50px;
  }
  .project{
    height: 1400px;
  }
  .card3{
    position: relative;
    top: 50px;
  }
  .card4{
    position: relative;
    top: 50px;
  }
}

@media(320px <= width <= 1024px){
    .home{
        height: 700px;
    }
    .About{
        
    }
    .img_group{
      
    }
    .img
    img{
        display: none;
    }
}