/* Start:/bitrix/templates/grandtemplate/template_styles.css?1770445547104680*/
/**
* Р001 Шрифты и Цвета
* Р002 Общий стиль
* Р003 Header
* r004 Меню
* Р005 Footer
* Р006 Preloader
* Р007 Верхняя кнопка прокрутки
* Р008 Отключаем задержку анимации aos на мобильных устройствах
* Р009 Заголовки и хлебные крошки
* Р010 Разделы (общее)
* Р011 Херой
* Р012 About
* Р013 Клиенты
* Р014 статистика
* Р015 Призыв к действию
* Р016 Услуги
* r017 Рекомендации testimonials
* r018 Портфолио
* r019 Наша команда
* Р020 Цены
* Р021 ФАК
* Р022 Новости
* r023 Контакты
* r024 Социальные сети
* r025 ullist
* --- Страницы ---
* Р051 Услуги
* Р052 Портфолио	
* Р053 Новости/Блог
* Р054 Формы
* Р055 Виджеты
*
* --- Элементы ---
* r100 Спортивная лига sports_league
* r101 tables
* r102 tabs
* r103 gamemarquee section
* r104 ниспадающее меню для сезонов
* r105 картинка фон
*
*/
/*--------------------------------------------------------------
# Font & Color Variables
--------------------------------------------------------------*/
/* Fonts */
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: normal;
  src: url(/bitrix/templates/grandtemplate/fonts/Unbounded/Unbounded.ttf);
}

@font-face {
  font-family: "Unbounded-SemiBold";
  font-style: normal;
  font-weight: normal;
  src: url(/bitrix/templates/grandtemplate/fonts/Unbounded/Unbounded-SemiBold.ttf);
}

@font-face {
  font-family: "Unbounded-Medium";
  font-style: normal;
  font-weight: normal;
  src: url(/bitrix/templates/grandtemplate/fonts/Unbounded/Unbounded-Medium.ttf);
}

@font-face {
  font-family: "Unbounded-Light";
  font-style: normal;
  font-weight: normal;
  src: url(/bitrix/templates/grandtemplate/fonts/Unbounded/Unbounded-Light.ttf);
}

@font-face {
  font-family: "Unbounded-ExtraLight";
  font-style: normal;
  font-weight: normal;
  src: url(/bitrix/templates/grandtemplate/fonts/Unbounded/Unbounded-ExtraLight.ttf);
}

@font-face {
  font-family: "Unbounded-ExtraBold";
  font-style: normal;
  font-weight: normal;
  src: url(/bitrix/templates/grandtemplate/fonts/Unbounded/Unbounded-ExtraBold.ttf);
}

@font-face {
  font-family: "Unbounded-Bold";
  font-style: normal;
  font-weight: normal;
  src: url(/bitrix/templates/grandtemplate/fonts/Unbounded/Unbounded-Bold.ttf);
}

@font-face {
  font-family: "Unbounded-Black";
  font-style: normal;
  font-weight: normal;
  src: url(/bitrix/templates/grandtemplate/fonts/Unbounded/Unbounded-Black.ttf);
}

:root {
  --default-font: "Unbounded", "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Roboto", "Montserrat",  sans-serif;
  --nav-font: "Unbounded", "Poppins",  sans-serif;  
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #203051; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #172a28; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #152546; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #ffffff;  /* The default color of the main navmenu links */
  --nav-hover-color: #b52b27; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #01433c; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #b52b27; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
  --tables-hover-color: #fd1f18;
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f2f9f9;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #060606;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #252525;
  --contrast-color: #ffffff;
}

.accent-background {
  --background-color: #203051;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --accent-color: #ffffff;
  --surface-color: #00b6a1;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
	margin: 2% 0 1% 0;
}

.td_w10 {
    width: 10%;
}

.td_w12 {
    width: 12%;
}

.td_w14 {
    width: 14%;
}

.td_w18 {
    width: 18%;
}

.td_w20 {
    width: 20%;
}

.td_w23 {
    width: 23%;
    text-align: justify;
}

.td_w30 {
    width: 30%;
}
main {
	margin: 0px 1% 0 1%;
}


/* Pulsating Play Button
------------------------------*/
.pulsating-play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
  border-radius: 50%;
  display: block;
  position: relative;
  overflow: hidden;
}

.pulsating-play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation: pulsate-play-btn 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.pulsating-play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.pulsating-play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  animation: none;
  border-radius: 0;
}

.pulsating-play-btn:hover:after {
  border-left: 15px solid var(--accent-color);
  transform: scale(20);
}

@keyframes pulsate-play-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
.game-padding {
  padding: 20px;
}
/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.top-bar {
    background-color: #152546;
}

.top-bar__social-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 8px 0 8px 0;
    -webkit-column-gap: 11px;
    -moz-column-gap: 11px;
    column-gap: 11px;
    margin-left: 179px;
    margin-bottom: 0;
}

.top-bar__social-item--tel {
    margin-right: 26px;
}

