* {
   box-sizing: border-box;
   font-family: "Roboto", sans-serif;
   color: #201e22;
}

h1,
h2,
h3,
h4,
p,
a {
   font-family: "Roboto", sans-serif;
   color: #201e22;
}

.above-button {
   padding-bottom: 20px;
}

.default-middle-text {
   padding-bottom: 20px;
   font-weight: 400;
   font-size: 22px;
   line-height: 28px;
}

.logo {
   font-weight: 700;
   font-size: 20px;
   line-height: 24px;
   letter-spacing: -0.075em;
}

.logo:hover {
   text-decoration: none;
}

.heading {
   margin: 0;
   font-weight: 400;
   font-size: 56px;
   line-height: 60px;
   max-width: 1077px;
   text-align: center;
}

.bold-text {
   line-height: 67px;
   font-weight: 700;
}

.default-section-heading {
   padding-bottom: 16px;
   max-width: none;
   position: relative;

   display: inline-block;
}

.default-section {
   padding-top: 130px;
   padding-bottom: 130px;
}

.section-title {
   padding-bottom: 64px;
}

.uk-icon-button {
   background: linear-gradient(90deg, #e6fdfc, #fbe1e4);
   color: #333;
   box-shadow: 0px 0px 15px 1px rgb(0 0 0 / 12%);
}

.uk-icon-button.uk-icon:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) {
   stroke: #333;
}

.uk-icon-button svg {
   transform: scale(0.5);
}

.uk-icon-button:hover,
.uk-icon-button:active {
   background-color: #f1c3ca;
}

.uk-icon:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) {
   stroke: #ffffff;
}

a:hover {
   text-decoration: none;
}

.custom-modal-icon {
   top: 20px;
   right: 20px;
   padding: 16px;
   border-radius: 50%;
   background: #fff;
   color: #000;
}

.custom-modal-icon.uk-icon:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) {
   stroke: #000;
}

.znachki {
   background: linear-gradient(90deg, #fbe1e4, #e6fdfc);
   position: fixed;
   right: 50px;
   top: calc((100vh / 2) - 50px);
   transform: scale(2);
   z-index: 2;
}

.znachki.mail {
   top: calc(100vh / 2 + 50px);
}

/* header */
header {
   padding-top: 5px;
   background-color: #201e22;
}

header .logo {
   color: #000000;
}

.img-logo {
   margin-right: 10px;
   width: 250px;
   height: auto;
}

.socials {
   display: flex;
   margin: 0;
}

.socials a:not(:last-child) {
   margin-right: 8px;
}

/* first section */

section.main-scene {
   padding-top: 80px;
   text-align: center;
   overflow-x: hidden;
   background-color: #201e22;
}

.main-scene .heading {
   font-size: 30px;
   line-height: 35px;
   margin: 0 auto;
   max-width: 600px;
   color: #ffffff;
}

.main-scene .counter {
   position: relative;
   margin: 0 auto;
   margin-bottom: 40px;
   padding: 14px 50px;
   border-radius: 20px;
   overflow: hidden;
   /* background: rgb(0 68 255 / 3%); */
}

.counter .description-number {
   font-weight: 700;
   font-size: 24px;
   line-height: 30px;
   margin: 6px 0;
   padding: 0 5px;
   color: #ffffff;
}

.counter .description-text {
   font-weight: 400;
   font-size: 17px;
   line-height: 17px;
   margin: 0;
   padding: 0 5px;
   color: #ffffff;
}

/* about us section */
section.about-us {
   padding-bottom: 66px;
   padding-top: 50px;
   display: flex;
   align-items: center;
}

.about-us .heading {
   padding-top: 28px;
}

.about-us .phone-slider {
   padding-bottom: 128px;
}

.video-cont {
   position: relative;
   max-width: fit-content;
   margin: 0 auto;
}

.about-us .video-frame {
   width: 323px;
   height: 655px;
   background-image: url(../images/iphone.svg);
   background-size: contain;
   background-repeat: no-repeat;
   position: relative;
   margin: 0;
   pointer-events: none;
   z-index: 1;
}

.tiktok-info {
   display: flex;
   flex-direction: column;
   align-content: space-between;
   height: 100%;
   width: 100%;
   position: absolute;
   justify-content: space-between;
   padding: 50px 20px 30px;
}

.tiktok-info .uk-icon:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) {
   stroke: #ffffff;
}

