:html {
  scroll-behavior: smooth;
}

:root {
  --pSize: 1.5rem;
  --h1Size: 2rem;
  --h2Size: 3rem;
  --h3Size: 1.5rem;
  --btnFntSize: 1rem;
  --font-color: #faebd7;
}

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

body {
  overflow-x: hidden;
}

#phoneDes {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  color: var(--font-color);
  place-items: center;
}
#infoText h2#title {
  font-size: var(--h2Size) !important;
}

#infoText h3#heading {
  font-size: var(--h3Size) !important;
}

#info p#para {
  font-size: 1rem;
  width: 90%;
  margin: 1rem 0;
  color: rgb(175, 175, 175);
}
#info {
  padding-left: 8vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#heading {
  width: 90%;
}

.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.fade-in {
  opacity: 1;
  transition: opacity 0.3s ease-in;
}

#info h3:first-of-type {
  margin-top: 2rem;
}

#info h3:last-of-type {
  margin: 1rem 0;
}

#infoText {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: 16rem;
}

#infoText #title,
#infoText #heading {
  color: #faebd7;
}
#buttons {
  color: #faebd7;
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 auto;
  gap: 0.1rem;
}

#info button.calculator {
  width: 99.5%;
  background-color: #26bdeb;
  border: none;
}

#info button.calculator:hover {
  outline: 1px solid #26bdeb;
  background-color: transparent;
}

.calculator a {
  color: #faebd7 !important;
}

#buttons button:hover {
  background-color: #26bdeb;
}

#buttons button:active {
  background-color: #26bdcb;
}

#buttons button:focus {
  outline: 1px solid white;
}

#buttons button {
  flex: 1;
}

#blue,
#purple {
  flex-basis: 100%;
}

#info button {
  display: inline-block;
  padding: 10px 28px;
  font-size: var(--btnFntSize);
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 3px;
  background-color: transparent;

  #info #infoText #heading {
    margin-top: 1rem;
  }

  color: white;
  border: 1px solid gray;
  cursor: pointer;
  margin: 0.1rem;
}

#image img {
  max-height: 30vh;
}

.swiper-container {
  width: 100vw;
  height: inherit;
}

.swiper-wrapper {
  width: 100%;
  height: 100%;
}

.products-container {
  height: inherit;
  padding-left: 4vw;
  overflow: hidden;
  width: 100%;
}

#image .swiper-wrapper .swiper-slide {
  display: flex;
  transition: transform 0.3s ease;
}

.swiper-slide-active {
  margin-top: 10vh;
  scale: 1.5;
  left: 30vw;
  top: -5vh;
  animation-duration: 1s;
  transform: translateX(0);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: forwards;
}

.swiper-slide-next,
.swiper-slide-prev {
  scale: 0.4;
  transform: translateX(100);
  filter: blur(9px);
}

.swiper-slide-prev.swiper-slide-active {
  transform: translateX(0);
}

.animated-slide {
  animation: slideAnimation 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.animated-slide-back {
  #info p {
    margin: 0;
    margin-top: 1rem;
    margin-top: 10vh;
  }

  animation: slideAnimationBack 1s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideAnimation {
  from {
    transform: translate(-16%, 69%) scale(0.3);
  }

  to {
    transfor1rem: translate(0) scale(1);
  }
}

@keyframes slideAnimationBack {
  from {
    transform: translate(-16%, -69%) scale(0.3);
  }

  to {
    transform: translate(0) scale(1);
  }
}

@media (max-width: 768px) {
  :root {
    --h2Size: 2rem !important;
    --h3Size: 1.3rem !important;
    --pSize: 0.8rem !important;
    --btnFntSize: 0.9rem !important;
  }

  .swiper-slide-next,
  .swiper-slide-prev {
    visibility: hidden;
  }

  .products-container {
    padding-left: 0vw;
  }

  #info p {
    max-width: 100%;
  }

  #info h3,
  #info p,
  #info div {
    z-index: 999999;
    margin: 0;
  }

  #info {
    align-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 700px) {
  :root {
    --pSize: 0.8rem;
    --h2Size: 2rem;
    --h3Size: 1.3rem;
    --btnFontSize: 0.5rem;
  }
}

@media (max-width: 600px) {
  @keyframes slideAnimation {
    from {
      transform: scale(0.3);
    }

    to {
      transform: scale(1);
    }
  }

  @keyframes slideAnimationBack {
    from {
      transform: scale(0.3);
    }

    to {
      transform: scale(1);
    }
  }

  #phoneDes {
    display: flex;
    flex-direction: column-reverse;
    height: 130vh;
  }

  :root {
    --h1Size: 1.5rem;
    --h2Size: 2rem;
    --h3Size: 1.3rem;
    --btnFontSize: 0.9rem;
  }

  #info {
    padding: 0 1rem;
    margin: 1rem 0 2rem;
    align-items: center;
  }

  #infoText {
    min-height: 20vh;
  }

  #infoText,
  #buttons {
    width: 90%;
  }

  #info button.calculator {
    width: 90%;
  }

  #info #infoText h2,
  #info #infoText h3 {
    width: 100%;
  }

  #info p {
    margin: 0;
    margin-top: 1rem;
  }

  #phoneDes #info #buttons {
    height: auto;
  }

  .swiper-slide {
    margin-top: 10vh;
    justify-content: center;
  }

  .swiper-slide-active {
    left: 0;
  }

  .products-container {
    padding: 0;
    padding-top: 30vh;
    height: 51rem;
  }

  .swiper-container {
    width: inherit;
    height: inherit;
  }

  #image img {
    position: absolute;
    overflow-y: visible;
  }
}