/******************************************************************
  Template Name: DJoz
  Description:  DJoz Music HTML Template
  Author: Colorlib
  Author URI: https://colorlib.com
  Version: 1.0
  Created: Colorlib
******************************************************************/

/*------------------------------------------------------------------
[Table of contents]

1.  Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Hero Section
5.  Services Section
6.  Track Section
7.  Countdown Section
8.  Team Section
9.  Contact
10.  Footer Style
-------------------------------------------------------------------*/

/*----------------------------------------*/

/* Template default CSS
/*----------------------------------------*/

html,
body {
    height: 100%;
    font-family: "Now Regular";
    -webkit-font-smoothing: antialiased;
 
    /* ✅ Custom Mouse Cursor */
    /* cursor: url("../img/icon.ico"), auto; */
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: #111111;
	font-weight: 400;
	font-family: "Rajdhani", sans-serif;
}

h1 {
	font-size: 70px;
}

h2 {
	font-size: 36px;
}

h3 {
	font-size: 30px;
}

h4 {
	font-size: 24px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

p {
	font-size: 15px;
	font-family: "Now Regular";
	color: #c0bebe;
	font-weight: 400;
	line-height: 26px;
	margin: 0 0 15px 0;
}

img {
	max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
	outline: none;
}

a:hover,
a:focus {
	text-decoration: none;
	outline: none;
	color: #ffffff;
}

ul,
ol {
	padding: 0;
	margin: 0;
}

/*---------------------
  Helper CSS
-----------------------*/

.section-title {
	margin-bottom: 40px;
	position: relative;
	z-index: 1;
}

.section-title.center-title {
	text-align: center;
}

.section-title h2 {
	font-size: 42px;
	color: #15a177;
	font-weight: 700;
	text-transform: uppercase;
}

.section-title h1 {
	font-size: 100px;
	color: #f2f2f2;
	font-family: "Rockville Solid Regular";
	position: absolute;
	left: 0;
	top: -45px;
	width: 100%;
	z-index: -1;
}

.set-bg {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
}

.spad {
	padding-top: 100px;
	padding-bottom: 100px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
	color: #fff;
}

/* buttons */

.primary-btn {
	display: inline-block;
	font-size: 15px;
	text-transform: uppercase;
	padding: 14px 25px 12px;
	color: #ffffff;
	background: #15a177;
	letter-spacing: 2px;
}

.primary-btn.border-btn {
	background: transparent;
	border: 2px solid #15a177;
	color: #111111;
}

.site-btn {
	font-size: 15px;
	color: #ffffff;
	background: #15a177;
	font-weight: 700;
	letter-spacing: 2px;
	border: none;
	text-transform: uppercase;
	display: inline-block;
	padding: 14px 30px;
	width: 100%;
}

/* Preloder */

#preloder {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999999;
	background: #000;
}

