html{
    /* font-size: 10px; */
    font-size: 62.5%; 
    scroll-behavior: smooth;
}

body {
    
    font-family: "Roboto", sans-serif;
    font-family: "Open Sans", sans-serif;
    font-family: "Baloo Paaji 2", cursive;
  }

  /* navbar begins here */

  .navbar{
      padding: 0 5rem;
  }

  p{
      font-weight: bold;
      font-size: 2.5rem;
  }

  #navbarNav li a{
    font-weight: bold;
    font-size: 2rem;
  }

  #navbarNav li a:hover{
      color: #ff5757;
  }

  /* navbar begins ends */

  /* landing page begins here */

  .landing-page{
    padding: 10rem 5rem 0 5rem;
    height: 80vh;
    background-image: url(/images/background-cement.jpg);
  }

  .btn-danger{
      font-weight: bold;
      font-size: 2rem;
  }

  .btn-danger:hover{
      background-color: #fff;
      color: #ff5757;
  }

  h1{
      font-weight: bold;
      font-size: 8rem;
      color: #002d5b;
  }

  .mypix{
      position: relative;
      top: -5.4rem;
      
  }

  /* landing page ends here */

  /* about section begins here */

  .about-section{
      padding: 0 5rem;
  }

.about-img img{
    border-radius: 1rem;
    
}

  .about-header h2{
      font-weight: bold;
      color: #ff5757;
      font-size: 4rem;
  }

  .about-header p{
      color: #7f7f7f;
      font-size: 2rem;
      text-align: justify;
  }

  .about-subheader h3{
    font-size: 2.5rem;
    font-weight: bold;
  }

  .about-subheader p{
      font-size: 2rem;
      text-align: justify;
  }

  /* about section ends here */

/* services section begins here */

.services-section{
    padding: 0 5rem;
}

.services h1{
    padding-top: 5rem;
    line-height: 10vh;

}

.card img{
    width: 10rem;
    padding-top: 5rem;
    margin: auto;
}

.card-body h2{
    font-size: 3rem;
    font-weight: bold;
    color: #ff5757;
    text-align: center;
}

.card-body p{
    text-align: justify;
    font-size: 2rem;
    color: #7f7f7f !important;

}


/* services section ends here */

/* portfolio section begins here */

.port-section{
    padding: 0 5rem;
}

.portfolio-head h1{
    padding-top: 5rem;
    text-align: center;
}



.inner{
    overflow: hidden;
}

.inner img{
    width: 100%;
    transition: all 1.5s ease;
}

.inner:hover img{
    transform: scale(1.5);
}



.card-body p{
    color: #002d5b;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

/* portfolio section ends here */

/* testimonials section begins here */

.test-section{
    padding: 0 5rem;
}

.test-head h1{
    text-align: center;
    padding-top: 5rem;

}

.person img{
    width: 20rem;
    margin: auto;
    border: 2rem solid #fff;
    border-radius: 50%;
    overflow: hidden;

}

.person-head p{
    color: #7f7f7f;
}

.carousel-caption{
    position: static;
    padding-bottom: 1.5rem;
    padding-top: 0;
}

.carousel-caption h5 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    margin-top: 2.5rem;
    color: #002d5b;
  }
  
  .carousel-caption p {
    font-size: 2rem;
    margin: auto;
    width: 70%;
    margin-bottom: 1rem;
  }
  
  .carousel-indicators {
    bottom: -3.5rem;
    /* background-color: black; */
  }
  
  .carousel-indicators .active {
    background-color: #ff5757;
  }
  
  .carousel-control-next,
  .carousel-control-prev {
    filter: invert(100%);
  }

/* testimonials section ends here */

/* contact section starts here */

.contact-section {
    padding: 0 5rem;
    height: 120vh;
    background-color: #fbfbfb;
  }

  .contact-head h1{
      text-align: center;
      padding-top: 5rem;
  }
  
  .card h3{
    font-weight: bold;
    font-size: 3rem;
  }

  .form-control{
      font-size: 2rem;
  }
  
  .btn-l{
    width: 20%;
    border-radius: 5rem;
    text-transform: uppercase;
  }
  
  .card-1 p{
    text-align: center;
    color: #7f7f7f;
  }
  
  .card-1 img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 3rem;
  }
  
  

  /* contact section ends here */

  /* footer section starts here */

.footer{
    padding: 0 5rem;
    background-color: #333;
    height: 70vh;
}

.footer-quick h2{
    color: #fff;
    font-weight: bold;
    font-size: 2.5rem;
    margin: 3rem 0 3rem;
}

.footer-quick a{
    color: #999;
    font-size: 2rem;
    line-height: 4rem;
    text-decoration: none;
}

.footer-quick a:hover{
    color: #fff;
}

.footer-connect h2{
    color: #fff;
    font-weight: bold;
    font-size: 2.5rem;
    margin: 3rem 0 3rem;
}

.follow-social .fa{
    color: #999;
    font-size: 2rem;
    text-decoration: none;
}

.follow-social .fa:hover{
    color: #fff;
    -o-transition:.5s;
          -ms-transition:.5s;
          -moz-transition:.5s;
          -webkit-transition:.5s;
          transition:.5s;
          text-decoration: none;
  }


  .footer-news h2{
    color: white;
    font-weight: bold;
    font-size: 2.5rem;
    margin: 3rem 0 3rem;
  }

  .newsletter{
    max-width: 50rem;
    width: 100%;
    position: relative;
  }
  
  .newsletter .input{
    width: 100%;
    padding: 1rem 10rem 1rem 6rem;
    border-radius: 5rem;
    border: none;
    font-weight: bold;
    font-size: 2rem;
  }
  
  .newsletter .fa{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 2rem;
    font-size: 2rem;
    
  }
  
  .newsletter .btn{
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    background: #dc3545;
    padding: 1rem 2rem;
    border-radius: 2.5rem;
    letter-spacing: 0.25rem;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.5rem
  
  }
  
  .newsletter .btn:hover{
    background: #fff;
    color: #dc3545;
    font-weight: bold;
    border-color: #dc3545;
  }
  
  hr{
    border-color: #999;
  }

  .footer-p p{
    color: #999999;
    font-size: 1.5rem;
    text-align: center;
  }

/* footer section ends here */

/* go to top btn starts here */
.gotopbtn{
    position: fixed;
    width: 5rem;
    height: 5rem;
    /* background: #27ae60; */
    bottom: 4rem;
    right: 0;
    text-decoration: none;
    text-align: center;
    line-height: 5rem;
    color: #27ae60;
    font-size: 3rem;
    
  }
  
  .gotopbtn:hover{
    color: #dc3545;
  }

  /* go to top btn ends here */

  /* responsiveness starts here */

  @media (min-width: 480px) and (orientation: portrait) {
    .landing-page{
        text-align: center;
    }
    
    h1 {
      font-size: 5rem;
    }
    p {
      font-size: 2rem;
    }
    .mypix,
    .about-img {
      display: none;
    }
    h2{
        text-align: center;
    }
  .about-subheader{
      text-align: center;
  }

  .card-slots{
      margin-bottom: 1rem;
  }
   
  .port-card{
      margin-bottom: 1rem;
  }

 

  }