.main
{
  background-image: url(/img/main.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 58em;
  background-color: black;
}
.title
{
    font-family: Poppins;
    font-weight: 900;
    font-size: 8em;
   text-align: center;
   padding-top: 2em;
   color: rgb(255,254,254);
}
.subtitle
{
    font-family: Poppins;
    font-size: 1.5em;

   text-align: center;
   padding-top: 2em;
   color: rgb(255,254,254);
}
.read_more
{
    background-color: rgb(240,93,87);
    width: 290px;
    height: 70px;
    text-align: center;
    margin: 2.5em auto;
    border: 2px solid rgb(240,93,87);

}
.read_more:hover
{
    background-color: transparent;
    border: 2px solid rgb(255,254,254);
    transition: .3s;
}
.read_more>a
{
    font-family: Poppins;
    font-size: 1.2em;
    color:rgb(255,254,254) ;
    text-decoration: none;
    text-align: center;
    display: flex;
    justify-content: center;
    padding-top: 20px;

}
.qualitie
{
    background-color:rgb(60,65,76) ;
    width: 100%;
    height: 100vh;
}
.about
{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    width: 90%;
    margin: 0 auto;
    text-align: center;

}
.items
{
    display: block;
    margin: 4em auto;
}

.image>img
{
    width: 90px;
    height: 90px;

}
.name
{
    font-family: Poppins;
    font-weight: 500;
    font-size: 1.4em;
    color:rgb(255,254,254) ;
    margin-top: 1em;
}
.description
{
    font-family: Poppins;
    margin-top: 1em;
    font-size: 1.2em;
    color: rgb(168,169,173);

}
.section3
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: 70vh;

}
.picture
{
    background-image: url(/img/about.jpg);
    background-size: cover;
}
.text_block
{
    display: inline-grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    background-color:rgb(207,216,220) ;
}
.heading,.sub_heading,.free_text
{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.text_block *
{
    position: relative;
    font-family: Poppins;
}
.heading>h2
{
    font-size: 42px;
    font-weight: normal;
    font-style: normal;
    line-height: 1.28;
}
.sub_heading>h4
{
    font-weight: 500;
    font-size: 22px;
    font-style: normal;
}
.free_text>p{
    font-size: 22px;
    font-weight: 300;
}
.read_more2
{
    background-color: rgb(240,93,87);
    width: 290px;
    height: 70px;
    text-align: center;
    margin-left: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid rgb(240,93,87);
    outline: 0;
}
.read_more2:hover
{
    background-color: transparent;
    border: 2px solid  rgb(240,93,87);
    transition: .3s;
    cursor: pointer;
}
.read_more2>a:hover{
    color:rgb(240,93,87);

}
.read_more2>a
{
    font-family: Poppins;
    font-size: 1.2em;
    color:rgb(255,254,254) ;
    text-decoration: none;
    text-align: center;
    display: flex;
    justify-content: center;

}
.heading,.sub_heading,.free_text
{
    margin-left: 2em;
}
.stats
{
    width: 100%;
    height: 55vh;
    background-image: url("/img/bec.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;

    align-items: center;
    justify-content: space-between;

}
.stats__items{
    text-align: center;
    font-family: 'Poppins';
    color: white;
    width: 100%;
    margin: 0 auto;
    font-size: 1.3em;

}
.progress-number {
    margin: 1em auto;
    text-align: center;
    font-size: 2em;
    font-family: 'Poppins';
    color: white;
    font-weight: bold;
  }
/* media */
@media screen and (max-width:1440px)
{
    .stats{
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(40%,1fr));
        height: auto;
        padding-bottom: 5em;
    }
    .stats .card{
        padding-top: 8em;

    }

    .card .circle .box span{
        left: 1.2em;
        top: -2.9em;
    }
    .title{
        font-size: 7em;
    }
    .qualitie{
        height: auto;
    }
    .picture{
        width: 100%;
        height: 90vh;
        padding-top: 5em;
    }
    .section3{
        height: auto;
    }
    .titlu>h3{
        padding-top: 5em;
    }


}
@media screen and (max-width: 1024px)
{
    .title{
        font-size: 6em;
    }
    .section3{
            display: block;
            height: auto;
    }
    .picture{
        width: 100%;
        height: 50vh;

    }
    .stats .card .circle {
       width: auto;
    }
    .qualitie{
        height: auto;
    }
    .picture{
        width: 80%;
        margin: 0 auto;
        height: 100vh;
    }
    .titlu>h3{
        padding-top: 5em;
    }
}
@media screen and (max-width:768px)
{


    .stats .card{
        padding-top: 10em;
        padding-bottom: 10em;
    }
    .titlu>h3{
        padding-top: 5em;
    }
    .about{
        display: grid;
        width: 90%;
        -moz-column-gap: 20px;
             column-gap: 20px;
        grid-template-columns: repeat(2,1fr);
       row-gap: 1px;
    }
    .items .description{
        text-align: justify;
    }
    .qualitie
    {
        height: auto;
    }
    .title{
        font-size: 4em;
    }
    .subtitle{
        width: 80%;
        margin: 0 auto;
    }
    .read_more{
        margin-top: 5em;

    }
    .main{
        height: 40em;
    }
    .text_block{
        text-align: center;

    }
    .text_block *{
        width: 90%;
        margin: 0 auto;
        text-align: justify;
    }
    .burger{
        display: block !important;

    }
    .menu{
        display: none;
    }

    .footer>img{
        padding-top: 2.5em;
    }
    .picture{
        height: 95vh;
        width: 100vw;
    }

}
@media screen and (max-width:425px)
{
    .title{
        font-size: 2.8em;
    }
    .about{
        display: grid;
        grid-template-columns: repeat(1,1fr);
    }
    .picture {
        height: 55vh;
    }
    .titlu>h3{
        padding-top: 5em;
    }
    .stats{
        grid-template-columns: repeat(1,1fr);
    }
    .description
    {
        font-size: 1.555em;
    }
    .hai-sus{
        right: 20px !important;
    }
    .copyright{
        display: block;
        width: 90%;
        margin: 0 auto;
        font-size: 1.2em;
        padding-bottom: 4em;
    }
}
@media screen and (max-width:375px){
    .picture{
        height: 48vh;
    }
    .titlu>h3{
        padding-top: 5em;
    }
}
@media screen and (max-width:320px){
    .title{
        font-size: 2em;
        letter-spacing: 3px;
    }
    .subtitle{
        width: 100%;
    }
    .picture{
        height: 40vh;
    }
    .header>img{
        width: 100% !important;
        padding-top: 1em !important;
    }
    .footer>img{
        width: 100% !important;
    }
    .heading{
        padding-top: 6em;
    }
    .hai-sus{
        right: 15px;
        display: block !important;
    }
    .titlu>h3{
        padding-top: 5em;
    }
    .text_block {

        grid-template-rows: 10% 1fr 1fr 1fr;

    }
}

.backgroud
  {
      background-image: url("/img/main2.jpg");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      height:68vh;
  }
  .main_title>h1
  {
    font-family: Poppins;
    font-size: 5.3em;
    position: relative;
   text-align: center;
    top: 1.2em;
    color: white;
    font-style: normal;
    line-height: 1.14;
    font-weight: 500;
  }
  .subdescription>p
  {
    font-style: normal;
    font-weight: 500;
    font-size: 1.5em;
    line-height: 1.63;
    color: white;
    position: relative;
    top: 7em;
    width: 60%;
    left: 7.3em;
    font-family: Poppins, sans-serif;
    letter-spacing: 0px;
    text-align: inherit;
  }
  .all_content
  {
      background-color: rgb(207,216,220) ;
      height: auto;
  }
  .section
  {
      display: grid;
      margin: 0 auto;
      width: 90%;
      /* grid-template-rows: repeat(8,1fr); */
  }

  .principal:last-child
  {
     border: none;
  }
  .principal
  {
      border-bottom: 1px solid rgb(53,53,53);
      padding: 5em 0 5em 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      overflow: hidden;
  }
  .imagine{
      width: 800px;

  }
.imagine>img{
    max-width: 100%;
    max-height: 100%;
    padding-top: 1em;
}
  .text>h2
  {
      font-family: Poppins;
      font-size: 43px;
      margin-left: .78em;
      font-weight: normal;
      text-align: center;
  }
  .text>p,.text>pre
  {
      font-family: Poppins;
      padding-top: 2em;
      margin-left: 2em;
      font-size: 1.1em;
      color: rgb(156,158,159);
      white-space: pre-line;       /* Since CSS 2.1 */

  }


@media screen and (max-width:1440px){
    .backgroud{
        height: 70vh;
    }
    .imagine{
        margin: 0 auto;
    }
    .text>h2{
        text-align: center;
        font-size: 2.4em;
    }
    .text>pre{
        width: 100%;

    }
    .section{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
    .principal{
        grid-template-columns: 1fr;
    }
}
@media screen and (max-width:1024px){

    .imagine>img{
        max-width: 100%;
    }
    .main_title>h1{
        font-size: 4em;
    };
}
@media screen and (max-width:844px){
    .imagine{
        width: 500px;

    }
    .imagine>img{
        max-width: 100%;

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

    .principal{
        padding-top: 3em;
    }
    .imagine{
        width: 600px;

    }
    .imagine>img{
        max-width: 100%;

    }
    .principal{
        display: block;
    }
    .hai-sus{
        right: 100px;
    }
    .imagine>img{
        display: block;
        margin: 0 auto;
    }
    .main_title>h1{
        font-size: 4em;
    }
    .reverse{
        display: block;
        flex-direction: row-reverse;
    }


}
@media screen and (max-width:664px){
    .main_title>h1{

        font-size:calc(100vw / 11);

    }
}
@media screen and (max-width:664px) and (min-width:320px)
{
    .subdescription{
        width: 80%;
    }
    .subdescription>p{
        display: block;
        width: 100%;
        top: 4em;
        margin: 0 auto;
        left: 60px;
    }
    .footer>img{
        width: 100%;
    }
}
@media screen and (max-width:630px){
    .imagine{
        width: 350px;

    }
    .imagine>img{
        max-width: 100%;

    }
}

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

    .imagine>img{
        max-width: 100%;

    }
    .text>h2{
        font-size: 2em;
        padding-top: 1em;
    }
}
@media screen and (max-width:375px){
    .imagine{
        width: 340px;

    }
    .imagine>img{
        max-width: 100%;

    }
    .text>pre{
        margin-left: 0;
    }
}
@media screen and (max-width:320px){
    .imagine{
        width: 270px;
        margin: 0 auto;

    }
    .imagine>img{
        max-width: 100%;

    }
    .backgroud{
        height: 65vh;
    }
    .hai-sus{
        right: 0 !important;
    }
    .main_title{
        text-align: center;
    }
    .subdescription{
        text-align: center;
    }
    .subdescription>p{
        left: 1.3em;
    }
    .main_title>h1{

        left: 0;

    }
    .text>h2{
        margin-left: 0;
    }
    .text>pre{
        margin-left: 0;
    }

    .text{
        padding-top: 2em;

    }
}

/* About page (*************************************************************************************** */
.top
{
    background-image: url(/img/main3.jpg);
    /* background-image: url(/img/office.jpg); */
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    height: 80vh;
    display: flex;
    align-items: center;
}
.top>div{
    color: rgb(255, 255, 255);
    font-family: Poppins;
    font-size: 2em;
    width: 50%;
    margin-left: 6em;

}
.main__block
{
    background-color:rgb(207,216,220);
    width: 100%;

}
.grid,.company_stats,.our_team
{
    border-bottom: 1px solid black;
}
.better
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: Poppins;
    padding-top: 8.5em;


}
.better>h3{
    font-weight: 400;
    font-size: 3em;
    color: rgb(11,11,11);
}
.grid
{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    text-align: center;
    margin: 0 auto;
    width: 80%;


}


.grid_item:nth-child(3),.grid_item:nth-child(4){
    margin-top: 3em;
    margin-bottom: 6em;
}
.grid_item>h4{
    font-weight: 500;
    padding-top: 2em;
    font-size: 1.3rem;
    color: rgb(11,11,11);
}
.grid_item>p{
  color: rgb(143,144,144);
}
.company_stats
{
    width: 80%;
    height: 55vh;
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
}
.company_stats .card
{
    width: calc(25% - 2em);
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
    margin: 0 auto;
    height: 20vw;
}
.box>span{

  color: #f05d57;
}
.company_stats .card .circle
{
    width: 10vw;
    height: 20vh;
    border-radius: 50%;

}
.text_color{

    color: rgb(29,29,29) !important;
}
.our_team
{
    width: 80%;
    margin: 0 auto;
    font-family: Poppins;
}
.our_team>h3{
    text-align: center;
    font-weight: 400;
    font-size: 3em;
    color: rgb(11,11,11);
    padding-top: 3em;
    padding-bottom: .5em;

}
.wrapper
{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
}
.team_mate>figure{
    width: 300px;
    height: 400px;
    margin: 0 auto;
}
.team_mate>figure>img{
    max-width: 100%;
    max-height: 100%;
}
.team_mate>figure>img{
    display: block;
    margin: 0 auto;
}
.mate_name>h4{
    font-weight: 600;
    font-size: 1.2em;
    padding:  2em 0 2em 0;
}
.mate_function>h5{
    font-size: 1em;
    color:rgb(138,139,139);
    font-weight: 500;
    padding-bottom: 2em;
}
.mate_description>p{
    color:rgb(138,139,139);
    padding-bottom: 5em;
}
.mate_name,.mate_function,.mate_description
{
 margin-left: 2.5em;
}

.featured_projects
{
    width: 80%;
    margin: 0 auto;
    font-family: Poppins;
    padding-bottom: 8em;
}
.featured_projects>h3{
    text-align: center;
    font-weight: 400;
    font-size: 3em;
    color: rgb(11,11,11);
    padding-top: 2em;
    padding-bottom: .5em;

}

.gallery
{
 display: grid;
 grid-template-columns: repeat(auto-fit,minmax(480px,1fr));
 row-gap: 1em;
}

.gallery_items
{
    position: relative;
    width: 480px;
    overflow: hidden;

}
.gallery_img{
    width: 480px;
    /* height: 38vh; */
}
.gallery_img>img{
    max-width: 100%;

}
.hover_block
{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    opacity: 0;
    background-color:tomato;
    width: 100%;
    transition: .5s ease-in-out;
}
.gallery_items:hover .hover_block{
    opacity: .8;
}

.hover_text>h4
{
    font-family: Poppins;
    color: white;
    font-weight: 400;
    font-size: 1.2em;
    position: absolute;
    top: 50%;
    left: 30%;

    transition: .2s ease-in-out;
    transform: translate(-50%,-50%);


}
.hover_text>h4:hover
{
    color:rgb(0,0,0);
    opacity: 1; z-index: 9999;
}
.right {
    position: absolute;
    top: 39%;
    left: 70%;
    width: 4em;
    height: 4em;
    border: 0.2em solid white;
    border-radius: 50%;
    margin-left: 1.5em;
  }
.right:hover{
    border-color: black;
}
  .right:after {
    content: '';
    position: absolute;
    top: 3%;
    left: 39%;
    margin-top: 1.12em;
    margin-left: -0.6em;
    width: 1.4em;
    height: 1.4em;
    border-top: 0.2em solid black;
    border-right: 0.2em solid black;
    transform: rotate(45deg);
  }


.read_more2
{
    background-color: rgb(240,93,87);
    width: 290px;
    height: 70px;
    text-align: center;
    margin: 2.5em auto;
    border: 2px solid rgb(240,93,87);

}
.read_more2:hover
{
    background-color: transparent;
    border: 2px solid rgb(240,93,87);
    transition: .3s;
}
.read_more2:hover a{
    color: black;
}
.read_more2>a
{
    font-family: Poppins;
    font-size: 1.2em;
    color:rgb(255,254,254) ;
    text-decoration: none;
    text-align: center;
    display: flex;
    justify-content: center;

}
.feedback{
    width: 75%;
    margin: 0 auto;
}
.feedback h3{
    text-align: center;
    padding-bottom: 1em;
    font-size: 2em;
}
.mb-3>label{
    padding-left: 0.5em;
}
.testimonials {
    padding: 100px 0;
  }
  .testimonials h3 {
    margin-bottom: 20px;
  }
  .testimonials .card {
    border-bottom: 3px #007bff solid !important;
    transition: 0.5s;
    margin-top: 60px;
  }
  .testimonials .card i {
    background-color: #007bff;
    color: #ffffff;
    width: 75px;
    height: 75px;
    line-height: 75px;
    margin: -40px auto 0 auto;
  }
  .container>h3
  {
      font-family: Poppins;
      color: rgb(33,37,41);
      font-weight: 500;
      font-size: 2em;

  }
  .popup{
      background: rgba(0,0,0,0.8);
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      pointer-events: none;
  }
  .popup.open{
      opacity: 1;
      pointer-events: all;
  }
  .full-img{
      position: absolute;
      height: 80%;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%) scale(0.5);
      transition: all 0.3s ease-out;
  }
  .full-img.open{
      transform: translate(-50%,-50%) scale(1);
  }
 .popup p{
      color: white;
      font-size: 1.2em;
      position: absolute;
      bottom: 3%;
      left: 50%;
      transform: translate(-50%,-3%) ;
  }