.loader {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -13px;
	margin-left: -13px;
	border-radius: 60px;
	animation: loader 0.8s linear infinite;
	-webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

@-webkit-keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
	50% {
		-webkit-transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}
	100% {
		-webkit-transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

/*---------------------
  Header
-----------------------*/

.header {
    background: #000000;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9999;
}

.header.header--normal {
	position: relative;
	background: #000000;
}

.header__logo {
	padding: 20px 0 25px;
}

.header__logo a {
	display: inline-block;
}

.header__nav {
	text-align: right;
}

.header__menu {
	padding: 31px 0 27px;
	display: inline-block;
	margin-right: 45px;
}

.header__menu ul li {
	list-style: none;
	display: inline-block;
	margin-right: 45px;
	position: relative;
}

.header__menu ul li.active a:after {
	opacity: 1;
}

.header__menu ul li:hover a:after {
	opacity: 1;
}

.header__menu ul li:hover .dropdown {
	top: 34px;
	opacity: 1;
	visibility: visible;
}

.header__menu ul li:last-child {
	margin-right: 0;
}

.header__menu ul li .dropdown {
	position: absolute;
	left: 0;
	top: 56px;
	width: 150px;
	background: #111111;
	text-align: left;
	padding: 2px 0;
	z-index: 9;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.header__menu ul li .dropdown li {
	display: block;
	margin-right: 0;
}

.header__menu ul li .dropdown li a {
	font-size: 14px;
	color: #ffffff;
	font-weight: 400;
	padding: 8px 20px;
	text-transform: capitalize;
}

.header__menu ul li .dropdown li a:after {
	display: none;
}

.header__menu ul li a {
	font-size: 15px;
	text-transform: uppercase;
	color: #15a177;
	display: block;
	padding: 6px 0;
	position: relative;
}

.header__menu ul li a:after {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: #00ff84;
	content: "";
	-webkit-transition: all, 0.5s;
	-o-transition: all, 0.5s;
	transition: all, 0.5s;
	opacity: 0;
}

.header__right__social {
	display: inline-block;
}

.header__right__social a {
	display: inline-block;
	font-size: 16px;
	color: #15a177;
	margin-right: 16px;
}

.header__right__social a:last-child {
	margin-right: 0;
}

.slicknav_menu {
	display: none;
}

/*---------------------
  Hero
-----------------------*/

.hero {
	padding-top: 400px;
	padding-bottom: 295px;
	position: relative;
}

.hero__text {
	text-align: center;
}

.hero__text span {
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 6px;
}

.hero__text h1 {
	font-size: 110px;
	font-family: "Rockville Solid Regular";
	color: #ffffff;
	margin-bottom: 20px;
	margin-top: 22px;
}

.hero__text p {
	color: #ffffff;
	margin-bottom: 20px;
}

.hero__text .play-btn {
	font-size: 26px;
	color: #5c00ce;
	height: 90px;
	width: 90px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	display: inline-block;
	line-height: 90px;
	text-align: center;
	position: relative;
	z-index: 1;
}

.hero__text .play-btn i {
	position: relative;
	top: 2px;
	left: 2px;
}

.hero__text .play-btn:after {
	position: absolute;
	left: 15px;
	top: 15px;
	height: 60px;
	width: 60px;
	background: #ffffff;
	border-radius: 50%;
	content: "";
	z-index: -1;
}

.linear__icon {
	position: absolute;
	left: 50%;
	bottom: 0;
	margin-left: -16px;
	-webkit-animation: mymove 0.5s infinite alternate;
	animation: mymove 0.5s infinite alternate;
}

.linear__icon i {
	font-size: 50px;
	color: #5c00ce;
}

@-webkit-keyframes mymove {
	0% {
		bottom: 0;
	}
	100% {
		bottom: -10px;
	}
}

@keyframes mymove {
	0% {
		bottom: 0;
	}
	100% {
		bottom: -10px;
	}
}

/*---------------------
  Events
-----------------------*/

.event {
	padding-bottom: 60px;
}

.event .section-title {
	margin-bottom: 10px;
	position: relative;
}

.event .section-title:after {
	position: absolute;
	right: 46px;
	top: 25px;
	height: 2px;
	width: 775px;
	background: rgba(225, 225, 225, 0.3);
	content: "";
	z-index: -1;
}

.event__slider .col-lg-4 {
	max-width: 100%;
}

.event__slider.owl-carousel .owl-stage-outer {
	padding-top: 30px;
	padding-bottom: 40px;
}

.event__slider.owl-carousel .owl-nav {
	position: absolute;
	right: 15px;
	top: -50px;
}

.event__slider.owl-carousel .owl-nav button {
	font-size: 22px;
	color: #111111;
	opacity: 0.5;
	margin-right: 10px;
}

.event__slider.owl-carousel .owl-nav button:last-child {
	margin-right: 0;
}

.event__item {
	-webkit-box-shadow: 0px 3px 15px rgba(22, 41, 124, 0.1);
	box-shadow: 0px 3px 15px rgba(22, 41, 124, 0.1);
}

.event__item__pic {
	height: 360px;
	position: relative;
}

.event__item__pic .tag-date {
	position: absolute;
	left: 0;
	bottom: -21px;
	width: 100%;
	text-align: center;
}

.event__item__pic .tag-date span {
	font-size: 15px;
	color: #ffffff;
	display: inline-block;
	background: #15a177;
	padding: 12px 8px 9px 20px;
}

.event__item__text {
	text-align: center;
	padding: 45px 10px 25px;
}

.event__item__text h4 {
	font-size: 26px;
	font-weight: 700;
	color: #111111;
	margin-bottom: 10px;
}

.event__item__text p {
	color: #888888;
	margin-bottom: 0;
}

.event__item__text p i {
	color: #15a177;
	margin-right: 8px;
	font-size: 17px;
}

/*---------------------
  Track
-----------------------*/

.track {
	padding-top: 120px;
	padding-bottom: 40px;
	overflow: hidden;
}

.track .section-title {
	margin-bottom: 105px;
}

.track__content {
	height: 502px;
	overflow-y: auto;
}

.track__all {
	text-align: right;
	margin-bottom: 100px;
}

.jp-play {
	position: relative;
	height: 50px;
	width: 50px;
	background: transparent;
	border: 2px solid #e1e1e1;
	border-radius: 50%;
}

.jp-play:after {
	position: absolute;
	display: block;
	left: 17px;
	top: 12px;
	width: 16px;
	height: 20px;
	background: url(../img/play-default.png);
	content: "";
}

.jp-state-playing .jp-play {
	background: #5c00ce !important;
	border-color: #5c00ce !important;
}

.jp-state-playing .jp-play:after {
	background: url(../img/pause.png) !important;
	left: 15px;
	top: 12px;
}

.jp-audio .jp-play:focus {
	background: #5c00ce !important;
	border-color: #5c00ce !important;
}

.jp-audio .jp-play:focus:after {
	background: url(../img/play.png);
}

.jp-seek-bar>div {
	height: 5px;
	background: #e1e1e1;
	cursor: pointer;
	width: 245px;
}

.player_bars {
	width: 350px;
	display: table;
	padding-left: 50px;
	position: relative;
	padding-top: 25px;
	float: left;
	margin-right: 30px;
}

.jp-play-bar {
	position: relative;
	height: 100%;
	background: #5c00ce;
	overflow: visible !important;
}

.jp-current-time {
	font-size: 15px;
	color: #111111;
	position: absolute;
	left: -50px;
	top: -9px;
}

.jp-duration {
	font-size: 15px;
	color: #111111;
	position: absolute;
	right: 0;
	top: 16px;
}

.player_controls_box {
	width: 50px;
	float: left;
	margin-right: 20px;
}

.jp-mute {
	font-size: 18px;
	border: none;
	background: none;
	color: #111111;
	position: absolute;
	left: 0;
	top: 13px;
}

.jp-volume-bar {
	height: 5px;
	width: 70px;
	background: #e1e1e1;
	cursor: pointer;
}

.jp-volume-bar-value {
	background: #00cea0;
	height: 100%;
}

.jp-volume-controls {
	position: relative;
	width: 95px;
	float: left;
	padding-left: 30px;
	padding-top: 25px;
}

.single_player_container {
	overflow: hidden;
	margin-bottom: 40px;
}

.single_player_container:last-child {
	margin-bottom: 0;
}

.single_player_container h4 {
	font-size: 26px;
	color: #111111;
	font-weight: 700;
	margin-bottom: 20px;
	text-transform: uppercase;
}

.track__pic {
	position: relative;
	z-index: 1;
}

.track__pic:after {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #f5f5f5;
	content: "";
	z-index: -1;
}

.track__pic img {
	position: relative;
	top: -50px;
	width: calc(100% - 40px);
	margin-left: 40px;
	height: 502px;
}

/*---------------------
  Youtube
-----------------------*/

.youtube {
	padding-bottom: 50px;
}

.youtube .section-title {
	text-align: center;
}

.youtube .section-title h1 {
	font-size: 90px;
}

.youtube__item {
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
	margin-bottom: 30px;
}

.youtube__item:hover {
	-webkit-box-shadow: 0px 3px 30px rgba(22, 41, 124, 0.1);
	box-shadow: 0px 3px 30px rgba(22, 41, 124, 0.1);
}

.youtube__item__pic {
	height: 240px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.youtube__item__pic .play-btn {
	font-size: 16px;
	color: #5c00ce;
	height: 60px;
	width: 60px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	display: inline-block;
	line-height: 60px;
	text-align: center;
	position: relative;
	z-index: 1;
}

.youtube__item__pic .play-btn i {
	position: relative;
	top: 2px;
	left: 2px;
}

.youtube__item__pic .play-btn:after {
	position: absolute;
	left: 10px;
	top: 10px;
	height: 40px;
	width: 40px;
	background: #ffffff;
	border-radius: 50%;
	content: "";
	z-index: -1;
}

.youtube__item__text {
	padding: 25px 30px 20px 20px;
	background: #ffffff;
}

.youtube__item__text h4 {
	font-size: 26px;
	color: #111111;
	line-height: 34px;
	font-weight: 700;
}

/*---------------------
  Countdown
-----------------------*/

.countdown {
	padding-bottom: 560px;
}

.countdown.countdown--page {
	padding-top: 150px;
	padding-bottom: 150px;
}

.countdown__text {
	text-align: center;
	margin-bottom: 36px;
}

.countdown__text h1 {
	font-size: 90px;
	color: #ffffff;
	font-family: "Rockville Solid Regular";
	color: #ffffff;
	margin-bottom: 25px;
}

.countdown__text h4 {
	font-size: 26px;
	font-family: "Now Regular";
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 4px;
}

.countdown__timer {
	text-align: center;
	margin-bottom: 30px;
}

.countdown__item {
	display: inline-block;
	margin-right: 80px;
	margin-bottom: 30px;
}

.countdown__item:last-child {
	margin-right: 0;
}

.countdown__item span {
	font-size: 90px;
	font-family: "Rajdhani", sans-serif;
	font-weight: 700;
	color: #ffffff;
	display: block;
	line-height: 100px;
}

.countdown__item p {
	color: #ffffff;
	letter-spacing: 4px;
	text-transform: uppercase;
	margin-bottom: 0;
}

.buy__tickets {
	text-align: center;
}

/*---------------------
  Discography
-----------------------*/

.discography {
	padding-bottom: 40px;
	padding-top: 120px;
	overflow: hidden;
}

.discography .section-title {
	margin-bottom: 90px;
}

.discography__item {
	margin-bottom: 45px;
	-webkit-box-shadow: 0px 5px 10px rgba(22, 41, 124, 0.1);
	box-shadow: 0px 5px 10px rgba(22, 41, 124, 0.1);
}

.discography__item__pic img {
	min-width: 100%;
}

.discography__item__text {
	padding: 25px 30px 35px;
	text-align: center;
}

.discography__item__text span {
	font-size: 18px;
	color: #15a177;
	font-weight: 700;
}

.discography__item__text h4 {
	font-size: 22px;
	text-transform: uppercase;
	color: #ffffff;
	margin-top: 10px;
	margin-bottom: 25px;
}

.discography__item__text a {
	display: inline-block;
	margin-right: 10px;
}

.discography__item__text a:last-child {
	margin-right: 0;
}

.pagination__links {
	text-align: center;
	padding-top: 10px;
}

.pagination__links.blog__pagination {
	text-align: left;
}

.pagination__links a {
	display: inline-block;
	font-size: 15px;
	color: #111111;
	text-transform: uppercase;
	letter-spacing: 2px;
	background: #f2f2f2;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
	margin-right: 6px;
	margin-bottom: 5px;
	padding: 14px 22px 12px;
}

.pagination__links a:last-child {
	margin-right: 0;
}

.pagination__links a:hover {
	background: #290849;
	color: #ffffff;
}

/*---------------------
  Footer
-----------------------*/

.footer {
	padding-top: 300px;
	padding-bottom: 60px;
	margin-top: -547px;
	height: 549px;
}

.footer.footer--normal {
	margin-top: 0;
}

.footer__address {
	margin-bottom: 50px;
}

.footer__address ul li {
	list-style: none;
	padding-left: 70px;
	position: relative;
	margin-bottom: 30px;
}

.footer__address ul li:last-child {
	margin-bottom: 0;
}

.footer__address ul li i {
	font-size: 18px;
	color: #94abb3;
	height: 50px;
	width: 50px;
	background: #ffffff;
	border-radius: 50%;
	line-height: 50px;
	text-align: center;
	position: absolute;
	left: 0;
	top: 0;
}

.footer__address ul li p {
	color: #ffffff;
	opacity: 0.7;
	margin-bottom: 8px;
}

.footer__address ul li h6 {
	font-size: 15px;
	font-weight: 700;
	color: #ffffff;
}

.footer__social {
	text-align: center;
	position: relative;
	margin-bottom: 50px;
}

.footer__social::before {
	position: absolute;
	left: -46px;
	top: 3px;
	width: 1px;
	height: 130px;
	background: rgba(255, 255, 255, 0.2);
	content: "";
}

.footer__social::after {
	position: absolute;
	right: -50px;
	top: 3px;
	width: 1px;
	height: 130px;
	background: rgba(255, 255, 255, 0.2);
	content: "";
}

.footer__social h2 {
	color: #ffffff;
	font-weight: 700;
	margin-bottom: 25px;
}

.footer__social .footer__social__links a {
	font-size: 18px;
	color: #a6e0cf;
	height: 50px;
	width: 50px;
	background: #ffffff;
	border-radius: 50%;
	line-height: 50px;
	text-align: center;
	display: inline-block;
	margin-right: 10px;
}

.footer__social .footer__social__links a:last-child {
	margin-right: 0;
}

.footer__newslatter {
	margin-bottom: 50px;
}

.footer__newslatter h4 {
	font-size: 26px;
	color: #ffffff;
	font-weight: 700;
	margin-bottom: 30px;
}

.footer__newslatter form {
	position: relative;
}

.footer__newslatter form input {
	height: 50px;
	font-size: 15px;
	color: #ffffff;
	width: 100%;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.2);
	padding-left: 20px;
}

.footer__newslatter form input::-webkit-input-placeholder {
	color: #ffffff;
}

.footer__newslatter form input::-moz-placeholder {
	color: #ffffff;
}

.footer__newslatter form input:-ms-input-placeholder {
	color: #ffffff;
}

.footer__newslatter form input::-ms-input-placeholder {
	color: #ffffff;
}

.footer__newslatter form input::placeholder {
	color: #ffffff;
}

.footer__newslatter form button {
	font-size: 18px;
	color: #15a177;
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	padding: 0 16px;
	background: #ffffff;
	border: none;
}

.footer__copyright__text {
	text-align: center;
}

.footer__copyright__text p {
	color: #999999;
}

.footer__copyright__text a {
	color: #999999;
	text-decoration: underline;
}

.footer__copyright__text a:hover {
	color: #ffffff;
}

.footer__copyright__text i {
	color: #c11;
}

/*---------------------
  Breadcrumb
-----------------------*/

.breadcrumb-option {
	padding-top: 35px;
}

.breadcrumb__links a {
	font-size: 15px;
	color: #111111;
	margin-right: 18px;
	display: inline-block;
	position: relative;
}

.breadcrumb__links a:after {
	position: absolute;
	right: -14px;
	top: 0;
	content: "|";
	color: #888888;
}

.breadcrumb__links a i {
	margin-right: 5px;
}

.breadcrumb__links span {
	font-size: 15px;
	color: #888888;
	display: inline-block;
}

/*---------------------
  About
-----------------------*/

.about {
	padding-top: 0;
}

.about.about--page {
	padding-top: 80px;
	padding-bottom: 80px;
}

.about.about--page .section-title {
	margin-bottom: 28px;
}

.about.about--page .section-title h2 {
	line-height: 55px;
}

.about.about--page .about__text {
	padding-top: 15px;
}

.about.about--page .about__text p {
	color: #111111;
}

.about__text {
	padding-top: 110px;
}

.about__text p {
	margin-bottom: 35px;
}

/*---------------------
  Skills
-----------------------*/

.skills {
	padding-bottom: 0;
	padding-top: 80px;
}

.skills__content {
	background: #5c00ce;
	height: 500px;
	padding: 100px 70px 60px;
}

.skills__content .section-title h2 {
	color: #ffffff;
}

.skills__content .section-title h1 {
	color: #ffffff;
	opacity: 0.1;
	text-align: center;
}

.skills__content p {
	color: #ffffff;
	margin-bottom: 32px;
}

.skill__bar__item {
	margin-bottom: 20px;
}

.skill__bar__item p {
	font-size: 15px;
	font-weight: 500;
	color: #ffffff;
	margin-bottom: 10px;
}

.skill__bar__item .barfiller {
	width: 100%;
	height: 5px;
	background: rgba(255, 255, 255, 0.2);
	border: none;
	margin-bottom: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.skill__bar__item .barfiller .tip {
	margin-top: -32px;
	padding: 0;
	font-size: 15px;
	color: #fff;
	background: transparent;
}

.skill__bar__item .barfiller .tip:after {
	display: none;
}

.skills__video {
	height: 500px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.skills__video .play-btn {
	font-size: 26px;
	color: #5c00ce;
	height: 90px;
	width: 90px;
	border-radius: 50%;
	background: rgba(117, 31, 221, 0.3);
	display: inline-block;
	line-height: 90px;
	text-align: center;
	position: relative;
	z-index: 1;
}

.skills__video .play-btn i {
	position: relative;
	top: 2px;
	left: 2px;
}

.skills__video .play-btn:after {
	position: absolute;
	left: 15px;
	top: 15px;
	height: 60px;
	width: 60px;
	background: #ffffff;
	border-radius: 50%;
	content: "";
	z-index: -1;
}

/*---------------------
  About Pic
-----------------------*/

.about-pic {
	overflow: hidden;
}

.about-pic .container-fluid {
	padding-right: 0;
}

.about-pic img {
	min-width: 100%;
	margin-bottom: 10px;
	padding-right: 10px;
}

/*---------------------
  About Services
-----------------------*/

.about-services {
	padding-bottom: 50px;
}

.about-services .section-title {
	margin-bottom: 60px;
}

.about__services__item {
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.about__services__item:hover {
	-webkit-box-shadow: 0px 3px 30px rgba(22, 41, 124, 0.1);
	box-shadow: 0px 3px 30px rgba(22, 41, 124, 0.1);
}

.about__services__item__pic {
	height: 240px;
	position: relative;
}

.about__services__item__pic .icon {
	height: 50px;
	width: 50px;
	background: #5c00ce;
	border-radius: 50%;
	line-height: 50px;
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: -25px;
}

.about__services__item__text {
	text-align: center;
	padding: 50px 10px 30px;
}

.about__services__item__text h4 {
	font-size: 26px;
	color: #111111;
	font-weight: 700;
	margin-bottom: 12px;
}

.about__services__item__text p {
	margin-bottom: 0;
}

/*---------------------
  Feature
-----------------------*/

.feature {
	padding-bottom: 70px;
}

.feature.feature--about .section-title span {
	color: #0071e4;
}

.feature.feature--about .feature__item {
	background: #f5f5f5;
}

.feature.feature--about .feature__item h5 {
	color: #111111;
}

.feature__text {
	padding-top: 80px;
}

.feature__text .section-title {
	margin-bottom: 20px;
}

.feature__text p {
	margin-bottom: 26px;
}

.feature__item {
	background: #0c2b4b;
	text-align: center;
	padding: 40px 10px 35px;
	margin-bottom: 30px;
}

.feature__item.right-column {
	margin-top: 120px;
}

.feature__item h5 {
	font-weight: 700;
	text-transform: uppercase;
	color: #ffffff;
	margin-top: 25px;
}

/*---------------------
  Services
-----------------------*/

.services {
	overflow: hidden;
}

.services__left {
	height: 640px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.services__left .play-btn {
	font-size: 26px;
	color: #ffffff;
	height: 90px;
	width: 90px;
	border-radius: 50%;
	background: -webkit-gradient(linear, left top, right top, from(rgba(127, 0, 173, 0.3)), to(rgba(93, 0, 206, 0.3)));
	background: -o-linear-gradient(left, rgba(127, 0, 173, 0.3), rgba(93, 0, 206, 0.3));
	background: linear-gradient(to right, rgba(127, 0, 173, 0.3), rgba(93, 0, 206, 0.3));
	display: inline-block;
	line-height: 90px;
	text-align: center;
	position: relative;
	z-index: 1;
}

.services__left .play-btn i {
	position: relative;
	top: 2px;
	left: 2px;
}

.services__left .play-btn:after {
	position: absolute;
	left: 15px;
	top: 15px;
	height: 60px;
	width: 60px;
	background: -webkit-gradient(linear, left top, right top, from(#235468), to(#15a177));
	background: -o-linear-gradient(left, #15a177, #235468);
	background: linear-gradient(to right, #15a177, #235468);
	border-radius: 50%;
	content: "";
	z-index: -1;
}

.services__list {
	margin: 0;
}

.service__item {
	background: #235468;
	height: 320px;
	padding: 70px 40px 40px 70px;
}

.service__item.deep-bg {
	background: #15a177;
}

.service__item h4 {
	font-size: 26px;
	color: #ffffff;
	font-weight: 700;
	margin-top: 25px;
	margin-bottom: 10px;
}

.service__item p {
	color: #ffffff;
	margin-bottom: 0;
}

/*---------------------
  Tours
-----------------------*/

.tours {
	padding-top: 150px;
	padding-bottom: 60px;
}

.tours__item__text {
	padding-right: 30px;
	margin-bottom: 100px;
}

.tours__item__text.tours__item__text--right {
	padding-left: 30px;
	padding-right: 0;
}

.tours__item__text h2 {
	font-size: 42px;
	color: #111111;
	text-transform: uppercase;
	margin-bottom: 24px;
}

.tours__item__text .tours__text__widget {
	overflow: hidden;
	border-bottom: 2px solid #f2f2f2;
	padding-bottom: 38px;
}

.tours__item__text .tours__text__widget ul {
	float: left;
}

.tours__item__text .tours__text__widget ul li {
	list-style: none;
	font-size: 15px;
	color: #111111;
	padding-left: 35px;
	position: relative;
	margin-bottom: 10px;
}

.tours__item__text .tours__text__widget ul li:last-child {
	margin-bottom: 0;
}

.tours__item__text .tours__text__widget ul li i {
	color: #5c00ce;
	position: absolute;
	left: 0;
	top: 3px;
}

.tours__item__text .tours__text__widget ul li span {
	display: inline-block;
	padding-right: 8px;
	position: relative;
	margin-right: 5px;
}

.tours__item__text .tours__text__widget ul li span:last-child {
	padding-right: 0;
	margin-right: 0;
}

.tours__item__text .tours__text__widget ul li span:last-child:after {
	display: none;
}

.tours__item__text .tours__text__widget ul li span:after {
	position: absolute;
	right: 0;
	top: 0;
	content: "|";
}

.tours__item__text .tours__text__widget .price {
	font-size: 18px;
	color: #ffffff;
	font-weight: 700;
	display: inline-block;
	padding: 14px 25px 12px 30px;
	background: #5c00ce;
	float: right;
}

.tours__item__text .tours__text__desc {
	padding-top: 40px;
	margin-bottom: 65px;
}

.tours__item__text .tours__text__desc p {
	color: #111111;
	margin-bottom: 20px;
}

.tours__item__text .tours__text__desc p:last-child {
	margin-bottom: 0;
}

.tours__item__pic {
	position: relative;
	z-index: 1;
	padding-right: 50px;
	margin-bottom: 110px;
	padding-left: 30px;
}

.tours__item__pic.tours__item__pic--left {
	padding-left: 50px;
	padding-right: 0;
}

.tours__item__pic.tours__item__pic--left:after {
	left: 0;
}

.tours__item__pic.tours__item__pic--last {
	margin-bottom: 0;
}

.tours__item__pic:after {
	position: absolute;
	left: 50px;
	top: -50px;
	width: calc(100% - 50px);
	height: 100%;
	border: 20px solid rgba(9, 53, 247, 0.1);
	content: "";
	z-index: -1;
}

.tours__item__pic img {
	min-width: 100%;
}

/*---------------------
  Videos
-----------------------*/

.videos {
	padding-bottom: 90px;
}

.videos .section-title {
	margin-bottom: 70px;
}

.videos__large__item {
	height: 585px;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin-bottom: 30px;
}

.videos__large__item .play-btn {
	height: 50px;
	width: 50px;
	background: #15a177;
	border-radius: 50%;
	font-size: 18px;
	line-height: 50px;
	text-align: center;
	display: inline-block;
	color: #ffffff;
}

.videos__large__item__text {
	background: rgba(7, 14, 38, 0.7);
	padding: 25px 30px 25px;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
}

.videos__large__item__text h4 {
	color: #ffffff;
	font-weight: 700;
}

.videos__large__item__text ul li {
	font-size: 13px;
	list-style: none;
	display: inline-block;
	margin-right: 18px;
	color: #ffffff;
	position: relative;
}

.videos__large__item__text ul li:after {
	position: absolute;
	right: -12px;
	top: 2px;
	height: 17px;
	width: 1px;
	background: #ffffff;
	content: "";
}

.videos__large__item__text ul li:last-child {
	margin-right: 0;
}

.videos__large__item__text ul li:last-child:after {
	display: none;
}

.videos__item__pic {
	height: 180px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.videos__item__pic .play-btn {
	height: 40px;
	width: 40px;
	background: #15a177;
	border-radius: 50%;
	font-size: 16px;
	line-height: 40px;
	text-align: center;
	display: inline-block;
	color: #ffffff;
}

.videos__item__text {
	padding-top: 20px;
}

.videos__item__text h5 {
	color: #ffffff;
	font-weight: 700;
	line-height: 26px;
	margin-bottom: 5px;
}

.videos__item__text ul li {
	font-size: 13px;
	list-style: none;
	display: inline-block;
	margin-right: 18px;
	color: #15a177;
	position: relative;
}

.videos__item__text ul li:after {
	position: absolute;
	right: -12px;
	top: 2px;
	height: 17px;
	width: 1px;
	background: #888888;
	content: "";
}

.videos__item__text ul li:last-child {
	margin-right: 0;
	color: #888888;
}

.videos__item__text ul li:last-child:after {
	display: none;
}

.videos__slider .col-lg-3 {
	max-width: 100%;
}

.videos__slider.owl-carousel .owl-nav button {
	font-size: 18px;
	color: #888888;
	height: 50px;
	width: 25px;
	background: #ffffff;
	line-height: 50px;
	position: absolute;
	left: 15px;
	top: 22%;
}

.videos__slider.owl-carousel .owl-nav button.owl-next {
	left: auto;
	right: 15px;
}

/*---------------------
    Blog
-----------------------*/

.blog {
	padding-bottom: 60px;
}

.blog .section-title {
	margin-bottom: 80px;
}

.blog__large {
	margin-bottom: 45px;
	-webkit-box-shadow: 0px 3px 10px rgba(22, 41, 124, 0.1);
	box-shadow: 0px 3px 10px rgba(22, 41, 124, 0.1);
	margin-bottom: 50px;
}

.blog__large__pic {
	height: 370px;
	position: relative;
}

.blog__large__pic a {
	font-size: 16px;
	height: 40px;
	width: 40px;
	background: rgba(245, 245, 245, 0.3);
	border-radius: 50%;
	color: #ffffff;
	line-height: 40px;
	text-align: center;
	display: inline-block;
	position: absolute;
	right: 12px;
	bottom: 12px;
}

.blog__large__text {
	background: #ffffff;
	text-align: center;
	padding: 30px 40px 0;
}

.blog__large__text span {
	font-size: 13px;
	text-transform: uppercase;
	color: #5c00ce;
}

.blog__large__text h4 {
	color: #111111;
	font-weight: 700;
	line-height: 31px;
	margin-top: 5px;
	margin-bottom: 15px;
}

.blog__large__text p {
	margin-bottom: 40px;
}

.blog__large__widget {
	border-top: 1px solid #f2f2f2;
	padding: 15px 0 20px;
	text-align: left;
	margin: 0 30px;
}

.blog__large__widget .right__widget {
	text-align: right;
}

.blog__large__widget ul li {
	font-size: 13px;
	color: #888888;
	display: inline-block;
	list-style: none;
	margin-right: 20px;
	position: relative;
}

.blog__large__widget ul li span {
	color: #111111;
}

.blog__large__widget ul li:after {
	position: absolute;
	right: -14px;
	top: -2px;
	content: "|";
}

.blog__large__widget ul li:last-child {
	margin-right: 0;
}

.blog__large__widget ul li:last-child:after {
	display: none;
}

.blog__item {
	-webkit-box-shadow: 0px 3px 10px rgba(22, 41, 124, 0.1);
	box-shadow: 0px 3px 10px rgba(22, 41, 124, 0.1);
	margin-bottom: 50px;
}

.blog__item__pic img {
	min-width: 100%;
}

.blog__item__text {
	text-align: center;
	background: #ffffff;
	padding: 20px 20px 25px;
}

.blog__item__text span {
	font-size: 13px;
	text-transform: uppercase;
	color: #5c00ce;
}

.blog__item__text h5 {
	color: #111111;
	font-weight: 700;
	line-height: 26px;
	font-size: 20px;
	margin-top: 10px;
	margin-bottom: 12px;
}

.blog__item__text ul li {
	font-size: 13px;
	color: #888888;
	display: inline-block;
	list-style: none;
	margin-right: 20px;
	position: relative;
}

.blog__item__text ul li span {
	color: #111111;
}

.blog__item__text ul li:after {
	position: absolute;
	right: -14px;
	top: -2px;
	content: "|";
}

.blog__item__text ul li:last-child {
	margin-right: 0;
}

.blog__item__text ul li:last-child:after {
	display: none;
}

/*---------------------
  Blog Sidebar
-----------------------*/

.blog__sidebar__item {
	text-align: center;
	margin-bottom: 65px;
}

.blog__sidebar__item:last-child {
	margin-bottom: 0;
}

.blog__sidebar__item form input {
	height: 50px;
	font-size: 15px;
	color: #444444;
	padding-left: 20px;
	border: 1px solid #e1e1e1;
	width: 100%;
	margin-bottom: 20px;
}

.blog__sidebar__item form input::-webkit-input-placeholder {
	color: #444444;
}

.blog__sidebar__item form input::-moz-placeholder {
	color: #444444;
}

.blog__sidebar__item form input:-ms-input-placeholder {
	color: #444444;
}

.blog__sidebar__item form input::-ms-input-placeholder {
	color: #444444;
}

.blog__sidebar__item form input::placeholder {
	color: #444444;
}

.blog__sidebar__title {
	text-align: center;
	margin-bottom: 35px;
}

.blog__sidebar__title h4 {
	color: #111111;
	font-weight: 700;
	position: relative;
	padding-bottom: 20px;
}

.blog__sidebar__title h4::before {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	width: 70px;
	background: #e1e1e1;
	content: "";
	margin: 0 auto;
}

.blog__sidebar__social a {
	display: inline-block;
	font-size: 18px;
	color: #111111;
	width: 50px;
	height: 50px;
	background: #f2f2f2;
	border-radius: 50%;
	line-height: 50px;
	text-align: center;
	margin-right: 6px;
	margin-bottom: 5px;
}

.blog__sidebar__social a:last-child {
	margin-right: 6px;
}

.recent__item {
	display: block;
	overflow: hidden;
	margin-bottom: 25px;
	text-align: left;
}

.recent__item__pic {
	float: left;
	margin-right: 25px;
}

.recent__item__text {
	overflow: hidden;
}

.recent__item__text h6 {
	color: #111111;
	line-height: 21px;
	font-weight: 700;
}

.recent__item__text span {
	font-size: 13px;
	color: #888888;
}

/*---------------------
  Blog Details
-----------------------*/

.blog-details {
	padding-bottom: 60px;
	padding-top: 70px;
}

.blog__details__item {
	margin-bottom: 32px;
}

.blog__details__item__pic {
	height: 385px;
	position: relative;
}

.blog__details__item__pic a {
	font-size: 16px;
	height: 40px;
	width: 40px;
	background: rgba(245, 245, 245, 0.3);
	border-radius: 50%;
	color: #ffffff;
	line-height: 40px;
	text-align: center;
	display: inline-block;
	position: absolute;
	right: 12px;
	bottom: 12px;
}

.blog__details__item__text {
	background: #ffffff;
	padding-top: 30px;
}

.blog__details__item__text span {
	font-size: 13px;
	text-transform: uppercase;
	color: #5c00ce;
}

.blog__details__item__text h3 {
	color: #111111;
	font-weight: 700;
	line-height: 31px;
	margin-top: 5px;
	margin-bottom: 15px;
}

.blog__details__item__text p {
	margin-bottom: 40px;
}

.blog__details__item__widget {
	border-top: 1px solid #f2f2f2;
	padding-top: 15px;
	text-align: left;
}

.blog__details__item__widget ul li {
	font-size: 13px;
	color: #888888;
	display: inline-block;
	list-style: none;
	margin-right: 20px;
	position: relative;
}

.blog__details__item__widget ul li span {
	color: #111111;
}

.blog__details__item__widget ul li:after {
	position: absolute;
	right: -14px;
	top: -2px;
	content: "|";
}

.blog__details__item__widget ul li:last-child {
	margin-right: 0;
}

.blog__details__item__widget ul li:last-child:after {
	display: none;
}

.blog__details__desc {
	margin-bottom: 54px;
}

.blog__details__desc p {
	margin-bottom: 20px;
}

.blog__details__desc p:last-child {
	margin-bottom: 0;
}

.blog__details__quote {
	border: 1px solid #e1e1e1;
	padding: 35px 40px 35px 40px;
	position: relative;
	margin-bottom: 35px;
}

.blog__details__quote p {
	font-size: 18px;
	color: #111111;
	line-height: 31px;
}

.blog__details__quote h6 {
	font-size: 15px;
	color: #888888;
	text-transform: uppercase;
}

.blog__details__quote i {
	font-size: 36px;
	color: #5c00ce;
	position: absolute;
	right: 40px;
	bottom: 35px;
}

.blog__details__tags {
	padding-top: 20px;
	margin-bottom: 60px;
}

.blog__details__tags a {
	display: inline-block;
	font-size: 15px;
	color: #444444;
	padding: 12px 20px 10px;
	background: #f5f5f5;
	margin-right: 10px;
}

.blog__details__tags a:last-child {
	margin-right: 0;
}

.blog__details__option {
	margin-bottom: 60px;
}

.blog__option__btn {
	display: block;
	overflow: hidden;
}

.blog__option__btn.blog__option__btn--next {
	text-align: right;
}

.blog__option__btn.blog__option__btn--next .option__btn__name i {
	margin-right: 0;
	margin-left: 6px;
}

.blog__option__btn.blog__option__btn--next .blog__option__btn__item {
	overflow: hidden;
}

.blog__option__btn.blog__option__btn--next .blog__option__btn__item .blog__option__btn__pic {
	float: right;
	margin-right: 0;
	margin-left: 30px;
}

.blog__option__btn .option__btn__name {
	font-size: 15px;
	color: #444444;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 25px;
}

.blog__option__btn .option__btn__name i {
	font-size: 18px;
	font-weight: 700;
	margin-right: 6px;
}

.blog__option__btn__pic {
	float: left;
	margin-right: 26px;
}

.blog__option__btn__text {
	overflow: hidden;
}

.blog__option__btn__text h6 {
	color: #111111;
	font-weight: 700;
	line-height: 21px;
}

.blog__option__btn__text span {
	color: #888888;
	font-size: 13px;
}

.blog__details__services {
	margin-bottom: 30px;
}

.blog__details__services__title,
.blog__details__form__title {
	text-align: center;
	margin-bottom: 30px;
}

.blog__details__services__title h4,
.blog__details__form__title h4 {
	color: #111111;
	font-weight: 700;
	position: relative;
	padding-bottom: 20px;
	font-size: 26px;
}

.blog__details__services__title h4::before,
.blog__details__form__title h4::before {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	width: 70px;
	background: #e1e1e1;
	content: "";
	margin: 0 auto;
}

.blog__details__services__item {
	-webkit-box-shadow: 0px 5px 15px rgba(0, 61, 85, 0.07);
	box-shadow: 0px 5px 15px rgba(0, 61, 85, 0.07);
	margin-bottom: 30px;
}

.blog__details__services__item__pic img {
	min-width: 100%;
}

.blog__details__services__item__text {
	padding: 15px 20px 10px;
}

.blog__details__services__item__text h6 a {
	font-size: 17px;
	color: #111111;
	font-weight: 700;
	line-height: 22px;
}

.blog__details__services__item__text span {
	color: #888888;
	font-size: 13px;
}

.blog__details__form form .input__list,
.contact__form form .input__list {
	margin-right: -20px;
	overflow: hidden;
}

.blog__details__form form .input__list input,
.contact__form form .input__list input {
	height: 50px;
	font-size: 13px;
	color: #666666;
	padding-left: 20px;
	border: 1px solid #e1e1e1;
	width: calc(33.33% - 20px);
	margin-bottom: 20px;
	margin-right: 16px;
}

.blog__details__form form .input__list input::-webkit-input-placeholder,
.contact__form form .input__list input::-webkit-input-placeholder {
	color: #666666;
}

.blog__details__form form .input__list input::-moz-placeholder,
.contact__form form .input__list input::-moz-placeholder {
	color: #666666;
}

.blog__details__form form .input__list input:-ms-input-placeholder,
.contact__form form .input__list input:-ms-input-placeholder {
	color: #666666;
}

.blog__details__form form .input__list input::-ms-input-placeholder,
.contact__form form .input__list input::-ms-input-placeholder {
	color: #666666;
}

.blog__details__form form .input__list input::placeholder,
.contact__form form .input__list input::placeholder {
	color: #666666;
}

.blog__details__form form textarea,
.contact__form form textarea {
	height: 120px;
	font-size: 13px;
	color: #666666;
	padding-left: 20px;
	padding-top: 12px;
	border: 1px solid #e1e1e1;
	width: 100%;
	margin-bottom: 14px;
	resize: none;
}

.blog__details__form form textarea::-webkit-input-placeholder,
.contact__form form textarea::-webkit-input-placeholder {
	color: #666666;
}

.blog__details__form form textarea::-moz-placeholder,
.contact__form form textarea::-moz-placeholder {
	color: #666666;
}

.blog__details__form form textarea:-ms-input-placeholder,
.contact__form form textarea:-ms-input-placeholder {
	color: #666666;
}

.blog__details__form form textarea::-ms-input-placeholder,
.contact__form form textarea::-ms-input-placeholder {
	color: #666666;
}

.blog__details__form form textarea::placeholder,
.contact__form form textarea::placeholder {
	color: #666666;
}

/*---------------------
  Map
-----------------------*/

.map {
	height: 585px;
	margin-top: 60px;
}

.map iframe {
	width: 100%;
}

/*---------------------
  Contact
-----------------------*/

.contact {
	padding-top: 70px;
	padding-bottom: 50px;
}

.contact__address .section-title {
	margin-bottom: 10px;
}

.contact__address .section-title h2 {
	text-transform: none;
}

.contact__address p {
	margin-bottom: 34px;
}

.contact__address ul li {
	list-style: none;
	padding-left: 100px;
	position: relative;
	margin-bottom: 30px;
}

.contact__address ul li:last-child {
	margin-bottom: 0;
}

.contact__address ul li i {
	font-size: 30px;
	height: 70px;
	width: 70px;
	background: #f5f5f5;
	border-radius: 50%;
	line-height: 70px;
	text-align: center;
	color: #15a177;
	position: absolute;
	left: 0;
	top: -4px;
}

.contact__address ul li h5 {
	font-size: 20px;
	color: #ffffff;
	font-weight: 700;
	margin-bottom: 10px;
}

.contact__address ul li p {
	margin-bottom: 0;
}

.contact__address ul li span {
	font-size: 15px;
	color: #c0bebe;
	display: inline-block;
	margin-right: 25px;
	position: relative;
}

.contact__address ul li span:after {
	position: absolute;
	right: -20px;
	top: -1px;
	content: ".";
	font-size: 39px;
	line-height: 0;
	border-radius: 50%;
}

.contact__address ul li span:last-child {
	margin-right: 0;
}

.contact__address ul li span:last-child:after {
	display: none;
}

.contact__form .section-title {
	margin-bottom: 10px;
}

.contact__form .section-title h2 {
	text-transform: none;
}

.contact__form p {
	margin-bottom: 34px;
}

/*--------------------------------- Responsive Media Quaries -----------------------------*/

@media only screen and (min-width: 1200px) {
	.container {
		max-width: 1170px;
	}
}

/* Medium Device = 1200px */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.header__menu ul li {
		margin-right: 18px;
	}
	.header__menu {
		margin-right: 30px;
	}
	.service__item {
		padding: 40px 30px 30px 40px;
	}
	.skills__content {
		padding: 60px 40px 40px;
	}
	.discography__item__text a {
		margin-right: 0;
		text-align: center;
		margin-bottom: 10px;
	}
}

/* Tablet Device = 768px */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.header__right__social {
		display: none;
	}
	.header__menu {
		margin-right: 0;
	}
	.header__menu ul li {
		margin-right: 15px;
	}
	.event .section-title:after {
		width: 560px;
	}
	.track__all {
		text-align: left;
		margin-bottom: 60px;
	}
	.track__content {
		margin-bottom: 120px;
	}
	.track__pic img {
		height: auto;
	}
	.footer {
		height: auto;
	}
	.about.about--page .about__text {
		padding-top: 30px;
	}
	.discography__item__text a {
		margin-right: 0;
		text-align: center;
		margin-bottom: 10px;
	}
	.blog__sidebar {
		padding-top: 50px;
	}
	.contact__address {
		margin-bottom: 40px;
	}
	.footer__social::before {
		display: none;
	}
	.footer__social::after {
		display: none;
	}
	.tours__item__pic {
		margin-bottom: 50px;
	}
	.tours__item__text {
		padding-right: 0;
	}
	.countdown {
		padding-bottom: 776px;
	}
	.footer {
		margin-top: -740px;
		background-position: top 0 left 19%;
	}
}

/* Wide Mobile = 480px */

@media only screen and (max-width: 767px) {
	.hero {
		padding-top: 190px;
		padding-bottom: 200px;
	}
	.event .section-title:after {
		display: none;
	}
	.track__all {
		text-align: left;
		margin-bottom: 60px;
	}
	.track__content {
		margin-bottom: 120px;
	}
	.track .p-0 {
		padding: 0 15px !important;
	}
	.track__pic img {
		height: auto;
	}
	.discography__item__text a {
		margin-right: 0;
		text-align: center;
		margin-bottom: 10px;
	}
	.blog__sidebar {
		padding-top: 50px;
	}
	.contact__address {
		margin-bottom: 40px;
	}
	.footer {
		height: auto;
	}
	.footer__social::before {
		display: none;
	}
	.footer__social::after {
		display: none;
	}
	.player_bars {
		width: 240px;
		margin-right: 20px;
	}
	.jp-seek-bar>div {
		width: 140px;
	}
	.countdown__item {
		margin-right: 0;
		margin-bottom: 30px;
		width: 50%;
		float: left;
	}
	.footer__social {
		text-align: left;
	}
	.skills__content {
		height: auto;
	}
	.about.about--page .about__text {
		padding-top: 30px;
	}
	.tours__item__pic {
		margin-bottom: 50px;
	}
	.blog__large__widget ul {
		text-align: center;
	}
	.blog__large__widget .right__widget {
		text-align: center;
	}
	.blog__option__btn {
		margin-bottom: 30px;
	}
	.blog__details__form form .input__list,
	.contact__form form .input__list {
		margin-right: 0;
		overflow: visible;
	}
	.blog__details__form form .input__list input,
	.contact__form form .input__list input {
		width: 100%;
		margin-right: 0;
	}
	.header__nav {
		display: none;
	}
	.header .container {
		position: relative;
	}
	.slicknav_btn {
		position: absolute;
		right: 15px;
		top: 25px;
		margin: 0;
		border-radius: 0;
		padding: 12px 15px;
		float: none;
		background: #5c00ce;
	}
	.slicknav_nav {
		position: absolute;
		left: 0;
		top: 90px;
		background: #222;
		width: 100%;
	}
	.slicknav_menu {
		background: transparent;
		padding: 0;
		display: block;
	}
	.slicknav_nav ul {
		margin: 0;
		padding: 5px 0;
	}
	.slicknav_nav .slicknav_row,
	.slicknav_nav a {
		padding: 10px 28px;
		margin: 0;
	}
	.slicknav_nav a:hover {
		border-radius: 0;
		background: #5c00ce;
		color: #ffffff;
	}
	.slicknav_nav .slicknav_row:hover {
		border-radius: 0;
		background: #5c00ce;
		color: #ffffff;
	}
	.service__item {
		height: auto;
	}
	.tours__item__text {
		padding-right: 0;
	}
	.countdown {
		padding-bottom: 940px;
	}
	.footer {
		margin-top: -940px;
		background-position: top 0 left 19%;
	}
}

/* Small Device = 320px */

@media only screen and (max-width: 479px) {
	.section-title h1 {
		top: -40px;
		font-size: 79px;
		line-height: 0.8;
	}
	.hero__text h1 {
		font-size: 70px;
	}
	.videos {
		padding-bottom: 0;
	}
	.countdown__text h1 {
		font-size: 50px;
	}
	.single_player_container h4 {
		font-size: 16px;
	}
	.player_bars {
		width: 150px;
		margin-right: 10px;
	}
	.player_controls_box {
		margin-right: 10px;
	}
	.jp-volume-controls {
		width: 68px;
		padding-left: 23px;
	}
	.jp-volume-bar {
		width: 42px;
	}
	.jp-seek-bar>div {
		width: 55px;
	}
	.service__item {
		height: auto;
		padding: 40px 40px 40px 40px;
	}
	.skills__content {
		height: auto;
		padding: 80px 25px 40px;
	}
	.tours__item__text .tours__text__widget ul {
		float: none;
		margin-bottom: 30px;
	}
	.tours__item__text .tours__text__widget .price {
		float: none;
	}
	.tours__item__pic {
		padding-left: 0;
	}
	.tours__item__text.tours__item__text--right {
		padding-left: 0;
	}
	.blog__large__text {
		padding: 30px 20px 0;
	}
	.blog__large__widget {
		margin: 0;
	}
	.blog__details__tags a {
		margin-bottom: 10px;
	}
	.countdown {
		padding-bottom: 980px;
	}
	.footer {
		margin-top: -970px;
		background-position: top 0 left 19%;
	}
}
/* Clickable hero */
.hero-click-area {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* Canvas where the background image breaks */
.shatter-canvas-container {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

/* Slight neon glow for shards */
.shard-glow {
    filter: drop-shadow(0 0 4px #15a177);
}

/* Play button look */
.hero-play-trigger {
    margin-top: 20px;
    background: rgba(252, 254, 254, 0.08);
    border: 2px solid #15a177;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    color: #fcfefe;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 20px rgba(21, 161, 119, 0.7);
    transition: transform .3s, box-shadow .3s, background .3s;
}

.hero-play-trigger:hover {
    transform: scale(1.12) translateY(-2px);
    background: rgba(21, 161, 119, 0.25);
    box-shadow: 0 0 35px rgba(21, 161, 119, 0.9);
}

/* Fullscreen YouTube overlay */
#yt-player-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.94);
    display: none;
    z-index: 9999;
}

#yt-player-close {
    position: absolute;
    top: 25px;
    right: 40px;
    font-size: 48px;
    color: #fcfefe;
    cursor: pointer;
    z-index: 10000;
    line-height: 1;
}

#yt-player {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80vw;
    height: 45vw; /* 16:9 ratio */
    max-width: 1200px;
    max-height: 675px;
    transform: translate(-50%, -50%);
}
#yt-player-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.62);
    display: none;
    z-index: 999999;
}

#yt-player {
    position: absolute;
    width: 100vw !important;
    height: 100vh !important;
    top: 0;
    left: 0;
}

#yt-player-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 60px;
    color: #fff;
    cursor: pointer;
    z-index: 9999999;
}
/* ============================================
   ULTRA PREMIUM HERO VISUALS
   ============================================ */

/* ---- Base Hero ---- */
.hero {
    position: relative;
    overflow: hidden;
}

/* Dark cinematic film layer */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.7),
        rgba(0,0,0,0.92)
    );
    backdrop-filter: blur(3px);
    z-index: 1;
}

/* FX Container */
.hero-effects {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
}

/* --------------------------------------------
   1. Cinematic Floating Particles (Canvas)
-------------------------------------------- */
#particlesCanvas {
    position: absolute;
    inset: 0;
    opacity: 0.7;
}

/* --------------------------------------------
   2. Neon Streak Lines (Cyberpunk Light Rays)
-------------------------------------------- */
.neon-streaks::before,
.neon-streaks::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 200%;
    top: -50%;
    background: linear-gradient(180deg, transparent, #ff00cc, transparent);
    animation: streakMove 6s linear infinite;
    opacity: 0.25;
}

.neon-streaks::after {
    left: 70%;
    animation-delay: 2s;
}
.neon-streaks::before {
    left: 30%;
}

@keyframes streakMove {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

/* --------------------------------------------
   3. Bokeh Floating Lights
-------------------------------------------- */
.bokeh-lights::before,
.bokeh-lights::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,0,140,0.4), transparent 70%);
    border-radius: 50%;
    filter: blur(20px);
    animation: bokehFloat 10s infinite ease-in-out;
}

.bokeh-lights::before { top: 20%; left: 10%; }
.bokeh-lights::after { bottom: 10%; right: 15%; animation-delay: 4s; }

@keyframes bokehFloat {
    0%,100% { transform: translateY(0) scale(1); opacity: 0.6; }
    50%     { transform: translateY(-40px) scale(1.3); opacity: 1; }
}

/* --------------------------------------------
   4. Holographic Grid (Futuristic)
-------------------------------------------- */
.holo-grid {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(#ffffff15 1px, transparent 1px),
        linear-gradient(90deg, #ffffff15 1px, transparent 1px);
    background-size: 80px 80px;
    animation: holoMove 20s linear infinite;
    opacity: 0.12;
}

@keyframes holoMove {
    0% { transform: translateY(0); }
    100% { transform: translateY(80px); }
}

/* --------------------------------------------
   5. Lens Flare
-------------------------------------------- */
.lens-flare {
    position: absolute;
    width: 500px;
    height: 250px;
    background: radial-gradient(
        circle,
        rgba(255, 120, 255, 0.25),
        transparent 70%
    );
    top: -10%;
    right: 25%;
    filter: blur(40px);
    animation: flarePulse 6s infinite ease-in-out;
    opacity: 0.6;
}

@keyframes flarePulse {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.3); }
}

/* --------------------------------------------
   Hero Text Glassmorphism
-------------------------------------------- */
.hero__text {
    position: relative;
    z-index: 3;
    padding: 40px;
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(12px);
    box-shadow: 0 0 40px rgba(43, 255, 0, 0.25);
    animation: fadeUp 1.5s ease-out forwards;
    opacity: 0;
}

/* Fade-up animation */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Title glow */
.hero__text h1 {
    color: #fff;
    text-shadow: 0 0 20px #235468, 0 0 40px #15a177;
    animation: glowTitle 4s ease-in-out infinite;
}

@keyframes glowTitle {
    0%,100% { text-shadow: 0 0 20px #235468; }
    50% { text-shadow: 0 0 40px #15a177; }
}
/* ==== CSS for the video carousel === */
.hero-video-carousel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* updated code */
/* Enable 3D space */
.event__slider .owl-stage-outer {
    overflow: visible !important;
    perspective: 2000px;
}

.event__item {
    width: 340px;
    height: 480px;
    border-radius: 28px;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: 0.6s ease;
}
.event {
    position: relative;
    background: #050509; /* deep cinema black */
    overflow: hidden;
}

.cinema-drone-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
}

#droneCanvas {
    width: 100%;
    height: 100%;
    display: block;
    filter: blur(0.6px) brightness(1.3);
}
/* Light sweep element */
.card-light {
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(115deg, rgba(255,255,255,0.45), rgba(255,255,255,0));
    transform: skewX(-25deg);
    pointer-events: none;
    opacity: 0;
    transition: 0.8s ease;
}
.event__item {
    position: relative;
    overflow: hidden;
    transform-origin: top center;
}
.card-shards {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 9999;
}

.shard {
    position: absolute;
    background-size: cover;
    background-position: center;
    will-change: transform, opacity;
}

/* updated code */
/* who we are */
/* DARK CINEMATIC BACKGROUND */
.dark-about-section {
    background: #020202;  /* deep black */
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

/* Soft vignette edges */
.dark-about-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.9));
    pointer-events: none;
}

