/* ----------------------------------------------------------------
    Gity - customizations on top of the Canvas template
    Primary color: #7439df (see also canvas/css/colors.css)
-----------------------------------------------------------------*/

:root {
    --gity-primary: #7439df;
    --gity-dark: #201039;
    --gity-soft: #f6f1ff;
}

/* Prevent a flash of content before animations start.
   Without this, animated elements are visible on first paint, get hidden once the
   Canvas scripts load, and only then animate in. Hide them from the start instead.
   - Slider captions are animated on every screen size.
   - Scroll animations ([data-animate]) only run on screens >= 768px (Canvas skips phones).
   If the scripts never run, the fallback animation reveals everything after 4 seconds. */
@keyframes gity-reveal {
    to { opacity: 1; }
}

.js [data-caption-animate]:not(.animated):not(.not-animated) {
    opacity: 0;
    animation: gity-reveal .4s ease 4s forwards;
}

@media (min-width: 768px) {
    .js [data-animate]:not(.animated):not(.not-animated) {
        opacity: 0;
        animation: gity-reveal .4s ease 4s forwards;
    }
}

/* Text logo (replaces the Canvas image logo) */
#logo a.gity-logo {
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 100px;
    color: var(--gity-dark);
    transition: line-height .4s ease;
}

#logo a.gity-logo span,
.gity-logo-footer span {
    color: var(--gity-primary);
}

#header.sticky-header:not(.static-sticky) #logo a.gity-logo {
    line-height: 60px;
}

.gity-logo-footer {
    display: inline-block;
    margin-bottom: 15px;
    font-family: 'Raleway', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #fff !important;
}

@media (max-width: 991px) {
    #logo a.gity-logo,
    #header.sticky-header:not(.static-sticky) #logo a.gity-logo {
        line-height: 80px;
    }
}

/* Small uppercase tagline */
.gity-tagline {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gity-primary);
}

.dark .gity-tagline,
.gity-page-title .gity-tagline {
    color: #d8c4ff;
}

.gity-muted {
    color: #888;
}

/* Home slider: dark purple overlay so the text stays readable */
.gity-slide {
    background-size: cover;
    background-position: center center;
}

.gity-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(32, 16, 57, .85), rgba(116, 57, 223, .35));
}

.gity-slide .container,
.gity-slide .slider-caption {
    z-index: 2;
}

.gity-slide .slider-caption h2 {
    font-size: 54px;
    text-transform: none;
}

/* Inner page header with photo */
.gity-page-title {
    position: relative;
    padding: 150px 0 !important;
    background-size: cover;
    background-position: center center;
}

.gity-page-title::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(32, 16, 57, .88), rgba(116, 57, 223, .55));
}

.gity-page-title .container {
    position: relative;
    z-index: 2;
}

#page-title.page-title-center span {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* Countdown bar below the slider */
.gity-countdown-bar {
    padding: 60px 0;
    background: var(--gity-dark) !important;
    border-top: 0 !important;
}

.gity-countdown-bar .countdown-section {
    border-color: rgba(216, 196, 255, .35) !important;
}

.gity-countdown-bar h3 a {
    color: #fff;
}

.gity-countdown-bar h3 a:hover {
    color: #d8c4ff;
}

.gity-countdown-box {
    padding: 30px;
    border-radius: 8px;
    background: var(--gity-soft);
}

/* Emoji icons inside feature boxes: always centered in the circle */
.gity-emoji {
    display: inline-block;
    font-style: normal;
    font-size: 30px;
    line-height: inherit;
}

.fbox-icon a:has(.gity-emoji),
.fbox-icon .gity-emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.fbox-large .gity-emoji {
    font-size: 40px;
}

/* Cards */
.gity-card .team-image img,
.gity-rounded-image {
    border-radius: 6px;
}

.gity-card .team-image img {
    height: 240px;
    object-fit: cover;
}

.gity-service {
    min-height: 330px;
}

.gity-service h3 {
    margin-bottom: 6px;
}

.gity-service .gity-subtitle {
    margin-bottom: 15px;
    color: #888;
    font-weight: 400;
}

