html{
  scroll-behavior: smooth;
}

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: "maven pro",snas-serf;
}

body {
  
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    
}
nav{
  box-shadow: 0px 1px 10px 1px black;
  outline: none;
  position:sticky;
  top:0;
  left:0;
  z-index: 100;
  
}
#navbarNav ul li a{
  color: rgba(255,255,255,0.8);
}

.navbar-toggler{
  color:#fff ;
  
}
#brand{
   color: #fff;
  font-family: "Maven Pro", sans-serif;
  font-weight: 600;
}
#profile{
  background: #5C88C4;
  
}
.left{
  
}
.my-d{ 

}
.my-d h1{
  font-size: 3rem;
  font-weight: bold;
  font-family: "Maven Pro", sans-serif;
  color: #0affff ;
  letter-spacing: 3px;
  text-shadow: 0px 0px 2px black;
}
.my-d h2{
  font-size: 2.5rem;
  margin-top: -15px;
  font-family: "Maven Pro", sans-serif;
  color: #0affff ;
  letter-spacing: 3px;
  text-shadow: 0px 0px 2px black;
}
.my-d h2 B{
  color: #FFF6E9 ;
  letter-spacing: 3px;
  text-shadow: 0px 0px 2px black;
}
.my-d h3{
  font-size: 1.8rem;
  margin-top: -5px;
  font-family: "Maven Pro", sans-serif;
  color: #0affff ;
  text-shadow: 0px 0px 2px black;
}
.social_icons_desk{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color:#0d6efd;
  font-size: 2.3rem;
}
.social_icons_desk i{
  margin:0.7rem 0px;
  background: #fff;
  transition: all ease 0.3s;
  cursor: pointer;
  height: 2.5rem;
  border-radius: 5px;
  width: 2.5rem;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.social_icons_desk i:hover{
  font-size: 2rem;
  box-shadow: 0px 0px 5px #0affff;
  
}
.right{
  height: 30vw;
  background: linear-gradient(-10deg,#6FDCE3,#5C88C4);
  position: relative;
}
#skills .progress {
    margin-bottom: 1.5rem;
}

.small-logo{
  height: 25vw;
  width: 25vw;
  border-radius: 50%;
  background: linear-gradient(90deg,#5C88C4,#5C88C4) ;
  position: absolute;
  top:50%;
  left:0%;
  transform: translate(-50%,-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.pic{
  height: 80%;
  width:80%;
  padding: 8px;
  border: 0.3rem solid #fff;
  background-image: url("../Images/IMG.png");
  background-size: cover;
  
  border-radius: 50%;
  box-shadow: 0px 0px 8px #fff,inset 0px 0px 8px #fff,
  0px 0px 13px #0affff,
  inset 0px 0px 13px #0affff ;
  ;
  
}
#mobile{
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(#7FC7D9,#DCF2F1);
  height: auto;
  padding: 20px;
  position: relative;
  
}
.mobile-logo{
  height: 200px;
  width: 200px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 5px #365486;
}
.mobile-right{
  height: 200px;
  background: linear-gradient(-10deg,#6FDCE3,#5C88C4);
  position: relative;
  padding: 20px;
  display: flex;
  justify-content: center;
}

.mobile-box{
  height: 150px;
  width: 150px;
  
  border-radius: 50%;
  background: yellowgreen;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mobile-pic{
  height: 130px;
  width:130px;
  padding: 8px;
  border: 4px solid #fff;
  background-image: url("/images /IMG.png");
  background-size: cover;
  
  border-radius: 50%;
  box-shadow: 0px 0px 8px #fff,inset 0px 0px 8px #fff,
  0px 0px 13px #0affff,
  inset 0px 0px 13px #0affff ;
  ;
  
}
#mobile h1{
  margin-top: 15px;
  color: #5C2FC2;
  font-family: "Maven Pro", sans-serif;
  font-weight: 500;
  
}
#mobile h3{
  
  font-family: "maven pro", serif;
  font-size: 25px;
  color:#5C2FC2;
}
.social_icons{
  width: 100%;
  display: flex;
  justify-content: center;;
  color:blue;
  font-size: 22px;
}
.social_icons i{
  margin:0 5px;
  background: #fff;
  transition: 0.3s;
  cursor: pointer;
  height: 25px;
  border-radius: 5px;
  width: 25px;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.social_icons i:hover{
  font-size: 25px;
  box-shadow: 0px 0px 5px #0affff;
  
}
#about{
  padding-top: 20px;
  background: linear-gradient(90deg,#F6F5F2,#F0EBE3);

}
#about h2{
  text-align: center;
  color: #3AA6B9;
  font-family:"maven pro", serif;
}
#about p{
  font-family:"habibi", serif;
  font-size: 15px;
  color: #402B3A;
}
.about-icons{
  display: flex;
  flex-wrap: wrap;
  gap:10px;
}



.col{
  width: 100%;
  
  box-shadow: 0px 0px 10px #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
 flex-direction: column;
 padding: 20px;
 margin-bottom: 20px;
 border-radius: 10px;
  
}
.content{
  width: 100%;
  height: 300px;
  
  
} 
.col h2{
  margin: 10px 0;
}
.col div{
  height:150px;
  width: 150px;
  background: rgba(44, 203, 242,0.3);
  border-radius:50%;
    display: flex;
  justify-content: center;
  align-items: center;

  
  
  
}
.col span {
  font-size: 70px;
  color: #5C2FC2;
  color: rgba(44, 203, 242,1);;
}
.col p{
  text-align: center;
  color: #402B3A;
}



/*skills css start*/
.percent-box{
  width:100%;
  height: 20px;
  background: #ccc;
  position: relative;
  margin-bottom: 15px;
  
  
  
}
.p_bar{
  background: greenyellow;
  width:0%;
  height: 20px;
  text-align: center;
}
.p_bar-css{
  
  width:0%;
  height: 20px;
  text-align: center;
  background: springgreen;
}
.p_bar-c3{
  background: peachpuff;
  width:0%;
  height: 20px;
  text-align: center;
}
.p_bar-js{
  background: deepskyblue;
  width:0%;
  height: 20px;
  text-align: center;
}
.p_bar-jquery{
  background: plum;
  width:0%;
  height: 20px;
  text-align: center;
}
.p_text {
  position : absolute ;
  left: 50%;
  top:-2px;
  transform: translate(-50%);
  color: #127fe6;
  
}
.my-pic{
  filter:drop-shadow(0px 0px 10px rgba(0,0,0,0.7))
}
.skill{
  font-family: "maven pro",snas-serf;
  text-align: center;
}
/* skills coding end*/
.using{
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0;
  
}
.using span{
  
  margin:5px 10px;
  padding: 0px 5px;
  border-radius: 5px;
  box-shadow: 0px 0px 2px black;
}
.project-content{
  margin: 10px 0;
  box-shadow: 0px 0px 4px purple;
}
#projects h2{
  font-family: "maven pro",snas-serf;
  font-size:2.3rem;
  color: #3AA6B9;
  margin: 10px 0;
}
.project-img{
  max-height: 350px;
  overflow: hidden;
}
.card-title{
  font-family: "maven pro",snas-serf;
  color: purple;
}
.card-text{
  font-size: 15px;
  
  line-height: 20px;
}
@media(max-width: 400px){
  .right{
    height: 50vw;
  }

  .small-logo{
    height: 40vw;
    width: 40vw;
  }
  #desktop{
    display: none;
  }

}

@media(min-width:400px){
  #mobile{
    display: none;
  }

  .project-img{
  max-height: 250px;
  overflow: hidden;
}
}
/* footer code*/
footer {
    background-color: rgba(0,0,0,0.8);
    color: #0affff;
    padding: 20px 0;
    text-align: center;
    width: 100%;
    font-size: 10px;
}

.footer-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-content a {
    color: #ff6347;
    text-decoration: none;
}

.footer-content a:hover {
    text-decoration: underline;
}

.footer-content p {
    margin: 5px 0;
}