/* ============================================================
   Theme: Deep Violet Dark
   Drop-in replacement for assets/portal/css/style.css
   All original class names preserved.
   To activate: update header.tpl link from style.css → style-new.css
   ============================================================ */

/* ── Google Fonts upgrade ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Design tokens ── */
:root {
  --clr-primary:      #8b5cf6;
  --clr-primary-dark: #7c3aed;
  --clr-primary-glow: rgba(139, 92, 246, 0.35);
  --clr-accent:       #a78bfa;
  --clr-bg:           #0f0f1a;
  --clr-surface:      #141427;
  --clr-card:         #1a1a2e;
  --clr-card-hover:   #1f1f3a;
  --clr-border:       rgba(139, 92, 246, 0.18);
  --clr-text:         #e2e8f0;
  --clr-text-muted:   #94a3b8;
  --clr-text-dim:     #64748b;
  --clr-footer:       #09091a;
  --shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-md:        0 4px 24px rgba(0, 0, 0, 0.7);
  --shadow-glow:      0 0 18px rgba(139, 92, 246, 0.25);
  --radius:           8px;
  --transition:       0.3s ease;
}

/* ============================================================
   BASE
   ============================================================ */
body {
  background: var(--clr-bg);
  font-size: 100%;
  font-family: 'Inter', 'Open Sans', sans-serif;
  color: var(--clr-text);
}

body a {
  transition: var(--transition);
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  -moz-transition: var(--transition);
  -ms-transition: var(--transition);
  color: var(--clr-accent);
}

/* ============================================================
   NAVBAR
   ============================================================ */
a.navbar-brand {
  padding: 0 0 0 1em;
}

nav.navbar.navbar-inverse.navbar-fixed-top {
  padding: 1.5em 0;
  background: rgba(10, 10, 26, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin: 0;
  box-shadow: 0 1px 0 var(--clr-border), var(--shadow-sm) !important;
  border-bottom: 1px solid var(--clr-border);
}

a.navbar-brand h1 {
  margin: 0;
}

form.navbar-form.navbar-right {
  margin-right: 0em;
  width: 50%;
  float: left !important;
  margin-left: 10em;
  position: relative;
}

.navbar-form .form-control {
  width: 100%;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  top: 80px;
  background: var(--clr-surface);
  border: none;
  border-right: 1px solid var(--clr-border);
  padding: 0 20px 20px 20px;
}

/* ============================================================
   TOP SEARCH
   ============================================================ */
.top-search form input[type="text"] {
  position: relative;
  padding: 6px 43px 6px 12px;
  outline: none;
  box-shadow: 0 0 0;
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  color: var(--clr-text);
  border-radius: var(--radius);
}

.top-search form input[type="text"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--clr-primary-glow);
  border: 1px solid var(--clr-primary);
}

.top-search form input[type="submit"] {
  background: url(../images/9.png) no-repeat 0px 0px !important;
  width: 18px !important;
  height: 18px !important;
  border: none !important;
  position: absolute !important;
  outline: none !important;
  top: 9px;
  right: 26px;
  filter: brightness(0) invert(1) sepia(1) hue-rotate(230deg) saturate(4);
}

/* ============================================================
   HEADER RIGHT / FILE / SIGN-IN
   ============================================================ */
.header-top-right {
  float: right;
}

.file {
  float: left;
  margin: 1.1em 0 0 0;
}

.file input[type="text"] {
  width: 60%;
  padding: 9px;
  border: 1px solid var(--clr-border);
  font-size: 1.1em;
  font-weight: 500;
  color: var(--clr-text);
  outline: none;
  background: var(--clr-card);
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}

.file a {
  padding: 8px 20px;
  background: var(--clr-card);
  color: var(--clr-text);
  font-size: 14px;
  border-radius: var(--radius);
  -webkit-border-radius: var(--radius);
  -moz-border-radius: var(--radius);
  -o-border-radius: var(--radius);
  -ms-border-radius: var(--radius);
  text-decoration: none;
  border: 1px solid var(--clr-border);
  transition: var(--transition);
}

.file a:hover {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  color: #fff;
}

.file a:focus {
  outline: none;
}

.signin {
  float: left;
  margin: 1.1em 0 0 1em;
}

.signin a {
  padding: 8px 20px;
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  border-radius: var(--radius);
  -webkit-border-radius: var(--radius);
  -moz-border-radius: var(--radius);
  -o-border-radius: var(--radius);
  -ms-border-radius: var(--radius);
  box-shadow: var(--shadow-glow);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.signin a:hover {
  text-decoration: none;
  background: linear-gradient(135deg, var(--clr-accent), var(--clr-primary));
  color: #fff;
  box-shadow: 0 0 24px var(--clr-primary-glow);
}

.signin a:focus {
  outline: none;
}

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
.main {
  padding: 5em 0 0 0;
}

.main-grids {
  padding: 0 0 1em 1em;
}

/* ============================================================
   SIDEBAR NAV
   ============================================================ */
ul.nav.nav-sidebar li.active a {
  background-color: rgba(139, 92, 246, 0.15) !important;
  color: var(--clr-primary);
  border-left: 3px solid var(--clr-primary);
}

ul.nav.nav-sidebar li a {
  color: var(--clr-text-muted);
  font-size: 13px;
  font-weight: 600;
  padding: .8em 0 .8em 3em;
  transition: var(--transition);
  border-left: 3px solid transparent;
}

.sidebar ul.nav-sidebar li a:hover {
  background-color: rgba(139, 92, 246, 0.1) !important;
  color: var(--clr-primary) !important;
  border-left: 3px solid var(--clr-primary);
}

.sidebar ul.nav-sidebar li.active {
  background-color: rgba(139, 92, 246, 0.1) !important;
  color: #fff !important;
}

ul.nav.nav-sidebar li a:focus {
  outline: none;
  background: none;
}

.menu,
.menu1 {
  display: block;
  cursor: pointer;
  position: relative;
  color: var(--clr-text-muted);
}

.menu,
.menu1:hover {
  color: var(--clr-primary);
}

.sidebar.top-navigation {
  display: none;
}

ul.cl-effect-1,
ul.cl-effect-2 {
  display: none;
}

.nav-sidebar ul {
  padding: 0;
  margin: 0;
  z-index: 999;
  width: 100%;
  left: 0;
}

.nav-sidebar ul.cl-effect-1 li,
.nav-sidebar ul.cl-effect-2 li {
  display: block;
  margin: 0;
}

.nav-sidebar ul li a {
  padding: .5em 0 .5em 7em !important;
  display: block;
  text-decoration: none;
  color: var(--clr-text-muted);
}

/* ============================================================
   GLYPHICONS / ICONS
   ============================================================ */
.glyphicon-film {
  margin: 0 2em 0 0;
  font-size: 16px !important;
  color: var(--clr-primary);
}

.glyphicon-home {
  margin: 0;
  font-size: 16px !important;
  color: var(--clr-primary);
}

.glyphicon-music {
  margin: 0;
  font-size: 16px !important;
  color: var(--clr-primary);
}

.news-icon span.glyphicon-envelope {
  margin: 0 2em 0 0;
  font-size: 16px !important;
  color: var(--clr-primary);
}

.glyphicon-menu-down {
  margin: 0 0 0 1em;
  font-size: 11px !important;
}

/* ============================================================
   SLIDER
   ============================================================ */
#slider2,
#slider3 {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  margin: 0 auto;
}

.rslides_tabs {
  list-style: none;
  padding: 0;
  background: rgba(139, 92, 246, 0.1);
  box-shadow: 0 0 1px var(--clr-border), inset 0 0 5px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0 0 1px var(--clr-border), inset 0 0 5px rgba(0, 0, 0, 0.8);
  -webkit-box-shadow: 0 0 1px var(--clr-border), inset 0 0 5px rgba(0, 0, 0, 0.8);
  font-size: 18px;
  margin: 0 auto 50px;
  max-width: 540px;
  padding: 10px 0;
  text-align: center;
  width: 100%;
  border-radius: var(--radius);
}

.rslides_tabs li {
  display: inline;
  float: none;
  margin-right: 1px;
}

.rslides_tabs a {
  width: auto;
  line-height: 20px;
  padding: 9px 20px;
  height: auto;
  background: transparent;
  display: inline;
  color: var(--clr-text-muted);
}

