*{
   font-family: 'Lumios brush ragular';
   font-weight: normal;
   font-style: italic;
}
.logo span{
   color: wheat;
   font-size: 1.5rem;
   font-weight: 700;
}
.logo img{
   width: 100px;
   height: 85px;
   padding-top: 15px;
}
.nav-head{
   display: flex;
   justify-content: space-evenly;
   /* text-align: center; */
   align-items: center;
}
.d-btn{
   background-color: #f73152;
   color: #ededed;
   border: 1px solid rgb(71, 56, 56);
   box-shadow: 1px 1px 5px rgb(230, 230, 233) inset;
   border-radius: 4px;
   border-top-left-radius: 15px;
   border-bottom-right-radius: 15px;
   text-decoration: none;
   padding: 5px 7px 5px 7px;
}

#header{
    /* background-color: rgb(58, 53, 53); */
    /* height: 380px; */
   height: 600px;
    background-image: linear-gradient(300deg,#e74f20 0%,#7324f3 74%);
    /* background-image: linear-gradient(50deg, #2857a4 0%, #403066 74%); */
    /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='380' preserveAspectRatio='none' viewBox='0 0 1440 380'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1041%26quot%3b)' fill='none'%3e%3crect width='1440' height='380' x='0' y='0' fill='rgba(4%2c 33%2c 64%2c 1)'%3e%3c/rect%3e%3cpath d='M1336 355L1335 614' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1042%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1019 360L1018 145' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1042%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M765 261L764 411' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1042%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M2 194L1 87' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1043%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M197 189L196 28' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1042%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M83 61L82 216' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1042%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1104 71L1103 -91' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1042%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M907 327L906 518' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1043%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M602 36L601 -248' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1042%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1039 80L1038 -123' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1043%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1242 124L1241 -5' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1042%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M985 235L984 371' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1042%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M951 75L950 -21' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1042%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M642 158L641 -125' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1042%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1103 145L1102 314' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1043%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1105 280L1104 51' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1042%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M321 182L320 351' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1043%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M450 259L449 510' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1042%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M754 356L753 192' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1043%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M748 85L747 188' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1043%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M538 159L537 328' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1042%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M834 158L833 296' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1042%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M796 39L795 138' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1042%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M412 160L411 374' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1043%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M29 54L28 213' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1043%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M905 118L904 260' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1043%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M16 360L15 106' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1043%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M865 46L864 173' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1043%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M349 297L348 407' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1042%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1255 246L1254 26' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1043%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M480 260L479 390' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1043%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M366 143L365 256' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1042%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M628 350L627 156' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1042%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1144 354L1143 479' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1042%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M517 345L516 74' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1043%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1368 264L1367 399' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1042%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1041'%3e%3crect width='1440' height='380' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='0%25' y1='0%25' x2='0%25' y2='100%25' id='SvgjsLinearGradient1042'%3e%3cstop stop-color='rgba(7%2c 65%2c 128%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(7%2c 65%2c 128%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='0%25' y1='100%25' x2='0%25' y2='0%25' id='SvgjsLinearGradient1043'%3e%3cstop stop-color='rgba(7%2c 65%2c 128%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(7%2c 65%2c 128%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e"); */
}
.gradient-background{
   /* background-image: linear-gradient(300deg,#212122 90%,#325461 100%); */
   background-size: 180% 180%;
   animation: gradient-animation 8s ease infinite;
}
@keyframes gradient-animation{
   0%{
      background-position: 0% 50%;
   }
   50%{
      background-position: 100% 50%;
   }
   100%{
      background-position: 0% 50%;
   }
}

#nav-bar{
    display: flex;
    justify-content: center;
    gap: 30px;
    padding-top: 40px;
    padding-bottom: 30px;
    color: rgb(237, 237, 241);
    font-weight: bold;
    
}
.nav-link{
    text-decoration: none;

}