.subscriptions,
.subscriptions b,
.icon-number,
.tiktok-username,
.tiktok-views {
   margin: 0;
   font-weight: 400;
   font-size: 16px;
   line-height: 20px;
   color: #ffffff;
   text-shadow: 0px 0px 25px black;
}

.subscriptions .subscriptions-suscr {
   color: #ffffff;
}

.subscriptions .subscriptions-rec {
   color: #ffffff;
   text-shadow: 0px 0px 25px black;
   font-weight: 700;
   letter-spacing: 0.6px;
}

.subscriptions .subscriptions-divider {
   color: #aeaeae;
   opacity: 0.3;
}

.icon-number {
   padding-top: 8px;
}

.lower-part {
   display: flex;
   flex-direction: row;
   align-items: flex-end;
   justify-content: space-around;
}

.likes-comments {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   text-align: center;
   margin-left: 24px;
   align-items: flex-end;
}

.likes-comments .likes-comment-item {
   position: relative;
   margin-bottom: 10px;
   padding-bottom: 23px;
}

.likes-comments .likes-comment-item img {
   border-radius: 50%;
}

.likes-comments .likes-comment-item p {
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   font-size: 13px;
   text-shadow: 0px 0px 10px black;
}

.likes-comments .likes-comment-item:last-child {
   margin-bottom: 0px;
}

.video-cont .tiktok-link {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   pointer-events: fill;
   pointer-events: none;
}

video {
   width: 312px;
   height: 648px;
   border-radius: 45px;
   position: absolute;
   left: 2%;
   top: 0;
   background: black;
   object-fit: cover;
}

.about-us .active .tiktok-link {
   pointer-events: initial;
}

.phone-slider .uk-slider-items > li > div {
   transform: scale(0.5);
   filter: blur(8px);

   transition: 0.2s;
}

.phone-slider .uk-slider-items .active > div {
   transform: none;
   filter: none;

   transition: 0.5s;
}

.about-us .description {
   margin: 0 auto;
   font-weight: 400;
   font-size: 20px;
   line-height: 32px;
   color: #201e22;
   max-width: 1000px;
   text-align: justify;
}

/* team section */
.team {
   background-color: #201e22;
   padding-top: 0;
}

.team .heading {
   color: #ffffff;
}

.team .panel {
   height: 310px;
   border-radius: 9px;
   position: relative;
   overflow: hidden;
}

.photo-team {
   width: 200px;
   height: 250px;
   border-radius: 9px;
   object-fit: cover;
}

.team .team-name {
   font-weight: 700;
   font-size: 20px;
   line-height: 24px;
   color: #ffffff;
   margin: 0;
   padding-top: 20px;
   padding-bottom: 4px;
   text-align: center;
}

.team .team-position {
   font-weight: 400;
   font-size: 14px;
   line-height: 20px;
   margin: 0;
   text-align: center;
   color: #ffffff;
}

/* .team .red-text {
    color: #FF004F;
}

.team .purple-text {
    color: #8C43EA;
}

.team .blue-text {
    color: #3381ad;
}

.team .green-text {
    color: #41a54b;
}

.team .yellow-text {
    color: #dd7600;
} */

.uk-slider-items > :focus-visible {
   outline: 0;
   outline: -webkit-focus-ring-color auto 0px;
}

/* works */

.img-tiktok-icons {
   width: 42px;
   height: 42px;
}

/* portfolio */

.default-section.portfolio {
   padding-top: 0;
   background-color: #201e22;
   padding-top: 60px;
   padding-bottom: 70px;
}

.default-section.portfolio .heading {
   color: #ffffff;
}

.portfolio {
   overflow: hidden;
}

.row {
   display: flex;
   justify-content: center;
}

/* .row.for-insert {
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

} */

.item {
   width: 150px;
   box-shadow: 0px 0px 15px 1px rgb(0 0 0 / 12%);
   height: 150px;
   background-color: rgb(255, 255, 255);
   border-radius: 50%;
   margin-left: 5px;
   margin-bottom: 5px;
   transition: 0.5s ease;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   overflow: hidden;
   position: relative;
   cursor: pointer;
   z-index: 1;
}

