/******************************************************************
  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;
}

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: #444444;
    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: #111111;
    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: #5c00ce;
    letter-spacing: 2px;
    text-decoration: none;
}

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

.site-btn {
    font-size: 15px;
    color: #ffffff;
    background: #5c00ce;
    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: rgba(42, 1, 74, 0.5);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9;
}

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

.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: #ffffff;
    display: block;
    padding: 6px 0;
    position: relative;
}

.header__menu ul li a:after {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #ffffff;
    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: #ffffff;
    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, .tours .section-title {
    margin-bottom: 10px;
    position: relative;
}

.event .section-title:after, .tours .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: #5c00ce;
    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: #5c00ce;
    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: #5c00ce;
    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;
}

/* Return to Home Button Styling */
.btn-return-home {
    background-color: #ffffff !important;
    color: #111111 !important;
    border: 2px solid #ffffff !important;
    padding: 12px 30px;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-return-home:hover {
    background-color: #f8f9fa !important;
    border-color: #f8f9fa !important;
    color: #111111 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/*---------------------
  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: #5c00ce;
    font-weight: 700;
}

.discography__item__text h4 {
    font-size: 22px;
    text-transform: uppercase;
    color: #111111;
    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: #5c00ce;
    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: #5c00ce;
    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: #5c00ce;
    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: #5c00ce;
}

.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(#7e00ad),
        to(#5c00ce)
    );
    background: -o-linear-gradient(left, #7e00ad, #5c00ce);
    background: linear-gradient(to right, #7e00ad, #5c00ce);
    border-radius: 50%;
    content: "";
    z-index: -1;
}

.services__list {
    margin: 0;
}

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

.service__item.deep-bg {
    background: #5400bc;
}

.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__text__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

@media (max-width: 576px) {
    .tours__text__buttons {
        flex-direction: column;
    }

    .tours__text__buttons .primary-btn {
        width: 100%;
        text-align: center;
        margin-left: 0 !important;
    }
}

.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: 20px;
}

.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;
    bottom: -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: #5c00ce;
    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: #5c00ce;
    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: #111111;
    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: #5c00ce;
    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: #5c00ce;
    position: absolute;
    left: 0;
    top: -4px;
}

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

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

.contact__address ul li span {
    font-size: 15px;
    color: #111111;
    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, .tours .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, .tours .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%;
    }
}

