@extends('web.layout.master')
@section('title', 'Welcome! | House Runs For Me')
@section('home-active', 'active')
@section('content')
<!-- <style>
  body{
  background:#e6e6e6;
}
#slider{
  width:80%;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  box-shadow:2px 5px 10px rgba(0,0,0,0.4);;
}

.slide{
  width:100%;
  
  display:none;
  animation-name:fade;
  animation-duration:1s;
  
}
img{
 width:100%; 
}
@keyframes fade{
  from{opacity:0.5;}
  to{opacity:1;}
}

.controls{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:1.5em;
  padding:15px 10px;
  border-radius:5px;
  
}

.controls:hover{
  background:white;
  transition:0.3s;
}

.controls:active{
  color:grey;
}

#left-arrow{
  left:10px;
}

#right-arrow{
  right:10px;
}

#dots-con{
  
  text-align:center;
}
.dot{
  display:inline-block;
  background:grey;
  padding:8px;
  border-radius:50%;
  margin:10px 5px;
}

.active{
  background:crimson;
}

@media (max-width:576px){
  #slider{width:100%;
  
  }
  
  .controls{
    font-size:1em;
  }
  
  #dots-con{
    display:none;
  }
}
</style> -->
    <style type="text/css">
    .user-blog1{
      display: none;
    }
    #slider{
  width:80%;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  box-shadow:2px 5px 10px rgba(0,0,0,0.4);;
}

.slide{
  width:100%;
  
  display:none;
  animation-name:fade;
  animation-duration:1s;
  
}
.slide img {
 width:100%; 
}
.uou-block-4e .contact-info {
    list-style: none !important;
    color: #fff;
}


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

.controls{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:1.5em;
  padding:15px 10px;
  border-radius:5px;
  
}

.controls:hover{
  background:white;
  transition:0.3s;
}

.controls:active{
  color:grey;
}

#left-arrow{
  left:10px;
}

#right-arrow{
  right:10px;
}

#dots-con{
  
  text-align:center;
}
.dot{
  display:inline-block;
  background:grey;
  padding:8px;
  border-radius:50%;
  margin:10px 5px;
}

/* .active{
  background:crimson;
} */

@media (max-width:576px){
  #slider{width:100%;
  
  }
  
  .controls{
    font-size:1em;
  }
  
  #dots-con{
    display:none;
  }
}
    .owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
    touch-action: manipulation;
    /* -moz-backface-visibility: hidden; */
    display: flex;
}

.img1 {
    max-width: 100%;
    height: 95px;
    vertical-align: middle;
    margin-right: 10px;
}
    .banr-head .login-sec {
    background: rgba(0,0,0,0.8);
    border-radius: 0 0 6px 6px;
    width: 100%;
    margin-top: -50px;
    min-height: 45rem;
}
    .owl-carousel.owl-drag .owl-item {
    width: 300px !important;
}
audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline;
    height: 200px;
}
.sidebar{
  overflow-y: scroll;
    height: 475px;
    margin-top: -10px;
    background-color: white;
    overflow-x: hidden;
}
a:hover {
    color: #6d0000 !important;
}

