/*
Theme Name:
Theme URI:
Author:
Author URI:
Description:
Version:2024.01
*/
@charset "utf-8";
/* CSS Document */

::selection {
  color:var(--bs-white);
  background:var(--bs-primary);
}


#page{ overflow:hidden; padding-top:116px;}
.ratio .full-img{min-width:initial; position:absolute; top:0; right:0; bottom:0; left:0; overflow:hidden; flex:0 0 auto; display:flex;}
.ratio .full-img img{flex:1 1 auto; align-self:center; justify-self:center; object-fit:cover; height:100%; min-width:100%; width:auto;}
.image-fit{min-width:initial; position:relative; overflow:hidden; flex:0 0 auto; display:flex;}
.image-fit img{flex:1 1 auto; align-self:center; justify-self:center; object-fit:cover; height:100%; min-width:100%; width:auto;}
.text-lt p{ color:rgba(0,0,0,0.6);}
.full-img img{ height: auto; width: 100%;}
.content-mb-30 h1, .content-mb-30 h2, .content-mb-30 h3, .content-mb-30 h4, .content-mb-30 h5, .content-mb-30 h6, .content-mb-30 p, .content-mb-30 ul, .content-mb-30 ol{ margin-bottom:30px;}
.content-mb-20 h1, .content-mb-20 h2, .content-mb-20 h3, .content-mb-20 h4, .content-mb-20 h5, .content-mb-20 h6, .content-mb-20 p, .content-mb-20 ul, .content-mb-20 ol{ margin-bottom:20px;}
.content-mb-24 h1, .content-mb-24 h2, .content-mb-24 h3, .content-mb-24 h4, .content-mb-24 h5, .content-mb-24 h6, .content-mb-24 p, .content-mb-24 ul, .content-mb-24 ol{ margin-bottom:24px;}
.content-mb-16 h1, .content-mb-16 h2, .content-mb-16 h3, .content-mb-16 h4, .content-mb-16 h5, .content-mb-16 h6, .content-mb-16 p, .content-mb-16 ul, .content-mb-16 ol{ margin-bottom:16px;}
.content-mb-10 h1, .content-mb-10 h2, .content-mb-10 h3, .content-mb-10 h4, .content-mb-10 h5, .content-mb-10 h6, .content-mb-10 p, .content-mb-10 ul, .content-mb-10 ol{ margin-bottom:10px;}
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong{ font-weight: 800;}

