@font-face {
font-family: 'BYekan';
src: url('../fonts/BYekan/BYekan.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/BYekan/BYekan.eot?#') format('eot'),  /* IE6–8 */
        url('../fonts/BYekan/BYekan.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
        url('../fonts/BYekan/BYekan.ttf') format('truetype'),  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
        url('../fonts/BYekan/BYekan.svg#svgBYekan') format('svg'); /* Legacy iOS */
}
body{
    font-family: 'BYekan', 'Tahoma';
    direction: rtl;
}
h4{
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: -0.01em;
}
h5{
    font-size: 20px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -0.01em;
}
small{
    font-size: 12px;
    font-weight: 400;
    line-height: 25.2px;    
}
.primary-color{
    color: #0c8dd0;
}
.primary-bg-color{
    background-color: #0c8dd0;;
}
.btn-primary{    
    padding: 20px 30px 20px 30px;    
    border-radius: 52px;    
    size: 12px;    
    font-weight: 500;
    background-color: #0c8dd0;
    border-color: #0c8dd0;
}
.btn-white{    
    padding: 20px 30px 20px 30px;    
    border-radius: 52px;    
    size: 12px;    
    font-weight: 500;
    background-color: white;
    border-color: white;
    color: #0c8bd0;
}
.btn-primary-outline{    
    padding: 20px 30px 20px 30px;    
    border: 1px solid #0c8dd0;
    border-radius: 52px;    
    size: 12px;    
    font-weight: 500;    
    color: #0c8dd0;
    text-decoration: none;
}
.btn-primary2-outline{    
    padding: 10px 25px 10px 25px;
    border: 1px solid #0c8dd0;
    border-radius: 52px;    
    size: 12px;    
    font-weight: 500;    
    color: #0c8dd0;
    text-decoration: none;
}
.btn-primary-outline:hover, .btn-primary2-outline:hover{
    background-color: #0c8dd0;
    color: white;
}
.btn-white:hover{  
    background-color:white;
    color: #0c8bd0;
    box-shadow: 0px 5px 10px 0px #1212121A;
}
.subtitle{
    font-size: 14px;
    font-weight: 500;
    line-height: 20.3px;
    color: #777E90;
}
.animate-box{
    opacity: 0;
}
.only-show-in-mobile{
    display: none;
}    
.only-show-in-desktop{
    display: block;
}  
a{
    text-decoration: none;    
}  
.customized-switch .toggle{
    width: 50px !important;    
    border: 1px solid #eeeeee !important;
    border-radius: 10px;    
}
.customized-switch .toggle .btn-primary, .customized-switch .toggle .btn-default{
    padding: 12px !important;
}
/* ======== Top Menu =========== */
#top_nav{
    padding-top: 36px;
    background: white;
    border-top: 7px solid #0c8bd0;
}
#top_nav.sticky-top{
    background-color: white;
    box-shadow: 0px 5px 10px 0px #1212121A;
    padding: 16px 0px;
}
#top_nav .navbar-brand img{
    width: 88px;
}
#top_nav .navbar-nav li{
    margin: 0px 7px;
}
/* ======== Top Banner =========== */
#top_banner{
    background: url('../images/patterns/pattern1.png') no-repeat left top;
}
#top_banner .text_body{
    padding: 110px 48px 0px 0px;
    margin-top: 40px;
    height: 300px;
    background: -moz-linear-gradient(left, #0c8bd002, #0c8bd0);
    background: -webkit-linear-gradient(left, #0c8bd002, #0c8bd0);
    color: white;
    border-top-right-radius: 54px;    
    border-bottom-right-radius: 54px;    
}
#top_banner .inner-img{
    text-align: left;
}
#top_banner .inner-img img{    
    height: 400px;
    position: relative;    
}
/* ======== Rates =========== */
.rate_box{    
    padding: 0px 25px;    
}
.rate_box .wrapper{
    border-radius: 40px;
    background: #F8FAFE;
    padding: 30px 15px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
}     
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;    
    transition: transform 0.6s;
    transform-style: preserve-3d;
    
} 
.flip-card.show_back .flip-card-inner {
    transform: rotateY(180deg);
}
  
