/**
Theme Name: CBC
*/

body {
    font-size: 18px;
	min-width: 320px;
    position: relative;
    line-height: normal;
    overflow-x: hidden;
    font-family: 'Manrope';
	font-weight: 400;
	margin: 0;
	color: #57595f;
	width:100%;
	letter-spacing: 0.02em;
}




/*плавная загрузка страниц*/
@-webkit-keyframes fade-in {   0% { opacity: 0.1; }   100% { opacity: 1; }   }
@-moz-keyframes    fade-in {   0% { opacity: 0.1; }   100% { opacity: 1; }   }
@-o-keyframes      fade-in {   0% { opacity: 0.1; }   100% { opacity: 1; }   }
@keyframes         fade-in {   0% { opacity: 0.1; }   100% { opacity: 1; }   }
 
body {
  -webkit-animation: fade-in 1s linear; /* Safari 4+ */
  -moz-animation: fade-in 1s linear; /* Fx 5+ */
  -o-animation: fade-in 1s linear; /* Opera 12+ */
  animation: fade-in 1s linear; /* IE 10+, Fx 29+ */
}


html {
    scroll-behavior: smooth;
}


* {
  box-sizing: border-box;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    margin-bottom: 12px;
	color:#2b3031;
	font-weight: 600;
    
}
h1 {
    font-size: 50px;
	line-height: 1.4;
}
h2 {
    font-size: 30px;
    margin:0 0 20px 0;
	line-height: 1.4;
}
h3 {
    font-size: 24px;
	margin:0 0 20px 0;
	line-height: 1.4;
	
}
h4 {
    font-size: 18px;
}
p {
    margin: 0 0 1em 0;
}


ol, ul {
  list-style: none;
	margin:0;
	padding:0;
}


li {
	
}



address {
	font-style:normal;
}



blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none; }



img {
	width:100%;
  max-width: 100%;
  height: auto;
	display: block;
	overflow:hidden;
}




a {    color: #57595f;text-decoration:none;}




::selection {
    color: #fff;
    background: #808284;
   }


strong {font-weight:600;}


*, ::after, ::before {
    box-sizing: border-box;
}


:focus-visible {
  outline: 2px solid #00f; 
  outline-offset: 3px;
  border-radius: 4px;
	padding:10px;
}





.button, button  {
	color: #FFFFFF;
	border-radius: 50px;
	padding: 12px 23px 12px 23px;
text-align: center;
	display: table;
margin: 0 auto;
    background: #009ee3; 
	background: linear-gradient(to top left, #009ee3 0%, #55c8ff 100%);
cursor:pointer;
	font-weight:500;
	font-size:16px;
	line-height: 1.4;
	border:none;
	font-family: 'Manrope';
    letter-spacing: 0.02em;
	box-shadow: -1px 5px 9px -6px rgb(0 0 0 / 47%);
    -webkit-box-shadow: -1px 5px 9px -6px rgb(0 0 0 / 47%);
    -moz-box-shadow: -1px 5px 9px -6px rgba(0,0,0,0.47);
    transition: transform 0.1s ease-in-out, box-shadow 0.2s ease-in-out;
    text-decoration: none;
	transition: .3s;
}

.white-button  {
	color: #009ee3;
	background: #ffffff; 
}

.button:hover, button:hover {
	background: #009ee3;
	background: linear-gradient(to top left, #009ee3 0%, #55c8ff 130%);
	transform: translateY(-2px); 
	box-shadow: -1px 6px 10px -5px rgb(0 0 0 / 47%);
    -webkit-box-shadow: -1px 6px 10px -5px rgb(0 0 0 / 47%);
    -moz-box-shadow: -1px 6px 10px -5px rgba(0,0,0,0.47);
}

.white-button:hover  {
	color: #ffffff;
}










/*---------------------------------HEADER---------------------------------*/


.header.home {
	width:100%;
background: #c6e3f8;
background: radial-gradient(circle, #ffffff 0%, #c6e3f8 100%);
	position:absolute;
}

.site-branding {
    position: relative;
    z-index: 4;

    background: linear-gradient(
        to right,
        rgba(255,255,255,0.95) 0%,
        rgba(255,255,255,0.75) 30%,
        rgba(255,255,255,0.35) 60%,
        rgba(255,255,255,0) 100%
    );

    backdrop-filter: blur(10px);
	
}

header.home .header-wrapper {
  width: 90%;
    max-width: 1320px;
    margin: 0 auto;
    z-index: 10;
    position: relative;
    
}






.header .header-wrapper {
width: 90%;
    max-width: 1320px;
    margin: 0 auto;
	border-bottom: 1px solid #d6d4d3;
}


.header.home .header-wrapper {
border-bottom: 0px solid #d6d4d3;
}








header .header-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 20px 0;
    justify-content: space-between;
}

.header .logo {
  width:300px;
}


header .contact-info {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 50px;	
}

header .contacts-meta {
    display: grid;
    gap: 5px;
}


header .contact-info .adress {
    position: relative;
    padding: 0 0 0 27px;
	font-size:14px;
	font-weight: 400;
}

header .contact-info .adress::before {
    content: "";
    width: 18px;
    height: 20px;
    position: absolute;
    top: 3px;
    left: 0;
    background-color: #009ee3; 
    -webkit-mask-image: url(/wp-content/themes/scoliosis-theme/design/icons/adress.svg);
    mask-image: url(/wp-content/themes/scoliosis-theme/design/icons/adress.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}



header .contact-info .phone, footer .phone  {
    position: relative;
    padding: 0 0 0 27px;
    font-size: 20px;
	font-weight:500;
	
}

header .contact-info .phone::before, 
footer .phone::before {
    content: "";
    width: 18px;
    height: 27px;
    position: absolute;
    top: 3px;
    left: 0;
background-color: #009ee3; 
-webkit-mask-image: url(/wp-content/themes/scoliosis-theme/design/icons/phone-contact.svg);
    mask-image: url(/wp-content/themes/scoliosis-theme/design/icons/phone-contact.svg);
-webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}






















.header .phone {
	text-align:left;
}

.header-wrapper .phone {
	font-size:18px;
	position:relative;
	padding: 0 0 0 25px;
}

.header-wrapper .phone:before {
  content: "";
  position: absolute;
  left: 0px;
  width: 20px;
  height: 20px;
  background-image: url("/wp-content/themes/scoliosis-theme/design/phone.svg");
  background-size: cover;
}















.header-home .top-content {
	border-bottom: 1px solid #fff;
	width: 90%;
  max-width: 1200px;
  margin: 0 auto;
	display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between;
}


.header-home .top-content .left {
	width:15%;
}

.header-home .top-content .middle {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.header-home .top-content .right {
	width:15%;
}



.header-home .header-wrapper {
  width: 90%;
  max-width: 1320px;
  margin: 0 auto;
	z-index: 10;
  position: relative;
	display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between;
	align-items: center;
}

.header-home .left-col {
	width:50%;
	padding:40px;
}

.header-home .logo {
  width:100%;
	margin:0 auto;
}

.header-home .right-col {
	width:50%;
	padding: 40px;
}

.header-home .right-col .site-description {
	margin: 0 0 20px 0;
}

.header-home .right-col .site-description:last-child {
	margin: 0 0 0 0;
}

.header-home .right-col .site-description h2 {
	font-size:30px;
	font-weight:700;
	color:#0054A6;
	margin: 0 0 10px 0;
}

.header-home .right-col .site-description p{
	font-size: 24px;
line-height: 1.2;
margin: 0 0 12px 0;
font-weight: 700;
	color:#0054A6;
}

.header-home .owl-carousel .item {
	display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
height:300px;
	
font-size: 24px;
line-height: 1.2;
font-weight: 700;
color:#0054A6;	
	
} 

.header-home .owl-carousel .owl-item {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.header-home .owl-carousel .owl-item.active {
    opacity: 1;
}










.social-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}


.social-link {
    text-indent:-9999px;
	width:45px;
	height:45px;
	border: 1px solid #d6d4d3;
	border-radius:50%;
	position:relative;
	text-indent:-9999px;
	background: linear-gradient(to top, #f2f0ee 0%, #fdfdfd 100%);
}



.social-link::before {
    content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #009ee3; 
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
	mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}





.social-link.social-facebook:before {
    -webkit-mask-image: url('/wp-content/themes/scoliosis-theme/design/icons/facebook.svg');
    mask-image: url('/wp-content/themes/scoliosis-theme/design/icons/facebook.svg');
}

.social-link.social-instagram:before {
    -webkit-mask-image: url('/wp-content/themes/scoliosis-theme/design/icons/insta-link.svg');
    mask-image: url('/wp-content/themes/scoliosis-theme/design/icons/insta-link.svg');
}

.social-link.social-tiktok:before {
    -webkit-mask-image: url('/wp-content/themes/scoliosis-theme/design/icons/tiktok-link.svg');
    mask-image: url('/wp-content/themes/scoliosis-theme/design/icons/tiktok-link.svg');
}

.social-link.social-telegram:before {
	-webkit-mask-image: url('/wp-content/themes/scoliosis-theme/design/icons/telegram-link.svg');
    mask-image: url('/wp-content/themes/scoliosis-theme/design/icons/telegram-link.svg');
}

.social-link.social-youtube:before {
	-webkit-mask-image: url('/wp-content/themes/scoliosis-theme/design/icons/youtube-link.svg');
    mask-image: url('/wp-content/themes/scoliosis-theme/design/icons/youtube-link.svg');
}


header .mob-phone {
	display:none;
}

header .mob-buttons {
	display:none;
}
























@media (max-width:800px) {
	
	
	
	.header {
   border-bottom:1px solid #d6d4d3;
	border-top: 1px solid #d6d4d3;
    	
}
	
	.header.home {
    position: relative;
		background:#fff;
}
	
	header.home .header-wrapper, .header .header-wrapper  {
    width: 100%;
		border: 0;
}
	
	header .header-content {
   flex-wrap: nowrap;
		padding:0;
}
	

	header .contact-info {
   display:none;
}
	
	header .mob-buttons {
		display:flex;
		border-left: 1px solid #d6d4d3;
	}
	
	header .mob-phone {
    background: #f3f1ef;
    width: 70px;
    height: 70px;
    display: block;
    text-indent: -9999px;
		position:relative;
}
	
	header .mob-phone:before {
    content: "";
    width: 22px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #009ee3;
    -webkit-mask-image: url(/wp-content/themes/scoliosis-theme/design/icons/phone-contact.svg);
    mask-image: url(/wp-content/themes/scoliosis-theme/design/icons/phone-contact.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
	
	
	
	
	.header .logo {
    margin: 0 20px;
    width: auto;
}
	
	.header .logo img {
    max-height:60px;
}
	
	.social-links {
    display: none;
}
	
	
	
	.header-button {
		display:none;
	}
	
}





























/*---------------------MENU-----------------------------------------------*/


.navigation {
    border-top: 1px solid #B6C6D3;
	background:#fff;
	z-index: 7;
	 position: relative;
    width: 100%;
}

.nav-wrap {


}

/* Головний список меню */
.navigation ul {
    list-style: none;
    padding: 0;
    display: flex;
    width: 90%;
    max-width: 1320px;
    margin: 0 auto;
    justify-content: space-between; 
    align-items: center;
}

/* Пункти головного меню — тепер мають однакову ширину */
.navigation ul > li {
    width: auto;
}

.navigation a {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: #000;
    padding: 15px 10px;
    display: block;
    position: relative;
}

/* Анімація лінії підкреслення */
.navigation ul > li > a:before {
    content: "";
    background: #00a0e3;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 1px;
    width: 0;
    transition: 0.3s;
}

.navigation ul > li > a:hover {
    color: #009ee3;
}

.navigation ul > li > a:hover:before {
    height: 2px;
    width: 100%;
}

/* --- ПІДМЕНЮ (Dropdown) --- */

/* Випадаючий список на всю ширину головного меню */
.navigation ul li:hover > ul {
	width:320px;
	
	display: block; 
    background: radial-gradient(circle at 25% 40%, #ffffff 0%, #ffffff 25%, #f2f0ee 55%, #f2f0ee 80%);

    box-shadow: 0px 8px 8px -10px rgba(158,155,154,1);
    z-index: 9999;
	
	
	margin:0 auto;
    
}

.navigation ul ul {
    display: none;
    position: absolute;
    top: 100%;
    padding:10px;
    border-radius: 0 0 16px 16px;
	border-left: 1px solid #d6d4d3;
	border-right: 1px solid #d6d4d3;
	border-bottom: 1px solid #d6d4d3;
    z-index: 9998;
    box-sizing: border-box;
}

.navigation ul ul:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 12px;
    background: linear-gradient(to bottom, rgba(158, 155, 154, 1) 0%, rgba(158, 155, 154, 0) 40%);
    pointer-events: none; 
}






/* Пункти підменю — тепер теж мають однакову ширину */
.navigation ul ul li {
    
    text-align: center;
    
    box-sizing: border-box;
	position:relative;
}




/* Посилання в підменю */
.navigation ul ul li a {
    font-weight: 400;
    padding: 10px;
    display: block;
	text-align:left;
	
}

.navigation ul ul li a:hover {
    color: #009ee3;
}

/* Прибираємо ефект підкреслення для пунктів підменю, якщо він там не потрібен */
.navigation ul ul li a:before {
    display: none;
}






#m-menu-open {
	display:none;
}

#m-menu {
	display:none;
}






@media (max-width:800px) {
	

	
/* Блокуємо будь-який рух сайту на фоні */
body.m-menu-opened {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  /* Запобігає передачі прокрутки з меню на сайт в сучасних браузерах */
  overscroll-behavior: contain; 
}

/* Навігація всередині меню */
.mobile-navigation {
  width: 100%;
  height: 100%;
  /* Дозволяє скролити лише цей блок */
  overflow-y: auto; 
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* Плавний скрол для iOS */
  /* Ізолює прокрутку всередині контейнера */
  overscroll-behavior: contain; 
}	
	
	
/* --- КНОПКА ВІДКРИТТЯ (Сучасний гамбургер замість FontAwesome) --- */
#m-menu-open {
  width: 70px;
  height: 70px;
  background: #009ee3;
	    background: linear-gradient(to top left, #009ee3 0%, #55c8ff 100%);
  outline: none;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

#m-menu-open-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 16px;
}

/* Стилі для самих смужок */
#m-menu-open-icon span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* --- ОВЕРЛЕЙ (Затемнення сайту) --- */
#m-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

#m-menu-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

/* --- ГОЛОВНЕ ВІКНО МЕНЮ --- */
#m-menu {
  width: 94%;
  height: 100vh;
  background: #f2f0ee;
  position: fixed;
  top: 0;
  right: -100%; 
  z-index: 9999;
  padding: 60px 0 60px 0px;
  box-sizing: border-box;
  transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
  display:block;
  /* ДОДАТКОВО: гарантуємо, що меню не вийде за межі екрана */
  overflow-x: hidden; 
}

#m-menu.is-active {
  right: 0; 
}
	
#m-menu .logo {
    width:100px;
	margin:0 0 20px 0;
}	


body.m-menu-opened {
  overflow: hidden !important;
}


#m-menu-close {
  width: 36px;
  height: 36px;
  position: absolute;
  top: 15px;
  left: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #009ee3;
  line-height: 1;
  transition: transform 0.3s ease, color 0.3s ease;
}

#m-menu-close:hover {
  transform: rotate(90deg);
  color: #089546;
}

/* --- НАВІГАЦІЯ ТА СПИСКИ --- */
.mobile-navigation {
  width: 94%;
	margin:0 auto;
  height: 100%;
  overflow-y: auto; /* Дозволяє скролити меню, якщо пунктів багато */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
	padding:10px;
}

.nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;

}

.nav-menu li {
  padding: 0;
  margin: 0;
  width: 100%;
  position: relative;
  box-sizing: border-box;
	background:#fff;
	margin: 0 0 6px 0;
	border-radius:9px;
	box-shadow: 1px 1px 3px rgb(158 155 154 / 55%);
}

/* Головні посилання */
.nav-menu li a {
  text-decoration: none;
  display: block; 
  width: 80%;
  padding: 15px 25px;
  font-size: 16px;
  font-weight: 600;
  box-sizing: border-box;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.nav-menu li a:hover {
  padding-left: 28px;
}

/* --- СТРІЛОЧКА РОЗГОРТАННЯ --- */
.nav-menu .menu-item-has-children:after {
 content: "";
    position: absolute;
    right: 20px;
    top: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
    background: url(/wp-content/themes/scoliosis-theme/design/menu-arrow.svg);
    width: 14px;
    height: 8px;
    background-size: cover;
    background-repeat: no-repeat;
}
	
	
	
	
	
	

/* Стан стрілочки при відкритому підменю */
.nav-menu li.active:after {
  transform: rotate(180deg);
}

.nav-menu .sub-menu {
  display: none;
  width: 100%;
  margin: 0;
  padding: 5px 0;
}

.nav-menu .sub-menu li {
  border: none;
	box-shadow: none;
}

.nav-menu .sub-menu li a {
  width: 100%;
  padding: 8px 24px 8px 40px; 
  text-transform: none;
  color: #2b3031;
  font-size: 15px;
  font-weight: 400;
}

.nav-menu .sub-menu li a:hover {
  color: #fff;
  padding-left: 44px;
}


}




/* -- MENU end ------------------------------------------------------------------------------------------------------------------------------------------------------------------ MENU end -- */














	
	




		
	







































































section {
	width:100%;
}

section .section-content {
	margin:30px 0;
}

h1.section-title, h2.section-title {
    font-size: 40px;
    font-weight: 500;
    margin: 0 0 20px 0;
    text-align: left;
}

h3.section-subtitle {
    font-size: 20px;
    font-weight: 500;
    margin: 0 0 20px 0;
	text-align:center;
}


section ol, section ul {
   max-width: 1100px;
margin: 0 auto 20px auto;
}

section ul li {
    list-style-type: none;
    padding-left: 30px;
    margin-bottom: 15px;
    position: relative;
}

section ul li:before {
    content: "";
position: absolute;
width: 16px;
height: 16px;
left: 0;
top: 8px;
background-image: url("/wp-content/themes/razom/design/check.svg");
background-size: cover;
}



section ol li {
  line-height: 1.8;
list-style-type: none;
counter-increment: step-counter;
margin: 0;
position: relative;
padding: 0 0 0 30px;
}

section ol li::before {
    content: counter(step-counter);
color: #fff;
text-align: center;
width: 20px;
background: #0054A6;
border-radius: 50%;
height: 20px;
line-height: 1.4;
font-size: 14px;
position: absolute;
left: 0;
top: 6px;
}










.wrapper {
	width: 92%;
    max-width: 1320px;
    margin: 40px auto;
}









/* -- Main slider ------------------------------------------------------------------------------------------------------------------------------------------------------------------ Main slider -- */

.main-slider {
    overflow: hidden;
    margin: 0 auto;
    position: relative;
    box-shadow: 1px 1px 3px rgb(158 155 154 / 55%);
	margin:0 auto 60px auto;
		
}

.main-slider img {
    width: 100%;
    height: 98vh;
    object-fit: cover;
    display: block;
}

.overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
  90deg,
  rgba(255, 249, 242, 0.98) 0%,   /* теплий крем */
  rgba(245, 248, 255, 0.90) 22%,  /* м’який холодний білий */
  rgba(231, 246, 253, 0.70) 42%,  /* твій блакитний */
  rgba(231, 246, 253, 0.35) 58%,  /* прозоріша зона */
  rgba(231, 246, 253, 0.00) 75%   /* чистий фон */
);

    z-index: 2;
}