.color-fff{ color:var(--bs-white);}
.title-uppercase h1, .title-uppercase h2, .title-uppercase h3, .title-uppercase h4, .title-uppercase h5, .title-uppercase h6{ text-transform:uppercase;}
.title-primary h1, .title-primary h2, .title-primary h3, .title-primary h4, .title-primary h5, .title-primary h6{ color:var(--bs-primary);}
.title-secondary h1, .title-secondary h2, .title-secondary h3, .title-secondary h4, .title-secondary h5, .title-secondary h6{ color:var(--bs-secondary);}
.title-dark h1, .title-dark h2, .title-dark h3, .title-dark h4, .title-dark h5, .title-dark h6{ color:var(--bs-dark);}
.h6-style h6{font-family: "Lobster", sans-serif; font-weight: 400; color: var(--bs-primary); position: relative; font-size: 18px;}
.h6-green h6:after{ background-color: #fff; height: 2px; width: 40px; content: ''; position: absolute; bottom: 0; left: 0; background-color: var(--bs-green);}
.h6-blue h6:after{ background-color: #fff; height: 2px; width: 40px; content: ''; position: absolute; bottom: 0; left: 0; background-color: var(--bs-blue);}
.h6-green h6, .h6-blue h6{padding-bottom: 12px;}

.banner{ position: relative; overflow: hidden; z-index: 1;}
.banner .image-fit{ height: 800px;}
.banner-content{ background-color: rgba(0,0,0,0.5); border-radius: 20px;}
.banner-content h6{ padding-bottom: 12px;}
.banner-content h6:after{ background-color: #fff; height: 2px; width: 40px; content: ''; position: absolute; bottom: 0; left: 0; background-color: var(--bs-secondary);}
.banner-content h1{ color: #fff;}
.banner-content p{ color: rgba(255,255,255,0.5);}
.banner .progress{ overflow: hidden; border: 2px solid #fff; height: 20px;}
.banner .progress-bar{ background: var(--bs-grad-primary); border-radius: 4px;}
.banner .goal-amount{ margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,0.2); color: #fff;}
.banner .goal-amount .achived strong{ color: #53c99f;}
.banner .goal-amount .goal strong{ color: var(--bs-primary);}
.banner .container{ top:60px; left:50%; -webkit-transform:translateX(-50%) translateY(0%); transform:translateX(-50%) translateY(0); position: absolute;}
.banner .slick-prev{ left: auto; right: 24px; margin-top: -30px;}
.banner .slick-next{ margin-top: 30px;}

.section{ padding: 70px 0; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; z-index: 1;}
.section-lt{ background-color: #f6f6f6;}

.icon-box-section .container{ margin-top: -76px; z-index: 100;}
.icon-box{ padding: 48px 40px; background-color: #fff; border-radius: 10px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; text-align: center;}
.icon-box img{ display: block; margin: 0 auto 20px;}
.slider-content{ margin-left: -12px; margin-right: -12px;}
.slider-content .item{ padding-left: 12px; padding-right: 12px;}

.donate-item + .donate-item{ margin-top: 48px;}
.donate-item{ background-color: #fff; border-radius: 10px; overflow: hidden;}
.donate-item time{ background-image: url(images/clock.png); background-position: left center; background-repeat: no-repeat; padding-left: 24px;}
.donate-item .goal-content{ padding: 20px; border-radius: 10px; background-color: var(--bs-sky);}
.donate-item .goal-content .progress{ height: 12px;}
.donate-item .goal-content .progress-bar{ background: var(--bs-grad-primary); border-radius: 4px; font-size: 9px;}
.donate-item .goal-content .goal-amount{ font-size: 14px;}
.donate-item .goal-content strong{ color: var(--bs-dark);}

.donate-slider .slick-prev, 
.donate-slider .slick-next{ top: -98px; -webkit-transform:translate(0); -ms-transform:translate(0); transform:translate(0); left: auto;}
.donate-slider .slick-prev{ right: 75px;}
.donate-slider .slick-next{ right: 12px;}

.cta-section { position: relative; background-position: bottom center; border-bottom: 10px solid #fff;}
.cta-section:before, .cta-section:after{ width: 50%; content: ''; position: absolute; top: 0; bottom: 0; z-index: 10;}
.cta-section:before{ left: 0; background-color: var(--bs-secondary);}
.cta-section:after{ right: 0; background-color: var(--bs-primary);}
.cta-section [class*=col-]{ padding-bottom: 100px; padding-top: 100px; color: #fff;}
.cta-section [class*=col-] .icon{ width: 60px; margin-right: 10px;}
.cta-section .bg-img{ position: absolute; z-index: 11;; bottom: 0; left: 0; right: 0; line-height: 1;}

.icon-block { padding-top: 110px; padding-bottom: 110px;}
.icon-block .box{ background-color: #fff; padding: 30px 24px; text-align: center;}
.icon-block .box img{ display: block; margin: 0 auto 20px;}

.project-item{ background-color: var(--bs-sky); border-radius: 10px; margin-right: 16px; display: flex;}
.project-item h4{ color: var(--bs-dark); margin-bottom: 16px;}
.project-item ul{ margin-bottom: 16px; padding: 0; list-style: none; font-size: 14px;}
.project-item ul li + li{ margin-left: 10px;}
.project-item ul li i{ color: var(--bs-primary); margin-right: 6px;}
.project-item a{ color: var(--bs-dark); font-size: 14px; text-decoration: none;}
.project-item a i{color: var(--bs-primary); font-size: 10px;}
.project-item time{ background-color: #009adc; font-size: 14px; padding: 0 16px; height: 34px; display: flex; align-items: center; border-radius: 34px; color: #fff; white-space: nowrap; position: absolute; transform: rotate(-90deg); z-index: 100; top: 50%; margin-top: -20px; right: -60px;}
.project-item .image-fit{ height: 208px; border-radius: 10px 0 0 10px;}

.footer{ background-color: #1b2b2b;}
.footer-top{ padding: 80px 0; color: rgba(255,255,255,0.5);}
.footer-top a{ text-decoration: none; color: rgba(255,255,255,0.5);}
.footer-top a:hover{ color: rgba(255,255,255,1);}
.footer-top a.btn{color: rgba(255,255,255,1);}
.footer-top h5{ position: relative; margin-bottom: 24px; padding-bottom: 18px; color: #fff;}
.footer-top h5:after{ background-color: #fff; height: 2px; width: 40px; content: ''; position: absolute; bottom: 0; left: 0; background-color: var(--bs-green);}
.footer-top strong.d-block{ color: #fff; font-size: 18px;}
.footer-top .menu{ margin: 0; padding: 0; list-style: none;}
.footer-top .menu li + li{ margin-top: 5px;}
.footer-top .menu li a{ display: flex; align-items: center;}
.footer-top .menu li a:before{content:'\f101'; font-family:'Font Awesome 6 Free'; font-weight:900; margin-right: 5px; font-size: 12px;}
.footer-top .social a{ color: #fff; display: block;}
.footer-top .social a + a{ margin-left: 16px;}
.footer-top .form-control, .footer-top .form-control:focus{ background-color: #616d6d; border-color: #616d6d; color: #fff; height: 42px; padding: 0 16px;}
.footer-top .form-control::-moz-placeholder {color: var(--bs-white); opacity: 1;}
.footer-top .form-control::placeholder { color: var(--bs-white); opacity: 1;}
.footer-top form .btn{ height: 42px;}
.footer-bottom{ padding: 24px 0; color: #fff; font-size: 12px; background-color: #162525;}
.footer-bottom a{ color: #fff; text-decoration: none;}
.footer-bottom a:hover{ color: #fff; text-decoration: underline;}
.footer-bottom .menu{ margin: 10px 0 0 0; padding: 0; list-style: none; display: flex; align-items: center; justify-content: center;}
.footer-bottom .menu li + li{ margin-left: 10px;}

.header{ position: relative; z-index: 1000;}
.header .pre-header{ background-color: var(--bs-sky); padding-left: 19.8%; padding-right: 3.6458333333333335%; height: 50px; display: flex; align-items: center; justify-content: flex-end;}
.header .pre-header .login-link{ color: #6e7a7a; font-size: 14px; display: flex; align-items: center; text-decoration: none;}
.header .pre-header .login-link i{ color: var(--bs-primary); margin-right: 5px;}
.header .pre-header .social{ margin-left: 30px;}
.header .pre-header .social a{ color: #1b3434; display: block;}
.header .pre-header .social a + a{ margin-left: 16px;}
.header .post-header{ background-color: #fff; border-bottom: 5px solid var(--bs-primary); display: flex; align-items: center; padding-left: 19.8%; padding-right: 3.6458333333333335%;}
.header .post-header .call{ color: #1b3434; font-size: 17px; text-decoration: none; margin-right: 16px; padding-right: 16px; border-right: 1px solid #e8eaea;}
.header .post-header .call small{ font-size: 82.35%; display: block; color: #6e7a7a;}
.header .post-header .call .icon{ height: 42px; width: 42px; color: #fff; font-size: 16px; border-radius: 50%; margin-right: 16px; display: flex; align-items: center; justify-content: center; background-color: var(--bs-primary);}
.header .post-header .header-right{ margin-left: auto; display: flex; align-items: center;}
.header .post-header .cart{ height: 42px; width: 42px; background-image: url(images/cart.png); background-position: center; background-repeat: no-repeat; display: block;}
.header .post-header .btn{ margin-left: 24px;}
.logo{ width: 15.885416666666666%; height: 167px; padding: 20px; display: flex; align-items: center; justify-content: center; border-radius: 0 0 20px 20px; position: absolute; left: 1.7708333333333333%; background-color: #fff; box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;}

.banner-inner .image-fit{ height: 700px;}
.banner-inner .container{ top:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%);; position: absolute;}
.project-btns a{ border: 1px solid #cdd1d1; border-radius: 40px; padding: 12px 30px; display: inline-flex; float: left; margin-right: 10px; margin-bottom: 10px; color: #959999; font-size: 600; text-decoration: none;}
.project-btns a:hover, .project-btns a.active{ color: #000; background-color: var(--bs-sky); border-color: var(--bs-blue);}
.project-list-item{ background-color: #fff; border-radius: 10px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; color: var(--bs-dark); text-decoration: none;;}

.shop-item{ border-radius: 15px; background-color: #fff; margin-top: 48px;}
.shop-item .full-img{ margin-bottom: 16px;}
.shop-item .btn{ white-space: nowrap; margin-top: 16px;}
.shop-item .btn:after{ background-image: url(images/cart-white.png); height: 26px; width: 28px; content: ''; margin-left: 10px; display: block;}
.shop-item .price{ font-weight: 700; color: var(--bs-primary);}

.blog-list-item{ background-color: #fff; border-radius: 10px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; color: var(--bs-dark); text-decoration: none;;}
.blog-list-item p{ color: var(--bs-body-color);}
.blog-list-item .full-img, .project-list-item .full-img{ border-bottom: 5px solid var(--bs-primary);}

.project-title{ margin-bottom: 60px; padding-bottom: 32px; border-bottom: 1px solid #cacaca;}
.progress-div{ width: 100%; max-width: 910px; margin-bottom: 60px; margin-left: auto; margin-right: auto;}
.progress-div .progress{ background-color: #e5e3e3; height: 30px; border: 4px solid #e5e3e3;}
.progress-div .progress-bar{background: var(--bs-grad-primary); border-radius: 4px;}
.progress-div .target {color: var(--bs-dark);}
.progress-div .btn-div .btn{ font-weight: 800; width: 100%;}
.progress-div .btn-div .btn + .btn{ margin-top: 24px;}

.comment{ background-color: #f6fafb; border-radius: 16px; color: var(--bs-dark);}
.comment span{ color: var(--bs-body-color);}
.comment strong{ font-weight: 800; font-size: 20px;}
.loadmore a{ text-decoration: none; color: #accee0;}
.title-section {border-bottom: 1px solid #cacaca; padding-bottom: 24px;}

.sidebar .widget + .widget{ margin-top: 24px;}
.sidebar .widget ul{ padding: 16px; background-color: #fff; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; margin: 0; list-style: none;}
.sidebar .widget ul li + li{ margin-top: 10px;}
.sidebar .widget ul li a{ color: #0099db; font-weight: 700; background-image: url(images/check.png); background-repeat: no-repeat; background-position: left 2px; padding-left: 24px; display: block; text-decoration: none;}

.section-login{ padding: 96px 0 156px;}
.login-form{ background-color: #fff; border-radius: 16px; width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; color: var(--bs-dark);}
.login-form .content{ padding: 48px 35px;}
.login-form .content form .form-control{ box-shadow: none; border: none; border-bottom: 1px solid #cccccc; padding: 0 0 0 33px; background-position: left center; background-repeat: no-repeat; border-radius: 0; height: 50px;}
.login-form .content form .username{ background-image: url(images/user.png);}
.login-form .content form .password{ background-image: url(images/lock.png);}
.login-form .content form .radio input[type="checkbox"] { display:none;}
.login-form .content form .radio input[type="checkbox"] + label { cursor: pointer;}
.login-form .content form .radio input[type="checkbox"] + label span { height: 16px; width: 48px; display: block; position: relative; border-radius: 16px; background-color: #cacaca;}
.login-form .content form .radio input[type="checkbox"] + label span:before{ background-color: #fff; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; height: 26px; width: 26px; position: absolute; top: 50%; margin-top: -13px; content: ''; border-radius: 26px;}
.login-form .content form .radio input[type="checkbox"]:checked + label span{ background-color: var(--bs-secondary);}
.login-form .content form .radio input[type="checkbox"]:checked + label span:before{ left: auto; right: 0;}
.login-form a{ color: var(--bs-dark); text-decoration: none; font-weight: 700;}
.login-form .btn-dark, .login-form .btn-dark:hover, .login-form .btn-dark:focus{ background-color: #000; border-color: #000;}
.login-form .btn-light, .login-form .btn-light:hover, .login-form .btn-light:focus{ background-color: #fff; border-color: #fff; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}

.stepper-wrapper {display:flex; justify-content:space-between; margin-bottom:0;}
.stepper-item {position:relative; display:flex; flex-direction:column; align-items:center; flex:1;}
.stepper-item::before {position:absolute; content:""; background:#d7d6d6; height: 6px; top:18px; left:-50%; z-index:2;}
.stepper-item::after {position:absolute; content:""; background:#d7d6d6; height: 6px; width:100%; top:18px; left:50%; z-index:2;}
.stepper-item .step-counter {position:relative; z-index:5; display:flex; justify-content:center; align-items:center; width:40px; height:40px; border-radius:65px; background:#dcdcdc;margin-bottom:10px; font-size: 24px; color: #fff;}
.stepper-item.active .step-counter{ background-color: var(--bs-secondary);}
.stepper-item.progress-step .step-counter {background-color: var(--bs-primary);}
.stepper-item.completed::after {position:absolute; content:""; border-bottom:2px solid rgba(0, 0, 0, 0.12); width:100%; top:20px; left:50%; z-index:3;}
.stepper-item:first-child::before {content:none;}
.stepper-item:last-child::after {content:none;}
.stepper-item .step-name{ font-size: 16px;}
.stepper-item.completed .step-name{background:linear-gradient(90deg, #D22A30 0%, #8C1C20 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent}
.stepper-item.active::before, .stepper-item.active::after{ background:var(--bs-grad-primary);}

.donate-form .amount-option input[type="radio"] { display:none;}
.donate-form .amount-option input[type="radio"] + label { background-color: #e0eaef; border-radius: 16px; padding: 24px; display: block; font-size: 18px;  cursor: pointer;}
.donate-form .amount-option input[type="radio"]:checked + label { background-color: var(--bs-primary); color: #fff;}
.donate-form .amount-option input[type="radio"] + label strong{ font-size: 68px; display: block; color: var(--bs-dark); font-weight: 800;}
.donate-form .amount-option input[type="radio"]:checked + label strong{ color: #fff;}
.donate-form .donate-form .input-group{border: 1px solid #a8a7a7; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; border-radius: 10px; background-color: #fff;}
.donate-form .input-group .form-control, 
.donate-form .input-group .form-control:focus
{ border-radius: 8px; background-color: transparent; border-color: transparent; font-size: 18px; padding: 16px; box-shadow: none;}
.donate-form .input-group .input-group-text{ background-color: #f6f9fa;}
.donate-form .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){border-radius: 10px 0 0 10px !important; border: none; font-size: 18px;}
.donate-form .form-label + .form-control,
.donate-form .form-label + .form-control:focus{border-radius: 8px; font-size: 18px; padding: 16px; box-shadow: none; border: 1px solid #a8a7a7; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}
.donate-form textarea{ height: 200px;}
.donate-form .form-check .form-check-label{ padding-left: 10px;}
.donate-form .processing-fee{ background-color: #ecf2f5; border-radius: 10px; padding: 16px;}
.donate-form .terms{ font-size: 16px; text-align: center;}
.donate-form a{ color: var(--bs-body-color); text-decoration: underline;}
.my-acc-title{ color: #fff; padding: 30px 20px 30px 19.8%; background-color: var(--bs-primary);}

.acc-wrapper{ padding: 0 30px;}
.acc-wrapper .menu{ margin: 0 30px 0 0; padding: 0; list-style: none; width: 254px; background-color: #e5f6fc; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; overflow: hidden; border-radius: 10px;}
.acc-wrapper .menu li + li{ border-top: 1px solid #d4e4e9;}
.acc-wrapper .menu li a{ display: flex; align-items: center; height: 72px; padding: 0 30px; text-decoration: none; font-weight: 700; color: var(--bs-dark);}
.acc-wrapper .menu li a:hover, .acc-wrapper .menu li.active a{ background-color: #fff;}
.acc-wrapper .menu li a img{ margin-right: 10px;}
.acc-wrapper .content{box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; background-color: #fff;}
.acc-wrapper .content .table > thead > tr > th{ color: #fff; background-color: #818181; white-space: nowrap;}

@media (min-width:300px) {
h1{ font-size:calc(2.1875rem + ((1vw - 3.2px) * 0.8125));}
h2{font-size:calc(1.875rem + ((1vw - 3.2px) * 0.625));}
h3{font-size:calc(1.5rem + ((1vw - 3.2px) * 0.5));}
h4{font-size:calc(1.1875rem + ((1vw - 3.2px) * 0.3125));}
h5{font-size:calc(1.0625rem + ((1vw - 3.2px) * 0.1875));}
.font-18{font-size:calc(1rem + ((1vw - 3.2px) * 0.125));}
.font-20{font-size:calc(1rem + ((1vw - 3.2px) * 0.25));}
.font-24{font-size:calc(1rem + ((1vw - 3.2px) * 0.5));}
}

@media (min-width:1400px) {
h1{font-size:48px;}
h2{font-size:40px;}
h3{font-size:30px;}
h4{font-size:24px;}
h5{font-size:20px;}
.font-18{font-size:18px;}
.font-20{ font-size:20px;}
.font-24{ font-size:24px;}
}

@media (min-width:576px) {
  

}

@media (min-width:768px) {
  .project-list-item h5, .blog-list-item h5{ font-size: 22px;}
  .shop-item .full-img{ margin-bottom: 0; margin-right: 16px; width: 297px;}
  .shop-item .btn{ white-space: nowrap; position: absolute; right: 16px; bottom: -30px; margin-top: 0;}
  .progress-div .btn-div .btn{ font-weight: 800; font-size: 24px; height: 74px; width: auto;}
  .progress-div .btn-div .btn + .btn{ margin-top: 0; margin-left: 24px;}
  .comment strong{ font-size: 29px;}
  .stepper-item::before, .stepper-item::after { top:28px; height: 9px;}
  .stepper-item .step-counter {width:65px; height:65px;}
  .stepper-item .step-name{ font-size: 21px;}

}

@media (min-width:992px) {
  .footer-bottom .menu{ margin: 0 0 0 auto;}
}

@media (min-width:1200px) {
}

@media (min-width:1400px) {	
}