/* Variables */
:root {
	--primary-color: #ed1d23;
	--primary-darker-color: #c61016;
	--main-bg-color: #14161a;
	--white-color: #FFFFFF;
	--black-color: #0B0C0E;

	--title-font: 'Obvia', sans-serif;
	--body-font: 'Montserrat', sans-serif;

	--smaller-size: clamp(0.875rem, calc(1.2vw + 0.5rem), 1rem);   		/* 16px -> 14px */
	--small-size: clamp(1rem, calc(1.2vw + 0.5rem), 1.125rem);   		/* 18px -> 16px */
	--normal-size: clamp(1.125rem, calc(1.2vw + 0.5rem), 1.25rem);   	/* 20px -> 18px */
	--medium-size: clamp(1.5rem, calc(1.2vw + 0.5rem), 1.625rem); 		/* 26px -> 24px */
	--big-size: clamp(1.5rem, calc(3vw + 0.5rem), 2rem);        		/* 32px -> 24px */
	--bigger-size: clamp(1.625rem, calc(5.33vw + 0.5rem), 2.25rem);   	/* 36px -> 26px */
	--biggest-size: clamp(1.75rem, calc(5.33vw + 0.5rem), 3rem);   		/* 48px -> 28px */
	--heading-size-2: clamp(2rem, calc(5.33vw + 0.5rem), 3.5rem);		/* 56px -> 32px */
	--heading-size: clamp(2.25rem, calc(5.33vw + 0.5rem), 3.5rem);		/* 56px -> 36px */
	--number-size: clamp(3.3375rem, calc(5.33vw + 0.5rem), 4rem);		/* 64px -> 54px */

	--section-spacing: 8.75rem;
}


/* Fonts */
@font-face {
	font-family: "Obvia";
	src: url("/static/fonts/Obvia-Wide-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Montserrat";
	src: url("/static/fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Montserrat";
	src: url("/static/fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
	font-style: italic;
	font-display: swap;
}


/* Custom scrollbar */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background-color: var(--black-color);
}

::-webkit-scrollbar-thumb {
	background-color: var(--primary-color);
}


/* Normalize CSS */
*, *::after, *::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

*::selection {
	background-color: var(--primary-darker-color);
}

a {
	text-decoration: none;
	color: inherit;
}

ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

button {
	border: none;
	outline: none;
	background-color: transparent;
}

img {
	width: 100%;
}

input, textarea {
	background-color: transparent;
	width: 100%;
	outline: none;
}


/* General CSS */
html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--main-bg-color);
	color: var(--white-color);
	overflow-x: hidden;
}

section:not(.event-content), .section {
	width: 80%;
	max-width: 1383px;
	margin: auto;
}

h1 {
	font-family: var(--title-font);
	font-size: var(--heading-size);
	line-height: 125%;
	margin-bottom: 1.5rem;
}

h2 {
	font-family: var(--title-font);
	font-size: var(--heading-size);
	line-height: 125%;
	margin-bottom: 1.5rem;
}

h3 {
	font-family: var(--title-font);
	font-size: var(--big-size);
	line-height: 125%;
	margin-bottom: 1.5rem;
}

h4 {
	font-family: var(--title-font);
	font-size: var(--bigger-size);
	line-height: 140%;
	margin-bottom: 1.5rem;
}

.heading-underline {
	display: block;
	width: 40%;
	height: 8px;
	max-width: 330px;
	background-color: var(--primary-color);
	margin-top: 1rem;
}

p {
	font-family: var(--body-font);
	font-size: var(--normal-size);
	line-height: 150%;
	margin-bottom: var(--normal-size);
}

strong {
	font-weight: 700;
}


/* Navbar */
nav {
	position: fixed;
	top: 0;
	width: 100%;

	padding: 2rem 0;
	background-color: rgba(20, 22, 26, 0.8);
	backdrop-filter: blur(25px);

	z-index: 5;
	transition: 0.6s;
}

