.navbar-brand img{
  height: 70px;
}
.navbar{
  border-bottom: 2px solid #7b7531;
}
.navbar-toggler{
  border: 1px solid #000;
  width: 43px;
}
.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 5px #000!important;
}
.carousel-item{
  max-height: 600px;
}
.hideContent{
  display: none;
}
.showContent{
  display: block;
}
.nav-link{
  font-family: system-ui;
  font-size: 1.2rem;
  font-weight: 500;
  color: #7b7531;

}
.nav-item > .active{
  font-weight: 600;
  font-size: 1.22rem;
  border-bottom:3px solid #7b7531;
  border-radius: 10px;
}
.nav-link:hover{
  font-size: 1.22rem;
  color: #7b7531!important;
}

.social-links{
   float: left;
   list-style-type: none;
   margin-left:.4rem;
   font-size: 1.2rem;

}
.social-links a{
   color:#7b7531;
}
.social-links a:hover{
  font-weight: 600;
  font-size: 1.22rem;
  border-bottom:2px solid #7b7531;
}
.carousel-item img{
  object-fit: cover;
}
.btn-general{
  background: #fff;
  border:1px solid #7b7531;
  color:#7b7531;
  border-radius: 40px;
}

.btn-general:hover{
  color:#fff;

  background: linear-gradient(to left, #7e7935 50%, #504e27 50%) right;
  background-size: 200%;
  transition: .5s ease-out;
}

.card-text-days{
    font-size: .8rem;
    font-family: system-ui;
    font-weight: 500;
    color: #7b7531;
    text-shadow: 0 1px 0px #7b7531;
}
.modal-title{
    font-size: 1.2rem;
    font-family: system-ui;
    font-weight: 500;
    color: #7b7531;
    text-shadow: 0 1px 0px #7b7531;
}
.modal-body > .card{
  border-radius: unset!important;
    box-shadow: unset!important;
    -webkit-box-shadow: unset!important;
    -moz-box-shadow: unset!important;
    border: unset!important;
}

.card-text-hours{
    font-size: .8rem;
    font-family: system-ui;
    font-weight: 900;
    color: #000;
}
.card-text-icon{
  color:#7b7531;
}


.card{
  border-radius: 10px;
  box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
  -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
  -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
  min-height: 280px;
}
.card img{
  object-fit: cover;
  -webkit-transform:scale(1); /*Webkit: Scale down image to 1x original size*/
  -moz-transform:scale(1); /*Mozilla scale version*/
  -o-transform:scale(1); /*Opera scale version*/
  -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
  -moz-transition-duration: 0.5s; /*Mozilla duration version*/
  -o-transition-duration: 0.5s; /*Opera duration version*/
  opacity: 0.8; /*initial opacity of images*/
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;

  min-height: 200px;
  max-height: 200px;
}
.card img:hover{
    object-fit: cover;
    -webkit-transform:scale(1.01); /*Webkit: Scale up image to 1.2x original size*/
    -moz-transform:scale(1.01); /*Mozilla scale version*/
    -o-transform:scale(1.01); /*Opera scale version*/
    box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
    -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
    -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
    opacity: 1;
}
.card2{
  border-radius: 10px;
  box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
  -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
  -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
}
.card2 img{
  width: 100%;
  border-radius-top: 10px;
  object-fit: cover;
  -webkit-transform:scale(1); /*Webkit: Scale down image to 1x original size*/
  -moz-transform:scale(1); /*Mozilla scale version*/
  -o-transform:scale(1); /*Opera scale version*/
  -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
  -moz-transition-duration: 0.5s; /*Mozilla duration version*/
  -o-transition-duration: 0.5s; /*Opera duration version*/
  opacity: 0.9; /*initial opacity of images*/
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;

}
.card2 img:hover{
    object-fit: cover;
    -webkit-transform:scale(1.01); /*Webkit: Scale up image to 1.2x original size*/
    -moz-transform:scale(1.01); /*Mozilla scale version*/
    -o-transform:scale(1.01); /*Opera scale version*/
    box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
    -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
    -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
    opacity: 1;
}
.card-title{
  font-family: system-ui;
  font-size: 1.4rem;
  font-weight: 500;
  color: #7b7531;
}
.homePageThird{
  --bs-gutter-x:0!important;
  padding:2rem;
}
.homePageThird h3{
  font-family: system-ui;
  font-size: 1.8rem;
  font-weight: 500;
  color: #fff;
  text-shadow: 1px 1px 2px #ffffffba;
}
.homePageThird p{
  font-family: system-ui;
  font-size: 1rem;
  font-weight: 300;
  color: #fff;
  background: #00000061;
}

.home-title{
  font-family: system-ui;
  font-size: 1.8rem;
  font-weight: 500;
  color: #7b7531;
  text-shadow: 1px 1px 2px #7b7531
}

.footer{
  box-shadow: 0px -1px 8px 0px #8f7b45;
}
.footer h5{
  font-family: system-ui;
  font-size: 1.3rem;
  font-weight: 500;
  color: #7b7531;
  text-shadow: 1px 1px 2px #7b7531
}
.footer hr{
  color:#7b7531;
  height: 3px;
}
.footer a{
  font-family: system-ui;
  font-size: 1.1rem;
  font-weight: 500;
  color: #000;
}
.footer a:hover{
  font-family: system-ui;
  font-size: 1.1rem;
  font-weight: 500;
  color: #7b7531;
}
.footer p{
  font-family: system-ui;
  font-size: 1.1rem;
  font-weight: 500;
  color: #000;
}
.footer i{
  color: #7b7531;
}
.company_name{
  color: #7b7531!important;
  text-decoration: none;
  font-weight: 600;
  border:unset;
  background-color: #ffffff00;
  cursor: pointer;
}
.company_name:hover{
  text-decoration: underline;
}
.footer > .social-links a{
  color:red!important;
}
.about-content{
  min-height: 300px;
}
.about-content img{
  width: 100%;
  height: 300px;
  border-radius: 10px;
}
.about-content hr{
  width: 50%;
  color:#7b7531;
  height: 2px;
}
.about-content h4{
  font-family: system-ui;
  font-size: 1.1rem;
  font-weight: 500;
  color: #7b7531;
}
.about-content p{
  font-family: system-ui;
  font-size: 1.1rem;
  font-weight: 400;
  color: #000;
}
.contact-card{
  background-color: #ffffff00;
  border-radius: 10px;
  border:2px solid #7b7531;
  padding: 3rem;
  text-align: center;
  box-shadow: 0px 0px 15px grey;
  -webkit-box-shadow: 0px 0px 15px grey;
  -moz-box-shadow: 0px 0px 15px gray;

}

.contact-card i{
  font-size: 2.5rem;
  color:#7b7531;
}

.contact-card hr{
  width: 100%;
  color:#7b7531;
  height: 2px;
}
.contact-card p{
  font-family: system-ui;
  font-size: 1.1rem;
  font-weight: 500;
  color: #7b7531;
}
.global-mail-container{
  padding: 3rem;
  border-radius: 10px;
  border:2px solid #7b7531;
}
.contact-map iframe{
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.contact-map{
  width: 100%;
  height: 526px;
  border-radius: 10px;
  border:2px solid #7b7531;
}
.global-mail-container label{
  font-family: system-ui;
  font-size: 1rem;
  font-weight: 500;
  color: #7b7531;
  text-decoration: underline;
}
.projects-first h4{
  font-family: system-ui;
  font-size: 1,2rem;
  font-weight: 500;
  color: #7b7531;
}
.projects-first hr{
  color: #7b7531;
  width: 100%;
  height: 2px;
}


.global-mail-container button{
    width: 30%;
}
.project-image{
  width: 100%;
  height: 350px;
  border-radius: 10px;
}
.project-image img{
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: contain;
  -webkit-transform:scale(1); /*Webkit: Scale up image to 1.2x original size*/
  -moz-transform:scale(1); /*Mozilla scale version*/
  -o-transform:scale(1); /*Opera scale version*/
  -webkit-transition-duration: 0.5s;
}
.project-image img:hover{
  width: 100%;
  height: 100%;
  border-radius: 10px;
  -webkit-transform:scale(1.05); /*Webkit: Scale up image to 1.2x original size*/
  -moz-transform:scale(1.05); /*Mozilla scale version*/
  -o-transform:scale(1.05); /*Opera scale version*/
  -webkit-transition-duration: 0.5s;
}


.newsletterInput {
    width: 100%;
    height: 34px;
    background-color: #fff;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border: 1px solid #7b7531;
}

.newsletterButton {
    width: 100%;
    height: 34px!important;
    background: #7b7531;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 16px;
    align-items: center;
    text-align: center;
    color: #fff;
    border: 1px solid rgb(165 49 146);
}





.heading {
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 4rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	padding: 3.5rem 0;
	color: #1a1a1a;
}

.heading span {
	display: block;
}

.gallery {
	display: flex;
	flex-wrap: wrap;
	margin: -1rem -1rem;
  display: grid;
grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr))!important;
grid-gap: 2rem;
}

