@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

body,html,h1,h2,h3,h4,h5,h6,div,a,span,p{
   font-family: "Inter", sans-serif!important;
  
}
body,.bg-tripsillay{
  overflow-x: hidden!important;
}
p{
  margin-bottom:0!important;
}
.bg-header .bg-light{
  background-color:unset!important;
}
.bg-header,.bg-banner{
  background: #faf5f2!important;
}
.bg-header{
  border-bottom:1px solid #fff!important;
}
.bg-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}

.nav-item a{
  color:#646976!important;
  font-size:16px!important;
  padding-right:10px!important;
}
header .nav-link{
  padding-left: 20px !important;
  padding-right: 20px !important;
}
header .nav-link:hover,
header .nav-link.active{
  color:#0384f5!important;
}
.top-btn{
  font-size:13px!important;
  color:#646976!important;
}
.downloadbtn{
  width: fit-content!important;
  margin-left:auto!important;
}
.downloadbtn a{
  background:#0384f5!important;
  border-radius:10px!important;
  padding: 6px 10px !important;
  color:#fff!important;
  font-size:16px!important;
  text-decoration: none!important;
  box-shadow: 0 12px 30px rgba(42, 142, 250, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.downloadbtn a:hover{
  background: linear-gradient(135deg, #00c6ff, #0072ff)!important;
}
.downloadbtn i{
  background:#fff!important;
  padding: 10px !important;
  color: #222 !important;
  font-size: 20px !important;
  border-radius: 6px!important;
}
.headerlogo{
  width:45%!important;
}
.bg-banner{
   background:#faf5f2 url("../images/ban1.png")no-repeat!important;
  background-size:52%!important;
  background-position: bottom right!important;
  /* overflow: hidden; */
  z-index:999!important;  
  padding-top:8%!important;
}

.bg-banner::after{
 content: "";
  position: absolute;
  left: -10%;
  bottom: -35%;
  width: 120%;
  height: 100px;
  background: #0286FB; 
  transform: rotate(-9deg);
  transform-origin: left top;
}
.lay{
  height:260px!important;
  position: relative;
background: linear-gradient(-186deg, #faf5f2 4%, white 33%);
}
.lay::after{
  content: "";
  position: absolute;
  background: #fff; 
  transform: rotate(-9deg);
  transform-origin: left top;
  z-index:-9;
}
.top-stripban{
  background:#fff!important;
  color: #0286FB!important;      
  padding: 8px 15px;
  border-radius: 10px;
  font-size:14px!important;
  width: fit-content!important;
  font-weight: 500;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08)!important;
}
.banner-head{
  color:#11243E!important;
  font-size: 50px !important;
  font-weight: 700;
}
.common-para{
  color:#646976!important;
  font-size:16px!important;
  font-weight:500!important;
}
.text-blue{
  color:#0286fb!important;
}
#owl-features .owl-stage-outer{
  width:101%!important;
}
.img-2{
  position: absolute;
  top: -42px;
  right: 69px;
}
.img-3{
  position: absolute;
  top: 88px;
  left: 85px;
}
.img-4{
  position: absolute;
  bottom: -100px;
  left: 50%;
  right: 0;
  z-index: 99;
}
.common-title{
  font-size:42px!important;
  font-weight:700!important;
}
.emojiimg{
  width:20%!important;
}
.emojitext{
  width:88%!important;
  color:#11243E!important;
  font-size:16px!important;
}
.tripsil-leftborder{
  border-left:2px solid #e0e0e0!important;
}
.scroll-emoji-sec{
  display:flex;
  flex-direction:column;
  gap:16px;
  overflow:hidden!important;
}

.emoji-box img{
  width:45px;
  transition:opacity .35s ease, transform .35s ease;
}

.text-scroll{
  overflow:hidden;
  width:100%;
}

.text-track{
  display:flex;
  gap:60px;
  width:max-content;
  animation: scrollText 18s linear infinite;
}

#owl-plan .owl-item.active:first-child img,
#owl-plan .owl-item.active.main-active img {
  opacity: 1;
}
#owl-plan .owl-item img {
  opacity: 0;
  transition: opacity 0.4s ease;
  width: 23% !important;
  padding-top: 30px!important;
}
.text-track h2,.img-em h2{
  font-size:64px;
  font-weight:700;
  white-space:nowrap;
  margin:0;
}