.flip-card-front, .flip-card-back {    
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}  
.flip-card-back {
    transform: rotateY(180deg);
    margin-top: -155px;
}  
/* ======== Features =========== */
#features{
    background: url('../images/patterns/pattern2.png') no-repeat right top;
    padding-top: 120px;
}
#features .feature-box{    
    height: 445px;    
    padding: 70px 47px 70px 47px;    
    border-radius: 35px;
    background: #FFFFFF;
    box-shadow: 0px 54px 94px 0px #F8F8F8;
}
#features .feature-box .icon{   
    border-radius: 50%;
    background-color: #0c8dd0;
    width: 84px;
    height: 84px;    
    color: white;
    text-align: center;    
    font-size: 40px;
    line-height: 20px;
} 
#features .feature-box .icon .main-icon{
    margin-top: -8px;    
}
#features .feature-box .icon .glow{
    margin-top: -15px;
    margin-right: 55px;    
}
#features .feature-box .box-detail{
    margin-top: 40px;
    color: #777E90;
    font-size: 14px;
    font-weight: 400;
    line-height: 25.2px;
    text-align: justify;
}

/* ======== Services =========== */
#services{
    margin-top: 120px;
    padding: 120px 0px;
    background: #FCFCFD url('../images/patterns/pattern5.png') no-repeat center center;
}
#services .service-box{
    height: 285px;
    padding: 45px;    
    border-radius: 30px;
    background: #FFFFFF;
    margin-left: 15px;
}
#services .service-box h6{
    text-align: center;
}
#services .service-box img{
    width: 100%;
}
/* ======== About Us =========== */
#about_us{
    margin-top: 120px;
    background: url('../images/patterns/pattern3.png') no-repeat top left;
}
#about_us video{
    border-radius: 32px;
}
/* ======== Counter =========== */
.counter .container{
    margin-top: 120px;
    padding: 0px 0px;            
}
.counter h4{
    /*background: repeating-linear-gradient( -45deg, #0c8dd0 2px, #3aa6e1 3px, #3aa6e1 4px, #0c8dd0 7px);*/
    background: #0c8dd0;
    color: white;
    border-radius: 32px;
    padding: 80px;
    border: 10px solid white;
}
.counter i{
    font-size: 45px;
}
/* ======== Branches =========== */
#branches{
    margin-top: 100px;    
}
#branches .container{    
    padding: 120px;    
    border-radius: 40px;
    background: #F8FAFE;
}
#branches .branch{        
    border-radius: 30px;
    background: #FFFFFF;    
    padding: 24px;
    border: 5px solid #F8FAFE;
}
#branches .branch .city-image img{
    width: 100%;
    border-radius: 20px;    
}
#branches .branch .google-direction-icon{
    background-color: #0c8bd0d6;
    border-radius: 20px;    
    padding: 5px 0px 7px 0px;
    margin-top: -20px;
    position: relative;
}
#branches .branch .google-direction-icon a{
    color: white;
}
#branches .branch .google-direction-icon img{
    width: 28px;
    margin-right: 10px;
}
#branches .branch .flag img{
    width: 30px;
    height: 22px;
    border-radius: 50%;
}
#branches .branch a{
    text-decoration: none;
    color: #353945;
    font-size: 14px;
}
/* ======== Online Rates =========== */
#online_rate{
    margin: 180px 0px;
}
#online_rate .container{
    height: 290px;    
    border-radius: 40px;
    padding: 80px;
    background: #0c8dd0 url('../images/patterns/pattern6.svg') no-repeat center bottom;
    color: white;
}
#online_rate .main_image_div{
    background: url('../images/patterns/pattern7.png') no-repeat top right;
}
#online_rate .main_image_div img{
    margin-top: -198px;
}
/* ======== Footer =========== */
footer{
    background: #353945;
    padding-top: 80px;

}
footer .row{
    direction: ltr;
}
footer .row .col-md-3{
    direction: rtl;
}
footer .logo_div{
    text-align: center;
}
footer h5{
    color: white;
    font-size: 18px;
    font-weight: 700;
    line-height: 27.9px;
    margin-bottom: 24px;
}
footer ul{
    margin: 0px;
    padding: 0px;
}
footer ul li{
    list-style: none;
    margin-bottom: 8px;
}
footer ul li a{
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    line-height: 25.2px;
}
footer .app-download a{
    padding: 8px 24px;
    border: 1px solid white;
    border-radius: 32px;
    color: white;
    text-decoration: none;    
}
footer .footer-social-media-links a{
    margin: 5px;
}
footer .copy-right{
    text-align: center;
    color: #eeeeee;
    direction: ltr;
    font-size: 12px;
    border-top: 1px solid #dddddd30;
    padding: 15px 0px;
}
/* ==== Breadcrumb ===*/
.breadcrumb{
    padding: 40px 0 120px 0;
    background-color: #F8FAFE;
}
.breadcrumb ul{
    list-style: none;        
    padding: 0px;
}
.breadcrumb ul li{
    display: inline;
    margin: 0px 5px;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.005em;
    color: #141416;
}
.breadcrumb ul li a{
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.005em;
    color: #141416;
}
.breadcrumb h1{
    font-size: 32px;
    font-weight: 700;
    line-height: 51.2px;
    letter-spacing: -0.01em;
    color: #23262F;
    margin-top: 80px;
}
.breadcrumb .subtitle{
    font-size: 14px;
    font-weight: 500;
    line-height: 20.3px;
    color: #777E90;
}
/* ==== Contact Us body ===*/
#contact_us_body{
    margin-top: 80px;    
}
#contact_us_body .right-panel{
    padding-left: 36px;
    border-left: 1px solid #F4F5F6;
}
#contact_us_body .left-panel{
    padding-right: 36px;
}
#contact_us_body .contact_item{
    font-size: 14px;
    color: #777E90;
    margin-bottom: 12px;
}
#contact_us_body .contact_item_icon{
    display: inline-block;
    width: 48px;
    height: 48px;
    padding: 15px;
    border-radius: 49px;
    background: #F8FAFE;
    margin-left: 16px;  
    text-align: center;
}
#contact_us_body a{
    color: #777E90;
    font-size: 14px;
    font-weight: 400;
    line-height: 25.2px;
}
/* ==== Form ===*/
.form-control, .form-select{
    height: 64px;    
    padding: 20px;
    border-radius: 15px;
    border: 1px solid #E6E8EC;
}
.form-select{
    padding-right: 50px;
}
textarea{
    height: 200px !important;
}
.alert{
    border-radius: 52px;
    border: 0px;
}
.alert-dismissible .btn-close{
    font-size: 10px;
    margin-top: 3px;
}
/* ==== Post ===*/
#post_body{
    margin: 80px 0px;    
}
/* ==== ًRates ===*/
#rates{
    margin: 80px 0px;
}
#rates .container{    
    padding: 120px;    
    border-radius: 40px;
    background: #F8FAFE;
}
#rates table td{
    font-size: 12px;
    color: #777E90;
}
/* ==== About ===*/
.about_counter{
    background: #23262F;
    padding: 80px 40px;
}
.about_counter h4{
    color: white;           
}
.about_counter .counter-box{
    display: inline-flex;
    margin-bottom: 25px;
}
.about_counter i{
    font-size: 45px;
}
.about_counter .icon_div{    
    padding: 25px 22px 15px 22px;
    border-radius: 49px;
    background: #353945;
    margin-left: 15px;
}
.about_counter .icon_div img{
    width: 32px;
    height: 32px;  
}  
.about_counter .text_div{
    font-size: 14px;
    font-weight: 500;
    line-height: 20.3px;
}
/* ==== Login Page ===*/
.login-page{
    width: 100%;
}
.login-page .right-panel{
    padding: 0px;
}
.login-page .right-panel .wrapper{
    padding: 40px 80px;
    font-size: 14px;
}
.login-page .right-panel .header{
    display: flex;
}
.login-page .right-panel h4{
    margin-top: 80px;
    margin-bottom: 24px;
}
.login-page .right-panel .header .header-text{
    margin: 35px 70px 0 0;
    
}
.login-page .right-panel .form{
    direction: rtl;
}
.login-page .left-panel{
    background-color: #F8FAFE;
    padding: 40px 0 0 0;
}
/* ==== Uploader ===*/
.dm-uploader {
	border: 0.25rem dashed #A5A5C7;
	text-align: center;
}
.dm-uploader.active {
	border-color: red;

	border-style: solid;
}
/* ==== Video Capture ===*/
.video-capture-div .screenshot-image {
    width: 150px;
    height: 90px;
    border-radius: 4px;
    border: 2px solid whitesmoke;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 5px;
    left: 10px;
    background: white;
}
  
