:root {
    --blue: #1593ff;
    --red: #f56d6d;
    --orange: #ff5623;
    --yellow: #ffbb2a;
    --green: #73af00;
    --teal: #26cf96;
    --cyan: #05e5ff;
    --white: #fff;
    --gray: #8f8f8f;
    --black: #313131;
    --light-bg: #f6f5f5;
    --dark: #666666;
    --border-e6: 1px solid #e6e6e6;
    --border-f0: 1px solid #f0f0f0; 
    --font-family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, Roboto,
      "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
/* ------custom defined margins/paddings acc. to our needs------- */
.m-0 {
    margin: 0 !important;
  }
  
  .mt-0,
  .my-0 {
    margin-top: 0 !important;
  }
  
  .mr-0,
  .mx-0 {
    margin-right: 0 !important;
  }
  
  .mb-0,
  .my-0 {
    margin-bottom: 0 !important;
  }
  
  .ml-0,
  .mx-0 {
    margin-left: 0 !important;
  }
  
  .m-1 {
    margin: 0.3125rem !important;
  }
  
  .mt-1,
  .my-1 {
    margin-top: 0.3125rem !important;
  }
  
  .mr-1,
  .mx-1 {
    margin-right: 0.3125rem !important;
  }
  
  .mb-1,
  .my-1 {
    margin-bottom: 0.3125rem !important;
  }
  
  .ml-1,
  .mx-1 {
    margin-left: 0.3125rem !important;
  }
  
  .m-2 {
    margin: 0.625rem !important;
  }
  
  .mt-2,
  .my-2 {
    margin-top: 0.625rem !important;
  }
  
  .mr-2,
  .mx-2 {
    margin-right: 0.625rem !important;
  }
  
  .mb-2,
  .my-2 {
    margin-bottom: 0.625rem !important;
  }
  
  .ml-2,
  .mx-2 {
    margin-left: 0.625rem !important;
  }
  
  .m-3 {
    margin: 0.9375rem !important;
  }
  
  .mt-3,
  .my-3 {
    margin-top: 0.9375rem !important;
  }
  
  .mr-3,
  .mx-3 {
    margin-right: 0.9375rem !important;
  }
  
  .mb-3,
  .my-3 {
    margin-bottom: 0.9375rem !important;
  }
  
  .ml-3,
  .mx-3 {
    margin-left: 0.9375rem !important;
  }
  
  .m-4 {
    margin: 1.25rem !important;
  }
  
  .mt-4,
  .my-4 {
    margin-top: 1.25rem !important;
  }
  
  .mr-4,
  .mx-4 {
    margin-right: 1.25rem !important;
  }
  
  .mb-4,
  .my-4 {
    margin-bottom: 1.25rem !important;
  }
  
  .ml-4,
  .mx-4 {
    margin-left: 1.25rem !important;
  }
  
  .m-6 {
    margin: 1.875rem !important;
  }
  
  .mt-6,
  .my-6 {
    margin-top: 1.875rem !important;
  }
  
  .mr-6,
  .mx-6 {
    margin-right: 1.875rem !important;
  }
  
  .mb-6,
  .my-6 {
    margin-bottom: 1.875rem !important;
  }
  
  .ml-6,
  .mx-6 {
    margin-left: 1.875rem !important;
  }
  
  .m-10 {
    margin: 3.125rem !important;
  }
  
  .mt-10,
  .my-10 {
    margin-top: 3.125rem !important;
  }
  
  .mr-10,
  .mx-10 {
    margin-right: 3.125rem !important;
  }
  
  .mb-10,
  .my-10 {
    margin-bottom: 3.125rem !important;
  }
  
  .ml-10,
  .mx-10 {
    margin-left: 3.125rem !important;
  }
  
  .p-0 {
    padding: 0 !important;
  }
  
  .pt-0,
  .py-0 {
    padding-top: 0 !important;
  }
  
  .pr-0,
  .px-0 {
    padding-right: 0 !important;
  }
  
  .pb-0,
  .py-0 {
    padding-bottom: 0 !important;
  }
  
  .pl-0,
  .px-0 {
    padding-left: 0 !important;
  }
  
  .p-1 {
    padding: 0.3125rem !important;
  }
  
  .pt-1,
  .py-1 {
    padding-top: 0.3125rem !important;
  }
  
  .pr-1,
  .px-1 {
    padding-right: 0.3125rem !important;
  }
  
  .pb-1,
  .py-1 {
    padding-bottom: 0.3125rem !important;
  }
  
  .pl-1,
  .px-1 {
    padding-left: 0.3125rem !important;
  }
  
  .p-2 {
    padding: 0.625rem !important;
  }
  
  .pt-2,
  .py-2 {
    padding-top: 0.625rem !important;
  }
  
  .pr-2,
  .px-2 {
    padding-right: 0.625rem !important;
  }
  
  .pb-2,
  .py-2 {
    padding-bottom: 0.625rem !important;
  }
  
  .pl-2,
  .px-2 {
    padding-left: 0.625rem !important;
  }
  
  .p-3 {
    padding: 0.9375rem !important;
  }
  
  .pt-3,
  .py-3 {
    padding-top: 0.9375rem !important;
  }
  
  .pr-3,
  .px-3 {
    padding-right: 0.9375rem !important;
  }
  
  .pb-3,
  .py-3 {
    padding-bottom: 0.9375rem !important;
  }
  
  .pl-3,
  .px-3 {
    padding-left: 0.9375rem !important;
  }
  
  .p-4 {
    padding: 1.25rem !important;
  }
  
  .pt-4,
  .py-4 {
    padding-top: 1.25rem !important;
  }
  
  .pr-4,
  .px-4 {
    padding-right: 1.25rem !important;
  }
  
  .pb-4,
  .py-4 {
    padding-bottom: 1.25rem !important;
  }
  
  .pl-4,
  .px-4 {
    padding-left: 1.25rem !important;
  }
  
  .p-6 {
    padding: 1.875rem !important;
  }
  
  .pt-6,
  .py-6 {
    padding-top: 1.875rem !important;
  }
  
  .pr-6,
  .px-6 {
    padding-right: 1.875rem !important;
  }
  
  .pb-6,
  .py-6 {
    padding-bottom: 1.875rem !important;
  }
  
  .pl-6,
  .px-6 {
    padding-left: 1.875rem !important;
  }
  
  .p-10 {
    padding: 3.125rem !important;
  }
  
  .pt-10,
  .py-10 {
    padding-top: 3.125rem !important;
  }
  
  .pr-10,
  .px-10 {
    padding-right: 3.125rem !important;
  }
  
  .pb-10,
  .py-10 {
    padding-bottom: 3.125rem !important;
  }
  
  .pl-10,
  .px-10 {
    padding-left: 3.125rem !important;
  }
  .m-auto {
    margin: auto !important;
  }
  
  .mt-auto,
  .my-auto {
    margin-top: auto !important;
  }
  
  .mr-auto,
  .mx-auto {
    margin-right: auto !important;
  }
  
  .mb-auto,
  .my-auto {
    margin-bottom: auto !important;
  }
  
  .ml-auto,
  .mx-auto {
    margin-left: auto !important;
  }
  
  .b-0 {
    border: 0 !important;
  }
  /* -----for sm margins----- */
  @media (min-width: 576px) {
    .mx-sm-3,
    .mr-sm-3 {
      margin-right: 0.9375rem !important;
    }
    .mx-sm-3,
    .ml-sm-3 {
      margin-left: 0.9375rem !important;
    }
    .my-sm-6,
    .mt-sm-6 {
      margin-top: 1.875rem !important;
    }
    .my-sm-6,
    .mb-sm-6 {
      margin-bottom: 1.875rem !important;
    }
    .mt-sm-6,
  .my-sm-6 {
    margin-top: 1.875rem !important;
  }
  .mr-sm-6,
  .mx-sm-6 {
    margin-right: 1.875rem !important;
  }
  .pb-sm-0 {
    padding-bottom: 0 !important;
  }
    .py-sm-6,
    .pt-sm-6 {
      padding-top: 1.875rem !important;
    }
    .py-sm-6,
    .pb-sm-6 {
      padding-bottom: 1.875rem !important;
    }
    .py-sm-10,
    .pt-sm-10 {
      /* edited */
      padding-top: 4rem !important;
    }
    .py-sm-10,
    .pb-sm-10 {
      /* edited */
      padding-bottom: 4rem !important;
    }
  }
  /* -----for md margins----- */
  @media (min-width: 768px) {
  }
  /* -----for lg margins----- */
  @media (min-width: 992px) {
  }
  /* -----for xl margins----- */
  @media (min-width: 1200px) {
  }
    
/* ==---------- CUSTOM FONT COLORS-------------==*/

.clr-8f {
    color: var(--gray) !important;
  }
  
  .clr-31 {
    color: var(--black) !important;
  }
  
  .clr-ff {
    color: var(--white) !important;
  }
  
  .clr-red {
    color: var(--red) !important;
  }
  
  .clr-66{
    color: var(--dark) !important;
  }
  
  .clr-blue{
    color: var(--blue) !important;
  }
  
  
  /* ==---------- CUSTOM BACKGROUND COLORS-------------==*/
  
  .bg-ff{
    background-color: var(--white);
  }
  
  .bg-f4{
    background-color: var(--light-bg);
  }
  
  /* ----most used classes------ */
  /* -----gutter14 class---- */
  .row.gutter14 {
    margin-left: -7px;
    margin-right: -7px;
  }
    .row.gutter14 > [class^="col-"] {
        padding-left: 7px;
        padding-right: 7px;
    }
  /* -------- custom scrollbar chrome------- */
  .scrollbarChrome::-webkit-scrollbar {
    width: 7px;
    background: hsla(0, 29%, 97%, 0.34) !important;
    margin-right: 1px;
  }
  .scrollbarChrome::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.45) !important;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    width: 100%;
    min-height: 10px;
  }
  .scrollbarChrome::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background: hsla(0, 3%, 47%, 0.35) !important;
  }
  .scrollbarChrome_sharp::-webkit-scrollbar-thumb,
  .scrollbarChrome::-webkit-scrollbar-track {
    border-radius: 0;
  }