@keyframes scrollText{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.feature-box{
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px!important;
  border-radius: 6px!important;
  background:#fff!important;
  padding:25px 15px!important;
  min-height: 484px!important;
}
.feature-imgbox{
  background: linear-gradient(  to bottom,  #ffffff 0%,  #faf5f5 40%,  #f0e6e6 100%);
  border-radius: 6px!important;
}
.featurehead{
  color:#11243E!important;
  font-size:20px!important;
  font-weight: 700!important;
}
.feature-box ul li i{
  color:#0286FB!important;
  font-size:14px!important;
  padding-top:6px!important;
}
.feature-box ul li{
  font-size: 16px!important;
  padding-bottom:10px!important;
  color:#11243E!important;
  display: flex;
  align-items: start;
  gap: 10px;
}
.bg-feature .owl-carousel .owl-item img.mainimg{
  width: auto !important;
  margin: 0 auto !important;
  height: 220px !important;

}
.fbox-2 img,.fbox-3 img,
.fbox-5 img,.fbox-6 img,
.fbox-8 img,.fbox-9 img,
.fbox-11 img,.fbox-12 img,.fbox-14 img{
  width:75%!important;
}
.fbox-2{
  position: absolute;
  content:'';
  top:20px!Important;
  right:-36px!important;
}
.fbox-3{
  position: absolute;
  content:'';
  bottom:20px!Important;
  left:0!important;
}
.fbox-5{
  position: absolute;
  content:'';
  top:25px!Important;
  left:22px!important;
}
.fbox-6{
  position: absolute;
  content:'';
  bottom:32px!Important;
  right:0!important;
}
.fbox-8{
  position: absolute;
  content:'';
  top:25px!Important;
  left:22px!important;
}
.fbox-9{
  position: absolute;
  content:'';
  bottom:32px!Important;
  right:0!important;
}
.fbox-11{
  position: absolute;
  content:'';
  top:25px!Important;
  left:22px!important;
}
.fbox-12{
  position: absolute;
  content:'';
  bottom:32px!Important;
  right:0!important;
}
.fbox-14{
  position: absolute;
  content:'';
  bottom:52px!Important;
  right:0!important;
}
.owl-nav{
  position: absolute;
  top: -10%;
  right: 15%;
}
.fas{
font-family: "Font Awesome 5 Free" !important;
}
.lay-1{
  background:url("../images/lay-1.png")no-repeat!important;
  background-size: cover!important;
  height: 215px !important;
  margin-top: -6%;
  z-index: 99999999;
  position: relative;
}
.bg-feature .owl-carousel .owl-nav button.owl-prev,.bg-feature  .owl-carousel .owl-nav button.owl-next{
  border: 1px solid #8e97a8!important;
  border-radius: 50%!important;
  padding: 6px 11px !important;
  background:#fff!important;
}
.bg-feature .owl-prev i,.bg-feature .owl-next i{
  color:#8e97a8!important;
}
.bg-feature .owl-carousel .owl-nav button.owl-prev:hover,.bg-feature  .owl-carousel .owl-nav button.owl-next:hover{
  background:#eee7fe!important;
  border:1px solid #eee7fe!important;
}
.bg-feature .owl-prev i:hover,.bg-feature .owl-next i:hover,
.bg-feature .owl-prev:hover i,.bg-feature:hover .owl-next i{
  color:#0a87f5!important;
}
.travel{
  background:#fff!important;
  border-radius:10px!important;
  padding:12px 20px!important;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  width: 66%;
}
.travel-img{
  width: 18% !important;
}
.travel-text{
  width: 88% !important;
  padding-left: 15px;
  font-size: 16px !important;
  font-weight: 500;
}
.travel2{
  transform: rotate(-4deg)!important;
  margin-left: 20px;
}
.travel3{
  transform: rotate(4deg)!important;
  margin-left: 12px;
  margin-top: 10px;
}
.travel4{
  background:#0286FB!important;
  color:#fff!important;
  transform: rotate(0deg)!important;
  margin-left: 12px;
  margin-top: -3px;

}
.gallery-wave{
  margin-top:-4%!important;
  padding-bottom: 30px!important;
}
.agent-first-section{
  padding: 75px 0;
  overflow: hidden;
}

.antigravity-wave{
  display: flex;
  justify-content: center;
  gap: 40px;
  list-style: none;
}

.antigravity-wave li{
  will-change: transform;
}

.antigravity-wave img{
  width: 90px;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.15));
}
.bg-how-works{
  background:#faf5f2!important;
}
.work-icon{
  width:12%!important;
}
.work-text{
  padding-left:12px!important;
  font-size:16px!important;
  font-weight:500!important;
}
.steppill{
  border-bottom:2px solid #dedddc!important;
}
/* .steppill li{
  border-bottom:2px solid #dedddc!important;
} */
.steppill .nav-link.active{
  border-bottom: 4px solid #0284f5!important;
  border-radius: 0!important;
  background-color:unset!important;
  padding: 20px;
  color:#11243E!important;
  font-weight:600!important;
  font-size:16px!important;
}
.steppill .nav-link{
  color:#d1cfce!important;
  font-size:16px!important;
  font-weight:600!important;
}
.center-card {
  /* background: linear-gradient(  180deg,  #F7FBFF 0%,  #e1f1ff 100%); */
  background: linear-gradient(
    to bottom,
    #fff 0%,
    #DEF0FF 100%
  );
  border-radius: 10px;
  padding: 60px 30px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.center-card .common-title{
  width: 40%;
  text-align: center;
  margin: 0 auto;
}
.pill-wrapper{
  position:absolute!important;
}
.pillbox {
  background: #ffffff;
  padding: 14px 26px;
  border-radius: 50px;
  box-shadow: 0 10px 19px rgba(0, 0, 0, 0.1);
  font-weight: 500;
  font-size: 16px!important;
  color: #11243E!important;
  min-width:256px!important;
  text-align: center!important;
}
.pill-top {
  top: -25px;
  left: 50%;
  transform: translateX(-50%)!important;
}
.pill-left-1 { 
  top: 80px;
  left: -106px; 
}
.pill-left-2 {
  top: 183px; 
  left: -106px; 
}   
.pill-right-1 { 
  top: 80px; 
  right: -106px; 
}
.pill-right-2 {
  top: 183px; 
  right: -106px; 
}
.pill-bottom {
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%)!important;
}
.emoji-top-left { 
  top: -25px;
  left: 56px;
}
.emoji-top-right {
  top: -16px;
  right: 32px; 
  }
