.bg-green
{
    background-color: var(--text-color-2);
}
.bg-button
{
    background-color: var(--button);
}
.bg-oragne
{
    background-color: var(--text-color);
}
.textOrange
{
    color: var(--text-color);
    
}
.maintitle
{
  font-family: "Yatra One", system-ui;
  color: var(--maintitle);

}
.mainTitle{
  font-family: "Yatra One", system-ui;
  color: var(--button);
}

.subtitle
{
  color: var(--subtitle);
  font-family: "Inter", sans-serif;
  font-size: 20px;
}
.inter
{
  font-family: "Inter", sans-serif;
}
.bennerfont
{
  color: white;
  font-family: "Rye", serif;
  letter-spacing: .9px;
  
}
.btnCustome
{
  background-color: var(--button);
  color: white;
  border: none;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
}
.btnCustome:hover
{
  background-color:var(--maintitle);

}
img
{
    width: 100%;
}
.mt-100
{
    margin-top: 100px;
}
.carousel-caption {
    position: absolute;
    top: 50%;
    left: 50%;   
    transform: translateY(-20%);   
      }
.carousel-indicators [data-bs-target]
{
    width: 15px!important;
    height: 15px!important;
    border-radius: 50%;   
    margin: 0 5px!important;
    
}
.carousel-control-prev-icon ,.carousel-control-next-icon
{
  display: none!important;
}

.navbar-brand
{
  font-family: "Inter", sans-serif;
  font-size: 25px!important;
}
.nav-link
{
  font-family: "Inter", sans-serif;
  font-size: 18px!important;
  font-weight: 500!important;
  color: var(--maintitle)!important;
  transition: .5s;
}
.nav-link:hover
{
   color: var(--button) !important;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}
.slick-next
{
  background-color: var(--button)!important;
  width: 50px!important;
  height: 50px!important;
  border-radius: 50%!important;
  z-index: 10!important;
  right: -8%!important;

}
.slick-prev
{
  background-color: var(--button)!important;
  width: 50px!important;
  height: 50px!important;
  border-radius: 50%!important;
  z-index: 10!important;
  left: -8%!important;

}
.slider-thumb::before {
	position: absolute;
	content: "";
	right: 10%;
  opacity: 0.5;
	top: 60%;
	width: 450px;
	height: 450px;
	background-color: var(--text-color-2) !important;
	border-radius:32% 68% 0% 100% / 44% 98% 2% 56% ;
	will-change: border-radius, transform, opacity;
	animation: sliderShape 5s linear infinite;
	display: block;
	z-index: -1;
	-webkit-animation: sliderShape 5s linear infinite;
}
@keyframes sliderShape{
  0%,100%{
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
  34%{
      border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
    transform:  translate3d(0,5px,0) rotateZ(0.01deg);
  }
  50%{
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
  67%{
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
    transform: translate3d(0,-3px,0) rotateZ(0.01deg);
  }
}


/*------------------------------- pattern--------------------------- */
.pattern {
  width: 100%;
  height: 100%;
  background: var(--text-color);
  position: relative;
  overflow: hidden;
z-index: 1;
}
.pattern::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: -1;  
  background: var(--theme-color);
  background: radial-gradient(circle,var(--theme-color) 10%, transparent 30%),
    radial-gradient(circle, transparent 10%, var(--theme-color) 20%);
  background-size: 30px 30px;
}
/*---------about us----------*/
.pt-110
{
  margin-top: 110px;
}
.contentLeft,
.contentRight{
    width: 100%;
}
.contentLeft .row{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
}
.contentLeft .row .imgWrapper{
    width: 100%;
    height: 450px;
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.15);
    
}
.contentLeft .row .imgWrapper img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    transition: 0.3s all ease-in-out;
}
.contentLeft .row .imgWrapper:hover img{
    transform: scale(1.5);
}
.contentLeft .row .imgWrapper:nth-child(odd){
    transform: translateY(-20px);
}
.contentLeft .row .imgWrapper:nth-child(even){
    transform: translateY(20px);
}
.contentRight .content{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}
.contentRight .content h4{
    font-size: 22px;
    font-weight: 400;
    color: #d35400;
}
.contentRight .content h2{
    font-size: 40px;
    color: #1e272e;
}
.contentRight .content p{
    font-size: 16px;
    color: #343434;
    line-height: 28px;
    padding-bottom: 10px;
}
.contentRight .content a{
    display: inline-block;
    text-decoration: none;
    font-size: 16px;
    letter-spacing: 1px;
    padding: 13px 30px;
    color: #fff;
    background: var(--button);
    border-radius: 8px;
    user-select: none;
}
@media(max-width: 768px){
    .container{
        grid-template-columns: 1fr;
    }
    .contentLeft .row{
        grid-template-columns: repeat(2, 1fr);
    }
    .contentLeft .row .imgWrapper{
        height: 250px;

    }
    .contentRight .content h4{
        font-size: 18px;
    }
    .contentRight .content h2{
        font-size: 30px;
    }
}
/************product***********/

