/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 50%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

/* ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
} */

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  background-color: #fff;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 30px;
  color: #2a2a2a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  /* width: 100%;
  height: 100%; */
  background: #faf9ea;
  font-family: 'Open Sans', sans-serif;
}

img:hover {
  
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
  opacity: 1;
  transform: scale(1.02);
  -ms-transform: scale(1.02); /* IE 9 */
  -webkit-transform: scale(1.02); /* Safari and Chrome */
}

::selection {
  background: #C4D7B2;
  color: #fff;
}

::-moz-selection {
  background: #C4D7B2;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.page-section {
  margin-top: 120px;
}

.section-heading {
  margin-bottom: 60px;
}

.section-heading h6 {
  font-size: 15px;
  font-weight: 700;
  color: #33ccc5;
  text-transform: uppercase;
  margin-bottom: 15px;

}

.section-heading h2 {
  font-size: 30px;
  text-transform: capitalize;
  color: #2a2a2a;
  font-weight: 800;
  position: relative;
  z-index: 2;
  line-height: 45px;
}

.section-heading h2 em {
  font-style: normal;
  color: #33ccc5;
}

.section-heading h2 span {
  color: #088ec3;
}

.main-blue-button a {
  display: inline-block;
  background-color: #ffffff; 
  border: 2px solid #d1e3f1; 
  font-size: 18px;
  font-weight: 600;
  color: #4f6d7a; 
  text-transform: capitalize;
  padding: 14px 30px;
  border-radius: 30px; 
  letter-spacing: 0.5px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 0 0 20px rgba(106, 175, 249, 0.5); 
  transition: all 0.3s ease-in-out;
}

.main-blue-button a:hover {
  background-color: #f0f9ff; 
  color: #0066cc; 
  border: 2px solid #a0c4ff; 
  box-shadow: 0 8px 20px rgba(106, 175, 249, 0.6), 0 0 30px rgba(0, 102, 204, 0.3); 
  transform: translateY(-4px); 
}

.main-blue-button a:active {
  transform: translateY(0); 
  box-shadow: 0 4px 10px rgba(106, 175, 249, 0.4);
}


.main-green-button a {
  display: inline-block;
  background-color: #419f45;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border-bottom: 2px solid #A0C49D!important;
  transition: all .3s;
  margin-top: 30px;
}

.main-green-button a:hover {
  background-color: #095b0d!important;
  color: #fff!important;
  border-bottom: 2px solid #33ccc5!important;
}


/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.background-header {
  background-color: #114a02!important;
  height: 80px!important;
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #29d923;
}

.background-header .main-nav .nav li:hover a {
  color: #000000;
}

.background-header .nav li a.active {
  position: relative;
  color: #000000;
}

.background-header .nav li a.active:after {
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #41dc29;
  content: '';
  left: 50%;
  bottom: 0px;
  transform: translateX(-10px);
}

.header-area {
  background-color: #043510;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 110px;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 110px !important;
  background: transparent;
}

.header-area .main-nav .logo {
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .logo h4 {
    font-size: 30px;
    font-weight: 800;
    text-transform: capitalize;
    color: #fff;
    line-height: 100px;
    float: left;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.header-area .main-nav .logo h4 img {
  max-width: 210px;
  margin-top: -10px;
  margin-left: -20px;

}


.background-header .main-nav .logo h4 {
  line-height: 80px;
}

.background-header .main-nav .nav {
  margin-top: 20px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  display: inline-block;
  padding-left: 20px;
  padding-right: 20px;
}



/* .header-area .main-nav .nav li:last-child a ,
.background-header .main-nav .nav li:last-child a {
  padding: 0px 20px;
  font-weight: 400;
}

.header-area .main-nav .nav li:last-child a:hover ,
.background-header .main-nav .nav li:last-child a:hover {
  color: #4771cb !important;
} */

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 15px;
  color: #a7e133;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}


.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #fff!important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #fff!important;
  opacity: 1;
}

.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 30px;
}

.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #2a2a2a;
  position: absolute;
  right: 18px;
  top: 12px;
}

.background-header .main-nav .nav li.submenu:after {
  color: #2a2a2a;
}

.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 50px;
  opacity: 0;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.header-area .main-nav .nav li.submenu ul li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.submenu ul li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #f8f8f8!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -ao-transition: all 0.3s ease 0s;
  trnsition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.submenu ul li a:hover {
  background: #fff;
  color: #121212!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.submenu ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.submenu:hover ul {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #fff;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #33ccc5;
}



@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

/* @media (max-width: 992px) {
  .header-area .main-nav .nav li:last-child  ,
  .background-header .main-nav .nav li:last-child {
    display: block;
  }
  .header-area .main-nav .nav li:nth-child(6),
  .background-header .main-nav .nav li:nth-child(6) {
    padding-right: 0px;
  }
} */