.emoji-bottom-left { 
  bottom: -6px;
  left: -92px; 
}
.emoji-bottom-right { 
  bottom: -34px;
  right: -71px;
}
.emoji img{
  width:90%!important;
}
.bg-marquee {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100%;
}
.marquee-content {
  display: inline-block;
  animation: marquee-scroll 50s linear infinite;
  white-space: nowrap;
  font-size: 60px!important;
  margin: 0;
  color:#ebebed!important;
}
@keyframes marquee-scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}  
.marquee-content img{
  width:55px!important;
}
.mobile-frame{
  background:url("../images/phone-frame.png")no-repeat!important;
  background-size: 350px!important;
  background-position: top center!important;
}
#owl-others.owl-carousel .owl-item img{
  width: 60%!important;
  margin-left: auto;
  margin-right: auto;
}
.phonelist li i{
  color:#0286FB!important;
  font-size:14px!important;
}
.phonelist li{
  font-size: 16px!important;
  padding-bottom:10px!important;
  color:#11243E!important;
  font-weight: 500;
}
.list-group-item{
  background:unset!important;
  border:none!important;
}
.bg-footer{
  background: url("../images/footer-down.png")no-repeat!important;
  height:825px!important;
  background-size: cover!important;
}
.mt-18{
  margin-top:18%!important;
}
.commn-para-footer{
  font-size:20px!important;
}
.footerpics img{
  width:75%!important;
}
.footerpic1{
  top: 30%;
  left: 16%;
}
.footerpic2{
  right: 9%;
  top: 25%;
}
.footerpic3{
  top:54%;
  left:20%;
}
.footerpic4{
  top: 55%;;
  right:10%;
}
.tripsillarge{
  padding-top:6%!important;
}
footer li a,.copyright{
  color:#fff!important;
  font-size:14px!important;
}
.cy{
  margin-top: -5%!important;
}
@media (max-width: 768px) {
  body,.bg-tripsillay{
    overflow-x: hidden!important;
  }
  .bg-header{
    position:relative!important;
  }
  #owl-plan .owl-item img{
    width:15%!important;
  }
  .banner-head{
    font-size:28px!important;
    text-align: center!important;
  }
  .top-stripban,.bg-banner .common-para{
    text-align: center!important;
  }
  .navbar-toggler:focus{
    box-shadow: none!important;
  }
  .navbar-collapse {
    background:#fff!important;
    border-radius:10px!important;
  }
  .bg-banner{
    height:720px!important;
    background-size: 100% !important;
  }
  .img-2{
    top:-8px!important;
  }
  .img-3{
    top: 136px!important;
    left: 130px!important;
  }
  .img-4{
    bottom: -442px!important;
    left: -3%!important;
  }
  .bg-banner::after{
    /* left: -10%!important;
    bottom: -10%!important;
    width: 100%!important;
    height: 50px!important;
    transform: rotate(0deg)!important; */
    content:unset!important;
  }
  .pill-wrapper{
    position:relative!important;
  }
  .common-title {
    font-size: 26px !important;
  }
  .tripsil-leftborder{
    border:unset!important;
  }
  .owl-nav{
    right:0!important;
  }
  .travel{
    margin:0 auto!important;
    width: 85%!important;
  }
  .antigravity-wave{
    gap:unset!important;
  }
  .steppill li{
    width: 100% !important;
  margin: 0 auto;
  }
  .steppill li button{
    width:100%!important;
  }
  .center-card .common-title {
  width: 80%;
  }
  .pillbox{
   padding: 5px 10px!important;
   min-width:unset!important;
   width: 100% !important;
  }
  .pill-top,  .pill-left-1 , .pill-left-2 , .pill-right-1, .pill-right-2 , .pill-bottom{
  top:unset!important;
  left:unset!important;
  right:unset!important;
  bottom:unset!important;
  transform:unset!important;
}
.center-card{
  padding:30px!important;
}
.bg-marquee{
  padding-top:22px!important;
}
.mobile-frame{
  background-size:330px!important;
}
#owl-others.owl-carousel .owl-item img {
  width: 94% !important;
}
.bg-footer{
  height:unset!important;
}
.mt-18 {
  margin-top: 40% !important;
}
.footerpic1 {
  top: 13%!important;
  left: -12%!important;
}
.footerpic2 {
  right: -9%!important;
  top: -1%!important;
}
.footerpic3 {
  top: 48%!important;
  left: -16%!important;
}
.footerpic3 img,
.footerpic4 img{
  width:45%!important;
}
.footerpic4 {
  top: 33%!important;
  right:-10%!important;
}
.tripsillarge {
  padding-top: 12% !important;
}
.owl-nav{
  position:unset!important;
}
  .lay{
    height:100px!important;
  }
  .pill-wrapper {
    position: static;
    margin: 12px auto;
    text-align: center;
  }

  .emoji {
    display: none;
  }

  .center-title {
    font-size: 32px;
  }
}
@media(min-width:1399px) and (max-width:1420px){
  .bg-banner .common-para{
    margin-right:74px!important;
  }
  .bg-banner::after{
    bottom: -30%!important;
    transform: rotate(-7deg)!important;
  }
  #owl-plan .owl-item img{
    width:15%!important;
  }
  .common-para,.emojitext{
    font-size: 20px!important;
  }
  .feature-box{
    height:446px!important;
  }
  .bg-how-works .common-para{
    padding-right:unset!important;
  }
  .bg-content .common-title{
    width: 40%!important;
    font-size: 48px !important;
  }
  .mobile-frame{
    background-size: 300px !important;
  }
  #owl-others.owl-carousel .owl-item img{
    width:45%!important;
  }
  .bg-footer{
    height: 900px !important;
  }
}
@media(min-width:1890px) and (max-width:1940px){
  body{
    overflow-x: hidden!important;
  }
  .bg-banner{
    background-size:40%!important;
  }
  .bg-banner::after{
    bottom:-57%!important;
    width: 111%!important;
  }
  .img-3{
    left:250px!important;
  }
  .img-2 {
    top: -98px!important;
    right: -212px!important;
  }
  .common-para,.emojitext,.nav-item a{
    font-size: 20px!important;
  }
  .featurehead{
    font-size:25px!important;
  }
  .feature-box ul li {
    font-size: 20px !important;
  }
  .feature-box{
    min-height:475px!important;
  }
  .center-card .common-title {
    width: 39%!important;
  }
  #owl-others.owl-carousel .owl-item img {
  width: 52% !important;
  }
  .mt-18 {
  margin-top: 25% !important;
  }
  .bg-footer{
    height:990px!important;
  }
}
@media(min-width:1421px) and (max-width:1520px){
  .img-2 {
    top: -113px!important;
    right: 116px!important;
  }
  .m-btn .col-md-4{
    width: 28.333%!important;
  }
  .why-tripsil .common-title{
    padding-right:20%!important;
  }
  #owl-others.owl-carousel .owl-item img {
  width: 53% !important;
  }
  .bg-footer{
    height:895px!important;
  }
}