/* ==---------- CUSTOM FONT SIZES-------------==*/
.fnt-10 {
    font-size: 0.625rem;
  }
  .fnt-11 {
    font-size: 0.6875rem;
  }
  .fnt-12 {
    font-size: 0.75rem;
  }
  .fnt-13 {
    font-size: 0.8125rem;
  }
  .fnt-14 {
    font-size: 0.875rem;
  }
  .fnt-15 {
    font-size: 0.9375rem;
  }
  .fnt-16 {
    font-size: 1rem;
  }
  .fnt-17 {
    font-size: 1.0625rem;
  }
  .fnt-18 {
    font-size: 1.125rem;
  }
  .fnt-20 {
    font-size: 1.25rem;
  }
  .fnt-22 {
    font-size: 1.375rem;
  }
  .fnt-24 {
    font-size: 1.5rem;
  }
  @media (min-width: 576px) and (max-width: 991px) {
    .fnt-sm-10 {
      font-size: 0.625rem;
    }
    .fnt-sm-13 {
      font-size: 0.8125rem;
    }
    .fnt-sm-12 {
      font-size: 0.75rem;
    }
    .fnt-sm-14 {
      font-size: 0.875rem;
    }
    .fnt-sm-15 {
      font-size: 0.9375rem;
    }
    .fnt-sm-16 {
      font-size: 1rem;
    }
    .fnt-sm-17 {
      font-size: 1.0625rem;
    }
    .fnt-sm-18 {
      font-size: 1.125rem;
    }
    .fnt-sm-20 {
      font-size: 1.25rem;
    }
    .fnt-sm-22 {
      font-size: 1.375rem;
    }
    .fnt-sm-24 {
      font-size: 1.5rem;
    }
  }
  @media (min-width: 992px) {
    .fnt-md-10 {
      font-size: 0.625rem;
    }
    .fnt-md-12 {
      font-size: 0.75rem;
    }
    .fnt-md-13 {
      font-size: 0.8125rem;
    }
    .fnt-md-14 {
      font-size: 0.875rem;
    }
    .fnt-md-15 {
      font-size: 0.9375rem;
    }
    .fnt-md-16 {
      font-size: 1rem;
    }
    .fnt-md-17 {
      font-size: 1.0625rem;
    }
    .fnt-md-18 {
      font-size: 1.125rem;
    }
    .fnt-md-20 {
      font-size: 1.25rem;
    }
    .fnt-md-22 {
      font-size: 1.375rem;
    }
    .fnt-md-24 {
      font-size: 1.5rem;
    }
  }
