@import url(font.css);
@import url(bootstrap.min.css);
@import url(all.min.css);
@import url(owl.theme.default.min.css);
@import url(owl.carousel.min.css);
@import url(slick.css);
@import url(select2.min.css);
@import url(variable.css);
@import url(animation.css);
@import url(aos.css);

/* Basic Style Start */
body, h1, h2, h3, h4, h5, h6, p, ul, ol {
  margin: 0px;
  padding: 0px;
  font-weight: normal;
}
body {
  font-family: var(--Font-Regular);
  color: var(--black);
  box-sizing: border-box;
  /* modal open - body scroll hide/show issue */
  overflow-y: overlay;
}
a {
  text-decoration: none;
  cursor: pointer;
  color: var(--black);
}
a:-webkit-any-link:focus-visible {
  outline: none;
}
img{
  width: 100%;
}
ul {
  list-style: none;
}
.all-section-space {
  margin-bottom: 30px;
}
label{
  font-size: var(--fs-16);
  line-height: 20px;
  font-family: var(--Font-Medium);
  color: var(--secondary-1);
}
p{
  font-size: var(--fs-16);
  line-height: 20px;
  font-family: var(--Font-Regular);
  color: var(--black);
}
/* Basic Style End */

/* Comman Relative Style CSS Start */
h1{
  font-size: var(--fs-110);
  line-height: 120px;
  font-family: var(--Font-Bold);
  color: var(--black);
}
.custom-container{
  max-width: 1600px;
}
.bg-primary-2{
  background-color: var(--primary-2);
}
.bg-secondary-8{
  background-color: var(--secondary-8);
}
.bg-secondary-9{
  background-color: var(--secondary-9);
}
.bg-secondary-12{
  background-color: var(--secondary-12);
}
.bg-secondary-15{
  background-color: var(--secondary-15);
}
.bg-secondary-21{
  background-color: var(--secondary-21);
}
.bg-secondary-25{
  background-color: var(--secondary-25);
}
.bg-secondary-27{
  background-color: var(--secondary-27);
}
.bg-secondary-gradient-15-23{
  background: linear-gradient(1.72deg, var(--secondary-15) 39.2%, rgb(var(--secondary-rgb-23), var(--background-color-opacity-2)) 67.94%);
}
.cmn-bottom-space{
  margin-bottom: 20px;
}
/* .cmn-left-right-space{
  padding: 0px 4.5%;
} */
.cmn-section-space{
  padding-top: 50px;
  padding-bottom: 20px;
}
.cmn-top-bottom-space{
  padding-top: 100px;
  padding-bottom: 70px;
}
.cmn-top-bottom-50{
  padding-top: 50px;
  padding-bottom: 30px;
}
.cmn-top-bottom-70{
  padding-top: 70px;
  padding-bottom: 60px;
}
.cmn-top-bottom-80{
  padding-top: 80px;
  padding-bottom: 80px;
}
.cmn-top-bottom-90{
  padding-top: 90px;
  padding-bottom: 40px;
}
.relative-box{
  position: relative;
}
.cmn-heading-content-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cmn-heading-content-box .cmn-heading-column{
  margin-bottom: 30px;
}
.cmn-heading-content-box .cmn-heading-column:first-child{
  padding-right: 40px;
}
.cmn-heading-content-box h2{
  font-size: var(--fs-40);
  line-height: 44px;
  font-family: var(--Font-Medium);
  color: var(--black);
  text-transform: uppercase;
}
.cmn-heading-content-box h2 span{
  text-transform: capitalize;
  color: var(--primary-2);
  margin-left: 4px;
}
.cmn-heading-content-box h2 span img{
  width: 22px;
  margin-left: 3px;
}
.cmn-heading-content-box a{
  font-size: var(--fs-20);
  line-height: 24px;
  font-family: var(--Font-Bold);
  letter-spacing: 0.48px;
  background: linear-gradient(90deg, var(--secondary-3) -0.01%, var(--secondary-4) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--transparent);
  white-space: nowrap;
}
.cmn-heading-content-box a > i{
  margin-left: 8px;
}
.place-image{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  pointer-events: none;
  z-index: -1;
}
.place-image img{
  height: 100%;
  object-position: top;
  object-fit: cover;
}
.clamp-text-line-3{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.inline-element-content{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.inline-element-content > div{
  margin-bottom: 15px;
}
.inline-element-content > div:not(:last-child){
  margin-right: 8px;
}
.password-description-list{
  padding-left: 20px;
}
.password-description-list .password-description-list-item{
  font-size: var(--fs-16);
  line-height: 20px;
  font-family: var(--Font-Medium);
  color: var(--black);
  list-style-type: disc;
}
.password-description-list .password-description-list-item:not(:last-child){
  margin-bottom: 8px;
}
.password-description-list .password-description-list-item.invalid{
  color: var(--secondary-19);
}
.password-description-list .password-description-list-item.valid{
  color: var(--secondary-22);
}
.cmn-red-heading-content-box{
  margin-bottom: 50px;
}
.cmn-red-heading-content-box .text-heading-2{
  font-size: var(--fs-44);
  line-height: 54px;
  font-family: var(--Font-Medium);
  color: var(--primary-2);
}
.cmn-blue-heading-content-box{
  margin-bottom: 40px;
}
.cmn-blue-heading-content-box .text-heading-1{
  font-size: var(--fs-32);
  line-height: 38px;
  font-family: var(--Font-Bold);
  color: var(--secondary-31);
}
.cmn-blue-heading-content-box .text-heading-1 + p{
  margin-top: 15px;
}
.cmn-blue-heading-content-box p{
  font-size: var(--fs-16);
  line-height: 24px;
  font-family: var(--Font-Regular);
  color: var(--secondary-31);
}
.gutter-160{
  --bs-gutter-x: 160px;
  --bs-gutter-y: 160px;
}
.gutter-40{
  --bs-gutter-x: 40px;
  --bs-gutter-y: 40px;
}
.gutter-20{
  --bs-gutter-x: 20px;
  --bs-gutter-y: 20px;
}
.gutter-70{
  --bs-gutter-x: 70px;
  --bs-gutter-y: 70px;
}
/* Comman Relative Style CSS End */

/* Header - Relative Style CSS Start */
.header-section{
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background: linear-gradient(225deg, var(--secondary-6) 0%, var(--secondary-7) 100%);
  box-shadow: var(--box-shadow-1);
}
.header-section.fixed-top{
  /* background-color: var(--white); */
  /* box-shadow: var(--box-shadow-1); */
  animation: slideIn 1000ms ease-in-out;
}
.header-section .navbar{
  height: 80px;
  padding: 0px;
}
.header-section .navbar .navbar-brand{
  position: absolute;
  width: 210px;
  height: 117px;
  display: flex;
  place-self: flex-start;
  align-items: center;
  background-color: var(--white);
  padding: 4px 20px;
  border-radius: 0px 0px 16px 16px;
  box-shadow: var(--box-shadow-2);
  z-index: 1;
}
.header-section .navbar-toggler{
  border: none;
  padding: 0px;
  border-radius: 0px;
}
.btn-line-close{
  width: 50px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--white);
  background: var(--transparent);
  color: var(--white);
  border-radius: 4px;
  padding: 3px 8px;
}
.header-section .navbar-toggler .login-with-button .login-icon a i{
  color: var(--white);
  margin-right: 10px;
}
.header-section .navbar-toggler .login-with-button .btn-line-close{
  border-color: var(--white);
  filter: brightness(0) invert(1);
}
.navbar-toggler:focus{
  box-shadow: none;
}
.header-section .navbar .navbar-nav .nav-item{
  display: flex;
  align-items: center;
}
.header-section .navbar .navbar-nav .nav-item .nav-link{
  font-size: var(--fs-16);
  font-family: var(--Font-Medium);
  line-height: 24px;
  color: rgb(var(--white-rgb), var(--background-color-opacity-1));
  margin: 8px 15px;
  padding: 0px;
}
.header-section .navbar .navbar-nav .nav-item .nav-link.active{
  font-size: var(--fs-20);
}
.header-section .navbar .navbar-nav .nav-item .nav-link.active,
.header-section .navbar .navbar-nav .nav-item .nav-link:hover{
  color: var(--white);
}
.header-section .navbar .menu{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  padding-left: 210px;
}
.header-section .navbar .menu .collapse{
  justify-content: space-between;
}
.header-section .responsive-view{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.header-section .navbar .menu .right-menu-content{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.header-section .navbar .menu .right-menu-content .navbar-nav .nav-item .nav-link{
  font-size: var(--fs-18);
  color: var(--white);
}
.header-section .navbar .menu .right-menu-content .navbar-nav .nav-item:last-child .nav-link{
  font-size: var(--fs-18);
  color: var(--white);
  background-color: var(--primary-2);
  border-radius: 30px;
  padding: 8px 15px;
  margin: 0px;
  transition: all 0.5s ease-in-out;
}
.header-section .navbar .menu .right-menu-content .navbar-nav .nav-item:last-child .nav-link:hover{
  background-color: var(--white);
  color: var(--primary-2);
  transition: all 0.5s ease-in-out;
}
.header-section .login-with-button{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.header-section .login-with-button .login-icon{
  margin-right: 15px;
}
.callapse-menu-content{
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.header-section .select-container .select2-container{
  width: fit-content !important;
}
.header-section .select-container .select2-container .selection .select2-selection.select2-selection--single{
  position: relative;
  min-width: fit-content;
  background-color: var(--transparent);
  border: none;
  padding-right: 6px;
}
.header-section .select-container .select2-container .selection .select2-selection.select2-selection--single .select2-selection__rendered{
  max-width: 150px;
  font-size: var(--fs-16);
  font-family: var(--Font-Medium);
  line-height: 24px;
  color: var(--white);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.header-section .select-container .select2-container .selection .select2-selection.select2-selection--single .select2-selection__arrow b{
  border-color: var(--white) var(--transparent) var(--transparent) var(--transparent);
}
/* Header - Relative Style CSS End */

.banner-content-box{
  padding: 50px 0px 30px 0px;
}
.banner-content-box p{
  font-size: var(--fs-26);
  font-family: var(--Font-Medium);
  line-height: 30px;
  color: var(--black);
  margin-top: 40px;
}
.banner-section{
  padding-top: 50px;
  overflow: hidden;
}
.banner-section .mobile-image-box{
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  width: 50%;
}
.banner-section .mobile-image-box .image-content-box::before{
  position: absolute;
  content: "";
  top: 0px;
  left: 50%;
  right: 0px;
  bottom: 0px;
  width: 770px;
  height: 770px;
  border-radius: 100%;
  transform: translateX(-50%);
  filter: blur(250px);
  background-color: rgb(233, 0, 0, 20%);
  z-index: -1;
  overflow: hidden;
}
.banner-section .mobile-image-box .image-content-box{
  margin: 0px auto;
}
.banner-section .mobile-image-box .image-content-box img{
  position: absolute;
  top: 50px;
  left: 0px;
  bottom: 0px;
  height: calc(100% - 180px);
  object-fit: contain;
}
.banner-section .badge-image-list{
  margin-top: 60px;
}
.badge-image-list{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  box-sizing: border-box;
  margin: 0px -10px;
}
.badge-image-list-item{
  max-width: 220px;
  padding: 0px 10px;
  margin-bottom: 15px;
}
.badge-image-list .badge-image-list-item a{
  display: block;
  border: 1px solid rgb(var(--white-rgb), var(--background-color-opacity-2));
  border-radius: 4px;
  overflow: hidden;
}
.get-started-section{
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  padding: 40px 0px 10px;
}

.btn-container{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.btn-container.btn-center{
  justify-content: center;
}
.btn-container.btn-end{
  justify-content: flex-end;
}

.btn-container .btn{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-20);
  line-height: 24px;
  font-family: var(--Font-Bold);
  transition: all 0.5s ease-in-out;
}
.btn-container .btn:first-child:active{
  border: none;
}
.btn-container .btn:hover{
  transition: all 0.5s ease-in-out;
}

.btn-container .btn.btn-white{
  min-width: 190px;
  min-height: 50px;
  font-size: var(--fs-16);
  line-height: 22px;
  color: var(--black);
  border-radius: 0px;
  background-color: var(--white);
}
.btn-container .btn.btn-white:hover{
  background-color: var(--black);
  color: var(--white);
}

.btn-container .btn.btn-black{
  min-width: 190px;
  min-height: 50px;
  font-size: var(--fs-16);
  line-height: 22px;
  color: var(--white);
  border-radius: 8px;
  border: 1px solid var(--black);
  background-color: var(--black);
}
.btn-container .btn.btn-black:hover{
  background-color: var(--white);
  color: var(--black);
}

.btn-container .btn.btn-secondary-8{
  min-width: 190px;
  min-height: 50px;
  font-size: var(--fs-16);
  line-height: 22px;
  color: var(--white);
  border-radius: 8px;
  border: 1px solid var(--secondary-8);
  background-color: var(--secondary-8);
}
.btn-container .btn.btn-secondary-8:hover{
  background-color: var(--white);
  color: var(--secondary-8);
}

.btn-container .btn.btn-white.white-shadow{
  box-shadow: var(--box-shadow-3);
}

.btn-container .btn.btn-secondary-19{
  background-color: var(--secondary-19);
  color: var(--white);
}
.btn-container .btn.btn-secondary-19:hover{
  background-color: var(--transparent);
  color: var(--secondary-19);
  border: 1px solid var(--secondary-19);
}
.btn-container .btn.btn-block{
  width: 100%;
}

/* Button Circle Arrow - Relative Code Start */
.btn-container.btn-circle-arrow-reverse .btn{
  min-height: 60px;
  border-radius: var(--border-radius-40);
  padding: 6px 6px 6px 30px;
  border: 1px solid var(--transparent);
}
.btn-container.btn-circle-arrow-reverse .btn:hover::after{
  width: calc(100%);
  height: initial;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  transition: all 0.5s ease-in-out;
}
.btn-container.btn-circle-arrow-reverse .btn span{
  position: relative;
  z-index: 2;
}
.btn-container.btn-circle-arrow-reverse .arrow-image{
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-left: 20px;
  color: var(--primary-1);
  z-index: 2;
}
.btn-container.btn-circle-arrow-reverse .arrow-image img{
  width: 20px;
}
.btn-container.btn-circle-arrow-reverse .btn::before{
  position: absolute;
  content: "";
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: var(--border-radius-40);
  filter: blur(4px);
  z-index: -1;
}
.btn-container.btn-circle-arrow-reverse .btn::after{
  position: absolute;
  content: "";
  left: calc(100% - 54px);
  width: 48px;
  height: 48px;
  border-radius: var(--border-radius-40);
  z-index: 1;
  transition: all 0.5s ease-in-out;
}
.btn-container.btn-circle-arrow-reverse .btn.btn-white{
  color: var(--white);
  background-color: var(--transparent);
}
.btn-container.btn-circle-arrow-reverse .btn.btn-white::before{
  border: 6px solid var(--transparent);
}
.btn-container.btn-circle-arrow-reverse .btn.btn-white::after{
  background-color: var(--white);
}
.btn-container.btn-circle-arrow-reverse .btn.btn-white:hover{
  color: var(--primary-2);
  border: 1px solid var(--primary-2);
}
/* Button Circle Arrow - Relative Code End */

/* Owl Slider - Relative Style CSS Start */
.owl-carousel-container .owl-carousel .owl-stage-outer,
.owl-carousel-container .owl-carousel .owl-stage-outer .owl-stage .item .owl-content-box{
  height: 100%;
}
.owl-carousel-container .owl-carousel .owl-stage-outer .owl-stage{
  position: relative;
  display: flex;
  align-items: stretch;
  padding: 4px 4px;
}
.owl-carousel-container .owl-carousel .owl-stage-outer .owl-stage .item{
  height: 100%;
  margin: 0px 10px 0px;
}
.owl-carousel-container .owl-carousel .owl-nav .owl-prev,
.owl-carousel-container .owl-carousel .owl-nav .owl-next{
  position: absolute;
  top: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-40);
  transform: translateY(-50%);
  background-color: var(--transparent);
  border-radius: var(--border-radius-100);
  margin: 0px;
  transition: all 0.5s ease 0s;
}
.owl-carousel-container .owl-carousel .owl-nav .owl-prev i,
.owl-carousel-container .owl-carousel .owl-nav .owl-next i{
  color: var(--primary-2);
}
.owl-carousel-container .owl-carousel .owl-nav .owl-prev{
  left: -60px;
}
.owl-carousel-container .owl-carousel .owl-nav .owl-next{
  right: -60px;
}
.owl-carousel-container .owl-carousel .owl-stage-outer .owl-stage .item .image-box{
  display: block;
}
.owl-carousel-container .owl-carousel .owl-dots .owl-dot span{
  width: 14px;
  height: 14px;
  margin: 0px 10px;
  background-color: var(--secondary-16);
}
.owl-carousel-container .owl-carousel .owl-dots .owl-dot.active span{
  background-color: var(--primary-2);
}

/* Owl Popular Categories Carousel - Relative Style CSS Start */
.owl-carousel-container.owl-popular-categories-carousel .owl-carousel .owl-stage-outer .owl-stage .owl-item .item .image-box{
  height: 100%;
}
.owl-carousel-container.owl-popular-categories-carousel .owl-carousel .owl-stage-outer .owl-stage .owl-item .item .image-box img{
  height: 100%;
}
/* Owl Popular Categories Carousel - Relative Style CSS End */

/* Owl Top Vendors Carousel - Relative Style CSS Start */
.owl-carousel-container.owl-top-vendors-carousel .owl-carousel .owl-stage-outer .owl-stage .item{
  height: 100%;
  margin: 0px 27px 0px;
}
.owl-carousel-container.owl-top-vendors-carousel .owl-carousel .owl-stage-outer .owl-stage .item .image-box{
  max-width: 120px;
  margin: 0px auto;
}
/* Owl Top Vendors Carousel - Relative Style CSS End */

.owl-carousel-container.owl-category-carousel .owl-carousel .owl-stage-outer,
.owl-carousel-container.owl-category-carousel .owl-carousel .owl-stage-outer .owl-stage .item .owl-content-box{
  height: auto;
}

/* Banner Mobile Image Slider - Relative Style CSS Start */
.owl-carousel-container.banner-mobile-image-slider{
  width: 55%;
  position: absolute;
  left: 50%;
  bottom: -45px;
  transform: translateX(-50%);
}
.owl-carousel-container.banner-mobile-image-slider .owl-carousel .owl-dots{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0px;
}
.owl-carousel-container.banner-mobile-image-slider .owl-carousel .owl-dots .owl-dot span{
  width: 12px;
  height: 12px;
  margin: 0px;
}
.owl-carousel-container.banner-mobile-image-slider .owl-carousel .owl-dots .owl-dot:not(:last-child){
  margin-right: 8px;
}
.owl-carousel-container.banner-mobile-image-slider .owl-carousel .owl-dots .owl-dot.active span{
  background-color: var(--secondary-6);
}
.owl-carousel-container.banner-mobile-image-slider .owl-carousel .owl-nav .owl-prev,
.owl-carousel-container.banner-mobile-image-slider .owl-carousel .owl-nav .owl-next{
  font-size: var(--fs-28);
}
.owl-carousel-container.banner-mobile-image-slider .owl-carousel .owl-nav .owl-prev{
  left: -50px;
}
.owl-carousel-container.banner-mobile-image-slider .owl-carousel .owl-nav .owl-next{
  right: -50px;
}
/* Banner Mobile Image Slider - Relative Style CSS End */
/* Owl Slider - Relative Style CSS End */

/* Slick Slider - Relative Style CSS Start */
.slick-slider-container{
  overflow: hidden;
}
.slick-slider-container .slick-list .slick-track .slick-slide .slick-item .slick-item-content-box .slick-detail-content-box{
  padding: 0px 15px;
}
.slick-arrow-content-box{
  position: relative;
}
.btn-container .slick-prev,
.btn-container .slick-next{
  position: absolute;
  top: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-40);
  transform: translateY(-50%);
  background-color: var(--transparent);
  border-radius: var(--border-radius-100);
  margin: 0px;
  transition: all 0.5s ease 0s;
  border: none;
}
.btn-container .slick-prev i,
.btn-container .slick-next i{
  color: var(--primary-2);
}
.btn-container .slick-prev{
  left: -80px;
}
.btn-container .slick-next{
  right: -70px;
}

/* White Arrow - Slick Slider Relative Code - Top Bottom Center - Relative Style CSS Start */
.btn-container.white-bg-arrow-container .slick-prev,
.btn-container.white-bg-arrow-container .slick-next{
  font-size: var(--fs-26);
  width: 61px;
  height: 61px;
  background-color: var(--white);
}
.btn-container.white-bg-arrow-container .slick-prev{
  left: -15px;
}
.btn-container.white-bg-arrow-container .slick-next{
  right: -15px;
  background-color: var(--secondary-30);
}
/* White Arrow - Slick Slider Relative Code - Top Bottom Center - Relative Style CSS End */

/* Slick Height Full - Relative Style CSS Start */
.slick-slider-container.slick-full-height .slick-list .slick-track{
  display: flex;
}
.slick-slider-container.slick-full-height .slick-list .slick-track .slick-slide{
  height: inherit !important;
}
.slick-slider-container.slick-full-height .slick-list .slick-track .slick-slide > div,
.slick-slider-container.slick-full-height .slick-list .slick-track .slick-slide .slick-item,
.slick-slider-container.slick-full-height .slick-list .slick-track .slick-slide .slick-item .slick-item-content-box,
.slick-slider-container.slick-full-height .slick-list .slick-track .slick-slide .slick-item .slick-item-content-box .slick-detail-content-box{
  height: 100%;
}
/* Slick Height Full - Relative Style CSS End */

.slick-slider-container.our-popular-service-slick-slider .slick-list .slick-track .slick-slide .slick-item .slick-item-content-box .slick-detail-content-box .image-content-box{
  display: block;
  border-radius: 28px;
  overflow: hidden;
}
.our-popular-service-slick-slider + .btn-container.white-bg-arrow-container .slick-next{
  background-color: var(--secondary-30);
}
/* Slick Slider - Relative Style CSS End */

/* Card Relative Style CSS Start */
/* Comman Card - Relative Code Start */
.card-container{
  height: 100%;
}
.card-container .card{
  height: 100%;
}
.card-container .card .card-content-box{
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* Comman Card - Relative Code End */

/* Image Detail Card Relative Code Start */
.card-container.cmn-image-detail-card .card{
  border: 1px solid var(--secondary-5);
  border-radius: var(--border-radius-0);
}
.card-container.cmn-image-detail-card .card .card-header{
  position: relative;
  height: 200px;
  padding: 0px;
  border: none;
  border-bottom: 1px solid var(--secondary-5);
}
.card-container.cmn-image-detail-card .card .card-header img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-container.cmn-image-detail-card .card .heart-icon{
  position: absolute;
  top: 20px;
  left: 15px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  border-radius: 6px;
}
.card-container.cmn-image-detail-card .card .heart-icon i{
  font-size: var(--fs-22);
  color: var(--secondary-13);
}
.card-container.cmn-image-detail-card .card .card-header .ribban-label-content-box{
  position: absolute;
  right: 0px;
  bottom: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--fs-16);
  line-height: 20px;
  font-family: var(--Font-Medium);
  color: var(--white);
  text-transform: uppercase;
  padding: 8px 16px;
}
.card-container.cmn-image-detail-card .card .card-header .ribban-label-content-box img{
  width: 15px;
  margin-left: 4px;
}
.card-container.cmn-image-detail-card .card .card-body .image-content-box{
  margin-top: 30px;
}
.card-container.cmn-image-detail-card .card .card-body{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  padding: 30px 20px 30px;
}
.card-container.cmn-image-detail-card .card .card-body .text-heading-3{
  font-size: var(--fs-30);
  line-height: 38px;
  font-family: var(--Font-Bold);
}
.card-container.cmn-image-detail-card .card .card-body .text-heading-4{
  font-size: var(--fs-24);
  line-height: 30px;
  font-family: var(--Font-Bold);
}
.card-container.cmn-image-detail-card .card .card-body img{
  max-width: 100px;
  height: 40px;
  margin: 0px auto;
}
/* Image Detail Card Relative Code Start */

/* Horizontal Image Detail Card Relative Code Start */
.card-container.cmn-image-detail-card.horizontal-image-detail-card .card .card-content-box{
  flex-direction: row;
}
.card-container.cmn-image-detail-card.horizontal-image-detail-card .card .card-content-box .card-header{
  width: 50%;
  height: 100%;
  min-height: 400px;
  flex: 0 0 auto;
}
.card-container.cmn-image-detail-card.horizontal-image-detail-card .card .card-content-box .card-body{
  justify-content: center;
  padding: 30px 60px;
  background-color: var(--secondary-11);
}
.card-container.cmn-image-detail-card.horizontal-image-detail-card .card .card-body img{
  height: 90px;
}
.card-container.cmn-image-detail-card.horizontal-image-detail-card .card .card-content-box .card-body p{
  font-size: var(--fs-22);
  line-height: 32px;
  color: var(--secondary-10);
  margin-top: 15px;
}
/* Horizontal Image Detail Card Relative Code End */

.card-container.most-popular-card .card{
  border-radius: var(--border-radius-0);
}
.card-container.most-popular-card .card.bg-primary-2{
  background-color: var(--primary-2);
  border: 1px solid var(--primary-2);
}
.card-container.most-popular-card .card.bg-primary-2{
  background-color: var(--primary-2);
  border: 1px solid var(--primary-2);
}
.card-container.most-popular-card .card.bg-secondary-12{
  background-color: var(--secondary-12);
  border: 1px solid var(--secondary-12);
}
.card-container.most-popular-card .card .card-content-box{
  justify-content: space-between;
}
.card-container.most-popular-card .card .card-content-box .card-header{
  background-color: transparent;
  border: none;
  padding: 40px 40px 40px;
}
.card-container.most-popular-card .card .card-content-box .card-body{
  flex: 0 0 auto;
  padding: 0px 40px 60px;
}
.card-container.most-popular-card .card .card-content-box .card-header .text-heading-3{
  font-size: var(--fs-36);
  line-height: 40px;
  font-family: var(--Font-Bold);
  letter-spacing: 0.48px;
  color: var(--white);
}

/* Faqs Card - Relative Style CSS Start */
.card-container.accordion-card{
  height: initial;
}
.card-container.accordion-card .card{
  border-radius: var(--border-radius-20);
  background-color: var(--secondary-15);
}
.card-container.accordion-card .card .card-content-box .card-header{
  border-bottom: none;
  padding: 30px 30px 15px;
  background-color: var(--transparent);
}
.card-container.accordion-card .card .card-content-box .card-header .text-heading-2{
  font-size: var(--fs-30);
  line-height: 36px;
  font-family: var(--Font-Regular);
  color: var(--black);
}
.card-container.accordion-card .card .card-content-box .card-header .error-message{
  display: block;
  font-family: var(--Font-Medium);
  color: var(--primary-2);
  text-align: center;
  padding-top: 30px;
  
}
.card-container.accordion-card .card .card-content-box .card-body{
  padding: 15px 30px 30px;
}

/* Icon Detail Card - Relative Style CSS Start */
.card-container.icon-detail-card .card{
  border-radius: var(--border-radius-10);
  border-color: var(--transparent);
}
.card-container.icon-detail-card .card .card-content-box{
  width: 100%;
}
.card-container.icon-detail-card .card .card-content-box .card-header{
  background-color: var(--transparent);
  border: none;
  padding: 30px 30px 12px;
}
.card-container.icon-detail-card .card .card-content-box .card-header .image-content-box{
  width: 50px;
}
.card-container.icon-detail-card .card .card-content-box .card-body{
  padding: 12px 30px 30px;
}
.card-container.icon-detail-card .card .card-content-box .card-body .detail-content-box .text-heading-3{
  font-size: var(--fs-20);
  line-height: 24px;
  font-family: var(--Font-Bold);
  color: var(--black);
}
.card-container.icon-detail-card .card .card-content-box .card-body .detail-content-box .text-heading-3 + p{
  margin-top: 5px;
}
.card-container.icon-detail-card .card .card-content-box .card-body .detail-content-box p{
  font-size: var(--fs-16);
  line-height: 18px;
  font-family: var(--Font-Regular);
  color: rgb(var(--black-rgb), var(--background-color-opacity-5));
}
/* Icon Detail Card - Relative Style CSS End */

/* Icon Detail Card Shadow - Relative Style CSS Start */
.card-container.icon-detail-rounded-card .card{
  padding: 35px;
  border: 1px solid var(--transparent);
  background-color: var(--secondary-15);
  border-radius: var(--border-radius-60);
}
.card-container.icon-detail-shadow-card .card{
  background-color: var(--secondary-25);
  box-shadow: var(--box-shadow-3);
}
.card-container.icon-detail-rounded-card .card .card-content-box{
  text-align: center;
}
.card-container.icon-detail-rounded-card .card .card-content-box .card-header{
  background-color: var(--transparent);
  border-bottom: none;
  padding: 0px;
}
.card-container.icon-detail-rounded-card .card .card-content-box .card-header .image-content-box{
  height: 150px;
  margin-bottom: 50px;
}
.card-container.icon-detail-rounded-card .card .card-content-box .card-header .image-content-box img{
  height: 100%;
}
.card-container.icon-detail-rounded-card .card .card-content-box .card-body{
  padding: 0px;
}
.card-container.icon-detail-rounded-card .card .card-content-box .card-body .text-heading-3{
  font-size: var(--fs-38);
  font-family: var(--Font-Medium);
  line-height: 48px;
  color: var(--black);
  margin-bottom: 15px;
}
.card-container.icon-detail-rounded-card .card .card-content-box .card-body span{
  font-size: var(--fs-24);
  line-height: 36px;
  font-family: var(--Font-Medium);
  color: var(--black);
}
/* Icon Detail Card Shadow - Relative Style CSS End */

/* Image Detail Card - Relative Style CSS Start */
.card-container.image-detail-card .card{
  transform: scale(1);
  border-radius: var(--border-radius-30);
  border: 1px solid var(--transparent);
}
.card-container.image-detail-card.scale-card{
  transform: scale(1.1);
}
.card-container.image-detail-card .card .card-content-box{
  text-align: center;
}
.card-container.image-detail-card .card .card-content-box .card-header{
  padding: 40px 40px 20px;
  background-color: var(--transparent);
  border-bottom: none;
}
.card-container.image-detail-card .card .card-content-box .card-header{
  height: 230px;
}
.card-container.image-detail-card .card .card-content-box .card-header img{
  height: 100%;
  object-fit: contain;
}
.card-container.image-detail-card .card .card-content-box .card-body{
  padding: 20px 40px 40px;
}
.card-container.image-detail-card .card .card-content-box .card-body .text-heading-3{
  font-size: var(--fs-40);
  line-height: 50px;
  font-family: var(--Font-Medium);
  color: var(--black);
  margin-bottom: 15px;
}
.card-container.image-detail-card .card .card-content-box .card-body p{
  font-size: var(--fs-18);
  line-height: 28px;
  font-family: var(--Font-Medium);
  color: var(--black);
}
.card-container.image-detail-card .card .card-content-box .card-body p + p{
  margin-top: 20px;
}
.card-container.image-detail-card .card .card-content-box .card-body p a{
  color: var(--secondary-26);
}
.card-container.image-detail-card .card .card-content-box .card-body .btn-container{
  margin-top: 20px;
}
/* Image Detail Card - Relative Style CSS End */

/* Bag Border Detail Card - Relative Style CSS Start */
.card-container.bag-border-detail-card.horizontol-detail-card .card .card-content-box{
  align-items: center;
  flex-direction: row-reverse;
}
.card-container.bag-border-detail-card.horizontol-detail-card .card .card-content-box .card-header{
  background-color: var(--transparent);
  border-bottom: none;
}
.card-container.bag-border-detail-card.horizontol-detail-card .card .card-content-box .horizontol-detail-box{
  position: relative;
}
.card-container.bag-border-detail-card.horizontol-detail-card .card .card-content-box .horizontol-detail-box{
  padding-right: 10px;
}
.card-container.bag-border-detail-card.horizontol-detail-card .card .card-content-box .horizontol-detail-box::after{
  position: absolute;
  content: "";
  top: 0px;
  bottom: 0px;
  right: 0px;
  width: 7px;
  background-color: var(--secondary-29);
  border-radius: var(--border-radius-10);
}
/* Bag Border Detail Card - Relative Style CSS End */

/* Subscription Pricing Card - Relative Style CSS Start */
.card-container.subscription-pricing-card.active-card .card{
  border-top: 8px solid var(--secondary-8);
}
.card-container.subscription-pricing-card .card{
  border-radius: 24px;
  border: 1px solid rgb(var(--secondary-rgb-31), var(--background-color-opacity-6));
}
.card-container.subscription-pricing-card .card .card-content-box .card-header{
  padding: 24px 24px 12px;
  background-color: var(--transparent);
  border: none;
}
.card-container.subscription-pricing-card .card .card-content-box .card-header .title-with-button{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.card-container.subscription-pricing-card .card .card-content-box .card-header .title-with-button .status-container{
  margin-bottom: 16px;
}
.card-container.subscription-pricing-card .card .card-content-box .card-header .text-heading-2{
  font-size: var(--fs-24);
  line-height: 30px;
  font-family: var(--Font-Bold);
  color: var(--black);
  margin-bottom: 15px;
  padding-right: 15px;
}
.card-container.subscription-pricing-card .card .card-content-box .card-header p{
  font-size: var(--fs-16);
  line-height: 20px;
  font-family: var(--Font-Regular);
  color: rgb(var(--black-rgb), var(--background-color-opacity-7));
}
.card-container.subscription-pricing-card .card .card-content-box .card-header .price-text{
  font-size: var(--fs-16);
  line-height: 24px;
  color: rgb(var(--black-rgb), var(--background-color-opacity-8));
  margin: 15px 0px;
}
.card-container.subscription-pricing-card .card .card-content-box .card-header .price-text span{
  font-size: var(--fs-24);
  line-height: 30px;
  font-family: var(--Font-Bold);
  color: var(--secondary-8);
}
.card-container.subscription-pricing-card .card .card-content-box .card-body{
  padding: 12px 24px 24px;
}
/* Subscription Pricing Card - Relative Style CSS End */
/* Card Relative Style CSS End */

/* ul List - Relative Style CSS Start */
.check-list li{
  position: relative;
  font-size: var(--fs-16);
  line-height: 24px;
  font-family: var(--Font-Regular);
  color: var(--black);
  padding-left: 30px;
}
.check-list li:not(:last-child){
  margin-bottom: 15px;
}
.check-list li::before{
  position: absolute;
  content: "";
  top: 6px;
  left: 4px;
  display: block;
  background-image: url("../images/svg/entypo-check.svg");
  width: 15px;
  height: 15px;
  background-size: 15px 15px;
  z-index: 2;
}
/* ul List - Relative Style CSS End */

/* Status - Relative Style CSS Start */
.status-container{
  display: inline-block;
  font-size: var(--fs-12);
  line-height: 14px;
  font-family: var(--Font-Bold);
  color: var(--white);
  padding: 5px 8px;
  border-radius: 4px;
}
/* Status - Relative Style CSS End */

.top-offers-bg-section{
  padding: 0px 100px;
}
.top-offers-bg-section .place-image::before{
  position: absolute;
  content: "";
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  pointer-events: none;
  background-color: rgb(var(--white-rgb), var(--background-color-opacity-1));
  z-index: 0;
}

/* Get Big Offer Section - Relative Style CSS Start */
.get-big-offers-section{
  position: relative;
}
.get-big-offers-section .get-big-content-box .content-detail-box{
  padding: 100px 16.66% 50px 8%;
}
.get-big-offers-section .get-big-content-box .content-detail-box .text-heading-2{
  font-size: var(--fs-44);
  line-height: 50px;
  font-family: "Alfa Slab One";
  font-weight: 400;
  color: var(--white);
  letter-spacing: 0.48px;
  margin-bottom: 20px;
}
.get-big-offers-section .get-big-content-box .content-detail-box p{
  font-size: var(--fs-34);
  line-height: 42px;
  font-family: var(--Font-Regular);
  color: var(--white);
}
.get-big-offers-section .get-big-content-box .content-detail-box .badge-image-list{
  margin-top: 35px;
}
.get-big-content-box .content-detail-box::before{
  position: absolute;
  content: "";
  top: 40px;
  bottom: 50px;
  left: 0px;
  right: 0px;
  background-color: var(--secondary-12);
  z-index: -1;
}
.get-big-offers-section .get-big-content-box .content-detail-box .btn-container{
  margin-top: 10px;
}

/* Connect Service Information Section Relative Style CSS Start - (Overwrite CSS - Get Big Offer Section) */
.get-big-offers-section.connect-service-information-section{
  padding-top: 80px;
}
.get-big-offers-section.black-content-section .get-big-content-box .content-detail-box::before{
  top: 80px;
  bottom: 0px;
  background-color: var(--secondary-27);
}
.get-big-offers-section.black-content-section .get-big-content-box .content-detail-box .text-heading-2,
.get-big-offers-section.black-content-section .get-big-content-box .content-detail-box p{
  color: var(--black);
}
.get-big-offers-section.black-content-section .get-big-content-box .image-content-box{
  position: relative;
  height: 600px;
  bottom: -30px;
  margin-top: -120px;
}
.get-big-offers-section.black-content-section .get-big-content-box .image-content-box img{
  height: 100%;
  object-fit: contain;
  object-position: bottom;
}
.get-big-offers-section.work-get-in-touch-section{
  padding-top: 65px;
}
/* Get Big Offer Section - Relative Style CSS End */

/* Form Relative Style CSS Start */
.form-control{
  border-color: var(--secondary-20);
}
.form-control:focus{
  box-shadow: none;
  border-color: var(--secondary-20);
}
.search-input-box{
  position: relative;
}
.search-input-box .search-icon{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 22px;
  z-index: 6;
}


.has-float-label {
  position: relative;
  font-size: 70%;
}
.has-float-label label {
  position: absolute;
  opacity: 1;
  transition: all .2s;
  top: -.5em;
  left: .75rem;
  z-index: 1;
  line-height: 1;
  padding: 0 1px
}
.has-float-label label::after {
  content: " ";
  display: block;
  position: absolute;
  background: var(--white);
  height: 2px;
  top: 50%;
  left: -.2em;
  right: -.2em;
  z-index: -1
}
.has-float-label .form-control::placeholder{
  color: rgb(var(--secondary-rgb-18), var(--background-color-opacity-4));
}
.has-float-label .form-control{
  min-height: 50px;
  font-size: var(--fs-18);
  line-height: 18px;
  color: var(--black);
  padding-right: 50px;
}
.has-float-label .form-control:placeholder-shown:not(:focus)::-webkit-input-placeholder {
  opacity: 0
}
.has-float-label .form-control:placeholder-shown:not(:focus)+label {
  font-size: var(--fs-14);
  line-height: 18px;
  color: var(--Font-Regular);
  color: var(--black);
  opacity: .5;
  top: 16px;
  pointer-events: none;
}
.has-float-label .show-hide-passIcon{
  position: absolute;
  top: 50%;
  right: 15px;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
}


.remember-forgot-password-content-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.remember-forgot-password-content-box .checkbox-container{
  margin-bottom: 30px;
}
.checkbox-container input{
  position: relative;
  min-width: 30px;
  max-width: 30px;
  height: 30px;
  min-height: auto;
  appearance: none;
  -moz-appearance: none;
  margin: 4px 4px 0px 0px;
  border-radius: var(--border-radius-8);
  border: none;
}
.checkbox-container input:focus{
  box-shadow: none;
  border: none;
}
.checkbox-container input:checked{
  background-color: var(--transparent);
  border: none;
}
.checkbox-container input::before{
  position: absolute;
  content: "";
  inset: 0;
  background-color: var(--white);
  border: 1px solid var(--secondary-20);
  border-radius: var(--border-radius-8);
}
.checkbox-container input:checked:after{
  position: absolute;
  content: "";
  left: 11px;
  top: 4px;
  width: 9px;
  height: 17px;
  border-width: 0px 2px 2px 0px;
  border-style: solid;
  border-color: var(--primary-1);
  transform: rotate(45deg);
  z-index: 2;
}
.login-container .remember-forgot-password-content-box .checkbox-container input::before {
  background-color: var(--transparent);
  border: 1px solid var(--secondary-20);
}
.remember-forgot-password-content-box .checkbox-container input::after {
  top: 5px;
  border-width: 0px 3px 3px 0px;
  border-image-slice: 1;
  border-image-source: linear-gradient(93.88deg, var(--secondary-7) -38.74%, var(--secondary-7) 52.18%, var(--secondary-7) 143.09%);
}
.remember-forgot-password-content-box .checkbox-container label {
  font-size: 16px;
}
.remember-forgot-password-content-box a {
  font-size: var(--fs-16);
  line-height: 18px;
  font-family: var(--Font-Medium);
  color: var(--secondary-19);
  text-decoration: none;
  margin-bottom: 30px;
}
.sign-up-text{
  font-size: var(--fs-16);
  line-height: 18px;
  font-family: var(--Font-Regular);
  color: var(--black);
  text-align: center;
  margin-top: 30px;
}
.sign-up-text a{
  font-family: var(--Font-Medium);
  color: var(--secondary-19);
}
input[type=file]{
  cursor: pointer;
}
input[type=file]:hover{
  color: var(--primary-2);
}
/* Form Relative Style CSS End */

/* Footer Relative Style CSS Start */
.footer-section{
  padding: 60px 0px 40px;
  background: linear-gradient(225deg, var(--secondary-6) 0%, var(--secondary-7) 100%);
 
}
.footer-section .copy-right-section{
  text-align: center;
  padding: 25px 0px 0px;
  border-top: 1px solid var(--secondary-14);
}
.footer-section .copy-right-section p{
  font-size: var(--fs-16);
  line-height: 24px;
  font-family: var(--Font-Regular);
  color: var(--white);
}
.logo-with-social-media-content-box{
  width: 80%;
}
.social-media-list ul{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.social-media-list ul li a{
  display: inline-block;
}
.social-media-list ul li a i{
  font-size: var(--fs-30);
  color: var(--white);
}
.social-media-list ul li a:hover i{
  color: var(--primary-2);
}
.social-media-list ul li:not(:last-child){
  margin-right: 15px;
}
.footer-section .footer-menu-section .social-media-list{
  margin-top: 30px;
}
.footer-section .footer-menu-content-box ul li:not(:last-child){
  margin-bottom: 8px;
}
.footer-section .footer-menu-content-box ul li a{
  font-size: var(--fs-16);
  line-height: 24px;
  font-family: var(--Font-Regular);
  color: rgb(var(--white-rgb), var(--background-color-opacity-1));
}
.footer-section .footer-menu-content-box ul li a:hover{
  color: var(--white);
}
.footer-section .footer-menu-content-box .text-heading-6{
  font-size: var(--fs-16);
  line-height: 24px;
  font-family: var(--Font-Regular);
  color: var(--white);
  margin-bottom: 20px;
}
.footer-section .footer-menu-content-box p{
  font-size: var(--fs-14);
  line-height: 24px;
  font-family: var(--Font-Regular);
  color: rgb(var(--white-rgb), var(--background-color-opacity-1));
}
.footer-section .footer-menu-content-box .input-group{
  margin-top: 15px;
  max-width: fit-content;
}
.footer-section .footer-menu-content-box .input-group .form-control{
  min-height: 40px;
  font-size: var(--fs-14);
  line-height: 22px;
  font-family: var(--Font-Regular);
  color: var(--black);
}
.footer-section .footer-menu-content-box .input-group .form-control::placeholder{
  color: rgb(var(--black-rgb), var(--background-color-opacity-4));
}
.footer-section .footer-menu-content-box .image-list .image-list-link{
  display: block;
  max-width: 110px;
  margin: 0px auto 15px;
}
.footer-section .footer-menu-content-box .image-list .image-list-link.scanner-image{
  width: 64px;
  height: 64px;
}
.input-group .form-control::placeholder{
  font-size: var(--fs-16);
  line-height: 24px;
}
.input-group .input-group-text{
  background-color: var(--primary-2);
  border-color: var(--primary-2);
}
.input-group .input-group-text i{
  color: var(--white);
}
/* Footer Relative Style CSS End */

/* Faq Relative Style CSS Start */
.faq-section .faq-content-box{
  margin-bottom: 50px;
}
.faq-section .faq-content-box h1 + p{
  margin-top: 20px;
}
.faq-section .faq-content-box p{
  font-size: var(--fs-28);
  line-height: 30px;
  font-family: var(--Font-Regular);
  color: var(--black);
  letter-spacing: 0.48px;
}
.faq-section .faq-content-box .input-group{
  margin-top: 55px;
}
/* Faq Relative Style CSS End */

/* Input Group Relative Style CSS Start */
.input-group.large-input-group .form-control{
  padding: 6px 24px 6px 45px;
  border: 1px solid var(--primary-2);
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.input-group.large-input-group .input-group-text{
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-right-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
}
.input-group.large-input-group .input-group-text i{
  font-size: var(--fs-20);
}
/* Input Group Relative Style CSS End */

/* Accordion Relative Style CSS Start */
.accordion-card-list .accordion-card-list-item:not(:last-child){
  margin-bottom: 30px;
}
.accordion-container .accordion .accordion-item{
  position: relative;
  border: 1px solid var(--white);
  border-radius: var(--border-radius-10);
  overflow: hidden;
}
.accordion-container .accordion .accordion-item:not(:last-child){
  margin-bottom: 20px;
}
.accordion-container .accordion .accordion-item .accordion-header .accordion-button{
  font-size: var(--fs-22);
  line-height: 26px;
  font-family: var(--Font-Medium);
  color: var(--black);
  padding: 20px 20px 20px 20px;
  background-color: var(--transparent);
  box-shadow: none;
}
.accordion-container .accordion .accordion-item .accordion-header .accordion-button span{
  margin-right: 15px;
}
.accordion-container .accordion .accordion-item .accordion-header .accordion-button::before{
  position: absolute;
  content: "";
  top: 50%;
  right: 12px;
  width: 35px;
  height: 35px;
  border-radius: var(--border-radius-100);
  border: 1px solid var(--black);
  transform: translateY(-50%);
}
.accordion-container .accordion .accordion-item .accordion-header .accordion-button .plus-minus-circle{
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-100);
  transition: all 0.5s ease-in-out;
}
.accordion-container .accordion .accordion-item:hover .accordion-header .accordion-button .plus-minus-circle{
  transition: all 0.5s ease-in-out;
}
.accordion-container .accordion .accordion-item .accordion-header .accordion-button[aria-expanded="true"] .plus-minus-circle .fa-plus{
  display: none;
  transition: 1000ms;
}
.accordion-container .accordion .accordion-item .accordion-header .accordion-button[aria-expanded="false"] .plus-minus-circle .fa-minus{
  display: none;
  transition: 1000ms;
}
.accordion-container .accordion .accordion-item .accordion-header .accordion-button .plus-minus-circle i{
  font-size: var(--fs-16);
  color: var(--black);
  transition: 1000ms;
}
.accordion-container .accordion .accordion-item .accordion-header .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
  transform: scale(.7) !important;
}
.accordion-container .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
}
.accordion-container .accordion .accordion-item .accordion-body{
  padding: 0px 70px 20px 20px;
}
.accordion-container .accordion .accordion-item .accordion-collapse.collapse.show::before{
  position: absolute;
  content: "";
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  border-radius: var(--border-radius-10);
  border: 1px solid var(--black);
  pointer-events: none;
  z-index: 0;
}
.accordion-container .accordion .accordion-item .accordion-body p{
  font-size: var(--fs-18);
  line-height: 26px;
  font-family: var(--Font-Regular);
  color: rgb(var(--black-rgb), var(--background-color-opacity-1));
}
/* Accordion Relative Style CSS End */

/* Accordion List Menu - with Scrollable Relative Style CSS Start */
.list-group-container ul{
  border-radius: var(--border-radius-10);
}
.list-group-container ul li{
  padding: 0px;
  border: none;
  background-color: var(--secondary-15);
}
.list-group-container ul li:first-child,
.list-group-container ul li:first-child a{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.list-group-container ul li:last-child,
.list-group-container ul li:last-child a{
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.list-group-container ul li a{
  display: block;
  font-size: var(--fs-22);
  line-height: 30px;
  font-family: var(--Font-Medium);
  color: var(--black);
  background-color: var(--secondary-15);
  padding: 12px 20px;
}
.list-group-container ul li a:hover,
.list-group-container ul li a.active{
  color: var(--white);
  background-color: var(--primary-2);
  border-radius: var(--border-radius-10);
}
/* Accordion List Menu - with Scrollable Relative Style CSS End */

/* Login File Relative Code Start */
.login-page-container .login-content-box{
  padding: 30px;
  border-radius: var(--border-radius-20);
  border: 1px solid var(--secondary-17);
}
.login-page-container .login-content-box .all-section-space{
  margin-bottom: 20px;
}
.login-page-container .login-content-box .login-right-header{
  padding: 0px 0px 20px;
}
.login-page-container .login-content-box .login-right-header a{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.login-page-container .login-content-box .login-right-header .circle-box{
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: var(--border-radius-100);
  background-color: var(--transparent);
  border: 1px solid var(--primary-2);
  margin-right: 20px;
}
.login-page-container .login-content-box .login-right-header .circle-box svg{
  font-size: var(--fs-26);
  color: var(--white);
}
.login-page-container .login-content-box .text-heading-3{
  font-size: var(--fs-26);
  line-height: 32px;
  font-family: var(--Font-Medium);
  color: var(--black);
  margin-bottom: 30px;
}
.login-page-container .login-content-box .btn-container .btn.btn-block{
  min-height: 50px;
}
.offers-instant-access-section .text-heading-2{
  font-size: var(--fs-26);
  line-height: 30px;
  font-family: var(--Font-Bold);
  color: var(--black);
}
.login-page-container .login-content-box .form-group .iti{
  width: 100%;
}
.login-page-container .login-content-box .form-group .iti input{
  color: var(--black);
}
.login-page-container .login-content-box .form-group .iti input::placeholder{
  color: rgb(var(--secondary-rgb-18), var(--background-color-opacity-4));
}
.login-page-container .login-content-box form{
  margin-bottom: 0px;
}
.login-page-container .text-heading-2{
  font-size: var(--fs-30);
  line-height: 38px;
  color: var(--secondary-18);
  margin: 0px 0px 15px;
}

.login-admin-page-container .login-content .text-heading-3{
  font-size: var(--fs-26);
  line-height: 32px;
  font-family: var(--Font-Medium);
  color: var(--black);
  margin-bottom: 20px;
}

/* Login File Relative Code End */

/* Toast Error Message - Relative Styel CSS Start */
.toast.toast-error{
  opacity: 1 !important;
  background-color: rgb(var(--secondary-rgb-19), var(--background-color-opacity-3));
}
.toast.toast-success{
  opacity: 1 !important;
  background-color: rgb(var(--secondary-rgb-22), var(--background-color-opacity-3));
}
/* Toast Error Message - Relative Styel CSS End */

/* Comman Pages - Banner Section - Relative Style CSS Start */
.cmn-page-banner-section{
  position: relative;
  padding-top: 90px;
}
.cmn-page-banner-section.position-page-banner-section{
  padding-bottom: 65px;
}
.cmn-page-banner-section .cmn-banner-heading-content-box .text-heading-1{
  font-size: var(--fs-64);
  line-height: 78px;
  font-family: var(--Font-Bold);
  color: var(--black);
}
.cmn-page-banner-section .cmn-banner-heading-content-box .text-heading-1 + p{
  margin-top: 50px;
}
.cmn-page-banner-section .cmn-banner-heading-content-box p{
  font-size: var(--fs-24);
  line-height: 28px;
  font-family: var(--Font-Medium);
  color: var(--secondary-24);
}
.cmn-page-banner-section .cmn-banner-heading-content-box .input-group.search-input-box{
  margin-top: 50px;
}
/* .cmn-page-banner-section .image-content-box{
  position: absolute;
  right: 100px;
  bottom: 0px;
} */
.cmn-page-banner-section .image-content-box img{
  position: relative;
  height: 380px;
  right: -80px;
  bottom: -30px;
  object-position: right;
  object-fit: contain;
}
/* Comman Pages - Banner Section - Relative Style CSS End */

.still-need-help-section .cmn-red-heading-content-box{
  margin-bottom: 65px;
}
.cmn-page-banner-section .image-content-box.banner-image-position{
  position: absolute;
  top: 50px;
  bottom: 50px;
  right: 0px;
  width: 50%;
}
.cmn-page-banner-section .image-content-box.banner-image-position img{
  height: 100%;
  right: 0px;
  bottom: initial;
}

.cmn-page-banner-section .let-see-arrow-content-box{
  margin-top: 100px;
}
.let-see-arrow-content-box{
  display: flex;
  align-items: center;
}
.let-see-arrow-content-box .text-heading-2{
  font-size: var(--fs-60);
  line-height: 70px;
  font-family: var(--Font-Bold);
  color: var(--black);
}
.let-see-arrow-content-box img{
  width: 60px;
  margin-left: 15px;
}

/* How it's Work Section Relative Style CSS Start  */
.how-its-work-section .how-its-work-content-box-list-item{
  position: relative;
  padding: 60px 0px 30px;
}
.how-its-work-section .how-its-work-content-box-list-item:not(:last-child){
  margin-bottom: 100px;
}
.how-its-work-section .how-its-work-content-box-list-item:nth-child(odd) .rectangle-place-box{
  background-color: var(--secondary-15);
}
.how-its-work-section .how-its-work-content-box-list-item:nth-child(even) .rectangle-place-box{
  background-color: var(--secondary-27);
}
.how-its-work-section .how-its-work-content-box-list-item .text-heading-3{
  font-size: var(--fs-36);
  line-height: 46px;
  font-family: var(--Font-Medium);
  color: var(--black);
  margin-bottom: 20px;
}
.how-its-work-section .how-its-work-content-box-list-item p{
  font-size: var(--fs-24);
  line-height: 28px;
  font-family: var(--Font-Regular);
  color: var(--black);
}
.how-its-work-section .how-its-work-content-box-list-item p + p{
  margin-top: 20px;
}
.how-its-work-section .circle-number-box{
  width: 94px;
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-100);
  background-color: var(--secondary-28);
  font-size: var(--fs-40);
  line-height: 48px;
  font-family: var(--Font-Medium);
  color: var(--white);
  margin: 0px auto;
}
.rectangle-place-box{
  position: absolute;
  top: 0px;
  left: 120px;
  right: 85px;
  bottom: 0px;
  border-radius: var(--border-radius-60);
  z-index: -1;
}
.how-its-work-section .dot-circle-image{
  position: absolute;
  top: -100px;
  bottom: -100px;
  left: 50%;
  border-radius: var(--border-radius-60);
  transform: translateX(-50%);
  z-index: -1;
}
.how-its-work-section .dot-circle-image img{
  height: 100%;
  object-fit: cover;
}
.how-its-work-section .how-its-work-content-box-list-item ul{
  list-style-type: disc;
  padding-left: 20px;
}
.how-its-work-section .how-its-work-content-box-list-item ul li{
  font-size: var(--fs-24);
  line-height: 30px;
  font-family: var(--Font-Regular);
  color: var(--black);
  text-align: left;
}
.how-its-work-section .how-its-work-content-box-list-item ul li:not(:last-child){
  margin-bottom: 12px;
}
/* How it's Work Section Relative Style CSS End  */

.plan-subscription-section{
  padding-bottom: 80px;
}

/* Tabs Relative Style CSS Start */
.tab-container.switch-tab nav{
  display: flex;
  justify-content: center;
}
.tab-container.switch-tab .nav.nav-tabs{
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: var(--secondary-32);
  border-radius: 40px;
  border: none;
  margin-bottom: 30px;
  overflow-x: auto;
}
.tab-container.switch-tab .nav.nav-tabs .nav-link{
  font-size: var(--fs-14);
  line-height: 16px;
  font-family: var(--Font-Bold);
  color: var(--secondary-33);
  letter-spacing: 0.83px;
  text-transform: uppercase;
  white-space: nowrap;
  border: none;
  border-radius: 40px;
  margin: 0px 4px;
  padding: 12px 20px;
  background-color: var(--transparent);
}
.tab-container.switch-tab .nav-tabs .nav-link:hover,
.tab-container.switch-tab .nav-tabs .nav-link.active{
  color: var(--white);
  background-color: var(--secondary-8);
  border-radius: 40px;
}
/* Tabs Relative Style CSS End */

/* Phone Number Flag Dropdown Relative Style CSS Start */
.iti__flag-container .iti__country-list{
  white-space: normal;
}
.iti__flag-container .iti__country-list li{
  display: flex;
  align-items: flex-start;
}
.iti__flag-container .iti__country-list li .iti__country-name,
.iti__flag-container .iti__country-list li .iti__dial-code{
  font-size: 14px;
}
.iti__flag-container .iti__country-list li .iti__country-name{
  width: 180px;
  word-break: break-all;
}
.iti__flag-container .iti__country-list li .iti__flag-box{
  margin-top: 5px;
}
/* Phone Number Flag Dropdown Relative Style CSS End */

/* Scroll Style CSS Start */
::-webkit-scrollbar {
  width: 6px;
  height: 3px;
}
::-webkit-scrollbar-track {
  background: var(--secondary-1);
}
::-webkit-scrollbar-thumb {
  background: var(--primary-2);
  border-radius: var(--border-radius-20);
}
.contactus{
  position: relative;
  width: 100%;
  background: url('../images/png/contactbg.png') no-repeat center;
  background-size: cover;
  padding: 160px 0;
}


.contactus:before{
  position: absolute;
  content:"";
  top:0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.37);
  z-index: -1;
}
.contactus .text-heading-1{
  color: var(--white);
}
 .contact-box .row{
  position: relative;
}

 .contact-box .contactus-left{
  padding-right: 24px;
  border-right: 3px solid var(--black);
  height: 100%;
}
 .contact-box .contactus-right{
  
}

.contact-box{
  padding: 70px;
  background: var(--white);
  border-radius: 10px;
  box-shadow: var(--box-shadow-4);
  margin: -130px 0px 60px;
  background: var(--white);
  z-index: 1;
  position: relative;
}
 .contactus-left .form-control{
  box-shadow: 2px 2px 4px 1px #00000040;
  background-color: #faf7f7;
  border-radius: 10px;
}
 .contact-box .form-row:not(:last-child){
  margin-bottom: 20px;
}
 .contact-box .conatct-form .send-msg{
  width: 100%;
  display: block;
  background: var(--primary-2);
  border-radius: 10px;
  color: var(--white);
  border: none;
  padding: 8px 16px;
}
 .contact-box .conatct-form .send-msg:hover{
  background: var(--black);
}
 .contact-box .contactus-right-title{
  font-size: var(--fs-26);
  color: var(--black);
}
 .contact-box .contact-info{
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 65px;
  justify-content: center;
}
 .contact-box .contact-icon{
  font-size: 40px;
  padding-right: 10px;
  color: var(--primary-2);
}
.contact-box .contactus-right a{
  display: flex;
  align-items: center;
}
 .contact-box .sm-list{
  display: flex;
  gap: 10px;
  align-items: center;
}
 .contact-box .contactus-right .sm-icon{
  display: inline-block;
  color: var(--primary-2);
  font-size: 20px;
}
 .contact-box .contactus-right .sm-icon:hover{
  color: var(--black);
}
.contact-box address{
  display: flex;
  align-items: center;
}
/* ::-webkit-scrollbar-thumb:hover {
  background: var(--primary-2);
} */
/* Scroll Style CSS End */

.inline-element-content-box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 15px;
}
.inline-element-content-box p:first-child{
  padding-right: 10px;
}