/*all the media queries */
@media screen and (min-width: 200px) and (max-width: 786px) {
	nav{
	padding-top: 4%;
	padding-bottom: 4%;
	height: auto;
	background-color: #000BA4;
	width: 100%;
}

.row{
	display: flex;
	flex-direction: column;
	position: relative;
}
.col-6{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	content: center;
}
   .hero-section{
	/* min-height: auto; */
    padding: 45px 15px;
}
  .hero-section h1{
  	width: 100%;
  	color: #f6f6f6;
    text-align: center;
    margin: 0 auto;
    font-weight: bold;
    font-size: 18px;
  }
  .hero-section form{
  	direction: flex;
  	flex-direction: column;
  	justify-content: center;
  	content:center;
  	align-items: center;

  }
  .hero-section form input[type=text],
  .hero-section form input[type=number] {
    width: 80%;
    box-sizing: border-box;
    border: 2px solid #fffcfc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url(../img/search-icon.png);
    /*background-position: 10px 12px;*/
    background-repeat: no-repeat;
    padding: 7px 22px 7px 38px;
    font-family: 'Noto Sans', sans-serif;
    margin-top: 10px;
  
}
.hero-section form select{
  width: 80%;
  box-sizing: border-box;
  border: 2px solid #fffcfc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  padding: 7px 22px 7px 38px;
  font-family: 'Noto Sans', sans-serif;
  margin-left: 10px;
  
}
.hero-section form input[type=submit]{
	background-color: #6EADE7;
	border: 1px solid #6EADE7;
	border-radius: 4px;
	font-size: 16px;
	padding: 7px 16px 7px 16px;
	color: white;
	font-family: 'Noto Sans', sans-serif;
	width: 80%;
	margin-top: 20px;
	margin-right: 0px !important;
	margin-left: 0px;
}
.hero-section button{
	background-color: transparent;
	padding: 7px 16px 7px 16px;
	border: 2px solid white;
	border-radius: 8px;
	color: white;
	font-size: 16px;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	position: absolute;
	top: 80%;
	left: 10%;
	width: 80%;
	opacity: 0.7;
}
.Media {
  /* display: flex;
  align-items: flex-start; */
  /*margin-top: 120px;*/
  /* position: absolute;
  margin-top: 120px;
  top: 30%; */

}
.Media-figure {
  margin-right: 1em;
}

.Media-body {
  flex: 1;
}
.Media-body-dis{
	flex: 1;
	float: left;
}
.Media .Media-body h1{
	color: #000BA4;
	font-family: 'Noto Sans', sans-serif !important;
	margin-top: 5px;
	font-size: 18px;
}
.Media .Media-body p{
	color: #6EADE7;
	font-family: 'Noto Sans', sans-serif !important;
	margin-top: -10px;
	font-size: 12px;
}
.Media2 {
  display: flex;
  align-items: flex-start;
  position: absolute;
}
.Media2 .Media-body h1{
	color: #000BA4;
	font-family: 'Noto Sans', sans-serif !important;
	margin-top: 5px;
	font-size: 18px;
}
.Media2 .Media-body p{
	color: #6EADE7;
	font-family: 'Noto Sans', sans-serif !important;
	margin-top: -10px;
	font-size: 12px;
}
.filter{
	display: block;
    position: relative;
    height: auto;
	margin: 20px 0;
	overflow: hidden;
	
}
.filter form{
	display: flex;
	justify-content: center;
	align-items: center; 
	margin-top: 10px;
	width: 100%;
}
.filter p{
	font-family: 'Noto Sans', sans-serif !important;
	font-size: 16px;
	width: 70%;
	text-align: center;
	margin: auto;
}
.select-button{
	background-color: #6EADE7;
	padding: 10px 83px;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	border: 1px solid #6EADE7;
	border-radius: 10px;
	color: white;
	width: 80%;
	text-align: center;
}
.mobile1{
	margin-top: 10% !important;
}
.mobile2{
	margin-top: -10px;
}


.grid-section .grid-container{
	width: 100%;
	margin: auto;
}
.grid-section .grid-container .grid-col-1{
	width: 100%;
}

.grid-col-1 .profile-card{
	
	padding: 4% 8%;
	content: center;
	justify-content: center;
	text-align: center;
	width: 80%;
	margin: auto;
	background-color: #e2e2e2;
	border: 1px solid #e2e2e2;
	box-shadow: none;
}
.grid-col-1 .profile-card h1{
	color: #000BA4;
    font-family: 'Montserrat', sans-serif;
}
.grid-col-1 .profile-card p{
    font-family: 'Noto Sans', sans-serif;
    color: #6EADE7;
    font-size: 15px;
    margin-top: 20px;
}
.grid-col-1 .col-1-img1 img{
	position: relative;
}
.grid-container .row .grid-col-2{
	display: none;
}
.strip{
	background-color: white;
	box-shadow: 0px 3px 24px -2px rgba(148,138,148,0.79);
	padding: 10px;
	display: flex;
	flex-direction: column;
	width: 60%;
	margin: auto;
	margin-top: 2%;
    position: absolute;
    left: 20%;
    border: 1px solid white;
    border-radius: 5px;

}
.strip p{
	font-family: 'Noto Sans', sans-serif !important;
	padding: 8px;
	text-align: center;
}
.strip a{
	background-color: #FFB43B;
	padding: 8px 20px;
	font-weight: bold;
	font-family: 'Montserrat', sans-serif;
	text-decoration: none;
	color: white;
	font-size: 12px;
	border: 1px solid #FFB43B !important;
	border-radius: 5px;
	text-align: center;
}

.client-container{
	width: 100%;
	margin: auto;
	display: flex;
	flex-direction: column;
	margin-top: 3%;
	justify-content: center;
	align-items: center;
}
.client-section{
	padding-top: 30% !important;
	padding-bottom: 4%;
	height: auto;
	background-color: #F0F0F0;
}
.client-container .client{
	position: relative;
	width: 100%;
}
.grid-section{
	background-color: #E2E2E2;
	padding-top: 4%;
	padding-bottom: 15%;
	height: auto;
}
.client-section{
	padding-top: 13%;
	padding-bottom: 4%;
	height: auto;
	background-color: #F0F0F0;
}
.client-container .client{
	position: relative;
	width: 100%;
	height: 50%;
}

.client .client-content a{
    background-color: #57A9FC;
    padding: 10px 20px;
    border: 1px solid #57A9FC;
    margin-top: 40px !important;
    border-top-right-radius: 13px;
    border-bottom-right-radius: 13px;
    border-bottom-left-radius: 13px;
}

.client-container .client .client-img{
	width: 100%;
	margin-top: -5px;
}
.client-section h1{
	font-family: 'Noto Sans', sans-serif !important;
	font-size: 20px;
	text-align: center;
	font-weight: normal;
}

.visibility-mobile{
	display: none !important;
}
.mobile-only{
	display: flex !important;
	margin-left: 10px !important;
}

}