@font-face {
  font-family: 'Josefin Sans';
  src: url('../fonts/JosefinSans-Regular.woff2') format('woff2'),
       url('../fonts/JosefinSans-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
    font-family: 'DM Sans Regular';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/DMSans-Regular.woff') format('woff'),
}
a{
    text-decoration: none;
}
:root {
    --white:#fff;
    --blue-one:#4E42DB;
    --blackone:#232233;
    --greyone:#6C6C72;
    --violet:#170F49;
}
img {
	max-width: 100%;
}
.pd-custom{
    padding: 5rem 0rem;
}
.clr-w{
    color: var(--white);
}
.clr-blue{
    color: var(--blue-one);
}
.clr-black{
    color: var(--blackone);
}
.clr-grey{
    color:var(--greyone)
}
.clr-vio{
    color:var(--violet)
}
.txt-up{
    text-transform: uppercase;
}
body,html{
    font-family: 'Josefin Sans';
} 

.social-wrap-bg{
    background-color: var(--blue-one);
}
.socail-ico-gap{
    gap:30px;
}
.nav-wrap{
    background-color: var(--white);
}
.navbar-nav .nav-item .nav-link{
    color: var(--blackone);
    text-transform: uppercase;
    margin-right: 18px;
}
.navbar-nav .nav-item .nav-link.active{
    color: var(--blue-one);
    text-decoration: underline;
}
.theme-btn {
    background-color: var(--blue-one);
    color: var(--white);
    border-radius: 7px;
    padding: 0.8rem 1.5rem;
    border: none;
	transition:.3s ease;
}
.theme-btn:hover {
    background-color: #000000;
    color: var(--white);
}
.border_box {
    border: 14px solid #7572ff;
    background-color: transparent;
    padding: 1.5rem;
    padding-right: 0rem;
    padding-left: 0rem;
}
.border_box .inner {
    background-color: var(--white);
    transform: translate(-66px, 0px);
    width: 645px;
}
.banner-big{
    padding:8rem 0rem;
    background-image: url('../img/banner-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.img-fluid-fam {
    width: 77%;
    margin-left: auto;
    display: block;
}
.inner{
    padding: 3rem;
}
.inner h1{
    text-transform: uppercase;
    font-weight: bold;
}
.about-us{
    background-color: var(--white);
}
.abt-head{
    max-width: 65%;
    margin: 0 auto;
}
.abot-points ul{
    list-style: none;
    margin: 0;
    padding: 0;
    gap:40px;
}
.abot-points ul li{
    padding: 2rem 1rem;
    border-radius: 10px;
    box-shadow: 0px 0px 11px -2px rgb(0 0 0 / 13%);
}
.abot-points ul li div {
    gap: 20px;
}
.logo-img-3 img{
    width: 90px;
}
.abot-points ul li p{
    padding-left: 2.7rem;
}
.app-feature {
    background-image: url('../img/app-feature-bg.png');
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
}
.text-right{
    text-align: right;
}
.app-feature .box-left{
    margin-top: 12rem;
}
.app-feature .box-left .text-right:nth-child(2){
    margin-top: 9rem;
}
.app-feature .box-right{
    margin-top: 18rem;
}
.app-feature .box-right div:nth-child(2){
    margin-top: 13rem;
}

.interface-wrap{
    
}
.interface-list div:last-child{
	margin-left:15px;
}
.owl-item .item{
    opacity: 0.4;
    transform: scale(0.95);
}

.owl-item.center .item{
    transform: scale(1)!important;
    opacity:1!important;
}
.box-rating{
    background-color: var(--blue-one);
    border-radius: 8px;   
}
.box-rating *{
    margin: 0;
}
.box-rating{
    display: flex;
    flex-direction: column;
    gap:15px;
    align-items: center;
    text-align: center;
    justify-content: center;
    padding: 1.5rem 0rem;
}
.testimon{
    background-image: url('../img/testimon-bg.png');
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
}
.price-wrap{
    background-color:#f7f7fc;
     box-shadow: 0px 0px 11px -2px rgb(0 0 0 / 13%);
     border-radius: 20px;
     overflow: hidden;
}
.price-wrap .plan-left {
    width: 50%;
    background: #fff;
    padding: 3rem;
}
.plan-right{
    width: 50%;
   background-color: transparent;
    padding: 3rem;
    padding-right: 0px;
}
.ft-basic{
    font-size: 20px;
}
.plan-left .display-6{
    font-weight: 400;
}
.gets {
    width: 100%;
    display: block;
    background: var(--blue-one);
    text-align: center;
    color: #fff;
    border-radius: 50px;
    padding: 1rem;
    margin-top: 1rem;
}
.footer {
    background-color: #232233;
    padding-top: 0rem;
    padding-bottom: 2.5rem;
}
.tran-box h2{
    color:#4B4B4B;
    text-align: center;
    margin-bottom: 15px;
}
.tran-box {
    background-color: #fff;
    border-radius: 30px;
    padding: 3rem;
    box-shadow: 0px 0px 20px 10px rgb(0 0 0 / 13%);
    transform: translate(0px, -98px);
}
.pricing{
    padding-bottom:11rem;
}
.foot-social {
    color: #fff;
    display: flex;
    gap: 32px;
    font-size: 25px;
    align-items: center;
    /* justify-content: space-between; */
}
.foot-social a:hover{
    color:#4E42DB;
}
.quick-wrap{
    padding-left: 3rem;
}
.newsl-wrap{
    position: relative;
}
.newsl-wrap button {
    position: absolute;
    background: none;
    border: none;
    right: -2px;
    top: 2px;
    z-index: 1;
}
.newsl-wrap input{
    width: 100%;
    border-radius: 4px;
    border:none;
    color:var(--greyone);
    height: 53px;
    padding: 0rem 2rem;
}
.copy-right {
    color: #ffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 3rem;
    margin-top: 3rem;
    border-top: 1px solid #fff;
}
.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none;
}
.navbar-toggler i{
    font-size: 32px;
}
/* swpier */

   .swiper-container {
        width: 90%;
        max-width: 100%;
        padding-top: 50px;
        padding-bottom: 80px;
        overflow: hidden;
        margin: auto;
    }

    .swiper-slide {
      background: #fff;
      border-radius: 12px;
      padding: 30px 20px;
      text-align: center;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      width: 300px;
      transition: transform 0.4s ease;
    }

    .swiper-slide img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      object-fit: cover;
      margin-bottom: 20px;
    }

    .swiper-slide h3 {
      font-size: 20px;
      margin: 0;
    }

    .swiper-slide span {
      color: #666;
      font-size: 14px;
      font-weight: 500;
    }

    .swiper-slide p {
      font-size: 14px;
      color: #333;
      margin-top: 15px;
      line-height: 1.6;
    }

    .swiper-pagination {
      bottom: 20px !important;
    }

    .cont-hide{
        overflow: hidden;
    }
	
			.interface-list div {
			text-align: center;
			}
	@media (min-width: 1025px){
		.interface-list {
			display: flex;
			justify-content: center;
			}
	}