.rslides_tabs li:first-child {
  margin-left: 0;
}

.rslides_tabs .rslides_here a {
  background: rgba(139, 92, 246, 0.2);
  color: var(--clr-accent);
  font-weight: bold;
}

.events {
  list-style: none;
}

.callbacks_container {
  position: relative;
  float: left;
  width: 100%;
}

.callbacks {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
}

.callbacks li {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}

.callbacks img {
  position: relative;
  z-index: 1;
  height: auto;
  border: 0;
}

.callbacks .caption {
  display: block;
  position: absolute;
  z-index: 2;
  font-size: 20px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  color: #fff;
  left: 0;
  right: 0;
  padding: 10px 20px;
  margin: 0;
  max-width: none;
  top: 10%;
  text-align: center;
}

.callbacks_nav {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  top: 101%;
  right: 5%;
  opacity: 0.7;
  z-index: 3;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  height: 40px;
  width: 40px;
  background: transparent url("../images/themes.png") no-repeat left top;
  margin-top: -65px;
}

.callbacks_nav:active {
  opacity: 1.0;
}

.callbacks_nav.next {
  left: auto;
  background-position: right top;
  right: 1%;
}

#slider3-pager a {
  display: inline-block;
}

#slider3-pager span {
  float: left;
}

#slider3-pager span {
  width: 100px;
  height: 15px;
  background: var(--clr-primary);
  display: inline-block;
  border-radius: 30em;
  opacity: 0.4;
}

#slider3-pager .rslides_here a {
  background: var(--clr-primary);
  border-radius: 30em;
  opacity: 1;
}

#slider3-pager a {
  padding: 0;
}

#slider3-pager li {
  display: inline-block;
}

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
}

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
}

.rslides li {
  position: relative;
  display: block;
  float: left;
}

.rslides img {
  height: auto;
  border: 0;
  width: 100%;
}

.callbacks_tabs {
  list-style: none;
  position: absolute;
  top: 143%;
  z-index: 999;
  left: 45%;
  padding: 0;
  margin: 0;
}

.slider-top {
  text-align: center;
  padding: 10em 0;
}

.slider-top h1 {
  font-weight: 700;
  font-size: 48px;
  color: var(--clr-text);
  text-shadow: 0 0 40px var(--clr-primary-glow);
}

.slider-top p {
  font-weight: 400;
  font-size: 20px;
  padding: 1em 7em;
  color: var(--clr-text-muted);
}

.slider-top ul.social-slide {
  display: inline-flex;
  margin: 0px;
  padding: 0px;
}

ul.social-slide li i {
  width: 70px;
  height: 74px;
  background: url(../images/img-resources.png) no-repeat;
  display: inline-block;
  margin: 0px 15px;
}

ul.social-slide li i.win {
  background-position: -6px 0px;
}

ul.social-slide li i.android {
  background-position: -110px 0px;
}

ul.social-slide li i.mac {
  background-position: -215px 0px;
}

.callbacks_tabs li {
  display: inline-block;
  margin: 0 .5em;
}

@media screen and (max-width: 600px) {
  .callbacks_nav {
    top: 47%;
  }
}

.callbacks_tabs a {
  visibility: hidden;
}

.callbacks_tabs a:after {
  content: "\f111";
  font-size: 0;
  font-family: FontAwesome;
  visibility: visible;
  display: block;
  height: 15px;
  width: 15px;
  display: inline-block;
  border: 2px solid var(--clr-primary);
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -o-border-radius: 30px;
  -ms-border-radius: 30px;
}

.callbacks_here a:after {
  border: 2px solid var(--clr-primary);
  background: var(--clr-primary);
}

a.btn.btn-primary.btn-lg.see-button.hvr-shutter-out-horizontal {
  background: linear-gradient(135deg, var(--clr-primary-dark), #4c1d95);
}

/* ============================================================
   ANIMATED GRIDS / HEADER RIGHT
   ============================================================ */
.animated-grids {
  margin-bottom: 7em;
}

.header-right {
  float: left;
}

/* ============================================================
   CONTENT CARDS — RESENT GRIDS
   ============================================================ */
.resent {
  margin: 1em 0;
}

.resent-grid {
  padding: 20px;
}

.resent-grid-img {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
}

.resent-grid-img iframe {
  width: 100%;
  height: 642px;
}

.resent-grid-img a {
  display: block;
}

.resent-grid a img {
  width: 100%;
  background-color: var(--clr-card);
  transition: transform 0.4s ease;
}

.resent-grid:hover a img {
  transform: scale(1.04);
}

/* ── time badge ── */
.time {
  position: absolute;
  top: 92% !important;
  right: 0%;
  display: block;
}

.small-time {
  top: 87% !important;
  z-index: 9;
}

.slider-time {
  top: 90% !important;
  z-index: 9;
}

.show-time {
  top: 87% !important;
}

.movie-time {
  top: 94% !important;
}

.time p {
  font-size: 12px;
  margin: 0;
  color: #fff;
  padding: .2em .6em;
  border-radius: var(--radius);
  -webkit-border-radius: var(--radius);
  -ms-border-radius: var(--radius);
  -o-border-radius: var(--radius);
  -moz-border-radius: var(--radius);
  background: rgba(139, 92, 246, 0.85);
  backdrop-filter: blur(4px);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.clck {
  position: absolute;
  bottom: 1%;
  right: 9%;
  display: block;
  z-index: 9;
}

.small-clck {
  right: 12%;
  bottom: 2%;
}

.glyphicon-time:before {
  content: "\e023";
  color: var(--clr-accent);
  font-size: 1em;
}

.show-clock {
  right: 22%;
  bottom: 1%;
}

.movie-clock {
  right: 15%;
  bottom: 1%;
}

.sports-tome {
  top: 82% !important;
  z-index: 9;
}

.sports-clock {
  right: 18%;
  bottom: 1%;
}

/* ── card info panel ── */
.resent-info h3 {
  font-size: 23px;
  color: var(--clr-text);
  font-weight: 700;
  margin: 1em 0;
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.3px;
}

.resent-grid-info {
  background: var(--clr-card);
  padding: 1em;
  border: 1px solid var(--clr-border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: background var(--transition);
}

.resent-grid:hover .resent-grid-info {
  background: var(--clr-card-hover);
}

.resent-grid-info a.title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--clr-text);
  text-decoration: none;
}

.resent-grid-info a.title:hover {
  transition: inherit;
  text-decoration: none;
  color: var(--clr-accent);
}

.resent-grid-info p.author {
  font-size: 14px;
  color: var(--clr-text-muted);
  margin: .5em 0;
}

.resent-grid-info p.author a.author {
  color: var(--clr-primary);
  text-decoration: none;
  padding-left: 1.8em;
  background: url(../images/u12.png) no-repeat 0px 1px;
}

.resent-grid-info p.author a.author:hover {
  text-decoration: none;
  color: var(--clr-accent);
}

.resent-grid-info p.views {
  font-size: 14px;
  color: var(--clr-text-dim);
  margin: 0;
}

/* ============================================================
   RECOMMENDED GRIDS
   ============================================================ */
.recommended-grids {
  margin: 5em 0;
}

.recommended-info h3 {
  font-size: 20px;
  color: var(--clr-text);
  margin: 0 0 1em 0;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.recommended-info p {
  font-size: 13px;
  color: var(--clr-text-muted);
  margin: 0;
  line-height: 1.8em;
}

.recommended-grid-info a.title {
  font-size: 14px;
  line-height: 1.3em;
  color: var(--clr-text);
  font-weight: 600;
}

.recommended-grid-info h3 {
  margin: 0;
  overflow: hidden;
  height: 54px;
  color: var(--clr-text);
}

.recommended-grid-info h5 {
  margin: 0;
  overflow: hidden;
  height: 34px;
  color: var(--clr-text);
}

.resent-grid-info a.title-info {
  font-size: 15px;
  color: var(--clr-text);
}

.recommended-grid-info p.author {
  font-size: 13px;
  margin: 1em 0 0 0;
  color: var(--clr-text-muted);
}

.resent-grid-info ul {
  padding: 0;
  margin: 0;
}

.resent-grid-info ul li {
  display: inline-block;
}

.recommended-grid-infoo ul {
  padding: 0 !important;
  margin: 0 !important;
}

.recommended-grid-info ul li {
  display: inline-block !important;
  width: 49%;
}

.recommended-grid-info ul li.right-list {
  text-align: right;
}

.resent-grid-info p.author-info {
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-text-muted);
}

.resent-grid-info p.views {
  font-size: 13px;
}

.resent-grid-info p.views-info {
  font-size: 12px;
  color: var(--clr-text-dim);
}

/* ── slid bottom ── */
.slid-bottom-grids {
  margin: 2em 0 0 0;
}

.slid-bottom-grid {
  float: left;
  width: 35%;
}

.slid-bottom-right {
  float: left;
  width: 65%;
  text-align: right;
}

.slid-bottom-grid p {
  margin: 0 !important;
  color: var(--clr-text-muted);
}

.recommended-grid-info {
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--clr-border) !important;
  background: var(--clr-card);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow var(--transition);
}