.word-glow {
    opacity: 1; /* keep everything visible */
    display: inline-block;
    transition: 0.35s ease;
    color: #ddd; /* normal color */
}

.word-glow.active {
    color: #00ff62;
    text-shadow: 0 0 18px #15a177, 0 0 35px #235468;
}
/* 
@keyframes glowWord {
    0% {
        opacity: 0;
        color: rgba(255, 0, 150, 0.0);
        text-shadow: 0 0 0px rgba(255, 0, 200, 0);
        transform: translateY(8px);
    }
    60% {
        opacity: 1;
        color: #ff0099;
        text-shadow: 0 0 20px rgba(255, 0, 200, 0.7);
    }
    100% {
        opacity: 1;
        color: #ffffff;
        text-shadow: 0 0 10px rgba(255, 0, 200, 0.3);
        transform: translateY(0);
    }
} */

/* Headings bright glow */
.dark-about-section .section-title h1,
.dark-about-section .section-title h2 {
    color: #fff;
    text-shadow: 0 0 18px rgba(255,0,150,0.5);
}
.word {
    opacity: 0.25;
    transition: 0.4s ease;
}

.word.active {
    opacity: 1;
    color: #ff0099;
    text-shadow: 0 0 20px #ff0099, 0 0 40px #ff33cc;
}
.about-rotate {
    animation: zoomStart 2.8s ease forwards;
    transform-origin: center;
}