nav > .content {
	width: 80%;
	max-width: 1383px;
	margin: auto;

	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 3rem;
}

nav > .content > .logo {
	width: 70%;
	max-width: 242px;
}

nav > .content > .options {
	width: 65%;
}

nav > .content > .options > ul {
	display: flex;
	justify-content: space-between;
	align-items: center;

	font-family: var(--title-font);
	font-size: var(--normal-size);
}

nav > .content > .options > ul a {
	position: relative;
}

nav > .content > .options > ul a::after {
	content: '';
	position: absolute;
	bottom: -0.5rem;
	left: 0;
	width: 0;
	height: 3px;
	background-color: var(--primary-color);

	transition: 0.3s;
}

nav > .content > .options > ul a:hover::after {
	width: 40%;
	max-width: 80px;
	transition: 0.3s;
}


/* Hero section */
section.hero {
	margin: calc(149px + 6rem) auto var(--section-spacing);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 4rem;
}

section.hero > img {
	width: 28%;
	max-width: 326px;
}

section.hero > .text {
	width: 68%;
	max-width: 915px;
}

section.hero > .text > p {
	max-width: 795px;
}


/* Event section */
div.event-background {
	background-color: var(--primary-color);
	padding: 4rem 7rem 4rem 0;
	margin-bottom: var(--section-spacing);

	clip-path: polygon(
		0 0,						/* top-left */
		calc(100% - 180px) 0, 		/* top-right before arrow */
		100% 50%,					/* arrow tip */
		calc(100% - 180px) 100%,	/* bottom-right before arrow */
		0 100%						/* bottom-left */
	);
	width: 70%;
}

section.event-content {
	width: 80%;
	max-width: 1383px;
	margin: 0 0 0 auto;
}

section.event-content > h4, section.event-content > p {
	max-width: 760px;
}


/* What is Ciberguardian section */
section.what-is {
	scroll-margin-top: calc(140px + var(--section-spacing));

	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 4rem;
	margin-bottom: var(--section-spacing);
}

section.what-is > .text {
	width: 60%;
	max-width: 680px;
}

section.what-is > .list {
	width: 45%;
	max-width: 565px;
}

section.what-is > .list li {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 1.3rem;

	margin-bottom: 1rem;
}

section.what-is > .list li:last-of-type {
	margin-bottom: 0;
}

section.what-is > .list li:last-of-type > p {
	margin-bottom: 0;
}

section.what-is > .list img {
	max-width: 40px;
	width: clamp(2rem, calc(1.2vw + 0.5rem), 2.5rem);
	margin-top: 2px;
}


/* Features section */
section.features {
	margin-bottom: var(--section-spacing);
}

section.features h2 {
	max-width: 915px;
}

section.features > .list {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 3rem 1rem;

	margin-top: 5rem;
}

section.features > .list > li {
	width: 48%;
	max-width: 660px;

	display: flex;
	align-items: flex-start;
	gap: 1.875rem;
}

section.features > .list > li > img {
	max-width: 97px;
}

section.features > .list > li h3 {
	margin-bottom: 0;
}

section.features > .list > li .title {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: 1rem;

}

section.features > .list > li .title > img {
	display: none;
	max-width: 97px;
	width: clamp(2.25rem, calc(5.33vw + 0.5rem), 6.1rem);
}


/* How it works section */
section.how-it-works {
	scroll-margin-top: calc(140px + 3rem);
	margin-bottom:var(--section-spacing);
}

section.how-it-works h2 {
	max-width: 915px;
}

section.how-it-works > .steps {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 3rem;

	margin-top: 5rem;
}

section.how-it-works .list li {
	max-width: 660px;

	display: flex;
	align-items: flex-start;
	gap: 1.875rem;
	margin-bottom: 3rem;
}

