/*

TemplateMo 583 Festava Live

https://templatemo.com/tm-583-festava-live

*/


/*---------------------------------------
  CUSTOM PROPERTIES ( VARIABLES )             
-----------------------------------------*/

:root {
 --white-color: #ffffff;
 --primary-color: #6376ca;
 --secondary-color: #273987;
 --section-bg-color: #f0f8ff;
 --custom-btn-bg-color: #273987;
 --custom-btn-bg-hover-color: #121c4b;
 --dark-color: #000000;
 --p-color: #000000;
 /*
 backup
 --p-color: #717275;
 */
 --border-color: #7fffd4;
 --link-hover-color: #566ccc;

 --body-font-family: 'Outfit', sans-serif;

 --h1-font-size: 74px;
 --h2-font-size: 46px;
 --h3-font-size: 32px;
 --h4-font-size: 28px;
 --h5-font-size: 24px;
 --h6-font-size: 22px;
 --p-font-size: 18px;
 --btn-font-size: 14px;
 --copyright-font-size: 16px;

 --border-radius-large: 100px;
 --border-radius-medium: 20px;
 --border-radius-medium-16px: 16px;
 --border-radius-small: 10px;

 --font-weight-light: 300;
 --font-weight-normal: 400;
 --font-weight-bold: 700;
}

body {
 background-color: var(--white-color);
 font-family: var(--body-font-family);
}

iframe {
 display: block;
 width: 100%;
}


/*---------------------------------------
  TYPOGRAPHY               
-----------------------------------------*/