.font-josefin {
    font-family: 'Josefin Sans', sans-serif !important
  }
  .font-bold{
      font-weight:bold
  }  
/* -------ripple effect----- */
.ripple {
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    cursor: pointer
  }
  .ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.5s ease-out, opacity 1s ease-out;
  }
  .ripple:active:after {
    transform: scale(0, 0);
    opacity: 0.15;
    transition: 0s;
  }
/* ----for header---- */
header.travlover {
    position: static;
    top:0;
    left:0;
    width:100%;
    background: #fff;
    color: #313131;
    margin-bottom:20px!important;
    z-index: 11;
    min-height:64px;
    -webkit-box-shadow: 0 1px 1em 0 rgba(0,0,0,.3);
    -moz-box-shadow: 0 1px 1em 0 rgba(0,0,0,.3);
    box-shadow: 0 1px 1em 0 rgba(0,0,0,.3);
}
.navbar-brand {
    color: var(--black);
    padding: 10px 0;
    display: inline-block
}
.navbar-brand img{
    height:44px
}
.navbar-list{
    float:right
}
.navbar-list > li{
    float:left
}
.navbar-list > li >a > i{
    margin-right:10px;
}
.navbar-link{
    display: block;
    padding: 22px 15px;
    font-size:0.8125rem;
    height:64px;
    color: var(--black);
}
.header-joinus{
    display: inline-block;
    font-size:0.75rem;
    color: var(--white);
    background: var(--blue);
    border-radius: 50px;
    padding:3px 18px
}
.navbar-link:hover, .navbar-link:active, .navbar-link:focus {
    color:#000;
    text-decoration:none;
    font-size:0.8125rem
}
.header-joinus:hover, .header-joinus:active, .header-joinus:focus{
    color: var(--white)
}