section.how-it-works .list li > .number {
	color: var(--primary-color);
	font-size: var(--number-size);
	font-weight: 700;

	margin-top: -1rem;
	min-width: 58px;
}


/* Partners section */
div.partners-background {
	scroll-margin-top: calc(140px + 3rem);
	background-color: var(--primary-color);
	padding: 5rem 0;
	margin-bottom: var(--section-spacing);
}

section.partners-content h3 {
	font-size: var(--biggest-size);
	line-height: 140%;
	max-width: 1250px;
}

section.partners-content > .list {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 3rem 1rem;
	margin-top: 5rem;
}

section.partners-content li {
	width: 31.5%;
	max-width: 420px;
}

section.partners-content li > .title {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0.5rem;
}

section.partners-content li > .title > img {
	max-width: 36px;
}

section.partners-content li > .title > h4 {
	font-size: var(--medium-size);
	margin-bottom: 0;
}


/* Informática Balear section */
section.informatica-balear {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 3rem;
	margin-bottom: var(--section-spacing);
}

section.informatica-balear > .text {
	max-width: 630px;
}


/* Footer */
footer {
	background-color: var(--black-color);
	padding: 3rem 0;
}

footer > .section {
	display: flex;
	/* justify-content: space-between; */
	justify-content: flex-end;
	align-items: center;
	gap: 3rem;
}

/* footer > .section > .legal-info {
	display: none;
} */

footer p {
	margin: 0;
	font-size: var(--small-size);
}

.divider-vertical {
	width: 1px;
	height: 57px;
	background-color: var(--white-color);
}

.divider-landscape {
	width: 20px;
	height: 1px;
	background-color: var(--white-color);
}

/* footer .logos {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 2vw;
}

footer .ib {
	display: flex;
	justify-content: center;
	align-items: center;
}

footer .ib  img {
	max-width: 273px;
}

footer .axyor {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}

footer .axyor img {
	max-width: 24px;
}

footer .axyor p {
	margin-bottom: -3px;
	font-weight: 600;
} */

footer .legal {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}

/* footer .legal > .axyor { 
	display: none;
} */

footer .legal-info {
	position: relative;
	font-family: var(--body-font);
	font-weight: 600;
	font-size: var(--small-size);
}

footer .legal-info::after {
	content: '';
	position: absolute;
	bottom: -0.5rem;
	left: 0;
	width: 0;
	height: 3px;
	background-color: var(--primary-color);

	transition: 0.3s;
}

footer .legal-info:hover::after {
	width: 40%;
	max-width: 80px;
	transition: 0.3s;
}

footer .legal > p {
	font-size: var(--smaller-size);
}


/* Responsiveness */
.hamburger-menu {
	display: none;
}

@media (max-width: 1500px) {
	/* Navbar */
	.hamburger-menu {
		display: block;
	}

	nav > .content > .options {
		display: block;
		position: fixed;
		top: 142px;
		bottom: 0;
		left: 0;
		right: 0;

		background-color: var(--main-bg-color);
		width: 100%;
		height: calc(100vh - 96px);    /* fallback */
		height: calc(100dvh - 96px);   /* preferred */

		transform: translateX(100%);
		transition: 0.6s;
	}

	nav > .content > .options > ul {
		width: 80%;
		margin: 3rem auto 0;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;

		gap: 3rem;
	}

	/* Hero section */
	section.hero {
		align-items: flex-start;
	}
	
	section.hero > img {
		margin-top: 1rem;
	}

	/* Event section */
	div.event-background {
		width: 90%;
	}

	/* What is Ciberguardian section */
	section.what-is {
		scroll-margin-top: calc(140px + 1rem);
	}

	section.what-is > .text {
		width: 50%;
	}
	
	section.what-is > .list {
		width: 50%;
	}

	/* How it works section */
	section.how-it-works {
		scroll-margin-top: calc(140px + 1rem);
	}

	/* Partners section */
	div.partners-background {
		scroll-margin-top: 140px;
	}

	/* Informática Balear section */
	section.informatica-balear > .text {
		width: 40%;
	}

	section.informatica-balear > h2 {
		width: 60%;
	}

	/* Footer */
	/* footer > .section {
		flex-direction: column;
		gap: 1rem;
	}

	.divider-vertical {
		display: none;
	}

	footer .logos {
		width: 100%;
		justify-content: space-between;
		align-self: flex-start;
	}*/

	footer .legal {
		align-self: flex-end;
	}
}