.top-bar__social-item--tel a {
    color: #fff;
    text-align: right;
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.top-bar__social-item--mail {
    margin-right: 26px;
}

.top-bar__social-item--mail a {
    color: #fff;
    text-align: right;
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.name_top_bar {
    margin-right: auto;
    margin-top: 0px;
    font-family: Montserrat;
    color: #fff;
    /*font-size: 20px;*/
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}


.header {
    background-color: #203051;
}

.header__nav {
    padding: 14px 0 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    justify-content: space-between;
}

.header__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: 130px;
    margin-bottom: 0;
}

.header__item {
    background: #203051;
    position: relative;
    list-style: none;
    z-index: 1;
}

.header__logo {
    margin-right: 25px;
}
.header__logo img {
  max-width: 100%;
}

.header__link {
    display: block;
    color: #fff;
    text-align: center;
    font-family: Unbounded;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    padding: 16px 0;
    margin: 0 7px;
    
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
    z-index: 11;
}

.header__link span {  
    display: block;
    position: relative;
}

.header__link--active {
    background: var(--tables-hover-color);
}
.header__link.active span:before {
    width: 100%;
    visibility: visible;
}
.header__link span:before {
  content: "";
  position: absolute;
  height: 2px;
  bottom: -6px;
  left: 0;
  background-color: #f00;
  visibility: hidden;
  width: 0px;
  transition: all 0.3s 
  ease-in-out 0s;
}
.header__link:hover {
  color: #fff;
}
.header__link:hover span:before {
    width: 100%;
    visibility: visible;
}

.header__link:active:before span {
    width: 100%;
    visibility: visible;
}

.header__drop-item {
    display: none;
}

.header__right-logo {
    margin-left: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.header__right-logo .pic {
  max-width: 46px;
}
.header__right-logo .text {
  color: #fff;
  font-family: system-ui;
  font-size: 12px;
}
.header__right-logo img {
  max-width: 100%;
  max-height: 100%;
}

.header__logo-mobile {
    position: relative;
    width: 200px;
    height: 53px;
    overflow: hidden;
    display: none;
}

@media (max-width: 1023px) {
    .header__nav {
        padding: 8px 0;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .header__logo {
        display: none;
    }
    .header__right-logo {
        display: none;
    }
    .header__logo-mobile {
        display: block;
    }
    .burger-menu {
        display: block;
    }
    .header__list {
        display: none; /* Скрываем основное меню на мобильных устройствах */
    }
}

.header__link span {
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.header__link {
    padding: 10px 10px;
}

.header__logo {
    width: 120px;
    height: auto;
    position: absolute;
}
.header__right-logo {
    width: 200px;
    height: 46px;
    margin-right: -20px;
}

.logo-mobile {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out; /* Укажите желаемое время анимации */
}
.logo-mobile img {
  max-width: 100%;
}

.logo-mobile:first-child {
    opacity: 1;
}
.header__logo-changer {
  display: flex;
  gap: 12px;
  color: white;
  line-height: 1.1;
  font-size: 12px;
  align-items: center;
  font-family: system-ui;  
}
.header__logo-changer .pic {
  height: 50px;
}
.header__logo-changer .pic img {
  max-width: 100%;
  max-height: 100%;
}
.burger-checkbox {
    position: absolute;
    visibility: hidden;
}

.burger {
    position: relative;
    z-index: 100;
    cursor: pointer;
    display: block;
    position: relative;
    border: none;
    background: transparent;
    width: 20px;
    height: 18px;
}

.burger::before,
.burger::after {
    content: "";
    left: 0;
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
}

.burger::before {
    top: 0;
    -webkit-box-shadow: 0 8px 0 #fff;
    box-shadow: 0 8px 0 #fff;
    -webkit-transition: top 0.3s 0.15s, -webkit-box-shadow 0.3s 0.15s, -webkit-transform 0.3s;
    transition: top 0.3s 0.15s, -webkit-box-shadow 0.3s 0.15s, -webkit-transform 0.3s;
    transition: box-shadow 0.3s 0.15s, top 0.3s 0.15s, transform 0.3s;
    transition: box-shadow 0.3s 0.15s, top 0.3s 0.15s, transform 0.3s, -webkit-box-shadow 0.3s 0.15s, -webkit-transform 0.3s;
}

.burger::after {
    bottom: 0;
    -webkit-transition: bottom 0.3s 0.15s, -webkit-transform 0.3s;
    transition: bottom 0.3s 0.15s, -webkit-transform 0.3s;
    transition: bottom 0.3s 0.15s, transform 0.3s;
    transition: bottom 0.3s 0.15s, transform 0.3s, -webkit-transform 0.3s;
}

.burger-checkbox:checked + .burger::before {
    top: 5px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-box-shadow: 0 6px 0 rgba(0, 0, 0, 0);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0);
    -webkit-transition: top 0.3s, -webkit-box-shadow 0.15s, -webkit-transform 0.3s 0.15s;
    transition: top 0.3s, -webkit-box-shadow 0.15s, -webkit-transform 0.3s 0.15s;
    transition: box-shadow 0.15s, top 0.3s, transform 0.3s 0.15s;
    transition: box-shadow 0.15s, top 0.3s, transform 0.3s 0.15s, -webkit-box-shadow 0.15s, -webkit-transform 0.3s 0.15s;
  width:27px;
}

.burger-checkbox:checked + .burger::after {
    bottom: 11px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: bottom 0.3s, -webkit-transform 0.3s 0.15s;
    transition: bottom 0.3s, -webkit-transform 0.3s 0.15s;
    transition: bottom 0.3s, transform 0.3s 0.15s;
    transition: bottom 0.3s, transform 0.3s 0.15s, -webkit-transform 0.3s 0.15s;
  width:27px;
}

.menu-list {
    top: 0;
    top: 67px;
    left: 0;
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    row-gap: 20px;
    padding: 8px 20px 70px;
    margin: 0;
    background: #203051;
    list-style-type: none;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: 0.3s;
    transition: 0.3s;
    width: 100%; /* Растягиваем на всю ширину */
    z-index: 99;
  height: 100%;
}

.menu-list .logo-mobile-inner {
    padding: 0;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.menu-item {
    display: block;
    padding: 8px;
    color: white;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
}

.menu-item:hover {
    background: var(--gold-color);

  
}
.menu-item:hover  {
  color: #fff;
}

/* Стили для иконок социальных сетей */
.social-icons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 20px 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    row-gap: 20px;
}

.social-icons a {
    margin: 0 10px;
    text-decoration: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-column-gap: 14px;
    -moz-column-gap: 14px;
    column-gap: 14px;
}

/* Стили для иконок социальных сетей (изображения) */
.social-icons img,
.social-icons svg {
    width: 30px;
    height: 30px;
    border: none;
}

.social-icons span {
    color: #d4d8e9;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 22px;
}

.menu-social {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-column-gap: 13px;
    -moz-column-gap: 13px;
    column-gap: 13px;
    margin-right: 21px;
}
.menu-social img {
    width: 30px;
    height: 30px;
}
.burger-checkbox:checked ~ .menu-list {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

.burger-close {
    display: none; /* Скрываем крестик по умолчанию */
    font-size: 24px;
    cursor: pointer;
    text-align: center;
    color: white;
}

.burger-checkbox:checked ~ .menu-list .burger-close {
    display: block; /* Показываем крестик при открытом меню */
}

.menu {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: none;
}



/*
.header {
  --background-color: #203051;
  --heading-color: #ffffff;
  color: var(--default-color);
  transition: all 0.5s;
  z-index: 997;
  background-color: var(--background-color);
}

.header .topbar {
  background-color: color-mix(in srgb, var(--accent-color) 90%, black 10%);
  height: 40px;
  padding: 0;
  font-size: 14px;
  transition: all 0.5s;
}

.header .topbar .contact-info i {
  font-style: normal;
  color: var(--contrast-color);
}

.header .topbar .contact-info i a,
.header .topbar .contact-info i span {
  padding-left: 5px;
  color: var(--contrast-color);
}

@media (max-width: 575px) {

  .header .topbar .contact-info i a,
  .header .topbar .contact-info i span {
    font-size: 13px;
  }
}

.header .topbar .contact-info i a {
  line-height: 0;
  transition: 0.3s;
}

.header .topbar .contact-info i a:hover {
  color: var(--contrast-color);
  text-decoration: underline;
}

.header .topbar .social-links a {
  color: color-mix(in srgb, var(--contrast-color), transparent 40%);
  line-height: 0;
  transition: 0.3s;
  margin-left: 20px;
}

.header .topbar .social-links a:hover {
  color: var(--contrast-color);
}

.header .branding {
  min-height: 60px;
  padding: 10px 0;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 130px;
  margin-right: 10px;
  border-radius: 50%;
  background-color: white;
  border: 3px solid red;
  height: 130px;
  width: 130px;
  padding: 5px;
  margin: -20px 10px 0 15px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
}

.header .logo span {
  font-size: 32px;
  margin-left: 2px;
  color: var(--nav-hover-color);
}
/

.scrolled .header {
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

.okrug {
    color: white;
    font-family: system-ui;
    font-size: 12px;
    min-width: 170px;
    
}
.okrug img {
    max-height: 56px;
    width: auto;
    float: left;
    margin-right: 5px;
}
/*--------------------------------------------------------------
# Navigation Menu r004 Меню
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu>ul>li {
    white-space: nowrap;
    padding: 15px 14px;
  }

  .navmenu>ul>li:last-child {
    padding-right: 0;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    font-size: 15px;
    padding: 0 2px;
    font-family: var(--nav-font);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu>ul>li>a:before {
    content: "";
    position: absolute;
    height: 2px;
    bottom: -6px;
    left: 0;
/*    background-color: var(--nav-hover-color); */
    background-color: #f00;
    visibility: hidden;
    width: 0px;
    transition: all 0.3s ease-in-out 0s;
  }

  .navmenu a:hover:before,
  .navmenu li:hover>a:before,
  .navmenu .active:before {
    visibility: visible;
    width: 100%;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Mobile Navigation */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

.footer a:hover {
    color: #b52b27;
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  position: relative;
}

.footer .footer-top {
  padding-top: 50px;
}

.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 25px;
}

.footer .footer-about .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.footer .footer-about .logo span {
  color: var(--heading-color);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: var(--heading-font);
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--default-color);
  border-color: var(--default-color);
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

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

.footer .footer-links ul i {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  display: inline-block;
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: var(--default-color);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .copyright {
  padding-top: 30px;
  padding-bottom: 30px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 4px;
  font-size: 16px;
}

.footer .credits a:hover {
     pointer-events: none;
     color: white;
}

.footer .credits img {
    width: 20%;
    min-width: 200px;
    height: auto;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  --background-color: var(--accent-color);
  --default-color: #fff;
  --heading-color: #fff;
  color: var(--default-color);
  background-color: var(--background-color);
  position: relative;
}

.page-title .heading {
  padding: 160px 0 80px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.page-title .heading h1 {
  font-size: 38px;
  font-weight: 700;
}

.page-title nav {
  background-color: color-mix(in srgb, var(--default-color), transparent 92%);
  padding: 20px 0;
}

.page-title nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.page-title nav ol a {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.page-title nav ol a:hover {
  color: var(--default-color);
}

.page-title nav ol li+li {
  padding-left: 10px;
}

.page-title nav ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 10px 0 10px 0;
  scroll-margin-top: 112px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 100px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 15px;
  position: relative;
}

.section-title h2 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
  text-align: left;
  font-family: Unbounded-Bold;
}
/*
.section-title h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
*/
.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  position: relative;
  padding: 140px 0 0 0;
}

.hero .container {
  position: relative;
  z-index: 3;
}

.hero h2 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 20px;
}

.hero h2 .accent {
  color: var(--conrast-color);
}

.hero p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-weight: 400;
  margin-bottom: 30px;
}

.hero .btn-get-started {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 14px 40px;
  border-radius: 50px;
  transition: 0.3s;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 90%);
  background-color: color-mix(in srgb, var(--default-color), transparent 90%);
}

.hero .btn-get-started:hover {
  border-color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.hero .btn-watch-video {
  font-size: 16px;
  transition: 0.5s;
  margin-left: 25px;
  font-weight: 600;
  color: var(--default-color);
}

.hero .btn-watch-video i {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 32px;
  transition: 0.3s;
  line-height: 0;
  margin-right: 8px;
}

.hero .btn-watch-video:hover i {
  color: var(--default-color);
}

@media (max-width: 640px) {
  .hero h2 {
    font-size: 36px;
  }

  .hero .btn-get-started,
  .hero .btn-watch-video {
    font-size: 14px;
  }
}

.hero .icon-boxes {
  padding-bottom: 60px;
  z-index: 4;
}

@media (min-width: 1200px) {
  .hero .icon-boxes:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(50% + 20px);
    background-color: var(--default-color);
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  }
}

.hero .icon-box {
  padding: 60px 30px;
  position: relative;
  overflow: hidden;
  background: var(--background-color);
  box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  border-radius: 8px;
  z-index: 1;
  height: 100%;
  width: 100%;
  text-align: center;
}

.hero .icon-box .title {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 24px;
}

