@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');

/* smooth scrolling */
html{
  scroll-behavior: smooth;
}

body{
font-family:"roboto", sans-serif;
color:#E7E7E8 !important;
overflow-x: hidden;
background: #100E17;
}

.navbar{
  background: #100E17 !important;
  padding-top:0.8rem;
  padding-bottom:1rem;
  transition: all .4s ease;
}
.nav-link{
  font-weight:bold;
  font-size:1.1rem !important;
  margin:0.9rem 0.9rem 0;
  color:#E7E7E8 !important;
  transition: all .2s;
}
.nav-link.active{
  border-bottom: 1px solid #E7E7E8;
}
.nav-link:hover{
    color:#1ebba3 !important;
}
.navbar-dark.scrolled{
  background:#1E1E24 !important;
  box-shadow: 5px 0px 5px 1px #030304;
}

/* Profile Setup CSS */
.profile{
  width:100vw;
  position: absolute;
  top:33%; 
}
.intro{
  color:#fff;
}
.intro .callout{
  width:8rem;
  height:2.3rem;
  border-radius:1.2rem;
  border-bottom-left-radius: 0;
  text-align:center;
  line-height:2.3rem;
  background:#0BBBA0;
  margin-bottom:1.3rem;
  font-weight:bold;
  font-size:0.9rem;
  color:#E7E7E8 !important;
}
.intro h1{
  font-size:3.2rem;
  font-weight:700;
  color:#E7E7E8 !important;
  text-shadow:0.3rem 0.2rem 0.5rem rgba(0,0,0,0.6);
}
.intro h4{
  font-size:1.5rem;
  font-weight: bold;
  color:#E7E7E8;
  margin-bottom:2rem;
  letter-spacing: .2rem;
  text-transform: uppercase;
}

.intro p{
  font-size:0.9rem;
}
.intro p a{
  color:#E7E7E8 !important;
  font-weight:700;
  text-decoration:none;
}
.intro p .svg-inline--fa{
  margin-right:1.1rem !important   ;
}
.intro p :hover .svg-inline--fa{
color:#1ebba3 !important;
}
.social-icons p{
  margin-top:1.8rem;
  font-size:1.1rem;
  padding:0.5rem;
}
.social-icons p a{
  margin-right:0.2rem !important;
  display: inline-block !important;
  width:3rem !important;
  height:2.2rem !important;  
  border-radius:2px !important;
  transition:all .3s !important;
 cursor: pointer !important;
}
.social-icons p a .svg-inline--fa{
display: block !important;
margin:auto !important;
width:100% !important;
margin-top:.5rem !important;
}
.social-icons p a:hover{
   background:#E7E7E8 !important;
   border-radius:2px !important;
   cursor:pointer !important;
}
/* Profile Image */
.intro-col img{
  width:75% !important;
  padding:1.3rem;
  border:1.3rem solid #030304;
   border-radius:50%;
   background:#0A090F;
   display: block;
   margin:auto;
   margin-top:-2rem;
}
/* About me Secion */


.jumbotron{
  background:#100E17;
  border-radius:0;
  margin-bottom:0;
  padding-top:6rem;
  padding-bottom:0;
}

.jumbotron h1{
  font-size:2rem;
  font-weight:700;
  color:#E7E7E8 !important;
  margin-bottom:1rem;
}
#about .jumbotron .main-heading{
margin-left:1.5rem;
}

.jumbotron p{
  margin-bottom:0.8rem;
  color:#E7E7E8 !important;
  font-size:0.9rem !important;
  margin-left:1.5rem;
  font-size:1rem;

}
.jumbotron ul{
  padding:0px;
  margin-left:1.5rem;
  font-size:0.9rem !important;
}
.jumbotron li{
  width:auto;
  border: 1px solid #1ebba3;
  border-radius:2px;
  display:inline-block;
  margin:0.5rem;
  margin-left:0 !important;
  padding:0.5rem;
}
.jumbotron button{
  border:0px;
  border-radius:2rem;
  width:12rem;
  padding:0.8rem;
  background: #1ebba3;
  font-size:1rem;
  margin-top:0.8rem;
  height:2.8rem;
  margin-left:1.5rem;
}
.jumbotron button .svg-inline--fa{
  margin-left:0.8rem;
}
.jumbotron button:hover{
  background:#1ca18d;
}

/* Services */
.services{
  margin-top:8rem;
}
.services h1{
  color:#E7E7E8 !important;
  margin-bottom:3rem;
}

.services .about-card .svg-inline--fa{
  margin-bottom:1rem;
}
.services h3{
  font-size:1.5rem;
  font-weight:bold;
}
.services p{
  margin-left:0;
  font-size:0.9rem;
}
.services .about-card{
  background:#1E1E24;
  padding:1.8rem 2rem 1.8rem;
  width:100%;
  box-shadow:0rem 0rem 3rem black, -2rem 0rem 2rem rgba(0,0,0,.1) inset;
}
.purple-color{
color:#9774fa;
}
.iron-color{
  color:#ed7256;
}
.sky-color{
  color:#2796e2;
}
/* Skills Section */
#skills > .jumbotron h1{
  color:#E7E7E8 !important;
  font-weight:700;
  text-align:center;
}
#skills .progress{
 height:0.4rem;
 margin-bottom:1rem; 
 margin-top:0.4rem;
 background: #727276;
}
#skills .progress-bar{
height:0.4rem;
background:#1ebba3;
}
#skills .skills-text, .skill-percentage{
font-size:0.9rem;
color:#E7E7E8;
font-weight:bold;
}
#skills h1{
  margin-bottom:3rem;
}
#skills .row .content{
  border:0;
  text-align:center;
  color:#E7E7E8;
  padding-top:0.8rem;
  width:12rem;
}
#skills .row .content .chart{
  position:relative;
  height: 100px;
  width:103px;
  text-align:center;
  line-height: 100px;
  font-weight:bold;
  font-size:1rem;
  margin:auto;
  margin-bottom: 1rem;
}
#skills .row .content .chart canvas{
  position: absolute;
  left:0;
}