/* ----header ends---- */

 /* -----home page sprite----- */
[class*="travlover-"], .custom-autocomplete .ui-menu-item::before {
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-image: url("../images/default-sprite.png");
    background-size: 324px 86px;
}
.travlover-blog{
    background-position: 0 0;
    width:22px;
    height:18px;
}
.travlover-signin{
    background-position: -24px 0;
    width:13px;
    height:18px;
}
.travlover-call{
    background-position: -38px 0;
    width:18px;
    height:18px;
}
.travlover-search-white{
    background-position: -74px 0;
    width:18px;
    height:18px;
}
.travlover-location{
    background-position: -58px 0;
    width:15px;
    height:18px;
}
.travlover-chevron-down{
    background-position: -112px -20px;
    width:8px;
    height:5px;
}
.travlover-about-pkg{
    background-position: -165px 0;
    width:32px;
    height:28px;
}
.travlover-about-destination{
    background-position: -200px 0;
    width:26px;
    height:28px;
}
.travlover-about-cost{
    background-position: -228px 0;
    width:30px;
    height:26px;
}
.travlover-star{
    background-position: -122px -20px;
    width:12px;
    height:12px;
}
.travlover-star-half{
    background-position: -136px -20px;
    width:12px;
    height:12px;
}
.travlover-star-empty{
    background-position: -150px -20px;
    width:12px;
    height:12px;
}
.travlover-facebook{
    background-position: 0 -20px;
    width:6px;
    height:13px;
}
.travlover-google{
    background-position: -8px -20px;
    width:15px;
    height:13px;
}
.travlover-twitter{
    background-position: -25px -20px;
    width:15px;
    height:13px;
}
.travlover-instagram{
    background-position: -42px -20px;
    width:12px;
    height:13px;
}
.travlover-youtube{
    background-position: -56px -20px;
    width:17px;
    height:13px;
}
.travlover-payment-options{
    background-position: 0 -36px;
    width:250px;
    height:50px;
}
.travlover-login-fb{
    background-position: -265px 0;
    width:10px;
    height:20px;
}
.travlover-login-google{
    background-position: -280px 0;
    width:44px;
    height:14px;
}
.travlover-footer-location{
    background-position: -95px 0;
    width:18px;
    height:18px;
}
.travlover-footer-call{
    background-position: -115px 0;
    width:18px;
    height:18px;
}
.travlover-footer-mail{
    background-position: -136px 0;
    width:18px;
    height:18px;
}
/* -----home page sprite ends----- */

/* ----banner search---- */
.banner-background{
    background: url('../images/default-banner.jpg') no-repeat;
    background-size: cover;
    height:90vh;
}
.banner-inner {
    max-width: 720px;
    width:100%;
    margin:0 auto;
}
.banner-heading{
    text-shadow:2px 2px 4px rgba(0,0,0,0.8)
}
.mainSearch{
    margin:60px auto 0;
    background: var(--white);
    padding:5px;
    height:50px
}
.mainSearch, .mainSearch-input, .mainSearch-button, .input-control{
    border-radius:50px
}
.mainSearch-input{
    width:75%;
}
.input-control{
    border:0;
    padding:0.375rem 0.75rem 0.375rem 3rem;
    height:40px;
    line-height:28px;
    font-size:0.875rem;
    color: var(--gray);
    cursor:pointer
}
.input-control:focus{
    box-shadow: none;
    color: var(--gray);
}
.mainSearch-input-label{
    position:absolute;
    top:0;
    left:5px;
    width:40px;
    height:40px;
    line-height: 40px;
    text-align:center
}
.mainSearch-button{
    width:25%;
    color: var(--white);
    background: var(--blue);
    border:0;
    padding:6px 18px;
    font-size:0.875rem;
}
/* ----banner search ends---- */

