@font-face{
    font-family:"JosefinSans";
    src:local("☺"),url("../fonts/JosefinSans-Light.woff") format("woff"),url("../fonts/JosefinSans-Light.woff2") format("woff2");
    font-weight:300;
    font-style:normal
}
@font-face{
    font-family:"JosefinSans";
    src:local("☺"),url("../fonts/JosefinSans-Regular.woff") format("woff"),url("../fonts/JosefinSans-Regular.woff2") format("woff2");
    font-weight:400;
    font-style:normal
}
@font-face{
    font-family:"JosefinSans";
    src:local("☺"),url("../fonts/JosefinSans-Bold.woff") format("woff"),url("../fonts/JosefinSans-Bold.woff2") format("woff2");
    font-weight:700;
    font-style:normal
}
@font-face{
    font-family:"Play";
    src:local("☺"),url("../fonts/Play-Regular.woff") format("woff"),url("../fonts/Play-Regular.woff2") format("woff2");
    font-weight:400;
    font-style:normal
}
@font-face{
    font-family:"Play";
    src:local("☺"),url("../fonts/Play-Bold.woff") format("woff"),url("../fonts/Play-Bold.woff2") format("woff2");
    font-weight:700;
    font-style:normal
}
*,*:before,*:after{
    box-sizing:border-box
}


/***********************************************desirecords***********/
.fronttext h2{font-size:60px; line-height:60px;display: inline-block;padding:5px 10px;}
.fronttext p{margin:0;background-color: rgba(0,0,0,0.7);display: inline-block;padding: 10px;}

.animated.flip {
    -webkit-backface-visibility: visible;
    -ms-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip;
  }
  .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  
  .animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
  }
  
@-webkit-keyframes fadeInUpBig {
    0% {
      opacity: 0;
      -webkit-transform: translateY(2000px);
      transform: translateY(2000px);
    }
  
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }
  
  @keyframes fadeInUpBig {
    0% {
      opacity: 0;
      -webkit-transform: translateY(2000px);
      -ms-transform: translateY(2000px);
      transform: translateY(2000px);
    }
  
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
  }
  
  .fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig;
  }
/********************************************************************/
/**********************************************************************/

.circle {
	position: absolute;
  border: solid 1px #ccc;
	width: 60px; 
	height: 60px; 
  border-radius: 50%;  
}


/**********************************************************************/


