/*------------------------------------------------------------------
[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: #000000;
  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: 20px;
  padding-bottom: 20px;
}

.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;
}

.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;
  }
}

/* Tablets */
@media (min-width: 768px) {
  .container {
    padding: 30px 50px;
  }

  .btn {
    width: auto;
    font-size: 18px;
  }

  .row {
    display: flex;
    flex-wrap: wrap;
  }

  .col-6 {
    width: 50%;
  }
}

/* Desktops */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .btn {
    font-size: 20px;
  }
}

@media only screen and (max-width: 767px) {

  .primary-btn,
  .site-btn {
    width: 100%;
    padding: 16px;
    font-size: 18px;
  }
}


    :root {
      /* Core Color Palette */
      --classy-indigo: #4B0082;
      --classy-violet: #6A0DAD;
      --classy-teal-accent: #00CED1;
      --soft-white: #F0F0F0;
  
      /* Social Brand Colors */
      --color-facebook: #3b5998;
      --color-twitter: #1DA1F2;
      --color-instagram: #E1306C;
      --color-youtube: #FF0000;
    }
  
    /* HEADER BASE */
    .header {
      background: linear-gradient(135deg, var(--classy-indigo), var(--classy-violet));
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      z-index: 99;
      transition: background 0.4s ease, box-shadow 0.4s ease;
    }
  
    /* On Scroll — Slightly darker */
    .header.header--normal {
      position: relative;
      background: linear-gradient(135deg, #2b0755, #4B0082);
    }
  
    /* LOGO */
    .header__logo {
      padding: 18px 0;
    }
  
    .header__logo img {
      max-height: 60px;
      transition: transform 0.3s ease;
    }
  
    .header__logo img:hover {
      transform: scale(1.05);
    }
  
    /* MENU */
    .header__nav {
      text-align: right;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  
    .header__menu {
      display: inline-block;
      padding: 25px 0;
      margin-right: 40px;
    }
  
    .header__menu ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
  
    .header__menu ul li {
      display: inline-block;
      margin-right: 35px;
      position: relative;
    }
  
    .header__menu ul li:last-child {
      margin-right: 0;
    }
  
    .header__menu ul li a {
      font-size: 15px;
      text-transform: uppercase;
      color: var(--soft-white);
      font-weight: 600;
      letter-spacing: 0.5px;
      display: inline-block;
      position: relative;
      transition: all 0.3s ease;
      padding-bottom: 4px;
    }
  
    /* underline animation */
    .header__menu ul li a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0%;
      height: 2px;
      background: var(--classy-teal-accent);
      transition: width 0.3s ease;
    }
  
    .header__menu ul li a:hover::after,
    .header__menu ul li.active a::after {
      width: 100%;
    }
  
    /* SOCIAL ICONS */
    .header__right__social {
      display: inline-flex;
      align-items: center;
      gap: 14px;
    }
  
    .header__right__social a {
      font-size: 18px;
      color: var(--soft-white);
      transition: all 0.3s ease;
    }
  
    /* Brand colors */
    .header__right__social a[href*="facebook"] {
      color: var(--color-facebook);
    }
  
    .header__right__social a[href*="twitter"] {
      color: var(--color-twitter);
    }
  
    .header__right__social a[href*="instagram"] {
      color: var(--color-instagram);
    }
  
    .header__right__social a[href*="youtube"] {
      color: var(--color-youtube);
    }
  
    /* Hover → turns white */
    .header__right__social a:hover {
      color: var(--soft-white);
      transform: scale(1.1);
    }
  
    /* DROPDOWN (if used) */
    .header__menu ul li .dropdown {
      position: absolute;
      left: 0;
      top: 45px;
      width: 160px;
      background: rgba(20, 20, 20, 0.9);
      border-radius: 8px;
      padding: 8px 0;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }
  
    .header__menu ul li:hover .dropdown {
      opacity: 1;
      visibility: visible;
      top: 38px;
    }
  
    .header__menu ul li .dropdown li {
      display: block;
    }
  
    .header__menu ul li .dropdown li a {
      color: #fff;
      padding: 8px 20px;
      display: block;
      font-size: 14px;
    }
  
    .header__menu ul li .dropdown li a:hover {
      background: rgba(255, 255, 255, 0.1);
    }
  
    /* MOBILE MENU (for SlickNav or custom) */
    .slicknav_menu {
      display: none;
    }
  
    /* RESPONSIVE */
    @media (max-width: 992px) {
      .header__menu {
        display: none;
      }
  
      .header__right__social {
        display: none;
      }
  
      .slicknav_menu {
        display: block;
      }
    }
-------------------
  Hero
-----------------------*/

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

.hero__text {
  text-align: center;
}

.hero__text span {
  color: #ffffff;
  font-family: "Brush Script MT";
  text-transform: uppercase;
  letter-spacing: 6px;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
  font-size: 4vw;
}

.hero__text h1 {
  font-size: 8vw;
  font-family: "Rockville Solid Regular";
  color: #ffffff;
  margin-bottom: 20px;
  margin-top: 22px;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.hero__text p {
  color: #ffffff;
  margin-bottom: 20px;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
  font-family: "Brush Script MT";
  font-size: 28px;
  border-radius: 15px;
}

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

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

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

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

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

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

  100% {
    bottom: -10px;
  }
}

@keyframes mymove {
  0% {
    bottom: 0;
  }

  100% {
    bottom: -10px;
  }
}

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

.event {
  padding-bottom: 60px;
}

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

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

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

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

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

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

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

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

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

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

.event__item__pic .tag-date span {
  font-size: 15px;
  color: #ffffff;
  display: inline-block;
  background: #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 {
  background: #0d0d0d;
  color: #fff;
  padding: 80px 0;
  overflow: hidden;
  font-family: "Poppins", sans-serif;
}

.section-title h2 {
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.section-title .highlight {
  font-size: 2.5rem;
  font-weight: 900;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ffcc00, #5c00ce);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.track__content {
  max-height: 480px;
  overflow-y: auto;
  padding-right: 10px;
}

.track__content::-webkit-scrollbar {
  width: 6px;
}

.track__content::-webkit-scrollbar-thumb {
  background: #5c00ce;
  border-radius: 10px;
}

.track-card {
  background: #1a1a1a;
  border-radius: 15px;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.track-card:hover {
  transform: translateY(-5px);
  background: #222;
}

.track-cover {
  width: 80px;
  height: 80px;
  border-radius: 15px;
  object-fit: cover;
}

.track-info h4 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 5px;
}

.track-info p {
  color: #aaa;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.track-info audio {
  width: 180px;
  height: 30px;
}

.buy-btn {
  background: linear-gradient(135deg, #5c00ce, #8a2be2);
  color: #fff;
  padding: 8px 18px;
  border-radius: 20px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.buy-btn:hover {
  background: linear-gradient(135deg, #ffcc00, #5c00ce);
  color: #111;
}

.right-section {
  background: linear-gradient(160deg, #240046, #5c00ce);
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  text-align: center;
}

/* Guitar Image Centering */
.guitar-img {
  width: 70%;
  max-width: 300px;
  border-radius: 20px;
  object-fit: contain;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  background: transparent;
}

/* Ensure the entire section stays balanced */
@media (max-width: 992px) {
  .right-section {
    border-radius: 20px;
    margin-top: 30px;
  }

  .guitar-img {
    width: 80%;
    max-width: 250px;
  }
}
.promo-title {
  font-size: 1.8rem;
  font-weight: 700;
  text-transform: uppercase;
}

@media (max-width: 992px) {
  .track {
    padding: 60px 15px;
  }

  .row.align-items-start {
    flex-direction: column;
  }

  .right-section {
    border-radius: 20px;
    margin-top: 30px;
  }

  .track-info audio {
    width: 100%;
  }

  .track-cover {
    width: 70px;
    height: 70px;
  }
}
/* 📱 RESPONSIVE DESIGN */
@media (max-width: 992px) {
  .track {
    padding: 50px 15px;
  }

  .row.align-items-start {
    flex-direction: column;
  }

  .right-section {
    border-radius: 20px;
    margin-top: 30px;
  }

  .guitar-img {
    width: 200px;
  }

  .track-info audio {
    width: 100%;
  }

  .track-cover {
    width: 70px;
    height: 70px;
  }

  .section-title h2,
  .section-title .highlight {
    text-align: center;
  }
}

/* 📱 Smaller Mobile Screens */
@media (max-width: 600px) {
  .track-card {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .track-info audio {
    width: 100%;
    margin-top: 10px;
  }

  .buy-btn {
    margin-top: 10px;
    width: 100%;
    text-align: center;
  }

  .track-cover {
    width: 100%;
    max-width: 220px;
    height: auto;
    border-radius: 20px;
  }

  .right-section {
    padding: 40px 10px;
    border-radius: 30px;
  }

  .promo-title {
    font-size: 1.4rem;
  }
}
/*---------------------
  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 SECTION WITH GRADIENT ANIMATION & SHAPES */
/* ===== COUNTDOWN SECTION (Purple–Blue Themed) ===== */
.countdown.set-bg {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 100px 20px;
  font-family: "Poppins", sans-serif;
  background: linear-gradient(135deg, #3b0ca8, #52057b, #6a00f4, #20005a);
  background-size: 400% 400%;
  animation: gradientMove 10s ease infinite;
  color: #fff;
}

/* Smooth animated gradient */
@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Decorative glow layers */
.countdown.set-bg::before,
.countdown.set-bg::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 150px;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.25;
}

.countdown.set-bg::before {
  top: 0;
  background: radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
}

.countdown.set-bg::after {
  bottom: 0;
  background: radial-gradient(circle at 80% 90%, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
}

/* Centered content box */
.countdown-box {
  max-width: 1000px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 40px;
  padding: 60px 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
  z-index: 2;
  color: #fff;
}

/* Gradient glow border */
.countdown-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 40px;
  padding: 2px;
  background: linear-gradient(135deg, #7a00ff, #ff00b8, #00e0ff);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.6;
  animation: borderGlow 6s ease-in-out infinite;
}

/* Animated border glow */
@keyframes borderGlow {
  0% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.4;
  }
}

/* Text and heading styles */
.countdown__text h1 {
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #ff00e6, #00e0ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.countdown__text h4 {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 40px;
  color: #000000;
}

/* Timer layout */
.countdown__timer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 60px;
  margin-bottom: 50px;
}

.countdown__item span {
  display: block;
  font-size: 64px;
  font-weight: 700;
  color: #4ee2ec;
}

.countdown__item p {
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
  margin-top: 5px;
  color: #000000;
}

/* Button styles */
.buy__tickets .primary-btn {
  display: inline-block;
  background: linear-gradient(90deg, #ff00e6, #6a00f4);
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 50px;
  padding: 14px 36px;
  text-decoration: none;
  letter-spacing: 1px;
  transition: 0.3s;
  box-shadow: 0 4px 15px rgba(255, 0, 230, 0.4);
}

.buy__tickets .primary-btn:hover {
  background: linear-gradient(90deg, #00e0ff, #7a00ff);
  color: #fff;
  box-shadow: 0 4px 25px rgba(0, 224, 255, 0.6);
  transform: translateY(-2px);
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .countdown__timer {
    gap: 30px;
  }

  .countdown__item span {
    font-size: 48px;
  }

  .countdown__text h1 {
    font-size: 32px;
  }
}
/*---------------------
  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;
  position: relative;
  z-index: 1;
}

.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;
}

.breadcrumb-section {
  padding: 20px 0;
  margin-top: 80px;

}

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

.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 SECTION - Modern Indigo Theme
   Combines your image, audio animation, and service cards
------------------------------------------------------ */

.services {
  background: #d6cadd;
  /* Light indigo background */
  padding: 60px 0;
}

/* =================================
   Left Side (Image + Audio Player)
==================================== */
/* Left Side (Image + Audio Player) */
.services__left {
  position: relative;
  display: flex;
  align-items: center;
  /* centers image vertically */
  justify-content: center;
  /* centers image horizontally */
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  animation: kenBurns 18s ease-in-out infinite;
  min-height: 640px;
}

/* Image styling */
.services__left img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 20px;
  transition: transform 0.8s ease-in-out;
  align-self: center;
  /* ensures image stays centered inside flexbox */
  display: block;
}

/* Hover zoom */
.services__left img:hover {
  transform: scale(1.05);
}

/* Audio player */
.services__left audio {
  position: absolute;
  bottom: 25px;
  z-index: 10;
  width: 80%;
  max-width: 400px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50px;
  padding: 8px;
  backdrop-filter: blur(6px);
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 15px rgba(138, 43, 226, 0.4);
  animation: pulseGlow 2.5s infinite ease-in-out;
  cursor: pointer;
}
/* Glowing pulse animation for the audio player */
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.4);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 25px rgba(138, 43, 226, 0.7);
    transform: scale(1.05);
  }

  100% {
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.4);
    transform: scale(1);
  }
}

.services__left audio:hover {
  animation: pulseGlowFast 1.2s infinite ease-in-out;
}

@keyframes pulseGlowFast {
  0% {
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.5);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 35px rgba(138, 43, 226, 0.8);
    transform: scale(1.08);
  }

  100% {
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.5);
    transform: scale(1);
  }
}

/* Ken Burns zoom animation for background image or video */
@keyframes kenBurns {
  0% {
    background-size: 100% 100%;
    background-position: center;
  }

  50% {
    background-size: 110% 110%;
    background-position: top left;
  }

  100% {
    background-size: 100% 100%;
    background-position: center;
  }
}

/* =================================
   Right Side (Service Cards Grid)
==================================== */

.services__list {
  margin: 0;
  padding: 50px 25px;
  background-color:transparent;
  /* matches the indigo bg */
}

/* Main service card style */
.service__item {
  background: #ffffff;
  padding: 80px 30px 40px 30px;
  margin: 15px;
  border-radius: 40px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
  text-align: center;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: calc(100% - 30px);
}

/* Hover effect for service cards */
.service__item:hover {
  transform: translateY(-15px);
  box-shadow: 0 20px 40px rgba(92, 0, 206, 0.2);
}

/* Icon bubble on top of each card */
.service-icon {
  height: 90px;
  width: 90px;
  background: linear-gradient(135deg, #8e2de2, #4a00e0);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -45px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 10px 20px rgba(74, 0, 224, 0.3);
}

.service-icon i {
  font-size: 2.5rem;
  color: #fff;
}

/* Text inside service cards */
.service__item h4 {
  font-size: 22px;
  color: #333;
  font-weight: 700;
  margin-top: 15px;
  margin-bottom: 15px;
}

.service__item p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Equal height for both sides */
.services>.container-fluid>.row {
  display: flex;
  flex-wrap: wrap;
}

.services .col-lg-6 {
  display: flex;
  flex-direction: column;
}
/*---------------------
  Tours
-----------------------*/

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

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

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

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

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

.tours__item__text .tours__text__widget ul {
  float: left;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*---------------------
  Videos
-----------------------*/
/* ======= VIDEO SECTION ======= */
/* === FEATURED LARGE VIDEO CARD (Odhi The Villager) === */
.classy-feature {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 35px;
  overflow: hidden;
  min-height: 450px;
  color: #fff;
  text-decoration: none;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3);
  margin-bottom: 70px;
}

.classy-feature:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
}

/* === Dark overlay === */
.classy-feature .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%);
  z-index: 1;
  transition: background 0.4s ease;
}

