.body{
  font-family: Montserrat, arial;
}
.navbar{
  display: flex;
  align-items: center;
  background-color: rgb(0, 0, 0);
  height: 50px;
  color: white;
  position: relative;
  top: 10px;
  left: 40px;
  right: 0;
  max-width: 800px;
}
.Home, .Featured, .Bio, .Contact{
  margin-right: 10px;
  text-decoration: none;
  color: white;
  font-family: Roboto, Arial;
  font-weight: 500;
  font-size: 28px;
  transition: .15s;
}
/* nav animation */
.Home:hover, .Featured:hover, .Bio:hover, .Contact:hover{
  background-color: white;
  color: black;
  padding: 10px 15px 10px 15px;
  scale: 1.1;
}
/* nav animation */
.underline{
  position: relative;
  top: 22px;
  left: -23px;
  background-color: white;
  height: 2px;
  width: 20px;
}
.first-page{
 color: white;
 padding-top: 170px;
 height: 600px;
 /* background-color: lightgreen; */
}
.text{
  color: white;
  font-size: 20px;
  text-align: center;
}
.logo{
  display: flex;
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  border-right: 1px solid white;
  padding-right: 20px;
  height: 30px;
  align-items: center;
  font-size: 40px;
}
/* hahahaha */
/* .img{
  height: 400px;
  width: 400px;
  object-fit: cover;
  --_m: radial-gradient(#ffffff 69%,#d6d3d300 70%) 84.5%/50%;
  -webkit-mask-box-image: var(--_m);
             mask-border: var(--_m);
  clip-path: polygon(-41% 0,50% 91%, 141% 0);
} */
/* hahahahha */

.second-row-logo{
  display: flex;
  justify-content: space-around;
  flex: 1;
  max-width: 600px;
  margin: 0;
  height: 50px;
  align-items: center;
  margin-left: 30px;
}
/* navbar end */

.first-container{
  display: flex;
  /* background-color: lightpink; */
  justify-content: space-around;
  align-items: center;
  height: 450px;
}
.content{
  display: flex;
}
.content .content-left{
  /* background-color: rgba(144, 238, 144, 0.1); */
  max-width: 610px;
}
.content .content-right{
  /* background-color: rgba(255, 182, 193, 0.14); */
  max-width: 410px;
  margin-left: 20px;
}
.names{
  display: grid;
  grid-template-columns: 1fr;
}
.content-left .names p{
  font-family: Montserrat, Arial;
  font-weight: 700;
}
.first-name{
  font-size: 106px;
  margin: 0px;
}
.last-name{
  font-size: 190px;
  margin-top: -70px;
  margin-bottom: -30px;
}
.content-tags{
  display: flex;
  max-width: 600px;
}
 .tag-two, .tag-three{
  margin-left: 10px;
  padding: 10px 15px;
  font-family: Montserrat, arial;
  color: rgb(30, 33, 36);
  font-weight: 700;
  border-radius: 15px;
}
.tag-one{
  background-color: rgb(180, 196, 104);
}
.tag-two{
  background-color: rgb(255, 202, 79);
  min-width: 90px;
}
.tag-three{
  background-color: rgb(114, 137, 218);
}
.middle-dot{
  height: 11px;
}
.resume-section{
  font-family: Montserrat, arial;
  display: flex;
  text-align: center;
}
.resume{
  border: 1px solid white;
  padding: 6px 8px;
  font-size: 22px;
  margin-top: 30px;
  margin-left: 20px;
  border-radius: 10px;
  text-decoration: none;
  color: white;
  cursor: pointer;
  max-height: fit-content;
  transition: background-color 0.15s, color 0.15s;
}
.resume:hover{
  background-color: white;
  border: none;
  padding: 7px 9px;
  color:black;
}
.resume-two{
  border: 1px solid white;
  padding: 6px 8px;
  font-size: 22px;
  margin-top: 30px;
  margin-left: 20px;
  border-radius: 10px;
  text-decoration: none;
  color: white;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.resume-two:hover{
  background-color: white;
  border: none;
  padding: 7px 9px;
  color:black;
}
.rafipic{
  height: 409px;
  object-fit: cover;
  border-bottom: 3px solid white;
  border-left: 3px solid white;
  border-radius:20px;

}

/* first section end */



/* featured section start */
.featured-section{
  /* background-color: rgba(173, 216, 230, 0.278); */
  padding-top: 15px;
  padding-bottom: 80px;
  width: 100%;
}

.h2-title{
  color: white;
  width: 100%;
}
.h2-title h2{
  text-align: center;
  font-size: 52px;
}
.featured-content{
  display: flex;
  width: 100%;
  /* background-color: rgba(144, 238, 144, 0.432); */
  justify-content: center;
}
.featured-left{
  /* background-color: rgba(255, 182, 193, 0.445); */
  order: 1;
  display: block;
}
.featured-right{
  /* background-color: rgba(173, 216, 230, 0.442); */
  order: 2;
  text-align: center;
  margin-left: 20px;
}
.featured-left-upper{
  overflow: visible;
  max-width: 100%;
}
.featured-img-left{
  width: 502px;
  border-radius: 6px;
  transition: box-shadow 0.25s;
  cursor: pointer;
}
.featured-img-left:hover{
  box-shadow: 0px 0px 50px rgba(254,254,254, 0.55);
}
.featured-left-lower{
  /* display: block;
  margin: 0 auto; */
  text-align: center;
}
.ft-btn{
  font-family: Roboto, Montserrat, Arial;
  border: none;
  color: white;
  background-color: rgb(255, 68, 68);
  font-weight: 500;
  font-size: 20px;
  border-radius: 5px;
  padding: 10px 8px;
  transition: background-color 0.25s, color 0.25s;
  cursor: pointer;
  margin-top:30px;
}
.ft-btn:hover{
  background-color: transparent;
  border: 2px solid rgb(255, 68, 68);
  padding: 8px 6px;
  color: rgb(255, 68, 68);
}

.featured-right h2{
  margin: 0;
}
.featured-right .text-upper{
  font-size: 36px
}
.text-lower-first-sec{
  font-size: 16px;
}
.featured-right .text-lower{
  font-size: 32px;
}
.featured-right-lower{
  overflow: visible;
}
.featured-img-right{
  max-width: 500px;
  border-radius: 6px;
  cursor: pointer;
  transition: box-shadow 0.25s;
  border: 1px solid rgba(255, 255, 255, 0.314);
}
.featured-img-right:hover{
  box-shadow: 0px 0px 50px rgba(254,254,254, 0.55);
}
hr{
  width: 80%;
  margin-bottom: 50px;
  margin-top: 50px;
}

.featured-left-yt{
  order: 1;
  display: block;
  /* background-color: lightgreen; */
}
.featured-left-upper-yt{
  overflow: visible;
  max-width: 100%

}

.yt-vid-one{
  width: 500px;
  height: 281px;
  border-radius: 10px;
  transition: box-shadow 0.25s;
}
.yt-vid-one:hover{
  box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.575);
}
.featured-right-yt{
  order: 2;
  text-align: center;
  margin-left: 20px;
}
.featured-right-lower-yt{
  overflow: visible;
  max-width: 500px;
}
.yt-vid-two{
  width: 500px;
  height: 281px;
  border-radius: 10px;
  transition: box-shadow 0.25s;
}
.yt-vid-two:hover{
  box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.575);
}