@media screen and (max-width:1440px){
    .gallery_img {
        height: 74vh;
    }

}
@media screen and (max-width:1198px){
    .gallery_items{
        margin: 0 auto;
        width: 900px;
    }

    .gallery_img{
        width: 900px;
    }
    .full-img{
        height: 70%;
    }
}

@media screen and (max-width:1005px){
    .gallery_items{
        width: 700px;
        height: 66vh;
    }
    .gallery_img{
        width: 700px;
    }
}
@media screen and (max-width:992px){
    .gallery_items{
        margin: 0 auto;
        padding-bottom: 1em;
    }
}
@media screen and (max-width:790px){
    .gallery_items{
        width: 500px;
        height: 38vh;

    }
    .gallery_img{
        width: 500px;

    }
}


@media screen and (max-width: 768px){
    .top>div{
        width: 90%;
        margin: 0 auto;
        text-align: justify;
    }
    .grid{
        width: 80%;
        display: block;

    }
    .grid_item>h4{
        text-align: center;
    }
    .grid_item{
       width: auto;
       margin: 0 auto;
    }
    .full-img{
        height: 55%;
    }
    .popup p{
        bottom: 12%;
    }
}
@media screen and (max-width:576px){
    .gallery{
        display: block;
    }
    .gallery_items{
        width: 384px;
    }
    .hover_block{
        width: 100%;
        height: 81%;
    }
    .gallery_img>img{
        max-width: 80%;
        margin: 0 auto;
    }
    .full-img{
        height: 45%;
    }

}
@media screen and (max-width:488px){
    .full-img{
        height: 35%;
    }
}
@media screen and (max-width:425px){
    .gallery_items{
        width: 315px;
        height: auto;
    }
    .gallery_img{
        width: 315px;
        height: auto;

    }
    .gallery_img>img{
        max-width: 100%;
        padding-top: 2em;
    }
    .better>h3{
        text-align: center;
    }
    .hover_block {
        display: none;
    }
    .mate_description{
        margin-left: 0;
    }

}
@media screen and (max-width:392px){
    .gallery_img{
        width: 315px
    }
    .team_mate>figure{
        width: 250px;

    }
    .team_mate>figure>img{
        max-width: 100%;
    }
    .featured_projects>h3{
        font-size: 2.4em;
    }
}
@media screen and  (max-width:320px){
    .gallery_items{
        width: 250px;
    }
    .gallery_img{
        width: 250px;
        height: auto;
    }
    .gallery_img>img{
        max-width: 100%;
        padding-top: 2em;

    }
    .hover_block {
       display: none;
    }
    .full-img{
        height: 29%;
    }
    .popup p{
        bottom: 28%;
    }

    .wrapper{
        display: block;
    }
    .mate_name,.mate_function,.mate_description{
        margin-left: 0;
    }
    .mate_name{
        text-align: center;
    }
    .mate_name>h4{
        font-size: 1.5em;
    }
    .mate_function>h5{
        font-size: 1.3em;
    }
    .mate_description{
        text-align: justify;
    }
    .top>div{
        font-size: 1.5em;

    }
    .better{
        padding-top: 2em;
    }
    .our_team>h3{
        padding-top:1.5em;
    }
}

