@font-face {
  font-family: 'Gliker';
  src: local('Gliker Regular'), local('Gliker-Regular'),
      url('fonts/Gliker-Regular.woff2') format('woff2'),
      url('fonts/Gliker-Regular.woff') format('woff'),
      url('fonts/Gliker-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

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

:root {
  --gradient: linear-gradient(122.02deg, #FFF6C7 -3.81%, #FE9D99 97.51%);
  --beige: #FFE9CF;
  --orange: #FC5000;
  --black-main: #191719;
  --black-600: #383138;
  --pearl-white: #FFF9ED;

  --pink: #FEB7A7;
  --yellow: #F3EAA2;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--beige);
  font-family: "chainprinter", sans-serif;
  color: var(--black-main);
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
}

.bg-orange {
  background: var(--orange);
}

.bg-black-main {
  background: var(--black-main);
}

.text-orange {
  color: var(--orange);
}

.text-black-main {
  color: var(--black-main);
}

.text-yellow {
  color: var(--yellow);
}

.text-pink {
  color: var(--pink);
}

/* ==== FONTS ========== */
.font-chainprinter { 
  font-family: "chainprinter",sans-serif;
  font-weight: 400;
  font-style: normal;
}

.font-brother-light { 
  font-family: "brother-1816",sans-serif; 
  font-weight: 200;
  font-style: normal;
}

.font-brother-bold { 
  font-family: "brother-1816",sans-serif; 
  font-weight: 700;
  font-style: normal;
}

.font-contempora { 
  font-family: "contempora-sans-condensed",sans-serif; 
  font-weight: 400;
  font-style: normal;
}

.font-gliker {
  font-family: "Gliker",sans-serif; 
  font-weight: 400;
  font-style: normal;
}


/* ========= COMPONENTS ============= */
.cta {
  background-color: var(--orange);
  color: #FFF;
  text-transform: uppercase;
  font-size: 25px;
  text-decoration: none;
  padding: 10px 86px;
  border: 2px solid var(--black-main);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  display: block;
  width: fit-content;
  user-select: none;
}

.cta span {
  display: block;
  line-height: 20px;
}

.cta:before {
  content: '';
  width: 100%;
  height: 100%;
  background: black;
  top: 4px;
  left: 4px;
  position: absolute;
  z-index: -1;
  border-radius: 4px;
  transition: .2s ease-out;
}


.cta:hover:before {
  top: 0;
  left: 0;
}

.scroll-top-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background-color: var(--orange);
  border: 1px solid var(--black-main);
  color: white;
  font-size: 14px;
  line-height: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}


.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #FFFFFF50;
  border-top: 2px solid var(--black-main);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  position: absolute;
  top: 2px;
  right: -26px;
  transform: translate(-50%, -50%);
  z-index: 2;
/* Początkowo niewidoczny */
}

.cta span {
  transform: translateX(0px);
  transition: .1s ease;
}
.cta.disabled span{
  transform: translateX(-16px);
  transition: .1s ease;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ======== PAGE SECTIONS START =================================================================================== */
/* ======== PAGE SECTIONS START =============================================================== */
/* ======== PAGE SECTIONS START ============================================== */
/* ======== PAGE SECTIONS START ================================== */

/* ==================== SCROLL BAR INFINITY ===================== */
.small-top-bar {
  width: 100%;
  background: var(--gradient);
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  font-size: 16px;
  display: flex;
  align-items: center;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.scrolling-text {
  display: flex;
  overflow: hidden;
  position: relative;
}

.scrolling-text-inner {
  display: flex;
  white-space: nowrap;
  animation: scroll-left linear infinite;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.scrolling-text-inner span {
  display: inline-block;
  padding: 0 1rem;
  color: black;
  font-family: "chainprinter", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 56px;
}

/* ==================== SCROLL BAR INFINITY ===================== */


/* ========== HERO SECTION ===================== */

section.hero {
  padding: 67px 0 118px;
  overflow: hidden;
}
  .hero img.hero-bg {
    position: absolute;
    left: 0px;
    right: 0px;
    max-width: initial;
    bottom: 0px;
    z-index: -2;
    width: 100%;
}

.hero img.hero-mobile-bg {
    position: absolute;
    left: -5px;
    max-width: initial;
    bottom: 0px;
    z-index: -2;
    width: calc(100vw + 10px);
}

.hero img.hero-top-mobile-bg {
  position: absolute;
  left: -10px;
  max-width: initial;
  top: 50px;
  z-index: -2;
  width: calc(100vw + 20px);
}


.hero h1 {
  font-size: 177px;
  display: flex;
  flex-direction: column;
  color: var(--black-600);
}

.hero h1 span {
  line-height: 137px;
}

.hero h1 ~ p {
  font-size: 25px;
  margin-top: 21px;
  margin-bottom: 42px;
}


.hero .bottle-container img {
  max-height: 608px;
  animation: img-animation 5s ease-in-out infinite;
}

@keyframes img-animation {
  0% {
    transform: rotate(5.1deg) translateY(0);
  }
  50% {
    transform: rotate(5.1deg) translateY(50px);
  }
  100% {
    transform: rotate(5.1deg) translateY(0);
  }
}


.bottle-container {
  background: url(/img/bg-butelka.svg) white;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: -30px 100px;
  border: 1px solid var(--black-main);
  border-radius: 400px 40px 8px 8px;
  position: relative;
  max-width: 500px;
  margin-left: auto;
}

.bottle-container::after {
  content: '';
  width: 100%;
  height: 100%;
  background: black;
  top: 8px;
  left: 8px;
  position: absolute;
  border-radius: 400px 40px 8px 8px;
  z-index: -1;
}


.bottle-info .col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 21px 0;
  border-top: 3px solid var(--black-main);
}

.bottle-info .col:nth-of-type(2) {
  border-left: 3px solid var(--black-main);
  border-right: 3px solid var(--black-main);
}


.bottle-info .col .name,
.bottle-info .col .suffix{
  font-size: 16px;
}


.bottle-info .col .value  {
  font-size: 25px;
}


.hero img.grass {
  position: absolute;
  left: 0;
  right: 0;
  max-width: initial;
  bottom: -150px;
  z-index: -2;
  width: 100%;
}



.hero .cheers-animation {
  position: absolute;
  bottom: -30px;
  left: 16vw;
}

.hero .bubbles {
  position: absolute;
  left: 90px;
  top: -5px;
}


.hero .bubbles.animate {
  animation: bubbles-animation 1s ease-in-out;
}
@keyframes bubbles-animation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.hero .bottle-left.animate {
  animation: bottle-left-animation 1s ease-in-out;
}
@keyframes bottle-left-animation {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(10px, -10px) rotate(-5deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

.hero .bottle-right.animate {
  animation: bottle-right-animation 1s ease-in-out;
}
@keyframes bottle-right-animation {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(-10px, -10px) rotate(5deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

.hero a.cta.disabled {
  pointer-events: none;
  cursor: not-allowed;
}

/* ========== TABS SECTIONS ===================== */

section.tabs {
background-color: var(--pearl-white);
padding: 60px 0;
z-index: 0;
overflow: hidden;
}


.tab-buttons {
  margin: 0 auto 60px;
  border: 2px solid var(--black-main);
  width: fit-content;
  border-radius: 60px;
}


.tab-buttons .tab-button {
  font-size: 25px;
  cursor: pointer;
  padding: 25px 43px;
  border-radius: 50px;
  border: 2px solid transparent;
}

/* JS */
.tab-buttons {
  position: relative;
  display: flex;
  gap: 10px;
}

.tab-highlight {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 60px;
  background: var(--gradient);
  border: 2px solid var(--black-main);
  z-index: 0;
  transition: all 1s ease-in-out;
  pointer-events: none;
}

.tab-button {
  position: relative;
  padding: 10px 20px;
  cursor: pointer;
  z-index: 1;
  border: 2px solid transparent;
  border-radius: 8px;
  user-select: none;
  
}
/* JS */

.tabs-content-wrapper {
  position: relative;
  transition: height 1s ease;
}
.content-section {
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.content-section.active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}

.list h2,
.tabs #tab1.content-section h2,
.tabs #tab2.content-section h2 {
  font-size: 42px;
  line-height: 40px;
  margin-bottom: 20px;
  color: var(--black-main);
}


.tabs .content-section p {
  letter-spacing: -0.32px;
  line-height: 130%;
  margin-bottom: 30px;
}

.tabs .content-section p:last-of-type {
  margin-bottom: 20px;
}


.tabs img.orange-flame {
  position: absolute;
  z-index: -1;
  top: 140px;
  left: 50px;
}

.gallery-stack {
  position: relative;
  width: 80%;
  height: auto;
  cursor: pointer;
  min-height: 450px;
  margin-left: 20px;
}

.gallery-img {
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s ease, z-index 0s;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  width: 100%;
  z-index: 1;
  border: 2px solid var(--black-main);
}

.gallery-img:nth-child(2) {
  transform: translate(20px, 20px);
  z-index: 0;
}
.gallery-img:nth-child(3) {
  transform: translate(40px, 40px);
  z-index: 0;
}

.gallery-img.active {
  z-index: 2;
  transform: translate(0, 0);
}


.gallery-divider {
  border: 3px solid var(--black-main);
  border-radius: 10px;
  width: fit-content;
}

.gallery-divider img.tab-2-divider-bottle {
  position: absolute;
  left: 110px;
  bottom: -4px;
  animation: divider-animation 5s ease-in-out infinite;
}

@keyframes divider-animation {
  0% {
    transform: rotate(21deg) translateY(10px);
  }
  50% {
    transform: rotate(0) translateY(0);
  }
  100% {
    transform: rotate(21deg) translateY(10px);
  }
}


/* .gallery-divider img.tab-2-divider-bottle {
  bottom: -10px;
  transform: rotate(21deg);
} */


#tab3.active {
  padding-bottom: 360px;
}


#tab3 h2 {
  font-size: 68px;
  text-align: center;
  margin-bottom: 0;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
  letter-spacing: 11px;
  line-height: 93px;
}

#tab3 h2.desktop-duplicate {
  position: absolute !important;
  left: 47px;
  top: 3px;
  z-index: -1;
  color: black !important;
}

#tab3 h2.desktop-duplicate span {
  color: black;
}


#tab3 img.smile {
  position: absolute;
  right: -20px;
  bottom: -10px;
  max-width: initial;
  z-index: -2;
}

section.tabs.tab3-active {
  background: url(img/tab-3-bg.webp) var(--pearl-white);
  background-size: cover;
  background-repeat: no-repeat;
}


.shelters {
  display: flex;
  gap: 48px;
  max-width: 1100px;
  margin: 60px auto 0;
}

.cta.shelter-cta {
  font-size: 18px;
  padding: 26px 34px;
  background-color: var(--beige);
  color: var(--black-main);
  letter-spacing: 2px;
  line-height: 15px;
  border-width: 2px;
}

.shelter-cta img {
  height: 20px;
  margin-right: 8px;
  padding-bottom: 3px;
}

/* ================== LIST SECTION ========================== */

.list .img-container {
  border-right: 10px solid var(--orange);
  border-bottom: 10px solid var(--orange);
  max-height: fit-content;
}

.list .img-container div {
  position: absolute;
  top: 87px;
  left: 0;
  right: 0;
}

.list .img-container p {
  margin-bottom: 34px;
  margin-top: 80px;
}


.list .img-container .first-part-title, .list .img-container .second-part-title {
  font-size: 92px;
  line-height: 82px;
  margin: 0;
}

.list .img-container .title-description {
  font-weight: 500;
  margin: 0;
}


.list .img-container p.second-part-title {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
}

.list .img-container p.title-description {
  position: absolute;
  left: 0;
  right: 0;
  top: 165px;
  z-index: 2;
}


section.list ul {
  margin-top: 116px;
  margin-left: 49px;
  max-width: calc(100% - 108px);
}

section.list ul li {
  line-height: 1.2;
  padding: 14px 0;
  border-bottom: 1px solid black;
}

section.list ul li:last-of-type {
  padding-bottom: 0px;
  border-bottom: none;
}

section.list ul li strong {
  font-weight: 400;
  color: var(--orange);
}


section.list .cta {
  margin-left: 49px;
  margin-top: 30px;
}


section.list span.pill {
  position: absolute;
  left: 230px;
  bottom: -18px;
  background: var(--black-main);
  color: #FFE9CF;
  font-size: 12px;
  letter-spacing: 2.16px;
  display: block;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  transform: rotate(6.22deg);
}


section.list .orange-flames {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -2;
}


.list .img-container img {
  max-height: 608px;
  animation: img-animation-list 3s ease-in-out infinite;
}
@keyframes img-animation-list {
  0% {
    transform: rotate(5.1deg) translateY(70px);
  }
  50% {
    transform: rotate(5.1deg) translateY(50px);
  }
  100% {
    transform: rotate(5.1deg) translateY(70px);
  }
}

@media(max-width: 1399px) {
  .gallery-stack {
    min-height: 380px;
  }
  #tab3 h2.desktop-duplicate {
    left: 6px;
  }
}



