@import "../fonts/roboto/fonts.css";

:root {
  /* PURINA PRO PLAN */
  --black: #000;
  --white: #fff;
  --dark: #272727;
  --dark2: #1E1E1E;
  --dark3: #101010;
  --gold1: #A07C2D;
  --gold2: #F4D38A;
  --gold3: #FDDB94;
  --goldDark: #685B41;
  --orange: #FA9500;
  --orangeDark: #4F3300;
  --green: #638739;
  --green2: #456223;
  --green3: #84b948;
  --greenDark: #212F13;
  --red500: #FF0F0F;
  --red600: #E30613;
  --red700: #D0121A;
  --red800: #A20401;
  --grey100: #FFFFFF;
  --grey200: #FAFAFA;
  --grey300: #EEEEEE;
  --grey400: #dadada;
  --grey500: #888888;
  --grey600: #7A7A7A;
  --grey800: #232323;

  /* PURINA ONE */
  --grey1: #FEFEFE;
  --grey7: #6F7677;
  --grey8: #595856;

  --blue3: #52B7C7;
  --blue4: #3EA0B5;
  --blue5: #2989A3;
  --blue6: #15858F;
  --blue_shadow1: rgba(68, 184, 203, 0.4);
  --blue_gradient1: #18a3ba;
  --blue_gradient2: #08708e;

  --red5: #E51C28;
  --green5: #71984A;

  --pink4: #d70067;
  --pink_shadow1: rgba(215, 0, 103, 0.4);

  /* HOMEPAGE */
  --grey77: #616161;
}

html, body {
  font-family: Roboto, Verdana, sans-serif;
  font-size: 16px;
  background-color: var(--dark3);
  color: var(--white);
  margin: 0;
  position: relative;
}

p, h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.mainContainer {
  min-height: 100svh;
  max-width: 1900px;
  margin: 0 auto;

  display: flex;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.mainContainer.active {
  cursor: grabbing;
}

.part {
  position: relative;
  z-index: 2;
  /*flex: 0 0 min(calc(1900px / 3), calc(100svw / 3));*/
  flex: 1;
  overflow: hidden;

  scroll-snap-align: start;
}

@media (max-width: 1000px) {
  .part {
    flex: 0 0 50svw;
  }
}

@media (max-width: 768px) {
  .part {
    flex: 0 0 100svw;
  }
}

.part .partWrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.5rem 1.5rem 1.5rem;
}

@media (max-width: 900px) {
  .part .partWrapper {
    padding: 2rem 1rem;
  }
}

@media (max-width: 768px) {
  .partWrapper {
    width: 100% !important;
  }

  .part::after {
    display: none;
  }
}

@media (min-width: 768px) {
  .part.pro-dog .partWrapper {
    margin-left: auto;
  }
}

.part .bg {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: -1;
}

.part.pro-dog, .part.pro-cat {
  color: var(--white);
}

.part.one {
  color: var(--black);
}

.part.one {
  background: url("../../image/purinaHomepage/bg-one.png") no-repeat 70% center;
  background-size: cover;
}

.part.one .text {
  opacity: 0;
}

.top {
  display: flex;
  justify-content: center;
}

.top img {
  height: 7.5rem;
}

@media (max-width: 1450px) {
  .top img {
    height: 5rem;
  }
}

.bottom {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
}

.bottomTextBr {
  display: none;
}

@media (max-width: 1800px) {
  .bottomTextBr {
    display: inline;
  }
}

.bottom .button {
  margin: 0 auto;
  font-weight: 600;
}

.bottom b {
  font-weight: 700;
}

.bottom p {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.06rem;
}

@media (max-width: 1440px) {
  .bottom p {
    font-size: 1.2rem;
    letter-spacing: 0.048rem;
  }
}

.pro-dog .bottom b, .pro-cat .bottom b {
  color: var(--gold3);
}

@media (max-width: 1000px) and (min-width: 768px) {
  .one .bottom {
    /*padding-right: 3rem;*/
  }
}

.one .bottom b {
  color: var(--pink4);
}

.hr {
  background: linear-gradient(to right, var(--gold1), var(--gold2), var(--gold1));
  border: none;
  height: 2px;
  width: 100%;
  opacity: 1;
}

