/* ============================================

   PARALLAX SECTIONS - WITH CUSTOM BACKGROUNDS

   ============================================ */



/* Base Parallax Section */

.parallax-section {

  position: relative;

  min-height: 520px;

  max-height: 620px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  isolation: isolate;

  margin-top: -40px;

}



.parallax-content {

  animation: fadeUp 0.8s ease forwards;

}



@keyframes fadeUp {

  from {

    opacity: 0;

    transform: translateY(20px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* Parallax Background Image - Base styles */

.parallax-section::before {

  content: '';

  position: absolute;

  top: -10%;

  left: 0;

  right: 0;

  bottom: -20%;

  background-attachment: fixed;

  background-position: center 30%;

  background-repeat: no-repeat;

  background-size: cover;

  z-index: -2;

  transform: translateZ(0);

  will-change: transform;

  opacity: 0.9;

  transition: opacity 0.3s ease;

}



/* Parallax Overlay - Light gradient */

.parallax-overlay {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(

    135deg,

    rgba(79, 72, 73, 0.82) 0%,

    rgba(245, 245, 245, 0.75) 50%,

    rgba(240, 240, 240, 0.8) 100%

  );

  z-index: 0;

  pointer-events: none;

}



/* Parallax Content */

.parallax-content {

  position: relative;

  z-index: 2;

  text-align: center;

  color: var(--gray-800);

  padding: 1rem 2rem;

  width: 100%;

  max-width: 1100px;

  margin: 0 auto;

}



/* Quote Icon */

.quote-icon {

  font-size: 2.5rem;

  line-height: 1;

  color: var(--red);

  opacity: 0.5;

  margin-bottom: 0.25rem;

  display: block;

}



@media (max-width: 768px) {

.parallax-section {

align-items: flex-start !important;

justify-content: flex-start !important;	

margin-top: -20px;

	}

}







/* Quote Text */

.parallax-quote {

  font-size: clamp(1rem, 2.5vw, 1.5rem);

  font-weight: 400;

  font-style: italic;

  color: white;

  line-height: 1.5;

  max-width: 700px;

  margin: 0 auto;

  text-align: center;

  letter-spacing: 0.01em;

  text-shadow: none;

  border: none;

  padding: 0;

}



/* ============================================

   CUSTOM BACKGROUND CLASSES

   ============================================ */



/* Background 1 - Default / Home */

.parallax-section.bg-home::before {

  background-image: url('../img/shared/puma-1-bg.png?v_4');

	 background-position: center 45%;

}



@media (max-width: 768px) {

  .parallax-section.bg-home::before {

	 background-position: 20% 35% !important;

    background-attachment: scroll;

  }

}



/* Background 2 - About / Ordinace */

.parallax-section.bg-about::before,

.parallax-section.bg-ordinace::before {

  background-image: url("../img/shared/contact_sect_bg.jpg");

  background-position: center 40%;

}



/* Background 3 - Doctors / Team */

.parallax-section.bg-doctors::before,

.parallax-section.bg-team::before {

  background-image: url('../img/shared/doctors-bg.jpg');

  background-position: center 35%;

}



/* Background 4 - Technology */

.parallax-section.bg-tech::before {

  background-image: url('../img/shared/serv_p_bg.jpg?v=4');

  background-position: center 45%;

}



/* Background 5 - Services */

.parallax-section.bg-services::before {

  background-image: url('../img/shared/services-bg.jpg?v_4');

  background-position: center 30%;

}



/* Background 6 - Gallery */

.parallax-section.bg-gallery::before {

  background-image: url("../img/shared/bg-2.png?v_4");

  background-position: center 40%;

}



/* Background 7 - Contact */

.parallax-section.bg-contact::before {

  background-image: url('../img/shared/contact-bg.jpg?v_4');

  background-position: center 35%;

}



/* ============================================

   ALTERNATIVE - USING DATA ATTRIBUTE

   ============================================ */



/* Using data attribute for dynamic backgrounds */

.parallax-section[data-bg]::before {

  background-image: var(--bg-image, url('../img/shared/default-bg.jpg?v_4'));

}



/* In HTML you would use:

   <section class="parallax-section" data-bg="img/shared/puma-1-bg.png">

*/



/* ============================================

   MODIFIERS FOR DIFFERENT OPACITY LEVELS

   ============================================ */



/* Background opacity modifiers */

.parallax-section.opacity-light::before {

  opacity: 0.6;

}



.parallax-section.opacity-medium::before {

  opacity: 0.8;

}



.parallax-section.opacity-heavy::before {

  opacity: 1;

}



/* Background position modifiers */

.parallax-section.position-top::before {

  background-position: center top;

}



.parallax-section.position-bottom::before {

  background-position: center bottom;

}



.parallax-section.position-left::before {

  background-position: left center;

}



.parallax-section.position-right::before {

  background-position: right center;

}



/* Background size modifiers */

.parallax-section.size-contain::before {

  background-size: contain;

  background-color: var(--gray-200);

}



.parallax-section.size-cover::before {

  background-size: cover;

}



/* ============================================

   OVERLAY MODIFIERS

   ============================================ */



/* Different overlay colors */

.parallax-overlay.dark {

  background: linear-gradient(

    135deg,

    rgba(0, 0, 0, 0.7) 0%,

    rgba(0, 0, 0, 0.5) 100%

  );

}



.parallax-overlay.light {

  background: linear-gradient(

    135deg,

    rgba(255, 255, 255, 0.85) 0%,

    rgba(245, 245, 245, 0.75) 100%

  );

}



.parallax-overlay.red {

  background: linear-gradient(

    135deg,

    rgba(196, 30, 58, 0.7) 0%,

    rgba(155, 21, 44, 0.6) 100%

  );

}



.parallax-overlay.gradient {

  background: linear-gradient(

    135deg,

    rgba(79, 72, 73, 0.82) 0%,

    rgba(196, 30, 58, 0.5) 50%,

    rgba(240, 240, 240, 0.8) 100%

  );

}



/* No overlay */

.parallax-overlay.none {

  background: transparent;

}



/* ============================================

   RESPONSIVE ADJUSTMENTS

   ============================================ */



@media (max-width: 1024px) {

  .parallax-section {

    min-height: 280px;

    max-height: 420px;

    margin-top: -30px;

  }

  

  .parallax-content {

    padding: 1.75rem 1.5rem;

  }

  

  .quote-icon {

    font-size: 2.2rem;

  }

}



@media (max-width: 768px) {

  /* Disable fixed attachment on mobile for better performance */

  .parallax-section::before {

    background-attachment: scroll;

  }

  

  .parallax-section {

    min-height: 240px;

    max-height: 360px;

    margin-top: -20px;

  }

  

  .parallax-content {

    padding: 1.5rem 1.25rem;

  }

  

  .quote-icon {

    font-size: 1.8rem;

    margin-bottom: 0.2rem;

  }

  

  .parallax-quote {

    font-size: clamp(0.9rem, 4vw, 1.1rem);

    line-height: 1.45;

  }

}



@media (max-width: 480px) {

  .parallax-section {

    min-height: 200px;

    max-height: 300px;

    margin-top: -15px;

  }

  

  .parallax-content {

    padding: 1.25rem 1rem;

  }

  

  .quote-icon {

    font-size: 1.5rem;

    margin-bottom: 0.15rem;

  }

  

  .parallax-quote {

    font-size: 0.85rem;

    line-height: 1.4;

  }

}



/* ============================================

   PERFORMANCE OPTIMIZATIONS

   ============================================ */



.parallax-section::before {

  transform: translateZ(0);

  backface-visibility: hidden;

  perspective: 1000px;

}



/* Animation for content */

@keyframes quoteFadeIn {

  from {

    opacity: 0;

    transform: translateY(15px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.parallax-content {

  animation: quoteFadeIn 0.5s ease-out forwards;

}



.parallax-bg {

    position: relative;

    overflow: hidden;

    isolation: isolate;

}

.parallax-bg::after {

    content: '';

    position: absolute;

    inset: -100px 0;

    background-image: url("../img/shared/8.svg?v_4");

    background-attachment: fixed;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

/*	opacity: .15;*/

    z-index: -1;

}



/* Модификаторы оверлея — разная насыщенность */

.parallax-bg::before {

    content: '';

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.30);

    z-index: 0;

}

.parallax-bg > * { position: relative; z-index: 1; }



.parallax-bg--dark::before   { background: rgba(0,0,0,.72); }

.parallax-bg--medium::before { background: rgba(0,0,0,.50); }

.parallax-bg--light::before  { background: rgba(0,0,0,.30); }

.parallax-bg--red::before {

    background: linear-gradient(135deg,

        rgba(90,5,15,.82) 0%,

        rgba(0,0,0,.65) 100%);

}

.parallax-bg--warm::before {

    background: linear-gradient(135deg,

        rgba(60,20,10,.75) 0%,

        rgba(20,5,0,.60) 100%);

}



/* ── Мобильный: fixed не работает на iOS ────────────────── */

@media (max-width: 768px) {

    .parallax-section::before,

    .parallax-bg::after {

        background-attachment: scroll;

        inset: 0;

    }

}