.gity-label {
    background-color: var(--gity-primary);
}

.gity-service .gity-label {
    display: inline-block;
    margin-top: 10px;
}

.gity-btn {
    color: #fff !important;
    background-color: var(--gity-primary) !important;
    border-color: var(--gity-primary) !important;
}

/* Gallery & concert list: uniform image sizes */
.portfolio-3 .portfolio-image img {
    height: 260px;
    object-fit: cover;
}

.events .entry-date {
    background-color: rgba(116, 57, 223, .9) !important;
}

.events .entry-image img {
    height: 100%;
    min-height: 150px;
    object-fit: cover;
}

.post-grid .entry-image img {
    height: 220px;
    object-fit: cover;
}

.masonry-thumbs a img {
    height: 120px;
    object-fit: cover;
}

/* Parallax banners & promos with a purple tint */
.gity-parallax {
    position: relative;
    padding: 120px 0;
    background-size: cover;
}

.gity-parallax::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(37, 17, 62, .9), rgba(116, 57, 223, .8));
}

.gity-parallax .container {
    position: relative;
    z-index: 2;
}

/* Full-width promo: keep the text clear of the button on the right */
@media (min-width: 992px) {
    .promo > .container > h3,
    .promo > .container > span,
    .promo-border > h3,
    .promo-border > span {
        display: block;
        padding-right: 300px;
    }
}

.gity-promo {
    background: linear-gradient(120deg, var(--gity-dark), var(--gity-primary)) !important;
}

/* Ticket card on the concert detail page */
.gity-ticket-card {
    padding: 25px;
    border-radius: 8px;
    background: var(--gity-soft);
}

.gity-iconlist li {
    margin-bottom: 12px;
}

.gity-iconlist li i {
    color: var(--gity-primary);
    width: 22px;
}

/* Footer */
#footer.dark,
.dark #footer {
    background-color: var(--gity-dark);
    border-top-color: var(--gity-primary);
}

#footer.dark #copyrights {
    background-color: #170b29;
}

#footer address i {
    width: 18px;
    color: #d8c4ff;
}

/* Small screens */
@media (max-width: 767px) {
    .gity-slide .slider-caption h2 {
        font-size: 30px;
        line-height: 1.3;
    }

    .gity-page-title {
        padding: 90px 0 !important;
    }

    .gity-service {
        min-height: 0;
    }
}

/* Stats (counters) */
.gity-stats {
    padding: 100px 0;
}

.gity-stat-icon {
    display: block;
    margin-bottom: 10px;
    font-size: 42px;
}

.gity-stats .counter {
    color: #fff;
}

.gity-stats .counter.counter-lined + h5:before {
    border-top-color: rgba(216, 196, 255, .6);
}

.gity-stats h5 {
    color: #d8c4ff;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Concert calendar */
.gity-calendar-section {
    padding: 80px 0;
}

.gity-calendar .fc-calendar .fc-row > div.fc-content {
    background: rgba(116, 57, 223, .35);
}

.gity-calendar .fc-calendar .fc-row > div > div a {
    display: block;
    margin-top: 4px;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 12px;
    line-height: 1.4;
    color: #fff;
    background: var(--gity-primary);
}

.gity-calendar .fc-calendar .fc-row > div > div a span {
    display: block;
    font-size: 11px;
    opacity: .8;
}

.gity-calendar .fc-calendar .fc-row > div.fc-today {
    background: rgba(216, 196, 255, .25);
}

.gity-calendar-light .gity-calendar .fc-calendar .fc-row > div.fc-content {
    background: var(--gity-soft);
}

.gity-calendar-hint {
    margin: 15px 0 0;
    font-size: 13px;
    opacity: .8;
}

@media (max-width: 767px) {
    .gity-calendar .fc-calendar .fc-row > div > div a span {
        display: none;
    }
}

.gity-calendar-light .fc-calendar .fc-head {
    background: var(--gity-primary);
}

.gity-calendar .fc-calendar .fc-row > div > div a span {
    background: transparent !important;
    padding: 0 !important;
}