*, ::before, ::after { margin: 0; box-sizing: border-box;}
a {text-decoration: none !important;}
label {display: block;}
ul {list-style: none !important;padding: 0 !important; margin: 0 !important;}
img {vertical-align: bottom;}
html { scroll-behavior: smooth; font-size: 15px; --ff: 'Poppins', sans-serif; --inter:'Inter',sans-serif; --caveat:'Caveat',sans-serif; --blue:#002366; --orange:#f68033; --dark-orange:#fa6a09; --gray:#a3a2a2; --dark-gray:#525560; --white:#fff; --light-white:#f2f8f9; --middleBlue:#7ACCE5; --black:#1D2139;}
body { font-size: 16px; font-family: 'Poppins', sans-serif;}
h1, h2, h3, .navbar {font-family: var(--ff)}

.btn{width: 192px; padding: 12px 24px; font: 500 18px/1.5 var(--ff); background-color: var(--orange) !important; border: transparent;}
.btn:hover{background-color: var(--dark-orange) !important;}
.wrap-1 .navbar {background: linear-gradient(180deg, rgba(0,0,0,0.6) 50.56%, rgba(0,0,0,0) 100%); position: absolute; top: 0;left: 0;width: 100%;z-index: 10;}
.wrap-1 .navbar.scrolled {background: #fff !important;}
.wrap-1 .navbar .navbar-brand{font: 700 32px/1.5 var(--ff) !important; color: var(--white);}
.wrap-1 .navbar .navbar-brand .orange{color: var(--orange);}
.wrap-1 .navbar.scrolled .blue{color: var(--blue);}
.wrap-1 .navbar-nav .nav-item .nav-link{font: 600 18px/1.5 var(--ff); color: var(--white);}
.wrap-1 .navbar.scrolled .nav-link{color: var(--blue);}
.wrap-1 .dropdown .dropdown-menu .dropdown-item{font: 600 18px/1.5 var(--ff); color: var(--blue);}
.wrap-1 .dropdown-menu .dropdown-item:hover {border-radius: 10px;}
.wrap-1 .dropdown-menu .dropdown-item:active {background: var(--white);}
.hero-section {background: url(/assets/image/helpingwithboat.jpg); background-size: cover; padding: 160px 0 192px; position: relative;z-index: 1;}
.hero-section::before {  
content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0,0,0,0.2));
  z-index: -1;
}

.hero-sections .carousel-inner { max-height: 560px; overflow: hidden;}
.hero-sections .carousel-item img {width: 100%;height: 560px; object-fit: cover;}


.badge{border: 1px solid var(--white); padding: 4px 12px; font: 500 18px/1.5 var(--ff);}
.main-heading{font: 700 54px/1.5 var(--ff); color: var(--white);}
.para{font: 400 18px/1.5 var(--inter); color: var(--gray); margin-top: 32px; margin-bottom: 48px;}
.link-btn{font: 500 18px/1.5 var(--ff); color: var(--white); border-bottom: 2px solid var(--white); margin-left: 24px;}

.wrap-2{padding: 92px 0; background-color: var(--light-white);}
.sub-heading{font: 600 44px/1.5 var(--ff); color: var(--blue);}
.core-values li{padding: 18px;}
.core-values li a{font:500 18px/1.5 var(--ff); color: var(--dark-gray); padding: 12px 12px 12px 24px; margin-left: 10px;}
.wrap-2 .core-values li a.active {border-left: 3px solid var(--middleBlue);}
.heading{font: 700 36px/1.5 var(--ff); color: var(--orange); margin-bottom: 12px;}
.value-content .para{color: var(--dark-gray); margin-top: 0;}
.value-content img{width: 100%; height: 332px; object-fit: cover; border-radius: 15px;}
.value-content {display: none;}
.value-content.active {display: block;}


.wrap-3{padding: 96px 0; background: var(--white);}
.wrap-3 .core-values{border-bottom: 3px solid var(--gray);}
.wrap-3 .core-values li a {font: 500 14px/1.5 var(--ff); color: var(--dark-gray);text-align: center;}
.wrap-3 svg{color: var(--dark-gray) !important;}
.wrap-3 .value-content{margin-top: 64px;}
.wrap-3 .core-values li {position: relative;padding: 8px 24px;}
.wrap-3 .core-values li.active::after {
  content: "";
  position: absolute;
  bottom: -2px; 
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--middleBlue);
}
.wrap-3 .core-values li.active a{color: var(--black);}
.wrap-3 .btn{background-color: var(--blue);}
.wrap-3 .link-btn{color: var(--blue); border-bottom: 2px solid var(--blue);}

