@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Manrope:wght@400;500;600&family=Nunito:wght@400;500;600;700;800&display=swap');

:root {
    --main-color: #00B361;
    /* --main-color2: #1C3E61; */
    --main-color2: #07182a;
    --main-color3: #fbd45a;

    --secondary-color: #F9F4E8;
    /* --secondary-color: #f4f4f4; */
    --body-bg: #fff;

    --h-font: 'Nunito', sans-serif;
    --p-font: 'Manrope', sans-serif;
    --top-font: 'Caveat', cursive;

    --h-color: #1e3869;
    --p-color: #333d46;
}

@media (min-width: 1536px) {
    .container {
        max-width: 1440px;
    }
}

body {
    color: var(--p-color);
    font-size: 16px;
    background-color: var(--body-bg);
    font-family: var(--p-font);
    line-height: 1.7;
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}
a, span {
    display: inline-block;
}
a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    color: var(--main-color);
    text-decoration: none;
}

label {
    text-transform: capitalize !important;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 14px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--h-font);
    line-height: 1.3;
    font-weight: 700;
    color: var(--h-color);
}


h1 {
    font-size: 48px;
}

h2 {
    font-size: 38px;
}

h3 {
    font-size: 30px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 16px;
}

.cmn-btn {
    padding: 12px 30px;
    background-color: var(--main-color);
    color: #fff;
    border-radius: 99px;
    -webkit-border-radius: 99px;
    -moz-border-radius: 99px;
    -ms-border-radius: 99px;
    -o-border-radius: 99px;
    text-align: center;
    border: none;
    font-weight: 600;
}
.cmn-btn:hover {
    color: #fff;
}

.cmn-btn2 {
    padding: 12px 30px;
    background-color: var(--main-color3);
    border-radius: 99px;
    -webkit-border-radius: 99px;
    -moz-border-radius: 99px;
    -ms-border-radius: 99px;
    -o-border-radius: 99px;
    text-align: center;
    border: none;
    font-weight: 600;
}
.cmn-btn2:hover {
    color: inherit;
}

.border-btn {
    padding: 12px 30px;
    background-color: transparent;
    border: 1px solid var(--main-color);
    color: #fff;
    border-radius: 99px;
    -webkit-border-radius: 99px;
    -moz-border-radius: 99px;
    -ms-border-radius: 99px;
    -o-border-radius: 99px;
    text-align: center;
    font-weight: 500;
}
.border-btn:hover {
    background-color: var(--main-color);
    color: #fff;
}
.border-btn2 {
    padding: 12px 30px;
    background-color: transparent;
    border: 1px solid var(--main-color);
    color: var(--p-color);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    text-align: center;
    font-weight: 500;
}
.border-btn2:hover {
    background-color: var(--main-color);
    color: #fff;
}

.banner-btn-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: -3px -10px;
}

.banner-btn-group [class*="-btn"] {
    margin: 3px 10px;
}

.form-control, .form-select {
    height: 50px;
    background-color: var(--body-bg);
    padding: 10px 15px;
    color: var(--h-color) !important;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    box-shadow: 0 0 #0000,0 0 #0000, 0 1px 2px 0 rgba(0,0,0,.05);
}

.form-control.style-white {
    background-color: #fff;
}
.form-control.copy-text {
    background-color: #e5e5e5 !important;
}

.form-control.style-white:focus {
    background-color: #fff;
}

textarea.form-control {
    min-height: 120px;
}

.form-control::-webkit-input-placeholder {
  color: #8f8f8f;
  transition: all 0.3s;
}
.form-control::-moz-placeholder {
  color: #8f8f8f;
  transition: all 0.3s;
}
.form-control:-ms-input-placeholder { 
  color: #8f8f8f;
  transition: all 0.3s;
}
.form-control:-moz-placeholder {
  color: #8f8f8f;
  transition: all 0.3s;
}


.form-control:focus::-webkit-input-placeholder {
    color: #fff;
  }
  .form-control:focus::-moz-placeholder {
    color: #fff;
  }
  .form-control:focus:-ms-input-placeholder { 
    color: #fff;
  }
  .form-control:focus:-moz-placeholder {
    color: #fff;
  }

.form-control {
    padding: 10px 15px;
}

.form-control:disabled, .form-control[readonly] {
    background-color: rgba(255, 255, 255, 0.05);
}

.form-select option {
    background-color: #fff;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--main-color);
    outline: 1px solid var(--main-color);
    box-shadow: 0 3px 5px #00b36228;
    background-color: var(--body-bg);
}
.has-bg-img {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.section-bg {
    background-color: var(--secondary-color);
}

.section-bg + .section-bg {
    border-top: 1px solid rgba(255,255,255,0.1);    
}

.section-bg2 {
    background-color: var(--main-color2);
}

.site-bg {
    background-color: var(--main-color);
}

img {
    max-width: 100%;
}


@media screen and (max-width: 768px) {
    [data-aos-delay] {
        transition-delay: 0 !important;
    }
}

#scrollToTop {
    position: fixed;
    bottom: 0;
    right: 30px;
    width: 50px;
    height: 50px;
    border: 2px solid #fff;
    font-size: 20px;
    background-color: var(--main-color);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    z-index: 3;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s;
}

#scrollToTop.fixed-scrollToTop {
    opacity: 1;
    visibility: visible;
    bottom: 30px;
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--main-color2);
    z-index: 99999;
}

.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
    animation: loader 1.2s infinite ease-in-out;
}
.loader span {
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    background-color: var(--main-color);
    animation: loaderBlock 1.2s infinite ease-in-out both;
}
.loader span:nth-child(1) {
    top: 0;
    left: 0;
}
.loader span:nth-child(2) {
    top: 0;
    right: 0;
    animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}
.loader span:nth-child(3) {
    bottom: 0;
    left: 0;
    animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}
.loader span:nth-child(4) {
    bottom: 0;
    right: 0;
}
  

  @keyframes loader {
    0%, 10%, 100% {
      width: 80px;
      height: 80px;
    }
    65% {
      width: 150px;
      height: 150px;
    }
  }
  @keyframes loaderBlock {
    0%, 30% {
      transform: rotate(0);
    }
    55% {
      background-color: var(--main-color);
      opacity: 0.65;
    }
    100% {
      transform: rotate(90deg);
    }
  }
  @keyframes loaderBlockInverse {
    0%, 20% {
      transform: rotate(0);
    }
    55% {
      background-color: var(--main-color);
      opacity: 0.65;
    }
    100% {
      transform: rotate(-90deg);
    }
  }
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

#header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: all 0.5s;
    z-index: 997;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

#header.fixed-header,
#header.header-inner-pages {
    background: var(--main-color2);
}

#header.fixed-header {
    position: fixed;
}

#header .logo {
    font-size: 32px;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 2px;
}

#header .logo a {
    color: #fff;
}

#header .logo a span {
    color: #ffc451;
}

#header .logo img {
    max-height: 45px;
}

@media screen and (max-width:330px) {
    #header .logo {
        font-size: 18px;
    }
}

@media (min-width: 992px) {
    .d-lg-block {
        display: block!important;
        display: flex!important;
    }
}

.header-right .btn-border {
    border-color: #fff;
    background-color: rgba(255,255,255,0.05);
}
.header-right .btn-border:hover {
    border-color: var(--main-color);
}

.inner-page-header {
    background-color: var(--main-color2);
    position: static !important;
}