.recommended-grid-info:hover {
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(139, 92, 246, 0.35) !important;
}

/* ============================================================
   HEADING / SECTION TITLE
   ============================================================ */
.heading {
  float: left;
}

.heading-right {
  float: left;
  margin: .5em 0 0 3em;
}

.heading-right a {
  padding: 8px 20px;
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  border-radius: var(--radius);
  -webkit-border-radius: var(--radius);
  -moz-border-radius: var(--radius);
  -o-border-radius: var(--radius);
  -ms-border-radius: var(--radius);
  font-weight: 600;
  box-shadow: var(--shadow-glow);
  letter-spacing: 0.3px;
}

.heading-right a:hover {
  background: linear-gradient(135deg, var(--clr-accent), var(--clr-primary));
  color: #fff;
  box-shadow: 0 0 24px var(--clr-primary-glow);
}

.heading-right a:focus {
  border: none !important;
  outline: none;
}

.english-grid {
  margin-top: 1em;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--clr-footer);
  padding: 2em 3em;
  border-top: 1px solid var(--clr-border);
}

.footer-top-nav ul {
  padding: 0;
  margin: 0;
}

.footer-top-nav ul li {
  display: inline-block;
  margin: 0 1em;
}

.footer-top-nav ul li a {
  color: var(--clr-text-muted);
  font-size: 14px;
  text-decoration: none;
  transition: var(--transition);
}

.footer-top-nav ul li a:hover {
  color: var(--clr-accent);
}

.footer-bottom-nav ul {
  padding: 1em 0 0 0;
  margin: 0;
}

.footer-bottom-nav ul li {
  display: inline-block;
  margin: 0 1em;
}

.footer-bottom-nav ul li a {
  color: var(--clr-text-dim);
  font-size: 12px;
  text-decoration: none;
  transition: var(--transition);
}

.footer-bottom-nav ul li a:focus {
  outline: none;
}

.footer-bottom-nav ul li a:hover {
  color: var(--clr-accent);
}

.footer-bottom-nav ul li {
  font-size: 12px;
  color: var(--clr-text-dim);
}

.footer-top {
  padding-bottom: 2em;
  border-bottom: solid 1px var(--clr-border);
}

.footer-bottom {
  margin-top: 2em;
}

.footer-bottom ul {
  padding: 0;
  margin: 0;
}

.footer-bottom ul li {
  display: inline-block;
  margin: 0 1em 0 0;
}

.footer-bottom ul li.languages {
  width: 16%;
}

.footer-bottom ul li.languages select.form-control {
  cursor: pointer;
  color: var(--clr-text-muted);
  border: solid 1px var(--clr-border);
  background: var(--clr-card) url(../images/select-arrow.png) no-repeat 95% center;
  border-radius: var(--radius);
  font-size: 12px;
  height: 32px;
  -webkit-border-radius: var(--radius);
  -moz-border-radius: var(--radius);
  -o-border-radius: var(--radius);
  -ms-border-radius: var(--radius);
  outline: none;
  -webkit-appearance: none;
  transition: var(--transition);
}

.footer-bottom ul li.languages select.form-control:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--clr-primary-glow);
  border-color: var(--clr-primary);
}

.footer-bottom ul li.languages select.form-control option {
  color: var(--clr-text);
  background: var(--clr-card);
  border: none;
}

.footer-bottom ul li a.f-history {
  background: url(../images/12.png) no-repeat 11px 8px;
  color: var(--clr-text-muted);
  text-decoration: none;
  font-size: 12px;
  padding: .52em 1em .52em 3em;
  border: solid 1px var(--clr-border);
  border-radius: var(--radius);
  -webkit-border-radius: var(--radius);
  -moz-border-radius: var(--radius);
  -o-border-radius: var(--radius);
  -ms-border-radius: var(--radius);
  transition: var(--transition);
}

.footer-bottom ul li a.f-history:hover {
  border-color: var(--clr-primary);
  color: var(--clr-accent);
}

.footer-bottom ul li a.f-help {
  background: url(../images/13.png) no-repeat 11px 7px;
}

.footer-bottom ul li a.f-help:focus {
  outline: none;
}

select.form-control.bfh-countries:hover {
  transition: var(--transition);
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  -moz-transition: var(--transition);
  -ms-transition: var(--transition);
}

/* ============================================================
   SINGLE PAGE — SONG / VIDEO
   ============================================================ */
.song {
  width: 90%;
  float: left;
}

.song-grid-right {
  width: 16%;
  float: left;
  margin-left: 2em;
}

.song iframe {
  width: 100%;
  height: 500px;
  border-radius: var(--radius);
}

.song-info {
  padding-left: 0;
  padding: 0 0 1em;
}

.song-info h3 {
  color: var(--clr-text);
  font-size: 22px;
  margin: 0;
  line-height: 1.5em;
  font-weight: 700;
}

.video-grid iframe {
  border: none;
  height: 376px;
  border-radius: var(--radius);
}

/* ============================================================
   SHARE PANEL
   ============================================================ */
.share h5 {
  margin: 0;
  font-size: 20px;
  color: var(--clr-text);
  font-weight: 600;
}

.share ul {
  margin: 2em 0 0 0;
  padding: 0;
  list-style: none;
}

.share li {
  display: block;
  margin: 1em 0;
  color: var(--clr-text-muted);
  font-size: 14px;
}

.share li a {
  color: var(--clr-text-muted);
  font-size: 14px;
  text-decoration: none;
  padding-left: 3em;
  line-height: 2em;
  transition: var(--transition);
}

.share li a.icon {
  background: url(../images/like.png) no-repeat 0px 0px;
  height: 34px;
  display: block;
}

.share li a.fb-icon       { background: url(../images/fb.png) no-repeat 0px 0px; }
.share li a.rss-icon      { background: url(../images/rss.png) no-repeat 0px 0px; }
.share li a.dribbble-icon { background: url(../images/dribbble.png) no-repeat 0px 0px; }
.share li a.twitter-icon  { background: url(../images/twitter.png) no-repeat 0px 0px; }
.share li a.pinterest-icon{ background: url(../images/pinterest.png) no-repeat 0px 0px; }
.share li a.behance-icon  { background: url(../images/behance.png) no-repeat 0px 0px; }
.share li a.whatsapp-icon { background: url(../images/whatsapp.png) no-repeat 0px 0px; }
.share li a.comment-icon  { background: url(../images/comment.png) no-repeat 0px 0px; }

.share li.view {
  background: url(../images/view.png) no-repeat 0px 0px;
  height: 34px;
  display: block;
  padding-left: 3em;
  line-height: 2em;
  color: var(--clr-text-muted);
}

.share li a:hover {
  color: var(--clr-accent);
}

.share.title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--clr-text);
}

/* ============================================================
   SHOW GRIDS
   ============================================================ */
.show-top-grids {
  padding: 0 1em 0 0;
}

.show-grid-right {
  background: var(--clr-card);
  padding: 3em 0 0 3em;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
}

.single-right {
  background: var(--clr-card);
  padding: 3em 0 0 3em;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
}

.show-right-grids {
  margin-bottom: 1.5em;
}

.show-grid-right h3 {
  font-size: 20px;
  color: var(--clr-text);
  margin: 0 0 1em 0;
  font-weight: 700;
}