.product-grid{
  text-align: center;
}
.product-grid .product-image{
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.30);
}
.product-grid .product-image a.image{ display: block; }
.product-grid .product-image img{
  width: 100%;
  height: auto;
}
.product-image
{
  transition:0.5s ease-in-out;
  max-width: 100%;
  transform: scale(1);

}
.product-image:hover
{
  transform: scale(1.07);
}

@media screen and (max-width: 990px){
  .product-grid{ margin: 0 0 30px; }
  
}


/*---------------- service--------------------- */

.high
{
  font-weight: 500;
  color:var(--maintitle);
  font-family: "Inter", sans-serif;
  font-size: 18px;
 
}
span, a, a:hover {
display: inline-block;
text-decoration: none;
color: inherit;
}
.section-head {
margin-bottom: 60px;
}

p.service_text{
color:#cccccc !important;
font-size:16px;
line-height:28px;
text-align:center;    
}
.section-head p, p.awesome_line{
color:#818181;
font-size:16px;
line-height:28px;
text-align:center;  
}
.item {
background: #fff;
text-align: center;
padding: 30px 25px;
height: 250px;
-webkit-box-shadow:0 0px 25px rgba(0, 0, 0, 0.07);
box-shadow:0 0px 25px rgba(0, 0, 0, 0.07);
border-radius: 20px;
border:5px solid rgba(0, 0, 0, 0.07);
margin-bottom: 30px;
-webkit-transition: all .5s ease 0;
transition: all .5s ease 0;
transition: all 0.5s ease 0s;
}
.item:hover{
background:var(--button);
color: white;
box-shadow:0 8px 20px 0px rgba(0, 0, 0, 0.2);
-webkit-transition: all .5s ease 0;
transition: all .5s ease 0;
transition: all 0.5s ease 0s;
}
.item:hover .item, .item:hover span.icon{
background:#fff;
border-radius:10px;
-webkit-transition: all .5s ease 0;
transition: all .5s ease 0;
transition: all 0.5s ease 0s;
}
.item:hover h5, .item:hover p, .item:hover h4{
color:#fff;
-webkit-transition: all .5s ease 0;
transition: all .5s ease 0;
transition: all 0.5s ease 0s;
}
.item .icon {
font-size: 40px;
margin-bottom:25px;
color: var(--button);   
width: 90px;
height: 90px;
line-height: 96px;
border-radius: 50px;
}

.item .feature_box_col_four{
background:rgba(0, 108, 255, 0.15);
color:#f91942
}

.item p{
font-size:15px;
line-height:26px;
}
.item h6 {
margin-bottom:20px;
color:#2f2f2f;
}



/* ------------------------ */
.section-title {
  text-align: center;
 
}
.pro {
  font-size: 40px;
  font-weight: 600;
  text-transform: capitalize;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
  color:var(--maintitle);
  text-align: center;  
}
.pro::before {
  content: "";
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background:var(--button);
  bottom: 1px;
  left: calc(50% - 60px);
 
}
.pro::after {
  content: "";
  position: absolute;
  display: block;
  width: 40px;
  height: 4px;
  background: var(--button);
  bottom: 0;
  left: calc(50% - 20px);
}
/* -------------------------media query---------------------------- */
@media screen and (max-width: 768px) {
  .logo
  {
    height: 50px!important;
  }
.navbar-toggler:hover
{
 background-color: var(--button)!important;
 color: white!important;
}
.carousel-caption
{
  top: 45%!important;
  
}
.carousel-caption h2
{
  font-size: 40px!important;
}
.contentLeft
{
  margin-top: 50px;
}
.mt-100
{
  margin-top: 30px;
}
.slick-next, .slick-prev
{
  display: none!important;
}
.para-desc
{
  font-size: 18px!important;
}
}