@charset "UTF-8";
html {
  box-sizing: border-box; }

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

ul[class],
ol[class] {
  padding: 0; }

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
  font-size: inherit; }

ul[class] {
  list-style: none; }

img {
  max-width: 100%;
  display: block; }

input,
button,
textarea,
select {
  font: inherit; }

a {
  text-decoration: none; }

html,
body {
  height: 100%; }

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #333333;
  overflow-x: hidden;
  min-width: 300px; }

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%; }

.main {
  flex: 1 0 auto; }

.footer {
  flex: 0 0 auto;
  flex-shrink: 0; }

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 12px; }

.container-fluid {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 10px; }

.info-email {
  font-weight: 600;
  font-size: 14px;
  color: #2c3e50;
  margin-bottom: 22px;
  padding-left: 30px;
  display: inline-block;
  position: relative; }
  .info-email::before {
    content: '';
    background-image: url("../images/mail.svg");
    position: absolute;
    left: 0;
    width: 24px;
    height: 24px;
    top: 2px; }

.hero__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  padding: 10px 150px;
  height: 80px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); }
  .hero__header-burger {
    display: none;
    font-size: 28px;
    cursor: pointer;
    z-index: 1010;
    transition: transform 0.3s ease;
    color: white;
    border: none;
    background: none;
    padding: 0;
    margin: 0; }
    .hero__header-burger.active {
      transform: rotate(90deg); }
  .hero__header .hero__logo {
    font-size: 24px;
    font-weight: 700;
    z-index: 1010; }
    .hero__header .hero__logo-img {
      width: 48px;
      height: 48px; }
  .hero__header .hero__nav {
    display: flex;
    gap: 32px; }
    .hero__header .hero__nav a {
      margin: 0;
      color: #ffffff;
      font-weight: 500;
      text-decoration: none;
      transition: all 0.3s ease;
      position: relative; }
      .hero__header .hero__nav a::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 0;
        height: 2px;
        background: white;
        transition: width 0.3s ease; }
      .hero__header .hero__nav a:hover::after {
        width: 100%; }
      .hero__header .hero__nav a:hover {
        transform: translateX(5px); }
  .hero__header .hero__btn {
    background: #000;
    color: #fff;
    padding: 12px 20px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    display: flex;
    align-items: center; }
    .hero__header .hero__btn:hover {
      background: #333;
      transform: translateY(-2px); }
    .hero__header .hero__btn-text {
      max-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
    .hero__header .hero__btn-avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid white; }

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

@media (max-width: 1023px) {
  .hero__header {
    padding: 10px 20px;
    height: 70px; }
  .hero__header-burger {
    display: block !important;
    background-color: #fff !important;
    border: 1px solid yellow !important;
    border-radius: 8px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 28px !important;
    cursor: pointer !important;
    color: yellow !important;
    text-align: center !important;
    line-height: 40px !important;
    z-index: 10001 !important; }
  .hero__nav {
    display: none !important;
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background-color: #fff !important;
    flex-direction: column !important;
    padding: 20px !important;
    gap: 15px !important;
    z-index: 10000 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important; }
    .hero__nav.active {
      display: flex !important; }
    .hero__nav a {
      display: block !important;
      padding: 12px 20px !important;
      color: yellow !important;
      text-decoration: none !important;
      font-size: 18px !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
      text-align: left !important; }
      .hero__nav a::after {
        display: none !important; }
      .hero__nav a:hover {
        background-color: rgba(255, 255, 255, 0.1) !important; } }

@media (max-width: 575px) {
  .hero__header {
    padding: 10px 15px;
    height: 60px; }
  .hero__nav {
    top: 60px !important; }
  .hero__logo-img {
    width: 36px;
    height: 36px; }
  .hero__btn {
    padding: 8px 16px; }
    .hero__btn-text {
      max-width: 100px;
      font-size: 12px; }
    .hero__btn-avatar {
      width: 24px;
      height: 24px; } }

@media (min-width: 1024px) {
  .hero__header-burger {
    display: none !important; }
  .hero__nav {
    display: flex !important;
    position: static !important;
    flex-direction: row !important;
    background: transparent !important;
    padding: 0 !important;
    gap: 32px !important; }
  .hero__nav a {
    padding: 0 !important;
    border-bottom: none !important;
    color: #ffffff !important; } }

body.menu-open {
  overflow: hidden; }

.slide {
  width: 100%;
  overflow: hidden; }
  .slide__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    min-height: 80vh;
    padding-left: 150px; }
    @media (max-width: 768px) {
      .slide__inner {
        padding-left: 20px; } }
    .slide__inner-left {
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center; }
      @media (max-width: 768px) {
        .slide__inner-left {
          width: 100%;
          text-align: center;
          margin-bottom: 30px; } }
      .slide__inner-left-title {
        font-size: 48px;
        font-weight: 700;
        text-transform: uppercase;
        font-family: 'Ubuntu', sans-serif;
        margin-bottom: 20px; }
        @media (max-width: 768px) {
          .slide__inner-left-title {
            font-size: 32px; } }
      .slide__inner-left-description {
        font-size: 18px;
        font-family: 'Ubuntu', sans-serif;
        line-height: 1.6; }
        @media (max-width: 768px) {
          .slide__inner-left-description {
            font-size: 16px; } }
    .slide__inner-right {
      width: 50%;
      height: 100vh;
      display: flex;
      justify-content: flex-end;
      /* Фото справа */
      align-items: center;
      background: url("../images/maps_road.png") no-repeat;
      background-size: cover;
      position: relative;
      padding-right: 50px;
      /* Отступ от правого края */ }
      @media (max-width: 768px) {
        .slide__inner-right {
          width: 100%;
          height: 50vh;
          justify-content: center;
          padding-right: 0; } }
      .slide__inner-right-image {
        width: 100%;
        max-width: 800px;
        /* Размер фото */ }
        .slide__inner-right-image.animate {
          animation: car-move 0.8s ease-out forwards; }
        .slide__inner-right-image-img {
          width: 100%;
          height: auto;
          object-fit: contain; }
  .slide .slick-slide {
    display: flex !important;
    justify-content: center;
    align-items: center; }
  .slide .slick-dots {
    bottom: 20px; }
  .slide .slick-prev,
  .slide .slick-next {
    z-index: 10; }

/* Анимация появления справа */
@keyframes car-move {
  0% {
    opacity: 0;
    transform: translateX(100px); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

@keyframes diagnosticsFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

@keyframes diagnosticsScale {
  from {
    transform: scale(1); }
  to {
    transform: scale(1.05); } }

@keyframes diagnosticsLineGrow {
  from {
    width: 0; }
  to {
    width: 250px; } }

@keyframes diagnosticsInfoPulse {
  0% {
    transform: scale(0.95);
    opacity: 0; }
  100% {
    transform: scale(1);
    opacity: 1; } }

.diagnostics__grid--animate .diagnostics__grid-item {
  animation: diagnosticsFadeIn 0.6s ease forwards; }
  .diagnostics__grid--animate .diagnostics__grid-item:nth-child(1) {
    animation-delay: 0.1s; }
  .diagnostics__grid--animate .diagnostics__grid-item:nth-child(2) {
    animation-delay: 0.2s; }
  .diagnostics__grid--animate .diagnostics__grid-item:nth-child(3) {
    animation-delay: 0.3s; }
  .diagnostics__grid--animate .diagnostics__grid-item:nth-child(4) {
    animation-delay: 0.4s; }

.diagnostics__grid-item--hover-scale {
  transition: transform 0.3s ease; }
  .diagnostics__grid-item--hover-scale:hover {
    transform: scale(1.03); }

.diagnostics__info--animate {
  animation: diagnosticsInfoPulse 0.4s ease; }

@media (max-width: 992px) {
  .diagnostics {
    padding: 40px 0; }
  .diagnostics__title {
    font-size: 28px;
    line-height: 40px; }
  .diagnostics__title::after {
    width: 180px; }
  .diagnostics__text {
    font-size: 15px;
    padding: 0 20px; }
  .diagnostics__collection {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px; }
  .diagnostics__image {
    height: 300px; }
  .diagnostics__info-title {
    font-size: 18px; }
  .diagnostics__info-text {
    font-size: 13px; } }

@media (max-width: 768px) {
  .diagnostics {
    padding: 30px 0; }
  .diagnostics__title {
    font-size: 24px;
    line-height: 34px;
    padding-bottom: 16px;
    margin-bottom: 16px; }
  .diagnostics__title::after {
    width: 120px; }
  .diagnostics__text {
    font-size: 14px;
    margin-bottom: 25px;
    padding: 0 15px; }
  .diagnostics__collection {
    grid-template-columns: 1fr !important;
    gap: 20px;
    padding-bottom: 30px; }
  .diagnostics__image {
    height: 280px; }
  .diagnostics__info {
    padding: 15px; }
  .diagnostics__info-title {
    font-size: 18px;
    padding-bottom: 12px;
    margin-bottom: 12px; }
  .diagnostics__info-text {
    font-size: 13px; } }

@media (max-width: 480px) {
  .diagnostics__title {
    font-size: 22px; }
  .diagnostics__image {
    height: 220px; }
  .diagnostics__info-title {
    font-size: 16px; }
  .diagnostics__info-text {
    font-size: 12px; } }

@media (min-width: 1400px) {
  .diagnostics__container {
    max-width: 1320px;
    margin: 0 auto; } }

.diagnostics {
  text-align: center;
  padding: 45px 0 35px;
  background: #ffffff; }
  .diagnostics__container {
    width: 100%;
    max-width: 1200px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto; }
  .diagnostics__title {
    color: #111827;
    font-size: 34px;
    line-height: 1px;
    padding-bottom: 24px;
    margin-bottom: 24px;
    position: relative;
    font-weight: 700; }
    .diagnostics__title::after {
      content: '';
      position: absolute;
      width: 250px;
      height: 1px;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0 auto;
      background: #6D7278; }
  .diagnostics__text {
    max-width: 730px;
    margin: 0 auto 30px;
    color: #4b5563;
    font-size: 16px;
    line-height: 1.5; }
  .diagnostics__collection {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding-bottom: 70px; }
  .diagnostics__grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    cursor: pointer;
    text-decoration: none;
    display: block; }
    .diagnostics__grid-item:hover .diagnostics__info {
      opacity: 1; }
  .diagnostics__image {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
    border-radius: 16px;
    transition: transform 0.3s ease; }
  .diagnostics__grid-item:hover .diagnostics__image {
    transform: scale(1.05); }
  .diagnostics__info {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 16px;
    backdrop-filter: blur(2px); }
  .diagnostics__info-title {
    font-size: 20px;
    line-height: 1.4;
    color: #008BD0;
    padding-bottom: 15px;
    margin-bottom: 15px;
    position: relative;
    font-weight: 700;
    text-align: center; }
    .diagnostics__info-title::after {
      content: '';
      bottom: 0;
      position: absolute;
      height: 2px;
      width: 60px;
      background: #008BD0;
      margin: 0 auto;
      left: 0;
      right: 0; }
  .diagnostics__info-text {
    font-weight: 600;
    font-size: 14px;
    color: #4b5563;
    margin: 0;
    line-height: 1.4;
    text-align: center; }

@media (max-width: 992px) {
  .diagnostics {
    padding: 40px 0; }
  .diagnostics__title {
    font-size: 28px;
    line-height: 40px; }
  .diagnostics__title::after {
    width: 180px; }
  .diagnostics__text {
    font-size: 15px;
    padding: 0 20px; }
  .diagnostics__collection {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px; }
  .diagnostics__image {
    height: 300px; }
  .diagnostics__info-title {
    font-size: 18px; }
  .diagnostics__info-text {
    font-size: 13px; } }

@media (max-width: 768px) {
  .diagnostics {
    padding: 30px 0; }
  .diagnostics__title {
    font-size: 24px;
    line-height: 34px;
    padding-bottom: 16px;
    margin-bottom: 16px; }
  .diagnostics__title::after {
    width: 120px; }
  .diagnostics__text {
    font-size: 14px;
    margin-bottom: 25px;
    padding: 0 15px; }
  .diagnostics__collection {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-bottom: 30px; }
  .diagnostics__image {
    height: 280px; }
  .diagnostics__info {
    padding: 15px; }
  .diagnostics__info-title {
    font-size: 18px;
    padding-bottom: 12px;
    margin-bottom: 12px; }
  .diagnostics__info-text {
    font-size: 13px; } }

@media (max-width: 480px) {
  .diagnostics__title {
    font-size: 22px; }
  .diagnostics__image {
    height: 250px; }
  .diagnostics__info-title {
    font-size: 16px; }
  .diagnostics__info-text {
    font-size: 12px; } }

@keyframes mobileAppFadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px); }
  to {
    opacity: 1;
    transform: translateX(0); } }

@keyframes mobileAppFadeInRight {
  from {
    opacity: 0;
    transform: translateX(50px); }
  to {
    opacity: 1;
    transform: translateX(0); } }

@keyframes mobileAppFadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

@keyframes mobileAppImageFloat {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(-10px); }
  100% {
    transform: translateY(0); } }

@keyframes mobileAppBtnPulse {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.05); }
  100% {
    transform: scale(1); } }

.mobile-application--animate .mobile-application__inner-left {
  animation: mobileAppFadeInLeft 0.8s ease forwards; }

.mobile-application--animate .mobile-application__inner-right {
  animation: mobileAppFadeInRight 0.8s ease forwards; }

.mobile-application__image--float {
  animation: mobileAppImageFloat 3s ease-in-out infinite; }

.mobile-application__btn--pulse {
  animation: mobileAppBtnPulse 0.3s ease; }

@media (max-width: 992px) {
  .mobile-application {
    height: auto;
    padding: 40px 0; }
  .mobile-application__inner-left {
    width: 100%;
    height: auto;
    min-height: 300px; }
  .mobile-application__inner-right {
    width: 100%;
    padding: 30px;
    text-align: center; }
  .mobile-application__inner-right-application {
    justify-content: center; } }

@media (max-width: 768px) {
  .mobile-application {
    height: auto;
    padding: 30px 0; }
  .mobile-application__inner {
    display: flex;
    flex-direction: column;
    justify-content: center; }
  .mobile-application__inner-left {
    min-height: 250px; }
  .mobile-application__inner-left-image {
    padding: 20px; }
  .mobile-application__inner-right {
    padding: 20px; }
  .mobile-application__inner-right-h3 {
    font-size: 14px;
    margin-bottom: 12px; }
  .mobile-application__inner-right-h2 {
    margin-bottom: 16px; }
  .mobile-application__inner-right-p {
    font-size: 14px;
    margin-bottom: 24px; }
  .mobile-application__inner-right-application {
    flex-direction: column;
    gap: 15px; }
    .mobile-application__inner-right-application-btn {
      width: 100%;
      margin: 0;
      text-align: center; } }

@media (max-width: 480px) {
  .mobile-application__inner-left {
    min-height: 200px; }
  .mobile-application__inner-right-h2 {
    font-size: 24px; }
  .mobile-application__inner-right-application-btn {
    padding: 10px 16px;
    font-size: 14px; } }

@media (min-width: 1400px) {
  .mobile-application__inner {
    max-width: 1320px;
    margin: 0 auto; } }

.mobile-application {
  width: 100%;
  height: 100vh; }
  .mobile-application__inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row; }
  .mobile-application__inner-left {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center; }
    .mobile-application__inner-left-image {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      object-fit: contain;
      padding: 10px; }
  .mobile-application__inner-right {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    padding: 20px; }
    .mobile-application__inner-right-h3 {
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      font-family: 'Ubuntu', sans-serif;
      margin-bottom: 16px;
      color: lightgray; }
    .mobile-application__inner-right-h2 {
      font-size: 44px;
      font-weight: 700;
      font-family: 'Ubuntu', sans-serif;
      margin-bottom: 20px; }
    .mobile-application__inner-right-p {
      font-size: 16px;
      font-weight: 400;
      font-family: 'Ubuntu', sans-serif;
      margin-bottom: 20px;
      word-wrap: break-word; }
    .mobile-application__inner-right-application {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center; }
      .mobile-application__inner-right-application-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
        background: #000;
        color: #fff;
        padding: 12px 20px;
        margin: 0 20px;
        border-radius: 999px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease; }
        .mobile-application__inner-right-application-btn:hover {
          background: #333;
          transform: translateY(-2px); }

@media (max-width: 768px) {
  .mobile-application {
    height: auto;
    padding: 50px 0; }
  .mobile-application__inner {
    flex-direction: column; }
  .mobile-application__inner-left,
  .mobile-application__inner-right {
    width: 100%; }
  .mobile-application__inner-right-application-btn {
    margin: 0 10px;
    padding: 10px 16px;
    font-size: 14px; } }

@keyframes workPathFadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

@keyframes workPathScale {
  from {
    transform: scale(1); }
  to {
    transform: scale(1.05); } }

@keyframes workPathImageFloat {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(-5px); }
  100% {
    transform: translateY(0); } }

.work-path--animate .work-path__item {
  animation: workPathFadeInUp 0.6s ease forwards; }
  .work-path--animate .work-path__item:nth-child(1) {
    animation-delay: 0.15s;
    opacity: 0; }
  .work-path--animate .work-path__item:nth-child(2) {
    animation-delay: 0.3s;
    opacity: 0; }
  .work-path--animate .work-path__item:nth-child(3) {
    animation-delay: 0.45s;
    opacity: 0; }

.work-path__item--hover-scale {
  transition: transform 0.3s ease; }
  .work-path__item--hover-scale:hover {
    transform: scale(1.05); }

.work-path__item-img--float {
  animation: workPathImageFloat 3s ease-in-out infinite; }

@media (max-width: 992px) {
  .work-path {
    padding: 60px 0 20px;
    height: auto; }
  .work-path__item {
    padding-bottom: 20px; }
  .work-path__item-title {
    font-size: 16px; }
  .work-path__item-img {
    width: 60px;
    height: 60px; } }

@media (max-width: 576px) {
  .work-path {
    padding: 40px 0;
    height: auto; }
  .work-path__item {
    padding-bottom: 20px; }
  .work-path__item-img {
    width: 50px;
    height: 50px;
    margin-bottom: 12px; }
  .work-path__item-title {
    font-size: 16px;
    margin-bottom: 6px; }
  .work-path__item-text {
    font-size: 13px;
    max-width: 100%;
    padding: 0 20px; } }

@media (max-width: 375px) {
  .work-path__title {
    font-size: 24px;
    line-height: 32px; }
  .work-path__item-img {
    width: 45px;
    height: 45px; }
  .work-path__item-title {
    font-size: 15px; }
  .work-path__item-text {
    font-size: 12px; } }

@media (min-width: 1200px) {
  .work-path__items {
    max-width: 1100px;
    margin: 0 auto; } }

.work-path {
  padding: 80px 0 30px;
  height: auto;
  background: #ffffff; }
  .work-path__title {
    text-align: center;
    color: #111827;
    font-weight: 700;
    font-size: 36px;
    line-height: 50px;
    margin-bottom: 40px; }
    @media (max-width: 992px) {
      .work-path__title {
        font-size: 32px;
        line-height: 44px;
        margin-bottom: 30px; } }
    @media (max-width: 576px) {
      .work-path__title {
        font-size: 28px;
        line-height: 38px;
        margin-bottom: 25px; } }
  .work-path__items {
    display: flex;
    gap: 30px; }
    @media (max-width: 992px) {
      .work-path__items {
        gap: 20px; } }
    @media (max-width: 576px) {
      .work-path__items {
        flex-direction: column;
        gap: 40px; } }
  .work-path__item {
    flex: 1;
    position: relative;
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative; }
    .work-path__item:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 40px;
      right: -15px;
      width: 30px;
      height: 2px;
      background: #e5e7eb; }
      @media (max-width: 992px) {
        .work-path__item:not(:last-child)::after {
          display: none; } }
      @media (max-width: 576px) {
        .work-path__item:not(:last-child)::after {
          display: none; } }
  .work-path__item-img {
    margin-bottom: 14px;
    transition: transform 0.3s ease; }
    .work-path__item-img:hover {
      transform: scale(1.05); }
  .work-path__item-title {
    color: #008BD0;
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 700; }
  .work-path__item-text {
    line-height: 1.4;
    color: #4b5563;
    font-size: 14px;
    max-width: 250px; }
    @media (max-width: 992px) {
      .work-path__item-text {
        font-size: 13px;
        max-width: 200px; } }
.gallery {
  padding: 80px 0 90px; }
  .gallery__buttons {
    text-align: center;
    margin-bottom: 40px; }
  .gallery__btn {
    margin: 0 14px;
    background-color: transparent;
    border: 1px solid #000000;
    border-radius: 20px;
    padding: 6px 16px;
    color: #8F8D8D;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer; }
  .gallery .mixitup-control-active {
    background-color: #FFEF35;
    border: 1px solid #FFEF35;
    color: #2c3e50; }
  .gallery__items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 30px 34px; }
  .gallery__item:first-child {
    grid-column: span 2;
    grid-row: span 2; }
  .gallery__item img {
    object-fit: cover;
    width: 100%;
    max-height: 1150px;
    height: 100%; }
  .gallery.gallery-page .gallery__item:nth-child(8) {
    grid-column: span 2;
    grid-row: span 2; }

.mobile_application {
  width: 100%;
  height: 100vh; }
  .mobile_application__inner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row; }
    .mobile_application__inner-left {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center; }
      .mobile_application__inner-left-image {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        object-fit: contain;
        padding: 10px; }
    .mobile_application__inner-right {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
      padding: 20px; }
      .mobile_application__inner-right-h3 {
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        font-family: 'Ubuntu', sans-serif;
        margin-bottom: 16px;
        color: lightgray; }
      .mobile_application__inner-right-h2 {
        font-size: 44px;
        font-weight: 700;
        font-family: 'Ubuntu', sans-serif;
        margin-bottom: 20px; }
      .mobile_application__inner-right-p {
        font-size: 16px;
        font-weight: 400;
        font-family: 'Ubuntu', sans-serif;
        margin-bottom: 20px;
        word-wrap: break-word; }
      .mobile_application__inner-right-application {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center; }
        .mobile_application__inner-right-application-btn {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 50%;
          background: #000;
          color: #fff;
          padding: 12px 20px;
          margin: 0 20px;
          border-radius: 999px;
          font-weight: 600;
          text-decoration: none; }

@keyframes featuresFadeInUp {
  from {
    opacity: 0;
    transform: translateY(60px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

@keyframes featuresIconScale {
  from {
    transform: scale(1); }
  to {
    transform: scale(1.1); } }

@keyframes featuresIconPulse {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.05); }
  100% {
    transform: scale(1); } }

.features--animate .features__item {
  animation: featuresFadeInUp 0.6s ease forwards; }
  .features--animate .features__item:nth-child(1) {
    animation-delay: 0.1s;
    opacity: 0; }
  .features--animate .features__item:nth-child(2) {
    animation-delay: 0.2s;
    opacity: 0; }
  .features--animate .features__item:nth-child(3) {
    animation-delay: 0.3s;
    opacity: 0; }
  .features--animate .features__item:nth-child(4) {
    animation-delay: 0.4s;
    opacity: 0; }

.features__item--hover-scale:hover {
  transform: scale(1.03);
  transition: transform 0.3s ease; }

.features__icon--pulse {
  animation: featuresIconPulse 0.5s ease; }

.features__item.in-view {
  opacity: 1;
  transform: translateY(0); }

@media (max-width: 992px) {
  .features {
    padding: 40px 0;
    height: auto; }
  .features__header {
    margin-bottom: 30px;
    margin-top: 30px; }
  .features__description {
    max-width: 90%; }
  .features__item {
    padding: 25px 15px; } }

@media (max-width: 576px) {
  .features {
    padding: 30px 0;
    height: auto; }
  .features__header {
    margin-bottom: 25px;
    margin-top: 25px; }
  .features__description {
    max-width: 100%;
    padding: 0 15px; }
  .features__item {
    padding: 20px 15px; }
  .features__icon {
    width: 50px;
    height: 50px; }
    .features__icon img {
      width: 24px;
      height: 24px; }
  .features__item-title {
    font-size: 16px; } }

@media (max-width: 375px) {
  .features__title {
    font-size: 24px; }
  .features__subtitle {
    font-size: 12px; }
  .features__description {
    font-size: 13px; }
  .features__item-title {
    font-size: 15px; } }

@media (min-width: 1400px) {
  .features__list {
    max-width: 1200px;
    margin: 0 auto; } }

.features {
  width: 100%;
  padding: 10px 0;
  text-align: center;
  height: auto;
  background: #ffffff; }
  .features__header {
    margin-bottom: 50px;
    margin-top: 50px; }
  .features__subtitle {
    font-size: 18px;
    letter-spacing: 1.5px;
    color: #9a9a9a;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: 600; }
    @media (max-width: 992px) {
      .features__subtitle {
        font-size: 16px; } }
    @media (max-width: 576px) {
      .features__subtitle {
        font-size: 14px; } }
  .features__title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #000000; }
    @media (max-width: 992px) {
      .features__title {
        font-size: 36px; } }
    @media (max-width: 576px) {
      .features__title {
        font-size: 28px; } }
  .features__description {
    font-size: 18px;
    color: #555555;
    max-width: 80%;
    margin: 0 auto;
    line-height: 1.5; }
    @media (max-width: 992px) {
      .features__description {
        font-size: 16px; } }
    @media (max-width: 576px) {
      .features__description {
        font-size: 14px; } }
  .features__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px; }
    @media (max-width: 992px) {
      .features__list {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
    @media (max-width: 576px) {
      .features__list {
        grid-template-columns: 1fr; } }
  .features__item {
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 20px;
    padding: 30px 20px;
    transition: all 0.3s ease; }
    .features__item:hover {
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
      transform: translateY(-5px); }
  .features__icon {
    background-color: #f5f5f5;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all 0.3s ease; }
    .features__icon:hover {
      transform: scale(1.1); }
    .features__icon img {
      width: 30px;
      height: 30px; }
  .features__item-title {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    line-height: 1.4; }

.features__container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto; }
  @media (min-width: 576px) {
    .features__container {
      max-width: 540px; } }
  @media (min-width: 768px) {
    .features__container {
      max-width: 720px; } }
  @media (min-width: 992px) {
    .features__container {
      max-width: 960px; } }
  @media (min-width: 1200px) {
    .features__container {
      max-width: 1140px; } }
  @media (min-width: 1400px) {
    .features__container {
      max-width: 1320px; } }
@keyframes contactFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

@keyframes contactFadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px); }
  to {
    opacity: 1;
    transform: translateX(0); } }

@keyframes contactFadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px); }
  to {
    opacity: 1;
    transform: translateX(0); } }

@keyframes contactBtnPulse {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.05); }
  100% {
    transform: scale(1); } }

@keyframes contactIconBounce {
  0%, 100% {
    transform: translateY(0); }
  50% {
    transform: translateY(-5px); } }

.contact-form-section--animate .contact-form-info {
  animation: contactFadeInLeft 0.6s ease forwards; }

.contact-form-section--animate .contact-form-block {
  animation: contactFadeInRight 0.6s ease forwards; }

.contact-form-detail--animate {
  animation: contactFadeIn 0.5s ease forwards;
  opacity: 0; }
  .contact-form-detail--animate:nth-child(1) {
    animation-delay: 0.15s; }
  .contact-form-detail--animate:nth-child(2) {
    animation-delay: 0.3s; }
  .contact-form-detail--animate:nth-child(3) {
    animation-delay: 0.45s; }

.submit-btn--pulse {
  animation: contactBtnPulse 0.3s ease; }

.detail-icon--bounce {
  animation: contactIconBounce 2s ease-in-out infinite; }

@media (min-width: 993px) {
  .contact-form-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px; }
  .contact-form-info {
    padding: 48px;
    border-right: 1px solid rgba(0, 0, 0, 0.05); }
  .contact-form-block {
    padding: 48px;
    border-left: none; }
  .form-row {
    grid-template-columns: 1fr 1fr;
    gap: 20px; } }

@media (min-width: 769px) and (max-width: 992px) {
  .contact-form-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px; }
  .contact-form-info {
    padding: 32px; }
  .contact-form-block {
    padding: 32px; }
  .contact-form-title {
    font-size: 28px; }
  .contact-form-subtitle {
    font-size: 14px;
    margin-bottom: 30px; }
  .contact-form-details {
    gap: 24px; }
  .contact-form-detail {
    gap: 12px; }
    .contact-form-detail .detail-icon {
      width: 40px;
      height: 40px;
      font-size: 20px; }
    .contact-form-detail h4 {
      font-size: 12px; }
    .contact-form-detail p {
      font-size: 14px; }
  .form-row {
    grid-template-columns: 1fr 1fr;
    gap: 16px; }
  .submit-btn {
    padding: 12px 24px;
    font-size: 14px; } }

@media (max-width: 768px) {
  .contact-form-section {
    padding: 40px 0; }
  .contact-form-wrapper {
    display: block;
    margin: 0;
    border-radius: 12px; }
  .contact-form-info {
    padding: 24px;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
  .contact-form-block {
    padding: 24px; }
  .contact-form-title {
    font-size: 24px;
    margin-bottom: 8px; }
  .contact-form-subtitle {
    font-size: 14px;
    margin-bottom: 24px; }
  .contact-form-details {
    gap: 20px; }
  .contact-form-detail {
    gap: 12px; }
    .contact-form-detail .detail-icon {
      width: 40px;
      height: 40px;
      font-size: 20px; }
    .contact-form-detail h4 {
      font-size: 12px; }
    .contact-form-detail p {
      font-size: 14px; }
  .form-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-left: 0;
    margin-left: 0; }
  .form-group,
  .form-group-full {
    width: 100%;
    padding-left: 0;
    margin-left: 0; }
    .form-group label,
    .form-group-full label {
      padding-left: 0;
      margin-left: 0; }
    .form-group input,
    .form-group textarea,
    .form-group-full input,
    .form-group-full textarea {
      width: 100%;
      padding: 10px 14px;
      font-size: 14px;
      box-sizing: border-box;
      margin-left: 0;
      padding-left: 14px; }
  .contact-form {
    gap: 16px;
    width: 100%;
    padding-left: 0;
    margin-left: 0; }
  .submit-btn {
    padding: 12px 20px;
    font-size: 14px;
    width: 100%; }
  .container {
    padding: 0 15px;
    width: 100%;
    overflow-x: hidden; } }

@media (max-width: 480px) {
  .contact-form-section {
    padding: 30px 0; }
  .contact-form-info,
  .contact-form-block {
    padding: 20px; }
  .contact-form-title {
    font-size: 22px; }
  .contact-form-subtitle {
    font-size: 13px;
    margin-bottom: 20px; }
  .contact-form-detail {
    flex-direction: column;
    align-items: center;
    text-align: center; }
    .contact-form-detail .detail-icon {
      margin-bottom: 8px; }
  .form-group input,
  .form-group textarea,
  .form-group-full input,
  .form-group-full textarea {
    padding: 8px 12px;
    font-size: 13px;
    padding-left: 12px; }
  .submit-btn {
    padding: 10px 16px;
    font-size: 13px; } }