#about{
   text-align: center;
   padding-top: 120px;
}
.image-main img{
   width: 220px;
   padding-bottom: 20px;
   border-top-left-radius: 50%;
   border-bottom-left-radius: 20%;
   border-top-right-radius: 20%;
   border-bottom-right-radius: 50%;
}
.your-style {
   font-family: 'Lumios brush ragular';
   font-weight: normal;
   font-style: italic;
}
.intro h1{
   color: rgb(245, 242, 86);
   transform: rotate(-10deg);
}
#social-ican{
   padding-right: 40px;
   padding-bottom: 50px;
}
#social-ican a{
   padding-left: 20px;
   color: rgb(230, 219, 71);

}


/* objective section** */
.objective{
   margin: 50px 0 50px 0;
}
.objective h3{
   text-align: center;
   color: rgb(90, 90, 133);
   font-size: 2.5rem;
}
.objective p{
   text-align: center;
   margin-bottom: 50px;
}
.obj-text{
   text-align: center;
   margin-left: 14%;
   width: 70%;
}
.obj-text p{
   font-weight: 700;
   color: #094361;
}


/* **skill section** */
.skills{
   margin-bottom: 40px;
}
.skill-head h3{
   color: rgb(90, 90, 133);
   font-size: 2.5rem;
   text-align: center;
   padding-top: 40px;
}
.skill-head p{
   text-align: center;
   margin-bottom: 70px;
}
.skill-main{
   width: 100%;
   display: grid;
   grid-template-columns: repeat(2,1fr);
   grid-row-gap: 30px;
   grid-column-gap: 50px;
}
.skill-main h3{
   text-align: center;
}

/* Technical skill part */
.skill-left .skill-bar .info{
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 0 20px;
}
.skill-left h3{
   color: #094361;
}
.skill-right h3{
   color: #094361;
}
.info{
   display: flex;
   justify-content:center;
   align-items: center;
   width: 90%;
   gap: 10px;

}
.skill-left h3{
   padding-bottom: 30px;
}
.info p{
   padding-top: 25px;
}

.skill-left .skill-bar .bar{
   width: 70%;
   height: 15px;
   background-color: rgb(224, 213, 213);
   border-radius: 25px;
   margin-top: 10px;
   position: relative;
}
.skill-bar .bar span{
   height:100%;
   width: 50%;
   position: absolute;
   left: 0;
   background: rgb(201, 197, 197);
   border-radius: 25px;
   box-shadow: red;
}
.info .bar .html{
   background: rgb(98, 78, 189);
   animation: html 2s;
   width: 80%;
}
.html-text i{
   color: rgb(255, 87, 51);
}
.css-text i{
   color: rgb(12, 106, 184);
}
.javascript-text i{
   color: rgb(240, 219, 79);
}
.info .bar .css{
   background: rgb(236, 137, 8);
   animation: css 3s;
   width: 70%;
}
.info .bar .javascript{
   background: rgb(230, 14, 79);
   animation: javascript 4s;
   width: 50%;
}

@keyframes html{
   0% {
      width: 0;
   }
   100%{
      width: 80%;
   }
}
@keyframes css{
   0% {
      width: 0;
   }
   100%{
      width: 70%;
   }
}
@keyframes javascript{
   0% {
      width: 0;
   }
   100%{
      width: 50%;
   }
}