/* ---- default section --- */
.about-section{
    max-width:992px;
    margin: -35px auto 0
}
.about-section-circle{
    background: var(--white);
    width:60px;
    height:60px;
    border-radius: 50%;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}
.headers{
    font-size: 1.25rem;
    color: var(--black)
}
.bold-headers{
    position:relative;
    display: inline-block;
    font-weight:bold;
    font-size: 1.5rem;
    z-index: 2
}
.bold-headers::before{
    content:'';
    position: absolute;
    width:80px;
    left:-8px;
    bottom:5px;
    border-bottom: 6px solid var(--blue);
    z-index:-1
}
.bold-headers.yellow::before{
    border-color: var(--yellow)
}
.bold-headers.teal::before{
    border-color: var(--teal)
}
.bold-headers.green::before{
    border-color: var(--green)
}
.bold-headers.cyan::before{
    border-color: var(--cyan)
}
.bold-headers.orange::before{
    border-color: var(--orange)
}
.bold-headers.red::before{
    border-color: var(--red)
}
.bold-headers.purple::before{
    border-color: #6f45bb
}
.bold-headers.pink::before{
    border-color:#d0328d
}
.bold-headers.dark-green::before{
    border-color:#1fcc92
}
.popular-themes{
    position: relative;
    background: var(--white);
    min-height:270px;
    text-align: center;
    padding:40px 15px;
    box-shadow: 2px 2px 12px #d8d8d8
}
.popular-themes::before{
    content:'';
    position: absolute;
    top:6px;
    left:6px;
    right:6px;
    bottom:6px;
    border: var(--border-e6);
    z-index:2
}
.popular-themes::after{
    content: '';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    opacity: 0;
    background: rgba(21,147,255,0.15);
    background: linear-gradient(to right, rgba(38, 207, 150,0.15), rgba(21, 147, 255,0.15));
    z-index:1
}
.popular-themes-inner{
    position: relative;
    z-index:11
}
.popular-themes:hover::after{
    opacity:1
}
.popular-themes::after, .popular-themes:hover::after, .popular-themes, .popular-themes:hover, .top-destinations:hover .top-destinations-inner,
.top-destinations::before, .top-destinations:hover:before, .top-destinations-inner, .curve-packages img, .curve-packages:hover img,.suppliers-section:hover, .suppliers-section,
.suppliers-section:before, .suppliers-section:after, .suppliers-section:hover:after, .suppliers-section:hover:before, .form-box-label,.form-box-label.active
{
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    transition:all .3s ease;
}
.popular-themes:hover::after{
    box-shadow: 4px 4px 32px rgba(0,0,0,0.15);
}
.viewall-link{
    color: var(--black)
}
.viewall-link:hover, viewall-link:active, viewall-link:focus, .travelNow-link:hover, .travelNow-link:active, .travelNow-link:focus{
    color: #ee2e24
}
.headers-para{
    color: var(--gray);
    margin:10px 0 50px
}
.top-destinations::before{
    content:'';
    position: absolute;
    top:-5px;
    left:-5px;
    right:-5px;
    bottom:-5px;
    background:rgba(0,0,0,0.3)
}
.top-destinations-inner{
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    padding:15px 10px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    color: var(--white)
}
.top-destinations:hover:before{
    background:rgba(0,0,0,0.45)
}
.top-destinations:hover .top-destinations-inner {
    bottom: 40px
}
.left-blue-box{
    position: relative
}
.left-blue-box:before{
    content:'';
    position: absolute;
    top:110px;
    left:0;
    width:345px;
    height:345px;
    background: rgba(21,147,255,0.15);
    background: linear-gradient(to right, rgba(38, 207, 150,0.15), rgba(21, 147, 255,0.15));
}
.curve-packages img{
    border-radius:8px;
    box-shadow: 4px 4px 20px -4px rgba(0,0,0,0.6)
}
.curve-packages:hover img{
    box-shadow: 4px 4px 20px -2px rgba(0,0,0,0.6);
    transform:scale(0.96);
}
.curve-packageName{
    height:50px;
}
.suppliers-section {
    position:relative;
    text-align: center;
    padding:20px 15px;
    z-index:9;
    box-shadow: 3px 2px 15px rgba(0,0,0,0.1)
}
.suppliers-section, .suppliers-section:before, .suppliers-section:after {
    background: var(--white)
}
.suppliers-section:before, .suppliers-section:after{
    content:'';
    position:absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    z-index:-1
}
.suppliers-section img{
    height:30px;
}
.suppliers-section-inner{
    margin:10px 0 0;
    padding: 10px 0 0;
    border-top: var(--border-e6)
}
.suppliers-section:hover:after{
    -webkit-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    transform: rotate(7deg);
}
.suppliers-section:hover:before{
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    transform: rotate(15deg);
}
.suppliers-section:hover:before, .suppliers-section:hover:after{
box-shadow: 3px 2px 15px rgba(0,0,0,0.1);
}
.travelNow-link{
    color: var(--blue);
}
.working-step{
    position: relative;
    padding:20px 0 0
}
.for-working-counter{
    counter-reset: working-steps;
}
.working-step::before{
    counter-increment: working-steps;
    content: "0" counter(working-steps);
    font-family: 'Josefin Sans', sans-serif ;
    position:absolute;
    top:-20px;
    left:60px;
    font-size:4.6875rem;
    background: -webkit-linear-gradient(rgba(38, 207, 150,0.3), rgba(21, 147, 255,0.3));
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.working-step-icon{
    position: relative;
    z-index:9;
}
.inspire-packages{
    background: var(--white);
    box-shadow: 4px 4px 8px -4px rgba(0,0,0,0.3)
}
.inspire-packages-inner{
    padding:10px 15px;
    color: var(--gray)
}
.inspire-packages:after{
    counter-increment: working-steps;
    content: "0" counter(working-steps);
    position:absolute;
    top:-10px;
    left:-10px;
    width:40px;
    height:40px;
    line-height:40px;
    text-align:center;
    background: var(--orange);
    color: var(--white);
    font-weight:bold;
    box-shadow: 4px 4px 20px -4px rgba(0,0,0,0.6)
}
.inspire-packages:hover{
    box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.3);
}
.pkg-theme{
    display:inline-block;
    background: #d2d2d2;
    padding:1px 6px;
    margin:0 5px 0 0;
    font-size:0.75rem;
    border-radius:4px
}
.customer-review{
    position: relative;
    padding:0 0 0 20px;
}
.review-date{
    position:absolute;
    top:5px;
    left:0;
    white-space: nowrap;
    padding:0 0 0 40px;
    font-weight:bold;
    font-size:0.9375rem;
    transform: rotate(-90deg) translateX(-100%);
    transform-origin: left; 
    color: var(--black);
}
.review-date::after{
    content:'';
    position: absolute;
    top:10px;
    left:0;
    width:30px;
    border-bottom:1px solid #000
}
.customer-review-content{
    padding:10px;
    background: var(--white);
    color: var(--gray);
    border:var(--border-e6);
    min-height:275px
}
.reviews-btn{
    background: var(--red);
    color: var(--white);
    font-size:0.75rem;
}
.reviews-btn:hover, .reviews-btn:focus, .reviews-btn:active{
    color:var(--white)
}
/* ----blog section----- */
.blog-section img, .blog-card, .blog-card-left {
    box-shadow: 4px 4px 20px -4px rgba(0,0,0,0.3);
}
.blog-card{
    color: var(--gray);
    margin:-30px 60px;
    z-index:9
}
.blog-card, .blog-card-left{
    position: relative;
    background: var(--white);
    padding:15px 25px;
}
.blog-card-left .review-date{
    font-size: 0.875rem
}
.blog-card-left{
    color: var(--black);
    overflow: hidden;
    margin:0 0 20px
}
.blog-card-left-content{
    position: relative;
    z-index:19
}
.blog-card-left-heading{
    font-size:0.875rem;
    font-family: 'Josefin Sans', sans-serif !important;
    font-weight:bold;
    margin:10px 0;
    min-height:72px
}
.blog-card-left img, .blog-card-left:after{
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    opacity:0;
    visibility:hidden;
}
.blog-card-left img{
    z-index:9;
}
.blog-card-left:after{
    z-index: 10;
}
.blog-card-left:after{
    content:'';
    background:rgba(0,0,0,0.35);
}
.blog-card-left:hover img, .blog-card-left:hover:after{
    opacity:1;
    visibility: visible
}
.blog-card-left:hover{
    color: var(--white);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8)
}
.blog-card-left:hover .review-date{
    color: var(--white)
}
.blog-card-left:hover .review-date::before{
    border-color: var(--white)
}
.review-date.rotate0{
    position: static;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    transform: rotate(0)
}
/* ----blog section ends----- */
.next-travel-img{
    max-width: 360px;
    margin:20px auto;
    text-align: center
}
.btn-blue{
    background: var(--blue);
    color: var(--white);
    font-size:0.875rem;
    border:0;
    padding:0.375rem 1.5rem;
}
/* ----for form fields ------ */
.form-group{
    position:relative;
    margin-bottom:20px
}
.form-box{
    background: var(--white);
    box-shadow: 4px 4px 28px -4px rgba(0,0,0,0.15);
    padding: 20px;
    color: var(--gray)
}
.form-box-header{
    position:relative;
    color: var(--black);
}
.form-box-header::before{
    content:'';
    position: absolute;
    top:50%;
    left:0;
    width: 100%;
    border-bottom:1px solid var(--black)
}
.form-box-header .heading{
    position: relative;
    background: var(--white);
    padding:0 15px 0 0;
    margin:0
}
.form-box-content{
    margin: 1.5rem 0 0
}
.form-box-label{
    position:absolute;
    padding:0 5px;
    left:25px;
    top:7px;
    background: var(--white);
    color: var(--dark);
    font-size:0.875rem    
}
.form-box-label.active{
    top:-10px;
    font-size:0.875rem
}
.form-box-input{
    box-shadow: none;
    border: 1px solid  #d8d8d8;
    padding:0.375rem 0.75rem 0.375rem 1.625rem;
}
.form-box-input:focus{
    box-shadow: 0 0 6px 2px rgba(0,0,0,.2);
    border: 1px solid  #313131;
    color: var(--black);
}
/* ----for form fields ends----- */
.partners-section{
    text-align:center;
}
.partners-section img{
    max-width: 100%;
    height: auto;
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    filter: grayscale(1);
}
/* ----footer section---- */
footer{
    color: var(--gray);
    font-size:0.875rem;
    margin:20px 0 0
}
.footer-links{
    padding:15px 0;
    border-top: var(--border-e6);
    border-bottom: var(--border-e6);
}
.footer-links li{
    width:16.66666%
}
.footer-links li a{
    display: block;
    padding: 2px 20px;
    text-align:center;
    color:var(--gray);
    font-size:0.875rem;
    border-right: var(--border-e6)
}
.footer-links li:last-child a{
    border:0;
}
.useful-links > li{
    width:50%;
    float:left;
}
.useful-links > li > a{
    display: block;
    color: var(--gray);
    padding:4px 0;
    font-size: 0.875rem
}
.useful-links > li > a:hover, .footer-links li a:hover{
    color: var(--dark)
}
.social-icons > i {
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
}
.social-icons > a {
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
}
.social-icons > a:hover{
    -webkit-filter: none; 
    -moz-filter: none;
    filter: none;
}
.footer-strip{
    padding:12px 0;
    margin: -20px 0 0;
    background:#e9e9e9;
    border-top:1px solid #e1e1e1
}