.header-right + .mobile-nav-toggle {
    display: none;
}

@media (max-width: 991px) {
    .header-right + .mobile-nav-toggle {
        display: inline-block;
    }
}

/**
* Desktop Navigation 
*/

.navbar {
    padding: 0;
}

.navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
}

.navbar li {
    position: relative;
    z-index: 1;
}

@media (max-width: 991px) {
    .navbar li {
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .navbar a {
        color: #fff !important;
    }
    .navbar li.active a {
        color: var(--main-color) !important;
    }
    .navbar li:last-child {
        margin-top: 15px;
        border-bottom: none;
    }
}

.navbar a,
.navbar a:focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 20px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    transition: 0.3s;
}

.navbar a::after {
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--main-color);
    z-index: -1;
    opacity: 0;
}

.navbar li.active a {
    color: var(--main-color);
}

.navbar li.active a::after {
    opacity: 1;
}
.navbar a i,
.navbar a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
}

.navbar a:hover,
.navbar li:hover>a {
    color: var(--main-color3);
}

.navbar .dropdown ul {
    display: block;
    position: absolute;
    left: 14px;
    top: calc(100% + 30px);
    margin: 0;
    padding: 10px 0;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
    transition: 0.3s;
}

.navbar .dropdown ul li {
    min-width: 200px;
}

.navbar .dropdown ul a {
    padding: 10px 20px;
    font-size: 14px;
    color: #151515;
    font-weight: 400;
}

.navbar .dropdown ul a i {
    font-size: 12px;
}

.navbar .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
}

.navbar .dropdown .dropdown ul {
    top: 0;
    left: calc(100% - 30px);
    visibility: hidden;
}

.navbar .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: 100%;
    visibility: visible;
}

@media (max-width: 1366px) {
    .navbar .dropdown .dropdown ul {
        left: -90%;
    }
    .navbar .dropdown .dropdown:hover>ul {
        left: -100%;
    }
}
.changeLang {
    padding: 6px 10px;
    background-color: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    font-size: 14px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.changeLang option {
    background-color: var(--secondary-color);
    color: var(--p-color);
}

.btn-border {
    padding: 12px 30px;
    border: 1px solid var(--main-color);
    color: #fff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.btn-border:hover {
    background-color: var(--main-color);
    color: #fff;
}
.btn-sm {
    padding: 7px 20px;
    font-size: 14px;
}

.mobile-nav-toggle {
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    display: none;
    line-height: 0;
    transition: 0.5s;
    background-color: transparent;
    border: none;
}

@media (max-width: 1199px) {
    .mobile-nav-toggle {
        display: block;
    }
    #navbar {
        position: fixed;
        display: none;
        top: 70px;
        right: 0;
        width: 320px;
        z-index: 3;
        background-color: var(--main-color2);
        height: calc(100vh - 70px);
        max-height: calc(100vh - 100px);
        padding: 10px 25px;
    }
    #navbar ul {
        display: block;
        width: 100%;
    }

    #navbar ul li a:not(.cmn-btn) {
        padding: 12px 0 !important;
        border-bottom: 1px solid #ffffff14;
    }

    .navbar a::after {
        display: none;
    }

    #navbar ul {
        max-height: calc(100vh - 125px);
        overflow: auto;
    }
}

@media (max-width: 575px) {
    #navbar {
        right: 0;
        width: 100%;
    }
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.banner-section {
    padding-top: 245px;
    padding-bottom: 160px;
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-flow: column;
    justify-content: center;
    background-attachment: fixed;
    overflow: hidden;
}
.banner-section::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #002E51;
    opacity: 0.7;
    mix-blend-mode: multiply;
    z-index: -1;
}

.banner-section .bottom-shape {
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
}

.banner-title {
    font-size: 64px;
    color: #fff;
}

.banner-description {
    color: #fff;
}

.overview-box {
    position: relative;
}
.overview-box::after {
    position: absolute;
    content: '';
    top: 50%;
    right: 0;
    height: 50px;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.overview-wrapper div[class*="col"]:last-child .overview-box::after {
    display: none;
}
.overview-box-amount {
    font-family: var(--h-font);
    font-weight: 800;
    color: #fff;
    font-size: 36px;
    line-height: 1;
}
.overview-box p {
    color: #fff;
    margin-bottom: 0;
    margin-top: 8px;
}

.text-yellow {
    color: var(--main-color3);
}


/* innerpage-banner css start */
.innerpage-banner {
    padding-top: 220px;
    padding-bottom: 130px;
    position: relative;
    z-index: 1;
}
.innerpage-banner::before {
    position: absolute;
    content: '';
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.85;
    z-index: -1;
}

.innerpage-banner .bottom-shape {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
}

.page-meta-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.page-meta-list li {
    padding-right: 15px;
    font-weight: 500;
    color: #fff;
}

.page-meta-list li::after {
    content: '/';
    margin-left: 15px;
}

.page-meta-list li:last-child {
    padding-right: 0;
}

.page-meta-list li:last-child::after {
    display: none;
}

.page-meta-list li a {
    color: #fff;
    text-decoration: underline;
}

.innerpage-banner .page-title {
    font-size: 48px;
    color: #fff;
}
/* innerpage-banner css end */


/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
.section-top {
    margin-bottom: 45px;
}
.sec-top-title {
    font-family: var(--top-font);
    color: var(--main-color);
    font-size: 24px;
}
.section-title {
    font-size: 48px;
}
@media (max-width: 1199px) {
    .section-title {
        font-size: 42px;
    }
}
@media (max-width: 991px) {
    .section-title {
        font-size: 36px;
    }
}
@media (max-width: 575px) {
    .section-title {
        font-size: 32px;
    }
}
.s-pt-100 {
    padding-top: 100px;
} 
.s-pb-100 {
    padding-bottom: 100px;
}
.s-pt-80 {
    padding-top: 80px;
} 
.s-pb-80 {
    padding-bottom: 80px;
}

@media (max-width: 1199px) {
    .s-pt-100 {
        padding-top: 80px;
    } 
    .s-pb-100 {
        padding-bottom: 80px;
    }
}
@media (max-width: 991px) {
    .s-pt-100 {
        padding-top: 70px;
    } 
    .s-pb-100 {
        padding-bottom: 70px;
    }
    .s-pt-80 {
        padding-top: 60px;
    } 
    .s-pb-80 {
        padding-bottom: 60px;
    }
}
/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about-section {
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.about-thumb {
    height: 100%;
    overflow: hidden;
}
.about-thumb img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

/* choose section css start */
.z-p {
    z-index: 1;
}

.line-shape {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    display: flex;
    align-items: flex-end;
}

.choose-section {
    background-color: var(--main-color);
}

.choose-section .sec-top-title {
    color: var(--main-color3);
}

.video-area {
    position: relative;
    z-index: 1;
}

.video-area::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 350px;
    background-color: #fff;
    z-index: -1;
}

.video-wrapper {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    height: 650px;
    z-index: 1;
}

.video-wrapper::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.65;
    z-index: -1;
}

.video-wrapper .video-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: var(--main-color3);
    transform: translate(-50%, -50%);
    z-index: 1;
}

.video-wrapper .video-btn::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--main-color3);
    border-radius: 50%;
    opacity: 0.15;
    z-index: -2;
}

.video-wrapper .video-btn::after {
    position: absolute;
    content: '';
    top: 12px;
    left: 12px;
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    background-color: #fff;
    border-radius: 50%;
    z-index: -1;
}

