/*==============================================================================
[Master Stylesheet]

Project:     Glaciers — Hockey Team & Sports
Version:     1.0
Description: Glaciers is a premium HTML Bootstrap template crafted for hockey
             teams, sports clubs, leagues, tournaments, and championship events.
             Featuring a modern design, responsive layout, and well-structured
             code, it enables you to create a professional sports website
             quickly and efficiently. The template includes dedicated sections
             for team profiles, match schedules, event management, news updates,
             player statistics, galleries, and fan engagement. Designed with
             flexibility and performance in mind, Glaciers is suitable not only
             for hockey organizations but also for various sports clubs, leagues,
             and athletic communities. Whether you are launching a team website,
             promoting a sports event, or building an online platform for a
             sports organization, Glaciers provides a complete and reliable
             solution.
==============================================================================

TABLE OF CONTENTS
------------------------------------------------------------------------------

  01. Import Vendor
  02. Global Variables
      02.1  Color Variable
      02.2  Font Family Variable
      02.3  Animation Duration Variable
      02.4  Animation Delay Variable
  03. Keyframes & Animation
  04. Base Styles
  05. Base Section
  06. Base Container
  07. Font & Color Utilities
  08. Button Styles
  09. Card Styles
  10. Image Styles
  11. Banner Styles
  12. Heading Styles
  13. Header Styles
  14. Sidebar Styles
  15. Footer Styles
  16. Form Styles
  17. Banner Home Styles
  18. Banner Inner Styles
  19. Banner Notfound Styles
  20. Animation Styles           (utility class declarations)
  21. Icon Styles
  22. About Styles
  23. Partnership Styles
  24. Achievement Style
  25. Programs Style
  26. Testimonial Style
  27. Schedule Style
  28. Upcoming Schedule Style
  29. Why Choose Us Style
  30. Team Style
  31. Pricing Style
  32. FAQs Style
      32.1  FAQs Style          (preview panel with accordion + contact list)
      32.2  General FAQs Style  (full-page FAQ list with centered heading)
  33. Contact CTA Style
  34. Blog Style
  35. Single Post Style
  36. Contact Style
  37. List Style
  38. Custom Spacing
      38.1  Flex Spacing        (gap, column-gap, row-gap utilities)
      38.2  Grid Spacing        (Bootstrap gutter overrides: x, y, combined)

==============================================================================
COLOR GLOSSARY
==============================================================================

  --primary                  #001948          Deep navy blue — body text, headings,
                                              card backgrounds, nav active, dark UI panels
  --secondary                #FFFFFF          Pure white — page background, text on dark bg,
                                              light card surfaces
  --text-color               #303A4C          Dark slate — body paragraph text
  --accent-color             #CE2B2B          Crimson red — brand accent; buttons, icons,
                                              hover states, stars, CTA highlights
  --accent-color-2           #E3E3E3          Light silver — card borders, section dividers,
                                              progress bar background, schedule dividers
  --accent-color-3           #EDEFF3          Pale blue-gray — card & FAQ button backgrounds,
                                              other-post card background
  --accent-color-4           #161616          Near-black — footer background, banner overlay
                                              pseudo-element background (opacity 0.7)
  --accent-color-5           #9C9C9C2E        Gray at ~18% opacity — subtle card borders,
                                              divider lines, progress bar track, stat dividers
  --accent-overlay           rgba(51,51,51,.5) Semi-transparent charcoal — sidebar backdrop
  --accent-color-transparent #FFFFFF00        Fully transparent white — gradient tail stops,
                                              transparent form input background

  One-off values used inline (not CSS variables):
    rgba(0, 0, 0, 0.10196…)  — box-shadow on .card-team, .card-pricing
    rgba(0, 0, 0, .15)        — box-shadow on .card-blog
    rgba(0, 0, 0, .35)        — blog image overlay gradient start
    rgba(45, 45, 45, .2)      — box-shadow on .dropdown-menu
    rgba(0, 0, 0, 0.1)        — box-shadow on .navbar-nav-container (via ::before opacity 0.25)

==============================================================================
TYPOGRAPHY SYSTEM
==============================================================================

  Font Families:
    --font-family-heading    "Noto Sans", sans-serif  — h1–h6, .heading-* utilities,
                                                        buttons, .btn, nav links, dropdowns,
                                                        sidebar menu, accordion buttons,
                                                        form labels, blog links, footer nav
    --font-family-paragraph  "Inter", sans-serif      — body, p, form inputs/textareas,
                                                        footer list, chevron list,
                                                        banner-inner meta, schedule meta,
                                                        progress message, match location/time

  Heading Scale (h1–h6 + utility class aliases):
    h1 / .heading-xl    5.000rem  / weight 700 / line-height 1.125em
    h2 / .heading-lg    3.000rem  / weight 700 / line-height 1.050em
    h3 / .heading-md    1.550rem  / weight 600 / line-height 1.250em
    h4 / .heading-sm    1.313rem  / weight 500 / line-height 1.000em
    h5 / .heading-xs    1.250rem  / weight 700 / line-height 1.250em
    h6 / .heading-xxs   1.050rem  / weight 600 / line-height 1.250em
    All h1–h6: font-family var(--font-family-heading); margin-bottom: 0

  Body & UI Scale:
    body                     1.000rem / weight 400 / line-height (default)
                             font-family: var(--font-family-paragraph)
                             color: var(--primary)
    p                        1.000rem / weight 400 / line-height 1.5em
                             color: var(--text-color)
    button / a / .btn        0.938rem / weight 600 / line-height 1em
                             font-family: var(--font-family-heading)
    .btn (override)          0.938rem / weight 600 / padding 15px 30px / border-radius 30px
    .nav-link                1.125rem / weight 500 / line-height 1em
    .dropdown-item           1.125rem / weight 500 / line-height 1em
    .sidebar-menu a          1.125rem / weight 400 / line-height 1.5em
    form label               1.000rem / weight 600 / line-height 1.25rem
    form input / textarea    1.000rem / weight 400 / line-height 1.5em
    .footer-list li / a      1.000rem / weight 400 / line-height 1.3em
    .footer__legallink-item  1.000rem / weight 400 / line-height 1.5em
    .sub-heading             1.313rem / weight 500 / line-height 1em
                             font-family: var(--font-family-paragraph)
    .chevron-list li         1.000rem / weight 400 / line-height 1.3em
    .blog-cta .cta-text      0.938rem / weight 600 / line-height 1em / text-transform uppercase
    .card-blog__meta         0.875rem / weight 400 / line-height 1rem
    .card-blog__meta.meta-divider  0.500rem

  Key Component Typography:
    .card-about-stat .about-stat      4.000rem / weight 700 / line-height 1.25em
    .achievement__content-item .stat-count
                                      4.000rem / weight 700 / line-height 1.25em
    .match__date-day                  4.000rem / weight 700 / line-height 1.5em
    .match__vs-label                  4.000rem / weight 700 / line-height 1.25em
    .card-image-schedule .schedule-versus
                                      4.000rem / weight 700 / line-height 1.25em
    .pricing__price-amount            4.000rem / weight 700 / line-height 1.25em
    .programs__accordion .accordion-button
                                      1.550rem / weight 600 / line-height 1.25em
    .faq__accordion .accordion-button
                                      1.050rem / weight 600 / line-height 1.25em
    .generalfaq__accordion .accordion-button
                                      1.050rem / weight 600 / line-height 1.25em
    .progress-title                   1.050rem / weight 600 / line-height 1.25em
    .other-post__title                1.050rem / weight 600 / line-height 1.25em
    .other-post__meta                 0.875rem / weight 400 / line-height 1em
    .contactus__info-detail           1.050rem / weight 600 / line-height 1.25rem
    .testimonial-icon                 3.125rem (font-size only)
    .testimonial-stars                0.938rem
    .nav-btn (mobile toggle)          1.100rem / line-height 1.5em

==============================================================================
ANIMATION SYSTEM
==============================================================================

  Duration Variables (section 02.3):
    --anim-duration-fast    0.8s
    --anim-duration-normal  1.1s
    --anim-duration-slow    1.6s

  Delay Variables (section 02.4):
    --anim-delay-none   0s
    --anim-delay-sm     0.25s
    --anim-delay-md     0.45s

  Keyframes Defined (section 03):
    ripple      scale3d(1,1,1) + opacity 1 + border-width 0
              → scale3d(1.7,1.7,1.8) + opacity 0 + border-width 13px
    fade-in     opacity 0 → 1
    fade-up     opacity 0 + translateY(80px)   → opacity 1 + translateY(0)
    fade-down   opacity 0 + translateY(-80px)  → opacity 1 + translateY(0)
    fade-left   opacity 0 + translateX(-120px) → opacity 1 + translateX(0)
    fade-right  opacity 0 + translateX(120px)  → opacity 1 + translateX(0)

  Utility Classes (section 20):
    .animation-box      base state: opacity 0, fill-mode forwards,
                        timing cubic-bezier(0.25,0.8,0.25,1), will-change: opacity transform
    .anim-fast          --anim-duration: var(--anim-duration-fast)
    .anim-normal        --anim-duration: var(--anim-duration-normal)
    .anim-slow          --anim-duration: var(--anim-duration-slow)
    .anim-delay-none    --anim-delay: var(--anim-delay-none)
    .anim-delay-sm      --anim-delay: var(--anim-delay-sm)
    .anim-delay-md      --anim-delay: var(--anim-delay-md)

  Accessibility (section 03):
    @media (prefers-reduced-motion: reduce)
      .animation-box — animation: none !important, opacity: 1 !important,
                       transform: none !important

  Component Transitions (inline, not utility classes):
    General standard         transition: all 0.3s / all 0.3s ease — buttons, icons,
                             nav links, dropdowns, sidebar menu, social icons, blog card,
                             gallery image, progress bar, programs discover link
    .sidebar-overlay         transition: left 0.4s ease-in-out
    .sidebar                 transition: transform 0.4s ease-in-out
    .sidebar-dropdown-menu   transition: max-height 0.3s ease-in-out,
                                         padding 0.3s ease-in-out
    .below-dropdown          transition: margin-top 0.1s ease-in-out
    .sidebar-dropdown-btn    transition: transform 0.3s ease
    .progress-bar            transition: width 0.2s
    .progress-message        transition: left 0.2s
    .programs__accordion
      .accordion-button::after  transition: background-image 0.3s
    .banner-home__cta-intro  transition: all 0.3s ease  (+ :hover scale 0.9)
    .btn-accent              transition: all 0.3s  (+ :hover scale 0.9)
    .footer-social-icon      transition: 0.3s ease
    .team-social-icon        transition: 0.3s ease
    .singlepost__social-icon transition: 0.3s ease

==============================================================================*/