/* Additional skill part */
.circle-main{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   padding-top: 30px;
}
.circle{
   display: flex;
   width: 200px;
   padding-bottom: 40px;
   border-radius: 8px;
   /* background-color: rgb(119, 108, 108); */
   flex-direction: column;
   align-items: center;
}
.circular-bar{
   position: relative;
   height: 100px;
   width: 100px;
   border-radius: 50%;
   background: conic-gradient(#7324f3 3.6deg, #ededed 0deg);
   display: flex;
   align-items: center;
   justify-content: center;
}
.circular-bar::before{
   content: "";
   position: absolute;
   height: 80px;
   width: 80px;
   border-radius: 50%;
   background-color: white;
}
.process-bar{
   position: relative;
   font-weight: 400;
   font-size: 15px;
}
.process-text{
   font-size: 15px;
   padding-top: 5px;
   font-weight: 550;
}










/* PROJECT SECTION */
.portfolio-head{
    text-align: center;
 padding-top: 40px;
 color: rgb(90, 90, 133);
 /* background-image: linear-gradient(50deg,#212122 0%,#325461 74%); */
 }
 #portfolio-container{
    box-sizing: border-box;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 0px 50px;
 }
 .portfolio-img-container{
    max-width: 300px;
     overflow: hidden;
     margin: 10px;
     background-size: cover;
     background-repeat: no-repeat;
     position: relative;
 }
 .portfolio-img-container img{
    width: 100%;
    height: 100%;
 }
 .portfolio-details{
    transition: all 0.5s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    color: transparent;
    padding: 20px;
    text-align: center;
 }
 .portfolio-details a{
    text-decoration: none;
 }
 .portfolio-details a:hover{
    color: #15678d;
 }
 .portfolio-details h3{
    height: 150px;
    font-weight: 500;
    padding: 10px;
    /* color: transparent; */
    opacity: 0;
 }
 .portfolio-details h3:hover{
    opacity: 1;
    transition: all 0.3s ease-in-out;
 }
 .portfolio-details p{
    height: 150px;
    font-weight: 500;
    padding: 10px;
 }
 .portfolio-img-container:hover{
    box-shadow: 0 0 20px #74ADC8;
 }
 .portfolio-img-container:hover .portfolio-details {
    background-color: #80808078;
    color: rgb(73, 47, 47);
 }
 
/* service section**** */
.services{
   margin: 40px 0 70px 0;
}
.service-text{
   text-align: center;
   
}

.service-text h4{
   color: rgb(90, 90, 133);
   font-size: 2.5rem;
}
.service-main{
   margin-top: 75px;
   margin-left: 80px;
   padding-left: 90px;
   width: 90%;
   display: grid;
   grid-template-columns: repeat(3,0.3fr);
   grid-row-gap: 30px;
   grid-column-gap: 50px;
   
}

.service-box{
   /* background-color: red; */
   width: 180px;
   height: 180px;
   border-radius: 100%;
   border: 1px solid rgb(90, 90, 133);
   margin-left: 60px;
}
.service-box img{
   width: 70px;
   height: 70px;
   margin: 55px;
   /* transition: transform 0.3 ease-in-out; */
}
.service-box:hover{
  transform: scale(1.1);
  transition: all 0.3 ease-in-out;
}
.service-main-text{
   width: 100%;
}
.service-main-text h4{
   text-align: center;
   padding: 30px 0 20px 0;
   font-style: italic;
   color: #094361;
}
.service-main-text p{
   text-align: start;
   font-style: italic;
   color: #49575e;
}



/* CONTACT SECTION */

#contact{
    color: white;
    /* background-image: linear-gradient(50deg,#212122 0%,#325461 74%); */
    background-image: linear-gradient(300deg,#e74f20 0%,#7324f3 74%);
    /* background-image: linear-gradient(50deg, #2857a4 0%, #403066 74%); */
    height: 650px;
 
 }
 .contact-head{
    text-align: center;
    padding-top: 40px;
 }
 .contact-content{
    display: flex;
    justify-content: space-evenly;
    /* flex-wrap: wrap; */
    max-width: 90%;
    height: 80vh;
    padding-top: 50px;
 
 }
 .contact-form{
    width: 50%;
    text-align: center;
    
 }
 .contact-input{
 padding: 50px;
 }
 .data{
    width: 400px;
    background-color: transparent;
    border: none;
    font-size: 18px;
    margin-bottom: 30px;
    border-bottom: 2px solid white;
    
 }
 .data-btn{
    background-color: transparent;
    color: white;
    margin-top: 10px;
    font-size: 18px;
    margin-bottom: 10px;
    border: 2px solid white;
    padding: 10px 20px 10px 20px;
 }
 .contact-info{
    width: 40%;
    padding: 40px;
    font-size: smaller;
    line-height: 2;
 }