.video-capture-div .display-cover {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    margin: 5% auto;
    position: relative;
}
  
.video-capture-div video {
    margin: 5% auto;
    width: 100%;
    background: rgba(0,0,0,0.2);
}
  
.video-capture-div .video-options {
    position: absolute;
    left: 20px;
    top: 30px;
}
  
.video-capture-div .controls {
    position: absolute;
    right: 20px;
    top: 20px;
    display: flex;
}
  
.video-capture-div .controls > button {
    width: 45px;
    height: 45px;
    text-align: center;
    border-radius: 100%;
    margin: 0 6px;
    background: transparent;
  
    &:hover {
      svg {
        color: white !important;
      }
    }
}
  
  
@media (min-width: 300px) and (max-width: 400px) {
    .video-capture-div .controls {
        flex-direction: column;

        button {
        margin: 5px 0 !important;
        }
    }
}
  
.video-capture-div .controls > button > svg {
    height: 20px;
    width: 18px;
    text-align: center;
    margin: 0 auto;
    padding: 0;
  }
  
.video-capture-div  .controls button:nth-child(1) {
    border: 2px solid #D2002E;
  
    svg {
      color: #D2002E;
  
    }
}
  
.video-capture-div  .controls button:nth-child(2) {
    border: 2px solid #008496;
  
    svg {
      color: #008496;
    }
}
  
