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

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

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

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

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

body, h1, h2, h3, h4, h5, h6, p, a, span {
  font-family: 'Cinzel Decorative', serif !important;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

html,
body {
  height: 100%;
  font-family: "Cinzel Decorative', serif";
  -webkit-font-smoothing: antialiased;
}

.footer__social__links i {
  display: inline-block !important;
  visibility: visible !important;
  color: white !important;
}

.breadcrumb__links p {
  text-align: justify;
}

.header__menu a:hover {
  color: #ffcc00;
  /* text-decoration: underline; */
}

.Form-container h2 {
  color: white;
  text-align: center;
  font-size: 2.5em;
}

.main-form {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 110vh;
  padding: 25px;
  /* background-color: white; */
  background-image: url("../images/pexels1.webp");
  background-size: cover;
}

.Registered label {
  color: white;
  font-size: 1.2em;
}

a h3 {
  background-color: black;
  color: white;
  width: 25%;
  text-align: center;
  position: absolute;
  left: 37%;
  border-radius: 10px;
}

.Registered b {
  color: white;
}

.Registered {
  margin-top: 25px;
  margin-bottom: 30px;
}

.btn {
  position: absolute;
  left: 45%;
  border: 1.5px solid black;
  border-radius: 10px;
  color: white;
}

.Form-container {
  width: 100%;
  /* max-width: 400px;
	 padding: 20px; */
}

.form-control {
  border: 1px solid black;
  border-radius: 15px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: #111111;
  font-weight: 400;
  font-family: "Cinzel Decorative', serif";
  text-transform: capitalize;
}

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: "Cinzel Decorative', serif";
  color: #444444;
  font-weight: 400;
  line-height: 26px;
  margin: 0 0 5px 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
-----------------------*/

.div {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.Left {
  flex: 1;
}
.Right {
  flex: 1;
}
.Register {
  background-color: black;
  padding: 10px 60px;
  color: white;
  text-align: center;
  border-radius: 20px;
}
.div-center {
  display: flex;
  justify-content: center;
}
.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: 40px;
  color: #e30000;
  font-family: "RCinzel Decorative', serif";
  position: absolute;
  left: 0;
  top: 40px;
  width: 100%;
  z-index: -1;
}

.gap {
  display: flex;
  gap: 200px;
}
.padding {
  padding-top: 50px;
}
.recalls-swiper__slide {
  border-left: 1px solid grey;
  padding: 20px 50px;
}
.recalls-slide__text {
  margin-top: 20px;
}
.recalls-slide__top {
  display: flex;
  gap: 20px;
}
.recalls-slide-top__img-image {
  width: 50px;
}
.set-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

.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: black;
  letter-spacing: 2px;
}

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

.site-btn {
  font-size: 15px;
  color: #ffffff;
  background: black;
  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;
}
.about-pic {
  position: relative;
}
.aboutimg {
  position: absolute;
  border: 10px solid white;
  top: 100px;
  left: 180px;
}
@keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    border: 4px solid #673ab7;
    border-left-color: transparent;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
}

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

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

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.centre {
  text-align: center;
}

.header__logo img {
  width: 100px;
}

.header {
  background: black;
  /* position: fixed; */
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9;
}

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

.header__logo a {
  display: inline-block;
}

.header__nav {
  text-align: right;
}

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

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

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

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

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

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

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

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

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

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

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

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

.header__right__social {
  display: inline-block;
}

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

.header__right__social a:last-child {
  margin-right: 0;
}
/* header responsive */