.choose-box {
    padding: 25px;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;

    background: #fff;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.choose-box .icon {
    position: relative;
    width: 75px;
    height: 75px;
    background-color: rgba(255,255,255,0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    font-size: 26px;
    border-radius: 8px;
    z-index: 1;
}

.choose-box .icon::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--main-color);
    border-radius: 8px;
    opacity: 0.15;
    z-index: -1;
}

.choose-box .content {
    width: calc(100% - 75px);
    padding-left: 25px;
}
/* choose section css end */


/* campaign section css start */
.campaign-item {
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 35px rgba(0,0,0,0.03);
    transition: all 0.3s;
    border: 1px solid #e5e5e5;
    position: relative;
}

.campaign-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.section-bg .campaign-item {
    border: none;
}

.campaign-item:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transform: translateY(-5px);
}

.campaign-item:hover .thumb img {
    transform: scale(1.1);
}

.campaign-item .thumb {
    border-radius: 8px;
    height: 275px;
    overflow: hidden;
    position: relative;
}

.campaign-item .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
    transition: all 0.3s;
}

.campaign-item .thumb .campaign-cat {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 14px;
    padding: 1px 15px;
    background-color: var(--main-color3);
    border-radius: 99px;
}

.campaign-item .title {
    font-size: 24px;
}

.campaign-item .title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.campaign-item .content {
    padding: 25px 10px 10px 10px;
}

.campaign-cat {
    font-weight: 500;
    display: inline-block;
    margin-bottom: 6px;
}

.campaign-item .cam-amount {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: -5px -10px;
}
.campaign-item .cam-amount p {
    padding: 5px 10px;
    margin-bottom: 10px;
}

.campaign-item .progress ~ .cam-amount p {
    margin-bottom: 0;
}

.campaign-item .progress {
    border-radius: 99px;
    height: 10px;
}
.campaign-item .progress-bar {
    background-color: var(--main-color3);
}


.featured-slider .slick-arrow {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #fff;
    border: 2px solid #636363;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    cursor: pointer;
    bottom: 0;
    border-radius: 50%;
    transition: all 0.3s;
    z-index: 1;
}
.featured-slider .slick-arrow:hover {
    background-color: var(--main-color3);
    border-color: var(--main-color3);
}
.featured-slider .slick-arrow.prev {
    right: 65px;
}
.featured-slider .slick-arrow.next {
    right: 0;
}

.campaign-list-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.campaign-list-item .thumb {
    width: 50%;
    height: 475px;
    overflow: hidden;
}
.campaign-list-item .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

.campaign-list-item .content {
    width: 60%;
    padding: 50px;
    background-color: #fff;
}

.campaign-list-item .content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: -10%;
}
.campaign-list-item .content .description {
    width: 50%;
}

.campaign-list-item .content .description p {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.campaign-list-item .content .result {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    padding-left: 30px;
}

.campaign-list-item .content .result .left {
    width: 155px;
}
.campaign-list-item .content .result .right {
    width: calc(100% - 155px);
    padding-left: 25px;
}

.circle-progress {
    width: 155px;
    height: 155px;
}
  
.circle-progress .percent {
position: relative;
}

.circle-progress svg {
position: relative;
width: 155px;
height: 155px;
transform: rotate(-90deg);
}

.circle-progress svg circle {
width: 100%;
height: 100%;
fill: none;
stroke: #f0f0f0;
stroke-width: 10;
stroke-linecap: round;
}

.circle-progress svg circle:last-of-type {
stroke-dasharray: 435px;
stroke-dashoffset: calc(435px - (435px * var(--percent)) / 100);
stroke: var(--main-color); 
}

.circle-progress .number {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.circle-progress .number h3 {
    font-weight: 700;
    font-size: 30px;
}

.circle-progress .number h3 span {
    font-weight: 300;
    font-size: 70%;
}



.featured-slider .slick-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
}
.featured-slider .slick-dots li {
    margin: 0 5px;
}
.featured-slider .slick-dots li button {
    font-size: 0;
    border: none;
    width: 12px;
    height: 12px;
    background-color: var(--main-color);
    opacity: 0.35;
    border-radius: 50%;
    transition: all 0.3s;
}
.featured-slider .slick-dots li.slick-active button {
    opacity: 1;
    width: 35px;
    border-radius: 99px;
}

/* campaign section css end */


/* campaign details section css start */
.campaign-details-thumb {
    height: 500px;
    border-radius: 15px;
    overflow: hidden;
}

.campaign-details-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

.campaign-details-content {
    margin-top: 25px;
}

.campaign-details-title {
    margin-top: 30px;
}

.campaign-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.campaign-tags i {
    margin-right: 10px;
    color: var(--main-color);
}

.campaign-tags span {
    padding: 3px 10px;
    position: relative;
}
.campaign-tags span::after {
    position: absolute;
    content: '';
    top: 50%;
    right: -3px;
    width: 6px;
    height: 6px;
    background-color: #e5e5e5;
    border-radius: 50%;
    margin-top: -3px;
}

.campaign-tags span:last-child::after {
    display: none;
}

.campaign-status-widget {
    padding: 40px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.campaign-status-widget {
    display: flex;
    flex-wrap: wrap;
}

.campaign-status-widget .left {
    width: 155px;
}
.campaign-status-widget .right {
    width: calc(100% - 155px);
    padding-left: 25px;
}

.recent-donner-list {
    padding: 30px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
}

.donner-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #e5e5e5;
}

.donner-item:first-child {
    padding-top: 0;
}

.donner-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.donner-item .thumb {
    width: 75px;
    height: 75px;
    overflow: hidden;
    border-radius: 50%;
}

.donner-item .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

.donner-item .content {
    width: calc(100% - 75px);
    padding-left: 20px;
}


.site-tabs .nav-item + .nav-item {
    margin-left: 30px;
}

.site-tabs .nav-item .nav-link {
    position: relative;
    border: none;
    margin-bottom: 0;
    color: #7e7e7e;
    font-size: 24px;
    font-weight: 600;
    font-family: var(--h-font);
    padding: 10px 0;
    transition: all 0.3s;
}

.site-tabs .nav-item .nav-link:hover {
    color: var(--main-color);
}

.site-tabs .nav-item .nav-link::after {
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--main-color);
    opacity: 0;
    transition: all 0.3s;
}

.site-tabs .nav-item .nav-link.active {
    color: var(--h-color);
}

.site-tabs .nav-item .nav-link.active::after {
    opacity: 1;
}

.gallery-item {
    position: relative;
}

.gallery-item .gallery-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.3s;
}

.gallery-item:hover .gallery-link {
    background-color: rgba(0,0,0,0.45);
}