@keyframes zoomStart {
    0% {
        opacity: 0;
        transform: scale(0.4) rotate(0deg);
    }
    40% {
        opacity: 1;
        transform: scale(1.08) rotate(5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}
.about-image {
    width: 100%;
    max-width: 420px;
    transform-origin: center;
    animation:
        floatAir 6s ease-in-out infinite,
        glowPulse 4s ease-in-out infinite;
   
}

/* FLOAT ON AIR ANIMATION */
@keyframes floatAir {
    0%   { transform: translateY(0px) scale(1) rotate(0deg); }
    40%  { transform: translateY(-15px) scale(1.02) rotate(1deg); }
    70%  { transform: translateY(-7px) scale(1.015) rotate(-1deg); }
    100% { transform: translateY(0px) scale(1) rotate(0deg); }
}



/* who we are */

/* album and video */
/* Container animation */
.service__item p {
    display: inline-block;
}

.service__item p span {
    display: inline-block;
    opacity: 0;
    transform: translateY(-30px) rotate(5deg);
    animation: fallWords 1s ease forwards;
}

@keyframes fallWords {
    0% {
        opacity: 0;
        transform: translateY(-30px) rotate(10deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
}


/* album and video */
.youtube__item {
    transform-style: preserve-3d;
    will-change: transform, opacity;
}

.youtube__item__pic {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
    transition: transform 0.3s ease;
}

.youtube__item:hover .youtube__item__pic {
    transform: scale(1.05) rotateY(4deg);
}
/* Film reel framing */
.youtube__item__pic {
    position: relative;
    /* border: 1px solid #000; */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.45);
}

/* Shine light */
.youtube__item__pic::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0.0) 0%,
        rgba(255,255,255,0.35) 50%,
        rgba(255,255,255,0.0) 100%
    );
    transform: skewX(-20deg);
    pointer-events: none;
}

