@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bungee+Tint&family=Zen+Dots&display=swap');

.zen-dots-regular {
	font-family : "Zen Dots", sans-serif;
	font-weight : 400;
	font-style  : normal;
}

.bungee-tint-regular {
	font-family : "Bungee Tint", sans-serif;
	font-weight : 400;
	font-style  : normal;
}

* {
	margin                  : 0;
	padding                 : 0;
	box-sizing              : border-box;
	font-family             : "Noto Sans", sans-serif;
	font-optical-sizing     : auto;
	font-weight             : 600;
	font-style              : normal;
	font-variation-settings : normal;
}

:root {
	--primary          : #ed0202;
	--primary-light    : #ff1616;
	--secondary        : #c60303;
	--dark             : #0a0a0a;
	--dark-transparent : rgba(10, 10, 10, 0.85);
	--darker           : #111;
	--light            : #8e8e8e;
	r                  : #7e7e7e;
	--transition       : all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body {
	font-family             : "Noto Sans", sans-serif;
	font-optical-sizing     : auto;
	font-weight             : 500;
	font-style              : normal;
	font-variation-settings : normal;
	background              : linear-gradient(90deg, #330000 50%, #090101 100%, #870000 100%);
	color                   : var(--light);
	line-height             : 1.6;
	min-height              : 55vh;
	position                : relative;
	overflow-x              : hidden;
}

body::before {
	content    : '';
	position   : absolute;
	top        : 0;
	left       : 0;
	width      : 100%;
	height     : 100%;
	background : radial-gradient(circle at 20% 80%, rgb(18, 0, 0) 0%, transparent 50%),
	radial-gradient(circle at 80% 20%, rgba(14, 20, 23, 0.1) 0%, transparent 50%),
	radial-gradient(circle at 40% 40%, rgba(143, 0, 0, 0.65) 0%, transparent 30%);
	z-index    : -1;
}

.container {
	margin  : 0 auto;
	padding : 0 20px;
}

/* Header Styles */
header {
	background-color : var(--dark-transparent);
	backdrop-filter  : blur(10px);
	border-bottom    : 1px solid rgba(255, 255, 255, 0.1);
	position         : sticky;
	top              : 0;
	z-index          : 100;
	box-shadow       : 0 14px 20px rgba(0, 0, 0, 0.3);
}

.header-top {
	display         : flex;
	justify-content : space-between;
	align-items     : center;
	padding         : 4px 0;
}

.logo {
	display         : flex;
	align-items     : center;
	gap             : 5px;
	font-size       : 5rem;
	font-weight     : bold;
	color           : var(--primary);
	text-decoration : none;
	transition      : var(--transition);
}

.logo:hover {
	transform   : translateY(-2px);
	text-shadow : 0 0 15px rgb(253, 22, 22);
}

.logo i {
	font-size : 28px;
}

.logo span {
	color : var(--secondary);
}

.search-bar {
	display     : flex;
	align-items : center;
	position    : relative;
}

.search-bar input {
	background      : rgba(0, 0, 0, 0.7);
	border          : 1px solid rgba(255, 255, 255, 0.1);
	padding         : 10px 15px;
	color           : var(--light);
	border-radius   : 30px;
	width           : 220px;
	transition      : var(--transition);
	backdrop-filter : blur(5px);
}

.search-bar input:focus {
	outline    : none;
	width      : 250px;
	box-shadow : 0 0 0 2px var(--primary-light);
}

.search-bar button {
	background : transparent;
	border     : none;
	color      : var(--light);
	position   : absolute;
	right      : 15px;
	cursor     : pointer;
	transition : var(--transition);
}

.search-bar button:hover {
	color : var(--primary);
}

/* Main Navigation */
.main-nav {
	background-color : rgba(26, 26, 26, 0.8);
	backdrop-filter  : blur(10px);
	border-top       : 1px solid rgba(255, 255, 255, 0.05);
}

.nav-container {
	display         : flex;
	justify-content : space-between;
	align-items     : center;
}

.nav-menu {
	display    : flex;
	list-style : none;
}

.nav-menu li {
	position : relative;
}

.nav-menu a {
	display         : block;
	padding         : 15px 20px;
	color           : var(--light);
	text-decoration : none;
	font-weight     : 500;
	transition      : var(--transition);
	position        : relative;
}

.nav-menu a::after {
	content    : '';
	position   : absolute;
	bottom     : 0;
	left       : 50%;
	width      : 0;
	height     : 2px;
	
	transition : var(--transition);
	transform  : translateX(-50%);
}

.nav-menu a:hover {

}

.nav-menu a:hover::after {
	width : 80%;
}

.nav-menu .active a {
	color : var(--primary);
}

.nav-menu .active a::after {
	width : 80%;
}

/* Dropdown Menu */
.dropdown {
	position : relative;
}

.dropdown-content {
	display          : none;
	position         : absolute;
	background-color : black;
	min-width        : 200px;
	z-index          : 1;
	border-radius    : 0 0 8px 8px;
	overflow         : hidden;
	border-top       : 2px solid var(--primary);
	transform        : translateY(10px);
	opacity          : 1;
	transition       : var(--transition);
}

.dropdown-content a {
	padding       : 12px 16px;
	
	border-bottom : 1px solid rgba(255, 255, 255, 0.8);
	display       : flex;
	align-items   : center;
	gap           : 10px;
}

.dropdown-content a i {
	width      : 20px;
	text-align : center;
}

.dropdown-content a:hover {
	color            : whitesmoke;
	background-color : rgba(255, 22, 22, 0.88);
	padding-left     : 20px;
}

.dropdown:hover .dropdown-content {
	display   : block;
	transform : translateY(0);
	opacity   : 1;
}

/* Mobile Menu Toggle */
.mobile-toggle {
	display    : none;
	background : none;
	border     : none;
	color      : var(--light);
	font-size  : 24px;
	cursor     : pointer;
	transition : var(--transition);
}

.mobile-toggle:hover {
	color : var(--primary);
}

/* Content Section */
.content {
	padding    : 20px 0;
	text-align : center;
}

.content h1 {
	font-size               : 48px;
	margin-bottom           : 20px;
	background              : linear-gradient(190deg, var(--primary), var(--secondary));
	-webkit-background-clip : text;
	background-clip         : text;
	color                   : transparent;
	text-shadow             : 0 5px 15px rgba(0, 0, 0, 0.2);
}

.content p {
	margin-bottom : 30px;
	font-size     : 18px;
	margin-left   : auto;
	margin-right  : auto;
	color         : var(--gray);
}

.cta-button {
	display         : inline-block;
	padding         : 12px 30px;
	background      : linear-gradient(90deg, var(--primary), var(--secondary));
	color           : white;
	text-decoration : none;
	border-radius   : 30px;
	font-weight     : 600;
	transition      : var(--transition);
	box-shadow      : 0 4px 15px rgba(151, 26, 26, 0.22);
	margin-top      : 20px;
}

.cta-button:hover {
	transform  : translateY(-3px);
	box-shadow : 0 6px 20px rgba(253, 22, 22, 0.2);
}

/* Footer */
footer {
	background-color : rgba(17, 17, 17, 0.8);
	backdrop-filter  : blur(10px);
	padding          : 40px 0;
	border-top       : 1px solid rgba(255, 255, 255, 0.28);
	margin-top       : 60px;
}

.footer-content {
	display        : flex;
	flex-direction : column;
	align-items    : center;
}

.social-links {
	display       : flex;
	gap           : 20px;
	margin-bottom : 30px;
}

.social-links a {
	display         : flex;
	align-items     : center;
	justify-content : center;
	width           : 40px;
	height          : 40px;
	background      : rgba(106, 106, 106, 0.07);
	border-radius   : 50%;
	color           : var(--light);
	text-decoration : none;
	transition      : var(--transition);
}

.social-links a:hover {
	background : var(--primary);
	transform  : translateY(-3px);
}

.footer-links {
	display         : flex;
	justify-content : center;
	list-style      : none;
	margin-bottom   : 20px;
	flex-wrap       : wrap;
}

.footer-links li {
	margin : 0 15px;
}

.footer-links a {
	color           : var(--gray);
	text-decoration : none;
	transition      : var(--transition);
}

.footer-links a:hover {
	color : var(--primary);
}

.copyright {
	color      : var(--gray);
	font-size  : 14px;
	text-align : center;
}

/* Responsive Styles */
@media (max-width : 768px) {
	.nav-menu {
		display          : none;
		flex-direction   : column;
		position         : absolute;
		top              : 100%;
		left             : 0;
		width            : 100%;
		background-color : rgba(26, 26, 26, 0.95);
		backdrop-filter  : blur(10px);
		box-shadow       : 0 8px 16px rgba(0, 0, 0, 0.3);
		border-top       : 1px solid rgba(255, 255, 255, 0.1);
	}
	
	.nav-menu.active {
		display : flex;
	}
	
	.mobile-toggle {
		display : block;
	}
	
	.dropdown-content {
		position   : static;
		box-shadow : none;
		border-top : none;
		transform  : none;
		opacity    : 1;
		display    : none;
	}
	
	.dropdown.active .dropdown-content {
		display : block;
	}
	
	.search-bar input {
		width : 180px;
	}
	
	.search-bar input:focus {
		width : 200px;
	}
	
	.content h1 {
		font-size : 36px;
	}
}

/* Animation for page load */
@keyframes fadeInUp {
	from {
		opacity   : 0;
		transform : translateY(20px);
	}
	to {
		opacity   : 1;
		transform : translateY(0);
	}
}

.content > * {
	animation : fadeInUp 0.6s ease-out forwards;
}

.content h1 {
	animation-delay : 0.1s;
}

.content p {
	animation-delay : 0.2s;
}

.cta-button {
	animation-delay : 0.3s;
}


.noto-sans-tmp {
	font-family             : "Noto Sans", sans-serif;
	font-optical-sizing     : auto;
	font-weight             : 500;
	font-style              : normal;
	font-variation-settings : normal;
}

.dco-title-1 {
	font-family         : "Bungee Tint", sans-serif;
	font-weight         : 400;
	font-style          : normal;
	font-optical-sizing : auto;
	font-size           : 3rem;
	color               : #bdacac;
	text-shadow         : #f68888 3px 2px 3px;
}

.dco-title-2 {
	font-family             : "Noto Sans", sans-serif;
	font-optical-sizing     : auto;
	font-weight             : 600;
	font-style              : normal;
	font-variation-settings : normal;
	font-size               : 3rem;
	color                   : #ff3f3f;
}


.dco-txt-h1 {
	font-family : "Noto Sans", sans-serif;
	color       : red;
	font-size   : 2rem;
	font-weight : 600;
}

.dco-txt-h1-1 {
	font-family    : "Noto Sans", sans-serif;
	color          : #ffffff;
	text-shadow    : #f10404 2px 0 10px;
	font-size      : 2rem;
	font-weight    : 600;
	letter-spacing : -1px;
}

.dco-txt-h1r {
	font-family : "Noto Sans", sans-serif;
	color       : red;
	font-size   : 1.5rem;
	font-weight : 600;
}

.dco-txt-h2 {
	font-family    : "Noto Sans", sans-serif;
	color          : #ffc3c3;
	text-shadow    : #ff1616 5px 0 5px;
	font-size      : 2.5rem;
	letter-spacing : -1px;
	font-weight    : 500;
}

.dco-txt-h3 {
	font-family    : "Noto Sans", sans-serif;
	color          : rgb(253, 22, 22);
	text-shadow    : #f3686b 1px 1px 1px;
	font-size      : 1.6rem;
	font-weight    : 500;
	letter-spacing : -1px;
}

.dco-txt-h4 {
	font-family    : "Noto Sans", sans-serif;
	color          : rgb(255, 68, 68);
	text-shadow    : #f3686b 1px 1px 1px;
	font-size      : 1.8rem;
	font-weight    : 600;
	letter-spacing : -1px;
}

.cdo-txt-p1 {
	/* color       : #9f9f9f; */
	font-family : "Noto Sans", sans-serif;
	font-size   : 1.1rem;
	line-height : 1.5rem;
	font-weight : 500;
}

.cdo-txt-na {
	/* color       : #9f9f9f; */
	font-family : "Zen Dots", sans-serif;
	color       : rgb(255, 68, 68);
	font-size   : 1.3rem;
	line-height : 1.3rem;
	font-weight : 500;
}

.cdo-txt-p2 {
	font-family             : "Noto Sans", sans-serif;
	font-style              : normal;
	font-variation-settings : normal;
	font-size               : 0.95rem;
	font-weight             : 500;
	line-height             : 1.2rem;
}

.cdo-acc-1 {
	cursor              : pointer;
	background-color    : darkred;
	color               : #ffffff;
	font-family         : "Noto Sans", sans-serif;
	font-optical-sizing : auto;
	font-weight         : 700;
	font-size           : 1.2rem;
	padding             : 2px 8px;
	border              : 1px solid silver;
	transition          : 300ms ease-in-out;
}

.cdo-acc-1:hover {
	cursor              : pointer;
	background-color    : #530000;
	color               : #d8d8d8;
	text-shadow         : #959595 2px 0 2px;
	font-optical-sizing : auto;
	font-weight         : 800;
	font-size           : 1.4rem;
	padding             : 2px 8px;
	padding-left        : 1rem;
	border              : 1px solid silver;
	transition          : 300ms ease-in-out;
}

.cdo-acc-2 {
	cursor              : pointer;
	color               : #ff3e3e;
	font-family         : "Noto Sans", sans-serif;
	font-optical-sizing : auto;
	font-weight         : 500;
	font-size           : 1.4rem;
	transition          : 300ms ease-in-out;
}

.cdo-acc-2:hover {
	cursor              : pointer;
	background-color    : transparent;
	color               : #ff1212;
	text-shadow         : #ff4b4b 1px 0 1px;
	font-optical-sizing : auto;
	font-weight         : 600;
	font-size           : 1.4rem;
	transition          : 300ms ease-in-out;
}

.cdo-acc-2g {
	cursor              : pointer;
	color               : #ecd355;
	font-family         : "Noto Sans", sans-serif;
	font-optical-sizing : auto;
	font-weight         : 600;
	font-size           : 1.4rem;
	transition          : 300ms ease-in-out;
}

.cdo-acc-2g:hover {
	cursor              : pointer;
	background-color    : transparent;
	color               : #ecd355;
	text-shadow         : #f5d882 1px 0 1px;
	font-optical-sizing : auto;
	font-weight         : 800;
	font-size           : 1.4rem;
	transition          : 300ms ease-in-out;
}

.cdo-acc-3g {
	cursor              : pointer;
	color               : #00c800;
	font-family         : "Noto Sans", sans-serif;
	font-optical-sizing : auto;
	font-weight         : 600;
	font-size           : 1.4rem;
	transition          : 300ms ease-in-out;
}

.cdo-acc-3g:hover {
	cursor              : pointer;
	background-color    : transparent;
	color               : #03fa03;
	text-shadow         : #afed7b 1px 0 1px;
	font-optical-sizing : auto;
	font-weight         : 700;
	font-size           : 1.4rem;
	transition          : 300ms ease-in-out;
}

.cdo-acc-2lg {
	cursor              : pointer;
	color               : #8cb800;
	font-family         : "Noto Sans", sans-serif;
	font-optical-sizing : auto;
	font-weight         : 600;
	font-size           : 1.4rem;
	transition          : 300ms ease-in-out;
}

.cdo-acc-2lg:hover {
	cursor              : pointer;
	background-color    : transparent;
	color               : #b0eb00;
	text-shadow         : #698c00 1px 0 1px;
	font-optical-sizing : auto;
	font-weight         : 800;
	font-size           : 1.4rem;
	transition          : 300ms ease-in-out;
}

.dco-h1 {
	font-family    : "Noto Sans", sans-serif;
	color          : rgb(175, 0, 0);
	text-shadow    : #b10005 2px 2px 3px;
	font-size      : 2.5rem;
	font-weight    : 500;
	letter-spacing : -1px;
}

.dco-h1p3 {
	font-family    : "Noto Sans", sans-serif;
	color          : rgb(120, 93, 0);
	text-shadow    : #756c00 2px 2px 1px;
	font-size      : 2.5rem;
	font-weight    : 500;
	letter-spacing : -1px;
}

.dco-h1p4 {
	font-family    : "Noto Sans", sans-serif;
	color          : rgb(73, 101, 0);
	text-shadow    : #4b6500 2px 2px 1px;
	font-size      : 2.5rem;
	font-weight    : 500;
	letter-spacing : -1px;
}

.dco-h1p5 {
	font-family    : "Noto Sans", sans-serif;
	color          : rgb(0, 110, 0);
	text-shadow    : #00c100 2px 2px 3px;
	font-size      : 2.5rem;
	font-weight    : 500;
	letter-spacing : -1px;
}


.cdo-t1 {
	font-family : "Noto Sans", sans-serif;
	color       : #b3b3b3;
	font-size   : 1.1rem;
	line-height : 1.4rem;
	font-weight : 500;
}

.cdo-lnk-1 {
	cursor              : pointer;
	color               : #fdb3ae;
	font-family         : "Noto Sans", sans-serif;
	font-optical-sizing : auto;
	font-weight         : 500;
	font-size           : 1.2rem;
	transition          : 300ms ease-in-out;
	text-decoration     : none;
}

.cdo-lnk-1:hover {
	cursor              : pointer;
	color               : #ff1616;
	font-family         : "Noto Sans", sans-serif;
	font-optical-sizing : auto;
	font-weight         : 500;
	font-size           : 1.2rem;
	transition          : 300ms ease-in-out;
	text-decoration     : none;
	border-left         : 1px solid red;
}

.cdo-lnk-1lg {
	cursor              : pointer;
	color               : #e0f3a0;
	font-family         : "Noto Sans", sans-serif;
	font-optical-sizing : auto;
	font-weight         : 500;
	font-size           : 1.1rem;
	transition          : 500ms ease-in-out;
	text-decoration     : none;
}

.cdo-lnk-1lg:hover {
	cursor              : pointer;
	color               : #def19f;
	font-family         : "Noto Sans", sans-serif;
	font-optical-sizing : auto;
	font-weight         : 600;
	margin-left         : 5px;
	font-size           : 1.1rem;
	letter-spacing      : 1px;
	transition          : 500ms ease-in-out;
	text-decoration     : none;
}

.cdo-lnk-1g {
	cursor              : pointer;
	color               : #7fba7f;
	font-family         : "Noto Sans", sans-serif;
	font-optical-sizing : auto;
	font-weight         : 500;
	font-size           : 1.1rem;
	transition          : 500ms ease-in-out;
	text-decoration     : none;
}

.cdo-lnk-1g:hover {
	cursor              : pointer;
	color               : #cbe3c4;
	font-family         : "Noto Sans", sans-serif;
	font-optical-sizing : auto;
	font-weight         : 600;
	margin-left         : 5px;
	font-size           : 1.1rem;
	letter-spacing      : 1px;
	transition          : 500ms ease-in-out;
	text-decoration     : none;
}

.cdo-lnk-1gg:hover {
	cursor              : pointer;
	color               : #def19f;
	font-family         : "Noto Sans", sans-serif;
	font-optical-sizing : auto;
	font-weight         : 600;
	margin-left         : 5px;
	font-size           : 1.1rem;
	letter-spacing      : 1px;
	transition          : 500ms ease-in-out;
	text-decoration     : none;
}

.cdo-btn-1 {
	cursor              : pointer;
	background-color    : darkred;
	color               : white;
	font-family         : "Noto Sans", sans-serif;
	font-optical-sizing : auto;
	font-weight         : 800;
	
	font-size           : 1.3rem;
	padding             : 2px 15px;
	border              : 2px solid silver;
	border-radius       : 15px;
	transition          : 500ms ease-in-out;
}

.cdo-btn-1:hover {
	cursor                  : pointer;
	background-color        : #ff1616;
	color                   : white;
	font-family             : "Noto Sans", sans-serif;
	font-optical-sizing     : auto;
	font-weight             : 800;
	font-style              : normal;
	font-variation-settings : normal;
	font-size               : 1.3rem;
	padding                 : 2px 15px;
	border                  : 2px solid silver;
	border-radius           : 5px;
}


.cdo-btn-1r {
	cursor              : pointer;
	background-color    : #630000;
	color               : #ff9595;
	font-family         : "Noto Sans", sans-serif;
	font-optical-sizing : auto;
	font-weight         : 800;
	text-decoration     : none;
	font-size           : 1.1rem;
	padding             : 2px 15px;
	border              : 2px solid #b80202;
	border-radius       : 4px;
	transition          : 500ms ease-in-out;
}

.cdo-btn-1r:hover {
	cursor                  : pointer;
	background-color        : #290000;
	color                   : #ff0000;
	font-family             : "Noto Sans", sans-serif;
	font-optical-sizing     : auto;
	font-weight             : 800;
	font-style              : normal;
	font-variation-settings : normal;
	font-size               : 1.1rem;
	padding                 : 2px 15px;
	border                  : 2px solid #d85151;
	border-radius           : 4px;
}


.cdo-doc-block {
	background-color : black;
	border           : 2px solid whitesmoke;
	text-align       : left;
	width            : 96%;
	border-color     : whitesmoke;
	border-radius    : 5px;
}

.cdo-link-1 {
	font-family             : "Noto Sans", sans-serif;
	font-size               : 1.1rem;
	font-optical-sizing     : auto;
	font-weight             : 400;
	font-style              : normal;
	font-variation-settings : normal;
	color                   : #f4a2a2;
	text-decoration         : none;
	transition              : 500ms ease-in-out;
}

.cdo-link-1:focus {
	font-family             : "Noto Sans", sans-serif;
	font-optical-sizing     : auto;
	font-weight             : 500;
	font-style              : normal;
	font-variation-settings : normal;
	color                   : #ff1a1a;
	margin-left             : 1rem;
	text-decoration         : none;
	transition              : 500ms ease-in-out;
}

ul {
	font-family : "Noto Sans", sans-serif;
	font-size   : 0.95rem;
	line-height : 1.3rem;
	font-weight : 500;
}

li {
	font-family : "Noto Sans", sans-serif;
	color       : #bc2828;
	font-size   : 0.90rem;
	line-height : 1.3rem;
	font-weight : 500;
}

.dco-input-1 {
	font-family             : "Noto Sans", sans-serif;
	font-optical-sizing     : auto;
	font-weight             : 600;
	font-style              : normal;
	font-variation-settings : normal;
	font-size               : 1.3rem;
	color                   : red;
	border                  : 2px solid darkred;
}

.dco-input-1:focus {
	font-family             : "Noto Sans", sans-serif;
	font-optical-sizing     : auto;
	font-weight             : 600;
	font-style              : normal;
	font-variation-settings : normal;
	font-size               : 1.3rem;
	color                   : red;
	background-color        : rgb(64, 0, 0);
}

.dh-txt-1 {
	font-family : "Noto Sans", sans-serif;
	font-size   : 1.5rem;
	font-weight : 600;
}

.dh-txt-h1 {
	font-family : "Noto Sans", sans-serif;
	font-size   : 1.5rem;
	font-weight : 600;
}

.dh-head-1 {
	font-family : "Noto Sans", sans-serif;
	color       : #ff1616;
	font-size   : 1.8rem;
	font-weight : 600;
}

.dh-txt-p1 {
	font-family : "Noto Sans", sans-serif;
	font-size   : 1rem;
	font-weight : 500;
}


.dh-txt-ftr1 {
	font-family : "Noto Sans", sans-serif;
	font-size   : 0.9rem;
	font-weight : 500;
}


.vertical-nav {
	font-family : "Noto Sans", sans-serif;
	color       : #cd6666;
	font-size   : 1.2rem;
	width       : 100%;
	padding     : 0;
	margin      : 0;
	list-style  : none;
	color       : #445544;
}

.vertical-nav li {
	font-family : "Noto Sans", sans-serif;
	color       : #7e7e7e;
	font-weight : 500;
	font-size   : 1rem;
	margin      : 1.5rem 0;
}

.vertical-nav a {
	font-family     : "Noto Sans", sans-serif;
	color           : #ff1616;
	font-weight     : 500;
	font-size       : 1.3rem;
	text-decoration : none;
}

.vertical-nav a:hover {
	font-family : "Noto Sans", sans-serif;
	font-size   : 1.2rem;
	color       : darkgrey; /* black on hover */
}