/* Fonts Include  */

@font-face {
    font-family: 'font800';
    src: url('../fonts/NeoSansArabicBlack.ttf');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'font700';
    src: url('../fonts/NeoSansArabicBold.ttf');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
  }


  @font-face {
    font-family: 'font500';
    src: url('../fonts/NeoSansArabicMedium.ttf');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'font400';
    src: url('../fonts/Neo\ Sans\ Arabic\ Regular.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'font300';
    src: url('../fonts/NeoSansArabicLight.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

  /*  Start General  */
  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'font400', sans-serif;
  }

  .btn, a {
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
  }

  :root {
    --blackColor: #05060F;
    --redColor: #BE1E2D;
    --grayColor: #727A83;
    --border-color: rgba(5, 6, 15, 0.06);
    --trans: all 0.4s ease-in-out;
    --box-shadow: 0px 16px 64px rgba(31, 47, 70, 0.15);
  }

  body, html {
    margin: 0px;
    padding: 0px;
    background-color: #FFFFFF;
    font-family: 'font400', sans-serif;
    font-size: 16px;
    color: var(--blackColor);
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
  }

  body {
    overflow-x: hidden;
    position: relative;
    background-color: #F8F8F8;
  }

  a, a:hover, a:focus, a:active {
    text-decoration: none;
  }

  .overlay-all {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    background-color: #000000;
    opacity: 0.4;
  }

  .h1, .h2, .h3, .h4, .h5, .h6,
  h1, h2, h3, h4, h5, h6 {
    /* font-weight: 900; */
    font-weight: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  [type=email], [type=file], [type=number], [type=password], [type=tel], [type=url], code, samp, var {
    direction: rtl;
    text-align: right;
  }

  .datepicker th {
    font-weight: normal;
    font-family: 'font500', sans-serif;
  }

  .font-14 {
    font-size: 14px;
  }

  .font-18 {
    font-size: 18px;
  }

  .font-16 {
    font-size: 16px !important;
  }

  .font400 {
    font-family: font400 !important;
  }

  .font500 {
    font-family: font500 !important;
  }

  .gray-color {
    color: var(--grayColor) !important;
  }

  .black-color {
    color: var(--blackColor) !important;
  }

  .red-color {
    color: var(--redColor) !important;
  }

  .red-hover:hover {
    color: #D51119 !important;
  }

  .gap-1 {
    gap: 0.5rem;
  }

  .gap-2 {
    gap: 1rem;
  }

  .gap-3 {
    gap: 1.5rem;
  }

  .gap-col-3 {
    column-gap: 1.5rem;
  }

  .gap-4 {
    gap: 2rem;
  }

  .close-btn-filter {
    display: none;
  }

  .search-input {
    position: relative;
  }

  .search-input span {
    position: absolute;
    top: 6px;
    right: 20px;
  }

  .search-input input {
    height: 44px;
    text-indent: 32px;
  }

  .filters {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px 24px;
    background-color: white;
  }

  .filters h3 {
    font-size: 18px;
    font-family: font700, sans-serif;
    margin-bottom: 20px;
  }

  .filter {
    cursor: pointer;
  }

  .filter:not(:last-child) {
    /* border-bottom: 1px solid var(--border-color); */
    /* padding-bottom: 16px; */
    margin-bottom: 24px;
  }

  .angle-filter.hide {
    display: none;
  }

  .filter_title {
    font-size: 16px;
    font-family: font500;
    color: var(--blackColor);
  }

  .cs-checkbox-1 {
    display: block;
    position: relative;
    padding-inline-start: 32px;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: 'font400';
    padding-top: 2px;
  }
  .cs-checkbox-1 a{
    color: var(--blackColor);

  }

  /* Hide the browser's default checkbox */
  .cs-checkbox-1 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }

  .cs-checkbox-1 .checkmark {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 24px;
    width: 24px;
    background-color: #fff;
    border-radius: 6px;
    border: 1px solid var(--border-color);
  }

  .s

  /* On mouse-over, add a grey background color */
  .cs-checkbox-1:hover input~.checkmark {
    background-color: #ccc;
  }

  /* When the checkbox is checked, add a blue background */
  .cs-checkbox-1 input:checked~.checkmark {
    background-color: var(--redColor);
    border-color: var(--redColor);
  }

  /* Create the checkmark/indicator (hidden when not checked) */
  .cs-checkbox-1 .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }

  /* Show the checkmark when checked */
  .cs-checkbox-1 input:checked~.checkmark:after {
    display: block;
  }

  /* Style the checkmark/indicator */
  .cs-checkbox-1 .checkmark:after {
    left: 8px;
    top: 2px;
    width: 7px;
    height: 14px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-radius: 2px;
  }

  .sub-filter .filter_title {
    font-size: 14px;
    font-family: font500;
    color: var(--blackColor);
  }

  .cs-checkbox-2 {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: 'font400';
    padding-top: 2px;
  }

  /* Hide the browser's default checkbox */
  .cs-checkbox-2 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }

  .cs-checkbox-2 p {
    margin-bottom: 0;
  }

  /* When the checkbox is checked, add a blue background */
  .cs-checkbox-2 input:checked~div p {
    color: var(--redColor) !important;
  }

  .cs-checkbox-2 p:hover {
    color: var(--redColor) !important;
  }

  .cs-checkbox-brand {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: 'font400';
    padding-top: 2px;
  }

  /* Hide the browser's default checkbox */
  .cs-checkbox-brand input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }

  /* .cs-checkbox-brand .brand-check {
    margin-bottom: 0;
    border: 1.6px solid var(--border-color);
    border-radius: 8px;
    width: 104px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  } */
  .brand-check {
    margin-bottom: 0;
    border: 1.6px solid var(--border-color);
    border-radius: 8px;
    width: 104px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cs-checkbox-brand input:checked~.brand-check {
    border-color: var(--redColor);
  }

  .cs-checkbox-brand .brand-check img {
    object-fit: contain;
  }

  /* When the checkbox is checked, add a blue background */
  .cs-checkbox-brand input:checked~div p {
    color: var(--redColor);
  }

  /* Loader */
  .pre-loader {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgb(0 0 0 / 71%);
  }


  @keyframes loader {
    0%, 10%, 100% {
      width: 80px;
      height: 80px;
    }

    65% {
      width: 150px;
      height: 150px;
    }
  }

  @keyframes loaderBlock {
    0%, 30% {
      transform: rotate(0);
    }

    55% {
      background-color: #ED3237;
    }

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

  @keyframes loaderBlockInverse {
    0%, 20% {
      transform: rotate(0);
    }

    55% {
      background-color: #ED3237;
    }

    100% {
      transform: rotate(-90deg);
    }
  }

  .loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
    animation: loader 1.2s infinite ease-in-out;
  }

  .loader span {
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    background-color: #fff;
    animation: loaderBlock 1.2s infinite ease-in-out both;
  }

  .loader span:nth-child(1) {
    top: 0;
    left: 0;
  }

  .loader span:nth-child(2) {
    top: 0;
    right: 0;
    animation: loaderBlockInverse 1.2s infinite ease-in-out both;
  }

  .loader span:nth-child(3) {
    bottom: 0;
    left: 0;
    animation: loaderBlockInverse 1.2s infinite ease-in-out both;
  }

  .loader span:nth-child(4) {
    bottom: 0;
    right: 0;
  }

  /* Loader */


  /* style */
  .body-content {
    min-height: 100vh;
    position: relative;
  }

  ::-webkit-input-placeholder {
    /* Edge */
    font-size: 14px;
    font-family: 'font400', sans-serif;
  }

  :-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    font-size: 14px;
    font-family: 'font400', sans-serif;
  }

  ::placeholder {
    font-size: 14px;
    font-family: 'font400', sans-serif;
  }

  html[dir="rtl"] .datepicker {
    direction: rtl;
  }

  /* Side Menu */
  .side-menu {
    position: fixed;
    right: -900px;
    top: 0;
    width: 300px;
    height: 100%;
    background: #FFF;
    z-index: 9999;
    -webkit-box-shadow: -12px 0 59px 1px #191919;
    box-shadow: -12px 0 59px 1px #191919;
    opacity: 0;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
  }

  .side-menu .scroll-menu {
    height: calc(100vh - 155px - 41px - 15px - 34px);
  }

  .side-menu-header {
    /*background: url("../images/side-menu.png") no-repeat left;*/
    background-size: cover;
    text-align: right;
    padding: 20px 15px;
  }

  .side-menu-header a img {
    height: 115px;
  }

  .menu-title {
    display: block;
    background: #f4f4f4;
    color: var(--mainColor);
    border-bottom: 1px solid #e3e3e3;
    padding: 8px 10px;
    text-align: center;
    font-size: 16px;
    font-family: 'bold-ar', 'main', sans-serif;
    margin-bottom: 15px;
  }

  .side-menu nav ul {
    list-style: none;
    padding: 0 15px;
  }

  .side-menu nav>ul li a {
    display: block;
    color: var(--blackColor);
    font-size: 18px;
    padding: 3px 10px;
    -webkit-transition: var(--trans);
    -o-transition: var(--trans);
    transition: var(--trans);
    margin-bottom: 8px;
    position: relative;
    font-family: 'font500', sans-serif;
    display: flex;
    justify-content: flex-start;
  }

  .side-menu nav>ul li a img {
    display: inline-block;
    margin: 0 5px !important;
    width: 25px;
  }

  @media (max-width: 480px) {
    .side-menu {
      width: 250px;
    }

    .side-menu nav>ul li a {
      font-size: 16px;
    }
  }

  .side-menu nav>ul li a span {
    position: relative;
    padding-right: 5px;
    padding-left: 5px;
    display: inline-block;
    color: inherit;
    font-family: inherit;
  }

  .side-menu nav>ul li a span::after {
    content: '';
    display: block;
    width: 0;
    height: 100%;
    background: var(--sBgColor);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-transition: var(--trans);
    -o-transition: var(--trans);
    transition: var(--trans);
    display: none;
  }

  .side-menu nav>ul li.active a span::after,
  .side-menu nav>ul li a:hover span::after,
  .side-menu nav>ul li a:focus span::after {
    width: 100%;
  }

  .side-menu nav>ul li a:hover,
  .side-menu nav>ul li.active a {
    color: var(--greenColor);
  }

  .social-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    bottom: 0;
  }

  .social-menu a {
    display: block;
    padding: 5px 10px;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
  }

  .side-menu button {
    font-size: 25px;
  }

  .side-menu button:hover {
    color: red !important;
  }

  .side-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(3, 3, 3, .8);
    z-index: 9998;
    display: none;
  }

  /* Side Menu */
  /*general*/
  .sec-header {
    margin-bottom: 30px;
  }

  .sec-header h2 {
    font-size: 24px;
    font-family: 'font600', sans-serif;
    color: var(--blackColor);
    margin-bottom: 0;
  }

  .sec-header .actions {}

  .sec-header .view-all {
    font-size: 14px;
    font-family: 'font500', sans-serif;
    color: var(--blackColor);
    border: 1px solid var(--blackColor);
    border-radius: 8px;
    padding: 4px 10px;
  }

  .sec-header .view-all:hover {
    background-color: #F6F6F6;
  }

  .sec-header .cs-nav {
    display: inline-block;
    margin-inline-start: 8px;
    cursor: pointer;
  }

  .sec-header .cs-nav i {
    width: 33px;
    line-height: 31px;
    border-radius: 50%;
    color: var(--blackColor);
    border: 1px solid var(--blackColor);
    font-size: 18px;
    text-align: center;
    -webkit-transition: var(--trans);
    transition: var(--trans);
  }

  .sec-header .cs-nav i:hover {
    background-color: #F6F6F6;
  }

  /*general*/
  /*buttons*/
  .cs-btn-red {
    background-color: var(--redColor);
    border-color: var(--redColor);
    color: #fff;
  }

  .cs-btn-red:hover {
    background-color: var(--blackColor);
    border-color: var(--blackColor);
    color: #fff;
  }

  .cs-btn-red.white-hover:hover {
    background: #D51119;
  }

  .cs-btn-white {
    border: 1px solid #fff;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.16);
    font-size: 14px;
    font-family: 'font500', sans-serif;
    border-radius: 8px;
  }

  .cs-btn-white:hover {
    background-color: #fff;
    color: var(--blackColor);
  }

  /*buttons*/
  /*header*/
  .main-header {
    background-color: #fff;
    display: flex;
    padding-block: 20px;
  }

  .main-header .search-icon {
    border-inline-start: 1px solid var(--border-color);
    padding-inline-start: 20px;
    cursor: pointer;
    line-height: 43px;
    margin-inline-start: 20px;
  }

  .search-icon:hover svg ellipse {
    fill: rgb(237 27 36 / 40%);
  }

  .search-icon:hover svg path {
    fill: var(--redColor);
  }

  .main-header .header-search {
    width: 500px;
  }

  .main-header .search-input-wrapper {
    border: 1px solid #E3E6EA;
    border-radius: 5px;
    padding: 2px 10px;
  }

  .main-header .search-input-wrapper input {
    border: none;
    border-radius: 0;
    outline: none !important;
    box-shadow: none !important;
    /* padding-inline-start: 10px; */
  }

  .cs-dropdown .dropdown-toggle::after {
    padding: 0;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7.5' height='4.583' viewBox='0 0 7.5 4.583'%3E%3Cpath id='Path' d='M4.339.244a.833.833,0,0,1,0,1.179L2.012,3.75,4.339,6.077A.833.833,0,0,1,3.161,7.256L.244,4.339a.833.833,0,0,1,0-1.179L3.161.244A.833.833,0,0,1,4.339.244Z' transform='translate(0 4.583) rotate(-90)' fill='%23727a83'/%3E%3C/svg%3E%0A");
    border: none;
    margin-top: -5px;
  }

  .cs-dropdown .show .dropdown-toggle {
    color: var(--redColor);
  }

  .cs-dropdown .show .dropdown-toggle::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7.5' height='4.583' viewBox='0 0 7.5 4.583'%3E%3Cpath id='Path' d='M4.339,7.256a.833.833,0,0,0,0-1.179L2.012,3.75,4.339,1.423A.833.833,0,0,0,3.161.244L.244,3.161a.833.833,0,0,0,0,1.179L3.161,7.256A.833.833,0,0,0,4.339,7.256Z' transform='translate(7.5) rotate(90)' fill='%23be1e2d'/%3E%3C/svg%3E%0A");
  }

  .cs-dropdown .dropdown button {
    padding: 8px;
    color: var(--grayColor);
    outline: none;
    box-shadow: none;
  }

  .cs-dropdown .dropdown-menu {
    box-shadow: var(--box-shadow);
    border: 0;
    border-radius: 16px;
    position: relative;
    min-width: 250px;
    padding: 24px 20px 8px;
  }

  .cs-dropdown .dropdown-menu::after {
    content: '';
    position: absolute;
    background-color: white;
    border-radius: 16px;
    width: 24px;
    height: 12px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    top: -10px;
    right: 20px;
  }

  .cs-dropdown .dropdown-item {
    color: var(--blackColor);
    text-align: inherit;
    white-space: nowrap;
    font-family: 'font500', sans-serif;
    background-color: transparent;
    padding: 0;
    padding-bottom: 1rem;
  }

  .cs-dropdown .dropdown-item:hover {
    color: var(--redColor);
  }

  .search-input-wrapper ::-webkit-input-placeholder {
    /* Edge */
    font-size: 14px;
    font-family: 'font400', sans-serif;
    color: #BDBFC1;
  }

  .search-input-wrapper :-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    font-size: 14px;
    font-family: 'font400', sans-serif;
    color: #BDBFC1;
  }

  .search-input-wrapper ::placeholder {
    font-size: 14px;
    font-family: 'font400', sans-serif;
    color: #BDBFC1;
  }

  .main-header .badge-ic {
    background-color: #E3E6EA;
    color: #201E1E;
    text-align: center;
    line-height: 44px;
    width: 44px;
    margin: 0 5px;
    position: relative;
    border-radius: 50%;
  }

  .main-header .badge-ic:hover {
    background-color: var(--blackColor);
    color: #fff;
  }

  .main-header .badge-ic .count {
    background-color: #ED3237;
    color: #fff;
    text-align: center;
    line-height: 20px;
    padding: 0 3px;
    border-radius: 11px;
    position: absolute;
    top: -5px;
    left: -5px;
    min-width: 20px;
  }

  .main-header .h-user .dropdown-toggle img {
    height: 44px;
    width: 44px;
    border-radius: 50%;
    object-fit: cover;
    -webkit-transition: var(--trans);
    transition: var(--trans);
  }

  .main-header .h-user .dropdown-toggle:hover img {
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  }

  .main-header .h-user .dropdown-toggle i {
    font-size: 12px;
    margin-inline-start: 5px;
  }

  .main-header .h-user .dropdown-toggle::after {
    display: none;
  }

  .lang label {
    color: var(--blackColor);
    margin-bottom: 0;
  }

  .lang .hide {
    display: none;
  }

  .lang:hover .hide {
    display: inline-block;
  }

  .lang:hover .show {
    display: none;
  }

  .lang:hover label {
    color: var(--redColor);
  }

  .main-header .header-bottom {
    border-top: 1px solid #E3E6EA;
    border-bottom: 1px solid #E3E6EA;
  }

  .main-header .navbar-nav .nav-link {
    font-size: 16px;
    color: var(--grayColor);
  }

  .main-header .navbar-nav .active .nav-link {
    font-family: font500, sans-serif;
  }

  .main-header .navbar-nav .active .nav-link,
  .main-header .navbar-nav .nav-link:hover {
    color: var(--redColor);
  }

  .underline_header_titles.active .nav-link {
    position: relative;
  }

  .underline_header_titles.active .nav-link::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 1.5px;
    background-color: var(--redColor);
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0px);
  }


  /*header*/
  /* main-footer */
  .main-footer {
    background-color: var(--blackColor);
    color: #fff;
    margin-top: 100px;
    padding-top: 72px;
    border-top-right-radius: 64px;
    border-top-left-radius: 64px;
    padding-bottom: 5px;
  }

  .main-footer .f-top {
    padding-bottom: 24px;
  }


  .main-footer .f-widget .title {
    font-size: 18px;
    font-family: 'font500', sans-serif;
    margin-bottom: 8px;
    text-align: start;
  }

  .main-footer .f-widget ul {
    padding: 0;
    list-style: none;
  }

  .main-footer .f-widget li {
    margin-bottom: 7px;
  }

  .main-footer a {
    color: var(--grayColor);
    font-size: 14px;
  }

  .main-footer a:hover {
    color: white;
  }

  .main-footer p {
    color: #BDBFC1;
    font-size: 14px;
    margin-bottom: 10px;
  }

  .f-maillist {
    margin-top: 24px;
  }

  .f-maillist .maillist-wrapper {
    position: relative;
    background-color: #373535;
    border-radius: 10px;
    margin-bottom: 15px;
  }

  .f-maillist .maillist-wrapper>svg {
    margin: 0 10px;
  }

  .f-maillist .maillist-wrapper input {
    background-color: transparent;
    border: none;
    border-radius: 0;
    outline: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    height: 44px;
    color: white;
  }

  .f-maillist .maillist-wrapper .btn {
    line-height: 44px;
    border-radius: 10px;
    padding: 0;
    width: 60px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .f-maillist .maillist-wrapper .btn svg {
    width: auto;
    height: 20px;
  }

  .f-payment-methods h4 {
    font-size: 14px;
  }

  .f-payment-methods img {
    height: 30px;
    border-radius: 5px;
    margin: 5px;
  }

  .main-footer .f-bottom {
    /* border-top: 1px solid rgba(255, 255, 255, 0.2); */
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .f-copyright {
    margin-bottom: 0;
    font-size: 14px;
    color: #BDBFC1;
  }

  .f-social a {
    margin: 0 3px;
  }

  .f-social i {
    width: 32px;
    line-height: 32px;
    border-radius: 50%;
    text-align: center;
    background-color: #373535;
    color: #fff;
    font-size: 18px;
    -webkit-transition: var(--trans);
    transition: var(--trans);
  }

  .f-social i:hover {
    background-color: #fff;
    color: var(--redColor);

  }

  .main-footer .container {
    position: relative;
  }

  .main-footer .scroll-to-top {
    width: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    background-color: var(--redColor);
    color: #fff;
    position: absolute;
    top: -60px;
    left: 0;
    z-index: 2;
    -webkit-transition: var(--trans);
    transition: var(--trans);
    cursor: pointer;
  }

  .main-footer .scroll-to-top:hover {
    background-color: #373535;
    color: #fff;
  }

  .main-footer .scroll-to-top svg {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    position: relative;
    top: -2px;
    height: auto;
    width: 18px;
  }

  /* main-footer */

  /* slider-section */
  .slider-section {
    background: #F3F4F5;
    padding-bottom: 38px;
    padding-top: 24px;
  }

  .slider-section .content {
    background-color: white;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    padding: 12px;
    margin-inline: 45px;
  }

  .slider-section .content .text {
    padding: 20px 20px 0;
  }

  .slider-section .content .text figure {
    margin-bottom: 32px;
  }

  .slider-section .content .text h4 {
    font-size: 40px;
    font-family: font700, sans-serif;
    margin-bottom: 12px;
  }

  .slider-section .content .text p {
    color: var(--grayColor);
    margin-bottom: 32px;
  }

  .cs-btn {
    color: var(--blackColor);
    font-family: font500, sans-serif;
    font-size: 18px;
    border: 1px solid var(--blackColor);
    border-radius: 10px;
    width: 150px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cs-btn:hover {
    background-color: #F3F4F5;
  }

  .slider-img {
    border: 1px solid var(--border-color);
    margin-bottom: 0;
  }

  .slider-img, .slider-img img {
    border-radius: 16px;
    height: 426px;
  }

  .slider-img img {
    width: 100%;
    height: 100%;
  }

  .owl-slider .owl-nav {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
  }

  .owl-slider .owl-nav button {
    position: absolute;
    transform: translateY(-50%);
  }

  .owl-slider .owl-dots .owl-dot:focus,
  .owl-slider .owl-nav button:focus {
    outline: none !important;
    box-shadow: none important;
  }

  .owl-slider .owl-nav .owl-next {
    left: -60px;
  }

  .owl-slider .owl-nav .owl-prev {
    right: -60px;
  }

  .owl-slider .owl-nav span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 56px;
    border-radius: 6px;
    background-color: white;
    color: #201E1E;
    border: 1px solid var(--border-color);
    font-size: 20px;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
  }

  .owl-slider .owl-nav span:hover {
    background-color: #fff;
    color: #201E1E;
  }

  .owl-slider .owl-dots {
    text-align: center;
    position: absolute;
    bottom: -45px;
    right: 0;
    left: 0;
  }

  .owl-slider .owl-dots span {
    display: inline-block;
    width: 14px;
    height: 6px;
    border-radius: 3px;
    margin: 0 3px;
    background-color: rgb(12 18 28 / 12%);
    position: relative;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
  }

  .owl-slider .owl-dots .owl-dot.active span {
    background-color: var(--blackColor);
    /* width: 24px; */
  }

  .owl-slider .owl-dots .owl-dot.active span:before {
    border-color: rgba(255, 255, 255, 0.6);
  }

  .owl-slider .home-slider-item {
    height: 440px;
  }

  .home-slider .home-slider-item img {
    height: 100%;
  }

  /* slider-section */

  /* categories-section */
  .categories-section {
    padding-top: 92px;
  }

  .title {
    text-align: center;
  }

  .title h2 {
    font-size: 40px;
    font-family: font700, sans-serif;
  }

  .title p {
    margin-top: 10px;
  }

  .top-line {
    position: relative;
  }

  .top-line::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 4px;
    background-color: var(--redColor);
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
  }

  .category-card {
    padding: 32px;
    background-color: white;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
    position: relative;
    z-index: 1;
    /* min-height: 210px; */
    height: calc(100% - 24px);
  }

  .category-card figure {
    height: 85px;
  }

  .category-card h4 {
    font-size: 20px;
    font-family: font500, sans-serif;
    transition: var(--trans);
    margin-top: 32px;
  }

  .category-card:hover h4 {
    color: var(--redColor);
    transition: var(--trans);
  }

  .category-card::after {
    content: '';
    position: absolute;
    transition: var(--trans);
    transform: translate(-16px, 16px);
  }

  .category-card:hover::after {
    content: '';
    position: absolute;
    width: calc(100% - 32px);
    height: calc(100% - 32px);
    background-color: #F8F8F8;
    z-index: -1;
    border-radius: 18px;
    transition: var(--trans);
    right: 50%;
    transform: translate(50%, -50%);
    top: 50%;
  }

  /* ./categories-section */

  /* numbers-section */
  .numbers-section .content {
    padding: 42px;
    background-color: white;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    text-align: center;
  }

  .numbers-section .content h3 {
    font-size: 24px;
    color: var(--blackColor);
    font-family: font700, sans-serif;
    width: 70%;
  }

  .numbers-section .content h4 {
    font-size: 32px;
    font-family: font700, sans-serif;
  }

  .numbers-section .content h6 {
    font-size: 16px;
    color: var(--grayColor);
  }

  /* ./numbers-section */

  /* videos-section */
  .videos-section {
    margin-top: 92px;
    position: relative;
    margin-bottom: 50px;
  }

  .video-card {
    height: 310px !important;
  }

  .video-card figure {
    border-radius: 20px;
    overflow: hidden;
    height: 300px;
  }

  .video-card figure img {
    border-radius: 20px;
    height: 100%;
  }

  .video-card .video-card-body {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 32px;
    right: 24px;
    gap: 1rem;
  }

  .video-card .video-card-body h4 {
    font-size: 20px;
    color: white;
    font-family: font500, sans-serif;
    width: 80%;
  }

  .overlay {
    position: relative;
    overflow: hidden;
  }

  .overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.7));
  }

  .video-play {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
  }

  .video-play::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    transform: translate(5px, -5px);
    background-color: rgba(255, 255, 255, 0.4);
    z-index: -1;
  }

  .video-card img {
    transition: var(--trans);
  }

  .video-card:hover img {
    transform: scale(1.2);
    transition: var(--trans);
  }

  .video-card:hover svg path {
    fill: white;
  }

  .video-card:hover .video-play {
    background-color: var(--redColor);
  }

  .video-card:hover .video-play::after {
    background-color: rgba(190, 30, 45, 0.4);
  }



  .videos-slider {
    height: 310px;
  }

  .videos-slider.owl-slider .owl-nav .owl-next {
    left: 160px;
  }

  .videos-slider.owl-slider .owl-nav .owl-prev {
    right: 160px;
  }

  .videos-slider .owl-item.active:first-child {
    background-color: red;
  }

  .overlay-white {
    position: relative;
    transition: var(--trans);
  }

  .overlay-white-right::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: var(--trans);
  }

  .overlay-white-left::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: var(--trans);
  }

  .videos-slider .owl-stage-outer {
    height: 100%;
  }

  /* ./videos-section */


  /* contact-us-short-section */
  .contact-us-short-section {
    margin-top: 124px;
    background-color: white;
    position: relative;
    height: 180px;
    margin-bottom: 60px;
  }

  .contact-us-short-section figure {
    margin-top: -50px;
  }

  .contact-us-short-section h4 {
    font-size: 32px;
    font-family: font500, sans-serif;
  }

  .contact-us-short-section p {
    color: var(--grayColor);
  }

  .contact-us-short-section .cs-btn {
    font-size: 16px;
  }

  /* ./contact-us-short-section */

  /* news-section */
  .news-section {
    margin-top: 92px;
  }

  .news-card {
    background-color: #fff;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    height: calc(100% - 30px);
    padding: 12px;
    margin-bottom: 30px;
  }

  .news-card figure {
    margin-bottom: 0;
    width: 100%;
    position: relative;
    height: 210px;
  }
  .news-card-2 figure{
    position: relative;
  }
  .news-card figure::after, .news-card-2 figure::after{
    visibility: hidden;
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: var(--redColor);
    opacity: 0.4;
    border-radius: 16px;
    transition: 0.2s ease-in;
  }

  .news-card figure img {
    border-radius: 16px;
    object-fit: cover;
    height: 100%;
    width: 100%;
  }

  .news-card .info {
    padding: 15px;
  }

  .date {
    font-size: 14px;
    color: #797D81;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .date .date-icon {
    background-color: white;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-color);
  }

  .date span {
    font-size: 14px;
  }

  .news-card h3 {
    font-size: 18px;
    font-family: 'font500', sans-serif;
    color: var(--blackColor);
    transition: 0.2s ease-in;
  }

  .news-card .content {
    font-size: 14px;
    color: var(--grayColor);
    margin-bottom: 10px;
  }

  .news-card .read-more,.news-card-2 .read-more {
    font-size: 18px;
    font-family: 'font500', sans-serif;
    color: white;
    margin-bottom: 15px;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    visibility: hidden;
    transition: 0.2s ease-in;
  }

  .news-card:hover h3,.news-card-2:hover h3 {
    color: var(--redColor);
    transition: 0.2s ease-in;
  }

  .news-card:hover .read-more,.news-card-2:hover .read-more {
    visibility: visible;
    transition: 0.2s ease-out;
  }

  .news-card:hover figure::after,.news-card-2:hover figure::after {
    visibility: visible;
    ;
    transition: 0.2s ease-out;
  }

  /* ./news-section */

  /* ads-section */
  .ads-section {
    margin-top: 72px;
  }

  .ads-section .content {
    padding: 12px;
    background-color: white;
    border-radius: 16px;
    border: 1px solid var(--border-color);
  }

  .ads-section .content figure {
    margin-bottom: 0;
    border-radius: 16px;
  }

  .ads-section .content figure img {
    border-radius: 16px;
    width: 100%;
  }

  .tag {
    font-size: 14px;
    font-family: font500, sans-serif;
    padding: 9px;
    height: 32px;
    border-radius: 10px;
    background-color: #F8F8F8;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    max-width: 178px;
    overflow: hidden;
    width: max-content;
  }

  .ads-section .content h4 {
    margin-top: 15px;
    font-size: 18px;
    font-family: font500, sans-serif;
    margin-bottom: 10px;
  }

  .ads-section .content p {
    font-size: 14px;
    color: var(--grayColor);
  }

  .ads-section .content .cs-btn {
    width: 200px;
  }

  /* ./ads-section */

  /* books-section */
  .books-section {
    margin-top: 92px;
  }

  .book-card {
    background-color: white;
    border-radius: 20px;
    padding: 20px;
    border: 1px solid var(--border-color);
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
    height: 420px;
  }

  .book-card figure {
    padding: 5px;
    border: 1px solid var(--border-color);
    margin-bottom: 0;
    border-radius: 12px;
    position: relative;
    margin-bottom: 20px;
    height: 250px;
  }

  .book-card figure .tag {
    position: absolute;
    top: 10px;
    left: 10px;
    border-color: white;
    color: var(--blackColor);
  }

  .book-card figure img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
  }

  .rate {
    display: flex;
    align-items: flex-end;
    gap: 6px;
  }

  .rate p {
    margin-bottom: 0;
    font-size: 12px;
    color: var(--grayColor);
  }

  .rate span {
    font-size: 12px;
    font-family: font500, sans-serif;
    color: var(--blackColor);
  }

  .book-card h4 {
    margin-top: 10px;
    margin-bottom: 8px;
    font-size: 16px;
    font-family: font500, sans-serif;
    color: var(--blackColor);
  }

  .book-card h6 {
    color: var(--grayColor);
    font-size: 14px;
  }

  .book-card::after {
    content: '';
    position: absolute;
    width: calc(100% - 18px);
    height: calc(100% - 18px);
    transform: translate(-9px, 9px);
    inset: 0;
    z-index: -1;
    border-radius: 18px;
  }

  .book-card:hover::after {
    background-color: #F8F8F8;


  }

  .book-card:hover h4 {
    color: var(--redColor);
  }

  /* ./books-section */

  /* parteners-section */
  .parteners-section {
    margin-top: 72px;
  }

  .parteners-section .content {
    padding: 66px 66px 50px;

    background-color: white;
    border: 1px solid var(--border-color);
    border-radius: 20px;
  }

  .parteners-section .title h2 {
    font-size: 24px;
  }

  .parteners-slider figure {
    height: 80px;
  }

  .parteners-slider figure img {
    height: 100%;
    object-fit: contain;
  }

  /* ./parteners-section */

  /* contact-us-section */
  .contact-us-section {
    margin-top: 92px;
  }

  .info-contact {
    margin-bottom: 12px;
  }

  .info-contact .info-title {
    margin-inline-start: 12px;
    font-size: 14px;
    color: var(--grayColor);
  }

  .info-contact p {
    color: var(--blackColor);
    margin-inline-start: 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-family: 'font500';
  }

  .contact-us-section .form {
    background: white;
    border: 1.5px solid var(--border-color);
    padding: 32px;
    border-radius: 25px;
  }

  .contact-us-section .form h5 {
    font-size: 20px;
    font-family: font500, sans-serif;
    margin-bottom: 20px;
  }

  .contact-us-section .form label {
    font-size: 14px;
    font-family: font500, sans-serif;
  }

  .cs-btn.v2 {
    background-color: var(--redColor);
    color: white;
    border: 0;
  }

  .cs-btn.v2:hover {
    background-color: #D51119;
  }

  .contact-us-section .cs-btn.v2 {
    margin-top: 32px;
  }

  .details-contact h2 {
    font-size: 24px;
    font-family: font700, sans-serif;
  }

  .contact-title h4 {
    font-size: 16px;
    font-family: font700, sans-serif;
  }

  .contact-title p {
    font-size: 14px;
  }

  .cs-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: #FFFFFF;
    border-radius: 50%;
    border: 1px solid var(--border-color);
  }

  .info-contact-block {
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  /* ./contact-us-section */

  /* map */
  .map {
    margin-top: 72px;
    text-align: center;
    width: 100%;
    height: 450px;
    position: relative;
  }
  .map #map{
    width: 100%;
    height: 100%;
  }
