@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300..700&display=swap');/* "Teko", sans-serif*/
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');/*font-family: "Ubuntu", sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Jaini+Purva&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&family=Rubik:ital,wght@0,300..900;1,300..900&family=Six+Caps&display=swap');/*font-family: "Six Caps", sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Jaini+Purva&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap'); /*font-family: "Jaini Purva", system-ui;*/
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Jaini+Purva&family=Orbitron:wght@400..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&family=Rubik:ital,wght@0,300..900;1,300..900&family=Six+Caps&display=swap');/*  font-family: "Orbitron", sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Jaini+Purva&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
:root{
--first-color:#000000;
--second-color:#008817;
--fifth-color:#424242;
--third-color:#006d99;
--forth-color:#fff;
--sixth-color:#1202805f;
}
html{
   margin:0;
   padding:0;
   color:var(--forth-color);
   font-family:"Jaini Purva", system-ui;
   /* margin:-10px;x */
   /* background: var(--second-color); */
   /* overflow:unset; */
   scroll-snap-type:Y mandatory;
}
body::-webkit-scrollbar{
   display:none;
   background-color: #000;
}
body{
   background: #000;
   margin:0;
   padding:0;
   /* height: 100%; */
   width:100%;
   display: flex;
   flex-wrap:wrap;
   flex-direction: row;
   /* background-color: var(--first-color); */
   position:absolute;
   /* align-items:space-between; */
}
section{
   display: flex;
   flex-wrap: wrap;
   /* background-color: #000; */
   scroll-snap-align: start;
}
.nav_left{
   display: flex;
   /* flex-wrap: wrap; */
   position:relative;
   justify-content: center;
   align-items:center;
   margin-top: 15vh;

}
.nav_wrapper{
   display:flex;
   /* background: #000; */
   width:100%; 
   /* position:absolute; */
}
.container_left{
   margin:0;
   flex-wrap: wrap;
   /* border-right: 4px solid cadetblue; */
   position:fixed;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width:15%;
   /* margin:0px; */
   height:100vh;
   z-index:100;
   background-color:var(--first-color);

}

.social_icons{
   display:flex;
   justify-content: center;
   align-items: center;
   margin-top:10vh;
   gap:1rem;
   /* object-fit: cover; */

}
/* .social_icons .icon_css{
   display:flex;
   /* object-fit: cover; */
   /* justify-content: center; */
   /* align-items: center; */
   /* height:50px; */
   /* width:50px; */
/* } */ 
/* .social_icons img{
   display:flex;
   height:120%;
   width:120%;
} */