.item.active-item {
   width: 700px;
   height: 700px;
   padding: 90px;
   z-index: 2;
   margin-left: 0;
   /* transform-origin: 0% 0%; */
}

.item.closing {
   transition: 0.3s ease;
   transform: translateY(-100px);
   opacity: 0;
}

@keyframes hideBlock {
   0% {
      opacity: 1;
   }
   100% {
      opacity: 0;
   }
}

.active-item .item-content {
   animation: showBlock 1s linear forwards 0.3s;
}

@keyframes showBlock {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}

.item .item-content {
   opacity: 0;
   position: absolute;
   top: 35%;
   left: -50%;
   transform: translateX(49%);
   padding: 40px 60px;
   text-align: center;
   width: 700px;
}

.item .work-img {
   width: 120px;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

.active-item .work-img {
   width: auto;
   height: 15%;
   top: 20%;
   transform: translate(-50%, 0%);
}

.item .close-btn {
   opacity: 0;
}

.active-item .close-btn {
   position: absolute;
   width: 100vw;
   height: 100vh;
}

.work-window.uk-modal {
   background-color: transparent;
}

.work-window .uk-modal-dialog {
   background-color: rgb(255, 255, 255);
}

/* services section */

.services {
   padding-top: 60px;
   padding-bottom: 60px;
}

.services .btn-img {
   margin-right: 20px;
   width: 32px;
   height: 32px;
}

.services .services-btn {
   text-transform: none;
   font-weight: 700;
   font-size: 24px;
   line-height: 32px;
   color: #000000;
   padding: 24px 32px;
   border-radius: 12px;
   position: relative;
   overflow: hidden;
   background: rgb(0 68 255 / 3%);
   transition: 0.3s;
   outline: none;
}

.services .services-btn:hover {
   background: rgb(0 68 255 / 7%);
}

.uk-tab > .uk-active > a {
   border: none;
   color: #000000;
}

.uk-tab::before {
   border: none;
}

.uk-tab a:hover {
   color: #000000;
}

.services .uk-tab-left li:not(:last-child),
.services .uk-tab li:not(:last-child) {
   margin-bottom: 16px;
}

.services #component-tab-left {
   padding-left: 172px;
}

.uk-tab-left::before {
   border: none;
}

.switch-title-img {
   width: 64px;
   height: 64px;
}

.services .switch-name {
   margin: 20px 0 24px 0;
   font-weight: 700;
   font-size: 56px;
   line-height: 60px;
}

.services .switch-text {
   margin: 0;
   font-weight: 400;
   font-size: 22px;
   line-height: 28px;
}

.services p.switch-text {
   margin-bottom: 60px;
}

.want-btn {
   padding: 20px 64px;
   background: #ea445a;
   border-radius: 8px;
   font-size: 24px;
   line-height: 30px;
   text-align: center;
   color: #ffffff;
   border: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   outline: none;
}

.services .want-btn:active,
.services .want-btn:focus {
   border: none;
}

.services .want-btn:hover {
   background: #d63f53;
   text-decoration: none;
   color: #ffffff;
   transition: 0.2s;
}

/* form */
.modal-step.active {
   display: block;
}

.modal-step {
   display: none;
}

.uk-modal {
   background: rgba(255, 255, 255, 0.8);
}

.uk-modal-dialog {
   border-radius: 24px;
   position: relative;
}

.uk-modal-body {
   padding: 62px 68px;
   overflow: hidden;
   box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 10%);
}

.uk-modal-dialog .blue-circle {
   left: -224px;
   top: -298px;
}

.uk-modal-dialog .red-circle {
   left: 271px;
   top: -444px;
}

.modal-title {
   display: flex;
}

.modal-heading {
   font-weight: 700;
   font-size: 32px;
   line-height: 36px;
   color: #000000;
}

.modal-text {
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
   color: #787485;
}

.img-modal {
   display: flex;
   width: 164px;
   height: 164px;
}

.form-div {
   margin-bottom: 23px;
   overflow: hidden;
   position: relative;
}

#form-message,
#stats-message {
   font-weight: 400;
   font-size: 16px;
   line-height: 24px;
   color: #d63f53;
}

/* .form-div [type="email"] {
    margin-bottom: 32px;
} */

