@import url('https://fonts.googleapis.com/css2?family=Itim&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

*{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "Poppins",sans-serif;
}
:root{
     --body-color: #202425;
     --color-white : rgba(250,250,250);
     --text-color-second: rgba(38,37,37);
     --first-color: rgba(110,87,224);
     --first-shadow: rgba(0, 0, 0, 0.1);
     --box-color: #fff;
     --nav-color: #262425;
     
     
     --nav-icon: #fff;
     --logo-color: #fff;
     
     
     --text-color: #fff;
     --color-white: #fff;
     

     
     --icon-color: #8749f2;
     --mode-color: #fff;
}

body{
     background: var(--body-color);
}

body.dark{
     --body-color : rgba(250,250,250);
     --box-color: #fff;

     --nav-color: #fff;
     --color-white: #242526;
     --text-color: #444444;

     --nav-icon: #000;
     --logo-color: #000;

     --icon-color: #242526;
     --mode-color: #ccc;
     
}
.container{
     width: 100%;
     position: relative;
}

html{
     scroll-behavior: smooth;
}

nav{
     position: fixed;
     display: flex;
     justify-content: space-between;
     width: 100%;
     height: 90px;
     line-height: 100px;
     background: var(--nav-color);
     padding-inline: 10VH;
     transition: 0.3s;
     z-index: 100;
}
.nav-logo{
     position: relative;
}
.nav-name{
     font-size: 30px;
     font-weight: 600;
     color: var(--logo-color);
}
.nav-menu,
.nav_menu_list{
     display: flex;
     column-gap: -30px;
}
.nav-menu .nav_list{
     list-style: none;
     position: relative;
}
.nav-link{
     text-decoration: none;
     color: var(--text-color);
     font-weight: 500;
     padding-inline: 15px;
     margin-inline: 20px;
}
.nav-link:hover{
     color: #8749f2;
     font-size: larger;
}
.nav-menu-btn{
     display: none;
}
.nav-menu-btn i {
     font-size: 35px;
     cursor: pointer;
     color: var(--nav-icon);
}

.mode{
     display: flex;
     align-items: center;
     margin-right: -2%;
}
.moon-sun{
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     height: 40px;
     width: 40px;
     border-radius: 30px;
     cursor: pointer;
     background: var(--mode-color);
}
.moon-sun :is(#moon,#sun){
     position: absolute;
     transition: -2s ease-in-out;
}
#sun {
     opacity: 0;
}
body.dark #sun{
    opacity: 1;
}
body.dark #moon{
     opacity: 0;
 }
 .wrapper{
     padding-inline: 10vh;
 }
 .feature-box{
     position: relative;
     display: flex;
     height: 100vh;
     min-height: 700px;
 }
 .feature-text{
     position: relative;
     display: flex;
     justify-content: center;
     min-height: 100vh;
     flex-direction: column;
     width: 50%;
     padding-left: 20px;
     margin-top: 2%;
 }
 .feature-text .hello{
     font-size: 50px;
     font-weight: 500;
     margin-bottom: -12px;
     color: var(--text-color);
}
.feature-name{
     font-size: 50px;
     font-weight: 600;
     margin-block: 20px;
     color: #8749f2;
     margin-bottom: 10px;
}
.typedText{
     font-family: sans-serif;
     color: #8749f2;
     font-size: 60px;
     font-weight: 600;
     text-transform: capitalize;
}
.text-info{
     font-size: 16px;
     margin-bottom: 30px;
     color: var(--text-color);
}
.text-btn{
     display: flex;
     border-radius: 8px;
     cursor: pointer;
     gap: 20px;
}
.text-btn .btn{
     border: none;
     color: #f4f4f4;
     box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
}
.btn{
     text-decoration: none;
     font-size: 15px;
     padding: 10px;
     cursor: pointer;
     border-radius: 8px;
     background: #8749f2;
     transition: all 0.5s ease;
}
.dev{
     color: #8749f2;
}
.btn i{
     margin-right: 10px;
}
i{
     font-size: 16px;
}
.social_icons{
     display: flex;
     margin-top: 30px;
     
     gap: 32px;
}
 .social_icons .icon{
     display: flex;
     justify-content: center;
     text-decoration: none;
     align-items: center;
     width: 40px;
     height: 40px;
     color: var(--icon-color);
     border-radius: 50%;
     box-shadow: 0px 1px 5px 3px #8749f2;
     cursor: pointer;
 }
 .icon_circle{
     position: absolute;
     transform: transform(-50px -50px);
     width: 40px;
     height: 40px;
     border-radius: 50px;
     animation: iconSlide 4s infinite alternate;   
 }
 @keyframes iconSlide {
     25%{
          border: 2px solid #e6d12e;
          left: 0px;
     }
     50%{
          border: 2px solid #c40101;
          left: 70px;
     }
     75%{
          border: 2px solid #8749f2;
          left: 145px;
     }
     100%{
          border: 2px solid #47ea15;
          left: 216px;
     }
 }
 .social_icons:hover .icon_circle{
     animation-play-state: paused;
     cursor: pointer;
 }
 .feature-image{
     display: flex;
     justify-content: right;
     align-items: center;
     min-height: 80vh;
     width: 100%;
 }
 .image{
     margin-top: 30%;
     width: 500px;
     height: 900px;
     overflow: hidden;
     animation: imgFloat 5s ease-in-out infinite;
 }
 .image img{
     width: 500px;
     height: 700px;
     object-fit: cover;
 }
 @keyframes imgFloat {
     50%{
          transform: rotateZ(10deg);
     }
 }
 .section{
     padding-block: 5em;
 }
 .row{
     display: flex;
     justify-content: space-between;
     width: 100%;
     gap: 50px;
 }
 .col{
     display: flex;
     width: 50%;
 }