@media (max-width: 991px) {
  .background-header .main-nav .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .logo {
    color: #fffbfb;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #33ccc5!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color:  #016501;
    padding: 0px 15px;
    height: 110px !important;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .background-header .nav {
    margin-top: 80px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e7e7e7;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #33ccc5!important;
  }
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 992px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}


@media (max-width: 767px) {
.donate .row .col-lg-12 h2{
font-size: 5rem;
}
  
}



/* 

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 992px) {
  .header-area .main-nav .nav li:last-child  ,
  .background-header .main-nav .nav li:last-child {
    display: block;
  }
  .header-area .main-nav .nav li:nth-child(6),
  .background-header .main-nav .nav li:nth-child(6) {
    padding-right: 0px;
  }
}

@media (max-width: 767px) {
  .background-header .main-nav .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .logo {
    color: #fffbfb;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #33ccc5!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color:  #016501;
    padding: 0px 15px;
    height: 110px !important;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .background-header .nav {
    margin-top: 80px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e7e7e7;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #33ccc5!important;
  }
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}


@media (max-width: 767px) {
.donate .row .col-lg-12 h2{
font-size: 5rem;
}
  
} */


/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    z-index: 9999;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

.js-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@-webkit-keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@-webkit-keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

@keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

.preloader-inner {
    position: relative;
    width: 142px;
    height: 40px;
    background: #fff;
}

.preloader-inner .dot {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 12px;
    left: 15px;
    background: #33ccc5;
    border-radius: 50%;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation: dot 2.8s infinite;
    animation: dot 2.8s infinite;
}

.preloader-inner .dots {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    margin-top: 12px;
    margin-left: 31px;
    -webkit-animation: dots 2.8s infinite;
    animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    background: #33ccc5;
    border-radius: 50%;
}



/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 226px 0px 120px 0px;
  position: relative;
  overflow: hidden;
}

.main-banner:after {
  content: '';
  /* background-image: url(../images/banner-dec-left.png); */
  background-repeat: no-repeat;
  position: absolute;
  left: 10;
  top: 200px;
  width: 200px;
  height: 500px;
  z-index: -1;
}

.main-banner:before {
  content: '';
  /* background-image: url(../images/main_right_banner.png); */
  /* background-image: url(../images/banner-dec-right.png); */
  background-repeat: no-repeat;
  position: absolute;
  right: 10;
  top: 100px;
  width: 1159px;
  height: 797px;
  z-index: -1;
  
}

.main-banner .left-content {
  margin-right: 20px;
}

.main-banner .left-content h6 {
  text-transform: capitalize;
  font-size: 18px;
  font-weight: 400;
  color: #2a2a2a;
  margin-bottom: 20px;
  margin-top: 60px;
  
}

.main-banner .left-content h4 {
  z-index: 2;
  position: relative;
  font-weight: 700;
  font-size: 20px;
  color: #2a2a2a;
}