.social_icons_styles{
   /* object-fit:fill; */
   display:flex;
   justify-content: center;
   align-items: center;
   /* border:1px solid rgb(200, 200, 200); */
   /* outline:none; */
   height:30px;
   border-radius:4px;
   width:30px;
   color:white;
}
.social_icons_style:hover{
   transform:none;
}
.social_icons_styles svg{
   height:30px;
   width:30px;
}
.icon_css .facebook svg{
   /* background: #1957ff; */
   fill:#2e5290;
   height:25px ;
   width:25px;
}
.icon_css .linkedin svg{
   /* background: #1957ff; */
   fill:#0077B5;
   height:25px;
   width: 25px;
}
.icon_css .instagram{
   background: linear-gradient(#5851d8,#833ab4,#c13584,#e1306c,#fd1d1d,#f56040,#f77737,#fcaf45,#ffdc80);
   height:25px;
   width:25px;
}
.icon_css .instagram svg{
   background: linear-gradient(#833ab4,#c13584,#e1306c,#fd1d1d,#f56040,#f77737,#fcaf45,#ffdc80);
   fill:#fff;
   border-radius:6px;
   height:20px;
   width:20px;
}
.icon_css .instagram svg:hover{
   transform:scale(1.1);
}
.icon_css .github svg{
   background: #24292e;
   fill:#fff;
   border-radius:6px;
   height: 25px;
   width: 25px;
   border-radius: 50%;
}


/* .social_icons_styles  */
/* section{
   scroll-snap-type:mandatory;
   scroll-behavior: smooth;
   scroll-snap-align: start ;
   /* object-fit: cover; */
/* } */
.body_wrapper{
   /* display:flex; */
   /* flex-direction:column; */
   width:84.5%;
   position:absolute;
   padding-left:220px;
   /* background-color: blue; */
}
.container_right{
   display: flex;
   flex-direction:column;
   background-color:#fff;
   /* width:100%; */
   /* height:100%; */
}

.border{
   border:1px solid white;
}

.nav_left{
   display:flex;
   align-items: center;
   justify-content:center;
   flex-direction: column;
}
.s20{
   width:20%;
   height:100%
}
.s100_20{
   width:100%;
   height:20%
}

.nav_menu_list{
   display:flex;
   flex-direction:column;
   align-items:center;
   gap:1.5rem;
   list-style:none;
   margin-left:-30px;
}
.list_class a{
   display:flex;
   font-family: "Jaini Purva", system-ui;
   font-size: 1.3rem;
   font-stretch:wider;
   color: #7c7b7b;
   text-decoration: none;


}
.mar_10{
   margin: 10px 0;
}
.padd_15{
   padding: 10px 15px;
}
/* main .github_btn{
   text-decoration:none;
   color:var(--third-color);
} */

.list_class a:hover{
   transform: scale(1.1);
   color:cadetblue;
}

.nav_logo{
   font-family: "Jaini Purva", system-ui;
   color: cadetblue;
   display:flex;
   justify-content:center;
   align-items:center;
   font-size:2.2rem;
   font-stretch: expanded;
   cursor:grab;
}
.logo{
   margin-top:-20vh;
   margin-bottom:8vh;
   margin-left:1.2vw;
}


/* .nav_left{
   display:flex;
} */

 .nav-button{
   display: flex;
   justify-content:flex-start;
   align-items:center;
   /* padding-left:-5vw; */
   padding-top:15vh;
   /* margin:70px 10px;  */
 }
.btn_github{
   font-family:"Jaini Purva", system-ui;
   background: rgba(0, 0, 0, 0.407);
   font-size:18px;
   height:40px;
   width:100px;
   border-radius:8px;
   border:none;
   /* background:linear-gradient(#ffffff 10%, #8e8e8e 100%); */
   color:var(--forth-color);
   margin-left:40px;
   cursor:pointer;
}
.github_btn{
   text-decoration: none;
   color:white;
}
.btn_download{
   display: flex;
   align-items: center;
   justify-content: center;
   font-family:"Jaini Purva", system-ui;
   background: cadetblue;
   font-size:18px;
   height:40px;
   width:140px;
   border-radius:8px;
   border:none;
   /* background:linear-gradient(#ffffff 10%, #8e8e8e 100%); */
   color:var(--forth-color);
   margin-left:40px;
   cursor:pointer;
}
.btn_github:hover{
   animation-duration:0.2s;
   transform: scale(1.086);
   
}
.btn_download:hover{
   animation-duration:0.2s;
   transform: scale(1.086);
}
.nav-button{
   margin-top:-45vh;
   margin-left:8vw;
   margin-bottom: 35vh;;
}
.Home_section{

   position:relative;
   display:flex;
   height:98vh;
   width:100%;
   /* flex-direction:; */
   /* flex-wrap: nowrap; */
   justify-content:center;
   /* margin: 23px 0; */
   /* gap:50vw; */
   /* padding:20vh; */
}
.home_wrap{
   display:flex;
   width:100%;
   flex-direction:column;
   /* background-color:green; */
   justify-content: space-between;
}
.home_infos{
   position:relative;
   /* background-color: red; */
   display:flex;
   width:cover;
   gap:12vw;
   height:99vh;
   flex-direction: row;
}
.home_btns{
   z-index:1;
   display:flex;
   /* justify-content:flex-end; */
}

.first_left_section{
   line-height: 60px;
   font-family: "Dancing Script", cursive;
   font-weight: bolder;
   color: var(--third-color);
   height:30vh;
   padding-top:30vh;
   padding-left:8vw;
   padding-right:0px;
   font-size:45px;
   /* background-color: red; */

}
.first_right_section{
   margin-top:13vh;
   margin-right:10px;
   display:flex;
   justify-content: center;
   align-items: center;
   /* background: red; */
   /* height:; */
   padding:10px 0px;
   /* border:rgb(139, 0, 0) 8px double; */
   /* border-radius: 50%; */
   filter:drop-shadow(0 0 2px #ffac2e) drop-shadow(0 0 5px #ffc038);
}
.dp_image{
   cursor:grab;
   height:40vh;
   width: 18vw;
   animation-delay:0.32s;
   /* animation-duration:5s; */
}
.dp_image:hover{
   transform:scale(1.2);
}
.colors{
   color:var(--second-color);
}
#element{
   color:var(--second-color);
}
.Page_breaker_home{
   margin-top:10vh;
   height:3px;
   background:rgb(118, 118, 118);
}
.Page_breaker_about{
   height:3px;
   background:rgb(118, 118, 118);
}

.About_section{
   
   display:flex;
   justify-content:flex-start;
   flex-wrap: wrap;
   /* align-items: ; */
   flex-direction:row;
   /* position:absolute; */
   height:96vh;
   width:100%;
   background-color:cadetblue;
 padding:20px 30px;
}
.Aboutcont{
   display:flex;
   flex-wrap: wrap;
   flex-direction:row;
   justify-content: center;
   padding:min(5vw 10vw, 8%);
}
.Aboutcont .head{
   font-weight:bolder;
   flex-wrap: wrap;
   font-size:20px;
   margin-bottom: 10vh;
}
.About_left{
   width:40%;
   flex-direction: column;
   display:flex;
   padding-left:30px;
   /* justify-content:center; */
   /* align-items: center; */
   /* background-color:red; */
}
.About_right{
   display:flex;
   width:40%;
   flex-direction:column;
   padding:30vh 30px;
   
   /* background-color: blue; */
}

.first{
   /* padding-left:30px; */
   font-family: "Orbitron", sans-serif;
   font-size:14px;
   line-height:3vh;
   word-spacing:4px;
   font-weight: lighter;
   /* letter-spacing: 2px; */
   color:white;
   /* text-align:center; */
}


.indexLines{
   width: 3px;
   margin-left:20vh;
   background-color:blue;
   height: 100px;
   position: relative;
}
.skills_section{
   display:flex;
   align-items: center;
   /* margin-top:-10vh; */
   width:100%;
   height: 100vh;
   padding:0vh;
}
.skills_section .div_1{
   display:flex;
   justify-content: space-around;
   /* flex-direction: row; */
   /* gap:10vh; */

}
.skills_section .div_1{
   /* position:relative; */
   display:flex;
   justify-content: center;
   flex-direction:column;
   align-items: center;
   /* padding:5vh; */
   margin-left:50vh;
   /* padding-left:20vh; */
   height:95vh;
   /* padding:0 10vw; */
   /* margin:0 10vw; */
   width:max-content;
   /* flex-direction: column; */
   gap:10vh;
}

.outcircle_skills_html, .outcircle_skills_css,.outcircle_skills_js{
   display: flex;
   justify-content: center;
   align-items: center;
   height:148px;
   width:148px;
   border-radius:50%;
   /* border:2px solid white; */
   box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),-6px -6px 10px -1px rgba(255,255,255,0.7);
}
.innercircle_skills_html,.innercircle_skills_css,.innercircle_skills_js{
   display:flex;
   justify-content: center;
   color:var(--second-color);
   align-items: center;
   height:121px;
   width:121px;
   /* border:2px solid white; */
   border-radius:50%;
   box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.15),inset -4px -4px 6px -1px rgba(255,255,255,0.7),
    0.5px 0.5px 0px rgba(0,0,0,0.15),-0.5px -0.5px 0px rgba(255,255,255,1),
    0px 12px 10px 10px rgba(0,0,0,0.05);
   ;
}
/* .skills_section .div_1 .AnimationSide{
   position:relative;
   display:flex;
   /* justify-content: center; */
   /* flex-direction: row; */
   /* align-items: center; */
   /* padding:5vh; */
   /* margin-top:-px; */
   /* margin-top:-75px; */
   /* padding-left:20vh; */
   /* height:85vh; */
   /* width:50%; */
   /* flex-direction: column; */
   /* gap:6vh; */
