/* CSS STYLES FOR FRONT PAGE */
.hero{
	padding-top: 0;
}

/* Hero slider */
.hero-slider{
	background-color: var(--color-text);
    color: rgb(255, 255, 255);
	border-radius: var(--border-radius);
	max-width: 1860px;
    width: calc(100% - 50px);
}

.hero-slider .swiper-slide{
	height: auto;
}

.hero-slider__content-wrapper{
    display: flex;
	justify-content: space-between;
	align-items: center;
    gap: 64px;
}

.hero-slider__content{
	width: 100%;
}

.hero-slider__img img{
	border-radius: var(--border-radius);
    display: flex;
	height: 100%;
    width: 100%;
    object-fit: cover;
}

.hero-slider__btn-wrapper{
	display: flex;
	align-items: center;
	margin-top: 100px;
	gap: 32px;
	font-size: 1.294rem;
	line-height: 1.706rem;
}

.hero-slider__btn-wrapper .btn:not(.btn--blue-outline):hover{
	color: var(--color-text);
}

/* Hero columns */
.hero-columns{
	display: flex;
    justify-content: space-between;
    gap: 32px;
}

.hero-column-dark{
	background: var(--color-background-gradient);
	color: #fff;
	border-radius: var(--border-radius);
	display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 113px;
	padding-left: 19px;
	font-family: var(--font-family-headline);
}

.hero-columns__grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
	position: relative;
}

.hero-columns__grid > div{
	padding: 24px;
	padding-left: 0;
	position: relative;
}

.hero-columns__grid > div:first-child:after,
.hero-columns__grid > div:nth-child(2):after,
.hero-columns__grid > div:nth-child(odd):before{
	content: '';
	display: inline-block;
	-webkit-mask-image: url('../../icons/dotted-border.svg');
	mask-image: url('../../icons/dotted-border.svg');
	mask-repeat: repeat;
	-webkit-mask-repeat: repeat;
	mask-size: cover;
	-webkit-mask-size: cover;
	background-color: var(--color-secondary);
	width: 2px;
    height: 100%;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 2;
}

.hero-columns__grid > div:first-child:after,
.hero-columns__grid > div:nth-child(2):after{
	-webkit-mask-image: url('../../icons/dotted-border-horizontal.svg');
	mask-image: url('../../icons/dotted-border-horizontal.svg');
	top: 100%;
    width: 100%;
    height: 2px;
}

.hero-columns__grid > div:nth-child(even){
	padding-left: 32px;
	position: relative;
}

.hero-columns__grid p{
	margin: 0;
}

.hero-columns__grid p:not(.section-title){
	opacity: 0.5;
	line-height: 1.176rem;
}

.hero-columns__grid .section-title span{
	display: inline-block;
    margin-left: 8px;
    color: var(--color-primary);
}

.hero-column-light{
	background-color: var(--color-background);
	border-radius: var(--border-radius);
	padding: 32px 48px;
}

.hero-columns__form form{
	display: grid;
    grid-template-columns: 1fr 1fr;
	column-gap: 16px;
	position: relative;
}

.hero-columns__form .submit-wrapper{
	grid-column: 2 span;
	justify-content: flex-start;
	flex-wrap: wrap;
    row-gap: 12px;
	padding-left: 24px;
	margin-top: 12px;
}

.hero-columns__form .btn--submit{
	flex-grow: 1;
}

.hero-columns__form input[type="submit"]{
	width: 100%;
}

/* Three columns with colorful backgrounds */
.wp-block-columns__color-cols .wp-block-column{
  	border-radius: var(--border-radius);
    padding: 43px 64px 28px;
	display: flex;
	flex-direction: column;
}

.wp-block-columns__color-cols .wp-block-column:first-child{
    padding-inline: 36px;
    border: 2px solid var(--color-primary);
}

.wp-block-columns__color-cols .section-title{
    margin-bottom: 74px;
}

.wp-block-columns__color-cols .wp-block-column:first-child .section-title{
	margin-bottom: 8px;
}

.wp-block-columns__color-cols figure{
	margin: 0;
    margin-top: 100px;
    flex-grow: 1;
    display: flex;
    align-items: flex-end;
}

/* Full width sections */
.bckg-full-width.bckg-full-width--dark-blue{
	padding-block: 28px;
}

.bckg-full-width.bckg-full-width--dark-blue[data-wpr-lazyrender]{
	content-visibility: visible;
}

