@charset "utf-8";
/* CSS Document */


/*PROGRAMS*/

	/*TITLE*/
	.programs .content_programs {padding-top: 170px; background-color: var(--white);}
		.programs .content_programs .section_title {display: flex; align-items: center; justify-content: center; padding: 25px 0;}
			.programs .content_programs .section_title hr {width: 55%; border-color: var(--white); border-width: 2px;}
			.programs .content_programs .section_title h1 {font-size: 3.75rem; color: var(--white); text-align: center; line-height: 1;}

		/*Animations*/
		.programs .content_programs {transition: background 0.5s ease-in-out;}
			.programs .content_programs.show {background-color: var(--pink);}

		.programs .content_programs .section_title hr {transition: all 0.5s 0.5s ease-in-out; transform: scale(0);}
			.programs .content_programs.show .section_title hr {transform: scale(1);}

		.programs .content_programs .section_title h1 {transition: opacity 0.8s 0.5s ease-in-out; opacity: 0;}
			.programs .content_programs.show .section_title h1 {opacity: 1;}

	/*PURPOSE*/
	.programs .content_international {margin-top: 70px;}
		.programs .content_international h3 {color:var(--black); font-size:3.750rem; margin:60px 0 100px; position:relative; margin:0 0 60px; width: 80%;}
			/*Line*/
			.programs .content_international h3::before {width:100%; height:2px; background:var(--pink); position:absolute; left:0; bottom:30px; content:'';}
				.programs .content_international h3 .animation_text01 {display: inline-block; width: 540px; position: relative; bottom: -50px;}
				.programs .content_international h3 .animation_text02 {font-family:'boisterous_scriptregular', serif; font-weight:400; font-size:6.250rem; color:var(--pink); position:relative; z-index:2;}
				.programs .content_international h3 .ornament_pearl {position: absolute; bottom: 13px; width: 38px; right: 300px; z-index: 2;}
		.programs .content_international .content_container {display: flex; align-items: flex-start; justify-content: center; gap: 138px; margin-top: -180px;}
			.programs .content_international .content_half {width: 60%;}
			.programs .content_international .content_container:nth-of-type(1) .content_half:nth-child(1) {max-width: 456px;}
				.programs .content_international .content_half img {width: 100%;} 
				.programs .content_international .content_half p {font-weight: 400; font-size: 1.25rem; line-height: 1.4; margin-bottom: 30px;}
				.programs .content_international .content_half span {margin-top: 30px; display: block;}
			.programs .content_international .content_container + .content_container {padding-top: 100px; margin-top: 0;}
		.programs .content_international .content_container:nth-of-type(1) .content_half:nth-child(1) {padding-top: 150px;}

		/*Intro Animation*/
			.programs .content_international h3 .animation_text01,
			.programs .content_international h3 .animation_text02,
			.programs .content_international h3::before{transition:all 1s cubic-bezier(0.25, 0.1, 0.1, 1); -webkit-transition:all 1s cubic-bezier(0.25, 0.1, 0.1, 1);}

			.programs .content_international .ornament_pearl{transition:all 0.3s 0.5s ease-in-out; -webkit-transition:all 0.3s 0.5s ease-in-out; opacity: 0;}
				.programs .content_international.show .ornament_pearl{opacity: 1;}

			.programs .content_international .aside_image{transition:all 0.75s cubic-bezier(0.25, 0.1, 0.1, 1); -webkit-transition:all 0.75s cubic-bezier(0.25, 0.1, 0.1, 1);}
			
			.programs .content_international .content_women_image{transition:all .5s ease-in-out; -webkit-transition:all .5s ease-in-out;}
			
			.programs .content_international h4,
			.programs .content_international .content_button{transition:all 1s ease-in-out; -webkit-transition:all 1s ease-in-out;}

				/*Heading*/
				.programs .content_international h3 .animation_text01{opacity:0; transform:translateX(-40px); -webkit-transform:translateX(-40px); display:inline-block;}
				.programs .content_international.show h3 .animation_text01{opacity:1; transform:translateX(0);}

				.programs .content_international h3 .animation_text02{opacity:0;}
				.programs .content_international.show h3 .animation_text02{opacity:1;}

				.programs .content_international h3::before{transform:scaleX(0); -webkit-transform:scaleX(0); transform-origin:left; -webkit-transform-origin:left;}
				.programs .content_international.show h3::before{transform:scaleX(1); -webkit-transform:scaleX(1);}

					/*Delays*/
					.programs .content_international h3 .animation_text01{transition-delay:0.1s; -webkit-transition-delay:0.1s;}

					.programs .content_international h3 .animation_text02{transition-delay:0.5s; -webkit-transition-delay:0.5s;}

					.programs .content_international h3::before{transition-delay:0s; -webkit-transition-delay:0s;}

		/*Animations*/
		.programs .content_international .content_half p {transition: all 0.5s 0.3s ease-in-out; opacity: 0; transform: translateY(20px);}
			.programs .content_international.show .content_half p {opacity: 1; transform: translateY(0px);}

	/*PROGRAM STEPS*/
	.programs .content_program_step {margin-top: 170px;}
	/*Pearl Ornaments*/
	.programs .content_program_step .ornament_pearl{position:absolute; z-index:3;}

	.programs .content_program_step .pearl01{width:76px; right:-2px; bottom: -45px;}
	.programs .content_program_step .pearl02{width:38px; right:90px; bottom: -26px;}

	/*Headings*/
	.programs .content_program_step h3{font-size:3.750rem; margin:60px 0 100px; position:relative; margin:0 0 90px; color:var(--black);}

		.programs .content_program_step h3 .animation_text02{font-weight:400; font-weight: 900; color:var(--pink); position:relative; z-index:2; display: block; margin-left: 0;}
		.programs .content_program_step.green h3 .animation_text02{color: var(--green);}

		/*Line*/
		.programs .content_program_step h3::before{width:100%; height:1px; background:var(--pink); position:absolute; left:0; bottom:-10px; content:'';}
		.programs .content_program_step.green h3::before{background: var(--green);}

		/*Animations*/
		.programs .content_program_step h3 .animation_text01,
		.programs .content_program_step h3 .animation_text02,
		.programs .content_program_step h3::before{transition:all 1s cubic-bezier(0.25, 0.1, 0.1, 1); -webkit-transition:all 1s cubic-bezier(0.25, 0.1, 0.1, 1);}

		.programs .content_program_step .ornament_pearl{transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out;}
			/*Heading*/
			.programs .content_program_step h3 .animation_text01{opacity:0; transform:translateX(-40px); -webkit-transform:translateX(-40px); display:inline-block;}
			.programs .content_program_step.show h3 .animation_text01{opacity:1; transform:translateX(0);}

			.programs .content_program_step h3 .animation_text02{opacity:0;}
			.programs .content_program_step.show h3 .animation_text02{opacity:1;}

			.programs .content_program_step h3::before{transform:scaleX(0); -webkit-transform:scaleX(0); transform-origin:left; -webkit-transform-origin:left;}
			.programs .content_program_step.show h3::before{transform:scaleX(1); -webkit-transform:scaleX(1);}

				/*Delays*/
				.programs .content_program_step h3 .animation_text01{transition-delay:0.1s; -webkit-transition-delay:0.1s;}

				.programs .content_program_step h3 .animation_text02{transition-delay:0.5s; -webkit-transition-delay:0.5s;}

				.programs .content_program_step h3::before{transition-delay:0s; -webkit-transition-delay:0s;}

			/*Pearls*/
			.programs .content_program_step .ornament_pearl{opacity:0;}
			.programs .content_program_step.show .ornament_pearl{opacity:1;}

	/*Overview/Strategy*/
	.programs .content_program_step .content_overview_strategy {display: flex; align-items: center; justify-content: flex-start; gap: 120px;}
		.programs .content_program_step .content_overview_strategy .left,
		.programs .content_program_step .content_overview_strategy .right {width: 50%;}
			.programs .content_program_step .content_overview_strategy .right figure {text-align: right;}
			.programs .content_program_step .content_overview_strategy h5 {font-size: 2.25rem; margin-bottom: 30px;}
			.programs .content_program_step .content_overview_strategy p {font-size: 1.25rem; font-weight: 400; line-height: 1.4; margin-bottom: 30px;}
			.programs .content_program_step .content_overview_strategy p + h5 {margin-top: 77px;}

	/*Animations*/
	.programs .content_program_step .content_overview_strategy figure,
	.programs .content_program_step .content_overview_strategy h5 {transition: opacity 0.5s 0.3s ease-in-out; opacity: 0;}
		.programs .content_program_step.show .content_overview_strategy figure,
		.programs .content_program_step.show .content_overview_strategy h5 {opacity: 1;}
	.programs .content_program_step .content_overview_strategy p {transition: all 0.5s 0.5s ease-in-out; opacity: 0; transform: translateY(20px);}
		.programs .content_program_step.show .content_overview_strategy p {opacity: 1; transform: translateY(0px);}

	/*Initiatives*/
	.programs .content_program_step .content_initiatives {background: var(--white); margin-top: 62px; padding: 55px 0 30px;}
	.programs .content_program_step.green .content_initiatives {background: var(--white); color: #FFF;}
		.programs .content_program_step .content_initiatives .content_text {display: flex; align-items: center; justify-content: flex-start; gap: 120px; margin-bottom: 30px;}
			.programs .content_program_step .content_initiatives .content_text .left,
			.programs .content_program_step .content_initiatives .content_text .right {width: 50%;}
			.programs .content_program_step .content_initiatives h5 {font-size: 2.25rem; margin-bottom: 30px;}
			.programs .content_program_step .content_initiatives p {font-size: 1.25rem; font-weight: 400; line-height: 1.4;}

	/*Animations*/
	.programs .content_program_step .content_initiatives {transition: background 0.5s ease-in-out;}
		.programs .content_program_step .content_initiatives.show {background: var(--pink);}
		.programs .content_program_step.green .content_initiatives.show {background: var(--green);}
			.programs .content_program_step .content_initiatives h5 {transition: opacity 0.5s 0.3s ease-in-out; opacity: 0;}
				.programs .content_program_step .content_initiatives.show h5 {opacity: 1;}
			.programs .content_program_step .content_initiatives p {transition: all 0.5s 0.5s ease-in-out; opacity: 0; transform: translateY(20px);}
				.programs .content_program_step .content_initiatives.show p {opacity: 1; transform: translateY(0px);}

@media (max-width: 1000px) {
	.programs .p_left_1 {padding-left: 0;}
	.programs .center_content.c_10 {width: 676px;}

	/*Title*/
	.programs .content_programs {padding-top: 115px;}
		.programs .content_programs .section_title {width: 100%;}
			.programs .content_programs .section_title h1 {font-size: 3rem;}

	/*Programs*/
	.programs .content_international {margin-top: 50px;}
		.programs .content_international .center_content.c_12 {width: 638px;}
			.programs .content_international h3{font-size:2.375rem; width: 100%; margin-bottom: 37px;}
				.programs .content_international h3::before{bottom:30px;}
				.programs .content_international h3 .animation_text01 {width: 460px; bottom: -20px;}
				.programs .content_international h3 .animation_text02{font-size:3.875rem; left: -10px;}
			.programs .content_international h3 .pearl01{width:45px; right:-2px; top: 100px;}
			.programs .content_international h3 .pearl02{width:28px; right:55px; top: 108px;}

		.programs .content_international .content_container {flex-direction: column; margin-top: 0; gap: 40px;}
			.programs .content_international .content_half {width: 100%;}
				.programs .content_international .content_container .content_half:nth-child(1) {order: 2; padding-top: 0 !important; max-width: 100% !important;}
				.programs .content_international .content_container .content_half:nth-child(2) {order: 1;}
			.programs .content_international .content_container figure {width: 332px; margin: auto;}
			.programs .content_international .content_half p {margin-bottom: 30px;}

	/*Program steps*/
	.programs .content_program_step {margin-top: 95px;}
		.programs .content_program_step .center_content.c_10,
		.programs .content_program_step .center_content.c_12 {width: 638px;}
			.programs .content_program_step h3{font-size:2.375rem; width: 100%; margin-bottom: 37px;}
				.programs .content_program_step h3::before{bottom:-10px;}
				.programs .content_program_step h3 .animation_text01{width: 350px;}
				.programs .content_program_step:nth-of-type(4) h3 .animation_text01 {width: 380px;}
				.programs .content_program_step:nth-of-type(7) h3 .animation_text01 {width: 340px;}
				.programs .content_program_step h3 .animation_text02{font-size:2.375rem;}
			.programs .content_program_step .pearl01{width:45px; right:-2px; bottom: -28px;}
			.programs .content_program_step .pearl02{width:28px; right:55px; bottom: -20px;}

			.programs .content_program_step .content_overview_strategy {flex-direction: column; gap: 80px;}
				.programs .content_program_step .content_overview_strategy .left,
				.programs .content_program_step .content_overview_strategy .right {width: 100%;}
				.programs .content_program_step .content_overview_strategy h5 {font-size: 1.75rem; margin-bottom: 50px;}
				.programs .content_program_step .content_overview_strategy p {font-size: 1.125rem;}
				.programs .content_program_step .content_overview_strategy img {width: 100%;}
				.programs .content_program_step .content_overview_strategy figure {max-width: 331px; margin: auto;}
			.programs .content_program_step .content_initiatives .content_text {flex-direction: column; gap: 25px;}
				.programs .content_program_step .content_initiatives .content_text .left,
				.programs .content_program_step .content_initiatives .content_text .right {width: 100%;}
				.programs .content_program_step .content_initiatives h5 {font-size: 1.75rem; margin-bottom: 50px;}
				.programs .content_program_step .content_initiatives p {font-size: 1.125rem;}
				.programs .content_program_step:nth-child(even) .content_overview_strategy .left {order: 2;}
				.programs .content_program_step:nth-child(even) .content_overview_strategy .right {order: 1;}
}

@media (max-width: 750px) {
	.programs .center_content.c_10 {width: 100%;}

	/*Title*/
	.programs .content_programs {padding-top: 165px;}
		.programs .content_programs .section_title {padding: 43px 0;}
			.programs .content_programs .section_title h1 {font-size: 2.25rem; padding: 0 20px;}

	/*Programs*/
	.programs .content_international {padding: 0 36px;}
		.programs .content_international .center_content.c_12 {width: 100%;}
			.programs .content_international h3 {font-size: 1.875rem; display: flex; flex-direction: column; margin-bottom: 0;}
				.programs .content_international h3 .animation_text01 {position: relative; bottom: -14px; width: auto;}
				.programs .content_international h3 .animation_text02 {font-size: 3.125rem; bottom: -5px; left: 0;}
				.programs .content_international h3::before {bottom: 90px;}
				.programs .content_international h3 .pearl01 {width: 30px; right: -2px; bottom: 77px; top: initial;}
				.programs .content_international h3 .pearl02 {width: 18px; right: 36px; bottom: 82px; top: initial;}

			.programs .content_international .content_container figure {width: auto;}
			.programs .content_international .content_half p {font-size: 1.125rem;}

	/*Program steps*/
	.programs .content_program_step {padding: 0 36px;}
		.programs .content_program_step .center_content.c_10,
		.programs .content_program_step .center_content.c_12 {width: 100%;}
			.programs .content_program_step h3 {font-size: 1.875rem; display: flex; flex-direction: column; margin-bottom: 60px;}
				.programs .content_program_step h3 .animation_text01 {position: relative; bottom: -8px; width: auto !important;}
				.programs .content_program_step h3 .animation_text02 {font-size: 1.875rem; bottom: -5px; margin-left: 0; line-height: 0.9; max-width: calc(100% - 60px);}
				.programs .content_program_step .pearl01 {width: 30px; right: -2px; bottom: -24px;}
				.programs .content_program_step .pearl02 {width: 18px; right: 36px; bottom: -18px;}

			.programs .content_program_step .content_initiatives {margin-left: -36px; width: calc(100% + 72px); padding: 55px 36px 30px;}
}