.hero .icon-box .title a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.hero .icon-box .icon {
  margin-bottom: 20px;
  padding-top: 10px;
  display: inline-block;
  transition: all 0.3s ease-in-out;
  font-size: 48px;
  line-height: 1;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.hero .icon-box:hover {
  background-color: color-mix(in srgb, var(--background-color), white 10%);
}

.hero .icon-box:hover .title a,
.hero .icon-box:hover .icon {
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about h3 {
  font-weight: 700;
  font-size: 28px;
  margin-bottom: 20px;
}

.about .fst-italic {
  color: color-mix(in srgb, var(--default-color), var(--contrast-color) 50%);
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  padding: 0 0 10px 30px;
  position: relative;
}

.about .content ul i {
  position: absolute;
  font-size: 20px;
  left: 0;
  top: -3px;
  color: var(--accent-color);
}

.about .content p:last-child {
  margin-bottom: 0;
}

.about .pulsating-play-btn {
  position: absolute;
  left: calc(50% - 47px);
  top: calc(50% - 47px);
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients .swiper {
  padding: 10px 0;
}

.clients .swiper-wrapper {
  height: auto;
}

.clients .swiper-slide img {
  transition: 0.3s;
}

.clients .swiper-slide img:hover {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats .stats-item {
  padding: 10px;
}

.stats .stats-item i {
  font-size: 44px;
  color: var(--accent-color);
  line-height: 0;
  margin-right: 15px;
}

.stats .stats-item .purecounter {
  color: var(--heading-color);
  font-size: 40px;
  display: block;
  font-weight: 700;
  line-height: 40px;
}

.stats .stats-item p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 15px 0 0 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 14px;
}

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
  background-color: transparent;
}

.call-to-action .container {
  padding-top: 80px;
  padding-bottom: 80px;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  clip-path: inset(0 round 15px);
}

.call-to-action .container img {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  border-radius: 15px;
  overflow: hidden;
}

.call-to-action .container:before {
  content: "";
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.call-to-action .container .content {
  position: relative;
  z-index: 3;
}

.call-to-action h3 {
  color: var(--default-color);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
}

.call-to-action p {
  color: var(--default-color);
  margin-bottom: 20px;
}

.call-to-action .play-btn {
  width: 94px;
  height: 94px;
  margin-bottom: 20px;
  background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 60%) 52%);
  border-radius: 50%;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.call-to-action .play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation: pulsate-btn 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid color-mix(in srgb, var(--accent-color), transparent 20%);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.call-to-action .play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid var(--default-color);
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.call-to-action .play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid var(--default-color);
  z-index: 200;
  animation: none;
  border-radius: 0;
}

.call-to-action .play-btn:hover:after {
  border-left: 15px solid var(--accent-color);
  transform: scale(20);
}

.call-to-action .cta-btn {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 5px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid var(--contrast-color);
  color: var(--contrast-color);
}

.call-to-action .cta-btn:hover {
  background: var(--accent-color);
  border: 2px solid var(--accent-color);
}

@keyframes pulsate-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  background-color: var(--surface-color);
  padding: 40px;
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
  height: 100%;
}

.services .service-item .icon {
  width: 48px;
  height: 48px;
  position: relative;
  margin-bottom: 50px;
}

.services .service-item .icon i {
  color: color-mix(in srgb, var(--heading-color), transparent 30%);
  font-size: 56px;
  transition: ease-in-out 0.3s;
  z-index: 2;
  position: relative;
}

.services .service-item .icon:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background: color-mix(in srgb, var(--heading-color), transparent 95%);
  border-radius: 50px;
  z-index: 1;
  top: 10px;
  right: -20px;
  transition: 0.3s;
}

.services .service-item h3 {
  color: color-mix(in srgb, var(--heading-color), transparent 20%);
  font-weight: 700;
  margin: 0 0 20px 0;
  padding-bottom: 8px;
  font-size: 22px;
  position: relative;
  display: inline-block;
  border-bottom: 4px solid color-mix(in srgb, var(--heading-color), transparent 90%);
  transition: 0.3s;
}

.services .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services .service-item .readmore {
  margin-top: 15px;
  display: inline-block;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.services .service-item:hover .icon i {
  color: var(--heading-color);
}

.services .service-item:hover .icon:before {
  background: color-mix(in srgb, var(--accent-color), transparent 50%);
}

.services .service-item:hover h3 {
  border-color: color-mix(in srgb, var(--accent-color), transparent 10%);
  color: var(--heading-color);
}

.services .service-item:hover .readmore {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# r017 Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonial-item {
  background-color: var(--surface-color);
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  box-sizing: content-box;
  padding: 10px;
  margin: 10px 5px;
  position: relative;
  height: 500px;
  border-radius: 15px;
  text-align: center;
  font-family: system-ui;
}

.testimonials .img-fluid {
    height:350px;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50px;
  margin-right: 15px;
}

.testimonials .testimonial-item h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin: 0;
}

.testimonials .testimonial-item span {
  font-style: italic;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin: 0;
}

.testimonials .testimonial-item .stars {
  margin: 10px 0;
}

.testimonials .testimonial-item .stars i {
  color: #ffc107;
  margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 15px auto 15px auto;
}

.testimonials .swiper-wrapper {
  height: auto;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

@media (max-width: 767px) {
  .testimonials .testimonial-wrap {
    padding-left: 0;
  }

  .testimonials .testimonial-item {
    padding: 30px;
    margin: 15px;
  }

  .testimonials .testimonial-item .testimonial-img {
    position: static;
    left: auto;
  }
}

/*--------------------------------------------------------------
# r018 Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
  padding: 0 0 20px 0;
  margin: 0 auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 0;
  font-size: 18px;
  font-weight: 500;
  margin: 0 10px;
  line-height: 1;
  transition: all 0.3s ease-in-out;
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 5px;
  }
}

.portfolio .portfolio-content {
  background-color: var(--surface-color);
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
  height: 100%;
  overflow: hidden;
}

.portfolio .portfolio-content img {
  transition: 0.3s;
  position: relative;
  z-index: 1;
}

.portfolio .portfolio-content .portfolio-info {
  background-color: var(--background-color);
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 25px 20px;
  position: relative;
  z-index: 2;
}

.portfolio .portfolio-content .portfolio-info h4 {
  font-size: 18px;
  font-weight: 600;
  padding-right: 50px;
  min-height: 60px;
}

.portfolio .portfolio-content .portfolio-info h4 a {
  color: var(--heading-color);
  transition: 0.3s;
}

.portfolio .portfolio-content .portfolio-info h4 a:hover {
  color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  margin-bottom: 0;
  padding-right: 50px;
}

.portfolio .portfolio-content:hover img {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# r019 Team Section
--------------------------------------------------------------*/
.team .member {
  background-color: var(--surface-color);
  box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.1);
  text-align: center;
  border-radius: 15px;
  padding: 15px;
  overflow: hidden;
}

.team .member img {
  border-radius: 15px;
  overflow: hidden;
  object-fit: cover;
  height: 250px;
  width: 100%;
  object-position: top;
  max-width: 250px;
}

.team .member .member-content {
  padding: 0 20px 30px 20px;
}

.team .member h4 {
  font-weight: 700;
  margin-top: 16px;
  margin-bottom: 2px;
  font-size: 20px;
  min-height: 48px;
}

