/*
* Template Name: Comixo - Comic Books & Art Studio HTML5 Template
* Author: EpikTheme
* Author URL: https://themeforest.net/user/epik-theme
* Website: https://epiktheme.com/
* Version: 1.0
*/

/* =============================================================================

[Table of contents]

0.0 Common CSS START 
1.0 HEADER AREA START
2.0 BANNER AREA START
3.0 ABOUT AREA START
4.0 BRAND AREA START
5.0 NEW_COMICS AREA START
6.0 POPULAR AREA START
7.0 TEAM AREA START
8.0 REVIEWS AREA START
9.0 PRICE_PLAN AREA START
10.0 BLOG AREA START
11.0 FOOTER AREA START 
12.0 COPY_RIGHT AREA START 
 
/*===========================
0.0 *** Common CSS START ***
=============================*/
* {
	margin: 0;
	padding: 0;
	outline: 0;
}

body {
	background: #f0ebe5;
}

ul,
ol {
	list-style-type: none;
}

a,
a:focus,
a:hover {
	text-decoration: none;
	outline: 0;
}

img {
	overflow: hidden;
	border: 0;
	vertical-align: middle;
}

.zindex {
	position: relative;
	z-index: 999;
}

.clr {
	clear: both;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
	margin: 0;
	padding: 0;
}

p {
	line-height: 27px;
}

@font-face {
	src: url(../fonts/ClashDisplay-Bold.ttf);
	font-family: cb;
}

@font-face {
	src: url(../fonts/ClashDisplay-Medium.ttf);
	font-family: cm;
}

@font-face {
	src: url(../fonts/ClashDisplay-Regular.ttf);
	font-family: cr;
}

.mobile-v-show {
	display: none;
}

/* preloader */
#preloader {
	background-color: #f0ebe5;
	position: fixed;
	height: 100vh;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 999999;
}

#preloader #loading-center {
	width: 100%;
	height: 100%;
	position: relative;
}

#preloader #loading-center-absolute {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 60px;
	width: 60px;
	margin-top: -30px;
	margin-left: -30px;
	-webkit-animation: loading-center-absolute 1s infinite;
	animation: loading-center-absolute 1s infinite;
}

#preloader .object {
	width: 20px;
	height: 20px;
	background-color: #d71515;
	float: left;
	border-radius: 50% 50% 50% 50%;
	margin-right: 20px;
	margin-bottom: 20px;
}

#preloader .object:nth-child(2n + 0) {
	margin-right: 0px;
}

#preloader #object_one {
	-webkit-animation: object_one 1s infinite;
	animation: object_one 1s infinite;
}

#preloader #object_two {
	-webkit-animation: object_two 1s infinite;
	animation: object_two 1s infinite;
}

#preloader #object_three {
	-webkit-animation: object_three 1s infinite;
	animation: object_three 1s infinite;
}

#preloader #object_four {
	-webkit-animation: object_four 1s infinite;
	animation: object_four 1s infinite;
}

@-webkit-keyframes loading-center-absolute {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes loading-center-absolute {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-webkit-keyframes object_one {
	50% {
		-webkit-transform: translate(20px, 20px);
		transform: translate(20px, 20px);
	}
}

@keyframes object_one {
	50% {
		-webkit-transform: translate(20px, 20px);
		transform: translate(20px, 20px);
	}
}

@-webkit-keyframes object_two {
	50% {
		-webkit-transform: translate(-20px, 20px);
		transform: translate(-20px, 20px);
	}
}

@keyframes object_two {
	50% {
		-webkit-transform: translate(-20px, 20px);
		transform: translate(-20px, 20px);
	}
}

@-webkit-keyframes object_three {
	50% {
		-webkit-transform: translate(20px, -20px);
		transform: translate(20px, -20px);
	}
}

@keyframes object_three {
	50% {
		-webkit-transform: translate(20px, -20px);
		transform: translate(20px, -20px);
	}
}

@-webkit-keyframes object_four {
	50% {
		-webkit-transform: translate(-20px, -20px);
		transform: translate(-20px, -20px);
	}
}

@keyframes object_four {
	50% {
		-webkit-transform: translate(-20px, -20px);
		transform: translate(-20px, -20px);
	}
}

/* vbox */
.vbox-bottom {
	bottom: 15px;
}

.vbox-hidden {
	display: list-item;
}

.vbox-close {
	background: #d71515;
	opacity: 1;
}

/* back to top */
#backtotop {
	position: fixed;
	bottom: 85px;
	right: 10px;
	height: 70px;
	width: 70px;
	display: none;
	place-items: center;
	border-radius: 50%;
	cursor: pointer;
	z-index: 9999;
}

#backtotop-value {
	display: block;
	height: calc(100% - 10px);
	width: calc(100% - 10px);
	background-color: #fff;
	border-radius: 50%;
	display: -ms-grid;
	display: grid;
	place-items: center;
	font-size: 32px;
	color: #FFF;
}

#backtotop-value i {
	color: #d71515;
}

/* modal */
.modal-content {
	background: #f0ebe5;
}

#contact-modal .modal-body {
	padding: 30px 35px;
}

.form-control:focus {
	border-color: #ced4da !important;
}

.modal-title {
	font-size: 25px;
	font-family: cb;
	text-transform: uppercase;
	color: #d71515;
}

.form-control {
	height: 60px;
}

.modal-content input {
	margin-bottom: 20px;
}

.modal-content textarea {
	height: 255px;
}

.modal-content p {
	font-size: 18px;
	font-family: cr;
	color: #868686;
	padding-right: 22px;
	padding-bottom: 25px;
}

.modal-footer button {
	border: none;
}