.single-right h3 {
  font-size: 20px;
  color: var(--clr-text);
  margin: 0 0 1em 0;
  font-weight: 700;
}

.show-right-grids ul {
  padding: 0;
  margin: 2em 0 0 0;
}

.show-right-grids ul li {
  display: inline-block;
  margin-left: 1em;
}

.show-right-grids ul li:nth-child(1) {
  margin: 0;
}

.show-right-grids ul li a {
  font-size: 13px;
  color: var(--clr-text-muted);
  margin: 1em 0;
  transition: var(--transition);
}

.show-right-grids ul li a:hover {
  text-decoration: none;
  color: var(--clr-accent);
}

.show-right-grids ul li a img {
  width: 100%;
  border-radius: 4px;
}

/* ============================================================
   HISTORY
   ============================================================ */
.recommended-info p.history-text {
  font-size: 13px;
  color: var(--clr-text-muted);
  margin: 0;
  line-height: 1.8em;
}

.recommended-info p.history-text span {
  display: block;
  margin: 1em 0 0 0;
  color: var(--clr-text-dim);
}

.history-left {
  width: 90px !important;
  height: 90px;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
}

.history-left p {
  font-size: 17px;
  color: var(--clr-accent);
  margin: 1.7em 0 0 0;
  font-weight: 700;
  text-align: center;
}

.history-grids {
  margin: 5em 0;
}

.history-right h5 {
  font-size: 18px;
  color: var(--clr-text);
  margin: 0 0 .5em 0;
  font-weight: 700;
}

.history-right p {
  font-size: 13px;
  color: var(--clr-text-muted);
  margin: 0;
  line-height: 1.8em;
}

/* ============================================================
   HOVER EFFECT — SHUTTER
   ============================================================ */
.hvr-shutter-in-vertical {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  background: var(--clr-primary);
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  border-radius: var(--radius);
}

.hvr-shutter-in-vertical:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--clr-primary-dark);
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  border-radius: var(--radius);
}

.hvr-shutter-in-vertical:hover,
.hvr-shutter-in-vertical:focus,
.hvr-shutter-in-vertical:active {
  color: white;
}

.hvr-shutter-in-vertical:hover:before,
.hvr-shutter-in-vertical:focus:before,
.hvr-shutter-in-vertical:active:before {
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
}

/* ============================================================
   SINGLE PAGE LAYOUT
   ============================================================ */
.single-main {
  padding: 4em 1em 0 0;
}

.single-left {
  padding-bottom: 2em;
}

.song-info-left {
  float: left;
}

/* ── published section ── */
.published {
  margin: 1em 0 0 0;
  padding-left: 0;
  background: var(--clr-card);
  padding: 1em;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
}

.published h4 {
  color: var(--clr-text-muted);
  font-size: 13px;
  margin: 0;
  line-height: 1.5em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.published p {
  font-size: 13px;
  color: var(--clr-text-muted);
  margin: 1em 0;
  line-height: 1.8em;
}

/* ============================================================
   LOAD MORE
   ============================================================ */
#myList ul {
  margin: 0;
}

#myList li {
  display: none;
  list-style-type: none;
}

.blog-text:after {
  clear: both;
}

.blog-grid img {
  width: 100%;
  border-radius: var(--radius);
}

#loadMore {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: var(--transition);
  -webkit-transition: var(--transition);
  -moz-transition: var(--transition);
  -o-transition: var(--transition);
  -ms-transition: var(--transition);
  cursor: pointer;
  text-align: center;
  margin: 2em auto 0 auto;
  padding: .7em 0;
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
  border-radius: var(--radius);
  width: 19%;
  box-shadow: var(--shadow-glow);
}

#loadMore:hover {
  color: #fff;
  text-decoration: none;
  box-shadow: 0 0 28px var(--clr-primary-glow);
  transform: translateY(-1px);
}

.load_more {
  margin-top: 0;
}

.load_more ul {
  padding: 0;
}

.g_r {
  background: none;
  margin: 30px 0 0 0;
}

.l_g_r img {
  width: 100%;
  border-radius: var(--radius);
}

.load-grids {
  margin: 1em 0 0 0;
}

.load-grid {
  float: left;
  width: 17%;
}

.load-grid p {
  font-size: 14px;
  color: var(--clr-text-muted);
  margin: 0;
  line-height: 1.8em;
}

.load-grid a {
  font-size: 14px;
  color: var(--clr-primary);
  margin: 1em 0;
  line-height: 1.8em;
  transition: var(--transition);
}

.load-grid a:hover {
  color: var(--clr-accent);
  text-decoration: none;
}

/* ============================================================
   COMMENTS
   ============================================================ */
.all-comments {
  margin: 1em 0 0 0;
  padding-left: 0;
  padding: 3em 1em;
  background: var(--clr-card);
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm) !important;
}

.all-comments-info a {
  font-size: 14px;
  color: var(--clr-text-muted);
  text-decoration: none;
  transition: var(--transition);
}

.all-comments-info a:hover {
  color: var(--clr-accent);
}

.box {
  margin: 1em 0;
}

.box form {
  margin: 3em 0 0 0;
}

.box input[type="text"],
.box textarea {
  outline: none;
  border: 1px solid var(--clr-border);
  background: var(--clr-surface);
  color: var(--clr-text);
  padding: 10px 12px;
  width: 60%;
  font-size: 13px;
  border-radius: var(--radius);
  transition: var(--transition);
}

.box input[type="text"]:focus,
.box textarea:focus {
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 2px var(--clr-primary-glow);
  outline: none;
}

.box input[type="text"]:nth-child(2) {
  margin: 1em 0;
}

.box textarea {
  resize: none;
  min-height: 200px;
  margin: 1em 0;
  width: 80%;
}

.box input[type="submit"] {
  outline: none;
  font-style: normal;
  padding: 10px 24px;
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  display: block;
  border: none;
  border-radius: var(--radius);
  -webkit-border-radius: var(--radius);
  -moz-border-radius: var(--radius);
  -o-border-radius: var(--radius);
  -ms-border-radius: var(--radius);
  transition: var(--transition);
  -webkit-transition: var(--transition);
  cursor: pointer;
  box-shadow: var(--shadow-glow);
}

.box input[type="submit"]:hover {
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, var(--clr-accent), var(--clr-primary));
  box-shadow: 0 0 24px var(--clr-primary-glow);
  transform: translateY(-1px);
}

.all-comments-buttons {
  margin: 3em 0 1em;
}

.all-comments-buttons ul {
  margin: 0;
  padding: 0;
}

.all-comments-buttons ul li {
  display: inline-block;
  margin: 0 1em;
}

.all-comments-buttons ul li:nth-child(1) {
  margin-left: 0;
}

.all-comments-buttons ul li a.top {
  color: var(--clr-text-muted);
  font-size: 13px;
  padding: .5em 1.3em;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: var(--transition);
}

.all-comments-buttons ul li a.newest {
  position: relative;
}

.all-comments-buttons ul li a.top:hover {
  color: #fff;
  background: var(--clr-primary);
  border-color: var(--clr-primary);
}

/* ============================================================
   MEDIA / AVATAR
   ============================================================ */
.media-grids {
  margin-top: 4em;
}

.media {
  margin: 4em 0;
}

.media h5 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 20px 0;
  color: var(--clr-primary);
}

.media h5 a {
  color: #f43f5e;
  transition: var(--transition);
}

.media h5 a:hover {
  color: #fb7185;
}

.media-left a {
  width: 65px;
  height: 65px;
  display: block;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  overflow: hidden;
}

.media-body p {
  font-size: 13px;
  color: var(--clr-text-muted);
  margin: 0 0 .5em 0;
  line-height: 1.5em;
}

.media-body span {
  color: var(--clr-text-dim);
  font-size: 13px;
}

.media-body span a {
  color: var(--clr-primary);
  text-decoration: none;
  transition: var(--transition);
}

.media-body span a:hover {
  color: var(--clr-accent);
}

.media:nth-child(3) {
  padding-left: 4em;
}

.media:nth-child(5) {
  padding-left: 4em;
}

/* ============================================================
   SINGLE RIGHT GRIDS
   ============================================================ */
.single-grid-right {
  margin-top: 2em;
}

.single-right-grids {
  margin: 0 0 1.5em 0;
}