.team .member span {
  font-style: italic;
  display: block;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.team .member .social {
  margin-top: 15px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.team .member .social a {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  transition: 0.3s;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%);
}

.team .member .social a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.team .member .social i {
  font-size: 18px;
  margin: 0 2px;
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing {
  padding: 60px 0 120px 0;
}

.pricing .section-title {
  margin-bottom: 40px;
}

.pricing .pricing-item {
  background-color: var(--surface-color);
  box-shadow: 0 3px 20px -2px rgba(0, 0, 0, 0.1);
  padding: 60px 40px;
  height: 100%;
  position: relative;
  border-radius: 15px;
}

.pricing h3 {
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 20px;
  text-align: center;
}

.pricing .icon {
  margin: 30px auto 20px auto;
  width: 70px;
  height: 70px;
  background: var(--accent-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  transform-style: preserve-3d;
}

.pricing .icon i {
  color: var(--background-color);
  font-size: 28px;
  transition: ease-in-out 0.3s;
  line-height: 0;
}

.pricing .icon::before {
  position: absolute;
  content: "";
  height: 86px;
  width: 86px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-color), transparent 80%);
  transition: all 0.3s ease-out 0s;
  transform: translateZ(-1px);
}

.pricing .icon::after {
  position: absolute;
  content: "";
  height: 102px;
  width: 102px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  transition: all 0.3s ease-out 0s;
  transform: translateZ(-2px);
}

.pricing h4 {
  font-size: 48px;
  color: var(--accent-color);
  font-weight: 700;
  font-family: var(--heading-font);
  margin-bottom: 25px;
  text-align: center;
}

.pricing h4 sup {
  font-size: 28px;
}

.pricing h4 span {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 18px;
  font-weight: 400;
}

.pricing ul {
  padding: 20px 0;
  list-style: none;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  text-align: left;
  line-height: 20px;
}

.pricing ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.pricing ul i {
  color: #059652;
  font-size: 24px;
  padding-right: 3px;
}

.pricing ul .na {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.pricing ul .na i {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.pricing ul .na span {
  text-decoration: line-through;
}

.pricing .buy-btn {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  display: inline-block;
  padding: 8px 40px 10px 40px;
  border-radius: 50px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  transition: none;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--heading-font);
  transition: 0.3s;
}

.pricing .buy-btn:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.pricing .featured {
  z-index: 10;
  border: 3px solid var(--accent-color);
}

@media (min-width: 992px) {
  .pricing .featured {
    transform: scale(1.15);
  }
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .content h3 {
  font-weight: 400;
  font-size: 34px;
}

.faq .content p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.faq .faq-container .faq-item {
  background-color: var(--surface-color);
  position: relative;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.faq .faq-container .faq-item:last-child {
  margin-bottom: 0;
}

.faq .faq-container .faq-item h3 {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  margin: 0 30px 0 0;
  transition: 0.3s;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
}

.faq .faq-container .faq-item h3 .num {
  color: var(--accent-color);
  padding-right: 5px;
}

.faq .faq-container .faq-item h3:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.faq .faq-container .faq-item .faq-content p {
  margin-bottom: 0;
  overflow: hidden;
}

.faq .faq-container .faq-item .faq-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  line-height: 0;
  transition: 0.3s;
  cursor: pointer;
}

.faq .faq-container .faq-item .faq-toggle:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-active h3 {
  color: var(--accent-color);
}

.faq .faq-container .faq-active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  padding-top: 10px;
}

.faq .faq-container .faq-active .faq-toggle {
  transform: rotate(90deg);
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Recent Posts Section
--------------------------------------------------------------*/
.recent-posts article {
  background: var(--surface-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 30px;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.recent-posts .post-img {
  max-height: 240px;
  margin: -30px -30px 15px -30px;
  overflow: hidden;
  text-align: center;
  background-color: var(--bs-gray-500);
}

.recent-posts .post-category {
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-bottom: 10px;
}

.recent-posts .title {
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.recent-posts .title a {
  color: var(--heading-color);
  transition: 0.3s;
}

.recent-posts .title a:hover {
  color: var(--accent-color);
}

.recent-posts .post-author-img {
  width: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.recent-posts .post-author {
  font-weight: 600;
  margin-bottom: 5px;
}

.recent-posts .post-date {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# r023 Contact Section
--------------------------------------------------------------*/
.contact .info-container {
  background-color: var(--accent-color);
  height: 100%;
  padding: 20px;
}

.contact .info-item {
  width: 100%;
  margin-bottom: 20px;
  padding: 20px;
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--contrast-color), transparent 90%);
}

.contact .info-item:last-child {
  margin-bottom: 0;
}

.contact .info-item i {
  font-size: 20px;
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--contrast-color), transparent 80%);
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

.contact .info-item h3 {
  color: var(--contrast-color);
  font-size: 20px;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .info-item:hover i {
  background: var(--contrast-color);
  color: var(--accent-color);
}

.contact .php-email-form {
  background-color: var(--surface-color);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 100%;
  padding: 30px;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: var(--surface-color);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}
/*--------------------------------------------------------------
# r024 Социальные сети
--------------------------------------------------------------*/
.--svg__mini-contacts--tg {
    background-image: url("data:image/svg+xml;charset=utf8, %3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 24C0 12.6863 0 7.02944 3.51472 3.51472C7.02944 0 12.6863 0 24 0V0C35.3137 0 40.9706 0 44.4853 3.51472C48 7.02944 48 12.6863 48 24V24C48 35.3137 48 40.9706 44.4853 44.4853C40.9706 48 35.3137 48 24 48V48C12.6863 48 7.02944 48 3.51472 44.4853C0 40.9706 0 35.3137 0 24V24Z' fill='%2335A6DE'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M23.5841 30.3874C22.6623 31.2963 21.7505 32.189 20.8466 33.0899C20.5305 33.4049 20.175 33.5788 19.7217 33.5541C19.4129 33.5373 19.2396 33.3985 19.145 33.1007C18.4532 30.9236 17.7501 28.7501 17.0615 26.572C16.9944 26.3599 16.8933 26.258 16.6829 26.1928C15.0517 25.6875 13.4238 25.1712 11.798 24.6486C11.5573 24.5712 11.3135 24.4717 11.1047 24.3313C10.7411 24.087 10.6893 23.6985 11.0212 23.4173C11.3279 23.1574 11.6916 22.9398 12.0641 22.7904C14.1252 21.9646 16.1968 21.1655 18.2647 20.3569C23.2389 18.4118 28.2133 16.4668 33.1873 14.5207C34.1408 14.1477 34.8817 14.6651 34.7924 15.7068C34.7336 16.3936 34.5571 17.0714 34.4155 17.7493C33.3132 23.0264 32.2067 28.3024 31.1015 33.5788C31.0994 33.589 31.0987 33.5994 31.0964 33.6095C30.8262 34.8166 29.9606 35.1466 28.9736 34.4108C27.2603 33.1334 25.5513 31.8502 23.8402 30.5698C23.7593 30.5093 23.6756 30.4525 23.5841 30.3874V30.3874ZM19.7987 32.0491C19.8253 31.9252 19.8438 31.8681 19.8492 31.8097C19.9579 30.6231 20.0716 29.4368 20.1678 28.2491C20.1893 27.9855 20.2669 27.7909 20.4681 27.6078C23.0646 25.2465 25.653 22.8761 28.2434 20.508C28.9803 19.8344 29.7202 19.1642 30.4499 18.4827C30.5266 18.4112 30.5432 18.2737 30.5877 18.1668C30.475 18.1345 30.3486 18.0525 30.2524 18.0797C30.03 18.1425 29.8058 18.2321 29.6107 18.3564C25.7592 20.8109 21.9126 23.2732 18.061 25.7275C17.865 25.8523 17.8091 25.9551 17.8877 26.1943C18.4976 28.0505 19.0898 29.9126 19.6884 31.7726C19.7118 31.8455 19.7449 31.9152 19.7987 32.0491V32.0491Z' fill='white'/%3E%3C/svg%3E");
}
.--svg__mini-contacts--vb {
    background-image: url("data:image/svg+xml;charset=utf8, %3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 24C0 12.6863 0 7.02944 3.51472 3.51472C7.02944 0 12.6863 0 24 0V0C35.3137 0 40.9706 0 44.4853 3.51472C48 7.02944 48 12.6863 48 24V24C48 35.3137 48 40.9706 44.4853 44.4853C40.9706 48 35.3137 48 24 48V48C12.6863 48 7.02944 48 3.51472 44.4853C0 40.9706 0 35.3137 0 24V24Z' fill='%23665CAC'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M34.1541 30.2359C33.5366 29.7242 32.8841 29.2558 32.2326 28.7882L32.232 28.7877C32.096 28.6902 31.9601 28.5926 31.8246 28.4947C30.2585 27.3624 28.826 27.2744 27.6574 29.0961C27.0011 30.1188 26.0824 30.1636 25.1218 29.7149C22.4737 28.4789 20.4288 26.5744 19.231 23.8037C18.7011 22.5778 18.7081 21.4788 19.9478 20.6118C20.6042 20.1532 21.2655 19.6107 21.2126 18.6088C21.1435 17.3024 18.0623 12.9367 16.8455 12.4759C16.342 12.2852 15.8406 12.2977 15.3283 12.4749C12.4752 13.4626 11.2934 15.8781 12.4252 18.7381C15.8016 27.271 21.7436 33.2112 29.923 36.8369C30.263 36.9874 30.6305 37.0721 30.9064 37.1356C31.0089 37.1592 31.0987 37.1799 31.1697 37.2C33.0319 37.2192 35.2134 35.3723 35.8434 33.5394C36.3766 31.9895 35.4508 31.2612 34.5303 30.537L34.5303 30.537C34.4035 30.4372 34.2769 30.3376 34.1541 30.2359ZM24.983 13.3506C30.9627 14.2972 33.7205 17.2242 34.4819 23.424C34.4973 23.5487 34.4995 23.6872 34.5018 23.8276C34.5098 24.3319 34.5182 24.8619 35.1391 24.8743C35.8324 24.8879 35.8066 24.2971 35.7835 23.768V23.768C35.7789 23.664 35.7745 23.5625 35.7757 23.4684C35.8458 17.6293 30.8999 12.2162 25.1559 12.0166C25.054 12.0317 24.9265 12.0227 24.7904 12.0131C24.3474 11.9818 23.8127 11.944 23.7699 12.7089C23.74 13.2494 24.2195 13.2853 24.6661 13.3187C24.7765 13.327 24.8848 13.3351 24.983 13.3506ZM26.1523 15.0506C26.0657 15.0398 25.9749 15.0244 25.8826 15.0087C25.3626 14.9202 24.7976 14.824 24.6834 15.5218C24.5698 16.2202 25.1033 16.2955 25.5992 16.3655C25.7155 16.3819 25.8298 16.398 25.9332 16.4218C29.6264 17.2715 30.9123 18.6552 31.5204 22.4264C31.538 22.5356 31.5452 22.6569 31.5525 22.78V22.78C31.5819 23.2768 31.6131 23.8038 32.3404 23.6901C32.8488 23.6104 32.8342 23.1719 32.821 22.7775V22.7775C32.8167 22.6501 32.8126 22.5273 32.8264 22.4227C32.8562 18.8021 29.8423 15.5067 26.1523 15.0506ZM25.5899 18.4863C25.731 18.0639 26.1078 18.0211 26.4917 18.0114C28.1289 17.9695 30.0473 19.9891 30.0202 21.7363C30.037 22.2139 29.9874 22.7169 29.4385 22.7843C29.0424 22.8324 28.7822 22.4904 28.7413 22.0683C28.5899 20.513 27.7926 19.5934 26.2776 19.3431C25.8238 19.268 25.378 19.1175 25.5899 18.4863Z' fill='white'/%3E%3C/svg%3E");
}
.--svg__mini-contacts--wa {
    background-image: url("data:image/svg+xml;charset=utf8, %3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 24C0 12.6863 0 7.02944 3.51472 3.51472C7.02944 0 12.6863 0 24 0V0C35.3137 0 40.9706 0 44.4853 3.51472C48 7.02944 48 12.6863 48 24V24C48 35.3137 48 40.9706 44.4853 44.4853C40.9706 48 35.3137 48 24 48V48C12.6863 48 7.02944 48 3.51472 44.4853C0 40.9706 0 35.3137 0 24V24Z' fill='%2367C15E'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.3108 17.5051C20.0548 16.8921 19.8608 16.8688 19.473 16.8532C19.341 16.8455 19.194 16.8379 19.0308 16.8379C18.5263 16.8379 17.9989 16.9854 17.6807 17.3112C17.293 17.707 16.3308 18.6304 16.3308 20.5238C16.3308 22.4174 17.7116 24.2487 17.8979 24.505C18.092 24.7608 20.5901 28.703 24.469 30.3097C27.5023 31.5668 28.4024 31.4503 29.0927 31.303C30.1013 31.0858 31.3658 30.3405 31.684 29.4406C32.0021 28.5403 32.0021 27.772 31.9089 27.6091C31.8158 27.4462 31.5597 27.3533 31.1719 27.1591C30.7842 26.965 28.8988 26.0338 28.542 25.9096C28.1929 25.7778 27.8593 25.8244 27.5958 26.1969C27.2233 26.7169 26.8588 27.2446 26.5639 27.5627C26.3312 27.811 25.9509 27.8422 25.6329 27.7102C25.2061 27.532 24.0115 27.1124 22.5375 25.8011C21.3969 24.7847 20.6212 23.52 20.3964 23.1397C20.1714 22.7517 20.3731 22.5265 20.5515 22.3171C20.7456 22.0764 20.9316 21.9059 21.1255 21.6806C21.3196 21.4556 21.4281 21.3393 21.5522 21.0753C21.6842 20.8193 21.591 20.5553 21.498 20.3613C21.4048 20.1668 20.629 18.2732 20.3108 17.5051ZM23.9958 10.7998C16.7189 10.7998 10.7997 16.7206 10.7997 23.9996C10.7997 26.8863 11.7307 29.5636 13.3133 31.7364L11.6684 36.6409L16.7422 35.0193C18.829 36.4006 21.3193 37.1998 24.0036 37.1998C31.2805 37.1998 37.1997 31.2786 37.1997 24C37.1997 16.721 31.2805 10.8002 24.0036 10.8002H23.996V10.7998H23.9958Z' fill='white'/%3E%3C/svg%3E");
}
.--svg__mini-contacts--vk {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.cls-1{fill:%231976d2;}.cls-2{fill:%23fff;}</style></defs><path class="cls-1" d="M24,0A24,24,0,1,0,48,24,24.07,24.07,0,0,0,24,0Z"/><path class="cls-2" d="M25.2,33.2c-9,0-14.1-6.1-14.3-16.4h4.5c.1,7.5,3.5,10.7,6.1,11.3V16.8h4.2v6.5c2.6-.3,5.3-3.2,6.2-6.5h4.2A12.57,12.57,0,0,1,30.3,25,12.84,12.84,0,0,1,37,33.2H32.3a8.28,8.28,0,0,0-6.8-5.9v5.9Z"/></svg>');
}
.--svg__mini-contacts--dzen {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="28" height="28" viewBox="0 0 50 50"><path d="M46.894 23.986c.004 0 .007 0 .011 0 .279 0 .545-.117.734-.322.192-.208.287-.487.262-.769C46.897 11.852 38.154 3.106 27.11 2.1c-.28-.022-.562.069-.77.262-.208.192-.324.463-.321.746C26.193 17.784 28.129 23.781 46.894 23.986zM46.894 26.014c-18.765.205-20.7 6.202-20.874 20.878-.003.283.113.554.321.746.186.171.429.266.679.266.03 0 .061-.001.091-.004 11.044-1.006 19.787-9.751 20.79-20.795.025-.282-.069-.561-.262-.769C47.446 26.128 47.177 26.025 46.894 26.014zM22.823 2.105C11.814 3.14 3.099 11.884 2.1 22.897c-.025.282.069.561.262.769.189.205.456.321.734.321.004 0 .008 0 .012 0 18.703-.215 20.634-6.209 20.81-20.875.003-.283-.114-.555-.322-.747C23.386 2.173 23.105 2.079 22.823 2.105zM3.107 26.013c-.311-.035-.555.113-.746.321-.192.208-.287.487-.262.769.999 11.013 9.715 19.757 20.724 20.792.031.003.063.004.094.004.25 0 .492-.094.678-.265.208-.192.325-.464.322-.747C23.741 32.222 21.811 26.228 3.107 26.013z"></path></svg>');
}
.--svg__mini-contacts--tel {
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.1831 15.9256C20.2258 16.2534 20.1259 16.5384 19.8838 16.7806L17.0407 19.6022C16.9124 19.7447 16.745 19.866 16.5384 19.9656C16.3317 20.0654 16.1287 20.1295 15.9293 20.158C15.915 20.158 15.8721 20.1617 15.8009 20.1688C15.7297 20.1759 15.6371 20.1795 15.5231 20.1795C15.2522 20.1795 14.814 20.1332 14.2083 20.0405C13.6026 19.9479 12.8616 19.7198 11.9852 19.3565C11.1087 18.9931 10.1147 18.4479 9.00314 17.7212C7.89159 16.9945 6.70872 15.9968 5.45462 14.7285C4.45705 13.7451 3.63049 12.8046 2.97494 11.9068C2.31939 11.0089 1.7921 10.1788 1.39308 9.41638C0.994011 8.65395 0.694739 7.96278 0.495224 7.34285C0.295709 6.72293 0.160324 6.18852 0.0890691 5.73961C0.0178138 5.2907 -0.0106883 4.93799 0.00356276 4.68147C0.0178138 4.42495 0.0249393 4.28244 0.0249393 4.25394C0.0534414 4.05442 0.117571 3.85135 0.217329 3.64471C0.317086 3.43807 0.43822 3.27062 0.58073 3.14236L3.42382 0.299272C3.62333 0.0997574 3.85135 0 4.10787 0C4.29313 0 4.45702 0.0534414 4.59953 0.160324C4.74204 0.267207 4.86317 0.399029 4.96293 0.555791L7.25022 4.89524C7.37848 5.12325 7.41411 5.37265 7.35711 5.64342C7.3001 5.91419 7.17897 6.1422 6.9937 6.32747L5.94625 7.37492C5.91775 7.40342 5.89281 7.44974 5.87143 7.51387C5.85006 7.578 5.83937 7.63144 5.83937 7.67419C5.89637 7.97346 6.02463 8.31549 6.22415 8.70027C6.39516 9.04229 6.6588 9.45914 7.01508 9.9508C7.37136 10.4425 7.87727 11.0089 8.53282 11.6502C9.17411 12.3058 9.74416 12.8152 10.2429 13.1787C10.7416 13.542 11.1586 13.8093 11.4935 13.9803C11.8284 14.1513 12.0849 14.2546 12.263 14.2901L12.5302 14.3436C12.5587 14.3436 12.6051 14.3329 12.6691 14.3115C12.7333 14.2901 12.7796 14.2652 12.8081 14.2367L14.0266 12.9969C14.2832 12.7689 14.5824 12.6549 14.9244 12.6549C15.1668 12.6549 15.359 12.6976 15.5015 12.7831H15.5229L19.6485 15.2201C19.9479 15.4055 20.126 15.6405 20.1831 15.9256Z' fill='white'/%3E%3C/svg%3E%0A");
}
/*--------------------------------------------------------------
# r025 Социальные сети
--------------------------------------------------------------*/
  .ullist {
    padding: 0;
  }

  .ullist ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .ullist li {
    position: relative;
  }

  .ullist>ul>li {
    white-space: nowrap;
    padding: 15px 14px;
    width: 33%;
    min-width: 350px;
  }

  .ullist>ul>li:last-child {
    padding-right: 0;
  }

.ullist img {
    width: 50px;
    height: auto;
    margin-right: 15px;
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
  background-color: var(--surface-color);
  padding: 10px 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  margin-bottom: 20px;
}

.service-details .services-list a {
  display: block;
  line-height: 1;
  padding: 8px 0 8px 15px;
  border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
  margin: 20px 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.service-details .services-list a.active {
  color: var(--heading-color);
  font-weight: 700;
  border-color: var(--accent-color);
}

.service-details .services-list a:hover {
  border-color: var(--accent-color);
}

.service-details .services-img {
  margin-bottom: 20px;
}

.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}

.service-details h4 {
  font-size: 20px;
  font-weight: 700;
}

.service-details p {
  font-size: 15px;
}

.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: auto;
}

.portfolio-details .swiper-wrapper {
  height: auto;
  max-height: 600px;
}

.portfolio-details .swiper-button-prev,
.portfolio-details .swiper-button-next {
  width: 48px;
  height: 48px;
}

.portfolio-details .swiper-button-prev:after,
.portfolio-details .swiper-button-next:after {
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(0, 0, 0, 0.15);
  font-size: 24px;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.portfolio-details .swiper-button-prev:hover:after,
.portfolio-details .swiper-button-next:hover:after {
  background-color: rgba(0, 0, 0, 0.3);
}

@media (max-width: 575px) {

  .portfolio-details .swiper-button-prev,
  .portfolio-details .swiper-button-next {
    display: none;
  }
}

.portfolio-details .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.portfolio-details .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.portfolio-details .portfolio-info h3:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  bottom: 0;
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li {
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;
}

.portfolio-details .portfolio-info ul strong {
  text-transform: uppercase;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.portfolio-details .portfolio-info .btn-visit {
  padding: 8px 40px;
  background: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 50px;
  transition: 0.3s;
}

.portfolio-details .portfolio-info .btn-visit:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
}

.portfolio-details .portfolio-description .testimonial-item {
  padding: 30px 30px 0 30px;
  position: relative;
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  margin-bottom: 50px;
}

.portfolio-details .portfolio-description .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50px;
  border: 6px solid var(--background-color);
  float: left;
  margin: 0 10px 0 0;
}

.portfolio-details .portfolio-description .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 15px 0 5px 0;
  padding-top: 20px;
}

.portfolio-details .portfolio-description .testimonial-item h4 {
  font-size: 14px;
  color: #6c757d;
  margin: 0;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-left,
.portfolio-details .portfolio-description .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.portfolio-details .portfolio-description .testimonial-item p {
  font-style: italic;
  margin: 0 0 15px 0 0 0;
  padding: 0;
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}

/*--------------------------------------------------------------
# Blog Posts Section
--------------------------------------------------------------*/
.blog-posts article {
  background-color: var(--surface-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 30px;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.blog-posts .post-img {
  max-height: 240px;
  margin: -30px -30px 15px -30px;
  overflow: hidden;
  text-align: center;
  background-color: var(--bs-gray-500);
}

.blog-posts .post-category {
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 10px;
}

.blog-posts .title {
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.blog-posts .title a {
  color: var(--heading-color);
  transition: 0.3s;
}

.blog-posts .title a:hover {
  color: var(--accent-color);
}

.blog-posts .post-author-img {
  width: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.blog-posts .post-author {
  font-weight: 600;
  margin-bottom: 5px;
}

.blog-posts .post-date {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Pagination Section
--------------------------------------------------------------*/
.blog-pagination {
  padding-top: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-pagination ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.blog-pagination li {
  margin: 0 5px;
  transition: 0.3s;
}

.blog-pagination li a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 7px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-pagination li a.active,
.blog-pagination li a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.blog-pagination li a.active a,
.blog-pagination li a:hover a {
  color: var(--contrast-color);
}


/*--------------------------------------------------------------
# Blog Details Section
--------------------------------------------------------------*/
.blog-details {
  padding-bottom: 30px;
  margin: 2%;
}

.widthLimit {
	max-width: 1000px;
	margin: 0 auto;
}

.blog-details .article {
  background-color: var(--surface-color);
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 575px) {
   .blog-details .article {
       font-family: Roboto;
       font-size: 90%;
   } 
    
}

.blog-details .post-img {
  margin: -30px -30px 20px -30px;
  overflow: hidden;
}

.blog-details .title {
  color: var(--heading-color);
  font-size: 28px;
  font-weight: 700;
  padding: 0;
  margin: 30px 0;
}

.blog-details .content {
  margin-top: 20px;
}

.blog-details .content h3 {
  font-size: 22px;
  margin-top: 30px;
  font-weight: bold;
}

.blog-details .content blockquote {
  overflow: hidden;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 60px;
  position: relative;
  text-align: center;
  margin: 20px 0;
}

.blog-details .content blockquote p {
  color: var(--default-color);
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

.blog-details .content blockquote:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--accent-color);
  margin-top: 20px;
  margin-bottom: 20px;
}

.blog-details .meta-top {
  margin-top: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog-details .meta-top ul li+li {
  padding-left: 20px;
}

.blog-details .meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog-details .meta-bottom {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-details .meta-bottom i {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  display: inline;
}

.blog-details .meta-bottom a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: 0.3s;
}

.blog-details .meta-bottom a:hover {
  color: var(--accent-color);
}

.blog-details .meta-bottom .cats {
  list-style: none;
  display: inline;
  padding: 0 20px 0 0;
  font-size: 14px;
}

.blog-details .meta-bottom .cats li {
  display: inline-block;
}

.blog-details .meta-bottom .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: 14px;
}

.blog-details .meta-bottom .tags li {
  display: inline-block;
}

.blog-details .meta-bottom .tags li+li::before {
  padding-right: 6px;
  color: var(--default-color);
  content: ",";
}

.blog-details .meta-bottom .share {
  font-size: 16px;
}

.blog-details .meta-bottom .share i {
  padding-left: 5px;
}

/*--------------------------------------------------------------
# Blog Author Section
--------------------------------------------------------------*/
.blog-author {
  padding: 10px 0 40px 0;
}

.blog-author .author-container {
  background-color: var(--surface-color);
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog-author img {
  max-width: 120px;
  margin-right: 20px;
}

.blog-author h4 {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 0px;
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-author .social-links {
  margin: 0 10px 10px 0;
}

.blog-author .social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  margin-right: 5px;
}

.blog-author p {
  font-style: italic;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Comments Section
--------------------------------------------------------------*/
.blog-comments {
  padding: 10px 0;
}

.blog-comments .comments-count {
  font-weight: bold;
}

.blog-comments .comment {
  margin-top: 30px;
  position: relative;
}

.blog-comments .comment .comment-img {
  margin-right: 14px;
}

.blog-comments .comment .comment-img img {
  width: 60px;
}

.blog-comments .comment h5 {
  font-size: 16px;
  margin-bottom: 2px;
}

.blog-comments .comment h5 a {
  font-weight: bold;
  color: var(--default-color);
  transition: 0.3s;
}

.blog-comments .comment h5 a:hover {
  color: var(--accent-color);
}

.blog-comments .comment h5 .reply {
  padding-left: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-comments .comment h5 .reply i {
  font-size: 20px;
}

.blog-comments .comment time {
  display: block;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 5px;
}

.blog-comments .comment.comment-reply {
  padding-left: 40px;
}

/*--------------------------------------------------------------
# Comment Form Section
--------------------------------------------------------------*/
.comment-form {
  padding-top: 10px;
}

.comment-form form {
  background-color: var(--surface-color);
  margin-top: 30px;
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.comment-form form h4 {
  font-weight: bold;
  font-size: 22px;
}

.comment-form form p {
  font-size: 14px;
}

.comment-form form input {
  background-color: var(--surface-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  font-size: 14px;
  border-radius: 4px;
  padding: 10px 10px;
}

.comment-form form input:focus {
  color: var(--default-color);
  background-color: var(--surface-color);
  box-shadow: none;
  border-color: var(--accent-color);
}

.comment-form form input::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.comment-form form textarea {
  background-color: var(--surface-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  border-radius: 4px;
  padding: 10px 10px;
  font-size: 14px;
  height: 120px;
}

.comment-form form textarea:focus {
  color: var(--default-color);
  box-shadow: none;
  border-color: var(--accent-color);
  background-color: var(--surface-color);
}

.comment-form form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.comment-form form .form-group {
  margin-bottom: 25px;
}

.comment-form form .btn-primary {
  border-radius: 4px;
  padding: 10px 20px;
  border: 0;
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.comment-form form .btn-primary:hover {
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widgets-container {
  background-color: var(--surface-color);
  padding: 30px;
  margin: 60px 0 30px 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.widget-title {
  color: var(--heading-color);
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.widget-item {
  margin-bottom: 40px;
}

.widget-item:last-child {
  margin-bottom: 0;
}

.search-widget form {
  background: var(--background-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  padding: 3px 10px;
  position: relative;
  transition: 0.3s;
}

.search-widget form input[type=text] {
  border: 0;
  padding: 4px;
  border-radius: 4px;
  width: calc(100% - 40px);
  background-color: var(--background-color);
  color: var(--default-color);
}

.search-widget form input[type=text]:focus {
  outline: none;
}

.search-widget form button {
  background: var(--accent-color);
  color: var(--contrast-color);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  font-size: 16px;
  padding: 0 15px;
  margin: -1px;
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
  line-height: 0;
}

.search-widget form button i {
  line-height: 0;
}

.search-widget form button:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.search-widget form:is(:focus-within) {
  border-color: var(--accent-color);
}

.categories-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.categories-widget ul li {
  padding-bottom: 10px;
}

.categories-widget ul li:last-child {
  padding-bottom: 0;
}

.categories-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.categories-widget ul a:hover {
  color: var(--accent-color);
}

.categories-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.recent-posts-widget .post-item {
  display: flex;
  margin-bottom: 15px;
}

.recent-posts-widget .post-item:last-child {
  margin-bottom: 0;
}

.recent-posts-widget .post-item img {
  width: 80px;
  margin-right: 15px;
}

.recent-posts-widget .post-item h4 {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}

.recent-posts-widget .post-item h4 a {
  color: var(--default-color);
  transition: 0.3s;
}

.recent-posts-widget .post-item h4 a:hover {
  color: var(--accent-color);
}

.recent-posts-widget .post-item time {
  display: block;
  font-style: italic;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.tags-widget {
  margin-bottom: -10px;
}

.tags-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tags-widget ul li {
  display: inline-block;
}

.tags-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  padding: 6px 14px;
  margin: 0 6px 8px 0;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%);
  display: inline-block;
  transition: 0.3s;
}

.tags-widget ul a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 1px solid var(--accent-color);
}

.tags-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  font-size: 14px;
}

/*--------------------------------------------------------------
# r100 Спортивная лига sports_league
--------------------------------------------------------------*/

.ambassador .img-fluid {
    height: 350px;   
}

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

.portfolio-content .img-fluid {
    height: 300px;
}

.ic_ligaliga .img-fluid {
    width: 40%;
    border-radius: 100px;
}

.game_info {
	display: flex;
	column-gap:65px;
	justify-content: space-between;
	align-items: flex-start;
}

.game_info_block {
    width: 33%;
    text-align: center;
}
.game_info_block img {
  max-width: 100%;
}
.game_info_score {
  font-size: 65px;
  font-weight: 700;
  font-family: Unbounded-Bold;
  color: var(--heading-color);
}
.game_info_school {
  font-size: 30px;
  font-family: Unbounded-Bold;
  font-weight: 700;
  color: var(--heading-color);
}

.game_info_block p{
    color: grey;
}

.game_info_block img {
    width: auto;
    height: 150px;
    margin: 25px;
}

.col-lg-6-ic-liga {
	flex: 0 0 auto;
	width: 25%;
}

/*--------------------------------------------------------------
# r101 tables
--------------------------------------------------------------*/

#mytable {
}

#mytable thead p {
    color: grey; 
    font-style: normal;
}

#mytable tbody p {
    font-style: normal; 
}

#mytable .outer {
    display: flex;
    align-items: center;
    height: unset;
    min-height: 100px;
}

#mytable .outer img {
    width: 50px;
    height: 50px;
    margin: 20px 10px 20px 0;
    float: left;
}

#mytable .inner {
    line-height: normal;
    display: inline-block;
    vertical-align: middle;
    margin-left: 15px;
}

.player_outer{
    height: 300px;
    line-height: 300px;
    
}    
.player_outer img{
    width: auto;
    margin: 25px;
    float: left;
    height: 250px;
    border-radius: 15px;
}

.player_inner {
    line-height: normal;
    display: inline-block;
    vertical-align: middle;
    margin-left: 15px;
}

#tournament-tables-1 .sports_league, 
#tournament-tables-2 .sports_league, 
#tournament-tables-3 .sports_league, 
#tournament-tables-4 .sports_league, 
#playOff-tables-1 .sports_league,
#playOff-tables-2 .sports_league,
#playOff-tables-3 .sports_league,
#playOff-tables-4 .sports_league,
#women-tournament-tables-1 .sports_league,
#women-tournament-tables-2 .sports_league,
#women-tournament-tables-3 .sports_league,
#women-tournament-tables-4 .sports_league, 
#women-playOff-tables-1 .sports_league,
#women-playOff-tables-2 .sports_league,
#women-playOff-tables-3 .sports_league,
#women-playOff-tables-4 .sports_league {
	margin-top: 30px;
}

.sports_league {
    text-align: center;
    width: 96%;
    margin: 0 2% 0 2%;
}

.sports_league tr {
    border-bottom: 1px solid grey;   
    
}

.sports_league td {
    text-align: justify;
}

.sports_league td p {
    text-align: center;
}

.sports_league_ic_ligaliga {
    border: none;
    font-size: 250%;
    text-align: center;
    width: 90%;
    margin: 0 5% 0 5%;
}

.school-detail-head {
    /*float: right;*/

    float: none;
    min-width: 300px;
    /*width: 25%;*/
    text-align: center;
}

.school-detail-wrapper {
  display: flex;
  flex-direction: row-reverse;
  gap: 24px;
}
.school-detail-stats {
  flex-grow: 1;
}

.school-detail-head .player img {
    object-fit: contain;
//    width: 300px;
    height: 300px;
    object-position: 0px 0px;
    border-radius: 15px;
}

.school-detail-head .team img {
    object-fit: contain;
    width: 300px;
    height: 300px;
    object-position: 0px 0px;
    border-radius: 15px;    
    margin-top: -60px;
}

.school_liga_icons_players {
    margin: 15px; border-radius: 50%; border: 3px solid #b52b27; object-fit: contain; background: #d9d9d9;
    width: 65px;
    height: 65px;
}


@media screen and (max-width: 575px) {
    #mytable tbody p {
    font-size: 2.5vw;
    }

    #mytable thead p {
    font-size: 2.5vw;
    }
    
    .sports_league {
    font-size: 3vw;
    font-family: system-ui;
    }

    .sports_league td {
    text-align:  center;
    }

    #mytable .outer {
    line-height: 45px;
    }

    #mytable .outer img {
    width: auto;
    height: 40px;
    margin: 7px;
    float: none;
    }
    
    #mytable .inner {
        font-size: 3vw;
        margin: 0;
    }
}
  
  .sports_league_ic_ligaliga{
      font-size: 4vw;
  }
  
}
/*--------------------------------------------------------------
# r102 tabs
--------------------------------------------------------------*/

.tabs {
  max-width: 600px;
  width: 100%;
  margin: 50px auto;
}

.tabs__nav {
  display: flex; 
//  justify-content: space-between;
  margin: 0 15px 40px 0;
  padding: 15px 0 0 0px;
}

.tabs__button {
  cursor: pointer;
  padding: 10px 20px 0 0;
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,.5);
  background-color: #203051;
  color: white;
  padding: 6px;
//  min-width: 160px;
        &[aria-selected="true"] {
            background: red;
            color: #ffffff;
        }
}

.tabs__button._active {
  background: #b52b27;
}

.tabs__item:not(._active) {
  display: none;
}

.tabs__list__left {
    width: 50%;
    float: left;
}

.tabs__container .tabs__list {
    text-aling: right;
}
.tabs__groups {
  text-align: right;  
}
[data-tabs-content] {
	animation: faded  1.5s;

	&:not(.active) {
		display: none;
	}
}

[data-tabs-nested] {
	cursor: pointer; transition: .3s; border: none; background: transparent;
}

.players-tables {
	display: grid; column-gap: 25px; justify-content: center; grid-template-columns: 490px 1fr;

	.tabs__list__left, .tabs__list {
		button {
			min-width: 140px;
		}
	}

	&.section {
		padding-top: 30px;
	}

	@media (max-width: 1700px) {
		#player-tables-tournament {
			.tabs__list__left, .tabs__list {
				display: grid; grid-template-columns: max-content max-content; gap: 4px;

				button {
				}
			}

			.tabs__list {
				margin-left: auto; width: fit-content;
			}	
		}
	
	}

	@media (max-width: 1200px) {
		grid-template-columns: 300px 1fr; column-gap: 15px;
	}


	@media (max-width: 991px) {
		grid-template-columns: 100%; gap: 30px;

		.team {
			max-width: 700px; margin: 0 auto; width: 100%; order: 1;
		}
	}	

	@media (max-width: 675px) {
		#player-tables-tournament {
			.tabs__list__left, .tabs__list {
				grid-template-columns: max-content;
			}
		} 
	}
	
}

.players-tables__slider {
	.swiper-button-prev, .swiper-button-next {
		width: 44px; height: 44px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; color: #fff; background-color: var(--accent-color); transition: .3s; font-size: 24px; margin: 0;

		&::after {
			display: none; 
		}

		&:hover {
			background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
		}
	}

	.swiper-button-prev {
		transform: rotate(-90deg) translateX(50%); left: 0; z-index: 2;
	}

	.swiper-button-next {
		transform: rotate(90deg) translateX(-50%); right: 0; z-index: 2;
	}

	.member {
		box-shadow: none !important;
	}
}

.players-tables__content {
	position: relative;
}

.players-tables__sex {
/*   версия 1 */
    position: absolute; right: 20px;top: 6px;

	button {
		position: relative;

		img {
			& + img {
				position: absolute; left: 6px; top: 1px; opacity: 0; transition: .3s;
			}
		}

		&.active, &:hover {
			img {
				& + img {
					opacity: 1;
				}
			}
		}
	}
/*
	@media screen and (max-width: 600px) {
		position: static; margin-bottom: 15px; text-align: right;	
	}*/
/* версия 1 */
/* версия 2 */
/*
    text-align: left;
    float: left;
    margin-left: -40%;
    margin-top: 40px;

	@media (max-width: 600px) {
		position: static; 
		margin-left: 150px; 
		text-align: center; 
		width: 100px;
		margin-top: -100px;
	}
*/
/* /версия 2 */
}

#players-sex-women, #player-tables-play-off {
	.tabs__list__left {
//		width: 100%;
	}
}

.tab-button {
	border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,.5); background-color: #203051; color: white; padding: 6px;

	&.active {
		background: #b52b27;
	}
}