.form-check-inline {
    display: inline-flex;
    align-items: center;
    padding-left: 0;
    margin-right: 0.75rem;
    margin-bottom: -10px;
}
.check-label {
    margin-bottom: 0;
    font-size: 8px;
    color: #fff;
    margin-left: 2px;
    line-height: 15px;
    margin-bottom: 15px;
}
        .circleDivide {
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;
            height: 18px;
            background: #6d0000b8;
            border-radius: 50%;
            cursor: pointer;
            width: 19px;
        }
        .dots{
            position: initial;
            bottom: 0px;
            display: flex;
            justify-content: center;
            width: 100%
        }
 


        .text-danger-alert {
            color: rgb(94, 85, 85);
            padding: 0px;
            margin: 0px;
            margin-bottom: -40px !important;
        }

        .circleDivideFocus {
            background: #6d0000 !important;
        }

        .circleDivide i:hover {
            color: white;
        }

        .mycontainer {
            margin-top: 56px;
            margin-bottom: 21px;
        }

        .opaclight {
            opacity: .6;
        }

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

        .mh2 {
            font-size: 37px;
            padding-top: 60px;
        }

        .mh6 {
            font-size: 14px;
            padding: 40px 58px;
            font-weight: 600 !important;
        }

        .banr-head .login-sec .uou-tabs .tabs li a {
            border: none;
            padding: 18px 4px 15px 4px;
            background: #6d0000;
            color: #fff;
            font-size: 13px;
            font-weight: bold;
        }

        .mt-6PX {
            margin-top: 6rem !important;
        }

        .banr-head {
            /* background-image: url({{ asset('assets/web/images/banner3.jpg') }}); */
            background-size: 100% 100%;
            background-repeat: no-repeat;
            height: 47.5rem;
            width: 100%;
            padding: 10px;
            /* min-height: 60rem; */
            
        }
        /* @media only screen and (max-width: 587px){
        .user-blog {
    background: #903f40;
    padding: 50px 0 50px;
    margin-top: 135px !important;
}
} */
/* @media only screen and(max-width: 1200px){
  .fileuplodlist{
    display:grid;
  }
} */
        @media only screen and (max-width: 992px) {
          .mobile-second-content{
            height: 426px !important;
          }
          .sidebar2-mobile {
    overflow-y: scroll;
    height: 426px !important;
    background-color: white;
    margin-top: -1px;
    overflow-x: hidden;
}
          h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    line-height: 1.25em;
    color: #333333;
    margin-top: 37px;
    margin-bottom: 24px;
}
          .fa {
    text-align: center;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    font-size: 25px;
}
          div#demo1 {
    position: relative;
    display: none;
}
          img {
    max-width: 49%;
    height: auto;
    vertical-align: middle;
    margin-left: 84px;
}
          .owl-carousel .item {
    padding: 0 0px;
}
          .sidebar {
    overflow-y: scroll;
    /* height: 267px !important; */
    background-color: white;
    margin-top: -1px;
    overflow-x: hidden;
}
.user-blog {
    background: #903f40;
    padding: 50px 0 50px;
    margin-top: 300px !important;
}
.img1 {
    max-width: 40%;
    height: 100px;
    vertical-align: middle;
    margin-right: 10px;
}
            
            .owl-carousel.owl-drag .owl-item {
    width: 400px !important;
}
            .banr-head .login-sec button {
    border: none;
    background: #6d0000;
    border-radius: 30px;
    padding: 8px 30px;
    color: #fff;
    float: left;
    font-size: 14px;
    transition: all 0.3s;
    margin-top: 22px !important;
}
            input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
    display: block;
    width: 100%;
    height: 31px;
    padding: 6px 12px;
    margin-bottom: 24px;
    font-size: 15px;
    line-height: 24px;
    color: #333333;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #cecece;
    transition: all 0.3s;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
            .banr-head {
            /* background-image: url({{ asset('assets/web/images/banner.png') }}); */
            /* background-size: 100% 100%; */
            background-repeat: no-repeat;
            height: 54.5rem;
            width: 100%;
            padding: 10px;
            /* min-height: 60rem; */
            background-size:cover;
            }
            .owl-carousel.owl-drag .owl-item {
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    /* width: 68% !important; */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


            .uou-block-2b {
    position: relative;
    display: block;
    background: #fff;
    padding: 10px 0;
    margin-top: 0px !important;
    font-family: 'Montserrat', sans-serif;
    /* padding-bottom: 2.4rem; */
}
    .dots {
    position: initial;
    bottom: 3px;
    -271px: ;
    display: flex;
    justify-content: center;
    width: 100%;
}
 
        div#owl-demo1 .item {
    padding: 0 15px;
    margin-right: 45px;
}

        .hide-this{
            display: none;
        }
        }

        .pro-inside h1 {
            font-size: 44px;
        }

        .ph6 {
            width: 102%;
            line-height: 23px;
        }

        .img-social {
            border-radius: 57px;
            height: 4rem;
            width: 5rem;
        }

        .owlcar {
            margin: 11px;
        }

        i.fa.fa-twitter.mt-5.fa-3x.text-pink {
            font-size: 46px;
        }

        .clients-says .section-title {
            text-transform: capitalize;
            font-size: 39px;
            margin-bottom: 40px;
            text-align: center;
            color: #6d0000;
        }

        .nav {
            position: relative;
            z-index: 99;
            margin: 20px 0px;
        }

        .uou-block-1a .authentication li a {
            display: block;
            font-size: 14px;
            line-height: 12px;
            color: white;
            font-weight: bold;
        }

        .uou-block-1a .language .toggle {
            display: block;
            font-size: 12px;
            color: white;
            line-height: 40px;
            height: 40px;
            margin-right: -17px !important;
        }

        .clients-says p {
            font-style: normal;
            font-size: 13px;
            color: #333333;
            margin-bottom: -7px;
            line-height: 28px;
        }

        2 .testdiv {
            margin-bottom: 18px;
        }

        .border-pink {
            border: solid #6d0000 2px;
            border-radius: 8px;
        }

        .text-pink {
            color: #6d0000;
        }

        .check-label {
            margin-bottom: 0;
            font-size: 8px;
            color: #fff;
            margin-left: 2px;
            line-height: 15px;
        }

        .banr-head .login-sec button {
            margin-left: -4px;
        }

        .banr-head .login-sec .login-with {
            float: right;
            margin-top: 5px;
            margin-right: 1px;
        }

        .banr-head .login-sec input {
            background: #fff;
            border-radius: 30px;
            border: none;
            height: 39px;
            font-size: 14px;
            padding: 0 30px;
            margin-bottom: 15px;
            margin-top: 21px;
            margin-left: -8px;
        }

        /*Today Changes CSS*/
        .banr-head .login-sec button {
            border: none;
            background: #6d0000;
            border-radius: 30px;
            padding: 8px 30px;
            color: #fff;
            float: left;
            font-size: 14px;
            transition: all 0.3s;
        }

        .banr-head .login-sec .uou-tabs .tabs li.active .bg_cr,
        .banr-head .login-sec .uou-tabs .tabs li.active .bg_ur,
        .banr-head .login-sec .uou-tabs .tabs li.active .bg_lo {
            /*background: #e72428;*/
            color: #000;
        }

        .bg_lo {
            border-top-right-radius: 7px;
        }

        a#lc {
            margin-right: -1px;
        }

        .bg_cr {
            border-top-left-radius: 7px;
        }

        .banr-head .login-sec .login-with a {
            height: 34px;
            width: 34px;
            text-align: center;
            line-height: 34px;
            border-radius: 50%;
            display: inline-block;
            margin: -4px;
            font-size: 19px;
            color: #fff;
            background: transparent;
            transition: all 0.3s;
        }

        #login {
            background: #6d0000;
        }

        #login:hover {
            background: #6d0000b8;
        }

        .banr-head .login-sec .forget {
            border-top: 1px solid #fff;
            display: inline-block;
            width: 100%;
            padding-top: 20px;
            text-align: center;
            color: #191515;
            margin-top: 13px;
            font-size: 12px;
            font-weight: 600;
        }

        #clickbtn {
            color: #6d0000;
            font-size: 13px;
        }

        .social_icon {
            margin-top: 20px;
            color: #ffffff;
            font-size: 24px;
            width: 18px;
            margin: 8px;
        }

        .uou-block-1a {
            height: 85px !important;
        }

        .mt-55 {
            margin-top: 17px;
        }

        .mt-5PX {
            margin-top: 5px;
            padding-top: 24px !important;
        }

        .m-h4 {
            font-size: 26px;
        }

        .home-pro .services li .ser-inn h4 {
            font-weight: bold;
            color: #fff;
            font-size: 22px;
            margin: 0px;
            margin-bottom: 10px;
        }

        .app_img {
            position: absolute;
            right: -53%;
            top: -24px;
            width: 100%;
        }

        img#c-image {
            height: 23px;
            width: 15%;
            margin: 5px;
        }

        img#a-image {
            WIDTH: 32px !important;
        }

        .wc-3 {
            width: 50% !important;
        }

        .wu-3 {
            width: 50% !important;
        }

        .wl-3 {
            width: 50% !important;
        }
        /* .search1 {
    color: white;
    float:left !important;
    margin-top: 10px;
    font-size: 23px;
    
} */

        @media screen and (min-width:786px) {
            
          
            .nowrap-md {
                white-space: nowrap;
            }

            .testi {
                display: flex;
                justify-content: center;
            }

            .mt-md-inMinus {
                margin-top: -86px;
            }

            .pl-md-0 {
                padding-left: 0;
            }

            .p-md-0 {
                padding: 0 !important;
            }

            .pt-md-1 {
                padding-top: 38px !important;
            }

            .p-r-34 {
                padding-right: 34px !important;
            }

            .m-inM {
                margin-left: 18px !important;
            }

            .m-73 {
                margin-left: 73px !important;
            }

            .m-35 {
                margin-left: 35px !important;
            }

            .d-flex-align-items-center {
                display: flex !important;
                align-items: center !important;
            }

            .m-spons-1 {
                margin-left: 68px !important;
            }

            .m-spons-2 {
                margin-left: 78px !important;
            }

            .m-spons-3 {
                margin-left: 3rem !important;
            }
        }

        .mt-20 {
            margin-top: 20px !important;
            margin-top: 2px !important;
            margin-right: 4px !important;
        }

        .mt-2PX {
            margin-top: 2px !important;
        }

        .text-warning {
            color: #6d0000 !important;
        }

        .speacialBord {
            margin-top: 51px;
            border-top: white solid 1px;
        }

        .pb-0 {
            padding-bottom: 10px !important;
        }

        .pb-smooth {
            padding-bottom: 4.3rem !important;
            padding-top: 28px !important;
        }

        .bg-trans {
            BACKGROUND: TRANSPARENT !important;
        }

        .pt-34px {
            padding-top: 34px !important;
        }

        .mt-0 {
            margin-top: 0px;
        }

        .pt-0 {
            padding-top: 9px !important;
        }

        .d-flex-align-items-center {
            display: flex !important;
            align-items: center !important;
        }

        .m-spons-1 {
            margin-left: 68px !important;
        }

        .m-spons-2 {
            margin-left: 78px !important;
        }

        .m-spons-3 {
            margin-left: 3rem !important;
        }

        .bnr-head-img-1 {
            background-image: url({{ asset('assets/web/images/banner.png') }}) !important;
        }

        .bnr-head-img-2 {
            background-image: url({{ asset('assets/web/images/banner.png') }}) !important;
        }

        .bnr-head-img-3 {
            background-image: url({{ asset('assets/web/images/banner.png') }}) !important;
        }

        .setInside {
            margin-top: -2rem;
            DISPLAY: flex;
            color: #6d0000;
            align-content: center;
            align-items: center;
            justify-content: center;
            margin-top: -3rem;
            color: #6d0000;
        }

        .setInside div {
            margin-left: 20px;
        }

        .d-inline-block {
            display: inline-block;
            line-height: 1.3;
        }

        .fs-10 {
            margin-left: -49px;
        }

        .fs-11 {
            margin-left: 23px;
        }

        .slideshow-container {
            max-width: 1000px;
            position: relative;
            margin: auto;
        }

        /* Next & previous buttons */
        .prev,
        .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            margin-top: -22px;
            color: white;
            font-weight: bold;
            font-size: 18px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
            user-select: none;
        }

        /* Position the "next button" to the right */
        .next {
            right: 0;
            border-radius: 3px 0 0 3px;
        }

        /* On hover, add a black background color with a little bit see-through */
        .prev:hover,
        .next:hover { 
            background-color: rgba(0, 0, 0, 0.8);
        }

        /* Caption text */
        .text {
            color: #f2f2f2;
            font-size: 15px;
            padding: 8px 12px;
            position: absolute;
            bottom: 8px;
            width: 100%;
            text-align: center;
        }

        /* Number text (1/3 etc) */
        .numbertext {
            color: #f2f2f2;
            font-size: 12px;
            padding: 8px 12px;
            position: absolute;
            top: 0;
        }

        /* The dots/bullets/indicators */
        .dot {
            cursor: pointer;
            height: 15px;
            width: 15px;
            margin: 0 2px;
            background: #6d0000;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;
        }

        .active_slide {
            background: #6d0000 !important;
        }

        /* Fading animation */
        .fade {
            -webkit-animation-name: fade;
            -webkit-animation-duration: 1.5s;
            animation-name: fade;
            animation-duration: 1.5s;
        }

        @-webkit-keyframes fade {
            from {
                opacity: .4
            }

            to {
                opacity: 1
            }
        }

        @keyframes fade {
            from {
                opacity: .4
            }

            to {
                opacity: 1
            }
        }
    
        /* On smaller screens, decrease text size */
        @media only screen and (max-width: 320px) {

            .owl-carousel.owl-drag .owl-item {
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    width: 68% !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
            /* .form-check-input .input_height .position-static .abc{
                color: #000;
    font-weight: bold;
    font-size: 11px !important;
            }
            .form-check-input .input_height1 .position-static .abc1{
                color: #000;
    font-weight: bold;
    font-size: 11px !important;
            } */
            .blog-grid {
    background: #fff;
    box-shadow: 0px 0px 20px #6d0000;
    margin: 10px 0;
    border: 1px solid #6d0000;
    border-radius: 1px;
    /* margin-right: 8px; */
    width: 75% !important;
}

            .prev,
            .next,
            .text {
                font-size: 11px
            }
        }
        @media (min-width: 768px){
          img {
    max-width: 49%;
    height: auto;
    vertical-align: middle;
    margin-left: 0px;
}
.user-blog1 {
    display: none;
}
div#demo1 {
    position: relative;
    display: block;
}
            
            .blog-grid {
    background: #fff;
    box-shadow: 0px 0px 20px #6d0000;
    margin: 10px 0;
    border: 1px solid #6d0000;
    border-radius: 1px;
    margin-right: 45px;
    width: 100%;
}
.owl-carousel.owl-drag .owl-item {
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    width: 13% !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.owl-carousel.owl-drag .owl-item {
    /* width: 300px !important; */
}
            .owl-stage{
                transform: translate3d(-240px, 0px, 0px);
    transition: all 0s ease 0s;
    width: 200% !important;
    display: flex;

            }
            .owl-item.active {
                width: 100%;
                min-width: 282px;
            }
            .abc{
                float:right;
            }
            .dots{
            position: initial;
    bottom: 0px;
    display: flex;
    justify-content: center;
    width: 100%;
}
 
        }
        @media (max-width: 767px){
            .tc{
                text-align: center;
            }
            .owl-item.active {
                width: 100%;
                min-width: 392px;
            }
        .uou-tabs .accordion-link.active {
            color: #fff;
            background: #6d0000 !important;
        } 
        img#a-image {
            display: none;
        }
        img#ua-image {
            display: none;
        }
}
@media (max-width:587px){
  .user-blog {
    background: #903f40;
    padding: 50px 0 50px;
    display: none;
    margin-top: 135px !important;

}
.user-blog1 {
    background: #903f40;
    padding: 50px 0 50px;
    display: block;
    margin-top: 300px;
    
}
  img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    margin-left: 0px;
}
  .owl-carousel .item {
    padding: 0 0px;
}
            .blog-grid {
    background: #fff;
    box-shadow: 0px 0px 20px #6d0000;
    margin: 10px 0;
    border: 1px solid #6d0000;
    border-radius: 1px;
    margin-right: 0px;
    width: 100% !important;
}
#dots-con {
    text-align: center;
    display: none;
}
.discretion-blog .btn {
    color: #fefeff;
    background: #454343;
    width: 78% !important;
    text-transform: uppercase;
    border-radius: 0px;
    margin-top: 10px;
    -webkit-transform: perspective(1px) translateZ(0);
    -moz-transform: perspective(1px) translateZ(0);
    -o-transform: perspective(1px) translateZ(0);
    transform: perspective(122px) translateZ(0);
}

}
.heading {
    text-align: center;
    color: #6d0000;
    font-size: 30px;
    font-weight: 700;
    position: relative;
    margin-bottom: 70px;
    text-transform: uppercase;
    z-index: 999;
}
.white-heading{
    color: #ffffff;
}
.heading:after {
    content: ' ';
    position: absolute;
    top: 100%;
    left: 50%;
    height: 40px;
    width: 180px;
    border-radius: 4px;
    transform: translateX(-50%);
    background: url("{{asset('assets/web/img/heading-line.png')}}");
    background-repeat: no-repeat;
    background-position: center;
}
.white-heading:after {
    background: url(img/heading-line-white.png);
    background-repeat: no-repeat;
    background-position: center;
}

.heading span {
    font-size: 18px;
    display: block;
    font-weight: 500;
}
.white-heading span {
    color: #ffffff;
}
/* clearfix */
.owl-carousel .owl-wrapper:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
/* display none until init */
.owl-carousel{
  display: none;
  position: relative;
  width: 100%;
  -ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
  display: none;
  position: relative;
  -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
  overflow: hidden;
  position: relative;
  width: 100%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
  -webkit-transition: height 500ms ease-in-out;
  -moz-transition: height 500ms ease-in-out;
  -ms-transition: height 500ms ease-in-out;
  -o-transition: height 500ms ease-in-out;
  transition: height 500ms ease-in-out;
}
.owl-carousel .owl-item img{
    max-width: 100%;
    object-fit: contain;
}
.owl-carousel .item {
    padding: 0 40.5px;
}
.owl-carousel .owl-item{
  float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
  cursor: pointer;
}
.owl-controls {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* mouse grab icon */
.grabbing { 
    cursor:url(grabbing.png) 8 8, move;
}

/* fix */
.owl-carousel  .owl-wrapper,
.owl-carousel  .owl-item{
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
}

#demo1 .customNavigation, #demo2 .customNavigation {
    top: 50%;
    position: absolute;
    width: 100%;
    left: 0px;
    margin-top: -40px;
}
#demo1 .customNavigation .btn, #demo2 .customNavigation .btn {
    padding: 0px;
}
#demo1 .customNavigation .btn.prev, #demo2 .customNavigation .btn.prev {
    position: relative;
    left:-76px;
}
#demo1 .customNavigation .btn.next, #demo2 .customNavigation .btn.next {
    position: relative;
        right: -70px;
    float: right;
}
div#demo1 {
    position: relative;
}

