/* 
---------------------------------------------
Banner home
--------------------------------------------- 
*/

.banner-home {
  background: var(--bg-banner-home);
  background-size: cover;
  height: 800px;
}

.banner-home h5 {
  color: var(--primary);
  font-size: 32px;
  line-height: 52px;
  letter-spacing: 4.48px;
  margin-bottom: 2px;
}

.banner-home h5 span {
  color: #ff3b00;
}

.banner-home h3 {
  font-size: 36px;
  line-height: 48px;
  margin-bottom: 22px;
}

.banner-home p {
  font-size: 14px;
  line-height: 24px;
  width: 80%;
  margin: 0 auto 26px;
}

.banner-home a,
.solution-bottom a {
  background: var(--primary);
  color: var(--white);
  font-weight: 700;
  padding: 14px 39px;
  border-radius: 26px;
}

.banner-home a:hover,
.solution-bottom a:hover {
  color: var(--white);
  background: var(--secondary);
}

@media (max-width: 992px) {
	.banner-home p {
		width: 100%;
	}
}
/* 
---------------------------------------------
Banner home
--------------------------------------------- 
*/

/* 
---------------------------------------------
Section Title Style
--------------------------------------------- 
*/

.section-title h5 {
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 3.84px;
	color: var(--primary);
	text-transform: uppercase;
	margin-bottom: 12px;
}

.section-title h3 {
	font-size: 36px;
	line-height: 48px;
}

.section-title h3 span {
	color: var(--secondary);
}


/* 
---------------------------------------------
Solution Style
--------------------------------------------- 
*/

.solution-top {
	border-bottom: 1px solid var(--gray-1);
	padding-bottom: 26px;
}

.solution-middle {
	margin-top: 26px;
}

.solution-bottom {
	margin-top: 52px;
}

.solution-bottom a {
	padding-left: 50px;
	padding-right: 50px;
}

/* 
---------------------------------------------
Themes Web Style
--------------------------------------------- 
*/

.themes-web {
	background: url('../images/themes-bg.png') center no-repeat;
	background-size: cover;
	padding: 300px 0 48px;
}

.list-themes {
	margin: 40px 0 42px;
}

.list-themes ul {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 18px;
}

.list-themes a {
	display: block;
	padding: 6px 28px;
	font-weight: 500;
	font-size: 14px;
	text-align: center;
	line-height: 20px;
	color: var(--purple);
	border: 1px solid var(--purple);
	border-radius: 26px;
}

.list-themes li.active a,
.list-themes a:hover {
	color: var(--primary);
	border-color: var(--primary);
}

@media (max-width: 991px) {

	.themes-web {
		padding-top: 48px;
	}
}

@media (max-width: 767px) {

	.themes-web {
		padding-top: 48px;
	}

	.list-themes li {
		max-width: calc(50% - 18px);
		flex: 0 0 calc(50% - 18px);
	}

	.list-themes a {
		padding-left: 12px;
		padding-right: 12px;
	}
}