/* CSSriables */
:root {
  /* --bs-primary-color-dark:#3f35e3;
  --bs-primary-color:#4f46e5; */

  --light-theme-background-01: #fcfcfa;
  /* main background color */
  --light-theme-background-02: #f8f5ee;
  --light-theme-background-03: #f8f5ee;

  --bs-primary-color-dark: #ff0062;
  --bs-primary-color: #f72575;

  --bs-primary-color-light: rgba(247, 37, 133, 0.1);

  --bs-primary-color-light2: rgba(241, 177, 206, 0.089);

  --bs-black-color: #1f2937;
  --bs-white-color: #fff;
  --bs-white-color-dark: #f8f9fa;

  --bs-gray-color: #4b5563;
  --bs-supporting-gray-light: #dee2e6;
  --bs-supporting-gray: #ccc;
  --bs-gray-100: #eee;

  /* --bs-purple-accent: #6c56c7;
  --bs-violet-accent: #9b5de5; */

  --bs-gradient-dark: #ff478d;
  /* darker & richer shade */
  --bs-gradient-light: #ff6da5;
  /* lighter & softer shade */
}

body {
  font-family: "Poppins", sans-serif;
  background-color: var(--light-theme-background-01);
}

.section-gradient-background {
  background: linear-gradient(190deg, #f1a9c546 0%, #ce3c7457 100.59%);
  /* color: var(--bs-white-color); */
  color: var(--bs-black-color);
}

.btn-gradient-background {
  background: linear-gradient(270deg, #f71a6f, #f71a6f);
  color: var(--bs-white-color);
  transition: all 0.6s ease;
}

.btn-gradient-background:hover {
  background: linear-gradient(270deg, #e00157dc, #e00157dc);
  color: var(--bs-white-color);
}



.card-grid>.card {
  border-radius: 10px;
}

.gradient-background {
  background: linear-gradient(135deg, var(--bs-gradient-dark), var(--bs-gradient-light));
  color: var(--bs-white-color);
}

.rounded-pill {
  border-radius: 25px;
}

/* Animation Styles */
.fade-in {
  opacity: 0;
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
  transform: translateY(20px);
}

.fade-in.active {
  opacity: 1;
  transform: translateY(0);
}

.slide-in-left {
  opacity: 0;
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
  transform: translateX(-50px);
}

.slide-in-left.active {
  opacity: 1;
  transform: translateX(0);
}

.slide-in-right {
  opacity: 0;
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
  transform: translateX(50px);
}

.slide-in-right.active {
  opacity: 1;
  transform: translateX(0);
}

.delay-1 {
  transition-delay: 0.2s;
}

.delay-2 {
  transition-delay: 0.4s;
}

.delay-3 {
  transition-delay: 0.6s;
}

/* Custom navbar style */
main {
  padding-top: 4.5rem;
}

.navbar {
  padding: 0rem 0rem;
}
.navbar-brand {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--bs-primary-color);
  /* purple shade */
}
/* Navbar link styles */
.nav-link {
  color: var(--bs-black-color);
  font-weight: 400;
  transition: color 0.2s ease;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--bs-primary-color);
  text-decoration: none;
}

.logo {
  max-height: 50px !important;
}
.btn-sm{
  height: 50px;
  width: 170px;
  border-radius:12px;
  align-items: center;
  justify-content: center;
  padding-top: 12px;
  font-size: 18px;
}
/* navbar style end */

/* common btn css start */
.btn-primary {
  /* background: linear-gradient(135deg, var(--bs-primary-color) 0%,var(--bs-violet-bold)100%); */
  background-color: var(--bs-primary-color);
  color: var(--bs-white-color);
  font-weight: 500;
  border: none;
  transition: background 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--bs-primary-color-dark) !important;
  color: var(--bs-white-color) !important;
  border-color: var(--bs-primary-color-dark) !important;
}

.btn-outline-primary {
  color: var(--bs-primary-color);
  border-color: var(--bs-primary-color);
  font-weight: 500;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--bs-primary-color) !important;
  color: var(--bs-white-color) !important;
  border-color: var(--bs-primary-color) !important;
}

.logo {
  display: inline-block;
}
.section-specing{
padding-top: 80px;
padding-bottom: 80px;
}

.text-purple{
  text-align: left !important;
}
p{
  color: var(--bs-gray-color);
}
.common-shadow:hover{
 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);}

 .section-top-heading span {
  color: var(--bs-primary-color);
  background-color: var(--bs-primary-color-light);
 }
