/* statics */
body,html{
    overflow-x: hidden;
    position: relative;
    font-family: "Montserrat";
    direction: ltr;
    text-align: left;

}
body{
    padding-top: 80px;
}
a{
    text-decoration: none;
}
a:hover{
    text-decoration: none;
}

/* Colors */

.text-blue{
    color: #2d2e69;
}
.text-gold{
    color: goldenrod;
}
.text-grey{
    color: grey;
}
.bg-blue{
    background-color: #2c2d53;
}
.bg-gold{
    background-color: #e8a006
}
.text-red{
    color: #EC1F27
}
.bg-red{
    background-color: #EC1F27
}
.bg-light{
    background-color: #eceef0;
}

.bg-white{
    background-color: white;
}
.text-white{
   color: white;
}
.bg-black{
    background-color: #2c2d53;
}
.border-blue{
    border: 2px #2c2d53 solid;
}
.border-black{
    border: 2px #1d1d1b solid;
}
.box-black{
    box-shadow: #1d1d1b 5px 5px 0;
}
/* raduis */
.radius-10{
    border-radius: 10px;
}
.radius-20{
    border-radius: 50px;
}
.radius-30{
    border-radius: 30px;
}
.radius-40{
    border-radius: 40px;
}
.radius-50{
    border-radius: 50px;
}
.radius-left-only{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

}
.radius-right-only{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

}
/*TEXT */

.f-bold{
    font-weight: bold;
}
.f-bolder{
    font-weight: bolder;
}
.f-small{
    font-size: small;
}
.f-medium{
    font-size: medium;
}
.f-large{
    font-size: large;
}
.f-larger{
    font-size: larger;
}
.f-space-5{
    letter-spacing: 5px;
}
/* Bootstrap Override */


.navbar{
    background: #2c2d53;
    background-color: #2c2d53;
}