/* ======================= */
/* 01. Import Vendor */
/* ======================= */

@import url('../css/font.css');
@import url('../css/vendor/bootstrap.min.css');
@import url('../css/vendor/fontawesome.min.css');
@import url('../css/vendor/brands.css');
@import url('../css/vendor/solid.css');
@import url('../css/vendor/regular.css');
@import url('../css/vendor/swiper-bundle.min.css');

/* ======================= */
/* 02. Global Variables */
/* ======================= */

:root{
    /* 02.1 Color Variable */
    --primary: #001948;
    --secondary: #FFFFFF;
    --text-color: #303A4C;
    --accent-color: #CE2B2B;
    --accent-color-2: #E3E3E3;
    --accent-color-3: #EDEFF3;
    --accent-color-4: #161616;
    --accent-color-5: #9C9C9C2E;
    --accent-overlay: rgba(51, 51, 51, 0.5);
    --accent-color-transparent: #FFFFFF00;

    /* 02.2 Font Family Variable */
    --font-family-heading: "Noto Sans", sans-serif;
    --font-family-paragraph: "Inter", sans-serif;

    /* 02.3 Animation Duration Variable */
    --anim-duration-fast: 0.8s;
    --anim-duration-normal: 1.1s;
    --anim-duration-slow: 1.6s;

    /* 02.4 Animation Delay Variable */
    --anim-delay-none: 0s;
    --anim-delay-sm: 0.25s;
    --anim-delay-md: 0.45s;
}

/* ======================= */
/* 03. Keyframes & Animation */
/* ======================= */

@keyframes ripple {
    from {
        opacity: 1;
        transform: scale3d(1, 1, 1);
        transform-origin: center;
        border-width: 0px;
    }

    to {
        opacity: 0;
        transform: scale3d(1.7, 1.7, 1.8);
        transform-origin: center;
        border-width: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .animation-box { 
        animation: none !important;
        opacity: 1 !important; 
        transform: none !important; 
    }
}

@keyframes fade-in   { 
    from {opacity:0;} to {opacity:1;} 
}

@keyframes fade-up   { 
    from {opacity:0; transform:translateY(80px);} to {opacity:1; transform:translateY(0);} 
}

@keyframes fade-down { 
    from {opacity:0; transform:translateY(-80px);} to {opacity:1; transform:translateY(0);} 
}

@keyframes fade-left { 
    from {opacity:0; transform:translateX(-120px);} to {opacity:1; transform:translateX(0);} 
}

@keyframes fade-right{ 
    from {opacity:0; transform:translateX(120px);} to {opacity:1; transform:translateX(0);} 
}

/* ======================= */
/* 04. Base Styles */
/* ======================= */

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

body{
    font-family: var(--font-family-paragraph);
    font-size: 1rem;
    color: var(--primary);
}

h1,
.heading-xl{
    font-size: 5rem;
    font-weight: 700;
    line-height: 1.125em;
}

h2,
.heading-lg{
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.05em;
}

h3,
.heading-md{
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.25em;
}

h4,
.heading-sm{
    font-size: 1.313rem;
    font-weight: 500;
    line-height: 1em;
}

h5,
.heading-xs{
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25em;
}

h6,
.heading-xxs{
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25em;
}

h1,
h2,
h3,
h4,
h5,
h6{
    font-family: var(--font-family-heading);
    margin-bottom: 0px;
}

p{
    font-family: var(--font-family-paragraph);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--text-color);
    margin-bottom: 0px;
}

