body {
  background-color: #1A0F16;
  color: white;
  font-family: 'Inter', sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
  padding: 50px;
}
.text-section {
  max-width: 40%;
}
.title {
  font-size: 3rem;
  font-weight: bold;
  padding: 10px 20px;
  display: inline-block;
  position: relative;
}
.badge {
  background: #5A47FF;
  color: white;
  font-size: 0.8rem;
  padding: 4px 8px;
  border-radius: 4px;
  position: absolute;
  top: -10px;
  right: -10px;
}
.subtitle {
  font-size: 1.2rem;
  margin: 20px 0;
}

.telefonik {
  position: relative;
  width: 40%;
  text-align: center;
}
.phone {
  width: 386px;
  position: relative;
  z-index: 2;
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(circle, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.glow {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.8;
}
.glow-orange {
  background: orange;
  top: 30%;
  left: 20%;
}
.glow-blue {
  background: cyan;
  bottom: 20%;
  right: 20%;
}

/* From Uiverse.io by gharsh11032000 */ 
.animated-button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 16px 36px;
    border: 4px solid;
    border-color: transparent;
    font-size: 20px;
    background-color: inherit;
    border-radius: 100px;
    font-weight: 600;
    color: greenyellow;
    box-shadow: 0 0 0 2px #ff007f;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    display: inline-block;
}
  
.animated-button svg {
  position: absolute;
  width: 24px;
  fill: #ff007f;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .arr-1 {
  right: 16px;
}

.animated-button .arr-2 {
  left: -25%;
}

.animated-button .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: #ff007f;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .text {
  position: relative;
  z-index: 1;
  transform: translateX(-12px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button:hover {
  box-shadow: 0 0 0 12px transparent;
  color: #212121;
  border-radius: 12px;
}

.animated-button:hover .arr-1 {
  right: -25%;
}

.animated-button:hover .arr-2 {
  left: 16px;
}

.animated-button:hover .text {
  transform: translateX(12px);
}

.animated-button:hover svg {
  fill: #212121;
}

.animated-button:active {
  scale: 0.95;
  box-shadow: 0 0 0 4px greenyellow;
}

.animated-button:hover .circle {
  width: 220px;
  height: 220px;
  opacity: 1;
}

.animated-button span {
  color: white;
}

.about-section {
  background: url('dumbbell-bg.jpg') no-repeat center center/cover;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  position: relative;
}

.about-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Ciemne przyciemnienie */
}

.about-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
}

.about-content h2 {
  font-size: 2rem;
  font-weight: bold;
  color: #ff007f; /* Różowy kolor */
}

.about-content h1 {
  font-size: 3rem;
  font-weight: bold;
  color: #ff007f;
  margin-bottom: 20px;
}

.about-content p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #fff;
}

.features-section {
  text-align: center;
  background-color: #2a1a1f; /* Ciemne tło */
  padding: 80px 20px;
  color: white;
}

.features-section h2 {
  font-size: 2.5rem;
  font-weight: bold;
  color: #ff007f; /* Różowy akcent */
  margin-bottom: 40px;
}

.features-container {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.feature {
  width: 300px;
  text-align: center;
}

.feature-icon {
  background-color: #ff007f; /* Różowe koło */
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px;
}

.feature-icon img {
  width: 60px;
  height: auto;
}

.feature-text {
  background-color: #3a2a2f;
  padding: 20px;
  border-radius: 10px;
  font-size: 1.1rem;
  line-height: 1.5;
  color: white;
}

.workouts-section {
  background: linear-gradient(120deg, #1a0d1a, #2a1a1f);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  color: white;
}

.workouts-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

.workouts-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
}

.workouts-content h1 {
  font-size: 3rem;
  font-weight: bold;
  color: #ff007f;
  margin-bottom: 20px;
}

.workouts-content p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #fff;
  margin-bottom: 30px;
}