.dates
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: rgb(207,216,220);
    padding: 10em;
}
.adress
{
    display: grid;
    grid-template-rows: repeat(8,1fr);
}
.adress>h1{
    font-family: Poppins;
    font-size: 3em;
    font-weight: 400;
    color: rgb(29,29,29);
}
.adress>div{
 font-family: Poppins;
 font-size: 1em;
margin-top: 1em;
}
.bold
{
    font-weight: 600;
    color: rgb(29,29,29);
}
.normal
{
    font-weight: 500;
  color: rgb(29,29,29);
}

.form>h3{
    font-family: Poppins;
    font-size: 3em;
    font-weight: 400;
    color: rgb(29,29,29);
}
.form-label
{
    font-family: Poppins;
}
@media screen and (max-width:1216px){
    .dates{
        padding: 5em;
    }
    .adress>h1,.form>h3{
        font-size: calc(100vw / 20);

    }

}
@media screen and (max-width:992px){
    .dates{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }
    .form>h3{
        text-align: center;
        padding-bottom: 1.3em;
    }
    .adress{
        padding-top: 1.3em;
    }
    .adress>h1{
        text-align: center;
    }
}
@media screen and (max-width:768px){
    .dates{
        padding:2.5em;
    }
}
@media screen and (max-width:576px){
    .dates{
        padding: 1em;
    }

}
@media screen and (max-width:320px){
    .burger{
        top: 4em;
    }
    ul{
        padding: 0;
    }
}