.gm-style-iw-d{
    overflow: hidden !important;
}
.gm-style .gm-style-iw-c{
    background-color: transparent;
    box-shadow:none;
    top: 10px;
    left: -8px;
}
.gm-style .gm-style-iw-tc::after{
    height: 0;
}
  .map > #map-img {

    display: none;
  }

  /* ./map */
  /* breadcrumb */
  .breadcrumb {
    background-color: transparent;
    margin-top: 32px;
    padding: 0;
    margin-bottom: 0;
    align-items: center;
  }

  .breadcrumb-item {
    font-family: font500;
  }

  .breadcrumb-item a, .breadcrumb-item a span {
    color: var(--grayColor);
    font-size: 16px;
    display: flex;
    align-items: flex-end;
    transition: var(--trans);
  }



  .fas-breadcrumb::before {
    color: var(--grayColor);
    padding-left: 10px;
    padding-right: 8px;
    line-height: 2;
    font-size: 13px;
  }

  .breadcrumb-item.active {
    color: var(--redColor);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .breadcrumb span {
    padding-inline: 5px;
    color: var(--grayColor);
  }

  /* ./breadcrumb */
  .mt-32 {
    margin-top: 32px !important;
  }

  .mb-100 {
    margin-bottom: 100px;
  }

  .mb-76 {
    margin-bottom: 76px;
  }

  .mt-64 {
    margin-top: 64px !important;
  }

  .mt-80 {
    margin-top: 80px !important;
  }

  .pt-32 {
    padding-top: 32px;
  }

  .when-hover .after-hover {
    display: none;
  }

  .when-hover:hover .after-hover {
    display: inline-block;
  }

  .when-hover:hover .before-hover {
    display: none;
  }

  .icon-input {
    position: relative;
  }

  .icon-input .icon-i {
    position: absolute;
    top: 30px;
    transform: translate(0, -50%);
    right: 26px;
  }

  .icon-input .custom-input {
    text-indent: 46px;
  }

  .icon-input textarea {
    padding-top: 16px;
  }

  .custom-input {
    background-color: white;
    height: 56px;
    font-size: 14px;
    text-indent: 16px;
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
  }

  .custom-select-main svg {
    position: absolute;
    z-index: 99;
    top: 60%;
    left: 32px;
    font-size: 20px;
    transform: translate(0, -50%);
    color: var(--gray);
  }

  #openMenu {
    display: none;
  }

  /* search-section */
  .search-section {
    position: fixed;
    inset: 0;
    background-color: #F8F8F8;
    width: 100%;
    height: 100vh;
    z-index: 99999;
    overflow: hidden;
    padding: 32px;
    display: none;
  }

  .close-search.close {
    width: 40px;
    height: 40px;
    background-color: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    outline: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .search-section .content {
    padding: 60px;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .search-section .content form {
    width: 100%;
  }

  .search-section .content form input {
    height: 52px;
    text-indent: 42px;
    font-size: 14px;
  }

  .cs-button {
    position: relative;
  }

  .cs-button span {
    position: absolute;
    right: 24px;
    top: 11px;
  }

  .cs-button button {
    position: absolute;
    left: 0;
    top: 0;
    height: 52px;
  }

  .suggestion {
    text-align: center;
    margin-top: 32px;
  }

  .suggestion h6 {
    font-size: 16px;
    font-family: font500, sans-serif;
  }

  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 60%;
    margin: 0 auto;
    margin-top: 12px;
    justify-content: center;
    align-items: center;
  }

  .tags .tag {
    width: max-content;
    padding: 9px 20px;
    background-color: white;
  }

  /* ./search-section */

  /* search-page */
  .search-page {
    background-color: #F8F8F8;
    height: 100vh;
    direction: rtl;
  }

  .search-page .header {
    background-color: white;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
    border-bottom: 1px solid var(--border-color);
  }

  .search-page form {
    width: 100%;
  }

  .search-page .custom-input {
    width: 100%;
    direction: rtl;
    text-indent: 46px;
    border: 0;
    outline: none;
    box-shadow: none;
  }

  .search-page .close-search {
    background-color: #F3F4F5;
  }

  .search-page .result {
    display: flex;
    align-items: center;
    margin-top: 32px;
    gap: 5px;
  }

  .search-page .result span:first-child {
    font-size: 15px;
    color: var(--redColor);
    font-family: font500, sans-serif;
  }

  .search-page .result span:last-child {
    font-size: 15px;
    color: var(--grayColor);
  }

  .search-page .cats p:first-child {
    color: var(--redColor);
  }

  .search-page .cats p {
    font-size: 15px;
    color: var(--grayColor);
    font-family: font500, sans-serif;
  }

  /* search-page */

  /* about-page */
  .about-page .img-about {
    position: relative;
    width: 100%;
    height: 362px;
    display: flex;
    align-items: end;
    /* border-top-left-radius: 24px; */
    /* border-bottom-left-radius: 24px; */
    background: white;
    margin-bottom: 0;
    border-radius: 24px;
  }

  /* .about-page .img-about::after {
    position: absolute;
    content: '';
    background-image: url(../images/dots.png);
    background-repeat: no-repeat;
    background-size: auto;
    inset: 0;
    z-index: 99;
    top: -40px;
    left: -40px;
  } */

  .about-page .img-about img {
    width: calc(100% - 32px);
    height: calc(100% - 32px);
    border-top-left-radius: 24px;
    border-bottom-right-radius: 24px;
    border-top: 8px solid var(--redColor);
    border-left: 8px solid var(--redColor);
  }

  .about-page .top-section h4 {
    font-size: 40px;
    font-family: font700, sans-serif;
    margin-bottom: 12px;
    margin-top: 42px;
  }

  .about-page .goles-section {
    margin-top: 72px;
    background-color: white;
    padding: 72px 0;
    border: 1px solid var(--border-color);
  }

  .gole-card {
    background-color: #FDF7E0;
    border-radius: 20px;
    padding: 32px;
    height: 100%;
  }

  .gole-card h4 {
    font-size: 24px;
    font-family: font700, sans-serif;
    margin-top: 12px;
  }

  .gole-card p {
    font-size: 14px;
  }

  .gole-card .cs-icon {
    width: 100px;
    height: 100px;
  }

  .values-section {
    margin-top: 72px;
  }

  .vaules-list {
    margin-bottom: 32px;
  }

  .vaules-list h2 {
    font-size: 24px;
    font-family: font700, sans-serif;
    margin-bottom: 12px;
  }

  .vaules-list .list {
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 16px;
  }

  .vaules-list .list span {
    width: 32px;
    height: 32px;
    display: block;
    background-color: white;
    border: 0.5px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-inline-end: 8px;
    position: absolute;
    top: -5px;
  }

  .vaules-list .list h6, .vaules-list .list p {
    margin-bottom: 0;
  }

  .vaules-list .list h6 {
    font-size: 16px;
    font-family: font500, sans-serif;
    margin-inline-end: 5px;
  }

  .vaules-list .list p {
    font-size: 16px;
  }

  .vaules-list .list div {
    padding-inline-start: 40px;
    flex-wrap: wrap;
  }

  .value-img {
    border-radius: 20px;
    height: 329px;
    width: 100%;
    position: relative;
  }

  .value-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(../images/dots.png);
    background-repeat: no-repeat;
    left: -100px;
    top: -30px;
    z-index: -1;
  }

  .value-img img {
    border-radius: 20px;
    height: 100%;
    width: 100%;
  }

  .values-section .content {
    position: relative;
    padding: 50px 50px 50px 0;
    z-index: 1;
  }

  .values-section .content::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 70%;
    height: 100%;
    background-color: white;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    z-index: -1;
  }

  /* ./about-page */

  /* news-page */
  .news-card-2 {
    display: flex;
    align-items: center;
    gap: 32px;
  }

  .news-card-2 figure {
    border-radius: 20px;
    flex: 1 1 50%;
  }

  .news-card-2 figure img {
    border-radius: 20px;
    width: 100%;
  }

  .news-card-body-2 {
    flex: 1 1 50%;
  }

  .news-card-body-2 .date {
    margin-bottom: 16px;
  }

  .news-card-body-2 h3 {
    font-size: 32px;
    font-family: font700, sans-serif;
  }

  .title-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .title-filter h4 {
    font-size: 32px;
    font-family: font700, sans-serif;
  }

  .nav-search {
    background-color: #FFF;
    display: flex;
    justify-content: space-between;
    color: #8A8A8F;
    border: 1px solid #E7E5EA;
    border-radius: 12px;
    padding: 0 20px;
    height: 50px;
    margin-top: 18px;
    margin-bottom: 18px;
    text-indent: 10px;
  }

  .word-search {
    color: var(--grayColor);
    font-size: 14px;
    margin-bottom: 0;

  }

  .nav-search select {
    border: none;
    font-size: 14px;
  }

  /* ./news-page */

  /* news-details-page */
  .news-details-page .content-top h1 {
    font-size: 40px;
    font-family: font700, sans-serif;
    line-height: 60px;
  }

  .news-details-page .content-top {
    position: relative;
    z-index: 1;
  }

  .news-details-page .content-top::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 70%;
    background-color: #F3F4F5;
    border-bottom: 1px solid var(--border-color);
    top: -32px;
    z-index: -1;
  }

  .news-details-page .news-details-slider figure {
    border-radius: 20px;
    height: 435px;
    border:0.5px solid var(--border-color);
  }

  .news-details-page .news-details-slider figure img {
    border-radius: 20px;
    height: 100%;
  }

  .news-details-slider .owl-dots {
    bottom: 30px;
  }

  .news-details-slider .owl-dots .owl-dot.active span {
    background-color: white;
  }

  .news-details-slider .owl-dots span {
    background-color: rgb(255 255 255 / 40%);
  }

  .news-details-page .content-bottom {
    margin-top: 50px;
  }

  .news-details-page .content-bottom h4 {
    font-size: 24px;
    font-family: font700, sans-serif;
    margin-bottom: 12px;
  }

  .news-details-page .content-bottom p {
    font-size: 14px;
  }

  .news-details-page .content-bottom .f-social {
    display: flex;
    align-items: center;
    padding: 14px 24px;
    border-radius: 18px;
    background-color: white;
  }

  .news-details-page .content-bottom .f-social h6 {
    font-size: 16px;
    margin-bottom: 0;
  }

  .news-details-page .content-bottom .f-social {
    border: 1px solid var(--border-color);
    column-gap: 20px;

  }

  .news-details-page .other-news {
    margin-top: 92px;
  }

  /* ./news-details-page */

  /* library-page */
  .library-page .breadcrumb {
    margin-top: 0;
    padding-top: 32px;
  }

  .library-page .content-top {
    background-color: #F3F4F5;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
  }

  .author-card {
    background-color: white;
    padding: 32px;
    margin-bottom: 24px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    text-align: center;
    position: relative;
    z-index: 2;
    height: 360px;
  }

  .author-card figure {
    border-radius: 50%;
    overflow: hidden;
    border: 8px solid white;
    box-shadow: 3px 4px 23px rgba(193, 197, 210, 0.16);
    margin-bottom: 12px;
    width: 160px;
    height: 160px;
    margin-inline: auto;
  }

  .author-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url(../images/star-book.png);
    background-repeat: no-repeat;
    top: 30px;
    left: 40px;
    z-index: -1;
  }

  .author-card figure img {
    width: 100%;
  }

  .author-card .author-card-body h4 {
    margin-top: 12px;
    font-size: 20px;
    font-family: font500, sans-serif;
    color: var(--blackColor);
  }

  .author-card .author-card-body h6 {
    color: var(--grayColor);
  }

  .author-card .rate {
    justify-content: center;
  }

  .number-of-books {
    font-size: 14px;
    color: var(--redColor);
    margin-bottom: 0;
  }

  .library-page .content-bottom {
    margin-top: 72px;
  }

  .library-page .content-bottom .title-filter .search-input {
    width: 320px;
    margin-bottom: 0px;
  }

  .library-page .content-bottom .title-filter .search-input input {
    height: 52px;
  }

  .library-page .content-bottom .nav-search {
    margin-block: 0;
  }

  .main-filters {
    margin-top: 20px;
    gap: 12px;
    display: flex;
    flex-wrap: wrap;
  }

  .filter-tag {
    border: 1px solid var(--border-color);
    padding: 8px 20px;
    background-color: white;
    border-radius: 10px;
    color: var(--blackColor);
    font-family: font500, sans-serif;
  }

  .filter-tag:hover {
    color: var(--redColor);
  }

  .filter-tag span:last-child {
    display: none;
  }

  .filter-tag.active {
    background-color: var(--redColor);
    border-color: var(--redColor);
    color: white;
  }

  .filter-tag.active span:first-child {
    display: none;
  }

  .filter-tag.active span:last-child {
    display: inline-block;
  }

  .cs-pagination .pagination {
    justify-content: center;
    column-gap: 12px;
  }

  .cs-pagination .pagination .page-link {
    border: 1px solid var(--border-color);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #AEAEB1;
    border-radius: 10px;
  }

  .cs-pagination .pagination .page-link:hover {
    background-color: white;
    color: var(--redColor);
  }

  .cs-pagination .pagination .page-item.active .page-link {
    background-color: var(--redColor);
    border-color: var(--redColor);
    color: white;
  }

  #openFilters {
    display: none;
  }

  /* ./library-page */

  /* authors-page */
  .authors-page .search-input input {
    width: 320px;
    height: 50px;
  }

  .authors-page .nav-search {
    margin-block: 0;
  }

  /* ./authors-page */

  /* book-details-page */
  .book-details-page .top-page {
    padding: 32px;
    border: 1px solid var(--border-color);
    background-color: white;
    border-radius: 20px;
  }

  .book-details-page .top-page figure {
    border: 1px solid var(--border-color);
    background-color: white;
    border-radius: 12px;
    padding: 5px;
  }

  .book-details-page .top-page figure img {
    border-radius: 12px;
    width: 100%;
  }

  .book-details-page .top-page h1 {
    font-size: 24px;
    font-family: font500, sans-serif;
    color: var(--blackColor);
  }

  .book-details-page .top-page h1 span {
    font-size: 16px;
    color: var(--grayColor);
  }

  .book-info {
    margin-top: 1rem;
  }

  .book-info .info {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .book-info .info h6 {
    font-size: 14px;
    color: var(--grayColor);
    margin-bottom: 0;
    flex: 30%;
  }

  .book-info .info a {
    font-family: font500, sans-serif;
    font-size: 14px;
    color: var(--redColor);
    flex: 100%;
  }

  .book-info .info a:hover {
    color: #D51119;
  }

  .book-info .info p {
    font-size: 14px;
    font-family: font500, sans-serif;
    margin-bottom: 0px;
    color: var(--blackColor);
    flex: 100%;
  }

  .book-details-page .cs-btn {
    width: 180px;
  }

  .downloads-reads {
    border: 1px solid var(--border-color);
    padding: 32px 24px;
    border-radius: 16px;
  }

  .downloads-reads h3 {
    font-size: 16px;
    font-family: font500, sans-serif;
    color: var(--blackColor);
  }

  .circle-downloads-reads {
    padding: 5px;
    border: 1px solid var(--blackColor);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .circle-downloads-reads .content {
    background-color: #F8F8F8;
    border: 1px solid var(--border-color);
    width: 110px;
    height: 110px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .circle-downloads-reads .content h6 {
    font-size: 14px;
    font-family: font500, sans-serif;
    margin-top: 8px;
    margin-bottom: 2px;
  }

  .circle-downloads-reads .content p {
    margin-bottom: 0;
    font-family: font700, sans-serif;
    font-size: 16px;
  }

  .downloads-reads .f-social {
    margin-top: 32px;
  }

  .downloads-reads .f-social h6 {
    font-size: 16px;
    font-family: font500, sans-serif;
    color: var(--blackColor);
    margin-bottom: 12px;
  }

  .book-details {
    margin-top: 32px;
    padding: 32px 40px;
    background-color: white;
    border-radius: 20px;
    border: 1px solid var(--border-color);
  }

  .cs-tabs .nav-link {
    font-size: 20px;
    color: var(--grayColor);
    border: 0;
    border-bottom: 2px solid transparent;
  }

  .cs-tabs .nav-link.active {
    color: var(--redColor);
    font-family: font500, sans-serif;
    border-bottom-color: var(--redColor);
  }

  .cs-tabs .nav-tabs {
    border-bottom: 1px solid var(--border-color);
  }

  .tab-pane p {
    font-size: 14px;
  }
  .main-rate {
    display: flex;
    gap: 15px;
    align-items: center;
  }

  .main-rate h5{
    font-size: 52px;
    font-family: font700,sans-serif;
    color: var(--blackColor);
    margin-bottom: 0;
  }
  .main-rate h6{
    font-size: 24px;
    color: var(--blackColor);
    margin-bottom: 0;
  }
  .rate-progress{
    display: flex;
    align-items: center;
    margin-top: 18px;
  }
  .rate-progress p{
    font-size: 16px;
    font-family: font500,sans-serif;
    margin-bottom: 0;
    margin-inline-start: 5px;
  }
  .rate-progress h6{
    font-size: 16px;
    font-family: font500,sans-serif;
    margin-bottom: 0;
    color: var(--grayColor);
  }
  .progress{
    width: 200px;
    height: 10px;
    background-color: #E2E2E2;
    margin-inline: 1rem;
    border-radius: 5px;
  }
  .progress .line{
    background-color: #FFC640;
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }
  .comments{
    margin-top: 32px;
    max-height: 230px;
    overflow-y: auto;
    padding-inline-end: 15px;
  }
  .comment{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    justify-content: space-between;
  }
  .comment h4{
    font-size: 16px;
    font-family: font500,sans-serif;
    margin-bottom: 5px;
  }
  .comment h6{
    font-size: 16px;
    color: var(--grayColor);
    margin-bottom: 0;
  }
  .comment p{
    font-size: 14px;
    color: var(--blackColor);
    margin-bottom: 0;
  }
  .comment .stars{
    margin-bottom: 5px;
  }
  .rate-form .form{
    padding: 32px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
  }
  .rate-form .form label{
    font-size: 14px;
    font-family: font500,sans-serif;
    color: var(--blackColor);
  }
  .rate-form .form .cs-btn{
    height: 52px;
  }
  .rate-form .form h5{
    font-size: 20px;
    font-family: font500,sans-serif;
    color: var(--blackColor);
  }
  .rate-stars svg{
    color: #E2E2E2;
    cursor: pointer;
  }

  .yellow-color{
    color: #FFC640 !important;
  }

  /* ./book-details-page */

  /* author-details-page */
  .media-author {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: white;
    padding: 32px;
    display: flex;
    column-gap: 32px;
  }

  .media-header-author {
    border: 1px solid var(--border-color);
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 32px;
    position: relative;
    z-index: 1;
  }

  .media-header-author figure {
    border-radius: 50%;
    overflow: hidden;
    border: 8px solid white;
    box-shadow: 3px 4px 23px rgb(193 197 210 / 16%);
    margin-bottom: 12px;
    width: 160px;
    height: 160px;
    margin-inline: auto;
    margin-bottom: 0;
  }

  .media-header-author::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url(../images/stars-2.svg);
    background-repeat: no-repeat;
    top: 30px;
    left: 40px;
    z-index: -1;
  }
  .media-author .media-body-author h4{
    font-size: 24px;
    font-family: font500,sans-serif;
    color: var(--blackColor);
  }
  .media-author .media-body-author h6{
    margin-top: 16px;
    font-size: 14px;
    color: var(--grayColor);
  }
  .media-author .media-body-author p{
    color: var(--blackColor);
    font-size: 14px;
    width: 69%;
  }
  /* ./author-details-page */
  .custom-modal{
    background-color: rgba(0, 0, 0, 0.4);
  }
  .custom-modal .modal-header {
    border-bottom: none;
    margin-bottom: -20px;
    padding: 24px;
  }

  .custom-modal .modal-content {
    border-radius: 20px;
    border: none;
    box-shadow: -5px 0px 50px rgb(120 138 156 / 20%);
  }

  .custom-modal .modal-header .close {
    background: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    outline: none;
    opacity: 1;
    color: var(--blackColor);
    z-index: 99;
    font-size: 30px;
    margin-inline-start: auto;
    border: 1px solid var(--border-color);
  }

  .custom-modal.success .modal-body {
    text-align: center;
    margin-top: -25px;
    padding: 24px;
    margin-bottom: 25px;
  }

  .custom-modal.success .modal-body h3 {
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 16px;
    font-family: font500;
  }

  .custom-modal.success .modal-body .custom-botton {
    min-width: 50%;
    margin: 0 auto;
    margin-bottom: 40px;
    width: 50%;
  }

  .custom-modal.success .modal-body p {
    font-size: 16px;
    color: var(--grayColor);
    margin: auto;
    margin-bottom: 40px;
    width: 70%;
  }
  .custom-modal.success .cs-btn{
    height: 52px;
    width: 200px;
    margin: 0 auto;
  }
  .custom-modal .custom-btn.v2 {
    width: 200px;
    margin: 0 auto;
  }

  @media (min-width: 992px) {
    .custom-modal.success .modal-lg, .custom-modal.success .modal-xl {
      max-width: 600px;
    }
  }

  /* responsive */
  @media (min-width: 1600px) {}
  @media (min-width: 1024px) {
      .w-lg-50{
          width: 50%;
      }
  }
  @media (min-width: 1280px) {
    .videos-slider .owl-item.active {
      width: 400px !important;
    }

  }

  @media (min-width: 1300px) {
    .videos-slider .owl-item.active {
      width: 450px !important;
    }
  }

  @media (min-width:1920px) {
    .videos-slider .owl-item.active {
      width: 530px !important;
    }

    .videos-slider {
      height: 380px;
    }

    .video-card {
      height: 100% !important;
    }
  }

  @media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
      max-width: 1170px;
    }

    .mt-lg-50 {
      margin-top: 50px !important;
    }

    .mt-lg-40 {
      margin-top: 40px;
    }

  }

  @media (max-width: 1280px) {

    .video-play {
      width: 47px;
      height: 45px;
    }

    .video-play::after {
      width: 56px;
      height: 56px;
    }

    .video-card .video-card-body {
      bottom: 47px;
    }

    .video-card .video-card-body h4 {
      font-size: 18px;
    }

    .videos-slider.owl-slider .owl-nav .owl-next {
      left: 70px;
    }

    .video-play svg {
      width: 14px;
    }

    .map img {
      width: 100%;
    }
  }

  @media (max-width: 1024px) {


    .main-header .cs-dropdown .dropdown button {
      font-size: 12px;
    }

    .main-header .navbar-nav .nav-link {
      font-size: 12px;
    }

    .logo img {
      width: 150px;
    }

    .slider-section .content .text h4 {
      font-size: 32px;
    }

    .slider-section .content .text p {
      font-size: 14px;
    }

    .slider-img, .slider-img img {
      height: 100%;
    }

    .cs-btn {
      font-size: 16px;
    }

    .title h2 {
      font-size: 32px;
    }

    .category-card h4 {
      font-size: 14px;
    }

    .category-card {
      padding: 24px;
      min-height: 190px;
    }

    .numbers-section .content h4 {
      font-size: 24px;
    }

    .numbers-section .content h6 {
      font-size: 13px;
    }

    .book-card {
      height: 450px;
      overflow: hidden;
    }

    .circle-downloads-reads {
      width: 100px;
      height: 100px;
    }

    .circle-downloads-reads .content {
      width: 90px;
      height: 90px;
    }

    .circle-downloads-reads .content span {
      width: 25px;
      height: 25px;
    }

    .circle-downloads-reads .content p {
      font-size: 14px;
    }

    .downloads-reads {
      text-align: center;
      margin-top: 32px;
    }
    .media-author .media-body-author p{
      width: auto;
    }
  }

  @media (min-width: 992px) {}

  @media (max-width: 991px) {
    .main-header .navbar {
      display: none;
    }

    #openMenu {
      display: block;
    }

    .side-menu nav>ul li a {
      font-size: 16px;
    }

    .underline_header_titles.active .nav-link::after {
      content: unset;
    }

    .side-menu .cs-dropdown .dropdown button {
      font-size: 16px;
      color: var(--blackColor);
      font-family: font500, sans-serif;
      padding-inline: 0;
    }

    .cs-dropdown .dropdown-item {
      margin-bottom: 8px;
    }

    .cs-dropdown .dropdown-menu {
      padding: 16px 16px 0px;
    }

    .slider-img {
      margin-top: 32px;
    }

    .categories-section {
      padding-top: 60px;
    }

    .videos-section {
      margin-top: 60px;
    }

    .numbers-section .content h3 {
      margin-bottom: 32px;
      width: 100%;
    }

    .video-play {
      width: 40px;
      height: 40px;
    }

    .video-play svg {
      width: 12px;
    }

    .video-play::after {
      width: 50px;
      height: 50px;
    }

    .video-card .video-card-body {
      bottom: 77px;
    }

    .video-card .video-card-body h4 {
      font-size: 16px;
    }

    .videos-slider.owl-slider .owl-nav .owl-next {
      left: 10px;
    }

    .videos-slider.owl-slider .owl-nav .owl-prev {
      right: 10px;
    }

    .owl-slider .owl-nav {
      top: 40%;
    }

    .contact-us-short-section figure {
      height: 100px;
    }

    .contact-us-short-section figure img {
      height: 100%;
    }

    .contact-us-short-section p {
      font-size: 14px;
    }

    .contact-us-short-section h4 {
      font-size: 27px;
    }

    .contact-us-short-section figure {
      height: 150px;
    }

    .contact-us-short-section figure {
      margin-top: 10px;
    }

    .book-card {
      height: auto;
    }

    .contact-us-section .form {
      margin-top: 32px;
    }

    .values-section .content::after {
      width: 100%;
    }

    .filters {
      position: fixed;
      z-index: 9999;
      inset: 0px;
      border-radius: 0px;
      width: 400px;
      height: 100vh;
      overflow: auto;
      right: -900px;
      transition: var(--trans);
    }

    .close-btn-filter {
      display: flex;
      text-align: end;
      border: 1px solid var(--border-color);
      border-radius: 50%;
      width: 30px;
      height: 30px;
      align-items: center;
      justify-content: center;
      margin-inline: auto 0;
      background-color: var(--border-color);
      cursor: pointer;
    }

    #openFilters {
      display: inline;
      background: white;
      border-radius: 10px;
      margin-bottom: 20px;

    }
    .rate-form .form{
      margin-top: 32px;
    }
    .news-card figure{
        height: auto;
    }
    /* .cs-dropdown .dropdown-menu{
        right: 75px;
    } */
    .cs-dropdown .dropdown-item{
        white-space: break-spaces;
    }
  }

  @media (max-width: 768px) {
    .news-card-2 {
      flex-direction: column;
      gap: 0;
      align-items: flex-start;
    }

    .news-card-body-2 {
      padding: 32px;
    }

    .news-details-page .content-top h1 {
      font-size: 32px;
    }
    .news-details-page .news-details-slider figure{
        height: 275px;
    }
  }

  @media (max-width: 767px) {
    .gole-card {
      height: auto;
    }
    .media-author{
      flex-direction: column;
    }
    .media-author .media-header-author{
      width: auto;
    }
  }

  @media (max-width: 575px) {
    .slider-section .content {
      margin-inline: 0;
    }

    .slider-section .content .text h4 {
      font-size: 27px;
    }

    .title h2 {
      font-size: 27px;
    }

    .category-card {
      padding: 16px;
    }

    .contact-us-short-section {
      margin-top: 92px;
      height: auto;
      text-align: center;
    }

    .contact-us-short-section .d-flex {
      flex-direction: column;
      padding: 16px;
    }

    .ads-section .cs-btn {
      margin: 0 auto;
    }

    .contact-us-section .form {
      padding: 24px;
    }

    .main-footer .f-top {
      text-align: center;
    }

    .f-social {
      margin-bottom: 32px;
    }

    .f-widget .title {
      text-align: center !important;
    }

    .main-footer {
      padding-top: 32px;
    }

    .search-page .header {
      height: 90px;
    }

    .close-search.close {
      position: absolute;
      left: 0;
      margin-inline-end: 30px;
    }

    .cs-button button {
      position: initial;
      width: 100%;
      margin-top: 10px;
    }

    .search-section .content {
      padding: 0;
    }

    .search-section {
      padding: 16px;
    }

    .tags {
      width: 100%;
    }

    .gole-card {
      height: auto;
    }

    .values-section .content {
      padding: 32px;
    }

    .value-img {
      height: auto;
    }

    .about-page .img-about {
      height: auto;
    }

    .news-card-body-2 {
      padding: 0;
    }

    .news-card-body-2 h3 {
      font-size: 24px;
    }

    .news-card-body-2 .content {
      font-size: 14px;
    }

    .title-filter {
      flex-wrap: wrap;
    }

    .title-filter h4 {
      font-size: 24px;
    }

    .f-maillist .maillist-wrapper>svg {
      margin: 12px 10px;
    }

    .news-details-page .content-top h1 {
      font-size: 24px;
      line-height: auto;
    }

    .news-details-page .content-bottom .f-social {
      gap: 15px;
      flex-wrap: wrap;
    }

    .media-author .media-body-author{
      margin-top: 32px;
    }
    .media-header-author::after{
      top: 42px;
      left: 48px;
    }
    .book-details{
      padding: 22px;
    }
    .rate-form .form{
      padding: 22px;
    }
    .owl-slider .owl-nav .owl-prev,.owl-slider .owl-nav .owl-next{
        display: none;
    }
    /* .cs-dropdown .dropdown-menu{
        right: 25px;
    } */
    .video-card figure{
        height: auto;
        max-height: 300px;
        height: 260px;
    }
    /* .video-card figure{
        height: 100%;
        max-height: 100%;
    } */
    .owl-slider .owl-dots{
        bottom: 0;
    }
    .news-card figure img{
        width: 100%;
    }
  }

  @media (max-width: 480px) {}

  @media (max-width: 320px) {}

  /* responsive*/

  label.error{
      color: var(--redColor) !important;
  }
  #mailinglist{
      position: relative;
  }
  #mailinglist label.error{
      position: absolute;
      bottom: -40px;
  }

  .vaules-list ul,.vaules-list ol {
      list-style: decimal;
      margin-inline-start: -10px;
  }
  .vaules-list ul li,.vaules-list ol li{
      position: relative;
      margin-top: 1rem;
      padding-inline-start: 1rem;
  }
  .vaules-list ul li::after,.vaules-list ol li::after{
      content: '';
      width: 32px;
      height: 32px;
      border: 0.5px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      margin-inline-end: 8px;
      position: absolute;
      top: -3px;
      right: -28px;
  }
  .vaules-list ul,.vaules-list ol {
      margin-inline-start: 10px;
  }
  .vaules-list li{
      font-family: font400,sans-serif !important;
  }
  .static-page .content-top::after{
    content: unset;
  }
  .authors .cs-checkbox-1{
    padding-inline-start: 62px;
  }
  .authors .cs-checkbox-1 figure{
    width: 20px;
    height: 20px;
    position: absolute;
    right: 34px;
    top: 3px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    margin-bottom: 0;
    overflow: hidden;
  }

  .authors .cs-checkbox-1 figure img{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    position: absolute;
  }