.workouts-button {
  background-color: #ff007f;
  color: white;
  padding: 15px 30px;
  border: none;
  border-radius: 50px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.workouts-button:hover {
  background-color: #e6006f;
}

.wellness-tips {
  background-color: #000;
  padding: 60px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wellness-container {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 1200px;
  background-color: white;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.wellness-image img {
  width: 100%;
  max-width: 500px;
  height: auto;
  object-fit: cover;
  clip-path: polygon(0 0, 85% 0, 100% 20%, 100% 100%, 0% 100%);
}

.wellness-content {
  padding: 40px;
  text-align: center;
  max-width: 500px;
}

.wellness-content h2 {
  color: #ff007f;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 20px;
}

.wellness-content p {
  font-size: 1rem;
  color: #333;
  line-height: 1.6;
  margin-bottom: 30px;
}

.learn-more {
  background-color: #ff007f;
  color: white;
  padding: 15px 40px;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.learn-more:hover {
  background-color: #e6006f;
}

.reviews {
  background-color: #1a0d1a; /* Ciemne tło pasujące do stylu */
  padding: 60px 20px;
  text-align: center;
  color: #fff;
}

.reviews h2 {
  color: #ff007f;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 40px;
}

.reviews-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.review-card {
  background-color: transparent;
  border: 2px solid #ff007f;
  border-radius: 20px;
  padding: 20px;
  max-width: 300px;
  color: #fff;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(255, 0, 127, 0.5);
}

.review-card p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 15px;
}

.review-card strong {
  color: #ff007f;
  font-weight: bold;
  font-size: 1.1rem;
}

.contact-us {
  background: radial-gradient(circle at right, rgba(255, 0, 127, 0.5), transparent),
              radial-gradient(circle at bottom right, rgba(128, 0, 128, 0.6), transparent);
  background-color: #120012; /* Ciemne tło pasujące do stylu */
  padding: 60px 20px;
  color: #fff;
  text-align: left;
  position: relative;
}

.contact-us h2 {
  color: #ff007f;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 30px;
}

.contact-info p {
  font-size: 1.1rem;
  margin: 15px 0;
}

.contact-info strong {
  color: #ff007f;
  font-weight: bold;
  margin-right: 10px;
}

.contact-info a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-info a:hover {
  color: #ff007f;
}

.social-icons a {
  margin: 0 10px;
  color: #ff007f;
  font-size: 1.5rem;
  transition: transform 0.3s ease, color 0.3s ease;
}

.social-icons a:hover {
  transform: scale(1.2);
  color: #fff;
}

/* Responsywne style dla urządzeń mobilnych */
* {
    box-sizing: border-box;
}

/* Podstawowe style responsywne */
.fomo-alert {
    background-color: #ffe9e9;
    border-left: 4px solid #ff5757;
    padding: 10px 15px;
    margin: 15px 0;
    border-radius: 4px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    color: #333333;
}

.fomo-alert i {
    color: #ff5757;
    margin-right: 10px;
    font-size: 1.2rem;
}

/* Style dla odliczania FOMO */
.countdown-alert {
    background-color: #ffeecc;
    border-left: 4px solid #ff9900;
    animation: pulse-border 2s infinite;
}

@keyframes pulse-border {
    0% {
        border-left: 4px solid #ff9900;
    }
    50% {
        border-left: 4px solid #ff5500;
    }
    100% {
        border-left: 4px solid #ff9900;
    }
}

#countdown-timer {
    font-weight: bold;
    color: #ff5500;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.live-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px 0;
    font-size: 0.9rem;
    color: #333333;
}

.live-counter .dot {
    width: 10px;
    height: 10px;
    background-color: #4CAF50;
    border-radius: 50%;
    margin-right: 8px;
    position: relative;
}

.live-counter .dot:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #4CAF50;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

.social-proof {
    display: none; /* Ukrycie wszystkich elementów social proof typu "ktoś kupił" */
}

.social-proof img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 15px;
}

.social-proof-content p {
    margin: 0;
    font-size: 0.9rem;
    color: #333333;
}

.social-proof-content .name {
    font-weight: bold;
    color: #222222;
}

.social-proof-content .action {
    color: #444444;
}

.trust-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin: 20px 0;
}

.trust-badge {
    display: flex;
    align-items: center;
    background-color: #f1f8ff;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #333333;
}

.trust-badge i {
    margin-right: 8px;
    color: #0066cc;
}