.top-button{
    position:fixed;
    bottom:2rem;
    right:2rem;
    z-index:100;
    width:5rem;
    height:5rem;
    display:flex;
    justify-content:center;
    align-items:center;
    border:2px solid #00bfe7;
    background-color:#00bfe7;
    transition:background-color .5s ease, opacity .5s ease, visibility .5s ease;
    opacity:0;
    visibility:hidden
}
.top-button:hover{
    cursor:pointer;
    background-color:rgba(0,191,231,0.1)
}
.top-button:active{
    background-color:rgba(0,191,231,0.1)
}
.top-button.show{
    opacity:1;
    visibility:visible
}
.top-button__icon{
    font-size:2.2rem;
    color:#fff
}
.message{
    padding:20rem 0
}
.message-wrapper{
    max-width:90rem;
    margin:0 auto
}
.message__text{
    text-align:center;
    font-family:"JosefinSans";
    font-style:normal;
    font-weight:400;
    font-size:2.4rem;
    line-height:3.9rem;
    color:#adadad
}
.message__link{
    color:#00bfe7
}
.message__link:hover{
    text-decoration:underline
}
.preloder{
 /*   position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    right:0;
    z-index:10000;
    background:#100028*/
}
.loader{
    position:absolute;
    top:50%;
    left:50%;
    width:5rem;
    height:5rem;
    margin-top:-2.5rem;
    margin-left:-2.5rem;
    border-radius:50%;
    animation:loader 0.8s linear infinite
}
@keyframes loader{
    0%{
        transform:rotate(0deg);
        border:4px solid #00bfe7;
        border-left-color:transparent
    }
    50%{
        transform:rotate(180deg);
        border:4px solid #fff;
        border-left-color:transparent
    }
    100%{
        transform:rotate(360deg);
        border:4px solid #00bfe7;
        border-left-color:transparent
    }
}
.logo{
    display:inline-block;
    max-width:16rem
}
.header{
    position:absolute;
    top:0;
    left:0;
    right:0;
    width:100%;
    z-index:100;
    background-color:transparent;
    padding:2.8rem 0;
    border-bottom:1px solid rgba(255,255,255,0.2)
}
.header-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between
}
.header__nav{
    position:relative;
    margin-left:auto;
    margin-right:6rem
}
.header__nav::after{
    content:"";
    position:absolute;
    right:-3rem;
    top:0;
    height:100%;
    width:0.1rem;
    display:block;
    background-color:rgba(255,255,255,0.2)
}
.header .nav__list{
    display:flex;
    align-items:center;
    padding:0;
    margin:0;
    list-style-type:none
}
.header .nav__item{
    margin-left:5rem
}
.header .nav__item:first-child{
    margin-left:0
}
.header .nav__link{
    position:relative;
    padding:0.6rem 0;
    font:normal 400 1.5rem "Play";
    text-transform:uppercase;
    color:#fff
}
.header .nav__link::after,.header .nav__link::before{
    position:absolute;
    content:"";
    bottom:-0.5rem;
    width:0%;
    height:0.2rem;
    background-color:#00bfe7;
    transition:width 0.3s ease
}
.header .nav__link::after{
    left:50%
}
.header .nav__link::before{
    right:50%
}
.header .nav__link:hover::after,.header .nav__link:hover::before,.header .nav__link.active::after,.header .nav__link.active::before{
    width:50%
}
.header .social__link{
    margin-left:1.8rem
}
.header .social__link:first-child{
    margin-left:0
}
.header .social__icon{
    font-size:1.5rem;
    color:#fff;
    transition:color 0.3s ease
}
.header .social__icon:hover{
    color:#00bfe7
}
.header .mmenu{
    display:none;
    background:transparent;
    padding:0
}
.header .mmenu__icon{
    font-size:2.2rem;
    color:rgba(255,255,255,0.75)
}
.header .mmenu:hover .mmenu__icon{
    color:#00bfe7;
    transition:color 0.3s ease
}
.intro{
    position:relative;
    padding:25rem 0 12rem;
    background-image:url(../img/intro/intro-bg.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center
}
.intro-wrapper{
    position:relative;
    z-index:10
}
.intro-overlay{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:1;
    width:100%;
    height:100%;
    background-color:rgba(16,0,40,0.42)
}
.intro__item{
    max-width:55rem;
    padding-bottom:10rem
}
.intro__suptitle{
    margin-bottom:1.8rem;
    font:normal 400 1.5rem "JosefinSans";
    letter-spacing:2px;
    color:#fff;
    text-transform:uppercase
}
.intro__title{
    margin-bottom:3.8rem;
    font:normal 700 6rem/7rem "Play";
    text-transform:uppercase;
    color:#fff
}
.intro__button{
    position:relative;
    display:inline-block;
    font:normal 700 1.5rem "Play";
    padding:1.5rem 3rem;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#fff
}
.intro__button:hover::after,.intro__button:hover::before{
    width:100%;
    height:100%
}
.intro__button::after,.intro__button::before{
    content:"";
    position:absolute;
    z-index:10;
    width:3rem;
    height:3rem;
    background:transparent;
    transition:height 0.8s ease, width 0.8s ease
}
.intro__button::before{
    top:0;
    left:0;
    border-top:2px solid #00bfe7;
    border-left:2px solid #00bfe7
}
.intro__button::after{
    bottom:0;
    right:0;
    border-bottom:2px solid #00bfe7;
    border-right:2px solid #00bfe7
}
.intro .owl-carousel .owl-dots{
    position:absolute;
    left:0;
    right:0;
    bottom:5rem;
    width:100%;
    max-width:100%;
    margin:0 auto
}
.intro .owl-carousel .owl-dots .owl-dot{
    position:relative;
    display:inline-block;
    margin-right:2rem;
    font:normal 400 1.8rem 'Play';
    color:#adadad
}
.intro .owl-carousel .owl-dots .owl-dot.active{
    color:#fff
}
.intro .owl-carousel .owl-dots .owl-dot.active:after{
    background:#fff;
    height:1.5px
}
.intro .owl-carousel .owl-dots .owl-dot:after{
    content:"";
    position:absolute;
    left:0;
    bottom:-0.5rem;
    width:100%;
    height:1px;
    background:rgba(255,255,255,0.2)
}
.intro .owl-carousel .owl-dots .owl-dot:last-child{
    margin-right:0
}
.services{
    padding:12rem 0 8rem
}
.services-wrapper{
    display:flex;
    justify-content:space-between
}
.services__info{
    width:34%;
    padding-right:4rem
}
.services__suptitle{
    margin-bottom:0.6rem;
    font-family:"JosefinSans";
    font-style:normal;
    font-weight:400;
    font-size:1.6rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#fff
}
.services__title{
    margin-bottom:7.5rem;
    position:relative;
    font-family:"Play";
    font-style:normal;
    font-weight:700;
    font-size:3.6rem;
    text-transform:uppercase;
    color:#fff
}
.services__title::after{
    left:0;
    content:"";
    position:absolute;
    bottom:-2.5rem;
    display:block;
    width:7rem;
    height:0.5rem;
    background-color:#00bfe7
}
.services__text{
    margin-bottom:4.5rem;
    font-family:"JosefinSans";
    font-style:normal;
    font-weight:400;
    font-size:1.6rem;
    line-height:2.6rem;
    color:#adadad
}
.services__button{
    position:relative;
    display:inline-block;
    font:normal 700 1.5rem "Play";
    padding:1.5rem 3rem;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#fff
}
.services__button:hover::after,.services__button:hover::before{
    width:100%;
    height:100%
}
.services__button::after,.services__button::before{
    content:"";
    position:absolute;
    z-index:10;
    width:3rem;
    height:3rem;
    background:transparent;
    transition:height 0.8s ease, width 0.8s ease
}
.services__button::before{
    top:0;
    left:0;
    border-top:2px solid #00bfe7;
    border-left:2px solid #00bfe7
}
.services__button::after{
    bottom:0;
    right:0;
    border-bottom:2px solid #00bfe7;
    border-right:2px solid #00bfe7
}
.services__cards{
    width:66%;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap
}
.services__card{
    margin-bottom:4rem
}
.services .card{
    width:47.5%
}
.services .card:hover .card__image-wrapper::after{
    transform:rotate(45deg)
}
.services .card__image-wrapper{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:7rem;
    height:7rem;
    margin-bottom:2.6rem
}
.services .card__image-wrapper::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:7rem;
    height:7rem;
    border:2px solid #00bfe7;
    transition:all 0.8s ease
}
.services .card__image{
    width:3.5rem;
    height:3.5rem
}
.services .card__title{
    margin-bottom:1.8rem;
    position:relative;
    font-family:"Play";
    font-style:normal;
    font-weight:700;
    font-size:2.2rem;
    text-transform:none;
    color:#fff
}
.services .card__text{
    font-family:"JosefinSans";
    font-style:normal;
    font-weight:400;
    font-size:1.6rem;
    line-height:2.6rem;
    color:#adadad
}
.services--all .services__cards{
    width:100%
}
.services--all .services__cards .card{
    width:32%
}
.work-wrapper{
    width:100%;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    grid-template-rows:repeat(2, 30rem);
    grid-auto-rows:30rem;
    grid-gap:1rem
}
.work__item{
    position:relative
}
.work__item:nth-child(1){
    grid-column:span 2
}
.work__item:nth-child(4){
    grid-column:span 2;
    grid-row:span 2
}
.work__item:nth-child(7){
    grid-column:span 2
}
.work__image{
    width:100%;
    height:100%;
    object-fit:cover
}
.work__link{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    z-index:10;
    display:flex;
    justify-content:center;
    align-items:center;
    width:5rem;
    height:5rem;
    background-color:transparent;
    border:1px solid rgba(255,255,255,0.75);
    border-radius:50%;
    transition:border-color 0.5s ease
}
.work__link:hover{
    border-color:#fff
}
.work__link:hover .work__icon{
    color:#fff
}
.work__icon{
    font-size:1.6rem;
    color:rgba(255,255,255,0.75);
    transition:color 0.5s ease
}
.counter{
    padding-top:4rem
}
.counter .container{
    overflow:hidden
}
.counter-wrapper{
    padding:8rem 0;
    transform:rotate(-45deg)
}
.counter-row{
    display:flex;
    flex-wrap:wrap
}
.counter-row:first-child{
    justify-content:flex-start;
    padding-left:4.53rem
}
.counter-row:first-child .counter__item{
    position:relative;
    width:36rem;
    height:30rem
}
.counter-row:first-child .counter__item:first-child{
    padding:0 0rem 6rem 12rem
}
.counter-row:first-child .counter__item:first-child::before{
    content:"";
    position:absolute;
    top:0rem;
    left:12rem;
    width:60rem;
    height:60rem;
    display:block;
    border-right:1px solid #333333;
    border-top:1px solid #333333
}
.counter-row:first-child .counter__item:last-child{
    padding:6rem 6rem 0
}
.counter-row:first-child .counter__item:last-child::before{
    content:"";
    position:absolute;
    top:-12rem;
    left:0;
    width:48rem;
    height:48rem;
    display:block;
    border-left:1px solid #333333;
    border-bottom:1px solid #333333
}
.counter-row:last-child{
    justify-content:flex-end;
    padding-right:4.53rem
}
.counter-row:last-child .counter__item{
    position:relative;
    width:36rem;
    height:36rem
}
.counter-row:last-child .counter__item:first-child{
    padding:6rem 0rem 6rem 12rem
}
.counter-row:last-child .counter__item:first-child::before{
    content:"";
    position:absolute;
    top:0rem;
    left:-6rem;
    width:48rem;
    height:48rem;
    display:block;
    border-right:1px solid #333333;
    border-top:1px solid #333333
}
.counter-row:last-child .counter__item:last-child{
    padding:12rem 6rem 0rem 6rem
}
.counter-row:last-child .counter__item:last-child::before{
    content:"";
    position:absolute;
    top:-24rem;
    left:-30rem;
    width:60rem;
    height:60rem;
    display:block;
    border-left:1px solid #333333;
    border-bottom:1px solid #333333
}
.counter__content-wrapper{
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:#1a083d
}
.counter__content{
    display:flex;
    flex-direction:column;
    align-items:center;
    transform:rotate(45deg)
}
.counter__icon{
    display:block;
    height:6rem;
    margin-bottom:1.8rem
}
.counter__number{
    display:block;
    margin-bottom:0.6rem;
    font:normal 700 6rem "Play";
    color:#fff
}
.counter__text{
    display:block;
    font:normal 400 1.6rem/2.6rem "JosefinSans";
    color:#adadad
}
.team{
    /*padding:12rem 0 8rem;*/
    background-image:url(../img/team/team-bg.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center
}
.team-wrapper{
    text-align:right
}
.team__info{
    margin-bottom:2rem
}
.team__suptitle{
    text-align:left;
    margin-bottom:0.6rem;
    font-family:"JosefinSans";
    font-style:normal;
    font-weight:400;
    font-size:1.6rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#fff
}
.team__title{
    text-align:left;
    margin-bottom:7.5rem;
    position:relative;
    font-family:"Play";
    font-style:normal;
    font-weight:700;
    font-size:3.6rem;
    text-transform:uppercase;
    color:#fff
}
.team__title::after{
    left:0;
    content:"";
    position:absolute;
    bottom:-2.5rem;
    display:block;
    width:7rem;
    height:0.5rem;
    background-color:#00bfe7
}
.team__cards{
    display:flex;
    justify-content:space-between
}
.team__cards .card{
    position:relative;
    width:25%;
    max-width:30rem;
    height:39rem;
    overflow:hidden
}
.team__cards .card:nth-child(2){
    margin-top:-6rem
}
.team__cards .card:nth-child(3){
    margin-top:-12rem
}
.team__cards .card:nth-child(4){
    margin-top:-18rem
}
.team__cards .card:hover .card__content{
    bottom:0;
    transition:bottom 0.5s ease
}
.team__cards .card__image{
    width:100%;
    height:100%;
    object-fit:cover
}
.team__cards .card__content{
    position:absolute;
    bottom:-25rem;
    left:0;
    right:0;
    z-index:10;
    padding:5rem 0 3rem;
    text-align:center;
    transition:bottom 0.5s ease
}
.team__cards .card__content::before{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    z-index:10;
    height:100%;
    width:100%;
    background-image:url(../img/team/team-hover.png);
    background-repeat:no-repeat;
    background-size:cover
}
.team__cards .card__name{
    position:relative;
    z-index:11;
    margin-bottom:1rem;
    position:relative;
    font-family:"Play";
    font-style:normal;
    font-weight:700;
    font-size:2.2rem;
    text-transform:uppercase;
    color:#fff
}



.team__cards .card__profession{
    position:relative;
    z-index:11;
    display:inline-block;
    margin-bottom:1.5rem;
    font-family:"JosefinSans";
    font-style:normal;
    font-weight:400;
    font-size:1.6rem;
    line-height:2.6rem;
    color:#fff
}
.team__cards .card__links{
    position:relative;
    z-index:11;
    display:flex;
    justify-content:center;
    align-items:center
}
.team__cards .card__link{
    margin-right:1.8rem
}
.team__cards .card__link:last-child{
    margin-right:0
}
.team__cards .card__link:hover .card__icon{
    color:#00bfe7;
    transition:color 0.5s ease
}
.team__cards .card__icon{
    font-size:1.5rem;
    color:#fff
}
.team__button{
    position:relative;
    display:inline-block;
    font:normal 700 1.5rem "Play";
    padding:1.5rem 3rem;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#fff
}
.team__button:hover::after,.team__button:hover::before{
    width:100%;
    height:100%
}
.team__button::after,.team__button::before{
    content:"";
    position:absolute;
    z-index:10;
    width:3rem;
    height:3rem;
    background:transparent;
    transition:height 0.8s ease, width 0.8s ease
}
.team__button::before{
    top:0;
    left:0;
    border-top:2px solid #00bfe7;
    border-left:2px solid #00bfe7
}
.team__button::after{
    bottom:0;
    right:0;
    border-bottom:2px solid #00bfe7;
    border-right:2px solid #00bfe7
}
.blog{
    padding:12rem 0 8rem
}
.blog__info{
    margin-bottom:2rem
}
.blog__suptitle{
    text-align:center;
    margin-bottom:0.6rem;
    font-family:"JosefinSans";
    font-style:normal;
    font-weight:400;
    font-size:1.6rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#fff
}
.blog__title{
    text-align:center;
    margin-bottom:7.5rem;
    position:relative;
    font-family:"Play";
    font-style:normal;
    font-weight:700;
    font-size:3.6rem;
    text-transform:uppercase;
    color:#fff
}
.blog__title::after{
    left:50%;
    transform:translateX(-50%);
    content:"";
    position:absolute;
    bottom:-2.5rem;
    display:block;
    width:7rem;
    height:0.5rem;
    background-color:#00bfe7
}
.blog__slider .card{
    position:relative;
    width:36rem;
    min-height:36rem;
    padding:4rem;
    border:1px solid #333333;
    background:transparent
}
.blog__slider .card__content{
    position:relative;
    z-index:100;
    width:100%;
    min-height:28rem;
    height:100%;
    display:flex;
    flex-direction:column
}
.blog__slider .card__title{
    margin-bottom:1.8rem;
    position:relative;
    font-family:"Play";
    font-style:normal;
    font-weight:700;
    font-size:2.4rem;
    text-transform:none;
    color:#fff
}
.blog__slider .card__info{
    margin-bottom:2rem;
    font:normal 300 1.4rem "JosefinSans";
    color:#777
}
.blog__slider .card__date{
    position:relative;
    display:inline-block;
    margin-right:2rem
}
.blog__slider .card__date::after{
    content:"/";
    position:absolute;
    top:0;
    right:-1.5rem;
    z-index:10
}
.blog__slider .card__text{
    margin-bottom:2rem;
    font:normal 300 1.4rem "JosefinSans";
    color:#777;
    overflow:hidden;
    position:relative;
    line-height:1.2em;
    max-height:4.8em;
    text-align:justify;
    padding-right:1em
}
.blog__slider .card__text:before{
    content:'...';
    position:absolute;
    right:0;
    bottom:0
}
.blog__slider .card__text:after{
    content:'';
    position:absolute;
    right:0;
    width:1em;
    height:1em;
    margin-top:1.2em;
    background:#100028
}
.blog__slider .card__link{
    display:flex;
    align-items:center;
    margin-top:auto;
    margin-bottom:0;
    font:normal 400 1.6rem "JosefinSans";
    color:#fff;
    transition:color 0.5s ease
}
.blog__slider .card__link:hover{
    color:#00bfe7
}
.blog__slider .card__icon{
    margin-left:1rem;
    font-size:1.4rem
}
.blog__slider .card::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    z-index:99;
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;
    filter:grayscale(0.42);
    opacity:0
}
.blog__slider .card.blog__card--1::before{
    background-image:url(../img/blog/blog-1.jpg)
}
.blog__slider .card.blog__card--2::before{
    background-image:url(../img/blog/blog-2.jpg)
}
.blog__slider .card.blog__card--3::before{
    background-image:url(../img/blog/blog-1.jpg)
}
.blog__slider .card.blog__card--4::before{
    background-image:url(../img/blog/blog-2.jpg)
}
.blog__slider .card:hover::before{
    opacity:1;
    transition:opacity 0.5s ease
}
.blog__slider .card:hover .card__text,.blog__slider .card:hover .card__info{
    color:#fff;
    transition:color 0.5s ease
}
.blog .owl-carousel .owl-dots{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:4rem
}
.blog .owl-carousel .owl-dots .owl-dot{
    display:inline-block;
    width:0.8rem;
    height:0.8rem;
    margin-right:1rem;
    border-radius:50%;
    background-color:rgba(255,255,255,0.2)
}
.blog .owl-carousel .owl-dots .owl-dot.active{
    background-color:#00bfe7
}
.blogpage{
    padding:12rem 0
}
.blogpage-wrapper{
    width:100%;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    grid-template-rows:repeat(3, minmax(36rem, max-content));
    grid-auto-rows:minmax(36rem, max-content);
    grid-gap:2rem
}
.blogpage-wrapper .card{
    position:relative;
    width:100%;
    min-height:36rem;
    padding:4rem;
    border:1px solid #333333;
    background:transparent
}
.blogpage-wrapper .card__content{
    position:relative;
    z-index:100;
    width:100%;
    min-height:28rem;
    height:100%;
    display:flex;
    flex-direction:column
}
.blogpage-wrapper .card__title{
    margin-bottom:1.8rem;
    position:relative;
    font-family:"Play";
    font-style:normal;
    font-weight:700;
    font-size:2.4rem;
    text-transform:none;
    color:#fff
}
.blogpage-wrapper .card__info{
    margin-bottom:2rem;
    font:normal 300 1.4rem "JosefinSans";
    color:#777
}
.blogpage-wrapper .card__date{
    position:relative;
    display:inline-block;
    margin-right:2rem
}
.blogpage-wrapper .card__date::after{
    content:"/";
    position:absolute;
    top:0;
    right:-1.5rem;
    z-index:10
}
.blogpage-wrapper .card__text{
    margin-bottom:2rem;
    font:normal 300 1.4rem "JosefinSans";
    color:#777;
    overflow:hidden;
    position:relative;
    line-height:1.2em;
    max-height:4.8em;
    text-align:justify;
    padding-right:1em
}
.blogpage-wrapper .card__text:before{
    content:'...';
    position:absolute;
    right:0;
    bottom:0
}
.blogpage-wrapper .card__text:after{
    content:'';
    position:absolute;
    right:0;
    width:1em;
    height:1em;
    margin-top:1.2em;
    background:#100028
}
.blogpage-wrapper .card__link{
    display:flex;
    align-items:center;
    margin-top:auto;
    margin-bottom:0;
    font:normal 400 1.6rem "JosefinSans";
    color:#fff;
    transition:color 0.5s ease
}
.blogpage-wrapper .card__link:hover{
    color:#00bfe7
}
.blogpage-wrapper .card__icon{
    margin-left:1rem;
    font-size:1.4rem
}
.blogpage-wrapper .card::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    z-index:99;
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;
    filter:grayscale(0.42);
    opacity:0
}
.blogpage-wrapper .card.blogpage__card--1::before{
    background-image:url(../img/blog/blog-1.jpg)
}
.blogpage-wrapper .card.blogpage__card--2::before{
    background-image:url(../img/blog/blog-2.jpg)
}
.blogpage-wrapper .card.blogpage__card--3::before{
    background-image:url(../img/blog/blog-1.jpg)
}
.blogpage-wrapper .card.blogpage__card--4::before{
    background-image:url(../img/blog/blog-2.jpg)
}
.blogpage-wrapper .card.blogpage__card--5::before{
    background-image:url(../img/blog/blog-1.jpg)
}
.blogpage-wrapper .card.blogpage__card--6::before{
    background-image:url(../img/blog/blog-2.jpg)
}
.blogpage-wrapper .card.blogpage__card--7::before{
    background-image:url(../img/blog/blog-1.jpg)
}
.blogpage-wrapper .card.blogpage__card--8::before{
    background-image:url(../img/blog/blog-2.jpg)
}
.blogpage-wrapper .card.blogpage__card--9::before{
    background-image:url(../img/blog/blog-1.jpg)
}
.blogpage-wrapper .card:hover::before{
    opacity:1;
    transition:opacity 0.5s ease
}
.blogpage-wrapper .card:hover .card__text,.blogpage-wrapper .card:hover .card__info{
    color:#fff;
    transition:color 0.5s ease
}
.cta{
    padding:12rem 0;
    background-image:url(../img/cta/callto-bg.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center
}
.cta__title{
    max-width:60%;
    margin-bottom:2.2rem;
    position:relative;
    font-family:"Play";
    font-style:normal;
    font-weight:700;
    font-size:4.2rem;
    text-transform:capitalize;
    color:#fff
}
.cta__text{
    margin-bottom:5.5rem;
    text-transform:uppercase;
    font-family:"JosefinSans";
    font-style:normal;
    font-weight:400;
    font-size:1.5rem;
    line-height:2.4375rem;
    color:rgba(255,255,255,0.7)
}
.cta__button{
    position:relative;
    display:inline-block;
    font:normal 700 1.5rem "Play";
    padding:1.5rem 3rem;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#fff;
    background-color:#00bfe7;
    border:2px solid #00bfe7;
    transition:background-color 0.5s ease
}
.cta__button:hover{
    background-color:rgba(0,191,231,0.1)
}
.cta--page{
    background-image:url(../img/cta/callto-bg-page.jpg)
}
.cta--page .cta-wrapper{
    text-align:center
}
.cta--page .cta__title{
    max-width:100%;
    margin-bottom:2.2rem;
    position:relative;
    font-family:"Play";
    font-style:normal;
    font-weight:700;
    font-size:4.2rem;
    text-transform:uppercase;
    color:#fff
}
.cta--page .cta__text{
    margin-bottom:5.5rem;
    text-transform:uppercase;
    font-family:"JosefinSans";
    font-style:normal;
    font-weight:400;
    font-size:1.5rem;
    line-height:2.4375rem;
    color:rgba(255,255,255,0.7)
}
.cta--page .cta__button{
    position:relative;
    display:inline-block;
    font:normal 700 1.5rem "Play";
    padding:1.5rem 3rem;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#fff;
    background-color:#00bfe7;
    border:2px solid #00bfe7;
    transition:background-color 0.5s ease
}
.cta--page .cta__button:hover{
    background-color:rgba(0,191,231,0.1)
}
.breadcrumb{
    padding:20rem 0 10rem;
    background-image:url(../img/breadcrumb/breadcrumb-bg.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center
}
.breadcrumb-wrapper{
    text-align:center
}
.breadcrumb__title{
    margin-bottom:1rem;
    position:relative;
    font-family:"Play";
    font-style:normal;
    font-weight:700;
    font-size:5rem;
    text-transform:none;
    color:#fff
}
.breadcrumb__links{
    font-family:"JosefinSans";
    font-style:normal;
    font-weight:400;
    font-size:1.8rem;
    line-height:2.925rem;
    color:#adadad
}
.breadcrumb__link{
    display:inline-block;
    margin-right:3rem;
    color:#fff;
    transition:color 0.5s ease
}
.breadcrumb__link:hover{
    color:#00bfe7
}
.breadcrumb__text{
    display:inline-block;
    position:relative
}
.breadcrumb__text::before{
    content:"/";
    position:absolute;
    top:0;
    left:-2rem;
    font-size:1.8rem
}
.about{
    padding:20rem 0 20rem
}
.about-wrapper{
    display:flex;
    justify-content:space-between
}
.about__gallery{
    width:50%;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    grid-template-rows:repeat(2, 24rem);
    grid-auto-rows:24rem;
    grid-gap:2rem
}
.about__gallery .gallery__item:nth-child(1){
    grid-row:span 2
}
.about__gallery .gallery__image{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:brightness(0.8);
    transition:filter 0.5s ease
}
.about__gallery .gallery__image:hover{
    filter:brightness(1.2)
}
.abt__gallery{
    width:50%;
    display:grid;
    grid-template-rows:repeat(2, 24rem);
    grid-auto-rows:24rem;
    grid-gap:2rem
}
.abt__gallery .gallery__image:hover{
    filter:saturate(8);
}
.about__info{
    width:50%;
    padding-left:6rem
}
.about__suptitle{
    margin-bottom:0.6rem;
    font-family:"JosefinSans";
    font-style:normal;
    font-weight:400;
    font-size:1.6rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#fff
}
.about__title{
    margin-bottom:7.5rem;
    position:relative;
    font-family:"Play";
    font-style:normal;
    font-weight:700;
    font-size:3.6rem;
    text-transform:uppercase;
    color:#fff
}
.about__title::after{
    left:0;
    content:"";
    position:absolute;
    bottom:-2.5rem;
    display:block;
    width:7rem;
    height:0.5rem;
    background-color:#00bfe7;
}
.about__cards{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
.about__card{
    margin-bottom:4rem;
}
#cards{
    width:100%;
}
.about .card:hover .card__image-wrapper::after{
    transform:rotate(45deg)
}
.about .card__image-wrapper{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:7rem;
    height:7rem;
    margin-bottom:2.6rem;
}
.about .card__image-wrapper::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:7rem;
    height:7rem;
    border:2px solid #00bfe7;
    transition:all 0.8s ease;
}
.about .card__image{
    width:3.5rem;
    height:3.5rem
}
.about .card__title{
    margin-bottom:1.8rem;
    position:relative;
    font-family:"Play";
    font-style:normal;
    font-weight:700;
    font-size:2.2rem;
    text-transform:none;
    color:#fff
}
.about .card__text{
    font-family:"JosefinSans";
    font-style:normal;
    font-weight:400;
    font-size:1.6rem;
    line-height:2.6rem;
    color:#adadad
}
.about__text{
    font-family:"JosefinSans";
    font-style:normal;
    font-weight:400;
    font-size:1.6rem;
    line-height:2.6rem;
    color:#adadad
}
.testimonials{
    padding:12rem 0 8rem;
    background-image:url(../img/testimonials/testimonials-bg.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center
}
.testimonials__info{
    margin-bottom:2rem
}
.testimonials__suptitle{
    text-align:center;
    margin-bottom:0.6rem;
    font-family:"JosefinSans";
    font-style:normal;
    font-weight:400;
    font-size:1.6rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#fff
}
.testimonials__title{
    text-align:center;
    margin-bottom:7.5rem;
    position:relative;
    font-family:"Play";
    font-style:normal;
    font-weight:700;
    font-size:3.6rem;
    text-transform:uppercase;
    color:#fff
}
.testimonials__title::after{
    left:50%;
    transform:translateX(-50%);
    content:"";
    position:absolute;
    bottom:-2.5rem;
    display:block;
    width:7rem;
    height:0.5rem;
    background-color:#00bfe7
}
.testimonials .card{
    width:90%;
    margin:0 auto
}
.testimonials .card__content{
    min-height:18rem;
    padding:3rem;
    margin-bottom:3rem;
    border:1px solid rgba(255,255,255,0.2)
}
.testimonials .card__text{
    font-family:"JosefinSans";
    font-style:italic;
    font-weight:400;
    font-size:1.8rem;
    line-height:2.925rem;
    color:#adadad
}
.testimonials .card__author{
    display:flex;
    align-items:center;
    padding-left:3rem
}
.testimonials .card__image-wrapper{
    width:6rem;
    min-width:6rem;
    height:6rem;
    border-radius:50%;
    margin-right:2rem
}
.testimonials .card__image{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%
}
.testimonials .card__name{
    margin-bottom:1rem;
    position:relative;
    font-family:"Play";
    font-style:normal;
    font-weight:700;
    font-size:1.8rem;
    text-transform:none;
    color:#fff
}
.testimonials .card__profession{
    font:normal 300 1.6rem "JosefinSans";
    color:#fff
}
.testimonials .owl-carousel .owl-dots{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:4rem
}
.testimonials .owl-carousel .owl-dots .owl-dot{
    display:inline-block;
    width:0.8rem;
    height:0.8rem;
    margin-right:1rem;
    border-radius:50%;
    background-color:rgba(255,255,255,0.2)
}
.testimonials .owl-carousel .owl-dots .owl-dot.active{
    background-color:#00bfe7
}
.portfolio{
    padding:10rem 0
}
.portfolio__nav{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    margin-bottom:3rem
}
.portfolio__nav-link{
    display:inline-block;
    padding:0.5rem 1.5rem;
    margin:0 0.5rem 1rem;
    border:1px solid transparent;
    transition:border 0.3s ease;
    font-family:"JosefinSans";
    font-style:normal;
    font-weight:400;
    font-size:1.6rem;
    line-height:2.6rem;
    color:#adadad
}
.portfolio__nav-link.active{
    border:1px solid #00bfe7
}
.portfolio__nav-link:last-child{
    margin-right:0
}
.portfolio__items{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    grid-template-rows:repeat(1, minmax(33rem, max-content));
    grid-auto-rows:minmax(33rem, max-content);
    grid-gap:3rem
}
.portfolio__image-wrapper{
    width:100%;
    height:24rem;
    margin-bottom:2rem
}
.portfolio__image{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:brightness(0.8);
    transition:filter 0.5s ease
}
.portfolio__image:hover{
    filter:brightness(1.2)
}
.portfolio__item.hide{
    display:none
}
.portfolio__item-title{
    display:block;
    margin-bottom:1rem;
    text-align:center;
    transition:color 0.5s ease;
    position:relative;
    font-family:"Play";
    font-style:normal;
    font-weight:700;
    font-size:2.2rem;
    text-transform:none;
    color:#fff
}
.portfolio__item-title:hover{
    color:#00bfe7
}
.portfolio__item-text{
    display:block;
    text-align:center;
    font-family:"JosefinSans";
    font-style:normal;
    font-weight:400;
    font-size:1.6rem;
    line-height:2.6rem;
    color:#adadad
}
.logos{
    padding:10rem 0
}
.logos .card{
    display:flex;
    align-items:center;
    justify-content:center
}
.logos .card__image-wrapper{
    height:9rem
}
.logos .card__image{
    height:100%;
    width:auto;
    max-width:10rem
}
.contact{
    padding:12rem 0
}
.contact-wrapper{
    display:flex;
    flex-wrap:wrap
}
.contact__links{
    display:flex;
    justify-content:space-between;
    width:100%;
    margin-bottom:4rem
}
.contact__links-item{
    display:flex;
    align-items:center;
    width:32%;
    margin-bottom:2rem
}
.contact__link{
    transition:color 0.5s ease;
    font-family:"JosefinSans";
    font-style:normal;
    font-weight:400;
    font-size:1.6rem;
    line-height:2.6rem;
    color:#adadad
}
.contact__link:hover{
    color:#00bfe7
}
.contact__link-icon{
    display:flex;
    justify-content:center;
    align-items:center;
    width:7rem;
    min-width:7rem;
    height:7rem;
    margin-right:3rem;
    border:1px solid rgba(255,255,255,0.5);
    border-radius:50%;
    font-size:3rem;
    color:#fff
}
.contact__link-text{
    margin-bottom:1rem;
    position:relative;
    font-family:"Play";
    font-style:normal;
    font-weight:700;
    font-size:2.2rem;
    text-transform:capitalize;
    color:#fff
}
.contact__link-dot{
    display:inline-block;
    margin:0 0.5rem
}
.contact__map{
    width:50%;
    height:45rem;
    padding-right:4rem
}
.contact #contact-map{
    height:100%;
    width:100%;
    border:none
}
.contact__form-wrapper{
    width:50%
}
.contact__title{
    margin-bottom:3.5rem;
    position:relative;
    font-family:"Play";
    font-style:normal;
    font-weight:700;
    font-size:3rem;
    text-transform:uppercase;
    color:#fff
}
.contact .form{
    display:flex;
    flex-direction:column
}
.contact .form__input,.contact .form__textarea{
    width:100%;
    height:5rem;
    margin-bottom:2rem;
    outline:none;
    border:1px solid rgba(255,255,255,0.2);
    padding:0 2rem;
    background-color:transparent;
    font:normal 400 1.6rem/5rem "JosefinSans";
    color:#adadad
}
.contact .form__input:focus,.contact .form__textarea:focus{
    outline:1px solid #00bfe7
}
.contact .form__textarea{
    resize:none;
    height:10rem;
    padding-top:1rem;
    line-height:1.25
}
.contact .form:invalid .form__input,.contact .form:invalid .form__textarea{
    box-shadow:none
}
.contact .form:invalid .form__button{
    cursor:not-allowed;
    pointer-events:none
}
.contact .form__button{
    position:relative;
    display:inline-block;
    font:normal 700 1.5rem "Play";
    padding:1.5rem 3rem;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#fff;
    background-color:#00bfe7;
    border:2px solid #00bfe7;
    transition:background-color 0.5s ease
}
.contact .form__button:hover{
    background-color:rgba(0,191,231,0.1)
}
@media (max-width: 1200px){
    .container{
        max-width:960px
    }
    .work-wrapper{
        grid-template-rows:repeat(2, 28.8rem);
        grid-auto-rows:28.8rem
    }
    .counter{
        padding:6rem 0
    }
    .counter-row:first-child{
        justify-content:flex-start;
        padding-left:10.53rem
    }
    .counter-row:first-child .counter__item{
        position:relative;
        width:30rem;
        height:30rem
    }
    .counter-row:first-child .counter__item:first-child{
        padding:3rem;
        border-left:1px solid #333333;
        border-bottom:1px solid #333333
    }
    .counter-row:first-child .counter__item:first-child::before{
        display:none
    }
    .counter-row:first-child .counter__item:last-child{
        padding:3rem;
        border-left:1px solid #333333;
        border-bottom:1px solid #333333
    }
    .counter-row:first-child .counter__item:last-child::before{
        display:none
    }
    .counter-row:last-child{
        justify-content:flex-end;
        padding-right:10.53rem
    }
    .counter-row:last-child .counter__item{
        position:relative;
        width:30rem;
        height:30rem
    }
    .counter-row:last-child .counter__item:first-child{
        padding:3rem;
        border-left:1px solid #333333;
        border-bottom:1px solid #333333
    }
    .counter-row:last-child .counter__item:first-child::before{
        display:none
    }
    .counter-row:last-child .counter__item:last-child{
        padding:3rem;
        border-left:1px solid #333333;
        border-bottom:1px solid #333333
    }
    .counter-row:last-child .counter__item:last-child::before{
        display:none
    }
    .blog__slider .card{
        width:30rem;
        margin:0 auto
    }
    .contact__links{
        flex-wrap:wrap
    }
    .contact__links-item{
        width:50%
    }
}
@media (max-width: 991px){
    .container{
        max-width:700px
    }
    .header{
        border-bottom:none
    }
    .header__social{
        display:none
    }
    .header-wrapper{
        position:relative
    }
    .header__nav{
        margin-right:0
    }
    .header__nav::after{
        display:none
    }
    .header .nav{
        position:absolute;
        top:5.5rem;
        right:0;
        z-index:100;
        padding:2rem;
        height:auto;
        background:#171717;
        transition:opacity 0.5s ease
    }
    .header .nav__list{
        flex-direction:column;
        align-items:flex-end
    }
    .header .nav__item{
        margin-left:0;
        margin-bottom:2.5rem
    }
    .header .nav--hidden{
        display:none
    }
    .header .mmenu{
        display:block
    }
    .intro{
        padding:22rem 0 10rem
    }
    .intro__item{
        padding-bottom:8rem
    }
    .intro__suptitle{
        margin-bottom:1.5rem
    }
    .intro__title{
        margin-bottom:3rem;
        font:normal 700 5rem/6rem "Play"
    }
    .intro .owl-carousel .owl-dots{
        bottom:2rem
    }
    .services-wrapper{
        flex-direction:column
    }
    .services__info{
        width:100%;
        padding-right:0;
        margin-bottom:6rem
    }
    .services__title{
        margin-bottom:6rem
    }
    .services__text{
        margin-bottom:3rem
    }
    .services__cards{
        width:100%
    }
    .services--all .services__cards .card{
        width:47.5%
    }
    .work-wrapper{
        grid-template-columns:repeat(4, 1fr);
        grid-template-rows:repeat(3, 28.8rem)
    }
    .counter-wrapper{
        padding:0;
        transform:rotate(0deg)
    }
    .counter-row:first-child{
        justify-content:center;
        padding-left:0
    }
    .counter-row:first-child .counter__item{
        height:30rem
    }
    .counter-row:first-child .counter__item:first-child{
        width:50%;
        border-top:1px solid #333333
    }
    .counter-row:first-child .counter__item:last-child{
        width:50%;
        border-top:1px solid #333333;
        border-right:1px solid #333333
    }
    .counter-row:last-child{
        justify-content:center;
        padding-right:0
    }
    .counter-row:last-child .counter__item{
        height:30rem
    }
    .counter-row:last-child .counter__item:first-child{
        width:50%
    }
    .counter-row:last-child .counter__item:last-child{
        width:50%;
        border-right:1px solid #333333
    }
    .counter__content{
        transform:rotate(0)
    }
    .team{
        padding:10rem 0 6rem
    }
    .team__title{
        margin-bottom:6rem
    }
    .team__cards{
        flex-wrap:wrap;
        margin-bottom:4rem
    }
    .team__cards .card{
        width:50%;
        max-width:100%
    }
    .team__cards .card:nth-child(2){
        margin-top:0
    }
    .team__cards .card:nth-child(3){
        margin-top:0
    }
    .team__cards .card:nth-child(4){
        margin-top:0
    }
    .blog{
        padding:10rem 0 6rem
    }
    .blog__title{
        margin-bottom:6rem
    }
    .blog__slider .card{
        width:33.5rem
    }
    .cta{
        padding:10rem 0
    }
    .cta__title{
        max-width:80%;
        margin-bottom:2rem
    }
    .cta__text{
        margin-bottom:4rem
    }
    .cta--page .cta__title{
        margin-bottom:2rem
    }
    .cta--page .cta__text{
        margin-bottom:4rem
    }
    .footer-wrapper{
        padding:6rem 0;
        flex-wrap:wrap
    }
    .footer .footer-item:nth-child(1){
        width:80%;
        margin-bottom:4rem;
        padding-right:4rem
    }
    .footer .footer-item:nth-child(2){
        width:20%;
        margin-bottom:4rem
    }
    .footer .footer-item:nth-child(3){
        width:20%;
        order:2
    }
    .footer .footer-item:nth-child(4){
        width:80%;
        padding-right:4rem
    }
    .footer .footer-item__title{
        margin-bottom:2.5rem
    }
    .about{
        padding:10rem 0 8rem
    }
    .about-wrapper{
        flex-direction:column
    }
    .about__gallery{
        width:100%;
        order:2
    }
    .about__info{
        width:100%;
        padding-left:0;
        margin-bottom:4rem
    }
    .testimonials{
        padding:10rem 0 6rem
    }
    .testimonials__title{
        margin-bottom:6rem
    }
    .portfolio{
        padding:8rem 0
    }
    .portfolio__items{
        grid-template-columns:repeat(2, 1fr)
    }
    .blogpage{
        padding:10rem 0
    }
    .blogpage-wrapper{
        grid-template-columns:repeat(2, 1fr)
    }
    .contact{
        padding:10rem 0
    }
    .contact__map{
        width:100%;
        height:32rem;
        padding-right:0;
        order:3
    }
    .contact__form-wrapper{
        width:100%;
        margin-bottom:4rem
    }
}
@media (max-width: 767px){
    .abt__gallery{
        width:100%;
        display:grid;
        grid-template-rows:repeat(2, 24rem);
        grid-auto-rows:24rem;
        grid-gap:2rem
    }
    .container{
        max-width:576px;
        width:90%
    }
    .intro{
        padding:16rem 0 8rem
    }
    .intro__item{
        max-width:100%;
        padding-bottom:6rem
    }
    .intro__title{
        margin-bottom:2.5rem;
        font:normal 700 4rem/5rem "Play"
    }
    .intro .owl-carousel .owl-dots{
        bottom:0
    }
    .services{
        padding:9rem 0 6rem
    }
    .services__info{
        margin-bottom:4rem
    }
    .services__title{
        margin-bottom:4rem
    }
    .services__text{
        margin-bottom:2rem
    }
    .services__card{
        margin-bottom:3rem
    }
    .services .card__title{
        font-size:2rem
    }
    .work-wrapper{
        grid-template-columns:repeat(3, 1fr)
    }
    .counter{
        padding:4rem 0
    }
    .counter-row:first-child .counter__item,.counter-row:last-child .counter__item{
        height:28.8rem
    }
    .counter-row:first-child .counter__item:first-child,.counter-row:first-child .counter__item:last-child,.counter-row:last-child .counter__item:first-child,.counter-row:last-child .counter__item:last-child{
        width:100%;
        padding:3rem 2rem;
        border:none
    }
    .team{
        padding:8rem 0 4rem
    }
    .team__cards .card{
        height:32rem
    }
    .blog{
        padding:8rem 0 4rem
    }
    .blog__slider .card{
        width:99%;
        min-height:24rem;
        padding:3rem
    }
    .cta{
        padding:8rem 0
    }
    .cta__title{
        max-width:100%;
        font-size:3.6rem
    }
    .cta__text{
        margin-bottom:3rem
    }
    .cta--page .cta__title{
        font-size:3.6rem
    }
    .cta--page .cta__text{
        margin-bottom:3rem
    }
    .footer-wrapper{
        padding:5rem 0
    }
    .footer .footer-item:nth-child(1){
        width:70%;
        padding-right:3rem
    }
    .footer .footer-item:nth-child(2){
        width:30%
    }
    .footer .footer-item:nth-child(3){
        width:30%
    }
    .footer .footer-item:nth-child(4){
        width:70%;
        padding-right:3rem
    }
    .footer .footer-item__title{
        margin-bottom:2rem
    }
    .footer-copyright{
        flex-direction:column
    }
    .footer-copyright__text{
        text-align:center
    }
    .footer-copyright__text:first-child{
        margin-bottom:1rem;
        margin-right:0
    }
    .footer-copyright__text:first-child::after{
        display:none
    }
    .breadcrumb{
        padding:16rem 0 8rem
    }
    .about{
        padding:8rem 0 6rem
    }
    .testimonials{
        padding:8rem 0 6rem
    }
    .testimonials .card{
        width:96%
    }
    .testimonials .card__content{
        margin-bottom:2rem
    }
    .testimonials .card__author{
        padding-left:2rem
    }
    .testimonials .owl-carousel .owl-dots{
        margin-top:3rem
    }
    .portfolio{
        padding:6rem 0
    }
    .portfolio__nav-link{
        padding:0.5rem
    }
    .portfolio__items{
        grid-template-columns:repeat(1, 1fr)
    }
    .portfolio__image-wrapper{
        height:28.8rem
    }
    .logos{
        padding:8rem 0
    }
    .blogpage{
        padding:8rem 0
    }
    .blogpage-wrapper{
        grid-template-columns:repeat(1, 1fr);
        grid-template-rows:repeat(3, minmax(24rem, max-content));
        grid-auto-rows:minmax(24rem, max-content)
    }
    .blogpage-wrapper .card{
        padding:3rem
    }
    .contact{
        padding:8rem 0
    }
    .contact__links-item{
        width:100%
    }
    .contact__map{
        height:28.8rem
    }
    .contact__form-wrapper{
        width:100%;
        margin-bottom:4rem
    }
}
@media (max-width: 575px){
    .abt__gallery{
        width:100%;
        display:grid;
        grid-template-rows:repeat(2, 24rem);
        grid-auto-rows:24rem;
        grid-gap:2rem
    }
    .intro__item{
        padding-bottom:4rem
    }
    .intro__title{
        margin-bottom:2rem;
        font:normal 700 3rem/3.8rem "Play"
    }
    .services__info{
        margin-bottom:3rem
    }
    .services__title{
        margin-bottom:3rem
    }
    .services__text{
        margin-bottom:1rem
    }
    .services__cards{
        width:100%
    }
    .services .card{
        width:100%
    }
    .services--all .services__cards .card{
        width:100%
    }
    .work-wrapper{
        grid-template-columns:repeat(2, 1fr);
        grid-template-rows:repeat(4, 28.8rem)
    }
    .work__item:nth-child(1){
        grid-column:span 1
    }
    .work__item:nth-child(4){
        grid-column:span 1;
        grid-row:span 1
    }
    .counter{
        padding:3rem 0
    }
    .counter-row:first-child .counter__item:first-child,.counter-row:first-child .counter__item:last-child,.counter-row:last-child .counter__item:first-child,.counter-row:last-child .counter__item:last-child{
        padding:2rem 1rem
    }
    .team{
        padding:6rem 0 3rem
    }
    .team__cards .card{
        min-width:28.8rem;
        width:66%;
        height:39rem;
        margin:0 auto 2rem
    }
    .team__cards .card:last-child{
        margin-bottom:0
    }
    .blog{
        padding:6rem 0 3rem
    }
    .cta{
        padding:6rem 0
    }
    .cta__title{
        font-size:3.2rem
    }
    .cta--page .cta__title{
        font-size:3.2rem
    }
    .footer-social{
        flex-direction:column
    }
    .footer__logo{
        margin-bottom:1rem;
        }

      
    .footer-wrapper{
        padding:4rem 0
    }
    .footer .footer-item:nth-child(1){
        width:100%;
        padding-right:0
    }
    .footer .footer-item:nth-child(2){
        width:50%
    }
    .footer .footer-item:nth-child(3){
        width:50%;
        order:3;
        margin-bottom:4rem
    }
    .footer .footer-item:nth-child(4){
        width:100%;
        padding-right:0;
        order:4
    }
    .about{
        padding:6rem 0 3rem
    }
    .about__info{
        margin-bottom:3rem
    }
    .about__gallery{
        grid-template-rows:repeat(2, 20rem);
        grid-auto-rows:20rem;
        grid-gap:1.5rem
    }
    .about__cards{
        /*flex-direction:column*/
    }
    .about__card{
        margin-bottom:3rem;
        text-align:center
    }
    .about .card{
        width:100%
    }
    .about .card__image-wrapper{
        margin:0 auto 2rem
    }
    .about__text{
        text-align:center
    }
    .logos{
        padding:6rem 0
    }
    .blogpage{
        padding:6rem 0
    }
    .contact{
        padding:6rem 0
    }
    .contact__links-item--phones .contact__link{
        display:block
    }
    .contact__links-item--phones .contact__link-dot{
        display:none
    }
}
@media (max-width: 420px){
    .about__gallery{
        grid-template-columns:repeat(1, 1fr);
        grid-template-rows:repeat(2, 24rem);
        grid-auto-rows:24rem
    }

    body {
		overflow: scroll;
	}
	.frame {
		position: fixed;
		text-align: left;
		z-index: 10000;
		display: grid;
		align-content: space-between;
		width: 100%;
		max-width: none;
		height: 5ovh;
		padding: 1.25rem 3rem;
		pointer-events: none;
		grid-template-columns: 80% 20%;
		grid-template-rows: auto auto auto;
		grid-template-areas: 'page-title links'
							'... ...'
							'indicator sub-title';
	}
	.frame__title-wrap{
		grid-area: page-title;
		display: flex;
	}
	.frame__title {
		margin: 0;
	}
	.frame__subtitle {
		grid-area: sub-title;
		justify-self: end;
		margin: 0;
	}
	.frame__links {
		padding: 0;
		margin: 0 0 0 2rem;
	}
	.frame__indicator {
		grid-area: indicator;
		margin: 0;
	}
	.content__item {
		top: 0;
		grid-template-columns: 40% 45% 15%;
		grid-template-rows: 100%;
		grid-template-areas: 'content-copy content-img ... ';
	}
	.content__item-copy {
		max-width: 240px;
		justify-self: end;
		align-self: end;
		text-align: right;
	}
	.strip-cover__title {
		font-size: 15vw;
		-webkit-text-stroke: 2px var(--color-cover);
		text-stroke: 2px var(--color-cover);
	}
	.strip-cover__subtitle {
		font-size: 3rem;
	}
}

@import url('https://fonts.googleapis.com/css?family=Audiowide');
#text{
    font-family: Audiowide, cursive;
    font-size: 32px;
    color: rgb(219, 254, 255);
    text-decoration: none;
   }

   #logo{
    height: 40px;
   }
 /*# sourceMappingURL=style.css.map */

 mainf {
	position: relative;
	height: ;
	display: flex;
	flex-direction: column;
}
.frame {
	padding: 1.5rem;
	position: absolute;
	top: 0;
	left: 0;
    right: 0;
	z-index: 1000;
	pointer-events: none;
    max-width: 968px;
    display: flex;
justify-content: center;

}