@media (max-width: 1200px) {
  /* section hero */
  section.hero {
    padding: 60px 0 240px;
  }
  .hero h1 {
    font-size: 120px;
  }
  .hero h1 span {
    line-height: 110px;
  }

  .hero h1 ~ p {
    font-size: 20px;
  }
  .bottle-container {
    background-position: 0 100px;
  }
  .hero .bottle-container img {
    max-height: 400px;
  }
  /* section tabs */
  .tab-buttons .tab-button {
    font-size: 20px;
  }
  .cta.shelter-cta {
    padding: 26px 18px;
    font-size: 16px;
  }

  .gallery-stack {
    min-height: 320px;
  }

  section.tabs.tab3-active {
    background-position: center;
  }
  /* section list */
}





@media (max-width: 1024px){
  p {
    font-size: 14px;
  }
  .scrolling-text-inner {
    font-size: 14px;
  }

  .scrolling-text-inner span {
    line-height: 50px;
  }
    /* section hero */
    /* section tabs */
    .tab-buttons .tab-button {
      font-size: 18px;
      padding: 20px 30px;
    }
    .gallery-stack {
      min-height: 320px;
    }
    /* section list */
    section.list ul li {
      font-size: 14px;
      line-height: 16px;
    }
    section.list span.pill {
      left: 220px;
      bottom: -22px;
  }
}