/*--------------------------------------------------------------
# r103 gamemarquee section
--------------------------------------------------------------*/
.gamemarquee .swiper-slide {
    margin-top: 7px;
}

.gamemarquee .gamemarquee-item {
  background-color: var(--surface-color);
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  box-sizing: content-box;
  margin-top: 0px;
  position: relative;
  height: 100%;
  background-color: #203051;
  color: #fff;
  text-align: center;
  border-radius: 10px;

}
.swiper-slide a span {
  display: block;
  width: 100%;
  height: 152px;
  border: none;
}

.swiper-slide a:hover span {
    transform: translateY(-10px);
}
.swiper-slide span {
    margin-bottom: 20px;
}

.gamemarquee .gamemarquee-item .gamemarquee-img {
  width: 50px;
  height: 50px;
  border-radius: 50px;
}

.gamemarquee .gamemarquee-item h3 {
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0 5px 0;
  color: #fff;
}

.gamemarquee .gamemarquee-item h4 {
  font-size: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin: 0;
  color: #fff;
}

.gamemarquee .gamemarquee-item .stars {
  margin: 10px 0;
}

.gamemarquee .gamemarquee-item .stars i {
  color: #ffc107;
  margin: 0 1px;
}

.gamemarquee .gamemarquee-item .quote-icon-left,
.gamemarquee .gamemarquee-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 24px;
  line-height: 0;
}