.frame a {
	pointer-events: auto;
}

.frame__title {
	font-size: 1rem;
	margin: 0 0 0.5rem;
	font-weight: normal;
}

.frame__links {
	display: flex;
	margin: 0.5rem 0;
}

.frame__links a {
	margin: 0 0.35rem;
	padding: 0 0.35rem;
	position: relative;
}

.frame__links a:first-child {
	margin-left: 0;
	padding-left: 0;
}

.frame__links a:not(:last-child)::after {
	content: '';
	width: 1px;
	height: 1rem;
	background: var(--color-link);
	position: absolute;
	left: calc(100% + 0.35rem);
	top: calc(50% - 0.5rem);
	pointer-events: none;
}

.frame__subtitle {
	font-weight: normal;
	font-size: 1rem;
	margin: 0.5rem 0 1rem;
}

.frame__indicator {
	background: var(--color-indicator);
	width: 3rem;
	height: 0.5rem;
	transform-origin: 0 50%;
}

.strip-outer {
	width: 100%;
	height: 50vh !important;
	min-height: 750px;
	margin: auto;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: none;
}

.strip-inner {
	position: relative;
	top: 0;
	height: 100%;
	width: -moz-fit-content;
	width: fit-content;
}

.draggable {
	height: 500px;
	top: calc(50% - 250px);
	width: 100%; 
	position: absolute;
	cursor: grab;
}

