@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
 :root { --system-font: "Open Sans", sans-serif; --primary: #00c2a9; --secondary: #eefffd; --accent: #EDFFFC; --shadow: rgba(0, 0, 0, 0.2) 0 0 10px; --black: #000; --white: #fff; --big-shadow: #C9D4D9 0 0 90px; --grey: #666666; --silver: #F5F5F5; }
iframe { vertical-align: middle; }
body {overflow-x: hidden;}
body,
html {  font-family: var(--system-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; min-height: 100%; }
.small-shadow { box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2) }
.orchestra-shadow { box-shadow: var(--shadow) }
.primary-text { color: var(--primary); }
.white-text,
.light-text { color: var(--white); }
.primary { background-color: var(--primary); }
.accent { background-color: var(--accent); }
.white { background-color: var(--white); }
.black { background-color: var(--black); }
.black-text { color: var(--black); }
.silver { background-color: var(--silver); }
.mh100p { min-height: 100%; }
.mask { background-color: var(--black); opacity: 0.6; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
body { font-family: var(--system-font); font-size: 16px; font-weight: 400; -webkit-animation: fadeinout .3s ease-in 1 forwards; animation: fadeinout .3s ease-in 1 forwards; }
@-webkit-keyframes fadeinout { 0% { opacity: 0 }
100% { opacity: 1 }
; }
@keyframes fadeinout {
 0% { opacity: 0 }
100% { opacity: 1 }
; }
.flex-col { float: none !important; flex-direction: row; }
.flex-row { display: flex; }
.flex1 { flex: 1; }
.v-center { top: 50%; position: relative; transform: translateY(-50%); }
.vcenter-items { align-items: center; }
.lngbar { position: absolute; top: 15px; right: 60px; z-index: 30; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear; }
.lngbar .lng { width: 30px; height: 30px; text-align: center; line-height: 30px; color: var(--white); font-weight: 600; background-color: var(--accent); font-size: 0.9em; }
.lngbar ul { list-style: none; position: absolute; top: 30px; left: 0; background-color: var(--silver); width: 30px; text-align: center; opacity: 0; height: 0px; overflow: hidden; -o-transition: all .2s ease; -moz-transition: all .2s ease; -webkit-transition: all .2s ease; }
.lngbar ul.open { opacity: 100; -o-transition: all .2s ease; -moz-transition: all .2s ease; -webkit-transition: all .2s ease; height: auto; }
.lngbar ul li { color: #000; cursor: pointer; height: 30px; line-height: 30px; -o-transition: all .2s ease; -moz-transition: all .2s ease; -webkit-transition: all .2s ease; }
.lngbar ul li:hover { color: var(--black); background-color: var(--primary); -o-transition: all .2s ease; -moz-transition: all .2s ease; -webkit-transition: all .2s ease; }
.lngbar ul li:hover a { color: var(--white); }
.lngbar ul li a { text-decoration: none; color: #000; font-size: 0.8em; font-weight: 400; }
.lngbar .select { border-color: var(--primary) transparent; border-style: solid solid none; border-width: 5px 5px medium; height: 5px; right: -12px; position: absolute; top: 12px; width: 0; text-decoration: none; color: var(--black); }
.editable { display: contents; }
.cmspage .wraper { margin: auto; }
.cmspage p { margin-bottom: 10px; }
.cmspage ul,
.cmspage ol { margin-bottom: 10px; padding-left: 20px; line-height: 1.5; }
/* .cmspage h2 { margin-bottom: 30px; }
.cmspage h3 { margin-bottom: 15px; font-size: 1.4em; font-weight: 700; }
*/

.cmspage table {border-collapse: collapse; width: 100%; margin-bottom: 20px; }
.cmspage table td { padding-bottom: 10px;padding-top: 20px;}
.cmspage table td:last-of-type { color: var(--grey);}
.cmspage table tr { border-bottom: solid 1px var(--silver);}
.wraper { max-width: 1500px; }
header { width: 100%; position: fixed; top: 0; z-index: 200; background-color: var(--white); color: var(--grey); }
header nav { display: flex; justify-content: end; align-items: center; }
header nav ul { display: flex; justify-content: end; align-items: center; gap: 8px }
header nav ul li { display: inline-block;position: relative;}
header nav ul li ul li {width: 100%;}
header nav ul li>a:hover, footer ul li>a:hover { color: var(--primary); }
header nav ul li a { display: block; line-height: 50px; opacity: 0.7;  padding-left: 10px; padding-right: 10px; }
header nav>ul>li:last-child { display: none; border: 1px solid var(--primary); padding-left: 15px; padding-right: 15px; border-radius: 50px; margin-right: 0; background-color: var(--white); }
header nav>ul>li:last-child:hover { background-color: var(--accent); color: var(--white); border-color: var(--accent); }                          
header nav>ul>li:last-child a:hover { color: var(--white); }
header nav ul li ul { position: absolute; display: none; padding: 20px; background-color: var(--white); border-radius: 10px; z-index: 50; width: max-content; transform: translate(-8%, 0); }
header nav ul li:hover ul { display: flex; flex-direction: column; align-items: start; padding-block: 20px; top: 40px;}
header .nav-tools { top: 0px; right: 0px; }
footer ul { display: flex; flex-direction: column; gap: 10px; }
#team-page .row { margin-bottom: 3%; }
/* #our-team-home .our-team-cards > .row { display: flex; width: 75%; margin-bottom: 0 !important; } */
.our-team-cards article { 
    /* box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);  */
    border-radius: 10px; height: 100%; /* overflow: hidden; */ position: relative;}
.our-team-cards article:hover .apply { display: block; background: var(--primary); color: var(--white); border-radius: 40px; display: flex; padding-block: 12px; padding-inline: 23px; justify-self: start; }
.our-team-cards article:hover .card-info { position: absolute; background: var(--white); width: 100%; z-index: 30; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; padding-bottom: 25px; box-shadow: 5px 5px 10px rgba(0,0,0,0.1), -5px 5px 10px rgba(0,0,0,0.1); }
.our-team-cards article:only-of-type:hover {margin-bottom: 65%;}
.our-team-cards article:hover .apply img { filter: brightness(0) invert(1); }
.our-team-cards article .read-more,
.our-team-cards article .apply,
.our-team-cards article .date { display: none; }
.our-team-cards article .img img { width: 100%; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.our-team-cards article .keywords { margin-top: 10px; color: var(--primary); }
.our-team-cards article .descr { color: var(--grey); }
.our-team-cards article .title { font-size: 21px; font-weight: 600; margin-bottom: 6px; }
.our-team-cards article .card-info { padding: 20px; }
#accordion article {box-shadow: var(--shadow); border-radius: 10px; overflow: hidden;}
#accordion article.opened {box-shadow: var(--shadow); border-radius: 10px; overflow: hidden;}
#accordion article button { padding-inline: 20px;padding-block: 15px;}
#accordion article .accordion-content {padding-inline: 20px;padding-block: 15px;}


header nav ul li {display: flex; align-items: center;}
header nav ul li:has(ul)::after { content: url('/public/images/arrow-down-svgrepo-com.svg'); font-size: 0.7em; position: relative; width: 24px; height: 24px; }

@keyframes smooth-left-appear {
    to{
        left: 0px;
        opacity:1;
    }
}
.left-appear {
    position: relative;
    left: -100%;
    opacity:0;
     animation: smooth-left-appear 2.5s ease forwards;
}


@keyframes smooth-right-appear {
    to{

        right: 0px;
        opacity:1;
    }
}
.right-appear {
    position: relative;
    right: -100%;
    opacity:0;
    animation: smooth-right-appear 3s ease forwards;
}


.reveal {
    position: relative;
    opacity: 0;
  }
  
  .reveal.active {
    opacity: 1;
  }
  .active.left-appear-scroll {
    animation: left-appear 1s ease-in;
  }
  
  @keyframes left-appear {
    0% {
      transform: translateX(-100px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }

  .active.right-appear-scroll {
    animation: right-appear 1s ease-in;
  }
  
  @keyframes right-appear {
    0% {
      transform: translateX(100px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }

  /* Up appear scroll */
.active.up-appear-scroll {
    animation: up-appear 1s ease-in;
}

@keyframes up-appear {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Down appear scroll */
.active.down-appear-scroll {
    animation: down-appear 1s ease-in;
}

@keyframes down-appear {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@media screen and (min-width: 1024px) {
    .header-hidden > *:first-child { position: absolute; top: -200px; transition: top 1s; }
    .header-visible > *:first-child { position: relative; top: 0px; transition: top 1s; }

    .header-hidden > *:nth-child(2) img.logo { width: 100px; transition: width 1s}
    .header-visible > *:nth-child(2) img.logo {  width: 130px; transition: width 1s}
}


.certificates-gallery img {margin: auto; box-shadow: var(--shadow);}
.certificates-gallery > *{background: var(--white);}

.responsive-row { display: flex; flex-wrap: wrap; gap: 1rem;
    box-sizing: border-box; margin: 0; }
.responsive-row>[class*="col-"] { box-sizing: border-box; flex: 0 0 auto;
    margin-left: 0; }
.slick-dots { display: flex !important; flex-wrap: wrap; flex-direction: row !important; justify-content: center; align-items: center; list-style: none; padding: 0; margin: 40px 0 10px 0; }
.slick-dots li { margin: 0 8px; border-radius: 100%; display: flex; justify-content: center; border: 1px solid var(--primary); align-items: center; padding: 5px; }
.slick-dots li button { border-radius: 100%; font-size: 0; width: 5px; height: 5px; background: var(--white); border: none; padding: 0; cursor: pointer; }
.slick-dots li.slick-active button { width: 12px; height: 12px; background: var(--primary); }
.slick-dots li.slick-active button:before { background-color: var(--primary); transform: scale(1.2); }
.slick-dots li button:before { content: ''; display: block; width: 10px; height: 10px; background-color: var(--grey); border-radius: 50%; transition: background-color 0.3s ease, transform 0.3s ease; }
.news-catalog article { display: flex; align-items: center; gap: 30px; }
.news-catalog article .img { border-radius: 10px; flex-shrink: 0; overflow: hidden; }
.news-catalog article .descr { color: var(--grey); }
.news-catalog article .title { font-size: 1.3rem; font-weight: bold; margin-bottom: 8px; }
.news-catalog article .date,
.news-catalog article .apply { display: none; }

.news-catalog-col article { display: flex;flex-direction: column; align-items: center; gap: 10px; }
.news-catalog-col article .img { border-radius: 10px; flex-shrink: 0; overflow: hidden; }
.news-catalog-col article .descr { color: var(--grey); }
.news-catalog-col article .title { font-size: 1.3rem; font-weight: bold; margin-bottom: 8px; }
.news-catalog-col article .date,
.news-catalog-col article .apply { display: none; }

    .slick-team .slick-track {display: flex; gap: 30px;}
    .slick-team .slick-list {overflow: visible;}
@media (max-width:1024px) {
 .news-catalog .row { flex-direction: column; margin-bottom: 0; }
.news-catalog article { flex-direction: column; width: 100% !important; margin-left: 0 !important; ; margin-bottom: 30px; }
.news-catalog article .img,
    .news-catalog article .img img { width: 100%; }
.responsive-row > [class*="col-"] { flex: 0 0 100%; width: 100%; }
.menu-call { width: 30px; position: relative; z-index: 101; cursor: pointer; padding-top: 10px; padding-bottom: 10px; }
.menu-call span { width: 100%; height: 3px; background-color: var(--primary); top: 0; right: 0; display: block; -moz-transition: all .2s linear; -webkit-transition: all .2s linear }
.menu-call span:before { content: ''; height: 3px; width: 100%; margin-bottom: 5px; display: block; background-color: var(--black); position: absolute; top: 0; -moz-transition: all .2s linear; -webkit-transition: all .2s linear }
.menu-call span:after { content: ''; height: 3px; width: 100%; margin-top: 5px; display: block; background-color: var(--black); position: absolute; bottom: 0; -moz-transition: all .2s linear; -webkit-transition: all .2s linear }
.menu-call.open span { -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; width: 0 }
.menu-call.open span:before,
    .menu-call.open span:after { content: ''; height: 2px; width: 100%; display: block; position: absolute; top: 8px; -webkit-transform: rotate(45deg); -moz-transition: all .2s linear; -webkit-transition: all .2s linear }
.menu-call.open span:before { transform: rotate(45deg); }
.menu-call.open span:after { transform: rotate(-45deg); margin-top: 0px; }
.menu-call span:before,
    .menu-call span:after,
    .menu-call.open span:before,
    .menu-call.open span:after { background-color: var(--primary); }
.mobile-menu { display: hidden; position: fixed; width: 100%; height: 100%; background-color: var(--silver); z-index: 99; transform: perspective(50em) rotateX(-90deg); transform-origin: 50% 0; -o-transition: all .8s ease; -moz-transition: all .8s ease; -webkit-transition: all .8s ease; transition: all .8s ease }
.mobile-menu .logo { max-width: 70%; float: left; margin-top: -8px; }
/* .mobile-menu * { opacity:0; -o-transition:all .8s ease; -moz-transition:all .8s ease; -webkit-transition:all .8s ease; transition:all .8s ease }
*/

.mobile-menu {

  top: 60px; /* below your header or button */
  left: 0;
  right: 0;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.5s ease;
  border-radius: 0 0 10px 10px;
}

/* When open, drop down */
.mobile-menu.open {
  max-height: 100%;
  opacity: 1;
  transform: translateY(0);
}


    /* .mobile-menu.open { left: 0; right: 0; transform: perspective(50em) rotatey(0deg); height: fit-content; min-height: -webkit-fill-available; -o-transition: all .8s ease; -moz-transition: all .8s ease; -webkit-transition: all .8s ease; transition: all .8s ease } */
/* .mobile-menu.open * { opacity:100; -o-transition:all .8s ease; -moz-transition:all .8s ease; -webkit-transition:all .8s ease; transition:all .8s ease }
*/
    .mobile-menu ul { list-style: none; display: flex; flex-direction: column; }
.mobile-menu ul li>ul { padding-inline: 20px; padding-bottom: 20px; display: none; background-color: var(--white); }
/* .mobile-menu ul li:hover > ul { display:block; transition: visibility 0s, opacity 0.5s linear; }
*/
    .mobile-menu>nav ul li a { text-align: start; }
.mobile-menu ul a { padding-left: 40px; z-index: 99;max-width: 85%;width: fit-content;; font-size: 1em; line-height: 30px; position: relative; display: block; background: var(--white); -webkit-background-clip: text; font-weight: 500; text-decoration: none; text-align: center; padding-block: 10px }
/* .mobile-menu ul a:after { content:''; height:1px; width:0; background-color:var(--white); bottom:0; left:0; position:absolute; -o-transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; transition:all .2s linear }
*/
.mobile-menu ul li {position: relative;}
    .mobile-menu ul li:has(ul)::after { content: url('/public/images/arrow-down-svgrepo-com.svg'); font-size: 0.7em; position: absolute; right: 15px; top: 20px; width: 24px; transform: translateY(-50%); height: 24px; }
.mobile-menu ul ul li a::after { position: absolute; height: 2px; width: 0%; margin: auto; content: ''; display: block; background-color: var(--darkYellow); left: 1%; right: 1%; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear; }
.mobile-menu ul ul li a:hover::after,
    .mobile-menu ul ul li a:active::after { width: 50%; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear; }
.mobile-menu ul ul a { font-size: 1em; opacity: 100%; }
.mobile-menu ul ul a:hover { font-weight: bold; }

.our-team-cards article {margin-left: 0 !important;}
.wraper { min-width: 95%; }
.news-catalog-col .row {
    flex-direction: column;
    display: flex;
    align-items: center;
    gap: 10px;
}
.news-catalog-col .row article[class*='col']{
    align-items: center;
    width: 100%;
}
}