* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  scroll-behavior: smooth;
  background-color: #ffffff;
  color: rgb(0, 0, 0);
}

header {
  width: 100%;
  height: 60px;
}

.nav1 {
  width: 100%;
  height: 60px;
  position: fixed;
  z-index: 1;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  box-shadow: 2px 0px 3px;
  color: rgb(0, 0, 0);
}

.nav1 span {
  font-family: "Roboto", sans-serif;
  font-size: large;
  padding-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav1 p {
  color: rgb(0, 0, 0);
  font-size: 30px;
  font-weight: bold;
}

.left {
  font-family: "Roboto", sans-serif;
  font-size: larger;
  display: flex;
  justify-content: left;
  align-items: center;
}

.navlogo {
  width: 55px;
  margin-left: 15px;
  margin-right: 8px;
}

.right {
  display: flex;
  justify-content: right;
  align-items: center;
  margin-right: 10px;
  margin-left: 50px;
}

.right ul a {
  list-style-type: none;
  display: inline-block;
  justify-content: center;
  align-items: center;
  padding-right: 20px;
  cursor: pointer;
  text-decoration: none;
}

.animate-charcter,
.right ul a,
.featured_text h1,
.myIntro h1 {
  /* text-transform: uppercase; */
  background-image: linear-gradient(
    -225deg,
    #080514 0%,
    #210d77 29%,
    #344bca 67%,
    #007eaf 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  /* text-fill-color: transparent; */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
  /* font-size: 190px; */
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

.featured {
  width: 100%;
  height: 91vh;
  margin-top: 0;
  background-size: cover;
  background-position: top;
  position: relative;
  background: url(Imgs/bg.webp);
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.featured_text {
  max-width: 500px;
  position: absolute;
  top: 40%;
  /* left: 33%; */
  display: flexbox;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  padding: 10px 15px;
  background-color: rgba(0, 0, 0, 0.055);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.featured_text h1 {
  font-family: "Roboto", sans-serif;
  font-size: xx-large;
}

.featured_text p {
  margin-top: 20px;
  font-family: "Roboto", sans-serif;
  color: #2c2c2c;
  margin-bottom: 20px;
}

.featured_text a {
  margin-top: 30px;
  padding: 8px 15px;
  max-width: 140px;
  font-family: "Roboto", sans-serif;
  font-size: 12px;
  /* font-weight: bold; */
  text-decoration: none;
  border: none;
  outline: none;
  background-color: #1f1f1f;
  color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.featured_text a:hover {
  cursor: pointer;
  background-color: #001761;
  color: rgb(245, 245, 245);
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

/*
.
.
.
.
.
.*/
/* About Me section styling*/
/*
.
.
.
.
.
.*/

.myIntro {
  margin-top: 80px;
  font-family: "Roboto", sans-serif;
  text-align: center;
}

.container {
  margin-top: 30px;
  font-family: "Roboto", sans-serif;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px;
  padding: 20px;
  text-align: center;
  padding-bottom: 100px;
  
}

.left_info{
    margin-left:13% ;
}



.left_info img {
  height: 360px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.right_info {
  margin: 10px 15%;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  padding: 20px 30px;
  background-color: rgba(121, 121, 121, 0.055);
}
/*
.
.
.
.
.
.*/
/* skills section styling*/
/*
.
.
.
.
.
.*/
.c_skill {
  /* margin-left: 20%; */
  text-align: center;
  margin-top: 50px;
}

.c_skill p {
  /* margin-bottom: 10px; */
  margin-top: 20px;
}
.container_skill {
  width: 50%;
  background-color: #ddd;
  /* margin-top: 30px; */
  margin-left: 25%;
}
.skills {
  text-align: right;

  color: #000;
}

.skills:hover{
  cursor: pointer;
}
.html {
  width: 90%;
  background-color: rgb(255, 147, 15);
}
.css {
  width: 88%;
  background-color: rgb(34, 145, 255);
}
.js {
  width: 85%;
  background-color: rgb(255, 255, 16);
}
.backend {
  width: 92%;
  background-color: rgb(0, 255, 115);
}

.skills {
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.section_skills {
  /* background-color: #834ac0c2; */
  padding: 20px;
  padding-bottom: 230px;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

/*
.
.
.
.
.
.*/
/* Project section styling*/
/*
.
.
.
.
.
.*/

.card_container {
  margin-top: 60px;
  margin-left: 5%;
  margin-right: 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.card {
  font-family: "Roboto", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 310px;
  width: 320px;
  margin-top: 60px;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.card h4 {
  margin-top: 30px;
}

.cardinfo {
  display: flex;
  justify-content: left;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0;
  height: 300px;
  width: 170px;
  margin-left: 5px;
  /* background-color: white; */
}

.cardinfo p {
  margin-left: 5px;
}

.card img {
  margin-top: 5px;
  margin-bottom: 5px;
  height: 300px;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.cardinfo a {
  font-family: "Roboto", sans-serif;
  text-decoration: none;
  padding: 8px 15px;
  background-color: #000;
  color: #fff;
}

.cardinfo a:hover {
  background-color: #001761;
  color: #e9e9e9;
}

.card:hover {
  cursor: pointer;
}

.myprojects {
  padding: 20px;
  padding-bottom: 150px;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

/*
.
.
.
.
.
.*/
/* Contact section styling*/
/*
.
.
.
.
.
.*/

.mycontact {
  padding-top: 20px;
  padding-bottom: 150px;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.icons_container {
  font-family: "Roboto", sans-serif;
  text-align: center;

}

.icons_container img {
  width: 55px;
  margin-right: 20px;
}

.icons_container h4 {

  margin-top: 60px;
  margin-bottom: 10px;
  font-weight: 500;
 
}

.social_icons {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.work_icons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.social_icons a:hover,.work_icons a:hover{
    zoom: 105%;
}

/*
.
.
.
.
.
.*/
/* Footer section styling*/
/*
.
.
.
.
.
.*/

footer{
    margin-top: 50px;
    height: 150px;
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
    
  }
  footer i{
    margin-right: 8px;
  }
  footer i:hover{
    zoom: 120%;
    cursor: pointer;
  
  }
  
  footer div{
    flex-basis: 30%;
  }
  
  .footertitle{
    text-decoration: underline;
  }

  .middle img{
    width: 80px;
  }


  .bottom{
    height: 30px;
    background-color: #000;
}


  /*
.
.
.
.
.
.*/
/* Applying Media Queries*/
/*
.
.
.
.
.
.*/

@media only screen and (max-width:1200px){


    .container{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    .left_info{

        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .left_info{
        margin-left:0 ;
    }
    
}


@media only screen and (max-width:760px){

  .card_container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
   
  }

@media only screen and (max-width:550px){

    .nav1 p{
        font-size: 20px;
    }
    .card_container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
      }

     .bottom{
      margin-top: 50px;
     }
   
}
@media only screen and (max-width:500px){
    .nav1{
        height: 80px;
    }

    .nav1 p{
        font-size: 20px;
    }

    .right ul a{
        font-size: small;
    }

    .bottom{
      margin-top: 100px;
    }


}

@media only screen and (max-width:424px){
 
  .right_info{
    margin-left: 5%;
    margin-right: 5%;
  }


}

@media only screen and (max-width:420px){
  .bottom{
    margin-top: 100px;
  }

}


@media only screen and (max-width:410px){
    .right {
        display: flex;
        justify-content: right;
        align-items: center;
        margin-right: 20px;
        margin-left: 20px;
      }

      .nav1 p{
        font-size: 15px;
      }

      .work_icons img{
        margin-top: 15px;
      }

      .social_icons img{
        margin-top: 15px;
      }
      .right ul a{
        font-size: smaller;
    }

    .right_info{
      margin-left: 2%;
      margin-right: 2%;
    }

}

@media only screen and (max-width:380px){
    .card {
        font-family: "Roboto", sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 260px;
        width: 290px;
    
      }
      
      .card h4 {
        margin-top: 10px;
      }
      
      .cardinfo {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        margin-top: 0;
        height: 300px;
        width: 170px;
      }
      
      .cardinfo p {
        margin-left: 5px;
      }
      
      .card img {
        margin-top: 5px;
        margin-bottom: 5px;
        height: 250px;
       
      }
      
      .cardinfo a {
        font-family: "Roboto", sans-serif;
        text-decoration: none;
        padding: 5px 15px;
        margin-bottom: 10px;
    }

    .bottom{
      margin-top: 120px;
    }
}

@media only screen and (max-width:300px){
  .bottom{
    margin-top: 150px;
  }

  .right_info{
    margin-left: 1%;
    margin-right: 1%;
  }
}