@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
	--btn-color: #fdfdfd;
	/* button color*/
	--btn-bg   : #0d0d0d;
	/* button bg color*/

	--primary-text-color  : #333;
	--link-hover          : #edae4a;
	--footer-link-hover   : #edae4a;
	--input-focus-bd-color: #0d0d0d;
}

html {
	scroll-behavior: smooth;
	font-family    : 'Roboto', sans-serif;
}

header {
	/* background-color: #fff;
    color: #000; */
}

header>.collapsible-header {
	display         : flex;
	gap             : 1rem;
	width           : 100%;
	background-color: inherit;
	place-content   : center;
	overflow        : hidden;
	transition      : width 0.3s ease;
}

.animated-collapse {
	transition: width 0.3s ease;
}

.header-links {
	display      : flex;
	align-items  : center;
	min-width    : fit-content;
	border-radius: 10px;
	padding      : 5px 10px;
	transition   :
		background-color 0.5s,
		color 0.5s;
}

.header-links:hover {
	color: var(--link-hover);
}

.material-icons.md-40 {
	font-size: 40px;
}

.primary-text-color {
	color: var(--primary-text-color);
}

.btn {
	padding         : 10px 15px;
	width           : max-content;
	border-radius   : 25px;
	color           : var(--btn-color);
	background-color: var(--btn-bg);
	justify-content : center;
	align-items     : center;
	display         : flex;
	cursor          : pointer;
}

.btn:hover {}

.btn:disabled {
	cursor: default;
}

.input {
	padding         : 10px;
	background-color: transparent;
	border-radius   : 25px;
	/* outline      : none; */
	min-width       : 100px;
	border          : 2px solid #818080;
	transition      : border 0.3s;
}

.input:active,
.input:focus,
.input:focus-within {
	border: 2px solid var(--input-focus-bd-color);
}

.input-error {
	border-bottom: 3px solid #ff1e1e;
}

.input-error:focus-within {
	border-bottom: 3px solid #fd0101;
}

/* Navigation dots styling */
.dots-container {
	text-align: center;
	margin-top: 20px;
}

.footer-link {
	color     : #fff;
	transition: color 0.3s;
}

.footer-link:hover {
	color: var(--footer-link-hover);
}

.review-container {
	position : relative;
	max-width: 600px;
	margin   : auto;
}

.review-card {
	box-shadow   : 0px 2px 4px #757474a0;
	border-radius: 15px;
	/* width     : 200px; */
	/* height    : 550px; */
	padding      : 10px;
}

/* --------- collapsible div ---------- */
.collapsible {
	background-color: #f3f0f0;
	color           : #2b2929;
	/* cursor       : pointer; */
	padding         : 5px;
	width           : 100%;
	border          : none;
	text-align      : left;
	outline         : none;
	font-size       : 16px;
	transition      : 0.4s;
}

/* Style for the collapsible content */
.content {
	padding         : 0 18px;
	/* display      : none; */
	height          : 0px;
	overflow        : hidden;
	background-color: transparent;
	transition      : height 0.5s;
	text-align      : justify;
	margin-top      : 10px;
}

.collapsible .active,
.collapsible:hover {
	/* background-color: #dedddd; */
}

@media not all and (min-width: 1024px) {
	header .collapsible-header {
		position        : fixed;
		right           : 0px;
		flex-direction  : column;
		opacity         : 0;
		height          : 100vh;
		min-height      : 100vh;
		height          : 100dvh;
		width           : 0vw;
		justify-content : space-between;
		padding         : 5px;
		padding-top     : 5%;
		padding-bottom  : 5%;
		place-items     : end;
		background-color: #ffffff;
		color           : #000000;
		overflow-y      : auto;
		box-shadow      : 2px 0px 3px #000;
	}

	.header-links {
		color: black;
	}
}

#section2 {
	/* padding-bottom: 5400px */
}

@property --a {
	/* must register --a to animate it */
	syntax       : '<angle>';
	initial-value: 0deg;
	/* used only on pseudo, nowhere to be inherited, 
	 * better perf if set false, see 
	 * https     ://www.bram.us/2024/10/03/benchmarking-the-performance-of-css-property/ */
	inherits     : false
}

.glow-button {
	/* hide outer part of glow */
	overflow: hidden;
	/* needed for absolutely positioned pseudo */
	position: relative;
	/* adjust width as needed IF it's even necessary to set */
	/* adjust aspect-ratio OR height IF height not given by content */

	/* round outer card corners */
	border-radius: .5em;

	/* text & layout styles below just for prettifying */

	place-content: center;
	padding      : 0.75em .5em;
	margin-top   : 1.5em;
	color        : #ededed;
	text-align   : center;
	text-wrap    : balance;
	box-shadow   : 0 0 9px rgba(0, 0, 0, 0.3)
}

.glow-button .glow-button-l {
	content: '';

	position: absolute;
	z-index : -1;
	inset   : -1em;
	border  : solid 1.05em;
	border-image:
		conic-gradient(from var(--a), #fda913, #0393e3, #0393e3, #f13274, #f13274, #f44c5e, #f13274) 1;
	filter   : blur(.2em);
	animation: a 6s linear infinite;
}

.glow-button .glow-button-l0 {
	background: linear-gradient(170deg, #007ecb, #8f0332);
}

.glow-button .glow-button-l3 {
	animation-delay: 3s;
}

.glow-button .glow-button-l4 {
	animation-delay: 3s;
}

.glow-button:hover::after {
	background: #0f2bb8;
}

/* animate --a from its initial-value 0deg to 1turn */
@keyframes a {
	to {
		--a: 1turn
	}
}