.user-blog {
    background: #903f40;
    padding: 50px 0 50px;
}
.user-blog:before {
    position: absolute;
    top: -100px;
    left: 0;
    content: " ";
    background: url(img/user-blog.png);
    background-size: 100% 100px;
    width: 100%;
    height: 100px;
    float: left;
    z-index: 99;
}
div#owl-demo1 .item {
    padding: 0 15px;
}
.blog-grid {
    background: #fff;
    box-shadow: 0px 0px 20px #6d0000;
    margin: 10px 0;
    border: 1px solid #6d0000;
    border-radius: 1px;
    margin-right:45px;
    width: 100% !important;
}

.discretion-blog {
    padding: 15px;
}

.discretion-blog p {
    font-size: 15px;
    color: #454343;
    min-height: 100px;
}

.discretion-blog h4 {
    color: #6d0000;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}

.discretion-blog .btn {
    color: #fefeff;
    background: #454343;
    width: 100%;
    text-transform: uppercase;
    border-radius: 0px;
    margin-top: 10px;
    -webkit-transform: perspective(1px) translateZ(0);
    -moz-transform: perspective(1px) translateZ(0);
    -o-transform: perspective(1px) translateZ(0);
    transform: perspective(122px) translateZ(0);
}


.discretion-blog .btn:hover {
    color: #ffffff;
}
.discretion-blog .btn:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #6d0000;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    border: 2px solid #6d0000;
}

.discretion-blog .btn:hover:before {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
}
.date-blog {
    background: #6d0000;
    width: 70px;
    position: absolute;
    bottom: 0;
    left: 15px;
    color: #fff;
    text-align: center;
    padding: 10px 0px;
}
.date-blog:after {
    width: 0;
    height: 0;
    content: "";
    border-left: 0 solid transparent;
    border-right: 70px solid transparent;
    border-bottom: 12px solid #6d0000;
    top: -11px;
    position: absolute;
    left: 0;
}
.img-date {
    position: relative;
}
.user-blog .owl-theme .owl-controls .owl-page span {
    width: 17px;
    height: 17px;
    background: #454343;
    opacity: 1;
}
.user-blog .owl-theme .owl-controls .owl-page.active span, .user-blog .owl-theme .owl-controls.clickable .owl-page:hover span {
    background: #82b53f;
}
.input_height{
    height: 13px !important;
}
.input_height1{
    height: 13px !important;
    margin-left: 10px !important;
}
.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}
.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 70%;
  left: 40%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
.img-date:hover .image {
  opacity: 0.3;
}
.img-date:hover .middle{
  opacity: 1;
}
.text {
  background-color: #6d0000;
  color: white;
  font-size: 26px;
  padding: 16px 38px 16px 16px;
  border-radius: 100px;
}


/* .owl-item{
    width:6%;
}
div#owl-demo1 .item {
    padding: 0 15px;
    width: 50%;
} */


@media (min-width:280px){

    .banr-head .login-sec .uou-tabs form {
    padding: 0px 0px 20px 30px;
}

}


/* phone  */

.intl-tel-input {
  position: relative;
  display: block;
}

.intl-tel-input * {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.intl-tel-input .hide {
  display: none;
}

.intl-tel-input .v-hide {
  visibility: hidden;
}

.intl-tel-input input,
.intl-tel-input input[type=text],
.intl-tel-input input[type=tel] {
  position: relative;
  z-index: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-right: 36px;
  margin-right: 0;
}

.intl-tel-input .flag-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 1px;
}

.intl-tel-input .selected-flag {
  z-index: 1;
  position: relative;
  width: 36px;
  height: 100%;
  padding: 0 0 0 8px;
}

.intl-tel-input .selected-flag .iti-flag {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

.intl-tel-input .selected-flag .iti-arrow {
  position: absolute;
  top: 50%;
  margin-top: -2px;
  right: 6px;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid #555;
}

.intl-tel-input .selected-flag .iti-arrow.up {
  border-top: none;
  border-bottom: 4px solid #555;
}

.intl-tel-input .country-list {
  position: absolute;
  z-index: 2;
  list-style: none;
  text-align: left;
  padding: 0;
  margin: 0 0 0 -1px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  background-color: white;
  border: 1px solid #CCC;
  white-space: nowrap;
  max-height: 200px;
  overflow-y: scroll;
}

.intl-tel-input .country-list.dropup {
  bottom: 100%;
  margin-bottom: -1px;
}

.intl-tel-input .country-list .flag-box {
  display: inline-block;
  width: 20px;
}

@media (max-width: 500px) {
  .intl-tel-input .country-list {
    white-space: normal;
  }
}

.intl-tel-input .country-list .divider {
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #CCC;
}

.intl-tel-input .country-list .country {
  padding: 5px 10px;
}

.intl-tel-input .country-list .country .dial-code {
  color: #999;
}

.intl-tel-input .country-list .country.highlight {
  background-color: rgba(0, 0, 0, 0.05);
}

.intl-tel-input .country-list .flag-box,
.intl-tel-input .country-list .country-name,
.intl-tel-input .country-list .dial-code {
  vertical-align: middle;
}

.intl-tel-input .country-list .flag-box,
.intl-tel-input .country-list .country-name {
  margin-right: 6px;
}

.intl-tel-input.allow-dropdown input,
.intl-tel-input.allow-dropdown input[type=text],
.intl-tel-input.allow-dropdown input[type=tel],
.intl-tel-input.separate-dial-code input,
.intl-tel-input.separate-dial-code input[type=text],
.intl-tel-input.separate-dial-code input[type=tel] {
  padding-right: 6px;
  padding-left: 52px;
  margin-left: 0;
}

.intl-tel-input.allow-dropdown .flag-container,
.intl-tel-input.separate-dial-code .flag-container {
  right: auto;
  left: 0;
}

.intl-tel-input.allow-dropdown .selected-flag,
.intl-tel-input.separate-dial-code .selected-flag {
  width: 46px;
}

.intl-tel-input.allow-dropdown .flag-container:hover {
  cursor: pointer;
}

.intl-tel-input.allow-dropdown .flag-container:hover .selected-flag {
  background-color: rgba(0, 0, 0, 0.05);
}

.intl-tel-input.allow-dropdown input[disabled] + .flag-container:hover,
.intl-tel-input.allow-dropdown input[readonly] + .flag-container:hover {
  cursor: default;
}

.intl-tel-input.allow-dropdown input[disabled] + .flag-container:hover .selected-flag,
.intl-tel-input.allow-dropdown input[readonly] + .flag-container:hover .selected-flag {
  background-color: transparent;
}

.intl-tel-input.separate-dial-code .selected-flag {
  background-color: rgba(0, 0, 0, 0.05);
  display: table;
}

.intl-tel-input.separate-dial-code .selected-dial-code {
  display: table-cell;
  vertical-align: middle;
  padding-left: 28px;
}

.intl-tel-input.separate-dial-code.iti-sdc-2 input,
.intl-tel-input.separate-dial-code.iti-sdc-2 input[type=text],
.intl-tel-input.separate-dial-code.iti-sdc-2 input[type=tel] {
  padding-left: 66px;
}

.intl-tel-input.separate-dial-code.iti-sdc-2 .selected-flag {
  width: 60px;
}

.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input,
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type=text],
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type=tel] {
  padding-left: 76px;
}

.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 .selected-flag {
  width: 70px;
}

.intl-tel-input.separate-dial-code.iti-sdc-3 input,
.intl-tel-input.separate-dial-code.iti-sdc-3 input[type=text],
.intl-tel-input.separate-dial-code.iti-sdc-3 input[type=tel] {
  padding-left: 74px;
}

.intl-tel-input.separate-dial-code.iti-sdc-3 .selected-flag {
  width: 68px;
}

.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input,
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=text],
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=tel] {
  padding-left: 84px;
}

.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 .selected-flag {
  width: 78px;
}

.intl-tel-input.separate-dial-code.iti-sdc-4 input,
.intl-tel-input.separate-dial-code.iti-sdc-4 input[type=text],
.intl-tel-input.separate-dial-code.iti-sdc-4 input[type=tel] {
  padding-left: 82px;
}

.intl-tel-input.separate-dial-code.iti-sdc-4 .selected-flag {
  width: 76px;
}

.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input,
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=text],
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=tel] {
  padding-left: 92px;
}

.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 .selected-flag {
  width: 86px;
}

.intl-tel-input.separate-dial-code.iti-sdc-5 input,
.intl-tel-input.separate-dial-code.iti-sdc-5 input[type=text],
.intl-tel-input.separate-dial-code.iti-sdc-5 input[type=tel] {
  padding-left: 90px;
}

.intl-tel-input.separate-dial-code.iti-sdc-5 .selected-flag {
  width: 84px;
}

.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input,
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type=text],
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type=tel] {
  padding-left: 100px;
}

.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 .selected-flag {
  width: 94px;
}

.intl-tel-input.iti-container {
  position: absolute;
  top: -1000px;
  left: -1000px;
  z-index: 1060;
  padding: 1px;
}

.intl-tel-input.iti-container:hover {
  cursor: pointer;
}

.iti-mobile .intl-tel-input.iti-container {
  top: 30px;
  bottom: 30px;
  left: 30px;
  right: 30px;
  position: fixed;
}

.iti-mobile .intl-tel-input .country-list {
  max-height: 100%;
  width: 100%;
}

.iti-mobile .intl-tel-input .country-list .country {
  padding: 10px 10px;
  line-height: 1.5em;
}

.iti-flag {
  width: 20px;
}

.iti-flag.be {
  width: 18px;
}

.iti-flag.ch {
  width: 15px;
}

.iti-flag.mc {
  width: 19px;
}

.iti-flag.ne {
  width: 18px;
}

.iti-flag.np {
  width: 13px;
}

.iti-flag.va {
  width: 15px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2 / 1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
  .iti-flag {
    background-size: 5630px 15px;
  }
}

.iti-flag.ac {
  height: 10px;
  background-position: 0px 0px;
}

.iti-flag.ad {
  height: 14px;
  background-position: -22px 0px;
}

.iti-flag.ae {
  height: 10px;
  background-position: -44px 0px;
}

.iti-flag.af {
  height: 14px;
  background-position: -66px 0px;
}

.iti-flag.ag {
  height: 14px;
  background-position: -88px 0px;
}

.iti-flag.ai {
  height: 10px;
  background-position: -110px 0px;
}

.iti-flag.al {
  height: 15px;
  background-position: -132px 0px;
}

.iti-flag.am {
  height: 10px;
  background-position: -154px 0px;
}

.iti-flag.ao {
  height: 14px;
  background-position: -176px 0px;
}

.iti-flag.aq {
  height: 14px;
  background-position: -198px 0px;
}

.iti-flag.ar {
  height: 13px;
  background-position: -220px 0px;
}

.iti-flag.as {
  height: 10px;
  background-position: -242px 0px;
}

.iti-flag.at {
  height: 14px;
  background-position: -264px 0px;
}

.iti-flag.au {
  height: 10px;
  background-position: -286px 0px;
}