.wrap-4{padding: 96px 0; background-image: radial-gradient( circle 400px at 6.8% 8.3%,  rgba(255,244,169,1) 0%, rgba(255,244,234,1) 100.2% );}
.wrap-4 .link-btn{color: var(--blue);border-bottom: 2px solid var(--blue);}
.wrap-4 .news-1{background: url(/assets/image/news1.png); background-size: cover; border-radius: 15px; padding-top: 70px; position: relative; z-index: 1;}
.wrap-4 .news-1::after {  
content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: -1;
  border-radius: 15px;
}
.wrap-4 .news-1 .date{color: var(--white);}
.wrap-4 .news-1 h3{font: 600 30px/1.1 var(--ff); color: var(--white);}
.wrap-4 .news-1 .para{font-size: 14px;}
.wrap-4 .card-body .date{font: 400 14px/1.5 var(--inter); color: var(--dark-gray);}
.wrap-4 .card-body h5{font: 500 27px/1.3 var(--inter); color: var(--black);}

.wrap-6{background-color: var(--blue); padding: 64px 0;}
.wrap-6 .sub-heading{color: var(--white); font-size: 48px; font-family: var(--caveat); margin-bottom: 20px;}
.wrap-6 .text{font: 400 16px/1.5 var(--inter); color: var(--white);}
.wrap-6 h3{font: 700 22px/1.5 var(--inter); color: var(--white);}
.wrap-6 .name{font: 400 16px/1.5 var(--inter); margin-bottom: 12px; color: var(--white);}
.wrap-6 address p{font-size: 14px; color: var(--white);}
.wrap-6 .contact{color: var(--white); display: block; margin-top: 20px;}
.wrap-6 .social-media a{color: var(--white) !important; display: inline-block; font-size: 20px; padding: 5px; margin: 5px;}

.wrap-6 .bottom-footer{padding: 64px 0 0;}
.wrap-6 .bottom-footer p{color: var(--light-white); font-family: var(--inter);}
.wrap-6 .bottom-footer a{color: var(--white); font-family: var(--inter); display: inline-block; margin-left: 40px;}
.wrap-6 .bottom-footer h5{font: 800 18px/1.5 var(--inter); color: var(--white);}

