/* --About Us Css-- */

.info-content .card-text {
    font-size: 24px !important;
}

.tab-content .workSlide {
    min-height: 377px;
}

.sectionBox {
    position: relative !important;
}

.sectionBox p {
    width: 94%;
}
.about-tabs .tab-pane{ height: auto; }

.objective ul li{
  color: #717171;
  font-size: 16px;
  font-weight: 400;
  list-style-type: disc;
  margin-left: 15px;
}

.counterBox .item p {
    color: #717171;
    font-weight: 500 !important;
}

.about-us-section .bg-image1 {
    width: 314px;
    height: 254px;
    position: absolute;
    top: -4px;
    right: 10px;
}

.about-us-counter #counter {
    margin-top: 25px;
}

.bannerImg .bannerText {
    position: absolute;
    bottom: 14%;
    left: 6%;
}

.about-us-counter .item p {
    width: 80%;
}

.step-forward-section {
    background-color: #FBF9F9;
}

.step-forward-slider {
    width: 100%;
    position: relative;
}

.step-forward-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
}

.step-forward-pagination {
    position: absolute;
    bottom: 32px !important;
    right: 36px !important;
    left: auto !important;
    width: auto !important;
    text-align: right;
}

.step-forward-pagination .swiper-pagination-bullet {
    width: 18px;
    height: 4px;
    border-radius: 10px;
    background: #FFFFFF;
    opacity: 1;
    transition: width 0.25s ease, background-color 0.25s ease;
}

.step-forward-pagination .swiper-pagination-bullet-active {
    background: #025DB1;
    width: 38px;
}

.step-forward-slider .swiper-slide {
    position: relative;
    overflow: hidden;
}

.step-forward-slider .swiper-slide::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    border-radius: 26px;
    background: linear-gradient(to top,
            rgb(0 0 0 / 89%) 0%,
            rgb(0 0 0 / 2%) 100%,
            rgb(0 0 0 / 0%) 100%);
    z-index: 1;
    pointer-events: none;
}

.step-forward-slider .swiper-slide .slideText {
    position: absolute;
    bottom: 6%;
    left: 5%;
    color: #FFFFFF;
    letter-spacing: -0.03em;
    font-size: 17px;
    z-index: 2;
}

.bannerImg .aboutBanner {
    height: 588px !important;
    overflow: hidden;
    object-fit: cover;
}

/* --Water For India Css-- */

.water-section-img {
    height: 247px;
}

.water-section .bg-image1 {
    width: 289px;
    height: 242px;
    position: absolute;
    top: -3px;
    right: 10px;
}

.videoList {
    margin-top: 20px;
}