/* common btn css end */
@keyframes bounce {
  0% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-6px);
  }

  60% {
    transform: translateY(4px);
  }

  100% {
    transform: translateY(0);
  }
}

/* Optional: keep big size only for desktops */
@media (min-width: 992px) {
  .navbar-brand {
    font-size: 1.35rem;
    font-weight: 600;
  }

  .navbar-nav {
    gap: 1rem;
  }
}

.gap-4 {
  gap: 1rem !important;
}

/* Message animation  in Contact Us Section*/
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* hero setion */
.hero-section {
  /* background:linear-gradient(pink,#f72575,#ff0062); */
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 50%, #f4dce5 100%);

}
.section-background{
  background-color: var(--bs-primary-color-light2);
}
main {
  padding-top: 2.2rem;
}

.hero-section .left-side {
  padding-right: 6rem;
  padding-top: 4rem;
  padding-bottom: 2.5rem;

}

.hero-section.left-side h1 {
  font-weight: bolder;
}

.hero-section.left-side p {
  color: var(--bs-gray-color);
}

.hero-main-title {

  color: var(--bs-gray-color);
  line-height: 3.2rem;
  /* text-shadow: #1f2937; */
}

.hero-section .right-side {

  /* background: linear-gradient(94deg, #d83373 0%, #ff65a58a 35%, #ff9fc6 70%, #d83373 100%); */
  background: linear-gradient(94deg, #f26ea0 0%, #dc2b75 35%, #f2b8cfc7 70%, #d83373 100%);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  margin-top:70px;

}

/* hero-section-end style */

/* --------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------- */

/* features section start */

.card{
  background-color: var(--bs-white-color);
  padding: 30px;
  border-radius: 20px;
  border: 1px solid var(--bs-gray-100);
  transition: all 0.2s ease;
  
}
.card p{
  text-align: left !important;
}

.icon-container {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin-bottom: 1rem;
  background-color:var(--bs-primary-color-light);
  height: 50px;
  width: 50px;
 
}
.icon-container i{
  color: var(--bs-primary-color);
  width: 30px;
  text-align: center;
  /* font-size: 30px; */
}
.head{
  font-size: 18px;
  color: var(--bs-black-color);
 text-align: left !important;
}
.sub-card-text{
    font-size: 15px;
  color: var(--bs-gray-color);
}
.card:hover{
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    /* background-color: #d83373;
    color: white; */
  }

/* click and highlight */

.card:target {
  border: 2px solid #f72575;
  box-shadow: 0 0 20px  rgba(243, 75, 151, 0.209);
  transform: scale(1.05);
  background-color: #fcfafbf0;
}

    
/* 
.common-card:hover{
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);} */
/* Feacture section End */

/* --------------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------------- */

/*How it Work start  */
.card-for-roles{
    background-color:var(--bs-white-color);
  border: 1px solid var(--bs-gray-100);
  border-radius: 20px;
  padding: 30px;
  /* text-align: center; */
  transition: all 0.3s ease;
  width: 395px;
}

.card-for-roles:hover{
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}
.card-for-roles h5{
    color: var(--bs-black-color);
  text-align: left !important;
}
.card-for-roles p{
  text-align: left !important;
  color: var(--bs-gray-color);
}
.card-for-roles .icon-container{

  margin-bottom: 1rem;
  color: var(--bs-primary-color);
  font-size: 2rem;
}

.icon-wrapper {
   
  position: relative;
  display: inline-block;
}
.badge {
  position: absolute;
  bottom:30px;
  right: 0;
  width: 20px;
  height: 20px;
  font-size: 10px;
  /* background-color: #4caf50; */
  border: 2px solid var(--bs-supporting-gray);
  border-radius: 50%;
  background-color: var(--bs-primary-color);

}
.arrow{
  position: absolute;
  top:10rem;
  right:10px;
  color: var(--bs-supporting-gray);
  /* font-weight: 600; */
  
}
.arrow i{
  font-weight: 600;
  font-size:25px;
}
.service-point{
  text-align: left;
  display:flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
 
}
.service-point i {
  color: var(--bs-gray-color);
  font-size: 1.1rem;
  /* color: var(--bs-primary-color); */
}

.service-point p {
  margin: 0;
  color: var(--bs-gray-color);
}

  /*
/*How it Work  end */

/* -------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------- */

/* Role based Access start */

 /* Default button styles */
.nav-link.btn-admin,
.nav-link.btn-provider,
.nav-link.btn-staff {
  background-color: var(--bs-white-color);
  border: 1px solid var(--bs-supporting-gray);
  color: var(--bs-gray-color);
  border-radius: 10px;
}

/* ACTIVE STATE for ALL */
.nav-link.active {
  background-color: var(--bs-primary-color) !important;   /* Pink */
  color: var(--bs-white-color) !important;                 /* White text */
  border-color: var(--bs-primary-color) !important;       /* Pink border */
}

/* Role based Access end */

/* Appointmnet start */

.card-for-appointment{
    background-color:var(--bs-white-color);
  border: 1px solid var(--bs-gray-100);
  border-radius: 20px;
  padding: 30px;
  /* text-align: center; */
  transition: all 0.3s ease;
  width: 395px;
  text-align: center !important;
}

.card-for-appointment:hover{
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.09);

}
.card-for-appointment .icon-container{
    /* text-align: left !important; */
  margin-bottom: 1rem;
  color: var(--bs-primary-color);
  font-size: 2rem;
  /* display: flex;
  justify-content: start; */
}