.video-container {
position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.donate-input-field {
    display: flex;
    flex-wrap: wrap;
}

.donate-input-field .currency-icon {
    width: 40px;
    height: 48px;
    background-color: var(--main-color);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px 0 0 5px;
}

.donate-input-field input {
    border: 1px solid #e5e5e5;
    border-left: none;
    padding: 5px 15px;
    border-radius: 0 5px 5px 0;
    font-weight: 600;
    font-size: 18px;
    width: 150px;
}

.donate-input-field input::-webkit-outer-spin-button,
.donate-input-field input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.donate-input-field input[type="number"] {
    -moz-appearance: textfield;
}

.donate-input-field input:focus {
    border-color: var(--main-color);
    outline: none;
}

.donate-amount-set {
    display: flex;
    flex-wrap: wrap;
    margin: -5px;
}

.donate-amount-btn {
    position: relative;
    padding: 7px 25px;
    border: none;
    background-color: var(--secondary-color);
    font-weight: 600;
    margin: 5px;
    color: var(--p-color);
    border-radius: 3px;
    border: 1px solid #e5e5e5;
}

.donate-amount-btn::before {
    position: absolute;
    top: 50%;
    left: 5px;
    content: "\f058";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-right: 6px;
    transform: translateY(-50%);
    opacity: 0;
}

.donate-amount-btn.selected {
    border-color: var(--main-color);
    color: var(--main-color);
}

.donate-amount-btn.selected::before {
    opacity: 1;
}

.campaign-share-wrapper {
    padding: 20px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: -5px -10px;
}

.campaign-share-wrapper .title {
    padding: 5px 10px;
}

.campaign-share-wrapper .social-links {
    padding: 5px 10px;
}
/* campaign details section css end */


/* event details section css start */
.event-details-thumb {
    height: 550px;
    overflow: hidden;
    border-radius: 15px;
}

.event-details-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

.event-details-content {
    margin-top: 30px;
}

.event-details-widget {
    padding: 30px;
    background-color: var(--secondary-color);
    border-radius: 8px;
}

.event-details-widget .title {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 25px;
}

.event-details-widget .title::after {
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    width: 45px;
    height: 2px;
    background-color: var(--main-color);
}

.event-details-list {
    margin-bottom: 0;
}

.event-details-list li {
    padding: 8px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 15px;
}

.event-details-list li:first-child {
    padding-top: 0;
}

.event-details-list li:last-child {
    padding-bottom: 0;
}

.event-details-list li .caption {
    font-weight: 600;
}

.mt-40 {
    margin-top: 40px;
}

.event-map iframe {
    width: 100%;
    height: 320px;
}
/* event details section css end */


.has-bimg {
    background-size: cover;
    background-repeat: no-repeat;
}

.dark-overlay {
    position: relative;
    z-index: 1;
}

.dark-overlay::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.75;
    z-index: -1;
}

.cartegory-item {
    text-align: center;
    position: relative;
}

.cartegory-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.cartegory-item .thumb {
    width: 190px;
    height: 190px;
    display: inline-block;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    border: 6px solid #e5e5e5;
    transition: all 0.3s;
}

.cartegory-item:hover .thumb {
    border-color: var(--main-color3);
    transform: translateY(-5px);
}

.cartegory-item .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/

.testimonial-section {
    position: relative;
    z-index: 1;
    background-attachment: fixed;
}

.testimonial-section::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #fff 57%, rgba(255, 255, 255, 0) 153%);
    z-index: -1;
}

.testimonial-slider .slick-list {
    margin: -10px;
}
.testimonial-slider .single-slide {
    padding: 10px;
}

.testimonial-box-content {
    padding: 25px 25px 60px 25px;
    background-color: var(--body-bg);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.testimonial-box-content p {
    margin-bottom: 0;
}
.testimonial-box-content p i {
    font-size: 22px;
    color: var(--main-color);
}
.testimonial-box .client {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.testimonial-box .thumb {
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
}
.testimonial-box .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
    object-position: center;
    -o-object-position: center;
}

.testimonial-box .client {
    margin-top: 30px;
}

.testimonial-box .content {
    width: calc(100% - 80px);
    padding-left: 20px;
}

.testimonial-box .title {
    font-size: 20px;
    margin-bottom: 3px;
}

.testimonial-box .designation {
    margin-bottom: 0;
}

.testimonial-slider .slick-dots {
    display: flex;
    justify-content: center;
    margin-top: 25px;
}
.testimonial-slider .slick-dots li {
    margin: 3px;
}
.testimonial-slider .slick-dots li button {
    font-size: 0;
    padding: 0;
    border: none;
    background-color: #fff;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
}
.testimonial-slider .slick-dots li.slick-active button {
    width: 35px;
    background-color: var(--main-color);
    border-radius: 999px;
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    -ms-border-radius: 999px;
    -o-border-radius: 999px;
}

p.instruction * {
    white-space: pre-line;
}

.bg-main {
    background-color: var(--main-color) !important;
}

/* table css start */
.cmn-table {
    border: none;
}
.cmn-table thead th {
    font-size: 14px;
    color: var(--main-color2);
    background-color: #e9e9e9;
    border: none;
    text-align: center;
    padding: 10px 20px;
    font-weight: 600;
}
.cmn-table thead th:first-child {
    border-radius: 8px 0 0 8px;
    text-align: left;
}
.cmn-table thead th:last-child {
    border-radius: 0 8px 8px 0;
    text-align: right;
}
.cmn-table tbody tr {
    background-color: #1c3e610d;
}
.cmn-table tbody td {
    border-top: none;
    border-bottom: 1px solid #d5d5d5;
    vertical-align: middle;
    padding: 15px 20px;
}
.cmn-table tbody td:first-child {
    text-align: left;
}
.cmn-table tbody td:last-child {
    text-align: right;
}
.cmn-table tbody tr:last-child td {
    border-bottom: none;
}

.cmn-table tbody tr:last-child td:first-child {
    border-radius: 0 0 0 5px;
    -webkit-border-radius: 0 0 0 5px;
    -moz-border-radius: 0 0 0 5px;
    -ms-border-radius: 0 0 0 5px;
    -o-border-radius: 0 0 0 5px;
}
.cmn-table tbody tr:last-child td:last-child {
    border-radius: 0 0 5px 0;
    -webkit-border-radius: 0 0 5px 0;
    -moz-border-radius: 0 0 5px 0;
    -ms-border-radius: 0 0 5px 0;
    -o-border-radius: 0 0 5px 0;
}

.table>:not(:first-child) {
    border-top: none;
}
.view-btn {
    width: 30px;
    height: 30px;
    background-color: #6777ef47;
    border-radius: 3px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #6777ef !important;
    border: 1px solid #6777ef;
    font-size: 14px;
    transition: all 0.3s;
}
.view-btn:hover {
    background-color: #6777ef;
    color: #fff !important;
}

.view-btn-primary {
    color: #6777ef !important;
    border: 1px solid #6777ef;
    background-color: #6777ef47;
}
.view-btn-primary:hover {
    background-color: #6777ef;
}

.view-btn-info {
    color: #0bb2d4 !important;
    border: 1px solid #0bb2d4;
    background-color: #0bb2d447;
}
.view-btn-info:hover {
    background-color: #0bb2d4;
}

.view-btn-warning {
    color: #dba50d !important;
    border: 1px solid #dba50d;
    background-color: #dba50d47;
}
.view-btn-warning:hover {
    background-color: #dba50d;
}

.view-btn-danger {
    color: #ff4c52 !important;
    border: 1px solid #ff4c52;
    background-color: #ff4c5247;
}
.view-btn-danger:hover {
    background-color: #ff4c52;
}

.view-btn-success {
    color: #11c26d !important;
    border: 1px solid #11c26d;
    background-color: #11c26d47;
}
.view-btn-success:hover {
    background-color: #11c26d;
}

.cmn-table.style-separate {
    border-collapse: separate;
    border-spacing: 0 10px;
}

.cmn-table.style-separate tbody tr {
    box-shadow: inset 0 0px 8px #d776004d;
    
}
.cmn-table.style-separate thead tr th:first-child {
    border-radius: 5px 0 0 5px;
    -webkit-border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    -ms-border-radius: 5px 0 0 5px;
    -o-border-radius: 5px 0 0 5px;
}
.cmn-table.style-separate thead tr th:last-child {
    border-radius: 0 5px 5px 0;
    -webkit-border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    -ms-border-radius: 0 5px 5px 0;
    -o-border-radius: 0 5px 5px 0;
}
.cmn-table.style-separate tbody tr {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

td[data-caption] {
    position: relative;
}
td[data-caption]::before {
    position: absolute;
    content: attr(data-caption);
    font-size: 14px;
    color: #849bab;
    font-weight: 600;
    top: 11px;
    left: 0;
    display: none;
}
@media (max-width: 991px) {
    .cmn-table thead {
        display: none;
    }

    .cmn-table tbody tr {
        padding: 10px;
        display: block;
    }

    .cmn-table tbody tr:nth-child(odd) {
        background-color: #9595950d;
    }
    .cmn-table tbody tr:nth-child(even) {
        background-color: #01050a0d;
    }

    .cmn-table tr td {
        display: block;
        text-align: right !important;
        padding: 10px 0 10px 40%;
    }
    .cmn-table tr td {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    .cmn-table tr td:last-child {
        border-bottom: none !important;
    }
    td[data-caption]::before {
        display: block;
        width: 40%;
        text-align: left;
    }
    .cmn-table.style-separate tbody tr + tr {
        margin-top: 15px;
    }
}
/* table css end */


/* badge css start */
.badge {
    padding: 0 0 0 15px;
    position: relative;
    color: #052554;
    background-color: transparent;
    font-size: 14px;
}
.badge::before {
    position: absolute;
    content: '';
    top: 50%;
    left: 0;
    width: 10px;
    height: 10px;
    background-color: #052554;
    border-radius: 50%;
    margin-top: -5px;
}

.badge-primary {
    color: #6777EF;
}
.badge-primary::before {
    background-color: #6777EF;
}

.badge-info {
    color: #0bb2d4;
}
.badge-info::before {
    background-color: #0bb2d4;
}

.badge-warning {
    color: #dba50d;
}
.badge-warning::before {
    background-color: #dba50d;
}

.badge-danger {
    color: #ff4c52;
}
.badge-danger::before {
    background-color: #ff4c52;
}

.badge-success {
    color: #11c26d;
}
.badge-success::before {
    background-color: #11c26d;
}



/* blog section css start */
.blog-box {
    background-color: #fff;
    transition: all 0.32s;
    height: 100%;
    display: flex;
    flex-flow: column;
}

.blog-box:hover {
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
}

.blog-box-thumb {
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    height: 265px;
}
.blog-box-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

.blog-box-content {
    padding: 20px 30px;
    border: 1px solid #e5e5e5;
    border-top: none;
    border-radius: 0 0 8px 8px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

.blog-box-content p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-box-content .title a {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.blog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: -3px -15px;
    padding-bottom: 7px;
}
.blog-meta li {
    padding: 3px 15px;
    display: flex;
    align-items: center;
    font-size: 15px;
}
.blog-meta li i {
    margin-right: 5px;
    color: var(--main-color);
}

.blog-btn {
    display: flex;
    padding-top: 12px;
    margin-top: 25px;
    border-top: 1px solid #e5e5e5;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
}

.social-button {
    color: #fff !important;
}

.side-blog {
    display: flex;
    flex-wrap: wrap;
}
.side-blog + .side-blog {
    margin-top: 20px;
}
.side-blog-thumb {
    width: 80px;
    height: 80px;
    overflow: hidden;
}
.side-blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}
.side-blog-content {
    width: calc(100% - 80px);
    padding-left: 20px;
}
.blog-share-part {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 15px 20px 20px;
}

.blog-share-part .caption {
    margin: 0 15px 0 0;
}

.blog-share-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: -5px -10px;
}
.blog-share-list li {
    padding: 5px 10px;
}
.blog-share-list li a {
    color: var(--p-color);
}
.blog-share-list li a:hover {
    color: var(--main-color);
}

.blog-details-thumb {
    height: 450px;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
}
.blog-details-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

.single-comment {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 0;
}

.comment-thumb {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    overflow: hidden;
}

.comment-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

.comment-content {
    width: calc(100% - 65px);
    padding-left: 30px;
}

#social-links ul {
    flex-wrap: wrap;
    margin: -3px -5px;
}

#social-links ul li {
    margin: 3px 5px;
}