/* 404 page ----------------------------------------------------------------------------------------------------------------------- */
@-webkit-keyframes pop-up{
    0% {transform: translateY(80%); opacity:0;}
    60% {transform: translateY(-10px);opacity: 1;}
    80% {transform: translateY(5px)}
    100% {transform: translateY(0);}
}
@keyframes pop-up{
    0% {transform: translateY(80%); opacity:0;}
    60% {transform: translateY(-10px);opacity: 1;}
    80% {transform: translateY(5px)}
    100% {transform: translateY(0);}
}

@-webkit-keyframes blink{
    20% {transform: scaleY(1);}
    25% {transform: scaleY(0.1);}
    30% {transform: scaleY(1);}
}

@keyframes blink{
    20% {transform: scaleY(1);}
    25% {transform: scaleY(0.1);}
    30% {transform: scaleY(1);}
}

@-webkit-keyframes blink-fancy{
    0%, 25%, 28.33%, 45%, 48.33%, 51.67%, 93.33%, 96.67%{transform: scaleY(1);}
    26.67%, 46.67%, 50%, 95% {transform: scaleY(0.1);}
}

@keyframes blink-fancy{
    0%, 25%, 28.33%, 45%, 48.33%, 51.67%, 93.33%, 96.67%{transform: scaleY(1);}
    26.67%, 46.67%, 50%, 95% {transform: scaleY(0.1);}
}