/*     Alert    */
.alert {
    border: 0px;
    position: relative;
    padding: 0.95rem 1.25rem;
    border-radius: 1px;
    color: inherit;
    background-color: #ffffff;
    -webkit-box-shadow: 1px 1px 14px 0px rgba(18, 38, 63, 0.26);
    -moz-box-shadow: 1px 1px 14px 0px rgba(18, 38, 63, 0.26);
    box-shadow: 1px 1px 14px 0px rgba(18, 38, 63, 0.26);
}
.alert [data-notify="icon"] {
    display: block;
}
.alert [data-notify="icon"]::before {
    line-height: 35px;
    font-size: 22px;
    display: block;
    left: 15px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    border-radius: 30px;
    text-align: center;
    color: #fff;
}
.alert [data-notify="title"] {
    display: block;
    color: #2b2b2b;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 5px;
}
.alert [data-notify="message"] {
    font-size: 13px;
    color: #908e8e;
}
.alert .close {
    background: rgba(255, 255, 255, 0.8);
    width: 25px;
    height: 25px;
    line-height: 25px;
    top: 12px !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*    Alert States    */
.alert-black {
    border-left: 4px solid #1a2035;
}
.alert-black [data-notify="icon"]:before {
    background: #1a2035;
}

.alert-primary {
    border-left: 4px solid #1572e8;
}
.alert-primary [data-notify="icon"]:before {
    background: #1572e8;
}

.alert-secondary {
    border-left: 4px solid #6861ce;
}
.alert-secondary [data-notify="icon"]:before {
    background: #6861ce;
}

.alert-info {
    border-left: 4px solid #48abf7;
}
.alert-info [data-notify="icon"]:before {
    background: #48abf7;
}

.alert-success {
    border-left: 4px solid #31ce36;
}
.alert-success [data-notify="icon"]:before {
    background: #31ce36;
}

.alert-warning {
    border-left: 4px solid #ffad46;
}
.alert-warning [data-notify="icon"]:before {
    background: #ffad46;
}

.alert-danger {
    border-left: 4px solid #f25961;
}
.alert-danger [data-notify="icon"]:before {
    background: #f25961;
}


.roadblock {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 9999;
    padding: 0;
    background: rgba(0, 0, 0, 0.5);
    -webkit-transition: all 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -moz-transition: all 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -o-transition: all 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: all 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.roadblock-wrap {
    height: 100%;
    width: 100%;
    overflow: auto;
    /* padding-top: 40px;
    padding-bottom: 40px; */
    display: flex;
    justify-content: center;
    place-items: center;
    /* transform: translate(0, 10%); */
}

.skip-ad {
    background: #0071e4;
    text-align: center;
    color: #fff;
    position: relative;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 50px;
    vertical-align: middle;
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}
.skip-ad:hover {
    color: #fff;
}

.roadblock-remove .roadblock {
    opacity: 0;

    -webkit-transition: all 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -moz-transition: all 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -o-transition: all 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition: all 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
    visibility: hidden;
}
.aligncenter {
    text-align: center;
}
.roadblock__notice .container {
    width: 100%;
}

/* Roadblock Container Styles - UIKit container replacement */
.roadblock-container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
}

.roadblock-container-xsmall {
    max-width: 600px;
}

@media (min-width: 640px) {
    .roadblock-container-xsmall {
        max-width: 600px;
    }
}

@media (min-width: 768px) {
    .roadblock-container-xsmall {
        max-width: 600px;
    }
}

@media (min-width: 1024px) {
    .roadblock-container-xsmall {
        max-width: 600px;
    }
}

.alignright {
    text-align: right;
    margin: 0;
}

.roadblock__notice {
    text-align: center;
    position: relative;
}

.roadblock__notice .alignright {
    position: absolute;
    right: -70px;
    top: 0;
}


.mobile-view {
    display: none;
}

.siteLogo img {
    max-width: 250px;
}


.roadblock__notice > div.desktop-view {
    height: 750px;
    overflow: auto;
}

.roadblock-logo img {
    width: 100px;
    margin-bottom: 25px;
}


.roadblock-1 {
    z-index: 9999999999;
}

/*---------------------
  Employee Zone Styles
-----------------------*/

/* Hero section with full viewport height */
.hero.hero-employee-zone {
    height: 100vh;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Centered container */
.hero-employee-zone .container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Hero text with white color and shadow */
.hero-employee-zone .hero__text {
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Scroll down icon cursor */
#scroll-down-icon {
    cursor: pointer;
}

/* Tours section padding */
.tours .row.tours-padding-top {
    padding-top: 30px;
}

/* Anthem player container */
#anthem-player-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px;
    border-radius: 8px;
    max-width: 300px;
}

/* Anthem player controls wrapper */
#anthem-player-container > div {
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Anthem toggle button */
#anthem-toggle-employee {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
}

/* Anthem status text */
#anthem-status-employee {
    font-size: 12px;
}

/* Anthem close button */
#anthem-close-employee {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    margin-left: auto;
}

/*---------------------
  Conference Pages Styles
-----------------------*/

/* Hero section with full viewport height for conference pages */
.hero.hero-conference {
    height: 100vh;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Hero Gallery Slider */
.hero-gallery-slider {
    overflow: hidden;
}

.hero-slider-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-slider-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 1;
}

.hero-slide.active {
    opacity: 1;
    z-index: 2;
}

.hero-slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* Centered container for conference pages */
.hero-conference .container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* Hero text with white color and shadow for conference pages */
.hero-conference .hero__text {
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Scroll indicator */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    animation: bounce 2s infinite;
    cursor: pointer;
}

.scroll-indicator i {
    color: #fff;
    font-size: 2rem;
}

.scroll-indicator:hover {
    transform: translateX(-50%) translateY(-5px);
}