.draggable:active {
	cursor: grabbing;
}

.strip {
	height: 100%;
	width: -moz-fit-content;
	width: fit-content;
	display: flex;
	align-items: start;
	position: relative;
	pointer-events: none;
}

.strip__item {
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column-reverse;
	justify-content: center;
    width: 100%;
}


.strip-outer {
	width: 100%;
	height: 100vh;
	min-height: 750px;
	margin: auto;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: none;
}

.strip-inner {
	position: relative;
	top: 0;
	height: 100%;
	/width: -moz-fit-content;
	width: fit-content;
}

.draggable {
	height: 500px;
	top: calc(50% - 250px);
	width: 100%;
	position: absolute;
	cursor: grab;
}

.draggable:active {
	cursor: grabbing;
}

.strip {
	height: 100%;
	width: -moz-fit-content;
	width: fit-content;
	display: flex;
	align-items: start;
	position: relative;
	pointer-events: none;
}

.strip__item {
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column-reverse;
	justify-content: center;
}

.img-outer {
	--imgheight: 450px;
	height: var(--imgheight);
	width: calc(var(--imgheight) * 0.7);
	overflow: hidden;
	position: relative;
	flex: none;
}

.img-outer--size-s {
	--imgheight: 300px;
}

.img-outer--size-m {
	--imgheight: 360px;
}

