header.hero-banner-with-tabs {
	& .gradient {
		--container-width: 100%;
		position: relative;
		padding: 80px var(--sideGap) 0 var(--sideGap);

        &::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 165px;
            left: -200px;
            right: -200px;
            background: linear-gradient(118deg, #163548 6.95%, #215274 40.97%, #00A398 90.17%);
            z-index: -1;
            border-radius: 0 0 35% 35%;
            z-index: -1;
        }

        &::after {
            content: '';
            position: absolute;
            left: 50%;
            height: 100%;
            z-index: 0;
            background-image: url(/wp-content/themes/assent-wp/assets/images/webistry/Home_Triangle_left.svg), url(/wp-content/themes/assent-wp/assets/images/webistry/Home_Triangle_right.svg);
            background-position: -128px -93px, calc(100% + 140px) -48px;
            background-size: 446px auto;
            background-repeat: no-repeat;
            width: 100%;
            top: 0;
            display: block;
            transform: translateX(-50%) !important;
            max-height: 100%;
            transition: none !important;
            opacity: 1 !important;
            background-color: transparent;
            clip-path: none;
            margin: 0;
            pointer-events: none;
        }
	}

	& h1 {
		color: #fff;
		text-align: center;
		max-width: 915px;
    	margin-left: auto;
    	margin-right: auto;
		font-size: 56px;
		font-weight: 600;
		line-height: 130%;
		letter-spacing: -0.56px;
        margin-bottom: 40px;
	}

	& .breadcrumbs, 
	& .btn-wrap {
		justify-content: center;
    	display: flex;
	}

	& .breadcrumbs {
		opacity: 0.8;
		margin-bottom: 24px;
		& :is(a, span) {
			color: #fff;
		}
	}

    & .btn-wrap {
        gap: 16px;
            
        & .btn {
            padding: 18px 33px !important;
        }

        & .btn-link {
            margin-left: 0 !important;
            padding-left: 16px !important;
            padding-right: 8px !important;
        }
    }

	& .single-tab-wrap a,
	& .btn-link {
		&::after {
			content: '';
			mask: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.31066C9.58579 3.31066 9.25 3.64645 9.25 4.06066L9.25 14.2708L5.22703 10.2478C4.93414 9.95495 4.45926 9.95495 4.16637 10.2478C3.87348 10.5407 3.87348 11.0156 4.16637 11.3085L9.46967 16.6118C9.76256 16.9047 10.2374 16.9047 10.5303 16.6118L15.8336 11.3085C16.1265 11.0156 16.1265 10.5407 15.8336 10.2478C15.5407 9.95495 15.0659 9.95495 14.773 10.2478L10.75 14.2708L10.75 4.06066C10.75 3.64645 10.4142 3.31066 10 3.31066Z" fill="white"/></svg>');
			background-color: currentColor;
			width: 20px;
			height: 20px;
			display: inline-block;
			vertical-align: middle;
			margin-left: 5px;
			transform: rotate(-130deg);
			transition: transform linear 0.25s;
		}

		&:is(:hover, :focus)::after {
			transform: rotate(-130deg) translate(0px, 2px);
		}
	}

	& .image-wrap {
		max-width: 836px;
		margin: 75px auto 54px auto;

		& .single-image-wrap {
			position: relative;
			opacity: 1;

            & img {
                border-radius: 16px;
                box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.08), 0 1px 3px -1px rgba(0, 0, 0, 0.08);
            }

			&:not(.active) {
				position: absolute;
				opacity: 0;
                pointer-events: none;
			}

			& .bubble {
				position: absolute;
				border-radius: 12px;
				border: 1px solid rgba(255, 255, 255, 0.08);
                border-radius: 14px;
                background: rgba(255, 255, 255, 0.80);
                box-shadow: 0 0 12px -1px rgba(0, 0, 0, 0.12), 0 1px 3px -1px rgba(52, 58, 64, 0.12);
                backdrop-filter: blur(32px);
				transition: all linear 0.25s;
				transform: translate(-50%) scale(0);
				transform-origin: 50%;

				&.active {
					transform: translate(-50%) scale(1);
				}
    
				& img {
					border-radius: 0;
					box-shadow: none;
                    max-width: 217px;
				}
			}
		}
	}

	& .tab-wrap {
		--container-width: 100%;
		display: flex;
		--gap: 24px;
		--columns: 1;
		margin-bottom: 50px;
		gap: var(--gap);
        max-width: 1110px;
        margin-left: auto;
        margin-right: auto;

		& .single-tab-wrap {
			flex: 0 1 calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
			position: relative;
			padding-top: 30px;
			padding-right: 18px;
			transition: opacity linear 0.25s;
			
			&:not(.active) {
				opacity: 0.6;
				&:hover {
					opacity: 1;
				}
			}
			
			&::before,
			&::after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				height: 2px;
			}

			&::before {
				width: 100%;
				background-color: #EEEEF1;
			}

			&::after {
				width: 0;
				background: #00A398;
				box-shadow: 0 0 1.5px 0 rgba(0, 163, 152, 0.50), 0 0 7px 0 rgba(0, 163, 152, 0.24);
			}

			&.active::after {
				animation: heroBannerWithTabsGrow linear 20s;
			}

			&.active:hover::after {
				animation-play-state: paused;
			}

			& .mobile-image-wrap {
				display: none;
			}

			& h2 {
				color: #343A40;
				font-size: 26px;
				font-weight: 500;
				line-height: 125%;
			}

			& p {
				color: #77797E;
				font-size: 16px;
				font-weight: 400;
				line-height: 150%;
				letter-spacing: 0.08px;
			}

			& a {
				color: #215273;
				text-decoration: none;
				font-weight: 500;
                font-size: 18px;
			}
		}
	}
}

@keyframes heroBannerWithTabsGrow {
  0%   {width: 0}
  100% {width: 100%}
}

@media (max-width: 768px) {
    header.hero-banner-with-tabs {
        & h1 {
            font-size: 34px;
            margin-bottom: 40px;
        }

        & .btn-wrap {
            gap: 32px;
            & .btn {
                padding: 17px 29px !important;
            }

            & .btn-link {
                padding-left: 0 !important;
                padding-right: 0 !important;
                outline: none !important;
            }
        }

        & .image-wrap {
            display: none;
        }

        & .gradient {
            padding-bottom: 40px;
            margin-bottom: 40px;

            &::after {
                bottom: 0;
            }
        }

        
        & .tab-wrap {
            flex-direction: column;

            & .single-tab-wrap {
                &:not(.active) {
                    opacity: 1;
                }

                & .mobile-image-wrap {
                    display: block;
                    max-height: 0;
                    overflow: hidden;
                    opacity: 0;
                    margin-top: 0;
                    transition: max-height 0.5s ease, opacity 0.5s ease, margin-top 0.5s ease;

                    & img {
                        border-radius: 16px;
                        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.08), 0 1px 3px -1px rgba(0, 0, 0, 0.08);
                        width: 100%;
                        display: block;
                    }
                }

                &.active .mobile-image-wrap {
                    max-height: 1000px;
                    opacity: 1;
                    margin-top: 20px;
                }
            }
        }
        
    }
}

@media (max-width: 1200px) {
    header.hero-banner-with-tabs {
        & .image-wrap {
            & .single-image-wrap {
                & .bubble {

                    &:nth-child(2) {
                        left: calc(var(--sideGap) * -1) !important;
                    }

                    &:nth-child(3) {
                        right: calc(var(--sideGap) * -1) !important;
                    }

                    &.active {
                        transform: scale(1);
                    }

                    & img {
                        max-width: 150px;
                    }
                }
            }
        }
    }
}