.gallery-item {
	flex: 1 0 24rem;
	margin: 1rem;
	box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
	overflow: hidden;
}

.gallery-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease-out;
  cursor: pointer;
}

.gallery-image:hover {
	transform: scale(1.15);
}

/*

The following rule will only run if your browser supports CSS grid.

Remove or comment-out the code block below to see how the browser will fall-back to flexbox styling.

*/

@supports (display: grid) {
	.gallery {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
		grid-gap: 2rem;
	}

	.gallery,
	.gallery-item {
		margin: 0;
	}
}





@media only screen and (min-width: 992px) {
  .card2 img{
    height: 375px;
    object-fit: cover!important;

  }
}


@media (min-width:765px) and (max-width:992px) {
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr))!important;
  }
}
@media (min-width:537px) and (max-width:765px) {
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr))!important;
  }
}

@media (min-width:520px) and (max-width:536px) {
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr))!important;
  }
}
@media (min-width:480px) and (max-width:519px) {
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr))!important;
  }
}
@media only screen and (max-width: 480px) {
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr))!important;
  }
  .contact-card{
    padding:1rem 1rem 1rem 1rem;
  }
  .contact-card i{
    font-size: 1rem;
  }
  .contact-card hr{
    margin-top:.5rem;
    margin-bottom: .5rem;
  }

  .contact-card p{
    font-size: .9rem;
  }
  .project-image{
    height: 200px;
  }
}