h2,
h3,
h4,
h5,
h6 {
 color: var(--dark-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
 font-weight: var(--font-weight-bold);
}

h1 {
 font-size: var(--h1-font-size);
}

h2 {
 font-size: var(--h2-font-size);
}

h3 {
 font-size: var(--h3-font-size);
}

h4 {
 font-size: var(--h4-font-size);
}

h5 {
 font-size: var(--h5-font-size);
}

h6 {
 font-size: var(--h6-font-size);
}

p {
 color: var(--p-color);
 font-size: var(--p-font-size);
 font-weight: var(--font-weight-light);
}

ul li {
 color: var(--p-color);
 font-size: var(--p-font-size);
 font-weight: var(--font-weight-light);
}

a,
button {
 touch-action: manipulation;
 transition: all 0.3s;
}

a {
 display: inline-block;
 color: var(--primary-color);
 text-decoration: none;
}

a:hover {
 color: var(--link-hover-color);
}

b,
strong {
 font-weight: var(--font-weight-bold);
}


/*---------------------------------------
  SECTION               
-----------------------------------------*/

.section-padding {
 padding-top: 100px;
 padding-bottom: 100px;
}

.section-overlay {
 background-color: var(--dark-color);
 position: absolute;
 top: 0;
 left: 0;
 pointer-events: none;
 width: 100%;
 height: 100%;
 opacity: 0.35;
}

.section-overlay+.container {
 position: relative;
}


/*---------------------------------------
  CUSTOM BUTTON               
-----------------------------------------*/

.custom-btn {
 background: var(--custom-btn-bg-color);
 border: 2px solid transparent;
 border-radius: var(--border-radius-large);
 color: var(--white-color);
 font-size: var(--btn-font-size);
 font-weight: var(--font-weight-bold);
 line-height: normal;
 transition: all 0.3s;
 padding: 10px 20px;
}

.custom-btn:hover {
 background: var(--custom-btn-bg-hover-color);
 color: var(--white-color);
}


/*---------------------------------------
  VIDEO              
-----------------------------------------*/
.video-wrap {
 z-index: -100;
}

.custom-video {
 position: absolute;
 top: 0;
 left: 0;
 object-fit: cover;
 width: 100%;
 height: 100%;
}


/*---------------------------------------
  NAVIGATION              
-----------------------------------------*/

.sticky-wrapper {
 position: absolute;
 top: 0;
 right: 0;
 left: 0;
 margin-top: 16px;
}

.sticky-wrapper.is-sticky .navbar {
 background-color: var(--dark-color);
}

.navbar {
 background: transparent;
 z-index: 9;
}

.navbar-brand,
.navbar-brand:hover {
 color: var(--white-color);
 font-size: var(--h5-font-size);
 font-weight: var(--font-weight-bold);
}

.navbar-expand-lg .navbar-nav .nav-link {
 border-radius: var(--border-radius-large);
 margin: 10px;
 padding: 10px 20px;
}

.navbar-nav .nav-link {
 display: inline-block;
 color: var(--white-color);
 font-size: var(--p-font-size);
 font-weight: var(--font-weight-normal);
 position: relative;
 padding-top: 15px;
 padding-bottom: 15px;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
 color: var(--secondary-color);
}

.navbar-toggler {
 border: 0;
 padding: 0;
 cursor: pointer;
 margin: 0;
 width: 30px;
 height: 35px;
 outline: none;
}

.navbar-toggler:focus {
 outline: none;
 box-shadow: none;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
 background: transparent;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before,
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
 transition: top 300ms 50ms ease, -webkit-transform 300ms 350ms ease;
 transition: top 300ms 50ms ease, transform 300ms 350ms ease;
 transition: top 300ms 50ms ease, transform 300ms 350ms ease, -webkit-transform 300ms 350ms ease;
 top: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
 transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
 transform: rotate(-45deg);
}

.navbar-toggler .navbar-toggler-icon {
 background: var(--white-color);
 transition: background 10ms 300ms ease;
 display: block;
 width: 30px;
 height: 2px;
 position: relative;
}

.navbar-toggler .navbar-toggler-icon:before,
.navbar-toggler .navbar-toggler-icon:after {
 transition: top 300ms 350ms ease, -webkit-transform 300ms 50ms ease;
 transition: top 300ms 350ms ease, transform 300ms 50ms ease;
 transition: top 300ms 350ms ease, transform 300ms 50ms ease, -webkit-transform 300ms 50ms ease;
 position: absolute;
 right: 0;
 left: 0;
 background: var(--white-color);
 width: 30px;
 height: 2px;
 content: '';
}

.navbar-toggler .navbar-toggler-icon::before {
 top: -8px;
}

.navbar-toggler .navbar-toggler-icon::after {
 top: 8px;
}


/*---------------------------------------
  HERO        
-----------------------------------------*/

.hero-section {
 position: relative;
 overflow: hidden;
 padding-top: 100px;
 height: calc(100vh);
}

.hero-section small {
 color: var(--white-color);
 text-transform: uppercase;
}

.hero-section .section-overlay {
 z-index: 2;
 opacity: 0.45;
}

.hero-section .container {
 position: relative;
 z-index: 2;
 height: 100%;
 padding-bottom: 50px;
}

.hero-section .container .row {
 height: 100%;
}


/*---------------------------------------
  ABOUT              
-----------------------------------------*/

.about-section {
 background-image: url('../images/infinityCarsBlur38kb.jpg');
 background-color: #273987;
 background-repeat: no-repeat;
 background-size: cover;
 position: relative;
}

.about-image {
 border-radius: var(--border-radius-medium-16px);
 display: block;
}

.about-text-wrap {
 position: relative;
}


/*---------------------------------------
  ARTISTS AND CARDS              
-----------------------------------------*/

.artists-image {
 border-radius: var(--border-radius-medium);
 width: 100%;
 flex-grow: 1;
 object-fit: cover;
 height: 100%;
 width: 100%;
}

.artists-card-image {
 border-top-left-radius: var(--border-radius-medium);
 border-top-right-radius: var(--border-radius-medium);
}

.card-text {
 color: var(--p-color);
 font-size: var(--p-font-size);
 font-weight: var(--font-weight-normal) !important;
}

#image-gallery {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.25));
}

#other-gallery {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.25));
}

/* Add these new styles */
.other-gallery-item {
 position: relative;
 display: inline-block;
}

.social-icon-container {
 position: absolute;
 bottom: 10px;
 right: 10px;
}

#other-gallery .social-icon-link {
 background: var(--secondary-color);
 border-radius: var(--border-radius-large);
 color: var(--white-color);
 font-size: var(--copyright-font-size);
 display: block;
 margin-right: 5px;
 text-align: center;
 width: 35px;
 height: 35px;
 line-height: 36px;
}