.featured-left-third{
  /* background-color: rgba(0, 255, 255, 0.438); */
  overflow: visible;
  width: 600px;
}
.feated-img-left-content{
  width: 100%;
}
.featured-img-left-third{
  width: 100%;
  border-radius: 6px;
  transition: box-shadow 0.25s;
}
.featured-img-left-third:hover{
  box-shadow: 0px 0px 50px rgba(254,254,254, 0.55);
}
.featured-right-third{
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: start;
  margin-left: 30px;;
  /* background-color: rgba(255, 0, 123, 0.438); */
  line-height: 66px;;
}
.text-upper-right-third, .text-lower-right-third, 
.p-lower-right-third{
  margin:0;
}


.text-upper-right-third{
  font-size: 45px;
}
.text-lower-right-third{
  font-size: 50px;
}
.p-lower-right-third{
  font-size: 28px;
  font-weight: 300;
}
.ft-third-btn{
  font-family: Roboto, Montserrat, Arial;
  border: none;
  color: white;
  background-color: rgb(255, 68, 68);
  font-weight: 500;
  font-size: 20px;
  border-radius: 5px;
  padding: 10px 8px;
  transition: background-color 0.25s, color 0.25s;
  cursor: pointer;
  margin-top:30px;
}
.ft-third-btn:hover{
  background-color: transparent;
  border: 2px solid rgb(255, 68, 68);
  padding: 8px 6px;
  color: rgb(255, 68, 68);
}
.featured-content-third{
    display: flex;
    width: 100%;
    /* background-color: rgba(144, 238, 144, 0.432); */
    justify-content: center;

}


/* featured section end */

/* bio section */

.bio-section{
  /* background-color: rgba(144, 238, 144, 0.432); */
  display: flex;
  justify-content: center;
}
.bio-left-container{
  /* background-color: rgba(255, 145, 162, 0.411); */
  max-width: 650px;
  display: flex;
  flex-direction: column;
}

/* .bio-right-container{
  background-color: rgba(145, 239, 255, 0.411);
} */


.bio-left-lower{
  margin: 0 auto;
  /* background-color: bisque; */
}
.bio-left-img{
  width: 80px;
}
.bio-header{
  font-size: 32px;
  font-weight: 500;
  margin:0;
}
.bio-maintext{
  margin-top: 20px;
  line-height: 29px;
  font-size: 18px;
  margin-bottom: 0px;
  /* text-justify: inter-word; */
}
.bio-right-container{
  margin-left: 20px;
}
.text-experiences{
  margin:0;
  font-size: 36px;
}
.bio-right-inner-cont h2{
  margin-bottom: 0px;
}
.bio-right-inner-cont p{
  margin-top: 12px;
  font-weight: 500;
}
/* bio section end */

/* contact me section */
.contact-me{
  /* background-color: rgba(144, 238, 144, 0.395); */
  display: flex;
  justify-content: center;
  height: 800px;
  box-sizing: border-box;
  padding: 50px 10px;
}
.contact-inner-container{
  font-size: 22px;
  /* background-color: lightgray; */
}
.contact-inner-container p{
  /* background-color: rgba(255, 182, 193, 0.527); */
  margin-bottom: 40px;
}
.inner-h1{
  width: 700px
}
.inner-h1 h1{
  font-size: 50px;
  margin-bottom: 0;
}
.contact-lower-images{
  overflow: hidden;
}
.socmed-img{
  height: 80px;
 margin-right: 40px;
  opacity: 0.3;
  transition: opacity 0.20s;
}
.socmed-img:hover{
  opacity: 1;
}
.contact-btn-container{
  margin-bottom: 40px;
}
.contact-btn{
  color: white;
  background-color: black;
  border: 1px solid white;
  padding: 10px 15px;
  font-size: 36px;
  border-radius: 16px;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
}
.contact-btn:hover{
  color: black;
  background-color: white;

}