/* Bounce animation */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* Tabs section */
.tabs-section {
    background: #fff;
    padding: 0;
    position: relative;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.tabs-section.sticky-navbar.fixed-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    animation: slideDown 0.3s ease;
    margin: 0 !important;
    box-shadow: 0 6px 30px rgba(0,0,0,0.2);
    background: rgba(255, 255, 255, 0.98) !important;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Conference tabs */
.conference-tabs {
    border: none;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 20px 0;
    margin: 0;
}

.conference-tabs .nav-link {
    position: relative;
    border: none;
    background: transparent;
    color: #667eea;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.conference-tabs .nav-link.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.conference-tabs .nav-link:hover:not(.active) {
    background: rgba(102, 126, 234, 0.1) !important;
    color: #667eea !important;
}

/* Tab content section */
.tab-content-section {
    padding: 60px 0;
    background: #f8f9fa;
}

.tab-content-section.has-fixed-nav {
    padding-top: 100px;
}

/* Floating back button */
.floating-back-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
    cursor: pointer;
}

.floating-back-btn:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 6px 30px rgba(102, 126, 234, 0.6);
    color: #fff;
    text-decoration: none;
}

.floating-back-btn:active {
    transform: translateY(-2px) scale(1.05);
}

@media (max-width: 768px) {
    .floating-back-btn {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }
    .floating-back-btn i {
        font-size: 1.2rem !important;
    }
}

/* Banner info */
.banner-info {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    animation: fadeInUp 1.4s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.info-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-item i {
    font-size: 1.5rem;
}

.info-item span {
    font-size: 1.1rem;
}

/* Card styles */
.card {
    border: none;
    border-radius: 15px;
    overflow: hidden;
}

.card.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Conference description */
.conference-description {
    line-height: 1.8;
    font-size: 16px;
    color: #555;
}

/* Modern PDF Viewer Styles */
.modern-pdf-viewer {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.pdf-viewer-toolbar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pdf-toolbar-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pdf-toolbar-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    text-decoration: none;
}

.pdf-toolbar-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: #fff;
    text-decoration: none;
}

.pdf-toolbar-btn:active {
    transform: translateY(0);
}

.pdf-toolbar-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.pdf-page-info,
.pdf-zoom-level {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 0 12px;
    min-width: 80px;
    text-align: center;
}

.pdf-viewer-container {
    position: relative;
    background: #525252;
    min-height: 600px;
    max-height: 80vh;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
}

.pdf-viewer-container.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    max-height: 100vh;
    border-radius: 0;
}

.pdf-viewer-container.fullscreen .pdf-viewer-toolbar {
    position: sticky;
    top: 0;
    z-index: 10;
}

#pdf-viewer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#pdf-viewer canvas {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    background: #fff;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
}

#pdf-viewer canvas:hover {
    transform: scale(1.01);
}

/* PDF Loading State */
.pdf-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    z-index: 5;
}

.pdf-loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.pdf-loading p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

/* PDF Error State */
.pdf-error {
    text-align: center;
    padding: 40px 20px;
    color: #fff;
}

.pdf-error i {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.7;
}

.pdf-error p {
    margin-bottom: 20px;
    font-size: 16px;
}

/* Responsive PDF Viewer */
@media (max-width: 768px) {
    .pdf-viewer-toolbar {
        padding: 10px 15px;
        gap: 10px;
    }

    .pdf-toolbar-group {
        gap: 5px;
    }

    .pdf-toolbar-btn {
        padding: 6px 10px;
        font-size: 12px;
        min-width: 32px;
        height: 32px;
    }

    .pdf-page-info,
    .pdf-zoom-level {
        font-size: 12px;
        padding: 0 8px;
        min-width: 60px;
    }

    .pdf-viewer-container {
        min-height: 400px;
        padding: 15px;
    }

    #pdf-viewer canvas {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 480px) {
    .pdf-viewer-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .pdf-toolbar-group {
        justify-content: center;
    }

    .pdf-viewer-container {
        min-height: 300px;
        padding: 10px;
    }
}

/* Button styles */
.btn {
    border-radius: 50px;
    padding: 10px 25px;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

/* Award card */
/* Modern Award Card Design */
.modern-award-card {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    border: 2px solid transparent;
}

.modern-award-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 16px 48px rgba(255, 215, 0, 0.25);
    border-color: rgba(255, 215, 0, 0.3);
}

.modern-award-card:active {
    transform: translateY(-4px) scale(1.01);
}

.award-card-header {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
}

.award-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.award-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-award-card:hover .award-image {
    transform: scale(1.15);
}

