.header{padding: 18px 0;     z-index: 99; background: #fff; transition:all .3s;}
.sticky_header{
     position: sticky; top:0;
      box-shadow: 0 0 20px -10px rgb(0 0 0 / 80%); transition:all .3s;    padding: 4px 0;
}
body{font-family: "Livvic",Sans-serif;}
.container {
    max-width: 1365px;
}
.navbar-default .navbar-nav>li>a{color: #101010;font-weight: 500;overflow: hidden;}
.navbar-default .navbar-nav>li>a:hover{color: #b41e43;}
.navbar-nav li ul{
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background-color: #fff;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    opacity: 0;
    visibility: hidden;
    transition: 500ms ease;
    z-index: 99;
    box-shadow: 0px 0px 65px 0px rgb(0 0 0 / 10%);padding: 21px 0;
}
.navbar-nav li:hover ul{
    opacity: 1;
    visibility: visible;
}
.navbar-nav>li{position: relative;}
.navbar-nav li a{
    position: relative;
    display: inline-block;
    transition: all 500ms ease;
    z-index: 1;
}
.navbar-nav li ul li{padding: 10px 40px;list-style: none;}
.navbar-nav li ul li a{line-height: 25px;
    color: #101010;
    font-size: 14px;
    font-weight: 500;}
    .navbar-nav li ul li a:hover, .navbar-nav li ul li.active a{color: #b41e43;text-decoration: none;}
.navbar-default .navbar-nav>li.dropdown>a{display: flex;align-items: center;}
.dest span{font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #b41e43;}
.dest h1{
        color: #0a0a0a;    font-weight: 600;    line-height: 45px;
}
.dest{    padding: 70px 0px;
    }
.dest p{     margin-bottom: 40px;   font-weight: 400;    color: #454545;font-size: 16px;line-height: 1.7;}
.hdr_grid { display:grid;
grid-template-columns:40% 60% ; gap: 30px; align-items: center;}
.hero{
    position:relative ;
}
.hero .rs-btn{
        margin: 80px 0px;
}
.hdr_carousel {
    margin: 90px 0px  20px;
}
.hero h4 {font-family: "Livvic",Sans-serif;
    font-size: 50px;
    font-weight: 700;
    line-height: 1.3em;
    margin: 0 0 15px; text-transform: uppercase; color: #000;}
  .hero h3  {
        color: #717070;
    font-family: "Livvic",Sans-serif;
    font-size: 18px;
    font-weight: 600;
     margin-bottom: 30px;
    }

  .hero p  {
            font-family: "Livvic",Sans-serif;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: .7px;
    text-transform:uppercase ;
        margin-bottom:60px 0px;

    }
.pattern{ position:absolute; top:0; left:0;
     
    z-index: -1;    
 }
.pattern img{ animation-name: imgzoom;  animation-duration: 12s;
 animation-timing-function:linear;
 animation-iteration-count:infinite;
 animation-direction:alternate ;
 /*animation: scale2 10s alternate infinite;
     animation: scale2 2s alternate infinite;
    -webkit-animation: scale2 2s alternate infinite;
/* tranistion: all 10s;*/*/
}
@keyframes imgzoom{
    0%{
           max-width: 75%;
    }
    
    100%{
     max-width: 100%;
    }
}
.flip-box {
  background-color: transparent;
  height: 350px;
  perspective: 1000px;
    margin-bottom: 31px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateX(180deg);
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-front {
  background-color: #fff;
  color: black;box-shadow: 0px 0px 30px 7px rgb(0 0 0 / 3%);border-radius: 5px;padding: 70px 40px;
}
.nn-first:before{
    content: "";background-image: url('../img/bg-box.png');
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.flip-box-back {
  background-color: #562dd4;
  color: white;
  transform: rotateX(180deg);padding: 87px 30px;
}
.front-icon-part {
    margin-bottom: 21px;
}
.front-icon-part span {
    display: inline-block;
    text-align: center;
    color: #fff;
    font-size: 30px;
    line-height: 1;
}
.front-icon-part span img {
    width: 60px;
    height: 60px;
}
.front-title-part {
    margin-bottom: 10px;
}
.front-title-part .front-title {
    font-size: 22px;
    text-transform: uppercase;color: #101010;font-weight: 500;
}
.front-desc {
    font-weight: 500!important;color: #444;    margin-bottom: 0;
    font-size: 16px;
}
.back-title-part {
    margin-bottom: 17px;
}
.back-title {
    font-size: 24px;
    text-transform: uppercase;
    color: #fff;font-weight:600;
}
.back-title a {
    color: #fff;
}
.back-desc-part {
    margin-bottom: 25px;
}
.back-desc-part .back-desc {
    font-weight: 500;
    color: #fff;    margin-bottom: 0;
    font-size: 16px;
}
.back-btn-part .back-btn {
    padding: 12px 25px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    color: #111;
    background-color: #fff;
    border-radius: 30px;
}
.nn-second:before{
      content: "";background-image: url('../img/bg-box-2.png');
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.nn-third:before{
      content: "";background-image: url('../img/bg-box-3.png');
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.rs-btn a {
    padding: 14px 40px;
    background-color: transparent;
    background-image: linear-gradient( 150deg,#b41e43 46%,#f398ae 100%);
    border-radius: 30px;
    text-decoration: none;color: #fff;
}
.rs-btn a i {
    padding: 0 0 0 5px;
}
.rs-btn a span{color: #fff;text-transform: capitalize; font-size: 16px;
    font-weight: 500;}
    .rs-btn a:hover {
    background-color: transparent;
    background-image:linear-gradient( 180deg,#fb5981 46%,#971736 100%);
}
.featurs_section ul{margin-bottom: 25px;}
.first-nn p{font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: #03228f;
    margin: 0;}
.first-nn h3{
        line-height: 40px;
    margin: 0 0 15px;
    color: #0a0a0a;
    font-size: 30px;
    font-weight: 600;
}
.after{background-color: #f1f6fc;padding: 70px 0;}
.demo-nn{padding: 40px 0 0;}
.text-center {
    text-align: center!important;
}
.rec-call{padding: 25px;
    background-color: #f1f6fc;
    border-radius: 4px;text-align: center;    max-height: 225px;
    min-height: 225px;
    margin-bottom: 25px;}
.rec-call img{width: 28%;margin-bottom: 10px;}
.rec-call p{font-size: 16px;}
.first-nn{text-align: right;}
.sec-nn{position: relative;}
.sec-nn:before{
  content: "";
    position: absolute;
    background: #b41e43;
    height: 100%;
    width: 3px;
    left: -17px;
    top: 0;
}
.about{background-color: #f6f7f9;
    padding: 70px 0 100px;}
.about p{
        font-size: 16px;
    font-weight: 400;    margin: 0 0 26px;    line-height: 1.7;
}
.shortcode-title span{
    font-weight: 600;
    letter-spacing: .2px;
    color: #b41e43;    position: relative;
    padding-left: 95px;
    display: inline-block;margin: 0 0 10px;line-height: 28px;font-size: 14px;
}
.shortcode-title span:before{
    background-color: #fd6509;content: '';
    position: absolute;
    left: 0;
    top: 12px;
    height: 4px;
    width: 76px;
}
.shortcode-title span:after{
    content: '';
    position: absolute;
    left: 15px;
    top: 11px;
    height: 6px;
    width: 12px;
    background: #fff;
}
.shortcode-title h3{
    line-height: 43px;
    margin: 0 0 15px;    color: #0a0a0a;font-size: 30px;
    font-weight: 600;
}
.padr-0{padding-right: 0;}
.map{margin-top: 70px;margin-bottom: 100px;}
.services-part{
    background-image: url('../img/bg.jpg');
    box-shadow: 0px 0px 50px 2px rgb(0 0 0 / 3%);    padding: 40px;text-align: center;    margin-bottom: 30px;
}
.services-part .services-icon img {
    max-width: unset;
    width: 50px;
    height: 50px;
}
.services-text {
    padding: 28px 0 0;
}
.services-text h4{color: #fff;    font-size: 16px;
    font-weight: 600;margin: 0 0 10px}
.package{    background-color: #f6f7f9;padding: 70px 0 100px;}
.package .owl-carousel {padding: 50px 0px;}
.package span{
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;    
    color: #b41e43;
    font-size: 14px;
}
.package h2{
      line-height: 43px;
        margin: 15px 0 15px;
    color: #0a0a0a;
    font-size: 30px;
    font-weight: 600;letter-spacing: 1px;
}
.skillbar {
    height: 7px;
    line-height: 7px;
    background: #eee;
    display: inline-block;
    position: relative;
    width: 100%;
    background-color: #dfedfe;    margin: 25px 0;
}
.skillbar-title {
    font-size: 13px;top: -25px;color: #212121;
    font-weight: 500;
    letter-spacing: .8px;text-transform: uppercase;
}
.skillbar .skillbar-title, .skillbar .skill-bar-percent {
    position: absolute;
}
.skillbar-bar {
    height: 7px;
    line-height: 7px;
    background-color: transparent;
    background-image: linear-gradient(180deg,#b41e43 0%,#b41e4347 100%);background-size: 1rem 1rem;
}
.skillbar-bar {
    width: 0;
    margin-bottom: 0;
    overflow: visible !important;
}
.skill-bar-percent {
    font-size: 19px;right: 0;
    top: -25px;font-weight: 700;
    color: #0a0a0a;
}
.mb-45{margin-bottom: 45px;}
.rs-features-list{list-style: none;padding-left: 0;}
.rs-features-list li{
        margin-bottom: 7px;
    display: flex;
    align-items: center;
}
.rs-features-list li i {
    color: #03228f;
    font-size: 18px;    margin-right: 10px;
    line-height: 26px;
}
.rs-feature-text {
    font-size: 16px;
    font-weight: 500;
    line-height: 34px;
}
.will-get h3{
    color: #0a0a0a;
    font-weight: 600;
    line-height: 45px;
}
.uk-card-body {
    text-align: center;
}
.uk-card-icon {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background-color: #fff;    margin: auto;
    margin-bottom: 27px;
}
.will-get{padding: 0 0px 70px;}
.uk-card-icon::before {
       transform: translate(-7%, -8%);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.04);
    content: '';
    transition: all 0.3s linear;
    display: block;
    width: 130px;
    height: 130px;z-index: -1;position: absolute;
}
.uk-card-icon span {    
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 5px 24px 6px rgb(0 0 0 / 6%);
}
.uk-card-title{color: #222;font-weight: 600;}
.uk-card-icon img {
    max-width: 60px;
}
.will-get ul li{display: inline-block;    padding: 0 33px;}
/*--== new css ==--*/
.n_heading{
    text-align:center;
}
.n_heading p {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #b41e43;
} 
.n_heading h2 {
    line-height: 43px;
    margin: 0 0 15px;
    color: #0a0a0a;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 1px;
}

.n_heading h5 {
font-size: 18px;
    font-weight: 400;
    max-width: 500px;
    margin: auto auto 25px auto;
    line-height: 28px;
}
.featurs_section {
    padding: 80px 0px;
}
.featurs_section h3 { color:#dc241b; font-size:24px;
    font-weight: 600; margin-bottom:25px;}
    .featurs_section ul li{
        color:#7a7a7a;
        padding-bottom: 15px;
        font-family: "Tajawal",Sans-serif;
            font-size: 16px;
    font-weight: 500;
    }
  .featurs_section  .col-md-12{
        margin-bottom: 80px;
    }
    .featurs_section  .col-md-12:last-child{
        margin-bottom:0px;
    }
    .blog_grid{
         display:grid;
         grid-template-columns: 1fr 1fr 1fr;
         grid-gap: 30px;
    }
    .blog_box{
         background: #fff;
         padding: 15px;
         box-shadow: 0 6px 25px rgb(12 89 219 / 9%);
         border-radius:5px;
         transition: all .3s;
         cursor: pointer;
    }
    .blog-box:hover{transform: translateY(10px);}
    .blog_box:hover .blog_img img{-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%); transition: all .3s;}

.bg_grey{ background-color: #f6f7f9; }
 .blog_box h4{
font-weight: 600;
    font-size: 20px;
 }
  .blog_box h4 a{
        color: #0a0a0a;
 }
.blog_content{
        padding: 20px 15px 15px;
}
.blog_content p{
        margin: 0 0 18px;
        font-size: 16px;
        overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.blog-btn-part a{
    color: #061340;
    font-weight: 600;
    position: relative; 
    display: flex;
    align-items: center;
    color:#0029b8;
}
.blog-btn:hover .blog-btn-part a svg, .blog-btn:hover .blog-btn-part a:hover {color:#0029b8; fill: #0029b8;}
.blog-btn-part a svg{ fill: #0029b8; }
.blog-btn-part a:hover, .blog-btn-part a svg:hover{ color: #0b70e1;}
.req_demo{
    padding: 29px 0px;
        background-image:linear-gradient(
150deg,#dc241b 46%,#f69792 100%);
}
.req_demo .text_flx    {  display: flex; justify-content:space-between; align-items: center; }
.req_demo .text_flx h4{margikn-bottom: 0px;     font-family: "Roboto",Sans-serif;
    font-size: 30px;
    font-weight: 600;
    color: #fff;}
.req_demo .rs-btn a{ background-image: linear-gradient(220deg,#00026b 0%,#525398 79%); }

.footer_section { width:100%;  padding:50px 0px 0px; background:url(../img/footer-bg.jpg);  }
.footer_text{ margin:20px 0px; }
.footer_text p{  color:#f4f4f4; font-size:16px;}
.footer_section .col-md-4 .social_icon ul{ list-style:none; display:flex; align-items:center; gap: 15px; margin: 0; padding: 0;}
.footer_section .col-md-4 .social_icon ul li { width:35px; height:35px; margin: 0; border-radius:50%; background: rgba(255,255,255,.9); display:flex; justify-content:center; align-items:center; }
.footer_section .col-md-4 .social_icon  ul li a{ color: #555; padding-bottom: 0px;}
.footer_section .col-md-3 h4 , .footer_section .col-md-4 h4{
        font-size: 22px;
        color: #fff;

}
.footer_section .col-md-3 ul { list-style:none; margin: 0; padding: 0; }
.footer_section .col-md-3 ul li {margin-bottom: 15px;}
.footer_section .col-md-3 ul li a{ color: #fff; font-size:16px; margin-bottom: 25px;}
.footer_section .col-md-3 p, .footer_section .col-md-4 p{
color: #fff; 
font-size: 16px;
}
.subs_field {display:flex ;     position: relative; margin-top: 20px}
.subs_field .form-control { height:60px;     border-radius: 43px;
 }
.subs_field .sent_btn{
    min-width: 55px; height: 55px;display:inline-flex; justify-content:center; align-items: center;
    color: #fff; background-image: linear-gradient( 150deg,#b41e43 46%,#f398ae 100%); border:none; border-radius:50%;     position: absolute;
    right: 5px;
    top: 2px;
}
.Pow_by_sec{ padding: 25px 0px; background: #000;     margin-top: 25px;}
.Pow_by{display:flex ; justify-content: space-between; }
.Pow_by_sec p{ margin-bottom:0px; color:#fff; }
.Pow_by_sec ul{display:flex ; gap: 30px;}
.Pow_by_sec ul li a { color:#fff; }
.navbar_dekstop{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.navbar_dekstop:before, .navbar_dekstop:after{ display:none!important; }

.services-icon{
        display: block;
    background: #a0a0a047;
    width: 54px;
    margin: auto;
    border-radius: 10px;
    border: 1px solid #fff;
}

.right_sid_lg {    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;}
.side_bar_menu ul, .right_slide_Bar ul{list-style: none;}
.right_slide_Bar ul li a, .side_bar_menu ul li a{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:6px;
 }
 .right_slide_Bar ul li a .circle, .side_bar_menu ul li a .circle{
    width: 5px;
    height: 5px;
    background: #000;
    border-radius: 50%;
    display: block;
 }
  .right_slide_Bar ul li a .circle:nth-child(2), .side_bar_menu ul li a .circle:nth-child(2),
  .right_slide_Bar ul li a .circle:nth-child(4), .side_bar_menu ul li a .circle:nth-child(4),
  .right_slide_Bar ul li a .circle:nth-child(6), .side_bar_menu ul li a .circle:nth-child(6),
  .right_slide_Bar ul li a .circle:nth-child(8), .side_bar_menu ul li a .circle:nth-child(8){ background:#b41e43; }
.right_slide_Bar {position:fixed; cursor:auto; right:0; top:0; width:350px; z-index:999; background:#eee; height: 100%; padding: 20px;}
.right_slide_Bar ul li {max-width: 30px;}
.dtl_sec{ width:100%;     padding: 30px 0px; }
.dtl_sec ul {list-style:none; padding: 0;}
.dtl_sec ul li{ display:flex; gap:15px; align-items: baseline;     max-width: 100%; }
.dtl_sec ul li > div h6{    font-weight: 600;
    font-size: 16px;     margin-bottom: 0px;}
    .socia_list ul { list-style: none; display: flex; gap:15px; padding:0; }
    .socia_list ul li{
        min-width: 35px;
        border-radius:5px;
    height: 35px;
    margin: 0;
   
        background-image: linear-gradient( 150deg,#b41e43 46%,#f398ae 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    }
     
     .socia_list ul li a{ color:#fff; display:unset ; }
     .close_menu_btn{ display: flex;
    justify-content: end;
    margin-bottom: 30px; }
.right_bar_show {    transform: translateX(0)!important;
transition:all .5s;}
.transparent_div{
   
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.6);
   left: 0;
   top: 0;
   position:fixed;
       transform: translateX(100%);
       transition:all .5s;
       cursor: crosshair;
       z-index:999;

}
.breadcrumb{
    background-image: url('../img/breadcrumb.jpg');padding: 40px;
    text-align: center;
    background-size: cover;
}
.breadcrumb h1{color: #fff;font-weight: 600;}
.breadcrumb ul{list-style: none;padding-left: 0;}
.breadcrumb ul li, .breadcrumb ul li a{color: #fff;font-size: 15px;display: inline-block;position: relative;    padding: 0 7px;}
.breadcrumb ul li:after{position: absolute;content: "/";right: 0;}
.breadcrumb ul li:last-child:after{display: none;}
.breadcrumb ul li a:hover{color: #b41e43;transition: all 500ms ease;}
ul{padding-left: 0;list-style: none;}
.ct-nn{width: 330px;}
.featurs_section table td{border: 1px solid #ddd;    padding: 10px;text-align: center;}
table{border-collapse: collapse;
    table-layout: fixed;
    width: 100%;}
.fea-head{
    font-size: 26px;
    font-weight: 500;color: #0e0f1b;
    background-color: #1273EB17;padding: 10px;    width: 330px;    text-align: center;height: 53px;
    vertical-align: middle;
}
.ct-heading{
        color: #03228f;
    font-size: 26px;
    font-weight: 600;width: 100%;
    padding: 10px;
    background: #fff;
    height: 60px;
    text-align: center;
}
.ct-price {
    display: flex;
    justify-content: center;
}
.ct-price .currency {
    align-self: flex-start;margin-right: 3px;
}
.ct-price .price{color: #03228f;line-height: 1em;
    font-size: 30px;
    font-weight: 600;}
.duration{
    font-weight: 600;align-self: flex-start;
}
.auto-head{    color: #03228f;    width: 330px;
    font-size: 15px;
    font-weight: 500;}
    table tbody tr td i.fa.fa-check {
    color: #38f146;font-size: 18px;
}
table tbody tr td i.fa.fa-times {
    color: red;font-size: 18px;
}
@media(max-width: 767px){
    .hdr_grid {    grid-template-columns: 100%; padding: 0px 15px;}
    .hdr_grid > div:first-child{ order:2; }
    .blog_grid { grid-template-columns: 1fr; }
    .req_demo .text_flx{ flex-flow:column; }
     .Pow_by { flex-flow:column; gap: 20px; }
     .rs-btn { margin: 30px 0px; }
.featurs_section, .req_demo, .dest, .package{ padding: 30px 0px; }
.req_demo .text_flx h4 {text-align: center; line-height: 32px; font-size: 18px;}

/*--== ==--*/
.featurs_section > .container > div {display: flex; flex-flow:column ;}
.featurs_section > .container > div:nth-child(2) .col-md-6:first-child { order:2; }
.featurs_section > .container > div:nth-child(4) .col-md-6:first-child { order:2; }
.featurs_section > .container > div:nth-child(6) .col-md-6:first-child { order:2; }
.featurs_section .col-md-12 { margin-bottom: 30px; }
.header .container-fluid{ padding:10px 15px!important; }
.header { padding: 5px 0;  background: #fafafa; }
.featurs_section .col-md-12:last-child{ padding: 0px; }
.featurs_section ul{ padding-left:15px;  }
.hero h4{ font-size: 24px; }
.hero p{ font-size: 16px; }
.hero .rs-btn { margin: 40px 0px; }
.hero h3{    font-size: 15px;}
.dest h1{ font-size: 24px;  
    line-height: 38px;
}

    
.dest p, .featurs_section ul li{    font-size: 15px;}
.shortcode-title h3, .package h2, .n_heading h2 {
  font-size: 24px;      line-height: 38px;  
}
.about p, .n_heading h5{  font-size: 15px; }
.package .owl-carousel {
    padding:25px 0px;
}
.blog_box h4{ font-size: 16px; }
.blog_content p{ font-size: 14px; }
.navbar-nav>li {
    position: relative;
    border-bottom: solid 1px #eee;
}
#vg > li > a {
    line-height: 24px;
}

}