.badge {
    
  
    /* background-color: #ff0033; */
   position: absolute;
  bottom:30px;
  right: 0;
  width: 20px;
  height: 20px;
  font-size: 10px;
  /* background-color: #4caf50; */
  border: 2px solid var(--bs-supporting-gray);
  border-radius: 50%;
  background-color: var(--bs-primary-color);

          /* display: flex;
  justify-content: start; */
}
.arrow-appointment{
  position: absolute;
  top:5rem;
  right:2px;
  color: var(--bs-supporting-gray);
  /* font-weight: 600; */
  
}
.arrow-appointment i {
  font-weight: 600;
  font-size:25px;

}

.card-for-appointment:hover{
 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}
.carousel-item{
    transition: opacity .6s ease, transform .6s ease;
}
/* .carousel-item img{
  transition: transform 6s ease;
}
.carousel-item.active img{
  transform: scale(1.05);
} */
.carousel{
  border-radius: 20px;
    /* background: linear-gradient(180deg, #ffffff, #f7f7ff); */
}

/* Appointmnet end */
@media (max-width:375){
  .card-for-appointment{
    margin-top:2rem;
  }
  .card-for-roles{
      margin-top: 2rem;
  }
  .tab-pane .col-md-9{
    margin-top: 2rem;
  }
   .section-top-heading{
    margin-top: 50px;
   }
}

/* Security Section start */
.security{
/* background: linear-gradient(237deg, #e02a6f 10%, #971c56 0%, #ea1e6c 10%, #f52f7bd9 90%); */
background:linear-gradient(237deg, #ea1666 0%, #b91663 0%, #ea1e6c 0%, #f52f7bd9 100%);
}
.security-card{
  background-color: #ffffff;
  color: var(--bs-black-color);
}
.security-card i {
  color: var(--bs-primary-color);
}

.security-card:hover{
  /* background-color: rgb(255 255 255 / 23%); */
}
.security-p-text{
  color: var(--bs-black-color);
}
/* Security Section end */
/* Fotter Start */
.fotter{
  /* background:linear-gradient(237deg, #000000 0%, #030303 0%, #050505 0%, #000000d9 100%); */
    /* background-color:linear-gradient(237deg, #010101 0%, #000000 0%, #000000cc 0%, #000000e0 100%); */
    background: linear-gradient(237deg, #262323fa 0% 0%, #442929 0%, #000000d1 0%, #000000e3 100%);;

}
.fotter-ul li{
  list-style: none;
}
.fotter-ul li a{
       color: var(--bs-gray-color);
       background-color: var(--bs-white-color);
       padding: 10px;
       border-radius: 8px;
       transition: all 0.5s ease;
 
}
.fotter-ul li a:hover{
       color: var(--bs-white-color);
       background-color: var(--bs-primary-color);
     
 
}
.fotter-ul{
  text-align: left !important;

    gap:1rem;
    padding-left: 0;
}
.fotter-link p a{
  text-decoration: none;
  color: var(--bs-white-color)
}

/* .fotter-link p {
  margin-bottom: 12px;
} */
 .fotter-link h5{
  color: var(--bs-primary-color);
 }
.fotter-link p a:hover{
  text-decoration: none;
  color: var(--bs-primary-color);
}
.fotter-link .info,.title{
  color: var(--bs-white-color);
}
.address{
  color: var(--bs-white-color);
}

/* Fotter End */

/* @media (max-width: 767px) {
   .hero-title {
    font-size: 1.5rem;
    line-height: 1.05;
  }
  .section-top-heading{
     
  }
  } */

/* contact form focus input box */

.form-control:focus {
  border-color: #f72575 !important;
  box-shadow: none !important;
  outline: none !important;
}