/*RISKS---------------------------------------*/
/*INTRO-----------------------------*/
#intro{
	position: relative;
	display: flex;
	width: 100%;
	min-height: 540px;
	justify-content: center;
	align-items: center;
	background-color: var(--red);
}

.bounds{
	position: absolute;
	display: flex;
	justify-content: space-between;
	width: calc(100vw - 40px);
	z-index: 0;
}

.bounds img{
	width: 120px;
}

.intro-content, .hero-image{
	z-index: 1;
}

.intro-content{
	display: flex;
	flex-direction: column;
	margin-right: 35px;
}

.intro-content h1{
	font-size: 90px;
	line-height: 72px;
	color: white;
}

.intro-content span{
	font-size: 28px;
	font-weight: 600;
	line-height: 32px;
	margin: 20px 0;
	color: white;
}

.intro-content button{
	padding: 0 32px; 
	height: 64px;
	background-color: var(--dark-blue);
}

.intro-content button p, .intro-content button::after{
	color: white;
}
.intro-content button:hover{
	padding-right: 28px;
	background-color: white;
}

.intro-content button:hover p{
	color: var(--dark-blue);
}

.intro-content button:hover::after{
	width: 18px;
	margin-left: 10px;
	color: var(--dark-blue);
}

.hero-image{
	width: 500px;
}
/*INTRO-----------------------------*/

/*PREMISE---------------------------*/
#premise{
	position: relative;
	display: flex;
	width: 100%;
	min-height: 450px;
	justify-content: center;
	align-items: center;
	background-color: var(--dark-blue);
	gap: 60px;
}

.premise-left{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.premise-left span{
	font-size: 36px;
	font-weight: 600;
	color: white;
	margin: 30px 0 20px;
}

.premise-left h2{
	font-size: 72px;
	font-weight: 900;
	color: white;
	margin-bottom: 30px;
}

.premise-left h1{
	font-size: 117px;
	font-weight: 900;
	color: white;
	margin: 0;
}

.premise-right{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.premise-right p{
	font-size: 24px;
	font-weight: 400;
	line-height: 28px;
	color: white;
}

.premise-collection{
	display: flex;
	gap: 20px;
}

.premise-item{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 205px;
	height: 210px;
	background-color: white;
	border-radius: 50px;
	color: var(--dark-blue);
}

.premise-item .img-container{
	width: 155px;
	height: 140px;
	margin-top: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.img-container.premise1 img{
	width: 142px;
	margin-top: 10px;
}

.img-container.premise2 img{
	width: 154px;
	margin-bottom: 10px;
}

.img-container.premise3 img{
	width: 106px;
}

.img-container.premise4 img{
	width: 135px;
	margin-left: 20px;
}
/*PREMISE---------------------------*/

/*LINKS-----------------------------*/
#links{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	justify-content: center;
	align-items: center;
	background-color: var(--dark-blue);
}

.links-all{
	display: flex;
	flex-direction: column;
}

.links-container{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.links-container a{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 240px;
	height: 240px;
	background-image: url('../images/risks/link-container.png');
	background-size: 190px 190px;
	background-repeat: no-repeat;
	background-position: center;

    transition: background-size 0.2s ease;
}

.links-container a:hover{
	background-size: 240px 240px;
}

.links-container img{
	position: relative;
	width: 200px;
	z-index: 2;
	filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.75));
}

.links-container.up{
	position: relative;
	top: 20px;
}

.links-container.up a{
	margin-right: 300px;
}

.links-container.down{
	position: relative;
	bottom: 20px;
}

.links-container.down a{
	margin-left: 300px;
}

.links-container hr{
	position: absolute;
	top: calc(50% - 5px);
	width: calc(100vw - 15px);
	z-index: 1;
	height: 10px;
	border-top: 10px solid white;
}

.links-text{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 60px 0 150px;
}

.links-text span, .links-text span strong{
	font-size: 36px;
	font-weight: 600;
	color: white;
}

.links-text span strong{
	font-size: 36px;
	font-weight: 700;
	color: var(--blue);
}

.links-text h2{
	font-size: 72px;
	font-weight: 900;
	line-height: 60px;
	text-align: center;
	color: white;
}

.links-text h2 strong{
	color: var(--red);
}
/*LINKS-----------------------------*/

/*RISKS-----------------------------*/
#child-exploitation, #identity-theft, #ai-misuse, #digital-footprint{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	justify-content: center;
	align-items: center;
	background-color: var(--light-gray);
	scroll-margin-top: 200px;
}

.risks-banner{
	position: absolute;
	top: -150px;
	bottom: 50%;
	display: flex;
	align-items: center;
	width: 100%;
	height: 300px;
	background-size: contain;
	background-repeat: no-repeat;
	filter: drop-shadow(0 7px 5px rgba(0, 0, 0, 0.75));
}

#child-exploitation .risks-banner{
	background-image: url('../images/risks/exploitation-banner.png');
}

#identity-theft .risks-banner{
	background-image: url('../images/risks/theft-banner.png');
}