.page-content .wp-block-group:not(.is-layout-flex).bckg-full-width--gray + .wp-block-group:not(.wp-block-group .wp-block-group),
.page-content .wp-block-group:not(.is-layout-flex).bckg-full-width--navy + .bckg-full-width--gray:not(.wp-block-group .wp-block-group){
	margin-top: 32px;
}

/* Blog */
.wp-block-post-featured-image.post__thumbnail{
	border: 1px solid var(--color-background-navy);
	background-color: transparent;
    background-image: none;
}

@media screen and (max-width: 1535px){
	.hero-column-dark{
		padding: 24px;
    	justify-content: center;
	}
	.hero-columns__grid > div:first-child,
	.hero-columns__grid > div:nth-child(2){
		padding-top: 0;
	}
	.hero-columns__grid > div:last-child, 
	.hero-columns__grid > div:nth-child(3){
		padding-bottom: 0;
	}
}

@media screen and (max-width: 1200px){
    .wp-block-columns__color-cols{
        gap: 16px;
    }
    .wp-block-columns__color-cols .wp-block-column{
        padding: 43px 43px 28px;
    }
}

@media screen and (max-width: 992px){
	.hero-column-light{
		padding: 32px;
	}
	.hero-columns__form form{
		grid-template-columns: 1fr;
	}
	.hero-columns__form .submit-wrapper{
		grid-column: unset;
		padding-left: 0;
	}
	.wp-block-columns.wp-block-columns__color-cols{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .wp-block-columns__color-cols .wp-block-column:first-child{
        grid-column: 2 span;
    }
}

@media screen and (min-width: 782px){
	.hero-slider__img{
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
		max-width: 50%;
		width: 100%;
	}
	.hero-slider__content{
		padding-block: 120px;
		max-width: 45%;
	}
	.hero-column-dark{
		width: 45%;
   		max-width: 100%;
	}
	.hero-columns__grid{
		max-width: 486px;
	}
	.hero-column-light{
		width: 55%;
		max-width: 100%;
	}
	.hero-columns__form{
		max-width: 676px;
	}
	.hero-columns__form .wpcf7 form .wpcf7-response-output{
		position: absolute;
		bottom: -70px;
		width: 100%;
		margin: 0;
	}
}

@media screen and (max-width: 781px){
	.hero{
		width: 100%;
	}
	.hero-slider{
		border-top-left-radius: 0;
    	border-top-right-radius: 0;
		padding-top: 16px;
	}
	.hero-slider__content-wrapper{
		flex-direction: column-reverse;
		gap: 24px;
	}
	.hero-slider__btn-wrapper{
		margin-top: 24px;
   		margin-bottom: 100px;
		gap: 10px;
        flex-wrap: wrap;
	}
	.hero-columns{
		flex-direction: column-reverse;
		padding-top: 0;
		gap: 20px;
	}
	.hero-column-light{
		padding: 24px 19px;
	}
	.hero-column-light .section-title--medium{
		text-align: center;
	}
	.hero-columns__form .submit-wrapper{
		justify-content: center;
	}
	.wp-block-columns.wp-block-columns__color-cols{
		grid-template-columns: 1fr;
		margin-inline: -19px;
   		gap: 34px;
	}
	.wp-block-columns__color-cols .wp-block-column:first-child{
        grid-column: unset;
    }
	.home .wp-block-group__full-width figure img{
		width: calc(100% + 38px) !important;
		bottom: 0;
	}
	.bckg-full-width--dark-blue .wp-block-buttons {
		margin-top: 48px;
	}
	.blog-posts .wp-block-buttons{
		justify-content: flex-start;
	}
}

@media screen and (max-width: 480px){
	.hero-columns__grid p:not(.section-title){
		font-size: 0.706rem;
    	line-height: 0.824rem;
	}
	.hero-columns__grid > div{
		padding: 10px 20px;
	}
	.hero-columns__grid > div:nth-child(even){
		padding-left: 20px;
		padding-right: 0;
	}
	.hero-columns__grid > div:nth-child(odd){
		padding-left: 0;
	}
	.wp-block-columns.wp-block-columns__color-cols .wp-block-column{
		padding: 30px;
	}
	.wp-block-columns.wp-block-columns__color-cols figure{
		margin-top: 32px;
	}
	.wp-block-columns__color-cols .section-title{
		margin-bottom: 24px;
	}
}