/* general settings */
@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,200;0,300;0,700;0,800;0,900;1,400;1,500;1,600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap");

:root {
 --primary-color: #000;
 --secondary-color:#1F1A3D;
 --dark-color: #9c3353;
 --primary-light: #8083b9;;
 --secondary-light:#FFE4E1;
 --light-color: #ffc1d3;
  --text-xxs: 0.765rem;
  --text-xs: 0.875rem;
  --text-sm: 1rem;
  --text-md: 1.125rem;
  --text-base: 1.5rem;
  --text-lg: 1.75rem;
  --text-xl: 2.2rem;
  --text-2xl: 3.7rem;
  --body-font: 'AvenirLTPro-medium';
}
body {
  padding: 0;
  margin: 0;
  font-family: var(--body-font);
  color: #5d5d5d;
}
a, a:hover, a:active{ text-decoration: none;}
/* custom common css start */
/* background color css start */
.primary-bg { background-color: var(--primary-color); }
.dark-bg{ background-color: var(--dark-color); }
.secondary-bg { background-color: var(--secondary-color); }
.primary-light-bg { background-color: var(--primary-light); }
.secondary-light-bg { background-color: var(--secondary-light); }
.light-color{ background-color: var(--light-color);}
/* background color css end */
/* color css start */
.primary-text { color: var(--primary-color); }
.secondary-text { color: var(--secondary-color); }
.dark-text { color: var(--dark-color); }
.primary-light-text { color: var(--primary-light); }
.secondary-light-text { color: var(--secondary-light); }
/* color css end */
/* typography css start */
/* font-family: "Raleway", sans-serif;  */
.text-xxs { font-size: var(--text-xxs);}
.text-xs { font-size: var(--text-xs);}
.text-sm { font-size: var(--text-sm);}
.text-md { font-size: var(--text-md);}
.text-lg { font-size: var(--text-lg);}
.text-xl { font-size: var(--text-xl);}
.text-2xl { font-size: var(--text-2xl);}
/* typography css end */
/* button css start */
.primary-button{
  background-color: var(--dark-color);
  color: white !important;
  transition: all .6s ease-out;
}
.primary-button:hover, .primary-button:focus, .primary-button:active, .primary-button.active{
  background-color: var(--dark-color);
  color: white !important;
 box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .14), 0 1px 7px 0 rgba(0, 0, 0, .12), 0 3px 1px -1px rgba(0, 0, 0, .2);
}
.primary-outline-button, .primary-outline-button:focus, .primary-outline-button:hover, .primary-outline-button:active, .primary-outline-button.active{
  color: #9c3353;
  background-color: #fff;
  border: 1px solid #9c3353;
}
.primary-outline-button:hover{
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .14), 0 1px 7px 0 rgba(0, 0, 0, .12), 0 3px 1px -1px rgba(0, 0, 0, .2);
}
.button-secondary{
  background-color: var(--primary-light);
  color: var(--primary-color);
  transition: all .3s ease-out;
}
.button-secondary:hover, .button-secondary:focus, .button-secondary:active, .button-secondary.active{
  background-color: var(--dark-color);
  color: var(--primary-color);
}
.light-button{
  background-color: white;
  color: var(--dark-color);
  transition: all .3s ease-out;
}
.light-button:hover, .light-button:focus, .light-button.active{
  transform: translateY(-10px);
  background-color: white;
  color: var(--dark-color);
  transition: all .3s ease-out;
}
/* button css end */
.form-check-input:checked {
 background-color: var(--primary-light);
 border-color: var(--primary-light);
 box-shadow: 0 0 0 .25rem #dda0dd47;
}
.form-container{ min-height: 80vh;}
.back-bar{width: 50%;}
.bg-black.bg-opacity-25:hover{--bs-bg-opacity: 0.5;}
/* custom common css end */
/* navbar css start */
.link-nav {width: 35%;}
.navbar .nav-link{ padding: 1.8rem 0.8rem !important; font-size: 14px; font-weight: 600; color: #212121 !important;}
.navbar .nav-link:hover, .navbar .nav-link:focus{ background-color: #f5f5f5; color: #212121 !important; }
.navbar .nav-link.active{ background-color: var(--dark-color) !important; color: white !important; }
/* home page css start  */
.slider{ max-height: 16rem; overflow-y: scroll;}
.slider::placeholder{ color: var(--primary-light) !important ;}
.slider::-webkit-scrollbar { width: 2px; height: 0px; }
/* Track */
.slider::-webkit-scrollbar-track { background: transparent; }
/* Handle */
.slider::-webkit-scrollbar-thumb { background: #fff; }
/* Handle on hover */
.slider::-webkit-scrollbar-thumb:hover { background: #fff; }
.large-image { height: 14rem; }
.slider { max-height: 14rem; overflow-y: scroll; }
.slider .small-image img { height: 4rem; width: 4.5rem !important; cursor: pointer; }

/*  */
.badge-image{
  width: 3rem;
  height: 3rem;
  clip-path: polygon(0 0, 0% 100%, 100% 100%);
}
/* home page css start */
.common-banner-section {
  background: -webkit-gradient(linear, left top, left bottom, from(#ffedf2), to(#fff));
  background: linear-gradient(180deg, #ffedf2, #fff);
}
/* treding section */
.search-container {
  max-width: 912px;
  max-width: 57rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}
.search-container .input-wrapper .search-input, .search-container .input-wrapper .search-input:focus {
    padding-left: 1rem !important;
    padding-right: 3.75rem !important;
    font-size: 16px !important;
    font-size: 1rem !important;
}
.search-container .input-wrapper .search-input {
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 56px !important;
  height: 3.5rem !important;
  border: 2px solid #d1d5db !important;
  border-radius: 9999px !important;
  -webkit-transition: border-color .2s ease-in-out;
  transition: border-color .2s ease-in-out;
  color: #374151;
}
.search-container .input-wrapper .search-input:focus {
  border: 2px solid #9c3353 !important;
  outline: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.search-container .input-wrapper .search-button {
  position: absolute;
  right: 8px;
  right: .5rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 44.8px;
  width: 2.8rem;
  height: 44.8px;
  height: 2.8rem;
  background-color: #9c3353;
  color: #fff;
  padding: .75rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  -webkit-transition: background-color .2s ease-in-out;
  transition: background-color .2s ease-in-out;
}
.trending-campaigns-categories .categories-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  gap: 1.5rem;
  place-items: center;
}
#trending-campaigns .nav-item{ width:13rem;}
#trending-campaigns .nav-link {
  color: #000 !important;
  border-radius: .75rem;
  min-width: 11rem;
  height: 112px;
  height: 7rem;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-timing-function: 
cubic-bezier(.4, 0, .2, 1);
    transition-timing-function: 
cubic-bezier(.4, 0, .2, 1);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    cursor: pointer;
    background-image: -webkit-gradient(linear, left top, right bottom, from(#f9f0f2), to(#fff));
    background-image: linear-gradient(to bottom right, #f9f0f2, #fff);
    border: 2px solid #ecedee;
}
#trending-campaigns .nav-link.active, #trending-campaigns .nav-link:hover {
  border-color: #9c3353;
  background-color: rgba(156, 51, 83, .1);
  -webkit-box-shadow: 0 0 0 2px #fff;
  box-shadow: 0 0 0 2px #fff;
}
#trending-campaigns .nav-link:hover { transform: scale(1.1);}
#trending-campaigns .icon-box {
    width: 44px;
    width: 2.75rem;
    height: 44px;
    height: 2.75rem;
    border-radius: 9999px;
    background-image: -webkit-gradient(linear, left top, right bottom, from(#9c3353), to(#691a47)) !important;
    background-image: linear-gradient(to bottom right, #9c3353, #691a47);
    -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
    -webkit-transition: -webkit-box-shadow .3s ease-in-out;
    transition: -webkit-box-shadow .3s ease-in-out;
    transition: box-shadow .3s ease-in-out;
    transition: box-shadow .3s ease-in-out, -webkit-box-shadow .3s ease-in-out;
}
.campaign-image-container{ height: 14rem; width: 100%;}
.raised.progress{
  /* height: 10px; */
  height: .525rem;
  background-color: #f9eef0;
  border-radius: 9999px;
  overflow: hidden;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
.raised .progress-bar{
  height: 100%;
  background-color: #37d123;
  border-radius: 9999px;
}
.categories-li{ height: 15rem; width: 13.5rem; overflow-y: scroll;}
.categories-li .dropdown-item:hover{ background-color: #eee; }
/* trust section css start */
.trust-nav {
    border: 1px solid #e0e0e0;
    background-color: #f5f5f5;
    border-radius: 1rem;
    padding: .25rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    max-width: 448px;
    max-width: 28rem;
    margin: 0 auto;
    width: 100%;
}
.trust-nav .nav-item{ width: 50%; }
.trust-nav .nav-link {
  color: #212121;
  background-color: transparent;
  border: none;
  cursor: pointer;
  -webkit-transition: background-color .3s 
ease, -webkit-box-shadow .3s 
ease;
  transition: background-color .3s 
ease, -webkit-box-shadow .3s 
ease;
  transition: background-color .3s 
ease, box-shadow .3s 
ease;
  transition: background-color .3s 
ease, box-shadow .3s 
ease, -webkit-box-shadow .3s 
ease;
}
.trust-nav .nav-link.active {
  background-color: #fff;
  color: var(--dark-color);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
  font-weight: 600;
}

/* donate page css start */
.filter-categories{ height: 75vh; overflow-y: scroll;}
.filter-footer{box-shadow: 0 -3px 6px 0 rgba(156, 51, 83, .2);}
.custom-option input:checked:before, .category input:checked:before{
  content: '✓';
  position: absolute;
  top: 0.1rem;
  left: -1.2rem;
  transform: rotate(3deg);
  font-size: 18px;
  color: var(--dark-color);
}
.custom-list .category, .custom-list .category label, .custom-list .custom-option label, .custom-list .custom-option{ cursor: pointer;}
.custom-list .category:hover, .custom-list .custom-option:hover{ background-color: #f3f3f3; }
.custom-option:has(input:checked){ background-color: #f3f3f3 !important; }
.category:has(input:checked){ background-color: #f3f3f3 !important; }

:root {
  --progress-bar-width: 60px;
  --progress-bar-height: 60px;
  --font-size: 1rem;
}
.circular-progress {
  width: var(--progress-bar-width);
  height: var(--progress-bar-height);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.inner-circle {
  position: absolute;
  width: calc(var(--progress-bar-width) - 10px);
  height: calc(var(--progress-bar-height) - 10px);
  border-radius: 50%;
  background-color: white !important;
}

.percentage {
  position: relative;
  font-size: var(--font-size);
  color: rgb(0, 0, 0, 0.8);
}

@media screen and (max-width: 800px) {
  :root {
    --progress-bar-width: 150px;
    --progress-bar-height: 150px;
    --font-size: 1.3rem;
  }
}

@media screen and (max-width: 500px) {
  :root {
    --progress-bar-width: 120px;
    --progress-bar-height: 120px;
    --font-size: 1rem;
  }
}
/* donate page css start */
.donate-page-banner{ width: 75%; border: 2px solid #ddd !important;
    text-align: center;
    max-width: 800px;
    border: 1px solid hsla(0, 0%, 44%, .15);
    background-color: hsla(0, 0%, 92%, .2);
    font-size: 20px;
    color: #212121;
    padding: 10px 15px;
}
/* media css start */
/* small device media query start */ 
@media(max-width: 767px){
  :root {
    --text-xs: 0.875rem;
    --text-sm: 1rem;
    --text-md: 1.125rem;
    --text-base: 1.5rem;
    --text-lg: 1.75rem;
    --text-xl: 2.2rem;
    --text-2xl: 3rem;
  }
  /* navbar start */
  .navbar .offcanvas.offcanvas-end {
    background: linear-gradient(186deg, #a33555 106%, #5f2747 0);
    color: #fff;
    width: 82%;
  }
  /* border-left: 2px solid var(--dark-color); */
  .navbar .nav-link{ padding: 0.6rem 0.6rem 0.6rem 1rem !important; font-size: 14px; font-weight: 600; color: white !important;}
  .navbar .nav-link.active{ background-color: white; color: var(--dark-color) !important; position: relative; }
  .navbar .nav-link.active::before{ 
    content: '';
    display: block;
    width: 3px;
    height: 1.5rem;
    background: var(--dark-color);
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 0;
  }
  .nav-link:hover, .nav-link:focus{ background-color: #f5f5f5; color: #212121 !important; }
  /* navbar end */
 .form-box button{ width: 100%;}
 .back-bar{width: 100%;}
 .link-nav {width: 100%;}

}
@media (min-width: 1024px) {
  .trending-campaigns-categories .categories-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}