.modal-footer button:hover {
	background: #d71515;
}

.contact-item {
	padding: 0 20px;
}

.contact-info {
	margin-bottom: 20px;
}

.contact-info i {
	font-size: 24px;
	color: #d71515;
}

.contact-info h3 {
	font-size: 24px;
	font-family: cm;
	color: #010101;
	padding: 12px 0 4px;
}

.contact-info .social a i {
	font-size: 18px;
	padding-right: 12px;
	color: #868686;
	-webkit-transition: all linear .3s;
	-o-transition: all linear .3s;
	transition: all linear .3s;
}

.contact-info .social a i:hover {
	color: #d71515;
}

/* cart */
#cart {
	padding: 90px 0;
}

.cart-item h4 {
	position: relative;
	font-size: 48px;
	font-family: cb;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	color: transparent !important;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: #d71515;
	text-align: center;
}

.cart-item {
	border: 2px solid #c3c3c3;
	border-right: 0;
	border-left: 0;
	padding: 25px 0;
}

.cart-item span {
	font-size: 18px;
	font-family: cr;
	color: #868686;
	padding-bottom: 30px;
	display: block;
}

.cart-item h3 {
	font-size: 25px;
	font-family: cm;
	color: #010101;
}

.cart-item a i {
	margin-right: 6px;
}

.cart-item a i,
.bookmark-item a i {
	width: 45px;
	height: 45px;
	line-height: 45px;
	color: #fff;
	border-radius: 50%;
	background: #d71515;
	text-align: center;
}

.cart-item a i.second {
	border: 2px solid #d71515;
	background: none;
	color: #d71515;
}

.cart-item input {
	width: 60%;
	font-size: 19px;
}

.cart-price {
	padding-bottom: 30px;
}

.cart-footer a {
	text-decoration: underline;
	color: #d71515;
	font-size: 18px;
	font-family: cm;
}

/* bookmark */
#page-title {
	position: relative;
	padding: 140px 0 60px;
	background: #ece7e1;
}

#bookmark {
	padding: 90px 0;
}

.bookmark-item {
	position: relative;
}

.bookmark-item img {
	border-radius: 8px;
}

.bookmark-item h3 {
	font-family: cm;
	font-size: 25px;
	text-transform: uppercase;
	padding: 14px 0 4px;
	color: #010101;
}

.bookmark-item a i {
	position: absolute;
	top: -24px;
	left: 15px;
	border: 4px solid #f0ebe5;
	width: 50px;
	height: 50px;
	line-height: 47px;
}

/* comic details */
#comic-details {
	padding: 90px 0;
}

.comic-detail-page #page-title {
	padding-bottom: 90px;
}

.details-pos {
	margin-top: -150px;
}

.comic-detail-img img {
	border: 8px solid #fff;
}

.comic-detail-txt {
	padding-top: 140px;
}

.comic-detail-txt .stars i {
	font-size: 19px;
}

.comic-detail-txt h3 {
	padding: 4px 0 8px;
}

.comic-detail-txt h3,
.comic-detail-txt h4 {
	font-size: 59px;
	font-family: cb;
	text-transform: uppercase;
	color: #010101;
}

.comic-detail-txt h4 {
	font-size: 34px;
	padding: 15px 0 35px;
}

.comic-detail-txt span {
	font-family: cm;
	font-size: 19px;
	color: #d71515;
}

.comic-detail-txt p,
.comic-detail-txt .stars span {
	font-size: 18px;
	font-family: cr;
	color: #868686;
}

.comic-detail-txt p {
	padding-right: 70px;
}

.bookmark-btn i {
	width: 55px;
	height: 55px;
	line-height: 55px;
	border-radius: 50%;
	background: #fff;
	text-align: center;
	margin-left: 8px;
	color: #d71515;
}

/*===========================
1.0 *** HEADER AREA START ***
=============================*/
.navbar {
	padding: 20px 0;
	position: fixed;
	width: 100%;
	-webkit-transition: all linear .3s;
	-o-transition: all linear .3s;
	transition: all linear .3s;
}

.navbar-brand {
	font-size: 32px;
	font-family: cb;
	text-transform: uppercase;
	color: #010101;
	padding-top: 0;
}

.navbar-brand span {
	color: #d71515;
}

.navbar .navbar-nav .nav-link {
	font-family: cm;
	font-size: 18px;
	text-transform: uppercase;
	font-weight: 200;
	margin: 0 10px;
	color: #868686;
}

.navbar .navbar-nav .nav-link:hover {
	color: #d71515;
	cursor: pointer;
}

.button-secondary {
	color: #fff;
	background: #333333;
	padding: 14px 24px;
	border-radius: 50px;
	font-family: cm;
	font-size: 18px;
	text-transform: uppercase;
	-webkit-transition: all linear .3s;
	-o-transition: all linear .3s;
	transition: all linear .3s;
}

.button-secondary:hover {
	background: #d71515;
	color: white;
}

.menu-action .button-secondary {
	margin-left: 8px;
	margin-right: 20px;
	z-index: 1;
}

.menu-action .action-icon {
	position: relative;
	background: white;
	width: 160px;
	border-radius: 50px;
	position: relative;
	right: -62px;
	padding-left: 24px;
}

.menu-action .action-icon span {
	position: absolute;
	display: block;
	background: #d71515;
	color: white;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	line-height: 20px;
	top: -12px;
	font-family: cm;
	left: -6px;
}

.menu-action .menu-icon {
	position: relative;
	top: 6px;
	line-height: 45px;
	text-align: center;
	border-radius: 50%;
	margin: 0 6px;
	color: #868686;
	font-size: 17px;

}

