body{
    color: #282943;
}
.btn-blue{
    background-color: #1976BC;
}

.text-blue{
    color: #1976BC;
}

.text-overflow-ellipsis{
    text-overflow: ellipsis;
    max-width: 40ch;
}

.text-ynotz{
    color: #1976BC;
}

.bg-ynotz{
    background-color: #1976BC;
}

.bg-deep-blue{
    background-color: #003E6C;
}

.bg-gray-blue{
    background-color: #003E6C;
}
.bg-home{
    background-image: url('../images/home/homebg-mob.jpg');
}
.box-shadow{
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.06);
}

[x-cloak]
{
    display: none !important;
}

.text-red{
    color: red;
}

.panel {

    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
  }

.dull{
    filter: brightness(50%);
}

.img{
    max-width: 50%;
height: auto;
}

.section{
    --v-offset: 60px;
    --curve-height: 30px;
}

.hide-scroll::-webkit-scrollbar {
    display: none;
  }

  .hide-scroll {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  .bg-gray{

    background-color: #F9F9F9;
  }

  .active{
    background-color: lightgray;
  }

  .text-default{
    color: #282943;
  }

  .bg-navy{
    background-color: #282943;
  }

  .bg-dark-gray{
    background-color: #1a517a;
  }



  .panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-in-out;
  }

  .text-medium{
    font-size: 17px;
    line-height: 1.8rem;
  }

  .text-small{
    font-size: 15px;
    line-height: 1.7rem;
  }

  .lh-sm{
    line-height: 1.5rem;
  }

  .text-gray{
    color: #5F606C;
  }

  .centered-y{


        top: 50%;
        transform: translateY(-50%);

    }

    .center {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .text-dark-blue{
        color: #146C84;
    }

    .bg-dark-blue{
        background-color: #146C84;
    }

    .text-dark-gray{
        color: #666666;
    }

    .bg-vector{
        background-image: url('../images/home/template-mob.png');
    };

    .h-hero{
        height: 180px;
    }






    @keyframes scroll {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-100%);
        }
      }

    .slide-track {

                animation: scroll 40s linear ;

      }

      .slide{
        animation: scroll 40s linear ;
      }

      .bold{
        font-weight: 900;
      }



      .bg-recent-blogs{
        background-color: #F2EEEF;
      }

      .bg-footer{
        background-color: #343434;
      }

      .border-blue{

       border-color: #003E6C;
      }

      .bg-service-mob-main{
        background-color: #D6D6D6;
      }
      .bg-service-mob-sub{
        background-color: #D6D6D6;
      }


@media(min-width:1024px){
    .bg-service-mob-main{
        background-color: #A7C2E0;
    }

    .bg-service-mob-sub{
        background-color: #7991A9;
      }

    .lh-75{
        line-height: 75px;
      }

      .h-hero{
        height: auto;
      }

      .centered-x {

        left: 50%;
        transform: translate(-50%, 0);
    }

    .lh-sm{
        line-height: 2rem;
    }

      .lh-lg{
        line-height: 2.25rem;
      }

      .lh-md{
        line-height: 1.5rem;
      }

      .bg-gray-lg{
        background-color: #F9F9F9;
      }

      .text-big-lg{
        font-size: 2.1rem;
        line-height: 2.7rem;
      }

      .text-medium-lg{
        font-size: 1.1rem;
        line-height: 1.5rem;
      }

      .bg-home{
        background-image: url('../images/home/homebg.jpg');
    }

    .bg-vector{
        background-image: url('../images/home/template3.png');
    }

}


/* animate */

.h1 {
    font-family: "Montserrat Medium";
    max-width: 40ch;
    text-align: center;
    transform: scale(0.94);
    animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
  }
  @keyframes scale {
    100% {
      transform: scale(1);
    }
  }

  .span {
    display: inline-block;
    opacity: 0;
    filter: blur(4px);
  }

  span:nth-child(1) {
    animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }

  span:nth-child(2) {
    animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }

  span:nth-child(3) {
    animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }

  span:nth-child(4) {
    animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }

  span:nth-child(5) {
    animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }

  span:nth-child(6) {
    animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }

  span:nth-child(7) {
    animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }

  span:nth-child(8) {
    animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }

  span:nth-child(9) {
    animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }

  span:nth-child(10) {
    animation: fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }

  span:nth-child(11) {
    animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }

  span:nth-child(12) {
    animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }

  span:nth-child(13) {
    animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }

  span:nth-child(14) {
    animation: fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }

  span:nth-child(15) {
    animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }

  span:nth-child(16) {
    animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }

  span:nth-child(17) {
    animation: fade-in 0.8s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }

  span:nth-child(18) {
    animation: fade-in 0.8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
  }

  @keyframes fade-in {
    100% {
      opacity: 1;
      filter: blur(0);
    }
  }



.text{
    border-right: 5px solid white;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    /* overflow-x: hidden; */
    animation: typing 2s ,
            cursor .5s step-end infinite alternate;
}

@keyframes cursor {
    50%{border-color: transparent;}
}

@keyframes typing{
    from {width: 0;}
}


.w3-animate-zoom {
    animation: animatezoom 0.6s;
}
@keyframes animatezoom {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}


.content{
    transition: all 0.9s ease-in-out;
}


#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
  }

  #myImg:hover {opacity: 0.7;}

  /* The Modal (background) */
  .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  }

  /* Modal Content (image) */


  /* Caption of Modal Image */


  /* Add Animation */
  .modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
  }

  @-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
  }

  @keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
  }

  /* The Close Button */
  .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }

  .close:hover,
  .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
  }

  /* 100% Image Width on Smaller Screens */
  @media only screen and (max-width: 700px){
    .modal-content {
      width: 100%;
    }
  }