/* hero background image
.bgimage {
    height:130vh;
    background: url('images/IMG_2865.jpeg');
    background-size:cover;
    position:center;
} */

section {
  /* color: darkgreen; */
  color: black;
  min-height: 120vh;
  padding-top: 50px;
  padding-bottom: 30px;
}

/* chatgpt implementation */
/* For wide screens */
.bgimage {
  background-image: url('images/IMG_2865.jpeg');
  background-size: cover;
  background-position: center center;
  height: 100vh;
}

section#gira.bgimage {
  background-image: url('images/bike.jpg');
  
  /* background-size: cover; */
  background-position: center center;
  /* height: 100vh; */
}

section#sambla.bgimage {
  background-image: url('images/loan_sambla.jpg');
  /* background-size: cover; */
  background-position: center center;
  /* height: 100vh; */
}

section#wave.bgimage {
  background-image: url('images/wave.jpg');
  /* background-size: cover; */
  background-position: center center;
  /* height: 100vh; */
}

/* All text in paragraphs will be aligned */
p {
  text-align: justify;
}

/* text css above hero image*/
.hero_title {
    font-size: 4.5rem;
    /* offset-x | offset-y | blur-radius | color */
    text-shadow: 1px 1px 10px black;
}
.hero_desc {
    font-size: 2rem;
    text-align: center;
    /* offset-x | offset-y | blur-radius | color */
    text-shadow: 1px 1px 5px black;
}
.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

/* adding a padding to the nav bar */
nav {
	padding: 24px;

}

/* about section image css */

.imageAboutPage {
    width: 100%;
}

/* change the classes definition from bootstrap */

.col-lg-6 {
  padding-top: 50px;
}


/*
.cards {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 70px 48px;
	padding-bottom: 120px;
  padding-top: 50px;
} */

.card-deck {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;

}

/* remove the default border from the card */
.card {
  border: none;
  padding: 0 15px;
  margin-bottom: 20px; /* Add margin between the cards */
}

/* animate the image when hover */
.card:hover img {
	transform: scale(1.02);
}

.card-title {
	color: darkgreen;
	padding-top: 16px;
	font-size: 22px;
}

.card img {
	width: 50vh;
	height: 40vh;
	border-radius: 30px;
	object-fit: cover;
	transition: transform 0.3s ease-in-out;
}

.card-img-top {
  width: 100%;
  height: 15vw;
  object-fit: cover;
}


/* revoming the underline from the links */
a {
  text-decoration: none;
  color: darkgreen;

}


/* For smaller screens */
@media only screen and (max-width: 300px) {
  .bgimage {
    background-size: contain;
  }

}