.iti-flag.aw {
  height: 14px;
  background-position: -308px 0px;
}

.iti-flag.ax {
  height: 13px;
  background-position: -330px 0px;
}

.iti-flag.az {
  height: 10px;
  background-position: -352px 0px;
}

.iti-flag.ba {
  height: 10px;
  background-position: -374px 0px;
}

.iti-flag.bb {
  height: 14px;
  background-position: -396px 0px;
}

.iti-flag.bd {
  height: 12px;
  background-position: -418px 0px;
}

.iti-flag.be {
  height: 15px;
  background-position: -440px 0px;
}

.iti-flag.bf {
  height: 14px;
  background-position: -460px 0px;
}

.iti-flag.bg {
  height: 12px;
  background-position: -482px 0px;
}

.iti-flag.bh {
  height: 12px;
  background-position: -504px 0px;
}

.iti-flag.bi {
  height: 12px;
  background-position: -526px 0px;
}

.iti-flag.bj {
  height: 14px;
  background-position: -548px 0px;
}

.iti-flag.bl {
  height: 14px;
  background-position: -570px 0px;
}

.iti-flag.bm {
  height: 10px;
  background-position: -592px 0px;
}

.iti-flag.bn {
  height: 10px;
  background-position: -614px 0px;
}

.iti-flag.bo {
  height: 14px;
  background-position: -636px 0px;
}

.iti-flag.bq {
  height: 14px;
  background-position: -658px 0px;
}

.iti-flag.br {
  height: 14px;
  background-position: -680px 0px;
}

.iti-flag.bs {
  height: 10px;
  background-position: -702px 0px;
}

.iti-flag.bt {
  height: 14px;
  background-position: -724px 0px;
}

.iti-flag.bv {
  height: 15px;
  background-position: -746px 0px;
}

.iti-flag.bw {
  height: 14px;
  background-position: -768px 0px;
}

.iti-flag.by {
  height: 10px;
  background-position: -790px 0px;
}

.iti-flag.bz {
  height: 14px;
  background-position: -812px 0px;
}

.iti-flag.ca {
  height: 10px;
  background-position: -834px 0px;
}

.iti-flag.cc {
  height: 10px;
  background-position: -856px 0px;
}

.iti-flag.cd {
  height: 15px;
  background-position: -878px 0px;
}

.iti-flag.cf {
  height: 14px;
  background-position: -900px 0px;
}

.iti-flag.cg {
  height: 14px;
  background-position: -922px 0px;
}

.iti-flag.ch {
  height: 15px;
  background-position: -944px 0px;
}

.iti-flag.ci {
  height: 14px;
  background-position: -961px 0px;
}

.iti-flag.ck {
  height: 10px;
  background-position: -983px 0px;
}

.iti-flag.cl {
  height: 14px;
  background-position: -1005px 0px;
}

.iti-flag.cm {
  height: 14px;
  background-position: -1027px 0px;
}

.iti-flag.cn {
  height: 14px;
  background-position: -1049px 0px;
}

.iti-flag.co {
  height: 14px;
  background-position: -1071px 0px;
}

.iti-flag.cp {
  height: 14px;
  background-position: -1093px 0px;
}

.iti-flag.cr {
  height: 12px;
  background-position: -1115px 0px;
}

.iti-flag.cu {
  height: 10px;
  background-position: -1137px 0px;
}

.iti-flag.cv {
  height: 12px;
  background-position: -1159px 0px;
}

.iti-flag.cw {
  height: 14px;
  background-position: -1181px 0px;
}

.iti-flag.cx {
  height: 10px;
  background-position: -1203px 0px;
}

.iti-flag.cy {
  height: 13px;
  background-position: -1225px 0px;
}

.iti-flag.cz {
  height: 14px;
  background-position: -1247px 0px;
}

.iti-flag.de {
  height: 12px;
  background-position: -1269px 0px;
}

.iti-flag.dg {
  height: 10px;
  background-position: -1291px 0px;
}

.iti-flag.dj {
  height: 14px;
  background-position: -1313px 0px;
}

.iti-flag.dk {
  height: 15px;
  background-position: -1335px 0px;
}

.iti-flag.dm {
  height: 10px;
  background-position: -1357px 0px;
}

.iti-flag.do {
  height: 13px;
  background-position: -1379px 0px;
}

.iti-flag.dz {
  height: 14px;
  background-position: -1401px 0px;
}

.iti-flag.ea {
  height: 14px;
  background-position: -1423px 0px;
}

.iti-flag.ec {
  height: 14px;
  background-position: -1445px 0px;
}

.iti-flag.ee {
  height: 13px;
  background-position: -1467px 0px;
}

.iti-flag.eg {
  height: 14px;
  background-position: -1489px 0px;
}

.iti-flag.eh {
  height: 10px;
  background-position: -1511px 0px;
}

.iti-flag.er {
  height: 10px;
  background-position: -1533px 0px;
}

.iti-flag.es {
  height: 14px;
  background-position: -1555px 0px;
}

.iti-flag.et {
  height: 10px;
  background-position: -1577px 0px;
}

.iti-flag.eu {
  height: 14px;
  background-position: -1599px 0px;
}

.iti-flag.fi {
  height: 12px;
  background-position: -1621px 0px;
}

.iti-flag.fj {
  height: 10px;
  background-position: -1643px 0px;
}

.iti-flag.fk {
  height: 10px;
  background-position: -1665px 0px;
}

.iti-flag.fm {
  height: 11px;
  background-position: -1687px 0px;
}

.iti-flag.fo {
  height: 15px;
  background-position: -1709px 0px;
}

.iti-flag.fr {
  height: 14px;
  background-position: -1731px 0px;
}

.iti-flag.ga {
  height: 15px;
  background-position: -1753px 0px;
}

.iti-flag.gb {
  height: 10px;
  background-position: -1775px 0px;
}

.iti-flag.gd {
  height: 12px;
  background-position: -1797px 0px;
}

.iti-flag.ge {
  height: 14px;
  background-position: -1819px 0px;
}

.iti-flag.gf {
  height: 14px;
  background-position: -1841px 0px;
}

.iti-flag.gg {
  height: 14px;
  background-position: -1863px 0px;
}

.iti-flag.gh {
  height: 14px;
  background-position: -1885px 0px;
}

.iti-flag.gi {
  height: 10px;
  background-position: -1907px 0px;
}

.iti-flag.gl {
  height: 14px;
  background-position: -1929px 0px;
}

.iti-flag.gm {
  height: 14px;
  background-position: -1951px 0px;
}

.iti-flag.gn {
  height: 14px;
  background-position: -1973px 0px;
}

.iti-flag.gp {
  height: 14px;
  background-position: -1995px 0px;
}

.iti-flag.gq {
  height: 14px;
  background-position: -2017px 0px;
}

.iti-flag.gr {
  height: 14px;
  background-position: -2039px 0px;
}

.iti-flag.gs {
  height: 10px;
  background-position: -2061px 0px;
}

.iti-flag.gt {
  height: 13px;
  background-position: -2083px 0px;
}

.iti-flag.gu {
  height: 11px;
  background-position: -2105px 0px;
}

.iti-flag.gw {
  height: 10px;
  background-position: -2127px 0px;
}

.iti-flag.gy {
  height: 12px;
  background-position: -2149px 0px;
}

.iti-flag.hk {
  height: 14px;
  background-position: -2171px 0px;
}

.iti-flag.hm {
  height: 10px;
  background-position: -2193px 0px;
}

.iti-flag.hn {
  height: 10px;
  background-position: -2215px 0px;
}

.iti-flag.hr {
  height: 10px;
  background-position: -2237px 0px;
}

.iti-flag.ht {
  height: 12px;
  background-position: -2259px 0px;
}

.iti-flag.hu {
  height: 10px;
  background-position: -2281px 0px;
}

.iti-flag.ic {
  height: 14px;
  background-position: -2303px 0px;
}

.iti-flag.id {
  height: 14px;
  background-position: -2325px 0px;
}

.iti-flag.ie {
  height: 10px;
  background-position: -2347px 0px;
}

.iti-flag.il {
  height: 15px;
  background-position: -2369px 0px;
}

.iti-flag.im {
  height: 10px;
  background-position: -2391px 0px;
}

.iti-flag.in {
  height: 14px;
  background-position: -2413px 0px;
}

.iti-flag.io {
  height: 10px;
  background-position: -2435px 0px;
}

.iti-flag.iq {
  height: 14px;
  background-position: -2457px 0px;
}

.iti-flag.ir {
  height: 12px;
  background-position: -2479px 0px;
}

.iti-flag.is {
  height: 15px;
  background-position: -2501px 0px;
}

.iti-flag.it {
  height: 14px;
  background-position: -2523px 0px;
}

.iti-flag.je {
  height: 12px;
  background-position: -2545px 0px;
}

.iti-flag.jm {
  height: 10px;
  background-position: -2567px 0px;
}

.iti-flag.jo {
  height: 10px;
  background-position: -2589px 0px;
}

.iti-flag.jp {
  height: 14px;
  background-position: -2611px 0px;
}

.iti-flag.ke {
  height: 14px;
  background-position: -2633px 0px;
}

.iti-flag.kg {
  height: 12px;
  background-position: -2655px 0px;
}

.iti-flag.kh {
  height: 13px;
  background-position: -2677px 0px;
}

.iti-flag.ki {
  height: 10px;
  background-position: -2699px 0px;
}

.iti-flag.km {
  height: 12px;
  background-position: -2721px 0px;
}

.iti-flag.kn {
  height: 14px;
  background-position: -2743px 0px;
}

.iti-flag.kp {
  height: 10px;
  background-position: -2765px 0px;
}

.iti-flag.kr {
  height: 14px;
  background-position: -2787px 0px;
}

.iti-flag.kw {
  height: 10px;
  background-position: -2809px 0px;
}

.iti-flag.ky {
  height: 10px;
  background-position: -2831px 0px;
}

.iti-flag.kz {
  height: 10px;
  background-position: -2853px 0px;
}

.iti-flag.la {
  height: 14px;
  background-position: -2875px 0px;
}

.iti-flag.lb {
  height: 14px;
  background-position: -2897px 0px;
}

.iti-flag.lc {
  height: 10px;
  background-position: -2919px 0px;
}

.iti-flag.li {
  height: 12px;
  background-position: -2941px 0px;
}

.iti-flag.lk {
  height: 10px;
  background-position: -2963px 0px;
}

.iti-flag.lr {
  height: 11px;
  background-position: -2985px 0px;
}

.iti-flag.ls {
  height: 14px;
  background-position: -3007px 0px;
}

.iti-flag.lt {
  height: 12px;
  background-position: -3029px 0px;
}

.iti-flag.lu {
  height: 12px;
  background-position: -3051px 0px;
}

.iti-flag.lv {
  height: 10px;
  background-position: -3073px 0px;
}

.iti-flag.ly {
  height: 10px;
  background-position: -3095px 0px;
}

.iti-flag.ma {
  height: 14px;
  background-position: -3117px 0px;
}

.iti-flag.mc {
  height: 15px;
  background-position: -3139px 0px;
}