/* } */
circle{
   /* z-index: 20; */
   fill:none;
   stroke:url(#GradientColor);
   stroke-width:12.5px;
   background: #0077B5;

   stroke-dasharray: 440;
   stroke-dashoffset:440;
   animation: anim 3s linear forwards; 
   animation-timeline:view();
   animation-range:entry cover 40%;

}


@keyframes anim {
   100%{
      stroke-dashoffset:154;
      
   }
}
.back_html, .back_css, .back_js{
   display:flex;
   justify-content: center;
   align-items: center;
   /* margin-top:6px; */
   margin-left:5px;
   position:relative;

}
.front_html, .front_css, .front_js{
   display:flex;
   justify-content: center;
   align-items: center;
   margin-top:-237.9px;
   padding-left:1px;
   z-index: 5;
}
svg{
   /* display: flex; */
   /* flex-direction: column; */
   /* gap:10vh; */
   /* z-index: 21; */
   /* position:absolute; */
   /* margin-top:-239px; */
   /* margin-left:-4.3px; */
   left:0;
}
.Education_section{
   background: #f0f0f0;
   display:flex;
   flex-wrap: nowrap;
   position:relative;
   padding:0 10vh;
   height:100vh;
   justify-content: center;
   max-width:100%;
   flex-direction: column;
   align-items: center;
   gap: 5px;
}
.Education_section .header_index{
   display:flex;
   flex-wrap: nowrap;
   position:relative;
   flex-direction:row;
   justify-content: space-between;
   height:8vh;
   /* border:2px solid #000000; */
   width:100%;
   background:#00a6ff;
   padding:min(0.5%,5vw);
      z-index: 2;
}
.Education_section .header_index a{
   display:flex;
   flex-wrap: nowrap;
   align-items: center;
   padding:min(10%,20px);
   font-size:min(20px);
   font-weight:thin;
   font-family: "Jaini Purva", system-ui;
}
.Education_section .bottom_detail_info{
   display:flex;
   flex-wrap: nowrap;
   height:fit-content;
   width:95%;
   font-weight: 400;
   font-size: 18px;
   font-family: "Teko", sans-serif;
   color:#0f5874;
   background-color: rgb(255, 255, 255);
   display:none;
   /* margin-top:-3vh; */
   z-index:1;
   font-stretch:narrower;
}

.border2{
   border: 2px solid #00a6ff;
}
.Education_section .bottom_detail_info a{
   padding:20px;
}

.tog_btn{
   display:flex;
   align-items: center;
   justify-content: center;
   width: 6vh;
   font-size: 18px;
   background-color:transparent;
   color: white;
   border:none;
   margin-left:-10vh;
 }
 

.Experience_section{
   display:flex;
   align-items:center;
   justify-content: center;
   /* padding: 10vh; */
   color:rgb(17, 111, 114);
   gap: 8vh;
   height:100vh;
   background-color: #f0efef;
}

.Experience_section .left_animation{
   display:flex;
   width:10%;
   justify-content: center;
   /* align-items: center; */
}
.Experience_section .left_animation .line{
   display:flex;
   margin-top:3vh;
   border-radius: 8px;
   height:70%;
   width:3px;
   background:var(--second-color);
   flex-direction:column;
   /* margin-top:10px; */
   gap: 14.8vh;
   animation: lineinc linear;
   animation-timeline:view();
   animation-range: entry cover 10%;
}
.Experience_section .left_animation .line .dot{
   margin-left:-4px;
   display:flex;
   position: relative;
   height:10px;
   width:10px;
   background:var(--second-color);
   z-index: 2;
   border-radius: 50%;
   justify-content: center;
   align-items: center;
   /* margin-top: 50vh; */
  
}
@keyframes lineinc  {
   0%{
      opacity:0;
      clip-path: inset(0 0 0 0);
   }
   100%{
      opacity:1;
      clip-path: inset(0 0 0 0);
   }
}

.Experience_section .right_information{
   display:flex;
   height: 90%;
   flex-direction: column;
   /* gap:0.5vh; */
   font-size: 16px;
}
.Experience_section .right_information h2{
   font-size:16px;
   transform:translate(5vh);
   color:#004f44;
   font-weight: 100;
}
.Experience_section .right_information span{
   font-size:12px;
   /* transform:translate(22vh) */
   transform:translateY(-7vh);
   color:#0e6a5e;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.Project_section{
   display:flex;
   /* margin-top: 15vh; */
   flex-wrap:wrap;
   align-items: center;
   justify-content: center;
   flex-direction: row;
   background-color: #000000;
   height:100vh;
   scroll-snap-align: start;
   scroll-behavior: smooth;
   /* padding: 20vh 3vh; */
   /* background:blur(50px); */
}
.Project_section img{
   display: flex;
   /* height:10vh; */ 
   /* position: */
}
.slider_wrapper{
   position:relative;
   display: flex;
   justify-content: center;
   align-items: center;
   width:80%;
   padding-left:4vh;
   height: 98vh;
   margin:0 auto;
}
.slider{
   display:flex;
   /* flex-direction: column; */
   aspect-ratio: 16/11;
   overflow-y:auto;
   scroll-snap-type:x mandatory;
   scroll-behavior: smooth ;
   /* box-shadow: 0px 0px 30px 2px hsl(192, 100%, 7%); */
   border-radius: 0.5rem;
}
.slider::-webkit-scrollbar{
   display:none;
}

.slider img{
   flex: 1 0 100%;
   scroll-snap-align: start ;
   object-fit: cover;
   cursor:pointer;
}
.slider_nav{
   display:flex;
   column-gap: 1rem;
   position:absolute;
   bottom:1.25rem;
   left:50%;
   transform:translateX(-50%);
   z-index:1;
}
.slider_nav a{
   width:0.5rem;
   height: 0.5rem;
   border-radius: 50%;
   background:cadetblue;
   opacity: 50%;
   transition: opacity 250ms, transform 250ms;
}
.slider_nav a:hover{
   opacity:100%;
   /* transition: 250ms; */
  
}
.slider_nav a:active{
   background-color: cyan;
   transform:scale(2);
}

.contact_section{
   /* flex-wrap: wrap; */
   display:flex;
   position:relative;
   justify-content: center;
   align-items: center;
   height:100vh;
   /* width:82vw; */
   /* padding:20px; */
   /* background:url("/project_sample/project_1.jpg") no-repeat center center/cover; */
   background-color:cadetblue;
   backdrop-filter:blur(10px);
   /* background-color: #013d45; */

}
.form_wrapper{
   display:flex;
   flex-wrap: wrap;
   height:95vh;
   width:40vw;
   justify-content:center;
   background-color: #0000002c;
   align-items:center;
   flex-direction: column;
   backdrop-filter: blur(4px);
   /* box-shadow: 20px 20px 50px rgba(0,0,0,0.5); */
   border-radius: 8px;
   color:var(--forth-color);
   gap:10px;
}
.form_wrapper .form_input{
   width:50vh;
   height:5vh;
   border:none;
   border-bottom:1px solid white;
   /* background: transparent; */
   outline:none;
   padding-left:10px;
   border-radius: 8px;
}

.form_wrapper #button{
   width:20vh;
   height:5vh;
   border:none;
   border-bottom:1px solid white;
   /* background: transparent; */
   outline:none;
   padding-left:10px;
   border-radius: 8px;
}
.form_wrapper textarea{
   width:50vh;
   height:30vh;
}

 .footter{
   width:100%;
   display: flex;
   align-items: center;
   justify-content: center;
   /* margin:5vzh 0; */
   background-color: black;
 }
 .footerr{
   display:flex;
   width:92%;
   margin-left:2vh;
   align-items:center;
   justify-content: space-around;
   height: 24vh;
   flex-direction:row;
   background-color: black;
   color:rgb(153, 153, 153);
   /* border-bottom-left-radius:350px; */
   /* border-bottom:solid 8px cadetblue; */
   /* border-top-left-radius:70px; */
   /* z-index:10000; */


  }

  .personal_info_navigation .infoo{
   color:cadetblue;
   font-size:16px;

  }
  .personal_info_navigation{
   margin-top:-1vh;
   /* margin-bottom:-4vh; */
   /* margin-left:1vh; */
   display: flex;
   align-items:end;
   /* justify-content:end; */
   flex-direction:column;
   /* border: solid 2px white; */
  }

  .footerr .footer_info{
   display: flex;
   /* align-items: end; */
   /* margin-right:-10vh; */
   flex-direction:column;
   /* margin-left:-10vh; */
   /* margin-top:0; */
   font-size:10px;
   /* flex-wrap: wrap; */

  }


  .footer_section_links a{
   text-decoration: none;
   color:#949494;
  }
  .footer_info .fot_logo{
   font-size:20px;
  }
  .footer_info .fot_oth{
   font-size: 14px;
   margin-top:-1vh;
  }
  .footer_section_links{
   display:flex;
   flex-direction: column;
   line-height: 2.5vh;
  }
  .footer_section_links a:hover{
   scale:1.3;
  }

  .footer_infoo{
   display:flex;
   height: 6vh;
   width:30vh;
   background-color: black;
   align-items: center;
   justify-content: center;
   /* margin-top:1vh; */
   overflow-wrap:normal;
  }
  .footer_infoo:hover{
   background-color: white;
  }

  @keyframes scrappear{
   from{
      opacity:0;
      clip-path: inset(0 0 0 0);
   }
   to{
      opacity:1;
      clip-path: inset(0 0 0 0);
   }
  }
  
  section{
   animation: scrappear linear;
   animation-timeline:view();
   animation-range: entry;
  }