.form-field {
   width: 100%;
   border: none;
   border-bottom: 1px solid #000000;
   font-weight: 700;
   font-size: 15px;
   line-height: 20px;
   color: #000000;
   background-color: transparent;
   outline: none;
   padding: 13px 0;
}

.uk-modal .want-btn:hover,
.uk-modal .want-btn:active,
.uk-modal .want-btn:focus {
   cursor: pointer;
   outline: none;
   background: #d63f53;
   transition: 0.2s;
}

form:invalid .want-btn {
   background: #ffd7dc;
}

/* .uk-modal form:not(:empty) .want-btn{
    background: #d63f53;
} */

.error {
   color: #d63f53;
}

g > rect[x="465"] {
   display: none;
}

rect[width="550"],
rect[fill="#cccccc"],
rect[fill="#ebebeb"] {
   fill: transparent;
}
text[x="85"] {
   display: none;
}

g {
   pointer-events: none;
}

/* footer */
footer {
   padding-top: 10px;
   padding-bottom: 20px;
   background-color: #201e22;
   overflow-x: hidden;
}

footer .socials {
   display: flex;
   align-content: center;
   flex-wrap: wrap;
   text-align: right;
}

footer .socials a:not(:last-child) {
   margin-right: 12px;
}

footer .contacts {
   font-weight: 400;
   font-size: 20px;
   line-height: 24px;
   letter-spacing: -0.05em;
   color: #ffffff;
}

footer .coryright {
   font-weight: 400;
   font-size: 20px;
   line-height: 24px;
   letter-spacing: -0.05em;
   color: #ffffff;
}

.footer-made-by {
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   align-items: flex-end;
   align-content: stretch;
}

footer .link-made-by {
   font-weight: 300;
   padding-left: 50px;
   color: #fff;
   font-size: 18px;
   position: relative;
   background-image: url("../images/admiral_logo.svg");
   background-size: 30px;
   background-repeat: no-repeat;
   background-position: 1%;
   font-size: 20px;
   line-height: 24px;
   letter-spacing: -0.05em;
   text-align: right;
}

.footer-made-by .link-made-by:hover {
   color: #fff;
   text-decoration: none;
}

.flag {
   width: 15px;
   height: 10px;
}

.socials a {
   background-image: url("../images/white-circle.png");
   background-size: 100%;
   background-repeat: no-repeat;
   width: 40px;
   height: 40px;
   display: flex;
   align-content: space-around;
   flex-direction: row;
   justify-content: center;
   align-items: center;
}

.socials svg path {
   color: black;
}

.uk-icon:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) {
   stroke: #000000;
}

.uk-slider {
   outline: none;
}

.uk-slider-items {
   outline: none;
}

/* 
MEDIA
*/
@media screen and (max-width: 1450px) {
   .phone-slider {
      max-width: 1150px;
   }
}

@media screen and (max-width: 1200px) {
   .heading {
      font-size: 45px;
      line-height: 50px;
   }

   .counter .description-number {
      font-size: 25px;
      line-height: 30px;
   }

   .counter .description-text {
      font-size: 20px;
      line-height: 20px;
   }

   .phone-slider {
      max-width: 900px;
   }

   video {
      width: 289px;
      height: 622px;
      left: 5.9%;
      top: 1.3%;
      max-width: initial;
   }

   .about-us .video-frame {
      width: 316px;
      height: 655px;
   }
}