@media (max-width: 991px) {
  .shelters {
    flex-direction: column;
  }
  .cta.shelter-cta {
    padding: 26px 34px;
    font-size: 18px;
  }

  .gallery-stack {
    min-height: 250px;
  }
}




@media(max-width: 767px) {
  /* globals */
  /* scrollbar */
  /* section hero */
  section.hero {
    padding-top: 20px;
    padding-left: 8px;
    padding-right: 8px;
}

  .hero > .container > .row {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

.bottle-container {
  border-radius: 400px 400px 8px 8px;
  margin-left: 0px;
}
.bottle-container::after {
  border-radius: 400px 400px 8px 8px;
}

.hero .bottle-container img {
  max-height: 450px;
}

.hero h1 {
  font-size: 128px;
}

.hero h1 span {
  line-height: 100px;
  text-align: left;
}

.hero h1 ~ p {
  text-align: left;
}
  /* section tabs */
  section.tabs {
    padding-top: 30px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .bottle-badge {
    position: absolute;
    left: 10px;
    bottom: 120px;
  }

  .tab-buttons {
    margin-bottom: 20px;
  }
  .tab-buttons .tab-button {
    padding: 11px 18px;
    font-size: 10px;
  }

  #tab1 img {
    margin-bottom: 40px;
  }

  .tab-1-bottle {
    position: absolute;
    right: -20px;
    width: 140px;
    display: none;
  }

  body:has(#tab1.active) .tab-1-bottle {
    display: block;
  }

  .tabs img.orange-flame {
    left: -30px;
    top: 0px;
  }

  .gallery-stack {
    min-height: 380px;
    margin-left: 0px;
    width: 80%;
    margin: 10px auto 0;
}

  #tab3.active {
    padding-bottom: 60px;
  }

  .tabs #tab1.content-section h2, .tabs #tab2.content-section h2 {
    line-height: 50px;
  }

  #tab3 h2 {
    text-align: left;
    font-size: 34px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    line-height: 46px;
    letter-spacing: 6px;
  }

  #tab3 h2.mobile-duplicate {
    position: absolute !important;
    left: 2px;
    top: 2px;
    z-index: -1;
    color: black !important;
  }
  
  #tab3 h2.mobile-duplicate span {
    color: black;
  }

  #tab3 img.smile {
    right: 40px;
    bottom: -15px;
    width: 40px;
}

  .shelter-cta span {
    font-size: 16px;
  }

  .cta.shelter-cta {
    padding: 18px 12px;
  }
  /* section list */
  section.list .row {
    display: flex;
    flex-direction: column-reverse;
}