button, a, .btn{
    font-family: var(--font-family-heading);
    font-size: 0.938rem;
    font-weight: 600;
    line-height: 1em;
    text-decoration: none;
}

ul{
    list-style: none;
}

/* ======================= */
/* 05. Base Section */
/* ======================= */

.section{
    padding: 6em 1em 6em 1em;
}

.section-banner-home{
    padding: 15em 1em 6em 1em;
}

.section-wrapper{
    padding: 2em 2em 2em 2em;
}

.section-partnership{
    padding: 3em 1em 3em 1em;
    border-radius: 30px 30px 30px 30px;
}

/* ======================= */
/* 06. Base Container */
/* ======================= */

.hero-container{
    max-width: 1340px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* ======================= */
/* 07. Font & Color Utilities */
/* ======================= */

.font-family-heading{
    font-family: var(--font-family-heading);
}

.font-family-paragraph{
    font-family: var(--font-family-paragraph);
}

.accent-color{
    color: var(--accent-color);
}

.primary-accent{
    color: var(--primary);
}

.secondary-accent{
    color: var(--secondary);
}

.bg-primary-accent{
    background-color: var(--primary);
}

.bg-accent-color{
    background-color: var(--accent-color);
}

.bg-accent-color-3{
    background-color: var(--accent-color-3);
}

/* ======================= */
/* 08. Button Styles */
/* ======================= */

.btn{
    font-family: var(--font-family-heading);
    font-size: 0.938rem;
    font-weight: 600;
    line-height: 1em;
    text-decoration: none;
    padding: 15px 30px 15px 30px;
    border-radius: 30px 30px 30px 30px;
    transition: all 0.3s;
}

.btn-accent{
    background-color: var(--accent-color);
    color: var(--secondary);
}

.btn-accent:hover{
    background-color: var(--primary);
    color: var(--secondary);
    transform: scale(0.9);
}

.btn-accent.hover-secondary:hover{
    background-color: var(--secondary);
    color: var(--accent-color);
    transform: scale(1);
}

.btn-accent.btn-accent-no-scale:hover{
    transform: scale(1);
}

/* ======================= */
/* 09. Card Styles */
/* ======================= */

.card{
    border: none;
    border-radius: 15px 15px 15px 15px;
}

.card-about-stat{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1em;
    padding: 2em 1em 2em 1em;
    border: 1px solid var(--accent-color-2);
}

.card-stat{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    justify-content: center;
    padding: 2em 2em 2em 2em;
}

.card-stat .divider{
    border-bottom: 1px solid var(--accent-color-5);
}

.card-stat .spacer{
    height: 50px;
}

.card-testimonial{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
    padding: 3em 3em 4em;
    background-color: var(--secondary);
    color: var(--primary);
    border: 1px solid var(--accent-color-5);
}

.card-schedule{
    background-color: var(--secondary);
    color: var(--primary);
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 2em 2em;
}

.card-schedule.bg-primary-accent{
    background-color: var(--primary);
    color: var(--secondary);
}

.card-image-schedule{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 1.5em 1.5em;
    border: 1px solid var(--accent-color-5);
    background-color: transparent;
    color: var(--secondary);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.card-image-schedule::before{
    content: '';
    position: absolute;
    background-color: var(--accent-color-4);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.7;
    z-index: -1;
}

.whychooseus__feature-card{
    display: flex;
    flex-direction: row;
    gap: 20px;
    border: 1px solid var(--accent-color-2);
    padding: 1.5em;
    color: var(--primary);
}

.card-match{
    background-color: var(--primary);
    color: var(--secondary);
    display: flex;
    flex-direction: row;
    gap: 30px;
    padding: 2em 2em;
}

.card-match__date-block{
    background-color: var(--accent-color-5);
    color: var(--secondary);
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    text-align: center;
    padding: 1em;
}

.card-team{
    display: flex;
    flex-direction: column;
    gap: 15px;
    border: 1px solid var(--accent-color-5);
    padding: 1em;
    box-shadow: 0px 30px 120px 0px rgba(0, 0, 0, 0.10196078431372549);
}

.card-team-info{
    background-color: var(--primary);
    color: var(--secondary);
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 1.5em;
}

.card-pricing{
    display: flex;
    flex-direction: column;
    gap: 0px;
    box-shadow: 0px 30px 120px 0px rgba(0, 0, 0, 0.10196078431372549);
    position: relative;
    overflow: hidden;
}

.card-blog{
    background-color: var(--secondary);
    color: var(--primary);
    display: flex;
    flex-direction: column;
    gap: 0px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .15);
    transition: all 0.3s ease;
}

.card-other-post{
    background-color: var(--accent-color-3);
    color: var(--primary);
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 1.5em 1.5em;
}

/* ======================= */
/* 10. Image Styles */
/* ======================= */

.image-container{
    display: block;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.testimonial-avatar {
    overflow: visible !important;
    will-change: transform;
}

.image-container img{
    max-width: 100%;
    height: auto;
    border-radius: 15px 15px 15px 15px;
    object-fit: cover;
    object-position: center center;
}

.stat-image img{
    width: 100%;
    height: 313px;
}

.programs__accordion-image{
    width: 40%;
}

.testimonial-avatar img{
    -webkit-mask-image: url('../images/circle.svg');
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    border-radius: 0px;
}

.testimonial-avatar.avatar-left-up img{
    max-width: 60%;
}

.testimonial-avatar.avatar-left-down img{
    max-width: 40%;
}

.testimonial-avatar.avatar-right-up img{
    max-width: 50%;
}

.testimonial-avatar.avatar-right-down img{
    max-width: 35%;
}

.testimonial-avatar-reviwer img{
    width: 80px;
    min-height: 80px;
    border-radius: 50%;
}

.schedule-logo{
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.whychooseus__stats-image{
    width: 40%;
}

.whychooseus__progress-list{
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
}

.progress-container {
    position: relative;
    width: 100%;
}

.progress-title {
    margin-bottom: 8px;
    font-family: var(--font-family-heading);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25em;
    color: var(--primary);
}

.progress-bar-container {
  position: relative;
  width: 100%;
  height: 8px;
  background: var(--accent-color-5);
  border-radius: 5px 5px 5px 5px;
  overflow: visible;
}

.progress-bar {
  height: 100%;
  background: var(--accent-color);
  width: 0;
  transition: width 0.2s;
  border-radius: 5px 5px 5px 5px;
  position: absolute;
  left: 0;
  top: 0;
}

.progress-message {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-100%);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  transition: left 0.2s;
}

.progress-message i {
    font-size: 2.5rem;
    color: var(--primary);
    position: relative;
}

.progress-message span {
    position: absolute;
    font-family: var(--font-family-paragraph);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--accent-color-3);
}

.match__team-logo{
    max-width: 80%;
}

.blog-image img{
    width: 100%;
    border-radius: 15px 15px 0px 0px;
}

.blog-image-overlay{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .35), transparent 75%);
    transition: opacity 0.3s ease;
    z-index: 2;
    opacity: 1;
}