.classy-feature:hover .overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%);
}

/* === Centered content === */
.feature__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 40px;
}

/* === Play Button === */
.classy-feature .play-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 3px solid #fff;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  font-size: 32px;
  color: #fff;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

.classy-feature:hover .play-btn {
  background: #fff;
  color: #6c3fff;
  transform: scale(1.08);
}

/* === Title & Description === */
.videos__large__item__text h4 {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  text-transform: capitalize;
  margin-bottom: 15px;
  letter-spacing: 0.5px;
}

.videos__large__item__text p {
  color: #f3f3f3;
  max-width: 700px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.6;
  font-family: "Rajdhani", sans-serif;
}

/* === Pulse Animation on Hover === */
@keyframes pulsePlay {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
  }

  70% {
    box-shadow: 0 0 0 25px rgba(255, 255, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
  }
}

.classy-feature:hover .play-btn {
  animation: pulsePlay 1.6s infinite;
}

/* === Responsive adjustments === */
@media (max-width: 991px) {
  .classy-feature {
    min-height: 400px;
    border-radius: 25px;
  }

  .classy-feature .play-btn {
    width: 80px;
    height: 80px;
    font-size: 26px;
  }

  .videos__large__item__text h4 {
    font-size: 24px;
  }

  .videos__large__item__text p {
    font-size: 15px;
  }
}