.header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.header__menu ul {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.header__menu a {
  text-decoration: none;
  color: white;
}

.header__right__social {
  display: flex;
  gap: 10px;
}

.menu-toggle {
  display: none;
  cursor: pointer;
  font-size: 24px;
  color: white;
}

/* Mobile Styles */
@media (max-width: 768px) {
  .header__menu ul {
    flex-direction: column;
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    background-color: #111;
    display: none;
    padding: 20px;
    z-index: 100;
  }

  .header__menu ul.active {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }

  .res-h1 {
    font-size: 18px;
    margin-top: 18vh;
  }
}

/* header  */

.slicknav_menu {
  display: none;
}

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

.hero {
  padding-top: 150px;
  padding-bottom: 150px;
  position: relative;
  backdrop-filter: blur(10px);
  background-image: url("../images/Hero_banner_back.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.heroo {
  padding-top: 150px;
  padding-bottom: 150px;
  position: relative;
  backdrop-filter: blur(10px);
  background-image: url("../images/banner1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.music-production {
  padding-top: 150px;
  padding-bottom: 150px;
  position: relative;
  backdrop-filter: blur(10px);
  background-image: url("../images/music-banner.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.contact-us {
  padding-top: 150px;
  height: 60vh;
  padding-bottom: 150px;
  position: relative;
  backdrop-filter: blur(10px);
  background-image: url("../images/contact-banner.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.overlay {
  background-color: #00000073;
  padding-top: 20px;
}
.hero__text {
  text-align: center;
}

.hero__text span {
  color: #ffffff;
  font-family: 'Cinzel Decorative', serif;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.hero__text h1 {
  font-size: 80px;
   font-family: 'Cinzel Decorative', serif;
  color: #ffffff;
  margin-bottom: 20px;
  margin-top: 22px;
}

.hero__text p {
  color: #ffffff;
   font-family: 'Cinzel Decorative', serif;
  margin-bottom: 20px;
}

.hero__text .play-btn {
  font-size: 26px;
  color: black;
  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: black;
}

@-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: black;
  padding: 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: black;
  margin-right: 8px;
  font-size: 17px;
}

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

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

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

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

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

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

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

.jp-state-playing .jp-play {
  background: black !important;
  border-color: black !important;
}

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

.jp-audio .jp-play:focus {
  background: black !important;
  border-color: black !important;
}

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

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

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

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

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

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

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

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

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

.jp-volume-bar-value {
  background: black;
  height: 100%;
}

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

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

.single_player_container:last-child {
  margin-bottom: 0;
}
.contact-details ul {
  display: flex;
}
.single_player_container h4 {
  font-size: 36px;
  color: #111111;
  font-weight: 700;
  margin-left: 20px;
  text-transform: uppercase;
}
.single_player_container h4 span {
  color: #e30000;
}
.track__pic {
  position: relative;
  z-index: 1;
}

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

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

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

.youtube {
  padding-block: 100px;
}

.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: black;
  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.countdown--page {
  padding-top: 150px;
  padding-bottom: 150px;
}

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

.countdown__text h1 {
  font-size: 90px;
  color: #ffffff;
  font-family: "Cinzel Decorative', serif";
  color: #ffffff;
  margin-bottom: 25px;
}

.countdown__text h4 {
  font-size: 26px;
  font-family: "Cinzel Decorative', serif";
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 4px;
}

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

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

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

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

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

.buy__tickets {
  text-align: center;
}

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

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

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

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

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

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

.discography__item__text span {
  font-size: 18px;
  color: black;
  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 responsive */

/* Footer Base Styles */

.footer {
  background-color: #111;
  padding: 30px 0px;
  color: white;
}

.footer h2,
.footer h4 {
  color: white;
  /* margin-bottom: 15px; */
}

.footer__address p {
  font-size: 14px;
  line-height: 1.6;
}

.footer__social__links a {
  font-size: 20px;
  color: white;
  /* margin-right: 15px; */
  transition: color 0.3s;
}

.footer__social__links a:hover {
  color: #aaa;
}

.footer__newslatter form {
  display: flex;
  gap: 10px;
  /* margin-top: 10px; */
}

.footer__newslatter input[type="text"] {
  padding: 10px;
  flex: 1;
  border: none;
  border-radius: 3px;
}

.footer__newslatter button {
  padding: 10px 15px;
  background: #e91e63;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

/* Contact Details */
.contact-details {
  margin-top: 40px;
}

.contact-details ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.contact-details li {
  flex: 1 1 200px;
  color: white;
}

.contact-details i {
  font-size: 20px;
  margin-bottom: 5px;
  color: #e91e63;
}

.footer__copyright__text {
  text-align: center;
  /* margin-top: 30px; */
  font-size: 13px;
  color: #ccc;
}

/* Responsive Footer Styles */
@media (max-width: 768px) {
  .footer .row {
    flex-direction: column;
  }

  .footer .col-lg-3,
  .footer .col-lg-4,
  .footer .col-md-6 {
    width: 100%;
    /* margin-bottom: 30px; */
  }

  .footer__newslatter form {
    flex-direction: column;
  }

  .footer__newslatter input[type="text"],
  .footer__newslatter button {
    width: 100%;
  }

  .contact-details ul {
    flex-direction: column;
  }
}

/* footer responsive */

.footer {
  /* padding-top: 20px; */
  /* padding-bottom: 20px; */
  /* margin-top: -547px; */
  height: auto;
  background-color: black;
  /* position: fixed; */
}

.footer.footer--normal {
  margin-top: 0;
}
/* 
.footer__address {
	margin-bottom: 50px;
} */

.contact-details ul {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 1920px) {
  .details__inner {
    gap: calc(30px + 20 * ((100vw - 360px) / 1560));
  }
}

.details__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 50px;
}
.details-content {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
@media (max-width: 1920px) {
  .details-content__title {
    margin-bottom: calc(30px + 30 * ((100vw - 360px) / 1560));
  }
}

@media (max-width: 1920px) {
  .details-content__title {
    line-height: calc(32px + 16 * ((100vw - 360px) / 1560));
  }
}
@media (max-width: 1920px) {
  .details-content__title {
    font-size: calc(24px + 14 * ((100vw - 360px) / 1560));
  }
}
.details-content__title {
  display: inline-block;
  font-weight: 700;
  font-size: 38px;
  line-height: 48px;
  letter-spacing: -0.02em;
  text-transform: capitalize;
  color: #202020;
  margin-bottom: 30px;
  margin-top: 30px;
  /* position: relative; */
}

.details-content__titlee {
  display: inline-block;
  font-weight: 700;
  font-size: 38px;
  text-align: center;
  text-transform: capitalize;
  color: white;
  position: absolute;
  top: 20vh;
  left: 40%;
}
.contact-details ul li {
  list-style: none;
  padding-left: 70px;
  position: relative;
  /* margin-bottom: 30px; */
}

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

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

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

.contact-details 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: black;
  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: black;
  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: black;
}

.footer__copyright__text i {
  color: #c11;
}

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

.breadcrumb-option {
  padding-block: 20px;
}

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

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

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

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

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

.about {
  padding-block: 100px;
}

.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 p {
  margin-bottom: 35px;
}

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

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

.skills__content {
  background: black;
  height: 100%;
  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: 100%;
  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: black;
  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: black;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -25px;
}

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

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

.about__services__item__text p {
  margin-bottom: 0;
}

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

.feature {
  padding-bottom: 70px;
}

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

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

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

.feature__text {
  padding-top: 80px;
}

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

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

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

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

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

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

.services {
  overflow: hidden;
  margin-block: 50px 20px;
  border: 8px solid black;
}

.services__left {
  background-image: url("../images/session.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 640px;
  border-right: 8px solid black;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

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

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

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

.services__list {
  margin: 0;
}

.service__item {
  background: black;
  height: 320px;
  padding: 30px;
}

.service__item.deep-bg {
  background: white;
}
.service-img {
  width: 70px;
}
.service__item h4 {
  font-size: 26px;
  color: #ffffff;
  font-weight: 700;
  margin-top: 25px;
  margin-bottom: 10px;
}

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

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

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

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

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

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

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

.tours__item__text .tours__text__widget ul {
  float: left;
}

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

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

.tours__item__text .tours__text__widget ul li i {
  color: black;
  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: black;
  /* float: right; */
}
@media (max-width: 1920px) {
  .details-content__title::after {
    height: calc(3px + 2 * ((100vw - 360px) / 1560));
  }
}
@media (max-width: 1920px) {
  .details-content__view {
    margin-bottom: calc(10px + 10 * ((100vw - 360px) / 1560));
  }
}

@media (max-width: 1920px) {
  .details-content__view {
    max-height: calc(300px + 200 * ((100vw - 360px) / 1560));
  }
}
@media (max-width: 1920px) {
  .details-content__view {
    height: calc(300px + 200 * ((100vw - 360px) / 1560));
  }
}
.details-content__view-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: none;
}
.details-content__view-img--active {
  display: block;
}
.swiper-pointer-events {
  touch-action: pan-y;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}
@media (max-width: 1920px) {
  .details-content-images {
    gap: calc(10px + 2 * ((100vw - 360px) / 1560));
  }
}
@media (max-width: 1920px) {
  .details-content-images {
    margin-bottom: calc(30px + 30 * ((100vw - 360px) / 1560));
  }
}
.swiper-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}
.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}
@media (max-width: 1920px) {
  .details-content__text {
    line-height: calc(20px + 10 * ((100vw - 360px) / 1560));
  }
}

@media (max-width: 1920px) {
  .details-content__text {
    font-size: calc(14px + 2 * ((100vw - 360px) / 1560));
  }
}
@media (max-width: 1920px) {
  .details-content__text {
    margin-bottom: calc(15px + 5 * ((100vw - 360px) / 1560));
  }
}
.details-content__text {
  color: #515151;
  font-weight: 300;
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 0.01em;
}
@media (max-width: 1920px) {
  .details-content-info__title {
    line-height: calc(28px + 4 * ((100vw - 360px) / 1560));
  }
}
@media (max-width: 1920px) {
  .details-content-info__title {
    font-size: calc(20px + 4 * ((100vw - 360px) / 1560));
  }
}
@media (max-width: 1920px) {
  .details-content-info__title {
    margin-bottom: calc(25px + 25 * ((100vw - 360px) / 1560));
  }
}
@media (max-width: 1920px) {
  .details-content-info__title::after {
    height: calc(3px + 2 * ((100vw - 360px) / 1560));
  }
}
@media (max-width: 1920px) {
  .details-content-info-list__item {
    padding-left: calc(15px + 10 * ((100vw - 360px) / 1560));
  }
}

@media (max-width: 1920px) {
  .details-content-info-list__item {
    padding-bottom: calc(15px + 0 * ((100vw - 360px) / 1560));
  }
}
@media (max-width: 1920px) {
  .details-content-info-list__item {
    padding-right: calc(15px + 10 * ((100vw - 360px) / 1560));
  }
}
@media (max-width: 1920px) {
  .details-content-info-list__item {
    padding-top: calc(15px + 0 * ((100vw - 360px) / 1560));
  }
}
.details-content-info-list__item {
  padding-block: 5px;
  padding-inline: 25px;
}
@media (max-width: 1920px) {
  .details-content-info-list__text {
    padding-left: calc(15px + 15 * ((100vw - 360px) / 1560));
  }
}

@media (max-width: 1920px) {
  .details-content-info-list__text {
    line-height: calc(20px + 10 * ((100vw - 360px) / 1560));
  }
}
@media (max-width: 1920px) {
  .details-content-info-list__text {
    font-size: calc(14px + 2 * ((100vw - 360px) / 1560));
  }
}
@media (max-width: 1920px) {
  .details {
    margin-bottom: calc(0px + 75 * ((100vw - 360px) / 1560));
  }
}
.details-content-images__img-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.details-content-images__img {
  cursor: pointer;
  height: 80px;
  width: 100%;
  max-width: 80px;
  max-height: 80px;
  border: 5px solid rgba(0, 0, 0, 0);
  -webkit-transition: border 0.3s;
  -o-transition: border 0.3s;
  transition: border 0.3s;
}
.details-content-images__img-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}
@media (max-width: 1920px) {
  .details {
    padding-top: calc(30px + 70 * ((100vw - 360px) / 1560));
  }
}
.details {
  padding-top: 20px;
  margin-bottom: 75px;
}
.details-content-info-list__text {
  font-weight: 300;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 0.01em;
  color: #ffffff;
  position: relative;
  padding-left: 30px;
  padding-left: 30px;
}
.details-content-info-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #000000;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.details-content-info__title::after {
  content: "";
  width: 100%;
  height: 5px;
  left: 0;
  position: absolute;
  bottom: -2px;
  background: #000000;
}
.details-content-info__title {
  font-weight: 600;
  margin-bottom: 30px;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.01em;
  text-transform: capitalize;
  color: #202020;
  position: relative;
  display: inline-block;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}
.details-content-images {
  margin-bottom: 60px;
  gap: 12px;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
}
.details-content__view {
  width: 100%;
  height: 500px;
  max-height: 500px;
  margin-bottom: 20px;
}
.details-content__title::after {
  content: "";
  width: 100%;
  height: 5px;
  left: 0;
  position: absolute;
  bottom: -2px;
  background: #000000;
}
.tours__item__text .tours__text__desc {
  padding-top: 40px;
  margin-bottom: 65px;
}

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

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

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

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

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

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

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

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

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

.videos {
  padding-bottom: 90px;
}

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

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

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

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

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

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

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

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

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

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

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

.videos__item__text {
  padding-top: 20px;
}

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

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

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

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

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

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

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

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

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

.blog {
  padding-bottom: 60px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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: black;
  position: absolute;
  right: 40px;
  bottom: 35px;
}

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

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

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

.blog__details__option {
  margin-bottom: 60px;
}

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

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

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

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

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

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

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

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

.blog__option__btn__text {
  overflow: hidden;
}

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

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

.blog__details__services {
  margin-bottom: 30px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.map iframe {
  width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Medium Device = 1200px */

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

/* Tablet Device = 768px */

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__right__social {
    display: none;
  }
  .header__menu {
    margin-right: 0;
  }
  .header__menu ul li {
    margin-right: 15px;
  }
  .event .section-title:after {
    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;
  }

  /* .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; */
    padding: 20px 30px;
  }
  .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: black;
  }
  .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: black;
    color: #ffffff;
  }
  .slicknav_nav .slicknav_row:hover {
    border-radius: 0;
    background: black;
    color: #ffffff;
  }
  .service__item {
    height: auto;
  }
  .tours__item__text {
    padding-right: 0;
  }

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

  /* .footer {
		margin-top: -970px;
		background-position: top 0 left 19%;
	} */
}
.responsive-section {
  display: flex;
  flex-direction: row; /* horizontal on desktop */
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 30px;
  padding: 20px;
  text-align: center;
}

.img img {
  width: 2500px;
  height: auto;
  border-radius: 20px;
}

.heading {
  font-size: 24px;
  font-weight: 700;
  color: #111111;
  text-transform: uppercase;
  white-space: nowrap; /* prevents headings from wrapping */
}

/* Responsive behavior for small screens */
@media (max-width: 768px) {
  .responsive-section {
    flex-direction: column; /* stack vertically on small screens */
    gap: 0px;
  }

  .heading {
    font-size: 20px;
    white-space: normal; /* allow wrapping on mobile */
  }

  .img img {
    width: 100%; /* scale image for mobile */
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body,
html {
  height: 100%;
  font-family: "Cinzel Decorative', serif";
}

.hero-section {
  background-image: url("/images/client-back.webp");
  /* Replace with your actual image path */
  background-size: cover;
  background-position: center;
  height: 100vh;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

.hero-content {
  max-width: 1100px;
}

.subheading {
  letter-spacing: 2px;
  font-size: 14px;
  margin-bottom: 10px;
}

h1 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

hr {
  width: 60px;
  margin: 10px auto 30px;
  border: 1px solid #cba05f;
}

.cards-container {
  display: flex;
  gap: 30px;
  justify-content: center;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.flip-card {
  background-color: transparent;
  width: 450px;
  height: 210px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 25px;
  backface-visibility: hidden;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flip-card-front h2 {
  font-size: 22px;
  font-weight: bold;
  color: #d4b07d;
}

.flip-card-front p {
  font-size: 18px;
  color: #d4b07d;
  margin-top: 10px;
}

.flip-card-back {
  transform: rotateY(180deg);
  background-color: #bb8c4b;
  color: #000;
  text-align: center;
}

.flip-card-back h3 {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 15px;
}

.flip-card-back p {
  font-size: 15px;
  line-height: 1.6;
  color: #f3f3f3;
  margin-bottom: 20px;
}

.card-btn {
  padding: 10px 20px;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.card-btn:hover {
  background: #fff;
  color: #000;
}

.view-courses {
  background: transparent;
  border: 1px solid #cba05f;
  color: #cba05f;
  padding: 10px 30px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}

.view-courses:hover {
  background: #cba05f;
  color: #000;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Cinzel Decorative', serif";
  background-color: #f9f9f9;
  color: #333;
  line-height: 1.6;
}

.header {
  height: 19vh;
}

.container {
  max-width: 1140px;
  margin: auto;
  padding: 20px;
}

.piano-course {
  padding: 40px 0;
  margin-top: -80px;
}

.media-gallery {
  margin-bottom: 30px;
}

.media-display {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.media-display img,
.media-display video {
  width: calc(33.33% - 10px);
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.course-description {
  margin-bottom: 30px;
  font-size: 1rem;
}

.section-title {
  text-align: center;
  margin: 40px 0 20px;
  font-size: 1.8rem;
  color: #222;
}

.module-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 15px;
  list-style: none;
  margin-bottom: 40px;
}

.module-list li {
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.class-types {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-bottom: 40px;
}

.class-card {
  flex: 1 1 300px;
  background: #fff;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.class-card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 10px;
}

.benefits-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 0;
  margin-top: 30px;
}

.benefits-list li {
  background: #e8f0fe;
  padding: 10px 15px;
  border-radius: 6px;
}

.module-list li {
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, background-color 0.3s ease;
  cursor: pointer;
  font-size: 1.2em;
}

/* Hover effect */
.module-list li:hover {
  background-color: #dceeff;
  /* Light blue on hover */
  transform: scale(1.05);
  /* Zoom in slightly */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.benefits-list li:hover {
  background-color: #dceeff;
  /* Light blue on hover */
  transform: scale(1.05);
  /* Zoom in slightly */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.module-list li:hover {
  color: #003366;
}

/* Responsive Design */
@media (max-width: 768px) {
  .media-display img,
  .media-display video {
    width: calc(50% - 10px);
  }

  .section-title {
    font-size: 1.5rem;
  }

  .flip-card {
    width: 90%;
    height: 37vh;
  }
}

@media (max-width: 480px) {
  .media-display img,
  .media-display video {
    width: 100%;
  }

  .class-card {
    flex: 1 1 100%;
  }

  .module-list {
    grid-template-columns: 1fr;
  }
}

.music-section {
  padding: 50px 20px;
  display: flex;
  justify-content: center;
}

.music-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 1200px;
  width: 100%;
  flex-wrap: wrap;
}

.music-text {
  flex: 1;
  min-width: 300px;
}

.music-text .label {
  letter-spacing: 2px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.music-text h2 {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #1f2b39;
}

.underline {
  width: 60px;
  height: 2px;
  background-color: #cba05f;
  margin: 15px 0;
}

.music-list {
  list-style: disc;
  padding-left: 20px;
}

.music-list li {
  margin-bottom: 15px;
  font-size: 16px;
}

.music-list li span {
  font-weight: 600;
  color: #cba05f;
}

.music-list li small {
  color: #555;
}

.music-image {
  flex: 1;
  min-width: 300px;
  text-align: center;
}

.music-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.piano-banner {
  background: #111 url("pattern.png");
  /* Replace with your pattern image if you have one */
  background-size: cover;
  color: #c89b5d;
  text-align: center;
  padding: 80px 20px;
  height: 80vh;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%);
}

.piano-banner-content {
  max-width: 800px;
  margin: 0 auto;
}

.piano-banner .subheading {
  letter-spacing: 3px;
  font-size: 14px;
  color: #c89b5d;
  margin-bottom: 10px;
}

.piano-banner h1 {
  font-size: 32px;
  font-weight: bold;
  color: #d6ab6f;
  line-height: 1.4;
  margin: 0;
}

.piano-banner .underline {
  width: 150px;
  height: 2px;
  background: #c89b5d;
  margin: 20px auto 0;
}

@media (min-width: 768px) {
  .piano-banner h1 {
    font-size: 48px;
  }

  .piano-banner {
    padding: 120px 20px;
  }
}

.piano-learn {
  padding: 60px 20px;
  background: #fff;
}

.piano-learn-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  gap: 40px;
}

.piano-learn-text {
  flex: 1 1 500px;
}

.piano-learn-text h2 {
  font-size: 32px;
  color: #2d3748;
  /* dark navy */
  margin-bottom: 10px;
}

.piano-learn-text .underline {
  width: 60px;
  height: 2px;
  background: #c89b5d;
  margin-bottom: 20px;
}

.piano-learn-text p {
  color: #4a5568;
  /* muted gray */
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 15px;
}

.button-outline {
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid #c89b5d;
  color: #c89b5d;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
}

.button-outline:hover {
  background: #c89b5d;
  color: #fff;
}

.piano-learn-image {
  flex: 1 1 400px;
}

.piano-learn-image img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .piano-learn-container {
    flex-direction: column;
    text-align: center;
  }

  .piano-learn-text h2 {
    font-size: 28px;
  }
}

.piano-how {
  padding: 60px 20px;
  background: #fff;
}

.piano-how-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  gap: 40px;
}

.piano-how-image {
  flex: 1 1 500px;
}

.piano-how-image img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.piano-how-text {
  flex: 1 1 500px;
}

.piano-how-text .subheading {
  font-size: 14px;
  letter-spacing: 2px;
  color: #7a7a7a;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.piano-how-text h2 {
  font-size: 28px;
  color: #2d3748;
  /* dark navy */
  margin-bottom: 10px;
}

.piano-how-text .underline {
  width: 60px;
  height: 2px;
  background: #c89b5d;
  margin: 20px 0;
}

.piano-how-text p {
  color: #4a5568;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 15px;
}

.button-outline {
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid #c89b5d;
  color: #c89b5d;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
}

.button-outline:hover {
  background: #c89b5d;
  color: #fff;
}

@media (max-width: 768px) {
  .piano-how-container {
    flex-direction: column;
    text-align: center;
  }

  .piano-how-text h2 {
    font-size: 24px;
  }

  .piano-how-text {
    margin-top: -35vh;
  }
}

.recalls-swiper__slide {
  background-color: white;
  margin-left: 15px;
  border-radius: 15px;
  border: 2px solid black;
}


 .whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #25D366;
    color: white;
    font-size: 28px;
    border-radius: 50%;
    text-align: center;
    line-height: 45px;
    z-index: 999;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    color: white;
}
.footer__social__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: white; /* Circle background */
  margin: 0 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer__social__links a i {
  color: black !important; /* ✅ Icon color must be dark */
  font-size: 20px;
}

/* Optional: hover effect */
.footer__social__links a:hover {
  background-color: #25D366; /* WhatsApp green or Instagram color */
}

.footer__social__links a:hover i {
  color: white !important;
}


/* Loader Wrapper */
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 140vh;
  width: 100vw;
  background: black;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1s ease;
}

/* Loader Content */
.loader-content {
  text-align: center;
  color: white;
  font-family: 'Cinzel Decorative', serif;
  position: relative;
}

/* Logo Icon */
.logo i {
  font-size: 50px;
  margin-bottom: 10px;
  color: white;
}

/* Brand Text */
.brand {
  font-size: 24px;
  margin: 10px 0;
  font-weight: bold;
  color: white;
}

/* Musical Notes Floating */
.floating-notes span {
  position: absolute;
  font-size: 20px;
  animation: floatUp 3s infinite;
  opacity: 0.8;
  color: white;
}
.floating-notes span:nth-child(1) {
  left: 20%;
  animation-delay: 0s;
}
.floating-notes span:nth-child(2) {
  left: 40%;
  animation-delay: 0.5s;
}
.floating-notes span:nth-child(3) {
  left: 60%;
  animation-delay: 1s;
}
.floating-notes span:nth-child(4) {
  left: 80%;
  animation-delay: 1.5s;
}
.floating-notes span:nth-child(5) {
  left: 50%;
  animation-delay: 2s;
}
@keyframes floatUp {
  0% {
    bottom: 0;
    opacity: 0.7;
    transform: translateY(0);
  }
  100% {
    bottom: 100px;
    opacity: 0;
    transform: translateY(-30px);
  }
  
}
.logo img {
  width: 200px;
  height: auto;
  margin-bottom: 10px;
  animation: fadeInLogo 1s ease-in-out;
}

@keyframes fadeInLogo {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

/* Piano Keys */
.piano-loader {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 20px 0;
}
.piano-loader .key {
  width: 20px;
  height: 80px;
  background: white;
  border-radius: 4px;
  animation: pressKey 1s infinite ease-in-out;
}
.piano-loader .key:nth-child(2) {
  animation-delay: 0.1s;
}
.piano-loader .key:nth-child(3) {
  animation-delay: 0.2s;
}
.piano-loader .key:nth-child(4) {
  animation-delay: 0.3s;
}
.piano-loader .key:nth-child(5) {
  animation-delay: 0.4s;
}
@keyframes pressKey {
  0%, 100% {
    transform: translateY(0);
    background-color: white;
  }
  50% {
    transform: translateY(10px);
    background-color: #ccc;
  }
}

/* Loading Text */
.loading-text {
  font-size: 16px;
  animation: blinkText 1.2s infinite;
}
@keyframes blinkText {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}