.button {
  position: relative;
  display: inline-block;
  text-align: center;
  line-height: normal;
  background: none;
  border: none;
  border-radius: 2em;
  font-weight: 500;
  padding: 1rem 3.5rem;
  font-size: 1rem;
  letter-spacing: 0.04rem;
  text-decoration: none;
  cursor: pointer;

  /*@media (max-width: 768px) {*/
  /*  padding: 0.5rem 1rem;*/
  /*}*/
}

.button.one {
  color: var(--white);
  background: var(--pink4);
  filter: drop-shadow(0px 10px 30px rgba(169, 0, 81, 0.30));
}

.button.pro {
  color: var(--black);
  background: linear-gradient(to bottom, var(--gold1), var(--gold2), var(--gold1));
}

.counterContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: 0.04rem;
  text-align: center;
  text-wrap: nowrap;
}

.counterContainer .text1 {
}

.counterContainer .text2 {
  font-weight: 700;
}

.counter {
  display: flex;
  align-self: stretch;
  justify-content: center;
}

.counter .item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.75em;
  line-height: 1;
}

@media (max-width: 900px) {
  .counter .item {
    font-size: 1.25em;
  }
}

.one .counter {
  background-color: var(--pink4);
  padding: 0.5rem 1rem;
  /*width: 100%;*/
  /*filter: drop-shadow(0px 10px 30px rgba(169, 0, 81, 0.40));*/
  border: 4px solid var(--white);
  border-radius: 4rem;
  gap: 0.1rem;
}

.one .counter .item {
  font-weight: 500;
  color: var(--white);
}

.pro .counter {
  gap: 0.25rem;
  border: 5px solid transparent;
}

.pro .counter .item {
  font-weight: 700;
  color: var(--black);
  padding: 0.41rem 0.66rem;
  /*padding: 0.235em 0.377em;*/
  border-radius: 0.125rem;
  background: linear-gradient(to bottom, var(--gold1), var(--gold2), var(--gold1));
}

@media (max-width: 900px) {
  .pro .counter .item {
    padding: 0.35rem 0.5rem;
  }
}

.pro .counter .item::before {
  content: '';
  position: absolute;
  top: calc(50%);
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--black);
  opacity: 0.08;
}

.pro .counter .item::after {
  content: '';
  position: absolute;
  top: calc(50% + 1px);
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--white);
  opacity: 0.08;
}

/* ONLY PRO */
section.title {
  margin: 2rem 0 0;
  text-align: center;
  font-size: clamp(1.5rem, 1.7vw, 2.3rem);
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.06rem;
}

@media (max-width: 900px) {
  section.title {
    font-size: 1.25rem;
  }
}

section.title .titleText1 {
  font-weight: 400;
  margin: 1rem 0 0.25rem;
}