@media (max-width: 600px) {
  .classy-feature {
    min-height: 340px;
    border-radius: 20px;
    padding: 20px;
  }

  .classy-feature .play-btn {
    width: 70px;
    height: 70px;
    font-size: 22px;
  }

  .videos__large__item__text h4 {
    font-size: 20px;
  }

  .videos__large__item__text p {
    font-size: 14px;
  }
}
/* === VIDEO GRID SECTION === */
/* ============================= */
/* CLASSY VIDEO SLIDER STYLING  */
/* ============================= */

.videos__slider {
  margin-top: 40px;
}

.video-card {
  background: #b28bff1a;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
  transition: all 0.4s ease;
  color: #fff;
  text-align: left;
  max-width: 320px;
  margin: 0 15px;
  /* ← adds space between cards */
}

.video-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(92, 0, 206, 0.3);
}

/* Video frame section */
.video-frame {
  width: 100%;
  height: 200px;
  background: #000;
  position: relative;
  overflow: hidden;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.video-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 20px 20px 0 0;
}

/* Details section */
.video-details {
  background: linear-gradient(135deg, #b28bff, #7a4ef5);
  padding: 18px 20px 25px;
  border-top: 3px solid rgba(255, 255, 255, 0.15);
  border-radius: 0 0 20px 20px;
  color: #fff;
  font-family: "Poppins", sans-serif;
}

/* Year tag */
.video-year {
  display: inline-block;
  background: rgba(6, 221, 236, 0.2);
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Title */
.video-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #000000;
  margin-bottom: 8px;
}

/* Caption */
.video-caption {
  color: #f0f0f0;
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 15px;
  min-height: 55px;
}

/* Artist */
.video-artist {
  font-weight: 600;
  color: #191970;
  font-size: 0.9rem;
  margin-bottom: 0;
}

/* Owl Carousel adjustments */
.owl-carousel .owl-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.owl-carousel .owl-stage {
  display: flex;
}

.owl-nav button {
  background: transparent;
  border: none;
  font-size: 2rem;
  color: #b28bff;
  transition: 0.3s;
}

.owl-nav button:hover {
  color: #fff;
}
/* === Responsive === */
@media (max-width: 992px) {
  .video-thumb {
    height: 200px;
  }

  .video-info {
    min-height: 160px;
  }
}

@media (max-width: 768px) {
  .video-thumb {
    height: 180px;
  }

  .video-info {
    padding: 15px;
  }

  .video-info h5 {
    font-size: 16px;
  }
}

@media (max-width: 576px) {
  .videos__slider {
    gap: 20px;
  }

  .video-thumb {
    height: 160px;
  }

  .video-info h5 {
    font-size: 15px;
  }

  .video-info p {
    font-size: 13px;
  }
}
/*---------------------
    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;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #eee;
  padding: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  background: #fffefe;
}

.blog__item__pic {
  height: 200px;
  overflow: hidden;
  border-radius: 6px;
}

.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
-----------------------*/
/* --- FAQ SECTION STYLES (Matching Screenshot Design) --- */

/* The main container for the FAQ list, applying some spacing */
.faq-container {
  max-width: 700px;
  /* Optional: Constrain width for better readability */
  margin-left: auto;
  margin-right: auto;
}

/* Individual FAQ Item - The Rounded Box */
.faq-item {
  margin-bottom: 20px;
  padding: 15px 25px;
  background-color: #C9B8FF;
  /* Soft Lilac/Lavender Background */
  border-radius: 12px;
  /* Rounded corners */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Subtle shadow for lift */
  cursor: pointer;
  overflow: hidden;
  /* Important for hiding the content when closed */
  transition: all 0.3s ease-in-out;
}

/* Question Wrapper - Contains the Number, Question Text, and Toggle Icon */
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  user-select: none;
  /* Prevent text selection on click */
}

