@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@100;200;300;400;500;600;700;800;900&display=swap");

/* btn-primary hover color - 091E1C */
body{
    font-family:"Space Grotesk", sans-serif !important;
}
.hover{
    cursor: pointer;
}
.hover:hover{
    cursor: pointer;
}

/* Navbar toggler button animation start */
.navbar-toggler{
    width: 30px;
    height: 30px;
    position: relative;
    transition: .5s ease-in-out;
}
.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus{
    outline: none;
    box-shadow: none;
    border: 0;
}
.navbar-toggler span{
    margin: 0;
    padding: 0;
}
.toggler-icon{
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: #f8f8f8;
    border-radius: 1px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}
.middle-bar{
    margin-top: 0px;
}
/* When navigation is clicked */
.navbar-toggler .top-bar{
    margin-top: 0px;
    transform: rotate(135deg);
}

.navbar-toggler .middle-bar{
    opacity: 0;
    filter: alpha(opacity=0);
}

.navbar-toggler .bottom-bar{
    margin-top: 0px;
    transform: rotate(-135deg);
}

/* State when the navbar is collapsed */

.navbar-toggler.collapsed .top-bar{
    margin-top: -20px;
    transform: rotate(0deg);
}

.navbar-toggler.collapsed .middle-bar{
    opacity: 1;
    filter: alpha(opacity=100);
}

.navbar-toggler.collapsed .bottom-bar{
    margin-top: 20px;
    transform: rotate(0deg);
}

/* Color of the three lines */
.navbar-toggler.collapsed .toggler-icon{
    background: linear-gradient(263deg, #f8f8f8, #e0e0e0 100%);
}

/* Navbar toggler button animation end */

.hero-logo{
    width: auto; 
    object-fit: cover; 
}

/* Media Queries */
/* Extra small devices(phones, 600px and down) */
@media (max-width: 600px) {
    #header {
        background-image: url("../img/homepage/Ethnic_portrait_72.jpg");
    }
    #shop-header {
        background-image: url("../img/shop/shop_hero_portrait.png");
    }
}
/* Small devices(Portrait tablets and large phones, 600px and up) */
@media (min-width: 600px) {
    #header {
        background-image: url("../img/homepage/Ethnic_portrait_72.jpg");
    }
    #shop-header {
        background-image: url("../img/shop/shop_hero_portrait.png");
    }
}
/* Medium devices (Landscape tablets, 768px and up) */
@media (min-width: 768px) {
    #header {
        background-image: url("../img/homepage/g400_hero_landscape.jpg");
    }
    #shop-header {
        background-image: url("../img/shop/shop_hero_landscape.png");
    }
}
/* Large devices (Laptops/desktops, 992px and up) */
@media (min-width: 992px) {
    #header {
        background-image: url("../img/homepage/Ethnic_Landscape_72.jpg");
    }
    #shop-header {
        background-image: url("../img/shop/shop_hero_landscape.png");
    }
}
/* Extra large devices (Large laptops and desktops, 1200px and up) */
@media (min-width: 1200px) {
    #header {
        background-image: url("../img/homepage/Ethnic_Landscape_72.jpg");
    }
    #shop-header {
        background-image: url("../img/shop/shop_hero_landscape.png");
    }
}
@media (min-width: 1400px) {
    #header {
        background-image: url("../img/homepage/Ethnic_1080p.jpg");
    }
    #shop-header {
        background-image: url("../img/shop/shop_hero_landscape.png");
    }
}

.bg-grey{
    background-color: #141414;
}
.bg-light-grey{
    background-color: #686868;
}
.grey-5{
    color: #141414 !important;
}
.grey-4{
    color: #2D2D2D !important;
}
.grey-3{
    color: #686868 !important;
}
.grey-2{
    color: #b3b3b3 !important;
}
.grey-1{
    color: #e0e0e0 !important;
}
.rounded-5{
    border-radius: 1rem !important;
}
.rounded-4{
    border-radius: 0.75rem !important;
}
.rounded-3{
    border-radius: 0.5rem !important;
}
.rounded-2{
    border-radius: 0.375rem !important;
}
.rounded-1{
    border-radius: 0.25rem !important;
}

.no-btn{
    background: none;
    color: inherit;
    border: none;
    cursor: pointer;
}
#header{
    width: 100%;
    height: 90vh;
    background-size: cover;
    background-position: center;
    padding: 0;
    margin: 0;
}
#shop-header{
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    padding: 0;
    margin: 0;
}
/* Show the dropdown menu on hover */
.dropdown-menu {
    display: none;
    transition: all 0.3s ease;
}