/* ----for white label---- */
.partners-List{
    width:100%
}
.partners-List > li{
    width:20%;
    padding:0 20px;
    min-width:180px
}
.search-input{
    width:100%;
    border: 1px solid #d2d2d2;
    font-size:0.875rem;
    padding:8px 40px 9px 15px;
    color: var(--black);
    margin-bottom:1px
}
.search-input:focus{
    border:1px solid var(--blue)
}
.search-input-label{
    position:absolute;
    top:0;
    bottom:1px;
    right:0;
    width:60px;
    text-align:center;
    line-height:40px;
    background: var(--blue)
}
.allDestHgtSet{
    padding:20px 0 0
}
.allDestList{
    overflow: hidden;
}
.allDestList > li {
    float:left;
    width:33.33%
}
.topTrending > li > a, .allDestList > li > a{
    display: block;
    color: var(--dark);
    font-size:0.875rem;
    padding:6px 5px
}
.allDestHead{
    color:var(--black);
    font-weight:bold;
    font-size:0.9375rem
}
.allDestHgtSet{
    padding-right:20px;
    overflow-y: auto;
    height: calc(60vh - 140px)
}
.sortByAlpha{
    position:static;
    display: flex;
    justify-content: space-between;
    right:10px;
    top:10px;
    margin:15px auto 0;
    line-height:14px;
    font-size:0.875rem;
    z-index: 999;
}
.sortByAlpha > li{
    float:left;
    padding:0 2px;
    cursor:pointer
}
.sortByAlpha > li.active{
    color: var(--blue)
}