.main-slider .slider-container {
    
    
}

.main-slider .owl-carousel.owl-loaded {
    position: initial;
}






.main-slider .title {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 11;
    width: 35%;
    margin: 0 auto;
    left: 0;
    right: 0;
    text-align: center;
}


.main-slider .title .icon {
    width: 240px;
    margin: 0 auto 20px auto;
}



.main-slider .title h1 {
  font-size: 24px;
  color: #0054A6;
  margin: 0 0 0 0;
}





.main-slider .title .slogan {
    font-size: 40px;
    max-width: 1400px;
    display: inline;
    
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
}




.main-slider .title .slogan span {
	font-size: 40px;
    padding: 0 10px;
  color: #fff;
  display: inline;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  box-decoration-break: clone;
  background: #448536;
}




.main-slider .owl-carousel{
	overflow:hidden;
	width:100%;
	
}


.main-slider .owl-nav {
        width: 110px;
    height: 50px;
    position: absolute;
    right: 40px;
    bottom: 40px;
    z-index: 99999;
    display: flex;
    gap: 10px;
    
}

.main-slider .owl-theme .owl-prev {
    width: 50px;
    height: 50px;
    border: none;
    position: relative;
    left: 0;
    margin-top: 0;
    border-radius: 50%;
    backdrop-filter: blur(10px);
	background-color: rgba(255, 255, 255, 0.7);
}

.main-slider .owl-theme .owl-prev::before {
    content: "";
    width: 12px;
    height: 21px;
    position: absolute;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
    background: url(/wp-content/themes/scoliosis-theme/design/arrow-left.svg);
    background-size: cover;
}

.main-slider .owl-theme .owl-next {
    width: 50px;
    height: 50px;
    border: none;
    position: relative;
    right: 0;
	margin-top: 0;
   border-radius: 50%;
    backdrop-filter: blur(10px);
	background-color: rgba(255, 255, 255, 0.7);
}

.main-slider .owl-theme .owl-next::before {
    content: "";
    width: 12px;
    height: 21px;
    position: absolute;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
    background: url(/wp-content/themes/scoliosis-theme/design/arrow-right.svg);
    background-size: cover;
}



.main-slider img {
    
}

.main-slider .owl-carousel .owl-item .image {
    position:relative;
}

.main-slider .buttons {
    position:absolute;
	bottom:10px;
}









@media (max-width:800px) {
	
	.main-slider {
    margin: 0 auto 40px auto;
}
	
	
	.main-slider .owl-nav {
    right: 20px;
    bottom: 20px;
    gap: 5px;
}
}





.hero__wrap {
    position: absolute;
    inset: 0;
z-index:3;
    width: 92%;
    max-width: 1320px;
    margin: 0 auto;
}

.hero__content {
    position: absolute;
    top: calc(50% + 80px); 
    transform: translateY(-50%);
    max-width: 620px;
}

.hero__subtitle {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #009ee3;
}

.hero__title {
    margin: 0;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.1;
    font-weight: 700;
}