@-webkit-keyframes looky-loo{
    0%, 42.31%, 50%, 69.23%, 100% {transform: translate3d(0,0,0);}
    7.69%, 23.08% {transform: translate3d(-5px,0,0);}
    26.92%, 38.46% {transform: translate3d(5px, 0,0);}
    53.85%, 65.38%{transform: translate3d(0, -10px,0);}
}

@keyframes looky-loo{
    0%, 42.31%, 50%, 69.23%, 100% {transform: translate3d(0,0,0);}
    7.69%, 23.08% {transform: translate3d(-5px,0,0);}
    26.92%, 38.46% {transform: translate3d(5px, 0,0);}
    53.85%, 65.38%{transform: translate3d(0, -10px,0);}
}

@-webkit-keyframes looky-loo-ears{
    0%, 42.31%, 50%, 69.23%, 100% {transform: translate3d(0,0,0);}
    7.69%, 23.08% {transform: translate3d(3px,0,0);}
    26.92%, 38.46% {transform: translate3d(-3px, 0,0);}
    53.85%, 65.38%{transform: translate3d(0, 5px,0);}
}

@keyframes looky-loo-ears{
    0%, 42.31%, 50%, 69.23%, 100% {transform: translate3d(0,0,0);}
    7.69%, 23.08% {transform: translate3d(3px,0,0);}
    26.92%, 38.46% {transform: translate3d(-3px, 0,0);}
    53.85%, 65.38%{transform: translate3d(0, 5px,0);}
}