.gamemarquee .gamemarquee-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.gamemarquee .gamemarquee-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.gamemarquee .gamemarquee-item p {
  font-style: normal;
  margin: 1px auto 1px auto;
}

.gamemarquee .swiper-wrapper {
  height: auto;
}

.gamemarquee .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.gamemarquee .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--bs-gray-400), transparent 85%);
  opacity: 1;
}

.gamemarquee .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}
.gamemarquee table {
    width: 100%;
    text-align: center;
}

.gamemarquee td {
    width: 33%;
    text-align: center;
}

@media (max-width: 767px) {
  .gamemarquee .gamemarquee-wrap {
    padding-left: 0;
  }

  .gamemarquee .gamemarquee-item {
    padding: 0px;
    margin: 15px;
  }

  .gamemarquee .gamemarquee-item .gamemarquee-img {
    position: static;
    left: auto;
  }
}
/*--------------------------------------------------------------
# r104 ниспадающее меню для сезонов
--------------------------------------------------------------*/
/* Кнопка выпадающего списка */
.dropbtn {
  background-color: #203051;
  color: white;
  padding: 6px;
  border: none;
  border-radius: 5px;
  min-width: 160px;
}

/* Контейнер <div> - необходим для размещения выпадающего содержимого */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Выпадающее содержимое (скрыто по умолчанию) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #203051;
  min-width: 160px;
  border-radius: 5px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Ссылки внутри выпадающего списка */