.videoItem {
    position: relative;
    padding: 22px 40px 22px 0;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

.videoItem h4 {
    font-size: 20px;
    font-weight: 500;
    color: #303030;
    margin-bottom: 0px !important;
}

.videoItem p {
    font-size: 12px;
    color: #717171;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    letter-spacing: 0.03em;

    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease;
    opacity: 0;
}

.videoItem.active p {
    padding-top: 20px;
    max-height: 140px;
    opacity: 1;
}


.videoItem.active p {
    display: block;
}

.videoItem.active h4 {
    font-weight: 700;
    color: #025DB1;
}

.playBtn {
    position: absolute;
    right: 0;
    top: 45%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border 0.3s ease, background 0.3s ease;
    border: 1px solid #aaa;
}

.playBtn .playIcon {
    width: 13px;
    height: 13px;
    background: url('../images/PlayBtn.svg') no-repeat center / contain;
    transition: background 0.3s ease;
}

.videoItem.active .playBtn .playIcon {
    background: url('../images/PlayBtn_Red.svg') no-repeat center / contain;
}

.videoItem.active .playBtn.active {
    top: 18%;
}

.gallery {
    text-align: center;
    max-width: 800px;
    margin: auto;
}

.main-image {
    position: relative;
}

.main-image img {
    width: 100%;
    border-radius: 8px;
}

.caption {
    position: absolute;
    bottom: 20%;
    left: 2.3%;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 4px;
    width: 65%;
}

.thumbnails {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.thumb {
    width: 80px;
    height: 50px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: transform 0.3s, border 0.3s;
}

.thumb:hover {
    transform: scale(1.05);
}

.thumb.active {
    border: 2px solid #007bff;
}

.mainSwiper {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
    margin-top: 65px;
}

.mainSwiper img {
    width: 100%;
    border-radius: 8px;
}

.mainSwiper .caption {
    margin-top: 10px;
    font-size: 14px;
    color: #444;
    line-height: 1.4;
}

.thumbsSwiper {
    height: 90px;
    box-sizing: border-box;
    padding: 10px 0;
}

.thumbsSwiper .swiper-slide {
    width: 126px !important;
    height: 65px;
    opacity: 0.5;
    cursor: pointer;
}

.thumbsSwiper .swiper-slide-thumb-active {
    opacity: 1;
    border: 2px solid #FFFFFF;
    border-radius: 6px;
}

.thumbsSwiper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.mainSwiper .imageSwiper {
    position: relative;
}

.thumbsSwiper {
    position: absolute;
    bottom: 2%;
    left: 3%
}

.image-slider::after {
    content: "";
    position: absolute;
    top: -53px;
    left: 0;
    width: 100%;
    height: 117px;
    background: url('../images/brushImage.png') no-repeat center bottom;
    background-size: cover;
    z-index: 1;
    pointer-events: none;
}

.image-thumbnail-section {
    margin-bottom: 65px;
}

/* Our Work Page CSS */

.educationImage img {
    width: 100%;
    height: 415px;
    object-fit: cover;
    border-radius: 30px;
    overflow: hidden;
}

.educationInfo {
    position: relative;
}

.educationText {
    color: #303030;
    font-size: 30px;
    font-weight: 400;
    line-height: 35px;
    text-align: justify;
    margin-left: 80px;
}

.quoteImg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    background-image: url("../images/icons/quoteImg.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

.imageDiv {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    /* makes sure gradient follows rounded corners */
}

.imageDiv img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.imageDiv::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 60%);
    mix-blend-mode: multiply;
}

.textWrap {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    /* space from left/right edges */
}

.imgText {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 40px;
}

.workSlide.activeSlide {
    border-color: #007bff;
}


.plusIcon {
    background: transparent;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.22s ease, transform 0.22s ease;
}

.plusIcon img {
    display: block;
    width: 40px;
    height: 40px;
    transition: filter 0.22s ease, transform 0.22s ease;
}

.workSlide.activeSlide .plusIcon {
    background: #ffffff;
}

.workSlide.activeSlide .plusIcon img {
    filter: brightness(0) saturate(100%);
}

/* ---News-And-Media--- */

.news-media-section .row {
    display: flex;
    align-items: stretch;
}

.news-media-section .workSlide {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.news-media-section .workSlide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #025DB1;
    opacity: 0;
    pointer-events: none;
    border-radius: 25px;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.news-media-section .workSlide .workInfo {
    flex: 1;
}

.news-media-section .workSlide .ctaBtn {
    align-self: flex-start;
    margin-top: auto;
}

.news-media-section .workInfo {
    margin-bottom: 28px;
    margin-left: 0px;
}

.news-media-section .workInfo .info-content {
    padding-left: 7px;
}

.news-media-section .workSlide .ctaBtn {
    margin-left: 7px;
}

.news-media-section .card-gap {
    row-gap: 33px;
}

.news-media-section .workSlide:hover::before {
    opacity: 1;
    cursor: pointer;
}

.news-media-section .workSlide:hover .slideText {
    color: #025DB1;
    cursor: pointer;
}

/* .news-media-section .workSlide .slideText:hover{
    color:#025DB1
} */

/* --covid-19-- */

.vaccineImage img {
    width: 100%;
}

.vaccine-right-content {
    padding-left: 48px;
}

.vaccine-right-content p {
    font-size: 14px;
}

.measures-box{
    border:1px solid #D8D8D8;
    border-radius: 50px;
    padding: 5px 6px;
    display: flex;
    align-items: center;
}

.measures-box img {
    width:48px;
    height: 48px;
    object-fit: cover;
}

.measures-box p{
    color: #303030;
    font-weight: 600;
    margin-left: 18px;
}

.safety-measures-section .card-gap{
    row-gap: 30px;
}

@media (min-width:820px) and (max-width:1100px) {
    .about-us-counter .item {
        min-height: 100px;
    }

    #counter {
        gap: 71px;
    }

    .container-spacing {
        padding: 0px 36px;
    }

    .news-media-section .workSlide {
        min-height: 368px;
    }
}

@media (max-width:768px) {

    .mainSwiper .caption {
        font-size: 13px;
        width: 90%;
        position: relative;
        bottom: 20%;
        left: 2.3%;
        color: #000000 !important;
        padding: 0px;
        margin-top: 20px;
    }

    .image-slider::after {
        content: "";
        position: absolute;
        top: -39px;
    }

    .mainSwiper {
        margin-top: 10px;
    }

    .mainSwiper .main-image {
        height: 250px;
        margin-top: 30px;
    }

    .thumbsSwiper .swiper-slide {
        width: 80px !important;
        height: 40px;
    }

    .thumbsSwiper {
        position: absolute;
        bottom: 28%;
        left: 3%
    }

    .image-thumbnail-section {
        margin-bottom: 37px;
    }

    .bannerImg::after {
        height: 103px;
    }

    .bannerImg .aboutBanner {
        height: 203px !important;
    }

    .bannerImg .bannerText {
        position: absolute;
        bottom: 25%;
        left: 25px;
    }

    .news-media-section .card-gap {
        row-gap: 30px;
    }

    .news-media-section .workSlide {
        min-height: 356px;
    }

    .vaccine-right-content{
        padding-left: 0px;
    }

    .safety-measures-section .card-gap{
        row-gap: 20px;
    }

}

/* Impact Stories Css */
.storyImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
    border-radius: 30px;
}