@-webkit-keyframes looky-loo-beard{
    50%, 69.23%, 100% {transform: translate3d(0,0,0);}
    53.85%, 65.38%{transform: translate3d(0, -10px, 0);}
}

@keyframes looky-loo-beard{
    50%, 69.23%, 100% {transform: translate3d(0,0,0);}
    53.85%, 65.38%{transform: translate3d(0, -10px, 0);}
}

@-webkit-keyframes cloud-right{
    50% {transform: translateX(10px);}
    100% {transform: translateX(0);}
}

@keyframes cloud-right{
    50% {transform: translateX(10px);}
    100% {transform: translateX(0);}
}

@-webkit-keyframes cloud-left{
    50% {transform: translateX(-8px);}
    100% {transform: translateX(0);}
}

@keyframes cloud-left{
    50% {transform: translateX(-8px);}
    100% {transform: translateX(0);}
}

circle.blinking-eyes{
    -webkit-animation: blink-fancy 6s linear infinite;
            animation: blink-fancy 6s linear infinite;
}

#Dave{
    -webkit-animation: pop-up 1s ease-in-out 1;
            animation: pop-up 1s ease-in-out 1;
}
#Eyes, #unibrow, #moustache, #Blush {-webkit-animation: looky-loo 13s ease-in-out infinite;animation: looky-loo 13s ease-in-out infinite; -webkit-animation-delay: 2s; animation-delay: 2s;}