section.title .titleText2 {
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

@media (max-width: 900px) {
  section.title {
    font-size: 1.25rem;
  }
}

.flagsContainer {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.flagsContainer > img {
  /*width: 100%;*/
  width: max(20%, 5.5rem);
  /*flex: 0 0 7.5rem;*/
}

/*@media (max-width: 768px) {*/
/*  grid-template-columns: repeat(2, minmax(0, 1fr));*/
/*}*/

.flagsContainer .flag {
  position: relative;
  clip-path: polygon(0% 0%, 0% calc(100% - 2.05rem), 100% 100%, 100% 0%, 0% 0%);
  padding-bottom: 2rem;
  background-color: var(--bgColor);
}

.flagsContainer .flag img {
  display: block;
  max-width: 80%;
  margin: 0 auto;
  aspect-ratio: 1/1;
}

.flagsContainer .flag.orange {
  --bgColor: var(--orange);
  --textColor: var(--orangeDark);
}

.flagsContainer .flag.green {
  --bgColor: var(--green);
  --textColor: var(--greenDark);
}

.flagsContainer .handle {
  position: relative;
  height: .3rem;
  background: linear-gradient(to right, var(--gold1), var(--gold2), var(--gold1), var(--gold2), var(--gold1));
}

.flagsContainer p {
  margin: 0;
  text-align: center;
  letter-spacing: 0.03em;
  font-weight: 600;
  line-height: 1;
  padding: 0 1rem;
}

.flagsContainer .text1 {
  font-size: .6rem;
  color: var(--textColor);
}

.flagsContainer .text2 {
  font-size: 0.9rem;
  color: var(--textColor);
}

.flagsContainer .text3 {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--white);
}

section.centerPhotos {
  display: flex;
  justify-content: space-between;
  align-items: end;
  position: relative;

  max-height: min(21rem, 33svh);
  margin-left: -1rem;
  z-index: -1;
}

section.centerPhotos.cat {
  margin-left: -2rem;
  margin-right: -1rem;
}

section.centerPhotos .dog-pack {
  max-height: calc(100% - 2rem);
  max-width: 52%;
}

section.centerPhotos .dog {
  max-height: 100%;
  max-width: 48%;
}

section.centerPhotos .cat-pack {
  max-height: 100%;
  max-width: 62%;
}

section.centerPhotos .cat {
  max-height: calc(100% + 4rem);
  max-width: 38%;
}

@media (max-width: 1450px) {
  section.centerPhotos .dog,
  section.centerPhotos .cat {
    display: none;
  }

  section.centerPhotos,
  section.centerPhotos.cat {
    justify-content: center;
    margin-left: 0;
    margin-right: 0;
  }

  section.centerPhotos .dog-pack,
  section.centerPhotos .cat-pack {
    max-height: min(100%, 300px);
  }

  section.centerPhotos .dog-pack {
    max-width: 100%;
  }

  section.centerPhotos .cat-pack {
    max-width: 110%;
  }
}

/* ONLY ONE */
.main {
  position: relative;
}

/*.main p {*/
/*  text-align: center;*/
/*  line-height: 1em;*/
/*}*/

/*@media (min-width: 768px) {*/
/*  .main .text {*/
/*    font-size: clamp(0.5rem, 1.6vw, 1rem);*/
/*  }*/
/*}*/

/*@media (max-width: 768px) {*/
/*  .main .text {*/
/*    font-size: clamp(0.5rem, 3.2vw, 1rem);*/
/*  }*/
/*}*/

/*@media (min-width: 1000px) {*/
/*  .main .text {*/
/*    font-size: clamp(1rem, 1vw, 1.5rem);*/
/*  }*/
/*}*/

/*.main .text1 {*/
/*  font-size: 1.75em;*/
/*  color: var(--black);*/
/*}*/

/*.main .text2 {*/
/*  font-size: 2.3em;*/
/*  color: var(--pink4);*/
/*  font-weight: 700;*/
/*}*/

/*.main .text3 {*/
/*  font-size: 2.3em;*/
/*  color: var(--pink4);*/
/*  font-weight: 700;*/
/*}*/

/*.main .text4 {*/
/*  font-size: 1.25em;*/
/*  color: var(--grey77);*/
/*  letter-spacing: 0.05em;*/
/*}*/

/*.main .text5 {*/
/*  font-size: 1.25em;*/
/*  color: var(--grey77);*/
/*  letter-spacing: 0.05em;*/
/*  font-weight: 700;*/
/*}*/

.main .center {
  position: relative;
  /*margin: 0 auto;*/
  /*aspect-ratio: 1/1;*/
  /*display: flex;*/
  /*flex-direction: column;*/
  /*justify-content: flex-end;*/
}

.main .packs {
  position: absolute;
  /*top: 65%;*/
  /*bottom: -5rem;*/
  top: 59%;
  left: 50%;
  transform: translateX(-55%);
  /*z-index: 2;*/
  width: 75%;
  /*aspect-ratio: 93/67;*/
  /*max-height: 20svh;*/
  /*max-width: 85%;*/
  /*max-height: 33svh;*/
  /*margin: 3svh auto -6svh;*/
  /*margin-top: 3rem;*/
  /*margin-bottom: -25%;*/
}

@media (max-width: 1450px) {
  .main .packs {
    /*bottom: -4rem;*/
    width: 85%;
    transform: translateX(-50%);
    /*margin-bottom: -8svh;*/
  }
}

@media (max-width: 1450px) {
  .main .packs {
    /*bottom: -4rem;*/
    /*width: 95%;*/
    transform: translateX(-50%);
    /*margin-bottom: -8svh;*/
  }
}

/*@media (min-height: 900px) {*/
/*  .main .packs {*/
/*    margin-top: 1rem;*/
/*    !*margin-bottom: -4rem;*!*/
/*    width: 50%;*/
/*    !*margin-bottom: -9vh;*!*/
/*  }*/
/*}*/

/*@media (max-width: 500px) {*/
/*  .main .packs {*/
/*    display: none;*/
/*  }*/
/*}*/

.part.one .main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: center;
  /*display: flex;*/
  /*flex-direction: column;*/
  /*align-items: center;*/
  position: relative;
  /*min-height: 500px;*/
  padding-top: 1rem;
  padding-bottom: 2rem;
}