#ai-misuse .risks-banner{
	background-image: url('../images/risks/ai-banner.png');
}

#digital-footprint .risks-banner{
	background-image: url('../images/risks/footprint-banner.png');
}

.risks-banner h1{
	font-size: 72px;
	font-weight: 900;
	color: white;
	margin-left: 300px;
}

.risks-banner hr{
	position: relative;
	top: -5px;
	flex-grow: 1;
	height: 10px;
	border-top: 10px solid white;
	margin-left: 30px;
}

.risks-content{
	width: 830px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 100px 0 30px;
}

.risks-content p{
	width: 630px;
	font-size: 24px;
	font-weight: 600;
	line-height: 28px;
}

.text-icon{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 145px;
	height: 185px;
}

#child-exploitation .text-icon img{
	width: 162px;
	filter: drop-shadow(-3px 3px 5px rgba(0, 0, 0, 0.75));
}

#identity-theft .text-icon img{
	width: 142px;
	filter: drop-shadow(-3px 3px 5px rgba(0, 0, 0, 0.75));
}

#ai-misuse .text-icon img{
	width: 159px;
	filter: drop-shadow(-3px 3px 5px rgba(0, 0, 0, 0.75));
}

#digital-footprint .text-icon img{
	width: 159px;
	filter: drop-shadow(-3px 3px 5px rgba(0, 0, 0, 0.75));
}

.risks-case{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 1000px;
	justify-content: center;
	align-items: center;
	background-color: var(--light-red);
	border-radius: 50px;
	filter: drop-shadow(-7px 7px 5px rgba(0, 0, 0, 0.75));
	margin-bottom: 200px;
}

#digital-footprint .risks-case{
	margin-bottom: 60px;
}

.case-top{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 880px;
	margin-top: 45px;
}

.case-left p{
	font-size: 24px;
	font-weight: 500px;
}

.case-left h2{
	font-size: 48px;
	font-weight: 700px;
	line-height: 48px;
}

.case-right button{
	padding: 0 32px; 
	height: 64px;
	background-color: white;
}

.case-right button p{
	color: var(--dark-blue);
}

.case-right button::after{
	color: var(--dark-blue);
}

.case-right button:hover{
	padding-right: 28px;
	background-color: var(--red);
}

.case-right button:hover p{
	color: white;
}

.case-right button:hover::after{
	width: 18px;
	margin-left: 10px;
	color: white;
}

.case-text{
	width: 880px;
	font-size: 24px;
	font-weight: 400px;
	line-height: 28px;
	margin: 30px 0;
}

.risks-case img{
	width: 880px;
	border: 10px solid white;
	border-radius: 10px;
}

.case-text:last-child{
	margin-bottom: 40px;
}
/*CHILD-EXPLOITATION----------------*/

/*OTHER-RISKS-----------------------*/
#other-risks{
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	justify-content: center;
	align-items: center;
	background-color: var(--red);
	gap: 45px;
}

#other-risks h1{
	font-size: 72px;
	font-weight: 900;
	color: var(--dark-blue);
	margin-top: 60px;
}

#other-risks strong{
	color: white;
}

#other-risks h3{
	font-size: 36px;
	font-weight: 700;
	line-height: 36px;
	text-align: center;
}

#other-risks h3:last-child{
	margin-bottom: 60px;
}

.other-container{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 1036px;
	height: 200px;
	background-color: white;
	border-radius: 50px;
}

.other-container img{
	width: 200px;
	margin-left: 60px;
}

#other-risks .other-container h1{
	margin: 0 0 0 30px;
}
/*OTHER-RISKS-----------------------*/

/*AWARENESS-------------------------*/
#awareness{
	position: relative;
	display: flex;
	width: 100%;
	min-height: 460px;
	justify-content: center;
	align-items: center;
	background-color: var(--dark-blue);
	color: white;
	gap: 100px;
}

.awareness-left{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.awareness-left h2{
	font-size: 60px;
	font-weight: 800;
	margin-bottom: 30px;
}

.awareness-left h3{
	font-size: 32px;
	font-weight: 600;
}

.awareness-left span{
	font-size: 21px;
	font-weight: 500;
	line-height: 24px;
	margin: 5px 0 20px;
}

.tagline{
	display: flex;
	align-items: center;
}

.tagline img{
	width: 9px;
	margin-right: 35px;
}

.tagline h3{
	font-size: 28px;
	font-weight: 800;
	line-height: 32px;
	color: var(--blue);
}

.shield{
	width: 325px;
}

.awareness-left button{
	padding: 0 32px; 
	height: 64px;
	background-color: white;
	margin-top: 30px;
}

.awareness-left button p{
	color: var(--dark-blue);
}

.awareness-left button::after{
	color: white;
}

.awareness-left button:hover{
	padding-right: 28px;
	background-color: var(--blue);
}

.awareness-left button:hover p{
	color: white;
}

.awareness-left button:hover::after{
	width: 18px;
	margin-left: 10px;
	color: white;
}
/*AWARENESS-------------------------*/
/*RISKS---------------------------------------*/