@media (max-width: 575px) {
    .comment-content {
        width: 100%;
        padding-left: 0;
        margin-top: 20px;
    }
}
/* blog section css end */


/* brand section css start */
.brand-section {
    padding-bottom: 80px;
}

.section-bg + .brand-section {
    padding: 80px 0;
}

.brand-slider .slick-list {
    margin: 0 -15px;
}

.brand-slider .single-slide {
    padding: 0 15px;
}

.brand-item {
    text-align: center;
}

.brand-item img {
    display: inline-block;
    max-height: 55px;
}
/* brand section css end */


/* faq */
.accordion-item {
    background-color: var(--body-bg);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.accordion-button {
    background-color: var(--body-bg);
    font-size: 18px;
    position: relative;
    padding-right: 35px;
}
.accordion-button:focus {
    box-shadow: none;
    outline: none;
}
.accordion-button::after, 
.accordion-button:not(.collapsed)::after {
    background-image: none;
}
.accordion-button:not(.collapsed) {
    background-color: var(--main-color);
    color: #fff;
}

.accordion-button:not(.collapsed)::after {
    background-color: #fff;
    color: var(--main-color);
}

.accordion-button::after {
    position: absolute;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    top: 15px;
    right: 10px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: var(--main-color3);
    display: flex;
    justify-content: center;
    align-items: center;
}

ul {
    list-style: none;
    padding: 0;
}

.text-small {
    font-size: 14px;
}

/* video section css start */
.video-section {
    padding-top: 150px;
    position: relative;
}
.watch-btn {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100px;
    height: 100px;
    margin-left: -50px;
    background-color: var(--main-color);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
}
/* video section css end */

/* volunteer section css start */
.volunteer-item {
    padding: 2.1875rem 1.5625rem;
    background-color: var(--secondary-color);
    border: 2px solid transparent;
    text-align: center;
    border-radius: 8px;
    transition: all 0.3s;
}

.volunteer-item:hover {
    border-color: var(--main-color);
}

.volunteer-item .thumb {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background-size: 200px auto;
    border-radius: 50%;
}

@media (max-width: 767px) {
    .volunteer-item .thumb {
        width: 180px;
        height: 180px;
    }
}

.volunteer-item .thumb img {
    filter: grayscale(1);
}

.volunteer-item .content {
    margin-top: 1.5625rem;
}

.volunteer-item .content p {
    margin-bottom: 0;
}
.volunteer-item .content .title {
    font-size: 22px;
}

.volunteer-slider .slick-list {
    margin: 0 -0.9375rem;
}

.volunteer-slider .single-slide {
    padding: 0 0.9375rem;
}

.volunteer-slider .slick-arrow {
    position: absolute;
    top: 45%;
    width: 40px;
    height: 35px;
    background-color: #fff;
    font-size: 18px;
    cursor: pointer;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
}

.volunteer-slider .slick-arrow:hover {
    background-color: var(--main-color);
    color: #fff;
}

.volunteer-slider .slick-arrow.prev {
    left: 10px;
}

.volunteer-slider .slick-arrow.next {
    right: 10px;
}

.site-color {
    color: var(--main-color);
}
/* volunteer section css end */


/* event section css start */
.event-box-thumb {
    border-radius: 8px;
    overflow: hidden;
}

.event-box-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

.event-box-content {
    margin-top: 25px;
    display: flex;
    flex-wrap: wrap;
}

.event-box-content .title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-box-content .left {
    width: 120px;
    background-color: var(--main-color3);
    display: flex;
    flex-flow: column;
    text-align: center;
    border-radius: 5px;
}

.event-box-content .left .date {
    font-size: 42px;
    font-family: var(--h-font);
    color: var(--h-color);
    font-weight: 700;
    line-height: 1;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.event-box-content .left p {
    margin-bottom: 0;
    padding: 5px 10px;
    background-color: rgba(0, 0, 0, 0.1);
    font-weight: 500;
}

.event-box-content .right {
    width: calc(100% - 120px);
    padding-left: 30px;
}

.event-box-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: -5px -15px;
}

.event-box-meta li {
    padding: 5px 15px;
}
.event-box-meta li.location {
    position: relative;
    font-weight: 500;
    color: var(--main-color2);
}

.event-box-meta li.location::after {
    position: absolute;
    content: '';
    top: 50%;
    right: -1px;
    width: 2px;
    height: 14px;
    background-color: #b3b3b3;
    border-radius: 50%;
    margin-top: -7px;
}

.event-box.small-event {
    display: flex;
    flex-wrap: wrap;
    padding: 30px 0;
    border-bottom: 1px solid #ddd;
}

.event-box.small-event .event-box-thumb {
    width: 150px;
}

.event-box.small-event .event-box-content {
    width: calc(100% - 150px);
    padding-left: 30px;
    margin-top: 0;
}

.small-event-wrapper .small-event:first-child {
    padding-top: 0;
}

.small-event-wrapper .small-event:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

/* event section css end */


/* contact section start */
.contact-form-wrapper .section-title {
    max-width: 450px;
}
.contact-item {
    padding: 30px;
    border-radius: 8px;
    text-align: center;
}
.contact-item .icon {
    width: 70px;
    height: 70px;
    background-color: var(--main-color);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.contact-item .content {
    margin-top: 25px;
}
/* contact section end */


/* auth section css start */

.auth-section {
    position: relative;
    z-index: 1;
    overflow: hidden;
    
}

.auth-section .auth-obj {
    position: absolute;
    left: 50px;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
}

.auth-section .auth-obj img {
    max-width: 425px;
}

.auth-wrapper {
    padding: 50px 100px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(0,0,0,0.08);
    border: 1px solid #d1d5db;
}

.auth-wrapper.register-auth {
    padding: 40px 50px;
}

.icon-input-field {
    position: relative;
}

.icon-input-field i {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 43px;
    height: calc(100% - 2px);
    border-right: 1px solid #d1d5db;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    font-size: 16px;
    color: #818181;
    border-radius: 5px 0 0 5px;
}

.icon-input-field .form-control {
    padding-left: 55px;
}

.icon-input-field .form-control:focus ~ i {
    color: var(--main-color);
    border-color: var(--main-color);
}
/* auth section css end */


/* dashboard-section css start */

#header.auth-header {
    background-color: var(--main-color2);
    padding: 14px 30px;
    position: fixed;
}

.auth-header .header-right {
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    padding-left: 20px;
    justify-content: flex-end;
}

.dashboard-main {
    min-height: 100vh;
    background-color: #E5EAF0;
}

.user-toggle-menu {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 5px;
}

.header-inner-pages .user-toggle-menu {
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.dropdown-toggle::after {
    border-top-color: var(--p-color);
}

.dropdown-menu {
    background-color: var(--secondary-color);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 10px rgba(0,0,0,0.1);
}

.dropdown-menu li a {
    color: #fff;
}

.header-inner-pages .user-menu li a {
    color: var(--p-color);
}

.header-inner-pages .dropdown-menu {
    background-color: #fff;
}
.header-inner-pages .dropdown-menu li a {
    color: var(--p-color);
}

.user-toggle-menu img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #fff;
}

@media (max-width: 575px) {
    .user-toggle-menu img {
        display: none;
    }
    .user-toggle-menu span {
        margin: 0 !important;
    }
}

.dashboard-body-part {
    padding: 110px 15px 50px 345px;
}

.d-sidebar {
    position: fixed;
    min-height: calc(100vh - 74px);
    max-height: calc(100vh - 74px);
    display: flex;
    flex-flow: column;
    top: 74px;
    left: 0;
    width: 310px;
    padding: 20px 0;
    background-color: var(--main-color2);
    overflow: hidden;
    z-index: 999;
    overflow: auto;
}

.user-box {
    padding: 0 30px;
    margin-bottom: 30px;
}

.user-box .user-thumb {
    width: 115px;
    height: 115px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    border: 3px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.user-box .user-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

.sidebar-open-btn {
    border: none;
    background-color: rgba(255, 255, 255, 0.1);
    font-size: 18px;
    padding: 0;
    width: 35px;
    height: 35px;
    display: none;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    color: #fff;
}

.sidebar-open-btn i.fa-arrow-left {
    display: none;
}

.sidebar-open-btn.active i.fa-arrow-left {
    display: inline-block;
}

.sidebar-open-btn.active i.fa-arrow-right {
    display: none;
}

@media (max-width: 1199px) {
    .sidebar-open-btn {
        display: inline-flex;
    }
}

.d-sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255, 0.1) var(--main-color2);
  }
  .d-sidebar::-webkit-scrollbar {
    width: 12px;
  }
  
  .d-sidebar::-webkit-scrollbar-track {
    background: var(--main-color2);
  }
  
  .d-sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255, 0.1);
    border-radius: 20px;
    border: 3px solid var(--main-color2);
  }