.list h2 {
  margin-top: 60px;
  margin-left: 20px;
}
section.list ul {
  margin-top: 20px;
  margin-bottom: 46px;
  margin-left: 20px;
  max-width: calc(100% - 40px);
}

section.list .cta {
  margin: 0 auto;
  margin-bottom: 60px;
}

.list .img-container {
  border-right: none;
  border-bottom: none;
}

section.list .orange-flames {
  display: none;
}

.list .img-container div {
  top: 52px;
}


.list .img-container .first-part-title, .list .img-container .second-part-title {
  font-size: 55px;
  line-height: 48px;
}

.list .img-container p.title-description {
  top: 100px;
  font-size: 11px;
}

.list .img-container {
  box-shadow: 0px 8px 16px 0px #00000040;

}

.list .img-container img {
  max-height: 368px;
}

.list .img-container p {
  font-size: 10px;
  margin-bottom: 20px;
}

.footer-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 37px 0 57px;
}

.footer-bg {
  position: absolute;
  left: 0;
  bottom: 0px;
  z-index: -1;
  right: 0;
  max-height: 700px;
  max-width: 100%;
}
}




@media (max-width: 567px){

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

  .bottle-container {
    margin-left: 20px;
    margin-right: 24px;
    max-width: 90%;
    background-position: 0px;
  }

  .hero .bottle-container img {
    max-height: 380px;
  }


  .hero h1 ~ p {
    font-size: 18px;
    margin-bottom: 30px;
  }


  img.bottle-left, img.bottle-right {
    height: 100px;
}

.hero .bubbles {
  position: absolute;
  left: 55px;
  top: -15px;
}

.hero .cheers-animation {
  position: absolute;
  bottom: -20px;
  left: 10vw;
}


  .tabs .content-section p {
    margin-bottom: 20px;
  }


  .tab-buttons {
    border-width: 1px;
  }

  .tab-buttons .tab-button {
    border-width: 1px;
    text-align: center;
    line-height: 8px;
    font-size: 10px;
    padding: 10px 8px;
  }

  .tab-highlight {
    border-width: 1px;
  }

  .tab-1-bottle {
    right: -15px;
    width: 120px;
}

  .gallery-stack {
    min-height: 320px;
}

  .gallery-stack img {
    max-width: 85%;
}

.shelters {
  gap: 33px;
}

.shelter-cta span {
  font-size: 15px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
}

.gallery-divider img.tab-2-divider-bottle {
    left: 100px;
    bottom: -5px;
    width: 35px;
    animation: divider-animation 8s ease-in-out infinite;
}

.gallery-divider {
  border: 2px solid var(--black-main);
  border-radius: 10px;
  width: 100%;
}

}