@media (max-width: 1450px) {
  .part.one .main {
    padding-bottom: 1.5rem;
  }
}

@media (max-width: 768px) {
  .part.one .main {
    padding-bottom: 1rem;
  }
}

@media (max-width: 576px) and (min-height: 800px) {
  .part.one .main {
    padding-bottom: 2rem;
  }
}

.main .circleWrapper {
  /*position: absolute;*/
  /*top: 50%;*/
  /*left: 0;*/
  /*width: 100%;*/
  /*transform: translateY(-50%);*/
  /*max-height: 100%;*/
  /*padding-bottom: 6rem;*/


  /*aspect-ratio: 1090/533;*/
  /*margin-bottom: -7rem;*/
}

.main .circle {
  position: relative;
  left: 52%;
  height: auto;
  width: 240%;
  /*max-height: 70svh;*/
  aspect-ratio: 1090/533;
  transform: translateX(-50%);
  z-index: -1;
  background: url("../../image/purinaHomepage/circle-2.png") no-repeat center center;
  background-size: contain;
}

.main .circleContent {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 0px));
  width: 60%;
  z-index: 4;
}

.fullWidth {
    width: 100% !important;
}

@media (max-width: 576px) and (min-height: 800px) {
  .main .circleContent {
    transform: translate(-50%, calc(-50% - 1rem));
  }
}

/*@media(max-width: 1450px) {*/
/*    .main .circleContent {*/
/*        top: 38%;*/
/*    }*/
/*}*/

.main .cat {
  position: absolute;
  width: min(max(50%, 12rem), 17rem);
  right: -10%;
  bottom: -4rem;
  z-index: 3;
}

@media (max-width: 1450px) {
  .main .cat {
    display: none;
  }
}

@media (min-aspect-ratio: 1.9/1) {
  .main .circleWrapper {
    margin-bottom: -7rem;
  }

  .main .packs {
    width: 75% !important;
  }

  .circleContent {
    top: 35%;
  }

  .main .cat {
    width: min(max(45%, 12rem), 17rem) !important;
    right: -11%;
  }
}

@media (max-width: 1450px) and (min-aspect-ratio: 1.9/1) {
  .main .circle {
    width: 210%;
  }

  .main .circleWrapper {
    margin-top: -5rem;
  }

  .circleContent {
    top: 30% !important;
    /*width: 50% !important;*/
  }

  .main .packs {
    top: 64%;
    width: 70% !important;
  }

  .flagsContainer > img {
    width: max(18%, 5rem);
  }

  /* zmniejszanie spacingów żeby pro plany były niższe*/
  .part .partWrapper {
    padding-top: 1.5rem;
    padding-bottom: 1rem;
  }

  section.title {
    margin-top: 1.5rem;
  }

  section.title .titleText1 {
    margin-top: 0.75rem;
  }

  section.title .titleText2 {
    margin-bottom: 0.75rem;
  }

  section.centerPhotos {
    margin-bottom: -0.75rem;
  }
  .bottom {
    /*gap: 0.75rem;*/
  }
}

/*@media (min-width: 1600px) {*/
/*  .one .bottom .cat {*/
/*    width: 45%;*/
/*  }*/
/*}*/

/*@media (max-width: 768px) {*/
/*  .one .bottom .cat {*/
/*    right: -2rem;*/
/*    bottom: 100%;*/
/*    width: min(38%, 12rem);*/
/*  }*/
/*}*/

.prev, .next {
  position: absolute;
  top: 60%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
}

@media (min-width: 1000px) {
  .prev, .next {
    display: none;
  }
}

.prev img, .next img {
  transition: filter 0.3s ease;
  will-change: filter;
}

.prev img {
  rotate: 180deg;
}

.prev {
  left: 1rem;
}

.next {
  right: 1rem;
}