.hero__features {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.hero__feature {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    padding: 0 0 0 26px;
}
		
.hero__feature:before {
    content: '';
    position: absolute;
    top: 7px;
    left: 0;
    background: #009ee3;
	background: linear-gradient(to top left, #009ee3 0%, #55c8ff 100%);
    height: 11px;
    width: 11px;
    border-radius: 99px;
}	





.hero__feature-text {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 500;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 42px;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 30px;
    border-radius: 999px;
    background: #009ee3;
    background: linear-gradient(to top left, #009ee3 0%, #55c8ff 100%);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
	cursor: pointer;
	box-shadow: -1px 5px 9px -6px rgb(0 0 0 / 47%);
    -webkit-box-shadow: -1px 5px 9px -6px rgb(0 0 0 / 47%);
    -moz-box-shadow: -1px 5px 9px -6px rgba(0,0,0,0.47);
}

.btn-primary:hover {
    transform: translateY(-2px);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 30px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #d7dde3;
    color: #1f2937;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
	box-shadow: -1px 5px 9px -6px rgb(0 0 0 / 47%);
    -webkit-box-shadow: -1px 5px 9px -6px rgb(0 0 0 / 47%);
    -moz-box-shadow: -1px 5px 9px -6px rgba(0,0,0,0.47);
}

.btn-secondary:hover {
    transform: translateY(-2px);
}
		
		
		

		
		
		@media (max-width:800px) {
			
			
	.hero__wrap {
    position: relative;
    width: 90%;
    padding: 30px 0;
}
			
	.hero__content {
    position: relative;
    top: 0;
    transform: translateY(0%);
}		
			
			.hero__features {
    margin-top: 20px;
    gap: 15px;
}
			
			.hero__actions {
    margin-top: 30px;
}
		.main-slider {
    box-shadow: none;
}
			
			.main-slider img {
    height: auto;
}
			
			.chs-slider	{
				margin:-150px 0 0 0;
				position:relative;
				background: linear-gradient(
        180deg, 
        rgba(255, 255, 255, 1.00) 0%,   /* Стовідсотковий білий згори */
        rgba(255, 255, 255, 0.85) 25%,  /* М'яке початкове розмиття */
        rgba(255, 255, 255, 0.50) 50%,  /* Напівпрозорий білий посередині */
        rgba(255, 255, 255, 0.15) 75%,  /* Ледь помітна димка */
        rgba(255, 255, 255, 0.00) 100%  /* Абсолютно прозорий внизу */
    );
			}
			
			.chs-slider:before	{
				content:"";
				top:0;
				left:0;
				width:100%;
				height:200px;
				position:absolute;
				z-index:1;
				background: linear-gradient(
        180deg, 
        rgba(255, 255, 255, 1.00) 0%,   /* Стовідсотковий білий згори */
        rgba(255, 255, 255, 0.85) 25%,  /* М'яке початкове розмиття */
        rgba(255, 255, 255, 0.50) 50%,  /* Напівпрозорий білий посередині */
        rgba(255, 255, 255, 0.15) 75%,  /* Ледь помітна димка */
        rgba(255, 255, 255, 0.00) 100%  /* Абсолютно прозорий внизу */
    );
			}
			
			
			
	.overlay {
		display:none;
}		
			
			.btn-primary {
    width: 100%;
    margin: 0 auto;
}
			
		.btn-secondary {
    width: 100%;
    margin: 0 auto;
}	
			
			
		.hero__feature-text {
    font-size: 16px;
}	
			
			
			
		}
		
		
	








/* ---------------------- Головна Про нас -------------------------------------------------------------------------------------------------------------------------------------------- */

.fp-about {
	background:#fff;
}


.fp-about .wrapper{
    display:flex;
    gap:20px;
    align-items:stretch;
}

.fp-about .left-col,
.fp-about .right-col{
    flex:1 1 50%;
}

.fp-about .left-col{
    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:60px;

    border-radius:20px;

    background:
    radial-gradient(
        circle at 25% 40%,
        rgba(255,255,255,.95) 0%,
        rgba(255,255,255,.75) 25%,
        rgba(242,240,238,.95) 55%,
        rgba(242,240,238,1) 80%
    );

    box-shadow:1px 1px 3px rgb(158 155 154 / 55%);
}

.fp-about .right-col{
    position:relative;
}

.fp-about .image-wrap{
    position:relative;
    height:100%;
}

.fp-about .image{
    height:100%;
}

.fp-about .image img{
    width:100%;
    height:100%;
    min-height:500px;

    object-fit:cover;
    object-position:center top;
    box-shadow: 1px 1px 3px rgb(158 155 154 / 55%);
    border-radius:20px;
    display:block;
}

.fp-about .open-popup{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    border: none;
    border-radius: 50px;
    background: #fff;
    color: #222;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 30px rgb(0 0 0 / 15%);
    transition: .3s;
}

.fp-about .open-popup:hover{
    transform: translate(-50%, -51%);
}

.fp-about .popup-wrap {
    position: relative;
    padding: 30px;
}



.fp-about .play-icon{
    width:42px;
    height:42px;

    border-radius:50%;

    background:#009ee3;

    position:relative;
    flex-shrink:0;
}

.fp-about .play-icon::before{
    content:'';

    position:absolute;

    left:17px;
    top:12px;

    border-top:8px solid transparent;
    border-bottom:8px solid transparent;
    border-left:12px solid #fff;
}

.fp-about .video-block{
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 1px 4px rgb(160 175 195 / 25%);
}


@media (max-width:800px) {
	
.fp-about .wrapper {
    display: flex;
    flex-direction: column;
}
	
	.fp-about .left-col {
    padding: 26px;
    border-radius: 16px;
}
	
	.fp-about .image img {
    border-radius: 16px;
	min-height: auto;	
}
	
	
	
	
}



















/* ---------------------- Головна Про нас ------------------------------------------------------------------------------------------------------- */























































































































/* Базові стилі для ВСІХ iframe (горизонтальний формат за замовчуванням) */
iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  border-radius: 16px;
}

/* Спеціальний клас для Shorts (перебиває пропорції та обмежує ширину) */
iframe.youtube-shorts {
  aspect-ratio: 9 / 16;
  max-width: 360px; 
  margin:0 0 20px 30px;
	float:right;
}




























.contact-form {
	width:100%;
	max-width:600px;
	margin:0 auto;
	position:relative;
}

.contact-form label {
  display:block;
	margin: 0 0 5px 0;
	font-size:14px;
}

.contact-form input {
  width: 100%;
  padding: 14px 14px 14px 45px;
  border: 1px solid #dae3ea;
  border-radius: 16px;
  font-size: 14px;
  margin: 0 0 10px 0;
  outline: none;
	position:relative;
}


.contact-form input.name {
  background: #ffffff url('/wp-content/themes/scoliosis-theme/design/icons/man.svg') 15px center no-repeat;
}

.contact-form input.phone {
  background: #ffffff url('/wp-content/themes/scoliosis-theme/design/icons/phone-input.svg') 15px center no-repeat;
}

.contact-form input.email {
  background: #ffffff url('/wp-content/themes/scoliosis-theme/design/icons/mail-input.svg') 15px center no-repeat;
	margin:0!important;
}

.contact-form .send {
    display: block;
    width: 180px; 
    position: relative;
    margin: 20px auto 0;
    padding: 10px 20px;
    border-radius: 50px;
    background: transparent;
    color: #009ee3;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    font-family: 'Manrope';
    background: #fff;
    box-shadow: -1px 5px 9px -6px rgb(0 0 0 / 47%);
    -webkit-box-shadow: -1px 5px 9px -6px rgb(0 0 0 / 47%);
    -moz-box-shadow: -1px 5px 9px -6px rgba(0,0,0,0.47);
}


.contact-form .send:hover:before {
    
}

.contact-form .send:active {
    transform: scale(0.97);
}

.contact-form .send:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 0, 81, 0.3);
}

.contact-form input:focus, .contact-form textarea:focus {
    -webkit-box-shadow: inset 0px 0px 5px 0px rgba(129,146,160,1);
-moz-box-shadow: inset 0px 0px 5px 0px rgba(129,146,160,1);
box-shadow: inset 0px 0px 5px 0px rgba(129,146,160,1);
	border:1px solid #ff0051;
}

.contact-form textarea {
  height: 248px;
  width: 100%;
	padding: 15px;
  border: 1px solid #dae3ea;
  border-radius: 6px;
  font-size: 18px;
	outline: none;
}





















































































































































































































/* ==========================================================================
   1. ГОЛОВНІ КОНТЕЙНЕРИ ФУТЕРА
   ========================================================================== */

footer {
    position: relative;
    width: 100%;
    margin: 60px 0 0 0;
    padding: 60px 0 40px 0;
    background: #f2f0ee;
    font-size: 16px;
    overflow: hidden;
}

footer .footer-top {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    gap: 30px;
    margin: 0 auto 20px auto;
    padding: 30px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 1px 1px 3px rgb(158 155 154 / 55%);
}

footer .footer-content {
    position: relative;
    display: grid;
    grid-template-columns: 4fr 3fr 3fr;
    gap: 30px;
    margin: 0 auto;
    padding: 30px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 1px 1px 3px rgb(158 155 154 / 55%);
}

footer .footer-bottom {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    width: 90%;
    max-width: 1320px;
    margin: 20px auto 0 auto;
    font-size: 16px;
}

/* ==========================================================================
   2. ЕЛЕМЕНТИ ВЕРХНЬОЇ ПАНЕЛІ (LOGO & SLOGAN)
   ========================================================================== */

footer .logo {
    max-width: 400px;
    margin: 0 auto;
}

footer .slogan {
    font-size: 30px;
    line-height: 1.2;
    text-align: center;
}

/* ==========================================================================
   3. КОЛОНКИ ТА МЕНЮ (FOOTER CONTENT)
   ========================================================================== */

footer .footer-content .col {
    border-right: 1px solid #d6d4d3;
}

footer .footer-content .col:last-child {
    border-right: 0px;
}

footer .col .menu-title {
    position: relative;
    margin: 0 0 16px 0;
    padding: 0 0 10px 0;
    font-size: 18px;
    font-weight: 600;
}

footer .col .menu-title:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 2px;
    background: #009ee3;
    background: linear-gradient(to top left, #009ee3 0%, #55c8ff 100%);
    border-radius: 2px;
}

footer .col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

footer .col ul li {
    margin-bottom: 5px;
}

footer .col ul li a {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    line-height: 1.4;
    text-decoration: none;
    transition: 0.3s ease;
}

footer .col ul li a:hover {
    transform: translateX(4px);
}

/* ==========================================================================
   4. КОНТАКТИ ТА СОЦМЕРЕЖІ
   ========================================================================== */

footer .adress,
footer .phone,
footer .phone a {
    text-decoration: none;
}

footer .adress {
    position: relative;
    margin-bottom: 20px;
    padding: 0 0 0 27px;
}

footer .adress:before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 18px;
    height: 20px;
    background-color: #009ee3;
    -webkit-mask-image: url(/wp-content/themes/scoliosis-theme/design/icons/adress.svg);
    mask-image: url(/wp-content/themes/scoliosis-theme/design/icons/adress.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

footer .phone {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.social-link {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #1f7cff;
    text-decoration: none;
    transition: 0.35s ease;
}

.social-link:hover {
    transform: translateY(-2px);
}

/* ==========================================================================
   5. КНОПКИ
   ========================================================================== */

.footer-order-btn {
    position: relative;
    width: 100% !important;
    border-radius: 50px;
    background: linear-gradient(to top left, #009ee3 0%, #55c8ff 100%);
    text-decoration: none;
    letter-spacing: 0.02em;
    font-family: 'Manrope';
    
    box-shadow: -1px 5px 9px -6px rgb(0 0 0 / 47%);
    -webkit-box-shadow: -1px 5px 9px -6px rgb(0 0 0 / 47%);
    -moz-box-shadow: -1px 5px 9px -6px rgba(0,0,0,0.47);
    
    transition: transform 0.1s ease-in-out, box-shadow 0.2s ease-in-out;
}

.footer-order-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(45, 84, 128, 0.12);
}

/* ==========================================================================
   6. АДАПТИВНІ СТИЛІ (MEDIA QUERIES)
   ========================================================================== */

@media (max-width: 800px) {
    footer .footer-top, 
    footer .footer-content {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px;
    }
    
    footer .footer-content .col {
        border-right: 0px;
    }
    
    footer .col .menu-title:before {
        width: 100%;
        height: 1px;
        background: #d6d4d3;
    }
    
    footer .col ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px 30px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
}














/*----------------------------- Попап ------------------------------------------*/
.popup {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.7);

	display: flex;
	align-items: center;
	justify-content: center;

	opacity: 0;
	visibility: hidden;

	transition: 0.3s;

	z-index: 9999;
}

.popup.active {
	opacity: 1;
	visibility: visible;
}

.popup-content {
	position: relative;


	border-radius: 16px;

	transform: translateY(30px);
	transition: 0.3s;
	max-height:90vh;
	width:90%;
	max-width:500px;
}

.popup.active .popup-content {
	transform: translateY(0);
}

.popup-close {
	position: absolute;
	top: -20px;
	right: -20px;

	width: 40px;
	height: 40px;
padding:0;
	border: 1px solid #d1e3e8;
	background: none;
cursor: pointer;
	text-indent:-9999px;
	background: #009ee3;
    background: linear-gradient(to top left, #009ee3 0%, #55c8ff 100%);
}



.popup-close:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
	background-image: url(/wp-content/themes/scoliosis-theme/design/close.svg);
    background-size: cover;
    transform: translate(-50%, -50%);
}




































.product-page {
	
}

/* 1. Загальні стилі контейнера */
.product-colors-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Трохи збільшимо відстань, щоб текстуру було краще видно */
}

/* 2. Базовий стиль кружечка (Текстура тут) */
.color-item {
    width: 40px;  /* Трохи збільшимо розмір для деталізації текстури */
    height: 40px;
    border-radius: 50%;
    
    /* ШЛЯХ ДО ВАШОГО ФОТО БЕТОНУ */
    /* Замініть '/wp-content/uploads/concrete-texture.jpg' на реальне посилання */
    background-image: url('/wp-content/themes/cbc/design/beton.png');
    background-size: cover; /* Або 'contain', якщо текстура дрібна */
    background-position: center;
    background-repeat: no-repeat;
    
    /* Режим накладання! Multiply найкраще підходить для "фарбування" */
    background-blend-mode: multiply;
    
    /* Деталі дизайну */
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 2px 5px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
}

.color-item:hover {
    transform: scale(1.1) translateY(-3px); /* Ефект вспливання */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 5px 15px rgba(0,0,0,0.2);
    border-color: rgba(0,0,0,0.3);
}

/* 3. --- МАПА КОЛЬОРІВ (Тепер це напівпрозорі кольори поверх бетону) --- */
/* Ми використовуємо rgba(), де остання цифра - це прозорість від 0.0 до 1.0 */
/* Режим multiply робить кольори темнішими, тому я підібрав яскравіші відтінки */