@media (max-width: 1200px) {
	/* Event section */
	section.event-content {
		width: 80%;
		margin: 0 6rem 0 auto;
	}
}

@media (max-width: 992px) {
	:root {
		--section-spacing: 6rem;
	}

	/* Hero section */
	section.hero {
		margin: calc(142px + 1.5rem) auto 4rem;
	}

	section.hero > img {
		display: none;
	}

	section.hero > .text {
		width: 100%;
	}

	/* Event section */
	div.event-background {
		width: 100%;
		padding: 3.5rem 0 6rem;
		clip-path: polygon(
			0 0,			/* top-left */
			100% 0, 		/* top-right before arrow */
			100% 85%,		/* arrow tip */
			50% 100%,		/* bottom-right before arrow */
			0 85%			/* bottom-left */
		);
	}

	section.event-content {
		width: 85%;
		margin: 0 auto;
		text-align: center;
	}

	/* What is Ciberguardian section */
	section.what-is {
		flex-wrap: wrap;
		gap: 1.5rem;
	}

	section.what-is > .text {
		width: 100%;
		max-width: none;
	}

	section.what-is > .list {
		width: 100%;
		max-width: none;
	}

	/* Features section */
	section.features > .list {
		gap: 1.5rem 0;
		margin-top: 3rem;
	}

	section.features > .list > li {
		width: 100%;
		max-width: none;
	}

	section.features > .list > li > img {
		display: none;
	}

	section.features > .list > li .title {
		margin-bottom: 0.5rem;
	}

	section.features > .list > li .title > img {
		display: block;
	}

	/* How it works section */
	section.how-it-works > .steps {
		flex-direction: column;
		gap: 0;
		margin-top: 3rem;
	}
	
	section.how-it-works .list li {
		width: 100%;
		max-width: none;
	}

	/* Partners section */
	section.partners-content > .list {
		gap: 2rem 1rem;
	}
	
	section.partners-content li {
		width: 48%;
	}

	/* Informática Balear section */
	section.informatica-balear {
		flex-direction: column;
		gap: 1rem;
	}

	section.informatica-balear > .text {
		width: 100%;
		max-width: none;
	}

	section.informatica-balear > h2 {
		width: 100%;
	}

	/* Footer */
	footer {
		padding: 2rem 0;
	}

	/* footer > .section {
		flex-direction: column;
		gap: 1rem;
	}

	footer > .section > .legal-info {
		display: block;
		align-self: flex-end;
	}

	footer .logos {
		display: none;
	} */

	/* footer .logos > .axyor {
		display: none;
	}

	footer .ib {
		width: 100%;
		flex-direction: column;
		justify-content: flex-start;
    	align-items: flex-start;
	}

	footer .ib > a {
		width: 100%;
	}

	footer .ib  img {
		max-width: 320px;
		width: 80%;
	} */

	/* footer .axyor {
		gap: 0.5rem;
	}

	footer .axyor img {
		max-width: 16px;
	}
	
	footer .axyor p {
		font-size: var(--smaller-size);
	}
	
	footer .legal {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1rem;
	}
	
	footer .legal > .axyor { 
		display: none;
	}

	footer .legal {
		flex-flow: row wrap;
		margin-top: 1rem;
	}

	footer .legal > .axyor { 
		display: flex;
	}

	footer .legal > .legal-info { 
		display: none;
	} */
}