@media screen and (max-width: 960px) {
   .heading {
      font-size: 40px;
      line-height: 45px;
   }

   .blured-circle {
      opacity: 0.4;
      filter: blur(150px);
   }

   .default-section {
      padding-top: 70px;
      padding-bottom: 70px;
   }

   .counter .description-number {
      font-size: 20px;
      line-height: 20px;
   }

   .about-us .description {
      font-size: 20px;
      line-height: 22px;
   }

   .phone-slider {
      max-width: 600px;
      margin: 0 auto;
   }

   video {
      width: 165px;
      height: 347px;
      left: 2px;
      top: 2px;
      border-radius: 25px;
   }

   .about-us .video-frame {
      width: 178px;
      height: 355px;
      position: relative;
   }

   .img-tiktok-icons {
      width: 26px;
      height: 26px;
   }

   .subscriptions,
   .subscriptions b,
   .icon-number,
   .tiktok-username,
   .tiktok-views,
   .likes-comments .likes-comment-item p {
      font-size: 10px;
      line-height: 10px;
   }

   .likes-comments .likes-comment-item {
      margin-bottom: 6px;
      padding-bottom: 10px;
   }

   .team .panel {
      height: 300px;
   }

   .team .team-name {
      font-size: 15px;
      line-height: 20px;
   }

   .team .team-position {
      font-size: 12px;
      line-height: 15px;
   }

   .services #component-tab-left {
      padding-left: 102px;
   }

   .services .services-btn {
      font-size: 16px;
      line-height: 20px;
      padding: 20px 30px;
   }

   .services-btn .blue-circle {
      left: -124px;
      top: -198px;
   }

   .uk-tab {
      display: initial;
   }

   .services-btn .red-circle {
      left: 171px;
      top: -344px;
   }

   .services .switch-name {
      font-size: 36px;
      line-height: 40px;
   }

   .services .switch-text,
   .services .switch-text li {
      font-size: 20px;
      line-height: 20px;
   }
}