#Ears  {-webkit-animation: looky-loo-ears 13s ease-in-out infinite;animation: looky-loo-ears 13s ease-in-out infinite; -webkit-animation-delay: 2s; animation-delay: 2s}

#beard-lower, #beard-innershadow, #Neck-Innershadow{
    -webkit-animation: looky-loo-beard 13s ease-in-out infinite;
            animation: looky-loo-beard 13s ease-in-out infinite;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
}

#cloud-right{-webkit-animation: cloud-right 5s ease-in-out infinite;animation: cloud-right 5s ease-in-out infinite;}
#cloud-left{-webkit-animation: cloud-left 5s ease-in-out infinite;animation: cloud-left 5s ease-in-out infinite; -webkit-animation-delay:1s; animation-delay:1s}

#easter-egg{
    opacity:0;
    transition: all 0.1s ease-in-out;
}
svg:hover #easter-egg{
    opacity: 1;
    transition: all 0.1s ease-in-out;
}
/* END 404 */

.more_info
{
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-family: Poppins;
    padding-top: 5em;
    width: 100%;
    margin: 0 auto;
}
.service_image
{
    width: 900px;
}
.service_image>img{
    max-width: 100%;
}

.text_content
{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-bottom: 2em;
}
.service_description>p{
    padding: 2em;
    text-align: justify;
    line-height: 30px;
}
.service_title>h3
{
    font-weight: 500;
    font-size: 2em;
    padding: 2em 0 2em 0;

}
@media screen and (max-width:908px){
    .service_image{
    width: 500px;
    margin: 0 auto;
    }
.service_image>img{
    max-width: 100%;

    }
    .service_title{
        text-align: center;
    }
}
@media screen and (max-width:504px){
    .service_image{
        width: 300px;
        margin: 0 auto;
        }
    .service_image>img{
        max-width: 100%;

        }
}