/* Question Number Style */
.faq-item .num {
  font-size: 1.2em;
  font-weight: 600;
  color: #4A4A99;
  /* Darker purple for the number */
  margin-right: 15px;
  flex-shrink: 0;
  /* Keep the number fixed width */
}

/* Question Heading Style */
.faq-item h3 {
  font-family: 'Poppins', sans-serif;
  /* Maintain your chosen font */
  font-size: 17px;
  font-weight: 500;
  color: #0A091A;
  /* Dark text for contrast */
  margin: 0;
  /* Remove default margin */
  line-height: 1.4;
  flex-grow: 1;
}

/* Toggle Icon (+/-) Style */
.faq-toggle {
  font-size: 1.2em;
  color: #4A4A99;
  /* Darker purple for the icon */
  margin-left: 20px;
  flex-shrink: 0;
}

/* Default state: Hide the minus icon and show the plus icon */
.faq-toggle .icon-minus {
  display: none;
}

.faq-toggle .icon-plus {
  display: inline-block;
}

/* Answer Content - Initially Hidden */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out, padding-top 0.3s ease-in-out;
  padding: 0 15px 0 0;
  /* Align content with the question text */
}

.faq-content p {
  font-size: 15px;
  color: #06001A;
  line-height: 1.6;
  padding-top: 0;
  margin-top: 0;
  padding-left: 35px;
  /* Adjust padding to align with question text after the number */
  padding-bottom: 10px;
}