.award-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.modern-award-card:hover .award-image-overlay {
    opacity: 1;
}

.award-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
}

.award-placeholder i {
    color: #fff;
    font-size: 5rem;
    opacity: 0.9;
    animation: trophyPulse 2s ease-in-out infinite;
}

@keyframes trophyPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

.award-card-body {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 160px;
}

.award-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 16px 0;
    line-height: 1.4;
    transition: color 0.3s ease;
    letter-spacing: -0.02em;
}

.modern-award-card:hover .award-title {
    color: #667eea;
}

.award-winner-section {
    margin-top: auto;
    padding-top: 16px;
    border-top: 2px solid #f0f0f0;
}

.winner-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #fff;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 12px;
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
    animation: badgeGlow 2s ease-in-out infinite;
}

@keyframes badgeGlow {
    0%, 100% {
        box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
    }
    50% {
        box-shadow: 0 4px 20px rgba(255, 215, 0, 0.5);
    }
}

.winner-badge i {
    font-size: 1rem;
}

.winner-name {
    font-size: 1.15rem;
    font-weight: 600;
    color: #667eea;
    margin: 0;
    padding: 12px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.winner-name::before {
    content: '';
    width: 4px;
    height: 20px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    border-radius: 2px;
    display: inline-block;
}

/* Confetti Canvas */
#confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

/* Responsive Award Cards */
@media (max-width: 992px) {
    .award-card-header {
        height: 240px;
    }

    .award-card-body {
        padding: 20px;
        min-height: 140px;
    }

    .award-title {
        font-size: 1.3rem;
    }

    .winner-name {
        font-size: 1.05rem;
    }
}

@media (max-width: 768px) {
    .award-card-header {
        height: 220px;
    }

    .award-card-body {
        padding: 18px;
        min-height: 130px;
    }

    .award-title {
        font-size: 1.2rem;
    }

    .winner-name {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .award-card-header {
        height: 200px;
    }

    .award-title {
        font-size: 1.1rem;
    }

    .winner-name {
        font-size: 0.95rem;
    }
}

/* Gallery album card */
/* Modern Album Card Design */
.modern-album-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.modern-album-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.2);
}

.album-card-image-wrapper {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.album-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-album-card:hover .album-card-image {
    transform: scale(1.15);
}

.album-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.album-card-placeholder i {
    color: #fff;
    font-size: 4rem;
    opacity: 0.8;
}

.album-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
    opacity: 1;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 15px;
}

.modern-album-card:hover .album-card-overlay {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}

.album-image-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 50px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
}

.album-image-count i {
    font-size: 1rem;
}

.album-card-header {
    margin-bottom: 24px;
}

.album-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 14px 28px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    width: 100%;
    text-align: center;
}

.album-view-btn:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    color: #fff;
}

.album-view-btn:hover {
    background: #667eea;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.album-view-btn i {
    transition: transform 0.3s ease;
}

.album-view-btn:hover i {
    transform: translateX(5px);
}

.album-card-footer {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 140px;
}

.album-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 8px 0;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.modern-album-card:hover .album-card-title {
    color: #667eea;
}