.main-banner .left-content h2 {
  
  margin-top: 10px;
  padding-top: 10px;
  margin-bottom: 25px;
  font-size: 105px;
  font-weight: 800;
  color: #2a2a2a;
  line-height: 100px;
  
  background: -webkit-linear-gradient(to right, #ACD1AF 0%, #34ef44 100%);
  background: -moz-linear-gradient(to right, #ACD1AF 0%, #35f749 100%);
  background: linear-gradient(to right, #ACD1AF 0%, #50b95e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.main-banner .right-image {
  text-align: right;
  position: relative;
  z-index: 2;
  margin-top: 20px;
}

.main-banner .right-image img {
  min-height: 250px;
}

.main-banner .right-image img:hover {
  
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
  opacity: 1;
  transform: scale(1.02);
  -ms-transform: scale(1.02); /* IE 9 */
  -webkit-transform: scale(1.02); /* Safari and Chrome */
}




.mainvdo video{
  height: auto;
  max-width: 100%;
  object-fit: cover;
  overflow: hidden;
}
.mobile video{
  height: auto;
  max-width: 100%;
  object-fit: cover;
  overflow: hidden;
}
.second video{
  height: auto;
  max-width: 100%;
  object-fit: cover;
  overflow: hidden;
}


.mobile {
  display: none; /* Hide mobile content by default */
}

.second{
  display: none;
}

/* Styles for mobile view */
@media (max-width: 767px) {
  .mainvdo {
    display: none; /* Hide main video on mobile */
  }

  .mobile {
    display: block; /* Show mobile content */
  }

  .second{
    display: block;
  }
}

  @media (max-width: 767px) {
    .mobile{
      margin-top: 100px;
    }
  }

@media (max-width: 767px) {
  .second{
    margin-top: -10px;

  }
 
}





/* 
---------------------------------------------
Horizontal Scroll Container
--------------------------------------------- 
*/

.scroll-horizontal {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden; /* Prevents content overflow */
}

.scroll-container {
  display: flex;
  overflow-x: auto; /* Enables horizontal scrolling */
  scroll-behavior: smooth; /* Smooth scrolling for JavaScript controls */
  width: 100%;
}

.scroll-box {
  flex: 0 0 100vw; /* Each box takes the full viewport width */
  height: 450px;
}

.scroll-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.scroll-box img {
  display: block; /* Removes inline spacing around the image */
  max-width: 100%; /* Ensures the image doesn't exceed the container's width */
  max-height: 100%; /* Ensures the image doesn't exceed the container's height */
  margin: auto; /* Centers the image inside the container */
  object-fit: cover; /* Ensures the image covers the container without distortion */
  width: 100%; /* Ensures the image spans the container's width */
  height: 100%; /* Ensures the image spans the container's height */
  border-radius: 8px; /* Optional: Adds rounded corners */
}


.scroll-control.left {
  left: 10px;
}

.scroll-control.right {
  right: 10px;
}

.scroll-control:hover {
  background: rgba(0, 0, 0, 0.8);
}

.scroll-container {
  overflow-x: auto; 
  -ms-overflow-style: none; 
  scrollbar-width: none; 
}
.scroll-container::-webkit-scrollbar {
  display: none; /* Hides scrollbar */
}


/* 
---------------------------------------------
Features Style
--------------------------------------------- 
*/

#features {
  padding-top: 130px;
}

.features .features-content {
  z-index: 2;
  position: relative;
  background-color: #fff;
  border-radius: 50px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
}

.features-item {
  text-align: center;
  padding: 30px;
  border-radius: 50px;
  background: rgb(255,255,255);
  background: linear-gradient(105deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%);
  transition: background-color .5s;
  -webkit-transition: background-color .5s;
  -o-transition: background-color .5s;
  -moz-transition: background-color .5s;
}

.features-item:hover {
  background: rgb(51,204,197);
  background: linear-gradient(105deg, rgba(51,204,197,1) 0%, rgba(8,141,195,1) 100%);
}

.features-item:hover h4 {
  color: #fff;
}

.features-item:hover p {
  color: #fff;
}

.features-item:hover .line-dec {
  background-color: rgba(255,255,255,0.3);
}

.first-feature:hover .icon {
  background-image: url(../images/features-icon-white-01.png);
}

.second-feature:hover .icon {
  background-image: url(../images/features-icon-white-02.png);
}

.features-item .number h6 {
  background-repeat: no-repeat;
  width: 110px;
  height: 69px;
  color: #fff;
  margin-left: auto;
  margin-right: auto;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  line-height: 69px;
  margin-top: -65px;
  margin-bottom: 30px;
}

.features-item .first-number h6 {
  background-image: url(../images/features-number-01.png);
}

.features-item .second-number h6 {
  background-image: url(../images/features-number-02.png);
}

.features-item .third-number h6 {
  background-image: url(../images/features-number-03.png);
}

.features-item .fourth-number h6 {
  background-image: url(../images/features-number-04.png);
}

.first-feature .icon {
  background-image: url(../images/features-icon-black-01.png);
}

.second-feature .icon {
  background-image: url(../images/features-icon-black-02.png);
}

.features-item .icon {
  width: 63px;
  height: 63px;
  margin: 0 auto;
  transition: all 0.5s;
}

.features-item h4 {
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 30px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  color: #2a2a2a;
  position: relative;
  transition: all 0.5s;
}

.features-item .line-dec {
  width: 100px;
  height: 2px;
  background-color: rgba(51,204,197,0.3);
  margin: 30px auto;
  transition: all 0.5s;
}

.features-item p {
  position: relative;
  margin-top: 0px;
  transition: all 0.5s;
}

.skills-content {
  position: relative;
  z-index: 1;
  margin-top: -50px;
  background-color: #f5f5f5;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
  padding: 110px 0px 50px 0px;
}

.skill-item {
  text-align: center;
}

.progress {
  width: 150px;
  height: 150px;
  line-height: 150px;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative;
}
.progress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid #ddd;
  position: absolute;
  top: 0;
  left: 0;
}
.progress > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.progress .progress-left {
  left: 0;
}
.progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 5px;
  border-style: solid;
  position: absolute;
  top: 0;
  border-color: #fd6a54;
}
.progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.progress .progress-right {
  right: 0;
}
.progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}
.progress .progress-value {
  text-align: center;
  color: #2a2a2a;
  display: flex;
  width: 100%;
  border-radius: 50%;
  font-size: 32px;
  text-align: center;
  line-height: 20px;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-weight: 700;
}
.progress .progress-value div {
  margin-top: 10px;
}
.progress .progress-value span {
  font-size: 12px;
  text-transform: uppercase;
}

/* This for loop creates the  necessary css animation names 
Due to the split circle of progress-left and progress right, we must use the animations on each side. 
*/
.progress[data-percentage="10"] .progress-right .progress-bar {
  animation: loading-1 1.5s linear forwards;
}
.progress[data-percentage="10"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="20"] .progress-right .progress-bar {
  animation: loading-2 1.5s linear forwards;
}
.progress[data-percentage="20"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="30"] .progress-right .progress-bar {
  animation: loading-3 1.5s linear forwards;
}
.progress[data-percentage="30"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="40"] .progress-right .progress-bar {
  animation: loading-4 1.5s linear forwards;
}
.progress[data-percentage="40"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="50"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="50"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="60"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="60"] .progress-left .progress-bar {
  animation: loading-1 1.5s linear forwards 1.5s;
}

.progress[data-percentage="70"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="70"] .progress-left .progress-bar {
  animation: loading-2 1.5s linear forwards 1.5s;
}

.progress[data-percentage="80"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="80"] .progress-left .progress-bar {
  animation: loading-3 1.5s linear forwards 1.5s;
}

.progress[data-percentage="90"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="90"] .progress-left .progress-bar {
  animation: loading-4 1.5s linear forwards 1.5s;
}

.progress[data-percentage="100"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="100"] .progress-left .progress-bar {
  animation: loading-5 1.5s linear forwards 1.5s;
}

@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(36);
    transform: rotate(36deg);
  }
}
@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(72);
    transform: rotate(72deg);
  }
}
@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(108);
    transform: rotate(108deg);
  }
}
@keyframes loading-4 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(144);
    transform: rotate(144deg);
  }
}
@keyframes loading-5 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180);
    transform: rotate(180deg);
  }
}
.progress {
  margin-bottom: 1em;
}