@media screen and (max-width: 640px) {
   .logo {
      font-size: 15px;
      line-height: 20px;
   }

   header {
      padding-top: 0px;
   }

   .img-logo {
      width: 120px;
   }

   .blured-circle {
      opacity: 0.4;
      filter: blur(150px);
   }

   .default-section {
      padding-top: 30px;
      padding-bottom: 30px;
   }

   .section-title {
      padding-bottom: 34px;
      text-align: center;
   }

   section.main-scene {
      padding-top: 56px;
      /* padding-bottom: 42px; */
   }

   .main-scene .heading {
      padding-top: 0px;
      padding-bottom: 0px;
   }

   .main-scene .heading {
      font-size: 20px;
      line-height: 30px;
   }

   .counter .description-number {
      font-size: 20px;
      line-height: 20px;
   }

   .counter .description-text {
      font-size: 14px;
      line-height: 13px;
   }

   /* about us */
   section.about-us {
      padding-bottom: 60px;
   }

   .phone-slider .uk-slider-items > li > div {
      transform: none;
      filter: none;
   }

   .about-us .description {
      font-size: 15px;
      line-height: 23px;
   }

   .phone-slider {
      max-width: 300px;
      margin: 0 auto;
   }

   .about-us .phone-slider {
      padding-bottom: 50px;
   }

   video {
      width: 280px;
      height: 590px;
      left: 4px;
      top: 4px;
      border-radius: 48px;
   }

   .about-us .video-frame {
      width: 178px;
      height: 355px;
      position: relative;
   }

   .img-tiktok-icons {
      width: 42px;
      height: 42px;
   }

   .subscriptions,
   .subscriptions b,
   .icon-number,
   .tiktok-username,
   .tiktok-views,
   .likes-comments .likes-comment-item p {
      font-size: 16px;
      line-height: 20px;
   }

   .likes-comments .likes-comment-item p {
      font-size: 13px !important;
   }

   .likes-comments .likes-comment-item {
      margin-bottom: 10px;
      padding-bottom: 23px;
   }

   p.subscriptions {
      margin-top: 12px;
   }

   .about-us .video-frame {
      width: 300px;
      height: 600px;
   }

   .tiktok-views {
      display: flex;
   }

   .tiktok-views span {
      position: relative;
      top: -1px;
   }

   .video-cont .tiktok-link {
      pointer-events: fill;
   }

   /* team */

   .team .panel {
      height: 300px;
   }

   .team .team-name {
      text-align: center;
      font-size: 15px;
      line-height: 20px;
   }

   .team .team-position {
      text-align: center;
      font-size: 12px;
      line-height: 15px;
   }

   .uk-position-center {
      max-width: 50%;
   }
   /* works */

   .img-tiktok-icons {
      width: 46px;
      height: 46px;
   }

   .icon-number {
      font-size: 14px;
      line-height: 14px;
   }

   /* portfolio */

   .item {
      width: 100px;
      height: 100px;
   }

   .item.active-item {
      width: 400px;
      height: 400px;
      padding: 40px;
   }

   .item .item-content {
      width: 400px;
      padding: 20px 45px;
      top: 30%;
   }

   .item-content .work-title {
      font-size: 18px;
   }

   .item-content .work-result {
      font-size: 14px;
   }

   .active-item .work-img {
      /* height: 12%; */
      width: 140px;
      top: 12%;
   }

   .active-item .close-btn {
      transform: none;
   }

   /* services */

   section.services {
      padding-top: 20px;
      /* padding-bottom: 100px; */
      text-align: center;
   }

   .services #component-tab-left {
      padding-left: 0px;
   }

   .services .services-btn {
      font-size: 14px;
      line-height: 15px;
      padding: 10px 20px;
   }

   .services .btn-img {
      margin-right: 10px;
      width: 12px;
      height: 12px;
   }

   .services-btn .blue-circle {
      left: -100px;
      top: -100px;
   }

   .services-btn .red-circle {
      left: 71px;
      top: -144px;
   }

   .services .switch-name {
      font-size: 30px;
      line-height: 35px;
   }

   .switch-title-img {
      width: 32px;
      height: 32px;
   }

   .services .switch-text,
   .services .switch-text li {
      font-size: 22px;
      line-height: 24px;
      text-align: left;
   }

   .uk-tab {
      display: initial;
   }

   .uk-tab > * {
      padding: 0px;
   }

   .want-btn {
      padding: 10px 30px;
      font-size: 17px;
      line-height: 15px;
   }

   /* footer */
   footer {
      padding-top: 30px;
      padding-bottom: 33px;
   }

   footer .img-logo {
      width: 220px;
   }

   .socials a {
      width: 30px;
      height: 30px;
   }

   .img-modal {
      width: 120px;
      height: 120px;
   }

   .modal-heading {
      font-size: 18px;
      line-height: 26px;
   }

   .modal-heading.last {
      max-width: 200px;
      margin-left: 127px;
   }

   .modal-text,
   #form-message,
   #stats-message {
      font-size: 14px;
      line-height: 20px;
   }

   .services-select-container {
      padding-bottom: 30px;
   }

   .services-select-container .services-select-blured-button {
      font-size: 16px;
      line-height: 20px;
      width: 204px;
      padding: 10px 20px;
      padding-right: 40px;
      border: none;
      text-transform: none;
      font-weight: 700;
      color: #000000;
      border-radius: 12px;
      position: relative;
      overflow: hidden;
      outline: none;
   }

   .services-select-container
      .services-select-blured-button
      .services-select-icon {
      position: absolute;
      top: 50%;
      right: 15px;
      transform: translateY(-50%);
      color: #000;

      transition: 0.3s;
   }

   .services-select-container
      .services-select-blured-button
      .services-select-icon.uk-icon:not(.uk-preserve)
      [stroke*="#"]:not(.uk-preserve) {
      stroke: #000;
   }

   .services-select-container
      .services-select-blured-button[aria-expanded="true"]
      .services-select-icon {
      transform: translateY(-50%) rotate(180deg);
   }

   .services-select-container .uk-dropdown {
      padding: 0;
      overflow: hidden;
      border-radius: 12px;
   }

   .services-select-container ul.uk-tab {
      margin: 0;
   }

   section.services .services-select-container ul.uk-tab li {
      margin-bottom: 0;
   }

   .services-select-container ul.uk-tab li .services-btn {
      border-radius: 0px;
      padding: 14px 20px;
      font-size: 15px;
   }

   .uk-modal-body {
      padding: 40px;
   }

   .active-item .close-btn {
      right: 7%;
   }
}

@media screen and (max-width: 450px) {
   .item {
      width: 80px;
      height: 80px;
   }

   .znachki {
      transform: scale(1.3);
      left: 20px;
   }

   .znachki.mail {
      top: calc(100vh / 2 + 20px);
   }

   .item.active-item {
      width: 98vw;
      height: 98vw;
      padding: 30px;
   }
   .item .item-content {
      width: 98vw;
      padding: 10px 30px;
   }

   .item-content .work-title {
      font-size: 16px;
   }

   .item-content .work-result {
      font-size: 14px;
   }

   .item .work-img {
      width: 63px;
   }

   .active-item .work-img {
      width: initial;
   }
}

