@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap');
:root{
   --body-color:rgb(250, 248, 248);
   --color-white:rgb(245, 240, 240);

   --text-color-second:rgb(68,68,68);
   --text-color-third:rgb(24, 153, 239);

   --first-color:rgb(110,87,224);
   --first-color-hover:rgb(40,91,212);

   --second-color:rgb(0,201,255);
   --third-color:rgb(139, 7, 159);
   --first-shadow-color:rgba(0,0,0,0.1);
}
*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "M PLUS Rounded 1c", sans-serif;
}
html{
   scroll-behavior: smooth;
}
::-webkit-scrollbar{
   width: 10px;
   border-radius: 25px;
}
::-webkit-scrollbar-track{
   background: #f1f1f1;
}
::-webkit-scrollbar-thumb{
   background: #ccc;
   border-radius: 30px;
}
::-webkit-scrollbar-thumb:hover{
   background: #bbb;
   
}
.btn{
  font-weight: 500;
  font-weight: bold;
  padding: 12px 20px;
  background: #efefef;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: .4s;
}
.btn>i{
   margin-left: 10px;
}
.btn:hover{
   background: var(--second-color);
   color: var(--color-white);
}
i{
   font-size: 16px;

}
body{
   background: var(--body-color);
}
.container{
   width: 100%;
   position: relative;

}
nav{
   position: fixed;
   display: flex;
   justify-content: space-between;
   width: 100%;
   height: 90px;
   line-height: 90px;
   background: var(--body-color);
   padding-inline:9vw ;
   transition: .3s;
   z-index: 100;
}
.nav-logo{
   position: relative;
}
.nav-name{
   font-size: 30px;
   font-weight: 600;
   color:rgb(152, 238, 33);
   
}
.nav-logo span{
    position: absolute;
    top: -15px;
    right: -20px;
    font-size: 5em;
    color: var(--text-color-second);
}
.nav-menu,.nav_menu_list{
   display: flex;
}
.nav_list{
   list-style: none;
   position: relative;
}
.nav-link{
   text-decoration: none;
   color: var(--text-color-second);
   font-weight: 800;
   padding-inline: 15px ;
   margin-inline: 20px;
}
.nav-menu-btn{
   display: none;

}
.nav-menu-btn i{
   font-size: 28px;
   cursor: pointer;
}
/* ------------------------- Home---------------------- */
.wrapper{
   padding-inline: 10vw;
}
.featured-box{
   position: relative;
   display: flex;
   height: 100vh;
   min-height: 700px;
}
.featured-text{
   position: relative;
   display: flex;
   justify-content: center;
   align-content: center;
   min-height: 80vh;
   flex-direction: column;
   width: 50%;
   padding: 20px;
}
.featured-text-card span{
   background: var(--third-color);
   color: var(--color-white);
   padding: 3px 8px;
   font-size: larger;
   border-radius: 5px;
   font-weight: bold;
}
.featured-name{
   font-weight: 600;
   font-size: 50px;
   color: var(--text-color-second);
   margin-block: 20px;
}
.typedText{
   text-transform: capitalize;
   color: var(--text-color-third);
}
.featured-text-info{
   font-size: 15px;
   margin-bottom: 30px;
   font-weight: bolder;
   color: var(--text-color-second);
}
.featured-text-btn{
   display: flex;
   gap: 20px;
}
.featured-text-btn>.blue-btn{
   background: var(--first-color);
   color: var(--color-white);
}
.featured-text-btn>.blue-btn:hover{
   background: var(--first-color-hover);
}
.social_icons{
   display: flex;
   margin-top: 5em;
   gap: 30px;
}
.icon{
   display: flex;
   justify-content: center;
   align-items: center;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25);
   cursor: pointer;
}
.icon:hover{
   color: var(--first-color);

}
.featured-image{
   display: flex;
   justify-content: right;
   align-content: center;
   min-height: 80vh;
   width: 50%;
}
.image{
   margin: auto 0;
   width: 300px;
   height: 300px;
   border-radius: 65% 45% 65% 45%;
   overflow: hidden;
   animation: imgFloat 7s ease-in-out infinite;
}
.image img{
   width: 380px;
   height: 380px;
   object-fit: cover;
}
@keyframes imgFloat{
   50%{
      transform: translateY(10px);
      border-radius: 45% 55% 45% 55%;
   }
}
.scroll-btn{
   position: absolute;
   bottom: 0;
   left: 50%;
   translate: -50%;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 150px;
   height: 50px;
   gap: 5px;
   text-decoration: none;
   color: var(--text-color-second);
   background: var(--color-white);
   border-radius: 30px;
   box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
}
.scroll-btn i{
   font-size: 20px;
}
/* ---------------------------about------------------ */
.row{
   display: flex;
   width: 100%;
   justify-content: space-between;
   gap: 50px;
}
.col{
   display: flex;
   width: 50%;
}