/* 
---------------------------------------------
About Us Style
--------------------------------------------- 
*/

#about {
  padding-top: 130px;
}

.about{
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
  
}


.about-us .section-heading {
  margin-bottom: 40px;
}

@media (max-width: 400px) {
  .about-us .section-heading h2{
text-align: left;
  }
  
}


@media (max-width: 400px) {
  .about-us .about-item{
    display: none;
  }
  
}

.about-us .left-image {
  margin-right: 45px;
}
 

.about-us .about-item h4 {
  font-size:38px;
  font-weight: 800;
  color:#088ec3;
}

.about-us .about-item h6 {
  font-size: 16px;
  margin-top: 5px;
  font-weight: 400;
  color: #2a2a2a;
  text-transform: capitalize;
} 


.about-us p {
  margin: 40px 0px;
  font-size:medium;
}

.about-vision{
  padding: 50px 0;
}

.hidden-image img {
  display: none;
}

/* Show the image only on mobile screens */
@media (max-width: 768px) {
  .hidden-image img {
    display: block;
    width: 100%; /* Ensure it scales properly for mobile screens */
    margin-top: 20px; /* Adjust spacing if necessary */
    object-fit: cover; /* Adjusts the image content */
  }
}

@media (max-width: 768px) {
  .left-image img {
    display: none;
  }
}


/* General Section Styling */
#about {
  padding: 40px 20px;

}

/* Paragraph Styling */
.about-paragraph {
  font-size: 1.1rem;
  line-height: 1.5; /* Improves readability */
  text-align: justify; /* Ensures proper alignment on both sides */
  margin-bottom: 20px;
  color: #333; /* Softer black for readability */
  font-weight: 400; /* Normal font weight for paragraph */
  letter-spacing: 0.5px; /* Slight spacing for elegance */
}

@media (max-width: 400px) {
  .about-paragraph {
    font-size: 0.90rem; /* Slightly smaller text for mobile */
  }
  .about-us col-lg-12 .about-paragraph p{
    font-size: 0.70rem; /* Slightly smaller text for mobile */
  }
  
}

/* Highlighted Text */
.highlighted-text {
  color: lightcoral; /* Matches the theme */
  font-weight: 600; /* Bold for emphasis */
  font-size: 1.4rem; /* Slightly larger than other text */
}


.section-title {
  text-align: center;
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 30px;
  color: #333;
}

/* Grid Layout for Focus Areas */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.focus-area {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.focus-area h3 {
  font-size: 1.5rem;
 
  margin-bottom: 15px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 2rem;
}

.focus-item {
  margin-bottom: 15px;
}

.focus-item h6 {
  color: #e74c3c;
  font-size: 1rem;
  font-weight:600;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.focus-item p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
  .focus-area h3 {
    font-size: 1.2rem;
  }

  .focus-item h6 {
    font-size: 0.9rem;
  }

  .focus-item p {
    font-size: 0.85rem;
  }
}
/* 
---------------------------------------------
Donation Style
--------------------------------------------- 
*/
  /* General Styling */



.donate h2{
font-size: 5rem !important;

}






  .main-donate {
    font-family: "Poppins", Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
  
    justify-content: center;
  }

  .donation-container {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 700px;
    width: 90%;
    padding: 60px;
    text-align: center;
    animation: fadeInUp 1s ease-out;
  }

  .donation-header {
    font-size: 1.8rem;
    margin-bottom: 20px;
    font-weight: bold;
  }

  .donation-details {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .donation-row {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    color: #333;
  }

  .donation-row span {
    font-weight: bold;
    color: #e74c3c;
  }
  
  .donation-row p{
    font-weight: bold;
  }

.donation-row img{
scale: 70%;
margin-top: -50px;
margin-bottom: -50px;
}

@media (max-width: 768px) {
  .donation-row img{
scale: 120%;
margin-top: 20px;
margin-bottom: 40px;
  }
}




  /* Keyframe Animation */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .donation-header {
      font-size: 1.5rem;
    }

    .donation-row {
      font-size: 0.95rem;
    }

    .donate-button {
      padding: 10px 15px;
    }
  }

/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/

.our-services {
  padding-top: 120px;
}

.our-services .section-heading {
  text-align: center;
  margin-left: 75px;
  margin-right: 75px;
}

.our-services .container-fluid {
  padding: 0px 80px;
}

@media (max-width: 500px) {
  .our-services .container-fluid {
    width: 400px;
  }
  
}

.service-item {
  padding: 30px 30px;
    border: 2px solid #f7f7f7;
  border-radius: 5px;
  transition: all .3s;
  margin-bottom: 30px;
  background-color: #fff;
  width: 100%;


}

@media (max-width: 500px) {
  .service-item {
    width: 360px;
    margin-left: -65px;
  }
}


.service-item:hover {
  background-color: #A0C49D;
  border: 2px solid transparent;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}

.service-item .icon {
  margin-top: 10px;
  width: 100px;
  height: 100px;
  display: inline-block;
  text-align: center;
  line-height: 80px;
  background-color: #f7f7f7;
  border-radius: 100%;
}

.service-item .icon img {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    overflow: hidden;
    object-fit: cover;
}

.service-item h4 {
  font-size: 22px;
  font-weight: 700;
  color: #128f1a;
  margin-bottom: 15px;
}

.service-btn{
  display: flex;
  align-items: center;
  justify-content: center;
}


.focus-section {
  padding: 60px 30px;
  background-color: #f9fdf9;
}

.section-title {
  font-family: "Poppins", sans-serif;
  text-align: center;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 40px;
  color: #2c6e49;
}






/* Focus Grid */
.focus-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
}