.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 88%;
}

/* Изменение цвета выпадающих ссылок при наведении курсора */
.dropdown-content a:hover {   color: var(--nav-color);}

/* Показать выпадающее меню при наведении курсора */
.dropdown:hover .dropdown-content {display: block;}

/* Изменение цвета фона кнопки раскрывающегося списка при отображении содержимого раскрывающегося списка */
.dropdown:hover .dropbtn {   color: var(--nav-color);}

/*--------------------------------------------------------------
# r105 картинка фон
--------------------------------------------------------------*/
.banner_fon {
    margin-top: 0px;
    width: 100%;
    height: 400px;
}

.banner_fon img {
    width: 100%;
    height: 400px; 
}

.banner_title {
    background-image: url(/about/img/banners-bg.svg);
    text-align: right;
    width: 70%;
    height: 400px;
    background-repeat: no-repeat;
    position: absolute;
    right:0;
    padding: 0;
    background-size: cover;
    z-index: 2;
    justify-content: center;
    display: flex;
}

.banner_title h1{
    color: white;
    font-weight: 700;
    line-height: 200%;
    font-size: 2vw;
    margin: auto -350px auto 0;
}

.partnership-big img {
    border-radius: 20px;
    width: 30%;
}

.partnership-small img {
    border-radius: 20px;
    width: 15%;
}

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

