@import url('./variables.css');

/* TESTIMONIALS SECTION */

.ckm-testimonials-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 32px;
}

.ckm-testimonials {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1280px;
  gap: 32px;
}

.testimonials-intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
}

.testimonials-intro-header {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.testimonials-intro h2 {
	color: #D62A22;
}

.testimonials-intro-btn {
  height: 40px;
}

.testimony-card {
  padding: 40px;
  background-color: #D9D9D9;
  border-radius: 20px;
  gap: 16px;
  display: flex;
  flex-direction: column;
}

.testimony-client {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;    
  width: 100%;
  gap: 4px;
}

.testimony-client-name {
  text-align: center;
}

.testimony-client-occupation {
  font-weight: 800;
  text-align: center;  
}

.testimony-content {
  display: flex;
  flex-direction: column;
  align-items: end;  
  justify-content: space-between;    
  gap: 12px;
  width: 100%;
}

.testimony-date {
  font-size: var(--font-size-sm);
  color: #444444;
}

.testimony-img {
	width: 88px;
	height: 88px;
}

@media (min-width: 1000px) {
  /* TESTIMONIALS SECTION */
  
  .ckm-testimonials-wrapper {
    padding: 80px;
  }

  .ckm-testimonials {    
    flex-direction: row;
	justify-content: space-between;
	gap: 88px;
  }

  .testimony-card {
    flex-direction: row;
    gap: 64px;    
    height: fit-content;
	width: 100%;
  }

  .testimony-client {    
    align-items: start;    
    width: auto;
    white-space: nowrap;
  }

  .testimonials-intro {
    gap: 64px;
	width: 100%;
  }
  
  .testimony-content {
    display: flex;
    flex-direction: column;
    align-items: end;  
    justify-content: space-between;  
    width: 100%;
  }
	
	.testimony-img {
		margin-left: 32px;
	}
}

@media (min-width: 768px) {
  .testimony-client-name {
    text-align: start;
  }

  .testimony-client-occupation {
    text-align: start;  
  }
}