.focus-category {
  flex: 1 1 calc(50% - 15px); /* Two columns on desktop */
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.focus-category:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.category-title {
  font-family: "Poppins", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #4a4a4a;
  text-align: center;
  border-bottom: 2px solid #e8f5e9;
  padding-bottom: 10px;
}

/* Focus Cards */
.focus-list {
  margin-top: 20px;
}

.focus-section {
  background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
}


.focus-card {
  margin-bottom: 5px; /* Default margin for larger screens */
  padding: 15px 5px; /* Default padding for larger screens */
  background-color: #f5faf5; /* Background color */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow */
  transition: box-shadow 0.3s ease; /* Smooth shadow transition */
  max-width: 100%; /* Ensure it doesn't exceed the container width */
  box-sizing: border-box; /* Include padding in the element's width */
  overflow: hidden; /* Prevent content from overflowing */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .focus-card {
    margin-bottom: 15px; /* Reduce margin for smaller screens */
    padding: 10px 8px; /* Reduce padding for smaller screens */
  }
}

@media (max-width: 480px) {
  .focus-card {
    margin-bottom: 10px; /* Further reduce margin for very small screens */
    padding: 8px 5px; /* Further reduce padding for very small screens */
  }
}

.focus-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.focus-heading {
  font-family: "Poppins", sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  color: #2c6e49;
  margin-bottom: 8px;
}

.focus-description {
  font-family: "Poppins", sans-serif;
  font-size: 0.95rem;
  color: #555555;
  line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 200px) {
  .focus-grid {
    flex-direction: column;
  }
  .focus-category {
    flex: 1 1 100%;
  }
}


.content-slider {
  width: 100%;
  height: 180px;
}
.content-slider1 {
  width: 100%;
  height: 150px;
}

/* Responsive Design */
@media (max-width: 400px) {
  .content-slider {
    min-height: 410px;  
  }
}

@media (max-width: 400px) {
  .content-slider1 {
    min-height: 250px;
  }
}





.slider {
  
  
  height: 100%
  width: 100%;
  margin: 10px auto 0;
  overflow: visible;
  position: relative;
}

.mask {
  
  height: 350px;
}

.slider ul {
  margin: 0;
  padding: 0;
  position: relative;
}

.slider li {
  width: 98%;
  height: 100%;
  position: absolute;

  list-style: none;
}

.slider .quote {
  font-size: 21px;
  margin-bottom: 0px;
  color: #035f11;
  font-weight: 700;
}

.slider .source {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #555;
  text-align: justify;
  padding-top: 10px;
}

.slider li.anim1 {
  animation: cycle 30s linear infinite;
}

.slider li.anim2 {
  animation: cycle2 30s linear infinite;
}

.slider li.anim3 {
  animation: cycle3 30s linear infinite;
}

.slider li.anim4 {
  animation: cycle4 30s linear infinite;
}

.slider li.anim5 {
  animation: cycle5 30s linear infinite;
}


.slider:hover li {
  animation-play-state: paused;
}

@keyframes cycle {
  0% {
    top: 0px;
  }
  4% {
    top: 0px;
  }
  16% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  20% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  21% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  50% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  92% {
    top: -325px;
    opacity: 0;
    z-index: 0;
  }
  96% {
    top: -325px;
    opacity: 0;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}

@keyframes cycle2 {
  0% {
    top: -325px;
    opacity: 0;
  }
  16% {
    top: -325px;
    opacity: 0;
  }
  20% {
    top: 0px;
    opacity: 1;
  }
  24% {
    top: 0px;
    opacity: 1;
  }
  36% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  40% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  41% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@keyframes cycle3 {
  0% {
    top: -325px;
    opacity: 0;
  }
  36% {
    top: -325px;
    opacity: 0;
  }
  40% {
    top: 0px;
    opacity: 1;
  }
  44% {
    top: 0px;
    opacity: 1;
  }
  56% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  60% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  61% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@keyframes cycle4 {
  0% {
    top: -325px;
    opacity: 0;
  }
  56% {
    top: -325px;
    opacity: 0;
  }
  60% {
    top: 0px;
    opacity: 1;
  }
  64% {
    top: 0px;
    opacity: 1;
  }
  76% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  80% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  81% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
  100% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
}

@keyframes cycle5 {
  0% {
    top: -325px;
    opacity: 0;
  }
  76% {
    top: -325px;
    opacity: 0;
  }
  80% {
    top: 0px;
    opacity: 1;
  }
  84% {
    top: 0px;
    opacity: 1;
  }
  96% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  100% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
}


/* 
.sliding-sections {

  text-align: justify;
  
}

.section {
  margin-bottom: 2px;
  text-align: center;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}

.slider-wrapper {
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  max-width:500px;
}

.slider {
  display: flex;
  transition: transform 0.7s ease-in-out;
}

.slider-item {
  min-width: 100%;
  padding: 40px;
  box-sizing: border-box;
  text-align: center;
  background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.slider-heading {
  font-size: 21px;
  margin-bottom: 0px;
  color: #035f11;
  font-weight: 700;
}

.slider-paragraph {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #555;
  text-align: justify;
  padding-top: 10px;
}

.slider-controls {
  margin-top: 30px;
}

.slider-controls button {
  padding: 5px 30px;
  margin: 0 10px;
  font-size: 15px;
  background-color: #148d61;
  color: #fff;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.slider-controls button:hover {
  background-color: #013b28;
}
 */







/* 
---------------------------------------------
Portfolio
--------------------------------------------- 
*/

.our-portfolio {
  padding-top: 100px;
  overflow: hidden;
  
}

.our-portfolio .container-fluid {
  padding-right: 0px;
  padding-left: 0px;
}

.portfolio-item {
  margin-bottom: 30px;
  border-radius: 50px;
}

@media (max-width: 500px) {
  .portfolio-item {
    width: 360px;
    padding: 100px;
  }
  
}

.portfolio-item:hover .thumb .hover-content {
  opacity: 0;
  visibility: visible;
}

.portfolio-item .thumb {
  position: relative;
  border-radius: 50px;
}

.portfolio-item .thumb img {
  border-radius: 50px;
  overflow: hidden;
  height: 300px;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s;
  animation: slide 20s linear infinite ;
  

}

.portfolio-item .thumb img:hover {
  

  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
  opacity: 1;
  transform: scale(1.15);
  -ms-transform: scale(1.15);
  -webkit-transform: scale(1.15);

}


.portfolio-item .thumb .hover-content {
  border-radius: 50px;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  background: rgb(51,204,197);
  background: linear-gradient(105deg, rgba(51,204,197,1) 0%, rgba(8,141,195,1) 100%);
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all .5s;
}

.portfolio-item .thumb .hover-content .inner-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
}

.portfolio-item .thumb .hover-content .inner-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.portfolio-item .thumb .hover-content .inner-content span {
  font-size: 15px;
  color: #fff;
}

.our-portfolio .owl-nav {
  display: inline-block!important;
  position: absolute;
  top: -117px;
  right: 15%;
  max-width: 1320px;
}

.our-portfolio .owl-nav .owl-next {
  margin-left: 10px;
}

.our-portfolio .owl-nav span {
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 35px;
  font-size: 30px;
  border: 2px solid #eee;
  border-radius: 50%;
  color: #ddd;
  transition: all 0.5s;
}

.our-portfolio .owl-nav span:hover {
  color: #33ccc5;
  border-color: #33ccc5;
}


    /* Fullscreen overlay styling */
    .fullscreen-overlay {
      display: none; /* Hidden by default */
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }
    .fullscreen-overlay img {
      
      max-width: 50%;
      max-height: 50%;
      border-radius: 20px;
      object-fit: contain;
      border-radius: 4%;
    }
    .fullscreen-overlay span {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 30px;
      color: white;
      cursor: pointer;
    }


    @keyframes slide {
      0% {
        transform: translateX(100%); /* Start off-screen from the right */
      }
      100% {
        transform: translateX(-100%); /* Move completely off-screen to the left */
      }
    }

/* 
---------------------------------------------
contact
--------------------------------------------- 
*/

.contact-us {
  margin-top: 0px;
  padding: 120px 0px;
  background-image: url(../images/collage.jpg);
  background-repeat: repeat;
  background-position: center center;
 
  /* background-size: cover; */
}



@media (max-width: 500px) {
  .contact-us {
    height: 800px;
  }
  
}



.contact-us .section-heading {
  text-align: center;
  margin-left: 20px;
  margin-right: 20px;
}

.contact-us .contact-info {
  padding: 40px 30px;
  border: 2px solid #eee;
}

.contact-us .contact-info ul li {
  text-align: center;
  display: block;
  margin-bottom: 30px;
}

.contact-us .contact-info ul li a {
  font-size: 15px;
  color: #afafaf;
  transition: all .5s;
}

.contact-us .contact-info ul li:hover a {
  color: #2a2a2a;
}

.contact-us .contact-info ul li:last-child {
  margin-bottom: 0px;
}

.contact-us .contact-info ul li .icon {
  margin-bottom: 10px;
}

.contact-us .contact-info ul li .icon img {
  max-width: 32px;
}

form#contact {
  position: relative;
  background-color: #fff;
  padding: 60px 80px;
  border-radius: 50px;
  text-align: center;
}

form#contact input {
  width: 100%;
  height: 46px;
  border-radius: 5px;
  background-color: transparent;
  border: 2px solid #efefef;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 0px 20px;
  margin-bottom: 20px;
}

form#contact input::placeholder {
  color: #000000;
}