.animated-button {
    margin-top: 15px;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideDown {
  0% { transform: translateY(-50px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.animate-visible {
  animation: fadeUp 1s ease-out forwards;
  opacity: 1;
  transform: translateY(0);
}

/* Domyślne ustawienie, zanim element stanie się widoczny */
.container, .about-section, .features-container, .workouts-content, .reviews-container, .wellness-tips, .contact-info {
  opacity: 0;
  transform: translateY(50px);
}

/* Responsywność na urządzeniach mobilnych */
@media (max-width: 1024px) {
  .container {
    flex-direction: column;
    padding: 20px;
    height: auto;
    gap: 20px;
  }

  .text-section {
    max-width: 90%;
  }

  .telefonik {
    width: 80%;
  }

  .title {
    font-size: 2.5rem;
  }

  .subtitle {
    font-size: 1rem;
  }

  .animated-button {
    padding: 12px 24px;
    font-size: 18px;
  }

  .about-content h1 {
    font-size: 2.5rem;
  }

  .features-container {
    flex-direction: column;
    gap: 20px;
  }

  .feature {
    width: 90%;
  }

  .wellness-container {
    flex-direction: column;
    gap: 20px;
  }

  .wellness-content, .wellness-image img {
    max-width: 100%;
    clip-path: none;
  }

  .workouts-content h1 {
    font-size: 2rem;
  }

  .reviews-container {
    flex-direction: column;
    gap: 20px;
  }

  .review-card {
    max-width: 90%;
  }

  .contact-us {
    text-align: center;
  }

  .contact-info p, .contact-info a {
    font-size: 1rem;
  }

  .social-icons a {
    font-size: 1.2rem;
  }

  .phone {
    width: 286px;
  }
}

/* Dostosowanie dla bardzo małych ekranów (smartfony) */
@media (max-width: 480px) {
  .title {
    font-size: 2rem;
  }

  .subtitle {
    font-size: 0.9rem;
  }

  .animated-button {
    padding: 10px 20px;
    font-size: 16px;
  }

  .about-content h1, .workouts-content h1 {
    font-size: 2rem;
  }

  .about-content p, .workouts-content p {
    font-size: 1rem;
  }

  .learn-more, .workouts-button {
    padding: 10px 20px;
    font-size: 0.9rem;
  }

  .phone {
    width: 186px;
  }  
}

/* Dodane style poprawiające responsywność przycisków na urządzeniach mobilnych */
@media screen and (max-width: 768px) {
    /* Zwiększamy szerokość przycisku */
    .animated-button {
        min-width: 80%;
        position: relative;
        padding: 12px 34px;
    }
    
    /* Zmniejszamy rozmiar strzałek */
    .animated-button .arr-1,
    .animated-button .arr-2 {
        width: 16px;
        height: 16px;
    }
    
    /* Zwiększamy odstęp między tekstem a strzałkami */
    .animated-button .arr-1 {
        left: 10px;
    }
    
    .animated-button .arr-2 {
        right: 10px;
    }
    
    /* Poprawiona pozycja tekstu */
    .animated-button .text {
        width: calc(100% - 60px);
        text-align: center;
        margin: 0 auto;
        font-size: 0.9rem;
    }
    
    /* Poprawki dla elementów z animowanym kółkiem */
    .animated-button .circle {
        width: 30px;
        height: 30px;
    }
    
    /* Poprawki dla elementów FOMO i innych alertów */
    .fomo-alert {
        font-size: 0.8rem;
        padding: 8px 10px;
    }
    
    /* Poprawka dla live counter */
    .live-counter {
        font-size: 0.8rem;
    }
    
    /* Poprawka dla ogólnych elementów strony, aby były bardziej czytelne na mobilnych */
    .title {
        font-size: 1.6rem;
        padding: 0 10px;
    }
    
    .subtitle {
        font-size: 0.9rem;
        padding: 0 15px;
    }
    
    /* Poprawka dla sekcji kontaktowej */
    .contact-info {
        padding: 0 15px;
    }
    
    /* Poprawka dla recenzji */
    .review-card {
        padding: 15px;
        margin: 10px 5px;
    }
    
    /* Poprawka dla sekcji features */
    .features-container {
        flex-direction: column;
    }
    
    .feature {
        width: 90%;
        margin: 10px auto;
    }
}

/* Dodatkowe poprawki dla bardzo małych ekranów */
@media screen and (max-width: 375px) {
    .animated-button {
        padding: 10px 30px;
    }
    
    .animated-button .text {
        font-size: 0.8rem;
    }
    
    .fomo-alert {
        font-size: 0.7rem;
    }
}