/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/


/* vertical-animation */


@import url('https://fonts.googleapis.com/css2?family=Anek+Latin:wght@100;200;300;400;500;600;700;800&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap');


img.vert-move {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
img.vert-move {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

/* 
----- */
:root{
    --themeblue: #0474be;
    --textwhite: #fff;
    --textpara: #333;
    
}

.font-open-sans{
  font-family: 'Open Sans', sans-serif !important;
}

.font-oxygen{
  font-family: 'Oxygen', sans-serif !important;
}


.text-white{
    color: #fff !important;
}

.bg-red{
    background: #ff0000 !important;
}


.font-weight-400{
    font-weight: 400 !important;
}
.bg-trans{
    background-color: transparent !important;
}

img{
    width: 100% !important;

}


.btn-w-auto{
    width: auto !important;
}

.m-0{
    margin: 0 !important;
}

.p-0{
    margin: 0 !important;
}

.padding-25px-tb{
    padding: 25px 0 !important;
}

.padding-55px-tb{
    padding: 55px 0 !important;
}

.text-blue{
    color: var(--themeblue) !important;
}

.bg-blue{
    background: var(--themeblue) !important;
}

.text-white{
    color: var(--textwhite) !important;
}

.text-extra-dark-gray{
    color: var(--textpara) !important;
}


img.logo-default {
    max-height: 68px !important;
    padding-top: 10px !important; 
}


#mainMenu nav {
    margin-right: 20px
}

#topbar .social-icons li a{
    line-height: 30px;
    height: 30px
}

.v-footer-logo{
    max-width: 142px;
    max-height: 60px;
}

.em-3{
    font-size: 3em !important;
}

.em-4{
    font-size: 4em !important;
}

.headig-fw{
    font-weight: bold !important;
}

.margin-20px-tb{
    margin-top: 20px !important
}

.em-5{
    font-size: 4em !important;
}

.em-2{
    font-size: 2em !important;
}



.bg-light-gray{
    background: #f1f1f1 !important;
}



.para-big{
    font-size: 18px !important;

}

.margin-20px-bottom{
    margin-bottom: 20px !important;
}

.margin-40px-bottom{
    margin-bottom: 40px !important;
}

.v-img-box{
    display: flex;
    align-items: center;
}

.v-img-box .v-img img{
    border-radius: 50%;
  
    margin-right: 15px;
  
   
}

.v-img-box .v-img{
    margin-right: 15px;
}


.margin-auto{
    margin: 0 auto !important;
}

.font-weight-700{
    font-weight: 700 !important;
}

.margin-10px-top{
    margin-top: 10px !important;
}

.border-all{
    border: 1px solid #dfdcdc !important;
}

.padding-25px-all{
    padding: 25px !important;
}

.add-sec{
    margin-bottom: 30px;
}

.w-small-ico{
    width: 50px !important;
    height: 50px !important;
    margin-right: 20px;
}

.text-justify{
    text-align: justify !important;
}

span.user-des {
    padding: 10px;
    box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
    border-radius: 50px;
    margin: 0 10px;
    font-weight: 600;
}

.users-spec {
    padding: 20px 0;
}


.padding-10px-all{
    padding: 10px !important;
}

.margin-left-20px{
    margin-left: 27px;
}


.ico-col {
    background: #fff;
    border-radius: 20px;
    min-height: 450px;
    margin:20px 0;
}


.ico-con {
    padding: 20px;
}

.line.v-li {
    position: absolute;
}

.line {
    clear: both;
    position: relative;
    width: 90%;
    /* margin: 50px 0; */
    border-top: 3px solid #2552fc;
    top: 45%;
    left: 05%;
    z-index: -1;
}


.v-line{
    width: 100%;
    margin: 20px 0;
    height: 2px;
    background: #f1f1f1;
}

.fft-circle-left {
    width: 10px;
    height: 10px;
    background: #3858f9;
    border-radius: 50%;
    position: absolute;
    left: 5%;
    top: 51.3%;
}

.fft-circle-right {
    width: 10px;
    height: 10px;
    background: #3858f9;
    border-radius: 50%;
    position: absolute;
    right: 4.9%;
    top: 51.3%;
}

.fft-arrow {
    position: absolute;
    left: 28.5%;
    top: 50.7%;
    font-size: 18px;
    color: #2b57fb;
}

.fft-arrow-1 {
    position: absolute;
    left: 49.7%;
    top: 50.7%;
    font-size: 18px;
    color: #2b57fb;
}


.fft-arrow-2 {
    position: absolute;
    left: 70.6%;
    top: 50.7%;
    font-size: 18px;
    color: #2b57fb;
}


.v-des-hide{
    display: none;
}

@media only screen and (max-width: 600px) {
  .line.v-li{
      display: none;
  }
  .fft-arrow-2{
        display: none;
    }
    .fft-arrow-1{
        display: none;
    }
    .fft-arrow{
        display: none;
    }
    .fft-circle-right{
        display: none;
    }
    .fft-circle-left{
        display: none;
    }
    .v-mobo-hide{
        display: none;
    }
    
    .v-des-hide{
        display: block;
    }
}


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px) {
    .line.v-li{
      display: none;
  }
  .fft-arrow-2{
        display: none;
    }
    .fft-arrow-1{
        display: none;
    }
    .fft-arrow{
        display: none;
    }
    .fft-circle-right{
        display: none;
    }
    .fft-circle-left{
        display: none;
    }
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 992px) {
    .line.v-li{
     display: none;
  }
  .fft-arrow-2{
        display: none;
    }
    .fft-arrow-1{
        display: none;
    }
    .fft-arrow{
        display: none;
    }
    .fft-circle-right{
        display: none;
    }
    .fft-circle-left{
        display: none;
    }
} 

@media only screen and (max-width: 1280px) {
    .fft-arrow-2{
        left: 71.8%;
    }
    
    .fft-arrow{
        left: 27.5%;
    }
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1920px) {
    .fft-arrow-2{
        left: 64.7%;
    }
    
    .fft-arrow{
        left: 35%;
    }
}