/* Header & Footer Code Starts */ 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    font-family: 'Roboto', sans-serif;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.header{
  border-bottom: 1px solid #1F2430;
  font-variant: small-caps;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background-color: #fcde67;
}
.hamburger {
  display: none;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  transition: all 0.3s ease-in-out;
  background-color: #1F2430;
}
.nav-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-item {
  margin-left: 5rem;
}

.nav-link{
  font-size: 1.6rem;
  font-weight: 400;
  color: #1F2430;
  transition-duration: 0.5s;
}

.nav-link:hover{
  background-color:#1F2430; 
  color: #fcde67;
  border-radius: 20px;
  padding:5px 10px;
  transition-duration: 0.5s;
}

.active{
  color:#1F2430;
  text-decoration: underline;
}

.nav-logo{
  font-size: 2.1rem;
  font-weight: 500;
  color: #1F2430;
}

.footer{
    width: 100%;
    height: 30vh
}

.f-container {
  color: #1F2430;
  background-color: #fcde67;
  text-align: center;
  padding: 1cm;
  font-size: 15px;
  margin-top: -1cm;
  font-variant: small-caps;
}

.f-container > span{
  color: #1F2430;
}

.f-container > p{
  color: #1F2430;
}

.copyright_footer{
    text-align: center;
    font-size: 15px;
    padding: 15px;
    background-color: #1F2430;
    color: #fcde67;
    font-variant: small-caps;
}

/* Header & Footer Code Ends */

.tech{
  position: absolute;
  top: 3.5cm;
  left:3cm;
  color: white;
  font-size: 45px;
  font-variant: small-caps;
}
.para{
  color: #1F2430;
  background-color: #fcde67;
  box-shadow: 0 0 50px #fcde67;
  font-size: 15px;
  font-variant: small-caps;
  padding: 1cm;
  line-height: 25px;
  border-radius: 10px;
  margin:1cm;
  position: relative;
  bottom: 50px;
  transition-duration: 1s;
}
.para:hover{
  background-color: #5bccf6;
  box-shadow: 0 0 100px #5bccf6;
  transition-duration: 1s;
}
.blue_div{
  width: 50%;
  position:relative;
  font-size: 20px;
  bottom: 60px;
  color: #1F2430;
  background-color: #5bccf6;
  padding:20px;
  margin: 10px;
  font-variant: small-caps;
}

.secRow{
  background-color: #1F2430;
}


@media (max-width: 550px) {
    .text {font-size: 11px}
  
    .flex-item-1, .flex-item-2, .flex-item-3 {
      flex: 100%;
    }
    
    .flex-container > div{
      margin: 10px;
    }
    
    .green_div{
      width: 60%;
      position:relative;
      font-size: 15px;
      bottom: 50px;
      color:White;
      background-color: green;
      padding:20px;
      margin: 10px;
      line-height: 20px;
    }

    .nav-link{
      color: #fcde67;
    }

    .nav-menu {
      position: fixed;
      left: -100%;
      top: 7rem;
      flex-direction: column;
      background-color: #1F2430;
      width: 100%;
      border-radius: 10px;
      text-align: center;
      transition: 0.3s;
      box-shadow: 1px 0 5px 0 grey;
      text-decoration: none;
      z-index: 3;
    }
    
    .nav-menu.active {
      left: 0;
    }
  
    .nav-item {
      margin: 2.5rem 0;
    }
  
    .hamburger {
      display: block;
      cursor: pointer;
    }
      
    .slideShow{
      width: 100%;
      height: 50%;
    }
  }