section#home {
    min-height: 900px;
    width: 100%;
    padding: 18rem 12rem 0 12rem;
    position: relative;
    margin-top: -6.2rem;
    height: 100vh;           
    background-image: url('../assets/img/main-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-origin: padding-box;
}

p#welcome {
    max-width: 50%;
    margin: 0 0 3rem 0;
}

.home-weolcome-title {
    font-size: 4.2rem;
}

.home-welcome-header {
    color: var(--text-red);
    padding-left: 7px;
    font-size: 2rem;
    
}

.home-weolcome-header-3 {
    margin: 0;
    font-size: 1.5rem;
    font-family: "Dela Gothic One", sans-serif;
    font-weight: 400;
    font-style: normal;
    padding-bottom: 1rem;
}

.buttons {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    
}

/* KARTY Z IKONAMI & KARTY PARTNEROW */

.contact-highlights {
    margin: 0;
    padding: 4rem 4rem 7rem 4rem;
    background-color: var(--main-bg);
}

ul.info-cards {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 5rem;
    padding: 0;
    justify-content: space-between;
}

li.info-card {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    min-width: 240px;
    text-align: center;
    opacity: 0;
    transform: translateY(100px);
    transition: transform .6s ease, opacity .6s ease;
    will-change: transform, opacity;
}

li.info-card.is-in {
  opacity: 1;
  transform: translateY(0);
}

.info-cards > .info-card:nth-child(1) { transition-delay: .0s; }
.info-cards > .info-card:nth-child(2) { transition-delay: .05s; }
.info-cards > .info-card:nth-child(3) { transition-delay: .10s; }
.info-cards > .info-card:nth-child(4) { transition-delay: .15s; }
.info-cards > .info-card:nth-child(5) { transition-delay: .20s; }
.info-cards > .info-card:nth-child(6) { transition-delay: .25s; }



li.info-card svg {
    color: var(--text-red);
    filter:
        drop-shadow(4px 4px 0 rgba(95, 0, 0, 0.60))  
        drop-shadow(-2px -2px 0 rgba(179, 0, 0, 0.30));
}

li.info-card .label {
    
    font-size: 1.6rem;
    text-align: center;
    filter:
        drop-shadow(2px 2px 0 rgba(119, 119, 119, 0.7))  
        drop-shadow(-1px -1px 0 rgba(110, 110, 110, 0.33)); 
}

ul.bullets {
    list-style: none;
    padding: 0;
}

section#sport-cards {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 8rem;
}

h2#sport-cards-title {
    font-family: "BBH Sans Hegarty", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3rem;
    color: var(--text-red);
    filter:
        drop-shadow(3px 3px 0 rgba(52, 52, 52, 0.6))  
}

ul.sport-cards-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    padding: 0;
}

/* BREAKER */

section#breaker {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3rem;
    justify-content: space-between;
    align-items: center;
    padding: 5rem;
    width: 100%;
    background-image: url('../assets/img/pre-img-1.png');
    background-repeat: repeat;
    background-position: center;  
    background-size: cover;
}

section#breaker .left {
    flex: 1 1 0;
    text-align: center;
    transform: var(--reveal, none);
    transition: transform .7s cubic-bezier(.2,.8,0,1), opacity .7s cubic-bezier(.2,.8,0,1);
}

section#breaker .left h2#breaker-title {
    color: var(--text-red);
    margin: 0;
    font-style: italic;
}

section#breaker .left h3 {
    color: var(--text-red);
    margin: 0;
}

section#breaker .right {
    flex: 1 1 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
}

section#breaker .right a{
  display:inline-block;
  position:relative;
  text-decoration:none;
  text-align:center;
  margin:.5rem;
  filter:
    drop-shadow(4px 4px 0 rgba(92,92,92,.6))
    drop-shadow(-2px -2px 0 rgba(100,100,100,.3));
}

section#breaker .right a .btn-shape{
  display:inline-block;
  padding:1rem 1.5rem;
  color:var(--main-light);
  font-family: inherit;
  font-size:1.5rem;
  font-weight:bold;

  border:3px solid var(--main-light);
  background:transparent;

  transform: skewX(-15deg);                         
  transition:
    transform .7s cubic-bezier(.2,.8,0,1),
    background-color .25s ease,
    color .25s ease;
}