.top-header{
     text-align: center;
     margin-bottom: 5em;
}
.top-header h1{
     font-weight: 600;
     color: var(--text-color);
     margin-bottom: 10px;
}
.about-info{
     position: relative;
     display: flex;
     align-items: center;
     flex-direction: column;
     padding-block: 45px 45px;
     padding-inline: 35px;
     border: 2px solid #fff;
     background: transparent;
     box-shadow: 1px 8px 10px 2px var(--first-shadow);
     border-radius: 20px;
}
.about-me *{
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     -webkit-transition: all 0.25s ease;
     transition: all 0.25s ease;
}
.about-me figcaption{
     width: 100%;
     padding: 25px;
     position: relative;
}
.about-me .profile{
    border-radius: 50%;
    position: absolute;
    bottom: 100%;
    left: 20px;
    z-index: 1;
    background-color: #fff;
    max-width: 90px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
.about-me h2{
     color: var(--text-color);
}
.about-me p{
     margin-top: 10px;
     color: var(--text-color);
}
.about-info .about-me-btn{
     text-decoration: none;
     font-size: 15px;
     padding: 10px 20px;
     cursor: pointer;
     border: none;
     border-radius: 20px;
     background: #8749f2;
     color: #fff;
     margin-top: 20px;
     font-weight: 500;
     transition: all 0.5s ease;
}
.skill{
     position: relative;
     max-width: 600px;
     width: 100%;
     background: transparent;
     box-shadow: 1px 8px 10px 2px var(--first-shadow);
     padding: 10px 20px;
     border: 2px solid #fff;
     border-radius: 25px;
}
.skill .skill-box{
     width: 100%;
     margin: 25px 0;
}
.skill-box .title{
     display: block;
     font-size: 14px;
     font-weight: 600;
     color: var(--text-color);
}
.skill-box .skill-bar{
     height: 8px;
     width: 100%;
     border-radius: 6px;
     margin-top: 6px;
     background: rgba(0, 0, 0, 0.1);
}
.skill-box .skill-per{
     position: relative;
     display: block;
     height: 100%;
     width: 90%;
     border-radius: 6px;
     background: #8749f2;
     animation: progress 0.4s ease-in-out forwards;
     opacity: 0;
}
.skill-per.html{
     animation-delay: 0.1s;
     width: 95%;
}
.skill-per.css{
     animation-delay: 0.1s;
     width: 90%;
}
.skill-per.javascript{
     animation-delay: 0.1s;
     width: 87%;
}
.skill-per.node{
     animation-delay: 0.1s;
     width: 80%;
}
.skill-per.react{
     animation-delay: 0.1s;
     width: 55%;
}
.skill-per.mysql{
     animation-delay: 0.1s;
     width: 86%;
}
@keyframes progress{
     0%{
          width: 0;
          opacity: 1;
     }
     100%{
          opacity: 1;
     }
}
.skill-per .tooltip{
     position: absolute;
     right: -14px;
     top: -20px;
     font-size: 9px;
     color: #fff;
     padding: 2px 6px;
     border-radius: 20px;
     background: #8749f2;
     z-index: 1;
}
.project-container{
     display: flex;
     width: 100%;
     justify-content: space-between;
     gap: 20px;
     flex-wrap: wrap;
}
.project-box{
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     width: 30%;
     height: 250px;
     background: transparent;
     border: 2px solid #fff;
     border-radius: 20px;
     box-shadow: 1px 8px 10px 2px var(--first-shadow);
     overflow: hidden;
     cursor: pointer;
}
.project-box > i{
     font-size: 50px;
     color: #8749f2;
     margin-bottom: 25px;
}
.project-box label{
     font-size: 15px;
     color: var(--text-color);
}
.project-box::after,
.contact-info::after{
     content: "";
     position: absolute;
     bottom: -100%;
     background: #8749f2;
     width: 100%;
     height: 100%;
     transition: 0.4s;
     z-index: 0.1;
}
.project-box:hover.project-box::after,
.contact-info:hover.contact-info::after{
     bottom: 0;
}
.project-box:hover.project-box i,
.project-box:hover.project-box > h3,
.project-box:hover.project-box >label {
     color: #fff;
     z-index: 2;
}
.top-header span{
     color: var(--text-color);
}
.contact-info{
     position: relative;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     margin-top: 0;
     padding: 20px 40px;
     width: 100%;
     height: 320px;
     border: 2px solid #fff;
     border-radius: 20px;
     box-shadow: 1px 8px 10px 2px var(--first-shadow);
     overflow: hidden;
     cursor: pointer
}
.contact-info > h2 {
     color: var(--text-color);
     margin-bottom: 20px;
}
.contact-info > .p{
     text-decoration: none;
     display: flex;
     align-items: center;
     gap: 12px;
     color: var(--text-color);
     margin-block: 5px;
}
.contact-info::after{
     color: #8749f2;
}
.contact-info:hover,
.contact-info:hover.contact-info h2,
.contact-info:hover.contact-info .p,
.contact-info:hover.contact-info i{
     color: #fff;
     z-index: 2;
}
.form-control{
     display: flex;
     flex-direction: column;
     gap: 10px;
     width: 100%;
}
.form-input{
     display: flex;
     gap: 10px;
     width: 100%;
}
.input-field{
     width: 100%;
     height: 55px;
     background: transparent;
     border: 2px solid #fff;
     border-radius: 20px;
     padding-inline: 20px;
     border-radius: 10px;
     outline: none;
}
.input-subject{
     width: 100%;
     height: 55px;
     background: transparent;
     border: 2px solid #fff;
     border-radius: 20px;
     padding-inline: 20px;
     border-radius: 10px;
     outline: none;
}
.text-area{
     display: flex;
     flex-direction: column;
     gap: 10px;
}
textarea{ 
     width: 100%;
     height: 150px;
     background: transparent;
     border: 2px solid #fff;
     border-radius: 10px;
     padding: 15px 20px;
     color: var(--text-color);
     outline: none;
     resize: none;
}
.form-button > .btn{
     display: flex;
     align-items: center;
     justify-content: center;
     border: none;
     width: 100%;
     background: #8749f2;
     padding: 10px 20px;
     border-radius: 10px;
     color: #fff;
}
.form-button i{
     font-size: 18px;
     margin-left: 10px;
}
footer{
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     row-gap: 30px;
     background: var(--body-color);
     padding-block: 40px 60px;
}
.middle-footer .footer-menu{
 display: flex;

}
.footer_menu_list{
     list-style: none;
}
.footer_menu_list a{
     text-decoration: none;
     color: var(--text-color);
     font-weight: 500;
     margin-inline: 20px;
}
.footer_menu_list a:hover{
     color: #8749f2;
}
.footer-social-icons{
     display: flex;
     gap: 30px;
     color: var(--color-white);
     cursor: pointer;
}
.bottom-footer{
     font-size: 14px;
     margin-top: 10px;
     color: var(--color-white);
}
@media only screen and (max-width: 1024px) {
     .feature-text{
          padding: 0;
     }
     .image,
     image img {
          /* width: 320px;
          height: 320px; */
     }
}
@media only screen and (max-width: 900px){
     .nav-menu-btn{
          display: none;
     }
     .nav-menu.responsive{
          left: 0;
     }
     .nav-menu{
          position: fixed;
          top: 0;
          left: -100%;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background: rgba(250,250,250, 0.7);
          backdrop-filter: blur(5px);
          width: 300px;
          border-radius: 0px 30px 0px 30px;
          min-height: 450px;
          height: 100vh;
          transition: 0.3s;
     }
     .nav_menu_list{
          flex-direction: column;
     }
     .nav-menu-btn{
          display: flex;
          align-items: center;
          justify-content: center;
          
     }
     .feature-box{
          flex-direction: column;
          justify-content: center;
          height: 100vh;
     }
     .feature-text{
          width: 100%;
          order: 2;
          justify-content: center;
          align-content: flex-start;
          min-height: 60vh;
     }
     .social_icons{ 
          margin-top: 1em;
     }
     .feature-image{
          order: 1;
          justify-content: center;
          min-height: 250px;
          width: 100%;
          /* margin-top: 70px; */
     }
     .image,
     .image img{
          width: 105px;
          height: 155px;
     }
     .row{
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 50px;
     }
     .col{
          display: flex;
          justify-content: center;
          width: 100%;
     }
     .about-info,
     .contact-info{
          width: 100%;
          font-size: small;
          
     }
     .project-container{
          justify-content: center;
     }
     .project-box{
          width: 80%;
     }
     .mode{
          display: flex;
          align-items: center;
          gap: 5px;
          margin-left: 60%;
     }
}
@media only screen and (max-width: 540px){
     .feature-name{
          font-size: 4px;
     }
     .project-box{
          width: 100%;
     }
     .form-inputs{
          flex-direction: column;
     }
     .input-field{
          width: 100%;
     }
     .mode{
          margin-left: 50%;
     }

}