@media (max-width: 520px) {
  .gallery-stack {
    min-height: 300px;
  }
}

@media (max-width: 490px) {
  .gallery-stack {
    min-height: 280px;
  }
}


@media (max-width: 480px){

  .gallery-stack {
    min-height: 330px;
    width: 100%;
}
}

@media (max-width: 440px){

  .gallery-stack {
    min-height: 300px;
}

.tab-1-bottle {
  width: 100px;
}
}

@media (max-width: 400px){

  .gallery-stack {
    min-height: 270px;
}
}

@media (max-width: 380px){

  .gallery-stack {
    min-height: 250px;
}

.tab-1-bottle {
  width: 80px;
}
}


/* POPUP */
#popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  color: var(--black-main);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#popup-content {
  background: var(--beige);
  padding: 40px 80px;
  border-radius: 10px;
  text-align: center;
}

p#popup-text {
  font-size: 20px;
}

div#popup-buttons {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}

div#popup-buttons .cta {
  font-size: 25px;
  padding: 8px 60px 5px;
  line-height: 1;
}
div#popup-buttons .cta.secondary {
  background: transparent;
  color: var(--black-main);
}


@media(max-width: 567px) {
  #popup-content {
    border-radius: 6px;
    width: 90%;
    padding: 40px 0;
}

  p#popup-text {
    font-size: 18px;
  }

  div#popup-buttons {
    gap: 15px;
    margin-top: 20px;
}
 
 
  div#popup-buttons .cta {
    font-size: 20px;
    padding: 10px 60px;
    line-height: 1;
}
}