.nav-item:hover .dropdown-menu {
    display: block;
}

/* Show the dropdown menu on hover */

.hover-underline{
    color: #F4F4F4;
    cursor: pointer;
}
.hover-underline:hover{
    color: #fff;
    text-decoration: underline;
}

.hover-primary{
    color: inherit;
    cursor: pointer;
}
.hover-primary:hover{
    color: #99f1ea;
}

/* Add a class to style the overlay */
.bg-grey-gradient {
    background: linear-gradient(135deg, #141414, #00000000); /* Example gradient colors */
}
.bg-grey-gradient:hover {
    background: linear-gradient(270deg, #141414, #15151500); /* Example gradient colors */
}
.bg-gradientToDown {
    background: linear-gradient(180deg, #1a1a1a, #000000); /* Example gradient colors */
}
.bg-gradientToUp {
    background: linear-gradient(0deg, #141414, #00000000); /* Example gradient colors */
}
.no-link{
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    margin: 0;
}
.back-btn {
    background-color: #00000073;
    padding: .8rem .8rem;
    border-radius: 50%;
    margin-left: 1rem;
    margin-top: 1rem;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}
.back-btn i {
    transition: transform 0.3s ease-in-out;
}

.back-btn:hover i{
    transform: scale(2.1);
    background-color: none;
    transition: transform 0.3s ease-in-out;
}
.fw-300{
    font-weight: 300 !important;
}
.fw-400{
    font-weight: 400 !important;
}
.fw-500{
    font-weight: 500 !important;
}
.fw-700{
    font-weight: 700 !important;
}
.add-ticket:hover{
background-color: rgb(52, 89, 52);
}
.add-ticket{
    background-color: rgb(112, 183, 112);
    padding-left: .8rem;
    padding-right: .8rem;
    padding-top: .4rem;
    padding-bottom: .4rem;
    color: #fff;
    border-radius: 50px;
    align-items: center;
    justify-content: center;
    display: flex;
    border: none;
    cursor: pointer;
}
.remove-ticket:hover{
    background-color: rgb(114, 43, 43);
}
.remove-ticket{
    align-items: center;
    padding-left: .9rem;
    padding-right: .9rem;
    padding-top: .4rem;
    padding-bottom: .4rem;
    justify-content: center;
    display: flex;
    background-color: rgb(226, 94, 94);
    color: #fff;
    border-radius: 50px;
    border: none;
    cursor: pointer;
}
.quantity{
    font-size: 1.5rem;
}
.bg-muted{
    background-color: #626262bf;
}
.hide{
    display: none;
}
.show{
    display: block;
}
.is-invalid {
    border-color: #ff6b6b;
}
.is-invalid ~ .invalid-feedback {
    display: block;
    color: #ff6b6b;
}
/* Text */
.primary-color{
    color: #30d5c8;
}
.dark-background{
    background-color: #1a1a1a;
}
.secondary-color{
    color: #2bb2a6;
}
.bg-secondary-color{
    background-color: #2bb2a6;
}
.highlight-color{
    color: #42e1d6;
}
.text-light{
    color: #e0e0e0;
}
.text-color-muted{
    color: #b3b3b3;
}
.border-color{
    border: 1px solid #383838;
}
.error{
    color: #ff6b6b;
}
/* Text */
.bg-grey-1{
    background-color: #383838;
}
.alert-error{
    background-color: rgb(178, 66, 66);
    color: #fff;
}

.link{
    text-decoration: underline;
    text-underline-offset: 5px;
}
nav {
    transition: transform 0.5s ease-in-out;
}

/* Style for the overlay on hover */
.playlist-figure-card {
    position: relative;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
}

/* Style for the gradient overlay */
.playlist-figure-card figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.8); /* Add a semi-transparent background if needed */
    color: white;
    text-align: center;
    padding: 1rem;
    box-sizing: border-box;
    border-radius: 10px;
    opacity: 1;
}

/* youtube inputs */
.youtube-style-comment {
    position: relative;
    width: 100%;
}

.youtube-style-comment input {
    border: none;
    background-color: #1a1a1a;
    border-bottom: 2px solid #b0b0b0;
    outline: none;
    width: 100%;
    padding: 5px 0;
    font-size: 16px;
    border-radius: 0;
    transition: border-color 0.5s;
    color: #f8f8f8;
}

.youtube-style-comment input:focus {
    border-bottom: 2px solid #2bb2a6; 
    background-color: #1a1a1a;
    border-radius: 0;
    color: #fff;
    box-shadow: none;
}
.youtube-style-comment input:hover {
    border-bottom: 2px solid #2bb2a6; 
    cursor: pointer;
}

.youtube-style-comment input::placeholder {
    color: #b0b0b0;
    font-size: 14px;
}
/* youtube inputs */

.xs-small{
    font-size: .8rem;
}
.skeleton-card {
    background: #1e1e1e;
    border-radius: 0.5rem;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: pulse 1.5s infinite ease-in-out;
}

.skeleton-img {
    width: 100%;
    height: 150px;
    background: #333;
    border-radius: 0.5rem;
}

.skeleton-text {
    width: 80%;
    height: 10px;
    background: #444;
    border-radius: 4px;
}

.skeleton-text.small {
    width: 60%;
    height: 8px;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

.hover-home-card{
    background-color: inherit;
    transition: background .3s;
}
.hover-home-card:hover{
    background-color: #29292966;
    transition: background .3s;
    border-color: #292929;
}
.badge-outline-danger{
    font-size: .7rem;
    background: none;
    border: 1px solid #dc3545;
    color: #dc3545 !important;
    padding: .3rem .6rem;
}
.badge-outline-success{
    font-size: .7rem;
    background: none;
    border: 1px solid #198754;
    color: #198754 !important;
    padding: .3rem .6rem;
}
.text-sm{
    font-size: .8rem;
}
/* Spinner Animation */
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #30d5c8;
    border-top-color: #1a1a1a;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Spinner animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.hover-highlight{
    filter: brightness(1);
}
.hover-highlight:hover{
    filter: brightness(1.3);
}
.hover-zoom{
    cursor: pointer;
    transform: scale(1);
    transition: 0.2s ease-in-out;
}
.hover-zoom:hover{
    transform: scale(1.1);
    transition: 0.2s ease-in-out;
}
.support-col:has(input[type="radio"]:checked) {
    background-color: #30d5c8;
    color: #f8f8f8;
    transition: background-color 0.3s, color 0.3s;
}
.support-col:has(input[type="radio"]) h3, p, small{
    color: #f8f8f8;
}
.support-col:has(input[type="radio"]:checked) h3,
.support-col:has(input[type="radio"]:checked) small,
.support-col:has(input[type="radio"]:checked) p {
    color: #404040;
    transition: background-color 0.3s, color 0.3s;
}
.support-col input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* hover second image */
.figure-card {
    position: relative;
    cursor: pointer;
    padding: 0;
}

/* Hide the second image by default */
#second-image {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: 100%;
    opacity: 0;
    object-fit: cover;

    transition: opacity 0.3s ease;
}

/* Show the second image on hover */
.figure-card:hover #second-image {
    opacity: 1;
}
.hover-home-card{
    background-color: #141414;
    cursor: pointer;
}
.hover-home-card:hover{
    background-color: #282828;
    transition: 0.3s background ease-out;
}


/* loading animation */
.loading-g {
    margin-top: -.5rem;
}

.loading-00 {
    margin-top: -.8rem;
}


/* Desktop (≥768px or your preferred breakpoint) */
@media (min-width: 768px) {
    .loading-g {
        margin-top: -1rem;
    }

    .loading-00 {
        margin-top: -1.8rem;
    }
}


#loading-animation{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    padding: 6rem;
    background-color: #1a1a1a;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.animated-title span {
    color: #1a1a1a;
    animation: colorLoop 2s ease-in-out infinite;
}

/* Animate from black → turq */
@keyframes colorLoop {
    0% {
        color: #1a1a1a;
    }
    50% {
        color: #30d5c8; /* turq */
    }
    100% {
        color: #1a1a1a;
    }
}
/* Apply staggered delay for each span */
.animated-title span:nth-child(1) {
    animation-delay: 0s;
}
.animated-title span:nth-child(2) {
    animation-delay: 0.5s;
}
.animated-title div:nth-child(2) span:nth-child(1) {
    animation-delay: 1s;
}
.animated-title div:nth-child(2) span:nth-child(2) {
    animation-delay: 1.5s;
}
/* loading animation */