form#contact textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  max-height: 180px;
  min-height: 140px;
  height: 140px;
  border-radius: 5px;
  background-color: transparent;
  border: 2px solid #efefef;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 15px 20px;
  margin-bottom: 20px;
}

form#contact textarea::placeholder {
  color: #aaa;
}

form#contact button {
  display: inline-block;
  background-color: #168214;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  margin-top: 20px;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border-bottom: 2px solid #000000!important;
  transition: all .3s;
  outline: none;
  border: none;
}

form#contact button:hover {
  background-color: #000000!important;
  color: #fff!important;
  border-bottom: 2px solid #ffffff!important;
}

/* 
---------------------------------------------
Blog Style
--------------------------------------------- 
*/
/* General Styles */
/* Article Styling */

.service-item .icon img {
  width: 100%; /* Responsive Image */
  border-radius: 8px;
}

/* Fullscreen Overlay */
.fullscreen-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  overflow: auto;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.fullscreen-content {
  background: rgb(220, 237, 213);
  border-radius: 10px;
  padding: 20px;
  max-width: 800px;
  width: 100%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.fullscreen-content img {
  width: 100%; /* Responsive Image */
  border-radius: 8px;
  margin-bottom: 20px;
}

.fullscreen-content h2 {
  font-weight: 700;
  color: #168214;
  margin-top: 0;
}

.fullscreen-content p {
  text-align: justify;
  line-height: 1.6;
}

.close-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 15px;
  background: #034d26;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.close-btn:hover {
  background: #000b05;
}