.menu-action .menu-icon i {
	-webkit-transition: all linear .3s;
	-o-transition: all linear .3s;
	transition: all linear .3s;
}

.menu-action .menu-icon i:hover {
	color: #010101;
}

.menu-action .hamburger-menu {
	position: relative;
}

.menu-action .hamburger-menu:after,
.menu-action .hamburger-menu:before,
.menu-action .hamburger-menu .nav-line {
	position: absolute;
	left: 0;
	width: 46px;
	height: 4px;
	background: #868686;
}

.menu-action .hamburger-menu:after {
	content: '';
	top: 18px;
}

.menu-action .hamburger-menu:before {
	content: '';
	top: 26px;
}

.menu-action .hamburger-menu .nav-line {
	top: 34px;
}

.ham-button {
	width: 48px;
}

#offcanvasRight {
	z-index: 99999;
	background: #f0ebe5;
	padding: 12px;
}

.offcanvas-backdrop.show {
	z-index: 9999;
}

.offcanvas-title {
	font-size: 25px;
	font-family: cb;
	text-transform: uppercase;
	color: #d71515;
}

.offcanvas-body input {
	height: 60px;
	border: none;
	font-family: cr;
}

.form-control:focus,
.btn-close:focus {
	border-color: #ced4da !important;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.menu-comic {
	margin-top: 30px;
}

.menu-comic img {
	border-radius: 8px;
	-webkit-transition: all linear .3s;
	-o-transition: all linear .3s;
	transition: all linear .3s;
}

.menu-comic img:hover {
	-webkit-box-shadow: 0 0 20px rgba(46, 59, 125, 0.23);
	box-shadow: 0 0 20px rgba(46, 59, 125, 0.23);
}

.offcanvas-body {
	position: relative;
}

.social-media {
	position: absolute;
	bottom: 35px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}

.social-media p {
	font-size: 18px;
	font-family: cr;
	padding-bottom: 8px;
}

.social-media a i,
.social-media p {
	color: #868686;
}

.social-media a i {
	font-size: 21px;
	padding: 0 8px;
	-webkit-transition: all linear .3s;
	-o-transition: all linear .3s;
	transition: all linear .3s;
}

.social-media a i:hover {
	color: #d71515;
}

.navbar.nav-bg {
	padding: 23px 0;
	background: #f0ebe5 !important;
	-webkit-box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.1);
	top: -1px;
}

.offcanvas-body.side-menu form {
	position: relative;
}

.offcanvas-body.side-menu form button {
	position: absolute;
	top: 50%;
	right: 15px;
	background: none;
	border: none;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.offcanvas-body.side-menu form button i {
	font-size: 24px;
	color: #868686;
}

/*===========================
2.0 *** BANNER AREA START ***
=============================*/
#banner {
	padding: 180px 0 105px;
	position: relative;
}

/* style.css */

.banner-txt {
    position: relative; /* Essential for z-index to work */
    z-index: 100;       /* Lifts the text/buttons ABOVE the images */
}

.banner-txt span {
	font-size: 24px;
	font-family: cm;
	text-transform: uppercase;
	color: #d71515;
}

.banner-txt h3 {
	font-size: 132px;
	font-family: cb;
	text-transform: uppercase;
	color: #010101;
}

/* Resized headline */
.banner-txt .hero-title {
	font-size: 100px;
	line-height: 0.95;
}

/* style.css around line 1060 */
.button-circular {
    display: inline-flex; /* Makes the whole link behave like a solid box */
    align-items: center;  /* Centers icon vertically */
    text-decoration: none;
    
    /* ... existing styles ... */
}

/* Sub-headline */
.hero-sub {
	margin-top: 18px;
	max-width: 520px;
	font-family: cr;
	font-size: 20px;
	line-height: 1.5;
	color: #5f5f5f;
}

.hero-sub strong {
	color: #d71515;
	font-family: cm;
}

/* Buttons */
.button-primary {
	background: #d71515;
	padding: 20px 40px;
	font-family: cm;
	font-size: 21px;
	color: white;
	border-radius: 50px;
	text-transform: uppercase;
}

.button-primary:hover {
	color: white;
}

/* ===== Banner Image Stack (FORCE SMALL) ===== */
.banner-images {
	position: relative;
	min-height: 360px;
	top: -550px; /* move stack up */
	margin-bottom: -450px;
}


/* force all 3 pages to be smaller */
.banner-images img.banner-img.one,
.banner-images img.banner-sheet.two,
.banner-images img.banner-sheet.three {
	width: 38% !important;   /* << change 38 to 32 if still too big */
	height: auto !important;
}

/* top comic page */
.banner-images .banner-img {
	position: absolute;
	top: 0;
	right: 0;
	border: 12px solid #fff;
	filter: grayscale(100%);
	z-index: 3;
	transform: rotate(6deg);
	box-shadow: 0 0 20px rgba(46, 59, 125, 0.23);
}

/* middle page */
.banner-images .banner-sheet.two {
	position: absolute;
	top: 14px;
	right: -10px;
	border: 12px solid #fff;
	filter: grayscale(100%);
	opacity: 0.85;
	z-index: 2;
	transform: rotate(2deg);
}

/* back page */
.banner-images .banner-sheet.three {
	position: absolute;
	top: 28px;
	right: -20px;
	border: 12px solid #fff;
	filter: grayscale(100%);
	opacity: 0.7;
	z-index: 1;
	transform: rotate(-1deg);
}



/* Play button sizing */
.banner-txt .button-circular i {
	width: 50px;
	height: 50px;
	line-height: 50px;
}

.banner-txt .button-primary {
	margin-right: 15px;
}