@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Album Cards */
@media (max-width: 992px) {
    .album-card-image-wrapper {
        height: 240px;
    }

    .album-card-footer {
        padding: 20px;
    }

    .album-card-title {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    .album-card-image-wrapper {
        height: 220px;
    }

    .album-card-footer {
        padding: 18px;
    }

    .album-card-title {
        font-size: 1.1rem;
    }

    .album-view-btn {
        padding: 12px 24px;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .album-card-image-wrapper {
        height: 200px;
    }

    .album-card-content {
        padding: 15px;
    }

    .album-image-count {
        padding: 8px 16px;
        font-size: 1rem;
        margin-bottom: 15px;
    }

    .album-view-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

/* Masonry Gallery Styles */
.masonry-gallery {
    column-count: 3;
    column-gap: 20px;
    width: 100%;
    column-fill: balance;
}

.masonry-item {
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    position: relative;
}

.masonry-image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
    background: #f5f5f5;
    transition: all 0.3s ease;
    display: block;
}

.masonry-image-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.masonry-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    transition: transform 0.5s ease;
    object-fit: cover;
}

.masonry-image-wrapper:hover .masonry-image {
    transform: scale(1.05);
}

.masonry-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(102, 126, 234, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    transition: background 0.3s ease;
    opacity: 0;
}

.masonry-image-wrapper:hover .masonry-overlay {
    background: rgba(102, 126, 234, 0.7);
    opacity: 1;
}

.masonry-overlay i {
    color: #fff;
    font-size: 2.5rem;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.masonry-image-wrapper:hover .masonry-overlay i {
    transform: scale(1);
}

/* Responsive Masonry */
@media (max-width: 992px) {
    .masonry-gallery {
        column-count: 2;
        column-gap: 15px;
    }
    .masonry-item {
        margin-bottom: 15px;
    }
}

@media (max-width: 768px) {
    .masonry-gallery {
        column-count: 2;
        column-gap: 15px;
    }
    .masonry-item {
        margin-bottom: 15px;
    }
}

@media (max-width: 480px) {
    .masonry-gallery {
        column-count: 1;
        column-gap: 10px;
    }
    .masonry-item {
        margin-bottom: 10px;
    }
}

/* Tab content animation */
.tab-content {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Landing page styles */
.landing-hero {
    height: 100vh;
    background-size: cover;
    background-position: center;
    position: relative;
}

.landing-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
}

.landing-hero .container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.landing-hero .hero__text {
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Anthem player for landing page */
#anthem-toggle {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
}

#anthem-status {
    font-size: 12px;
}

#anthem-close {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    margin-left: auto;
}

/* Login page styles */
.wrapper-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container-login {
    max-width: 400px;
    width: 100%;
}

.logo-img {
    display: block;
    padding: 1rem 0;
    width: 100%;
}

/* Home page styles */
.bg-holder.overlay {
    background-size: cover;
    background-position: center;
}

/*---------------------
  Floating Action Buttons
-----------------------*/

/* Floating buttons container */
.floating-action-buttons {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Floating action button */
.floating-action-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    font-size: 1.2rem;
}

.floating-action-btn:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 6px 30px rgba(102, 126, 234, 0.6);
    color: #fff;
    text-decoration: none;
}

.floating-action-btn:active {
    transform: translateY(-2px) scale(1.05);
}

/* Scroll to top button */
.floating-action-btn.scroll-to-top {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Return to home button */
.floating-action-btn.return-home {
    background: linear-gradient(135deg, #5c00ce 0%, #7e00ad 100%);
}

/* Show scroll to top button only when scrolled */
.floating-action-btn.scroll-to-top {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.floating-action-btn.scroll-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Responsive adjustments for floating buttons */
@media (max-width: 768px) {
    .floating-action-buttons {
        bottom: 15px;
        right: 15px;
        gap: 12px;
    }

    .floating-action-btn {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }

    #anthem-player-container {
        bottom: 15px;
        left: 15px;
        max-width: 250px;
        padding: 8px;
    }

    #anthem-status-employee {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .floating-action-buttons {
        bottom: 10px;
        right: 10px;
        gap: 10px;
    }

    .floating-action-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    #anthem-player-container {
        bottom: 10px;
        left: 10px;
        max-width: 200px;
        padding: 6px;
    }

    #anthem-status-employee {
        font-size: 10px;
    }

    #anthem-toggle-employee {
        font-size: 16px;
    }

    #anthem-close-employee {
        font-size: 12px;
    }
}

/*---------------------
  Event Snaps Styles
----------------------*/

.event-snap-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    background: #f5f5f5;
    aspect-ratio: 1;
}

.event-snap-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.event-snap-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.event-snap-card:hover .event-snap-image {
    transform: scale(1.1);
}

.event-snap-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(102, 126, 234, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    opacity: 0;
}

.event-snap-card:hover .event-snap-overlay {
    background: rgba(102, 126, 234, 0.7);
    opacity: 1;
}

.event-snap-overlay i {
    color: #fff;
    font-size: 2.5rem;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.event-snap-card:hover .event-snap-overlay i {
    transform: scale(1);
}

#upload-progress {
    margin-top: 15px;
}

#upload-message {
    margin-top: 15px;
}

@media (max-width: 768px) {
    .event-snap-card {
        border-radius: 10px;
    }

    .event-snap-overlay i {
        font-size: 2rem;
    }
}