/* --- ACTIVE/OPEN STATE STYLES --- */

/* Styles for the question box when the answer is open */
.faq-item.faq-active {
  background-color: #ECE6FF;
  /* Slightly lighter background when active (optional) */
}

/* Show the answer content when active */
.faq-item.faq-active .faq-content {
  max-height: 500px;
  /* Large enough value to ensure content fits */
  padding-top: 10px;
  /* Add vertical space above the answer */
}

/* Toggle icon change: Hide plus icon, show minus icon */
.faq-item.faq-active .faq-toggle .icon-plus {
  display: none;
}

.faq-item.faq-active .faq-toggle .icon-minus {
  display: inline-block;
}
/* -----------------------------------
   CONTACT SECTION: 
----------------------------------- */
.contact.spad {
  padding: 80px 0;
  background: #F3E6FF;
  /* light, modern background */
}

.contact .row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  /* ensures equal height cards */
}

.contact__address,
.contact__form {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contact__address {
  background: linear-gradient(135deg, #5a67d8, #7f9cf5);
  color: #fff;
}

.contact__address .section-title h2 {
  color: #fff;
  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
  display: inline-block;
  padding-bottom: 5px;
}

.contact__address p {
  margin-bottom: 25px;
  font-size: 15px;
  line-height: 1.7;
  opacity: 0.95;
}

.contact__address ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact__address ul li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 20px;
}

.contact__address ul li i {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  padding: 10px;
  font-size: 18px;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.contact__address ul li h5 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.contact__address ul li p,
.contact__address ul li span {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

.contact__form {
  margin-left: 20px;
}

.contact__form p {
  margin-bottom: 20px;
  color: #555;
  line-height: 1.6;
}

.contact__form input[type="text"],
.contact__form textarea {
  width: 100%;
  padding: 12px 15px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.contact__form input[type="text"]:focus,
.contact__form textarea:focus {
  border-color: #5a67d8;
  box-shadow: 0 0 0 3px rgba(90, 103, 216, 0.15);
  outline: none;
}

.contact__form .site-btn {
  background: linear-gradient(135deg, #5a67d8, #7f9cf5);
  color: #fff;
  border: none;
  padding: 12px 25px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: 0.3s;
}

.contact__form .site-btn:hover {
  background: linear-gradient(135deg, #434190, #5a67d8);
}

.section-title h2 {
  font-size: 26px;
  margin-bottom: 15px;
  font-weight: 700;
}

@media (max-width: 991px) {
  .contact .row {
    flex-direction: column;
  }

  .contact__form {
    margin-left: 0;
    margin-top: 20px;
  }
}
/*--------------------------------- Responsive Media Quaries -----------------------------*/

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

/* Medium Device = 1200px */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__menu ul li {
    margin-right: 18px;
  }

  .header__menu {
    margin-right: 30px;
  }

  .service__item {
    padding: 40px 30px 30px 40px;
  }

  .skills__content {
    padding: 60px 40px 40px;
  }

  .discography__item__text a {
    margin-right: 0;
    text-align: center;
    margin-bottom: 10px;
  }
}

/* Tablet Device = 768px */

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__right__social {
    display: none;
  }

  .header__menu {
    margin-right: 0;
  }

  .header__menu ul li {
    margin-right: 15px;
  }

  .event .section-title:after {
    width: 560px;
  }

  .track__all {
    text-align: left;
    margin-bottom: 60px;
  }

  .track__content {
    margin-bottom: 120px;
  }

  .track__pic img {
    height: auto;
  }

  .footer {
    height: auto;
  }

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

  .discography__item__text a {
    margin-right: 0;
    text-align: center;
    margin-bottom: 10px;
  }

  .blog__sidebar {
    padding-top: 50px;
  }

  .contact__address {
    margin-bottom: 40px;
  }

  .footer__social::before {
    display: none;
  }

  .footer__social::after {
    display: none;
  }

  .tours__item__pic {
    margin-bottom: 50px;
  }

  .tours__item__text {
    padding-right: 0;
  }

  .countdown {
    padding-bottom: 776px;
  }

  .footer {
    margin-top: -740px;
    background-position: top 0 left 19%;
  }
}

/* Wide Mobile = 480px */

@media only screen and (max-width: 767px) {
  .hero {
    padding-top: 190px;
    padding-bottom: 200px;
  }

  .event .section-title:after {
    display: none;
  }

  .track__all {
    text-align: left;
    margin-bottom: 60px;
  }

  .track__content {
    margin-bottom: 120px;
  }

  .track .p-0 {
    padding: 0 15px !important;
  }

  .track__pic img {
    height: auto;
  }

  .discography__item__text a {
    margin-right: 0;
    text-align: center;
    margin-bottom: 10px;
  }

  .blog__sidebar {
    padding-top: 50px;
  }

  .contact__address {
    margin-bottom: 40px;
  }

  .footer {
    height: auto;
  }

  .footer__social::before {
    display: none;
  }

  .footer__social::after {
    display: none;
  }

  .player_bars {
    width: 240px;
    margin-right: 20px;
  }

  .jp-seek-bar>div {
    width: 140px;
  }

  .countdown__item {
    margin-right: 0;
    margin-bottom: 30px;
    width: 50%;
    float: left;
  }

  .footer__social {
    text-align: left;
  }

  .skills__content {
    height: auto;
  }

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

  .tours__item__pic {
    margin-bottom: 50px;
  }

  .blog__large__widget ul {
    text-align: center;
  }

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

  .blog__option__btn {
    margin-bottom: 30px;
  }

  .blog__details__form form .input__list,
  .contact__form form .input__list {
    margin-right: 0;
    overflow: visible;
  }

  .blog__details__form form .input__list input,
  .contact__form form .input__list input {
    width: 100%;
    margin-right: 0;
  }

  .header__nav {
    display: none;
  }

  .header .container {
    position: relative;
  }

  .slicknav_btn {
    position: absolute;
    right: 15px;
    top: 25px;
    margin: 0;
    border-radius: 0;
    padding: 12px 15px;
    float: none;
    background: #5c00ce;
  }

  .slicknav_nav {
    position: absolute;
    left: 0;
    top: 90px;
    background: #222;
    width: 100%;
  }

  .slicknav_menu {
    background: transparent;
    padding: 0;
    display: block;
  }

  .slicknav_nav ul {
    margin: 0;
    padding: 5px 0;
  }

  .slicknav_nav .slicknav_row,
  .slicknav_nav a {
    padding: 10px 28px;
    margin: 0;
  }

  .slicknav_nav a:hover {
    border-radius: 0;
    background: #5c00ce;
    color: #ffffff;
  }

  .slicknav_nav .slicknav_row:hover {
    border-radius: 0;
    background: #5c00ce;
    color: #ffffff;
  }

  .service__item {
    height: auto;
  }

  .tours__item__text {
    padding-right: 0;
  }

  .countdown {
    padding-bottom: 940px;
  }

  .footer {
    margin-top: -940px;
    background-position: top 0 left 19%;
  }
}

/* Small Device = 320px */

@media only screen and (max-width: 479px) {
  .section-title h1 {
    top: -40px;
    font-size: 79px;
    line-height: 0.8;
  }

  .hero__text h1 {
    font-size: 70px;
  }

  .videos {
    padding-bottom: 0;
  }

  .countdown__text h1 {
    font-size: 50px;
  }

  .single_player_container h4 {
    font-size: 16px;
  }

  .player_bars {
    width: 150px;
    margin-right: 10px;
  }

  .player_controls_box {
    margin-right: 10px;
  }

  .jp-volume-controls {
    width: 68px;
    padding-left: 23px;
  }

  .jp-volume-bar {
    width: 42px;
  }

  .jp-seek-bar>div {
    width: 55px;
  }

  .service__item {
    height: auto;
    padding: 40px 40px 40px 40px;
  }

  .skills__content {
    height: auto;
    padding: 80px 25px 40px;
  }

  .tours__item__text .tours__text__widget ul {
    float: none;
    margin-bottom: 30px;
  }

  .tours__item__text .tours__text__widget .price {
    float: none;
  }

  .tours__item__pic {
    padding-left: 0;
  }

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

  .blog__large__text {
    padding: 30px 20px 0;
  }

  .blog__large__widget {
    margin: 0;
  }

  .blog__details__tags a {
    margin-bottom: 10px;
  }

  .countdown {
    padding-bottom: 980px;
  }

  .footer {
    margin-top: -970px;
    background-position: top 0 left 19%;
  }
}

/* First, add the Keyframes animation to your CSS */
@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0 rgba(194, 24, 91, 0.7);
  }

  100% {
    box-shadow: 0 0 0 20px rgba(194, 24, 91, 0);
  }
}

/* Then, style the button itself */
.play-btn {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #c2185b;
  /* A solid, dark pink */
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  animation: pulse-animation 2s infinite;
  /* Apply the animation */
  transition: transform 0.3s ease;
}

.play-btn i {
  font-size: 24px;
  margin-left: 5px;
}

.play-btn:hover {
  animation-play-state: paused;
  /* Pause the pulse on hover */
  transform: scale(1.1);
}

/* ===================================================
   CUSTOM FANCYBOX VIDEO SIZE
====================================================== */

/* This targets the main container for the video slide */
.fancybox-slide--video {
  padding: 20px;
  /* Adds some space around the video */
}

/* This targets the video player itself */
.fancybox-slide--video .fancybox-content {
  /* You can adjust these values */
  max-width: 40vw;
  /* Sets max width to 80% of the viewport width */
  max-height: 40vh;
  /* Sets max height to 80% of the viewport height */
  overflow: visible;
}

.about__pic img {
  width: 100%;
  height: 70%;


  object-fit: cover;
  border-radius: 10px;
}

.about__pic,
.about__text {
  padding: 20px;
}

.single_player_container {
  border-bottom: 1px solid #eee;
  padding: 15px 0;
}

.track-img img {
  max-width: 100px;
  border-radius: 5px;
}

.track-info h4 {
  font-size: 20px;
  margin: 0;
  font-weight: 600;
}

.track-title {
  font-size: 16px;
  margin: 5px 0;
}

.player_button {
  background: none;
  border: none;
  color: #673ab7;
  font-size: 24px;
}

.buy-btn {
  border: 1px solid red;
  color: red;

  text-decoration: none;
  font-weight: bold;
  transition: 0.3s ease;
  padding: 10px 20px;
  border-radius: 50px;
  /* Fully rounded corners for a "pill" shape */
  margin-right: 15px;
}

.buy-btn:hover {
  background-color: red;
  color: white;
}

.recent__item__pic {
  width: 100px;
  /* Match what works best visually */
  height: 80px;
  overflow: hidden;
  display: block;
}

.blog__option__btn__pic {
  width: 100px;
  height: 100px;
  overflow: hidden;
  display: inline-block;
}

.blog__details__services__item__pic {
  width: 100%;
  height: 200px;
  /* or whatever height fits best */
  overflow: hidden;
}

.blog__details__services__item__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ensures the image fills the space proportionally */
  display: block;
}

.blog__item__pic img {
  width: 100%;
  height: 280px;
  /* Adjust this as needed for your design */
  object-fit: cover;
  display: block;
}

*/ .footer {
  margin-top: 0 !important;
}

/* 2. Add space below your main content sections.
     This ensures there is a clean gap before the footer begins.
     You can adjust the '100px' value if you want more or less space.
*/
.videos.spad,
.about.spad,
.event.spad {
  padding-bottom: 50px;
}

.album-streaming-links a {
  display: inline-block;
  margin: 6px 6px 0 0;
  text-align: center;
  font-size: 18px;
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 50%;
  background-color: #333;
  color: #fff;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.album-streaming-links a:hover {
  transform: scale(1.15);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  color: #fff;
}

/* Specific platform colors */
.album-streaming-links a[title*="SoundCloud"] {
  background: #ff5500;
}

.album-streaming-links a[title*="Spotify"] {
  background: #1DB954;
}

.album-streaming-links a[title*="Apple"] {
  background: #000000;
}

.album-streaming-links a[title*="YouTube"] {
  background: #FF0000;
}

.album-streaming-links a[title*="Boomplay"] {
  background: #0056B3;
}

.album-streaming-links a[title*="HustleSasa"] {
  background: #8e44ad;
}

.blog__sidebar__social a {
  display: inline-block;
  margin: 0 6px;
  font-size: 16px;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 50%;
  background: #444;
  color: #fff;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.blog__sidebar__social a:hover {
  transform: scale(1.15);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  color: #fff;
}

/* Platform-specific hover colors */
.blog__sidebar__social a[href*="facebook"]:hover {
  background-color: #3b5998;
}

.blog__sidebar__social a[href*="twitter"]:hover {
  background-color: #1DA1F2;
}

.blog__sidebar__social a[href*="instagram"]:hover {
  background-color: #d6249f;
}

.blog__sidebar__social a[href*="youtube"]:hover {
  background-color: #FF0000;
}

.blog__details__services__item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.blog__details__services__item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.blog__details__services__item__pic img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.blog__details__services__item:hover img {
  transform: scale(1.05);
}

.blog__details__services__item__text {
  padding: 15px;
  text-align: left;
}

.blog__details__services__item__text h6 {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 8px;
  color: #222;
  transition: color 0.3s ease;
}

.blog__details__services__item__text h6 a {
  text-decoration: none;
  color: inherit;
}

.blog__details__services__item__text h6 a:hover {
  color: #7c3aed;
  /* violet */
}

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

.blog__details__services__item {
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards;
}

@keyframes fadeInUp {
  from {
    transform: translateY(10px);
    opacity: 0;
  }

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

.animated-card {
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
}

.animated-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.zoom-on-hover img {
  transition: transform 0.4s ease;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.zoom-on-hover:hover img {
  transform: scale(1.05);
}

.blog__category {
  color: #ff4a57;
  font-weight: bold;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.blog__title {
  margin-top: 5px;
  font-size: 1.1rem;
  color: #333;
  font-weight: 600;
}

.blog__meta {
  padding: 0;
  margin: 8px 0 0 0;
  list-style: none;
  font-size: 0.85rem;
  color: #777;
}

.blog__meta li {
  display: inline-block;
  margin-right: 15px;
}

.form-group {
  margin-bottom: 15px;
}

.form-control {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.form-control:focus {
  border-color: #6c63ff;
  box-shadow: 0 0 5px rgba(108, 99, 255, 0.5);
}

/* Match form fields to the theme */
.blog__details__form input,
.blog__details__form textarea {
  width: 100%;
  padding: 14px 20px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 15px;
  line-height: 1.5;
  color: #333;
  outline: none;
  transition: all 0.3s ease;
  background-color: #fff;
}

/* Hover / focus effect */
.blog__details__form input:focus,
.blog__details__form textarea:focus {
  border-color: #6a0dad;
  /* Purple shade from your button */
  box-shadow: 0 0 8px rgba(106, 13, 173, 0.3);
}

/* Match textarea height nicely */
.blog__details__form textarea {
  min-height: 140px;
  resize: vertical;
}

/* Style the button (already has .site-btn but ensuring full width and matching feel) */
.blog__details__form .site-btn {
  background-color: #6a0dad;
  /* Purple */
  color: #fff;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.3s ease;
}

.blog__details__form .site-btn:hover {
  background-color: #580a9c;
  /* Darker purple on hover */
}

/* Comment section wrapper */
.comments-list {
  margin-top: 30px;
}

/* Each comment card */
.comment {
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.comment:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}

/* Comment header (name + date) */
.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #6a0dad;
  /* Purple theme */
  color: #fff;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-size: 16px;
}

.comment-meta {
  font-size: 14px;
  color: #777;
}

.comment-author {
  font-weight: 600;
  color: #333;
}

.comment-date {
  font-size: 12px;
  color: #999;
}

/* Comment text */
.comment-text {
  font-size: 15px;
  line-height: 1.6;
  color: #444;
  margin-top: 5px;
}

/* your_style.css */

/* your_style.css */

.scroll-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 45px;
  height: 45px;
  background-color: #ff4b2b;
  /* bright red/orange like your screenshot */
  color: #fff;
  border-radius: 50%;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  z-index: 999;
}

.scroll-top.show {
  opacity: 1;
  visibility: visible;
}

.scroll-top:hover {
  background-color: #ff1a00;
}
/* === Hero Split Section (Sean Paul layout) === */
.hero--split {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}

.hero--split::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 0;
}

.hero__left,
.hero__right {
  position: relative;
  z-index: 2;
}

.hero__text {
  color: #fff;
  padding-left: 8%;
  max-width: 600px;
}

.hero__text span {
  display: block;
  text-transform: uppercase;
  color: #ffdf00;
  font-family: "Now Regular";
  font-size: 1.1rem;
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.hero__text h1 {
  font-family: "Rockville Solid Regular";
  font-size: 4.5rem;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 20px;
  line-height: 1.1;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
}

.hero__text p {
  font-family: "Rajdhani", sans-serif;
  font-size: 1.2rem;
  color: #eee;
  max-width: 500px;
  margin-bottom: 25px;
}

.hero__text .play-btn {
  font-size: 24px;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  height: 70px;
  width: 70px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.hero__text .play-btn:hover {
  background-color: #ffdf00;
  color: #000;
  transform: scale(1.1);
}

/* === Video Preview Box (Right Side) === */
.hero__preview {
  position: relative;
  padding: 20px;
  max-width: 540px;
  margin: auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
  background: rgba(0, 0, 0, 0.3);
}

.hero__preview iframe {
  border-radius: 12px;
  width: 100%;
  height: 320px;
}

/* === Responsive === */
@media (max-width: 991px) {
  .hero--split {
    height: auto;
    padding: 80px 0;
    flex-direction: column;
    text-align: center;
  }

  .hero__text {
    padding-left: 0;
    margin-bottom: 40px;
  }

  .hero__preview {
    width: 90%;
  }

  .hero__text h1 {
    font-size: 2.5rem;
  }
}
.blog-card {
  background: #D9AEFF;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.blog-card-image iframe {
  border-radius: 20px 20px 0 0;
  width: 100%;
  height: 200px;
}

.blog-card-content {
  padding: 20px;
}

.blog-card-content .category {
  display: inline-block;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  color: #fff;
  font-size: 12px;
  border-radius: 10px;
  padding: 4px 10px;
  margin-bottom: 10px;
}

.blog-card-content h4 {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 10px;
}

.blog-card-content p {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  margin-bottom: 15px;
}

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

.author-info img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

.author-info h6 {
  margin: 0;
  font-weight: 600;
  font-size: 14px;
}

.author-info small {
  color: #999;
  font-size: 12px;
}