@media (max-width:480px){
    .navbar-brand{
        padding:18px 0
    }
    .navbar-brand img{
     height: 28px
    }
    .btn-blue{
        width:100%;
        display: block
    }
    .mainSearch{
        -ms-flex-pack: justify !important;
        justify-content: space-between !important;
    }
    .mainSearch-input{
        width:85%
    }
    .mainSearch-button{
        width:40px;
        text-align:center;
        padding:0
    }
}
@media (max-width:576px){
    .center-line:after{
        display: none
    }
    .form-box-content.break{
        padding-top:15px;
        border-top: var(--border-e6)
    }
    .form-box-content.m0{
        margin:0
    }
}
@media (max-width:767px){
    /* ----for responsive mrgns---- */
    .mrgnTopBtm{
        margin:15px 0
    }
    header.travlover {
        position: relative;
    }
    .navbar-list > li >a > i{
        margin: 4px auto 6px;
        display: block
    }
    .navbar-link{
        font-size:0.75rem;
        padding:8px;
        text-align: center;
                max-width:68px;
        white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
    }
    .banner-background{
        background-position: center;
        height:80vh;
        height:calc(90vh - 65px)
    }
    .banner-inner{
        max-width:546px;
    }
    .mainSearch{
        margin:40px 20px 0
    }
    .banner-heading{
        font-size: 1.75rem
    }
    /* -----for headers---- */
    .headers{
        font-size: 1.0625rem;
        margin:0
    }
    .bold-headers{
        font-size:1.25rem
    }
    .bold-headers::before{
        width: 60px;
        left: -5px;
        border-width:5px
    }
    .headers-para{
        margin:10px 0 40px
    }
    .d-flex > .headers{
        width:70%;
    }
    .d-flex > .headers:only-child{
        width:100%;
    }
    .d-flex > .viewall-link{
        -ms-flex-item-align: end !important;
        align-self: flex-end !important;
    }
    .viewall-link{
        font-size:0.875rem
    }
    /* -----about section div----- */
    .about-section-mrgn{
        margin:0 0 20px
    }
    /* -----for blog--section---- */
    .blog-card{
        margin:0 0 20px;
    }
    .blog-card, .blog-card-left{
        padding:15px
    }
    .blog-card-left-heading{
        min-height: inherit
    }
    .review-date.rotate0{
        font-size: 0.75rem
    }
    /* ----for form-box------ */
    .form-box-label.active{
        font-size:0.75rem
    }
    .form-box-content{
        margin: 1rem 0 0
    }
    /* ---for how it works---- */
    .working-step{
        margin: 0 0 40px
    }
    /* ----for footer----- */
    .footer-header{
        margin:30px 0 10px !important
    }
    .useful-links > li > a{
        padding:6px 0
    }
    .footer-links li{
        width:100%;
    }
    .footer-links{
        padding:0
    }
    .footer-links, .footer-links li a{
        border:0;
        border-bottom: var(--border-e6);

    }
    .footer-links li a{
        padding:8px 15px;
        font-size:0.8125rem;
    }
    .footer-strip{
        margin:0
    }
    .modal{
        padding:10px 15px
    }
    .sortByAlpha{
        position:absolute;
        height: calc(96vh - 120px);
        flex-direction: column;
    }
    .sortByAlpha > li {
        float: none;
        text-align: center
    }
    .topTrending, .allDestHgtSet{
        padding:10px 0 0        
    }
    .topTrending > li > a, .allDestList > li > a{
        padding:8px 0;
    }
    .allDestHgtSet{
        padding-right:5px;
        height: calc(94vh - 110px);
    }
    .allDestList > li{
        width:50%
    }
    .allDestScrlSet{
        margin-right:25px
    }
    .allDestMrgnSet{
        margin-right:10px
    }

}
.breadcrumb-wrap .breadcrumb {
    clear:both
}
.breadcrumb-wrap {
    padding:10px 0
}
.scrolltop {
    position:fixed;
    bottom:40px;
    right:30px;
    width:40px;
    height:40px;
    line-height:36px;
    background:#1593ff;
    color:#fff;
    font-weight:bold;
    text-align:center;
    font-size:24px;
    border-radius:50%;
}
    .scrolltop:hover {
        color:#fff;
    }
footer a:hover {
    text-decoration:none
}
header nav {
    float:none!important
}