@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
.x-color{color:#4DB2C2 !important ;}
.x-bg{background:#4DB2C2 !important ;}
.navbar .navbar-nav .nav-link {
    font-size: 14px;
    letter-spacing: 0;
}
.montserrat-mont {
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
  }
.master-nav {
    background: rgb(31 66 52 / 1);
    margin-top: 18px;
    border-radius: 15px;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.sticky-active .master-nav {
    background: rgb(31 66 52 / 79%)}
header .navbar-brand {

    padding: 18px 0;

}
.sec1{    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;}

    .portfolio-creative .portfolio-box:hover .portfolio-image img {
        opacity: 0.2;
    }
    .price-menu{position: absolute;
        width: 99px;
        height: 37px;
        line-height: 37px;
        background-color: #AD800B;
        color: #fff;
        z-index: 9999;
        top: 8px;
        left: 10px;
        border-radius: 10px;
        font-size: 14px;
        text-align: center;}
        .menu-sec-t .portfolio-box .portfolio-image{
      
     
      transition: 0.5s;
    }
    
    .menu-sec-t .portfolio-box .portfolio-image:hover{
      
        z-index: 999999999;
        transition: 0.5s;
    }
    .menu-sec-t .portfolio-classic .portfolio-box {

        border-radius: 11px;
    }
    .menu-sec-t .highlight-separator[data-shadow-animation] span {

        bottom: 19px;
        z-index: -1;
    }
    .menu-sec-t  .portfolio-classic .portfolio-box:hover .portfolio-image img {
        opacity: 0.14;
        -webkit-filter: blur(4px);
        filter: blur(2px);
    }
    .menu-sec-t .bg-gradient-pink-orange {
        background-image: linear-gradient(to right top, #675632, #285c47, #777344, #6a6d44, #bb9030);
    }
    .menu-sec-t .title14{font-size: 18px;    z-index: 9;
        }
        .menu-sec-t .portfolio-filter li a {
            color: var(--medium-gray);
            border-bottom: 2px solid transparent;
            background: #E4E4E4;
            color: #222;
            padding: 4px 13px;
            border-radius: 5px;
            font-size: 15px;
        }
        .menu-sec-t .portfolio-filter li {
            padding: 0 8px;
        }
        .menu-sec-t .portfolio-filter li.active a {
            color: #fff !important;
            background: #1F4234 !important;
        }
        .highlight-separator[data-shadow-animation] span img {
 
            filter: brightness(0) saturate(100%) invert(64%) sepia(87%) saturate(388%) hue-rotate(2deg) brightness(91%) contrast(87%);
        }
        
        .clients1 .des1{    font-size: 14px;}
        .clients1 .img2 {  
            position: absolute;
            top: 10px;
            left: 15px;}

            .footer-t1 p, .footer-t1 a {
    color: #646464;
  
}
.footer-t1   a {
   
    font-size: 14px;
}  
.navbar-master .nav-link {color:#b3b3b3 !important}
.navbar-master .active .nav-link{color:#ffffff !important}
.navbar-master .nav-link img{filter: invert(80%) sepia(3%) saturate(22%) hue-rotate(25deg) brightness(90%) contrast(92%);margin: 0 5px;}
.navbar-master .active img{filter: invert(100%) sepia(3%) saturate(0%) hue-rotate(298deg) brightness(106%) contrast(106%)}
.btn-t1{background: #AD800B !important}
.btn-t1:hover{background: #fff !important;}

.btn-t2{background: #AD800B !important}
.btn-t2:hover{background: #1F4234 !important; color: #fff !important;}
.swiper-pagination-bullet-active {
 
    background: #bb8f30;
}
.menu-item-list .nav-link {
    padding: 7px 20px 7px 0;
    font-size: 17px;

    width: 100%;
    margin: 9px 0;

    transition: 0.3s;
}
.price112{background: #ad800b;
    padding: 5px 28px;
    border-radius: 35px;
    color: #fff;
    font-size: 15px;}

    .infowindow p , .infowindow  .mb-3{

        font-family: bh2 !important;
    }
    .google-maps-link a {
   
        font-family: bh2 !important;
        letter-spacing: 0 !important;
    }

    .btn-xfit{    border-radius: 8px !important;
        padding: 10px 20px !important}


.btn-144{    background: #6accdc;
    width: 90px;
    text-align: center;
    color: #fff;
    /* font-size: 14px; */
    border-radius: 100px;
    font-size: 13px;}
    .counter-style-06 .feature-box-content .counter-title {
       
        top: 90px;}
        .about-sec .feature-box{    padding-bottom: 40px !important;}

        .price-x-ul li img{ width: 28px; height: 28px;}
.price-table1 .border-color-extra-medium-gray {
    border-color: var(--extra-medium-gray) !important;
    border-bottom: 1px dashed #ccc !important;
    padding: 10px 0 !important;
}
.tag1{     background: #dfe9eb;
    border-radius: 9px;
    padding: 5px 16px;
    font-size: 13px;
    color: #252525;
    margin: 5px 3px;
    display: inline-block;}
    .price-table1 .btn-round-edge:hover{    background: #68cada;
        border: 2px solid #68cada;}

        .xfit-wiz .btn-round-edge  , .btn-xfit-dark-icon{     background: #3995a4 !important;
            border: 2px solid #2e8694;}
            .xfit-wiz .prev{      background: #727272 !important;
                border: 2px solid #7b7b7b;}
            .xfit-wiz .btn-round-edge:hover , .btn-xfit-dark-icon:hover{    background: #222 !important;
                border: 2px solid #222;}
        label {
            color: #222222;
            font-weight: 600;
            font-family: 'bh2';
            font-size: 13px;
            letter-spacing: 0;
        }


.price-table2 .border-color-extra-medium-gray{ border-bottom: 0 !important;}

.form-control-date.is-invalid  ,.form-control-date.is-valid {
  
    padding-left: 45px;
}
/* .progress-bar {
    width: calc(100% * (var(--progress-now) / var(--progress-max))) !important;
} */
/*********my-custom dario button******************



/* custom radio button */
.x-radio {
    display: block;
    position: relative;
    padding-left: 8px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Hide the browser's default radio button */
  .x-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }
  
  /* Create a custom radio button */
  .checkmark-radio {
    position: absolute;
    top: 5px;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
  }
  
  /* On mouse-over, add a grey background color */
  .x-radio:hover input ~ .checkmark-radio {
    background-color: #ccc;
  }
  
  /* When the radio button is checked, add a blue background */
  .x-radio input:checked ~ .checkmark-radio {
    background-color: #36aec1;
  }
  
  /* Create the indicator (the dot/circle - hidden when not checked) */
  .checkmark-radio:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the indicator (dot/circle) when checked */
  .x-radio input:checked ~ .checkmark-radio:after {
    display: block;
  }
  
  /* Style the indicator (dot/circle) */
  .x-radio .checkmark-radio:after {
       top: 9px;
      left: 9px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: white;
  }
  .x-radio{    font-size: 14px;
      color: #222;}
      .step-x{    font-size: 15px;
        font-weight: 500;
        background: #ffb200;
        /* padding: 1px 11px 6px 11px; */
        border-radius: 28px;
        margin: 0 6px;
        width: 25px;
        height: 25px;
        display: inline-block;
        line-height: 25px;
        text-align: center;
        font-family: 'bh2';
        font-weight: 800;}
  
  
  
  
  
  
  




/*************************/



.form-container {
    border-radius: 10px;
    width: 100%;
}


.progress-bar-wiz {
  width: 100%;
  background: #ddd;
  height: 6px;
  border-radius: 6px;
  position: relative;
  margin-bottom: 20px;
}

.progress-wiz {
  width: 0%;
  height: 100%;
  background: #34a5b7;
  border-radius: 6px;
  transition: width 0.4s ease-in-out;
}

.step {
  display: none;
  animation: fadeIn 0.5s ease-in-out;
}

.step.active {
  display: block;
}
.error-message {
  color: red;
  font-size: 14px;
  display: none;
  
  margin-top: 5px;
}
.tab-style-03 .nav-tabs .nav-link.active{
    color: #ffffff;
    background-color: #5ebdd0;
}
.circle-cart{    width: 18px;
    height: 19px;
    display: inline-block;
    /* margin-top: -44px; */
    position: relative;
    left: 7px;
    line-height: 20px;
    text-align: center;
    border-radius: 50px;
    top: -11px;
    background: #ff7300;}

.text-xfit1{background: #ff5c00;
    color: #fff;
    border-radius: 5px !important;}
    .text-xfit4{background: #1b88e8;
        color: #fff;
        border-radius: 5px !important;}

.text-xfit2{    background: #c5e1d0;
    color: #2c6411;
    border-radius: 5px !important;margin: 0 3px;}
    .text-xfit3{    background: #ddd;
        color: #3d3d3d;
        border-radius: 5px !important; margin: 0 3px;}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}



.next {

}

.prev {
  background: #ccc;
}


.text-gray{    color: #8b8b8b;}

.header14 p { margin-bottom: 0; margin-top: -2px;    font-size: 13px;}
.header14 .span14 {background-color: #4DB2C2;
    color: #fff;
    font-size: 13px;
    border-radius: 100px;
    text-align: center;
    padding: 3px 15px;
    height: 39px;
    margin-bottom: 8px;}
    .nav-x-profile{background:#E6EEEF; padding: 15px 10px}
    .nav-x-profile {    color: #191919; margin-bottom: 10px;}
    .nav-x-profile.active {
        color: #ffffff;
        margin-bottom: 10px;
        background: #222;
    }    
    .nav-x-profile.active img{
        filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(293deg) brightness(104%) contrast(103%);
    }
    .header16 ul{padding: 0;}
    .nav-x-profile i{margin-top: 7px;}
    .span15{background: #E9DDA5;
        color: #222;
        padding: 5px 15px;}

/*************gutter*************/

    :root {
        --bs-gutter-1: 0.25rem;
        --bs-gutter-2: 0.5rem;
        --bs-gutter-3: 1rem;
        --bs-gutter-4: 1.5rem;
        --bs-gutter-5: 3rem;
    }
    
    /* للجميع g-* */
    .g-1 { --bs-gutter-x: var(--bs-gutter-1); --bs-gutter-y: var(--bs-gutter-1); }
    .g-2 { --bs-gutter-x: var(--bs-gutter-2); --bs-gutter-y: var(--bs-gutter-2); }
    .g-3 { --bs-gutter-x: var(--bs-gutter-3); --bs-gutter-y: var(--bs-gutter-3); }
    .g-4 { --bs-gutter-x: var(--bs-gutter-4); --bs-gutter-y: var(--bs-gutter-4); }
    .g-5 { --bs-gutter-x: var(--bs-gutter-5); --bs-gutter-y: var(--bs-gutter-5); }
    
    /* للأفقية فقط gx-* */
    .gx-1 { --bs-gutter-x: var(--bs-gutter-1); }
    .gx-2 { --bs-gutter-x: var(--bs-gutter-2); }
    .gx-3 { --bs-gutter-x: var(--bs-gutter-3); }
    .gx-4 { --bs-gutter-x: var(--bs-gutter-4); }
    .gx-5 { --bs-gutter-x: var(--bs-gutter-5); }
    
    /* للعمودية فقط gy-* */
    .gy-1 { --bs-gutter-y: var(--bs-gutter-1); }
    .gy-2 { --bs-gutter-y: var(--bs-gutter-2); }
    .gy-3 { --bs-gutter-y: var(--bs-gutter-3); }
    .gy-4 { --bs-gutter-y: var(--bs-gutter-4); }
    .gy-5 { --bs-gutter-y: var(--bs-gutter-5); }
    
    /* تطبيق المسافات على .row */
    .row {
display: flex;
        flex-wrap: wrap;
        margin-right: calc(-1 * var(--bs-gutter-x, 0));
        margin-left: calc(-1 * var(--bs-gutter-x, 0));
        row-gap: var(--bs-gutter-y, 0);
    }
    
    .row > [class^="col"] {
        padding-right: var(--bs-gutter-x, 0);
        padding-left: var(--bs-gutter-x, 0);
    }
    
/*********gutter**********/
/******input-have-tag*****/
.tagify__input {

    min-width: 200px;
    margin: 0;

}
.tagify  {
    padding: 5px 5px;}

    input, select, textarea, .form-control, .form-select {
        padding: 12px 12px;}

/***************/
/*********switch*********/

    /* تنسيق الحاوية */
    .switch-container {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 16px;
        
    }

    /* إخفاء الزر الافتراضي */
    .switch-input {
        display: none;
    }

    /* تصميم السويتش */
    .switch-label {
        display: inline-block;
    width: 52px;
    height: 27px;
    background-color: #ddd;
    border-radius: 50px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s ease;
    }

    /* الدائرة المتحركة */
    .switch-slider {
        position: absolute;
    top: 3px;
    left: 5px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    /* عندما يكون السويتش ON */
    .switch-input:checked + .switch-label {
        background-color: #3995a4;
    }

    .switch-input:checked + .switch-label .switch-slider {
        left: 28px;
    }

    /* تنسيق النص */
    .switch-text {
        color: #333;
        transition: 0.3s ease;
    }
    /*************pie chart**********/
            .chart-container {
            position: relative;
        max-width:300px ;
            margin: auto;
        }
        .chart-text {
            position: absolute;
            top: 45%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 20px;
            font-weight: 800;
            font-family: "Montserrat", serif;
            color: #333;
        }
    /***********custom check box********/
    .my-checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
      }
      
      /* Create a custom checkbox */
      .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eee;
      }
      
      /* On mouse-over, add a grey background color */
      .my-checkbox:hover input ~ .checkmark {
        background-color: #ccc;
      }
      
      /* When the checkbox is checked, add a blue background */
      .my-checkbox input:checked ~ .checkmark {
        background-color: #3995a4;
      }
      
      /* Create the checkmark/indicator (hidden when not checked) */
      .checkmark:after {
        content: "";
        position: absolute;
        display: none;
      }
      
      /* Show the checkmark when checked */
      .my-checkbox input:checked ~ .checkmark:after {
        display: block;
      }
      
      /* Style the checkmark/indicator */
      .my-checkbox .checkmark:after {
        left: 9px;
        top: 5px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
      }

      /******************/
      .span-forget-x{text-decoration: underline;
        text-align: left;
        display: block;
        color: #131313;
        /* font-weight: 600; */
        letter-spacing: 0;
        font-size: 14px;}
/********stipper animation ********/

.progress-container2 {
    width: 100%;
    background-color: #ddd;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
   
}
.progress-bar2 {
    width: 0;
    height: 15px;
    background: repeating-linear-gradient(
        -45deg,
        #4caf50,
        #4caf50 10px,
        #66bb6a 10px,
        #66bb6a 20px
    );
    animation: progress-animation 1s ease-in-out forwards, stripe-animation 1s linear infinite;
}
@keyframes progress-animation {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}
@keyframes stripe-animation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 40px 0;
    }
}
/***********************/

.btn-x12{background: #36aec1;
    font-size: 13px;
    margin: 11px 0px 0 0;
    color: #fff;
    border-radius: 7px;
    padding: 8px 13px;}

    .btn-x12:hover{background: #222; color:#fff !important
}
.xfit-branches .hover-box{background: #fff;}

.a-b-xf1{    background: #e1eff1;
    color: #19626c;
    padding: 5px 13px;
    border-radius: 7px;
    margin: 5px 5px;}


    .footer-dark ul li a, .footer-dark .widget-link {
        color: #565656 !important;
        opacity: 1 !important;
    }
    .footer-dark ul li a:hover, .footer-dark .widget-link:hover, .footer-dark a:hover {
        opacity: 1 !important;
        color: #222 !important;
    }


    .footer-dark p, .footer-dark .widget-text {
        color: #525252 !important;
        opacity: 1 !important;
    }

    .invalid-feedback {

        line-height: 25px;
    }
.xfit-feature .feature-box {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background: #ffffff24;}
    .xfit-feature .feature-box img {
width: 55px;}
        .xfit-feature .feature-box:hover img {

                    filter: invert(58%) sepia(43%) saturate(7500%) hue-rotate(164deg) brightness(99%) contrast(102%);transition: all 0.3s;}


/***HERO VIDEO****************/
.hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}
.hero video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55));
    z-index: -1;
    background: rgb(14, 100, 107);
    background: linear-gradient(90deg, rgb(15 25 25 / 71%) 0%, rgb(37 84 101 / 78%) 58%, rgb(0 0 0 / 81%) 100%);

}
.hero-content {
    position: relative;
    z-index: 2;
    /* background: rgba(0, 0, 0, 0.6); */
    padding: 20px 40px;
    border-radius: 10px;
    /* opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1.5s ease-out forwards; */
    width: 100%;
}
.tr27 td{

    background: #4fa4c2 !important;
    color: #fff !important;
}
.hero-content .xf-v-btn {    background: none;
    border-radius: 15px;
    border: 2px solid #fff;
    font-size: 15px;}


.icon-x-p{/*color:#23717e !important;*/}
.card55x .skrollable:hover .icon-x-p{color:#fff !important;}
.card55x .skrollable:hover .icon-x-p2{filter: invert(98%) sepia(98%) saturate(0%) hue-rotate(9deg) brightness(102%) contrast(104%);

}


.card-xf1 .card .card-title {
    color: #0e1726;
    font-size: 14px;
    font-weight: 800;
}
.card-xf1 .card .cx1 {
    color: #222;
    font-size: 20px;
    font-weight: 800;
}
.card-xf1 .card .cx2 {
    color: #222;
}
.card-xf1 .card img {
    width: 36px;
}
.card-xf1 .card {border:0 !important ; border-radius: 0; }
.tr108 th{    background: #E6F4F6; font-weight: 200;}
.sp108{   /* margin: 0 30px; */
    color: #87640f;
    background: #f5f1d5;
    padding: 5px 10px;
    position: relative;
    border-radius: 7px;
   
    /* display: inline-block; */
    position: relative;
    top: 6px;}
      
  .rating-container-ce15 {
    text-align: right;
    max-width: 400px;
  }

  .rating-title-ce15 {
    font-weight: bold;
    font-size: 1.2em;
  }

  .rating-description-ce15 {
    margin: 10px 0 14px;
    color: #555;
  }

  .radio-group-ce15 {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
  }

  .radio-group-ce15 input[type="radio"] {
    display: none;
  }

  .radio-group-ce15 label {
    background-color: #e0ecf8;
    color: #000;
    padding: 10px 15px;
    border-radius: 0px;
    cursor: pointer;
    /* font-weight: bold; */
    transition: background-color 0.3s;
    width: 46px;
    height: 47px;
    text-align: center;
  }

  .radio-group-ce15 input[type="radio"]:checked + label {
    background-color: #2893a4;
    color: white;
  }
  .close91{     position: absolute;
    left: 20px;
    right: auto;
    background: #c3c3c3;
    padding: 6px !important;
    line-height: 0;
    font-size: 18px;
    color: #000000;
    border-radius: 100px;}
    .modal-content {

        border-radius: 0 !important;
    }
    .tr-freez th {
        text-align: inherit;
        text-align: -webkit-match-parent;
        background: #36aec1 !important;
        color: #fff !important;
        font-weight: 200 !important;
        padding: 18px 0 !important;
    }
    .freez-table td {

        padding: 18px 0 !important;
    }
    .img-sar{width: 27px;}

    .navbar .navbar-nav .nav-link {
 
        padding: 10px 14px;}

/******tidio*********/
#tidio-chat-iframe .grid-layout #messages {

    direction: rtl !important;
}

.class-span15{    border-radius: 10px;padding: 3px 15px;color: #fff;  display: inline-block;
    margin-top: 9px !important;    font-size: 13px;}
.class-span14{    background: #cadcdf;
    border-radius: 10px;
    padding: 4px 15px;
    color: #16505d;
    font-size: 13px;
    display: inline-block;
    margin-top: 9px !important;}
    .editor-cl h3, .editor-cl h4 , .editor-cl h5 , .editor-cl h2 ,.editor-cl h6{font-size: 17px !important; color: #222 !important;    margin: 0;
    font-weight: 600;}
    .editor-cl p {
    
    color: #525252;}
.hl-h2:before {
    content: "";
    background: linear-gradient(90deg, rgba(140, 112, 76, 0) 0%, rgb(92 200 230) 100%);
    width: 101px;
    height: 30px;
    position: absolute;
    top: 21px;
    right: -11px;
    border-radius: 8px;
    transform: rotate(-5deg);
    z-index: 0;
    opacity: 30%;
}


        
@media (max-width: 991px) {


    .navbar-full-screen-menu-inner{z-index: 999 !important;text-align: center;}
  .navbar-full-screen-menu-inner .navbar-nav .nav-item .nav-link{        font-size: 14px !important;

    color: #868686 !important;}
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media only screen and (max-width: 650px) {
    
.hero {
            position: relative;
            height: 80vh;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
        }
        .hero video {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 80%;
            object-fit: cover;
            z-index: -1;
        }
        .hero::before {

            width: 100%;
            height: 72vh;
            z-index: 0;
}
    
}

    /*************/

    @media (min-width: 991px) {

        .xh-14{ height: 400px;}

    }  
    @media (max-width: 991px) {

        .mt-md-130px {
            padding-top: 70px !important;
        }
                .mt-md-130px2 {
            margin-top: 70px !important;
        }
        .circle-cart {

            left: -10px;
 
        }
        
    .navbar .navbar-nav {
      
        direction: rtl;        text-align: center;
    }
    }

    @media (min-width: 767px) {
        .ul25 li {
           
            margin-bottom: 15px !important;
        }

    }   
    
    @media (max-width: 767px) {
        .free-trial{margin-top: -73px;}
        .free-trial img{width: 122px;}
        .free-trial h2{font-size: 27px !important;
        }
        .mt-xfit-140{margin-top: -188px;}
        .chart-container {
width: 250px;
        }
        .d-xs-block{display: block !important;}
        .text-sm-center{text-align: center;}
        .text-768-center{text-align: center;}

        .text-xfit27{    display: block !important;

    width: 251px;
    margin: 10px auto !important;}
    .top-180{margin-top: -180px !important;}
    .hl-h2:before

 {

    width: 101px;
    height: 23px;

    top: 16px;
    right: -11px;}
        
    }