.color-grey     { background-color: rgba(128, 128, 128, 0.8); } /* Класичний сірий бетон */
.color-red      { background-color: rgba(220, 50, 50, 0.85);  } /* Теракотовий відтінок */
.color-mustard  { background-color: rgba(240, 180, 40, 0.85); }
.color-brown    { background-color: rgba(110, 70, 40, 0.9);   }
.color-black    { background-color: rgba(30, 30, 30, 0.9);    } /* Антрацит */
.color-green    { background-color: rgba(60, 140, 80, 0.85);  }
.color-yellow   { background-color: rgba(255, 220, 80, 0.8);  }
.color-white    { background-color: rgba(255, 255, 255, 0.9); } /* Світлий бетон, майже білий */


































.tab-slider {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    justify-content: space-between;
    margin: 0 0 30px 0;
}

.tab-buttons {
  width:30%;
}

.tab-button {
  width: 100%;
    height:80px;
    cursor: pointer;
    font-weight: 500;
font-size: 16px;
border:none;
	color:#000;
	background: #fff;
    border-top: 1px solid #B6C6D3;
	padding: 0;
}




















.tab-button.active {
  
   position:relative;
}

.tab-button.active::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0px;
  right: 0;
  margin: 0 auto;
  width: 30px;
  height: 15px;
  background-size: cover;
  background-image: url("/wp-content/themes/razom/design/tab-arrow.svg");
}

.tab-content {
width: 100%;
padding:0 0 0 40px;
}

.tab-pane {
  display: none;
	height: 100%;
	background:#fff;
	position: relative;
}

.tab-pane.active {
  display: block;
}



.tab-pane .flex-row {
  display: none;
	display: flex;
    justify-content: center;
    justify-content: space-between;
	height: 100%;
}

.tab-pane .left-col {
  width:50%;
	height: 100%;
	padding: 20px;
}

.tab-pane .right-col {
  width: 50%;
  height: 100%;
}

.tab-pane .image {
  height: 100%;
	width:100%;
}

.tab-pane img {
  height: 100%;
	width:100%;
	object-fit:cover;
}

.tab-pane .more {
  position:absolute;
	bottom:20px;
	left:20px;
	border:1px solid #000;
	padding:10px;
	font-size:16px;
}    



.tab-content p {
  margin:0 0 12px 0;
}  



.tab-button .item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.tab-button .item .icon {
	height: 60px;
    width: 60px;
    margin: 0 20px 0 0;
}



































































 


































































 
 

 

 
 
 








	
	









































 a.back-to-top {
    display: none;
  }	
a.back-to-top {
	position: fixed;
right: 30px;
bottom: 30px;
width: 40px;
height: 40px;
background: #009ee3 url("/wp-content/themes/scoliosis-theme/design/arrow-top.svg") no-repeat center 50%;
border-radius: 4px;
z-index: 10;
	text-indent:-9999px;
}	

a.back-to-top:hover {
background: #000 url("/wp-content/themes/scoliosis-theme/design/arrow-top.svg") no-repeat center 50%;
}






























.main-container {
	
}

.page {
    width: 92%;
    max-width: 1320px;
    margin: 40px auto 40px auto;
   
}








		
		
		
		
.single-specialists .post-header {
    background: radial-gradient( circle at 25% 40%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.75) 25%, rgba(242, 240, 238, 0.95) 55%, rgba(242, 240, 238, 1) 80% );
    border-radius: 20px;
    padding: 60px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 40px;
}

.single-specialists .post-thumbnail {
    flex: 0 0 calc(37% - 20px);
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.single-specialists .post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.single-specialists .post-meta {
    flex: 1; 
}

.single-specialists .post-meta h1 {
	font-size: 40px;
}

.single-specialists .post-meta .position {
	font-weight: 700;
    border-bottom: 1px solid #d6d4d3;
    padding: 0 0 20px 0;
}

.single-specialists .post-meta .spec-short-description{
	margin:20px 0;
}

.single-specialists .post-meta .quote-block {
    position: relative;
    margin: 30px 0 40px 0;
    padding: 0px 0 0px 44px;
}

.single-specialists .post-meta .quote-block:before {
    content: "";
    width: 30px;
    height: 23px;
    position: absolute;
        top: 8px;
    left: 0;
   background-image: url(/wp-content/themes/scoliosis-theme/design/quote.svg);
    background-repeat: no-repeat;
}

.single-specialists .post-meta .quote-block p {
    margin:0;
	    font-style: italic;
}

.single-specialists .post-meta .button {
	margin:0;
}

.single-specialists .post-content {
	padding: 40px;
}

.certificates-gallery .photogallery_single {
	margin:0;
}


.specialists-grid {
		grid-template-columns: repeat(3,minmax(auto,33.3%));
		display: grid;
    gap: 30px;
	}


@media (max-width:800px) {
	.single-specialists .post-header {
    border-radius: 0;
    padding: 0;
    flex-direction: column;
    gap: 10px;
    border: none;
	background:transparent;
}
	
	
	.single-specialists .post-thumbnail {
    border-radius: 16px;
}
	
	.single-specialists .post-meta {
    background: radial-gradient( circle at 25% 40%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.75) 25%, rgba(242, 240, 238, 0.95) 55%, rgba(242, 240, 238, 1) 80% );
		padding:26px;
		border-radius:16px;
}
	
	.single-specialists .post-meta h1 {
    font-size: 30px;
}
	
	.single-specialists .post-meta .position {
    font-size: 16px;
}
	
	.single-specialists .post-meta .spec-short-description {
    margin: 10px 0;
}
	
	.single-specialists .post-meta .to-form {
    width: 100%;
}
	
	.single-specialists .post-content {
    padding: 10px 0 0px 0;
}
	
	.specialists-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
	
	.specialists-grid .specialist-meta {
    padding: 20px;
    min-height: auto!important;
}
	
	.single-specialists .post-meta .button {
    margin: 0 auto;
		width:
}
	
}















































article img {
	border-radius:16px;
	overflow:hidden;
	margin:0 0 20px 0;
	width: auto;
}

article .aligncenter {
    clear: both;
    margin: 0 auto;
}

.wp-caption {
	width:100%;
	max-width:100%;
	position:relative;
}

.wp-caption .wp-caption-text {
	position:absolute;
	color:#fff;
	bottom:0;
	left:0;
	padding:20px;
	margin: 0;
}




article h1 {
    font-size: 40px;
}

article h2 {
font-size: 30px;
margin: 0 0 20px 0;
}

article h3 {
    font-size: 24px;
    margin: 20px 0;
}

article h4 {
	max-width: 1100px;
margin: 0 auto 10px auto;
}




article p {
	margin: 0 auto 26px auto;
}





article p.vriz {
    padding: 40px;
    border-radius: 16px;
    background: #e3f3fa;
	font-weight:500;
}



article p.atention {
    position: relative;
    padding-left: 40px;
}

article p.atention::before {
    content: "!";
    
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;
color: #ffffff;
	background:#009ee3;
font-size: 22px;
    font-weight: 700;
    line-height: 1;
	border-radius: 50px;
}

article a {
	color: #0054A6;
	text-decoration: underline;
}


article ol {
margin: 0 0 30px 20px;
}

article ul {
    margin: 0 0 30px 20px;
}

article ul li {
    list-style-type: none;
    padding-left: 30px;
    margin-bottom: 10px;
    position: relative;
}

article ul li:last-child {
    margin-bottom: 0px;
}

article ul li:before {
    content: "";
position: absolute;
width: 7px;
height: 10px;
left: 0;
top: 10px;
background-image: url("/wp-content/themes/scoliosis-theme/design/check.svg");
background-size: cover;
}





article ol li {
list-style-type: none;
    counter-increment: step-counter;
    position: relative;
    padding: 0 0 0 30px;
    margin: 0 0 10px 0;
}

article ol li::before {
    content: counter(step-counter);
color: #009ee3;
position: absolute;
left: 0;
font-weight:700;
}

article blockquote, article q {
  quotes: none;
border-radius: 9px;
border: 1px solid #B6C6D3;
padding: 20px;
position: relative;
max-width: 1100px;
margin: 30px auto;
}

article blockquote:before {
  content: "";
position: absolute;
width: 35px;
height: 27px;
left: 20px;
top: -14px;
background-image: url("/wp-content/themes/razom/design/quote.svg");
background-size: cover;
}

article blockquote:after {
  content: "";
position: absolute;
width: 35px;
height: 27px;
right: 20px;
bottom: -14px;
background-image: url("/wp-content/themes/razom/design/quote2.svg");
background-size: cover;
}

article blockquote p {
  margin:0;
}


article .main-image {
	float:right;
	width:100%;
	max-width:700px;
	margin: 0 0 0 40px;
}



article .video-btn {
	padding: 15px 30px 15px 60px;
	display: table;
    align-items: center;
    gap: 12px;
    margin:0 auto;
    border: none;
    border-radius: 50px;
    background: #fff;
    color: #222;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 1px 2px 3px rgb(158 155 154 / 55%);
	position:relative;
	text-decoration:none;
}


article .video-btn:before {
content: ""; /* Обов'язково для роботи псевдоелемента */
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%); /* Ідеальне центрування кружечка по вертикалі */
  width: 36px;
  height: 36px;
  border-radius: 50%; /* Робить блок ідеальним колом */
  background-color: #009ee3; /* Колір фону кружечка (можна змінити) */
  background-image: url('/wp-content/themes/scoliosis-theme/design/icons/play.svg'); 
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px; 
}


/* Загальний контейнер */
.shorts-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin: 30px 0;
    width: 100%;
}

/* Налаштування для 2 колонок на ПК */
.shorts-row.shorts-col-2 > * {
    flex: 1 1 calc(50% - 10px);
    max-width: 360px;
}

/* Налаштування для 3 колонок на ПК */
.shorts-row.shorts-col-3 > * {
    flex: 1 1 calc(33.333% - 14px);
    max-width: 320px;
}

/* Автоматичний стиль для відео всередині колонок */
.shorts-row iframe.youtube-shorts {
    aspect-ratio: 9 / 16;
    width: 100% !important;
    height: auto !important;
    float: none !important;
    margin: 0 !important;
}

/* Адаптивність для мобільних екранів (менше 600px) */
@media (max-width: 600px) {
    .shorts-row.shorts-col-2 > *,
    .shorts-row.shorts-col-3 > * {
        flex: 1 1 100%;
        max-width: 360px;
    }
}





.custom-list {
    display: flex;
    gap: 16px;
    margin: 30px 0;
    padding: 0;
    list-style: none;
}

.custom-list li {
    flex: 1; 
    
    padding: 20px;
    background: #eef9fe;
    border-radius: 16px;
    margin-bottom: 0px;
}

.custom-list li:before {
    content: none;
}






article table {
  border-collapse: collapse;
  border-spacing: 0;
	width: 100%;
	margin-bottom:20px;
}

article tr {
    margin: 4px 0;
    display: table;
    width: 100%;
	background: #f7f7f7;
	border-radius:6px;
}



article tr:hover {
    background: #c9dbf0;
}

article td {
    padding: 15px;
}







@media (max-width:800px) {
	
	article p {
		margin:0 0 18px 0;
	}
	
}





















.contact-page {
	
}

.contact-page .content {
	display:flex;
	justify-content:space-between;
}

.contact-page .content .left-side {
	width:28%;
	border: 1px solid #B6C6D3;
    padding: 40px 40px;
    border-radius: 16px;
    position: relative;
}

.contact-page .content .contact-block {
	margin:0 0 10px 0;
	padding:0 0 10px 0;
	border-bottom:1px solid #B6C6D3;
}

.contact-page .content .contact-block:last-child {
	margin:0 0 0 0;
	padding:0px 0 0 0;
	border-bottom:none;
}

.contact-page .content .left-side h2 {
	font-size:18px;
	font-weight:bold;
	margin:0 0 10px 0;
}



.contact-page .content .right-side {
	width:70%;
	border-radius: 16px;
	overflow:hidden;
}

.contact-page .content p {
	margin:0 0 5px 0;
}

.contact-page .content p:last-child {
	margin:0 0 0 0;
}

.contact-page .content .phones {
	margin:0px 0;
}


.contact-page .content .phones li {
    list-style-type: none!important;
    margin-bottom: 5px;
    line-height: inherit;
    padding-left: 0;
}

