@charset "utf-8";
/* CSS Document */

@media (min-width: 992px) {
	section article figure{
		margin-bottom: -100px;
	    position: relative;
	    z-index: 9;
	}
	article [class*="border-"]{
		margin-bottom: 60px;
		margin-top: 100px;
	}
	#banner p{
		font-size: 60px;
	}
}
@media (max-width: 991px) {
	section article figure{
		text-align: center;
	}
	section article{
		padding-bottom: 3rem;
	}
	#banner p{
		font-size: 40px;
	}
}
@media (min-width: 768px) {
	body{
		font-size: 20px;
	}
	.title{
	    letter-spacing: 5px;
	}
	.social-icons{
		margin-right: 40px;
		margin-left: 40px;
	}
	.modal-content{
	    padding-left: 80px;
	    padding-right: 80px;
	}
	.modal button.close{
	    margin-right: -60px;
	}
	
}
@media (max-width: 767px) {
	.brand{
		padding-right: 15px;
	}
	.social-icons{
		margin-left: 10px;
	}
	#banner p {
	    font-size: 25px;
	}
	#banner p br{
		display: none;
	}
	#innovative{
		font-size: 18px;
	}
	#testimonials .owl-carousel:after,
	#testimonials .owl-stage-outer:after{
		display: none;
	}
	.footer{
		text-align: center;
	}
	.footer address {
		margin: auto;
		
	}
}
@media (min-width: 576px) {

	#contact-us{
		font-size: 33px;
		min-height: 630px;
	}
	#contact-us .btn{
	    font-size: 20px;
	    padding-left: 30px;
	    padding-right: 30px;
	}
}
@media (max-width: 575px) {
	
	.d-flex .container{
		width: 100%;
	}
	#contact-us {
	    font-size: 24px;
	}
}
@media (max-width: 480px) {
	
	#awards .d-flex figure {
	    max-width: 50%;
	    padding: 0 15px;
	}

}

/* ===== Banner on phones: whole picture visible ===== */
@media (max-width: 767px) {

  #banner {
    background-size: contain;          /* whole picture visible, no cropped corners */
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: scroll;
    background-color: #07111f;         /* fills the bars above/below; match your image edge color */
    min-height: 100vh;
    min-height: 100svh;
  }

  #banner::before {
    display: none;                     /* no dark layer, so the picture isn't dimmed */
  }

  #banner h1 {
    font-size: 2.5rem;
    line-height: 1.25;
  }
}

@media (max-width: 400px) {
  #banner h1 {
    font-size: 2.1rem;                 /* avoids too many line wraps on small phones */
  }
}