.d-sidebar-menu li:last-child a { 
    border-bottom: none;
    padding-bottom: 0;
}
.d-sidebar-menu li.active > a {
    background-color: var(--main-color);
    color: #fff;
    border-bottom: none;
}
.d-sidebar-menu li a i {
    margin-right: 10px;
}

.submenu {
    display: none;
    background-color: var(--secondary-color);
}

.d-sidebar-menu .submenu li a {
    padding-left: 49px !important;
}

.d-sidebar-menu li a {
    display: block;
    padding: 12px 25px !important;
    color: #a3afbd;
    font-size: 15px;
    transition: all 0.3s;
}

.d-sidebar-menu li a:hover {
    color: var(--main-color);
}

.d-sidebar-menu li a.active {
    background-color: var(--main-color);
    color: #fff;
}

.menu-title {
    padding: 3px 15px;
    color: #c3c3c3;
    font-size: 14px;
    font-weight: 500;
}

.menu-title-divider {
    padding-top: 20px;
    border-top: 1px solid #ffffff2a;
    margin-top: 15px;
}

.d-plan-notice {
    padding: 15px;
    background-color: #E5EAF0;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    text-align: center;
}

.d-plan-notice p,
.d-plan-notice a {
    font-size: 14px;
}
.d-plan-notice a {
    color: var(--main-color);
}

.has_submenu {
    position: relative;
}
.has_submenu::after {
    position: absolute;
    content: "\f078";
    top: 16px;
    right: 20px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
}