.contact-page .content .phones li:before {
    content:none;
}







		
.page-contacts .roads-buttons{display:flex;gap:10px;}
						.roads-buttons button {
    padding: 5px;
    width: 50%;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    margin: 10px 0 0 0;
			display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; 
    padding: 10px;
    width: 50%;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    margin: 10px 0 0 0;
    cursor: pointer;			
}
						
						
.page-contacts .roads-buttons button::before {
    content: "";
    display: inline-block;
    width: 20px; 
    height: 20px; 
-webkit-mask-image: url('/wp-content/themes/scoliosis-theme/design/icons/play.svg');
    mask-image: url('/wp-content/themes/scoliosis-theme/design/icons/play.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    background-color: #ffffff; 
    transition: background-color 0.2s ease;
}				
	
	

.page-contacts .phone-row {
    display: flex;
    gap: 8px;
    vertical-align: middle;
    justify-content: space-between;
	max-width:280px;
	padding:0 0 0 27px;
	position:relative;
	font-weight: 600;
}
	
	
.page-contacts .phone-row:after {
        content: "";
    width: 18px;
    height: 27px;
    position: absolute;
    top: 3px;
    left: 0;
    background-color: #009ee3;
    -webkit-mask-image: url(/wp-content/themes/scoliosis-theme/design/icons/phone-contact.svg);
    mask-image: url(/wp-content/themes/scoliosis-theme/design/icons/phone-contact.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
	

	


.icon-telegram, .icon-viber, .icon-whatsapp {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* Іконка масштабується під розмір 41x41 */
    transition: transform 0.2s ease; /* Плавний ефект при наведенні */
}



/* Підключення фонових іконок для кожного месенджера */
.icon-telegram {
    background-image: url('/wp-content/themes/scoliosis-theme/design/icons/telegram-icon.svg');
}

.icon-viber {
    background-image: url('/wp-content/themes/scoliosis-theme/design/icons/viber-icon.svg');
}

.icon-whatsapp {
    background-image: url('/wp-content/themes/scoliosis-theme/design/icons/whatsapp-icon.svg');
}		

.page-contacts .contacts-list {
		display:flex;
		flex-wrap:wrap;
		gap:30px;
	}
	
	
.page-contacts .contact-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border-radius: 16px;
    border: 1px solid #d6d4d3;
	overflow:hidden;
}
	
	.page-contacts .contact-container h2 {
    font-size: 24px;
    line-height: 1.4;
    margin: 0 0 10px;
}

/* Ліва колонка - 30% (мінус частина відступу для точності) */
.page-contacts .contact-info-col {
    flex: 0 0 calc(35%);
    max-width: calc(35%);
	background: radial-gradient( circle at 25% 40%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.75) 25%, rgba(242,240,238,.95) 55%, rgba(242,240,238,1) 80% );
	padding: 30px;
	position:relative;
}
	
.page-contacts .contact-info-col:before {
	content:"";
    position:absolute;
	top:0;
	right:0;
	height:100%;
	width:1px;
	background:#d6d4d3;
}	

/* Права колонка - 70% */
.page-contacts .contact-map-col {
        flex: 0 0 calc(65%);
    max-width: calc(65%);
    height: 100%;
	padding: 30px;
    
}


.page-contacts .contact-block {
    margin-bottom: 20px;
}
	
.page-contacts .contact-block:last-of-type {
    margin-bottom: 0px;
}	
	
.page-contacts .contact-block p {
    margin: 0 0 0px 0;
}

.page-contacts .contact-photo img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 6px; 
	margin:0;
}


.page-contacts .contact-map-col iframe {
    width: 100% !important;
    height: 100%!important; 
    border: 0;
    display: block;
}
	
	


@media (max-width: 768px) {
	
	.page-contacts .contacts-list {
    gap: 20px;
}
	
    .page-contacts .contact-info-col,
    .page-contacts .contact-map-col {
       flex: 0 0 100%;
    max-width: 100%;
    padding: 20px;
    }
	
	   
	
	.page-contacts .contact-info-col:before {
    top: auto;
    bottom: 0;
    right: 0;
    height: 1px;
    width: 100%;
}
	.page-contacts .contact-map-col {
    padding: 0px;
    }
	
	.page-contacts .contact-map-col iframe {
    height: auto!important;
		border-radius:unset;
}
    
    
}







.front-contact {
    
}


.front-contact .contacts-list {
    display: flex;
    gap: 30px;
    width: 100%;
    box-sizing: border-box;
}


.front-contact .contact-container {
    flex: 1 1 calc((100% - 60px) / 3); 
    min-width: 0;
    background: #ffffff;
    border-radius: 16px;
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    box-shadow: 1px 1px 3px rgb(158 155 154 / 55%);
}



.front-contact .contact-item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.front-contact .contact-item h3 {
    font-size: 22px;
    margin: 0 0 20px 0;
    line-height: 1.3;
}


.front-contact .contact-block {
    font-size: 16px;
    position: relative;
}
	
	.front-contact .contact-block p {
    margin:0;
}

.front-contact .contact-address {
    margin-bottom: 25px;
    padding-left: 28px;
    background: url("/wp-content/themes/scoliosis-theme/design/icons/adress.svg") no-repeat left top 5px;
    background-size: 14px;
}


.front-contact .contact-phones {
    margin-top: auto; /* Притискає телефони до низу картки, якщо адреси різної довжини */
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-left: 28px;
    background: url("/wp-content/themes/scoliosis-theme/design/icons/phone-contact.svg") no-repeat left top 3px;
    background-size: 17px;
}


.front-contact .tel-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 240px;
    justify-content: space-between;
}


.front-contact .tel-row > a[href^="tel:"] {
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
    font-size: 16px;
    margin-right: 5px;
}

.front-contact .tel-row .messengers {
    display:flex;
	gap:5px;
}

/* Загальні стилі для іконок месенджерів */
.front-contact .tel-row a[class^="icon-"] {
    width: 20px;
    height: 20px;
    background-size: 20px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}



/* Іконка Telegram */
.front-contact .icon-telegram {
    background: url("/wp-content/themes/scoliosis-theme/design/icons/telegram-icon.svg");
}

/* Іконка Viber */
.front-contact .icon-viber {
    background: url("/wp-content/themes/scoliosis-theme/design/icons/viber-icon.svg");
}

/* Іконка Whatsapp */
.front-contact .icon-whatsapp {
    background: url("/wp-content/themes/scoliosis-theme/design/icons/whatsapp-icon.svg");
}


/* АДАПТИВНІСТЬ (Екрани 800px і менше) */
@media (max-width: 800px) {
    .front-contact .contacts-list {
        flex-direction: column; /* Стають один під одним */
        gap: 20px; /* Відстань між блоками 20px */
    }
	
	
	

    .front-contact .contact-container {
        width: 100%;
        flex: 1 1 auto;
        padding: 20px; /* Внутрішній педінг картки 20px */
    }
	
	.front-contact .contact-item h3 {
    font-size: 18px;
    margin: 0 0 20px 0;
    line-height: 1.3;
}

   
    
    .front-contact .contact-address {
        margin-bottom: 20px;
    }
}

























.popup-video iframe {
    aspect-ratio: 9 / 16;
    height: 80vh;
}














.team-page .team-list {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
}

.team-page .personal-block {
	width:20%;
	position: relative;
}

.team-page .personal-block .photo {
	border-radius:6px;
	overflow:hidden;
}


.team-page .personal-block .photo img {
	margin:0;
}

.team-page .personal-block h2.name {
	    font-size: 20px;
    font-weight: 700;
    color: #0054A6;
    margin: 15px 0 10px 0;
}

.team-page .personal-block h3.position {
	display:flex;
	justify-content:space-between;
	font-size:18px;
	font-weight:500;
}














.service {
	
}













.service .page-header {
	
	display: flex;
	flex-wrap: nowrap;         
	    align-items: stretch;    
	justify-content: space-between;
	border-radius: 20px;       
	width: 100%;
	box-sizing: border-box;
	overflow: hidden; 
	box-shadow: 1px 2px 3px rgb(158 155 154 / 55%);
}