/* Our Story */
.wrap-1 .other-navbar{background: transparent;}
.hero-small{background: url(/assets/image/RamgarhiaSabha.jpg); background-size: cover; background-position: center; position: relative; z-index: 1;}
.hero-small .social-share a{color: var(--white); font-size: 32px; display: inline-block; margin-right: 10px;}
.hero-small{padding: 160px 0;}
.hero-small .main-heading{padding-top: 98px;}
.hero-small::before {  
content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.wrap-7{padding: 96px 0; background: var(--white);}
.dark-para{color: var(--dark-gray);}
.wrap-8{padding: 96px 0; background: var(--light-white);}
.wrap-9{padding: 96px 0; background-color: var(--white);}
.quotes{font: 700 36px/1.0 var(--caveat); color: var(--dark-gray);}
.wrap-10{padding: 96px 0; background-color: var(--light-white);}
.wrap-12{padding: 96px 0; background-color: var(--light-white);}
.wrap-13{padding: 96px 0; background-color: var(--white);}
.wrap-14{padding: 96px 0; background-color: var(--light-white);}

/* Our Team */
.ourTeam{background: url(/assets/image/ourTeam.jpg); background-size: cover; background-position: center;}

/* get-in-touch */
.get-in-touch{background: url(/assets/image/get-in-touch.jpg); background-size: cover; background-position: center;}

.wrap-15{padding: 96px 0; background-color: var(--white);}
.main-address{padding: 48px; background-color: var(--white); box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px; border-radius: 15px;}
.address-name{font: 500 30px var(--ff); color: var(--black);}
.flag{width: 50px; height: 40px; margin-right: 20px;}
.wrap-15 .main-address h4{font: 400 24px var(--inter); color: var(--black);}
.wrap-15 .main-address .address{font: 400 24px var(--inter); color: var(--dark-gray);}
.wrap-15 .contact-details{background-color: var(--blue);}
.wrap-15 .contact-details .contactInfo{font: 400 20px/1.5 var(--inter); color: var(--white); display: block; margin-bottom: 20px;}
.wrap-15 .contact-details .contactInfo i{margin-right: 25px; font-size: 20px;}

.wrap-16{background-color: var(--white);}
.wrap-16 .main-address .addinfo{font: 500 24px var(--inter); color: var(--dark-gray);}
.wrap-16 .addinfoData{color: var(--blue); margin-left: 10px;}

.wrap-5{background: url(/assets/image/make-an-impact.jpg); background-size: cover; padding: 96px 20px 224px; position: relative; z-index: 1;}
.wrap-5::after {  
content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: -1;
}
.wrap-5 .sub-heading{color: var(--white); font: 500 48px/1.5 var(--ff);}
.wrap-5 h3{font: 700 96px/1 var(--caveat); color: var(--white); margin: 64px 0;}
.wrap-5 .card-body{padding: 32px;}
.wrap-5 .card-title{color: var(--blue); font-size: 20px; font-family: var(--inter);}
.wrap-5 .card-text{font: 400 16px/1.5 var(--inter); color: var(--dark-gray); margin-bottom: 80px; margin-top: 10px;}
.wrap-5 .card-body .btn{font-size: 24px;}
.wrap-5 .small-text{font: 400 14px/1.5 var(--inter); color: var(--dark-gray);}

.donation{padding: 96px 0; background-color: var(--white);}
.donation .para{color: var(--orange);}
.donation h3{font: 500 16px var(--ff); color: var(--dark-gray);}
.donation .sm-text{font: 400 14px var(--inter); color: var(--dark-gray);}
.donation .street-address{font: 400 16px var(--inter); color: var(--dark-gray);}

/* what-We-Do */
.what-We-Do{background: url(/assets/image/what-we-do.jpg); background-size: cover; background-position: center;}
.wrap-17 {padding: 0 0 96px 0; color: var(--white);}

/* Who-we-are */
.who-we-are{background: url(/assets/image/who-we-are.jpg); background-size: cover; background-position: center;}

/* How-to-help */
.how-to-help{background: url(/assets/image/how-to-help.jpg); background-size: cover; background-position: center;}
.volunteer{font: 700 18px/1.5 var(--inter); color: var(--black);}

/* privacy-policy */
.privacy-policy{background: url(/assets/image/policy.jpg); background-size: cover; background-position: center;}
.policy{padding: 96px 0 24px; background-color: var(--white);}
.privacy{padding: 0 0 96px; background-color: var(--white);}
.policy .para, .privacy .para{font: 400 18px/1.5 var(--inter); color: var(--dark-gray);}
.privacy .mid-heading{font: 600 18px var(--ff); color: var(--gray);}
.list{font: 500 16px var(--ff); color: var(--gray);}

/* terms-conditions */
.terms-conditions{background: url(/assets/image/terms-conditions.jpg); background-size: cover; background-position: center;}
.conditions{padding: 96px 0; background-color: var(--white);}
.conditions .para{color: var(--dark-gray);}

/* Dialysis Room */
.dialysisRoom{background: url(/assets/image/dialysisRoom.png); background-size: cover; background-position: center;}
.dialysisRoom img{vertical-align: middle;}
.dialysis-center{padding: 96px 0; background-color: var(--white);}
.dialysis-center .date{font: 400 18px var(--inter); color: var(--gray);}
.dialysis-center .para{color: var(--dark-gray);}
.dialysis-center .head-of-operation{font: 500 16px var(--ff); color: var(--black);}

/* honiring */
.honiring{background: url(/assets/image/news2.jpg); background-size: cover; background-position: center;}
.honiring img{vertical-align: middle;}

/* panjabFloods */
.panjabFloods{background: url(/assets/image/panjabFloods.png); background-size: cover; background-position: center;}
.flood-section{background: url(/assets/image/news1.png); background-size: cover;}

/* Slider */
.Slider{background-color: var(--light-white); padding: 60px 0;}
.marquee-container { width: 100%; overflow: hidden;}
.marquee-row { overflow: hidden; margin-bottom: 20px;}
.marquee-content {display: flex; gap: 30px; animation: scroll 20s linear infinite; will-change: transform;}
.row-bottom .marquee-content {animation-direction: reverse;}
.marquee-content img { width: 450px; height: 400px; border-radius: 15px; object-fit: cover; flex-shrink: 0; cursor: pointer; max-width: 100%;}
/* Infinite scroll */
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Pause on hover */
.marquee-row:hover .marquee-content {
  animation-play-state: paused;
}
.name-text{font: 600 16px var(--ff); color: var(--black); margin: 16px 0;}

/* Manitoba Gov */
.manitobaGov{background: url(/assets/image/RamgarhiaConfrence.jpg); background-size: cover; background-position: center;}
.manitobaGov img {vertical-align: middle;}

/* Forefront */
.forefront{background: url(/assets/image/panjabFloods.png); background-size: cover; background-position: center;}
.forefront img {vertical-align: middle;}

/* Recent News */
.recentNews{background: url(/assets/image/Cleanwater.jpg); background-size: cover; background-position: center;}
.all-news{padding: 96px 0; background-color: var(--light-white);}
.black-heading{font: 400 22px var(--inter); color: var(--black);}
.all-news .para { color: var(--dark-gray); margin: 22px 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.all-news .link-btn{color: var(--blue); border-bottom: 2px solid var(--blue); margin: 0;}
.all-news .small{color: var(--gray);}
.all-news .card-text{font: 400 16px/1.5 var(--inter); color: var(--dark-gray);}
.all-news .news-right-section{width: 100%; height: 650px; overflow-y: scroll; padding: 0 0 0 54px;}

/* All Projects */
.ourProjects{background: url(/assets/image/RamgarhiaSabhaChandigarh.jpg); background-size: cover; background-position: center;}
.allProjects{padding: 96px 0; background-color: var(--light-white);}
.allProjects .card { position: relative; overflow: hidden; border-radius: 15px;}
.allProjects .card-img { display: block; width: 100%; height: auto;}
.allProjects .card::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); 
  z-index: 1; 
}
.allProjects .card-img-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; color: var(--white); padding: 28px;}
.allProjects .card-title{font: 500 30px var(--ff);}
.allProjects .card-link{font: 500 18px var(--ff); color: var(--white); border-bottom: 2px solid var(--white);}