.banner-txt .button-circular i::after {
	top: -6px;
	left: -6px;
	width: 35px;
	height: 62px;
}

/* Reviews */
.banner-review {
	padding-top: 80px;
}

.banner-review img {
	width: 57px;
	height: 57px;
	border-radius: 50%;
	border: 4px solid white;
	margin-left: -20px;
}

.banner-review img.one {
	margin-left: 0;
}

.stars i {
	color: #fbaa33;
}

.banner-review .stars {
	padding-bottom: 5px;
}

.banner-review p {
	font-size: 18px;
	font-family: cr;
	color: #868686;
}

.marquee {
	width: 100%;
	height: 65px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	overflow: hidden;
	position: fixed;
	bottom: 0;
	background: #222222;
	z-index: 9999;
	-webkit-transition: all linear .3s;
	-o-transition: all linear .3s;
	transition: all linear .3s;
}

.marquee img {
	height: 45px;
	padding-left: 50px;
	position: relative;
	top: -5px;
}

.marquee-1,
.marquee-2 {
	position: absolute;
	min-width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
}

.marquee-1 {
	-webkit-animation: marquee-keywords 60s linear infinite;
	animation: marquee-keywords 60s linear infinite;
	left: 0%;
}

.marquee-2 {
	left: 100%;
}

.text {
	padding: 0 2rem;
	white-space: nowrap;
	font-family: cm;
	font-size: 34px;
	text-transform: uppercase;
	color: white;
}

@-webkit-keyframes marquee-keywords {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	100% {
		-webkit-transform: translate(-100%, 0);
		transform: translate(-100%, 0);
	}
}

@keyframes marquee-keywords {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	100% {
		-webkit-transform: translate(-100%, 0);
		transform: translate(-100%, 0);
	}
}

.marquee.marquee-white {
	background: #fff;
}

.marquee.marquee-white .text {
	color: #d71515;
}

/*===========================
3.0 *** ABOUT AREA START ***
=============================*/
#about {
	padding: 90px 0 55px;
}

.about-main {
	position: relative;
}

.about-main img {
    width: 100%;              /* Fits the image to the container width */
    max-width: 100%;          /* Prevents it from overflowing */
    border-radius: 10px;      /* Slight rounded corners (0px for sharp corners) */
    -webkit-filter: none;     /* Removes B&W filter so you see colors */
    filter: none;             
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); /* Adds a cool shadow for depth */
}

.about-main .experience,
.about-main .active-users {
	position: absolute;
	border-radius: 50%;
	text-align: center;
	line-height: 0;
}

.about-main .active-users {
	top: 0;
	left: 0;
	width: 150px;
	height: 150px;
	background: white;
	box-shadow: 0 0 20px rgba(46, 59, 125, 0.15);
}

.about-main .experience {
	bottom: -100px;              /* overlap bottom of big circle */
	left: 50%;
	width: 215px;
	height: 215px;
	background: #d71515;
	transform: translateX(-50%);
}


.about-main .active-users {
	top: 0;
	width: 150px;
	height: 150px;
	line-height: 0;
	background: white;
	-webkit-box-shadow: 0 0 20px rgba(46, 59, 125, 0.15);
	box-shadow: 0 0 20px rgba(46, 59, 125, 0.15);
}

.about-main h3,
.about-main span {
	font-size: 58px;
	font-family: cb;
	color: white;
	padding-top: 47px;
}

.about-main .active-users h3,
.about-main .active-users span {
	font-size: 42px;
	padding-top: 35px;
	color: #d71515;
}

.about-main p {
	font-size: 16px;
	font-family: cr;
	color: white;
	text-transform: capitalize;
	padding: 0 30px;
}

.about-main .active-users p {
	color: #868686;
}

.about-txt {
	padding-left: 35px;
}

.about-txt span {
	font-size: 24px;
	font-family: cm;
	text-transform: uppercase;
	color: #d71515;
	position: relative;
	padding-left: 47px;
}

.about-txt span:after {
	position: absolute;
	content: '';
	top: 50%;
	left: 0;
	width: 40px;
	height: 2px;
	background: #d71515;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.about-txt h3 {
	font-size: 59px;
	font-family: cb;
	text-transform: uppercase;
	color: #010101;
}

.about-txt p {
	font-size: 18px;
	font-family: cr;
	color: #868686;
	padding-right: 130px;
}

.about-txt p i {
	color: #d71515;
}

.check-p {
	padding-bottom: 30px;
}

.check-p p {
	padding-bottom: 10px;
}

.button-circular {
	font-size: 21px;
	font-family: cm;
	text-transform: uppercase;
	color: #d71515;
}

.button-circular:hover {
	color: #d71515;
}

.button-circular i {
	position: relative;
	background: white;
	color: #d71515;
	width: 70px;
	height: 70px;
	line-height: 70px;
	border-radius: 50%;
	text-align: center;
	font-size: 18px;
	margin-right: 8px;
}

.button-circular i::after {
	position: absolute;
	content: '';
	top: -6px;
	left: -8px;
	width: 45px;
	height: 84px;
	background: #d71515;
	border-radius: 150px 0 0 150px;
	z-index: -1;
}

.about-main .counter,
.team-counter .counter {
	display: inline-block;
}

/*===========================
4.0 *** BRAND AREA START ***
=============================*/
#brand {
	padding: 0 0 75px;
}

/*===========================
5.0 *** NEW_COMICS AREA START ***
=============================*/
#characters {
	padding: 40px 0 100px;
	margin-bottom: 90px;
	background: #d71515;
	margin-top: 20px;
	
}