.service .page-header .left-col {
	flex: 1;                    
	padding: 60px;       
	z-index: 2;   
	align-items: center;
    display: flex;
    flex-wrap: wrap;
	background: #009ee3; 
background: radial-gradient(circle at 15% 40%, #43c6ff 0%, #43c6ff 15%, #009ee3 55%, #009ee3 100%);
}

.service .page-header h1 {
color: #ffffff;
font-size: 42px;
line-height: 1.3;
}

.service .page-header h2 {
    color: #ffffff;
    font-size: 22px;
    font-weight: 500;
}

.service .page-header .service-short-description {
color: #ffffff; 
}

.service .page-header .to-form {
color: #009ee3;
    border-radius: 50px;
    padding: 10px 20px 10px 20px;
    text-align: center;
    display: table;
    background: #ffffff;
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    border: none;
    box-shadow: -1px 5px 9px -6px rgb(0 0 0 / 47%);
    -webkit-box-shadow: -1px 5px 9px -6px rgb(0 0 0 / 47%);
    -moz-box-shadow: -1px 5px 9px -6px rgba(0,0,0,0.47);
}

.service .page-header .to-form:hover {
box-shadow: -1px 2px 2px -6px rgb(0 0 0 / 47%);
    -webkit-box-shadow: -1px 2px 2px -6px rgb(0 0 0 / 47%);
    -moz-box-shadow: -1px 2px 2px -6px rgba(0,0,0,0.47);
}





.service .page-header .right-col {
	flex: 0 0 600px;           
	width: 600px;
	position: relative;
	display: flex;
	justify-content: flex-end;
	
}


.service .page-header .main-image {
	position: relative;
	width: 100%;
	height: 100%;             
	display: block;
}


.service .page-header .main-image::before {
	content: '';
	position: absolute;
	inset: 0;                  
	background: linear-gradient(to right, #009ee3 0%, transparent 60%);
	z-index: 2;                
	pointer-events: none;      
}


.service .page-header .main-image img {
	display: block;
	width: 100%;
	height: 100%;             
	object-fit: cover;       
	object-position: center; 
	opacity: 0.8;              
}



.service .service-content {
	padding: 40px;
}




@media (max-width: 800px) {
	.service .page-header {
		flex-direction: column;
		align-items: flex-start;
		padding: 0px; 
	}
	
	.service .page-header .left-col {
		padding: 26px;
		background: radial-gradient(circle at 15% 20%, #43c6ff 0%, #43c6ff 15%, #009ee3 55%, #009ee3 100%);
	}
	
	.service .page-header .right-col {
		width: 100%;           
		flex: 1 1 auto;
		height: 300px; 
	}
	

	.service .page-header .main-image::before {
		background: linear-gradient(to bottom, #009ee3 0%, transparent 50%); 
	}
	
	.service .page-header h1 {
font-size: 30px;
}
	
	.service .page-header h2 {
    font-size: 20px;
}
	
	.service .service-content {
    padding: 10px 0 0 0;
}
	
	.service .page-header .to-form {
    width: 100%;
}
}








/* ==========================================================================
   Блок сітки та елементів послуг (Минулі класи)
   ========================================================================== */

.service-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.service-item {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    min-height: 32rem;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(247, 251, 254, 1);
    box-shadow: 1px 1px 3px rgb(158 155 154 / 55%);
    transition: 0.45s ease;
}



.service-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(158, 155, 154, 0.10);
}

/* --- Ліва колонка --- */

.service-item .left-col {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px;
}

.service-title {
    font-weight: 600;
}

.service-short-description {
    max-width: 42rem;
    margin-bottom: 3rem;
}

/* --- Кнопка детальніше --- */

.service-item .more {
	margin: auto 0 0 0;
    align-self: flex-start;
}



/* --- Права колонка та зображення --- */

.right-col {
    position: relative;
    overflow: hidden;
}

.service-image {
    width: 100%;
    height: 100%;
    position: relative;
}
	
.service-image:before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;	
    background: linear-gradient(to right, rgba(247, 251, 254, 1) 0%, rgba(247, 251, 254, 0.85) 25%, rgba(247, 251, 254, 0.70) 35%, rgba(247, 251, 254, 0.00) 65%);
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   Адаптивний дизайн (Media Queries)
   ========================================================================== */

@media (max-width: 800px) {
	
	.service-grid {
    gap: 20px;
}
	
    .service-item {
        grid-template-columns: 1fr;
		min-height: auto;
    }

    .service-item .right-col {
        order: -1;
        height: 18rem;
    }

    .service-item .right-col::before {
        width: 100%;
        height: 40%;
        top: auto;
        bottom: 0;
        background: linear-gradient(
            to top,
            rgba(247, 251, 254, 1) 0%,
            rgba(247, 251, 254, 0.85) 35%,
            rgba(247, 251, 254, 0) 100%
        );
    }

    

    .service-item .left-col {
    padding: 20px;
}
	
	.service-short-description {
    margin: 0;
}
	
	.service-image:before {
    background: linear-gradient(to top, rgba(247, 251, 254, 1) 0%, rgba(247, 251, 254, 0.85) 25%, rgba(247, 251, 254, 0.70) 35%, rgba(247, 251, 254, 0.00) 65%);
}
	
	.service-item .more {
    margin: 0 auto;
}
	
	.service-title {
    margin:0 0 10px 0;
}
}





























.page-disease .page-header, .disease-item {
    display: flex;
    flex-wrap: nowrap;         
    align-items: stretch;
    justify-content: space-between;
    border-radius: 16px;       
    width: 100%;
    box-sizing: border-box;
    overflow: hidden; 
    margin: 0 0 30px 0;
	box-shadow: 1px 1px 3px rgb(158 155 154 / 55%);
}

.page-disease .page-header .left-col, .disease-item .left-col {
    flex: 1;                    
    padding: 60px;       
    z-index: 2;                
    display: flex;
    flex-direction: column;
    justify-content: center;
	background: radial-gradient(circle at 15% 40%, #ffffff 0%, #ffffff 15%, #f2f0ee 55%, #f2f0ee 100%);
}

.page-disease .page-header h1, .disease-item h2 {
    font-size: 40px;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.page-disease .page-header h2 {
    font-size: 22px;
    margin: 0 0 10px 0;
    font-weight: 500;
}



.page-disease .page-header .disease-short-description, .page-disease .page-header .disease-short-description {
    margin-bottom: 20px; 
}

.disease-item a {
	text-decoration:none;
}

.page-disease .page-header .to-form, .disease-item .more, .section-1 .read-more-btn {
    color: #ffffff;
    border-radius: 50px;
    padding: 10px 20px;
    text-align: center;
    display: inline-block; 
    align-self: flex-start; 
    background: #009ee3;
    background: linear-gradient(to top left, #009ee3 0%, #55c8ff 100%);
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    box-shadow: -1px 5px 9px -6px rgb(0 0 0 / 47%);
    -webkit-box-shadow: -1px 5px 9px -6px rgb(0 0 0 / 47%);
    -moz-box-shadow: -1px 5px 9px -6px rgba(0,0,0,0.47);
    transition: transform 0.1s ease-in-out, box-shadow 0.2s ease-in-out;
	text-decoration:none;
}

.page-disease .page-header .to-form:hover, .disease-item .more:hover, .section-1 .read-more-btn:hover {
    box-shadow: -1px 2px 2px -6px rgb(0 0 0 / 47%);
    -webkit-box-shadow: -1px 2px 2px -6px rgb(0 0 0 / 47%);
    -moz-box-shadow: -1px 2px 2px -6px rgba(0,0,0,0.47);
}


.page-disease .page-header .to-form:active, .disease-item .to-form:active {
    transform: scale(0.97); 
    -webkit-transform: scale(0.97);
    -moz-transform: scale(0.97);
    box-shadow: -1px 1px 1px -6px rgb(0 0 0 / 47%);
}


.page-disease .page-header .right-col, .disease-item .right-col {
    flex: 0 0 600px;           
    width: 600px;
    position: relative;
    display: flex;
    justify-content: flex-end;
}


.page-disease .page-header .disease-main-image, .disease-item .disease-main-image {
    position: relative;
    width: 100%;
    height: 100%;             
    display: block;
}


.page-disease .page-header .disease-main-image::before, .disease-item .disease-main-image::before {
    content: '';
    position: absolute;
    inset: 0;                  
    background: linear-gradient(to right, #f2f0ee 0%, transparent 60%);
    z-index: 2;                
    pointer-events: none;      
}


.page-disease .page-header .disease-main-image img, .disease-item .disease-main-image img {
    display: block;
    width: 100%;
    height: 100%;             
    object-fit: cover;        
    object-position: center;  
    opacity: 0.9;              
}


@media (max-width: 800px) {
    .page-disease .page-header, .disease-item  {
        flex-direction: column;
        align-items: stretch; 
        padding: 0; 
    }
    
    .page-disease .page-header .left-col, .disease-item .left-col {
    flex: 1;
    padding: 26px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
    
    .page-disease .page-header .right-col, .disease-item .right-col {
        width: 100%;           
        flex: 1 1 auto;
        height: 300px;         
    }
    
    
    .page-disease .page-header .disease-main-image::before, .disease-item .disease-main-image::before {
        background: linear-gradient(to bottom, #f2f0ee 0%, transparent 60%);
    }
}





























.photogallery_single {
	position:relative;
	    margin: 30px 0;
}

.photogallery_single .post-gallery .item {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 4; 
    display: block;
    border-radius: 16px;
    overflow: hidden;
}

.photogallery_single .owl-carousel .owl-item img {
    display: block;
    width: 100%;
    height: 100%; 
    object-fit: cover; 
    position: relative;
	transition: 5s ease;
}



.photogallery_single .item:before {
  content: '';
position: absolute;

top: 50%;
left: 50%;
width: 0px;
height: 0px;
z-index: 5;
border-radius: 16px;
overflow: hidden;
	transition: 0.3s ease;
}

.photogallery_single .item:hover:before {
  content: '';
position: absolute;
background: rgba(0, 158, 227, 0.3);
top: 0;
	left:0;
width: 100%;
height: 100%;
z-index: 5;
	border-radius:16px;
	overflow:hidden;
}

.photogallery_single .item:hover:after {
  content: '';
position: absolute;
top: 50%;
	left:50%;
	margin:-11px 0 0 -11px;
width: 22px;
height: 22px;
z-index: 5;
	background-image: url("/wp-content/themes/scoliosis-theme/design/zoom.svg");
	background-size:cover;
}


.photogallery_single .wp-caption-text {
	width:100%;
	position: absolute;
    color: #fff;
    bottom: 0;
    left: 0;
    padding: 20px;
    margin: 0;
	background: linear-gradient(
    to top,
    rgba(22, 41, 76, 0.92) 0%,
    rgba(22, 41, 76, 0.72) 40%,
    rgba(22, 41, 76, 0.25) 75%,
    rgba(22, 41, 76, 0) 100%
);
}
























/*--[ Tags ]---------------------------*/
.tags {
    overflow: hidden;
    margin:0 0 10px 0;
}

.tags ol, .tags ul {
    list-style: none;
    margin: 0 0 0 0;
    padding: 0 0px;
	display: flex;
justify-content: center;
}


.tags li {
	list-style-type: none;
	padding:0;
}
.tags li a {
    margin: 0 5px 5px 0;
    color: #6d7b82!important;
    float: left;
    padding: 5px 5px;
    list-style-type: none;
    text-decoration: none;
    line-height: 1;
    font-size: 12px;
	border: 1px solid #cbced2;
}

.tags li a:hover  {
    margin: 0 5px 5px 0;
    color: #fff!important;
    background: #052b4e;
    float: left;
    padding: 5px 5px;
    list-style-type: none;
    text-decoration: none;
    line-height: 1;
    border: 1px solid #052b4e;
}

.tags a:before {
    content: "#";
    color: #6d7b82;
	margin-right: 2px;
}

.tags a:hover:before {
    content: "#";
    color: #fff;
}























	






	
		
		

.front-services .wrap .owl-stage-outer:before {
    content: "";
    width: 100px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.75) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.25) 75%, rgba(255, 255, 255, 0) 100%);
}



		
	.services-list .services-item {
    display: block;
    width: 100%;
    height: 520px;
    position: relative;
    border-radius: 16px;
	box-shadow: 1px 2px 3px rgb(158 155 154 / 55%);	
    
}	

	.services-list .services-item-inner {
    display: block;
    width: 100%;
    height: 520px;
    border-radius: 16px;
    overflow: hidden;
    
		position:relative;
}	


		
		.services-list .services-image {
    width: 100%;
    height: 100%;
			position:relative;
}
		
	.services-list .services-image img {
    display: block;
    width: 100%;
    object-fit: cover;
    height: 100%;
}	


.services-list .services-image:before {
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width: 100%;
    height: 70%;
	background: linear-gradient(to bottom, rgba(0,158,227,0) 0%, rgba(0,158,227,0.93) 57%, rgba(0,158,227,0.93) 80%, rgba(0,158,227,0.93) 100%);
	background: linear-gradient(
    to top,
    rgba(0,142,210,.95) 0%,
    rgba(0,142,210,.55) 60%,
    rgba(0,142,210,0) 100%
);
	z-index:2;
}


		
		
	.services-list .services-meta {
    width: 100%;
    padding: 30px 30px;
    position: absolute;
    bottom: 0;
    right: 0;
    min-height: 200px;
    color: #fff;
		border-radius:16px 16px 0 0;
    z-index:3;
		    
}
		
		

.services-item h3 {
    font-size: 24px;
    color: #fff;
    margin: 0 0 5px 0;
	text-shadow: 0 1px 3px rgb(0 0 0 / 55%);
}

.services-item h4 {
    font-size: 16px;
	color:#fff;
	font-weight:300;
	text-shadow: 0 1px 3px rgb(0 0 0 / 55%);
}

.services-item a {
    text-decoration: none;
}
	
.services-item .to-service-more {
	position: absolute;
    bottom: 30px;
    right: 30px;
    color: #009ee3;
    border-radius: 99px;
    padding: 8px 20px 8px 20px;
    text-align: center;
    display: table;
    backdrop-filter: blur(10px);
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
	background:#fff;
    float: right;
    box-shadow: -1px 5px 9px -6px rgb(0 0 0 / 47%);
    -webkit-box-shadow: -1px 5px 9px -6px rgb(0 0 0 / 47%);
    -moz-box-shadow: -1px 5px 9px -6px rgba(0,0,0,0.47);
}


/* Медіа-запити */
@media (max-width: 800px) {
    
.front-services .wrapper {
    width: 100%;
    padding: 0px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
	    border: none;
}
	
	.services-list .services-item {
    box-shadow: 1px 2px 3px rgb(158 155 154 / 55%);
}
	
	.front-services .wrap .owl-stage-outer:before {
    content: none;
}
	
	
}



















.order-popup .popup-content {
	
    padding: 40px;
    border-radius: 16px;
    background: #009ee3;
    background: linear-gradient(to top left, #009ee3 0%, #55c8ff 100%);
    border: 1px solid #d1e3e8;
    box-shadow: 0 10px 30px rgb(0 0 0 / 30%);
    color: #ffffff;
    
}

.order-popup .popup-content h3 {
	color:#fff;
}

.order-popup .popup-content .order-popup-text {
	color:#fff;
	font-size:16px;
	margin: 0 0 20px 0;
}

.order-popup .popup-content .contact-form .send {
    color: #009ee3;
    border-radius: 50px;
    padding: 10px 20px 10px 20px;
    text-align: center;
    display: table;
    background: #ffffff;
    cursor: pointer;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.4;
    border: none;
    box-shadow: -1px 5px 9px -6px rgb(0 0 0 / 47%);
    -webkit-box-shadow: -1px 5px 9px -6px rgb(0 0 0 / 47%);
    -moz-box-shadow: -1px 5px 9px -6px rgba(0,0,0,0.47);
}




@media (max-width:800px) {
	.order-popup .popup-content {
    padding: 20px;
}
}
















.breadcrumbs {
  font-size: 14px;
  font-weight: 500;
      color: #4b4f56;
  margin: 0 0 20px 0;
}




































.archive{
	display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
	padding:0 0;
	overflow: visible;
}

.archive-item .thumbnail {
  border-radius:6px;
	overflow:hidden;
}








.archive-item {
	width:25%;
	position:relative;
    padding: 25px;
    line-height: 20px;
    font-size: 16px;
    color: #111;
    text-decoration: none;
    -webkit-transition: color .15s ease;
    transition: color .15s ease;
	border-bottom: 1px solid #cbced2;
}

.archive-item:before {
	content: "";
top: 5%;
right: -1px;
position: absolute;
width: 1px;
height: 90%;
background-color: #cbced2;
}

.archive-item:after {
	content: "";
top: 5%;
left: 0px;
position: absolute;
width: 1px;
height: 90%;
background-color: #cbced2;
}



.archive-item .thumbnail {
    width: 100%;
    max-height: 300px;
	
}

.archive-item .thumbnail img {
    margin:0;
	
}


.archive-item .meta {
    margin:10px 0 0 0;
}



.archive-item .rubric a {
    color:#052b4e;
	font-size: 12px;
	padding: 0 5px 0 0;
border-right: 1px solid #cbced2;
margin: 0 5px 0 0;
}

.archive-item .date {
    color:#6d7b82;
	font-size: 16px;
}


.archive-item h2 {
    font-weight: 700;
    font-size: 20px;
    text-align: left;
    text-align-last: left;
    text-decoration: none;
	line-height:1.3;
	margin:8px 0 0 0;
	display: block;
	border: 0;
}

.archive-item:hover .title {
    color:#0054A6;
}







.archive-item .info-block {
    display: flex;
    flex-direction: column;
    width: calc(100% - 193px);
}

.archive-item .post-title {
    font-size: 16px;
    line-height: 1.3;
    text-decoration: none;
    font-weight: 700;
    text-align: left;
    text-align-last: left;
}







.archive-item .post-details {
     color: #bdbdbd;
    font-size: 12px;
    line-height: 1.6;
    position: absolute;
    bottom: 40px;
    right: 40px;
}



.archive-item .post-date {
    float: left;
    font-size: 12px;
    line-height: 1.6;
	margin:0 5px 0 0;
}



#loadmore {
	width:100%;
    display: block;
    margin: 0 auto;
	margin-top:20px;
    padding: 8px 12px;
    border-radius: 1px;
    text-decoration: none;
    border: none;
	background:transparent;
	font-size:12px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    transform: skewX(0deg);
    position: relative;
	cursor:pointer;
}

#loadmore:hover {
	color:#004d9e;
}







.archive-page .main-col {
width: 100%;
max-width: 800px;
margin: 0 auto;
}



.archive-page .search-result {
  margin:0 0 30px 0;
}

.archive-page .search {
  margin:0 0 5px 0;
	border-bottom:2px solid #B6C6D3;
	display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}

.archive-page .search input {
  border:none;
	background:transparent;
	font-size:30px;
	padding:10px 0 10px 0;
	font-size:30px;
	font-family: 'FS Albert Pro';
	font-weight:700;
}

.archive-page .search input:focus {
  outline: none; 
	box-shadow
}

.archive-page .search input[type="submit"] {
  border: none;
	text-indent:-9999px;
	position:relative;
	width: 25px;
height: 25px;
	background: #fff url("/wp-content/themes/razom/design/icons/search.svg")no-repeat!important;
  background-size: 25px 25px !important;
  border: none; 
  cursor: pointer; 
}

.search-count {
  color:#8c9ca9;
}




.archive-page .item {
  width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between;
	align-items:center;
	margin: 0 0 30px 0;
}

.archive-page .col-1 {
  display:block;
	width:25%;
}

.archive-page .col-2 {
  display: block;
width: 75%;
padding: 0 30px;
}

.archive-page .item .thumbnail {
    background-size: 100% 100%;
    width: 100%;
    min-height: 150px;
	position: relative;
    align-items: center;
    justify-content: center;
    background-size: cover;
    overflow: hidden;
    transition: 0.8s;
    background-position: center center;
	border-radius: 6px;
}

.archive-page .item .title {
  font-weight: 700;
  font-size: 20px;
  text-align: left;
  text-align-last: left;
  text-decoration: none;
  line-height: 1.3;
  margin: 8px 0 0 0;
  display: block;
}

.archive-page .item .date {
  color: #6d7b82;
  font-size: 12px;
}







.cat-heading {
margin: 0 auto 20px auto;
}









.category-title {
	color: #1f6db5;
    font-weight: 700;
    line-height: 1.3;
}

.tag-title {
	font-size: 28px;
    color: #ff4200;
    font-weight: 700;
    padding-bottom: 6px;
    margin-bottom: 35px;
    text-transform:none;

}

.site-title br {
    display: none;
  }


.error-page {
	background: #94a1aa;
}

.error-wrap {
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
}



















.certificates-gallery .post-gallery {
    display: flex;
    gap: 20px;
}

.certificates-gallery .post-gallery .item {
    width: auto;
    height: auto;
	aspect-ratio: auto;
	    box-shadow: 0 2px 5px rgb(160 175 195 / 25%);
}

.certificates-gallery .post-gallery img {
    width: auto;
    max-height: 200px;
    display: block;
	object-fit:cover;
	margin:0;
}















































/* -------------------------------------------------------- Блок FAQ + Форма ЗЗ --------------------------------------------------- */

.faq-consult {
        background: #f2f0ee;
    padding: 40px 0;
    margin: 40px 0;
}

.faq-consult .section-row {
    display: flex;
    gap: 40px;
    justify-content: space-between;
    align-items: flex-start;
	margin: 0 auto;
}

.faq-consult .accordion {
    width: 65%;
}

.faq-consult .consult-form {
    width: 35%;
    position: sticky;
    top: 20px;
    align-self: flex-start;
	
}

.faq-consult .consult-block {
    background: #009ee3;
    background: linear-gradient(to top left, #009ee3 0%, #55c8ff 100%);
    border-radius: 16px;
    padding: 30px;
	box-shadow: 1px 1px 3px rgb(158 155 154 / 55%);
}

.faq-consult .section-subtitle {
    color: #fff;
    text-align: left;
	font-size:18px;
}

.faq-consult label {
    color: #fff;
}

.faq-consult .contact-form .send {
    color: #009ee3;
    border-radius: 50px;
    padding: 10px 20px 10px 20px;
    text-align: center;
    display: table;
    background: #ffffff;
    cursor: pointer;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.4;
    border: none;
    box-shadow: -1px 5px 9px -6px rgb(0 0 0 / 47%);
    -webkit-box-shadow: -1px 5px 9px -6px rgb(0 0 0 / 47%);
    -moz-box-shadow: -1px 5px 9px -6px rgba(0,0,0,0.47);
}

.form-agreement {
    display: flex;
    align-items: flex-start; 
    gap: 10px;
    margin: 15px 0 20px 0; 
    color: #fff;
}

.form-agreement input[type="checkbox"] {
    margin-top: 3px; 
    cursor: pointer;
    width: 16px;
    height: 16px;
    flex-shrink: 0; 
}

.form-agreement label {
    font-size: 14px;
    line-height: 1.4;
    color: #ffffff;
    cursor: pointer;
    user-select: none; 
}

.form-agreement label a {
    color: #ffffff;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.form-agreement label a:hover {
    color: #0077ab;
    text-decoration: none;
}

.accordion {
    width:80%;
	margin:0 auto;
}

.accordion .accordion-item {
    margin: 10px 0;
    border-radius: 16px;
    background: #fff;
    padding: 30px;
	box-shadow: 1px 1px 3px rgb(158 155 154 / 55%);
}

.accordion .accordion-item:last-child {
    margin: 10px 0 0 0;
    
}

.accordion .accordion-item:first-child {
    margin: 0;
    
}


.accordion-header {
    padding: 0px 50px 0px 0px;
    cursor: pointer;
    position: relative;
    font-size: 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.accordion-header .thumb {
    width: 50px;
	margin:0 20px 0 0;
}

.accordion-content {
    padding: 20px 50px 0px 0px;
    display: none;
}

.accordion-content p {
    margin:0;
}



.accordion-symbol {
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
	background: #009ee3;
	border-radius:6px; 
}

.accordion-symbol:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    background-size: cover;
    transform: translate(-50%, -50%);
}

.accordion-item.active .accordion-content {
    display: block;
}

.accordion-symbol:before {
    background-image: url('/wp-content/themes/scoliosis-theme/design/plus.svg');
}

.accordion-item .accordion-symbol.minus:before {
    background-image: url('/wp-content/themes/scoliosis-theme/design/minus.svg');
}




/* Медіа-запити */
@media (max-width: 1000px) {
    .faq-consult .section-row {
        gap: 30px;
    }
    
    .faq-consult .accordion, 
    .faq-consult .consult-form {
        width: 50%;
    }
}

@media (max-width: 800px) {
    .faq-consult .section-row {
        flex-direction: column;
    }
    
    .faq-consult .accordion, 
    .faq-consult .consult-form {
        width: 100%;
    }
	
	.accordion .accordion-item {
    padding: 20px;
}
	.accordion-header {
    font-size: 18px;
}
	
	.accordion-symbol {
    top: 50%;
    width: 30px;
    height: 30px;
}
	.accordion-symbol:before {
    width: 30px;
    height: 30px;
}
	.accordion-content {
    padding: 10px 0px 0px 0px;
}
	.faq-consult .consult-block {
    padding: 20px;
}

}	
























	

/* -------------------------------------------------------- Сторінка Результати --------------------------------------------------- */

.results {}

.cases-list {
	margin:40px 0 0 0;
}

.case-item {
	border-radius: 16px;
	margin:0 0 20px 0;
	background: #ffffff;
	box-shadow: 1px 1px 3px rgb(158 155 154 / 55%);
}

.case-item .case-header {
	display: flex;
	align-items: center; 
	gap: 20px;       
	cursor: pointer;
    position: relative;
	padding: 30px 60px 30px 30px;
}

.case-header .case-thumbnail {
	flex: 0 0 120px;   
	max-width: 120px;  
	
}

.case-header .case-thumbnail img {
    width: 120px;
	height:120px;
	object-fit:cover;
	border-radius:6px;
}

.case-item .case-header h3 {
	flex: 1;        
	margin: 0;  
	font-size:20px;
}

.case-content {
    display: none;
	padding: 0px 30px 10px 30px;
}



.case-item.active .case-content {
    display: block;
}



.case-symbol {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
	background: #009ee3;
	border-radius:6px; 
}

.case-symbol:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    background-size: cover;
    transform: translate(-50%, -50%);
}

.case-symbol:before {
    background-image: url('/wp-content/themes/scoliosis-theme/design/plus.svg');
}

.case-symbol.minus:before {
    background-image: url('/wp-content/themes/scoliosis-theme/design/minus.svg');
}



@media (max-width: 800px) {
    
	.case-item .case-header {
    padding: 20px 60px 20px 20px;
}
	
	.case-symbol {
    right: 30px;
}
	
}


@media (max-width: 500px) {
    
	.case-item .case-header {
    padding: 20px 60px 20px 20px;
}
	
	.case-item .case-header h3 {
	font-size:16px;
}
	
	.case-header .case-thumbnail {
    flex: 0 0 100px;
    max-width: 100px;
}
	
	.case-header .case-thumbnail img {
    width: 100px;
    height: 100px;
}

	
	.case-symbol {
    right: 30px;
}
	
}














































.owl-alt-diseases {
    position: relative;
}

.owl-carousel .owl-stage-outer {
    padding: 10px;
    margin: -10px;
}

.owl-alt-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

.owl-alt-main-wrapper {
    position: relative;
    width: 100%;
}

/* Стилі для мініатюр на десктопі */
.owl-alt-thumbs-carousel {
    width: 100%;
    display: block;
}

.owl-alt-thumb-item {
    cursor: pointer;
    border-radius: 16px;
	height: 90px;
    overflow: hidden;
    transition: all 0.4s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 10px;
    box-sizing: border-box;
    opacity: 0.7; 
    background: #f2f0ee;
    box-shadow: 1px 1px 3px rgb(158 155 154 / 55%);
    text-align: center;
}

.owl-alt-thumb-item:hover,
.owl-alt-thumb-item.active {
    opacity: 1;
}

.owl-alt-thumb-item.active .owl-alt-thumb-meta h3 {
    color: #009ee3;
}

.owl-alt-thumb-meta h3 {
    font-size: 16px;
    margin: 0;
    line-height: 1.4;
    transition: color 0.3s ease;
    font-weight: 600;
}

/* Стилі картки головного слайдера (Десктоп) */
.owl-alt-main-item {
    display: flex; 
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

.owl-alt-left-col,
.owl-alt-right-col {
    flex: 1 1 50%;
    min-width: 0;
    box-sizing: border-box;
    box-shadow: 1px 1px 3px rgb(158 155 154 / 55%);
}

.owl-alt-left-col {
    border-radius: 20px;
    background: #ffffff;
    overflow: hidden;
}

.owl-alt-left-col img {
    width: 100%;
    height: 500px; 
    display: block;
    object-fit: cover;
    object-position: top;
}

.owl-alt-right-col {
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: radial-gradient(circle at 25% 40%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.75) 25%, rgba(242, 240, 238, 0.95) 55%, rgba(242, 240, 238, 1) 80%);
    position: relative;
}

.owl-alt-buttons {
    position: absolute;
    bottom: 30px;
    right: 30px;
    display: flex;
    gap: 10px;
}

/* Кастомні Стрілки */
.owl-alt-arrows {
    position: absolute;
    top: 40px;
    right: 40px;
    display: flex;
    gap: 7px;
    z-index: 10; /* поверх слайдера */
}

.owl-alt-arrow {
    width: 50px;
    height: 50px;
    background: #ffffff;
    border: 1px solid #d6d4d3;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgb(160 175 195 / 25%);
    border-radius: 99px;
    position: relative;    
}

.owl-alt-arrow.prev-btn:before {
    content: "";
    width: 10px;
    height: 17px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(/wp-content/themes/scoliosis-theme/design/arrow-left.svg) no-repeat center;
    background-size: cover;
}

.owl-alt-arrow.next-btn:before {
    content: "";
    width: 10px;
    height: 17px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(/wp-content/themes/scoliosis-theme/design/arrow-right.svg) no-repeat center;
    background-size: cover;
}

.owl-alt-arrow:hover {
    background: #fefefe;
}

/* ==========================================================================
   АДАПТИВНІСТЬ (Мобільна версія < 800px)
   ========================================================================== */





@media(max-width: 800px) {
	
	.owl-alt-diseases .wrapper {
    width: 100%;
}
	
	
    /* Повністю ховаємо верхній ряд мініатюр та стрілки */
    .owl-alt-thumbs-carousel, 
    .owl-alt-arrows {
        display: none !important; 
    }

    .owl-alt-main-item {
    display:block;
		border-radius: 16px 16px;
    gap: 0px;
    padding: 0px;
    position: relative;
    height: 500px;
	box-shadow: 1px 2px 3px rgb(158 155 154 / 55%);	
		height:500px;
}

   .owl-alt-right-col {
    order: 2;
    padding: 0 26px 26px;
    border-radius: 0 0 16px 16px;
    background: #f2f0ee;
    z-index: 2;
    width: 100%;
	   box-shadow: none;
	   height:150px;
	   display: block;
}
	
	

    .owl-alt-left-col {
        border-radius: 16px 16px 0 0;
    position: relative;
    box-shadow: none;
		height:350px;
    }
	
	.owl-alt-left-col:before {
        content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20%;
    background: linear-gradient(
  to top,
  rgba(242, 240, 238, 1) 0%,
  rgba(242, 240, 238, 0.98) 12%,
  rgba(242, 240, 238, 0.92) 24%,
  rgba(242, 240, 238, 0.82) 36%,
  rgba(242, 240, 238, 0.68) 48%,
  rgba(242, 240, 238, 0.52) 60%,
  rgba(242, 240, 238, 0.35) 72%,
  rgba(242, 240, 238, 0.19) 84%,
  rgba(242, 240, 238, 0.05) 94%,
  rgba(242, 240, 238, 0) 100%
);
    z-index: 1;
    }

    .owl-alt-left-col img {
        height: 350px; 
    }

    
	
	.owl-alt-buttons {
    bottom: 26px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
	
	.owl-alt-buttons .white-button {
    background: #009ee3;
    background: linear-gradient(to top left, #009ee3 0%, #55c8ff 100%);
    color: #fff;
}
    
   
	
	
	
	
	.owl-alt-post-meta h3 {
		font-size: 22px;
    margin: 0 0 20px 0;
	}
	
	.owl-alt-diseases .disease-short-description 
	{display:none;}
	
	
	.owl-alt-buttons .open-popup {
    display: none;
}
	
	
}














/* ==========================================================================
   1. КОНТЕЙНЕРИ СЕКЦІЇ ТА ЕФЕКТИ СЛАЙДЕРА (FRONT SPECIALISTS)
   ========================================================================== */



.front-specialists .owl-stage-outer:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 100px;
    height: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.75) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.25) 75%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

/* ==========================================================================
   2. КАРТКА СПЕЦІАЛІСТА (SPECIALIST ITEM)
   ========================================================================== */

.specialists .specialist-item {
    position: relative;
    display: block;
    width: 100%;
    height: 560px;
    border-radius: 16px;
    overflow: hidden;
	box-shadow: 1px 1px 3px rgb(158 155 154 / 55%);
}

/* Зображення та ефекти затінення */
.specialists .specialist-item .specialist-image {
    width: 100%;
    height: 500px;
    border-radius: 16px;
}

.specialists .specialist-item .specialist-image:before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top, rgba(247, 243, 241, 1) 0%, rgba(247, 243, 241, 0.5) 50%, rgba(247, 243, 241, 0) 75%);
    pointer-events: none;
}

.specialists .specialist-item .specialist-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    object-position: top;
    border-radius: 16px;
}

/* Текстовий блок картки (Meta-data) */
.specialists .specialist-item .specialist-meta {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    z-index: 2;
    width: 100%;
    min-height: 200px;
    margin: 0 auto;
    padding: 30px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    backdrop-filter: blur(10px);
}

/* Typo */
.specialists h3 {
    margin: 0 0 5px 0;
    font-size: 24px;
    line-height: 1.4;
}

.specialists .position {
    font-size: 14px;
    font-weight: 500;
}

h3.specialist-item {
    margin: 0;
    padding: 40px;
    font-size: 18px;
    border: 1px solid #d1e3e8;
    border-radius: 12px;
}

/* ==========================================================================
   3. АДАПТИВНІ СТИЛІ (MEDIA QUERIES)
   ========================================================================== */

@media screen and (max-width: 800px) {
    .front-specialists .wrapper {
        width: 100%;
        padding: 0px;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }
    
    .front-specialists .owl-stage-outer:before {
        content: none;
    }
    
    /* Бічні градієнтні затемнення для мобільного слайдера */
    .front-specialists .wrap .owl-stage-outer:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: 30px;
        height: 100%;
        background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.95) 15%, rgba(255, 255, 255, 0.8) 35%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.25) 78%, rgba(255, 255, 255, 0.07) 90%, rgba(255, 255, 255, 0) 100%);
        pointer-events: none;
    }
    
    .front-specialists .wrap .owl-stage-outer:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        width: 30px;
        height: 100%;
        background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.95) 15%, rgba(255, 255, 255, 0.8) 35%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.25) 78%, rgba(255, 255, 255, 0.07) 90%, rgba(255, 255, 255, 0) 100%);
        pointer-events: none;
    }
    
    /* Коригування розмірів картки на мобільному */
    .specialists .specialist-item {
        height: 500px;
        box-shadow: 1px 1px 3px rgb(158 155 154 / 55%);
    }
    
    .specialists .specialist-item .specialist-image {
        height: 440px;
    }
    
    .specialists .specialist-item .specialist-meta {
        padding: 20px;
    }
}
