*
{
    margin: 0;
    padding: 0;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */ /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
.header
{
   width: 100%;
   height: auto;
   background-color: white;
   text-align: center;
}
.header>img
{
   width:350px;
   padding-top: 1em;
   padding-bottom: 1em;
}
#succes_response
{
    display: block;
    margin-bottom: 20px;
}
.nav_bar
{
    background-color: rgb(60,65,76);
    height: 10vh;

}
.nav_mobile{

    height: 40vh;
    background-color: rgb(60,65,76);
    transition: 1s ease-in-out;

}

.menu ul
{
    list-style: none;
    height: 10vh;
    color: #fff;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    width: 80%;
    margin: 0 auto;




}

.menu ul a
{

    text-decoration: none;

}
.menu ul a li
{
    color: white;
    text-decoration: none;
    font-family: Poppins;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10vh;


}
.menu li:hover{
background-color: #f05d57;
}
.menu_mobile{
    display: block;
    transition: 1s ease-in-out;
    height: 40vh;

}
.menu_mobile ul{
    list-style: none;
    height: 10vh;
    color: #fff;
    display: block;
    width: 100%;
    margin: 0 auto;
    padding-left: 0 !important;

}
.menu_mobile ul a{
    text-decoration: none;
}
.menu_mobile ul a li{
    color: white;
    text-decoration: none;
    font-family: Poppins;
    font-size: 1.2em;
    letter-spacing: .1em;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10vh;
    left: 0;
}

.menu_mobile li:hover{
    background-color: #f05d57;
}
.burger{
    font-size: 2em;
    color: white;
    position: absolute;
    right: .5em;
    top: 4.7em;
    display: none;

}
.footer
{
   width: 100%;
   height: 20vh;
   background-color: white;
   text-align: center;


}
.footer>img
{
   width:350px;
   padding-top: 1.7em;
}

.copyright
{
    font-family: Poppins;
    margin-top: 1em;
    padding-bottom: 1em;
    color: rgb(156, 156, 156);

}
.hai-sus
{
    position: fixed;
    width: 60px;
    height: 60px;
    border-color: transparent;
    border-radius: 30px;
    background: rgb(240,93,87);
    right: 40px;
    bottom: 50px;
    display: none;
}
.hai-sus:hover,
.hai-sus:focus
{
    filter: brightness(1.5);
    outline: none;
}

.hai-sus::before,
.hai-sus::after
{
content: '';
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}

.hai-sus::before{
    width: 5px;
    height: 20px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background-color: white;
}

.hai-sus::after{
    width: 15px;
    height: 15px;
    transform: translate(-50%,-50%) rotate(45deg);
    border-top: 5px solid white;
    border-left: 5px solid white;

}
.sageata
  {
      width: 50px;
      height: 50px;
  }