/*============================ Global styles ===============================*/

* {
  padding: 0%;
  margin: 0%;
}
html,
body {
  height: 100%;
  font-family: "Lora", serif !important;
  scroll-behavior: smooth;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Candal", serif !important;
}

.normal-text {
  font-size: x-large;
  text-align: justify;
  padding: 0 15px;
}

/*scroll to top btn*/
#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: orangered; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 10px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

/*Dark mode switch css*/

.musical_journey_body {
  /*Temp css for body flex coz I dnt knw if this will fk up the rest of the pages*/
  display: flex;
  flex-direction: column;
}
.switch {
  padding: 15px 0;
  align-self: flex-end;
  margin: 0.9375rem;
  transition-duration: 0.5s;
}
.inner-switch {
  display: inline-block;
  cursor: pointer;
  border: 1px solid #555;
  border-radius: 1.25rem;
  width: 3.125rem;
  text-align: center;
  font-size: 1rem;
  padding: 0.1875rem;
  margin-left: 0.3125rem;
}

/*============================ NAVBAR ===============================*/
.navbar {
  background-color: black !important;
}
.logo-text {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: bolder;
  font-size: xx-large;
}
#demo {
  background: -webkit-linear-gradient(
    rgba(0, 0, 0, 0.3),
    rgba(0, 0, 0, 0.3)
  ) !important;
}
.navbar-li-gallery,
.second-a {
  background-color: black !important;
}
.navbar-li-gallery a,
.second-a {
  color: white !important;
}
.navbar-li-gallery a:hover {
  color: black !important;
  background-color: rgb(184, 183, 183) !important;
}
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

/*============================ FOOTER ===============================*/
.footer-main {
  background-color: lightgrey;
}
.footer-copyright {
  background-color: rgb(155, 152, 152);
}
.footer-copyright-link {
  color: white;
}
.social-links {
  margin: 0 0 40px 0;
}

.social-links a {
  font-size: 18px;
  display: inline-block;
  /*background: #3b5998;*/
  color: #fff;
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}
.btn-fb {
  background: #3b5998;
  color: white;
}
.btn-yt {
  background: #c4302b;
}
.btn-gplus {
  background: #db4a39;
}

/*============================ Index Page ===============================*/
.index-pg-carousel {
  padding-left: 0;
  padding-right: 0;
}
.carousel-img {
  height: calc(100vh - 60px) !important;
}
@media screen and (max-width: 700px) {
  .carousel-img {
    height: 60vh !important;
  }
}
.navbar-brand:hover {
  font-weight: bold;
}
.main-sec {
  margin-top: 64px; /* navbar margin */
  transition-duration: 0.5s;
}
.tile {
  border-radius: 10px;
}
.profile-btn {
  color: white !important;
}

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #333; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  bottom: 30px; /* 30px from the bottom */
}
/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}
@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}
@-webkit-keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}
@keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}

.musical_journey_sec {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
  overflow: hidden;
}
.mj-img {
  max-height: 600px;
}
.mj-title {
  position: relative;
  top: 23%;
  text-size-adjust: auto;
}
.mj-link-sec {
  position: relative;
  top: 37%;
}
@media screen and (max-width: 1165px) {
  .mj-img {
    max-height: 400px;
  }
  .mj-title {
    top: 10%;
  }
  .mj-link-sec {
    top: 9%;
  }
}
@media screen and (max-width: 900px) {
  .mj-img {
    max-height: 400px;
  }
  .mj-title {
    top: 0%;
  }
  .mj-link-sec {
    top: 0%;
  }
}

.tution-img-mob {
  display: block;
  height: 50%;
  width: 50%;
}
@media (max-width: 999px) {
  .tution-img-mob {
    width: 100%;
  }
}