section#breaker .right a .btn-text{
  display:inline-block;
  transform: skewX(15deg);
}

section#breaker .right a:hover .btn-shape{
  background: var(--main-light);
  color: var(--main-bg);
  transform: skewX(-15deg) translateX(4px);
}

section#breaker .right a:focus-visible .btn-shape{
  outline: 2px dashed var(--main-light);
  outline-offset: 4px;
}

/* CENNIK */

#cennik {
    background: linear-gradient(180deg,rgba(26, 26, 26, 1) 0%, rgba(11, 11, 11, 1) 50%, rgba(26, 26, 26, 1) 100%);
    padding: 9rem 3rem 5rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    
}

#cennik h1{
  font-size: 6rem;
  font-style: italic;
  position: relative;
  z-index: 0;
  isolation: isolate;            
  color: var(--text-red);
}


#cennik h1 .title{
  filter:
    drop-shadow(5px 5px 0 rgba(107, 0, 0, 0.6))
    drop-shadow(-5px -5px 0 rgba(27, 27, 27, 0.4))
    drop-shadow(40px 0 15px color-mix(in srgb, var(--text-red) 30%, transparent))
    drop-shadow(-40px 0 15px color-mix(in srgb, var(--text-red) 30%, transparent));
  position: relative;
  z-index: 1;                    
}


#cennik h1::after{
  content: attr(data-shadow);
  position: absolute;
  left: 0; top: 0;
  transform-origin: center;
  transform: scale(1.7);
  color: #545454;
  opacity: .2;
  z-index: 0;                  
  pointer-events: none;
  transition: all .5s;
  filter: 
        drop-shadow(50px 0 10px color-mix(in srgb, var(--main-light) 7%, transparent))
        drop-shadow(-50px 0 10px color-mix(in srgb, var(--main-light) 7%, transparent));                 
}

#cennik h2 {
    padding-top: 3rem;
    font-size: 2.5rem;
    filter:
        drop-shadow(4px 4px 0 rgba(183, 183, 183, 0.4))
        
}

#cennik #karnety,
#cennik #additional-options {
    margin: 3.5rem 0
}

#cennik #karnety ul.tickets-list,
#cennik #additional-options ul.tickets-list {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    
}

#cennik #karnety ul.tickets-list li h3,
#cennik #additional-options ul.tickets-list li h3 {
    font-size: 2em;
    margin: 0;
    color: var(--text-red);
    font-style: italic;
    filter:
        drop-shadow(3px 3px 0 rgba(107, 0, 0, 0.6))
        drop-shadow(-3px -3px 0 rgba(27, 27, 27, 0.4));
    
}

#cennik #karnety ul.tickets-list li svg,
#cennik #additional-options ul.tickets-list li svg {
    min-width: 22px;
    min-height: 22px;
    max-width: 22px;
    max-height: 22px;
}

#cennik #karnety ul.tickets-list li .price,
#cennik #additional-options ul.tickets-list li .price {
    font-size: 3rem;
    font-style: italic;
    filter:
        drop-shadow(3px 3px 0 rgba(116, 116, 116, 0.6));
    
}

#cennik #karnety ul.tickets-list li .time,
#cennik #additional-options ul.tickets-list li .time {
    font-size: 1.2rem;
}

#cennik #karnety ul.tickets-list li .time span,
#cennik #additional-options ul.tickets-list li .time span {
    color: var(--text-red);
    font-weight: bold;
}

#cennik #karnety ul.tickets-list li ul,
#cennik #additional-options ul.tickets-list li ul{
    padding: 1.3rem 0;
    border-top: 1px solid var(--text-red);
}

#cennik #karnety ul.tickets-list li ul > li,
#cennik #additional-options ul.tickets-list li ul > li{
    padding: 0;
    list-style: none;
    font-size: 1rem;
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 0.5rem;
    
}

#cennik #karnety ul.tickets-list li ul > li svg,
#cennik #additional-options ul.tickets-list li ul > li svg{
    color: var(--text-red);
}


/* KALKULATORY */

