/* trivy partners page */
.trivy_v1_homepage_wrap.partners_wrap {
	position: relative;
	z-index: 3;
	background-color: $aq-trivy-dark;
	color: #ffffff;
	padding-bottom: 80px; //5rem

	.generic_title {
		color: #ffffff;
	}


	.section_title_wrap {
		position: relative;
		padding-bottom: $gap;
		padding-top: $gap/2;
		text-align: center;
		z-index: 1;

		.section_title, .section_subtitle {
			position: relative;
			z-index: 2;
		}

		.section_title_icon {
			position: relative;
			z-index: 2;
			text-align: center;
			
			img {
				display: block;
				animation: float 3s ease-out infinite;
				margin: 0px auto;
			}
			
			&::after {
				content: "";
				position: relative;
				margin: 30px auto 10px auto;
				background-color: rgba(#ffffff,0.1);
				width: 90px;
				display: block;
				height: 15px;
				border-radius: 50%;
				animation: shrink 3s ease-out infinite;
				// transform-origin: center center;
			}
		}

		@keyframes float {
			50% {
				transform: translate(0, 10px);
			}
		}


		@keyframes shrink {
		0% {
			width: 80px;
		}
		50% {
			width: 100px;
		}
		100% {
			width: 80px;
		}
		}


		.section_title_icon + .section_title {
			margin-top: 0px;
		}




		&::before {
			content: "";
			position: absolute;
			left: 20%;
			width: 60%;
			padding: 30% 0;
			transform: translate(0, -70%) rotate(-45deg);
			background: radial-gradient(circle at left bottom, rgba($aq-neon-blue, 0.5) 10%, rgba($aq-royal-blue, 0.4) 20%, rgba($aq-trivy-dark, 0) 60%);
			filter: blur(40px);
			z-index: 1;
			pointer-events: none;

		} //before


	} //section_title_wrap

	.partners_hero_wrap {
		background-color: $aq-trivy-dark;
		background-image: radial-gradient(60vw at 50%, #031145 10%, $aq-trivy-dark 100%);
		min-height: 500px;
		position: relative;
		z-index: 10;

		.partners_background_image_wrap {
			position: absolute;
			left: 0px;
			top: 0px;
			width: 100%;
			height: 100%;
			z-index: 1;
			pointer-events: none;

			.stars_wrap {
				position: absolute;
				left: 0px;
				top: 0px;
				width: 100%;
				height: 100%;
				z-index: 1;
				overflow: hidden;
				
				.stars_bg {
					position: absolute;
					width: 400vw;
					height: 400vh;
					top: 50%;
					left: 50%;
					margin-top: -200vh;
					margin-left: -200vw;
					animation: stars_ani 240s linear infinite;
					background-size: 240px;
					backface-visibility: visible;
					background-image:url(../images/homepage_hero_stars_02.svg);
					background-repeat: repeat;
					
				}


				@keyframes stars_ani {
					0% { transform: rotate(0deg); }
					100% { transform: rotate(360deg); }
				}

			} //stars_wrap



		} //hero_background_image_wrap
	} //partners_hero_wrap



	.hero {

		
		.hero-body {
			// padding: 80px 0px;

			.header_title_wrap.with_columns {

				display: flex;
				flex-direction: row;

				@media screen and (max-width: $desktop) {
					flex-direction: column;
				}


				.header_title_content_wrap {

					width: 50%;
					position: relative;
					z-index: 3;



					.page_title {
						font-size: 64px; //4rem
						margin-bottom: 0px;
					}

					&.partners_hero_titles {
						display: flex;
						align-self: center;
						justify-content: center;
						flex-direction: column;
					}

					&.partners_hero_stage_image {
						display: flex;
						align-self: center;
						justify-content: center;
						img {
							max-width: 100%;
							height: auto;
						}
					}


					@media screen and (max-width: $widescreen), print {
						width: 70%;

						.page_title {
							font-size: 48px; //3rem
						}
					} //until widescreen

					@media screen and (max-width: $tablet), print { //769

						width: 100%;

						.page_title {
							font-size: 32px; //2rem
						}//page_title
			
						.page_subtitle {
							font-size: 18px; //1.125rem
						}//page_subtitle
			
					} //until tablet


				} //header_title_content_wrap

			} //header_title_wrap

			@media screen and (min-width: $tablet), print { //769
				padding: 24px;
			}
		}

	} //hero

	
} //trivy_v1_homepage_wrap partners_wrap


/* logos */
.partners_logos_wrap {
	background-color: $aq-trivy-dark;
	padding: 50px 0px;

	.partners_logos_title {
		text-align: center;
		color: #ffffff;
	}

	.partners_logos {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 64px; //4rem
		flex-wrap: wrap;

		.logo_item {
			display: inline-block;
			padding: 20px;
			margin: 0px;
			
			// background-color: red;
			img {
				display: block;
				margin: 0px auto;
				width: auto;
				max-height: 115px;
				max-width: 200px;
				transition: all 0.3s ease;
				// overflow: hidden;
			}
		} //logo_item

		@media screen and (max-width: $tablet) {

			gap: 32px; //2rem

			.logo_item {
				img {
					max-height: 80px;
					max-width: 150px;
				}
			}
		}

	} //partners_logos
} //partners_logos_wrap



/* benefits */
.partners_benefits_wrap {
	position: relative;
	z-index: 10;
	padding: $gap;

	.benefit_items {
		display: flex;
		flex-direction: row;
		gap: $gap;
		padding: 12px; //.75rem
		position: relative;
		z-index: 5;

		@media screen and (max-width: $desktop) {
			flex-direction: column;
		}

		.benefit_item {
			flex: 1;

			.benefit_icon {
				text-align: center;
				
				img {
					max-width: 150px;
					margin-left: auto;
					margin-right: auto;
					height: auto;
				}
			}
			
			.benefit_title {
				text-align: center;
				font-size: 32px; //2rem
			}


			.benefit_content {
				font-size: 18px; //1.125rem
				line-height: 1.3;
				margin: 12px; //.75rem
				text-align: center;
			}
		} //benefit_item
	} //benefit_items
} //partners_benefits_wrap



/* plans */
.partners_plans_wrap {
	position: relative;
	z-index: 10;
	padding: $gap;


	.plan_items {

		display: flex;
		flex-direction: column;
		gap: $gap;
		padding: 12px; //.75rem
		position: relative;
		z-index: 5;

		.plan_item {
			// border: 1px solid orange;
			padding-left: 60px;
			
			
			.glass_content {
				
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: $gap;
				margin: 0 12px; //.75rem
				min-height: 180px;

				.plan_titles_wrap {
	
					width: 80%;
	
					.plan_title {
						font-size: 32px; //2rem
						margin: 12px 0px;
					}
		
					.plan_subtitle {
						font-size: 26px; //1.625rem
						margin: 12px 0px;
					}
				} //plan_titles_wrap

				.plan_content {
					font-size: 20px; //1.25rem
					line-height: 1.3;
					margin: 12px; //.75rem
					width: 100%;
				}



				
				@media screen and (max-width: $desktop) {
					flex-direction: column;
					gap: 0px;

					.plan_titles_wrap {
						width: 100%;
					}

				} //desktop


			} //glass_content


		} //plan_item

	} //plan_items



	.plan_level {
		position: absolute;
		top: 10%;
		left: 24px;
		height: 80%;
		width: 20px;
		background-color: $aq-royal-blue;
		border-radius: 10px;
		pointer-events: none;
		overflow: hidden;

		&.level_1 {background-color: $aq-starfish-yellow;}
		&.level_2 {background-color: $aq-coral-red;}
		&.level_3 {background-color: $aq-legacy-blue;}

		&::after {
			content: '';
			position: absolute;
			top: -150%;
			left: -150%;
			width: 400%;
			height: 400%;
			background: linear-gradient(
				-45deg,
				transparent 40%,
				rgba(255, 255, 255, 0.05) 47%,
				rgba(255, 255, 255, 0.2) 50%,
				rgba(255, 255, 255, 0.05) 53%,
				transparent 60%
			);
			transform: rotate(-45deg);
			animation: shimmer 1.2s ease-out infinite;
			animation-delay: 2s;
			opacity: 0;
		}

		@keyframes shimmer {
			0% {
				transform: translateX(-120%) rotate(-45deg);
				opacity: 0;
			}
			20% {
				opacity: 1;
			}
			80% {
				opacity: 1;
			}
			100% {
				transform: translateX(120%) rotate(-45deg);
				opacity: 0;
			}
		}
	} //plan_level

} //partners_plans_wrap


.partners_contact_wrap {

	.partners_contact_title {
		text-align: center;
	}

	.contact_form_wrap {
		position: relative;
		z-index: 5;
		max-width: 60%;
		margin: 0 auto;

		.hubspot_form_wrap {

		} //hubspot_form_wrap

		@media screen and (max-width: $desktop) {
			max-width: 90%;
		}

	} //contact_form_wrap
} //partners_contact_wrap