.video-capture-div  .controls button:nth-child(3) {
    border: 2px solid #00B541;
  
    svg {
      color: #00B541;
    }
}
  
.video-capture-div  .controls > button {
    width: 45px;
    height: 45px;
    text-align: center;
    border-radius: 100%;
    margin: 0 6px;
    background: transparent;
  
    &:hover {
      svg {
        color: white;
      }
    }
}
/* ==== Preloader ===*/
.loader-center{    
    position: fixed; 
    z-index: 9999;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.loader-bg{
    background:black;
    background:rgba(0,0,0,0.8);
    filter:blur(4px);
    -o-filter:blur(4px);
    -ms-filter:blur(4px);
    -moz-filter:blur(4px);
    -webkit-filter:blur(4px);
    position: fixed; 
    width: 100%;
    height: 100%;
}
.loader-list{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -90px 0 0 -80px; 
}
.loader{
    position: absolute;
    top: 80px;
    left: 65px;
    color: white;
    border-radius: 50%;
    transition: 1s all;
}
.percent-loader{
    position: absolute;
    top: 150px;
    left: 65px;
    color: white;
    border-radius: 50%;
    transition: 1s all;
}
.loader-top{
    position: absolute;
    border: 5px solid transparent;
    border-top-color: white;
    border-radius: 50%;
    -webkit-animation: loading linear infinite;
    -moz-animation: loading linear infinite;
    -o-animation: loading linear infinite;
    animation: loading linear infinite; 
}
.loader-bottom{
    position: absolute;
    border: 5px solid transparent;
    border-bottom-color: white;
    border-radius: 50%;
    -webkit-animation: loading linear infinite;
    -moz-animation: loading linear infinite;
    -o-animation: loading linear infinite;
    animation: loading linear infinite; 
}
.loader-top.one{
    top: 24px;
    left: 15px;
    width: 120px;
    height: 120px;
    animation-duration: 1s;
}
.loader-top.two{
    top: 37px;
    left: 30px;
    width: 90px;
    height: 90px;
    animation-duration: 1.2s;
}
.loader-top.three{
    top: 50px;
    left: 40px;
    width: 70px;
    height: 70px;
    animation-duration: 1.4s;
}
.loader-top.four{
    top: 64px;
    left: 50px;
    width: 50px;
    height: 50px;
    animation-duration: 1.6s;
}

.loader-bottom.one{
    top: 23px;
    left: 15px;
    width: 120px;
    height: 120px;
    animation-duration: 1s;
}
.loader-bottom.two{
    top: 42px;
    left: 30px;
    width: 90px;
    height: 90px;
    animation-duration: 1.2s;
}
.loader-bottom.three{
    top: 51px;
    left: 40px;
    width: 70px;
    height: 70px;
    animation-duration: 1.4s;
}
.loader-bottom.four{
    top: 59px;
    left: 50px;
    width: 50px;
    height: 50px;
    animation-duration: 1.6s;
}

@-webkit-keyframes loading {
    from{
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
    to{
        -webkit-transform: rotateZ(0);
        -moz-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
        transform: rotateZ(0);
    }
}

@-moz-keyframes loading {
    from{
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
    to{
        -webkit-transform: rotateZ(0);
        -moz-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
        transform: rotateZ(0);
    }
}

@-ms-keyframes loading {
    from{
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
    to{
        -webkit-transform: rotateZ(0);
        -moz-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
        transform: rotateZ(0);
    }
}

@-ms-keyframes loading {
    from{
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
    to{
        -webkit-transform: rotateZ(0);
        -moz-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
        transform: rotateZ(0);
    }
}

@keyframes loading {
    from{
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
    to{
        -webkit-transform: rotateZ(0);
        -moz-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
        transform: rotateZ(0);
    }
}