.img-outer--size-l {
	--imgheight: 390px;
}

.img-outer--size-xl {
	--imgheight: 420px;
}

.img-inner {
	width: calc(100% + 40px);
	height: calc(100% + 40px);
	left: -20px;
	top: -20px;
	background-size: cover;
	background-position: 50% 50%;
	position: absolute;
}

.strip__item-number {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.strip__item-link {
	pointer-events: auto;
	cursor: pointer;
	display: block;
	position: relative;
}

.strip__item-link::before {
	content: '';
	position: absolute;
	width: 160%;
	height: 120%;
	left: -30%;
	top: -10%;

}



.strip__item-link span {
	display: block;
}

.strip__item-plus {
	display: none;
	width: 13px;
	height: 13px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 6h6v1H7v6H6V7H0V6h6V0h1v6z' fill='%23505050'/%3e%3c/svg%3e");
	background-size: 100%;
}

.strip__item-link:hover + .strip__item-plus {
	display: block;
}

.strip-cover {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: var(--color-cover);
	pointer-events: none;
	opacity: 0;
}

.strip-cover__title {
	font-family: fleisch-wolf, sans-serif;
	font-weight: 400;
	font-size: 20vw;
	margin: 0;
	line-height: 1;
	-webkit-text-stroke: 1px var(--color-cover);
	text-stroke: 1px var(--color-cover);
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
	color: transparent;
}

.strip-cover__subtitle {
	font-size: 1.5rem;
	margin: 0;
}

.content {
	top: 0;
	position: absolute;
	height: 100vh;
	width: 100%;
	z-index: 1000;
}

.js .content {
	pointer-events: none;
}

.content__item {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	height: 100vh;
	display: grid;
	align-items: center;
	grid-template-rows: 50% 40% 10%;
	grid-column-gap: 0;
	grid-template-areas: 'content-img' 'content-copy' '...';
	display: none;
}

.js .content__item {
	height: 100%;
	opacity: 0;
	pointer-events: none;
}

.js .content__item--current {
	pointer-events: auto;
	opacity: 1;
	top: 0;
	display: grid;
}

.img-outer--content {
	height: 100%;
	width: auto;
	grid-area: content-img;
}

.img-inner--content {
	background-position: 50% 35%;
}

.content__item-title {
	font-weight: normal;
	color: var(--color-content-title);
}

.content__item-copy {
	grid-area: content-copy;
	padding: 1.5rem 2rem;
	color: var(--color-copy);
}

.content__item-text {
	margin: 0;
}

.content__close {
	display: block;
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	color: inherit;
	opacity: 0;
	pointer-events: none;
	cursor: pointer;
	position: absolute;
	bottom: 1.5rem;
	left: 3rem;
}

.content__item--current ~ .content__close {
	pointer-events: auto;
}

.content__close svg {
	fill: currentColor;
}

.content__close:focus,
.content__close:hover {
	outline: none;
	color: #fff;
}

/* Will-change */
.strip,
.strip__item,
.cursor__side,
.content__close,
.content__item-title,
.content__item-copy {
	will-change: transform;
}

@media (any-pointer: fine) {
	.cursor {
		display: block;
	}
	.cursor__inner {
		z-index: 9999;
		pointer-events: none;
		position: absolute;
		top: 0;
		left: 0;
		mix-blend-mode: difference;
		border-radius: 50%;
	}
	.cursor__side {
		position: absolute;
		top: 50%;
		width: 5px;
		height: 1px;
		background: #fff;
		opacity: 0;
	}
	.cursor__side--left {
		right: calc(100% + 5px);
	}
	.cursor__side--right {
		left: calc(100% + 5px);
	}
	.cursor__inner--circle {
		width: 25px;
		height: 25px;
		border: 1px solid #fff;
	}
}






.footer{
    background-color:#0a0119
}
.footer-social{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:3rem 0;
    border-bottom:1px solid rgba(255,255,255,0.1)
}
.footer__social-links{
    display:flex;
    align-items:center
}
.footer__social-links .social__link{
    display:flex;
    justify-content:center;
    align-items:center;
    width:4rem;
    height:4rem;
    border-radius:50%;
    margin-left:1rem;
    background-color:rgba(255,255,255,0.1);
    color:#fff;
    font-size:1.5rem;
    transition:color 0.5s ease
}
.footer__social-links .social__link:hover{
    color:#00bfe7
}
.footer-wrapper{
    display:flex;
    justify-content:space-between;
    padding:7.5rem 0 3.5rem
}
.footer .footer-item:nth-child(1){
    width:35%;
    padding-right:3rem
}
.footer .footer-item:nth-child(2),.footer .footer-item:nth-child(3){
    width:15%
}
.footer .footer-item:nth-child(4){
    width:35%
}
.footer .footer-item__title{
    margin-bottom:3.5rem;
    position:relative;
    font-family:"Play";
    font-style:normal;
    font-weight:700;
    font-size:1.8rem;
    text-transform:none;
    color:#fff
}
.footer .footer-item__text{
    margin-bottom:2rem;
    font-family:"JosefinSans";
    font-style:normal;
    font-weight:400;
    font-size:1.6rem;
    line-height:2.6rem;
    color:#adadad
}
.footer .footer-item__read-link{
    display:flex;
    align-items:center;
    margin-top:auto;
    margin-bottom:0;
    font:normal 400 1.6rem "JosefinSans";
    color:#fff;
    transition:color 0.5s ease
}
.footer .footer-item__read-link:hover{
    color:#00bfe7
}
.footer .footer-item__read-icon{
    margin-left:1rem;
    font-size:1.4rem
}
.footer .footer-item__li{
    margin-bottom:1rem
}
.footer .footer-item__li:last-child{
    margin-bottom:0
}
.footer .footer-item__link{
    transition:color 0.5s ease;
    font-family:"JosefinSans";
    font-style:normal;
    font-weight:400;
    font-size:1.6rem;
    line-height:2.6rem;
    color:#adadad
}
.footer .footer-item__link:hover{
    color:#00bfe7
}
.footer .footer-item .form{
    position:relative
}
.footer .footer-item .form__input{
    width:100%;
    height:5rem;
    outline:none;
    border:1px solid rgba(255,255,255,0.2);
    padding:0 7rem 0 2rem;
    background-color:transparent;
    font:normal 400 1.6rem/5rem "JosefinSans";
    color:#adadad
}
.footer .footer-item .form__input:focus{
    outline:1px solid #00bfe7
}
.footer .footer-item .form:invalid .form__input{
    box-shadow:none
}
.footer .footer-item .form:invalid .form__button{
    cursor:not-allowed;
    pointer-events:none
}
.footer .footer-item .form__button{
    position:absolute;
    right:0;
    bottom:0;
    top:0;
    z-index:10;
    width:5rem;
    height:5rem;
    background-color:#00bfe7;
    border:2px solid #00bfe7;
    transition:background-color 0.5s ease
}
.footer .footer-item .form__button-icon{
    font-size:1.8rem;
    line-height:5rem;
    color:#fff
}
.footer .footer-item .form__button:hover{
    background-color:rgba(0,191,231,0.1)
}
.footer-copyright{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:3rem 0 8rem;
    border-top:1px solid rgba(255,255,255,0.1)
}
.footer-copyright__text{
    display:inline-block;
    font-family:"JosefinSans";
    font-style:normal;
    font-weight:400;
    font-size:1.6rem;
    line-height:2.6rem;
    color:#adadad
}
.footer-copyright__text:first-child{
    position:relative;
    margin-right:3rem
}
.footer-copyright__text:first-child::after{
    content:"|";
    position:absolute;
    top:0;
    right:-1.8rem
}
.footer-copyright__icon{
    font-size:1.6rem;
    color:#00bfe7
}
.footer-copyright__link{
    color:#00bfe7;
    transition:color 0.5s ease
}
.footer-copyright__link:hover{
    color:#fff
}

@media screen and (min-width: 53em) {

.strip-cover__subtitle {
	font-size: 3rem;
}
}



.radial-gradient {
    position:fixed;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
    
    /*Fallback if gradeints don't work */
    background: #100028;
    /*Linear gradient... */
    background: 
      radial-gradient(
       at center, #100028, #9b59b6
      );
  }



.body {
      display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding:10px;
    font-family: 'Roboto Mono', monospace;
  }
  
  .wave {
    float: left;
    margin: 20px;
    animation: wave  ease-in-out 0.5s infinite alternate;
    transform-origin: center -36px;
  }
  
  .wave:hover {
    animation-play-state: paused;
    cursor: pointer;
  }
  
  .wave img {
    border: 5px solid #f8f8f8;
    display: block;
    width: 200px;
    height: 250px;
  }
  
  .wave figcaption {
    text-align: center;
  }
  
  .wave:after{
    content: '';
    position: absolute;
    width: 20px; 
    height: 20px;
    border: 1.5px solid #ffffff;
    top: -10px; 
    left: 50%;
    border-bottom: none;
    border-right: none;
    transform: rotate(35deg);
  }
         
  .wave:before{
    content: '';
    position: absolute;
    top: -23px;
    left: 50%;
    display: block;
    height: 44px;
    width: 47px;
    background-image: url(https://cdn.hashnode.com/res/hashnode/image/upload/v1602040503586/FW6g79WBY.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    z-index: 16;
  }
          
  @keyframes wave {
    0% { transform: rotate(10deg); }
    100% { transform: rotate(-10deg); }
  }
  
  @keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@media (max-width: 575px){
.footer .footer-item:nth-child(4){
    width: 96%;

}
.footer .footer-item:nth-child(1) {
    width: 89%;
    padding-right: 3rem;
  }
.footer .footer-item:nth-child(2), .footer .footer-item:nth-child(3) {
    width: 37%;
  }
  .footer .footer-item:nth-child(2), .footer .footer-item:nth-child(3) {
    width: 37%;
  }
  .footer .footer-item:nth-child(4) {
    width: 96%;
  }
}