.elementor-260 .elementor-element.elementor-element-583104a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-260 .elementor-element.elementor-element-7b46938{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-260 .elementor-element.elementor-element-88fe7e3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for container, class: .elementor-element-583104a *//* ============================================================
   POWER PEPTIDES – PURCHASE GUIDE (SECTION 1 HERO)
   ============================================================ */

.pp-pg-hero{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  padding: clamp(60px, 8vw, 120px) 16px;
  text-align: center;
  color: #fff;
  background: linear-gradient(160deg, #204aa0 0%, #195a78 55%, #d473a6 100%);
  position: relative;
  overflow: hidden;
}

.pp-pg-hero__title{
  font-weight: 800;
  font-size: clamp(28px, 4vw, 42px);
  margin-bottom: 12px;
}

.pp-pg-hero__sub{
  font-size: clamp(16px, 2vw, 20px);
  max-width: 700px;
  margin: 0 auto;
  color: #eef2ff;
}

/* hex overlay */
.pp-pg-hero::before{
  content:"";
  position:absolute;
  inset:-20% -10%;
  opacity:0.08;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='white' stroke-opacity='0.6' stroke-width='1'>\
<defs><pattern id='hexpg' width='20' height='17.32' patternUnits='userSpaceOnUse'>\
<path d='M5 0 L15 0 L20 8.66 L15 17.32 L5 17.32 L0 8.66 Z'/></pattern></defs>\
<rect width='100%' height='100%' fill='url(%23hexpg)'/></svg>");
  background-size:260px 260px;
  animation: ppPGpan 55s linear infinite alternate;
}

@keyframes ppPGpan{
  0% { background-position:0 0; }
  100% { background-position:-500px -300px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f503913 *//* ============================================================
   POWER PEPTIDES – PURCHASE GUIDE (SECTION 2 STEPS)
   ============================================================ */

.pp-pg-steps{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(60px, 8vw, 120px) 20px;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 32px;
}

.pp-pg-steps__item{
  background: #ffffff;
  border: 1px solid #e5e7eb;
  padding: 32px;
  border-radius: 16px;
  transition: 0.25s ease;
}

.pp-pg-steps__item:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}

.pp-pg-steps__item h3{
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 12px;
  color: #0f172a;
}

.pp-pg-steps__item p{
  color: #475569;
  font-size: 16px;
  line-height: 1.6;
}

/* mobile */
@media(max-width: 768px){
  .pp-pg-steps{
    grid-template-columns: 1fr;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b26036e *//* ============================================================
   POWER PEPTIDES – PURCHASE GUIDE (SECTION 3 CTA)
   ============================================================ */

.pp-pg-finalcta{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  padding: clamp(80px,10vw,160px) 20px;
  text-align: center;
  color: #fff;
  background: linear-gradient(160deg, #204aa0 0%, #195a78 55%, #d473a6 100%);
  position: relative;
  overflow: hidden;
}

.pp-pg-finalcta::before{
  content:"";
  position:absolute;
  inset:-20% -10%;
  opacity:0.06;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='1'>\
<defs><pattern id='hexpgcta' width='20' height='17.32' patternUnits='userSpaceOnUse'>\
<path d='M5 0 L15 0 L20 8.66 L15 17.32 L5 17.32 L0 8.66 Z'/></pattern></defs>\
<rect width='100%' height='100%' fill='url(%23hexpgcta)'/></svg>");
  background-size:300px 300px;
  animation: pgCTA 60s linear infinite alternate;
}

@keyframes pgCTA{
  0%{background-position:0 0;}
  100%{background-position:-480px -300px;}
}

.pp-pg-finalcta h2{
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  margin-bottom: 16px;
}

.pp-pg-finalcta p{
  max-width: 800px;
  margin: 0 auto 32px;
  color:#e8edf5;
  font-size: 18px;
  line-height:1.7;
}

.pp-pg-finalcta__buttons{
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}/* End custom CSS */