
.VisaHeader {
    background: -moz-linear-gradient(45deg, #941a1f 0%, #b1252b 29%, #ac1119 66%, #8c0409 100%);
    background: -webkit-linear-gradient(45deg, #941a1f 0%, #b1252b 29%, #ac1119 66%, #8c0409 100%);
    background: linear-gradient(45deg, #941a1f 0%, #b1252b 29%, #ac1119 66%, #8c0409 100%);
    background-size: 400% 400%;
    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s ease infinite;
    /* min-height: calc(100vh - 2rem); */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-evenly;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 360px;
}

.VisaSearchbarWapper{
    position: relative;}
.VisaHeader::
    before, 
.VisaHeader::after {
 content: "";
    width: 360px;
    height: 360px;
    position: absolute;
    background: rgba(255, 255, 255, 0.07);
    left: -20vmin;
    top: -20vmin;
    animation: morph 15s linear infinite alternate, spin 20s linear infinite;
    z-index: 1;
    will-change: border-radius, transform;
    transform-origin: 30% 30%;
    pointer-events: none; 
}
 
.VisaHeader::
    after {
    width: 360px;
    height: 360px;
    left: auto;
    right: -10vmin;
    top: auto;
    bottom: 0;
    animation: morph 10s linear infinite alternate, spin 26s linear infinite reverse;
    transform-origin: 10% 10%; 
}
    @-webkit-keyframes Gradient {
 0% {
  background-position: 0 50%}
 50% {
    background-position: 100% 50%}
 100% {
    background-position: 0 50%}
}
    @-moz-keyframes Gradient {
 0% {
  background-position: 0 50%}
 50% {
    background-position: 100% 50%}
 100% {
    background-position: 0 50%}
}
    @keyframes Gradient {
 0% {
  background-position: 0 50%}
 50% {
    background-position: 100% 50%}
 100% {
    background-position: 0 50%}
}
    @keyframes morph {
  0% {
    border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%; }
  100% {
    border-radius: 40% 60%; } 
}
    @keyframes spin {
  to {
    transform: rotate(1turn); 
  } 
}
 .st0{
    display:none;}
 .st1{
    display:inline;}
 .st2{
    opacity:0.29;}
 .st3{
    fill:#FFFFFF;}
 .st4{
    clip-path:url(#SVGID_2_);
    fill:#FFFFFF;}
 .st5{
    clip-path:url(#SVGID_4_);}
 .st6{
    clip-path:url(#SVGID_6_);}
 .st7{
    clip-path:url(#SVGID_8_);}
 .st8{
    clip-path:url(#SVGID_10_);}
 .st9{
    fill:none;}
 .st10{
    clip-path:url(#SVGID_12_);}
 .st11{
    opacity:0.7;}
 .st12{
    clip-path:url(#SVGID_14_);}
 .st13{
    opacity:0.2;}
 .st14{
    clip-path:url(#SVGID_16_);}
 .st15{
    opacity:0.3;
    fill:#FFFFFF;
    enable-background:new;}




 .svgbg
    svg {
    width: 12%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 28%;
    transform: translate(-50%, -50%);
    background: linear-gradient(rgb(0 0 0 / 0%) 0%, rgb(2 2 2 / 0%) 0.52%, rgb(255 255 255 / 27%) 19.27%, rgb(255 255 255 / 27%) 88.54%, rgb(0 0 0 / 0%) 100%);
    border-radius: 100%;
}
.svgbg {
    width: 100%;
    height: 360px;
    /* background: -webkit-radial-gradient(center, ellipse cover, #ffffff00 0%, #141310 100%); */
    position: absolute;
    background-image: url(https://rctrips.com/assets/slide/home_innerbanner3.svg);
}
    @-webkit-keyframes rotate-right {
          from {
            -webkit-transform: rotate(0deg);
          }
          to {
    -webkit-transform: rotate(360deg);
          }
        }
    @-webkit-keyframes rotate-left {
          from {
            -webkit-transform: rotate(0deg);
          }
          to {
    -webkit-transform: rotate(-360deg);
          }
        }
    @-webkit-keyframes hover {
          0% {
            -webkit-transform: translateY(0%);
          }
          50% {
    -webkit-transform: translateY(5%);
          }
          100% {
    -webkit-transform: translateY(0%);
          }
        }
    @-webkit-keyframes pull {
          0% {
            -webkit-transform: scaleY(1);
          }
          40% {
    -webkit-transform: scaleY(1.01);
          }
          60% {
    -webkit-transform: scaleY(0.99);
          }
          80% {
    -webkit-transform: scaleY(1.01);
          }
          100% {
    -webkit-transform: scaleY(0.99);
          }
          80% {
    -webkit-transform: scaleY(1.01);
          }
          100% {
    -webkit-transform: scaleY(1);
          }
        }
        #airplane2, #airplane1 {
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-transform-origin: 200px 200px;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-animation: rotate-right 60s linear 0s infinite;
        }
        
        #countryObjects {
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-transform-origin: 200px 200px;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-animation: rotate-right 240s linear 0s infinite;
        }
        
        #floatingGlobe {
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-transform-origin: 200px 200px;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-animation: rotate-left 360s linear 0s infinite;
        }
        
        #globe {
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-animation: hover 0s linear 0s infinite;
        }
        
        #windmill {
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-transform-origin: 331px 201px;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-animation: rotate-right 2s linear 0s infinite;
        }
        
        #cloud1 {
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-animation: hover 3s linear 1s infinite;
        }
        
        #cloud2 {
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-animation: hover 3s linear 2s infinite;
        }
        
        #cloud3 {
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-animation: hover 3s linear 3s infinite;
        }
        
        #circle1 {
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-transform-origin: 200px 200px;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-animation: rotate-right 12s linear 0s infinite;
        }
        
        #circle2 {
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-transform-origin: 200px 200px;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-animation: rotate-left 24s linear 0s infinite;
        }
        
        #circle3 {
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-transform-origin: 200px 200px;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-animation: rotate-right 12s linear 0s infinite;
        }
        
        #circle4 {
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-transform-origin: 200px 200px;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-animation: rotate-left 24s linear 0s infinite;
        }
        
        #circle5 {
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-transform-origin: 200px 200px;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-animation: rotate-right 12s linear 0s infinite;
        }
        
        
        
        
        * {
    box-sizing: border-box;
}
    html,
body {
  position: relative;
    height: 100%;
}

.filter-links {
    margin: 60px auto 30px;
    padding: 0;
    list-style: none;
    display: flex;
    width: 400px;
    height: 51px;
    overflow: hidden;
    background: white;
    border: 1px solid #E4D7D7;
    border-radius: 8px;
    justify-content: center;
    align-content: center;
    align-items: center;
}


.filter-links
    li:first-child a.active:hover{ background:none;
    color:#000;}
.filter-links
    li:first-child a:hover{ background:none;
    color:#000;}
.filter-links
    li:first-child a {
    background: none !important;
    color: #000 !important;
    border-radius: 0px !important;
    padding: 6px 15px 6px 6px !important;
    margin-right: 15px !important;

}
.filter-links
    li:first-child a {
    border-right: 1px solid #ddd;
    padding: 6px 15px 6px 6px;
    margin-right: 15px;
}
.filter-links
    li:last-child a{margin-right: 0px;}
.filter-links
    li a {
  display: block;
    color: black;
    padding: 6px 15px;
    text-decoration: none;
    margin-right: 5px;
}
.filter-links
    li a.active {
  display: block;
    color: #fff;
    padding: 6px 15px;
    text-decoration: none;
    background: #b1252b;
    border-radius: 6px;
}

.filter-links
    li a:hover {
  color: red;
    background: #f3f3f3;
    border-radius: 6px;
}

.filter-sections {
    width: 100%;
    display: flex;
    overflow: hidden;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    justify-content: center;
}

.filter-sections
    div {
  opacity: 0;
  display: none;
  min-height: 50px;
  margin: 0px;
  text-align: center;
  padding: 2em 1em;
  transition: all 500s ease;
  width: 24%;
}

.view {
    display: block !important;
    opacity: 1 !important;
    transform: scale(1) rotate(0deg);
    border-radius:4px;
    animation: selected 300ms 1 ease-in-out;
}
    @keyframes selected {
  0% {
    border-radius:100%;
    transform: scale(0) rotate(-180deg);
  }
}

.javascript{
    background-color:yellow;
    color:black;
}
.html{
    background:blue;
    color:white;
}
.css{
    background:red;
    color:white;
}
.php{
    background:brown;
    color:white;
}
.VisaHeader .svgbg .visaheadwrap{
    position: absolute;
    width: 100%;
    height: 360px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -22%);
    background: linear-gradient(rgba(213, 247, 228, 0) 0%, rgba(255, 255, 236, 0) 0.52%, rgb(48 2 2 / 52%) 19.27%, rgb(107 0 0 / 91%) 88.54%, rgba(255, 255, 236, 0) 100%);
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.VisaHeader .svgbg .visaheadwrap .visaheadtext{
    text-align: center;}
.VisaHeader .svgbg .visaheadwrap .visaheadtext
    span{color:#24d41a}
.VisaHeader .svgbg .visaheadwrap .visaheadtext
    h1{color:#fff;
    font-size: 30px;
    font-weight: 700;}


.form-tab .search-btn, .form-tab .search-field .search-placeholder {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
.SearchbarAutoWrap {
    background: transparent;
    position: absolute;
    top: 0px;
    z-index: 99;
    left: 50%;
    transform: translate(-50%, -54%);
    width: 35%;
    border: 3px solid #b1252b;
    border-radius: 8px;
    box-shadow: #d5dbed 0px 25px 40px -7px;
}
  
 
  
  :
    root {
    --sw: 400px;
    --sh: 70px;
    --fs: 1.1em;
    --i1: 24px;
    --i2: 18px;
    --t: 14px;
    --l: 10px;
    --mt: 8px;
  }

  .ul .li, .ul-title, .resoult-tab, .form-tab .search-btn, .form-container .form-tab, .form-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .container2 {
    width: 400px;
    height: calc(calc(var(--sh) * 4) + 10px);
    background: transparent;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  
  .form-container3 {
    /* width:400px; */
    /* height: var(--sh); */
    /* background: #fff; */
    border-radius: 0px;
    box-shadow: 0 6px 6px -10px #c0c9e3;
    margin-bottom: 0px;
    position: relative;
  }
  .form-container3 .form-tab {
    width: 100%;
    height: calc(var(--sh) - 20px);
  }
  
  .form-tab .search-field {
    width: 100%;
    height: calc(var(--sh) - 20px);
    background: transparent;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    background: #eff4ff;
  }
  .form-tab .search-field .search-icon {
    position: absolute;
    top: var(--t);
    left: var(--l);
    z-index: 1;
    color: #b1252b;
    opacity: 0.8;
    width: var(--i1);
    height: var(--i1);
  }
  .form-tab .search-field .search-placeholder {
    position: absolute;
    top: 15px;
    left: 42px;
    z-index: 1;
    color: #b1252b;
    opacity: 0.8;
    font-size: calc(var( --fs) / 1.1);
  }
  .form-tab .search-field
    form {
    width: 100%;
    /* height: 100%; */
    position: absolute;
    top: 0;
    z-index: 3;
  }
  .form-tab .search-field
    form .text-field {
    width: 100%;
    height: 100%;
    background: transparent;
    font-size: var(--fs);
    color: #3f3f3f;
    border: none;
    outline: none;
    box-sizing: border-box;
    padding: 5px 5px 5px 43px;
    caret-color: #79a6ff;
    line-height: 2em;
  }
  .form-tab .search-btn {
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: calc(var(--fs) / 1.2);
    width: 25%;
    height: 40px;
    background: transparent;
    margin-top: 2px;
  }
  .form-tab .search-btn
    p {
    cursor: pointer;
    color: #222;
  }
  
  .resoult-tab {
    justify-content: flex-start;
    flex-direction: column;
    width: 100%;
    height: 0px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 30px -10px #d5dbed;
    overflow: hidden;
    transition: height 359ms cubic-bezier(0.27, 0.7, 0, 0.99);
    position: absolute;
    top: 65px;
  }
  
  .resoult-tab-active {
    height: calc(calc(var(--sh) / 2) * 4);
    transition: height 399ms cubic-bezier(0.27, 0.7, 0, 0.99);
  }
  
  .ul-title {
    justify-content: flex-start;
    margin-top: 10px;
    width: 90%;
    height: auto;
    background: transparent;
    /* opacity: 0; */
  }
  .ul-title
    p {
    text-transform: uppercase;
    font-size: 14px;
    color: #b1252b;
    /* opacity: 0.4; */
    margin: 0px;
  }
  
  .ul {
    width: 100%;
    height: auto;
    background: transparent;
    position: relative;
    border-radius: 6px;
  }
  .ul .li {
    box-sizing: border-box;
    padding: 0 5%;
    justify-content: flex-start;
    width: 100%;
    height: calc(var(--sh) / 2.5);
    position: relative;
    overflow: hidden;
    background: rgba(20, 98, 255, 0);
    transition: background 399ms ease;
  }
  .ul .li:
    hover {
    background: rgba(20, 98, 255, 0.1);
    transition: background 299ms ease;
  }
  .ul .li .li-icon {
    margin-right: 8px;
  }
  .ul .li .li-icon .icon {
    transform: translatey(2px);
    color: #b1252b;
    width: var(--i2);
    height: var(--i2);
  }
  .ul .li .li-text {
    font-size: calc(var(--fs) / 1.3);
    color: #222;
    opacity: 0.8;
    cursor: pointer;
  }
  
  .li-active {
    animation: displayList 699ms cubic-bezier(0.6, 0.18, 0.5, 0.99) forwards;
    transform: translatey(40px);
    opacity: 0;
  }
  
  .li-1 {
    animation-delay: 99.5ms;
  }
  
  .li-2 {
    animation-delay: 199ms;
  }
  
  .li-3 {
    animation-delay: 298.5ms;
  }
    @keyframes displayList {
    0% {
      opacity: 0;
    transform: translatey(40px);
    }
    20% {
    opacity: 0;
    }
    100% {
    opacity: 1;
    transform: translatey(0px);
    }
  };
  }
  .form-container3 .form-tab {
    width: 100%;
    height: calc(var(--sh) - 20px);
  }
  
  .form-tab .search-field {
    width: 100%;
    height: 48px;
    background: transparent;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    background: #eff4ff;
  }
  .form-tab .search-field .search-icon {
    position: absolute;
    top: 11px;
    left: 10px;
    z-index: 1;
    color: #b1252b;
    opacity: 0.8;
    width: var(--i1);
    height: var(--i1);
  }
  .form-tab .search-field .search-placeholder {
    position: absolute;
    top: 13px;
    left: 42px;
    z-index: 1;
    color: #b1252b;
    opacity: 0.8;
    font-size: calc(var( --fs) / 1.1);
  }
  .form-tab .search-field form {
    width: 100%;
    /* height: 100%; */
    position: absolute;
    top: 0;
    z-index: 3;
  }
  .form-tab .search-field form .text-field {
    width: 100%;
    height: 100%;
    background: transparent;
    font-size: var(--fs);
    color: #3f3f3f;
    border: none;
    outline: none;
    box-sizing: border-box;
    padding: 12px 12px 12px 43px;
    caret-color: #79a6ff;
    line-height: 2em;
  }
  .form-tab .search-btn {
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: calc(var(--fs) / 1.2);
    width: 25%;
    height: 40px;
    background: transparent;
    margin-top: 2px;
  }
  .form-tab .search-btn p {
    cursor: pointer;
    color: #222;
  }
  
  .resoult-tab {
    justify-content: flex-start;
    flex-direction: column;
    width: 100%;
    height: 0px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 30px -10px #d5dbed;
    overflow: hidden;
    transition: height 359ms cubic-bezier(0.27, 0.7, 0, 0.99);
    position: absolute;
    top: 65px;
  }
  
  .resoult-tab-active {
    height: 400px;
    transition: height 399ms cubic-bezier(0.27, 0.7, 0, 0.99);
  }
  
  .ul-title {
    justify-content: flex-start;
    margin-top: 15px;
    width: 90%;
    height: auto;
    background: transparent;
    /* opacity: 0; */
    margin-bottom: 10px;
  }
  .ul-title p {
    text-transform: uppercase;
    font-size: 18px;
    color: #b1252b;
    /* opacity: 0.4; */
    margin: 0px;
  }
  
  .ul {
    width: 100%;
    height: auto;
    background: transparent;
    position: relative;
    border-radius: 6px;
  }
  .ul .li {
    box-sizing: border-box;
    padding: 0 5%;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    background: rgba(20, 98, 255, 0);
    transition: background 399ms ease;
    margin-bottom:10px;
  }
  .ul .li:hover {
    background: rgba(20, 98, 255, 0.1);
    transition: background 299ms ease;
  }

  .ul .li .li-icon {
    margin-right: 8px;
    width: 65px;
    height: 65px;
    border-radius: 8px;
  }
    .ul .li .li-icon img{width:65px;height:65px;border-radius: 6px;}
  .ul .li .li-icon .icon {
    transform: translatey(2px);
    color: #b1252b;
    width: var(--i2);
    height: var(--i2);
  }
    .ul .li .li-text span{
    display: block;
    font-size: 14px;
    color: #b1252b;
}
  .ul .li .li-text {
    font-size: 18px;
    color: #060606;
    opacity: 0.8;
    cursor: pointer;
  }
  
  .li-active {
    animation: displayList 699ms cubic-bezier(0.6, 0.18, 0.5, 0.99) forwards;
    transform: translatey(40px);
    opacity: 0;
  }
  
  .li-1 {
    animation-delay: 99.5ms;
  }
  
  .li-2 {
    animation-delay: 199ms;
  }
  
  .li-3 {
    animation-delay: 298.5ms;
  }
  
  @keyframes displayList {
    0% {
      opacity: 0;
      transform: translatey(40px);
    }
    20% {
      opacity: 0;
    }
    100% {
      opacity: 1;
      transform: translatey(0px);
    }
  }
















.filter-section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
  padding: 75px 0px 30px 0px;
}
.filter-section ul {
  display: flex;
  align-items: center;
  gap: 15px;
  border:0px solid #e5e7eb;
  border-radius: 8px;
  padding: 0px 15px;
  margin: 0px;
  height: 55px;
  background:#fff;
}
.filter-section ul .Icohead{
    margin-right: 10px;
    padding-right: 10px;
    border-right: 1px solid #e5e7eb;
}
.filter-section ul .Icohead svg{/* fill: #b1252b; */width: 24px;height: 24px;}
.filter-section ul li {
  padding: 10px 20px;
  color: #000;
  /* background: #eee; */
  cursor: pointer;
  border-radius: 8px;
}
.filter-section ul li.active {
  color: #fff;
  background: #c23a3b;
}
.products {
  width: 100%;
}
.products > div {
  width: 100%;
}

.VisaCradwrap{position: relative;min-height: auto;transition: 1s all;margin-bottom: 25px;}
.VisaCradwrap .VisaCrad{
        transition: 1s all;
        height: auto;
        width: 100%;
        background: #fff;
        border-radius: 10px;
        padding: 0px;
        box-shadow: 0 30px 60px -12px rgba(50, 50, 93, .25);
}
.VisaCradwrap .VisaCrad .VisaCradtxst{min-height: 110px;padding:15px;display: flex;flex-wrap: wrap;align-items: flex-start;/* font-size: 85%; */flex-direction: column;justify-content: center;}
.VisaCradwrap .VisaCrad .VisaCradimg{overflow: hidden;transition: 1s all;border-radius: 10px 10px 0px 0px;}
.VisaCradwrap:hover .VisaCrad .VisaCradimg img {
    transform: scale(1.1);    transition: 1s all;
}
.VisaCradwrap .VisaCrad .VisaCradtxst .VisaCradtxstContry h3{font-size: 18px;margin: 0px;color: #2e2e2e;min-height: 35px;display: flex;align-items: center;}
.VisaCradwrap .VisaCrad .VisaCradtxst .VisaCradtxstPrice span svg{fill:#b1252b; width:20px; height:20px;}
.VisaCradwrap:hover .VisaCrad .VisaCradtxst .VisaCradtxstPrice span svg{fill:#fff; width:20px; height:20px;}
.VisaCradwrap:hover .VisaCrad .VisaCradtxst{transition: 1s all;background:#b1252b;border-radius: 0px 0px 10px 10px;}
.VisaCradwrap:hover .VisaCrad .VisaCradtxst .VisaCradtxstContry h3,
.VisaCradwrap:hover .VisaCrad .VisaCradtxst .VisaCradtxstComplete,
.VisaCradwrap:hover .VisaCrad .VisaCradtxst .VisaCradtxstPrice{ color: #fff; }
.VisaCradwrap .VisaCrad a{text-decoration: none;}










    
    













    
    