.nav-link{
    color: white;
    font-size: large;
transition: all .2s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.nav-link:hover{
    color: #ffd102;

}
.nav-item{
    padding-right: 1.5rem;
}
.nav-link.active{
    color: #ffd102;
}
.fade-animation{
    animation: fade .7s infinite ease-in-out alternate-reverse;
}

@keyframes fade {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

.service-item{
    position: relative;
    margin-bottom: 1.5rem;
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: all .3s cubic-bezier(0.075, 0.82, 0.165, 1);
    color: #2c2d53 !important;
}
.service-item img{
    width: auto;
    height: 150px;
    z-index: 2;
}
.service-item p{
    z-index: 2;
    transition: all .3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.service-item::before{
    content: "";
    width: 150px;
    height: 150px;
    position: absolute;
    top: -20px;
    left: 30%;
    background-color: #ffd102;
    border-radius: 50%;
    opacity: .8;
    z-index: 1;
    transition: all .3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.service-item:hover::before{
    top: -30px;
    left: 10%;
}
.service-item:hover >p{
scale: 1.2;
color: #2c2d53;
}
.project-item{
    height: 300px;
padding-top: 15px;

position: relative;
text-align: center;
}
.project-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
.project-item:hover >.overlay{
    background-image: linear-gradient(to top,#000000d0,#0000000e);
}
.project-item .overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-image: linear-gradient(to top,#0000000e,#0000000e);
}
.project-item .caption{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: white;
    opacity: 0;
    transition: ease all .2s;
    font-size: larger;
}
.project-item:hover > .caption{
    opacity: 1;
}


footer ul{
    list-style:none;
}
footer ul p{
    font-size: large;
    font-weight: bold;
}
footer ul li a{
    color: white;
}

.me-auto{
    margin-inline-start: auto;
}











 .hamburger {

    padding: 15px 15px;

    display: inline-block;

    cursor: pointer;

    transition-property: opacity, filter;

    transition-duration: 0.15s;

    transition-timing-function: linear;

    font: inherit;

    color: white;

    text-transform: none;

    background-color: transparent;

    border: 0;

    margin: 0;

    overflow: visible; }

    .hamburger:hover {

      opacity: 0.7; }

    .hamburger.is-active:hover {

      opacity: 0.7; }

    .hamburger.is-active .hamburger-inner,

    .hamburger.is-active .hamburger-inner::before,

    .hamburger.is-active .hamburger-inner::after {

      background-color: white; }



  .hamburger-box {

    width: 40px;

    height: 24px;

    display: inline-block;

    position: relative; }



  .hamburger-inner {

    display: block;

    top: 50%;

    margin-top: -2px; }

    .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {

      width: 40px;

      height: 4px;

      background-color: whitesmoke;

      border-radius: 4px;

      position: absolute;

      transition-property: transform;

      transition-duration: 0.15s;

      transition-timing-function: ease; }

    .hamburger-inner::before, .hamburger-inner::after {

      content: "";

      display: block; }

    .hamburger-inner::before {

      top: -10px; }

    .hamburger-inner::after {

      bottom: -10px; }

  /*

     * Spring

     */

  .hamburger--spring .hamburger-inner {

    top: 2px;

    transition: background-color 0s 0.13s linear; }

    .hamburger--spring .hamburger-inner::before {

      top: 10px;

      transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

    .hamburger--spring .hamburger-inner::after {

      top: 20px;

      transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }



  .hamburger--spring.is-active .hamburger-inner {

    transition-delay: 0.22s;

    background-color: transparent !important; }

    .hamburger--spring.is-active .hamburger-inner::before {

      top: 0;

      transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);

      transform: translate3d(0, 10px, 0) rotate(45deg); }

    .hamburger--spring.is-active .hamburger-inner::after {

      top: 0;

      transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);

      transform: translate3d(0, 10px, 0) rotate(-45deg); }



  /*

     * Spring Reverse

     */

  .hamburger--spring-r .hamburger-inner {

    top: auto;

    bottom: 0;

    transition-duration: 0.13s;

    transition-delay: 0s;

    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }

    .hamburger--spring-r .hamburger-inner::after {

      top: -20px;

      transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; }

    .hamburger--spring-r .hamburger-inner::before {

      transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }



  .hamburger--spring-r.is-active .hamburger-inner {

    transform: translate3d(0, -10px, 0) rotate(-45deg);

    transition-delay: 0.22s;

    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }

    .hamburger--spring-r.is-active .hamburger-inner::after {

      top: 0;

      opacity: 0;

      transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; }

    .hamburger--spring-r.is-active .hamburger-inner::before {

      top: 0;

      transform: rotate(90deg);

      transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); }






      .clients-swiper {
        width: 100%;
        height:200px;
      }

      .clients-swiper .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .clients-swiper .swiper-slide img {
        display: block;
        width: auto;
        max-width: 150px;
        height: 100px;
        object-fit: contain;
      }
      .clients-swiper .swiper-slide a {
        text-decoration: none;
        color: #2c2d53;
        font-weight: bold;
        transition: ease-out .2s all;
      }
      .clients-swiper .swiper-slide p {
        margin-top: 2rem;
        color: grey;
        transition: ease-out .2s all;
      }
      .clients-swiper .swiper-slide:hover p {
        color: #2d2e69;
      }
.social-links{
    display: flex;
    flex-direction: row;;
    justify-content: center;
    align-items:center;
}
.social-links a{
    color:white !important;
}
.social-links a .fa{
    font-size: 1.4rem;
}
a:hover{
    color:#e8a006 !important
}
.text-align-default{
    text-align: left;
}
.jc{justify-content: center;} .ac{align-items: center;}
label{
    color: rgb(77, 77, 77);
    margin-bottom: .5rem;
}




.dropdown{
    cursor: pointer;
}
.services-drop .dropdown-menu{
   min-width: 500px;
}
.blog-swiper{
    width:100%;
    height:400px
}
.blog-item{
    width:100%;
    padding:10px;background: white;border-radius: 10px;
    text-decoration: none;overflow: hidden;
}
.blog-item img{
    border-radius: 10px;
    height:200px;
    object-fit:cover;
    width:100%;
    filter:brightness(80%);
    transition: .2s ease all;
}
.blog-item img:hover{
    filter:brightness(100%)
}
.blog-item h5{
    color: #2d2e69;
    font-weight: bold;
    font-size: medium;
}
.blog-item p{
    color: grey;
    font-size: small;
}
.bg-animation{
    animation: bg 10s alternate-reverse ease-in-out infinite ;
}
.flaying-animation{
    position: relative;
    animation: flaying 2s alternate-reverse ease-in-out infinite ;
}

@keyframes bg {
from{
    background-size: 100%;
}
to{
    background-size: 50%;
}
}

@keyframes flaying {
    from{
        top:-20px
    }
    to{
        top:20px
    }
    }