.single-right-grid-left a img {
  width: 100%;
  border-radius: var(--radius);
}

.single-right-grid-right a.title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--clr-text);
  text-decoration: none;
  transition: var(--transition);
}

.single-right-grid-right a.title:hover {
  text-decoration: none;
  color: var(--clr-accent);
}

.single-right-grid-right p.author {
  font-size: 14px;
  color: var(--clr-text-muted);
  margin: .5em 0;
}

.single-right-grid-right p.author {
  font-size: 13px;
  color: var(--clr-text-muted);
  margin: 0em 0;
}

.single-right-grid-right p.author a {
  color: var(--clr-primary);
  text-decoration: none;
  transition: var(--transition);
}

.single-right-grid-right p.author a:hover {
  color: var(--clr-accent);
}

.single-right-grid-right p.views {
  font-size: 12px;
  color: var(--clr-text-dim);
  margin: 0;
}

.single-right-grid-left {
  padding-left: 0;
}

.single-right-grid-right {
  padding-right: 0;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-main-grids {
  padding: 0 0 1em 3em;
}

.about-grids {
  margin: 5em 0 2em 0;
}

.about-left-grids {
  padding: 2em;
  border: solid 1px var(--clr-border);
  background: var(--clr-card);
  border-radius: var(--radius);
}

.about-left-img {
  padding-left: 0;
}

span.glyphicon.glyphicon-time.about-clock :before {
  content: "\e023" !important;
  color: var(--clr-text-dim) !important;
  font-size: 9em !important;
}

span.glyphicon.glyphicon-user {
  color: var(--clr-primary);
  font-size: 7em;
  line-height: 1.3em;
}

.about-left-img span.glyphicon-envelope {
  color: var(--clr-primary);
  font-size: 7em;
  line-height: 1.3em;
}

.about-left-img img {
  width: 100%;
  border-radius: var(--radius);
}

.about-left-info a {
  font-size: 20px;
  color: var(--clr-accent);
  margin: 0 0 .5em 0;
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
}

.about-left-info a:hover {
  color: var(--clr-primary);
}

.about-left-info p {
  font-size: 13px;
  color: var(--clr-text-muted);
  margin: 0;
  line-height: 1.8em;
}

.about-bottom-grids:nth-child(2) {
  margin-top: 4em;
}

.about-bottom-grids:nth-child(3) {
  margin-top: 4em;
}

.about-bottom-grids {
  margin-top: 2em;
}

/* ============================================================
   TERMS PAGE
   ============================================================ */
.terms-info {
  margin: 2em 0 0 0;
}

.terms-info-grid {
  margin-bottom: 2em;
}

.terms-info-grid h3 {
  font-size: 16px;
  color: var(--clr-text);
  margin: 0 0 1em 0;
  font-weight: 700;
  font-family: 'Inter', 'Open Sans', sans-serif;
}

.terms-info-grid p {
  font-size: 13px;
  color: var(--clr-text-muted);
  margin: 0 0 0 1em;
  line-height: 1.8em;
}

.terms-info-grid p.terms-info-text {
  margin: 1em 0 0 1em;
}

/* ============================================================
   NEWS PAGE
   ============================================================ */
.news-grids {
  margin-top: 2em;
  padding: 2em;
  background: var(--clr-card);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
}

.news-left {
  padding-left: 0;
}

.news-right {
  padding-left: 1em;
}

.news-left h3 {
  font-size: 20px;
  color: var(--clr-accent);
  margin: 0 0 .5em 0;
  font-weight: 700;
}

.news-left ol {
  padding: 0;
  margin: 2em 0 0 0;
}

.news-left ol li {
  font-size: 13px;
  color: var(--clr-text-muted);
  margin: 0 0 .5em 1em;
  line-height: 1.8em;
}

.news-right ol li a {
  font-size: 13px;
  color: var(--clr-text-muted);
  margin: 0 0 .5em 1em;
  line-height: 1.8em;
  transition: var(--transition);
}

.news-right ol li a:hover {
  color: var(--clr-accent);
  text-decoration: none;
}

/* ============================================================
   COPYRIGHT PAGE
   ============================================================ */
.copy-info ol {
  margin: 1em 0;
}

.copy-info ol li a {
  font-size: 13px;
  color: var(--clr-text-muted);
  margin: 0;
  line-height: 1.8em;
  transition: var(--transition);
}

.copy-info ol li a:hover {
  color: var(--clr-accent);
  text-decoration: none;
}

.copy-grid h4 {
  font-size: 20px;
  color: var(--clr-text);
  margin: 0 0 1em 0;
  font-weight: 400;
}

.copy-bottom-grids {
  margin-top: 2em;
}

.copy-bottom-grid h5 {
  font-size: 18px;
  color: var(--clr-accent);
  margin: 0 0 1em 0;
  font-weight: 700;
}

.copy-grid {
  margin-top: 3em;
}

/* ============================================================
   DEVELOPERS PAGE
   ============================================================ */
.developers-banner {
  background: url(../images/dev-img.jpg) no-repeat 0px 0px;
  background-size: cover;
  padding: 14em 0 10em 0;
  position: relative;
}

.developers-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15,15,26,0.75) 0%, rgba(124,58,237,0.25) 100%);
}

.developers-info {
  width: 60%;
  position: relative;
  z-index: 1;
}

.developers-info h3 {
  color: #fff;
  font-size: 36px;
  margin: 0;
  font-weight: 700;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.developers-info p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 17px;
  line-height: 1.8em;
  margin: 1em 0 0 0;
}

.d-main {
  padding: 3em 0;
}

.developers-grids {
  margin: 4em 0 3em;
}

.developers-grid {
  background: var(--clr-card);
  padding: 2em;
  margin-bottom: 3em;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  transition: box-shadow var(--transition), border-color var(--transition);
}

.developers-grid:hover {
  border-color: var(--clr-primary);
  box-shadow: var(--shadow-glow);
}

.developers-grid a {
  color: var(--clr-accent);
  font-size: 24px;
  margin: 0;
  text-decoration: none;
  font-weight: 700;
  transition: var(--transition);
}

.developers-grid a:hover {
  color: var(--clr-primary);
}

.developers-grid p {
  font-size: 13px;
  line-height: 1.8em;
  color: var(--clr-text-muted);
  margin: 1em 0 0 0;
}

/* ============================================================
   CREATORS PAGE
   ============================================================ */
.creators-banner {
  background: url(../images/create.jpg) no-repeat 0px -105px !important;
  background-size: cover !important;
  position: relative;
}

.creators-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15,15,26,0.7) 0%, rgba(124,58,237,0.2) 100%);
}

.creators-grids {
  margin: 4em 0 3em;
}

.creators-grid {
  background: var(--clr-card);
  padding: 2em;
  margin-bottom: 3em;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  transition: box-shadow var(--transition), border-color var(--transition);
}

.creators-grid:hover {
  border-color: var(--clr-primary);
  box-shadow: var(--shadow-glow);
}

.creators-grid a {
  color: var(--clr-accent);
  font-size: 24px;
  margin: 0;
  text-decoration: none;
  font-weight: 700;
  transition: var(--transition);
}

.creators-grid a:hover {
  color: var(--clr-primary);
}

.creators-grid p {
  font-size: 13px;
  line-height: 1.8em;
  color: var(--clr-text-muted);
  margin: 1em 0 0 0;
}

.creators-bottom {
  padding: 3em 0;
}

.creators-bottom-grids-info h3 {
  text-align: center;
  color: var(--clr-accent);
  font-size: 24px;
  margin: 0;
  font-weight: 700;
}

.creators-bottom-grids {
  margin: 6em 0 0 0;
}

.creators-bottom-grid {
  text-align: center;
}

.creators-bottom-grid h4 {
  color: var(--clr-text);
  margin: 2em 0 1em 0;
  font-size: 18px;
  font-weight: 600;
}

.creators-bottom-grid p {
  color: var(--clr-text-muted);
  font-size: 13px;
  margin: 0 auto;
  width: 80%;
  line-height: 1.8em;
}

.services-icon {
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark));
  width: 100px;
  height: 100px;
  line-height: 12em;
  margin: 0 auto;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  box-shadow: 0 0 30px var(--clr-primary-glow);
}