.section-title span {
	font-size: 24px;
	font-family: cm;
	text-transform: uppercase;
	color: #d71515;
	position: relative;
	padding-left: 47px;
}

.section-title span::after {
	position: absolute;
	content: '';
	top: 50%;
	left: 0;
	width: 40px;
	height: 2px;
	background: #d71515;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.t-white.section-title span::after {
	background: white;
}

.section-title h3 {
	font-size: 59px;
	font-family: cb;
	text-transform: uppercase;
	color: #010101;
}

.t-white span,
.t-white h3 {
	color: white;
}

.comic-item-pos {
	position: relative;
	bottom: 0px;
}

.comic-item {
	padding: 12px 12px 13px;
	background: white;
	border-radius: 8px;
	margin-top: 50px;
	position: relative;
}

.comic-item.active {
	margin-top: 10px;
}

.comic-item img {
	width: 100%;
	height: auto;
	object-fit: cover;
	margin: 0 auto;
	display: block;

	-webkit-box-shadow: 0 0 20px rgba(46, 59, 125, 0.29);
	box-shadow: 0 0 20px rgba(46, 59, 125, 0.29);
	border-radius: 8px;
	-webkit-transition: all linear .3s;
	-o-transition: all linear .3s;
	transition: all linear .3s;
}

.comic-item-pos {
	justify-content: center;
}

.comic-item-details {
	padding: 0 8px;
}

.comic-item h3 {
	font-family: cm;
	font-size: 25px;
	text-transform: uppercase;
	padding: 14px 0 4px;
	color: #010101;
}

.comic-item p {
	font-size: 18px;
	font-family: cr;
	color: #868686;
}

.comic-item-details a i {
	font-size: 21px;
	width: 55px;
	height: 55px;
	line-height: 55px;
	border: 2px solid #d71515;
	color: #d71515;
	text-align: center;
	border-radius: 50%;
	margin-top: 14px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transition: all linear .2s;
	-o-transition: all linear .2s;
	transition: all linear .2s;
}

.comic-item:hover .comic-item-details a i {
	-webkit-transform: rotate(0);
	-ms-transform: rotate(0);
	transform: rotate(0);
}

.comic-item-details a i:hover {
	background: #d71515;
	color: white;
}

.veno-img i {
	background: #d71515;
	color: #fff;
	width: 55px;
	height: 55px;
	left: 50%;
	bottom: 15%;
	line-height: 55px;
	text-align: center;
	border-radius: 50%;
	position: absolute;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
	-webkit-transition: all linear .3s;
	-o-transition: all linear .3s;
	transition: all linear .3s;

}

.comic-item:hover img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

.comic-item:hover .veno-img i {
	bottom: 45%;
	opacity: 1;
}

/*===========================
6.0 *** POPULAR AREA START ***
=============================*/
#popular {
	padding: 90px 0;
}

#popular .section-title h3 {
	padding-bottom: 10px;
}

#popular .section-title p {
	font-size: 18px;
	font-family: cr;
	color: #868686;
	padding-right: 225px;
	padding-bottom: 40px;
}

.popular-item p {
	padding: 8px 0 4px;
	font-family: cr;
	font-size: 19px;
	color: #868686;
	position: relative;

}

.popular-item p:after {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: #c3c3c3;
}

.popular-item {
	margin-bottom: 105px;
}

.popular-item.right {
	margin-top: -420px;
}

.popular-item.right p {
	text-align: right;
	padding-right: 29px;
}

.popular-item a {
	display: block;
	font-family: cm;
	font-size: 25px;
	text-transform: uppercase;
	padding: 14px 0 4px;
	color: #010101;
}

.popular-item a:hover {
	color: #d71515;
}

.popular-item img,
.popular-item a {
	-webkit-transition: all linear .3s;
	-o-transition: all linear .3s;
	transition: all linear .3s;
}

.popular-item img:hover {
	-webkit-box-shadow: 0 0 20px rgba(46, 59, 125, 0.23);
	box-shadow: 0 0 20px rgba(46, 59, 125, 0.23);
}

/*===========================
7.0 *** TEAM AREA START ***
=============================*/
#team {
	padding: 90px 0;
	background: #d71515;
}

.pt-55 {
	padding-top: 55px;
}

.pb-65 {
	padding-bottom: 65px;
}

.pt-16 {
	padding-top: 16px;
}

.pt-20 {
	padding-top: 20px;
}

.team-item img {
	position: relative;
	border-radius: 50%;
}

.team-img {
	position: relative;
	display: block;
}

.team-img::after {
	position: absolute;
	content: '';
	width: 250px;
	height: 250px;
	background: #111;
	border-radius: 50%;
	left: 35px;
	z-index: -1;
	top: 6px;
}

.team-item h3 {
	font-size: 29px;
	font-family: cm;
	color: white;
	padding-top: 30px;
}

.team-item p,
.team-counter p {
	font-family: cr;
	font-size: 18px;
	color: white;
}

.team-item .social a i {
	color: white;
	padding: 12px 8px 0;
	opacity: 0;
	-webkit-transition: all linear .3s;
	-o-transition: all linear .3s;
	transition: all linear .3s;
}

.team-item:hover .social a i {
	opacity: 1;
}

.team-counter-main {
	padding-top: 30px;
	border-top: 3px solid #a01313;
}

.team-counter h3,
.team-counter span {
	font-size: 95px;
	font-family: cb;
	color: transparent !important;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: white;
}

/*===========================
8.0 *** REVIEWS AREA START ***
=============================*/
#reviews {
	padding: 90px 0;
	position: relative;
}