/* Responsive Design */
/* Large Screens (≥ 992px) */
@media (min-width: 992px) {
  .article {
    flex: 1 1 calc(33.33% - 20px); /* Three articles per row */
    max-width: calc(33.33% - 20px); /* Ensure articles are equal in width */
  }
}

/* Medium Screens (≤ 992px and ≥ 768px) */
@media (max-width: 992px) and (min-width: 768px) {
  .article {
    flex: 1 1 calc(50% - 20px); /* Two articles per row */
    max-width: calc(50% - 20px); /* Ensure articles are equal in width */
  }
}

/* Small Screens (≤ 576px) */
@media (max-width: 576px) {
  .article {
    flex: 1 1 100%; /* One article per row */
    max-width: 100%; /* Ensure articles take full width */
  }
}
/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/
/* General Styling */
.banner-section {

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 80vh; /* Adjust if needed to occupy more vertical space */
    padding: 10px -100 ; /* Padding for spacing from navbar */
    background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
    border-radius: 10px;
  }


/* Typography */
.banner-title {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: #2c6e49;
}

.banner-description {
  font-family: "Poppins", sans-serif;
  font-size: 1.4rem;
  line-height: 1.8;
  margin-top: 20px;
  color: #4a4a4a;
}

@media (max-width: 500px) {
  
  .banner-description {
   text-align: left;
   margin-bottom: 15px;
  }
  
}

.banner-description .highlight {
  color: #2c6e49;
  font-weight: 700;
}

/* Video Section */
.video-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 100px; /* Increased space to push it further down */
  margin-bottom: 60px; /* Optional: Adds spacing below the video */
}

.video-wrapper {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* .video-wrapper video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 15px;
} */
.video-wrapper img {
  width: 400px;
  height: 400px;
  /* width: 100%; */
  height: auto;
  display: block;
  border-radius: 15px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .banner-section .row {
    flex-direction: column-reverse;
    text-align: center;
  }

  .banner-title {
    font-size: 2rem;
  }

  .video-wrapper {
    margin-top: 20px;
  }
}

/* General Section Styling */


/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/
footer{
  align-self: baseline;
}

footer p {
  text-align: center;
  margin: 30px 0px;

}

footer p a {
  color: #000000;
  transition: all .5s;
}

footer p a:hover {
  color: #000000;
}

/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

@media (max-width: 500px) {
  .header-area .main-nav .logo h4 {
    font-size: 24px;
  }
  .header-area .main-nav .logo h4 img {
scale: 4;
    padding-left: 22px;
  }
  /* .header-area .main-nav .nav li:last-child {
    padding-left: 20px;
  } */
}

@media (max-width: 992px) {
  .header-area .main-nav .logo h4 {
    font-size: 20px;
  }
  .main-banner .left-content {
    margin-right: 0px;
  }
  .main-banner {
    text-align: center;
  }
  .main-banner:before {
    display: none;
  }
  .main-banner .about_right-image {
    margin: 30px auto 0px auto;
    text-align: center;
  }




  .features-item {
    margin-bottom: 45px;
  }
  .last-features-item,
  .last-skill-item {
    margin-bottom: 0px !important;
  }
  .skill-item {
    margin-bottom: 30px;
  }
  .service-item {
    text-align: center;
  }
  .service-item .icon {
    margin-top: 0px;
    margin-bottom: 30px;
  }
  .about-us .left-image {
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 45px;
    
   
  }
  .our-portfolio .owl-nav {
    display: none !important;
  }
  .contact-info {
    margin-top: 60px;
  }
  form#contact {
    padding: 45px;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo h4 {
    font-size: 30px;
  }
  .header-area .main-nav .logo h4 img {
    max-width: 70px;
    margin-left: 5px;
  }
  .main-banner .info-stat {
    margin-bottom: 15px;
  }
  .service-item {
    text-align: center;
    padding: 30px;
  }
  .service-item .icon {
    float: none;
    margin-right: 0px;
    margin-bottom: 15px;
  }
  .service-item .right-content {
    display: inline-block;
  }
  .our-portfolio .section-heading,
  .about-us .section-heading,
  .about-us .about-item,
  .about-us p,
  .about-us .main-green-button {
    text-align: center;
  }
  .our-services .section-heading {
    margin-left: 15px;
    margin-right: 15px;
  }
  .about-us .about-item {
    margin-top: 15px;
  }
  form#contact {
    padding: 30px;
  }
}
/* General Footer Styles */
/* General Footer Styles */
.footer {
  background-color: #2b2b2b;
  color: #f9f9f9;
  padding: 50px 20px;
  font-family: 'Arial', sans-serif;
}