.glyphicon {
  position: relative;
  top: 2px;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.services-icon span.glyphicon-globe {
  font-size: 3.5em;
  color: #fff;
}

.glyphicon-magnet {
  font-size: 3.5em;
  color: #fff;
}

.glyphicon-cog {
  font-size: 3.5em;
  color: #fff;
}

/* ============================================================
   TRY SECTION
   ============================================================ */
.try-banner {
  background: url(../images/try-banner.jpg) no-repeat 0px 1px !important;
  background-size: cover;
  position: relative;
}

.try-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 26, 0.6);
}

.try-left-info {
  background: var(--clr-card);
  padding: 2em;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
}

.try-left-info h3 {
  color: var(--clr-accent);
  font-size: 24px;
  margin: 0;
  font-weight: 700;
}

.try-left-info p {
  font-size: 13px;
  line-height: 1.8em;
  color: var(--clr-text-muted);
  margin: 1em 0 0 0;
}

.try-right-info {
  background: var(--clr-card);
  padding: 2em;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
}

.try-right-left h3 {
  color: var(--clr-accent);
  font-size: 3em;
  margin: 0;
  font-weight: 700;
}

.try-right-left p {
  font-size: 13px;
  line-height: 1.8em;
  color: var(--clr-text-muted);
  margin: 1em 0 0 0;
}

.try-right-left img {
  width: 100%;
  border-radius: var(--radius);
}

/* ============================================================
   UPLOAD SECTION
   ============================================================ */
.upload {
  padding: 8em 0;
  background: var(--clr-surface);
}

.upload-right {
  padding: 10em 0;
  background: var(--clr-card);
}

.upload-file input[type="file"] {
  opacity: 0;
  width: 75px;
  height: 75px;
  display: inline-block;
  border: 0px;
  outline: none;
  position: absolute;
  left: 47.6%;
  top: 231px;
  cursor: pointer;
  border-radius: 5%;
  -webkit-border-radius: 5%;
  -ms-border-radius: 5%;
  -moz-border-radius: 5%;
  -o-border-radius: 5%;
}

.services-icon {
  background: var(--clr-surface);
  border: 2px dashed var(--clr-primary);
  width: 75px;
  height: 75px;
  line-height: 10em;
  text-align: center;
  position: relative;
  margin: 0 auto;
  border-radius: var(--radius);
  -webkit-border-radius: var(--radius);
  -ms-border-radius: var(--radius);
  -moz-border-radius: var(--radius);
  -o-border-radius: var(--radius);
  transition: var(--transition);
}

.services-icon:hover {
  border-color: var(--clr-accent);
  box-shadow: var(--shadow-glow);
}

.glyphicon-open {
  font-size: 4.5em;
  color: var(--clr-primary);
}

.upload-info {
  text-align: center;
  margin: 3em 0 0 0;
}