.iti-flag.md {
  height: 10px;
  background-position: -3160px 0px;
}

.iti-flag.me {
  height: 10px;
  background-position: -3182px 0px;
}

.iti-flag.mf {
  height: 14px;
  background-position: -3204px 0px;
}

.iti-flag.mg {
  height: 14px;
  background-position: -3226px 0px;
}

.iti-flag.mh {
  height: 11px;
  background-position: -3248px 0px;
}

.iti-flag.mk {
  height: 10px;
  background-position: -3270px 0px;
}

.iti-flag.ml {
  height: 14px;
  background-position: -3292px 0px;
}

.iti-flag.mm {
  height: 14px;
  background-position: -3314px 0px;
}

.iti-flag.mn {
  height: 10px;
  background-position: -3336px 0px;
}

.iti-flag.mo {
  height: 14px;
  background-position: -3358px 0px;
}

.iti-flag.mp {
  height: 10px;
  background-position: -3380px 0px;
}

.iti-flag.mq {
  height: 14px;
  background-position: -3402px 0px;
}

.iti-flag.mr {
  height: 14px;
  background-position: -3424px 0px;
}

.iti-flag.ms {
  height: 10px;
  background-position: -3446px 0px;
}

.iti-flag.mt {
  height: 14px;
  background-position: -3468px 0px;
}

.iti-flag.mu {
  height: 14px;
  background-position: -3490px 0px;
}

.iti-flag.mv {
  height: 14px;
  background-position: -3512px 0px;
}

.iti-flag.mw {
  height: 14px;
  background-position: -3534px 0px;
}

.iti-flag.mx {
  height: 12px;
  background-position: -3556px 0px;
}

.iti-flag.my {
  height: 10px;
  background-position: -3578px 0px;
}

.iti-flag.mz {
  height: 14px;
  background-position: -3600px 0px;
}

.iti-flag.na {
  height: 14px;
  background-position: -3622px 0px;
}

.iti-flag.nc {
  height: 10px;
  background-position: -3644px 0px;
}

.iti-flag.ne {
  height: 15px;
  background-position: -3666px 0px;
}

.iti-flag.nf {
  height: 10px;
  background-position: -3686px 0px;
}

.iti-flag.ng {
  height: 10px;
  background-position: -3708px 0px;
}

.iti-flag.ni {
  height: 12px;
  background-position: -3730px 0px;
}

.iti-flag.nl {
  height: 14px;
  background-position: -3752px 0px;
}

.iti-flag.no {
  height: 15px;
  background-position: -3774px 0px;
}

.iti-flag.np {
  height: 15px;
  background-position: -3796px 0px;
}

.iti-flag.nr {
  height: 10px;
  background-position: -3811px 0px;
}

.iti-flag.nu {
  height: 10px;
  background-position: -3833px 0px;
}

.iti-flag.nz {
  height: 10px;
  background-position: -3855px 0px;
}

.iti-flag.om {
  height: 10px;
  background-position: -3877px 0px;
}

.iti-flag.pa {
  height: 14px;
  background-position: -3899px 0px;
}

.iti-flag.pe {
  height: 14px;
  background-position: -3921px 0px;
}

.iti-flag.pf {
  height: 14px;
  background-position: -3943px 0px;
}

.iti-flag.pg {
  height: 15px;
  background-position: -3965px 0px;
}

.iti-flag.ph {
  height: 10px;
  background-position: -3987px 0px;
}

.iti-flag.pk {
  height: 14px;
  background-position: -4009px 0px;
}

.iti-flag.pl {
  height: 13px;
  background-position: -4031px 0px;
}

.iti-flag.pm {
  height: 14px;
  background-position: -4053px 0px;
}

.iti-flag.pn {
  height: 10px;
  background-position: -4075px 0px;
}

.iti-flag.pr {
  height: 14px;
  background-position: -4097px 0px;
}

.iti-flag.ps {
  height: 10px;
  background-position: -4119px 0px;
}

.iti-flag.pt {
  height: 14px;
  background-position: -4141px 0px;
}

.iti-flag.pw {
  height: 13px;
  background-position: -4163px 0px;
}

.iti-flag.py {
  height: 11px;
  background-position: -4185px 0px;
}

.iti-flag.qa {
  height: 8px;
  background-position: -4207px 0px;
}

.iti-flag.re {
  height: 14px;
  background-position: -4229px 0px;
}

.iti-flag.ro {
  height: 14px;
  background-position: -4251px 0px;
}

.iti-flag.rs {
  height: 14px;
  background-position: -4273px 0px;
}

.iti-flag.ru {
  height: 14px;
  background-position: -4295px 0px;
}

.iti-flag.rw {
  height: 14px;
  background-position: -4317px 0px;
}

.iti-flag.sa {
  height: 14px;
  background-position: -4339px 0px;
}

.iti-flag.sb {
  height: 10px;
  background-position: -4361px 0px;
}

.iti-flag.sc {
  height: 10px;
  background-position: -4383px 0px;
}

.iti-flag.sd {
  height: 10px;
  background-position: -4405px 0px;
}

.iti-flag.se {
  height: 13px;
  background-position: -4427px 0px;
}

.iti-flag.sg {
  height: 14px;
  background-position: -4449px 0px;
}

.iti-flag.sh {
  height: 10px;
  background-position: -4471px 0px;
}

.iti-flag.si {
  height: 10px;
  background-position: -4493px 0px;
}

.iti-flag.sj {
  height: 15px;
  background-position: -4515px 0px;
}

.iti-flag.sk {
  height: 14px;
  background-position: -4537px 0px;
}

.iti-flag.sl {
  height: 14px;
  background-position: -4559px 0px;
}

.iti-flag.sm {
  height: 15px;
  background-position: -4581px 0px;
}

.iti-flag.sn {
  height: 14px;
  background-position: -4603px 0px;
}

.iti-flag.so {
  height: 14px;
  background-position: -4625px 0px;
}

.iti-flag.sr {
  height: 14px;
  background-position: -4647px 0px;
}

.iti-flag.ss {
  height: 10px;
  background-position: -4669px 0px;
}

.iti-flag.st {
  height: 10px;
  background-position: -4691px 0px;
}

.iti-flag.sv {
  height: 12px;
  background-position: -4713px 0px;
}

.iti-flag.sx {
  height: 14px;
  background-position: -4735px 0px;
}

.iti-flag.sy {
  height: 14px;
  background-position: -4757px 0px;
}

.iti-flag.sz {
  height: 14px;
  background-position: -4779px 0px;
}

.iti-flag.ta {
  height: 10px;
  background-position: -4801px 0px;
}

.iti-flag.tc {
  height: 10px;
  background-position: -4823px 0px;
}

.iti-flag.td {
  height: 14px;
  background-position: -4845px 0px;
}

.iti-flag.tf {
  height: 14px;
  background-position: -4867px 0px;
}

.iti-flag.tg {
  height: 13px;
  background-position: -4889px 0px;
}

.iti-flag.th {
  height: 14px;
  background-position: -4911px 0px;
}

.iti-flag.tj {
  height: 10px;
  background-position: -4933px 0px;
}

.iti-flag.tk {
  height: 10px;
  background-position: -4955px 0px;
}

.iti-flag.tl {
  height: 10px;
  background-position: -4977px 0px;
}

.iti-flag.tm {
  height: 14px;
  background-position: -4999px 0px;
}

.iti-flag.tn {
  height: 14px;
  background-position: -5021px 0px;
}

.iti-flag.to {
  height: 10px;
  background-position: -5043px 0px;
}

.iti-flag.tr {
  height: 14px;
  background-position: -5065px 0px;
}

.iti-flag.tt {
  height: 12px;
  background-position: -5087px 0px;
}

.iti-flag.tv {
  height: 10px;
  background-position: -5109px 0px;
}

.iti-flag.tw {
  height: 14px;
  background-position: -5131px 0px;
}

.iti-flag.tz {
  height: 14px;
  background-position: -5153px 0px;
}

.iti-flag.ua {
  height: 14px;
  background-position: -5175px 0px;
}

.iti-flag.ug {
  height: 14px;
  background-position: -5197px 0px;
}

.iti-flag.um {
  height: 11px;
  background-position: -5219px 0px;
}

.iti-flag.us {
  height: 11px;
  background-position: -5241px 0px;
}

.iti-flag.uy {
  height: 14px;
  background-position: -5263px 0px;
}

.iti-flag.uz {
  height: 10px;
  background-position: -5285px 0px;
}

.iti-flag.va {
  height: 15px;
  background-position: -5307px 0px;
}

.iti-flag.vc {
  height: 14px;
  background-position: -5324px 0px;
}

.iti-flag.ve {
  height: 14px;
  background-position: -5346px 0px;
}

.iti-flag.vg {
  height: 10px;
  background-position: -5368px 0px;
}

.iti-flag.vi {
  height: 14px;
  background-position: -5390px 0px;
}

.iti-flag.vn {
  height: 14px;
  background-position: -5412px 0px;
}

.iti-flag.vu {
  height: 12px;
  background-position: -5434px 0px;
}

.iti-flag.wf {
  height: 14px;
  background-position: -5456px 0px;
}

.iti-flag.ws {
  height: 10px;
  background-position: -5478px 0px;
}

.iti-flag.xk {
  height: 15px;
  background-position: -5500px 0px;
}

.iti-flag.ye {
  height: 14px;
  background-position: -5522px 0px;
}

.iti-flag.yt {
  height: 14px;
  background-position: -5544px 0px;
}

.iti-flag.za {
  height: 14px;
  background-position: -5566px 0px;
}

.iti-flag.zm {
  height: 14px;
  background-position: -5588px 0px;
}

.iti-flag.zw {
  height: 10px;
  background-position: -5610px 0px;
}

.iti-flag {
  width: 20px;
  height: 15px;
  box-shadow: 0px 0px 1px 0px #888;
  background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/img/flags.png");
  background-repeat: no-repeat;
  background-color: #DBDBDB;
  background-position: 20px 0;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2 / 1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
  .iti-flag {
    background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/img/flags@2x.png");
  }
}

.iti-flag.np {
  background-color: transparent;
}

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.col-md-12.left-img p img {
    height: 110px;
}
/* body {
  margin: 20px;
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #555;
} */

.hide {
  display: none;
}

pre {
  margin: 0 !important;
  display: inline-block;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
  background: none;
}

/* input, */
/* button {
  height: 35px;
  margin: 0;
  padding: 6px 12px;
  border-radius: 2px;
  font-family: inherit;
  font-size: 100%;
  color: inherit;
} */

/* input[disabled],
button[disabled] {
  background-color: #eee;
} */

/* input,
select {
  border: 1px solid #CCC;
  width: 250px;
}

::-webkit-input-placeholder {
  color: #BBB;
}

::-moz-placeholder {
  /* Firefox 19+ */
  /* color: #BBB;
  opacity: 1;
} */

:-ms-input-placeholder {
  color: #BBB;
}

button {
  color: #FFF;
  background-color: #428BCA;
  border: 1px solid #357EBD;
}

button:hover {
  background-color: #3276B1;
  border-color: #285E8E;
  cursor: pointer;
} 

#result {
  margin-bottom: 100px;
}
.swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }
      