.parallax {
  /* The image used */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/WITH_ANURADHA_PAUDWAL.jpg");

  /* Set a specific height */
  height: calc(100vh - 60px);
  width: 100%;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax-txt {
  position: relative;
  top: 45%;
  /* For text formatting. */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: xx-large;
  text-size-adjust: auto;
  text-shadow: 0 0 5px #000;
}
.parallax-btn {
  position: relative;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.txt2 {
  display: none; /*don't display on lg screen*/
}

@media screen and (max-width: 658px) {
  .parallax-txt {
    position: relative;
    top: 50%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (max-width: 550px) {
  .parallax {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      url("../images/shekhar_celebrities/WITH\ SURESH\ WADKAR.jpg");
  }
  .txt1 {
    display: none;
  }
  .txt2 {
    display: block;
  }
}

.member-form-section {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
    url("../images/form_illustration.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: calc(100vh - 60px);
  overflow: hidden;
}
.member-form-title {
  position: relative;
  top: 10%;
  left: 20%;
  /* For text formatting. */
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  font-size: xx-large;
  text-size-adjust: auto;
  text-shadow: 0 0 5px #fff;
  text-align: center;
}
.member-form-txt {
  position: relative;
  top: 60%;
  right: 25%;
  /* For text formatting. */
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  font-size: xx-large;
  text-size-adjust: auto;
  text-shadow: 0 0 5px #fff;
  text-align: center;
}
.member-form-btn {
  position: relative;
  top: 65%;
  right: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 900px) {
  .member-form-title {
    position: relative;
    top: 10%;
    left: 10%;
  }
  .member-form-txt {
    position: relative;
    top: 60%;
    right: 27%;
  }
  .member-form-btn {
    position: relative;
    top: 65%;
    right: 27%;
  }
}
@media screen and (max-width: 800px) {
  .member-form-title {
    position: relative;
    top: 10%;
    left: 0;
  }
  .member-form-txt {
    position: relative;
    top: 55%;
    right: 27%;
  }
  .member-form-btn {
    position: relative;
    top: 60%;
    right: 27%;
  }
}
@media screen and (max-width: 700px) {
  .member-form-title {
    position: relative;
    top: 10%;
    left: 0;
  }
  .member-form-txt {
    position: relative;
    top: 72%;
    right: 0;
  }
  .member-form-btn {
    position: relative;
    top: 75%;
    right: 0;
  }
}
@media screen and (max-width: 500px) {
  .member-form-title {
    position: relative;
    top: 10%;
    left: 0;
  }
  .member-form-txt {
    position: relative;
    top: 62%;
    right: 0;
  }
  .member-form-btn {
    position: relative;
    top: 67%;
    right: 0;
  }
}
@media screen and (max-width: 400px) {
  .member-form-title {
    position: relative;
    top: 10%;
    left: 0;
  }
  .member-form-txt {
    position: relative;
    top: 62%;
    right: 0;
  }
  .member-form-btn {
    position: relative;
    top: 67%;
    right: 0;
  }
}
@media screen and (max-height: 650px) and (max-width: 400px) {
  .member-form-txt {
    position: relative;
    top: 59%;
    right: 0;
  }
  .member-form-btn {
    position: relative;
    top: 61%;
    right: 0;
  }
}
/*Audience feedback div*/
.audience-feedback-div {
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)),
    url("../images/review_div.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left;
  height: calc(100vh - 60px);
  overflow: hidden;
}
.AF2 {
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  overflow: hidden;
}
/*============================ gallery Page ===============================*/
.gallery-sec {
  margin-top: 60px;
}
.gallery-tile,
.gallery-sidebar,
.tile-img {
  border-radius: 5px;
}
.gallery-tile:hover {
  box-shadow: 1rem 1rem 1rem -1rem #fffffff6 !important;
  background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
}
.tile-img {
  height: 280px;
  max-height: 280px;
  width: 100%;
}
.tile-img:hover {
  background-image: linear-gradient(
    rgba(0, 0, 0, 0.3),
    rgba(0, 0, 0, 0.3)
  ) !important;
  cursor: pointer;
  opacity: 0.9;
}
.gal-jumbo {
  text-align: center; /*
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url(../images/nishad_cover.jpg) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;*/
}
.gal-jumbo-text {
  font-size: 80px;
  font-family: cursive;
}
.gal-top-img {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.sticky-ele {
  position: sticky !important;
  top: 100px !important;
}
.parent {
  overflow: hidden;
  cursor: pointer;
}
.child {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.parent:hover .child,
.parent:focus .child {
  -ms-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}
.plus-tag {
  display: none;
  font-size: 35px !important;
  color: #ffffff !important;
  text-align: center;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 50px;
  /*text-decoration: none;*/
}
.parent:hover .child:before,
.parent:focus .child:before {
  display: block;
}

.parent:hover .plus-tag,
.parent:focus .plus-tag {
  display: block;
}
.child:before {
  content: "";
  display: none;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /*background-color: rgba(52, 73, 94, 0.75);*/
}
/*============================ Shows Page ===============================*/
.shows-txt {
  font-family: candal;
  color: white;
  animation-name: zagamaga;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
.shows-txt-span {
  text-shadow: 0 0 7px #000;
}

/* The animation code */
@keyframes zagamaga {
  from {
    background-color: rgb(29, 28, 28);
  }
  to {
    background-color: rgb(126, 126, 126);
  }
}

/*============================ Events Page ===============================*/

.event-cont {
  background-color: rgb(247, 239, 239);
}
.upcmng-event-title {
  font-size: 3rem;
  margin-bottom: 20px !important;
  margin-top: 90px !important;
  -webkit-animation: colorchange 0.5s infinite alternate;
  animation: colorchange 0.5s infinite alternate;
}
/* CSS animation to change the color of the title-text */
@keyframes colorchange {
  0% {
    color: blue;
  }

  100% {
    color: rgb(4, 145, 180);
  }
}
@-webkit-keyframes colorchange {
  0% {
    color: blue;
  }

  100% {
    color: rgb(4, 145, 180);
  }
}

.upcmng-event-img {
  /*max-height: 470px !important;
  for landscape img
  */
  max-height: 1000px !important;
}
.upcmng-event-img:hover {
  scale: 1;
}
.temp {
  display: block;
  position: fixed;
  top: 50%;
  font-size: xx-large;
  text-align: center;
  width: 100%;
  color: #fff;
  background-color: #333;
  z-index: 999;
}

/*============================ About Us Page ===============================*/
.about-us-sec {
  margin-top: 110px;
}
.para-start {
  color: rgb(255, 102, 0);
  font-size: 20pt;
}
.para {
  font-size: 15pt;
}
.audience_feedback_main {
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  overflow: hidden;
}

/*============================ Contact Us Page ===============================*/
.contact-us-sec {
  margin-top: 110px;
}
.contact-us-btn-send {
  width: 30%;
  color: white !important;
}

/*============================ Shekhar Profile Page ===============================*/
.hero-profile {
  background: url("../images/shekhar_singing.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: calc(100vh - 60px);
  width: auto;
}

/*============================ Awards Page ===============================*/
.award-illus-img {
  height: 50%;
  max-height: 50%;
  width: 67%;
  position: relative !important;
  top: -110px !important;
}
.section-title {
  text-align: center;
  padding: 30px 0;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 0;
  color: #3b434a;
  position: relative;
  z-index: 2;
}

.section-title span {
  position: absolute;
  top: 30px;
  color: #eef0f2;
  left: 0;
  right: 0;
  z-index: 1;
  font-weight: 700;
  font-size: 52px;
  text-transform: uppercase;
  line-height: 0;
}

@media screen and (max-width: 980px) {
  .section-title {
    text-align: center;
    padding: 30px 0;
    position: relative;
  }

  .section-title h2 {
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-bottom: 0;
    color: #3b434a;
    position: relative;
    z-index: 2;
  }

  .section-title span {
    position: absolute;
    top: 30px;
    color: #eef0f2;
    left: 0;
    right: 0;
    z-index: 1;
    font-weight: 700;
    font-size: 32px;
    text-transform: uppercase;
    line-height: 0;
  }
}

@media screen and (max-width: 980px) {
  .section-title {
    text-align: center;
    padding-bottom: 80px;
    position: relative;
  }
}

@media screen and (max-width: 480px) {
  .normal-text {
    font-size: large;
  }
}

.award-tile-img {
  height: 380px;
  max-height: 380px;
  width: 100%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.award-tile-img:hover {
  background-image: linear-gradient(
    rgba(0, 0, 0, 0.3),
    rgba(0, 0, 0, 0.3)
  ) !important;
  cursor: pointer;
}

/*============================ Membership Form Page ===============================*/
.radio-btns {
  font-size: xx-large;
}
.member-form-ul {
  font-size: larger;
}
/*============================ Musical journey Page ===============================*/
.mj-pg-title-div {
  text-align: center;
}
.mj-pg-title-txt1 {
  font-size: 45px;
  text-shadow: 0px 0px 5px chocolate;
}
.mj-pg-title-txt2 {
  font-size: xx-large;
  text-shadow: 0px 0px 5px chocolate;
}
.article-title {
  font-weight: bold;
  font-size: xx-large;
}

@media screen and (max-width: 600px) {
  .mj-pg-title-txt1 {
    font-size: 37px;
  }
  .mj-pg-title-txt2 {
    font-size: x-large;
  }
}

/*============================ DARK MODE CSS ===============================*/
/*always must be at the bottom of the css page*/
.dark,
.dark * {
  background-color: #222;
  color: #e6e6e6;
  border-color: #e6e6e6;
}