/* section introduction  */
.introduction {
  background: url(../images/home-page-intro.jpg) no-repeat top;
  background-size: cover;
  background-color: rgba(0, 0, 0, 0.2);
  background-blend-mode: overlay;
  background-attachment: fixed;
}

/* section testinomies */
.testinomies {
  justify-content: center;
  text-align: center;
  gap: 20px;
  padding: var(--padding-16px);
  align-items: center;
}
.testinomies h2 {
  grid-column: 1/-1;
  text-align: left;
}
.testinomies img {
  max-width: 70%;
  border-radius: 50%;
}

/* section latest posts carousel */
.latest-post-sec {
  display: grid;
  gap: 10px;
}

.latest-post-sec h2 {
  border: none;
  margin-bottom: 0;
}
.carousel-btns-container {
  border-bottom: 1px solid var(--darkblue-color);
  margin-bottom: 20px;
  margin-right: 12px;
  justify-content: space-between;
  transition: 1s ease;
}
/* button to slide or right */
.right-btn,
.left-btn {
  border: none;
  color: var(--button-color);
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.6em;
  margin-right: 10px;
  padding: 10px;
  background: none;
  transition: 0.3s transform;
}
.right-btn:hover,
.left-btn:hover {
  transform: scale(1.2);
}
/* scrollbar styling */
.carousel-container::-webkit-scrollbar {
  height: 1px;
}

.carousel-container::-webkit-scrollbar-thumb {
  background: var(--button-color);
}
/* caorousel container div for recived blogs from api */
.carousel-container {
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  transition: 1s linear;
  padding: var(--padding-8px);
  -webkit-overflow-scrolling: touch;
  cursor: pointer;
}

.carousel-container img {
  max-width: 100%;
}
.carousel-container > a {
  box-shadow: var(--box-shadow);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  flex: 0 0 230px;
}
/* indvideul blog styling */
.blog {
  transition: 1.5s transform;
  display: grid;
  grid-template-rows: repeat(2, 150px);
  transition: 0.5s ease;
}
.blog:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.blog p,
.blog h3 {
  padding: var(--padding-8px);
}
.blog > img {
  width: 100%;
  height: 150px;
}