#other-gallery .social-icon-link:hover {
 background: var(--primary-color);
}


/*---------------------------------------
  CAROUSEL          
-----------------------------------------*/

@media (min-width: 991px) {
 #membersCarousel {
  display: none !important;
 }

 #membersGrid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
 }

 .member-card {
  flex: 0 1 calc(33.333% - 2rem);
  min-width: 300px;
  max-width: 350px;
 }
}

@media (max-width: 990px) {
 #membersCarousel {
  display: block !important;
  position: relative;
 }

 #membersGrid {
  display: none !important;
 }
}

.carousel-inner {
 padding: 8px;
}

.carousel-item {
 padding: 0 1rem;
}

.carousel-control-prev,
.carousel-control-next {
 width: 3rem;
 height: 3rem;
 top: 50%;
 transform: translateY(-50%);
 opacity: 1;
 position: absolute;
 background: transparent;
}

.carousel-control-prev {
 left: -3rem;
}

.carousel-control-next {
 right: -3rem;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
 background-color: transparent;
 background-image: none;
 display: inline-block;
 width: 1.5rem;
 height: 1.5rem;
 border: solid var(--custom-btn-bg-color);
 border-width: 0 0.25rem 0.25rem 0;
 transform: rotate(45deg);
}

.carousel-control-prev-icon {
 transform: rotate(135deg);
}

.carousel-control-next-icon {
 transform: rotate(-45deg);
}

.card {
 height: 100%;
 filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

/* Container padding for carousel controls */
@media (max-width: 990px) {
 .carousel-container {
  padding: 0 2rem;
  position: relative;
 }
}

@media (max-width: 620px) {

 .carousel-control-prev-icon,
 .carousel-control-next-icon {
  border: solid var(--section-bg-color);
  border-width: 0 0.25rem 0.25rem 0;
 }

 .carousel-control-prev,
 .carousel-control-next {
  top: 47%;
 }

 .carousel-control-prev {
  left: 2rem;
 }

 .carousel-control-next {
  right: 2rem;
 }
}


/*---------------------------------------
  SCHEDULE              
-----------------------------------------*/

.schedule-section {
 background-image: url('../images/4infinityCarsBlur44kb.jpg');
 background-color: #242424;
 background-repeat: no-repeat;
 background-position: center;
 background-size: cover;
}


/*---------------------------------------
  SITE FOOTER              
-----------------------------------------*/

.site-footer {
 background-color: var(--dark-color);
 position: relative;
 overflow: hidden;
 padding-top: 30px;
 padding-bottom: 30px;
}

.copyright-text,
.distribution-text {
 color: var(--white-color);
}

.copyright-text {
 font-size: var(--copyright-font-size);
}

.distribution-text {
 font-size: var(--copyright-font-size);
 text-align: right;
}


/*---------------------------------------
  SOCIAL ICON               
-----------------------------------------*/

.social-icon {
 margin: 0;
 padding: 0;
}

.social-icon-item {
 list-style: none;
 display: inline-block;
 vertical-align: top;
}

.social-icon-link {
 background: var(--secondary-color);
 border-radius: var(--border-radius-large);
 color: var(--white-color);
 font-size: var(--copyright-font-size);
 display: block;
 margin-right: 10px;
 text-align: center;
 width: 35px;
 height: 35px;
 line-height: 36px;
 transition: background 0.2s, color 0.2s;
}

.social-icon-link:hover {
 background: var(--primary-color);
 color: var(--white-color);
}

.social-icon-link span {
 display: block;
}

.social-icon-link span:hover::before {
 animation: spinAround 2s linear infinite;
}

@keyframes spinAround {
 from {
  transform: rotate(0deg)
 }

 to {
  transform: rotate(360deg);
 }
}


/*---------------------------------------
  IMAGE VIEWER
-----------------------------------------*/

/* Image Viewer Styles */
.image-viewer {
 display: none;
 position: fixed;
 z-index: 9999;
 padding: 10px;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.9);
 overflow: hidden;
 touch-action: none;
}

