@charset "utf-8";
/* CSS Document */

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

#page{ overflow:hidden; padding-top:0;}
.full-img { position:relative;}
.full-img img{ width:100%; height:auto; position:relative; z-index:2;}
.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;}
.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-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;}
.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);}

.header{ position: relative; z-index: 1000;}
.pre-header{ background-color: var(--bs-black); color: var(--bs-white);}
.pre-header .container{ height: 56px; display: flex; align-items: center;}
.pre-header .container ul{ display: flex; align-items: center; margin: 0; padding: 0; list-style: none;}
.pre-header .container ul li + li:before{ content: "|"; margin: 0 10px;}
.pre-header .container ul li{ font-size: 14px;}
.pre-header .container a{ color: var(--bs-white); text-decoration: none;}
.pre-header .container ul li.social a + a{margin-left: 16px;}
.pre-header .container .logos{ margin-left: auto;}

.post-header{ background-color: var(--bs-white); -moz-transition:all 0.5s ease; -webkit-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease;}
.post-header .container{ height: 85px; display: flex; align-items: center;}
.post-header .container .btn{ margin-left: auto;}
.post-header.scroll-to-fixed-fixed{ box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;}

.h1-64 h1{ line-height: 1;}

.home-banner{ position: relative; padding: 12px 0 0 0; z-index: 2;}
.home-banner .image-fit{ position: absolute; top: 0; right: 0; bottom: 50px; left: 0;}
.home-banner .content{ color: var(--bs-white);}
.home-banner .banner-form{ border-radius: 12px; background-color: #e3fbfe; box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;}
.home-banner .banner-form .image-radio input[type=radio]{ display: none;}
.home-banner .banner-form .image-radio input[type=radio] + label{ display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; text-transform: uppercase; color: var(--bs-black); border: 2px solid #d7dada; border-radius: 6px; background-color: var(--bs-white); height: 145px; font-size: 13px; cursor: pointer;}
.home-banner .banner-form .image-radio input[type=radio] + label strong{ font-weight: 500;}
.home-banner .banner-form .image-radio input[type=radio]:checked + label{ border-color: var(--bs-primary);}
.home-banner .banner-form .price-radio input[type=radio]{ display: none;}
.home-banner .banner-form .price-radio input[type=radio] + label{ display: flex; align-items: center; justify-content: center; background-color: var(--bs-white); border: 2px solid var(--bs-primary); color: var(--bs-black); font-weight: 700; font-size: 29px; height: 73px; border-radius: 6px; cursor: pointer;}
.home-banner .banner-form .price-radio input[type=radio]:checked + label{ color: var(--bs-white); background-color: var(--bs-primary);}
.home-banner .banner-form .form-control{ border: 2px solid var(--bs-primary); padding: 0 16px 0 60px; background-image: url(images/dollar-sign.png); background-position: 16px 50%; background-repeat: no-repeat; color: var(--bs-black); height: 73px; font-size: 18px;}
.home-banner .banner-form .note{ background-color: #d2e6e9; text-align: center; padding: 16px; border-radius: 8px;}
input.btn{ font-weight: 900; font-size: 24px; height: 73px;}

.w1{ background-image: url(images/line-bg.png); background-position: center; background-color: #f0f5f7; padding: 132px 0 110px; position: relative; z-index: 1; margin-top: -50px; text-align: center;}
.w1 h3{font-family: var(--bs-body-font-family);}

.gift-box{ position: relative; z-index: 3; background-color: var(--bs-primary); padding: 40px 40px 40px 200px; border-radius: 16px; font-weight: 900; color: var(--bs-white); margin-top: -16px;}
.gift-box .flex-grow-1{ text-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;}
.gift-box .btn-secondary {  --bs-btn-hover-color: var(--bs-white);--bs-btn-hover-bg: #006283; --bs-btn-hover-border-color: #006283;--bs-btn-active-color: var(--bs-white); --bs-btn-active-bg: #006283; --bs-btn-active-border-color: #006283;}
.gift-box .gift-img{ position: absolute; bottom: 18px; left: 25px; width: 117px; height: 174px;;}
.shadow-img { text-align: center; line-height: 0;}

.w2{ padding-top: 32px;}

.section{ padding: 80px 0;}
.section-lt{ background-color: var(--bs-light);}
.color-light p, .color-light ul,  .color-light ol{ color: #6d6d6d;}

.w3{box-shadow: rgb(0, 0, 0,0.1) 0 3px 6px 0px inset; background-color: #fbfbfc; padding-bottom: 56px;}
.donate-box-content{ background-color: var(--bs-white); padding: 20px; border-radius: 12px;box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;   text-align: center;}
.donate-box-content .full-img img{ border-radius: 10px;}

.w4{box-shadow: rgb(0, 0, 0,0.1) 0 3px 6px 0px inset; background-color: var(--bs-white);}
.counter-section{ padding: 64px 0 40px; background-color: var(--bs-primary); color: var(--bs-white); text-align: center;}
.counter-section img{ display: block; margin: 0 auto 24px; height: 77px; width: auto;}

.quote-form{ background-color: #f7f8f9;}
.quote-form .form-control{ min-height: 75px;}
.quote-form .form-control, .quote-form .form-control:focus{ border-color: var(--bs-white); box-shadow: none;}
.quote-form .form-control + .input-group-text{ background-color: var(--bs-white); border-color: var(--bs-white);}
.quote-form textarea.form-control{ height: 157px;}
.quote-form textarea.form-control + .input-group-text{ align-items: flex-start; padding-top: 20px;}

.footer{ background-color: var(--bs-black); background-image: url(images/footer-bg.png); background-position: center; color: #b8b8b8;}
.footer-top{ padding: 80px 0; border-bottom: 2px solid #1b2f3e; display: flex; align-items: center;} 
.footer-top .call{ color: var(--bs-white); font-weight: 800; text-decoration: none; display: inline-flex; font-family: var(--bs-heading-font);}
.footer-top .call:hover{color: var(--bs-primary);}
.footer-top ul{ margin-left: auto; margin-bottom: 0; padding: 0; list-style: none; display: flex; align-items: center; justify-content: center;}
.footer-top ul li + li{ margin-left: 12px;}
.footer-top ul li a { display: flex; align-items: center; justify-content: center; color: var(--bs-white); border-radius: 6px; background-color: #1b2f3e; height: 60px; width: 60px; text-decoration: none;}
.footer-top ul li a:hover{ color: var(--bs-white); background-color: var(--bs-primary);}
.footer-content{ padding: 80px 0 124px; font-size: 15px;}
.footer-content h5{font-family: var(--bs-body-font-family); font-size: 18px; margin-bottom: 30px; color: var(--bs-white);}
.footer-logo, .contact-intro{ margin-bottom: 30px;}
.footer-content .menu{ margin: 0; padding: 0; list-style: none;}
.footer-content .menu li + li{margin-top: 12px;}
.footer-content .menu li a{color: #b8b8b8; text-decoration: none;}
.footer-content .menu li a:hover{color: var(--bs-white);}
.contact-info a{ display: flex; color: #b8b8b8; text-decoration: none; align-items: ;}
.contact-info a:hover{ color: var(--bs-white);}
.contact-info a + a{ margin-top: 10px;}
.contact-info a img{ margin-right: 10px;}
.footer-bottom{ padding: 18px 0; position: relative;  border-top: 2px solid #1b2f3e; font-size: 13px;}
.footer-bottom ul{ margin: 0 0 0 auto; padding: 0; list-style: none; display: flex; align-items: center;}
.footer-bottom ul li + li{ margin-left: 12px;}
.footer-bottom ul li a{color: #b8b8b8; text-decoration: none;}
.footer-bottom ul li a:hover{color: var(--bs-white);}
.scroll-to-top{ background-color: var(--bs-primary); color: var(--bs-white); font-size: 16px; display: flex; align-items: center; justify-content: center; border-radius: 6px;height: 60px; width: 60px; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); text-decoration: none;}

.page-banner{ position: relative; color: var(--bs-white);}
.page-banner .image-fit{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;}
.page-banner .image-fit:before{ background-color: var(--bs-black); opacity: 0.5; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
.page-banner .container{ height: 320px; display: flex; align-items: center;}
.page-banner .container h1{ font-weight: 800;}

.stepper-wrapper {display:flex; justify-content:space-between; margin-bottom:60px; margin-left: auto; margin-right: auto; max-width: 548px; width: 100%;}
.stepper-item {position:relative; display:flex; flex-direction:column; align-items:center; flex:1;}
.stepper-item::before {position:absolute; content:""; background: linear-gradient(90deg,rgba(48, 148, 172, 1) 0%, rgba(255, 194, 21, 1) 100%); height: 6px; width:100%; top:27px; left:-50%; z-index:2;}
.stepper-item::after {position:absolute; content:""; background: linear-gradient(90deg,rgba(48, 148, 172, 1) 0%, rgba(255, 194, 21, 1) 100%); height: 6px; top:27px; left:50%; z-index:2;}
.stepper-item .step-counter {position:relative; z-index:5; display:flex; justify-content:center; align-items:center; width:58px; height:58px; border-radius:10px; border:1px solid var(--bs-secondary); background:var(--bs-secondary); color: var(--bs-white); font-size: 24px;}
.stepper-item.active .step-counter{ background-color: #dcdcdc; border-color: #dcdcdc;}
.stepper-item.active:before{ background: #dcdcdc;}
.stepper-item.completed .step-counter {border:1px solid var(--bs-primary); background:var(--bs-primary); color:var(--bs-white);}
.stepper-item.completed::after {position:absolute; content:""; background: linear-gradient(90deg,rgba(48, 148, 172, 1) 0%, rgba(255, 194, 21, 1) 100%); height: 6px; width:100%; top:27px; left:50%;}
.stepper-item.completed::before { border-bottom:6px solid #c7e6f8; z-index: 4;}
.stepper-item:first-child::before {content:none; }
.stepper-item:last-child::after {content:none;}
.stepper-item .step-name{ color:#6d6d6d; margin-top: 6px;}

form.donate-form .container{ margin: 0 auto; max-width: 1170px; width: 100%; display: block;}
.amount-check{ background-color:#eaf6f9; padding: 30px; border-radius: 20px; color: #1b2f3e;}
.amount-check .form-check{ display: flex; align-items: start;}
.amount-check .form-check-input{ margin-right: 8px;}
.amount-check .sub-total{ font-size: 68px; font-weight: 700; line-height: 1; font-weight: 800;}
.amount-check .sub-total small{ display: block; font-size: 52.94117647058824%; font-weight: 500;}
.donate-form .form-control, .donate-form .form-control:focus{box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px; min-height: 70px; border-radius: 12px; border-color: #a8a7a7;}
.donate-form textarea.form-control{ height: 225px;}
.donate-form .btn{ width: 100%; max-width: 467px;}
.donate-form .section + .section{ background-color: var(--bs-light);}

.volunteer{ padding: 0 45px 30px; background-color: var(--bs-primary); border-radius: 6px; color: var(--bs-white);} 
.volunteer .ratio{ margin-left: auto; margin-right: auto; width: 222px; border-radius: 50%; border: 3px solid var(--bs-white); margin-top: -20px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}
.volunteer .flex-grow-1{ padding-top: 35px; padding-left: 30px; color: var(--bs-white);}
.volunteer .flex-grow-1 .d-lg-flex a{ display: flex; color: #b4ecfa; text-decoration: none; align-items: center; margin-top:20px;}
.volunteer .flex-grow-1 .d-lg-flex a:hover{ color: var(--bs-white);}
.volunteer .flex-grow-1 .d-lg-flex a img{ margin-right: 10px;}

.event-item{ background-color: var(--bs-white); border-radius: 10px; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; padding: 20px; position: relative;}
.event-item .ratio{ overflow: hidden; border-radius: 6px;}
.event-item ul{ margin: 0 0 16px 0; padding: 0; list-style: none; display: flex; align-items: center;}
.event-item ul li{display: flex; align-items: center; font-size: 16px; color: #6f7775;}
.event-item ul li i{ color: var(--bs-secondary); margin-right: 6px;}
.event-item ul li + li{ margin-left: 12px;}
.event-item time{ color: #fff; font-family: var(--bs-heading-font); font-weight: 700; text-align: center; position: absolute; top: 40px; left: 40px; z-index: 100; background-color: #fe7f4c; line-height: 1.2; height: 68px; width: 68px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.event-item time span{ display: block; }

.page-form-section .form-control, .page-form-section .form-control:focus{box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px; min-height: 70px; border-radius: 12px; border-color: #a8a7a7;}
.page-form-section .btn{ width: 100%; max-width: 320px;}
.new-home-banner{ padding: 65px 0 165px;}
.new-home-banner .image-fit{ bottom: 0;}
.new-home-banner + .w1{ margin-top: 0;}
.section-fff{ background-color: #fff;}
.section-fbfbfc{ background-color: #fbfbfc;}
.section-shadow{box-shadow: rgb(0, 0, 0,0.1) 0 3px 6px 0px inset;}



@media (min-width:320px) {
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));}
.h1-64 h1, .counter-section h2{font-size: calc(2rem + ((1vw - 3.2px) * 2.963));}
.gift-box {font-size: calc(1.625rem + ((1vw - 3.2px) * 2.4074));}
.footer-top .call{font-size: calc(1.4375rem + ((1vw - 3.2px) * 2.1296));}
}

@media (min-width:1400px) {
h1{font-size:48px;}
h2{font-size:40px;}
h3{font-size:32px;}
h4{font-size:24px;}
h5{font-size:20px;}
.font-18{font-size:18px;}
.font-20{ font-size:20px;}
.font-24{ font-size:24px;}
.h1-64 h1, .counter-section h2{font-size: 64px;}
.gift-box {font-size: 52px;}
.footer-top .call{font-size: 46px;}
}


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

@media (min-width:768px) {
.w4 [class*=col-] + [class*=col-]{ border-left: 4px solid #dcf1f5;}
}

@media (min-width:992px) {
.counter-section [class*=col-] + [class*=col-]{ border-left: 2px dashed #8bc2cf;}
.volunteer .flex-grow-1 .d-lg-flex a + a{ margin-left: 16px;}
}

@media (min-width:1200px) {
.w2 .full-img{margin-right: -60px;}
.w4 .gx-lg-5 {--bs-gutter-x: 5rem;}
}

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