.contact-form-section {
  padding: 80px 0;
  background: #f8f9fa; }

.contact-form-wrapper {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto; }

.contact-form-info {
  background: #ffffff;
  height: 100%; }

.contact-form-title {
  font-family: 'Ubuntu', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 12px; }

.contact-form-subtitle {
  font-size: 16px;
  color: #6b7280;
  margin-bottom: 40px; }

.contact-form-details {
  display: flex;
  flex-direction: column;
  gap: 32px; }

.contact-form-detail {
  display: flex;
  gap: 16px;
  align-items: flex-start; }
  .contact-form-detail .detail-icon {
    width: 48px;
    height: 48px;
    background: #f8f9fa;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0; }
  .contact-form-detail h4 {
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px; }
  .contact-form-detail p {
    font-size: 16px;
    color: #4b5563;
    font-weight: 500;
    margin: 0;
    word-break: break-word; }
  .contact-form-detail a {
    color: #008BD0;
    text-decoration: none; }
    .contact-form-detail a:hover {
      color: #0073B0; }

.contact-form-block {
  background: #ffffff;
  height: 100%; }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0; }
  .form-group label {
    font-size: 14px;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 4px; }
  .form-group input {
    padding: 12px 16px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 15px;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease; }
    .form-group input:focus {
      outline: none;
      border-color: #008BD0;
      box-shadow: 0 0 0 3px rgba(0, 139, 208, 0.1); }

.form-group-full {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0; }
  .form-group-full label {
    font-size: 14px;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 4px; }
  .form-group-full input,
  .form-group-full textarea {
    padding: 12px 16px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 15px;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease; }
    .form-group-full input:focus,
    .form-group-full textarea:focus {
      outline: none;
      border-color: #008BD0;
      box-shadow: 0 0 0 3px rgba(0, 139, 208, 0.1); }
  .form-group-full textarea {
    resize: vertical;
    min-height: 120px;
    font-family: 'Ubuntu', sans-serif; }

.submit-btn {
  background: #008BD0;
  color: white;
  border: none;
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  margin-top: 8px;
  transition: all 0.3s ease;
  box-sizing: border-box; }
  .submit-btn:hover {
    background: #0073B0;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 139, 208, 0.3); }

.messages {
  margin: 16px 0; }

.alert {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px; }
  .alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid rgba(21, 87, 36, 0.2); }
  .alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid rgba(114, 28, 36, 0.2); }

.about-hero {
  padding: 40px 0;
  background: #f8f9fa;
  margin-top: 20px; }
  .about-hero__card {
    max-width: 1200px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); }
  .about-hero__image {
    width: 100%;
    height: 300px;
    overflow: hidden; }
    .about-hero__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block; }
    @media (max-width: 768px) {
      .about-hero__image {
        height: 200px; } }
    @media (max-width: 480px) {
      .about-hero__image {
        height: 150px; } }
  .about-hero__container {
    padding: 40px 20px;
    /* 20px отступы слева и справа */ }
    @media (max-width: 768px) {
      .about-hero__container {
        padding: 30px 20px; } }
    @media (max-width: 480px) {
      .about-hero__container {
        padding: 20px; } }
  .about-hero__badge {
    margin-bottom: 24px; }
    .about-hero__badge span {
      display: inline-block;
      padding: 6px 16px;
      background: linear-gradient(135deg, #1a73e8, #0d47a1);
      color: white;
      font-size: 12px;
      font-weight: 600;
      border-radius: 30px;
      text-transform: uppercase;
      box-shadow: 0 2px 8px rgba(26, 115, 232, 0.3); }
  .about-hero__content {
    width: 100%; }
  .about-hero__title {
    font-size: 42px;
    font-weight: 800;
    color: #1a202c;
    margin-bottom: 20px;
    line-height: 1.2;
    width: 100%; }
    @media (max-width: 992px) {
      .about-hero__title {
        font-size: 36px; } }
    @media (max-width: 768px) {
      .about-hero__title {
        font-size: 28px; } }
    @media (max-width: 480px) {
      .about-hero__title {
        font-size: 24px; } }
  .about-hero__description {
    font-size: 16px;
    color: #4a5568;
    line-height: 1.6;
    margin-bottom: 40px;
    width: 100%; }
    @media (max-width: 768px) {
      .about-hero__description {
        font-size: 14px;
        margin-bottom: 30px; } }
  .about-hero__stats {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 20px;
    padding-top: 30px;
    border-top: 1px solid #e8eaed;
    width: 100%; }
    @media (max-width: 992px) {
      .about-hero__stats {
        gap: 20px;
        flex-wrap: wrap; } }
    @media (max-width: 768px) {
      .about-hero__stats {
        flex-direction: column;
        gap: 15px; } }
.hero-stat {
  flex: 1;
  text-align: center;
  padding: 20px;
  background: #f8fafc;
  border-radius: 20px;
  transition: all 0.3s ease; }
  .hero-stat:hover {
    transform: translateY(-3px);
    background: white;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); }
  .hero-stat__icon {
    font-size: 32px;
    margin-bottom: 12px; }
    @media (max-width: 768px) {
      .hero-stat__icon {
        font-size: 28px; } }
  .hero-stat__number {
    font-size: 28px;
    font-weight: 800;
    color: #1a73e8;
    margin-bottom: 8px; }
    @media (max-width: 768px) {
      .hero-stat__number {
        font-size: 24px; } }
  .hero-stat__label {
    font-size: 13px;
    color: #64748b;
    line-height: 1.4; }
  @media (max-width: 768px) {
    .hero-stat {
      display: flex;
      align-items: center;
      text-align: left;
      gap: 16px;
      padding: 15px 20px; }
      .hero-stat .hero-stat__icon {
        margin-bottom: 0; } }
  @media (max-width: 480px) {
    .hero-stat {
      flex-direction: column;
      text-align: center; } }
.about-card {
  display: flex;
  align-items: center;
  gap: 60px;
  margin-bottom: 80px;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
  transition: all 0.4s ease; }
  .about-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1); }
  .about-card--reverse {
    flex-direction: row-reverse; }
  .about-card__content {
    flex: 1;
    padding: 50px; }
    @media (max-width: 768px) {
      .about-card__content {
        padding: 30px; } }
  .about-card__title {
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 20px;
    position: relative; }
    .about-card__title::before {
      content: '';
      position: absolute;
      left: 0;
      top: -10px;
      width: 50px;
      height: 3px;
      background: linear-gradient(90deg, #008BD0, #00B4DB);
      border-radius: 2px; }
    @media (max-width: 768px) {
      .about-card__title {
        font-size: 28px; } }
  .about-card__description {
    font-size: 16px;
    color: #4b5563;
    line-height: 1.7;
    margin-bottom: 30px; }
    .about-card__description p {
      margin-bottom: 15px; }
    .about-card__description ul {
      margin: 20px 0;
      padding-left: 20px; }
      .about-card__description ul li {
        margin-bottom: 10px;
        position: relative;
        padding-left: 20px; }
        .about-card__description ul li::before {
          content: '▹';
          position: absolute;
          left: 0;
          color: #008BD0; }
  .about-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    background: transparent;
    color: #008BD0;
    text-decoration: none;
    font-weight: 600;
    border-radius: 40px;
    border: 2px solid #008BD0;
    transition: all 0.3s ease; }
    .about-card__btn:hover {
      background: #008BD0;
      color: white;
      gap: 15px;
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0, 139, 208, 0.3); }
    .about-card__btn svg {
      transition: transform 0.3s ease; }
    .about-card__btn:hover svg {
      transform: translateX(5px); }
  .about-card__image {
    flex: 1; }
    .about-card__image img {
      width: 100%;
      height: 400px;
      object-fit: cover; }
      @media (max-width: 768px) {
        .about-card__image img {
          height: 250px; } }
  @media (max-width: 768px) {
    .about-card {
      flex-direction: column; }
      .about-card--reverse {
        flex-direction: column; }
      .about-card__content {
        order: 2; }
      .about-card__image {
        order: 1; } }
.presidium {
  margin-top: 60px;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  padding: 60px 0;
  border-radius: 40px; }
  .presidium__title {
    font-size: 36px;
    font-weight: 700;
    color: #111827;
    text-align: center;
    margin-bottom: 50px;
    position: relative; }
    .presidium__title::after {
      content: '';
      position: absolute;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 4px;
      background: linear-gradient(90deg, #008BD0, #00B4DB);
      border-radius: 2px; }
    @media (max-width: 768px) {
      .presidium__title {
        font-size: 28px; } }
  .presidium__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px; }
    @media (max-width: 576px) {
      .presidium__grid {
        grid-template-columns: 1fr; } }
.presidium-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.4s ease; }
  .presidium-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); }
  .presidium-card__image {
    height: 320px;
    overflow: hidden;
    position: relative; }
    .presidium-card__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease; }
    .presidium-card__image::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100px;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
      opacity: 0;
      transition: opacity 0.3s ease; }
  .presidium-card:hover .presidium-card__image img {
    transform: scale(1.08); }
  .presidium-card:hover .presidium-card__image::after {
    opacity: 1; }
  .presidium-card__content {
    padding: 25px;
    text-align: center; }
  .presidium-card__name {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px; }
  .presidium-card__position {
    font-size: 14px;
    font-weight: 600;
    color: #008BD0;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px; }
  .presidium-card__title {
    font-size: 13px;
    color: #4b5563;
    margin-bottom: 8px; }
  .presidium-card__degree {
    font-size: 12px;
    color: #6b7280;
    font-style: italic;
    margin-bottom: 20px; }
  .presidium-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    background: linear-gradient(135deg, #f8fafc, #ffffff);
    color: #008BD0;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border-radius: 30px;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 139, 208, 0.2); }
    .presidium-card__btn:hover {
      background: linear-gradient(135deg, #008BD0, #00B4DB);
      color: white;
      gap: 12px;
      border-color: transparent; }
    .presidium-card__btn svg {
      transition: transform 0.3s ease; }
    .presidium-card__btn:hover svg {
      transform: translateX(5px); }

.detail-page {
  padding: 60px 0; }
  .detail-page__back {
    margin-bottom: 30px; }
    .detail-page__back .back-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #008BD0;
      text-decoration: none;
      font-weight: 500;
      transition: all 0.3s ease; }
      .detail-page__back .back-link:hover {
        gap: 12px;
        color: #0066CC; }
      .detail-page__back .back-link svg {
        transition: transform 0.3s ease; }
      .detail-page__back .back-link:hover svg {
        transform: translateX(-3px); }
  .detail-page__card {
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); }
    .detail-page__card--horizontal {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px; }
      @media (max-width: 768px) {
        .detail-page__card--horizontal {
          grid-template-columns: 1fr; } }
  .detail-page__image img {
    width: 100%;
    height: 100%;
    object-fit: cover; }
  .detail-page__content {
    padding: 40px; }
  .detail-page__title {
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 20px; }
  .detail-page__position {
    font-size: 18px;
    font-weight: 600;
    color: #008BD0;
    margin-bottom: 8px; }
  .detail-page__subtitle {
    font-size: 16px;
    color: #4b5563;
    margin-bottom: 8px; }
  .detail-page__degree {
    font-size: 14px;
    color: #6b7280;
    font-style: italic;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb; }
  .detail-page__description, .detail-page__bio {
    font-size: 16px;
    color: #4b5563;
    line-height: 1.6; }

@keyframes pulse {
  0%, 100% {
    opacity: 1; }
  50% {
    opacity: 0.3; } }

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg); }
  50% {
    transform: translateY(-20px) rotate(10deg); } }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: linear-gradient(135deg, #008BD0, #0066CC);
  color: white;
  text-decoration: none;
  font-weight: 600;
  border-radius: 40px;
  transition: all 0.3s ease; }
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 139, 208, 0.3);
    gap: 12px; }
  .btn-primary svg {
    transition: transform 0.3s ease; }
  .btn-primary:hover svg {
    transform: translateX(3px); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 31px;
  background: transparent;
  color: #008BD0;
  text-decoration: none;
  font-weight: 600;
  border-radius: 40px;
  border: 2px solid #008BD0;
  transition: all 0.3s ease; }
  .btn-outline:hover {
    background: #008BD0;
    color: white;
    transform: translateY(-2px);
    gap: 12px; }
  .btn-outline svg {
    transition: transform 0.3s ease; }
  .btn-outline:hover svg {
    transform: translateX(3px); }

.floating-shape {
  position: absolute;
  background: rgba(0, 139, 208, 0.1);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite; }
  .floating-shape.shape-1 {
    width: 100px;
    height: 100px;
    top: -30px;
    right: -30px;
    animation-delay: 0s; }
  .floating-shape.shape-2 {
    width: 60px;
    height: 60px;
    bottom: -20px;
    left: -20px;
    animation-delay: 1s; }
  .floating-shape.shape-3 {
    width: 40px;
    height: 40px;
    top: 40%;
    right: -15px;
    animation-delay: 2s; }

@media (max-width: 992px) {
  .about-hero {
    padding: 60px 0 40px;
    text-align: center; }
  .about-hero__stats,
  .about-hero__buttons {
    justify-content: center; }
  .about-card__image img {
    height: 300px; } }

@media (max-width: 768px) {
  .about-hero__title {
    font-size: 36px; }
  .about-card__content {
    padding: 30px; }
  .about-card__title {
    font-size: 24px; }
  .presidium__title {
    font-size: 28px; }
  .detail-page__card--horizontal {
    grid-template-columns: 1fr; }
  .detail-page__content {
    padding: 30px; }
  .detail-page__title {
    font-size: 28px; } }

@media (max-width: 576px) {
  .about-hero {
    padding: 40px 0 30px; }
  .about-hero__title {
    font-size: 28px; }
  .about-hero__stats {
    gap: 20px;
    flex-wrap: wrap; }
  .hero-stat__number {
    font-size: 24px; }
  .hero-stat__label {
    font-size: 12px; }
  .about-card__content {
    padding: 20px; }
  .about-card__title {
    font-size: 22px; }
  .about-card__description {
    font-size: 14px; }
  .presidium__grid {
    grid-template-columns: 1fr; }
  .presidium-card__image {
    height: 250px; }
  .btn-primary,
  .btn-outline {
    padding: 10px 20px;
    font-size: 14px; }
  .detail-page__content {
    padding: 20px; }
  .detail-page__title {
    font-size: 24px; } }

@media (min-width: 1400px) {
  .about-hero__container {
    max-width: 1320px; } }

/* ==========================================
   ВСЕ ПЕРЕМЕННЫЕ ДЛЯ CONTACT_BLOCK
   ========================================== */
/* ==========================================
   ВСЕ ПЕРЕМЕННЫЕ ДЛЯ CONTACT_BLOCK
   ========================================== */
/* ==========================================
   БРЕЙКПОИНТЫ И МЕДИА-ЗАПРОСЫ
   ========================================== */
/* ==========================================
   БРЕЙКПОИНТЫ И МЕДИА-ЗАПРОСЫ
   ========================================== */
/* ==========================================
   ВСЕ ПЕРЕМЕННЫЕ ДЛЯ CONTACT_BLOCK
   ========================================== */
/* ==========================================
   ВСЕ ПЕРЕМЕННЫЕ ДЛЯ CONTACT_BLOCK
   ========================================== */
/* ==========================================
   БРЕЙКПОИНТЫ И МЕДИА-ЗАПРОСЫ
   ========================================== */
@keyframes cb-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(43, 141, 203, 0.7); }
  50% {
    box-shadow: 0 0 0 15px rgba(153, 40, 89, 0.3); }
  100% {
    box-shadow: 0 0 0 0 rgba(43, 141, 203, 0); } }

@keyframes cb-spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes cb-wobble {
  0%, 100% {
    transform: rotate(0deg); }
  25% {
    transform: rotate(-10deg); }
  75% {
    transform: rotate(10deg); } }

@keyframes cb-blink {
  0%, 100% {
    opacity: 1; }
  50% {
    opacity: 0.3; } }

@keyframes cb-slide-in {
  from {
    opacity: 0;
    transform: translateX(-20px); }
  to {
    opacity: 1;
    transform: translateX(0); } }

@keyframes cb-fade-in {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.contact-fab-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.5s ease ease; }
  .contact-fab-container.visible {
    opacity: 1;
    transform: scale(1); }
  @media (max-width: 768px) {
    .contact-fab-container {
      bottom: 25px;
      right: 25px; } }
  @media (max-width: 480px) {
    .contact-fab-container {
      bottom: 20px;
      right: 20px; } }
.contact-fab-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2B8DCB, #992859);
  box-shadow: 0 4px 20px rgba(43, 141, 203, 0.3);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) ease;
  position: relative;
  color: #ffffff;
  font-size: 28px;
  cursor: pointer;
  border: none;
  animation: cb-pulse 2s ease-in-out infinite 0s; }
  .contact-fab-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(43, 141, 203, 0.4); }
  .contact-fab-btn.active i {
    animation: cb-spin 0.5s ease 1 0s; }
  .contact-fab-btn i {
    animation: cb-wobble 2s ease-in-out infinite 0s;
    transition: transform 0.3s ease; }
  @media (max-width: 768px) {
    .contact-fab-btn {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      font-size: 24px; } }
  @media (max-width: 480px) {
    .contact-fab-btn {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      font-size: 20px; } }
.notification-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -5px;
  right: -5px;
  background: #992859;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid #ffffff;
  animation: cb-blink 1.5s ease-in-out infinite 0s; }

.contact-menu {
  position: absolute;
  bottom: 75px;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8) translateY(20px);
  transform-origin: bottom right;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) ease; }
  .contact-menu.open {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0); }
  @media (max-width: 768px) {
    .contact-menu {
      bottom: 70px; } }
  @media (max-width: 480px) {
    .contact-menu {
      bottom: 65px; } }
.contact-menu-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #ffffff;
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(153, 40, 89, 0.2);
  min-width: 220px;
  border-top: 3px solid #2B8DCB; }
  @media (max-width: 768px) {
    .contact-menu-items {
      min-width: 200px;
      padding: 12px; } }
  @media (max-width: 480px) {
    .contact-menu-items {
      min-width: 180px;
      padding: 8px;
      gap: 8px; } }
.contact-menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  text-decoration: none;
  color: #2c3e50;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) ease;
  background: #f8f9fa;
  position: relative;
  animation: cb-slide-in 0.3s ease forwards;
  opacity: 0;
  transform: translateX(-20px); }
  .contact-menu.open .contact-menu-item:nth-child(1) {
    animation-delay: 0.05s; }
  .contact-menu.open .contact-menu-item:nth-child(2) {
    animation-delay: 0.1s; }
  .contact-menu.open .contact-menu-item:nth-child(3) {
    animation-delay: 0.15s; }
  .contact-menu.open .contact-menu-item:nth-child(4) {
    animation-delay: 0.2s; }
  .contact-menu.open .contact-menu-item:nth-child(5) {
    animation-delay: 0.25s; }
  .contact-menu.open .contact-menu-item:nth-child(6) {
    animation-delay: 0.3s; }
  .contact-menu.open .contact-menu-item:nth-child(7) {
    animation-delay: 0.35s; }
  .contact-menu.open .contact-menu-item:nth-child(8) {
    animation-delay: 0.4s; }
  .contact-menu.open .contact-menu-item:nth-child(9) {
    animation-delay: 0.45s; }
  .contact-menu.open .contact-menu-item:nth-child(10) {
    animation-delay: 0.5s; }
  .contact-menu-item:hover {
    transform: translateX(5px);
    text-decoration: none;
    background: #e9ecef;
    border-left: 3px solid #992859; }
    .contact-menu-item:hover i {
      transform: scale(1.2); }
  .contact-menu-item i {
    font-size: 22px;
    width: 30px;
    text-align: center;
    transition: transform 0.3s ease; }
  .contact-menu-item[data-tooltip]:hover::after {
    content: "";
    position: absolute;
    right: 110%;
    background: #992859;
    color: #ffffff;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    animation: cb-fade-in 0.3s ease;
    content: attr(data-tooltip); }
  @media (max-width: 768px) {
    .contact-menu-item {
      padding: 8px 12px;
      font-size: 12px;
      gap: 8px; }
      .contact-menu-item i {
        font-size: 18px;
        width: 25px; } }
  @media (max-width: 480px) {
    .contact-menu-item {
      padding: 8px;
      font-size: 12px;
      gap: 8px; }
      .contact-menu-item i {
        font-size: 16px;
        width: 20px; } }
.contact-menu-item .fa-whatsapp {
  color: #25D366; }

.contact-menu-item .fa-telegram-plane {
  color: #0088cc; }

.contact-menu-item .fa-envelope {
  color: #ea4335; }

.contact-menu-item .fa-phone {
  color: #34a853; }

.contact-menu-item .fa-instagram {
  color: #E4405F; }

.contact-menu-item .fa-facebook {
  color: #1877f2; }

.contact-menu-item .fa-youtube {
  color: #ff0000; }

.contact-menu-item .fa-app-store {
  color: #007AFF; }

.contact-menu-item .fa-google-play {
  color: #34A853; }

.topic-detail .hero-section {
  height: 420px;
  background-size: cover;
  background-position: center;
  position: relative;
  border-radius: 0 0 16px 16px;
  overflow: hidden; }
  .topic-detail .hero-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.2)); }
  .topic-detail .hero-section .hero-content {
    position: absolute;
    bottom: 50px;
    left: 50px;
    z-index: 2;
    color: #ffffff; }
    .topic-detail .hero-section .hero-content h1 {
      font-size: 3.2rem;
      font-weight: 700;
      line-height: 1.1;
      margin: 0;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }

.topic-detail .content-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 4rem 1.5rem; }
  .topic-detail .content-wrapper .section-heading {
    font-size: 1.75rem;
    color: #2c3e50;
    margin-bottom: 2.5rem;
    font-weight: 600; }
  .topic-detail .content-wrapper .sections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 2rem; }
    .topic-detail .content-wrapper .sections-grid .section-card {
      background: #ffffff;
      padding: 2.25rem;
      border-radius: 16px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
      transition: all 0.4s ease; }
      .topic-detail .content-wrapper .sections-grid .section-card:hover {
        box-shadow: 0 12px 30px rgba(0, 139, 208, 0.12);
        transform: translateY(-8px); }
      .topic-detail .content-wrapper .sections-grid .section-card h3 {
        font-size: 1.5rem;
        color: #2c3e50;
        margin-bottom: 1.25rem;
        font-weight: 600; }
      .topic-detail .content-wrapper .sections-grid .section-card .section-content {
        color: #1f2937;
        line-height: 1.75;
        font-size: 1.05rem; }

.news {
  padding: 60px 0;
  background: #f9fafb; }
  .news__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; }
  .news__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px; }
  .news__title {
    font-size: 32px;
    font-weight: 700;
    color: #111827; }
  .news__all {
    font-size: 16px;
    color: #374151;
    text-decoration: none; }
    .news__all:hover {
      color: #000; }
  .news__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; }

.news-card {
  display: block;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  transition: 0.3s; }
  .news-card:hover {
    transform: translateY(-6px); }
  .news-card__image {
    height: 180px;
    overflow: hidden; }
    .news-card__image img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .news-card__content {
    padding: 20px; }
  .news-card__title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px; }
  .news-card__date {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 12px; }
  .news-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px; }
  .news-card__tag {
    padding: 6px 10px;
    background: #e5e7eb;
    border-radius: 20px;
    font-size: 12px; }

@media (max-width: 992px) {
  .news__grid {
    grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 600px) {
  .news__grid {
    grid-template-columns: 1fr; } }

.home-sections {
  background: #f5f5f5;
  padding: 2rem 1rem; }
  .home-sections__row {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between; }
    @media (max-width: 768px) {
      .home-sections__row {
        flex-direction: column;
        gap: 1.5rem; } }
  .home-sections__column {
    flex: 1;
    min-width: 200px;
    background: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); }
  .home-sections__title {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e3a5f;
    margin-top: 0;
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e0e0e0;
    letter-spacing: -0.2px; }
  .home-sections__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    padding: 0.6rem 0;
    border-bottom: 1px solid #eee;
    transition: all 0.2s ease; }
    .home-sections__link:hover {
      background-color: #f9f9f9;
      padding-left: 0.25rem; }
      .home-sections__link:hover .home-sections__icon {
        transform: translateX(3px); }
  .home-sections__text {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    color: #2c3e50;
    font-weight: 450; }
  .home-sections__icon {
    color: #999;
    font-size: 0.9rem;
    transition: transform 0.2s ease; }

@keyframes popularFadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

@keyframes popularPulse {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.05); }
  100% {
    transform: scale(1); } }

@keyframes popularGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 139, 208, 0.4); }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 139, 208, 0); }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 139, 208, 0); } }

@keyframes popularSpin {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }

.popular__button--animate-in {
  animation: popularFadeInUp 0.5s ease forwards; }

.popular__button--pulse {
  animation: popularPulse 0.3s ease; }

.popular__button--glow {
  animation: popularGlow 1.5s infinite; }

.popular__buttons--staggered .popular__button:nth-child(1) {
  animation: popularFadeInUp 0.5s ease forwards;
  animation-delay: 0.05s;
  opacity: 0; }

.popular__buttons--staggered .popular__button:nth-child(2) {
  animation: popularFadeInUp 0.5s ease forwards;
  animation-delay: 0.1s;
  opacity: 0; }

.popular__buttons--staggered .popular__button:nth-child(3) {
  animation: popularFadeInUp 0.5s ease forwards;
  animation-delay: 0.15s;
  opacity: 0; }

.popular__buttons--staggered .popular__button:nth-child(4) {
  animation: popularFadeInUp 0.5s ease forwards;
  animation-delay: 0.2s;
  opacity: 0; }

.popular__buttons--staggered .popular__button:nth-child(5) {
  animation: popularFadeInUp 0.5s ease forwards;
  animation-delay: 0.25s;
  opacity: 0; }

.popular__buttons--staggered .popular__button:nth-child(6) {
  animation: popularFadeInUp 0.5s ease forwards;
  animation-delay: 0.3s;
  opacity: 0; }

.popular__buttons--staggered .popular__button:nth-child(7) {
  animation: popularFadeInUp 0.5s ease forwards;
  animation-delay: 0.35s;
  opacity: 0; }

.popular__buttons--staggered .popular__button:nth-child(8) {
  animation: popularFadeInUp 0.5s ease forwards;
  animation-delay: 0.4s;
  opacity: 0; }

.popular__buttons--staggered .popular__button:nth-child(9) {
  animation: popularFadeInUp 0.5s ease forwards;
  animation-delay: 0.45s;
  opacity: 0; }

.popular__buttons--staggered .popular__button:nth-child(10) {
  animation: popularFadeInUp 0.5s ease forwards;
  animation-delay: 0.5s;
  opacity: 0; }

@media (max-width: 768px) {
  .popular__header {
    margin-bottom: 2rem; }
  .popular__buttons {
    gap: 0.625rem; } }

@media (max-width: 480px) {
  .popular {
    padding: 3rem 0; }
    .popular__header {
      margin-bottom: 1.5rem; }
    .popular__buttons {
      gap: 0.5rem; } }

@media (min-width: 1200px) {
  .popular__container {
    padding: 0 2rem; }
  .popular__buttons {
    gap: 1rem; } }

@media (min-width: 1600px) {
  .popular__container {
    max-width: 90rem; } }

.popular {
  background: #ffffff;
  padding: 4rem 0; }
  .popular__container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.5rem; }
  .popular__header {
    margin-bottom: 2.5rem; }
  .popular__title {
    font-weight: 700;
    color: #111827;
    margin-bottom: 1rem;
    line-height: 1.2;
    font-size: 2.5rem; }
    @media (max-width: 768px) {
      .popular__title {
        font-size: 2rem; } }
    @media (max-width: 480px) {
      .popular__title {
        font-size: 1.75rem; } }
  .popular__description {
    color: #4b5563;
    max-width: 48rem;
    line-height: 1.5;
    font-size: 1.25rem; }
    @media (max-width: 768px) {
      .popular__description {
        font-size: 1.125rem; } }
    @media (max-width: 480px) {
      .popular__description {
        font-size: 1rem; } }
  .popular__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem; }
  .popular__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    background: #008BD0;
    border-radius: 2rem;
    color: #FFD700;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    border: none;
    white-space: nowrap; }
    .popular__button:hover {
      background: #0073B0;
      color: #FFE44D;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 139, 208, 0.3); }
    .popular__button:active {
      transform: translateY(0);
      box-shadow: 0 2px 6px rgba(0, 139, 208, 0.2); }
    .popular__button:focus-visible {
      outline: 2px solid #008BD0;
      outline-offset: 2px; }
    @media (max-width: 480px) {
      .popular__button {
        white-space: normal;
        word-break: break-word;
        text-align: center;
        padding: 0.5rem 1rem;
        font-size: 0.875rem; } }
  .popular__empty {
    color: #4b5563;
    font-size: 1rem;
    padding: 1rem 0; }

.popular__button--active {
  background: #006699;
  color: #FFCC00;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); }
  .popular__button--active:hover {
    background: #005580;
    color: #FFD633; }

.popular__button--with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; }

.popular__button--large {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600; }

.popular__button--small {
  padding: 0.375rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500; }

.popular__button--outline {
  background: transparent;
  border: 2px solid #008BD0;
  color: #008BD0; }
  .popular__button--outline:hover {
    background: #008BD0;
    color: #FFD700; }

.events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px; }

@media (max-width: 992px) {
  .events-grid {
    grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 600px) {
  .events-grid {
    grid-template-columns: 1fr; } }

.upcoming-events {
  padding: 20px 0;
  background: #f9fafb; }

.event-card {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%; }
  .event-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.12); }
  .event-card__image {
    position: relative;
    height: 200px;
    overflow: hidden; }
    .event-card__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease; }
    .event-card__image:hover img {
      transform: scale(1.05); }
    .event-card__image .event-type-badge {
      position: absolute;
      top: 14px;
      left: 14px;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); }
    .event-card__image .masterclass {
      background: #e63946; }
    .event-card__image .webinar {
      background: #008BD0; }
    .event-card__image .meeting {
      background: #2c3e50; }
    .event-card__image .conference {
      background: #10b981; }
    .event-card__image .other {
      background: #6b7280; }
  .event-card__content {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    flex: 1; }
  .event-card__title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    color: #1f2937;
    margin-bottom: 12px; }
  .event-card__date {
    font-size: 14px;
    color: #008BD0;
    font-weight: 500;
    margin-bottom: 6px; }
  .event-card__location {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.4;
    margin-bottom: 14px; }
  .event-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    margin-bottom: 16px; }
    .event-card__tags .tag {
      background: #f1f5f9;
      color: #475569;
      font-size: 12px;
      padding: 4px 10px;
      border-radius: 20px;
      white-space: nowrap; }
  .event-card .btn {
    display: inline-block;
    text-align: center;
    padding: 8px 14px;
    font-size: 13px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: 0.2s; }
  .event-card .btn-primary {
    background: #008BD0;
    color: #fff; }
    .event-card .btn-primary:hover {
      background: #0070a8; }
  .event-card .btn-sm {
    width: fit-content; }

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 26px; }
  .section-header .section-title {
    font-size: 26px;
    font-weight: 700;
    color: #1f2937; }
  .section-header .btn-outline {
    border: 1px solid #d1d5db;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    color: #374151;
    text-decoration: none;
    transition: 0.2s; }
    .section-header .btn-outline:hover {
      background: #f9fafb; }

.association-fluid {
  width: 100%;
  background-color: #f5f5f5;
  color: #333;
  padding: 80px 5%;
  font-family: 'Inter', sans-serif; }
  .association-fluid .association-bg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 40px; }
    .association-fluid .association-bg .association-image {
      flex: 1 1 400px; }
      .association-fluid .association-bg .association-image img {
        width: 100%;
        border-radius: 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease; }
        .association-fluid .association-bg .association-image img:hover {
          transform: scale(1.03); }
    .association-fluid .association-bg .association-text {
      flex: 1 1 500px; }
      .association-fluid .association-bg .association-text .section-title {
        font-size: 34px;
        margin-bottom: 24px;
        font-weight: 700;
        color: #1f1f1f; }
      .association-fluid .association-bg .association-text p {
        font-size: 17px;
        line-height: 1.7;
        margin-bottom: 16px; }
      .association-fluid .association-bg .association-text .btn {
        margin-top: 20px;
        background-color: #4a4a4a;
        color: #fff;
        padding: 12px 28px;
        border-radius: 8px;
        text-decoration: none;
        transition: background 0.3s ease; }
        .association-fluid .association-bg .association-text .btn:hover {
          background-color: #333; }
  @media (max-width: 768px) {
    .association-fluid {
      padding: 60px 5%; }
      .association-fluid .association-bg {
        flex-direction: column;
        text-align: center; }
        .association-fluid .association-bg .association-image {
          margin-bottom: 30px; } }
.gallery {
  padding: 80px 0 90px; }
  .gallery__buttons {
    text-align: center;
    margin-bottom: 40px; }
  .gallery__btn {
    margin: 0 14px;
    background-color: transparent;
    border: 1px solid #000000;
    border-radius: 20px;
    padding: 6px 16px;
    color: #8F8D8D;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer; }
  .gallery .mixitup-control-active {
    background-color: #FFEF35;
    border: 1px solid #FFEF35;
    color: #2c3e50; }
  .gallery__items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 30px 34px; }
  .gallery__item:first-child {
    grid-column: span 2;
    grid-row: span 2; }
  .gallery__item img {
    object-fit: cover;
    width: 100%;
    max-height: 1150px;
    height: 100%; }
  .gallery.gallery-page .gallery__item:nth-child(8) {
    grid-column: span 2;
    grid-row: span 2; }

.top-doctors {
  padding: 5rem 2rem;
  background: #f9fafb; }
  .top-doctors .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px; }

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 3.5rem;
  flex-wrap: wrap;
  gap: 20px; }
  .section-header__left {
    flex: 1; }
  .section-header__right {
    flex-shrink: 0;
    display: flex;
    align-items: center; }
  .section-header .section-title {
    font-size: 2.75rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 1rem; }
  .section-header .section-subtitle {
    font-size: 1.15rem;
    color: #6b7280;
    max-width: 80%;
    margin: 0; }
  .section-header .btn-outline {
    display: inline-block;
    padding: 10px 24px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap; }
    .section-header .btn-outline:hover {
      background: #f9fafb;
      border-color: #008BD0;
      color: #008BD0; }

.doctors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: 2rem; }

.doctor-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  transition: all 0.4s ease;
  height: 100%;
  display: flex;
  flex-direction: column; }
  .doctor-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 12px 30px rgba(0, 139, 208, 0.12); }
  .doctor-card__image {
    position: relative;
    height: 290px;
    overflow: hidden; }
    .doctor-card__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease; }
    .doctor-card__image:hover img {
      transform: scale(1.1); }
  .doctor-card .doctor-position-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #008BD0;
    color: white;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0, 139, 208, 0.3); }
  .doctor-card__info {
    padding: 1.8rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column; }
  .doctor-card .doctor-name {
    font-size: 1.4rem;
    margin-bottom: 0.4rem;
    color: #2c3e50; }
  .doctor-card .doctor-specialization {
    color: #008BD0;
    font-weight: 600;
    margin-bottom: 0.8rem; }
  .doctor-card .doctor-experience {
    color: #6b7280;
    margin-bottom: 1.5rem; }
  .doctor-card .btn-sm {
    display: inline-block;
    text-align: center;
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: 0.2s;
    width: fit-content; }
  .doctor-card .btn-outline {
    border: 1px solid #d1d5db;
    color: #374151;
    background: transparent; }
    .doctor-card .btn-outline:hover {
      border-color: #008BD0;
      background: #008BD0;
      color: white; }

@media (max-width: 768px) {
  .section-header {
    flex-direction: column;
    align-items: flex-start; }
    .section-header__right {
      width: 100%; }
      .section-header__right .btn-outline {
        width: 100%;
        text-align: center; }
    .section-header .section-title {
      font-size: 2rem; }
    .section-header .section-subtitle {
      font-size: 1rem; }
  .doctors-grid {
    gap: 1.5rem; } }

input.form-control[readonly] {
  background-color: #f8f9fa;
  cursor: not-allowed; }

.contact-section {
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); }
  .contact-section .contact-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem; }
    @media (max-width: 992px) {
      .contact-section .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem; } }
  .contact-section .contact-info-block {
    background: white;
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); }
    .contact-section .contact-info-block .contact-title {
      font-size: 2rem;
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 0.5rem; }
    .contact-section .contact-info-block .contact-subtitle {
      font-size: 1rem;
      color: #008BD0;
      font-weight: 500;
      margin-bottom: 2rem; }
    .contact-section .contact-info-block .contact-details {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      margin-bottom: 2rem; }
    .contact-section .contact-info-block .contact-item {
      display: flex;
      gap: 1rem;
      align-items: flex-start; }
      .contact-section .contact-info-block .contact-item .contact-icon {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        background: rgba(0, 139, 208, 0.1);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #008BD0; }
      .contact-section .contact-info-block .contact-item .contact-text {
        flex: 1; }
        .contact-section .contact-info-block .contact-item .contact-text strong {
          display: block;
          color: #374151;
          font-size: 0.9rem;
          margin-bottom: 0.25rem; }
        .contact-section .contact-info-block .contact-item .contact-text p {
          color: #6b7280;
          margin: 0 0 0.5rem 0;
          line-height: 1.5; }
          .contact-section .contact-info-block .contact-item .contact-text p a {
            color: #008BD0;
            text-decoration: none;
            transition: color 0.2s; }
            .contact-section .contact-info-block .contact-item .contact-text p a:hover {
              color: #00699d;
              text-decoration: underline; }
          .contact-section .contact-info-block .contact-item .contact-text p .emergency-phone {
            color: #e63946;
            font-weight: 600;
            font-size: 1.1rem; }
    .contact-section .contact-info-block .contact-social {
      border-top: 1px solid #e5e7eb;
      padding-top: 1.5rem; }
      .contact-section .contact-info-block .contact-social h4 {
        font-size: 1rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 1rem; }
      .contact-section .contact-info-block .contact-social .social-links {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap; }
        .contact-section .contact-info-block .contact-social .social-links .social-link {
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.6rem 1.2rem;
          border-radius: 12px;
          text-decoration: none;
          font-weight: 500;
          font-size: 0.9rem;
          transition: all 0.3s ease; }
          .contact-section .contact-info-block .contact-social .social-links .social-link span {
            font-size: 1.2rem; }
          .contact-section .contact-info-block .contact-social .social-links .social-link.whatsapp {
            background: #25d366;
            color: white; }
            .contact-section .contact-info-block .contact-social .social-links .social-link.whatsapp:hover {
              background: #128c7e;
              transform: translateY(-2px); }
          .contact-section .contact-info-block .contact-social .social-links .social-link.telegram {
            background: #0088cc;
            color: white; }
            .contact-section .contact-info-block .contact-social .social-links .social-link.telegram:hover {
              background: #006699;
              transform: translateY(-2px); }
          .contact-section .contact-info-block .contact-social .social-links .social-link.instagram {
            background: linear-gradient(45deg, #f09433, #d62976, #962fbf);
            color: white; }
            .contact-section .contact-info-block .contact-social .social-links .social-link.instagram:hover {
              transform: translateY(-2px); }
  .contact-section .contact-map-block {
    display: flex;
    flex-direction: column;
    gap: 2rem; }
    .contact-section .contact-map-block .map-wrapper {
      background: white;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      position: relative; }
      .contact-section .contact-map-block .map-wrapper iframe {
        width: 100%;
        height: 350px;
        border: none; }
      .contact-section .contact-map-block .map-wrapper .map-route-btn {
        position: absolute;
        bottom: 20px;
        right: 20px; }
        .contact-section .contact-map-block .map-wrapper .map-route-btn a {
          display: inline-block;
          background: white;
          padding: 0.6rem 1.2rem;
          border-radius: 50px;
          text-decoration: none;
          color: #008BD0;
          font-weight: 500;
          font-size: 0.9rem;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          transition: all 0.3s ease; }
          .contact-section .contact-map-block .map-wrapper .map-route-btn a:hover {
            background: #008BD0;
            color: white;
            transform: translateY(-2px); }
    .contact-section .contact-map-block .branches-block {
      background: white;
      border-radius: 24px;
      padding: 1.8rem;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); }
      .contact-section .contact-map-block .branches-block .branches-title {
        font-size: 1.2rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem; }
      .contact-section .contact-map-block .branches-block .branches-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem; }
        .contact-section .contact-map-block .branches-block .branches-grid .branch-item {
          padding: 1rem;
          background: #f9fafb;
          border-radius: 12px;
          transition: all 0.3s ease; }
          .contact-section .contact-map-block .branches-block .branches-grid .branch-item:hover {
            background: rgba(0, 139, 208, 0.05);
            transform: translateX(5px); }
          .contact-section .contact-map-block .branches-block .branches-grid .branch-item .branch-city {
            font-weight: 700;
            color: #008BD0;
            margin-bottom: 0.5rem;
            font-size: 1rem; }
          .contact-section .contact-map-block .branches-block .branches-grid .branch-item .branch-address {
            font-size: 0.85rem;
            color: #6b7280;
            margin-bottom: 0.3rem; }
          .contact-section .contact-map-block .branches-block .branches-grid .branch-item .branch-phone {
            font-size: 0.85rem;
            color: #374151;
            font-weight: 500; }
            .contact-section .contact-map-block .branches-block .branches-grid .branch-item .branch-phone a {
              color: inherit;
              text-decoration: none; }
              .contact-section .contact-map-block .branches-block .branches-grid .branch-item .branch-phone a:hover {
                color: #008BD0; }

@media (max-width: 768px) {
  .contact-section {
    padding: 3rem 1.5rem; }
    .contact-section .contact-info-block {
      padding: 1.5rem; }
      .contact-section .contact-info-block .contact-title {
        font-size: 1.5rem; }
      .contact-section .contact-info-block .contact-item .contact-icon {
        width: 32px;
        height: 32px; }
      .contact-section .contact-info-block .social-links .social-link {
        padding: 0.5rem 1rem;
        font-size: 0.85rem; }
    .contact-section .contact-map-block .map-wrapper iframe {
      height: 250px; }
    .contact-section .contact-map-block .branches-block {
      padding: 1.2rem; }
      .contact-section .contact-map-block .branches-block .branches-grid {
        grid-template-columns: 1fr; } }

.advantages-section {
  padding: 4rem 0;
  background: #f9fafb; }

.advantages-header {
  text-align: center;
  margin-bottom: 3rem; }

.advantages-title {
  font-family: "Ubuntu", system-ui, sans-serif;
  font-size: 2.5rem;
  color: #2c3e50;
  margin-bottom: 1rem; }
  @media (max-width: 768px) {
    .advantages-title {
      font-size: 1.8rem; } }
.advantages-subtitle {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.125rem;
  color: #6b7280;
  max-width: 600px;
  margin: 0 auto; }

.advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem; }
  @media (max-width: 768px) {
    .advantages-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem; } }
