/* TAG SELECTOR */
body {
  text-align: center;
  /* background-image: linear-gradient(to right bottom, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1); */

}

h1,h2,h3,h4,h5,h6 p {
  /* font-family: 'Major Mono Display', sans-serif; */
  color: white
}





                                                                                /* CLASS SELECTOR */
                                                                                /* OUTLINE OF THE WEBSITE */


.landing-Page{
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.main-card{
  background-color: white;
  height: 2300px;
  margin-bottom: 100px;
  border-end-end-radius: 10px;
  border-end-start-radius: 10px;
}


.top-head{
  height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.circle{
  width: 150px;
  height: 150px;
  border-radius: 75px;
  /* border: 5px solid #D9DCD6; */
  margin-bottom: 25px;
  object-fit: cover;
  object-position: bottom;
}

.circle-2{
  width: 300px;
  height: 300px;
  border-radius: 150px;
  outline: 2px solid rgba(211, 211, 211, 0.466);
  padding: 10px;
  margin-bottom: 25px;
  object-fit: cover;
  object-position: center;
}

.circle-2T{
  height: 300px;
  width: 300px;
}

.project-circle,.project-circle-fill{
  width: 250px;
  height: 250px;
  border-radius: 125px;
  outline: 2px solid rgba(211, 211, 211, 0.466);
  outline-offset: 10px;
  border: 2px solid  rgba(211, 211, 211, 0.466);
  padding: 10px;
  margin-bottom: 25px;
  object-fit: cover;
  object-position: center;
}

.project-circle-fill{
  object-fit:scale-down;
  background: rgb(248, 248, 248);
  padding: 10px;
}

.img-circle{
  width: 100%; 
}

/* // NEEDED FOR UPDATE// */

.img-size{
  width: 250px;
  height: 250px;
}

.intro-title,.intro-job-detail{
  margin: 15px auto;
}

.navbar-nav > li{
  margin-left:30px;
  margin-right:30px;
}

.nav-item{
  font-size: 22px;
}

.navbar{
  height: 75px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}


/* Grid-Section */

.grid-section{
  display: grid;
  grid-template-columns: 1fr 400px;
  padding: 50px;
}

  .intro-grid-1, .intro-grid-2{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;
    text-align: left;
  }

  .intro-grid-2{
    align-items: center;
  }

  .title{
    color: black;
    font-size: 48px;
    font-weight: bold;
  }

  .text{
    text-align: justify;
    text-align-last: center;
    line-height: 32.5px;
  }

  /* PROJECT SECTION */

.line-section{
  margin: 0 auto;
  border-top: 2px solid;
  border-color: rgba(211, 211, 211, 0.466);
  width: 95%;
  height: 1px;
  margin-top: 50px;
}

.project-box{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.project-title{
  color: black;
  font-size: 48px;
  font-weight: bold;
}


.project-text{
  color: black;
  line-height: 30px;
  font-size: 18px;
  text-align: justify;
  text-align-last: center;
}

/* EXPERIENCE & SKILLS */

.skill-row{
  padding: 25px;
}

.skills-box{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.logo-box{
  width: 64px;
  display: flex;
  justify-content: center;
}

.skill-logo{
  object-fit: contain;
  object-position: center;
  width: 120px;
  height: 120px;
}

.bg-1-html,.bg-2-css
,.bg-3-js,.bg-4-bs,.bg-5-py,
.bg-6-sql{
  padding: 30px;
  background-color: wheat;
}

.bg-1-html{
  background-color: #a5ccd196;
  border-end-start-radius: 15px;
  border-top-left-radius: 15px;
}

.bg-2-css{
  background-color: #a4c8cd96;
}

.bg-3-js{
  background-color: #a4c6cb96;
}

.bg-4-bs{
  background-color: #a3c3c896;
}

.bg-5-py{
  background-color: #a2bec496;
}

.bg-6-sql{
  background-color: #a0b9bf96;
  border-end-end-radius: 15px;
  border-top-right-radius: 15px;
}

.skill-text{
  text-align: justify;
  font-size: 18px;
  line-height: 32.5px;
  text-align-last: center;
}


/* BLOG - SECTION */

.btn-bg{
  background-image: linear-gradient(to left top, 
  #d16ba5, #c777b9, #ba83ca, 
  #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4,
   #69bff8, #52cffe, #41dfff, #46eefa,
  #5ffbf1);
  padding: 12.5px 35px;
  border: none;
  border-radius: 10px;
  color: white;
}

/* Footer-Section */

.footer{
  margin-bottom: 100px;
}

.footer-text{
  text-align: left;
}

.footer-btn{
  text-align: right;
}

.footer-icons-box{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: -10px;  
}

div .footer-icon{
  background: transparent;
}

.footer-icon{
  width: 60px;
  height: 60px;
  border: 1px solid black;
  padding: 15px;
  border-radius: 30px;
  margin: 10px;
  transition-property: opacity;
  transition-duration: 0.4s;
}



.footer-icon:hover{
  opacity: 0.5;
}

.fib{
  width: 100%;
}



/* MEDIA QUERY SCREENSIZE MD */

@media (max-width: 1099px){
  .main-card{
    background-color: white;
    height: 2425px;
    margin-bottom: 100px;
    border-end-end-radius: 10px;
    border-end-start-radius: 10px;
  }


}

@media (max-width: 972px){
  .main-card{
    background-color: white;
    height: 3650px;
    margin-bottom: 100px;
    border-end-end-radius: 10px;
    border-end-start-radius: 10px;
  }

  .md-margin{
    display: flex;
    justify-content: center;
  }

  .footer-icon{
    width: 45px;
    height: 45px;
    border: 1px solid black;
    padding: 10px;
    border-radius: 30px;
    margin: 10px;
    transition-property: opacity;
    transition-duration: 0.4s;
  }

}

@media (max-width: 768px){
  .main-card{
    background-color: white;
    height: 3775px;
    margin-bottom: 100px;
    border-end-end-radius: 10px;
    border-end-start-radius: 10px;
  }

}

@media (max-width: 640px){
  .main-card{
    background-color: white;
    height: 4500px;
    margin-bottom: 100px;
    border-end-end-radius: 10px;
    border-end-start-radius: 10px;
  }
}

@media (max-width: 520px){
  .main-card{
    background-color: white;
    height: 4000px;
    margin-bottom: 100px;
    border-end-end-radius: 10px;
    border-end-start-radius: 10px;
  }
}

@media (max-width: 480px){
  .main-card{
    background-color: white;
    height: 4850px;
    margin-bottom: 100px;
    border-end-end-radius: 10px;
    border-end-start-radius: 10px;
  }
}

@media (max-width: 420px){
  .main-card{
    background-color: white;
    height: 5350px;
    margin-bottom: 100px;
    border-end-end-radius: 10px;
    border-end-start-radius: 10px;
  }
}