*{
box-sizing:border-box;
}
html{
font-size:16px;
}
body{
margin:0;
overflow-x:hidden;
width: 100%;
line-height: 1.5;
color:#222;
}
h1,h2,h3,p,li{
overflow-wrap: break-word;
}
img{
max-width:100%;
height:auto;
display:block;
margin: 0px;
}

		iframe{
			max-width:100%;
		}

		header{
			background-color: #69765aff;
			width: 100%;
			padding: 20px 0;
		}
		section{
			background-color: white;
			position: relative;
			z-index: 1;
			overflow: visible;
		}
		.biography{
			background-color: #C2ADB3;
		}
		.title{
			font-size: clamp(2rem, 5vw, 4rem);
		}
		.logo{
			width: 180px;
			max-width: 40vw;
		}
		footer{
			background-color: #69765aff;
			color: white;
			margin-bottom: 0px;
			height: auto;
			width: 100%;
			position: relative;
			z-index: 2;
		}
		
		a:link{
			color: white;
			text-decoration: none;
		}
		a:visited{
			color: white;
			text-decoration: none;
		}
		a:hover{
			color: black;
			text-decoration: underline;
		}
		a:active{
			color: white;
		}
		.icons{
			width: 32px;
			height: auto;
			display: inline-block;
			vertical-align: bottom;
			margin: 10px;
		}
		.small-icon{
			margin: 10px;
			display: inline-block;
			vertical-align: bottom;
			width: 32px;
			height: auto;
		}
		.bar{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			gap: 15px;
			padding: 0;
			margin: 0;
			list-style: none;
		}
		.pages{
			white-space: nowrap;
			color: white;
			display: block;
		}
		.menu{
			width:min(1200px,95%);
			background-color: #69765aff;
			margin:auto;
			display:flex;
			flex-wrap:wrap;
			justify-content:center;
			align-items:center;
			gap:15px;
		}
		.footer-menu{
			display: flex;
			flex-wrap: wrap;
			gap: 40px;
			width: min(1200px, 95%);
			justify-content: space-between;
			align-items: flex-start;
			background-color: #69765aff;
			padding: 40px 20px;
			box-sizing: border-box;
			margin: auto;
		}
		.article{
			width: min(1200px, 95%);
			margin: auto;
			text-align: center;
		}
		.panels{
			display: flex;
			flex-wrap: wrap;
			gap: 30px;
			justify-content: center;
		}
		.panel{
			flex:1 1 320px;
			max-width: 380px;
			background: white;
			margin-bottom: 40px;
		}
		.panel img{
			width: 100%;
			display: block;
		}
		.medium-panel{
			display: flex;
			align-items: center;
			gap: 40px;
			width: 100%;
			margin-bottom: 140px;
		}
		textarea{
    			width:90%;
    			border-radius:15px;
    			padding:10px;
    			font:inherit;
    			resize:vertical;
    			min-height:140px;
		}
		.email,
		.contact{
			display: inline-block;
			vertical-align: top;
			background-color: #69765aff;
			text-align: left;
			flex:1 1 350px;
			width: auto;
			height: auto;
		}
		.support{
			width:100%;
			max-width:100%;
			overflow-wrap:anywhere;
			word-break:break-word;
			background:#4F5D44;
			padding:40px 20px;
   			 border-radius:12px;
		}
		.copyright{
			margin: auto;
		}
		.button{
			font-size: 16px;
			color: white;
			background-color: blue;
			border-radius: 100px;
			border: 0px;
			padding: 10px 20px;
		}
		input{
			border-radius: 15px;
			width: 90%;
			height: 50px;
		}
		label{
			font-size: 20px;
		}
		.portrait{
			width: 40%;
			border-radius: 10px;
		}
		.story{
			width: 60%;
			text-align: left;
		}
		.video-item{
			width:100%;
			text-align:center;
			margin-bottom:60px;
		}

		.video-item h2{
			color:#222;
			margin-bottom:20px;
		}

		.video-wrapper,
		.vertical-video{
			width:100%;
			margin:auto;
		}

		.video-wrapper{
			max-width:1100px;
			aspect-ratio:16/9;
		}

		.vertical-video{
			max-width:320px;
			aspect-ratio:9/16;
		}

		.video-wrapper iframe,
		.vertical-video iframe{
			width:100%;
			height:100%;
		}
		.vertical-video-row{
			display:flex;
			justify-content:center;
			align-items:flex-start;
			gap:40px;
			flex-wrap:wrap;
			margin:40px auto;
		}

		.vertical-video-item{
			flex:1 1 350px;
			max-width:400px;
			text-align:center;
		}

		
		/* SCROLL REVEAL ANIMATION */

		.hidden{
			opacity: 0;
			transform: translateY(50px);
			transition: 
				opacity 1s ease, 
				transform 1s ease;
			will-change: transform, opacity;
		}
		.reveal{
			opacity: 1;
			transform: translateY(0px);
		}
		@media (max-width:768px){
			.portrait{
				max-width:500px;
				margin:auto;
			}
			.medium-panel{
				flex-direction:column;
			}
			.portrait,
			.story{
				width:100%;
			}
			.footer-menu{
				flex-direction:column;
				align-items:center;
			}

			.email,
			.contact{
				width:100%;
			}
			.contact h2{
				font-size: clamp(1rem, 3vw, 1.5rem);
			}
			.panel{
				width:100%;
				max-width:500px;
			}

			.logo{
				max-width:250px;
			}
			.vertical-video-row{
				flex-direction:column;
				align-items:center;
			}
		}