@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;700;900&display=swap');

*{ margin: 0; padding: 0; box-sizing: border-box;}

:root{
    /*======== colors ========*/
    --black: #000;
    --white: #fff;
    --theme: #8e1f06;
    --theme2: #FFA31A;
    --theme3: #203960;
    --header: #0F0D1D;
    --text: #445375;
    --border: #D4DCFF;
    --border-2: #D4DCED;
    --bg: #F3F7FB;
    --box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.06);
    --body: #fff;

    /*======== font ========*/
    --text-font: 'Jost', sans-serif;
}
html {scroll-behavior: smooth;}

body {font-family: var(--text-font); font-size: 16px; font-weight: normal; line-height: 28px; color: var(--text); background-color: var(--white); padding: 0; margin: 0; overflow-x: hidden;}
ul {padding: 0; margin: 0; list-style: none;}
li { margin: 0; padding: 0; list-style: none;}
a {text-decoration: none; outline: none !important; cursor: pointer; color: var(--header); transition: all 0.4s ease-in-out;}
p {margin: 0px; transition: all 0.4s ease-in-out;}
span {margin: 0px; transition: all 0.4s ease-in-out;}
button {border: none; background-color: transparent; padding: 0;}
input:focus {color: var(--white); outline: none;}
input {color: var(--white);}
h1,
h2,
h3,
h4,
h5,
h6 {font-family: var(--text-font); margin: 0px; padding: 0; color: var(--header); text-transform: capitalize; transition: all 0.4s ease-in-out;}
h1 {font-size: 66px; font-weight: 700; line-height: 123%;}
h2 {font-size: 45px; line-height: 125%; font-weight: 700;}
h3 {font-size: 24px; font-weight: 700; line-height: 140%;}
h4 {font-size: 20px; font-weight: 700; line-height: 130%;}
h5 {font-size: 18px; font-weight: 700;}
h6 {font-size: 16px; font-weight: 600; line-height: 145%;}

img {max-width: 100%; height: auto;}
.mb-15 {margin-bottom: 15px;}
.title_txt {margin-bottom: 15px; font-size: 40px;}
.para_txt {margin-bottom: 10px;}
.mt-50 {margin-top: 50px;}


.top-donor-item {
    background-color: #203960;
    padding: 20px;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    z-index: 1;
    height: 100%;
    margin-left: 12px;
}
*, ::after, ::before {
    box-sizing: border-box;
}



.section-title {
    font-size: 40px;
    font-weight: 700;
    text-transform: capitalize;
}
.top-donor-item__position {
    background-color:#8E1F06;
    width: 50px;
    height: 50px;
    left: 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    border-radius: 50%;
    color: #fff;
    margin-left: -45px;
    font-size: 18px;
    border: 1px solid transparent;
    transition: .3s linear;
}

.top-donor-item__name {
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.854);
}
.text--base {
    color: #8E1F06 !important;
    
}

@media (max-width: 1199px) {
    h2 {
      font-size: 42px;
    }
  }
  @media (max-width: 1199px) {
    h2 {
      font-size: 42px;
    }
  }
  @media (max-width: 767px) {
    h2 {
      font-size: 36px;
    }
  }
  @media (max-width: 575px) {
    h2 {
      font-size: 28px;
    }
  }
  @media (max-width: 575px) {
    h3 {
      font-size: 20px;
    }
  }