/* ==========================================================================
   1. СПИСОК ВІДГУКІВ / СЛАЙДЕР (REVIEWS LIST)
   ========================================================================== */

.reviews-list .owl-stage-outer {
    margin: -20px;
    padding: 20px;
}

.reviews-list .review-item {
    position: relative;
    height: 280px;
    padding: 30px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 1px 1px 3px rgb(158 155 154 / 55%);
}

.reviews-list .review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 10px 0;
}

.reviews-list h3 {
    margin: 0;
    font-size: 20px;
}

.reviews-list .date-stars {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reviews-list .stars {
    width: 100px;
}

.reviews-list .date-review {
    float: right;
    color: #a7b9be;
    font-size: 14px;
}

/* ==========================================================================
   2. СТОРІНКА ОКРЕМОГО ВІДГУКУ (SINGLE REVIEW)
   ========================================================================== */

.single-reviews .post-container {
    position: relative;
    margin: 0 0 80px 0;
    padding: 30px;
    background: radial-gradient(circle at 25% 40%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.75) 25%, rgba(242, 240, 238, 0.95) 55%, rgba(242, 240, 238, 1) 80%);
    border-radius: 16px;
    box-shadow: 1px 1px 3px rgb(158 155 154 / 55%);
}

.single-reviews .post-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 10px 0;
}