.upload-info h5 {
  color: var(--clr-text);
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.upload-info span {
  font-size: 14px;
  color: var(--clr-text-muted);
}

.upload-info p {
  font-size: 14px;
  color: var(--clr-text-dim);
  margin: 0;
}

.upload-right-bottom-grids {
  margin: 2em 0 0 0;
  background: var(--clr-card);
  padding: 3em;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
}

.upload-right-bottom-left h4 {
  color: var(--clr-text);
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.upload-right-bottom-left ul {
  padding: 0;
  margin: 2em 0 0 0;
}

.upload-right-bottom-left ul li {
  display: block;
  margin: 1em 0;
}

.upload-right-bottom-left ul li a {
  font-size: 13px;
  color: var(--clr-text-muted);
  margin: 1em 0;
  text-decoration: none;
  background: url(../images/h-arrow.png) no-repeat 0px 4px;
  padding-left: 1.5em;
  transition: var(--transition);
}

.upload-right-bottom-left ul li a:hover {
  text-decoration: none;
  color: var(--clr-accent);
}

/* ============================================================
   NEWS MAIN GRIDS
   ============================================================ */
.news-main-grids {
  padding: 0 0 1em 3em;
}

/* ============================================================
   SIDEBAR BOTTOM / SOCIAL ICONS
   ============================================================ */
.side-info-bottom {
  position: relative;
}

.side-bottom {
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 3%;
}

.side-bottom-icons {
  margin-bottom: 2em;
}

.side-bottom-icons ul {
  padding: 0;
  margin: 0;
}

.side-bottom-icons ul li {
  display: inline-block;
  margin: 0 .3em;
}

.side-bottom-icons ul li a.facebook {
  background: url(../images/social.png) no-repeat 0px 0px;
  width: 30px;
  height: 30px;
  display: block;
  filter: hue-rotate(230deg) saturate(2);
  transition: var(--transition);
}

.side-bottom-icons ul li a.twitter {
  background: url(../images/social.png) no-repeat -30px 0px;
  filter: hue-rotate(230deg) saturate(2);
}

.side-bottom-icons ul li a.chrome {
  background: url(../images/social.png) no-repeat -60px 0px;
  filter: hue-rotate(230deg) saturate(2);
}

.side-bottom-icons ul li a.dribbble {
  background: url(../images/social.png) no-repeat -90px 0px;
  filter: hue-rotate(230deg) saturate(2);
}

.side-bottom-icons ul li a.facebook:hover {
  opacity: .7;
  transform: translateY(-2px);
}

/* ============================================================
   COPYRIGHT FOOTER
   ============================================================ */
.copyright p {
  color: var(--clr-text-dim);
  margin: 0;
  font-size: 13px;
  text-align: center;
}

.copyright p a {
  color: var(--clr-text-dim);
  text-decoration: none;
  transition: var(--transition);
}

.copyright p a:hover {
  color: var(--clr-accent);
}

/* ============================================================
   TOP NAVIGATION (MOBILE TOGGLE)
   ============================================================ */
.top-navigation {
  display: none;
  color: var(--clr-accent);
}

/* ============================================================
   CUSTOM SELECT (SIDEBAR)
   ============================================================ */
.custom-select {
  position: relative;
  font-family: 'Inter', Arial, sans-serif;
}

.custom-select select {
  display: none;
}

.select-selected {
  background-color: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  color: var(--clr-text-muted);
  transition: var(--transition);
}

.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: var(--clr-primary) transparent transparent transparent;
}

.select-selected.select-arrow-active:after {
  border-color: transparent transparent var(--clr-primary) transparent;
  top: 7px;
}

.select-items div,
.select-selected {
  color: var(--clr-text-muted);
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent var(--clr-border) transparent;
  cursor: pointer;
  user-select: none;
}

.select-items {
  position: absolute;
  background-color: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: 0 0 var(--radius) var(--radius);
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  box-shadow: var(--shadow-md);
}

.select-hide {
  display: none;
}

.select-items div:hover {
  background-color: rgba(139, 92, 246, 0.12);
  color: var(--clr-accent);
}

/* ============================================================
   FOOTER AREA BOTTOM (footer.tpl)
   ============================================================ */
.footer-area-bottom {
  background: var(--clr-footer);
  border-top: 1px solid var(--clr-border);
  padding: 1.5em 0;
}

/* ============================================================
   RESPONSIVE — MAX-WIDTH 1366px
   ============================================================ */
@media (max-width: 1366px) {
  .slid-bottom-grid    { width: 43%; }
  .slid-bottom-right   { width: 57%; }
  .show-grid-right     { padding: 2em 0 0 2em; }
  .resent-grid-info p.author-info { font-size: 12px; }
}

/* ── 1280px ── */
@media (max-width: 1280px) {
  .time         { top: 91% !important; }
  .clck         { right: 11%; }
  .small-clck   { right: 14% !important; }
  .small-time   { top: 85% !important; }
  .show-time    { top: 85% !important; }
  .show-clock   { right: 26%; }
  .slider-time  { top: 88% !important; }
  .history-left { width: 83px !important; height: 83px; }
  .movie-time   { top: 93% !important; }
  .movie-clock  { right: 17% !important; }
  .sports-clock { right: 21% !important; }
  .sports-tome  { top: 80% !important; }
}

/* ── 1080px ── */
@media (max-width: 1080px) {
  form.navbar-form.navbar-right  { width: 47%; }
  .header-top-right              { margin: .5em 0; }
  .sidebar                       { padding: 0 10px 20px 10px; }
  .time                          { top: 89% !important; }
  .clck                          { right: 13%; }
  .slid-bottom-grid              { width: 51%; }
  .slid-bottom-right             { width: 49%; }
  .resent-grid-info p.author a.author { padding-left: 1.5em; }
  .small-clck                    { right: 17% !important; }
  .small-time                    { top: 83% !important; }
  .slider-time                   { top: 86% !important; }
  .show-video-grid               { width: 33.33% !important; margin-bottom: 2em; }
  .show-time                     { top: 90% !important; }
  .show-clock                    { right: 17%; bottom: 2%; }
  .show-grid-right               { padding: 1em 0 0 1em; }
  .show-grid-left                { width: 80%; }
  .show-grid-right               { width: 20%; }
  .history-right                 { width: 90%; }
  .movie-clock                   { right: 22% !important; bottom: 2%; }
  .recommended-grid-movie-info ul li  { display: block !important; width: 100%; }
  .recommended-grid-movie-info ul li.right-list { text-align: left; }
  .sports-tome                   { top: 74% !important; }
  .sports-clock                  { right: 25% !important; }
  span.glyphicon.glyphicon-user  { font-size: 5em; }
  .about-left-img span.glyphicon-envelope { font-size: 5em; }
  .about-left-info a             { font-size: 18px; }
  .song-grid-right               { width: 18%; margin-left: 1em; }
  .share li                      { font-size: 13px; }
  .share li a                    { font-size: 13px; }
  .song-info h3                  { font-size: 20px; }
  .single-right-grid-right       { padding: 0; }
  .single-right-grid-right a.title { font-size: 13px; }
  .callbacks_nav                 { right: 7%; }
}

/* ── 1024px ── */
@media (max-width: 1024px) {
  form.navbar-form.navbar-right { width: 43%; }
  .slid-bottom-grid             { width: 100%; float: none; }
  .slid-bottom-right            { text-align: left; }
  .recommended-grid-info ul li  { display: block; width: 100%; }
  .recommended-grid-info ul li.right-list { text-align: left; }
  .history-right                { width: 88%; }
  .share li                     { font-size: 12px; }
  .show-grid-right h3           { font-size: 15px; }
  .sports-recommended-grid      { width: 33.33% !important; margin-bottom: 2em !important; }
  .sports-tome                  { top: 84% !important; }
  .sports-clock                 { right: 16% !important; bottom: 4%; }
}

/* ── 991px ── */
@media (max-width: 991px) {
  body { padding: 0; }
  nav.navbar.navbar-inverse.navbar-fixed-top { position: inherit; }
  .t-menu                        { float: left; }
  .t-img                         { float: right; }
  form.navbar-form.navbar-right  { width: 41%; }
  .sidebar                       { float: none !important; position: inherit; width: 100%; border-right: none; border-bottom: 1px solid var(--clr-border); }
  .recommended-grid              { float: left; width: 25%; margin-bottom: 2em; }
  .slider-top-grids              { width: 33.33% !important; float: left !important; }
  .side-bottom                   { position: inherit; padding: 2em 0; }
  .drop-navigation               { display: none; margin-top: 1em; }
  .top-navigation                { display: block; padding: 20px; cursor: pointer; font-size: 2em; color: var(--clr-accent); position: relative; text-align: center; margin: 0 auto; }
  ul.nav-sidebar                 { display: block; margin: 0; }
  ul.nav.nav-sidebar li a        { padding: .8em 0 .8em 35em; }
  .sidebar                       { padding: 0; margin: 0; }
  .sidebar ul.nav-sidebar li     { display: block; }
  .sidebar ul li a               { padding: .3em 0; display: block; float: none; color: var(--clr-text-muted); }
  .nav-sidebar ul li a           { padding: .5em 0 .5em 39em !important; }
  .main                          { padding: 2em 0 0 0; float: none !important; margin: 0; width: 100%; }
  .show-grid-left                { float: left; }
  .show-grid-right               { float: left; }
  .history-left                  { float: left; }
  .history-left p                { margin: 1.7em 0 0 0; }
  .history-right                 { float: left; }
  .english-grid                  { margin-top: 0em !important; }
  .single-left                   { float: left; width: 70%; }
  .single-right                  { padding: 2em; float: left; width: 30%; }
  .single-right-grid-left        { padding: 0; margin-bottom: 1em; }
  .about-left-grids              { text-align: center; }
  .creators-bottom-grid          { margin-bottom: 2em; }
  .try-left                      { margin-bottom: 2em; }
  .try-right-left                { margin-bottom: 2em; }
}

/* ── 800px ── */
@media (max-width: 800px) {
  form.navbar-form.navbar-right { width: 34%; margin-left: 4em; }
}

/* ── 768px ── */
@media (max-width: 768px) {
  form.navbar-form.navbar-right { margin-left: 3em; width: 33%; }
  ul.nav.nav-sidebar li a       { padding: .8em 0 .8em 27em; }
  .nav-sidebar ul li a          { padding: .5em 0 .5em 31em !important; }
  .time                         { top: 87% !important; }
  .clck                         { right: 16%; }
  .small-clck                   { right: 19% !important; }
  .small-time                   { top: 79% !important; }
  .recommended-grids            { margin: 2em 0; }
  .slider-time                  { top: 83% !important; }
  .show-clock                   { right: 20%; }
  .show-grid-left               { width: 75%; }
  .show-grid-right              { width: 25%; }
  .song                         { width: 100%; float: none; }
  .song-grid-right              { width: 100%; margin: 1em 0; float: none; }
  .share li                     { display: inline-block; margin: 0.5em 0 0 .8em; }
  .share li.view                { display: inline-block; }
  .movie-clock                  { right: 28% !important; bottom: 3%; }
  .show-time                    { top: 88% !important; }
  .sports-tome                  { top: 84% !important; }
  .developers-info h3           { font-size: 30px; }
  .developers-info              { width: 75%; }
  .developers-info p            { font-size: 14px; }
  .developers-banner            { padding: 10em 0 7em 0; }
  .footer                       { padding: 2em 0; }
  .footer-grids                 { padding: 0 2em; }
  .footer-bottom ul li.languages { width: 21%; }
}

/* ── 767px ── */
@media (max-width: 767px) {
  .sidebar                           { display: block; }
  .navbar-inverse .navbar-toggle     { display: none; float: none; }
  .navbar-inverse .navbar-collapse,
  .navbar-inverse .navbar-form       { display: block; border: none; }
  form.navbar-form.navbar-right      { width: 38%; margin: 0; }
  .top-search form input[type="submit"] { right: 26px; top: 18px; }
  a.navbar-brand                     { float: none; }
  a.navbar-brand                     { display: block; text-align: center !important; width: 25%; margin: 0 auto 1em auto; padding: 0; }
}

/* ── 640px ── */
@media (max-width: 640px) {
  .sidebar                           { display: block; }
  .navbar-inverse .navbar-toggle     { display: none; float: none; }
  .navbar-inverse .navbar-collapse,
  .navbar-inverse .navbar-form       { display: block; border: none; }
  form.navbar-form.navbar-right      { width: 38%; margin: 0; }
  .top-search form input[type="submit"] { right: 26px; top: 18px; }
  a.navbar-brand                     { float: none; }
  a.navbar-brand                     { display: block; text-align: center !important; width: 25%; margin: 0 auto 1em auto; padding: 0; }
  ul.nav.nav-sidebar li a            { padding: .8em 0 .8em 19em; }
  .nav-sidebar ul li a               { padding: .5em 0 .5em 26em !important; }
  ul.nav-sidebar                     { display: block; margin-right: 0; margin-left: 0; }
  .upload-file input[type="file"]    { left: 44.3%; top: 332px; }
  .clck                              { right: 20%; }
  .time                              { top: 85% !important; }
  .small-clck                        { right: 24% !important; }
  .small-time                        { top: 75% !important; }
  .slider-time                       { top: 80% !important; }
  .callbacks_nav                     { right: 10%; }
  .footer-bottom ul li.languages     { width: 30%; margin-bottom: 2em; }
  .video-grid iframe                 { height: 223px; }
  .box input[type="text"],
  .box textarea                      { width: 100%; }
  .box textarea                      { min-height: 130px; width: 100%; }
  .all-comments-buttons ul li a.top  { font-size: 12px; padding: .5em 1em; }
  .show-grid-left                    { width: 100%; float: none; }
  .show-grid-right                   { width: 100%; float: none; padding: 2em 0 2em 2em; }
  .show-time                         { top: 88% !important; }
  .history-right                     { width: 84%; }
  .sports-tome                       { top: 79% !important; }
  .about-left                        { margin-bottom: 2em; }
  .developers-banner                 { padding: 5em 0; }
  .developers-info                   { width: 90%; }
  .creators-grids                    { margin: 2em 0 2em; }
  .creators-bottom                   { padding: 0em 0; }
}

/* ── 480px ── */
@media (max-width: 480px) {
  a.navbar-brand img                  { width: 100%; }
  .file a                             { font-size: 12px; }
  .signin a                           { font-size: 12px; }
  .top-search form input[type="text"] { padding: 6px 30px 6px 12px; }
  .form-control                       { height: 31px; }
  a.navbar-brand                      { margin: 0 auto 0em auto; }
  .upload-file input[type="file"]     { left: 41.6%; top: 310px; }
  .top-navigation                     { padding: 10px; }
  .slider-top-grids                   { width: 100% !important; float: none !important; }
  .recommended-grid-info ul li        { width: 49%; }
  .recommended-grid-info ul li.right-list { text-align: right; }
  .resent-grid-info p.author a.author { padding-left: 2em; }
  .slider-first:nth-child(3)          { display: none; }
  .slider-first:nth-child(4)          { display: none; }
  .slider-first                       { width: 50%; }
  .callbacks_nav                      { top: 100%; right: 15%; }
  .callbacks_nav.next                 { right: 4%; }
  .recommended-grid                   { width: 50%; }
  ul.nav.nav-sidebar li a             { padding: .8em 0 .8em 14em; }
  .resent-grid-info p.author-info     { font-size: 13px; }
  .resent-grid-info p.views-info      { font-size: 13px; }
  .footer-bottom ul li.languages      { width: 36%; }
  .bfh-countries                      { height: 35px; }
  .time                               { top: 90% !important; right: 2%; }
  .clck                               { right: 12%; bottom: 3%; }
  .small-time                         { top: 81% !important; }
  .small-clck                         { right: 20% !important; }
  .slider-time                        { top: 85% !important; }
  .single-left                        { float: none; width: 100%; }
  .single-right                       { float: none; width: 100%; }
  .show-clock                         { right: 29%; }
  .show-time                          { top: 84% !important; }
  .history-right                      { width: 80%; }
  .nav-sidebar ul li a                { padding: .5em 0 .5em 18em !important; }
  .video-info-grid ul li              { width: 100%; }
  .video-info-grid ul li.right-list   { text-align: left !important; }
  .recommended-grid-movie-info ul li  { display: block !important; width: 100% !important; }
  .recommended-grid-movie-info ul li.right-list { text-align: left !important; }
  .show-time                          { top: 91% !important; }
  .movie-clock                        { right: 21% !important; }
  .sports-clock                       { right: 27% !important; }
  .sports-tome                        { top: 74% !important; }
  .creators-banner                    { background: url(../images/create.jpg) no-repeat -11px 1px !important; background-size: cover !important; }
}

/* ── 320px ── */
@media (max-width: 320px) {
  a.navbar-brand                      { width: 35%; }
  form.navbar-form.navbar-right       { width: 100%; margin: 0; float: none !important; padding: 0 0 0.5em 0; }
  .top-search form input[type="submit"] { right: 14px; top: 6px; }
  .top-search form input[type="text"] { padding: 6px 36px 6px 12px; }
  .header-top-right                   { float: none; }
  ul.nav.nav-sidebar li a             { padding: .8em 0 .8em 8em; }
  .nav-sidebar ul li a                { padding: .5em 0 .5em 12em !important; }
  .callbacks_nav                      { right: 20%; }
  .clck                               { right: 16%; }
  .time                               { top: 87% !important; }
  .top-navigation                     { font-size: 1.5em; }
  .t-img img                          { width: 74%; }
  .recommended-info h3                { font-size: 15px; }
  .resent-grid-info a.title-info      { font-size: 14px; }
  .recommended-grid-info h3           { line-height: .8em; }
  .recommended-grid-info a.title      { font-size: 13px; }
  .small-clck                         { right: 27% !important; }
  .small-time                         { top: 73% !important; }
  .slider-time                        { top: 79% !important; }
  .footer-bottom ul li.languages      { width: 44%; }
  .footer-bottom ul li.languages select.form-control { font-size: 11px; }
  .footer-bottom ul li a.f-history    { font-size: 12px; }
  .heading-right a                    { padding: 5px 15px; }
  .heading-right                      { margin: 0em 0 0 3em; }
  .show-video-grid                    { width: 50% !important; }
  .show-clock                         { right: 30%; }
  .small-time                         { top: 75% !important; }
  .show-top-grids                     { padding: 0; }
  .recommended-info p.history-text    { font-size: 12px; }
  .history-grids                      { margin: 2em 0; }
  .history-left p                     { font-size: 14px; }
  .history-left                       { width: 60px !important; height: 60px; }
  .history-right h5                   { font-size: 14px; }
  .news-main-grids                    { padding: 0 0 1em 1em; }
  .history-right                      { width: 79%; }
  .show-time                          { top: 83% !important; }
  .movie-clock                        { right: 26% !important; }
  .movie-time                         { top: 88% !important; }
  .sports-recommended-grid            { width: 50% !important; }
  .song-info h3                       { font-size: 15px; }
  .video-grid iframe                  { height: 152px; }
  .published p                        { font-size: 12px; }
  .box input[type="text"],
  .box textarea                       { padding: 6px 10px; }
  .box textarea                       { min-height: 95px; }
  .all-comments-buttons ul li         { margin: 1em; }
  .all-comments-buttons ul li:nth-child(1) { margin-left: 1em; }
  .media-body p                       { font-size: 12px; }
  .single-right h3                    { font-size: 15px; }
  ul.nav.nav-sidebar li a             { font-size: 12px; }
  .copyright p                        { font-size: 12px; }
  .about-grids                        { margin: 2em 0 2em 0; }
  .about-main-grids                   { padding: 0 0 1em 1em; }
  .about-left-grids                   { padding: 1em; }
  .about-left-info p                  { font-size: 12px; }
  .footer-top-nav ul li               { margin: 0.5em 1em; }
  .news-left ol li                    { font-size: 12px; }
  .news-right ol li a                 { font-size: 12px; }
  .copy-grid h4                       { font-size: 16px; line-height: 1.4em; }
  .developers-info h3                 { font-size: 24px; }
  .developers-info p                  { font-size: 12px; }
  .creators-banner                    { background: url(../images/create.jpg) no-repeat -118px 0px !important; background-size: cover !important; padding: 3em 0; }
  .creators-top-grid                  { padding: 0; }
  .developers-banner                  { padding: 2em 0; }
  .creators-grid a                    { font-size: 18px; }
  .creators-grid p                    { font-size: 12px; }
  .creators-bottom-grids-info h3      { font-size: 18px; }
  .creators-bottom-grids              { margin: 2em 0 0 0; }
  .creators-bottom-grid               { padding: 0; }
  .creators-bottom-grid p             { font-size: 12px; }
  .developers-grid a                  { font-size: 18px; }
  .developers-grid p                  { font-size: 12px; }
  .developers-grid                    { padding: 1em; margin-bottom: 2em; }
  .terms-info-grid p                  { font-size: 12px; }
  .feedback-grid p                    { font-size: 13px; }
  .try-left                           { padding: 0; }
  .try-left-info h3                   { font-size: 18px; }
  .try-left-info p                    { font-size: 12px; }
  .try-right-left h3                  { font-size: 18px; }
  .try-right                          { padding: 0; }
  .footer-top-nav ul li a             { font-size: 13px; }
  .try-right-left                     { padding: 0; }
  .try-right-left p                   { font-size: 12px; }
  .try-banner                         { background: url(../images/try-banner.jpg) no-repeat 0px 1px !important; background-size: cover; }
  .footer-bottom ul li a.f-history    { padding: .52em 1em .52em 3em; }
}