/* Header Section css Start */
.header__top {padding: 10px 0; border-bottom: 1px solid #b9aaaa30; background-color: transparent; position: absolute; left: 0; right: 0; width: 100%; z-index: 999;}
.header__top .left {display: flex; justify-content: start; align-items: center; gap: 30px;}
.header__top .left a {color: var(--white);}
.header__top .left a i {margin-right: 5px; font-size: 14px;}
.header__top .left .language {display: flex; flex-wrap: wrap; align-items: center;}
.header__top .left .language i { color: var(--white); font-size: 14px; margin-right: 5px;}
select {padding: 10px 20px; width: 100%; border: 1px solid #e5e5e5; cursor: pointer; color: #6f6f6f; background-color: transparent; height: 50px; border-radius: 4px; -webkit-border-radius: 4px; outline: none;}
.header__top .left .language .langSel {width: auto; background-color: transparent; padding-left: 0; padding-right: 10px; min-height: 40px; line-height: 47px; border: none; color: var(--white);}
.header__top .left .language .langSel option { background-color: #001d4a;}
.header__top .right ul {display: flex; justify-content: end; align-items: center; gap: 30px;}
.header__top .right ul li a {color: var(--white);}
.header__top .right ul li a i {font-size: 14px; margin-right: 5px;}
.header__bottom {transition: all 0.3s; position: absolute; left: 0; right: 0; width: 100%; z-index: 99; top: 65px; background-color: transparent;}
.header__bottom.active {background: var(--theme3);}
.header__bottom.menu-fixed {position: fixed; top: 0; left: 0; width: 100%; z-index: 999; box-shadow: 0px -1px 15px 3px #ffffff21; background-color: var(--theme3);}
.site-logo {max-width: 200px;}
.navbar-toggler {color: var(--white); font-size: 30px; padding: 0; border: none;}
.navbar-toggler:focus {box-shadow: none;}
.main-menu li {position: relative;}
.main-menu li+li {margin-left: 20px;}
.main-menu li a {padding: 35px 15px 35px 0; font-size: 16px; position: relative; color: #e7e7f4;}
.main-menu li a.active {color: var(--theme2);}
.nav-right {margin-left: 30px;}
/* Header Section css End */

/* Hero Section css Start */
.hero {position: relative;}
.hero__slider .slick-arrow {position: absolute; top: 50%; z-index: 99; width: 80px; height: 40px; color: var(--white); font-size: 42px; margin-top: -20px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; cursor: pointer;}
.hero__slider .slick-arrow.prev {left: 50px;}
.hero__slider .slick-arrow.next {right: 50px;}
.hero__slider .slick-arrow::before {position: absolute; content: ''; top: 50%; left: 50%; width: 40px; height: 40px; background-color: var(--theme); opacity: 0.25; border-radius: 50%; z-index: -1; transform: translate(-50%, -50%); -webkit-transition: all 0.3s; transition: all 0.3s;}
.hero__slider .slick-arrow.prev::before {left: 35%;}
.hero__slider .slick-arrow.next::before {left: 65%;}
.bg_img {background-size: cover; background-position: center;}
.hero .single__slide {padding-top: 335px; padding-bottom: 250px;}
.hero .single__slide::before {position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; z-index: -1; opacity: 0.65;}
.hero__content {position: relative; z-index: 9;} 
.hero__title {font-size: 72px; font-weight: 700; color: var(--white); line-height: 1;}
.hero__content p {color: var(--white); margin-top: 18px; font-size: 18px;}
.btn-group {display: flex; justify-content: center; margin-top: 30px; gap: 10px; flex-wrap: wrap;}
.cmn-btn {background: var(--theme); padding: 15px 35px; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.15); transition: all 0.3s ease-in-out; color: var(--white); border-radius: 8px;}
.cmn-btn:hover {background: var(--theme2); color: var(--header);}
/* Hero Section css End */

/* banner-slider css Stsrt */
.banner-slider {margin-top: -125px;}
.category-card {position: relative; margin: 0 15px;}
.hover--effect-1 {transition: all 0.3s;}
.overlay--one::before,.overlay--two::before {position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.85; }
/*.overlay--one::before {background-color: var(--theme2);}*/
/*.overlay--two::before {background-color: var(--theme);}*/
.has-link .item-link {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999;}
.category-card__content {padding: 30px 30px 30px 40px; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.category-card__content .title {font-size: 28px; color: var(--header); text-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);}
/* banner-slider css End */

/* About section css Start */
.about-section {padding: 120px 0;}
.about-thumb {display: flex; width: 100%; height: 100%; position: relative; float: right;}
.thumb-one {display: flex;}
.about-section .section-content h2 {font-size: 40px; margin-bottom: 15px;}
/* About section css End */

/* campaign section css Start */
.campaign-section {z-index: 1; position: relative; padding: 120px 0;}
.base--bg {background-color: var(--theme) !important; color: #fff !important;}
.section-img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.35; z-index: -1;}
.section-img img {width: 100%; height: 100%; object-fit: cover; object-position: center;}
.bottom-shape {position: absolute; bottom: -3px; left: 0;}
.bottom-shape img {width: 100%;}
.event-card {border-radius: 5px; overflow: hidden; box-shadow: 0 10px 25px 0 rgba(35, 72, 199, 0.1); height: 100%;}
.hover--effect-1 {transition: all 0.3s;}
.hover--effect-1:hover {transform: translateY(-1px) scale(1.05);}
.has-link {position: relative;}
.feature {width: 150px; line-height: 35px; background: var(--theme); position: absolute; transform: rotate(321deg); top: 15px; left: -28px;
text-align: center; color: aliceblue; z-index: 9;}
.has-link .item-link {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999;}
.event-card__thumb {position: relative; max-height: 300px; overflow: hidden;}
.event-card__thumb img {width: 100% !important; height: 100%; object-fit: cover;}
.event-card__content {background-color: #ffffff;padding: 15px 30px;}
.event-card__content h4 {margin-bottom: 20px;}
.event-card__content p {margin-top: 15px;}
.day, .minute, .hour, .sec {width: 50px; height: 50px; border: 1px dashed var(--theme); border-radius: 50%; margin-right: 5px; text-align: center; font-weight: bolder; color: var(--theme); font-size: 14px;}
.days-left>span {display: inline-flex; align-items: center;justify-content: center;}
.event-bar-item {margin-top: 50px;}
.progressbar {position: relative; display: block; width: 100%; height: 15px; background-color: #eeeeee; border-radius: 999px;}
.progressbar .bar {position: absolute; width: 0px; height: 100%; top: 0; left: 0; background: var(--theme); overflow: hidden; border-radius: 999px;}
.progressbar .label {position: absolute; top: -40px; padding: 2px 8px; height: 30px; display: block; background-color: var(--theme); line-height: 28px; text-align: center; color: #ffffff; font-size: 14px; transform: translateX(-45%); border-radius: 3px;}
.progressbar .label::before {position: absolute; content: ''; bottom: -10px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; border-top: 6px solid var(--theme); border-bottom: 5px solid transparent; border-right: 5px solid transparent; border-left: 5px solid transparent;}
.amount-status {color: var(--header); display: flex; justify-content: space-between; align-items: center; margin-top: 15px; flex-wrap: wrap;}
.amount-status span {font-weight: 500; font-size: 14px;}
.top-shape { position: absolute; top: -3px; left: 0;}
/* campaign section css End */

/* feature section css Start */
.feature-section {position: relative; padding: 120px 0;}
.feature-card {padding: 30px 30px; background-color: var(--white); border-radius: 5px; box-shadow: 0 10px 25px 0 rgba(35, 72, 199, 0.1);
transition: all 0.3s; display: flex; flex-wrap: wrap;}
.feature-card:hover {transform: translateY(-5px); background-color: var(--theme);}
.feature-card__icon {width: 70px; height: 70px; color: #8e1f06; font-size: 30px; line-height: 1; transition: all 0.3s; border: 2px dotted #8e1f06; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-bottom: 15px;}
.feature-card:hover .feature-card__icon {color: var(--white); border: 2px dotted var(--white);}
.feature-card:hover .title {color: var(--white);}
.feature-card:hover .feature-card__content {color: var(--white);}
.feature-card__content .title {margin-bottom: 10px; transition: all 0.3s; line-height: 1;}
/* feature section css End */

/* place section css strat */
.min-height--block { min-height: 550px;}
.video-thumb-two {position: relative;}
.video-thumb-two::before {position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-color: #001d4a; opacity: 0.85;}
.video-button {position: absolute; width: 105px; height: 105px; color: #ffffff; border-radius: 50%; background-color: var(--theme); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; animation: pulse 2000ms linear infinite;}
.video-button::before, .video-button::after {position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; border-radius: 74px; background-color: var(--theme); opacity: 0.15; z-index: -10;}
.video-thumb-two .video-button {top: 50%; left: 50%; margin-left: -50px; margin-top: -50px;}
.video-button::before { z-index: -10; animation: inner-ripple 2000ms linear infinite;}
.video-button::after {z-index: -10; animation: outer-ripple 2000ms linear infinite;}
.video-button i {font-size: 40px;}
.bg--base {background-color: var(--theme); z-index: 1;}
.place-section .place-bg {padding: 120px 0;}
.overview-area {padding-left: 100px; padding-right: 100px;}
.overview-area .section-title {font-size: 40px;}
.counter-card {display: flex; justify-content: center; align-items: center; padding: 45px 12px; text-align: center; flex-wrap: wrap;}
.texture-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}
.texture-bg img { width: 100%; height: 100%;}
.counter-card__content span {font-size: 30px; font-weight: 700; line-height: 1;}
.counter-card__content .count-num {margin-top: 15px;}
.color--1 {color: #13c366 !important;}
/* place section css End */

.volunteer-section {padding: 120px 0;}
.overlay-one {z-index: 9;}
.overlay-one::before {position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-color: #02014a; opacity: 0.70; z-index: -1;}
.volunteer-section .btn-v {margin: 50px 0;}

/* story section css start */
.story-section {padding: 120px 0;}
.story-thumb {height: 100%}
.story-thumb div {height: 100%;}
.story-thumb img {width: 100%; height: 100%; object-fit: cover; object-position: center;}
.story-content { position: relative; padding: 100px 50px;}
.slick-dots {margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center;}
.slick-dots li { margin: 0 3px;}
.slick-dots li button {
  font-size: 0;
  width: 12px;
  height: 12px;
  background-color: #ffffff;
  border-radius: 50%;
  -webkit-border-radius: 50%;}
/* story section css end */
 
/* footer section css Start */
.footer-section {z-index: 9;}
.footer-section::before {position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-color: #02014a; opacity: 0.70; z-index: -1;}
.footer-top {padding-top: 200px; padding-bottom: 40px;}
.footer-overview-item { border-right: 2px solid rgba(255, 255, 255, 0.15);}
.footer-overview-item .amount-number { font-size: 28px;}
.footer-overview-item p { font-size: 14px; text-transform: uppercase;}
.footer-widget__title { color: #ffffff; margin-bottom: 20px;}
.footer-section p {color: #e6e6e6;}
.footer-widget .social-links {display: flex; flex-wrap: wrap; }
.social-links li {margin: 5px 5px; width: 45px; height: 45px; background-color: var(--theme); text-align: center; line-height: 45px; border-radius: 3px;}
.footer-widget .social-links li a {width: 40px; height: 40px; line-height: 40px; text-align: center; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; transition: all 0.3s; display: inline-flex; justify-content: center; align-items: center;}
.short-link-list li a {padding-left: 25px; position: relative; font-size: 14px; color: var(--white);}
.form-control { padding: 10px; min-height: 50px;}
.subscribe-form {display: flex; flex-wrap: wrap; background-color: #ffffff;}
.subscribe-form input { width: calc(100% - 55px); background-color: #ffffff; border: none; height: auto; border-radius: 0;} 
.subscribe-form button {background-color: var(--theme); color: #ffffff; width: 55px; font-size: 32px; border: 3px solid #ffffff;}
.footer-bottom { padding-bottom: 20px;}
.footer-bottom .link-list {display: flex; flex-wrap: wrap;}
.footer-bottom .link-list li { margin: 5px 10px;}
.footer-section a {color: var(--white);}
/* footer section css End */


@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes inner-ripple {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 0.5;
}
30% {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 0.5;
}
100% {
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  opacity: 0;
}
}

@keyframes outer-ripple {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 0.5;
}
80% {
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0;
}
100% {
    -webkit-transform: scale(2.5);
    -ms-transform: scale(2.5);
    transform: scale(2.5);
    opacity: 0;
}
}