/* When shine runs */
.youtube__item.shine-active .youtube__item__pic::after {
    animation: shineMove 1.6s ease-out forwards;
}

@keyframes shineMove {
    0%   { left: -150%; }
    100% { left: 180%; }
}
.youtube-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.youtube-track {
    display: flex;
    gap: 40px;
    animation: moveLeft 22s linear infinite;
}

.youtube__item {
    min-width: 330px;
}

/* Infinite slide */
@keyframes moveLeft {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-150%); }
}

/* play track start */
/* ROTATING PLAY BUTTON */
.player_controls_box .jp-play {
    animation: playRotate 3s linear infinite;
}

@keyframes playRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}


/* AUTO-SCROLL AREA */
.track__content {
    height: 480px;          /* adjust to your layout */
    overflow: hidden;
    position: relative;
}

.track-scroll-inner {
    display: flex;
    flex-direction: column;
    gap: 30px;
    animation: autoScroll 20s linear infinite;
}

/* Up → Down infinite movement */
@keyframes autoScroll {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}

/* play track end */
/* TRACK SECTION START */
/* NEXT BUTTON */
.next-arrow {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    cursor: pointer;
    font-size: 34px;
    color: #fff;
    opacity: 0.8;
    transition: 0.3s;
}

.next-arrow:hover {
    opacity: 1;
    transform: translateX(-50%) scale(1.2);
}