@media  (max-width:375px){
  .discretion-blog .btn {
    color: #fefeff;
    background: #454343;
    width: 100% !important;
    text-transform: uppercase;
    border-radius: 0px;
    margin-top: 10px;
    -webkit-transform: perspective(1px) translateZ(0);
    -moz-transform: perspective(1px) translateZ(0);
    -o-transform: perspective(1px) translateZ(0);
    transform: perspective(122px) translateZ(0);
}   
  .user-blog {
    background: #903f40;
    padding: 50px 0 50px;
    display: none;
}
.user-blog1 {
    background: #903f40;
    padding: 50px 0 50px;
    display: block;
    margin-top: 693px;

    
}
  img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    margin-left: 0px;
}
  .owl-carousel .item {
    padding: 0 0px;
}
            .blog-grid {
    background: #fff;
    box-shadow: 0px 0px 20px #6d0000;
    margin: 10px 0;
    border: 1px solid #6d0000;
    border-radius: 1px;
    margin-right: 45px;
    width: 98% !important;
}
.sidebar {
    overflow-y: scroll;
    height: 600px !important;
    background-color: white;
    margin-top: -1px;
    overflow-x: hidden;
}
}
@media  (min-width:414px){
            .blog-grid {
    background: #fff;
    box-shadow: 0px 0px 20px #6d0000;
    margin: 10px 0;
    border: 1px solid #6d0000;
    border-radius: 1px;
    margin-right: 45px;
    width: 127% !important;
}
}
.center-content{
  padding: 10px 10px 10px 10px;
}
div#sidebar::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

div#sidebar::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

div#sidebar::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #903f40;
}
    </style>
    {{-- <link rel="stylesheet" href="{{asset('assets/web/css/blog.scss')}}"> --}}
    {{-- <div class="box-shadow-for-ui">
        <div class="uou-block-2b">
            <div class="container"> <a href="{{ url('home') }}" class="logo">
                    <img src="{{ asset('assets/web/img/logo.png') }}" alt=""></a>
                <a href="#" class="mobile-sidebar-button mobile-sidebar-toggle"><span></span></a>
                <nav class="nav">
                    <ul class="sf-menu">
                        <li class="navLinkA active"> <a href="{{ url('home') }}"><img
                                    src="{{ asset('assets/web/images/home.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />Home</a> </li>
                        <li class="navLinkA"> <a href="{{ url('about') }}"><img
                                    src="{{ asset('assets/web/images/2.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />About</a></li>
                        <li class="navLinkA"> <a href="{{ url('recommended') }}"><img
                                    src="{{ asset('assets/web/images/3.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />Recommended</a></li>
                        <li class="navLinkA"> <a href="{{ url('services-provider') }}"><img
                                    src="{{ asset('assets/web/images/4.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />Services</a>
                            <ul class="demo-menu" style="display: none;">
                                <li id="nav-menu-item-865"
                                    class="sub-menu-item  menu-item-odd menu-item-depth-1 menu-item menu-item-type-custom menu-item-object-custom">
                                    <a href="{{ url('services-provider/generalservices') }}"
                                        class="menu-link sub-menu-link">General Services</a>
                                </li>
                                <li id="nav-menu-item-866"
                                    class="sub-menu-item  menu-item-odd menu-item-depth-1 menu-item menu-item-type-custom menu-item-object-custom">
                                    <a href="{{ url('services-provider/professionalservices') }}"
                                        class="menu-link sub-menu-link">Professional Services</a>
                                </li>
                            </ul>
                        </li>
                        <li class="navLinkA"> <a href="{{ url('regionsserved') }}"><img
                                    src="{{ asset('assets/web/images/8.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />Service Regions</a></li>
                        <li class="navLinkA"> <a href="{{ url('faq') }}"><img
                                    src="{{ asset('assets/web/images/8.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />FAQ'S</a></li>
                        <li class="navLinkA"> <a href="{{ url('contact') }}"><img
                                    src="{{ asset('assets/web/images/9.png') }}" class="img-responsive mr-2 mt-2"
                                    height="20" width="20" />Contact</a></li>
                        <li class="navLinkA active"> <a href="{{ url('comingsoon') }}"><img
                                    src="{{ asset('assets/web/img/shoppingtrolley.png') }}"
                                    class="img-responsive mr-2 mt-2" height="20" width="20" /></a></li>
                    </ul>
                </nav>
            </div>
        </div>
        <!-- end .uou-block-2b -->
    </div> --}}
    @include('web.pages.navbar')
    <!-- HOME PRO-->
    <div class="home-pro">

        <!-- PRO BANNER HEAD -->
        <div  class="banr-head" id="slide-baner">
            <div class="">
              <div class="row">
                <div class="col-md-4 col-sm-12" style="padding: 0">
              <div class="sidebar sidebar2-mobile" id="sidebar">
                <div class="sidebar-inner slimscroll">
          <div id="sidebar-menu" class="sidebar-menu center-content">
          @if($data)
                  {!! html_entity_decode(nl2br(e($data->side_meta))) !!}
              @endif
          </div>
                </div>
            </div>
          </div>
          {{-- <div class="col-md-1">
            <div class="row">
              <div class="col-md-12 left-img">
              @if($datapicleft)
                  {!! html_entity_decode(nl2br(e($datapicleft->meta))) !!}
              @endif
          
              <img class="img1" src="{{asset('assets/web/img/profile.png')}}" alt="" width="500" height="150px">
             </div>  
              </div>
              <br>
        
              <div class="row">
              <div class="col-md-12">
                <img class="img1" src="{{asset('assets/web/img/profile.png')}}" alt="" width="800" height="94">
              </div>  
              </div>
              <br>
              <div class="row">
                <div class="col-md-12">
                  <img class="img1" src="{{asset('assets/web/img/profile.png')}}" alt="" width="500" height="1000">
                </div>  
                </div>
                <br>
                <div class="row">
                  <div class="col-md-12">
                    <img class="img1" src="{{asset('assets/web/img/profile.png')}}" alt="" width="500" height="1000">
                  </div>  
                  </div>
          </div> --}}
          <div class="col-md-8 col-sm-12" style="padding: 0">
            <div class="sidebar mobile-second-content center-content" id="sidebar">
              <div class="sidebar-inner slimscroll">
              @if($datacenter)
                  {!! html_entity_decode(nl2br(e($datacenter->meta))) !!}
              @endif
            </div>
          </div>

          </div>

          {{-- <div class="col-md-1">
            <div class="row">
              <div class="col-md-12 left-img">
                @if($datapicright)
                  {!! html_entity_decode(nl2br(e($datapicright->meta))) !!}
                @endif
                <img class="img1" src="{{asset('assets/web/img/profile.png')}}" alt="" width="500" height="150px">
              </div>  
              </div>
              <br>
              <div class="row">
                <div class="col-md-12">
                  <img class="img1" src="{{asset('assets/web/img/profile.png')}}" alt="" width="500" height="150px">
                </div>  
                </div>
                <br>
                <div class="row">
                  <div class="col-md-12">
                    <img class="img1" src="{{asset('assets/web/img/profile.png')}}" alt="" width="500" height="150px">
                  </div>  
                  </div>
                  <br>
                  <div class="row">
                    <div class="col-md-12">
                      <img class="img1" src="{{asset('assets/web/img/profile.png')}}" alt="" width="500" height="150px">
                    </div>  
                    </div>

          </div> --}}
         
          
         
            </div>
          </div>
           </div>
            {{-- <div class="col-sm-12 setInside">
      <div class="circleDivide" data-class="bnr-head-img-" data-eq="0" id="indicate">

      </div>
      <div class="circleDivide" data-class="bnr-head-img-" data-eq="1" id="indicate">

      </div>
      <div class="circleDivide" data-class="bnr-head-img-" data-eq="2" id="indicate">

      </div>
      <div class="circleDivide" data-class="bnr-head-img-" data-eq="3" id="indicate">
      </div>
    </div> --}}
        
    <!-- for mobile view -->
    



  <!--Slider-->
  <section class="user-blog1">
    <div class="container">
        <div class="row">
            <div class="col-md-4"></div>
          <div class="col-md-4">
                <h3 style="color: #fff;text-align:center;">News Feed</h3>
            </div>
            <div class="col-md-3"></div>
        </div>
<div id="slider">  
  @foreach ($news as $newssingle )
                              <div class="slide">
                                  <div class="blog-grid">
                                      <div class="img-date">
                                          @php
                                              $check = explode(".",$newssingle->image);
                                              $ext = $check[1];
                                          @endphp
                                          @if($ext == 'mp4' || $ext == 'mov' ||$ext == 'flv' ||$ext == 'webm' )
                                          <video width="100%" height="auto" controls>
                                          <source src="{{asset('admin/news/'.$newssingle->image)}}" type="video/mp4">
                                          </video>
                                          @else
                                          <img src="{{asset('admin/news/'.$newssingle->image)}}" class="image" weight="800px;" height="800px;">
                                          @endif
                                          <div class="date-blog">{{Date('d-M-Y',strtotime($newssingle->created_at))}}</div>
                                          <div class="middle">
                                              <a href="mailto:">
                                                  {{-- <div class="text" style="left: -30px;"><i class="" aria-hidden="true"></i></div></a> --}}
                                              <a href="{{ url("news/view/".$newssingle->id) }}" target="_blank">
                                                  {{-- <div class="text" style="left: 40px;"><i class="" aria-hidden="true"></i></div></a> --}}
                                          </div>
                                      </div>
                                      <div class="discretion-blog">
                                          <h4>{{$newssingle->title}}</h4>
                                          <p style="word-break: break-word;">{{ Illuminate\Support\Str::limit($newssingle->desc, 100) }}</p>
                                          <a class="btn" href="{{url('/news/view/'.$newssingle->id)}}">Read more</a>
                                      </div>
                                  </div>
                              </div>
                          @endforeach
  
  <!--Controlling arrows-->
  <span class="controls" onclick="prevSlide(-1)" id="left-arrow"><i class="fa fa-arrow-left" aria-hidden="true"></i>
</span>
  <span class="controls" id="right-arrow" onclick="nextSlide(1)"><i class="fa fa-arrow-right" aria-hidden="true"></i>