.banner_fon {
    height: 250px;
}

.banner_fon img {
    width: 100%;
    height: 250px; 
    }

.banner_title {
    background-image: url(/about/img/banners-bg.svg);
    text-align: left;
    width: 1500px;
    height: 250px;
    background-repeat: no-repeat;
    position: absolute;
    right:0;
    padding: 0;
    background-size: cover;
    z-index: 2;
    justify-content: center;
    display: flex;
    }

.banner_title h1{
    position: absolute;
    right: 1%;
    padding: 0;
    color: white;
    font-weight: 700;
    line-height: 200%;
    font-size: 25px;
    margin: 3% 1%;
    }
    
.banner_fon_bottom_images {
    width: 100%;
    max-width: 999px;
    }

.banner_fon_bottom_images img{
    margin: 15px 0 15px 0;
    width:100%; 
    }

}
.game-versus {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: center;
}
.game-versus-sex {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}
.photo-slider {
  max-width: 1200px;
  margin: auto;
}
.photo-slider .portfolio-details-slider .swiper-slide {
  height: 600px;
}
.photo-slider .portfolio-details-slider .swiper-slide img{
  width: 100%;
  height: 100%;
  object-fit: contain;


}
.thumbs-swiper {
  
}

.thumbs-swiper .swiper-slide {
  width: auto;
  opacity: 0.5;
  height: 150px;
  cursor: pointer;
  overflow: hidden;
}

.thumbs-swiper .swiper-slide-thumb-active {
  opacity: 1;
  border: 2px solid #007bff;
}

.thumbs-swiper .swiper-slide img {
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}
/*new media */
@media screen and (max-width: 1399px) {
  .header__link {
    padding: 10px 3px;
  }
  .top-bar__social-list {
    margin-left: 172px;
  }
  .tab-button {
    font-size: 12px;
  }
}

@media screen and (max-width: 1199px) {
  .name_top_bar {
    font-weight: normal;
    font-size: 13px;
  }
  .tabs__list__left {
    width: 100%;
    float: unset;
    margin-bottom: 12px;
  }
  .tabs__groups {
    text-align: left;
  }
   .tab-button {
    margin-bottom: 4px;
    padding: 3px;
  }
     .blog-details .content blockquote p {
      font-size: 18px;
    }
}
@media (max-width: 1024px) {
    .top-bar {
        display: none;
    }
     .menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .btn span {
        display: none;
    }
    .title {
        color: #203051;
        font-family: Unbounded;
        font-size: 26px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
    .pages {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 40px 0 100px;
        -webkit-column-gap: 50px;
        -moz-column-gap: 50px;
        column-gap: 50px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .game_info_school {
      font-size: 19px;
    }
    .game_info_score {
      font-size: 40px;
    }
    .school-detail-wrapper {
      display: block;
    }
    .school-detail-head {
      width: 100%;
    }
    .school-detail-head .team img {
      margin-top: 0;
    }
    .school-detail-wrapper .school-detail-stats blockquote {
      padding: 24px;
    }

    .photo-slider .portfolio-details-slider .swiper-slide {
      width: 100%;
      height: 450px;  
    }
    .thumbs-swiper .swiper-slide {
      height: 78px;
    }

}
@media screen and (max-width: 768px) {
  .players-tables__sex button {
    width: 45px;
  }
  .players-tables__sex button img {
    max-width: 100%;
  }
  .players-tables__sex button img + img {
    left: -2px;
    top: -2px;
  }
  .game_info {
    column-gap: 24px;
    padding: 0 4px;
  }
  .game_info_block {
    font-size: 12px;
  }
  .game_info_block img {
    margin: 0 auto 24px;
    height: 80px ;
  }
   .game_info_school {
      font-size: 12px;
      font-weight: normal;
    }
    .game_info_score {
      font-size: 16px;
    }
    .game-padding {
      padding: 4px;
    }
    .game-versus {
      flex-direction: column;
      align-items: flex-start;
    }
    .game-versus-sex .pic {
      width: 32px;
      height: 32px;
    }
    .game-versus-sex .pic img {
      max-width: 100%;
    }
    #mytable .outer {
      flex-direction: column;
    }
    #mytable .inner {
      margin-left: 0;
    }
    .photo-slider .portfolio-details-slider .swiper-slide {
      height: 270px;
      border: 1px solid #dedede;
      padding: 4px;
    }
}


/* End */
/* /bitrix/templates/grandtemplate/template_styles.css?1770445547104680 */