@media (max-width: 768px) {
	:root {
		--section-spacing: 4rem;
	}

	/* General CSS */
	section:not(.event-content), .section {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

	.heading-underline {
		height: 6px;
		max-width: 184px;
	}

	/* Navbar */
	nav {
		padding: 1rem 0;
	}

	nav > .content {
		width: 90%;
		margin: auto;
	}

	nav > .content > .options {
		top: 96px;
	}

	nav > .content > .logo {
		max-width: 183px;
		margin-top: 5px;
	}

	/* Hero section */
	section.hero {
		margin: calc(96px + 1.5rem) auto 3rem;
	}

	/* What is Ciberguardian section */
	section.what-is {
		scroll-margin-top: calc(96px + 1rem);
	}

	/* How it works section */
	section.how-it-works {
		scroll-margin-top: calc(96px + 1rem);
	}

	section.how-it-works .list li {
		flex-direction: column;
		gap: 0rem;
		margin-bottom: 1.5rem;
	}

	section.how-it-works .list li > .number {
		margin: -0.5rem 0 0;
	}

	/* Partners section */
	div.partners-background {
		scroll-margin-top: 96px;
		padding: 3rem 0;
	}

	section.partners-content > .list {
		gap: 1.5rem;
		margin-top: 2rem;
	}

	section.partners-content li {
		width: 100%;
		max-width: none;
	}
}


@media (max-width: 492px) {
	footer > .section {
		justify-content: flex-start;
	}

	/* footer .legal {
		align-self: flex-start;
		gap: 0.8rem;
	} */

	/* footer > .section > .legal-info {
		align-self: flex-start;
	} */

	.divider-landscape {
		width: 10px;
	}
}

@media (max-width: 429px) {
	footer > .section {
		justify-content: center;
	}

	footer .legal {
		/* flex-direction: column-reverse; */
		/* align-items: flex-start; */
		/* align-self: flex-start; */
		/* gap: 2rem; */
		flex-direction: column;
		align-items: center;
		align-self: center;
		gap: 0.5rem;
		/* margin-top: -0.5rem; */
	}

	.divider-landscape {
		display: none;
	}
}


/* Animations */
.hamburger-menu > svg > #top,
.hamburger-menu > svg > #middle,
.hamburger-menu > svg > #bottom {
	animation-duration: 0.4s;
	animation-fill-mode: both;
	animation-timing-function: ease-in-out;
}

.hamburger-menu > svg.close > #top {
	animation-name: x-mark-top;
}

.hamburger-menu > svg.close > #middle {
	animation-name: x-mark-middle;
}

.hamburger-menu > svg.close > #bottom {
	animation-name: x-mark-bottom;
}

.hamburger-menu > svg.open > #top {
	animation-name: x-mark-top-reverse;
}

.hamburger-menu > svg.open > #middle {
	animation-name: x-mark-middle-reverse;
}

.hamburger-menu > svg.open > #bottom {
	animation-name: x-mark-bottom-reverse;
}

/* Animations */
@keyframes x-mark-top {
	to {
		transform: translateX(15px) rotate(45deg);
		transform-origin: top left;
	}
}

@keyframes x-mark-top-reverse {
	from {
		transform: translateX(15px) rotate(45deg);
		transform-origin: top left;
	}
	to {
		transform: none;
	}
}

@keyframes x-mark-middle {
	to {
		opacity: 0;
		transform: translateX(40px);
	}
}

@keyframes x-mark-middle-reverse {
	from {
		opacity: 0;
		transform: translateX(40px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes x-mark-bottom {
	to {
		transform: translateX(-19px) translateY(17px) rotate(-45deg);
		transform-origin: top left;
	}
}

@keyframes x-mark-bottom-reverse {
	from {
		transform: translateX(-19px) translateY(17px) rotate(-45deg);
		transform-origin: top left;
	}
	to {
		transform: none;
	}
}