.single-reviews h1 {
    margin: 0;
    font-size: 30px;
}

.single-reviews .date-stars {
    display: flex;
    align-items: center;
    gap: 10px;
}

.single-reviews .stars {
    width: 100px;
}

.single-reviews .date-review {
    float: right;
    color: #827e7b;
    font-size: 14px;
}

/* ==========================================================================
   3. АДАПТИВНІ СТИЛІ (MEDIA QUERIES)
   ========================================================================== */

@media screen and (max-width: 800px) {
    .reviews-list .review-item {
        position: relative;
        height: 350px;
        padding: 26px;
        background: #fff;
        border-radius: 16px;
    }
    
    .reviews-list h3 {
        font-size: 20px;
    }
    
    .reviews-list .date-stars {
        flex-direction: column;
        align-items: end;
        gap: 5px;
        width: 40%;
    }
    
    .reviews-list .stars {
        width: 90px;
    }
    
    .reviews-list .date-review {
        font-size: 12px;
    }
}




/* ==========================================================================
   Архів відгуків: Нова двоколонкова структура (30% на 70%)
   ========================================================================== */

.archive-reviews-page {
    
}

.archive-reviews-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Картка відгуку */
.archive-reviews-item {
    background: #ffffff;
    box-shadow: 1px 1px 3px rgb(158 155 154 / 55%);
    border-radius: 20px;
    padding: 26px;
    display: flex;
    flex-direction: column; /* На мобільних — в один стовпчик */
    gap: 30px;
	background: #f2f0ee;
	background: radial-gradient(circle at 25% 25%, #f9f9f8 0%, #f2f0ee 100%);
}

/* --- ЛІВА КОЛОНКА (Мета-дані) --- */
.archive-reviews-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.archive-reviews-meta-col a {
    text-decoration: none;
    color: inherit;
}

.archive-reviews-title {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    color: #1a202c;
}

.archive-reviews-item .date-stars {
        flex-direction: row;
    align-items: center;
    gap: 15px;
    display: flex;
}

.archive-reviews-item .date-review {
    color: #827e7b;
    font-size: 14px;
}

.archive-reviews-item .stars img {
    display: block;
    width: 100px;
}


	.archive-reviews-content p:last-child {
		margin:0 0 0 0;
	}






/* ==========================================================================
   Адаптація для Десктопів (Екрани від 768px і більше)
   ========================================================================== */
@media (min-width: 768px) {
    .archive-reviews-item {
        flex-direction: row; 
        align-items: flex-start;
        gap: 40px; 
		padding: 30px;
    }

    
    .archive-reviews-meta {
        flex: 0 0 20%; 
        max-width: 20%;
    }

   
    .archive-reviews-content {
        flex: 1; 
    }

    
    .date-stars {
        flex-direction: row;
        align-items: center;
        gap: 15px;
		display:flex;
    }
}

















































































@media screen and (max-width: 1400px) {
	
}


@media screen and (max-width: 1200px) {
	
}

@media screen and (max-width: 1100px) {
	
}

@media screen and (max-width: 1000px) {
	

	
header .contact-info {
    align-items: center;
    margin: 20px 0;
}	
	
	
	
.navigation {
    display: none;
}	
	
	
	
	
	
	

	

	
	
	
.desktop-slider { display: none; }
.mobile-slider { display: block; }	
	
}






















@media screen and (max-width: 800px) {
	
	
	html, body {
    overflow-x: hidden;
}
	
	body {
    font-size: 16px;
}
	
	p {
    margin: 0 0 16px 0;
}
	
	h2.section-title {
    font-size: 30px;
    margin: 0 0 16px 0;
}
	
	h2.section-title.mob-margin {
    margin: 0 0 16px 16px;
}
	
.custom-list {
    display: grid;
}
	
.button, button {
    font-size: 14px;
	width: 60%;
}



	

	

	

	
	

	

	

	
	
	
	
	
	
	
	
	
	

	

	
	
	
	
	
	

	
	
	
	
	
	

	

	
	

	
	

	
	
	
	
	



	










@media screen and (max-width: 600px) {
	
	

	
	
	

	
	




	

	
	

	
	


	
	
	
	
	
	
	
	

	
	
	
	
	
	
	
	
	
	
	


	

	
	

	
	
	
	

	
	
	
	
	
	
	
	
	
	

	
	

	
	
	

	
	
	
	
	
	
	.tags ol, .tags ul {
  display: block;
}
	
	
	

	
	

	

	
	




	
	
	
	


	
	

	
	
	

	
	article h1 {
    font-size: 30px;
    margin: 0 auto 20px auto;
}
	
	article h2 {
    font-size: 26px;
    margin: 0 0 20px 0;
}
	
	article h3 {
    font-size: 22px;
}
	
	
	article ul {
    margin: 0 0 20px 20px;
}
	
	.news-block {
    display: block;
}
	
.news-block .left-side {
    width: 100%;
}
	
	.news-block .left-side .fecebook-viget iframe {
		width:100%;
	}
	
	
	

	

	
	
	
	
	
	
	.archive-item:before, .archive-item:after {
    content: none;
}
	
	
	
	
}













@media screen and (max-width: 480px) {
	

	
	
	
	
	
	
	
	
	a.back-to-top {
    right: 0px;
    left: 0;
    margin: 0 auto;
    bottom: 0px;
    border-radius: 9px 9px 0 0;
}
	
	
	
	
	}