.advantage-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); }
  .advantage-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 139, 208, 0.12); }

.advantage-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  display: inline-block; }

.advantage-title {
  font-family: "Ubuntu", system-ui, sans-serif;
  font-size: 1.25rem;
  color: #2c3e50;
  margin-bottom: 1rem;
  font-weight: 600; }

.advantage-description {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.95rem;
  color: #6b7280;
  line-height: 1.6;
  margin: 0; }

.advantages-empty {
  text-align: center;
  padding: 3rem;
  background: #ffffff;
  border-radius: 16px;
  color: #6b7280; }
  .advantages-empty p {
    margin: 0;
    font-size: 1rem; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

.advantage-card {
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0; }
  .advantage-card:nth-child(1) {
    animation-delay: 0.1s; }
  .advantage-card:nth-child(2) {
    animation-delay: 0.2s; }
  .advantage-card:nth-child(3) {
    animation-delay: 0.3s; }
  .advantage-card:nth-child(4) {
    animation-delay: 0.4s; }
  .advantage-card:nth-child(5) {
    animation-delay: 0.5s; }
  .advantage-card:nth-child(6) {
    animation-delay: 0.6s; }

.auth-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: center; }
  .auth-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.3s ease; }
  .auth-modal__container {
    position: relative;
    width: 90%;
    max-width: 500px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 139, 208, 0.12);
    animation: slideUp 0.3s ease;
    overflow: hidden; }
  .auth-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(107, 114, 128, 0.2); }
  .auth-modal__tabs {
    display: flex;
    gap: 24px; }
  .auth-modal__tab {
    background: none;
    border: none;
    font-size: 18px;
    font-weight: 600;
    font-family: "Ubuntu", system-ui, sans-serif;
    color: #6b7280;
    cursor: pointer;
    padding: 8px 0;
    transition: all 0.3s ease;
    position: relative; }
    .auth-modal__tab.active {
      color: #008BD0; }
      .auth-modal__tab.active::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100%;
        height: 2px;
        background: #008BD0;
        border-radius: 2px; }
    .auth-modal__tab:hover {
      color: #008BD0; }
  .auth-modal__close {
    background: none;
    border: none;
    font-size: 28px;
    color: #6b7280;
    cursor: pointer;
    line-height: 1;
    transition: all 0.3s ease;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px; }
    .auth-modal__close:hover {
      color: #2c3e50;
      background: #f9fafb; }
  .auth-modal__body {
    padding: 28px 24px;
    max-height: 70vh;
    overflow-y: auto; }
    .auth-modal__body::-webkit-scrollbar {
      width: 6px; }
    .auth-modal__body::-webkit-scrollbar-track {
      background: #f9fafb;
      border-radius: 3px; }
    .auth-modal__body::-webkit-scrollbar-thumb {
      background: #6b7280;
      border-radius: 3px; }
      .auth-modal__body::-webkit-scrollbar-thumb:hover {
        background: #008BD0; }
  .auth-modal__content {
    display: none; }
    .auth-modal__content.active {
      display: block;
      animation: fadeIn 0.3s ease; }

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 20px; }
  .auth-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px; }
    @media (max-width: 768px) {
      .auth-form__row {
        grid-template-columns: 1fr;
        gap: 20px; } }
  .auth-form__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative; }
    .auth-form__group.half {
      flex: 1; }
  .auth-form__label {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
    font-family: "Ubuntu", system-ui, sans-serif; }
  .auth-form__input {
    padding: 12px 16px;
    border: 2px solid rgba(107, 114, 128, 0.2);
    border-radius: 12px;
    font-size: 14px;
    font-family: "Ubuntu", system-ui, sans-serif;
    transition: all 0.3s ease;
    background: #ffffff; }
    .auth-form__input:focus {
      outline: none;
      border-color: #008BD0;
      box-shadow: 0 0 0 3px rgba(0, 139, 208, 0.1); }
    .auth-form__input.error {
      border-color: #721c24; }
  .auth-form__hint {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px; }
  .auth-form__error {
    font-size: 12px;
    color: #721c24;
    margin-top: 4px; }
  .auth-form__options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px; }
  .auth-form__checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1f2937;
    cursor: pointer;
    font-size: 14px; }
    .auth-form__checkbox input[type="checkbox"] {
      width: 16px;
      height: 16px;
      cursor: pointer; }
    .auth-form__checkbox a {
      color: #008BD0;
      text-decoration: none; }
      .auth-form__checkbox a:hover {
        text-decoration: underline; }
  .auth-form__forgot {
    background: none;
    border: none;
    color: #008BD0;
    cursor: pointer;
    font-size: 14px;
    font-family: "Ubuntu", system-ui, sans-serif; }
    .auth-form__forgot:hover {
      text-decoration: underline; }
  .auth-form__submit {
    background: linear-gradient(135deg, #008BD0 0%, #006ba3 100%);
    color: #ffffff;
    border: none;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    font-family: "Ubuntu", system-ui, sans-serif;
    cursor: pointer;
    transition: all 0.3s ease; }
    .auth-form__submit:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(0, 139, 208, 0.15); }
    .auth-form__submit:active {
      transform: translateY(0); }
  .auth-form__divider {
    text-align: center;
    position: relative;
    margin: 8px 0; }
    .auth-form__divider::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      width: 45%;
      height: 1px;
      background: rgba(107, 114, 128, 0.2); }
    .auth-form__divider::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      width: 45%;
      height: 1px;
      background: rgba(107, 114, 128, 0.2); }
    .auth-form__divider span {
      background: #ffffff;
      padding: 0 12px;
      color: #6b7280;
      font-size: 14px; }
  .auth-form__social {
    display: flex;
    gap: 12px; }
    @media (max-width: 768px) {
      .auth-form__social {
        flex-direction: column; } }
  .auth-form__title {
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 8px;
    font-family: "Ubuntu", system-ui, sans-serif; }
  .auth-form__text {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 20px; }
  .auth-form__back {
    background: none;
    border: none;
    color: #008BD0;
    cursor: pointer;
    font-size: 14px;
    font-family: "Ubuntu", system-ui, sans-serif;
    padding: 8px;
    margin-top: 8px; }
    .auth-form__back:hover {
      text-decoration: underline; }

