.btn {
  background: transparent;
  border: none;
  font-family: var(--font-laila);
  font-weight: 700;
  font-size: 1rem;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-align: center;
  border-radius: 4px;
	gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
	transition: all .3s ease-in-out;	
	
  &.primary {
    background: var(--primary-color);
    color: white;
	  
	  &:hover{
		  background: var(--secondary-color)
	  }
  }

  &.outline {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
	  
	  &:hover{
		 background: var(--secondary-color);
		  color: #fff;
		  border-color: var(--secondary-color);
	  }
  }

  &.secondary {
    background: var(--secondary-color);
    color: #fff;
	    &:hover{
		  background: var(--primary-color);
		  
	  }
  }

  &.secondary-outline {
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
	  
	  &:hover{
		  background: var(--primary-color);
		  color: #fff;
		  border-color: var(--primary-color);
		  
	  }
  }
}

.bold {
  font-weight: bold;
}

.text-xs {
  font-size: 0.694rem;
}

.text-sm {
  font-size: 0.833rem;
}

.text-md {
  font-size: 1.2rem;
}

.text-lg {
  font-size: 1.33rem;
}

.text-xl {
  font-size: 2.074rem;
}

.text-2xl {
  font-size: 2.488rem;
}

.text-3xl {
  font-size: 2.986rem;
}

.text-4xl {
  font-size: 72px;
}

.text-primary {
  color: var(--primary-color);
}

.text-secondary {
  color: var(--secondary-color);
}

.text-white {
  color: white;
}

.text-dark{
  color: #000;
}

.text-bold {
  font-weight: 700;
}

.text-semibold{
	font-weight: 600;
}

.text-center {
  text-align: center;
}
.bg-primary {
  background: var(--primary-color);
}

.bg-secondary{
	background: #EEECF9;
}

.bg-white {
  background: #ffffff;
}

.heading {
  font-family: var(--font-secondary);
  font-size: 2.986rem;
  font-weight: 700;
  color: var(--primary-color);
}

.card {
  	width: 31.33%;
	max-width: 520px;
  display: flex;
  flex-direction: column;
  position: relative;
  gap: var(--md);
  .image-area {
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
		transition: all .5s ease-in-out;
    }
  }
	
	&:hover img{
		transform: scale(1.15);
	}
}

.v-card {
  	width: 31.33%;
	max-width: 520px;
  display: flex;
  flex-direction: column;
  position: relative;
  gap: var(--md);
  border-radius: 8px;
  overflow: hidden;
  .image-area {
    width: 100%;
    aspect-ratio: 9/16;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
		transition: all .5s ease-in-out
    }
  }

  .content-area {
    position: absolute;
    width: 100%;
    height: 100%;

    .text-area {
      background-color: rgba(255, 55, 95, 0.75);
      backdrop-filter: blur(8px);
      width: 100%;
      min-height: 88px;
      color: #ffffff;
      padding: 16px;
    }
  }
	
	&:hover img{
		transform: scale(1.15);
	}
}

.divider {
  border: 1px solid #b3b3b3;
}

.d-none{
	display: none !important;
}

.sub-title{
	font-size: 1.33rem;
	line-height: 2rem;
}


@media (max-width: 576px) {
	
	.px-wrapper{
		padding-left: 8vw !important;
		padding-right: 8vw !important;
	}
	.d-sm-none {
		display: none !important;
	}
	
	.d-sm-block{
		display: inline-flex !important;
	}
	
	.heading{
		font-size: 1.78rem;
	}
	
}