@media screen and (max-width: 340px) {
   header {
      padding-top: 0px;
   }

   .logo {
      font-size: 14px;
      line-height: 15px;
   }

   .img-logo {
      width: 100px;
   }

   .blured-circle {
      opacity: 0.4;
      filter: blur(150px);
   }

   .default-section-heading {
      padding-bottom: 0px;
   }

   .section-title {
      padding-bottom: 24px;
   }

   section.main-scene {
      padding-top: 76px;
      padding-bottom: 52px;
   }

   .main-scene .heading {
      padding-top: 0px;
      padding-bottom: 0px;
   }

   .heading {
      font-size: 20px;
      line-height: 30px;
   }

   .counter .description-number {
      font-size: 20px;
      line-height: 20px;
   }

   .counter .description-text {
      font-size: 12px;
      line-height: 12px;
   }

   /* about us */

   section.about-us {
      padding-bottom: 66px;
   }

   .about-us .heading {
      padding-bottom: 50px;
   }

   video {
      width: 200px;
      height: 400px;
      left: -0.5%;
      border-radius: 40px;
   }

   .subscriptions,
   .subscriptions b,
   .icon-number,
   .tiktok-username,
   .tiktok-views,
   .likes-comments .likes-comment-item p {
      font-size: 10px;
      line-height: 10px;
   }

   .about-us .video-frame {
      width: 200px;
      height: 420px;
   }

   .about-us .phone-slider {
      padding-bottom: 0px;
      max-width: 200px;
      margin: 0 auto;
   }

   .about-us .description {
      font-size: 10px;
      line-height: 20px;
   }

   /* team */

   .team .panel {
      height: 200px;
   }

   .team .team-name {
      font-size: 12px;
      line-height: 18px;
   }

   .team .team-position {
      font-size: 10px;
      line-height: 12px;
   }

   /* works */

   .img-tiktok-icons {
      width: 36px;
      height: 36px;
   }

   .icon-number {
      font-size: 12px;
      line-height: 12px;
   }

   .likes-comments {
      margin-left: 14px;
   }

   .icon-number {
      padding-top: 2px;
   }

   /* portfolio */

   /* services */

   section.services {
      padding-top: 20px;
   }

   .services #component-tab-left {
      padding-left: 0px;
   }

   .services .switch-name {
      font-size: 30px;
      line-height: 35px;
   }

   .switch-title-img {
      width: 32px;
      height: 32px;
   }

   .services .switch-text,
   .services .switch-text li {
      font-size: 20px;
      line-height: 24px;
   }

   .want-btn {
      padding: 10px 30px;
      font-size: 10px;
      line-height: 15px;
   }

   /* footer */

   footer {
      padding-top: 20px;
      padding-bottom: 23px;
   }

   footer .coryright {
      font-size: 10px;
      line-height: 20px;
   }

   /* modal */

   .modal-heading {
      font-size: 22px;
      line-height: 26px;
   }

   .modal-text,
   #form-message,
   #stats-message {
      font-size: 10px;
      line-height: 20px;
   }

   .img-modal {
      width: 100px;
      height: 100px;
   }
}

/* restyle */

.works-container.uk-position-relative {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 20px;
}

.row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 60px 1fr 1fr 1fr 1fr 1fr 1fr;
   gap: 10px;
}

.case_column__title {
   grid-column: span 2;
   font-size: 30px;
   line-height: 35px;
   color: #ffffff;
   text-align: center;
}

.item:not(.active-item) {
   width: 100%;
   background-color: transparent;
   box-shadow: none;
}

.item:not(.active-item) .work-img {
   width: 150px;
   padding: 12px;
   height: 150px;
   object-fit: contain;
   background-color: #ffff;
   border-radius: 50%;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}
@media screen and (max-width: 640px) {
   .item {
      height: 175px;
   }
   p.work-result {
      margin: 5px 0px;
   }
}
@media (max-width: 560px) {
   .row {
      /* grid-template-columns: 1fr; */
      grid-template-rows: auto;
   }
   .case_column__title {
      /* grid-column: span 1; */
   }
}
.photo-team {
   max-width: 100%;
   width: 250px;
   height: 300px;
}
@media screen and (max-width: 450px) {
   body .item-content .work-result {
      font-size: 10px;
   }
}

ul.work-result {
   list-style-type: none;
}
@media screen and (max-width: 550px) {
   body .item.active-item {
      height: 550px;
   }
}

.work-result .description {
   text-align: center;
}