#reviews .section-title p {
	font-size: 18px;
	font-family: cr;
	color: #868686;
	padding-right: 120px;
	padding-bottom: 40px;
}

#reviews .section-title h3 {
	padding-bottom: 12px;
}

.review-item {
	background: #fff;
	padding: 25px;
	border-radius: 8px;
	margin: 0 15px;
}

.review-item .fa-quote-left {
	font-size: 66px;
	color: transparent !important;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: #d71515;
}

.review-txt p {
	font-size: 18px;
	font-family: cr;
	color: #868686;
	padding: 4px 0 8px;
}

.review-txt h3 {
	font-size: 25px;
	font-family: cm;
	color: #010101;
	position: relative;
	top: 25px;
}

.review-img {
	padding-top: 20px;
}

.review-img img {
	border-radius: 50%;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	width: 80px;
}

.review-item .stars {
	padding-bottom: 30px;
	position: relative;
}

.review-item .stars::after {
	position: absolute;
	content: '';
	width: 100%;
	height: 2px;
	background: #f0ebe5;
	bottom: 0;
	left: 0;
}

/*===========================
9.0 *** PRICE_PLAN AREA START ***
=============================*/
#price-plan {
	padding: 90px 0;
	background: #ece7e1;
}

.price-main {
	background: #fff;
}

.price-item {
	padding: 35px 25px;
}

.price-item span {
	font-family: cm;
	font-size: 21px;
	color: #010101;
}

.price-item p {
	font-size: 18px;
	font-family: cr;
	color: #868686;
	padding-bottom: 8px;
}

.price-item img {
	padding: 14px 0 12px;
	width: 110px;
}

.price-item h3 {
	font-family: cb;
	font-size: 44px;
	padding: 14px 0;
}

.price-btn {
	padding: 25px 0 15px;
}

.price-item a {
	padding: 17px 32px;
}

.price-item.active {
	background: #d71515;
	position: relative;
	top: -20px;
	border-radius: 4px;
	color: white;
}

.price-item.active span,
.price-item.active p {
	color: white;
}

.price-item.active a {
	background: white;
	color: #d71515;
}

.price-item.active img {
	-webkit-filter: brightness(0) invert(1);
	filter: brightness(0) invert(1);
}

.price-footer p {
	font-size: 18px;
	font-family: cr;
	color: #868686;
}

.price-footer a {
	text-decoration: underline;
	color: #d71515;
	font-size: 18px;
	font-family: cm;
}

/*===========================
10.0 *** BLOG AREA START ***
=============================*/
#episodes {
	padding: 90px 0;
	position: relative;
}

.blog-item {
	border: 2px solid #c3c3c3;
	border-right: 0;
	border-left: 0;
	padding: 35px 0;
}

.blog-item h4 {
	position: relative;
	font-size: 115px;
	font-family: cb;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	color: transparent !important;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: #d71515;
}

/* style.css - Around line 1032 */

.blog-item img {
    /* 1. FORCE CINEMATIC RATIO */
    width: 100%;
    aspect-ratio: 16 / 9;   /* This creates the 600x338 shape */
    object-fit: cover;      /* Crops the image so it doesn't squish/stretch */
    height: auto;
    
    /* 2. STYLE SETTINGS */
    border-radius: 8px;
    
    /* OPTIONAL: Remove these two lines if you want COLOR thumbnails */
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.blog-item p,
.blog-item a {

	color: #868686;
}

.blog-item p {
	font-size: 17px;
	font-family: cr;
	padding-right: 85px;
}

.blog-item a {
	padding-right: 18px;
	font-size: 19px;
}

.blog-item a i {
	padding-right: 4px;
}

.blog-item h3 {
	font-size: 34px;
	font-family: cm;
	color: #010101;
	padding: 12px 120px 18px 0;
}

.blog-txt {
	padding-left: 25px;
}

/* style.css around line 1060 */

.round-btn i {
    /* SIZE SETTINGS */
    width: 55px;
    height: 55px;
    font-size: 28px;  /* Adjust this to make the icon larger/smaller */
    
    /* CENTERING MAGIC (Flexbox) */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* THE OPTICAL FIX (Nudges the triangle slightly to the right) */
    padding-left: 5px; 
    
    /* YOUR EXISTING STYLES */
    border: 2px solid #d71515;
    color: #d71515;
    border-radius: 50%;
    margin-top: 14px;
    
    /* ENSURE NO ROTATION */
    -webkit-transform: rotate(0deg); 
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    
    -webkit-transition: all linear .2s;
    -o-transition: all linear .2s;
    transition: all linear .2s;
}

.round-btn:hover i {
	background: #d71515;
	color: white;
}

.no-border {
	border: none;
}

.top-no-border {
	border-top: none;
}

/*===========================
11.0 *** FOOTER AREA START ***
=============================*/
#footer {
	padding: 80px 0;
	background: #2a2a2a;
}

.footer-logo a {
	font-size: 46px;
	font-family: cb;
	color: white;
	text-transform: uppercase;
}

.footer-logo a span {
	color: #d71515;
}

.footer-menu h3,
.footer-action h3 {
	font-size: 24px;
	font-family: cm;
	color: #fff;
	padding-top: 17px;
	text-transform: uppercase;
}

.footer-action h3 {
	padding-bottom: 20px;
}

.footer-menu a {
	display: block;
	font-size: 18px;
	font-family: cr;
	color: #a7a7a7;
	margin-top: 15px;
	-webkit-transition: all linear .3s;
	-o-transition: all linear .3s;
	transition: all linear .3s;
}

.footer-menu a:hover {
	padding-left: 4px;
	color: #fff;
}

.footer-social {
	padding-bottom: 35px;
}