/* WINDMILL OVERLAY WINGS */
.windmill-wing {
    position: fixed;
    top: 0;
    left: 0;
    width: 120vw;
    height: 120vh;
    background: #000;
    z-index: 999999;
    pointer-events: none;
    clip-path: polygon(50% 50%, 0 0, 100% 0);
    transform-origin: center;
    transform: rotate(0deg) scale(0);
    opacity: 0;
}
/* COMMON BUTTON STYLE */
.section-trigger-right,
.section-trigger-left {
    position: absolute;
    bottom: 40px;
    font-size: 32px;
    color: #fff;
    z-index: 200;
    cursor: pointer;
    opacity: 0;
    transition: 0.5s ease-out;
}

/* RIGHT BUTTON – SLIDES LEFT TO RIGHT */
.section-trigger-right {
    right: -120px;
}
.section-trigger-right.active {
    right: 40px;
    opacity: 1;
}

/* LEFT BUTTON – SLIDES RIGHT TO LEFT */
.section-trigger-left {
    left: -120px;
}
.section-trigger-left.active {
    left: 40px;
    opacity: 1;
}

/* Hover FX */
.section-trigger-right:hover,
.section-trigger-left:hover {
    transform: scale(1.2);
    color: #ff0066;
}


/* TRACK SECTION END */
.autoplay-player iframe {
    width: 100%;
    height: 400px;
    border: none;
    border-radius: 12px;
    margin-top: 30px;
    box-shadow: 0 0 25px rgba(0,0,0,0.4);
}