.card-blog:hover .blog-image-overlay{
    opacity: 0;
}

.footer-logo{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-logo img{
    max-width: 70%;
}

.gallery-image{
    overflow: hidden;
    border-radius: 5px;
}

.gallery-image img{
    width: 100%;
    border-radius: 0px;
    aspect-ratio: 1/1;
    transition: all 0.3s ease;
}

.gallery-image img:hover{
    opacity: 0.7;
    transform: scale(1.2);
}

.other-post__thumbnail img{
    width: 100%;
    border-radius: 5px;
}

/* ======================= */
/* 11. Banner Styles */
/* ======================= */

.banner-home{
    background-image: url('../images/professional-hockey-players-and-their-trainer-in-s-2025-03-14-02-49-36-utc.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1;
}

.banner-home::before{
    content: '';
    position: absolute;
    background-color: var(--accent-color-4);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.7;
    z-index: -1;
}

.banner-inner{
    background-image: url('../images/group-of-young-hockey-players-and-their-trainer-in-2025-03-13-08-00-00-utc.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 15em 1em 10em;
    position: relative;
    z-index: 1;
}

.banner-inner::before{
    content: '';
    position: absolute;
    background-color: var(--accent-color-4);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.7;
    z-index: -1;
}

.contact-cta__banner{
    background-attachment: fixed;
    background-image: url('../images/hockey-player-with-puck-on-the-rink-image-with-co-2025-01-08-00-05-51-utc.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 30px;
    padding: 8em 1em;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.contact-cta__banner::before{
    content: '';
    position: absolute;
    background-color: var(--accent-color-4);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.7;
    z-index: -1;
}

.banner-notfound{
    background-image: url('../images/professional-hockey-players-bending-forwards-while-2025-03-15-15-23-47-utc.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20em 1em 18em;
    position: relative;
    z-index: 1;
}

.banner-notfound::before{
    content: '';
    position: absolute;
    background-color: var(--accent-color-4);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.7;
    z-index: -1;
}

/* ======================= */
/* 12. Heading Styles */
/* ======================= */

.sub-heading{
    display: flex;
    flex-direction: row;
    gap: 1em;
    align-items:  center;
    color: var(--accent-color);
    font-family: var(--font-family-paragraph);
    font-size: 1.313rem;
    font-weight: 500;
    line-height: 1em;
}

.heading-section-container{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    text-align: center;
    justify-content: center;
    align-items: center;

}

/* ======================= */
/* 13. Header Styles */
/* ======================= */

.navbar{
    padding: 0px;
}

.navbar-container{
    position: relative;
    z-index: 10;
    margin-bottom: -9em;
    padding: 1em;
}
.navbar-nav-container{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 30px;
    align-items: center;
    justify-content: space-between;
    box-shadow: 5px 5px 25px 3px rgba(0, 0, 0, 0.1);
    padding: 1em 2em;
    position: relative;
    z-index: 1;
}

.navbar-nav-container::before{
    content: '';
    position: absolute;
    background-color: var(--accent-color-2);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 50px;
    opacity: 0.25;
    z-index: -1;
}

.navbar-logo-container{
    width: 20%;
}

.navbar-logo-container img{
    max-width: 90%;
    height: auto;
}

.nav-link-container{
    width: 60%;
    display: flex;
}

.nav-link{
    font-family: var(--font-family-heading);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1em;
    color: var(--secondary);
    padding: 0px 10px !important;
    transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.active,
.nav-link.show{
    color: var(--accent-color) !important;
}

.dropdown-menu{
    background-color: var(--secondary);
    color: var(--primary);
    border-radius: 10px;
    min-width: 220px;
    box-shadow: 0 10px 30px 0 rgba(45, 45, 45, .2);
    padding: 15px 0px;
    transform: translateY(15px);
}

.dropdown-item{
    background-color: var(--secondary);
    color: var(--primary);
    font-family: var(--font-family-heading);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1em;
    padding: 18px;
    transition: all 0.3s ease;
}

.dropdown-item:hover,
.dropdown-item.active, 
.dropdown-item:active{
    background-color: var(--accent-color);
    color: var(--secondary);
}

.dropdown-toggle::after {
    display: none !important;
}

.navbar-cta-container{
    width: 20%;
    display: flex;
    justify-content: flex-end;
}

.nav-btn{
    display: none;
    padding: 6px 6px;
    border-radius: 5px;
    background-color: var(--accent-color);
    color: var(--secondary);
    box-shadow: none;
    outline: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1.5em;
}

/* ======================= */
/* 14. Sidebar Styles */
/* ======================= */

.sidebar-overlay{
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background: var(--accent-overlay);
    transition: left 0.4s ease-in-out;
    z-index: 11;
    display: none;
}

.sidebar-overlay.active{
    left: 0;
}

.sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100%;
    background: var(--secondary);
    color: var(--primary);
    transition: transform 0.4s ease-in-out;
    z-index: 12;
    overflow-y: auto;
    max-height: 100vh;
    padding: 0px 16px 0px 5px;
    display: none;
}

.sidebar.active{
    transform: translateX(300px);
}

.sidebar-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 20px 20px;
}

.sidebar-close-btn {
    aspect-ratio: 1/1;
    padding: 12px;
    border-radius: 5px;
    background-color: var(--accent-color);
    color: var(--secondary);
    box-shadow: none;
    outline: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1.5em;
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.sidebar-menu li {
    padding: 10px 15px;
}

.sidebar-menu a {
    color: var(--primary);
    text-decoration: none;
    display: block;
    font-family: var(--font-family-heading);
    font-size:  1.125rem;
    font-weight: 400;
    line-height: 1.5em;
    letter-spacing: 0px;
    transition: all 0.3s ease;
}

.sidebar-menu a:hover,
.sidebar-menu a.active,
.sidebar-menu a:focus {
    color: var(--accent-color);
}

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

.sidebar-dropdown-btn {
    background: none;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    font-size: 16px;
    cursor: pointer;
    padding: 3px 15px;
    border-radius: 30px;
    transition: transform 0.3s ease;

}
.sidebar-dropdown-btn:hover {
    border: 1px solid var(--primary);
    color: var(--primary);
}

.sidebar-dropdown-menu {
    list-style: none;
    padding-left: 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
    padding-top: 0;
    padding-bottom: 0;
}

.sidebar-dropdown-menu.active {
    max-height: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}
.below-dropdown {
    transition: margin-top 0.1s ease-in-out;
    margin-top: 0px;
}

.sidebar::-webkit-scrollbar {
    width: 5px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: gray;
    border-radius: 5px;
}

/* ======================= */
/* 15. Footer Styles */
/* ======================= */

.footer-container{
    background-color: var(--accent-color-4);
    color: var(--secondary);
    padding: 4em 1em 2em;
}

.footer__page-layout{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.footer__intro-container{
    display: flex;
    flex-direction: row;
    gap: 30px;
    justify-content: space-between;
}

.footer-logo__container{
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: space-between;
}

.footer__intro-block{
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.footer-intro__heading{
    display: flex;
    flex-direction: row;
    gap: 30px;
    justify-content: space-between;
}

.footer-intro__heading-title{
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-intro__navigation{
    display: flex;
    flex-direction: row;
    gap: 30px;
    padding: 2em 0em 0em;
    margin-top: 1em;
    border-top: 1px solid var(--accent-color-5);
}

.footer-nav{
    width: 35%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.footer-nav.footer-nav__quick-contact{
    width: 40%;
    padding-right: 3em;
}

.footer-nav__gallery{
    width: 25%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-list{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-list li,
.footer-list a{
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 10px;
    color: var(--secondary);
    font-family: var(--font-family-paragraph);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3em;
}

.footer-list li::before{
    content: "\f054";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: var(--accent-color);
    margin-right: 0.5em;
    font-size: 1rem;
    display: inline-block;
}

.footer-list-icon i{
    color: var(--accent-color);
}

.footer-list-icon li::before{
    content: "";
    margin: 0px;
}

.footer-intro__social-container{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.footer-social-icon{
    border-radius: 5px;
    padding: 10px;
    color: var(--secondary);
    background-color: var(--accent-color-5);
    font-size: 1.25rem;
    transition: 0.3s ease;
}

.footer-social-icon:hover{
    background-color: var(--accent-color);
}

.footer-gallery{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.footer__copyright{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    border-top: 1px solid var(--accent-color-5);
    padding-top: 2em;
    margin-top: 1em;
}

.copyright-text{
    color: var(--secondary);
}

.footer__legallink{
    display: flex;
    flex-direction: row;
    gap: 30px;
    align-items: center;
    justify-content: flex-end;
}

.footer__legallink-item{
    font-family: var(--font-family-paragraph);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--secondary);
    transition: color 0.3s ease;
}

.footer__legallink .footer__legallink-item:first-child{
    border-right: 1px solid var(--accent-color-5);
    padding-right: 30px;
}

.footer__legallink-item:hover{
    color: var(--accent-color);
}

/* ======================= */
/* 16. Form Styles */
/* ======================= */

.form-group{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact-form{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.newsletter-form-container{
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.newsletter-form{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.form.newsletter-form input{
    width: 60%;
    background-color: var(--accent-color-5);
}

.form.newsletter-form button{
    width: 40%;
    padding: 21px 30px;
    border-radius: 5px;
}

.form label{
    font-family: var(--font-family-heading);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25rem;
    color: var(--primary);
}

.form input,
.form textarea{
    background-color: var(--accent-color-transparent);
    color: var(--primary);
    border-radius: 5px;
    border: 1px solid var(--accent-color-5);
    font-family: var(--font-family-paragraph);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5em;
    padding: 1em;
    box-shadow: none;
    outline: none;
}


.alert {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    padding: 2em;
    border-radius: 6px;
    margin-bottom: 15px;
    background-color: var(--secondary);
    color: var(--accent-color-4);
    border: 1px solid var(--accent-color-4);
}

.hidden{
    display: none;
}

/* ======================= */
/* 17. Banner Home Styles */
/* ======================= */

.banner-home__header{
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0px 10%;
}

.banner-home__cta-intro{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    color: var(--secondary);
    transition: all 0.3s ease;
}

.banner-home__cta-intro:hover{
    transform: scale(0.9);
}

.banner-home__footer{
    display: flex;
    flex-direction: row;
    gap: 1em;
    align-items: center;
    justify-content: space-between;
    margin-top: 8em;
}

.banner-home__highlight-title {
    position: relative;
    display: inline-block;
}

.banner-home__highlight-line {
    position: absolute;
    left: 0;
    bottom: -20px;
    width: 100%;
    height: 40px;
    overflow: visible;
}

.banner-home__highlight-line path {
    fill: none;
    stroke: var(--accent-color);
    stroke-width: 8;
    stroke-linecap: round;

    stroke-dasharray: 500;
    stroke-dashoffset: 500;
}

.banner-avatar-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-wrap: wrap;
    padding-left: 30%;
    width: 50%;
}

.banner-avatar-wrapper{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0.25em 0.15em 0.25em 0.15em;
    border-radius: 50px 50px 50px 50px;
    background-color: var(--accent-color-5);
    border: 1px solid var(--accent-color-5);
}

.banner-avatar{
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    min-height: 50px;
    -webkit-mask-image: url('../images/circle.svg');
    -webkit-mask-size: contain;
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
}

/* ======================= */
/* 18. Banner Inner Styles */
/* ======================= */

.banner-inner__page-layout{
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    justify-content: center;
}

.banner-inner__title{
    color: var(--secondary);
    text-align: center;
}

.banner-inner__description{
    width: 50%;
    color: var(--secondary);
    text-align: center;
}

.banner-inner__meta-header-list{
    display: flex;
    flex-direction: row;
    gap: 30px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0px;
    padding: 0px;
}

.banner-inner__meta-header-list li{
    display: flex;
    flex-direction: row;
    gap: 25px;
    align-items: center;
    color: var(--secondary);
    font-family: var(--font-family-paragraph);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5em;
}

.banner-inner__meta-header-list li:not(:last-child){
    padding-right: 25px;
    border-right: 1px solid var(--accent-color-5);
}

.banner-inner__meta-header-list li > i{
    color: var(--accent-color);
}

/* ======================= */
/* 19. Banner Notfound Styles */
/* ======================= */

.banner-notfound__page-layout{
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--secondary);
}

.banner-notfound__description{
    color: var(--secondary);
    width: 50%;
}

/* ======================= */
/* 20. Animation Styles */
/* ======================= */

.animation-box {
    opacity: 0;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: opacity, transform;
}

.anim-fast {
    --anim-duration: var(--anim-duration-fast);
}

.anim-normal {
    --anim-duration: var(--anim-duration-normal);
}

.anim-slow {
    --anim-duration: var(--anim-duration-slow);
}

.anim-delay-none {
    --anim-delay: var(--anim-delay-none);
}

.anim-delay-sm {
    --anim-delay: var(--anim-delay-sm);
}

.anim-delay-md {
    --anim-delay: var(--anim-delay-md);
}

/* ======================= */
/* 21. Icon Styles */
/* ======================= */

.social-icon{
    padding: 10px 10px 10px 10px;
    border-radius: 5px 5px 5px 5px;
    background-color: var(--accent-color-5);
    color: var(--secondary);
    transition: all 0.3s;
}

.social-icon:hover{
    background-color: var(--accent-color);
}

.banner-avatar-icon{
    width: 50px;
    min-height: 50px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.5em;
    border-radius: 50%;
    background-color: var(--accent-color);
    color: var(--secondary);
    font-size: 16px;
    line-height: 1;
    transition: all 0.3s;
}

.banner-avatar-icon:hover{
    background-color: var(--primary);
}

/* ======================= */
/* 22. About Styles */
/* ======================= */

.about__page-layout{
    display: flex;
    flex-direction: row;
    gap: 50px;
    justify-content: space-between;
}

.about__image-intro{
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-right: 3em;
}

.about__content-intro{
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: space-between;
}

.card-about-stat .about-stat{
    color: var(--primary);
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.25em;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
}

/* ======================= */
/* 23. Partnership Styles */
/* ======================= */

.partnership-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 50px 50px;
}

.partneship-title-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 30%;
    border: none;
    border-right: 1px solid var(--accent-color-5);
}

.partnership-swiper-container{
    display: flex;
    width: 70%;
}

.swiper{
    width: 100%;
    height: auto;
}

.swiper-wrapper{
    width: 100%;
}

.swiper-slide{
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-partner .swiper-slide img{
    max-width: 80%;
    height: auto;
}

/* ======================= */
/* 24. Achievement Style */
/* ======================= */

.achievement__page-layout{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.achievement__header{
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.achievement__header .achievement__header-description{
    width: 70%;
}

.achievement__content{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.achievement__content-item .stat-count{
    font-family: var(--font-family-heading);
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.25em;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
}

/* ======================= */
/* 25. Programs Style */
/* ======================= */

.programs__page-layout{
    display: flex;
    flex-direction: row;
    gap: 0px;
}

.programs__intro-panel{
    width: 50%;
    background-color: var(--primary);
    color: var(--secondary);
    padding: 6em 6em 6em 14em;
    border-radius: 30px 0px 0px 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
    z-index: 1;
}

.programs__intro-panel::before{
    content: '';
    position: absolute;
    background-image: url('../images/gr-bg.png');
    background-position: center center;
    background-repeat: repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.05;
    z-index: -1;
}

.programs__caption{
    color: var(--secondary);
}

.programs__accordion-panel{
    width: 50%;
    background-color: var(--accent-color);
    color: var(--secondary);
    padding: 6em 14em 6em 6em;
    border-radius: 0px 30px 30px 0px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: space-between;
}

.programs__intro-text{
    color: var(--secondary);
}

.programs__accordion{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.programs__accordion .accordion-item{
    background-color: transparent;
    border: none;
    color: var(--secondary);
    outline: none;
    border-radius: 0px;
}

.programs__accordion .accordion-button{
    padding: 0px 0px 16px;
    background-color: var(--accent-color-transparent);
    color: var(--secondary);
    box-shadow: none;
    border-bottom: 2px solid var(--accent-color-5);
    font-family: var(--font-family-heading);
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.25em;
}

.programs__accordion .accordion-button:not(.collapsed){
    border-bottom: 2px solid var(--accent-color-2);
}

.programs__accordion .accordion-body{
    padding: 30px 0px 0px 0px;
}

.programs__accordion .accordion-button::after {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="white" viewBox="0 0 20 20"><rect x="9" y="4" width="2" height="12"/><rect x="4" y="9" width="12" height="2"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    color: var(--secondary);
    fill: var(--secondary);
    content: "";
    width: 1.5em;
    height: 1.5em;
    transition: background-image 0.3s;
}

.programs__accordion .accordion-button:not(.collapsed)::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="white" viewBox="0 0 20 20"><rect x="4" y="9" width="12" height="2"/></svg>');
}

.programs__accordion-content{
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.programs__accordion-text{
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.programs__discover-link{
    color: var(--secondary);
    transition: all 0.3s;
}

.programs__discover-link:hover{
    transform: scale(0.9);
}

/* ======================= */
/* 26. Testimonial Style */
/* ======================= */

.testimonial-banner{
    position: relative;
    z-index: 1;
}

.testimonial-banner::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-image: url('../images/world-map.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.05;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.testimonial__page-layout{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.testimonial__header{
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    text-align: center;
}

.testimonial__header .testimonial__header-caption{
    width: 70%;
}

.testimonial__content{
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.testimonial__avatar-container{
    width: 20%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
}

.testimonial__swiper-container{
    width: 60%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.testimonial-content__container{
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: center;
}

.testimonial-icon{
    font-size: 3.125rem;
    color: var(--primary);
}

.testimonial-text{
    color: var(--primary);
}

.testimonial-stars{
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.938rem;
    color: var(--accent-color);
    fill: var(--accent-color);
}

.testimonial__bio-container{
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    margin-top: -2.5em;
}

.testimonial-name{
    color: var(--primary);
}

.testimonial-designation{
    color: var(--accent-color);
}

.swiper-testimonial{
    padding-bottom: 3em;
}

.swiper-testimonial .swiper-pagination {
	position: absolute;
	bottom: 0px;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
}

.swiper-testimonial .swiper-pagination-bullet {
	width: 9px;
	height: 9px;
	background: var(--accent-color-2);
	opacity: 1;
	margin: 0 5px !important;
	border-radius: 50%;
	transition: 0.3s;
}

.swiper-testimonial .swiper-pagination-bullet-active {
	background: var(--accent-color);
    width: 30px;
	border-radius: 10px;
}

/* ======================= */
/* 27. Schedule Style */
/* ======================= */

.schedule__page-wrapper{
    background-color: var(--accent-color-2);
    color: var(--primary);
    padding: 6em 1em;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
}

.schedule__page-layout{
    display: flex;
    flex-direction: row;
    gap: 30px;
    justify-content: space-between;
}

.schedule__intro-container{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.schedule__intro-container .schedule__divider{
    border-bottom: 1px solid var(--accent-color-2);
    margin: 5px 0px;
    width: 100%;
}

.card-scedule-body{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card-scedule-body .divider{
    border-bottom: 1px solid var(--accent-color-5);
    margin: 1px 0px;
}

.schedule-item{
    display: flex;
    flex-direction: row;
    gap: 15px;
}

.schedule__image-container{
    width: 50%;
    background-image: url('../images/hockey-players-and-their-trainer-standing-on-ice-r-2025-03-14-19-10-28-utc.jpg');
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 1.3em 1.3em;
    border-radius: 15px;
    margin-left: 3em;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.schedule__image-container .spacer{
    height: 50px;
}

.card-image-schedule .schedule-divider{
    margin: 5px 0px;
    border-bottom: 1px solid var(--accent-color-5);
}

.card-image-schedule .schedule-container{
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
}

.card-image-schedule .schedule-versus{
    font-family: var(--font-family-heading);
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.25em;
    color: var(--accent-color);
}

.card-image-schedule .schedule-meta-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.schedule-meta-container .schedule-meta{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    width: auto;
    height: 100%;
    padding: 0px 15px;
    font-family: var(--font-family-paragraph);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5em;
}

.schedule-meta-container .schedule-meta:first-child{
    border-right: 1px solid var(--accent-color-5);
}

.schedule-meta-container .schedule-meta i{
    color: var(--accent-color);
}

/* ======================= */
/* 28. Upcoming Schedule Style */
/* ======================= */

.matchlist__page-layout{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.matchlist__heading-container{
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.matchlist__heading-description{
    width: 70%;
}

.matchlist__list{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.match__date-block{
    width: 25%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.match__location{
    font-family: var(--font-family-paragraph);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5em;
}

.match__location i{
    color: var(--accent-color);
}

.match__date-day{
    font-family: var(--font-family-heading);
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.5em;
}

.match__time{
    background-color: var(--accent-color);
    color: var(--secondary);
    border-radius: 10px;
    padding: 0.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-family: var(--font-family-paragraph);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5em;
}

.match__versus-block{
    width: 55%;
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}

.match__team{
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px 10px;
}

.match__vs-label{
    font-family: var(--font-family-heading);
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.25em;
    color: var(--accent-color);
}

.match__cta-block{
    width: 20%;
    display: flex;
    align-items: center;
    border-left: 1px solid var(--accent-color-5);
    padding-left: 2em;
}

/* ======================= */
/* 29. Why Choose Us Style */
/* ======================= */

.whychooseus__page-layout{
    display: flex;
    flex-direction: row;
    gap: 50px;
    justify-content: space-between;
}

.whychooseus__feature-container{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-right: 1em;
}

.whychooseus__intro-container{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.whychooseus__feature-icon{
    color: var(--accent-color);
    font-size: 1.6rem;
}

.whychooseus__intro-container .whychooseus__divider{
    width: 100%;
    border: 1px solid var(--accent-color-2);
    margin: 3px 0px;
}

.whychooseus__tag-list{
    display: flex;
    flex-direction: row;
    gap: 30px;
    align-items: center;
    flex-wrap: wrap;
}

.whychooseus__tag-item{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    font-family: var(--font-family-paragraph);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--primary);
}

.whychooseus__tag-icon{
    color: var(--accent-color);
}

.whychooseus__stats-block{
    display: flex;
    flex-direction: row;
    gap: 30px;
}

/* ======================= */
/* 30. Team Style */
/* ======================= */

.team__page-layout{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.team__page-heading{
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    text-align: center;
}

.team__heading-description{
    width: 70%;
}

.team-info-name{
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.team-social{
    width: 40%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.team-social-icon{
    border-radius: 5px;
    padding: 10px;
    color: var(--secondary);
    background-color: var(--accent-color-5);
    font-size: 1.25rem;
    transition: 0.3s ease;
}

.team-social-icon:hover{
    background-color: var(--accent-color);
}

/* ======================= */
/* 31. Pricing Style */
/* ======================= */

.pricing__page-layout{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.pricing__heading-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.pricing__heading-description{
    width: 70%;
}

.pricing__card-header{
    background-color: var(--accent-color-3);
    color: var(--primary);
    display: flex;
    flex-direction: column;
    gap: 30px;
    border: 1px solid var(--accent-color-5);
    padding: 2em;
}

.pricing__card-header-popular{
    background-color: var(--primary);
    color: var(--secondary);
}

.pricing__price{
    display: flex;
}

.pricing__price-currency{
    font-family: var(--font-family-heading);
    color: var(--accent-color);
}

.pricing__price-amount{
    font-family: var(--font-family-heading);
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.25em;
    color: var(--accent-color);
}

.pricing__price-period{
    font-family: var(--font-family-heading);
    display: flex;
    align-items: flex-end;
}

.pricing__card-body{
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 2em 2em;
}

.pricing__feature-list{
    padding: 0px;
    margin: 0px;
    list-style: none;
}

.pricing__feature-list li{
    font-family: var(--font-family-paragraph);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--text-color);
    margin-bottom: 10px;
}

.pricing__feature-list li>i{
    color: var(--accent-color);
}

/* ======================= */
/* 32. FAQs Style */
/* ======================= */

/* 32.1 FAQs Style */

.faq__page-layout{
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.faq__accordion-container{
    width: 60%;
}

.faq__accordion{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq__accordion .accordion-item{
    border: none;
    background-color: transparent;
}

.faq__accordion .accordion-button{
    background-color: var(--accent-color-3);
    color: var(--primary);
    font-family: var(--font-family-heading);
    font-size: 1.05em;
    font-weight: 600;
    line-height: 1.25em;
    border-radius: 5px !important;
    padding: 18px;
    box-shadow: none;
    border: none;
    outline: none;
    transition: all 0.3s ease;
}

.faq__accordion .accordion-body{
    padding: 1.75em 2.5em 1.5em 2.5em;
}

.faq__accordion .accordion-button:hover{
    color: var(--accent-color);
}

.faq__accordion .accordion-button:not(.collapsed){
    background-color: var(--accent-color);
    color: var(--secondary);
}

.faq__accordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}

.faq__intro-container{
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: space-between;
    padding-left: 1em;
}

.faq__intro-heading{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.faq__contact-list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.faq__contact-item{
    display: flex;
    flex-direction: row;
    gap: 15px;
}

.faq__contact-icon{
    background-color: var(--accent-color);
    color: var(--secondary);
    font-size: 1.50rem;
    padding: 15px;
    border-radius: 5px 5px 5px 5px;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.faq__contact-body{
    display: flex;
    flex-direction: column;
    gap: 0px;
    justify-content: space-between;
}

/* 32.2 General FAQs Style */

.generalfaq__page-layout{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.generalfaq__heading-container{
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.generalfaq__heading-description{
    width: 70%;
}

.generalfaq__accordion{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.generalfaq__accordion .accordion-item{
    border: none;
    background-color: transparent;
}

.generalfaq__accordion .accordion-button{
    background-color: var(--accent-color-3);
    color: var(--primary);
    font-family: var(--font-family-heading);
    font-size: 1.05em;
    font-weight: 600;
    line-height: 1.25em;
    border-radius: 5px !important;
    padding: 18px;
    box-shadow: none;
    border: none;
    outline: none;
    transition: all 0.3s ease;
}

.generalfaq__accordion .accordion-body{
    padding: 1.75em 2.5em 1.5em 2.5em;
}

.generalfaq__accordion .accordion-button:hover{
    color: var(--accent-color);
}

.generalfaq__accordion .accordion-button:not(.collapsed){
    background-color: var(--accent-color);
    color: var(--secondary);
}

.generalfaq__accordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}

/* ======================= */
/* 33. Contact CTA Style */
/* ======================= */

.contact-cta__title-container{
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    color: var(--secondary);
}

/* ======================= */
/* 34. Blog Style */
/* ======================= */

.blog__page-layout{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.blog__page-heading{
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    text-align: center;
}

.blog__page-description{
    width: 70%;
}

.card-blog__body{
    padding: 1.25em 1.5em 0.938em;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blog-link{
    color: var(--primary);
}

.blog-cta{
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--accent-color);
    margin-bottom: 15px;
}

.blog-cta .cta-text{
    font-size: 0.938rem;
    font-weight: 600;
    line-height: 1em;
    text-transform: uppercase;
    color: var(--accent-color);
}

.card-blog__footer{
    padding: 0.625em 1.5em;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.card-blog__meta{
    font-family: var(--font-family-heading);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1rem;
    color: var(--accent-color-4);
}

.card-blog__meta.meta-divider{
    font-size: 0.5rem;
}

/* ======================= */
/* 35. Single Post Style */
/* ======================= */

.singlepost__page-layout{
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.singlepost__content-container{
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.singlepost__list{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 2.5em;
}

.singlepost__list li{
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

.singlepost__list li::before{
    content: "\f111";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: var(--text-color);
    margin-right: 0.5em;
    font-size: 0.25rem;
    display: inline-block;
}

.singlepost__sidebar{
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.singlepost__other-list{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.other-post__layout{
    display: grid;
    grid-template-columns: 0.40fr 0.60fr;
    gap: 20px;
    align-items: center;
}

.other-post__body{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.other-post__title{
    font-family: var(--font-family-heading);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25em;
    color: var(--primary);
    transition: all 0.3s ease;
}

.other-post__title:hover{
    color: var(--accent-color);
}

.other-post__meta{
    font-family: var(--font-family-heading);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1em;
    color: var(--text-color);
}

.sidebar-cta-banner{
    background-image: url('../images/three-professional-hockey-players-standing-on-rink-2025-03-13-11-28-12-utc.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--secondary);
    gap: 20px;
    padding: 2em;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.sidebar-cta-banner::before{
    content: '';
    position: absolute;
    background-color: var(--accent-color-4);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.7;
    z-index: -1;
}

.singlepost__social-list{
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

.singlepost__social-icon{
    border-radius: 5px;
    padding: 10px;
    color: var(--secondary);
    background-color: var(--accent-color);
    font-size: 1.25rem;
    transition: 0.3s ease;
}

.singlepost__social-icon:hover{
    background-color: var(--primary);
}

/* ======================= */
/* 36. Contact Style */
/* ======================= */

.contactus__page-layout{
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.contactus__form-container{
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-right: 2em;
}

.contactus__info-container{
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
    padding-left: 3em;
}

.contactus__info-item{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contactus__info-detail{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--font-family-heading);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25rem;
    color: var(--accent-color);
}

.contactus__info-detail i{
    font-size: 1.563rem;
}

.contactus__info-container .divider{
    border-bottom: 1px solid var(--accent-color-5);
    margin: 20px 0px;
}

/* ======================= */
/* 37. List Style */
/* ======================= */

.chevron-list{
    list-style: none;
    padding-left: 0;
}

.chevron-list li{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 1em;
    margin-bottom: 15px;
    color: var(--text-color);
    font-family: var(--font-family-paragraph);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3em;
}

.chevron-list a{
    color: var(--text-color);
    font-family: var(--font-family-1);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3em;
}

.chevron-list li:last-child{
    margin-bottom: 0px;
}

.chevron-list li::before {
    content: "\f054";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: var(--accent-color);
    margin-right: 0.5em;
    font-size: 1rem;
    display: inline-block;
}

/* ======================= */
/* 38. Custom Spacing */
/* ======================= */

/* 38.1 Flex Spacing */

.flex-gap-0 { 
    gap: 0px 0px; 
}
.flex-gap-1 { 
    gap: 10px 10px; 
}
.flex-gap-2 { 
    gap: 20px 20px; 
}
.flex-gap-3 { 
    gap: 30px 30px; 
}
.flex-gap-4 { 
    gap: 40px 40px; 
}
.flex-gap-5 {
    gap: 50px 50px; 
}
.flex-gap-x-0 { 
    column-gap: 0px; 
}
.flex-gap-x-1 { 
    column-gap: 10px; 
}
.flex-gap-x-2 { 
    column-gap: 20px; 
}
.flex-gap-x-3 { 
    column-gap: 30px; 
}
.flex-gap-x-4 { 
    column-gap: 40px; 
}
.flex-gap-x-5 { 
    column-gap: 50px; 
}

.flex-gap-y-0 { 
    row-gap: 0px; 
}
.flex-gap-y-1 { 
    row-gap: 10px; 
}
.flex-gap-y-2 { 
    row-gap: 20px; 
}
.flex-gap-y-3 { 
    row-gap: 30px; 
}
.flex-gap-y-4 { 
    row-gap: 40px; 
}
.flex-gap-y-5 { 
    row-gap: 50px; 
}

/* 38.2 Grid Spacing */

.grid-gap-0{
    --bs-gutter-x: 0px;
    --bs-gutter-y: 0px;
}

.grid-gap-1{
    --bs-gutter-x: 10px;
    --bs-gutter-y: 10px;
}

.grid-gap-2{
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
}

.grid-gap-3{
    --bs-gutter-x: 30px;
    --bs-gutter-y: 30px;
}

.grid-gap-4{
    --bs-gutter-x: 40px;
    --bs-gutter-y: 40px;
}

.grid-gap-5{
    --bs-gutter-x: 50px;
    --bs-gutter-y: 50px;
}

.grid-gap-x-0 {
    --bs-gutter-x: 0px;
}

.grid-gap-x-1 {
    --bs-gutter-x: 10px;
}
.grid-gap-x-2 {
    --bs-gutter-x: 20px;
}
.grid-gap-x-3 {
    --bs-gutter-x: 30px;
}
.grid-gap-x-4 {
    --bs-gutter-x: 40px;
}
.grid-gap-x-5 {
    --bs-gutter-x: 50px;
}

.grid-gap-y-0 {
    --bs-gutter-y: 0px;
}
.grid-gap-y-1 {
    --bs-gutter-y: 10px;
}
.grid-gap-y-2 {
    --bs-gutter-y: 20px;
}
.grid-gap-y-3 {
    --bs-gutter-y: 30px;
}
.grid-gap-y-4 {
    --bs-gutter-y: 40px;
}
.grid-gap-y-5 {
    --bs-gutter-y: 50px;
}