*, *::before, *::after {
	box-sizing: border-box;
	margin:0;
	padding:0;
	scroll-behavior: smooth;
	/* border: 1px solid var(--base-800); */
}

:root {
	--base: #555;
	--base-100: #f1f1f1;
	--base-400: #555;
	--base-800: #000;
	--yellow: #ffda4b;
	--yellow-100: rgb(255, 244, 121);
	--yellow-400: #ffdb4b;
	--yellow-800: #8b6f00;
	--blue: #0a61ae;
	--blue-100: #e2f8ff;
	--blue-400: #61dafb;
	--blue-800: #0a61ae;
	font-size: 18px;
}

body {
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-size: 1rem;
	max-width:1440px;
	margin:auto;

	a {
		text-decoration: none;
		color: var(--blue);
		&:hover {
			text-decoration: underline;
		}
	}

	h1 {
		font-size:3.2rem;
		line-height:1;
		margin-bottom:10px;
	}

	h1 small {
		display:block;
		font-weight:100;
	}

	h2 {
		font-size: 64px;
		line-height: 1;
		margin-bottom: 10px;
		text-align: center;
		color: var(--base-800);
		padding: 30px;
		padding-top: 10px;
		small {
			display: block;
			font-weight: 100;
			font-size: 0.5em;
			color: var(--base)
		}
		@media (max-width:1024px) {
			font-size: 48px;
		}
	}
	
	h3 {
		font-size: 2rem;
		font-weight: 600px;
		line-height: 1;
		margin-bottom: 20px;
		color: var(--base-800);
		@media (max-width:768px) {
			font-size: 1.5rem;
		}
	}

	section {
		max-width:1440px;
		margin:auto;
		gap:30px;
		margin-top:20px;
		margin-bottom:30px;
		@media (max-width:1440px){
			padding-left:30px;
			padding-right:30px;
		}
		@media (max-width:768px){
			padding-left: 15px;
			padding-right: 15px;
			margin-top: 10px;
			margin-bottom:20px;
		}
	}
}


header {
	padding: 10px;
	display: flex;
	justify-content:space-between;
	max-width:1440px;
	margin:auto;
	border-bottom: 1px solid rgba(0,0,0,0.4);
	@media (max-width:1024px) {
		flex-direction:column;
		justify-content: space-evenly;
	}
	@media (max-width:768px) {
		flex-direction: column;
		padding: 0px;
	}
}

header .logo-all {
	align-items:center;
	display: flex;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	font-weight:700;
	justify-content: space-between;
	@media (max-width:1024px) {
		justify-content: center;
	}

	@media (max-width:768px) {
		padding: 10px 10px 0 10px;
		justify-content: space-between;
	}

	.logo-holder {
		display:flex;
		padding:10px;
		align-items:center;
		font-weight:700;
		color: var(--base-800);
	}
	.logo-holder .logo {
		display:flex;
		align-items:center;
		justify-content:center;
		font-size: 1.2rem;
		background-color: var(--base-800);
		color: var(--base-100);
		height:50px;
		width:50px;
		margin-right:20px;
		border-radius:50%;
	}
	.logo-holder .logo-text {
		flex:1;
	}
	.mobile-toggle {
		color: var(--base-800);
		width: 32px;
		display: none;
		padding: 10px;
		@media (max-width:768px) {
			display: inline-block;
			width: 3rem;
			margin-left: 30px;
		}
	}
}

header nav {
	display:flex;
	align-items:center;
	@media (max-width:1024px) {
		justify-content: center;
	}

	@media (max-width:768px) {
		margin-top: 10px;
		width: 100%;
	}

	ul {
		display:flex;
		list-style-type: none;
		gap:5px;
		@media (max-width:768px) {
			display: none;
			flex-direction: column;
			text-align: center;
			width: 100%;
			&.active {
				display: flex;
			}
		}
	}
	ul li {
		display:inline-block;
		a {
			display:inline-block;
			padding:10px 20px;
			color:var(--base);
			@media (max-width:768px) {
				width: 100%;
				&.button {
					margin-top: 5px;
				}
			}
		}
		a:hover {
			background-color: var(--base-100);
			border-radius:10px;
			text-decoration:none;
		}
	}
}