.section{
   padding-block: 5em;
   
}
.top-header{
   text-align: center;
   margin-bottom: 5em;
}
.top-header h1{
   font-weight: 600;
   color: var(--text-color-second);
   margin-bottom: 10px;

}
.top-header span{
   color: #999;
}
h3{
   font-size: 20px;
   font-weight: bold;
   color: var(--text-color-second);
   margin-bottom: 15%;
}
.about-info{
   position: relative;
   display: flex;
   width: 100%;
   align-items: center;
   flex-direction: column;
   padding-block: 30px 70px;
   padding-inline: 20px;
   background: var(--color-white);
   box-shadow: 1px 8px 10px 2px var(--first-shadow-color);
   border-radius: 20px;
}
.about-info p{
text-align: center;
font-size: large;
color: #777;
}
.about-info button{
   position: absolute;
   right: 20px;
   bottom: 20px;
   background: var(--first-color);
   color: var(--color-white);
   border-radius: 30px;
}
.about-info button:hover{
   background: var(--first-color-hover);
}
.skill-box{
   margin: 10px;
}
.skkill-header{
   margin-bottom: 30px;
}
.skill-list{
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
}
.skill-list span{
   font-size: 14px;
   background: var(--first-color);
   color: var(--color-white);
   padding: 2px 10px;
   border-radius: 5px;
}
.project-box{
   height: 16vh;
}
.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: var(--color-white);
   border-radius: 20px;
   box-shadow: 1px 8px 10px 2px var(--first-shadow-color);
   overflow: hidden;
}
.project-box>i{
   font-size: 50px;
   color: #00B5E7;
   margin-bottom: 25px;
}
.project-box label{
   font-size: medium;
   color: #777;
}
.project-box::after , contact-info::after{
   content:"" ;
  position: absolute;
   bottom: -100%;
   background: var(--second-color);
   width: 100%;
   height: 100%;
   transition: .4s;
   z-index: 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>h3 label{
   color: var(--color-white);
   z-index: 2;
}
.contact-info{
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 20px 30px;
   width: 100%;
   height: 315px;
   background: var(--second-color);
   border-radius: 10px;
   box-shadow: 0px 8px 10px 2px var(--first-shadow-color);
   overflow: hidden;
}
.contact-info > h2{
   color: var(--color-white);
   margin-bottom: 20px;

}
.contact-info>p{
   display: flex;
   align-items: center;
   gap: 10px;
   color: var(--color-white);
   margin-block: 5px;
}
.contact-info p>i{
   font-size: 18px;
}
.contact-info::after{
   background: var(--body-color);
}
.contact-info:hover.contact-info h2,
.contact-info:hover.contact-info p,
.contact-info:hover.contact-info i{
  color: #000000;
  z-index: 2;
  transition: .4s;
  
}
.from-control{
   display: flex;
   flex-direction: column;
   gap: 10px;
   width: 100%;
}
.from-inputs{
   display: flex;
   gap: 10px;
   width: 100%;
}
.input-field{
  width: 50%;
  height: 55px;
  background: transparent;
  border: 2px solid #AAA;
  border-radius: 10px;
  padding-inline: 20px;
  outline: none;
}
textarea {
   width: 100%;
   height: 250px;
   background: transparent;
   border: 2px solid #aaa;
   border-radius: 10px;
   padding-inline: 15px 20px;
   outline: none;
   resize: none;
}
.from-button>.btn{
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: var(--second-color);
   color: var(--color-white);
}
.from-button>.btn:hover{
   background: #00B5E7;
   color: #312e2e;
}
.from-button i{
   font-size: 18px;
   /* rotate: -45deg; */
}
footer{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   row-gap: 30px;
   background: #f8f8f8;
   padding-block:40px 60px ;

}
.top-footer p{
   font-size: 25px;
   font-weight: 600;
}
.middle-footer .footer-menu{
   display: flex;
}
.footer_menu_list{
   list-style: none;

}
.footer_menu_list a{
   text-decoration: none;
   color: var(--text-color-second);
   font-weight: 600;
   margin-inline:20px;

}
.footer-social-icons{
   display: flex;
   gap: 30px;
}
.footer-social-icons:hover{
    
    transition: .4s;
}
.bottom-footer{
   font-size: 14px;
   margin-top: 16px;
}



/* ------------------------------------Type Effect------------------------ */











/* ------------------------------- */
@media only screen and (max-width: 1024px){
   .featured-text{
       padding: 0;
   }
   .image, .image img{
       width: 320px;
       height: 320px;
   }
}
/* -------------------------media quray---- */
@media only screen and (max-width: 900px) {
   .nav-button{
       display: none;
   }
   .nav-menu.responsive{
       left: 0;
   }
   .nav-menu{
       position: fixed;
       top: 80px;
       left: -100%;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       background: rgba(255, 255, 255, 0.7);
       backdrop-filter: blur(20px);
       width: 100%;
       min-height: 450px;
       height: 90vh;
       transition: .3s;
   }
   .nav_menu_list{
       flex-direction: column;
   }
   .nav-menu-btn{
       display: flex;
       align-items: center;
       justify-content: center;
   }
   .featured-box{
       flex-direction: column;
       justify-content: center;
       height: 100vh;
   }
   .featured-text{
       width: 100%;
       order: 2;
       justify-content: center;
       align-content: flex-start;
       min-height: 60vh;
   }
   .social_icons{
       margin-top: 2em;
   }
   .featured-image{
       order: 1;
       justify-content: center;
       min-height: 150px;
       width: 100%;
       margin-top: 65px;
   }
   .image, .image img{
       width: 150px;
       height: 150px;
   }
   .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%;
   }
   .project-container{
       justify-content: center;
   }
   .project-box{
       width: 80%;
   }
}
@media only screen and (max-width: 540px){
   .featured-name{
       font-size: 40px;
   }
   .project-box{
       width: 100%;
   }
   .form-inputs{
       flex-direction: column;
   }
   .input-field{
       width: 100%;
   }
}
.lin{
   border:1px solid  rgb(157, 150, 150);
   width: 100%;
}