.storyText h3 {
    font-size: 27px;
    color: #303030;
    font-weight: 700;
    line-height: 30px;
}

.storyText span {
    font-weight: 600;
}

.borderB {
    border-bottom: 1px solid #D8D8D8;
}

a.d-block:hover h3 {
    color: #007bff;
    /* or any color you like */
}

/* contact us */
.address{border-radius: 20px; background: #F3F3F3; padding: 40px 20px;}
.address .contactrow{display: flex; gap: 10px; margin-bottom: 40px; align-items: center;}
.address .contactrow h5{color: #292929;font-family: "TT Norms Pro"; margin-bottom: 5px;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;}
.address .contactrow p{font-family: "TT Norms Pro";
font-size: 15px;}
.address a{color: #292929;
font-family: Poppins;
font-size: 15px;
font-weight: 400;}
.address .contacticon{border-radius: 100%; padding: 10px;
border: 1px solid #C4C4C4;
background: #025DB1;}

.form-card {
border-radius: 20px;
background: #FFF;
box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.10);
}

.form-control::placeholder {
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.form-control {
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  box-shadow: none;
}

.form-control:focus {
  border-color: #0d6efd;
  box-shadow: none;
}

textarea.form-control {
  resize: none;
}

.btn-submit {
border-radius: 5px;
background: #025DB1;
  padding: 8px 20px;
  border-radius: 2px;
  color: white;
  font-size: 12px;
  border: none;
}


/* about/ */

.aboutImg img{width: 100%; border-radius: 28px;}
.about-tabs{border-radius: 20px; border: 1px solid #D9D9D9; background: #FFF; height: 170px;}
/* .about-tabs .nav-tabs{padding-bottom: 5px !important;} */
.about-tabs .nav-tabs li{margin-right: 10px; font-size: 12px;}
.about-tabs .nav-tabs .nav-link.active{color: #025DB1; border-bottom: 3px solid #025DB1; padding-bottom:7px;}
.about-tabs .nav-tabs .nav-link{font-size: 16px;}
@media (max-width:786px) {
    .about-tabs {height: 250px;}
  .charity-tabs .nav-tabs li{margin-right: 10px !important; font-size: 10px !important; margin-top: 10px;}
    
}
.history{background-color: #F3F3F3;}
.history .historyquote{background: white; position: relative; padding-left:30px; padding-top: 10px ; padding-bottom: 10px; margin: 10px 0;}
.history .historyquote::before{content: ""; position: absolute; width: 2px; height: 90%;
  background-color: #025DB1; left: 0;top: 0;}
  .we-are-from .since-title{color: #303030;font-family: Poppins;font-size: 14px; font-style: italic; font-weight: 500; position: relative;}
  .we-are-from .since-title::after{position: absolute; content: ""; width: 60px; height: 3px; background: #025DB1; right: 0; top: 50%; transform: translateX(-50%); }
  .we-are-from .since-year{color: #025DB1;text-align: justify;font-family: "TT Norms Pro";font-size: 100px;font-style: normal;font-weight: 700;}
  .charity-tabs .nav-tabs li{margin-right: 30px; font-size: 12px;}
.charity-tabs .nav-tabs .nav-link.active{color: #025DB1; border-bottom: 3px solid #025DB1; padding-bottom:7px;}
.charityDetail{display: flex; justify-content: space-between; align-items: center;}
.charityDetail{padding-top: 10px;}
.charityDetail h3{color: #303030;font-family: Poppins;
font-size: 16px;font-weight: 500; position: relative; padding-left: 20px;}
.charityDetail h3::before{position: absolute; content: ""; height: 100%; width: 3px ; background: #025DB1; left: 0;}
.charityDetail img{width:40px; height: 40px;}
.charitypeople .charityimg{width: 100%; object-fit: cover; border-radius: 28px;}
/* Gallery Section */
.gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  transition: all 0.4s ease;
}

.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  aspect-ratio:3/2;
  }

.gallery-card:hover img {
  transform: scale(1.1);
}

.gallery-card .overlay {
  position: absolute;
  inset: 0;
  background: rgba(2, 93, 177, 0.65);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  font-weight: 500;
  font-size: 15px;
  text-align: center;
  transition: opacity 0.4s ease;
}

.gallery-card:hover .overlay {
  opacity: 1;
}
.is-compact .fancybox__footer .fancybox__caption{text-align: center;}
  .fancybox__container {
    z-index: 99999 !important;
  }
  .modal-content{position: relative;}
.modal-content .btn-close{right: 1rem ; top: 1rem ; position: absolute;} 
/*read more */
.more-text {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.more-text.open {
  max-height: 600px;
}

.read-toggle {
  color: #007bff;
  cursor: pointer;  
    font-weight: 550;
    font-size: 13px;
}

.read-toggle:hover {
  text-decoration: underline;
}
 @media (min-width: 768px){
.media-section .tab-header .nav-tabs {
  display: flex !important;
  white-space: nowrap;
  flex-wrap: nowrap;
  width: 1100px;
  overflow-x: auto;
  overflow-y: hidden;
  height: 60px;
  border-bottom: none;
}

/* Chrome / Edge / Safari */
.media-section .tab-header .nav-tabs::-webkit-scrollbar {
  height: 6px;
}

.media-section .tab-header .nav-tabs::-webkit-scrollbar-thumb {
  background: #999;
  border-radius: 4px;
}

.media-section .tab-header .nav-tabs::-webkit-scrollbar-track {
  background: #eee;
}

/* Firefox */
.media-section .tab-header .nav-tabs {
  scrollbar-width: auto;
}

    
   
    }
    .workInfo ul li{list-style-type: disc; margin-left: 20px;}
  .thankyouImg {height:50vh !important; object-fit:cover; position:relative; }  
  .thankyouImg .bannerText{ padding:30px 50px; }
  .thankyouImg a{text-decoration:underline;}
.thankyouImg .bannerText{max-width:760px;}