/* track effect start */
/* Container */
.music-glow-box {
    position: relative;
    display: inline-block;
    overflow: visible;
}

/* Image with neon glow */
.music-glow-img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 0 25px #15a177, 0 0 60px #15a177;
    animation: musicPulse 2.5s infinite ease-in-out;
}

/* Pulse effect */
@keyframes musicPulse {
    0% { box-shadow: 0 0 20px #15a177, 0 0 50px #15a177; }
    50% { box-shadow: 0 0 35px #235468, 0 0 80px #235468; }
    100% { box-shadow: 0 0 20px #15a177, 0 0 50px #15a177; }
}

/* Music Notes */
.music-note {
    position: absolute;
    font-size: 32px;
    color: #ffffff;
    opacity: 0;
    animation: floatNote 4s linear infinite;
    filter: drop-shadow(0 0 8px #ff66cc);
    font-weight: bold;
}

/* Unique positions */
.note1 { left: 10%; bottom: 5%; animation-delay: 0s; }
.note2 { left: 75%; bottom: 10%; animation-delay: 1s; }
.note3 { left: 50%; bottom: 0%; animation-delay: 2s; }
.note4 { left: 30%; bottom: 12%; animation-delay: 1.5s; }

/* Floating animation */
@keyframes floatNote {
    0% {
        transform: translateY(0) scale(0.7);
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        transform: translateY(-80px) scale(1.3);
        opacity: 0;
    }
}



/* =====================================================
🔥 FIX MOBILE MENU & MAKE FULLY VISIBLE
===================================================== */
@media (max-width: 991px) {

    /* Remove clipping from header */
    .header {
        overflow: visible !important;
    }

    /* Mobile container fix */
    #mobile-menu-wrap {
        position: relative !important;
        z-index: 999999999 !important;
    }

    /* SlickNav main container */
    .slicknav_menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 999999999 !important;
        background: rgba(0, 0, 0, 0.95) !important;
        padding-top: 80px !important;   /* space for header */
    }

    /* Menu nav list */
    .slicknav_nav {
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
        padding-bottom: 40px !important;
    }

    /* Menu items */
    .slicknav_nav a {
        font-size: 20px !important;
        padding: 16px 25px !important;
        color: #fff !important;
        border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    }

    /* Hamburger button */
    .slicknav_btn {
        position: fixed !important;
        right: 20px !important;
        top: 25px !important;
        z-index: 999999999 !important;
        background: #5c00ce !important;
        border-radius: 8px !important;
        padding: 12px 14px !important;
    }

    /* Hero & popup no longer block menu */
    .hero,
    .hero * {
        z-index: 1 !important;
    }

    #yt-popup {
        z-index: 10 !important;
    }
}




/* =====================================================
🔥 MENU STYLES (Desktop)
===================================================== */

/* =====================================================
✨ SOCIAL ICONS
===================================================== */
.header__right__social a {
    color: #15a177;
    margin-left: 12px;
    font-size: 18px;
    transition: 0.3s ease;
}

.header__right__social a:hover {
    color: #ff0059;
    transform: translateY(-4px) scale(1.15);
    text-shadow: 0 0 15px #ff0059;
}


/* FIX: Show full mobile menu above everything */
@media (max-width: 991px) {

    /* Force menu to the top of page */
    #mobile-menu-wrap,
    .slicknav_menu,
    .slicknav_nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 999999999 !important;
        background: rgba(0,0,0,0.95) !important;
        max-height: 100vh !important;
        overflow-y: auto !important; /* menu scrollable */
        padding-top: 70px !important; /* space for header */
    }

    /* Fix the toggle button */
    .slicknav_btn {
        z-index: 999999999 !important;
        position: fixed !important;
        right: 15px !important;
        top: 20px !important;
    }

    /* Make menu links visible */
    .slicknav_nav a {
        font-size: 20px;
        padding: 16px 25px !important;
        color: #fff !important;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    /* Remove overlapping hero layers */
    .hero,
    .hero * {
        z-index: 1 !important;
    }

    /* Remove popups blocking the menu */
    #yt-popup {
        z-index: 10 !important;
    }
}
/* ==========================================
   🔥 MOBILE CLOSE BUTTON (WORKING)
========================================== */
#mobile-close-btn {
    position: absolute;
    top: 15px; 
    right: 15px;
    z-index: 999999999;
    
    font-size: 24px;
    color: #fff;
    font-weight: bold;

    background: #ff0059;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;

    border-radius: 8px;
    cursor: pointer;

    box-shadow: 0 0 12px rgba(255,0,90,0.6);
    transition: 0.25s ease-in-out;
}

/* Hover */
#mobile-close-btn:hover {
    transform: scale(1.15) rotate(8deg);
    background: #15a177;
}

/* about page */
.rain-text {
    position: relative;
    min-height: 4.2em;           /* adjust to match paragraph height */
    display: block;
    text-align: justify;         /* important for full justification */
    text-justify: inter-word;
    overflow: hidden;
    line-height: 1.6;
    margin: 0 0 1.2em 0;
    color: #fcfefe;              /* you can change color */
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
    /* Force last line to justify by adding an inline-block that fills the line */
}
.rain-text:after {
    content: "";
    display: inline-block;
    width: 100%;
}

/* single word styling */
.rain-text .word {
    display: inline-block;       /* allows transform while preserving normal spacing */
    white-space: pre;            /* keep the space we add as a separate text node */
    opacity: 0;
    transform: translateY(-36px);
    transition: transform 0.45s cubic-bezier(.2,.8,.2,1), opacity 0.45s;
}

/* slight landing bounce for realism */
.rain-text .word.land {
    transform: translateY(0) scaleY(1);
    opacity: 1;
}

/* optional subtle highlight when word lands */
.rain-text .word.land::after{
    content: "";
    display: inline-block;
    height: 6px;
    width: 6px;
    margin-left: 4px;
    border-radius: 50%;
    background: rgba(21,161,119,0.15); /* brand accent */
    vertical-align: middle;
    opacity: 0;
    animation: puff 0.6s ease-out;
}
@keyframes puff {
    0% { transform: scale(0.6); opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0; }
}
/* about pics */
.about-pic {
    position: relative;
    overflow: hidden;
    background: #000;
}

.about-pic::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, #ffffff, #15a177, #0a0a0a);
    background-size: 300% 300%;
    animation: bgMove 12s ease-in-out infinite;
    z-index: 0;
}

@keyframes bgMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
}

/* ensure images stay above bg */
.about-pic img {
    position: relative;
    z-index: 2;
}

/* about pics */
.typewriter {
    font-size: 15px;
    line-height: 1.7;
    text-align: justify;
    color: #000000;
    min-height: 120px; /* keeps layout stable */
    overflow: hidden;
    white-space: normal;
}
/* --- Container Fade-in --- */
.about-services .about__services__item {
    opacity: 0;
    transform: translateY(40px);
    transition: all .9s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
}

/* On reveal */
.about-services .about__services__item.show {
    opacity: 1;
    transform: translateY(0);
}

/* --- Card Style Upgrades --- */
.about__services__item {
    background: rgba(0, 255, 4, 0.02);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: transform .6s ease, box-shadow .6s ease;
}

/* Hover Lift */
.about__services__item:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 25px 60px rgba(1, 255, 145, 0.45);
}

/* --- Premium Glass Light Swipe --- */
.about__services__item::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.18), transparent);
    transform: skewX(-20deg);
    transition: .5s;
    pointer-events: none;
}

.about__services__item:hover::after {
    left: 150%;
    transition: .8s cubic-bezier(.22,1,.36,1);
}

/* Image container with parallax hover */
.about__services__item__pic {
    overflow: hidden;
    position: relative;
}

.about__services__item__pic img,
.about__services__item__pic.set-bg {
    transition: transform 1.2s cubic-bezier(.22,1,.36,1);
}

/* Parallax Zoom on Hover */
.about__services__item:hover .about__services__item__pic.set-bg {
    transform: scale(1.12);
}

/* --- Icon Glow --- */
.about__services__item .icon img {
    width: 55px;
    filter: drop-shadow(0px 0px 15px rgba(0, 255, 64, 0.3));
    transition: transform .4s ease;
}

.about__services__item:hover .icon img {
    transform: scale(1.15);
}

/* --- Text Reveal Animation (Your Typewriter Script Handles Text Typing) --- */
.typewriter {
    min-height: 140px;
    display: block;
    font-size: 15px;
    line-height: 1.7;
}

/* header start */
/* LOGO SHAKE ANIMATION */
@keyframes logoShake {
    0% { transform: rotate(0deg); }
    20% { transform: rotate(4deg); }
    40% { transform: rotate(-4deg); }
    60% { transform: rotate(4deg); }
    80% { transform: rotate(-4deg); }
    100% { transform: rotate(0deg); }
}

.header__logo img.shake {
    animation: logoShake 0.7s ease-in-out;
}

/* MENU SLIDE-IN + FADE-IN */
@keyframes menuShow {
    0% { transform: translateY(-40px); opacity: 0; }
    100% { transform: translateY(0px); opacity: 1; }
}

.header__menu,
.header__right__social {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity .5s ease, transform .5s ease;
}

.header__menu.show,
.header__right__social.show {
    opacity: 1;
    transform: translateY(0);
}

/* MENU HIDE (FADE-OUT) */
.header__menu.hide,
.header__right__social.hide {
    opacity: 0;
    transform: translateY(-20px);
}

/* header end */
/* Container */
.whatsapp-popup {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 9999;
}

/* The round WhatsApp icon button */
.whatsapp-btn {
    width: 55px;
    height: 55px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(37,211,102,0.4);
    transition: 0.3s ease;
}

.whatsapp-btn:hover {
    transform: scale(1.1);
}