.viewer-content {
 position: relative;
 top: 3%;
 height: 85%;
 margin: auto;
 display: block;
 object-fit: contain;
 transition: transform 0.3s ease-out;
 user-select: none;
 -webkit-user-drag: none;
 transform-origin: center center;
}

.close-btn {
 position: absolute;
 right: 30px;
 color: #fff;
 font-size: 40px;
 cursor: pointer;
 z-index: 10000;
}

.viewer-controls {
 position: absolute;
 bottom: 20px;
 left: 50%;
 transform: translateX(-50%);
 display: flex;
 gap: 20px;
}

.zoom-controls {
 position: absolute;
 top: 20px;
 left: 20px;
 display: flex;
 gap: 10px;
 z-index: 10000;
}

.zoom-btn {
 background: var(--custom-btn-bg-color);
 border: none;
 color: white;
 width: 40px;
 height: 40px;
 font-size: 20px;
 cursor: pointer;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
}

.zoom-btn:hover {
 background: var(--custom-btn-bg-hover-color);
}

.zooming {
 transition: none !important;
}

.nav-btn {
 background: var(--custom-btn-bg-color);
 border: none;
 color: white;
 padding: 10px 20px;
 font-size: 20px;
 cursor: pointer;
 border-radius: 5px;
}

.nav-btn:hover {
 background: var(--custom-btn-bg-hover-color);
}

/* Touch gesture hint for mobile */
@media (max-width: 768px) {
 .viewer-content {
  position: absolute;
  top: 48%;
  bottom: 52%;
  left: 0px;
  right: 0px;
  transform: translate(-50%, -50%);
  height: unset;
  max-width: 100%;
  max-height: 80%;
  margin: auto;
  margin-inline: auto; 
 }
}


/*---------------------------------------
  RESPONSIVE STYLES               
-----------------------------------------*/

@media screen and (max-width: 991px) {
 h1 {
  font-size: 62px;
 }

 h2 {
  font-size: 36px;
 }

 h3 {
  font-size: 32px;
 }

 h4 {
  font-size: 28px;
 }

 h5 {
  font-size: 20px;
 }

 h6 {
  font-size: 18px;
 }

 .section-padding {
  padding-top: 50px;
  padding-bottom: 50px;
 }

 .navbar {
  background-color: var(--dark-color);
 }

 .navbar-expand-lg .navbar-nav {
  padding-bottom: 30px;
 }

 .navbar-expand-lg .navbar-nav .nav-link {
  padding: 0;
 }

 .sticky-wrapper {
  margin-top: 0;
 }

 .hero-section {
  padding-top: 150px;
 }

 .about-image {
  border-radius: 21px;
  display: block;
  filter: drop-shadow(0 12px 8px rgba(0, 0, 0, 0.25));
 }

 .pricing-thumb {
  padding: 35px;
 }

 .ticket-section {
  padding-top: 130px;
 }

 .ticket-form {
  padding: 30px;
 }

 .row-cols-md-3>* {
  flex: 0 0 auto;
  width: 100% !important;
 }

 .col-md-6 {
  flex: 0 0 auto;
  width: 100% !important;
 }

 .row-cols-md-2>* {
  flex: 0 0 auto;
  width: 100% !important;
 }
}

@media screen and (max-width: 767px) {
 .custom-btn {
  font-size: 14px;
  padding: 10px 20px;
 }

 .sticky-wrapper {
  margin-top: 0;
 }

 .distribution-text {
  text-align: left;
 }

 .about-image {
  border-radius: var(--border-radius-medium-16px);
  display: block;
 }
}

@media screen and (max-width: 480px) {
 h1 {
  font-size: 52px;
 }

 h2 {
  font-size: 28px;
 }

 h3 {
  font-size: 26px;
 }

 h4 {
  font-size: 22px;
 }

 h5 {
  font-size: 20px;
 }

 .sticky-wrapper {
  margin-top: 0;
 }

 .distribution-text {
  text-align: left;
 }

 .about-image {
  border-radius: 11px;
  display: block;
 }
}