.auth-social-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border: 2px solid rgba(107, 114, 128, 0.2);
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  font-family: "Ubuntu", system-ui, sans-serif;
  transition: all 0.3s ease;
  color: #1f2937; }
  .auth-social-btn:hover {
    background: #f9fafb;
    transform: translateY(-2px);
    border-color: #008BD0; }
  .auth-social-btn svg {
    width: 20px;
    height: 20px; }

.toast-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1150;
  padding: 14px 24px;
  border-radius: 12px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  font-family: "Ubuntu", system-ui, sans-serif;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.3s ease;
  pointer-events: none;
  box-shadow: 0 10px 25px rgba(0, 139, 208, 0.12); }
  .toast-notification.show {
    opacity: 1;
    transform: translateX(0); }
  .toast-notification.success {
    background: #155724; }
  .toast-notification.error {
    background: #721c24; }
  .toast-notification.info {
    background: #008BD0; }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

@media (max-width: 768px) {
  .auth-modal {
    align-items: flex-end; }
    .auth-modal__container {
      width: 100%;
      max-width: 100%;
      border-radius: 16px 16px 0 0; }
    .auth-modal__body {
      padding: 24px 20px;
      max-height: 80vh; }
    .auth-modal__header {
      padding: 16px 20px; }
    .auth-modal__tabs {
      gap: 16px; }
    .auth-modal__tab {
      font-size: 16px; }
  .auth-form__submit {
    padding: 12px 20px; }
  .toast-notification {
    top: auto;
    bottom: 20px;
    right: 20px;
    left: 20px;
    text-align: center; } }

.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 380px;
  width: 100%; }
  @media (max-width: 768px) {
    .toast-container {
      top: auto;
      bottom: 20px;
      right: 20px;
      left: 20px;
      max-width: calc(100% - 40px); } }
.toast-notification {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transform: translateX(120%);
  transition: transform 0.3s ease;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px); }
  .toast-notification.show {
    transform: translateX(0); }
  .toast-notification.hide {
    transform: translateX(120%); }
  .toast-notification .toast-icon {
    font-size: 24px;
    flex-shrink: 0; }
  .toast-notification .toast-content {
    flex: 1; }
    .toast-notification .toast-content .toast-message {
      font-size: 14px;
      line-height: 1.5;
      color: #2c3e50; }
  .toast-notification .toast-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #999;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    flex-shrink: 0; }
    .toast-notification .toast-close:hover {
      background: rgba(0, 0, 0, 0.05);
      color: #333; }
  .toast-notification .toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    animation: toastProgress linear forwards;
    transform-origin: left; }
  .toast-notification.toast-success {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-left: 4px solid #059669; }
    .toast-notification.toast-success .toast-icon {
      color: #059669; }
  .toast-notification.toast-error {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-left: 4px solid #dc2626; }
    .toast-notification.toast-error .toast-icon {
      color: #dc2626; }
  .toast-notification.toast-warning {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #d97706; }
    .toast-notification.toast-warning .toast-icon {
      color: #d97706; }
  .toast-notification.toast-info {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-left: 4px solid #3b82f6; }
    .toast-notification.toast-info .toast-icon {
      color: #3b82f6; }

@keyframes toastProgress {
  0% {
    transform: scaleX(1); }
  100% {
    transform: scaleX(0); } }

.profile-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px;
  margin-top: 60px;
  background: linear-gradient(135deg, #008BD0 0%, #006ba3 100%);
  color: white; }
  @media (max-width: 480px) {
    .profile-header-container {
      flex-direction: column;
      text-align: center;
      gap: 20px; } }
.profile-header-avatar {
  margin-right: 30px; }
  @media (max-width: 480px) {
    .profile-header-avatar {
      margin-right: 0; } }
  .profile-header-avatar img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); }

.profile-header-avatar-placeholder {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: bold;
  border: 4px solid white; }
  .profile-header-avatar-placeholder.doctor-role {
    background: rgba(255, 255, 255, 0.25); }
  .profile-header-avatar-placeholder.admin-role {
    background: rgba(255, 255, 255, 0.3); }

.profile-header-info {
  flex: 1; }
  .profile-header-info h1 {
    margin: 0 0 10px 0;
    font-size: 2rem; }
    @media (max-width: 480px) {
      .profile-header-info h1 {
        font-size: 1.25rem; } }
.profile-header-role-badge {
  display: inline-block;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 14px;
  margin: 10px 0; }
  .profile-header-role-badge.patient-role {
    background: #4CAF50; }
  .profile-header-role-badge.doctor-role {
    background: #008BD0; }
  .profile-header-role-badge.admin-role {
    background: #FF9800; }

.profile-header-email,
.profile-header-phone {
  margin: 5px 0;
  opacity: 0.9; }

.profile-header-actions {
  display: flex;
  gap: 10px; }
  @media (max-width: 480px) {
    .profile-header-actions {
      width: 100%;
      justify-content: center; } }
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 30px;
  background: #f9fafb; }
  .profile-stats-grid.admin-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  @media (max-width: 480px) {
    .profile-stats-grid {
      grid-template-columns: 1fr;
      padding: 20px; } }
.profile-stat-card {
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  transition: all 0.3s; }
  .profile-stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 139, 208, 0.15); }
  .profile-stat-card.doctor-stat-card {
    border-left: 4px solid #008BD0; }
  .profile-stat-card.admin-stat-card {
    border-left: 4px solid #FF9800; }

.profile-stat-icon {
  font-size: 40px;
  color: #008BD0; }

.profile-stat-info {
  flex: 1; }
  .profile-stat-info h3 {
    margin: 0;
    font-size: 1.5rem;
    color: #2c3e50; }
  .profile-stat-info p {
    margin: 5px 0 0;
    color: #6b7280;
    font-size: 14px; }

.profile-tabs-container {
  display: flex;
  border-bottom: 2px solid #e0e0e0;
  padding: 0 30px;
  background: #ffffff;
  flex-wrap: wrap; }
  @media (max-width: 480px) {
    .profile-tabs-container {
      padding: 0 15px; } }
.profile-tab-button {
  padding: 15px 30px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: #6b7280;
  transition: all 0.3s;
  position: relative; }
  @media (max-width: 480px) {
    .profile-tab-button {
      flex: 1;
      padding: 10px 15px;
      font-size: 14px; } }
  .profile-tab-button:hover {
    color: #008BD0; }
  .profile-tab-button.active-tab {
    color: #008BD0; }
    .profile-tab-button.active-tab::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      right: 0;
      height: 2px;
      background: #008BD0; }

.profile-tab-content {
  display: none;
  padding: 30px;
  background: #ffffff;
  animation: fadeIn 0.3s ease-out; }
  @media (max-width: 480px) {
    .profile-tab-content {
      padding: 20px; } }
  .profile-tab-content.active-tab-content {
    display: block; }

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

.profile-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
  text-decoration: none;
  display: inline-block;
  font-family: "Ubuntu", system-ui, sans-serif; }
  .profile-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); }
  .profile-btn:active {
    transform: translateY(0); }

.profile-btn-primary {
  background: #008BD0;
  color: white; }
  .profile-btn-primary:hover {
    background: #992859; }

.profile-btn-danger {
  background: #dc3545;
  color: white; }
  .profile-btn-danger:hover {
    background: #c82333; }

.profile-btn-secondary {
  background: #6c757d;
  color: white; }
  .profile-btn-secondary:hover {
    background: #5a6268; }

.profile-btn-success {
  background: #155724;
  color: white; }
  .profile-btn-success:hover {
    background: #0b2e13; }

.profile-btn-sm {
  padding: 5px 15px;
  font-size: 12px; }

.profile-btn-lg {
  padding: 15px 30px;
  font-size: 1.125rem; }

.profile-btn-block {
  display: block;
  width: 100%; }

.profile-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1050; }
  .profile-modal.active-modal {
    display: flex;
    align-items: center;
    justify-content: center; }

.profile-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); }

.profile-modal-container {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideIn 0.3s ease-out; }

@keyframes slideIn {
  from {
    transform: translateX(-100%); }
  to {
    transform: translateX(0); } }

.profile-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #eee; }
  .profile-modal-header h3 {
    margin: 0;
    color: #2c3e50; }

.profile-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 24px;
  color: #6b7280;
  transition: all 0.3s; }
  .profile-modal-close:hover {
    color: #2c3e50; }

.profile-modal-body {
  padding: 20px; }

.profile-modal-footer {
  padding: 20px;
  border-top: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px; }

@keyframes confFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

.confidentiality-page {
  animation: confFadeIn 0.5s ease-out; }

@keyframes confSlideIn {
  from {
    opacity: 0;
    transform: translateX(-20px); }
  to {
    opacity: 1;
    transform: translateX(0); } }

.confidentiality-header {
  animation: confSlideIn 0.5s ease-out; }

@media (max-width: 992px) {
  .confidentiality-page {
    padding: 40px 0; }
  .confidentiality-header {
    margin-bottom: 30px;
    padding-bottom: 15px; }
  .confidentiality-content h2 {
    margin-top: 25px;
    margin-bottom: 12px; } }

@media (max-width: 768px) {
  .confidentiality-page {
    padding: 30px 0; }
  .confidentiality-header {
    margin-bottom: 25px;
    padding-bottom: 12px; }
  .confidentiality-content h2 {
    margin-top: 20px;
    margin-bottom: 10px; }
  .confidentiality-content ul, .confidentiality-content ol {
    padding-left: 20px; }
    .confidentiality-content ul li, .confidentiality-content ol li {
      margin-bottom: 6px; } }

@media (max-width: 480px) {
  .confidentiality-content h2 {
    margin-top: 18px; }
  .confidentiality-content p, .confidentiality-content li {
    line-height: 1.5; } }

@media print {
  .confidentiality-page {
    padding: 0;
    background: white; }
  .confidentiality-header {
    border-bottom: 1px solid #000; } }

.confidentiality-page {
  padding: 60px 0;
  background: #ffffff;
  margin-top: 160px;
  min-height: 70vh; }
  .confidentiality-page .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px; }

.confidentiality-header {
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 2px solid #e8eaed; }
  .confidentiality-header h1 {
    font-size: 36px;
    font-weight: 700;
    color: #008BD0;
    margin-bottom: 10px; }
    @media (max-width: 992px) {
      .confidentiality-header h1 {
        font-size: 28px; } }
    @media (max-width: 576px) {
      .confidentiality-header h1 {
        font-size: 24px; } }
  .confidentiality-header .last-updated {
    font-size: 14px;
    color: #6c757d; }

.confidentiality-content h2 {
  font-size: 24px;
  font-weight: 600;
  color: #008BD0;
  margin-top: 30px;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e8eaed; }
  @media (max-width: 992px) {
    .confidentiality-content h2 {
      font-size: 20px; } }
.confidentiality-content h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1a202c;
  margin: 25px 0 10px; }

.confidentiality-content p {
  font-size: 16px;
  line-height: 1.6;
  color: #4a5568;
  margin-bottom: 15px; }
  @media (max-width: 576px) {
    .confidentiality-content p {
      font-size: 14px; } }
.confidentiality-content ul, .confidentiality-content ol {
  margin: 15px 0;
  padding-left: 25px; }
  .confidentiality-content ul li, .confidentiality-content ol li {
    font-size: 16px;
    line-height: 1.6;
    color: #4a5568;
    margin-bottom: 8px; }
    @media (max-width: 576px) {
      .confidentiality-content ul li, .confidentiality-content ol li {
        font-size: 14px; } }
.confidentiality-content a {
  color: #008BD0;
  text-decoration: none;
  transition: color 0.3s ease; }
  .confidentiality-content a:hover {
    text-decoration: underline;
    color: #00699d; }

.confidentiality-content .alert {
  padding: 15px 20px;
  border-radius: 8px;
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba; }
  .confidentiality-content .alert-warning {
    background: #fff3cd;
    color: #856404;
    border-color: #ffeeba; }

.confidentiality-content strong, .confidentiality-content b {
  font-weight: 700;
  color: #1a202c; }

.confidentiality-content ul {
  list-style-type: disc; }

.confidentiality-content ol {
  list-style-type: decimal; }

@keyframes csSlideInUp {
  from {
    opacity: 0;
    transform: translateY(30px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

@keyframes csSlideInRight {
  from {
    opacity: 0;
    transform: translateX(100px); }
  to {
    opacity: 1;
    transform: translateX(0); } }

@keyframes csFadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

@keyframes csRegionClick {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 139, 208, 0.4); }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 0 8px rgba(0, 139, 208, 0.2); }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 139, 208, 0); } }

@keyframes csPulse {
  0% {
    transform: scale(1);
    opacity: 1; }
  50% {
    transform: scale(1.2);
    opacity: 0.7; }
  100% {
    transform: scale(1);
    opacity: 1; } }

.contact-simple-card {
  animation: csSlideInUp 0.6s ease forwards; }

.contact-simple-item {
  animation: csSlideInUp 0.5s ease forwards;
  opacity: 0; }
  .contact-simple-item:nth-child(1) {
    animation-delay: 0.1s; }
  .contact-simple-item:nth-child(2) {
    animation-delay: 0.2s; }
  .contact-simple-item:nth-child(3) {
    animation-delay: 0.3s; }

.contact-simple-directions {
  animation: csSlideInUp 0.5s ease forwards;
  animation-delay: 0.4s;
  opacity: 0; }

.contact-location-btn {
  animation: csSlideInUp 0.5s ease forwards;
  animation-delay: 0.45s;
  opacity: 0; }

.region-item {
  animation: csSlideInUp 0.4s ease forwards;
  opacity: 0; }
  .region-item:nth-child(1) {
    animation-delay: 0.03s; }
  .region-item:nth-child(2) {
    animation-delay: 0.06s; }
  .region-item:nth-child(3) {
    animation-delay: 0.09s; }
  .region-item:nth-child(4) {
    animation-delay: 0.12s; }
  .region-item:nth-child(5) {
    animation-delay: 0.15s; }
  .region-item:nth-child(6) {
    animation-delay: 0.18s; }
  .region-item:nth-child(7) {
    animation-delay: 0.21s; }
  .region-item:nth-child(8) {
    animation-delay: 0.24s; }
  .region-item:nth-child(9) {
    animation-delay: 0.27s; }
  .region-item:nth-child(10) {
    animation-delay: 0.3s; }
  .region-item:nth-child(11) {
    animation-delay: 0.33s; }
  .region-item:nth-child(12) {
    animation-delay: 0.36s; }
  .region-item:nth-child(13) {
    animation-delay: 0.39s; }
  .region-item:nth-child(14) {
    animation-delay: 0.42s; }
  .region-item:nth-child(15) {
    animation-delay: 0.45s; }
  .region-item:nth-child(16) {
    animation-delay: 0.48s; }
  .region-item:nth-child(17) {
    animation-delay: 0.51s; }
  .region-item:nth-child(18) {
    animation-delay: 0.54s; }
  .region-item:nth-child(19) {
    animation-delay: 0.57s; }
  .region-item:nth-child(20) {
    animation-delay: 0.6s; }

.region-clicked {
  animation: csRegionClick 0.3s ease;
  background: linear-gradient(135deg, #008BD0, #0066CC); }
  .region-clicked .region-name,
  .region-clicked .region-city,
  .region-clicked .region-marker {
    color: white; }

@media (max-width: 992px) {
  .contact-simple-section {
    padding: 3rem 0; }
  .contact-simple-card {
    margin: 0 1rem 2rem; }
  .regions-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }

@media (max-width: 768px) {
  .contact-simple-section {
    padding: 2rem 0; }
  .contact-simple-card {
    padding: 1.5rem;
    margin: 0 1rem 1.5rem; }
  .contact-simple-title {
    font-size: 1.5rem; }
  .contact-simple-icon {
    width: 42px;
    height: 42px;
    font-size: 1.1rem; }
  .contact-simple-map {
    padding: 1rem;
    margin: 0 1rem; }
  .map-wrapper iframe {
    height: 300px; }
  .regions-header {
    margin-bottom: 1.5rem; }
  .regions-title {
    font-size: 1.5rem;
    letter-spacing: -0.3px; }
  .regions-subtitle {
    font-size: 0.9rem;
    max-width: 500px; }
  .regions-stats {
    gap: 1rem; }
  .regions-stat {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem; }
    .regions-stat strong {
      font-size: 1rem; }
  .region-name {
    font-size: 0.85rem; } }

@media (max-width: 576px) {
  .regions-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem; }
  .region-item {
    padding: 0.75rem; }
  .regions-stats {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem; }
  .regions-stat {
    width: 80%;
    justify-content: center; } }

@media (min-width: 1400px) {
  .contact-simple-regions {
    max-width: 1320px; } }

.contact-simple-section {
  padding: 4rem 0;
  background: #f8f9fa;
  width: 100%;
  overflow-x: hidden; }

.contact-simple-regions {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
  box-sizing: border-box; }

.regions-header {
  text-align: center;
  margin-bottom: 2.5rem; }

.regions-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, rgba(0, 139, 208, 0.1), rgba(0, 107, 163, 0.05));
  color: #008BD0;
  padding: 0.5rem 1.25rem;
  border-radius: 60px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 1.25rem; }

.regions-title {
  font-size: 2rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.75rem; }

.regions-title-highlight {
  color: #008BD0; }

.regions-subtitle {
  font-size: 1rem;
  color: #6b7280;
  max-width: 600px;
  margin: 0 auto; }

.regions-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1.75rem;
  flex-wrap: wrap; }

.regions-stat {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: #6b7280;
  padding: 0.5rem 1rem;
  background: #f8f9fa;
  border-radius: 40px; }
  .regions-stat strong {
    font-size: 1.2rem;
    color: #008BD0;
    font-weight: 700; }

.regions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 4 колонки на десктопе */
  gap: 1rem;
  width: 100%;
  margin-top: 2rem; }
  @media (max-width: 992px) {
    .regions-grid {
      grid-template-columns: repeat(2, 1fr);
      /* 2 колонки на планшете */ } }
  @media (max-width: 576px) {
    .regions-grid {
      grid-template-columns: 1fr;
      /* 1 колонка на телефоне */ } }
.region-item {
  background: #ffffff;
  border-radius: 12px;
  padding: 0.85rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.05); }
  .region-item:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, #008BD0, #0066CC);
    box-shadow: 0 8px 20px rgba(0, 139, 208, 0.15); }
    .region-item:hover .region-name,
    .region-item:hover .region-city {
      color: white; }
    .region-item:hover .region-icon {
      filter: brightness(0) invert(1); }

.region-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem; }

.region-icon {
  font-size: 1.1rem;
  transition: all 0.3s ease;
  flex-shrink: 0; }

.region-text {
  flex: 1;
  min-width: 0; }

.region-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #111827;
  display: block;
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.region-city {
  font-size: 0.7rem;
  color: #6b7280;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.region-marker {
  font-size: 0.85rem;
  opacity: 0.5;
  transition: all 0.3s ease;
  flex-shrink: 0; }

.contact-simple-map {
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  margin-top: 3rem;
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box; }
  @media (max-width: 768px) {
    .contact-simple-map {
      padding: 1rem;
      margin-top: 2rem; } }
.map-wrapper {
  border-radius: 16px;
  overflow: hidden; }
  .map-wrapper iframe {
    border-radius: 16px;
    display: block;
    width: 100%;
    height: 400px; }
    @media (max-width: 768px) {
      .map-wrapper iframe {
        height: 300px; } }
.profile-header-gradient {
  background: linear-gradient(135deg, #008BD0 0%, #00b4db 100%);
  border-radius: 24px;
  padding: 32px;
  margin-bottom: 24px;
  margin-top: 120px;
  color: white; }
  .profile-header-gradient .profile-header-content {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap; }
    @media (max-width: 768px) {
      .profile-header-gradient .profile-header-content {
        flex-direction: column;
        text-align: center; } }
  .profile-header-gradient .profile-avatar-large {
    position: relative; }
    .profile-header-gradient .profile-avatar-large img, .profile-header-gradient .profile-avatar-large .avatar-initials {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
      border: 4px solid rgba(255, 255, 255, 0.3); }
    .profile-header-gradient .profile-avatar-large .avatar-initials {
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      font-weight: 700; }
    .profile-header-gradient .profile-avatar-large .avatar-status {
      position: absolute;
      bottom: 4px;
      right: 4px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 2px solid white;
      background: #10b981; }
  .profile-header-gradient .profile-info {
    flex: 1; }
    .profile-header-gradient .profile-info h1 {
      font-size: 28px;
      margin: 0 0 12px 0; }
    .profile-header-gradient .profile-info .profile-badges {
      display: flex;
      gap: 12px;
      margin-bottom: 12px;
      flex-wrap: wrap; }
      .profile-header-gradient .profile-info .profile-badges .badge-doctor, .profile-header-gradient .profile-info .profile-badges .badge-experience {
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px); }
    .profile-header-gradient .profile-info .profile-contacts {
      display: flex;
      gap: 16px;
      flex-wrap: wrap; }
      .profile-header-gradient .profile-info .profile-contacts .contact-item {
        font-size: 14px;
        opacity: 0.9; }
  .profile-header-gradient .profile-actions .btn-logout {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    padding: 10px 20px;
    border-radius: 12px;
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s; }
    .profile-header-gradient .profile-actions .btn-logout:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: translateY(-2px); }

.subscription-glass-card {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 24px;
  color: white; }
  .subscription-glass-card .card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px; }
    .subscription-glass-card .card-header .header-icon {
      font-size: 32px; }
    .subscription-glass-card .card-header h3 {
      margin: 0;
      flex: 1;
      font-size: 1.25rem; }
    .subscription-glass-card .card-header .plan-badge {
      background: #10b981;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 12px; }
  .subscription-glass-card .card-body .plan-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px; }
    .subscription-glass-card .card-body .plan-info .plan-name {
      font-size: 20px;
      font-weight: 700; }
    .subscription-glass-card .card-body .plan-info .plan-price {
      color: #e0f2fe;
      font-weight: 600; }
  .subscription-glass-card .card-body .plan-progress .progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px; }
    .subscription-glass-card .card-body .plan-progress .progress-label .days-count {
      font-weight: 700;
      color: #e0f2fe; }
  .subscription-glass-card .card-body .plan-progress .progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px; }
    .subscription-glass-card .card-body .plan-progress .progress-bar .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #008BD0, #00b4db);
      border-radius: 10px;
      transition: width 0.5s ease; }
  .subscription-glass-card .card-body .plan-progress .progress-date {
    font-size: 12px;
    opacity: 0.7; }
  .subscription-glass-card .no-plan {
    text-align: center;
    padding: 20px; }
    .subscription-glass-card .no-plan p {
      margin-bottom: 16px; }
    .subscription-glass-card .no-plan .btn-primary-modern {
      display: inline-block;
      background: #008BD0;
      color: white;
      padding: 12px 24px;
      border-radius: 12px;
      text-decoration: none;
      font-weight: 600;
      transition: all 0.3s; }
      .subscription-glass-card .no-plan .btn-primary-modern:hover {
        background: #006ba3;
        transform: translateY(-2px); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 32px; }
  .stats-grid .stat-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
    border: 1px solid #e5e7eb; }
    .stats-grid .stat-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); }
    .stats-grid .stat-card .stat-icon {
      font-size: 24px;
      margin-bottom: 12px; }
    .stats-grid .stat-card .stat-value {
      font-size: 26px;
      font-weight: 600;
      color: #1f2937;
      line-height: 1;
      margin-bottom: 8px; }
    .stats-grid .stat-card .stat-label {
      font-size: 14px;
      color: #6b7280; }
    .stats-grid .stat-card .stat-trend {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 20px;
      background: #f3f4f6; }
      .stats-grid .stat-card .stat-trend.up {
        color: #10b981; }
      .stats-grid .stat-card .stat-trend.down {
        color: #ef4444; }

.tabs-modern {
  display: flex;
  gap: 8px;
  background: white;
  padding: 8px;
  border-radius: 16px;
  margin-bottom: 32px;
  border: 1px solid #e5e7eb; }
  .tabs-modern .tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-radius: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    color: #6b7280; }
    .tabs-modern .tab-btn:hover {
      background: #f3f4f6; }
    .tabs-modern .tab-btn.active {
      background: #008BD0;
      color: white; }

.tab-content {
  display: none;
  animation: fadeIn 0.3s ease; }
  .tab-content.active {
    display: block; }

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

.appointments-group {
  margin-bottom: 32px; }
  .appointments-group .group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-weight: 600;
    color: #374151; }
    .appointments-group .group-title .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%; }
      .appointments-group .group-title .dot.pending {
        background: #f59e0b; }
      .appointments-group .group-title .dot.confirmed {
        background: #10b981; }
    .appointments-group .group-title .count {
      background: #f3f4f6;
      padding: 2px 8px;
      border-radius: 20px;
      font-size: 12px; }

.appointment-card-modern {
  background: white;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  gap: 16px;
  align-items: center;
  transition: all 0.3s;
  border: 1px solid #e5e7eb; }
  .appointment-card-modern:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateX(4px); }
  .appointment-card-modern.pending {
    border-left: 4px solid #f59e0b; }
  .appointment-card-modern.confirmed {
    border-left: 4px solid #10b981; }
  @media (max-width: 768px) {
    .appointment-card-modern {
      flex-direction: column;
      text-align: center; } }
  .appointment-card-modern .card-left {
    text-align: center;
    min-width: 60px; }
    @media (max-width: 768px) {
      .appointment-card-modern .card-left {
        display: flex;
        gap: 16px;
        align-items: center; } }
    .appointment-card-modern .card-left .time-badge {
      font-size: 18px;
      font-weight: 700;
      color: #1f2937; }
    .appointment-card-modern .card-left .date-badge {
      font-size: 11px;
      color: #6b7280; }
  .appointment-card-modern .card-center {
    flex: 1; }
    .appointment-card-modern .card-center .patient-name {
      font-weight: 600;
      margin-bottom: 4px; }
    .appointment-card-modern .card-center .appointment-meta {
      display: flex;
      gap: 12px;
      font-size: 13px;
      color: #6b7280;
      flex-wrap: wrap; }
      .appointment-card-modern .card-center .appointment-meta .service-tag {
        background: #f3f4f6;
        padding: 2px 8px;
        border-radius: 12px; }
  .appointment-card-modern .card-right {
    display: flex;
    gap: 8px; }
    @media (max-width: 768px) {
      .appointment-card-modern .card-right {
        width: 100%;
        justify-content: center; } }
    .appointment-card-modern .card-right .btn-confirm-modern {
      background: #10b981;
      border: none;
      padding: 8px 16px;
      border-radius: 12px;
      color: white;
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      font-weight: 500;
      transition: all 0.3s; }
      .appointment-card-modern .card-right .btn-confirm-modern:hover {
        background: #059669;
        transform: translateY(-2px); }
    .appointment-card-modern .card-right .btn-decline-modern {
      background: #ef4444;
      border: none;
      width: 36px;
      height: 36px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s; }
      .appointment-card-modern .card-right .btn-decline-modern:hover {
        background: #dc2626;
        transform: translateY(-2px); }
    .appointment-card-modern .card-right .status-badge-confirmed {
      background: #d1fae5;
      color: #059669;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 500; }

.empty-state-modern {
  text-align: center;
  padding: 60px 20px;
  background: #f9fafb;
  border-radius: 16px; }
  .empty-state-modern .empty-icon {
    font-size: 48px;
    margin-bottom: 16px; }
  .empty-state-modern p {
    color: #6b7280; }

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr; }
  .tabs-modern {
    flex-wrap: wrap; }
    .tabs-modern .tab-btn {
      flex: auto;
      font-size: 12px;
      padding: 8px 12px; } }

.subscription-compact {
  background: white;
  border-radius: 12px;
  margin-bottom: 20px;
  border: 1px solid #e9ecef;
  overflow: hidden; }
  .subscription-compact__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef; }
  .subscription-compact__icon {
    font-size: 16px; }
  .subscription-compact__title {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937; }
  .subscription-compact__badge {
    background: #d1fae5;
    color: #059669;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 500; }
  .subscription-compact__body {
    padding: 12px 16px; }
  .subscription-compact__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0; }
    .subscription-compact__row:last-child {
      border-bottom: none; }
  .subscription-compact__label {
    font-size: 12px;
    color: #6c757d; }
  .subscription-compact__value {
    font-size: 13px;
    font-weight: 500;
    color: #1f2937; }
    .subscription-compact__value.highlight {
      color: #008BD0;
      font-weight: 700; }
  .subscription-compact__date {
    font-size: 12px;
    color: #1f2937; }
  .subscription-compact__empty {
    text-align: center;
    padding: 16px; }
    .subscription-compact__empty p {
      font-size: 13px;
      color: #6c757d;
      margin-bottom: 12px; }
  .subscription-compact__btn {
    display: inline-block;
    background: #008BD0;
    color: white;
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 12px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s; }
    .subscription-compact__btn:hover {
      background: #006ba3; }

.form-control-static {
  padding: 10px 12px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  color: #6c757d;
  font-size: 14px; }

.profile-admin-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px; }

.profile-admin-quick-card {
  text-align: center;
  padding: 20px;
  background: #f9fafb;
  border-radius: 12px;
  text-decoration: none;
  color: #2c3e50;
  transition: all 0.3s; }
  .profile-admin-quick-card:hover {
    background: #eaedf1;
    transform: translateY(-3px); }
    .profile-admin-quick-card:hover .profile-quick-icon {
      transform: scale(1.1); }
  .profile-admin-quick-card .profile-quick-icon {
    font-size: 40px;
    margin-bottom: 10px;
    transition: transform 0.3s; }
  .profile-admin-quick-card p {
    margin: 0;
    font-size: 14px; }

.profile-admin-users-table {
  overflow-x: auto;
  margin-top: 20px; }
  .profile-admin-users-table table {
    width: 100%;
    border-collapse: collapse; }
    .profile-admin-users-table table th, .profile-admin-users-table table td {
      padding: 15px;
      text-align: left;
      border-bottom: 1px solid #eee; }
    .profile-admin-users-table table th {
      background: #f9fafb;
      font-weight: 600;
      color: #2c3e50; }
    .profile-admin-users-table table tr {
      transition: all 0.3s; }
      .profile-admin-users-table table tr:hover {
        background: #f9fafb; }
    @media (max-width: 480px) {
      .profile-admin-users-table table th, .profile-admin-users-table table td {
        padding: 10px;
        font-size: 12px; } }
.profile-admin-status-badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 12px;
  font-size: 12px; }
  .profile-admin-status-badge.active-status {
    background: #155724;
    color: white; }
  .profile-admin-status-badge.blocked-status {
    background: #721c24;
    color: white; }
  .profile-admin-status-badge.pending-status {
    background: #856404;
    color: white; }

.profile-admin-reports-list .profile-report-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 12px;
  margin-bottom: 15px; }
  .profile-admin-reports-list .profile-report-item .profile-report-info {
    flex: 1; }
    .profile-admin-reports-list .profile-report-item .profile-report-info h4 {
      margin: 0 0 5px 0; }
    .profile-admin-reports-list .profile-report-item .profile-report-info p {
      margin: 0;
      font-size: 12px;
      color: #6b7280; }
  @media (max-width: 480px) {
    .profile-admin-reports-list .profile-report-item {
      flex-direction: column;
      gap: 10px; }
      .profile-admin-reports-list .profile-report-item .profile-btn {
        width: 100%; } }
.patients-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px; }
  .patients-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px; }
  .patients-header .patients-filters {
    display: flex;
    gap: 12px; }
    .patients-header .patients-filters .filter-select {
      padding: 8px 16px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      font-size: 13px;
      background: white;
      cursor: pointer;
      color: #374151;
      transition: all 0.3s; }
      .patients-header .patients-filters .filter-select:hover {
        border-color: #008BD0; }
      .patients-header .patients-filters .filter-select:focus {
        outline: none;
        border-color: #008BD0;
        box-shadow: 0 0 0 3px rgba(0, 139, 208, 0.1); }

.patients-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px; }
  .patients-stats .stat-item {
    background: white;
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    border: 1px solid #e5e7eb;
    transition: all 0.3s; }
    .patients-stats .stat-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); }
    .patients-stats .stat-item .stat-number {
      font-size: 28px;
      font-weight: 800;
      color: #008BD0;
      line-height: 1;
      margin-bottom: 8px; }
    .patients-stats .stat-item .stat-label {
      font-size: 12px;
      color: #6b7280; }

.patients-list {
  display: flex;
  flex-direction: column;
  gap: 12px; }

.patient-card-modern {
  display: flex;
  align-items: center;
  gap: 16px;
  background: white;
  border-radius: 16px;
  padding: 16px 20px;
  transition: all 0.3s;
  border: 1px solid #e5e7eb; }
  .patient-card-modern:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #008BD0; }
  .patient-card-modern .patient-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #008BD0, #00b4db);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 139, 208, 0.2); }
  .patient-card-modern .patient-details {
    flex: 1; }
    .patient-card-modern .patient-details h4 {
      font-size: 16px;
      font-weight: 700;
      color: #1f2937;
      margin: 0 0 6px 0; }
    .patient-card-modern .patient-details p {
      font-size: 12px;
      color: #6b7280;
      margin: 4px 0;
      display: flex;
      align-items: center;
      gap: 6px; }
      .patient-card-modern .patient-details p:first-of-type {
        margin-top: 0; }
    .patient-card-modern .patient-details .patient-email {
      color: #008BD0;
      font-size: 12px; }
    .patient-card-modern .patient-details .patient-service {
      background: #f3f4f6;
      display: inline-block;
      padding: 2px 10px;
      border-radius: 20px;
      font-size: 11px;
      color: #4b5563; }
  .patient-card-modern .patient-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0; }
    .patient-card-modern .patient-actions .btn-history, .patient-card-modern .patient-actions .btn-message {
      background: transparent;
      border: 1px solid #e5e7eb;
      padding: 8px 14px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      gap: 6px; }
      .patient-card-modern .patient-actions .btn-history:hover, .patient-card-modern .patient-actions .btn-message:hover {
        background: #f3f4f6;
        transform: translateY(-2px); }
    .patient-card-modern .patient-actions .btn-history {
      color: #008BD0;
      border-color: #e0f2fe; }
      .patient-card-modern .patient-actions .btn-history:hover {
        background: #e0f2fe; }
    .patient-card-modern .patient-actions .btn-message {
      color: #10b981;
      border-color: #d1fae5; }
      .patient-card-modern .patient-actions .btn-message:hover {
        background: #d1fae5; }

.no-results {
  text-align: center;
  padding: 40px;
  background: #f9fafb;
  border-radius: 16px;
  color: #6b7280;
  font-size: 14px; }

@media (max-width: 768px) {
  .patients-stats {
    grid-template-columns: 1fr;
    gap: 12px; }
  .patient-card-modern {
    flex-direction: column;
    text-align: center;
    padding: 16px; }
    .patient-card-modern .patient-avatar {
      width: 48px;
      height: 48px;
      font-size: 20px; }
    .patient-card-modern .patient-details {
      text-align: center; }
    .patient-card-modern .patient-actions {
      width: 100%;
      justify-content: center; }
  .patients-header {
    flex-direction: column;
    align-items: flex-start; }
    .patients-header .patients-filters {
      width: 100%;
      flex-direction: column; } }

/* ==================== МОИ ВРАЧИ ==================== */
.section-header {
  margin-bottom: 24px; }

.section-header h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 6px; }

.section-header p {
  font-size: 13px;
  color: #6b7280;
  margin: 0; }

/* Список врачей */
.doctors-list {
  display: flex;
  flex-direction: column;
  gap: 16px; }

/* Карточка врача - горизонтальная */
.doctor-card {
  display: flex;
  align-items: center;
  flex-direction: row;
  background: white;
  border-radius: 20px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); }

.doctor-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: #008BD0; }

/* Левая часть - Фото */
.doctor-card-left {
  flex-shrink: 0;
  margin-right: 16px; }

.doctor-avatar {
  width: 70px;
  height: 70px;
  position: relative; }

.doctor-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #e0f2fe; }

.avatar-initials {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #008BD0, #00b4db);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: white;
  border: 3px solid #e0f2fe; }

/* Центральная часть - Информация */
.doctor-card-center {
  flex: 1;
  min-width: 0; }

.doctor-name {
  font-size: 17px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 4px; }

.doctor-specialty {
  font-size: 12px;
  color: #008BD0;
  background: #e0f2fe;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 10px; }

.doctor-last-message {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8f9fa;
  padding: 8px 12px;
  border-radius: 12px;
  margin-bottom: 6px; }

.message-preview {
  font-size: 14px;
  color: #008BD0; }

.message-text {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.doctor-time {
  font-size: 11px;
  color: #9ca3af;
  padding-left: 4px; }

/* Правая часть - Бейдж и кнопка */
.doctor-card-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-left: 16px; }

.unread-badge {
  background: #ef4444;
  border-radius: 30px;
  min-width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3); }

.badge-number {
  color: white;
  font-size: 13px;
  font-weight: 700;
  padding: 0 8px; }

.chat-button {
  width: 40px;
  height: 40px;
  background: #f0f9ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s; }

.chat-icon {
  font-size: 20px;
  color: #008BD0; }

.doctor-card:hover .chat-button {
  background: #008BD0;
  transform: scale(1.05); }

.doctor-card:hover .chat-icon {
  color: white; }

/* Пустое состояние */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 20px; }

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5; }

.empty-state h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #1f2937; }

.empty-state p {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 20px; }

.btn-primary {
  display: inline-block;
  background: #008BD0;
  color: white;
  padding: 10px 24px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s; }

.btn-primary:hover {
  background: #006ba3;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 139, 208, 0.3); }

/* Адаптив */
@media (max-width: 768px) {
  .doctor-card {
    padding: 16px; }
  .doctor-avatar {
    width: 55px;
    height: 55px; }
  .avatar-initials {
    font-size: 22px; }
  .doctor-name {
    font-size: 15px; }
  .doctor-specialty {
    font-size: 10px; }
  .message-text {
    font-size: 12px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; }
  .chat-button {
    width: 35px;
    height: 35px; }
  .chat-icon {
    font-size: 18px; } }

.chat-page {
  background: #f8f9fa;
  min-height: 100vh;
  padding: 24px;
  margin-top: 60px; }

.chat-container {
  display: flex;
  height: calc(100vh - 48px);
  min-height: 550px;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }

.chat-sidebar {
  width: 340px;
  border-right: 1px solid #e9ecef;
  display: flex;
  flex-direction: column;
  background: white; }

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #e9ecef; }
  .sidebar-header h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 16px 0;
    color: #1f2937; }

.search-box input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #dee2e6;
  border-radius: 12px;
  font-size: 14px;
  outline: none;
  transition: all 0.2s ease; }
  .search-box input:focus {
    border-color: #008BD0;
    box-shadow: 0 0 0 3px rgba(0, 139, 208, 0.1); }

.dialogs-list {
  flex: 1;
  overflow-y: auto; }

.dialog-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  border-bottom: 1px solid #f8f9fa;
  transition: all 0.2s ease; }
  .dialog-item:hover {
    background: #f8f9fa; }
  .dialog-item.active {
    background: #b7e7ff;
    border-left: 3px solid #008BD0; }
  .dialog-item.unread {
    background: #fff8e7; }

.dialog-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #008BD0, #00b4db);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: white;
  flex-shrink: 0; }

.dialog-info {
  flex: 1;
  min-width: 0; }

.dialog-name {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 4px;
  color: #1f2937; }

.dialog-last-message {
  font-size: 12px;
  color: #6c757d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.dialog-time {
  font-size: 10px;
  color: #adb5bd;
  margin-top: 2px; }

.dialog-unread {
  background: #ef4444;
  color: white;
  border-radius: 20px;
  min-width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  padding: 0 6px; }

.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f8f9fa; }

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: white;
  border-bottom: 1px solid #e9ecef; }

.doctor-info {
  display: flex;
  align-items: center;
  gap: 12px; }

.doctor-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #008BD0, #00b4db);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: white; }

.doctor-details h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: #1f2937; }

.doctor-details p {
  font-size: 12px;
  color: #6c757d;
  margin: 0; }

.close-chat {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #adb5bd;
  transition: all 0.2s ease; }
  .close-chat:hover {
    color: #ef4444; }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px; }

.chat-message {
  display: flex;
  animation: fadeIn 0.3s ease; }
  .chat-message.mine {
    justify-content: flex-end; }
  .chat-message.theirs {
    justify-content: flex-start; }

.message-bubble {
  max-width: 70%;
  padding: 10px 16px;
  border-radius: 18px; }
  .mine .message-bubble {
    background: #008BD0;
    color: white;
    border-bottom-right-radius: 4px; }
  .theirs .message-bubble {
    background: white;
    color: #1f2937;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }

.message-text {
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word; }

.message-time {
  font-size: 10px;
  margin-top: 6px;
  opacity: 0.7; }

.chat-date-divider {
  text-align: center;
  margin: 16px 0; }
  .chat-date-divider span {
    background: #dee2e6;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    color: #6c757d; }

.chat-input {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  background: white;
  border-top: 1px solid #e9ecef; }
  .chat-input textarea {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #dee2e6;
    border-radius: 24px;
    resize: none;
    font-size: 14px;
    font-family: inherit; }
    .chat-input textarea:focus {
      outline: none;
      border-color: #008BD0; }
  .chat-input button {
    background: #008BD0;
    color: white;
    border: none;
    padding: 0 24px;
    border-radius: 24px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease; }
    .chat-input button:hover:not(:disabled) {
      background: #006ba3; }
    .chat-input button:disabled {
      background: #ced4da;
      cursor: not-allowed; }

.chat-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa; }

.empty-content {
  text-align: center; }

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5; }
  .empty-icon h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1f2937; }
  .empty-icon p {
    color: #6c757d; }

.loading {
  text-align: center;
  padding: 40px;
  color: #6c757d; }

.empty-messages {
  text-align: center;
  padding: 60px;
  color: #adb5bd; }

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

@media (max-width: 768px) {
  .chat-page {
    padding: 12px; }
  .chat-sidebar {
    width: 280px; }
  .message-bubble {
    max-width: 85%; } }

.dialog-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #008BD0, #00b4db);
  display: flex;
  align-items: center;
  justify-content: center; }

.dialog-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover; }

.dialog-avatar .avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: white; }

/* Стили для специализации врача */
.dialog-specialty {
  font-size: 11px;
  color: #6c757d;
  margin-bottom: 4px; }

/* Стили для сообщений с аватаром */
.chat-message.theirs {
  display: flex;
  gap: 10px;
  align-items: flex-start; }

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #008BD0, #00b4db);
  display: flex;
  align-items: center;
  justify-content: center; }

.message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover; }

.message-avatar .avatar-placeholder-small {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: white; }

.message-sender {
  font-size: 11px;
  font-weight: 600;
  color: #008BD0;
  margin-bottom: 4px; }

/* Стили для шапки чата */
.doctor-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #008BD0, #00b4db);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: white; }

.doctor-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover; }

/* Стили для пустого состояния */
.loading {
  text-align: center;
  padding: 60px 20px; }

.empty-icon {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.5; }

.loading h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #1f2937; }

.loading p {
  color: #6c757d;
  margin-bottom: 20px; }

.info-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 300px; }
  .info-card .info-card-header {
    background: linear-gradient(135deg, #008BD0 0%, #006ba3 100%);
    color: white;
    padding: 20px;
    flex-shrink: 0; }
    .info-card .info-card-header h5 {
      margin: 0;
      font-weight: 700; }
  .info-card .info-card-body {
    padding: 20px;
    flex: 1;
    overflow-y: auto; }
    .info-card .info-card-body .info-row {
      display: flex;
      align-items: flex-start;
      gap: 15px;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
      .info-card .info-card-body .info-row:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0; }
      .info-card .info-card-body .info-row .info-icon {
        font-size: 1.75rem;
        min-width: 2.5rem;
        text-align: center;
        flex-shrink: 0; }
      .info-card .info-card-body .info-row .info-content {
        flex: 1; }
        .info-card .info-card-body .info-row .info-content .info-label {
          font-size: 0.7rem;
          color: #6b7280;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          margin-bottom: 0.25rem; }
        .info-card .info-card-body .info-row .info-content .info-value {
          font-weight: 600;
          color: #2c3e50;
          font-size: 1rem;
          line-height: 1.4;
          word-wrap: break-word;
          overflow-wrap: break-word; }
          .info-card .info-card-body .info-row .info-content .info-value .spots-badge {
            display: inline-block;
            font-size: 0.7rem;
            padding: 0.2rem 0.5rem;
            border-radius: 0.5rem;
            margin-left: 0.5rem;
            font-weight: 500;
            white-space: nowrap; }
            .info-card .info-card-body .info-row .info-content .info-value .spots-badge.spots-available {
              background: #d1fae5;
              color: #059669; }
            .info-card .info-card-body .info-row .info-content .info-value .spots-badge.spots-full {
              background: #fee2e2;
              color: #dc2626; }
          .info-card .info-card-body .info-row .info-content .info-value .cme-value {
            font-weight: 700;
            color: #8b5cf6;
            font-size: 1.1rem; }
          .info-card .info-card-body .info-row .info-content .info-value .cme-status {
            font-size: 0.7rem;
            color: #6b7280;
            margin-left: 0.25rem; }
  .info-card .info-card-footer {
    padding: 20px;
    background: #f9fafb;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
    margin-top: auto; }
    .info-card .info-card-footer .btn-register {
      display: block;
      width: 100%;
      background: linear-gradient(135deg, #008BD0 0%, #006ba3 100%);
      color: white;
      text-align: center;
      padding: 0.875rem;
      border-radius: 0.75rem;
      text-decoration: none;
      font-weight: 700;
      transition: all 0.3s; }
      .info-card .info-card-footer .btn-register:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(0, 139, 208, 0.15); }
    .info-card .info-card-footer .events-btn-login {
      display: block;
      width: 100%;
      background: #008BD0;
      color: white;
      text-align: center;
      padding: 0.875rem;
      border-radius: 0.75rem;
      text-decoration: none;
      font-weight: 700;
      transition: all 0.3s; }
      .info-card .info-card-footer .events-btn-login:hover {
        opacity: 0.9;
        transform: translateY(-2px); }
    .info-card .info-card-footer .btn-outline-primary {
      display: block;
      background: transparent;
      border: 2px solid #008BD0;
      color: #008BD0;
      text-align: center;
      padding: 0.75rem;
      border-radius: 0.75rem;
      text-decoration: none;
      font-weight: 600;
      transition: all 0.3s; }
      .info-card .info-card-footer .btn-outline-primary:hover {
        background: #008BD0;
        color: white; }
    .info-card .info-card-footer .alert-message {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem;
      border-radius: 0.75rem;
      margin-bottom: 0; }
      .info-card .info-card-footer .alert-message .alert-icon {
        font-size: 1.25rem;
        flex-shrink: 0; }
      .info-card .info-card-footer .alert-message.alert-success {
        background: #d1fae5;
        color: #059669; }
      .info-card .info-card-footer .alert-message.alert-warning {
        background: #fef3c7;
        color: #d97706; }
      .info-card .info-card-footer .alert-message.alert-info {
        background: #dbeafe;
        color: #2563eb; }

@media (max-width: 480px) {
  .info-card {
    position: relative;
    top: 0;
    margin-top: 20px; }
    .info-card .info-card-body {
      padding: 15px; }
      .info-card .info-card-body .info-row {
        gap: 10px;
        margin-bottom: 15px;
        padding-bottom: 15px; }
        .info-card .info-card-body .info-row .info-icon {
          font-size: 1.5rem;
          min-width: 2rem; }
        .info-card .info-card-body .info-row .info-content .info-value {
          font-size: 0.9rem; }
          .info-card .info-card-body .info-row .info-content .info-value .spots-badge {
            display: inline-block;
            margin-left: 0;
            margin-top: 0.25rem;
            white-space: normal; }
    .info-card .info-card-footer {
      padding: 15px; } }

.info-card-body .info-row .info-content .info-value {
  word-break: break-word; }
  .info-card-body .info-row .info-content .info-value a {
    word-break: break-all; }

.event-detail {
  background: #f9fafb;
  min-height: 100vh; }
  .event-detail .breadcrumb-section {
    margin-top: 60px;
    background: #ffffff;
    padding: 20px 0;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); }
    .event-detail .breadcrumb-section .breadcrumb-nav {
      font-size: 0.875rem; }
      .event-detail .breadcrumb-section .breadcrumb-nav .breadcrumb-link {
        color: #6b7280;
        text-decoration: none;
        transition: color 0.3s; }
        .event-detail .breadcrumb-section .breadcrumb-nav .breadcrumb-link:hover {
          color: #008BD0; }
      .event-detail .breadcrumb-section .breadcrumb-nav .breadcrumb-separator {
        margin: 0 10px;
        color: #6b7280; }
      .event-detail .breadcrumb-section .breadcrumb-nav .breadcrumb-current {
        color: #008BD0;
        font-weight: 600; }
  .event-detail .event-header {
    margin-bottom: 30px; }
    .event-detail .event-header .event-title {
      font-size: 2rem;
      font-weight: 800;
      color: #2c3e50;
      margin-bottom: 15px;
      font-family: "Ubuntu", system-ui, sans-serif; }
    .event-detail .event-header .event-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 20px; }
      .event-detail .event-header .event-badges .badge {
        padding: 5px 15px;
        border-radius: 12px;
        font-size: 0.875rem;
        font-weight: 600; }
        .event-detail .event-header .event-badges .badge.type-masterclass {
          background: #8b5cf6;
          color: white; }
        .event-detail .event-header .event-badges .badge.type-webinar {
          background: #3b82f6;
          color: white; }
        .event-detail .event-header .event-badges .badge.type-meeting {
          background: #10b981;
          color: white; }
        .event-detail .event-header .event-badges .badge.type-conference {
          background: #ef4444;
          color: white; }
        .event-detail .event-header .event-badges .badge.type-other {
          background: #6b7280;
          color: white; }
        .event-detail .event-header .event-badges .badge.online {
          background: #10b981;
          color: white; }
        .event-detail .event-header .event-badges .badge.offline {
          background: #6b7280;
          color: white; }
  .event-detail .event-main-image {
    margin-bottom: 30px;
    border-radius: 16px;
    overflow: hidden; }
    .event-detail .event-main-image img {
      width: 100%;
      height: auto;
      object-fit: cover; }
  .event-detail .event-content .event-description {
    background: #ffffff;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); }
    .event-detail .event-content .event-description h3 {
      font-size: 1.25rem;
      font-weight: 700;
      color: #2c3e50;
      margin-bottom: 20px; }
    .event-detail .event-content .event-description p {
      line-height: 1.6;
      color: #1f2937; }
  .event-detail .info-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 20px; }
    .event-detail .info-card .info-card-header {
      background: linear-gradient(135deg, #008BD0 0%, #006ba3 100%);
      color: white;
      padding: 20px; }
      .event-detail .info-card .info-card-header h5 {
        margin: 0;
        font-weight: 700; }
    .event-detail .info-card .info-card-body {
      padding: 20px; }
      .event-detail .info-card .info-card-body .info-row {
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
        .event-detail .info-card .info-card-body .info-row:last-child {
          border-bottom: none;
          margin-bottom: 0;
          padding-bottom: 0; }
        .event-detail .info-card .info-card-body .info-row .info-label {
          font-weight: 600;
          color: #2c3e50;
          margin-bottom: 5px;
          display: block; }
          .event-detail .info-card .info-card-body .info-row .info-label i {
            margin-right: 10px;
            color: #008BD0; }
        .event-detail .info-card .info-card-body .info-row .info-value {
          color: #1f2937;
          font-size: 1.125rem; }
        .event-detail .info-card .info-card-body .info-row .spots-left {
          color: #f59e0b;
          font-weight: 600; }
        .event-detail .info-card .info-card-body .info-row .spots-full {
          color: #ef4444;
          font-weight: 600; }
    .event-detail .info-card .info-card-footer {
      padding: 20px;
      background: #f9fafb; }
      .event-detail .info-card .info-card-footer .btn-register {
        width: 100%;
        background: linear-gradient(135deg, #008BD0 0%, #006ba3 100%);
        color: white;
        padding: 15px;
        border-radius: 12px;
        text-decoration: none;
        font-weight: 700;
        display: inline-block;
        text-align: center;
        transition: all 0.3s; }
        .event-detail .info-card .info-card-footer .btn-register:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 25px rgba(0, 139, 208, 0.15); }
      .event-detail .info-card .info-card-footer .btn-login {
        width: 100%;
        background: #000000;
        color: white;
        padding: 15px;
        border-radius: 12px;
        text-decoration: none;
        font-weight: 700;
        display: inline-block;
        text-align: center;
        transition: all 0.3s; }
        .event-detail .info-card .info-card-footer .btn-login:hover {
          opacity: 0.9; }
      .event-detail .info-card .info-card-footer .alert-message {
        text-align: center;
        margin: 0; }
        .event-detail .info-card .info-card-footer .alert-message.alert-success {
          background: #d4edda;
          color: #155724;
          padding: 15px;
          border-radius: 12px; }
        .event-detail .info-card .info-card-footer .alert-message.alert-warning {
          background: #fff3cd;
          color: #856404;
          padding: 15px;
          border-radius: 12px; }
        .event-detail .info-card .info-card-footer .alert-message.alert-info {
          background: #d1ecf1;
          color: #0c5460;
          padding: 15px;
          border-radius: 12px; }
  .event-detail .speakers-section {
    background: #ffffff;
    border-radius: 16px;
    padding: 30px;
    margin-top: 30px; }
    .event-detail .speakers-section h3 {
      font-size: 1.25rem;
      font-weight: 700;
      color: #2c3e50;
      margin-bottom: 20px; }
    .event-detail .speakers-section .speakers-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px; }
      .event-detail .speakers-section .speakers-grid .speaker-card {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 15px;
        border-radius: 12px;
        background: #f9fafb;
        transition: all 0.3s; }
        .event-detail .speakers-section .speakers-grid .speaker-card:hover {
          transform: translateX(5px);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
        .event-detail .speakers-section .speakers-grid .speaker-card .speaker-photo {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          object-fit: cover; }
        .event-detail .speakers-section .speakers-grid .speaker-card .speaker-photo-placeholder {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background: linear-gradient(135deg, #008BD0 0%, #006ba3 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-weight: 700;
          font-size: 1.25rem; }
        .event-detail .speakers-section .speakers-grid .speaker-card .speaker-info {
          flex: 1; }
          .event-detail .speakers-section .speakers-grid .speaker-card .speaker-info .speaker-name {
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 4px; }
          .event-detail .speakers-section .speakers-grid .speaker-card .speaker-info .speaker-title {
            font-size: 0.875rem;
            color: #6b7280; }

.cme-badge {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  color: white;
  font-weight: 600; }

.cme-value {
  font-weight: 700;
  color: #8b5cf6;
  font-size: 1.25rem; }

.cme-status {
  font-size: 0.75rem;
  color: #6b7280;
  margin-left: 0.25rem; }

.event-filters {
  margin-top: 60px;
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); }
  .event-filters .filter-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 15px;
    font-family: "Ubuntu", system-ui, sans-serif; }
  .event-filters .filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px; }
    .event-filters .filter-group .filter-btn {
      padding: 10px 20px;
      border-radius: 12px;
      font-size: 1rem;
      font-weight: 500;
      transition: all 0.3s;
      cursor: pointer;
      background: #f9fafb;
      color: #1f2937;
      border: none; }
      .event-filters .filter-group .filter-btn:hover {
        background: #008BD0;
        color: white;
        transform: translateY(-2px); }
      .event-filters .filter-group .filter-btn.active {
        background: #008BD0;
        color: white;
        box-shadow: 0 10px 25px rgba(0, 139, 208, 0.15); }

.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 40px; }
  .pagination .page-link {
    padding: 10px 15px;
    background: #ffffff;
    color: #008BD0;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s; }
    .pagination .page-link:hover {
      background: #008BD0;
      color: white;
      transform: translateY(-2px); }
    .pagination .page-link.active {
      background: #008BD0;
      color: white;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }

.registration-page {
  background: #f9fafb;
  min-height: 100vh;
  padding: 40px 0; }
  .registration-page .registration-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); }
    .registration-page .registration-card .card-header {
      background: linear-gradient(135deg, #008BD0 0%, #006ba3 100%);
      color: white;
      padding: 30px; }
      .registration-page .registration-card .card-header h4 {
        margin: 0;
        font-weight: 700; }
    .registration-page .registration-card .card-body {
      padding: 30px; }
      .registration-page .registration-card .card-body .event-info-alert {
        background: #d1ecf1;
        color: #0c5460;
        padding: 15px;
        border-radius: 12px;
        margin-bottom: 30px;
        border-left: 4px solid #008BD0; }
      .registration-page .registration-card .card-body .form-group {
        margin-bottom: 20px; }
        .registration-page .registration-card .card-body .form-group .form-label {
          display: block;
          font-weight: 600;
          color: #2c3e50;
          margin-bottom: 5px; }
        .registration-page .registration-card .card-body .form-group .form-control {
          width: 100%;
          padding: 15px;
          border: 2px solid #e5e7eb;
          border-radius: 12px;
          font-size: 1rem;
          transition: all 0.3s; }
          .registration-page .registration-card .card-body .form-group .form-control:focus {
            border-color: #008BD0;
            outline: none;
            box-shadow: 0 0 0 3px rgba(0, 139, 208, 0.1); }
          .registration-page .registration-card .card-body .form-group .form-control.is-invalid {
            border-color: #dc3545; }
        .registration-page .registration-card .card-body .form-group .invalid-feedback {
          color: #dc3545;
          font-size: 0.875rem;
          margin-top: 5px; }
        .registration-page .registration-card .card-body .form-group .form-check {
          display: flex;
          align-items: center;
          gap: 10px; }
          .registration-page .registration-card .card-body .form-group .form-check .form-check-input {
            width: 18px;
            height: 18px;
            cursor: pointer; }
          .registration-page .registration-card .card-body .form-group .form-check .form-check-label {
            color: #1f2937;
            cursor: pointer; }
      .registration-page .registration-card .card-body .form-actions {
        margin-top: 30px; }
        .registration-page .registration-card .card-body .form-actions .btn-submit {
          width: 100%;
          background: linear-gradient(135deg, #008BD0 0%, #006ba3 100%);
          color: white;
          padding: 15px;
          border-radius: 12px;
          font-weight: 700;
          font-size: 1.125rem;
          border: none;
          cursor: pointer;
          transition: all 0.3s; }
          .registration-page .registration-card .card-body .form-actions .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 139, 208, 0.15); }
        .registration-page .registration-card .card-body .form-actions .btn-back {
          width: 100%;
          background: #f9fafb;
          color: #1f2937;
          padding: 15px;
          border-radius: 12px;
          text-decoration: none;
          display: inline-block;
          text-align: center;
          margin-top: 15px;
          transition: all 0.3s; }
          .registration-page .registration-card .card-body .form-actions .btn-back:hover {
            background: #6b7280;
            color: white; }

@media (max-width: 480px) {
  .events-grid {
    grid-template-columns: 1fr !important; }
  .event-detail .event-header .event-title {
    font-size: 1.5rem; }
  .event-detail .info-card {
    position: relative;
    top: 0;
    margin-top: 30px; }
  .registration-body {
    grid-template-columns: 1fr !important; }
  .speakers-grid {
    grid-template-columns: 1fr !important; }
  .event-filters .filter-group .filter-btn {
    padding: 10px 15px;
    font-size: 0.875rem; }
  .registration-card .card-body {
    padding: 20px !important; } }

@media (min-width: 480px) and (max-width: 768px) {
  .events-grid {
    grid-template-columns: repeat(2, 1fr) !important; }
  .speakers-grid {
    grid-template-columns: repeat(2, 1fr) !important; } }

.my-registrations {
  background: #f9fafb;
  min-height: 100vh;
  padding: 40px 0; }
  .my-registrations .page-title {
    font-size: 2rem;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 30px; }
  .my-registrations .registrations-list {
    display: flex;
    flex-direction: column;
    gap: 20px; }
  .my-registrations .registration-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    transition: all 0.3s; }
    .my-registrations .registration-card:hover {
      box-shadow: 0 12px 30px rgba(0, 139, 208, 0.12);
      transform: translateY(-2px); }
    .my-registrations .registration-card .registration-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
      .my-registrations .registration-card .registration-header .event-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: #2c3e50;
        margin: 0; }
      .my-registrations .registration-card .registration-header .status-badge {
        padding: 5px 15px;
        border-radius: 12px;
        font-size: 0.875rem;
        font-weight: 600; }
        .my-registrations .registration-card .registration-header .status-badge.status-pending {
          background: #fef3c7;
          color: #d97706; }
        .my-registrations .registration-card .registration-header .status-badge.status-confirmed {
          background: #d1fae5;
          color: #059669; }
        .my-registrations .registration-card .registration-header .status-badge.status-cancelled {
          background: #fee2e2;
          color: #dc2626; }
        .my-registrations .registration-card .registration-header .status-badge.status-approved {
          background: #dbeafe;
          color: #2563eb; }
        .my-registrations .registration-card .registration-header .status-badge.status-attended {
          background: #e0e7ff;
          color: #4f46e5; }
    .my-registrations .registration-card .registration-body {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
      margin-bottom: 20px; }
      .my-registrations .registration-card .registration-body .info-item {
        display: flex;
        flex-direction: column; }
        .my-registrations .registration-card .registration-body .info-item .info-label {
          font-size: 0.875rem;
          color: #6b7280;
          margin-bottom: 5px;
          display: block; }
        .my-registrations .registration-card .registration-body .info-item .info-value {
          font-weight: 600;
          color: #1f2937; }
    .my-registrations .registration-card .registration-footer {
      display: flex;
      justify-content: flex-end;
      gap: 15px;
      padding-top: 15px;
      border-top: 1px solid rgba(0, 0, 0, 0.05); }
      .my-registrations .registration-card .registration-footer .btn-view {
        background: transparent;
        color: #008BD0;
        padding: 10px 20px;
        border-radius: 12px;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s;
        border: 2px solid #008BD0; }
        .my-registrations .registration-card .registration-footer .btn-view:hover {
          background: #008BD0;
          color: white;
          transform: translateY(-2px); }
      .my-registrations .registration-card .registration-footer .btn-cancel {
        background: #dc3545;
        color: white;
        padding: 10px 20px;
        border-radius: 12px;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s;
        border: none;
        cursor: pointer; }
        .my-registrations .registration-card .registration-footer .btn-cancel:hover {
          background: #c82333;
          transform: translateY(-2px); }
  .my-registrations .empty-state {
    text-align: center;
    padding: 50px;
    background: #ffffff;
    border-radius: 16px; }
    .my-registrations .empty-state .empty-icon {
      font-size: 64px;
      margin-bottom: 20px; }
    .my-registrations .empty-state h3 {
      font-size: 1.25rem;
      color: #2c3e50;
      margin-bottom: 15px; }
    .my-registrations .empty-state p {
      color: #6b7280;
      margin-bottom: 20px; }
    .my-registrations .empty-state .btn-browse {
      background: linear-gradient(135deg, #008BD0 0%, #006ba3 100%);
      color: white;
      padding: 15px 30px;
      border-radius: 12px;
      text-decoration: none;
      display: inline-block;
      font-weight: 600;
      transition: all 0.3s; }
      .my-registrations .empty-state .btn-browse:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(0, 139, 208, 0.15); }

@media (max-width: 480px) {
  .my-registrations .registration-card .registration-header {
    flex-direction: column;
    gap: 10px; }
  .my-registrations .registration-card .registration-body {
    grid-template-columns: 1fr; }
  .my-registrations .registration-card .registration-footer {
    flex-direction: column; }
    .my-registrations .registration-card .registration-footer .btn-view,
    .my-registrations .registration-card .registration-footer .btn-cancel {
      text-align: center; } }

.ck-content {
  line-height: 1.8;
  color: #1f2937;
  font-size: 1.05rem;
  letter-spacing: -0.01em; }
  .ck-content h1, .ck-content h2, .ck-content h3, .ck-content h4, .ck-content h5, .ck-content h6 {
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    font-weight: 800;
    color: #2c3e50;
    line-height: 1.2;
    letter-spacing: -0.02em; }
    .ck-content h1:first-child, .ck-content h2:first-child, .ck-content h3:first-child, .ck-content h4:first-child, .ck-content h5:first-child, .ck-content h6:first-child {
      margin-top: 0; }
  .ck-content h1 {
    font-size: 2.5rem;
    background: linear-gradient(135deg, #2c3e50 0%, #008BD0 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .ck-content h2 {
    font-size: 2rem;
    border-bottom: none;
    position: relative;
    padding-bottom: 0.75rem; }
    .ck-content h2:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 60px;
      height: 3px;
      background: linear-gradient(135deg, #008BD0 0%, #006ba3 100%);
      border-radius: 3px; }
  .ck-content h3 {
    font-size: 1.75rem;
    font-weight: 700; }
  .ck-content h4 {
    font-size: 1.5rem;
    font-weight: 600; }
  .ck-content h5 {
    font-size: 1.25rem;
    font-weight: 600; }
  .ck-content h6 {
    font-size: 1.125rem;
    font-weight: 600; }
  .ck-content p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
    font-weight: 400; }
    .ck-content p:last-child {
      margin-bottom: 0; }
  .ck-content img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    margin: 2rem 0;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
    .ck-content img:hover {
      transform: scale(1.02) translateY(-5px);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
    .ck-content img.align-left {
      float: left;
      margin-right: 2rem;
      margin-bottom: 1rem;
      max-width: 45%; }
    .ck-content img.align-right {
      float: right;
      margin-left: 2rem;
      margin-bottom: 1rem;
      max-width: 45%; }
    .ck-content img.align-center {
      display: block;
      margin-left: auto;
      margin-right: auto; }
  .ck-content ul, .ck-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.75rem; }
    .ck-content ul li, .ck-content ol li {
      margin-bottom: 0.75rem;
      line-height: 1.7;
      position: relative; }
  .ck-content ul {
    list-style-type: none; }
    .ck-content ul li {
      position: relative;
      padding-left: 0.5rem; }
      .ck-content ul li:before {
        content: '▹';
        position: absolute;
        left: -1.25rem;
        color: #008BD0;
        font-weight: bold; }
    .ck-content ul ul li:before {
      content: '◦'; }
  .ck-content ol {
    list-style-type: none;
    counter-reset: custom-counter; }
    .ck-content ol li {
      counter-increment: custom-counter;
      padding-left: 0.5rem; }
      .ck-content ol li:before {
        content: counter(custom-counter) ".";
        position: absolute;
        left: -1.5rem;
        color: #008BD0;
        font-weight: 700; }
  .ck-content a {
    color: #008BD0;
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease; }
    .ck-content a:after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 2px;
      background: linear-gradient(135deg, #008BD0 0%, #006ba3 100%);
      transition: width 0.3s ease; }
    .ck-content a:hover {
      color: #006ba3; }
      .ck-content a:hover:after {
        width: 100%; }
  .ck-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 2rem 0;
    font-size: 0.9rem;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); }
    .ck-content table th, .ck-content table td {
      padding: 1rem 1.25rem;
      text-align: left;
      vertical-align: top;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
    .ck-content table th {
      background: linear-gradient(135deg, #008BD0 0%, #006ba3 100%);
      color: white;
      font-weight: 600;
      border: none; }
    .ck-content table tr {
      transition: all 0.3s ease; }
      .ck-content table tr:hover {
        background: rgba(0, 139, 208, 0.03); }
    .ck-content table td {
      border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
  .ck-content blockquote {
    border-left: none;
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    background: linear-gradient(135deg, rgba(0, 139, 208, 0.05) 0%, rgba(0, 139, 208, 0.02) 100%);
    border-radius: 20px;
    font-style: normal;
    color: #1f2937;
    position: relative; }
    .ck-content blockquote:before {
      content: '"';
      position: absolute;
      top: 0.5rem;
      left: 1rem;
      font-size: 4rem;
      color: rgba(0, 139, 208, 0.2);
      font-family: serif; }
    .ck-content blockquote p {
      margin-bottom: 0.5rem;
      position: relative;
      z-index: 1; }
    .ck-content blockquote cite {
      display: block;
      margin-top: 0.75rem;
      font-size: 0.875rem;
      color: #6b7280;
      font-style: normal;
      font-weight: 500; }
  .ck-content code {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f5f7 100%);
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 0.85rem;
    color: #e83e8c;
    border: 1px solid rgba(0, 0, 0, 0.05); }
  .ck-content pre {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f5f7 100%);
    padding: 1.5rem;
    border-radius: 16px;
    overflow-x: auto;
    margin: 1.5rem 0;
    border: 1px solid rgba(0, 0, 0, 0.05); }
    .ck-content pre code {
      background: none;
      padding: 0;
      color: #1f2937;
      border: none; }
  .ck-content hr {
    margin: 2.5rem 0;
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, #008BD0, transparent); }

.event-extra-blocks {
  margin-top: 4rem; }
  .event-extra-blocks h3 {
    font-size: 2rem;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 2.5rem;
    position: relative;
    display: inline-block; }
    .event-extra-blocks h3 .title-icon {
      margin-right: 0.75rem;
      font-size: 2rem;
      vertical-align: middle; }
    .event-extra-blocks h3:after {
      content: '';
      position: absolute;
      bottom: -0.5rem;
      left: 0;
      width: 100%;
      height: 3px;
      background: linear-gradient(135deg, #008BD0 0%, #006ba3 100%);
      border-radius: 3px; }
  .event-extra-blocks .extra-block {
    margin-bottom: 3rem;
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.03); }
    .event-extra-blocks .extra-block:hover {
      transform: translateY(-8px);
      box-shadow: 0 25px 50px -12px rgba(0, 139, 208, 0.15); }
    .event-extra-blocks .extra-block.extra-block-left .extra-block-inner, .event-extra-blocks .extra-block.extra-block-right .extra-block-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0; }
      @media (max-width: 480px) {
        .event-extra-blocks .extra-block.extra-block-left .extra-block-inner, .event-extra-blocks .extra-block.extra-block-right .extra-block-inner {
          grid-template-columns: 1fr; } }
    .event-extra-blocks .extra-block.extra-block-right .extra-block-inner {
      direction: rtl; }
      .event-extra-blocks .extra-block.extra-block-right .extra-block-inner .extra-block-content {
        direction: ltr; }
      @media (max-width: 480px) {
        .event-extra-blocks .extra-block.extra-block-right .extra-block-inner {
          direction: ltr; } }
    .event-extra-blocks .extra-block .extra-block-inner .extra-block-image {
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
      min-height: 350px; }
      .event-extra-blocks .extra-block .extra-block-inner .extra-block-image .image-wrapper {
        position: relative;
        height: 100%;
        min-height: 350px; }
        .event-extra-blocks .extra-block .extra-block-inner .extra-block-image .image-wrapper img {
          width: 100%;
          height: 350px;
          object-fit: cover;
          transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
          .event-extra-blocks .extra-block .extra-block-inner .extra-block-image .image-wrapper img:hover {
            transform: scale(1.08); }
        .event-extra-blocks .extra-block .extra-block-inner .extra-block-image .image-wrapper .image-caption {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
          color: white;
          padding: 1.5rem;
          font-size: 0.9rem;
          font-weight: 500;
          text-align: center;
          backdrop-filter: blur(10px);
          transform: translateY(100%);
          transition: transform 0.3s ease; }
        .event-extra-blocks .extra-block .extra-block-inner .extra-block-image .image-wrapper:hover .image-caption {
          transform: translateY(0); }
    .event-extra-blocks .extra-block .extra-block-inner .extra-block-content {
      padding: 2rem;
      display: flex;
      align-items: center; }
      .event-extra-blocks .extra-block .extra-block-inner .extra-block-content .content-wrapper {
        width: 100%; }
        .event-extra-blocks .extra-block .extra-block-inner .extra-block-content .content-wrapper .ck-content {
          padding: 0; }
          .event-extra-blocks .extra-block .extra-block-inner .extra-block-content .content-wrapper .ck-content p:last-child {
            margin-bottom: 0; }
    .event-extra-blocks .extra-block.extra-block-no-image .extra-block-inner {
      grid-template-columns: 1fr; }
    .event-extra-blocks .extra-block.extra-block-no-image .extra-block-content {
      padding: 2.5rem; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95); }
  to {
    opacity: 1;
    transform: scale(1); } }

.event-extra-blocks .extra-block {
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: both; }
  .event-extra-blocks .extra-block:nth-child(1) {
    animation-delay: 0.1s; }
  .event-extra-blocks .extra-block:nth-child(2) {
    animation-delay: 0.2s; }
  .event-extra-blocks .extra-block:nth-child(3) {
    animation-delay: 0.3s; }
  .event-extra-blocks .extra-block:nth-child(4) {
    animation-delay: 0.4s; }
  .event-extra-blocks .extra-block:nth-child(5) {
    animation-delay: 0.5s; }
  .event-extra-blocks .extra-block:nth-child(6) {
    animation-delay: 0.6s; }
  .event-extra-blocks .extra-block:nth-child(7) {
    animation-delay: 0.7s; }
  .event-extra-blocks .extra-block:nth-child(8) {
    animation-delay: 0.8s; }
  .event-extra-blocks .extra-block:nth-child(9) {
    animation-delay: 0.9s; }
  .event-extra-blocks .extra-block:nth-child(10) {
    animation-delay: 1s; }

.ck-content img {
  animation: fadeInScale 0.5s cubic-bezier(0.4, 0, 0.2, 1); }

@media (max-width: 480px) {
  .ck-content {
    font-size: 1rem; }
    .ck-content h1 {
      font-size: 1.75rem; }
    .ck-content h2 {
      font-size: 1.5rem; }
    .ck-content h3 {
      font-size: 1.25rem; }
    .ck-content img.align-left, .ck-content img.align-right {
      float: none;
      max-width: 100%;
      margin: 1.5rem 0;
      display: block; }
    .ck-content table {
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch; }
    .ck-content blockquote {
      padding: 1.5rem; }
      .ck-content blockquote:before {
        font-size: 2rem; }
  .event-extra-blocks {
    margin-top: 2rem; }
    .event-extra-blocks h3 {
      font-size: 1.5rem; }
    .event-extra-blocks .extra-block {
      margin-bottom: 2rem; }
      .event-extra-blocks .extra-block .extra-block-inner .extra-block-image {
        min-height: 250px; }
        .event-extra-blocks .extra-block .extra-block-inner .extra-block-image .image-wrapper {
          min-height: 250px; }
          .event-extra-blocks .extra-block .extra-block-inner .extra-block-image .image-wrapper img {
            height: 250px; }
      .event-extra-blocks .extra-block .extra-block-inner .extra-block-content {
        padding: 1.5rem; } }

.glass-effect {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2); }

html {
  scroll-behavior: smooth; }

::-webkit-scrollbar {
  width: 10px;
  height: 10px; }

::-webkit-scrollbar-track {
  background: #f9fafb;
  border-radius: 10px; }

::-webkit-scrollbar-thumb {
  background: #008BD0;
  border-radius: 10px; }
  ::-webkit-scrollbar-thumb:hover {
    background: #006ba3; }

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 30px; }

.event-lists-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  transition: all 0.3s;
  position: relative; }
  .event-lists-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 139, 208, 0.12); }
  .event-lists-card .event-card-image {
    position: relative;
    height: 220px;
    overflow: hidden;
    background: #f9fafb; }
    .event-lists-card .event-card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s; }
      .event-lists-card .event-card-image img:hover {
        transform: scale(1.05); }
    .event-lists-card .event-card-image .event-badge {
      position: absolute;
      top: 15px;
      right: 15px;
      padding: 5px 15px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 600;
      color: white;
      z-index: 2;
      backdrop-filter: blur(4px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
      .event-lists-card .event-card-image .event-badge.online {
        background: linear-gradient(135deg, #10b981, #059669); }
      .event-lists-card .event-card-image .event-badge.offline {
        background: linear-gradient(135deg, #6b7280, #4b5563); }
    .event-lists-card .event-card-image .event-type-badge {
      position: absolute;
      bottom: 15px;
      left: 15px;
      padding: 5px 15px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 600;
      background: rgba(0, 0, 0, 0.8);
      backdrop-filter: blur(4px);
      color: white;
      z-index: 2; }
  .event-lists-card .event-card-content {
    padding: 20px; }
    .event-lists-card .event-card-content .event-title {
      font-size: 1.25rem;
      font-weight: 700;
      color: #2c3e50;
      margin-bottom: 15px;
      font-family: "Ubuntu", system-ui, sans-serif;
      line-height: 1.3; }
      .event-lists-card .event-card-content .event-title a {
        text-decoration: none;
        color: inherit;
        transition: color 0.3s; }
        .event-lists-card .event-card-content .event-title a:hover {
          color: #008BD0; }
    .event-lists-card .event-card-content .event-info {
      margin-bottom: 15px; }
      .event-lists-card .event-card-content .event-info .info-item {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
        color: #6b7280;
        font-size: 0.875rem; }
        .event-lists-card .event-card-content .event-info .info-item .icon {
          width: 24px;
          font-size: 1rem;
          display: inline-block; }
        .event-lists-card .event-card-content .event-info .info-item span {
          flex: 1; }
    .event-lists-card .event-card-content .event-description {
      color: #1f2937;
      line-height: 1.5;
      margin: 15px 0;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      font-size: 0.875rem;
      min-height: 60px; }
    .event-lists-card .event-card-content .event-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      padding-top: 15px;
      border-top: 1px solid rgba(0, 0, 0, 0.06); }
      .event-lists-card .event-card-content .event-footer .participants {
        display: flex;
        align-items: center;
        gap: 5px;
        color: #6b7280;
        font-size: 0.875rem;
        font-weight: 500; }
        .event-lists-card .event-card-content .event-footer .participants i {
          color: #008BD0;
          font-style: normal; }
      .event-lists-card .event-card-content .event-footer .btn-register {
        background: linear-gradient(135deg, #008BD0 0%, #006ba3 100%);
        color: white;
        padding: 10px 30px;
        border-radius: 12px;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s;
        font-size: 0.875rem;
        display: inline-block; }
        .event-lists-card .event-card-content .event-footer .btn-register:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 25px rgba(0, 139, 208, 0.15); }

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 50px;
  background: #ffffff;
  border-radius: 16px; }
  .empty-state p {
    color: #6b7280;
    font-size: 1.125rem;
    margin: 0; }

@media (max-width: 480px) {
  .events-grid {
    grid-template-columns: 1fr;
    gap: 20px; }
  .event-lists-card .event-card-image {
    height: 180px; }
  .event-lists-card .event-card-content {
    padding: 15px; }
    .event-lists-card .event-card-content .event-title {
      font-size: 1.125rem; }
    .event-lists-card .event-card-content .event-info .info-item {
      font-size: 0.75rem; }
    .event-lists-card .event-card-content .event-description {
      font-size: 0.75rem;
      -webkit-line-clamp: 2; }
    .event-lists-card .event-card-content .event-footer {
      flex-direction: column;
      gap: 15px; }
      .event-lists-card .event-card-content .event-footer .btn-register {
        width: 100%;
        text-align: center; } }

@media (min-width: 480px) and (max-width: 768px) {
  .events-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px; }
  .event-lists-card .event-card-image {
    height: 200px; } }

@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

.event-lists-card {
  animation: cardFadeIn 0.5s ease-out;
  animation-fill-mode: both; }
  .event-lists-card:nth-child(1) {
    animation-delay: 0.05s; }
  .event-lists-card:nth-child(2) {
    animation-delay: 0.1s; }
  .event-lists-card:nth-child(3) {
    animation-delay: 0.15s; }
  .event-lists-card:nth-child(4) {
    animation-delay: 0.2s; }
  .event-lists-card:nth-child(5) {
    animation-delay: 0.25s; }
  .event-lists-card:nth-child(6) {
    animation-delay: 0.3s; }
  .event-lists-card:nth-child(7) {
    animation-delay: 0.35s; }
  .event-lists-card:nth-child(8) {
    animation-delay: 0.4s; }
  .event-lists-card:nth-child(9) {
    animation-delay: 0.45s; }
  .event-lists-card:nth-child(10) {
    animation-delay: 0.5s; }
  .event-lists-card:nth-child(11) {
    animation-delay: 0.55s; }
  .event-lists-card:nth-child(12) {
    animation-delay: 0.6s; }
  .event-lists-card:nth-child(13) {
    animation-delay: 0.65s; }
  .event-lists-card:nth-child(14) {
    animation-delay: 0.7s; }
  .event-lists-card:nth-child(15) {
    animation-delay: 0.75s; }
  .event-lists-card:nth-child(16) {
    animation-delay: 0.8s; }
  .event-lists-card:nth-child(17) {
    animation-delay: 0.85s; }
  .event-lists-card:nth-child(18) {
    animation-delay: 0.9s; }
  .event-lists-card:nth-child(19) {
    animation-delay: 0.95s; }
  .event-lists-card:nth-child(20) {
    animation-delay: 1s; }

:root {
  --primary: #008BD0;
  --primary-dark: #006ba3;
  --primary-light: #e0f2fe;
  --gradient-primary: linear-gradient(135deg, #008BD0 0%, #00b4db 100%);
  --gradient-dark: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  --glass-bg: rgba(255, 255, 255, 0.9);
  --glass-border: 1px solid rgba(255, 255, 255, 0.2);
  --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.1);
  --shadow-primary: 0 10px 30px rgba(0, 139, 208, 0.2);
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1); }

.hero-modern {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
  overflow: hidden; }
  .hero-modern__bg {
    position: absolute;
    inset: 0;
    overflow: hidden; }
  .hero-modern__content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin: 0 auto; }
  .hero-modern__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 139, 208, 0.1);
    backdrop-filter: blur(10px);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary);
    margin-bottom: 24px; }
  .hero-modern__title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #1a1a2e; }
  .hero-modern__desc {
    font-size: 1.125rem;
    color: #4a5568;
    margin-bottom: 40px;
    line-height: 1.6; }
  .hero-modern__stats {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap; }
  .hero-modern__scroll {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 0.75rem;
    color: #6c757d; }

.gradient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.6; }

.orb-1 {
  width: 400px;
  height: 400px;
  background: var(--primary);
  top: -100px;
  left: -100px;
  animation: float 20s infinite; }

.orb-2 {
  width: 500px;
  height: 500px;
  background: #00b4db;
  bottom: -150px;
  right: -100px;
  animation: float 25s infinite reverse; }

.orb-3 {
  width: 300px;
  height: 300px;
  background: var(--primary-dark);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: pulse 10s infinite; }

.stat-card {
  text-align: center; }
  .stat-card .stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1; }
  .stat-card .stat-label {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 8px; }

.badge-dot {
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  animation: pulse-dot 2s infinite; }

.scroll-mouse {
  width: 24px;
  height: 40px;
  border: 2px solid var(--primary);
  border-radius: 20px;
  margin-top: 8px;
  position: relative; }
  .scroll-mouse::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 8px;
    background: var(--primary);
    left: 50%;
    transform: translateX(-50%);
    top: 8px;
    border-radius: 2px;
    animation: scroll 2s infinite; }

.breadcrumbs-minimal {
  padding: 16px 0;
  background: white;
  border-bottom: 1px solid #e9ecef; }
  .breadcrumbs-minimal ul {
    display: flex;
    align-items: center;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0; }
    .breadcrumbs-minimal ul li:not(:last-child)::after {
      content: '/';
      margin-left: 12px;
      color: #adb5bd; }
  .breadcrumbs-minimal a {
    color: var(--primary);
    text-decoration: none;
    font-size: 0.875rem; }
    .breadcrumbs-minimal a:hover {
      text-decoration: underline; }
  .breadcrumbs-minimal span {
    color: #6c757d;
    font-size: 0.875rem; }

.section-header-modern {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 50px; }
  .section-header-modern__left .section-chip {
    display: inline-block;
    background: var(--primary-light);
    color: var(--primary);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 16px; }
  .section-header-modern__left h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a2e; }
  .section-header-modern__right {
    max-width: 400px; }
    .section-header-modern__right p {
      color: #6c757d;
      line-height: 1.6;
      margin-bottom: 16px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  transition: gap 0.3s; }
  .link-arrow:hover {
    gap: 12px; }

.departments-modern {
  padding: 60px 0;
  background: #f8f9fa; }

.departments-grid-modern {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px; }

.card-glass {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border-radius: 24px;
  overflow: hidden;
  transition: all 0.4s var(--transition-smooth);
  box-shadow: var(--shadow-sm);
  border: var(--glass-border); }
  .card-glass:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-primary); }
    .card-glass:hover .card-glass__media img {
      transform: scale(1.08); }
    .card-glass:hover .card-glass__overlay {
      opacity: 1; }
    .card-glass:hover .card-glass__icon {
      transform: scale(1.1); }
  .card-glass__media {
    position: relative;
    height: 240px;
    overflow: hidden; }
    .card-glass__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s var(--transition-smooth); }
  .card-glass__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 139, 208, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s; }
  .card-glass__icon {
    width: 56px;
    height: 56px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s; }
  .card-glass__content {
    padding: 24px; }
  .card-glass__badge {
    margin-bottom: 12px; }
    .card-glass__badge span {
      background: var(--primary-light);
      color: var(--primary);
      padding: 4px 12px;
      border-radius: 50px;
      font-size: 0.75rem;
      font-weight: 500; }
  .card-glass h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #1a1a2e; }
  .card-glass p {
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 20px; }
  .card-glass__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: gap 0.3s; }
    .card-glass__link:hover {
      gap: 12px; }

.cta-glass {
  padding: 80px 0;
  background: var(--gradient-dark); }
  .cta-glass__card {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-radius: 32px;
    padding: 50px;
    text-align: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2); }
  .cta-glass__content {
    position: relative;
    z-index: 2; }
    .cta-glass__content h3 {
      font-size: 2rem;
      font-weight: 700;
      color: white;
      margin-bottom: 16px; }
    .cta-glass__content p {
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 32px; }
  .cta-glass__buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; }
  .cta-glass__decor {
    position: absolute;
    inset: 0;
    pointer-events: none; }

.decor-circle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 139, 208, 0.3), transparent); }
  .decor-circle:nth-child(1) {
    width: 300px;
    height: 300px;
    top: -100px;
    right: -100px; }
  .decor-circle:nth-child(2) {
    width: 200px;
    height: 200px;
    bottom: -80px;
    left: -80px; }
  .decor-circle:nth-child(3) {
    width: 150px;
    height: 150px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }

.btn-gradient {
  background: var(--gradient-primary);
  color: white;
  padding: 14px 32px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.3s, box-shadow 0.3s;
  display: inline-block; }
  .btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 139, 208, 0.4); }

.btn-outline-glass {
  background: transparent;
  color: white;
  padding: 14px 32px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s; }
  .btn-outline-glass:hover {
    background: white;
    color: #1a1a2e;
    border-color: white; }

.empty-state-modern {
  text-align: center;
  padding: 80px 40px;
  background: white;
  border-radius: 24px;
  grid-column: 1 / -1; }
  .empty-state-modern__icon {
    font-size: 64px;
    margin-bottom: 24px;
    color: #adb5bd; }
  .empty-state-modern h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
    color: #1a1a2e; }
  .empty-state-modern p {
    color: #6c757d; }

.text-gradient {
  background: linear-gradient(135deg, #008BD0 0%, #00b4db 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; }

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg); }
  50% {
    transform: translate(50px, 30px) rotate(10deg); } }

@keyframes pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.4; }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.2; } }

@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
    transform: scale(1); }
  50% {
    opacity: 0.5;
    transform: scale(1.2); } }

@keyframes scroll {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0); }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(15px); } }

@media (max-width: 768px) {
  .hero-modern {
    min-height: 60vh; }
    .hero-modern__stats {
      gap: 30px; }
  .stat-number {
    font-size: 1.75rem; }
  .section-header-modern {
    flex-direction: column;
    align-items: flex-start; }
    .section-header-modern__right {
      max-width: 100%; }
  .departments-grid-modern {
    grid-template-columns: 1fr; }
  .cta-glass__card {
    padding: 30px 20px; }
  .cta-glass__content h3 {
    font-size: 1.5rem; }
  .cta-glass__buttons {
    flex-direction: column; }
  .card-glass__media {
    height: 200px; } }

@media (min-width: 769px) and (max-width: 1024px) {
  .departments-grid-modern {
    grid-template-columns: repeat(2, 1fr); } }

.department-detail {
  background: #f8f9fa; }

.department-hero {
  padding: 50px 0;
  background: white; }
  .department-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center; }
    @media (max-width: 768px) {
      .department-hero__inner {
        grid-template-columns: 1fr; } }
  .department-hero__title {
    font-size: 2rem;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 20px; }
  .department-hero__desc {
    color: #6c757d;
    line-height: 1.8; }
  .department-hero__image img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }

.department-services {
  padding: 60px 0; }
  .department-services__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 30px;
    text-align: center; }

.services-list {
  display: flex;
  flex-direction: column;
  gap: 15px; }

.service-item {
  background: white;
  border-radius: 15px;
  padding: 20px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s; }
  .service-item:hover {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transform: translateX(5px); }
  @media (max-width: 768px) {
    .service-item {
      flex-direction: column;
      text-align: center;
      gap: 15px; } }
  .service-item__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px; }
  .service-item__desc {
    font-size: 0.875rem;
    color: #6c757d;
    line-height: 1.5; }
  .service-item__duration {
    font-size: 0.75rem;
    color: #008BD0;
    margin-top: 5px;
    display: inline-block; }
  .service-item__price-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #008BD0;
    display: block;
    margin-bottom: 8px; }
  .service-item__price-free {
    font-size: 1rem;
    font-weight: 600;
    color: #10b981; }
  .service-item__btn {
    background: #008BD0;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s; }
    .service-item__btn:hover {
      background: #006ba3;
      transform: scale(1.05); }

.service-detail {
  background: #f8f9fa; }
  .service-detail__hero {
    padding: 60px 0;
    background: white; }
  .service-detail__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center; }
    @media (max-width: 768px) {
      .service-detail__inner {
        grid-template-columns: 1fr; } }
  .service-detail__title {
    font-size: 2rem;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 15px; }
  .service-detail__department {
    margin-bottom: 20px; }
    .service-detail__department a {
      color: #008BD0;
      text-decoration: none; }
      .service-detail__department a:hover {
        text-decoration: underline; }
  .service-detail__description {
    color: #495057;
    line-height: 1.8;
    margin-bottom: 25px; }
  .service-detail__info {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 25px; }
    .service-detail__info .label {
      font-weight: 600;
      color: #6c757d;
      min-width: 100px;
      display: inline-block; }
    .service-detail__info .value {
      font-weight: 700;
      color: #2c3e50; }
  .service-detail__price {
    margin-bottom: 10px; }
    .service-detail__price .value {
      font-size: 1.25rem;
      color: #008BD0; }
  .service-detail__btn {
    background: linear-gradient(135deg, #008BD0, #006ba3);
    color: white;
    border: none;
    padding: 15px 35px;
    border-radius: 35px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s; }
    .service-detail__btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(0, 139, 208, 0.3); }
  .service-detail__image img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }

.pagination {
  padding: 40px 0; }
  .pagination__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap; }
  .pagination__prev, .pagination__next, .pagination__link {
    padding: 8px 15px;
    background: white;
    color: #008BD0;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 500;
    transition: all 0.3s; }
    .pagination__prev:hover, .pagination__next:hover, .pagination__link:hover {
      background: #008BD0;
      color: white; }
    .pagination__prev.active, .pagination__next.active, .pagination__link.active {
      background: #008BD0;
      color: white; }

.empty-state {
  text-align: center;
  padding: 60px;
  background: white;
  border-radius: 20px; }
  .empty-state p {
    color: #6c757d;
    font-size: 1.125rem; }

@media (max-width: 768px) {
  .departments-hero__title,
  .services-hero__title {
    font-size: 1.75rem; }
  .department-hero__title,
  .service-detail__title {
    font-size: 1.5rem; }
  .departments-grid__inner,
  .services-grid__inner {
    grid-template-columns: 1fr; }
  .service-item {
    flex-direction: column;
    text-align: center; }
  .services-filter__inner {
    gap: 10px; }
  .services-filter__btn {
    padding: 6px 15px;
    font-size: 0.875rem; } }

.services-page {
  background: #f8f9fa;
  min-height: 100vh; }

.services-hero {
  background: linear-gradient(135deg, #008BD0 0%, #006ba3 100%);
  padding: 60px 0;
  text-align: center; }
  .services-hero__title {
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    margin-bottom: 20px; }
  .services-hero__desc {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin: 0 auto; }

.services-filter {
  padding: 30px 0;
  background: white;
  border-bottom: 1px solid #e9ecef; }
  .services-filter__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px; }
  .services-filter__btn {
    padding: 10px 25px;
    background: #f8f9fa;
    border: none;
    border-radius: 30px;
    color: #495057;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s; }
    .services-filter__btn:hover {
      background: #e9ecef; }
    .services-filter__btn.active {
      background: #008BD0;
      color: white; }

.services-grid {
  padding: 60px 0; }
  .services-grid__inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px; }

.service-card {
  background: white;
  border-radius: 20px;
  padding: 25px;
  transition: all 0.3s;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); }
  .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 139, 208, 0.15); }
  .service-card__icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #008BD0, #006ba3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px; }
    .service-card__icon i {
      font-size: 1.75rem;
      color: white; }
  .service-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px; }
    .service-card__title a {
      color: #2c3e50;
      text-decoration: none; }
      .service-card__title a:hover {
        color: #008BD0; }
  .service-card__desc {
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 15px; }
  .service-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid #e9ecef; }
  .service-card__price {
    font-size: 1.125rem;
    font-weight: 700;
    color: #008BD0; }
  .service-card__duration {
    font-size: 0.875rem;
    color: #6c757d; }

.blog {
  padding: 60px 0;
  background: #f7fafc; }
  @media (max-width: 768px) {
    .blog {
      padding: 40px 0; } }
  .blog__header {
    text-align: center;
    margin-bottom: 40px; }
    @media (max-width: 768px) {
      .blog__header {
        margin-bottom: 30px; } }
  .blog__title {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #038BD0 0%, #764ba2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; }
    @media (max-width: 768px) {
      .blog__title {
        font-size: 32px; } }
  .blog__subtitle {
    font-size: 18px;
    color: #718096;
    max-width: 600px;
    margin: 0 auto; }
    @media (max-width: 768px) {
      .blog__subtitle {
        font-size: 16px; } }
.search-info {
  background: #038BD0;
  border-radius: 12px;
  padding: 12px 20px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px; }
  .search-info p {
    margin: 0;
    color: #1a1a2e; }
    .search-info p strong {
      color: #038BD0; }
  .search-info .search-clear {
    color: #718096;
    text-decoration: none;
    font-size: 13px;
    transition: all 0.2s ease; }
    .search-info .search-clear:hover {
      color: #ef4444; }

.blog__empty {
  text-align: center;
  padding: 60px;
  background: #ffffff;
  border-radius: 16px; }
  .blog__empty-icon {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.5; }
  .blog__empty h3 {
    font-size: 20px;
    margin-bottom: 8px;
    color: #1a1a2e; }
  .blog__empty p {
    color: #718096; }

.blog__card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%; }
  .blog__card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px); }
    .blog__card:hover .blog__card-image img {
      transform: scale(1.05); }
  .blog__card-image {
    position: relative;
    height: 200px;
    overflow: hidden;
    flex-shrink: 0; }
    .blog__card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease; }
  .blog__card-category {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1; }
    .blog__card-category a {
      display: inline-block;
      padding: 4px 12px;
      background: rgba(3, 139, 208, 0.95);
      backdrop-filter: blur(4px);
      color: #ffffff;
      font-size: 12px;
      font-weight: 500;
      border-radius: 9999px;
      text-decoration: none;
      transition: all 0.2s ease; }
      .blog__card-category a:hover {
        background: #5a67d8;
        transform: translateY(-2px); }
  .blog__card-content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column; }
  .blog__card-meta {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap; }
  .blog__card-date, .blog__card-views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #718096; }
    .blog__card-date svg, .blog__card-views svg {
      width: 14px;
      height: 14px; }
  .blog__card-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 12px; }
    .blog__card-title a {
      color: #1a1a2e;
      text-decoration: none;
      transition: all 0.2s ease; }
      .blog__card-title a:hover {
        color: #038BD0; }
  .blog__card-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: #718096;
    margin-bottom: 16px;
    flex: 1; }
  .blog__card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #038BD0;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-top: auto; }
    .blog__card-link svg {
      transition: transform 0.2s; }
    .blog__card-link:hover {
      gap: 12px; }
      .blog__card-link:hover svg {
        transform: translateX(4px); }

.sidebar__widget {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 30px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
  .sidebar__widget:last-child {
    margin-bottom: 0; }

.sidebar__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #038BD0;
  color: #1a1a2e;
  position: relative; }
  .sidebar__title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(135deg, #038BD0 0%, #764ba2 100%); }

.sidebar__search {
  display: flex;
  gap: 12px; }
  .sidebar__search-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    transition: all 0.2s ease; }
    .sidebar__search-input:focus {
      outline: none;
      border-color: #038BD0;
      box-shadow: 0 0 0 3px rgba(3, 139, 208, 0.1); }
  .sidebar__search-btn {
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, #038BD0 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease; }
    .sidebar__search-btn:hover {
      transform: scale(1.02); }
    .sidebar__search-btn svg {
      width: 20px;
      height: 20px;
      stroke: #ffffff; }

.sidebar__categories {
  list-style: none;
  padding: 0;
  margin: 0; }
  .sidebar__categories li {
    margin-bottom: 12px; }
    .sidebar__categories li:last-child {
      margin-bottom: 0; }
    .sidebar__categories li a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      color: #718096;
      text-decoration: none;
      transition: all 0.2s ease; }
      .sidebar__categories li a:hover {
        color: #038BD0;
        transform: translateX(4px); }
        .sidebar__categories li a:hover .count {
          background: #038BD0;
          color: #ffffff; }
      .sidebar__categories li a .count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        height: 28px;
        background: #f7fafc;
        border-radius: 9999px;
        font-size: 12px;
        font-weight: 500;
        transition: all 0.2s ease; }

.sidebar__recent {
  list-style: none;
  padding: 0;
  margin: 0; }
  .sidebar__recent li {
    margin-bottom: 16px; }
    .sidebar__recent li:last-child {
      margin-bottom: 0; }
    .sidebar__recent li a {
      display: flex;
      gap: 12px;
      text-decoration: none;
      transition: all 0.2s ease; }
      .sidebar__recent li a:hover .recent__info h4 {
        color: #038BD0; }
  .sidebar__recent .recent__image {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0; }
    .sidebar__recent .recent__image img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
    .sidebar__recent .recent__image-placeholder {
      width: 100%;
      height: 100%;
      background: #038BD0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px; }
  .sidebar__recent .recent__info {
    flex: 1; }
    .sidebar__recent .recent__info h4 {
      font-size: 14px;
      font-weight: 600;
      line-height: 1.4;
      margin-bottom: 4px;
      color: #1a1a2e;
      transition: all 0.2s ease; }
    .sidebar__recent .recent__info span {
      font-size: 11px;
      color: #718096; }

.sidebar__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; }
  .sidebar__tags a {
    display: inline-block;
    padding: 4px 12px;
    background: #f7fafc;
    border-radius: 9999px;
    font-size: 12px;
    color: #718096;
    text-decoration: none;
    transition: all 0.2s ease; }
    .sidebar__tags a:hover {
      background: linear-gradient(135deg, #038BD0 0%, #764ba2 100%);
      color: #ffffff;
      transform: translateY(-2px); }

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0; }
  @media (max-width: 768px) {
    .pagination {
      gap: 8px; } }
  .pagination__prev, .pagination__next {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: #ffffff;
    border-radius: 12px;
    color: #718096;
    text-decoration: none;
    transition: all 0.2s ease; }
    .pagination__prev:hover, .pagination__next:hover {
      background: #038BD0;
      color: #ffffff; }
      .pagination__prev:hover svg, .pagination__next:hover svg {
        stroke: #ffffff; }
    .pagination__prev svg, .pagination__next svg {
      width: 18px;
      height: 18px;
      stroke: currentColor; }
    @media (max-width: 768px) {
      .pagination__prev, .pagination__next {
        padding: 8px 12px; } }
  .pagination__numbers {
    display: flex;
    gap: 8px; }
    @media (max-width: 768px) {
      .pagination__numbers {
        gap: 4px; } }
  .pagination__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #ffffff;
    border-radius: 12px;
    color: #718096;
    text-decoration: none;
    transition: all 0.2s ease; }
    .pagination__number:hover {
      background: #038BD0;
      color: #038BD0; }
    .pagination__number.active {
      background: linear-gradient(135deg, #038BD0 0%, #764ba2 100%);
      color: #ffffff; }
    @media (max-width: 768px) {
      .pagination__number {
        width: 35px;
        height: 35px;
        font-size: 14px; } }
.news-detail {
  padding: 60px 0;
  background: #ffffff; }
  @media (max-width: 768px) {
    .news-detail {
      padding: 40px 0; } }
  .news-detail__wrapper {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px; }
    @media (max-width: 992px) {
      .news-detail__wrapper {
        grid-template-columns: 1fr; } }
  .news-detail__content {
    min-width: 0; }
  .news-detail__header {
    margin-bottom: 30px; }
  .news-detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px; }
  .news-detail__date, .news-detail__category, .news-detail__views {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #718096; }
    .news-detail__date svg, .news-detail__category svg, .news-detail__views svg {
      width: 16px;
      height: 16px; }
    .news-detail__date a, .news-detail__category a, .news-detail__views a {
      color: #038BD0;
      text-decoration: none; }
      .news-detail__date a:hover, .news-detail__category a:hover, .news-detail__views a:hover {
        text-decoration: underline; }
  .news-detail__title {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.3;
    color: #1a1a2e;
    margin-bottom: 20px; }
    @media (max-width: 768px) {
      .news-detail__title {
        font-size: 28px; } }
  .news-detail__image {
    margin-bottom: 30px;
    border-radius: 16px;
    overflow: hidden; }
    .news-detail__image img {
      width: 100%;
      height: auto;
      object-fit: cover; }
  .news-detail__body {
    font-size: 16px;
    line-height: 1.8;
    color: #2d3748; }
    .news-detail__body h1, .news-detail__body h2, .news-detail__body h3 {
      margin: 32px 0 16px;
      color: #1a1a2e; }
    .news-detail__body h1 {
      font-size: 28px; }
    .news-detail__body h2 {
      font-size: 24px; }
    .news-detail__body h3 {
      font-size: 20px; }
    .news-detail__body p {
      margin-bottom: 20px; }
    .news-detail__body img {
      max-width: 100%;
      border-radius: 12px;
      margin: 20px 0; }
    .news-detail__body blockquote {
      margin: 32px 0;
      padding: 24px 32px;
      background: #f7fafc;
      border-left: 4px solid #038BD0;
      border-radius: 12px;
      font-style: italic; }
    .news-detail__body ul, .news-detail__body ol {
      margin: 20px 0;
      padding-left: 25px; }
      .news-detail__body ul li, .news-detail__body ol li {
        margin-bottom: 8px; }
  .news-detail__tags {
    margin: 40px 0;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px; }
    .news-detail__tags h3 {
      font-size: 16px;
      font-weight: 600;
      margin: 0;
      color: #1a1a2e; }
    .news-detail__tags .tags-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px; }
    .news-detail__tags .tag {
      display: inline-block;
      padding: 6px 14px;
      background: #f7fafc;
      border-radius: 30px;
      font-size: 12px;
      color: #718096;
      text-decoration: none;
      transition: all 0.3s ease; }
      .news-detail__tags .tag:hover {
        background: linear-gradient(135deg, #038BD0 0%, #764ba2 100%);
        color: #ffffff;
        transform: translateY(-2px); }
  .news-detail__share {
    margin: 40px 0;
    padding: 20px;
    background: #f7fafc;
    border-radius: 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px; }
    .news-detail__share h3 {
      font-size: 16px;
      font-weight: 600;
      margin: 0;
      color: #1a1a2e; }
    .news-detail__share .share-buttons {
      display: flex;
      gap: 12px; }
    .news-detail__share .share-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      text-decoration: none; }
      .news-detail__share .share-btn.facebook {
        background: #1877F2; }
      .news-detail__share .share-btn.telegram {
        background: #26A5E4; }
      .news-detail__share .share-btn.twitter {
        background: #1DA1F2; }
      .news-detail__share .share-btn.whatsapp {
        background: #25D366; }
      .news-detail__share .share-btn:hover {
        transform: scale(1.1); }
      .news-detail__share .share-btn svg {
        width: 20px;
        height: 20px; }
  .news-detail__navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0; }
    .news-detail__navigation .nav-prev, .news-detail__navigation .nav-next {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 20px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      color: #718096;
      text-decoration: none;
      transition: all 0.3s ease; }
      .news-detail__navigation .nav-prev:hover, .news-detail__navigation .nav-next:hover {
        background: #038BD0;
        color: #ffffff;
        border-color: #038BD0; }
        .news-detail__navigation .nav-prev:hover svg, .news-detail__navigation .nav-next:hover svg {
          stroke: #ffffff; }
      .news-detail__navigation .nav-prev svg, .news-detail__navigation .nav-next svg {
        width: 18px;
        height: 18px;
        stroke: currentColor; }

/* Критические стили для предотвращения дерганья */
.blog__cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
  width: 100% !important;
  min-height: 400px; }

.blog__card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0; }

.blog__card-image {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: #e2e8f0; }

.blog__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; }

.blog__card-content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column; }

.blog__wrapper {
  display: flex;
  gap: 40px; }

.blog__content {
  flex: 1;
  min-width: 0; }

.blog__sidebar {
  width: 320px;
  flex-shrink: 0; }

@media (max-width: 992px) {
  .blog__wrapper {
    flex-direction: column; }
  .blog__cards {
    grid-template-columns: repeat(2, 1fr) !important; }
  .blog__sidebar {
    width: 100%; } }

@media (max-width: 768px) {
  .blog__cards {
    grid-template-columns: 1fr !important; } }

.blog__cards {
  min-height: 400px; }

.blog__card {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important; }

img {
  max-width: 100%;
  height: auto; }

.blog__wrapper {
  display: flex;
  gap: 40px; }
  @media (max-width: 992px) {
    .blog__wrapper {
      flex-direction: column; } }
.blog__content {
  flex: 1;
  min-width: 0; }

.blog__sidebar {
  width: 320px;
  flex-shrink: 0;
  position: sticky;
  top: 100px;
  height: fit-content; }
  @media (max-width: 992px) {
    .blog__sidebar {
      width: 100%;
      position: static; } }
.blog__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px; }
  @media (max-width: 992px) {
    .blog__cards {
      grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 768px) {
    .blog__cards {
      grid-template-columns: 1fr;
      gap: 20px; } }
@media (max-width: 992px) {
  .blog__wrapper {
    flex-direction: column; }
  .blog__cards {
    grid-template-columns: repeat(2, 1fr); }
  .blog__sidebar {
    width: 100%;
    position: static; } }

@media (max-width: 768px) {
  .blog__cards {
    grid-template-columns: 1fr;
    gap: 20px; }
  .sidebar__widget {
    padding: 20px; }
  .sidebar__search {
    flex-direction: column; }
    .sidebar__search-btn {
      width: 100%; } }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.blog__card {
  animation: fadeInUp 0.6s ease forwards; }

.blog__content {
  animation: fadeIn 0.5s ease; }

/* Желтый цвет для точек */
/* Новый цвет фона */
@keyframes floatParticle {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0; }
  10% {
    opacity: 0.5; }
  90% {
    opacity: 0.5; }
  100% {
    transform: translateY(-100vh) rotate(720deg);
    opacity: 0; } }

@keyframes rotateGradient {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes rotateOrbit {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes gradientShift {
  0%, 100% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; } }

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px); }
  to {
    opacity: 1;
    transform: translateX(0); } }

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px); }
  to {
    opacity: 1;
    transform: translateX(0); } }

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95); }
  to {
    opacity: 1;
    transform: scale(1); } }

.fade-in {
  animation: fadeIn 0.6s ease forwards; }

.fade-in-left {
  animation: fadeInLeft 0.6s ease forwards; }

.fade-in-right {
  animation: fadeInRight 0.6s ease forwards; }

.scale-in {
  animation: scaleIn 0.4s ease forwards; }

.visible {
  opacity: 1 !important;
  transform: translateY(0) !important; }

.cases-section {
  padding: 6rem 0;
  background: #F9FAFB; }

.container-cases {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem; }

.cases-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr; }
  @media (min-width: 768px) {
    .cases-grid {
      grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) {
    .cases-grid {
      grid-template-columns: repeat(3, 1fr); } }
.case-card {
  background: #FFFFFF;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); }
  .case-card:hover {
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1); }
    .case-card:hover:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
    .case-card:hover .case-card__image img {
      transform: scale(1.1); }
    .case-card:hover .case-overlay {
      opacity: 1; }
  .case-card__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/11; }
    .case-card__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1); }
    .case-card__image .case-badge {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: linear-gradient(135deg, #0066FF 0%, #00C9A7 100%);
      color: #FFFFFF;
      padding: 0.25rem 1.5rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 600;
      z-index: 1; }
    .case-card__image .case-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(0, 102, 255, 0.9), rgba(0, 201, 167, 0.9));
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1); }
      .case-card__image .case-overlay .overlay-content {
        text-align: center;
        color: #FFFFFF; }
        .case-card__image .case-overlay .overlay-content svg {
          width: 40px;
          height: 40px;
          margin-bottom: 0.5rem; }
        .case-card__image .case-overlay .overlay-content span {
          font-size: 0.875rem;
          font-weight: 500; }
  .case-card__content {
    padding: 2rem; }
    .case-card__content .case-diagnosis {
      display: inline-block;
      padding: 0.25rem 1rem;
      background: rgba(0, 102, 255, 0.1);
      color: #0066FF;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 600;
      margin-bottom: 1rem; }
    .case-card__content .case-title {
      font-size: 1.25rem;
      font-weight: 700;
      color: #111827;
      margin-bottom: 1rem;
      line-height: 1.4; }
    .case-card__content .case-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 1.5rem; }
      .case-card__content .case-meta .case-date {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        color: #9CA3AF;
        font-size: 0.75rem; }
        .case-card__content .case-meta .case-date svg {
          width: 14px;
          height: 14px; }
      .case-card__content .case-meta .read-more {
        color: #0066FF;
        font-size: 0.875rem;
        font-weight: 600;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        transition: gap 150ms cubic-bezier(0.4, 0, 0.2, 1); }
        .case-card__content .case-meta .read-more:hover {
          gap: 1rem; }

.comparison-gallery {
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  border-radius: 1.5rem;
  padding: 2rem;
  margin-bottom: 4rem; }
  .comparison-gallery .comparison-slider {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    cursor: ew-resize; }
    .comparison-gallery .comparison-slider .comparison-image {
      width: 100%;
      height: auto;
      display: block; }
    .comparison-gallery .comparison-slider #comparisonBefore {
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 100%;
      object-fit: cover; }
    .comparison-gallery .comparison-slider .comparison-handle {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 4px;
      background: #FFFFFF;
      left: 50%;
      cursor: ew-resize;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }

.gallery-section {
  margin-bottom: 4rem; }
  .gallery-section .gallery-slider {
    margin-top: 2rem; }
    .gallery-section .gallery-slider .swiper-slide {
      cursor: pointer;
      border-radius: 0.75rem;
      overflow: hidden;
      transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); }
      .gallery-section .gallery-slider .swiper-slide:hover {
        transform: scale(1.05); }
      .gallery-section .gallery-slider .swiper-slide img {
        width: 100%;
        height: 150px;
        object-fit: cover; }
      .gallery-section .gallery-slider .swiper-slide .image-type-badge {
        position: absolute;
        bottom: 10px;
        right: 10px;
        background: rgba(0, 0, 0, 0.7);
        color: #FFFFFF;
        padding: 4px 12px;
        border-radius: 9999px;
        font-size: 12px;
        font-weight: 600;
        z-index: 1; }

.image-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 1000;
  cursor: pointer; }
  .image-modal.active {
    display: flex;
    align-items: center;
    justify-content: center; }
  .image-modal img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain; }
  .image-modal .close-modal {
    position: absolute;
    top: 20px;
    right: 40px;
    color: #FFFFFF;
    font-size: 40px;
    cursor: pointer;
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); }
    .image-modal .close-modal:hover {
      transform: scale(1.1); }

/* Желтый цвет для точек */
/* Новый цвет фона */
.cases-hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #028BD0;
  /* Используем переменную */
  isolation: isolate; }
  .cases-hero .gradient-orb {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(255, 215, 0, 0.15) 0%, rgba(255, 255, 255, 0.08) 30%, transparent 70%);
    animation: rotateGradient 25s linear infinite;
    z-index: 0; }
  .cases-hero .orbit-ring {
    position: absolute;
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 50%;
    animation: rotateOrbit linear infinite;
    z-index: 0; }
    .cases-hero .orbit-ring:nth-child(1) {
      width: 400px;
      height: 400px;
      top: 15%;
      left: -100px;
      animation-duration: 30s; }
    .cases-hero .orbit-ring:nth-child(2) {
      width: 600px;
      height: 600px;
      bottom: -150px;
      right: -150px;
      animation-duration: 40s;
      animation-direction: reverse; }
    .cases-hero .orbit-ring:nth-child(3) {
      width: 250px;
      height: 250px;
      top: 50%;
      right: 10%;
      animation-duration: 20s; }
    .cases-hero .orbit-ring .orbit-dot {
      position: absolute;
      width: 8px;
      height: 8px;
      background: #FFD700;
      /* Желтый цвет из переменной */
      border-radius: 50%;
      top: -4px;
      left: 50%;
      box-shadow: 0 0 15px rgba(255, 215, 0, 0.8); }
  .cases-hero .particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; }
    .cases-hero .particles-container .particle {
      position: absolute;
      background: rgba(255, 215, 0, 0.6);
      /* Желтые частицы */
      border-radius: 50%;
      pointer-events: none;
      animation: floatParticle linear infinite;
      box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); }
  .cases-hero .hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 20px; }
    .cases-hero .hero-content .hero-badge {
      display: inline-block;
      margin-top: 40px;
      padding: 8px 24px;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(10px);
      border-radius: 9999px;
      font-size: 24px;
      font-weight: 500;
      color: #FFFFFF;
      margin-bottom: 30px;
      border: 1px solid rgba(255, 215, 0, 0.3); }
    .cases-hero .hero-content .hero-title {
      font-size: 3rem;
      font-weight: 800;
      margin-bottom: 25px;
      line-height: 1.2;
      color: #FFFFFF; }
      @media (min-width: 768px) {
        .cases-hero .hero-content .hero-title {
          font-size: 4rem; } }
      @media (min-width: 1024px) {
        .cases-hero .hero-content .hero-title {
          font-size: 5rem; } }
      .cases-hero .hero-content .hero-title .gradient-text {
        background: linear-gradient(135deg, #FFD700, #FFA500);
        /* Желтый градиент */
        background-size: 200% 200%;
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        animation: gradientShift 4s ease infinite; }
    .cases-hero .hero-content .hero-description {
      font-size: 1.125rem;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 40px;
      line-height: 1.6;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto; }
      @media (min-width: 768px) {
        .cases-hero .hero-content .hero-description {
          font-size: 1.25rem; } }
    .cases-hero .hero-content .hero-stats {
      display: flex;
      justify-content: center;
      gap: 50px;
      margin-bottom: 50px;
      flex-wrap: wrap; }
      .cases-hero .hero-content .hero-stats .stat-item {
        text-align: center; }
        .cases-hero .hero-content .hero-stats .stat-item .stat-number {
          font-size: 2.2rem;
          font-weight: 800;
          background: linear-gradient(135deg, #FFD700, #FFA500);
          /* Желтый градиент */
          background-clip: text;
          -webkit-background-clip: text;
          color: transparent;
          display: block;
          line-height: 1; }
          @media (min-width: 768px) {
            .cases-hero .hero-content .hero-stats .stat-item .stat-number {
              font-size: 2.8rem; } }
        .cases-hero .hero-content .hero-stats .stat-item .stat-label {
          font-size: 0.875rem;
          color: rgba(255, 255, 255, 0.8);
          margin-top: 8px; }
    .cases-hero .hero-content .hero-buttons {
      display: flex;
      gap: 20px;
      justify-content: center;
      flex-wrap: wrap; }
      .cases-hero .hero-content .hero-buttons .btn-primary, .cases-hero .hero-content .hero-buttons .btn-outline {
        padding: 14px 35px;
        border-radius: 9999px;
        font-weight: 600;
        font-size: 1rem;
        cursor: pointer;
        transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 10px; }
      .cases-hero .hero-content .hero-buttons .btn-primary {
        background: linear-gradient(135deg, #FFD700, #FFA500);
        /* Желтый градиент */
        border: none;
        color: #1a1a2e;
        box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3); }
        .cases-hero .hero-content .hero-buttons .btn-primary:hover {
          transform: translateY(-3px);
          box-shadow: 0 10px 30px rgba(255, 215, 0, 0.5); }
      .cases-hero .hero-content .hero-buttons .btn-outline {
        background: transparent;
        border: 2px solid rgba(255, 255, 255, 0.4);
        color: #FFFFFF; }
        .cases-hero .hero-content .hero-buttons .btn-outline:hover {
          border-color: #FFD700;
          /* Желтый цвет */
          transform: translateY(-3px);
          background: rgba(255, 215, 0, 0.1); }
  @media (min-width: 768px) {
    .cases-hero .orbit-ring:nth-child(1), .cases-hero .orbit-ring:nth-child(2), .cases-hero .orbit-ring:nth-child(3) {
      display: none; } }
.filters-section {
  margin-bottom: 3rem; }
  .filters-section .filter-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem; }
    .filters-section .filter-buttons .filter-btn {
      padding: 0.5rem 2rem;
      background: #FFFFFF;
      border: 1px solid #E5E7EB;
      border-radius: 9999px;
      color: #4B5563;
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); }
      .filters-section .filter-buttons .filter-btn:hover {
        border-color: #0066FF;
        color: #0066FF; }
      .filters-section .filter-buttons .filter-btn.active {
        background: linear-gradient(135deg, #0066FF 0%, #00C9A7 100%);
        border-color: transparent;
        color: #FFFFFF; }

.search-section {
  margin-top: 30px;
  display: flex;
  justify-content: center; }
  .search-section .search-form {
    display: flex;
    max-width: 400px;
    width: 100%; }
    .search-section .search-form .search-input {
      flex: 1;
      padding: 12px 20px;
      border: 1px solid #E5E7EB;
      border-radius: 50px 0 0 50px;
      font-size: 14px; }
      .search-section .search-form .search-input:focus {
        outline: none;
        border-color: #0066FF; }
    .search-section .search-form .search-btn {
      padding: 0 20px;
      background: linear-gradient(135deg, #0066FF 0%, #00C9A7 100%);
      border: none;
      border-radius: 0 50px 50px 0;
      cursor: pointer; }
      .search-section .search-form .search-btn svg {
        color: white; }

.cases-pagination {
  margin-top: 4rem;
  display: flex;
  justify-content: center; }
  .cases-pagination .pagination {
    display: flex;
    gap: 0.5rem;
    list-style: none; }
    .cases-pagination .pagination .page-item .page-link {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 40px;
      height: 40px;
      padding: 0 1rem;
      background: #FFFFFF;
      border: 1px solid #E5E7EB;
      border-radius: 0.75rem;
      color: #374151;
      font-weight: 500;
      transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
      text-decoration: none; }
      .cases-pagination .pagination .page-item .page-link:hover {
        background: #F3F4F6;
        border-color: #0066FF;
        color: #0066FF; }
    .cases-pagination .pagination .page-item.active .page-link {
      background: linear-gradient(135deg, #0066FF 0%, #00C9A7 100%);
      border-color: transparent;
      color: #FFFFFF; }
    .cases-pagination .pagination .page-item.disabled .page-link {
      opacity: 0.5;
      cursor: not-allowed; }

.empty-state {
  text-align: center;
  padding: 6rem;
  grid-column: 1/-1; }
  .empty-state .empty-icon {
    font-size: 4rem;
    margin-bottom: 2rem;
    opacity: 0.5; }
  .empty-state h3 {
    font-size: 1.5rem;
    color: #111827;
    margin-bottom: 1rem; }
  .empty-state p {
    color: #6B7280; }

.filter-empty-message {
  grid-column: 1/-1; }

.clinical-cases {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased; }

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px); }
  to {
    opacity: 1;
    transform: translateX(0); } }

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px); }
  to {
    opacity: 1;
    transform: translateX(0); } }

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95); }
  to {
    opacity: 1;
    transform: scale(1); } }

@keyframes pulse {
  0%, 100% {
    opacity: 0.6; }
  50% {
    opacity: 1; } }

.fade-in {
  animation: fadeIn 0.6s ease forwards; }

.fade-in-left {
  animation: fadeInLeft 0.6s ease forwards; }

.fade-in-right {
  animation: fadeInRight 0.6s ease forwards; }

.scale-in {
  animation: scaleIn 0.4s ease forwards; }

.pulse {
  animation: pulse 2s ease-in-out infinite; }

.visible {
  opacity: 1 !important;
  transform: translateY(0) !important; }

.case-detail-hero {
  background: #4D94FF;
  padding: 4rem 0;
  color: #FFFFFF;
  position: relative;
  margin-top: 40px;
  overflow: hidden; }
  .case-detail-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 60px 60px;
    opacity: 0.5; }
  .case-detail-hero .hero-container {
    position: relative;
    margin-top: 60px;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px; }
  .case-detail-hero .hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto; }
  .case-detail-hero .hero-badge {
    display: inline-block;
    padding: 0.25rem 1.5rem;
    background: rgba(26, 26, 46, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 2rem; }
  .case-detail-hero .hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.2; }
    @media (min-width: 768px) {
      .case-detail-hero .hero-title {
        font-size: 3rem; } }
    @media (min-width: 1024px) {
      .case-detail-hero .hero-title {
        font-size: 3.5rem; } }
  .case-detail-hero .hero-meta {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap; }
    .case-detail-hero .hero-meta .meta-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.875rem;
      opacity: 0.9; }
      .case-detail-hero .hero-meta .meta-item svg {
        width: 18px;
        height: 18px; }

.comparison-gallery {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 1.5rem;
  padding: 2rem;
  margin-bottom: 4rem; }
  .comparison-gallery .comparison-slider {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    cursor: ew-resize; }
    .comparison-gallery .comparison-slider .comparison-image {
      width: 100%;
      display: block; }
    .comparison-gallery .comparison-slider .comparison-before {
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 100%;
      object-fit: cover; }
    .comparison-gallery .comparison-slider .comparison-handle {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 4px;
      background: #FFFFFF;
      left: 50%;
      cursor: ew-resize;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
      .comparison-gallery .comparison-slider .comparison-handle::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 30px;
        height: 30px;
        background: #FFFFFF;
        border-radius: 9999px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
  .comparison-gallery .comparison-caption {
    text-align: center;
    margin-top: 1.5rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem; }
    .comparison-gallery .comparison-caption span {
      margin: 0 1.5rem; }

.gallery-section {
  margin-bottom: 4rem; }
  .gallery-section .gallery-container {
    margin-top: 2rem; }
  .gallery-section .gallery-slide {
    cursor: pointer;
    border-radius: 0.75rem;
    overflow: hidden;
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; }
    .gallery-section .gallery-slide:hover {
      transform: scale(1.05); }
      .gallery-section .gallery-slide:hover .slide-overlay {
        opacity: 1; }
    .gallery-section .gallery-slide img {
      width: 100%;
      height: 180px;
      object-fit: cover; }
    .gallery-section .gallery-slide .slide-badge {
      position: absolute;
      bottom: 0.5rem;
      right: 0.5rem;
      background: rgba(0, 0, 0, 0.7);
      color: #FFFFFF;
      padding: 0.25rem 1rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 600;
      z-index: 1; }
    .gallery-section .gallery-slide .slide-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 102, 255, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1); }
      .gallery-section .gallery-slide .slide-overlay svg {
        width: 40px;
        height: 40px;
        color: #FFFFFF; }

.image-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 1000;
  cursor: pointer; }
  .image-modal.active {
    display: flex;
    align-items: center;
    justify-content: center; }
  .image-modal .modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%; }
    .image-modal .modal-content img {
      max-width: 100%;
      max-height: 90vh;
      object-fit: contain;
      border-radius: 0.75rem; }
    .image-modal .modal-content .modal-close {
      position: absolute;
      top: -40px;
      right: 0;
      color: #FFFFFF;
      font-size: 32px;
      cursor: pointer;
      transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); }
      .image-modal .modal-content .modal-close:hover {
        transform: scale(1.1); }

.swiper-button-next,
.swiper-button-prev {
  color: #0066FF; }
  .swiper-button-next::after,
  .swiper-button-prev::after {
    font-size: 1.5rem; }

.swiper-pagination-bullet {
  background: #9CA3AF; }
  .swiper-pagination-bullet-active {
    background: #0066FF; }

.case-detail-content {
  padding: 4rem 0; }
  .case-detail-content .content-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px; }
  .case-detail-content .content-grid {
    display: grid;
    gap: 3rem;
    grid-template-columns: 1fr; }
    @media (min-width: 1024px) {
      .case-detail-content .content-grid {
        grid-template-columns: 2fr 1fr; } }
  .case-detail-content .main-content .content-section {
    margin-bottom: 4rem; }
    .case-detail-content .main-content .content-section:last-child {
      margin-bottom: 0; }
  .case-detail-content .main-content .section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 2rem;
    padding-bottom: 0.5rem;
    position: relative;
    display: inline-block; }
    .case-detail-content .main-content .section-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 60px;
      height: 3px;
      background: linear-gradient(135deg, #0066FF 0%, #00C9A7 100%);
      border-radius: 9999px; }
  .case-detail-content .main-content .section-text {
    color: #4B5563;
    line-height: 1.8;
    font-size: 1rem; }
    .case-detail-content .main-content .section-text p {
      margin-bottom: 1.5rem; }
    .case-detail-content .main-content .section-text strong {
      color: #1F2937; }
  .case-detail-content .main-content .diagnosis-box {
    background: #F9FAFB;
    border-left: 4px solid #0066FF;
    padding: 2rem;
    border-radius: 1rem; }
    .case-detail-content .main-content .diagnosis-box .diagnosis-label {
      font-size: 0.75rem;
      font-weight: 600;
      color: #0066FF;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 0.25rem; }
    .case-detail-content .main-content .diagnosis-box .diagnosis-text {
      font-size: 1.125rem;
      font-weight: 600;
      color: #111827;
      margin-bottom: 0.5rem; }
    .case-detail-content .main-content .diagnosis-box .diagnosis-code {
      font-size: 0.875rem;
      color: #6B7280; }
  .case-detail-content .main-content .treatment-info {
    background: #F9FAFB;
    padding: 2rem;
    border-radius: 1rem; }
    .case-detail-content .main-content .treatment-info .info-row {
      display: flex;
      gap: 1rem;
      margin-bottom: 1rem; }
      .case-detail-content .main-content .treatment-info .info-row:last-child {
        margin-bottom: 0; }
      .case-detail-content .main-content .treatment-info .info-row .info-label {
        font-weight: 600;
        color: #374151;
        min-width: 120px; }
      .case-detail-content .main-content .treatment-info .info-row .info-value {
        color: #4B5563; }
  .case-detail-content .main-content .rating-stars {
    display: flex;
    gap: 0.25rem;
    margin-top: 1rem; }
    .case-detail-content .main-content .rating-stars .star {
      color: #FFD700;
      font-size: 1.25rem; }
      .case-detail-content .main-content .rating-stars .star.empty {
        color: #D1D5DB; }
  .case-detail-content .main-content .doctor-notes {
    background: #fef3c7;
    padding: 2rem;
    border-radius: 1rem;
    border-left: 4px solid #f59e0b; }
    .case-detail-content .main-content .doctor-notes .notes-title {
      font-weight: 600;
      color: #92400e;
      margin-bottom: 1rem; }

.sidebar .info-card {
  background: #F9FAFB;
  border-radius: 1rem;
  padding: 2rem;
  margin-bottom: 2rem; }
  .sidebar .info-card:last-child {
    margin-bottom: 0; }
  .sidebar .info-card .card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #E5E7EB; }
  .sidebar .info-card .info-list {
    list-style: none;
    padding: 0; }
    .sidebar .info-card .info-list li {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem 0;
      border-bottom: 1px solid #E5E7EB; }
      .sidebar .info-card .info-list li:last-child {
        border-bottom: none; }
      .sidebar .info-card .info-list li svg {
        width: 20px;
        height: 20px;
        color: #0066FF;
        flex-shrink: 0; }
      .sidebar .info-card .info-list li span {
        color: #4B5563;
        font-size: 0.875rem; }
        .sidebar .info-card .info-list li span strong {
          color: #1F2937; }

.sidebar .share-card {
  text-align: center; }
  .sidebar .share-card .share-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 1.5rem; }
  .sidebar .share-card .share-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem; }
    .sidebar .share-card .share-buttons .share-btn {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #F3F4F6;
      border: none;
      border-radius: 9999px;
      cursor: pointer;
      transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); }
      .sidebar .share-card .share-buttons .share-btn svg {
        width: 20px;
        height: 20px;
        color: #4B5563;
        transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1); }
      .sidebar .share-card .share-buttons .share-btn:hover {
        transform: translateY(-2px); }
        .sidebar .share-card .share-buttons .share-btn:hover.telegram {
          background: #0088cc; }
          .sidebar .share-card .share-buttons .share-btn:hover.telegram svg {
            color: #FFFFFF; }
        .sidebar .share-card .share-buttons .share-btn:hover.whatsapp {
          background: #25D366; }
          .sidebar .share-card .share-buttons .share-btn:hover.whatsapp svg {
            color: #FFFFFF; }
        .sidebar .share-card .share-buttons .share-btn:hover.facebook {
          background: #1877F2; }
          .sidebar .share-card .share-buttons .share-btn:hover.facebook svg {
            color: #FFFFFF; }

@media (min-width: 768px) {
  .case-detail-hero {
    padding: 3rem 0; }
    .case-detail-hero .hero-title {
      font-size: 2rem; }
    .case-detail-hero .hero-meta {
      gap: 1.5rem; }
  .comparison-gallery {
    padding: 1.5rem; }
  .gallery-section .gallery-slide img {
    height: 140px; }
  .main-content .section-title {
    font-size: 1.25rem; } }

@media (min-width: 640px) {
  .case-detail-hero {
    padding: 2rem 0; }
    .case-detail-hero .hero-title {
      font-size: 1.5rem; }
    .case-detail-hero .hero-meta {
      gap: 1rem;
      flex-direction: column;
      align-items: center; }
  .comparison-gallery {
    padding: 1rem;
    margin-bottom: 2rem; }
    .comparison-gallery .comparison-handle::before {
      width: 24px;
      height: 24px; }
  .gallery-section .gallery-slide img {
    height: 120px; }
  .case-detail-content {
    padding: 2rem 0; }
  .content-section {
    margin-bottom: 2rem; }
  .section-title {
    font-size: 1.25rem; }
  .diagnosis-box,
  .treatment-info,
  .doctor-notes {
    padding: 1.5rem; }
  .info-card {
    padding: 1.5rem; }
  .sidebar {
    margin-top: 2rem; } }

.case-navigation {
  background: #F9FAFB;
  padding: 2rem 0;
  margin-top: 4rem; }
  .case-navigation .nav-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center; }
  .case-navigation .nav-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 3rem;
    background: linear-gradient(135deg, #0066FF 0%, #00C9A7 100%);
    border-radius: 9999px;
    text-decoration: none;
    color: #FFFFFF;
    font-weight: 600;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); }
    .case-navigation .nav-all svg {
      width: 20px;
      height: 20px; }
    .case-navigation .nav-all:hover {
      transform: scale(1.05);
      box-shadow: 0 0 20px rgba(0, 102, 255, 0.3); }

.clinical-case-detail {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px; }

.text-center {
  text-align: center; }

.doctors-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  margin-top: 60px;
  align-items: center;
  background: #008BD0;
  overflow: hidden;
  color: #FFFFFF; }
  .doctors-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 60px 60px;
    opacity: 0.5; }
  .doctors-hero .hero-container {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%; }
  .doctors-hero .hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto; }
  .doctors-hero .hero-badge {
    display: inline-block;
    padding: 8px 24px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 2rem; }
  .doctors-hero .hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.2; }
    .doctors-hero .hero-title .hero-span {
      color: #FFD700; }
    @media (min-width: 768px) {
      .doctors-hero .hero-title {
        font-size: 3rem; } }
    @media (min-width: 1024px) {
      .doctors-hero .hero-title {
        font-size: 3.5rem; } }
    .doctors-hero .hero-title span {
      background: linear-gradient(135deg, #008BD0 100%, #FFD700 100%);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent; }
  .doctors-hero .hero-description {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 3rem;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto; }
  .doctors-hero .hero-stats {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap; }
    .doctors-hero .hero-stats .stat-item {
      text-align: center; }
      .doctors-hero .hero-stats .stat-item .stat-number {
        font-size: 2rem;
        font-weight: 800;
        color: #FFD700;
        display: block;
        line-height: 1; }
      .doctors-hero .hero-stats .stat-item .stat-label {
        font-size: 0.875rem;
        color: rgba(255, 255, 255, 0.7);
        margin-top: 8px; }

.doctors-section {
  padding: 4rem 0;
  background: #F9FAFB; }

.doctors-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px; }

.doctors-filters {
  margin-bottom: 3rem; }
  .doctors-filters .filters-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem; }
    @media (min-width: 640px) {
      .doctors-filters .filters-wrapper {
        flex-direction: column;
        align-items: stretch; } }
  .doctors-filters .filter-group {
    flex: 0 0 auto;
    min-width: 200px; }
    .doctors-filters .filter-group select {
      width: 100%;
      padding: 12px 20px;
      border: 1px solid #E5E7EB;
      border-radius: 0.75rem;
      background: #FFFFFF;
      color: #374151;
      font-size: 0.875rem;
      cursor: pointer;
      transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 16px; }
      .doctors-filters .filter-group select:focus {
        outline: none;
        border-color: #008BD0;
        box-shadow: 0 0 0 3px rgba(0, 139, 208, 0.1); }
  .doctors-filters .search-box {
    position: relative;
    flex: 1;
    min-width: 250px;
    max-width: 350px; }
    .doctors-filters .search-box input {
      width: 100%;
      padding: 12px 40px 12px 20px;
      border: 1px solid #E5E7EB;
      border-radius: 0.75rem;
      font-size: 0.875rem;
      transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); }
      .doctors-filters .search-box input:focus {
        outline: none;
        border-color: #008BD0;
        box-shadow: 0 0 0 3px rgba(0, 139, 208, 0.1); }
    .doctors-filters .search-box .search-icon {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      color: #9CA3AF;
      pointer-events: none; }
  .doctors-filters .filter-tags {
    display: flex;
    flex-wrap: wrap;
    margin-top: 12px;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem; }
    .doctors-filters .filter-tags .filter-tag {
      padding: 18px 20px;
      background: #FFFFFF;
      border: 1px solid #E5E7EB;
      border-radius: 9999px;
      font-size: 0.875rem;
      font-weight: 500;
      color: #4B5563;
      cursor: pointer;
      transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); }
      .doctors-filters .filter-tags .filter-tag:hover {
        border-color: #008BD0;
        color: #008BD0;
        transform: translateY(-2px); }
      .doctors-filters .filter-tags .filter-tag.active {
        background: linear-gradient(135deg, #008BD0 100%, #FFD700 100%);
        border-color: transparent;
        color: #FFFFFF; }

@media (min-width: 768px) {
  .doctors-filters .filters-wrapper {
    gap: 0.5rem; }
  .doctors-filters .filter-group {
    min-width: 180px; }
    .doctors-filters .filter-group select {
      padding: 10px 16px;
      font-size: 0.813rem; }
  .doctors-filters .search-box {
    min-width: 200px; }
    .doctors-filters .search-box input {
      padding: 10px 35px 10px 16px;
      font-size: 0.813rem; }
  .doctors-filters .filter-tags .filter-tag {
    padding: 6px 16px;
    font-size: 0.813rem; } }

@media (min-width: 640px) {
  .doctors-filters {
    margin-bottom: 2rem; }
    .doctors-filters .filters-wrapper {
      flex-direction: column;
      align-items: stretch;
      gap: 0.5rem;
      margin-bottom: 1.5rem; }
    .doctors-filters .filter-group {
      width: 100%;
      min-width: auto; }
    .doctors-filters .search-box {
      width: 100%;
      max-width: none;
      min-width: auto; }
    .doctors-filters .filter-tags {
      flex-wrap: nowrap;
      overflow-x: auto;
      justify-content: flex-start;
      padding-bottom: 0.5rem;
      margin-top: 1rem; }
      .doctors-filters .filter-tags .filter-tag {
        white-space: nowrap;
        flex-shrink: 0; } }

@media (max-width: 480px) {
  .doctors-filters .filter-tags {
    gap: 0.25rem; }
    .doctors-filters .filter-tags .filter-tag {
      padding: 4px 12px;
      font-size: 0.75rem; } }

.doctors-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr; }
  @media (min-width: 768px) {
    .doctors-grid {
      grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) {
    .doctors-grid {
      grid-template-columns: repeat(3, 1fr); } }
.doctor-card {
  background: #FFFFFF;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative; }
  .doctor-card:hover {
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1); }
    .doctor-card:hover:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }
    .doctor-card:hover .doctor-card__image img {
      transform: scale(1.1); }
    .doctor-card:hover .doctor-card__social {
      opacity: 1;
      transform: translateY(0); }
  .doctor-card__image {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
    background: #E5E7EB; }
    .doctor-card__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1); }
    .doctor-card__image .doctor-badge {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: linear-gradient(135deg, #008BD0 100%, #FFD700 100%);
      color: #FFFFFF;
      padding: 0.25rem 1rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 600;
      z-index: 1; }
    .doctor-card__image .doctor-experience {
      position: absolute;
      bottom: 1rem;
      left: 1rem;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(4px);
      color: #FFFFFF;
      padding: 0.25rem 1rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 500;
      z-index: 1; }
  .doctor-card__social {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    padding: 1.5rem 1rem 1rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); }
    .doctor-card__social a {
      width: 36px;
      height: 36px;
      background: #FFFFFF;
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); }
      .doctor-card__social a svg {
        width: 18px;
        height: 18px;
        color: #374151; }
      .doctor-card__social a:hover {
        background: #008BD0;
        transform: translateY(-2px); }
        .doctor-card__social a:hover svg {
          color: #FFFFFF; }
  .doctor-card__content {
    padding: 2rem; }
    .doctor-card__content .doctor-name {
      font-size: 1.25rem;
      font-weight: 700;
      color: #111827;
      margin-bottom: 0.25rem;
      line-height: 1.3; }
    .doctor-card__content .doctor-position {
      font-size: 0.875rem;
      color: #008BD0;
      font-weight: 600;
      margin-bottom: 0.5rem; }
    .doctor-card__content .doctor-specialization {
      font-size: 0.875rem;
      color: #6B7280;
      margin-bottom: 1rem;
      line-height: 1.4; }
    .doctor-card__content .doctor-divider {
      height: 1px;
      background: #E5E7EB;
      margin: 1rem 0; }
    .doctor-card__content .doctor-contact {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.75rem;
      color: #6B7280;
      margin-bottom: 0.25rem; }
      .doctor-card__content .doctor-contact svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0; }
    .doctor-card__content .doctor-actions {
      display: flex;
      gap: 1rem;
      margin-top: 1.5rem; }
      .doctor-card__content .doctor-actions .btn-appointment {
        flex: 1;
        background: linear-gradient(135deg, #008BD0 100%, #FFD700 100%);
        color: #FFFFFF;
        border: none;
        padding: 10px;
        border-radius: 0.75rem;
        font-weight: 600;
        font-size: 0.875rem;
        cursor: pointer;
        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
        text-decoration: none;
        text-align: center; }
        .doctor-card__content .doctor-actions .btn-appointment:hover {
          transform: translateY(-2px);
          box-shadow: 0 0 20px rgba(0, 139, 208, 0.3); }
      .doctor-card__content .doctor-actions .btn-profile {
        width: 40px;
        background: #F3F4F6;
        border: none;
        border-radius: 0.75rem;
        cursor: pointer;
        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        justify-content: center; }
        .doctor-card__content .doctor-actions .btn-profile svg {
          width: 18px;
          height: 18px;
          color: #4B5563; }
        .doctor-card__content .doctor-actions .btn-profile:hover {
          background: #008BD0; }
          .doctor-card__content .doctor-actions .btn-profile:hover svg {
            color: #FFFFFF; }

.doctors-empty {
  text-align: center;
  padding: 4rem;
  background: #FFFFFF;
  border-radius: 1.5rem;
  grid-column: 1/-1; }
  .doctors-empty .empty-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    opacity: 0.5; }
  .doctors-empty h3 {
    font-size: 1.25rem;
    color: #111827;
    margin-bottom: 0.5rem; }
  .doctors-empty p {
    color: #6B7280; }

.doctors-pagination {
  margin-top: 4rem;
  display: flex;
  justify-content: center; }
  .doctors-pagination .pagination {
    display: flex;
    gap: 0.5rem;
    list-style: none; }
    .doctors-pagination .pagination .page-item .page-link {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 40px;
      height: 40px;
      padding: 0 1rem;
      background: #FFFFFF;
      border: 1px solid #E5E7EB;
      border-radius: 0.75rem;
      color: #374151;
      font-weight: 500;
      transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
      text-decoration: none; }
      .doctors-pagination .pagination .page-item .page-link:hover {
        background: #F3F4F6;
        border-color: #008BD0;
        color: #008BD0; }
    .doctors-pagination .pagination .page-item.active .page-link {
      background: linear-gradient(135deg, #008BD0 100%, #FFD700 100%);
      border-color: transparent;
      color: #FFFFFF; }

@media (min-width: 768px) {
  .doctors-hero {
    min-height: 50vh; }
    .doctors-hero .hero-title {
      font-size: 2rem; }
    .doctors-hero .hero-stats {
      gap: 30px; }
      .doctors-hero .hero-stats .stat-number {
        font-size: 1.5rem; }
  .doctors-filters .filters-wrapper {
    flex-direction: column;
    align-items: center; }
  .doctors-filters .filter-group,
  .doctors-filters .search-box {
    width: 100%;
    max-width: 300px; }
  .doctor-card__content {
    padding: 1.5rem; }
  .doctor-card .doctor-name {
    font-size: 1.125rem; } }

@media (min-width: 640px) {
  .doctors-hero .hero-title {
    font-size: 1.5rem; }
  .doctors-hero .hero-description {
    font-size: 1rem; }
  .doctors-grid {
    gap: 1.5rem; }
  .doctor-card__image {
    aspect-ratio: 4/3; }
  .doctor-card__content {
    padding: 1rem; }
  .doctor-card .doctor-actions {
    flex-direction: column; }
    .doctor-card .doctor-actions .btn-profile {
      width: 100%;
      padding: 10px; }
  .doctors-pagination .pagination {
    gap: 0.25rem; }
    .doctors-pagination .pagination .page-item .page-link {
      min-width: 35px;
      height: 35px;
      font-size: 0.875rem; } }

.doctors-page {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.doctor-card {
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
  transform: translateY(20px); }
  .doctor-card:nth-child(1) {
    animation-delay: 0.05s; }
  .doctor-card:nth-child(2) {
    animation-delay: 0.1s; }
  .doctor-card:nth-child(3) {
    animation-delay: 0.15s; }
  .doctor-card:nth-child(4) {
    animation-delay: 0.2s; }
  .doctor-card:nth-child(5) {
    animation-delay: 0.25s; }
  .doctor-card:nth-child(6) {
    animation-delay: 0.3s; }
  .doctor-card:nth-child(7) {
    animation-delay: 0.35s; }
  .doctor-card:nth-child(8) {
    animation-delay: 0.4s; }
  .doctor-card:nth-child(9) {
    animation-delay: 0.45s; }
  .doctor-card:nth-child(10) {
    animation-delay: 0.5s; }
  .doctor-card:nth-child(11) {
    animation-delay: 0.55s; }
  .doctor-card:nth-child(12) {
    animation-delay: 0.6s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0); } }

.doctor-hero {
  padding: 60px 0 48px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); }
  .doctor-hero__inner {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 48px; }
    @media (max-width: 768px) {
      .doctor-hero__inner {
        grid-template-columns: 1fr;
        gap: 32px; } }
  .doctor-hero__image {
    position: relative; }
    .doctor-hero__image .doctor-avatar {
      width: 100%;
      height: 400px;
      aspect-ratio: 1;
      border-radius: 12px;
      overflow: hidden;
      background: linear-gradient(135deg, #008BD0 0%, #006ba3 100%);
      box-shadow: 0 20px 25px rgba(0, 0, 0, 0.05);
      transition: transform 0.5s ease; }
      .doctor-hero__image .doctor-avatar:hover {
        transform: scale(1.02); }
      .doctor-hero__image .doctor-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 12px; }
      .doctor-hero__image .doctor-avatar__placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #008BD0 0%, #006ba3 100%); }
        .doctor-hero__image .doctor-avatar__placeholder span {
          font-size: 6rem;
          font-weight: 700;
          color: white;
          text-transform: uppercase; }
    .doctor-hero__image .doctor-badges {
      position: absolute;
      bottom: -16px;
      left: 24px;
      right: 24px;
      display: flex;
      gap: 8px;
      justify-content: center; }
      .doctor-hero__image .doctor-badges .badge {
        padding: 8px 16px;
        border-radius: 50px;
        font-size: 0.875rem;
        font-weight: 600;
        background: #ffffff;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease; }
        .doctor-hero__image .doctor-badges .badge:hover {
          transform: translateY(-2px); }
        .doctor-hero__image .doctor-badges .badge-expert {
          background: linear-gradient(135deg, #008BD0 98%, #FFD700 2%);
          color: white; }
        .doctor-hero__image .doctor-badges .badge-category {
          background: linear-gradient(135deg, #008BD0 0%, #006ba3 100%);
          color: white; }
  .doctor-hero__info .doctor-name {
    font-size: 3rem;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap; }
    .doctor-hero__info .doctor-name .btn-favorite {
      background: none;
      border: none;
      cursor: pointer;
      color: #ccc;
      transition: all 0.3s ease; }
      .doctor-hero__info .doctor-name .btn-favorite:hover {
        color: #dc2626;
        transform: scale(1.1); }
      .doctor-hero__info .doctor-name .btn-favorite.active {
        color: #dc2626;
        animation: pulse 0.5s ease; }
  .doctor-hero__info .doctor-specialization {
    font-size: 1.125rem;
    color: #008BD0;
    font-weight: 500;
    margin-bottom: 32px; }
  .doctor-hero__info .doctor-stats {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 32px; }
    .doctor-hero__info .doctor-stats .stat-item {
      text-align: center;
      background: rgba(0, 139, 208, 0.05);
      padding: 16px 32px;
      border-radius: 16px;
      min-width: 100px;
      transition: all 0.3s ease; }
      .doctor-hero__info .doctor-stats .stat-item:hover {
        background: rgba(0, 139, 208, 0.1);
        transform: translateY(-3px); }
      .doctor-hero__info .doctor-stats .stat-item .stat-value {
        display: block;
        font-size: 2.25rem;
        font-weight: 700;
        color: #008BD0;
        line-height: 1; }
      .doctor-hero__info .doctor-stats .stat-item .stat-label {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 4px; }
  .doctor-hero__info .doctor-quote {
    background: rgba(0, 139, 208, 0.05);
    border-left: 4px solid #008BD0;
    padding: 24px;
    border-radius: 16px;
    margin-bottom: 32px;
    transition: all 0.3s ease; }
    .doctor-hero__info .doctor-quote:hover {
      background: rgba(0, 139, 208, 0.08);
      transform: translateX(5px); }
    .doctor-hero__info .doctor-quote blockquote {
      margin: 0; }
      .doctor-hero__info .doctor-quote blockquote p {
        font-style: italic;
        color: #2c3e50;
        font-size: 1rem;
        line-height: 1.6;
        margin: 0; }
  .doctor-hero__info .doctor-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap; }
    .doctor-hero__info .doctor-actions .btn {
      padding: 16px 40px;
      border-radius: 50px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      border: none;
      font-size: 1rem; }
      .doctor-hero__info .doctor-actions .btn-primary {
        background: linear-gradient(135deg, #008BD0 0%, #006ba3 100%);
        color: white;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); }
        .doctor-hero__info .doctor-actions .btn-primary:hover {
          transform: translateY(-3px);
          box-shadow: 0 10px 25px rgba(0, 139, 208, 0.25); }
        .doctor-hero__info .doctor-actions .btn-primary:active {
          transform: translateY(0); }
      .doctor-hero__info .doctor-actions .btn-outline {
        background: transparent;
        border: 2px solid #008BD0;
        color: #008BD0; }
        .doctor-hero__info .doctor-actions .btn-outline:hover {
          background: #008BD0;
          color: white;
          transform: translateY(-3px); }

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid #e9ecef;
  margin-bottom: 32px;
  flex-wrap: wrap; }
  .tabs .tab-btn {
    padding: 16px 32px;
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative; }
    .tabs .tab-btn:hover {
      color: #008BD0; }
    .tabs .tab-btn.active {
      color: #008BD0; }
      .tabs .tab-btn.active::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        right: 0;
        height: 2px;
        background: #008BD0;
        animation: slideIn 0.3s ease; }

.tab-content {
  display: none;
  animation: fadeIn 0.3s ease; }
  .tab-content.active {
    display: block; }

.about-doctor h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 24px;
  margin-top: 48px; }
  .about-doctor h3:first-child {
    margin-top: 0; }

.about-doctor .info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 32px; }
  .about-doctor .info-grid .info-item {
    background: #f8f9fa;
    padding: 16px 24px;
    border-radius: 16px;
    transition: all 0.3s ease; }
    .about-doctor .info-grid .info-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); }
    .about-doctor .info-grid .info-item .info-label {
      display: block;
      font-size: 0.875rem;
      color: #6c757d;
      margin-bottom: 4px; }
    .about-doctor .info-grid .info-item .info-value {
      font-size: 1rem;
      font-weight: 600;
      color: #2c3e50; }

.about-doctor .bio-content {
  line-height: 1.8;
  color: #4a5568;
  margin-bottom: 32px; }

.about-doctor .services-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px; }
  .about-doctor .services-list li {
    padding: 16px 24px;
    background: rgba(0, 139, 208, 0.05);
    border-radius: 16px;
    color: #2c3e50;
    transition: all 0.3s ease; }
    .about-doctor .services-list li:hover {
      background: rgba(0, 139, 208, 0.1);
      transform: translateX(5px); }
    .about-doctor .services-list li::before {
      content: '✓';
      color: #008BD0;
      margin-right: 8px;
      font-weight: 700; }

.timeline-item {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid #e9ecef; }
  .timeline-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0; }
  .timeline-item .timeline-year {
    min-width: 100px;
    font-weight: 700;
    color: #008BD0;
    font-size: 1.125rem;
    position: relative; }
    .timeline-item .timeline-year::before {
      content: '';
      position: absolute;
      right: -24px;
      top: 50%;
      width: 12px;
      height: 12px;
      background: #008BD0;
      border-radius: 50%;
      transform: translateY(-50%); }
  .timeline-item .timeline-content {
    flex: 1; }
    .timeline-item .timeline-content h4 {
      font-size: 1.125rem;
      font-weight: 700;
      color: #2c3e50;
      margin-bottom: 4px; }
    .timeline-item .timeline-content p {
      color: #6c757d;
      margin-bottom: 8px;
      line-height: 1.5; }
    .timeline-item .timeline-content .timeline-type,
    .timeline-item .timeline-content .timeline-location {
      font-size: 0.875rem;
      color: #008BD0;
      background: rgba(0, 139, 208, 0.1);
      padding: 4px 16px;
      border-radius: 50px;
      display: inline-block;
      margin-top: 4px; }

.education-timeline .empty-state,
.experience-timeline .empty-state {
  text-align: center;
  padding: 60px;
  background: #f8f9fa;
  border-radius: 20px; }
  .education-timeline .empty-state p,
  .experience-timeline .empty-state p {
    color: #6c757d;
    margin: 0; }

@media (max-width: 768px) {
  .timeline-item {
    flex-direction: column;
    gap: 16px; }
    .timeline-item .timeline-year {
      min-width: auto; }
      .timeline-item .timeline-year::before {
        display: none; } }

.certificates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px; }
  .certificates-grid .certificate-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease; }
    .certificates-grid .certificate-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0, 139, 208, 0.25); }
    .certificates-grid .certificate-card .certificate-preview {
      height: 220px;
      overflow: hidden;
      background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
      position: relative;
      cursor: pointer; }
      .certificates-grid .certificate-card .certificate-preview .certificate-link {
        display: block;
        width: 100%;
        height: 100%;
        text-decoration: none; }
        .certificates-grid .certificate-card .certificate-preview .certificate-link img.certificate-thumb {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s ease; }
          .certificates-grid .certificate-card .certificate-preview .certificate-link img.certificate-thumb:hover {
            transform: scale(1.08); }
      .certificates-grid .certificate-card .certificate-preview .certificate-pdf-preview {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        background: linear-gradient(135deg, #fff5e6 0%, #ffe0b3 100%);
        transition: all 0.3s ease; }
        .certificates-grid .certificate-card .certificate-preview .certificate-pdf-preview:hover {
          background: linear-gradient(135deg, #ffe0b3 0%, #ffcc80 100%); }
          .certificates-grid .certificate-card .certificate-preview .certificate-pdf-preview:hover .pdf-icon {
            transform: scale(1.1); }
        .certificates-grid .certificate-card .certificate-preview .certificate-pdf-preview .pdf-icon {
          font-size: 4rem;
          margin-bottom: 8px;
          transition: transform 0.3s ease; }
        .certificates-grid .certificate-card .certificate-preview .certificate-pdf-preview .pdf-name {
          font-size: 0.875rem;
          color: #2c3e50;
          font-weight: 500;
          text-align: center;
          padding: 0 8px;
          word-break: break-word; }
      .certificates-grid .certificate-card .certificate-preview .certificate-no-preview {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%; }
        .certificates-grid .certificate-card .certificate-preview .certificate-no-preview .no-preview-icon {
          font-size: 3.5rem;
          margin-bottom: 8px;
          opacity: 0.6; }
        .certificates-grid .certificate-card .certificate-preview .certificate-no-preview .no-preview-text {
          font-size: 0.875rem;
          color: #6c757d; }
      .certificates-grid .certificate-card .certificate-preview .file-type-badge {
        position: absolute;
        top: 8px;
        right: 8px;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(8px);
        color: white;
        font-size: 0.75rem;
        padding: 4px 8px;
        border-radius: 50px;
        display: flex;
        align-items: center;
        gap: 6px;
        z-index: 2; }
      .certificates-grid .certificate-card .certificate-preview::after {
        content: '🔍';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
        transition: transform 0.3s ease;
        pointer-events: none;
        z-index: 3; }
      .certificates-grid .certificate-card .certificate-preview:hover::after {
        transform: translate(-50%, -50%) scale(1); }
    .certificates-grid .certificate-card .certificate-info {
      padding: 24px; }
      .certificates-grid .certificate-card .certificate-info .certificate-header {
        display: flex;
        gap: 16px;
        margin-bottom: 16px; }
        .certificates-grid .certificate-card .certificate-info .certificate-header .certificate-icon {
          font-size: 2.5rem;
          background: linear-gradient(135deg, #008BD0 95%, #FFD700 5%);
          width: 24px;
          height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 16px;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }
        .certificates-grid .certificate-card .certificate-info .certificate-header .certificate-title {
          flex: 1; }
          .certificates-grid .certificate-card .certificate-info .certificate-header .certificate-title h4 {
            font-size: 1rem;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 4px;
            line-height: 1.4; }
          .certificates-grid .certificate-card .certificate-info .certificate-header .certificate-title .certificate-org {
            font-size: 0.875rem;
            color: #008BD0;
            margin-bottom: 0;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px; }
            .certificates-grid .certificate-card .certificate-info .certificate-header .certificate-title .certificate-org .org-icon {
              font-size: 14px; }
      .certificates-grid .certificate-card .certificate-info .certificate-desc {
        font-size: 0.875rem;
        color: #6c757d;
        line-height: 1.5;
        margin: 16px 0;
        padding: 8px;
        background: #f8f9fa;
        border-radius: 8px;
        display: flex;
        gap: 8px; }
        .certificates-grid .certificate-card .certificate-info .certificate-desc .desc-icon {
          font-size: 14px;
          flex-shrink: 0; }
      .certificates-grid .certificate-card .certificate-info .certificate-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 16px;
        padding-top: 8px;
        border-top: 1px solid #e9ecef; }
        .certificates-grid .certificate-card .certificate-info .certificate-footer .certificate-year {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          font-size: 0.875rem;
          color: #008BD0;
          background: rgba(0, 139, 208, 0.1);
          padding: 4px 16px;
          border-radius: 50px;
          font-weight: 500; }
          .certificates-grid .certificate-card .certificate-info .certificate-footer .certificate-year .year-icon {
            font-size: 12px; }
        .certificates-grid .certificate-card .certificate-info .certificate-footer .btn-certificate-view {
          padding: 8px 24px;
          border-radius: 50px;
          font-size: 0.875rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s ease;
          display: inline-flex;
          align-items: center;
          gap: 4px;
          text-decoration: none;
          border: none;
          background: linear-gradient(135deg, #008BD0 0%, #006ba3 100%);
          color: white; }
          .certificates-grid .certificate-card .certificate-info .certificate-footer .btn-certificate-view .btn-icon {
            font-size: 14px; }
          .certificates-grid .certificate-card .certificate-info .certificate-footer .btn-certificate-view:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 139, 208, 0.25); }
          .certificates-grid .certificate-card .certificate-info .certificate-footer .btn-certificate-view:active {
            transform: translateY(0); }
  .certificates-grid .empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px;
    background: #f8f9fa;
    border-radius: 20px; }
    .certificates-grid .empty-state .empty-icon {
      font-size: 4rem;
      margin-bottom: 16px;
      opacity: 0.5; }
    .certificates-grid .empty-state h4 {
      font-size: 1.125rem;
      color: #2c3e50;
      margin-bottom: 8px; }
    .certificates-grid .empty-state p {
      color: #6c757d;
      margin: 0; }

@keyframes bounce {
  0%, 100% {
    transform: translateY(0); }
  50% {
    transform: translateY(-5px); } }

@media (max-width: 768px) {
  .certificates-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px; }
    .certificates-grid .certificate-card .certificate-preview {
      height: 180px; }
    .certificates-grid .certificate-card .certificate-info {
      padding: 16px; }
      .certificates-grid .certificate-card .certificate-info .certificate-footer {
        flex-direction: column;
        gap: 8px; }
        .certificates-grid .certificate-card .certificate-info .certificate-footer .certificate-actions {
          width: 100%; }
          .certificates-grid .certificate-card .certificate-info .certificate-footer .certificate-actions .btn-certificate-view,
          .certificates-grid .certificate-card .certificate-info .certificate-footer .certificate-actions .btn-certificate-download {
            flex: 1;
            text-align: center;
            justify-content: center; }
      .certificates-grid .certificate-card .certificate-info .certificate-header .certificate-icon {
        width: 40px;
        height: 40px;
        font-size: 1.8rem; } }

@media (max-width: 576px) {
  .certificates-grid {
    grid-template-columns: 1fr;
    gap: 16px; } }

.fancybox__container {
  --fancybox-bg: rgba(0, 0, 0, 0.9); }

.fancybox__slide {
  padding: 20px; }

.fancybox__caption {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: white;
  font-size: 14px;
  padding: 15px;
  text-align: center; }

.reviews-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px; }
  .reviews-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 0; }
  .reviews-header .btn-add-review {
    background: transparent;
    border: 2px solid #008BD0;
    color: #008BD0;
    padding: 8px 32px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600; }
    .reviews-header .btn-add-review:hover {
      background: #008BD0;
      color: white;
      transform: translateY(-2px); }

.reviews-summary {
  display: flex;
  justify-content: center;
  margin-bottom: 48px; }
  .reviews-summary .rating-circle {
    text-align: center;
    background: #f8f9fa;
    padding: 32px 48px;
    border-radius: 50%; }
    .reviews-summary .rating-circle .rating-value {
      font-size: 3rem;
      font-weight: 800;
      color: #008BD0;
      display: block;
      line-height: 1; }
    .reviews-summary .rating-circle .rating-stars {
      font-size: 1.25rem;
      color: #FFD700;
      letter-spacing: 4px;
      margin: 8px 0; }
    .reviews-summary .rating-circle .rating-count {
      font-size: 0.875rem;
      color: #6c757d; }

.review-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease; }
  .review-card:hover {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px); }
  .review-card .review-header {
    display: flex;
    gap: 16px;
    margin-bottom: 16px; }
    .review-card .review-header .reviewer-avatar {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: linear-gradient(135deg, #008BD0 0%, #006ba3 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0; }
      .review-card .review-header .reviewer-avatar span {
        font-size: 1.25rem;
        font-weight: 700;
        color: white;
        text-transform: uppercase; }
      .review-card .review-header .reviewer-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%; }
    .review-card .review-header .reviewer-info {
      flex: 1; }
      .review-card .review-header .reviewer-info h4 {
        font-size: 1rem;
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 4px; }
      .review-card .review-header .reviewer-info .review-rating {
        color: #FFD700;
        font-size: 0.875rem;
        margin-bottom: 4px;
        letter-spacing: 1px; }
      .review-card .review-header .reviewer-info .review-date {
        font-size: 0.75rem;
        color: #6c757d; }
  .review-card .review-content p {
    color: #4a5568;
    line-height: 1.7;
    margin: 0; }
  .review-card .doctor-response {
    margin-top: 16px;
    padding: 16px 24px;
    background: rgba(0, 139, 208, 0.05);
    border-radius: 12px;
    border-left: 3px solid #008BD0; }
    .review-card .doctor-response strong {
      display: block;
      color: #008BD0;
      margin-bottom: 8px;
      font-size: 0.875rem; }
    .review-card .doctor-response p {
      margin: 0;
      font-size: 0.875rem; }

.reviews-list .empty-state {
  text-align: center;
  padding: 60px;
  background: #f8f9fa;
  border-radius: 20px; }
  .reviews-list .empty-state p {
    color: #6c757d;
    margin: 0; }

.doctor-contacts {
  padding: 60px 0;
  background: #f8f9fa;
  margin-top: 60px; }
  .doctor-contacts .contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px; }
    @media (max-width: 768px) {
      .doctor-contacts .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 32px; } }
  .doctor-contacts .working-hours,
  .doctor-contacts .contact-info {
    background: #ffffff;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease; }
    .doctor-contacts .working-hours:hover,
    .doctor-contacts .contact-info:hover {
      box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
      transform: translateY(-3px); }
    .doctor-contacts .working-hours h3,
    .doctor-contacts .contact-info h3 {
      font-size: 1.25rem;
      font-weight: 700;
      color: #2c3e50;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 8px; }
  .doctor-contacts .schedule-list .schedule-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #e9ecef; }
    .doctor-contacts .schedule-list .schedule-item:last-child {
      border-bottom: none; }
    .doctor-contacts .schedule-list .schedule-item .day {
      font-weight: 600;
      color: #2c3e50;
      width: 110px; }
    .doctor-contacts .schedule-list .schedule-item .time {
      flex: 1;
      color: #6c757d; }
    .doctor-contacts .schedule-list .schedule-item .status {
      font-size: 0.75rem;
      padding: 4px 16px;
      border-radius: 50px;
      font-weight: 500; }
      .doctor-contacts .schedule-list .schedule-item .status-working {
        background: #d1fae5;
        color: #059669; }
      .doctor-contacts .schedule-list .schedule-item .status-dayoff {
        background: #fee2e2;
        color: #dc2626; }
  .doctor-contacts .contact-links {
    display: flex;
    flex-direction: column;
    gap: 16px; }
    .doctor-contacts .contact-links .contact-link {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 24px;
      background: #f8f9fa;
      border-radius: 16px;
      text-decoration: none;
      color: #2c3e50;
      transition: all 0.3s ease; }
      .doctor-contacts .contact-links .contact-link:hover {
        background: #008BD0;
        color: white;
        transform: translateX(8px); }
      .doctor-contacts .contact-links .contact-link.whatsapp:hover {
        background: #25D366; }
      .doctor-contacts .contact-links .contact-link.telegram:hover {
        background: #0088cc; }

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px); }
  .modal.show {
    display: flex;
    align-items: center;
    justify-content: center; }
  .modal-content {
    background: #ffffff;
    border-radius: 24px;
    padding: 32px;
    width: 90%;
    max-width: 500px;
    position: relative;
    animation: slideUp 0.3s ease;
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.05); }
    .modal-content .modal-close {
      position: absolute;
      right: 24px;
      top: 24px;
      font-size: 28px;
      cursor: pointer;
      color: #6c757d;
      transition: all 0.3s ease;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%; }
      .modal-content .modal-close:hover {
        color: #dc2626;
        background: rgba(220, 38, 38, 0.1); }
    .modal-content h3 {
      font-size: 1.5rem;
      font-weight: 700;
      color: #2c3e50;
      margin-bottom: 24px;
      padding-right: 32px; }
    .modal-content .form-group {
      margin-bottom: 24px; }
      .modal-content .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: #2c3e50;
        font-size: 0.875rem; }
      .modal-content .form-group input,
      .modal-content .form-group select {
        width: 100%;
        padding: 16px;
        border: 1px solid #e9ecef;
        border-radius: 16px;
        font-size: 1rem;
        transition: all 0.3s ease; }
        .modal-content .form-group input:focus,
        .modal-content .form-group select:focus {
          outline: none;
          border-color: #008BD0;
          box-shadow: 0 0 0 3px rgba(0, 139, 208, 0.1); }
    .modal-content .btn-primary {
      width: 100%;
      padding: 16px;
      background: linear-gradient(135deg, #008BD0 0%, #006ba3 100%);
      color: white;
      border: none;
      border-radius: 50px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 1rem; }
      .modal-content .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(0, 139, 208, 0.25); }
      .modal-content .btn-primary:active {
        transform: translateY(0); }

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(50px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

@keyframes slideIn {
  from {
    width: 0;
    opacity: 0; }
  to {
    width: 100%;
    opacity: 1; } }

@keyframes pulse {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.2); }
  100% {
    transform: scale(1); } }

@keyframes shimmer {
  0% {
    background-position: -200% 0; }
  100% {
    background-position: 200% 0; } }

@keyframes spin {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }

@keyframes bounce {
  0%, 100% {
    transform: translateY(0); }
  50% {
    transform: translateY(-10px); } }

@keyframes shake {
  0%, 100% {
    transform: translateX(0); }
  25% {
    transform: translateX(-5px); }
  75% {
    transform: translateX(5px); } }

@media (max-width: 768px) {
  .doctor-hero {
    padding: 48px 0 32px; }
    .doctor-hero__info .doctor-name {
      font-size: 2.25rem; }
    .doctor-hero__info .doctor-stats .stat-item {
      padding: 16px 24px; }
      .doctor-hero__info .doctor-stats .stat-item .stat-value {
        font-size: 1.875rem; }
  .tabs .tab-btn {
    padding: 16px 24px;
    font-size: 0.875rem; }
  .timeline-item {
    flex-direction: column;
    gap: 16px; }
    .timeline-item .timeline-year {
      min-width: auto; }
      .timeline-item .timeline-year::before {
        display: none; }
  .reviews-header {
    flex-direction: column;
    text-align: center; }
  .certificates-grid {
    grid-template-columns: 1fr; }
  .contact-wrapper {
    grid-template-columns: 1fr; } }

@media (max-width: 576px) {
  .doctor-hero {
    padding: 40px 0 24px; }
    .doctor-hero__info .doctor-name {
      font-size: 1.875rem;
      flex-direction: column;
      text-align: center; }
    .doctor-hero__info .doctor-specialization {
      text-align: center; }
    .doctor-hero__info .doctor-stats {
      justify-content: center; }
      .doctor-hero__info .doctor-stats .stat-item {
        padding: 16px;
        min-width: 80px; }
        .doctor-hero__info .doctor-stats .stat-item .stat-value {
          font-size: 1.5rem; }
    .doctor-hero__info .doctor-quote {
      text-align: center; }
    .doctor-hero__info .doctor-actions {
      justify-content: center; }
      .doctor-hero__info .doctor-actions .btn {
        width: 100%;
        text-align: center; }
    .doctor-hero__image .doctor-badges {
      left: 16px;
      right: 16px; }
      .doctor-hero__image .doctor-badges .badge {
        font-size: 0.75rem;
        padding: 4px 16px; }
  .tabs .tab-btn {
    flex: 1;
    text-align: center;
    padding: 8px;
    font-size: 0.75rem; }
  .about-doctor .info-grid {
    grid-template-columns: 1fr; }
  .about-doctor .services-list {
    grid-template-columns: 1fr; }
  .reviews-summary .rating-circle {
    padding: 24px; }
    .reviews-summary .rating-circle .rating-value {
      font-size: 2.25rem; }
  .review-card {
    padding: 16px; }
    .review-card .review-header {
      flex-direction: column;
      align-items: center;
      text-align: center; }
  .modal-content {
    padding: 24px;
    margin: 16px; }
  .working-hours,
  .contact-info {
    padding: 24px; }
    .working-hours .schedule-item,
    .contact-info .schedule-item {
      flex-wrap: wrap;
      gap: 8px; }
      .working-hours .schedule-item .day,
      .contact-info .schedule-item .day {
        width: 100%; } }

@media (max-width: 480px) {
  .doctor-stats {
    gap: 8px !important; }
    .doctor-stats .stat-item {
      min-width: 70px !important; }
      .doctor-stats .stat-item .stat-value {
        font-size: 1.25rem !important; }
      .doctor-stats .stat-item .stat-label {
        font-size: 0.75rem !important; } }

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px; } }

.empty-state,
.empty-state-full {
  text-align: center;
  padding: 60px 32px;
  background: #f8f9fa;
  border-radius: 16px; }
  .empty-state .empty-icon,
  .empty-state-full .empty-icon {
    font-size: 4rem;
    margin-bottom: 16px;
    opacity: 0.5; }
  .empty-state h4,
  .empty-state-full h4 {
    font-size: 1.125rem;
    color: #2c3e50;
    margin-bottom: 8px; }
  .empty-state p,
  .empty-state-full p {
    color: #6c757d;
    margin-bottom: 24px; }
  .empty-state .btn-primary,
  .empty-state-full .btn-primary {
    margin-top: 16px; }

.empty-state-full {
  grid-column: 1 / -1; }

.tab-btn {
  position: relative; }
  .tab-btn .tab-icon {
    margin-right: 4px; }
  .tab-btn .tab-count {
    display: inline-block;
    background: rgba(0, 139, 208, 0.1);
    color: #008BD0;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 50px;
    margin-left: 4px;
    font-weight: 500; }
  .tab-btn .tab-empty {
    font-size: 0.75rem;
    color: #6c757d;
    margin-left: 4px;
    font-weight: 400; }

.rating-input {
  display: flex;
  gap: 8px;
  justify-content: center; }
  .rating-input .rating-star {
    font-size: 2rem;
    cursor: pointer;
    color: #6c757d;
    transition: all 0.3s ease; }
    .rating-input .rating-star:hover, .rating-input .rating-star.active {
      color: #FFD700;
      transform: scale(1.1); }

.services-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px; }
  .services-list li .service-name {
    flex: 1;
    font-weight: 500; }
  .services-list li .service-price {
    color: #008BD0;
    font-weight: 700; }
  .services-list li .service-duration {
    font-size: 0.75rem;
    color: #6c757d; }

.calendar-container {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); }
  .calendar-container .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px; }
    .calendar-container .calendar-header h3 {
      font-size: 1.25rem;
      font-weight: 700;
      color: #2c3e50;
      margin: 0; }
    .calendar-container .calendar-header .calendar-nav {
      background: #f8f9fa;
      border: none;
      font-size: 1.25rem;
      cursor: pointer;
      padding: 8px 16px;
      border-radius: 8px;
      transition: all 0.3s ease; }
      .calendar-container .calendar-header .calendar-nav:hover {
        background: #008BD0;
        color: white; }
  .calendar-container .calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 8px; }
    .calendar-container .calendar-weekdays span {
      font-weight: 700;
      color: #6c757d;
      padding: 8px; }
  .calendar-container .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px; }
    .calendar-container .calendar-grid .calendar-day {
      aspect-ratio: 1;
      padding: 8px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative; }
      .calendar-container .calendar-grid .calendar-day:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); }
      .calendar-container .calendar-grid .calendar-day .day-number {
        font-weight: 600;
        font-size: 1rem; }
      .calendar-container .calendar-grid .calendar-day .day-indicator {
        position: absolute;
        bottom: 4px;
        right: 4px;
        width: 8px;
        height: 8px;
        border-radius: 50%; }
      .calendar-container .calendar-grid .calendar-day.status-available {
        background: #d4edda;
        color: #155724; }
        .calendar-container .calendar-grid .calendar-day.status-available .day-indicator {
          background: #28a745; }
      .calendar-container .calendar-grid .calendar-day.status-partial {
        background: #fff3cd;
        color: #856404; }
        .calendar-container .calendar-grid .calendar-day.status-partial .day-indicator {
          background: #ffc107; }
      .calendar-container .calendar-grid .calendar-day.status-leave {
        background: #f8d7da;
        color: #721c24; }
        .calendar-container .calendar-grid .calendar-day.status-leave .day-indicator {
          background: #dc3545; }
      .calendar-container .calendar-grid .calendar-day.status-dayoff {
        background: #e2e3e5;
        color: #383d41; }
        .calendar-container .calendar-grid .calendar-day.status-dayoff .day-indicator {
          background: #6c757d; }
      .calendar-container .calendar-grid .calendar-day.status-appointments {
        background: #cce5ff;
        color: #004085; }
        .calendar-container .calendar-grid .calendar-day.status-appointments .day-indicator {
          background: #007bff; }
      .calendar-container .calendar-grid .calendar-day.other-month {
        opacity: 0.4; }

.calendar-legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 24px;
  flex-wrap: wrap; }
  .calendar-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem; }
    .calendar-legend .legend-item span {
      width: 16px;
      height: 16px;
      border-radius: 4px; }

.day-detail-modal .modal-content {
  max-width: 500px; }
  .day-detail-modal .modal-content .appointment-item {
    padding: 16px;
    border-bottom: 1px solid #e9ecef; }
    .day-detail-modal .modal-content .appointment-item:last-child {
      border-bottom: none; }
    .day-detail-modal .modal-content .appointment-item .appointment-time {
      font-weight: 700;
      color: #008BD0; }
    .day-detail-modal .modal-content .appointment-item .appointment-patient {
      font-weight: 600; }
  .day-detail-modal .modal-content .slot-item {
    padding: 8px;
    background: #f8d7da;
    border-radius: 8px;
    margin-bottom: 8px; }

.time-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 16px; }
  .time-slots-grid .time-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-radius: 8px;
    background: #f8f9fa; }
    .time-slots-grid .time-slot.available {
      background: #d4edda;
      border-left: 3px solid #28a745; }
      .time-slots-grid .time-slot.available .slot-book-btn {
        background: #28a745;
        color: white;
        border: none;
        padding: 4px 12px;
        border-radius: 50px;
        cursor: pointer;
        font-size: 0.75rem;
        transition: all 0.3s ease; }
        .time-slots-grid .time-slot.available .slot-book-btn:hover {
          background: #1e7e34;
          transform: scale(1.05); }
    .time-slots-grid .time-slot.booked {
      background: #f8d7da;
      border-left: 3px solid #dc3545;
      opacity: 0.7; }
      .time-slots-grid .time-slot.booked .slot-status {
        color: #dc3545; }
    .time-slots-grid .time-slot .slot-time {
      font-weight: 700;
      font-size: 1rem; }
    .time-slots-grid .time-slot .slot-status {
      font-size: 0.75rem; }

.simple-calendar-container {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); }

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px; }

.calendar-header h3 {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0; }

.calendar-nav {
  background: #008BD0;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer; }

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 10px;
  font-weight: 600;
  color: #6c757d; }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  min-height: 400px; }

.calendar-day {
  aspect-ratio: 1;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  position: relative; }

.calendar-day:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }

.day-number {
  font-weight: 500; }

.day-indicator {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%; }

.status-available {
  background: #d4edda; }

.status-available .day-indicator {
  background: #28a745; }

.status-appointments {
  background: #cce5ff; }

.status-appointments .day-indicator {
  background: #007bff; }

.status-leave {
  background: #f8d7da; }

.status-leave .day-indicator {
  background: #dc3545; }

.status-dayoff {
  background: #e2e3e5; }

.status-dayoff .day-indicator {
  background: #6c757d; }

.other-month {
  opacity: 0.4; }

.calendar-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap; }

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px; }

.legend-item span {
  width: 16px;
  height: 16px;
  border-radius: 4px; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

@keyframes pulse {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.1); }
  100% {
    transform: scale(1); } }

@keyframes gradientShift {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }

.footer {
  animation: fadeInUp 0.6s ease-out; }
  .footer__social-link:active svg {
    animation: pulse 0.3s ease; }

.footer {
  background: #fff;
  color: #000;
  position: relative;
  overflow: hidden;
  margin-top: auto; }
  .footer__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 20px 180px;
    position: relative;
    z-index: 20; }
  .footer__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-bottom: 48px; }
    @media (max-width: 768px) {
      .footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px; } }
    @media (max-width: 576px) {
      .footer__grid {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center; } }
  @media (max-width: 576px) {
    .footer__brand {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0; } }
  .footer__logo {
    margin-bottom: 16px; }
    .footer__logo img {
      max-width: 180px;
      height: auto;
      transition: transform 0.3s ease; }
      .footer__logo img:hover {
        transform: scale(1.05); }
  .footer__description {
    font-size: 14px;
    line-height: 1.6;
    color: #000;
    margin-bottom: 16px; }
  .footer__certificates {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px; }
    @media (max-width: 576px) {
      .footer__certificates {
        justify-content: center; } }
  .footer__cert {
    font-size: 14px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: #000; }
  .footer__title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    position: relative;
    display: inline-block; }
    .footer__title::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 0;
      width: 40px;
      height: 3px;
      background: #FFD700;
      border-radius: 2px;
      transition: width 0.3s ease; }
    @media (max-width: 576px) {
      .footer__title::after {
        left: 50%;
        transform: translateX(-50%); } }
  .footer__list {
    list-style: none;
    padding: 0;
    margin: 0; }
    .footer__list li {
      margin-bottom: 12px; }
    .footer__list a {
      color: #000;
      text-decoration: none;
      font-size: 14px;
      transition: all 0.2s ease;
      display: inline-block; }
      .footer__list a:hover {
        color: #FFD700;
        transform: translateX(5px); }
    @media (max-width: 576px) {
      .footer__list a:hover {
        transform: translateY(-2px); } }
  .footer__contact-item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 14px; }
    @media (max-width: 576px) {
      .footer__contact-item {
        justify-content: center; } }
    .footer__contact-item a {
      color: #000;
      text-decoration: none;
      transition: color 0.2s ease; }
      .footer__contact-item a:hover {
        color: #FFD700; }
    .footer__contact-item span {
      color: #000; }
  .footer__icon {
    flex-shrink: 0;
    color: #FFD700; }
  .footer__social {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    margin-top: 24px; }
    @media (max-width: 576px) {
      .footer__social {
        justify-content: center; } }
  .footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #000;
    transition: all 0.3s ease; }
    .footer__social-link:hover {
      background: #FFD700;
      color: #fff;
      transform: translateY(-3px); }
    .footer__social-link svg {
      transition: transform 0.2s ease; }
    .footer__social-link:hover svg {
      transform: scale(1.1); }
  .footer__bottom {
    padding-top: 24px;
    border-top: 1px solid #000;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0; }
    @media (max-width: 576px) {
      .footer__bottom {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 12px;
        text-align: center; } }
  .footer__copyright {
    font-size: 14px;
    color: #000; }
  .footer__policy {
    color: #000;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease; }
    .footer__policy:hover {
      color: #FFD700; }

.wave {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 150px;
  background-repeat: repeat-x;
  background-size: 1200px 150px;
  pointer-events: none; }

.wave1 {
  bottom: 0;
  z-index: 15;
  opacity: 0.9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 150' preserveAspectRatio='none'%3E%3Cpath d='M0,75 Q150,37.5 300,75 Q450,112.5 600,75 Q750,37.5 900,75 Q1050,112.5 1200,75 L1200,150 L0,150 Z' fill='rgba(255,255,255,0.15)'/%3E%3C/svg%3E");
  animation: animate 60s linear infinite;
  animation-delay: 0s; }

.wave2 {
  bottom: 8px;
  z-index: 10;
  opacity: 0.7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 150' preserveAspectRatio='none'%3E%3Cpath d='M0,95 Q150,57.5 300,95 Q450,132.5 600,95 Q750,57.5 900,95 Q1050,132.5 1200,95 L1200,150 L0,150 Z' fill='rgba(255,255,255,0.2)'/%3E%3C/svg%3E");
  animation: animate2 75s linear infinite;
  animation-delay: -5s; }

.wave3 {
  bottom: 15px;
  z-index: 5;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 150' preserveAspectRatio='none'%3E%3Cpath d='M0,55 Q150,17.5 300,55 Q450,92.5 600,55 Q750,17.5 900,55 Q1050,92.5 1200,55 L1200,150 L0,150 Z' fill='rgba(255,255,255,0.25)'/%3E%3C/svg%3E");
  animation: animate 90s linear infinite;
  animation-delay: -3s; }

.wave4 {
  bottom: 22px;
  z-index: 1;
  opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 150' preserveAspectRatio='none'%3E%3Cpath d='M0,115 Q150,77.5 300,115 Q450,152.5 600,115 Q750,77.5 900,115 Q1050,152.5 1200,115 L1200,150 L0,150 Z' fill='rgba(255,255,255,0.3)'/%3E%3C/svg%3E");
  animation: animate2 120s linear infinite;
  animation-delay: -8s; }

@keyframes animate {
  0% {
    background-position-x: 0; }
  100% {
    background-position-x: 1200px; } }

@keyframes animate2 {
  0% {
    background-position-x: 0; }
  100% {
    background-position-x: -1200px; } }

@media (max-width: 768px) {
  .wave {
    height: 120px;
    background-size: 900px 120px; }
  .wave1 {
    animation-duration: 45s; }
  .wave2 {
    animation-duration: 56s; }
  .wave3 {
    animation-duration: 68s; }
  .wave4 {
    animation-duration: 90s; }
  @keyframes animate {
    0% {
      background-position-x: 0; }
    100% {
      background-position-x: 900px; } }
  @keyframes animate2 {
    0% {
      background-position-x: 0; }
    100% {
      background-position-x: -900px; } } }

@media (max-width: 576px) {
  .wave {
    height: 90px;
    background-size: 600px 90px; }
  .wave1 {
    animation-duration: 30s; }
  .wave2 {
    animation-duration: 38s; }
  .wave3 {
    animation-duration: 45s; }
  .wave4 {
    animation-duration: 60s; }
  @keyframes animate {
    0% {
      background-position-x: 0; }
    100% {
      background-position-x: 600px; } }
  @keyframes animate2 {
    0% {
      background-position-x: 0; }
    100% {
      background-position-x: -600px; } } }

.profile-main-container {
  max-width: 1280px;
  margin: 30px auto;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 139, 208, 0.12);
  overflow: hidden; }

.profile-main-container {
  max-width: 1280px;
  margin: 30px auto;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 139, 208, 0.12);
  overflow: hidden; }

.profile-text-muted {
  color: #6b7280;
  text-align: center;
  padding: 24px; }

.profile-text-center {
  text-align: center; }

/* Убираем сдвиг контента при открытии модалок */
body.modal-open {
  padding-right: 0px !important;
  overflow-y: auto !important; }

.modal {
  padding-right: 0px !important; }

/* Для Fancybox */
.fancybox-active body {
  padding-right: 0px !important; }

.fancybox-html {
  margin-right: 0px !important; }