.button {
	display:inline-flex;
	align-items: center;
	justify-content: center;
	padding:8px 24px;
	background-color: var(--blue);
	color: var(--base-100);
	border-radius:10px;
	transition: ease 0.3s all;
	&:hover {
		text-decoration:none;
		background-color: var(--base-400);
	}
	@media (max-width:768px) {
		height: 2em;
		width: auto;
		padding:10px 20px;
		&.black, &.white {
			height: 3em;
			width: auto;
			padding:10px 20px;
		}

	}

	&.black {
		font-size: 0.7rem;
		padding:8px 24px;
		border: 1px solid var(--base-800);
		background-color: black;
		color: white;
		&:hover {
			background-color: var(--base);
			color: var(--base-100);
			border: 1px solid var(--base-100);
		}
	}

	&.white {
		font-size: 0.7rem;
		padding:8px 24px;
		border: 1px solid var(--base-800);
		background-color: transparent;
		color: var(--base-800);
		&:hover {
			background-color: var(--base);
			color: var(--base-100);
			border: 1px solid var(--base-100);
		}
	}

	&.white img {
		width: 0.7rem;
		height: auto;
		margin-right: 10px;
		object-fit: contain;
	}
}

main .search-bar {
	justify-content: space-between;
	.container-input {
		display: flex;
		align-items: center;
	}
	.container-input .input {
		align-items: center;
		font-size: 13px;
		width: 350px;
		height: 35px;
		padding: 10px 0px 10px 40px;
		border-radius: 8px;
		border: solid 1px #333;
		transition: all .1s ease-in-out;
		outline: none;
		opacity: 0.8;

		@media (max-width: 750px) {
			width: 300px;
		}

		&:focus {
			opacity: 1;
			width: 370px;
			border-width: 2px;
			@media (max-width: 750px) {
				width: 320px;
			}
		}
	}
	.container-input svg {
		position: relative;
		left: 33px;
		margin-left: 7px;
	}
	.container-tab .tabs {
		display: flex;
		justify-content: space-between;
		position: relative;
		background-color: #fff;
		box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.15);
		padding: 0.35rem;
		border-radius: 8px;
		font-size: 13px;

		* {
			z-index: 2;
		}

		.tab {
			padding-left: 5px;
			padding-right: 15px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: black;
			border-radius: 8px;
			cursor: pointer;
			transition: color 0.15s ease-in;
		}

		input[type="radio"] {
			display: none;
			&:checked + label {
				color: #185ee0;
				background-color: #e6eef9;
				border-radius: 99px;
				padding: 5px 15px;
			}
		}

		@media (max-width: 750px) {
			margin-left: 27px;
			margin-top: 15px;
			font-size: 10px;
			.tabs {
				transform: scale(0.6);
			}
		}
	}
}
	

main .highlight {
	@media (max-width:784px) {
		flex-direction: column;
	}
}

main .highlight .card {
	transition: 0.5s ease-out;
	background: #e0e0e0;
	box-shadow: 15px 15px 30px #bebebe,
				-15px -15px 30px #ffffff;
	&:hover {
		box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
		transform: scale(1.05);

		.card-button {
			transform: translate(-50%, 75%);
			 opacity: 1;
		}
	}
	.card-button {
		transform: translate(-50%, 125%);
		width: 60%;
		border-radius: 1rem;
		border: none;
		background-color: #008df8;
		color: var(--base-100);
		font-size: 0.8rem;
		padding: .5rem 0.25rem;
		position: absolute;
		left: 50%;
		bottom: 0;
		opacity: 0;
		transition: 0.3s ease-out;
	}
	@media (max-width:784px) {
		margin-bottom: 35px;
	}
}

main .highlight .card .card-body {
	@media (max-width:1024px) {
		padding: 10px;
	}
	.card-title {
		font-size: 1.2rem;
		@media (max-width:1024px) {
			font-size: 0.7rem;
		}
	}
	.tag {
		font-size:  0.8rem;
		font-weight: 300;
		@media (max-width:1024px) {
			font-size: 0.5rem;
		}

		p {
			margin: 0;
		}
		svg {
			width: 1.2rem;
			height: 1.2rem;
			margin: 0;
			fill: var(--base);
			@media (max-width:1024px) {
				width: 0.8rem;
				height: 0.8rem;
			}
		}
	}
	.card-text {
		font-size:  0.8rem;
		font-weight: 300;
		@media (max-width:1024px) {
			font-size: 0.5rem;
		}
	}
}