.has_submenu.active .submenu {
    display: block;
}

.tab-btn-group {
    display: flex;
    align-items: center;
}

.tab-btn-group .tab-btn {
    padding: 5px 15px;
    border-bottom: 2px solid transparent;
    font-weight: 600;
}

.tab-btn-group .tab-btn.active {
    color: var(--main-color);
    border-color: var(--main-color);
}

.payment-box {
    background-color: #fff;
    padding: 15px;
    border-radius: 10px;
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}

.payment-box-content {
    margin-top: 30px;
}

@media (max-width: 1199px) {
    #header.auth-header  {
        padding: 14px 0;
    }
    .d-sidebar {
        left: -105%;
        transition: all 0.3s;
    }
    .d-sidebar.active {
        left: 0;
    }
    .dashboard-body-part {
        padding: 110px 30px 30px 30px;
    }
}

@media (max-width: 767px) {
    .d-sidebar {
        min-height: calc(100vh - 127px);
        max-height: calc(100vh - 127px);
        top: 127px;
    }
    .dashboard-body-part {
        padding: 155px 15px 30px  15px;
    }
}
 
@media (max-width: 575px) {
    .dashboard-body-part {
        padding: 135px 15px 30px  15px;
    }
    
    .auth-header .logo img {
        max-height: 35px !important;
    }
    .d-sidebar {
        min-height: calc(100vh - 119px);
        max-height: calc(100vh - 119px);
        top: 119px;
    }
    .tab-btn-group .tab-btn {
        padding: 5px 8px;
        font-size: 14px;
    }
}


/* dashboard-section css end */

/* dashboard section css start */
.user-sidebar {
    padding: 25px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
}

.user-menu {
    margin-top: 30px;
    margin-bottom: 0;
}

.user-menu li + li {
    margin-top: 5px;
}

.user-menu li a {
    padding: 10px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-radius: 5px;
}

.user-menu li a.active {
    background-color: var(--main-color);
    color: #fff;
}

.user-menu li a i {
    width: 35px;
}

.d-box {
    position: relative;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,.05);
    transition: all 0.3s;
    overflow: hidden;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.d-box-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.d-box .icon {
    position: absolute;
    bottom: -7px;
    right: -7px;
    font-size: 56px;
    line-height: 1;
    z-index: -1;
    transform: rotate(-25deg);
    background: linear-gradient(to right, rgba(0, 0, 0, 0.075), rgba(235, 237, 238, 0.2117647059) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.d-box:hover {
    background-color: var(--main-color);
    border-color: var(--main-color);
    transform: scale(1.05, 1.05)
}

.d-box-icon {
    position: relative;
    width: 60px;
    height: 60px;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--main-color);
    font-size: 20px;
}

.d-box:hover .d-box-icon {
    color: #fff;
}

.d-box-icon::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--main-color);
    opacity: 0.15;
    z-index: -1;
    border-radius: 50%;
}

.d-box:hover .d-box-icon::before {
    background-color: rgba(255, 255, 255, 0.7);
}

.d-box-content {
    width: calc(100% - 60px);
    padding-left: 20px;
}

.d-box:hover .d-box-content p,
.d-box:hover .d-box-content .d-box-amount {
    color: #fff;
}

.d-box-2 {
    position: relative;
    padding: 23px;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    text-align: center;
    transition: all 0.3s;
}

.d-box-2 .item-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.d-box-2 i {
    width: 70px;
    height: 70px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.075), rgba(235, 237, 238, 0.2117647059) 70%);
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    transition: all 0.3s;
}

.d-box-2 .title {
    transition: all 0.3s;
}

.d-box-2:hover {
    background-color: var(--main-color);
    transform: scale(1.05, 1.05);
}

.d-box-2:hover i {
    color: #fff;
}

.d-box-2:hover .title {
    color: #fff;
}

.card {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,0.07);
}

.card-header {
    padding: 15px 20px;
    background-color: #fff;
    border-radius: 8px 8px 0 0 !important;
}

.card-body {
    padding: 20px;
}

#pex-line {
    width: 100%;
}

@media (max-width: 1560px) {
    .d-box {
        padding: 20px 15px;
    }
    .d-box-content p {
        font-size: 14px;
    }
    .d-box-2 .title {
        font-size: 18px;
    }
}

.modal button.close {
    width: 30px;
    background-color: #d41c07;
    border: none;
    color: #fff;
    border-radius: 5px;
    font-size: 24px;
    padding: 0;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* dashboard section css end */

/* footer css start */
.footer-section {
    color: rgb(199, 199, 199);
    background-attachment: fixed;
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding-top: 330px;
} 

.footer-section-two {
    padding-top: 0 !important;
    border-top: 1px solid #e5e5e5;
}

.footer-section::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #000000f0, #343434b3);
    z-index: -1;
}

.footer-section-two::before {
    display: none;   
}

.footer-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
}

.footer-info-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.footer-info-item .icon {
    width: 50px;
    color: var(--main-color) !important;
    font-size: 22px;
}

.footer-info-item .content {
    width: calc(100% - 50px);
}

.footer-info-item .content .footer-info-title {
    color: #fff;
}

.footer-info-item .content p,
.footer-info-item .content p a {
    color: #cbcbcb;
    margin-bottom: 0;
}

.footer-shape img {
    width: 100%;
}

.footer-info-wrapper {
    padding-bottom: 100px;
}

.footer-info-wrapper hr {
    background-color: rgba(255, 255, 255, 0.35);
}

.footer-top {
    padding-bottom: 100px;
    position: relative;
    z-index: 1;
}

.footer-bottom {
    padding: 25px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.social-links {
    display: flex;
    flex-wrap: wrap;
    margin: -3px -5px;
}
.social-links li {
    padding: 3px 5px;
}
.social-links li a {
    width: 35px;
    height: 35px;
    background-color: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
}
.social-links li a:hover {
    background-color: var(--main-color);
    border-color: var(--main-color);
    color: #fff;
}

.footer-box .logo img {
    max-width: 215px;
    max-height: 55px;
}

.footer-box .title {
    margin-bottom: 25px;
    font-size: 24px;
    position: relative;
    padding-bottom: 10px;
    color: #fff;
    font-size: 20px;
}
.footer-box .title::after {
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: var(--main-color);
}
.footer-link-list li {
    position: relative;
    padding-left: 15px;
}
.footer-link-list li::before {
    position: absolute;
    content: "\f105";
    top: 0;
    left: 0;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--main-color);
}
.footer-link-list li:not(:first-child)::before {
    top: 5px;
}
.footer-link-list li a {
    padding: 5px 0;
}
.footer-link-list li:first-child a {
    padding-top: 0;
}
.footer-link-list li:last-child a {
    padding-bottom: 0;
}

.subscribe-form {
    padding: 8px 8px 8px 15px;
    background-color: rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
}

.subscribe-form input {
    width: calc(100% - 50px);
    height: 40px;
    background-color: transparent;
    color: #fff;
    border: none;
}

.subscribe-form input:focus {
    border: none;
    outline: none;
}

.subscribe-form input::placeholder {
    color: #9c9c9c;
}

.subscribe-form input::-ms-input-placeholder {
    color: #9c9c9c;
}

.subscribe-form input::-moz-placeholder {
    color: #9c9c9c;
}

.subscribe-form input::-webkit-input-placeholder {
    color: #9c9c9c;
}

