/* homepage css */

/*
:root {

}
*/

.cloud-bg {
    background-image: linear-gradient(90deg, #e3e7ed, rgb(227 231 237 / 10%) 30%), url(/wp-content/uploads/how-text-cloud-bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
	background-position: center;
    line-height: 1.3;
}

button.gb-button {
	cursor: pointer
}

.root-tabs-item img {
	width: 100%;
	height: auto;
    aspect-ratio: 3/1.5;
    object-fit: cover;
}

.practices .bg-blue {
	position: relative
}


@media (min-width: 768px) {
	
	.mask-1, .mask-2, .mask-3 {
		-webkit-mask-size: contain;
		-webkit-mask-position: center center;
		-webkit-mask-repeat: no-repeat;
		box-sizing: content-box;
	}
	
	.mask-1 {
		-webkit-mask-image: url(/wp-content/uploads/how-mask-01-s.svg);
	}
	
	.mask-2 {
		-webkit-mask-image: url(/wp-content/uploads/how-mask-02-s.svg);
	}
	
	.mask-3 {
		-webkit-mask-image: url(/wp-content/uploads/how-mask-03-s.svg);
	}
	
	.root-tabs-tab {
		position: absolute;
		left: 0;
		bottom: 0;
	}
	
	.practices .is-relative {
		transition: transform .375s cubic-bezier(.16,.68,.43,.99);
	}
	
	.practices .is-relative:hover {
		transform: scale(1.075);
	}
	
	.practices .bg-blue {
		background: var(--blue);
	}
	
	.practices .bg-blue:before {
		content: '';
		background: var(--blue);
		position: absolute;
		width: 80vw;
		height: 100%;
		margin-left: calc(-100vw / 2 + 100% / 2);
		margin-right: calc(-100vw / 2 + 100% / 2);
		z-index: -1;
	}
	
}

@media (min-width: 2234px) {
	
	
	
}

@media (min-width: 1025px) and (max-width: 1029px) {
	
	.mask-2 {
		padding: calc(70px + (84 - 70) * ((100vw - 1025px) / (1029 - 1025)));
	}
	
}


@media (min-width: 1025px) and (max-width: 1024px) {
	
	
}

@media (min-width: 768px) and (max-width: 1024px) {
	
	.mask-1 > div:first-child { 
		padding-top: 3.5em;
	}
	
	.mask-1 > div:last-child {
		padding: 15px;
		padding-bottom: 3.5em;
	}

	.mask-2 {
		width: 40%;
		padding: 98px;
		padding: calc(75px + (98 - 75) * ((100vw - 768px) / (1024 - 768)));
		margin-top: -220px;
	}
	
	.home-third-section .second-col {
		margin-top: -60px;
		gap: 30px
	}
	
	.home-third-section .second-col > div {
		width: 100%
	}
	
}


@media (min-width: 914px) and (max-width: 1125px) {
	
	.mask-1 > div:first-child { 
		padding-top: 2em;
	}
	
	.mask-1 > div:first-child > * {
		margin-right: -130px
	}
	
	.mask-2 {
		margin-top: -290px;
		padding: calc(80px + (94 - 80) * ((100vw - 914px) / (1125 - 914)));
		margin-top: clamp(-249px, 100vh - 100vmin, -290px);
	}
	
	.mask-2 > * {
		margin-left: -40px;
		margin-right: -40px;
	}
}

@media (max-width: 767px) {
	
	.mask-1:after {
		background-image: linear-gradient(110deg, rgba(31, 63, 97, .59), rgba(0, 0, 0, 0.26)  56%);
	}
	
	.practices .bg-blue a {
		color: var(--blue);
	}
	
}

@media (max-width: 499px) {
	
	
	
}