*{
  margin:0;
  padding: 0;
  color: black;
  text-align: justify;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.navbar{
  padding-top: 0px;
}

body{
  background-color: white;
  background-size: cover;
}

.intro {
  border-left: 5px solid #017ba0;
  padding-left: 5px;
}

.details{
  padding: 90px 50px 50px;
}

.banner{
  background-image: linear-gradient(rgba(0, 0, 0, 0.414), #00a651), url(../images/Northen\ Building.jpeg);
  height: 25vh;
  background-size: cover;
}


#or{
  color:  #00a651;
}

/* ========Header & Footer Styling Begins======== */
.headersection{
  color: azure;
  text-align: center;
  margin-top: 40vh;
  } 

  .headersection h1{
  font-family: 42.5 monospace;
  }
  .headersection p{
  font-size: 18px;
  font-style: normal;
  color: lightgray;

  }

hr{
  size: 0mm;
  border-color: white;
}

footer{
  background-color: #273b32;
  height: 10vh;
  text-align: center;
}

/* =======Buttons Styling======= */
.user{
  margin-top: 50px;
 }


/* Navbar links styling */
 ul li a{
  color: rgb(12, 6, 6);
  text-decoration: cadetblue;
  padding: 4px 20px;
  font-size: 15px;
  font-weight: bold;
  transition: all .7s;
}

ul li a:hover{
  background-color: 
  #c7e9d6;
  border-radius: 6px;
}

/* ========Jumbotron Styling======== */
.jumbotron{
  background-color: white;
  padding: 0px;
}

.container{
  margin-top: 10px;
  /* height: 20vh; */
  text-align: left;
  color: white;
}

.container h5{
  font-size: 30px;
  font-size: 20px;
}

.lead{
  font-size: 20px;
  color: aliceblue;
}
.j-white{
  background-color: white;
}

.c-white{
  margin-top: 0px;
  text-align: center;
  color: black;
}

.c-white h5{
  font-size: 35px;
}

.img{
  height: 12vh;
}

/* =========Images Columns Styling======== */
.column{
  position: relative;
  text-align: center;
  color: white;
  width: 33.33% auto;
}

.centered{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  text-shadow: 10px 10px 10px rgba(0, 0, 0, 0.856);
}

/* +++++++Carousel Styling+++++++ */
.carousel-item
{
  height: 85vh;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d; 
  transition: transform 2s ease, opacity .3s ease-out;
}

.carousel-caption{
  top: 50%;
  transform: translateY(-50%);
  bottom: initial;
}

.carousel-item img{
  height: 105vh;
}

/* ++++++++Card Styling+++++++ */
.card2{
  background-color: transparent;
  color: darkslateblue;
}

.card img{
  width: 100%;
  height: 350px;
}


/* ================= Gallery Styles ============= */

.gallery{
  border: 2px solid 
  #c7e9d6;
  width: 800px;
  margin: 10px auto;
}

.gallery img{
  width: 150px;
  height: 100px;
  padding: 5px;
  transition: 1s;
  box-shadow:  
  
  5px 5px 5px rgba(0,0,0,0.7)
}

.gallery img:hover{
  filter: grayscale(50%);
  transform: scale(1.30);
}

#status{
  width: 90%;
  max-width: 100%;
  text-align: center;
  padding: 10px;
  margin: 0 auto;
  border-radius: 8px;
}

#status.success{
  background-color:rgb(211, 250, 153);
  animation: status 4s ease forwards;
}

#status.error{
  background-color: salmon;
  color: white;
  animation: status 4s ease forwards;
}

@keyframes status{
  0%{
    opacity: 1;
    pointer-events: all;
  }
  90%{
    opacity: 1;
    pointer-events: all;
  }
  100%{
    opacity: 0;
    pointer-events: none;
  }
}




/* Effect 15: scale down, reveal */
.cl-effect-15 a {
	color: black;
	font-weight: 700;
	text-shadow: none;
}

.cl-effect-15 a::before {
	color: #fff;
	content: attr(data-hover);
	position: absolute;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
}

.cl-effect-15 a:hover::before,
.cl-effect-15 a:focus::before {
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	transform: scale(0.9);
	opacity: 0;
}