.footer-social a i {
	color: #a7a7a7;
	font-size: 26px;
	padding-right: 18px;
	-webkit-transition: all linear .3s;
	-o-transition: all linear .3s;
	transition: all linear .3s;
}

.footer-social a i:hover {
	color: #fff;
}

.footer-download a {
	display: inline-block;
	padding: 17px 40px;
	-webkit-transition: all linear .3s;
	-o-transition: all linear .3s;
	transition: all linear .3s;
}

.footer-download a.android {
	background: #fff;
	color: #d71515;
	margin-bottom: 20px;
}

.footer-download a.ios {
	background: none;
	color: #fff;
	border: 2px solid #fff;
}

.footer-download a.android:hover,
.footer-download a.ios:hover {
	background: #d71515;
	color: #fff;
	border-color: #d71515;
}

.footer-logo {
	position: relative;
}

.footer-logo img {
	position: absolute;
	top: 95px;
	left: 30px;
	-webkit-transform: rotate(-14deg);
	-ms-transform: rotate(-14deg);
	transform: rotate(-14deg);
}

/*===========================
12.0 *** COPY_RIGHT AREA START ***
=============================*/
#copy_right {
	background: #2a2a2a;
}

.copyright-txt {
	border-top: 2px solid #3d3d3d;
	padding: 30px 0 90px;
}

.copyright-txt p,
.copyright-txt span,
.copyright-txt a {
	font-size: 18px;
	font-family: cr;
	color: #a7a7a7;
}

.copyright-txt a {
	font-size: 19px;
	padding: 0 8px;
	-webkit-transition: all linear .3s;
	-o-transition: all linear .3s;
	transition: all linear .3s;
}

.copyright-txt a:hover {
	color: #fff;
}

.copyright-txt a.active {
	color: #fff;
}

/* style.css - Add at the bottom */

.round-btn.locked {
    pointer-events: none;   /* Prevents clicking completely */
    cursor: default;        /* Doesn't show the 'hand' cursor */
}

.round-btn.locked i {
    border-color: #cccccc !important;  /* Gray Border */
    color: #cccccc !important;         /* Gray Icon */
    background: transparent !important;
}

/* style.css - Add at the bottom */

.dev-terminal {
    background: #e6e1db;        /* Slightly darker than body bg */
    border-left: 5px solid #d71515; /* Your brand red */
    padding: 30px;
    margin: 30px auto 60px;     /* Spacing around the box */
    max-width: 800px;           /* Keeps it readable */
    font-family: 'Courier New', Courier, monospace; /* Code font */
    color: #5f5f5f;
    border-radius: 0 8px 8px 0;
}

.terminal-header {
    font-family: cb;        /* Your bold font */
    color: #d71515;
    font-size: 26px;        /* WAS 18px -> NOW 26px */
    margin-bottom: 20px;    /* More space below the header */
    text-transform: uppercase;
}

.dev-terminal p {
    font-size: 20px !important;  /* Forces the browser to obey this */
    line-height: 1.6 !important;
    margin: 0;
    font-family: 'Courier New', Courier, monospace !important; /* Ensure the code font sticks */
}

.dev-terminal .highlight {
    background: #d71515;
    color: #fff;
    padding: 3px 8px;
    font-size: 18px;        /* WAS 14px -> NOW 18px */
    vertical-align: middle; /* Keeps it aligned with the text */
}

.terminal-header i {
    font-size: 28px;        /* Make the triangle icon match the header size */
    margin-right: 10px;
}

/* style.css - Add at the bottom */

.blog-item img.show-color {
    -webkit-filter: none;
    filter: none;
}

/* Removes the line from the very last episode or item in a list */
.blog-item:last-child {
    border-bottom: none !important;
}

.city-grid {
    /* Replace with your map image */
    background-image: url('images/nimages/neuropolis-map-final.jpg'); 
    background-size: cover;
    background-position: center;
    /* Makes the background image dark so the green text pops */
    filter: grayscale(100%) brightness(0.4); 
}

.sector {
    /* Make the grid cells mostly see-through */
    background: rgba(0, 255, 0, 0.02); 
    /* A faint border to show the grid lines */
    border: 1px dotted rgba(0, 255, 0, 0.3); 
}

.sector:hover {
    /* When hovering, light up that square */
    background: rgba(0, 255, 0, 0.3); 
}
/* Contact modal: tighten right-side spacing (overrides Bootstrap mb-4) */
#contact-modal .contact-info .info-item,
#contact-modal .contact-info .info-item.mb-4 {
  margin-bottom: 12px !important;
}

#contact-modal .contact-info h4 {
  margin: 0 0 4px 0 !important;
  line-height: 1.2;
}

#contact-modal .contact-info p {
  margin: 0 !important;
  line-height: 1.35;
}

/* Optional: no extra space after the last item */
#contact-modal .contact-info .info-item:last-child {
  margin-bottom: 0 !important;
}



/* =====================================================
   SUBSCRIBE SECTION (BACKGROUND + OVERLAY)
   ===================================================== */

/* Works whether you use id="subscribe" or class="subscribe-section" */
#subscribe,
.subscribe-section {
  position: relative;
  background: url("../images/subscribe-bg.jpg") center center / cover no-repeat;
  padding: 80px 0;
}

/* Dark overlay for readability */
#subscribe::before,
.subscribe-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  
}

/* Ensure content sits ABOVE overlay */
#subscribe .container,
.subscribe-section .container {
  position: relative;
  z-index: 2;
}

/* =====================================================
   LEFT COLUMN — TEXT
   ===================================================== */

.subscribe-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

.subscribe-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
}