</span>
</div>


  <div id="dots-con">
 <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>
 </div>
    </div>
  </section>
    </div>
    

        <!-- SERVICES -->
        <section class="user-blog">
          <div class="container">
              <div class="row">
                  <div class="col-md-4"></div>
                <div class="col-md-4">
                      <h3 style="color: #fff;text-align:center;">News Feed</h3>
                  </div>
                  <div class="col-md-3"></div>
              </div>
              {{-- <div class="row">
                  <div class="col-md-4"></div>
                  <div class="col-md-4">
                      <div class="dots"><div class="dot"></div><div class="dot">
                      </div><div class="dot active-dot"></div><div class="dot"></div></div>
                  </div>
                  <div class="col-md-3"></div>
              </div> --}}
              <div id="demo1">
                  <div class="span12">
                      <div class="owl-carousel owl-theme">
                          @foreach ($news as $newssingle )
                              <div class="item">
                                  <div class="blog-grid">
                                      <div class="img-date">
                                          @php
                                              $check = explode(".",$newssingle->image);
                                              $ext = $check[1];
                                          @endphp
                                          @if($ext == 'mp4' || $ext == 'mov' ||$ext == 'flv' ||$ext == 'webm' )
                                          <video width="100%" height="auto" controls>
                                          <source src="{{asset('admin/news/'.$newssingle->image)}}" type="video/mp4">
                                          </video>
                                          @else
                                          <img src="{{asset('admin/news/'.$newssingle->image)}}" class="image" weight="800px;" height="800px;">
                                          @endif
                                          <div class="date-blog">{{Date('d-M-Y',strtotime($newssingle->created_at))}}</div>
                                          <div class="middle">
                                              <a href="mailto:">
                                                  {{-- <div class="text" style="left: -30px;"><i class="" aria-hidden="true"></i></div></a> --}}
                                              <a href="{{ url("news/view/".$newssingle->id) }}" target="_blank">
                                                  {{-- <div class="text" style="left: 40px;"><i class="" aria-hidden="true"></i></div></a> --}}
                                          </div>
                                      </div>
                                      <div class="discretion-blog">
                                          <h4>{{$newssingle->title}}</h4>
                                          <p style="word-break: break-word;">{{ Illuminate\Support\Str::limit($newssingle->desc, 100) }}</p>
                                          <a class="btn" href="{{url('/news/view/'.$newssingle->id)}}">Read more</a>
                                      </div>
                                  </div>
                              </div>
                          @endforeach
                        </div>
                      {{-- <div id="owl-demo1" class="owl-carousel">
                          @foreach ($news as $newssingle )
                              <div class="item">
                              <div class="blog-grid">
                                  <div class="img-date">
                                      @php
                                          $check = explode(".",$newssingle->image);
                                          $ext = $check[1];
                                      @endphp
                                      @if($ext == 'mp4' || $ext == 'mov' ||$ext == 'flv' ||$ext == 'webm' )
                                      <video width="100%" height="auto" controls>
                                        <source src="{{asset('admin/news/'.$newssingle->image)}}" type="video/mp4">
                                      </video>
                                      @else
                                      <img src="{{asset('admin/news/'.$newssingle->image)}}" class="image" weight="800px;" height="800px;">
                                      @endif
                                      <div class="date-blog">{{Date('d-M-Y',strtotime($newssingle->created_at))}}</div>
                                      <div class="middle">
                                          <a href="mailto:"><div class="text" style="left: -30px;"><i class="fa fa-envelope" aria-hidden="true"></i></div></a>
                                          <a href="https://www.addtoany.com/share_save?linkurl={{ url("news/view/".$newssingle->id) }}" target="_blank"><div class="text" style="left: 40px;"><i class="fa fa-share-alt" aria-hidden="true"></i></div></a>
                                      </div>
                                  </div>
                                  <div class="discretion-blog">
                                      <h4>{{$newssingle->title}}</h4>
                                      <p style="word-break: break-all;">{{ Illuminate\Support\Str::limit($newssingle->desc, 100) }}</p>
                                      <a class="btn" href="{{url('/news/view/'.$newssingle->id)}}">Read more</a>
                                  </div>
                              </div>
                          </div>
                          @endforeach
                          
  
  
                      </div> --}}
                      {{-- <div class="customNavigation">
                          <a class="btn prev"><img src="https://i.ibb.co/sJJYzrQ/arrow-left-round.png"></a>
                          <a class="btn next"><img src="https://i.ibb.co/c8Gp9cy/arrow-right-round.png"></a>
                      </div> --}}
  
                  </div>
  
              </div>
  
          </div>
          </div>
      </section>


   

        <!-- PRO SECTION -->
        <!--<section class="pro-content">-->
        <!-- PRO SECTION -->
        <!--  <div class="container-fluid">-->
        <!--    <div class="row">-->

        <!-- PRO TEXT -->
        <!--      <div class="col-md-6 pro-inside">-->
        <!--        <div class="position-center-center col-md-9">-->
        <!--          <h1>-->
        <!--    Collaborate on a project				  </h1>-->
        <!--    <p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.    </p>-->
        <!--        </div>-->
        <!--      </div>	-->

        <!-- PRO BACKGROUND -->
        <!--      <div class="col-md-6 pro-inside" style="background:url({{ asset('assets/web/images/pro-img-2.jpg') }}) center center no-repeat;"></div>-->
        <!--    </div>-->
        <!--  </div>-->
        <!--</section>-->

        <!-- APP IMAGE -->
        {{-- <section class="app-images">
    <div class="container">
      <div class="row">

        <!-- TEXT -->
        <div class="col-md-6 text-center text-area">
          <h1>Try Now The House Runs For Meub Mobile App For Your Smartphone</h1>
          <p>It is a long established fact that a reader will be distracted by the readable content of a page when
            looking at its layout.</p>
          <div class="mt-2 d-flex justify-content-center">
            <a href="https://play.google.com/store/apps?hl=en" class="btn btn-icon-text"><i class="fa fa-play btn-icon-prepend mdi-36px"></i>
              <span class="d-inline-block btn-icon-title">
                <small class="font-weight-light d-block text-uppercase fs-10">Get it on</small><br>
                Google Play
              </span>
            </a>
            <a href="https://apps.apple.com/" class="btn btn-icon-text" style="margin-left: 20px;">
              <i class="fa fa-apple btn-icon-prepend mdi-36px"></i>
              <span class="d-inline-block btn-icon-title " style="margin-left:-25px">
                <small class="font-weight-light d-block text-uppercase fs-11">Download on the
                </small><br>
                App Store
              </span>
            </a>
          </div>
        </div>

        <!-- APP IMAGE -->
        <div class="col-md-6 text-right"><img src="{{asset('assets/web/images/app-img.png')}}" alt="" class="app_img"> </div>
      </div>
    </div>
  </section> --}}

        <!-- TESTIMONIALS -->
        {{-- <div class="vc_row wpb_row vc_row-fluid">
	  <section class="clients-says">
      <div class="container">
        <h3 class="section-title">What our users say  </h3>
        <div class="testi">
          <div class="texti-slide owl-carousel owl-theme" style="opacity: 1; display: block;">
			  				      <!-- SLide -->
						<div class="owl-wrapper-outer"><div class="owl-wrapper" style="width: 4500px; left: 0px; display: block;"><div class="owl-item" style="width: 450px;"><div class="clints-text">
						  <div class="text-in">
							<p>
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue. 							</p>
						  </div>
						  <div class="avatar">
							<div class=""> <a href="#"> <img src="http://tiger.eplug-ins.com/wp-content/themes/tiger/assets/img/avatar-1.jpg" alt="Image."> </a> </div>
							<div class="media-body">
							  <h6>Jhon Smith</h6>
							  <span>smashingmagazine.com</span> </div>
						  </div>
						</div></div><div class="owl-item" style="width: 450px;"><div class="clints-text">
						  <div class="text-in">
							<p>
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue. 							</p>
						  </div>
						  <div class="avatar">
							<div class=""> <a href="#"> <img src="http://tiger.eplug-ins.com/wp-content/themes/tiger/assets/img/avatar-1.jpg" alt="Image."> </a> </div>
							<div class="media-body">
							  <h6>John Kevin Mara</h6>
							  <span>smashingmagazine.com</span> </div>
						  </div>
						</div></div><div class="owl-item" style="width: 450px;"><div class="clints-text">
						  <div class="text-in">
							<p>
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue. 							</p>
						  </div>
						  <div class="avatar">
							<div class=""> <a href="#"> <img src="http://tiger.eplug-ins.com/wp-content/themes/tiger/assets/img/avatar-1.jpg" alt="Image."> </a> </div>
							<div class="media-body">
							  <h6>John Kevin Mara</h6>
							  <span>smashingmagazine.com</span> </div>
						  </div>
						</div></div><div class="owl-item" style="width: 450px;"><div class="clints-text">
						  <div class="text-in">
							<p>
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue. 							</p>
						  </div>
						  <div class="avatar">
							<div class=""> <a href="#"> <img src="http://tiger.eplug-ins.com/wp-content/themes/tiger/assets/img/avatar-1.jpg" alt="Image."> </a> </div>
							<div class="media-body">
							  <h6>John Kevin Mara</h6>
							  <span>smashingmagazine.com</span> </div>
						  </div>
						</div></div><div class="owl-item" style="width: 450px;"><div class="clints-text">
						  <div class="text-in">
							<p>
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue. 							</p>
						  </div>
						  <div class="avatar">
							<div class=""> <a href="#"> <img src="http://tiger.eplug-ins.com/wp-content/themes/tiger/assets/img/avatar-1.jpg" alt="Image."> </a> </div>
							<div class="media-body">
							  <h6>John Kevin Mara</h6>
							  <span>smashingmagazine.com</span> </div>
						  </div>
						</div></div></div></div>

					<!-- SLide -->
								      <!-- SLide -->
						

					<!-- SLide -->
								      <!-- SLide -->
						

					<!-- SLide -->
								      <!-- SLide -->
						

					<!-- SLide -->
								      <!-- SLide -->
						

					<!-- SLide -->
							

          <div class="owl-controls clickable"><div class="owl-pagination"><div class="owl-page active"><span class=""></span></div><div class="owl-page"><span class=""></span></div><div class="owl-page"><span class=""></span></div></div></div></div>
        </div>
      </div>
    </section>
  </div> --}}
        {{-- <div class="wpb_column vc_column_container vc_col-sm-12">
  <div class="vc_column-inner ">
    <div class="wpb_wrapper">
      </div>
    </div>
  </div>
</div> --}}
        <!-- sponsors -->
        {{-- <div class="sponsors" style="background:url({{asset('assets/web/images/sponser-bg.jpg')}}) no-repeat;">
    <div class="container">
      <div>
        <div>
          <h3 class="section-title">SOME OF OUR MEMBERS</h3>
          <div class="row d-flex-align-items-center">
            <div class="col-md-2"><a href="https://qbched.com/" target=""><img src="{{asset('assets/web/images/sponsor_logo5.png')}}" alt="" class="img-responsive"></div>
            <div class="col-md-2 m-spons-1"><a href="http://www.bojamhoor.com/" target=""><img src="{{asset('assets/web/images/sponsor_logo3.png')}}" alt="" class="img-responsive"></div>
            <div class="col-md-2 m-spons-2"><a href="https://almana.com/" target=""><img src="{{asset('assets/web/images/sponsor_logo4.png')}}" alt="" class="img-responsive"></div>
            <div class="col-md-2 m-spons-3"><a href="http://www.qctcqatar.com/" target=""><img src="{{asset('assets/web/images/sponsor_logo2.png')}}" alt="" class="img-responsive"></div>
            <div class="col-md-2"><a href="https://www.midmac.net/" target=""><img src="{{asset('assets/web/images/sponsor_logo1.png')}}" alt="" class="img-responsive"></div>
          </div>
        </div>
      </div>
    </div>
  </div> --}}
    </div>
    </div>