/* Hidden popup panel */
.whatsapp-panel {
    width: 260px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0px 8px 20px rgba(0,0,0,0.2);
    position: absolute;
    bottom: 70px;
    right: 0;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: all .35s ease;
}

/* Open state */
.whatsapp-panel.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Header */
.wp-header {
    background: #25D366;
    color: #fff;
    padding: 12px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wp-header button {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

/* Body */
.wp-body {
    padding: 15px;
    text-align: center;
}

.wp-body p {
    font-size: 14px;
    margin-bottom: 15px;
}

#startWhatsappChat {
    background: #25D366;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    width: 100%;
    transition: .3s;
}

#startWhatsappChat:hover {
    background: #1ebe5d;
}
/* ---------------------------------------------
   CINEMATIC DELUXE BACKGROUND (Particles + Fog)
--------------------------------------------- */
.discography {
    position: relative;
    background: #050505;
    overflow: hidden;
}

.discography::before {
    content: "";
    position: absolute;
    inset: 0;
   
    opacity: 0.07;
    animation: fogMove 25s linear infinite;
    pointer-events: none;
}

@keyframes fogMove {
    0% { transform: translateY(0); }
    100% { transform: translateY(-500px); }
}

/* ---------------------------------------------
   CARD MOTION (FULL DIV MOVES)
--------------------------------------------- */
.discography__item {
    position: relative;
    animation-duration: 12s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    transition: transform .6s ease, filter .6s ease;
}

/* First 3: Left -> Right */
.discography .row > div:nth-child(1) .discography__item,
.discography .row > div:nth-child(2) .discography__item,
.discography .row > div:nth-child(3) .discography__item {
    animation-name: moveLR;
}

@keyframes moveLR {
    0%   { transform: translateX(-40px); }
    50%  { transform: translateX(40px); }
    100% { transform: translateX(-40px); }
}

/* Last 3: Right -> Left */
.discography .row > div:nth-child(4) .discography__item,
.discography .row > div:nth-child(5) .discography__item,
.discography .row > div:nth-child(6) .discography__item {
    animation-name: moveRL;
}

@keyframes moveRL {
    0%   { transform: translateX(40px); }
    50%  { transform: translateX(-40px); }
    100% { transform: translateX(40px); }
}

/* ---------------------------------------------
   CARD DELUXE EFFECTS (Glow + Blur + Depth)
--------------------------------------------- */
.discography__item {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 0 rgba(255,255,255,0);
    filter: brightness(0.95);
    backdrop-filter: blur(3px);
}

/* Glow + Scale on Hover */
.discography__item:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 22px 60px rgba(255,255,255,0.08), 0 0 35px rgba(0,173,255,0.4);
    filter: brightness(1.18);
    z-index: 10;
}

/* ---------------------------------------------
   LENS FLARE SWEEP
--------------------------------------------- */
.discography__item::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 70%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-22deg);
    transition: .5s ease;
    opacity: 0;
}

.discography__item:hover::after {
    opacity: 1;
    animation: flareMove 0.8s ease;
}

@keyframes flareMove {
    0% { left: -150%; }
    100% { left: 160%; }
}

/* ---------------------------------------------
   3D Hover Tilt
--------------------------------------------- */
.discography__item:hover .discography__item__pic img {
    transform: scale(1.07);
}


/* videos  start */
/* ===========================================
   BACKGROUND FILM-GRAIN + FOG
=========================================== */
.videos {
    position: relative;
    overflow: hidden;
    background: #070707;
}

.videos::before {
    content: "";
    position: absolute;
    inset: 0;
 background: url("https://i.imgur.com/O7QG9Yr.png");
    mix-blend-mode: overlay;
    opacity: 0.06;
    pointer-events: none;
}

/* Moving Fog Layer */
.videos::after {
    content: "";
    position: absolute;
    inset: 0;

    opacity: 0.06;
    animation: fogUp 30s linear infinite;
    pointer-events: none;
}

@keyframes fogUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(-600px); }
}

/* ===========================================
   ULTRA – VIDEO CARDS
=========================================== */
.videos__item {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: .4s ease;
    background: rgba(255,255,255,0.02);
    backdrop-filter: blur(4px);
}

/* Depth Glow */
.videos__item:hover {
    box-shadow: 0 25px 80px rgba(0, 180, 255, 0.35),
                0 0 30px rgba(255, 255, 255, 0.2);
}

/* ===========================================
   LENS SWEEP
=========================================== */
.videos__item::after {
    content: "";
    position: absolute;
    top: 0;
    left: -170%;
    width: 70%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
    transition: .5s;
    opacity: 0;
}

.videos__item:hover::after {
    opacity: 1;
    animation: sweep 0.7s ease;
}

@keyframes sweep {
    0% { left: -170%; }
    100% { left: 170%; }
}

/* ===========================================
   ADVANCED 3D PARALLAX TILT
=========================================== */
.videos__item:hover {
    transform: perspective(1200px) rotateY(var(--tiltY)) rotateX(var(--tiltX)) scale(1.06);
}

/* ===========================================
   RGB GLITCH EFFECT ON HOVER
=========================================== */
.videos__item:hover img {
    filter: url('#chromaticAberration');
    opacity: 0.95;
}

/* ===========================================
   VIDEO AUTO-PLAY PREVIEW
=========================================== */
.videos__item video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: .4s ease;
}

/* On Hover — display preview video */
.videos__item:hover video {
    opacity: 1;
}


/* videos end */
/* contact page start */
.cinematicText {
    font-size: 16px;
    line-height: 1.7;
    text-align: justify;
    opacity: 0;
    transform: translateY(-40px);
    animation: fallIn 1s ease forwards;
    overflow: hidden;
    min-height: 140px;
}

/* Falling animation */
@keyframes fallIn {
    0% { opacity: 0; transform: translateY(-40px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Cursor blinking */
.cinematicText::after {
    content: "|";
    animation: blink .8s infinite;
    opacity: 0;
}

@keyframes blink {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* effects */
/* ===========================================
   🔥 ULTRA+ BACKGROUND LAYERS
=========================================== */
.contact {
    position: relative;
    background: #020202;
    overflow: hidden;
}

/* Layer 1 – Fog */
.contact::before {
    content: "";
    position: absolute;
    inset: 0;
    
    opacity: .06;
    animation: fogFlow 32s linear infinite;
    z-index: 1;
}

@keyframes fogFlow {
    0% { transform: translateY(0); }
    100% { transform: translateY(-700px); }
}

/* Layer 2 – Hologram Grid */
.contact::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(0,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,255,.08) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridMove 12s linear infinite;
    z-index: 2;
    mix-blend-mode: overlay;
}

@keyframes gridMove {
    0% { transform: translateX(0px) translateY(0px); }
    100% { transform: translateX(-60px) translateY(-60px); }
}

/* Layer 3 – Particle Rain */
.holo-rain {
    position: absolute;
    inset: 0;
    z-index: 3;
    /* background-image: url("https://i.imgur.com/wK4FhYF.png"); */
    opacity: 0.06;
    animation: rainDown 18s linear infinite;
}

@keyframes rainDown {
    0% { transform: translateY(-100px); }
    100% { transform: translateY(300px); }
}
/* ===========================================
   🔥 ULTRA+ CONTACT CARD
=========================================== */
.contact__address, .contact__form {
    position: relative;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(0,255,255,0.15);
    box-shadow: inset 0 0 40px rgba(0,255,255,0.05),
                0 25px 80px rgba(0,0,0,0.6);
    border-radius: 20px;
    padding: 40px;
    z-index: 10;
    animation: driftUp 1.6s ease forwards;
    backdrop-filter: blur(12px);
    transform: translateY(60px);
    opacity: 0;
}

@keyframes driftUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Cyberpunk RGB Edge Glow */
.contact__address:hover, .contact__form:hover {
    box-shadow:
        0 0 20px rgba(0,255,255,0.5),
        0 0 40px rgba(0,140,255,0.4),
        0 0 60px rgba(255,0,255,0.3);
    transition: .5s ease;
}

/* Laser Border Sweep */
.contact__address::after, .contact__form::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(120deg, transparent, rgba(0,255,255,0.3), transparent);
    transform: translateX(-150%) skewX(-20deg);
    opacity: 0;
    transition: .5s;
}

.contact__address:hover::after,
.contact__form:hover::after {
    opacity: 1;
    transform: translateX(150%) skewX(-20deg);
}
.contact__form input,
.contact__form textarea {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(0,255,255,0.25);
    backdrop-filter: blur(4px);
    color: #00eaff;
    transition: .3s ease;
}

.contact__form input:focus,
.contact__form textarea:focus {
    box-shadow: 0 0 12px rgba(0,255,255,0.5);
    border-color: #00ffff;
}
.site-btn {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #00ffff, #0077ff);
    border: none;
    color: #000;
    font-weight: 600;
    box-shadow: 0 0 25px rgba(0,255,255,0.4);
}

.site-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 0 35px rgba(0,255,255,0.7);
}

.site-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.4), transparent);
    transform: scale(0);
    opacity: 0;
    transition: .4s;
}

.site-btn:active::after {
    transform: scale(1.6);
    opacity: 1;
}

/* contact page end */
/* Modal styles */
.track-ad-modal { display: none; position: fixed; inset: 0; z-index: 10000; align-items:center; justify-content:center; }
.track-ad-backdrop { position:absolute; inset:0; background: rgba(0,0,0,0.6); }
.track-ad-content { position: relative; z-index:10001; max-width:900px; width:calc(100% - 40px); background:#fff; border-radius:12px; box-shadow:0 8px 40px rgba(0,0,0,0.4); padding:24px; }
.track-ad-close { position:absolute; top:12px; right:14px; background:transparent; border:none; font-size:36px; line-height:1; cursor:pointer; }
.track-ad-body { display:flex; gap:20px; align-items:center; }
.ad-artwork img { width:320px; height:320px; object-fit:cover; border-radius:8px; }
.ad-info { flex:1; }
#adTitle { margin:0 0 12px 0; font-size:24px; }
.ad-controls { margin-top:12px; }
.ad-controls button { margin-right:8px; padding:8px 12px; cursor:pointer; }

/* highlight playing track inside list (optional) */
.single_player_container.playing { box-shadow: 0 4px 18px rgba(92,0,206,0.15); transform: translateY(-4px); }

/* Keep modal accessible focus */
.track-ad-modal.show { display:flex; }

/* Optional: responsive */
@media(max-width:800px){
  .track-ad-body { flex-direction:column; align-items:center; }
  .ad-artwork img { width:80%; height:auto; }
}