.subscribe-benefits li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 14px;
  font-size: 17px;        /* Larger bullet text */
  line-height: 1.5;
  color: inherit;
}

.subscribe-benefits li::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 0;
  color: #c44;
  font-size: 18px;
}

/* =====================================================
   RIGHT COLUMN — FORM
   ===================================================== */

.subscribe-form-wrap {
  background: rgba(255, 255, 255, 0.95);
  padding: 30px;
  border-radius: 8px;
}

/* Optional: tidy Kit branding spacing */
.formkit-powered-by-convertkit-container {
  margin-top: 10px;
}

/* Improve text contrast in subscribe section */
#subscribe .subscribe-title,
#subscribe .subscribe-benefits li {
  color: #ffffff;
}

#subscribe .subscribe-title,
#subscribe .subscribe-benefits li {
  text-shadow: 0 2px 6px rgba(0,0,0,0.7);
}

/* Soft readability panel behind text */
#subscribe .subscribe-text-wrap {
  background: rgba(0,0,0,0.45);
  padding: 30px 34px;
  border-radius: 8px;
}

/* FILTER MENU STYLES */
.filter-menu {
    text-align: center;
    margin-bottom: 40px;
}

.filter-btn {
    background: transparent;
    border: 2px solid #333;
    color: #666;
    padding: 10px 25px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.filter-btn:hover, .filter-btn.active {
    border-color: #d71515; /* Rex Red */
    color: #d71515;
    background: rgba(215, 21, 21, 0.05);
    box-shadow: 0 0 10px rgba(215, 21, 21, 0.2);
}

/* HIDE ANIMATION */
.media-item {
    transition: all 0.4s ease-in-out;
}


/* LOCKED BUTTON STATE */
.download-btn.locked {
    background: transparent;
    border: 2px solid #555;
    color: #555;
    cursor: not-allowed;
    position: relative; /* Needed for tooltip */
    transition: all 0.3s ease;
}

.download-btn.locked:hover {
    border-color: #888;
    color: #888;
}

/* TOOLTIP MESSAGE */
.download-btn.locked:hover::after {
    content: "⚠ RESTRICTED: JOIN NEWSLETTER TO DECRYPT";
    position: absolute;
    bottom: 120%; /* Sits above button */
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #d71515; /* Warning Red */
    border: 1px solid #d71515;
    padding: 8px 12px;
    font-size: 10px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    white-space: nowrap;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0,0,0,0.8);
    pointer-events: none;
    z-index: 99;
}

/* =========================================
   REX GLITCHMAN SYSTEM OVERRIDES
   (Master Patch v1.0)
   ========================================= */

/* 1. FORCE COLOR ON MEDIA IMAGES */
/* Overrides the template's noir filter for specific areas */
#media-archive img, 
.blog-img img, 
.album-art {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
}

/* 2. MEDIA BUTTONS CONTAINER (Vertical Stack) */
.music-buttons {
    display: flex !important;
    flex-direction: column !important; /* Stack items top-to-bottom */
    align-items: flex-start !important; /* Align to the left */
    gap: 12px !important; /* Space between the two rows */
    margin-top: 15px;
}

/* New Class for each Row (Button + Text) */
.btn-row {
    display: flex !important;
    align-items: center !important; /* Vertically center button with text */
    gap: 15px !important; /* Space between button and text */
    width: 100%;
}

/* TEXT STYLES */
.play-instruction {
    color: #333 !important;       /* Darker text for Play */
    font-size: 13px !important;
    font-family: 'Courier New', Courier, monospace !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: bold;
}

.unlock-instruction {
    color: #777 !important;       /* Gray text for Lock */
    font-size: 13px !important;
    font-family: 'Courier New', Courier, monospace !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: bold;
    transition: opacity 0.5s ease;
}

/* 3. ROUND BUTTON SHAPE & CENTERING (THE LOCK FIX) */
.music-buttons .round-btn {
    display: inline-flex !important; /* Flexbox is best for centering */
    justify-content: center !important; /* Center Horizontally */
    align-items: center !important;     /* Center Vertically */
    width: 50px !important;             /* Force exact width */
    height: 50px !important;            /* Force exact height */
    padding: 0 !important;              /* Kill padding that pushes icon */
    border-radius: 50% !important;      /* Perfect circle */
    margin: 0 !important;
    float: none !important;
    line-height: 1 !important;
}

/* 4. LOCKED BUTTON STYLE */
.download-btn.locked {
    background-color: #333 !important; /* Dark Gray */
    border: 2px solid #555 !important;
    color: #888 !important;
    cursor: not-allowed !important;
}

.download-btn.locked:hover {
    background-color: #444 !important;
    color: #d71515 !important;         /* Red on hover */
    border-color: #d71515 !important;
}

/* 5. ICON RESET */
/* Ensures the icon itself doesn't have hidden margins */
.music-buttons .round-btn i {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    line-height: 0 !important;
    position: static !important;
    color: inherit !important;
}

/* 6. REMOVE TEMPLATE ARTIFACTS */
/* Hides the vertical lines/boxes the template adds to blog posts */
.music-buttons .round-btn::before,
.music-buttons .round-btn::after,
.blog-content::before, 
.blog-content::after {
    display: none !important;
    content: none !important;
    border: none !important;
    background: none !important;
}

/* INSTRUCTION TEXT NEXT TO LOCK */
.unlock-instruction {
    color: #777 !important;       /* Medium Gray */
    font-size: 13px !important;   /* Small Tech Size */
    font-family: 'Courier New', Courier, monospace !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 12px;            /* Space between lock and text */
    font-weight: bold;
    opacity: 1;
    transition: opacity 0.5s ease;
}