@endsection
@section('scripts')
<!-- <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> -->
<script>
  var slideIndex = 1;
  showSlides(slideIndex);

  function plusSlides(n) {
      showSlides(slideIndex += n);
  }

  function currentSlide(n) {
      showSlides(slideIndex = n);
  }

  function showSlides(n) {
      var i;
      var slides = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("dot");
      if (n > slides.length) {
          slideIndex = 1
      }
      if (n < 1) {
          slideIndex = slides.length
      }
      for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none";
      }
      for (i = 0; i < dots.length; i++) {
          dots[i].className = dots[i].className.replace(" active_slide", "");
      }
      slides[slideIndex - 1].style.display = "block";
      dots[slideIndex - 1].className += " active_slide";
  }

</script>
   
   
   
   <!-- <script>
        var slideIndex = 1;
        showSlides(slideIndex);

        function plusSlides(n) {
            showSlides(slideIndex += n);
        }

        function currentSlide(n) {
            showSlides(slideIndex = n);
        }

        function showSlides(n) {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            var dots = document.getElementsByClassName("dot");
            if (n > slides.length) {
                slideIndex = 1
            }
            if (n < 1) {
                slideIndex = slides.length
            }
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active_slide", "");
            }
            slides[slideIndex - 1].style.display = "block";
            dots[slideIndex - 1].className += " active_slide";
        }

    </script> -->

     <script type="text/javascript">
        let slider_i = 0;
        $(document).ready(function() {
            $("div.circleDivide").click(function() {
                let classname = $(this).data("class");
                let eq = $(this).data("eq");
                slider_i = eq;
                for (let i = eq; i <= 3; i++) {
                    $("#slide-baner").removeClass(classname + i);
                }
                $("div.circleDivide").removeClass("circleDivideFocus")
                for (let i = 0; i <= eq; i++) {
                    $("div.circleDivide").eq(i).addClass("circleDivideFocus");
                }
                $("#slide-baner").addClass(classname + eq);
            })
            $("#a-image").hide();
            $("#ua-image").hide();
            $("#ld-image").hide()
            $("#ac").on("click", function() {
                if ($(this).parent().hasClass("active")) {
                    $("#c-image").hide();
                    $("#a-image").show();
                    $("#ud-image").show();
                    $("#ua-image").hide();
                    $("#ld-image").show();
                    $("#la-image").hide();
                }
            });
            $("#uc").on("click", function() {
                if ($(this).parent().hasClass("active")) {
                    // alert("yes");
                    $("#ud-image").hide();
                    $("#ua-image").show();
                    $("#c-image").show();
                    $("#a-image").hide();
                    $("#ld-image").show();
                    $("#la-image").hide();
                }
            });
            $("#lc").on("click", function() {
                if ($(this).parent().hasClass("active")) {
                    // alert("yes");
                    $("#ud-image").show();
                    $("#ua-image").hide();
                    $("#c-image").show();
                    $("#a-image").hide();
                    $("#la-image").show();
                    $("#ld-image").hide();

                }
            });

            // alert();

        });
    
        $(document).ready(function() {
          $('.owl-carousel').owlCarousel({
                autoWidth: false
            })
        });

    </script> 
    <!-- Swiper Slider js -->
    <script>
      // var swiper = new Swiper(".mySwiper", {
      //   slidesPerView: 3,
      //   spaceBetween: 30,
      //   freeMode: true,
      //   autoplay:true,
      //   pagination: {
      //     el: ".swiper-pagination",
      //     clickable: true,
      //   },
      // });
//       const swiper2 = new Swiper('.swiper', {
//   // Optional parameters
//   direction: 'horizontal',
//   loop: true,
//   slidesPerView:4,
//   breakpoints: {
//     // when window width is >= 320px
//     320: {
//       slidesPerView: 2,
//       spaceBetween: 20
//     },
//     // when window width is >= 480px
//     480: {
//       slidesPerView: 3,
//       spaceBetween: 30
//     },
//     // when window width is >= 640px
//     640: {
//       slidesPerView: 4,
//       spaceBetween: 40
//     }
//   }
//   // If we need pagination
//   pagination: {
//     el: '.swiper-pagination',
//   },


//   // And if we need scrollbar
//   scrollbar: {
//     el: '.swiper-scrollbar',
//   },
// });
    </script>
    <!-- Swiper End -->
    <script>
        function toggleSubmit() {
            var toggle = document.getElementById("toggleOn1")
            var toggleBtn = document.getElementById("submitBtn1")
            if (toggle.checked) {
                toggleBtn.removeAttribute("disabled")
                toggleBtn.classList.remove("opaclight")
            } else {
                toggleBtn.setAttribute("disabled", "true");
                toggleBtn.classList.add("opaclight")
            }
        }

        function toggleSubmit2() {
            var toggle = document.getElementById("toggleOn2")
            var toggleBtn = document.getElementById("submitBtn2")
            if (toggle.checked) {
                toggleBtn.removeAttribute("disabled")
                toggleBtn.classList.remove("opaclight")
            } else {
                toggleBtn.setAttribute("disabled", "true");
                toggleBtn.classList.add("opaclight")
            }
        }

    </script>
    <script>
        // var slideBaner = document.querySelector("#slide-baner");
        // var indicateVar = document.querySelectorAll("#indicate");
        // setInterval(function runSlide() {
        //     indicateVar[slider_i].classList.add('circleDivideFocus')
        //     if (slider_i == 0) {
        //         slider_i++;
        //         slideBaner.classList.add('bnr-head-img-' + slider_i)
        //         slider_i--;
        //     } else {
        //         slideBaner.classList.add('bnr-head-img-' + slider_i)
        //     }
        //     if (slider_i == 3) {
        //         slider_i = 0;
        //         for (let d = 0; d < indicateVar.length; d++) {
        //             slideBaner.classList.remove('bnr-head-img-' + d)
        //             indicateVar[d].classList.remove('circleDivideFocus')
        //         }
        //     } else {
        //         slider_i++;
        //         console.log("i value : " + slider_i)
        //     }
        // }, 2000)

    </script>
    <!-- <script>
 $(document).ready(function() {

            var owl = $("#owl-demo1");

            owl.owlCarousel({
                autoplay:true,
                items: 3, //10 items above 1000px browser width
                itemsDesktop: [1000, 3], //5 items between 1000px and 901px
                itemsDesktopSmall: [900, 2], // 3 items betweem 900px and 601px
                itemsTablet: [600, 1], //2 items between 600 and 0;
                itemsMobile: [500, 1] // itemsMobile disabled - inherit from itemsTablet option

            });

            // Custom Navigation Events
            $(".next").click(function() {
                owl.trigger('owl.next');
            })
            $(".prev").click(function() {
                owl.trigger('owl.prev');
            })
            $(".play").click(function() {
                owl.trigger('owl.play', 1000);
            })
            $(".stop").click(function() {
                owl.trigger('owl.stop');
            })

        });
    </script> -->
    <script>
      // var slideBaner = document.querySelector("#slide-baner");
      // var indicateVar = document.querySelectorAll("#indicate");
      // console.log('var -> ',indicateVar)
      // setInterval(function runSlide() {
      //     indicateVar[slider_i].classList.add('circleDivideFocus')
      //     if (slider_i == 0) {
      //         slider_i++;
      //         slideBaner.classList.add('bnr-head-img-' + slider_i)
      //         slider_i--;
      //     } else {
      //         slideBaner.classList.add('bnr-head-img-' + slider_i)
      //     }
      //     if (slider_i == 3) {
      //         slider_i = 0;
      //         for (let d = 0; d < indicateVar.length; d++) {
      //             slideBaner.classList.remove('bnr-head-img-' + d)
      //             indicateVar[d].classList.remove('circleDivideFocus')
      //         }
      //     } else {
      //         slider_i++;
      //         console.log("i value : " + slider_i)
      //     }
      // }, 2000)

  </script>
    
    
 
 
    <script>
      $(document).ready(function() {
     
                 var owl = $("#owl-demo1");
     
                 owl.owlCarousel({
                     autoplay:true,
                     items: 3, //10 items above 1000px browser width
                     itemsDesktop: [1000, 3], //5 items between 1000px and 901px
                     itemsDesktopSmall: [900, 2], // 3 items betweem 900px and 601px
                     itemsTablet: [600, 1], //2 items between 600 and 0;
                     itemsMobile: [500, 1] // itemsMobile disabled - inherit from itemsTablet option
     
                 });
     
                 // Custom Navigation Events
                 $(".next").click(function() {
                     owl.trigger('owl.next');
                 })
                 $(".prev").click(function() {
                     owl.trigger('owl.prev');
                 })
                 $(".play").click(function() {
                     owl.trigger('owl.play', );
                 })
                 $(".stop").click(function() {
                     owl.trigger('owl.stop');
                 })
                 
     
             });
         </script>
    
    
    
    
    
    
    <script>
        
var telInput = $("#phone"),
  errorMsg = $("#error-msg"),
  validMsg = $("#valid-msg");

// initialise plugin
telInput.intlTelInput({

  allowExtensions: true,
  formatOnDisplay: true,
  autoFormat: true,
  autoHideDialCode: true,
  autoPlaceholder: true,
  defaultCountry: "auto",
  ipinfoToken: "yolo",

  nationalMode: false,
  numberType: "MOBILE",
  //onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
  preferredCountries: ['sa', 'ae', 'qa','om','bh','kw','ma'],
  preventInvalidNumbers: true,
  separateDialCode: true,
  initialCountry: "auto",
  geoIpLookup: function(callback) {
  $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
    var countryCode = (resp && resp.country) ? resp.country : "";
    callback(countryCode);
  });
},
   utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/11.0.9/js/utils.js"
});

var reset = function() {
  telInput.removeClass("error");
  errorMsg.addClass("hide");
  validMsg.addClass("hide");
};

// on blur: validate
telInput.blur(function() {
  reset();
  if ($.trim(telInput.val())) {
    if (telInput.intlTelInput("isValidNumber")) {
      validMsg.removeClass("hide");
    } else {
      telInput.addClass("error");
      errorMsg.removeClass("hide");
    }
  }
});

// on keyup / change flag: reset
telInput.on("keyup change", reset);

function fetchdata(){
  // alert('working');

  $('#country_code').val($("#phone").intlTelInput("getSelectedCountryData").dialCode);

  // alert($("#phone").intlTelInput("getSelectedCountryData").dialCode)
  $('#form-register').submit();
}


    </script>

    <script>
        $(document).ready(function(){
          $(document).on('click','#upload-proof',function(){
            event. preventDefault() 
              $( "#file_proff" ).trigger( "click" );
          });
        });
    </script>

    <script>
      var slides = document.querySelectorAll(".slide");
var dots = document.querySelectorAll(".dot");
var index = 0;


function prevSlide(n){
  index+=n;
  console.log("prevSlide is called");
  changeSlide();
}

function nextSlide(n){
  index+=n;
  changeSlide();
}

changeSlide();

function changeSlide(){
    
  if(index>slides.length-1)
    index=0;
  
  if(index<0)
    index=slides.length-1;
  
  
  
    for(let i=0;i<slides.length;i++){
      slides[i].style.display = "none";
      
      dots[i].classList.remove("active");
      
      
    }
    
    slides[index].style.display = "block";
    dots[index].classList.add("active");

  

}



    </script>

@endsection