/* Experiences section */
#experiences .jumbotron h1, #work-experience .jumbotron h1{
  color:#E7E7E8 !important;
  font-weight:700;
  margin-bottom:3rem;
  margin-top:1rem; 
}
.experience-card, .work-experience-card{
  background:#1E1E24;
  padding:1.8rem 2rem 2rem;
  box-shadow:0rem 0rem 3rem black, -2rem 0rem 2rem rgba(0,0,0,.1) inset;
  width:100%;
  color:#E7E7E8 !important;
  margin-bottom:2rem;
  min-height:240px !important;
}
.work-experience-card{
  min-height:280px !important;
}
.experience-card h5, .work-experience-card h5{
  font-weight: bold;
  color:#E7E7E8;
}
.experience-card h6, .work-experience-card h6{
  font-weight: bold;
  color:#1ebba3;
  font-size:0.9rem;
}
.experience-heading{
  font-style: italic;
  color:#1ebba3;
}

/* Start of footer section */
.footer{
background: url('./img/map-overlay.png');
}
.footer-ribbon{
  background:#1E1E24;
  width:100%;
  padding: 1rem 2rem 0.5rem !important;
  box-shadow:0rem 0rem 3rem black, 0rem -2rem 2rem rgba(0,0,0,.1) inset;
}
.footer .circle{
  border: 1px solid #1ebba3; 
  border-radius:50%;
  height:100px;
  width: 100px;
  position: relative;
}
.footer .svg-inline--fa{
  width:5rem;
  height:1.2rem;
  position: absolute;
  top:2.7rem;
  left:0.5rem;
}
.footer h1{
  color:#E7E7E8 !important;
  font-weight:700;
  text-align:center;
  font-size:2rem;
  margin-bottom:1rem;
}
#contact{
  padding-top:6rem;
}
.footer h3{
  font-weight:500;
  color:#E7E7E8 !important;
}
.footer p{
font-size:0.9rem;
}
.footer input[type="text"],.footer input[type="email"] {
  background: none;
  margin:0rem 0rem 1rem 1rem !important;
  margin-left:0 !important;
  height:3.2rem;
  color:#E7E7E8;
}
.footer textarea{
  width:100%;
  background: none;
  margin:0rem 0rem 1rem 1rem !important;
  margin-left:0 !important;
  height:12rem;
  color:#E7E7E8 !important;
}
.footer input::placeholder, textarea::placeholder{
  color:#E7E7E8 !important;
}
.footer input[type="button"]{
  border:0;
  background: rgba(30,187,163,0.6);
  height:2.8rem;
  border-radius:1.5rem;
  color: #E7E7E8;
}
.footer input[type="button"]:focus{
  background: rgba(30,187,163,0.8) !important;
}

.footer textarea:focus{
  background: none !important;
  outline:none;
}
.wow { visibility: hidden; }

/* Settings for medium screen */
@media(max-width:991px){
  .landing{
    height:100vh !important;
  }
.profile{
  top:34%;
}
.profile img{
  width:100% !important;
  display:block;
}

.intro h1{
  font-size:2.4rem;
}
.intro h4{
  font-size:1.2rem;
}

.intro p{
  font-size:0.9rem;
}
.about-card{
  height:320px;
}
.special-padding-top{
  padding-top:0px;
}
/* Academic and certification section */
.experience-card{
  background:#1E1E24;
  width:100%;
}

/* Work Experience */
.work-experience-card p{
  text-align:left !important;
}
/* footer section */
.footer .circle{
  border: 1px solid #1ebba3; 
  border-radius:50%;
  height:80px;
  width: 80px;
  position: relative;
}
.footer .svg-inline--fa{
  width:5rem;
  height:1.2rem;
  position: absolute;
  top:2rem;
  left:-0.1rem;
}
.footer h3{
  font-size:1.5rem !important;
}
.footer p {
  font-size:0.8rem;
}
.footer input, textarea{
  font-size:0.8rem;
}
.special-padding-bottom{
padding-bottom:0px !important;
padding-top:0 !important;
}
}

/* For small screen devices */

@media(max-width:767px){
  body{
    overflow-x:hidden !important;
  }
  .landing{
    height:140vh !important;
  }
.profile{
  top:12%;
}
.profile img{
  width:90% !important;
}
.callout{
  margin:auto;
}
.intro h1{
  font-size:2.4rem;
  text-align: center;
}
.intro h4{
  font-size:1.2rem;
  text-align:center;
}

.intro p{
  font-size:0.9rem;
  text-align: center;
}
/* About Section */
.jumbotron{
  padding-top:4rem;
}

.jumbotron h1{
  text-align:center;
}

.jumbotron p{
  margin-left:0rem;
  text-align:center;
}

.jumbotron button{
  padding:0.8rem;
  background: #1ebba3;
  font-size:1rem;
  height:2.8rem;
  display: block;
  margin:auto !important;
  margin-top:2rem !important;
}
.padding-left{
padding-left:0 !important;
}
/* Services -- About us Sub Section */
.about-card{
  height:auto;
}
.services p{
  text-align:left;
  font-size:0.9rem;
}
/* ACademics and certification */
.experience-card{
  height:auto;
  width:100%;
}
/* Work Experience Section */

.experience-card p{
text-align:left;
}
#work-experience .jumbotron h1{
  margin-top:1rem;
}

/* footer section */
.footer .circle{
  margin:auto;
}
.footer h3, p{
text-align:center;
}

}