#calculator {
    padding: 7rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    width: 100%;
    background: linear-gradient(90deg,rgba(18, 18, 18, 1) 0%, rgba(11, 11, 11, 1) 50%, rgba(26, 26, 26, 1) 100%);
    background-image: url('../assets/img/liquid-bg-1.png');
    background-repeat: no-repeat;
    background-size: cover;
}

#calculator-title{
  color: transparent;
}

#calculator-title .title{
    font-size: 4.5rem;
    font-style: italic;
    display:inline-block;
    color: transparent;                  
    -webkit-text-stroke: 2px var(--text-red);         
    filter:
        drop-shadow(0 0 6px  var(--text-red))
        drop-shadow(0 0 14px color-mix(in srgb, var(--text-red) 70%, transparent))
        drop-shadow(0 0 28px color-mix(in srgb, var(--text-red) 45%, transparent));
}

#calculator h2 {
    padding-top: 3rem;
    font-style: italic;
    text-align: center;
    font-size: 3.5rem;
    filter:
        drop-shadow(0 -15px 0 rgba(106, 106, 106, 0.4))
        drop-shadow(0 -25px 0 rgba(89, 89, 89, 0.25));
}

#bmi-form,
#kcal-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin-top: 5rem;
}

.calculate-btn {
    cursor: pointer;
    text-decoration:none;
    text-align:center;
    width: 97%;
    padding: 1.7rem;
    font-size: 1.6rem;
    transform: skewX(-15deg);
    color: var(--main-light);
    background-color: #851b1b;
    border: none;
    filter: drop-shadow(-6px -6px 0 rgba(61, 61, 61, 0.35));
    transition: all .3s;
}

.calculate-btn:hover {
    transform: scale(0.98) skewX(-15deg);
    background-color: #6e1717;
    color: var(--main-light);
    filter: drop-shadow(-9px -9px 0 rgba(61, 61, 61, 0.35));
    
}

.bmi-result {
    font-size: 1.3rem;
    transition: padding 0.3s ease; 
}

.bmi-result #bmi-value {
    color: var(--text-red);
    font-weight: bold;
}

.bmi-result.show-calc {
    padding: 1rem;
}

#kcal-calculator {
    margin-top: 5rem;
}

.kcal-result.show-kcal {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    align-items: center;
}

.kcal-result .result-text {
    font-size: 1.3rem;
    color: var(--text-red);
    text-align: center;
}

#bmr-value,
#tdee-value,
#goal-value {
    color: var(--text-red);
    font-weight: bold;
}

/* MEDIA */

@media (max-width: 1268px) {
    section#home {
        padding: 15rem 4rem;
    }

    .buttons {
        flex-direction: column;
    }

    .home-weolcome-title {
        font-size: 3rem;
    }

    .home-welcome-header {
        font-size: 1.6rem;
        
    }

    .home-weolcome-header-3 {
        text-align: center;
        font-size: 1.4rem;
    }

    p#welcome {
        max-width: 100%;
        text-align: center;
        width: 100%;
        margin-top: 1rem;
    }


    h2#sport-cards-title {
        font-size: 2rem;
    }

    ul.sport-cards-list {
        gap: 2rem;
    }

    section#breaker {
        flex-direction: column;
    }

    section#breaker .right a .btn-shape {
        font-size: 1.2rem;
    }

    #cennik {
        padding: 7rem 3rem;
    }

    #cennik h1 {
        font-size: 4rem;
    }

    #cennik h1::after {
        transform: scale(1.6);
    }

    #cennik h2 {
        font-size: 1.7rem;
    }

    #calculator-title .title {
        font-size: 3rem;
    }

    #calculator h2 {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    section#home {
        padding: 12rem 2rem;
        height: 1000px;
    }


    section#breaker {
        padding: 2rem;
    }

    
    section#breaker .right a .btn-shape {
        font-size: 1rem;
    }

    #cennik {
        padding: 4rem 3rem;
    }

     #cennik h1 {
        font-size: 2.2rem;
    }

    #cennik h1::after {
        transform: scale(1.4);
    }

    #cennik #karnety ul.tickets-list li .time,
    #cennik #additional-options ul.tickets-list li .time {
        font-size: 0.9rem;
    }

    #calculator-title .title {
        font-size: 6.5dvw;
    }

    #calculator h2 {
        font-size: 1.6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
  .info-card, .info-card.is-in {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}