header {margin-bottom: 0;}

.websites {padding-top: 2rem; background-color: #d4e4ef; font-size: 1rem; color: #070606;}

/* Button */
.websites .button {
	margin-bottom: 0; min-width: 180px; height: 50px;
	border-radius: 25px; line-height: 50px !important; font-size: 18px;
}
.websites .button.blue {background-color: #032bf4; color: white;}
.websites .button.blue:hover {background-color: #020fc1;}
.websites .button.pink {background-color: #f3c2a9; color: #0a2532;}
.websites .button.pink:hover {background-color: #e4a784;}

/* Slider Arrows */
.websites .slick-prev,
.websites .slick-next {
	position: absolute; top: 50%; z-index: 1; display: block; width: 3rem; height: 3rem; padding: 0;
	transform: translate(0, -50%); line-height: 0; font-size: 0; outline: none; cursor: pointer;
}
.websites .slick-prev:before,
.websites .slick-next:before {
	line-height: 20px; font-family: monospace; font-size: 3.5rem; color: var(--blue-main);
}
.websites .slick-prev.slick-disabled:before,
.websites .slick-next.slick-disabled:before {color: #253b7855;}
.websites .slick-prev:not(.slick-disabled):hover:before,
.websites .slick-next:not(.slick-disabled):hover:before {font-weight: bold;}
.websites .slick-prev {right: -2rem;}
.websites .slick-prev:before {content: '<';}
.websites .slick-next {left: -2rem;}
.websites .slick-next:before {content: '>';}

/* Block 1 */
.websites .block_1 .content {margin-top: 2rem; padding: 0 1rem;}
.websites .block_1 h1 {
	display: flex; flex-direction: column; margin-bottom: 2.5rem; line-height: 1; font-size: 3.5rem;
}
.websites .block_1 h1 span:first-child {color: #0c2833;}
.websites .block_1 h3 {margin-bottom: 2.5rem; font-size: 1.5rem;}
.websites .block_1 p {margin-bottom: 2.5rem;}
.websites .block_1 .buttons {display: flex; gap: .5rem;}

@media screen and (min-width: 40em) {
	.websites .block_1 {
		height: 800px;
		background-image: url('../../../image/module/websites/block_1_bg.png');
		background-repeat: no-repeat; background-position: left -100px;
	}
	.websites .block_1 .content {width: 50%; margin-top: 8rem; padding: 0;}
	.websites .block_1 h1 {font-size: 4.5rem;}
}

/* Block 2 */
.websites .block_2 {position: relative; margin-top: 5rem; padding: 0 2rem;}
.websites .block_2 h2 {
	display: flex; flex-direction: column; margin-bottom: 2rem;
	text-align: center; line-height: 1; font-size: 3.5rem; font-weight: bold; color: #0c2833;
}
.websites .block_2 h2 + p {margin-bottom: 3rem; text-align: center; font-size: 18px;}

.websites .block_2 .reason-card {
	display: flex; flex-direction: column; align-items: center; margin: 1rem; padding: 2rem;
	border-radius: 20px; background-color: #ffffff4d; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
}
.websites .block_2 .cards:not(.slick-initialized) .reason-card + .reason-card {display: none;}
.websites .block_2 .cards .slick-track {display: flex;}

.websites .block_2 .reason-card img {width: 90px; height: 90px; object-fit: none;}
.websites .block_2 .reason-card h3 {margin: 1rem 0; font-size: 2rem; font-weight: bold; color: #0c2833;}
.websites .block_2 .reason-card .description {
	flex-grow: 1; padding: 2.5rem; border-radius: 20px;
	background-color: #ffffff; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
	line-height: 1.2; text-align: center; font-size: 18px;
}
.websites .block_2 .reason-card.bordered {outline: 2px solid #032bf488;}

@media screen and (min-width: 40em) {
	.websites .block_2 {margin-top: 0; padding: 0 5rem;}
	.websites .block_2 .cards {display: flex; justify-content: space-between;}
	.websites .block_2 .reason-card {display: flex !important; width: 32%; margin: 0;}
}

/* Block 5 */
.websites .block_5 {padding: 0 1rem; text-align: center;}
.websites .block_5 .row {border-bottom: 1px solid #b7c5ce;}
.websites .block_5 img {margin: 5rem 3rem 3rem 0;}
.websites .block_5 h2 {margin-bottom: 1.5rem; line-height: 1; font-size: 3.5rem; font-weight: bold; color: #0c2833;}
.websites .block_5 h2 b {font-weight: normal;}
.websites .block_5 h2 + p {margin-bottom: 2rem; line-height: 1.3; font-size: 26px;}
.websites .block_5 button {margin-bottom: 3rem;}

@media screen and (min-width: 40em) {
	.websites .block_5 {margin-top: -180px; padding: 0;}
	.websites .block_5 img {margin: 0 -8rem 3rem 0;}
}

/* Contact Popup */
.websites-contactPopup {width: min(800px, 90vw);}
.websites-contactPopup .body {min-height: unset !important; padding: 1.5rem 1.5rem .5rem;}
.websites-contactPopup .button {font-size: 1rem;}