/***********/
/*
Name: Loyalty mart
Created By: Murugan
*/
/***************/

/* Fonts */
:root {
  --font-default: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  
  --font-primary: "Montserrat", sans-serif;
  
  --font-secondary: "Raleway", sans-serif;
  --font-title: 'Lato', sans-serif;
}

.subject-tit{
  height:40px !important;
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  /* white-space: nowrap; */
  /* overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines to show 
          line-clamp: 2; 
  -webkit-box-orient: vertical; */
}
.subject-tit2{
  height:50px !important;
  white-space: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  /* white-space: nowrap; */
  /* overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines to show 
          line-clamp: 2; 
  -webkit-box-orient: vertical; */
}

/* .text-secondary{
  margin-top:35px!important;
} */

/* Colors */
:root {
	--color-default: #2b180d;
	--color-primary: #56b8e6;
	--color-secondary: #1b2f45;
	--color-white: #FFFFFF;   	
	--background-primary: #008cbd;
	--background-light: #bbedff;
	--background-blue: #00BDFF; 
	--background-white: #FFFFFF;
	
}

/* Smooth scroll behavior */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  font-family: var(--font-primary);
  color: var(--color-default);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: #82cbed;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-default);
}
.bdr30{border-radius:30px;}
.bg-primary{background-color:#008cbd !important;}
.btn-info{background-color:#00bdff !important; font-weight:600; color:#fff;letter-spacing:1px;}
.section_space {
    /*overflow: hidden;*/
    padding-top: 40px;
}
@media only screen and (max-width: 768px) {	
	.section_space {overflow: hidden;padding: 20px 0;}
	.h3, h3 {font-size: calc(1rem + .6vw);}
}

.featured-title{font-weight: 700;}
.bg-blue{background:var(--background-blue)}

.btn-blue{display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: #008CBC;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: 2px solid #008CBC;
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--background-white);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn-blue:hover{background-color: var(--background-blue); border: 2px solid #008CBC;color:#fff;}
.btn-primary{background:var(--background-blue); border:none;}
.btn-primary:hover{background:var(--background-primary)}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header .seprator{border-right:1px solid #000; margin:0px 20px 0px 20px;}
#mainNav ul li a{font-size:20px; text-transform:uppercase; padding:20px 30px;color:#615859; font-weight:600;}
#mainNav ul li a:hover,#mainNav ul li a.active{color:#008cbd;text-decoration:underline;}
.ms-n5 {margin-left: -40px;}

@media only screen and (max-width: 768px) {
	#mainNav ul li a {
    font-size: 14px;
    text-transform: uppercase;
    padding: 10px 7px 0px 10px;
    color: #615859;
    font-weight: 600;}

}


.profile_circle_img{display:inline-block; width:50px;height:50px; border-radius:50%;text-align:center; }
/*----------------------
# HOME - Carousel
---------------------*/
.carousel-dark .carousel-indicators [data-bs-target] {
    background-color: #fff;
}
.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 20px;
    height: 20px;
	border-radius:50%;
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #fff;
    background-clip: padding-box;
    border: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    /*opacity: .5;*/
    transition: opacity .6s ease;
}

carousel-indicators .active {
    opacity: 1 !important;
}


@media only screen and (max-width: 768px) {
	.carousel-indicators [data-bs-target] {   
    width: 10px;
height: 10px;}
   
}
	
/*---------------------
# HOME - Exclusive Offer
----------------------*/


.gallery {position: relative;}

/*.image {
  display: block;
  width: 100%;
  height: auto;
}*/

.gallery .overlay {
 position: absolute; 
  bottom: 0px; 
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1; 
  width: 100%;
  transition: .5s ease;
  color: white;
  font-size: 20px;
  padding: 10px;
  font-weight:600;
  text-align: center;
  opacity: 1;
  left: 0;
  right: 0;
  background-color: #008cbd;
  overflow: hidden;
  width: 100%;
  border-radius:0.375rem 0.375rem;
}

.gallery:hover .overlay {
  opacity: .8;
 color: white;
  font-size: 20px;
background:#000;
height:100%;
display: flex;
  align-items: center;
  text-align: center;
  flex: 1;
  justify-content:center;
  transition: .5s ease;
  
  
}

@media only screen and (max-width: 768px) {	
.gallery img{height:210px;}
}

/*---------------------
# HOME - Deal of the day
-----------------------*/
.deal_day .img-box {
    height: 150px;
    margin-bottom: 20px;
    width: 100%;
    position: relative;
}


.deal_day .img-box img {
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    left: 0;
    right: 0;
}


#deal_day .img{width:60%;}

.deal_day .star-rating li {
	padding: 0;
}
.deal_day .star-rating i {
	font-size: 14px;
	color: #ffc000;
}
.deal_day h6{margin-bottom:15px;}

.deal_day h5{font-weight:700;}
.deal_day h5 small{font-size:.8em;font-weight:normal;}
/*-------------------
# Home - Dining Offer
---------------------*/
.dingImg{position:relative;margin-bottom:10rem;}
.dingImg img{border-radius:10px;}
.dining .infobox{background:#fff; width:80%; margin:0px auto; left:10%;bottom:-35%; padding:20px;position:absolute;}
.dining .infobox h4{height:65px; font-weight:800;color:#333;}
.dining .infobox ul{list-style-type:none; margin:0px;padding:0px;}
.dining .infobox ul li{padding:6px 0px;}
/*---------------------
# Home - Pharmacy offer
-------------------*/
.pharmacy_offer img{border-radius:10px 10px 0px 0px;}

.pharmacy_offer h5{font-weight:600; color:#4A4A4A;}
.pharmacy_offer .card .card-footer{background:var(--background-blue)}
/*--------------------------------------------------------------
# Login
--------------------------------------------------------------*/
.login{background-color:#008cbd;padding:5rem 0rem;}
.login-form-bg{background:#fff;padding:2rem;border-radius:10px;}
.login-form{padding:1rem 2rem;}
.login-form-bg label{font-weight:600;}

.otp .form-control {
    width: 15%;
    margin: 0px auto;
    padding: 12px 10px;
    text-align: center;
}

@media only screen and (max-width: 768px) {	
.login-form-bg{background:#fff;padding:1rem;}
}

/*--------------------------------------------------------------
# Popular Offer
--------------------------------------------------------------*/
.popular_offer{background:var(--background-light);}

.dining_offer{background:#fff;}
.dining_offer img{border-radius:10px;}

.dining_offer .btn-outline-primary{border: 2px solid #00BDFF; font-weight:600; color:#00BDFF}
.dining_offer .btn-outline-primary:hover{background:var(--background-blue);color:var(--color-white)}
.deal_day h5 small {
    font-size: .8em;
    font-weight: normal;
}


#viewDealModal .star-rating i {
    font-size: 14px;
    color: #ffc000;
}

/*--------------------------------------------------------------
# Inner Home - Settings
--------------------------------------------------------------*/
#settings .nav a{font-size:18px; color:#1EB2A6; font-weight:600; }
#settings .nav a:hover {border-bottom:2px solid #ccc;}
#settings .nav-pills .nav-link.active, .nav-pills .show > .nav-link{ border-bottom:4px solid #C89C07 !important; border-radius:0px; border:0px;}
#settings .form-control{ border: 2px solid #1EB2A6;}
#settings .nav-tabs .nav-link{color:#444;font-size:18px !important; }
#settings .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{color:#008cbd !important;}
#settings .nav-tabs{border-color:#ccc !important}
 #settings .nav-tabs .nav-link.active {border-color:#ccc #ccc #fff !important}
 #settings .nav-link{padding: .5rem 2rem !important}
@media only screen and (max-width: 768px) {
	#settings .nav-tabs .nav-link{color:#444;font-size:14px !important; }
	#settings .nav-link {padding: 0.5rem  !important;}	
}	
.profile-image {   
    position: relative;
}
.profile-image form a {
    position: absolute;
    top: 47%;
    margin: 0 auto;  
    left: 62%;
    background: #fff;
    padding: 10px;
    border-radius: 100px;
    box-shadow: 0px 0px 15px rgb(53 49 74 / 31%);
	cursor:pointer;
}

 .profile-image input[type="file"] {
    cursor: pointer;
    display: block;
    height: 100%;
    left: 0;
    opacity: 0 !important;
    position: absolute;
    top: 0;
    width: 100%;
	cursor:pointer;
}




.bdr1{border-left:20px solid #008cbc}
.bdr2{border-left:20px solid #858585}
.bdr3{border-left:20px solid #0c9300}


#logout-modal .modal-content{
	border-radius: 15px;
    width: 350px;
    background:var(--background-primary);
    background-size: auto;
    justify-content: center;
    align-items: center;}

#logout-modal .modal-content img{width:40%; margin:30px auto}

	
	
#password_success .modal-content{
	border-radius: 15px;
    min-height: 300px;
    background:var(--background-primary);
    background-size: auto;
    justify-content: center;
    align-items: center;}

#password_success .modal-content img{width:40%; margin:30px auto}


@media only screen and (max-width: 768px) {
.profile_form .btn{width:100%;margin-top:10px;}
   
}

	
/******PayMent plan*****/


#choose_plan .plan_details ul li{padding:10px 0px;} 
#choose_plan .plan_details{min-height:185px;padding:0em 2em;}
#choose_plan .card:hover{box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;cursor:pointer}
/*#choose_plan .card .card-body .btn{background:var(--background-blue); border:none;}
#choose_plan .card .card-body .btn:hover{background:var(--background-primary)}*/

#plan_payment .modal-content{ 
border-radius:0px; 
min-height:350px; 
background-size:auto;
}
.left_bg{background:#008cbd; color:#000;}

#plan_payment .modal-header, .modal-footer{border:0px;}

#plan_payment .modal-footer{justify-content:center}

#plan_payment hr{margin:0px; padding:0px;}

.payment-button {
    background: #fff;
    border-radius: 8px;
    padding: 5px 10px;
	border:1px solid #ccc;
	text-align:center;
}
#plan_payment img{max-width:70%;text-align:center;}
#plan_payment .fs-5{font-weight:500;}

#plan_payment .modal-body{padding:0px;}
#plan_payment .payment-button:hover{background:#f4f4f4;}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

.footer {background:#002535;padding-top:20px;color:#fff;font-size:18px;}
.footer p{margin-bottom:10px;}
.footer h6{color:#fff; font-size:22px;  padding-bottom:5px; margin-bottom:15px; }
.footer ul{list-style-type:none; padding:10px 0px;margin:0px;display:flex; justify-content:start;}
.footer ul li a{ padding:0px 6px; margin:5px 10px 0px 0px;}
.footer a{color:#fff; text-decoration:none; font-size:14px;}
.footer  a:hover{color:#fff;}
.footer .btm_strip{background-color:#000000;padding:10px;  font-size:14px;}

@media only screen and (max-width: 768px) {
.footer{text-align:center;}
.footer ul{justify-content:center;}	
}

/*--------------------------------------------------------------
# Scroll top button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background: var(--color-primary);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: #fff;
  line-height: 0;
}

.scroll-top:hover {
  background: rgba(86, 184, 230, 0.8);
  color: #fff;
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid var(--color-primary);
  border-top-color: #fff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}