h1{color: white; font-family:"Montserrat"; font-size:4em;
}

p{color:black; font-family:"Montserrat"; font-size:0.8em}

h2{color: gray; font-family:"Montserrat"; font-size:2em;
}

/* navbar parameters */

.navbar {
		margin-bottom: 0;
		/* background-color: #59698d;		 */
		font-size: 12px !important;
		line-height: 1.42857143 !important;
		letter-spacing: 3px;		
		font-family: Montserrat, sans-serif;
		min-height: 50px;
		transition: background-color 1.5s ease 0s;
		
	  }
	  
.navbar-brand {
    padding: 0 10px;
    height: 50px;
    line-height: 50px;
}


@media (max-width: 576px) {
  .navbar{background-color: #59698d !important; opacity:0.9;};
}


/* navbar Transparent to solid */

.bg{
background-color: transparent;
}	
.bg.scrolled{
background-color: #59698d;

}	
  
	  

/* Jumbotron */

.jumbotron {		
		color: #fff;
		height : 20em;
		font-family: Montserrat, sans-serif;				
	  }

/* color_transition */	  

/* @keyframes color_transition {
  0% {background-color: white;}
  100% {background-color: #59698d;}
}

.color_transition {
  animation-name: color_transition;  
  animation-duration: 1s;
  animation-fill-mode : forwards;
}   */


/* Card ==> shadow & hover */
	  
.card:hover{
	webkit-box-shadow: 0px 9px 30px -12px rgb(0,0,0,0.75);
	moz-box-shadow: 0px 9px 30px -12px rgb(0,0,0,0.75);
	box-shadow: 0px 9px 30px -12px rgb(0,0,0,0.75);
	transform: translateY(-3px);
	border-color:#6f1010;
	transition: all 0.25s ease-in;
	z-index :1;
}

	

.card{
	webkit-box-shadow: 0px 5px 20px -12px rgb(0,0,0,0.75);
	moz-box-shadow: 0px 5px 20px -12px rgb(0,0,0,0.75);
	box-shadow: 0px 5px 20px -12px rgb(0,0,0,0.75);
	transition: all 0.25s ease-in;
	padding: 0.25em;
	z-index :1;
	
}


.sh{webkit-box-shadow: 0px 2px 5px 0px rgb(0,0,0,0.75);
	moz-box-shadow: 0px 2px 5px 0px rgb(0,0,0,0.75);
	box-shadow: 0px 2px 5px 0px rgb(0,0,0,0.75);
	
	}

/* Custom animation  */

@keyframes text-down {
  0% {transform: translateY(-110px);opacity: 10%} 
  100% {transform: translateY(0);opacity: 100%}  
}
.text-down {
  animation-name: text-down;
 }

@keyframes text-up {
  0% {transform: translateY(200px);opacity: 10%} 
  50% {transform: translateY(200px);opacity: 10%} 
  100% {transform: translateY(0);opacity: 100%}  
}
.text-up {
  animation-name: text-up;
  
}

/* navigation scroll smooth  */

html {
  scroll-behavior: smooth;
 
}


#jumbo{
background: linear-gradient(185deg, #38455f, #7486ad, transparent 70%, transparent 70%);
background-size: 400% 400%;
animation: backgroud-animated 10s ease infinite;


}

#jumbo2{
background-image : url('../img/img2.png');
background-size: cover;
animation: backgroud-animated 10s ease infinite;

}
@keyframes backgroud-animated { 
    0%{background-position:55% 20%}
    50%{background-position:46% 80%}
    100%{background-position:55% 20%}
}

#animated-txt{
animation: animation-text 10s infinite;
}

@keyframes animation-text { 
    0%{opacity : 0.8;}
    50%{opacity : 0.1;}
    100%{opacity : 0.8;}
}

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 10px; /* Place the button at the bottom of the page */
  right: 10px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: darkblue; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  border-radius: 50px; /* Rounded corners */
  font-size: 12px; /* Increase font size */
  opacity : 0.7;
  height:40px
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
  transform: scale(1.3,1.3);
	border-color:#6f1010;
	transition: all 0.25s ease-in;
}

.text_design{

background-color:pink;
margin-top:50px; 
margin-bottom: 50px;
border-style: solid;
border-color: gray;
border-width: 1px;

}