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

html,
body {
  height: 100%;
  width: 100%;
  font-family: "poppins", sans-serif;
  color: #222;
  scroll-behavior: smooth;
}

.navbar {
  padding: 0.8rem;
}

.navbar-nav li {
  padding-right: 20px;
}

.nav-link {
  font-size: 1.1em !important;
}

.padding {
  padding-bottom: 0.7rem !important;
}

.welcome {
  width: 75%;
  margin: 0 12% !important;
  padding-top: 2rem;
}

.welcome hr {
  align-items: left;
  border-top: 2px solid #b4b4b4;
  width: 55%;
  margin-top: 0.3rem;
  margin-bottom: 1rem;
  margin-left: 1%;
}

.multiLang-hello {
  color: orange;
  font-family: "Kaushan Script", cursive;
}

.multiLang-hello::before {
  content: "";
  animation: animate 1 1.5s;
  content: "Hello!";
}

.lead-text-highlight {
  font-size: 5vh;
}

@keyframes animate {
  0% {
    content: "Hola!";
  }
  15% {
    content: "Bonjour!";
  }
  30% {
    content: "Guten tag!";
  }
  45% {
    content: "Namaste!";
  }
  60% {
    content: "Olá!";
  }
  75% {
    content: "Konnichiwa!";
  }
  100% {
    content: "Salve!";
  }
}

.flex-container {
  /*border: 3px solid black;*/
  background-color: #fafafa;
  padding: 10px;
  margin: 10px;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: flex-start;
}

.fitem {
  /*  border: 3px solid black;
  background-color: red;*/
  color: #fff;
  padding: 2px;
  margin: 10px;
  flex-basis: 100%;
}

.flex-item-1 {
  position: relative;
  z-index: 3;
}

.experience_date {
  /* border: 3px solid black; */
  padding: 2px;
  margin: 10px;
  color: darkgray;
}

.experience_title {
  /* border: 3px solid red; */
  padding: 2px;
  margin: 10px;
}

.project_image_console {
  position: sticky; /*DO NOT CHANGE*/
  top: 10%; /*DO NOT CHANGE*/
  z-index: 2; /*DO NOT CHANGE*/
  left: 438px; /*DO NOT CHANGE*/
  max-width: 100%; /*DO NOT CHANGE*/
}

.project_image_content {
  position: sticky; /*DO NOT CHANGE*/
  top: 12%; /*DO NOT CHANGE*/
  z-index: 1; /*DO NOT CHANGE*/
  left: 573px; /*DO NOT CHANGE*/
  max-width: 86.5%; /*DO NOT CHANGE*/
}

/*.contact-img{
    height: 17%; 
    width: 17%; 
  }*/

/*  .contact-img1:hover{
    animation: ease-out;
  }
    .contact-img2:hover{
    height: 14%;
    width: 14%;
  }
    .contact-img3:hover{
    height: 14%;
    width: 14%;
  }
    .contact-img4:hover{
    height: 14%;
    width: 14%;
  }*/

@media screen and (max-width: 990px) {
  .flex-container {
    flex-wrap: wrap;
  }
  .flex-item-4 {
    writing-mode: unset;
    flex-basis: 100%;
  }
  .flex-item-1 {
    flex-basis: 100%;
    order: 1;
  }
  .flex-item-2 {
    order: 2;
  }
  .flex-item-3 {
    order: 3;
  }
}

footer {
  background-color: #3f3f3f;
  color: #d5d5d5;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

/*---Firefox Bug Fix --*/
.carousel-item {
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}
/*--- Fixed Background Image --*/
figure {
  position: relative;
  width: 100%;
  height: 60%;
  margin: 0 !important;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#fixed {
  background-image: url("img/mac.png");
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
  padding: 1rem;
}

/*//////////////////////////////////////////////////////////////////////////////*/
/*Media Queries */
/*//////////////////////////////////////////////////////////////////////////////*/

/*small : yellow
medium : violet
med-large:green
large :orange
extra-large:blue
*/

/*Small (sm) devices (landscape phones, 576px)*/

@media (max-width: 576px) {
  .header-text {
    font-size: 2rem !important;
  }
  .flex-container {
    /*border: 3px solid yellow;*/
  }

  .footer-lead {
    font-size: 1rem !important;
  }
  .lead-text-highlight {
    font-size: 3vh;
  }
  .project_image_console {
    position: sticky; /*DO NOT CHANGE*/
    top: 11.3%; /*DO NOT CHANGE*/
    z-index: 2; /*DO NOT CHANGE*/
    left: 438px; /*DO NOT CHANGE*/
    max-width: 100%; /*DO NOT CHANGE*/
  }
}

/*Medium (md) devices (tablets, 576px to 768px)*/
@media (min-width: 576px) and (max-width: 768px) {
  .header-text {
    font-size: 2rem !important;
  }
  .flex-container {
    /*border: 3px solid violet;*/
  }
  .footer-lead {
    font-size: 1rem !important;
  }
  .lead-text-highlight {
    font-size: 3vh;
  }
}

/*Med-large (m-lg) devices (desktops, 768px to 992px)*/
@media (min-width: 768px) and (max-width: 992px) {
  .header-text {
    font-size: 3rem !important;
  }
  .flex-container {
    /*border: 3px solid green;*/
  }
  .footer-lead {
    font-size: 1rem !important;
  }
  .lead-text-highlight {
    font-size: 4vh;
  }
  .project_image_console {
    position: sticky; /*DO NOT CHANGE*/
    top: 10.8%; /*DO NOT CHANGE*/
    z-index: 2; /*DO NOT CHANGE*/
    left: 438px; /*DO NOT CHANGE*/
    max-width: 100%; /*DO NOT CHANGE*/
  }
}

/* Large devices (desktops, 1200px and up)*/
@media (min-width: 992px) and (max-width: 1200px) {
  .header-text {
    font-size: 3.5rem !important;
  }
  .flex-container {
    /*border: 3px solid orange;*/
  }
  .footer-lead {
    font-size: 1.2rem !important;
  }
  .lead-text-highlight {
    font-size: 5vh;
  }
  .project_image_console {
    position: sticky; /*DO NOT CHANGE*/
    top: 9%; /*DO NOT CHANGE*/
    z-index: 2; /*DO NOT CHANGE*/
    left: 438px; /*DO NOT CHANGE*/
    max-width: 100%; /*DO NOT CHANGE*/
  }
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
  .header-text {
    font-size: 3.5rem !important;
  }
  .flex-container {
    /*border: 3px solid blue;*/
  }
  .footer-lead {
    font-size: 1.2rem !important;
  }
  .lead-text-highlight {
    font-size: 5vh;
  }
}

/*
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/