/* Our Partnerships */
.ourPartnerships{background: url(/assets/image/partner.jpg); background-size: cover; background-position: center;}


/* payment-section */
.payment-section{background-color: var(--white); display: flex; justify-content: center; align-items: center; padding: 40px 0;}
.payment-content{background-color: var(--dark-orange); width: 344px; box-shadow: 0 4px 14px 0 rgba(0, 0, 0, .24);}
.payment-topHeader{padding: 16px 18px;}
.payment-topHeader .screen-title{font: 500 12px var(--inter); color: var(--white);}
.Screen-progressDots .progressDot{display: inline-block; vertical-align: middle; margin: 0 5px; width: 8px; height: 8px; line-height: 18px; border-radius: 50%; transition: .12s ease-in-out; text-align: center; border: 2px solid var(--white); border-color: var(--dark-orange); background: var(--dark-orange); filter: brightness(.5);}
.Screen-progressDots .progressDot.marked{background-color: #48d08c; border-color: #48d08c; filter: none;}
.Screen-progressDots .progressDot.active{width: 32px; border-radius: 20px; box-shadow: 0 0 8px 4px rgba(72, 208, 140, .502);}
.ScreenController-borde .border{border: 1px solid var(--white);}
.PaymentForm-Header {padding: 12px 16px;}
.PaymentForm-Header .btn{background-color: transparent !important; padding: 0; margin: 0; width: 30px; }
.PaymentForm-Header .btn .bi-arrow-left{font-size: 18px; display: block; color: var(--white);} 
.merchant-brand-name{font: 700 24px var(--inter); color: var(--white);}
.PaymentForm-Body{background-color: var(--white); padding: 24px 16px 56px; border-radius: 12px 12px 0 0; border-color: var(--white);}
.PaymentForm-Body label{font: 600 13px var(--inter); color: var(--black); margin-bottom: 12px;}
.PaymentForm-Body .symbol-red{color: #a50303;}
.PaymentForm-Body .input-group{border: 1px solid var(--gray); border-radius: 6px; overflow: hidden; align-items: center;}
.PaymentForm-Body .input-group-text{background-color: transparent; border: none; padding: 8px 5px 8px 10px;}
.PaymentForm-Body .form-control{border: none; outline: none; padding: 8px 5px;}
.PaymentForm-Body .form-control:focus{border: none; outline: none; box-shadow: none;}
.PaymentForm-Body .Field-description{font: 400 12px var(--inter); color: var(--gray); margin: 4px 0; padding-bottom: 180px;} 
.PaymentForm-Footer{padding: 12px 16px; background-color: var(--white); box-shadow: 0 4px 14px 0 rgba(0, 0, 0, .24); border-radius: 0;}
.PaymentForm-Footer .form-control{margin-right: 5px;}
.PaymentForm-Footer .form-control{border: none; outline: none;}
.PaymentForm-Footer .form-control:focus{border: none; outline: none; box-shadow: none;}
.PaymentForm-Footer .btn{background-color: #000 !important; color: #fff; padding: 10px 80px;}



/* ---------- Responsive ---------- */
@media screen and (max-width:1220px){
  .btn {width: 144px; padding: 12px 16px;}
  .wrap-1 .navbar-nav .nav-item .nav-link {font: 600 16px / 1.5 var(--ff);}
  .wrap-1 .navbar .navbar-brand {font: 700 18px / 1.5 var(--ff) !important;}
  .wrap-3 .core-values li a { padding: 0; margin-left: 0px; font-size: 13px;}
  .wrap-6 .sub-heading {font-size: 28px;}
  .wrap-5 .card-body .btn {font-size: 18px;}
}

@media (max-width: 992px) {
  .marquee-content img {
    width: 300px;
    height: 250px;
  }
  .wrap-1 .navbar {background: var(--white);}
  .wrap-1 .navbar-nav .nav-item .nav-link {color: var(--blue);}
  .wrap-2 .core-values{display: flex; justify-content: space-between; align-items: center; margin-bottom: 36px !important;}
  .wrap-2 .core-values li a {margin-left: 0; padding-bottom: 8px; font-size: 14px;}
  .wrap-2 .core-values li {padding: 0px;}
  .wrap-2 .core-values li a.active {border-left:none; border-bottom: 2px solid var(--middleBlue);}
  .wrap-5 h3 {font-size: 48px; margin: 42px 0;}
  .wrap-5 .sub-heading { font-size: 36px;}

}
@media (max-width: 768px) {
  .marquee-content img {width: 220px; height: 180px;}
  .core-values li a {padding: 12px;}
  .wrap-3 .core-values li {padding: 12px 0;}
  .wrap-6 .bottom-footer a {margin-left: 25px;}
  .wrap-2 {padding: 92px 0 0 0;}
  .main-heading {font-size: 32px; margin-top: 18px;}
  .sub-heading {font-size: 28px;}
  .heading {font-size: 24px;}
  .wrap-4 .news-1 h3 {font-size: 18px;} 
  .hero-small .main-heading { padding-top: 52px;}

}
@media (max-width: 576px) {
  .marquee-content img { width: 150px; height: 120px;}

}

@media screen and (max-width:460px){
  .wrap-2 .core-values {overflow-x: auto;}
  .wrap-3 .core-values {overflow-x: auto;}
  .wrap-3 .core-values li { padding: 12px; text-align: center;}
  .wrap-4 .card-body h5 {font-size: 18px;}
  .wrap-5 .sub-heading {font-size: 24px;}
  .wrap-5 h3 {font-size: 28px;}
  .hero-small .main-heading {padding-top: 0px;}
  .main-heading {font-size: 20px;}
  .main-address {padding: 22px;}
  .address-name {font-size: 24px;}
  .wrap-15 .contact-details .contactInfo {overflow-wrap: break-word; font-size: 17px;}
  .wrap-16 .main-address .addinfo {overflow-wrap: break-word; font-size: 17px;}
  .sub-heading {font-size: 22px;}
  .heading {font-size: 20px;}
  .wrap-7,.wrap-8,.wrap-9,.wrap-10,.wrap-11,.wrap-12,.wrap-13,.wrap-14 {padding: 44px 0;}
  .dialysis-center {padding: 44px 0;}
  .para {margin-top: 18px;margin-bottom: 22px;}
}