.subscribe-form button {
    width: 50px;
    padding: 7px 10px;
    background-color: var(--main-color);
    border-radius: 8px;
    border: none;
    color: #fff;
}

.donate-btn {
    padding: 12px 25px;
    background-color: var(--main-color);
    color: #fff;
    font-weight: 500;
    border-radius: 99px;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
}

.donate-btn i {
    font-size: 16px;
    margin-right: 8px;
}

.footer-overview {
    display: flex;
    flex-wrap: wrap;
    margin: -10px -20px;
}

.footer-overview li {
    padding: 10px 20px;
}

.footer-overview-title {
    font-size: 30px;
    color: #fff;
    margin-bottom: 5px;
}

.footer-overview .caption {
    margin-bottom: 0;
}
/* footer css end */

.social-links-btn{
    margin-right: 15px;
}


/* responsive css start */

@media (max-width: 1399px) {
    .campaign-list-item .thumb {
        width: 45%;
    }
    .campaign-list-item .content {
        width: 65%;
    }
    .campaign-list-item .content .result {
        padding-left: 15px;
    }
    .cartegory-item .thumb {
        width: 165px;
        height: 165px;
        border-width: 5px;
    }
    .video-wrapper {
        height: 600px;
    }
    .video-area::before {
        height: 300px;
    }
    .event-box.small-event .event-box-content {
        padding-left: 25px;
    }
    .event-box-meta {
        margin: -5px -10px;
    }
    .event-box-meta li {
        padding: 5px 10px;
        font-size: 14px;
    }
    .footer-overview {
        margin: -10px -10px;
    }
    .footer-overview li {
        padding: 10px 10px;
    }
    .footer-overview-title {
        font-size: 28px;
    }
    .footer-overview .caption {
        font-size: 14px;
    }
    .footer-section {
        padding-top: 250px;
    }
    .campaign-status-widget {
        flex-flow: column;
        align-items: center;
    }
    .campaign-status-widget .right {
        width: auto;
        padding-left: 0;
        margin-top: 20px;
        text-align: center;
    }
}

@media (max-width: 1199px) {
    #header {
        padding: 10px 0;
    }
    .banner-title {
        font-size: 56px;
    }
    .banner-section {
        padding-top: 140px;
        padding-bottom: 115px;
    }
    .campaign-list-item .thumb {
        width: 100%;
    }
    .campaign-list-item .content {
        width: 100%;
        margin-left: 0;
    }
    .video-wrapper {
        height: 550px;
    }
    .video-area::before {
        height: 275px;
    }
    .video-wrapper .video-btn {
        width: 100px;
        height: 100px;
        font-size: 20px;
    }
    .footer-section {
        padding-top: 200px;
    }
    .innerpage-banner {
        padding-top: 150px;
        padding-bottom: 90px;
    }
    .innerpage-banner .page-title {
        font-size: 42px;
    }
    .campaign-details-thumb,
    .event-details-thumb {
        height: 400px;
    }
    .user-sidebar {
        padding: 20px;
    }
    .user-menu li a i {
        width: 28px;
    }
    .user-menu li a {
        font-size: 14px;
    }
    .auth-wrapper {
        padding: 50px;
    }
}

@media (max-width: 991px) {
    .campaign-list-item .thumb {
        height: 375px;
    }
    .campaign-list-item .content .description {
        width: 100%;
    }
    .campaign-list-item .content .result {
        width: 100%;
        padding-left: 0;
    }
    .video-wrapper {
        height: 400px;
    }
    .video-area::before {
        height: 200px;
    }
    .choose-box .content {
        width: 100%;
        padding-left: 0;
        margin-top: 20px;
    }
    .footer-top,
    .footer-info-wrapper {
        padding-bottom: 70px;
    }
    .campaign-details-thumb,
    .event-details-thumb {
        height: 350px;
    } 
}

@media (max-width: 767px) {
    h3 {
        font-size: 24px;
    }
    h4 {
        font-size: 22px;
    }
    .campaign-item .title {
        font-size: 22px;
    }
    .banner-title {
        font-size: 44px;
    }
    .overview-box-amount {
        font-size: 28px;
    }
    .overview-box p {
        font-size: 14px;
    }
    .campaign-list-item .thumb {
        height: 300px;
    }
    .campaign-list-item .content {
        padding: 25px;
    }
    .footer-section {
        padding-top: 150px;
    }
    .innerpage-banner .page-title {
        font-size: 36px;
    }
    .campaign-details-thumb,
    .event-details-thumb {
        height: 300px;
    }
}

@media (max-width: 575px) {
    .banner-title {
        font-size: 36px;
    }
    .event-box.small-event .event-box-thumb {
        width: 100%;
    }
    .event-box.small-event .event-box-content {
        width: 100%;
        padding-left: 0;
        margin-top: 15px;
    }
    .event-box-content .left .date {
        padding: 10px;
    }
    .event-box-content .right {
        width: 100%;
        padding-left: 0;
    }
    .event-box-content {
        position: relative;
        margin-top: 0;
        padding-top: 15px;
    }
    .event-box-content .left {
        position: absolute;
        top: -120px;
        left: 18px;
    }
    .innerpage-banner .page-title {
        font-size: 32px;
    }
    .innerpage-banner {
        padding-bottom: 60px;
    }
    .recent-donner-list {
        padding: 20px;
    }
    .campaign-details-thumb,
    .event-details-thumb {
        height: 250px;
    }
    .site-tabs .nav-item .nav-link {
        font-size: 18px;
    }
    .auth-section .auth-obj {
        display: none;
    }
    .auth-wrapper,
    .auth-wrapper.register-auth {
        padding: 30px 20px;
    }
}

@media (max-width: 460px) {
    .banner-title {
        font-size: 32px;
    }
    .overview-box-amount {
        font-size: 24px;
    }
    .campaign-list-item .thumb {
        height: 200px;
    }
    .campaign-list-item .content .result {
        justify-content: center;
    }
    .campaign-list-item .content .result .right {
        width: 100%;
        padding-left: 0;
        text-align: center;
        margin-top: 20px;
    }
    .campaign-item .cam-amount p {
        font-size: 14px;
    }
    .campaign-item .thumb {
        height: 200px;
    }
    .campaign-item {
        padding: 10px;
    }
    .campaign-item .thumb .campaign-cat {
        font-size: 12px;
    }
    .cartegory-item .thumb {
        width: 130px;
        height: 130px;
    }
    .video-wrapper {
        height: 280px;
    }
    .video-area::before {
        height: 140px;
    }
    .video-wrapper .video-btn {
        width: 80px;
        height: 80px;
        font-size: 14px;
    }
    .video-wrapper .video-btn::after {
        top: 8px;
        left: 8px;
        width: calc(100% - 16px);
        height: calc(100% - 16px);
    }
    .accordion-button {
        font-size: 16px;
    }
    .event-box-content .left {
        width: 105px;
        top: -105px;
    }
    .event-box-content .left .date {
        font-size: 30px;
    }
    .event-box-content .left p {
        font-size: 14px;
    }
    .campaign-details-thumb,
    .event-details-thumb {
        height: 220px;
    }
    .site-tabs .nav-item .nav-link {
        font-size: 16px;
    }
}

.empty-wrapper {
    padding: 40px;
    background-color: #f5f5f5;
    border-radius: 8px;
    min-height: 300px;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}
.empty-wrapper i {
    font-size: 48px;
}
/* responsive css end */