/*
#3D8D7A
#B3D8A8
#FBFFE4
#A3D1C6
*/
html{

  color:#495057 !important;
}
body, .text-body-secondary, .text-body-secondary, label{
  font-size: 1rem !important;
  line-height: 1.5 !important;
  font-family: "Roboto", sans-serif !important;
}

.nav-bar{
  background-color:#ebfbee;
}
.navbar-collapse {
    /* background-color:#ebfbee; */
    flex-grow: 0!important;
}
.nav-link:link,.nav-link:visited{
  font-weight:500;
  color:#495057!important;
}
.nav-link:hover,.nav-link:active{
  color:#212529!important;
    background-color:#3D8D7A;
    border-radius: .5rem;
}
.logo-name{
  font-family: cursive;
  background-color:#3D8D7A;
  color:#212529;
  padding:.1rem .5rem;
  border-radius: .5rem;
}
header.border-bottom{
      border-bottom-color: #3D8D7A !important;
}
.hero-img{
  background-image:url(./images/typing-on-computer.jpg),linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
  background-blend-mode: overlay;
  background-position:center;
  background-size:cover;
  color:#fff;
}

h1{
  font-size: 1.5rem !important;
  text-transform: capitalize;
  letter-spacing: 2px;
  line-height: 1.5 !important;
}
.hero-h1{
  width: 35rem;
}
.btn-primary{
  background-color:#3D8D7A !important;
  border:none !important;
}
.btn-primary a{
  text-decoration: none;
  color:#212529;
}
#container, footer,.summary-section, .experience-section{
  background-color:#ebfbee !important;
}
.my-profile{
  position: relative;
  z-index:1;
}
.profile::after{
  content: "";
  border: 3px solid #3D8D7A;
  width: 200px;
  height: 300px;
  position:absolute;
  left: 31%;
  border-radius: 0.5rem;
  top: 27%;
}
.grid-container{
  display:grid;
  grid-template-columns:1fr 2fr 2fr;
  grid-template-rows: 1fr;
  justify-content:space-between;
  gap:2rem;
}
.about-me{
  writing-mode: vertical-lr;
 text-orientation: upright;
 vertical-align: middle;
  background-color: #3D8D7A;
  font-weight: bold;
  color:#212529;
  border-radius: .5rem;
}

.about-para-first{
  border-right: 2px solid #3D8D7A;
  padding-right:25px;
}
hr{
  border-top-color: #3D8D7A !important;
}
.skills-tech{
  text-decoration:none;
  color:inherit;
  font-weight:300;
  font-style: italic;
}
.contact-me{
  display:flex;
  justify-content: space-around;
  gap:2rem;
}
.icon{
  width:35px;
  background-color:#3D8D7A;
  padding:.2rem;
  margin: 1.8rem 0px 0.5rem 0px;
  color:#fff;
  border-radius: .5rem;
}
.icon-text{
  text-decoration:none;
  color:#495057
}
.bg-body-secondary {
    --bs-bg-opacity: none !important;
}
.list-group-item{
  border-color: #3D8D7A !important;
}
@media(max-width:600px){

  .nav-link:link,.nav-link:visited{
    width:135px;
    margin-top:.5rem;
  }
  .nav-link:hover,.nav-link:active{
    color:#212529!important;
    background-color:#3D8D7A;
    border-radius: .5rem;
    padding:.5rem;
    width:135px;
  }
  h1 {
    font-size: 1.2rem !important;
    width: 24rem!important;
    padding-right: 1.5rem;
}
    .my-profile {
        position: relative;
        z-index:1;
      left: 10%;
    }
  .profile::after {
    content: "";
    border: 3px solid #3D8D7A;
    width: 200px;
    height: 300px;
    position: absolute;
    left: 36%;
    border-radius: 0.5rem;
    top: 28%;
}
  .hero-title{
    padding-top:2rem;
    max-width: 100% !important;
    padding-left: 3rem !important;
  }
  .grid-container {
    display: grid;
    grid-template-columns:1fr;
    grid-template-rows: 1fr;
    justify-content: space-between;
    gap: 2rem;
}
.about-me {
    writing-mode:horizontal-tb;
    text-orientation: upright;
    vertical-align: middle;
    background-color: #3D8D7A;
    font-weight: bold;
    color: #212529;
    border-radius: 0.5rem;
    padding:1rem !important;
}
.pt-5 {
    /* padding-top: 0px!important; */
    /* padding: 0px 1.2rem 1.2rem 1.2rem !important; */
}
.skills-tech {
    font-size: .9rem !important;
}
.fs-5 {
    font-size: 1.1rem!important;
}
.about-para-first {
    border-right: hidden;
    padding-right: 0px;
}
  .contact-me {
      display: grid;
      justify-content: space-around;
      gap: 2rem;
  }
  .text-center{
    text-align: left !important;
  }

  .p-5 {
    padding: 1rem!important;
}
/* .pro-summary{
  text-align: left !important;
  padding:1rem !important;
} */
.about-para-first {
    border-right: hidden;
    padding-right: 0px;
}
.justify-content-end, .copy-right{
  font-size: .8rem;
  padding: 0px 0.5rem;
}
.justify-content-end{
  padding: 0px 0.5rem;
}
 .copy-right{
  padding-left: 0.5rem;
}
.nav {
    --bs-nav-link-padding-y: 0rem !important;
    display: block !important;
}
}

@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
    .profile::after {
      left: 42%;
      /* top: 19%; */
    }
    .my-profile {
    left: 40%;
    }
    .hero-title{
      margin-left: 9rem;
      padding-top: 3rem;
      }
      .py-3 {
      padding-left: 1rem !important;
      }
      .grid-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        justify-content: space-between;
        gap: 2rem;
        }
      .about-me {
        writing-mode: horizontal-tb;
        }
        .about-para-first {
          border-right:0px;
          }
          .col-md-4 {
          flex: 0 0 auto;
          width: 100% !important;
          }
        #hanging-icons{
          padding-left: 0px !important;
        }
        .nav {
        --bs-nav-link-padding-y: 0rem !important;
        display: block !important;
        }
      }

      @media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2) {
    .profile::after {
      left: 42%;
      top: 20%;
      }
      .my-profile {
        position: relative;
        z-index: 1;
      left: 40%;
      }
      .hero-title{
        padding-left: 5rem !important;
        padding-top: 3rem;
        }
        .py-3 {
        padding-left: 1rem !important;
        }
        .grid-container {
          display: grid;
          grid-template-columns: 1fr;
          grid-template-rows: 1fr;
          justify-content: space-between;
          gap: 2rem;
          }
        .about-me {
          writing-mode: horizontal-tb;
          }
          .about-para-first {
            border-right:0px;
            }
            .col-md-4 {
            flex: 0 0 auto;
            width: 100% !important;
            }
          #hanging-icons{
            padding-left: 0px !important;
          }
        .nav {
        --bs-nav-link-padding-y: 0rem !important;
        display: block !important;
        }
}