/* You can add custom CSS and extend Boostrap styles in this file.  Remember, Bootstrap is just CSS at the end of the day! */

/* Making the margin and padding of the body to 0. */
* {
  margin: 0;
  padding: 0;
}

/* Adding bg-color and setting postion for nav bar. */
.navbar {
  background-color: #2C394B;
  position: fixed;
  top: 0;
}

/* Setting the color of the home button. */
.navbar .navbar-brand {
  color: #fafafa;
  font-size: 2em;
}

/* Setting the font style, padding and font-size for the nav bar. */
.navbar .navbar-nav .nav-link {
  font-family: "Gill Sans", sans-serif;
  font-size: 1.3em;
  padding: 0.6em;
}

/* Making the bg color of nav bar links change to a different color when hovering. */
.navbar .navbar-nav .nav-link:hover {
  background-color: #334756;
}

/* Setting the nav bar compatible with smaller screens. */
@media only screen and (min-width: 992px) {
  .navbar {
    padding: 0;
  }
  .navbar .navbar-nav .nav-link {
    padding: 1em 0.7em;
  }
  .navbar .navbar-brand {
    padding: 0 0.8em;
  }
}

/*  Setting the hero image.  */
#hero-section {
  text-align: center;
  background-image: url("img/background.jpeg");
  min-height: 100vh; 
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  width: 100vw;
  vertical-align: middle;
}

/* Making an overlay to add opacity. */
.overlay {
  position: absolute;
  background-color: rgba(0,0,0,0.5);
  width: 100%;
  height: 100%;
  z-index: 1;
} 

/* Positioning the texts and images of hero image. */
.hero-elements {
  position: absolute;
  width: 100vw;
  height: 100vh;
  vertical-align: middle;
  text-align: center;
  padding: 4em 0 0em 0;
  margin-top: 15%;
}

/* Styling the h1 text inside the overlay. */
.overlay h1 {
	position: relative;
	margin: 0;
  font-size: 2.5em;
  color: #ffffff;
  z-index: 2;
  margin-top: 1.5%;
  font-family: 'Overpass', sans-serif;
}

/* Styling the h3 text inside the overlay. */
.overlay h3 {
	position: relative;
	margin: 0;
  font-size: 1.5em;
  color: #ffffff;
  z-index: 2;
  font-family: 'Lexend Zetta', sans-serif;
}

/* Styling the image inside the overlay. */
.overlay img {
  vertical-align: middle;
  width: 25vh;
  height: 25vh;
  border-radius: 50%;
  object-fit: cover;
  border: solid rgba(255,255,255,0.2) 8px;
}

/* Styling the mission section. */
#mission-section {
  background-color: #142F43;
  padding-bottom: 6%;
}

/* Styling the h1 text inside the mission section. */
#mission-section h1 {
  font-size: 3em;
  color: #7a94a8;
  text-align: center;
  padding-bottom: 5%;
  padding-top: 6%;
}

/* Styling the p text inside the mission section. */
.mission-class p {
  color: #bac3ca;
  font-size: 1.2em;
  font-family: 'Inter', sans-serif;
}

/* Styling the image inside the mission section. */
.mission-image {
  width: 30vw;
  border-radius: 35%;
  border: solid 0.2em rgb(56, 94, 122, 0.5);
  margin-bottom: 3%;
}

@media only screen and (max-width: 750px) {
  .mission-image {
    width: 45vw;
  }
}

/* Styling the skills section. */
#skills-section {
  background-color: #082032;
  padding-bottom: 6%;
}

/* Styling the h1 text of the skills section. */
#skills-section h1 {
  font-size: 3em;
  color: #8195b1;
  text-align: center;
  padding-bottom: 5%;
  padding-top: 6%;
}

/* Styling the images of the skills section. */
.skills-info-and-text img {
  height: 20vh;
  padding-bottom: 6%;
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Styling the p texts of the skills section. */
.skills-info-and-text p {
  text-align: center;
  color: #aab5c5;
  font-size: 1.2em;
  font-family: 'IBM Plex Mono', monospace;
}

/* Styling the inspiration section. */
#inspiration-section {
  background-color: #142F43;
  padding-bottom: 6%;
}

/* Styling the inspiration scetion heading. */
#inspiration-section h1 {
  font-size: 3em;
  color: #7a94a8;
  text-align: center;
  padding-bottom: 5%;
  padding-top: 6%;
}

/* Making the carousel slide to have opacity with black color. */
.carousel-item:after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:rgba(0,0,0,0.6);
}

/* Styling the images of carousel slides. */
.carousel-item img {
  object-fit: cover;
  object-position: center; 
  height: 87vh;
  overflow: hidden;
}

/* Making the carousel caption on top. */
.carousel-caption {
  z-index: 1;
  font-family: 'Tiro Tamil', serif;
}

/* Styling the captions inside the carousel slides. */
.carousel-caption h5 {
  font-size: 2.2em;
}

/* Styling the captions inside the carousel slides. */
.carousel-caption p {
  font-size: 1.5em;
}

/* styling the font and background of the contact section. */
#contact-section {
  background-color: #082032;
  padding-bottom: 6%;
}

/* Styling the h1 section of the contact section. */
#contact-section h1 {
  font-size: 3em;
  color: #8195b1;
  text-align: center;
  padding-bottom: 5%;
  padding-top: 6%;
}

/* Styling the icons in the contact section. */
.contact-icons i {
  height: 20vh;
  padding-bottom: 6%;
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-size: 2.5em;
  color: #aab5c5;
	transition: transform .5s;
}

/* Styling the footer section. */
#footer-section {
  background-color: #000000;
  color: #ffffff;
}

.contact-icons i:hover {
	opacity: 0.5;
	transform: scale(1.5);
}