/*
 Theme Name:   XStore Child
 Theme URI:    http://8theme.com/
 Description:  XStore Child Theme
 Author:       8theme
 Author URI:   http://8theme.com
 Template:     xstore
 Version:      0.0.4
 Text Domain:  xstore-child
*/

/********slick slider*********/
.slick-container{
	display: flex !important;
}
.slick-container span{
	flex:1;
}
.feature-info h4 {
    display: inline;
}
.feature-info i {
    font-size: 25px!important;
    color: #00416B !important;
}
.single-image img{
	border-radius: 15px;
}

/*************product tour********************/

 /* Initially hide all content sections except the first one */
.tour-content {
    display: none;
}

  /* Display the first content section */
#tour-content1 {
    display: block;	
}
/*general styling of tour container*/
div#tour-container {
    margin: 35px 0px;
}

.tour-content {
    margin-top: -2px;
    border: 2px solid #dbdbdb;
    padding: 50px;
    border-radius: 30px;
	box-shadow: 0 6px 25px 0 rgba(1, 1, 1, 0.12);
	margin-bottom:75px;
}
.tour-content h3 {
    margin-bottom: 35px;
	font-size: 20px;
}
.tour-content a.btn.justify-content-center.align-items-center.black.medium {
    margin-top: 20px;
}
.inner-tour-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
	padding-bottom: 20px;
	width: 100%;
	flex-wrap:wrap;
	gap: 50px;
	
}
.two-thirds-col {
    display: flex;
    flex-direction: column;
	flex: 2;
	min-width: 200px;
	justify-content:space-between;
	row-gap:45px;
	
}
.one-third-col {
    flex: 1;
    display: flex;
    /***justify-content: space-between;************changed 03-11 by request*****/
	justify-content: flex-start;
    flex-direction: column;
}
.right-separator{
	border-right: 2px solid #f2f3f4;
	padding-right: 50px;
}
.left-separator{
	border-left: 2px solid #f2f3f4;
	padding-left: 25px;
}
.tour-content-item:first-child {
    margin-bottom: 35px;
}
.tour-content-box {
    width: 100%;
    display: flex;
	gap: 25px;
	flex-wrap: wrap;
}
span.tour-text {
    flex: 2;
}
span.tour-img-sm {
    flex: 1;
}
/*buttons*/
div#buttons {
    text-align: left;
	margin: 0;
}
#buttons {
    display: flex;
    flex-direction: row;
    justify-content: left;
    gap: 10px 15px;
    flex-wrap: no-wrap;
	padding-left:50px;
}
.tour-button {
    background-color: white !important;
    border: 2px solid #E5E6E7 !important;
	font-size: 16px;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
	padding-bottom:36px !important;
	width: 31%;
	
}

.tour-button:not(.active):hover {
    background: #00AEEF !important;
	outline: none !important;
	

}
.tour-button.active, .tour-button.active:hover {
    background-color: #ffffff !important;
	border-bottom: 2px solid white !important;
	z-index: 99;
	opacity: 1 !important;
	

}
.tour-button span {
    color: #004366 !important;
    text-transform: capitalize;
	font-size: 1.6em;
	line-height: 1.2;
}
.tour-button.active span {
    
	opacity: 1 !important;
   
}
.tour-button:not(.active):hover span {
    color: #ffffff !important;

}
/*images*/
.inner-tour-content img {
    border-radius: 8%;
	margin: 6px 0px;
	margin-bottom: 35px;
}


div#product-tour:target {
    padding-top: 45px;
}
@media only screen and (max-width: 480px) {
	span.tour-text p {
    font-size: 13px !important;
}
.one-third-col > p {
    font-size: 13px !important;
}
.right-separator {
    border: none;
}
.left-separator {
    border: none;
}
.tour-button span {
    font-size: 0.8em;
    line-height: 1;
}
#buttons {
    gap: 4px 2px;
    padding-left: 27px;
}
.tour-button{
	padding: 7px 15px!important;
}
}


/*****************animiations**************/
     .fadeInUp1 {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeInUp1 {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInUp1 {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 
    .fadeInUp2 {
	animation-delay: 250ms;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeInUp2 {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInUp2 {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 
    .fadeInUp3 {
	animation-delay: 500ms;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeInUp3 {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInUp3 {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 
/*********partner's sign up benefits*********/

.partner-benefits {
    display: flex;
    flex-wrap: wrap;
    column-gap: 50px;
	row-gap:50px;
}
.benefit-item {
    flex: 1 1 40%;
}
.benefit-item ul {
    list-style: none;
}
svg.ListIcon.List__itemIcon {
    margin-right: 20px;
}
.benefit-item h3 {
    font-weight: 500;
}
/************custom buttons****************/
a.btn.justify-content-center.align-items-center.green.medium.shortcode-button {
    color: darkblue;
    background: #8fc341;
    font-weight: 500;
}
a.btn.justify-content-center.align-items-center.orange.medium.shortcode-button {
    color: white;
    background: #f79322;
    font-weight: 500;
}
a.btn.justify-content-center.align-items-center.blue.medium.shortcode-button {
    color: darkblue;
    background: #00aeef;
    font-weight: 500;
}
a.btn.justify-content-center.align-items-center.green.medium.shortcode-button:hover, a.btn.justify-content-center.align-items-center.orange.medium.shortcode-button:hover, a.btn.justify-content-center.align-items-center.blue.medium.shortcode-button:hover {
    background-color: white;
    border-color: var(--et_btn-dark-br-color-hover);
    color: black;
}