.footer__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Footer Section Styling */
.footer__section {
  flex: 1 1 calc(25% - 20px);
  min-width: 200px;
}

.footer__logo img {
  width: 270px;
  
}

.footer__logo p {
  font-size: 0.9rem;
  margin-top: 10px;
  color: #ccc;
}

.footer__section h2 {
  font-size: 1.2rem;
  margin-bottom: 15px;
  color: #f5b041;
}

.footer__section ul {
  list-style: none;
  padding: 0;
}

.footer__section ul li {
  font-size: 0.95rem;
  margin-bottom: 10px;
  color: #ddd;
}

.footer__section ul li strong {
  color: #f5b041;
}

.footer__section ul li a {
  color: #f9f9f9;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer__section ul li a:hover {
  color: #f5b041;
}

/* Social Media Section */
.footer__social {
  text-align: center;
}

.footer__social a {
  font-size: 2rem;
  color: #f9f9f9;
  margin: 0 10px;
  transition: color 0.3s ease;
}

.footer__social a:hover {
  color: #f5b041;
}

/* Responsive Design */
@media (max-width: 768px) {
  .footer__container {
    flex-direction: column;
    text-align: center;
  }

  .footer__section {
    flex: 1 1 100%;
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .footer__logo img {
    max-width: 200px;
  }

  .footer__section h2 {
    font-size: 1rem;
  }

  .footer__section ul li {
    font-size: 0.85rem;
  }

  .footer__social a {
    font-size: 1.8rem;
  }
}




/* Hover Cards in Index */



@import url('https://fonts.googleapis.com/css?family=Lato:300,900');

$transition-ease-in-out: all .25s ease-in-out 0s;
$transition-cubic-bezier : all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55);
$animation-offset: 80px;

*, :after, :before {
    box-sizing: border-box;
}


strong {
	font-weight: 900;
}
.canvas-wrapper {
  margin-top: -110px;
  scale: 0.5;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	
	.canvas + .canvas {
		margin-left: 40px;
	}
}
.canvas {
	position: relative;
	display: block;
	width: 400px;
	height: 400px;
	color: inherit;
	text-decoration: none;
}
.canvas_border {
	position: absolute;
	top: 40px;
	left: -80px;
	height: 100%;
	width: 100%;
	z-index: 0;

	svg {
		height: 100%;
		width: 100%;
	}
}






.rect-gradient {
	stroke-dasharray: 2000;
	stroke-dashoffset: 2000;
	animation: erase-line 1s ease-in-out forwards;
}
.canvas_img-wrapper {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transform: rotate(-10deg) skew(-10deg);
	overflow: hidden;
	background: white;
}
.canvas_img {
	transform: scale3d(.9,.9,.9);
	opacity: .8;
	max-width: 200px;
	max-height: 200px;
}
.canvas_copy {
	position: absolute;
	bottom: 0;
	left: 85%;
	text-transform: uppercase;
	color: #dac527;
	z-index: 100;
}
.canvas_copy--left {
	left: -25%;
}
.canvas_copy_title {
	font-size: 62px;
	display: block;
	transform: translateX(-#{$animation-offset});
		transition: $transition-cubic-bezier 0s;
		color: black;

		&:nth-child(1) {
			transition-delay: 0.1s;
			}
		&:nth-child(2) {
			transition-delay: 0.2s;
			}
}
.canvas_copy_subtitle {
	display: block;
	transform: rotate(270deg) translateY(-100%) translateX(calc(-100% - #{$animation-offset}));
	transform-origin: top left;
	position: absolute;
	left: 0;
	top: 8px; //This needs to change with font size. It's an offset for the line-height of the "hellow world"
	font-size: 24px;
	font-weight: 900;
	transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.35s;
}
.canvas_copy_details {
	display: block;
	transition: $transition-cubic-bezier 0.14s;
	transform: translateX(-#{$animation-offset});
		}
.canvas_border, .canvas_img-wrapper, .canvas_img  {
	transition: $transition-ease-in-out;	
}
.canvas_border, .canvas_img-wrapper {
	transform: rotate(-10deg) skew(-10deg);	
}
.canvas_copy_title, .canvas_copy_subtitle, .canvas_copy_details {
	opacity: 0;
}
.canvas:hover {
	.canvas_copy_title, .canvas_copy_subtitle, .canvas_copy_details, .canvas_img {
		opacity: 1;
	}
	.canvas_border, .canvas_img-wrapper {
		transform: rotate(-14deg) skew(-14deg) scale(0.96);
	}
	.canvas_img {
		transform: scale3d(1,1,1);
	}
	.canvas_copy_title, .canvas_copy_details {
		transform: translateX(0);
	}
	.canvas_copy_subtitle {
		transform: rotate(270deg) translateY(-100%) translateX(-100%);
	}
	.rect-gradient {
		animation: draw-line 3s cubic-bezier(0.19, 1, 0.22, 1) forwards;
	}
}

@keyframes draw-line {
	from {
		stroke-dashoffset: 2000;		
	}
	to {
		stroke-dashoffset: 0;
	}
}
@keyframes erase-line {
	from {
		stroke-dashoffset: 0;
	}
	to {
		stroke-dashoffset: 2000;		
	}
}
@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}